/* QR Studio — locally scoped to /solutions/qr-generator/. */
.qr-studio { padding-block: clamp(36px,6vw,76px) 100px; }
.qr-hero { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:42px; }
.qr-hero h1 { margin:0; color:#f5f0e8; font-size:clamp(56px,8vw,112px); line-height:.92; font-weight:630; letter-spacing:-.065em; }
.qr-hero h1 em, .qr-bottom h2 em { color:#d39a74; font-family:var(--serif); font-weight:400; }
.qr-intro-copy { max-width:570px; margin:26px 0 0; color:#c7c0b7; font-size:clamp(16px,1.5vw,19px); line-height:1.65; }
.qr-hero-meta { flex:0 0 auto; display:grid; gap:9px; padding-bottom:7px; text-align:right; color:#c28c67; font-size:10px; font-weight:650; letter-spacing:.13em; }
.qr-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:20px; align-items:start; }
.qr-panel { min-width:0; background:#20201e; border:1px solid rgba(245,240,232,.13); border-radius:20px; padding:clamp(22px,3vw,37px); }
.qr-panel-head { padding-bottom:22px; border-bottom:1px solid rgba(245,240,232,.12); margin-bottom:25px; }
.qr-step { display:block; margin-bottom:10px; color:#d39a74; font-size:10px; letter-spacing:.16em; font-weight:750; }
.qr-panel-head h2 { margin:0 0 6px; color:#f5f0e8; font-size:clamp(21px,2.3vw,28px); letter-spacing:-.035em; line-height:1.25; font-weight:600; }
.qr-panel-head p { margin:0; color:#c4bdb3; font-size:14px; line-height:1.5; }
.qr-field { display:flex; flex-direction:column; gap:9px; min-width:0; margin-bottom:20px; }
.qr-field label { color:#f2ede5; font-weight:650; font-size:13px; }
.qr-field input:not([type=color]), .qr-field select, .qr-field textarea { display:block; width:100%; min-width:0; border:1px solid #68635b; border-radius:10px; background:#171715; color:#faf7ef; padding:12px 13px; font:500 15px/1.5 var(--sans); appearance:none; }
.qr-field select { appearance:auto; cursor:pointer; }
.qr-field textarea { min-height:96px; resize:vertical; }
/* The URL example is a hint, never prefilled user data. Hide on focus for mobile typing. */
#qr-value::placeholder { color:#928b82; opacity:1; }
#qr-value:focus::placeholder { color:transparent; }
.qr-field :is(select,textarea,input):focus-visible { outline:2px solid #dda885; outline-offset:3px; border-color:#d9a47b; }
.qr-field small { font-size:12px; color:#c5bdb3; line-height:1.5; }
.qr-rule { display:flex; align-items:center; gap:15px; margin:27px 0 21px; color:#d39a74; font-size:10px; font-weight:750; letter-spacing:.13em; }
.qr-rule i { flex:1; height:1px; background:rgba(245,240,232,.12); }
.qr-colour-row, .qr-settings-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.qr-colour-input { display:flex; align-items:center; gap:10px; min-height:47px; background:#171715; border:1px solid #68635b; border-radius:10px; padding:5px 11px 5px 6px; }
.qr-colour-input input { flex:none; width:38px; height:34px; padding:0; border:0; background:none; cursor:pointer; }
.qr-colour-input span { color:#c4bdb3; font-size:12px; }
.qr-form-footer { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-top:9px; flex-wrap:wrap; }
.qr-reset { color:#e9d1bd; font:600 13px var(--sans); text-decoration:underline; text-underline-offset:4px; border:0; background:none; cursor:pointer; padding:9px 0; }
.qr-form-footer>span { font-size:12px; color:#c4bdb3; }
.qr-preview-stage { display:grid; place-items:center; min-height:360px; padding:30px; border:1px solid rgba(245,240,232,.10); border-radius:14px; background:radial-gradient(circle at 50% 25%,#393730,#181817 72%); }
.qr-preview { display:grid; place-items:center; width:min(100%,292px); aspect-ratio:1/1; background:#fff; box-shadow:0 12px 46px rgba(0,0,0,.35); }
.qr-preview svg { width:100%; height:100%; display:block; }
.qr-placeholder { color:#494949; text-align:center; padding:20px; }
.qr-status { min-height:45px; margin:15px 0 7px; color:#e6c8af; font-size:13px; line-height:1.55; }
.qr-status[data-state=error] { color:#ffb5a2; }
.qr-status[data-state=ok] { color:#c6d6b3; }
.qr-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qr-download { display:block; min-height:52px; padding:13px; border-radius:10px; border:1px solid #c28c67; font:700 13px/1.3 var(--sans); letter-spacing:.01em; text-align:center; cursor:pointer; }
.qr-primary { background:#d4a07c; color:#17130f; }
.qr-secondary { background:transparent; color:#f1d5c1; }
.qr-download:hover:not(:disabled) { filter:brightness(1.12); }
.qr-download:disabled { opacity:.45; cursor:not-allowed; }
.qr-result-note { margin:20px 0 0; color:#bfb7ad; font-size:12px; line-height:1.65; }
.qr-bottom { display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(30px,8vw,130px); margin-top:55px; padding-top:48px; border-top:1px solid rgba(245,240,232,.15); }
.qr-bottom h2 { margin:0 0 14px; color:#f4efe8; font-size:clamp(30px,4vw,48px); line-height:1.07; letter-spacing:-.04em; }
.qr-bottom h3 { margin:0 0 12px; color:#f4efe8; font-size:18px; }
.qr-bottom p { max-width:540px; margin:0; color:#c4bdb3; font-size:14px; line-height:1.7; }
.qr-bottom a { display:inline-block; margin-top:16px; color:#f0c5a6; font-weight:650; font-size:13px; }
@media (max-width:900px) {
  .qr-hero-meta { display:none; }
  .qr-workspace { grid-template-columns:1fr; }
  .qr-preview-stage { min-height:320px; }
  .qr-bottom { gap:35px; }
}
@media (max-width:650px) {
  .qr-studio { padding-top:36px; padding-bottom:65px; }
  .qr-hero { margin-bottom:27px; }
  .qr-hero h1 { font-size:clamp(55px,12.5vw,78px); }
  .qr-workspace { gap:13px; }
  .qr-panel { border-radius:15px; padding:20px; }
  .qr-colour-row,.qr-settings-row { gap:11px; }
  .qr-preview-stage { min-height:290px; padding:22px; }
  .qr-preview { width:min(100%,248px); }
  .qr-bottom { grid-template-columns:1fr; margin-top:38px; padding-top:36px; }
}
@media (max-width:350px) { .qr-actions,.qr-colour-row,.qr-settings-row { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .qr-studio * { scroll-behavior:auto; } }

/* Browsers may not honour HTML [hidden] when a class explicitly sets display. */
.qr-extra[hidden], #qr-main-fields[hidden], #qr-wifi-password-group[hidden] { display:none !important; }
.qr-extra { margin-bottom:7px; }
.qr-tick-label { display:flex; align-items:center; gap:10px; margin:0 0 24px; color:#eee3da; font-size:13px; }
.qr-tick-label input { inline-size:18px; block-size:18px; accent-color:#d4a07c; }
.qr-field-note { color:#c4bdb3; font-size:12px; margin:0 0 18px; line-height:1.5; }
.qr-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.qr-download { min-height:54px; }
@media (max-width:700px) { .qr-actions { grid-template-columns:1fr 1fr; } }
@media print {
  @page { size:auto; margin:18mm; }
  html, body { background:#fff !important; color:#000 !important; min-height:0; }
  .site-header,.site-footer,.skip-link,.qr-hero,.qr-controls,.qr-panel-head,.qr-status,.qr-actions,.qr-result-note,.qr-bottom { display:none !important; }
  .qr-studio { width:100%; margin:0; padding:0; }
  .qr-workspace { display:block; margin:0; padding:0; }
  .qr-result { display:block; width:100%; padding:0; border:0; box-shadow:none; background:#fff; }
  .qr-preview-stage { display:flex; justify-content:center; align-items:flex-start; padding:8mm 0 0; min-height:0; border:0; background:#fff; }
  .qr-preview { width:75mm; height:75mm; background:#fff; box-shadow:none; }
}

/* Logo uploads and brand-style controls remain local to QR Studio. */
#qr-logo { display:block; width:100%; min-width:0; padding:9px; border:1px dashed #756a5d; border-radius:10px; background:#171715; color:#eee7dd; font:500 12px/1.45 var(--sans); }
#qr-logo::file-selector-button { margin-right:12px; border:0; border-radius:7px; padding:9px 11px; background:#d4a07c; color:#241b15; font:700 12px var(--sans); cursor:pointer; }
.qr-remove-logo { align-self:flex-start; margin-top:0; }
.qr-logo-sizing { margin-bottom:8px; }
.qr-remove-logo[hidden] { display:none !important; }

/* Curated 100-icon gallery: business-specific, selectable, and keyboard accessible. */
.qr-symbol-section { margin-top:10px; }
.qr-symbol-total { display:inline-block; margin-left:8px; color:#e1aa82; font-size:11px; font-weight:650; }
.qr-symbol-section .qr-field-note { margin:0 0 3px; }
.qr-icon-tools { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:10px; }
.qr-field .qr-icon-tools input, .qr-field .qr-icon-tools select { margin:0; }
.qr-icon-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-height:320px; overflow:auto; overscroll-behavior:contain; padding:4px 3px 8px; scrollbar-color:#8f7867 #282622; }
.qr-icon-button { min-width:0; min-height:97px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 5px; border:1px solid #665b52; border-radius:11px; background:#282522; color:#f1e7db; cursor:pointer; font:550 10px/1.3 var(--sans); overflow-wrap:anywhere; }
.qr-icon-button svg { width:30px; height:30px; fill:currentColor; color:#e5b48f; flex:0 0 auto; }
.qr-icon-button>span { display:block; max-width:100%; text-align:center; }
.qr-icon-button:hover { border-color:#d3a17e; background:#332c27; }
.qr-icon-button[aria-pressed="true"] { background:#4b3627; border-color:#f5c09c; box-shadow:inset 0 0 0 1px #f5c09c; }
.qr-icon-button:focus-visible { outline:3px solid #f5bc90; outline-offset:2px; }
.qr-icon-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.qr-icon-foot>small { color:#d0c1b5; }
#qr-icon-clear[hidden] { display:none !important; }
.qr-symbol-info a { color:#e4b48e; text-underline-offset:3px; }
@media (max-width:700px) { .qr-icon-tools { grid-template-columns:1fr; } .qr-icon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:300px; } }
@media (max-width:380px) { .qr-icon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* UX refinement: straightforward first use, progressive depth only when requested. */
.qr-studio { padding-top:clamp(28px,4vw,58px); }
.qr-hero { margin-bottom:28px; }
.qr-hero h1 { font-size:clamp(53px,6.6vw,92px); }
.qr-intro-copy { margin-top:16px; max-width:560px; font-size:clamp(15px,1.3vw,17px); }
.qr-workspace { grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:18px; }
.qr-panel { padding:clamp(20px,2.4vw,30px); }
.qr-panel-head { margin-bottom:20px; padding-bottom:18px; }
#qr-main-fields textarea { min-height:68px; }
.qr-controls .qr-field { margin-bottom:16px; }
.qr-controls #qr-helper { color:#cfc3ba; }
.qr-customize { margin:20px 0 0; border:1px solid #806955; border-radius:14px; background:#292621; overflow:clip; }
.qr-customize-trigger { display:flex; align-items:center; gap:13px; padding:17px; cursor:pointer; list-style:none; min-height:74px; }
.qr-customize-trigger::-webkit-details-marker,.qr-subsection>summary::-webkit-details-marker { display:none; }
.qr-customize-trigger::marker,.qr-subsection>summary::marker { content:""; }
.qr-customize-trigger:hover { background:#342e28; }
.qr-customize-icon { display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:11px; background:#58402f; color:#f7c3a0; font-size:23px; }
.qr-customize-copy { display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; }
.qr-customize-copy strong { font-size:16px; color:#f5ece2; font-weight:700; }
.qr-customize-copy small { font-size:12px; color:#d4c2b5; line-height:1.3; }
.qr-customize-chevron { flex:0 0 9px; height:9px; border:solid #dba98a; border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .18s ease; margin-right:5px; }
.qr-customize[open] .qr-customize-chevron { transform:rotate(225deg); }
.qr-customize-trigger:focus-visible,.qr-subsection>summary:focus-visible,.qr-preset:focus-visible { outline:3px solid #f0bb93; outline-offset:-3px; border-radius:10px; }
.qr-customize-body { padding:0 17px 19px; border-top:1px solid #5c5046; }
.qr-customize-body .qr-rule { margin:21px 0 14px; }
.qr-customize-body .qr-colour-row { gap:12px; }
.qr-colour-presets { display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 20px; }
.qr-preset { display:flex; align-items:center; gap:7px; border:1px solid #6f6256; background:#191917; color:#eee2d5; border-radius:999px; padding:8px 11px; font:600 12px/1.1 var(--sans); cursor:pointer; min-height:38px; }
.qr-preset:hover,.qr-preset[aria-pressed=true] { border-color:#efb18b; background:#4b3528; }
.qr-preset-dot { display:block; height:16px; width:16px; border-radius:50%; border:2px solid #f4e5d7; flex-shrink:0; }
.qr-subsection { border:1px solid #645648; border-radius:12px; margin:0 0 16px; background:#211f1c; }
.qr-subsection>summary { display:flex; flex-direction:column; gap:4px; padding:14px 15px; cursor:pointer; list-style:none; position:relative; padding-right:36px; }
.qr-subsection>summary::after { content:"+"; position:absolute; right:15px; top:13px; color:#e7b28e; font-size:22px; line-height:1; }
.qr-subsection[open]>summary::after { content:"−"; }
.qr-subsection[open]>summary { border-bottom:1px solid #5c5046; }
.qr-subsection-heading { color:#f5ede5; font-size:14px; font-weight:680; }
.qr-subsection-caption { color:#cbbcb0; font-size:12px; }
.qr-subsection-body { padding:15px; }
.qr-subsection-body .qr-symbol-section { margin:0; }
.qr-subsection-body .qr-field:last-child { margin-bottom:0; }
.qr-symbol-section .qr-field-note { margin-bottom:8px; }
.qr-subsection .qr-icon-grid { max-height:260px; }
.qr-form-footer { margin-top:13px; }
.qr-form-footer>span { color:#bfb3a8; }
.qr-result { position:sticky; top:82px; }
.qr-preview-headline { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:7px; }
.qr-preview-headline .qr-step { margin:0; }
.qr-preview-state { color:#f0c3a2; border:1px solid #695244; border-radius:999px; padding:5px 10px; background:#392b22; font:650 11px/1 var(--sans); white-space:nowrap; }
.qr-preview-state[data-state=ready] { color:#d4eac2; border-color:#476343; background:#243524; }
.qr-preview-state[data-state=error] { color:#ffc3b8; border-color:#8a4a43; background:#462724; }
.qr-preview-stage { min-height:295px; padding:23px; }
.qr-preview { width:min(100%,260px); }
.qr-status { min-height:0; margin:14px 0; font-size:13px; }
.qr-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.qr-actions .qr-primary { grid-column:1/-1; min-height:54px; font-size:15px; }
.qr-actions .qr-secondary { min-height:47px; font-size:12px; }
.qr-result-note { margin-top:16px; }
.qr-bottom { margin-top:42px; }
@media (max-width:900px) {
  .qr-result { position:static; }
  .qr-preview-stage { min-height:245px; padding:18px; }
  .qr-preview { width:min(100%,224px); }
}
@media (max-width:650px) {
  .qr-studio { padding-top:25px; }
  .qr-hero { margin-bottom:20px; }
  .qr-hero h1 { font-size:clamp(51px,11vw,65px); }
  .qr-intro-copy { margin-top:11px; font-size:14px; line-height:1.55; }
  .qr-workspace { gap:12px; }
  .qr-panel { padding:18px; }
  .qr-panel-head { padding-bottom:13px; margin-bottom:14px; }
  .qr-panel-head h2 { font-size:23px; }
  .qr-customize { margin-top:12px; }
  .qr-customize-trigger { padding:13px; min-height:67px; }
  .qr-customize-body { padding:0 12px 15px; }
  .qr-colour-presets { gap:7px; }
  .qr-preview-stage { min-height:232px; }
  .qr-preview { width:min(100%,202px); }
  .qr-actions { gap:9px; }
  .qr-actions .qr-secondary { font-size:11px; }
  .qr-form-footer>span { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { .qr-customize-chevron { transition:none; } }

/* Keep the two-column workspace exclusively on desktop. */
@media (max-width:900px) {
  .qr-workspace { grid-template-columns:minmax(0,1fr); }
}

/* On a phone, one tap brings the generated code into view without scrolling through controls. */
.qr-preview-jump { display:none; color:#e9b78f; font:700 13px/1.4 var(--sans); text-decoration:underline; text-underline-offset:4px; min-height:40px; align-items:center; }
.qr-preview-jump:focus-visible { outline:2px solid #e9b78f; outline-offset:3px; }
#qr-result-title { scroll-margin-top:85px; }
@media (max-width:900px) { .qr-preview-jump { display:inline-flex; gap:6px; } }

/* --- UNPACK-grade spatial QR Studio / 2026-10-28 ---
   Borrow the copper-lit room, subtle dimensional surfaces and responsive
   interaction quality from UNPACK v0.7. Preserve a stationary, readable QR. */
.qr-studio.wrap {
  --qr-copper:#ffa466; --qr-amber:#ffd0a0; --qr-ice:#b5c6d3; --qr-mint:#91edb9;
  --qr-room:#0b1119; --qr-panel:#17212a;
  position:relative; isolation:isolate; max-width:1520px; padding-top:clamp(20px,3.1vw,42px);
}
.qr-studio:before {
  content:""; position:absolute; z-index:-2; top:0; bottom:0; left:50%;
  width:100vw; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse 39% 44% at 53% 33%,#a85a2836,transparent 77%),
   radial-gradient(ellipse 42% 58% at 90% 23%,#26445a69,transparent 85%),
   radial-gradient(ellipse 50% 45% at 6% 75%,#37231a53,transparent 80%),#0b1017;
}
.qr-ambient { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.qr-ambient:before {content:"";position:absolute;top:-20%;left:28%;width:50%;height:73%;background:linear-gradient(162deg,transparent 17%,#a9602930 26%,transparent 50%);filter:blur(25px);transform:rotate(-13deg);}
.qr-ambient:after {content:"";position:absolute;left:-15%;bottom:0;width:130%;height:33%;background:repeating-linear-gradient(90deg,#ffa36809 0 1px,transparent 1px 86px);transform:perspective(420px) rotateX(72deg);mask-image:linear-gradient(to top,transparent,#000 74%,transparent);}
.qr-ambient-beam{position:absolute;right:5%;top:12%;width:40%;height:50%;background:radial-gradient(ellipse,#2c536c35,transparent 70%);filter:blur(35px);}
.qr-ambient-floor{position:absolute;bottom:-8%;left:25%;width:50%;height:24%;background:radial-gradient(ellipse,#ba6c3452,transparent 70%);filter:blur(32px);}
.qr-hero,.qr-workspace,.qr-bottom {position:relative;z-index:1;}
.qr-hero {margin-bottom:25px;align-items:center;}
.qr-hero h1 {font-size:clamp(44px,5.5vw,74px);line-height:.98;letter-spacing:-.058em;font-weight:700;color:#fff4e9;}
.qr-hero h1 em {color:var(--qr-copper);}
.qr-hero .eyebrow {color:#ffaf76;letter-spacing:.19em;font-size:10px;}
.qr-intro-copy {max-width:610px;margin-top:11px;font-size:14px;line-height:1.6;color:#bfccd4;}
.qr-hero-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right;color:#879cad;font-size:10px;}
.qr-trust {display:inline-flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid #32765c;border-radius:99px;background:#113228c9;color:#b8f6d4;font-size:12px;font-weight:650;letter-spacing:0;white-space:nowrap;box-shadow:inset 0 1px #c5ffda11;}
.qr-trust i {width:8px;height:8px;border-radius:50%;background:#68e9a6;box-shadow:0 0 15px #69f6ae9b;}
.qr-workspace{display:grid;grid-template-columns:minmax(0,.97fr) minmax(0,1.28fr) minmax(0,.80fr);gap:clamp(12px,1.2vw,19px);align-items:stretch;}
.qr-panel{min-height:450px;padding:clamp(17px,1.8vw,25px);border:1px solid #8397a533;border-radius:22px;background:linear-gradient(148deg,#202c37ed,#121c25f0 80%);box-shadow:0 22px 55px #0006,inset 0 1px #ffffff1a;backdrop-filter:blur(5px);}
.qr-panel-head{border-color:#ffffff1d;padding-bottom:14px;margin-bottom:18px;}
.qr-panel-head h2 {font-size:clamp(18px,1.8vw,24px);letter-spacing:-.04em;color:#f7eee4;}
.qr-panel-head p{font-size:12px;color:#aebfcb;line-height:1.55;}
.qr-step {color:#ffb080;font-weight:800;letter-spacing:.15em;font-size:10px;}
.qr-field label {color:#f1ebe2;}
.qr-field input:not([type=color]),.qr-field select,.qr-field textarea{
  border:1px solid #657484;border-radius:11px;background:#0e1720;color:#f7f2eb;
  padding:11px 13px;box-shadow:inset 0 1px #0005; font-size:14px;
}
.qr-field input:not([type=color]):hover,.qr-field select:hover,.qr-field textarea:hover {border-color:#9aa5b0;}
.qr-field :is(select,textarea,input):focus-visible {outline:2px solid #ffbc8b;outline-offset:2px;border-color:#ffa96f;}
.qr-field small {color:#a6bac7;}
.qr-mode-quick {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:12px;}
.qr-type-tile {position:relative;min-width:0;min-height:93px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:10px 3px;border:1px solid #4b6173;border-radius:13px;background:linear-gradient(153deg,#273543,#18232e);color:#e7eaf0;font:720 11px/1.2 var(--sans);box-shadow:inset 0 1px #ffffff13,0 6px 17px #0003;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;}
.qr-type-icon {display:grid;place-items:center;width:39px;height:39px;border:1px solid #596d81;border-radius:11px;background:linear-gradient(140deg,#324453,#16212c);color:#acd8ef;box-shadow:0 5px 12px #0004,inset 0 1px #ffffff20;}
.qr-type-icon svg{width:22px;height:22px;display:block;}
.qr-type-tile:hover{transform:translateY(-3px);border-color:#f0ae79;box-shadow:0 10px 22px #0005,0 0 18px #ef874328;}
.qr-type-tile[aria-pressed=true]{border-color:#ffbd8b;background:linear-gradient(160deg,#553625,#26333d);box-shadow:0 0 0 1px #f9af7752,0 0 23px #f38d4242,inset 0 1px #ffdaa735;color:#fff5e9;}
.qr-type-tile[aria-pressed=true] .qr-type-icon{border-color:#dba16d;background:linear-gradient(145deg,#785034,#24313b);color:#ffe2b8;box-shadow:0 0 13px #f18e4f50;}
.qr-type-tile:focus-visible{outline:3px solid #ffc593;outline-offset:2px;}
.qr-more-types {margin-bottom:13px;}
.qr-more-types>summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;color:#f4b98f;font:700 12px/1.4 var(--sans);min-height:35px;}
.qr-more-types>summary::-webkit-details-marker{display:none;}
.qr-more-types>summary:before{content:"+";display:grid;place-items:center;width:21px;height:21px;border-radius:6px;background:#48352b;color:#ffc89f;font-size:15px;flex-shrink:0;}
.qr-more-types[open]>summary:before{content:"−";}
.qr-more-types>summary span{font-weight:500;color:#8fa6b5;font-size:11px;}
.qr-mode-field{margin:9px 0 13px !important;}
.qr-mode-field select{cursor:pointer;}
#qr-main-fields textarea{min-height:69px;}
#qr-value::placeholder {color:#8b9dac;}
.qr-customize {background:linear-gradient(145deg,#242e38,#1e252a);border-color:#566677;box-shadow:inset 0 1px #ffffff13;}
.qr-customize:hover {border-color:#b58a65;}
.qr-customize-trigger:hover{background:#33404b;}
.qr-customize-icon{background:linear-gradient(148deg,#69412c,#263340);border:1px solid #bd845b;color:#ffbd85;box-shadow:0 0 17px #f9954c2d;}
.qr-customize-copy strong{color:#f7eee6;}
.qr-customize-copy small{color:#aabcc8;}
.qr-customize-body{border-color:#52606b;}
.qr-customize-chevron{border-color:#ffc196;}
.qr-colour-input{background:#121d27;border-color:#556776;}
.qr-colour-input span{color:#b1c1cc;}
.qr-preset{background:#17232e;border-color:#566575;}
.qr-preset:hover,.qr-preset[aria-pressed=true]{border-color:#f8b680;background:#46352e;}
.qr-subsection{background:#14202a;border-color:#475c6a;}
.qr-subsection[open]>summary{border-color:#536a79;}
.qr-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.qr-icon-button{background:linear-gradient(160deg,#283746,#192532);border-color:#4a6173;min-height:91px;box-shadow:inset 0 1px #ffffff0c;transition:transform .2s,border-color .2s,box-shadow .2s;}
.qr-icon-button:hover{background:#32414d;border-color:#f4af77;transform:translateY(-3px);box-shadow:0 0 18px #ffac6325;}
.qr-icon-button[aria-pressed=true]{background:linear-gradient(155deg,#563b2b,#293541);border-color:#ffd2a7;box-shadow:0 0 21px #f99c5b40;}
.qr-icon-button svg{color:#ffd0a6;}
.qr-form-footer{margin-top:14px;}
.qr-preview-jump{color:#ffbd89;}
.qr-result{position:relative;top:auto;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:linear-gradient(145deg,#212a36c4,#111821d6 85%);padding:clamp(17px,2vw,27px);}
.qr-result:before{content:"";position:absolute;z-index:-1;inset:16% -22% -7%;background:radial-gradient(ellipse,#c16f3047,transparent 64%);filter:blur(28px);pointer-events:none;}
.qr-preview-head{border-bottom:0;margin-bottom:5px;padding-bottom:5px;}
.qr-preview-head h2{font-size:clamp(20px,2vw,26px);}
.qr-preview-state{border-color:#936640;background:#3c2d23;color:#ffcc9a;}
.qr-preview-state[data-state=ready]{background:#19392e;color:#b7f5d2;border-color:#34795a;}
.qr-preview-stage{position:relative;isolation:isolate;overflow:hidden;min-height:385px;flex:1;padding:18px;border:0;border-radius:18px;background:radial-gradient(ellipse 66% 62% at 50% 44%,#804c2939,transparent 73%),linear-gradient(155deg,#141e28,#111920 85%);}
.qr-preview-stage:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,#fff5dc05 0 1px,transparent 1px 43px);mask-image:linear-gradient(to bottom,transparent,black 90%);transform:perspective(400px) rotateX(72deg);transform-origin:bottom;}
.qr-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;perspective:900px;}
.qr-scene:before{content:"";position:absolute;top:3%;left:20%;height:66%;width:61%;border-radius:50%;background:radial-gradient(circle,#e88a4355,transparent 71%);filter:blur(35px);animation:qrGlow 9s ease-in-out infinite alternate;}
.qr-orbit{position:absolute;left:13%;top:20%;width:74%;height:57%;border:1px solid #ffad694f;border-radius:50%;transform:rotate(-28deg);box-shadow:0 0 32px #fa925025;animation:qrGlow 6s ease-in-out infinite alternate;}
.qr-orbit-b{width:64%;left:18%;border-color:#86b2c340;transform:rotate(32deg);animation-delay:-3s;}
.qr-beam{position:absolute;top:12%;left:15%;width:50%;height:110%;background:linear-gradient(167deg,transparent 18%,#a6d1e20c 32%,transparent 56%);transform:rotate(10deg);}
.qr-beam-b{left:50%;background:linear-gradient(167deg,transparent 18%,#ffbb7512 32%,transparent 56%);transform:rotate(-15deg);}
.qr-data-chip{position:absolute;display:grid;place-items:center;width:44px;height:50px;left:11%;top:14%;font:800 13px var(--sans);color:#ffcf9f;background:linear-gradient(140deg,#354354bb,#202c37dd);border:1px solid #aa835c87;border-radius:11px;box-shadow:0 12px 30px #0008,0 0 22px #ff9d4b28;transform:rotate(-13deg);animation:qrDrift 8s ease-in-out infinite alternate;}
.qr-data-chip-b{left:auto;right:9%;top:53%;width:38px;height:44px;transform:rotate(13deg);animation-delay:-4s;color:#a4d3db;border-color:#54808a80;}
.qr-pedestal{position:absolute;z-index:0;left:50%;bottom:8%;width:min(83%,285px);height:61px;transform:translateX(-50%) perspective(370px) rotateX(60deg);border:2px solid #de8a4e81;border-radius:50%;background:radial-gradient(ellipse,#62402b 12%,#1e2429 60%,#090e13 87%);box-shadow:0 0 46px #f09a5458,inset 0 0 24px #ffb98328,0 22px 18px #0009;}
.qr-pedestal:after{content:"";position:absolute;inset:10px;border:2px solid #ffc38890;border-radius:50%;box-shadow:0 0 20px #ffad6285;}
.qr-preview-plinth{position:relative;z-index:2;flex:0 0 auto;display:grid;place-items:center;padding:12px;border:1px solid #ffa96798;border-radius:21px;background:linear-gradient(150deg,#79523a,#1f2b36 73%);box-shadow:0 18px 42px #000a,0 0 51px #ec874c55,inset 0 1px #ffddaf82;transform:translateY(-10px);}
.qr-preview{width:min(100%,244px);aspect-ratio:1/1;border:6px solid #fff;background:#fff;box-shadow:0 0 0 1px #c9b09a,0 4px 20px #0004;}
.qr-preview-caption{color:#a2b7c3;text-align:center;margin:11px 0 0;font-size:11px;line-height:1.5;}
.qr-preview-caption span{color:#ffc18b;margin-right:4px;}
.qr-export{display:flex;flex-direction:column;gap:14px;}
.qr-export .qr-panel-head{margin-bottom:0;}
.qr-export-state{display:flex;align-items:start;gap:11px;min-height:66px;padding:13px;border:1px solid #536576;border-radius:13px;background:linear-gradient(160deg,#101f2a,#111a24);}
.qr-export-light{flex:0 0 9px;height:9px;border-radius:50%;margin-top:6px;background:#ffb276;box-shadow:0 0 12px #ff975c7c;}
.qr-export-state:has(.qr-status[data-state=ok]) .qr-export-light{background:#8ce5b1;box-shadow:0 0 10px #81eeb37b;}
.qr-export-state:has(.qr-status[data-state=error]) .qr-export-light{background:#ff9b87;box-shadow:0 0 10px #ff8d83a0;}
.qr-status{margin:0;min-height:0;color:#ced9df;font-size:12px;line-height:1.6;}
.qr-status[data-state=ok]{color:#b6f1cf;}.qr-status[data-state=error]{color:#ffb3a4;}
.qr-export .qr-actions{display:flex;flex-direction:column;gap:10px;}
.qr-export .qr-download{width:100%;min-height:49px;border-radius:12px;font:750 13px/1.3 var(--sans);transition:transform .2s,box-shadow .2s,border-color .2s;}
.qr-export .qr-primary{grid-column:auto;min-height:59px;background:linear-gradient(113deg,#ffbe85,#ff9457);color:#21150d;border-color:#ffca96;font-size:14px;box-shadow:0 11px 30px #f48e4c30,0 0 19px #ff9f4934;}
.qr-export .qr-primary span{font-size:20px;margin-right:7px;line-height:0;}
.qr-export .qr-secondary{min-height:47px;border-color:#6d8190;background:#253441;color:#e7edf2;font-size:12px;}
.qr-export .qr-download:hover:not(:disabled){filter:none;transform:translateY(-2px);box-shadow:0 9px 24px #0007,0 0 18px #ff9d4b3b;}
.qr-export .qr-download:focus-visible{outline:2px solid #ffca9c;outline-offset:3px;}
.qr-export-help{margin-top:auto;padding-top:16px;border-top:1px solid #ffffff20;}
.qr-help-eyebrow{font-size:10px;color:#ffb680;letter-spacing:.16em;font-weight:800;}
.qr-result-note{margin:8px 0 12px;color:#afbfc9;font-size:12px;line-height:1.6;}
.qr-format-hint{display:inline-flex;padding:7px 10px;border:1px solid #4d6170;border-radius:7px;background:#111d26;color:#c2d0d9;font-size:10px;}
.qr-export-trust{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #285e4e;border-radius:11px;background:#113128;color:#b4ead0;font-size:11px;line-height:1.5;}
.qr-export-trust span{display:grid;place-items:center;flex:0 0 20px;height:20px;border-radius:50%;background:#2d6d50;color:#d8ffe8;}
.qr-bottom{margin-top:37px;padding-top:27px;}
@keyframes qrGlow{to{opacity:.48;filter:blur(11px)}}
@keyframes qrDrift{to{translate:0 -12px}}
@media(max-width:1180px){
  .qr-workspace{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
  .qr-export{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1fr) minmax(0,.8fr);align-items:start;gap:16px;}
  .qr-export .qr-panel-head,.qr-export .qr-export-state{grid-column:1;}
  .qr-export .qr-actions{grid-column:2;grid-row:1/3;}
  .qr-export-help,.qr-export-trust{grid-column:3;}
  .qr-export-help{grid-row:1;margin:0;padding:0;border:0;}
  .qr-export-trust{grid-row:2;}
}
@media(max-width:900px){
  .qr-workspace{grid-template-columns:minmax(0,1fr);}
  .qr-panel{min-height:0;}
  .qr-controls{grid-row:1;}
  .qr-result{grid-row:2;}
  .qr-export{grid-row:3;grid-column:auto;display:flex;}
  .qr-export .qr-panel-head,.qr-export .qr-export-state,.qr-export .qr-actions,.qr-export-help,.qr-export-trust{grid-row:auto;grid-column:auto;}
  .qr-export-help{padding-top:13px;border-top:1px solid #ffffff20;}
  .qr-preview-stage{min-height:350px;}
  .qr-preview{width:min(100%,240px);}
  .qr-hero-meta{display:flex;}
}
@media(max-width:600px){
  .qr-studio.wrap{padding-top:25px;}
  .qr-hero{display:flex;align-items:flex-start;gap:10px;margin-bottom:20px;}
  .qr-hero h1{font-size:clamp(42px,10.5vw,60px);}
  .qr-hero-meta{align-items:flex-end;gap:8px;}
  .qr-hero-meta>span:last-child{display:none;}
  .qr-trust{font-size:10px;padding:8px 10px;white-space:normal;}
  .qr-intro-copy{font-size:12px;line-height:1.55;margin-top:8px;}
  .qr-workspace{gap:13px;}
  .qr-panel{border-radius:18px;padding:17px;min-height:0;}
  .qr-mode-quick{gap:6px;}
  .qr-type-tile{min-height:83px;font-size:10px;gap:7px;padding:8px 2px;}
  .qr-type-icon{width:35px;height:35px;}
  .qr-type-icon svg{width:20px;height:20px;}
  .qr-preview-head h2{font-size:22px;}
  .qr-preview-stage{min-height:305px;padding:18px;}
  .qr-preview{width:min(100%,210px);}
  .qr-preview-plinth{padding:10px;}
  .qr-pedestal{bottom:6%;}
  .qr-data-chip{left:7%;top:9%;}
  .qr-data-chip-b{right:5%;top:63%;}
  .qr-export .qr-primary{min-height:56px;}
  .qr-bottom{margin-top:30px;}
}
@media(max-width:375px){
  .qr-hero{display:block;}
  .qr-hero-meta{margin-top:10px;align-items:flex-start;}
  .qr-type-tile{min-height:78px;}
  .qr-preview-stage{min-height:274px;}
  .qr-preview{width:min(100%,185px);}
  .qr-orbit{width:80%;left:10%;}
}
@media(prefers-reduced-motion:reduce){
  .qr-studio *,.qr-studio *:before,.qr-studio *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* UNPACK-style compact opening: keep the creation stage visible immediately. */
@media (min-width:901px) {
  .qr-hero {margin-bottom:20px;align-items:center;}
  .qr-hero h1 {font-size:clamp(38px,4.05vw,57px);line-height:1.04;}
  .qr-intro-copy {max-width:750px;margin-top:9px;line-height:1.45;font-size:13px;}
}
@media (max-width:600px) {
  .qr-hero {display:block;}
  .qr-hero h1 {font-size:clamp(41px,10.2vw,57px);line-height:1.02;}
  .qr-hero-meta {margin-top:12px;align-items:flex-start;text-align:left;}
  .qr-intro-copy {max-width:420px;}
}