:root{--bg: #ffffff;--panel: #f6f8ff;--card: #ffffff;--border: #e6eaf2;--muted: #667085;--text: #0b1320;--brand: #2563eb;--brand-strong: #1d4ed8;--danger: #ef4444}*{box-sizing:border-box}html,body,#root{min-height:100%;width:100%;overflow-x:hidden}html,body{margin:0;padding:0}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;color:var(--text);background:linear-gradient(180deg,#ffffff,var(--panel) 60%)}.container{max-width:1120px;margin:0 auto;padding:12px;min-width:0}@media (min-width: 768px){.container{padding:20px}}.nav{position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffe;border-bottom:1px solid var(--border);box-shadow:0 1px 8px #0f172a0f;width:100%;left:0;right:0}.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;padding:12px;min-width:0}@media (min-width: 768px){.nav-inner{padding:12px 20px}}.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text)}.brand-badge{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand-strong));box-shadow:0 6px 16px #2563eb40;color:#fff}.hero{padding:20px 12px 8px;display:grid;gap:6px}.hero h1{margin:0;font-size:24px;letter-spacing:.2px}.hero p{margin:0;color:var(--muted);font-size:14px}@media (min-width: 768px){.hero{padding:28px 20px 8px}.hero h1{font-size:28px}.hero p{font-size:16px}}.layout{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width: 980px){.layout{grid-template-columns:520px 1fr;gap:16px}}.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:0 8px 24px #0f172a0f;min-width:0}@media (min-width: 768px){.card{padding:16px}}.card h3{margin:0 0 10px;font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.3px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (min-width: 768px){.row{gap:12px}}.col{display:grid;gap:10px;min-width:0}.stack{display:grid;gap:12px;min-width:0}.divider{height:1px;background:var(--border);margin:6px 0}.label{font-size:12px;color:var(--muted)}.input,.select,.file,.number{width:100%;padding:10px 12px;color:var(--text);border:1px solid var(--border);border-radius:10px;background:#fff;outline:none;min-width:0;box-sizing:border-box}.number{appearance:textfield}.select-wrap{position:relative;display:inline-flex}.select-wrap .select{padding-right:36px;appearance:none}.select-wrap:after{content:"";pointer-events:none;position:absolute;right:12px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-60%) rotate(45deg)}.select-compact .select{height:36px;padding:8px 32px 8px 12px;font-size:14px}.select-compact:after{right:10px}.button{padding:10px 14px;border:1px solid var(--brand);border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 14px #2563eb40}.button.secondary{background:#f3f6ff;color:var(--text);border-color:var(--border);box-shadow:none}.button.ghost{background:transparent;color:var(--text);border-color:var(--border)}.button:disabled{opacity:.6;cursor:not-allowed}.help-btn{width:18px;height:18px;border-radius:50%;background:var(--muted);color:#fff;border:none;cursor:pointer;font-size:11px;font-weight:700;display:grid;place-items:center;flex-shrink:0}.help-btn:hover{background:var(--brand)}.help-text{position:absolute;z-index:100;top:100%;left:0;right:0;font-size:12px;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:4px;line-height:1.4;box-shadow:0 8px 24px #0f172a26;min-width:280px}.color-controls{margin-top:8px}.react-colorful{width:100%!important;height:120px!important;border-radius:8px}@media (min-width: 768px){.react-colorful{height:140px!important}}.react-colorful__pointer{width:14px!important;height:14px!important}@media (min-width: 768px){.react-colorful__pointer{width:18px!important;height:18px!important}}.react-colorful__pointer:after{border-width:2px!important}@media (min-width: 768px){.react-colorful__pointer:after{border-width:3px!important}}.color-section{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}@media (max-width: 767px){.color-section{gap:8px}}@media (max-width: 350px){.color-section{grid-template-columns:1fr;gap:12px}}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#f7f9fc;color:var(--text);cursor:pointer;font-size:12px}.chip.active{background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;border-color:transparent;box-shadow:0 6px 14px #2563eb40}.preview-wrap{background:#f9fbff;border:1px solid var(--border);border-radius:14px;padding:16px;display:grid;place-items:center;min-height:280px;position:relative;overflow:hidden;max-width:100%}@media (min-width: 768px){.preview-wrap{padding:24px;min-height:420px}}.checker{position:absolute;inset:0;border-radius:14px;background-image:linear-gradient(45deg,#94a3b81a 25%,transparent 25%),linear-gradient(-45deg,#94a3b81a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#94a3b81a 75%),linear-gradient(-45deg,transparent 75%,#94a3b81a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;opacity:.6;pointer-events:none}.preview-card{position:relative;z-index:1;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;display:grid;place-items:center;min-height:240px;max-width:100%;overflow:hidden}@media (min-width: 768px){.preview-card{padding:20px;min-height:320px}}#qr-preview-host{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}#qr-preview-host canvas,#qr-preview-host svg{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important}