*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #fafafa;--surface: #ffffff;--text: #1a1a1a;--text-secondary: #666;--accent: #000;--border: #e0e0e0;--radius: 8px;--transition: .15s ease;color-scheme:light dark}[data-theme=dark]{--bg: #121212;--surface: #1e1e1e;--text: #e0e0e0;--text-secondary: #999;--accent: #fff;--border: #333}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #121212;--surface: #1e1e1e;--text: #e0e0e0;--text-secondary: #999;--accent: #fff;--border: #333}}html,body{height:100%}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}main{max-width:400px;margin:0 auto;padding:24px 16px;min-height:100%;display:flex;flex-direction:column;gap:20px}.preview-container{display:flex;justify-content:center}.qr-preview{width:256px;height:256px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden}.qr-preview.transparent{--checker: #e0e0e0;background-image:linear-gradient(45deg,var(--checker) 25%,transparent 25%),linear-gradient(-45deg,var(--checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker) 75%),linear-gradient(-45deg,transparent 75%,var(--checker) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}[data-theme=dark] .qr-preview.transparent{--checker: #333}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .qr-preview.transparent{--checker: #333}}.qr-preview svg,.qr-preview canvas{max-width:100%;max-height:100%}.qr-preview .placeholder{color:var(--text-secondary);font-size:13px}.url-input{width:100%;padding:20px 24px;font-size:22px;font-family:inherit;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);outline:none;transition:border-color var(--transition)}.url-input:focus{border-color:var(--accent)}.url-input::placeholder{color:var(--text-secondary)}.options{display:flex;flex-direction:column;gap:14px}.option-group{display:flex;align-items:center;justify-content:space-between;gap:12px}.option-group label{font-size:13px;color:var(--text-secondary);flex-shrink:0}.toggle-group{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.toggle-group button{padding:8px 12px;font-size:13px;font-family:inherit;border:none;background:var(--surface);color:var(--text);cursor:pointer;transition:background var(--transition),color var(--transition);border-right:1px solid var(--border)}.toggle-group button:last-child{border-right:none}.toggle-group button:hover:not(.active){background:var(--bg)}.toggle-group button.active{background:var(--accent);color:var(--bg)}.toggle-group button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.action-buttons{display:flex;gap:8px;margin-top:auto}.action-btn{padding:16px 20px;font-size:15px;font-family:inherit;font-weight:500;border:none;border-radius:var(--radius);background:var(--accent);color:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity var(--transition),transform var(--transition)}.action-btn:hover:not(:disabled){opacity:.9}.action-btn:active:not(:disabled){transform:scale(.98)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.action-icon{font-size:18px}.copy-btn{flex-shrink:0;width:56px}.download-btn{flex:1}.theme-toggle{position:fixed;top:16px;right:16px;width:40px;height:40px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:border-color var(--transition);z-index:10}.theme-toggle:hover{border-color:var(--accent)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.content-area{display:flex;flex-direction:column;gap:24px}@media (min-width: 768px){main{max-width:800px;padding:48px 40px;gap:28px}.url-input{padding:24px 28px;font-size:26px}.content-area{flex-direction:row;gap:48px;align-items:center}.preview-container{flex-shrink:0}.qr-preview{width:280px;height:280px}.options{flex:1;gap:18px}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}