:root { font-family: Arial, sans-serif; color: #172033; background: #f5f7fb; }
body { margin: 0; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:24px 32px; background:#18233b; color:#fff; }
h1 { margin:0; font-size:28px; }
p { margin:4px 0 0; opacity:.85; }
.badge { background:#e8f1ff; color:#18233b; border-radius:999px; padding:8px 14px; font-weight:700; }
main { max-width:1180px; margin:24px auto; padding:0 18px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:18px; }
.card, .panel { background:#fff; border:1px solid #dde4ef; border-radius:14px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.card { padding:18px; }
.card strong { display:block; font-size:28px; margin-top:8px; }
.panel { padding:20px; margin-bottom:18px; }
.modules { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:10px; }
button { border:1px solid #bcc9d8; background:#f8fbff; padding:12px; border-radius:10px; cursor:pointer; font-weight:700; color:#18233b; }
button:hover { background:#eef6ff; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px; border-bottom:1px solid #e5ebf3; }
th { background:#f0f4fa; }