:root {
  --sfondo: #f1f4f8; --pannello: #fff; --testo: #0f172a; --tenue: #5b6779; --bordo: #dbe2ea;
  --primario: #0e7490; --primario-scuro: #155e75; --verde: #15803d; --verde-chiaro: #dcfce7; --rosso: #dc2626; --rosso-chiaro: #fee2e2;
  --ambra: #b45309; --ambra-chiaro: #fef3c7; --ombra: 0 1px 2px #0f172a14, 0 4px 14px #0f172a0d;
}
@media (prefers-color-scheme: dark) {
  :root { --sfondo: #0b1220; --pannello: #131c2e; --testo: #e5eaf2; --tenue: #94a3b8; --bordo: #26324a; --verde-chiaro: #14321f; --rosso-chiaro: #3a1717; --ambra-chiaro: #3a2a10; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; font-size: 16px; color: var(--testo); background: var(--sfondo); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; min-height: 42px; padding: 0 16px; background: var(--pannello); box-shadow: inset 0 0 0 1px var(--bordo); }
button.primario { background: var(--primario); color: #fff; box-shadow: none; font-weight: 600; }
button:disabled { opacity: .5; }
input, select { width: 100%; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--bordo); background: var(--pannello); }
input:focus, select:focus { outline: 2px solid var(--primario); outline-offset: 1px; }
a { color: var(--primario); }

.testata { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: #0b2530; color: #fff; flex-wrap: wrap; }
.logo { font-weight: 800; font-size: 20px; }
.logo span { color: #5eead4; }
.logo small { font-weight: 500; color: #9bd6d3; }
.testata nav { display: flex; gap: 4px; flex: 1; }
.testata nav button { background: transparent; color: #cbd5e1; box-shadow: none; }
.testata nav button.attivo { background: #12404d; color: #fff; }
.chi { display: flex; align-items: center; gap: 10px; color: #cbd5e1; font-size: 14px; }
.tasto-chiaro { background: #12404d; color: #fff; box-shadow: none; }

main { padding: 20px; max-width: 1280px; margin: 0 auto; }
.titolo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.titolo h1 { margin: 0; font-size: 24px; flex: 1; }
.nota { color: var(--tenue); font-size: 14px; line-height: 1.45; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.scheda { background: var(--pannello); border-radius: 14px; padding: 16px; box-shadow: var(--ombra); }
.scheda h3 { margin: 0 0 10px; font-size: 13px; color: var(--tenue); text-transform: uppercase; letter-spacing: .5px; }
.negozio { cursor: pointer; text-align: left; display: block; width: 100%; min-height: 0; padding: 16px; border-radius: 14px; box-shadow: var(--ombra); }
.negozio b { font-size: 18px; display: block; }
.cifra { font-size: 28px; font-weight: 800; margin: 8px 0 2px; }
.etichetta { display: inline-block; font-size: 13px; padding: 3px 10px; border-radius: 99px; font-weight: 600; background: var(--sfondo); }
.etichetta.ok { background: var(--verde-chiaro); color: var(--verde); }
.etichetta.ko { background: var(--rosso-chiaro); color: var(--rosso); }
.etichetta.attesa { background: var(--ambra-chiaro); color: var(--ambra); }
.schede { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.schede button.attivo { background: var(--primario); color: #fff; box-shadow: none; }
.filtri { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.filtri input { max-width: 320px; }
.tabella { background: var(--pannello); border-radius: 14px; box-shadow: var(--ombra); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13px; color: var(--tenue); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--bordo); }
td { padding: 10px 12px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
tr.cliccabile { cursor: pointer; }
tr.cliccabile:hover td { background: var(--sfondo); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.vuoto { text-align: center; color: var(--tenue); padding: 30px; }
.spento td { color: var(--tenue); }
.voce { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--bordo); }

.accesso { max-width: 380px; margin: 12vh auto; }
.accesso form { display: flex; flex-direction: column; gap: 12px; }
.accesso .logo { color: var(--testo); font-size: 26px; text-align: center; }
.accesso .logo span { color: var(--primario); }

dialog { border: 0; border-radius: 16px; padding: 0; width: min(620px, 94vw); background: var(--pannello); color: var(--testo); box-shadow: 0 30px 80px #0006; }
dialog::backdrop { background: #0b1220aa; }
dialog form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
dialog h2 { margin: 0; font-size: 20px; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tenue); font-weight: 600; }
.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campi .pieno { grid-column: 1 / -1; }
.spunta { flex-direction: row !important; align-items: center; gap: 8px; color: var(--testo) !important; font-size: 15px !important; }
.spunta input { width: 20px; min-height: 20px; }
.bottoni { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.token { font-family: Consolas, monospace; font-size: 13px; word-break: break-all; background: var(--sfondo); padding: 10px; border-radius: 8px; user-select: all; }
.avviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; padding: 12px 20px; border-radius: 12px; z-index: 50; max-width: 90vw; }
.avviso.errore { background: var(--rosso); }
@media (max-width: 640px) { .campi { grid-template-columns: 1fr; } main { padding: 12px; } }