:root{
  --bg:#f7fbfc;
  --card:#ffffff;
  --accent:#236b56;
  --muted:#6b7280;
  --glass: rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,system-ui,Arial;}
.wrap{max-width:1100px;margin:0 auto;padding:1rem;}

.site-header{background:linear-gradient(90deg,#2f7a5f,#1f5f49);color:#fff;padding:1.25rem 0;margin-bottom:1rem;}
.site-header h1{margin:0;font-size:1.4rem;}
.tagline{opacity:0.95;margin-top:0.25rem;font-size:0.95rem;}

.main{display:block;gap:1rem;padding-bottom:2rem;}
.controls{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 4px 18px var(--glass);margin-bottom:1rem;}
.controls h2{margin-top:0;}
.row{display:flex;flex-wrap:wrap;gap:0.8rem;align-items:center;}
label{display:flex;gap:0.5rem;align-items:center;font-size:0.95rem;color:var(--muted);}
input[type="number"]{width:80px;padding:6px;border-radius:6px;border:1px solid #ddd;}
select{padding:6px;border-radius:6px;border:1px solid #ddd;}
input[type="range"]{width:160px;}
.primary{background:var(--accent);color:white;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;box-shadow:0 6px 14px rgba(35,107,86,0.18);}
.secondary{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:8px 12px;border-radius:8px;cursor:pointer;}
.primary:hover{filter:brightness(1.03)}
.note{color:var(--muted);margin-top:0.6rem;font-size:0.9rem;}

.visuals{display:flex;flex-direction:column;gap:1rem;}
.chart-card{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 6px 18px var(--glass);}
.chart-row{display:flex;gap:1rem;}
.chart-card.small{flex:1;min-width:240px;padding:0.8rem;}
.chart-card canvas{max-width:100%;height:240px;}

.table-card{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 6px 18px var(--glass);overflow:auto;}
#tableWrap{max-height:280px;overflow:auto;border-radius:6px;border:1px solid #eef2f6;padding:8px;}

table{width:100%;border-collapse:collapse;font-size:0.9rem;}
th,td{padding:8px 10px;border-bottom:1px solid #f1f5f9;text-align:left;}
th{background:#f8fafc;position:sticky;top:0;}

.about{margin-top:1rem;color:var(--muted);padding:0.8rem;font-size:0.95rem;}

.site-footer{padding:1rem 0;margin-top:1rem;background:transparent;color:var(--muted);text-align:center;}
@media (max-width:900px){
  .row{flex-direction:column;align-items:flex-start}
  .chart-row{flex-direction:column;}
  .chart-card canvas{height:200px}
}