/* app.css — token DESIGN.md §2-4 (copia-incolla dai mockup) + componenti.
   Zero font esterni, zero CDN. Mobile-first, max-width 480px. */

:root{
  --primary:#0F766E; --primary-strong:#115E59; --primary-soft:#CCFBF1; --on-primary:#fff;
  --bg:#F6F8F9; --surface:#fff; --surface-2:#F1F5F9; --line:#E2E8F0;
  --text:#0F172A; --text-2:#475569; --text-3:#64748B;
  --trial-bg:#FEF3C7; --trial-fg:#92400E;
  --urgent-bg:#FEE2E2; --urgent-fg:#B91C1C;
  --ok-bg:#D1FAE5; --ok-fg:#065F46;
  --danger:#DC2626;
  --scrim:rgba(15,23,42,.45); --banner-chrome:#EDF1F4;
  --r-card:16px; --r-sheet:24px 24px 0 0; --r-pill:999px; --r-btn:12px;
  --shadow-card:0 1px 2px rgba(15,23,42,.06); --shadow-float:0 8px 24px rgba(15,23,42,.18);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
}
@media (prefers-color-scheme:dark){
  :root{
    --primary:#14B8A6; --primary-strong:#0D9488; --primary-soft:#134E4A; --on-primary:#04291F;
    --bg:#0B1220; --surface:#151E2E; --surface-2:#1E293B; --line:#2B3A52;
    --text:#E8EEF7; --text-2:#A5B4CB; --text-3:#8296B3;
    --trial-bg:#453305; --trial-fg:#FCD34D;
    --urgent-bg:#4C1512; --urgent-fg:#FCA5A5;
    --ok-bg:#053324; --ok-fg:#6EE7B7;
    --scrim:rgba(2,6,17,.6); --banner-chrome:#101826;
    --shadow-card:0 1px 2px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  font-family:system-ui,"Roboto","Segoe UI",sans-serif;background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.5;min-height:100%;
}
#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;min-width:44px;min-height:44px}
a{color:var(--primary-strong)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-btn);height:48px;padding:0 12px;width:100%}
textarea{height:auto;padding:10px 12px}
.num,input[type=date]{font-variant-numeric:tabular-nums}

/* appbar + strip */
.appbar{display:flex;align-items:center;justify-content:space-between;padding:var(--s-1) var(--s-4) 10px;position:sticky;top:0;background:var(--bg);z-index:5}
.appbar h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-btn);font-size:20px;color:var(--text-2)}
.strip{margin:0 var(--s-4) 14px;background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--shadow-card);padding:9px 16px;font-size:14px;color:var(--text-2);display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.strip b{color:var(--text)}
.screen{flex:1;padding:0 var(--s-4) calc(96px + env(safe-area-inset-bottom));position:relative}

/* TimerExpress pill (§6.5) */
.pill-express{margin:0 var(--s-4) 12px;height:36px;border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary-strong);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:13px;font-weight:700;position:relative;overflow:hidden}
.pill-express .t{margin-left:auto;font-variant-numeric:tabular-nums}
.pill-express .pbar{position:absolute;left:0;bottom:0;height:3px;background:var(--primary);border-radius:2px;transition:width 1s linear}
.pill-express.expired{background:var(--surface-2);color:var(--text-2)}
.pill-express[hidden]{display:none}

/* CardAbbonamento (§6.1) */
.subcard-wrap{position:relative;overflow:hidden;border-radius:var(--r-card);margin-bottom:12px}
.subcard-swipe{position:absolute;inset:0;display:flex;justify-content:flex-end;z-index:0}
.swipe-btn{color:var(--on-primary);font-weight:700;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:84px;padding:0 4px;border-radius:0}
.swipe-pay{background:var(--primary)}
.swipe-arch{background:var(--text-3)}
.swipe-del{background:var(--danger)}
.subcard{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);min-height:76px;padding:14px 12px;position:relative;z-index:1;width:100%;text-align:left;border:1px solid transparent}
.subcard:active{background:var(--surface-2);transform:scale(.99)}
.subcard.hot{border-color:var(--urgent-bg)}
.logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:17px;flex:none;background:var(--primary)}
.body{flex:1;min-width:0}
.name{font-weight:700;font-size:16px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.price{font-weight:800;font-size:17px;line-height:1.2;font-variant-numeric:tabular-nums;margin-top:2px;color:var(--primary)}
.meta{font-size:14px;color:var(--text-3);margin-top:2px}
.cta-mini{margin-top:8px;background:var(--primary);color:var(--on-primary);border-radius:var(--r-btn);height:44px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;width:100%}
.readonly-tag{font-size:11px;font-weight:700;color:var(--text-3);background:var(--surface-2);border-radius:var(--r-pill);padding:2px 8px}

/* BadgeScadenza (§6.2) — colore + icona + testo, mai solo colore */
.badge{font-size:13px;line-height:16px;font-weight:700;border-radius:var(--r-pill);padding:4px 10px;display:flex;gap:5px;align-items:center;white-space:nowrap;flex:none}
.b-urgent{background:var(--urgent-bg);color:var(--urgent-fg)}
.b-trial{background:var(--trial-bg);color:var(--trial-fg)}
.b-ok{background:var(--ok-bg);color:var(--ok-fg)}
.b-neutral{background:var(--surface-2);color:var(--text-2);font-weight:500}

/* FAB e nav (§6.8) */
body.has-banner .screen{padding-bottom:calc(96px + 110px + env(safe-area-inset-bottom))}
.fab{position:fixed;bottom:calc(68px + 16px + env(safe-area-inset-bottom));right:max(16px,calc(50% - 240px + 16px));width:56px;height:56px;border-radius:18px;background:var(--primary);color:var(--on-primary);font-size:28px;display:grid;place-items:center;box-shadow:var(--shadow-float);font-weight:300;z-index:6}
@media (min-width:480px){.fab{right:calc(50% - 240px + 16px)}}
.bottomnav{display:flex;background:var(--surface);border-top:1px solid var(--line);height:68px;position:fixed;left:0;right:0;bottom:0;z-index:7;padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:480px){.bottomnav{max-width:480px;left:50%;transform:translateX(-50%)}}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:700;color:var(--text-3);min-height:56px}
.tab.on{color:var(--primary)}
.tab .ico{font-size:20px}

/* Sheet generica (§6.3): 92dvh, maniglia, mai fullscreen */
.sheet-wrap{position:fixed;inset:0;background:var(--scrim);z-index:20;display:flex;align-items:flex-end}
.sheet{width:100%;max-width:480px;margin:0 auto;background:var(--surface);border-radius:var(--r-sheet);height:92dvh;display:flex;flex-direction:column;box-shadow:var(--shadow-float)}
.handle{width:36px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 4px;flex:none}
.sheet-head{padding:6px 20px 10px;display:flex;align-items:flex-start;gap:8px}
.sheet-head h2{font-size:18px;font-weight:700;flex:1}
.sheet-head p{font-size:14px;color:var(--text-3);margin-top:2px}
.sheet-body{flex:1;overflow-y:auto;padding:0 20px;-webkit-overflow-scrolling:touch}
.sheet-foot{border-top:1px solid var(--line);background:var(--surface);padding:12px 20px calc(16px + env(safe-area-inset-bottom));flex:none}
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:up .18s ease-out}
  @keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){.sheet,.sheet-wrap{animation:none;transition:none}}

/* CatalogSearch */
.search{height:48px;border:1.5px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--bg);margin-bottom:12px}
.search input{border:none;background:transparent;height:100%;padding:0}
.label{font-size:12px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;padding:8px 0}
.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.chip{min-height:44px;border:1.5px solid var(--line);border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;color:var(--text);background:var(--surface);padding:0 8px;text-align:center}
.chip .d{width:16px;height:16px;border-radius:5px;flex:none}
.chip.sel{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-strong);font-weight:700}
.clist{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.crow{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px;border-radius:12px;text-align:left;width:100%}
.crow:hover,.crow:focus-visible{background:var(--surface-2)}
.crow .cn{font-weight:600;font-size:15px;flex:1}
.crow .cp{font-weight:700;font-size:14px;color:var(--primary);font-variant-numeric:tabular-nums}
.crow .cc{font-size:12px;color:var(--text-3)}

/* form */
.form{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.row{display:flex;align-items:center;gap:12px}
.field{flex:1}
.field label{font-size:14px;color:var(--text-2);font-weight:500;display:block;margin-bottom:4px}
.seg{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;min-height:48px;font-size:12px;font-weight:600;flex-wrap:wrap}
.seg button{flex:1 0 33%;color:var(--text-3);min-height:44px}
.seg button.on{background:var(--primary);color:var(--on-primary)}
.switch{display:flex;align-items:center;justify-content:between;justify-content:space-between;min-height:44px;gap:10px}
.switch .txt{font-size:15px;font-weight:600;flex:1}
.track{width:46px;height:26px;border-radius:var(--r-pill);background:var(--line);position:relative;flex:none;border:none}
.track i{position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.track.on{background:var(--primary)}
.track.on i{left:22px}
.save{height:52px;border-radius:14px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-size:16px;font-weight:800;width:100%}
.save:disabled{opacity:.5}
.alt{text-align:center;font-size:14px;color:var(--text-2);margin-top:10px}
.alt b{color:var(--primary-strong)}

/* bottoni */
.btn{height:44px;border-radius:var(--r-btn);display:grid;place-items:center;font-size:14px;font-weight:700;padding:0 14px}
.btn.prim{background:var(--primary);color:var(--on-primary)}
.btn.sec{border:1.5px solid var(--line);color:var(--text);background:var(--surface)}
.btn-row{display:flex;gap:8px;margin-top:12px}
.btn-row .btn{flex:1}
.btn-ghost{color:var(--text-2);font-size:14px;font-weight:600}
.btn-danger{color:var(--danger);font-weight:700;font-size:14px;min-height:44px;width:100%;text-align:left;padding:10px 2px}

/* onboarding S0 */
.onb{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 24px calc(32px + env(safe-area-inset-bottom));gap:16px;text-align:center}
.onb .logo-big{font-size:56px;line-height:1}
.onb h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.onb .q{font-size:16px;color:var(--text-2);margin-top:8px}
.count-chips{display:flex;gap:10px;justify-content:center;margin-top:8px}
.count-chips button{min-width:56px;min-height:56px;border-radius:var(--r-pill);border:1.5px solid var(--line);font-weight:800;font-size:17px;background:var(--surface)}
.count-chips button.sel{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-strong)}
.estimate{min-height:24px;font-size:15px;color:var(--text-2);opacity:0;transform:translateY(6px);transition:all .2s;font-variant-numeric:tabular-nums}
.estimate.show{opacity:1;transform:none}
.onb .save{margin-top:8px}
.onb .foot{font-size:12px;color:var(--text-3)}

/* push opt-in S2 */
.optin h2{font-size:18px;font-weight:700}
.optin p{font-size:15px;color:var(--text-2);margin:8px 0 16px}

/* dashboard */
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:16px;margin-bottom:12px}
.kicker{font-size:12px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.total{font-size:32px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.total small{font-size:15px;font-weight:600;color:var(--text-3)}
.sub{font-size:14px;color:var(--text-2);margin-top:4px}
.chart{display:flex;align-items:flex-end;gap:5px;height:96px;margin-top:14px}
.bar{flex:1;background:var(--primary-soft);border-radius:5px 5px 2px 2px;position:relative;min-height:4px;border:none;padding:0}
.bar.now{background:var(--primary)}
.bar span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:9px;color:var(--text-3);font-weight:600}
.cats{margin-top:30px;display:flex;flex-direction:column;gap:10px}
.cat{display:grid;grid-template-columns:96px 1fr 74px;align-items:center;gap:10px;font-size:14px}
.cat .track2{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.cat .fill{height:100%;border-radius:4px;background:var(--primary)}
.cat .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.score-row{display:flex;gap:16px;align-items:center}
.gauge{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;background:conic-gradient(var(--g, var(--primary)) 0 calc(var(--p,0) * 1%), var(--surface-2) calc(var(--p,0) * 1%) 100%)}
.gauge::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}
.gauge b{position:relative;z-index:1;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.tier{display:inline-flex;align-items:center;gap:6px;background:var(--ok-bg);color:var(--ok-fg);border-radius:var(--r-pill);padding:4px 10px;font-size:13px;font-weight:700;margin-top:6px}
.tier.warn{background:var(--trial-bg);color:var(--trial-fg)}
.tier.hot{background:var(--urgent-bg);color:var(--urgent-fg)}
.ghost{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:10px 0;font-size:14px}
.ghost b{font-variant-numeric:tabular-nums}

/* AdBannerBottom (§6.4): altezza riservata fissa, zero ombra, solo dashboard */
.adwrap{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:6;padding:6px 16px 8px;background:var(--bg);border-top:1px solid var(--line);max-width:480px;margin:0 auto}
@media (min-width:480px){.adwrap{max-width:480px;left:50%;transform:translateX(-50%)}}
.adlabel{font-size:9px;font-weight:700;color:var(--text-3);letter-spacing:.08em;margin-bottom:3px;text-transform:uppercase}
.adbox{height:84px;max-width:320px;margin:0 auto;border:1px dashed var(--text-3);background:var(--banner-chrome);border-radius:10px;display:flex;flex-direction:column;gap:2px;place-items:center;justify-content:center;color:var(--text-2);font-size:12.5px;font-weight:600;text-align:center;line-height:1.4;padding:0 10px;box-shadow:none}
.adbox span{font-weight:400;font-size:11.5px;color:var(--text-3)}
/* overlay ad Express */
.ad-overlay{position:fixed;inset:0;background:var(--scrim);z-index:40;display:grid;place-items:center;padding:20px}
.ad-card{background:var(--surface);border-radius:var(--r-card);max-width:340px;width:100%;padding:16px;box-shadow:var(--shadow-float)}
.ad-label{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase}
.ad-body{min-height:80px;display:grid;place-items:center;text-align:center;padding:10px 0;font-size:15px}
.ad-body p{color:var(--text-2);font-size:14px;margin-top:6px}
.ad-progress{height:4px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.ad-progress i{display:block;height:100%;width:0;background:var(--primary)}
.ad-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.ad-count{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text-3)}
.btn-ghost.ready{color:var(--primary-strong);font-weight:800}
.ad-note{font-size:11.5px;color:var(--text-3);margin-top:8px}

/* paywall sheet */
.benefits{font-size:14.5px;line-height:2;padding-bottom:8px}
.prices{display:flex;gap:10px;margin:10px 0}
.price-card{flex:1;border:1.5px solid var(--line);border-radius:14px;padding:12px;position:relative;text-align:center;background:var(--surface)}
.price-card.best{border-color:var(--primary);background:var(--primary-soft)}
.price-card .k{font-size:12px;font-weight:700;color:var(--text-3);text-transform:uppercase}
.price-card .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.price-card .n{font-size:11.5px;color:var(--text-2)}
.best-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--on-primary);font-size:10px;font-weight:800;border-radius:var(--r-pill);padding:2px 10px;white-space:nowrap}
.fineprint{text-align:center;font-size:12px;color:var(--text-3);padding:8px 0 0}
.divider{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--text-3);font-size:12px;font-weight:700;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.express{border:1.5px dashed var(--primary);border-radius:14px;padding:14px}
.express h3{font-size:15px;font-weight:800}
.express p{font-size:13px;color:var(--text-2);line-height:1.5;margin-top:3px}
.slots{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:12px;font-weight:700;color:var(--text-2)}
.tick{width:26px;height:6px;border-radius:3px;background:var(--primary)}
.tick.off{background:var(--line)}
.express .go{margin-top:10px;height:44px;border-radius:12px;border:1.5px solid var(--primary);color:var(--primary-strong);background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:14.5px;width:100%}
.ghost-link{text-align:center;font-size:13px;color:var(--text-3);padding-top:12px;width:100%}

/* toast + empty state */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));background:var(--text);color:var(--surface);border-radius:var(--r-pill);padding:10px 18px;font-size:14px;font-weight:600;box-shadow:var(--shadow-float);z-index:50;max-width:90vw}
.empty{text-align:center;padding:48px 24px;color:var(--text-2)}
.empty h2{font-size:18px;color:var(--text);margin-bottom:8px}
.offline-strip{margin:0 var(--s-4) 12px;background:var(--surface-2);border-radius:var(--r-pill);padding:8px 14px;font-size:13px;color:var(--text-2);display:flex;justify-content:space-between;align-items:center}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sh 1s infinite;border-radius:var(--r-card);height:76px;margin-bottom:12px}
@keyframes sh{to{background-position:-200% 0}}

/* dettaglio */
.detail-hero{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.detail-hero .logo{width:56px;height:56px;border-radius:14px;font-size:22px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.kv .k{color:var(--text-3)}
.kv .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.hist{max-height:180px;overflow-y:auto}
.hist .kv{border-top:none;border-bottom:1px dashed var(--line);font-size:14px}