:root{--bg:#f7f7f9;--card:#ffffff;--text:#1f2328;--muted:#6b7280;--primary:#2563eb}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,Microsoft YaHei,Ubuntu,Cantarell,sans-serif}
.container{max-width:960px;margin:0 auto;padding:24px}
h1{font-size:24px;margin:0 0 16px}
.controls{background:var(--card);border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.field{display:flex;align-items:center;gap:8px}
.field>span{min-width:64px;color:var(--muted)}
.field input,.field select{height:36px;padding:0 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.field.checkbox{gap:6px}
.actions{gap:8px}
button{height:36px;padding:0 14px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:var(--text);cursor:pointer}
button#generate{background:var(--primary);border-color:var(--primary);color:#fff}
.error{min-height:20px;color:#dc2626}
.preview{margin-top:16px;background:#fff;border:1px dashed #e5e7eb;border-radius:12px;padding:16px;display:flex;align-items:center;justify-content:center;min-height:180px}
#barcode{width:100%}
.tips{margin-top:12px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}