/* ── PAGINE DEL TEMPLATE CORALLO ─────────────────────────────
   Impaginazione di Accesso, Oggi, Amici e Profilo ricalcata su
   ANTEPRIMA.html del template «Nèmm · Corallo». Classi con il
   prefisso tp- per non toccare quelle che l'app usa già.

   La struttura vale per entrambi i temi; i colori arrivano dalle
   variabili: in chiaro sono quelle Corallo (theme-corallo.css), in
   scuro l'accento arancio di sempre su superfici scure.          */

:root{--tp-accent:var(--acc);--tp-ink:var(--acc);--tp-soft:rgba(255,107,61,.13);
  --tp-surface:var(--s1);--tp-muted:var(--t3b);--tp-line:var(--b-weak);--tp-shadow:none}
.light{--tp-accent:#ff626a;--tp-ink:#b9253b;--tp-soft:#fff0ed;
  --tp-surface:#fff;--tp-muted:#566078;--tp-line:#eee7e5;--tp-shadow:0 5px 22px rgb(94 55 45 / 4%)}

/* testata: marchio a sinistra, scorciatoie o un tasto a destra */
.tp-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:18px 16px 0}
.tp-brand{display:flex;align-items:center;gap:9px;font:850 25px/1 var(--sans);letter-spacing:-1px;color:var(--t1)}
.tp-brand .nemm-icon{width:38px;height:38px;color:var(--tp-accent)}
.tp-title{padding:14px 16px 0}
.tp-title .h1{font-size:40px;line-height:1.1;font-weight:850;letter-spacing:-1.5px}
.tp-title .sub{font-size:16px;margin-top:4px}
.tp-body{padding:16px 16px 0;display:flex;flex-direction:column;gap:16px}

/* bottoni del template, sopra alle classi di sempre */
.tp-btn{min-height:46px;display:flex;justify-content:center;align-items:center;gap:8px;padding:11px 14px;
  border-radius:16px;font:700 14px/1.2 var(--sans);text-align:center}
.tp-primary{background:var(--tp-accent);color:#fff;width:100%;min-height:50px}
.light .tp-primary{color:#192139}
.tp-secondary{background:var(--tp-soft);color:var(--tp-ink)}
.tp-outline{border:1px solid var(--tp-ink);color:var(--tp-ink);width:100%}
.tp-text{padding:8px 0;min-height:40px;color:var(--tp-ink);font:500 13px var(--sans);background:none;white-space:nowrap}
.tp-btn .nemm-icon{width:20px;height:20px}

.tp-short{display:flex;gap:6px}
.tp-short .tp-btn{flex-direction:column;padding:8px;min-height:0;font-size:10px;gap:2px}
.tp-short .nemm-icon{width:24px;height:24px}
.tp-iconbtn{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--tp-soft);color:var(--tp-ink)}

/* card */
.tp-card{background:var(--tp-surface);padding:20px 16px;border-radius:22px;box-shadow:var(--tp-shadow);text-align:left}
:root:not(.light) .tp-card{border:1px solid var(--b-strong)}
.tp-card h2,.tp-h2{font:800 23px/1.2 var(--sans);letter-spacing:-.65px;margin:16px 0 10px;color:var(--t1)}
.tp-card h3{font:800 16px/1.25 var(--sans);margin:0 0 6px;color:var(--t1)}
.tp-card p{margin:0;color:var(--tp-muted);font-size:14px;line-height:1.45}
.tp-hero{text-align:center}
.tp-hero p{margin-bottom:16px}
.tp-hero-icon{display:grid;place-items:center;width:88px;height:88px;margin:0 auto;border-radius:50%;
  background:var(--tp-soft);color:var(--tp-accent)}
.tp-hero-icon .nemm-icon{width:54px;height:54px}
.tp-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.tp-actions .tp-btn{padding:9px 6px;font-size:12px;gap:5px}
.tp-row{display:flex;align-items:center;gap:14px}
.tp-row.top{align-items:flex-start}
.tp-pad{width:48px;height:54px;flex:none;display:grid;place-items:center;border-radius:16px;
  background:var(--tp-soft);color:var(--tp-accent)}
.tp-pad .nemm-icon{width:32px;height:32px}
.tp-grow{flex:1;min-width:0}
.tp-grow>.tp-btn{margin-top:10px;width:100%;font-size:12px}
.tp-spread{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tp-spread h3{margin:0}
.tp-spread .tp-text{font-size:12px}
.tp-badge{display:inline-block;background:var(--tp-soft);color:var(--tp-ink);padding:5px 12px;
  border-radius:30px;font:700 13px var(--sans)}
.tp-notice{display:flex;align-items:center;gap:12px;background:var(--tp-soft);padding:15px 12px;border-radius:16px;margin-top:14px}
.tp-notice .nemm-icon{color:var(--tp-accent);width:30px;height:30px}
.tp-notice p{font-size:12px;color:var(--tp-muted);margin:0;line-height:1.5}
.tp-last{display:block;width:100%;text-align:left;background:none;padding:0;margin-top:8px}

/* Amici prima dell'accesso */
.tp-friends{position:relative;width:168px;height:156px;margin:32px auto 0;color:var(--tp-accent)}
.tp-friends>.nemm-icon{width:140px;height:140px}
.tp-friends span{position:absolute;right:0;bottom:0;background:var(--bg);border-radius:20px;padding:8px;display:flex}
.tp-friends span .nemm-icon{width:48px;height:48px}
.tp-card.accesso p{font-size:17px;margin:0 0 24px}

/* Profilo */
.tp-avatar{width:82px;height:82px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:40px;
  background:var(--tp-soft);color:var(--tp-accent)}
.tp-name{font:800 20px/1.2 var(--sans);letter-spacing:-.4px;margin:0 0 8px;color:var(--t1);display:flex;align-items:center;gap:6px}
.tp-stats{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;margin:22px 0;padding-top:20px;border-top:1px solid var(--tp-line)}
.tp-stats div{text-align:center;display:flex;flex-direction:column}
.tp-stats div+div{border-left:1px solid var(--tp-line)}
.tp-stats strong{font:800 24px var(--sans);color:var(--t1);font-variant-numeric:tabular-nums}
.tp-stats span{color:var(--tp-muted);font-size:13px}
.tp-bio{font-size:14px;line-height:1.6;color:var(--t2b);margin:0 0 18px}
.tp-small{font:800 19px var(--sans);margin:0;color:var(--t1)}
.tp-spread>.tp-btn{min-height:36px;padding:7px 12px;font-size:12px}
.tp-set{width:100%;display:flex;align-items:center;gap:12px;padding:17px 0;background:none;
  border-bottom:1px solid var(--tp-line);text-align:left;min-height:52px;color:var(--t1)}
.tp-set .nemm-icon{color:var(--tp-accent)}
.tp-set span{flex:1;font-size:14px}
.tp-set small{font-size:14px;color:var(--tp-muted)}
.tp-card.tp-set{padding:20px 16px;border-bottom:0}

/* Accesso */
.tp-login{display:flex;flex-direction:column;align-items:center;margin-top:30px}
.tp-login .tp-brand{flex-direction:column;font-size:58px;letter-spacing:-2px;gap:6px}
.tp-login .tp-brand .nemm-icon{width:76px;height:76px}
/* Cinque macchie pastello, ferme: niente movimento né tocco. */
.tp-blobs{display:flex;align-items:center;justify-content:center;gap:5px;height:200px;flex:1 1 auto;max-height:260px}
.tp-blobs i{width:62px;height:78px;background:#ffc4c1;border-radius:52% 48% 65% 35%;transform:rotate(25deg);filter:blur(5px);opacity:.72}
.tp-blobs i:nth-child(2){background:#ffdcc5;transform:translateY(28px) rotate(-20deg)}
.tp-blobs i:nth-child(3){background:#f4bad1;transform:translateY(-20px)}
.tp-blobs i:nth-child(4){background:#ffe8b6;transform:rotate(-30deg)}
.tp-blobs i:nth-child(5){background:#e3c9f3;transform:translateY(20px)}
:root:not(.light) .tp-blobs i{opacity:.35}
.tp-login-actions{display:flex;flex-direction:column;gap:13px}
.tp-login-actions>.tp-text{color:var(--t1)}
.tp-login-actions .tp-notice{margin-top:8px}

/* Su telefono, come nel template: titoletti accanto a un link più
   piccoli, così titolo e link stanno su una riga. */
@media (max-width:480px){.tp-spread h3{font-size:14px}.tp-actions .tp-btn{font-size:11px}}

/* Primo avvio fermo, come nel template: le comparse animate e il
   bilanciere che si carica non partono più. */
#onb *{animation:none!important;transition:none!important}
#onb .tp-login-actions .meta{margin-top:0!important}
/* Telefoni stretti (320 px): numeri e titoletti un filo più piccoli,
   così «7,2k kg» e «Chi vede cosa» stanno su una riga. */
@media (max-width:360px){.tp-stats strong{font-size:20px}.tp-small{font-size:17px}
  .tp-title .h1{font-size:36px}}