.rfid-field-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:-8px;grid-column:1/-1}
.rfid-field-actions .scan-tag-button{margin:0;min-height:44px;padding:10px 12px;font-size:12px}
.rfid-scanner{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:0;border:0;border-radius:14px;background:#fff;color:#0b172a;box-shadow:0 24px 64px #0b172a33;font-family:Inter,system-ui,sans-serif}
.rfid-scanner::backdrop{background:#0b172a88}
.rfid-scanner header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid #e4e7ec}
.rfid-scanner h2{font-size:20px;line-height:1.4;margin:0;letter-spacing:-.4px}
.rfid-scanner button{font:inherit;font-size:13px;min-height:44px;padding:10px 16px;border:1px solid #d0d5dd;border-radius:8px;color:#344054;background:#fff;cursor:pointer}
.rfid-scanner header button{display:grid;place-items:center;padding:10px;border:0}
.rfid-scanner button:hover{background:#f0f6ff}
.rfid-scanner button:focus-visible,.rfid-scanner select:focus-visible{outline:2px solid #1570ef;outline-offset:3px}
.rfid-scanner button:disabled{opacity:.5;cursor:wait}
.rfid-scanner button.primary{background:#1570ef;border-color:#1570ef;color:#fff}
.rfid-scanner button.primary:hover{background:#0c5dce}
.rfid-scanner-body{padding:24px;text-align:center}
.rfid-scanner label{display:grid;gap:8px;text-align:left;font-size:12px;font-weight:600}
.rfid-scanner select{width:100%;min-height:44px;border:1px solid #cbd9e5;border-radius:8px;background:#fff;padding:10px 12px;font:inherit;font-size:14px;color:#0b172a}
.rfid-radar{position:relative;display:grid;place-items:center;width:156px;height:156px;margin:28px auto 24px;border:1px solid #d6e5f8;border-radius:50%;background:#f0f6ff;color:#175cd3;overflow:hidden}
.rfid-radar>span{position:absolute;inset:24px;border:1px solid #b6d1f7;border-radius:50%}
.rfid-radar>span:nth-child(2){inset:0;opacity:0}
.rfid-scanner[data-state=waiting] .rfid-radar>span:nth-child(2){animation:rfid-pulse 2.4s ease-out infinite}
.rfid-radar svg{position:relative;width:48px;height:48px}
.rfid-scanner[data-state=success] .rfid-radar{background:#eaf8f4;border-color:#b6ddd2;color:#087b70}
.rfid-scanner[data-state=success] .rfid-radar>span{border-color:#b6ddd2}
.rfid-scanner:is([data-state=error],[data-state=empty],[data-state=offline]) .rfid-radar{background:#f7f9fc;color:#667085;border-color:#e4e7ec}
.rfid-scanner h3{font-size:20px;letter-spacing:-.4px;margin:0 0 8px}
.rfid-scanner [role=status]{font-size:14px;line-height:1.6;color:#526176;margin:0 auto 16px;max-width:36ch}
.rfid-scanner output{display:block;padding:14px 10px;background:#eaf8f4;border-radius:8px;color:#08685f;font-size:18px;font-weight:600;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.rfid-scanner [data-retry]{margin-top:16px}
.rfid-scanner footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e4e7ec}
.rfid-scanner [hidden]{display:none!important}
@keyframes rfid-pulse{0%{transform:scale(.35);opacity:.8}100%{transform:scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.rfid-scanner[data-state=waiting] .rfid-radar>span:nth-child(2){animation:none;opacity:.5}}
 .rfid-scanner[data-state=offline] .rfid-radar>span{border-color:#e4e7ec}

/* Connection color stays independent of card validation and form state. */
.rfid-scanner[data-contact=online] .rfid-radar{background:#eaf8f4;border-color:#b6ddd2;color:#087b70}
.rfid-scanner[data-contact=online] .rfid-radar>span{border-color:#b6ddd2}
.rfid-scanner[data-contact=sleep] .rfid-radar{background:#fffaeb;border-color:#fedf89;color:#a15c00}
.rfid-scanner[data-contact=sleep] .rfid-radar>span{border-color:#fedf89;animation:none}
.rfid-scanner[data-contact=offline] .rfid-radar{background:#fef3f2;border-color:#fecdca;color:#b42318}
.rfid-scanner[data-contact=offline] .rfid-radar>span{border-color:#fecdca;animation:none}
