/* public/assets/css/hardware/nfc-test.css */
.nfc-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #3b82f6; --p-primary-hover: #2563eb; --p-warning: #f59e0b; --p-warning-hover: #d97706; --p-danger: #ef4444; --p-text: #0f172a; --p-text-muted: #64748b; width: 100%; max-width: 1000px; margin: 0 auto; background: var(--p-bg); border-radius: 20px; padding: 24px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.nfc-wrapper *, .nfc-wrapper *::before, .nfc-wrapper *::after { box-sizing: border-box; }

.nfc-header { text-align: center; margin-bottom: 24px; border-bottom: 1px solid var(--p-border); padding-bottom: 24px; }
.nfc-title { font-size: 1.7rem; font-weight: 800; color: var(--p-text); margin: 0 0 10px 0; }
.nfc-subtitle { font-size: 0.95rem; color: var(--p-text-muted); max-width: 800px; margin: 0 auto; line-height: 1.6; }

.nfc-workspace { display: flex; flex-direction: column; gap: 24px; }
.nfc-layout { display: flex; gap: 24px; align-items: stretch; }
@media (max-width: 800px) { .nfc-layout { flex-direction: column; } }

/* Panels */
.nfc-panel { flex: 1; background: #f8fafc; border: 1px solid var(--p-border); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.nfc-panel-header { border-bottom: 2px solid var(--p-border); padding-bottom: 12px; margin-bottom: 20px; }
.nfc-panel-title { font-size: 1.1rem; font-weight: 800; color: var(--p-text); text-transform: uppercase; letter-spacing: 0.5px; }

/* Radar Animation */
.nfc-radar-container { position: relative; width: 100%; height: 200px; background: #0f172a; border-radius: 12px; border: 2px solid #1e293b; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 20px; box-shadow: inset 0 5px 20px rgba(0,0,0,0.5); }
.nfc-radar-icon { font-size: 3.5rem; z-index: 5; opacity: 0.5; color: #fff; transition: 0.3s; }
.nfc-radar-status { position: absolute; bottom: 12px; left: 0; width: 100%; text-align: center; font-size: 0.9rem; font-family: monospace; font-weight: 700; color: #64748b; z-index: 5; }

.nfc-radar-ring { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--p-primary); opacity: 0; z-index: 1; }
.scanning .nfc-radar-ring { animation: radarPulse 2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite; }
.scanning .delay-1 { animation-delay: 1s; }
.scanning .nfc-radar-icon { opacity: 1; color: var(--p-primary); text-shadow: 0 0 15px rgba(59, 130, 246, 0.8); }
.scanning .nfc-radar-status { color: #38bdf8; }
@keyframes radarPulse { 0% { transform: scale(0.8); opacity: 0.8; border-width: 4px; } 100% { transform: scale(3.5); opacity: 0; border-width: 1px; } }

/* Buttons & Forms */
.nfc-btn-primary, .nfc-btn-warning, .nfc-btn-danger { width: 100%; padding: 14px; border-radius: 10px; font-weight: 800; font-size: 1.05rem; cursor: pointer; border: none; transition: 0.2s; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.nfc-btn-primary { background: var(--p-primary); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
.nfc-btn-primary:hover { background: var(--p-primary-hover); transform: translateY(-2px); }
.nfc-btn-warning { background: var(--p-warning); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }
.nfc-btn-warning:hover { background: var(--p-warning-hover); transform: translateY(-2px); }
.nfc-btn-danger { background: var(--p-danger); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); }

.nfc-form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.nfc-label { font-size: 0.9rem; font-weight: 700; color: #475569; }
.nfc-select, .nfc-textarea { width: 100%; padding: 12px 14px; border: 2px solid #cbd5e1; border-radius: 10px; font-size: 0.95rem; font-weight: 700; color: #1e293b; background: #fff; outline: none; transition: 0.2s; }
.nfc-select:focus, .nfc-textarea:focus { border-color: var(--p-warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.nfc-textarea { height: 120px; resize: none; font-family: monospace; }
.nfc-write-status { margin-top: 12px; font-size: 0.9rem; font-weight: 700; text-align: center; }

/* Read Results */
.nfc-result-board { margin-top: 20px; background: #ffffff; border: 1px solid var(--p-border); border-radius: 12px; overflow: hidden; }
.nfc-info-row { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px dashed var(--p-border); background: #f8fafc; }
.nfc-info-label { font-weight: 800; color: #64748b; font-size: 0.85rem; text-transform: uppercase; }
.nfc-info-val.highlight { color: var(--p-primary); }
.code { font-family: 'Consolas', monospace; font-weight: 900; }
.nfc-records { padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: 250px; overflow-y: auto; }
.record-item { background: #0f172a; border-radius: 8px; padding: 12px; border-left: 4px solid var(--p-primary); }
.rec-meta { font-size: 0.75rem; color: #94a3b8; font-family: monospace; border-bottom: 1px solid #334155; padding-bottom: 6px; margin-bottom: 6px; }
.rec-data { font-size: 0.95rem; color: #f8fafc; word-break: break-all; font-family: monospace; }

.nfc-hint-card { background: #fef2f2; border-left: 4px solid #ef4444; padding: 16px; border-radius: 0 10px 10px 0; font-size: 0.9rem; color: #7f1d1d; line-height: 1.6; }

/* Dark Mode */
[data-theme="dark"] .nfc-wrapper { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .nfc-title, [data-theme="dark"] .nfc-panel-title { color: #f8fafc; }
[data-theme="dark"] .nfc-subtitle, [data-theme="dark"] .nfc-label, [data-theme="dark"] .nfc-info-label { color: #94a3b8; }
[data-theme="dark"] .nfc-panel { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .nfc-select, [data-theme="dark"] .nfc-textarea { background: #1e293b; border-color: #475569; color: #f8fafc; }
[data-theme="dark"] .nfc-result-board { background: #1e293b; border-color: #475569; }
[data-theme="dark"] .nfc-info-row { background: #0f172a; border-bottom-color: #334155; }
[data-theme="dark"] .record-item { background: #020617; }
[data-theme="dark"] .nfc-hint-card { background: rgba(239, 68, 68, 0.1); border-left-color: #ef4444; color: #fca5a5; }