*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f0f2f5;--surface: #ffffff;--surface-2: #f8f9fa;--border: #e2e8f0;--primary: #2563eb;--primary-h: #1d4ed8;--primary-10: #eff6ff;--text: #1e293b;--text-muted: #64748b;--error: #dc2626;--error-bg: #fef2f2;--error-border:#fecaca;--success: #16a34a;--radius: 8px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.header-inner{max-width:1080px;margin:0 auto;padding:0 2rem;height:60px;display:flex;align-items:center;gap:2rem}.app-title{font-size:1.15rem;font-weight:700;white-space:nowrap;color:var(--text)}.main-tabs{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.main-tabs .tab{padding:.4rem 1.4rem;background:none;border:none;border-right:1px solid var(--border);cursor:pointer;font-size:.875rem;font-weight:500;color:var(--text-muted);transition:background .15s,color .15s}.main-tabs .tab:last-child{border-right:none}.main-tabs .tab:hover{background:var(--surface-2);color:var(--text)}.main-tabs .tab.active{background:var(--primary);color:#fff}.app-main{flex:1;padding:2rem;max-width:1080px;margin:0 auto;width:100%}.generator{display:grid;grid-template-columns:340px 1fr;gap:1.5rem;align-items:start}.controls{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);padding:1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1.25rem}.sub-tabs{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.sub-tabs button{flex:1;padding:.45rem;background:none;border:none;border-right:1px solid var(--border);cursor:pointer;font-size:.825rem;font-weight:500;color:var(--text-muted);transition:background .15s,color .15s}.sub-tabs button:last-child{border-right:none}.sub-tabs button:hover{background:var(--surface-2);color:var(--text)}.sub-tabs button.active{background:var(--primary);color:#fff}.field{display:flex;flex-direction:column;gap:.375rem}.field-label{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.field input[type=text],.field select,.field textarea{padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;color:var(--text);background:var(--surface);width:100%;transition:border-color .15s;font-family:inherit}.field input[type=text]:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-10)}.field input[type=range]{width:100%;accent-color:var(--primary);cursor:pointer}.range-value{font-size:.8rem;color:var(--text-muted);text-align:right}.color-row{display:flex;gap:.5rem;align-items:center}.color-swatch{width:38px;height:36px;border:1px solid var(--border);border-radius:6px;cursor:pointer;padding:3px;background:var(--surface);flex-shrink:0}.hex-input{flex:1;font-family:SF Mono,Fira Code,monospace!important;font-size:.85rem!important}.checkbox-field{flex-direction:row;align-items:center;gap:.5rem;cursor:pointer}.checkbox-field input[type=checkbox]{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:.875rem;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.upload-area{border:2px dashed var(--border);border-radius:var(--radius);padding:1rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;display:block}.upload-area:hover{border-color:var(--primary);background:var(--primary-10)}.upload-area-text{font-size:.825rem;color:var(--text-muted)}.logo-row{display:flex;align-items:center;gap:.75rem}.logo-thumb{width:44px;height:44px;object-fit:contain;border:1px solid var(--border);border-radius:var(--radius);padding:4px;background:var(--surface-2)}.info-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;display:flex;flex-direction:column;gap:.3rem}.info-box p{font-size:.775rem;color:var(--text-muted)}.error-box{background:var(--error-bg);border:1px solid var(--error-border);border-radius:var(--radius);padding:.6rem .8rem;font-size:.825rem;color:var(--error);width:100%}.hint{font-size:.75rem;color:var(--text-muted)}.preview{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);padding:2rem 1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:1.5rem;min-height:400px;justify-content:center}.qr-display{padding:1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center}.barcode-display{padding:1.25rem 2rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;width:100%;min-height:140px;overflow:auto}.download-meta{font-size:.775rem;color:var(--text-muted)}.actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn-primary{padding:.55rem 1.4rem;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-size:.875rem;font-weight:500;font-family:inherit;transition:background .15s}.btn-primary:hover{background:var(--primary-h)}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-secondary{padding:.55rem 1.4rem;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:.875rem;font-weight:500;font-family:inherit;transition:background .15s}.btn-secondary:hover{background:var(--surface-2)}.btn-secondary:disabled{opacity:.45;cursor:not-allowed}.btn-ghost{padding:.3rem .75rem;background:none;color:var(--error);border:1px solid var(--error-border);border-radius:var(--radius);cursor:pointer;font-size:.8rem;font-family:inherit;transition:background .15s}.btn-ghost:hover{background:var(--error-bg)}.iso-bar{display:flex;gap:1rem;font-size:.72rem;color:var(--text-muted);flex-wrap:wrap;justify-content:center}.iso-bar span:before{content:"· "}.iso-bar span:first-child:before{content:""}@media(max-width:820px){.generator{grid-template-columns:1fr}.app-main{padding:1rem}.header-inner{padding:0 1rem}.barcode-display{padding:1rem}}@media(max-width:480px){.main-tabs .tab{padding:.4rem .75rem}.app-title{font-size:1rem}}