*{box-sizing:border-box}:root{--bg:#0f172a;--surface:#1e293b;--border:#334155;--text:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8;--error:#f87171}body{background:var(--bg);min-height:100vh;color:var(--text);justify-content:center;margin:0;padding:3rem 1rem;font-family:system-ui,-apple-system,sans-serif;display:flex}.app{width:100%;max-width:640px}h1{margin:0 0 .25rem;font-size:2rem}.subtitle{color:var(--muted);margin:0 0 1.5rem}.dropzone{text-align:center;border:2px dashed var(--border);background:var(--surface);color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;justify-content:center;align-items:center;padding:3rem 1rem;transition:border-color .15s,background .15s;display:flex}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);color:var(--text);background:#243250}#preview-wrap{text-align:center;margin-top:1.5rem}#preview{border:1px solid var(--border);border-radius:8px;max-width:100%;max-height:60vh}#result{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-top:1.5rem;padding:1rem}#result h2{color:var(--muted);margin:0 0 .5rem;font-size:1rem}#result-text{word-break:break-word;white-space:pre-wrap;margin:0 0 1rem;font-family:ui-monospace,monospace}button{background:var(--accent);color:#0f172a;cursor:pointer;border:none;border-radius:8px;padding:.5rem 1rem;font-weight:600}button.ghost{color:var(--muted);border:1px solid var(--border);background:0 0}.error{color:var(--error);margin-top:1rem}.tabs{gap:.25rem;margin-bottom:1.5rem;display:flex}.tab{border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;border-radius:8px;flex:1;padding:.625rem 1rem;font-size:.875rem;font-weight:600;transition:background .15s,color .15s}.tab:hover{color:var(--text)}.tab.active{background:var(--accent);border-color:var(--accent);color:#0f172a}.encode-label{color:var(--muted);margin-bottom:.5rem;font-size:.875rem;display:block}textarea{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);resize:vertical;border-radius:8px;padding:.75rem;font-family:inherit;font-size:.9375rem}textarea::placeholder{color:var(--muted)}textarea:focus{border-color:var(--accent);outline:none}#generate-btn{margin-top:.75rem}#qr-wrap{text-align:center;margin:1.5rem 0 1rem}#qr-canvas{border:1px solid var(--border);border-radius:8px;max-width:100%}#encode-output{text-align:center}