/*
  Mini App — foglio di stile.

  1. UNA STRUTTURA, TRE TEMI. Il tema lo sceglie il cliente (selettore in
     testa alla vetrina) e app.js lo scrive in data-theme sulla radice:
       oro    — nero e oro (predefinito, salvo WEBAPP_THEME)
       blu    — nero e blu
       bianco — bianco e nero
     Cambiano solo i token qui sotto: componenti e disposizione sono gli
     stessi, quindi un ritocco a un componente vale per tutti e tre.

  2. I NUMERI HANNO UNA VOCE PROPRIA. Testo in Sora, prezzi, importi,
     indirizzi, account e codici in IBM Plex Mono: il monospazio è la voce
     delle credenziali e allinea le cifre in colonna. Entrambi i font sono
     serviti dal nostro server (licenza OFL in fonts/): la CSP non ammette
     altre origini.

  3. L'ACCENTO SI USA POCO. Oro (o blu, o nero) solo dove si agisce o si
     guarda per primo: il prodotto in evidenza, il bottone principale, la
     scheda attiva, le icone delle sezioni. Tutto il resto sono superfici
     scure (o chiare) che si distinguono per un gradino di luce.

  Nessuno stile inline: la CSP del server lo vieta. Ciò che cambia da un
  elemento all'altro (stato di un ordine, tema) passa sempre da una classe.
*/

@font-face {
  font-family: "Sora";
  src: url("/static/fonts/sora-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/static/fonts/sora-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/static/fonts/sora-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/static/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/static/fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- temi --- */
/* oro: il predefinito, quindi sta sulla radice nuda — è quello che si vede
   anche prima che app.js abbia letto la scelta del cliente */
:root {
  color-scheme: dark;
  --bg: #0b0c10;
  --surface: #15171e;
  --surface-2: #1c1f28;   /* tessere e bottoni-icona dentro le superfici */
  --sunken: #0f1116;      /* campi incassati: account, indirizzo */
  --line: #232633;
  --line-strong: #2a2d38;
  --text: #f2f2f5;
  --hint: #9a9daa;
  --accent: #e9b949;
  --on-accent: #1a1405;
  --link: #e9b949;        /* l'accento usato come testo: deve reggere 4.5:1 */
  --accent-line: rgba(233, 185, 73, .35);

  --ok: #4fd18b;
  --ok-bg: #143427;
  --wait: #f29e6d;        /* in attesa, ultimi pezzi: arancio, mai l'oro */
  --wait-bg: #3a2616;
  --danger: #ff6b6b;
  --bad-bg: #3d1a20;
  --neutral-bg: #232633;

  --qr-bg: #ffffff;
  --shadow: 0 14px 40px rgba(0, 0, 0, .55);

  --sans: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: 16px;
  --radius: 18px;
  --nav-h: 64px;
}

:root[data-theme="blu"] {
  color-scheme: dark;
  --bg: #0a0c11;
  --surface: #13161f;
  --surface-2: #1a1e2a;
  --sunken: #0d1016;
  --line: #222838;
  --line-strong: #293041;
  --text: #f1f3f8;
  --hint: #97a0b5;
  /* pieno per i bottoni (bianco sopra: 4.5:1), più chiaro quando è testo */
  --accent: #2f6bff;
  --on-accent: #ffffff;
  --link: #7aa2ff;
  --accent-line: rgba(47, 107, 255, .45);

  --ok: #4fd18b;
  --ok-bg: #133126;
  --wait: #f5a65b;
  --wait-bg: #36260f;
  --danger: #ff6b6b;
  --bad-bg: #3b1a21;
  --neutral-bg: #222838;
}

:root[data-theme="bianco"] {
  color-scheme: light;
  --bg: #f4f4f5;
  --surface: #ffffff;
  --surface-2: #f0f0f2;
  --sunken: #f4f4f5;
  --line: #e6e6e9;
  --line-strong: #d9d9de;
  --text: #0a0a0a;
  --hint: #66666c;
  --accent: #0a0a0a;
  --on-accent: #ffffff;
  --link: #0a0a0a;
  --accent-line: #0a0a0a;

  --ok: #15803d;
  --ok-bg: #dcfce7;
  --wait: #b54708;
  --wait-bg: #fef0c7;
  --danger: #d92d20;
  --bad-bg: #fee4e2;
  --neutral-bg: #eeeef0;

  --shadow: 0 14px 40px rgba(10, 10, 10, .12);
}

/* ---------------------------------------------------------------- base --- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* `hidden` deve vincere su QUALSIASI display dichiarato altrove: senza questa
   riga una classe con display:flex batte il display:none del browser. */
[hidden] { display: none !important; }

html { background: var(--bg); }
html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
body.has-tabs { padding-bottom: calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); }
body.has-action { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

#app { max-width: 560px; margin: 0 auto; }

button { font: inherit; color: inherit; }
input { font-family: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.mono {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* SVG di linea, un solo spessore in tutta l'app */
.i {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ----------------------------------------------------------- testate --- */
/* etichetta in maiuscoletto: la voce del negozio in tutte le schermate */
.eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--link);
}
.eyebrow.mono { font-family: var(--mono); letter-spacing: .08em; }

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 20px var(--gutter) 14px;
}
.title {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.title-md { font-size: 23px; line-height: 1.25; }

/* testata del negozio: nome e selettori sopra, titolo e saldo sotto */
.shop-top { padding: 14px var(--gutter) 16px; }
.shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.shop-eyebrow {
  min-width: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--link);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-title {
  margin: 0;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.balance-pill .i { width: 18px; height: 18px; color: var(--link); }

/* Selettori di lingua e tema. Come l'ordinamento: un'etichetta compatta e,
   sopra, la <select> nativa trasparente, che sul telefono apre il selettore
   del sistema. Alti 36px e distanziati: si prendono col pollice. */
.prefs { display: flex; gap: 8px; flex: none; }
.pref {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
}
.pref select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* iOS: niente zoom al fuoco */
}
.pref .i { width: 12px; height: 12px; color: var(--hint); }
.pref:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.flag {
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line-strong);
}
/* campione del tema: il suo fondo e il suo accento, in diagonale */
.dot {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.dot-oro { background: linear-gradient(135deg, #0b0c10 50%, #e9b949 50%); }
.dot-blu { background: linear-gradient(135deg, #0a0c11 50%, #2f6bff 50%); }
.dot-bianco { background: linear-gradient(135deg, #ffffff 50%, #0a0a0a 50%); }

/* ------------------------------------------------------------ ricerca --- */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  margin: 0 var(--gutter) 18px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--hint);
}
.search .i { width: 20px; height: 20px; }
.search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 16px; /* sotto i 16px iOS ingrandisce la pagina al fuoco */
}
.search-input::placeholder { color: var(--hint); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-input:focus-visible { outline: none; }
.search:focus-within { border-color: var(--accent-line); }

/* ----------------------------------------------------- in evidenza --- */
.feature {
  margin: 0 var(--gutter) 22px;
  padding: 18px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-top { display: flex; gap: 14px; align-items: flex-start; }
.feature-text { flex: 1; min-width: 0; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; }
.feature-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.feature-meta { margin: 6px 0 0; font-size: 13px; color: var(--hint); }
.feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feature-price { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--link); font-variant-numeric: tabular-nums; }
.btn-accent {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* -------------------------------------------------- schede sezione --- */
.stabs {
  display: flex;
  gap: 22px;
  margin: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.stabs::-webkit-scrollbar { display: none; }
.stab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--hint);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.stab .i { width: 17px; height: 17px; }
.stab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.stab.on .i { color: var(--link); }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter) 2px;
  font-size: 13px;
  color: var(--hint);
}
/* Una <select> è larga quanto la sua opzione più lunga: si mostra
   un'etichetta normale e la select, trasparente, le sta sopra. */
.sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 32px;
  color: var(--link);
  position: relative;
  cursor: pointer;
}
.sort select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* iOS: niente zoom al fuoco */
}
.sort .i { width: 14px; height: 14px; }
.sort:focus-within { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------ gruppi ed elenchi --- */
.section-header {
  margin: 0;
  padding: 22px var(--gutter) 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hint);
}
.section {
  margin: 0 var(--gutter);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.section + .section { margin-top: 20px; }
.footnote {
  margin: 10px var(--gutter) 0;
  font-size: 13px;
  color: var(--hint);
  line-height: 1.5;
}
.prose { padding: 14px 16px; font-size: 15px; line-height: 1.6; }
.prose p { margin: 0; }
.prose p + p { margin-top: 10px; }

/* Riga di elenco. È un <button>: tastiera e screen reader funzionano senza
   ruoli aggiunti. Il separatore parte dopo la tessera. */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px 14px;
  border: 0;
  background: none;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  position: relative;
}
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 70px;
  right: 0;
  border-top: 1px solid var(--line);
}
.row.plain + .row.plain::before,
.row.plain + .row::before { left: 14px; }
.row.plain { cursor: default; }
button.row:active { background: var(--surface-2); }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-title {
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* nei prodotti il titolo va su due righe: «Account Steam — CS2 Prime» e
   «Account Steam — livello 10» si distinguono proprio dalla parte finale */
.row-title.wrap {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.row-sub {
  font-size: 13px;
  color: var(--hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-end {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}
.row-meta { font-size: 12px; color: var(--hint); }
.price { font-family: var(--mono); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }

/* coppia etichetta / valore dei dettagli di un ordine */
.kv { min-height: 50px; }
.kv-k { flex: none; color: var(--hint); font-size: 14px; }
.kv-v {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* esaurito: resta consultabile, ma non si finge in vendita */
.row.out .row-title,
.row.out .price { color: var(--hint); }
.row.out .tile { opacity: .45; }

.warn, .st-wait { color: var(--wait); }
.st-ok { color: var(--ok); }
.st-bad { color: var(--danger); }
.st-neutral { color: var(--hint); }

/* ------------------------------------------------------------ tessere --- */
.tile {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--link);
  font-weight: 600;
  font-size: 14px;
}
.tile .i { width: 22px; height: 22px; stroke-width: 1.7; }
.tile-lg {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  font-size: 22px;
}
.tile-lg .i { width: 34px; height: 34px; stroke-width: 1.5; }
.tile-mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0; }
.tile-emoji { font-size: 21px; font-weight: 400; }
.tile-lg.tile-emoji { font-size: 32px; }
.tile.ok { color: var(--ok); background: var(--ok-bg); }
.tile.wait { color: var(--wait); background: var(--wait-bg); }
.tile.bad { color: var(--danger); background: var(--bad-bg); }
.tile.neutral { color: var(--hint); }

/* ------------------------------------------------------- scheda prodotto --- */
.product-hero { padding: 22px var(--gutter) 6px; }
.product-hero .tile-lg { margin-bottom: 16px; }
.price-lg {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -.02em;
  color: var(--link);
  font-variant-numeric: tabular-nums;
}
.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
}
.stock .i { width: 17px; height: 17px; }
.stock.ok { color: var(--ok); }
.stock.warn { color: var(--wait); }
.stock.bad { color: var(--danger); }

.info-row { cursor: default; }
.info-row .i { color: var(--link); }
.info-row .row-sub { white-space: normal; }

/* --------------------------------------------------------- scelta metodo --- */
.choice[aria-disabled="true"] { cursor: default; }
.choice[aria-disabled="true"] .row-title,
.choice[aria-disabled="true"] .tile { opacity: .5; }
.check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: transparent;
}
.check .i { width: 15px; height: 15px; stroke-width: 2.6; }
.choice[aria-checked="true"] .check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.summary .row-title { white-space: normal; }

/* ------------------------------------------------------------- stati --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.pill .i { width: 15px; height: 15px; stroke-width: 2.2; }
.pill.ok { color: var(--ok); background: var(--ok-bg); }
.pill.wait { color: var(--wait); background: var(--wait-bg); }
.pill.bad { color: var(--danger); background: var(--bad-bg); }
.pill.neutral { color: var(--hint); background: var(--neutral-bg); }

/* Tre tappe di un pagamento: la risposta a «a che punto sono?» senza leggere */
.steps { list-style: none; margin: 0; padding: 16px 16px 6px; }
.step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding-bottom: 14px;
  position: relative;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 24px;
  bottom: 2px;
  border-left: 2px solid var(--line-strong);
}
.step.done:not(:last-child)::after { border-color: var(--ok); }
.step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--line-strong);
  background: var(--surface);
}
.step-dot .i { width: 13px; height: 13px; stroke-width: 3; }
.step.done .step-dot { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.step.now .step-dot { border-color: var(--accent); }
.step.now .step-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
.step-label { font-size: 15px; font-weight: 500; line-height: 22px; }
.step.todo .step-label { color: var(--hint); font-weight: 400; }
.step-sub { font-size: 13px; color: var(--hint); margin-top: 1px; }
@keyframes pulse { 50% { transform: scale(.55); opacity: .5; } }

/* ------------------------------------------------ documenti di denaro --- */
/* Il pagamento e il prodotto consegnato: la stessa cornice sottile
   d'accento del prodotto in evidenza, perché sono le cose che contano. */
.ticket {
  margin: 0 var(--gutter);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: 22px;
}
.ticket + .ticket, .ticket + .section, .section + .ticket { margin-top: 20px; }
.ticket-part { padding: 18px; }
.ticket-part.center { text-align: center; }
.ticket-cut { margin: 0 18px; border-top: 1px dashed var(--line-strong); }

.label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hint);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ticket-part.center .label { justify-content: center; }
.label .i { width: 15px; height: 15px; color: var(--link); }

/* il QR resta nero su bianco in ogni tema: la leggibilità non è negoziabile */
.qr {
  display: inline-block;
  padding: 12px;
  background: var(--qr-bg);
  border-radius: 16px;
  margin-bottom: 16px;
  line-height: 0;
}
.qr img { width: 196px; height: 196px; image-rendering: pixelated; }

.copyable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  padding: 2px 0;
}
.copyable .i { color: var(--link); width: 18px; height: 18px; }
.amount-big { font-family: var(--mono); font-weight: 600; font-size: 26px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.amount-unit { font-size: 15px; font-weight: 600; color: var(--hint); }
.net {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--hint);
}
.net .tile { width: 28px; height: 28px; border-radius: 8px; font-size: 9px; }

.address-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}
.address-box .mono { flex: 1; font-size: 14px; line-height: 1.55; word-break: break-all; }
.address-box .i { color: var(--link); margin-top: 1px; }

.timer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--hint);
}
.timer .i { width: 17px; height: 17px; }
.timer strong { color: var(--text); font-weight: 600; }
.timer.seen { color: var(--wait); }

/* l'account consegnato: un campo per riga, ognuno copiabile da solo */
.slip-head { padding-bottom: 12px; }
.slip-head .label { margin: 0; }
.creds { display: grid; gap: 10px; }
.cred {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 12px 8px 12px 14px;
  border-radius: 14px;
  background: var(--sunken);
  border: 1px solid var(--line);
}
.cred-k {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hint);
}
.cred-v {
  min-width: 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}
.cred-v.masked { letter-spacing: .14em; user-select: none; -webkit-user-select: none; }
.cred-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--link);
  cursor: pointer;
}
.icon-btn .i { width: 19px; height: 19px; }
button.icon-btn:active { background: var(--line-strong); }

/* il codice consegnato: il momento per cui esiste il negozio */
.key {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--sunken);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: .03em;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
  max-height: 40vh;
  overflow: auto;
}
.slip-note { margin: 12px 0 0; font-size: 13px; color: var(--hint); line-height: 1.5; }

/* ----------------------------------------------------------------- saldo --- */
.balance-card {
  margin: 0 var(--gutter);
  padding: 20px 18px;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: 20px;
}
.balance-amount {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -.03em;
  color: var(--link);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.balance-note { margin: 10px 0 0; font-size: 13px; color: var(--hint); line-height: 1.5; }

.amount-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 var(--gutter);
}
.amount-opt {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 14px 12px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
}
.amount-opt:active { border-color: var(--accent); }

.field { display: flex; align-items: center; gap: 8px; padding: 4px 16px; }
.field-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 20px;
  padding: 12px 0;
}
.field-input::placeholder { color: var(--hint); font-weight: 500; }
.field-suffix { color: var(--hint); font-weight: 600; }

/* -------------------------------------------------------------- bottoni --- */
.stack { display: grid; gap: 10px; margin: 18px var(--gutter) 0; }
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--link);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn .i { width: 19px; height: 19px; }
.btn-danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------- avvisi dentro la pagina --- */
.notice {
  display: flex;
  gap: 10px;
  margin: 0 var(--gutter);
  padding: 13px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.notice .i { width: 19px; height: 19px; margin-top: 1px; }
.notice.wait { background: var(--wait-bg); color: var(--wait); }
.notice.bad { background: var(--bad-bg); color: var(--danger); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice + .ticket, .notice + .section, .ticket + .notice,
.section + .notice { margin-top: 16px; }

/* --------------------------------------------------------- stato vuoto --- */
.empty { text-align: center; padding: 48px 32px 16px; }
.empty-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--link);
}
.empty-mark .i { width: 30px; height: 30px; stroke-width: 1.6; }
.empty h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.empty p { margin: 0 auto; max-width: 30ch; color: var(--hint); font-size: 14px; line-height: 1.5; }
.empty .btn { margin-top: 20px; }

/* -------------------------------------------------------- scheletro --- */
.skeleton { padding: 22px 0; }
.sk { background: var(--surface); border-radius: 10px; animation: shimmer 1.3s ease-in-out infinite; }
.sk-title { width: 55%; height: 30px; margin: 4px var(--gutter) 18px; }
.sk-search { height: 48px; margin: 0 var(--gutter) 22px; border-radius: 14px; }
.sk-section { margin: 0 var(--gutter); background: var(--surface); border-radius: var(--radius); padding: 4px 0; }
.sk-section .sk { background: var(--surface-2); }
.sk-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.sk-tile { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.sk-hero { width: 68px; height: 68px; border-radius: 18px; margin: 4px var(--gutter) 16px; }
.sk-lines { flex: 1; display: grid; gap: 8px; }
.sk-l1 { height: 14px; width: 60%; }
.sk-l2 { height: 12px; width: 38%; }
@keyframes shimmer { 50% { opacity: .5; } }

/* ------------------------------------------------------ barre fisse --- */
/* la barra delle sezioni è una pillola sospesa, non un bordo della pagina */
.tabs {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: 528px;
  height: var(--nav-h);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  color: var(--hint);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.tab .i { width: 22px; height: 22px; }
.tab.on { color: var(--link); font-weight: 600; }

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.btn-main {
  display: block;
  width: 100%;
  max-width: 528px;
  margin: 0 auto;
  min-height: 54px;
  border: 0;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn-main:disabled { opacity: .45; cursor: default; }
.btn-main.busy { opacity: .7; }

.topbar { padding: 8px 8px 0; }
.topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--link);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 8px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- toast --- */
.toast {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 16px 12px 13px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 14px;
  line-height: 1.4;
  animation: drop .22s ease-out;
}
.toast .i { width: 20px; height: 20px; }
.toast.ok .i { color: var(--ok); }
.toast.bad .i { color: var(--danger); }
.toast.info .i { color: var(--link); }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ------------------------------------------------------------- ingresso --- */
.enter-push > * { animation: rise .22s ease-out both; }
.enter-fade { animation: fade .16s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }

/* Chi ha chiesto meno movimento non deve vedere nulla che si muova da solo:
   restano tutti gli stati, solo fermi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Appoggio per il ripiego di copia quando la Clipboard API non c'è: deve
   essere selezionabile, quindi non display:none, ma fuori dallo schermo. */
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

@media (max-width: 360px) {
  .title { font-size: 23px; }
  .shop-title { font-size: 21px; }
  .balance-amount { font-size: 32px; }
  .qr img { width: 172px; height: 172px; }
  .stabs { gap: 18px; }
}