/* ════════════════════════════════════════════════════════════════
   glifixapp.css — Sistema di stile dell'app PWA Glifix
   ════════════════════════════════════════════════════════════════
   NON dipende da glifix.css (quello resta per presentazioni/manuali).
   Deriva dal mockup Talo (mockup.css) per struttura/variabili, esteso
   con 8 set colore selezionabili a runtime tramite [data-preset] su
   <html>, ciascuno con variante dark (default) e light
   ([data-theme="light"]), oltre al toggle dark/light già esistente.

   Variabili semantiche (uguali in ogni preset):
     --bg --surface --card --border
     --accent --accent2
     --green --red --amber   (stati: successo / errore / avviso)
     --ink --ink-dim --ink-faint

   Set disponibili: glifix (default), slate, midnight, forest, ember,
   arctic, obsidian, ocean.
   ════════════════════════════════════════════════════════════════ */

/* ── Reset & ottimizzazioni touch (da mockup.css) ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
button, [onclick], .btn-primary, .btn-secondary, .nav-btn, .gx-row--link,
.gx-lang-btn, .gx-toggle, .preset-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select {
  font-size: 16px !important; /* min 16px: previene zoom automatico Safari */
  -webkit-appearance: none;
}
/* Il reset sopra è pensato per i campi testo (uniforma l'aspetto su
   Safari/iOS) — ma applicato senza distinzione anche a checkbox/radio
   li rende invisibili (nessun bordo/quadrato, solo un'area cliccabile
   fantasma). Qui si ripristina esplicitamente l'aspetto nativo solo
   per questi due tipi. */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: 18px; height: 18px;
}
html { height: 100%; height: -webkit-fill-available; }
body {
  height: 100%; height: 100dvh; min-height: -webkit-fill-available;
  font-family: 'Nunito Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ══════════════════════════════════════════════
   SET COLORE — dark (default) + light per preset
   ══════════════════════════════════════════════ */

/* -- Stati semantici: condivisi tra tutti i preset -- */
:root, [data-preset] {
  --green: #34D399; --red: #F87171; --amber: #FBBF24;
}
[data-theme="light"] {
  --green: #2d8a5e; --red: #c05050; --amber: #c09a2a;
}

/* -- 1. glifix (default) -- */
html, [data-preset="glifix"] {
  --bg:#0d1a2d; --surface:#132238; --card:#182d45; --border:#22375a;
  --accent:#4d9fff; --accent2:#7ab8ff;
  --ink:#e8f0fe; --ink-dim:#90aecb; --ink-faint:#4a6580;
}
[data-preset="glifix"][data-theme="light"], html[data-theme="light"] {
  --bg:#f0f4fa; --surface:#e6ecf5; --card:#ffffff; --border:#c0c8d4;
  --accent:#2a5a9a; --accent2:#3a6ab0;
  --ink:#10202f; --ink-dim:#4a5a6a; --ink-faint:#8a9aaa;
}

/* -- 2. slate -- */
[data-preset="slate"] {
  --bg:#131720; --surface:#1b202b; --card:#232936; --border:#2e3646;
  --accent:#5a7ab0; --accent2:#7a97c4;
  --ink:#e4e8ee; --ink-dim:#97a3b8; --ink-faint:#4d5768;
}
[data-preset="slate"][data-theme="light"] {
  --bg:#e8ecf0; --surface:#f2f4f7; --card:#ffffff; --border:#d3d9e0;
  --accent:#3d5a8a; --accent2:#5a7ab0;
  --ink:#1a2535; --ink-dim:#3a4f6a; --ink-faint:#7a8fa8;
}

/* -- 3. midnight -- */
[data-preset="midnight"] {
  --bg:#09090f; --surface:#111118; --card:#1a1a24; --border:#262637;
  --accent:#a78bfa; --accent2:#c4b0fd;
  --ink:#f0eeff; --ink-dim:#9d90cc; --ink-faint:#4a4468;
}
[data-preset="midnight"][data-theme="light"] {
  --bg:#f2f0fb; --surface:#e9e5f8; --card:#ffffff; --border:#d6cdf0;
  --accent:#7a5cc4; --accent2:#9678d8;
  --ink:#251d3a; --ink-dim:#574a7a; --ink-faint:#9689b8;
}

/* -- 4. forest -- */
[data-preset="forest"] {
  --bg:#0d1f0f; --surface:#142a16; --card:#1a361c; --border:#244a27;
  --accent:#4caf72; --accent2:#7ecf96;
  --ink:#e0f0e4; --ink-dim:#88b894; --ink-faint:#3d5c42;
}
[data-preset="forest"][data-theme="light"] {
  --bg:#eef7ef; --surface:#e2f0e4; --card:#ffffff; --border:#c6e0ca;
  --accent:#2f8a54; --accent2:#4caf72;
  --ink:#142a17; --ink-dim:#3d6b48; --ink-faint:#7fa88a;
}

/* -- 5. ember -- */
[data-preset="ember"] {
  --bg:#1a0a00; --surface:#2a1200; --card:#3a1c00; --border:#522a08;
  --accent:#ff6b35; --accent2:#ff9a6b;
  --ink:#fff0e8; --ink-dim:#c89080; --ink-faint:#5c3428;
}
[data-preset="ember"][data-theme="light"] {
  --bg:#fff3ec; --surface:#ffe6d8; --card:#ffffff; --border:#f0c2a4;
  --accent:#d4531c; --accent2:#ff6b35;
  --ink:#2a1508; --ink-dim:#7a4a30; --ink-faint:#b88a70;
}

/* -- 6. arctic -- */
[data-preset="arctic"] {
  --bg:#0c1a26; --surface:#14212f; --card:#1c2c3d; --border:#294053;
  --accent:#33a3e0; --accent2:#66c2ee;
  --ink:#eaf4fb; --ink-dim:#8fb4c9; --ink-faint:#3f5c6e;
}
[data-preset="arctic"][data-theme="light"] {
  --bg:#f0f4f8; --surface:#ffffff; --card:#e8f0f8; --border:#c8d8e6;
  --accent:#0077cc; --accent2:#4da6ff;
  --ink:#0a1a2a; --ink-dim:#3a5a7a; --ink-faint:#8aaccb;
}

/* -- 7. obsidian -- */
[data-preset="obsidian"] {
  --bg:#0a0a0a; --surface:#141414; --card:#1e1e1e; --border:#2c2c2c;
  --accent:#9b59b6; --accent2:#c39bd3;
  --ink:#f0f0f0; --ink-dim:#a0a0a0; --ink-faint:#4a4a4a;
}
[data-preset="obsidian"][data-theme="light"] {
  --bg:#f4f0f6; --surface:#ece5f0; --card:#ffffff; --border:#d6c8e0;
  --accent:#7d3f96; --accent2:#9b59b6;
  --ink:#1e1522; --ink-dim:#5a4a64; --ink-faint:#9686a0;
}

/* -- 8. ocean -- */
[data-preset="ocean"] {
  --bg:#001830; --surface:#002448; --card:#003060; --border:#114878;
  --accent:#00bcd4; --accent2:#4dd8e8;
  --ink:#e0f8ff; --ink-dim:#80c8d8; --ink-faint:#235c6c;
}
[data-preset="ocean"][data-theme="light"] {
  --bg:#eaf6fa; --surface:#dcf0f5; --card:#ffffff; --border:#b8dde8;
  --accent:#007a94; --accent2:#00bcd4;
  --ink:#052430; --ink-dim:#3a6b78; --ink-faint:#7fb0bc;
}

/* ── Derivate calcolate una volta, riusate ovunque nell'app ── */
html, body {
  --grad: linear-gradient(135deg, var(--accent), var(--accent2));
  --accent-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-card: 0 6px 20px rgba(0,0,0,.18);
  --shadow-glow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
  --card-hover: color-mix(in srgb, var(--card) 92%, var(--ink) 8%);
  --transition: all .18s ease;
  --nav-h: 56px;
}

body { background: var(--bg); color: var(--ink); transition: background .2s, color .2s; }

/* ══════════════════════════════════════════════
   LAYOUT APP
   ══════════════════════════════════════════════ */
#app {
  height: 100%; height: 100dvh;
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--bg);
  position: relative;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* -- Nav superiore -- */
.gx-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px; flex-shrink: 0;
}
.gx-nav__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.gx-nav__brand { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--ink); }

/* -- Toggle dark/light -- */
.gx-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.gx-toggle__label { font-size: .7rem; color: var(--ink-dim); font-weight: 600; }
.gx-toggle__switch {
  width: 40px; height: 22px; border-radius: 20px;
  background: var(--surface); border: 1.5px solid var(--border);
  position: relative; transition: var(--transition);
}
.gx-toggle__knob {
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); transition: left .18s ease;
}
[data-theme="light"] .gx-toggle__knob { left: 20px; }

/* -- Contenuto schermata -- */
#screen {
  flex: 1; overflow-y: auto;
  /* padding-top maggiorato per lasciare spazio al toggle tema fisso
     (#theme-toggle-fixed, in alto a destra su tutte le schermate) senza
     sovrapporsi ad avatar/loghi che iniziano subito in cima. */
  padding: 60px 20px calc(var(--nav-h) + 20px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom, 0px));
}
#app, #app * { scrollbar-width: none; -ms-overflow-style: none; }
#app ::-webkit-scrollbar, #app::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* -- Bottom nav -- */
.bottom-nav {
  /* Posizioni fisse: Home a sinistra, Profilo a destra anche in RTL. */
  direction: ltr;
  display: flex; flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-btn {
  flex: 1; background: none; border: none; border-top: 2px solid transparent;
  padding: 10px 4px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ink-dim); font-size: .95rem;
  transition: var(--transition);
}
.nav-btn.active { color: var(--accent); border-top-color: var(--accent); }
.nav-label { font-size: 1.15rem; }

/* -- Login: form nativo (POST /web/login), footer logo+versione -- */
.gx-login { padding-top: 10vh; }
.gx-login-footer {
  margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: .7;
}
.gx-login-footer__version { font-size: .72rem; color: var(--ink-faint); }
.gx-settings-version { text-align: center; font-size: .72rem; color: var(--ink-faint); margin: 24px 0 12px; }
.gx-settings-module-versions { text-align: center; margin: 0 0 16px; }
.gx-link-btn {
  background: none; border: none; color: var(--ink-dim); font-size: .78rem;
  cursor: pointer; padding: 4px 8px; text-decoration: underline;
}
.gx-module-versions-list {
  max-width: 320px; margin: 8px auto 0; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.gx-module-version-row {
  display: flex; justify-content: space-between; padding: 8px 12px;
  font-size: .78rem; color: var(--ink-dim);
  border-bottom: 1px solid var(--border);
}
.gx-module-version-row:last-child { border-bottom: none; }
.gx-module-version-row__v { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.gx-install-btn {
  font-size: .78rem; color: var(--ink-dim); background: none;
  border: 1px solid var(--ink-faint); border-radius: 999px;
  padding: 4px 14px; cursor: pointer; opacity: .85;
  display: flex; align-items: center; gap: 6px;
  transition: var(--transition);
}
.gx-install-btn:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
.gx-install-btn[hidden] { display: none; }
.gx-settings-install { display: flex; justify-content: center; margin: 4px 0 0; }
.gx-install-btn--highlight {
  opacity: 1; border-color: var(--accent); color: var(--accent);
  animation: gx-install-pulse 1.6s ease-in-out 2;
}
@keyframes gx-install-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 90,140,255), .35); }
  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb, 90,140,255), 0); }
}
.gx-bio-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* -- Home: wrapper flex-column dedicato (vedi wrapHome() in ui.js) --
   min-height:100% dà al footer uno spazio verticale su cui ancorarsi;
   su contenuti più alti dello schermo semplicemente scorre (grazie a
   overflow-y:auto sul padre #screen), non esce mai dalla viewport. -- */
.gx-home-scroll { display: flex; flex-direction: column; min-height: 100%; }

/* -- Home: header con icona brand a sinistra e logo esteso al centro
   (Impostazioni → AppPWA → Branding). Il selettore Dark/Light resta
   quello fisso globale in alto a destra (#theme-toggle-fixed), non
   duplicato qui — questo header occupa la fascia sopra la griglia
   moduli, non sovrapposta al toggle. -- */
.gx-home-header {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 6px 46px 22px;
}
.gx-home-header__icon {
  position: absolute; left: 0; top: 6px;
  width: 48px; height: 48px; border-radius: 12px; object-fit: contain;
}
.gx-home-header__logo { max-height: 36px; max-width: 200px; object-fit: contain; }

/* -- Consenso privacy (GDPR/nLPD) nel form di registrazione -- */
.gx-privacy-consent { margin: 14px 0; }
.gx-privacy-consent__row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .82rem; color: var(--ink-dim); cursor: pointer;
}
.gx-privacy-consent__row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.gx-privacy-consent__row a { color: var(--accent); text-decoration: underline; }

/* -- Informativa privacy: overlay a schermo intero (stesso pattern di
   #selfie-modal), non un box che si espande dentro il form -- */
#privacy-modal {
  display: none;
  position: fixed; inset: 0; z-index: 550;
  background: var(--bg);
  flex-direction: column;
}
#privacy-modal.open { display: flex; }
.gx-privacy-modal__header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px calc(12px + env(safe-area-inset-top, 0px));
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.gx-privacy-modal__title { font-weight: 700; font-size: 1.05rem; color: var(--ink); flex: 1; }
.gx-privacy-modal__close {
  background: var(--surface); border: 1px solid var(--border); border-radius: 50%;
  width: 34px; height: 34px; font-size: 1rem; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0;
}
.gx-privacy-modal__tabs {
  display: flex; gap: 8px; padding: 10px 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.gx-privacy-modal__tab {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-dim); font-size: .78rem;
  cursor: pointer; font-weight: 600;
}
.gx-privacy-modal__tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gx-privacy-modal__body {
  flex: 1; overflow-y: auto; padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  color: var(--ink); font-size: .88rem; line-height: 1.6;
}
.gx-hidden { display: none !important; }

/* -- Login: struttura esatta del mockup Talo -- */
.auth-wrap { flex: 1; padding: 8px 0 24px; display: flex; flex-direction: column; }
.auth-logo { text-align: center; margin-bottom: 16px; }
.auth-title { font-size: 1.7rem; font-weight: 700; text-align: center; margin-bottom: 4px; color: var(--ink); }
.auth-sub { color: var(--ink-dim); font-size: .8rem; text-align: center; margin-bottom: 20px; }
.auth-secondary-row { display: flex; gap: 8px; margin-top: 4px; }
.auth-secondary-row button {
  flex: 1; padding: 10px; border-radius: 14px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--ink-dim); font-size: .8rem; cursor: pointer; font-weight: 600;
}
.auth-footer { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 20px; }
.auth-link { color: var(--accent); font-size: .75rem; cursor: pointer; font-weight: 500; }

/* -- Tasto tema: solo icona, nessun testo. Fisso in alto a destra,
   sopra #app (position:relative) — visibile su tutte le schermate,
   non più solo sulla home (vedi renderThemeToggleFixed() in ui.js). -- */
.gx-theme-icon-btn { font-size: 1.2rem; }
#theme-toggle-fixed {
  position: absolute; top: 14px; right: 16px; z-index: 20;
}
#theme-toggle-fixed .gx-theme-icon-btn {
  background: var(--surface); border: 1px solid var(--border); border-radius: 50%;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* -- Icona brand personalizzata, solo sulla schermata Profilo/
   Impostazioni: in alto a sinistra, lato opposto rispetto al toggle
   tema (sempre in alto a destra, vedi #theme-toggle-fixed sopra).
   Nascosta via JS (onload/onerror in ui.js) quando non è configurata
   alcuna icona, così non appare mai come riquadro vuoto/scuro. -- */
.gx-settings-brand-icon {
  position: fixed; top: 14px; left: 16px; z-index: 20;
}
.gx-settings-brand-icon img {
  width: 36px; height: 36px; border-radius: 10px; object-fit: contain;
}

/* ══════════════════════════════════════════════
   COMPONENTI DI BASE (form, bottoni, card, toast)
   ══════════════════════════════════════════════ */
.wz-field, .gx-form .wz-field { margin-bottom: 14px; }
.inp-label, .wz-field label {
  font-size: .65rem; font-weight: 600; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 4px; display: block;
}
.inp, .wz-field input, .wz-field select {
  width: 100%; padding: 11px 14px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 12px; color: var(--ink);
  font-size: 16px; outline: none; margin-bottom: 10px;
}
.inp:focus, .wz-field input:focus { border-color: var(--accent); }
.inp:disabled { opacity: .6; cursor: not-allowed; }
.inp.error { border-color: var(--red); }
.inp-error { font-size: .72rem; color: var(--red); margin: -6px 0 8px 2px; }

/* -- Campo password con occhiello mostra/nascondi (vedi pwdField() in
   ui.js) -- il wrapper eredita margin-bottom dall'.inp interno, quindi
   qui è azzerato sul wrapper per non raddoppiare lo spazio. -- */
.gx-pwd-wrap { position: relative; }
.gx-pwd-wrap .inp { padding-right: 44px; }
.gx-pwd-toggle {
  position: absolute; top: 0; right: 4px; height: 100%;
  width: 36px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; font-size: 1.05rem;
  opacity: .65; padding: 0;
}
.gx-pwd-toggle:hover { opacity: 1; }

.btn-primary, .wz-btn-primary {
  width: 100%; padding: 13px;
  background: var(--grad); border: none; border-radius: 14px;
  color: #ffffff; font-weight: 700; font-size: .95rem;
  cursor: pointer; margin: 6px 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:disabled, .wz-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary, .wz-btn-secondary {
  width: 100%; padding: 11px; border-radius: 14px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--ink-dim); font-size: .85rem; cursor: pointer;
}

#toast {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border);
  color: var(--ink); padding: 10px 20px; border-radius: 30px;
  font-size: .85rem; box-shadow: var(--shadow-card);
  z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .2s;
  max-width: 90%; text-align: center;
}
#toast.show { opacity: 1; }
#toast.error { border-color: var(--red); color: var(--red); }
#toast.success { border-color: var(--green); color: var(--green); }

.gx-update-banner {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  max-width: 616px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--accent);
  color: var(--ink); padding: 10px 14px; border-radius: 12px;
  box-shadow: var(--shadow-glow); z-index: 1001;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .85rem;
}
.gx-update-banner[hidden] { display: none; }
.gx-update-banner button {
  background: var(--grad); border: none; border-radius: 8px;
  color: #fff; font-weight: 700; font-size: .8rem;
  padding: 7px 14px; cursor: pointer; flex-shrink: 0;
}
.gx-ios-install-hint span { line-height: 1.4; }
.gx-ios-install-hint button {
  background: transparent; color: var(--ink-dim); font-weight: 400;
  font-size: 1rem; padding: 0 4px;
}

/* ══════════════════════════════════════════════
   CARD / SEZIONI (profilo, impostazioni)
   ══════════════════════════════════════════════ */
.gx-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; margin-bottom: 16px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.gx-section__title {
  padding: 12px 16px 4px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint);
}
.gx-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border);
  font-size: .92rem; color: var(--ink);
}
.gx-row:last-child { border-bottom: none; }
.gx-row__label { display: flex; align-items: center; gap: 10px; }
.gx-row__value { color: var(--ink-dim); font-size: .85rem; }
.gx-row--link { cursor: pointer; }
.gx-row--link:hover { background: var(--card-hover); }
.gx-notif-help {
  padding: 4px 4px 14px; font-size: .85rem; color: var(--ink-dim);
  line-height: 1.5;
}
.gx-notif-help p { margin: 0 0 8px; }
.gx-notif-help p:last-child { margin-bottom: 0; }
.gx-notif-help[hidden] { display: none; }

.gx-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 12px auto 8px;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.6rem;
  color: #fff; background: var(--grad); box-shadow: var(--shadow-glow);
  overflow: hidden;
  position: relative; cursor: pointer;
}
.gx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gx-avatar__cam {
  position: absolute; bottom: -2px; right: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent, #3ecfcf); border: 2px solid var(--bg, #0d1a2d);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; line-height: 1;
}

/* ── Selfie/avatar camera modal ─────────────────────────────────────── */
#selfie-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 500; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 20px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#selfie-modal.open { display: flex; }
#selfie-video { width: min(320px, 90vw); border-radius: 16px; background: #000; }
#selfie-canvas { display: none; }
.selfie-btns { display: flex; gap: 12px; }
.btn-selfie {
  background: var(--accent, #3ecfcf); color: #0B1120; border: none;
  border-radius: 28px; padding: 11px 28px; font-weight: 700; cursor: pointer;
  font-size: 1.1rem;
}
.btn-selfie-cancel {
  background: transparent; color: var(--ink-dim); border: 1px solid var(--border);
  border-radius: 28px; padding: 11px 20px; cursor: pointer; font-size: 1rem;
}
.gx-selfie-filelink { font-size: .72rem; color: var(--ink-dim); }
.gx-selfie-filelink label { cursor: pointer; text-decoration: underline; }
.gx-profile-head { text-align: center; margin-bottom: 18px; }
.gx-profile-name { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.gx-profile-email { font-size: .85rem; color: var(--ink-faint); }

.gx-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 64px 16px; color: var(--ink-dim);
}
.gx-empty__icon { font-size: 2.4rem; opacity: .7; }
.gx-empty__title { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.gx-empty__body { font-size: .9rem; max-width: 320px; }

.gx-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 10px 16px 16px; }
.gx-lang-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-dim); cursor: pointer;
  font-family: 'Nunito', sans-serif; font-weight: 600; font-size: .72rem;
  transition: var(--transition);
}
.gx-lang-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.gx-lang-btn__flag { font-size: 1.3rem; }

.gx-guest-note {
  margin: 8px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--surface); border: 1px dashed var(--border);
  color: var(--ink-dim); font-size: .85rem; line-height: 1.5;
}

/* ══════════════════════════════════════════════
   SELETTORE SET COLORE (configuratore leggero,
   schermata Impostazioni — vedi ui.js)
   ══════════════════════════════════════════════ */
.gx-preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 16px 16px; }
.gx-preset-btn {
  border: 2px solid var(--border); border-radius: 10px; padding: 6px;
  cursor: pointer; background: var(--surface); display: flex; flex-direction: column;
  align-items: center; gap: 5px; transition: var(--transition);
}
.gx-preset-btn:hover { border-color: var(--ink-faint); }
.gx-preset-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.gx-preset-swatch { width: 100%; height: 22px; border-radius: 5px; overflow: hidden; display: flex; }
.gx-preset-swatch span { flex: 1; }
.gx-preset-label { font-size: .62rem; font-weight: 600; color: var(--ink-dim); text-transform: capitalize; }
.gx-preset-btn.active .gx-preset-label { color: var(--accent); }

/* ══════════════════════════════════════════════
   TASTI MODULO APPLICATIVO (griglia Home) — classe
   dedicata, indipendente dal selettore set colore
   sopra: più grandi, icona in alto a sinistra e
   più grande, testo sotto.
   ══════════════════════════════════════════════ */
.gx-module-btn {
  border: 2px solid var(--border); border-radius: 14px; padding: 16px 12px 14px;
  cursor: pointer; background: var(--surface); display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start; gap: 12px; transition: var(--transition);
  min-height: 110px; margin-top: 18px;
}
.gx-module-btn:hover { border-color: var(--ink-faint); }
.gx-module-btn__icon { font-size: 3.2rem; line-height: 1; }
.gx-module-btn__label { font-size: .82rem; font-weight: 600; color: var(--ink); text-align: left; }

.gx-back-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink); font-size: 1.1rem; cursor: pointer;
  margin-bottom: 14px;
}

@media (max-width: 480px) {
  #screen { padding: 14px 14px calc(var(--nav-h) + 14px + env(safe-area-inset-bottom, 0px)); }
}

/* ══════════════════════════════════════════════
   SECONDO SCHERMO — /talo/display (display.js)
   Stessa SPA dell'app: eredita preset e dark/light (variabili --bg, --ink…).
   ══════════════════════════════════════════════ */
body.gx-display .bottom-nav { display: none; }
body.gx-display #screen { padding-bottom: 20px; }
.gx-dsp-wrap { min-height: 100%; display: flex; flex-direction: column; }
.gx-dsp-stage {
  flex: 1; min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3vmin; text-align: center;
}
.gx-dsp-welcome { font-size: clamp(2rem, 10vmin, 7rem); font-weight: 800; color: var(--ink); }
.gx-dsp-note { font-size: clamp(1rem, 4vmin, 2rem); color: var(--ink-dim); }

/* QR con testo centrato sopra. Il PNG ha già il logo al centro e correzione
   errori H: il riquadro resta compatto (max 44% del lato) per non coprire
   troppi moduli. Il fondo del QR è SEMPRE bianco, anche in tema scuro. */
.gx-dsp-qr { position: relative; width: var(--qr); height: var(--qr); background: #fff;
  border-radius: 3vmin; box-shadow: 0 8px 40px rgba(0,0,0,.35); }
.gx-dsp-qr img { width: 100%; height: 100%; display: block; border-radius: 3vmin; }
.gx-dsp-qr__amt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 44%; background: #fff; color: #0B1120; border-radius: .4em; padding: .16em .36em;
  text-align: center; font-weight: 800; line-height: 1.05; white-space: nowrap;
  box-shadow: 0 0 0 .14em #fff; }
.gx-dsp-qr__amt small { display: block; font-size: .5em; font-weight: 700; letter-spacing: .05em; }
.gx-dsp-pill { font-size: clamp(1rem, 4.2vmin, 2rem); font-weight: 700; color: #0B1120;
  background: var(--amber); padding: .35em 1em; border-radius: 999px; }

/* Esito: stessa forma per conferma (verde) e annullo/scaduto (rosso). */
.gx-dsp-ico { width: min(30vmin, 240px); height: min(30vmin, 240px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: min(15vmin, 120px); }
.gx-dsp-ico.ok { background: rgba(52,211,153,.15); border: 3px solid rgba(52,211,153,.35); }
.gx-dsp-ico.ko { background: rgba(248,113,113,.15); border: 3px solid rgba(248,113,113,.35); }
.gx-dsp-title { font-size: clamp(1.8rem, 8vmin, 5rem); font-weight: 800; color: var(--ink); }
.gx-dsp-bigtext { font-size: clamp(2rem, 10vmin, 6rem); font-weight: 800; color: var(--ink); }
.gx-dsp-bigtext.ok { color: var(--green); }

.gx-dsp-diag { position: fixed; left: 12px; bottom: 10px; right: 70px; font-size: 12px;
  color: var(--red); display: none; word-break: break-word; }
.gx-dsp-diag.on { display: block; }

/* Pulsante sessione: piccolo e tenue ma sempre visibile; uscire richiede
   la password (o la biometria) dell'utente loggato. */
.gx-dsp-lock { position: fixed; right: 10px; bottom: 10px; z-index: 30; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 20px;
  opacity: .35; cursor: pointer; }
.gx-dsp-lock:hover, .gx-dsp-lock:focus { opacity: .9; }
.gx-dsp-panel { position: fixed; inset: 0; z-index: 60; display: none; align-items: center;
  justify-content: center; background: rgba(0,0,0,.6); }
.gx-dsp-panel.on { display: flex; }
.gx-dsp-panel__box { width: min(90vw, 420px); background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; text-align: left; color: var(--ink); }
.gx-dsp-panel__box h2 { margin: 0 0 14px; font-size: 1.2rem; }
.gx-dsp-row { margin: 6px 0; font-size: .95rem; color: var(--ink-dim); }
.gx-dsp-row b { color: var(--ink); }
.gx-dsp-btns { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

/* Home and overflow tiles fit all four columns on narrow phones. */
.gx-home-scroll > .gx-preset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 0; }
.gx-home-scroll > .gx-preset-grid .gx-module-btn { min-width: 0; }
.gx-home-scroll > .gx-preset-grid .gx-module-btn__label { max-width: 100%; overflow-wrap: anywhere; }

/* Profile spacing is scoped here so module screens keep their own layout. */
.gx-profile .gx-section__title { text-align: center; padding: 16px 16px 12px; color: var(--ink-dim); font-size: .8rem; }
.gx-profile .gx-section > .gx-form, .gx-profile .gx-module-profile { padding: 16px; }
.gx-profile .gx-form { display: grid; gap: 14px; }
.gx-profile .gx-form .wz-field { margin: 0; min-width: 0; }
.gx-profile .wz-field label { margin-bottom: 8px; line-height: 1.5; }
.gx-profile .wz-field input, .gx-profile .wz-field select { margin-bottom: 0; }
.gx-profile .gx-form button { min-height: 44px; max-width: 100%; }
.gx-profile input[type=range] { width: 100%; min-height: 32px; padding: 0; margin-block: 8px; }
.gx-profile .gx-module-profile p { line-height: 1.6; margin: 0 0 12px; overflow-wrap: anywhere; }
.gx-profile .gx-module-profile p:last-child { margin-bottom: 0; }
.gx-profile .gx-row__label { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.gx-profile .gx-row__value { overflow-wrap: anywhere; }
.gx-profile .gx-preset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 4px; }
.gx-profile .gx-preset-btn { min-width: 0; }
.gx-profile .gx-notif-help { padding: 12px 16px; }

/* Keep collapsed profile forms hidden despite the profile grid layout. */
.gx-profile .gx-form[hidden] { display: none !important; }

/* Bound the scrolling flex child to the available app viewport. */
#app { min-height:0; overflow:hidden; }
#screen { min-height:0; min-width:0; touch-action:pan-y; }

/* Home shortcuts: compact, in normal flow below the logo. Never fixed over
   Wallet transactions. Two equal columns even on narrow mobile screens. */
.gx-home-quick-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 8px 0 16px;
}
.gx-home-quick-actions--single { grid-template-columns: minmax(0, 1fr); }
.gx-home-quick-actions .gx-module-btn {
  flex-direction: row; align-items: center; justify-content: center;
  min-height: 56px; min-width: 0; margin: 0; padding: 10px 12px; gap: 8px;
}
.gx-home-quick-actions .gx-module-btn__icon { font-size: 1.4rem; flex-shrink: 0; }
.gx-home-quick-actions .gx-module-btn__label {
  min-width: 0; font-size: .9rem; text-align: center; overflow-wrap: anywhere;
}

.gx-registration-notice{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin:12px 0;overflow-wrap:anywhere}.gx-registration-notice p{margin:0 0 10px}

/* Camera interval uses the existing integer bounds and explicit Save action. */
.gx-camera-range-value{display:flex;justify-content:center;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.gx-camera-range-value output{font-size:1.15rem}
.wz-field input.gx-camera-range{width:100%;min-height:44px;padding:0;margin:4px 0;border:0;background:transparent;accent-color:var(--accent);cursor:pointer}
.wz-field input.gx-camera-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.gx-camera-range-limits{display:flex;justify-content:space-between;color:var(--ink-dim);font-size:.85rem;font-variant-numeric:tabular-nums}
/* Core navigation belongs to Shell, independently of Wallet and content length. */
#app > .bottom-nav{position:fixed;bottom:0;left:0;right:0;max-width:640px;margin-inline:auto;min-height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));z-index:200}
.gx-personal-module{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 0;cursor:pointer}
.gx-personal-module input[type=checkbox]{flex:none;width:22px;height:22px;accent-color:var(--accent)}