body { font-family: Arial, sans-serif; margin: 0; background-color: #f4f6f8; color: #333; }
header { display: flex; align-items: center; background-color: #171a2a; color: #fff; padding: 10px 20px; position: relative; }
header .logo { height: 40px; margin-right: 15px; }
.title-wrap { display: flex; flex-direction: column; line-height: 1.15; }
.title-wrap h1 { margin: 0; }
.created-by { font-size: 0.85rem; color: #9aa3ad; margin-top: 4px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px; }
.kpi { background: #fff; border-radius: 8px; padding: 15px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; }
.chart { background: #fff; border-radius: 8px; padding: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); height: 400px; }
footer { text-align: center; padding: 10px; background-color: #171a2a; color: #fff; }
/* Versions container */
.versions { position: absolute; right: 20px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; }
.versions-title { font-weight: 700; font-size: 0.9rem; color: #fff; opacity: 0.9; }
.flags { display: flex; gap: 8px; margin-top: 6px; }
.flags a { text-decoration: none; font-size: 1.4rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.flags a:hover { transform: translateY(-1px); }
@media (max-width: 640px) { .versions { right: 12px; top: 8px; } .flags a { font-size: 1.2rem; } }


.flags a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 20px; }
.flags img.flag { width: 28px; height: 20px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.flags a:hover img.flag { transform: translateY(-1px); }