/* ============================================================================
   PHOTOMETRICS MAXIMIZE — modal fullscreen + Crea Apparecchio
   ----------------------------------------------------------------------------
   Pattern animation/backdrop coerente con hero-lightbox e specs-maximize.
   Stage = #photometrics trasferito (DOM transfer) con .pm-maximized class
   per CSS dimensioni enhanced. Compare panel laterale destra con form.
   ============================================================================ */

/* ── Root container ─────────────────────────────────────────────────── */
.dspmx{
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.5vw, 40px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.dspmx.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 280ms ease, visibility 0s linear 0s;
}
.dspmx.is-closing{
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.dspmx-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, .82);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
          backdrop-filter: blur(14px) saturate(120%);
  cursor: pointer;
}

.dspmx-frame{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: min(1700px, 97vw);
  max-height: min(1000px, 94vh);
  display: flex;
  flex-direction: column;
  background:
    var(--ds-c-modal-sheen),
    var(--ds-c-modal-frame);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
  overflow: hidden;
  transform: scale(.92);
  transform-origin: center;
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.dspmx.is-open .dspmx-frame{ transform: scale(1); }
.dspmx.is-closing .dspmx-frame{
  transform: scale(.96);
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

/* ── Head con title + toolbar + close ───────────────────────────────── */
.dspmx-head{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(40,36,28,.65), rgba(28,25,20,.20));
  flex-shrink: 0;
}
.dspmx-title-wrap{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex-shrink: 0;
}
.dspmx-eyebrow{
  font: 600 .68rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F4B532;
  opacity: .85;
}
.dspmx-title{
  margin: 0;
  font: 700 1.15rem/1.1 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(245,240,225,.96);
}
.dspmx-toolbar{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* TIER 3 D1 (sessione 20): toolbar tab button consolidato — selettori
   .dspmx-tb-btn (photometrics) + .dsmx-tb-btn (specs) sono identici
   visualmente. Mantengo entrambi i nomi classe per non toccare l'HTML
   dei due moduli (rischio regression), ma le regole sono condivise
   qui con selettore multiplo. La regola SHARED vive in photometrics-maximize.css
   perché caricata su product-f7.html prima di specs-maximize.css.
   La specs-maximize.css ha le stesse regole rimosse (cleanup duplicazione). */
.dspmx-tb-btn,
.dsmx-tb-btn{
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(244,181,50,.50);
  background: rgba(40,36,28,.78);
  color: rgba(245,240,225,.92);
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 600;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 100ms ease;
}
.dspmx-tb-btn:hover,
.dsmx-tb-btn:hover{
  background: rgba(60,52,38,.88);
  border-color: rgba(244,181,50,.80);
  color: #F4B532;
}
.dspmx-tb-btn:active,
.dsmx-tb-btn:active{ transform: translateY(1px); }
.dspmx-tb-btn[aria-pressed="true"],
.dsmx-tb-btn[aria-pressed="true"]{
  background: #F4B532 !important;
  border-color: #C9A800 !important;
  color: rgba(0,0,0,.92) !important;
}
.dspmx-tb-btn:focus-visible,
.dsmx-tb-btn:focus-visible{
  outline: 2px solid #F4B532;
  outline-offset: 2px;
}
.dspmx-close{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.40);
  color: rgba(255,255,255,.88);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 100ms ease;
}
.dspmx-close:hover{
  background: rgba(0,0,0,.65);
  border-color: rgba(255,209,0,.65);
  color: #F4B532;
}

/* ── Body: main (stage + cmp table) + compare panel laterale ───────── */
.dspmx-body{
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.dspmx-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.dspmx-main::-webkit-scrollbar{ width: 8px; }
.dspmx-main::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 4px; }

/* Stage: contiene il widget photometrics trasferito */
.dspmx-stage{
  flex-shrink: 0;
  padding: 18px 20px 12px;
  background: rgba(255,255,255,.02);
}

/* Override DOM photometrics quando .pm-maximized è applicato dal JS:
   - dimensioni enhanced (width 100%, max more generous)
   - rimuove eventuali constraints che lo facevano "compatto" in pagina
   - DARK MODE COHERENCE: il widget originale ha colori light (testo scuro,
     bg bianco-trasparente) → nel modal dark questi colori vanno OVERRIDE
     per leggibilità. Force chiaro su scuro per font angle/labels + override
     bg cone-host. */
#photometrics.pm-maximized{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  color: rgba(245,240,225,.92) !important;
}
/* canvas/svg stage interno del widget — più alto in modal */
#photometrics.pm-maximized .pm-cone-host,
#photometrics.pm-maximized canvas,
#photometrics.pm-maximized svg{
  min-height: 360px !important;
}
/* Dark coherence: cone-host bg dark + labels chiare */
#photometrics.pm-maximized .pm-cone-host{
  background: rgba(8,6,4,.42) !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* Tutte le label di angoli/distanze/header dentro il widget → font chiaro
   leggibile sul fondo scuro del modal */
#photometrics.pm-maximized .pm-angle,
#photometrics.pm-maximized .pm-h,
#photometrics.pm-maximized .pm-h3,
#photometrics.pm-maximized .pm-value,
#photometrics.pm-maximized .pm-card,
#photometrics.pm-maximized .pm-fstop-mode-label,
#photometrics.pm-maximized .pm-val-unit,
#photometrics.pm-maximized .pm-fstop-val,
#photometrics.pm-maximized [class*="pm-"]{
  color: rgba(245,240,225,.92) !important;
}
#photometrics.pm-maximized .pm-card{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
}
/* Pulsanti hover (fullscreen/export del widget interno) → cromia dark
   coerente, no light buttons su fondo dark che stonavano */
#photometrics.pm-maximized button:not(.pm-toggle-btn):not(.pm-fstop-btn){
  background: rgba(40,36,28,.78) !important;
  color: rgba(245,240,225,.92) !important;
  border-color: rgba(255,255,255,.12) !important;
}
#photometrics.pm-maximized button:not(.pm-toggle-btn):not(.pm-fstop-btn):hover{
  background: rgba(60,52,38,.88) !important;
  border-color: rgba(244,181,50,.55) !important;
  color: #F4B532 !important;
}
/* Toggle/active buttons del widget → mantengono brand giallo */
#photometrics.pm-maximized .pm-toggle-btn[aria-pressed="true"],
#photometrics.pm-maximized .pm-fstop-btn.is-active{
  background: #F4B532 !important;
  color: rgba(0,0,0,.92) !important;
}

/* ── Comparison table host (sotto stage, mostra solo se device selected) */
.dspmx-cmp-table-host{
  padding: 16px 20px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  flex-shrink: 0;
}

.dspmx-cmp-empty{
  text-align: center;
  padding: 28px 16px;
  color: rgba(180,175,160,.55);
  font: 500 .85rem/1.5 "Oswald", system-ui, sans-serif;
  letter-spacing: .03em;
  font-style: italic;
}

/* ── HEADLINE SUMMARY BOX (Bug D) ─────────────────────────────────────
   Confronto diretto SECONDO I SETTAGGI CORRENTI utente (beam + CCT da
   PM_STATE). Card per ciascuna colonna non-base prima della tabella
   dettagliata sotto. */
.dspmx-cmp-headline{
  margin: 14px 0 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(244,181,50,.08), rgba(244,181,50,.02));
  border: 1px solid rgba(244,181,50,.22);
  border-radius: 10px;
}
.dspmx-cmp-headline-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dspmx-cmp-headline-eyebrow{
  font: 600 .68rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F4B532;
}
.dspmx-cmp-headline-context{
  font: 500 .78rem/1 system-ui;
  color: rgba(220,215,200,.80);
}
.dspmx-cmp-headline-context strong{
  color: rgba(245,240,225,.95);
  font-weight: 700;
}
.dspmx-cmp-headline-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.dspmx-cmp-headline-card{
  padding: 12px 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  display: grid;
  gap: 6px;
}
.dspmx-cmp-headline-card.is-win{ border-color: rgba(80,200,120,.45); }
.dspmx-cmp-headline-card.is-loss{ border-color: rgba(220,90,80,.45); }
.dspmx-cmp-headline-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.dspmx-cmp-headline-label{
  font: 700 .78rem/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  color: rgba(245,240,225,.92);
}
.dspmx-cmp-headline-val{
  font: 600 .82rem/1.2 system-ui;
  color: rgba(245,240,225,.95);
  font-variant-numeric: tabular-nums;
}
.dspmx-cmp-headline-vs{
  font: 600 .65rem/1 "Oswald", system-ui;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(180,175,160,.55);
  text-align: center;
}
.dspmx-cmp-headline-verdict{
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 4px;
  font: 700 .82rem/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  text-align: center;
}
.dspmx-cmp-headline-verdict.is-win{
  background: rgba(80,200,120,.14);
  color: #6FD08A;
}
.dspmx-cmp-headline-verdict.is-loss{
  background: rgba(220,90,80,.14);
  color: #ff8a82;
}
.dspmx-cmp-headline-verdict.is-equal{
  background: rgba(180,175,160,.10);
  color: rgba(220,215,200,.75);
}

/* Light mode variants per headline */
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-headline{
  background: linear-gradient(180deg, rgba(244,181,50,.10), rgba(244,181,50,.03));
  border-color: rgba(200,150,30,.30);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-headline-card{
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.10);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-headline-label,
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-headline-val{
  color: rgba(20,18,12,.90);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-headline-context strong{
  color: rgba(20,18,12,.92);
}

/* ── ANGLE-ALIGNED COMPARISON (Modello C — pareggio + extra range) ───
   Confronto onesto a parità di apertura: ogni coppia (base, other) ha
   un blocco con righe pivot (interpolazione su angolo comune) e righe
   extra (angoli esclusivi di un prodotto, "limit reached" sull'altro). */
.dspmx-angle-aligned{
  margin: 0 0 18px;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, rgba(244,181,50,.05), rgba(244,181,50,.01));
  border: 1px solid rgba(244,181,50,.18);
  border-radius: 10px;
}
.dspmx-angle-head{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(244,181,50,.18);
}
.dspmx-angle-eyebrow{
  font: 700 .72rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F4B532;
}
.dspmx-angle-sub{
  font: 400 .76rem/1.4 system-ui;
  color: rgba(220,215,200,.62);
}
.dspmx-angle-pair{
  margin-top: 14px;
}
.dspmx-angle-pair:first-child{ margin-top: 0; }
.dspmx-angle-pair-head{
  margin-bottom: 8px;
}
.dspmx-angle-pair-title{
  margin: 0;
  font: 600 .82rem/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  color: rgba(245,240,225,.92);
}
.dspmx-angle-vs{
  color: rgba(180,175,160,.55);
  font-weight: 400;
  margin: 0 6px;
}
.dspmx-angle-anomaly{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 5px 10px;
  background: rgba(255,180,40,.10);
  border: 1px solid rgba(255,180,40,.30);
  border-radius: 6px;
  font: 500 .70rem/1 system-ui;
  color: rgba(255,200,80,.95);
  cursor: help;
}
.dspmx-angle-anomaly-icon{
  font-size: .85rem;
  font-weight: 700;
}

.dspmx-angle-table{
  width: 100%;
  border-collapse: collapse;
  font: 400 .80rem/1.3 system-ui;
}
.dspmx-angle-table thead th{
  padding: 8px 10px;
  text-align: left;
  font: 600 .68rem/1 "Oswald", system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(180,175,160,.65);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dspmx-angle-table thead th:last-child{
  text-align: right;
}
.dspmx-angle-row td{
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: top;
}
.dspmx-angle-row.is-extra td{
  background: rgba(255,255,255,.015);
}
.dspmx-angle-deg{
  font: 600 .82rem/1.2 "Oswald", system-ui;
  letter-spacing: .03em;
  color: rgba(245,240,225,.95);
  white-space: nowrap;
}
.dspmx-angle-pivot-tag,
.dspmx-angle-extra-tag{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font: 600 .60rem/1 "Oswald", system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.dspmx-angle-pivot-tag{
  background: rgba(244,181,50,.18);
  color: #F4B532;
  border: 1px solid rgba(244,181,50,.30);
}
.dspmx-angle-extra-tag{
  background: rgba(120,180,255,.12);
  color: #8FC2FF;
  border: 1px solid rgba(120,180,255,.25);
}
/* Sessione 20 (TIER 2 B3+D5): light mode override per le pill NATIVO/
   INTERPOLATO. Le regole base sono dark-friendly (colori chiari su scuro);
   senza override il giallo brand chiaro su sfondo bianco caldo è poco
   leggibile, e il blu chiaro su bianco perde contrasto. Pattern light:
   colori più scuri/saturi + sfondo leggero. */
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-pivot-tag{
  background: rgba(244,181,50,.16);
  color: #8C6700;
  border-color: rgba(200,150,30,.45);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-extra-tag{
  background: rgba(60,120,200,.10);
  color: #2A5BA0;
  border-color: rgba(60,120,200,.35);
}
.dspmx-angle-cell-prod{
  font: 500 .65rem/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(180,175,160,.55);
  margin-bottom: 3px;
}
.dspmx-angle-cell-val{
  font: 600 .85rem/1.2 system-ui;
  color: rgba(245,240,225,.95);
  font-variant-numeric: tabular-nums;
}
.dspmx-angle-tag{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(180,175,160,.10);
  border: 1px solid rgba(180,175,160,.20);
  font: 600 .58rem/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(180,175,160,.65);
  cursor: help;
  vertical-align: 1px;
}
.dspmx-angle-limit{
  font: 500 .72rem/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: rgba(180,175,160,.45);
  font-style: italic;
}
.dspmx-angle-delta-cell{
  text-align: right;
  white-space: nowrap;
}
.dspmx-angle-delta{
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font: 700 .72rem/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dspmx-angle-delta.is-win{
  background: rgba(80,200,120,.14);
  color: #6FD08A;
}
.dspmx-angle-delta.is-loss{
  background: rgba(220,90,80,.14);
  color: #ff8a82;
}
.dspmx-angle-delta.is-equal{
  background: rgba(180,175,160,.10);
  color: rgba(220,215,200,.65);
}

/* Light mode variants */
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-aligned{
  background: linear-gradient(180deg, rgba(244,181,50,.06), rgba(244,181,50,.01));
  border-color: rgba(200,150,30,.25);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-eyebrow{ color: rgba(180,130,30,.95); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-sub{ color: rgba(40,35,25,.60); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-pair-title{ color: rgba(20,18,12,.92); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-deg{ color: rgba(20,18,12,.92); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-cell-prod{ color: rgba(40,35,25,.55); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-cell-val{ color: rgba(20,18,12,.92); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-table thead th{
  color: rgba(40,35,25,.55);
  border-bottom-color: rgba(0,0,0,.08);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-row td{
  border-bottom-color: rgba(0,0,0,.05);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-row.is-extra td{
  background: rgba(0,0,0,.02);
}

/* Preset table accordion */
.dspmx-cmp-preset-details{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  overflow: hidden;
}
.dspmx-cmp-preset-summary{
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  background: rgba(255,255,255,.02);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 140ms ease;
}
.dspmx-cmp-preset-summary::-webkit-details-marker{ display: none; }
.dspmx-cmp-preset-summary::before{
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: rgba(244,181,50,.70);
  transition: transform 200ms ease;
}
.dspmx-cmp-preset-details[open] .dspmx-cmp-preset-summary::before{
  transform: rotate(90deg);
}
.dspmx-cmp-preset-summary:hover{
  background: rgba(255,255,255,.04);
}
.dspmx-cmp-preset-eyebrow{
  font: 700 .70rem/1 "Oswald", system-ui;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(220,215,200,.85);
  display: inline-flex;
  align-items: center;
}
.dspmx-cmp-preset-sub{
  font: 400 .72rem/1.3 system-ui;
  color: rgba(180,175,160,.55);
  padding-left: 18px;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-preset-summary{ background: rgba(0,0,0,.02); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-preset-summary:hover{ background: rgba(0,0,0,.04); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-preset-eyebrow{ color: rgba(20,18,12,.85); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-preset-sub{ color: rgba(40,35,25,.55); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-preset-details{
  border-color: rgba(0,0,0,.10);
}

/* ── EXPORT DIALOG ────────────────────────────────────────────────────
   Dialog modale (backdrop opaco, dialog centrato) per scelta opzioni
   export confronto: CCT, angoli, formato. v1: CSV. */
.dspmx-export-backdrop{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.dspmx-export-dialog{
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #1a1814;
  color: rgba(245,240,225,.92);
  border: 1px solid rgba(244,181,50,.30);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-dialog{
  background: #fafaf8;
  color: rgba(20,18,12,.92);
  border-color: rgba(200,150,30,.30);
}
.dspmx-export-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(244,181,50,.18);
}
.dspmx-export-head h3{
  margin: 0;
  font: 700 1rem/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  color: #F4B532;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-head h3{ color: rgba(180,130,30,.95); }
.dspmx-export-close{
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 1.5rem;
  line-height: 1;
  color: inherit;
  opacity: .55;
  transition: opacity 140ms, background 140ms;
}
.dspmx-export-close:hover{
  opacity: 1;
  background: rgba(255,255,255,.08);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-close:hover{ background: rgba(0,0,0,.06); }
.dspmx-export-form{
  padding: 16px 20px 18px;
}
.dspmx-export-fs{
  border: none;
  padding: 0;
  margin: 0 0 16px;
}
.dspmx-export-fs legend{
  font: 600 .68rem/1 "Oswald", system-ui;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,181,50,.85);
  padding: 0;
  margin-bottom: 8px;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-fs legend{ color: rgba(180,130,30,.95); }
.dspmx-export-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
}
.dspmx-export-check{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  font: 400 .80rem/1.3 system-ui;
  transition: border-color 140ms, background 140ms;
}
.dspmx-export-check:hover{
  border-color: rgba(244,181,50,.35);
}
.dspmx-export-check input[type="checkbox"],
.dspmx-export-check input[type="radio"]{
  accent-color: #F4B532;
  flex-shrink: 0;
}
.dspmx-export-check em{
  font-style: normal;
  color: rgba(180,175,160,.55);
  font-size: .92em;
  margin-left: 4px;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-check{
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.10);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-check:hover{
  border-color: rgba(200,150,30,.40);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-check em{ color: rgba(40,35,25,.55); }
.dspmx-export-footer{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-footer{ border-top-color: rgba(0,0,0,.08); }
/* TIER 3 D2 (sessione 20): export buttons allineati al brand button system.
   Pre-fix: radius 6px (rompeva convention 999px brand) + submit senza
   3D shadow (mancava il giallo profondo C9A800). Ora:
   - radius 999px coerente con tutti i CTA brand
   - submit con box-shadow 0 2px 0 #C9A800 (3D effect canonico)
   - active state che "preme" il bottone (translateY + shadow ridotto) */
.dspmx-export-cancel,
.dspmx-export-submit{
  appearance: none;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  font: 700 .72rem/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background 160ms ease, transform 80ms ease, box-shadow 80ms ease;
}
.dspmx-export-cancel{
  background: transparent;
  color: rgba(245,240,225,.65);
  border: 1px solid rgba(255,255,255,.18);
}
.dspmx-export-cancel:hover{
  background: rgba(255,255,255,.05);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-cancel{
  color: rgba(40,35,25,.65);
  border-color: rgba(0,0,0,.18);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-export-cancel:hover{
  background: rgba(0,0,0,.04);
}
.dspmx-export-submit{
  background: #F4B532;
  color: rgba(0,0,0,.92);
  border: 1px solid #C9A800;
  /* Flat-ten sess.25: microelevation + transizione */
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
  transition:
    background 180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    box-shadow 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    transform  120ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1));
}
.dspmx-export-submit:hover{
  background: #E8C000;
  box-shadow:
    0 0 0 1px rgba(201,168,0,.45),
    0 5px 16px rgba(255,209,0,.35);
  transform: translateY(-1px);
}
.dspmx-export-submit:active{
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ── DELTA COLUMN (dedicata) ─────────────────────────────────────────
   Colonna "Δ" subito dopo ogni colonna competitor non-base. Toggle
   pct/abs nel header. Colori semantici basati su getMetricSemantic
   (higher-is-better verde, lower-is-better rosso, neutral grigio). */
.dspmx-cmp-delta-th{
  width: 100px;
  min-width: 90px;
  max-width: 120px;
  padding: 8px 6px !important;
  text-align: center;
  border-bottom: 1px solid rgba(244,181,50,.30);
  background: rgba(244,181,50,.03);
}
.dspmx-cmp-delta-th-base,
.dspmx-cmp-delta-th-other{
  display: block;
  font: 700 .60rem/1.1 "Oswald", system-ui;
  color: rgba(244,181,50,.85);
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dspmx-cmp-delta-th-vs{
  display: block;
  font: 400 .55rem/1 system-ui;
  color: rgba(180,175,160,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 1px 0;
}
/* Sessione 19 unification: mode label compatto (Δ % o Δ assoluto) sotto
   le 3 righe label colonna delta. Sostituisce il segmented control inline. */
.dspmx-cmp-delta-th-mode{
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  font: 700 .58rem/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(244,181,50,.95);
  background: rgba(244,181,50,.10);
  border: 1px solid rgba(244,181,50,.30);
  border-radius: 999px;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-th-mode{
  color: rgba(160,110,20,.95);
  background: rgba(244,181,50,.14);
  border-color: rgba(200,150,30,.40);
}
/* TIER 3 D4 (sessione 20): rimosso dead code .dspmx-cmp-delta-toggle.
   Era il primo toggle singolo legacy, sostituito dal segmented control
   poi a sua volta unificato nel toggle 3-stati Δ vs riferimento /
   vs altri / assoluto della tabella unificata sopra (sessione 19). */

/* SEGMENTED CONTROL %/valore — entrambi i bottoni sempre visibili,
   l'attivo evidenziato in giallo brand pieno. Feedback utente: "non
   è chiaro che puoi cambiare". Pattern segmented = istantaneamente
   leggibile come "scelta tra due opzioni". */
.dspmx-cmp-delta-segctl{
  display: inline-flex;
  margin-top: 6px;
  border: 1px solid rgba(244,181,50,.35);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(244,181,50,.04);
}
.dspmx-cmp-delta-segbtn{
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  color: rgba(244,181,50,.65);
  font: 700 .58rem/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  transition: background 140ms, color 140ms;
}
.dspmx-cmp-delta-segbtn + .dspmx-cmp-delta-segbtn{
  border-left: 1px solid rgba(244,181,50,.22);
}
.dspmx-cmp-delta-segbtn:hover:not(.is-active){
  background: rgba(244,181,50,.10);
  color: #F4B532;
}
.dspmx-cmp-delta-segbtn.is-active{
  background: #F4B532;
  color: rgba(0,0,0,.88);
  cursor: default;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-segctl{
  border-color: rgba(200,150,30,.45);
  background: rgba(244,181,50,.06);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-segbtn{ color: rgba(160,110,20,.75); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-segbtn:hover:not(.is-active){
  background: rgba(244,181,50,.14);
  color: rgba(160,110,20,1);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-segbtn.is-active{
  background: #F4B532;
  color: rgba(0,0,0,.88);
}
.dspmx-cmp-delta-td{
  text-align: center;
  vertical-align: middle;
  padding: 8px 6px;
  background: rgba(244,181,50,.02);
  border-left: 1px dashed rgba(244,181,50,.18);
  font-variant-numeric: tabular-nums;
}

/* Sessione 19 fix d: separatore visivo forte all'inizio di ogni blocco
   competitor (value + delta). Pattern colonne tabella:
     th(1) | base(2) | comp1(3) | Δ1(4) | comp2(5) | Δ2(6) | ...
   Le posizioni dispari da 3 in poi (`2n+3`) sono l'inizio di ogni nuovo
   blocco proiettore. Border-left visibile per disambiguare la lettura
   "questa colonna delta è del proiettore alla SUA SINISTRA, non destra". */
.dspmx-cmp-table tr > td:nth-child(2n+3):not(.dspmx-cmp-delta-td),
.dspmx-cmp-table tr > th:nth-child(2n+3):not(.dspmx-cmp-delta-td){
  border-left: 2px solid rgba(244,181,50,.35);
}
body.ds-dark .dspmx-cmp-table tr > td:nth-child(2n+3):not(.dspmx-cmp-delta-td),
body.ds-dark .dspmx-cmp-table tr > th:nth-child(2n+3):not(.dspmx-cmp-delta-td){
  border-left-color: rgba(244,181,50,.30);
}
.dspmx-cmp-delta-td .dspmx-cmp-delta{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font: 700 .76rem/1 "Oswald", system-ui;
  letter-spacing: .03em;
}
.dspmx-cmp-delta-td .dspmx-cmp-delta.is-win{
  background: rgba(80,200,120,.18);
  color: #5dbb7a;
}
.dspmx-cmp-delta-td .dspmx-cmp-delta.is-loss{
  background: rgba(220,90,80,.18);
  color: #d9665d;
}
.dspmx-cmp-delta-td .dspmx-cmp-delta.is-equal,
.dspmx-cmp-delta-td .dspmx-cmp-delta.is-neutral{
  background: rgba(180,175,160,.10);
  color: rgba(220,215,200,.55);
}

/* Light mode */
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-th{
  background: rgba(244,181,50,.05);
  border-bottom-color: rgba(200,150,30,.30);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-th-symbol{ color: rgba(160,110,20,.92); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-td{
  background: rgba(244,181,50,.03);
  border-left-color: rgba(200,150,30,.20);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-td .dspmx-cmp-delta.is-win{ color: #2d8d50; }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-td .dspmx-cmp-delta.is-loss{ color: #c33b30; }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-td .dspmx-cmp-delta.is-equal,
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-delta-td .dspmx-cmp-delta.is-neutral{
  color: rgba(40,35,25,.50);
}

/* CCT attiva tag (segue il selettore widget photometrics) */
.dspmx-cmp-cct-active{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-left: 12px;
  background: rgba(244,181,50,.10);
  border: 1px solid rgba(244,181,50,.30);
  border-radius: 999px;
  cursor: help;
}
.dspmx-cmp-cct-label{
  font: 600 .60rem/1 "Oswald", system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(244,181,50,.75);
}
.dspmx-cmp-cct-value{
  font: 700 .72rem/1 "Oswald", system-ui;
  letter-spacing: .03em;
  color: #F4B532;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-cct-active{
  background: rgba(244,181,50,.12);
  border-color: rgba(200,150,30,.40);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-cct-label{ color: rgba(160,110,20,.75); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-cct-value{ color: rgba(160,110,20,1); }

.dspmx-cmp-head-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dspmx-cmp-h{
  margin: 0;
  font: 700 .92rem/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(245,240,225,.96);
}
.dspmx-vs{
  display: inline-block;
  margin: 0 6px;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(244,181,50,.22);
  color: #F4B532;
  font-size: .70rem;
  letter-spacing: .12em;
}
.dspmx-cmp-remove{
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(220,215,200,.85);
  font: 600 .65rem/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background 140ms ease, color 140ms ease;
}
.dspmx-cmp-remove:hover{
  background: rgba(220,40,40,.18);
  border-color: rgba(220,80,80,.55);
  color: #ff7a7a;
}

/* Plausibility warns */
.dspmx-warns{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.dspmx-warn{
  padding: 8px 12px;
  background: rgba(220,165,40,.12);
  border-left: 3px solid rgba(244,181,50,.65);
  border-radius: 4px;
  font: 500 .80rem/1.4 system-ui;
  color: rgba(255,220,160,.92);
}

/* Tabella comparison */
.dspmx-cmp-table{
  width: 100%;
  border-collapse: collapse;
  font: 400 .85rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgba(245,240,225,.92);
}
.dspmx-cmp-table thead th{
  padding: 8px 12px;
  text-align: left;
  font: 700 .68rem/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(244,181,50,.45);
  color: rgba(245,240,225,.95);
  background: rgba(0,0,0,.28);
}
.dspmx-cmp-table tbody th{
  padding: 8px 12px;
  text-align: left;
  font: 600 .75rem/1.3 "Oswald", system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(220,215,200,.82);
  width: 25%;
  vertical-align: top;
}
.dspmx-cmp-table tbody td{
  padding: 8px 12px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.dspmx-disclaimer{
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
  font: 400 .72rem/1.5 system-ui;
  color: rgba(180,175,160,.75);
  font-style: italic;
}

.dspmx-cmp-loading{
  text-align: center;
  padding: 24px;
  color: rgba(180,175,160,.65);
  font: 500 .85rem/1.4 "Oswald", system-ui;
  letter-spacing: .03em;
}

.dspmx-cmp-count{
  font-weight: 400;
  font-size: .72rem;
  color: rgba(180,175,160,.65);
  letter-spacing: .04em;
  text-transform: lowercase;
  margin-left: 6px;
}

/* Multi-column comparison table */
.dspmx-cmp-table-scroll{
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.dspmx-cmp-table-scroll::-webkit-scrollbar{ height: 6px; }
.dspmx-cmp-table-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 3px; }

.dspmx-cmp-th{
  position: relative;
  padding: 10px 12px !important;
  min-width: 160px;
  vertical-align: top;
}
.dspmx-cmp-th-product{
  display: block;
  font: 700 .78rem/1.2 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(245,240,225,.95);
}
.dspmx-cmp-th-range{
  display: block;
  font: 500 .68rem/1.2 "Oswald", system-ui;
  letter-spacing: .04em;
  color: #F4B532;
  margin-top: 2px;
}
.dspmx-cmp-th-custom{
  color: #F4B532;
  margin-left: 4px;
  font-size: .7em;
}
.dspmx-cmp-th-remove{
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(220,215,200,.55);
  font: 600 1.1rem/1 system-ui;
  cursor: pointer;
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.dspmx-cmp-th-remove:hover{
  background: rgba(220,40,40,.20);
  color: #ff5252;
}
.dspmx-cmp-base-tag{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(244,181,50,.28);
  color: #F4B532;
  font: 600 .58rem/1 "Oswald", system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.dspmx-cmp-base-tag-mini{
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(244,181,50,.28);
  color: #F4B532;
  font: 600 .55rem/1.4 "Oswald", system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.dspmx-cmp-row{
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background 120ms ease;
}
.dspmx-cmp-row:hover{
  background: rgba(255,255,255,.04);
}
.dspmx-cmp-row.is-diff{
  background: rgba(244,181,50,.06);
}
.dspmx-cmp-row.is-diff:hover{
  background: rgba(244,181,50,.10);
}
.dspmx-cmp-rowhead{
  width: 22%;
  min-width: 180px;
  padding: 9px 12px !important;
  text-align: left;
  font: 600 .74rem/1.3 "Oswald", system-ui;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(220,215,200,.82);
  vertical-align: top;
}
.dspmx-cmp-rowhead-th{
  width: 22%;
  min-width: 180px;
  color: rgba(220,215,200,.82) !important;
}
.dspmx-cmp-td{
  padding: 9px 12px !important;
  vertical-align: top;
  font: 400 .80rem/1.4 system-ui;
  color: rgba(245,240,225,.92);
}

/* Section header (FULL SPOT / FULL FLOOD / SPECS COMUNI) — bold uppercase
   con linea brand sopra, separatore visivo gerarchico forte */
.dspmx-cmp-section-row{
  background: linear-gradient(180deg, rgba(244,181,50,.15), rgba(244,181,50,.05)) !important;
}
.dspmx-cmp-section-cell{
  padding: 12px 14px !important;
  font: 700 .82rem/1 "Oswald", system-ui, sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #F4B532 !important;
  border-top: 2px solid rgba(244,181,50,.45) !important;
  border-bottom: 1px solid rgba(244,181,50,.25) !important;
}

/* Subsection header (Tungsten 3200K @ 3m, Daylight 5600K @ 3m) — più tenue */
.dspmx-cmp-subsection-row{
  background: rgba(255,255,255,.03) !important;
}
.dspmx-cmp-subsection-cell{
  padding: 7px 14px 7px 22px !important;
  font: 600 .72rem/1 "Oswald", system-ui, sans-serif !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(220,215,200,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* Section header EXTRA RANGE — colore distintivo dal pivot base */
.dspmx-cmp-section-row.is-extra{
  background: linear-gradient(180deg, rgba(120,180,255,.15), rgba(120,180,255,.05)) !important;
}
.dspmx-cmp-section-row.is-extra .dspmx-cmp-section-cell{
  color: #8FC2FF !important;
  border-top-color: rgba(120,180,255,.40) !important;
  border-bottom-color: rgba(120,180,255,.22) !important;
}

/* Tag preset / extra dentro section header tabella unificata */
.dspmx-angle-section-preset{
  display: inline-block;
  margin: 0 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font: 600 .60rem/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(245,240,225,.70);
  vertical-align: middle;
}
.dspmx-angle-section-owner{
  margin-left: 6px;
  font: 700 .78rem/1 "Oswald", system-ui;
  letter-spacing: .03em;
  text-transform: none;
  font-style: normal;
  /* Sessione 19: il color viene impostato inline dal JS con la palette
     riferimento/competitor (giallo brand per riferimento, palette per gli
     altri). Fallback a colore neutro se per qualche motivo non viene
     impostato. */
  color: rgba(220,215,200,.88);
}

/* Section context (CCT + distanza) ridondato in OGNI section header.
   Iter v2: SPLIT in due pill distinte (CCT separata, distanza separata).
   Feedback utente: "forse li dividerei però, non nella stessa pill e
   ingrandirei o evidenzierei un pelino proprio minimo".
   Pill amber leggermente più piene/leggibili (era .14 alpha, ora .22). */
.dspmx-angle-section-context{
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(244,181,50,.22);
  border: 1px solid rgba(244,181,50,.45);
  /* TIER 3 D8 (sessione 20): consolidamento palette amber. Era #FFC841
     orfano (terza tonalità non documentata). Riportato a #F4B532
     (var --ds-brand-yellow-dark) per coerenza con il design system —
     2 sole tonalità ufficiali: F4B532 (accenti strutturali) + FFD100
     (selected/active states). */
  color: #F4B532;
  font: 700 .65rem/1 "Oswald", system-ui;
  letter-spacing: .07em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* Sessione 19 fix h: separatore tipografico tra blocchi del section
   header (es. "[NATIVO] · F7 — Vari-White · @52° FULL FLOOD"). Punto
   mediano (·) discreto, vertical-align centrato col testo. NB: l'ultimo
   "·" prima del context (CCT/dist) non si vede perché context è float:right
   — è una sicurezza per layout futuri o quando float dovesse cadere. */
.dspmx-angle-section-sep{
  display: inline-block;
  margin: 0 6px;
  color: rgba(255,255,255,.30);
  font-weight: 400;
  vertical-align: middle;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-section-sep{
  color: rgba(0,0,0,.25);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-section-context{
  background: rgba(244,181,50,.20);
  border-color: rgba(200,150,30,.50);
  color: rgba(160,110,20,1);
}
/* Pill CCT: leggermente più carica per evidenza (è il param principale) */
.dspmx-angle-section-context.dspmx-context-cct{
  background: rgba(244,181,50,.28);
  border-color: rgba(244,181,50,.55);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-section-context.dspmx-context-cct{
  background: rgba(244,181,50,.26);
}

/* Tag interp dentro cella tabella — visibile, blu accent come extra range */
.dspmx-cmp-table .dspmx-angle-tag{
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(120,180,255,.14);
  border: 1px solid rgba(120,180,255,.30);
  font: 700 .56rem/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8FC2FF;
  cursor: help;
  vertical-align: 1px;
}
.dspmx-cmp-table .dspmx-angle-limit{
  font: 500 .68rem/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: rgba(180,175,160,.45);
  font-style: italic;
}

/* Riga "Illuminance (lux)" key del confronto — slightly highlight */
.dspmx-cmp-row.is-key th,
.dspmx-cmp-row.is-key td{
  background: rgba(244,181,50,.04);
}
.dspmx-cmp-row.is-key th{
  color: rgba(245,240,225,.95) !important;
  font-weight: 700 !important;
}

/* Light mode variants */
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-section-row.is-extra{
  background: linear-gradient(180deg, rgba(120,150,200,.12), rgba(120,150,200,.04)) !important;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-section-row.is-extra .dspmx-cmp-section-cell{
  color: rgba(60,100,160,.95) !important;
  border-top-color: rgba(120,150,200,.40) !important;
  border-bottom-color: rgba(120,150,200,.22) !important;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-section-preset{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
  color: rgba(20,18,12,.70);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-angle-section-owner{
  color: rgba(40,35,25,.55);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-table .dspmx-angle-tag{
  background: rgba(80,130,200,.12);
  border-color: rgba(80,130,200,.30);
  color: rgba(60,100,160,.95);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-row.is-key th,
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-row.is-key td{
  background: rgba(244,181,50,.05);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-cmp-row.is-key th{
  color: rgba(20,18,12,.95) !important;
}

/* Sezioni compare panel: opzioni + group */
.dspmx-cmp-options{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dspmx-cmp-opt{
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(245,240,225,.88);
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 500;
  font-size: .80rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dspmx-cmp-opt:hover:not(:disabled){
  background: rgba(255,255,255,.08);
  border-color: rgba(244,181,50,.45);
  color: rgba(255,255,255,1);
}
.dspmx-cmp-opt.is-active{
  background: rgba(244,181,50,.18);
  border-color: rgba(244,181,50,.65);
  color: #F4B532;
}
.dspmx-cmp-opt:disabled{
  opacity: .42;
  cursor: not-allowed;
}
.dspmx-cmp-opt-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  font: 600 .85rem/1 system-ui;
  flex-shrink: 0;
}
.dspmx-cmp-opt.is-active .dspmx-cmp-opt-check{
  background: #F4B532;
  color: rgba(0,0,0,.88);
}
.dspmx-cmp-opt-label{
  flex: 1;
  min-width: 0;
}

.dspmx-cmp-empty-section{
  padding: 10px 4px;
  font: 400 .76rem/1.5 system-ui;
  color: rgba(180,175,160,.55);
  font-style: italic;
}

/* Group prodotti famiglia */
.dspmx-cmp-group{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}
.dspmx-cmp-group:first-child{ margin-top: 0; }
.dspmx-cmp-group-title{
  font: 700 .75rem/1 "Oswald", system-ui;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(245,240,225,.92);
  padding: 4px 4px 4px;
}
.dspmx-cmp-group-warn{
  font-weight: 400;
  font-size: .65rem;
  color: rgba(220,80,80,.78);
  margin-left: 6px;
  text-transform: lowercase;
  font-style: italic;
}

/* ── sess.48: compare = accordion per modello (scala a molti modelli) ── */
.dspmx-cmp-acc-list{ display: flex; flex-direction: column; gap: 8px; }
.dspmx-cmp-fam-label{
  font: 600 .65rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(180,175,160,.55);
  padding: 10px 4px 2px;
}
.dspmx-cmp-acc{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.dspmx-cmp-acc.is-current{
  border-color: rgba(244,181,50,.30);
  background: rgba(244,181,50,.05);
}
.dspmx-cmp-acc-head{
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: rgba(245,240,225,.92);
  font-family: "Oswald", system-ui, sans-serif;
  text-align: left;
  transition: background 140ms ease;
}
.dspmx-cmp-acc-head:hover:not(:disabled){ background: rgba(255,255,255,.05); }
.dspmx-cmp-acc-head:disabled{ cursor: default; opacity: .5; }
.dspmx-cmp-acc-code{
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.dspmx-cmp-acc-meta{
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(180,175,160,.6);
}
.dspmx-cmp-acc-count{ color: #F4B532; }
.dspmx-cmp-acc-warn{ color: rgba(220,80,80,.78); font-style: italic; text-transform: lowercase; }
.dspmx-cmp-acc-chev{
  width: 12px;
  height: 8px;
  flex-shrink: 0;
  color: rgba(200,195,180,.6);
  transition: transform 180ms ease;
}
.dspmx-cmp-acc.is-open .dspmx-cmp-acc-chev{ transform: rotate(180deg); }
.dspmx-cmp-acc-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 10px;
}
.dspmx-cmp-acc-body[hidden]{ display: none; }
@media (prefers-reduced-motion: reduce){
  .dspmx-cmp-acc-chev{ transition: none; }
}

/* ── Compare panel laterale destra (form crea + saved list) ──────── */
.dspmx-compare-panel{
  flex-shrink: 0;
  width: 360px;
  background: linear-gradient(180deg, rgba(40,36,28,.45), rgba(28,25,20,.65));
  border-left: 1px solid rgba(255,255,255,.08);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.dspmx-compare-panel[hidden]{ display: none; }
.dspmx-compare-panel::-webkit-scrollbar{ width: 6px; }
.dspmx-compare-panel::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 3px; }

.dspmx-cmp-section{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dspmx-cmp-section-title{
  margin: 0 0 12px;
  font: 700 .78rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #F4B532;
}

/* Saved devices list */
.dspmx-empty-saved{
  padding: 14px 4px;
  font: 400 .80rem/1.5 system-ui;
  color: rgba(180,175,160,.55);
  font-style: italic;
  text-align: center;
}
.dspmx-saved-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dspmx-saved-device{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  transition: border-color 140ms ease, background 140ms ease;
}
.dspmx-saved-device.is-active{
  border-color: rgba(244,181,50,.65);
  background: rgba(244,181,50,.08);
}
.dspmx-saved-info{
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.dspmx-saved-name{
  font: 600 .82rem/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .03em;
  color: rgba(245,240,225,.92);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.dspmx-saved-meta{
  font: 400 .70rem/1.2 system-ui;
  color: rgba(180,175,160,.65);
  margin-top: 2px;
}
.dspmx-saved-actions{
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.dspmx-saved-btn{
  appearance: none;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(245,240,225,.85);
  font: 600 .65rem/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background 140ms ease, color 140ms ease;
}
.dspmx-saved-btn:hover{
  background: rgba(244,181,50,.20);
  color: #F4B532;
}
.dspmx-saved-device.is-active .dspmx-saved-btn:not(.dspmx-saved-btn--del){
  background: #F4B532;
  color: rgba(0,0,0,.92);
  border-color: #C9A800;
}
.dspmx-saved-btn--del{
  width: 28px;
  padding: 0;
  font-size: 1rem;
}
.dspmx-saved-btn--del:hover{
  background: rgba(220,40,40,.20);
  color: #ff5252;
  border-color: rgba(220,80,80,.55);
}

/* ── FORM Crea Apparecchio ─────────────────────────────────────────── */
.dspmx-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dspmx-form-section-title{
  margin-top: 8px;
  font: 600 .68rem/1 "Oswald", system-ui;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(180,175,160,.65);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 4px;
}
.dspmx-form-hint{
  font: 400 .72rem/1.4 system-ui;
  color: rgba(180,175,160,.65);
  font-style: italic;
  margin-bottom: 4px;
}

/* Form tip — accordion educativo per leggere datasheet competitor */
.dspmx-form-tip{
  margin: 6px 0 8px;
  border: 1px solid rgba(255,180,40,.22);
  border-radius: 6px;
  background: rgba(255,180,40,.05);
}
.dspmx-form-tip > summary{
  list-style: none;
  cursor: pointer;
  padding: 7px 12px;
  font: 600 .72rem/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  color: rgba(255,200,80,.92);
  user-select: none;
}
.dspmx-form-tip > summary::-webkit-details-marker{ display: none; }
.dspmx-form-tip > summary::before{
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 200ms ease;
}
.dspmx-form-tip[open] > summary::before{ transform: rotate(90deg); }
.dspmx-form-tip-body{
  padding: 4px 14px 12px;
  font: 400 .72rem/1.55 system-ui;
  color: rgba(220,215,200,.78);
}
.dspmx-form-tip-body p{
  margin: 0 0 8px;
}
.dspmx-form-tip-body p:last-child{
  margin-bottom: 0;
}
.dspmx-form-tip-body strong{
  color: rgba(245,240,225,.95);
  font-weight: 700;
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-form-tip{
  background: rgba(255,180,40,.06);
  border-color: rgba(200,140,30,.30);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-form-tip > summary{ color: rgba(160,110,20,.92); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-form-tip-body{ color: rgba(40,35,25,.75); }
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-form-tip-body strong{ color: rgba(20,18,12,.92); }
.dspmx-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dspmx-form-group{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dspmx-form-group label{
  font: 600 .65rem/1.2 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(220,215,200,.78);
}
.dspmx-form-required::after{
  content: ' *';
  color: #F4B532;
}
.dspmx-form-group input,
.dspmx-form-group textarea{
  appearance: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 7px 10px;
  font: 400 .82rem/1.2 system-ui;
  color: rgba(245,240,225,.95);
  transition: border-color 140ms ease, background 140ms ease;
}
.dspmx-form-group input::placeholder,
.dspmx-form-group textarea::placeholder{
  color: rgba(180,175,160,.42);
}
.dspmx-form-group input:focus,
.dspmx-form-group textarea:focus{
  outline: none;
  border-color: rgba(244,181,50,.65);
  background: rgba(255,255,255,.08);
}
.dspmx-form-group textarea{
  resize: vertical;
  font-family: system-ui;
}

/* Disclaimer box prominent */
.dspmx-disclaimer-box{
  padding: 10px 12px;
  background: rgba(244,181,50,.08);
  border: 1px solid rgba(244,181,50,.32);
  border-radius: 6px;
  margin-top: 8px;
}
.dspmx-disclaimer-label{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font: 400 .75rem/1.45 system-ui;
  color: rgba(220,215,200,.92);
}
.dspmx-disclaimer-label input[type="checkbox"]{
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #F4B532;
}

/* ── NUOVI elementi form refactor C: setpoints multipli + unit selector */

/* CCT block: contenitore di un setpoint output (Tungsten o Daylight) */
.dspmx-form-cct-block{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 6px;
}
.dspmx-form-cct-title{
  font: 600 .68rem/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(220,215,200,.78);
}

/* CCT row: 4 colonne (distance value + distance unit + value + value unit) */
.dspmx-form-cct-row{
  display: grid;
  grid-template-columns: 1fr 60px 1fr 60px;
  gap: 6px;
  align-items: end;
}

/* Form group narrow (per number value) e unit (per select unit) */
.dspmx-form-group--narrow input{
  text-align: right;
}
.dspmx-form-group--unit select{
  appearance: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 7px 8px;
  font: 600 .80rem/1 "Oswald", system-ui;
  color: rgba(245,240,225,.95);
  cursor: pointer;
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dspmx-form-group--unit select:focus{
  outline: none;
  border-color: rgba(244,181,50,.65);
  background: rgba(255,255,255,.08);
}

/* WIZARD GRID — checkbox "Cosa vuoi inserire?" + "Quali CCT?"
   Layout grid responsive con tile cliccabili intere (label wraps input). */
.dspmx-wizard-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 6px 0 12px;
}
.dspmx-wizard-check{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
  position: relative;
  padding-left: 36px;
}
.dspmx-wizard-check input[type="checkbox"]{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  accent-color: #F4B532;
  cursor: pointer;
}
.dspmx-wizard-check:hover{
  border-color: rgba(244,181,50,.40);
  background: rgba(244,181,50,.05);
}
.dspmx-wizard-check:has(input:checked){
  border-color: rgba(244,181,50,.65);
  background: rgba(244,181,50,.10);
}
.dspmx-wizard-check-title{
  font: 700 .75rem/1.1 "Oswald", system-ui;
  letter-spacing: .04em;
  color: rgba(245,240,225,.95);
}
.dspmx-wizard-check-sub{
  font: 400 .65rem/1.2 system-ui;
  color: rgba(180,175,160,.55);
  font-style: italic;
}

/* Sezione preset (spot/mid/flood) — appare/scompare col toggle wizard */
.dspmx-wizard-section{
  border-left: 2px solid rgba(244,181,50,.40);
  padding: 8px 0 4px 12px;
  margin-top: 10px;
}

body:not(.ds-dark):not([data-dspmx-open]) .dspmx-wizard-check{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.10);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-wizard-check:hover{
  border-color: rgba(200,150,30,.40);
  background: rgba(200,150,30,.06);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-wizard-check:has(input:checked){
  border-color: rgba(200,150,30,.65);
  background: rgba(244,181,50,.12);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-wizard-check-title{
  color: rgba(20,18,12,.92);
}
body:not(.ds-dark):not([data-dspmx-open]) .dspmx-wizard-check-sub{
  color: rgba(40,35,25,.55);
}

/* Toggle FULL FLOOD section header (label cliccabile con checkbox embedded) */
.dspmx-form-section-toggle{
  cursor: pointer;
  border: 1px solid rgba(244,181,50,.32);
  background: rgba(244,181,50,.06);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 14px;
  font: 600 .75rem/1.3 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(245,240,225,.92);
  border-bottom: 1px solid rgba(244,181,50,.32);
}
.dspmx-form-toggle-label{
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.dspmx-form-toggle-label input[type="checkbox"]{
  flex-shrink: 0;
  accent-color: #F4B532;
}

.dspmx-form-flood-section{
  padding: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dspmx-form-flood-section[hidden]{ display: none; }

.dspmx-form-submit{
  appearance: none;
  cursor: pointer;
  background: #F4B532;
  color: rgba(0,0,0,.92);
  border: 1px solid #C9A800;
  border-radius: 999px;
  padding: 11px 16px;
  font: 600 .78rem/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 8px;
  /* Flat-ten sess.25 */
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
  transition:
    background 180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    box-shadow 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    transform  120ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1));
}
.dspmx-form-submit:hover{
  background: #E8C000;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(201,168,0,.45),
    0 5px 16px rgba(255,209,0,.35);
}
.dspmx-form-submit:active{
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ── Mobile responsive ────────────────────────────────────────────── */
@media (max-width: 900px){
  .dspmx{ padding: 8px; }
  .dspmx-body{ flex-direction: column; }
  .dspmx-compare-panel{
    width: 100%;
    max-height: 50vh;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.08);
  }
}