/* ═══════════════════════════════════════════════════════════════
   PronosticiTracker Pro — Design System CSS
   Re-skin palette Sinapps (v1.4): elettrico #3500F7 + lime #CAFF00
   su fondo blu-nero · Helvetica Neue self-hosted · firma grafica "/." sui titoli.
   Struttura invariata (base derivata da BurracoTracker Pro).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Font self-hosted: Helvetica Neue (tipografia sinapps.it) ──
   Sostituiscono Syne + DM Sans da Google Fonts (v1.4.1).
   Il Bold copre il range 700–900: i vecchi font-weight:800 dei
   titoli risolvono sul Bold senza grassetto sintetico.           */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue.woff2') format('woff2'),
       url('fonts/HelveticaNeue.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Medium.woff2') format('woff2'),
       url('fonts/HelveticaNeue-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Bold.woff2') format('woff2'),
       url('fonts/HelveticaNeue-Bold.woff') format('woff');
  font-weight: 700 900; font-style: normal; font-display: swap;
}

/* ─── Tokens (ripresi da BurracoTracker, accento ri-tematizzato) ── */
#pn-root {
  --bg:           #070620;   /* fondo blu-nero elettrico */
  --surface:      #0E0C2E;
  --surface-mid:  #16123F;
  --border:       #272357;
  --border-light: rgba(255,255,255,0.08);
  --violet:       #3500F7;   /* brand elettrico Sinapps (nome var invariato) */
  --cyan:         #CAFF00;   /* lime accento (nome var invariato) */
  --mint:         #CAFF00;   /* punti in lime */
  --green:        #00FF82;   /* semantico: previsione avverata */
  --red:          #FF4D6D;   /* semantico: mancata */
  --amber:        #FFC400;
  --pink:         #B78CFF;
  --white:        #FFFFFF;
  --muted:        #8E8CC4;   /* grigio bluastro coerente col fondo */
  --gradient:     linear-gradient(120deg, #3500F7 0%, #6B4BFF 42%, #CAFF00 128%);

  --r-sm:   10px;
  --r-card: 18px;
  --r-hero: 22px;
  --r-modal:24px;
  --r-pill: 20px;

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--white);
  min-height: 400px;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#pn-root * { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Background Orbs ────────────────────────────────────────── */
#pn-root .pn-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}
#pn-root .pn-orb-1 { width:500px; height:500px; background:rgba(53,0,247,0.30);  top:-150px; right:-100px; }
#pn-root .pn-orb-2 { width:420px; height:420px; background:rgba(202,255,0,0.10); bottom:-120px; left:-100px; }
#pn-root .pn-orb-3 { width:300px; height:300px; background:rgba(107,75,255,0.12); top:40%; left:50%; transform:translate(-50%,-50%); }

/* ─── Boot loader (invariato) ────────────────────────────────── */
#pn-root .pn-boot {
  display:flex; align-items:center; justify-content:center;
  min-height:300px;
}
#pn-root .pn-boot-ring {
  width:44px; height:44px; border-radius:50%;
  border:3px solid var(--border);
  border-top-color: var(--violet);
  animation: pn-spin 0.8s linear infinite;
}
@keyframes pn-spin { to { transform: rotate(360deg); } }

/* ─── App container ──────────────────────────────────────────── */
#pn-root .pn-app {
  position: relative; z-index: 1;
  max-width: 680px; margin: 0 auto;
  padding: 24px 16px 80px;
}

/* ─── Header + nav ───────────────────────────────────────────── */
#pn-root .pn-header { margin-bottom: 20px; }
#pn-root .pn-header-top {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
#pn-root .pn-title {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:26px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -0.05em;   /* -5%, da specifica typo Sinapps (Figma) */
}
#pn-root .pn-title::after {
  content: " /.";               /* suffisso lime, come "SOCIAL PROFILE /." */
  color: var(--cyan);
}
#pn-root .pn-badge {
  font-size:11px; font-weight:500; padding:5px 12px;
  text-transform:uppercase; letter-spacing:0.5px;
  border-radius: var(--r-pill); border:1px solid var(--border);
  background: var(--surface); color: var(--muted);
  white-space: nowrap;
}
#pn-root .pn-badge-live  { color: var(--green); border-color: rgba(0,255,130,0.35); }
#pn-root .pn-badge-ended { color: var(--amber); border-color: rgba(255,170,0,0.35); }

#pn-root .pn-nav { display:flex; gap:8px; flex-wrap:wrap; }
#pn-root .pn-nav-btn {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.6px;
  padding:9px 14px; border-radius: var(--r-pill);
  border:1px solid var(--border); background:var(--surface);
  color:var(--muted); cursor:pointer; transition: all .15s;
}
#pn-root .pn-nav-btn.active {
  color:var(--white); border-color: var(--violet);
  background: rgba(53,0,247,0.28);
}

/* ─── Generic card (ripreso) ─────────────────────────────────── */
#pn-root .pn-card {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-card);
  padding: 18px;
  margin-bottom: 16px;
}
#pn-root .pn-card-title {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:15px;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 12px;
}
#pn-root .pn-hint  { font-size:12px; color:var(--muted); line-height:1.5; }
#pn-root .pn-hint code {
  background: var(--surface-mid); padding:1px 6px; border-radius:6px;
  font-size:11px; color: var(--cyan);
}
#pn-root .pn-empty {
  text-align:center; padding:60px 20px; color:var(--muted);
  font-size:15px; line-height:1.8; position:relative; z-index:1;
}
#pn-root .pn-empty-inline { color:var(--muted); font-size:13px; padding:16px 0; }
#pn-root .pn-ok-line { color: var(--green); font-size:14px; font-weight:500; }

/* ─── Avatar ─────────────────────────────────────────────────── */
#pn-root .pn-avatar {
  width:34px; height:34px; min-width:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; border:1px solid var(--border-light);
}
/* v1.5.0: avatar immagine (fallback: emoji). L'overflow ritaglia a cerchio,
   lo sfondo colorato resta visibile dietro PNG/WebP con trasparenza. */
#pn-root .pn-avatar-img { overflow:hidden; }
#pn-root .pn-avatar-img img {
  width:100%; height:100%; object-fit:cover; display:block;
}
#pn-root .pn-avatar-lg { width:52px; height:52px; min-width:52px; font-size:26px; }

/* ─── Classifica ─────────────────────────────────────────────── */
#pn-root .pn-board { display:flex; flex-direction:column; gap:6px; }
#pn-root .pn-rank-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius: var(--r-sm);
  background: var(--surface-mid); border:1px solid transparent;
}
#pn-root .pn-rank-row.top { border-color: rgba(202,255,0,0.45); background: rgba(202,255,0,0.06); }
#pn-root .pn-rank-pos  { min-width:32px; text-align:center; font-size:14px; }
#pn-root .pn-rank-name {
  flex:1; font-size:14px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#pn-root .pn-rank-pts {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:800; font-size:18px;
  min-width:28px; text-align:right; color:var(--mint);
}
#pn-root .pn-dots { display:flex; gap:4px; }
#pn-root .pn-dot {
  width:8px; height:8px; border-radius:50%;
  background: var(--border); transition: background .3s;
}
#pn-root .pn-dot.hit  { background: var(--green); box-shadow:0 0 6px rgba(0,255,130,0.6); }
#pn-root .pn-dot.miss { background: var(--red); opacity:.7; }

/* ─── Podium finale ──────────────────────────────────────────── */
#pn-root .pn-podium {
  text-align:center; padding:26px 18px; margin-bottom:16px;
  border-radius: var(--r-hero);
  border:1px solid rgba(202,255,0,0.45);
  background: linear-gradient(160deg, rgba(202,255,0,0.12), rgba(53,0,247,0.18));
}
#pn-root .pn-podium-conf  { font-size:20px; letter-spacing:6px; }
#pn-root .pn-podium-title { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:2px; margin-top:8px; }
#pn-root .pn-podium-name  { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:24px; text-transform:uppercase; letter-spacing:-0.05em; margin:6px 0; }
#pn-root .pn-podium-pts   { color:var(--amber); font-size:14px; }

/* ─── Feed / diario ──────────────────────────────────────────── */
#pn-root .pn-feed-day       { margin-bottom:14px; }
#pn-root .pn-feed-day-label {
  font-size:11px; text-transform:uppercase; letter-spacing:2px;
  color:var(--white); margin-bottom:8px; font-weight:500;
}
#pn-root .pn-feed-item {
  display:flex; gap:10px; padding:10px;
  border-radius: var(--r-sm); background: var(--surface-mid);
  margin-bottom:6px; border-left:3px solid var(--border);
}
#pn-root .pn-feed-item.hit  { border-left-color: var(--green); }
#pn-root .pn-feed-item.miss { border-left-color: var(--red); opacity:.85; }
#pn-root .pn-feed-ico     { font-size:16px; }
#pn-root .pn-feed-text    { font-size:14px; line-height:1.45; }
#pn-root .pn-feed-holders { font-size:12px; color:var(--muted); margin-top:3px; }

/* ─── Picker "chi sei" ───────────────────────────────────────── */
#pn-root .pn-picker {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px;
}
#pn-root .pn-picker-btn {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius: var(--r-sm);
  border:1px solid var(--border); background:var(--surface-mid);
  color:var(--white); font-size:13px; font-weight:500; cursor:pointer;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; text-align:left;
  transition: border-color .15s, transform .1s;
}
#pn-root .pn-picker-btn:hover { border-color: var(--violet); transform: translateY(-1px); }

/* ─── Le mie previsioni ──────────────────────────────────────── */
#pn-root .pn-my-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
#pn-root .pn-my-name { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:18px; }
#pn-root .pn-my-pts  { color:var(--mint); font-size:13px; }
#pn-root .pn-my-head .pn-btn-ghost { margin-left:auto; }

#pn-root .pn-pred-list { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
#pn-root .pn-pred-card {
  position:relative; padding:16px 16px 12px 52px;
  border-radius: var(--r-card); background: var(--surface-mid);
  border:1px solid var(--border);
}
#pn-root .pn-pred-card.hit  { border-color: rgba(0,255,130,0.5); background: rgba(0,255,130,0.06); }
#pn-root .pn-pred-card.miss { border-color: rgba(255,90,90,0.4); opacity:.8; }
#pn-root .pn-pred-num {
  position:absolute; left:14px; top:14px;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--cyan); color:var(--bg);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:800; font-size:13px;
}
#pn-root .pn-pred-text   { font-size:15px; line-height:1.5; }
#pn-root .pn-pred-status { font-size:12px; color:var(--muted); margin-top:8px; }
#pn-root .pn-pred-card.hit .pn-pred-status  { color:var(--green); }
#pn-root .pn-pred-card.miss .pn-pred-status { color:var(--red); }

/* ─── Buttons (ripresi/estesi) ───────────────────────────────── */
#pn-root .pn-btn {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; font-weight:500;
  padding:11px 20px; border-radius: var(--r-pill);
  border:none; cursor:pointer; color:var(--bg);
  background: var(--cyan);
  transition: opacity .15s, transform .1s;
  margin-top:12px;
}
#pn-root .pn-btn:hover:not(:disabled) { transform: translateY(-1px); }
#pn-root .pn-btn:disabled { opacity:.5; cursor:default; }
#pn-root .pn-btn-hero { font-size:16px; padding:14px 26px; font-weight:700; }

#pn-root .pn-btn-ghost {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; font-weight:500;
  padding:9px 16px; border-radius: var(--r-pill);
  border:1px solid var(--border); background:transparent;
  color:var(--muted); cursor:pointer; margin-top:12px;
}
#pn-root .pn-btn-ghost:hover { color:var(--white); border-color:var(--muted); }
#pn-root .pn-btn-xs { padding:5px 10px; font-size:12px; margin-top:0; }

#pn-root .pn-btn-warn, #pn-root .pn-btn-danger {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; font-weight:500;
  padding:9px 16px; border-radius: var(--r-pill); cursor:pointer;
  background:transparent;
}
#pn-root .pn-btn-warn   { border:1px solid rgba(255,170,0,0.5); color:var(--amber); }
#pn-root .pn-btn-danger { border:1px solid rgba(255,90,90,0.5); color:var(--red); }
#pn-root .pn-danger-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

#pn-root .pn-shuffling { animation: pn-shake .35s ease-in-out infinite; }
@keyframes pn-shake {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-1.5deg) scale(1.02); }
  75%     { transform: rotate(1.5deg)  scale(1.02); }
}

/* ─── Inputs ─────────────────────────────────────────────────── */
#pn-root .pn-input {
  width:100%; padding:11px 14px; margin-top:6px;
  border-radius: var(--r-sm); border:1px solid var(--border);
  background: var(--surface-mid); color:var(--white);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px;
}
#pn-root .pn-input:focus { outline:none; border-color: var(--violet); }
/* v1.5.1: input file per upload avatar */
#pn-root .pn-input-file { padding:8px 10px; font-size:12px; color:var(--muted); cursor:pointer; }
#pn-root .pn-input-file::file-selector-button {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12px; font-weight:500; cursor:pointer;
  padding:6px 12px; margin-right:10px;
  border-radius: var(--r-pill); border:none;
  background: var(--cyan); color: var(--bg);
}
#pn-root .pn-input:disabled { opacity:.5; }
#pn-root .pn-textarea { resize: vertical; line-height:1.6; }
#pn-root .pn-input-sm { width:80px; }
#pn-root .pn-input-code {
  font-size:28px; text-align:center; letter-spacing:12px;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:800;
}
#pn-root .pn-settings-row {
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;
  font-size:12px; color:var(--muted);
}
#pn-root .pn-settings-row label { display:flex; flex-direction:column; gap:2px; }
#pn-root .pn-check { flex-direction:row !important; align-items:center; gap:8px !important; padding-bottom:12px; }

/* ─── Subnav pills ───────────────────────────────────────────── */
#pn-root .pn-subnav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
#pn-root .pn-pill {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.6px;
  padding:7px 13px; border-radius: var(--r-pill);
  border:1px solid var(--border); background:var(--surface);
  color:var(--muted); cursor:pointer;
}
#pn-root .pn-pill.active {
  color:var(--white); border-color:var(--violet);
  background: rgba(53,0,247,0.28);
}

/* ─── Admin: lista verdetti ──────────────────────────────────── */
#pn-root .pn-adm-pred-list { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
#pn-root .pn-adm-pred {
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius: var(--r-sm);
  background: var(--surface-mid); border-left:3px solid var(--border);
}
#pn-root .pn-adm-pred.hit  { border-left-color: var(--green); }
#pn-root .pn-adm-pred.miss { border-left-color: var(--red); }
#pn-root .pn-adm-pred-main { flex:1; min-width:0; }
#pn-root .pn-adm-pred-text { font-size:13px; line-height:1.4; }
#pn-root .pn-adm-pred-meta { font-size:11px; color:var(--muted); margin-top:3px; }
#pn-root .pn-adm-pred-btns { display:flex; gap:5px; }
#pn-root .pn-subject-sel {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px;
  padding:3px 6px; border-radius:6px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--muted); max-width: 210px;
}
#pn-root .pn-subject-sel.warn { border-color: var(--amber); color: var(--amber); }
#pn-root .pn-subject-sel:disabled { opacity:.7; }
#pn-root .pn-multi-flag { font-size:10px; color:var(--cyan); }
#pn-root .pn-esito-btn {
  width:34px; height:34px; border-radius: var(--r-sm);
  border:1px solid var(--border); background:transparent;
  cursor:pointer; font-size:14px; opacity:.45; transition: all .15s;
}
#pn-root .pn-esito-btn.on { opacity:1; }
#pn-root .pn-esito-btn.hit.on   { border-color:var(--green); background:rgba(0,255,130,0.12); }
#pn-root .pn-esito-btn.miss.on  { border-color:var(--red);   background:rgba(255,90,90,0.12); }
#pn-root .pn-esito-btn.reset.on { border-color:var(--muted); color:var(--muted); }
#pn-root .pn-esito-btn:hover { opacity:1; }

/* ─── Valida le previsioni (profilo giocatore, v1.4.7) ────────
   Card allineate al linguaggio di .pn-pred-card: raggio r-card,
   tinte hit/miss, badge di stato e verdetti pill etichettati.   */
#pn-root .pn-val-toolbar { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
#pn-root .pn-val-search  { width:100%; }
#pn-root .pn-val-chips   { display:flex; gap:8px; flex-wrap:wrap; }
#pn-root .pn-val-chip b  { color:var(--cyan); font-weight:700; margin-left:2px; }
#pn-root .pn-val-chip.active b { color:var(--cyan); }

#pn-root .pn-val-list {
  margin-top:14px; display:flex; flex-direction:column; gap:10px;
}
#pn-root .pn-val-card {
  padding:14px 16px; border-radius: var(--r-card);
  background: var(--surface-mid); border:1px solid var(--border);
  transition: border-color .15s;
}
#pn-root .pn-val-card.pending:hover { border-color: var(--violet); }
#pn-root .pn-val-card.hit  { border-color: rgba(0,255,130,0.45); background: rgba(0,255,130,0.05); }
#pn-root .pn-val-card.miss { border-color: rgba(255,77,109,0.35); opacity:.78; }

#pn-root .pn-val-text {
  font-size:14px; line-height:1.5;
}
#pn-root .pn-val-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-top:10px;
}
#pn-root .pn-val-state { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
#pn-root .pn-val-badge {
  font-size:11px; font-weight:500; letter-spacing:0.4px;
  padding:4px 10px; border-radius: var(--r-pill);
  border:1px solid var(--border); color:var(--muted);
  background: rgba(255,255,255,0.03); white-space:nowrap;
}
#pn-root .pn-val-badge.hit  { color:var(--green); border-color: rgba(0,255,130,0.4);  background: rgba(0,255,130,0.10); }
#pn-root .pn-val-badge.miss { color:var(--red);   border-color: rgba(255,77,109,0.4); background: rgba(255,77,109,0.10); }
#pn-root .pn-val-signer { font-size:11px; color:var(--muted); }
/* v1.5.2: riga detentori nel Diario dell'oracolo */
#pn-root .pn-val-holders { font-size:11px; color:var(--muted); }
#pn-root .pn-val-holders b { font-weight:500; }
#pn-root .pn-val-holders.hit b  { color:var(--cyan); }
#pn-root .pn-val-holders.miss b { color:var(--muted); }

#pn-root .pn-val-btns { display:flex; gap:8px; }
#pn-root .pn-val-btn {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12px; font-weight:500;
  padding:8px 14px; border-radius: var(--r-pill);
  background:transparent; cursor:pointer;
  transition: background .15s, transform .1s;
}
#pn-root .pn-val-btn:active { transform: scale(.97); }
#pn-root .pn-val-btn.hit  { color:var(--green); border:1px solid rgba(0,255,130,0.45); }
#pn-root .pn-val-btn.hit:hover  { background: rgba(0,255,130,0.12); }
#pn-root .pn-val-btn.miss { color:var(--red); border:1px solid rgba(255,77,109,0.45); }
#pn-root .pn-val-btn.miss:hover { background: rgba(255,77,109,0.12); }

/* Previsioni segrete nel profilo (v1.4.9): blur finché il gioco è live,
   il testo vero non viene nemmeno inviato al browser fino al reveal. */
#pn-root .pn-pred-card.secret .pn-pred-text {
  filter: blur(6px);
  user-select:none; -webkit-user-select:none;
  pointer-events:none;
  opacity:.85;
}
#pn-root .pn-pred-card.secret { border-style:dashed; }

/* ─── Admin: codici ──────────────────────────────────────────── */
#pn-root .pn-code-list { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
#pn-root .pn-code-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border-radius: var(--r-sm); background: var(--surface-mid);
}
#pn-root .pn-code-name { flex:1; font-size:13px; }
#pn-root .pn-code-val {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:800; letter-spacing:3px;
  color:var(--cyan); font-size:15px;
}

/* ─── Modal (ripreso) ────────────────────────────────────────── */
#pn-root .pn-backdrop {
  position:fixed; inset:0; z-index:50;
  background: rgba(3,5,10,0.8); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; animation: pn-fade .18s ease-out;
}
@keyframes pn-fade { from { opacity:0; } to { opacity:1; } }
#pn-root .pn-modal {
  width:100%; max-width:420px; max-height:85vh; overflow-y:auto;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-modal); padding:22px;
  animation: pn-pop .22s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pn-pop { from { transform: scale(.92); opacity:0; } to { transform: scale(1); opacity:1; } }
#pn-root .pn-modal-title { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
#pn-root .pn-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }

/* ─── Avatar grid nel modal ──────────────────────────────────── */
#pn-root .pn-av-grid {
  display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin:14px 0;
}
#pn-root .pn-av-pick {
  aspect-ratio:1; border-radius:50%; font-size:18px;
  border:2px solid transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#pn-root .pn-av-pick.sel { border-color: var(--violet); box-shadow:0 0 12px rgba(53,0,247,0.6); }

/* ─── Banner celebrativo ─────────────────────────────────────── */
#pn-root .pn-celebrate { flex-direction:column; }
#pn-root .pn-confetti {
  font-size:22px; letter-spacing:8px; margin-bottom:14px;
  animation: pn-bounce 1s ease-in-out infinite alternate;
}
@keyframes pn-bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
#pn-root .pn-modal-celebrate { text-align:center; border-color: rgba(0,255,130,0.4); }
#pn-root .pn-celebrate-ico     { font-size:34px; }
#pn-root .pn-celebrate-title   { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:20px; text-transform:uppercase; letter-spacing:-0.05em; margin:8px 0; color:var(--green); }
#pn-root .pn-celebrate-text    { font-size:15px; line-height:1.5; margin-bottom:8px; }
#pn-root .pn-celebrate-holders { font-size:13px; color:var(--muted); margin-bottom:6px; }

/* ─── Toast (invariato) ──────────────────────────────────────── */
#pn-root .pn-toast {
  position:fixed; left:50%; bottom:26px; transform: translate(-50%, 20px);
  z-index:99; padding:11px 20px; border-radius: var(--r-pill);
  background: var(--surface); border:1px solid var(--mint);
  color:var(--white); font-size:13px; font-weight:500;
  opacity:0; pointer-events:none; transition: all .25s;
  max-width: 90vw; text-align:center;
}
#pn-root .pn-toast.show { opacity:1; transform: translate(-50%, 0); }
#pn-root .pn-toast.err  { border-color: var(--red); }

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #pn-root .pn-app { padding: 16px 10px 70px; }
  #pn-root .pn-title { font-size: 21px; }
  #pn-root .pn-dots { display:none; }        /* classifica compatta su 30 righe */
  #pn-root .pn-picker { grid-template-columns: repeat(2, 1fr); }
  #pn-root .pn-adm-pred { flex-direction:column; align-items:stretch; }
  #pn-root .pn-val-btns { width:100%; }
  #pn-root .pn-val-btn  { flex:1; padding:10px 14px; }
  #pn-root .pn-adm-pred-btns { justify-content:flex-end; }
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #pn-root .pn-shuffling,
  #pn-root .pn-confetti,
  #pn-root .pn-boot-ring,
  #pn-root .pn-bolt svg path,
  #pn-root .pn-hero-bolt,
  #pn-root .pn-app { animation: none; }
}

/* ─── Entry codice inline (v1.3: rimpiazza il modal fixed) ───── */
#pn-root .pn-code-actions {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}

/* ═══ Firma grafica Sinapps: prefisso "/." sui titoli ═══════════
   Motivo: "/." è il segno ricorrente del sito sinapps.it (header,
   CTA, sezioni). Applicato solo a titoli a colore pieno → robusto,
   nessuna interazione col clip-gradient del wordmark.            */
#pn-root .pn-card-title::before,
#pn-root .pn-modal-title::before,
#pn-root .pn-celebrate-title::before {
  content: "/.";
  color: var(--cyan);          /* lime */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  margin-right: 8px;
  letter-spacing: -1px;
}
#pn-root .pn-feed-day-label::before { content: "/. "; }

/* Bottoni CTA: stacco netto in hover (accento elettrico sotto il lime) */
#pn-root .pn-btn:hover:not(:disabled) { box-shadow: 0 4px 18px rgba(202,255,0,0.28); }

/* ═══ Watermark fulmine (v1.4 · path ufficiale Sinapps) ═════════
   position:absolute (NON fixed): il tema di raoulfanelli.com ha
   transform sugli antenati e rompe il fixed — vedi memoria, fix #1.
   #pn-root è già position:relative, quindi l'ancoraggio è sicuro.
   Il fulmine è un CONTORNO (stroke), non una sagoma piena.        */
#pn-root .pn-bolt {
  position: absolute;
  top: 240px;
  left: 50%;                        /* centrato sull'app, non sul bordo */
  width: min(94vw, 1100px);
  transform: translateX(-50%) rotate(-8deg);
  pointer-events: none;
  z-index: 0;                       /* sotto .pn-app (z-index:1) */
  color: var(--cyan);               /* lime, ricolorabile da token */
  opacity: 0.14;                    /* contorno sottile: serve più
                                       presenza di una sagoma piena */
}
#pn-root .pn-bolt svg {
  width: 100%; height: auto; display: block;
  stroke: currentColor;
  filter: drop-shadow(0 0 24px rgba(202,255,0,0.55));
}
@media (max-width: 480px) {
  #pn-root .pn-bolt { width: 150vw; top: 200px; opacity: 0.11; }
}

/* ═══ Animazione d'ingresso (v1.4.3) ════════════════════════════
   · Fulmine: draw-in del contorno (stroke-dashoffset, pathLength=1
     è impostato sul path in vBolt()). Gira solo alla creazione del
     nodo: il mini-morph preserva .pn-bolt tra i render, quindi
     l'effetto parte una volta sola al caricamento.
   · Contenuti: fade-up morbido su .pn-app. Ai cambi vista il morph
     può ricreare i nodi interni ma .pn-app resta, quindi niente
     replay fastidiosi a ogni tab.                                 */
@keyframes pn-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
#pn-root .pn-bolt svg path {
  stroke-dasharray: 1;
  animation: pn-draw 1.8s cubic-bezier(.6,0,.2,1) .15s both;
}
@keyframes pn-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
#pn-root .pn-app {
  animation: pn-enter .5s ease-out both;
}

/* ═══ Hero profilo "Le mie previsioni" (v1.4.4) ═════════════════
   Dashboard-style: avatar grande con doppio fulmine Sinapps come
   alone elettrico (blu + lime, draw-in al primo ingresso), nome
   display, stato oracolare e pill punteggio.                      */
#pn-root .pn-hero {
  text-align: center;
  padding: 26px 16px 20px;
  margin-bottom: 16px;
  position: relative;
}
#pn-root .pn-hero-ava {
  position: relative;
  width: min(92vw, 520px);
  aspect-ratio: 894 / 580;          /* proporzioni del fulmine */
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
#pn-root .pn-hero-bolt {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  stroke: var(--violet);
  stroke-dasharray: 1;
  animation: pn-draw 1.4s cubic-bezier(.6,0,.2,1) .1s both;
  pointer-events: none;
}
/* tre fulmini concentrici che sfumano verso l'esterno (cfr. anelli) */
#pn-root .pn-hero-bolt-1 {
  transform: scale(0.78);
  filter: drop-shadow(0 0 14px rgba(53,0,247,0.7));
}
#pn-root .pn-hero-bolt-2 {
  stroke: var(--cyan);
  transform: rotate(180deg) scale(0.55);
  opacity: .9;
  animation-delay: .35s;
  filter: drop-shadow(0 0 12px rgba(202,255,0,0.55));
}
#pn-root .pn-hero-bolt-3 {
  transform: scale(1.04);
  opacity: .22;
  animation-delay: .6s;
}
#pn-root .pn-hero-avatar {
  width: 128px; height: 128px; min-width: 128px;
  font-size: 64px;
  border: 2px solid var(--border-light);
  box-shadow: 0 0 54px rgba(53,0,247,0.65);
  position: relative; z-index: 1;
}
/* v1.5.4: nel profilo, l'avatar immagine perde il cerchio (niente bordo,
   niente sfondo, niente ritaglio) e cresce a dimensione fissa; l'ombra
   è un drop-shadow che segue la sagoma del PNG trasparente.
   Il fallback emoji mantiene il cerchio classico. */
#pn-root .pn-hero-avatar.pn-avatar-img {
  width: min(320px, 80vw); height: min(320px, 80vw); min-width: 0;
  border: none; border-radius: 0;
  overflow: visible;
  background: transparent !important;   /* vince sull'inline style di avHtml */
  box-shadow: none;
}
#pn-root .pn-hero-avatar.pn-avatar-img img {
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(53,0,247,0.75))
          drop-shadow(0 14px 26px rgba(0,0,0,0.55));
}
#pn-root .pn-hero-name {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight: 700; font-size: 30px;
  text-transform: uppercase; letter-spacing: -0.05em;
  margin-bottom: 4px;
}
#pn-root .pn-hero-oracle {
  font-size: 13px; font-weight: 500; margin-bottom: 10px;
}
#pn-root .pn-oracle-quiet { color: var(--muted); }
#pn-root .pn-oracle-warm  { color: var(--amber); }
#pn-root .pn-oracle-hot   { color: var(--cyan);  }
#pn-root .pn-oracle-god   { color: var(--green); text-shadow: 0 0 14px rgba(0,255,130,0.5); }
#pn-root .pn-hero-pill {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid rgba(202,255,0,0.4);
  color: var(--cyan);
  margin-bottom: 10px;
}
#pn-root .pn-hero .pn-btn-ghost { display: block; margin: 0 auto; }

/* Previsioni a tile, griglia dashboard */
#pn-root .pn-pred-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
#pn-root .pn-pred-card { padding: 14px; }
#pn-root .pn-pred-num {
  position: static;
  margin-bottom: 10px;
  border-radius: 8px;
}
#pn-root .pn-pred-text { font-size: 14px; }
@media (max-width: 480px) {
  #pn-root .pn-pred-list { grid-template-columns: 1fr; }
}