/* rwyrd v4 — design system giro 2 (18 ott 2026). Regole universali decise con l'utente:
   · bordi sottili al posto delle ombre (le ombre restano solo su popup e menu, che stanno sopra);
   · colori 60-30-10: superfici neutre, accento solo per azione primaria / selezione / non letti, rosso solo per errori ed eliminazioni;
     stati = pillola neutra con pallino colorato; i calendari tengono il loro colore come pallino;
   · niente "unghie" (barretta colorata a sinistra) su eventi, pillole e card;
   · sotto-sezioni nella sidebar, filtri = pulsanti con menu;
   · player fisso in basso, sempre visibile; le aree di lavoro (bento) scalano con la finestra e scorrono dentro.
   Interruttore: localStorage rw4-ds="off" (non carica i componenti nuovi; questo foglio resta ma è innocuo senza le classi v4-docked). */

/* ── bordi al posto delle ombre ── */
.v4{--sh-1:none;--card-border:var(--line)}
.v4 .tabs button[aria-selected="true"],.v4 .seg button[aria-pressed="true"]{box-shadow:0 0 0 1px var(--line)}
.v4 .v4-box,.v4 .card,.v4 .group,.v4 .v4-note,.v4 .v4-card,.v4 .v4-src,.v4 .v4-dcard{box-shadow:none;border:1px solid var(--line)}
.v4 .v4-note:hover,.v4 .v4-src:hover,.v4 .v4-dcard:hover{box-shadow:none;border-color:var(--line-strong)}

/* ── colori: stati neutri con pallino ── */
.v4 .pill.ok,.v4 .pill.warn,.v4 .pill.accent{background:var(--surface-2);color:var(--ink-2)}
.v4 .pill.ok::before,.v4 .pill.warn::before,.v4 .pill.accent::before,.v4 .pill.err::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.v4 .pill.ok::before{background:var(--ok)}.v4 .pill.warn::before{background:var(--warn)}.v4 .pill.accent::before{background:var(--accent)}.v4 .pill.err::before{background:var(--err)}
.v4 .pill:has(.ic)::before{display:none}
.v4 .pill.ok .ic{color:var(--ok)}.v4 .pill.warn .ic{color:var(--warn)}.v4 .pill.accent .ic{color:var(--accent)}
.v4 .dot.ok,.v4 .dot.warn,.v4 .dot.accent{background:var(--surface-2);color:var(--ink)}
.v4 .btn.tint{background:var(--surface-2);color:var(--ink)}
.v4 .btn.tint:hover{background:var(--surface-3)}

/* ── menu e voci che respirano ── */
.v4 .pop{padding:8px;border-radius:18px;min-width:220px}
.v4 .pop button{min-height:40px;padding:0 14px 0 12px;border-radius:12px;gap:12px}
.v4 .pop hr{margin:6px 6px}
.v4 .v3-sb{gap:4px;padding:16px 14px 12px}
.v4 .v3-nv{height:42px;padding:0 14px;gap:14px}
.v4 .v3-nv.sm{height:36px}

/* ── sotto-sezioni annidate nella sidebar ── */
.v4 .v3-nv.open[aria-current="page"]{background:transparent;box-shadow:none;color:var(--ink);font-weight:600}
.v4-subs{display:flex;flex-direction:column;gap:2px;margin:0 0 6px}
.v4-sub{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 50px;border-radius:var(--r-pill);color:var(--ink-2);font:500 14px/1 var(--font);text-decoration:none}
.v4-sub:hover{background:var(--hover);color:var(--ink)}
.v4-sub[aria-current="page"]{background:var(--tab-on);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.v4-sub .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-sub .n{font:500 12px/1 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
.v4-mtabs{display:none}

/* ── filtri = pulsante con menu ── */
.v4-fbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.v4-fb{display:inline-flex;align-items:center;height:32px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-strong);background:var(--surface);white-space:nowrap}
.v4-fb-b{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border:0;background:transparent;border-radius:var(--r-pill);font:500 13px/1 var(--font);color:var(--ink);cursor:pointer}
.v4-fb-b .k{color:var(--ink-3)}
.v4-fb-b em{font-style:normal;color:var(--ink-3);font-variant-numeric:tabular-nums}
.v4-fb-b .ic{color:var(--ink-3)}
.v4-fb:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.v4-fb.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 45%,transparent)}
.v4-fb.on .v{color:var(--accent-ink)}
.v4-fb-x{width:26px;height:26px;margin:0 3px 0 -4px;border:0;border-radius:50%;background:transparent;color:var(--accent-ink);display:grid;place-items:center;cursor:pointer}
.v4-fb-x:hover{background:color-mix(in oklab,var(--accent) 15%,transparent)}

/* ── struttura con player fisso: l'area di lavoro finisce sopra il player ── */
.v4-docked .v4-body{min-height:0}
.v4-docked .v3-col{max-width:1120px;margin:0;padding:20px 24px 48px}
.v4-docked.has-panel .v3-col{margin:0!important}
.v4-docked .v4-rcol{padding:16px 16px 24px 0}
.v4-docked .toast{bottom:92px}
.v4-page{max-width:1120px;padding:20px 24px 48px}
.v4-ph{display:flex;align-items:flex-end;gap:12px;margin:0 0 18px}.v4-ph h1{flex:1;min-width:0}
.v4-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 8px}
.v4-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;min-width:0}
.v4-kpi:hover{border-color:var(--line-strong)}
.v4-kpi .t-cap{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.v4-kpi b{font:700 34px/38px var(--font);letter-spacing:-.02em}
.v4-kpi .t-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* player fisso */
.v4-pl{flex:none;height:76px;display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr) auto;align-items:center;gap:20px;padding:0 16px;border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:30}
.v4-pl.idle{display:flex;justify-content:center}
.v4-pl-m{display:flex;align-items:center;gap:12px;min-width:0;border:0;background:transparent;padding:4px;margin:-4px;border-radius:12px;cursor:pointer;text-align:left;color:var(--ink)}
.v4-pl-m:hover{background:var(--hover)}
.v4-pl-m .art{border-radius:6px}
.v4-pl-m .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.v4-pl-m b{font:600 14px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-pl-m .tx span{font:var(--t-sub);font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-pl-c{display:flex;align-items:center;gap:16px;min-width:0;width:100%}
.v4-pl-btns{display:flex;justify-content:center;align-items:center;gap:4px;flex:none}
.v4-pl-btns .ibtn{width:32px;height:32px}
.v4-pl-btns .pbtn{width:40px;height:40px}
.v4-pl-w .wave+div,.v4-pl-w [style*="relative"]>div:not(.wave){transform:scale(.8);transform-origin:top center}
.v4 .ibtn[aria-pressed="true"]{color:var(--accent-ink)}
.v4-pl-w{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.v4-pl-w .num{font:500 11.5px/1 var(--font);color:var(--ink-3);width:34px;flex:none}
.v4-pl-w .num:first-child{text-align:right}
.v4-pl-w>div{flex:1;min-width:0}
.v4-pl-r{display:flex;align-items:center;gap:4px;justify-self:end}

/* player esteso nella colonna destra */
.v4-rcol.np{padding-top:12px}
.v4-np{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px 16px}
.v4-np-h{display:flex;align-items:center;justify-content:space-between;margin:-4px -6px -2px 0}
.v4-np-t{display:flex;align-items:flex-start;gap:10px}
.v4-np-t h2{font:700 20px/26px var(--font);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-np-tm{display:flex;justify-content:space-between;margin-top:-8px}
.v4-np-in{display:flex;gap:8px}
.v4-np-sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.v4-np-sec b{font:var(--t-row);font-size:14px}
.v4-np-c{display:grid;grid-template-columns:36px 24px 1fr;gap:8px;align-items:start;border:0;background:transparent;text-align:left;padding:6px;margin:-2px -6px;border-radius:10px;cursor:pointer;color:var(--ink);font:var(--t-sub)}
.v4-np-c:hover{background:var(--hover)}
.v4-np-c .num{padding-top:4px}
.v4-np-c .tx{padding-top:3px;line-height:18px}
.v4-np .row.sm{margin:0 -8px;width:calc(100% + 16px)}
.v4-np-f{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.v4-np-f .btn.primary{flex:1}

/* ── calendario: bento fisso che scala, niente unghie, colore calendario = pallino ── */
.v4-docked .v4-cal-main{padding:12px 16px 16px}
.v4-docked .v4-month{padding-bottom:0;border-radius:var(--r-lg);border:1px solid var(--line);container-type:size}
.v4-docked .v4-month .cell{min-height:max(96px,calc((100cqh - 37px)/6))}
.v4-docked .v4-tg{border-radius:var(--r-lg);border:1px solid var(--line)}
.v4-docked .v4-tg .grid{padding-bottom:0}
.v4-docked .v4-cal-scroll{padding-bottom:16px}
.v4-docked .v4-cal-pane{padding-bottom:24px}
.v4-docked .v4-meet-l{padding-bottom:16px}
.v4-docked .v4-meet-r{border-radius:var(--r-lg);border:1px solid var(--line);padding-bottom:28px}
.v4 .it{box-shadow:none;background:color-mix(in oklab,var(--ink) 5%,var(--surface))}
.v4 .it:not(.tk):not(.rl):not(.grp)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--accent));flex:none}
.v4 .it:hover{background:color-mix(in oklab,var(--ink) 9%,var(--surface))}
.v4 .it.tk{background:transparent}
.v4 .it.done .tx{text-decoration:line-through;color:var(--ink-3)}
.v4-tg .ev{box-shadow:none;background:color-mix(in oklab,var(--c) 14%,var(--surface));padding-left:18px}
.v4-tg .ev::before{content:"";position:absolute;left:7px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--c)}
.v4-tg .ev.tk{box-shadow:inset 0 0 0 1px var(--line-strong);padding-left:7px}.v4-tg .ev.tk::before{display:none}
.v4-tg .ev.done{opacity:.55}.v4-tg .ev.done b{text-decoration:line-through}
.v4-agenda .ai{box-shadow:none;background:color-mix(in oklab,var(--ink) 4%,var(--surface));position:relative;padding-left:28px}
.v4-agenda .ai::before{content:"";position:absolute;left:12px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--c,var(--ink-3))}
.v4-agenda .ai.rl::before,.v4-agenda .ai.empty::before{display:none}.v4-agenda .ai.rl,.v4-agenda .ai.empty{padding-left:12px}

/* ── responsive ── */
@media (max-width:1279px){.v4-docked .v4-rcol.open{top:60px;bottom:76px;padding:12px 16px 24px}}
@media (max-width:900px){.v4-subs{display:none}.v4-mtabs{display:block}.v4-kpis{grid-template-columns:1fr 1fr 1fr;gap:8px}.v4-kpi{padding:12px}.v4-kpi b{font-size:26px;line-height:30px}}
@media (max-width:700px){
  .v4-docked .v4-main{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .v4-pl{grid-template-columns:minmax(0,1fr) auto;height:64px;gap:8px;padding:0 8px}
  .v4-pl-c{grid-column:2;grid-row:1}.v4-pl-btns .ibtn:not(:nth-child(2)):not(:nth-child(4)){display:none}.v4-pl-w{display:none}
  .v4-pl-r{display:none}
  .v4-docked .v3-col,.v4-page{padding:16px 16px 32px}
  .v4-kpis{grid-template-columns:1fr}
  .v4-docked .v4-rcol.open{top:0;bottom:0}
  .v4-docked .toast{bottom:144px}
}

/* ── pannello accanto all'oggetto (calendario, rollout) ── */
.v4-peek{position:fixed;z-index:55;width:340px;max-width:calc(100vw - 16px);background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-2);padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px;animation:fade .12s}
.v4-peek-h{display:flex;align-items:flex-start;gap:10px}
.v4-peek-h>i{width:10px;height:10px;border-radius:50%;flex:none;margin-top:7px;background:var(--lc,var(--accent))}
.v4-peek-h h3{flex:1;min-width:0;margin:0;font:600 16px/24px var(--font)}
.v4-peek-h h3.done{text-decoration:line-through;color:var(--ink-3)}
.v4-peek-h .ibtn{margin:-6px -6px 0 0}
.v4-peek-ck{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink-3);display:grid;place-items:center;flex:none;margin-top:3px}
.v4-peek-ck.on{background:var(--ink);border-color:var(--ink);color:var(--ink-inv)}
.v4-peek-b{display:flex;flex-direction:column;gap:6px}
.v4-peek-b>div{display:flex;gap:10px;align-items:flex-start;font:var(--t-sub);color:var(--ink-2)}
.v4-peek-b .ic{flex:none;margin-top:2px;color:var(--ink-3)}
.v4-peek-f{display:flex;gap:6px;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.v4 .it.tk .ck{display:grid;place-items:center;cursor:pointer}
.v4 .it.tk .ck:hover{border-color:var(--ink)}
.v4 .it.tk.done .ck{background:var(--ink-3);border-color:var(--ink-3);color:var(--surface)}
.v4-ghost{position:absolute;left:2px;right:2px;border-radius:8px;background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);pointer-events:none;z-index:3;padding:3px 7px;font-style:normal}
.v4-ghost b{font:600 11.5px/14px var(--font);color:var(--accent-ink)}

/* ── Rollouts: timeline orizzontale con zoom ── */
.l-ann{--lc:var(--accent)}.l-pre{--lc:#9B6BFF}.l-con{--lc:#14A39A}.l-prs{--lc:var(--warn)}.l-live{--lc:var(--ok)}.l-dl{--lc:var(--err)}
.v4-ro{display:flex;flex-direction:column;flex:1;min-height:0}
.v4-zoom{display:flex;align-items:center;gap:2px}
.v4-rt{flex:1;min-height:0;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);position:relative;scrollbar-width:thin}
.v4-rt-in{position:relative;min-height:100%}
.v4-rt-hd{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:180px 1fr;grid-template-rows:auto auto;background:var(--surface);border-bottom:1px solid var(--line)}
.v4-rt-corner{grid-row:1/3;position:sticky;left:0;z-index:2;background:var(--surface);border-right:1px solid var(--line)}
.v4-rt-hd .mo,.v4-rt-hd .tk{position:relative;height:28px}
.v4-rt-hd .mo span{position:absolute;top:0;height:28px;padding:8px 8px 0;font:600 12px/1 var(--font);color:var(--ink);border-left:1px solid var(--line);white-space:nowrap;overflow:hidden}
.v4-rt-hd .tk{grid-column:2;height:24px;border-top:1px solid var(--line)}
.v4-rt-hd .tk span{position:absolute;top:0;height:24px;padding:6px 0 0 6px;text-align:left;border-left:1px solid var(--line);font:500 11px/1 var(--font);color:var(--ink-3);white-space:nowrap}
.v4-rt-hd .tk span.d{text-align:center;padding-left:0;border-left:0}
.v4-rt-hd .tk span.we{background:color-mix(in oklab,var(--ink) 3%,transparent)}
.v4-rt-hd .tk span.on{color:var(--accent-ink);font-weight:700}
.v4-rt-now{position:absolute;top:0;bottom:0;width:2px;background:var(--err);z-index:3;pointer-events:none;opacity:.8}
.v4-rg{border-bottom:1px solid var(--line)}
.v4-rg.sel{background:color-mix(in oklab,var(--accent) 4%,transparent)}
.v4-rg-h,.v4-rg-r{display:grid;grid-template-columns:180px 1fr;min-height:36px}
.v4-rg-h{min-height:44px}
.v4-rt-lbl{position:sticky;left:0;z-index:2;background:var(--surface);border:0;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:6px 12px;text-align:left;color:var(--ink);cursor:pointer;min-width:0}
button.v4-rt-lbl{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
button.v4-rt-lbl .t-sub{grid-column:2;font-size:12px}
.v4-rt-lbl b{font:600 13.5px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-rt-lbl.ln{font:500 12.5px/1 var(--font);color:var(--ink-2);padding-left:36px;cursor:default}
.v4-rt-track{position:relative}
.v4-rday{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:6px;transform:translateX(-6px)}
.v4-rday i{width:12px;height:12px;background:var(--ink);transform:rotate(45deg);border-radius:2px;flex:none}
.v4-rday em{font:600 11.5px/1 var(--font);font-style:normal;color:var(--ink);white-space:nowrap}
.v4-rbar{position:absolute;top:6px;height:24px;border:0;border-radius:7px;background:color-mix(in oklab,var(--lc) 16%,var(--surface));color:var(--ink);font:500 12px/24px var(--font);padding:0 8px 0 16px;text-align:left;cursor:grab;overflow:hidden;white-space:nowrap;min-width:6px}
.v4-rbar::before{content:"";position:absolute;left:6px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--lc)}
.v4-rbar span{overflow:hidden;text-overflow:ellipsis;display:block}
.v4-rbar:hover{background:color-mix(in oklab,var(--lc) 26%,var(--surface))}
.v4-rbar.past{opacity:.55}
.v4-rbar.drag{cursor:grabbing;box-shadow:0 0 0 2px var(--lc);z-index:2}
@media (max-width:700px){.v4-rt-hd,.v4-rg-h,.v4-rg-r{grid-template-columns:120px 1fr}.v4-rt-lbl.ln{padding-left:12px}.v4-zoom .seg{display:none}}

/* ── Chats a canali: lista e conversazione = due bento alti uguali ── */
.v4 .v3-main:has(.v4-chats){overflow:hidden}
.v4-chats{display:flex;gap:16px;height:100%;padding:16px 0 16px 24px}
.v4-clist{width:320px;flex:none;display:flex;flex-direction:column;gap:10px;min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 10px 6px}
.v4-clist-h{display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.v4-clist-h h1{font-size:24px;line-height:30px}
.v4-clist .search{margin:0 4px;height:38px}
.v4-clist>.v4-fbar{padding:0 4px}
.v4-clist-b{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px;scrollbar-width:thin}
.v4-clist-b .group-h{padding:14px 10px 4px}
.v4-cl-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.v4-cl-end .t-sub{font-size:12px}
.v4-cl-subs{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 44px}
.v4-cl-sub{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:500 13.5px/1 var(--font);cursor:pointer;text-align:left}
.v4-cl-sub:hover{background:var(--hover);color:var(--ink)}
.v4-cl-sub.on{background:var(--selected);color:var(--ink)}
.v4-cl-sub.un{color:var(--ink);font-weight:700}
.v4-cl-sub span:not(.badge){flex:1}
.v4-conv{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.v4-conv-empty{align-items:center;justify-content:center}
.v4-conv-h{display:flex;align-items:center;gap:12px;padding:12px 16px}
.v4-conv-h .t{font:600 16px/22px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-subtabs{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none}
.v4-subtabs button{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 10px;border:0;background:transparent;color:var(--ink-2);font:500 13.5px/1 var(--font);cursor:pointer;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
.v4-subtabs button:hover{color:var(--ink)}
.v4-subtabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.v4-subtabs .badge{min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
.v4-subtabs .add{color:var(--ink-3)}
.v4-msgs{padding:16px 24px}
.v4-msgs .v3-b.pinned{box-shadow:inset 0 0 0 1.5px var(--warn)}
.v4-pinbar{position:sticky;top:-16px;z-index:2;display:flex;align-items:center;gap:8px;margin:-16px -24px 0;padding:8px 24px;border:0;border-bottom:1px solid var(--line);background:var(--surface);font:var(--t-sub);color:var(--ink-2);cursor:pointer;text-align:left;max-width:none!important}
.v4-pinbar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}.v4-pinbar em{font-style:normal}
.v4-comp{position:relative;max-width:calc(var(--w-read) + 48px);padding:12px 24px 16px}
.v4-slash{position:absolute;left:24px;bottom:calc(100% - 4px);width:min(420px,calc(100% - 48px));background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-2);padding:8px;z-index:5}
.v4-slash .t-cap{padding:4px 10px 6px;color:var(--ink-3)}
.v4-slash button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;text-align:left;font:var(--t-sub)}
.v4-slash button b{font:600 13.5px/1 var(--font);min-width:72px}
.v4-slash button span{color:var(--ink-2)}
.v4-slash button[aria-selected="true"]{background:var(--hover)}
/* file come oggetti */
.v4-file{display:flex;flex-direction:column;gap:8px;width:340px;max-width:100%;padding:10px 10px 10px 10px;border-radius:16px;background:var(--surface-2);border:1px solid transparent}
.v4-file.me{background:var(--accent-soft)}
.v4-file.pinned{border-color:var(--warn)}
.v4-file-t{display:flex;align-items:center;gap:10px;min-width:0}
.v4-file-p{width:36px;height:36px;border-radius:50%;border:0;background:var(--ink);color:var(--ink-inv);display:grid;place-items:center;cursor:pointer;flex:none}
.v4-file-i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface);flex:none}
.v4-file-n{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v4-file-n b{font:600 13.5px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-file-n span{font:var(--t-sub);font-size:12px;color:var(--ink-2)}
.v4-file-f{display:flex;align-items:center;gap:6px;font:var(--t-sub);font-size:12px;color:var(--ink-2)}
.v4-taskmsg{align-self:center;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);min-width:min(420px,100%)}
.v4-taskmsg>div{flex:1;display:flex;flex-direction:column;gap:2px}.v4-taskmsg b{font:600 14px/18px var(--font)}.v4-taskmsg b.done{text-decoration:line-through;color:var(--ink-3)}
.v4-taskmsg .v4-peek-ck{margin:0;cursor:pointer;background:transparent}.v4-taskmsg .v4-peek-ck.on{background:var(--ink)}
.v4-pick{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;cursor:pointer}.v4-pick span:nth-of-type(1){flex:1}
@media (max-width:1100px){.v4-clist{width:280px}}
@media (max-width:700px){
  .v4-chats{padding:0;display:block;height:100%}
  .v4-clist{width:auto;height:100%;border:0;border-radius:0;padding:12px 8px}
  .v4-chats.has-cur .v4-clist{display:none}
  .v4-chats:not(.has-cur) .v4-conv{display:none}
  .v4-conv{height:100%;border:0;border-radius:0}
  .v4-msgs{padding:12px}.v4-comp{padding:8px 12px 12px}.v4-file{width:260px}
  .v4-conv-h{padding:8px 8px 8px 4px;gap:8px}.v4-conv-h .avs,.v4-conv-h>.btn{display:none}
}

/* ── Catalog: file manager ── */
.v4-cat{position:relative;min-height:100%}
.v4-ph .btn{flex:none}
.v4-tool{display:flex;align-items:center;gap:10px;margin:0 0 12px;min-height:40px;flex-wrap:wrap}
.v4-csearch{width:240px;height:36px;flex:none}
.v4-sortb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:500 13px/1 var(--font);cursor:pointer}
.v4-sortb:hover{background:var(--hover);color:var(--ink)}
.v4-vt{display:flex;gap:2px;padding:2px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line)}
.v4-vt .ibtn{width:30px;height:30px}.v4-vt .ibtn[aria-pressed="true"]{background:var(--surface-2);color:var(--ink)}
.v4-bulk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 6px 4px 14px}
.v4-bulk b{font:600 14px/1 var(--font)}
.v4-ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ink-inv)}
.v4-ck.on{background:var(--ink);border-color:var(--ink)}
.v4-tbl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.v4-tr{display:grid;grid-template-columns:36px minmax(200px,2.2fr) 64px 56px 56px 84px minmax(150px,1.3fr) 84px 40px;align-items:center;gap:8px;min-height:60px;padding:0 8px 0 12px;border-top:1px solid var(--line);cursor:pointer;font:var(--t-sub);color:var(--ink-2)}
.v4-tr:first-child{border-top:0}
.v4-tr>span{min-width:0}.v4-tr .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.v4-tr.h{min-height:40px;position:sticky;top:0;background:var(--surface);z-index:1;font:500 12px/1 var(--font);color:var(--ink-3);cursor:default}
.v4-tr.h .s{cursor:pointer;display:inline-flex;align-items:center;gap:4px}.v4-tr.h .s:hover{color:var(--ink)}
.v4-tr:not(.h):hover{background:var(--hover)}
.v4-tr.sel{background:var(--selected)}
.v4-tr.chk{background:color-mix(in oklab,var(--ink) 4%,var(--surface))}
.v4-tr .nm{display:flex;align-items:center;gap:12px;min-width:0}
.v4-tr .nm>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.v4-tr .nm b{font:var(--t-row);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-tr .nm em{font-style:normal;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-tr .v4-ck{opacity:0}.v4-tr:hover .v4-ck,.v4-tr .v4-ck.on,.v4-tr.h .v4-ck{opacity:1}
.v4-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.v4-gc{display:flex;flex-direction:column;gap:4px;padding:8px 8px 12px;border-radius:16px;cursor:pointer;border:1px solid transparent}
.v4-gc:hover{background:var(--hover)}.v4-gc.sel{background:var(--selected);border-color:var(--line)}
.v4-gc .cv{position:relative;margin-bottom:6px}.v4-gc .cv .art{border-radius:10px}
.v4-gc .v4-ck{position:absolute;top:8px;left:8px;opacity:0}.v4-gc:hover .v4-ck,.v4-gc .v4-ck.on{opacity:1}
.v4-gc b{font:var(--t-row);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v4-gc .pill{align-self:flex-start;margin-top:4px}
.v4-drop{position:absolute;inset:8px;border-radius:24px;border:2px dashed var(--accent);background:color-mix(in oklab,var(--accent-soft) 85%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--accent-ink);z-index:5;pointer-events:none}
.v4-drop b{font:700 20px/1 var(--font)}.v4-drop span{font:var(--t-sub)}
.v4-det{display:flex;flex-direction:column;gap:10px}
.v4-det .kv{padding:4px 0;min-height:30px}
.v4-det .row.sm{margin:0 -8px;width:calc(100% + 16px)}
@media (max-width:1100px){.v4-tr{grid-template-columns:40px minmax(200px,1fr) 70px 92px 110px 44px}.v4-tr>:nth-child(3),.v4-tr>:nth-child(5),.v4-tr>:nth-child(6){display:none}}
/* 26 ott (check mobile): la regola mobile vale solo per il Catalog; le altre tabelle hanno la loro versione sotto (prima nascondeva i nomi in Contacts, Splits, Holdings) */
@media (max-width:700px){.v4-cat .v4-tr{grid-template-columns:minmax(0,1fr) auto 44px;padding:0 4px 0 8px}.v4-cat .v4-tr>:nth-child(1),.v4-cat .v4-tr>:nth-child(3),.v4-cat .v4-tr>:nth-child(4),.v4-cat .v4-tr>:nth-child(5),.v4-cat .v4-tr>:nth-child(6),.v4-cat .v4-tr>:nth-child(8){display:none}.v4-csearch{width:100%}}

/* ── Settings a due colonne ── */
.v4 .v3-main:has(.v4-set){overflow:hidden}
.v4-set{display:flex;gap:16px;height:100%;padding:16px 0 16px 24px}
.v4-set-nav{width:260px;flex:none;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:4px 0 24px;scrollbar-width:thin}
.v4-set-nav h1{margin:4px 12px 14px;font-size:28px;line-height:34px}
.v4-set-nav .search{margin:0 4px 6px;height:38px}
.v4-set-nav .v3-grp{padding:16px 12px 6px}
.v4-set-it{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:500 14px/1 var(--font);text-decoration:none;cursor:pointer;width:100%;text-align:left}
.v4-set-it:hover{background:var(--hover);color:var(--ink)}
.v4-set-it[aria-current="page"]{background:var(--tab-on);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.v4-set-main{flex:1;min-width:0;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-right:16px}
.v4-set-in{max-width:760px;padding:28px 32px 48px}
.v4-set-in .group{background:var(--bg)}
.v4.has-rc .v4-set-main{margin-right:0}

/* ── Popup spazio di lavoro (stile Mobbin / notifiche v2): ricerca in alto, filtri rapidi, categorie a sinistra. Base di Search e Notifications ── */
.v4-wp{max-width:760px;height:min(620px,calc(100vh - 140px));padding:0}
.v4-wp-top{display:flex;align-items:center;gap:10px;height:56px;padding:0 18px;border-bottom:1px solid var(--line);color:var(--ink-3);flex:none}
.v4-wp-top input{flex:1;border:0;background:transparent;font:500 16px/1 var(--font);color:var(--ink);outline:none}
.v4-wp-top kbd{font:500 11px/1 var(--font);padding:4px 6px;border-radius:6px;background:var(--surface-2);color:var(--ink-3)}
.v4-wp-bar{display:flex;align-items:center;gap:8px;padding:10px 14px 10px 18px;border-bottom:1px solid var(--line);flex:none}
.v4-qf{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-strong);background:transparent;font:500 13px/1 var(--font);color:var(--ink);cursor:pointer}
.v4-qf em{font-style:normal;color:var(--ink-3)}.v4-qf.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 45%,transparent);color:var(--accent-ink)}
.v4-wp-b{flex:1;min-height:0;display:flex}
.v4-wp-nav{width:200px;flex:none;border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.v4-wp-nav button{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);font:500 13.5px/1 var(--font);cursor:pointer;text-align:left}
.v4-wp-nav button span{flex:1}.v4-wp-nav em{font-style:normal;font-size:12px;color:var(--ink-3)}
.v4-wp-nav button:hover{background:var(--hover);color:var(--ink)}.v4-wp-nav button[aria-current]{background:var(--surface-2);color:var(--ink)}
.v4-wp-l{flex:1;min-width:0;overflow-y:auto;padding:8px 12px 16px}
.v4-wp-l .group-h{padding:14px 8px 6px}
.v4-nrow{position:relative;display:flex;align-items:center;gap:12px;padding:10px 8px 10px 10px;border-radius:14px;cursor:pointer}
.v4-nrow:hover{background:var(--hover)}
.v4-nrow .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.v4-nrow .tx b{font:500 14px/19px var(--font);color:var(--ink-2)}.v4-nrow.un .tx b{color:var(--ink);font-weight:600}
.v4-nrow .tx span{font:var(--t-sub);font-size:12px;color:var(--ink-3)}
.v4-ndot{position:absolute;left:2px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent)}
.v4-ncard{display:flex;align-items:center;gap:12px;padding:12px;margin:4px 0 6px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.v4-ncard .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.v4-ncard .tx b{font:600 14px/19px var(--font)}.v4-ncard .a{display:flex;gap:6px}
@media (max-width:700px){.v4-wp{height:100%;max-width:none}.v4-wp-nav{display:none}.v4-set{padding:0}}

/* ── Accesso: modulo a sinistra, immagine a destra (Mobbin, Lovable, Square, Sprig) ── */
.v4 .v3-auth{flex-direction:row-reverse;background:var(--bg)}
.v4 .v3-auth-main{width:auto;flex:0 0 min(48%,680px);position:relative;align-items:center;justify-content:center;padding:96px 48px 48px}
.v4 .v3-auth-main .box{max-width:380px}
.v4 .v3-auth-logo{display:flex;position:absolute;top:28px;left:40px;padding:0}
.v4 .v3-auth-art{margin:12px 12px 12px 0;border-radius:28px}
.v4 .v3-auth-art>.v3-logo{visibility:hidden}
.v4 .v3-auth-main h1,.v4 .v3-auth-main .t-title{font-size:30px;line-height:36px}
@media (max-width:1000px){.v4 .v3-auth-main{flex:1;padding:96px 24px 32px}.v4 .v3-auth-logo{left:24px}}

.v4-wp{max-width:820px}
.v4-wp-top .ibtn{width:30px;height:30px}
.v4-wp-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;border:0;border-radius:14px;background:transparent;text-align:left;cursor:pointer;color:var(--ink)}
.v4-wp-row.on{background:var(--hover)}
.v4-wp-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v4-wp-row b{font:500 14.5px/19px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-wp-row .tx span{font:var(--t-sub);font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-wp-row kbd,.v4-keys kbd{font:500 11px/1 var(--font);padding:3px 6px;border-radius:6px;background:var(--surface-2);color:var(--ink-3)}
.v4-keys{display:inline-flex;gap:4px;align-items:center;font:var(--t-sub);font-size:12px;color:var(--ink-3)}
.v4-wp-l .group-h{display:flex;justify-content:space-between;align-items:center}
.v4-wp-l .group-h button{border:0;background:transparent;font:500 12px/1 var(--font);color:var(--accent-ink);cursor:pointer}
@media (max-width:900px){.v4-keys{display:none}}
/* Create */
.v4-create{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v4-create button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer;color:var(--ink)}
.v4-create button:hover{border-color:var(--line-strong);background:var(--hover)}
.v4-create button:disabled{opacity:.45;cursor:not-allowed}
.v4-create b{font:600 15px/20px var(--font);margin-top:4px}.v4-create span{font:var(--t-sub);color:var(--ink-2)}
.v4-rec{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0}
.v4-rec-l{display:flex;align-items:center;gap:3px;height:64px;width:100%}
.v4-rec-l i{flex:1;background:var(--ink-3);border-radius:2px;transition:height .1s;min-height:3px}
.v4-rec-b{width:72px;height:72px;border-radius:50%;border:4px solid var(--line-strong);background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.v4-rec-b i{width:52px;height:52px;border-radius:50%;background:var(--err);transition:all .2s}
.v4-rec-b.on i{width:26px;height:26px;border-radius:6px}
@media (max-width:700px){.v4-create{grid-template-columns:1fr}}

/* ── sidebar: sotto-voci apribili con animazione, sidebar compatta (⌘\), colonna destra (⌘⇧\) ── */
.v4-nvw{position:relative;display:flex;flex:none}
.v4-nvw .v3-nv{flex:1}
.v4-nvw.has .v3-nv{padding-right:40px}
.v4-nv-x{position:absolute;right:6px;top:50%;margin-top:-14px;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s,transform .25s cubic-bezier(.3,.8,.2,1),background .15s}
.v4-nvw:hover .v4-nv-x,.v4-nv-x:focus-visible,.v4-nv-x.open{opacity:1}
.v4-nv-x:hover{background:var(--hover);color:var(--ink)}
.v4-nv-x .ic{transition:transform .28s cubic-bezier(.3,.8,.2,1);transform:rotate(-90deg)}
.v4-nv-x.open .ic{transform:rotate(0)}
.v4-nvw .badge+.v4-nv-x,.v4-nvw.has .v3-nv .badge{margin-right:0}
.v4-subw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,.8,.2,1),opacity .25s;opacity:0}
.v4-subw.open{grid-template-rows:1fr;opacity:1}
.v4-subw>.v4-subs{overflow:hidden;min-height:0;margin:0}
.v4-subw.open>.v4-subs{padding:2px 0 6px}
@media (prefers-reduced-motion:reduce){.v4-subw,.v4-nv-x .ic{transition:none}}
.v4-logo{display:flex;align-items:center;justify-content:space-between}
.v4-logo .ibtn{width:32px;height:32px;opacity:.6}.v4-logo .ibtn:hover{opacity:1}
.v4-mini{--w-side:76px}
.v4-mini .v3-sb{width:76px;padding:16px 12px;align-items:center}
.v4-mini .v3-sb .lbl,.v4-mini .v3-sb .seg,.v4-mini .v3-grp,.v4-mini .v3-sto,.v4-mini .v3-acct>div,.v4-mini .v4-subw,.v4-mini .v4-nv-x,.v4-mini .v3-nv.sm .soon{display:none!important}
.v4-mini .v4-logo{flex-direction:column;gap:8px;font-size:0}.v4-mini .v4-logo::before{content:"r";font:900 22px/1 var(--font)}.v4-mini .v4-logo .ibtn{opacity:1}
.v4-mini .v3-nv{width:48px;height:44px;justify-content:center;padding:0!important;position:relative}
.v4-mini .v3-nv .badge{position:absolute;top:2px;right:2px;margin:0}
.v4-mini .v3-nv.open[aria-current="page"]{background:var(--tab-on);box-shadow:0 0 0 1px var(--line)}
.v4-mini .v4-nvw{justify-content:center}
.v4-rc-t{display:inline-grid}

/* ── Master, split editor, A/B, valuation, lyrics ── */
.v4-mst .card.pad{padding:18px}
.v4-mst-own{display:flex;flex-wrap:wrap;gap:20px;margin-top:10px}
.v4-mst-own .own{display:flex;gap:12px;align-items:center}.v4-mst-own b{display:block;font:600 16px/22px var(--font)}
.v4-mst-flow{display:flex;flex-direction:column}
.v4-mst-flow .st{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font:var(--t-body);font-size:14px}
.v4-mst-flow .st:first-child{border-top:0}.v4-mst-flow .st.ok b{color:var(--ok)}.v4-mst-flow .st.warn span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-right:8px;vertical-align:middle}
.v4-led .seg{flex-wrap:wrap}
.v4-se-h{display:flex;justify-content:space-between;align-items:center;margin:16px 2px 6px;font:var(--t-cap);color:var(--ink-3)}
.v4-se-r{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 2px;border-bottom:1px solid var(--line)}
.v4-se-r .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.v4-se-r .nm b{font:500 14px/18px var(--font)}.v4-se-r .nm span{font:var(--t-sub);font-size:12px;color:var(--ink-3)}
.v4-se-r input[type=range]{width:160px;accent-color:var(--ink)}
.v4-pct{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 10px;border-radius:10px;background:var(--surface-2);font:500 14px/1 var(--font);color:var(--ink-2)}
.v4-pct input{width:48px;border:0;background:transparent;font:600 14px/1 var(--font);color:var(--ink);text-align:right;outline:none}
.v4-pct:focus-within{box-shadow:var(--focus)}
.v4-sel{height:36px;border:0;border-radius:10px;background:var(--surface-2);padding:0 10px;font:500 13.5px/1 var(--font);color:var(--ink)}
.v4-se-add{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;height:36px;padding:0 12px;border:1px dashed var(--line-strong);border-radius:var(--r-pill);background:transparent;font:500 13.5px/1 var(--font);color:var(--ink-2);cursor:pointer}
.v4-se-add:hover{color:var(--ink);border-color:var(--ink-3)}
.v4-se-bar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;margin:16px 0 4px;background:var(--surface-2)}
.v4-se-bar i{display:block;background:var(--ink);opacity:.85}.v4-se-bar i:nth-child(2n){opacity:.55}.v4-se-bar i:nth-child(3n){opacity:.35}.v4-se-bar i.left{background:repeating-linear-gradient(45deg,var(--warn) 0 4px,transparent 4px 8px);opacity:.5}
.v4-left{display:inline-flex;align-items:center;gap:6px;font:600 13.5px/1 var(--font)}.v4-left.ok{color:var(--ok)}.v4-left.warn{color:var(--warn)}.v4-left.err{color:var(--err)}
.v4-ab{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v4-ab-c{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;border:1px solid var(--line);cursor:pointer;transition:border-color .15s,background .15s}
.v4-ab-c.on{border-color:var(--ink);background:color-mix(in oklab,var(--ink) 3%,var(--surface))}
.v4-ab-h{display:flex;align-items:center;gap:8px}
.v4-ab-k{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);font:700 13px/1 var(--font)}
.v4-ab-c.on .v4-ab-k{background:var(--ink);color:var(--ink-inv)}
.v4-ab-f{display:flex;justify-content:space-between;align-items:center;min-height:32px}
.v4-ab-t{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.v4-val-hero{padding:22px}
.v4-val-t .v4-tr{grid-template-columns:minmax(180px,2fr) 70px 110px 110px 60px;cursor:pointer}
.v4-ul{margin:8px 0 0;padding-left:18px;line-height:1.6;color:var(--ink-2)}
.v4-val-calc{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.v4-val-calc label{display:flex;flex-direction:column;gap:8px;font:var(--t-sub);color:var(--ink-2)}
.v4-val-calc label b{font:700 18px/1 var(--font);color:var(--ink)}
.v4-val-calc input{accent-color:var(--ink)}
.v4-np-tabs{margin-top:4px}
.v4-lyr{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto;scrollbar-width:thin}
.v4-lyr button{border:0;background:transparent;text-align:left;padding:6px 4px;border-radius:8px;font:700 18px/24px var(--font);color:var(--ink-3);cursor:pointer;transition:color .2s}
.v4-lyr button.past{color:color-mix(in oklab,var(--ink-3) 70%,transparent)}
.v4-lyr button.on{color:var(--ink)}
.v4-lyr button:hover{background:var(--hover)}
@media (max-width:700px){.v4-ab{grid-template-columns:1fr}.v4-se-r input[type=range]{display:none}.v4-val-calc{grid-template-columns:1fr}.v4-val-t .v4-tr{grid-template-columns:1fr 60px 90px}.v4-val-t .v4-tr>:nth-child(4),.v4-val-t .v4-tr>:nth-child(5){display:none}}
.v4-fin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v4-fin .card{display:flex;flex-direction:column;gap:6px}.v4-fin b{font:600 16px/22px var(--font);margin-top:6px}.v4-fin .kv{padding:4px 0;min-height:28px}
@media (max-width:900px){.v4-fin{grid-template-columns:1fr}}
/* lucchetto del piano */
.v4-gate{position:relative;margin-top:4px}
.v4-gate-c{filter:blur(6px);opacity:.55;pointer-events:none;user-select:none}
.v4-gate-o{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.v4-gate-o b{font:600 16px/22px var(--font)}.v4-gate-o p{margin:0}
.v4-cl-q{display:flex;gap:4px;padding:0 4px}
.v4-cl-q button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border:0;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font:500 12.5px/1 var(--font);cursor:pointer}
.v4-cl-q button:hover{color:var(--ink);background:var(--surface-3)}.v4-cl-q em{font-style:normal;min-width:16px;height:16px;line-height:16px;border-radius:8px;background:var(--warn);color:#fff;font-size:10px;padding:0 4px}
.v4-cl-note{margin:0 10px 6px;font-size:12px}
.v4-req{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--accent) 5%,var(--surface))}
.v4-req>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.v4-req b{font:600 14px/19px var(--font)}
.popup .ft .v4-left,.v4-left{margin-right:auto}

/* ══ Giro 4 (18 ott): colonna 2, misure, colori v2, padding uniformi ══ */
/* misure: sidebar e colonna 2 uguali (216), colonna destra 300, così il contenuto respira a 1440 */
.v4{--w-side:216px;--w-c2:216px;--rcw:300px}
.v4 .v3-sb{width:var(--w-side)}
.v4.has-rc{--rc:316px}
.v4-rcol{width:var(--rcw)}
.v4-docked .v4-rcol{padding:16px 16px 24px 16px}
.v4-rcol-h{display:flex;justify-content:flex-end;height:28px;margin:-6px -6px 2px 0}
.v4-rcol-h .ibtn{width:28px;height:28px;color:var(--ink-3)}
.v4-rc-open{position:absolute;right:0;top:50%;transform:translateY(-50%);width:20px;height:56px;border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;background:var(--surface);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;z-index:5;padding:0}
.v4-rc-open:hover{color:var(--ink);width:24px}
.v4-rc-open.d{display:none}
@media (max-width:1279px){.v4-rc-open.d{display:grid}.v4-rcol-h{display:flex}}
.v4-body{position:relative}

/* colonna 2 */
.v4-c2{width:var(--w-c2);flex:none;display:flex;flex-direction:column;gap:2px;padding:16px 10px 16px;border-left:1px solid var(--line);overflow-y:auto;scrollbar-width:none;background:var(--bg);transition:width .28s cubic-bezier(.3,.8,.2,1)}
.v4-c2::-webkit-scrollbar{display:none}
.v4-c2-h{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 4px 0 12px;margin:0 0 6px}
.v4-c2-h b{font:600 16px/1 var(--font)}
.v4-c2-h .ibtn{width:30px;height:30px;color:var(--ink-3)}
.v4-c2-it{display:flex;align-items:center;gap:12px;height:38px;padding:0 12px;border-radius:var(--r-pill);color:var(--ink-2);font:500 14px/1 var(--font);text-decoration:none;flex:none;min-width:0}
.v4-c2-it:hover{background:var(--hover);color:var(--ink)}
.v4-c2-it[aria-current="page"]{background:var(--nav-on);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.v4-c2-it .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-c2-it .n{font:500 12px/1 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
.v4-c2-it .badge{margin-left:auto}
.v4-c2-g{display:flex;align-items:center;justify-content:space-between;font:var(--t-cap);color:var(--ink-3);padding:16px 12px 6px}
.v4-c2-g button{border:0;background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;width:22px;height:22px;border-radius:50%}
.v4-c2-g button:hover{background:var(--hover);color:var(--ink)}
.v4-c2-s{margin:0 2px 4px;height:36px}
.v4-c2-sep{display:block;height:1px;background:var(--line);margin:10px 8px}
.v4-c2.mini{width:60px;padding:16px 8px;align-items:center}
.v4-c2.mini .v4-c2-h{padding:0;justify-content:center}
.v4-c2.mini .v4-c2-it{width:44px;height:40px;padding:0;justify-content:center;position:relative}
.v4-c2.mini .lbl,.v4-c2.mini .n{display:none}
.v4-c2.mini .badge{position:absolute;top:0;right:0;margin:0}
.v4-subs,.v4-subw,.v4-nv-x{display:none!important}
@media (max-width:1000px){.v4-c2{display:none}.v4-mtabs{display:block}}

/* top bar uguale in Studio e Listen: ricerca sempre al centro */
.v4-tb{display:grid;grid-template-columns:1fr minmax(0,520px) 1fr;gap:12px}
.v4-tb .v4-search{margin:0;max-width:none;width:100%}
.v4-tb-r{justify-self:end}

/* colori come v2: azione principale e switch in tinta inchiostro (bianchi sullo scuro, neri sul chiaro) */
.v4{--nav-on:#FFFFFF;--sw-on:#FFFFFF;--sw-on-ink:var(--ink)}
:root[data-theme="dark"] .v4{--nav-on:#2A2A33;--sw-on:#F2F2F5;--sw-on-ink:#0B0B0E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v4{--nav-on:#2A2A33;--sw-on:#F2F2F5;--sw-on-ink:#0B0B0E}}
.v4 .btn.primary{background:var(--ink);color:var(--ink-inv)}
.v4 .btn.primary:hover{background:color-mix(in oklab,var(--ink) 84%,var(--bg))}
.v4 .btn.primary:disabled{background:var(--surface-3);color:var(--ink-3)}
.v4 .seg button[aria-pressed="true"],.v4 .tabs button[aria-selected="true"]{background:var(--sw-on);color:var(--sw-on-ink)}
.v4 .v3-nv[aria-current="page"],.v4-sub[aria-current="page"],.v4-set-it[aria-current="page"]{background:var(--nav-on)}
.v4 .v4-fb.on{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink-3)}.v4 .v4-fb.on .v,.v4 .v4-fb-x{color:var(--ink)}
.v4 .v4-qf.on{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.v4 .v4-file.me{background:var(--surface-2)}

/* account: stessa forma e hover delle voci della sidebar */
.v4 .v3-acct{border-radius:var(--r-pill);padding:6px 14px 6px 6px;min-height:48px}
.v4 .v3-acct:hover{background:var(--hover)}
.v4 .v3-sto{border-radius:16px}

/* padding uniformi: 24 a sinistra, 20 sopra per le pagine con titolo, 16 per i bento; 16 tra contenuto e colonna destra */
.v4-docked.has-rc .v4-page,.v4-docked.has-rc .v3-col{padding-right:8px}
.v4-docked .v4-cal-main{padding:16px 16px 16px 24px}
.v4-chats,.v4-set{padding:16px 0 16px 24px}
.v4-docked:not(.has-rc) .v4-chats,.v4-docked:not(.has-rc) .v4-set{padding-right:24px}
.v4-cal-top h1.t-title{font:var(--t-title)!important;letter-spacing:var(--track-tight)}
.v4-set-main{margin-right:0}
@media (max-width:700px){.v4-docked .v4-cal-main{padding:8px}.v4-chats,.v4-set{padding:0}}

/* CTA doppie: in Sends c'è già New send nella top bar */
.v4 #main:has([aria-label="Sent or received"]) .v3-head .acts .btn.primary{display:none}
/* tabella Catalog: si adatta alla larghezza del contenitore (colonne tolte in ordine di priorità) */
.v4-tbl{container-type:inline-size}
@container (max-width:860px){.v4-cat .v4-tr{grid-template-columns:32px minmax(180px,1fr) 60px 52px 80px minmax(120px,150px) 36px}.v4-cat .v4-tr>:nth-child(5),.v4-cat .v4-tr>:nth-child(8){display:none}}
@container (max-width:680px){.v4-cat .v4-tr{grid-template-columns:32px minmax(160px,1fr) 56px minmax(110px,140px) 36px}.v4-cat .v4-tr>:nth-child(3),.v4-cat .v4-tr>:nth-child(6){display:none}}
@container (max-width:480px){.v4-cat .v4-tr{grid-template-columns:minmax(0,1fr) minmax(100px,130px) 36px}.v4-cat .v4-tr>:nth-child(1),.v4-cat .v4-tr>:nth-child(4){display:none}}
@container (max-width:640px){.v4-val-t .v4-tr{grid-template-columns:minmax(150px,1fr) 56px 96px 96px}.v4-val-t .v4-tr>:nth-child(5){display:none}}
.v4-tool{flex-wrap:nowrap}
.v4-csearch{width:auto;flex:1 1 160px;min-width:120px;max-width:260px}
.v4-tool .v4-fbar{flex-wrap:nowrap}
@media (max-width:700px){.v4-tool{flex-wrap:wrap}}

/* titoli allineati: stessa altezza in ogni pagina (20px dall'header + riga da 44) */
.v4 .v3-head,.v4-ph{min-height:44px;align-items:center;margin-bottom:16px}
.v4-docked .v4-cal-main{padding-top:20px}
.v4-cal-top{min-height:44px;margin-bottom:12px}
.v4-retitle>.v3-col>.v3-head h1,.v4-retitle>.v3-col>.v3-head h1 *{font-size:0}
.v4-retitle>.v3-col>.v3-head h1::after{content:var(--rt);font:var(--t-title);letter-spacing:var(--track-tight)}
.v4-retitle>.v3-col>.v3-head h1{display:flex;align-items:center;height:38px;line-height:0}

/* sotto 1000px: tab delle sotto-sezioni (una sola riga per tutte le sezioni); quelle v3 dentro le pagine non servono più */
.v4-c2m{display:none}
.v4-mtabs{display:none!important}
@media (max-width:1000px){.v4-c2m{display:flex;margin:16px 24px 0;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}.v4-c2m button{white-space:nowrap}.v4 .v3-main:has(.v4-c2m) .v4-chats,.v4 .v3-main:has(.v4-cal){}}
@media (max-width:700px){.v4-c2m{margin:12px 16px 0}}
/* player stretto */
@media (max-width:1180px){.v4-pl{grid-template-columns:minmax(150px,200px) minmax(0,1fr) auto;gap:12px}.v4-pl-btns .ibtn[aria-label^="Shuffle"],.v4-pl-btns .ibtn[aria-label^="Repeat"]{display:none}.v4-pl-r .btn{display:none}}
@media (max-width:900px){.v4-pl-w .num{display:none}}
@media (max-width:1100px){.v4-sortb{font-size:0;gap:0}.v4-sortb .ic{font-size:initial}}
.v4 .v3-main:has(.v4-cal),.v4 .v3-main:has(.v4-chats),.v4 .v3-main:has(.v4-set){display:flex;flex-direction:column}
.v4 .v3-main>.v4-cal,.v4 .v3-main>.v4-chats,.v4 .v3-main>.v4-set{flex:1;min-height:0;height:auto}

/* ── commenti sull'artifact (18 ott) ── */
/* link del profilo sempre visibile e copiabile */
.v4-acct{position:relative}
.v4-acct-link{position:absolute;left:52px;bottom:7px;display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 84px);height:20px;padding:0 6px;margin-left:-6px;border:0;border-radius:6px;background:transparent;color:var(--ink-3);font:500 12px/1 var(--font);cursor:pointer}
.v4-acct-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-acct-link:hover{background:var(--hover);color:var(--ink)}
.v4-mini .v4-acct-link{display:none}
/* intestazioni allineate: logo della sidebar e titolo della colonna 2 sulla stessa riga, pulsanti di chiusura alla stessa altezza */
.v4 .v4-logo{height:40px;margin:0 0 10px;padding:0 4px 0 12px}
.v4-c2-h{height:40px;margin:0 0 10px;padding:0 4px 0 12px}
.v4-c2-h .ibtn,.v4-logo .ibtn{width:32px;height:32px;display:inline-grid;place-items:center}
.v4-c2.mini .v4-c2-h{padding:0}
/* colonna destra più stretta e riapertura ben visibile */
.v4{--rcw:280px}
.v4.has-rc{--rc:296px}
.v4-rc-open{top:16px;transform:none;right:16px;width:auto;height:32px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;font:500 13px/1 var(--font);box-shadow:var(--sh-2)}
.v4-rc-open::after{content:"Show panel"}
.v4-rc-open:hover{width:auto;color:var(--ink);border-color:var(--line-strong)}
.v4 .v3-acct>div{flex:1;min-width:0}
.v4-acct-link{max-width:calc(100% - 64px)}
.v4-rc-open{top:20px;right:16px}
/* riapertura: linguetta compatta sul bordo destro, all'altezza del titolo; la pagina le lascia spazio */
.v4-rc-open{top:22px;right:0;width:40px;height:40px;padding:0 0 0 4px;border-radius:var(--r-pill) 0 0 var(--r-pill);border-right:0;justify-content:center;color:var(--ink)}
.v4-rc-open::after{content:none}
.v4-rc-open:hover{width:44px;background:var(--hover)}
@media (min-width:1280px){.v4.rc-closed .v4-page,.v4.rc-closed .v3-col{padding-right:56px}.v4.rc-closed .v4-chats,.v4.rc-closed .v4-set{padding-right:56px}}
.v4-acct-link{max-width:calc(100% - 50px);font-size:11.5px;gap:4px}.v4 .v3-acct{padding-right:10px}
/* player: shuffle e ripeti sempre visibili (riferimento SoundCloud); sugli schermi stretti si tolgono prima i tempi */
@media (max-width:1180px){.v4-pl-btns .ibtn[aria-label^="Shuffle"],.v4-pl-btns .ibtn[aria-label^="Repeat"]{display:inline-grid}.v4-pl-w .num{display:none}}
@media (max-width:900px){.v4-pl-btns .ibtn[aria-label^="Shuffle"]{display:none}}
.v4-acct-link .ic{opacity:0;transition:opacity .15s}.v4-acct-link:hover .ic,.v4-acct-link:focus-visible .ic{opacity:1}
/* menu account */
.v4-acct-pop{position:absolute;left:0;bottom:calc(100% + 8px);width:280px;max-height:calc(100vh - 120px);overflow-y:auto;z-index:60;box-shadow:var(--sh-2)}
.v4-ap-who{display:flex;gap:10px;align-items:center;padding:8px 10px 6px}
.v4-ap-who>div{min-width:0;display:flex;flex-direction:column;gap:2px}.v4-ap-who b{font:600 14px/18px var(--font)}.v4-ap-who span{font:var(--t-sub);font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-ap-cap{font:var(--t-cap);color:var(--ink-3);padding:6px 12px 4px}
.v4-acct-pop button .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.v4-acct-pop button .tx b{font:500 14px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-acct-pop button .tx em{font-style:normal;font:var(--t-sub);font-size:12px;color:var(--ink-3)}
.v4-acct-pop button{min-height:44px}
.v4-ap-av{width:28px;height:28px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;font:700 12px/1 var(--font);flex:none}
.v4-acct-pop [aria-checked="true"] .v4-ap-av{background:var(--ink);color:var(--ink-inv)}
.v4-ap-theme{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 12px;font:500 14px/1 var(--font)}
.v4-ap-theme .seg button{min-height:0;height:28px;width:36px;padding:0;justify-content:center}
.v4-acct-pop{position:fixed}
/* icone centrate in colonna: avatar sullo stesso asse delle icone; sidebar compatta tutto al centro */
.v4 .v3-acct{padding-left:8px}
.v4-mini .v4-logo{height:auto;padding:0;align-items:center;justify-content:center}
.v4-mini .v3-acct{justify-content:center;padding:6px;width:48px;min-height:48px}
.v4-mini .v3-acct>.ic{display:none}
.v4-mini .v4-acct{display:flex;justify-content:center;width:100%}
.v4-mini .v3-foot{align-items:center}
/* sotto 1000px la sidebar è a icone: larghezza 76 e tutto centrato sullo stesso asse (come ⌘\) */
@media (max-width:1000px) and (min-width:701px){
  .v4{--w-side:76px}
  .v4 .v3-sb{width:76px;padding:16px 12px;align-items:center}
  .v4 .v4-logo{height:auto;padding:0;margin:0 0 12px;flex-direction:column;gap:8px;align-items:center;justify-content:center}
  .v4 .v4-logo .ibtn{opacity:1}
  .v4 .v3-nv{width:48px;height:44px;justify-content:center;padding:0!important}
  .v4 .v3-foot{align-items:center;width:100%}
  .v4 .v4-acct{display:flex;justify-content:center;width:100%}
  .v4 .v3-acct{justify-content:center;padding:6px;width:48px;min-height:48px}
  .v4 .v3-acct>.ic,.v4 .v4-acct-link{display:none}
}
.v4-mini .v4-logo{flex-direction:column;gap:8px;margin:0 0 12px}
.v4-mini .v3-acct>span:last-child{display:none}
@media (max-width:1000px) and (min-width:701px){.v4 .v3-acct>span:last-child{display:none}}
.v4-mini .v3-acct>span:last-child{display:none!important}
@media (max-width:1000px) and (min-width:701px){.v4 .v3-acct>span:last-child{display:none!important}}
.v4.v4-mini{--w-side:76px}.v4.v4-mini .v3-sb{width:76px}
/* link del profilo: niente icona, all'hover il testo diventa "Copy" */
.v4-acct-link .c{display:none}
.v4-acct-link:hover .u,.v4-acct-link:focus-visible .u{display:none}
.v4-acct-link:hover .c,.v4-acct-link:focus-visible .c{display:inline;color:var(--ink)}
/* account: niente freccia accanto al nome (il menu si apre col clic su tutta la riga) */
.v4 .v3-acct>span:last-child{display:none!important}
/* link del profilo: icona link piccola che compare all'hover; l'hover cambia solo il colore, niente sfondo che tocchi il nome */
.v4-acct-link{height:16px;bottom:9px;padding:0;margin-left:0;background:transparent!important;gap:4px}
.v4-acct-link .u{display:inline!important}
.v4-acct-link .ic{width:11px;height:11px;opacity:0;transition:opacity .15s}
.v4-acct-link:hover,.v4-acct-link:focus-visible{color:var(--ink)}
.v4-acct-link:hover .ic,.v4-acct-link:focus-visible .ic{opacity:1}
/* colonna 2 sotto la top bar (come v2), righe allineate alla sidebar */
.v4-row{flex:1;min-height:0;display:flex}
.v4-row>.v4-body{flex:1;min-width:0}
.v4-c2{border-left:0;padding-top:0}
.v4-c2{padding-top:8px;gap:4px}
.v4-c2-h{margin:0 0 8px}
.v4-c2-it{height:42px;flex:none}
.v4-c2.mini .v4-c2-it{height:42px}
/* logo della sidebar sulla stessa riga della top bar (centro a 30px, come v2); testo sul bordo delle icone, pulsante sul bordo destro delle pillole */
.v4 .v3-sb{padding-top:10px}
.v4 .v4-logo{padding:0 0 0 14px;margin:0 0 10px}
.v4-c2{padding-top:2px}
/* riga Studio/Listen + pulsante sidebar (v2: sd-mrow); logo solo, sulla riga della top bar */
.v4-mrow{display:flex;align-items:center;gap:6px;margin:0 0 10px;flex:none}
.v4-mrow .seg{flex:1;margin:0!important;min-width:0}
.v4-mrow .ibtn{width:36px;height:36px;flex:none;color:var(--ink-3)}
.v4-mrow .ibtn:hover{color:var(--ink)}
.v4 .v4-logo{display:flex;align-items:center;justify-content:flex-start;height:40px}
/* sidebar chiusa: logo e pulsante centrati, uno sotto l'altro, sulle stesse righe di prima */
.v4-mini .v4-logo{justify-content:center;padding:0;margin:0 0 10px;height:40px;flex-direction:row}
.v4-mini .v4-mrow{justify-content:center;width:100%;height:36px}
.v4-mini .v4-mrow .ibtn{color:var(--ink)}
@media (max-width:1000px) and (min-width:701px){.v4 .v4-logo{justify-content:center;padding:0;flex-direction:row;height:40px;margin:0 0 10px}.v4 .v4-mrow{display:none}}
.v4-mini .v3-nv,.v4.v4-mini .v3-nv{height:42px}
/* sidebar chiusa: il logo resta intero "rwyrd" (non solo "r") */
.v4-mini .v4-logo,.v4.v4-mini .v4-logo{font:900 21px/1 var(--font)!important;letter-spacing:-.035em}
.v4-mini .v4-logo::before{content:none!important}
@media (max-width:1000px) and (min-width:701px){.v4 .v4-logo{font:900 21px/1 var(--font)!important;letter-spacing:-.035em}.v4 .v4-logo::before{content:none!important}}
/* ══ animazione apri/chiudi colonne (giro 5) ══
   colonna 1 e colonna 2: stessa animazione di larghezza; le voci si muovono SOLO in orizzontale (stesse altezze da aperte e chiuse);
   le etichette non escono dalla colonna mentre si allarga (niente sbavature sul contenuto). */
.v4 .v3-sb{transition:width .28s cubic-bezier(.3,.8,.2,1),padding .28s cubic-bezier(.3,.8,.2,1);overflow-x:hidden;white-space:nowrap}
.v4-c2{overflow-x:hidden;white-space:nowrap}
.v4-c2.mini{padding-top:2px}
.v4-c2-g{height:40px;box-sizing:border-box;padding:0 12px 6px;align-items:flex-end;flex:none}
.v4-c2-g span{overflow:hidden;text-overflow:ellipsis}
.v4-c2.mini .v4-c2-g{padding:0;justify-content:center;align-items:center}
.v4-c2.mini .v4-c2-g span,.v4-c2.mini .v4-c2-g button{display:none}
.v4-c2.mini .v4-c2-g::after{content:"";width:24px;height:1px;background:var(--line)}
.v4-c2.mini .v4-c2-s{display:none}
.v4-c2 .lbl,.v4-c2-h b,.v3-sb .lbl{transition:opacity .2s ease}
.v4 .v3-nv,.v4-c2-it{overflow:hidden}
/* griglie di card a misura fissa (regola universale, 18 ott): la card non si allarga col contenitore;
   quando lo spazio cresce (colonna che si chiude) compare una card in più a fine riga, senza ridimensionare le altre. */
.v4-grid{grid-template-columns:repeat(auto-fill,184px);justify-content:start}
.v4-disc{grid-template-columns:repeat(auto-fill,208px);justify-content:start}
@media (max-width:700px){.v4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-disc{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* badge delle voci mai nascosto: si taglia solo l'etichetta, il badge resta sempre intero (anche durante l'animazione) */
.v4 .v3-nv,.v4-c2-it{overflow:visible}
.v4 .v3-sb .v3-nv .lbl,.v4-c2-it .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.v4 .v3-sb .v3-nv .badge,.v4-c2-it .badge{flex:none}
.v4-mini .v3-nv .lbl{display:none}
/* logo fisso: stessa posizione con colonna 1 aperta o chiusa (non segue l'animazione); la riga resta nel flusso per tenere gli allineamenti */
.v4 .v4-logo{position:relative}
.v4-logo-t{position:fixed;left:28px;top:10px;height:40px;display:flex;align-items:center;z-index:31;font:900 21px/1 var(--font);letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
/* Chats: maniglia per allargare la lista */
.v4-chats{gap:0}
.v4-cl-split{flex:none;width:16px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;position:relative;outline:none;touch-action:none}
.v4-cl-split i{width:2px;height:100%;border-radius:1px;background:transparent;transition:background .15s}
.v4-cl-split:hover i,.v4-cl-split:focus-visible i,.v4-resizing .v4-cl-split i{background:var(--line-strong)}
.v4-cl-split::after{content:"";position:absolute;top:50%;left:50%;width:4px;height:32px;margin:-16px 0 0 -2px;border-radius:2px;background:var(--line-strong);opacity:0;transition:opacity .15s}
.v4-cl-split:hover::after,.v4-cl-split:focus-visible::after{opacity:1}
body.v4-resizing{cursor:col-resize;user-select:none}
.v4-clist{flex:none}
@media (max-width:700px){.v4-cl-split{display:none}.v4-clist{width:auto!important}}
/* maniglia trovabile su tutta l'altezza: area attiva larga 24px (anche oltre il bordo dei bento), linea a tutta altezza all'hover */
.v4-cl-split{z-index:3}
.v4-cl-split::before{content:"";position:absolute;top:0;bottom:0;left:-4px;right:-4px}
.v4-cl-split i{position:relative;z-index:1}
.v4-cl-split:hover i,.v4-cl-split:focus-visible i,.v4-resizing .v4-cl-split i{background:var(--accent)}
/* apertura della colonna 1 senza scatti: con la colonna aperta il contenuto ha subito la larghezza finale (188 = 216 − 28)
   e la colonna lo "scopre" mentre si allarga, invece di ricomporlo (testi che vanno a capo, card che cambiano altezza alla fine). */
.v4:not(.v4-mini) .v3-sb .v3-nv,.v4:not(.v4-mini) .v3-sb .v4-mrow,.v4:not(.v4-mini) .v3-sb .v3-sto,.v4:not(.v4-mini) .v3-sb .v4-acct,.v4:not(.v4-mini) .v3-sb .v3-grp{min-width:188px;flex-shrink:0}
.v4 .v3-sb .v3-sto{white-space:normal}
.v4-mini .v3-sb,.v4.v4-mini .v3-sb{padding-left:14px;padding-right:14px}
@media (max-width:1000px) and (min-width:701px){.v4:not(.v4-mini) .v3-sb .v3-nv,.v4:not(.v4-mini) .v3-sb .v4-mrow,.v4:not(.v4-mini) .v3-sb .v3-sto,.v4:not(.v4-mini) .v3-sb .v4-acct,.v4:not(.v4-mini) .v3-sb .v3-grp{min-width:0}}
.v4.v4-mini .v3-sb{padding-top:10px;padding-bottom:12px}
/* v28 · maniglia Chats morbida: linea arrotondata, neutra, alta quanto i bento (senza presa centrale) */
.v4-cl-split i{width:4px;border-radius:999px;background:transparent;transition:background .2s ease,opacity .2s ease}
.v4-cl-split:hover i,.v4-cl-split:focus-visible i,.v4-resizing .v4-cl-split i{background:var(--line-strong)}
.v4-resizing .v4-cl-split i{background:var(--ink-3)}
.v4-cl-split::after{display:none}
/* v28 · margine a destra dei bento sempre: la linguetta della colonna destra non copre mai il bento (anche sotto 1280) */
@media (min-width:701px){.v4.rc-closed .v4-page,.v4.rc-closed .v3-col,.v4.rc-closed .v4-chats,.v4.rc-closed .v4-set{padding-right:56px}}
@media (min-width:701px) and (max-width:1279px){.v4-docked.has-rc .v4-page,.v4-docked.has-rc .v3-col,.v4-docked.has-rc .v4-chats,.v4-docked.has-rc .v4-set{padding-right:56px}}
/* ── v29 · player: padding allineato al contenuto (24), waveform nuova, lato destro Coda · Volume · Apri ── */
.v4-pl{padding:0 16px 0 24px;gap:24px;grid-template-columns:minmax(200px,264px) minmax(0,1fr) auto}
.v4-pl-m{padding:4px 8px 4px 4px;margin:-4px}
.v4-pl-c{gap:20px}
.v4-pl-w{gap:12px}
.v4-pl-w .num{font:500 11.5px/1 var(--font);color:var(--ink-3);width:32px;font-variant-numeric:tabular-nums}
.v4-plw{position:relative;flex:1;min-width:0;height:36px;display:flex;align-items:stretch;gap:2px;cursor:pointer;outline:none;border-radius:6px}
.v4-plw:focus-visible{box-shadow:0 0 0 2px var(--focus)}
.v4-plw i{flex:1;min-width:1px;position:relative}
.v4-plw i::before,.v4-plw i::after{content:"";position:absolute;left:0;right:0;border-radius:1px;background:var(--line-strong);transition:background .12s}
.v4-plw i::before{bottom:34%;height:calc(var(--h) * .66)}
.v4-plw i::after{top:calc(66% + 1px);height:calc(var(--h) * .3);opacity:.45}
.v4-plw i.pv::before,.v4-plw i.pv::after{background:var(--ink-3)}
.v4-plw i.on::before,.v4-plw i.on::after{background:var(--accent,var(--blue))}
.v4-plw-head{position:absolute;top:2px;bottom:2px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);opacity:0;transition:opacity .15s;pointer-events:none}
.v4-plw:hover .v4-plw-head,.v4-plw:focus-visible .v4-plw-head{opacity:1}
.v4-plw-tip{position:absolute;bottom:calc(100% + 1px);transform:translateX(-50%);padding:3px 7px;border-radius:var(--r-pill);background:var(--ink);color:var(--ink-inv);font:600 11px/1.2 var(--font);white-space:nowrap;pointer-events:none}
.v4-pl-r{gap:2px}
.v4-pl-r .ibtn{width:32px;height:32px}
.v4-pl-r .ibtn[aria-pressed="true"]{color:var(--ink);background:var(--hover)}
.v4-vol{display:flex;align-items:center}
.v4-vol input{width:0;opacity:0;margin:0;transition:width .2s var(--ease,ease),opacity .2s,margin .2s;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(to right,var(--ink) var(--v),var(--line-strong) var(--v));cursor:pointer}
.v4-vol:hover input,.v4-vol:focus-within input{width:84px;opacity:1;margin:0 8px 0 2px}
.v4-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink);border:0}
.v4-vol input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:0}
@media (max-width:1180px){.v4-vol{display:none}}
@media (max-width:700px){.v4-pl{padding:0 8px;gap:8px}}
/* interruttore della proposta in Settings › Prototype switches */
.v4-plsw{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding:16px 20px}
.v4-plsw>div:first-child{display:flex;flex-direction:column;gap:2px}
/* Proposta B · Pill: niente linea, il player è una pillola sullo sfondo, allineata ai bordi del contenuto */
.pl-pill .v4-pl{border-top:0;margin:0 16px 12px 24px;height:64px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);padding:0 12px 0 10px}
.pl-pill .v4-pl-m{border-radius:var(--r-pill)}
.pl-pill .v4-pl-m .art{border-radius:50%}
/* Proposta C · Bento: sidebar, top bar e player sullo sfondo; l area di lavoro sta in un pannello arrotondato */
.pl-bento .v4-pl{border-top:0}
.pl-bento .v4-docked .v4-row{margin:0 12px 0 0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface-2);overflow:hidden}
.pl-bento .v4-docked .v4-c2{background:transparent}
/* ── v31 · proposta player esteso (rw4-np="v5"): pannello di lavoro flottante, alto fino al player, scorre dentro ── */
.v4-rcol.np:has(.v5np){display:flex;flex-direction:column;overflow:hidden;padding-bottom:16px}
.v5np{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.v5np-h{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:start;padding:16px 10px 0 16px}
.v5np-h .art{border-radius:8px}
.v5np-ti{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:4px}
.v5np-ti a,.v5np-ti b{font:700 16px/20px var(--font);color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.v5np-ti a:hover{text-decoration:underline;text-underline-offset:3px}
.v5np-ti .t-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.v5np-facts{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0}
.v5np-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--ink-2);font:500 12px/1 var(--font);white-space:nowrap}
.v5np-chip.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
button.v5np-chip{cursor:pointer;color:var(--ink)}button.v5np-chip:hover{background:var(--hover)}
.v5np-facts .pill{height:24px}
.v5np-act{display:flex;align-items:center;gap:4px;padding:12px 10px 0 16px}
.v5np-act .btn{flex:none}
.v5np-who{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:500 12.5px/1 var(--font);cursor:pointer}
.v5np-who span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v5np-who:hover:not(:disabled){background:var(--hover);color:var(--ink)}.v5np-who:disabled{cursor:default}
.v5np-tabs{display:flex;gap:18px;padding:14px 16px 0;border-bottom:1px solid var(--line)}
.v5np-tabs button{position:relative;border:0;background:transparent;padding:0 0 10px;color:var(--ink-3);font:600 13px/1 var(--font);cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.v5np-tabs button em{font-style:normal;font-weight:500;color:var(--ink-3)}
.v5np-tabs button[aria-selected="true"]{color:var(--ink)}
.v5np-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--ink)}
.v5np-body{flex:1;min-height:0;overflow:auto;padding:8px 8px 12px;display:flex;flex-direction:column;gap:2px}
.v5np-body .row.sm{margin:0;width:100%}
.v5np-body .v4-lyr{padding:4px 8px}
.v5np-n{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:start;text-align:left;border:0;background:transparent;padding:8px;border-radius:12px;cursor:pointer;color:var(--ink)}
.v5np-n:hover{background:var(--hover)}
.v5np-n.on{background:var(--selected)}
.v5np-t{display:inline-grid;place-items:center;height:22px;padding:0 6px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font:600 11.5px/1 var(--font);font-variant-numeric:tabular-nums}
.v5np-nb{display:flex;flex-direction:column;gap:4px;min-width:0}
.v5np-nh{display:flex;align-items:center;gap:6px;font-size:12.5px}.v5np-nh b{font-weight:600}.v5np-nh .t-sub{font-size:12px}
.v5np-n .tx{font:400 13.5px/19px var(--font);color:var(--ink);overflow-wrap:anywhere}
.v5np-empty{display:flex;flex-direction:column;gap:4px;padding:16px 8px}
.v5np-in{display:flex;align-items:center;gap:8px;margin:0 12px 12px;padding:6px 6px 6px 8px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg)}
.v5np-in:focus-within{border-color:var(--line-strong)}
.v5np-in input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 13.5px/1 var(--font);outline:none}
.v5np-send{flex:none;width:28px;height:28px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--ink);color:var(--ink-inv);cursor:pointer}
.v5np-send:disabled{background:var(--surface-3);color:var(--ink-3);cursor:default}
@media (max-width:1279px){.v4-rcol.np:has(.v5np){padding:12px}}
.v5np-facts{align-items:center}
.v5np-meta{padding:8px 16px 0;font:500 12px/16px var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
.v5np-who{flex:none;margin:8px 8px 0;justify-content:flex-start;width:calc(100% - 16px)}
.v5np-who span:nth-child(2){flex:1;text-align:left}
.v5np-act{padding:10px 10px 0 16px}.v5np-act .btn{flex:1}
/* v33 · Bento predefinito; su mobile niente pannello (schermo pieno) */
@media (max-width:700px){.pl-bento .v4-docked .v4-row{margin:0;border:0;border-radius:0;background:transparent}}
/* v34 · Bento coerente: area di lavoro e player sono due pannelli uguali (stesso fondo, bordo, raggio 24, 8px tra loro);
   fondo del pannello tra lo sfondo e le card, così le card restano "sopra"; linguetta colonna destra = pulsante tondo dentro il pannello */
.pl-bento .v4-docked .v4-row{background:color-mix(in srgb,var(--bg) 55%,var(--surface));margin:0 12px 0 0}
@media (min-width:701px){.pl-bento .v4-docked .v4-rc-open{right:12px;border-right:1px solid var(--line);border-radius:var(--r-pill);width:36px;height:36px;padding:0;top:18px}.pl-bento .v4-docked .v4-rc-open:hover{width:36px}}
@media (min-width:701px){.pl-bento .v4.rc-closed .v4-page,.pl-bento .v4.rc-closed .v3-col,.pl-bento .v4.rc-closed .v4-chats,.pl-bento .v4.rc-closed .v4-set{padding-right:64px}}
@media (min-width:701px) and (max-width:1279px){.pl-bento .v4-docked.has-rc .v4-page,.pl-bento .v4-docked.has-rc .v3-col,.pl-bento .v4-docked.has-rc .v4-chats,.pl-bento .v4-docked.has-rc .v4-set{padding-right:64px}}
/* v35 · player esteso nello stile dei box della colonna destra: stesso box (.v4-box), titolo "Now playing" come "Coming up",
   padding 16 uniforme, switch a pillola come gli altri, solo forme a pillola o raggio dei box (niente linee dritte o angoli da 6) */
.v5np{background:var(--surface);border:1px solid var(--card-border);box-shadow:var(--sh-1);border-radius:var(--r-lg);padding:16px}
.v5np-cap{margin:-4px -6px 12px 0!important}
.v5np-h{padding:0;grid-template-columns:56px minmax(0,1fr)}
.v5np-facts{padding:12px 0 0}
.v5np-meta{padding:8px 0 0}
.v5np-who{margin:8px -8px 0;width:calc(100% + 16px)}
.v5np-act{padding:10px 0 0}
.v5np-tabs{margin-top:14px;padding:3px;border-bottom:0;gap:0}
.v5np-tabs button em{font-style:normal;margin-left:5px;opacity:.6}
.v5np-body{padding:10px 0 0;margin:0 -8px}
.v5np-t{border-radius:var(--r-pill);padding:0 8px}
.v5np-in{margin:10px 0 0}
/* v36 · switch Notes · Lyrics · Queue: misure dello switch principale (padding 4, gap 4, voci 32), tre voci larghe uguali, testo centrato */
.v5np-tabs{padding:4px;gap:4px}
.v5np-tabs button{flex:1 1 0;min-width:0;height:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.v5np-tabs button em{margin-left:0}
/* v36 · niente card dentro un rettangolo: sotto 1280 (cassetto) il player esteso galleggia da solo come card arrotondata (TIDAL),
   il cassetto non ha più fondo né ombra; il cassetto del riepilogo diventa un pannello arrotondato staccato dai bordi */
@media (max-width:1279px) and (min-width:701px){
  .v4-docked .v4-rcol.open.np{background:transparent;box-shadow:none;padding:8px 12px 12px;pointer-events:none}
  .v4-docked .v4-rcol.open.np>*{pointer-events:auto}
  .v4-docked .v4-rcol.open.np .v5np{box-shadow:var(--sh-3)}
  .v4-docked .v4-rcol.open:not(.np){top:68px;right:12px;bottom:84px;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface-2)}
}
/* v37 · player esteso: la card sta dentro il pannello di lavoro (12px dai suoi bordi), non sopra il suo bordo; ombra morbida;
   chip della versione uguale alla pillola di stato; riga "chi l'ha" allineata al testo con icona */
@media (max-width:1279px) and (min-width:701px){
  .v4-docked .v4-rcol.open.np{padding:12px 24px 12px 12px}
  .v4-docked .v4-rcol.open.np .v5np{box-shadow:var(--sh-2)}
}
button.v5np-chip,.v5np-chip{border:0;background:var(--surface-2);height:24px}
button.v5np-chip:hover{background:var(--hover)}
.v5np-who{margin:8px 0 0;width:100%;padding:0;height:24px;gap:8px;background:transparent!important}
.v5np-who:hover:not(:disabled) span{text-decoration:underline;text-underline-offset:3px}
.v5np-who .ic{color:var(--ink-3)}
/* v37 · niente ombra sul player esteso, in nessuna larghezza: solo bordo 1px (regola v4: bordi al posto delle ombre) */
.v5np,.v4-docked .v4-rcol.open.np .v5np{box-shadow:none!important;border:1px solid var(--line)}
@media (max-width:1279px) and (min-width:701px){.v4-docked .v4-rcol.open:not(.np){box-shadow:none}}
/* v38 · note come thread leggeri (Descript / Frame.io): Reply · reazione · Resolve sotto ogni nota (visibili all hover e sulla nota attiva),
   risposte annidate sotto la nota (oltre 2: "N earlier replies"), reazioni come in Chats, note risolte nascoste con "Show resolved (n)" */
.v5np-n{grid-template-columns:44px minmax(0,1fr)}
.v5np-n.done{opacity:.6}.v5np-n.done:hover{opacity:1}
.v5np-n.rep{background:var(--selected)}
.v5np-ok{display:inline-flex;align-items:center;gap:3px;margin-left:auto;color:var(--ok);font:500 11.5px/1 var(--font)}
.v5np-n .v3-rx{margin-top:2px;flex-wrap:wrap}
.v5np-rs{display:flex;flex-direction:column;gap:8px;margin-top:4px;padding-left:10px;border-left:2px solid var(--line)}
.v5np-r{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start}
.v5np-rb{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12.5px}.v5np-rb b{font-weight:600}.v5np-rb .t-sub{font-size:12px}
.v5np-rb .tx{font:400 13px/18px var(--font)}
.v5np-more{align-self:flex-start;border:0;background:transparent;padding:0;color:var(--ink-2);font:500 12px/1.4 var(--font);cursor:pointer}.v5np-more:hover{color:var(--ink);text-decoration:underline}
.v5np-acts{display:flex;align-items:center;gap:2px;margin:2px 0 0 -6px;height:0;opacity:0;overflow:hidden;transition:opacity .15s}
.v5np-n:hover .v5np-acts,.v5np-n:focus-within .v5np-acts,.v5np-n.on .v5np-acts,.v5np-n.rep .v5np-acts{height:26px;opacity:1;overflow:visible}
@media (hover:none){.v5np-acts{height:26px;opacity:1;overflow:visible}}
.v5np-acts button{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:500 12px/1 var(--font);cursor:pointer}
.v5np-acts button:hover{background:var(--hover);color:var(--ink)}
.v5np-rxw{position:relative;display:inline-flex}
.v5np-rxw .v3-rxpk{top:calc(100% + 4px);left:-40px;max-width:240px}
.v5np-showdone{align-self:center;margin:8px 0 4px;border:0;background:transparent;color:var(--ink-2);font:500 12.5px/1 var(--font);padding:8px 12px;border-radius:var(--r-pill);cursor:pointer}.v5np-showdone:hover{background:var(--hover);color:var(--ink)}
.v5np-repto{display:flex;align-items:center;gap:6px;margin:10px 4px -4px 12px;font:500 12.5px/1 var(--font);color:var(--ink-2)}
.v5np-repto span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v5np-repto b{color:var(--ink)}
.v5np-repto .ibtn{width:24px;height:24px}
.v5np-nh{white-space:nowrap;min-width:0}.v5np-nh b{overflow:hidden;text-overflow:ellipsis}
/* v39 · padding note e risposte: avatar alle misure dichiarate (20 nota, 18 risposta), righe allineate, 8px tra avatar e nome */
.v5np-nh{height:20px;gap:8px}
.v5np-nh .av{width:20px;height:20px;min-width:20px;font-size:9.5px;flex:none}
.v5np-r{grid-template-columns:18px minmax(0,1fr);gap:8px}
.v5np-r .av{width:18px;height:18px;min-width:18px;font-size:9px;margin-top:1px}
.v5np-rb>span:first-child{display:flex;align-items:baseline;gap:6px;line-height:20px}
.v5np-rs{padding-left:12px;margin-top:6px;gap:10px}
.v5np-nb{gap:6px}
.v5np-n .v3-rx{margin-top:0}
/* ── v40 · spazio traccia (track4.jsx): navigazione in colonna 2, header leggero, Overview, Notes, Properties ── */
.v4-c2-h.obj{gap:4px}
.v4-c2-h.obj b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-c2-h.obj .ibtn:first-child{margin-left:-6px}
.v4-c2-dot{width:8px;height:8px;border-radius:50%;background:var(--warn);margin-left:auto;flex:none}
.v4-track{gap:0}
.v4-th{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;min-height:72px;margin:0 0 20px}
.v4-th-art{position:relative;width:72px;height:72px;padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;background:none}
.v4-th-art .art{border-radius:8px}
.v4-th-art .pl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.32);color:#fff;opacity:0;transition:opacity .15s}
.v4-th-art:hover .pl,.v4-th-art:focus-visible .pl,.v4-th-art.on .pl{opacity:1}
.v4-th-m{display:flex;flex-direction:column;gap:6px;min-width:0}
.v4-th-m h1{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-th-sub{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font:var(--t-sub);color:var(--ink-2)}
.v4-th-a{display:flex;align-items:center;gap:8px}
.v4-tsec{font:var(--t-h3);margin:4px 4px 12px}
.v4-tov>.group:first-child{margin-bottom:4px}
.v4-tnotes{padding:8px 12px 12px;display:flex;flex-direction:column}
.v4-tnotes .v5np-body.big{margin:0 -4px;overflow:visible}
.v4-tnotes .v5np-in{margin-top:12px}
@media (max-width:700px){.v4-th{grid-template-columns:56px minmax(0,1fr);gap:12px}.v4-th-art{width:56px;height:56px}.v4-th-a{grid-column:1/-1}.v4-th-a .btn{flex:1}}
@media (max-width:700px){.v4.has-rc .v4-c2m,.v4.rc-closed .v4-c2m{margin-right:44px}}
/* v41 · regola universale waveform = stile del player (U.Wave in ui4.jsx) */
.v4-wave.ro{cursor:default}
.v4-plw i.stop::before,.v4-plw i.stop::after{background:var(--warn)}
/* ── v42 · traccia a bento (Revolut): griglia a 3 colonne, 12px tra i bento, padding 16/18 come le KPI della Home ── */
.v4-tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.v4-tgrid .s2{grid-column:span 2}.v4-tgrid .s3{grid-column:1/-1}
.v4-bx{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);align-self:stretch}
.v4-bx-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.v4-bx-h h3{margin:0;font:600 14px/20px var(--font)}
.v4-bx-meta{margin-top:-6px}
.v4-bx-empty{margin:0;font-size:13px;line-height:18px}
.v4-tk{padding:14px 16px;gap:4px}.v4-tk b{font:700 28px/32px var(--font)}.v4-tk .t-sub .pill{margin-top:2px}
.v4-tnext{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.v4-tnext .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.v4-tnext b{font:600 14px/18px var(--font)}
.v4-tmsg,.v4-tlog,.v4-tlis{display:flex;align-items:center;gap:10px;width:calc(100% + 16px);margin:0 -8px;padding:6px 8px;border:0;border-radius:12px;background:transparent;text-align:left;color:var(--ink);cursor:pointer;min-width:0}
.v4-tmsg:hover,.v4-tlog:hover,.v4-tlis:hover{background:var(--hover)}
.v4-tmsg .tx,.v4-tlis .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.v4-tmsg .b{font:400 13.5px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-tlog{flex-direction:column;align-items:flex-start;gap:1px}.v4-tlog b{font:500 13px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.v4-tlis b{font:500 13.5px/18px var(--font)}
.v4-tlis .bar{width:96px;height:4px;border-radius:2px;background:var(--line-strong);overflow:hidden;flex:none}.v4-tlis .bar i{display:block;height:100%;background:var(--accent)}
.v4-tlis .num{width:36px;text-align:right}
.v4-ttiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.v4-ttile{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--surface-2);min-width:0}
.v4-ttile b{font:600 14px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-tfields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v4-conv-tl{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none}.v4-conv-tl:hover{text-decoration:underline;text-underline-offset:3px}.v4-conv-tl .ic{color:var(--ink-3)}
.v4-th{margin-bottom:16px}.v4-tsec{margin:0 2px 12px}
@media (max-width:1100px){.v4-ttiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.v4-tgrid{grid-template-columns:1fr}.v4-tgrid .s2,.v4-tgrid .s3{grid-column:auto}.v4-tfields{grid-template-columns:1fr}}
@media (max-width:900px){.v4-tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.v4-tgrid>:not(.v4-tk){grid-column:1/-1}
  .v4-tk{padding:10px 12px}.v4-tk b{font-size:22px;line-height:26px}.v4-tk .t-cap{font-size:11.5px}.v4-tk .t-sub{font-size:11.5px;white-space:normal;line-height:15px}}
/* v43 · chat della traccia nella colonna destra: la stessa conversazione di Chats (sotto-canali, file, comandi /), resta aperta cambiando sezione */
.v4-rcol:has(.v4-tchat){display:flex;flex-direction:column;overflow:hidden;padding-bottom:16px}
.v4-tchat{flex:1;min-height:0;display:flex}
.v4-conv.dock{flex:1;min-height:0;height:auto;width:100%;border-radius:var(--r-lg)}
.v4-conv-h.dock{padding:12px 8px 8px 16px;gap:2px}
.v4-conv.dock .v4-subtabs{padding-left:12px;padding-right:12px;overflow-x:auto}
.v4-conv.dock .v3-b{max-width:88%}
.v4-conv.dock .v4-comp{margin:0 8px 8px}
@media (max-width:1279px) and (min-width:701px){.v4-docked .v4-rcol.open:has(.v4-tchat){background:transparent;box-shadow:none;border:0;padding:12px 24px 12px 12px;top:60px;right:0;bottom:76px;border-radius:0}}
.v4-conv.dock .v3-mg .col{max-width:88%;min-width:0}
.v4-conv.dock .v3-b{max-width:100%}
.v4-conv.dock .v3-mact{position:absolute;top:-30px;right:0;z-index:4;display:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px}
.v4-conv.dock .v3-mg:not(.me) .v3-mact{left:0;right:auto}
.v4-conv.dock [data-mid]:hover .v3-mact,.v4-conv.dock [data-mid]:focus-within .v3-mact{display:flex}
@media (hover:none){.v4-conv.dock .v3-mact{position:static;display:flex;border:0;background:transparent}}
.v4-rcol .v4-conv.dock .v4-file{width:200px;max-width:100%;min-width:0}
/* ── v44 · traccia: Overview = istantanea di ogni sezione (riquadri cliccabili), Chat nello spazio di lavoro, Meetings, Rollout, Agreements ── */
.v4-tg-h{margin:8px 2px -4px}
.v4-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;text-align:left;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;align-self:stretch}
.v4-tile:hover{border-color:var(--line-strong)}
.v4-tile-h{display:flex;align-items:center;gap:6px;width:100%;font:var(--t-cap);color:var(--ink-2)}
.v4-tile-h .go{margin-left:auto;display:inline-flex;color:var(--ink-3);opacity:0;transition:opacity .15s}.v4-tile:hover .v4-tile-h .go{opacity:1}
.v4-tile-h .v4-c2-dot{margin-left:2px}
.v4-tile>b.num{font:700 26px/30px var(--font);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.v4-tile-s{font:600 15px/20px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin:5px 0 3px}
.v4-tile>.t-sub{font-size:12.5px;line-height:17px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v4-tile .pill{margin:4px 0 2px}
.v4-tchat-main{height:calc(100vh - 290px);min-height:440px;display:flex}
.v4-tchat-main .v4-conv{flex:1;min-width:0}
.v4-tlis.on{background:var(--selected)}
.v4-tmeet{padding:20px 22px}
.v4-rmini{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 0 4px}
.v4-rmini .ln{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:0}
.v4-rmini .lb{font:500 12px/1 var(--font);color:var(--ink-2)}
.v4-rmini .tr{position:relative;height:14px;border-radius:7px;background:var(--surface-2)}
.v4-rmini .tr i{position:absolute;top:2px;height:10px;border-radius:5px;background:var(--accent);min-width:10px}
.v4-rmini .tr i.past{background:var(--line-strong)}
.v4-rmini .today,.v4-rmini .rday{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--ink-3)}
.v4-rmini .rday{border-left:2px solid var(--ink)}
.v4-rmini em{position:absolute;top:0;transform:translateX(-50%);font:600 10.5px/1 var(--font);font-style:normal;color:var(--ink-2);white-space:nowrap}
.v4-rdate{width:52px;flex:none;font:600 12.5px/1 var(--font);color:var(--ink-2)}
.v4-agr{border-radius:12px}.v4-agr.on{background:var(--surface-2);margin:0 -8px;padding:0 8px 12px}
.v4-agr-r{display:flex;align-items:center;gap:12px;width:calc(100% + 16px);margin:0 -8px;padding:8px;border:0;border-radius:12px;background:transparent;text-align:left;color:var(--ink);cursor:pointer}
.v4-agr.on .v4-agr-r{margin:0;width:100%;padding:8px 0}
.v4-agr-r:hover{background:var(--hover)}.v4-agr.on .v4-agr-r:hover{background:transparent}
.v4-agr-r .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.v4-agr-r b{font:600 14px/18px var(--font)}.v4-agr-r .t-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-agr-d{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.v4-agr-d .v4-ttile{background:var(--surface)}
.v4-agr-a{display:flex;gap:8px;flex-wrap:wrap}
.v4-sel{display:flex;flex-direction:column;gap:6px}.v4-sel select{height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:0 12px;font:var(--t-body)}
@media (max-width:900px){.v4-tgrid>.v4-tile{grid-column:auto}.v4-tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-tgrid>:not(.v4-tile):not(.v4-tk){grid-column:1/-1}}
.v4-tchat-main .v4-conv-h.dock{display:none}.v4-tchat-main .v4-conv.dock .v4-subtabs{padding-top:12px}
/* v46 · credits dentro Details, label copy */
.v4-tcred{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.v4-tcred-g{display:flex;flex-direction:column;gap:2px;min-width:0}.v4-tcred-g .t-cap{margin:6px 0 2px}
.v4-tcred .v4-tlis .ibtn{width:28px;height:28px;opacity:0}.v4-tcred .v4-tlis:hover .ibtn,.v4-tcred .v4-tlis:focus-within .ibtn{opacity:1}
.v4-lcopy{margin:0;padding:14px 16px;border-radius:12px;background:var(--surface-2);font:500 12.5px/19px ui-monospace,Menlo,monospace;color:var(--ink);white-space:pre-wrap;max-height:52vh;overflow:auto;user-select:text}
@media (max-width:900px){.v4-tcred{grid-template-columns:1fr}}
/* v47 · azioni delle note accanto, come in Chat: barra flottante in alto a destra della nota all hover (icone), non sotto → la spaziatura non cambia */
.v5np-n{position:relative}
.v5np-acts,.v5np-n:hover .v5np-acts,.v5np-n:focus-within .v5np-acts,.v5np-n.on .v5np-acts,.v5np-n.rep .v5np-acts{position:absolute;top:4px;right:6px;margin:0;height:auto;gap:0;padding:2px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);overflow:visible;transition:opacity .12s}
.v5np-acts{opacity:0;pointer-events:none}
.v5np-n:hover .v5np-acts,.v5np-n:focus-within .v5np-acts,.v5np-n.rep .v5np-acts{opacity:1;pointer-events:auto}
.v5np-n.on:not(:hover):not(:focus-within):not(.rep) .v5np-acts{opacity:0;pointer-events:none}
.v5np-acts button{width:28px;height:28px;padding:0;justify-content:center}
.v5np-rxw .v3-rxpk{left:auto;right:-30px}
@media (hover:none){.v5np-acts,.v5np-n .v5np-acts{opacity:1;pointer-events:auto}}
/* v48 · Catalog: il titolo è il link alla traccia (sottolineato all hover), il resto della riga seleziona e apre i dettagli */
.v4-tl{color:var(--ink);text-decoration:none;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
.v4-tl:hover{text-decoration:underline;text-underline-offset:3px}
.v4-tr .nm .v4-tl{font:600 14px/18px var(--font)}
.v4-tr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* v49 · check traccia: upload nuova versione, versioni, split senza doppio Timeline */
.v4-drop-in{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;border:1px dashed var(--line-strong);border-radius:16px;text-align:center;color:var(--ink-2)}
.v4-tgrow{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}.v4-tgrow>span{display:flex;flex-direction:column;gap:2px}.v4-tgrow b{font:500 14px/18px var(--font)}
.v4-th~.v4-tsec+.group .row .end .btn{display:none}
.v4-tlis .ibtn{flex:none}
.v4-tmeet-cal{align-self:flex-start;margin-top:12px}
/* v51 · import rapido nella traccia: velo di drop + foglio di import con riconoscimento */
.v4-track{position:relative}
.v4-tdrop{position:absolute;inset:-8px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--accent);border-radius:var(--r-xl);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(2px);color:var(--ink);text-align:center;pointer-events:none;padding:24px}
.v4-tdrop b{font:600 18px/24px var(--font)}.v4-tdrop span{font:var(--t-sub);color:var(--ink-2)}.v4-tdrop .ic{color:var(--accent)}
.v4-imp{display:flex;flex-direction:column;gap:8px}
.v4-imp-r{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 6px 10px 10px;border-radius:14px;background:var(--surface-2)}
.v4-imp-r.rd{opacity:.7}
.v4-imp-m{display:flex;flex-direction:column;gap:3px;min-width:0}.v4-imp-m b{font:600 13.5px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-imp-f{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.v4-imp-f select,.v4-imp-f input{height:32px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 10px;font:500 12.5px/1 var(--font);min-width:0}
.v4-imp-f input{width:130px}
.v4-imp-eur{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 0 0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font:500 12.5px/1 var(--font)}.v4-imp-eur input{border:0;width:70px;padding-left:2px;height:30px}
.v4-imp-eur.bad{border-color:var(--err)}
.v4-imp-warn{align-self:center;color:var(--warn)}

/* v76 · barra player pulita: linea sottile (Spotify/TIDAL/Deezer/Suno); waveform solo nel player esteso e nella traccia */
.v4-pll{position:relative;flex:1;min-width:0;height:20px;display:flex;align-items:center;cursor:pointer;outline:none;touch-action:none;border-radius:var(--r-pill)}
.v4-pll:focus-visible{box-shadow:0 0 0 2px var(--focus)}
.v4-pll-tr{position:relative;flex:1;height:4px;border-radius:var(--r-pill);background:var(--line-strong);overflow:hidden;transition:height .12s}
.v4-pll-f,.v4-pll-pv{position:absolute;left:0;top:0;bottom:0;border-radius:inherit}
.v4-pll-f{background:var(--ink-2);transition:background .12s}
.v4-pll-pv{background:color-mix(in oklab,var(--ink-3) 45%,transparent)}
.v4-pll:hover .v4-pll-tr,.v4-pll.drag .v4-pll-tr,.v4-pll:focus-visible .v4-pll-tr{height:6px}
.v4-pll:hover .v4-pll-f,.v4-pll.drag .v4-pll-f,.v4-pll:focus-visible .v4-pll-f{background:var(--accent,var(--blue))}
.v4-pll-k{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25);opacity:0;transform:scale(.6);transition:opacity .12s,transform .12s;pointer-events:none}
.v4-pll:hover .v4-pll-k,.v4-pll.drag .v4-pll-k,.v4-pll:focus-visible .v4-pll-k{opacity:1;transform:none}
.v4-pll .v4-plw-tip{bottom:calc(100% + 2px)}
@media (hover:none){.v4-pll-k{opacity:1;transform:none}}
.v5np-wv{padding:14px 0 0}
.v5np-wt{display:flex;justify-content:space-between;margin-top:4px;font:500 11.5px/1 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
.v4-plw-mk{position:absolute;left:0;right:0;bottom:-10px;height:0;pointer-events:none}
.v4-plw-mk button{position:absolute;top:0;transform:translate(-50%,-50%);padding:0;border:0;background:none;border-radius:50%;cursor:pointer;pointer-events:auto;box-shadow:0 0 0 2px var(--surface)}
.v4-plw-mk button:hover{transform:translate(-50%,-50%) scale(1.25);z-index:1}
.v4-plw-mk .av{width:16px;height:16px;font-size:8px}


/* v77 · waveform a linee sottili (Apple Voice Memos, ElevenLabs, Suno): 1px ogni 3px, angoli tondi, vale ovunque (.v4-plw) */
.v4-plw{gap:0;justify-content:space-between}
.v4-plw i{flex:0 0 1px;width:1px;min-width:1px}
.v4-plw i::before,.v4-plw i::after{border-radius:.5px}

/* v78 · niente linea nera della posizione: si legge dalla parte colorata */
.v4-plw-head{display:none!important}

/* v79 · player esteso più pulito: sotto il titolo solo la versione (menu), poi waveform e azioni. Via stato, key/BPM/formato e "chi ce l'ha" (stanno nella traccia) */
.v5np-ver{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin:2px 0 0 -6px;height:24px;padding:0 6px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-3);font:500 13px/1 var(--font);cursor:pointer}
.v5np-ver:hover{background:var(--hover);color:var(--ink)}
.v5np-act{padding-top:14px}

/* v80 · volume sempre visibile (Spotify, TIDAL, Deezer), stessa linea sottile del progresso: 4px, al passaggio accento + pallino */
.v4-vol input{width:92px;opacity:1;margin:0 4px 0 2px;cursor:pointer;background:linear-gradient(to right,var(--ink-2) var(--v),var(--line-strong) var(--v))}
.v4-vol:hover input,.v4-vol:focus-within input{width:92px;margin:0 4px 0 2px;background:linear-gradient(to right,var(--accent,var(--blue)) var(--v),var(--line-strong) var(--v))}
.v4-vol input::-webkit-slider-thumb{opacity:0;transition:opacity .12s}
.v4-vol input::-moz-range-thumb{opacity:0;transition:opacity .12s}
.v4-vol:hover input::-webkit-slider-thumb,.v4-vol input:focus-visible::-webkit-slider-thumb{opacity:1}
.v4-vol:hover input::-moz-range-thumb,.v4-vol input:focus-visible::-moz-range-thumb{opacity:1}
@media (max-width:1180px){.v4-vol{display:flex}.v4-vol input{width:64px}.v4-vol:hover input,.v4-vol:focus-within input{width:64px}}
@media (max-width:900px){.v4-vol input{display:none}}
/* ── v43 · header traccia "hero" (19 ott; track4.jsx, flag rw4-thero): SoundCloud (waveform larga con tempi e note) + Apple Music (copertina grande, sfondo sfocato, pulsanti a pillola).
   Una sola card radius 24 col bordo; sfondo = copertina sfocata molto leggera sopra --surface; testo sempre dai token. Su ≤700 si impila. */
.v4-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:20px;margin:0 0 16px;padding:20px;border-radius:24px;border:1px solid var(--line);background:var(--surface)}
.v4-hero-bg{position:absolute;inset:-80px;z-index:-1;background-size:cover;background-position:center;filter:blur(64px) saturate(1.5);opacity:.22;pointer-events:none;transform:translateZ(0)}
[data-theme="dark"] .v4-hero-bg{opacity:.32}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v4-hero-bg{opacity:.32}}
.v4-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 0%,var(--surface) 100%);opacity:.55;pointer-events:none}
.v4-hero-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:end}
.v4-hero-art{position:relative;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:none;box-shadow:0 12px 32px rgba(0,0,0,.22);transition:transform .2s var(--ease,ease)}
.v4-hero-art:hover{transform:scale(1.015)}
.v4-hero-art .art{border-radius:10px;display:block}
.v4-hero-art .pl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.28);color:#fff;opacity:0;transition:opacity .15s}
.v4-hero-art:hover .pl,.v4-hero-art:focus-visible .pl,.v4-hero.on .v4-hero-art .pl{opacity:1}
.v4-hero-m{display:flex;flex-direction:column;gap:4px;min-width:0}
.v4-hero-k{font:600 11.5px/16px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-hero-t{margin:0;font:700 40px/46px var(--font);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-hero-by{font:500 15px/20px var(--font);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-hero-a{display:flex;align-items:center;gap:8px;margin-top:14px;min-width:0}
.v4-hero-a .btn.neutral{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.v4-hero-a .btn.neutral:hover{background:color-mix(in srgb,var(--ink) 13%,transparent)}
.v4-hero-ver{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);font:500 13.5px/1 var(--font);cursor:pointer;white-space:nowrap}
.v4-hero-ver:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.v4-hero-ver .ic{color:var(--ink-2)}
.v4-hero-sp{flex:1}
.v4-hero-a .ibtn{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.v4-hero:not(.full){padding:16px;gap:0}
.v4-hero:not(.full) .v4-hero-top{gap:18px;align-items:center}
.v4-hero:not(.full) .v4-hero-t{font-size:30px;line-height:36px}
.v4-hero:not(.full) .v4-hero-a{margin-top:8px}
.v4-hero-w{display:flex;flex-direction:column;gap:8px}
.v4-hero-wh{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.v4-hero-wh .t-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-hero-wr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start}
.v4-hero-tm{font:500 12px/1 var(--font);color:var(--ink-2);padding-top:26px;min-width:32px}
.v4-hero-wr>.v4-hero-tm:last-child{text-align:right}
.v4-hero.on .v4-hero-wr>.v4-hero-tm:first-child{color:var(--accent,var(--blue))}
.v4-hero-wv{min-width:0}
.v4-hero-wv .v3-cmarks{height:30px;margin-top:6px}
@media (max-width:900px){.v4-hero-t{font-size:32px;line-height:38px}}
@media (max-width:700px){.v4-hero{padding:16px;border-radius:20px}.v4-hero-top{grid-template-columns:1fr;gap:16px;align-items:start}.v4-hero.full .v4-hero-art{width:144px}.v4-hero.full .v4-hero-art .art{width:144px!important;height:144px!important}
  .v4-hero:not(.full) .v4-hero-top{grid-template-columns:auto minmax(0,1fr)}.v4-hero:not(.full) .v4-hero-art .art{width:64px!important;height:64px!important}
  .v4-hero-t{font-size:28px;line-height:34px;white-space:normal}.v4-hero-a{flex-wrap:wrap}.v4-hero-a .btn{flex:1}.v4-hero-a .v4-hero-sp{display:none}.v4-hero:not(.full) .v4-hero-a{grid-column:1/-1}
  .v4-hero-tm{display:none}.v4-hero-wr{grid-template-columns:1fr}}
.v4-hero-a{flex-wrap:wrap;row-gap:8px}
.v4-hero .v4-plw i::before,.v4-hero .v4-plw i::after{background:color-mix(in srgb,var(--ink) 26%,transparent)}
.v4-hero .v4-plw i.pv::before,.v4-hero .v4-plw i.pv::after{background:color-mix(in srgb,var(--ink) 55%,transparent)}
.v4-hero .v4-plw i.on::before,.v4-hero .v4-plw i.on::after{background:var(--accent,var(--blue))}
.v4-hero .v4-plw i.stop::before,.v4-hero .v4-plw i.stop::after{background:var(--warn)}
.v4-hero-wh .v3-link{white-space:nowrap;flex:none}
/* ── v44 · hero col gradiente dalla copertina (Apple Music iOS) + Overview a sezioni (Apple Music web, pagina canzone). track4.jsx: useArtColors, Overview5 ── */
.v4-hero.grad{border-color:transparent;background:radial-gradient(120% 140% at 0% 0%,var(--h-a) 0%,transparent 62%),radial-gradient(120% 140% at 100% 100%,var(--h-c) 0%,transparent 62%),var(--h-b);transition:background .4s}
.v4-hero.grad::after{opacity:1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.22) 100%)}
.v4-hero.grad[data-tone="light"]::after{background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.28) 100%)}
.v4-hero.grad[data-tone="dark"]{--hi:#fff;--hi-2:rgba(255,255,255,.74);--hi-inv:#0b0b0e}
.v4-hero.grad[data-tone="light"]{--hi:#111114;--hi-2:rgba(17,17,20,.66);--hi-inv:#fff}
.v4-hero.grad .v4-hero-k,.v4-hero.grad .v4-hero-by,.v4-hero.grad .v4-hero-tm{color:var(--hi-2)}
.v4-hero.grad .v4-hero-t{color:var(--hi)}
.v4-hero.grad .v4-hero-a .btn.neutral{background:color-mix(in srgb,var(--hi) 16%,transparent);color:var(--hi)}
.v4-hero.grad .v4-hero-a .btn.neutral:hover{background:color-mix(in srgb,var(--hi) 24%,transparent)}
.v4-hero.grad .v4-hero-a .btn.primary{background:var(--hi);color:var(--hi-inv)}
.v4-hero.grad .v4-hero-a .ibtn{background:color-mix(in srgb,var(--hi) 16%,transparent);color:var(--hi)}
.v4-hero.grad .v4-plw i::before,.v4-hero.grad .v4-plw i::after{background:color-mix(in srgb,var(--hi) 34%,transparent)}
.v4-hero.grad .v4-plw i.pv::before,.v4-hero.grad .v4-plw i.pv::after{background:color-mix(in srgb,var(--hi) 62%,transparent)}
.v4-hero.grad .v4-plw i.on::before,.v4-hero.grad .v4-plw i.on::after{background:var(--hi)}
.v4-hero.grad.on .v4-hero-wr>.v4-hero-tm:first-child{color:var(--hi)}
.v4-hero.grad .v3-cmark .av{box-shadow:0 0 0 2px color-mix(in srgb,var(--hi) 40%,transparent)}
.v4-hero-art{cursor:default}.v4-hero-art:hover{transform:none}
.v4-hero-a .btn.neutral{min-width:112px}/* Play ↔ Pause senza cambiare larghezza */
.v4-hero-by{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;max-width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.v4-hero-by:hover{text-decoration:underline;text-underline-offset:3px}
.v4-hero-by span{white-space:nowrap}
.v4-hero.full{gap:16px}
.v4-hero-wr .v4-hero-tm{padding-top:22px}
.v4-am{display:flex;flex-direction:column;padding:4px 0 8px}
.v4-am-s{display:grid;grid-template-columns:168px minmax(0,1fr);gap:24px;padding:20px 4px;border-top:1px solid var(--line)}
.v4-am-s:first-child{border-top:0;padding-top:8px}
.v4-am-s h3{display:flex;align-items:center;gap:2px;margin:0;height:28px;font:600 15px/20px var(--font);color:var(--ink)}
.v4-am-more{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer}
.v4-am-more:hover{background:var(--hover);color:var(--ink)}
.v4-am-notes{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.v4-am-n{display:flex;flex-direction:column;gap:2px;max-width:100%;margin:0 -10px;padding:6px 10px;border:0;border-radius:12px;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.v4-am-n:hover{background:var(--hover)}
.v4-am-n q{quotes:none;font:600 19px/26px var(--font);letter-spacing:-.01em}
.v4-am-n .s,.v4-am-c .s{font:400 12.5px/17px var(--font);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.v4-am-notes .v3-link{margin-top:4px}
.v4-am-empty{margin:4px 0 0;font:400 14px/20px var(--font);color:var(--ink-2)}
.v4-am-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 8px;margin:0 -10px}
.v4-am-c{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:6px 10px;border:0;border-radius:12px;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.v4-am-c:hover{background:var(--hover)}
.v4-am-c .k{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/17px var(--font);color:var(--ink-2)}
.v4-am-c .k .v4-c2-dot{margin-left:0}
.v4-am-c b{font:600 17px/24px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.v4-am-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px 16px}
.v4-am-pp{display:flex;align-items:center;gap:10px;min-width:0}
.v4-am-pp span{display:flex;flex-direction:column;min-width:0}
.v4-am-pp b{font:500 14px/19px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-am-pp small{font:400 12.5px/17px var(--font);color:var(--ink-2)}
.v4-am-foot{margin:4px 4px 0;padding-top:16px;border-top:1px solid var(--line);font:400 12.5px/19px var(--font);color:var(--ink-3)}
@media (max-width:700px){.v4-am-s{grid-template-columns:1fr;gap:8px;padding:16px 0}.v4-am-g{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-am-c{min-height:44px}.v4-am-n q{font-size:17px;line-height:24px}}
.v4-hero.grad{border-color:color-mix(in srgb,var(--hi) 10%,transparent)}
/* ── v45 · hero: Play/Pause bianco; note che compaiono sulla waveform quando la riproduzione arriva al loro secondo (SoundCloud) ── */
.v4-hero-a .btn.v4-hero-play,.v4-hero.grad .v4-hero-a .btn.v4-hero-play{background:#fff;color:#0b0b0e;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.v4-hero-a .btn.v4-hero-play:hover{background:#f2f2f4}
.v4-hero-wv{position:relative}
.v4-hero-bub{position:absolute;top:calc(56px + 6px);z-index:3;display:inline-flex;align-items:center;gap:6px;max-width:min(360px,70%);height:28px;margin-left:18px;padding:0 12px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--ink-inv);font:400 13px/1 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.18);animation:v4bub .22s var(--ease,ease) both}
.v4-hero-bub b{font-weight:600;flex:none}
.v4-hero-bub.r{margin-left:-18px;transform:translateX(-100%);animation-name:v4bubr}
@keyframes v4bub{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes v4bubr{from{opacity:0;transform:translate(-100%,4px)}to{opacity:1;transform:translateX(-100%)}}
@media (max-width:700px){.v4-hero-bub{max-width:calc(100vw - 96px)}}
/* ── v46 · note stile Lyrics (player4.jsx Notes5, flag rw4-notesly): testo grande, meta piccola sotto; in riproduzione la nota corrente è piena, le altre attenuate ── */
.v5np-body.ly{gap:6px}
.v5np-body.ly .v5np-n{grid-template-columns:minmax(0,1fr);padding:10px 12px}
.v5np-body.ly .v5np-n .tx{font:600 17px/24px var(--font);letter-spacing:-.01em;color:var(--ink);transition:color .25s,opacity .25s}
.v5np-body.ly.big .v5np-n .tx{font-size:20px;line-height:28px}
.v5np-body.ly .v5np-nh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:400 12.5px/16px var(--font);color:var(--ink-3)}
.v5np-body.ly .v5np-nh b{font-weight:500;color:var(--ink-2)}
.v5np-body.ly .v5np-nh>span+span::before,.v5np-body.ly .v5np-nh b+span::before{content:"·";margin-right:6px}
.v5np-body.ly .v5np-n.on{background:transparent}
.v5np-body.ly .v5np-n.on:hover,.v5np-body.ly .v5np-n:hover{background:var(--hover)}
.v5np-body.ly.live .v5np-n:not(.on):not(:hover):not(.rep) .tx{color:var(--ink-3)}
.v5np-body.ly.live .v5np-n.on .tx{color:var(--ink)}
.v5np-body.ly .v5np-n.done .tx{font-weight:500}
/* ── v47 · hero piatto (19 ott): niente sfondo sfocato né sfumatura, card come gli altri bento ── */
.v4-hero:not(.grad) .v4-hero-bg,.v4-hero:not(.grad)::after{display:none}
.v4-hero:not(.grad){background:var(--surface)}
/* ── v48 · hero senza bento (19 ott): niente card, si fonde con lo sfondo; più aria sopra e sotto, allineato al contenuto (4px come le sezioni dell'Overview) ── */
.v4-hero:not(.grad){background:transparent;border:0;border-radius:0;padding:12px 4px 0;overflow:visible}
.v4-hero.full:not(.grad){gap:28px;margin-bottom:32px}
.v4-hero:not(.full):not(.grad){padding:8px 4px 0;margin-bottom:24px}
.v4-hero:not(.grad) .v3-cmark .av{box-shadow:0 0 0 2px var(--bg-work,var(--bg))}
@media (max-width:700px){.v4-hero:not(.grad){padding:8px 0 0;border-radius:0}.v4-hero.full:not(.grad){gap:20px;margin-bottom:24px}}
/* 19 ott · Overview calma: riga "Needs you" (rw4-ovcalm) */
.v4-am-need h3 .v4-am-nn{margin-left:8px;font:500 12.5px/17px var(--font);color:var(--ink-3)}
.v4-am-nb{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.v4-am-ni{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 14px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink);font:500 13px/1 var(--font);cursor:pointer}
.v4-am-ni:hover{background:var(--hover)}
.v4-am-ni svg{color:var(--ink-3)}
@media (max-width:700px){.v4-am-ni{height:44px}}

/* v-volpeek (19 ott) · torna l'animazione: a riposo solo l'icona, all'hover il cursore si allarga (stile v80: linea 4px, accento + pallino).
   Il blocco v80 "sempre visibile" resta sopra: per riaverlo, aggiungere la classe vol-fixed a <html>. */
:root:not(.vol-fixed) .v4-vol input{width:0;opacity:0;margin:0;transition:width .2s var(--ease,ease),opacity .2s,margin .2s}
:root:not(.vol-fixed) .v4-vol:hover input,:root:not(.vol-fixed) .v4-vol:focus-within input{width:92px;opacity:1;margin:0 4px 0 2px}
@media (max-width:1180px){:root:not(.vol-fixed) .v4-vol:hover input,:root:not(.vol-fixed) .v4-vol:focus-within input{width:64px}}

/* v-volpeek (19 ott) · torna l'animazione: a riposo solo l'icona, all'hover il cursore si allarga (stile v80: linea 4px, accento + pallino).
   Il blocco v80 "sempre visibile" resta sopra: per riaverlo, aggiungere la classe vol-fixed a <html>. */
:root:not(.vol-fixed) .v4-vol input{width:0;opacity:0;margin:0;transition:width .2s var(--ease,ease),opacity .2s,margin .2s}
:root:not(.vol-fixed) .v4-vol:hover input,:root:not(.vol-fixed) .v4-vol:focus-within input{width:92px;opacity:1;margin:0 4px 0 2px}
@media (max-width:1180px){:root:not(.vol-fixed) .v4-vol:hover input,:root:not(.vol-fixed) .v4-vol:focus-within input{width:64px}}

/* 19 ott · note sulla waveform (Research board 5): campo sotto la waveform + popover della nota (tipo 4, accanto all'avatar). Interruttore rw4-notepop="off". */
.v4-npw{position:relative}
.v4-hero:has(.v4-npop){overflow:visible}
.v3-cmark.on{z-index:3}.v3-cmark.on .av{box-shadow:0 0 0 2px var(--accent,var(--blue))}
.v4-cmark-draft{cursor:default;pointer-events:none}.v4-cmark-draft .av{opacity:.55;outline:1.5px dashed var(--accent,var(--blue));outline-offset:1px;box-shadow:none}
.v4-nbar{margin:10px 0 0;height:40px;padding:4px 4px 4px 8px}
.v4-nbar .av{flex:none}
.v4-nbar-t{flex:none;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:0;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font:500 12px/1 var(--font);cursor:pointer}
.v4-nbar-t:hover{background:var(--surface-3);color:var(--ink)}
.v4-nbar-t.lock{background:var(--accent-soft);color:var(--accent-ink)}
.v4-nbar input:disabled{opacity:.6}
.v4-hero.grad .v4-nbar{background:color-mix(in srgb,var(--hi,#fff) 10%,transparent);border-color:transparent}
.v4-hero.grad .v4-nbar input{color:var(--hi,var(--ink))}
.v4-hero.grad .v4-nbar input::placeholder{color:color-mix(in srgb,var(--hi,#fff) 60%,transparent)}
.v4-hero.grad .v4-nbar-t{background:color-mix(in srgb,var(--hi,#fff) 14%,transparent);color:var(--hi,var(--ink))}
.v4-npop{position:absolute;z-index:30;width:min(340px,100%);left:clamp(0px,calc(var(--x) * 100% - 170px),calc(100% - min(340px,100%)));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-2);animation:fade .12s;color:var(--ink);text-align:left}
.v4-npop-h{display:flex;align-items:center;gap:6px;padding:6px 6px 0 14px;min-height:44px}
.v4-npop-h .ibtn{width:32px;height:32px}.v4-npop-h .ibtn:disabled{opacity:.35;cursor:default}
.v4-npop-t{font:600 12px/1 var(--font);padding:5px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)}
.v4-npop-b{padding:4px 14px 0;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.v4-npop-tx{margin:0;font:400 14px/20px var(--font);white-space:pre-wrap;overflow-wrap:anywhere}
.v4-npop-a{display:flex;align-items:center;gap:2px;padding:6px 10px 0}
.v4-npop-a .ibtn{width:32px;height:32px}
.v4-npop-a .v3-link{font-size:13px;padding:0 6px}
.v4-npop-in{margin:8px 10px 10px}
@media (max-width:700px){
  .v4-npop{position:fixed;left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-height:80dvh;border-radius:22px 22px 0 0;z-index:70;padding-bottom:env(safe-area-inset-bottom)}
  .v4-npop-h .ibtn,.v4-npop-a .ibtn{width:44px;height:44px}
  .v4-npop-b{max-height:50dvh}
  .v4-nbar{height:44px}
}
.v4-hero:has(.v4-npop){z-index:5}
.v4-npop-veil{display:none}
@media (max-width:700px){.v4-npop-veil{display:block;position:fixed;inset:0;z-index:69;background:rgba(6,6,9,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fade .12s}}

/* v90 · Demos: niente colonna/pillola di stato (split) nella lista e nella griglia; lo stato resta nella traccia e nel filtro Status.
   Colonne: 1 ✓ · 2 Name · 3 Type · 4 Length · 5 Format · 6 People · 7 Edited · 8 ⋯ — header e righe nascondono sempre le stesse */
.v4-tr{grid-template-columns:36px minmax(200px,2.2fr) 64px 56px 56px 84px 96px 40px}
.v4-cat .v4-tr>*{display:block}
.v4-cat .v4-tr>.nm{display:flex}
.v4-cat .v4-tr.h>.s{display:inline-flex}
@container (max-width:860px){
  .v4-cat .v4-tr{grid-template-columns:32px minmax(180px,1fr) 60px 52px 80px 84px 36px}
  .v4-cat .v4-tr>:nth-child(5),.v4-cat .v4-tr.h>:nth-child(5){display:none}
}
@container (max-width:680px){
  .v4-cat .v4-tr{grid-template-columns:32px minmax(160px,1fr) 56px 84px 36px}
  .v4-cat .v4-tr>:nth-child(3),.v4-cat .v4-tr>:nth-child(6),.v4-cat .v4-tr.h>:nth-child(3),.v4-cat .v4-tr.h>:nth-child(6){display:none}
}
@container (max-width:480px){
  .v4-cat .v4-tr{grid-template-columns:minmax(0,1fr) 84px 36px}
  .v4-cat .v4-tr>:nth-child(1),.v4-cat .v4-tr>:nth-child(4),.v4-cat .v4-tr.h>:nth-child(1),.v4-cat .v4-tr.h>:nth-child(4){display:none}
}

/* v91 · colonna destra fissa: niente linguetta per riaprirla su desktop */
@media (min-width:1280px){.v4-rc-open{display:none!important}}

/* ── giro 5 (25 ott) · parità EngineEars: Home5, Pros, prenotazioni, Earnings (biz4.jsx). Solo token, bordi al posto delle ombre. ── */
.v4-home5 .v4-tgrid{gap:12px}
.v4-kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.v4-kpi.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.v4-kpi[aria-selected]{cursor:pointer}
.v4-delta.up{color:var(--ok)}.v4-delta.down{color:var(--err)}
.v4-perfbx{gap:14px}
.v4-perfbx .v4-kpi{background:transparent}
.v4-perf-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.v4-perf-h .t-sub{display:block;max-width:520px}
.v4-perf-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:32px}
.v4-leg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.v4-leg i{display:inline-block;width:16px;height:0;border-top:2px solid var(--accent);margin-left:8px}
.v4-leg i.prev{border-top:2px dashed var(--ink-3)}
.v4-perf{position:relative;margin:0 0 22px 44px;cursor:crosshair}
.v4-perf-y span{position:absolute;left:-44px;width:38px;text-align:right;transform:translateY(-50%);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.v4-perf-x{position:absolute;left:0;right:0;bottom:-22px;height:18px}
.v4-perf-x span{position:absolute;transform:translateX(-50%);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.v4-perf-x span:first-child{transform:none}.v4-perf-x span:last-child{transform:translateX(-100%)}
.v4-perf-tip{position:absolute;transform:translate(-50%,calc(-100% - 12px));background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;gap:1px;pointer-events:none;white-space:nowrap;font-size:12.5px;z-index:2}
.v4-perf-tip b{font:600 14px/18px var(--font);font-variant-numeric:tabular-nums}
.v4-perf-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);transform:translate(-50%,-50%);pointer-events:none}
.v4-perf-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.v4-prog{height:6px;border-radius:3px;background:var(--surface-3,var(--line));overflow:hidden}
.v4-prog i{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width .3s}
.v4-setup-l{margin:0 -8px}
.v4-setup .v3-link{align-self:flex-start}
.v4-bal-k{display:flex;gap:18px;flex-wrap:wrap}
.v4-bal-k>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.v4-bal-k b{font:600 15px/20px var(--font)}
.v4-bx-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.v4-bx .row,.v4-bx .v3-row{margin:0 -8px}
.v4-grow-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v4-grow-g>button,.v4-grow-i{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:12px;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.v4-grow-i{cursor:default}
.v4-grow-g>button:hover{background:var(--hover)}
.v4-grow-g>*>span:not(.dot){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v4-grow-g .dot{flex:none}
.v4-grow-g b{font:600 14px/20px var(--font)}
.v4-grow-g em{font-style:normal;font-size:13px;line-height:18px;color:var(--ink-2)}
.v4-ckl{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer}
.v4-ckl input{width:18px;height:18px;accent-color:var(--accent)}
/* Pros: griglia a misura fissa (si aggiunge o toglie una card, non si ridimensionano) */
.v4-pros{display:grid;grid-template-columns:repeat(auto-fill,248px);gap:12px}
.v4-pro{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);cursor:pointer;min-width:0}
.v4-pro:hover{border-color:var(--line-strong)}
.v4-pro:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.v4-pro-t{display:flex;gap:12px;align-items:flex-start}
.v4-pro-n{display:flex;align-items:center;gap:4px;min-width:0}.v4-pro-t .v4-tl{display:block;min-width:0;font:600 15px/20px var(--font)}
.v4-ver{color:var(--accent);flex:none;display:inline-flex}
.v4-pro-r{display:flex;gap:4px;align-items:center;font-size:13px}
.v4-pro-r b{font-weight:600}
.v4-pro-c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-pro-g{display:flex;gap:6px;flex-wrap:wrap}
.v4-pro-g span{height:24px;padding:0 9px;border-radius:999px;border:1px solid var(--line);font-size:12px;line-height:22px;color:var(--ink-2)}
.v4-pro-f{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.v4-pro-f b{font:600 15px/20px var(--font)}
.v4-heart{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;flex:none;margin:-6px -6px 0 0}
.v4-heart:hover{background:var(--hover);color:var(--ink)}.v4-heart.on{color:var(--err)}
.v4-sq{display:grid;place-items:center;border-radius:12px;flex:none;background:hsl(var(--h) 40% 50% / .14);color:hsl(var(--h) 45% 45%)}
[data-theme=dark] .v4-sq{color:hsl(var(--h) 55% 72%)}
.v4-proh{margin:0 0 8px}.v4-proh .v3-link{display:inline-flex;gap:6px;align-items:center}
.v4-proh2{display:flex;gap:16px;align-items:center;margin:0 0 20px;flex-wrap:wrap}
.v4-proh2 .t-title{margin:0 0 4px}
.v4-proh-a{display:flex;gap:8px;align-items:center}
.v4-svc-e{display:flex;gap:10px;align-items:center;white-space:nowrap}
.v4-rev{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px solid var(--line)}
.v4-rev p{margin:2px 0 0;font-size:14px}
/* prenotazione: flusso a pagina intera con riepilogo a destra */
.v3-flow .fb.v4-book{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.v4-book-m{min-width:0}
.v4-book-s{position:sticky;top:16px}
.v4-book-s .v4-bx{gap:12px}
.v4-book-s .kv{min-height:28px}
.v4-book-f{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.v4-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.v4-days button{flex:none;width:56px;height:68px;border-radius:16px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font:inherit}
.v4-days button span{font-size:12px;color:var(--ink-2)}.v4-days button b{font:600 18px/22px var(--font)}
.v4-days button.on{background:var(--ink);border-color:var(--ink);color:var(--ink-inv)}.v4-days button.on span{color:inherit;opacity:.7}
.v4-days button:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.v4-step{display:flex;gap:12px;align-items:center}.v4-step b{font:600 18px/22px var(--font);min-width:44px;text-align:center}
.v4-rad{border-radius:50%}
/* prenotazioni */
.v4-blist{display:flex;flex-direction:column}
.v4-deliv{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid var(--line)}
.v4-deliv b{display:block;font:600 13.5px/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-stars{display:flex;gap:4px;margin:0 0 12px}.v4-stars button{border:0;background:transparent;color:var(--ink);cursor:pointer;padding:4px}
/* 27 ott · solo le richieste dei servizi (Pros › Your services): prima la regola valeva anche per la richiesta di messaggio in Chats (avatar e Accept attaccati ai bordi) e queste prendevano il fondo tinto della richiesta */
.v4-bx .v4-req{display:block;background:none;padding:4px 0 10px;border-bottom:1px solid var(--line)}.v4-bx .v4-req:last-child{border-bottom:0}
.v4-tbl-s .v4-tr{grid-template-columns:minmax(120px,1fr) minmax(140px,1.4fr) 150px minmax(100px,1fr) 70px 90px;min-height:52px;cursor:default}
@container (max-width:680px){.v4-tbl-s .v4-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 64px 80px}.v4-tbl-s .v4-tr>:nth-child(3),.v4-tbl-s .v4-tr>:nth-child(4){display:none}}
@media (max-width:1100px){.v4-kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-grow-g{grid-template-columns:1fr}}
@media (max-width:900px){.v3-flow .fb.v4-book{grid-template-columns:1fr}.v4-book-s{position:static;order:-1}.v4-book:not(.last) .v4-book-s{display:none}.v4-home5 .v4-tgrid>.v4-bx{grid-column:1/-1}}
@media (max-width:700px){.v4-pros{grid-template-columns:1fr}.v4-perf{margin-left:36px}.v4-perf-y span{left:-36px;width:32px}
  .v4-proh-a{width:100%}.v4-proh-a .btn{flex:1}.v4-days button{width:52px;height:64px}}

.v4-home5 .v4-alloc>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 26 ott · grafico unico (Metrics) e Home più ariosa ── */
.v4-met{gap:16px;position:relative}
.v4-met .v4-kpi{background:transparent}
.v4-met-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.v4-met-n{display:flex;flex-direction:column;gap:2px;min-width:0}
.v4-met-n .t-display{font-size:34px;line-height:40px;letter-spacing:-.02em}
.v4-met-c{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v4-met-c .chips button{height:30px}
.v4-cmp{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.v4-cmp input{width:16px;height:16px;accent-color:var(--accent);margin:0}
.v4-perf-dot.prev{background:var(--ink-3);width:8px;height:8px}
.v4-met-p{position:relative;display:flex;justify-content:center}
.v4-per{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);overflow-x:auto;scrollbar-width:none;max-width:100%}
.v4-per button{height:30px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:500 13px/1 var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.v4-per button:hover{color:var(--ink)}
.v4-per button.on{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.v4-rp-veil{position:fixed;inset:0;z-index:80}
.v4-rp{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:81;display:flex;background:var(--sheet,var(--surface));border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--sh-3,0 20px 60px rgba(0,0,0,.25));overflow:hidden}
.v4-rp-p{display:flex;flex-direction:column;gap:2px;padding:10px;border-right:1px solid var(--line);min-width:150px}
.v4-rp-p button{height:36px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);text-align:left;font:500 13px/1 var(--font);cursor:pointer}
.v4-rp-p button:hover{background:var(--hover)}.v4-rp-p button.on{background:var(--selected,var(--hover))}
.v4-rp-c{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.v4-rp-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.v4-rp-ms{display:flex;gap:18px}
.v4-rp-m b{display:block;text-align:center;font:600 13.5px/20px var(--font);margin:0 0 6px}
.v4-rp-g{display:grid;grid-template-columns:repeat(7,34px);gap:2px 0}
.v4-rp-g em{font-style:normal;font-size:11px;color:var(--ink-3);text-align:center;line-height:22px}
.v4-rp-g button{height:34px;border:0;background:transparent;color:var(--ink);font:500 13px/1 var(--font);cursor:pointer;border-radius:10px}
.v4-rp-g button:hover:not(:disabled){background:var(--hover)}
.v4-rp-g button.in{background:var(--accent-soft);border-radius:0}
.v4-rp-g button.on{background:var(--accent);color:var(--on-accent,#fff);border-radius:10px}
.v4-rp-g button:disabled{color:var(--ink-3);opacity:.45;cursor:default}
.v4-rp-f{display:flex;justify-content:flex-end;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
/* Home: sezioni con titolo fuori dalla card, 32px tra le sezioni, liste a righe come Catalog */
.v4-h5{display:flex;flex-direction:column;gap:32px}
.v4-h5>.v4-ph{margin-bottom:-12px}
.v4-h5 .v4-met{border-radius:var(--r-lg)}
.v4-h5-s>.v3-sech{margin:0 0 10px}
.v4-h5-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.v4-h5-pl{padding:6px 16px}
.v4-h5-grow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v4-h5-grow button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.v4-h5-grow button:hover{background:var(--hover)}
.v4-h5-grow b{font:600 14px/20px var(--font);margin-top:6px}.v4-h5-grow em{font-style:normal;font-size:13px;color:var(--ink-2)}
@media (max-width:1100px){.v4-h5-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.v4-h5{gap:24px}.v4-h5-grow{grid-template-columns:1fr}.v4-met-n .t-display{font-size:28px;line-height:34px}
  .v4-rp{position:fixed;inset:auto 0 0 0;transform:none;border-radius:22px 22px 0 0;flex-direction:column;max-height:90vh;overflow:auto}.v4-rp-p{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.v4-rp-p button{flex:none}.v4-rp-ms>:last-child{display:none}.v4-rp-g{grid-template-columns:repeat(7,1fr)}}
/* 26 ott · watermark: zona per il file trovato */
.v4-wmdrop{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--ink-2)}
.v4-wmdrop b{color:var(--ink);font:600 15px/20px var(--font)}

/* 26 ott · larghezze fluide: il contenuto riempie lo spazio tra colonna 2 e colonna destra (niente vuoto prima della colonna destra);
   oltre 1800px il contenuto smette di crescere; la colonna destra resta attaccata (16px) e lo spazio in più va in fondo a destra,
   così titoli e margine sinistro restano allineati in ogni pagina. Calendar, Chats e Settings restano a tutta larghezza. Prima: max-width 1120. */
.v4 .v4-page,.v4 .v3-main>.v3-col,.v4 .v3-main>.v4-retitle>.v3-col{max-width:none}
.v4 .v4-body{justify-content:flex-start}
.v4 .v3-main{max-width:1800px;min-width:0}
.v4 .v3-main:has(>.v4-cal),.v4 .v3-main:has(>.v4-chats),.v4 .v3-main:has(>.v4-set){max-width:none}

/* ── 26 ott · Contacts, Live, Tickets (live4.jsx) ── */
.v4-ctbl .v4-tr{grid-template-columns:minmax(180px,1.4fr) minmax(140px,1.1fr) minmax(110px,1fr) 100px minmax(160px,1.2fr) 120px;cursor:pointer}
@container (max-width:860px){.v4-ctbl .v4-tr{grid-template-columns:minmax(160px,1fr) minmax(120px,1fr) 110px}.v4-ctbl .v4-tr>:nth-child(3),.v4-ctbl .v4-tr>:nth-child(4),.v4-ctbl .v4-tr>:nth-child(5){display:none}}
.v4-2f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v4-shows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.v4-show{display:grid;grid-template-columns:52px minmax(0,1fr) 150px 110px auto;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);cursor:pointer}
.v4-show:first-child{border-top:0}.v4-show:hover{background:var(--hover)}.v4-show:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.v4-show-m{display:flex;flex-direction:column;min-width:0}.v4-show-m .v4-tl{font:600 15px/20px var(--font)}
.v4-show-m .t-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-show-a{display:flex;flex-direction:column;gap:6px}
.v4-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:56px;border-radius:12px;border:1px solid var(--line);line-height:1}
.v4-date span{font:600 11px/14px var(--font);text-transform:uppercase;color:var(--err)}.v4-date b{font:700 20px/24px var(--font)}.v4-date em{font-style:normal;font-size:11px;color:var(--ink-3)}
.v4-date.lg{width:64px;height:68px}.v4-date.lg b{font-size:26px;line-height:30px}
.v4-showp{display:flex;flex-direction:column;gap:12px}.v4-showp .v4-proh2{margin-bottom:4px}
.v4-advh{gap:10px}
.v4-advs{display:flex;flex-direction:column;gap:8px}
.v4-adv{padding:0;gap:0}
.v4-adv-h{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:inherit;border-radius:var(--r-lg)}
.v4-adv-h b{flex:1;font:600 14px/20px var(--font)}.v4-adv-h .ic{transition:transform .2s}.v4-adv.open .v4-adv-h .ic:last-child{transform:rotate(180deg)}
.v4-adv-h:hover{background:var(--hover)}
.v4-adv-b{padding:0 16px 10px;border-top:1px solid var(--line)}
.v4-advr{display:grid;grid-template-columns:minmax(160px,.9fr) minmax(0,1.4fr);gap:12px;align-items:center;min-height:44px;border-bottom:1px solid var(--line)}
.v4-advr:last-child{border-bottom:0}.v4-advr .k{font-size:13.5px;color:var(--ink-2)}
.v4-advr-v{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:4px 8px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;cursor:text;font:inherit}
.v4-advr-v:hover{background:var(--hover)}.v4-advr-v .ic{opacity:0;color:var(--ink-3)}.v4-advr-v:hover .ic{opacity:1}
.v4-advr-e{display:flex;gap:6px}.v4-advr-e .v4-in{flex:1}
.v4-pre{white-space:pre-wrap;font:13px/19px var(--font);margin:12px 0 0;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
@media (max-width:900px){.v4-show{grid-template-columns:52px minmax(0,1fr) auto}.v4-show-a,.v4-show-t{display:none}}
@media (max-width:700px){.v4-advr{grid-template-columns:1fr;gap:2px;padding:6px 0}.v4-2f{grid-template-columns:1fr}}
/* 26 ott · sidebar a gruppi: titoli più compatti (32 invece di 38) e niente elementi compressi; su schermi bassi la sidebar scorre */
.v4 .v3-sb>*{flex-shrink:0}
.v4 .v3-sb .v3-grp{padding:12px 12px 4px}
@media (max-height:960px){.v4 .v3-sb .v3-sto .bar{display:none}.v4 .v3-sb .v3-sto{padding-top:8px;padding-bottom:8px}.v4 .v3-sb .v3-grp{padding-top:8px}}
@media (max-width:700px){.v4-showp .v4-proh-a{flex-wrap:wrap}.v4-showp .v4-proh-a .btn{flex:1 1 140px}}
.v4-show.sel{background:var(--selected,rgba(255,255,255,.07))}
.v4-show{grid-template-columns:52px minmax(180px,1fr) 130px 100px minmax(0,auto)}
@media (max-width:900px){.v4-show{grid-template-columns:52px minmax(0,1fr) auto}}
.v4-show>:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:220px}
/* 26 ott · contratto e fatture dello show */
.v4-paper{gap:6px}
.v4-doc{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--surface-2);margin-top:12px}
.v4-doc-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px}.v4-doc-h b{font:700 20px/26px var(--font)}
.v4-doc-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 8px}.v4-doc-2 p{margin:4px 0 0;font-size:13.5px;line-height:19px}
.v4-doc .kv{min-height:36px}
@media (max-width:700px){.v4-doc-2{grid-template-columns:1fr}}

/* 26 ott · griglie di card che riempiono la riga: misura minima fissa (Pros 248 · Catalog 184 · Discover 208), le card crescono
   di poco fino al bordo e appena c'è spazio per un'altra card alla misura minima se ne aggiunge una. Niente vuoto prima della colonna destra.
   Prima: repeat(auto-fill, misura fissa) allineato a sinistra. */
@media (min-width:701px){
  .v4-pros{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
  .v4-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
  .v4-disc{grid-template-columns:repeat(auto-fill,minmax(208px,1fr))}
}

/* ── 26 ott · Pros stile Apple Music: hero, scaffale di categorie, card con immagine, mappa ── */
.v4-pros-p{display:flex;flex-direction:column;gap:16px}.v4-pros-p>.v4-ph{margin-bottom:0}
.v4-hero2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.v4-feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;min-height:240px;padding:20px 22px;border:0;border-radius:20px;overflow:hidden;cursor:pointer;text-align:left;color:#fff;background-size:cover;background-position:center;font:inherit}
.v4-feat::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72) 100%)}
.v4-feat>*{position:relative}.v4-feat .t-cap{color:rgba(255,255,255,.8)}.v4-feat b{font:700 26px/30px var(--font);letter-spacing:-.01em}.v4-feat em{font-style:normal;font-size:14px;color:rgba(255,255,255,.85)}
.v4-feat:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.78) 100%)}
.v4-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.v4-tile2{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;padding:14px;border:0;border-radius:16px;overflow:hidden;cursor:pointer;color:#fff;background-size:cover;background-position:center;font:inherit;text-align:left}
.v4-tile2::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,0,0,.1),rgba(0,0,0,.65))}
.v4-tile2>*{position:relative}.v4-tile2 b{font:700 18px/22px var(--font)}.v4-tile2 em{font-style:normal;font-size:12.5px;opacity:.85}.v4-tile2 .ic{position:absolute;top:14px;left:14px}
.v4-areas{flex-wrap:wrap}
.v4-pros2{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:20px 16px}
.v4-pro2{display:flex;flex-direction:column;gap:10px;cursor:pointer;min-width:0;border-radius:18px}
.v4-pro2:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.v4-pro2-i{position:relative;aspect-ratio:4/3;border-radius:16px;background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--line)}
.v4-pro2:hover .v4-pro2-i{filter:brightness(1.06)}
.v4-pro2-a{position:absolute;left:12px;bottom:-16px;border-radius:50%;box-shadow:0 0 0 3px var(--surface)}.v4-pro2-a .v4-sq{border-radius:12px}
.v4-heart.on-img{position:absolute;top:8px;right:8px;margin:0;background:rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(6px)}.v4-heart.on-img.on{color:var(--err)}
.v4-pro2-b{display:flex;flex-direction:column;gap:2px;padding:12px 2px 0;min-width:0}
.v4-pro2-b .t-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-pro2-f{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:13.5px}.v4-pro2-f b{font-weight:600}
.v4-pro2.hl .v4-pro2-i{box-shadow:0 0 0 2px var(--accent)}
.v4-map{position:relative;width:100%;height:100%;min-height:360px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.v4-map svg{position:absolute;inset:0;width:100%;height:100%}
.v4-map .land{fill:var(--surface);stroke:var(--line-strong);stroke-width:.8}
.v4-pin{position:absolute;transform:translate(-50%,-100%);display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 12.5px/1 var(--font);cursor:pointer;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.v4-pin em{font-style:normal;min-width:18px;height:18px;border-radius:9px;background:var(--surface-3,var(--line));display:grid;place-items:center;font-size:11px;padding:0 4px}
.v4-pin:hover,.v4-pin.hl{transform:translate(-50%,-100%) scale(1.06);z-index:2}
.v4-pin.on{background:var(--ink);color:var(--ink-inv);border-color:var(--ink);z-index:3}.v4-pin.on em{background:rgba(255,255,255,.2)}
.v4-map-c{position:absolute;right:10px;bottom:8px;font-size:10.5px;color:var(--ink-3)}
.v4-mapv{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.1fr);gap:16px;align-items:start}
.v4-mapv-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px 14px}
.v4-mapv-m{position:sticky;top:16px;height:calc(100vh - 260px);min-height:380px}
@media (max-width:1100px){.v4-mapv{grid-template-columns:1fr}.v4-mapv-m{position:static;height:360px;order:-1}}
@media (max-width:700px){.v4-hero2{grid-template-columns:1fr}.v4-feat{min-height:180px}.v4-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-pros2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.v4-pro2-f{flex-direction:column;gap:2px}}
/* 26 ott · grafico unico: valore del periodo e valore all'hover nella stessa cella (niente salto dei controlli) */
.v4-met-st{display:grid;min-width:0}.v4-met-st>*{grid-area:1/1;min-width:0}.v4-met-st>.off{visibility:hidden}

/* 26 ott · check mobile: ogni tabella su telefono mostra solo le colonne che contano, sempre col nome */
@media (max-width:700px){
  .v4-tbl:not(.v4-cat) .v4-tr{padding:0 8px 0 12px;gap:10px}
  .v4-ctbl .v4-tr{grid-template-columns:minmax(0,1fr) minmax(0,38%)}.v4-ctbl .v4-tr>:nth-child(n+3){display:none}.v4-ctbl .v4-tr>:nth-child(2){text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .v4-tbl-s .v4-tr>*,.v4-val-t .v4-tr>*{display:block}.v4-tbl-s .v4-tr>.nm,.v4-val-t .v4-tr>.nm{display:flex}/* la regola ≤1100 nascondeva le colonne 3, 5, 6 */
  .v4-tbl-s .v4-tr{grid-template-columns:minmax(0,1fr) auto auto}
  .v4-tbl-s[aria-label="Splits from others"] .v4-tr>:nth-child(1),.v4-tbl-s[aria-label="Splits from others"] .v4-tr>:nth-child(3),.v4-tbl-s[aria-label="Splits from others"] .v4-tr>:nth-child(4){display:none}
  .v4-tbl-s[aria-label="Splits on my releases"] .v4-tr>:nth-child(2),.v4-tbl-s[aria-label="Splits on my releases"] .v4-tr>:nth-child(3),.v4-tbl-s[aria-label="Splits on my releases"] .v4-tr>:nth-child(6){display:none}
  .v4-val-t .v4-tr{grid-template-columns:minmax(0,1fr) 56px 84px}.v4-val-t .v4-tr>:nth-child(n+4){display:none}
  .v4-val-t .v4-tr.h>*:not(:first-child),.v4-val-t .v4-tr>.num{text-align:right}
  .v4-tbl-s .v4-tr>.num,.v4-tbl-s .v4-tr.h>*:not(:first-child){text-align:right}
  .v4-tbl-s[aria-label="Splits from others"] .v4-tr.h>:nth-child(2){text-align:left}
  .v4-tbl.v4-tbl-s[aria-label="Splits on my releases"] .v4-tr>:nth-child(4){display:block;text-align:right}
}
/* 26 ott · flussi a pagina (New send, Book): al primo passo a sinistra c'era una seconda × uguale a quella di destra; resta solo quella a destra (← compare dal secondo passo) */
.v4 .v3-flow .fh>.ibtn:first-child[aria-label="Close"]{visibility:hidden}
/* 27 ott · Listen › Following: la card artista prendeva le misure della copertina .art (40×40, overflow hidden) → cerchi tagliati a metà, nomi invisibili */
.v3-lcard.art{height:auto;overflow:visible;background:none;border-radius:0}
/* 27 ott · barra di Calendar/Rollouts: il periodo ("3 releases · 2 coming up") resta intero; se manca spazio è lo switch dello zoom a scorrere (prima "3 rele…") */
.v4-cal-bar .v4-period{flex-shrink:0}
.v4-cal-bar .v4-zoom{min-width:0;overflow-x:auto;scrollbar-width:none}
.v4-cal-bar .v4-zoom::-webkit-scrollbar{display:none}
.v4-bx .v4-req>.row{flex-direction:row;gap:var(--s3);padding-left:0;padding-right:0}
/* Calendar: con la colonna Tasks aperta la barra non ci stava (760 su 594px: il mese spariva e "Month · Agenda" finivano sotto la colonna).
   Quando manca spazio: "Calendars" diventa solo pallini, scorciatoie da tastiera nascoste (restano su ?), switch delle viste più stretto */
.v4-cal-bar{container-type:inline-size}
@container (max-width:780px){.v4-cal-bar>.btn.ghost{font-size:0;gap:4px}.v4-cal-bar>.btn.ghost .ic{width:14px;height:14px}.v4-cal-bar>.ibtn:last-child{display:none}}
@container (max-width:660px){.v4-cal-bar>.seg button{padding-left:9px;padding-right:9px}}
/* sotto i 600px di barra (colonna Tasks aperta su schermi da 1280) nemmeno così ci sta: le opzioni di vista (Calendars, Day · Week · Month · Agenda) vanno sulla riga sotto, come i chip "come lo guardi" */
.v4-cal-bar{flex-wrap:wrap;row-gap:8px}
@container (max-width:600px){.v4-cal-bar>span:empty{flex-basis:100%;height:0}}

/* ══ 27 ott · audit design system: regole di brand uniche (tavola in v4/Design system.html › Regole di brand) ══ */
/* Badge: due misure sole — in riga 18px (11px), sopra un'icona 16px (10px). Mai compressi: nelle righe la colonna di destra li schiacciava a 14px */
.badge{flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}/* inline ignorava l'altezza: in una colonna a blocchi il badge diventava alto 14 */
/* Navigazione: stessa misura nella sidebar e nella colonna 2 (prima 14.5 e 14px una accanto all'altra) */
.v4-c2-it{font-size:14.5px}
/* Titoli di blocco: un solo stile dentro le card, 600 14px (la panoramica della traccia era 600 15px) */
.v4-am-s h3{font:600 14px/20px var(--font)}
/* CTA principali (flag rw4-cta): Sends torna ad avere New send nella pagina; azioni dell'intestazione in gruppo, secondarie prima, primaria a destra */
html.rw-cta .v4 #main:has([aria-label="Sent or received"]) .v3-head .acts .btn.primary{display:inline-flex}
.v4-ph-a{display:flex;align-items:center;gap:8px;flex:none}
/* Folders · Collections · Shared with you: intestazione v4 con la sua azione al posto dell'Upload della v3 */
.v4-ownhead>.v3-col>.v3-head{display:none}
.v4 .v3-main>.v4-ownhead>.v4-ownh{padding-bottom:0;min-height:0}
.v4 .v3-main>.v4-ownhead>.v3-col{padding-top:0}
/* Chats: titolo della pagina come in tutte le altre (era 24px) */
html.rw-cta .v4-clist-h h1{font:var(--t-title);letter-spacing:var(--track-tight)}
/* 27 ott · avatar: mai deformati (in New list le persone diventavano ellissi larghe 100px) */
.av{flex:none!important}
/* la regola ".v4-pick span:nth-of-type(1){flex:1}" (per il nome) allargava avatar e icone che vengono prima */
.v4-pick>.dot,.v4-pick>.art,.v4-pick>span.av{flex:none!important}
.v4-pick>span.av+span,.v4-pick>.dot+span{flex:1}
/* 27 ott · ‹ › nella top bar (Spotify): cronologia della sessione, disattivate quando non c'è niente */
.v4-tb-nav{display:flex;gap:4px;align-items:center;justify-self:start}
.v4-tb-nav .ibtn{width:36px;height:36px;border-radius:50%;background:var(--surface-2)}
.v4-tb-nav .ibtn:disabled{opacity:.35;cursor:default;background:transparent}
.v4-tb-nav .ibtn:not(:disabled):hover{background:var(--hover)}

/* 27 ott · sidebar: Storage, Settings e account fissi in fondo; le voci scorrono sotto con una sfumatura (flag html.rw-sbfoot, off: localStorage rw4-sbfoot="off") */
html.rw-sbfoot .v4 .v3-sb>.v3-foot{position:sticky;bottom:0;z-index:2;background:var(--bg);margin-top:auto}
html.rw-sbfoot .v4 .v3-sb>.v3-foot::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;background:var(--bg)}
html.rw-sbfoot .v4 .v3-sb>.v3-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px;pointer-events:none;background:linear-gradient(to top,var(--bg),transparent)}
/* 27 ott · sidebar: anche logo e switch Studio/Listen fissi in alto; scorrono solo le voci in mezzo, con sfumatura sotto lo switch (flag html.rw-sbtop, off: localStorage rw4-sbtop="off") */
html.rw-sbtop .v4 .v3-sb>.v4-logo{position:sticky;top:0;z-index:3;background:var(--bg);box-shadow:0 -10px 0 var(--bg)}
html.rw-sbtop .v4 .v3-sb>.v4-mrow{position:sticky;top:54px;z-index:3;background:var(--bg);box-shadow:0 -14px 0 var(--bg)}
html.rw-sbtop .v4 .v3-sb>.v4-mrow::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px;pointer-events:none;background:linear-gradient(to bottom,var(--bg),transparent)}
/* 27 ott · sidebar senza rimbalzo: la colonna non scorre più, scorre solo il blocco delle voci in mezzo (flag html.rw-sbmid, off: localStorage rw4-sbmid="off") */
html.rw-sbmid .v4 .v3-sb{overflow:hidden;overscroll-behavior:none}
html.rw-sbmid .v4 .v3-sb>.v4-logo,html.rw-sbmid .v4 .v3-sb>.v4-mrow,html.rw-sbmid .v4 .v3-sb>.v3-foot{flex:none}
html.rw-sbmid .v4 .v3-sb>.v4-sbmid{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;scrollbar-width:none;margin:0 -14px;padding:0 14px 8px}
html.rw-sbmid .v4 .v3-sb>.v4-sbmid::-webkit-scrollbar{display:none}

/* ── 28 ott · bento Revolut (U.RBox, interruttore rw4-rbento="off"): titolo dentro la card, › accanto al titolo se la sezione si apre,
   tab dentro sotto il titolo, righe senza seconda cornice ── */
.v4-rb{gap:8px;padding:14px 12px 10px}
.v4-rb>.v4-bx-h{padding:0 6px;min-height:32px}
.v4-bx-t{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:0 -8px;padding:0 8px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink);font:inherit;text-align:left}
button.v4-bx-t{cursor:pointer}
button.v4-bx-t:hover{background:var(--hover)}
.v4-bx-t h3{margin:0;font:600 16px/22px var(--font);color:var(--ink)}
.v4-bx-t .n{font:500 14px/22px var(--font);color:var(--ink-3)}
.v4-bx-t .ic{color:var(--ink-3);flex:none}
.v4-rb-tabs{padding:0 6px 2px}
.v4-rb .group{background:none;box-shadow:none;border:0;padding:0;border-radius:0}
.v4-rb>.card{background:none;box-shadow:none;border:0;padding:0}
.v4-rb .row,.v4-rb .v3-row{margin:0}
.v4-rb .v4-h5-pl{padding:4px 6px 8px}
.v4-h5>.v4-rb,.v4-h5-2>.v4-rb{margin:0}
.v4-h5-2:has(>.v4-rb){align-items:stretch}
/* Overview della traccia: sezioni come bento uno sotto l'altro */
.v4-am:has(>.v4-rb){gap:16px;padding-top:8px}
.v4-am>.v4-rb .v4-am-b{padding:0 6px 4px}
.v4-am>.v4-rb .v4-am-g{margin:0 -4px}
.v4-am>.v4-rb .v4-am-nb{padding:2px 6px 6px}
.v4-am>.v4-rb .v4-am-p{padding:2px 0 4px}
.v4-rb-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 16px;padding:4px 6px 8px}
.v4-rb-kv div{display:flex;flex-direction:column;gap:2px;min-width:0}
.v4-rb-kv span{font:500 12.5px/17px var(--font);color:var(--ink-2)}
.v4-rb-kv b{font:500 15px/20px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.v4-rb-kv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v4-rbx .v3-sech .v4-bx-t h3,.v4-box .v4-bx-t h3{font:inherit;font-weight:600}
/* 28 ott · bento Revolut ovunque: titolo di sezione (SecH) seguito da una lista o card = un solo bento con il titolo dentro */
.v4-sech{flex-wrap:wrap}
.v4-sech .btn.sm{margin-left:auto}
.v4-sech .v4-bx-t h3{font:inherit}
.v3-sech.v4-sech:has(+.group),.v3-sech.v4-sech:has(+.card){margin:0!important;padding:14px 18px 6px;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
.v3-sech.v4-sech+.group,.v3-sech.v4-sech+.card{border-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important;padding-top:0}
.v4-bx-h .btn.sm{margin-left:auto}
.v3-sech.v4-sech+.group,.v3-sech.v4-sech+.card{background:var(--surface)!important}
.v3-sech.v4-sech:is(:has(+.group),:has(+.card)):not(:first-child){margin-top:16px!important}
/* 28 ott · hover e selezione dentro i bento con angoli tondi come Revolut (16px, la riga non tocca il bordo della card) */
.v4-bx :is(.row,.v3-row,.v4-tlis,.v4-agr-r,.v4-am-c),.group :is(.row,.v3-row),.v4-box :is(.row,.v3-row){border-radius:16px}
/* 28 ott · release come raccolta */
.v4-rel .v4-rb{margin-top:16px}
.v4-rel-k{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 6px}
.v4-rel .note{margin:0 6px;flex-wrap:wrap}
.v4-rel-na{display:inline-flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.v4-rel .v4-rb>p.t-sub{padding:0 6px 6px}
.v4-chk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;border:1.5px solid var(--line-strong,var(--line));flex:none}
.v4-chk.on{background:var(--accent,var(--blue));border-color:transparent;color:var(--on-accent,#fff)}
/* 28 ott · hero senza alone scuro intorno alla copertina; lucchetto privato/pubblico accanto al titolo */
.v4-hero-art{box-shadow:none}
.v4-lock{display:inline-flex;vertical-align:middle;margin-left:10px;color:var(--ink-3);position:relative;top:-3px}
.v4-hero.grad .v4-lock{color:var(--hi-2)}

/* ── 28 ott · Catalog = Demos · Releases (pages4.jsx, rw4-cat2; off: localStorage rw4-cat2="off") ──
   Tessere come [untitled]: un tocco apre; Play in basso a destra sulla copertina (all'hover su desktop, sempre al tocco, e mentre suona = Pause);
   cartelle e collection con mosaico 2×2; titolo + sotto-riga + ⋯ sotto la copertina. Una sola riga di strumenti che non va a capo. */
.v4-cat2 .v4-tool1{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.v4-cat2 .v4-tool1::-webkit-scrollbar{display:none}
.v4-cat2 .v4-tool1>*{flex:none}.v4-cat2 .v4-tool1 .v4-fbar{flex-wrap:nowrap}
.v4-gc2{padding:0 0 4px;gap:0;border:0;border-radius:0}.v4-gc2:hover{background:transparent}
.v4-gc2 .cv{margin-bottom:10px;border-radius:12px;overflow:hidden}.v4-gc2 .cv .art{border-radius:12px;display:block}
.v4-gc2:hover .cv .art,.v4-gc2:hover .v4-mos{filter:brightness(.92)}
.v4-gpl{position:absolute;right:8px;bottom:8px;width:40px;height:40px;border-radius:12px;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(20,20,26,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity var(--dur,.16s)}
.v4-gc2:hover .v4-gpl,.v4-gpl.on,.v4-gpl:focus-visible{opacity:1}
@media (hover:none){.v4-gpl{opacity:1}}
.v4-gcm{display:flex;align-items:flex-start;gap:4px;min-width:0}
.v4-gcm .tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.v4-gcm .v4-tl{font:var(--t-row,500 15px/20px var(--font));color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.v4-gcm .v4-tl:hover{text-decoration:underline}
.v4-gcm .t-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-gcm .pill{align-self:flex-start;margin-top:6px}
.v4-gcm .ibtn,.v4-gcm button{flex:none;margin:-6px -6px 0 0}
.v4-mos{position:relative;aspect-ratio:1;width:100%;border-radius:12px;background:var(--surface-2);color:var(--ink-3,var(--ink-2));display:grid;place-items:center;overflow:hidden}
.v4-mos.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;place-items:stretch}
.v4-mos>span{display:block;width:100%;height:100%;background-size:cover;background-position:center}
.v4-mos>i{display:block;background:var(--surface-3,var(--surface-2))}
.v4-mos.sm{width:40px;height:40px;flex:none;border-radius:4px;gap:1px}
.v4-rel-more{margin:4px 0 0 12px}
.v4-cat2 .v4-rb{margin-bottom:16px}
@media (max-width:700px){
  .v4-cat2 .v4-sortb .l{display:none}
  /* telefono: lo switch della vista è un solo pulsante (mostra l'altra vista) */
  .v4-cat2 .v4-vt button[aria-pressed="true"]{display:none}
  .v4-cat2 .v4-grid{gap:20px 14px}
  .v4-gcm button{min-width:44px;min-height:44px;margin:-12px -12px 0 0}
}
.v4-mos-b{position:absolute;left:8px;top:8px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;background:rgba(20,20,26,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* 28 ott (2) · Catalog: niente effetti hover al tocco (su iPhone un elemento che compare all'hover si "mangia" il primo tocco: casella di selezione, Play);
   Play più grande come [untitled]; lista = Group + Row come il resto dell'app */
.v4-gpl{width:48px;height:48px;border-radius:14px;right:10px;bottom:10px}
@media (hover:none){
  .v4-gc .v4-ck:not(.on),.v4-rl-ck{display:none!important}
  .v4-gc:hover{background:transparent}.v4-gc2:hover .cv .art,.v4-gc2:hover .v4-mos{filter:none}
  .v4-gpl{width:52px;height:52px;border-radius:16px;right:8px;bottom:8px}
}
.v4-rl{display:flex;align-items:center;gap:8px;flex:none}
.v4-rl-ck{width:20px;display:grid;place-items:center;flex:none}
.v4-rl-ck .v4-ck{opacity:0}.row:hover .v4-rl-ck .v4-ck,.v4-rl-ck .v4-ck.on{opacity:1}
.v4-cat2 .group .v4-mos.sm{width:40px;height:40px}
@media (max-width:700px){.v4-rl-av{display:none}}
/* riga degli strumenti di Catalog: tutti i controlli alla stessa altezza, icone centrate (32 desktop · 40 telefono) */
.v4-cat2 .v4-tool1{gap:8px;min-height:40px}
.v4-cat2 .v4-tool1 .v4-sortb{height:32px;min-width:32px;justify-content:center}
.v4-cat2 .v4-vt{height:32px;box-sizing:border-box;align-items:center}
.v4-cat2 .v4-vt .ibtn{width:28px;height:28px;padding:0;display:grid;place-items:center}
.v4-cat2 .v4-vt .ibtn>*{margin:0}
@media (max-width:700px){
  .v4-cat2 .v4-tool1 .v4-fb,.v4-cat2 .v4-tool1 .v4-fb-b{height:40px}
  .v4-cat2 .v4-tool1 .v4-sortb{width:40px;height:40px;padding:0}
  .v4-cat2 .v4-vt{height:40px;width:40px;padding:0;justify-content:center}
  .v4-cat2 .v4-vt .ibtn{width:40px;height:40px;border-radius:50%;background:transparent!important}
}
@media (max-width:700px){.v4-cat2 .v4-tool1 .v4-fb-b em{display:none}.v4-cat2 .v4-tool1 .v4-fb-b{padding:0 10px 0 14px}}
/* 28 ott · pin su release, cartelle e collection: puntina piccola prima della sotto-riga */
.v4-pinic{display:inline-block;vertical-align:-1px;margin-right:4px;color:var(--ink-3)}