body { font-family: Arial, sans-serif; margin: 0; background: #f5f7fa; color: #222; }
.topbar { background: #1f5f8b; color: #fff; padding: 10px 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.topbar nav { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; }
.topbar a { color: #fff; text-decoration: none; }
main { padding: 16px; max-width: 1100px; margin: 0 auto; background: #fff; min-height: 80vh; }
table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
th, td { text-align: left; vertical-align: top; }
fieldset { margin-bottom: 14px; border: 1px solid #ccc; border-radius: 6px; }
.baris { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.flash { background: #e8f4ff; border-left: 4px solid #1f5f8b; padding: 8px 12px; }
.kartu-wrap { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kartu { flex: 1 1 200px; padding: 16px; border-radius: 8px; background: #eef5fb; text-decoration: none; color: #222; display: flex; flex-direction: column; }
.kartu .nilai { font-size: 26px; font-weight: bold; color: #1f5f8b; }
input, select, textarea, button { padding: 6px; margin: 2px; }
.login-box { max-width: 320px; margin: 60px auto; padding: 24px; border: 1px solid #ccc; border-radius: 8px; }
.login-box input { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; }
@media print { .topbar, .noprint { display: none; } }