:root {
  --blu: #12529b;
  --blu-scuro: #0d3b73;
  --sfondo: #f4f6f8;
  --testo: #1a2530;
  --testo-tenue: #5b6b78;
  --bordo: #d7dee5;
  --verde: #1e8e4a;
  --rosso: #b3261e;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--sfondo); color: var(--testo);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; padding-bottom: env(safe-area-inset-bottom, 0px); }
.topbar { background: var(--blu); color: #fff; display: flex; align-items: center; gap: 14px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 18px; }
.topbar .logo { width: 44px; height: 44px; border-radius: 10px; }
.topbar h1 { margin: 0; font-size: 1.3rem; }
.sottotitolo { margin: 2px 0 0; opacity: 0.85; font-size: 0.9rem; }
main { max-width: 960px; margin: 0 auto; padding: 24px 16px 40px; }
.griglia { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tessera { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: #fff; border: 1px solid var(--bordo); border-radius: 14px; padding: 18px 18px 16px;
  color: inherit; text-decoration: none; font: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: transform .08s, box-shadow .08s; }
.tessera:hover, .tessera:focus-visible { box-shadow: 0 4px 14px rgba(18,82,155,0.15); transform: translateY(-1px); outline: none; }
.tessera:active { transform: translateY(0); }
.icona { font-size: 2rem; line-height: 1; }
.tessera strong { font-size: 1.1rem; color: var(--blu-scuro); }
.descr { color: var(--testo); font-size: 0.92rem; }
.chi { color: var(--testo-tenue); font-size: 0.8rem; margin-top: 4px; }
.stato { position: absolute; top: 14px; right: 14px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bordo); }
.stato.ok { background: var(--verde); }
.stato.ko { background: var(--rosso); }
.istruzioni { background: #fff; border: 1px solid var(--bordo); border-radius: 14px; padding: 6px 20px 14px; margin-top: 18px; }
.istruzioni h2 { font-size: 1.05rem; }
.istruzioni li { margin: 6px 0; }
code { background: #eef2f6; padding: 1px 6px; border-radius: 4px; }
.nota, .piede { color: var(--testo-tenue); font-size: 0.85rem; }
.piede { margin-top: 22px; text-align: center; }

.titolo-sezione { font-size: 1rem; color: var(--testo-tenue); margin: 30px 0 4px; }
.tessera.in-arrivo { cursor: default; opacity: 0.6; box-shadow: none; }
.tessera.in-arrivo:hover { transform: none; box-shadow: none; }
.etichetta { position: absolute; top: 12px; right: 12px; font-size: 0.72rem; background: #eef2f6;
  color: var(--testo-tenue); padding: 2px 8px; border-radius: 10px; }