.qr-page{--bg:#0a0a14;--surface:#ffffff0b;--surface-2:#ffffff12;--line:#ffffff17;--line-strong:#ffffff2e;--ink:#f4f4ff;--ink-2:#f4f4ff9e;--ink-3:#f4f4ff61;--accent:#6c63ff;--accent-2:#a855f7;--ok:#22c55e;--warn:#f59e0b;--err:#f87171;--r-sm:10px;--r-md:14px;--r-lg:20px;background:var(--bg);min-height:100svh;color:var(--ink);opacity:0;justify-content:center;padding:clamp(1rem,3vw,2.5rem) clamp(.75rem,3vw,1.5rem);font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:flex;position:relative;overflow-x:hidden}.qr-page.show{opacity:1;transition:opacity .35s}.qr-page *,.qr-page :before,.qr-page :after{box-sizing:border-box}.qr-orb{filter:blur(90px);opacity:.14;pointer-events:none;z-index:0;border-radius:50%;position:fixed}.orb1{background:var(--accent);width:520px;height:520px;top:-160px;right:-140px}.orb2{background:var(--accent-2);width:420px;height:420px;bottom:-160px;left:-120px}.qr-shell{z-index:1;width:100%;max-width:1040px;position:relative}.qr-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.qr-brand{align-items:center;gap:.9rem;min-width:0;display:flex}.qr-mark{border-radius:var(--r-md);color:#b9b4ff;background:linear-gradient(135deg,#6c63ff38,#a855f72e);border:1px solid #6c63ff59;flex-shrink:0;place-items:center;width:46px;height:46px;display:grid}.qr-mark svg{width:24px;height:24px}.qr-title{letter-spacing:-.4px;margin:0;font-size:clamp(1.25rem,3vw,1.6rem);font-weight:700}.qr-sub{color:var(--ink-3);margin:.15rem 0 0;font-size:.82rem}.qr-home{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);align-items:center;gap:.45rem;padding:.6rem .95rem;font-size:.82rem;font-weight:600;text-decoration:none;transition:border-color .2s,color .2s,background .2s;display:inline-flex}.qr-home:hover{color:var(--ink);border-color:var(--line-strong);background:var(--surface-2)}.qr-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:1.25rem;display:grid}.qr-form,.preview-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:1.25rem}.qr-preview{position:sticky;top:1.5rem}.seg{border:1px solid var(--line);border-radius:var(--r-md);scrollbar-width:none;background:#00000040;gap:4px;margin-bottom:1.1rem;padding:4px;display:flex;overflow-x:auto}.seg::-webkit-scrollbar{display:none}.seg.small{margin-bottom:0}.seg-btn{border-radius:var(--r-sm);min-height:38px;color:var(--ink-2);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:none;flex:auto;padding:.45rem .7rem;font-size:.82rem;font-weight:600;transition:background .18s,color .18s}.seg-btn:hover{color:var(--ink);background:#ffffff0d}.seg-btn.on{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));box-shadow:0 4px 14px #6c63ff4d}.field{flex-direction:column;gap:.4rem;margin-bottom:.9rem;display:flex}.row{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.label{color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;font-weight:700}.input{border-radius:var(--r-sm);border:1px solid var(--line);width:100%;min-height:42px;color:var(--ink);font:inherit;background:#00000040;padding:.6rem .8rem;font-size:.88rem;transition:border-color .18s,background .18s}.input::placeholder{color:#f4f4ff40}.input:focus{background:#6c63ff14;border-color:#6c63ffb3;outline:none}.input:disabled{opacity:.45;cursor:not-allowed}.input.area{resize:vertical;min-height:96px;line-height:1.55}select.input{cursor:pointer}select.input option{color:var(--ink);background:#14142a}.hint-action{text-align:left;border-radius:var(--r-sm);color:#c3bfff;font:inherit;cursor:pointer;background:#6c63ff14;border:1px dashed #6c63ff73;margin-top:.15rem;padding:.55rem .7rem;font-size:.78rem;transition:background .18s}.hint-action:hover{background:#6c63ff29}.note{color:var(--ink-3);margin:.1rem 0 .9rem;font-size:.75rem;line-height:1.5}.note.center{text-align:center;margin:.8rem 0 0}.check{color:var(--ink-2);cursor:pointer;align-items:center;gap:.55rem;margin-bottom:.75rem;font-size:.82rem;display:flex}.check input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}.divider{background:var(--line);height:1px;margin:.4rem 0 1.1rem}.color{align-items:center;gap:.5rem;display:flex}.color input[type=color]{border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:#00000040;flex-shrink:0;width:44px;height:42px;padding:3px}.color input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.color input[type=color]:disabled{opacity:.4;cursor:not-allowed}.color .hex{font-family:ui-monospace,Courier New,monospace;font-size:.8rem}.color.off .hex{color:var(--ink-3)}.switch-row{border-radius:var(--r-sm);border:1px solid var(--line);min-height:46px;color:var(--ink-2);cursor:pointer;background:#0003;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1.1rem;padding:.55rem .85rem;font-size:.84rem;display:flex}.switch-row input{opacity:0;width:0;height:0;position:absolute}.switch{background:#ffffff29;border-radius:999px;flex-shrink:0;width:40px;height:22px;transition:background .2s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.switch-row input:checked~.switch{background:var(--accent)}.switch-row input:checked~.switch:after{transform:translate(18px)}.switch-row input:focus-visible~.switch{box-shadow:0 0 0 3px #6c63ff59}.stage{border-radius:var(--r-md);background:#fff;place-items:center;min-height:300px;padding:1.25rem;transition:opacity .18s;display:grid}.stage.busy{opacity:.55}.stage.checker{background-color:#fff;background-image:linear-gradient(45deg,#d4d4d8 25%,#0000 25%),linear-gradient(-45deg,#d4d4d8 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d4d4d8 75%),linear-gradient(-45deg,#0000 75%,#d4d4d8 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.qr-img{width:100%;max-width:260px;height:auto;image-rendering:pixelated;display:block}.stage-empty{color:#9ca3af;text-align:center;flex-direction:column;align-items:center;gap:.6rem;display:flex}.stage-empty svg{width:56px;height:56px}.stage-empty p{max-width:22ch;margin:0;font-size:.84rem;line-height:1.5}.alert{border-radius:var(--r-sm);margin:.9rem 0 0;padding:.65rem .8rem;font-size:.78rem;line-height:1.5}.alert.warn{color:#fcd34d;background:#f59e0b1f;border:1px solid #f59e0b4d}.alert.error{color:#fca5a5;background:#f871711f;border:1px solid #f871714d}.tags{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.9rem;display:flex}.tag{color:#b9b4ff;background:#6c63ff24;border:1px solid #6c63ff47;border-radius:999px;padding:.25rem .6rem;font-size:.72rem;font-weight:600}.tag.ok{color:#86efac;background:#22c55e1f;border-color:#22c55e4d}.actions{gap:.5rem;margin-top:.9rem;display:flex}.btn{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;flex:auto;justify-content:center;align-items:center;gap:.4rem;padding:.6rem .9rem;font-size:.84rem;font-weight:600;transition:background .18s,border-color .18s,transform .12s,opacity .18s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--line-strong);background:#ffffff1f}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));border:none;flex:2 auto;box-shadow:0 6px 20px #6c63ff47}.btn.primary:hover:not(:disabled){filter:brightness(1.08)}@media (max-width:900px){.qr-grid{grid-template-columns:minmax(0,1fr)}.qr-preview{position:static}}@media (max-width:560px){.qr-form,.preview-card{padding:1rem}.row{grid-template-columns:1fr;gap:.4rem}.qr-header{margin-bottom:1.1rem}.qr-sub{display:none}.actions{flex-wrap:wrap}.btn.primary{flex-basis:100%}.stage{min-height:240px;padding:1rem}}@media (pointer:coarse){.seg-btn{min-height:42px}.input{min-height:46px}.color input[type=color]{height:46px}.qr-home{min-height:42px}.check input{width:20px;height:20px}}