/* ============================================================
   ILTUOCLIC — CONTABILITÀ
   Foglio di stile condiviso da TUTTE le pagine dell'app.
   Per cambiare colori, larghezze, spaziature o lo stile del
   menu su tutte le pagine insieme, si modifica SOLO questo file.
   ============================================================ */

:root{
  /* Colori brand (Pantone 293C blu, 1495C arancione) */
  --blue:#0033A0;
  --blue-dark:#001F66;
  --blue-tint:#EAF0FB;
  --orange:#F7941D;
  --orange-tint:#FFF2E0;
  --bg:#F4F5F8;
  --surface:#FFFFFF;
  --text:#1C2430;
  --text-muted:#707A8A;
  --red:#D6455A;
  --red-tint:#FDEEF0;
  --green:#1D8A4E;
  --green-tint:#E8F6EE;
  --border:#E5E8EE;
  --radius:10px;

  /* Larghezza massima del contenuto: UNICA per tutte le pagine */
  --app-max-width:1320px;
}

*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter', sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
.hidden{display:none !important;}

/* ============================================================
   LOGIN
   ============================================================ */
.login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-box{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; max-width:380px; width:100%; text-align:center;}
.login-box .logo-img{height:44px; width:auto; margin-bottom:18px;}
.login-box p{font-size:13px; color:var(--text-muted); margin-bottom:18px;}
.login-box label{display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin:12px 0 5px; text-transform:uppercase; text-align:left;}
.login-box input{width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:'Inter'; outline:none;}
.login-box input:focus{border-color:var(--blue);}
.login-box button{width:100%; margin-top:16px; background:var(--blue); color:#fff; border:none; border-radius:8px; padding:12px; font-weight:700; font-size:14px; cursor:pointer; font-family:'Inter';}
.login-box button:hover{background:var(--blue-dark);}
.login-box .err{margin-top:12px; font-size:13px; color:var(--red); display:none;}

/* ============================================================
   LAYOUT GENERALE
   ============================================================ */
.app{max-width:var(--app-max-width); margin:0 auto; padding-bottom:60px;}

/* ============================================================
   HEADER / MENU — identico su ogni pagina, fisso in alto
   ============================================================ */
header{
  background:#fff; border-bottom:1px solid var(--border); color:var(--text);
  padding:14px 28px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  position:sticky; top:0; z-index:60;
}
.brand{display:flex; align-items:center; gap:12px;}
.logo-img{height:44px; width:auto; display:block;}

nav.tabs{display:flex; gap:4px; background:var(--bg); padding:4px; border-radius:999px; flex-wrap:wrap;}
nav.tabs a{
  padding:8px 18px; font-size:13px; font-weight:600; color:var(--blue-dark);
  text-decoration:none; border-radius:999px; transition:.15s; font-family:'Inter'; white-space:nowrap;
}
nav.tabs a:hover{background:var(--blue-tint);}
nav.tabs a.active{background:var(--orange); color:#fff;}

.top-user{display:flex; align-items:center; gap:10px; margin-left:auto;}
.top-user button{background:var(--bg); border:1px solid var(--border); color:var(--text-muted); font-size:12px; padding:7px 14px; border-radius:999px; cursor:pointer; font-family:'Inter'; font-weight:600;}
.top-user button:hover{background:var(--red-tint); color:var(--red); border-color:var(--red-tint);}
.top-user .u-email{font-size:12px; color:var(--text-muted);}

.quicklinks{display:flex; align-items:center; gap:6px; padding-right:10px; border-right:1px solid var(--border); margin-right:4px;}
.quicklink{width:32px; height:32px; border-radius:8px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted); text-decoration:none; transition:.15s;}
.quicklink:hover{background:var(--blue-tint); color:var(--blue-dark); border-color:var(--blue-tint);}

@media (max-width: 900px){ nav.tabs{order:3; width:100%; justify-content:center;} }

/* ============================================================
   TITOLO PAGINA
   ============================================================ */
.page-title{padding:22px 18px 4px; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.page-title h1{font-family:'Oswald'; font-weight:600; font-size:26px; text-transform:uppercase; letter-spacing:0.5px;}
.page-title .badge{font-size:12px; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:5px 12px; border-radius:999px;}
.page-sub{padding:0 18px 18px; font-size:13px; color:var(--text-muted); max-width:720px;}

/* ============================================================
   TOOLBAR / FILTERBAR — barra ricerca + filtri, sopra le liste
   (".filterbar" e ".toolbar" sono alias equivalenti)
   ============================================================ */
.toolbar, .filterbar{
  margin:0 18px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.search{flex:1 1 220px; display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:8px; padding:9px 12px; background:var(--bg);}
.search input{border:none; background:transparent; outline:none; font-size:13.5px; width:100%; font-family:'Inter'; color:var(--text);}
.search svg{flex-shrink:0; opacity:.5;}

.chip{display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:8px; padding:9px 14px; font-size:13px; font-weight:500; color:var(--text); background:var(--surface); cursor:pointer; white-space:nowrap;}
.chip.filled{background:var(--blue-tint); border-color:var(--blue); color:var(--blue-dark); font-weight:600;}
.chip .count{background:var(--blue); color:#fff; font-size:10.5px; padding:1px 6px; border-radius:999px; font-weight:700;}

.btn-new{background:var(--orange); color:#fff; border:none; border-radius:8px; padding:10px 18px; font-weight:700; font-size:13.5px; cursor:pointer; font-family:'Inter'; white-space:nowrap;}
.btn-new:hover{background:#DD8410;}
.btn-reset{margin-left:auto; font-size:12.5px; color:var(--text-muted); background:none; border:none; cursor:pointer; text-decoration:underline; font-family:'Inter'; font-weight:500;}
.btn-reset:hover{color:var(--red);}
.toggle-inactive{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted); cursor:pointer; white-space:nowrap;}

/* Pannello filtri di colonna — vedi app.js (openMultiSelectFilter / openDateRangeFilter) */
/* Ancorato con position:fixed direttamente su <body>, quindi non serve piu' un contenitore relative */
.cf-panel{
  position:fixed; z-index:200; background:#fff; border:2px solid var(--blue); border-radius:10px;
  box-shadow:0 12px 32px rgba(15,25,50,0.22); width:260px; max-height:min(400px, 70vh); display:flex; flex-direction:column;
}
.cf-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  border-bottom:1px solid var(--border); background:var(--blue-tint); border-radius:8px 8px 0 0;
}
.cf-title{font-size:12.5px; font-weight:700; color:var(--blue-dark); text-transform:uppercase; letter-spacing:.3px;}
.cf-apply{background:var(--blue); color:#fff; border:none; padding:6px 14px; border-radius:6px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:'Inter'; white-space:nowrap;}
.cf-apply:hover{background:var(--blue-dark);}
.cf-search{margin:8px 10px 0; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:'Inter';}
.cf-list{padding:6px; overflow-y:auto; flex:1;}
.cf-item{display:flex; align-items:center; gap:9px; padding:8px 9px; font-size:13.5px; border-radius:6px; cursor:pointer;}
.cf-item:hover{background:var(--bg);}
.cf-item input[type=checkbox]{accent-color:var(--blue); width:16px; height:16px; cursor:pointer;}
.cf-empty{padding:14px; text-align:center; color:var(--text-muted); font-size:12.5px;}
.cf-footer{padding:8px 10px; border-top:1px solid var(--border);}
.cf-clear{width:100%; background:var(--bg); color:var(--text-muted); border:none; padding:8px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; font-family:'Inter';}
.cf-clear:hover{background:var(--red-tint); color:var(--red);}
.cf-date-row{display:flex; align-items:center; gap:8px; padding:10px 12px 0;}
.cf-date-label{font-size:12.5px; color:var(--text-muted); width:34px; flex-shrink:0;}
.cf-date-row input[type=date]{flex:1; padding:7px 8px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:'Inter';}

/* Pillole dei filtri attivi, sotto la barra di ricerca */
.active-filters{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 18px 14px; min-height:1px;}
.active-filters:empty{margin:0; display:none;}
.af-chip{display:flex; align-items:center; gap:6px; background:var(--blue-tint); color:var(--blue-dark); border:1px solid var(--blue); border-radius:999px; padding:5px 8px 5px 12px; font-size:12px; font-weight:600;}
.af-chip button{background:none; border:none; color:var(--blue-dark); cursor:pointer; width:16px; height:16px; display:flex; align-items:center; justify-content:center; border-radius:50%; padding:0;}
.af-chip button:hover{background:var(--blue); color:#fff;}
.af-chip-all{font-size:12px; color:var(--text-muted); text-decoration:underline; cursor:pointer; background:none; border:none; font-family:'Inter';}

/* ============================================================
   CARD DI RIEPILOGO (usate in Movimenti, Da Incassare, Confronto anni)
   ============================================================ */
.cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; padding:6px 18px 18px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; position:relative; overflow:hidden;}
.card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px;}
.card.entrate::before, .card.fatt::before{background:var(--blue);}
.card.uscite::before{background:var(--red);}
.card.netto::before, .card.tot::before{background:var(--orange);}
.card.attesa::before, .card.nonfatt::before{background:var(--text-muted);}
.card.scaduto::before{background:var(--red);}
.card .label{font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px; font-weight:600; margin-bottom:6px;}
.card .value{font-family:'Oswald'; font-size:24px; font-weight:600; white-space:nowrap;}
.card.entrate .value, .card.fatt .value{color:var(--blue);}
.card.uscite .value, .card.scaduto .value{color:var(--red);}
.card.netto .value, .card.tot .value{color:var(--orange);}
.card .sub{font-size:11.5px; color:var(--text-muted); margin-top:4px;}
.trend{font-weight:600;}
.trend.up{color:#1D8A4E;}
.trend.down{color:var(--red);}

@media (max-width: 900px){ .cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 600px){ .cards{grid-template-columns:1fr;} }

/* ============================================================
   SELETTORE ANNO (Movimenti, Confronto anni)
   ============================================================ */
.year-selector{display:flex; align-items:center; gap:12px; padding:14px 18px 0; flex-wrap:wrap;}
.year-label{font-size:12.5px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px;}
.year-pills{display:flex; gap:6px; flex-wrap:wrap;}
.year-pill{
  font-family:'Oswald'; font-size:13px; font-weight:600; letter-spacing:0.3px;
  padding:7px 16px; border-radius:999px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-muted); cursor:pointer; transition:.15s;
}
.year-pill:hover{border-color:var(--blue); color:var(--blue);}
.year-pill.active{background:var(--blue); border-color:var(--blue); color:#fff;}
.year-pill.current::after{content:'●'; color:var(--orange); font-size:8px; margin-left:5px; vertical-align:middle;}

/* ============================================================
   TABELLE
   ============================================================ */
.table-wrap{margin:0 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:visible;}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px;}
thead th{
  background:var(--bg); text-align:left; padding:11px 14px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; font-size:11px; letter-spacing:0.4px; border-bottom:1px solid var(--border); white-space:nowrap;
  position:sticky; top:73px; z-index:30;
}
thead th:first-child{border-top-left-radius:var(--radius);}
thead th:last-child{border-top-right-radius:var(--radius);}
thead th .th-inner{display:flex; align-items:center; gap:6px;}
thead th svg.filter-icon{
  cursor:pointer; opacity:.6; flex-shrink:0; padding:5px; margin:-5px; border-radius:5px;
  border:1px solid transparent; transition:.12s; box-sizing:content-box;
}
thead th svg.filter-icon:hover{opacity:1; color:var(--blue); background:var(--blue-tint); border-color:var(--blue-tint);}
thead th svg.filter-icon.active{opacity:1; color:#fff; background:var(--blue); border-color:var(--blue);}
thead th svg.filter-icon.filtered:not(.active){opacity:1; color:var(--blue-dark); background:var(--blue-tint); border-color:var(--blue);}
tbody tr{background:var(--surface);}
tbody td{padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle;}
tbody tr:hover{background:var(--blue-tint);}
tbody tr:last-child td{border-bottom:none;}
.table-foot{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; font-size:12.5px; color:var(--text-muted); border-top:1px solid var(--border); border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius);}
.loading-row{padding:40px; text-align:center; color:var(--text-muted); font-size:13px;}

.amount{font-family:'Inter'; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.amount.pos{color:var(--blue);}
.amount.neg, .amount.red{color:var(--red);}
.amount.muted{color:var(--text-muted); font-weight:600;}

.pill{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600;}
.pill.cat{background:var(--orange-tint); color:#B15E00;}
.pill.sub{background:var(--bg); color:var(--text-muted); border:1px solid var(--border); margin-left:4px;}
.pill.cliente{background:var(--blue-tint); color:var(--blue-dark);}
.pill.fornitore{background:var(--orange-tint); color:#B15E00;}
.muted{color:var(--text-muted);}

.fatt-badge{font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; display:inline-block;}
.fatt-badge.linked{background:var(--blue-tint); color:var(--blue-dark);}
.fatt-badge.none{color:var(--text-muted); font-style:italic; font-weight:400; background:var(--bg); border:1px solid var(--border);}

.stato-pill{font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px;}
.stato-pill.saldato{background:var(--green-tint); color:var(--green);}
.stato-pill.parziale{background:var(--orange-tint); color:#B15E00;}
.stato-pill.non-incassato{background:var(--red-tint); color:var(--red);}
.stato-pill.annullata{background:var(--bg); color:var(--text-muted);}
.stato-pill.nota-credito{background:#F3E8FF; color:#7C3AED;}
.tipo-badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; display:inline-block;}
.tipo-badge.fattura{background:var(--blue-tint); color:var(--blue-dark);}
.tipo-badge.nota{background:var(--red-tint); color:var(--red);}
tr.riga-nota{background:#FDFAF5;}
.stato-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

.giorni{font-size:12px; color:var(--text-muted);}
.giorni.alert{color:var(--red); font-weight:700;}
.progress-bar{width:70px; height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:4px;}
.progress-bar-fill{height:100%; background:var(--blue);}

.tipo-dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;}
.tipo-dot.entrata{background:var(--blue);}
.tipo-dot.uscita{background:var(--red);}

.row-actions{display:flex; gap:6px; justify-content:center;}
.row-actions button{
  width:28px; height:28px; border:1px solid var(--border); border-radius:6px; background:var(--surface);
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:.15s;
}
.row-actions .btn-edit:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-tint);}
.row-actions .btn-delete:hover{border-color:var(--red); color:var(--red); background:var(--red-tint);}

@media (max-width: 600px){
  thead{display:none;}
  table, tbody, tr, td{display:block; width:100%;}
  tbody tr{border-bottom:6px solid var(--bg); padding:10px 0;}
  tbody td{display:flex; justify-content:space-between; align-items:center; border-bottom:none; padding:6px 14px;}
  tbody td::before{content:attr(data-label); font-weight:600; color:var(--text-muted); font-size:11px; text-transform:uppercase;}
  .amount{text-align:right;}
}

/* ============================================================
   PAGINA CATEGORIE — schede pieghevoli
   ============================================================ */
.cat-list{padding:0 18px; display:flex; flex-direction:column; gap:12px;}
.cat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.cat-card.inactive{opacity:.55;}
.cat-head{display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--bg); border-bottom:1px solid var(--border); cursor:pointer;}
.cat-head .chev{transition:.2s; flex-shrink:0; color:var(--text-muted);}
.cat-card.open .cat-head .chev{transform:rotate(90deg);}
.cat-head .name{font-family:'Oswald'; font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:0.3px; flex:1;}
.cat-head .count{font-size:11.5px; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:3px 9px; border-radius:999px;}
.cat-head .inactive-badge{font-size:10.5px; font-weight:700; color:var(--text-muted); background:var(--border); padding:3px 8px; border-radius:999px; text-transform:uppercase;}
.cat-actions{display:flex; gap:6px;}
.cat-actions button{width:28px; height:28px; border:1px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:.15s;}
.cat-actions .btn-edit:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-tint);}
.cat-actions .btn-delete:hover{border-color:var(--red); color:var(--red); background:var(--red-tint);}

.cat-body{padding:14px 16px; display:none;}
.cat-card.open .cat-body{display:block;}
.sub-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.sub-chip{display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:5px 6px 5px 12px; font-size:12.5px;}
.sub-chip.inactive{opacity:.5;}
.sub-chip .sub-name{color:var(--text);}
.sub-chip button{width:20px; height:20px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); border-radius:50%;}
.sub-chip button:hover{background:var(--border); color:var(--text);}
.add-sub-btn{font-size:12.5px; color:var(--blue); background:var(--blue-tint); border:1px dashed var(--blue); border-radius:999px; padding:6px 14px; cursor:pointer; font-family:'Inter'; font-weight:600;}
.add-sub-btn:hover{background:var(--blue); color:#fff;}

/* ============================================================
   BANNER / NOTE
   ============================================================ */
.note{margin:0 18px 16px; font-size:12.5px; color:#B15E00; background:var(--orange-tint); border:1px dashed var(--orange); border-radius:8px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.note b{color:#B15E00;}
.note button{background:var(--orange); color:#fff; border:none; border-radius:6px; padding:8px 16px; font-weight:700; font-size:12.5px; cursor:pointer; font-family:'Inter'; white-space:nowrap;}

/* ============================================================
   MODALE (usato per tutti i form: nuovo/modifica record)
   ============================================================ */
.modal-overlay{position:fixed; inset:0; background:rgba(15,20,32,0.5); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface); border-radius:var(--radius); width:100%; max-width:480px; max-height:90vh; overflow-y:auto; padding:26px;}
.modal h2{font-family:'Oswald'; font-size:19px; text-transform:uppercase; margin-bottom:16px;}
.modal label{display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin:12px 0 5px; text-transform:uppercase;}
.modal input, .modal select{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:'Inter'; outline:none; background:#fff;}
.modal input:focus, .modal select:focus{border-color:var(--blue);}
.form-row{display:flex; gap:10px;}
.form-row > div{flex:1;}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-top:14px;}
.checkbox-row input{width:auto;}
.checkbox-row label{margin:0; text-transform:none; font-size:13px; color:var(--text);}

.tipo-toggle, .fatt-toggle{display:flex; gap:8px; margin-top:5px;}
.tipo-toggle button, .fatt-toggle button{flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); font-family:'Inter'; font-weight:700; font-size:13px; cursor:pointer; color:var(--text-muted);}
.tipo-toggle button.sel-entrata, .tipo-toggle button.sel-cliente, .fatt-toggle button.sel{background:var(--blue-tint); border-color:var(--blue); color:var(--blue-dark);}
.tipo-toggle button.sel-uscita, .tipo-toggle button.sel-fornitore{background:var(--red-tint); border-color:var(--red); color:var(--red);}
.chart-serie-btn.sel{background:var(--blue); border-color:var(--blue); color:#fff;}

.modal-actions{display:flex; gap:10px; margin-top:22px;}
.modal-actions button{flex:1; padding:12px; border-radius:8px; font-weight:700; font-size:14px; cursor:pointer; font-family:'Inter'; border:none;}
.btn-cancel{background:var(--bg); color:var(--text-muted);}
.btn-save{background:var(--orange); color:#fff;}
.btn-save:hover{background:#DD8410;}
.btn-save:disabled{opacity:.5; cursor:not-allowed;}
.modal-status{margin-top:12px; font-size:13px; padding:10px 12px; border-radius:8px; display:none;}
.modal-status.ok{background:var(--green-tint); color:var(--green); display:block;}
.modal-status.err{background:var(--red-tint); color:var(--red); display:block;}

/* ============================================================
   PULSANTE FLOTTANTE "+ NUOVO"
   ============================================================ */
.fab{position:fixed; bottom:26px; right:26px; background:var(--orange); color:#fff; border:none; border-radius:999px; padding:14px 22px; font-weight:700; font-size:14px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.2); font-family:'Inter'; z-index:40;}
.fab:hover{background:#DD8410;}

/* ============================================================
   GRAFICI (Confronto anni)
   ============================================================ */
.chart-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin:0 18px 18px; padding:20px;}
.chart-card h3{font-family:'Oswald'; font-size:15px; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:4px;}
.chart-card .chart-desc{font-size:12px; color:var(--text-muted); margin-bottom:14px;}
.chart-container{position:relative; height:300px;}
.charts-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 18px 18px;}
.charts-row .chart-card{margin:0;}
@media (max-width: 900px){ .charts-row{grid-template-columns:1fr;} }