* { -webkit-tap-highlight-color: transparent; }

/* Font "arcade" per i mini-giochi (game-over, punteggi). Latin, ~10 KB per peso. */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/chakrapetch-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/chakrapetch-700.woff2) format('woff2');
}

:root {
  --bg:      #05050d;
  --bg2:     #090914;
  --bg3:     #0e0e1f;
  --bg4:     #13132a;
  --border:  #1e1e40;
  --border2: #2a2a55;
  --accent:  #7b5ea7;
  --accent2: #a06dd4;
  --green:   #0fba74;
  --red:     #e84040;
  --amber:   #f5a623;
  --blue:    #3b82f6;
  --coral:   #d85a30;
  --pink:    #d4537e;
  --teal:    #1d9e75;
  --cal-live: #c8ff3d;  /* semaforo calendario: evento in corso / stasera */
  --spotify:  #1db954;
  --paper:     #e9e3d1; /* bacheca: post-it dei messaggi anonimi */
  --paper-ink: #2b2620;
  --stamp:     #d0402f;
  --hand:      'Caveat', 'Bradley Hand', cursive;
  --text:    #e8e8f0;
  --text2:   #8888aa;
  --text3:   #4a4a66;
  --font:    'Rajdhani', sans-serif;
  --mono:    'Share Tech Mono', monospace;
  /* Sistema di elevazione — 3 livelli coerenti (stessa direzione, stessa
     morbidezza), usati per dare peso fisico reale alle superfici invece di
     affidarsi solo a gradient/bordi. sm = card e righe di lista normali,
     md = elementi in evidenza (home card al tocco/hover), lg = modali e
     popup, che stanno "sollevati" sopra tutto il resto. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.28);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.32);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.4), 0 20px 48px rgba(0,0,0,0.45);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--text); font-family: var(--font); min-height: 100vh;
}
/* Barra di scroll nascosta ovunque — resta scrollabile normalmente col dito/
   rotellina, solo la barra visiva sparisce (soprattutto per il WebView
   dell'app Android, dove era più evidente/fastidiosa che su un browser normale). */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Livello fisso vero (non "background-attachment:fixed", che molti WebView
   Android ignorano) — resta sempre ancorato allo schermo, non scrolla mai
   con la pagina, su qualsiasi pagina dell'app. */
#fondaleLuci {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 750px 550px at 15% -10%, rgba(160,109,212,0.24), transparent 65%),
    radial-gradient(ellipse 650px 550px at 100% 100%, rgba(216,90,48,0.18), transparent 65%);
}
.app { max-width: 420px; margin: 0 auto; padding: 20px 16px 40px; }

/* ---- Animazione di apertura app — non blocca mai il tocco
   (pointer-events:none fin da subito). Sparisce quando JS sa cosa mostrare
   sotto (login o la schermata giusta per chi è già loggato), aggiungendo la
   classe .via — vedi _rimuoviSplashApertura() in core.js. Prima spariva da
   sola dopo un tempo fisso (0,6s) qualunque cosa succedesse sotto: per chi
   aveva un token salvato, la riautenticazione richiede un giro col server
   (di solito più di 0,6s) e sotto restava scoperta per un attimo la
   schermata di login "nuda" (visibile di default nell'HTML), anche se poi
   si veniva reindirizzati subito alla propria Home — un lampo di login
   ingannevole (bug segnalato da Andrea, 20/09/2026). #viewLogin ora parte
   display:none come le altre schermate, proprio per evitare quel lampo. ---- */
#splashApertura {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); pointer-events: none;
}
#splashApertura.via { animation: splashVia 0.25s ease forwards; }
#splashLogo {
  font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--accent2);
  letter-spacing: 2px; text-shadow: 0 0 20px rgba(160,109,212,0.6);
  animation: splashLogoIn 0.3s ease;
}
@keyframes splashLogoIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes splashVia { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
.griglia-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.griglia-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.griglia-5col { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.griglia-5col > * { min-width: 0; } /* senza questo, una parola lunga (es. "Redbull") può forzare la riga a uscire dallo schermo */
.barra-fissa-fondo {
  position: sticky; bottom: 0; background: var(--bg);
  border-top: 1px solid var(--border2); border-radius: 10px 10px 0 0;
  padding: 12px 16px; margin: 16px 0 -40px;
}
.view { animation: fadeIn 0.2s ease; }
/* Mentre si è in una pagina chat, la pagina intera non deve poter scorrere —
   solo la conversazione dentro (.chatbox) può farlo. Così un eventuale
   piccolo scarto di un paio di pixel nel calcolo dell'altezza resta
   invisibile, invece di far "traballare" tutta la pagina in cima/fondo. */
body.pagina-chat-attiva { overflow: hidden; height: 100vh; }
body.con-modale-aperto { overflow: hidden; height: 100vh; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Feedback al tocco: coerente su tutta l'app (prima c'era solo sulla Home) —
   una piccola compressione al tap, la stessa sensazione ovunque si tocchi.
   In più, un alone che si accende al tocco e si spegne dolcemente al
   rilascio (non un'animazione a tempo fisso: la transizione lenta sul
   rilascio basta da sola a dare la sensazione di "respiro", qualunque sia
   la durata del tocco). */
.scena-card, .utente-card, .card-aggiungi { transition: transform 0.12s ease, box-shadow 0.4s ease; }
.btn:active, .scena-card:active, .utente-card:active, .catalogo-card:active, .card-aggiungi:active {
  transform: scale(0.96);
  box-shadow: 0 0 0 3px rgba(160,109,212,0.3), 0 0 14px rgba(160,109,212,0.35);
}

/* Bollino numerico: un piccolo "rimbalzo" quando il numero cambia davvero
   (non ad ogni semplice ridisegno della Home). */
@keyframes badgeBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes badgePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.hc-badge.bump { animation: badgeBump 0.35s ease; }
.hc-badge.show { animation: badgePulse 2s ease-in-out infinite; }

/* Cambio mese nel calendario: scorrimento nella direzione giusta invece
   di un cambio di scatto — avanti entra da destra, indietro da sinistra. */
@keyframes calendarioSlideNext { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes calendarioSlidePrev { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
.calendario-griglia.slide-next { animation: calendarioSlideNext 0.22s ease; }
.calendario-griglia.slide-prev { animation: calendarioSlidePrev 0.22s ease; }

/* ---- Login / Registrazione ---- */
.card {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 14px; padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
/* Gerarchia tipografica: .titolo (header di sezione) va reso chiaramente
   più "pesante" di .sub (testo di supporto) — stesso family/colore base ma
   peso e presenza diversi, cosicché l'occhio sappia subito cosa leggere
   per primo in ogni card, invece che tutto sullo stesso piano. */
.titolo { font-size: 11px; font-weight: 700; color: var(--text2); letter-spacing: 2.5px; font-family: var(--mono); margin-bottom: 12px; }
.sub { font-size: 12px; font-weight: 400; color: var(--text2); opacity: 0.85; line-height: 1.45; margin-bottom: 12px; }

.input {
  width: 100%; background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 15px;
  font-family: var(--font); outline: none; margin-bottom: 10px;
}
.input:focus { border-color: var(--accent); }

.btn {
  padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border2);
  background: var(--bg4); color: var(--text2); font-size: 13px; font-weight: 600;
  font-family: var(--font); cursor: pointer; transition: all 0.2s;
}
.btn:hover { border-color: var(--accent); }
.btn-primary {
  width: 100%; background: var(--accent); border: none; color: #fff;
  font-size: 15px; font-weight: 700; margin-top: 6px; padding: 12px;
}
.btn-primary:hover { background: var(--accent2); }
.btn-ghost { border: 1px solid var(--border2); background: none; }
.btn-small { font-size: 12px; padding: 6px 12px; }
.btn.attivo { background: var(--accent); color: #fff; border-color: var(--accent); }

.riga-bottoni { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.riga-bottoni .btn { flex: 1; min-width: 90px; }

.errore {
  margin-top: 10px; font-size: 12px; color: var(--red);
  background: rgba(232,64,64,0.1); border: 1px solid var(--red); border-radius: 8px; padding: 8px 10px;
}
.promemoria {
  font-size: 11px; color: var(--amber); background: rgba(245,166,35,0.1);
  border: 1px solid var(--amber); border-radius: 8px; padding: 8px 10px; margin-top: 10px;
}

.link-riga { text-align: center; margin-top: 14px; }
.link-riga a { color: var(--text2); font-size: 12px; text-decoration: none; }

/* ---- Header / Home ---- */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(160,109,212,0.10), var(--bg) 70%);
  border-bottom: 1px solid var(--border); }
.header-nome { font-size: 21px; font-weight: 700; letter-spacing: -0.2px; }
.header-ruolo { font-size: 11px; color: var(--text2); font-family: var(--mono); letter-spacing: 0.5px; }

.home-greeting { padding: 4px 0 20px; }
.home-greeting h1 { font-size: 29px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.1; }
.home-greeting p { font-size: 12px; color: var(--text2); opacity: 0.85; margin-top: 4px; font-family: var(--mono); }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.home-card {
  background: linear-gradient(160deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 14px; cursor: pointer;
  transition: all 0.2s; position: relative;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  box-shadow: var(--shadow-sm);
}
.home-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-trascinata-generica {
  opacity: 0.85; z-index: 10;
  border-color: var(--accent2); box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.home-card:active { transform: scale(0.97); }
.home-card-icon-cerchio {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 17px; margin-bottom: 8px; background: var(--bg4);
}
.home-card-title { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.home-card-sub { font-size: 11px; color: var(--text2); margin-top: 3px; }
.hc-badge {
  position: absolute; top: 12px; right: 12px; background: var(--red); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-family: var(--mono); display: none;
}
.hc-badge.show { display: block; }

/* ---- BunkerGram ---- */
.bg-tab-badge {
  display: inline-block; background: var(--red); color: #fff; font-size: 10px;
  padding: 1px 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle;
}
.bg-post-card {
  background: linear-gradient(160deg, var(--bg3), var(--bg2)); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px; margin-bottom: 22px; cursor: pointer; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
@keyframes bgLuccicante { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.bg-fantasma { background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%); background-size: 200% 100%; animation: bgLuccicante 1.5s ease-in-out infinite; border-radius: 6px; }
@keyframes bgScivolaDentro { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
.bg-scivola-dentro { animation: bgScivolaDentro 0.35s ease-out; }
.bg-puntino-scrittura { width: 4px; height: 4px; border-radius: 50%; background: var(--accent2); animation: bgSaltoPuntino 1s infinite; }
@keyframes bgSaltoPuntino { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes bgRuota { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ---- STORIE ---- */
.bg-storie-riga { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.bg-storia-avatar { flex-shrink: 0; width: 60px; text-align: center; cursor: pointer; }
.bg-storia-cerchio { width: 56px; height: 56px; border-radius: 50%; padding: 2px; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; position: relative; }
.bg-storia-cerchio.non-vista { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); animation: bgPulsaStoria 2s ease-out infinite; }
@keyframes bgPulsaStoria {
  0% { box-shadow: 0 0 0 0 rgba(238,42,123,0.45); }
  70% { box-shadow: 0 0 0 7px rgba(238,42,123,0); }
  100% { box-shadow: 0 0 0 0 rgba(238,42,123,0); }
}
.bg-storia-cerchio.vista { background: var(--border); }
.bg-storia-cerchio.senza-storie { background: var(--bg2); }
.bg-storia-cerchio img, .bg-storia-cerchio .bg-storia-placeholder { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; background: var(--bg2); font-size: 20px; }
.bg-storia-nome { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-storia-plus { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 2px solid var(--bg); }
.bg-storia-barra-progresso { flex: 1; height: 2px; background: rgba(255,255,255,0.35); border-radius: 2px; overflow: hidden; }
.bg-storia-barra-progresso-riempi { height: 100%; background: #fff; width: 0%; }

.bg-post-card img { max-width: 100%; width: 100%; max-height: 280px; height: auto; object-fit: cover; border-radius: 10px; display: block; margin: 8px 0; }

.bg-foto-sfumata { filter: blur(14px); transform: scale(1.04); transition: filter 0.4s ease-out, transform 0.4s ease-out; background: var(--bg2); }
.bg-foto-sfumata.bg-foto-a-fuoco { filter: blur(0); transform: scale(1); }
.bg-cuore-doppiotap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.3);
  font-size: 80px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.45);
  pointer-events: none; animation: bgCuoreAnimazione 0.9s ease forwards;
}
@keyframes bgCuoreAnimazione {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.bg-griglia-profilo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bg-griglia-profilo > div { aspect-ratio: 1; border-radius: 4px; overflow: hidden; cursor: pointer; }
.bg-griglia-profilo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-griglia-salvati { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.bg-griglia-salvati > div { aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; }
.bg-griglia-salvati img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-post-azioni { display: flex; align-items: center; gap: 16px; padding-top: 4px; }
.bg-post-azioni button { background: none; border: none; cursor: pointer; font-size: 17px; color: var(--text2); padding: 8px 4px; display: flex; align-items: center; gap: 6px; }
.bg-post-azioni button.attivo { color: var(--red); }

@keyframes bgSaltoSalva {
  0% { transform: scale(1); }
  35% { transform: scale(1.7); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.bg-salto-salva { animation: bgSaltoSalva 0.4s cubic-bezier(.34,1.56,.64,1); }

@keyframes bgSaltoReazione {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(2.1) rotate(-14deg); }
  55% { transform: scale(1.3) rotate(8deg); }
  80% { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.bg-salto-reazione { animation: bgSaltoReazione 0.5s cubic-bezier(.34,1.56,.64,1); }
.bg-post-azioni [data-azione="salva-post"].attivo { color: var(--accent2); }
.bg-post-azioni [data-azione="salva-post"] svg { fill: none; }
.bg-post-azioni [data-azione="salva-post"].attivo svg { fill: currentColor; }
.bg-post-azioni .bg-azione-a-destra { margin-left: auto; }
.bg-commenti-espansi { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; cursor: default; }
.bg-commenti-scroll { max-height: 180px; overflow-y: auto; margin-bottom: 8px; overscroll-behavior: contain; }

/* ---- Fascia di stato "Bunker aperto/chiuso" ---- */
/* L'alone rosso pulsante quando è "chiuso" è un ::after animato solo su
   opacity+transform (compositati dalla GPU) — NON un box-shadow animato, che
   costringerebbe il WebView a ridisegnare ~60 volte/s all'infinito finché la
   fascia è visibile (drena la batteria sui tablet lasciati accesi sulla Home). */
@keyframes statoLocaleChiusoPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0; transform: scale(1.06); } }
.stato-locale-fascia {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  width: 100%; padding: 16px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--bg4) 65%, transparent);
  border: 2px solid var(--border2); transition: all 0.2s; text-align: center;
  border-radius: 14px; box-sizing: border-box;
  box-shadow: var(--shadow-sm);
}
.stato-locale-fascia > div:last-child { display: flex; flex-direction: column; align-items: center; width: 100%; }
.stato-locale-fascia.aperto {
  border-color: var(--green); background: linear-gradient(135deg, color-mix(in srgb, var(--green) 20%, var(--bg4)), var(--bg4));
  box-shadow: inset 0 1px 2px rgba(34,197,94,0.1);
}
.stato-locale-fascia.chiuso {
  border-color: var(--red); background: linear-gradient(135deg, color-mix(in srgb, var(--red) 20%, var(--bg4)), var(--bg4));
  box-shadow: inset 0 1px 2px rgba(239,68,68,0.1);
}
.stato-locale-fascia.chiuso::after {
  content: ''; position: absolute; inset: -2px; border-radius: 14px;
  border: 2px solid var(--red); pointer-events: none;
  animation: statoLocaleChiusoPulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .stato-locale-fascia.chiuso::after { animation: none; opacity: 0.4; }
}
.stato-locale-testo { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }
.stato-locale-hint { font-size: 11px; color: var(--text2); }
.stato-locale-fascia.interattiva { cursor: pointer; }
.stato-locale-fascia.interattiva:hover { transform: translateY(-1px); }
.stato-locale-fascia.interattiva:active { transform: scale(0.98); }

/* Accento colorato per categoria — stesso colore ovunque quella categoria
   compaia (Home, badge, ecc.), così diventa un riferimento visivo riconoscibile
   e non solo decorazione. Un solo colore per card, niente arcobaleno. */
.home-card[data-colore] {
  background: linear-gradient(160deg, color-mix(in srgb, var(--colore-cat) 28%, var(--bg3)), var(--bg2));
  border-color: color-mix(in srgb, var(--colore-cat) 50%, var(--border));
}
.home-card[data-colore] .home-card-icon-cerchio { background: color-mix(in srgb, var(--colore-cat) 35%, var(--bg3)); }
[data-colore="viola"]  { --colore-cat: var(--accent2); }
[data-colore="verde"]  { --colore-cat: var(--teal); }
[data-colore="corallo"] { --colore-cat: var(--coral); }
[data-colore="ambra"]  { --colore-cat: var(--amber); }
[data-colore="blu"]    { --colore-cat: var(--blue); }
[data-colore="rosa"]   { --colore-cat: var(--pink); }
[data-colore="grigio"] { --colore-cat: var(--text2); }
[data-colore="grigio"] { --colore-cat: var(--text2); }

.saldo-grande { font-size: 38px; font-weight: 700; letter-spacing: -0.5px; color: var(--accent2); font-family: var(--mono); text-align: center; }
.saldo-grande.credito { color: var(--green); }
.saldo-grande.debito { color: var(--red); }
.qr-canvas { display: inline-block; background: #fff; padding: 10px; border-radius: 8px; }

/* ---- Popup gruppo ---- */
.popup-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  align-items: center; justify-content: center; z-index: 200; padding: 20px;
}
.popup-overlay.show { display: flex; }
.popup {
  background: linear-gradient(160deg, rgba(19,19,42,0.82), rgba(9,9,20,0.88)); border: 1px solid var(--border2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 14px; padding: 20px; width: 100%; max-width: 320px;
  box-shadow: var(--shadow-lg);
}
.popup[data-colore] { border-color: color-mix(in srgb, var(--colore-cat) 35%, var(--border2)); }
.popup-title { font-size: 15px; font-weight: 700; letter-spacing: 1px; font-family: var(--mono); margin-bottom: 14px; }
.popup-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--bg4); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 16px; font-family: var(--font); cursor: pointer;
  text-align: left; width: 100%; margin-bottom: 8px; box-sizing: border-box; transition: all 0.2s;
}
.popup-item:hover { border-color: var(--accent); }
.popup-item:active { box-shadow: 0 0 0 3px rgba(160,109,212,0.3), 0 0 14px rgba(160,109,212,0.35); }
.popup-item-icon {
  font-size: 18px; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--bg3);
}
.popup[data-colore] .popup-item-icon { background: color-mix(in srgb, var(--colore-cat) 22%, transparent); }
.popup-item-label { font-weight: 600; letter-spacing: 1px; }
.popup-item-badge {
  margin-left: auto; background: var(--red); color: #fff; font-size: 11px;
  padding: 2px 8px; border-radius: 10px; font-family: var(--mono);
}

/* ---- Modali ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: none; align-items: center; justify-content: center; z-index: 250; padding: 20px;
  animation: overlayIn 0.15s ease;
  overscroll-behavior: contain;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* Il modale di conferma esiste per interrompere qualcos'altro già aperto —
   deve stare SEMPRE sopra, non dipendere dall'ordine nel documento HTML. */
#modalConferma { z-index: 260; }
/* La foto ingrandita di BunkerGram può aprirsi da dentro il modale profilo
   (tocco sulla foto profilo) — stesso principio, deve stare sopra. */
#modalFotoBunkerGramGrande { z-index: 255; }
/* Il profilo si apre spesso da DENTRO altri modali già aperti (Foto Live,
   chat, recensioni...) — deve stare sopra quelli, ma sotto la foto
   ingrandita e la conferma, che a loro volta possono aprirsi da dentro lui. */
#modalProfiloUtente { z-index: 252; }
/* Il visualizzatore storie è un'esperienza a schermo intero — deve stare
   sopra quasi tutto tranne la conferma. La lista "chi ha visto" si apre
   DA DENTRO il visualizzatore, quindi deve stare sopra anche lui. */
#modalVisualizzatoreStorie { z-index: 257; padding: 0; }
#modalVisteStoria { z-index: 258; }
.modal {
  background: linear-gradient(160deg, rgba(19,19,42,0.82), rgba(9,9,20,0.88)); border: 1px solid var(--border2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 14px; padding: 20px; width: 100%; max-width: 320px;
  max-height: 90vh; overflow-y: auto;
  /* quando lo scroll interno arriva a fine corsa non deve trascinare la pagina
     sotto (griglia consumazioni ecc.) — il body ha già overflow:hidden ma nel
     WebView Android non basta da solo */
  overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  animation: modalIn 0.2s ease;
  box-shadow: var(--shadow-lg);
}
.modal::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Modale operativo NFC (si apre al tocco del lettore): quasi a schermo intero,
   deve battere le media query di .modal che usano max-width !important */
#modalNfcOperativo { padding: 0 !important; }
#modalNfcOperativo > .modal {
  max-width: 100% !important; width: 100%;
  height: 100vh; height: 100dvh; max-height: 100dvh;
  border-radius: 0; padding: 12px 14px 0;
  display: flex; flex-direction: column; overflow: hidden;
}
/* Modale BUNKERMAT da banco (#modalNfcBanco): stessa identica esigenza di
   #modalNfcOperativo sopra — mancava questa regola, quindi finora il modale
   restava sulla .modal generica (block, max-height:90vh, overflow-y:auto sul
   TUTTO) e i div interni con display:flex/min-height:0 non avevano alcun
   effetto (sono ignorati se il genitore non è un flex container) — trovato
   e sistemato insieme al ticket "checklist selezionati non resta visibile"
   del 21/09/2026, stessa causa. */
#modalNfcBanco { padding: 0 !important; }
#modalNfcBanco > .modal {
  max-width: 100% !important; width: 100%;
  height: 100vh; height: 100dvh; max-height: 100dvh;
  border-radius: 0; padding: 12px 14px 0;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---- Righe/liste generiche ---- */
.movimento-riga { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.movimento-riga .desc { color: var(--text); }
.movimento-riga .time { font-size: 11px; color: var(--text3); font-family: var(--mono); }
.movimento-pos { color: var(--green); font-family: var(--mono); }
.movimento-neg { color: var(--red); font-family: var(--mono); }

.consumazioni-card {
  background: linear-gradient(160deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
/* Solo per Utenti: il ruolo è una categoria vera (come i gruppi della Home),
   quindi qui ha senso un accento colorato — Magazzino/Ordini non hanno una
   categoria altrettanto naturale, restano con la sola profondità sopra. */
.consumazioni-card[data-ruolo-colore] { border-color: color-mix(in srgb, var(--ruolo-colore) 30%, var(--border)); }
.consumazioni-card[data-ruolo-colore="grigio"]  { --ruolo-colore: var(--text2); }
.consumazioni-card[data-ruolo-colore="blu"]     { --ruolo-colore: var(--blue); }
.consumazioni-card[data-ruolo-colore="viola"]   { --ruolo-colore: var(--accent2); }
.consumazioni-card[data-ruolo-colore="ambra"]   { --ruolo-colore: var(--amber); }
.consumazioni-card[data-ruolo-colore="corallo"] { --ruolo-colore: var(--coral); }
.consumazioni-card[data-ruolo-colore="verde"]   { --ruolo-colore: var(--teal); }
.consumazioni-card[data-ruolo-colore="rosa"]    { --ruolo-colore: var(--pink); }

.chatbox { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  overflow-y: auto; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: none; -ms-overflow-style: none; }
.chatbox::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Intestazione + tasti rapidi della chat interna restano fissi in cima mentre
   si scorrono i messaggi sotto — raggruppati in un unico blocco (chat-testata-fissa)
   così non serve calcolare a mano dove finisce l'uno e comincia l'altro. */
.chat-testata-fissa { position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, rgba(160,109,212,0.10), var(--bg) 70%); padding-bottom: 4px; }
.msg-riga { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.msg-riga.mine { justify-content: flex-end; }
.msg-riga.nuovo-gruppo { margin-top: 10px; }
.msg-colonna { display: flex; flex-direction: column; max-width: 74%; min-width: 0; }
.msg-riga.mine .msg-colonna { align-items: flex-end; }
.msg-riga.theirs .msg-colonna { align-items: flex-start; }
.msg-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.msg-avatar-placeholder { width: 26px; height: 26px; border-radius: 50%; background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text2); flex-shrink: 0; }
.msg-avatar-spazio { width: 26px; flex-shrink: 0; } /* mantiene l'allineamento quando l'avatar non si ripete */
.msg { padding: 7px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.msg.mine { background: rgba(123,94,167,0.2); border: 1px solid rgba(123,94,167,0.3);
  color: #c4b5fd; border-radius: 10px 4px 10px 10px; }
.msg.theirs { background: rgba(15,186,116,0.12); border: 1px solid rgba(15,186,116,0.25);
  color: #86efac; border-radius: 4px 10px 10px 10px; }
.msg-nome { font-size: 10px; font-weight: 700; opacity: 0.75; margin-bottom: 2px; font-family: var(--mono); }
.msg-meta { font-size: 10px; opacity: 0.55; margin-top: 2px; font-family: var(--mono); }
.msg-divisore-data { align-self: center; font-size: 10px; color: var(--text2); background: var(--bg3); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 20px; margin: 10px 0 4px; font-family: var(--mono); }
.msg-menzione { color: var(--accent2); font-weight: 700; }
.msg-modificato-tag { opacity: 0.6; font-style: italic; }
.msg-reazioni-pillola { display: inline-flex; gap: 6px; margin-top: 3px; font-size: 11px; background: var(--bg4);
  border: 1px solid var(--border2); border-radius: 10px; padding: 1px 8px; color: var(--text2); }
.msg-reazioni-pillola span { cursor: pointer; }
.msg-reazioni-pillola .mia-reazione { color: var(--accent2); font-weight: 700; }

/* ---- Chat Interna: etichetta discreta (solo staff/bar/admin la vedono,
   quindi qui basta un'etichetta piccola — chi ha accesso già sa cos'è) ---- */
.chat-interna-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  color: var(--text2); letter-spacing: 0.5px; padding: 0 0 8px; }

/* ---- Chat Generale: molto più "viva" — è quella di tutti i clienti, niente
   etichette (non sanno che ne esiste un'altra), solo un'intestazione con
   più energia, bolle piene arrotondate, e un colore diverso per persona
   così le conversazioni di gruppo si leggono a colpo d'occhio. ---- */
.chat-generale-banner { display: flex; align-items: center; gap: 10px; padding: 14px;
  border-radius: 12px; margin-bottom: 12px;
  background: linear-gradient(120deg, var(--accent) 0%, #993c1d 100%); }
.chat-generale-banner-icona { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.chat-generale-banner span { color: #fff; font-size: 15px; font-weight: 700; }

.chatbox-generale { background: radial-gradient(circle at top right, rgba(160,109,212,0.07), transparent 60%), var(--bg2); }

.msg-avatar-generale { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.msg-avatar-generale-spazio { width: 32px; flex-shrink: 0; }
.msg-avatar-placeholder-generale { width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.msg-nome-generale { font-size: 11px; font-weight: 700; margin-bottom: 2px; }

.msg-generale { padding: 8px 12px; font-size: 13px; line-height: 1.4;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.msg-generale.theirs { background: #1c1730; color: #e8e5f5; border-radius: 4px 16px 16px 16px; }
.msg-generale.mine { background: linear-gradient(120deg, var(--accent) 0%, #993c1d 100%); color: #fff;
  border-radius: 16px 4px 16px 16px; }
.msg-generale .msg-meta { font-size: 10px; opacity: 0.6; margin-top: 2px; font-family: var(--mono); }
.msg-generale .msg-modificato-tag { opacity: 0.7; font-style: italic; }
.msg-generale .msg-menzione { color: #ffe28a; font-weight: 700; }

.avviso-nuovi-messaggi { display: none; position: relative; margin: -34px auto 10px; width: fit-content; z-index: 5;
  background: var(--accent); color: #fff; font-size: 11px; padding: 5px 14px; border-radius: 20px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.avviso-nuovi-messaggi.show { display: block; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.quick-btn { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font-size: 12px; color: var(--text); cursor: pointer; text-align: left; font-family: var(--font);
  display: flex; justify-content: space-between; align-items: center; }
.quick-btn:hover { border-color: var(--accent); color: var(--accent2); }
.quick-del { color: var(--text3); font-size: 14px; background: none; border: none; cursor: pointer; }
.quick-del:hover { color: var(--red); }
.consumazioni-riga1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.consumazioni-nome { font-size: 15px; font-weight: 700; }
.consumazioni-saldo { font-family: var(--mono); font-size: 16px; }
.consumazioni-saldo.debito { color: var(--red); }
.consumazioni-saldo.credito { color: var(--green); }
.consumazioni-azioni { display: flex; gap: 6px; flex-wrap: wrap; }
.consumazioni-azioni .btn { flex: 1; padding: 7px 10px; font-size: 12px; }
.toggle-ridotto { font-size: 11px; color: var(--text2); cursor: pointer; }

.magazzino-riga { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
/* Una riga ben rifornita resta "silenziosa" (bordo/ombra normali) — è quella
   sotto scorta a dover saltare all'occhio, qui e nella barra sotto: */
.magazzino-riga.sotto-scorta { border-color: var(--red); box-shadow: var(--shadow-sm), 0 0 0 1px rgba(232,64,64,0.15); }
.magazzino-categoria { margin-bottom: 14px; }

/* Riepilogo in cima: numero articoli + valore stimato (attuale × costo unitario,
   dato già salvato per articolo ma prima non mostrato da nessuna parte) */
.magazzino-riepilogo { display: flex; gap: 8px; margin-bottom: 10px; }
.magazzino-stat { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; text-align: center; box-shadow: var(--shadow-sm); }
.magazzino-stat-val { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text); }
.magazzino-stat-lab { font-size: 10px; color: var(--text2); letter-spacing: 0.3px; margin-top: 1px; }

/* Barra di riempimento per articolo: a colpo d'occhio quanto sei vicino alla
   scorta minima, senza dover leggere i due numeri. Tre stati calcolati dal
   client (nessun campo nuovo nel DB): sotto scorta (rosso, riempita in
   proporzione al deficit), nella "zona cuscinetto" entro il 30% sopra il
   minimo (ambra, piena — attenzione, ci si avvicina), oltre (verde, piena). */
.magazzino-barra { height: 4px; border-radius: 2px; background: var(--bg4); margin-top: 6px; overflow: hidden; }
.magazzino-barra-fill { height: 100%; border-radius: 2px; transition: width 0.2s; }
.magazzino-barra-fill.sotto { background: var(--red); }
.magazzino-barra-fill.attenzione { background: var(--amber); }
.magazzino-barra-fill.ok { background: var(--green); }

/* --- Magazzino "Scaffale" (redesign 2026-09) --- */
.mag-health { display: flex; gap: 7px; margin-bottom: 12px; }
.mag-h { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 9px 5px; text-align: center; background: var(--bg3); font-family: inherit; color: inherit; }
button.mag-h { cursor: pointer; }
button.mag-h.attivo { border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 14%, var(--bg3)); box-shadow: 0 0 0 1px var(--accent2); }
.mag-h-v { font-size: 20px; font-weight: 700; line-height: 1; }
.mag-h-l { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.5px; color: var(--text3); margin-top: 3px; }
.mag-h.out .mag-h-v { color: var(--red); }
.mag-h.low .mag-h-v { color: var(--amber); }
.mag-h.val .mag-h-v { color: var(--accent2); font-family: var(--mono); font-size: 15px; }

.mag-rail { display: flex; align-items: center; gap: 9px; margin: 18px 0 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.mag-rail::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--c); flex: none; }
.mag-rail span { color: var(--text3); font-weight: 400; font-family: var(--mono); font-size: 11px; }
.mag-rail::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.mag-gauge { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg3); margin-bottom: 7px; }
.mag-gauge.attenzione { border-color: color-mix(in srgb, var(--amber) 28%, var(--border)); }
.mag-gauge.sotto { border-color: color-mix(in srgb, var(--red) 42%, var(--border)); box-shadow: 0 0 14px -5px var(--red); }
.mag-gauge-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mag-gauge-nm { font-size: 14px; font-weight: 600; }
.mag-gauge-cur { font-size: 19px; font-weight: 700; white-space: nowrap; }
.mag-gauge-cur small { font-family: var(--mono); font-size: 9px; color: var(--text2); font-weight: 400; letter-spacing: 0; }
.mag-track { height: 9px; border-radius: 5px; background: var(--bg); margin-top: 8px; position: relative; }
.mag-fill { height: 100%; border-radius: 5px; transition: width 0.2s; }
.mag-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(255,255,255,0.42); border-radius: 1px; }
.mag-gauge-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; gap: 8px; }
.mag-rng { font-family: var(--mono); font-size: 9px; color: var(--text3); display: flex; gap: 10px; }
.mag-gauge-az { display: flex; gap: 6px; }
.mag-gauge-az .btn { padding: 5px 10px; font-size: 11px; }

.calendario-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendario-giorno-nome { font-size: 9px; color: var(--text3); text-align: center; padding-bottom: 3px; font-family: var(--mono); letter-spacing: 1px; }
.calendario-giorno {
  aspect-ratio: 0.8; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px;
  border-radius: 9px; color: var(--text2); position: relative; cursor: default;
  background: var(--bg3); border: 1px solid var(--border); padding: 4px 4px 3px; overflow: hidden;
}
.calendario-giorno .cal-num { font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--text3); padding-left: 1px; }
.calendario-giorno.vuoto { background: transparent; border-color: transparent; }
.calendario-giorno.ha-eventi { cursor: pointer; }
.calendario-giorno.ha-eventi .cal-num { color: var(--text2); }
.calendario-giorno.oggi { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2), 0 0 14px -3px var(--accent2); }
.calendario-giorno.oggi .cal-num { color: var(--text); font-weight: 700; }
.calendario-giorno.in-corso { border-color: var(--cal-live); box-shadow: 0 0 0 1px var(--cal-live), 0 0 16px -3px var(--cal-live); }
.calendario-giorno.in-corso .cal-num { color: var(--cal-live); }
.calendario-giorno.ha-eventi:active { transform: scale(0.96); }

/* chip nella cella: la locandina è solo un accento, non domina */
.cal-chip { position: relative; height: 14px; border-radius: 4px; overflow: hidden; display: flex; align-items: center; padding: 0 3px 0 6px; }
.cal-chip .cal-chip-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.5; }
.cal-chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,13,0.6), rgba(5,5,13,0.1)); }
.cal-chip .cal-chip-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.cal-chip .cal-chip-txt { position: relative; font-family: var(--mono); font-size: 7px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-family: var(--mono); font-size: 8px; color: var(--text3); padding-left: 3px; }

.cal-prossimo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border2); border-left: 3px solid var(--accent2); border-radius: 12px;
  padding: 9px 12px; margin-bottom: 13px; cursor: pointer;
  background: linear-gradient(100deg, rgba(160,109,212,0.10), transparent 62%);
}
.cal-prossimo.live { border-left-color: var(--cal-live); background: linear-gradient(100deg, rgba(200,255,61,0.09), transparent 62%); }
.cal-prossimo .cp-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--text2); }
.cal-prossimo .cp-nome { font-weight: 700; font-size: 14px; margin-top: 2px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-prossimo .cp-cd { font-family: var(--mono); font-size: 12px; color: var(--accent2); text-align: right; white-space: nowrap; flex-shrink: 0; }
.cal-prossimo.live .cp-cd { color: var(--cal-live); }

/* --- Foto & Musica (redesign 2026-09, direzione "Camera Oscura") --- */
.fm-hero { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border2); cursor: pointer; }
.fm-hero-mos { display: grid; gap: 3px; }
.fm-hero-mos i { display: block; background-size: cover; background-position: center; background-color: var(--bg4); }
.fm-hero-mos-1 { grid-template-columns: 1fr; grid-auto-rows: 150px; }
.fm-hero-mos-2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; }
.fm-hero-mos-3 { grid-template-columns: 2fr 1fr; grid-auto-rows: 46px; }
.fm-hero-mos-3 i:nth-child(1) { grid-row: span 2; }
.fm-hero-mos-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 58px; }
.fm-hero-mos-5 { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 56px; }
.fm-hero-mos-5 i:nth-child(1) { grid-row: span 2; }
.fm-hero-mos-5 i:nth-child(4) { grid-column: span 2; }
.fm-hero-vuoto { min-height: 100px; background: linear-gradient(135deg, var(--accent), #241a3d); }
.fm-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 13px 12px; background: linear-gradient(to top, rgba(5,5,13,0.95), transparent); display: flex; justify-content: space-between; align-items: flex-end; }
.fm-hero-n { font-weight: 700; font-size: 15px; color: var(--text); }
.fm-hero-s { font-family: var(--mono); font-size: 10px; color: var(--accent2); letter-spacing: 0.5px; margin-top: 2px; }
.fm-hero-go { font-family: var(--mono); font-size: 10px; color: var(--text2); }

.fm-add { margin-top: 10px; border: 1px dashed var(--border2); border-radius: 12px; padding: 11px; text-align: center; font-weight: 600; font-size: 14px; color: var(--accent2); background: linear-gradient(100deg, rgba(160,109,212,0.08), transparent); cursor: pointer; }
.fm-add:active { background: rgba(160,109,212,0.16); }

.fm-sec { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: var(--text3); display: flex; align-items: center; gap: 10px; margin: 22px 0 11px; }
.fm-sec::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.fm-shelf { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.fm-shelf::-webkit-scrollbar { height: 0; }
.fm-mix { position: relative; flex: 0 0 150px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; isolation: isolate; scroll-snap-align: start; cursor: pointer; }
.fm-mix-emoji { position: absolute; right: -10px; bottom: -16px; font-size: 64px; opacity: 0.16; }
.fm-mix-body { position: relative; padding: 12px; height: 100%; display: flex; flex-direction: column; }
.fm-mix-k { font-family: var(--mono); font-size: 8px; letter-spacing: 2px; color: rgba(255,255,255,0.6); }
.fm-mix-t { font-weight: 700; font-size: 16px; color: #fff; line-height: 1.08; margin-top: 4px; }
.fm-mix-m { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.78); margin-top: auto; display: flex; align-items: center; gap: 6px; }
.fm-sp { width: 7px; height: 7px; border-radius: 50%; background: var(--spotify); flex: none; }

.fm-links { display: grid; gap: 2px; }
.fm-link-row { display: flex; align-items: center; gap: 11px; padding: 11px 4px; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--border); cursor: pointer; }
.fm-link-row:last-child { border-bottom: 0; }
.fm-link-ic { font-size: 17px; }
.fm-link-ar { margin-left: auto; color: var(--text3); font-family: var(--mono); font-size: 12px; }

/* tracce SoundCloud: carosello orizzontale di copertine (riusa .fm-shelf) */
.fm-sctr { position: relative; flex: 0 0 148px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; background-color: var(--bg4); cursor: pointer; scroll-snap-align: start; isolation: isolate; }
.fm-sctr-b { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 11px 11px; background: linear-gradient(to top, rgba(5,5,13,0.95) 8%, rgba(5,5,13,0.35) 62%, transparent); }
.fm-sctr-t { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-sctr-m { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.82); margin-top: 5px; letter-spacing: 0.3px; }
.fm-sctr-tutte { flex: 0 0 104px; aspect-ratio: 1; border-radius: 12px; border: 1px dashed var(--border2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; color: var(--accent2); font-family: var(--mono); font-size: 10px; line-height: 1.35; letter-spacing: 1px; cursor: pointer; scroll-snap-align: start; }
.fm-sctr-tutte span { font-size: 19px; }
.fm-sctr-tutte:active { background: rgba(160,109,212,0.12); }

/* --- Bacheca "Quadri" (redesign 2026-09) --- */
.bac-seclabel { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: var(--text3); margin: 18px 2px 9px; }
.bac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.bac-tile { border: 1px solid var(--border2); border-radius: 12px; padding: 12px; background: var(--bg3); position: relative; overflow: hidden; }
.bac-tile.bac-span2 { grid-column: 1 / -1; }
.bac-tile[data-azione="toggle-ri"] { cursor: pointer; }
.bac-tile .bac-k { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--text3); }
.bac-tile .bac-body { font-size: 12.5px; color: var(--text); margin-top: 7px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.bac-tile:not(.aperto) .bac-body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bac-tile .bac-body.vuoto { color: var(--text2); }
.bac-tile .bac-edit { position: absolute; top: 6px; right: 6px; font-size: 11px; color: var(--text3); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; background: var(--bg4); cursor: pointer; }
.bac-nota-install { font-size: 11px; color: var(--text2); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); line-height: 1.5; }

.bac-obj { padding: 0; min-height: 150px; display: flex; flex-direction: column; }
.bac-obj .bac-obj-ph { flex: 1; min-height: 96px; background-size: cover; background-position: center; background-color: var(--bg4); }
.bac-obj .bac-obj-ph[data-azione] { cursor: zoom-in; }
.bac-obj .bac-obj-ft { padding: 8px 10px 10px; }
.bac-obj .bac-obj-desc { font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bac-obj .bac-obj-desc.vuoto { color: var(--text2); }
.bac-obj .bac-obj-act { margin-top: 7px; }
.bac-obj .bac-recl { font-size: 11px; color: var(--green); }
.bac-obj .bac-badge { position: absolute; top: 7px; right: 7px; font-family: var(--mono); font-size: 7px; letter-spacing: 1px; color: var(--bg); background: var(--green); padding: 2px 5px; border-radius: 4px; z-index: 1; }
.bac-obj .bac-del { position: absolute; top: 7px; left: 7px; border: 1px solid var(--red); color: var(--red); background: rgba(5,5,13,0.6); border-radius: 6px; padding: 1px 7px; font-size: 11px; cursor: pointer; z-index: 1; }
.bac-add { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 150px; border: 1.5px dashed var(--border2); color: var(--accent2); font-weight: 600; font-size: 13px; cursor: pointer; background: none; font-family: var(--font); }

.bac-rate { display: flex; align-items: center; gap: 14px; border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; background: linear-gradient(105deg, rgba(160,109,212,0.12), transparent 60%); }
.bac-rate .bac-num { font-family: var(--mono); font-weight: 800; font-size: 40px; line-height: 0.8; color: var(--accent2); }
.bac-rate .bac-stk { color: var(--amber); font-size: 14px; letter-spacing: 1px; }
.bac-rate .bac-sub { font-family: var(--mono); font-size: 10px; color: var(--text3); margin-top: 4px; }
.bac-rev { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.bac-rev:last-child { border-bottom: 0; }
.bac-av { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.bac-rh { font-size: 13px; font-weight: 600; }
.bac-rstars { color: var(--amber); font-size: 12px; }
.bac-rt { font-size: 12.5px; margin-top: 4px; line-height: 1.35; }
.bac-rm { font-family: var(--mono); font-size: 9px; color: var(--text3); margin-top: 4px; }

.bac-notestrip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; }
.bac-notestrip::-webkit-scrollbar { height: 0; }
.bac-note { flex: 0 0 150px; background: var(--paper); color: var(--paper-ink); font-family: var(--hand); font-weight: 600; font-size: 15px; line-height: 1.18; padding: 12px 12px 10px; box-shadow: 2px 4px 10px rgba(0,0,0,0.4); position: relative; }
.bac-note:nth-child(odd) { transform: rotate(-1.6deg); }
.bac-note:nth-child(even) { transform: rotate(1.6deg); }
.bac-note .bac-note-m { display: block; font-family: var(--mono); font-size: 8px; color: #7a6f5c; margin-top: 8px; letter-spacing: 0.3px; }
.bac-note .bac-note-x { position: absolute; top: 4px; right: 5px; border: 1px solid var(--stamp); color: var(--stamp); background: rgba(233,227,209,0.9); border-radius: 5px; font-size: 10px; padding: 0 5px; cursor: pointer; line-height: 1.4; }

.calendario-legenda-voce { display: flex; align-items: center; gap: 5px; }
.calendario-legenda-dot { width: 8px; height: 8px; border-radius: 50%; }
@keyframes pulse-rosso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
/* Alone verde pulsante: ::after animato solo su opacity+transform (GPU), non un
   box-shadow animato — stesso motivo di statoLocaleChiusoPulse (no ridisegni). */
@keyframes pulse-verde { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0; transform: scale(1.04); } }
#bannerEventoInCorso { position: relative; }
#bannerEventoInCorso::after {
  content: ''; position: absolute; inset: -2px; border-radius: 12px;
  border: 2px solid var(--green); pointer-events: none;
  animation: pulse-verde 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #bannerEventoInCorso::after { animation: none; opacity: 0.4; }
}
@keyframes pulse-emergenza {
  0%, 100% { background: #a32d2d; }
  50% { background: #7a1f1f; }
}
@keyframes lampeggio-bar-veloce {
  0%, 49% { background: #ffffff; }
  50%, 100% { background: #a32d2d; }
}
#overlayAllarmeEmergenza.show { display: flex; animation: pulse-emergenza 1s infinite; }
#overlayAllarmeEmergenza.show.lampeggio-bar { animation: lampeggio-bar-veloce 0.3s steps(1) infinite; }
.magazzino-cat-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  padding: 8px 4px 8px 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; border-bottom: 1px solid var(--border2);
  margin-bottom: 8px;
  /* accento per categoria (violo/blu/grigio, --cat-colore impostato inline
     per riga) — riconoscibile scorrendo veloce senza dover leggere il testo */
  border-left: 3px solid var(--cat-colore, var(--border2)); }
.magazzino-cat-chevron { color: var(--text2); font-size: 12px; }
.magazzino-riga1 { display: flex; justify-content: space-between; align-items: center; }
.magazzino-nome { font-size: 14px; font-weight: 700; }
.magazzino-dettaglio { font-size: 12px; color: var(--text2); margin-top: 2px; font-family: var(--mono); }
.magazzino-dettaglio.sotto { color: var(--red); }
.magazzino-azioni { display: flex; gap: 6px; }
.magazzino-azioni .btn { padding: 6px 10px; font-size: 12px; }

/* Lista Spesa: distingue a colpo d'occhio le voci nate da sole (sotto scorta)
   da quelle scritte a mano */
.spesa-badge-auto { font-size: 9.5px; font-family: var(--mono); color: var(--accent2); background: rgba(160,109,212,0.15);
  border-radius: 8px; padding: 1px 6px; margin-left: 6px; white-space: nowrap; }

.spesa-riga { display: flex; align-items: center; gap: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.spesa-riga.done { opacity: 0.5; }
.spesa-nome { flex: 1; font-size: 14px; }
.spesa-nome .qty { color: var(--text2); font-size: 12px; font-family: var(--mono); }

.chat-msg { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.chat-msg .nick { font-size: 12px; font-weight: 700; color: var(--accent2); }
.chat-msg .testo { font-size: 14px; margin-top: 2px; }
.chat-msg .time { font-size: 10px; color: var(--text3); margin-top: 4px; font-family: var(--mono); }

.notifica-riga { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; box-shadow: var(--shadow-sm); }
.notifica-riga .time { font-size: 10px; color: var(--text3); margin-top: 4px; font-family: var(--mono); }

.log-riga { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.log-riga .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.log-riga .azione { font-size: 13px; font-weight: 700; color: var(--accent2); }
.log-riga .time { font-size: 11px; color: var(--text3); font-family: var(--mono); flex-shrink: 0; }
.log-riga .dettaglio { font-size: 13px; color: var(--text); margin-top: 2px; }
.log-riga .chi { font-size: 11px; color: var(--text3); margin-top: 4px; }

.ordine-riga { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.ordine-riga.done { opacity: 0.5; }
.ordine-top { display: flex; justify-content: space-between; align-items: center; }
.ordine-da { font-size: 12px; color: var(--text2); font-family: var(--mono); }
.ordine-items { font-size: 14px; margin-top: 4px; }

.catalogo-card { background: var(--bg4); border: 1px solid var(--border); border-radius: 10px; position: relative;
  padding: 10px; text-align: center; cursor: pointer; transition: all 0.15s; min-height: 118px; box-shadow: var(--shadow-sm); }
.catalogo-card.attivo { border-color: var(--accent2); background: rgba(160,109,212,0.12); }
.catalogo-card .icona { font-size: 22px; }
.catalogo-card .nome { font-size: 13px; font-weight: 600; margin-top: 2px; overflow-wrap: break-word; }
.catalogo-card .prezzo { font-size: 11px; color: var(--accent2); font-family: var(--mono); margin-top: 2px; }
.catalogo-card .qty { font-size: 16px; font-weight: 700; color: var(--accent2); font-family: var(--mono); margin-top: 2px; }
.catalogo-gestione-riga { display: flex; justify-content: space-between; align-items: center;
  background: var(--bg4); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; }

/* LUCI — vista "Schede": una zona a fuoco per volta, swipe laterale + dial radiale */
.zc-glance { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.zc-glance::-webkit-scrollbar { display: none; }
.zc-glance-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; cursor: pointer; }
.zc-glance-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg4); border: 2px solid var(--border2);
  transition: box-shadow .15s, border-color .15s, background .15s; }
.zc-glance-dot.on { background: var(--zc); border-color: var(--zc); box-shadow: 0 0 8px 1px var(--zc); }
.zc-glance-dot--ambiente { display: flex; align-items: center; justify-content: center;
  background: transparent; border-color: transparent; box-shadow: none; font-size: 13px; line-height: 1; }
.zc-glance-item.corrente .zc-glance-dot { outline: 2px solid var(--text); outline-offset: 2px; }
.zc-glance-label { font-family: var(--mono); font-size: 9px; color: var(--text2); letter-spacing: .5px; }

.zc-carosello { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none; }
.zc-carosello::-webkit-scrollbar { display: none; }
.zc-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 4px; }

.zc-card { border-radius: 22px; border: 1px solid var(--border2); padding: 26px 22px 22px;
  background: linear-gradient(160deg, var(--tint), var(--bg3) 72%); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center; text-align: center; transition: filter .2s; }
.zc-card.off { filter: saturate(.5); }
.zc-nome { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 24px; }

.zc-dial { width: 190px; height: 190px; border-radius: 50%; position: relative; margin-bottom: 22px;
  touch-action: none; cursor: grab; background: conic-gradient(var(--zc) var(--deg, 0deg), var(--bg4) 0deg); }
.zc-dial:active { cursor: grabbing; }
.zc-dial::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: var(--bg2);
  box-shadow: inset 0 0 0 1px var(--border2); }
/* centro e pallino sopra al ::after (che è generato per ultimo e altrimenti li coprirebbe).
   zc-dial-centro è solo contenitore di layout (pointer-events:none, "trasparente" al tocco):
   l'interruttore vero è il cerchietto più piccolo zc-dial-toggle al suo interno — altrimenti,
   coprendo tutto il centro del dial, non lascerebbe quasi spazio per trascinare la luminosità. */
.zc-dial-centro { position: absolute; inset: 15px; display: flex; align-items: center;
  justify-content: center; z-index: 1; pointer-events: none; }
.zc-dial-toggle { width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; pointer-events: auto; cursor: pointer; }
.zc-dial-val { font-family: var(--mono); font-size: 32px; font-weight: 700; color: var(--text); transition: color .15s, font-size .15s; }
.zc-dial-val.zc-dial-spenta { font-size: 26px; color: var(--text3); }
.zc-dial-lab { font-family: var(--mono); font-size: 10px; color: var(--text2); letter-spacing: 1.5px; }
.zc-dial-knob { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px var(--zc), 0 0 0 3px var(--zc); pointer-events: none; z-index: 1;
  transform: rotate(var(--deg, 0deg)) translate(0, -87px); transition: transform .15s ease; }
.zc-dial.zc-dragging .zc-dial-knob { transition: none; }

.zc-swatches { display: flex; gap: 10px; margin-bottom: 22px; }
.zc-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.zc-swatch.sel { border-color: var(--text); transform: scale(1.15); }

.zc-bulbs { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.zc-bulb { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.zc-bulb-dot { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border2); background: var(--bg4); }
.zc-bulb-dot.on { background: radial-gradient(circle at 35% 30%, #fff, var(--zc) 55%); border-color: var(--zc);
  box-shadow: 0 0 10px 1px var(--zc); }
.zc-bulb-label { font-family: var(--mono); font-size: 9px; color: var(--text3); max-width: 64px; }

.zc-pag { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.zc-pag span { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); display: block;
  transition: width .15s, background .15s; }
.zc-pag span.cur { width: 18px; border-radius: 3px; background: var(--zc); }

/* LUCI — shelf scene (in fondo alla schermata Zone) e scheda Ambiente (ultima del carosello) */
.zc-scene-section { margin-top: 26px; }
.zc-scene-sottotitolo { font-family: var(--mono); font-size: 9.5px; color: var(--text3); letter-spacing: 1.5px; margin: 4px 0 6px; }
.zc-scene-vuoto { font-size: 12px; color: var(--text2); padding: 4px 2px 14px; }
.zc-scene-shelf { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.zc-scene-shelf::-webkit-scrollbar { display: none; }
.zc-scene-chip { flex: 0 0 auto; width: 74px; text-align: center; cursor: pointer; position: relative; }
.zc-scene-swatch { width: 74px; height: 54px; border-radius: 14px; margin-bottom: 6px; display: flex;
  align-items: center; justify-content: center; font-size: 20px; border: 1px solid var(--border2); box-shadow: var(--shadow-sm); }
.zc-scene-plus { background: none; border: 1px dashed var(--border2); color: var(--text2); font-size: 22px; box-shadow: none; }
.zc-scene-nome { font-size: 10.5px; color: var(--text2); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Scena dinamica in esecuzione: il suo chip pulsa piano + bottone stop dedicato */
@keyframes zc-scene-pulse {
  0%, 100% { border-color: var(--accent2); box-shadow: var(--shadow-sm), 0 0 0 0 rgba(160, 109, 212, 0.5); }
  50%      { border-color: var(--accent);  box-shadow: var(--shadow-sm), 0 0 11px 3px rgba(160, 109, 212, 0.32); }
}
.zc-scene-chip.in-esecuzione .zc-scene-swatch { border-color: var(--accent2); animation: zc-scene-pulse 1.6s ease-in-out infinite; }
.zc-scene-chip.in-esecuzione .zc-scene-nome { color: var(--accent2); }
@media (prefers-reduced-motion: reduce) {
  .zc-scene-chip.in-esecuzione .zc-scene-swatch { animation: none; box-shadow: var(--shadow-sm), 0 0 8px 2px rgba(160, 109, 212, 0.4); }
}
.zc-scene-stop { position: absolute; top: -6px; right: -6px; z-index: 6; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff; border: none; font-size: 11px; line-height: 22px; padding: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--bg2); }
/* badge sul chip scena quando la scena comanda anche delle prese */
.zc-scene-presa-badge { position: absolute; top: -6px; left: -4px; z-index: 6; font-size: 12px; filter: drop-shadow(0 0 2px var(--bg2)); }

/* Sezione "Prese" del modale scena: riga nome + selettore a 3 stati */
.scena-presa-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.scena-presa-riga:last-child { border-bottom: none; }
.scena-presa-nome { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scena-presa-opts { display: flex; flex-shrink: 0; border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; }
.scena-presa-opt { background: var(--bg2); color: var(--text2); border: none; border-left: 1px solid var(--border2);
  font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 6px 10px; cursor: pointer; }
.scena-presa-opt:first-child { border-left: none; }
.scena-presa-opt.sel { background: var(--accent2); color: #fff; }

.zc-ambiente-card { border-radius: 22px; border: 1px solid var(--border2); padding: 24px 18px;
  background: linear-gradient(160deg, rgba(160,109,212,0.10), var(--bg3) 72%); box-shadow: var(--shadow-md); }

/* Prese smart (solo acceso/spento) — verde per "in funzione", non il violetto
   delle luci: qui "acceso" è uno stato di sicurezza (es. il frigo che gira),
   non un'atmosfera, meglio non confonderlo visivamente con le zone luci. */
.presa-card { position: relative; display: flex; justify-content: space-between; align-items: center;
  background: var(--bg4); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px; }
.presa-card.modifica { padding-right: 34px; }
.presa-nome { font-size: 14px; font-weight: 700; }
.presa-toggle { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 1px; color: var(--text2); border: 1px solid var(--border2); border-radius: 20px;
  padding: 5px 12px 5px 8px; cursor: pointer; background: var(--bg3); }
.presa-toggle .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); }
.presa-toggle.on { color: var(--green); border-color: var(--green); }
.presa-toggle.on .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.presa-toggle.offline { opacity: 0.5; }
.presa-toggle.offline .dot { background: var(--red); }

/* Dial in scala ridotta, per usarlo dentro un modale (es. modale scena) invece che
   nella card a piena zona — stessa geometria, solo proporzioni più piccole. */
.zc-dial.mini { width: 150px; height: 150px; margin: 0 auto 6px; }
.zc-dial.mini::after { inset: 13px; }
.zc-dial.mini .zc-dial-centro { inset: 13px; }
.zc-dial.mini .zc-dial-val { font-size: 26px; }
.zc-dial.mini .zc-dial-lab { font-size: 9.5px; }
.zc-dial.mini .zc-dial-knob { width: 16px; height: 16px; transform: rotate(var(--deg, 0deg)) translate(0, -68px); }

/* Modale scena: l'anteprima icona+colore è essa stessa il campo di input (tastiera
   emoji nativa del telefono) invece di un input di testo separato. */
.scena-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; }
.scena-preview-swatch { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 28px; text-align: center; border: 1px solid var(--border2);
  box-shadow: var(--shadow-sm), 0 0 20px -6px var(--pcol, transparent); background: var(--pcol, #ffffff);
  font-family: var(--font); padding: 0; cursor: pointer; caret-color: transparent; }
.scena-preview-swatch:focus { outline: none; border-color: var(--accent2); }
.scena-preview-hint { font-family: var(--mono); font-size: 9.5px; color: var(--text3); letter-spacing: .5px; }

/* Lampadine incluse, raggruppate per zona (stesso pallino della schermata Zone) */
.scena-zona-gruppo { margin-bottom: 16px; }
.scena-zona-titolo { font-family: var(--mono); font-size: 10.5px; color: var(--text3); letter-spacing: 1.5px; margin-bottom: 8px; }
.scena-bulb-riga { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.scena-bulb { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; }
.scena-bulb-custom { font-size: 13px; cursor: pointer; opacity: .4; }
.scena-bulb-custom.attivo { opacity: 1; }

.scena-override { margin-bottom: 4px; padding: 12px; background: var(--bg4); border-radius: 10px; border: 1px solid var(--border); }
.scena-override-titolo { font-family: var(--mono); font-size: 10px; color: var(--text2); letter-spacing: 1px; margin-bottom: 10px; }
.scena-override-colori { display: flex; gap: 6px; margin-bottom: 10px; }
.scena-override-reset { font-size: 11px; color: var(--text2); background: none; border: none; text-decoration: underline;
  cursor: pointer; font-family: var(--font); padding: 0; }

/* Modale scena DINAMICA — selettore tipo, badge d'ordine sul tocco, slider
   velocità a sensibilità non lineare, bottone "Prova adesso". */
.tipo-selettore { display: flex; gap: 10px; margin-bottom: 20px; }
.tipo-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px;
  border-radius: 12px; border: 1px solid var(--border2); background: var(--bg3); cursor: pointer; transition: all .15s; }
.tipo-card .ic { font-size: 24px; }
.tipo-card .lab { font-family: var(--mono); font-size: 10.5px; color: var(--text2); letter-spacing: .5px; text-align: center; }
.tipo-card.sel { border-color: var(--accent2); background: var(--bg4); box-shadow: 0 0 0 1px var(--accent2); }
.tipo-card.sel .lab { color: var(--text); }

.numero-badge { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent2); color: #fff; font-family: var(--mono); font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg2); }
#scdColoriBox .zc-swatch { position: relative; overflow: visible; }
#scdBulbsBox .zc-bulb-dot { position: relative; }
#scdBulbsBox .scena-bulb { cursor: pointer; }
#scdBulbsBox .zc-bulb-dot.demo { box-shadow: 0 0 18px 4px var(--zc); transform: scale(1.18); }

.velocita-box { margin-bottom: 22px; }
.velocita-val { text-align: center; font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--accent2); margin-bottom: 6px; }
.velocita-letture { position: relative; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--text3); margin-top: 4px; }
/* la barra cambia sensibilità a 1/3: l'etichetta "1s" segue quel punto, non il centro */
.velocita-letture .mid { position: absolute; left: 33.3%; transform: translateX(-50%); }
input[type=range].velocita { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; cursor: pointer;
  background: linear-gradient(to right, var(--accent2) 0%, var(--accent2) var(--pct, 50%), var(--bg4) var(--pct, 50%), var(--bg4) 100%); }
input[type=range].velocita::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent2); box-shadow: 0 0 8px var(--accent2); cursor: grab; margin-top: -1px; }
input[type=range].velocita::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 3px solid var(--accent2); box-shadow: 0 0 8px var(--accent2); }

.scena-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 10px; text-align: center; cursor: pointer; position: relative; box-shadow: var(--shadow-sm); }
.scena-card .icona { font-size: 26px; margin-bottom: 6px; }
.scena-card .nome { font-size: 13px; font-weight: 700; }

.utente-card { border-radius: 10px; padding: 12px 10px; text-align: center; cursor: pointer;
  position: relative; border: 1px solid var(--border); background: var(--bg3); min-height: 100px; box-shadow: var(--shadow-sm); }
.utente-card.debito { background: #1a0a0a; border-color: var(--red); }
.utente-card.credito { background: #08131f; border-color: var(--blue); }
.utente-card.ridotto { border-color: var(--green); }
.utente-card.pieno { border-color: var(--amber); }
.utente-card .nome { font-size: 14px; font-weight: 700; overflow-wrap: break-word; }
.utente-card .saldo { font-size: 13px; font-family: var(--mono); font-weight: 700; margin-top: 2px; }
.utente-card .etichetta { font-size: 9px; letter-spacing: 1px; margin-top: 2px; }
.card-del-btn { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff; border: none; font-size: 12px; cursor: pointer; line-height: 22px; padding: 0; z-index: 5; }
.card-aggiungi { display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed var(--border2); border-radius: 10px; padding: 12px 10px; cursor: pointer; color: var(--text2); }
.card-aggiungi .plus { font-size: 22px; margin-bottom: 2px; }

/* ---- Righe piene (una sotto l'altra) — per elenchi che possono avere pochi
   o tanti elementi (es. Foto & Musica): niente più orfani in una griglia a
   colonne fisse, si adatta da sola a qualsiasi numero di voci. ---- */
.lista-righe { display: flex; flex-direction: column; gap: 8px; }
.riga-elemento {
  display: flex; align-items: center; gap: 12px; position: relative;
  background: linear-gradient(160deg, var(--bg3), var(--bg2)); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.4s ease;
  box-shadow: var(--shadow-sm);
}
.riga-elemento:active { transform: scale(0.98); box-shadow: 0 0 0 3px rgba(160,109,212,0.3), 0 0 14px rgba(160,109,212,0.35); }
.riga-elemento-icona {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; font-size: 18px;
  display: flex; align-items: center; justify-content: center; background: rgba(160,109,212,0.2);
}
.riga-elemento-nome { font-size: 13px; font-weight: 700; }
.riga-elemento-del-btn {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--red); color: #fff; border: none; font-size: 13px; cursor: pointer; line-height: 26px; padding: 0;
}
.riga-aggiungi {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--border2); border-radius: 10px; padding: 14px; cursor: pointer; color: var(--text2);
}
.riga-aggiungi .plus { font-size: 18px; }

.invito-riga { background: var(--bg4); border-radius: 10px; padding: 10px 12px; border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.invito-riga .info { font-size: 13px; }
.invito-riga .meta { font-size: 11px; color: var(--text3); font-family: var(--mono); }
.badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-family: var(--mono); }
.badge-usato { background: rgba(15,186,116,0.15); color: var(--green); }
.badge-attesa { background: rgba(245,166,35,0.15); color: var(--amber); }
.badge-permanente { background: rgba(59,130,246,0.15); color: var(--blue); }
.badge-revocato { background: var(--bg4); color: var(--text3); }
.btn-revoca { font-size: 10px; background: none; border: 1px solid var(--red); color: var(--red); padding: 3px 9px; border-radius: 10px; cursor: pointer; font-family: var(--font); }
.btn-mostra-qr { font-size: 10px; background: none; border: 1px solid var(--blue); color: var(--blue); padding: 3px 9px; border-radius: 10px; cursor: pointer; font-family: var(--font); }
.invito-riga-inattiva { opacity: 0.5; }
.codice-invito { display: inline-block; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--text2); letter-spacing: 0.5px; cursor: pointer; }
.codice-invito:active { background: var(--bg4); }

.flash-notif {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-200px);
  background: var(--bg3); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 16px;
  font-size: 13px; color: var(--accent2); z-index: 400; transition: transform 0.3s ease;
  white-space: nowrap; font-family: var(--mono); pointer-events: none;
}
.flash-notif.show { transform: translateX(-50%) translateY(0); }

.fab-scanner { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; font-size: 26px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 90; }
.fab-scanner:active { background: var(--accent2); }

/* ---- Modalità "una mano sola" — tasto Home sempre raggiungibile col
   pollice, fisso in basso a sinistra (a destra c'è già lo scanner nelle
   pagine che lo usano), visibile su ogni pagina tranne Home/login. ---- */
.fab-home { position: fixed; bottom: 92px; right: 24px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg4); color: var(--text); border: 1px solid var(--border2); font-size: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 90; transition: box-shadow 0.4s ease; }
.fab-home:active { background: var(--accent); box-shadow: 0 0 0 3px rgba(160,109,212,0.3), 0 0 14px rgba(160,109,212,0.35); }
.pagina-chat-attiva .fab-home { display: none; } /* lì c'è già la casella di testo in fondo, si sovrapporrebbero */

/* ---- Schermi larghi / orizzontale: usa davvero lo spazio in più ---- */
@media (min-width: 700px) {
  .app { max-width: 720px; }
  .home-grid, .griglia-2col { grid-template-columns: repeat(3, 1fr); }
  .modal { max-width: 620px !important; }
}
@media (min-width: 1000px) {
  .app { max-width: 960px; }
  .home-grid, .griglia-2col { grid-template-columns: repeat(4, 1fr); }
  .modal { max-width: 800px !important; }
}
@media (min-width: 1300px) {
  .griglia-2col { grid-template-columns: repeat(5, 1fr); }
  .modal { max-width: 960px !important; }
}

/* Interruttore on/off (toggle switch), usato es. nelle impostazioni notifiche globali */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background-color: #444; transition: 0.2s; border-radius: 24px; }
.switch .slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #fff; transition: 0.2s; border-radius: 50%; }
.switch input:checked + .slider { background-color: var(--accent2, #a06dd4); }
.switch input:checked + .slider::before { transform: translateX(20px); }


/* ============================================================
   LUCI DMX — Regia (uso dal vivo). Vedi js/ui/luci_dmx.js
   ============================================================ */
#viewRegiaLuci { padding-bottom: 250px; }   /* spazio per la barra live fissa */

.dmx-offline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg4); border: 1px solid var(--red); border-radius: 10px;
  padding: 12px 14px; margin: 8px 0; font-size: 13px; color: var(--text);
}

.dmx-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.dmx-tabs::-webkit-scrollbar { display: none; }
.dmx-tab {
  flex: 0 0 auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px;
  padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border2);
  background: var(--bg4); color: var(--text2); cursor: pointer;
}
.dmx-tab.on { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent2); color: var(--text); }

.dmx-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.dmx-tile {
  display: flex; flex-direction: column; gap: 8px; min-height: 82px;
  background: var(--bg4); border: 1px solid var(--border2); border-radius: 13px;
  padding: 12px; text-align: left; cursor: pointer; color: var(--text);
}
.dmx-tile-top { display: flex; align-items: flex-start; gap: 6px; }
.dmx-tile-nome { font-family: var(--font); font-weight: 600; font-size: 15px; line-height: 1.15; }
.dmx-tile-bar { height: 6px; border-radius: 3px; margin-top: auto; }
.dmx-tile.on { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2), 0 0 22px -6px var(--accent2); }
.dmx-onair {
  margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 1px;
  color: var(--green); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.dmx-onair::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: dmxPulse 1.5s ease-in-out infinite;
}
@keyframes dmxPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .dmx-onair::before { animation: none; } }

.dmx-colori { display: flex; flex-wrap: wrap; gap: 8px; }
.dmx-sw { width: 38px; height: 38px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.14); cursor: pointer; padding: 0; }
.dmx-sw-txt {
  width: auto; padding: 0 14px; background: var(--bg4); color: var(--text2);
  font-family: var(--font); font-weight: 600; font-size: 13px;
}
.dmx-sw-txt.attivo { color: var(--text); border-color: var(--accent2); }

.dmx-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: linear-gradient(180deg, var(--bg3), var(--bg));
  border-top: 1px solid var(--border2); padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.dmx-barra-riga { display: flex; gap: 12px; }
.dmx-field { flex: 1; min-width: 0; }
.dmx-cap {
  display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 10px; letter-spacing: 1px; color: var(--text2); margin-bottom: 6px;
}
.dmx-field input[type=range] { width: 100%; accent-color: var(--accent2); height: 26px; }

.dmx-tap {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-radius: 11px; border: 1px dashed var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--green); cursor: pointer;
}
.dmx-tap .dmx-bpm { font-size: 15px; color: var(--text); letter-spacing: 0.5px; }

.dmx-holds { gap: 10px; }
.dmx-hold {
  flex: 1; padding: 13px 4px; border-radius: 11px; border: 1px solid var(--border2);
  background: var(--bg4); color: var(--text2); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
}
.dmx-hold.dmx-hold-s { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.dmx-hold.dmx-hold-b { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.dmx-hold.attivo { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- LUCI DMX — programmazione scena (js/ui/luci_dmx.js, D2) ---- */
#viewScenaDmx { padding-bottom: 60px; }
.scdmx-meta { display: flex; gap: 8px; }
.scdmx-editlbl { margin-left: auto; color: var(--accent2); font-size: 14px; }
.dmx-tab.scdmx-set { border-color: var(--accent2); }
.dmx-tile.scdmx-edit { border-style: dashed; }

.scdmx-anteprima {
  display: flex; gap: 8px; align-items: flex-end; padding: 14px;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 12px; min-height: 62px;
  position: sticky; top: 6px; z-index: 15; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.7);
}
.scdmx-colobox { width: 18px; height: 18px; border-radius: 4px; display: inline-block; border: 1px solid var(--border2); vertical-align: middle; }
.scdmx-fix { display: block; border-radius: 6px; }
.scdmx-fix.par { flex: 1; height: 44px; }
.scdmx-fix.sp { width: 38px; height: 38px; border-radius: 50%; }

.scdmx-panel {
  background: var(--bg4); border: 1px solid var(--border2); border-radius: 12px; padding: 14px;
}
.scdmx-panel input[type=range] { width: 100%; accent-color: var(--accent2); height: 24px; }
.scdmx-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.scdmx-fx {
  background: var(--bg4); border: 1px solid var(--border2); border-radius: 12px;
  padding: 12px 13px; margin-bottom: 10px;
}
.scdmx-fx input[type=range] { width: 100%; accent-color: var(--accent2); height: 24px; }
.scdmx-fx-h { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.scdmx-fx-h select {
  flex: 1; min-width: 0; padding: 8px; border-radius: 8px; background: var(--bg2);
  border: 1px solid var(--border2); color: var(--text); font-family: var(--font); font-size: 13px;
}
.scdmx-x { background: none; border: 0; color: var(--text2); font-size: 15px; padding: 4px 6px; cursor: pointer; }
.scdmx-fx-riga { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.scdmx-fx-riga .dmx-hold { flex: 0 1 auto; padding: 8px 12px; font-size: 10px; }
.scdmx-sfuma { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); margin-left: auto; }

.scdmx-conferma {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 16px 0 0; font-size: 13px; color: var(--text);
}
.scdmx-azioni { display: flex; gap: 10px; margin-top: 18px; }
.scdmx-azioni .btn { flex: 1; }

/* stepper divisioni di battuta (velocità effetto) */
.scdmx-step { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.scdmx-step button {
  flex: 1; padding: 9px 6px; border-radius: 9px; border: 1px solid var(--border2);
  background: var(--bg2); color: var(--text2); cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px;
}
.scdmx-step button:active { background: var(--bg4); }
.scdmx-step > span {
  min-width: 56px; text-align: center; font-family: var(--mono); font-size: 15px;
  color: var(--text); letter-spacing: 0.5px;
}

/* effetti: chip controfase (pulsato) + editor palette (ciclo colori) */
.scdmx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.scdmx-chip {
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border2);
  background: var(--bg2); color: var(--text2); cursor: pointer;
  font-family: var(--font); font-size: 12px;
}
.scdmx-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.scdmx-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.scdmx-palc {
  width: 40px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85); font-size: 11px; cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* select forma d'onda a piena larghezza nell'editor effetti */
.scdmx-sel1 {
  width: 100%; padding: 9px 10px; margin-bottom: 4px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border2); color: var(--text);
  font-family: var(--font); font-size: 13px;
}

/* editor effetti — redesign card + label contestuali (spec 2026-09-08) */
.scdmx-tiposel {
  flex: 1; min-width: 0; text-align: left; background: var(--bg2);
  border: 1px solid var(--border2); border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.scdmx-tiposel .nm { display: block; font-family: var(--font); font-weight: 600; font-size: 14px; color: var(--text); }
.scdmx-tiposel .ds { display: block; font-size: 11px; color: var(--text3); margin-top: 1px; line-height: 1.3; }
.scdmx-tipogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 4px; }
.scdmx-tipocard {
  text-align: left; padding: 8px 9px; border-radius: 7px; background: var(--bg4);
  border: 1px solid var(--border2); cursor: pointer;
}
.scdmx-tipocard.on { border-color: var(--accent2); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.scdmx-tipocard .nm { display: block; font-family: var(--font); font-weight: 600; font-size: 12.5px; color: var(--text); }
.scdmx-tipocard .ds { display: block; font-size: 10px; color: var(--text3); margin-top: 1px; line-height: 1.25; }
.scdmx-divrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.scdmx-divrow .dmx-tab { flex: 0 0 auto; padding: 6px 11px; font-size: 12px; }
.scdmx-preset { display: flex; flex-wrap: wrap; gap: 8px; }
input[type=range].scdmx-hue {
  width: 100%; height: 16px; border-radius: 8px; -webkit-appearance: none; appearance: none;
  outline: none; margin: 2px 0 6px; border: 1px solid var(--border2);
}
input[type=range].scdmx-hue::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bg); cursor: pointer;
}