:root{ --bg:#0f1420; --card:#111827; --text:#e5e7eb; --muted:#9ca3af; --accent:#6366f1; --danger:#ef4444; }
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; background: var(--bg); color: var(--text); }
.container{ max-width: 520px; margin: 8vh auto; padding: 16px; }
.card{ background: var(--card); border-radius: 14px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
h1{ margin: 0 0 12px; font-size: 24px; }
label{ display:block; margin: 10px 0 6px; color: var(--muted); }
input{ width:100%; padding:12px 14px; background:#0b1020; color:var(--text); border:1px solid #1f2937; border-radius:10px; outline:none; }
input:focus{ border-color: var(--accent); }
button{ width:100%; padding:14px; border:none; border-radius:10px; background: var(--accent); color:white; font-weight:600; cursor:pointer; }
button:disabled{ opacity:.6; cursor:not-allowed; }
.row{ display:flex; gap:12px; }
.mt-1{ margin-top: 8px; } .mt-2{ margin-top: 12px; } .mt-3{ margin-top: 18px; } .mt-4{ margin-top: 24px; }
.center{ text-align:center; }
.error{ color: var(--danger); margin-top: 8px; }
.link{ color: var(--accent); cursor:pointer; text-decoration: none; }
.barcode-box{ display:flex; justify-content:center; align-items:center; padding:5px; background:#0b1020; border:1px dashed #374151; border-radius:12px; overflow:auto; }
.small{ font-size: 12px; color: var(--muted); }
header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; }
header a{ color: var(--muted); text-decoration: none; }
kbd{ background:#0b1020; padding:2px 6px; border-radius:6px; border:1px solid #1f2937; }