body { font-family: system-ui, sans-serif; margin: 0; padding: 0; color: #1a1a1a; }
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: #14213d; color: white; }
header h1 { font-size: 18px; margin: 0; }
#login-panel { max-width: 320px; margin: 60px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
#login-form { display: flex; flex-direction: column; gap: 8px; }
.hint { color: #777; font-size: 12px; }
main { padding: 16px 20px; }
nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.tab { padding: 6px 14px; border: 1px solid #ccc; background: #f5f5f5; border-radius: 4px; cursor: pointer; }
.tab.active { background: #14213d; color: white; }
#logout-btn { margin-left: auto; }
table { border-collapse: collapse; width: 100%; margin-top: 8px; }
th, td { border: 1px solid #ddd; padding: 6px 10px; font-size: 13px; text-align: left; }
th { background: #fafafa; }
.toolbar { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
button { cursor: pointer; }
.status-online { color: #1a7f37; font-weight: 600; }
.status-offline { color: #b42318; font-weight: 600; }
.status-unenrolled { color: #888; }
.refused { color: #b42318; }
.outdated { color: #b42318; font-weight: 600; }
.up-to-date { color: #1a7f37; }
#group-detail { margin-top: 16px; }
.approval-pending_approval { color: #b25e09; font-weight: 600; }
.approval-approved { color: #1a7f37; }
.approval-rejected { color: #b42318; font-weight: 600; }
#pending-panel { border: 1px solid #f0c36d; background: #fff8e6; border-radius: 6px; padding: 8px 12px; margin-bottom: 16px; }
#pending-panel h3 { margin: 4px 0; }