:root {
  --bg: #EEF0ED;        /* cemento chiaro */
  --surface: #FFFFFF;
  --surface-2: #F6F7F4;
  --ink: #15202B;
  --muted: #5F6B76;
  --line: #D5D9D3;
  --tape: #F5C518;      /* giallo nastro di sicurezza */
  --tape-ink: #17140A;
  --kraft: #C49A6C;     /* cartone */
  --kraft-soft: #EADBC8;
  --plank: #3A4650;     /* mensola */
  --danger: #C0392B;
  --focus: #2F6FEB;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r: 10px;
  --gutter: 16px;
  --shadow: 0 1px 0 rgb(0 0 0 / .04), 0 6px 18px -10px rgb(21 32 43 / .25);
  color-scheme: light;
}
/* Sempre chiaro, anche con l'iPhone in modalità scura: più leggibile (scelta di Piero, 30/09/2026) */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.45 var(--font-body);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- barra superiore ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font: 800 19px/1 var(--font-display); font-variation-settings: "wdth" 125;
  letter-spacing: -.01em; text-transform: uppercase;
}
.brand svg { width: 24px; height: 24px; color: var(--kraft); }
.search {
  flex: 1; max-width: 560px; margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 14px; height: 42px;
}
.search svg { color: var(--muted); width: 18px; height: 18px; }
.search input { border: 0; background: none; outline: none; width: 100%; min-width: 0; height: 100%; }
.search:focus-within { border-color: var(--ink); }
/* sul telefono il nome resta (BOXES è corto), un po' più piccolo; solo sugli schermi strettissimi resta la scatola */
@media (max-width: 520px) { .brand { font-size: 16px; gap: 6px; } .brand svg { width: 22px; height: 22px; } }
@media (max-width: 330px) { .brand span { display: none; } }
/* con l'indicatore di rete/modifiche acceso lo spazio serve a lui e alla ricerca */
@media (max-width: 420px) { .topbar:has(#stato-rete:not([hidden])) .brand span { display: none; } }

.tabs { display: flex; gap: 2px; }
.tabs a, .tabs .tab-scansiona {
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 8px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 15px;
}
.tabs a svg, .tabs .tab-scansiona svg { width: 18px; height: 18px; }
.tabs a:hover, .tabs .tab-scansiona:hover { color: var(--ink); }
.tabs .tab-scansiona { border: 0; background: none; font-family: inherit; cursor: pointer; }
.tabs a[aria-current] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 700px) {
  /* su telefono le sezioni diventano una barra a schede in basso */
  .topbar { backdrop-filter: none; background: var(--bg); }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    justify-content: space-around; gap: 0;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .tabs a, .tabs .tab-scansiona { flex: 1; flex-direction: column; gap: 3px; font-size: 11px; padding: 6px 4px; }
  .tabs a svg, .tabs .tab-scansiona svg { width: 22px; height: 22px; }
  .tabs a[aria-current] { background: none; box-shadow: none; }
  .tabs a[aria-current] svg { color: var(--ink); background: var(--tape); border-radius: 999px; padding: 3px 14px; width: 52px; height: 28px; margin: -3px 0; }
  body { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  /* pulsante, barra di selezione e messaggi: vedi "sopra la barra delle schede" in fondo al file */
}

main { max-width: 1100px; margin: 0 auto; padding: 20px var(--gutter); outline: none; }

/* versione nuova dell'app disponibile: una striscia sotto la barra in alto */
.aggiornamento {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px var(--gutter); font-size: 14px; font-weight: 600;
  background: color-mix(in srgb, var(--tape) 30%, var(--surface)); border-bottom: 1px solid #e3c44c;
}
body.login .aggiornamento { display: none !important; }

/* ---------- testata pagina ---------- */
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.page-head h1 { margin: 0; font: 800 28px/1.05 var(--font-display); font-variation-settings: "wdth" 112; letter-spacing: -.02em; }
.stats { font: 500 13px/1 var(--font-mono); color: var(--muted); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 22px; scrollbar-width: none; }
.chip {
  flex: none; border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* locali (cantina, garage…): la fila sopra quella degli scaffali, col giallo del nastro */
.riga-locali { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.riga-locali .chips { margin: 0; flex: 1; min-width: 0; padding-bottom: 0; }
.chip.locale { font-weight: 700; padding: 9px 16px; font-size: 15px; }
.chip.locale[aria-pressed="true"] { background: var(--tape); color: var(--tape-ink); border-color: #b8920a; }
.chip.nuovo-locale { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); border-style: dashed; background: transparent; }
.chip.nuovo-locale svg { width: 15px; height: 15px; }
.riga-locali .modifica-locale { flex: none; width: 38px; min-height: 38px; color: var(--muted); background: transparent; }
.riga-locali .modifica-locale svg { width: 18px; height: 18px; }

/* ---------- scaffali e mensole (elemento firma) ---------- */
.scaffale { margin-bottom: 34px; }
.scaffale > h2 {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px;
  font: 800 22px/1 var(--font-display); font-variation-settings: "wdth" 118;
}
.scaffale > h2 small { font: 700 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--muted); }
.ripiano { margin-bottom: 18px; }
.ripiano-label { font: 500 12px/1 var(--font-mono); color: var(--muted); margin: 0 0 8px 2px; letter-spacing: .04em; }
.boxes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px; align-items: end; padding: 0 6px;
}
@media (max-width: 700px) {
  /* su telefono ogni ripiano è una fila unica che scorre, come lo scaffale vero */
  .boxes {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-top: 4px; margin: 0 calc(-1 * var(--gutter)); padding-inline: calc(var(--gutter) + 6px);
    scroll-padding-inline: calc(var(--gutter) + 6px);
  }
  .boxes::-webkit-scrollbar { display: none; }
  .box-card { flex: 0 0 96px; scroll-snap-align: start; }
  .box-card.aggiungi .box-num svg { height: 34px; }
  .box-num { font-size: 34px; }
}
.plank {
  height: 8px; border-radius: 2px; margin-top: -1px;
  background: var(--plank);
  box-shadow: 0 6px 10px -6px rgb(0 0 0 / .45);
}

.box-card {
  position: relative; display: block; text-decoration: none;
  background: var(--kraft-soft);
  border: 1px solid color-mix(in srgb, var(--kraft) 55%, transparent);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  padding: 18px 10px 10px;
  transition: transform .15s ease, background .15s ease;
}
/* striscia di nastro da imballo sul coperchio */
.box-card::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 22px; height: 12px; transform: translateX(-50%);
  background: color-mix(in srgb, var(--kraft) 60%, transparent); border-radius: 0 0 2px 2px;
}
.box-card:hover { transform: translateY(-3px); }
.box-num {
  display: block; text-align: center;
  font: 900 40px/1 var(--font-display); font-variation-settings: "wdth" 125;
  letter-spacing: -.03em; color: var(--ink);
}
.box-meta { display: block; text-align: center; margin-top: 8px; font: 500 11px/1.2 var(--font-mono); color: var(--muted); }
.box-card.vuota .box-num { opacity: .45; }

/* posto libero su un ripiano: tocca per creare una scatola proprio lì */
.box-card.aggiungi {
  font: inherit; cursor: pointer; color: var(--muted);
  background: transparent; border: 1.5px dashed color-mix(in srgb, var(--kraft) 70%, transparent); border-bottom: 0;
}
.box-card.aggiungi::before { display: none; }
.box-card.aggiungi:hover { background: color-mix(in srgb, var(--kraft-soft) 60%, transparent); color: var(--ink); }
.box-card.aggiungi .box-num { color: inherit; line-height: 0; }
.box-card.aggiungi .box-num svg { width: 28px; height: 40px; stroke-width: 2.4; }

.scaffale > h2 .nome-scaffale { font: 500 15px/1.2 var(--font-body); color: var(--muted); font-variation-settings: "wdth" 100; }
.scaffale > h2 .modifica-scaffale { margin-left: auto; align-self: center; width: 38px; min-height: 38px; color: var(--muted); }
.scaffale > h2 .modifica-scaffale:hover { color: var(--ink); background: var(--surface); }
.scaffale > h2 .modifica-scaffale svg { width: 18px; height: 18px; }
.scaffale > h2 .disponi-scaffale { margin-left: auto; align-self: center; color: var(--muted); font-family: var(--font-body); font-variation-settings: "wdth" 100; }
.scaffale > h2 .disponi-scaffale + .modifica-scaffale { margin-left: 0; }

/* modalità "Sposta": le scatole si trascinano, anche da un ripiano all'altro */
.vista-scaffali.disponi { -webkit-user-select: none; user-select: none; }
.disponi .boxes { min-height: 92px; border-radius: 6px; transition: background .15s ease; }
.disponi .ripiano.bersaglio .boxes { background: color-mix(in srgb, var(--tape) 18%, transparent); }
.disponi .box-card {
  cursor: grab; touch-action: none; -webkit-touch-callout: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--kraft) 80%, transparent);
}
.disponi .box-card:hover { transform: none; }
.disponi .box-card.trascinata { opacity: .3; }
.box-card.fantasma {
  position: fixed; z-index: 40; margin: 0; pointer-events: none; cursor: grabbing;
  transform: rotate(-3deg) scale(1.06); box-shadow: 0 16px 30px -10px rgb(0 0 0 / .5);
}
.selbar .selbar-testo { flex: 1; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  /* in modalità "Sposta" ogni ripiano mostra tutte le sue scatole, su più file se serve */
  .disponi .boxes { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
}

/* dopo uno swipe lo scaffale entra dal lato verso cui si è scorso */
@keyframes entra-da-destra { from { transform: translateX(48px); opacity: 0; } }
@keyframes entra-da-sinistra { from { transform: translateX(-48px); opacity: 0; } }
.vista-scaffali.entra-da-destra { animation: entra-da-destra .22s ease-out; }
.vista-scaffali.entra-da-sinistra { animation: entra-da-sinistra .22s ease-out; }

.nuovo-scaffale {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 16px; margin: 4px 0 8px; border: 1.5px dashed var(--line); border-radius: var(--r);
  background: transparent; color: var(--ink); font: 600 15px/1 var(--font-body); cursor: pointer;
}
.nuovo-scaffale:hover { border-color: var(--ink); background: var(--surface); }
.fields label .facoltativo { font-weight: 400; }
/* scatola: lo scaffale può avere un nome, gli altri due sono numeri brevi */
#form-scatola .fields.three, #sposta-nuova { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }

/* ---------- etichetta posizione ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tape); color: var(--tape-ink);
  font: 700 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 3px; white-space: nowrap;
}
.tag + .tag { margin-left: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags .tag + .tag { margin-left: 0; }
.tag.locale { background: var(--ink); color: var(--bg); }

/* ---------- dettaglio scatola ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.back:hover { color: var(--ink); }
.label-hero {
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px 20px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.label-hero .eyebrow { font: 700 11px/1 var(--font-mono); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.label-hero .big {
  font: 900 76px/.9 var(--font-display); font-variation-settings: "wdth" 125; letter-spacing: -.04em;
}
.label-hero .where { display: flex; flex-direction: column; gap: 10px; }
.label-hero .count { font: 500 13px/1 var(--font-mono); color: var(--muted); }
.label-hero .tools { display: flex; gap: 6px; }
@media (max-width: 560px) {
  .label-hero { grid-template-columns: auto 1fr; }
  .label-hero .tools { grid-column: 1 / -1; }
  .label-hero .big { font-size: 64px; }
}

/* aggiunta rapida */
.quick-add {
  display: grid; grid-template-columns: 2fr 80px 1.2fr 2fr auto; gap: 8px;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r);
  padding: 10px; margin-bottom: 14px;
}
.quick-add input, .quick-add select { width: 100%; }
@media (max-width: 760px) {
  .quick-add { grid-template-columns: 1fr 88px; }
  .quick-add [name="contenuto"], .quick-add [name="note"] { grid-column: 1 / -1; }
  .quick-add [name="tipo_id"] { grid-column: 1; grid-row: 2; }
  .quick-add [name="quantita"] { grid-column: 2; grid-row: 2; }
  .quick-add .btn { grid-column: 1 / -1; }
}

input, textarea, select {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; min-height: 44px; outline: none; width: 100%; min-width: 0;
  /* 16px almeno: sotto, Safari su iPhone ingrandisce la pagina al tocco e la fa scorrere di lato */
  font-size: 16px;
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); }
select {
  appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
textarea { resize: vertical; }

.items { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.items li + li { border-top: 1px solid var(--line); }
.items li { display: flex; align-items: stretch; }
.items li > .item { flex: 1; min-width: 0; }

/* ordine manuale: maniglia a sinistra, visibile solo in modalità riordino */
.maniglia { display: none; }
.items.riordino { -webkit-user-select: none; user-select: none; }
.items.riordino .maniglia {
  display: grid; place-items: center; flex: none; width: 46px; color: var(--muted);
  cursor: grab; touch-action: none; -webkit-touch-callout: none;
}
.items.riordino .maniglia svg { width: 22px; height: 22px; }
.items.riordino .item { cursor: default; padding-left: 4px; }
.items.riordino .item:hover { background: none; }
.items.riordino li.trascinata {
  position: relative; z-index: 1; background: color-mix(in srgb, var(--tape) 22%, var(--surface));
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / .45);
}
.items.riordino li.trascinata .maniglia { cursor: grabbing; color: var(--ink); }
.head-tools { display: flex; gap: 6px; }
.results .item { text-decoration: none; }
.item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; padding: 13px 16px; cursor: pointer;
}
.item:hover { background: var(--surface-2); }
.item .name { font-weight: 600; }
.item .qty { font: 700 15px/1 var(--font-mono); grid-row: span 2; }
.item .qty::before { content: "×"; color: var(--muted); margin-right: 2px; font-weight: 500; }
.item .sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.pill { font: 500 11px/1 var(--font-mono); padding: 4px 7px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); text-transform: lowercase; }
.item.flash { animation: flash 1.6s ease; }

/* selezione multipla */
.items-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 8px; min-height: 36px; }
.items-head > span { font: 700 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn.small svg { width: 16px; height: 16px; }
.item .check { display: none; }
.items.selecting .item { grid-template-columns: auto 1fr auto; }
.items.selecting .item .check {
  display: grid; place-items: center; grid-row: span 2;
  width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--line); background: var(--surface);
}
.items.selecting .item .check svg { width: 16px; height: 16px; stroke-width: 3; opacity: 0; }
.items.selecting .item.selected { background: color-mix(in srgb, var(--tape) 16%, var(--surface)); }
.items.selecting .item.selected .check { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.items.selecting .item.selected .check svg { opacity: 1; }

.selbar {
  position: fixed; z-index: 25; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px;
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 8px 8px 16px; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .4);
}
.selbar #sel-n { flex: 1; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .selbar { gap: 6px; padding-left: 14px; }
  .selbar .btn:not(.icon) { padding: 0 12px; }
}
.dlg-sub { margin: -8px 0 16px; color: var(--muted); font-size: 14px; }
@keyframes flash { 0%, 40% { background: color-mix(in srgb, var(--tape) 45%, transparent); } }

/* risultati ricerca */
.results .item { grid-template-columns: 1fr auto; }
.results .item .where { grid-row: span 2; text-align: right; }
.results .item .where .tag { font-size: 11px; padding: 5px 7px; }
.results mark { background: color-mix(in srgb, var(--tape) 60%, transparent); color: inherit; border-radius: 2px; }

/* vuoti */
.empty {
  text-align: center; padding: 48px 20px; border: 1.5px dashed var(--line); border-radius: var(--r); color: var(--muted);
}
.empty strong { display: block; color: var(--ink); font: 800 20px/1.2 var(--font-display); font-variation-settings: "wdth" 112; margin-bottom: 6px; }
.empty .btn { margin-top: 16px; }

/* ---------- tipi ---------- */
.add-row { display: flex; gap: 8px; margin-bottom: 14px; }
.add-row input { flex: 1; min-width: 0; }
.tipo-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; min-height: 56px; }
.tipo-row .name { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tipo-row.editing input { flex: 1; min-width: 0; }
.count-link { font: 500 13px/1 var(--font-mono); color: var(--ink); white-space: nowrap; }
.count-link.muted { color: var(--muted); }
.row-tools { display: flex; gap: 4px; }
.row-tools .btn.icon { color: var(--muted); }
.row-tools .btn.icon:hover { color: var(--ink); background: var(--surface-2); }
.row-tools .btn.icon.danger-ghost:hover { color: var(--danger); }

/* ---------- etichette ---------- */
.label-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.label-controls .chips { margin: 0; flex: 1 1 260px; }
.segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.segmented button { border: 0; background: none; border-radius: 999px; padding: 7px 12px; font-size: 13px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.segmented button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.hint { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.hint code { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.labels { display: grid; gap: 12px; }
.labels.piccole { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.labels.grandi  { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.etichetta {
  /* l'etichetta è sempre bianca: è un oggetto fisico da stampare */
  --e-ink: #111; container-type: inline-size;
  /* padding e gap in %: le unità cq qui varrebbero per il contenitore esterno, non per l'etichetta */
  position: relative; display: flex; gap: 5%; align-items: center;
  background: #fff; color: var(--e-ink); border-radius: 6px;
  border: 1.5px solid #cfd3cc; padding: 5%; cursor: pointer;
  aspect-ratio: 62 / 38; overflow: hidden;
  transition: opacity .15s ease, box-shadow .15s ease;
}
.labels.grandi .etichetta { aspect-ratio: 94 / 60; }
.etichetta:not(.on) { opacity: .35; }
.etichetta.on { box-shadow: 0 0 0 2px var(--ink); }
.etichetta > input { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; min-height: 0; accent-color: #15202B; margin: 0; }
.etichetta .qr { height: 100%; aspect-ratio: 1; flex: none; }
.etichetta .qr svg { width: 100%; height: 100%; stroke: none; display: block; }
.et-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.et-eyebrow { font: 700 4.4cqw/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #555; }
.et-num {
  font: 900 calc(min(30cqw, 46cqw / var(--len))) / .95 var(--font-display);
  font-variation-settings: "wdth" 112; letter-spacing: -.03em; margin: 1cqw 0 3cqw;
}
.et-pos { display: flex; flex-direction: column; gap: 1.2cqw; align-items: flex-start; }
.et-pos span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--tape); color: var(--tape-ink); border: 1px solid #b8920a;
  font: 700 4.2cqw/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  padding: 1.2cqw 1.8cqw; border-radius: 2px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* etichettatrice a rotolo */
.misura { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.misura select { width: auto; min-height: 38px; padding-block: 6px; }
.misura input { width: 72px; min-height: 38px; padding: 6px 10px; }
.misura { flex-wrap: wrap; }
.misura .ruota { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--ink); cursor: pointer; }
.misura .ruota input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; accent-color: var(--ink); }
.warn {
  margin: -6px 0 16px; padding: 10px 14px; border-radius: 8px; font-size: 14px;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger);
}
.labels.rotolo { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.rcard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px;
  transition: opacity .15s ease;
}
.rcard:not(.on) { opacity: .4; }
.rcard-head { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.rcard-head input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--ink); }
/* l'anteprima sembra un adesivo vero: bianco, angoli arrotondati, ombra */
.rcard img {
  display: block; width: 100%; height: auto; background: #fff;
  border-radius: 6px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 4px 12px -6px rgb(0 0 0 / .35);
}
.rcard-actions { display: flex; gap: 6px; }
.rcard-actions .btn { flex: 1; text-decoration: none; }
@media (max-width: 700px) {
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding-inline: 6px; }
  .label-controls > .btn { width: 100%; }
}

@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; padding: 0; min-height: 0; }
  .topbar, .tabs, .fab, .toast, dialog, .no-print, .etichetta:not(.on) { display: none !important; }
  main { padding: 0; max-width: none; }
  .labels { gap: 2mm; }
  .labels.piccole { grid-template-columns: repeat(3, 62mm); }
  .labels.grandi  { grid-template-columns: repeat(2, 94mm); }
  .etichetta, .etichetta.on { opacity: 1; box-shadow: none; border: .3mm dashed #999; border-radius: 1.5mm; break-inside: avoid; }
}

/* ---------- senza rete / modifiche in attesa ---------- */
.stato-rete {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 13px/1 var(--font-body); cursor: pointer; white-space: nowrap;
}
.stato-rete svg { width: 16px; height: 16px; }
.stato-rete.invio { background: color-mix(in srgb, var(--tape) 35%, var(--surface)); border-color: var(--tape); }
.stato-rete.problemi { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: var(--danger); color: var(--danger); }
.stato-rete .numero { font: 700 12px/1 var(--font-mono); }
@media (max-width: 420px) { .stato-rete .parola { display: none; } .stato-rete { padding: 0 9px; } }
.problemi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
.problemi li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.problemi li span { color: var(--danger); font-size: 14px; }
body.login .stato-rete { display: none !important; }

/* ---------- accesso ---------- */
.btn.esci { color: var(--muted); flex: none; }
.btn.esci:hover { color: var(--ink); }
body.login .tabs, body.login .search, body.login .esci, body.login .fab, body.login .selbar { display: none !important; }
.login-card {
  max-width: 380px; margin: 8vh auto 0; padding: 28px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.login-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font: 800 24px/1 var(--font-display); font-variation-settings: "wdth" 125; text-transform: uppercase;
}
.login-brand svg { width: 30px; height: 30px; color: var(--kraft); }
.login-card p { color: var(--muted); margin: 0 0 18px; }
.login-card .btn { width: 100%; margin-top: 16px; }
.login-card .form-error { margin-bottom: 0; }
.login-card .login-altro { margin: 18px 0 0; font-size: 14px; }
.login-card .login-altro a { color: var(--ink); font-weight: 600; }

/* ---------- account, inviti e utenti ---------- */
.pannello {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.pannello h2 { font: 800 18px/1.2 var(--font-display); font-variation-settings: "wdth" 112; margin: 0 0 12px; }
.pannello h2:not(:first-child) { margin-top: 22px; }
.pannello > p { margin: 0 0 10px; }
.pannello .hint { margin: 12px 0 0; }
.pannello form .btn.primary { margin-top: 12px; }
.riga-invito { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.riga-invito label { flex: 1 1 260px; display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.riga-invito .btn.primary { margin-top: 0; }
.nuovo-invito {
  margin: 14px 0 4px; padding: 14px 16px; border-radius: 8px;
  background: color-mix(in srgb, var(--tape) 18%, var(--surface)); border: 1px solid #e3c44c;
}
.nuovo-invito p { margin: 0 0 8px; font-size: 14px; }
.nuovo-invito code { display: block; font: 600 13px/1.4 var(--font-mono); word-break: break-all; user-select: all; -webkit-user-select: all; }
.nuovo-invito .azioni { display: flex; gap: 8px; margin-top: 10px; }
.elenco-admin { margin-top: 12px; }
.elenco-admin li > .riga-admin { flex: 1; min-width: 0; }
.riga-admin { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.riga-admin > span:first-child { flex: 1 1 160px; min-width: 0; }
.riga-admin small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.riga-admin.disattivato strong { color: var(--muted); text-decoration: line-through; }
.riga-admin .row-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.mono { font-family: var(--font-mono); }

/* stampa diretta sulla SUPVAN (pagina Etichette, formato etichettatrice) */
#stampa-diretta { margin: 0 0 18px; }
.azioni-stampa { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-top: 12px; }
.azioni-stampa .densita { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.azioni-stampa .densita select { min-width: 72px; }
.warn-testo { color: var(--danger); }
#stampa-diretta .hint:empty { display: none; }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 600; cursor: pointer; background: none; white-space: nowrap;
}
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { opacity: .9; }
.btn.ghost { border-color: var(--line); background: var(--surface); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.danger-ghost { color: var(--danger); }
.btn.danger-ghost:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.icon { padding: 0; width: 44px; }

.fab {
  position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 20;
  display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tape); color: var(--tape-ink); font-weight: 700;
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / .45);
}
.fab svg { stroke-width: 2.5; }

/* ---------- dialog / bottom sheet ---------- */
.sheet {
  border: 0; padding: 0; background: var(--surface); color: var(--ink);
  border-radius: 14px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5);
}
.sheet::backdrop { background: rgb(10 14 18 / .45); backdrop-filter: blur(2px); }
.sheet form { padding: 20px; min-width: 0; }
.sheet h2 { margin: 0 0 16px; font: 800 20px/1.1 var(--font-display); font-variation-settings: "wdth" 112; }
.fields { display: grid; gap: 12px; }
.fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* minmax: i campi numerici di iOS non allargano la griglia */
.fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.actions .spacer { flex: 1; }
.form-error { color: var(--danger); font-size: 14px; margin: 12px 0 0; }
@media (max-width: 640px) {
  .sheet {
    width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet[open] { animation: up .22s ease-out; }
  /* pulsanti a tutta larghezza; lo spaziatore manda a capo le azioni principali */
  .sheet .actions .btn { flex: 1; }
  .sheet .actions .spacer { flex-basis: 100%; height: 0; }
}
@keyframes up { from { transform: translateY(40px); opacity: .4; } }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: .2s ease; z-index: 50; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.has-action.show { pointer-events: auto; }
.toast a { color: inherit; font-weight: 700; margin-left: 10px; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- lettore QR a tutto schermo ---------- */
.scanner {
  border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  background: #000; color: #fff; overflow: hidden;
}
.scanner::backdrop { background: #000; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* mirino: un quadrato chiaro al centro, il resto scurito */
.scanner .mirino {
  position: absolute; left: 50%; top: 45%; width: min(68vw, 300px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45), inset 0 0 0 3px var(--tape);
}
.scanner-msg {
  position: absolute; left: 16px; right: 16px; top: calc(45% + min(34vw, 150px) + 18px); margin: 0;
  text-align: center; font-weight: 600; text-shadow: 0 1px 3px rgb(0 0 0 / .6);
}
.scanner-msg.errore { color: #fff; background: rgb(192 57 43 / .9); padding: 10px 14px; border-radius: 10px; text-shadow: none; }
.scanner-chiudi {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(28px + env(safe-area-inset-bottom));
  background: #fff; color: #111; min-width: 140px;
}

/* ---------- su telefono: sopra la barra delle schede ----------
   Sta in fondo al file apposta: queste regole devono vincere su quelle generali di .fab, .selbar
   e .toast, che hanno la stessa specificità e compaiono prima. (Dentro il blocco delle schede
   venivano sovrascritte e il pulsante finiva sopra la barra.) */
@media (max-width: 700px) {
  .fab, .selbar { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
}