/* ═══════════════════════════════════════════════════════════════════════════
   TIMERBET PLAYER — AREA CONTO / CASHBACK VIP, fedele al riferimento 1xBet
   Autore: D (design). T16, richiesta Angelo: «esattamente e graficamente come i
   miei screenshot».

   Non contiene markup né logica: veste le classi che B emette in `_conto_nav.html`,
   `_vip.html` / `_vip_1xbet.html`, `_pg.html`. Autosufficiente (porta anche la
   geometria di base), quindi regge sia sopra `_vip.html` sia da solo col ricambio.

   COME SI SERVE: una riga nel middleware di B (`player_ui/mobile.py`), accanto a
   quella di `app_mobile.css`. Le regole sono tutte sotto `.pg`, quindi sulle pagine
   che non sono l'area conto sono inerti.
       <link rel="stylesheet" href="{% static 'player/account_vip.css' %}">

   MISURE. Prese dallo screenshot del riferimento, non a occhio: righe di tabella
   ~44px, corpo 13px, testate 11px maiuscoletto, la percentuale di cashback 15px
   nera. La densità del riferimento è più fitta di quanto verrebbe naturale: è una
   tabella di consultazione, non una pagina di lettura.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════ 1. IMPIANTO DI PAGINA ════════════
   La griglia metteva ogni card nella colonna 2 ma in RIGHE successive: sotto una
   sidebar alta si apriva un vuoto e le card scivolavano in fondo.
   ⚠ Dav 22/07: tolta la fascia-titolo (hero) che occupava la riga 1, la sidebar deve
   partire dalla riga 1 (prima era 2, sotto l'hero) — se no scivola in fondo alla pagina. */
@media (min-width:860px){
  .pg > .pg-side{grid-row:1 / span 99}
}

/* ════════════ 2. IL MENU LATERALE ════════════
   ⚠ CORREZIONE dopo la schedatura dei 12 screenshot di Angelo: nel riferimento la
   sidebar è un PANNELLO BLU PIENO con testo bianco, non una card bianca. Era lo scarto
   più vistoso che avevo, e cambia la lettura di tutta la pagina.
   Colori letti dagli screenshot: corpo #1B5A96, testata #1E63A4, fascia saldo #1C5D9C,
   voce aperta #2E80CC con la barretta #5AB4F0 a sinistra, sezioni #89B4D6. */
.pg .pg-side{padding:0;overflow:hidden;border-radius:3px;background:#1B5A96;
  border:0;box-shadow:none}
.pg .pg-side-user{background:#1E63A4;border-bottom:1px solid #164B7E;
  padding:11px 12px;margin:0;gap:10px}
.pg .pg-side-av{font-size:2.2em;color:#A9CBE6}
/* L'EMAIL VA A CAPO. Aveva un `max-width:150px` ma niente per spezzarsi: un indirizzo non ha
   spazi, quindi non andava a capo e sfondava — misurato a 320px: 262px di larghezza col bordo
   destro a 336. Un indirizzo lungo esiste sempre, non è il caso limite. `min-width:0` sul
   contenitore flex perché altrimenti nemmeno lui si stringe. */
.pg .pg-side-id{min-width:0}
.pg .pg-side-id b{font-size:.88em;font-weight:800;color:#fff;max-width:150px;
  display:block;overflow-wrap:anywhere;word-break:break-word}
.pg .pg-side-id small{color:#A9CBE6;font-size:.75em;opacity:1}
.pg .pg-side-id small.pg-side-bal{margin-top:2px;font-size:.78em;color:#BFE0A8}

/* le righe «Punti» / «Saldo principale»: compaiono solo se B le passa */
.pg .pg-side-stat{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:4px 12px;font-size:.78em;background:#1C5D9C;color:#EAF3FA;border:0}
.pg .pg-side-stat:last-of-type{border-bottom:1px solid #164B7E;padding-bottom:7px}
.pg .pg-side-stat b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}

.pg .pg-side-sec{padding:10px 12px 3px;opacity:1;color:#89B4D6;font-size:.62em;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.35}

/* passo verticale ~33px, icona stretta a sinistra: sono le misure del riferimento */
.pg .pg-side a{display:flex;align-items:center;gap:9px;border-radius:0;
  padding:7px 12px;min-height:33px;box-sizing:border-box;
  font-size:.83em;font-weight:400;color:#F0F6FB;text-decoration:none;
  border-left:3px solid transparent;transition:background .12s}
.pg .pg-side a:hover{background:#1F6299}
.pg .pg-side a.on{background:#2E80CC;border-left-color:#5AB4F0;color:#fff;font-weight:700}
.pg .pg-side a .mdi{color:#fff;opacity:.92;font-size:1em;width:17px;text-align:center}
.pg .pg-side a.on .mdi{opacity:1}
.pg .pg-side a:focus-visible{outline:2px solid #5AB4F0;outline-offset:-2px}

/* il pallino «ti manca qualcosa» del riferimento (Dati personali / Sicurezza) */
.pg .pg-side a .pg-side-warn{margin-left:auto;width:13px;height:13px;border-radius:50%;
  background:#E03A2F;color:#fff;font-size:.58em;font-weight:900;line-height:13px;
  text-align:center;flex:none}
.pg .pg-side a.on .pg-side-warn{background:#fff;color:#c02718}
.pg .pg-side-badge{background:#E03A2F}

/* Esci: bottone in fondo, angoli appena smussati come tutto il resto del pannello */
.pg .pg-side-exit{margin:9px 6px 8px;border-top:0;border-radius:3px;
  background:#2B7CC4;color:#fff !important;
  justify-content:center;padding:6px 12px;min-height:26px;font-weight:600 !important}
.pg .pg-side-exit:hover{background:#3288d2}
.pg .pg-side-exit .mdi{color:#fff}

/* ════════════ 3. LA FASCIA DEI LIVELLI ════════════
   Riferimento: pannello grigio-azzurro con le pastiglie in fila — SENZA etichette
   sotto (i nomi stanno nella tabella, ripeterli raddoppiava il rumore) — e, fuori
   dal pannello a destra, l'anello «Esperienza» con la sua scritta SOPRA. */
.pg .vip-b{padding:16px 15px}

/* la riga di testata: «LIVELLO ATTUALE» a sinistra, «CASHBACK» a destra */
.pg .vip-bandhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap;padding:0 2px 9px;
  font-size:.74em;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#41576d}
.pg .vip-bandhead b{color:#12395c}
.pg .vip-bandhead .cb b{color:#6E8B3D}

/* Il pannello grigio e l'anello sono AFFIANCATI, non uno dentro l'altro: nel
   riferimento l'anello «Esperienza» sta fuori dal riquadro. La riga `.vip-row` la
   porta il ricambio `_vip_1xbet.html`; col markup originale di `_vip.html` l'anello
   resta dentro il pannello — si degrada, non si rompe. */
.pg .vip-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-bottom:15px}
.pg .vip-band{flex:1;min-width:0;display:flex;align-items:center;
  background:#E8EEF3;border:1px solid #DCE4EC;
  border-radius:3px;padding:12px 10px;margin-bottom:15px}
.pg .vip-row > .vip-band{margin-bottom:0}
.pg .vip-stop{flex:1;min-width:0;text-align:center;position:relative}
/* niente nomi sotto le pastiglie: è così nel riferimento */
.pg .vip-stop .vip-nm,.pg .vip-stop .vip-th{display:none}
/* la scala si legge TUTTA a colori: a dire «dove sei» ci pensa la pastiglia verde */
.pg .vip-stop.is-off{opacity:1;filter:none}
.pg .vip-stop.is-off .vip-gem{opacity:.92}

/* Niente cartellino «sei qui»: nel riferimento non c'è, e a dire dove sei ci pensa già
   la pastiglia verde (più la riga verde in tabella). Tolte le etichette dalla fascia,
   sarebbe per giunta rimasto l'unico testo lì dentro, sbilanciando la fila. */
.pg .vip-tag{display:none}

/* ── l'anello Esperienza, fuori dal pannello, etichetta SOPRA ── */
.pg .vip-xp{flex:0 0 auto;text-align:center;display:flex;flex-direction:column-reverse;
  gap:6px;padding:0 4px 0 12px}
.pg .vip-ring{width:74px;height:74px;border-radius:50%;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(#3d7fbd calc(var(--p,0)*1%),#BBD9EE 0)}
.pg .vip-ring-in{width:58px;height:58px;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 3px rgba(18,40,66,.12)}
/* I punti possono essere sette cifre (nel riferimento sono «0», da noi no): il numero
   si stringe per stare nel tondo invece di sbordare. Cifre tabellari, così le colonne
   non ballano quando il punteggio cambia. */
.pg .vip-ring-in b{font-size:.76em;font-weight:900;line-height:1;color:#12395c;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  max-width:52px;overflow:hidden;text-overflow:ellipsis}
.pg .vip-ring-in small{font-size:.58em;opacity:.6;font-weight:700;text-transform:uppercase}
.pg .vip-xp-lb{font-size:.7em;font-weight:700;letter-spacing:.03em;color:#41576d;
  text-transform:none}

/* ════════════ 4. LE PASTIGLIE: 4 MEDAGLIE + 4 GEMME ════════════
   La scala del riferimento non è una gradazione sola: i primi quattro gradini si
   CONQUISTANO (medaglie col nastro), gli ultimi quattro si POSSIEDONO (gemme). Due
   sagome diverse, così il salto di categoria si legge prima ancora dei nomi.
   Markup di B, invariato:  <div class="vip-gem g-SLUG"><i></i></div>
     .vip-gem:before/:after = i due capi del nastro (solo medaglie)
     i                      = il disco della medaglia · oppure la gemma sfaccettata
     i:before/i:after       = rilievo e ombra delle facce */
.pg .vip-gem{width:58px;height:58px;margin:0 auto;border-radius:50%;position:relative;
  display:flex;align-items:center;justify-content:center;overflow:visible;
  background:radial-gradient(circle at 50% 34%,#fff,#e3ebf2);
  box-shadow:inset 0 0 0 1px rgba(28,66,103,.12),0 2px 6px rgba(18,40,66,.14)}
.pg .vip-gem > i{display:block;position:relative;z-index:2}
.pg .vip-gem > i:before,.pg .vip-gem > i:after{content:"";position:absolute}

/* il gradino attuale: pastiglia verde piena (riferimento), non solo un anello */
.pg .is-now .vip-gem{background:radial-gradient(circle at 50% 34%,#a7d95c,#8DC63F);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 3px rgba(122,184,41,.28),
             0 4px 12px rgba(18,40,66,.2)}

/* ── 4a. LE MEDAGLIE ── disco metallico + nastro a due capi dietro ── */
.pg .g-rame > i,.pg .g-bronzo > i,.pg .g-argento > i,.pg .g-oro > i,
.pg .g-bronze > i,.pg .g-silver > i,.pg .g-gold > i{
  width:28px;height:28px;border-radius:50%;clip-path:none;margin-top:7px;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.28),inset 0 2px 3px rgba(255,255,255,.65),
             0 1px 3px rgba(18,40,66,.3)}
.pg .g-rame > i:before,.pg .g-bronzo > i:before,.pg .g-argento > i:before,
.pg .g-oro > i:before,.pg .g-bronze > i:before,.pg .g-silver > i:before,
.pg .g-gold > i:before{
  clip-path:none;background:none;border-radius:50%;inset:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),inset 0 1px 2px rgba(255,255,255,.5)}
.pg .g-rame > i:after,.pg .g-bronzo > i:after,.pg .g-argento > i:after,
.pg .g-oro > i:after,.pg .g-bronze > i:after,.pg .g-silver > i:after,
.pg .g-gold > i:after{
  clip-path:none;border-radius:50%;inset:auto auto 58% 18%;width:8px;height:5px;
  background:rgba(255,255,255,.55);filter:blur(1px);transform:rotate(-28deg)}

.pg .g-rame:before,.pg .g-rame:after,.pg .g-bronzo:before,.pg .g-bronzo:after,
.pg .g-argento:before,.pg .g-argento:after,.pg .g-oro:before,.pg .g-oro:after,
.pg .g-bronze:before,.pg .g-bronze:after,.pg .g-silver:before,.pg .g-silver:after,
.pg .g-gold:before,.pg .g-gold:after{
  content:"";position:absolute;top:7px;width:10px;height:19px;z-index:1;
  box-shadow:0 1px 2px rgba(18,40,66,.22)}
.pg .g-rame:before,.pg .g-bronzo:before,.pg .g-argento:before,.pg .g-oro:before,
.pg .g-bronze:before,.pg .g-silver:before,.pg .g-gold:before{
  left:15px;transform:rotate(-15deg);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.pg .g-rame:after,.pg .g-bronzo:after,.pg .g-argento:after,.pg .g-oro:after,
.pg .g-bronze:after,.pg .g-silver:after,.pg .g-gold:after{
  right:15px;transform:rotate(15deg);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}

.pg .g-rame > i{background:linear-gradient(150deg,#f3b183,#c4703a 48%,#8f4a1e)}
.pg .g-bronzo > i,.pg .g-bronze > i{background:linear-gradient(150deg,#f6cf94,#c98f3c 48%,#8a5a1c)}
.pg .g-argento > i,.pg .g-silver > i{background:linear-gradient(150deg,#fdfefe,#c3cfd9 48%,#8d9dab)}
.pg .g-oro > i,.pg .g-gold > i{background:linear-gradient(150deg,#ffeaa0,#f0bd35 48%,#c28c00)}
.pg .g-rame:before,.pg .g-rame:after{background:linear-gradient(180deg,#67c04a,#3f8c1a)}
.pg .g-bronzo:before,.pg .g-bronzo:after,
.pg .g-bronze:before,.pg .g-bronze:after{background:linear-gradient(180deg,#5b96e8,#2f5fbd)}
.pg .g-argento:before,.pg .g-argento:after,
.pg .g-silver:before,.pg .g-silver:after{background:linear-gradient(180deg,#a86bd8,#7233ab)}
.pg .g-oro:before,.pg .g-oro:after,
.pg .g-gold:before,.pg .g-gold:after{background:linear-gradient(180deg,#f4694f,#cc2a1c)}

/* ── 4b. LE GEMME ── taglio brillante: tavola piatta, spalle, punta ── */
.pg .g-rubino > i,.pg .g-zaffiro > i,.pg .g-diamante > i,.pg .g-vip > i,.pg .g-platinum > i{
  width:32px;height:28px;margin-top:2px;border-radius:0;
  clip-path:polygon(22% 0,78% 0,100% 33%,50% 100%,0 33%);
  filter:drop-shadow(0 2px 3px rgba(18,40,66,.3))}
.pg .g-rubino > i:before,.pg .g-zaffiro > i:before,.pg .g-diamante > i:before,
.pg .g-vip > i:before,.pg .g-platinum > i:before{
  inset:0;border-radius:0;background:rgba(255,255,255,.5);
  clip-path:polygon(22% 0,78% 0,88% 33%,12% 33%)}
.pg .g-rubino > i:after,.pg .g-zaffiro > i:after,.pg .g-diamante > i:after,
.pg .g-vip > i:after,.pg .g-platinum > i:after{
  inset:0;width:auto;height:auto;filter:none;transform:none;border-radius:0;
  background:rgba(0,0,0,.22);clip-path:polygon(50% 33%,100% 33%,50% 100%)}

.pg .g-rubino > i{background:linear-gradient(140deg,#ff8f8f,#e0243c 55%,#9c0d24)}
.pg .g-zaffiro > i{background:linear-gradient(140deg,#8fbaff,#2b53c4 55%,#14297a)}
.pg .g-diamante > i{background:linear-gradient(140deg,#c8fbf7,#4fc7cd 55%,#1d8a95)}
/* Il platino è quasi bianco e sulla pastiglia chiara sparirebbe: si scurisce il
   fianco e si tiene un filo di contorno, così la sagoma si legge anche da spenta. */
.pg .g-vip > i,.pg .g-platinum > i{
  background:linear-gradient(140deg,#ffffff,#c3d0dc 52%,#7d8f9f);
  filter:drop-shadow(0 0 .5px rgba(45,72,97,.55)) drop-shadow(0 2px 3px rgba(18,40,66,.3))}
.pg .g-vip > i:after,.pg .g-platinum > i:after{background:rgba(0,0,0,.3)}

/* ════════════ 5. LA TABELLA DEI LIVELLI ════════════
   Riferimento: testata azzurrina, righe alternate, colonne centrate, la
   percentuale grossa a destra. Righe ~44px: è una tabella da consultare. */
.pg .vip-tab{width:100%;border-collapse:collapse;font-size:.9em}
.pg .vip-tab th{background:#E8EEF3;color:#12406E;opacity:1;
  padding:9px 12px;font-size:.71em;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;text-align:center;
  border-bottom:1px solid rgba(28,66,103,.16)}
.pg .vip-tab th:first-child{text-align:left;border-radius:3px 0 0 0}
.pg .vip-tab th:last-child{border-radius:0 3px 0 0}
.pg .vip-tab td{padding:7px 12px;height:44px;box-sizing:border-box;
  text-align:center;vertical-align:middle;
  border-bottom:1px solid rgba(28,66,103,.07)}
.pg .vip-tab td:first-child{text-align:left}
.pg .vip-tab td b{color:#12395c;font-weight:700}
.pg .vip-tab th.num,.pg .vip-tab td.num{font-variant-numeric:tabular-nums}
.pg .vip-tab tbody tr:nth-child(even) td{background:#F4F8FA}
.pg .vip-tab tr.now td{background:rgba(122,184,41,.13)}
.pg .vip-tab tr.now td b{color:#6E8B3D}
.pg .vip-tab tr.off{opacity:.62}
/* la colonna del cashback: è il numero che il giocatore cerca, sta in grande */
.pg .vip-tab .cb{text-align:right;font-weight:900;font-size:1.06em;color:#12395c;
  font-variant-numeric:tabular-nums}
.pg .vip-tab tr.now .cb{color:#6E8B3D}
/* L'ultimo gradino ha un cashback di natura diversa (una forbice, non una
   percentuale fissa): nel riferimento è marcato in verde. Si colora SOLO quel
   numero — tingere anche il nome farebbe sembrare conquistato un livello che non lo è. */
.pg .vip-tab tbody tr:last-child .cb{color:#6E8B3D}

/* le pastiglie piccole in tabella tengono la stessa sagoma delle grandi */
.pg .vip-gem.sm{width:28px;height:28px;display:inline-flex;vertical-align:middle;
  margin:0 8px 0 0}
.pg .vip-gem.sm > i{margin-top:0}
.pg .g-rame.sm > i,.pg .g-bronzo.sm > i,.pg .g-argento.sm > i,.pg .g-oro.sm > i,
.pg .g-bronze.sm > i,.pg .g-silver.sm > i,.pg .g-gold.sm > i{
  width:15px;height:15px;margin-top:3px}
.pg .g-rubino.sm > i,.pg .g-zaffiro.sm > i,.pg .g-diamante.sm > i,.pg .g-vip.sm > i,
.pg .g-platinum.sm > i{width:16px;height:14px;margin-top:1px}
.pg .vip-gem.sm:before,.pg .vip-gem.sm:after{top:4px;width:6px;height:10px}
.pg .vip-gem.sm:before{left:6px} .pg .vip-gem.sm:after{right:6px}

.pg .vip-pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.76em;
  font-weight:800}
.pg .vip-pill.now{background:linear-gradient(180deg,#8dcb52,#5da31f);color:#fff}
.pg .vip-pill.on{background:rgba(61,127,189,.14);color:#2f6798}
.pg .vip-pill.off{background:rgba(28,66,103,.08);color:#5b7086}

/* la nota a piè di tabella (l'asterisco del riferimento) */
.pg .vip-note{margin:11px 2px 0;font-size:.78em;line-height:1.5;color:#5b7086}

/* ════════════ 6. IL RIQUADRO DEL CASHBACK (colonna destra del riferimento) ════════════ */
.pg .cb-box{border:1px solid #DCE4EC;border-radius:3px;overflow:hidden;
  background:#fff;min-width:246px}
.pg .cb-box-h{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#E8EEF3;padding:9px 13px;font-size:.8em;font-weight:700;color:#41576d}
.pg .cb-box-h b{font-size:1.14em;font-weight:900;color:#12395c}
.pg .cb-box-b{padding:11px 13px}
.pg .cb-box .pg-row{padding:6px 0}
.pg .cb-box .pg-btn{width:100%;margin-top:7px;border-radius:3px;font-size:.84em;
  letter-spacing:.02em;text-transform:uppercase}
.pg .cb-box .tc{display:block;text-align:center;margin-top:9px;font-size:.78em}

/* ════════════ 7. SCHERMI STRETTI ════════════ */
@media (max-width:640px){
  .pg .vip-b{padding:13px 9px}
  /* in colonna: le pastiglie vanno a capo, l'anello scende sotto */
  .pg .vip-row{flex-wrap:wrap}
  .pg .vip-band{flex-wrap:wrap;gap:8px 4px;padding:11px 7px;width:100%;flex-basis:100%}
  /* quattro per riga: la basa va scontata del vuoto, se no ce ne stanno tre e la
     fila resta sbilenca */
  .pg .vip-stop{flex:0 0 calc(25% - 4px)}
  /* in tabella la medaglietta fa scivolare il nome sotto: a questa larghezza il nome
     basta da solo, e la fascia sopra le mostra già tutte */
  .pg .vip-gem.sm{display:none}
  .pg .vip-gem{width:50px;height:50px}
  .pg .g-rame > i,.pg .g-bronzo > i,.pg .g-argento > i,.pg .g-oro > i,
  .pg .g-bronze > i,.pg .g-silver > i,.pg .g-gold > i{width:24px;height:24px;margin-top:6px}
  .pg .vip-gem:before,.pg .vip-gem:after{top:6px;width:9px;height:16px}
  .pg .vip-gem:before{left:12px} .pg .vip-gem:after{right:12px}
  .pg .g-rubino > i,.pg .g-zaffiro > i,.pg .g-diamante > i,.pg .g-vip > i,
  .pg .g-platinum > i{width:27px;height:24px}
  .pg .vip-xp{flex-basis:100%;padding:8px 0 0;flex-direction:column-reverse}
  .pg .vip-tab{font-size:.84em}
  .pg .vip-tab td,.pg .vip-tab th{padding:7px 7px}
}

/* ════════════ 8. LA REGOLA DEGLI ANGOLI ════════════
   Dalla schedatura degli screenshot: in tutto il pannello del riferimento NON c'è un
   angolo tondo oltre i 4px — card, pannelli e bottoni sono quasi squadrati. Il nostro
   tema di base usa 12px, che da solo faceva sembrare la pagina un'altra cosa. Qui si
   riallinea l'area conto, e SOLO quella (`.pg`). */
.pg .pg-card,.pg .pg-side,.pg .vip-band,.pg .cb-box{border-radius:3px}
.pg .pg-card{border:1px solid #DCE4EC;box-shadow:none}
.pg .pg-btn{border-radius:3px}
.pg .pg-input,.pg .pg-tile{border-radius:3px}
/* la striscia-titolo delle card resta (è la firma del nostro tema), ma squadrata */
.pg .pg-card-h{border-radius:0}

/* ════════════ 9. GIOCO RESPONSABILE (/player/limites) ════════════
   `.rl-row` era usata dal template ma NON definita da nessuna parte: i campi del form
   restavano `div` in colonna, uno sotto l'altro, e il pannello Autoesclusione veniva
   fuori schiacciato (la segnalazione «inguardabile»). Qui la riga esiste: campi
   affiancati, bottone in fondo, e su schermo stretto si impila per davvero. */
.pg .rl-row{display:grid;grid-template-columns:1.25fr 1fr 1fr auto;gap:10px;
  align-items:end;margin-top:10px}
.pg .rl-row > div{min-width:0}
.pg .rl-row label{display:block;font-size:.75em;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#5b7086;margin-bottom:4px}
.pg .rl-row .pg-input{width:100%;height:38px;box-sizing:border-box}
.pg .rl-row .pg-btn{height:38px;white-space:nowrap}
@media (max-width:640px){
  .pg .rl-row{grid-template-columns:1fr}
  .pg .rl-row .pg-btn{width:100%}
}

/* la card dell'autoesclusione: è l'azione che chiude il conto, si vede che è diversa */
.pg .pg-card-h[style*="8a1d12"]{border-radius:0}
/* nella riga dell'autoesclusione c'è un campo solo: senza un tetto si stirava per
   tutta la pagina, e una tendina da «7 giorni» larga 1200px sembra un errore */
.pg .rl-row > div:only-of-type{max-width:340px}

/* L'EMAIL NON VA A CAPO E SFONDA LA RIGA SUI TELEFONI STRETTI (misurato il 04/08, giro da
   loggato): `<b>` da 262px col bordo destro a 336 su uno schermo da 320 — l'indirizzo esce
   dallo schermo. Un indirizzo lungo non è un caso limite: esiste sempre, e qui la riga è
   «etichetta a sinistra, valore a destra», quindi il valore deve poter andare a capo invece
   di spingere. `min-width:0` perché dentro un flex il minimo è AUTO e nessun `wrap` morde
   finché la casella non può stringersi. */
.pg .pg-row{min-width:0}
.pg .pg-row > b{min-width:0;overflow-wrap:anywhere}