:root{
  --bg:#EEF3FB; --app:#F7F9FD; --surface:#FFFFFF; --sunken:#F1F4FA; --border:#E6EBF3;
  --ink:#0E1B3D; --text:#1E2A44; --muted:#5B677E; --subtle:#6B768B;
  --accent:#2563EB; --accent-2:#3B82F6; --accent-soft:#E8F0FE; --on-accent:#FFFFFF;
  --ok:#15803D; --ok-bg:#E7F6EC; --warn:#B45309; --warn-bg:#FDF1DC;
  --alert:#DC2626; --alert-bg:#FDECEC; --info:#2563EB; --info-bg:#E8F0FE;
  --tip-bg:#F3F7FF;
  --s1:#2563EB; --s2:#C084FC; --s3:#16A34A;           /* palette grafici validata (light) */
  --grid:#E9EDF4; --axis:#8B95A8;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgb(14 27 61 / .04), 0 8px 24px -12px rgb(14 27 61 / .08);
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0F1A; --app:#0E1422; --surface:#151C2C; --sunken:#111827; --border:#232C3F;
    --ink:#EEF2FA; --text:#D9E0EC; --muted:#A8B1C3; --subtle:#8D97AB;
    --accent:#6C9BFF; --accent-2:#8AB0FF; --accent-soft:#1A2744; --on-accent:#0A0F1A;
    --ok:#5FD08A; --ok-bg:#12291C; --warn:#F2B75B; --warn-bg:#2E2412;
    --alert:#F58A8A; --alert-bg:#331818; --info:#8AB0FF; --info-bg:#1A2744; --tip-bg:#141F36;
    --s1:#1D5FE0; --s2:#B36BE0; --s3:#239B5E;         /* palette grafici validata (dark) */
    --grid:#222B3D; --axis:#7C879B;
    --shadow:0 1px 2px rgb(0 0 0 / .3); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0F1A; --app:#0E1422; --surface:#151C2C; --sunken:#111827; --border:#232C3F;
  --ink:#EEF2FA; --text:#D9E0EC; --muted:#A8B1C3; --subtle:#8D97AB;
  --accent:#6C9BFF; --accent-2:#8AB0FF; --accent-soft:#1A2744; --on-accent:#0A0F1A;
  --ok:#5FD08A; --ok-bg:#12291C; --warn:#F2B75B; --warn-bg:#2E2412;
  --alert:#F58A8A; --alert-bg:#331818; --info:#8AB0FF; --info-bg:#1A2744; --tip-bg:#141F36;
  --s1:#1D5FE0; --s2:#B36BE0; --s3:#239B5E; --grid:#222B3D; --axis:#7C879B;
  --shadow:0 1px 2px rgb(0 0 0 / .3); color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.ic{width:1em;height:1em;fill:currentColor;flex:none;display:inline-block;vertical-align:-.125em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}



/* ---------- app shell ---------- */
.view{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 24px;scrollbar-width:none;position:relative}
.view::-webkit-scrollbar{display:none}
.tabbar{flex:none;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--border);padding:8px 4px 22px}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--muted);min-height:44px;padding-top:4px}
.tabbar .ic{font-size:24px}
.tabbar button[aria-current="page"]{color:var(--accent);font-weight:600}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
.stack>*+*{margin-top:12px}
.row{display:flex;align-items:center}
.grow{flex:1;min-width:0}
.icon-tile{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;flex:none}
.t-blue{background:var(--info-bg);color:var(--info)} .t-red{background:var(--alert-bg);color:var(--alert)}
.t-green{background:var(--ok-bg);color:var(--ok)} .t-gray{background:var(--sunken);color:var(--muted)}
.t-yellow{background:var(--warn-bg);color:var(--warn)}
.chev{color:var(--subtle);font-size:18px;margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;padding:5px 12px;border-radius:999px;white-space:nowrap}
.pill .ic{font-size:13px}
.pill.pay{background:var(--warn-bg);color:var(--warn)} .pill.plan,.pill.studio{background:var(--info-bg);color:var(--info)}
.pill.paid{background:var(--ok-bg);color:var(--ok)} .pill.late{background:var(--alert-bg);color:var(--alert)}
.pill.draft{background:var(--sunken);color:var(--muted)}
.pill.up{background:var(--ok-bg);color:var(--ok);padding:4px 10px}
.pill.sm{font-size:12px;padding:3px 9px}
.press{transition:transform .15s cubic-bezier(.16,1,.3,1)} .press:active{transform:scale(.98)}
.label{font-size:14px;color:var(--text);font-weight:500}
.sub{font-size:13px;color:var(--muted)}
.stima{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);background:var(--sunken);padding:2px 6px;border-radius:6px;vertical-align:middle}
.sec-t{font-size:13px;font-weight:600;color:var(--muted);margin:22px 4px 10px}
.foot-note{font-size:12px;color:var(--subtle);text-align:center;margin:18px 8px 4px;line-height:1.5}

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:12px;padding:4px 4px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand b{display:block;font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
.brand small{display:block;font-size:9px;letter-spacing:.08em;color:var(--muted);margin-top:4px;font-weight:600}
.top .spacer{flex:1}
.bell{position:relative;width:44px;height:44px;display:grid;place-items:center;font-size:24px;color:var(--ink)}
.bell.dot::after{content:"";position:absolute;top:10px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--alert);box-shadow:0 0 0 2px var(--app)}
.avatar{width:44px;height:44px;border-radius:50%;background:#B7C3D8;color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:1fr 128px;align-items:end;min-height:190px;padding:10px 4px 2px}
.hero .hello{font-size:22px;color:var(--muted);font-weight:500;letter-spacing:-.01em}
.hero h1{font-size:36px;line-height:1.02;letter-spacing:-.035em;color:var(--ink);font-weight:800;margin-top:4px;text-wrap:balance}
.hero h1 span{color:var(--accent)}
.hero p{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.45;max-width:30ch}
.mascot{position:relative;height:178px;align-self:stretch}
.mascot svg{position:absolute;right:-6px;bottom:0;height:100%;width:auto}
.scribble{position:absolute;font-family:'Caveat',cursive;color:var(--ink);font-size:21px;line-height:1;transform:rotate(-14deg)}

/* ---------- kpi ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{padding:14px 10px 14px 12px;text-align:left;min-width:0}
.kpi .icon-tile{width:36px;height:36px;border-radius:11px;font-size:19px;margin-bottom:12px}
.kpi .k{font-size:12px;color:var(--text);font-weight:500;line-height:1.25}
.kpi .v{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin:6px 0 6px;white-space:nowrap}
.kpi .n{font-size:12px;color:var(--muted);line-height:1.3}
.kpi.k1 .k,.kpi.k3 .k{color:var(--accent)}

/* ---------- limite ---------- */
.limit{padding:16px}
.limit h3{font-size:16px;font-weight:600;color:var(--ink);margin-left:12px}
.limit .info{margin-left:auto;width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;font-size:20px;color:var(--muted)}
.bar{height:14px;border-radius:99px;background:var(--sunken);overflow:hidden;flex:1}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-2),var(--accent));width:0;transition:width .5s cubic-bezier(.16,1,.3,1)}
.bar.green>i{background:var(--s3)}
.bar.thin{height:8px}
.limit .pct{font-size:18px;font-weight:700;color:var(--ink);margin-left:16px;width:48px;text-align:right}
.limit .foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px}
.limit .foot b{font-size:18px;color:var(--ink)} .limit .foot .of{color:var(--muted);font-size:14px}
.limit .foot .rest{text-align:right;font-size:12px;color:var(--muted);line-height:1.35}



.mascot img{position:absolute;right:-8px;bottom:0;width:138px;height:auto;user-select:none;-webkit-user-drag:none}
.tax-hero .mascot img{width:auto;height:128px;right:6px}
.salvo-hero{display:block;height:150px;width:auto;margin:0 auto 12px}
.salvo-peek{height:46px;width:auto;margin-left:auto;transform:scaleX(-1)}
.salvo-empty{display:block;height:110px;width:auto;margin:0 auto 10px}

.status-line{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;text-align:left}
.status-line .icon-tile{width:38px;height:38px;border-radius:12px;font-size:20px}
.status-line .sl-t{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.status-line .sl-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.status-line.st-ok{border-color:color-mix(in srgb,var(--ok) 25%,var(--border))}
.status-line.st-check{border-color:color-mix(in srgb,var(--warn) 30%,var(--border))}
.status-line.st-alert{border-color:color-mix(in srgb,var(--alert) 35%,var(--border));background:color-mix(in srgb,var(--alert-bg) 55%,var(--surface))}

/* ---------- momento firma: scontrino che cade in Salvo ---------- */
.firma{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:rgb(10 15 26 / .45);padding:24px}
.firma-on .firma{display:flex}
.firma-card{background:var(--surface);border-radius:26px;padding:22px 20px 18px;width:100%;max-width:340px;text-align:center;box-shadow:0 30px 60px -20px rgb(0 0 0 / .35);animation:pop .35s cubic-bezier(.16,1,.3,1) both}
.receipt{position:relative;margin:0 auto;width:230px;background:#FFFDF6;color:#1E2A44;border:1px solid #EFE8D5;border-bottom:2px dashed #C9C2AE;border-radius:6px 6px 0 0;padding:12px 14px 12px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12px;text-align:left;animation:print .8s cubic-bezier(.16,1,.3,1) .15s both}
.receipt .r-h{font-weight:700;border-bottom:1px dashed #C9C2AE;padding-bottom:6px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-l{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.r-l.tot{border-top:1px dashed #C9C2AE;margin-top:4px;padding-top:6px;font-weight:700}
.firma-salvo{height:118px;width:auto;margin:8px auto 0;display:block}
.firma-t{font-size:20px;font-weight:700;color:var(--ink);margin-top:6px;letter-spacing:-.01em}
.firma-s{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.4}
.firma-card .btn{margin-top:10px}
.firma-card.drop .receipt{animation:dropin .6s cubic-bezier(.55,0,1,.45) forwards}
.firma-card.drop .firma-salvo{animation:bounce .5s .45s both}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes dropin{to{transform:translateY(150px) scale(.15);opacity:0}}
@keyframes bounce{40%{transform:translateY(-14px) scale(1.06)}70%{transform:translateY(2px)}}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.firma{position:fixed}

/* ---------- card del mese (da condividere) ---------- */
.month-teaser{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;text-align:left}
.month-teaser .mt-salvo{height:62px;width:auto;flex:none}
.month-teaser .mt-big{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-top:2px}
.story{aspect-ratio:9/16;max-width:300px;width:100%;margin:0 auto;border-radius:26px;padding:20px 18px 16px;background:linear-gradient(170deg,#FFFFFF 0%,#E6EEFC 60%,#D3E1FA 100%);color:#0E1B3D;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 24px 50px -22px rgb(14 27 61 / .45);border:1px solid #DDE6F6}
.story-top{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:#5F6B82}
.story-top b{color:#0E1B3D;font-size:14px}
.story-salvo{height:132px;width:auto;margin:10px 0 2px;filter:drop-shadow(0 8px 14px rgb(14 27 61 / .18))}
.story-big{font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1;color:#2563EB}
.story-sub{font-size:13px;color:#5F6B82;margin-top:4px}
.story-rows{width:100%;margin-top:14px;background:#FFFFFF;border:1px solid #E6EBF3;border-radius:16px;padding:4px 14px;text-align:left}
.story-rows div{display:flex;justify-content:space-between;gap:8px;padding:8px 0;font-size:13px;border-bottom:1px solid #EEF2F8}
.story-rows div:last-child{border-bottom:0}
.story-rows span{color:#5F6B82}
.story-quote{font-family:'Caveat',cursive;font-size:23px;margin-top:auto;transform:rotate(-3deg);color:#0E1B3D}
.story-foot{font-size:11px;color:#5F6B82;margin-top:6px}
.yc-note{font-size:12.5px;color:var(--muted);margin-top:4px}
.yc-inc{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:500;width:100%;text-align:left}

/* ---------- Condividi (immagini per Instagram) ---------- */
.share-tpls{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
.share-tpls::-webkit-scrollbar{display:none}
.share-tpl{flex:none;width:96px;border-radius:16px;border:2px solid var(--border);background:var(--surface);padding:8px 6px;text-align:center;font-size:12px;font-weight:600;color:var(--text)}
.share-tpl img{display:block;height:48px;width:auto;margin:0 auto 4px}
.share-tpl[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.share-stage{display:grid;place-items:center;padding:4px 0}
.share-stage canvas{display:block;width:100%;max-width:280px;height:auto;border-radius:22px;box-shadow:0 24px 50px -22px rgb(14 27 61 / .45)}
.share-stage canvas.post{max-width:320px}
.share-stage .painting{font-size:13px;color:var(--muted);padding:40px 0}
.seg-mini{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--sunken);border-radius:12px;padding:4px}
.seg-mini button{min-height:38px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);text-align:center}
.seg-mini button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.caption{background:var(--sunken);border-radius:12px;padding:12px;font-size:13px;line-height:1.5;color:var(--text)}
.save-img{display:block;width:100%;max-width:260px;height:auto;margin:10px auto 0;border-radius:18px;box-shadow:0 18px 40px -20px rgb(14 27 61 / .5)}

/* ---------- riepilogo a storie (stile "Wrapped") ---------- */
.wrapped{position:absolute;inset:0;z-index:45;display:none;overflow:hidden;background:#FFFFFF;color:#0E1B3D}
.wr-on .wrapped{display:block}
.wrapped{position:fixed}
.wr-bars{position:absolute;top:14px;left:12px;right:12px;display:flex;gap:4px;z-index:4}
.wr-bar{flex:1;height:3px;border-radius:2px;background:rgb(14 27 61 / .14);overflow:hidden}
.wr-bar i{display:block;height:100%;width:0;background:#2563EB}
.wr-bar.done i{width:100%}
.wr-bar.now i{animation:wrfill 5s linear forwards}
.wr-bar.now.last i{animation:none;width:100%}
@keyframes wrfill{to{width:100%}}
.wr-x{position:absolute;top:26px;right:10px;z-index:5;width:44px;height:44px;display:grid;place-items:center;color:#0E1B3D;font-size:22px}
.wr-prev,.wr-next{position:absolute;top:0;bottom:0;z-index:2}
.wr-prev{left:0;width:35%} .wr-next{right:0;width:65%}
.wr-slide{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:78px 28px 40px;pointer-events:none}
.wr-slide .btn,.wr-slide a{pointer-events:auto;position:relative;z-index:3}
.wr-slide>*{animation:wrin .6s cubic-bezier(.16,1,.3,1) both}
.wr-slide>*:nth-child(2){animation-delay:.12s} .wr-slide>*:nth-child(3){animation-delay:.24s} .wr-slide>*:nth-child(4){animation-delay:.36s} .wr-slide>*:nth-child(5){animation-delay:.48s}
@keyframes wrin{from{opacity:0;transform:translateY(18px) scale(.97)}}
.wr-k{font-size:15px;font-weight:600;color:#5B677E;letter-spacing:.02em}
.wr-t{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-top:6px;text-wrap:balance}
.wr-big{font-size:72px;font-weight:800;letter-spacing:-.045em;line-height:1;margin:12px 0 4px;color:#2563EB}
.wr-s{font-size:16px;color:#3F4A60;margin-top:10px;line-height:1.45;max-width:28ch}
.wr-salvo{height:200px;width:auto;margin:14px 0;filter:drop-shadow(0 14px 18px rgb(14 27 61 / .16))}
.wr-hand{font-family:'Caveat',cursive;font-size:30px;margin-top:14px;transform:rotate(-3deg)}
.wr-bars12{display:flex;align-items:flex-end;gap:5px;height:130px;margin:18px 0 6px}
.wr-bars12 span{width:16px;border-radius:5px 5px 2px 2px;background:rgb(37 99 235 / .22)}
.wr-bars12 span.hi{background:#2563EB}
.wr-top{width:100%;max-width:300px;margin-top:16px;text-align:left}
.wr-top div{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgb(14 27 61 / .1);font-size:15px}
.wr-top b.n{font-size:26px;font-weight:800;width:30px;color:#2563EB}
.wr-top span.v{margin-left:auto;font-weight:700}
.wr-slide .btn.primary{background:#2563EB;color:#fff;margin-top:18px;max-width:300px}
.wr-slide .btn.ghost{background:#fff;color:#0E1B3D;border-color:rgb(14 27 61 / .15);margin-top:10px;max-width:300px}
.invite-code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:26px;font-weight:700;letter-spacing:.08em;color:var(--ink);background:var(--sunken);border:1.5px dashed var(--border);border-radius:14px;padding:14px;text-align:center}

.f24 .right{display:grid;justify-items:end;gap:4px;flex:none}
/* transizioni tra schermate */
.view>.stack.in-push{animation:inpush .32s cubic-bezier(.16,1,.3,1) both}
.view>.stack.in-back{animation:inback .32s cubic-bezier(.16,1,.3,1) both}
.view>.stack.in-tab{animation:intab .28s cubic-bezier(.16,1,.3,1) both}
@keyframes inpush{from{opacity:.4;transform:translateX(28px)}}
@keyframes inback{from{opacity:.4;transform:translateX(-28px)}}
@keyframes intab{from{opacity:0;transform:translateY(6px)}}
/* stato offline */
.offline{display:flex;gap:10px;align-items:center;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:var(--sunken);color:var(--muted);font-size:13px}
/* Salvo nella card del prossimo pagamento */
.hero-card.with-salvo{position:relative;padding-right:112px}
.hero-salvo{position:absolute;right:8px;bottom:10px;height:104px;width:auto}
/* Immobili */
.imm-card{display:flex;align-items:center;gap:12px;padding:14px;width:100%;text-align:left}
.imm-months{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.imm-m{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--ok-bg);color:var(--ok)}
.imm-m.wait{background:var(--warn-bg);color:var(--warn)}
.imm-prop{padding:16px}
.imm-prop h3{font-size:16px;color:var(--ink);font-weight:600}
/* benvenuto / accesso */
.onb{position:absolute;inset:0;z-index:50;display:none;flex-direction:column;background:linear-gradient(180deg,var(--accent-soft),var(--app) 55%);padding:56px 24px 28px}
.onb-on .onb{display:flex}
.onb:focus,.firma-card:focus{outline:none}
.onb{position:fixed;padding-top:calc(40px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.onb-skip{position:absolute;top:18px;right:14px;min-height:44px;padding:0 12px;font-size:14px;font-weight:600;color:var(--muted)}
.onb-skip{top:calc(8px + env(safe-area-inset-top,0px))}
.onb-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.onb-body>*{animation:wrin .5s cubic-bezier(.16,1,.3,1) both}
.onb-body>*:nth-child(2){animation-delay:.08s} .onb-body>*:nth-child(3){animation-delay:.16s} .onb-body>*:nth-child(4){animation-delay:.24s}
.onb-salvo{height:210px;width:auto;margin-bottom:18px}
.onb h2{font-size:30px;line-height:1.08;letter-spacing:-.03em;color:var(--ink);font-weight:800;text-wrap:balance}
.onb p{font-size:15.5px;color:var(--muted);line-height:1.5;margin-top:10px;max-width:30ch}
.onb-demo{width:100%;max-width:300px;margin-top:18px}
.onb-dots{display:flex;gap:6px;justify-content:center;margin:14px 0}
.onb-dots i{width:8px;height:8px;border-radius:4px;background:var(--border);transition:width .25s}
.onb-dots i.on{width:22px;background:var(--accent)}
.onb .btn+.btn{margin-top:10px}

/* ---------- caricamento: l'F24 insegue Salvo (provvisorio, poi video) ---------- */
.splash{position:absolute;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;background:#FFFFFF;color:#0E1B3D;cursor:pointer;transition:opacity .35s}
.splash-on .splash{display:flex}
.splash.out{opacity:0}
.splash{position:fixed}
.sp-scene{position:relative;width:min(94%,420px);height:210px;animation:chase 2.6s linear both}
.sp-f24{position:absolute;left:0;bottom:0;height:176px;width:auto;animation:runbob .3s ease-in-out infinite alternate}
.sp-salvo{position:absolute;right:0;bottom:0;height:182px;width:auto;animation:runbob .3s ease-in-out infinite alternate-reverse}
@keyframes runbob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-10px) rotate(2deg)}}
@keyframes chase{from{transform:translateX(-10%)}to{transform:translateX(10%)}}
.sp-brand{display:flex;align-items:center;gap:10px;margin-top:34px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.sp-t{font-size:14px;color:#5B677E;margin-top:8px}
.sp-skip{position:absolute;bottom:28px;font-size:12px;color:#6B768B}
.sp-skip{bottom:calc(20px + env(safe-area-inset-bottom,0px))}

/* ---------- praticità ---------- */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quick>*{display:grid;justify-items:center;gap:6px;padding:12px 4px 10px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);font-size:12px;font-weight:600;color:var(--ink);text-align:center}
.quick .ic{font-size:22px;color:var(--accent)}
.ask-card{padding:14px 16px;border-color:color-mix(in srgb,var(--warn) 30%,var(--border))}
.ask-card .it{font-size:15px;font-weight:600;color:var(--ink)}
.ask-card .is{font-size:13px;color:var(--muted);margin-top:2px}
.ask-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin-top:12px}
.ask-actions .btn{min-height:44px;font-size:14px}
.toast.has-undo{pointer-events:auto}
.toast-undo{margin-left:auto;font-weight:700;color:var(--accent-2);min-height:36px;padding:0 6px;flex:none}
.pr-chips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px;scrollbar-width:none}
.pr-chips::-webkit-scrollbar{display:none}
.pr-chips .chip{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.ric-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.ric-row:last-child{border-bottom:0}
.ric-row .btn{width:auto;min-height:38px;padding:0 14px;font-size:13px}
.view.quiet>.stack>*,.view.quiet>.stack{animation:none!important}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn-row .btn,.step .btn-row .btn{width:auto;min-height:42px;margin-top:0;font-size:13.5px}
a.btn{text-decoration:none}
.file-btn{position:relative;overflow:hidden;cursor:pointer}
.todo{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-top:1px solid var(--border)}
.todo:first-of-type{border-top:0}
.todo .chk{width:26px;height:26px;border-radius:8px;border:2px solid var(--border);display:grid;place-items:center;flex:none;color:#fff;font-size:15px;margin-top:1px}
.todo.done .chk{background:var(--ok);border-color:var(--ok)}
.todo.done .tt{text-decoration:line-through;color:var(--muted)}
.todo .tt{font-size:15px;font-weight:600;color:var(--ink)}
.todo .ts{font-size:13px;color:var(--muted);margin-top:3px}
.todo .btn{width:auto;min-height:38px;font-size:13px;padding:0 14px;margin-top:10px}
.note-area{width:100%;min-height:90px;margin-top:6px}
/* ---------- blocco unico "Il tuo anno" ---------- */
.yc{padding:18px 16px 6px}
.yc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.yc-big{font-size:40px;font-weight:700;letter-spacing:-.035em;color:var(--ink);line-height:1.05;margin-top:4px}
.yc-head .pill{margin-top:4px}
.split{display:flex;gap:3px;height:14px;margin:16px 0 4px}
.split i{display:block;height:100%;border-radius:4px}
.yc-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.yc-item{display:grid;gap:3px;padding:12px;border-radius:14px;background:var(--sunken);text-align:left;min-width:0}
.yc-item .k{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--text)}
.yc-item .k i{width:8px;height:8px;border-radius:2px;flex:none}
.yc-item b{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.yc-item .n{font-size:12px;color:var(--muted);line-height:1.3}
.yc-limit{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.regime{position:relative;height:10px;border-radius:99px;margin-top:10px;background:linear-gradient(90deg,var(--sunken) 0 85%,var(--warn-bg) 85% 100%)}
.regime .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.regime .tick{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:1px;background:var(--warn);transform:translateX(-1px)}
.regime-scale{position:relative;height:16px;margin-top:6px;font-size:11px;color:var(--subtle)}
.regime-scale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.regime-scale span:first-child{transform:none}
.regime-scale span:last-child{transform:translateX(-60%)}
.yc-how{margin-top:12px;border-top:1px solid var(--border)}
.yc-how summary,.how summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--accent)}
.yc-how summary::-webkit-details-marker,.how summary::-webkit-details-marker{display:none}
.yc-how summary .ic,.how summary .ic{transition:transform .2s}
.yc-how[open] summary .ic,.how[open] summary .ic{transform:rotate(90deg)}
.how-body{padding:0 0 14px}
.how-body p{font-size:13px;color:var(--muted);line-height:1.5;margin-top:10px}
.how-body p b{color:var(--ink)}

/* ---------- scadenza (home) ---------- */
.due{padding:16px;display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%}
.due .body{flex:1;min-width:0}
.due .t{font-size:15px;font-weight:600;color:var(--ink)}
.due .d{font-size:15px;color:var(--text);margin-top:4px}
.due .when{font-size:16px;color:var(--muted);margin-top:6px}
.due .amt{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.due .amt b{font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.02em}

/* ---------- grafici ---------- */
.chart-card{padding:16px 14px 12px}
.chart-card header{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.chart-card h3{font-size:16px;font-weight:600;color:var(--ink)}
.year{appearance:none;border:1px solid var(--border);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6B82' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;border-radius:12px;padding:9px 34px 9px 14px;font:inherit;font-size:14px;color:var(--ink);min-height:40px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 4px 6px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--app);font-size:12px;line-height:1.5;padding:8px 10px;border-radius:10px;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;z-index:2}
.chart .tip.on{opacity:1;transform:none}
.chart .tip i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.chart text{font-family:var(--font);font-size:11px;fill:var(--axis)}
.chart-note{font-size:11px;color:var(--subtle);margin:4px 4px 0}

/* ---------- liste ---------- */
.list{padding:16px 16px 4px}
.list h3{font-size:17px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:10px}
.count{min-width:22px;height:22px;border-radius:11px;background:var(--alert);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;padding:0 6px}
.item{display:flex;align-items:center;gap:14px;padding:14px 0;width:100%;text-align:left;border-bottom:1px solid var(--border)}
.item:last-child{border-bottom:0}
.item .it{font-size:15px;font-weight:500;color:var(--ink)}
.item .is{font-size:13px;color:var(--muted);margin-top:3px}
.item .right{text-align:right;display:grid;justify-items:end;gap:5px}
.item .amt{font-weight:700;color:var(--ink);font-size:15px;white-space:nowrap}
.group{padding:0 16px}
.empty-inline{padding:22px 4px;text-align:center;font-size:14px;color:var(--muted)}

/* ---------- navigazione interna ---------- */
.nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:0 0 4px}
.nav h2{text-align:center;font-size:20px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav button{width:44px;height:44px;display:grid;place-items:center;font-size:22px;color:var(--ink)}
.nav .plus{background:var(--accent);color:var(--on-accent);border-radius:14px;width:40px;height:40px;justify-self:end}
.segs{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);margin:0 -16px;padding:0 12px}
.segs button{font-size:14px;color:var(--muted);padding:12px 10px;position:relative;min-height:44px}
.segs button[aria-selected="true"]{color:var(--accent);font-weight:600}
.segs button[aria-selected="true"]::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:3px;border-radius:3px;background:var(--accent)}
.segs.three{justify-content:space-around}

/* ---------- tasse ---------- */
.tax-hero{position:relative;padding:22px 16px 0;border-radius:var(--radius);background:linear-gradient(180deg,var(--accent-soft),var(--surface));border:1px solid var(--border);min-height:208px;overflow:hidden}
.tax-hero h2{font-size:24px;line-height:1.08;letter-spacing:-.03em;color:var(--ink);font-weight:700;max-width:10ch}
.tax-hero p{font-size:13px;color:var(--accent);margin-top:12px;line-height:1.45;max-width:22ch}
.tax-hero .mascot{position:absolute;right:4px;bottom:0;height:128px;width:128px}
.big{padding:16px;display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left}
.big .v{font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-top:2px}
.save .pct{font-weight:700;color:var(--ink);font-size:17px;margin-left:12px}
.f24{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);width:100%;text-align:left}
.f24:last-child{border-bottom:0}
.f24 .body{flex:1;min-width:0}
.f24 .it{font-size:13.5px;font-weight:500;color:var(--ink)}
.f24 .amt{font-weight:700;color:var(--ink);font-size:16px;white-space:nowrap}
.f24 .pill{font-size:12px;padding:4px 9px}
.f24 .sub{font-size:12px;white-space:nowrap}
.link{color:var(--accent);font-size:14px;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.tip-card{background:var(--tip-bg);padding:16px;display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left}
.tip-card .tt{font-weight:600;color:var(--accent);font-size:15px}
.tip-card .tb{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}

/* ---------- componenti comuni ---------- */
.hero-card{padding:20px 18px}
.hero-num{font-size:40px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.eyebrow{font-size:13px;font-weight:600;color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)} .kv b{color:var(--ink);font-weight:600;text-align:right}
.kv.total b{font-size:17px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{padding:14px}
.stat .k{font-size:12px;color:var(--muted);font-weight:500}
.stat .v{font-size:22px;font-weight:700;color:var(--ink);margin-top:4px;letter-spacing:-.02em}
.btn{min-height:50px;border-radius:14px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;width:100%;text-align:center}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.dark{background:var(--ink);color:var(--app)}
.btn.ghost{background:var(--surface);border:1px solid var(--border);color:var(--ink)}
.btn.danger{background:var(--surface);border:1px solid var(--border);color:var(--alert)}
.btn[disabled]{opacity:.55;cursor:default}
.btn .ic{font-size:18px}
.actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.chip{flex:none;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:500;color:var(--text);display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--app);border-color:var(--ink)}
.chip .n{color:var(--subtle);font-weight:500}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.7}
.form-card{padding:16px}
.f-t{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:12px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:13px;font-weight:500;color:var(--text)}
.input{width:100%;min-height:48px;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:12px 14px;font-size:16px;color:var(--ink)}
.input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.input[aria-invalid="true"]{border-color:var(--alert);background:var(--alert-bg)}
textarea.input{min-height:110px;resize:vertical;line-height:1.45}
select.input{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6B82' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.err{font-size:12px;color:var(--alert);display:flex;gap:6px;align-items:center}
.help{font-size:12px;color:var(--muted)}
.eur-in{position:relative}
.eur-in span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px}
.eur-in .input{padding-left:30px;text-align:right}
.riga{display:grid;grid-template-columns:minmax(0,1fr) 116px 36px;gap:10px;align-items:start;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.riga .rm{width:36px;height:48px;margin-top:23px;display:grid;place-items:center;color:var(--muted);font-size:18px}
.riga .err{grid-column:1/-1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.newc{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.link-btn{color:var(--accent);font-weight:600;font-size:14px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.switch{position:relative;width:50px;height:30px;border-radius:99px;background:var(--border);flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .25);transition:transform .2s}
.switch[aria-checked="true"]{background:var(--ok)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
.switch[disabled]{opacity:.6}
.set-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);width:100%;text-align:left}
.set-row:last-child{border-bottom:0}
.set-row .it{font-size:15px;font-weight:500;color:var(--ink)}
.set-row .is{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.35}
.timeline{list-style:none;margin:6px 0 0}
.timeline li{position:relative;padding:0 0 18px 32px}
.timeline li::before{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:var(--border)}
.timeline li:last-child{padding-bottom:2px}
.timeline li:last-child::before{display:none}
.timeline .dot{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--surface);color:var(--subtle);border:2px solid var(--border)}
.timeline .done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.timeline .now .dot{border-color:var(--accent)}
.timeline .now .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.timeline .bad .dot{background:var(--alert);border-color:var(--alert);color:#fff}
.timeline .tl-t{font-size:14px;font-weight:600;color:var(--ink)}
.timeline .tl-s{font-size:13px;color:var(--muted);margin-top:2px}
.timeline .todo .tl-t{color:var(--muted);font-weight:500}
.step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:0}
.step .n{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px;display:grid;place-items:center;flex:none}
.step .st-t{font-size:15px;font-weight:600;color:var(--ink)}
.step .st-s{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.step .btn{margin-top:10px;min-height:44px;width:auto}
.insight{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--tip-bg);border-radius:var(--radius);border:1px solid var(--border);font-size:14px;color:var(--text);line-height:1.45}
.insight .icon-tile{width:36px;height:36px;font-size:18px;border-radius:11px}
.insight b{color:var(--ink)}
details.tech{padding:0 16px}
details.tech summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink)}
details.tech summary::-webkit-details-marker{display:none}
details.tech summary .ic{transition:transform .2s;margin-left:auto;color:var(--subtle)}
details.tech[open] summary .ic{transform:rotate(90deg)}
details.tech .tech-body{padding:0 0 14px;font-size:13px}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12.5px}
.search{position:relative}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--subtle);font-size:18px}
.search .input{padding-left:42px}
.av{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:600;font-size:14px;background:var(--accent-soft);color:var(--accent);flex:none}
.success{text-align:center;padding:28px 16px 8px}
.success .big-ic{width:76px;height:76px;border-radius:26px;margin:0 auto 16px;display:grid;place-items:center;font-size:38px;background:var(--ok-bg);color:var(--ok)}
.success h2{font-size:24px;color:var(--ink);letter-spacing:-.02em}
.success p{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.5}
.upload{display:block;border:1.5px dashed var(--border);border-radius:var(--radius);padding:22px 16px;text-align:center;cursor:pointer;background:var(--surface)}
.upload:focus-within{outline:2px solid var(--accent)}
.upload .icon-tile{margin:0 auto 10px}
.upload b{display:block;color:var(--ink);font-size:15px}
.doc-prev{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--app);font-size:13px;line-height:1.5}
.doc-prev .dh{display:flex;justify-content:space-between;gap:10px;font-weight:600;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:10px}
.doc-prev .legal{font-size:11.5px;color:var(--muted);margin-top:10px}
.profile{display:flex;gap:14px;align-items:center;padding:18px 16px}
.profile .avatar{width:56px;height:56px;font-size:18px}
.profile b{display:block;font-size:18px;color:var(--ink)}
.banner{position:sticky;top:0;z-index:6;margin:-8px -16px 12px;padding:10px 16px;background:var(--warn-bg);color:var(--warn);font-size:13px;display:flex;gap:10px;align-items:center;line-height:1.35}
.banner button{margin-left:auto;font-weight:600;text-decoration:underline;min-height:36px;flex:none}
.dots{display:inline-flex;gap:3px} .dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:blink 1s infinite} .dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}

/* ---------- sheet, toast, empty ---------- */
.empty{text-align:center;padding:48px 24px;color:var(--muted)}
.empty .ic{font-size:40px;color:var(--subtle)}
.empty h3{color:var(--ink);font-size:17px;margin:12px 0 6px}
.scrim{position:absolute;inset:0;background:rgb(10 15 26 / .35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:24px 24px 0 0;padding:10px 20px 28px;transform:translateY(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);z-index:11;max-height:86%;overflow:auto}
.open .scrim{opacity:1;pointer-events:auto} .open .sheet{transform:none}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--border);margin:0 auto 16px}
.sheet h3{font-size:18px;color:var(--ink);margin-bottom:6px}
.sheet .lines{margin:12px 0}
.sheet p{font-size:14px;color:var(--muted);line-height:1.5}
.sheet .btn{margin-top:14px}
.sheet .field{margin-top:12px}
.toast{position:absolute;left:16px;right:16px;bottom:100px;z-index:30;background:var(--ink);color:var(--app);border-radius:14px;padding:13px 16px;font-size:14px;display:flex;gap:10px;align-items:center;line-height:1.35;opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.on{opacity:1;transform:none}
.toast .ic{font-size:18px;color:var(--s3)}

/* ---------- mobile: la pagina scorre, la tab bar resta sempre fissa in basso ---------- */
  html,body{height:auto}
  .view{overflow:visible;padding:12px 16px calc(104px + env(safe-area-inset-bottom,0px))}
  .tabbar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:560px;z-index:20;
    padding:8px 4px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px -18px rgb(14 27 61 / .25)}
  .scrim{position:fixed}
  .sheet{position:fixed;left:50%;right:auto;width:100%;max-width:560px;transform:translate(-50%,100%);padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .open .sheet{transform:translate(-50%,0)}
  .toast{position:fixed;left:50%;right:auto;width:calc(100% - 32px);max-width:528px;transform:translate(-50%,12px);bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .toast.on{transform:translate(-50%,0)}
  .banner{top:env(safe-area-inset-top,0px);margin-top:-12px}

@keyframes rise{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
.view>.stack>*{animation:rise .4s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 50ms)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- desktop: telefono + pannello laterale (come il prototipo) ---------- */
.qr{width:168px;height:168px;margin:14px auto 4px;padding:10px;background:#fff;border-radius:16px;border:1px solid var(--border)}
.qr svg,.qr img{display:block;width:100%;height:100%}

/* ---------- striscia esempio / prova ---------- */
.demo{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:14px;background:var(--accent-soft);color:var(--ink);font-size:13px;line-height:1.35}
.demo b{color:var(--accent)}
.demo .btn{width:auto;min-height:38px;padding:0 12px;font-size:13px;margin-left:auto;flex:none}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--subtle)}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--subtle);flex:none}
.sync.cloud i{background:var(--ok)} .sync.saving i{background:var(--warn)} .sync.err i{background:var(--alert)}

/* ---------- configurazione guidata ---------- */
.setup-head{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.setup-dots{display:flex;gap:6px;margin-left:auto}
.setup-dots i{width:8px;height:8px;border-radius:4px;background:var(--border);transition:width .25s}
.setup-dots i.on{width:22px;background:var(--accent)}
.setup-hero{display:flex;gap:14px;align-items:flex-end;padding:6px 2px 0}
.setup-hero img{height:112px;width:auto;flex:none}
.setup-hero h2{font-size:26px;line-height:1.08;letter-spacing:-.03em;color:var(--ink);font-weight:800;text-wrap:balance}
.setup-hero p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.45}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;border:1.5px solid var(--border);background:var(--surface);width:100%;text-align:left}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.opt .ot{font-size:15px;font-weight:600;color:var(--ink)}
.opt .os{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.opt .ov{margin-left:auto;font-size:18px;font-weight:700;color:var(--accent);flex:none;font-variant-numeric:tabular-nums}
.opt .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex:none;display:grid;place-items:center}
.opt[aria-pressed="true"] .radio{border-color:var(--accent)}
.opt[aria-pressed="true"] .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.setup-foot{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
.sw-row{display:flex;align-items:center;gap:14px;padding:12px 0}
.sw-row .it{font-size:15px;font-weight:500;color:var(--ink)}
.sw-row .is{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
/* ---------- scadenze e F24 ---------- */
.pill.past{background:var(--sunken);color:var(--muted)}
.cod{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.cod span{color:var(--muted)} .cod b{color:var(--ink);font-weight:600}
/* ---------- salvadanaio ---------- */

/* ---------- grafico incassi ---------- */
.bars12{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;align-items:end;height:120px;margin:16px 4px 0}
.bars12 .b{display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.bars12 .b i{display:block;border-radius:5px 5px 2px 2px;background:color-mix(in srgb,var(--s1) 26%,transparent);min-height:2px}
.bars12 .b.now i{background:var(--s1)}
.bars12 .b.fut i{background:var(--sunken)}
.mlabels{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin:6px 4px 0;font-size:10.5px;color:var(--axis);text-align:center}
.mlabels .now{color:var(--ink);font-weight:600}

/* ---------- varie ---------- */
.copybox{white-space:pre-wrap;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;background:var(--sunken);border-radius:12px;padding:12px;color:var(--text);user-select:text;-webkit-user-select:text;max-height:260px;overflow:auto}
.par-row{padding:14px 0;border-bottom:1px solid var(--border);display:grid;gap:8px}
.par-row:last-child{border-bottom:0}
.par-row .pt{font-size:14.5px;font-weight:600;color:var(--ink)}
.par-row .ps{font-size:12px;color:var(--muted);line-height:1.4}
.par-in{display:grid;grid-template-columns:minmax(0,150px) auto 1fr;gap:10px;align-items:center}
.par-in .input{min-height:42px;padding:8px 12px;text-align:right}
.par-in .u{font-size:14px;color:var(--muted)}
.par-in .link-btn{justify-self:end;min-height:36px;font-size:13px}
.pill.verif{background:var(--ok-bg);color:var(--ok)} .pill.dav{background:var(--warn-bg);color:var(--warn)} .pill.mine{background:var(--info-bg);color:var(--info)}
.first{padding:20px 18px;text-align:center}
.first img{height:120px;width:auto;margin:0 auto 8px;display:block}
.first h3{font-size:19px;color:var(--ink);letter-spacing:-.01em}
.first p{font-size:14px;color:var(--muted);margin:6px auto 14px;line-height:1.45;max-width:32ch}
.warnline{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--warn-bg);color:var(--warn);font-size:13px;line-height:1.4}
.warnline .ic{font-size:18px;margin-top:1px}
.okline{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--ok-bg);color:var(--ok);font-size:13px;line-height:1.4}
.okline .ic{font-size:18px;margin-top:1px}
.cl-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);width:100%;text-align:left}
.cl-row:last-child{border-bottom:0}
.sheet .kv{font-size:14px}
.sheet-list{margin:6px 0 4px;max-height:48vh;overflow:auto}
.inc-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.inc-row:last-child{border-bottom:0}
.inc-row .btn{width:auto;min-height:38px;padding:0 12px;font-size:13px;margin-top:0;flex:none}

body{background:var(--app)}

/* ---------- compleanno: Salvo fa gli auguri ---------- */
.bday{position:absolute;inset:0;z-index:55;display:none;align-items:center;justify-content:center;background:#FFFFFF;padding:24px;overflow:hidden}
.bday-on .bday{display:flex}
.bday{position:fixed}
.bday-conf i{position:absolute;top:-24px;border-radius:2px;opacity:.95;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes fall{from{transform:translateY(0) rotate(0)}to{transform:translateY(120vh) rotate(var(--r))}}
.bday-card{position:relative;z-index:2;text-align:center;width:100%;max-width:340px;animation:pop .45s cubic-bezier(.16,1,.3,1) both}
.bday-salvo{display:block;height:190px;width:auto;margin:0 auto;animation:hop 1s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgb(14 27 61 / .18))}
@keyframes hop{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}
.bday-k{font-size:14px;font-weight:600;color:#5B677E;margin-top:12px}
.bday-t{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#0E1B3D;margin-top:6px;text-wrap:balance}
.bday-t span{color:#2563EB}
.bday-hand{font-family:'Caveat',cursive;font-size:34px;color:#0E1B3D;transform:rotate(-4deg);margin-top:8px}
.bday-s{font-size:14.5px;color:#5B677E;line-height:1.5;margin:10px auto 16px;max-width:30ch}
.bday-balloons{position:absolute;left:-16px;right:-16px;top:-54px;height:0}
.bday-balloons span{position:absolute;top:0;width:46px;height:58px;border-radius:50% 50% 46% 46%;animation:floaty 3.4s ease-in-out infinite}
.bday-balloons span::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:64px;background:rgb(14 27 61 / .25)}
.bday-balloons span:nth-child(1){left:0;background:#2563EB}
.bday-balloons span:nth-child(2){right:4px;top:18px;background:#F5B942;animation-delay:.6s}
.bday-balloons span:nth-child(3){left:44px;top:84px;width:34px;height:44px;background:#C084FC;animation-delay:1.1s}
@keyframes floaty{50%{transform:translateY(-14px) rotate(4deg)}}
.bday-card:focus{outline:none}

/* ---------- caricamento: l'F24 con la calamita insegue Salvo, poi Salvo fa festa ---------- */
.sp-stage{position:relative;width:min(94%,440px);aspect-ratio:974/507}
.mag,.mag-end{position:absolute;inset:0;transition:opacity .22s,transform .22s cubic-bezier(.16,1,.3,1)}
.ml{position:absolute;inset:0}
.ml img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ml-f24{animation:magA 1.3s linear both}
.ml-salvo{animation:magB 1.3s linear both}
.ml-f24 img{animation:magbob .34s ease-in-out infinite alternate}
.ml-salvo img{animation:magbob .3s ease-in-out infinite alternate-reverse}
.ml-coins img{animation:magpull 1s ease-in infinite}
@keyframes magA{from{transform:translateX(-8%)}to{transform:translateX(3%)}}
@keyframes magB{from{transform:translateX(-2%)}to{transform:translateX(6%)}}
@keyframes magbob{from{transform:translateY(0) rotate(-1.2deg)}to{transform:translateY(-3%) rotate(1.2deg)}}
@keyframes magpull{0%{transform:translate(9%,7%) rotate(8deg) scale(.9);opacity:0}25%{opacity:1}100%{transform:translate(-13%,-1%) rotate(-10deg) scale(1.04);opacity:0}}
.mag-end{display:flex;justify-content:center;align-items:flex-end;opacity:0;transform:scale(.8)}
.mag-end img{height:96%;width:auto;max-width:100%;object-fit:contain}
.splash.fine .mag{opacity:0;transform:translateX(14%) scale(.96)}
.splash.fine .mag-end{opacity:1;transform:none}
.splash.fine .mag-end img{animation:hop 1s ease-in-out infinite}

/* ---------- scena intro (prima schermata al primo accesso) ---------- */
.mag.intro{display:flex;align-items:center;justify-content:center}
.mag.intro img{width:100%;height:100%;object-fit:contain;animation:introrun 1.3s ease-out both}
@keyframes introrun{0%{opacity:.2;transform:translateX(-6%) scale(.97)}18%{opacity:1}100%{transform:translateX(3%) scale(1)}}

/* ---------- niente spazio vuoto in fondo: la tabella per lettori di schermo non deve occupare altezza ---------- */
table.sr-only{display:block}
.view{padding-bottom:calc(71px + env(safe-area-inset-bottom,0px))}
.view>.stack>.foot-note:last-child{margin-bottom:0}

/* ---------- tasse: solo il titolo, Salvo col pollice che si muove appena ---------- */
.tax-hero{min-height:156px}
.tax-hero h2{font-size:28px;max-width:8ch}
.tax-hero h2 span{color:var(--accent)}
@keyframes thumbsoft{0%,62%,100%{transform:rotate(0) translateY(0)}70%{transform:rotate(-3deg) translateY(-3px)}78%{transform:rotate(2deg) translateY(0)}86%{transform:rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.tax-hero .mascot.thumb img,.mag.intro img{animation:none}}

/* ---------- home: saluto come da mockup (Ciao Sara, + frase forte su una riga), Salvo grande dietro ---------- */
.hero{display:block;min-height:196px;padding:0 2px 4px;margin-top:4px}
.hero .hi{position:absolute;left:2px;right:2px;bottom:6px;z-index:2}
.hero .hello{font-size:28px;color:var(--ink);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.hero h1{font-size:34px;line-height:1.05;letter-spacing:-.04em;margin-top:2px;max-width:100%;text-wrap:balance}
.hero .mascot{position:absolute;right:-4px;top:-6px;width:158px;height:180px;z-index:1}
.hero .mascot img{right:0;top:0;bottom:auto;width:158px;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);mask-image:linear-gradient(180deg,#000 62%,transparent 98%)}
.hero .scribble{z-index:3}

/* ---------- grafico incassi: si tocca un mese e sotto compare il dettaglio ---------- */
.bars12 .b{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;border-radius:6px}
.bars12 .b:disabled{cursor:default}
.bars12 .b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bars12 .b.sel i{background:var(--s1)}
.bars12 .b:not(.sel):not(:disabled):hover i{background:color-mix(in srgb,var(--s1) 45%,transparent)}
.cm-det{margin:12px 4px 0;padding-top:12px;border-top:1px solid var(--border)}
.cm-k{font-size:13px;color:var(--muted)}
.cm-v{display:block;font-size:22px;letter-spacing:-.02em;color:var(--ink);margin-top:2px}
.cm-row{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:40px;padding:8px 0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);text-align:left;border-bottom:1px solid var(--border)}
.cm-row:last-child{border-bottom:0}
.cm-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-more{font-size:12.5px;color:var(--muted);padding:8px 0 0}
.chart-card .foot-in{font-size:11.5px;color:var(--subtle);text-align:center;margin-top:12px;line-height:1.45}

/* ---------- salvadanaio: Salvo cambia umore mentre scrivi l'importo ---------- */
.sh-salvo-img{display:block;height:96px;width:auto;margin:2px auto 8px}
.sh-salvo-img.pop{animation:salvopop .45s cubic-bezier(.16,1,.3,1)}
@keyframes salvopop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.sh-salvo-img.pop{animation:none}}
/* caricamento più rapido: dissolvenza breve */
.splash{transition:opacity .18s}
/* ---------- confronto con l'anno prima ---------- */
/* nel grafico: trattino grigio = stesso mese dell'anno prima */
.bars12 .b s{position:absolute;left:8%;right:8%;height:2px;border-radius:2px;background:var(--ink);opacity:.35;pointer-events:none}

/* ---------- anni selezionabili nel grafico incassi ---------- */
.ysel{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--sunken)}
.ysel button{appearance:none;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);padding:5px 12px;border-radius:999px;min-height:30px;cursor:pointer}
.ysel button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgb(14 27 61 / .12)}
.ch-tot{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:8px 4px 0}
.ch-tot b{font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.ch-tot .pill{align-self:center}

/* ---------- tutte le schede più compatte: niente spazio in fondo, niente rimbalzo oltre l'ultima sezione ---------- */
html,body{overscroll-behavior-y:none}
.stack>*+*{margin-top:10px}
.view{padding-top:8px;padding-bottom:calc(69px + env(safe-area-inset-bottom,0px))}
.view>.stack>.foot-note:last-child{margin:10px 8px 0}
.chart-card .foot-in{margin-top:10px}

/* ---------- anno a tendina (sostituisce i pulsanti affiancati) ---------- */
.ysel{position:relative;display:inline-flex;align-items:center;gap:0;padding:0;background:var(--sunken);border-radius:999px}
.ysel select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:6px 30px 6px 14px;min-height:34px;border-radius:999px;cursor:pointer}
.ysel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ysel .ic{position:absolute;right:10px;font-size:14px;color:var(--muted);pointer-events:none}

/* ---------- fatture da incassare nel grafico ---------- */
.bars12 .b i.exp{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--s1) 40%,transparent) 0 3px,color-mix(in srgb,var(--s1) 12%,transparent) 3px 6px);border-radius:5px 5px 0 0;min-height:0}
.bars12 .b i.exp+i{border-top-left-radius:0;border-top-right-radius:0}
.ch-exp{display:flex;align-items:center;gap:8px;margin:4px 4px 0;font-size:12.5px;color:var(--muted)}
.ch-exp i{flex:none;width:12px;height:12px;border-radius:3px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--s1) 45%,transparent) 0 2px,color-mix(in srgb,var(--s1) 12%,transparent) 2px 4px)}
.cm-row small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.cm-row.exp b{color:var(--muted)}

/* ---------- salvadanaio: quote fattura per fattura ---------- */
.sq-t{margin-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.sq-t small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px}
.sq-list{margin-top:8px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.sq-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid var(--border);background:var(--surface);font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.sq-row:last-child{border-bottom:0}
.sq-row b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-row small{display:block;font-size:12px;color:var(--muted)}
.sq-row .grow{min-width:0}
.sq-v{text-align:right;font-weight:700;font-size:14px}
.sq-c{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--border);display:grid;place-items:center;transition:background .15s,border-color .15s}
.sq-row[aria-pressed="true"]{background:color-mix(in srgb,var(--s3) 8%,var(--surface))}
.sq-row[aria-pressed="true"] .sq-c{background:var(--s3);border-color:var(--s3)}
.sq-row[aria-pressed="true"] .sq-c::after{content:'';width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.sq-row.all{background:var(--sunken)}

/* ---------- WhatsApp dello studio ---------- */
.btn.wa{background:#1FA855;border-color:#1FA855;color:#fff}
.btn.wa:hover{background:#178F47}
/* ---------- home: "Incassato nel 2026" e importo sulla stessa riga ---------- */
/* ---------- messaggio allo studio: scelta e numero di rate ---------- */
.msg-n{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.chip[role="radio"][aria-checked="true"]{background:var(--ink);color:var(--app);border-color:var(--ink)}

/* ---------- limite forfettario: riga toccabile + finestra con i 3 casi ---------- */
.lim-btn{display:block;width:100%;appearance:none;border:0;border-top:1px solid var(--border);background:none;font:inherit;text-align:left;color:inherit;cursor:pointer}
.lim-btn .ic{color:var(--muted)}
.lim-steps{margin:12px 0 8px;display:grid;gap:8px}
.lim-step{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.lim-step p{margin:4px 0 0;font-size:13.5px;color:var(--muted);line-height:1.45}
.lim-step b{font-size:14.5px;color:var(--ink)}
.lim-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--sunken);color:var(--muted)}
.lim-step.now{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.lim-step.now .lim-n{background:var(--accent);color:#fff}
.lim-step.past{opacity:.7}

/* ---------- schede principali: titolo grande come la Home ---------- */
.bighead{display:flex;align-items:flex-end;gap:12px;padding:10px 2px 4px}
.bighead h1{font-size:34px;line-height:1.05;letter-spacing:-.04em;font-weight:800;color:var(--ink);margin:0}
.bighead p{margin:4px 0 0;font-size:14.5px;color:var(--muted)}
.bighead p b{color:var(--ink);font-weight:700}
.bighead .plus{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#fff;border:0;font-size:22px;cursor:pointer}

/* ---------- rifinitura (impeccable polish 2026-09-28) ---------- */
/* cifre tutte della stessa larghezza: importi e date non "ballano" tra righe e aggiornamenti */
body{font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;caret-color:var(--accent)}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--ink)}
/* avatar: il bianco su grigio chiaro non si leggeva (contrasto 1.8:1) */
.avatar{background:var(--accent-soft);color:var(--accent);font-weight:700;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}
/* titoli e testi lunghi (nomi clienti) vanno a capo in modo più ordinato */
h1,h2,h3,.bighead h1{text-wrap:balance}
p{text-wrap:pretty}
/* anello di focus coerente col colore dell'app (tastiera / accessibilità) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
/* pulsanti principali: pressione percepibile anche dove manca .press */
button{transition:transform .15s cubic-bezier(.16,1,.3,1),background-color .15s,box-shadow .15s}
button:active:not(:disabled){transform:scale(.97)}
@media (prefers-reduced-motion:reduce){button,button:active{transition:none;transform:none}}
/* ---------- delight: salvadanaio che si riempie (impeccable delight 2026-09-28) ---------- */
@keyframes sal-nudge{40%{transform:translateY(-6px) rotate(-4deg)}}
@keyframes sal-level{0%{transform:scale(.6) rotate(-10deg);opacity:.2;filter:blur(2px)}55%{transform:scale(1.12) rotate(4deg);opacity:1;filter:none}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.piggy img.nudge,.piggy img.levelup{animation:none}}

/* ---------- tipografia: ruoli fissi (impeccable typeset 2026-09-28) ----------
   Prima: 31 grandezze diverse (anche 12.5 / 13.5 / 14.5 / 15.5). Ora 6 ruoli:
   titolo pagina 34 · cifra protagonista 30 · titolo card 17 · testo 15 · secondario 13.5 · etichetta 12.5 */
:root{--t-page:34px;--t-hero-num:30px;--t-card:17px;--t-body:15px;--t-sec:13.5px;--t-label:12.5px}
/* titoli delle card: stessi ovunque (erano 16 o 17) */
.limit h3,.chart-card h3,.list h3,.imm-prop h3,.empty h3{font-size:var(--t-card);font-weight:650;letter-spacing:-.012em}
/* cifre protagoniste: stessa voce su Home, Tasse, scadenza */
.due .amt b,.yc-line .yc-big,.piggy .v{font-size:var(--t-hero-num);font-weight:800;letter-spacing:-.03em;line-height:1.1}
/* importi nelle liste: più peso della descrizione, stessa misura ovunque */
.item .amt,.f24 .amt{font-size:16px;font-weight:700;letter-spacing:-.01em}
/* intestazioni di sezione (es. "Il tuo profilo fiscale"): erano grigie e piccole come le etichette, ora si distinguono dalle righe */
.sec-t{font-size:var(--t-sec);font-weight:700;color:var(--ink);letter-spacing:-.005em;margin:26px 4px 10px}
/* etichette sopra le cifre: un filo più piccole e più "etichetta" */
.eyebrow{font-size:var(--t-label);font-weight:600;letter-spacing:.005em}
/* scorciatoie in Home: "Salvadanaio" toccava i bordi */
.quick>*{font-size:12px;letter-spacing:-.01em;padding-inline:2px}
/* su sfondo scuro il testo chiaro sembra più sottile: un filo di spazio in più */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{letter-spacing:.005em}}
:root[data-theme="dark"] body{letter-spacing:.005em}

/* =========================================================================
   SPERIMENTALE · Design system v2 (2026-09-28)
   Fintech italiano premium: blu = azione/informazione, verde = bene, giallo = attenzione,
   rosso = problema, grigio = neutro. Poche card, ombre quasi assenti, una cifra dominante per schermata.
   Spazi: 4 8 12 16 20 24 32 40 48 · Raggi: 8 piccoli · 12 controlli · 16 card · 20 hero · 24 finestre
   ========================================================================= */
:root{
  --app:#F7F9FD;--bg:#F7F9FD;--surface:#FFFFFF;--sunken:#F1F4FA;--border:#E4E9F2;--border-2:#D5DCE8;
  --ink:#0E1B3D;--text:#17213A;--muted:#5B677E;--subtle:#5F6A81;
  --accent:#286EE2;--accent-2:#3B82F6;--accent-soft:#EAF1FF;--on-accent:#FFFFFF;
  /* colori di stato: il "dot" è il colore del brief, il testo è la variante leggibile (contrasto AA) */
  --ok:#15803D;--ok-dot:#16A34A;--ok-bg:#E8F6EC;
  --warn:#B45309;--warn-dot:#D97706;--warn-bg:#FDF3E1;
  --alert:#DC2626;--alert-bg:#FDECEC;
  --info:#286EE2;--info-bg:#EAF1FF;--tip-bg:#F3F7FF;
  --s1:#286EE2;--s2:#7C93C9;--s3:#16A34A;
  --hero:#0E1B3D;--hero-2:#15285A;--hero-ink:#FFFFFF;--hero-mut:#AEBBDA;--hero-line:rgb(255 255 255 / .12);--hero-mine:#4ADE80;--hero-tax:#8DB5FF;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;
  --r-sm:8px;--r-ctl:12px;--r-card:16px;--r-hero:20px;--r-modal:24px;
  --radius:16px;--radius-sm:12px;
  --shadow:0 1px 2px rgb(14 27 61 / .04);
  --shadow-hero:0 12px 32px -18px rgb(14 27 61 / .45);
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-page:30px;--t-hero-num:30px;--t-card:17px;--t-body:15px;--t-sec:13.5px;--t-label:12.5px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --app:#0B1120;--bg:#0B1120;--surface:#131B2E;--sunken:#0F1627;--border:#222C42;--border-2:#2C3852;
  --ink:#EEF2FA;--text:#D6DDEA;--muted:#9AA5BC;--subtle:#8B96AD;
  --accent:#6C9BFF;--accent-2:#8AB0FF;--accent-soft:#18243F;
  --ok:#4ADE80;--ok-dot:#22C55E;--ok-bg:#12291D;--warn:#FBBF24;--warn-dot:#F59E0B;--warn-bg:#2A2012;--alert:#F87171;--alert-bg:#2C1618;--info:#8AB0FF;--info-bg:#18243F;
  --hero:#16223F;--hero-2:#1C2C55;--shadow-hero:0 12px 32px -18px rgb(0 0 0 / .6)}}
:root[data-theme="dark"]{
  --app:#0B1120;--bg:#0B1120;--surface:#131B2E;--sunken:#0F1627;--border:#222C42;--border-2:#2C3852;
  --ink:#EEF2FA;--text:#D6DDEA;--muted:#9AA5BC;--subtle:#8B96AD;
  --accent:#6C9BFF;--accent-2:#8AB0FF;--accent-soft:#18243F;
  --ok:#4ADE80;--ok-dot:#22C55E;--ok-bg:#12291D;--warn:#FBBF24;--warn-dot:#F59E0B;--warn-bg:#2A2012;--alert:#F87171;--alert-bg:#2C1618;--info:#8AB0FF;--info-bg:#18243F;
  --hero:#16223F;--hero-2:#1C2C55;--shadow-hero:0 12px 32px -18px rgb(0 0 0 / .6)}

body{color:var(--text)}
.stack>*+*{margin-top:var(--sp-3)}

/* ---------- superfici: la card è un contenitore, non un riflesso ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:none}
.card.flat{background:transparent;border:0;border-top:1px solid var(--border);border-radius:0;padding:var(--sp-5) var(--sp-1) var(--sp-2)}
.card.group{padding:0 var(--sp-4);overflow:hidden}
.card.group>.inv,.card.group>.set-row,.card.group>.f24,.card.group>.cl-row,.card.group>label.set-row{margin:0 calc(-1 * var(--sp-4));padding-left:var(--sp-4);padding-right:var(--sp-4);width:calc(100% + 2 * var(--sp-4))}
.btn{border-radius:var(--r-ctl);min-height:48px;transition:transform .15s var(--ease),background-color .15s,border-color .15s}
.btn.ghost{border-color:var(--border-2)}
.input{border-radius:var(--r-ctl);border-color:var(--border-2);transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.input[aria-invalid="true"]{border-color:var(--alert);box-shadow:0 0 0 3px color-mix(in srgb,var(--alert) 14%,transparent)}
.pill{font-weight:600;border-radius:999px}
.pill.pay{background:var(--warn-bg);color:var(--warn)}
.pill.paid,.pill.up{background:var(--ok-bg);color:var(--ok)}
.pill.late{background:var(--alert-bg);color:var(--alert)}
.pill.plan,.pill.studio{background:var(--info-bg);color:var(--info)}
.pill.past,.pill.draft{background:var(--sunken);color:var(--muted)}
.icon-tile{border-radius:var(--r-ctl)}
.chip{border-color:var(--border-2);min-height:40px;font-weight:600;transition:background-color .15s,color .15s,border-color .15s}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--app);border-color:var(--ink)}
.chip .num{margin-left:6px;font-weight:600;opacity:.6}
.foot-note{color:var(--subtle);margin-top:var(--sp-6)}
.bighead{padding:var(--sp-3) var(--sp-1) var(--sp-1)}
.bighead h1{font-size:var(--t-page);font-weight:750;letter-spacing:-.035em}
.bighead .plus{border-radius:var(--r-ctl)}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-1)}
.sec-row h3{font-size:var(--t-card);font-weight:700;color:var(--ink);letter-spacing:-.012em}
.grp-t{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.012em;margin:var(--sp-6) var(--sp-1) var(--sp-2)}
.stack>.grp-t:first-child,div>.grp-t:first-child{margin-top:var(--sp-2)}
.grp-t.hot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--alert);margin-right:8px;vertical-align:2px}

/* icone nelle liste: niente riquadri colorati, il colore resta solo dove dice uno stato */
.set-row .icon-tile{width:36px;height:36px;background:transparent!important;color:var(--muted);font-size:22px}
.set-row .icon-tile.t-yellow{color:var(--warn-dot)} .set-row .icon-tile.t-green{color:var(--ok-dot)}

/* data compatta (scadenze, F24) */
.dblk{flex:none;width:48px;height:52px;border-radius:var(--r-ctl);background:var(--sunken);display:grid;place-content:center;text-align:center;line-height:1;color:var(--ink)}
.dblk b{font-size:19px;font-weight:750;letter-spacing:-.02em}
.dblk small{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.dblk.hot{background:var(--alert-bg);color:var(--alert)} .dblk.hot small{color:var(--alert)}
.dblk.done{background:var(--ok-bg);color:var(--ok)} .dblk.done small{color:var(--ok)}
/* ---------- HOME: salute · soldi · scadenza · azioni · dettagli ---------- */

.money,.tx-hero{position:relative;padding:var(--sp-5);border-radius:var(--r-hero);color:var(--hero-ink);background:radial-gradient(120% 100% at 100% 0%,var(--hero-2) 0%,var(--hero) 62%);box-shadow:var(--shadow-hero)}
.m-k{font-size:13px;font-weight:600;color:var(--hero-mut)}
.m-big{font-size:44px;line-height:1.02;font-weight:800;letter-spacing:-.045em;margin-top:6px}
.s-mine{background:var(--hero-mine)} .s-tax{background:var(--hero-tax)}
.money :focus-visible,.tx-hero :focus-visible{outline-color:var(--hero-tax)}

.next{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.jar{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3) var(--sp-4) var(--sp-4);text-align:left;color:inherit}
.jar-salvo{width:56px;height:auto;flex:none}
.jar-l{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--muted)}
.jar-l .v{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-left:auto}
.jar-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden;margin-top:var(--sp-2)}
.jar-bar>i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ok-dot);transition:width .9s var(--ease)}
.jar-salvo.nudge{animation:sal-nudge .6s .5s var(--ease) both}
.jar-salvo.levelup{animation:sal-level 1s .5s var(--ease) both}

.quick.qx{gap:var(--sp-1);margin-top:var(--sp-5)}
.quick.qx>*{background:none;border:0;box-shadow:none;padding:4px 0 2px;gap:var(--sp-2);font-size:12.5px;font-weight:600;color:var(--text);min-height:44px}
.quick.qx .ic{box-sizing:border-box;width:52px;height:52px;padding:14px;border-radius:50%;background:var(--accent-soft);color:var(--accent);transition:background-color .15s,transform .15s var(--ease)}
.quick.qx>*:first-child .ic{background:var(--accent);color:#fff}
.quick.qx>*:active .ic{transform:scale(.94)}
.askrow{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border)}
.askrow .it{font-weight:600;color:var(--ink);font-size:15px;line-height:1.3}
.askrow .is{font-size:13px;color:var(--muted);margin-top:3px}
.askrow .is b{color:var(--ink);font-weight:700}
.askrow.late .is{color:var(--alert)}
.askrow-a{display:flex;flex-direction:column;align-items:stretch;gap:2px;flex:none}
.askrow-a .btn{min-height:40px;padding:0 16px;font-size:14px;width:auto}
.askrow-a .btn.ghost{font-size:13px;color:var(--muted);min-height:36px;padding:0 8px;border:0;background:none}

.details{padding-top:var(--sp-4)}
.details .yc-limit{padding:var(--sp-3) 0;border-top:0}
.month-teaser{border-radius:var(--r-card)}
.month-teaser .mt-salvo{height:56px}
.chart-card{border-radius:var(--r-card)}

/* ---------- TASSE: prima quanto mettere da parte, poi il come ---------- */
.tx-hero{margin-top:var(--sp-4)}
.tx-rule{font-size:14px;color:var(--hero-mut);margin-top:var(--sp-2);line-height:1.45}
.tx-rule b{color:var(--hero-ink)}
.tx-hero .jar{margin-top:var(--sp-4);padding:var(--sp-3);border-radius:var(--r-ctl);background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 1px var(--hero-line)}
.tx-hero .jar-salvo{width:48px}
.tx-hero .jar-l{color:var(--hero-mut)} .tx-hero .jar-l .v{color:var(--hero-ink)}
.tx-hero .jar-bar{background:rgb(255 255 255 / .12)} .tx-hero .jar-bar>i{background:var(--hero-mine)}
.tx-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding:6px 0;font-size:15px;color:var(--ink);font-weight:600}
.tx-row b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.tx-row.sub2{font-size:14px;color:var(--muted);font-weight:500}
.tx-row.sub2 b{font-size:15px;font-weight:650;color:var(--text);letter-spacing:0}
.note-salvo{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-card);background:var(--accent-soft)}
.note-salvo img{width:60px;height:auto;flex:none}
.note-salvo b{font-size:14px;color:var(--ink)}
.note-salvo p{font-size:13.5px;color:var(--text);line-height:1.45;margin-top:2px}

/* ---------- righe F24 ---------- */
.f24{gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.card.group>.f24:last-child,.card.flat>.f24:last-child{border-bottom:0}
.f24 .it{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.f24 .right{display:grid;justify-items:end;gap:5px}
.f24 .amt{font-size:16px;font-weight:750}

/* ---------- FATTURE: scansione immediata ---------- */
.segs.two{justify-content:flex-start;gap:var(--sp-5);padding:0 var(--sp-4)}
.segs.two button{padding:12px 2px}
.tools{display:flex;gap:var(--sp-2);align-items:stretch}
.tools .search{flex:1;min-width:0}
.tool-btn{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--border-2);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;flex:none}
.tool-btn .ic{font-size:18px;color:var(--accent)}
.chips.filt{margin-top:var(--sp-3)}
.mhead{display:flex;justify-content:space-between;align-items:baseline;margin:var(--sp-5) var(--sp-1) var(--sp-2);font-size:14px;font-weight:700;color:var(--ink)}
.mhead b{font-size:13px;font-weight:600;color:var(--muted)}
div>.mhead:first-child{margin-top:var(--sp-2)}
.inv{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border);text-align:left;min-height:64px;transition:background-color .15s}
.card.group>.inv:last-child{border-bottom:0}
.inv .grow{min-width:0}
.inv-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted)}
.inv-c{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-m{font-size:13px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-r{display:grid;justify-items:end;gap:3px;flex:none}
.inv-r b{font-size:15px;font-weight:750;color:var(--ink)}
.inv-s{font-size:12.5px;font-weight:650;color:var(--muted)}
.inv.st-incassata .inv-dot{background:var(--ok-dot)} .inv.st-incassata .inv-s{color:var(--ok)}
.inv.st-aperta .inv-dot{background:var(--warn-dot)} .inv.st-aperta .inv-s{color:var(--warn)}
.inv.st-scaduta .inv-dot{background:var(--alert)} .inv.st-scaduta .inv-s{color:var(--alert)}
.inv.st-stornata .inv-c,.inv.st-stornata b{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.cl-row .it{font-size:15px;font-weight:600;color:var(--ink)}
.cl-row .amt{font-weight:750;color:var(--ink)}

/* ---------- stati vuoti: dicono cosa fare ---------- */
.empty2{text-align:center;padding:var(--sp-7) var(--sp-4) var(--sp-6)}
.empty2 .salvo-empty{width:104px;height:auto;margin:0 auto var(--sp-3);display:block}
.empty2 .empty-ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--sp-3);border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:26px}
.empty2 h3{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.empty2 p{font-size:14px;color:var(--muted);line-height:1.5;max-width:34ch;margin:var(--sp-2) auto 0}
.empty2 .btn{width:auto;margin-top:var(--sp-5);padding:0 var(--sp-5)}

/* ---------- NUOVA FATTURA: cinque cose, il resto dopo ---------- */
.nf .pr-chips{margin:var(--sp-2) 0 0;padding:0}
.eur-in.big .input{font-size:22px;font-weight:750;min-height:52px;color:var(--ink)}
.eur-in.big span{font-size:18px}
.nf-more{border-radius:var(--r-card)}
.nf-more>summary{list-style:none;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);min-height:56px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);cursor:pointer}
.nf-more>summary::-webkit-details-marker{display:none}
.nf-more>summary b{display:block;font-size:15px;color:var(--ink)}
.nf-more>summary small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.nf-more>summary .ic{color:var(--muted);transition:transform .2s var(--ease)}
.nf-more[open]>summary .ic{transform:rotate(180deg)}
.nf-more>.card{margin-top:var(--sp-2)}
.nf-sum{border-top:0}

/* ---------- ALTRO ---------- */
.studio{display:flex;gap:var(--sp-3);align-items:flex-start;padding-top:var(--sp-2)}
.studio b{font-size:15px;color:var(--ink)}
.studio p{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:4px}
.danger-zone{margin-top:var(--sp-7)}
.danger-zone .help{margin-top:var(--sp-2);text-align:center}
.profile{border-radius:var(--r-card)}
/* ---------- navigazione: stato attivo chiaro, niente effetti ---------- */
.tabbar button{position:relative;isolation:isolate;font-size:11.5px;font-weight:600;min-height:52px;gap:3px;transition:color .15s}
.tabbar .ic{font-size:22px;margin-top:4px}
.tabbar button::before{content:"";position:absolute;z-index:-1;top:2px;left:50%;width:52px;height:30px;margin-left:-26px;border-radius:999px;background:var(--accent-soft);opacity:0;transform:scale(.7);transition:opacity .2s,transform .25s var(--ease)}
.tabbar button[aria-current="page"]::before{opacity:1;transform:none}

/* ---------- micro-interazioni ---------- */
.toast{border-radius:var(--r-ctl)}
.toast.pop.on .ic{animation:tpop .35s var(--ease)}
@keyframes tpop{0%{transform:scale(.4)}60%{transform:scale(1.15)}}
.split i,.regime .fill{transition:width .6s var(--ease)}
@media (hover:hover){
  .inv:hover,.set-row:hover,.f24:hover,.cl-row:hover{background:var(--sunken)}
  .card.press:hover,.next-main:hover,.jar:hover,.nf-more>summary:hover{background-color:color-mix(in srgb,var(--sunken) 70%,var(--surface))}
  .m-item:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .btn.primary:hover{background:color-mix(in srgb,var(--accent) 90%,#000)}
  .btn.ghost:hover,.tool-btn:hover,.chip:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border-2))}
  .tabbar button:hover{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.jar-bar>i,.split i,.regime .fill,.tabbar button::before{transition:none}.toast.pop.on .ic,.jar-salvo.nudge,.jar-salvo.levelup{animation:none}}

/* computer: si vede il telefono (app pensata per il telefono) */

.nf .actions{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2)}
.nf .actions .btn{white-space:nowrap}
.nf .actions .btn.ghost{padding:0 var(--sp-4)}
/* touch target minimo 44px */
.chip{min-height:44px}
.askrow-a .btn,.askrow-a .btn.ghost{min-height:44px}
.link,.link-btn{min-height:44px;display:inline-flex;align-items:center}

/* =========================================================================
   HOME v3 · "capisco tutto in 3 secondi" (2026-09-28)
   Ordine: salute → disponibile → da accantonare → prossime scadenze → azioni → attività.
   Niente gradienti, una sola superficie in evidenza, Salvo piccolo accanto al saluto.
   ========================================================================= */
.home3{padding-bottom:var(--sp-4)}
.home3 .s-mine{background:var(--ok-dot)} .home3 .s-tax{background:var(--accent)}
.home3 .top{padding-top:0}

.h3-hero{padding:var(--sp-3) var(--sp-1) 0}
.h3-greet{display:flex;align-items:flex-end;gap:var(--sp-3)}
.h3-hello{font-size:15px;color:var(--muted);font-weight:500}
.h3-greet h1{font-size:26px;line-height:1.1;letter-spacing:-.03em;font-weight:800;color:var(--ink);margin-top:2px;text-wrap:balance}
.h3-greet h1 span{color:var(--accent)}
.h3-salvo{width:68px;height:auto;flex:none;margin-bottom:-2px}
.h3-salvo.nudge{animation:sal-nudge .6s .3s var(--ease) both}
.h3-salvo.levelup{animation:sal-level 1s .3s var(--ease) both}

.h3-health{display:inline-flex;align-items:center;flex-wrap:wrap;column-gap:6px;row-gap:2px;margin-top:var(--sp-3);min-height:36px;max-width:100%;padding:7px 12px 7px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:13px;line-height:1.3;color:var(--muted);text-align:left;transition:background-color .25s,border-color .25s}
.h3-health b{color:var(--ink);font-weight:650}
.h3-health>i{width:8px;height:8px;border-radius:50%;background:var(--ok-dot);flex:none;margin-right:2px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok-dot) 18%,transparent);transition:background-color .25s}
.h3-health.st-check>i{background:var(--warn-dot);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn-dot) 20%,transparent)}
.h3-health.st-alert{background:var(--alert-bg);border-color:color-mix(in srgb,var(--alert) 28%,transparent)}
.h3-health.st-alert>i{background:var(--alert);box-shadow:0 0 0 3px color-mix(in srgb,var(--alert) 20%,transparent)}
.h3-health .ic{font-size:13px}

/* il numero protagonista */
.h3-money{display:block;width:100%;margin-top:var(--sp-7);text-align:left;color:inherit;border-radius:var(--r-ctl)}
.h3-k{display:block;font-size:14px;font-weight:600;color:var(--muted)}
.h3-big{display:block;margin-top:var(--sp-1);font-size:58px;line-height:1;font-weight:800;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.h3-big .cur{font-size:.5em;font-weight:700;letter-spacing:0;margin-right:.14em;color:var(--muted);vertical-align:baseline}
.h3-exp{display:block;margin-top:var(--sp-2);font-size:14px;color:var(--muted)}
.h3-exp b{color:var(--text);font-weight:650}
.h3-split{display:flex;gap:3px;height:6px;margin-top:var(--sp-4)}
.h3-split i{display:block;height:100%;width:0;border-radius:3px;transition:width .8s var(--ease)}

/* accantonamento: l'unica superficie in evidenza */
.h3-acc{margin-top:var(--sp-6)!important;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.h3-acc.flash{animation:accflash 1.2s var(--ease)}
@keyframes accflash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok-dot) 40%,transparent)}40%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok-dot) 18%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.h3-tax{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-4);text-align:left;color:inherit}
.h3-dot{width:10px;height:10px;border-radius:50%;flex:none}
.h3-dot.warn{background:var(--warn-dot)} .h3-dot.info{background:var(--accent)}
.h3-l{display:block;font-size:15px;font-weight:650;color:var(--ink);line-height:1.3}
.h3-l b{font-weight:800;letter-spacing:-.01em}
.h3-l.ok{color:var(--ok)}
.h3-s{display:block;font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}
.h3-s .v{color:var(--text);font-weight:650}
.h3-num{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ink);white-space:nowrap;flex:none}
.h3-jar{border-top:1px solid var(--border);padding:var(--sp-4)}
.h3-jar .h3-l{font-size:17px}
.h3-jar-top{display:flex;align-items:center;gap:var(--sp-3)}
.btn.sm{width:auto;flex:none;min-height:44px;padding:0 var(--sp-4);font-size:14px;gap:6px}
.btn.sm .ic{font-size:17px}
.h3-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden;margin-top:var(--sp-3)}
.h3-bar.thin{height:4px;margin-top:var(--sp-2)}
.h3-bar>i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ok-dot);transition:width .9s var(--ease)}

/* sezioni */
.h3-sec{margin-top:var(--sp-7)!important}
.h3-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin:0 var(--sp-1) var(--sp-2)}
.h3-head h2{font-size:19px;font-weight:700;letter-spacing:-.018em;color:var(--ink)}
.h3-head .link{font-weight:600;color:var(--accent);min-height:44px}
.h3-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:0 var(--sp-4);overflow:hidden}
.h3-list>.f24{margin:0 calc(-1 * var(--sp-4));padding:var(--sp-3) var(--sp-4);width:calc(100% + 2 * var(--sp-4))}
.h3-list>.f24:last-child{border-bottom:0}
.h3-list>.askrow:first-child{border-top:0}
.h3-empty{font-size:14px;color:var(--muted);line-height:1.5;margin:0 var(--sp-1)}
.home3 .quick.qx{margin-top:var(--sp-6)!important}
.h3-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3) var(--sp-4);min-height:60px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);color:inherit}
.h3-row b{display:block;font-size:15px;font-weight:650;color:var(--ink);line-height:1.3}
.h3-row.teaser img{width:44px;height:auto;flex:none}

/* la tua attività: numeri in fila, senza card dentro card */
.h3-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
.h3-stats>*{padding:var(--sp-3) var(--sp-3) var(--sp-4);text-align:left;min-width:0;color:inherit}
.h3-stats>*+*{border-left:1px solid var(--border)}
.h3-stats b{display:block;margin-top:var(--sp-1);font-size:18px;font-weight:750;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h3-stats button b{color:var(--warn)}
.h3-meter{display:block;width:100%;margin-top:var(--sp-5);padding:0 var(--sp-1);text-align:left;color:inherit;border:0;background:none}
.h3-mt{display:flex;align-items:baseline;gap:var(--sp-2)}
.h3-mt .h3-l{margin-right:auto}
.h3-mt .h3-s{margin:0}
.h3-meter .regime{margin-top:var(--sp-2)}
.h3-meter>.h3-s{margin-top:var(--sp-2)}
.home3 .yc-how{margin:var(--sp-3) var(--sp-1) 0}
.home3 .h3-row.teaser{margin-top:var(--sp-6)!important}
.home3 .chart-card{margin-top:var(--sp-4)!important}

@media (hover:hover){.h3-money:hover .h3-k,.h3-tax:hover .h3-l{color:var(--accent)} .h3-row:hover,.h3-list>.f24:hover{background:var(--sunken)}}
@media (prefers-reduced-motion:reduce){.h3-split i,.h3-bar>i{transition:none}.h3-acc.flash,.h3-salvo.nudge,.h3-salvo.levelup{animation:none}}
.h3-l b{white-space:nowrap}
.h3-jar-top .grow{min-width:0}
.f24 .body{flex:1;min-width:0}
.f24 .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f24 .right{flex:none}
.h3-money{margin-top:var(--sp-6)}
.h3-acc{margin-top:var(--sp-5)!important}
.h3-sec{margin-top:var(--sp-6)!important}
.h3-k2{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.h3-jar .h3-num{display:block;margin:2px 0 2px}
.h3-jar.jar{display:block;background:none;padding:var(--sp-4)}

/* =========================================================================
   FINAL POLISH (2026-09-28): barra sospesa con + centrale, meno enfasi ovunque
   ========================================================================= */
/* ---------- barra in basso sospesa ---------- */
.tabbar{display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:center;background:var(--surface);border:0;border-radius:26px;padding:6px 6px;
  box-shadow:0 10px 30px -12px rgb(14 27 61 / .28),0 1px 0 rgb(14 27 61 / .04);overflow:visible}
.tabbar button[data-go]{min-height:54px;font-size:11px;font-weight:600;gap:3px;color:var(--muted);border-radius:18px}
.tabbar button[data-go] .ic{font-size:22px;margin-top:0}
.tabbar button[data-go]::before{top:4px;width:48px;height:28px;margin-left:-24px}
.tabbar button[aria-current="page"]{color:var(--accent)}
.tb-mid{position:relative;display:grid;place-items:center;height:54px}
/* il rialzo: stesso colore della barra, dietro al + */
.tb-mid::before{content:"";position:absolute;left:50%;top:-18px;width:76px;height:76px;margin-left:-38px;border-radius:50%;background:var(--surface);box-shadow:0 -6px 14px -8px rgb(14 27 61 / .22);clip-path:inset(-20px -20px 50% -20px)}
.tb-plus{position:relative;top:-14px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:26px;
  box-shadow:0 8px 18px -6px color-mix(in srgb,var(--accent) 60%,transparent);transition:transform .18s var(--ease),box-shadow .18s}
.tb-plus .ic{font-size:26px}
.tb-plus:active{transform:scale(.92)}
@media (hover:hover){.tb-plus:hover{box-shadow:0 10px 22px -6px color-mix(in srgb,var(--accent) 70%,transparent)}}
/* telefono: fissa, staccata dai bordi */
  .tabbar{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:calc(100% - 24px);max-width:536px;padding:6px}
  .view{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
/* computer (anteprima nel telefono): stessa barra, dentro lo schermo */

/* ---------- intestazioni: titolo + cerchio iniziali ---------- */
.bighead{align-items:center}
.bighead .avatar{width:40px;height:40px;font-size:14px;flex:none}
.top .avatar{width:40px;height:40px;font-size:14px}
.top .bell{width:44px;height:44px;font-size:22px}

/* ---------- Tasse: stessa voce della Home, niente blocco scuro ---------- */
.tx-hero{background:none;box-shadow:none;color:var(--ink);padding:var(--sp-2) var(--sp-1) 0;border-radius:0}
.tx-hero .m-k{color:var(--muted);font-size:14px}
.tx-hero .m-big{font-size:52px;color:var(--ink)}
.tx-hero .tx-rule{color:var(--muted)} .tx-hero .tx-rule b{color:var(--ink)}
.tx-hero .jar{margin-top:var(--sp-5);padding:var(--sp-4);border-radius:var(--r-card);background:var(--surface);box-shadow:none;border:1px solid var(--border)}
.tx-hero .jar-l{color:var(--muted)} .tx-hero .jar-l .v{color:var(--ink)}
.tx-hero .jar-bar{background:color-mix(in srgb,var(--muted) 16%,transparent)} .tx-hero .jar-bar>i{background:var(--ok-dot)}
.tx-hero .jar-salvo{width:44px}
.tx-split{margin-top:var(--sp-5)!important}
.note-salvo{background:var(--sunken)}
.note-salvo img{width:48px}

/* ---------- dettagli, avvisi, suggerimenti: meno colore, stesso linguaggio ---------- */
.hero-card{padding:var(--sp-5) var(--sp-4);border-radius:var(--r-card)}
.hero-num,.dl-amt b{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.insight,.tip-card{background:var(--sunken);border:0;border-radius:var(--r-card);color:var(--text)}
.insight .icon-tile,.tip-card .icon-tile,.status-line .icon-tile{background:transparent!important;width:28px;height:28px;font-size:22px}
.insight .icon-tile.t-blue,.tip-card .icon-tile.t-blue{color:var(--accent)}
.tip-card .tt{color:var(--ink);font-weight:650}
.status-line{border-radius:var(--r-card);padding:var(--sp-3) var(--sp-4)}
.okline,.warnline{border-radius:var(--r-ctl);padding:var(--sp-3) var(--sp-4)}
.btn-row{gap:var(--sp-2)}
.btn-row .btn{min-height:44px}
.kv{font-variant-numeric:tabular-nums}
.segs button{min-height:44px;font-weight:600}
.segs{border-bottom-color:var(--border)}

/* ---------- finestre dal basso: proporzioni ---------- */
.sheet{border-radius:var(--r-modal) var(--r-modal) 0 0;padding:var(--sp-2) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom,0px))}
.sheet .grab{width:36px;height:4px;margin:0 auto var(--sp-4);background:var(--border-2)}
.sheet h3{font-size:19px;font-weight:700;letter-spacing:-.015em}
.sheet .btn{margin-top:var(--sp-3)}
.scrim{background:rgb(10 15 26 / .42);backdrop-filter:blur(2px)}

/* ---------- form ---------- */
.field label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block}
.err{font-size:13px;color:var(--alert);margin-top:6px;display:flex;gap:6px;align-items:center}
.switch{transition:background-color .2s}

/* ---------- cerchi rapidi in Home: il + è già in basso, qui tono più neutro ---------- */
.home3 .quick.qx>*:first-child .ic{background:var(--accent-soft);color:var(--accent)}
.quick.q3{grid-template-columns:repeat(3,1fr)}
.tabbar .tb-plus{color:#fff;padding:0;min-height:0}
.tabbar .tb-plus::before{display:none}
.tabbar .tb-plus .ic{font-size:26px;color:#fff}
.kv b{white-space:nowrap;flex:none}
.kv span{min-width:0}
.copybox{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
.view,.stack{max-width:100%;overflow-x:clip}
/* touch target e leggibilità (controllo finale) */
.bighead .avatar,.top .avatar{width:44px;height:44px}
.sec-row .link,.h3-head .link{min-height:44px;display:inline-flex;align-items:center}
.hero-card .btn-row .btn,.stack .btn-row .btn{min-height:44px}
.switch{position:relative}
.switch::before{content:"";position:absolute;inset:-8px -6px}   /* area di tocco più grande: su ::before, perché ::after è il pallino */
.brand small{font-size:10px;letter-spacing:.06em}
.mlabels span{font-size:11px}

/* =========================================================================
   BARRA v2 · una sola sagoma (barra + rialzo) con ombra e filo comuni
   ========================================================================= */
.tabbar{box-shadow:none;border-radius:28px;padding:6px 8px;
  filter:drop-shadow(0 0 .6px rgb(14 27 61 / .22)) drop-shadow(0 10px 22px rgb(14 27 61 / .14)) drop-shadow(0 2px 4px rgb(14 27 61 / .05))}
.tb-mid::before{top:-17px;width:74px;height:74px;margin-left:-37px;box-shadow:none;clip-path:none}
.tabbar button[data-go]{min-height:56px;gap:4px;font-size:11px;letter-spacing:.01em}
.tabbar button[data-go] .ic{font-size:23px;transition:transform .25s var(--ease)}
.tabbar button[data-go]::before{top:3px;width:52px;height:30px;margin-left:-26px}
.tabbar button[aria-current="page"] .ic{transform:translateY(-1px)}
.tabbar .tb-plus{top:-15px;width:58px;height:58px;background:var(--accent);
  box-shadow:0 10px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgb(255 255 255 / .18);
  transition:transform .2s var(--ease),background-color .25s,box-shadow .25s}
.tabbar .tb-plus .ic{font-size:28px;transition:transform .3s var(--ease)}
.tabbar .tb-plus:active{transform:scale(.9)}
/* in Nuova fattura: il + gira e diventa × per chiudere */
.nf-on .tabbar .tb-plus{background:var(--ink);box-shadow:0 10px 20px -8px rgb(14 27 61 / .5)}
.nf-on .tabbar .tb-plus .ic{transform:rotate(45deg)}
.nf-on .tabbar button[data-go]{opacity:.55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tabbar{filter:drop-shadow(0 0 .6px rgb(255 255 255 / .14)) drop-shadow(0 10px 24px rgb(0 0 0 / .55))}
  :root:not([data-theme="light"]) .nf-on .tabbar .tb-plus{background:#2A3552}}
@media (prefers-reduced-motion:reduce){.tabbar .tb-plus,.tabbar .tb-plus .ic,.tabbar button[data-go] .ic{transition:none}}

/* =========================================================================
   NUOVA FATTURA v2 · l'importo è il protagonista, il resto segue
   ========================================================================= */
.nf-amount{padding:var(--sp-4) var(--sp-1) var(--sp-1)}
.nf-k{display:block;font-size:14px;font-weight:600;color:var(--muted)}
.nf-amt{display:flex;align-items:baseline;gap:8px;margin-top:var(--sp-1);padding-bottom:var(--sp-2);border-bottom:2px solid var(--border-2);transition:border-color .2s}
.nf-amt:focus-within{border-color:var(--accent)}
.nf-amt:has(input[aria-invalid="true"]){border-color:var(--alert)}
.nf-amt .cur{font-size:28px;font-weight:700;color:var(--muted);flex:none}
.nf-amt input{flex:1;min-width:0;border:0;background:none;padding:0;min-height:64px;font:inherit;font-size:54px;font-weight:800;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;caret-color:var(--accent)}
.nf-amt input:focus,.nf-amt input:focus-visible{outline:none}
.nf-amt input::placeholder{color:color-mix(in srgb,var(--muted) 40%,transparent)}
.nf-sum{margin-top:var(--sp-3)}
.nf-sum .kv{padding:3px 0;border:0;font-size:13px;color:var(--muted)}
.nf-sum .kv b{font-weight:600;color:var(--text)}
.nf-sum .kv.total{margin-top:2px;font-size:14px;color:var(--ink);font-weight:650;border:0;padding-top:3px}
.nf-sum .kv.total b{font-weight:800;color:var(--ink)}
.nf .nf-more{margin-top:var(--sp-3)!important}
.nf-more .sw-row{border-top:1px solid var(--border);margin-top:var(--sp-4)}
.btn.quiet{background:none;border:0;color:var(--accent);min-height:44px;font-weight:600}
@media (hover:hover){.btn.quiet:hover{background:var(--accent-soft)}}
.nf .foot-note{margin-top:var(--sp-2)}

/* =========================================================================
   NUOVA FATTURA v3 · importo · rubrica · elenco raggruppato · azione sempre visibile
   ========================================================================= */
.nf .nav{grid-template-columns:72px 1fr 72px}
.nf .nav h2{font-size:17px;font-weight:650}
.nav-txt{justify-self:end;min-height:44px;padding:0 4px;font-size:15px;font-weight:600;color:var(--accent)}
.nf .nav button.nav-txt{width:auto;height:auto;font-size:15px;color:var(--accent)}

.nf-amount{padding:var(--sp-5) var(--sp-1) 0}
.nf-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.nf-no{font-size:13px;color:var(--muted);font-weight:500}
.nf-amt{border-bottom:0;padding-bottom:0;margin-top:var(--sp-1)}
.nf-amt input{font-size:60px;min-height:72px}
.nf-amt .cur{font-size:30px}
.nf-amt:has(input[aria-invalid="true"]) input{color:var(--alert)}
.nf-sum{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-1);min-height:22px;font-size:13.5px;color:var(--muted)}
.nf-sum b{font-size:15px;font-weight:750;color:var(--ink)}
.nf-hint{color:var(--muted)}

/* rubrica clienti recenti */
.nf-people{display:flex;gap:var(--sp-3);overflow-x:auto;margin:var(--sp-6) calc(-1 * var(--sp-4)) 0!important;padding:2px var(--sp-4) 4px;scrollbar-width:none}
.nf-people::-webkit-scrollbar{display:none}
.pp{flex:none;width:64px;display:grid;justify-items:center;gap:6px;text-align:center;color:var(--text);min-height:44px}
.pp-av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.pp-n{font-size:12px;font-weight:600;max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp[aria-pressed="true"] .pp-av{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.04)}
.pp[aria-pressed="true"] .pp-n{color:var(--accent)}

/* elenco raggruppato stile impostazioni iPhone */
.ig{margin-top:var(--sp-5)!important;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.ir{display:flex;align-items:center;gap:var(--sp-3);min-height:56px;padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--border);cursor:text;width:100%;text-align:left;background:none;transition:background-color .15s}
.ig>.ir:first-child,.ig>summary.ir,.nf-more-in>.ir:first-child{border-top:0}
.ir-k{flex:none;font-size:15px;font-weight:600;color:var(--ink);display:grid;gap:1px}
.ir-k small{font-size:12px;font-weight:500;color:var(--muted)}
.ir-in{flex:1;min-width:0;border:0;background:none;padding:10px 0;font:inherit;font-size:16px;color:var(--text);text-align:right;caret-color:var(--accent)}
.ir-in::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.ir-in:focus{outline:none}
.ir-in[type="date"]{flex:0 1 auto;min-width:140px;color:var(--ink);font-weight:600}
.ir:focus-within{background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface))}
.ir:has([aria-invalid="true"]){background:color-mix(in srgb,var(--alert-bg) 70%,var(--surface))}
.ir:has([aria-invalid="true"]) .ir-k{color:var(--alert)}
.ir .switch{margin-left:auto}
.ir-err{padding:0 var(--sp-4) var(--sp-3);margin:0;background:color-mix(in srgb,var(--alert-bg) 70%,var(--surface))}
.ir-col{flex-direction:column;align-items:stretch;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);cursor:default}
.seg-pay{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:var(--r-ctl);background:var(--sunken)}
.seg-pay button{min-height:40px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--muted);transition:background-color .15s,color .15s}
.seg-pay button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(14 27 61 / .1)}
.ir-link{cursor:pointer;color:var(--accent);font-weight:600;font-size:15px;gap:var(--sp-2)}
.nf-righe{padding:var(--sp-3) var(--sp-4) 0;border-top:1px solid var(--border)}

.nf-more{margin-top:var(--sp-3)!important}
.nf-more>summary{list-style:none;cursor:pointer;border:0;border-radius:0;min-height:60px}
.nf-more>summary::-webkit-details-marker{display:none}
.nf-more>summary .ir-k{flex:1}
.nf-more>summary .ic{color:var(--muted);transition:transform .2s var(--ease)}
.nf-more[open]>summary .ic{transform:rotate(180deg)}
.nf-more-in{border-top:1px solid var(--border)}
.nf-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:var(--sp-4)!important}

/* azione sempre visibile, sopra la barra sospesa */
.nf-cta{position:sticky;z-index:5;bottom:calc(92px + env(safe-area-inset-bottom,0px));margin-top:var(--sp-4)!important;padding-top:var(--sp-4);
  background:linear-gradient(to bottom,transparent,var(--app) 38%)}
.nf-cta .btn{min-height:54px;font-size:16px;border-radius:16px;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
@media (hover:hover){.ir:not(.ir-col):hover{background:var(--sunken)} .pp:hover .pp-av{border-color:var(--accent)}}
.ir-in[type="date"]{margin-left:auto;text-align:right}
.ir-in[type="date"]::-webkit-calendar-picker-indicator{opacity:.55}

/* =========================================================================
   DETTAGLI (fattura, F24) · stesso linguaggio di Nuova fattura
   ========================================================================= */
.dt-hero{padding:var(--sp-5) var(--sp-1) var(--sp-1)}
.dt-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.dt-who{font-size:15px;font-weight:650;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:var(--muted);flex:none}
.dt-st i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dt-hero.st-incassata .dt-st{color:var(--ok)} .dt-hero.st-incassata .dt-st i{background:var(--ok-dot)}
.dt-hero.st-aperta .dt-st{color:var(--warn)} .dt-hero.st-aperta .dt-st i{background:var(--warn-dot)}
.dt-hero.st-scaduta .dt-st{color:var(--alert)} .dt-hero.st-scaduta .dt-st i{background:var(--alert)}
.dt-amt{margin-top:var(--sp-2);font-size:54px;line-height:1;font-weight:800;letter-spacing:-.045em;color:var(--ink)}
.dt-amt .cur{font-size:.5em;font-weight:700;color:var(--muted);letter-spacing:0;margin-right:.14em}
.dt-amt .cents{font-size:.5em;font-weight:700;color:var(--muted);letter-spacing:-.01em}
.dt-amt.dt-date{font-size:32px;letter-spacing:-.03em}
.dt-unk{font-size:24px;letter-spacing:-.02em}
.dt-sub{margin-top:var(--sp-2);font-size:14px;color:var(--muted);line-height:1.45}
.ir.ro{cursor:default;align-items:baseline;min-height:52px}
.ir-v{flex:1;min-width:0;font-size:15px;color:var(--text);line-height:1.35;display:grid;gap:2px}
.ir-v small{font-size:12.5px;color:var(--muted)}
.ir.ro b{font-size:15px;font-weight:650;color:var(--ink);white-space:nowrap}
.ir.ro b.unk{color:var(--warn);font-weight:600}
.ir.ro.tot{background:var(--sunken)}
.ir.ro.tot .ir-v{font-weight:650;color:var(--ink)}
.ir.ro.tot b{font-size:17px;font-weight:800}
.ir-link.danger{color:var(--alert)}
a.ir{text-decoration:none}
.dt-copy>summary{list-style:none;cursor:pointer}
.dt-copy>summary::-webkit-details-marker{display:none}
.dt-copy>summary .ir-k{flex:1}
.dt-copy>summary .ic{color:var(--muted);transition:transform .2s var(--ease)}
.dt-copy[open]>summary .ic{transform:rotate(180deg)}
.dt-copy-in{padding:0 var(--sp-4) var(--sp-4)}
.dt-copy-in .copybox{background:var(--sunken);border-radius:var(--r-ctl);padding:var(--sp-3);font-size:12.5px;line-height:1.5;max-height:220px;overflow:auto}
.dt-copy-in .btn{margin-top:var(--sp-2)}
.dt>.ig+.ig{margin-top:var(--sp-3)!important}
.dt .note-salvo{margin-top:var(--sp-5)!important}

/* =========================================================================
   MODULI · Profilo, Dichiarazione, Estero, finestre dal basso: righe raggruppate
   ========================================================================= */
.form-card:not(.nf-fields){padding:0;overflow:hidden}
.form-card:not(.nf-fields)>.f-t{padding:var(--sp-4) var(--sp-4) var(--sp-1);margin:0;font-size:13px;font-weight:650;color:var(--muted)}
.form-card:not(.nf-fields) .grid2{display:block;margin:0!important}
.form-card:not(.nf-fields) .field,.sheet .field{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(104px,1fr);align-items:center;column-gap:var(--sp-3);row-gap:2px;min-height:56px;margin:0!important;padding:var(--sp-1) var(--sp-4);border-top:1px solid var(--border)}
.form-card:not(.nf-fields)>.field:first-child,.form-card:not(.nf-fields)>.grid2:first-child>.field:first-child,.form-card:not(.nf-fields)>.f-t+.field{border-top:0}
.form-card:not(.nf-fields) .field>label,.sheet .field>label{margin:0;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.form-card:not(.nf-fields) .field .input,.sheet .field .input{border:0;background:transparent;box-shadow:none;text-align:right;padding:10px 0;min-height:44px;font-weight:600}
.form-card:not(.nf-fields) .field .input:focus,.sheet .field .input:focus{box-shadow:none;outline:none}
.form-card:not(.nf-fields) .field:focus-within,.sheet .field:focus-within{background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface))}
.form-card:not(.nf-fields) .field:has([aria-invalid="true"]),.sheet .field:has([aria-invalid="true"]){background:color-mix(in srgb,var(--alert-bg) 70%,var(--surface))}
.form-card:not(.nf-fields) .field:has([aria-invalid="true"])>label,.sheet .field:has([aria-invalid="true"])>label{color:var(--alert)}
.form-card:not(.nf-fields) .field>.help,.form-card:not(.nf-fields) .field>.err,.sheet .field>.help,.sheet .field>.err{grid-column:1/-1;margin:0 0 var(--sp-2)}
.form-card:not(.nf-fields)>.help{padding:0 var(--sp-4) var(--sp-3);margin:0!important}
.form-card:not(.nf-fields) .eur-in,.sheet .field .eur-in{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.form-card:not(.nf-fields) .eur-in span,.sheet .field .eur-in span{position:static;transform:none;font-size:15px;color:var(--muted)}
.form-card:not(.nf-fields) .eur-in .input,.sheet .field .eur-in .input{padding-left:0;width:100%}
.form-card:not(.nf-fields) select.input,.sheet select.input{text-align-last:right;padding-right:22px;background-position:right 0 center}
.form-card:not(.nf-fields) .sw-row{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border)}
.form-card:not(.nf-fields)>.chips{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.form-card:not(.nf-fields)>.btn,.form-card:not(.nf-fields)>.err{margin:var(--sp-3) var(--sp-4) var(--sp-4)!important;width:calc(100% - 2 * var(--sp-4))}

/* finestre dal basso */
.sheet{background:var(--app)}
.sheet h3{font-size:21px;font-weight:750;letter-spacing:-.02em;margin:var(--sp-1) 0 var(--sp-1)}
.sheet>p{font-size:14px;color:var(--muted);line-height:1.5}
.sheet .field{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);margin-top:var(--sp-4)!important}
.sheet .field+.field{margin-top:var(--sp-2)!important}
.sheet .sheet-list,.sheet .sq-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:0 var(--sp-4);margin-top:var(--sp-4)}
.sheet .inc-row{padding:var(--sp-3) 0}
.sheet .inc-row .btn{min-height:40px;border-radius:var(--r-ctl)}
.sheet .btn{min-height:52px;border-radius:16px;margin-top:var(--sp-4)}
.sheet .btn+.btn{margin-top:var(--sp-2)}
.sheet .btn.dark{background:var(--ink);color:var(--app)}
.sheet .lines{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:0 var(--sp-4)}
.sh-salvo-img{display:block;height:96px;width:auto;margin:0 auto var(--sp-2)}
.sheet .field:has(#sh-salvo),.sheet .field:has(#sh-ex){grid-template-columns:1fr;padding:var(--sp-3) var(--sp-4)}
.sheet .field:has(#sh-salvo) .eur-in,.sheet .field:has(#sh-ex) .eur-in{justify-content:flex-start}
.sheet #sh-salvo,.sheet #sh-ex{text-align:left;font-size:40px;font-weight:800;letter-spacing:-.04em;color:var(--ink);min-height:56px}
.sheet .field:has(#sh-salvo) .eur-in span,.sheet .field:has(#sh-ex) .eur-in span{font-size:22px;font-weight:700}

/* =========================================================================
   UN SOLO SELETTORE · stile a tasti (come "Pagamento entro")
   ========================================================================= */
.segs,.chips:not(.wrap):not(.pr-chips){display:flex;gap:4px;margin:0;padding:4px;border:0;border-radius:var(--r-ctl);background:color-mix(in srgb,var(--muted) 12%,var(--app));overflow-x:auto;scrollbar-width:none}
.segs::-webkit-scrollbar{display:none}
.segs button,.chips:not(.wrap):not(.pr-chips) .chip{flex:1 0 auto;min-height:40px;padding:0 var(--sp-3);border:0;border-radius:9px;background:transparent;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s}
.segs button::after{display:none!important}
.segs button[aria-selected="true"],.chips:not(.wrap):not(.pr-chips) .chip[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(14 27 61 / .1),0 1px 1px rgb(14 27 61 / .04)}
.chips:not(.wrap):not(.pr-chips) .chip .num{opacity:.55;margin-left:4px}
.segs.two button{flex:1}
.stack>.segs,.stack>.chips{margin-top:var(--sp-3)}
.dt-who{white-space:normal;line-height:1.3}
.form-card:not(.nf-fields) .field,.sheet .field{grid-template-columns:minmax(0,42%) minmax(0,1fr)}
.segs button{text-align:center;justify-content:center}
.chips:not(.wrap):not(.pr-chips) .chip{padding:0 10px;font-size:13px}
.tabbar{transition:opacity .2s,transform .25s var(--ease)}
.open .tabbar,.firma-on .tabbar{opacity:0;pointer-events:none}
.open .tabbar,.firma-on .tabbar{transform:translate(-50%,24px)}

/* =========================================================================
   BARRA AZIONI (Nuova fattura, dettagli): attaccata al fondo, la tab bar si nasconde
   ========================================================================= */
.cta-on .tabbar{opacity:0;pointer-events:none}
.cta-on .tabbar{transform:translate(-50%,24px)} .cta-on .view{padding-bottom:0}
.nf-cta{position:sticky;bottom:0;z-index:6;margin:var(--sp-5) calc(-1 * var(--sp-4)) 0!important;
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--app) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-top:1px solid var(--border)}
.nf-cta .btn{min-height:52px;box-shadow:none}
  .nf-cta{position:fixed;left:50%;right:auto;bottom:0;transform:translateX(-50%);width:100%;max-width:560px;margin:0!important}
  .cta-on .view{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
.cta-on .tabbar{transition:none;visibility:hidden}
.nf-cta{z-index:21}

/* audit contrasti (AA 4.5:1) */
:root{--ok:#166534;--seg-off:#4B5670}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ok:#4ADE80;--seg-off:#AEB8CC}}
:root[data-theme="dark"]{--ok:#4ADE80;--seg-off:#AEB8CC}
.segs button,.chips:not(.wrap):not(.pr-chips) .chip{color:var(--seg-off)}
.mlabels span{color:var(--muted)}
.mlabels span.now{color:var(--ink);font-weight:700}
.btn.wa,.btn.primary.wa{background:#0E7A43;color:#fff}

/* =========================================================================
   GRAFICO "Incassi per mese" (dataviz): sezione piatta, barre sottili, base visibile
   ========================================================================= */
:root{--chart:#2563EB}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--chart:#5B8CFF}}
:root[data-theme="dark"]{--chart:#5B8CFF}
.home3 .chart-card{background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin-top:var(--sp-7)!important}
.home3 .chart-card header{padding:0 var(--sp-1)}
.home3 .chart-card h3{font-size:19px;font-weight:700;letter-spacing:-.018em;color:var(--ink)}
.chart-card .ch-tot b{font-size:26px;font-weight:800;letter-spacing:-.03em}
.bars12{gap:6px;height:128px;padding-bottom:0;border-bottom:1px solid var(--border);margin-top:var(--sp-5)}
.bars12 .b i{border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--chart) 30%,transparent);transition:height .6s var(--ease),background-color .2s}
.bars12 .b.sel i{background:var(--chart)}
.bars12 .b.fut i{background:color-mix(in srgb,var(--muted) 14%,transparent)}
.bars12 .b:not(.sel):not(:disabled):hover i{background:color-mix(in srgb,var(--chart) 50%,transparent)}
.bars12 .b i.exp{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--chart) 45%,transparent) 0 3px,color-mix(in srgb,var(--chart) 10%,transparent) 3px 6px);border-radius:4px 4px 0 0}
.bars12 .b i.exp+i{border-radius:0}
.ch-exp i{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--chart) 50%,transparent) 0 2px,color-mix(in srgb,var(--chart) 10%,transparent) 2px 4px)}
.home3 .cm-det{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0 0}
.home3 .foot-in{margin-top:var(--sp-4);text-align:center}
@media (prefers-reduced-motion:reduce){.bars12 .b i{transition:none}}
.h3-start{margin-top:var(--sp-6)}
.h3-start-t{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-top:var(--sp-1);text-wrap:balance}
.h3-start-a{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.h3-start-a .btn{min-height:52px}
/* descrizione fattura: a tutta larghezza, va a capo e cresce con il testo */
.ir-desc{cursor:text;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4)}
.ir-ta{display:block;width:100%;min-height:24px;max-height:220px;resize:none;overflow-y:auto;text-align:left;padding:2px 0;line-height:1.45;font-size:16px;color:var(--ink)}
.dt-lines .ir-v{overflow-wrap:anywhere}
.inv-m{overflow-wrap:anywhere}
.ir-ta{flex:none}

/* ---------- tipi di documento (fattura, nota di credito, …) ---------- */
.nf-tipi{display:flex;gap:6px;overflow-x:auto;margin:var(--sp-3) calc(-1 * var(--sp-4)) 0!important;padding:2px var(--sp-4);scrollbar-width:none}
.nf-tipi::-webkit-scrollbar{display:none}
.nf-tipi .chip{flex:none;min-height:40px;font-size:13.5px;font-weight:600;border:1px solid var(--border-2);background:var(--surface);color:var(--text)}
.nf-tipi .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--app)}
.nf-tipi .chip.more{color:var(--accent);border-style:dashed}
.nf-info{display:flex;gap:var(--sp-2);align-items:flex-start;margin-top:var(--sp-4)!important;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-card);background:var(--sunken);font-size:13.5px;line-height:1.45;color:var(--text)}
.nf-info .ic{flex:none;font-size:18px;color:var(--accent);margin-top:1px}
.ir select.ir-in{appearance:none;-webkit-appearance:none;text-align:right;text-align-last:right;font-weight:600;color:var(--ink);cursor:pointer;min-width:0}
.tp-g{font-size:13px;font-weight:650;color:var(--muted);margin:var(--sp-5) var(--sp-1) var(--sp-2)}
.tp-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.tp-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);text-align:left;min-height:56px}
.tp-row:first-child{border-top:0}
.tp-row b{display:block;font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.3}
.tp-row small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.tp-row[aria-pressed="true"]{background:color-mix(in srgb,var(--accent-soft) 60%,var(--surface))}
.tp-c{flex:none;width:44px;font-size:12px;font-weight:700;color:var(--muted)}
.tp-e{flex:none;font-size:11.5px;font-weight:650;padding:3px 8px;border-radius:999px;background:var(--sunken);color:var(--muted)}
.tp-e.e1{background:var(--ok-bg);color:var(--ok)} .tp-e.em{background:var(--warn-bg);color:var(--warn)}
.inv-t{font-weight:650;color:var(--text)}
.open .nf-cta,.firma-on .nf-cta{visibility:hidden}

/* ---------- anteprima del documento: un foglio, non una schermata ---------- */
.nf-cta.two{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2)}
.nf-cta.two .btn.ghost{padding:0 var(--sp-4);white-space:nowrap}
.doc{margin-top:var(--sp-4)!important;background:#fff;color:#1E2A44;border-radius:6px;padding:22px 20px 18px;box-shadow:0 1px 2px rgb(14 27 61 / .06),0 12px 32px -16px rgb(14 27 61 / .22);font-size:13px;line-height:1.45}
.doc-h{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:2px solid #0E1B3D}
.doc-io b{display:block;font-size:15px;color:#0E1B3D}
.doc-io span{display:block;color:#5B677E;font-size:12px}
.doc-tipo{text-align:right;flex:none;display:grid;justify-items:end;gap:2px}
.doc-tipo b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#2563EB}
.doc-tipo span{font-size:12.5px;font-weight:600;color:#0E1B3D}
.doc-tipo small{font-size:10.5px;color:#7A8499}
.doc-cli{margin-top:14px}
.doc-cli small{display:block;font-size:11px;color:#7A8499;text-transform:uppercase;letter-spacing:.06em}
.doc-cli b{font-size:14px;color:#0E1B3D}
.doc-rif{margin-top:8px;font-size:12px;color:#5B677E}
.doc-t{margin-top:16px}
.doc-tr{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #E6EBF3;overflow-wrap:anywhere}
.doc-th{font-size:11px;font-weight:700;color:#7A8499;text-transform:uppercase;letter-spacing:.06em;padding-top:0}
.doc-tr b{white-space:nowrap;color:#0E1B3D;font-weight:600}
.doc-tot{margin:12px 0 0 auto;max-width:260px;display:grid;gap:4px}
.doc-tot div{display:flex;justify-content:space-between;gap:12px;color:#5B677E}
.doc-tot b{color:#0E1B3D;font-weight:600}
.doc-tot .big{margin-top:4px;padding-top:6px;border-top:1px solid #0E1B3D;font-size:15px;color:#0E1B3D;font-weight:700}
.doc-tot .big b{font-weight:800}
.doc-legal{margin-top:16px;padding-top:10px;border-top:1px solid #E6EBF3;font-size:11px;color:#5B677E;display:grid;gap:4px}
.doc-miss{color:#B45309;font-style:italic;font-weight:500}
.doc-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:var(--sp-3)!important}
@media print{
  body *{visibility:hidden!important}
  .doc,.doc *{visibility:visible!important}
  .doc{position:absolute;left:0;top:0;width:100%;box-shadow:none;border-radius:0}
}
.doc-tot{max-width:none;margin-left:0}
.doc-tot b{white-space:nowrap;flex:none}

/* riordino Tasse/Scadenze, tooltip profilo, tutorial */
.sc-hero .btn{margin-top:var(--sp-3)}
.top{position:relative}
.hint-pop{position:absolute;right:0;top:52px;z-index:5;max-width:240px;display:grid;gap:4px;padding:var(--sp-3) var(--sp-4);background:var(--ink);color:#fff;border-radius:var(--r-card);font-size:14px;line-height:1.35;box-shadow:var(--shadow-hero);animation:hintin .4s cubic-bezier(.32,.72,0,1) both}
.hint-pop::before{content:"";position:absolute;right:16px;top:-6px;width:12px;height:12px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.hint-pop span{opacity:.8}
.hint-pop .link{justify-self:end;color:#fff;text-decoration:underline;min-height:32px}
@keyframes hintin{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.hint-pop{animation:none}}

.tut-a{display:grid;gap:8px;width:100%;margin-top:var(--sp-3)}
.help-b{min-width:44px;font-weight:700}
.help-q{border-bottom:1px solid var(--border)}
.help-q summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.help-q summary::-webkit-details-marker{display:none}
.help-q[open] summary .ic{transform:rotate(90deg)}
.help-q p{color:var(--muted);line-height:1.5;padding:0 0 var(--sp-3)}



/* giro guidato */
.tour{position:fixed;inset:0;z-index:1000}
.tour-spot{position:fixed;border-radius:18px;box-shadow:0 0 0 100vmax rgb(10 15 26 / .62),0 0 0 3px var(--accent);transition:left .5s cubic-bezier(.32,.72,0,1),top .5s cubic-bezier(.32,.72,0,1),width .5s cubic-bezier(.32,.72,0,1),height .5s cubic-bezier(.32,.72,0,1);pointer-events:none}
.tour-card{position:fixed;left:50%;transform:translateX(-50%);width:min(340px,calc(100vw - 24px));display:grid;grid-template-columns:64px 1fr;gap:6px 12px;align-items:start;padding:var(--sp-4);background:var(--surface);color:var(--text);border-radius:var(--r-card);box-shadow:0 18px 48px -12px rgb(0 0 0 / .45);animation:tourin .35s cubic-bezier(.32,.72,0,1) both}
.tour-card img{width:64px;height:64px;object-fit:contain}
.tour-b b{display:block;font-size:17px;color:var(--ink);margin-bottom:2px}
.tour-b p{font-size:14.5px;line-height:1.42;color:var(--muted)}
.tour-nav{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-2)}
.tour-n{font-size:13px;color:var(--subtle)}
.tour-arr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}
.tour-arr:not(.next) .ic{transform:scaleX(-1)}
.tour-arr:disabled{background:var(--sunken);color:var(--subtle);opacity:.6}
.tour-skip{grid-column:1/-1;justify-self:center;min-height:36px;color:var(--muted)}
@keyframes tourin{from{opacity:0;transform:translate(-50%,6px)}}
@media (prefers-reduced-motion:reduce){.tour-spot{transition:none}.tour-card{animation:none}}

/* =========================================================================
   ESTETICA 110/10 (2026-10-01) · token, tocchi 44, palette, raggi, focus
   ========================================================================= */
:root{--t-display:56px;--link:#1D5BC6;--r-ctl:12px;--r-sm:12px;--r-card:24px;--r-hero:24px;--r-modal:24px;--radius:24px;--radius-sm:12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--link:#6C9BFF}}
:root[data-theme="dark"]{--link:#6C9BFF}
/* (1) cifre grandi: proporzionali, € e centesimi in secondo piano; tabulari solo in liste/tabelle */
.h3-big,.dt-amt,.nf-amt input,.m-big,.yc-big,.due .amt b,.piggy .v,.h3-num{font-variant-numeric:proportional-nums lining-nums;font-feature-settings:"tnum" 0;white-space:nowrap}
.h3-big,.dt-amt{font-size:var(--t-display);font-weight:800;letter-spacing:-.025em}
.h3-big .cur,.dt-amt .cur{font-size:.45em;font-weight:700;color:var(--muted);letter-spacing:0}
.h3-big .cents,.dt-amt .cents,.m-big .cents,.piggy .v .cents{font-size:.45em;font-weight:700;color:var(--muted);letter-spacing:0}
table,.item .amt,.f24 .amt,.tx-row,.receipt,.inc-row,.opt .ov{font-variant-numeric:tabular-nums}
/* (2) tocchi >= 44px */
.inc-row .btn{min-height:44px}
.segs button,.chip,.ysel button,.ysel select,.hint-pop .link,.sheet [data-close],.btn.quiet,.tour-skip{min-height:44px}
.ysel button{padding-inline:14px}
.tabbar button[data-go]{font-size:12px;letter-spacing:0}
/* (3) link uniformi */
a,.link,.h3-head .link,.btn.quiet{color:var(--link)}
.link{text-decoration-color:color-mix(in srgb,var(--link) 40%,transparent)}
/* (4) una sola altezza barre */
.jar-bar,.h3-bar,.h3-bar.thin{height:6px}
/* (5) STIMA / coperto: un solo stile neutro, niente arancio */
.stima{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:3px 7px;border-radius:999px;background:var(--sunken);color:var(--muted);border:1px solid var(--border-2);vertical-align:middle;white-space:nowrap}
.pill.dav,.pill.pay,.h3-stats button b,.dt-hero.st-aperta .dt-st,.ir.ro b.unk{color:var(--muted)}
.pill.dav,.pill.pay{background:var(--sunken)}
/* (6) raggi 12/24 coerenti, selettori a 20px */
.demo,.warnline,.okline,.copybox{border-radius:var(--r-ctl)}
.chips.filt,.msg-n{margin-top:var(--sp-5)}
.segs.two{gap:var(--sp-5)}
/* (7) tipografia: a capo ordinato, cifre e date non si spezzano */
p,li,.sec-t,.firma-s,.help,.foot-note,.item .sub,.h3-row span{text-wrap:pretty}
h1,h2,h3,.firma-t{text-wrap:balance}
.item .amt,.f24 .amt,.opt .ov,.pill,.chip,.h3-stats b,.dblk,.f24 .date,.item .date,.tx-row b,.r-l b{white-space:nowrap}
/* (8) tab bar: gobba/cutout dietro il + centrale */
.tb-mid::before{top:-24px;width:84px;height:84px;margin-left:-42px}
.tabbar .tb-plus{top:-18px;box-shadow:0 0 0 5px var(--surface),0 10px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
/* (9) scontrino: Geist Mono, importi incolonnati */
.receipt{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.receipt .r-h{letter-spacing:.06em;font-size:12px;color:var(--muted)}
.receipt .r-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.receipt .r-l b{font-family:inherit;font-weight:700;text-align:right;min-width:9ch}
.receipt .r-l.tot{border-top:1px dashed var(--border-2);padding-top:8px;margin-top:6px}
/* (10) focus e movimento ridotto */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:focus-visible,.chip:focus-visible,.segs button:focus-visible,.tabbar button:focus-visible,.tb-plus:focus-visible{outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- audit web-interface-guidelines: focus, tocchi, contrasto ---- */
.file-btn:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.form-card .field:focus-within,.sheet .field:focus-within,.ir:focus-within{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-ctl)}
.demo .btn,.inc-row .btn,.ysel select,.par-in .link-btn,.hint-pop .link,.tour-skip{min-height:44px}
.doc-tipo,.doc-cli,.doc-th{color:#5B677E}
.mlabels,.dblk small{font-size:12px}
.brand small{font-size:11px}

/* ---- "Le tue tasse sono pronte": scelte dentro le storie ---- */
.wr-q{display:grid;gap:8px;text-align:left;padding:12px 14px;background:rgba(255,255,255,.7);border-radius:var(--r-ctl);margin-top:10px;width:100%}
.wr-q b{font-size:15px}.wr-q small{font-size:13px;color:var(--muted,#5B677E);line-height:1.4}
.wr-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;width:100%}
.wr-nav .btn{flex:1;min-width:120px;justify-content:center}
.wr-top small{font-size:12px;opacity:.7}
.wr-demo{position:absolute;top:64px;left:0;right:0;margin:0 auto;width:max-content;animation:none!important;transform:none!important;opacity:1!important;padding:6px 12px;border-radius:999px;background:#0E1B3D;color:#fff;font-size:12px;font-weight:600;max-width:calc(100% - 32px);text-align:center;letter-spacing:.01em}
.wr-q .chip{min-width:44px;justify-content:center}
.wr-slide .copybox{font-family:inherit;font-size:14px;line-height:1.45}

/* piano rate in Scadenze */
.pr-card{display:grid;gap:10px}
.pr-t{display:grid;gap:6px}
.pr-r{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--bg-soft,#F3F6FC);align-items:center}
.pr-r b{font-size:15px}.pr-r span{font-size:13px;color:var(--muted,#5B677E)}
.pr-r .v{grid-row:1/3;grid-column:2;font-weight:700;color:var(--ink);font-size:15px}
.pr-r.on{outline:2px solid var(--accent)}

/* storie "tasse pronte": la slide lascia passare i tocchi alle zone avanti/indietro, ma le scelte devono essere cliccabili */
.wr-slide .chip,.wr-slide .btn,.wr-slide a,.wr-slide button,.wr-slide .wr-q,.wr-slide .copybox,.wr-slide .chips{pointer-events:auto}
.wr-demo{top:auto;bottom:18px}

/* ---- giro guidato v3: riflettore che scorre, scheda ancorata con freccia, testi brevi ---- */
.tour-spot{transition:left .5s cubic-bezier(.32,.72,0,1),top .5s cubic-bezier(.32,.72,0,1),width .5s cubic-bezier(.32,.72,0,1),height .5s cubic-bezier(.32,.72,0,1),opacity .3s;border-radius:20px}
.tour-spot.off{opacity:0}
.tour-card{transform:none;display:grid;grid-template-columns:56px 1fr;gap:4px 12px;align-items:center;padding:16px 16px 12px;border-radius:26px;background:var(--surface);box-shadow:0 30px 60px -20px rgb(0 0 0 / .5),inset 0 1px 1px rgb(255 255 255 / .6);animation:none;transition:left .5s cubic-bezier(.32,.72,0,1),top .5s cubic-bezier(.32,.72,0,1)}
.tour-card.in{animation:tourin3 .5s cubic-bezier(.32,.72,0,1) both}
@keyframes tourin3{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.tour-card::before{content:"";position:absolute;left:var(--ax,50%);width:14px;height:14px;background:var(--surface);transform:translateX(-50%) rotate(45deg);border-radius:3px}
.tour-card[data-pos=bottom]::before{top:-6px}.tour-card[data-pos=top]::before{bottom:-6px}.tour-card[data-pos=mid]::before{display:none}
.tour-card img{width:56px;height:56px}
.tour-b b{font-size:18px;letter-spacing:-.01em;margin:0 0 2px}
.tour-b p{font-size:14.5px;line-height:1.4;margin:0}
.tour-dots{grid-column:1/-1;display:flex;gap:6px;justify-content:center;margin-top:6px}
.tour-dots i{width:7px;height:7px;border-radius:99px;background:var(--sunken,#DDE3F0);transition:width .4s cubic-bezier(.32,.72,0,1),background .3s}
.tour-dots i.done{background:rgba(40,110,226,.45)}.tour-dots i.on{width:22px;background:var(--accent)}
.tour-nav{margin-top:6px;gap:10px}
.tour-nav .tour-arr{width:44px;height:44px}
.tour-next{flex:1;min-height:44px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 18px}
.tour-next .ic{width:18px;height:18px}
.tour-skip{min-height:40px;font-size:13px}
@media (prefers-reduced-motion:reduce){.tour-card.in{animation:none}.tour-card,.tour-spot{transition:none}}

/* ---- prima fattura: guida nel modulo e riepilogo dopo il salvataggio ---- */
.pf-card{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:22px;background:linear-gradient(160deg,rgba(40,110,226,.12),rgba(40,110,226,.04));box-shadow:inset 0 0 0 1px rgba(40,110,226,.25)}
.pf-card img{width:56px;height:56px;object-fit:contain}
.pf-b > b{display:block;font-size:16px;margin-bottom:4px}
.pf-b ol,.pf-steps{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:p}
.pf-b li,.pf-steps li{counter-increment:p;position:relative;padding-left:30px;font-size:14px;line-height:1.4;color:var(--muted)}
.pf-b li::before,.pf-steps li::before{content:counter(p);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.pf-b li b,.pf-steps li b{color:var(--ink)}
.pf-b .link{margin-top:6px;min-height:40px}
.pf-steps{margin:12px 0 4px}

/* ---- contrasto misurato sul rendering (skill a11y-audit): testo su fondi tenui >= 4,5:1 ---- */
:root{--alert-ink:#B91C1C;--info-ink:#1D5BC6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--alert-ink:var(--alert);--info-ink:var(--info)}}
:root[data-theme="dark"]{--alert-ink:var(--alert);--info-ink:var(--info)}
.avatar,.pill.plan,.pill.studio,.pill.mine{color:var(--info-ink)}
.pill.late,.dblk.hot,.dblk.hot small,.askrow.late .is,.inv.st-scaduta .inv-s,.dt-hero.st-scaduta .dt-st,.err,.ir-link.danger{color:var(--alert-ink)}

/* ---- leggibilità: niente testi o cifre piccoli (minimo 13px per i secondari, 12px per le sigle) ---- */
.pill,.pill.sm,.sub,.sync,.foot-in,.foot-note,.help,.h3-list small,.group small,.dl small,.f24 small,.row small{font-size:13px}
.stima,.mlabels span,.mlabels i,.bars12 + div span{font-size:12px}
.pill{padding-block:3px;line-height:1.25}
body .pill,body .sub,body .foot-in,body .stima{font-size:13px}
body .stima{letter-spacing:.04em}
body .f24 .pill,body .f24 .sub,body .f24 small,body .pill.sm,body .chart-card .foot-in,body small{font-size:13px}

/* giro guidato: icona del passo, niente che sbordi */
.tour-card{overflow-wrap:anywhere}
.tour-b{min-width:0}
.tour-b b{display:flex;align-items:center;gap:8px;min-width:0}
.tour-ico{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--info-ink)}
.tour-ico .ic{width:18px;height:18px}
.tour-b p{font-size:15px}

/* BUG: dopo l'entrata animata la pagina restava "trasformata" e spostava la barra fissa (Registra fattura tagliata a destra). L'animazione non deve lasciare nessuna trasformazione */
.view>.stack.in-push,.view>.stack.in-back,.view>.stack.in-tab{animation-fill-mode:backwards}
/* barra "Registra": centrata senza transform, perché l'animazione "rise" dei blocchi azzera ogni transform e la spostava a destra */
.nf-cta{left:0;right:0;transform:none;margin-left:auto!important;margin-right:auto!important}
.pr-new{background:linear-gradient(160deg,rgba(40,110,226,.14),rgba(40,110,226,.05));box-shadow:inset 0 0 0 1px rgba(40,110,226,.3);margin-bottom:var(--sp-3)}
.pr-new{background:linear-gradient(160deg,rgba(40,110,226,.14),rgba(40,110,226,.05));box-shadow:inset 0 0 0 1px rgba(40,110,226,.3);margin-bottom:var(--sp-3)}

/* ---- v2: elenco fatture con "Incassata" a un tocco ---- */
.inv{position:relative}
.inv-main{display:flex;align-items:center;gap:var(--sp-3);flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;align-self:stretch}
.inv-open{padding-bottom:calc(var(--sp-3) + 30px)}
.inv-open .inv-main{align-self:flex-start}
.inv-q{position:absolute;right:var(--sp-4);bottom:10px;min-height:36px;padding:0 14px 0 10px;border-radius:999px;border:0;background:var(--accent-soft);color:var(--info-ink);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.inv-q .ic{width:16px;height:16px}
.inv-q::after{content:"";position:absolute;inset:-4px}
/* v2: Altro, scrivere allo studio in evidenza */
.studio-cta{display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;background:linear-gradient(160deg,var(--ok-bg),#fff);box-shadow:inset 0 0 0 1px rgba(21,128,61,.25);color:var(--ink);text-decoration:none;margin-top:var(--sp-3)}
.studio-cta .sc-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--ok);color:#fff;flex:none}
.studio-cta .sc-ic .ic{width:22px;height:22px}
.studio-cta b{display:block;font-size:17px}.studio-cta span span,.studio-cta .grow>span{color:var(--muted);font-size:14px}
body .f24 .sub{white-space:normal;overflow:visible;text-overflow:clip}

/* =========================================================================
   v3 · revisione completa (Opus): un numero per schermata, niente doppioni,
   telefoni piccoli, tema scuro, movimento solo dove dice qualcosa
   ========================================================================= */
/* Panoramica: legenda della barra per te / tasse */
.h3-legend{display:flex;gap:16px;margin-top:8px;font-size:13px;color:var(--muted)}
.h3-legend span{display:inline-flex;align-items:center;gap:6px}
.h3-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.h3-legend i.s-mine{background:var(--hero-mine,#16A34A)}.h3-legend i.s-tax{background:var(--accent)}
:root .h3-legend i.s-mine{background:#16A34A}
/* "Ti hanno pagato?": testo sopra, due pulsanti affiancati sotto */
.askrow{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}
.askrow-a{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.askrow-a .btn,.askrow-a .btn.ghost{min-height:44px;width:100%;justify-content:center;font-size:14px}
.askrow-a .btn.ghost{border:1px solid var(--border);background:var(--surface);color:var(--ink)}
/* "La tua attività": due riquadri */
.h3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Scadenze: il prossimo F24 in evidenza */
.sc-next .m-k{margin-bottom:10px}
.sc-next-b{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border-radius:18px;background:var(--surface);color:var(--ink);border:1px solid var(--border)}
.sc-next-b .sc-t{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.sc-next-b .sc-s{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.35}
.sc-next-b .sc-v{font-size:20px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.sc-next .tx-rule{margin-top:12px}
.sc-hero + .chips,.sc-hero ~ .chips{margin-top:var(--sp-4)}
/* Dettaglio F24: titolo della composizione */
.dt .grp-t{margin-top:var(--sp-4)}
/* Altro: "Scrivi allo studio" leggibile anche nel tema scuro */
.studio-cta{background:linear-gradient(160deg,var(--ok-bg),var(--surface))}
.studio-cta b{color:var(--ink)}.studio-cta .grow>span{color:var(--muted)}
/* messaggi da mandare: sono testo, non codice */
.copybox{font-family:inherit;font-size:14px;line-height:1.5}
/* telefoni piccoli (320–360 px) */
.tb-short{display:none}
@media (max-width:360px){
  .tabbar .tb-long{display:none}.tabbar .tb-short{display:inline}
  .tabbar button{font-size:11.5px;letter-spacing:-.01em}
  .h3-jar-top{flex-wrap:wrap}.h3-jar-top .btn{width:100%;justify-content:center}
  .cta-l{display:none}
  .h3-legend{flex-wrap:wrap;gap:4px 12px}
}
/* movimento: niente entrata a cascata a ogni cambio di scheda (si vede cento volte al giorno); solo un passaggio breve di pagina */
.view>.stack>*{animation:none}
.view>.stack.in-tab{animation-duration:.18s}
.view>.stack.in-push,.view>.stack.in-back{animation-duration:.24s}

/* v3: barra in basso sui telefoni piccoli, le etichette non si toccano */
@media (max-width:360px){
  .tabbar{grid-template-columns:1fr 1fr 64px 1fr 1fr;width:calc(100% - 16px);padding-inline:4px}
  .tabbar button{font-size:11px;letter-spacing:-.015em;padding-inline:0}
}
.cm-more.link{display:block;margin-top:6px;min-height:40px;font-size:14px}
/* v3: righe delle scadenze sui telefoni piccoli: la freccia lascia spazio al titolo, l'etichetta va a capo invece di coprirlo */
@media (max-width:360px){
  .f24{gap:8px}
  .f24>.chev{display:none}
  body .f24 .right .pill{white-space:normal;text-align:center;max-width:96px;line-height:1.2;font-size:12px}
  .sc-next-b .sc-v{font-size:18px}
}
@media (max-width:360px){.tool-btn .tool-l{display:none}.tool-btn{padding-inline:12px}}

/* v3c: durante il giro la barra in basso resta accesa (sopra il velo) e non si tocca: la sezione attiva cambia insieme alla scheda */
body.tour-on .tabbar{z-index:1001;pointer-events:none}
body.tour-on .tabbar [aria-current="page"]{color:var(--accent)}
.tour-card.out{opacity:0;transform:translateY(6px);transition:opacity .12s ease-out,transform .12s ease-out}
/* "Pago tutto in una volta" dentro le storie */
.wr-q .sw-row{display:flex;align-items:center;gap:12px}
.wr-q .sw-row small{display:block;margin-top:2px}
.wr-q .switch{flex:none}

/* =========================================================================
   COMPUTER (da 900px): barra laterale fissa, contenuto in colonne,
   finestre al centro invece dei pannelli dal basso
   ========================================================================= */
.rail{display:none}
.view:focus{outline:none}
@media (min-width:900px){
  :root{--rail-w:260px}
  body{background:var(--app)}
  .app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-height:100dvh}
  .tabbar{display:none}

  /* barra laterale */
  .rail{display:flex;flex-direction:column;gap:var(--sp-5);position:sticky;top:0;height:100vh;height:100dvh;padding:var(--sp-6) var(--sp-4) var(--sp-4);background:var(--surface);border-right:1px solid var(--border);z-index:5;overflow-y:auto}
  .rail-brand{display:flex;align-items:center;gap:10px;padding:0 var(--sp-2)}
  .rail-brand b{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
  .rail-new{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;border-radius:var(--r-ctl);background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:650;text-align:center;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--accent) 80%,transparent);transition:background-color .15s,box-shadow .2s var(--ease),transform .15s var(--ease)}
  .rail-new .ic{font-size:20px}
  .rail-new:hover{background:color-mix(in srgb,var(--accent) 90%,#000);box-shadow:0 12px 22px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
  .nf-on .rail-new{background:var(--ink);color:var(--app)}
  .rail-nav{display:grid;gap:2px}
  .rail-nav button{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:0 var(--sp-3);border-radius:var(--r-ctl);font-size:15px;font-weight:550;color:var(--muted);transition:background-color .15s,color .15s}
  .rail-nav button .ic{font-size:22px}
  .rail-nav button:hover{background:var(--sunken);color:var(--ink)}
  .rail-nav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:650}
  .rail-foot{margin-top:auto;display:grid;gap:var(--sp-3)}
  .rail-foot .sync{padding:0 var(--sp-2);line-height:1.35}
  .rail-me{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);border-radius:var(--r-ctl);color:var(--muted);transition:background-color .15s}
  .rail-me:hover,.rail-me[aria-current="page"]{background:var(--sunken)}
  .rail-me .avatar{width:40px;height:40px;font-size:14px;flex:none}
  .rail-me b{display:block;font-size:14px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rail-me small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
  .rail-me .ic{font-size:20px;flex:none}

  /* area di lavoro */
  .view{width:100%;max-width:1180px;margin:0 auto;padding:var(--sp-7) var(--sp-8) var(--sp-9)}
  .top{display:none}
  .rail-brand .bell{width:40px;height:40px;font-size:22px;border-radius:var(--r-ctl);flex:none;color:var(--muted)}
  .rail-brand .bell:hover{background:var(--sunken);color:var(--ink)}
  .rail-brand .bell.dot::after{top:8px;right:8px;box-shadow:0 0 0 2px var(--surface)}
  .bighead .avatar{display:none}
  .bighead{padding-inline:0}
  .bighead h1{font-size:34px}
  .segs.two{width:max-content;max-width:100%}
  .segs.two button{flex:0 0 auto;min-width:132px}
  .chips:not(.wrap):not(.pr-chips){width:max-content;max-width:100%}

  /* schede principali: intestazione, due colonne, fondo */
  .view[data-tab="home"] .stack.home3,.view[data-tab="tasse"] .stack,.view[data-tab="fatture"] .stack,.view[data-tab="scadenze"] .stack{display:grid;gap:var(--sp-5)}
  .view[data-tab="home"] .stack>*,.view[data-tab="tasse"] .stack>*,.view[data-tab="fatture"] .stack>*,.view[data-tab="scadenze"] .stack>*{margin:0!important}
  .cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-6);align-items:start}
  .col{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5);align-content:start;min-width:0}
  .col .chips.filt{width:auto;flex-wrap:wrap}
  .col>*{margin:0!important;min-width:0}
  .cols>.col>*{animation:rise .4s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 50ms)}
  .view[data-tab="fatture"] .cols,.view[data-tab="scadenze"] .cols{grid-template-columns:minmax(0,1fr) 340px}
  .view[data-tab="fatture"] .col-b,.view[data-tab="scadenze"] .col-b{position:sticky;top:var(--sp-6)}
  .col-a .grp-t:first-child,.fat-list .mhead:first-child{margin-top:0}

  /* schermate interne (dettagli, moduli): colonna centrata */
  .view:not([data-tab="home"],[data-tab="tasse"],[data-tab="fatture"],[data-tab="scadenze"],[data-tab="altro"]) .stack{max-width:680px;margin-inline:auto}
  .nf-cta{left:var(--rail-w);right:0;width:auto;max-width:none;transform:none;margin:0!important;padding-inline:max(var(--sp-4),calc((100vw - var(--rail-w) - 680px) / 2))}
  .toast{left:calc(50% + var(--rail-w) / 2);bottom:var(--sp-7)}
  .cta-on .view{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}

  /* Panoramica */
  .view[data-tab="home"] .h3-hero{padding:var(--sp-6) var(--sp-6) var(--sp-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
  .view[data-tab="home"] .h3-greet h1{font-size:30px}
  .view[data-tab="home"] .h3-big{font-size:68px}
  .view[data-tab="home"] .h3-money{margin-top:var(--sp-5)}

  /* Tasse */
  .view[data-tab="tasse"] .tx-hero{padding:var(--sp-6);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
  .view[data-tab="tasse"] .tx-split{background:var(--surface);border:1px solid var(--border);padding:var(--sp-4) var(--sp-5)}

  /* Altro: due colonne */
  .view[data-tab="altro"] .stack{display:block;column-count:2;column-gap:var(--sp-6)}
  .view[data-tab="altro"] .stack>*{break-inside:avoid;margin:0 0 var(--sp-5)!important}
  .view[data-tab="altro"] .stack>.bighead,.view[data-tab="altro"] .stack>.demo{column-span:all}
  .view[data-tab="altro"] .grp .grp-t{margin-top:0}

  /* finestre: al centro, non dal basso */
  .scrim{background:rgb(10 15 26 / .45)}
  .sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(560px,calc(100vw - 48px));max-height:min(88vh,780px);padding:var(--sp-6);border-radius:var(--r-modal);opacity:0;pointer-events:none;transform:translate(-50%,-46%) scale(.98);transition:transform .25s var(--ease),opacity .2s;box-shadow:0 30px 80px -24px rgb(10 15 26 / .45)}
  .open .sheet{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .sheet .grab{display:none}

  /* storie, benvenuto, auguri: schede centrate sopra uno sfondo scuro */
  .wrapped,.onb,.bday{inset:auto;left:50%;top:50%;width:min(440px,calc(100vw - 48px));height:min(88vh,820px);transform:translate(-50%,-50%);border-radius:28px;box-shadow:0 0 0 100vmax rgb(10 15 26 / .55)}
  .onb{background:linear-gradient(180deg,var(--accent-soft),var(--surface) 55%)}
}
@media (min-width:900px) and (max-width:1199px){
  :root{--rail-w:76px}
  .rail{align-items:center;padding:var(--sp-5) var(--sp-2) var(--sp-4)}
  .rail-brand{flex-direction:column;gap:var(--sp-2);padding:0}
  .rail-brand b,.rail-nav button span,.rail-new span,.rail-me .grow,.rail-me .ic,.rail-foot .sync{display:none}
  .rail-nav{justify-items:center}
  .rail-nav button{width:52px;justify-content:center;padding:0}
  .rail-new{width:52px;min-height:52px}
  .rail-me{padding:var(--sp-1)}
  .view{padding:var(--sp-6) var(--sp-6) var(--sp-8)}
  .cols{gap:var(--sp-5)}
  .view[data-tab="fatture"] .cols,.view[data-tab="scadenze"] .cols{grid-template-columns:minmax(0,1fr) 280px}
  .view[data-tab="home"] .h3-big{font-size:56px}
  .view[data-tab="altro"] .stack{column-gap:var(--sp-5)}
}

/* =========================================================================
   ACCESSO e avviso di salvataggio
   ========================================================================= */
.gate{position:fixed;inset:0;z-index:70;display:none;overflow-y:auto;background:var(--app);padding:var(--sp-7) var(--sp-4)}
.gate-on .gate{display:grid;place-items:center}
.gate-card{width:100%;max-width:400px;display:grid;gap:var(--sp-5)}
.gate-brand{display:flex;align-items:center;gap:10px}
.gate-brand b{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
.gate-salvo{height:132px;width:auto;justify-self:start;margin-bottom:-6px}
.gate h1{font-size:30px;line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--ink);text-wrap:balance}
.gate p{font-size:15px;color:var(--muted);line-height:1.5;margin-top:var(--sp-2)}
.gate form{display:grid;gap:var(--sp-4)}
.gate-check{display:flex;align-items:center;gap:var(--sp-3);font-size:14px;color:var(--text);min-height:44px;cursor:pointer}
.gate-check input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.gate .gate-err{min-height:1.5em;font-size:14px;color:var(--alert-ink,var(--alert));margin:0}
.gate-links{display:flex;gap:var(--sp-5);flex-wrap:wrap;align-items:center;font-size:14px}
.gate-foot{display:flex;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;font-size:12.5px;color:var(--subtle)}
.gate .gate-foot{margin-top:0}
.gate-foot a{color:var(--link,var(--accent))}
.gate-list{padding:0 var(--sp-4)}
.gate-wait{display:grid;gap:var(--sp-5);justify-items:center;text-align:center}
.gate-wait p{margin:0}
.net{position:fixed;left:50%;top:var(--sp-3);transform:translateX(-50%);z-index:60;width:min(560px,calc(100vw - 24px));display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-ctl);background:var(--warn-bg);color:var(--ink);font-size:14px;line-height:1.4;box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.net span{flex:1;min-width:0}
.net .btn{width:auto;min-height:40px;flex:none;padding:0 var(--sp-4)}
@media (min-width:900px){
  .gate-card{max-width:440px;padding:var(--sp-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-modal);box-shadow:var(--shadow)}
  .net{left:calc(50% + var(--rail-w) / 2)}
}

/* =========================================================================
   Incassi POS (SumUp): abbinamento
   ========================================================================= */
.sheet h4{font-size:15px;font-weight:650;color:var(--ink);margin:var(--sp-5) 0 var(--sp-1)}
.pos-box{padding:var(--sp-4);border-radius:var(--r-card);background:var(--sunken);margin-top:var(--sp-4)}
.pos-box h4{margin-top:0}
.pos-mese{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) 0;border-top:1px solid var(--border);cursor:pointer}
.pos-mese:first-of-type{border-top:0}
.pos-mese input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:none}
.pos-mese b{display:block;font-size:15px;color:var(--ink)}
.pos-mese small,.pos-riga small{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.pos-mese>b{font-size:15px;white-space:nowrap}
.pos-lista{margin:var(--sp-2) 0 var(--sp-3)}
.pos-riga{padding:var(--sp-3) 0;border-top:1px solid var(--border)}
.pos-t{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:15px;color:var(--ink)}
.pos-t span{color:var(--muted);font-size:13px}
.pos-riga .field{margin-top:var(--sp-2)}
.pos-sug{color:var(--ok)!important}
.sheet .btn.ghost{margin-top:var(--sp-2)}
.pos-sel{margin-top:var(--sp-2);font-size:15px;text-align:left;text-align-last:left}

/* salto al contenuto per chi usa la tastiera */
.skip{position:fixed;left:var(--sp-3);top:var(--sp-3);z-index:100;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-ctl);background:var(--ink);color:var(--app);font-weight:600;transform:translateY(-200%);transition:transform .15s var(--ease)}
.skip:focus{transform:none}