:root {
  --reddito:    #004561;
  --spese:      #C0392B;
  --debiti:     #7358C3;
  --investimenti: #16A34A;
  --oro:        #D97706;
  --bg:         #F8FAFC;
  --card:       #FFFFFF;
  --border:     #E2E8F0;
  --text:       #0C0C2C;
  --text2:      #475569;
  --success:    #16A34A;
  --warning:    #D97706;
  --danger:     #C0392B;
  --nav-w:      220px;
  --radius:     12px;
  --shadow:     0 2px 12px rgba(12,12,44,0.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;font-size:16px;background:var(--bg);color:var(--text);min-height:100vh;display:flex}

/* ── NAV ── */
#nav{width:var(--nav-w);min-height:100vh;background:var(--text);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;transition:.3s}
.nav-logo{padding:24px 20px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.nav-logo h1{font-family:'DM Serif Display',serif;font-size:18px;color:#fff;line-height:1.2}
.nav-logo span{font-size:12px;color:rgba(255,255,255,.5);font-weight:300}
.nav-links{flex:1;padding:12px 0;overflow-y:auto}
.nav-link{display:flex;align-items:center;gap:10px;padding:11px 20px;color:rgba(255,255,255,.7);cursor:pointer;font-size:15px;font-weight:400;transition:.2s;border-left:3px solid transparent;text-decoration:none}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-link.active{background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--oro)}
.nav-link .icon{font-size:18px;width:24px;text-align:center}
.nav-section{padding:8px 20px 4px;font-size:11px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.nav-user{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);font-size:13px}

/* ── MAIN ── */
#main{margin-left:var(--nav-w);flex:1;min-height:100vh;padding:32px}
.page-header{margin-bottom:28px}
.page-header h2{font-family:'DM Serif Display',serif;font-size:28px;color:var(--text)}
.page-header p{color:var(--text2);font-size:15px;margin-top:4px}

/* ── CARDS ── */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
.card-pad{padding:24px}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:var(--card);border-radius:var(--radius);padding:20px 24px;border:1px solid var(--border);box-shadow:var(--shadow);border-left:4px solid var(--border-accent,var(--border))}
.kpi.reddito{--border-accent:var(--reddito)}
.kpi.spese{--border-accent:var(--spese)}
.kpi.debiti{--border-accent:var(--debiti)}
.kpi.investimenti{--border-accent:var(--investimenti)}
.kpi label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);font-weight:500}
.kpi .val{font-family:'DM Serif Display',serif;font-size:26px;color:var(--text);margin:4px 0}
.kpi .sub{font-size:13px;color:var(--text2)}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:15px}
thead th{background:#F1F5F9;padding:12px 14px;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--text2);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--border);transition:.15s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:#F8FAFC}
tbody td{padding:11px 14px;vertical-align:middle}
.td-num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.td-date{white-space:nowrap;color:var(--text2);font-size:14px}

/* ── BADGE TIPO ── */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.badge-SPESE{background:#FEF2F2;color:var(--spese)}
.badge-REDDITO{background:#EFF6FF;color:var(--reddito)}
.badge-DEBITI{background:#F5F3FF;color:var(--debiti)}
.badge-INVESTIMENTI{background:#F0FDF4;color:var(--investimenti)}
.badge-GIROCONTO{background:#F0F9FF;color:#0369A1}

/* ── STATO ── */
.stato{display:inline-block;font-size:12px;padding:2px 8px;border-radius:20px;font-weight:500}
.stato-Confermata{background:#DCFCE7;color:#166534}
.stato-Da\ confermare{background:#FEF9C3;color:#854D0E}
.stato-Programmata{background:#F1F5F9;color:#64748B}

/* ── FILTRI ── */
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.filters select,.filters input[type=text]{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:15px;font-family:inherit;color:var(--text);background:#fff;outline:none;transition:.2s;min-height:44px}
.filters select:focus,.filters input:focus{border-color:var(--reddito);box-shadow:0 0 0 3px rgba(0,69,97,.1)}
.filters label{font-size:14px;color:var(--text2);font-weight:500}

/* ── FORM ── */
.form-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(12,12,44,.4);z-index:200;backdrop-filter:blur(2px)}
.form-modal-backdrop.open{display:flex;align-items:center;justify-content:center}
.form-modal{background:var(--card);border-radius:var(--radius);padding:32px;width:min(620px,95vw);max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(12,12,44,.2)}
.form-modal h3{font-family:'DM Serif Display',serif;font-size:22px;margin-bottom:24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:14px;font-weight:500;color:var(--text2)}
.form-group input,.form-group select,.form-group textarea{padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:15px;font-family:inherit;color:var(--text);outline:none;transition:.2s;min-height:44px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--reddito);box-shadow:0 0 0 3px rgba(0,69,97,.1)}
.form-group textarea{min-height:60px;resize:vertical}
.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}

/* ── BUTTONS ── */
.btn{padding:10px 20px;border-radius:8px;font-size:15px;font-family:inherit;font-weight:500;cursor:pointer;border:none;transition:.2s;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--reddito);color:#fff}
.btn-primary:hover:not(:disabled){background:#A93226}
.btn-secondary{background:#F1F5F9;color:var(--text)}
.btn-secondary:hover{background:#E2E8F0}
.btn-danger{background:#FEF2F2;color:var(--spese)}
.btn-danger:hover{background:#FEE2E2}
.btn-small{padding:6px 12px;font-size:13px;min-height:32px}
.btn-icon{padding:8px;min-height:36px;min-width:36px;justify-content:center;background:transparent;color:var(--text2)}
.btn-icon:hover{background:#F1F5F9;color:var(--text)}

/* ── TOAST ── */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--text);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;box-shadow:var(--shadow);animation:toastIn .3s ease;max-width:300px}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── CONFIRM DIALOG ── */
#confirm-backdrop{display:none;position:fixed;inset:0;background:rgba(12,12,44,.4);z-index:300;backdrop-filter:blur(2px);align-items:center;justify-content:center}
#confirm-backdrop.open{display:flex}
#confirm-box{background:var(--card);border-radius:var(--radius);padding:28px;width:min(400px,90vw);box-shadow:0 20px 60px rgba(12,12,44,.2)}
#confirm-box h4{font-size:18px;font-weight:600;margin-bottom:10px}
#confirm-box p{color:var(--text2);font-size:15px;margin-bottom:20px}
#confirm-box .actions{display:flex;gap:10px;justify-content:flex-end}

/* ── DASHBOARD ── */
.chart-row{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}
.chart-box{background:var(--card);border-radius:var(--radius);padding:20px;border:1px solid var(--border)}
.chart-box h4{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em}
.bar-chart{display:flex;flex-direction:column;gap:8px}
.bar-row{display:grid;grid-template-columns:110px 1fr 70px;gap:8px;align-items:center}
.bar-label{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:8px;background:#F1F5F9;border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:.5s}
.bar-value{font-size:13px;font-weight:500;text-align:right}
.month-chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding-bottom:4px}
.month-bar-group{flex:1;display:flex;gap:2px;align-items:flex-end}
.month-bar{flex:1;border-radius:3px 3px 0 0;min-width:6px;transition:.4s}
.month-label{text-align:center;font-size:11px;color:var(--text2);margin-top:4px}
.saldi-table{width:100%;border-collapse:collapse;font-size:14px}
.saldi-table th{padding:8px 10px;text-align:left;font-size:11px;color:var(--text2);font-weight:500;text-transform:uppercase;border-bottom:1px solid var(--border)}
.saldi-table td{padding:8px 10px;border-bottom:1px solid var(--border)}
.saldi-table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}

/* ── MENSILE ── */
.mensile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.mensile-section{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}
.mensile-header{padding:14px 16px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.mensile-header.reddito{background:#EFF6FF;color:var(--reddito);border-bottom:2px solid var(--reddito)}
.mensile-header.spese{background:#FEF2F2;color:var(--spese);border-bottom:2px solid var(--spese)}
.mensile-header.debiti{background:#F5F3FF;color:var(--debiti);border-bottom:2px solid var(--debiti)}
.mensile-header.investimenti{background:#F0FDF4;color:var(--investimenti);border-bottom:2px solid var(--investimenti)}
.mensile-body{padding:0}
.mensile-col-header{display:grid;grid-template-columns:1fr 60px 60px 60px;gap:4px;padding:6px 12px 2px;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.mensile-col-header-slim{display:grid;grid-template-columns:1fr 90px;gap:4px;padding:6px 12px 2px;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.mensile-row{display:grid;grid-template-columns:1fr 60px 60px 60px;gap:4px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px;align-items:center}
.mensile-row-slim{display:grid;grid-template-columns:1fr 90px;gap:4px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px;align-items:center}
.mensile-row:last-child{border-bottom:none}
.mensile-row.total{font-weight:600;background:#F8FAFC;font-size:13px}
.mensile-row .cat{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mensile-row .num{text-align:right;font-variant-numeric:tabular-nums}
.mensile-row .diff-pos{color:var(--success)}
.mensile-row .diff-neg{color:var(--danger)}
.quad-box{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:20px}
.quad-box h4{font-size:14px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.quad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quad-conto{border-radius:8px;padding:14px;border:1px solid var(--border)}
.quad-conto-title{font-size:12px;font-weight:500;color:var(--text2);text-transform:uppercase;margin-bottom:8px}
.quad-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px solid var(--border)}
.quad-row:last-child{border-bottom:none}
.quad-status{text-align:center;font-size:20px;margin-top:8px}

/* ── BUDGET ── */
.budget-table{width:100%;border-collapse:collapse;font-size:14px}
.budget-table th{padding:10px 10px;text-align:right;font-size:12px;color:var(--text2);border-bottom:2px solid var(--border);background:#F1F5F9}
.budget-table th:first-child{text-align:left}
.budget-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:right}
.budget-table td:first-child{text-align:left;font-weight:500}
.budget-table input{width:70px;padding:4px 6px;border:1px solid transparent;border-radius:4px;font-size:13px;text-align:right;font-family:inherit;background:transparent;outline:none}
.budget-table input:focus{border-color:var(--reddito);background:#fff}
.budget-section-header td{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:12px 10px 4px;color:var(--text2);background:#F8FAFC}

/* ── PROG SPESE ── */
.prog-table{width:100%;border-collapse:collapse;font-size:14px}
.prog-table th{padding:10px 12px;text-align:left;font-size:12px;color:var(--text2);border-bottom:2px solid var(--border);background:#F1F5F9;white-space:nowrap}
.prog-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.prog-stato-futura{background:#F0FDF4;color:#166534;padding:3px 8px;border-radius:12px;font-size:12px;font-weight:500}
.prog-stato-pagare{background:#FEF9C3;color:#854D0E;padding:3px 8px;border-radius:12px;font-size:12px;font-weight:500}
.prog-stato-pagata{background:#F1F5F9;color:#64748B;padding:3px 8px;border-radius:12px;font-size:12px;font-weight:500}

/* ── CATEGORIE ── */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-group-card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}
.cat-group-header{padding:12px 16px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.cat-group-header.reddito{background:#EFF6FF;color:var(--reddito)}
.cat-group-header.spese{background:#FEF2F2;color:var(--spese)}
.cat-group-header.debiti{background:#F5F3FF;color:var(--debiti)}
.cat-group-header.investimenti{background:#F0FDF4;color:var(--investimenti)}
.cat-item{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;border-bottom:1px solid var(--border);font-size:14px}
.cat-item:last-child{border-bottom:none}
.cat-item button{background:none;border:none;color:var(--text2);cursor:pointer;font-size:16px;padding:2px 4px;border-radius:4px;transition:.2s}
.cat-item button:hover{color:var(--danger);background:#FEF2F2}
.cat-add{padding:10px 16px;display:flex;gap:8px}
.cat-add input{flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit;outline:none}
.cat-add input:focus{border-color:var(--reddito)}

/* ── IMPOSTAZIONI ── */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.settings-section{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:24px}
.settings-section h3{font-size:16px;font-weight:600;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.setting-row:last-child{border-bottom:none}
.setting-row label{font-size:15px;font-weight:500}
.setting-row input{padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:15px;font-family:inherit;outline:none;width:160px;min-height:44px}
.setting-row input:focus{border-color:var(--reddito)}

/* ── PERSONALIZZAZIONI ── */
.color-pickers-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.color-picker-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.color-picker-item label{font-size:12px;color:var(--text2);font-weight:500;text-align:center}
.color-swatch{width:40px;height:40px;border-radius:8px;border:1px solid rgba(0,0,0,.1)}
.color-picker-item input[type=color]{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;cursor:pointer;padding:2px;opacity:0;position:absolute}
.color-picker-item{position:relative}
@media(max-width:600px){.color-pickers-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:400px){.color-pickers-grid{grid-template-columns:repeat(2,1fr)}}

/* ── IMPORTA ── */
.import-area{border:2px dashed var(--border);border-radius:var(--radius);padding:40px;text-align:center;cursor:pointer;transition:.2s}
.import-area:hover{border-color:var(--reddito);background:#FEF2F2}
.import-area p{color:var(--text2);font-size:15px;margin-top:8px}

/* ── MOBILE TOGGLE ── */
#nav-toggle{display:none;position:fixed;top:12px;left:12px;z-index:150;background:var(--text);color:#fff;border:none;border-radius:8px;width:44px;height:44px;font-size:20px;cursor:pointer}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  :root{--nav-w:0px}
  #nav{transform:translateX(-220px);width:220px}
  #nav.open{transform:translateX(0)}
  #main{margin-left:0;padding:16px;padding-top:60px}
  #nav-toggle{display:flex;align-items:center;justify-content:center}
  .nav-overlay.open{display:block}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .chart-row{grid-template-columns:1fr}
  .mensile-grid{grid-template-columns:1fr 1fr}
  .quad-grid{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .settings-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .bar-row{grid-template-columns:90px 1fr 65px}
}
@media(max-width:600px){
  .kpi-grid{grid-template-columns:1fr}
  .mensile-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .quad-grid{grid-template-columns:1fr}
  /* Su mobile nasconde la colonna Budget e riduce le colonne */
  .mensile-row{grid-template-columns:1fr 70px 58px}
  .mensile-col-header{grid-template-columns:1fr 70px 58px}
  .num-budget{display:none}
  .bar-row{grid-template-columns:80px 1fr 60px}
  .filters{gap:8px}
  .filters select,.filters input[type=text]{font-size:14px;padding:7px 10px}
}
@media(max-width:480px){
  #main{padding:10px;padding-top:54px}
  .page-header h2{font-size:22px}
  .kpi{padding:14px 16px}
  .kpi .val{font-size:20px}
  .mese-tab{padding:6px 10px;font-size:13px}
  .chart-box{padding:12px}
  .form-modal{padding:20px}
  thead th{padding:8px 10px;font-size:11px}
  tbody td{padding:8px 10px;font-size:14px}
}

/* ── PROGRAMMATE NEL MESE ── */
.prog-section{border-top:1px dashed var(--border)}
.prog-section-header{padding:5px 12px;font-size:11px;font-weight:600;color:var(--warning);text-transform:uppercase;letter-spacing:.05em;background:rgba(217,119,6,.05)}
.mensile-row-prog{opacity:.8;background:rgba(217,119,6,.04);border-bottom:1px dashed var(--border)!important}
.mensile-row-prog .cat{color:var(--text2);font-style:italic}
.prog-date{font-size:10px;color:var(--text2);margin-right:4px;font-style:normal}
.prog-num{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.btn-confirma-prog{font-size:11px;padding:1px 5px;border:1px solid var(--border);border-radius:4px;background:#fff;cursor:pointer;font-family:inherit;color:var(--text2);line-height:1.5;flex-shrink:0}
.btn-confirma-prog:hover{background:var(--investimenti);color:#fff;border-color:var(--investimenti)}
.prog-totale-proiettato{font-weight:600;background:#FEF3C7;color:#92400E;border-top:1px solid #FDE68A}

/* ── MESE NAV ── */
.mese-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px}
.mese-tab{padding:8px 14px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text2);transition:.2s}
.mese-tab.active{background:var(--reddito);color:#fff;border-color:var(--reddito)}
.mese-tab:hover:not(.active){background:#F1F5F9}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:48px 24px;color:var(--text2)}
.empty .icon{font-size:40px;margin-bottom:12px}
.empty p{font-size:15px}

/* ── AMOUNT COLORS ── */
.amt-in{color:var(--reddito);font-weight:600}
.amt-out{color:var(--spese);font-weight:600}
.amt-debt{color:var(--debiti);font-weight:600}
.amt-inv{color:var(--investimenti);font-weight:600}
.amt-giro{color:#0369A1;font-weight:600}

/* ── ICONE ── */
.ic{flex-shrink:0;vertical-align:-.2em}
[data-ic]{display:inline-flex;align-items:center;vertical-align:middle;line-height:0}
.q-ok{color:var(--success)}
.q-ko{color:var(--danger)}
.toast{display:flex;align-items:flex-start;gap:8px}
.toast-ic{display:inline-flex;margin-top:1px}

/* ── SELETTORE ANNO (menu) ── */
.anno-box{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.1)}
.anno-title{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.anno-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.anno-chip{padding:4px 10px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);transition:.2s}
.anno-chip.active{background:var(--oro);color:#000}
.anno-tools{display:flex;gap:4px;align-items:center}
.anno-input{width:68px;padding:4px 6px;border-radius:5px;font-size:12px;border:1px dashed rgba(255,255,255,.35);background:rgba(255,255,255,.05);color:rgba(255,255,255,.85);outline:none;font-family:inherit}
.anno-add,.anno-del{padding:4px 10px;border-radius:5px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center}
.anno-add{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
.anno-del{padding:4px 8px;border:1px solid rgba(192,57,43,.5);background:rgba(192,57,43,.2);color:#ff8a80}

/* ── SELETTORE STILE ── */
.stile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stile-tile{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:6px;padding:10px;text-align:left;font-family:inherit;color:var(--text);background:transparent;border:2px solid var(--border);border-radius:14px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.stile-tile:hover{border-color:var(--text2)}
.stile-tile.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.stile-tile .nm{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-size:15px;font-weight:600}
.stile-tile .ds{font-size:12px;line-height:1.35;color:var(--text2)}
.stile-ck{display:inline-flex;color:var(--accent)}
.stile-nota{margin-top:12px;font-size:13px;color:var(--text2)}
.stile-prev{display:flex;width:100%;box-sizing:border-box;gap:6px;height:96px;padding:7px;border-radius:9px;overflow:hidden}
.stile-prev .p-nav{width:20%;border-radius:6px}
.stile-prev .p-main{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.stile-prev .p-h{display:block;height:7px;width:50%;border-radius:4px}
.stile-prev .p-row{display:flex;gap:5px;flex:1}
.stile-prev .p-row span{flex:1;border-radius:6px}
.stile-prev .p-wide{display:block;height:28%;border-radius:6px}
.prev-classico{background:#F8FAFC;border:1px solid #E2E8F0}
.prev-classico .p-nav,.prev-classico .p-h{background:#0C0C2C}
.prev-classico .p-row span,.prev-classico .p-wide{background:#FFFFFF;border:1px solid #E2E8F0}
.prev-classico .p-row span:first-child{border-left:3px solid #004561}
.prev-glass{background:radial-gradient(70% 90% at 15% 0%,rgba(99,102,241,.55),transparent 70%),radial-gradient(60% 80% at 100% 10%,rgba(34,211,238,.35),transparent 70%),#080a12;border:1px solid rgba(255,255,255,.1)}
.prev-glass .p-nav{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14)}
.prev-glass .p-h{background:linear-gradient(90deg,#fff,#aab4ff)}
.prev-glass .p-row span,.prev-glass .p-wide{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.prev-bento{background:#09090b;border:1px solid #26262c}
.prev-bento .p-nav{width:11%;background:#131316;border:1px solid #26262c;border-radius:99px}
.prev-bento .p-h{background:#f4f4ef}
.prev-bento .p-row span,.prev-bento .p-wide{background:#131316;border:1px solid #26262c;border-radius:9px}
.prev-bento .p-row span:first-child{background:#d4ff3a;border-color:#d4ff3a}
@media(max-width:700px){.stile-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.bar-fill,.month-bar,.toast{transition:none;animation:none}}

/* scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:3px}