/* ═══════════════════════════════════════════════════════════════
   EventPix — Design system "Notte di festa"
   Palette: inchiostro violaceo, carta calda, oro champagne, rosa festa
   Type:    Fraunces (display) + Sora (testo)
   Firma:   le foto vivono come polaroid inclinate con nastro adesivo
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:    #1B1730;
  --ink-2:  #2A2347;
  --paper:  #FAF7F0;
  --paper-2:#F1EBDE;
  --gold:   #E4B95B;
  --gold-2: #C89B3C;
  --rosa:   #E96A8D;
  --muto:   #6E678A;
  --ok:     #3BA776;
  --err:    #D4544F;
  --r: 14px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Sora', system-ui, sans-serif;
  --ombra: 0 10px 30px rgba(27,23,48,.14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: 1.25rem; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ── Pulsanti ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.btn:active { transform: scale(.97); }
.btn-oro { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--ink); box-shadow: 0 6px 20px rgba(228,185,91,.4); }
.btn-oro:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(228,185,91,.5); }
.btn-scuro { background: var(--ink); color: var(--paper); }
.btn-scuro:hover { background: var(--ink-2); }
.btn-linea { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-mini { padding: 8px 16px; font-size: .85rem; }
.btn:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Hero notte di festa ──────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 70% -10%, var(--ink-2), var(--ink));
  color: var(--paper); padding: 90px 0 110px; text-align: center;
}
.hero .eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; font-weight: 600; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero p.sotto { max-width: 560px; margin: 18px auto 30px; color: #CFC9E4; font-size: 1.1rem; }

/* coriandoli: puntini luminosi che fluttuano (solo CSS) */
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti span {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  opacity: .8; animation: fluttua 9s ease-in-out infinite;
}
@keyframes fluttua {
  0%,100% { transform: translateY(0) rotate(0); opacity: .5; }
  50%     { transform: translateY(-26px) rotate(180deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti span, .polaroid, .fade-in { animation: none !important; transition: none !important; }
}

/* ── Firma: polaroid ──────────────────────────────────────── */
.polaroid {
  background: #fff; padding: 10px 10px 34px; border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  position: relative; transform: rotate(var(--rot, -3deg));
  transition: transform .25s;
}
.polaroid:hover { transform: rotate(0) scale(1.04); z-index: 3; }
.polaroid::before { /* nastro adesivo */
  content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 74px; height: 24px; background: rgba(228,185,91,.55); border-radius: 2px;
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.polaroid .eti { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: .85rem; color: #6b6b6b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }

.hero-polaroids { display: flex; justify-content: center; gap: clamp(6px, 3vw, 28px); margin-top: 48px; }
.hero-polaroids .polaroid { width: clamp(120px, 22vw, 210px); }

/* ── Sezioni landing ──────────────────────────────────────── */
.sezione { padding: 76px 0; }
.sezione.alt { background: var(--paper-2); }
.kicker { color: var(--rosa); text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; font-weight: 700; }
.griglia { display: grid; gap: 26px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: #fff; border-radius: var(--r); padding: 28px; box-shadow: var(--ombra);
}
.card .icona { font-size: 2rem; }
.passi { counter-reset: passo; }
.passo { position: relative; padding-left: 74px; margin-bottom: 40px; }
.passo::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--gold);
  font-family: var(--font-display); font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}

/* ── Form ─────────────────────────────────────────────────── */
.form-card { background: #fff; border-radius: var(--r); padding: 34px; box-shadow: var(--ombra); max-width: 620px; margin: 0 auto; }
label { display: block; font-weight: 600; font-size: .9rem; margin: 18px 0 6px; }
input[type=text], input[type=date], input[type=password], select, textarea {
  width: 100%; padding: 12px 14px; border: 2px solid #E4DFD2; border-radius: 10px;
  font: inherit; background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
.hint { font-size: .82rem; color: var(--muto); margin-top: 4px; }
.riga-colori { display: flex; gap: 16px; }
.riga-colori > div { flex: 1; }
input[type=color] { width: 100%; height: 48px; border: 2px solid #E4DFD2; border-radius: 10px; background: #fff; padding: 4px; cursor: pointer; }
.tipi { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.tipi input { position: absolute; opacity: 0; }
.tipi label {
  margin: 0; text-align: center; padding: 14px 6px; border: 2px solid #E4DFD2; border-radius: 12px;
  cursor: pointer; font-weight: 600; font-size: .85rem; background: var(--paper);
}
.tipi label span { display: block; font-size: 1.6rem; margin-bottom: 4px; }
.tipi input:checked + label { border-color: var(--gold); background: #FDF6E4; }
.tipi input:focus-visible + label { outline: 3px solid var(--rosa); }

.avviso { padding: 14px 18px; border-radius: 12px; margin: 14px 0; font-size: .95rem; }
.avviso.err { background: #FBE9E8; color: #8C2723; }
.avviso.ok  { background: #E4F5EC; color: #1E5F42; }

/* ── Pagina evento (invitati) — tema dai colori organizzatore ── */
.ev-testata {
  background: linear-gradient(150deg, var(--c1, var(--ink)), color-mix(in srgb, var(--c1, var(--ink)) 70%, black));
  color: #fff; text-align: center; padding: 44px 20px 96px; position: relative; overflow: hidden;
}
.ev-testata .data { color: color-mix(in srgb, var(--c2, var(--gold)) 85%, white); letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; font-weight: 600; }
.ev-testata h1 { color: #fff; }
.ev-testata .msg { max-width: 520px; margin: 8px auto 0; opacity: .85; font-style: italic; font-family: var(--font-display); font-size: 1.1rem; }

.ev-azioni {
  max-width: 680px; margin: -58px auto 0; padding: 0 16px; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.azione {
  background: #fff; border-radius: var(--r); box-shadow: var(--ombra);
  padding: 20px 14px; text-align: center; cursor: pointer; border: 0; font-size: .95rem; font-weight: 600;
  transition: transform .15s;
}
.azione:hover { transform: translateY(-3px); }
.azione .icona { font-size: 1.9rem; display: block; margin-bottom: 6px; }
.azione:focus-visible { outline: 3px solid var(--c2, var(--rosa)); }

.galleria {
  max-width: 1080px; margin: 40px auto; padding: 0 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px;
}
.galleria .polaroid { cursor: zoom-in; }
.galleria .polaroid .video-badge, .galleria .polaroid .audio-badge {
  position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,.6); color: #fff;
  border-radius: 999px; padding: 3px 9px; font-size: .75rem;
}
.vuoto { text-align: center; color: var(--muto); padding: 60px 20px; }
.vuoto .icona { font-size: 3rem; }

/* pannello upload / guestbook a scomparsa */
.pannello {
  position: fixed; inset: 0; background: rgba(27,23,48,.55); display: none;
  align-items: flex-end; justify-content: center; z-index: 50; backdrop-filter: blur(3px);
}
.pannello.aperto { display: flex; }
.pannello-int {
  background: var(--paper); border-radius: 22px 22px 0 0; width: 100%; max-width: 640px;
  max-height: 92vh; overflow-y: auto; padding: 26px 22px 34px; animation: sali .25s ease;
}
@keyframes sali { from { transform: translateY(40px); opacity: 0; } }
.pannello-int h3 { display: flex; justify-content: space-between; align-items: center; }
.chiudi { background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--muto); }

.drop {
  border: 3px dashed color-mix(in srgb, var(--c2, var(--gold)) 60%, #ccc); border-radius: var(--r);
  padding: 34px 16px; text-align: center; cursor: pointer; background: #fff;
}
.drop.trasc { background: #FDF6E4; border-color: var(--gold-2); }
.coda { margin-top: 14px; }
.coda-item {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border-radius: 10px; padding: 9px 10px 9px 13px;
  margin-bottom: 8px; font-size: .85rem;
  border-left: 3px solid transparent; transition: border-color .2s ease;
}
.coda-item.errore { border-left-color: var(--err); background: #FEF8F8; }
.coda-item.fatto  { border-left-color: var(--ok); }
.coda-item .nome-file {
  flex: 1 1 34%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra { height: 6px; border-radius: 4px; background: #EAE4D6; overflow: hidden; flex: 1 1 30%; min-width: 40px; }
.barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c2, var(--gold)), var(--c1, var(--rosa))); transition: width .2s; }
.coda-item .stato { font-size: .8rem; white-space: nowrap; min-width: 58px; text-align: right; }
.stato-ok { color: var(--ok); font-weight: 600; }
.stato-err { color: var(--err); font-weight: 600; }

/* pulsanti riprova ed elimina accanto a ogni file */
.coda-item .riprova, .coda-item .togli {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: .95rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.coda-item .riprova { background: var(--gold); color: var(--ink); font-size: 1.1rem; }
.coda-item .riprova:hover { transform: rotate(-90deg); }
.coda-item .togli { background: #F1EBDE; color: var(--muto); }
.coda-item .togli:hover { background: #FBE9E8; color: var(--err); }
.coda-item .riprova:focus-visible, .coda-item .togli:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }

/* nota privacy compatta, apribile */
.nota-privacy {
  margin-top: 16px; padding: 10px 14px;
  background: rgba(27,23,48,.05); border-radius: 10px;
  font-size: .78rem; color: var(--muto);
}
.nota-privacy summary {
  cursor: pointer; list-style: none; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.nota-privacy summary::-webkit-details-marker { display: none; }
.nota-privacy summary::after { content: '⌄'; font-size: 1rem; transition: transform .2s ease; }
.nota-privacy[open] summary::after { transform: rotate(180deg); }
.nota-privacy p { margin: 9px 0 0; line-height: 1.5; }
.nota-privacy a { color: var(--ink); }

/* guestbook */
.gb-lista { max-width: 680px; margin: 10px auto 60px; padding: 0 16px; }
.gb-msg {
  background: #fff; border-radius: 4px; padding: 16px 18px; margin-bottom: 14px;
  box-shadow: var(--ombra); transform: rotate(var(--rot, -.6deg));
  border-left: 5px solid var(--c2, var(--gold));
}
.gb-msg .chi { font-family: var(--font-display); font-style: italic; color: var(--muto); font-size: .85rem; margin-top: 6px; }
.registra { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.registra .pallino { width: 12px; height: 12px; border-radius: 50%; background: var(--err); animation: pulsa 1s infinite; }
@keyframes pulsa { 50% { opacity: .3; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(10,8,20,.94); z-index: 60; display: none; align-items: center; justify-content: center; flex-direction: column; }
.lightbox.aperto { display: flex; }
.lightbox img, .lightbox video { max-width: 94vw; max-height: 82vh; border-radius: 6px; }
.lightbox .lb-info { color: #CFC9E4; margin-top: 12px; font-size: .9rem; text-align: center; }
.lightbox .lb-x { position: absolute; top: 14px; right: 18px; font-size: 2rem; color: #fff; background: none; border: 0; cursor: pointer; }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.4rem; color: #fff; background: rgba(255,255,255,.12); border: 0; cursor: pointer; border-radius: 50%; width: 54px; height: 54px; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }

/* ── Admin ────────────────────────────────────────────────── */
.admin-top { background: var(--ink); color: var(--paper); padding: 22px 0; }
.admin-top .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.stat-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 26px 0; }
.stat { background: #fff; border-radius: var(--r); padding: 18px; text-align: center; box-shadow: var(--ombra); }
.stat b { font-family: var(--font-display); font-size: 1.7rem; display: block; }
.stat span { font-size: .8rem; color: var(--muto); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 18px; }
.admin-cell { position: relative; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--ombra); }
.admin-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.admin-cell .ac-azioni { display: flex; }
.admin-cell .ac-azioni button { flex: 1; border: 0; padding: 8px 4px; cursor: pointer; font-size: .78rem; font-weight: 600; background: var(--paper-2); }
.admin-cell .ac-azioni .ok-btn { color: var(--ok); }
.admin-cell .ac-azioni .del-btn { color: var(--err); }
.badge-attesa { position: absolute; top: 8px; left: 8px; background: var(--rosa); color: #fff; font-size: .7rem; padding: 2px 8px; border-radius: 999px; }
.tabs { display: flex; gap: 8px; margin: 24px 0 6px; flex-wrap: wrap; }
.tab { padding: 9px 18px; border-radius: 999px; border: 2px solid var(--ink); background: transparent; cursor: pointer; font-weight: 600; font-size: .85rem; }
.tab.attivo { background: var(--ink); color: var(--paper); }
.qr-box { background: #fff; padding: 24px; border-radius: var(--r); box-shadow: var(--ombra); text-align: center; }
.qr-box canvas, .qr-box img { margin: 0 auto; }
.copia-link { display: flex; gap: 8px; margin-top: 12px; }
.copia-link input { flex: 1; font-size: .85rem; }

footer.piede { background: var(--ink); color: #A79FC7; text-align: center; padding: 34px 20px; font-size: .85rem; margin-top: 70px; }
footer.piede a { color: var(--gold); }

@media (max-width: 560px) {
  .hero { padding: 60px 0 80px; }
  .hero-polaroids .polaroid:nth-child(4) { display: none; }
  .ev-azioni { grid-template-columns: 1fr 1fr; }
  .galleria { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 12px; }
}


/* ═══════════════════════════════════════════════════════════════
   CREAZIONE ALBUM — temi, sfondi, anteprima iPhone
   ═══════════════════════════════════════════════════════════════ */

.crea-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
  max-width: 1160px;
}
@media (max-width: 980px) {
  .crea-layout { grid-template-columns: 1fr; }
  .col-anteprima { order: -1; }
  .anteprima-sticky { position: static !important; }
}
.anteprima-sticky { position: sticky; top: 20px; }

/* blocchi di sezione dentro il modulo */
.sez-blocco {
  background: var(--paper-2);
  border-radius: var(--r);
  padding: 20px 20px 22px;
  margin: 26px 0;
}
.sez-titolo {
  margin: 0 0 14px;
  font-size: 1.05rem;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(27,23,48,.08);
}
.sez-blocco label:first-of-type { margin-top: 0; }

/* ── Mattonelle dei temi ── */
.temi-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.temi-griglia > input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.temi-griglia label.tema-card {
  display: block;
  margin: 0;
  padding: 0;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  border: 3px solid transparent;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(27,23,48,.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.temi-griglia label.tema-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(27,23,48,.18); }
.tema-card .tema-sfumatura {
  display: block;
  height: 52px;
  background: linear-gradient(135deg, var(--tc1, #1B1730) 0%, var(--tc1, #1B1730) 48%, var(--tc2, #E4B95B) 52%, var(--tc2, #E4B95B) 100%);
  position: relative;
}
.tema-card .tema-punto {
  position: absolute; right: 7px; bottom: 7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; opacity: 0; transform: scale(.4);
  transition: opacity .18s, transform .18s;
}
.tema-card .tema-punto::after {
  content: '✓'; position: absolute; inset: 0;
  font-size: 10px; color: #1B1730; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.tema-card .tema-nome {
  display: block;
  padding: 8px 5px;
  font-size: .72rem;
  text-align: center;
  line-height: 1.25;
}
.tema-card.tema-perso .tema-sfumatura {
  background: conic-gradient(from 210deg, #E96A8D, #E4B95B, #B6E3D8, #D6C9F0, #E96A8D);
}
.temi-griglia > input[type="radio"]:checked + label.tema-card {
  border-color: var(--ink);
  box-shadow: 0 8px 22px rgba(27,23,48,.28);
  transform: translateY(-2px);
}
.temi-griglia > input[type="radio"]:checked + label.tema-card .tema-punto { opacity: 1; transform: scale(1); }
.temi-griglia > input[type="radio"]:focus-visible + label.tema-card { outline: 3px solid var(--rosa); outline-offset: 2px; }

/* ── Chip degli sfondi ── */
.sfondi-riga { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sfondi-riga > input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sfondi-riga label.sfondo-chip {
  margin: 0; padding: 8px 15px;
  border: 2px solid #DED7C7; border-radius: 999px;
  background: #fff; cursor: pointer;
  font-size: .82rem; font-weight: 600;
  transition: all .15s ease;
}
.sfondi-riga label.sfondo-chip:hover { border-color: var(--gold); }
.sfondi-riga > input[type="radio"]:checked + label.sfondo-chip {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.sfondi-riga > input[type="radio"]:focus-visible + label.sfondo-chip { outline: 3px solid var(--rosa); outline-offset: 2px; }

/* ── Telefono per l'anteprima (stile iPhone) ── */
.iphone {
  --tel-larghezza: 280px;
  width: var(--tel-larghezza);
  margin: 0 auto;
  position: relative;
  padding: 12px;
  border-radius: 54px;
  /* scocca in titanio con riflesso sui bordi */
  background:
    linear-gradient(150deg, #6b6b78 0%, #2b2b34 14%, #1a1a20 32%, #17171c 50%,
                    #1a1a20 68%, #2f2f39 86%, #74747f 100%);
  box-shadow:
    0 2px 4px rgba(255,255,255,.22) inset,
    0 -2px 4px rgba(0,0,0,.5) inset,
    0 26px 54px rgba(27,23,48,.42),
    0 8px 18px rgba(27,23,48,.28);
}
/* bordo interno scuro attorno al vetro */
.iphone::after {
  content: ''; position: absolute; inset: 9px;
  border-radius: 46px; border: 2px solid #0a0a0e;
  pointer-events: none; z-index: 4;
}
/* tasti laterali */
.iphone::before {
  content: ''; position: absolute; z-index: 1;
  left: -2px; top: 118px; width: 3px; height: 42px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #3a3a44, #6d6d78);
  box-shadow: 0 62px 0 #4a4a55, 0 -46px 0 #4a4a55;
}
.iphone-schermo {
  position: relative;
  border-radius: 44px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 9 / 19.5;
  z-index: 2;
}
/* isola dinamica */
.iphone-tacca {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 26px;
  background: #05050a; border-radius: 999px;
  z-index: 6; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
/* fotocamera dentro l'isola */
.iphone-tacca::after {
  content: ''; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2c3550 0%, #10131f 60%, #05060b 100%);
  box-shadow: 0 0 0 1px rgba(120,150,255,.16);
}
/* barra home */
.iphone-barra {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.62); z-index: 6; pointer-events: none;
}
/* riflesso diagonale sul vetro */
.iphone-schermo::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(122deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 22%,
    rgba(255,255,255,0) 42%, rgba(255,255,255,0) 100%);
}
/* barra di stato finta */
.iphone-stato {
  position: absolute; top: 26px; left: 0; right: 0; z-index: 6;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 26px; font-size: 11px; font-weight: 600;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  pointer-events: none; font-family: system-ui, sans-serif;
}
.iphone-stato .segnale { display: flex; gap: 3px; align-items: center; }
.iphone-stato .batteria {
  width: 22px; height: 11px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.65); position: relative;
}
.iphone-stato .batteria::before {
  content: ''; position: absolute; inset: 1.5px; right: 5px;
  background: #fff; border-radius: 1px;
}
.iphone-stato .batteria::after {
  content: ''; position: absolute; right: -3px; top: 3px;
  width: 2px; height: 5px; border-radius: 0 1px 1px 0; background: rgba(255,255,255,.65);
}
.ap-sfondo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  pointer-events: none; transition: opacity .25s ease;
}
@media (max-width: 380px) { .iphone { --tel-larghezza: 240px; } }

/* ── Selettore sfondi a mattonelle ── */
.sfondi-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 9px; margin-top: 6px;
}
.sfondi-griglia > input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sfondi-griglia label.sfondo-card {
  display: block; margin: 0; padding: 0; cursor: pointer;
  border: 3px solid transparent; border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 2px 8px rgba(27,23,48,.10);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sfondi-griglia label.sfondo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(27,23,48,.18); }
.sfondo-card .sf-img {
  display: block; height: 56px;
  background-size: cover; background-position: center;
  position: relative;
}
.sfondo-card .sf-img.vuoto {
  background: repeating-linear-gradient(45deg, #F1EBDE, #F1EBDE 8px, #E4DDCB 8px, #E4DDCB 16px);
}
.sfondo-card .sf-nome {
  display: block; padding: 6px 4px; font-size: .7rem; font-weight: 600;
  text-align: center; line-height: 1.2;
}
.sfondi-griglia > input[type="radio"]:checked + label.sfondo-card {
  border-color: var(--ink); box-shadow: 0 8px 20px rgba(27,23,48,.26);
}
.sfondi-griglia > input[type="radio"]:checked + label.sfondo-card .sf-img::after {
  content: '✓'; position: absolute; right: 6px; bottom: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; color: var(--ink);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sfondi-griglia > input[type="radio"]:focus-visible + label.sfondo-card { outline: 3px solid var(--rosa); outline-offset: 2px; }

/* cursore intensità sfondo */
.intensita-riga { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.intensita-riga input[type=range] { flex: 1; accent-color: var(--gold); }
.intensita-val { font-weight: 700; font-size: .85rem; min-width: 46px; text-align: right; }

/* ── Password: misuratore e requisiti ── */
.campo-pass { position: relative; }
.campo-pass input { padding-right: 46px; }
.campo-pass .occhio {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 1.15rem; padding: 6px 8px; line-height: 1;
}
.pw-barra { height: 6px; background: #E7E0D2; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.pw-barra i { display: block; height: 100%; width: 0; background: #D4544F; transition: width .3s ease, background .3s ease; }
.pw-etichetta { font-size: .8rem; font-weight: 600; margin-top: 6px; color: var(--muto); }
.pw-req { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.pw-req li {
  display: flex; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--muto);
  transition: color .2s ease;
}
.pw-req li .segno {
  width: 19px; height: 19px; flex: 0 0 19px;
  border-radius: 50%; border: 2px solid #D6CFBE;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: transparent;
  transition: all .2s ease;
}
.pw-req li.fatto { color: var(--ok); font-weight: 600; }
.pw-req li.fatto .segno { background: var(--ok); border-color: var(--ok); color: #fff; }

/* nota informativa privacy nei pannelli di caricamento */
.nota-privacy {
  margin-top: 16px; padding: 11px 14px;
  background: rgba(27,23,48,.05); border-radius: 10px;
  font-size: .76rem; line-height: 1.5; color: var(--muto);
}
.nota-privacy a { color: var(--ink); }

/* ═══ Barra di navigazione del tema Notte ═══ */
.nt-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(27,23,48,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nt-nav.staccata { border-bottom-color: rgba(255,255,255,.10); box-shadow: 0 2px 20px rgba(0,0,0,.28); }
.nt-nav-int {
  max-width: 1080px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nt-marchio {
  display: flex; align-items: center; text-decoration: none;
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; color: var(--paper);
}
.nt-logo { display: inline-flex; align-items: center; gap: 10px; }
.nt-logo img { width: auto; }
.nt-menu { display: flex; align-items: center; gap: 4px; }
.nt-menu a.nt-voce {
  padding: 9px 16px; border-radius: 999px; text-decoration: none;
  font-size: .92rem; font-weight: 500; color: #BFB8D6;
  transition: background .18s ease, color .18s ease;
}
.nt-menu a.nt-voce:hover { background: rgba(255,255,255,.09); color: var(--paper); }
/* voce attiva: oro tenue, non un blocco pieno */
.nt-menu a.nt-voce.attiva { background: rgba(228,185,91,.18); color: var(--gold); font-weight: 600; }
@media (max-width: 800px) { .nt-menu .solo-grande { display: none; } }

/* segnaposto per i contenuti privi di miniatura (video senza poster, audio) */
.ac-segnaposto {
  width: 100%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-size: 2rem; text-decoration: none; color: #fff;
}
.ac-segnaposto span {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; opacity: .85;
}
.ac-segnaposto.audio { background: linear-gradient(135deg, #2A2347, var(--gold)); }
.ac-segnaposto.video { background: linear-gradient(135deg, #4A3F63, #8B7BC4); }
.ac-segnaposto.foto  { background: linear-gradient(135deg, #8C6A72, #E4B95B); }

/* segnaposto nella galleria vista dagli invitati */
.gal-segnaposto {
  width: 100%; aspect-ratio: 1; border-radius: 2px;
  display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
  background: linear-gradient(135deg, var(--c1, #1B1730), var(--c2, #E4B95B));
}
.gal-segnaposto.video { background: linear-gradient(135deg, #4A3F63, var(--c2, #8B7BC4)); }
.gal-segnaposto.foto  { background: linear-gradient(135deg, var(--c1, #8C6A72), var(--c2, #E4B95B)); }

/* ═══ Elenco dei pacchetti posseduti ═══ */
.att-elenco { margin-top: 16px; padding-top: 14px; border-top: 1px solid #EDE7DA; display: grid; gap: 8px; }
.att-riga {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 11px; background: var(--paper-2);
  border-left: 4px solid transparent;
}
.att-riga.libera  { border-left-color: var(--ok); background: #F1FAF5; }
.att-riga.usata   { border-left-color: var(--muto); }
.att-riga.scaduta { border-left-color: var(--err); opacity: .65; }
.att-segno { font-size: 1.3rem; flex: 0 0 auto; }
.att-info { flex: 1; min-width: 0; }
.att-info strong { display: block; font-size: .94rem; }
.att-dett { font-size: .76rem; color: var(--muto); }
.att-stato { font-size: .78rem; color: var(--muto); text-align: right; white-space: nowrap; }
@media (max-width: 560px) {
  .att-riga { flex-wrap: wrap; }
  .att-stato { width: 100%; text-align: left; padding-left: 34px; }
}