:root { --primary:#0f766e; --bg:#f6f6f6; --text:#222; --danger:#b91c1c; }
* { box-sizing:border-box; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
body { margin:0; background:var(--bg); color:var(--text); }
header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff; border-bottom:1px solid #ddd;}
h1 { margin:0; font-size:1.25rem; color:var(--primary); }
section { padding:16px; }
.field { margin-bottom:12px; }
label { display:block; font-weight:600; margin-bottom:6px; }
input { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; }
button { padding:10px 14px; border:none; border-radius:8px; background:var(--primary); color:#fff; cursor:pointer; margin-right:8px;}
button:disabled { opacity:.6; cursor:not-allowed; }
.badge { display:inline-block; padding:4px 8px; border-radius:16px; background:#eee; margin-left:6px; font-size:.85rem; }
.badge.offline { background:#fde68a; color:#78350f; }
.badge.online { background:#d1fae5; color:#065f46; }
.hidden { display:none; }
.msg { color:#555; margin-top:8px; min-height:1.2em; }
.scanner { position:relative; background:#000; padding:8px; border-radius:8px; margin:10px 0; }
#scannerVideo { width:100%; height:260px; background:#111; }
#recentList { list-style:none; padding-left:0; }
#recentList li { background:#fff; border:1px solid #ddd; border-radius:8px; padding:8px; margin-bottom:8px; font-size:.9rem; }
.actions { margin:12px 0; }