/* =========================================================================
   MyMoney PWA — guscio (v2 Fase 2). Palette del design MyMoney (light + dark),
   solo i token che servono al guscio. Font di sistema per restare offline.
   ========================================================================= */
:root {
  --lime-400:#A6DA47; --lime-100:#E5F6C7; --lime-600:#6FA31C; --lime-700:#557C18;
  --bg:#F4F6EF; --surface:#FFFFFF; --surface-2:#FBFCF8; --surface-alt:#EEF1E5;
  --ink:#181B14; --muted:#585E4F; --faint:#8A9079; --border:#E3E7D8;
  --accent:#A6DA47; --accent-strong:#6FA31C; --accent-soft:#E5F6C7;
  --on-accent:#1B2A05; --pos:#1E9E5A; --neg:#E2474A;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --shadow:0 6px 24px -12px rgba(24,27,20,.28);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0E110C; --surface:#181C15; --surface-2:#14180F; --surface-alt:#1F241A;
    --ink:#EDF0E6; --muted:#A1A892; --faint:#727A64; --border:#2B3122;
    --accent:#A6DA47; --accent-strong:#BCE470; --accent-soft:#25351A;
    --on-accent:#14200A; --pos:#46D588; --neg:#FF6B6B;
    --shadow:0 8px 28px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* l'attributo hidden vince sempre (anche su label{display:flex}) */
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- barra superiore: banda lime, testo scuro (come le email/header) ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 14px;
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow);
}
.brand { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; opacity: .85; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); opacity: .5; }
.dot.online { background: #0f7a34; opacity: 1; }
.dot.offline { background: #8a3a1a; opacity: 1; }

.wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; }

/* ---- hero patrimonio ---- */
.hero {
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.hero .k { font-size: 13px; color: var(--muted); font-weight: 600; }
.hero .v { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.hero .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---- card portafoglio ---- */
.wallets { display: grid; gap: 10px; margin-top: 14px; }
.wcard {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px 12px 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.wcard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent);
}
.wcard[data-accent]::before { background: var(--wc); }
.wcard .wname { font-weight: 700; }
.wcard .wtype { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.wcard .wval { font-weight: 800; font-size: 17px; }

/* skeleton di caricamento */
.wcard.skeleton { height: 56px; }
.wcard.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(140,150,120,.14), transparent);
  animation: sk 1.2s infinite;
}
@keyframes sk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- stato vuoto ---- */
.empty { text-align: center; padding: 30px 18px; }
.empty-icon { font-size: 30px; color: var(--accent-strong); }
.empty-title { font-weight: 700; margin: 8px 0 4px; }
.muted { color: var(--muted); }

/* ---- bottone ---- */
.btn {
  width: 100%; margin-top: 16px; padding: 13px 16px;
  border-radius: 999px; border: 1px solid var(--border);
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--surface); color: var(--ink);
}
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn:disabled { opacity: .55; cursor: default; }

/* ---- form aggiungi movimento ---- */
.add-form {
  margin-top: 12px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); display: grid; gap: 12px;
}
.af-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.add-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; }
.add-form input, .add-form select {
  font: inherit; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
}
.add-form .af-full { grid-column: 1 / -1; }
.af-actions { display: flex; gap: 10px; }
.af-actions .btn { margin-top: 0; }

/* ---- lista movimenti ---- */
.lista-h { font-weight: 700; margin: 22px 0 8px; font-size: 15px; }
.lista { display: grid; gap: 2px; }
.mrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.mmain { min-width: 0; }
.mdesc { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.mval { font-weight: 700; white-space: nowrap; }
.mval.pos { color: var(--pos); }
.mval.neg { color: var(--neg); }
.mval.muted { color: var(--muted); }

.foot { text-align: center; font-size: 12px; color: var(--faint); margin-top: 22px; line-height: 1.7; }
.install-hint {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface-alt); border: 1px solid var(--border);
  font-size: 13px; color: var(--muted); text-align: center;
}