.qras-attendance-summary { display: flex; flex-wrap: wrap; gap: 15px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.qras-attendance-summary-item { flex: 1; min-width: 150px; text-align: center; padding: 10px; border-radius: 5px; }
.qras-attendance-summary-item span { display: block; font-size: 2em; font-weight: 600; }
.qras-attendance-summary-item.present { background-color: #e0f8e0; color: #006400; }
.qras-attendance-summary-item.absent { background-color: #f8e0e0; color: #a00; }
.qras-attendance-summary-item.pending { background-color: #f0f0f0; color: #555; }

.qras-history-table, .qras-summary-table { width: 100%; border-collapse: collapse; margin: 20px 0; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.qras-history-table th, .qras-history-table td, .qras-summary-table th, .qras-summary-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; }
.qras-history-table tr:last-child td, .qras-summary-table tr:last-child td { border-bottom-width: 0; }
.qras-history-table th, .qras-summary-table th { background-color: #f7f7f7; font-weight: 600; color: #333; }
.qras-history-table td.status-present, .qras-summary-table td.status-present { color: #006400; font-weight: bold; }
.qras-history-table td.status-absent, .qras-summary-table td.status-absent { color: #a00; font-weight: bold; }
.qras-history-table td.status-pending, .qras-summary-table td.status-pending { color: #777; font-style: italic; }

#qras-reader-wrapper { max-width: 500px; margin: 20px auto; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
#qras-reader { width: 100%; border: 2px dashed #ccc; border-radius: 8px; overflow: hidden; }
#qras-scan-result { text-align: center; font-size: 1.1em; margin-top: 15px; padding: 12px 15px; border-radius: 5px; font-weight: 500; display: none; }
#qras-scan-result.success { background-color: #e0f8e0; border: 1px solid #a0d0a0; color: #336633; }
#qras-scan-result.error { background-color: #f8e0e0; border: 1px solid #d0a0a0; color: #663333; }
#qras-scan-result.info { background-color: #e0e8f8; border: 1px solid #a0b0d0; color: #334466; }