:root{color:#18212f;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f4f7f2}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,textarea{letter-spacing:0}.appShell{background:linear-gradient(#ffffffa3,#f4f7f266),#f4f7f2;min-height:100vh;padding:24px}.topbar{justify-content:space-between;align-items:center;gap:16px;width:min(1180px,100%);margin:0 auto 18px;display:flex}.brandMark{color:#fff;background:#0f766e;border:1px solid #0b5f59;border-radius:8px;place-items:center;width:48px;height:48px;display:grid;box-shadow:0 10px 24px #0f766e33}.brandRow,.previewHeader{align-items:center;gap:12px;display:flex}.previewHeader{justify-content:space-between}.brandMark svg{width:28px;height:28px}.subtleText,.fieldLabel,.metric{color:#5b6574}.subtleText{font-size:.95rem}.workspace{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);align-items:start;gap:18px;width:min(1180px,100%);margin:0 auto;display:grid}.footer{color:#5b6574;text-align:center;width:min(1180px,100%);margin:18px auto 0;padding:14px 0 2px;font-size:.92rem}.footer a{color:#0f766e;font-weight:700;text-decoration:none}.footer a:hover{text-decoration:underline}.panel{background:#fff;border:1px solid #dbe3dc;border-radius:8px;box-shadow:0 18px 44px #18212f14}.editorPanel,.previewPanel{padding:22px}.modeGroup{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;display:grid}.modeGroup .MuiToggleButton-root{color:#283243;white-space:nowrap;border:1px solid #dbe3dc;gap:7px;min-height:44px;overflow:hidden}.modeGroup .MuiToggleButton-root.Mui-selected{color:#0f5f59;background:#e7f3ef;border-color:#90c8bd}.inlineFields{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.settingsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.fieldLabel{margin-bottom:8px;font-size:.86rem;font-weight:700;display:block}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:8px;width:34px;height:34px;box-shadow:inset 0 0 0 1px #18212f2e}.swatch.active{border-color:#d49a22}.swatch.light{box-shadow:inset 0 0 0 1px #18212f38,0 1px 2px #18212f14}.sliderRow{grid-template-columns:72px minmax(0,1fr) 64px;align-items:center;gap:12px;display:grid}.sliderRow .fieldLabel{margin-bottom:0}.customPanel{background:#fbfdff;border:1px solid #d2dce8;border-radius:8px;overflow:hidden;box-shadow:0 12px 28px #18212f0f}.customHeader{color:#1d2a49;justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:0 16px;font-weight:800;display:flex}.customHeader .MuiIconButton-root{color:#1d2a49}.customTabs{border-bottom:1px solid #dbe3dc;grid-template-columns:repeat(3,minmax(0,1fr));width:calc(100% - 28px);margin:0 14px;display:grid}.customTabs .MuiToggleButton-root{color:#536484;background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;min-height:48px;font-size:.98rem}.customTabs .MuiToggleButton-root.Mui-selected{color:#0875d1;background:0 0;border-bottom-color:#0875d1}.customContent{padding:24px 16px 20px}.frameGrid{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:14px;display:grid}.frameChoice{cursor:pointer;background:#f3fbff;border:1px solid #54c7ff;border-radius:6px;place-items:center;min-height:72px;display:grid}.frameChoice.active{background:#e9f5ff;border:3px solid #0875d1}.miniFrame{color:#111827;background:#fff;border:1px solid #c9d5df;border-radius:3px;place-items:center;width:44px;height:52px;display:grid;position:relative}.miniQr{background-color:#0000;background-image:linear-gradient(90deg,#b8c3cc 33%,#0000 33% 66%,#b8c3cc 66%),linear-gradient(#b8c3cc 33%,#0000 33% 66%,#b8c3cc 66%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:9px 9px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border:1px solid #d8e0e8;width:22px;height:22px}.miniLabel{color:#fff;text-align:center;white-space:nowrap;background:#111827;border-radius:2px;min-width:30px;padding:2px 3px;font-size:5px;font-weight:800;line-height:1;position:absolute;bottom:3px;left:50%;transform:translate(-50%)}.miniFrame-none{background:0 0;border:3px solid #1d2a49;border-radius:50%;width:40px;height:40px}.miniFrame-none .miniQr{display:none}.miniFrame-none:after{content:"";background:#1d2a49;width:32px;height:3px;position:absolute;transform:rotate(45deg)}.miniFrame-top .miniLabel{top:3px;bottom:auto}.miniFrame-script{background:0 0;border:0}.miniFrame-script .miniLabel{color:#111827;background:0 0;font-family:Georgia,serif;font-size:8px;font-style:italic;bottom:1px}.miniFrame-corner{background:0 0;border:0}.miniFrame-corner:before{content:"";border:2px solid #0000;border-color:#111827 #0000 #0000 #111827;position:absolute;inset:4px}.miniFrame-badge .miniLabel{border-radius:8px}.miniFrame-ticket{border-style:dashed}.logoUploader{grid-template-columns:92px minmax(0,1fr);align-items:center;gap:16px;display:grid}.logoPreview{color:#0f766e;background:#f7faf6;border:1px dashed #90c8bd;border-radius:8px;place-items:center;width:92px;height:92px;display:grid;overflow:hidden}.logoPreview img{object-fit:contain;width:100%;height:100%}.logoPreview svg{width:32px;height:32px}.logoActions,.logoButtons{flex-wrap:wrap;gap:10px;display:flex}.logoActions{flex-direction:column}.shapeGroup{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.shapeGroup .MuiToggleButton-root{color:#283243;border:1px solid #dbe3dc;gap:6px;min-height:42px}.shapeGroup .MuiToggleButton-root.Mui-selected{color:#0f5f59;background:#e7f3ef;border-color:#90c8bd}.metric{text-align:right;font-variant-numeric:tabular-nums;font-size:.9rem}.qrStage{border:1px solid #dbe3dc;border-radius:8px;place-items:center;min-height:360px;padding:28px;display:grid;position:relative;overflow:hidden}.qrStage.muted .visibleQr{opacity:.36}.visibleQr{width:100%;max-width:100%;height:auto;transition:opacity .16s;display:block}.qrFrame{color:var(--frame-color);background:var(--frame-bg);place-items:center;width:min(100%,360px);max-width:100%;display:grid;position:relative}.frame-none{width:min(100%,320px);padding:0}.frame-border,.frame-ticket,.frame-corner,.frame-badge,.frame-bottom,.frame-top,.frame-script{border:3px solid var(--frame-color);border-radius:22px;padding:24px}.frame-ticket{border-style:dashed}.frame-corner{border-color:#0000}.frame-corner:before{content:"";border:4px solid var(--frame-color);pointer-events:none;border-bottom-color:#0000;border-right-color:#0000;position:absolute;inset:12px}.frame-bottom,.frame-badge,.frame-script,.frame-corner,.frame-border,.frame-ticket{padding-bottom:66px}.frame-top{padding-top:66px}.frame-bottom:after,.frame-border:after,.frame-ticket:after,.frame-corner:after,.frame-top:before,.frame-badge:after{content:attr(data-label);min-width:132px;color:var(--frame-bg);background:var(--frame-color);text-align:center;border-radius:5px;padding:8px 14px;font-size:.92rem;font-weight:800;line-height:1;position:absolute;left:50%;transform:translate(-50%)}.frame-badge:after{border-radius:999px}.frame-bottom:after,.frame-border:after,.frame-ticket:after,.frame-corner:after,.frame-badge:after{bottom:20px}.frame-top:before{top:20px}.frame-script:after{content:attr(data-label);color:var(--frame-color);font-family:Georgia,serif;font-size:1.1rem;font-style:italic;font-weight:800;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.qrShape-rounded,.qrShape-dots{outline:2px solid #0000}.exportCanvas{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.payloadBox{background:#f9fbf8;border:1px solid #dbe3dc;border-radius:8px;padding:14px}.payloadBox pre{color:#283243;white-space:pre-wrap;word-break:break-word;min-height:80px;max-height:180px;margin:0;font:.88rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto}.authBox{background:#fff;border:1px solid #dbe3dc;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.authModeGroup{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.authModeGroup .MuiToggleButton-root{border:1px solid #dbe3dc;border-radius:8px;min-height:40px}.authModeGroup .MuiToggleButton-root.Mui-selected{color:#0f5f59;background:#e7f3ef;border-color:#90c8bd}.errorText{color:#b42318;font-size:.9rem}.actionGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}@media (width<=920px){.appShell{padding:16px}.topbar{align-items:flex-start}.workspace{grid-template-columns:1fr}}@media (width<=640px){.topbar{flex-direction:column}.editorPanel,.previewPanel{padding:16px}.modeGroup{grid-template-columns:repeat(2,minmax(0,1fr))}.inlineFields,.settingsGrid,.actionGrid{grid-template-columns:1fr}.sliderRow{grid-template-columns:1fr;gap:4px}.metric{text-align:left}.qrStage{min-height:280px;padding:18px}}
