/* Saldo · dashboard premium (redesign 2026-09).
   Loaded after styles.css and appearance.css: it restyles the home view only
   (hero, carousels, shortcuts, tab bar). Sheets and forms keep their styles. */
:root {
  --brand: #8e7ad5;
  --brand-hi: #c3b6ff;
  --brand-deep: #5b47b8;
  --tile: #ffffff08;
  --tile-hover: #ffffff10;
  --tile-edge: #ffffff14;
  --r-hero: 32px;
  --r-panel: 26px;
  --r-tile: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shortcut-fill: radial-gradient(circle at 30% 18%, #ffffff24, transparent 58%), linear-gradient(160deg, #2c2650, #16142a);
  --hero-glow: radial-gradient(115% 85% at 100% 0, #8e7ad53d, transparent 62%), radial-gradient(80% 70% at 0 100%, #4f3cb02e, transparent 64%);
  --spark: #c3b6ff;
  --spark-fill: #8e7ad526;
}
html[data-theme=light] {
  --brand-hi: #5b47b8;
  --tile: #2a1d5a08;
  --tile-hover: #2a1d5a10;
  --tile-edge: #3727551f;
  --shortcut-fill: radial-gradient(circle at 30% 18%, #fff, transparent 60%), linear-gradient(160deg, #f4f0ff, #e6dffb);
  --hero-glow: radial-gradient(115% 85% at 100% 0, #8e7ad52e, transparent 62%), radial-gradient(80% 70% at 0 100%, #b9a8ff26, transparent 64%);
  --spark: #6a55c9;
  --spark-fill: #8e7ad51f;
}

/* ——— Interfaccia senza box (29/09): token comuni, usati anche da login.css ———
   Il contenuto poggia sullo sfondo; hanno un fondo solo i controlli. */
:root {
  --hairline: #ffffff17;
  --tint: #ffffff10;
  --tint-strong: #ffffff1c;
  --primary-fill: linear-gradient(145deg, #a386f2, #6553c2);
  --on-primary: #fff;
  --space-section: 36px;
  --space-group: 18px;
}
html[data-theme=light] {
  --hairline: #2a1d5a1f;
  --tint: #2a1d5a0d;
  --tint-strong: #2a1d5a17;
}

/* ——— Rails: horizontal, snapping, no visible scrollbar ——— */
.rail { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex-shrink: 0; }

/* ——— Date line ——— */
.view-home .zone-label { text-transform: none; letter-spacing: 0; font-size: .8125rem; font-weight: 500; margin: 0 4px 10px; }
.view-home .zone-label::first-letter { text-transform: uppercase; }

/* ——— Hero: the balance as a billboard ——— */
.today-zone .hero-current, html[data-theme=light] .today-zone .hero-current {
  padding: 16px 18px 18px; border-radius: var(--r-hero); min-height: 0; gap: 0;
  background: var(--hero-glow), var(--panel-fill);
  box-shadow: inset 0 1px 0 #ffffff26, 0 30px 80px -40px #8e70e8a6;
}
.today-zone .hero-current .hero-card-top { margin: 0; flex-wrap: nowrap; justify-content: space-between; }
.today-zone .hero-card-top .month-switch { margin: 0 auto 0 0; }
.hero-current .round-link { width: 44px; height: 44px; background: var(--tile); border: 1px solid var(--tile-edge); color: var(--ink); transition: background .2s var(--ease), transform .2s var(--ease); }
.hero-current .round-link::after, .cards-head .round-link::after { content: ''; position: absolute; inset: -2px; }
.hero-current .round-link, .cards-head .round-link { position: relative; }
.hero-label { margin-top: 18px; font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
.today-zone .hero-current .hero-amount {
  font-size: clamp(2.75rem, 13.5vw, 4.5rem); line-height: 1.04; font-weight: 680; letter-spacing: -.058em;
  margin: 4px 0 12px; background: linear-gradient(180deg, var(--ink) 30%, #d8cfff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.today-zone .hero-current .hero-amount.is-forecast { background-image: linear-gradient(180deg, #e5ddff 20%, var(--brand)); }
html[data-theme=light] .today-zone .hero-current .hero-amount { background-image: linear-gradient(180deg, #17142a 40%, #4a3aa0); }
.hero-today { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: -4px 0 12px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--tile); border: 1px solid var(--tile-edge); font-size: .8125rem; color: var(--muted); }
.hero-today strong { color: var(--ink); font-weight: 600; }
.hero-today .icon { width: 15px; height: 15px; }

/* Pulse: status, sparkline and the dated low point in one tap target. */
.hero-status.hero-pulse, html[data-theme=light] .hero-status.hero-pulse {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "plot low";
  gap: 8px 14px; align-items: center; width: 100%; margin: 0 0 12px; padding: 12px 14px 12px;
  border-radius: var(--r-tile); background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: none; font-size: .8125rem;
}
.pulse-label { grid-area: label; display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 550; }
.pulse-label .icon { width: 16px; height: 16px; color: var(--positive); }
.status-low .pulse-label .icon { color: var(--amber); }
.status-negative .pulse-label .icon { color: var(--negative); }
.pulse-plot { grid-area: plot; position: relative; height: 54px; min-width: 0; }
.spark-svg { width: 100%; height: 100%; overflow: visible; }
.spark-line { fill: none; stroke: var(--spark); stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 2px 6px #ab93ff40); }
.spark-area { fill: var(--spark-fill); }
.spark-reserve { stroke: #f3c87e80; stroke-width: 1; stroke-dasharray: 3 4; }
.status-low { --spark: var(--amber); --spark-fill: #f3c87e1f; }
.status-negative { --spark: var(--negative); --spark-fill: #ffadaf1f; }
.spark-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #8e7ad559, 0 0 14px #c3b6ff; transform: translate(-50%, -50%); }
.pulse-low { grid-area: low; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.pulse-low small { font-size: .6875rem; color: var(--muted); }
.pulse-low strong { font-size: 1.0625rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Four figures as tiles: 2×2 on phones, one row on wide screens. */
.today-zone .hero-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 0; padding: 0; border: 0; }
.hero-figures > .figure {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "icon label" "icon value"; column-gap: 10px; align-items: center;
  min-height: 58px; padding: 9px 12px; border-radius: 18px; background: var(--tile); border: 1px solid var(--tile-edge); text-align: left; color: var(--ink);
}
.hero-figures > .figure small { grid-area: label; font-size: .6875rem; color: var(--muted); line-height: 1.3; }
.hero-figures > .figure strong { grid-area: value; font-size: .9375rem; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figure-icon { grid-area: icon; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ffffff0d; color: var(--brand-hi); }
.figure-icon .icon { width: 15px; height: 15px; stroke-width: 1.9; }
.figure.is-in .figure-icon { background: #75e5b11a; color: var(--positive); }
.figure.is-out .figure-icon { background: #ffadaf17; color: var(--negative); }
.figure.hero-month-end .figure-icon { background: #8fb8ff17; color: #a9c8ff; }
.figure.is-in:not(.is-zero) strong { color: var(--positive); }
.figure.is-negative strong { color: var(--negative); }
html[data-theme=light] .figure.hero-month-end .figure-icon { color: #3561c9; }

/* ——— Da fare: a carousel of cards, each with its ✓ ——— */
.today-zone .todo-panel, html[data-theme=light] .today-zone .todo-panel { padding: 16px 0 14px; border-radius: var(--r-panel); gap: 10px; }
.todo-head { padding: 0 16px; margin: 0; }
.todo-head h2 { font-size: 1.0625rem; letter-spacing: -.02em; }
.todo-head .confirm-all { margin-left: auto; min-height: 36px; }
.todo-head h2 { white-space: nowrap; }
.todo-head .todo-more { width: 44px; height: 44px; flex: none; background: var(--tile); border: 1px solid var(--tile-edge); color: var(--ink); position: relative; }
.todo-head .todo-more::after { content: ''; position: absolute; inset: -2px; }
.todo-rail { padding: 2px 16px 4px; scroll-padding-inline: 16px; }
.todo-panel .todo-entry {
  position: relative; display: block; flex: 0 0 min(66%, 212px); border: 1px solid var(--tile-edge); border-radius: var(--r-tile);
  background: var(--tile); transition: background .2s var(--ease), transform .2s var(--ease);
}
.todo-panel .todo-entry.is-late { border-color: #f3c87e40; background: linear-gradient(160deg, #f3c87e12, transparent 70%), var(--tile); }
.todo-panel .todo-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 142px; padding: 12px 14px 14px; }
.todo-top { display: flex; align-items: center; gap: 8px; }
.todo-glyph { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #ffffff0d; color: var(--brand-hi); }
.todo-glyph .icon { width: 14px; height: 14px; stroke-width: 1.9; }
.todo-glyph.is-in { background: #75e5b11a; color: var(--positive); }
.todo-glyph.is-out { background: #ffadaf17; color: var(--negative); }
.todo-panel .todo-when { margin: 0; font-size: .75rem; font-weight: 600; color: var(--muted); }
.todo-panel .todo-when.is-late { color: var(--amber); }
.todo-panel .todo-body { display: flex; flex-direction: column; gap: 1px; width: 100%; padding-right: 2px; }
.todo-panel .row-title { font-size: .9375rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.todo-where { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.todo-panel .todo-row .row-amount { margin-top: auto; font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding-right: 48px; }
.todo-panel .confirmation-control { position: absolute; right: 10px; bottom: 10px; width: 44px; }
.todo-panel .quick-confirm { width: 44px; height: 44px; border-radius: 50%; }
.todo-tile { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 142px; border-radius: var(--r-tile); background: var(--tile); border: 1px dashed var(--tile-edge); color: var(--muted); font-size: .75rem; font-weight: 600; }
.todo-tile-count { font-size: 1.5rem; font-weight: 680; color: var(--amber); letter-spacing: -.03em; }
.todo-tile .icon { width: 15px; height: 15px; }

/* ——— Shortcuts: round icons with one word, like a streaming app's rows ——— */
.quick-rail { gap: 4px; margin: 18px -20px 0; padding: 2px 16px 4px; scroll-padding-inline: 16px; }
.shortcut { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 76px; padding: 4px 0; background: none; color: var(--ink); }
.shortcut:active { transform: none; }
.shortcut-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--shortcut-fill); border: 1px solid var(--panel-edge); color: var(--brand-hi); box-shadow: inset 0 1px 0 #ffffff1c, 0 10px 24px -14px #000; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.shortcut-icon .icon { width: 23px; height: 23px; stroke-width: 1.7; }
.shortcut:active .shortcut-icon { transform: scale(.92); }
.shortcut-label { font-size: .71875rem; font-weight: 550; color: var(--muted); white-space: nowrap; }
.favorite-rail { gap: 8px; margin: 10px -20px 0; padding: 2px 16px 4px; scroll-padding-inline: 16px; }
.favorite-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--tile); border: 1px solid var(--tile-edge); font-size: .8125rem; font-weight: 600; color: var(--ink); }
.favorite-chip .icon { width: 15px; height: 15px; color: var(--brand-hi); }
.favorite-chip small { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ——— Month zone ——— */
.view-home .month-zone { margin-top: 22px; }
.view-home .movements-panel, html[data-theme=light] .view-home .movements-panel { border-radius: var(--r-panel); }
.budget-strip.budget-strip { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; border-radius: var(--r-panel); text-align: left; }
.budget-strip > .budget-ring { flex: 0 0 44px; }
.budget-ring { --deg: 0deg; position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--brand-hi); background: conic-gradient(var(--brand-hi) var(--deg), var(--tile-edge) 0); }
.budget-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.budget-ring .icon { position: relative; width: 17px; height: 17px; }
.is-over .budget-ring { color: var(--negative); background: conic-gradient(var(--negative) 360deg, transparent 0); }
.budget-text strong { margin: 0; }
.budget-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; line-height: 1.3; }
.budget-text > span { font-size: .75rem; color: var(--muted); }
.budget-text strong { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.is-over .budget-text strong { color: var(--negative); }
.budget-text small { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.trend-min { display: block; margin-top: 4px; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Cards as real cards, in a row. */
.view-home .cards-shortcut, html[data-theme=light] .view-home .cards-shortcut { padding: 14px 0 16px; border-radius: var(--r-panel); }
.cards-head { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; margin-bottom: 10px; }
.cards-head h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.cards-caption { font-size: .75rem; color: var(--muted); }
.cards-head .round-link { margin-left: auto; width: 44px; height: 44px; background: var(--tile); border: 1px solid var(--tile-edge); color: var(--ink); }
.card-rail { gap: 12px; padding: 2px 16px 4px; scroll-padding-inline: 16px; }
.card-tile {
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 196px; aspect-ratio: 1.586; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 14px 16px; border-radius: 18px; text-align: left; color: #fff; border: 1px solid #ffffff2e;
  background: linear-gradient(135deg, #7a64e0, #2a1f66 70%); box-shadow: inset 0 1px 0 #ffffff40, 0 18px 34px -20px #000;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 90% -10%, #ffffff42, transparent 55%), linear-gradient(115deg, transparent 40%, #ffffff12 50%, transparent 60%); }
.card-tile.tone-1 { background: linear-gradient(135deg, #4f73e8, #15204f 72%); }
.card-tile.tone-2 { background: linear-gradient(135deg, #5d5d6e, #17171f 72%); }
.card-tile.tone-3 { background: linear-gradient(135deg, #c0609b, #3d1838 72%); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; }
.card-chip { flex: none; width: 30px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #f1dfaa, #b8975a); box-shadow: inset 0 0 0 1px #0000001f; }
.card-name { min-width: 0; line-height: 1.35; font-size: .8125rem; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.card-due { display: flex; flex-direction: column; line-height: 1.15; }
.card-due strong { font-size: 1.25rem; font-weight: 680; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.card-due small { font-size: .75rem; opacity: .82; }
.card-tile.is-add { flex: 0 0 64px; aspect-ratio: auto; align-items: center; justify-content: center; background: var(--tile); border: 1px dashed var(--tile-edge); color: var(--muted); box-shadow: none; }
.card-tile.is-add::before { display: none; }
.view-home .assumptions-link span { flex: 1; }

/* ——— Tab bar: three destinations and the + ——— */
.bottom-nav a, .bottom-nav .nav-sheet { flex-direction: column; gap: 2px; font-size: .65625rem; font-weight: 600; letter-spacing: .01em; }
.bottom-nav .nav-sheet { display: flex; justify-content: center; align-items: center; flex: 1; min-width: 0; height: 54px; border-radius: 29px; background: none; color: #bdc6cc; }
.bottom-nav .nav-sheet .icon { width: 21px; height: 21px; }
html[data-theme=light] .bottom-nav .nav-sheet { color: var(--muted); }
@media (hover: hover) {
  .bottom-nav .nav-sheet:hover { background: #ffffff0c; }
  .shortcut:hover .shortcut-icon { transform: translateY(-2px); box-shadow: inset 0 1px 0 #ffffff26, 0 16px 30px -14px #6d5bd0; }
  .todo-panel .todo-entry:hover, .hero-figures > .figure:hover, .hero-pulse:hover, .favorite-chip:hover { background-color: var(--tile-hover); }
  .card-tile:not(.is-add):hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #ffffff40, 0 24px 40px -20px #000; }
  .hero-current .round-link:hover { background: var(--tile-hover); }
}

/* ——— Phones ——— */
@media (max-width: 680px) {
  .today-zone .hero-current { padding: 14px 16px 16px; }
  .quick-rail, .favorite-rail { margin-left: -20px; margin-right: -20px; }
  .view-home .dashboard-grid { gap: 14px; }
}
@media (max-width: 380px) {
  .quick-rail, .favorite-rail { margin-left: -14px; margin-right: -14px; padding-inline: 10px; }
  .hero-figures > .figure { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value"; padding: 8px 10px; }
  .figure-icon { display: none; }
  .shortcut { flex-basis: 70px; }
  .todo-head { flex-wrap: wrap; }
  .todo-head .confirm-all { order: 3; margin-left: 0; }
  .todo-head .todo-more { margin-left: auto; }
}

/* ——— Wide screens ——— */
@media (min-width: 681px) {
  .today-zone .hero-current { padding: 22px 26px 24px; }
  .today-zone .hero-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quick-rail { margin: 22px 0 0; padding: 2px 0 4px; gap: 10px; }
  .favorite-rail { margin: 12px 0 0; padding: 2px 0 4px; }
  .shortcut { flex-basis: 84px; }
}
@media (min-width: 1100px) {
  .view-home .today-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; }
  /* Beside the hero, "Da fare" becomes a vertical stack of compact cards. */
  .today-zone .todo-rail { flex-direction: column; overflow: visible; scroll-snap-type: none; }
  .today-zone .todo-panel .todo-entry { flex: none; }
  .today-zone .todo-panel .todo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top amount" "body amount"; align-items: center; gap: 4px 12px; min-height: 76px; padding: 10px 64px 10px 14px; }
  .today-zone .todo-panel .todo-top { grid-area: top; }
  .today-zone .todo-panel .todo-body { grid-area: body; }
  .today-zone .todo-panel .todo-row .row-amount { grid-area: amount; margin: 0; padding: 0; font-size: 1rem; }
  .today-zone .todo-panel .confirmation-control { top: 50%; bottom: auto; transform: translateY(-50%); }
  .today-zone .todo-tile { flex: none; flex-direction: row; min-height: 52px; gap: 10px; }
  .today-zone .todo-tile-count { font-size: 1.125rem; }
  .hero-status.hero-pulse { grid-template-columns: minmax(0, 1fr) auto; }
  .pulse-plot { height: 64px; }
  /* Movements closed: the summaries share the full width instead of leaving a gap. */
  .view-home .dashboard-grid.is-compact { grid-template-columns: minmax(0, 1fr); }
  .view-home .dashboard-grid.is-compact .dashboard-aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; }
  .view-home .dashboard-grid.is-compact .assumptions-link { grid-column: 1 / -1; }
}

/* ——— Motion: a slide on month change; nothing replays on ordinary updates ——— */
@media (prefers-reduced-motion: no-preference) {
  #main.month-next .hero-current :is(.hero-amount, .hero-pulse, .hero-figures) { animation: dash-in-next .32s var(--ease); }
  #main.month-previous .hero-current :is(.hero-amount, .hero-pulse, .hero-figures) { animation: dash-in-previous .32s var(--ease); }
  .rail { scroll-behavior: smooth; }
}
@keyframes dash-in-next { from { opacity: 0; transform: translateX(18px); } }
@keyframes dash-in-previous { from { opacity: 0; transform: translateX(-18px); } }
@media (prefers-reduced-motion: reduce) {
  .shortcut-icon, .card-tile, .todo-entry, .round-link { transition: none; }
}

/* ——— Readability preferences ——— */
.reduce-transparency .card-tile::before { display: none; }
@media (prefers-contrast: more) {
  .hero-figures > .figure, .todo-panel .todo-entry, .hero-pulse, .shortcut-icon, .favorite-chip, .card-tile { border-color: #ffffffaa; }
  .today-zone .hero-current .hero-amount { background: none; color: var(--ink); }
  .pulse-low small, .hero-figures > .figure small, .shortcut-label, .cards-caption { color: var(--ink); }
}
@media (forced-colors: active) {
  .today-zone .hero-current .hero-amount { background: none; color: CanvasText; forced-color-adjust: auto; }
  .hero-figures > .figure, .todo-panel .todo-entry, .hero-pulse, .shortcut-icon, .favorite-chip, .card-tile, .todo-tile, .budget-ring { background: Canvas; color: CanvasText; border: 1px solid ButtonText; }
  .spark-line { stroke: CanvasText; }
}

/* ——— Other months: today's to-dos one tap away; read-only "In arrivo" ——— */
.today-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; background: #f3c87e1a; border: 1px solid #f3c87e4d; color: var(--ink); font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.today-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px #f3c87e99; }
.today-zone .hero-card-top { gap: 8px; }
.today-zone .hero-card-top .month-switch { margin: 0; }
.today-zone .hero-card-top .round-link { margin-left: auto; }
.todo-panel.is-upcoming .todo-row, .todo-panel.is-upcoming .todo-row .row-amount { padding-right: 14px; }
.todo-panel.is-upcoming .todo-row .row-amount { padding-right: 0; }
.todo-panel.is-upcoming .todo-count { background: #8e7ad526; color: var(--brand-hi); }
html[data-theme=light] .today-pill { background: #f3c87e33; border-color: #b8841f59; }
@media (max-width: 380px) { .today-pill .pill-word { display: none; } .today-pill { padding: 0 12px; } }
@media (min-width: 1100px) { .today-zone .todo-panel.is-upcoming .todo-row { padding-right: 14px; } }
@media (forced-colors: active) { .today-pill { border: 1px solid ButtonText; } .today-pill-dot { background: CanvasText; } }

/* ═══════════ Interfaccia senza box (29/09/2026) ═══════════
   iOS «plain», Apple TV: nessun contenitore con fondo, bordo o ombra. Il contenuto poggia
   sullo sfondo e si separa con spazio, tipografia e linee sottili (--hairline). Hanno un
   fondo solo i controlli: pulsanti, chip, campi, scorciatoie. Vale per l'app dopo
   l'accesso (.app-shell) e per i fogli (dialog); le schermate di accesso sono in login.css. */

/* 1 · Superfici: via fondo, bordo, ombra e riquadri. */
.app-shell :is(.panel, .todo-panel, .trend-panel, .month-close, .plan-hero, .wallet-card, .budget-strip, .cards-shortcut, .hero-card, .month-stats, .plan-tools, .scenario-section, .plan-details, .afford-cta, .setup-cta),
html[data-theme=light] .app-shell :is(.panel, .todo-panel, .trend-panel, .month-close, .plan-hero, .wallet-card, .budget-strip, .cards-shortcut, .hero-card, .month-stats, .plan-tools, .scenario-section, .plan-details, .afford-cta, .setup-cta),
.app-shell .today-zone .hero-current, html[data-theme=light] .app-shell .today-zone .hero-current,
.app-shell .view-piano :is(.plan-tools, .scenario-section, .plan-details),
dialog :is(.wallet-card, .wallet-costs, .trend-banner, .reconciliation-result, .bridge, .bridge-low, .import-review, .sync-comparison section, .afford-cta, .panel, .month-stats, .plan-hero),
html[data-theme=light] dialog :is(.wallet-card, .wallet-costs, .trend-banner, .reconciliation-result, .bridge, .bridge-low, .import-review, .panel) {
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.app-shell :is(.panel, .todo-panel, .trend-panel, .month-close, .wallet-card, .budget-strip, .cards-shortcut, .plan-hero),
.app-shell .view-piano :is(.plan-tools, .scenario-section, .plan-details) { padding-left: 0; padding-right: 0; }
.app-shell .hero-card::before, .app-shell .hero-card::after { display: none; }
dialog :is(.afford-compare > div, .agenda-totals > div, .trend-figures > div), .app-shell :is(.hero-figures > .figure, .hero-pulse, .todo-panel .todo-entry, .todo-tile),
html[data-theme=light] .app-shell :is(.hero-figures > .figure, .hero-pulse, .todo-panel .todo-entry) { background: none; border: 0; box-shadow: none; }

/* 2 · Ritmo: sezioni separate da spazio e da una linea sottile, non da scatole. */
.view-home .month-zone { margin-top: var(--space-section); }
.view-home .dashboard-grid, .view-home .dashboard-aside { gap: 0; }
.view-home :is(.movements-panel, .budget-strip, .trend-panel, .month-close, .cards-shortcut) { border-top: 1px solid var(--hairline); padding-top: var(--space-group); padding-bottom: var(--space-group); margin: 0; }
.view-home .assumptions-link { border-top: 1px solid var(--hairline); padding-left: 0; padding-right: 0; }
.app-shell :is(.section-heading h2, .todo-head h2, .cards-head h2, .section-toggle-title, .plan-title-row h2, .wallet-card-heading h2) { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; }
.app-shell .plan-page-title { font-size: 2rem; font-weight: 700; letter-spacing: -.04em; }

/* 3 · Hero: il saldo sul fondo, con la luce dello sfondo alle spalle. */
.app-shell .today-zone .hero-current { position: relative; overflow: visible; padding: 4px 0 0; isolation: isolate; }
.app-shell .today-zone .hero-current::before { content: ''; display: block; position: absolute; z-index: -1; inset: -60px -40px -20px; background: radial-gradient(60% 55% at 30% 35%, #8e7ad533, transparent 70%); pointer-events: none; }
html[data-theme=light] .app-shell .today-zone .hero-current::before { background: radial-gradient(60% 55% at 30% 35%, #8e7ad524, transparent 70%); }
.app-shell .today-zone .hero-current .hero-amount { font-size: clamp(3rem, 15vw, 5rem); margin: 2px 0 14px; }
.app-shell .hero-status.hero-pulse { padding: 0; margin: 4px 0 20px; gap: 6px 16px; }
.app-shell .pulse-plot { height: 64px; }
.app-shell .today-zone .hero-figures { gap: 0; border-top: 1px solid var(--hairline); }
.app-shell .hero-figures > .figure { border-radius: 0; min-height: 64px; padding: 12px 8px 12px 0; }
.app-shell .hero-figures > .figure:nth-child(odd) { border-right: 1px solid var(--hairline); }
.app-shell .hero-figures > .figure:nth-child(even) { padding-left: 16px; }
.app-shell .hero-figures > .figure:nth-child(n+3) { border-top: 1px solid var(--hairline); }
.app-shell .figure-icon { background: var(--tint); }
.app-shell .hero-today, .app-shell .today-pill { border: 0; }
.app-shell .hero-today { background: var(--tint); }
.app-shell .hero-current .round-link, .app-shell .cards-head .round-link, .app-shell .todo-head .todo-more { background: var(--tint); border: 0; }

/* 4 · «Da fare»: un elenco semplice, righe separate da linee sottili. */
.app-shell .today-zone .todo-panel { padding-top: 0; margin-top: var(--space-section); }
.app-shell .todo-head { padding: 0; }
.app-shell .today-zone .todo-rail { flex-direction: column; gap: 0; overflow: visible; scroll-snap-type: none; padding: 0; }
.app-shell .today-zone .todo-panel .todo-entry { flex: none; border-radius: 0; border-bottom: 1px solid var(--hairline); }
.app-shell .today-zone .todo-panel .todo-entry:last-of-type { border-bottom: 0; }
.app-shell .today-zone .todo-panel .todo-entry.is-late { background: none; }
.app-shell .today-zone .todo-panel .todo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top amount" "body amount"; align-items: center; gap: 2px 12px; min-height: 68px; padding: 10px 56px 10px 0; }
.app-shell .today-zone .todo-panel.is-upcoming .todo-row { padding-right: 0; }
.app-shell .today-zone .todo-panel .todo-top { grid-area: top; }
.app-shell .today-zone .todo-panel .todo-body { grid-area: body; }
.app-shell .today-zone .todo-panel .todo-row .row-amount { grid-area: amount; margin: 0; padding: 0; font-size: 1rem; }
.app-shell .today-zone .todo-panel .confirmation-control { right: 0; top: 50%; bottom: auto; transform: translateY(-50%); }
.app-shell .today-zone .todo-tile { flex: none; flex-direction: row; justify-content: flex-start; min-height: 52px; gap: 10px; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; padding: 0; }
.app-shell .today-zone .todo-tile-count { font-size: 1.125rem; }
.app-shell .todo-glyph { background: var(--tint); }

/* 5 · Controlli: si riconoscono dal fondo (pieno o tinta), senza bordi. */
.app-shell .shortcut-icon { background: var(--tint); border: 0; box-shadow: none; }
.app-shell .favorite-chip, .app-shell .chip, dialog .chip { background: var(--tint); border: 0; box-shadow: none; }
.app-shell .chip.active, dialog .chip.active { background: var(--ink); color: var(--bg); }
.app-shell .filters, dialog .filters, html[data-theme=light] :is(.app-shell, dialog) .filters { background: none; border: 0; box-shadow: none; padding: 0; gap: 6px; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
:is(.app-shell, dialog) .button:not(.secondary):not(.danger), :is(.app-shell, dialog) .button.full:not(.secondary):not(.danger) { background: var(--primary-fill); color: var(--on-primary); border: 0; box-shadow: none; border-radius: 999px; min-height: 50px; }
:is(.app-shell, dialog) .button.secondary, html[data-theme=light] :is(.app-shell, dialog) .button.secondary { background: var(--tint); color: var(--ink); border: 0; box-shadow: none; border-radius: 999px; min-height: 50px; }
:is(.app-shell, dialog) .button.danger { border-radius: 999px; min-height: 50px; box-shadow: none; }
:is(.app-shell, dialog) :is(.form-input, .search-box), html[data-theme=light] :is(.app-shell, dialog) :is(.form-input, .search-box) { background: var(--tint); border: 0; border-radius: 14px; box-shadow: none; }
:is(.app-shell, dialog) .search-box .form-input { background: none; }
:is(.app-shell, dialog) .form-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-glow); }
.app-shell .icon-button.solid, dialog .icon-button.solid { background: var(--tint); border: 0; }
.budget-ring::before { background: var(--bg); }

/* 6 · Righe d'elenco: linea sottile sotto, icona senza riquadro. */
:is(.app-shell, dialog) .row-symbol, html[data-theme=light] :is(.app-shell, dialog) .row-symbol { background: none; border: 0; box-shadow: none; color: var(--brand-hi); }
:is(.app-shell, dialog) .setting-row { border-bottom: 1px solid var(--hairline); }
.app-shell .afford-cta { padding: 0; min-height: 72px; }
.app-shell .afford-cta > .icon:first-child { background: var(--primary-fill); color: var(--on-primary); border: 0; }
.app-shell .view-piano .plan-tools { margin: 8px 0 var(--space-section); border-top: 1px solid var(--hairline); }
.app-shell .view-piano .plan-hero { padding: 0; margin-top: var(--space-group); }
.app-shell .view-piano :is(.scenario-section, .plan-details) { margin-top: var(--space-section); padding-top: 0; }
.app-shell .forecast-split { border-top-color: var(--hairline); }
dialog :is(.wallet-card) { padding: 0 0 var(--space-group); margin-bottom: var(--space-group); border-bottom: 1px solid var(--hairline); }
dialog .trend-banner { padding: 4px 0; }
dialog :is(.afford-compare > div, .agenda-totals > div, .trend-figures > div) { padding-left: 0; }
.card-tile { box-shadow: none; }
.card-tile.is-add { border: 0; background: var(--tint); }

/* 7 · Intestazione e barra in basso: niente pillole di vetro, solo controlli. */
.app-shell .header-group, html[data-theme=light] .app-shell .header-group { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 6px; padding: 0; }
.app-shell .header-group .icon-button.glass, .app-shell .header-add { background: var(--tint); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-shell .header-add { background: var(--primary-fill); color: var(--on-primary); }
@media (max-width: 1099px) {
  .app-shell .dock-wrap { left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: none; gap: 8px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); align-items: center;
    background: linear-gradient(180deg, #0b0a18d9, #070711f5); border-top: 1px solid var(--hairline); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
  html[data-theme=light] .app-shell .dock-wrap { background: linear-gradient(180deg, #f7f5fde6, #f5f3fbf7); }
  .app-shell .dock-wrap::before { display: none; }
  .app-shell .bottom-nav.glass, html[data-theme=light] .app-shell /* Safari does not shrink a flex item below its content unless told so: without this, on 320 px
   screens (iPhone mini with Display Zoom, iPhone SE 1st gen.) the bar pushes «+» off screen. */
.bottom-nav { min-width: 0; }
.bottom-nav.glass { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; height: 56px; padding: 0; }
  .app-shell .bottom-nav a.active, html[data-theme=light] .app-shell .bottom-nav a.active { background: none; box-shadow: none; color: var(--ink); }
  .app-shell .bottom-nav a.active .icon { color: var(--brand-hi); }
  .app-shell .add-button.glass { width: 52px; height: 52px; background: var(--primary-fill); border: 0; box-shadow: none; color: var(--on-primary); }
}
.app-shell .desktop-nav a.active { box-shadow: none; }

/* 8 · Fogli: a tutta larghezza, con lo stesso fondo dell'app. */
dialog, html[data-theme=light] dialog { background: var(--sheet-stage); border: 0; box-shadow: none; }
dialog .dialog-header, html[data-theme=light] dialog .dialog-header { background: linear-gradient(180deg, var(--sheet-top) 70%, transparent); border-bottom: 0; }
dialog .dialog-header .icon-button { background: var(--tint); border: 0; }
@media (max-width: 680px) {
  dialog, html[data-theme=light] dialog { border-top: 1px solid var(--hairline); border-radius: 28px 28px 0 0; }
}
@media (min-width: 681px) {
  dialog, html[data-theme=light] dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border-left: 1px solid var(--hairline); }
  @media (prefers-reduced-motion: no-preference) { dialog[open] { animation: drawer-in .28s var(--ease); } }
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }

/* 9 · Preferenze di lettura: con contrasto elevato i controlli riprendono un bordo. */
@media (prefers-contrast: more) {
  :is(.app-shell, dialog) :is(.button, .chip, .form-input, .search-box, .shortcut-icon, .favorite-chip, .icon-button, .round-link, .today-pill) { border: 1px solid #ffffffaa; }
  html[data-theme=light] :is(.app-shell, dialog) :is(.button, .chip, .form-input, .search-box, .shortcut-icon, .favorite-chip, .icon-button, .round-link, .today-pill) { border-color: #2a1d5a99; }
  :root { --hairline: #ffffff55; }
  html[data-theme=light] { --hairline: #2a1d5a66; }
}
@media (forced-colors: active) {
  :is(.app-shell, dialog) :is(.button, .chip, .form-input, .search-box, .shortcut-icon, .favorite-chip, .icon-button, .round-link) { border: 1px solid ButtonText; }
  .app-shell .hero-figures > .figure, .app-shell .todo-panel .todo-entry { border: 0; border-bottom: 1px solid CanvasText; }
}

/* Rifiniture dello strato senza box. */
.app-shell #main { overflow-x: clip; }
.app-shell .today-zone .hero-current::before { inset: -60px 0 -20px; }
:is(.app-shell, dialog) .search-box .form-input, html[data-theme=light] :is(.app-shell, dialog) .search-box .form-input { border: 0; box-shadow: none; background: none; }
.app-shell .trend-status, html[data-theme=light] .app-shell .trend-status { background: none; padding: 0; }
.app-shell .cards-head { padding: 0; }
.app-shell .card-rail { padding: 2px 0 4px; scroll-padding-inline: 0; }
@media (min-width: 681px) {
  .app-shell .hero-figures > .figure:nth-child(n) { border-top: 0; border-right: 1px solid var(--hairline); padding-left: 16px; }
  .app-shell .hero-figures > .figure:first-child { padding-left: 0; }
  .app-shell .hero-figures > .figure:last-child { border-right: 0; }
}
/* Campi: fondo tinta senza bordo (prevale sulle regole dei fogli di appearance.css). */
html[data-theme] :is(dialog .dialog-body, .app-shell) :is(.form-input, .search-box .form-input):not([type=range]) { background: var(--tint); border: 0; box-shadow: none; border-radius: 14px; }
html[data-theme] :is(dialog .dialog-body, .app-shell) .search-box .form-input { background: var(--tint); }
html[data-theme] dialog .amount-field { background: var(--tint); border: 0; box-shadow: none; }
html[data-theme] dialog .amount-input-wrap { border-bottom: 0; }
@media (prefers-contrast: more) { html[data-theme] :is(dialog .dialog-body, .app-shell) .form-input:not([type=range]), html[data-theme] dialog .amount-field { border: 1px solid currentColor; } }
html[data-theme] dialog .dialog-body.security-body input:not([type=checkbox]):not([type=radio]):not([type=range]) { background: var(--tint); border: 0; box-shadow: none; border-radius: 14px; }
@media (prefers-contrast: more) { html[data-theme] dialog .dialog-body.security-body input:not([type=checkbox]):not([type=radio]):not([type=range]) { border: 1px solid currentColor; } }
/* Fogli: percorso del saldo previsto, verifiche, confronti e riepiloghi senza riquadri. */
html[data-theme] dialog :is(.bridge, .bridge-deferred, .bridge-low, .review-item, .sync-difference, .sync-comparison, .sync-comparison section, .afford-compare > div, .trend-figures > div, .agenda-totals > div, .trend-keys, .reconciliation-result, .import-review, .statement-detail, .fixed-total, .wallet-costs) { background: none; border: 0; border-radius: 0; box-shadow: none; }
html[data-theme] dialog :is(.bridge-subtotal, .bridge-subtotal.is-total), html[data-theme] dialog :is(.bridge-subtotal, .bridge-step > summary, div.bridge-step, .bridge-step-head, .bridge-month, .bridge-empty, .bridge-items) { background: none; padding-left: 0; padding-right: 0; }
html[data-theme] dialog :is(.bridge-step, .bridge-subtotal, .bridge-month, .bridge-empty) { border-top: 1px solid var(--hairline); }
html[data-theme] dialog .bridge-subtotal.is-start { border-top: 0; }
html[data-theme] dialog .bridge-subtotal.is-total { border-top: 2px solid var(--brand-hi); font-weight: 650; }
html[data-theme] dialog .bridge-subtotal.is-total strong { font-size: 1.25rem; }
html[data-theme] dialog :is(.bridge-deferred, .bridge-low, .review-item, .reconciliation-result, .import-review) { border-top: 1px solid var(--hairline); padding-left: 0; padding-right: 0; }
html[data-theme] dialog .review-item { padding-top: var(--space-group); padding-bottom: var(--space-group); }
html[data-theme] dialog .reconciliation-result { padding-top: 14px; padding-bottom: 14px; }
html[data-theme] dialog :is(.afford-compare, .trend-figures, .agenda-totals) { gap: 0; }
html[data-theme] dialog :is(.afford-compare > div, .trend-figures > div, .agenda-totals > div) { padding: 4px 16px 4px 0; }
html[data-theme] dialog :is(.afford-compare > div, .trend-figures > div, .agenda-totals > div) + div { padding-left: 16px; border-left: 1px solid var(--hairline); }
html[data-theme] dialog .recovery-code { background: var(--tint); border: 0; }
/* Telefono: il foglio sale dal basso a tutta larghezza, raggio solo in alto. */
@media (max-width: 680px) {
  html[data-theme] dialog { position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: 100%; border-radius: 28px 28px 0 0; }
  html[data-theme] dialog .dialog-header .icon-button { box-shadow: none; }
}

/* Calendario: griglia del mese con i loghi delle spese programmate (views.calendar). */
.calendar-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 20px 0 16px; }
.calendar-head .plan-page-title { margin: 0; }
.calendar-subtitle { margin: 4px 0 0; color: var(--muted); font-size: .875rem; }
.calendar-head .month-select { min-height: 40px; max-width: none; padding: 0 14px; border: 1px solid var(--field-edge); border-radius: 999px; background: var(--pill-fill); color: var(--ink); font-size: .875rem; font-weight: 600; }
.calendar-summary { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; padding: 4px 0 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.calendar-summary > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calendar-summary strong { font-size: 1.375rem; letter-spacing: -.02em; }
.calendar-summary .calendar-next { font-size: .9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.calendar-summary small { color: var(--muted); font-size: .75rem; }
.calendar-panel { padding: 0; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-weekdays span { text-align: center; color: var(--faint); font-size: .6875rem; font-weight: 600; padding-bottom: 6px; }
.cal-day { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 3px; min-height: 60px; padding: 6px 2px 5px; border: 1px solid transparent; border-radius: 14px; background: var(--tile); color: inherit; font: inherit; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.cal-day.is-outside { background: none; cursor: default; }
.cal-day.is-free .cal-number { color: var(--faint); }
.cal-day:hover { background: var(--tile-hover); }
.cal-day.is-selected { border-color: var(--brand); background: var(--spark-fill); }
.cal-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .75rem; font-weight: 650; }
.cal-day.is-today .cal-number { background: var(--brand); color: #fff; }
.cal-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; min-height: 22px; }
.cal-logo.is-paid, .cal-item.is-paid .logo-badge { opacity: .4; }
.cal-more { font-size: .625rem; font-weight: 700; color: var(--muted); }
.logo-badge { flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.calendar-day-list { margin-top: 16px; }
.calendar-day-title { font-size: 1rem; margin: 0 0 6px; }
.calendar-day-title::first-letter { text-transform: uppercase; }
.calendar-hint { color: var(--muted); font-size: .875rem; text-align: center; margin: 18px 0; }
.cal-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cal-item .row-body { flex: 1; min-width: 0; }
.cal-item.is-paid .row-title, .cal-item.is-paid .row-amount { color: var(--muted); }
.cal-item .icon { width: 16px; height: 16px; color: var(--faint); }
@media (max-width: 600px) {
  .calendar-head { flex-direction: column; align-items: flex-start; }
  .calendar-head .month-select { font-size: .8125rem; }
  .cal-day { min-height: 54px; border-radius: 12px; }
  .cal-day .logo-badge { width: 18px; height: 18px; }
  .cal-logos { min-height: 18px; }
}
@media (min-width: 900px) {
  .cal-day { min-height: 84px; }
  .cal-day .logo-badge { width: 26px; height: 26px; }
}