:root { --primary-color:#ff0000; --primary-hover:#cc0000; --secondary-color:#333; --secondary-hover:#000; --bg-color:#f4f4f4; --card-bg:#fff; --text-color:#222; --border-color:#ddd; --shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06); }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg-color); color:var(--text-color); margin:0; padding:0; line-height:1.6; }
.container { max-width:1100px; margin:3rem auto; padding:0 1.5rem; }
header { text-align:center; margin-bottom:3rem; }
h1 { color:var(--primary-color); font-size:2.8rem; font-weight:800; letter-spacing:-.025em; margin:0; text-transform:uppercase; }
h2 { font-size:1.5rem; font-weight:700; color:var(--secondary-color); border-left:5px solid var(--primary-color); padding-left:1rem; margin-bottom:1.5rem; }
section { background:var(--card-bg); padding:2.5rem; border-radius:12px; box-shadow:var(--shadow); margin-bottom:2.5rem; border:1px solid var(--border-color); }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:2rem; }
.form-group { display:flex; flex-direction:column; }
.form-group label { font-weight:600; margin-bottom:.6rem; font-size:.9rem; color:#555; }
.form-group input[type="number"] { padding:.75rem; border:2px solid var(--border-color); border-radius:8px; font-size:1rem; }
.form-group input[type="number"]:focus { outline:none; border-color:var(--primary-color); }
.checkbox-group { flex-direction:row; align-items:center; gap:.75rem; }
.checkbox-group label { margin-bottom:0; }
.checkbox-group input[type="checkbox"] { width:1.2rem; height:1.2rem; accent-color:var(--primary-color); }
textarea { width:100%; padding:1.2rem; border:2px solid var(--border-color); border-radius:8px; resize:vertical; font-family:'Fira Code',monospace; font-size:1rem; box-sizing:border-box; margin-bottom:2rem; }
textarea:focus { outline:none; border-color:var(--primary-color); }
.button-group { display:flex; gap:1.2rem; flex-wrap:wrap; }
.btn { padding:.8rem 2rem; border:none; border-radius:8px; cursor:pointer; font-weight:700; text-decoration:none; transition:all .2s; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; }
.btn.primary { background:var(--primary-color); color:#fff; box-shadow:0 4px 14px 0 rgba(255,0,0,.39); }
.btn.primary:hover { background:var(--primary-hover); transform:translateY(-2px); }
.btn.secondary { background:var(--secondary-color); color:#fff; }
.btn.secondary:hover { background:var(--secondary-hover); transform:translateY(-2px); }
.hidden { display:none !important; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2rem; }
.barcode-card { background:#fff; border:1px solid var(--border-color); border-radius:12px; padding:1.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; }
.barcode-card img { max-width:100%; height:auto; margin-bottom:1.5rem; border:1px solid #eee; padding:.5rem; }
.barcode-card p { font-weight:800; margin-bottom:1.5rem; color:var(--primary-color); font-size:1.2rem; }
.barcode-card .download-btn { font-size:.85rem; padding:.6rem 1.2rem; width:100%; }
footer { text-align:center; margin-top:4rem; padding-bottom:2rem; color:#888; font-size:.9rem; }
@media (max-width:600px) { .container{margin:1.5rem auto;} section{padding:1.5rem;} .settings-grid{grid-template-columns:1fr;} h1{font-size:2rem;} }