:root{
  --navy:#0b2239; --green:#1d5c4f; --green-2:#276f60; --gold:#d4a84f;
  --bg:#eef3f7; --card:#ffffff; --text:#172033; --muted:#667085;
  --line:#d9e2ea; --success:#16794a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
header{
  background:linear-gradient(135deg,var(--navy),#123c54);
  color:#fff;padding:18px 26px;border-bottom:3px solid var(--gold)
}
header h1{margin:0;font-size:1.55rem}
header .sub{margin-top:5px;color:#dce6ee;font-size:.92rem}
.layout{display:flex;min-height:calc(100vh - 82px)}
aside{
  width:270px;background:var(--green);color:#fff;padding:20px 16px;position:sticky;top:0;align-self:flex-start;min-height:calc(100vh - 82px)
}
aside h3{margin:0 0 14px;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;color:#d9eee8}
aside a{
  display:block;color:#fff;text-decoration:none;padding:10px 12px;border-radius:8px;margin:4px 0
}
aside a:hover, aside a.active{background:rgba(255,255,255,.13);border-left:3px solid var(--gold)}
main{flex:1;padding:24px 28px;max-width:1500px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;
  box-shadow:0 4px 14px rgba(15,35,55,.08)
}
.card h2,.card h3{margin-top:0}
.kpi{font-size:1.8rem;font-weight:700;color:var(--navy)}
.badge{display:inline-block;background:#e7f5ed;color:var(--success);padding:5px 11px;border-radius:18px;font-weight:700;font-size:.82rem}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px}
.meta span{background:#f5f8fa;border:1px solid var(--line);padding:6px 10px;border-radius:8px;font-size:.85rem}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
th{background:#f7f9fb;color:#344054}
.notice{border-left:4px solid var(--gold);background:#fff9eb;padding:14px 16px;border-radius:8px}
footer{padding:16px 28px;color:#667085;font-size:.85rem}
@media(max-width:850px){
  .layout{display:block}
  aside{width:auto;min-height:auto;position:static}
  main{padding:18px}
}