:root{--bg-main:#f8fafc;--bg-card:#ffffff;--border-color:#e2e8f0;--text-main:#0f172a;--text-muted:#64748b;--primary:#3b82f6;--hover-bg:#f1f5f9}.tool-container{font-family:'Inter',system-ui,sans-serif;color:var(--text-main)}.text-center{text-align:center}.mb-8{margin-bottom:2rem}.mb-2{margin-bottom:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.text-3xl{font-size:1.875rem}.font-bold{font-weight:700}.text-muted{color:var(--text-muted)}.text-sm{font-size:.875rem}.generator-layout{display:flex;flex-direction:column;gap:1.5rem}@media (min-width:992px){.generator-layout{flex-direction:row;align-items:flex-start}.controls-column{flex:1.2}.preview-column{flex:1;position:sticky;top:1.5rem}}.card{background:var(--bg-card);padding:1.5rem;border-radius:1rem;box-shadow:0 4px 15px rgb(0 0 0 / .03);border:1px solid var(--border-color);margin-bottom:1.5rem}.card:last-child{margin-bottom:0}.group-title{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin:0 0 .75rem 0}.btn-grid{display:flex;flex-wrap:wrap;gap:.5rem}.btn-sym{background:var(--bg-main);border:1px solid var(--border-color);padding:.5rem 1rem;border-radius:.5rem;font-size:.9rem;font-weight:600;cursor:pointer;color:var(--text-main);transition:all 0.2s}.btn-sym:hover{background:var(--hover-bg);border-color:#cbd5e1}.btn-sym.active{background:#eff6ff;border-color:var(--primary);color:var(--primary)}.label-bold{display:block;font-weight:600;margin-bottom:.5rem}.form-textarea{width:100%;padding:.75rem;border:2px solid var(--border-color);border-radius:.5rem;font-family:monospace;font-size:1.1rem;resize:vertical;outline:none;transition:border-color 0.2s}.form-textarea:focus{border-color:var(--primary)}.error-msg{color:#dc2626;background:#fef2f2;padding:.5rem;border-radius:.5rem;font-size:.85rem;margin-top:.5rem;border:1px solid #fecaca}details summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}details summary::-webkit-details-marker{display:none}details summary::after{content:"▼";font-size:.8rem;color:var(--text-muted)}details[open] summary::after{content:"▲"}.options-grid{display:grid;grid-template-columns:1fr;gap:1rem}.opt-group label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.25rem}.slider{width:100%}.color-row{display:flex;gap:1rem}.color-picker-wrap{flex:1}input[type="color"]{width:100%;height:40px;padding:0;border:1px solid var(--border-color);border-radius:.5rem;cursor:pointer}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.checkbox-label input{width:18px;height:18px}.preview-canvas-wrapper{background:#f8fafc;border:2px dashed var(--border-color);border-radius:.75rem;min-height:250px;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:hidden}#barcode-canvas,#barcode-svg{max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain}.placeholder-msg{text-align:center;color:var(--text-muted)}.placeholder-msg i{width:48px;height:48px;opacity:.5;margin-bottom:.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:.5rem;font-weight:600;cursor:pointer;border:none;transition:all 0.2s}.w-full{width:100%}.flex{display:flex}.gap-2{gap:.5rem}.flex-1{flex:1}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#2563eb}.btn-secondary{background:var(--bg-main);border:1px solid var(--border-color);color:var(--text-main)}.btn-secondary:hover{background:var(--hover-bg)}.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--text-main);color:#fff;padding:.75rem 1.5rem;border-radius:2rem;font-weight:600;opacity:0;transition:all 0.3s cubic-bezier(.68,-.55,.265,1.55);z-index:1000}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}