:root{
  --brand: #2ea3b8;
  --bg: #f6fbfc;
  --card: #ffffff;
  --muted: #666;
}

*{box-sizing:border-box;font-family:Inter,Arial,Helvetica,sans-serif}
body{margin:0;background:linear-gradient(180deg,#f2fbfc, #eef7f8);color:#222}
.container{max-width:1100px;margin:20px auto;padding:0 16px}
.topbar{background:var(--brand);color:#fff;padding:14px 0}
.topbar .container{display:flex;justify-content:space-between;align-items:center}
.topbar a.logo{color:#fff;text-decoration:none;font-weight:700}
.topbar nav a{color:#fff;margin-left:16px;text-decoration:none}
h1,h2,h3{margin:8px 0}
h2{color: #2ea3b8;}
.btn{background:var(--brand);color:#fff;padding:8px 12px;border-radius:8px;text-decoration:none}
.filters{display:flex;gap:12px;align-items:center;margin:12px 0}
.filters select, .filters button{padding:6px 8px;border-radius:6px;border:1px solid #ccc}
.kpis, .kpis2{display:flex;gap:12px;margin:12px 0}
.kpi{background:var(--card);padding:12px;border-radius:10px;flex:1;box-shadow:0 1px 4px rgba(0,0,0,0.06);text-align:center}
.kpi div{font-size:28px;font-weight:700;color:var(--brand)}
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.chart-card{background:var(--card);padding:12px;border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,0.06)}
form{display:flex;flex-direction:column;gap:8px;max-width:420px}
form label{display:flex;flex-direction:column;font-size:14px}
.error{background:#ffdede;padding:8px;border-radius:6px;color:#900}
.footer{padding:12px;text-align:center;color:#555;margin-top:24px}
@media(max-width:800px){
  .charts-grid{grid-template-columns:1fr}
  .kpis, .kpis2{flex-direction:column}
}