/* blocca la selezione testo durante l'interazione col grafico */
  #chart{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:none;}
  #chart text{user-select:none;-webkit-user-select:none;}
  body.dragging,body.dragging *{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;cursor:default!important;}
  :root{
    /* —— palette: FZ INOX dark "Flux" theme —— variable NAMES kept, VALUES remapped to dark —— */
    --base:#0A0C0D;          /* page background */
    --bone:#EDE8DD;          /* primary text */
    --dim:#9DA7A6;           /* secondary text */
    --teal:#16C9B0;          /* primary accent (was deep blue) */
    --amber:#E0934E;         /* signal accent / duty point */
    --line:rgba(237,232,221,.14);  /* hairline borders */

    --ink:#EDE8DD;            /* primary text (mapped to --bone) */
    --paper:#0A0C0D;          /* page background (mapped to --base) */
    --panel:rgba(255,255,255,.04);   /* dark glass panel */
    --field:rgba(255,255,255,.04);   /* writable fields */
    --btn:rgba(255,255,255,.06);     /* clickable buttons (resting) */
    --btn-hover:rgba(255,255,255,.10);
    --grid:rgba(237,232,221,.10);
    --grid-strong:rgba(237,232,221,.16);
    --steel:#9DA7A6;          /* secondary text (mapped to --dim) */
    --steel-soft:#6f7a79;
    --primary:#16C9B0;        /* primary accent (mapped to --teal) */
    --accent:#E0934E;         /* signal accent — duty point (mapped to --amber) */
    --good:#16C9B0;
    /* type */
    --sans:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
    --serif:"Instrument Serif",Georgia,serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  /* scrollbar-gutter: lo spazio della barra verticale resta sempre riservato.
     Senza, passando a 60 Hz la pagina si allungava, compariva la barra e tutto
     si stringeva di 15px: uno scatto visibile a ogni cambio di frequenza. */
  html{scrollbar-gutter:stable}
  html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
  body{font-size:15px;line-height:1.5}

  /* —— top bar —— */
  header{
    background:linear-gradient(180deg,#0d1011,#08090a);
    color:var(--bone);border-bottom:1px solid var(--line);
    padding:14px clamp(16px,4vw,40px);display:flex;align-items:center;gap:18px;flex-wrap:wrap
  }
  .brand{display:flex;align-items:center;gap:12px}
  .brand .mark{font-weight:800;letter-spacing:.14em;font-size:20px}
  .brand .mark b{color:var(--teal)}
  .brand .sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  header .meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.04em}

  /* —— tabs —— */
    nav{display:flex;gap:8px;background:#08090a;padding:12px clamp(16px,4vw,40px);overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  /* flex:0 0 auto e' indispensabile: senza, su telefono le linguette si stringono e,
   avendo overflow:hidden per il riflesso, il testo viene tagliato ("01 Fa", "02 P")
   invece di far scorrere la barra. */
nav button{position:relative;appearance:none;cursor:pointer;border:1px solid var(--line);background:var(--btn);color:var(--dim);border-radius:11px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;padding:10px 16px;white-space:nowrap;display:flex;gap:9px;align-items:center;overflow:hidden;isolation:isolate;flex:0 0 auto;transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .25s ease,transform .12s ease}
  nav button .n{font-family:var(--mono);font-size:10.5px;line-height:1;color:var(--steel-soft);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;padding:3px 5px;transition:color .18s ease,background .18s ease,border-color .18s ease}
  nav button::after{content:"";position:absolute;top:0;left:-75%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(237,232,221,.10) 50%,transparent);transform:skewX(-18deg);z-index:-1;pointer-events:none;animation:tabGlint 7s ease-in-out infinite}
  nav button:nth-of-type(2)::after{animation-delay:.6s}
  nav button:nth-of-type(3)::after{animation-delay:1.2s}
  nav button:nth-of-type(4)::after{animation-delay:1.8s}
  nav button:nth-of-type(5)::after{animation-delay:2.4s}
  nav button:hover{background:var(--btn-hover);color:var(--bone);border-color:rgba(237,232,221,.26);transform:translateY(-2px)}
  nav button:hover .n{color:var(--bone);border-color:rgba(237,232,221,.26)}
  nav button:active{transform:translateY(0)}
  nav button:focus-visible{outline:none;color:var(--bone);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--teal)}
  nav button[aria-selected="true"]{color:var(--bone);background:rgba(22,201,176,.16);border-color:rgba(22,201,176,.55);box-shadow:inset 0 0 0 1px rgba(22,201,176,.4),0 0 16px rgba(22,201,176,.3)}
  nav button[aria-selected="true"] .n{color:#06201c;background:var(--amber);border-color:transparent}
  nav button[aria-selected="true"]::after{background:linear-gradient(105deg,transparent,rgba(237,232,221,.16) 45%,rgba(22,201,176,.30) 50%,rgba(237,232,221,.16) 55%,transparent);animation:tabGlint 4.6s ease-in-out infinite;animation-delay:0s}
  @keyframes tabGlint{0%{left:-75%}55%{left:130%}100%{left:130%}}
  @media (prefers-reduced-motion: reduce){nav button{transition:color .15s ease,background .15s ease}nav button:hover,nav button:active{transform:none}nav button::after,nav button[aria-selected="true"]::after{animation:none;display:none}}

  main{padding:clamp(16px,3vw,32px);max-width:1280px;margin:0 auto}
  .view-head{margin:0 0 18px}
  .view-head .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
  .view-head h1{font-family:var(--serif);font-size:clamp(28px,3.6vw,40px);margin:4px 0 8px;letter-spacing:0;font-weight:400;color:var(--bone);line-height:1.1}
  .view-head p{margin:0;color:var(--dim);font-size:14px}

  /* minmax(0,1fr) e non 1fr: una colonna di griglia non scende sotto il proprio
     contenuto, e la tabella dei dati a 60 Hz ha 17 colonne invece di 7. Senza
     questo, passando da 50 a 60 Hz la pagina si allargava e compariva la barra
     di scorrimento orizzontale. Lo switch di frequenza non deve muovere il layout. */
  .layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;align-items:start}
  @media(max-width:820px){.layout{grid-template-columns:1fr}}
  .layout>*{min-width:0}

  /* —— control panel —— */
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
  .panel h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 12px;font-weight:700}
  .panel + .panel{margin-top:16px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12px;font-weight:600;color:var(--dim);margin-bottom:5px}
  select,input[type=number]{
    width:100%;font-family:var(--mono);font-size:14px;padding:9px 10px;border:1px solid var(--line);
    border-radius:9px;background:rgba(255,255,255,.04);color:var(--bone);box-shadow:none
  }
  select option{background:#0d1011;color:var(--bone)}
  select:focus,input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px rgba(22,201,176,.25)}
  .seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .seg button{flex:1;appearance:none;border:0;background:rgba(255,255,255,.04);padding:9px 8px;cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--bone);font-weight:700;transition:background .12s}
  .seg button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.10)}
  .seg button[aria-pressed="true"]{background:var(--teal);color:#06201c}
  .seg button + button{border-left:1px solid var(--line)}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

  .readout{font-family:var(--mono);font-size:13px;color:var(--bone);background:rgba(255,255,255,.04);border:1px dashed var(--grid-strong);border-radius:10px;padding:12px;margin-top:4px}
  .readout .k{color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
  .readout .v{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--bone)}
  .readout .v small{font-size:12px;color:var(--dim);font-weight:600}
  /* nota sotto la lettura: spiega che le voci della legenda si spengono con un clic */
  .panel .hint{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--steel)}

  /* —— frequency potentiometer —— */
  .knobwrap{display:flex;justify-content:center;margin:2px 0 12px}
  .knob{width:172px;height:172px;cursor:default;touch-action:auto;user-select:none;-webkit-user-select:none}
  .knob .ktrack{fill:none;stroke:rgba(237,232,221,.16);stroke-width:11;stroke-linecap:round}
  .knob .kval{fill:none;stroke:var(--amber);stroke-width:11;stroke-linecap:round}
  .knob .k50{stroke:var(--teal);stroke-width:3;stroke-linecap:round}
  .knob .kptr{stroke:var(--bone);stroke-width:4;stroke-linecap:round}
  .knob .khz{font-family:var(--mono);font-weight:800;font-size:34px;fill:var(--bone);text-anchor:middle}
  .knob .ku{font-family:var(--mono);font-size:12px;fill:var(--dim);text-anchor:middle;letter-spacing:.1em}
  .slider input{width:100%;accent-color:var(--amber);cursor:pointer;margin:2px 0}
  .slider .ends{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;font-family:var(--mono);margin-top:1px}
  .slider .ends b{color:var(--teal)}
  .chart .ref{fill:none;stroke:var(--dim);stroke-width:2;stroke-dasharray:6 5;opacity:.55}
  .chart .live{fill:none;stroke:var(--amber);stroke-width:3.6;stroke-linejoin:round;stroke-linecap:round}


  /* —— duty point dials —— */
  .dutydials{display:flex;flex-direction:column;gap:14px;margin:2px 0 12px}
  .dutydials .dd{display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:12px 12px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
  .dutydials .knob{width:124px;height:124px;cursor:default;flex:none}
  .dutydials .ddrow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
  .dutydials .ddrow label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--dim);margin:0;white-space:nowrap}
  .dutydials .ddrow input[type=number]{width:88px;text-align:right;font-family:var(--mono);
    font-size:14px;padding:7px 9px;margin:0}
  .dutydials .slider{width:100%}
  .dutydials .slider input[type=range]{width:100%;margin:0}
  .dutydials .slider .ends{display:flex;justify-content:space-between;color:var(--dim);
    font-size:10px;font-family:var(--mono);margin-top:2px}
  input[type=number]{-moz-appearance:textfield}
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .knob .kqv{font-family:var(--mono);font-weight:800;font-size:30px;fill:var(--bone);text-anchor:middle}
  .knob .kqu{font-family:var(--mono);font-size:11px;fill:var(--dim);text-anchor:middle;letter-spacing:.08em}
  @media(max-width:520px){.dutydials{grid-template-columns:1fr}}


  /* —— result cards: swatch | name+detail | curve button, tag underneath —— */
  .matches .match{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:10px;row-gap:5px;align-items:center;padding:11px 12px}
  .matches .match .sw{grid-column:1;grid-row:1 / span 2;align-self:center}
  .matches .match > div{grid-column:2;grid-row:1;min-width:0}
  .matches .match .name{font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .matches .match .det{font-size:10.5px;line-height:1.35;color:var(--dim);white-space:normal}
  .matches .match .tag{grid-column:2;grid-row:2;justify-self:start;white-space:nowrap}
  .matches .match .csbtn{grid-column:3;grid-row:1 / span 2;align-self:center;white-space:nowrap;flex:none}
  @media(max-width:900px){
    .matches .match{grid-template-columns:auto minmax(0,1fr)}
    .matches .match .csbtn{grid-column:2;grid-row:3;justify-self:start}
  }

  /* —— chart stage —— */
  .stage{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px 14px 6px;position:relative}
  svg.chart{display:block;width:100%;height:auto;touch-action:none}
  .chart .axis{stroke:rgba(237,232,221,.30);stroke-width:1.6}
  .chart .grid{stroke:rgba(237,232,221,.10);stroke-width:1}
  .chart .tick{font-family:var(--mono);font-size:11px;fill:var(--dim)}
  .chart .axlabel{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--bone);letter-spacing:.02em}
  .chart .axsub{font-family:var(--mono);font-size:10px;fill:var(--dim)}
  .chart .curve{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
  .chart .curve.dim{opacity:.22}
  .chart .curve.hi{stroke-width:3.4}
  .chart .clabel{font-family:var(--mono);font-size:11px;font-weight:700}
  .chart .dot{fill:var(--base);stroke-width:1.6}
  .chart .crosshair{stroke:var(--amber);stroke-width:1;stroke-dasharray:3 3}
  .chart .duty{fill:var(--amber)}
  .chart .dutyring{fill:none;stroke:var(--amber);stroke-width:1.6}
  .chart .zone{stroke-width:1.4;fill-opacity:.10}
  .tip{
    position:absolute;pointer-events:none;background:#0d1011;color:var(--bone);font-family:var(--mono);border:1px solid var(--line);
    font-size:12px;padding:7px 9px;border-radius:8px;opacity:0;transform:translate(-50%,-130%);transition:opacity .08s;white-space:nowrap;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.45)
  }
  .tip b{color:var(--amber)}

  /* —— legend / matches —— */
  /* TELEFONO — il grafico e' disegnato in un riquadro da 920 unita' e scalato a ~310px:
     tutto quello che c'e' dentro si rimpicciolisce di tre volte, e i numeri degli assi
     finivano sotto i 4px reali. Qui le scritte interne vengono ingrandite in proporzione,
     cosi' tornano leggibili alla dimensione a cui il grafico viene davvero mostrato. */
  @media(max-width:620px){
    /* Il grafico STA nello schermo: niente scorrimento laterale (richiesta esplicita).
       Il disegno si stringe fino alla larghezza vera, quindi le scritte dentro il
       riquadro da 920 unita' vengono ingrandite in proporzione alla scala reale
       (~0,35): a schermo tornano sopra i 10px. */
    .stage{overflow-x:visible;padding:10px 8px 4px}
    svg.chart{width:100%;max-width:100%}
    .chart .tick{font-size:30px}
    .chart .axlabel{font-size:33px}
    .chart .axsub{font-size:27px}
    .chart .clabel{font-size:28px}
    .chart .axis{stroke-width:3.4}
    .chart .curve{stroke-width:4.6}
    .chart .curve.hi{stroke-width:6.6}
  }
  .legend{display:flex;flex-wrap:wrap;gap:4px 14px;padding:10px 4px 14px;font-family:var(--mono);font-size:12px}
  .legend .item{display:flex;align-items:center;gap:7px;cursor:pointer;padding:2px 4px;border-radius:5px}
  .legend .item:hover{background:rgba(255,255,255,.06)}
  .legend .item.off{opacity:.4}
  .legend .sw{width:18px;height:3px;border-radius:2px;flex:none}
  .matches{margin-top:4px}
  .match{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;cursor:pointer;background:rgba(255,255,255,.04)}
  .match:hover{border-color:var(--teal)}
  .match .sw{width:12px;height:12px;border-radius:3px;flex:none}
  .match .name{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--bone)}
  .match .det{font-size:11px;color:var(--dim)}
  .match .tag{margin-left:auto;font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:20px;font-weight:700}
  .tag.best{background:rgba(22,201,176,.16);color:var(--good)}
  .tag.ok{background:rgba(22,201,176,.10);color:var(--teal)}
  .tag.tight{background:rgba(224,147,78,.16);color:var(--amber)}
  .empty{color:var(--dim);font-size:13px;padding:14px;text-align:center}

  /* —— data table —— */
  /* La tabella dei dati ha 7 colonne a 50 Hz e 17 a 60 Hz. Con la larghezza
     automatica le colonne in piu' allargavano la pagina; con `fixed` si dividono
     lo spazio che c'e' e la pagina non si muove. L'`overflow-x` resta come rete
     di sicurezza per le finestre molto strette. */
  /* Lo scorrimento orizzontale sta sulla TABELLA, non su tutto il riquadro:
     `overflow` su #below ritagliava l'alone del pulsante arancione, che
     compariva chiuso dentro un rettangolo netto. */
  #below{min-width:0}
  #below .tablewrap{max-width:100%;overflow-x:auto}
  table{border-collapse:collapse;table-layout:fixed;width:100%;font-family:var(--mono);font-size:12.5px;margin-top:14px;color:var(--bone)}
  th,td{border:1px solid var(--line);padding:6px 4px;text-align:center;overflow:hidden;text-overflow:ellipsis}
  td.lbl,th.lbl{width:150px}
  /* SCHERMI STRETTI — la tabella si RI-TRASPONE: due colonne che scendono,
     Portata Q a sinistra e Prevalenza H a destra, una riga per punto.
     Nessuno scorrimento laterale: i 17 punti a 60 Hz si leggono in verticale,
     senza togliere un solo dato. Le due colonne restano allineate perche' ogni
     cella ha altezza fissa: il JavaScript che costruisce la tabella non si tocca. */
  @media(max-width:820px){
    #below .tablewrap{overflow:visible;max-width:none}
    #below table{display:flex;table-layout:auto;width:100%;max-width:520px;
      border:1px solid var(--line);font-size:13px}
    #below table tbody{display:flex;width:100%}
    #below table tr{display:flex;flex-direction:column;flex:1 1 0;min-width:0}
    #below table tr + tr{border-left:1px solid var(--line)}
    #below table th,#below table td{display:flex;align-items:center;justify-content:center;
      height:38px;padding:0 8px;border:0;border-top:1px solid var(--line);
      font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:0;
      white-space:nowrap;overflow:visible}
    #below table th{background:transparent;color:var(--bone);font-weight:600}
    #below table .lbl{height:46px;width:auto;border-top:0;justify-content:flex-start;
      background:#0f1213;color:var(--dim);font-size:11px;font-weight:700;
      letter-spacing:.03em;box-shadow:inset 0 -1px 0 var(--line)}
    #below .usel{margin-left:12px}
  }
  /* telefono: le linguette VANNO A CAPO invece di scorrere con la barra nascosta
     (a 375px la barra era invisibile e l'ultima vista era irraggiungibile) */
  @media(max-width:900px){
    nav{flex-wrap:wrap;overflow-x:visible;row-gap:8px;gap:6px;padding:10px 14px}
    /* 12.5px e non 11.5: e' la misura che vince davvero (assets/fzsel.css, #tabs button,
       stesso limite di 900px e piu' specifico) ed e' anche l'unica sopra i 12px di
       leggibilita'. Qui era rimasto scritto 11.5px: la griglia a due colonne risultava
       dimensionata su un corpo che non e' mai andato a schermo, e l'etichetta piu' lunga
       ("03 Cambio di frequenza") non ci stava. Spaziatura e stacco ridotti al minimo:
       recuperano ~6px sull'etichetta piu' lunga, il margine di sicurezza che serve a 375px
       finche' il carattere di riserva e' ancora in uso al posto di Inter. */
    nav button{flex:1 1 calc(50% - 4px);justify-content:center;min-height:44px;
               font-size:12.5px;padding:9px 12px;gap:6px;letter-spacing:0}
    nav button .n{font-size:10px;padding:2px 4px}
  }
  /* Telefoni stretti (320 e 360px): a due colonne "03 Cambio di frequenza" sforava il
     proprio bordo di ritaglio di 9px per parte a 320px e restava a 1px a 360px. Sotto i
     360px ogni linguetta prende tutta la riga, come gia' faceva la 05. */
  @media(max-width:360px){
    nav button{flex:1 1 100%}
  }
  /* i campi che SONO lo strumento (portata e prevalenza del punto di lavoro) erano a 14px */
  @media(max-width:900px){
    .panel select,.panel input[type=number],
    .dutydials .ddrow input[type=number]{font-size:16px}
    .dutydials .ddrow input[type=number]{width:104px;padding:9px 10px}
    .dutydials .ddrow label{font-size:11.5px}
  }
  /* il grafico intercettava ogni tocco (touch-action:none): il dito che partiva
     da li' non riusciva a scorrere la pagina */
  @media(pointer:coarse){ svg.chart{touch-action:pan-y} }
  th{background:rgba(255,255,255,.05);color:var(--dim);font-weight:700;font-size:11px;letter-spacing:.03em}
  td.lbl,th.lbl{text-align:left;color:var(--dim)}
  .usel{font-family:var(--mono);font-size:11px;background:rgba(255,255,255,.06);color:var(--bone);border:1px solid var(--line);border-radius:6px;padding:2px 6px;margin-left:6px;cursor:pointer}
  .usel:focus{outline:none;border-color:var(--primary)}
  .usage{margin-top:14px;font-size:12.5px;color:var(--dim);line-height:1.55;max-width:82ch}
  .usage b{color:var(--bone)}
  .dnote{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--steel);border-left:3px solid var(--primary);background:rgba(255,255,255,.03);padding:6px 11px;border-radius:0 8px 8px 0}
    .axsub.pick{cursor:pointer}
  .chart .unitbtn{cursor:pointer}
  .chart .ubtxt{font-family:var(--mono);font-size:30px;font-weight:700;fill:var(--bone)}  /* x2 su richiesta: sono i due comandi per cambiare unita', prima passavano inosservati */
  .chart .unitbtn:hover .ubtxt{fill:#eafffb}
  .chart .ubrect{fill:#16C9B0;fill-opacity:.15;stroke:#16C9B0;stroke-opacity:.6;stroke-width:1.3;filter:drop-shadow(0 0 4px rgba(22,201,176,.45));animation:ubGlow 2.2s ease-in-out infinite}
  .chart .unitbtn:hover .ubrect{fill-opacity:.3;stroke-opacity:1}
  @keyframes ubGlow{0%,100%{fill-opacity:.12;stroke-opacity:.5}50%{fill-opacity:.26;stroke-opacity:1}}
  @media (prefers-reduced-motion:reduce){.chart .ubrect{animation:none}}
  .umenu{position:fixed;z-index:9999;background:#0d1416;border:1px solid var(--line);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 14px 34px rgba(0,0,0,.6);min-width:96px}
  .umenu .uh{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);padding:2px 10px 4px}
  .umenu button{appearance:none;border:0;background:transparent;color:var(--bone);font-family:var(--mono);font-size:12.5px;text-align:left;padding:7px 14px;border-radius:6px;cursor:pointer}
  .umenu button:hover{background:rgba(255,255,255,.08)}
  .umenu button.on{color:var(--primary);background:rgba(22,201,176,.14)}

  footer{max-width:1280px;margin:8px auto 40px;padding:0 clamp(16px,3vw,32px);color:var(--dim);font-size:12px}
  footer .note{background:rgba(255,255,255,.04);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:12px 14px}
  footer .note b{color:var(--bone)}
  footer code{font-family:var(--mono);background:rgba(255,255,255,.06);color:var(--bone);padding:1px 5px;border-radius:4px}
  .hidden{display:none!important}
  a{color:var(--teal)}

  /* I due selettori di unita' DENTRO la tabella dei dati (Flow Q / Head H): nascevano
     alti 46px col font a 16, cioe' piu' vistosi dei comandi del grafico (~11px) mentre
     sono un dettaglio. Portati alla loro misura. ⚠️ Mirare solo a .lbl: il selettore della
     classe di potenza usa lo stesso widget e deve restare grande. */
  .lbl .fzsel{width:auto;min-width:74px;margin-left:12px}   /* mai attaccato alla scritta che lo precede */
  .lbl .fzsel-btn{font-size:11px;padding:5px 9px;min-height:0;gap:6px}
  .lbl .fzsel-val{font-size:11px}
  .lbl .fzsel-arrow{width:8px;height:8px}
  .lbl .fzsel-menu{font-size:12px}