/* ===================== SoundUp — theme ===================== */
:root{
  --bg:#0a0b0f;
  --bg-2:#12131a;
  --panel:#16181f;
  --panel-2:#1c1f28;
  --line:#262a35;
  --line-soft:#20232c;
  --text:#e8eaf0;
  --muted:#8b90a0;
  --muted-2:#5f6474;
  --accent:#7c5cff;
  --accent-2:#a78bff;
  --up:#22c98b;
  --up-bg:rgba(34,201,139,.12);
  --down:#f6465d;
  --down-bg:rgba(246,70,93,.12);
  --gold:#ffcf5c;
  /* Oro usato come TESTO: sui fondi scuri va bene l'oro pieno, sul chiaro no
     (1,4:1 su bianco). Separato da --gold, che resta il colore di riempimento
     dei badge e deve restare acceso in ogni tema. */
  --gold-ink:#ffcf5c;
  /* Colore del testo SOPRA un riempimento d'accento. Non e' sempre bianco:
     con accento giallo, arancio o verde chiaro il bianco diventa illeggibile.
     Ogni tema e ogni accento lo ridichiara se serve. */
  --on-accent:#fff;
  /* Accento usato come TESTO (link, pill, tag): sui temi scuri e' la
     variante chiara; il tema chiaro lo ridichiara scuro per accento. */
  --accent-ink:var(--accent-2);
  /* Sfondo della barra in alto: era fisso e scuro, quindi nel tema chiaro il
     testo scuro finiva su una barra scura. */
  --topbar-bg:rgba(18,19,26,.85);
  --radius:14px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: var(--bg);
  background-image: 
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(124, 92, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(34, 201, 139, 0.05), transparent 70%),
    radial-gradient(ellipse 80% 50% at 80% 60%, rgba(124, 92, 255, 0.06), transparent 70%);
  background-attachment: fixed;
  color:var(--text);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.muted{color:var(--muted)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ===================== brand ===================== */
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em}
.brand-mark{
  color:var(--accent);font-size:20px;
  filter:drop-shadow(0 0 10px rgba(124,92,255,.7));
}
.brand-name{font-size:22px}
.brand.small .brand-name{font-size:18px}
.brand.small .brand-mark{font-size:16px}
.accent{color:var(--accent-ink)}

/* ===================== AUTH ===================== */
.auth-screen {
  position: relative;
  z-index: 9999;
  min-height: 100vh;
  display: grid;
  place-items: center;
  /* Il padding alto e basso tiene conto delle zone occupate dal telefono:
     con viewport-fit=cover la pagina si estende SOTTO la tacca e la barra
     di stato, e senza questo margine il marchio SoundUp finiva coperto. */
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px
           calc(24px + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
}
.auth-card {
  position: relative;
  z-index: 10001;
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: var(--shadow);
  pointer-events: auto;
}
.auth-card button,
.guest-entry button,
.tutorial-cta,
.auth-tab,
.role-opt,
.oauth-btn {
  position: relative;
  z-index: 10002;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.auth-card .brand{justify-content:center;margin-bottom:8px}
.tagline{text-align:center;color:var(--muted);font-size:13px;margin-bottom:22px;line-height:1.5}
.auth-tabs{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:20px}
.auth-tab{flex:1;padding:9px;border-radius:7px;color:var(--muted);font-weight:600;font-size:13px;transition:.15s}
.auth-tab.active{background:var(--accent);color:var(--on-accent)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500}
.field input{
  width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;color:var(--text);font-size:14px;transition:.15s;
}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,255,.15)}
.auth-error{color:var(--down);font-size:12.5px;min-height:16px;margin-bottom:8px}
.disclaimer{margin-top:18px;font-size:11px;color:var(--muted-2);line-height:1.5;text-align:center}
.disclaimer strong{color:var(--muted)}

.btn-primary{background:var(--accent);color:var(--on-accent);font-weight:700;padding:12px 18px;border-radius:10px;transition:.15s;font-size:14px}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-block{width:100%}

/* ===================== TOPBAR ===================== */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  display:flex;flex-direction:column;
  /* Il padding in alto scende dalla zona che il telefono si tiene per se':
     tacca, fotocamera, barra di stato. Serve perche' index.html dichiara
     viewport-fit=cover e la barra di stato traslucida — cioe' chiede
     apposta di disegnare sotto quella zona — e la topbar e' alta 52px:
     senza compenso, su un iPhone aggiunto alla schermata Home il marchio
     SoundUp e il saldo finivano sotto l'orologio. Il resto del foglio
     compensava gia' il bordo BASSO (la barra gesti), non quello alto. */
  padding:env(safe-area-inset-top, 0px) 0 0;
  background:var(--topbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;width:100%;
}
.topbar-main{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:10px 24px;height:52px;border-bottom:1px solid rgba(255,255,255,0.06);
}
.tabs{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:6px 16px 8px;background:rgba(0,0,0,0.15);
  min-width:0;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;flex-wrap:nowrap;
}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{flex-shrink:0}
.tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;color:var(--muted);font-weight:600;font-size:13px;line-height:1.2;transition:all .15s ease;white-space:nowrap}
.tab .ico{width:16px;height:16px;flex-shrink:0;stroke-width:2}
.tab span{display:inline-block;vertical-align:middle}
.tab:hover{color:var(--text);background:var(--panel)}
.tab.active{color:var(--text);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--accent)}
.account{margin-left:auto;display:flex;align-items:center;gap:16px}
.wallet{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.wallet-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.wallet-value{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--up)}
.user-chip{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 8px 6px 12px;font-weight:600;font-size:13px}
/* display:grid + place-items centra l'icona dentro il quadrato del tasto.
   Prima il contenuto era un carattere di testo e si appoggiava alla linea di
   base del font: sostituendolo con un SVG serviva un centraggio vero, altrimenti
   l'icona restava schiacciata in alto. */
.user-chip button{
  display:grid;place-items:center;
  color:var(--muted);font-size:15px;width:26px;height:26px;border-radius:6px;transition:.15s;
}
.user-chip button svg{width:17px;height:17px}
.user-chip button:hover{background:var(--down-bg);color:var(--down)}

/* ===================== CONTENT ===================== */
.content{max-width:1180px;width:100%;margin:0 auto;padding:26px 22px 60px;flex:1}
.view-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;gap:16px;flex-wrap:wrap}
.view-head h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.view-head .muted{font-size:13px;margin-top:2px}
.market-tools{display:flex;gap:10px;flex-wrap:wrap}
.market-tools input,.market-tools select{
  padding:9px 13px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:13px;
}
.market-tools input{width:240px}
.market-tools input:focus,.market-tools select:focus{outline:none;border-color:var(--accent)}

/* Dropdown personalizzati (Paese/Rank): una <select> nativa non può mostrare
   bandiere SVG o rombetti colorati nelle opzioni, quindi qui si usa un
   menu HTML aperto/chiuso a mano. */
.filter-dropdown{position:relative}
.filter-dropdown-btn{
  display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:13px;cursor:pointer;
}
.filter-dropdown-btn:hover{border-color:var(--accent)}
.filter-dropdown-arrow{font-size:10px;color:var(--muted)}
.filter-dropdown-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:190px;max-height:280px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.35);
  z-index:40;padding:6px;
}
.filter-dropdown-menu.hidden{display:none}
.filter-dropdown-option{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;font-size:13px;cursor:pointer;white-space:nowrap;
}
.filter-dropdown-option:hover{background:var(--panel-2)}
.filter-dropdown-option .flag-ico,.filter-dropdown-option svg{flex-shrink:0}
.filter-dropdown-option svg{width:18px;height:13px;border-radius:2px}
.filter-dropdown-option .rank-diamond{margin:0;flex-shrink:0}

/* ===================== TABLE ===================== */
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mkt-table{width:100%;border-collapse:collapse}
.mkt-table thead th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--bg-2);
}
.mkt-table thead th.num{text-align:right}
.mkt-table tbody td{padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.mkt-table tbody tr:last-child td{border-bottom:none}
.mkt-table tbody tr{transition:.12s}
.mkt-table tbody tr.clickable:hover{background:var(--panel-2)}

.track-cell{display:flex;align-items:center;gap:12px}
.avatar{width:38px;height:38px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;letter-spacing:.02em}
.track-meta{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.track-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-sub{font-size:12px;color:var(--muted)}
.ticker-badge{font-size:10.5px;font-weight:700;color:var(--accent-ink);background:rgba(124,92,255,.12);padding:1px 6px;border-radius:5px;margin-right:6px;letter-spacing:.03em}
.genre-tag{font-size:11.5px;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:4px 9px;border-radius:20px;white-space:nowrap}

.price-val{font-weight:700;font-variant-numeric:tabular-nums}
.chg{font-weight:700;font-variant-numeric:tabular-nums;padding:3px 8px;border-radius:6px;font-size:12.5px;display:inline-block;min-width:64px;text-align:right}
.chg.up{color:var(--up);background:var(--up-bg)}
.chg.down{color:var(--down);background:var(--down-bg)}
.chg.flat{color:var(--muted);background:var(--bg)}

.pop-wrap{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.pop-bar{width:60px;height:6px;background:var(--bg);border-radius:4px;overflow:hidden}
.pop-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:4px}
.pop-num{font-size:12px;color:var(--muted);width:28px;text-align:right}

.btn-trade{background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:8px;transition:.15s}
.btn-trade:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.spark{display:block}

/* ===================== STAT CARDS ===================== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stat-big{display:block;font-size:26px;font-weight:800;margin-top:8px;font-variant-numeric:tabular-nums}

/* sotto-schede dentro una vista (es. Portafoglio: Posizioni / Storico ordini) */
.subtabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:16px;width:fit-content}
.subtab{padding:8px 16px;border-radius:8px;color:var(--muted);font-weight:600;font-size:13px;transition:.15s}
.subtab:hover{color:var(--text)}
.subtab.active{background:var(--accent);color:var(--on-accent)}

.empty{padding:40px;text-align:center;color:var(--muted)}
.pos{color:var(--up)}.neg{color:var(--down)}

/* ===================== DRAWER ===================== */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200 !important;backdrop-filter:blur(4px)}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:460px;max-width:94vw;z-index:201 !important;
  background:var(--bg-2);border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.5);
  overflow-y:auto;animation:slideIn .22s ease;
}
@keyframes slideIn{from{transform:translateX(30px);opacity:.4}to{transform:translateX(0);opacity:1}}
.drawer-head{padding:22px 24px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-2);z-index:2}
.drawer-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:8px;color:var(--muted);font-size:18px;background:var(--panel)}
.drawer-close:hover{background:var(--panel-2);color:var(--text)}
.d-title-row{display:flex;align-items:center;gap:14px}
.d-title-rank{margin-left:auto;flex-shrink:0}
.d-title h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.d-title .sub{color:var(--muted);font-size:13px;margin-top:2px}
.d-price-row{display:flex;align-items:baseline;gap:12px;margin-top:16px}
.d-price{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums}
.d-body{padding:20px 24px}
.chart-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 8px 6px;margin-bottom:18px}
/* Selettore periodi a sinistra e etichetta subito dopo: allineati al bordo
   del grafico. Prima erano spinti a destra e l'etichetta finiva tagliata. */
.chart-toolbar{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 4px 8px;flex-wrap:wrap}
.chart-range-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 14px}
.metric .m-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.metric .m-val{font-size:18px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums}
.bio{font-size:12.5px;color:var(--muted);line-height:1.6;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 14px;margin-bottom:20px}
.bio b{color:var(--text)}

/* trade panel */
.trade-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:18px}
.side-toggle{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:4px;margin-bottom:14px}
.side-toggle button{flex:1;padding:9px;border-radius:6px;font-weight:700;color:var(--muted);font-size:13px;transition:.15s}
.side-toggle button.buy.active{background:var(--up);color:#04140c}
.side-toggle button.sell.active{background:var(--down);color:#1a0407}
.trade-field{margin-bottom:12px}
.trade-field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.trade-field input{width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.trade-field input:focus{outline:none;border-color:var(--accent)}
.quick-amts{display:flex;gap:6px;margin-bottom:14px}
.quick-amts button{flex:1;padding:7px;background:var(--bg);border:1px solid var(--line);border-radius:7px;font-size:11.5px;color:var(--muted);font-weight:600;transition:.12s}
.quick-amts button:hover{border-color:var(--accent);color:var(--text)}
.quick-amts button.qa-custom{flex:1.4;color:var(--accent);border-color:rgba(124,92,255,.35);background:rgba(124,92,255,.08)}
.quick-amts button.qa-custom:hover{background:rgba(124,92,255,.16)}
.trade-summary{font-size:13px;padding:10px 0 4px;border-top:1px solid var(--line);margin-bottom:12px}
.ts-row{display:flex;justify-content:space-between;padding:4px 0;font-variant-numeric:tabular-nums}
.ts-row.ts-total{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:9px;font-weight:800;font-size:15px}
.btn-execute{width:100%;padding:13px;border-radius:10px;font-weight:800;font-size:14.5px;transition:.15s}
.btn-execute.buy{background:var(--up);color:#04140c}
.btn-execute.buy:hover{background:#1fd898}
.btn-execute.sell{background:var(--down);color:#fff}
.btn-execute.sell:hover{background:#ff5870}
.own-note{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}
.btn-execute:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}

/* bandiere come SVG inline (non emoji: su Windows le emoji-bandiera spesso
   non si compongono e mostrano solo il codice testuale, es. "GB") */
/* Riquadro in rapporto 3:2 esatto, come il viewBox dell'SVG: con 18x13 la
   bandiera veniva schiacciata e lasciava bande vuote dentro il bordo. */
/* Misura in em, non in pixel fissi: la bandiera accompagna un nome, quindi
   deve stare in scala con quel nome. A 21x14px fissi finiva per essere piu'
   ALTA del testo che accompagnava — nelle schede della Hype il nome
   dell'artista e' 10,5px e la bandiera 14px: sembrava incollata sopra la
   riga invece di farne parte. Con 1.5em x 1em il rapporto 3:2 resta esatto e
   la bandiera cresce e si rimpicciolisce col testo, in ogni schermata.

   Una sola linea di contorno e nessun alone interno: l'anello bianco da 1px
   dentro il bordo su una bandiera alta dieci pixel ne copriva un quinto e la
   faceva sembrare slavata. Il contorno scuro basta a staccarla dal fondo,
   comprese le bandiere con il bianco sul bordo (Italia, Francia). */
.flag-ico{display:inline-flex;width:1.5em;height:1em;border-radius:.15em;overflow:hidden;
  vertical-align:-.12em;margin-right:.45em;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.flag-ico svg{width:100%!important;height:100%!important;display:block}
.flag-ico.big{width:42px;height:28px;border-radius:5px;margin-right:0}
/* Nelle Card a schermo intero il testo e' piu' grande: la bandiera cresce
   con lui, sempre in rapporto 3:2, e resta allineata alla riga. */
.reel-artist-row .flag-ico{width:24px;height:16px;margin-right:0}
.track-card svg:not(.flag-ico svg){max-width:24px;max-height:24px}

/* provenienza nel dettaglio */
.origin-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:18px}
.origin-country{font-weight:700;font-size:14px}
.origin-lang{font-size:12px;margin-top:2px}

/* sezione social */
.social-section{margin-bottom:20px}
.social-section h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
/* Anteprima della Card dentro la scheda del brano. NON e' la stessa cosa
   della Card a schermo intero del feed: quella piu' sotto impone color:#fff
   e height:100%, e condividendo la classe rendeva questo testo bianco su
   pannello chiaro, cioe' invisibile nel tema Light. */
.track-card-preview{display:flex;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;transition:.15s;margin-bottom:10px;color:var(--text)}
.reel-thumb{position:relative;width:76px;height:100px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;overflow:hidden}
.reel-play{font-size:22px;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));opacity:.95}
.reel-info{display:flex;flex-direction:column;justify-content:center;min-width:0}
.reel-caption{font-weight:700;font-size:13.5px;line-height:1.35;margin-bottom:5px}
.reel-meta{font-size:11.5px;color:var(--muted);margin-bottom:6px}
.reel-tags{font-size:11px;color:var(--accent-ink);word-break:break-word}
.social-btns{display:flex;gap:10px}
.social-btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:10px;font-weight:700;font-size:12.5px;text-decoration:none;color:var(--text);border:1px solid var(--line);background:var(--panel);transition:.15s}
.social-btn:hover{transform:translateY(-1px)}
.social-btn.tiktok:hover{border-color:#fff;background:#0c0c0f}
.social-btn.ig:hover{border-color:#e1306c;background:linear-gradient(135deg,rgba(225,48,108,.18),rgba(253,203,80,.12))}
.social-btn.spotify:hover{border-color:#1db954;background:rgba(29,185,84,.12)}
.social-btn.apple:hover{border-color:#fa233b;background:rgba(250,35,59,.12)}
.social-btn.amazon:hover{border-color:#25d1da;background:rgba(37,209,218,.12)}
.social-btn.youtube:hover{border-color:#ff0033;background:rgba(255,0,51,.12)}

/* Attesa fra il tocco e il primo suono: il comando resta acceso e pulsa, cosi'
   il play non sembra mai "non aver fatto niente". */
@keyframes su-play-wait{0%,100%{opacity:1}50%{opacity:.45}}
.play-btn.loading,.mp-btn.loading,.reel-playpad.loading{animation:su-play-wait .9s ease-in-out infinite}
.social-btn .sb-handle{color:var(--muted);font-weight:500;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Il segno del social prende il colore dell'accento attivo: e' un'icona di
   tratto, non un'emoji, quindi si tinge davvero. Al passaggio del mouse la
   scheda si colora del brand e l'icona torna al colore del testo, altrimenti
   accento su accento sparirebbe. */
.social-btn .sb-ico{display:inline-flex;flex-shrink:0;color:var(--accent-ink)}
.social-btn .sb-ico .ico{width:17px;height:17px;display:block}
.social-btn:hover .sb-ico{color:var(--text)}

@media (max-width:480px){
  .social-btns{flex-direction:column}
}

/* banner ricavi piattaforma nella classifica */
.platform-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,rgba(124,92,255,.14),rgba(34,201,139,.08));border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:18px;flex-wrap:wrap}
.platform-banner .pb-ico{font-size:26px}
.platform-banner .pb-text{flex:1;min-width:180px}
.platform-banner .pb-title{font-weight:800;font-size:14px}
.platform-banner .pb-sub{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.platform-banner .pb-nums{display:flex;gap:22px}
.platform-banner .pb-nums>div{display:flex;flex-direction:column;align-items:flex-end}
.platform-banner .pb-big{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.platform-banner .pb-lab{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.drawer-error{padding:50px 24px;text-align:center}
.drawer-error .err-icon{font-size:38px;margin-bottom:14px}
.drawer-error .err-title{font-weight:700;font-size:16px;margin-bottom:8px}
.drawer-error .muted{font-size:13px;line-height:1.6;margin-bottom:20px}
.drawer-error code{background:var(--panel);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-size:12px}

.trades-list{margin-top:4px}
.trades-list h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.trade-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.trade-row:last-child{border-bottom:none}
.trade-row .tr-user{color:var(--muted)}
.pill{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px}
.pill.buy{color:var(--up);background:var(--up-bg)}
.pill.sell{color:var(--down);background:var(--down-bg)}

/* ===================== TOAST ===================== */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:13px 20px;font-weight:600;font-size:13.5px;box-shadow:var(--shadow);animation:toastIn .2s ease}
.toast.ok{border-color:var(--up);color:var(--up)}
.toast.err{border-color:var(--down);color:var(--down)}
@keyframes toastIn{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ===================== badge origine (AI / Hybrid) ===================== */
.origin-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.04em;color:#0a0b0f;
  padding:1px 5px;border-radius:4px;margin-left:7px;vertical-align:middle}
.origin-badge.lg{font-size:11px;padding:2px 7px;margin-left:9px}
.origin-badge.ai{background:linear-gradient(135deg,#a78bff,#22c98b)}
.origin-badge.hybrid{background:linear-gradient(135deg,#ffcf5c,#a78bff)}

/* ===================== rank (Steel..Platinum) ===================== */
.rank-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.03em;
  padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;border:1px solid rgba(255,255,255,.15)}
.rank-badge.lg{font-size:11px;padding:2px 8px;margin-left:8px}
.rank-badge.steel{background:#17181b;color:#7d838c;border-color:rgba(255,255,255,.08)}
.rank-badge.copper{background:#241510;color:#8a5a35;border-color:rgba(138,90,53,.35)}
.rank-badge.bronze{background:rgba(230,146,58,.20);color:#ff9f45;border-color:rgba(230,146,58,.5)}
.rank-badge.silver{background:#5a6068;color:#eef1f4}
.rank-badge.gold{background:rgba(255,207,92,.18);color:var(--gold);border-color:rgba(255,207,92,.4)}
.rank-badge.platinum{background:linear-gradient(135deg,rgba(255,158,207,.28),rgba(126,203,255,.28));color:#ffe3f3;border-color:rgba(255,158,207,.5)}

.rank-progress-label{font-size:11.5px;color:var(--muted);margin-bottom:6px}
.rank-progress-bar{height:6px;background:var(--bg);border-radius:4px;overflow:hidden;margin-bottom:14px}
.rank-progress-fill{height:100%;border-radius:4px;transition:width .3s}
.rank-progress-fill.copper{background:#6b4226}
.rank-progress-fill.bronze{background:#ff9f45}
.rank-progress-fill.silver{background:#c8ccd4}
.rank-progress-fill.gold{background:var(--gold)}
.rank-progress-fill.platinum{background:linear-gradient(90deg,#a78bff,#fff)}

.rank-section{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:18px}
.rank-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rank-section-head h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rank-perks{display:flex;gap:10px}
.rank-perk{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px;text-align:center;display:flex;flex-direction:column;gap:2px}
.rank-perk-val{font-weight:800;font-size:14px}
.rank-perk-lab{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}

.investor-rank-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:20px}
.rank-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.rank-card-title{font-weight:800;font-size:15px}

.leverage-toggle{display:flex;gap:6px;flex-wrap:wrap}
.lev-opt{flex:1;min-width:44px;padding:9px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-weight:700;font-size:13px;transition:.15s}
.lev-opt:hover{color:var(--text);border-color:var(--muted-2)}
.lev-opt.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.leverage-locked{font-size:11.5px;color:var(--muted);background:var(--bg);border:1px dashed var(--line);border-radius:9px;padding:10px 12px;margin-bottom:12px;line-height:1.5}
.ts-debt span:last-child{color:var(--gold)}
.leverage-tag{display:inline-block;font-size:9px;font-weight:800;color:var(--gold);background:rgba(255,207,92,.14);
  border:1px solid rgba(255,207,92,.35);padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle}

/* ===================== spiegazione rank (Classifica) ===================== */
.rank-explainer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px}
.rank-explainer h3{font-size:16px;font-weight:800;margin-bottom:6px}
.rank-explainer > p.muted{font-size:13px;line-height:1.6;margin-bottom:20px;max-width:640px}

.rank-ladder{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding:0 4px}
.rank-ladder-line{position:absolute;top:19px;left:24px;right:24px;height:2px;
  background:linear-gradient(90deg,#3a3d42,#6b4226,#ff9f45,#e2e6ea,var(--gold),#ffb3e0);opacity:.5;z-index:0}
.rank-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.rank-diamond{font-size:26px;line-height:1;background:var(--bg);border-radius:50%;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border:2px solid currentColor;box-sizing:border-box}
.rank-diamond-glyph{color:inherit;display:block;line-height:1;transform:translateY(-1px)}
.rank-step-name{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.rank-diamond.steel{color:#565a61;border-color:#40444a}
.rank-diamond.copper{color:#8a5a35;border-color:#5a3a20}
.rank-diamond.bronze{color:#ff9f45}
.rank-diamond.silver{color:#e2e6ea}
.rank-diamond.gold{color:var(--gold)}
.rank-diamond.platinum{border-color:#e8b3ea;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),transparent 60%),var(--bg)}
.rank-diamond.platinum .rank-diamond-glyph{
  background-image:linear-gradient(135deg,#ff9ecf 0%,#d7a8ff 45%,#7ecbff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* variante compatta per la colonna "Rank" del Mercato */
.rank-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.rank-diamond.sm{width:26px;height:26px;font-size:15px;border-width:1.5px}
.rank-cell-label{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}

.rank-explainer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rank-explainer-col{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.rank-explainer-col h4{font-size:13.5px;font-weight:800;margin-bottom:6px}
.rank-explainer-col > p.muted{font-size:12px;line-height:1.5;margin-bottom:10px}
.rank-explainer-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.rank-explainer-list li{font-size:12px;color:var(--text);padding-left:16px;position:relative;line-height:1.4}
.rank-explainer-list li::before{content:"✓";position:absolute;left:0;color:var(--up);font-weight:800}

/* ===================== selettore ruolo ===================== */
.role-toggle{display:flex;gap:8px}
.role-opt{flex:1;padding:11px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-weight:600;font-size:13px;transition:.15s}
.role-opt:hover{color:var(--text);border-color:var(--muted-2)}
.role-opt.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.role-toggle.big .role-opt{padding:14px}

/* Prova senza account: riquadro sobrio, non un richiamo pubblicitario. Deve
   dire chiaramente che il catalogo demo e' finto. */
.guest-entry{
  margin-top:16px;padding:14px;border-radius:14px;
  background:var(--bg);border:1px dashed var(--line);
}
.guest-entry-head{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:5px}
.guest-entry-tag{
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--gold);color:#0a0b0f;
}
.guest-entry p{font-size:11.5px;line-height:1.55;margin-bottom:10px}
.guest-entry-actions{display:flex;gap:8px}
.guest-entry-actions .btn-trade{flex:1;padding:9px}

/* ===================== login social ===================== */
.social-login{margin-top:18px}
.or-divider{display:flex;align-items:center;gap:12px;color:var(--muted-2);font-size:12px;margin-bottom:14px}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px;margin-bottom:9px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-weight:600;font-size:13.5px;transition:.15s}
.oauth-btn:hover{border-color:var(--muted-2);transform:translateY(-1px)}
.oauth-ico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;font-weight:800;font-size:13px}
.oauth-btn.google .oauth-ico{background:#fff;color:#4285f4}
/* provider non configurato sul server: pulsante spento + nota, niente errore rosso */
.oauth-btn.oauth-off{opacity:.45;cursor:not-allowed}
.oauth-btn.oauth-off:hover{transform:none;border-color:var(--line)}
.social-note{font-size:11.5px;color:var(--muted-2);line-height:1.55;text-align:center;margin-top:2px}
.social-note b{color:var(--muted)}
.social-note code{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:11px}
.oauth-btn.apple .oauth-ico{font-size:14px}
.oauth-ico.small{width:18px;height:18px;font-size:11px;background:#fff;color:#4285f4}

/* ===================== blocco XP (chiusura dei voti) ===================== */
.btn-close-xp{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  font-weight:700;font-size:12px;padding:7px 11px;border-radius:8px;white-space:nowrap;transition:.15s;
}
.btn-close-xp:hover{border-color:var(--gold);color:var(--gold)}
.xp-locked{
  display:inline-block;font-size:12px;font-weight:700;color:var(--gold);white-space:nowrap;
  background:rgba(255,207,92,.12);border:1px solid rgba(255,207,92,.35);padding:6px 10px;border-radius:8px;
}
/* piattaforme di streaming sul profilo artista */
.ap-streaming{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 24px 0}
.ap-streaming-lab{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.ap-stream-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:var(--text);
  font-size:12.5px;font-weight:700;text-decoration:none;transition:.15s;
}
.ap-stream-btn:hover{transform:translateY(-1px)}
.ap-stream-btn.spotify:hover{border-color:#1db954;color:#1db954}
.ap-stream-btn.apple:hover{border-color:#fa57c1;color:#fa57c1}
.ap-stream-btn.amazon:hover{border-color:#25d1da;color:#25d1da}
.ap-stream-btn.youtube:hover{border-color:#ff0033;color:#ff0033}
.ap-stream-btn.ext{opacity:.9}
.studio-sub-h{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 0 4px}

/* Studio a schede + ripartizione sostegno/contestazione nelle statistiche */
.studio-tabs{margin:0 0 16px}
.st-split{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.st-side{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
  padding:2px 7px;border-radius:6px;border:1px solid transparent}
.st-side.up{color:var(--up);background:var(--up-bg);border-color:rgba(34,201,139,.3)}
.st-side.down{color:var(--down);background:var(--down-bg);border-color:rgba(246,70,93,.3)}

/* brano proprio: niente pannello di voto */
.own-track-note{display:flex;gap:13px;align-items:flex-start}
.own-track-note .own-track-ico{font-size:22px;line-height:1.2}
.own-track-note b{font-size:13.5px}
.own-track-note p{font-size:12.5px;line-height:1.6;margin-top:4px}

.xp-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.btn-cancel-vote{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  font-weight:700;font-size:12px;padding:7px 10px;border-radius:8px;white-space:nowrap;transition:.15s;
}
.btn-cancel-vote:hover{border-color:var(--down);color:var(--down);background:var(--down-bg)}

/* nota nel profilo pubblico per il proprietario (sola visione) */
.ap-owner-note{
  background:rgba(124,92,255,.08);border:1px solid rgba(124,92,255,.28);border-radius:11px;
  padding:11px 14px;font-size:12.5px;line-height:1.6;color:var(--muted);margin-bottom:14px;
}
.ap-owner-note b{color:var(--text)}
.studio-post-list,.studio-event-list{margin-top:14px}

/* ===================== MODALITÀ DEMO (temporanea) =====================
   Ripristinata per poter girare nell'app senza login durante le prove.
   Per rimuoverla: togliere queste tre regole, il pulsante in index.html,
   il badge nella topbar e i blocchi marcati "DEMO" in app.js e auth.py. */
.demo-box{margin-top:14px;padding:12px;border-radius:12px;border:1px dashed var(--muted-2)}
.demo-box-label{font-size:12px;color:var(--muted);text-align:center;margin-bottom:10px}
.demo-box-actions{display:flex;gap:8px}
.btn-guest{flex:1;padding:11px 8px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);font-weight:700;font-size:13px;transition:.15s}
.btn-guest:hover:not(:disabled){border-color:var(--accent-ink);color:var(--accent-ink);background:rgba(124,92,255,.08)}
.btn-guest:disabled{opacity:.6;cursor:default}

.demo-badge{font-size:10px;font-weight:800;letter-spacing:.04em;color:#0a0b0f;
  background:var(--gold);padding:3px 7px;border-radius:6px}

.guest-box{background:rgba(255,207,92,.10);border:1px solid rgba(255,207,92,.35);
  color:var(--text);border-radius:12px;padding:14px 16px;font-size:12.5px;line-height:1.6;margin-bottom:16px}
.guest-box b{color:var(--gold-ink)}

/* ===================== ricarica crediti ===================== */
.demo-payment-banner{background:rgba(255,207,92,.10);border:1px solid rgba(255,207,92,.35);
  color:var(--text);border-radius:12px;padding:13px 15px;font-size:12.5px;line-height:1.6;margin-bottom:16px}
.demo-payment-banner b{color:var(--gold-ink)}
.credit-packages{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.credit-pkg{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.credit-pkg.highlight{border-color:var(--accent)}
.credit-pkg-badge{position:absolute;top:-9px;right:8px;background:var(--up);color:#04140c;font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px}
.credit-pkg-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.credit-pkg-credits{font-size:17px;font-weight:800;margin:2px 0}
.credit-pkg-price{font-size:13px;color:var(--muted);margin-bottom:8px}
.credit-pkg button{width:100%}

/* ===================== badge ruolo header ===================== */
.role-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
.role-badge.artist{color:var(--gold);background:rgba(255,207,92,.14)}
.role-badge.listener{color:var(--accent-ink);background:rgba(124,92,255,.14)}

/* ===================== player audio ===================== */
.player-bar{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:18px}
/* Riga sotto il player: spiega che l'ascolto sulla piattaforma conta di piu'. */
.platform-hint{font-size:11.5px;line-height:1.45;margin:-12px 2px 18px;opacity:.72}
.player-bar.embed-bar{flex-direction:column;align-items:stretch;padding:10px;gap:2px}
/* Il riquadro della piattaforma prende tutta la larghezza del player, allineato
   alla riga sopra. Prima un max-width lo teneva a 340px: restava un rettangolo
   piccolo appoggiato a sinistra, con mezzo player vuoto accanto. */
.mp-embed{flex:1 1 100%;min-width:0;border-radius:10px;overflow:hidden;opacity:.94}
.mp-embed iframe{display:block;border:none;width:100%}
.mp-embed:hover{opacity:1}
/* Il player della piattaforma e' un iframe: dentro non possiamo toccare nulla,
   quindi curiamo la cornice — angoli, bordo e altezza giusta perche' il player
   si disegni davvero invece di collassare nei suoi link di servizio. */
.embed-wrap{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.embed-wrap iframe{display:block;border:none;width:100%}
.embed-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 4px 2px}
.embed-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-weight:600}
.embed-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--muted)}
.embed-dot.spotify{background:#1db954}
.embed-dot.apple{background:#fa233b}
.embed-dot.amazon{background:#25d1da}
.embed-dot.youtube{background:#ff0033}
.play-btn{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:var(--accent);color:var(--on-accent);font-size:15px;display:grid;place-items:center;transition:.15s}
.play-btn:hover{background:var(--accent-2);transform:scale(1.05)}
.play-btn.playing{background:var(--up);color:#04140c}
.player-meta{flex:1;min-width:0}
.player-title{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-sub{font-size:11.5px}
.eq{display:flex;align-items:flex-end;gap:2.5px;height:18px;opacity:.25}
.eq.active{opacity:1}
.eq span{width:3px;height:5px;background:var(--up);border-radius:2px}
.eq.active span{animation:eqbar .8s ease-in-out infinite}
.eq.active span:nth-child(2){animation-delay:.15s}
.eq.active span:nth-child(3){animation-delay:.3s}
.eq.active span:nth-child(4){animation-delay:.45s}
@keyframes eqbar{0%,100%{height:5px}50%{height:17px}}
.save-btn{flex-shrink:0;padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-weight:700;font-size:12.5px;transition:.15s}
.save-btn:hover{color:var(--text);border-color:var(--down)}
.save-btn.saved{color:var(--down);border-color:var(--down);background:var(--down-bg)}

/* ===================== concerti ===================== */
.concert-section{margin-bottom:20px}
.concert-section h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.concert-none{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:14px;font-size:12.5px;color:var(--muted)}
.concert-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.concert-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:52px;border-radius:9px;background:var(--accent);color:var(--on-accent);flex-shrink:0}
.concert-date .cd-day{font-size:20px;font-weight:800;line-height:1}
.concert-date .cd-mon{font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.concert-info{flex:1;min-width:0}
.concert-venue{font-weight:700;font-size:14px}
.concert-loc{font-size:12px;margin-top:2px}
.concert-live{font-size:10.5px;font-weight:700;color:var(--up);background:var(--up-bg);padding:3px 8px;border-radius:6px;white-space:nowrap}

/* ===================== libreria ===================== */
.library-list{display:flex;flex-direction:column;gap:10px}
.lib-card{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;transition:.12s}
.lib-card.clickable{cursor:pointer}
.lib-card.clickable:hover{background:var(--panel-2);border-color:var(--line)}
.lib-meta{flex:1;min-width:0}
.lib-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-sub{font-size:12px;margin-top:2px}
.lib-price{font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.lib-play{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:13px;display:grid;place-items:center;flex-shrink:0;transition:.15s}
.lib-play:hover{background:var(--accent-2);transform:scale(1.05)}
.lib-remove{width:34px;height:34px;border-radius:8px;color:var(--down);background:var(--down-bg);font-size:14px;flex-shrink:0;display:grid;place-items:center}
.lib-remove:hover{background:rgba(246,70,93,.22)}
.lib-remove svg{width:16px;height:16px}
.lib-addto{width:34px;height:34px;border-radius:8px;color:var(--accent);background:rgba(124,92,255,.14);flex-shrink:0;display:grid;place-items:center;transition:.15s}
.lib-addto:hover{background:rgba(124,92,255,.24)}
.lib-addto svg{width:16px;height:16px}

/* ===================== playlist private ===================== */
.playlists-toolbar{display:flex;gap:10px;margin-bottom:16px}
.playlists-toolbar input{
  flex:1;max-width:320px;padding:9px 13px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-size:13px;
}
.playlists-toolbar input:focus{outline:none;border-color:var(--accent)}
.playlists-list{display:flex;flex-direction:column;gap:10px}
.playlist-card{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 16px;transition:.12s;cursor:pointer}
.playlist-card:hover{background:var(--panel-2)}
.playlist-card-icon{width:38px;height:38px;border-radius:10px;background:rgba(124,92,255,.14);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.playlist-card-icon svg{width:18px;height:18px}
.playlist-card-name{font-weight:700;font-size:14px}
.playlist-card-count{font-size:12px;margin-top:2px}

/* ===================== modali (salva / dettaglio playlist) ===================== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;backdrop-filter:blur(2px)}
.modal-box{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,92vw);
  max-height:80vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.5);z-index:61;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line-soft)}
.modal-head h3{font-size:16px;font-weight:800}
.modal-close{width:32px;height:32px;border-radius:8px;color:var(--muted);font-size:15px;background:var(--panel-2);flex-shrink:0}
.modal-close:hover{color:var(--text)}
.modal-body{padding:16px 20px 20px;overflow-y:auto}

.save-modal-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.save-modal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--bg-2);border-radius:10px}
.save-modal-row-name{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;min-width:0}
.save-modal-row-name svg{width:16px;height:16px;flex-shrink:0;color:var(--muted)}
.save-modal-toggle{padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:700;background:var(--panel-2);color:var(--text);white-space:nowrap;display:flex;align-items:center;gap:5px}
.save-modal-toggle:hover{background:var(--line)}
.save-modal-toggle.active{background:var(--up-bg);color:var(--up)}
.save-modal-toggle svg{width:13px;height:13px}
.save-modal-new{display:flex;gap:8px;border-top:1px solid var(--line-soft);padding-top:14px}
.save-modal-new input{
  flex:1;padding:9px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-size:13px;
}
.save-modal-new input:focus{outline:none;border-color:var(--accent)}

/* ===================== challenge ===================== */
/* Tabellone a eliminatorie: quarti ai lati, semifinali, finale e trofeo al
   centro. Entra tutto nel riquadro senza barra di scorrimento (le colonne si
   restringono e i testi vanno in ellissi); il pulsante "Ingrandisci" apre la
   versione grande a schermo intero. */
.bracket-header{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.bk-expand{font-size:12px;font-weight:700;color:var(--accent);background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.3);padding:5px 11px;border-radius:8px;transition:.15s}
.bk-expand:hover{background:rgba(124,92,255,.2)}
.bracket-wrap{margin-top:10px}
.bracket{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:stretch}
.bk-col{display:flex;flex-direction:column;justify-content:space-around;gap:7px;min-height:280px}
.bk-col.center{justify-content:center;align-items:center;gap:8px}
.bk-trophy{width:52px;height:52px;border-radius:50%;background:rgba(240,185,11,.12);color:#f0b90b;display:grid;place-items:center}
.bk-trophy svg{width:27px;height:27px}
.bk-champ-label{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f0b90b;text-align:center}
.bk-slot{display:flex;align-items:center;gap:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:6px 7px;min-height:42px;min-width:0}
.bk-slot.out{opacity:.38}
.bk-slot.win{border-color:#f0b90b;background:rgba(240,185,11,.08)}
.bk-slot.empty{justify-content:center;color:var(--muted);font-size:10.5px;border-style:dashed;background:transparent}
.bk-flag{width:18px;flex-shrink:0;display:flex}
.bk-flag svg{width:18px;height:12px;border-radius:2px}
.bk-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.bk-meta b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-meta span{font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-votes{font-size:11px;font-weight:800;color:var(--accent);flex-shrink:0}
.bk-col.center .bk-slot{width:100%}

/* Modal "Ingrandisci": tabellone grande a schermo intero, con scroll interno. */
.bracket-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1200px,96vw);max-height:92vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.55);z-index:61}
.bracket-modal .modal-body{overflow:auto}
.bracket-big .bracket{grid-template-columns:repeat(7,minmax(150px,1fr));gap:12px;min-width:1080px}
.bracket-big .bk-col{min-height:440px;gap:12px}
.bracket-big .bk-slot{min-height:56px;padding:9px 12px;gap:9px}
.bracket-big .bk-meta b{font-size:13.5px;white-space:normal}
.bracket-big .bk-meta span{font-size:11px}
.bracket-big .bk-flag{width:24px}.bracket-big .bk-flag svg{width:24px;height:16px}
.bracket-big .bk-trophy{width:74px;height:74px}.bracket-big .bk-trophy svg{width:38px;height:38px}
.bracket-big .bk-votes{font-size:14px}

/* Pulsanti voto challenge: verde supporta / rosso contesta (come nel Reel). */
.ch-vote-arrows{display:flex;gap:6px;flex-shrink:0}
.ch-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel-2);transition:.15s}
.ch-arrow svg{width:18px;height:18px}
.ch-arrow.up{color:var(--up)}
.ch-arrow.down{color:var(--down)}
.ch-arrow.up:hover,.ch-arrow.up.active{background:var(--up);color:#04140c;border-color:var(--up)}
.ch-arrow.down:hover,.ch-arrow.down.active{background:var(--down);color:#fff;border-color:var(--down)}
.ch-votes.neg{color:var(--down)}
.ch-score{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:44px}
.ch-mynet{font-size:10px;font-weight:700}
.ch-mynet.pos{color:var(--up)}
.ch-mynet.neg{color:var(--down)}

/* Barra "Forza del voto": crediti spesi a ogni supporto/contestazione. */
.ch-force{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin:14px 0 10px}
.ch-force-label{font-size:12.5px;font-weight:700}
.ch-force-opts{display:flex;gap:6px;align-items:center}
.ch-force-opt{padding:6px 11px;border-radius:8px;font-size:12px;font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--line);transition:.12s}
.ch-force-opt:hover{color:var(--text)}
.ch-force-opt.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ch-force-custom{width:64px;padding:6px 8px;border-radius:8px;font-size:12px;background:var(--panel);border:1px solid var(--line);color:var(--text)}
.ch-force-custom:focus{outline:none;border-color:var(--accent)}
.ch-force-hint{font-size:11px;margin-left:auto}

/* Su telefono il tabellone a 7 colonne diventa illeggibile (nomi tagliati):
   lo nascondiamo e lasciamo il pulsante a tutta larghezza che apre la
   versione grande, che ha il suo scorrimento interno. */
@media (max-width:760px){
  /* solo l'anteprima dentro la scheda, NON quella del modal ingrandito */
  .ch-card .bracket-wrap{display:none}
  .bracket-header{margin-top:14px}
  .bracket-header .muted{display:none}
  .bk-expand{width:100%;padding:12px;font-size:13.5px}
  .ch-force{gap:8px}
  .ch-force-hint{margin-left:0;width:100%}
  .bracket-modal{width:100vw;max-width:100vw;max-height:100vh;height:100%;
    top:0;left:0;transform:none;border-radius:0;border:0}
}
.ch-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:26px}
.ch-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ch-card-title{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.ch-trophy{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(240,185,11,.14);color:#f0b90b}
.ch-trophy svg,.ch-winner-tag svg{width:15px;height:15px}
.ch-round-box{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ch-round{font-size:12px;font-weight:800;color:var(--accent);background:rgba(124,92,255,.12);padding:4px 10px;border-radius:20px}
.ch-countdown{font-size:11.5px;color:var(--muted)}
.ch-entries{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ch-entry{display:flex;align-items:center;gap:11px;background:var(--bg-2);border:1px solid transparent;border-radius:11px;padding:9px 12px}
.ch-entry.out{opacity:.42}
.ch-entry.winner{border-color:var(--up);background:rgba(34,201,139,.07)}
.ch-entry-meta{flex:1;min-width:0}
.ch-entry-title{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ch-entry-sub{font-size:11.5px;margin-top:2px}
.ch-votes{font-weight:800;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.ch-vote-btn.voted{background:var(--up-bg);color:var(--up)}
.ch-winner-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:#f0b90b;background:rgba(240,185,11,.12);padding:2px 8px;border-radius:12px}
.ch-myvote-tag{font-size:10.5px;font-weight:700;color:var(--accent);background:rgba(124,92,255,.12);padding:2px 7px;border-radius:12px}
.ch-last{font-size:12.5px;margin-top:12px}
.ch-private-head h3{font-size:16px;font-weight:800;margin-bottom:4px}
.ch-private-head p{font-size:13px;margin-bottom:14px}
.ch-tools{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.ch-create,.ch-join{display:flex;gap:8px;flex-wrap:wrap}
.ch-create input[type=text],.ch-join input{
  flex:1;min-width:220px;padding:10px 13px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-size:13px}
.ch-create input:focus,.ch-join input:focus{outline:none;border-color:var(--accent)}
.ch-track-picker{
  flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;
  max-height:170px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:10px}
.ch-pick-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:7px}
.ch-pick-item:hover{background:var(--panel-2);color:var(--text)}
.ch-pick-item input{accent-color:var(--accent)}
/* brano arrivato dal tasto Challenge di una Card: si vede subito qual è */
.ch-pick-item.preselected{background:rgba(124,92,255,.16);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.ch-mine{display:flex;flex-direction:column;gap:10px}
.ch-code-line{background:var(--bg-2);border:1px dashed var(--line);border-radius:10px;padding:10px 13px;font-size:13px;margin-bottom:12px}
.ch-code{font-family:ui-monospace,monospace;letter-spacing:.08em;color:var(--accent);text-transform:uppercase}
.reel-act-btn.challenge{color:#f0b90b}

.btn-danger-outline{
  width:100%;margin-top:14px;padding:11px;border-radius:10px;font-weight:700;font-size:13px;
  color:var(--down);background:var(--down-bg);transition:.15s;
}
.btn-danger-outline:hover{background:rgba(246,70,93,.24)}
.btn-danger-outline.armed{background:var(--down);color:#fff}

/* ===================== profilo ===================== */
.profile-card{display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.profile-avatar{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff;flex-shrink:0}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:19px;font-weight:800}
.profile-email{font-size:13px;margin-top:2px}
.profile-provider{font-size:12px;margin-top:4px}
.profile-section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.profile-section h3{font-size:15px;font-weight:800;margin-bottom:4px}
.profile-section .muted{font-size:12.5px;margin-bottom:14px}
.linked-accounts{display:flex;flex-direction:column;gap:10px}
.linked-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;background:var(--bg);border:1px solid var(--line);border-radius:10px;font-weight:600;font-size:13.5px}
.linked-row>span:first-child{display:flex;align-items:center;gap:9px}
.link-state{font-size:12px;color:var(--muted);font-weight:500}
.firebase-note{font-size:12px;color:var(--muted-2);margin-top:14px;line-height:1.5}

/* ===================== studio artista ===================== */
.studio-header{display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.studio-avatar-wrap{position:relative;flex-shrink:0}
.studio-avatar{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;font-weight:800;font-size:24px;color:#fff;background-size:cover;background-position:center}
.avatar-upload-btn{position:absolute;bottom:-4px;right:-4px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-size:13px;cursor:pointer;border:2px solid var(--bg-2);transition:.15s}
.avatar-upload-btn:hover{background:var(--accent-2);transform:scale(1.08)}
.studio-name{font-size:19px;font-weight:800}

.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.studio-grid textarea, .profile-section textarea{
  width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  color:var(--text);font-size:13.5px;font-family:inherit;resize:vertical;
}
.profile-section select{width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:13.5px}
.profile-section form{margin-top:4px}
.toggle-row{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;margin-bottom:14px;cursor:pointer}
.toggle-row input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.studio-concert-fields{margin-top:10px}

.studio-tracks-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.studio-track-card-wrap{background:var(--bg);border:1px solid var(--line);border-radius:12px}
/* Le regole della scheda brano stanno tutte insieme piu' avanti ("Scheda di un
   mio brano"): qui ne era rimasta una copia vecchia che vinceva su alcune
   proprieta' e sbilanciava il riquadro (numeri incolonnati a destra). */

.studio-add-track{border-top:1px solid var(--line);padding-top:14px}
.studio-add-track summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--accent-ink);list-style:none}
.studio-add-track summary::-webkit-details-marker{display:none}
.studio-add-track summary::before{content:"▸ ";}
.studio-add-track[open] summary::before{content:"▾ ";}
.studio-add-track form{margin-top:14px}
.studio-cover-upload{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.st-cover-preview{width:64px;height:64px;border-radius:12px;background:var(--bg);border:1px dashed var(--line);background-size:cover;background-position:center;flex-shrink:0}
.source-note{font-size:11.5px;color:var(--muted);line-height:1.6;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;margin:4px 0 14px}
.source-note b{color:var(--gold)}

/* ===================== reel feed ===================== */
/* position:fixed ancora il feed alla viewport indipendentemente dall'altezza
   "elastica" del layout circostante (.app/.content non hanno altezza fissa) */
.reel-view{position:fixed; left:0; right:0; bottom:0; z-index:5; background:#000}
.reel-feed{
  height:100%; max-width:480px; margin:0 auto; overflow-y:scroll; scroll-snap-type:y mandatory;
  scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; background:#000;
}
.reel-feed::-webkit-scrollbar{display:none}

.reel-card{
  position:relative; height:100%; width:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:flex-end; overflow:hidden; color:#fff;
}
.reel-bg{position:absolute; inset:0}
.reel-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 75%,rgba(0,0,0,.85) 100%);
}
.reel-topinfo{position:absolute; top:18px; left:16px; right:16px; display:flex; align-items:center; gap:8px; z-index:2}

.reel-overlay{position:relative; z-index:2; padding:20px 84px 26px 18px; width:100%}
.reel-artist-row{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-weight:700; font-size:14.5px}
.reel-title{font-size:16px; font-weight:800; margin-bottom:4px; line-height:1.3}
.reel-price-row{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.reel-price-row .price-val{font-size:15px; font-weight:800}
.reel-caption-text{font-size:13px; opacity:.92; margin-bottom:5px; line-height:1.4}
.reel-hash{font-size:12px; opacity:.75}

.reel-actions{
  position:absolute; right:10px; bottom:24px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.reel-act{display:flex; flex-direction:column; align-items:center; gap:2px}
.reel-act-btn{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(20,20,24,.6); backdrop-filter:blur(10px); color:#fff; transition:.15s; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.reel-act-btn svg{width:20px; height:20px; display:block}
.reel-act-btn:hover{transform:scale(1.08)}
.reel-act-btn.buy{background:var(--up); color:#fff; border-color:transparent}
.reel-act-btn.sell{background:var(--down); color:#fff; border-color:transparent}
.reel-act-btn.active{background:var(--accent); color:var(--on-accent); border-color:transparent}
.reel-act-label{font-size:10px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.8); text-transform:uppercase; letter-spacing:.02em}

.reel-navhint{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:2;
  font-size:11px; opacity:.6; display:flex; align-items:center; gap:5px}

/* ===================== responsive ===================== */
@media (max-width:820px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .market-tools{width:100%}
  .market-tools input{flex:1 1 100%;width:auto}
  .market-tools select,.market-tools .filter-dropdown{flex:1 1 auto}
  .filter-dropdown-btn{width:100%;justify-content:space-between}
  .filter-dropdown-menu{left:0;right:0;min-width:0}
  .content{padding:18px 12px 60px}

  /* la fuga di colonne riguarda SOLO la tabella di mercato: le altre
     tabelle (portafoglio/ordini/classifica) condividono la classe .mkt-table
     ma hanno un significato diverso per ogni colonna, quindi vanno lasciate
     intatte per non far sparire dati come "Quote", "Brano" o "Investitore". */
  /* colonne: 1 Brano, 2 Rank, 3 Genere, 4 Prezzo, 5 Var., 6 Andamento, 7 Popolarità.
     Su mobile nascondiamo Genere e Andamento (il Rank resta visibile: e' compatto). */
  #view-market .mkt-table thead th:nth-child(3), #view-market .mkt-table tbody td:nth-child(3),
  #view-market .mkt-table thead th:nth-child(6), #view-market .mkt-table tbody td:nth-child(6){display:none}

  .studio-grid{grid-template-columns:1fr}
  .studio-header{flex-wrap:wrap}
  .studio-cover-upload{flex-wrap:wrap}

  .rank-explainer-grid{grid-template-columns:1fr}
  .rank-diamond{width:32px;height:32px;font-size:20px}
  .rank-step-name{font-size:9.5px}
  .rank-ladder-line{top:15px;left:16px;right:16px}
}

@media (max-width:480px){
  .wallet-label{display:none}
  .wallet-value{font-size:13.5px}
  .user-chip{padding:5px 6px 5px 9px;font-size:12px}
  .role-badge{display:none}
  .view-head h1{font-size:20px}
}

/* ===================== PROFILO PUBBLICO ARTISTA ===================== */
.artist-link{
  color:var(--accent-ink);font-weight:700;padding:0;border-bottom:1px dashed rgba(167,139,255,.5);
  font-size:inherit;font-family:inherit;transition:.15s;
}
.artist-link:hover{color:#fff;border-bottom-color:#fff}
.reel-artist-link{color:#fff;font-weight:800;font-size:inherit;padding:0;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.reel-artist-link:hover{text-decoration:underline}

.artist-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(900px,96vw);max-height:92vh;overflow-y:auto;z-index:70;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.artist-close{
  position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:rgba(10,11,15,.65);border:1px solid var(--line);color:#fff;backdrop-filter:blur(4px);
}
.artist-close:hover{background:rgba(10,11,15,.9)}
.artist-modal-body{padding-bottom:22px}
.ap-loading{padding:60px 24px;text-align:center}

.ap-banner{
  position:relative;height:220px;background-size:cover;background-position:center;
  border-radius:var(--radius) var(--radius) 0 0;
}
.ap-banner-upload,.studio-banner-btn{
  /* z-index: la testata del profilo sborda sulla copertina con un margine
     negativo e coprirebbe il pulsante rendendolo non cliccabile */
  position:absolute;right:14px;bottom:14px;z-index:3;padding:8px 12px;border-radius:9px;cursor:pointer;
  background:rgba(10,11,15,.66);border:1px solid var(--line);color:#fff;
  font-size:12px;font-weight:700;backdrop-filter:blur(4px);transition:.15s;
  display:inline-flex;align-items:center;gap:7px;
}
.ap-banner-upload svg,.studio-banner-btn svg{width:15px;height:15px;flex-shrink:0}
.avatar-upload-btn svg{width:15px;height:15px}
.ap-banner-upload:hover,.studio-banner-btn:hover{background:rgba(10,11,15,.9);border-color:var(--accent)}

/* Sulla copertina sborda SOLO l'avatar: nome, sottotitolo e social restano
   sotto il bordo dell'immagine. Prima l'intera testata aveva margin-top
   negativo, quindi il testo finiva sopra la foto ed era illeggibile su
   qualunque copertina scura o affollata. */
.ap-head{display:flex;align-items:flex-start;gap:16px;padding:0 24px;position:relative}
.ap-avatar{
  width:96px;height:96px;flex-shrink:0;border-radius:22px;border:3px solid var(--panel);
  display:grid;place-items:center;font-size:26px;font-weight:800;color:#fff;
  background-size:cover;background-position:center;box-shadow:0 8px 24px rgba(0,0,0,.4);
  margin-top:-44px;
}
.ap-head-main{flex:1;min-width:0;padding-top:10px}
/* Il rank sta a destra della testata e resta sotto il bordo della copertina:
   allineato in basso, non sopra l'immagine. */
.ap-rank-mark{flex-shrink:0;align-self:flex-start;padding-top:10px}
.ap-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ap-name-row h2{font-size:24px;letter-spacing:-.02em}
.ap-sub{font-size:12.5px;margin-top:4px}
.ap-kind{font-weight:700;color:var(--text)}
.ap-socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ap-social{
  font-size:11.5px;font-weight:700;text-decoration:none;color:var(--text);
  background:var(--bg);border:1px solid var(--line);padding:5px 10px;border-radius:8px;transition:.15s;
}
.ap-social:hover{border-color:var(--accent);color:var(--accent-ink)}
.ap-bio{margin:16px 24px 0;color:var(--muted);font-size:13px;line-height:1.65}

.ap-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 24px 0}
.ap-stat{background:var(--bg);border:1px solid var(--line-soft);border-radius:11px;padding:11px;text-align:center}
.ap-stat b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.ap-stat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

.ap-rank-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 24px 0}
.ap-rank-note{font-size:12px;line-height:1.6;margin-top:10px}
.ap-rank-note b{color:var(--text)}

.ap-tabs{display:flex;gap:4px;margin:18px 24px 0;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:4px}
.ap-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;
  border-radius:8px;color:var(--muted);font-weight:700;font-size:13px;transition:.15s;
}
.ap-tab:hover{color:var(--text)}
.ap-tab.active{background:var(--accent);color:var(--on-accent)}
.ap-tab-n{
  font-size:10.5px;font-weight:800;background:rgba(255,255,255,.12);
  border-radius:999px;padding:1px 6px;min-width:18px;
}
.ap-tab.active .ap-tab-n{background:rgba(0,0,0,.22)}
.ap-tab-body{padding:16px 24px 0}
.ap-empty{
  background:var(--bg);border:1px dashed var(--line);border-radius:11px;
  padding:22px;text-align:center;color:var(--muted);font-size:13px;
}
.ap-hint{font-size:12px;line-height:1.6;margin-top:14px}
.ap-hint b{color:var(--text)}
.ap-section-title{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:4px 0 10px}
.ap-section-title.past{margin-top:20px}

/* --- scheda brani --- */
.ap-track-list{display:flex;flex-direction:column;gap:10px}
.ap-track{
  display:flex;align-items:center;gap:13px;background:var(--bg);border:1px solid var(--line-soft);
  border-radius:12px;padding:11px 13px;transition:.15s;
}
.ap-track.playing{border-color:var(--accent);background:rgba(124,92,255,.08)}
.ap-track-cover{
  width:46px;height:46px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#fff;background-size:cover;background-position:center;
}
.ap-track-info{flex:1;min-width:0}
.ap-track-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-track-sub{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.ap-track-num{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-variant-numeric:tabular-nums}
.ap-track-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.ap-play{
  width:36px;height:36px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
  color:var(--text);font-size:13px;transition:.15s;
}
.ap-play:hover{border-color:var(--accent);color:var(--accent-ink)}
.ap-play.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ap-listen{
  font-size:11.5px;font-weight:700;text-decoration:none;color:var(--text);white-space:nowrap;
  background:var(--panel-2);border:1px solid var(--line);padding:7px 10px;border-radius:8px;transition:.15s;
}
.ap-listen:hover{border-color:var(--up);color:var(--up)}

/* --- scheda post --- */
.ap-composer{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:14px}
.ap-composer textarea{
  width:100%;padding:11px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  color:var(--text);font-size:13.5px;font-family:inherit;line-height:1.55;resize:vertical;
}
.ap-composer textarea:focus{outline:none;border-color:var(--accent)}
.ap-composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.ap-composer-foot span{font-size:11.5px}
.ap-post-list{display:flex;flex-direction:column;gap:10px}
.ap-post{background:var(--bg);border:1px solid var(--line-soft);border-radius:12px;padding:13px 15px}
.ap-post-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.ap-post-date{font-size:11.5px}
.ap-post-del{color:var(--muted-2);font-size:13px;padding:2px 6px;border-radius:6px;transition:.15s}
.ap-post-del:hover{color:var(--down);background:var(--down-bg)}
.ap-post-body{font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.ap-post-actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
/* Supporta/Contesta: sempre verde e rosso, come ovunque nel voto.
   Lo stato "on" (il tuo voto) è il pieno, come i pulsanti del Mercato. */
.ap-post-vote{
  display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;
  border:1px solid var(--line);font-size:12.5px;font-weight:700;transition:.15s;
}
.ap-post-vote b{font-variant-numeric:tabular-nums;color:inherit}
.ap-post-vote.up{color:var(--up);background:var(--up-bg);border-color:rgba(34,201,139,.35)}
.ap-post-vote.down{color:var(--down);background:var(--down-bg);border-color:rgba(246,70,93,.35)}
.ap-post-vote.up:hover:not(:disabled){border-color:var(--up)}
.ap-post-vote.down:hover:not(:disabled){border-color:var(--down)}
.ap-post-vote.up.on{background:var(--up);border-color:var(--up);color:#04140c}
.ap-post-vote.down.on{background:var(--down);border-color:var(--down);color:#fff}
.ap-post-vote:disabled{opacity:.5;cursor:default}
.ap-post-cost{font-size:11.5px;margin-left:auto}

/* --- scheda calendario --- */
.ap-event{
  display:flex;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--line-soft);
  border-radius:12px;padding:11px 14px;margin-bottom:9px;
}
.ap-event.past{opacity:.55}
.ap-event-date{
  width:52px;flex-shrink:0;text-align:center;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:6px 0;
}
.ap-event-date b{display:block;font-size:19px;line-height:1.1;font-variant-numeric:tabular-nums}
.ap-event-date span{font-size:9.5px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.ap-event-info{flex:1;min-width:0}
.ap-event-title{font-weight:700;font-size:13.5px}
.ap-event-sub{font-size:12px;margin-top:3px}
.ap-event-note{font-size:12px;margin-top:4px}

/* Partecipo / Non partecipo: stesso verde e rosso di Sostieni e Contesta, e
   stessa regola per lo stato "on" (la tua risposta e' il pieno). */
.ap-event-rsvp{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.ap-rsvp{
  display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;
  border:1px solid var(--line);font-size:12.5px;font-weight:700;transition:.15s;
}
.ap-rsvp b{font-variant-numeric:tabular-nums;color:inherit}
.ap-rsvp.go{color:var(--up);background:var(--up-bg);border-color:rgba(34,201,139,.35)}
.ap-rsvp.skip{color:var(--down);background:var(--down-bg);border-color:rgba(246,70,93,.35)}
.ap-rsvp.go:hover:not(:disabled){border-color:var(--up)}
.ap-rsvp.skip:hover:not(:disabled){border-color:var(--down)}
.ap-rsvp.go.on{background:var(--up);border-color:var(--up);color:#04140c}
.ap-rsvp.skip.on{background:var(--down);border-color:var(--down);color:#fff}
.ap-rsvp:disabled{opacity:.5;cursor:default}
.ap-rsvp-cost{font-size:11.5px;margin-left:auto}
/* Nella scheda del brano i pulsanti stanno dentro la card del concerto.
   "Partecipo" e "Non partecipo" sono la stessa domanda: vanno letti insieme,
   su una riga sola. A capo sembravano due comandi scollegati, e il costo che
   li spingeva ai lati (margin-left:auto) era quello che li mandava a capo. */
.concert-card .ap-event-rsvp{margin-top:9px;flex-wrap:nowrap;gap:7px}
.concert-card .ap-rsvp{
  flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;
  padding:6px 8px;gap:5px;font-size:12px;
}
.concert-card .ap-rsvp-cost{margin-left:0;flex-shrink:0}

/* Il badge del prossimo evento sta nell'angolo in alto a destra del riquadro:
   in fondo alla riga allargava la card e schiacciava il nome del locale. Le
   due righe di testo tengono lo spazio libero sotto di lui. */
.concert-card{position:relative;align-items:flex-start}
.concert-card .concert-live{position:absolute;top:11px;right:12px}
.concert-card .concert-venue,.concert-card .concert-loc{padding-right:96px}
@media (max-width:430px){
  .concert-card .concert-live{font-size:9.5px;padding:2px 6px;top:10px;right:10px}
  .concert-card .concert-venue,.concert-card .concert-loc{padding-right:78px}
}
.ap-event-form{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:16px}
.ap-event-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}

/* --- copertina nello Studio --- */
.studio-banner{
  position:relative;height:220px;border-radius:var(--radius);background-size:cover;
  background-position:center;margin-bottom:0;
}
.studio-header.on-banner{margin-top:-38px;position:relative;z-index:1;align-items:flex-end}
.studio-head-main{flex:1;min-width:0}
.studio-name-row{display:flex;align-items:center;gap:10px}

/* ===================== MINI PLAYER (ascolto in background) ===================== */
.mini-player{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:75;
  width:min(680px,94vw);background:var(--panel-2);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.5);
}
body.with-mini .content{padding-bottom:250px}
body.with-mini .artist-modal-body{padding-bottom:250px}
body.with-mini .drawer{padding-bottom:240px}
/* L'embed della piattaforma va SEMPRE a tutta larghezza su una riga sua, con
   l'altezza che gli serve: schiacciato in linea, Spotify tirava fuori le barre
   di scorrimento e tagliava titolo e pulsanti. */
.mp-inner{display:flex;align-items:center;gap:10px;padding:9px 11px;flex-wrap:wrap;row-gap:9px}
.mp-cover{
  width:38px;height:38px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:11.5px;color:#fff;
}
.mp-meta{min-width:0;flex:1 1 140px}
.mp-title{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-sub{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Riga compatta: il riquadro sta su una riga sua, a filo con quella sopra, e
   basso — la versione snella del player della piattaforma, non la scheda alta. */
.mp-embed{flex:1 1 100%;order:5;min-width:0;border-radius:10px;overflow:hidden}
.mp-embed iframe{display:block;border:none;width:100%;height:80px}
.mp-btn{
  width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  font-size:12.5px;flex-shrink:0;transition:.15s;
}
.mp-btn:hover{background:var(--accent-2)}
/* Il tondo è sempre un play, qualunque sia la sorgente del brano: la variante
   "freccia" (apri il riquadro) non esiste più. */
.play-btn{display:grid;place-items:center;line-height:0}
.play-btn .ico{width:17px;height:17px}
.mp-embed.pulse{animation:embedPulse 1.1s ease-out 2}
@keyframes embedPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(124,92,255,0)}
  35%{box-shadow:0 0 0 4px rgba(124,92,255,.45)}
}
@media (prefers-reduced-motion: reduce){ .mp-embed.pulse{animation:none} }
/* i tre comandi a destra hanno tutti la stessa impronta: allineati al tondo
   del play, senza che uno pesi piu' degli altri */
.mp-link{
  display:grid;place-items:center;width:34px;height:34px;box-sizing:border-box;
  text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:9px;
  font-size:12px;flex-shrink:0;transition:.15s;
}
.mp-link:hover{color:var(--text);border-color:var(--muted-2)}
.mp-close{display:grid;place-items:center;width:34px;height:34px;box-sizing:border-box;
  color:var(--muted);font-size:12.5px;border-radius:9px;flex-shrink:0;transition:.15s}
.mp-close:hover{color:var(--text);background:var(--panel)}
.mp-btn-ghost{
  display:grid;place-items:center;width:34px;height:34px;box-sizing:border-box;
  color:var(--muted);font-size:13px;border-radius:9px;flex-shrink:0;
  border:1px solid var(--line);transition:.15s;
}
.mp-btn-ghost:hover{color:var(--accent-ink);border-color:var(--accent)}

/* --- player grande: dettagli e azioni --- */
.mp-meta{text-align:left;cursor:pointer;background:none;border:none;padding:0}
.mp-meta:hover .mp-title{color:var(--accent-ink)}
.mp-panel{display:none;padding:0 12px 12px}
.mini-player.expanded{width:min(560px,94vw)}
.mini-player.expanded .mp-inner{flex-wrap:wrap;row-gap:10px}
.mini-player.expanded .mp-embed{flex:1 1 100%;order:5}
.mini-player.expanded .mp-embed iframe{height:352px}
.mini-player.expanded .mp-panel{display:block}
.mp-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px solid var(--line);margin-bottom:10px}
.mp-panel-title{font-weight:800;font-size:14.5px}
.mp-panel-sub{font-size:12px;margin-top:2px}
.mp-panel-actions{display:flex;gap:8px;flex-wrap:wrap}
.mp-act{
  flex:1;min-width:120px;text-align:center;padding:9px 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:var(--text);
  font-size:12.5px;font-weight:700;text-decoration:none;transition:.15s;
}
.mp-act:hover{border-color:var(--accent);color:var(--accent-ink)}
.mp-act.ext:hover{border-color:var(--up);color:var(--up)}
.mp-note{margin-top:10px;font-size:11.5px;line-height:1.6;color:var(--muted-2)}
.mp-note b{color:var(--muted)}

@media (max-width:760px){
  .artist-modal{width:100vw;max-width:100vw;height:100vh;max-height:100vh;top:0;left:0;transform:none;border-radius:0}
  .ap-banner{height:150px;border-radius:0}
  /* su telefono la testata si impila: foto sopra la copertina, poi il nome */
  .ap-head{flex-direction:column;align-items:flex-start;padding:0 16px;gap:10px;margin-top:-36px;position:relative}
  .ap-head-main{padding-bottom:0;width:100%;padding-right:60px}
  .ap-rank-mark{position:absolute;right:16px;bottom:0;padding-bottom:0}
  .ap-avatar{width:78px;height:78px;font-size:22px}
  .ap-name-row h2{font-size:20px}
  .ap-bio,.ap-stats,.ap-rank-card,.ap-tabs{margin-left:16px;margin-right:16px}
  .ap-stats{grid-template-columns:repeat(2,1fr)}
  .ap-tab-body{padding:14px 16px 0}
  .ap-tab{font-size:12px;padding:9px 6px;gap:5px}
  .ap-track{flex-wrap:wrap}
  .ap-track-num{flex-direction:row;gap:10px;align-items:center;width:100%;order:5;justify-content:flex-end}
  .ap-event-grid{grid-template-columns:1fr}
  .mini-player{bottom:0;width:100vw;border-radius:14px 14px 0 0}
  .mp-meta{flex:1 1 auto}
}

/* ===================== TUTORIAL (accesso alternativo) ===================== */
.tutorial-cta{
  width:100%;display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;
  background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(124,92,255,.05));
  border:1px solid rgba(124,92,255,.35);border-radius:12px;text-align:left;transition:.15s;
}
.tutorial-cta:hover{border-color:var(--accent);transform:translateY(-1px)}
.tutorial-cta-ico{
  flex:0 0 30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-weight:800;font-size:15px;
}
.tutorial-cta-text{flex:1;display:flex;flex-direction:column;gap:2px}
.tutorial-cta-text b{font-size:13px}
.tutorial-cta-text small{font-size:11.5px;color:var(--muted)}
.tutorial-cta-arrow{color:var(--accent-ink);font-size:16px}

.tut-screen {
  position: relative;
  z-index: 10000;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 24px 16px 40px;
  pointer-events: auto;
}
.tut-card {
  position: relative;
  z-index: 10001;
  width: 100%;
  max-width: 1040px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  pointer-events: auto;
}
.tut-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.15);
}
.tut-top-tag{
  margin-left:8px;padding:3px 8px;border-radius:999px;background:rgba(124,92,255,.18);
  border:1px solid rgba(124,92,255,.4);color:var(--accent-ink);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
/* la topbar dell'app mette .brand.small in order:1 sotto gli 820px: qui la
   guida ha la sua intestazione, il marchio deve restare a sinistra */
.tut-top .brand.small{order:0}
.tut-top-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tut-ghost{
  padding:7px 12px;border-radius:8px;border:1px solid var(--line);color:var(--muted);
  font-size:12px;font-weight:600;white-space:nowrap;transition:.15s;
}
.tut-ghost:hover{color:var(--text);border-color:var(--muted-2)}
.tut-close{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);color:var(--muted);
  font-size:14px;transition:.15s;
}
.tut-close:hover{color:var(--text);border-color:var(--muted-2)}

/* --- scelta del percorso --- */
.tut-choice{padding:44px 30px 34px;text-align:center;max-width:760px;margin:0 auto}
.tut-choice h1{font-size:29px;letter-spacing:-.02em;margin-bottom:14px}
.tut-lead{color:var(--muted);line-height:1.65;font-size:14px;margin-bottom:18px}
.tut-lead b{color:var(--text)}
.tut-lead-2{font-weight:600;margin-bottom:22px}
.tut-paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.tut-path{
  display:flex;flex-direction:column;gap:8px;padding:24px 22px;border-radius:16px;
  background:var(--bg);border:1px solid var(--line);transition:.18s;
}
.tut-path:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 30px rgba(124,92,255,.15)}
.tut-path-ico{font-size:30px;line-height:1}
.tut-path-title{font-size:17px;font-weight:800;letter-spacing:-.01em}
.tut-path-sub{color:var(--muted);font-size:13px;line-height:1.6}
.tut-path-go{color:var(--accent-ink);font-size:12.5px;font-weight:700;margin-top:4px}
.tut-choice-note{margin-top:22px;color:var(--muted-2);font-size:12px;line-height:1.6}
.tut-choice-note b{color:var(--muted)}
.tut-skip{
  display:block;margin:18px auto 0;color:var(--muted);font-size:12.5px;font-weight:600;
  padding:8px 12px;border-radius:8px;transition:.15s;
}
.tut-skip:hover{color:var(--text);background:var(--panel-2)}

/* --- passi --- */
.tut-steps{display:grid;grid-template-columns:250px 1fr}
.tut-index{border-right:1px solid var(--line);padding:22px 16px;background:rgba(0,0,0,.12)}
.tut-index-head{font-size:12.5px;color:var(--muted);margin-bottom:14px;padding-left:6px}
.tut-index-head b{color:var(--text)}
.tut-index-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.tut-index-item{
  width:100%;display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;
  color:var(--muted);font-size:12.5px;text-align:left;line-height:1.35;transition:.15s;
}
.tut-index-item:hover{background:var(--panel-2);color:var(--text)}
.tut-index-item.active{background:rgba(124,92,255,.14);color:var(--text);font-weight:700}
.tut-index-num{
  flex:0 0 20px;height:20px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;
}
.tut-index-item.active .tut-index-num{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tut-index-item.done .tut-index-num{color:var(--up);border-color:rgba(34,201,139,.4)}

.tut-main{padding:22px 30px 26px;min-width:0}
.tut-progress{height:4px;border-radius:999px;background:var(--bg);overflow:hidden;margin-bottom:12px}
.tut-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s ease}
.tut-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.tut-counter{font-size:11.5px;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.tut-path-badge{
  padding:4px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);
  color:var(--muted);font-size:11.5px;font-weight:600;
}

.tut-step-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tut-step-ico{
  flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;
  background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.3);
}
.tut-step-head h2{font-size:21px;letter-spacing:-.02em}
.tut-step-lead{color:var(--muted);line-height:1.7;font-size:14px;margin-bottom:16px}
.tut-step-lead b{color:var(--text)}

.tut-points{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.tut-points li{
  display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:11px;
  background:var(--bg);border:1px solid var(--line-soft);
}
.tut-points li b{font-size:13px}
.tut-points li span{color:var(--muted);font-size:13px;line-height:1.6}
.tut-points li span b{color:var(--text);font-size:inherit}

.tut-visual{margin-bottom:16px}
.tut-visual .rank-ladder{margin-bottom:16px}
/* le tabelle larghe scorrono nel loro contenitore, mai la pagina */
.tut-table-wrap{overflow-x:auto;border-radius:11px;-webkit-overflow-scrolling:touch}
.tut-table{width:100%;min-width:340px;border-collapse:collapse;background:var(--bg);border:1px solid var(--line-soft);border-radius:11px;overflow:hidden}
.tut-table th,.tut-table td{padding:9px 12px;font-size:12.5px;text-align:left;border-bottom:1px solid var(--line-soft)}
.tut-table th{color:var(--muted-2);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.tut-table td{color:var(--muted)}
.tut-table td:first-child{color:var(--text)}
.tut-table tbody tr:last-child td{border-bottom:none}
.tut-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tut-table-note{margin-top:10px;color:var(--muted);font-size:12.5px;line-height:1.6}
.tut-table-note b{color:var(--text)}

.tut-mock{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px}
.tut-mock-head{display:flex;align-items:center;gap:8px;color:var(--muted-2);font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:12px}
.tut-mock-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tut-mock-sides{display:flex;gap:8px;margin-bottom:12px}
.tut-mock-side{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:13px;font-weight:700;border:1px solid var(--line)}
.tut-mock-side.buy{background:var(--up-bg);color:var(--up);border-color:rgba(34,201,139,.35)}
.tut-mock-side.sell{color:var(--down);border-color:rgba(246,70,93,.25)}
.tut-mock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line-soft)}
.tut-mock-row.muted{color:var(--muted)}
.tut-mock-exec{margin-top:12px;text-align:center;padding:11px;border-radius:10px;background:var(--up);color:#04120c;font-weight:800;font-size:13.5px}

/* --- Guida: livelli, figure e schemi ---
   La guida e' divisa in Base e Avanzato. La pastiglia sul titolo e la riga di
   sezione nell'indice dicono dove sei: senza, un lettore alle prime armi
   finiva dentro le tabelle dei pesi senza capire di aver cambiato registro. */
.tut-level-pill{
  margin-left:auto;flex:0 0 auto;padding:4px 11px;border-radius:999px;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
}
.tut-level-pill.base{background:rgba(34,201,139,.14);color:var(--up);border:1px solid rgba(34,201,139,.35)}
.tut-level-pill.adv{background:rgba(124,92,255,.14);color:var(--accent-ink,var(--accent));border:1px solid rgba(124,92,255,.4)}
.tut-index-section{
  display:flex;flex-direction:column;gap:1px;margin:14px 0 4px;padding:0 9px;
}
.tut-index-section:first-child{margin-top:0}
.tut-index-section span{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.tut-index-section small{font-size:10.5px;color:var(--muted-2);line-height:1.3}
.tut-index-section.base span{color:var(--up)}
.tut-index-section.adv span{color:var(--accent-ink,var(--accent))}

/* Figure: uno schema, e sotto la didascalia che dice cosa si sta guardando. */
.tut-fig{margin:0 0 4px}
.tut-fig figcaption{
  margin-top:8px;font-size:11.5px;color:var(--muted-2);text-align:center;line-height:1.4;
}
.tut-svg{width:100%;height:auto;display:block;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.tut-svg-lab{font-size:9px;fill:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.tut-svg-lab.accent{fill:var(--accent)}
.tut-fig-tf{display:flex;gap:5px;justify-content:center;margin-top:9px;flex-wrap:wrap}
.tut-fig-tf span{
  padding:3px 10px;border-radius:7px;background:var(--bg-2);border:1px solid var(--line);
  color:var(--muted);font-size:11px;font-weight:700;
}
.tut-fig-tf span.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.tut-mock-track{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tut-mock-cover{
  flex:0 0 42px;height:42px;border-radius:10px;display:grid;place-items:center;
  font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.tut-mock-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.tut-mock-info b{font-size:13.5px}
.tut-mock-info span{font-size:11.5px}
.tut-mock-chg{margin-left:auto;font-size:13px;font-weight:800;white-space:nowrap}
.tut-mock-chg.up{color:var(--up)}

.tut-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.tut-grid-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  padding:14px 10px;border-radius:12px;background:var(--bg);border:1px solid var(--line);
}
.tut-grid-ico{font-size:22px;line-height:1}
.tut-grid-lab{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.35}

.tut-loop{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.tut-loop-side{
  flex:1 1 150px;min-width:0;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:5px;padding:14px 12px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line);
}
.tut-loop-ico{font-size:24px;line-height:1}
.tut-loop-side b{font-size:13px}
.tut-loop-side span{font-size:11.5px;line-height:1.45}
.tut-loop-mid{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.tut-loop-arrow{color:var(--accent);font-size:16px;font-weight:800;line-height:1}
.tut-loop-core{
  padding:6px 12px;border-radius:999px;font-size:10.5px;font-weight:800;text-align:center;
  background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.4);color:var(--accent-ink,var(--accent));
}
@media (max-width:560px){
  .tut-loop-mid{flex-direction:row;width:100%;order:2}
  .tut-loop-side:last-child{order:3}
  .tut-loop-arrow{transform:rotate(90deg)}
}

.tut-note{
  padding:12px 14px;border-radius:11px;font-size:12.5px;line-height:1.65;color:var(--muted);
  background:rgba(124,92,255,.08);border:1px solid rgba(124,92,255,.28);
}
.tut-note b{color:var(--text)}

.tut-final{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.tut-final .btn-primary{margin-bottom:10px}
.tut-secondary{
  display:block;width:100%;padding:11px;border-radius:10px;border:1px solid var(--line);
  color:var(--muted);font-size:13px;font-weight:600;transition:.15s;
}
.tut-secondary:hover{color:var(--text);border-color:var(--muted-2)}

.tut-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}
.tut-btn-back{
  padding:11px 16px;border-radius:10px;border:1px solid var(--line);color:var(--muted);
  font-size:13px;font-weight:600;transition:.15s;
}
.tut-btn-back:hover:not(:disabled){color:var(--text);border-color:var(--muted-2)}
.tut-btn-back:disabled{opacity:.35;cursor:not-allowed}
.tut-dots{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.tut-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.15s}
.tut-dot:hover{background:var(--muted-2)}
.tut-dot.done{background:var(--accent-2);opacity:.5}
.tut-dot.active{background:var(--accent);width:22px;border-radius:999px}

@media (max-width:860px){
  .tut-screen{padding:0}
  .tut-card{max-width:none;border:none;border-radius:0;min-height:100vh}
  .tut-top{padding:12px 14px}
  .tut-top-tag{display:none}
  .tut-ghost{padding:7px 10px;font-size:11.5px}
  .tut-index{display:none}
  .tut-steps{grid-template-columns:1fr}
  .tut-main{padding:18px 18px 26px}
  .tut-choice{padding:32px 20px 28px}
  .tut-choice h1{font-size:24px}
  .tut-paths{grid-template-columns:1fr}
  .tut-path{padding:20px 18px}
  .tut-step-head h2{font-size:19px}
  .tut-dots{display:none}
  .tut-nav{gap:10px}
  .tut-nav .btn-primary,.tut-btn-back{flex:1}
}

/* ===================== THEME ENGINE & CUSTOMIZATIONS =====================
   I selettori sono ancorati a :root perche' i pulsanti del selettore portano
   data-theme="gold", data-theme="cyber"… : senza :root ognuno di quei blocchi
   si applicava anche AL PULSANTE, che finiva dipinto con la palette di un tema
   diverso da quello attivo. */
:root[data-theme="light"], :root[data-theme="silver"] {
  --bg: #151821;
  --bg-2: #1e222f;
  --panel: #272c3d;
  --panel-2: #31374c;
  --line: #424963;
  --line-soft: #333a4f;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --accent: #818cf8;
  --accent-2: #6366f1;
  --on-accent: #ffffff;
  --accent-ink: #a5b4fc;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --up: #22c98b;
  --down: #f6465d;
  --gold-ink: #ffd700;
  --topbar-bg: rgba(30, 34, 47, 0.92);
}
:root[data-theme="cyber"] {
  --bg: #060713;
  --bg-2: #0b0d26;
  --panel: #0e1133;
  --panel-2: #161a4c;
  --line: #22296d;
  --line-soft: #181d52;
  --text: #e0f7ff;
  --muted: #8fa2cc;
  --muted-2: #7285ad;   /* il blu scuro di prima spariva sul pannello notte */
  --accent: #ff007f;
  --accent-2: #00f3ff;
  --up: #00f099;
  --gold: #ffe600;
  --shadow: 0 0 35px rgba(255, 0, 127, 0.25);
}
:root[data-theme="gold"] {
  --bg: #0b0a08;
  --bg-2: #14120e;
  --panel: #1a1712;
  --panel-2: #242019;
  --line: #3a3224;
  --line-soft: #2c261b;
  --text: #f7f3e9;
  --muted: #a69b88;
  --muted-2: #6b6354;
  --accent: #d4af37;
  --accent-2: #f3cf65;
  --up: #32d74b;
  --gold: #ffdf00;
  --shadow: 0 10px 40px rgba(212, 175, 55, 0.2);
}

/* Theme Switcher UI */
.theme-select-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
}
.theme-btn {
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.theme-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.theme-btn:hover:not(.active) {
  background: var(--panel-2);
  color: var(--text);
}

/* ===================== VIEW MODE & CARDS GRID ===================== */
.view-switch {
  display: flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.view-switch-btn {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  transition: .15s;
  cursor: pointer;
}
.view-switch-btn.active {
  background: var(--accent);
  color: var(--on-accent);
}

/* CARDS GRID */
.mkt-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.track-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow);
}
/* Copertina del brano come fondo della scheda: vetro smerigliato vero, i
   colori si devono vedere. Sfocatura piu' morbida e velo piu' leggero di
   prima, quando l'immagine era praticamente invisibile. */
.track-card-glass {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  filter: blur(13px) saturate(1.75) brightness(1.08);
  transform: scale(1.3);
  opacity: 1;
}
/* Il velo che tiene leggibili i testi: sfumato, piu' denso in basso dove
   stanno i numeri, quasi trasparente in alto dove il colore deve respirare. */
.track-card-glass::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 12%, transparent) 0%,
    color-mix(in srgb, var(--panel) 46%, transparent) 46%,
    color-mix(in srgb, var(--panel) 76%, transparent) 100%);
}
/* Titolo e artista stanno sopra la parte piu' colorata: un'ombra sottile li
   tiene leggibili qualunque copertina ci sia sotto. */
.track-card:has(.track-card-glass) .track-card-title { text-shadow: 0 1px 6px rgba(0,0,0,.55); }
:root[data-theme="light"] .track-card:has(.track-card-glass) .track-card-title { text-shadow: 0 1px 5px rgba(255,255,255,.85); }
.track-card:hover .track-card-glass { filter: blur(11px) saturate(1.9) brightness(1.12); }
/* Sul tema chiaro la copertina va schiarita, non scurita, o "sporca" la scheda. */
:root[data-theme="light"] .track-card-glass { filter: blur(13px) saturate(1.55) brightness(1.14); }
:root[data-theme="light"] .track-card-glass::after {
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.56) 46%, rgba(255,255,255,.80) 100%);
}
/* Con un fondo colorato sotto, i riquadri delle statistiche devono staccare. */
.track-card:has(.track-card-glass) .track-card-stats {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter: blur(8px);
  border-radius: 12px;
}
.track-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(124,92,255,.2);
}
.track-card-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
/* Il riquadro è la FOTO DELL'ARTISTA, non la copertina del brano: da qui si
   apre il suo profilo. La copertina del brano è il fondo sfocato. */
.track-card-cover {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: .15s;
}
.track-card-cover:hover { transform: scale(1.06); box-shadow: 0 0 0 2px var(--accent); }
.track-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.track-card-info {
  flex: 1;
  min-width: 0;
}
.track-card-title {
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-card-artist {
  display: flex; align-items: center; gap: 2px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none; border: none; padding: 0;
  cursor: pointer; text-align: left; max-width: 100%;
}
.track-card-artist:hover { color: var(--accent-ink); }

/* Caricamento del file audio nello Studio */
.audio-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.studio-audio-preview { height: 32px; max-width: 260px; }
.track-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.genre-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(124,92,255,.12);
  color:var(--accent-ink);
}
.track-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--bg-2);
  border-radius: 10px;
  padding: 10px;
}
.card-stat {
  display: flex;
  flex-direction: column;
}
.card-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
  letter-spacing: .04em;
}
.card-stat-val {
  font-size: 15px;
  font-weight: 800;
}
.track-card-actions {
  display: flex;
  gap: 8px;
}
.btn-sostieni-quick {
  flex: 1;
  background: linear-gradient(135deg, rgba(34, 201, 139, 0.2), rgba(34, 201, 139, 0.35));
  border: 1px solid rgba(34, 201, 139, 0.5);
  color: var(--up);
  font-weight: 800;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: .15s;
}
.btn-sostieni-quick:hover {
  background: var(--up);
  color: #fff;
  transform: translateY(-1px);
}
.btn-contesta-quick {
  flex: 1;
  background: linear-gradient(135deg, rgba(246, 70, 93, 0.15), rgba(246, 70, 93, 0.28));
  border: 1px solid rgba(246, 70, 93, 0.4);
  color: var(--down);
  font-weight: 800;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: .15s;
}
.btn-contesta-quick:hover {
  background: var(--down);
  color: #fff;
  transform: translateY(-1px);
}
.btn-save-mini {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  padding: 9px 11px;
  border-radius: 10px;
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-save-mini:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}
/* Icone dentro i pulsanti rapidi: dimensione minima e colore ereditato, cosi'
   seguono il verde/rosso del voto e l'accento dove il pulsante e' neutro. */
.btn-sostieni-quick svg,.btn-contesta-quick svg{width:15px;height:15px;flex-shrink:0}
.btn-save-mini svg{width:16px;height:16px;color:var(--accent-ink)}
.btn-save-mini:hover svg{color:var(--accent-ink)}

/* Azioni sulle Card: le neutre (salva, repost, condividi, challenge) seguono
   l'accento dell'interfaccia; sostieni/contesta restano verde e rosso perche'
   quel colore È il significato del gesto. */
.reel-act-btn:not(.buy):not(.sell):not(.active){ color: var(--accent-2); }
.reel-act-btn:not(.buy):not(.sell):not(.active):hover{
  border-color: var(--accent); background: rgba(20,20,24,.72);
}

/* Timeframe buttons sul grafico */
.chart-tf-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.tf-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: .15s;
}
.tf-btn:hover {
  color: var(--text);
}
.tf-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ===================== REVIEWS & MUSIC CRITIC SYSTEM ===================== */
.reviews-section {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.reviews-title {
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.star-rating {
  display: flex;
  gap: 4px;
  color: var(--gold);
  font-size: 16px;
}
.review-form {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rating-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}
.star-opt {
  font-size: 22px;
  cursor: pointer;
  color: var(--line);
  transition: .15s;
}
.star-opt.active, .star-opt:hover {
  color: var(--gold);
  transform: scale(1.15);
}
.review-textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
}
.review-tags-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: .15s;
}
.tag-chip.active {
  background: rgba(124,92,255,.2);
  border-color: var(--accent);
  color:var(--accent-ink);
}
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-item {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px 14px;
}
.review-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.review-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
}
.review-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.review-tags {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* ===================== ARTIST FAME METER ===================== */
.artist-fame-card {
  background: linear-gradient(135deg, rgba(124,92,255,.15), rgba(110,200,255,.08));
  border: 1px solid rgba(124,92,255,.3);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.fame-badge-ico {
  font-size: 32px;
}
.fame-details {
  flex: 1;
}
.fame-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.fame-level-name {
  font-weight: 800;
  font-size: 15px;
  color:var(--accent-ink);
}
.fame-progress-bg {
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.fame-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--up));
  border-radius: 999px;
  transition: width .4s ease;
}

/* ===================== INTERACTIVE TUTORIAL SIMULATOR ===================== */
.tut-sim-card {
  background: var(--bg-2);
  border: 1px dashed var(--accent);
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0;
  text-align: center;
}
.tut-sim-hype-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--up);
  margin: 8px 0;
}
.tut-sim-btn {
  background: linear-gradient(135deg, var(--up), #10b981);
  color: #04120c;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(34,201,139,.3);
  transition: .15s;
  cursor: pointer;
}
.tut-sim-btn:hover {
  transform: scale(1.05);
}

/* ===================== NUOVI TEMI E COLORE D'ACCENTO (STILE X) ===================== */
:root[data-theme="sunset"] {
  --bg: #140c07;
  --bg-2: #1e120a;
  --panel: #29180d;
  --panel-hover: #362012;
  --line: #4a2b18;
  --line-soft: #382012;
  --text: #fff3e6;
  --muted: #c49e82;
  --muted-2: #8a6a52;
  --accent: #ff7a00;
  --accent-2: #ff9e42;
  --shadow: 0 8px 24px rgba(255, 122, 0, 0.12);
}

:root[data-theme="emerald"] {
  --bg: #06140e;
  --bg-2: #0b1f17;
  --panel: #112a1f;
  --panel-hover: #18382a;
  --line: #22523e;
  --line-soft: #193d2e;
  --text: #e6ffef;
  --muted: #82c49e;
  --muted-2: #528a6a;
  --accent: #00ba7c;
  --accent-2: #34d399;
  --shadow: 0 8px 24px rgba(0, 186, 124, 0.12);
}

:root[data-theme="platinum"] {
  --bg: #090a10;
  --bg-2: #10121d;
  --panel: #171a2b;
  --panel-hover: #21253d;
  --line: #333a5e;
  --line-soft: #252b45;
  --text: #f0f3ff;
  --muted: #9aa5ce;
  --muted-2: #657099;
  --accent: #e2b0ff;
  --accent-2: #70a5ff;
  --shadow: 0 8px 24px rgba(226, 176, 255, 0.15);
}

/* Accenti chiari: sopra ci va inchiostro scuro, non bianco. Con l'oro il
   bianco dava 1,4:1 — testo praticamente invisibile sul pulsante. */
:root[data-theme="gold"], :root[data-theme="sunset"], :root[data-theme="emerald"], :root[data-theme="platinum"] { --on-accent: #14140f; }

/* OVERRIDE ACCENTO DINAMICO */
:root[data-accent="blue"] { --accent: #1d9bf0; --accent-2: #4bb1f6; --on-accent: #fff; }
:root[data-accent="green"] { --accent: #00ba7c; --accent-2: #34d399; --on-accent: #06231a; }
:root[data-accent="pink"] { --accent: #f91880; --accent-2: #ff52a3; --on-accent: #fff; }
:root[data-accent="orange"] { --accent: #ff7a00; --accent-2: #ff9e42; --on-accent: #2a1400; }
:root[data-accent="gold"] { --accent: #ffd700; --accent-2: #ffe247; --on-accent: #241d00; }
:root[data-accent="violet"] { --accent: #7c5cff; --accent-2: #9b7bfd; --on-accent: #fff; }

.accent-select-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}
.accent-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.accent-swatch:hover {
  transform: scale(1.15);
}
.accent-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(0,0,0,0.4);
  transform: scale(1.15);
}
.theme-rank-badge {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-2);
  margin-left: 6px;
  text-transform: uppercase;
}
.theme-rank-badge.copper { color: #e67e22; border: 1px solid rgba(230,126,34,.3); }
.theme-rank-badge.bronze { color: #cd7f32; border: 1px solid rgba(205,127,50,.3); }
.theme-rank-badge.silver { color: #bdc3c7; border: 1px solid rgba(189,195,199,.3); }
.theme-rank-badge.gold { color: #f1c40f; border: 1px solid rgba(241,196,15,.3); }
.theme-rank-badge.platinum { color: #e2b0ff; border: 1px solid rgba(226,176,255,.3); }

/* Sul tema chiaro i colori dei rank (pensati per brillare sul nero) diventano
   illeggibili: stessa identità cromatica, versione scura. */
:root[data-theme="light"] .theme-rank-badge.copper { color: #8a4b1f; }
:root[data-theme="light"] .theme-rank-badge.bronze { color: #8a5520; }
:root[data-theme="light"] .theme-rank-badge.silver { color: #5b6470; }
:root[data-theme="light"] .theme-rank-badge.gold { color: #7d6100; }
:root[data-theme="light"] .theme-rank-badge.platinum { color: #6b3fa0; }

.theme-lock { display: inline-flex; align-items: center; }
.theme-lock svg { width: 12px; height: 12px; }

/* Play a vetro al centro della Card: c'è solo quando il brano NON ha un file
   audio caricato, cioè quando serve un tocco per far partire l'anteprima. */
.reel-playpad {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  color: #fff; transition: .18s;
}
.reel-playpad svg { width: 30px; height: 30px; margin-left: 4px; }
.reel-playpad:hover { background: rgba(255,255,255,.22); transform: translate(-50%, -50%) scale(1.07); }
.reel-playpad.playing { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(1.4); }

/* Icone minimali: ereditano currentColor, quindi seguono da sole il colore
   d'accento scelto (le schede attive usano --on-accent, le altre --muted). */
.ico{width:16px;height:16px;flex-shrink:0}
.ap-tab,.subtab,.view-switch-btn{display:inline-flex;align-items:center;gap:7px}
/* Il contatore accanto all'etichetta resta staccato dall'icona */
.ap-tab .ap-tab-n{margin-left:2px}
.ap-tab:not(.active) .ico,.subtab:not(.active) .ico,
.view-switch-btn:not(.active) .ico{color:var(--accent-ink);opacity:.75}
.ap-tab.active .ico,.subtab.active .ico,.view-switch-btn.active .ico{color:var(--on-accent)}
/* Numeri con icona nei traguardi: l'icona segue l'accento, il numero il testo. */
.stat-big.with-ico{display:inline-flex;align-items:center;gap:8px}
.stat-big.with-ico .ico{width:18px;height:18px;color:var(--accent-ink)}

.stat-big-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.stat-badge-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(124, 92, 255, 0.12);
  border: 1px solid rgba(124, 92, 255, 0.22);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.stat-badge-ico .ico,
.stat-badge-ico svg {
  width: 18px;
  height: 18px;
  color: var(--accent-ink);
}

.reviews-title{display:inline-flex;align-items:center;gap:8px}
.reviews-title .ico{width:17px;height:17px;color:var(--accent-ink)}
.demo-payment-banner .ico{width:15px;height:15px;color:var(--gold-ink);vertical-align:-2px}

/* ===================== MINI PLAYER SHRUNK (FLOATING BUBBLE PILL) ===================== */
.mini-player {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, width 0.3s ease, border-radius 0.3s ease;
}
.mini-player.shrunk {
  bottom: 18px;
  width: auto;
  min-width: 250px;
  max-width: 360px;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--panel-2);
  border: 1.5px solid var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(124, 92, 255, 0.25);
  transform: translateX(-50%) translateY(0);
  opacity: 0.95;
  backdrop-filter: blur(16px);
}
.mini-player.shrunk .mp-inner {
  padding: 4px 8px;
  gap: 8px;
  row-gap: 0;
  flex-wrap: nowrap;
}
.mini-player.shrunk .mp-cover {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 11px;
}
.mini-player.shrunk .mp-meta {
  flex: 1 1 auto;
}
.mini-player.shrunk .mp-title {
  font-size: 12px;
  font-weight: 800;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Nello stato ridotto sparisce il riquadro della piattaforma, MAI il comando
   di riproduzione: prima restava una pillola con titolo e chiudi, e il brano
   non si poteva più avviare. */
.mini-player.shrunk .mp-sub,
.mini-player.shrunk .mp-embed,
.mini-player.shrunk .mp-btn-ghost,
.mini-player.shrunk .mp-link,
.mini-player.shrunk .mp-panel,
.mini-player.shrunk .mp-note {
  display: none !important;
}
.mini-player.shrunk .mp-btn { display: grid !important; }
/* I comandi del player sono cerchi/quadrati con dentro un'icona: senza
   place-items l'SVG si appoggia alla linea di base del testo e resta storto. */
.mp-btn, .mp-btn-ghost, .mp-close, .mp-link {
  display: inline-grid !important;
  place-items: center;
  line-height: 0;
}
.mp-btn .ico, .mp-btn-ghost .ico, .mp-close .ico, .mp-link .ico { width: 15px; height: 15px; display: block; }
.mp-btn .ico { width: 16px; height: 16px; }
/* La copertina nel cerchio va riempita e centrata, non appoggiata in alto. */
.mp-cover { background-size: cover !important; background-position: center !important; }
.mini-player.shrunk .mp-btn {
  width: 30px;
  height: 30px;
  font-size: 11px;
}
.mini-player.shrunk .mp-close {
  padding: 4px 6px;
  font-size: 11px;
}
.mini-player.shrunk:hover {
  transform: translateX(-50%) scale(1.04);
  opacity: 1;
  border-color: var(--accent-2);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 22px rgba(124, 92, 255, 0.4);
}

/* ===================== GLOBAL CUSTOM SCROLLBARS & DROPDOWNS ===================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) var(--bg);
}

/* Menu a tendina e Select nativi abbinati */
select, option, .filter-select {
  background-color: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
}
select:focus, .filter-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.2);
}
option {
  background-color: var(--panel-2) !important;
  color: var(--text) !important;
  padding: 8px 12px;
}
.filter-dropdown-menu {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(16px);
}
.filter-dropdown-option {
  color: var(--text);
  padding: 9px 13px;
  transition: background .15s ease, color .15s ease;
}
.filter-dropdown-option:hover {
  background: var(--accent);
  color: var(--on-accent, #fff);
}

/* ---- Scheda di un mio brano nello Studio ----
   Tutti i dati su UNA riga orizzontale: copertina, titolo e poi le misure una
   accanto all'altra. Sotto, le voci da completare: una riga ciascuna, con lo
   stato e il pulsante che la apre. */
.st-row{
  display:flex;align-items:center;gap:22px;padding:16px 20px;
  overflow-x:auto;                       /* su schermi stretti scorre, non si spezza */
}
.st-cover{
  position:relative;width:52px;height:52px;flex-shrink:0;border-radius:12px;
  display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;
  background-size:cover;background-position:center;cursor:pointer;overflow:hidden;
  border:1px solid var(--line);transition:.15s;
}
.st-cover:hover{transform:scale(1.04);border-color:var(--accent)}
.st-cover-play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.42);opacity:0;transition:.15s;
}
.st-cover-play svg{width:20px;height:20px;color:#fff;margin-left:2px}
.st-cover:hover .st-cover-play{opacity:1}

.st-id{flex:1 1 150px;min-width:120px}
.st-title{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-sub{font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* una misura = numero sopra, etichetta minuscola sotto */
.st-m{display:flex;flex-direction:column;gap:3px;flex-shrink:0;white-space:nowrap}
.st-m b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.st-m i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted)}
.st-m span{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.st-m-price b{font-size:16px;font-weight:900}
.st-m-price .chg{font-size:11px;align-self:flex-start}

/* Widget grafico Sostieni vs Contesta (cerchiato in giallo) */
.st-m-bal{
  min-width:155px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:7px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
}
.st-bal-label{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
.st-bar{
  display:block;
  height:7px;
  border-radius:4px;
  background:var(--down);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
}
.st-bar-up{
  display:block;
  height:100%;
  background:var(--up);
  border-radius:4px 0 0 4px;
}
.st-bal-pills{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:2px;
}
.st-side{
  font-size:11px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  padding:2px 8px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  line-height:1.3;
}
.st-side.up{
  color:var(--up);
  background:rgba(34,201,139,0.12);
  border:1px solid rgba(34,201,139,0.25);
}
.st-side.down{
  color:var(--down);
  background:rgba(246,70,93,0.12);
  border:1px solid rgba(246,70,93,0.25);
}

/* Pulsante elimina brano nello Studio */
.st-del-track {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  margin-left: 4px;
}
.st-del-track svg,
.st-del-track path {
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.st-del-track:hover {
  color: var(--down);
  background: rgba(246, 70, 93, 0.12);
  border-color: rgba(246, 70, 93, 0.3);
  transform: scale(1.05);
}

/* ---- voci da completare ---- */
.st-items{border-top:1px solid var(--line)}
.st-item + .st-item{border-top:1px solid var(--line-soft)}
.st-item > summary{
  display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:9px 16px;font-size:12.5px;font-weight:700;transition:.15s;
}
.st-item > summary::-webkit-details-marker{display:none}
.st-item > summary:hover{background:var(--panel-2)}
.st-item > summary .ico{width:15px;height:15px;color:var(--muted);flex-shrink:0}
.st-item.done > summary .ico{color:var(--up)}
.st-item-name{flex:1;min-width:0}
.st-item-state{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:var(--gold-ink);background:rgba(255,207,92,.14);
  padding:2px 8px;border-radius:20px;white-space:nowrap;
}
.st-item.done .st-item-state{color:var(--up);background:var(--up-bg)}
.st-item-do{
  font-size:11.5px;font-weight:800;color:var(--accent-ink);
  border:1px solid var(--line);border-radius:8px;padding:4px 11px;white-space:nowrap;
}
.st-item > summary:hover .st-item-do{border-color:var(--accent);background:var(--panel)}
.st-item[open] > summary{background:var(--panel-2)}
.st-item-body{padding:2px 16px 14px}
.st-item-body form{display:flex;flex-direction:column;gap:8px}
.st-item-body form button{align-self:flex-start}
.st-hint{font-size:11px}

/* Campi di testo e input form nello Studio (Didascalia Card, Link, Hashtags) */
.st-item-body input[type="text"],
.st-item-body input[type="url"],
.st-item-body input:not([type]),
.st-item-body textarea,
.studio-panel input[type="text"],
.studio-panel input[type="url"],
.studio-panel input[type="date"],
.studio-panel input[type="number"],
.studio-panel input:not([type]),
.studio-panel textarea {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.st-item-body input::placeholder,
.st-item-body textarea::placeholder,
.studio-panel input::placeholder,
.studio-panel textarea::placeholder {
  color: var(--muted);
}

.st-item-body input:focus,
.st-item-body textarea:focus,
.studio-panel input:focus,
.studio-panel textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.2);
}

/* ---- Studio: barra compatta al posto dei pulsanti larghi ---- */
.studio-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:8px 10px 8px 14px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
}
.studio-toolbar-item{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:12.5px;font-weight:700;
}
.studio-toolbar-item .ico{color:var(--accent-ink)}
.studio-toolbar-item input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.studio-toolbar-state{font-size:11.5px;font-weight:800;color:var(--muted)}
.studio-toolbar-cta{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;
  background:var(--panel);border:1px solid var(--line);color:var(--text);transition:.15s;
}
.studio-toolbar-cta .ico{color:var(--gold-ink);width:15px;height:15px}
.studio-toolbar-cta:hover{border-color:var(--accent);transform:translateY(-1px)}
.studio-toolbar-plan{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:800;
  background:rgba(255,207,92,.14);border:1px solid rgba(255,207,92,.4);color:var(--gold-ink);
}
.studio-toolbar-plan .ico{width:15px;height:15px}
/* Punto interrogativo accanto al titolo: la spiegazione lunga sta nel pannello,
   non in un pulsante largo quanto la scheda. */
.rank-section-head h4{display:inline-flex;align-items:center;gap:7px}
.head-help{
  display:inline-flex;padding:2px;border-radius:50%;color:var(--muted);transition:.15s;
}
.head-help .ico{width:15px;height:15px}
.head-help:hover{color:var(--accent-ink)}

/* ---- Profilo pubblico: Fans e Critici in evidenza ---- */
.ap-audience{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  margin:16px 24px 0;
}
.ap-aud{
  display:flex;flex-direction:column;gap:2px;padding:14px 16px;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 14%, var(--panel)),
    var(--panel));
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius:14px;
}
.ap-aud.critics{
  background:linear-gradient(150deg, color-mix(in srgb, var(--gold) 12%, var(--panel)), var(--panel));
  border-color:color-mix(in srgb, var(--gold) 32%, var(--line));
}
.ap-aud-n{font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1}
.ap-aud-lab{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.ap-aud-note{font-size:11px;margin-top:2px}
@media (max-width:640px){ .ap-audience{margin:16px 16px 0} }

/* ---- Challenge in elenco: dettaglio al clic, non tutto aperto ---- */
.ch-list{display:flex;flex-direction:column;gap:10px}
/* Voce a tendina: il dettaglio si apre SOTTO la riga, dentro la pagina. */
.ch-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.15s}
.ch-item:hover{border-color:var(--accent)}
.ch-item.open{border-color:var(--accent)}
.ch-item .ch-row{background:none;border:none;border-radius:0}
.ch-item .ch-row:hover{transform:none}
.ch-item.open .ch-row-go{transform:rotate(90deg)}
.ch-row-go{transition:transform .18s ease}
.ch-panel:empty{display:none}
.ch-panel{padding:0 16px 16px;border-top:1px solid var(--line-soft)}
.ch-row{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;cursor:pointer;transition:.15s;color:var(--text);
}
.ch-row:hover{border-color:var(--accent);transform:translateY(-1px)}
.ch-row.done{opacity:.72}
.ch-row-ico{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  background:var(--bg-2);color:var(--accent-ink);
}
.ch-row-ico svg{width:19px;height:19px}
.ch-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ch-row-title{font-weight:800;font-size:14.5px}
.ch-row-sub{font-size:12px}
.ch-row-state{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;text-align:right}
.ch-row-state .ch-countdown{font-size:11.5px}
.ch-row-go{color:var(--muted);display:flex}
.ch-row:hover .ch-row-go{color:var(--accent-ink)}
@media (max-width:640px){
  .ch-row{flex-wrap:wrap}
  .ch-row-state{align-items:flex-start;text-align:left;width:100%}
  .ch-row-go{display:none}
}

/* Riepilogo in cima al dettaglio della challenge */
.ch-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:14px}
.ch-sum{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ch-sum b{font-size:16px;font-weight:900}
.ch-sum span{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

/* ---- Abbonamenti mensili ---- */
.subscriptions{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.sub-card{
  position:relative;display:flex;flex-direction:column;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 16px;
  transition:.18s;
}
.sub-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.sub-card.featured{border-color:color-mix(in srgb, var(--accent) 55%, var(--line))}
.sub-card.active{box-shadow:0 0 0 1px var(--accent)}
.sub-tag{
  position:absolute;top:-9px;right:14px;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
}
.sub-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.sub-price{font-size:26px;font-weight:900;letter-spacing:-.02em}
.sub-price span{font-size:13px;font-weight:700;color:var(--muted)}
.sub-daily{font-size:16px;font-weight:800;color:var(--accent-ink)}
.sub-daily span{font-size:12px;font-weight:600;color:var(--muted)}
.sub-rate{font-size:11.5px}
.sub-perks{list-style:none;display:flex;flex-direction:column;gap:6px;margin:8px 0 4px}
.sub-perks li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45}
.sub-perks .ico{width:14px;height:14px;margin-top:2px;color:var(--accent-ink)}
.sub-card .btn-primary{margin-top:auto;width:100%}

/* Player della piattaforma dentro la Card, esattamente dove stava il play:
   area minima al centro, non copre né i pulsanti né il testo in basso. */
/* Player della piattaforma dentro la Card: perfettamente centrato nello spazio libero,
   non copre mai i pulsanti a destra né la descrizione in basso. */
/* L'altezza arriva inline da mountCardPlayer, presa da PLATFORM_EMBED_H: il
   riquadro deve combaciare col player che contiene. Con una misura fissa per
   tutte le piattaforme sotto avanzava fondo vuoto e il bordo sembrava
   interrotto a metà. Il fondo è quello dei pannelli, non un nero a sé: se il
   widget non riempie tutto, quel che resta si confonde con la Card. */
.card-player {
  position: absolute;
  top: 54px;
  left: 14px;
  right: 14px;
  z-index: 20;
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
  background: var(--panel);
  border: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  animation: cardPlayerIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Il contorno è un anello disegnato sopra il player, non un bordo del
   riquadro: così segue la curva fino in fondo — angoli compresi — invece di
   fermarsi dove finisce il contenuto dell'iframe. */
.card-player::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
}
.card-player-slot {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  line-height: 0;
}
.card-player iframe, .card-player-slot iframe {
  border-radius: inherit;
  display: block;
  border: none !important;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
@keyframes cardPlayerIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .card-player{animation:none} }

/* Badge dei brani caricati su SoundUp: si ascoltano qui, non altrove. */
.audio-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(34,201,139,.18); color: var(--up);
  border: 1px solid rgba(34,201,139,.45);
  backdrop-filter: blur(6px);
}
.audio-badge svg { width: 11px; height: 11px; }

/* Il ticker è un codice interno, non il nome del brano: sotto il titolo resta
   come riferimento tecnico discreto, senza competere col titolo vero. */
.ticker-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.06em;color:var(--muted-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-right:7px;
}

/* --- selettore lingua (i18n) --- */
/* Selettore della lingua: bandiera disegnata + sigla. Le emoji-bandiera su
   Windows non si compongono e lasciavano il codice testuale accanto alla
   sigla, cioe' "IT IT". */
.lang-pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}
.lang-pick:hover { border-color: var(--accent); }
.lang-pick * { pointer-events: none; }
.lang-pick .flag-ico { width: 18px; height: 12px; border-radius: 2px; flex: 0 0 18px; }
.lang-pick-code { letter-spacing: .04em; }
.lang-pick-caret { color: var(--muted); font-size: 10px; line-height: 1; transition: transform .15s ease; }
.lang-pick[aria-expanded="true"] { border-color: var(--accent); }
.lang-pick[aria-expanded="true"] .lang-pick-caret { transform: rotate(180deg); }

/* ---- Crediti giornalieri da reclamare ---- */
.daily-section.hidden { display: none; }
.daily-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.daily-head h3 { margin-bottom: 2px; }
.daily-head p { font-size: 12.5px; line-height: 1.45; max-width: 420px; }
.daily-amount {
  flex: 0 0 auto;
  font-size: 26px; font-weight: 900; letter-spacing: -.02em;
  color: var(--up); white-space: nowrap;
}
.daily-amount.spento { color: var(--muted-2); }
.daily-parts { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 12px; }
.daily-part {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px;
}
.daily-part-ico { font-size: 14px; line-height: 1; }
.daily-part-lab { flex: 1 1 auto; color: var(--muted); min-width: 0; }
.daily-part b { color: var(--text); white-space: nowrap; }
.daily-claim { min-height: 46px; font-size: 14px; font-weight: 800; }
.daily-claim:disabled { opacity: .55; cursor: default; }
.daily-note { font-size: 11.5px; line-height: 1.5; margin-top: 10px; }

/* Pallino sulla scheda Account quando c'e' qualcosa da ritirare. */
.tab.has-daily, .nav-item.has-daily { position: relative; }
.tab.has-daily::after, .nav-item.has-daily::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--up); box-shadow: 0 0 0 2px var(--bg);
  animation: dailyPulse 1.8s ease-in-out infinite;
}
@keyframes dailyPulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.35); opacity: .65 } }
@media (prefers-reduced-motion: reduce) { .tab.has-daily::after, .nav-item.has-daily::after { animation: none } }

/* ---- Rientro rapido sulla schermata d'accesso ---- */
.quick-signin {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; margin-bottom: 16px;
  background: rgba(124, 92, 255, .08);
  border: 1px solid rgba(124, 92, 255, .3);
  border-radius: 14px;
}
.quick-signin.hidden { display: none; }
.quick-signin-who { display: flex; align-items: center; gap: 11px; }
.quick-signin-who > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.quick-signin-who b { font-size: 14px; }
.quick-signin-who span { font-size: 11.5px; line-height: 1.35; }
.quick-signin-avatar {
  flex: 0 0 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.quick-signin-forget {
  font-size: 11.5px; color: var(--muted); padding: 4px; text-decoration: underline;
}
.quick-signin-forget:hover { color: var(--text); }

.remember-row {
  display: flex; align-items: center; gap: 9px;
  margin: -2px 0 12px; font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.remember-row input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---- Scelta del ruolo dopo il primo accesso social ---- */
.role-pick-box { width: min(440px, 92vw); }
.role-pick-sub { font-size: 12.5px; margin-bottom: 14px; line-height: 1.5; }
.role-pick-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.role-pick-opt {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding: 16px 12px; border-radius: 13px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.role-pick-opt:hover { border-color: var(--accent); background: var(--panel-2); }
.role-pick-opt b { font-size: 13.5px; }
.role-pick-opt span.muted { font-size: 11.5px; line-height: 1.4; }
.role-pick-ico { font-size: 24px; line-height: 1; }
.role-pick-note { font-size: 11.5px; margin-top: 12px; text-align: center; }

/* ---- Riquadro Accesso e sicurezza nell'Account ---- */
.sec-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.sec-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sec-row-text b { font-size: 13.5px; }
.sec-row-text span { font-size: 12px; }
.sec-row .btn-trade { flex: 0 0 auto; min-height: 36px; padding: 0 16px; font-size: 12.5px; }
.sec-devices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sec-device {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line);
}
.sec-device-ico { font-size: 16px; }
.sec-device-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sec-device-text b { font-size: 12.5px; }
.sec-device-text span { font-size: 11.5px; }
.sec-device-empty { font-size: 12.5px; padding: 10px 0; }
.sec-forget-all {
  margin-top: 12px; font-size: 12px; color: var(--down); text-decoration: underline; padding: 4px;
}
.sec-forget-all.hidden { display: none; }

/* Tendina delle lingue: ancorata al pulsante, sopra a tutto il resto.
   z-index alto sul serio: la schermata di accesso sta a 9999 e la sua scheda
   a 10001, quindi con un valore piccolo il menu finiva dietro al testo. */
.lang-menu {
  position: fixed;
  z-index: 10050;
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.lang-menu-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.lang-menu-opt:hover { background: var(--panel-2); color: var(--text); }
.lang-menu-opt.active { background: rgba(124, 92, 255, .14); color: var(--text); font-weight: 800; }
.lang-menu-opt .flag-ico { width: 20px; height: 13.5px; border-radius: 2px; flex: 0 0 20px; }
.lang-menu-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-menu-code { font-size: 11px; color: var(--muted-2); letter-spacing: .04em; }
.lang-menu-check { color: var(--accent); font-weight: 800; }
.lang-select-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.lang-opt-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lang-opt-btn:hover {
  border-color: var(--accent);
  background: var(--bg);
}
.lang-opt-btn.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent-ink);
}
.lang-opt-btn span {
  font-size: 11px;
  color: var(--muted);
}
.auth-lang-wrap {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* Card cliccabile nella scheda del brano: è un <button>, quindi va ripulito
   dallo stile predefinito e reso evidentemente cliccabile. */
.track-card-preview.as-link{
  width:100%;text-align:left;cursor:pointer;color:var(--text);
  background:var(--panel);border:1px solid var(--line);transition:.15s;
}
.track-card-preview.as-link:hover{border-color:var(--accent);transform:translateY(-1px)}

/* Post scritti dall'artista, nella scheda del brano. */
.d-post-list{display:flex;flex-direction:column;gap:8px}
.d-post{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.d-post-body{font-size:13px;line-height:1.5}
.d-post-meta{font-size:11px;margin-top:5px}

/* Avviso di connessione persa: in cima a tutto, impossibile non vederlo. */
.server-down {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 700;
  background: var(--down); color: #fff; position: sticky; top: 0; z-index: 30;
}
.server-down button {
  border: 1px solid rgba(255,255,255,.55); color: #fff;
  padding: 3px 12px; border-radius: 7px; font-weight: 800; font-size: 12px;
}
.server-down button:hover { background: rgba(255,255,255,.18); }

/* ---- Challenge: menu a sinistra, Televoto staccato a destra ---- */
.ch-nav {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.ch-nav .subtabs { flex: 1; min-width: 0; margin-bottom: 0; }
.ch-live-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: auto; padding: 9px 15px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--line);
  text-align: left; transition: .15s;
}
.ch-live-cta:hover { border-color: var(--accent); transform: translateY(-1px); }
.ch-live-cta.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ch-live-text { display: flex; flex-direction: column; line-height: 1.25; }
.ch-live-text b { font-size: 13px; }
.ch-live-text .muted { font-size: 11px; }
/* Il puntino pulsa come una spia "in onda": dice che è uno strumento dal vivo. */
.ch-live-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--down); box-shadow: 0 0 0 0 var(--down-bg);
  animation: chLivePulse 2s ease-out infinite;
}
@keyframes chLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(246,70,93,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(246,70,93,0); }
  100% { box-shadow: 0 0 0 0 rgba(246,70,93,0); }
}
@media (prefers-reduced-motion: reduce) { .ch-live-dot { animation: none; } }
@media (max-width: 720px) {
  .ch-live-cta { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---- Selettore dei temi: schede con anteprima dei colori veri ----
   Due gruppi separati (disponibili / da sbloccare) invece di una fila unica
   in cui i temi bloccati sembravano scelte a portata di clic. */
.theme-group + .theme-group { margin-top: 20px; }
.theme-group-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 10px;
}
.theme-group-n {
  font-size: 11px; font-weight: 800; color: var(--muted);
  background: var(--bg-2); border-radius: 999px; padding: 1px 7px;
}
.theme-group-note { font-size: 12px; margin: -4px 0 10px; }
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}
.theme-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; transition: .15s;
}
.theme-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* L'anteprima e' il tema stesso: tre fasce con sfondo, pannello e accento. */
.theme-card-swatch {
  display: flex; height: 34px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line);
}
.theme-card-swatch i { flex: 1; }
.theme-card-swatch i:last-child { flex: .7; }
.theme-card-name { font-size: 13px; font-weight: 700; }
.theme-card-foot { display: flex; align-items: center; gap: 6px; }
.theme-card-req {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.theme-card-req.free { color: var(--muted); }
.theme-card-on {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent-ink);
}
/* Bloccato: si vede che c'e', non che e' pronto. Resta cliccabile perche' il
   clic spiega quale rank serve. */
.theme-card.locked { opacity: .72; }
.theme-card.locked:hover { opacity: 1; }
.theme-card.locked .theme-card-swatch { filter: saturate(.35); }
.theme-card.locked .theme-card-name { color: var(--muted); }
.theme-card.locked .theme-card-req.copper { color: #b06a2c; }
.theme-card.locked .theme-card-req.bronze { color: #cd7f32; }
.theme-card.locked .theme-card-req.silver { color: #9aa3ad; }
.theme-card.locked .theme-card-req.gold { color: #d8ad12; }
.theme-card.locked .theme-card-req.platinum { color: #c79bf0; }
:root[data-theme="light"] .theme-card.locked .theme-card-req.copper { color: #8a4b1f; }
:root[data-theme="light"] .theme-card.locked .theme-card-req.bronze { color: #8a5520; }
:root[data-theme="light"] .theme-card.locked .theme-card-req.silver { color: #5b6470; }
:root[data-theme="light"] .theme-card.locked .theme-card-req.gold { color: #7d6100; }
:root[data-theme="light"] .theme-card.locked .theme-card-req.platinum { color: #6b3fa0; }

/* ===================== SEZIONE SCOUT (ascoltatore) ===================== */
/* Rank e stile affiancati su desktop, impilati sul telefono. */
.scout-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}
@media (max-width: 860px) {
  .scout-cards-row { grid-template-columns: 1fr; }
}
.scout-stats { margin-top: 14px; }
.scout-bio {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  max-width: 65ch;
}
.scout-block-title { margin: 18px 0 2px; font-size: 15px; }
.scout-panel { margin-top: 6px; }

/* Ago fermo al centro quando non c'e' ancora nessun voto: non deve sembrare
   una posizione scelta dall'utente. */
.meter-needle.idle { opacity: .45; }

.scout-ch-list, .scout-post-list { display: flex; flex-direction: column; gap: 10px; }
.scout-ch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.scout-ch-row:hover { border-color: var(--accent); }
.scout-ch-row.won { border-color: rgba(255, 215, 0, .45); }
.scout-ch-main { flex: 1; min-width: 0; }
.scout-ch-title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scout-ch-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--muted);
}
.scout-ch-credits { font-weight: 800; font-size: 13px; white-space: nowrap; }

.scout-post-row {
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.scout-post-side { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.scout-post-side.pos { color: var(--up); }
.scout-post-side.neg { color: var(--down); }
.scout-post-body { margin: 6px 0; font-size: 13px; }
.scout-post-artist {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

/* Barra "come ti riceve il pubblico" nello Studio Artista. */
.artist-reception { margin-top: 14px; }
.reception-bar {
  height: 10px;
  border-radius: 6px;
  background: var(--down);
  overflow: hidden;
  margin: 8px 0 6px;
}
.reception-pro { height: 100%; background: var(--up); }
.reception-legend { display: flex; justify-content: space-between; font-size: 11.5px; }

/* Riga d'identita' nella pagina Account (solo impostazioni). */
/* Senza il riquadro della foto l'identita' e' una colonna di righe: nome col
   distintivo, contatto, come sei entrato, da quando. L'email puo' essere piu'
   larga dello schermo, quindi va spezzata invece di uscire dal bordo. */
.account-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.account-identity .scout-name-row { flex-wrap: wrap; gap: 10px; }
.account-identity .profile-email,
.account-identity .profile-provider,
.account-identity .profile-since {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Stacco tra Attività e Classifica: due blocchi nella stessa pagina. */
.view-head.section-split {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* DUELS & CLASHES GRIDS */
.ch-duels-grid, .ch-clashes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.ch-duel-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ch-duel-side {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.ch-duel-badge {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent);
  background: rgba(124,92,255,.15);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* ===================== PROFILO SCOUT & INDICATORE STILE ===================== */
.scout-profile-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.scout-cover-banner {
  height: 220px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2), #ff7a00);
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: var(--radius) var(--radius) 0 0;
}
.scout-header-content {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 20px 16px;
  margin-top: -36px;
  position: relative;
}
.scout-avatar-wrap .profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid var(--panel);
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.scout-main-info {
  flex: 1;
}
.scout-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.scout-country-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-2);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  display: inline-flex;
  align-items: center;
}

/* BARRA RANK CHE PULSA & LAMPEGGIA DEL COLORE DEL RANK */
.scout-rank-glow-box {
  padding: 0 20px 16px;
}
@keyframes rankGlowPulse {
  0%, 100% { box-shadow: 0 0 8px var(--glow-col); filter: brightness(1); }
  50% { box-shadow: 0 0 24px var(--glow-col); filter: brightness(1.3); }
}
.rank-progress-fill {
  animation: rankGlowPulse 2.5s infinite ease-in-out;
}
.rank-progress-fill.steel { --glow-col: rgba(140,150,170,.6); }
.rank-progress-fill.copper { --glow-col: rgba(230,126,34,.7); }
.rank-progress-fill.bronze { --glow-col: rgba(205,127,50,.8); }
.rank-progress-fill.silver { --glow-col: rgba(189,195,199,.9); }
.rank-progress-fill.gold { --glow-col: rgba(241,196,15,1); }
.rank-progress-fill.platinum { --glow-col: rgba(226,176,255,1); }

/* METER STILE SCOUTING & ARTISTA (BI-DIREZIONALE) */
.scout-style-meter-box {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px;
  margin: 0 20px 20px;
}
.meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.meter-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.meter-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.meter-track-wrap {
  margin-top: 10px;
}
.meter-track-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.meter-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6465d 0%, #3a3f4d 50%, #22c98b 100%);
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.meter-center-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  opacity: 0.6;
}
.meter-needle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
  transition: left .5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accento come testo sul tema chiaro: la variante chiara di ogni accento sul
   bianco sta tra 1,3:1 e 2,4:1, cioe' illeggibile. Stessa tinta, versione
   scura. Selettore doppio per vincere sui blocchi [data-accent]. */
:root[data-theme="light"] { --accent-ink: #5b46d6; }
:root[data-theme="light"][data-accent="violet"] { --accent-ink: #5b46d6; }
:root[data-theme="light"][data-accent="blue"]   { --accent-ink: #0b6ea8; }
:root[data-theme="light"][data-accent="green"]  { --accent-ink: #067050; }
:root[data-theme="light"][data-accent="pink"]   { --accent-ink: #c4116a; }
:root[data-theme="light"][data-accent="orange"] { --accent-ink: #9c4a00; }
:root[data-theme="light"][data-accent="gold"]   { --accent-ink: #7a5f00; }

/* SILVER: il tema condivide il blocco di variabili con "light", e li' dentro
   --accent-ink e' un valore fisso (#a5b4fc). Per "light" quel valore viene
   poi corretto accento per accento dalle sette righe qui sopra; per "silver"
   nessuno lo correggeva, quindi restava lavanda con QUALUNQUE accento: chi
   sceglieva l'oro vedeva bordi dorati e testi d'accento viola.
   Silver e' un tema scuro (fondo #151821), quindi non gli servono le tinte
   scure di "light": gli basta tornare al comportamento predefinito, dove
   --accent-ink segue l'accento da solo. */
:root[data-theme="silver"] { --accent-ink: var(--accent-2); }

/* ===================== LIVELLO FAN (ecosistema XP/Hype) =====================
   Barra di progressione dell'ascoltatore, mostrata nella sezione Scout. I
   colori arrivano solo da variabili: con sette temi e sei accenti un valore
   fisso qui spaccherebbe il contrasto su almeno meta' delle combinazioni. */
.fan-level-card {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.fan-level-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.fan-level-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
}
.fan-level-title {
  font-weight: 700;
  color: var(--accent-ink);
}
.fan-level-xp {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}
.fan-level-track {
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.fan-level-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.fan-level-foot {
  margin-top: 8px;
  font-size: 12.5px;
}

/* Hype dell'artista nello Studio: stessa struttura, lettura opposta —
   non "quanto sei salito", ma "quanta attenzione stai ricevendo". */
.artist-hype-card {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.artist-hype-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent-ink);
}
.artist-hype-sub { font-size: 12.5px; margin: 4px 0 10px; }
/* Senza attivita' il dettaglio non c'e' e il riquadro si chiude subito sotto
   la riga dei numeri: nessun margine appeso in fondo. */
.artist-hype-card > .artist-hype-sub:last-child { margin-bottom: 0; }
.artist-hype-trend.up { color: var(--up); }
.artist-hype-trend.down { color: var(--down); }

/* ============ ARTISTI SEGUITI (intestazione Scout + finestra) ============
   I due pulsanti stanno accanto al nome, dove prima c'era spazio vuoto: per
   togliere un follow non serve piu' aprire il profilo dell'artista. */
.scout-follow-btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.scout-follow-btn{
  display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  font-weight:700;font-size:12.5px;cursor:pointer;transition:border-color .15s,background .15s;
}
.scout-follow-btn:hover{background:var(--line);border-color:var(--accent)}
.scout-follow-btn .scout-follow-n{
  font-size:16px;font-weight:800;color:var(--accent-ink);line-height:1;
}
.scout-follow-btn.critic .scout-follow-n{color:var(--down)}
.scout-follow-lab{color:var(--muted);font-weight:600;white-space:nowrap}

.follow-chips{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.follow-chip-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:12px;display:flex;flex-direction:column;gap:10px;
}
.follow-chip-header{display:flex;align-items:center;justify-content:space-between;width:100%}
.follow-chip-main{
  display:flex;align-items:center;gap:10px;background:none;
  border:0;color:var(--text);cursor:pointer;text-align:left;padding:0;
}
.follow-chip-main:hover .follow-chip-name{color:var(--accent-ink)}
.follow-chip-avatar{
  width:36px;height:36px;border-radius:50%;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;
}
.follow-chip-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.follow-chip-name{font-weight:700;font-size:13.5px;color:var(--text);transition:color .2s ease}
.follow-chip-role{font-size:10.5px;font-weight:700}
.follow-chip-role.fan{color:var(--up)}
.follow-chip-role.critic{color:var(--down)}
.follow-chip-x{
  padding:5px 10px;background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--muted);font-size:12px;cursor:pointer;transition:all .2s ease;
}
.follow-chip-x:hover{background:var(--down);color:var(--on-accent);border-color:var(--down)}
.follow-chip-x:disabled{opacity:.45;cursor:default}

.follow-chip-xp-block{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;display:flex;flex-direction:column;gap:6px;
}
.follow-chip-xp-info{
  display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);
}
.follow-chip-lvl{display:flex;align-items:center;gap:6px}
.badge-mini{
  background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:800;
  padding:2px 6px;border-radius:6px;line-height:1.2;
}
.fan-title-accent{color:var(--text);font-weight:700}
.follow-chip-xp-val{font-weight:700;font-size:11px;color:var(--accent-ink)}
.follow-chip-xp-track{
  width:100%;height:6px;background:var(--bg-1);border-radius:3px;overflow:hidden;
  border:1px solid var(--line);
}
.follow-chip-xp-fill{
  height:100%;background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:3px;transition:width .4s ease;
}

.follows-box{width:min(520px,94vw)}
.follows-tabs{display:flex;gap:8px;padding:12px 20px 0}
.follows-tab{
  flex:1;padding:9px 12px;border-radius:10px;background:var(--panel-2);border:1px solid transparent;
  color:var(--muted);font-weight:700;font-size:12.5px;cursor:pointer;transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.follows-tab.active{background:var(--bg-2);border-color:var(--accent);color:var(--text)}
.follows-tab.fan.active{background:var(--bg-2);border-color:var(--up);color:var(--text)}
.follows-tab.critic.active{background:var(--bg-2);border-color:var(--down);color:var(--text)}

/* Riquadro requisiti rank Scout nelle Challenge (Fisso su Desktop, Accordion a comparsa su Mobile) */
.challenge-ranks-info-card {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(22, 24, 31, 0.9));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 18px;
  overflow: hidden;
  transition: all 0.2s ease;
}
button.cri-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.cri-caret {
  font-size: 14px;
  color: var(--muted);
  transition: transform 0.2s ease;
  margin-left: 10px;
}
.challenge-ranks-info-card.open .cri-caret {
  transform: rotate(180deg);
  color: var(--accent);
}
/* Il riquadro si apre e si chiude a ogni larghezza: la regola che lo chiudeva
   stava dentro la media query dei telefoni, quindi su schermo largo il tasto
   girava la freccetta ma l'elenco restava sempre aperto. */
.cri-grid {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 0 18px 16px 18px;
}
.challenge-ranks-info-card.open .cri-grid { display: grid; }
.cri-item {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.cri-item.steel { border-color: rgba(140, 140, 155, 0.4); }
.cri-item.copper { border-color: rgba(176, 106, 44, 0.4); }
.cri-item.bronze { border-color: rgba(205, 127, 50, 0.4); }
.cri-item.silver { border-color: rgba(154, 163, 173, 0.4); }
.cri-rank {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.cri-item.steel .cri-rank { color: #8a8a9a; }
.cri-item.copper .cri-rank { color: #b06a2c; }
.cri-item.bronze .cri-rank { color: #cd7f32; }
.cri-item.silver .cri-rank { color: #9aa3ad; }
.cri-mode {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.ch-private-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ch-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  white-space: nowrap;
}
.ch-create-btn.locked {
  opacity: 0.6;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.ch-create-btn span {
  font-size: 16px;
  font-weight: 800;
}

/* Card di Creazione Challenge (sfondo scuro con linee, testo e pulsante abbinati all'accento) */
.ch-create-card {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--line-accent, var(--accent)) !important;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 270px !important;
  height: 100% !important;
  padding: 24px 20px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
  box-sizing: border-box !important;
}
.ch-create-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 12px 32px rgba(124, 92, 255, 0.25) !important;
}
.ch-create-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 6px;
}
.ch-create-card-ico {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(124, 92, 255, 0.12);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 28px;
  font-weight: 900;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  line-height: 1;
}
.ch-create-card-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent-ink, var(--accent)) !important;
}
.ch-create-card-sub {
  font-size: 12px;
  color: var(--muted) !important;
  max-width: 240px;
  margin-bottom: 10px;
}
.ch-create-card-action {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 1px solid var(--accent) !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease;
}
.ch-create-card-action:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}
.ch-create-card.locked {
  background: var(--panel-2) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.ch-create-card.locked .ch-create-card-ico {
  background: var(--bg-2);
  color: var(--muted);
  border-color: var(--line);
}
.ch-create-card.locked .ch-create-card-title {
  color: var(--text) !important;
}
.ch-create-card.locked .ch-create-card-action {
  background: var(--bg-2) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
}

.ch-duel-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 270px;
  box-sizing: border-box;
}

/* Layout Verticale per Duelli 1v1 con Brani uno sopra l'altro e Cover Image */
.ch-duel-vs-vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.ch-duel-track-btn, .ch-duel-track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ch-duel-track-btn:hover, .ch-duel-track-row:hover {
  border-color: var(--accent);
  background: var(--panel-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.ch-duel-cover {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
}
.ch-duel-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ch-duel-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.ch-duel-artist {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-duel-artist span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-duel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
}
.ch-duel-price {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--up);
  white-space: nowrap;   /* il rombo e le cifre restano sulla stessa riga */
  flex-shrink: 0;
}
.ch-duel-vote-btn {
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ---- Duello 1v1: il brano al centro, il comando sotto ----
   Copertina, bandiera, titolo e genere incolonnati e centrati, e sotto il
   pulsante a tutta larghezza. In fila orizzontale i due contendenti si
   leggevano storti — testo a sinistra, comando a destra — e su scheda stretta
   l'uno rubava spazio all'altro. Vale solo per i duelli: le Sfide fra Generi
   usano .ch-duel-track-row e restano come sono. */
.ch-duel-track-btn {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 12px;
}
.ch-duel-track-btn .ch-duel-cover { margin-bottom: 1px; }
.ch-duel-track-btn .ch-duel-info {
  flex: 0 0 auto;
  width: 100%;
  align-items: center;
}
.ch-duel-track-btn .ch-duel-title,
.ch-duel-track-btn .ch-duel-artist { max-width: 100%; }
.ch-duel-track-btn .ch-duel-artist,
.ch-duel-track-btn .ch-duel-meta { justify-content: center; }
.ch-duel-track-btn .ch-duel-vote-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
}

/* ---- Sfide fra Generi: icona e nome al centro, comando sotto ---- */
.ch-clash-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px;
}
.ch-clash-ico {
  width: 52px; height: 52px; border-radius: 10px;
  display: grid; place-items: center; font-size: 24px;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,0.1);
}
.ch-clash-name {
  font-size: 14.5px; font-weight: 800; color: var(--text); line-height: 1.25;
  max-width: 100%; overflow-wrap: anywhere;
}
.ch-clash-btn {
  width: 100%;
  min-height: 38px;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  display: flex; align-items: center; justify-content: center;
}

/* Divisore VS Orizzontale al Centro tra i due brani */
.ch-duel-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  width: 100%;
}
.ch-duel-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.ch-duel-badge {
  font-size: 12px;
  font-weight: 900;
  color: var(--accent-ink);
  background: rgba(124, 92, 255, 0.16);
  border: 1px solid rgba(124, 92, 255, 0.3);
  padding: 2px 10px;
  border-radius: 12px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ==========================================================================
   OTTIMIZZAZIONE MASTER MOBILE & SMARTPHONE (iOS / Android / PWA)
   ========================================================================== */
@media (max-width: 640px) {
  /* Prevenzione scrolling orizzontale non voluto e zoom automatico Safari */
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    font-size: 13.5px;
    -webkit-tap-highlight-color: transparent;
  }
  
  input[type="text"], input[type="password"], input[type="email"],
  input[type="url"], input[type="number"], select, textarea {
    font-size: 16px !important; /* Mantiene la leggibilità e blocca lo zoom automatico iOS */
  }

  /* Spaziatura contenitore principale con margine di sicurezza inferiore per il MiniPlayer */
  .content {
    padding: 14px 12px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Header / Topbar mobile compatta */
  .topbar {
    padding: 0 10px !important;
    height: 52px !important;
    gap: 6px !important;
  }
  .brand {
    gap: 6px !important;
  }
  .brand-mark {
    font-size: 18px !important;
  }
  .brand-name {
    font-size: 17px !important;
  }
  .account {
    gap: 6px !important;
    flex-shrink: 0;
  }
  .wallet-value {
    font-size: 13px !important;
  }
  .user-chip {
    padding: 4px 6px 4px 8px !important;
    font-size: 11.5px !important;
    gap: 5px !important;
    border-radius: 8px !important;
  }
  .user-chip button {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

  /* Intestazione delle Viste */
  .view-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .view-head h1 {
    font-size: 20px !important;
  }

  /* Strumenti di ricerca e filtri Hype / Mercato */
  .market-tools {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .market-tools input {
    width: 100% !important;
    font-size: 14px !important;
    padding: 9px 12px !important;
  }

  /* Tabella Mercato / Hype */
  .table-wrap {
    border-radius: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: none !important;
  }
  .mkt-table {
    min-width: 480px;
  }
  .mkt-table tbody td, .mkt-table thead th {
    padding: 10px 10px !important;
    font-size: 12.5px !important;
  }
  .avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }

  /* Scheda Brani nello Studio Artista (.st-row) */
  .st-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    overflow-x: visible !important;
  }
  .st-id {
    width: 100% !important;
    min-width: 0 !important;
  }
  .st-title {
    font-size: 14px !important;
  }
  .st-m-bal {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
  }
  .st-actions {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-top: 1px solid var(--line-soft);
    padding-top: 10px !important;
    margin-top: 2px !important;
  }
  .studio-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  /* Pannello Dettaglio Brano (Drawer) Modal Mobile a tutto schermo */
  #drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .drawer-head {
    padding: 14px 14px 12px !important;
  }
  .drawer-close {
    top: 12px !important;
    right: 12px !important;
  }
  .d-body {
    padding: 14px !important;
  }
  .d-price {
    font-size: 28px !important;
  }
  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Finestra Modale Profilo Artista a tutto schermo su Smartphone */
  .artist-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .ap-banner {
    height: 130px !important;
    border-radius: 0 !important;
  }
  .ap-head {
    padding: 0 14px !important;
    margin-top: -30px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .ap-avatar {
    width: 70px !important;
    height: 70px !important;
    font-size: 20px !important;
  }
  .ap-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
    gap: 8px !important;
  }

  /* MiniPlayer ancorato in basso con Safe Area iOS / Android Gesture Bar */
  .mini-player {
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    border-radius: 14px 14px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    z-index: 80 !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mini-player.shrunk {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 92vw !important;
  }
  .mp-inner {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .mp-cover {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }

  /* Schermata CARDS Full Screen per Smartphone con Tasto Chiudi ✕ */
  #view-reel.view.reel-view {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 90 !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
  }

  .reel-mobile-close {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 100 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(10, 11, 15, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    display: grid !important;
    place-items: center !important;
    backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .reel-mobile-close:active {
    transform: scale(0.92) !important;
    background: rgba(10, 11, 15, 0.95) !important;
  }

  .reel-feed {
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .reel-card {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Prevenzione barre di scorrimento orizzontali su tutta l'app */
  body, .app, .content, .table-wrap, .st-row, .scout-cards-row, .mini-player {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .tabs::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar,
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
}

@media (max-width: 480px) {
  /* Il nome del marchio NON si nasconde piu'.
     La regola precedente era `.brand-name { display:none }` per tutta la
     pagina, con la motivazione "far spazio ai tab". Due cose erano cambiate
     e la regola era rimasta indietro:
       - sotto i 900px i tab non stanno piu' nella barra in alto, si spostano
         in fondo allo schermo (vedi `header.topbar > nav.tabs` piu' sotto),
         quindi quello spazio non serve piu' a nessuno;
       - il selettore non era limitato alla barra, cosi' spegneva il nome
         anche nella SCHERMATA D'ACCESSO, dove non c'e' nessun tab e lo
         spazio abbonda: chi apriva l'app dal telefono trovava un rombo
         solitario al posto di "SoundUp", cioe' l'app non si presentava.
     Se un giorno servisse di nuovo recuperare larghezza, va nascosto solo
     dentro la barra (`.topbar .brand-name`), mai ovunque. */
  .brand.small .brand-name {
    display: inline !important;
  }
  .topbar {
    padding: 0 8px !important;
  }
  .auth-screen {
    padding: 16px 10px !important;
  }
  .auth-card {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
  }
  .quick-amts {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .quick-amts button.qa-custom {
    grid-column: span 2 !important;
  }
  .stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =============== SMARTPHONE: navigazione e misura dei comandi ===============
   Un solo posto decide quanto è grande un comando toccabile. 44px è la misura
   sotto la quale il dito sbaglia bersaglio: prima si andava dai 24px del tasto
   Esci ai 37px dei pulsanti di voto. E due file di schede (Scout, Challenge)
   dividevano lo spazio fra tutte le voci, così le ultime finivano oltre il
   bordo dello schermo senza alcun modo di raggiungerle.
   I contenuti restano quelli della versione web: cambia solo la mano con cui
   li si usa. */
@media (max-width: 640px) {
  :root { --tap: 44px; }

  /* --- la barra in alto è di due righe, e deve essere alta due righe ---
     Restava inchiodata a 52px mentre il suo contenuto ne occupava 93: la fila
     delle schede e il chip dell'account finivano FUORI dalla barra, stampati
     sopra il contenuto della pagina. Prima riga marchio + conto, seconda riga
     le schede che scorrono. */
  .topbar {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    padding: 7px 10px 8px !important;
  }
  /* A 375px marchio + lingua + saldo + nome + uscita non ci stanno: qualcosa
     deve cedere. Cede il selettore della lingua, che nella barra è un menu di
     sistema alto 32px — il posto peggiore per cambiarla su un telefono. La
     stessa scelta sta in Account → Lingua, con le sue schede da 44px. Senza di
     lui il nome utente torna leggibile invece di ridursi a zero. */
  .topbar .lang-pick { display: inline-flex; }
  .topbar .wallet, .topbar #logout-btn { flex: 0 0 auto; }
  .user-chip { padding: 3px 4px 3px 9px !important; min-width: 0; flex: 0 1 auto; }
  #hdr-username { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* --- file di schede: scorrono invece di uscire dallo schermo --- */
  .ap-tabs, .subtabs, #ch-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: auto;
    max-width: 100%;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .ap-tab, .subtab {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* --- misura minima di tutto ciò che si tocca --- */
  .tab, .subtab, .ap-tab, .view-switch-btn, .filter-dropdown-btn,
  .btn-primary, .btn-trade, .btn-danger-outline, .btn-execute, .btn-guest,
  .btn-sostieni-quick, .btn-contesta-quick, .btn-save-mini,
  .btn-close-xp, .btn-cancel-vote, .save-modal-toggle, .save-btn,
  .side-toggle button, .quick-amts button, .tf-btn,
  .ap-rsvp, .ap-post-vote, .ap-play, .ap-stream-btn, .ap-social,
  .scout-follow-btn, .social-btn, .mp-act, .lang-opt-btn,
  .ch-force-opt, .bk-expand, .role-opt, .lib-play, .lib-remove,
  .theme-card, .sub-card .btn-primary,
  select, .lang-pick {
    min-height: var(--tap);
  }
  /* i comandi quadrati vanno larghi quanto sono alti, o restano fusi da toccare */
  .accent-swatch, .ch-arrow, .drawer-close, .artist-close, .modal-close,
  .bracket-modal-close, .challenge-modal-close, .play-btn {
    width: var(--tap) !important;
    height: var(--tap) !important;
  }
  .reel-mobile-close { width: var(--tap) !important; height: var(--tap) !important; }
  /* il tasto Esci stava a 24px dentro la barra alta: il più piccolo dell'app */
  .user-chip button, #logout-btn { width: 40px !important; height: 40px !important; font-size: 15px !important; }
  /* Il tasto su telefono e' 40px: l'icona segue, altrimenti resterebbe un
     segno minuscolo in mezzo a un bersaglio grande. */
  .user-chip button svg, #logout-btn svg { width: 20px !important; height: 20px !important; }

  /* le schede della barra alta sono inline: senza questo l'altezza minima non
     le centra e il testo resta appiccicato al bordo di sopra */
  .tab, .view-switch-btn, .filter-dropdown-btn, .btn-trade, .btn-primary,
  .btn-close-xp, .btn-cancel-vote, .save-modal-toggle, .tf-btn,
  .btn-sostieni-quick, .btn-contesta-quick, .btn-save-mini, .qa-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .quick-amts button, .side-toggle button, .ap-rsvp, .ap-post-vote {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* La barra in basso è una riga sola: qui 44px per ogni comando la farebbero
     traboccare, quindi i secondari stanno a 40 — sempre ben oltre i 30/34 di
     prima — e il play, che è quello che si cerca al buio, resta il più grande. */
  .mp-btn { width: 42px !important; height: 42px !important; }
  .mp-close, .mp-btn-ghost, .mp-link { width: 40px !important; height: 40px !important; }

  /* Nomi di artista e brano dentro le Card sono collegamenti alti 17-19px:
     l'area sensibile cresce sopra e sotto senza spostare nulla, perché su un
     elemento in linea il riempimento verticale non allarga la riga. */
  .track-card-artist, .reel-artist-link {
    padding-block: 14px;
    margin-block: -14px;
  }
  /* icona sola: va larga quanto è alta, o resta una fessura da centrare */
  .btn-save-mini, .ap-play { min-width: var(--tap); }

  /* Il nome dell'artista nella scheda del brano porta una sottolineatura
     tratteggiata disegnata col bordo: allargando l'area sensibile il bordo
     scivolava via dal testo, quindi qui la sottolineatura la fa il testo. */
  .artist-link {
    border-bottom: none;
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    padding-block: 13px;
    margin-block: -13px;
  }

  /* Il titolo nella barra in basso è la zona che apre il player esteso:
     era alta 16px, cioè la sola riga di testo. */
  .mp-meta { min-height: 40px; display: flex; flex-direction: column; justify-content: center; }

  /* Le griglie dei duelli chiedono colonne da almeno 320px: su uno schermo
     largo esattamente 320 la scheda usciva dal bordo per via del riempimento
     della pagina. Su telefono è sempre una colonna sola. */
  .ch-duels-grid, .ch-clashes-grid { grid-template-columns: 1fr; }

  /* Il riquadro dei tempi del grafico: cinque comandi in fila, ognuno
     abbastanza largo da centrarlo senza guardare. */
  .chart-tf-btns { display: flex; gap: 6px; width: 100%; }
  .tf-btn { flex: 1 1 0; min-width: 0; }
  .chart-toolbar { flex-wrap: wrap; gap: 8px; }
  .chart-range-label { width: 100%; }
}

/* ==========================================================================
   SUPER MOBILE COMPACT DESIGN (Hype 2-Column Grid, Filter Menu, Small Nav)
   ========================================================================== */

/* Mobile Navigation Bar anchored to Bottom (SOLO PER MOBILE/SCHERMI STRETTI < 900px) */
@media (max-width: 900px) {
  header.topbar {
    padding: 0 12px !important;
    height: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    /* Senza questo la navigazione qui sotto, per quanto "fixed", si ancora
       alla barra invece che allo schermo: il vetro smerigliato crea un blocco
       contenitore. È il motivo per cui la barra di navigazione finiva sopra il
       marchio e i crediti invece di andare in fondo. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-2) !important;
  }
  /* base zero: il conto sta sempre sulla stessa riga del marchio e si
     restringe, invece di andare a capo e raddoppiare l'altezza della barra */
  header.topbar .brand { flex: 0 0 auto !important; }
  header.topbar .account { flex: 1 1 0 !important; min-width: 0 !important; justify-content: flex-end !important; overflow: hidden !important; }
  header.topbar .wallet, header.topbar #logout-btn { flex: 0 0 auto !important; }
  /* La lingua si cambia in Account, sezione Lingua, con le sue schede da 44px:
     nella barra era un menu di sistema alto 32px, il posto peggiore. */
  header.topbar .lang-pick { display: inline-flex !important; }
  header.topbar .user-chip { min-width: 0 !important; flex: 0 1 auto !important; }
  #hdr-username { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header.topbar .topbar-main {
    padding: 0 !important;
    height: 100% !important;
    border-bottom: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  header.topbar .brand {
    gap: 6px !important;
  }
  header.topbar .brand-mark {
    font-size: 16px !important;
  }
  header.topbar .brand-name {
    font-size: 15.5px !important;
  }

  /* Barra di navigazione principale posizionata SUL FONDO DELLO SCHERMO SOLO SU MOBILE */
  header.topbar > nav.tabs {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    /* sotto la scheda del brano (201) e sotto il player: con la scheda aperta
       la navigazione non deve galleggiarci sopra */
    z-index: 35 !important;
    width: 100vw !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 6px !important;
    background: rgba(12, 13, 18, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    overflow-x: auto !important;
  }
  nav.tabs .tab {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    min-width: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    background: transparent !important;
    color: var(--muted) !important;
    border: none !important;
  }
  /* I tab nascosti (es. Studio per chi non è Artista) devono rimanere sempre nascosti */
  .tab.hidden, nav.tabs .tab.hidden, #tab-studio.hidden {
    display: none !important;
  }

  /* Requisiti Rank Challenge: su schermo stretto una voce per riga.
     L'apertura e la chiusura valgono ovunque, non solo qui. */
  .challenge-ranks-info-card .cri-grid {
    padding: 0 12px 14px 12px;
    gap: 8px;
    grid-template-columns: 1fr;
  }
  .challenge-ranks-info-card.open .cri-grid {
    animation: fadeIn 0.2s ease;
  }
  button.cri-head {
    padding: 12px 14px;
    font-size: 12.5px;
  }
  nav.tabs .tab.active {
    color: var(--accent) !important;
    background: rgba(124, 92, 255, 0.14) !important;
  }
  nav.tabs .tab .ico {
    width: 18px !important;
    height: 18px !important;
  }
  nav.tabs .tab .tab-long { display: none !important; }
  nav.tabs .tab .tab-short { display: inline !important; }
  nav.tabs .tab span {
    font-size: 9px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Spazio inferiore per contenitore e miniplayer per non essere coperti dal bottombar */
  .content {
    padding-bottom: calc(115px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mini-player {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .account {
    margin-left: auto !important;
    gap: 4px !important;
  }
  .wallet {
    padding: 3px 6px !important;
    border-radius: 8px !important;
  }
  .wallet-label {
    font-size: 8.5px !important;
  }
  .wallet-value {
    font-size: 11.5px !important;
  }
  .user-chip {
    padding: 3px 6px !important;
    font-size: 10.5px !important;
    gap: 4px !important;
  }

  /* Filtri Bar & Menu tendina su Mobile */
  .filters-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  /* ricerca sopra, poi la scelta della vista, poi la freccia dei filtri */
  .filters-bar input[type="search"] {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
    padding: 0 14px !important;
    /* min-height e non height: da elemento di un contenitore in colonna
       l'altezza è la misura principale e viene riassorbita, e il campo
       restava alto quanto la sola riga di testo */
    min-height: 44px !important;
    border-radius: 11px !important;
    text-align: center !important;
  }
  .filters-bar .view-switch {
    order: 2 !important;
    display: flex !important;
    width: 100% !important;
    background: var(--bg) !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    gap: 4px !important;
  }
  .filters-bar .view-switch-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 40px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
  }
  .filters-bar .filters-toggle { order: 3 !important; width: 100% !important; }
  .filters-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }
  .filters-toggle.has-filters,
  .filters-toggle.open {
    border-color: var(--accent) !important;
    background: rgba(124, 92, 255, 0.15) !important;
    color: var(--accent) !important;
  }
  .filters-panel {
    display: none !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    background: var(--panel-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    margin-top: 6px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  }
  .filters-panel.open {
    display: grid !important;
    animation: filtersIn .18s cubic-bezier(.16,1,.3,1);
  }
  @keyframes filtersIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  /* col pannello chiuso, senza questo pallino uno crede che i brani mancanti
     non esistano invece che essere filtrati via */
  .filters-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--accent); color: var(--on-accent);
    font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
  }
  .filters-reset {
    display: block !important;
    grid-column: 1 / -1 !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid var(--line) !important;
    background: var(--bg-2) !important;
    color: var(--muted) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }
  .filters-reset.hidden { display: none !important; }
  .filters-panel select,
  .filters-panel .filter-dropdown,
  .filters-panel .filter-dropdown-btn {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .filters-panel select,
  .filters-panel .filter-dropdown-btn {
    padding: 11px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: var(--text) !important;
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 44px !important;
  }
  .filters-panel .filter-dropdown-btn .filter-dropdown-current {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
  }
  .filters-panel .filter-dropdown-btn .filter-dropdown-arrow {
    font-size: 11px !important;
    color: var(--muted) !important;
    margin-left: auto !important;
  }
}

/* Griglia Hype a Schede Compatte a 2 Colonne su Smartphone (< 900px) */
@media (max-width: 900px) {
  /* Drawer Dettaglio / Schermata Voti Hype a tutto schermo con Z-Index elevato */
  #drawer, .drawer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 201 !important;
    box-shadow: none !important;
  }
  .drawer-overlay {
    z-index: 200 !important;
  }
  #drawer .d-body {
    padding: 14px 14px calc(110px + env(safe-area-inset-bottom, 0px)) 14px !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 60px) !important;
  }
  .trade-panel {
    margin-bottom: 30px !important;
  }

  /* Altezza copertine e banner Scout & Studio con respiro su Mobile */
  .scout-cover-banner, .studio-banner, .ap-banner {
    height: 175px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .mkt-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .track-card {
    padding: 8px 7px !important;
    gap: 5px !important;
    border-radius: 12px !important;
    background: var(--panel) !important;
  }
  .track-card-top {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
  }
  .track-card-cover {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }
  .track-card-info {
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .track-card-title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .track-card-artist {
    font-size: 10.5px !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding-block: 12px !important;
    margin-block: -12px !important;
  }
  /* In 172px di scheda il badge dell'audio caricato prende una riga tutta sua
     e allunga la scheda rispetto a quelle accanto: è un dettaglio, e resta
     nella scheda del brano dove c'è spazio per leggerlo. */
  .track-card .audio-badge { display: none !important; }
  .track-card-meta {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    margin-top: 3px !important;
  }
  .track-card-meta .genre-pill,
  .track-card-meta .origin-badge,
  .track-card-meta .rank-badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    border-radius: 5px !important;
  }
  .track-card-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3px 6px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 5px 6px !important;
    border-radius: 8px !important;
    margin-top: 2px !important;
  }
  .card-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .card-stat-label {
    font-size: 8.5px !important;
    opacity: 0.75 !important;
    white-space: nowrap !important;
  }
  .card-stat-val {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  .track-card-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    margin-top: 3px !important;
  }
  .track-card-actions button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    min-height: 40px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  /* A 165px di scheda i nomi per esteso non entrano e il segnalibro finiva
     oltre il bordo: restano le frecce, le stesse che indicano su e giù in
     tutta l'app, col nome dell'azione nel titolo per il lettore di schermo. */
  .track-card-actions .btn-sostieni-quick,
  .track-card-actions .btn-contesta-quick { font-size: 0 !important; gap: 0 !important; }
  .track-card-actions .btn-sostieni-quick svg,
  .track-card-actions .btn-contesta-quick svg { width: 17px !important; height: 17px !important; }
  .track-card-actions .btn-save-mini { flex: 0 0 40px !important; min-width: 40px !important; }
  .track-card-actions .btn-save-mini svg { width: 16px !important; height: 16px !important; }

  /* Schede Challenge compatte a 2 colonne dove possibile.
     minmax(0,1fr) e non 1fr: con 1fr la colonna non scende sotto la larghezza
     minima del contenuto, e le schede uscivano dallo schermo — il bordo
     destro finiva a 692px su uno schermo largo 612, tagliato via dal
     ritaglio del corpo pagina. */
  .ch-duels-grid, .ch-clashes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .ch-duel-card {
    padding: 10px 8px !important;
    min-width: 0 !important;
  }
  .ch-duel-card * { min-width: 0; }
  .ch-create-card {
    min-height: 180px !important;
    padding: 14px 8px !important;
  }
  .ch-create-card-title {
    font-size: 14px !important;
  }
  .ch-create-card-sub {
    font-size: 10.5px !important;
  }

  /* Sondaggi in due colonne: la colonna e' stretta e il tasto del voto, a
     misura piena, spingeva titolo e prezzo su una riga tutta loro. Qui la
     riga sta insieme; sotto i 560px la griglia torna a una colonna e c'e'
     spazio in abbondanza. */
  .ch-poll-row { padding: 9px 10px !important; }
  .ch-poll-vote { padding: 7px 10px !important; font-size: 11.5px !important; }
  .ch-poll-avatar { width: 30px; height: 30px; flex-basis: 30px; }
  .ch-poll-title { font-size: 12.5px; }
  .ch-poll-sub { font-size: 11.5px; }
}

/* ===================== PANNELLO DEI FILTRI RICHIUDIBILE =====================
   Su schermo grande i due contenitori spariscono dall'impaginazione
   (display:contents): ricerca, selettore della vista e tendine tornano figli
   diretti di .market-tools e la fila e' identica a prima. Il tasto Filtri e
   l'azzeramento non esistono proprio. */
.filters-bar, .filters-panel { display: contents; }
.filters-toggle, .filters-reset { display: none; }

/* Le schede della navigazione portano due etichette: quella per esteso e
   quella corta della barra in basso. Su schermo grande si legge la prima. */
.tab .tab-short { display: none; }
/* icona e testo della scheda: allineati, l'icona non deve schiacciare il testo */
.tab { display: inline-flex; align-items: center; gap: 7px; }
.tab .ico { width: 17px; height: 17px; flex-shrink: 0; }

/* ---- Le sfide fra generi: sotto i 560px due colonne non ci stanno ---- */
@media (max-width: 560px) {
  .ch-duels-grid, .ch-clashes-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ch-duel-badge { justify-self: center; }
}

/* ---- Ritorno indietro dalla scheda del brano ----
   Su schermo grande la scheda è un pannello laterale e la ✕ in alto a destra
   basta. Su telefono copre tutto: serve una freccia dichiarata, a sinistra,
   dove su un telefono si cerca il ritorno. La ✕ lì finiva anche sotto il rombo
   del rank, quindi non si vedeva proprio. */
.drawer-back { display: none; }

@media (max-width: 900px) {
  .drawer-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    margin: 0 0 10px -6px;
    padding: 0 12px 0 8px;
    border-radius: 11px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    transition: .15s;
  }
  .drawer-back:active { background: var(--panel-2); }
  .drawer-back .ico { width: 18px; height: 18px; color: var(--accent-ink); }
  /* con la freccia in testata la ✕ è di troppo, e stava sotto il rombo */
  .drawer-close { display: none !important; }

  /* ---- Cards: schermo pieno davvero, e la navigazione resta raggiungibile --
     Il feed aveva un tetto di 480px pensato per il desktop: su uno schermo da
     600 la Card si fermava lì e il resto restava nero. E la vista copriva la
     barra di navigazione, che spariva solo in questa sezione. */
  #view-reel.view.reel-view {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
  }
  .reel-feed {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
  }
  .reel-card {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }
  /* la ✕ della vista Cards scende sopra la Card, non sopra la barra di sistema */
  .reel-mobile-close { top: 12px !important; right: 12px !important; }
}

/* ---- Profilo pubblico: si deve poter chiudere anche dopo aver scorso ----
   La ✕ era ancorata al contenuto della finestra: scorrendo il profilo usciva
   dallo schermo e non restava piu' nessun modo di uscire. */
.artist-back { display: none; }
.artist-back-ico {
  width: 18px; height: 18px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 6-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 6-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 900px) {
  /* La barra in alto sta a z-index 80 e copre la finestra del profilo: i due
     comandi vanno sopra di lei, e appena sotto il suo bordo. Fissi, non
     ancorati al contenuto, o scorrendo escono di nuovo dallo schermo. */
  .artist-close {
    position: fixed !important;
    top: calc(62px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    z-index: 85 !important;
  }
  .artist-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: fixed;
    top: calc(62px + env(safe-area-inset-top, 0px));
    left: 12px;
    z-index: 85;
    min-height: 40px;
    padding: 0 13px 0 10px;
    border-radius: 11px;
    background: rgba(10, 11, 15, .72);
    border: 1px solid var(--line);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
  }
  .artist-back:active { background: rgba(10, 11, 15, .92); }

  /* ---- Collegamenti social del profilo: pastiglie, non blocchi ----
     La misura minima da 44px pensata per i comandi li aveva gonfiati attorno a
     un testo da 11,5px: una scatola alta il doppio della sua scritta. Sono
     collegamenti in una riga di dettagli, non comandi principali. */
  .ap-social {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }
  .ap-socials { gap: 7px !important; margin-top: 8px !important; }

  /* ---- Schede del profilo e dello Scout: aria attorno all'etichetta ----
     La pastiglia accesa arrivava a filo del bordo del contenitore e il numero
     stava appiccicato al testo: da qui l'aria schiacciata. */
  .ap-tabs { padding: 5px !important; gap: 5px !important; }
  .ap-tab {
    padding: 0 14px !important;
    gap: 8px !important;
    font-size: 12.5px !important;
  }
  .ap-tab .ap-tab-n {
    margin-left: 0 !important;
    padding: 1px 7px !important;
    min-width: 20px !important;
  }
  .ap-tab .ico { flex-shrink: 0; }

  /* ---- Sfide fra generi: il comando non deve schiacciare il nome ----
     Con "Filtra Hip-Hop / Rap" scritto per esteso il pulsante prendeva 143px
     su una scheda da 284 e al genere ne restavano 23. Ora il pulsante dice
     solo "Filtra": il genere e' scritto lì accanto. */
  /* In una scheda larga meno di 400px il comando in fondo alla riga
     schiacciava titolo, artista e prezzo fino a "Cold B…" e mandava il numero
     a capo. Va sotto, a tutta larghezza: il brano si legge, il comando si
     tocca, e nessuno dei due ruba spazio all'altro. */
  .ch-duel-track-row {
    flex-wrap: wrap !important;
    row-gap: 9px !important;
    padding: 10px !important;
  }
  .ch-duel-track-row .ch-duel-info {
    flex: 1 1 0 !important; min-width: 0 !important;
  }
  .ch-duel-track-row .ch-duel-vote-btn {
    flex: 1 0 100% !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    justify-content: center !important;
  }
  /* Il duello e' gia' incolonnato e centrato: qui `flex: 1 0 100%` misurava
     l'altezza, non la larghezza, e il pulsante si allungava fino a coprire
     tutta la riga. Serve solo che resti largo quanto la scheda. */
  .ch-duel-track-btn { padding: 10px !important; }
  .ch-duel-track-btn .ch-duel-vote-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    justify-content: center !important;
  }
  .ch-duel-cover { width: 44px !important; height: 44px !important; font-size: 14px !important; }
  .ch-duel-meta { min-width: 0 !important; gap: 6px !important; }
  .ch-duel-meta .genre-pill {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ---- Selettore dei brani di una challenge ----
   Ricerca sopra, brani scelti sotto come pastiglie, poi l'elenco: la libreria
   quando la ricerca è vuota, i risultati quando si scrive. */
.ch-picker { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; }
.ch-picker-search {
  width: 100%; min-height: 42px; padding: 0 13px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text); font-size: 13.5px;
}
.ch-picker-search:focus { outline: none; border-color: var(--accent); }
.ch-picker-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-picker-chosen.hidden { display: none; }
.ch-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; max-width: 100%;
}
.ch-chip span { font-size: 11px; opacity: .8; }
.ch-chip:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.ch-picker-hint { font-size: 11.5px; }

/* ---- Badge verificato sul profilo pubblico (abbonamenti col badge) ---- */
.ap-verified {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  color: var(--gold-ink, #f0b90b);
  background: rgba(240, 185, 11, 0.12);
  border: 1px solid rgba(240, 185, 11, 0.45);
}

/* ---- Hype: il tasto per sfogliare il resto del catalogo ---- */
.mkt-more {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 18px 0 6px;
}
.mkt-more.hidden { display: none; }
.mkt-more #market-more-btn { min-width: 220px; min-height: 42px; font-weight: 700; }
.mkt-more-count { font-size: 12px; }
@media (max-width: 560px) {
  .mkt-more #market-more-btn { width: 100%; min-width: 0; }
}

/* ---- Sondaggi Artista: la scheda dice DI CHI e' la musica ----
   Un sondaggio e' su un artista solo, e senza faccia e nome in cima non si
   capiva su chi si stesse votando. La riga in alto e' cliccabile e porta al
   profilo. Tutto quello che puo' essere lungo (nome d'arte, titolo del brano)
   si accorcia con i puntini invece di sfondare la scheda, e il tasto del voto
   va a capo da solo quando la colonna si stringe: e' l'unico modo perche' la
   stessa scheda regga sia le due colonne del telefono sia la griglia larga. */
.ch-poll-card { justify-content: flex-start; gap: 8px; }
.ch-poll-artist {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px; margin: -6px -6px 0; border-radius: 12px;
  text-align: left; transition: background .15s ease;
}
.ch-poll-artist:hover { background: var(--panel-2); }
.ch-poll-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #fff; letter-spacing: .02em;
  background-size: cover; background-position: center;
}
.ch-poll-artist-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ch-poll-artist-name {
  font-size: 13.5px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-poll-artist-link { font-size: 11px; color: var(--muted); }
.ch-poll-artist:hover .ch-poll-artist-link { color: var(--accent); }
.ch-poll-title { font-size: 13.5px; font-weight: 800; color: var(--accent); }
.ch-poll-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.ch-poll-tracks { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.ch-poll-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.ch-poll-row-info { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-poll-row-title {
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-poll-row-meta {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-poll-vote {
  flex: 0 0 auto; margin-left: auto;
  padding: 7px 14px; font-size: 12px; border-radius: 9px; white-space: nowrap;
}

/* ---- pannello di creazione challenge ----
   Vale per tutti i modi: sondaggio, duello, sfida generi, torneo e televoto.
   Il conteggio si accende quando i brani scelti bastano, cosi' si sa che si
   puo' premere senza doverlo scoprire dall'errore. */
.ch-create-modal-desc { font-size: 12.5px; line-height: 1.45; margin-bottom: 14px; }
#ch-create-modal .ch-create { gap: 12px; }
#ch-create-modal .ch-create input[type=text] { min-width: 0; }
#ch-create-modal .ch-create > button[type=submit] { flex-basis: 100%; padding: 11px 16px; }
.ch-create-count { flex-basis: 100%; font-size: 12px; font-weight: 700; }
.ch-create-count.ok { color: var(--up, var(--accent)); }
.ch-live-start { align-self: flex-start; padding: 11px 18px; font-weight: 700; }
.ch-pick-title { font-weight: 600; color: var(--text); }
.ch-pick-artist { font-size: 11.5px; margin-left: auto; }
.ch-pick-empty { font-size: 12.5px; padding: 14px 6px; text-align: center; }

/* ---- File di schede: le voci si stringono per starci tutte ----
   "Account" restava tagliato oltre il bordo perché ogni voce teneva la sua
   larghezza naturale e la fila sforava. Ora si restringono fino al minimo
   leggibile, e solo sotto quello la fila comincia a scorrere. */
@media (max-width: 900px) {
  .ap-tab {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    gap: 6px !important;
  }
  .ap-tab > span:not(.ap-tab-n) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ap-tab .ap-tab-n { padding: 1px 6px !important; min-width: 18px !important; }

  .ch-pick-artist { display: none; }
  .ch-track-picker { grid-template-columns: 1fr !important; max-height: 210px; }
}

/* ---- File di schede su telefono: come la barra in basso ----
   In riga, icona e testo si contendevano gli stessi pixel e le etichette
   finivano in "Op…", "L…", "C…": illeggibili. Impilate — icona sopra, testo
   piccolo sotto — l'etichetta ha tutta la larghezza della voce per sé. */
@media (max-width: 900px) {
  .ap-tabs {
    padding: 6px !important;
    gap: 4px !important;
    align-items: stretch !important;
  }
  .ap-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    min-height: 56px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
  .ap-tab .ico { width: 20px !important; height: 20px !important; flex-shrink: 0; }
  .ap-tab > span:not(.ap-tab-n) {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* il contatore si stacca dall'etichetta: appoggiato all'icona, in alto */
  .ap-tab { position: relative; }
  .ap-tab .ap-tab-n {
    position: absolute;
    top: 3px;
    right: 6px;
    margin: 0 !important;
    padding: 0 5px !important;
    min-width: 16px !important;
    height: 16px;
    display: grid;
    place-items: center;
    font-size: 9.5px !important;
    line-height: 1;
  }
  /* stessa impaginazione per le sottoschede che portano un'icona */
  .subtabs .subtab {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px 6px !important;
    min-height: 56px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
  .subtabs .subtab .ico { width: 20px !important; height: 20px !important; }
  .subtabs .subtab span {
    display: block; width: 100%; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ---- Elenco dei fan di un artista ----
   Si apre DA DENTRO il profilo pubblico (z-index 70): a 60 finiva dietro di
   lui e sembrava che il comando non facesse niente. */
#fans-modal { z-index: 90; }
.bond-note { font-size: 12px; line-height: 1.55; margin-bottom: 12px; }
/* la scheda del pubblico è un comando: si apre l'elenco dei fan */
button.ap-aud { cursor: pointer; text-align: left; font: inherit; }
button.ap-aud:hover { border-color: var(--accent); }

/* ---- Con un solo elenco (i Critici non ci sono piu') il pulsante non deve
        occupare mezza intestazione come se fosse una coppia ---- */
.scout-follow-btns { flex-wrap: wrap; }
.scout-follow-btn { flex: 0 1 auto; }

/* ===================== SCHEDA BRANO NELLO STUDIO =====================
   Su telefono la riga si impilava: copertina, poi il titolo, poi ogni misura
   su una riga tutta sua, con un vuoto enorme in mezzo. Qui diventa una
   griglia di tre fasce — identita', numeri, bilancia — e ogni cosa sta al
   posto suo. I riquadri hanno un nome (st-m-voters, st-m-credits, st-m-pop)
   apposta: cosi' l'impaginazione non dipende dall'ordine del markup. */
@media (max-width: 900px) {
  .st-row {
    display: grid !important;
    grid-template-columns: 46px repeat(3, minmax(0, 1fr)) auto !important;
    gap: 12px 8px !important;
    align-items: center !important;
    padding: 12px !important;
    overflow-x: visible !important;
    flex-direction: unset !important;
  }
  .st-cover {
    grid-column: 1; grid-row: 1;
    width: 46px !important; height: 46px !important;
    border-radius: 11px !important;
  }
  .st-id {
    grid-column: 2 / 5; grid-row: 1;
    width: auto !important; min-width: 0 !important;
  }
  .st-del-track { grid-column: 5; grid-row: 1; justify-self: end; }

  /* seconda fascia: i quattro numeri in fila, non uno sotto l'altro */
  .st-m-price   { grid-column: 1 / 3; grid-row: 2; }
  .st-m-voters  { grid-column: 3;     grid-row: 2; }
  .st-m-credits { grid-column: 4;     grid-row: 2; }
  .st-m-pop     { grid-column: 5;     grid-row: 2; }
  .st-row .st-m { min-width: 0 !important; }
  .st-row .st-m b { font-size: 13px !important; }
  .st-row .st-m-price b { font-size: 15px !important; }
  .st-row .st-m span {
    font-size: 8.5px !important;
    letter-spacing: .02em !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* terza fascia: la bilancia sostieni/contesta, larga quanto la scheda */
  .st-m-bal {
    grid-column: 1 / 6; grid-row: 3;
    width: auto !important; min-width: 0 !important; margin: 0 !important;
  }
  .st-bal-pills { justify-content: space-between; }

  /* il cestino era un quadratino da toccare al volo per sbaglio */
  .st-del-track {
    width: 40px !important; height: 40px !important;
    display: grid !important; place-items: center !important;
  }
}

/* Sotto i 420px tre colonne di numeri diventano illeggibili: due file da due. */
@media (max-width: 420px) {
  .st-row { grid-template-columns: 46px repeat(2, minmax(0, 1fr)) auto !important; }
  .st-id        { grid-column: 2 / 4; }
  .st-del-track { grid-column: 4; }
  .st-m-price   { grid-column: 1 / 3; grid-row: 2; }
  .st-m-voters  { grid-column: 3 / 5; grid-row: 2; }
  .st-m-credits { grid-column: 1 / 3; grid-row: 3; }
  .st-m-pop     { grid-column: 3 / 5; grid-row: 3; }
  .st-m-bal     { grid-column: 1 / 5; grid-row: 4; }
}

/* ===================== FEED ACTIONS =====================
   Stessa sezione delle Cards, altro modo di scorrere: le Card raccontano un
   brano, le Action chiedono una decisione. Il selettore sta in alto al centro,
   piccolo, perché non deve rubare la scena al contenuto. */
.feed-switch {
  position: absolute;
  top: 12px; left: 50%;
  max-width: calc(100% - 120px);   /* lascia il posto alla ✕ a destra */
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(10, 11, 15, .72);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.feed-switch-btn {
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  transition: .15s;
}
.feed-switch-btn.active { background: var(--accent); color: var(--on-accent); }
.feed-switch-btn:not(.active):hover { color: var(--text); }

/* Niente aggancio allo scorrimento: le Card occupano tutto lo schermo e uno
   scatto per volta ha senso, le Action sono alte quanto serve e spesso ce ne
   stanno due per schermata. Con l'aggancio obbligatorio la prima scheda si
   incollava al bordo, sotto il selettore. */
#actions-feed {
  padding: 64px 14px 24px;
  overflow-y: auto;
  scroll-snap-type: none !important;
}
#actions-feed.hidden { display: none; }

/* Ogni Action è una scheda a pieno schermo, come una Card: si scorre con lo
   stesso gesto e si decide senza uscire dal feed. */
.act-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  margin: 0 auto 14px;
  max-width: 520px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.act-card.risk { border-color: color-mix(in srgb, var(--down) 55%, transparent); }
.act-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.act-kind {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-ink);
}
.act-kind .ico, .act-kind svg { width: 15px; height: 15px; }
.act-kind.risk { color: var(--down); }
.act-kind.release { color: var(--up); }
.act-round {
  font-size: 11px; font-weight: 800; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.act-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.act-sub { font-size: 12.5px; line-height: 1.5; }
.act-code {
  font-size: 12.5px; padding: 8px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px dashed var(--line);
}
.act-code b { font-family: ui-monospace, monospace; letter-spacing: .08em; color: var(--accent-ink); }
.act-cost { font-size: 11.5px; }
.act-cta { min-height: 44px; }

.act-tracks { display: flex; flex-direction: column; gap: 7px; }
.act-track {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.act-cover {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff;
}
.act-track-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.act-track-title {
  font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-track-sub {
  font-size: 11.5px; display: flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-track-votes {
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  flex-shrink: 0; color: var(--muted);
}
.act-arrows { display: flex; gap: 5px; flex-shrink: 0; }

@media (max-width: 900px) {
  /* con !important: una regola piu' vecchia azzera il riempimento di
     .reel-feed, e la prima scheda finiva sotto il selettore e sotto la ✕ */
  #actions-feed { padding: 64px 12px calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
  .act-card { padding: 15px; border-radius: 16px; }
  .act-title { font-size: 16px; }
  .act-arrows .ch-arrow { width: 40px !important; height: 40px !important; }
}

/* ---- Schede senza icona: restano pastiglie, non colonne ----
   L'impaginazione a colonna (icona sopra, testo sotto) serve dove c'e'
   un'icona. Su "Brani sostenuti / Cronologia voti", che icona non hanno,
   produceva una pastiglia alta 56px con dentro una riga sola di testo. */
@media (max-width: 900px) {
  .subtabs .subtab:not(:has(.ico)),
  .ap-tabs .ap-tab:not(:has(.ico)) {
    flex-direction: row !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
  }
  .subtabs .subtab:not(:has(.ico)) span,
  .ap-tabs .ap-tab:not(:has(.ico)) span { display: inline !important; }

  /* ---- Tabelle dell'Attività: niente barra di scorrimento ----
     Erano larghe una decina di pixel piu' del contenitore, quel tanto che
     basta a far comparire la barra. Sparisce la colonna dell'indice al
     momento del voto: la stessa informazione e' nella variazione accanto,
     espressa in percentuale, che e' anche il modo in cui la si legge.
     Si nasconde per posizione — intestazione e celle insieme — perche'
     nascondere solo l'intestazione disallineerebbe tutta la tabella. */
  #subview-positions .mkt-table th:nth-child(4),
  .mkt-table:has(td[data-lab]) td:nth-child(4),
  #subview-orders .mkt-table th:nth-child(5),
  #subview-orders .mkt-table td:nth-child(5) { display: none; }
  .table-wrap { overflow-x: auto; }
  .mkt-table { min-width: 0 !important; }
}

/* ---- Fila delle sottoschede Challenge: distribuita, non ammassata ----
   Le quattro voci si stringevano a sinistra lasciando un terzo della barra
   vuoto, e ognuna con la sua larghezza: una fila sfrangiata. Ora si dividono
   lo spazio in parti uguali, e la pastiglia accesa ha lo stesso raggio del
   contenitore invece di sembrarci incastrata dentro. */
#ch-subtabs {
  width: 100%;
  border-radius: 14px;
  padding: 5px;
  gap: 5px;
}
#ch-subtabs .subtab {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  border-radius: 10px;
}
#ch-subtabs .subtab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Sotto i 560px la tabella delle posizioni diventa schede ----
   Cinque colonne in 350px non ci stanno: restava una barra di scorrimento
   orizzontale e metà dei dati fuori vista. Ogni riga diventa una scheda —
   brano in alto, i numeri sotto con la loro etichetta, i comandi in fondo.
   Il nome della colonna viaggia in `data-lab`, così ogni numero resta
   leggibile anche senza intestazione sopra. */
@media (max-width: 560px) {
  .table-wrap:has(td[data-lab]) { overflow-x: visible; }
  .mkt-table:has(td[data-lab]),
  .mkt-table:has(td[data-lab]) tbody,
  .mkt-table:has(td[data-lab]) tr,
  .mkt-table:has(td[data-lab]) td { display: block; width: auto; }
  .mkt-table:has(td[data-lab]) thead { display: none; }
  .mkt-table:has(td[data-lab]) tr {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
  }
  .mkt-table:has(td[data-lab]) td { border: none !important; padding: 0 !important; }
  /* prima cella: il brano, a tutta larghezza */
  .mkt-table:has(td[data-lab]) td:first-child { margin-bottom: 10px; }
  /* le celle coi numeri: etichetta a sinistra, valore a destra */
  .mkt-table:has(td[data-lab]) td[data-lab] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 6px 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    text-align: right;
  }
  .mkt-table:has(td[data-lab]) td[data-lab]::before {
    content: attr(data-lab);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted-2); text-align: left;
  }
  .mkt-table:has(td[data-lab]) td:last-child { margin-top: 10px; }
  .mkt-table:has(td[data-lab]) .xp-actions { display: flex; gap: 8px; }
  .mkt-table:has(td[data-lab]) .xp-actions > * { flex: 1 1 0; min-height: 44px; }
}

/* ---- Copertine più grandi su telefono ----
   Erano 175px: su uno schermo alto 800 significa vederne una striscia. */
@media (max-width: 900px) {
  .scout-cover-banner, .studio-banner, .ap-banner {
    height: 215px !important;
  }
  /* la biografia non c'è più su molti profili: senza, il nome respira */
  .ap-bio { margin-top: 12px; }
  .profile-since { font-size: 12px; margin-top: 4px; }
}

/* ---- Tabellone del torneo a schermo pieno: leggibile, non un mosaico ----
   Le sette colonne dell'albero, strette in un telefono, diventavano quadratini
   con dentro solo bandiera e numero, sparsi ad altezze diverse. Qui l'albero
   si distende: un turno per fascia, gli scontri affiancati due a due. */
@media (max-width: 760px) {
  .bracket-big .bracket {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  .bracket-big .bk-col {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
  .bracket-big .bk-col > .bk-slot { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .bracket-big .bk-col.center { justify-content: center !important; }
  .bracket-big .bk-col.center > .bk-slot { flex: 1 1 100%; }
  .bracket-big .bk-slot { min-height: 52px; padding: 8px 10px; }
  .bracket-big .bk-meta b { font-size: 12.5px; white-space: nowrap; }
  .bracket-big .bk-flag { width: 20px; } .bracket-big .bk-flag svg { width: 20px; height: 14px; }
  .bracket-big .bk-trophy { width: 54px; height: 54px; }
  .bracket-big .bk-trophy svg { width: 28px; height: 28px; }
  .bracket-big .bk-votes { font-size: 13px; }
}

/* Il distintivo di ruolo porta un'icona disegnata, non un'emoji: su Windows
   diverse emoji non si compongono e mostrano il codice testuale. */
.role-badge { display: inline-flex; align-items: center; gap: 5px; }
.role-badge .ico { width: 14px; height: 14px; flex-shrink: 0; }

/* Il nome nella barra in alto si riduceva a una lettera: sotto una certa
   soglia e' meglio non mostrarlo affatto che mostrarne un carattere. */
@media (max-width: 900px) {
  #hdr-username { min-width: 52px; }
}
@media (max-width: 400px) {
  #hdr-username { display: none; }
}

/* ---- Testata Scout e Studio su telefono: niente si accavalla ----
   Il tasto della copertina stava in fondo al banner, proprio dove la scheda
   del profilo lo risale; il rombo del rank finiva sopra il pulsante degli
   artisti seguiti; e "città non impostata" si spezzava su due righe contro
   il rombo. Qui ognuno ha la sua fascia. */
@media (max-width: 900px) {
  /* il comando della copertina sale in alto, dove il banner è libero */
  .studio-banner-btn, .ap-banner-upload {
    top: 12px !important;
    bottom: auto !important;
    right: 12px !important;
  }

  .studio-header.on-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: -30px !important;
  }
  .studio-header .studio-avatar-wrap { align-self: flex-start; }
  .studio-head-main { width: 100%; min-width: 0; }
  .studio-name-row { flex-wrap: wrap; gap: 8px; align-items: center; }
  .studio-name { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* il rombo sta accanto al nome, non appoggiato sopra a quel che viene dopo */
  .studio-name-row .rank-cell { flex-shrink: 0; }
  .studio-head-main > .muted { font-size: 12.5px; line-height: 1.45; }

  /* i pulsanti degli artisti seguiti scendono sotto, a tutta larghezza */
  .scout-follow-btns { width: 100%; margin-top: 2px; }
  .scout-follow-btn { flex: 1 1 auto; justify-content: center; }

  /* ---- Statistiche a due per riga ----
     Una per riga faceva scorrere mezza schermata per leggere quattro numeri.
     #view-portfolio era rimasto fuori dall'elenco: la schermata "La mia
     attivita'" continuava a impilare i quattro riquadri a tutta larghezza,
     uno sotto l'altro, e si leggeva come una tabella invece che come schede. */
  #view-portfolio .stat-grid,
  #view-scout .stat-grid,
  #view-studio .stat-grid,
  .scout-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .stat-card { padding: 12px !important; min-width: 0; }
  .stat-label { font-size: 10px !important; letter-spacing: .02em !important; }
  .stat-big { font-size: 19px !important; }
}

/* ================= ETICHETTE DI GENERE (Card) =================
   Le etichette non si scrivono piu' a mano: si accendono. Cosi' ogni Card
   resta legata a un genere vero, che e' quello che i Genre Clashes premiano. */
.genre-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.genre-chip {
  background: var(--bg-2); color: var(--muted);
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.genre-chip:hover { border-color: var(--accent); color: var(--text); }
.genre-chip.on {
  background: var(--accent); border-color: var(--accent);
  color: #06110c;
}
.genre-chips-hint { flex-basis: 100%; font-size: 11px; margin-top: 2px; }

/* ================= ORA D'ORO ================= */
/* Resta appesa in cima al feed mentre si scorre: come prima riga scorrevole
   spariva dopo mezzo secondo, e l'unica spiegazione dell'ordine delle Card se
   ne andava con lei. Fuori dallo scatto dello scroll-snap, altrimenti il feed
   si "aggancerebbe" alla striscia invece che alla prima Card. */
.golden-banner {
  /* sotto il selettore Card/Action, che galleggia in cima al feed */
  position: sticky; top: 54px; z-index: 6; scroll-snap-align: none;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 10px 10px; padding: 9px 13px; border-radius: 12px;
  font-size: 12.5px; font-weight: 700;
  background: linear-gradient(90deg, rgba(255,196,60,.22), rgba(40,32,10,.86));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,196,60,.45);
  color: var(--text);
}
.golden-left { font-variant-numeric: tabular-nums; opacity: .8; font-weight: 800; }
.reel-golden {
  display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  background: rgba(255,196,60,.2); border: 1px solid rgba(255,196,60,.45);
}

/* ================= GENRE CLASHES ================= */
.ch-clash-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 2px;
}
.ch-clash-title { font-weight: 800; font-size: 14.5px; color: var(--accent); line-height: 1.5; }
/* Il titolo puo' andare a capo FRA i due generi, mai attorno al "VS":
   spezzato li' sembrava una lista di tre cose invece di una sfida. */
.ch-clash-title .nowrap { white-space: nowrap; }
.ch-clash-timer {
  font-size: 11.5px; font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ch-clash-timer.oro { color: #ffc43c; }
.ch-clash-timer .scaduto { opacity: .6; }
.ch-clash-sub { font-size: 12px; margin-bottom: 9px; line-height: 1.4; }
.ch-clash-tag { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: -3px; }
.ch-clash-bar {
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--panel-2); overflow: hidden;
}
.ch-clash-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent); transition: width .25s ease;
}
.ch-clash-num { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ch-clash-cards { font-size: 11px; margin-top: -4px; }
.ch-clash-esito { font-size: 12px; font-weight: 800; min-height: 38px; display: grid; place-items: center; }
.ch-clash-side.mio { border-color: var(--accent); }
.ch-clash-side.vinto { border-color: #ffc43c; background: rgba(255,196,60,.08); }
.ch-clash-btn.mio { background: var(--bg-2) !important; color: var(--accent) !important; border: 1px solid var(--accent) !important; }
.ch-duel-card.chiusa { opacity: .82; }
.clash-recent-title { grid-column: 1 / -1; font-size: 12px; font-weight: 800; margin: 6px 2px 0; }

.clash-create-form { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
/* .hidden sta piu' in alto nel foglio: senza questa riga il display:flex
   qui sopra vincerebbe e il modulo resterebbe sempre aperto. */
.clash-create-form.hidden { display: none; }
.clash-create-form > label { font-size: 12px; font-weight: 700; color: var(--muted); }
.clash-create-row { display: flex; align-items: center; gap: 8px; }
.clash-create-row select {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft);
  font-size: 12.5px;
}

/* ============ CAMPANELLO E MESSAGGI (barra in alto) ============ */
.hdr-icon-btn {
  position: relative; width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 10px; color: var(--muted);
  transition: color .12s, border-color .12s;
}
.hdr-icon-btn:hover { color: var(--text); border-color: var(--accent); }
.hdr-icon-btn svg { width: 18px; height: 18px; }
/* Il pallino prende l'ACCENTO scelto dall'utente, non un rosso fisso: il
   rosso era l'unico colore dell'interfaccia che non cambiava mai, e stonava
   con ogni accento diverso dal viola. Il testo sopra usa --accent-ink-on,
   definito insieme all'accento, cosi' resta leggibile su chiaro e su scuro. */
.hdr-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--panel);
}

/* ============ PANNELLI LATERALI (notifiche, messaggi) ============ */
.panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 78; }
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(390px, 100vw);
  z-index: 80; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px rgba(0,0,0,.42);
}
.side-panel.hidden { display: none; }
.side-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--line-soft);
}
.side-panel-head > b { flex: 1; min-width: 0; font-size: 14.5px; }
.side-panel-actions { display: flex; gap: 5px; align-items: center; }
.btn-ghost.sm { padding: 5px 9px; font-size: 11.5px; }
.side-panel-body { flex: 1; overflow-y: auto; padding: 8px; }
.side-empty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 12.5px; }

.notif-row, .dm-row {
  width: 100%; display: flex; align-items: flex-start; gap: 10px;
  padding: 11px; border-radius: 11px; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--text);
}
.notif-row:hover, .dm-row:hover { background: var(--bg-2); }
.notif-row.unread, .dm-row.unread { background: rgba(124,92,255,.09); border-color: rgba(124,92,255,.25); }
.notif-ico { font-size: 17px; line-height: 1.2; flex: 0 0 auto; }
.notif-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-title { font-size: 13px; font-weight: 700; line-height: 1.35; }
.notif-body, .notif-when { font-size: 11.5px; color: var(--muted); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; margin-top: 5px; }

/* ============ MESSAGGI ============ */
.dm-avatar, .lp-avatar, .seg-ini {
  display: grid; place-items: center; font-weight: 800; color: #06110c;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.dm-avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; flex: 0 0 auto; }
.dm-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-nome { font-size: 13px; font-weight: 700; }
.dm-ultimo { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 800;
  line-height: 18px; text-align: center; flex: 0 0 auto;
}
.dm-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin: 8px 4px; }
.dm-msg.mine { align-items: flex-end; }
/* Le due nuvolette sono lo STESSO accento a due intensita': quella di chi
   scrive e' piena, quella di chi riceve e' la stessa tinta molto diluita sul
   fondo. Si distingue chi parla senza dover leggere, e il colore resta quello
   scelto dall'utente invece di essere un grigio uguale per tutti.
   `--accent-rgb` viene impostato insieme all'accento (vedi applyAccent). */
.dm-bolla {
  max-width: 78%; padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--text);
  font-size: 13px; line-height: 1.45; overflow-wrap: anywhere;
}
.dm-msg.mine .dm-bolla {
  border-radius: 14px 14px 4px 14px;
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
/* Sole emoji: si mostrano grandi e senza nuvoletta */
.dm-bolla.grande {
  background: none; border: 0; padding: 2px 4px; font-size: 34px; line-height: 1.15;
}
.dm-msg.mine .dm-bolla.grande { background: none; border: 0; color: var(--text); }
.dm-ora { font-size: 10.5px; color: var(--muted); }
.dm-attach {
  display: flex; align-items: center; gap: 9px; max-width: 78%; cursor: pointer;
  padding: 7px 10px; border-radius: 12px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--text);
}
.dm-attach img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.dm-attach-ico { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-2); }
.dm-attach-testo { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.msg-form { display: flex; gap: 7px; padding: 10px; border-top: 1px solid var(--line-soft); }
.msg-form.hidden { display: none; }
.msg-form input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--text); font-size: 13px;
}

/* ============ PROFILO PUBBLICO DELL'ASCOLTATORE ============ */
.lp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lp-avatar { width: 66px; height: 66px; border-radius: 50%; font-size: 27px; flex: 0 0 auto; }
.lp-id { flex: 1; min-width: 160px; }
.lp-id h1 { margin: 0 0 3px; font-size: 22px; }
.lp-id .muted { font-size: 12.5px; }
.lp-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-azioni .seguo { background: var(--bg-2) !important; color: var(--accent) !important; border: 1px solid var(--accent) !important; }
.lp-sez { margin-bottom: 20px; }
.lp-sez h3 { font-size: 14px; margin: 0 0 9px; }
.seg-lista { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.seg-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 11px 5px 5px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--text);
}
.seg-chip:hover { border-color: var(--accent); }
.seg-chip img, .seg-ini { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; font-size: 11px; flex: 0 0 auto; }
.lp-tracks { display: flex; flex-direction: column; gap: 7px; }
.lp-track {
  display: flex; align-items: center; gap: 11px; cursor: pointer; text-align: left;
  padding: 8px 11px; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--text);
}
.lp-track:hover { border-color: var(--accent); }
.lp-track img, .lp-track-ico { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.lp-track-ico { display: grid; place-items: center; background: var(--panel-2); }
.lp-track-testo { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }

/* Chi ha rilanciato una Card, dentro il feed: e' un pulsante, porta al profilo */
.reel-repost-by {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  margin-bottom: 5px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--text);
  background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.2);
}
.reel-repost-by svg { width: 13px; height: 13px; }

@media (max-width: 700px) {
  .side-panel { width: 100vw; }
  .hdr-icon-btn { width: 30px; height: 30px; }
}

/* ---- Richieste di messaggio e blocco ---- */
.dm-sez { padding: 9px 11px 4px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dm-row.richiesta { border-color: rgba(255,196,60,.4); background: rgba(255,196,60,.07); }
.dm-tag {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-soft);
}
/* Testo sopra, comandi sotto: nel pannello stretto la riga unica spezzava i
   pulsanti uno per riga e sembrava rotta. */
.dm-barra {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  margin: 6px 4px 12px; padding: 11px 13px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.45;
  background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--muted);
}
.dm-barra.richiesta { border-color: rgba(255,196,60,.45); background: rgba(255,196,60,.09); color: var(--text); }
.dm-barra.bloccata { border-color: rgba(255,59,107,.4); background: rgba(255,59,107,.08); }
.dm-barra.sottile { justify-content: center; background: transparent; border: 0; margin-top: 14px; }
.dm-barra-azioni { display: flex; gap: 7px; justify-content: flex-end; }
.dm-barra-azioni > * { flex: 1 1 0; white-space: nowrap; }
.dm-barra-azioni .btn-primary.sm, .dm-barra-azioni .btn-danger-outline.sm, .dm-barra-azioni .btn-ghost.sm {
  padding: 6px 13px; font-size: 12px;
}

/* ============ EMOJI, STICKER E ALLEGATI IN CHAT ============ */
.dm-tool {
  width: 32px; height: 32px; flex: 0 0 auto; cursor: pointer;
  display: grid; place-items: center; font-size: 16px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 9px; color: var(--text);
}
.dm-tool:hover { border-color: var(--accent); }
.dm-tool.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.dm-tray {
  max-height: 40vh; overflow-y: auto; padding: 10px;
  border-top: 1px solid var(--line-soft); background: var(--bg-2);
}
.dm-tray-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.dm-tray-vuoto { font-size: 12px; margin: 8px 2px; }
.dm-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; }
.dm-emoji {
  height: 36px; font-size: 20px; cursor: pointer; border-radius: 8px;
  background: transparent; border: 0; color: inherit;
}
.dm-emoji:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.dm-pack { margin-bottom: 12px; }
.dm-pack-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .03em;
}
.dm-pack-azioni { display: flex; gap: 4px; align-items: center; }
.dm-pack-add, .dm-pack-del {
  width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer;
  border-radius: 7px; font-size: 13px; background: var(--panel-2);
  border: 1px solid var(--line-soft); color: var(--muted);
}
.dm-pack-add:hover { color: var(--accent); border-color: var(--accent); }
.dm-pack-del:hover { color: #f6465d; border-color: #f6465d; }

.dm-sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.dm-sticker-btn {
  position: relative; aspect-ratio: 1; padding: 4px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px;
}
.dm-sticker-btn:hover { border-color: var(--accent); }
.dm-sticker-btn img { width: 100%; height: 100%; object-fit: contain; }
.dm-sticker-del {
  position: absolute; top: -5px; right: -5px; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 50%; font-size: 10px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.dm-sticker-del:hover { color: #f6465d; border-color: #f6465d; }

.dm-track-grid { display: flex; flex-direction: column; gap: 5px; }
.dm-track-btn {
  display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer;
  padding: 6px 9px; border-radius: 10px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-soft);
}
.dm-track-btn:hover { border-color: var(--accent); }
.dm-track-btn img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; }

/* Lo sticker dentro la conversazione: nessuna nuvoletta attorno */
.dm-sticker-wrap { position: relative; display: inline-block; }
.dm-sticker { max-width: 156px; max-height: 156px; border-radius: 12px; display: block; }
.dm-sticker-save {
  position: absolute; bottom: 5px; right: 5px; width: 24px; height: 24px;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%;
  font-size: 14px; font-weight: 800;
  background: var(--accent); color: var(--on-accent); border: 0;
  opacity: 0; transition: opacity .12s;
}
.dm-sticker-wrap:hover .dm-sticker-save { opacity: 1; }
@media (hover: none) { .dm-sticker-save { opacity: .92; } }

/* ---- Ricerca fra le conversazioni ---- */
.dm-search { padding: 6px 6px 9px; }
.dm-search input {
  width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  color: var(--text); font-size: 12.5px;
}
.dm-search input:focus { outline: none; border-color: var(--accent); }

/* ================== BARRA IN ALTO SU SCHERMI STRETTI ==================
   Con campanello e messaggi le voci sono diventate sette, e su telefono si
   toccavano. Gli spazi si stringono e i due tasti nuovi perdono la cornice:
   restano icone, che e' quello che sono — la cornice serviva a distinguerli
   quando erano gli unici pulsanti li' in mezzo. */
@media (max-width: 820px) {
  .account { gap: 10px; }
  .hdr-icon-btn {
    width: 30px; height: 30px;
    background: transparent; border-color: transparent;
  }
  .hdr-icon-btn:hover { background: var(--bg-2); }
  .hdr-badge { box-shadow: 0 0 0 2px var(--topbar-bg); }
}

@media (max-width: 560px) {
  .account { gap: 6px; min-width: 0; }
  .hdr-icon-btn { width: 28px; height: 28px; }
  .hdr-icon-btn svg { width: 17px; height: 17px; }
  .hdr-badge { min-width: 15px; height: 15px; line-height: 15px; font-size: 9px; top: -3px; right: -3px; }
  /* Il nome lungo mangiava lo spazio di tutto il resto: si accorcia con i
     puntini invece di spingere fuori le icone. */
  #hdr-username { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-chip { gap: 6px; padding: 4px 5px 4px 8px; min-width: 0; }
  .wallet-value { font-size: 13px; }
  /* La pastiglia del ruolo doveva gia' sparire sotto i 480px, ma una regola
     piu' in basso nel foglio la riaccendeva: qui vince, ed e' anche l'ultima
     informazione di cui serve una copia in barra — il ruolo si legge in
     Account. */
  .role-badge { display: none; }
  /* La lingua resta, ma come sola bandiera: la sigla accanto ripeteva quello
     che la bandiera gia' dice. */
  .lang-pick { padding: 5px 7px; gap: 0; }
  .lang-pick-code, .lang-pick-caret { display: none; }
}

/* Sotto i 430px non ci sta piu' tutto senza schiacciare qualcosa. Sparisce il
   nome utente: e' l'unica voce della barra che dice a una persona una cosa che
   gia' sa. Il tasto per uscire e il segno DEMO restano. */
@media (max-width: 430px) {
  #hdr-username { display: none; }
  .user-chip { padding: 4px 4px; }
}

/* Avviso sotto gli abbonamenti: sobrio, non allarmistico, ma non ignorabile. */
.pay-warning {
  margin: 12px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--muted);
  padding: 9px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.pay-warning b { color: var(--text); }

/* ---- Link pubblico e distintivo, nello Studio ---- */
.pub-share { display: flex; flex-direction: column; gap: 8px; }
.pub-share > label { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.pub-row { display: flex; gap: 7px; }
.pub-row input {
  flex: 1; min-width: 0; padding: 8px 11px; border-radius: 9px; font-size: 12px;
  background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.pub-badge { display: block; max-width: 300px; width: 100%; margin: 2px 0; }

/* ============ LE MIE INTUIZIONI ============
   Un elenco di frasi, non una tabella di posizioni: si legge cosa hai capito
   prima degli altri, non quanto varrebbe adesso. */
.pf-insights { margin: 22px 0 6px; }
.pf-ins-h { font-size: 17px; margin: 0 0 3px; }
.pf-ins-sub { font-size: 12.5px; margin: 0 0 14px; }
.pf-ins-none { font-size: 12.5px; }
.ins {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  text-align: left; padding: 13px 15px; margin-bottom: 8px; border-radius: 13px;
  background: var(--panel); border: 1px solid var(--line-soft); color: var(--text);
}
.ins:hover { border-color: var(--accent); }
.ins-mark { font-size: 16px; line-height: 1.3; flex: 0 0 auto; color: var(--muted); }
.ins.ok .ins-mark { color: var(--accent); }
.ins-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ins-title { font-size: 14px; font-weight: 700; }
.ins-story { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ins-dopo {
  align-self: flex-start; margin-top: 3px; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.ins-xp { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--up); }

/* Il dettaglio completo resta, ma chiuso: chi lo vuole lo apre. */
.pf-details { margin-top: 18px; }
.pf-details.hidden { display: none; }
.pf-details > summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted);
  padding: 10px 0; list-style: none;
}
.pf-details > summary::-webkit-details-marker { display: none; }
.pf-details > summary::before { content: "▸ "; }
.pf-details[open] > summary::before { content: "▾ "; }
.pf-details > summary:hover { color: var(--text); }

/* ============ NUOVE ILLUSTRAZIONI DELLA GUIDA ============ */
.tut-tabs { display: flex; gap: 8px; }
.tut-tab {
  flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: center;
  padding: 11px 8px; border-radius: 11px; font-size: 11.5px; line-height: 1.35;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.tut-tab b { font-size: 13px; }
.tut-tab.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }

.tut-zoom-list { display: flex; flex-direction: column; gap: 7px; }
.tut-zoom {
  display: flex; align-items: center; gap: 13px;
  padding: 9px 12px; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.tut-zoom-ico {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--panel-2); color: var(--text);
}
.tut-zoom-ico svg { width: 21px; height: 21px; }
.tut-zoom-ico.up { color: var(--up); }
.tut-zoom-ico.down { color: var(--down); }
.tut-zoom-txt { display: flex; flex-direction: column; font-size: 12px; line-height: 1.4; }
.tut-zoom-txt b { font-size: 13px; }

.tut-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.tut-clash { display: flex; align-items: center; gap: 10px; margin: 10px 0 7px; }
.tut-clash-lato { flex: 1; display: flex; flex-direction: column; text-align: center; font-size: 12px; }
.tut-clash-lato b { font-size: 14px; }
.tut-clash-vs {
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted);
}
.tut-clash-bar { height: 7px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.tut-clash-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.tut-clash-oro {
  margin-top: 11px; padding: 8px 11px; border-radius: 10px; font-size: 11.5px; line-height: 1.45;
  background: rgba(255,196,60,.12); border: 1px solid rgba(255,196,60,.35);
}

.tut-url { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--accent); }
.tut-ok { font-size: 11px; color: var(--up); }
.tut-badge {
  display: flex; align-items: center; gap: 10px; margin: 11px 0;
  padding: 11px 14px; border-radius: 11px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
}
.tut-badge-brand { font-size: 11px; font-weight: 800; color: var(--accent); }
.tut-badge-name { flex: 1; font-size: 13px; font-weight: 700; }
.tut-badge-val { font-size: 16px; font-weight: 800; color: var(--up); }

/* ============ Dati dell'account, link legali, segnalazione ============ */

/* Il pulsante che cancella l'account non e' un pulsante come gli altri: si
   distingue a colpo d'occhio dal "Scarica" che gli sta sopra, altrimenti la
   riga sbagliata si preme per abitudine. Colore dal tema, mai fisso. */
.btn-danger{
  flex:0 0 auto;min-height:36px;padding:0 16px;border-radius:9px;
  font-size:12.5px;font-weight:700;
  color:var(--down);background:var(--down-bg);
  border:1px solid transparent;transition:.15s;
}
.btn-danger:hover{background:var(--down);color:#fff}

.legal-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.legal-link{
  display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line-soft);
  color:var(--text);text-decoration:none;font-size:13px;font-weight:600;
  transition:.15s;
}
.legal-link:hover{border-color:var(--accent)}
.legal-link .ico{width:16px;height:16px;flex:0 0 auto;color:var(--accent-ink)}

/* --- finestra di conferma della cancellazione --- */
.danger-recap{
  background:var(--down-bg);border:1px solid var(--down);border-radius:11px;
  padding:13px 15px;margin:12px 0;font-size:12.5px;line-height:1.55;
}
.danger-kept{
  color:var(--muted);font-size:12px;line-height:1.5;margin:10px 0 4px;
}
.modal-field{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.modal-field label{font-size:12px;font-weight:600;color:var(--muted)}
.modal-field input{
  padding:11px 13px;border-radius:10px;font-size:13.5px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
}
.modal-field input:focus{outline:none;border-color:var(--accent)}

/* --- segnalazione --- */
.report-reasons{display:flex;flex-direction:column;gap:7px;margin:12px 0}
.report-reason{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line-soft);
  color:var(--text);font-size:13px;text-align:left;transition:.15s;width:100%;
}
.report-reason:hover{border-color:var(--accent)}
.report-reason.active{border-color:var(--accent);background:var(--panel)}
.report-reason .dot{
  width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--line);
}
.report-reason.active .dot{border-color:var(--accent);background:var(--accent)}

/* Il comando "Segnala" resta defilato: e' un gesto che serve ma non deve
   competere con sostieni/contesta, che sono il motivo per cui si e' li'. */
.report-trigger{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;padding:6px 8px;
  color:var(--muted);font-size:12px;font-weight:600;transition:.15s;
}
.report-trigger:hover{color:var(--down)}
.report-trigger .ico{width:14px;height:14px}
.report-trigger.done{color:var(--muted);opacity:.6;pointer-events:none}
.drawer-report{display:flex;justify-content:center;padding:14px 0 6px;
  border-top:1px solid var(--line-soft);margin-top:14px}

.auth-legal{
  display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;font-size:12px;color:var(--muted);
}
.auth-legal a{color:var(--muted);text-decoration:none}
.auth-legal a:hover{color:var(--accent-ink);text-decoration:underline}

/* ====== Accettazione termini e rinuncia al recesso ====== */

/* La riga di consenso non deve somigliare a "ricordami": quella e' una
   comodita', questa e' una dichiarazione. Testo pieno, non attenuato. */
.terms-row{
  display:flex;align-items:flex-start;gap:10px;margin:12px 0;
  font-size:12.5px;line-height:1.5;color:var(--text);cursor:pointer;
}
.terms-row input[type="checkbox"]{margin-top:2px;flex:0 0 auto;width:16px;height:16px;
  accent-color:var(--accent);cursor:pointer}
.terms-row a{color:var(--accent-ink);text-decoration:underline}

.withdrawal-box{
  grid-column:1/-1;
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:12px;
  padding:14px 16px;margin-bottom:14px;
}
.withdrawal-box.mancante{border-color:var(--down)}
.withdrawal-title{display:block;font-size:13px;font-weight:800}
.withdrawal-note{font-size:11.5px;line-height:1.5;margin:0}

/* Suggerimento sotto un campo: spiega un limite prima che l'utente ci sbatta
   contro, invece di lasciarglielo scoprire dal messaggio d'errore. */
.field-hint{
  display:block;margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--muted);
}

/* ============ Codici di recupero e password ============ */

/* I codici si copiano a mano da uno schermo: monospaziati, ben distanziati,
   e con abbastanza contrasto da leggersi al primo colpo. */
.codes-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;margin:14px 0;
}
.codes-grid code{
  display:block;padding:9px 10px;border-radius:8px;text-align:center;
  background:var(--panel-2);border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;letter-spacing:.06em;color:var(--text);
}
.codes-actions{display:flex;gap:8px;margin:12px 0}
.codes-actions .btn-trade{flex:1}

/* Comando testuale defilato: "password dimenticata" non deve competere col
   pulsante di accesso, ma nemmeno nascondersi da chi la sta cercando. */
.link-quiet{
  display:block;width:100%;margin-top:10px;padding:6px;
  background:none;border:none;text-align:center;
  font-size:12.5px;color:var(--muted);text-decoration:underline;
}
.link-quiet:hover{color:var(--accent-ink)}

/* ============ Account a cartelle ============ */

/* Una cartella per riga: il testo secondario spiega cosa c'è dentro, e su una
   griglia a due colonne verrebbe troncato proprio dove serve. */
/* Schede su griglia, non righe in colonna: una lista verticale si legge come
   una tabella di voci, una griglia si legge come un menu.

   NON quadrate: l'altezza la decide il contenuto. Forzando aspect-ratio 1/1
   le schede diventavano alte 170px con un buco vuoto fra l'icona in alto e
   il testo in fondo — spazio che non conteneva niente e faceva scorrere per
   arrivare alle ultime due. Ora sono alte quanto serve e si vedono tutte e
   sei insieme. */
/* Colonne fisse, non auto-fit. Le voci sono sei: lasciando decidere alla
   larghezza uscivano quattro schede sulla prima riga e due orfane sulla
   seconda. Tre colonne danno sempre due righe piene, su ogni schermo. */
.acct-folders{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:9px;margin-bottom:18px;
}

/* Scheda vuota, bordo sottile. Il bordo pieno d'accento su sei riquadri
   affiancati era troppo: sei cornici colorate competono fra loro e nessuna
   guida l'occhio. Qui il bordo e' l'accento molto diluito — si vede che sono
   una famiglia — e il colore pieno resta solo sull'icona, che e' il punto in
   cui l'occhio si posa per primo. */
.acct-folder{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:14px;border-radius:14px;text-align:left;
  background:transparent;
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color:var(--text);transition:background .15s, border-color .15s;
}
.acct-folder:hover{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-color:var(--accent);
}

/* L'icona e' disegnata a tratto e prende l'accento nella variante leggibile
   su fondo pagina. Piu' piccola di prima: 22px bastano a riconoscerla e
   lasciano il peso visivo al titolo, che e' cio' che si legge. */
.acct-folder-ico{display:grid;place-items:center;flex:0 0 auto;color:var(--accent-ink)}
.acct-folder-ico .ico{width:22px;height:22px}

/* Titolo e descrizione stanno insieme sotto l'icona, senza margine elastico
   che li spinga in fondo: il blocco si legge come un'unica cosa. */
.acct-folder-text{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%}
.acct-folder-text b{font-size:13.5px;font-weight:700;line-height:1.3}
/* La descrizione si ferma a due righe: senza limite, "Crediti e abbonamento"
   ne occupava due di titolo piu' due di descrizione e la sua scheda cresceva
   piu' delle altre, rompendo l'allineamento della griglia. */
.acct-folder-text small{
  font-size:11px;line-height:1.35;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* La freccia non serve piu': in una griglia di schede il gesto e' evidente,
   e sei frecce identiche sarebbero solo rumore. Resta nel tasto di ritorno. */
.acct-folder .acct-chev{display:none}
.acct-chev{width:16px;height:16px;flex:0 0 auto;color:var(--muted)}

/* Il ritorno all'elenco: freccia rovesciata, testo attenuato, nessun
   riquadro. Deve trovarsi, non farsi notare più del contenuto. */
.acct-back{
  display:flex;align-items:center;gap:7px;
  margin-bottom:14px;padding:7px 2px;background:none;border:none;
  color:var(--muted);font-size:12.5px;font-weight:600;
}
.acct-back:hover{color:var(--accent-ink)}
.acct-back .acct-chev{transform:rotate(180deg)}

/* Sezione fuori dalla cartella aperta. Classe dedicata e non `hidden`:
   quella è già usata da renderDailyPanel() e renderSecuritySection() per
   nascondere i propri riquadri quando non hanno nulla da dire, e le due
   logiche si annullerebbero a vicenda. */
.acct-nascosta{display:none !important}

/* ---- Account: schede piccole e quadrate sul telefono ----
   Con due colonne larghe le sei schede occupavano mezzo schermo, e la
   descrizione sotto ogni titolo era il motivo per cui erano cosi' alte.
   Su telefono la descrizione sparisce e resta la piastrella: icona sopra,
   titolo sotto, quadrata. I titoli sono di una parola sola — Account,
   Crediti, Aspetto, Sicurezza, Privacy, Guida — quindi si capiscono anche
   senza la riga di spiegazione, che resta su schermo largo dove c'e' posto. */
@media (max-width: 699px){
  .acct-folder{
    aspect-ratio:1/1;                /* piastrella quadrata */
    align-items:center;justify-content:center;
    gap:8px;padding:10px 6px;border-radius:13px;
  }
  .acct-folder-ico .ico{width:24px;height:24px}
  .acct-folder-text{align-items:center;text-align:center}
  .acct-folder-text b{font-size:12px;line-height:1.2}
  /* Via la descrizione: a un terzo di schermo sarebbe illeggibile comunque,
     e su tre righe farebbe crescere la piastrella oltre il quadrato. */
  .acct-folder-text small{display:none}
}

/* Nelle schede della Hype il contenitore ha gia' il suo `gap`: il margine
   della bandiera si sommava a quello e lo spazio prima del nome risultava
   doppio rispetto a ogni altra riga dell'app. */
.track-card-artist{gap:5px}
.track-card-artist .flag-ico{margin-right:0}