:root{color-scheme:dark;--bg:#0b0f15;--panel:rgba(20,27,38,.82);--panel2:rgba(14,20,30,.9);--text:#f5f7fb;--muted:#8f9aaa;--line:rgba(255,255,255,.08);--accent:#9ff66f;--accent2:#63dff4;--positive:#66e9a7;--negative:#ff7f95;--warning:#ffc85f;--shadow:0 24px 70px rgba(0,0,0,.28);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% -10%,rgba(99,223,244,.11),transparent 32%),radial-gradient(circle at 95% 12%,rgba(159,246,111,.09),transparent 28%),var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.ambient{position:fixed;width:36vw;height:36vw;border-radius:50%;filter:blur(100px);opacity:.09;pointer-events:none;z-index:0}.ambient-a{top:-15vw;left:-10vw;background:var(--accent2)}.ambient-b{right:-16vw;top:24vh;background:var(--accent)}.glass{background:linear-gradient(145deg,rgba(25,32,44,.88),rgba(17,23,33,.78));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.brand-lockup{display:flex;gap:11px;align-items:center}.brand-logo{width:46px;height:46px;border-radius:14px;display:block;box-shadow:0 10px 28px rgba(99,223,244,.14)}.brand-lockup strong,.brand-lockup span{display:block}.brand-lockup strong{font-size:18px;letter-spacing:-.03em}.brand-lockup span{font-size:12px;color:var(--muted);margin-top:2px}.brand-lockup.compact .brand-logo{width:40px;height:40px;border-radius:12px}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:28px;position:relative;z-index:2}.auth-card{width:min(100%,470px);border-radius:30px;padding:34px}.auth-card h1{font-size:clamp(34px,8vw,48px);letter-spacing:-.055em;line-height:.98;margin:18px 0}.eyebrow{color:var(--accent);font-size:11px;font-weight:850;letter-spacing:.14em;margin:0 0 8px}.muted{color:var(--muted);line-height:1.55}.micro{color:var(--muted);font-size:12px;line-height:1.45}.stack{display:grid;gap:10px;margin-top:28px}.field-label{font-size:12px;font-weight:700;color:#ccd2dc;margin:2px 2px -4px}.field{width:100%;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:13px;padding:13px 14px;outline:none}.field:focus{border-color:rgba(159,246,111,.55);box-shadow:0 0 0 3px rgba(159,246,111,.08)}.primary-button,.secondary-button,.text-button{border:0;border-radius:13px;padding:13px 15px;font-weight:800}.primary-button{background:var(--accent);color:#0e140b}.primary-button.small{padding:11px 13px;white-space:nowrap}.secondary-button{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)}.text-button{background:transparent;color:var(--accent);padding-inline:0}.error-box{margin-top:16px;padding:12px 14px;border:1px solid rgba(255,127,149,.24);border-radius:13px;color:#ffb3bf;background:rgba(255,127,149,.07);font-size:13px}.app-shell{min-height:100vh;position:relative;z-index:1}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;padding:24px 18px;border-right:1px solid var(--line);background:rgba(9,14,21,.82);backdrop-filter:blur(24px);z-index:30;display:flex;flex-direction:column}.sidebar-brand{padding:0 8px 22px}.side-nav{display:grid;gap:6px}.side-nav .nav-item{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#9aa5b5;border-radius:13px;padding:12px 13px;text-align:left;font-weight:700}.side-nav .nav-item.active{background:linear-gradient(135deg,rgba(99,223,244,.16),rgba(159,246,111,.09));color:#fff;border:1px solid rgba(99,223,244,.14)}.nav-icon{width:22px;text-align:center;font-size:18px}.sidebar-foot{margin-top:auto;padding:14px 10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}.sidebar-foot strong,.sidebar-foot small{display:block}.sidebar-foot strong{font-size:12px}.sidebar-foot small{font-size:11px;color:var(--muted);margin-top:3px}.mini-dot{width:9px;height:9px;border-radius:50%;background:var(--positive);box-shadow:0 0 13px var(--positive)}.mobile-topbar{display:none}.content{margin-left:244px;padding:34px 38px 70px;max-width:1600px}.view{display:none;animation:fade .18s ease}.view.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(3px)}}.page-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 22px}.page-title h1{font-size:34px;letter-spacing:-.045em;margin:0}.page-title .muted{margin:7px 0 0;font-size:14px}.live-pill{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);padding:8px 11px;color:var(--muted);font-size:12px}.live-pill i{width:7px;height:7px;border-radius:50%;background:var(--positive);box-shadow:0 0 12px var(--positive)}.hero-card{border-radius:24px;padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:14px}.balance-value{font-size:clamp(48px,6vw,78px);letter-spacing:-.06em;line-height:.95;margin:0 0 12px}.hero-status{min-width:230px;display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;padding:15px 16px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line)}.hero-status .status-dot{grid-row:1/3}.hero-status strong{font-size:13px}.hero-status small{font-size:11px;color:var(--muted);margin-top:3px}.warning-card{border:1px solid rgba(255,200,95,.25);background:rgba(255,200,95,.08);color:#ffe4a8;padding:14px 16px;border-radius:16px;display:flex;gap:5px;flex-direction:column;margin:0 0 14px}.warning-card span{font-size:13px;color:#d9c59b}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric-card,.insight-card{padding:20px;border-radius:20px}.metric-card span,.insight-card span{display:block;color:var(--muted);font-size:12px;margin-bottom:10px}.metric-card strong,.insight-card strong{display:block;font-size:clamp(21px,2.2vw,30px);letter-spacing:-.04em}.metric-card small,.insight-card small{display:block;color:#697585;margin-top:7px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.85fr);gap:14px;align-items:stretch}.panel-section{min-width:0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:30px 2px 12px}.section-head h2,.section-head h3{margin:0;letter-spacing:-.04em}.section-head h3{font-size:22px}.count-pill{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:12px;white-space:nowrap}.chart-card{padding:20px;border-radius:20px;min-height:248px;overflow:hidden}.month-bars{display:grid;grid-template-columns:repeat(var(--months,3),minmax(72px,1fr));gap:14px;align-items:end;height:180px}.month-bar{display:grid;grid-template-rows:1fr auto;gap:9px;min-width:0;height:100%}.bar-track{height:150px;border-radius:13px;background:rgba(255,255,255,.028);display:flex;align-items:stretch;gap:5px;padding:8px 9px 0;overflow:hidden}.bar-wrap{flex:1;position:relative;display:flex;align-items:flex-end;min-width:0;height:100%;padding-top:24px}.bar-value{position:absolute;top:2px;left:0;right:0;text-align:center;color:#7f8b9c;font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar{width:100%;min-height:3px;border-radius:8px 8px 3px 3px;transition:height .25s ease}.bar.income{background:linear-gradient(to top,rgba(102,233,167,.35),rgba(102,233,167,.95))}.bar.expenses{background:linear-gradient(to top,rgba(255,127,149,.28),rgba(255,127,149,.9))}.month-label{text-align:center;color:var(--muted);font-size:11px;text-transform:capitalize}.chart-legend{display:flex;gap:14px;color:var(--muted);font-size:11px;margin-top:14px}.chart-legend i{width:8px;height:8px;display:inline-block;border-radius:3px;margin-right:5px}.chart-legend .income i{background:var(--positive)}.chart-legend .expenses i{background:var(--negative)}.insight-stack{display:grid;gap:12px;height:calc(100% - 64px)}.insight-card{display:flex;flex-direction:column;justify-content:center}.transaction-list{overflow:hidden;border-radius:20px}.tx-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}.tx-row:last-child{border-bottom:0}.tx-row:hover{background:rgba(255,255,255,.025)}.tx-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-weight:900;background:rgba(255,255,255,.05)}.tx-icon.credit{color:var(--positive);background:rgba(102,233,167,.09)}.tx-icon.debit{color:var(--negative);background:rgba(255,127,149,.09)}.tx-main{min-width:0}.tx-party{font-weight:780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx-desc{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.tx-side{text-align:right}.tx-amount{font-weight:820}.tx-amount.credit{color:var(--positive)}.tx-date{color:#6e7988;font-size:11px;margin-top:5px}.filter-panel{border-radius:18px;padding:10px;display:grid;grid-template-columns:minmax(300px,.75fr) minmax(260px,1fr);gap:10px;margin-bottom:12px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.segment{color:var(--muted);background:transparent;border:0;border-radius:11px;padding:10px;font-weight:750}.segment.active{color:var(--text);background:rgba(255,255,255,.08)}.search{background:rgba(0,0,0,.14)}.pager{display:flex;justify-content:center;align-items:center;gap:14px;margin:16px 0;color:var(--muted);font-size:13px}.status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.status-card{padding:20px;border-radius:20px}.status-card h3,.security-card h3{margin:0 0 12px}.status-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--positive);box-shadow:0 0 16px var(--positive)}.status-dot.warning,.mini-dot.warning{background:var(--warning);box-shadow:0 0 15px var(--warning)}.key-values{display:grid}.kv{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line)}.kv:last-child{border-bottom:0}.kv span{color:var(--muted)}.kv strong{text-align:right;font-size:13px;font-weight:700;max-width:66%;overflow-wrap:anywhere}.privacy-banner{padding:16px 18px;border-radius:16px;display:flex;flex-direction:column;gap:5px;margin-bottom:12px;border-color:rgba(99,223,244,.16)}.privacy-banner strong{color:#e2fbff}.privacy-banner span{color:var(--muted);font-size:13px;line-height:1.45}.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.security-card{border-radius:20px;padding:21px}.inline-form{display:flex;gap:8px;margin-top:16px}.passkey-list{display:grid;gap:8px;margin-top:14px}.passkey-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.passkey-item small{color:var(--muted);display:block;margin-top:4px}.passkey-remove{border:0;background:rgba(255,127,149,.08);color:#ffadb9;border-radius:10px;padding:8px 10px}.danger-zone{display:flex;justify-content:space-between;align-items:center;gap:18px}.push-actions{display:flex;align-items:center;gap:12px;margin-top:15px}.bottom-nav{display:none}.toast{position:fixed;z-index:100;left:50%;transform:translateX(-50%);bottom:28px;max-width:calc(100% - 32px);background:#f4f7fa;color:#101217;border-radius:13px;padding:11px 15px;box-shadow:var(--shadow);font-size:13px;font-weight:700}.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.64);backdrop-filter:blur(6px)}.modal-sheet{position:relative;width:min(100%,620px);border-radius:24px;padding:22px;box-shadow:0 28px 100px rgba(0,0,0,.48);animation:sheetUp .18s ease}@keyframes sheetUp{from{transform:translateY(10px);opacity:.75}}.modal-handle{display:none}.modal-head{display:flex;justify-content:space-between;align-items:start;gap:12px}.modal-head h3{margin:0;font-size:25px;letter-spacing:-.04em}.modal-close{border:0;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--text);font-size:25px}.modal-body{display:grid;margin-top:15px}.detail-amount{font-size:38px;font-weight:850;letter-spacing:-.05em;margin:6px 0 18px}.detail-amount.credit{color:var(--positive)}.detail-row{padding:13px 0;border-top:1px solid var(--line)}.detail-row span{color:var(--muted);display:block;font-size:11px;margin-bottom:5px}.detail-row strong{font-size:14px;line-height:1.5;overflow-wrap:anywhere}.empty{padding:34px 20px;text-align:center;color:var(--muted)}
@media(max-width:980px){.sidebar{display:none}.mobile-topbar{height:72px;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;position:sticky;top:0;z-index:20;background:linear-gradient(to bottom,rgba(11,15,21,.97),rgba(11,15,21,.82),transparent);backdrop-filter:blur(16px)}.content{margin-left:0;padding:18px 18px 112px;max-width:none}.desktop-only{display:none!important}.hero-card{padding:22px;align-items:flex-end}.hero-status{min-width:190px}.metric-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.insight-stack{grid-template-columns:1fr 1fr;height:auto}.filter-panel{grid-template-columns:1fr}.status-grid{grid-template-columns:1fr 1fr}.status-columns,.security-grid{grid-template-columns:1fr}.bottom-nav{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));width:min(calc(100% - 26px),520px);padding:7px;border:1px solid var(--line);border-radius:21px;background:rgba(18,24,34,.9);backdrop-filter:blur(24px);box-shadow:0 18px 50px rgba(0,0,0,.4);display:grid;grid-template-columns:repeat(4,1fr)}.bottom-nav .nav-item{display:grid;place-items:center;gap:3px;color:#7c8797;border:0;background:transparent;border-radius:15px;padding:8px 5px}.bottom-nav .nav-item span{font-size:19px;line-height:1}.bottom-nav .nav-item small{font-size:10px;font-weight:750}.bottom-nav .nav-item.active{color:var(--text);background:rgba(255,255,255,.07)}.toast{bottom:100px}.modal{align-items:end;padding:0}.modal-sheet{width:min(100%,620px);border-radius:26px 26px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom))}.modal-handle{display:block;width:38px;height:4px;background:rgba(255,255,255,.18);border-radius:999px;margin:2px auto 18px}}
@media(max-width:620px){.content{padding:14px 14px 108px}.mobile-topbar{padding-inline:14px}.brand-lockup.compact .brand-lockup strong{font-size:16px}.live-pill span{font-size:11px}.hero-card{display:block;padding:19px}.balance-value{font-size:54px}.hero-status{margin-top:17px;min-width:0;grid-template-columns:auto 1fr;padding:12px 13px}.metric-card,.insight-card{padding:16px}.metric-card strong{font-size:22px}.dashboard-grid{gap:0}.section-head{margin-top:26px}.insight-stack{grid-template-columns:1fr}.chart-card{padding:14px;min-height:220px}.month-bars{height:160px;gap:8px;overflow-x:auto;grid-template-columns:repeat(var(--months,3),minmax(74px,1fr))}.bar-track{height:130px;padding-inline:7px}.tx-row{grid-template-columns:38px minmax(0,1fr) auto;padding:13px 12px;gap:10px}.tx-icon{width:38px;height:38px}.tx-party{font-size:14px}.tx-desc{font-size:11px}.tx-amount{font-size:14px}.status-grid{grid-template-columns:1fr}.page-title{margin-bottom:16px}.page-title h1{font-size:30px}.danger-zone,.inline-form,.push-actions{align-items:stretch;flex-direction:column}.auth-card{padding:26px;border-radius:25px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* ===== v0.3.4 purple theme + fixed auth viewport + SVG trend chart ===== */
:root{
  --bg:#0e0a18;
  --panel:rgba(27,20,43,.86);
  --panel2:rgba(20,14,34,.92);
  --text:#f8f7ff;
  --muted:#a7a0b8;
  --line:rgba(196,181,253,.12);
  --accent:#b69cff;
  --accent-strong:#8b5cf6;
  --accent2:#6d28d9;
  --positive:#78e6b2;
  --negative:#ff7ea6;
  --warning:#ffc86a;
  --shadow:0 24px 72px rgba(8,3,18,.40);
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(circle at 12% -8%,rgba(139,92,246,.22),transparent 34%),
    radial-gradient(circle at 94% 15%,rgba(109,40,217,.17),transparent 31%),
    radial-gradient(circle at 78% 82%,rgba(192,132,252,.09),transparent 30%),
    var(--bg);
}
.ambient-a{background:#8b5cf6;opacity:.13}
.ambient-b{background:#6d28d9;opacity:.12}
.glass{background:linear-gradient(145deg,rgba(32,24,50,.92),rgba(19,14,32,.84));border-color:rgba(196,181,253,.12)}
.brand-logo{box-shadow:0 12px 30px rgba(139,92,246,.24)}
.eyebrow,.text-button{color:#c4b5fd}
.primary-button{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;box-shadow:0 12px 34px rgba(124,58,237,.24)}
.field:focus{border-color:rgba(167,139,250,.62);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.sidebar{background:linear-gradient(180deg,rgba(17,11,29,.95),rgba(11,8,19,.94));border-color:rgba(196,181,253,.10)}
.side-nav .nav-item.active{background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(109,40,217,.13));border-color:rgba(167,139,250,.22)}
.hero-card{background:linear-gradient(135deg,rgba(47,31,74,.91),rgba(18,14,30,.88));border-color:rgba(167,139,250,.15)}
.live-pill{border-color:rgba(167,139,250,.18);background:rgba(139,92,246,.09)}
.live-pill i,.mini-dot,.status-dot:not(.warning){background:#a78bfa;box-shadow:0 0 15px rgba(167,139,250,.72)}
.count-pill{background:rgba(139,92,246,.08);border-color:rgba(167,139,250,.13)}
.segment.active{background:rgba(139,92,246,.22);color:#ede9fe;border-color:rgba(167,139,250,.24)}

/* Login/passkey: viewport immobile e card sempre centrata. */
body.auth-mode{
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}
body.auth-mode .auth-shell{
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  min-height:0;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  overflow:hidden;
  display:grid;
  place-items:center;
}
body.auth-mode .auth-card{
  width:min(100%,470px);
  max-height:calc(100dvh - max(36px,env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px));
  overflow:hidden;
  overscroll-behavior:contain;
}
body.auth-mode.auth-setup-mode .auth-card{overflow:auto;-webkit-overflow-scrolling:touch}

/* Grafico SVG: nessuno style inline, quindi compatibile con CSP style-src 'self'. */
.chart-card{min-height:300px;padding:16px 18px 12px;overflow:hidden}
.trend-chart-wrap{width:100%;overflow:hidden}
.trend-chart{display:block;width:100%;height:auto;min-height:230px;overflow:visible}
.chart-grid-line{stroke:rgba(196,181,253,.10);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-y-label,.chart-x-label{fill:#958da9;font-size:12px;font-weight:650;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif}
.chart-line{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart-line.income{stroke:#9be7bd}
.chart-line.expenses{stroke:#b69cff}
.chart-area.expenses{fill:rgba(139,92,246,.12);stroke:none}
.chart-point circle{stroke:#171020;stroke-width:3;vector-effect:non-scaling-stroke}
.chart-point.income circle{fill:#9be7bd}
.chart-point.expenses circle{fill:#b69cff}
.chart-legend .income i{background:#9be7bd}
.chart-legend .expenses i{background:#b69cff}

@media(max-width:980px){
  body{background:radial-gradient(circle at 20% -5%,rgba(139,92,246,.24),transparent 34%),radial-gradient(circle at 100% 36%,rgba(109,40,217,.14),transparent 30%),var(--bg)}
  .bottom-nav{background:rgba(19,13,31,.93);border-color:rgba(196,181,253,.12)}
  .bottom-nav .nav-item.active{color:#c4b5fd}
  .chart-card{min-height:250px;padding:10px 8px 8px}
  .trend-chart{min-width:560px;min-height:205px}
  .trend-chart-wrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .chart-y-label,.chart-x-label{font-size:11px}
}

@media(max-width:520px){
  body.auth-mode .auth-shell{padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  body.auth-mode .auth-card{padding:24px;border-radius:24px;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  body.auth-mode .auth-card h1{font-size:36px;margin:16px 0 12px}
  body.auth-mode .auth-card .muted{margin-bottom:0}
  .trend-chart{min-width:520px}
}
body.modal-open{overflow:hidden}