/* ============================================================================
   app.css — supplemento cueBase  ·  S16 re-skin
   ----------------------------------------------------------------------------
   cueBase (cuebase.css) è il sistema visivo PRIMARIO. Qui SOLO:
   (1) stili dei layout senza-shell (auth, print, live) — niente <style> inline,
   (2) componenti pilotati da JS (app.js/pwa.js) il cui CONTRATTO di classi/ID
       non cambia (tab, editor scalette, vista live, builder smart list, badge),
   (3) utility e classi "dato→stile" usate dai template,
   espressi con i TOKEN cueBase (dark). Caricato DOPO cuebase.css in OGNI layout.

   VINCOLO CSP (public/.htaccess): `style-src 'self'; script-src 'self'`.
   → Niente <style> e niente style="" nei template; niente handler inline.
   → I valori DINAMICI (larghezze barre, %, posizioni, colori categoria) si
     applicano via data-* + CSSOM in app.js (vedi applyDynamicStyles).
   ============================================================================ */

/* ── reset minimi per form inline nello shell ─────────────────────────────── */
.inline { display: inline; margin: 0; }
.inline-form { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ── topbar: project switcher come <form>, search come <input> reale ──────── */
.proj { border: 1px solid var(--line-2); }
.proj .stack { gap: 1px; align-items: flex-start; }
.proj-select {
    appearance: none; background: transparent; border: none; color: var(--text);
    font: 600 14px var(--ui); letter-spacing: -.01em; cursor: pointer; padding: 0; max-width: 150px;
}
.proj-select:focus-visible { outline: 2px solid var(--amber-warm); outline-offset: 2px; border-radius: 4px; }
.proj-name { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.search { border: 1px solid var(--line); }
.search input {
    flex: 1; min-width: 0; background: transparent; border: none; color: var(--text);
    font-size: 14px; height: 100%; outline: none;
}
.search input::placeholder { color: var(--faint); }
.search svg { color: var(--muted); flex: none; }
.sync { text-decoration: none; }
.icobtn { cursor: pointer; }
.notif-bell { position: relative; }
.notif-bell .badge { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--danger, #ef4444); color: #fff; font-size: 10px; line-height: 15px; text-align: center; font-weight: 700; }
.tr.unread .tname { font-weight: 700; }
.dotnew { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--info, #3b82f6); margin-right: 7px; vertical-align: middle; }

/* --- S1: player stems + mini mixer --- */
.stems-player { margin-top: .4rem; }
.sp-transport { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.sp-play { min-width: 2.6rem; }
.sp-bar { flex: 1; min-width: 8rem; height: 8px; background: var(--line, #2a2a33); border-radius: 4px; cursor: pointer; overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 0; background: var(--go, #6ee7b7); }
.sp-time { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--muted, #9aa0ad); min-width: 5.5rem; text-align: right; }
.sp-offline.on { color: var(--go, #6ee7b7); }
.sp-mix { display: grid; gap: .5rem; }
.sp-strip { display: flex; align-items: center; gap: .7rem; padding: .4rem .6rem; background: var(--surface-2, #1b1b22); border-radius: 8px; }
.sp-name { min-width: 8rem; font-weight: 600; display: flex; flex-direction: column; }
.sp-name small { font-weight: 400; color: var(--muted, #9aa0ad); font-size: .72rem; }
.sp-vol { flex: 1; min-width: 6rem; }
.sp-btns { display: flex; gap: .3rem; }
.sp-solo, .sp-mute { width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid var(--line, #2a2a33); background: transparent; color: var(--muted, #9aa0ad); cursor: pointer; font-weight: 700; }
.sp-solo.on { background: var(--amber, #f59e0b); color: #1a1205; border-color: transparent; }
.sp-mute.on { background: var(--danger, #ef4444); color: #fff; border-color: transparent; }
.sp-del { width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid var(--line, #2a2a33); background: transparent; color: var(--muted, #9aa0ad); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.sp-del:hover { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.sp-midi { margin-top: .7rem; }
.sp-cat { max-width: 7.5rem; }
.live-room { margin: .4rem 0 1rem; }
.live-status { display: inline-block; padding: .45rem .8rem; border-radius: 8px; background: var(--surface-2, #1b1b22); font-size: .9rem; }
.live-status.ok { color: var(--go, #6ee7b7); }
.live-status.err { color: var(--danger, #ef4444); }
.live-pick .tname { font-weight: 600; }

/* ── selettore progetto con semaforino (FASE A): <details> nativo, CSP-safe ── */
.projsel { position: relative; }
.projsel > summary { list-style: none; cursor: pointer; }
.projsel > summary::-webkit-details-marker { display: none; }
.projsel[open] > summary { outline: 2px solid var(--amber-warm); outline-offset: 2px; }
.sdots { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.sdot.due { background: var(--danger); }
.sdot.req { background: var(--amber); }
.sdot.fresh { background: var(--info); }
.projsel-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 240px; max-width: 320px; padding: 6px;
    background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md);
    box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 2px;
}
.projsel-item {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px;
    width: 100%; text-align: left; cursor: pointer;
    background: transparent; border: none; color: var(--text);
    padding: 8px 10px; border-radius: var(--r-sm); font: inherit;
}
.projsel-item:hover { background: var(--line); }
.projsel-item.on { background: var(--line-2); }
.projsel-item .pi-name { font-weight: 600; font-size: 14px; }
.projsel-item .pi-tip { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }

/* ── rail: su mobile la bottom-nav scrolla in orizzontale (molti moduli) ──── */
@media (max-width: 899px) {
    .rail { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; gap: 2px; scrollbar-width: none; }
    .rail::-webkit-scrollbar { display: none; }
    .rail-i { flex: 0 0 auto; min-width: 56px; }
}

/* ============================================================================
   AUTH layout (layouts/auth) — niente shell
   ============================================================================ */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px;
    background: radial-gradient(120% 80% at 50% -10%, #161320, var(--bg) 50%, var(--bg-deep)); }
.authcard { width: 100%; max-width: 400px; }
.authlogo { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 26px; }
.authlogo .mark { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
    background: linear-gradient(160deg, #1d1a24, #100e15); border: 1px solid var(--line-2); }
.authlogo .mark svg { width: 38px; height: 38px; }
.authlogo h1 { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; }
.authlogo h1 .o { color: var(--amber); }
.authwave { height: 30px; position: relative; margin: 18px 0 4px; }
.authwave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================================================================
   PRINT layout (layouts/print) — anteprima scura, pulita su carta
   ============================================================================ */
.print-body { padding: 0 16px; }
.printbar { max-width: 780px; margin: 18px auto 0; display: flex; justify-content: flex-end; gap: 10px; }
.sheet { max-width: 780px; margin: 18px auto 40px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 36px 44px; }
.sheet h1 { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; }
.sheet .meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.seth { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-warm);
    margin: 26px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.pl { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dotted var(--line-2); }
.pl .n { font-family: var(--mono); font-size: 13px; color: var(--faint); width: 26px; flex: none; }
.pl .t { font-weight: 600; font-size: 16px; flex: 1; }
.pl .t small { font-weight: 400; color: var(--muted); margin-left: 8px; font-size: 12px; }
.pl .k { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.pl .d { font-family: var(--mono); font-size: 12px; color: var(--faint); width: 48px; text-align: right; flex: none; }
.pbreak { font-family: var(--mono); font-size: 11px; color: var(--amber-warm); padding: 7px 0; font-style: italic; }
.sheet .note { font-size: 13px; color: var(--muted); margin-top: 6px; white-space: pre-wrap; }
@media print {
    .printbar { display: none; }
    .print-body { padding: 0; }
    body { background: #fff; }
    .sheet { border: none; border-radius: 0; margin: 0; max-width: none; background: #fff; color: #000; padding: 0; }
    .sheet h1, .pl .t { color: #000; }
    .seth { color: #000; border-color: #999; }
    .pl { border-color: #ccc; }
    .pl .n, .pl .k, .pl .d, .sheet .meta, .sheet .note { color: #444; }
}

/* ============================================================================
   TABS  (app.js: anchor .tab[href="#id"] + .tabpanel, toggla .is-active, body.js)
   cueBase stila .tab.on → alias .is-active + show/hide pannelli.
   Senza JS: tutti i pannelli restano visibili (fallback onesto).
   ============================================================================ */
.tabs .tab.is-active { color: var(--text); border-bottom-color: var(--amber); }
.tabpanel { padding-top: var(--s5); }
body.js .tabpanel { display: none; }
body.js .tabpanel.is-active { display: block; }

/* ============================================================================
   BADGE OFFLINE (pwa.js crea .pwa-net e lo appende a <body>)
   ============================================================================ */
.pwa-net { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; text-align: center;
    font-family: var(--mono); font-size: 11.5px; padding: 0; max-height: 0; overflow: hidden; transition: max-height .2s, padding .2s; }
.pwa-net-off { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger);
    border-top: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); padding: .5rem .8rem; max-height: 4rem; }
@media (max-width: 899px) { .pwa-net-off { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); } }

/* ============================================================================
   CLASSI "dato → stile" (valori dinamici applicati da app.js via data-*)
   ============================================================================ */
/* pallino colore categoria */
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--muted)); display: inline-block; flex: none; }
/* chip categoria colorata dal token --c (impostato via data-c) */
.cat-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 7px;
    color: var(--c, var(--muted)); background: color-mix(in srgb, var(--c, var(--muted)) 16%, transparent); }
/* evento calendario colorato dal token --c */
.evt[data-c] { background: color-mix(in srgb, var(--c) 18%, transparent); color: color-mix(in srgb, var(--c) 78%, var(--text)); }

/* ============================================================================
   UTILITY per i template (no inline style sotto CSP)
   ============================================================================ */
.nolist { list-style: none; margin: 0; padding: 0; }
.kpi .v[data-small] { font-size: 15px; font-family: var(--ui); font-weight: 600; letter-spacing: 0; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.ar { text-align: right; }
.fs-sm { font-size: 12.5px; }
.fs-xs { font-size: 11px; }
.link { color: var(--primary); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.full { width: 100%; }
.mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); } .mt6 { margin-top: var(--s6); }
.mb0 { margin-bottom: 0; } .mb2 { margin-bottom: var(--s2); } .mb3 { margin-bottom: var(--s3); }
.mb4 { margin-bottom: var(--s4); } .mb5 { margin-bottom: var(--s5); }
.form--auth { max-width: none; gap: 14px; }

/* ============================================================================
   TOOLBAR FILTRI (form GET con input/select cueBase) + tabelle per-lista
   ============================================================================ */
.toolbar { margin-bottom: var(--s4); }
.toolbar .select-el { width: auto; min-height: 40px; min-width: 140px; padding-top: 8px; padding-bottom: 8px; }
.toolbar .field.search-field { min-width: 200px; max-width: 360px; }
.field.search-field input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--text); font-size: 13.5px; outline: none; }
.field.search-field input::placeholder { color: var(--faint); }
.toolbar .btn { min-height: 40px; }
.count { font-family: var(--mono); font-size: 11px; color: var(--faint); }
/* select/input dentro una flex-row inline (es. quick-log): non a tutta larghezza */
.row > .select-el { width: auto; flex: 1 1 150px; min-height: 40px; }
.row > .input { width: auto; flex: 1 1 130px; }

/* righe-tabella generiche: nome + sottotitolo mono (cueBase .tname/.tsub già definiti) */
.tbl .t-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tbl .t-art { color: var(--muted); font-size: 13px; }
.tbl .tr[data-c] { border-left: 3px solid var(--c); }

/* colonne per-lista (≥760px; sotto: card impilate via cueBase .td[data-h]) */
@media (min-width: 760px) {
  .tbl-songs .thead, .tbl-songs .tr { grid-template-columns: 2.4fr 1.1fr .6fr .5fr 1.4fr auto; }
  .tbl-setlists .thead, .tbl-setlists .tr { grid-template-columns: 2.2fr 1.2fr .7fr .7fr auto; }
  .tbl-smartlists .thead, .tbl-smartlists .tr { grid-template-columns: 2.4fr .8fr auto; }
  .tbl-events .thead, .tbl-events .tr { grid-template-columns: 2fr 1.2fr 1.1fr .9fr auto; }
  .tbl-contacts .thead, .tbl-contacts .tr { grid-template-columns: 2fr 1.4fr 1.2fr auto; }
  .tbl-checklists .thead, .tbl-checklists .tr { grid-template-columns: 2.2fr 1.4fr 1fr auto; }
  .tbl-files .thead, .tbl-files .tr { grid-template-columns: 2.4fr .7fr .8fr 1fr auto; }
  .tbl-tx .thead, .tbl-tx .tr { grid-template-columns: 1fr 1.6fr 1.2fr 1fr auto; }
  .tbl-funds .thead, .tbl-funds .tr { grid-template-columns: 2fr 1fr auto; }
  .tbl-invoices .thead, .tbl-invoices .tr { grid-template-columns: 1.6fr 1.4fr 1fr 1fr auto; }
  .tbl-stage .thead, .tbl-stage .tr { grid-template-columns: 2.2fr 1.2fr .8fr auto; }
  .tbl-users .thead, .tbl-users .tr { grid-template-columns: 1.6fr 1.6fr .8fr auto; }
  .tbl-sessions .thead, .tbl-sessions .tr { grid-template-columns: 1.4fr 2fr .8fr auto; }
  .tbl-results .thead, .tbl-results .tr { grid-template-columns: 2fr 1.2fr .6fr .6fr .8fr 1.4fr; }
  .tbl-inputs .thead, .tbl-inputs .tr { grid-template-columns: 40px 2fr 1fr .9fr .5fr .5fr 1fr auto; }
  .tbl-goals .thead, .tbl-goals .tr { grid-template-columns: 2.4fr 1fr auto; }
}

/* stage plot canvas (cueBase .stage-canvas/.stage-el; aggiunte fondo/empty/drag/tipi) */
.stage-back { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); padding: 5px; border-bottom: 1px dashed var(--line-2); }
.stage-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 13px; padding: 20px; text-align: center; }
.stage-el { touch-action: none; }
.stage-el.dragging { opacity: .75; z-index: 50; cursor: grabbing; }
.stage-el.amp .glyph, .stage-el.di .glyph { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.stage-el.drums .glyph, .stage-el.keys .glyph { background: color-mix(in srgb, var(--secondary) 16%, var(--surface)); border-color: color-mix(in srgb, var(--secondary) 38%, transparent); }
.stage-el.power .glyph, .stage-el.stand .glyph { background: color-mix(in srgb, var(--success) 14%, var(--surface)); border-color: color-mix(in srgb, var(--success) 34%, transparent); }

/* anteprima file (preview inline; classi usate da views/files/show.php) */
.file-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-deep); }
.file-image { max-width: 100%; height: auto; border-radius: var(--r-lg); }
.file-video { max-width: 100%; border-radius: var(--r-lg); background: #000; }

/* ============================================================================
   EDITOR SCALETTE (app.js DnD — NON rinominare: #setlist-editor, .set-block[data-set-id],
   .item-list, .item[draggable][data-item-id], .item-empty, stati .dragging/.dragover)
   ============================================================================ */
.setlist-editor { display: flex; flex-direction: column; gap: 16px; }
.set-block { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--bg-deep); }
.set-head h2 { font-family: var(--display); font-weight: 600; font-size: 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.item-list { list-style: none; display: flex; flex-direction: column; min-height: 8px; }
.item { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: none; }
.item:hover { background: var(--surface-2); }
.item-handle { color: var(--faint); cursor: grab; user-select: none; flex: none; display: flex; }
.item-handle svg { width: 15px; height: 18px; }
.item-title { flex: 1; min-width: 0; font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item-title > svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.item-break .item-title, .item-label .item-title { color: var(--muted); font-style: italic; }
.item-dur { font-family: var(--mono); font-size: 12px; color: var(--faint); flex: none; }
.item-actions { display: flex; gap: 4px; align-items: center; flex: none; position: relative; }
.item.dragging { opacity: .5; }
.item-list.dragover { outline: 2px dashed var(--amber); outline-offset: -4px; border-radius: var(--r-md); }
.item-empty { padding: 14px 16px; color: var(--faint); font-size: 13px; }
.iconbtn-xs { width: 30px; height: 30px; min-height: 30px; padding: 0; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; }
.iconbtn-xs:hover { color: var(--text); background: var(--surface-2); }
.iconbtn-xs svg { width: 13px; height: 13px; }
.editor-tools { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tool { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.tool > summary, .set-manage > summary, .item-edit-pop > summary { cursor: pointer; list-style: none; }
.tool > summary::-webkit-details-marker, .set-manage > summary::-webkit-details-marker, .item-edit-pop > summary::-webkit-details-marker { display: none; }
.tool > summary { padding: 13px 18px; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.tool[open] > summary { border-bottom: 1px solid var(--line); }
.tool .tool-b { padding: 16px 18px; }
.picker { list-style: none; max-height: 340px; overflow: auto; margin-top: 12px; }
.picker li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.picker li:last-child { border-bottom: none; }
.set-manage[open] > summary, .item-edit-pop[open] > summary { color: var(--amber-warm); }
.item-edit-pop[open] > summary + form { position: absolute; z-index: 20; right: 0; top: 34px; width: 250px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 8px; }
.set-manage[open] > summary + form { margin-top: 10px; }

/* ============================================================================
   CHECKLIST TREE (cueBase .tree; popover azioni + nesting ricorsivo)
   ============================================================================ */
.tree .tree { border-top: 1px solid var(--line); }
.tree-row .ord { display: flex; gap: 3px; align-items: center; position: relative; }
.cl-pop > summary { list-style: none; cursor: pointer; }
.cl-pop > summary::-webkit-details-marker { display: none; }
.cl-pop[open] > summary { color: var(--amber-warm); }
.cl-edit { position: absolute; right: 0; top: 34px; z-index: 20; width: 264px; background: var(--surface-2);
    border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px; box-shadow: var(--shadow-2);
    display: flex; flex-direction: column; gap: 8px; }
.cl-edit .input, .cl-edit .select-el { min-height: 38px; }
.cl-note { padding: 0 16px 10px 50px; color: var(--muted); font-size: 12.5px; }
.tree-item[data-depth="1"] .cl-note { padding-left: 74px; }
.tree-item[data-depth="2"] .cl-note { padding-left: 98px; }

/* ============================================================================
   CALENDARIO — nav mese + fallback lista su mobile (cueBase .cal già stilato)
   ============================================================================ */
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.cal-nav strong { font-family: var(--display); font-size: 18px; min-width: 170px; text-align: center; }
.cal-list { display: none; margin-top: 18px; }
@media (max-width: 759px) { .cal-list { display: block; } }

/* ============================================================================
   SMART LIST BUILDER (app.js — NON rinominare: #cond-rows[data-fields], .cond-row,
   .cond-field, .cond-op, #cond-add, #cond-template)
   ============================================================================ */
#cond-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.cond-row { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr 1fr auto; gap: 8px; align-items: center; }
.cond-row .select-el, .cond-row .input { min-height: 40px; }
@media (max-width: 640px) { .cond-row { grid-template-columns: 1fr 1fr; } }
.cond-logic { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; color: var(--muted); font-size: 13.5px; }
.cond-logic .select-el { width: auto; min-width: 160px; min-height: 40px; }

/* ============================================================================
   VISTA LIVE (layout blank — app.js: .live(.js), .slide(.active), #live-idx/prev/next/fs)
   ============================================================================ */
.live-body { background: var(--bg-deep); }
.liveview { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.live-top { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.live-title { flex: 1; font-weight: 600; font-family: var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-pos { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.live-stage { flex: 1; padding: 28px 22px; display: flex; flex-direction: column; }
.slide { max-width: 900px; margin: 0 auto; width: 100%; }
.liveview.js .slide { display: none; }
.liveview.js .slide.active { display: block; }
.slide-set { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--amber-warm); }
.slide-title { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; margin: 8px 0 14px; }
.slide-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); margin-bottom: 16px; font-family: var(--mono); font-size: 13px; }
.slide-note { background: var(--surface); border-left: 3px solid var(--amber); padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 14px; color: var(--text); }
.slide-chords, .slide-lyrics { white-space: pre-wrap; font-family: var(--mono); line-height: 1.6; margin: 0 0 14px; }
.slide-chords { color: var(--amber-warm); }
.slide-empty { color: var(--faint); }
.live-nav { display: flex; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
.live-nav .btn { flex: 1; justify-content: center; }
.live-size-md .slide-title { font-size: clamp(1.4rem, 4vw, 2rem); } .live-size-md .slide-lyrics, .live-size-md .slide-chords { font-size: clamp(1rem, 2.6vw, 1.2rem); }
.live-size-lg .slide-title { font-size: clamp(1.7rem, 5vw, 2.7rem); } .live-size-lg .slide-lyrics, .live-size-lg .slide-chords { font-size: clamp(1.05rem, 3vw, 1.45rem); }
.live-size-xl .slide-title { font-size: clamp(2rem, 6.5vw, 3.4rem); } .live-size-xl .slide-lyrics, .live-size-xl .slide-chords { font-size: clamp(1.2rem, 3.6vw, 1.8rem); }
.star { color: var(--amber-warm); }

/* ============================================================================
   DASHBOARD — hero "prossimo evento" + griglia widget
   ============================================================================ */
.hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: radial-gradient(85% 80% at 16% -12%, color-mix(in srgb, var(--secondary) 15%, transparent), transparent 52%), linear-gradient(180deg, #121019, #0a090e);
    padding: 26px 28px; margin-bottom: 20px; }
.hero .hero-wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; z-index: 1; }
.hero .hero-in { position: relative; z-index: 2; }
.hero .live-tag { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-warm); }
.hero .live-tag .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.hero h2 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 5vw, 46px); line-height: .98; letter-spacing: -.02em; margin-top: 10px; }
.hero .when { display: flex; gap: 13px; align-items: center; color: var(--muted); margin-top: 12px; flex-wrap: wrap; font-size: 14.5px; }
.hero .when b { color: var(--text); font-weight: 600; }
.hero .cd { font-family: var(--mono); font-weight: 700; font-size: 30px; color: var(--text); letter-spacing: -.02em; }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.dash-quick { display: flex; gap: 9px; flex-wrap: wrap; margin: 22px 0; }
.priv { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.minilist { display: flex; flex-direction: column; }
.minilist .mi { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.minilist .mi:last-child { border-bottom: none; }
.minilist .mi a { text-decoration: none; font-weight: 600; }
.minilist .mi a:hover { color: var(--amber-warm); }
.minilist .mi .when { font-family: var(--mono); font-size: 11px; color: var(--faint); margin: 0; }
.minilist .mi .grow { min-width: 0; }

/* ── sondaggio prove: banner CTA in dashboard + voto + risultati ──────────── */
.poll-cta { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-bottom: 18px; color: var(--text);
    padding: 13px 16px; border-radius: var(--r-lg); transition: .15s;
    background: color-mix(in srgb, var(--amber) 13%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line-2)); }
.poll-cta:hover { background: color-mix(in srgb, var(--amber) 18%, var(--surface)); }
.poll-cta > svg { width: 24px; height: 24px; color: var(--amber-warm); flex: none; }
.poll-cta-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.poll-cta-txt small { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.poll-cta-btn { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap;
    background: var(--amber); color: var(--amber-ink); padding: 9px 15px; border-radius: var(--r-pill); }

.pollvote { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--line); }
.pollvote:last-of-type { border-bottom: none; }
.pollvote-when { font-size: 14px; }
.pollvote-opts { display: flex; gap: 6px; }
.vopt { cursor: pointer; }
.vopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vopt span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: var(--r-pill);
    border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; transition: .14s; }
.vopt input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.vopt-yes input:checked + span { color: var(--success); background: color-mix(in srgb, var(--success) 20%, transparent); border-color: color-mix(in srgb, var(--success) 55%, transparent); }
.vopt-maybe input:checked + span { color: var(--amber-warm); background: color-mix(in srgb, var(--amber) 20%, transparent); border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.vopt-no input:checked + span { color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }

.pollslot { border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; }
.pollslot.lead { border-color: color-mix(in srgb, var(--amber) 50%, var(--line-2)); background: color-mix(in srgb, var(--amber) 7%, transparent); }
.pollslot-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pollslot-when { font-weight: 600; font-size: 14.5px; }
.pollslot-score { display: flex; align-items: center; gap: 8px; }
.pollslot-score .n { font-family: var(--mono); font-weight: 700; font-size: 22px; }
.pollslot-votes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.vchip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }
.vchip.vote-yes { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 12%, transparent); }
.vchip.vote-maybe { color: var(--amber-warm); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 11%, transparent); }
.vchip.vote-no { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.vchip.vote-none { opacity: .55; }

/* ── helper riusabili nei dettagli ────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; align-self: center; }
.kv dd { margin: 0; }
.lyrics, .code-block { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; line-height: 1.7; margin: 0; color: var(--text); }
.chords { color: var(--amber-warm); }

/* tabella stampa (es. input list stage plot in layout print) */
.ps-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.ps-tbl th, .ps-tbl td { border: 1px solid var(--line-2); padding: 5px 8px; text-align: left; }
.ps-tbl th { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg-deep); }
@media print {
    .ps-tbl th, .ps-tbl td { border-color: #bbb; color: #000; }
    .ps-tbl th { background: #f0f0f0; }
    .stage-canvas { background: #fff !important; border-color: #999; }
    .stage-el .glyph { background: #eee; border-color: #999; color: #000; }
    .stage-el .cap { color: #000; }
    .stage-back, .stage-front { color: #666; border-color: #bbb; }
}