#view-qr .qr-workspace {display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.6fr) minmax(240px,1fr);gap:0;align-items:stretch;}
#view-qr .qr-workspace > .brand-panel {margin:0;min-width:0;border:1px solid #8b5cf6;border-radius:0;padding:16px;background:#0d0d14;}
#view-qr .qr-workspace h3 {margin:0 0 18px;color:#b59bff;}
#view-qr form {display:grid;gap:10px;}
#view-qr [data-qr-type] {display:grid;gap:10px;}
#view-qr [hidden] {display:none!important;}
#view-qr input,#view-qr select,#view-qr textarea {width:100%;min-width:0;box-sizing:border-box;border:1px solid #8b5cf6;background:#07070b;color:#f6f4ff;border-radius:10px;padding:12px;}
#view-qr input[type=color] {height:46px;padding:5px;}
#view-qr label {color:#f6f4ff;}
#view-qr .qr-hint {color:#b6adc7;font-size:.9rem;line-height:1.5;}
#view-qr .qr-output {display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;}
#view-qr .qr-output h3 {align-self:flex-start;}
#view-qr .qr-preview-empty {width:min(100%,360px);aspect-ratio:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;border:1px solid #8b5cf6;border-radius:12px;background:#07070b;}
#view-qr .qr-preview-empty strong {font-size:1.25rem;color:#f6f4ff;}
#view-qr .qr-preview-ready {padding:0;overflow:hidden;}
#view-qr .qr-preview-ready canvas {display:block;width:100%;height:auto;image-rendering:pixelated;}
#view-qr .qr-actions {display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
#view-qr .qr-actions button {min-height:44px;}
#view-qr .qr-preview-label {margin:0;border:1px solid #8b5cf6;border-radius:20px;padding:5px 14px;color:#b59bff;font-size:.85rem;}
#view-qr .qr-colours {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#view-qr .qr-colours label {display:grid;gap:8px;}
#view-qr .qr-colours output {font-size:.85rem;color:#b59bff;}
#view-qr details {border:1px solid #8b5cf6;border-radius:10px;padding:12px;margin-top:18px;}
#view-qr summary {cursor:pointer;color:#f6f4ff;}
@media(max-width:1100px){#view-qr .qr-workspace {grid-template-columns:minmax(220px,1fr) minmax(260px,1.25fr);}#view-qr .qr-appearance {grid-column:1/-1;}}
@media(max-width:700px){#view-qr .qr-workspace {grid-template-columns:minmax(0,1fr);}#view-qr .qr-appearance {grid-column:auto;}#view-qr .qr-workspace > .brand-panel {padding:16px;}}

#view-qr .qr-save-wrap {position:relative;}
#view-qr .qr-save-menu {position:absolute;top:100%;right:0;z-index:10;width:180px;padding:6px;border:1px solid #8b5cf6;border-radius:10px;background:#171022;box-shadow:0 8px 24px #0008;}
#view-qr .qr-save-menu button {display:block;width:100%;text-align:left;border:0;background:transparent;color:#f6f4ff;padding:10px;cursor:pointer;}
#view-qr .qr-save-menu button:hover,#view-qr .qr-save-menu button:focus-visible {background:#3b2460;}
#view-qr .qr-logo-controls {display:grid;gap:12px;min-width:0;border:1px solid #705098;border-radius:10px;padding:12px;margin:8px 0 0;}
#view-qr .qr-logo-controls legend {color:#b59bff;padding:0 6px;}
#view-qr .qr-checkbox {display:flex;gap:10px;align-items:center;line-height:1.4;}
#view-qr input[type=checkbox] {width:18px;height:18px;flex-shrink:0;accent-color:#8b5cf6;}
#view-qr #qr-logo-preview {display:flex;gap:12px;align-items:center;}
#view-qr #qr-logo-thumbnail {width:64px;height:64px;object-fit:contain;}
#view-qr dialog {width:min(680px,calc(100vw - 48px));box-sizing:border-box;max-height:80vh;overflow:auto;background:#171022;color:#f6f4ff;border:1px solid #8b5cf6;border-radius:16px;padding:24px;}
#view-qr dialog::backdrop {background:#000a;}
#view-qr #qr-library-items {display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:20px;}
#view-qr #qr-library-items button {display:grid;gap:6px;min-width:0;padding:8px;border:1px solid #705098;border-radius:10px;background:#0d0d14;color:#f6f4ff;cursor:pointer;}
#view-qr #qr-library-items img {width:100%;height:100px;object-fit:contain;}
#view-qr #qr-library-items span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Optional logo settings stay out of the way until requested. */
#view-qr .qr-logo-fold {margin-top:8px;padding:10px 12px;}
#view-qr .qr-logo-fold .qr-logo-controls {border:0;padding:14px 0 0;margin:0;}
#view-qr .qr-logo-fold summary {color:#b59bff;font-weight:600;}
#view-qr .qr-workspace {align-items:stretch;}
#view-qr .qr-workspace > .brand-panel {height:auto;min-height:0;}
#view-qr .qr-preview-empty {position:relative;overflow:hidden;padding:0;}
#view-qr .qr-idle-art {display:block;width:100%;height:100%;object-fit:cover;}
#view-qr .qr-idle-copy {position:absolute;inset:18px 16px auto;text-align:left;text-shadow:0 2px 8px #000;}
#view-qr .qr-idle-copy strong {font:600 23px/1.2 Georgia,serif;}
#view-qr .qr-idle-copy p {font-size:13px;max-width:70%;margin:8px 0;}

#view-qr .qr-workspace > .brand-panel {box-sizing:border-box;}
#view-qr #qr-generation-note:empty {display:none;}

#view-qr .qr-preview-ready {aspect-ratio:auto;}
#view-qr input[type=range] {padding:8px 0;accent-color:#8b5cf6;}
#view-qr #qr-frame-caption-controls {display:grid;gap:10px;}

#view-qr #qr-frame-poster-controls {display:grid;gap:10px;}
#view-qr .qr-preview-ready {width:100%;}
#view-qr .qr-preview-ready canvas {image-rendering:auto;}

#view-qr #qr-character-choices {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;}
#view-qr #qr-character-choices button {display:grid;justify-items:center;gap:6px;min-width:0;padding:8px 4px;border:1px solid #715397;border-radius:12px;background:rgba(15,10,29,.65);color:#f6f4ff;cursor:pointer;font-size:.8rem;}
#view-qr #qr-character-choices button[aria-pressed=true] {border-color:#c8a6ff;background:rgba(117,57,181,.45);box-shadow:0 0 0 1px #b59bff;}
#view-qr #qr-character-choices button:focus-visible {outline:2px solid #e6d5ff;outline-offset:3px;}
#view-qr #qr-character-choices img {width:100%;height:95px;object-fit:contain;}
#view-qr .qr-character-gallery {margin:12px 0;}

#view-qr .qr-character-none {display:grid;place-items:center;height:95px;font-size:2rem;color:#b59bff;}