:root{
  --teal:#51A8B1; --teal-700:#3B8E96; --lime:#A8CF4F; --bg:#F4F7F8; --ink:#334155; --muted:#6B7280;
  --surface:#FFFFFF; --accent-fill:#E9F4F6; --accent-stroke:#D8EDEF;
  --radius:12px; --shadow:0 2px 6px rgba(16,24,40,.06);
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--ink); }
.header{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; background:var(--surface); box-shadow:var(--shadow); border-bottom:3px solid var(--lime); }
.brand{ display:flex; align-items:center; gap:16px; } .brand-logo{ height:120px; width:auto; display:block; }
.app-title{ margin:0; font-size:24px; font-weight:800; letter-spacing:.5px; color:var(--teal); text-transform:uppercase; }
.controls{ display:flex; align-items:center; gap:10px; }
.month-select{ padding:10px 12px; border:1px solid var(--accent-stroke); border-radius:10px; background:var(--surface); font-size:14px; color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s; }
.month-select:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(81,168,177,.2); }
.print-btn{ padding:10px 16px; background:var(--teal); color:#fff; border:none; border-radius:10px; font-weight:700; cursor:pointer; transition:transform .05s ease, background-color .2s ease; }
.print-btn:hover{ background:var(--teal-700); } .print-btn:active{ transform:translateY(1px); }
.table-container{ margin:20px 16px 32px; overflow-x:auto; }
table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
thead th{ position:sticky; top:0; z-index:5; background:var(--surface); text-align:center; font-weight:900; padding:14px 16px; font-size:14px; color:#0f172a; border-bottom:1px solid var(--accent-stroke); }
tbody tr{ background:var(--surface); box-shadow:var(--shadow); border-radius:10px; }
tbody td{ padding:12px 16px; vertical-align:middle; border-top:1px solid rgba(0,0,0,0); }
tbody tr:hover{ box-shadow:0 4px 10px rgba(16,24,40,.08); }
tbody tr td:first-child{ font-weight:600; }
input.amount{ width:120px; padding:8px 6px; border:none; background:var(--accent-fill); border-radius:8px; text-align:right; font-weight:600; color:#0f172a; }
input.amount:disabled{ color:#0f172a; background:var(--accent-fill); }
.download-btn{ padding:9px 14px; border:1px solid var(--accent-stroke); border-radius:10px; background:linear-gradient(#fff,#fbfeff); color:var(--teal-700); cursor:pointer; font-size:13px; font-weight:700; transition:box-shadow .2s, border-color .2s, transform .05s; }
.download-btn:hover{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(81,168,177,.15); } .download-btn:active{ transform:translateY(1px); }
.total-row{ background:#F1FAF3; }
.total-row td{ font-weight:800; padding-top:16px; border-top:3px solid var(--teal); }
.total-row td:first-child{ font-size:1.05rem; color:#0f172a; }
.total-row td .amount{ background:#E6F7F2; color:#0f172a; }
.chart-wrapper{ margin:16px auto 32px; max-width:1200px; padding:0 16px; }
.chart-grid{ display:grid; grid-template-columns:minmax(300px,1fr) 380px; gap:16px; align-items:start; }
.chart-box{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; border-left:6px solid var(--lime); }
.chart-title{ color:var(--teal); font-size:22px; margin:0 0 8px 0; text-align:center; font-weight:800; letter-spacing:.5px; }
#chart{ max-width:900px; max-height:400px; width:100%; }
.insight-panel{ display:flex; flex-direction:column; gap:16px; }
.card{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; border-top:4px solid var(--teal); }
.card h3{ margin:0 0 10px 0; font-size:16px; color:#0f172a; font-weight:800; letter-spacing:.2px; }
.muted{ color:var(--muted); font-size:12px; margin-top:4px; }
.stats-table, .cmp-table{ width:100%; border-collapse:collapse; }
.stats-table td, .cmp-table td, .cmp-table th{ padding:8px 6px; border-bottom:1px solid #EEF2F7; font-size:12px; }
.stats-table td.right{ text-align:right; }
.cmp-table th{ text-align:left; font-weight:700; background:#F9FBFF; }
.delta{ font-weight:700; } .delta.up{ color:#16a34a; } .delta.down{ color:#e11d48; } .delta.flat{ color:#64748b; }
@media (max-width:980px){ .chart-grid{ grid-template-columns:1fr; } .controls{ flex-wrap:wrap; justify-content:flex-end; } }
@media (max-width:600px){ thead{ display:none; } tbody tr{ display:block; margin-bottom:12px; } tbody td{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; } tbody td::before{ content:attr(data-label); font-weight:700; color:#0f172a; } .brand-logo{ height:48px; } .app-title{ font-size:18px; } }
@media print{
  @page { size:A4 landscape; margin:12mm; }
  html,body{ background:#fff !important; font-size:11px !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .header, .controls, .download-btn{ display:none !important; }
  .chart-wrapper{ display:block !important; margin:0 !important; padding:0 !important; }
  .chart-grid{ display:block !important; }
  .chart-box{ border:1px solid #e5e7eb !important; box-shadow:none !important; }
  #chart{ display:none !important; }
  .insight-panel, .card{ display:block !important; break-inside:avoid; page-break-inside:avoid; border:1px solid #e5e7eb !important; box-shadow:none !important; }
  .table-container{ margin:0 !important; overflow:visible !important; }
  table{ width:100% !important; border-spacing:0 !important; table-layout:auto !important; }
  thead{ display:table-header-group !important; }
  thead th{ position:static !important; box-shadow:none !important; border-bottom:1px solid #e5e7eb !important; }
  tbody tr{ box-shadow:none !important; border:1px solid #e5e7eb !important; }
  tr, td, th{ page-break-inside:avoid !important; break-inside:avoid !important; }
  .total-row td{ border-top:2px solid #51A8B1 !important; }
  .chart-title, .app-title{ color:#000 !important; }
}