/* ===== foco design system ===== */
:root {
  --ground:#FAFAF9; --surface:#FFFFFF; --surface-2:#F5F2EF;
  --ink:#1C1A18; --muted:#6B6560; --hairline:#ECE7E2;
  --accent:#F0532E; --accent-ink:#FFFFFF; --accent-weak:#FCE7DF;
  --good:#0E9B84; --good-weak:#DBF1EC;
  --warn:#B8791C; --warn-weak:#F6EBD5;
  --crit:#D63B3B; --crit-weak:#F8DEDE;
  --shadow:0 1px 2px rgba(28,26,24,.06), 0 8px 24px -12px rgba(28,26,24,.18);
  --radius:16px;
}
@media (prefers-color-scheme:dark) {
  :root {
    --ground:#17130F; --surface:#201A15; --surface-2:#2A2219;
    --ink:#F3EEE8; --muted:#A69B8F; --hairline:#332A21;
    --accent:#FF6A44; --accent-ink:#1A1109; --accent-weak:#3A2114;
    --good:#2CC4A8; --good-weak:#123029;
    --warn:#E0A93A; --warn-weak:#33280F;
    --crit:#FF6B6B; --crit-weak:#3A1B1B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  }
}

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  background:var(--ground); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.45; min-height:100dvh;
}
.num { font-variant-numeric:tabular-nums; }
a { color:var(--accent); text-decoration:none; }
h1:focus { outline:none; }

/* App shell */
.app {
  max-width:460px; margin-inline:auto; min-height:100dvh;
  background:var(--ground); display:flex; flex-direction:column;
  position:relative; border-inline:1px solid var(--hairline);
}
@media (max-width:461px) { .app { border-inline:none; } }

.appbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--hairline);
}
.brand { display:flex; align-items:baseline; gap:2px; font-weight:800; letter-spacing:-.03em; font-size:1.4rem; color:var(--ink); }
.brand .dot { color:var(--accent); }
.brand small { font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-left:8px; }
.provider { display:inline-flex; align-items:center; gap:6px; font-size:.7rem; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--hairline); padding:5px 9px; border-radius:999px; white-space:nowrap; }
.provider .led { width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-weak); }

main { flex:1; padding:18px 16px 108px; }
.title { font-size:1.5rem; letter-spacing:-.02em; margin:.1rem 0 .2rem; text-wrap:balance; }
.sub { color:var(--muted); font-size:.86rem; margin:0 0 18px; }
.section-actions { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }

/* Buttons */
.btn {
  appearance:none; border:1px solid var(--hairline); background:var(--surface); color:var(--ink);
  font:inherit; font-weight:600; font-size:.86rem; padding:9px 14px; border-radius:11px;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:transform .06s ease, background .15s; text-decoration:none;
}
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn:disabled { opacity:.6; cursor:default; }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn.block { width:100%; justify-content:center; padding:13px; }
.btn.sm { padding:7px 11px; font-size:.78rem; border-radius:9px; }
.btn.good { color:var(--good); border-color:color-mix(in srgb,var(--good) 40%,var(--hairline)); }
.btn.ghost-crit { color:var(--crit); border-color:color-mix(in srgb,var(--crit) 40%,var(--hairline)); }

/* Cards + stats */
.card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.stat { padding:15px 16px; }
.stat.wide { grid-column:1 / -1; }
.stat .lbl { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.stat .big { font-size:1.9rem; font-weight:800; letter-spacing:-.02em; margin-top:4px; }
.stat .big.accent { color:var(--accent); }
.stat .foot { font-size:.74rem; color:var(--muted); margin-top:2px; }

.alert { padding:13px 15px; border-radius:14px; font-size:.86rem; margin-bottom:16px; border:1px solid var(--hairline); background:var(--surface); }
.alert-good { background:var(--good-weak); border-color:color-mix(in srgb,var(--good) 30%,var(--hairline)); color:var(--ink); }
.alert-crit { background:var(--crit-weak); border-color:color-mix(in srgb,var(--crit) 30%,var(--hairline)); color:var(--ink); }
.saving { display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:16px;
  background:var(--warn-weak); border:1px solid color-mix(in srgb,var(--warn) 30%,var(--hairline)); border-radius:14px; }
.saving b { color:var(--warn); }
.saving .amt { font-size:1.15rem; font-weight:800; margin-left:auto; white-space:nowrap; }

/* Lists / subscription rows */
.list { display:flex; flex-direction:column; gap:11px; }
.row { padding:14px 15px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.logo { width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-weight:800; font-size:1.05rem; color:#fff; letter-spacing:-.02em; }
.row .name { font-weight:700; font-size:.96rem; line-height:1.2; }
.row .meta { font-size:.76rem; color:var(--muted); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.price { text-align:right; }
.price .m { font-weight:800; font-size:1.02rem; }
.price .y { font-size:.72rem; color:var(--muted); }
.chip { font-size:.66rem; padding:2px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--hairline); color:var(--muted); font-weight:600; }
.conf { height:5px; border-radius:99px; background:var(--surface-2); overflow:hidden; width:64px; display:inline-block; }
.conf > i { display:block; height:100%; border-radius:99px; }
.row-actions { grid-column:1 / -1; display:flex; gap:8px; padding-top:2px; flex-wrap:wrap; }
.status { font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:999px; }
.st-detected { background:var(--accent-weak); color:var(--accent); }
.st-active { background:var(--good-weak); color:var(--good); }
.st-dismissed { background:var(--surface-2); color:var(--muted); }
.st-cancelled { background:var(--crit-weak); color:var(--crit); }

/* Recommendation cards */
.rec { padding:0; overflow:hidden; display:flex; }
.rec .stripe { width:5px; flex:0 0 5px; }
.rec .body { padding:14px 15px; flex:1; }
.rec .head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.rec h3 { margin:0; font-size:1rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.badge { font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:7px; }
.b-keep { background:var(--good-weak); color:var(--good); }
.b-review { background:var(--warn-weak); color:var(--warn); }
.b-cancel { background:var(--crit-weak); color:var(--crit); }
.rec .save { text-align:right; white-space:nowrap; }
.rec .save small { display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.rec .save b { color:var(--good); font-size:1rem; }
.reasons { list-style:none; margin:10px 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.reasons li { font-size:.82rem; color:var(--ink); display:flex; gap:8px; align-items:flex-start; }
.reasons li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-top:7px; flex:0 0 6px; }
.rec-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Connect list */
.bank-list { display:flex; flex-direction:column; gap:9px; }
.bank { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
  padding:14px 15px; text-align:left; }
.bank .name { font-weight:700; font-size:.95rem; }
.bank .arrow { color:var(--muted); }

/* Empty state */
.empty { text-align:center; padding:34px 20px; color:var(--muted); }
.empty .ico { width:56px; height:56px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center; background:var(--accent-weak); color:var(--accent); }
.scan-hint { font-size:.8rem; color:var(--muted); margin-top:12px; }
.disclaimer { margin-top:18px; font-size:.72rem; color:var(--muted); text-align:center; line-height:1.5; }
.spinner { width:1rem; height:1rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; display:inline-block; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Bottom tab bar (NavLink-based) */
.tabbar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:460px; z-index:30; display:grid; grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb,var(--surface) 92%, transparent);
  backdrop-filter:blur(12px) saturate(1.3); border-top:1px solid var(--hairline);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.tab { appearance:none; border:0; background:none; cursor:pointer; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:11px 4px 12px; color:var(--muted); font-size:.66rem; font-weight:600; }
.tab svg { width:22px; height:22px; }
.tab.active { color:var(--accent); }
.tab:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; border-radius:8px; }

@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* ===== Blazor framework bits ===== */
#blazor-error-ui {
  background:var(--crit-weak); color:var(--ink); bottom:0; box-shadow:0 -1px 2px rgba(0,0,0,.2);
  box-sizing:border-box; display:none; left:0; padding:.6rem 1.25rem .7rem; position:fixed; width:100%; z-index:1000;
}
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem; }
.blazor-error-boundary { background:var(--crit); padding:1rem; color:#fff; border-radius:12px; }
.blazor-error-boundary::after { content:"Si è verificato un errore."; }

.loading-progress { position:absolute; display:block; width:8rem; height:8rem; inset:30vh 0 auto 0; margin:0 auto; }
.loading-progress circle { fill:none; stroke:var(--hairline); stroke-width:.6rem; transform-origin:50% 50%; transform:rotate(-90deg); }
.loading-progress circle:last-child { stroke:var(--accent);
  stroke-dasharray:calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition:stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position:absolute; text-align:center; font-weight:bold; color:var(--muted); inset:calc(30vh + 3.25rem) 0 auto .2rem; }
.loading-progress-text:after { content:var(--blazor-load-percentage-text, "Caricamento"); }