*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a1a;--surface: #12122a;--surface2: #1a1a3a;--border: #2a2a4a;--text: #e0e0f0;--text2: #8888aa;--accent: #7c3aed;--accent2: #a855f7;--radius: 10px}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--border)}#logo{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;color:#fff}#app{display:flex;max-width:1200px;margin:0 auto;padding:24px;gap:32px;min-height:calc(100vh - 56px)}#controls{flex:1;min-width:0}#preview-panel{width:380px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:20px;position:sticky;top:24px;align-self:flex-start}#type-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.type-tab{padding:8px 16px;border:1px solid var(--border);border-radius:20px;background:transparent;color:var(--text2);cursor:pointer;font-size:.85rem;transition:all .2s}.type-tab:hover{border-color:var(--accent);color:var(--accent)}.type-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.form-group{display:none}.form-group.active{display:block}.form-group label{display:block;font-size:.8rem;color:var(--text2);margin-bottom:4px;margin-top:12px}.form-group label:first-child{margin-top:0}.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.95rem;outline:none;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent)}.form-group textarea{resize:vertical}#customize{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}#customize h3{font-size:.9rem;color:var(--text2);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.color-row{display:flex;gap:16px;margin-bottom:12px}.color-field{flex:1}.color-field label{display:block;font-size:.8rem;color:var(--text2);margin-bottom:4px}.color-field input[type=color]{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;padding:2px}.field-row{display:flex;gap:16px;margin-bottom:12px}.field{flex:1}.field label{display:block;font-size:.8rem;color:var(--text2);margin-bottom:4px}.field select,.field input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.9rem;outline:none}.field select:focus,.field input:focus{border-color:var(--accent)}.logo-field{margin-top:12px}.logo-field label{display:block;font-size:.8rem;color:var(--text2);margin-bottom:4px}.logo-field input[type=file]{width:100%;padding:8px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text2);font-size:.85rem;cursor:pointer}.btn-small{margin-top:6px;padding:4px 12px;border:1px solid #e74c3c;border-radius:6px;background:transparent;color:#e74c3c;font-size:.8rem;cursor:pointer}.btn-small:hover{background:#e74c3c1a}.hidden{display:none!important}#qr-preview{width:320px;height:320px;background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:16px;box-shadow:0 4px 30px #7c3aed26}#qr-canvas{max-width:100%;max-height:100%;image-rendering:pixelated}#actions{display:flex;flex-direction:column;gap:8px;width:320px}.btn-action{width:100%;padding:12px;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;background:var(--accent);color:#fff}.btn-action:hover{background:var(--accent2)}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:#7c3aed0d}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(100px);padding:12px 24px;background:var(--accent);color:#fff;border-radius:8px;font-size:.9rem;z-index:1000;transition:transform .3s ease;pointer-events:none}#toast.show{transform:translate(-50%) translateY(0)}@media (max-width: 768px){#app{flex-direction:column;padding:16px;gap:20px}#preview-panel{width:100%;position:static;order:-1}#qr-preview{width:240px;height:240px;margin:0 auto}#actions{width:100%;flex-direction:row;flex-wrap:wrap}.btn-action{flex:1;min-width:140px}#type-tabs{gap:4px}.type-tab{padding:6px 12px;font-size:.8rem}}@media (max-width: 480px){#qr-preview{width:200px;height:200px}#actions{flex-direction:column}.btn-action{min-width:100%}}