/* ============================================================
   IMPOSTAZIONI — la pagina nuova

   Stessa grammatica del Profilo (`.pf-*` in modules.css): la testata di
   sezione a sinistra, i campi a destra, la barra di salvataggio in fondo.
   Qui le classi hanno il loro prefisso `set-` perche' sono un'altra
   pagina e non devono ereditare per sbaglio le misure dell'altra.

   Nessuna tinta scritta a mano: tutto passa dai token, quindi la pagina
   segue il tema scuro senza un secondo foglio.
   ============================================================ */

.set-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:22px;align-items:start;}

/* ---- il menu delle schede: gruppi, icona, link veri ---- */
.set-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:8px;}
.set-nav .grp{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:14px 12px 5px;}
.set-nav .grp:first-child{padding-top:0;}
.set-nav a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--neutral-ink);text-decoration:none;}
.set-nav a svg{width:15px;height:15px;flex-shrink:0;color:var(--dim);}
.set-nav a:hover{background:var(--hover);color:var(--text);}
.set-nav a.active{background:var(--primary-soft);color:var(--primary-dark);}
.set-nav a.active svg{color:var(--primary-dark);}

.set-wrap{display:flex;flex-direction:column;gap:16px;min-width:0;}
.set-head h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px;}
.set-head p{margin:4px 0 0;color:var(--muted);font-size:12.5px;max-width:70ch;line-height:1.55;}

.set-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}

/* ---- sezione a due colonne ---- */
.set-sec{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:22px 20px;border-top:1px solid var(--border);}
.set-card>.set-sec:first-child{border-top:none;}
.set-sec-l h3{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px;}
.set-sec-l h3 .ic{border-radius:8px;background:var(--primary-soft);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:5px;}
.set-sec-l h3 svg{width:15px;height:15px;color:inherit;}
.set-sec-l p{margin:7px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55;}
.set-sec-l .set-link{margin-top:9px;}
.set-sec-r{min-width:0;}
.set-sec-r.narrow{max-width:620px;}

/* Una riga con un'azione e la sua spiegazione accanto: il collegamento a
   Google, dove il pulsante non e' un campo e non sta in una griglia. */
.set-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;}

/* ---- campi: stessa resa del profilo, sotto un altro tetto ---- */
.set-wrap .grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 14px;}
.set-wrap .fg{min-width:0;}
.set-wrap .fg.full{grid-column:1/-1;}
.set-wrap .lbl{display:block;font-size:12px;font-weight:600;color:var(--neutral-ink);margin:0 0 5px;}
.set-wrap .hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45;}
.set-mail-test-action{padding-top:20px;}
/* L'anteprima delle mail (`settings/mail-anteprime.js`): la mail ha il suo
   fondo, il riquadro solo il bordo. */
.set-mla-subj{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:14px 0 10px;}
.set-mla-subj .lbl{margin:0;}
.set-mla-subj b{font-size:13.5px;font-weight:600;color:var(--text);overflow-wrap:anywhere;}
.set-mla-frame{display:block;width:100%;height:560px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);}
.set-mla-err{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--muted);font-size:13px;}
.set-suffix{position:relative;}
.set-suffix .field{padding-right:40px;}
.set-suffix i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--muted);font-weight:600;pointer-events:none;}
.set-link{border:none;background:none;color:var(--primary-dark);font-weight:600;cursor:pointer;padding:0;font-size:12.5px;display:inline-flex;align-items:center;gap:4px;font-family:inherit;}
.set-link svg{width:13px;height:13px;}
.set-link:hover{text-decoration:underline;}

.set-wrap .segfull{display:inline-grid;grid-auto-flow:column;gap:2px;background:var(--track);border-radius:10px;padding:3px;max-width:100%;}
.set-wrap .segfull button{border:none;background:transparent;padding:6px 12px;border-radius:8px;font-weight:600;font-size:12.5px;color:var(--neutral-ink);cursor:pointer;white-space:nowrap;font-family:inherit;}
.set-wrap .segfull button.active{background:var(--card);color:var(--text);box-shadow:var(--shadow);}
.set-wrap .segfull button:disabled{opacity:.45;cursor:not-allowed;}

.set-switch{appearance:none;width:34px;height:20px;border-radius:12px;background:var(--dim);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;margin:0;}
.set-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--card);transition:transform .15s;box-shadow:var(--shadow);}
.set-switch:checked{background:var(--primary);}
.set-switch:checked::after{transform:translateX(14px);}
.set-switch:disabled{opacity:.45;cursor:not-allowed;}

/* ---- righe con interruttore ---- */
.set-tog{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-top:1px solid var(--border);}
.set-tog:first-child{border-top:none;padding-top:0;}
.set-tog .tx{flex:1;min-width:0;}
/* **La misura si scrive, non si eredita.** `body` non dichiara un
   `font-size`, quindi un elemento i cui antenati non ne dichiarano
   nessuno cade sui 16px di default del browser — piu' grandi del titolo
   di sezione qui accanto (14px) e di qualunque altra cosa in questa
   pagina. Il titolo di un interruttore stava li': grosso il doppio del
   suo sottotitolo, e piu' importante a vedersi della sezione che lo
   contiene. */
.set-tog .tx b{font-weight:600;font-size:13.5px;display:block;line-height:1.35;}
.set-tog .tx small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.45;}
.set-tog .set-switch{margin-top:2px;}
.set-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}

/* La riga che compare solo quando l'interruttore di sopra e' acceso. */
.set-sub{margin:10px 0 2px;padding:10px 12px;border-radius:10px;background:var(--field);border:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;}
.set-sub svg{width:15px;height:15px;color:var(--primary-dark);flex-shrink:0;}

/* ---- regole scritte come frasi ---- */
.set-rule{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border);line-height:1.9;font-size:13px;}
.set-rule:first-child{border-top:none;padding-top:0;}
.set-rule .ric{width:30px;height:30px;border-radius:9px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.set-rule .ric svg{width:15px;height:15px;}
.set-mini{width:64px;text-align:center;padding:5px 6px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-weight:600;font-family:inherit;color:inherit;font-size:13px;font-variant-numeric:tabular-nums;}
.set-mini:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
/* La postilla che spiega un valore, non un pezzo della frase: staccata e
   in tono quieto, se no «0 giorni — nessun blocco» si legge come una
   regola che si contraddice a meta' riga. */
.set-rule-off{margin-left:6px;padding:2px 8px;border-radius:7px;background:var(--field);border:1px solid var(--border);color:var(--muted);font-size:11.5px;font-weight:600;line-height:1.6;}

/* ---- riquadri di sintesi ---- */
.set-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.set-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;}
.set-kpi .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.set-kpi .top span{font-size:11.5px;color:var(--muted);font-weight:500;}
.set-kpi .ic{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.set-kpi .ic svg{width:15px;height:15px;}
.set-kpi b{display:block;font-size:21px;font-weight:700;letter-spacing:-.4px;margin-top:8px;font-variant-numeric:tabular-nums;}
.set-kpi small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.4;}
.set-kpi .ic.ok{background:var(--primary-soft);color:var(--primary-dark);}
.set-kpi .ic.neutral{background:var(--track);color:var(--neutral-ink);}
.set-kpi .ic.warn{background:var(--amber-soft);color:var(--amber-dark);}
.set-kpi .ic.bad{background:var(--red-soft);color:var(--red-dark);}

/* ---- la gerarchia di una tariffa, dal caso specifico al generale ---- */
.set-chain{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;}
.set-chain .step{flex:1;min-width:150px;border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--card);}
.set-chain .step.win{border-color:var(--primary);background:var(--primary-soft);}
.set-chain .step span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);}
.set-chain .step.win span{color:var(--primary-dark);}
.set-chain .step b{display:block;font-size:13.5px;font-weight:700;margin-top:4px;}
.set-chain .step small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;}
.set-chain .arr{display:flex;align-items:center;color:var(--dim);}
.set-chain .arr svg{width:15px;height:15px;}

/* ---- tariffa meno costo: il margine, scritto come si farebbe a mano ---- */
.set-calc{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px;border-radius:12px;background:var(--field);border:1px solid var(--border);margin-top:14px;}
.set-calc .cell span{display:block;font-size:11px;color:var(--muted);}
.set-calc .cell b{font-size:16px;font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums;}
.set-calc .op{color:var(--dim);font-size:15px;font-weight:700;}
.set-calc .cell.res b{color:var(--primary-dark);}
.set-calc .grow{flex:1;min-width:120px;}
.set-bar{height:6px;border-radius:4px;background:var(--track);overflow:hidden;width:100%;}
.set-bar i{display:block;height:100%;background:var(--primary);}
.set-bar.neg i{background:var(--red);}

/* ---- tabelle ed elenchi della pagina ---- */
.set-tblwrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;overflow-x:auto;}
.set-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
.set-tbl thead th{background:var(--field);border-bottom:1px solid var(--border);}
.set-tbl th.r,.set-tbl td.r{text-align:right;}
.set-tbl tbody tr:hover{background:var(--hover);}
.set-name{display:flex;align-items:center;gap:10px;min-width:0;}
.set-name b{font-weight:600;}
.set-tile{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--track);color:var(--neutral-ink);}
.set-tile svg{width:15px;height:15px;}
.set-cost{width:86px;text-align:right;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-weight:600;font-family:inherit;color:inherit;font-size:13px;font-variant-numeric:tabular-nums;}
.set-cost:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.set-use{font-size:12px;color:var(--neutral-ink);white-space:nowrap;}
.set-tag-on{background:var(--primary-soft);color:var(--primary-dark);}
.set-tag-on svg{width:12px;height:12px;}
.set-use.none{color:var(--dim);}
.set-acts{display:flex;gap:6px;justify-content:flex-end;}
.set-acts .icon-btn:hover{background:var(--hover);color:var(--text);}
.set-acts .icon-btn.danger:hover{background:var(--red-soft);color:var(--red-dark);}
.set-acts .icon-btn:disabled{opacity:.35;}

.set-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.set-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);}
.set-item:last-child{border-bottom:none;}
.set-item:hover{background:var(--hover);}
.set-item .ord{display:flex;flex-direction:column;gap:1px;}
.set-item .ord button{width:18px;height:14px;border:none;background:none;color:var(--dim);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
.set-item .ord button:hover:not(:disabled){color:var(--text);}
.set-item .ord button:disabled{opacity:.3;cursor:not-allowed;}
.set-item .ord svg{width:12px;height:12px;}
.set-nm{flex:1;min-width:0;font-weight:500;border:1px solid transparent;background:transparent;border-radius:7px;padding:4px 6px;font-family:inherit;color:inherit;font-size:13px;}
.set-nm:hover{border-color:var(--border);}
.set-nm:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--card);}
.set-nm[readonly]{color:var(--neutral-ink);}
.set-additem{display:flex;gap:8px;padding:10px 12px;background:var(--field);flex-wrap:wrap;align-items:center;}
.set-additem .field{flex:1;min-width:150px;width:auto;background:var(--card);}
.set-additem .set-pick{flex:0 0 150px;}
.set-additem .set-suffix{flex:0 0 118px;}

/* ---- eliminare qualcosa che e' in uso: prima si dice dove va il lavoro ---- */
.set-confirm{padding:11px 13px;border-radius:11px;background:var(--amber-soft);color:var(--amber-dark);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;margin-top:10px;}
.set-confirm svg{width:15px;height:15px;flex-shrink:0;}
.set-confirm .grow{flex:1;}
.set-confirm .set-pick{min-width:190px;}

.set-note{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:11px;background:var(--field);border:1px solid var(--border);font-size:12.5px;line-height:1.5;}
.set-note svg{width:15px;height:15px;color:var(--primary-dark);flex-shrink:0;margin-top:1px;}
.set-note.warn{background:var(--amber-soft);border-color:transparent;color:var(--amber-dark);}
.set-note.warn svg{color:var(--amber-dark);}
/* **Un avviso non sta mai appiccicato a quello che lo precede.** Lo
   stacco stava su un'opzione (`top`) che chi scrive la riga si dimentica,
   e bastava dimenticarla per avere una cornice incollata alla cornice di
   sopra: si vedeva sotto l'elenco delle cartelle di Drive. Adesso lo
   stacco e' la regola e `top` resta per chi ne vuole uno piu' largo. */
* + .set-note{margin-top:10px;}
.set-note.top{margin-top:12px;}

/* ---- anteprime dell'aspetto ---- */
.set-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,195px));gap:12px;justify-content:start;}
.set-theme{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--card);cursor:pointer;text-align:left;font-family:inherit;color:inherit;}
.set-theme:hover{background:var(--hover);}
.set-theme.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.set-prev{border-radius:9px;overflow:hidden;border:1px solid var(--border);display:flex;height:74px;}
.set-prev .side{width:28%;padding:6px;display:flex;flex-direction:column;gap:4px;}
.set-prev .main{flex:1;padding:7px;display:flex;flex-direction:column;gap:5px;}
.set-prev .ln{height:5px;border-radius:3px;}
.set-prev .blk{height:20px;border-radius:5px;}
.set-theme .cap{display:flex;align-items:center;gap:7px;margin-top:9px;font-weight:600;font-size:13px;}
.set-theme .cap svg{width:14px;height:14px;color:var(--muted);}
.set-theme.on .cap svg{color:var(--primary-dark);}

/* Le miniature dei temi sono l'unico posto dell'app che nomina le due
   palette per esteso: un'anteprima deve far vedere il tema che NON stai
   guardando, e i token veri dicono sempre e solo quello corrente. */
.set-prev.light{background:var(--lt-bg);}
.set-prev.light .side{background:var(--lt-card);}
.set-prev.light .ln{background:var(--lt-dim);}
.set-prev.light .ln.ink{background:var(--lt-text);}
.set-prev.light .blk{background:var(--lt-card);border:1px solid var(--lt-border);}
.set-prev.dark{background:var(--dk-bg);}
.set-prev.dark .side{background:var(--dk-card);}
.set-prev.dark .ln{background:var(--dk-border);}
.set-prev.dark .ln.ink{background:var(--dk-text);}
.set-prev.dark .blk{background:var(--dk-card);border:1px solid var(--dk-border);}
.set-prev.sys{background:linear-gradient(105deg,var(--lt-bg) 0 50%,var(--dk-bg) 50% 100%);}
.set-prev.sys .side{background:transparent;}
.set-prev.sys .ln{background:var(--lt-dim);}
.set-prev.sys .main .ln{background:var(--dk-text);}
.set-prev.sys .blk{background:var(--dk-card);}
.set-prev .ln.brand{background:var(--primary);}

/* L'anteprima del caricamento e' il caricamento vero, in piccolo. */
.set-prev.load{background:var(--card);}
.set-prev.load .side{background:var(--field);}
.set-prev.mid{align-items:center;justify-content:center;background:var(--field);}
.set-prev .ld-bar{height:7px;}
.set-prev .ld-bar.block{height:22px;border-radius:6px;}

@media (max-width:1100px){
  .set-sec{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:980px){
  .set-layout{grid-template-columns:1fr;}
  .set-nav{flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px;}
  .set-nav a{white-space:nowrap;}
  .set-nav .grp{display:none;}
}
@media (max-width:560px){
  .set-wrap .grid2{grid-template-columns:1fr;}
  .set-mail-test-action{padding-top:0;}
}

/* ---- l'indice delle impostazioni sul telefono (`settings/index.js`) ---- */
@media (max-width:640px){
  .set-mgrp{margin:6px 4px 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
  .set-mgrp:not(:first-child){margin-top:18px;}
  .set-mlist{padding:4px 14px;margin:0;}
  .set-mrow{display:flex;align-items:center;gap:12px;padding:13px 0;color:inherit;text-decoration:none;}
  .set-mrow + .set-mrow{border-top:1px solid var(--border);}
  .set-mrow:active{background:var(--hover);}
  .set-mico{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:var(--primary-soft);color:var(--primary-dark);}
  .set-mico svg{width:17px;height:17px;}
  .set-mtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .set-mtxt b{font-size:14px;font-weight:600;}
  .set-mtxt small{font-size:12px;color:var(--muted);}
  .set-mchev{flex:0 0 16px;width:16px;height:16px;color:var(--dim);}
  /* Il nome della sezione lo dice gia' la testata, con la freccia accanto:
     ripeterlo come primo titolo della pagina erano due titoli uguali a
     cinquanta pixel. Resta la riga che spiega. */
  .set-head h2{display:none;}
  .set-head p{margin-top:0;}
  /* I numeri delle tariffe in fila, come le schede di un numero delle
     altre pagine. */
  .set-kpis{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:-12px;padding:2px 12px 6px;}
  .set-kpis::-webkit-scrollbar{display:none;}
  .set-kpis > *{flex:0 0 74%;scroll-snap-align:start;}

  /* ---- il profilo a linguette (`settings/profile-mobile.js`) ----
     Il segno rosso sta sulla linguetta che ha un campo da correggere: la
     barra di salvataggio lo dice, e da un'altra linguetta non si vede. */
  .pf-mseg button{display:inline-flex;align-items:center;gap:5px;}
  .pf-mseg-err{flex:none;width:7px;height:7px;border-radius:50%;background:var(--red);}
  /* La scheda non aggiunge aria a quella delle sezioni: erano quattordici
     piu' venti. E la testata con la faccia e' quella compatta del disegno,
     la faccia a quarantotto e i tre numeri in una cornice sotto — lo
     stesso `statline` di `.m-stat`, scritto sui pezzi che il desktop gia'
     disegna. */
  .pf-wrap{gap:11px;}
  .pf-wrap .pfu-card{padding:0;margin:0;}
  .pf-wrap .pf-sec{padding:16px 14px;}
  .pf-wrap .pf-hero{gap:12px;padding:14px;}
  .pf-wrap .pf-avatar-wrap .rav{width:48px;height:48px;}
  .pf-wrap .pf-avatar-edit{width:24px;height:24px;right:-5px;bottom:-5px;}
  .pf-wrap .pf-hero-info{min-width:0;}
  .pf-wrap .pf-hero-info h2{font-size:16px;}
  .pf-wrap .pf-hero-meta{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:10px 0;
    border:1px solid var(--border);border-radius:12px;background:var(--field);}
  .pf-wrap .pf-hero-meta .hm{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:4px 6px;text-align:center;}
  .pf-wrap .pf-hero-meta .hm>span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
  .pf-wrap .pf-hero-meta .hm b{font-size:12.5px;font-weight:700;}
  .pf-wrap .pf-bar{width:100%;max-width:90px;margin-top:3px;}
  .pf-wrap .pf-colors{padding:0 14px 14px;}
}
@media (max-width:640px){
  /* **Le sezioni vanno a capo, non scorrono.** A 980 la corsia diventa
     orizzontale e scorre: su uno schermo largo abbastanza se ne vedono
     otto e lo scorrimento non serve mai. Su trecentonovanta se ne vedono
     **due e mezza**, e le altre sei stanno dietro a un gesto che nessuno
     prova dentro a una striscia che non dice di avere un seguito. Tre
     righe costano sessanta pixel e le fanno vedere tutte. */
  .set-nav{flex-wrap:wrap;overflow-x:visible;gap:4px;}
  .set-nav a{padding:8px 11px;font-size:12.5px;min-height:36px;}

}
.pf-swhint{font-size:11.5px;margin-left:6px;}

.pf-2fa{margin-top:12px;}
.pf-2fa-img{max-width:280px;}
.pf-rowtop{align-items:flex-start;}

/* Il codice QR della verifica in due passaggi. Il fondo bianco sta dentro
   all'SVG e non si tocca: un QR su fondo scuro molti lettori non lo
   agganciano, e di notte il riquadro deve restare chiaro lo stesso. Il
   bordo e' nostro e serve solo a staccarlo dalla scheda. */
.pf-qr{display:inline-flex;padding:10px;margin:12px 0 4px;background:#fff;
  border:1px solid var(--border);border-radius:12px;}
.pf-qr svg{display:block;}

/* Un valore deciso, che non si scrive piu'. Ha l'aria di un campo perche'
   sta in mezzo a dei campi, ma non lo e': si legge e basta, e accanto c'e'
   il lucchetto che dice perche'. */
.set-fixed{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;
  background:var(--field);border:1px solid var(--border);border-radius:10px;}
.set-fixed code{font-size:13px;color:var(--text);background:none;padding:0;word-break:break-all;}
.set-lock{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0;
  font-size:11.5px;font-weight:600;color:var(--muted);}
.set-lock svg{width:13px;height:13px;}