:root{
  --bg:#f4efe3;
  --card:#fffdf8;
  --ink:#17251d;
  --muted:#6f786f;
  --line:#ddd7c9;
  --blue:#245f86;
  --blue2:#2d82b5;
  --green:#587a49;
  --soft:#eef3ea;
  --danger:#a23b3b;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.hero{
  background:linear-gradient(135deg,#1d5578,#2e83b4);
  color:white;
  padding:22px 18px;
}
.hero-inner{
  max-width:1240px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:18px;
}
.logo{
  width:70px;
  height:70px;
  border-radius:16px;
  object-fit:contain;
  background:white;
  padding:7px;
}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.14em;opacity:.9}
h1{margin:4px 0 2px;font-size:30px}
.hero p{margin:0;opacity:.9}
.hero-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.btn{
  border:0;
  border-radius:11px;
  padding:12px 16px;
  font-weight:900;
  cursor:pointer;
  background:white;
  color:var(--blue);
}
.btn.secondary{background:rgba(255,255,255,.15);color:white;border:1px solid rgba(255,255,255,.35)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.container{max-width:1240px;margin:18px auto;padding:0 16px 30px}
.status{
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid var(--line);
  background:var(--card);
}
.status.success{background:#e9f6ee;border-color:#b9dfc6}
.status.error{background:#faeaea;border-color:#e4baba;color:#7f2626}
.status.info{background:#eaf4fa;border-color:#bfd8e7}
.cards{display:grid;gap:12px}
.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.demographic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.age-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.metric{
  background:var(--card);
  border:1px solid var(--line);
  border-left:5px solid var(--green);
  border-radius:15px;
  padding:16px;
  min-height:120px;
}
.metric.compact{min-height:92px}
.metric span{display:block;color:var(--muted);font-size:13px}
.metric strong{display:block;font-size:34px;margin:7px 0 2px}
.metric small{color:var(--muted);line-height:1.35}
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  margin-top:15px;
}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel h2{margin:0 0 4px;font-size:20px}
.panel p{margin:0;color:var(--muted);font-size:13px}
.bars{display:grid;gap:10px}
.bar-row{
  display:grid;
  grid-template-columns:minmax(180px,260px) 1fr 88px;
  gap:10px;
  align-items:center;
}
.bar-label{font-size:13px;font-weight:800}
.bar-track{height:18px;background:#e9e6dc;border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--green),#7a9b69);border-radius:999px}
.bar-value{text-align:right;font-weight:900}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:980px}
th,td{padding:10px 9px;border-bottom:1px solid #e4e0d7;text-align:right;font-size:12px}
th:first-child,td:first-child{text-align:left}
th{position:sticky;top:0;background:#f4f1e8;font-size:11px;text-transform:uppercase;letter-spacing:.03em}
tbody tr:hover{background:#faf8f1}
footer{
  margin-top:18px;
  padding:12px 2px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:11px;
}
@media(max-width:900px){
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .age-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-inner{align-items:flex-start;flex-wrap:wrap}
  .hero-actions{margin-left:0;width:100%}
}
@media(max-width:560px){
  h1{font-size:25px}
  .summary-grid,.demographic-grid,.age-grid{grid-template-columns:1fr 1fr}
  .bar-row{grid-template-columns:1fr 62px}
  .bar-track{grid-column:1 / -1;grid-row:2}
}
@media print{
  .hero-actions,.status{display:none!important}
  body{background:white}
  .panel,.metric{break-inside:avoid}
}