:root{--color-primary: #4f46e5;--color-primary-dark: #4338ca;--color-success: #16a34a;--color-error: #dc2626;--color-text: #111827;--color-muted: #6b7280;--color-border: #d0d5dd;--color-bg: #f2f4f7;--color-card: #ffffff;--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);-webkit-tap-highlight-color:transparent}.page{height:100vh;display:flex;align-items:center;justify-content:center;padding:12px;overflow-y:auto}.card{background:var(--color-card);padding:14px 18px;border-radius:var(--radius);box-shadow:0 6px 24px #11182714;width:100%;max-width:520px;max-height:calc(100vh - 24px);overflow-y:auto}.card.center{text-align:center}.title{margin:0 0 2px;font-size:clamp(16px,4vw,20px);text-align:center;color:var(--color-primary-dark)}.subtitle{margin:0 0 10px;text-align:center;color:var(--color-muted);font-size:12px}.form{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}.form>.error,.form>.contact-hr-banner,.form>.btn-primary{grid-column:1 / -1}.field{display:flex;flex-direction:column;font-size:11px;font-weight:600;gap:2px}input{padding:6px 9px;border-radius:6px;border:1px solid var(--color-border);font-size:13px;width:100%;transition:border-color .15s ease,box-shadow .15s ease,transform .1s ease}input::placeholder{color:#b0b5bf}input:hover{border-color:#9ca3af}input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #4f46e526;transform:translateY(-1px)}input.invalid{border-color:var(--color-error);background:#fef2f2}.field-error{color:var(--color-error);font-size:12px;font-weight:400}.btn-primary,.btn-secondary{padding:8px;border-radius:6px;border:none;font-weight:700;font-size:14px;cursor:pointer;width:100%;min-height:38px;transition:background .15s ease,transform .1s ease}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark)}.btn-primary:active:not(:disabled){background:var(--color-primary-dark);transform:scale(.98)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{margin-top:14px;background:#eef2ff;color:var(--color-primary-dark)}.btn-secondary:hover{background:#e0e7ff}.btn-secondary:active{transform:scale(.98)}.error{color:var(--color-error);text-align:center;margin:4px 0 0}.contact-hr-banner{background:#fef2f2;border:1px solid #fecaca;color:var(--color-error);border-radius:8px;padding:10px 12px;font-size:13px;font-weight:500;text-align:center;line-height:1.4}.success{color:var(--color-success);text-align:center;font-weight:600;margin:0 0 4px}.registration-id{text-align:center;color:var(--color-muted);margin:0 0 16px}.qr-box{text-align:center}.qr-box img{width:200px;height:200px;max-width:100%;margin-top:8px;border-radius:8px;background:#fff;padding:8px;border:1px solid var(--color-border)}.welcome{margin:0 0 8px;font-size:clamp(20px,6vw,28px);color:var(--color-primary-dark)}.status.valid{color:var(--color-success)}.status.invalid{color:var(--color-error)}.details{margin-top:16px;text-align:left;font-size:14px;background:#f9fafb;border-radius:10px;padding:14px 16px}.details p{margin:6px 0;word-break:break-word}.form-single{grid-template-columns:1fr}@media (max-width: 600px){.form{grid-template-columns:1fr}}@media (max-width: 380px){.card{padding:12px 14px}}.admin-page{height:100vh;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}.admin-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.admin-title{margin:0;font-size:clamp(18px,4vw,24px);color:var(--color-primary-dark)}.admin-subtitle{margin:4px 0 0;color:var(--color-muted);font-size:13px}.admin-header-actions{display:flex;gap:8px;flex-wrap:wrap}.admin-header-actions .btn-secondary,.admin-header-actions .btn-primary,.admin-logout{width:auto;padding:8px 16px;margin-top:0}.admin-section{background:var(--color-card);padding:16px;border-radius:var(--radius);box-shadow:0 6px 24px #11182714}.admin-section-title{margin:0 0 10px;font-size:16px;color:var(--color-text)}.admin-section-hint{margin:0 0 12px;color:var(--color-muted);font-size:13px}.admin-employee-form{display:grid;grid-template-columns:repeat(4,1fr) auto auto;gap:8px;align-items:center;background:var(--color-card);padding:14px;border-radius:var(--radius);box-shadow:0 6px 24px #11182714}.admin-employee-form input{font-size:13px}.admin-employee-form-btn{width:auto;padding:9px 16px;margin-top:0;white-space:nowrap}@media (max-width: 900px){.admin-employee-form{grid-template-columns:1fr 1fr}}@media (max-width: 520px){.admin-employee-form{grid-template-columns:1fr}}.admin-row-actions{display:flex;gap:6px;white-space:nowrap}.btn-secondary-small,.btn-danger-small{width:auto;padding:5px 10px;border-radius:6px;border:none;font-weight:600;font-size:12px;cursor:pointer}.btn-secondary-small{background:#eef2ff;color:var(--color-primary-dark)}.btn-secondary-small:hover{background:#e0e7ff}.btn-danger-small{background:#fef2f2;color:var(--color-error)}.btn-danger-small:hover:not(:disabled){background:#fee2e2}.btn-danger-small:disabled{opacity:.6;cursor:not-allowed}.admin-toolbar{display:flex}.admin-search{width:100%;max-width:420px}.admin-table-wrap{overflow-x:auto;min-height:65vh;background:var(--color-card);border-radius:var(--radius);box-shadow:0 6px 24px #11182714}.admin-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}.admin-table th,.admin-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--color-border)}.admin-table th{position:sticky;top:0;background:#f9fafb;font-weight:700;color:var(--color-text);z-index:1}.admin-table tbody tr:hover{background:#f9fafb}.admin-empty{text-align:center;color:var(--color-muted);padding:24px}.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}.badge-checked{background:#dcfce7;color:var(--color-success)}.badge-pending{background:#f3f4f6;color:var(--color-muted)}.admin-pagination{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:var(--color-muted)}.admin-pagination .btn-secondary{width:auto;padding:4px 10px;min-height:0;font-size:11px;margin-top:0}
