*{box-sizing:border-box}body{color:#333;background:#f5f5f5;margin:0;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5}#app{max-width:1200px;margin:0 auto;padding:2rem}.container{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 10px #0000001a}h1{text-align:center;color:#2563eb;margin:0 0 1rem}.features{text-align:center;background:#eff6ff;border-left:4px solid #2563eb;border-radius:8px;margin:0 0 2rem;padding:1rem}.features p{color:#1e40af;margin:0;font-size:1.1rem;line-height:1.6}.how-to-use{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin:0 0 2rem;padding:1.5rem}.how-to-use h3{color:#1e40af;margin:0 0 1rem;font-size:1.2rem}.how-to-use ol{margin:0;padding-left:1.5rem}.how-to-use li{color:#374151;margin-bottom:.75rem;line-height:1.5}.how-to-use li:last-child{margin-bottom:0}.how-to-use strong{color:#1e40af}h2{color:#1e40af;margin:0 0 1rem}.generator{background:#fafafa;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:2rem;padding:1.5rem}input[type=text],input[type=number]{border:1px solid #d1d5db;border-radius:4px;width:100%;margin-bottom:1rem;padding:.75rem;font-size:1rem}input:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 2px #2563eb1a}button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:4px;margin-bottom:1rem;padding:.75rem 1.5rem;font-size:1rem}button:hover{background:#1d4ed8}#barcode-result,#qr-result{text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:4px;min-height:100px;margin:1rem 0;padding:1rem}#barcode-result svg,#qr-result svg{max-width:100%;height:auto}.url-section{background:#f9fafb;border-radius:4px;margin-top:1rem;padding:1rem}.url-section label{color:#374151;margin-bottom:.5rem;font-weight:600;display:block}.url-input-group{gap:0;margin-bottom:.5rem;display:flex}.url-input-group input[type=text]{background:#fff;border-right:none;border-radius:4px 0 0 4px;flex:1;margin-bottom:0;font-family:monospace;font-size:.9rem}.url-input-group button{background:#059669;border:1px solid #059669;border-radius:0 4px 4px 0;margin-bottom:0;padding:.75rem 1rem;font-size:.85rem}.url-input-group button:hover{background:#047857;border-color:#047857}.copy-message{min-height:1.2em;margin-top:.25rem;font-size:.85rem}.copy-message.success{color:#059669}.copy-message.error{color:#dc2626}.options{background:#f9fafb;border-radius:8px;margin-top:1rem;padding:1rem}.options label{align-items:center;gap:.5rem;display:flex}.options input{width:200px;margin:0}@media (max-width:768px){#app,.container{padding:1rem}}