/* ==========================================================================
   NOWY UI v1.2 - profondita' stile Linear (bianco a strati) + tema scuro + icone a tessera
   Si carica DOPO nowy-ui.css.
   ========================================================================== */
:root {
  --nw-bg: #f7f8fa;
  --nw-sidebar: #f1f2f5;
  --nw-border: rgba(15, 23, 42, .09);
  --nw-highlight: inset 0 1px 0 rgba(255, 255, 255, .9);
  --nw-elev-1: 0 0 0 1px var(--nw-border), 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px -2px rgba(15, 23, 42, .06);
  --nw-elev-2: 0 0 0 1px var(--nw-border), 0 2px 4px rgba(15, 23, 42, .05), 0 12px 28px -8px rgba(15, 23, 42, .14);
  --nw-shadow: var(--nw-elev-1);
  --nw-input-inset: inset 0 1px 2px rgba(15, 23, 42, .06);
  --nw-chart-ink: #1d1d1f; --nw-chart-ink-2: #6e6e73; --nw-chart-grid: rgba(60, 60, 67, .10);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --nw-bg: #0c0d10; --nw-sidebar: #111215; --nw-surface: #17181c; --nw-surface-2: #1c1d22;
  --nw-label: #ececef; --nw-label-2: #a1a2a9; --nw-label-3: #74757d;
  --nw-sep: rgba(255, 255, 255, .08); --nw-sep-strong: rgba(255, 255, 255, .14); --nw-border: rgba(255, 255, 255, .08);
  --nw-fill: rgba(255, 255, 255, .10); --nw-fill-2: rgba(255, 255, 255, .06);
  --nw-accent: #3b8bff; --nw-accent-hover: #5a9dff; --nw-accent-tint: rgba(59, 139, 255, .16);
  --nw-green: #4ade80; --nw-green-tint: rgba(74, 222, 128, .14);
  --nw-orange: #fbbf24; --nw-orange-tint: rgba(251, 191, 36, .14);
  --nw-red: #ff6b6b; --nw-red-tint: rgba(255, 107, 107, .15);
  --nw-blue-tint: rgba(59, 139, 255, .16); --nw-gray-tint: rgba(255, 255, 255, .10);
  --nw-highlight: inset 0 1px 0 rgba(255, 255, 255, .05);
  --nw-elev-1: 0 0 0 1px var(--nw-border), 0 1px 2px rgba(0, 0, 0, .4);
  --nw-elev-2: 0 0 0 1px var(--nw-sep-strong), 0 16px 40px -10px rgba(0, 0, 0, .7);
  --nw-shadow-pop: 0 20px 50px rgba(0, 0, 0, .6);
  --nw-input-inset: inset 0 1px 2px rgba(0, 0, 0, .35);
  /* serie grafici tema scuro: validate (CVD, normal-vision, contrasto) su #16171a */
  --nw-series-1: #3987e5; --nw-series-2: #d95926; --nw-series-3: #199e70; --nw-series-4: #c98500;
  --nw-series-5: #d55181; --nw-series-6: #008300; --nw-series-7: #9085e9;
  --nw-chart-ink: #ececef; --nw-chart-ink-2: #a1a2a9; --nw-chart-grid: rgba(255, 255, 255, .08);
  --bs-body-bg: #0c0d10; --bs-body-color: #ececef; --bs-border-color: rgba(255, 255, 255, .08);
  --bs-secondary-color: #a1a2a9; --bs-tertiary-bg: #1c1d22;
}
body { background: var(--nw-bg); color: var(--nw-label); }

/* superfici a strati: filo + ombra corta + luce sul bordo alto */
.card, .kpi, .nw-stat, .board-col { background: var(--nw-surface); box-shadow: var(--nw-elev-1), var(--nw-highlight); }
a.kpi:hover, a.nw-stat:hover { background: var(--nw-surface); box-shadow: var(--nw-elev-2), var(--nw-highlight); transform: translateY(-1px); }
.card-header { background: linear-gradient(var(--nw-surface), var(--nw-surface-2)); color: var(--nw-label); }
.card-footer { background: var(--nw-surface-2); }
.board-list { background: var(--nw-surface-2); }
.dcard { background: var(--nw-surface); box-shadow: var(--nw-elev-1), inset 3px 0 0 var(--nw-accent); }
.dcard:hover { box-shadow: var(--nw-elev-2), inset 3px 0 0 var(--nw-accent); transform: translateY(-1px); }
.dcard.overdue { box-shadow: var(--nw-elev-1), inset 3px 0 0 #ff3b30; }
table.table thead th { background: var(--nw-surface-2); }

/* sidebar su un piano diverso, voce attiva "sollevata" */
.sidebar { background: var(--nw-sidebar); border-right: 1px solid var(--nw-border); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-item { color: var(--nw-label); }
.nav-item:hover { background: var(--nw-fill-2); color: var(--nw-label); }
.nav-item.active { background: var(--nw-surface); color: var(--nw-label); box-shadow: var(--nw-elev-1), var(--nw-highlight); font-weight: 600; }
.brand-mark { color: var(--nw-label); }
.nav-section { color: var(--nw-label-3); }
.topbar { background: color-mix(in srgb, var(--nw-bg) 82%, transparent); border-bottom-color: var(--nw-border); }

/* icone riconoscibili: tessera colorata stile Impostazioni */
.nav-item .ico { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--c, #8e8e93);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 1.5px rgba(0, 0, 0, .18); }
.nav-item .ico i { width: auto; color: #fff; opacity: 1; font-size: 12.5px; line-height: 1; }

/* pulsanti in leggero rilievo */
.btn-primary { background: linear-gradient(180deg, #1a86f5, #0a6fe0); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 80, 180, .55), 0 1px 2px rgba(0, 60, 140, .25); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, #2b90f7, #0b75ec); color: #fff; }
.btn-success { background: linear-gradient(180deg, #3cc35a, #2aa447); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(20, 110, 45, .55), 0 1px 2px rgba(0, 0, 0, .15); }
.btn-danger { background: linear-gradient(180deg, #ff5a4f, #ec3a30); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(160, 20, 15, .5); }
.btn-outline-secondary { background: var(--nw-surface) !important; color: var(--nw-label) !important;
  box-shadow: 0 0 0 1px var(--nw-border), 0 1px 2px rgba(15, 23, 42, .05), var(--nw-highlight); }
.btn-outline-secondary:hover { background: var(--nw-surface-2) !important; }
td .btn-outline-secondary { box-shadow: none; background: transparent !important; color: var(--nw-accent) !important; }

/* campi incassati */
.form-control, .form-select { background-color: var(--nw-surface); color: var(--nw-label); border-color: var(--nw-sep-strong);
  box-shadow: var(--nw-input-inset); }
.form-control:focus, .form-select:focus { background-color: var(--nw-surface); color: var(--nw-label);
  box-shadow: var(--nw-input-inset), 0 0 0 4px var(--nw-accent-tint); }
.nw-seg { background: var(--nw-fill); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); }
.nw-seg > a, .nw-seg > button, .nw-seg > label { color: var(--nw-label); }
.nw-seg > .active, .nw-seg > input:checked + label { background: var(--nw-surface); box-shadow: var(--nw-elev-1), var(--nw-highlight); }
.nw-chip { background: var(--nw-surface); color: var(--nw-label); box-shadow: 0 0 0 1px var(--nw-border), 0 1px 1px rgba(15, 23, 42, .04); }
.nw-chip.active { background: var(--nw-label); color: var(--nw-bg); }

/* tema scuro: componenti Bootstrap e residui */
html[data-theme="dark"] .table { --bs-table-color: var(--nw-label); --bs-table-border-color: var(--nw-sep); --bs-table-bg: transparent; color: var(--nw-label); }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background: var(--nw-surface-2) !important; color: var(--nw-label); }
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body { color: var(--nw-label) !important; }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--nw-label-2) !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom { border-color: var(--nw-sep) !important; }
html[data-theme="dark"] .btn-close { filter: invert(1); }
html[data-theme="dark"] .nw-overlay { background: rgba(0, 0, 0, .5); }
html[data-theme="dark"] .nw-overlay .box, html[data-theme="dark"] .nw-toast { background: rgba(28, 29, 34, .96); color: var(--nw-label); }
html[data-theme="dark"] .alert-success { color: #86efac; } html[data-theme="dark"] .alert-danger { color: #fca5a5; }
html[data-theme="dark"] .alert-warning { color: #fde68a; }
html[data-theme="dark"] .alert-info, html[data-theme="dark"] .alert-primary { color: #93c5fd; }
html[data-theme="dark"] .text-bg-info { color: #7dd3fc !important; background: rgba(56, 189, 248, .15) !important; }
html[data-theme="dark"] .text-bg-dark { background: #ececef !important; color: #0c0d10 !important; }
html[data-theme="dark"] .pill { background: var(--nw-fill); }
html[data-theme="dark"] .nw-auth { background: radial-gradient(1200px 600px at 20% -10%, #14213d, transparent),
  radial-gradient(900px 500px at 110% 110%, #2a1640, transparent), var(--nw-bg); }
html[data-theme="dark"] .btn-outline-secondary { box-shadow: 0 0 0 1px var(--nw-sep-strong), var(--nw-highlight); }
html[data-theme="dark"] input[type=file]::file-selector-button { background: var(--nw-fill); color: var(--nw-label); }
html[data-theme="dark"] .dropdown-menu { background: var(--nw-surface); border-color: var(--nw-sep); }

/* interruttore tema ☀︎/☾ */
.nw-theme-toggle .bi-sun { display: none; }
html[data-theme="dark"] .nw-theme-toggle .bi-sun { display: inline; }
html[data-theme="dark"] .nw-theme-toggle .bi-moon-stars { display: none; }
html.nw-theme-anim, html.nw-theme-anim * { transition: background-color .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease !important; }

/* profondita' anche su avvisi, toast, overlay, badge, righe e stati vuoti */
.alert { box-shadow: 0 0 0 1px var(--nw-border), var(--nw-highlight); }
.nw-toast, .nw-overlay .box { box-shadow: var(--nw-elev-2), var(--nw-highlight); }
.badge { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
html[data-theme="dark"] .badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
table.table tbody tr:hover { background: var(--nw-fill-2); box-shadow: inset 3px 0 0 var(--nw-accent); }
.nw-empty { background: radial-gradient(420px 160px at 50% 0, var(--nw-fill-2), transparent); border-radius: var(--nw-r-lg); }
.nw-empty i { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 14px;
  background: var(--nw-surface); box-shadow: var(--nw-elev-1), var(--nw-highlight); color: var(--nw-accent); font-size: 24px; margin-bottom: 12px; }
.nw-meter { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .10); }
.kpi .value, .nw-stat .value { color: var(--nw-label); }
html[data-theme="dark"] .kpi .value, html[data-theme="dark"] .nw-stat .value { text-shadow: none; }

/* icone del menu: una sola tinta (accento), stile Linear; il colore per area resta disponibile con .nav-multicolor sulla sidebar */
.sidebar:not(.nav-multicolor) .nav-item .ico { background: linear-gradient(180deg, #2b90f7, #0a6fe0); }
html[data-theme="dark"] .sidebar:not(.nav-multicolor) .nav-item .ico { background: linear-gradient(180deg, #4a95ff, #2f76e6); }

/* --- fluidita' (v1.2.1): barra in alto e barra laterale ferme durante le transizioni, niente blur in scroll --- */
.topbar { background: var(--nw-bg); backdrop-filter: none; -webkit-backdrop-filter: none; view-transition-name: nw-topbar; }
.topbar h1, .topbar .subtitle { view-transition-name: none; }
::view-transition-group(nw-topbar) { animation-duration: .2s; }
::view-transition-old(nw-topbar), ::view-transition-new(nw-topbar) { animation-duration: .2s; }
.nw-toast { backdrop-filter: none; -webkit-backdrop-filter: none; }
.card, .kpi, .dcard, .btn, .nav-item { backface-visibility: hidden; }
.htmx-request .nw-progress { opacity: 1; }

/* --- v1.3: icone del menu SENZA sfondo, glifi in rilievo -------------------------------------------------
   Riempimento a sfumatura dentro il glifo + filo di luce sopra + ombra minima sotto: profondita' senza tessere.
   Riposo: grigio ardesia (il testo resta protagonista). Attiva: blu accento con alone. Hover: sale di 1px. */
.sidebar .nav-item .ico, .sidebar:not(.nav-multicolor) .nav-item .ico {
  width: 20px; height: 20px; flex: 0 0 20px; background: none !important; box-shadow: none !important; border-radius: 0; }
.sidebar .nav-item .ico i {
  font-size: 16px; line-height: 1; color: transparent;
  background: linear-gradient(180deg, #9a9ca8 0%, #5d606c 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 1px 1px rgba(15, 23, 42, .16));
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), filter .18s ease; display: inline-block; }
.sidebar .nav-item:hover .ico i { transform: translateY(-1px);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 2px 2px rgba(15, 23, 42, .20)); }
.sidebar .nav-item.active .ico i {
  background: linear-gradient(180deg, #4aa3ff 0%, #0a6fe0 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .85)) drop-shadow(0 1px 2px rgba(10, 111, 224, .35)) drop-shadow(0 0 6px rgba(10, 132, 255, .18)); }
html[data-theme="dark"] .sidebar .nav-item .ico i {
  background: linear-gradient(180deg, #b8bac3 0%, #6c6f7a 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 1px 0 rgba(255, 255, 255, .06)); }
html[data-theme="dark"] .sidebar .nav-item.active .ico i {
  background: linear-gradient(180deg, #7ab8ff 0%, #2f7cf0 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 8px rgba(59, 139, 255, .45)) drop-shadow(0 -1px 0 rgba(0, 0, 0, .5)); }
@media (forced-colors: active) { .sidebar .nav-item .ico i { color: CanvasText; background: none; filter: none; } }

/* ==========================================================================
   v1.4 — layout alla Linear: il contenuto e' una lastra sollevata sopra la tela del menu
   ========================================================================== */
:root { --nw-canvas: #eeeef1; --nw-panel: #ffffff; --nw-panel-bg: #fbfbfc; }
html[data-theme="dark"] { --nw-canvas: #08090a; --nw-panel: #111214; --nw-panel-bg: #111214; }
body { background: var(--nw-canvas); }
.layout { height: 100vh; overflow: hidden; }
.sidebar { background: transparent; border-right: 0; padding: 0 10px 24px 12px; height: 100vh; }
.content { background: var(--nw-panel-bg); margin: 8px 8px 8px 0; height: calc(100vh - 16px); overflow-y: auto;
  border-radius: 14px; box-shadow: 0 0 0 1px var(--nw-border), 0 1px 3px rgba(15, 23, 42, .06), 0 10px 30px -12px rgba(15, 23, 42, .14);
  scroll-behavior: auto; overscroll-behavior: contain; }
html[data-theme="dark"] .content { box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 20px 50px -20px rgba(0, 0, 0, .9); }
.topbar { background: var(--nw-panel-bg); border-top-left-radius: 14px; border-top-right-radius: 14px; }
.content { view-transition-name: nw-panel; }
::view-transition-group(nw-panel) { animation-duration: .22s; }

/* testata del menu: spazio di lavoro + ricerca + azione rapida in rilievo */
.nw-side-head { display: flex; align-items: center; gap: 4px; padding: 16px 2px 14px 2px; }
.nw-workspace { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 5px 6px; border-radius: 9px; color: var(--nw-label); }
.nw-workspace:hover { background: var(--nw-fill-2); color: var(--nw-label); }
.nw-logo { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #2a2b31, #111216); color: #fff; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .nw-logo { background: linear-gradient(180deg, #f4f4f6, #cfd0d6); color: #111; }
.nw-ws-name { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.nw-ws-caret { font-size: 11px; color: var(--nw-label-3); }
.nw-side-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  color: var(--nw-label-2); font-size: 15px; }
.nw-side-icon:hover { background: var(--nw-fill-2); color: var(--nw-label); }
.nw-side-compose { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
  color: var(--nw-label); font-size: 16px; background: var(--nw-panel);
  box-shadow: 0 0 0 1px var(--nw-border), 0 1px 2px rgba(15, 23, 42, .08), 0 3px 8px -2px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .15s ease, box-shadow .15s ease; }
.nw-side-compose:hover { transform: translateY(-1px); color: var(--nw-accent); }
html[data-theme="dark"] .nw-side-compose { background: #1d1e22; box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06); }

/* voci: icona a contorno monocromatica, pastiglia contatore a destra */
.nav-item { gap: 10px; padding: 6px 8px; font-size: 13.5px; }
.sidebar .nav-item .ico i { color: var(--nw-label-2); background: none; -webkit-background-clip: border-box; background-clip: border-box;
  font-size: 16px; filter: none; }
html[data-theme="dark"] .sidebar .nav-item .ico i { background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; color: var(--nw-label-2); }
.sidebar .nav-item:hover .ico i { color: var(--nw-label); transform: none; filter: none; }
.sidebar .nav-item.active .ico i, html[data-theme="dark"] .sidebar .nav-item.active .ico i { color: var(--nw-label); background: none; filter: none; }
.nav-item.active { background: var(--nw-panel); }
html[data-theme="dark"] .nav-item.active { background: #1c1d21; box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.04); }
.nw-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: var(--nw-label-2); background: var(--nw-fill);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .03); font-variant-numeric: tabular-nums; }

/* sezioni richiudibili */
.nw-nav-toggle { display: flex; align-items: center; gap: 5px; width: 100%; border: 0; background: none; text-align: left;
  padding: 16px 8px 6px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--nw-label-3); }
.nw-nav-toggle:hover { color: var(--nw-label-2); }
.nw-nav-toggle i { font-size: 8px; transition: transform .2s ease; }
.nw-nav-group.closed .nw-nav-toggle i { transform: rotate(-90deg); }
.nw-nav-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.nw-nav-items > * { min-height: 0; }
.nw-nav-items { overflow: hidden; }
.nw-nav-group.closed .nw-nav-items { grid-template-rows: 0fr; opacity: 0; }
.nw-nav-group .nw-nav-items { display: flex; flex-direction: column; }
.nw-nav-group.closed .nw-nav-items { display: none; }

@media (max-width: 992px) {
  .layout { height: auto; overflow: visible; }
  .content { margin: 0; height: auto; min-height: 100vh; border-radius: 0; overflow: visible; box-shadow: none; }
  .sidebar { background: var(--nw-canvas); }
}

/* ==========================================================================
   v1.5 — componenti dai riferimenti (Linear / Stripe / Vercel)
   ========================================================================== */
/* icone di stato alla Linear: la forma racconta lo stato, il colore lo rinforza */
.nw-st { display: inline-flex; align-items: center; gap: 6px; color: var(--nw-label-3); white-space: nowrap; font-size: 13px; }
.nw-st svg { flex: 0 0 auto; }
.nw-st-label { color: var(--nw-label-2); }
/* palette stati: vivace e non standard (alla Linear), distinta per forma E colore */
:root { --st-wait: #9ca3af; --st-ready: #14b8a6; --st-planned: #a855f7; --st-progress: #eab308; --st-partial: #f97316;
        --st-done: #5e6ad2; --st-error: #f43f5e; --st-cancel: #9ca3af; }
html[data-theme="dark"] { --st-wait: #7b8190; --st-ready: #2dd4bf; --st-planned: #c084fc; --st-progress: #facc15; --st-partial: #fb923c;
        --st-done: #818cf8; --st-error: #fb7185; --st-cancel: #6b7280; }
.nw-st-dashed { color: var(--st-wait); }
.nw-st-ring { color: var(--st-ready); }
.nw-st-quarter { color: var(--st-planned); }
.nw-st-half, .nw-st-three { color: var(--st-progress); }
.nw-st-partial { color: var(--st-partial); }
.nw-st-done { color: var(--st-done); }
.nw-st-error, .nw-st-alert { color: var(--st-error); }
.nw-st-warn { color: var(--st-partial); }
.nw-st-cancel { color: var(--st-cancel); }
.nw-st-spin svg { animation: nw-spin 1s linear infinite; }

/* variazione rispetto al periodo precedente */
.nw-delta { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.nw-delta.up { color: #1a7f37; background: rgba(46, 160, 67, .14); }
.nw-delta.down { color: #b35900; background: rgba(245, 159, 0, .16); }
.nw-delta.new { color: var(--nw-label-2); background: var(--nw-fill); }
html[data-theme="dark"] .nw-delta.up { color: #4ade80; } html[data-theme="dark"] .nw-delta.down { color: #fbbf24; }

/* griglia di metriche alla Stripe: celle divise da fili, niente card per metrica */
.nw-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); background: var(--nw-surface);
  border-radius: var(--nw-r-lg); box-shadow: var(--nw-elev-1), var(--nw-highlight); overflow: hidden; }
.nw-metric { display: block; padding: 16px 18px 12px; color: inherit; border-right: 1px solid var(--nw-sep); border-bottom: 1px solid var(--nw-sep);
  transition: background .15s ease; }
a.nw-metric:hover { background: var(--nw-surface-2); color: inherit; }
.nw-metric-head { display: flex; align-items: center; gap: 8px; }
.nw-metric-head .label { font-size: 13px; font-weight: 500; color: var(--nw-label-2); }
.nw-metric-values { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; }
.nw-metric .value { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--nw-label); }
.nw-metric .prev { font-size: 14px; color: var(--nw-label-3); font-variant-numeric: tabular-nums; }
.nw-metric .sub { font-size: 12px; color: var(--nw-label-3); margin-top: 4px; }
.nw-spark { height: 46px; margin-top: 8px; position: relative; }

/* titoli di sezione grandi alla Stripe */
.nw-h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 28px 0 12px; color: var(--nw-label); }
.nw-h2 .hint { font-size: 13px; font-weight: 400; color: var(--nw-label-3); margin-left: 8px; letter-spacing: 0; }

/* lista raggruppata alla Linear */
.nw-list { background: var(--nw-surface); border-radius: var(--nw-r-lg); box-shadow: var(--nw-elev-1), var(--nw-highlight); overflow: hidden; }
.nw-group-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: var(--nw-surface-2); border-bottom: 1px solid var(--nw-sep); border-top: 1px solid var(--nw-sep);
  font-size: 13px; font-weight: 600; color: var(--nw-label); cursor: pointer; user-select: none; }
.nw-group-head:first-child { border-top: 0; }
.nw-group-head .n { color: var(--nw-label-3); font-weight: 500; }
.nw-group-head .caret { margin-left: auto; color: var(--nw-label-3); font-size: 10px; transition: transform .2s ease; }
.nw-group.closed .nw-group-head .caret { transform: rotate(-90deg); }
.nw-group.closed .nw-row { display: none; }
.nw-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; min-height: 42px; border-bottom: 1px solid var(--nw-sep);
  color: var(--nw-label); font-size: 13.5px; transition: background .12s ease; }
a.nw-row:hover, .nw-row.clickable:hover { background: var(--nw-fill-2); color: var(--nw-label); }
.nw-row .id { color: var(--nw-label-3); font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 64px; }
.nw-row .title { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-row .title .muted { color: var(--nw-label-3); font-weight: 400; margin-left: 6px; }
.nw-row .meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--nw-label-2); font-size: 12.5px; }
.nw-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 12px; color: var(--nw-label-2);
  box-shadow: inset 0 0 0 1px var(--nw-sep-strong); background: var(--nw-surface); white-space: nowrap; }
.nw-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--nw-label-3)); }
.nw-row .date { color: var(--nw-label-3); font-size: 12.5px; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }

/* striscia di statistiche alla Vercel */
.nw-statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.nw-statbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--nw-r);
  background: var(--nw-surface-2); box-shadow: inset 0 0 0 1px var(--nw-sep); }
.nw-statbox .t { font-size: 13px; color: var(--nw-label); font-weight: 500; }
.nw-statbox .s { font-size: 12px; color: var(--nw-label-3); }
.nw-statbox .v { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }

/* barra filtri a tendine alla Vercel */
.nw-filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0 16px; }
.nw-filterbar .form-select, .nw-filterbar .form-control { width: auto; min-width: 150px; }
.nw-filterbar .nw-search { flex: 1 1 260px; }