.uxbbar{--ink:#111;--paper:#f4f0e8;--line:#d8d2c7;--pill:999px;max-width:1280px;margin:32px auto;font-family:inherit;color:var(--ink)}.uxbbar *{box-sizing:border-box}.uxbbar__intro{margin-bottom:22px}.uxbbar__eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;margin-bottom:8px}.uxbbar h2{font-size:clamp(28px,4vw,44px);line-height:1.05;margin:0 0 10px}.uxbbar__intro p{max-width:780px;margin:0;line-height:1.55}.uxbbar__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:24px}.uxbbar__panel{border:1px solid var(--line);border-radius:28px;padding:28px;background:#fff}.uxbbar__label{display:block;font-weight:700;font-size:14px;margin:0 0 8px}.uxbbar__input{width:100%;min-height:54px;border:1px solid #aaa;background:#fff;padding:11px 20px;border-radius:var(--pill);font:inherit;color:#111}.uxbbar__hint{font-size:12px;line-height:1.45;margin:7px 0 20px;color:#666}.uxbbar__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 20px}.uxbbar__color{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center}.uxbbar__color input[type=color]{width:64px;height:54px;border:1px solid #aaa;border-radius:var(--pill);padding:6px;background:#fff}.uxbbar__stock-block{margin:4px 0 20px;padding:18px;border:1px solid var(--line);border-radius:24px;background:#faf9f6}.uxbbar__stock-block p{font-size:12px;color:#666;line-height:1.4}.uxbbar__stocks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.uxbbar__stock{appearance:none;border:1px solid #aaa;border-radius:20px;background:#111;color:#fff;padding:8px 6px;font:inherit;font-size:11px;cursor:pointer}.uxbbar__stock span{display:block;height:34px;border:1px solid #999;border-radius:14px;margin-bottom:6px;background:var(--swatch)}.uxbbar__stock.is-selected{outline:2px solid #111;outline-offset:2px}.uxbbar__check{display:flex;gap:9px;align-items:flex-start;font-size:14px;margin:3px 0 20px}.uxbbar__check input{width:22px;height:22px}.uxbbar__button{appearance:none;border:1px solid #111;border-radius:var(--pill);background:#111;color:#fff;min-height:54px;padding:11px 24px;font:inherit;font-weight:800;letter-spacing:.02em;cursor:pointer}.uxbbar__button:hover{opacity:.88}.uxbbar__button:disabled{opacity:.35;cursor:not-allowed}.uxbbar__error{color:#9c1b1b;font-size:13px;margin-top:10px;min-height:18px}.uxbbar__result{background:var(--paper)}.uxbbar__preview{min-height:390px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;overflow:auto}.uxbbar__preview svg{display:block;max-width:100%;height:auto}.uxbbar__placeholder{color:#777;text-align:center}.uxbbar__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.uxbbar__status{margin-top:20px;padding-top:18px;border-top:1px solid #c9c2b6}.uxbbar__status h3{margin:0 0 8px;font-size:20px}.uxbbar__status p{margin:7px 0;line-height:1.45}.uxbbar__good{font-weight:700}.uxbbar__warn{font-weight:700;color:#8a5600}.uxbbar__note{margin-top:20px;border-left:4px solid #111;border-radius:0 18px 18px 0;padding:14px 16px;background:#f7f7f7;line-height:1.5;font-size:13px}@media(max-width:760px){.uxbbar{margin:20px auto}.uxbbar__grid{grid-template-columns:1fr}.uxbbar__panel{padding:20px;border-radius:24px}.uxbbar__row{grid-template-columns:1fr;gap:16px}.uxbbar__stocks{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.uxbbar__stock{font-size:10px;padding:6px 4px}.uxbbar__stock span{height:28px}.uxbbar__preview{min-height:280px;padding:20px}.uxbbar__actions{grid-template-columns:1fr}}
.uxbbar__format-block{margin:0 0 20px}.uxbbar__formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.uxbbar__format{appearance:none;border:1px solid #aaa;border-radius:20px;background:#fff;color:#111;padding:10px 8px;min-height:112px;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}.uxbbar__format.is-selected{background:#111;color:#fff;outline:2px solid #111;outline-offset:2px}.uxbbar__format b{font-size:12px}.uxbbar__format small{font-size:10px;opacity:.72}.uxbbar__format-icon{display:block;width:62px;height:34px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px);border-bottom:1px solid currentColor}.uxbbar__format-icon--compact{height:22px;margin-top:12px}.uxbbar__format-icon--tall{height:45px}.uxbbar__format-icon--wave{height:38px;border:0;clip-path:polygon(0 18%,12% 5%,25% 18%,38% 5%,50% 18%,62% 5%,75% 18%,88% 5%,100% 18%,100% 100%,0 100%)}
@media(max-width:760px){.uxbbar__formats{grid-template-columns:repeat(2,minmax(0,1fr))}.uxbbar__format{min-height:100px}}



/* v1.2.2 — desktop alignment matched to the QR Generator.
   JS supplies only the viewport-centering offset when the WordPress page template
   places the shortcode inside an off-center/narrow content wrapper. */
@media(min-width:761px){
  .uxbbar{max-width:1280px;margin:42px auto;}
  .uxbbar__intro{margin-bottom:28px;}
  .uxbbar__intro p{max-width:820px;}
  .uxbbar__grid{grid-template-columns:minmax(0,1.35fr) minmax(420px,.9fr);gap:28px;align-items:start;}
  .uxbbar__panel{padding:30px;}
  .uxbbar__label{font-size:15px;}
  .uxbbar__input{min-height:52px;font-size:16px;}
  .uxbbar__color{grid-template-columns:64px minmax(0,1fr);gap:10px;}
  .uxbbar__color input[type=color]{width:64px;height:52px;}
  .uxbbar__stock-block{padding:18px;}
  .uxbbar__stocks{gap:10px;}
  .uxbbar__stock{min-height:82px;font-size:12px;}
  .uxbbar__stock span{height:34px;}
  .uxbbar__button{min-height:54px;font-size:15px;}
  .uxbbar__preview{min-height:440px;padding:34px;}
  .uxbbar__actions{gap:12px;margin-top:14px;}
  .uxbbar__status{font-size:15px;}
  .uxbbar__note{margin-top:24px;font-size:14px;padding:16px 18px;}
}
@media(min-width:1180px){
  .uxbbar__grid{grid-template-columns:minmax(650px,1.35fr) minmax(440px,.9fr);}
  .uxbbar__panel{padding:34px;}
}

/* v1.3.0 — Scan Number */
.uxbbar__scan-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.uxbbar__scan-button{appearance:none;border:1px solid #111;background:#111;color:#fff;border-radius:999px;min-height:54px;padding:11px 20px;font:inherit;font-weight:800;white-space:nowrap;cursor:pointer}
.uxbbar__scan-button span{display:inline-block;margin-right:7px;font-size:18px;line-height:1}
.uxbbar__scanner[hidden]{display:none!important}.uxbbar__scanner{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:20px}
.uxbbar__scanner-card{width:min(620px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:28px;padding:24px;color:#111;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.uxbbar__scanner-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.uxbbar__scanner-head h3{font-size:28px;line-height:1.1;margin:0 0 8px}.uxbbar__scanner-head p{margin:0}
.uxbbar__scanner-close{appearance:none;border:1px solid #aaa;background:#fff;border-radius:999px;width:46px;height:46px;font-size:30px;line-height:1;cursor:pointer}
.uxbbar__camera-wrap{position:relative;overflow:hidden;background:#111;border-radius:22px;aspect-ratio:4/3;margin:18px 0 12px}.uxbbar__camera-wrap video{width:100%;height:100%;object-fit:cover;display:block}
.uxbbar__scan-frame{position:absolute;left:8%;right:8%;top:34%;height:32%;border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.22)}
.uxbbar__scan-status{min-height:28px;font-weight:700;margin:10px 0}.uxbbar__scanner-actions{display:flex;gap:10px}.uxbbar__scanner-privacy{font-size:12px;color:#666;line-height:1.45;margin:16px 0 0}
@media(max-width:760px){.uxbbar__scan-field{grid-template-columns:1fr}.uxbbar__scan-button{width:100%}.uxbbar__scanner{padding:12px}.uxbbar__scanner-card{padding:18px;border-radius:24px}.uxbbar__scanner-head h3{font-size:24px}}
/* v1.4.0 — mobile number/barcode capture */
.uxbbar__photo-actions{margin-top:12px}.uxbbar__photo-button{display:flex!important;align-items:center;justify-content:center;width:100%;cursor:pointer;text-align:center}
@media(max-width:760px){.uxbbar__scan-field{display:grid;grid-template-columns:1fr;gap:10px}.uxbbar__scan-button{width:100%;min-height:52px}.uxbbar__scanner-card{max-height:92dvh;overflow:auto}.uxbbar__photo-button{min-height:54px}}