:root { color-scheme:light; --page:#f6f7f9; --surface:#fff; --text:#1d2735; --secondary:#7b8594; --border:#e5e9f0; --soft:#f8f9fb; --accent:#2563eb; --track:#e6e9ef; font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; font-synthesis:none; }
    * { box-sizing:border-box; }
    html,body { min-width:280px; margin:0; }
    body { background:var(--page); color:var(--text); }
    button,input,textarea { font:inherit; }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid #acc5fa; outline-offset:3px; }
    .stage { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:30px 14px; }
    .stack { width:min(100%,490px); display:flex; flex-direction:column; gap:22px; align-items:stretch; }
    .card { width:100%; background:var(--surface); border:1px solid #e1e6ed; border-radius:24px; padding:33px 32px 26px; box-shadow:0 16px 50px rgba(24,38,59,.045),0 2px 9px rgba(24,38,59,.025); }
    h1 { font-size:24px; line-height:1.3; font-weight:700; letter-spacing:-.055em; text-align:center; margin:0 0 24px; }
    .qr-surface { min-height:246px; border:1px solid #e4e9f0; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--soft); padding:17px; }
    .qr-paper { width:210px; height:210px; display:grid; place-items:center; background:#fff; border-radius:10px; box-shadow:0 2px 12px rgba(21,32,50,.045); overflow:hidden; }
    #qrPreview { width:100%; height:100%; display:grid; place-items:center; }
    #qrPreview svg { width:100%; height:100%; display:block; }
    .field { margin-top:20px; }
    .field-label { font-size:13px; font-weight:600; color:#3d495a; display:block; margin-bottom:9px; }
    textarea { width:100%; min-height:68px; max-height:154px; resize:none; padding:14px 15px; border:1px solid #dfe5ed; border-radius:12px; background:#fff; color:var(--text); font-size:14px; line-height:1.5; outline:none; transition:border-color .15s,box-shadow .15s; overflow-wrap:anywhere; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
    textarea::-webkit-scrollbar { display:none; }
    textarea::placeholder { color:#a0aab7; }
    textarea:focus { border-color:#9fbaf3; box-shadow:0 0 0 3px #e9f0ff; }
    .actions { margin-top:16px; display:grid; grid-template-columns:1fr 114px; gap:10px; }
    .button { min-width:0; height:49px; border-radius:12px; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .15s,color .15s,transform .15s,border-color .15s; }
    .button:active { transform:scale(.992); }
    .primary { border:1px solid var(--accent); color:white; background:var(--accent); }
    .primary:hover { background:#1d4ed8; border-color:#1d4ed8; }
    .secondary { background:white; border:1px solid #dfe5ed; color:#48566a; }
    .secondary:hover { background:#f5f8fc; border-color:#cfd9e6; }
    .button:disabled { opacity:.42; cursor:not-allowed; transform:none; }
    .icon { width:18px; height:18px; display:block; fill:currentColor; flex:0 0 auto; }
    .customize { border-top:1px solid #edf0f4; margin-top:23px; }
    .disclosure { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:18px 1px 0; border:0; background:transparent; text-align:left; color:#3a485a; font-size:13px; font-weight:600; }
    .chevron { width:18px; height:18px; fill:currentColor; color:#8a95a3; transition:transform .23s cubic-bezier(.22,1,.36,1); }
    .disclosure[aria-expanded="true"] .chevron { transform:rotate(180deg); }
    .expandable { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .24s cubic-bezier(.22,1,.36,1),opacity .18s ease-out; }
    .expandable.is-open { grid-template-rows:1fr; opacity:1; }
    .expandable-inner { min-height:0; overflow:hidden; }
    .expandable:not(.is-open) { pointer-events:none; }
    .expandable > .expandable-inner > * { transition:transform .24s cubic-bezier(.22,1,.36,1); }
    .expandable:not(.is-open) > .expandable-inner > * { transform:translateY(-5px); }
    .custom-panel { padding-top:23px; }
    .setting-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
    .setting-label { font-size:13px; font-weight:500; color:#3d495a; }
    .minor { font-size:11px; color:#9aa3b0; }
    .logo-picker { width:100%; min-height:63px; display:flex; align-items:center; gap:13px; margin-top:11px; padding:11px 12px; border:1px dashed #cfd8e4; border-radius:12px; background:#fbfcfd; text-align:left; color:#445267; transition:border-color .15s,background .15s; }
    .logo-picker:hover { border-color:#98b7ed; background:#f8faff; }
    .logo-thumb { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border:1px solid #e4e9f0; background:white; border-radius:9px; overflow:hidden; }
    .logo-thumb img { width:100%; height:100%; object-fit:contain; }
    .logo-thumb .icon { width:19px; height:19px; color:#8190a4; }
    .logo-picker strong { font-size:12px; font-weight:600; display:block; color:#46566a; }
    .logo-picker small { display:block; font-size:11px; color:#8c98a7; margin-top:3px; }
    .remove { display:none; margin:10px 0 0; padding:0; border:0; background:none; color:#788799; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
    .remove:hover { color:#37465a; }
    .remove.visible { display:inline-block; }
    .more { margin-top:20px; border-top:1px solid #edf0f4; }
    .more .disclosure { font-weight:500; padding-top:18px; }
    .advanced { padding:19px 0 2px; display:grid; gap:16px; }
    .colors { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .color-field { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #e5e9f0; border-radius:11px; padding:9px 10px 9px 12px; }
    .color-field label { font-size:12px; color:#5d6a7b; }
    .color-field input[type=color] { width:35px; height:32px; border:1px solid #e1e6ed; border-radius:8px; padding:3px; background:#fff; cursor:pointer; }
    .reset { justify-self:start; padding:0; background:none; border:0; color:#6b7b90; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
    .reset:hover { color:#334155; }
    .notice { color:#af6e28; font-size:11px; line-height:1.5; margin:0; display:none; }
    .notice.visible { display:block; }
    .error { color:#b54a43; font-size:12px; line-height:1.5; margin:10px 0 0; display:none; }
    .error.visible { display:block; }
    .attribution { margin:0; color:var(--secondary); font-size:12px; line-height:1.5; text-align:center; }
    .attribution a { color:inherit; text-decoration:none; transition:color .15s; }
    .attribution a:hover { color:var(--accent); }
    .attribution a:focus-visible { outline:3px solid #a5c0fa; outline-offset:3px; }
    .toast { position:fixed; z-index:10; left:50%; bottom:max(24px,env(safe-area-inset-bottom,0px) + 16px); display:flex; align-items:center; gap:9px; max-width:calc(100vw - 32px); padding:12px 17px; border:1px solid #303b4c; border-radius:13px; background:#202b3b; color:#fff; box-shadow:0 12px 35px #1724382b; font-size:13px; font-weight:600; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; transform:translate(-50%,12px); transition:opacity .18s ease,transform .18s ease,visibility .18s ease; }
    .toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
    .toast .icon { width:17px; height:17px; color:#78dbae; }
    .toast.is-error .icon { color:#ffb3ad; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    @media(max-width:480px) { .stage { padding:18px 12px; } .card { padding:29px 22px 23px; border-radius:22px; } h1 { font-size:23px; margin-bottom:21px; } .qr-surface { min-height:236px; padding:13px; } .qr-paper { width:202px; height:202px; } }
    @media(max-width:340px) { .stage { padding:12px 8px; } .card { padding:24px 17px 19px; } h1 { font-size:21px; } .qr-surface { min-height:222px; } .qr-paper { width:190px; height:190px; } .actions { grid-template-columns:minmax(0,1fr) 98px; } .button { font-size:12px; } }
    @media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }