/* QR Branding Studio v3 — Front-end */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap');

.qrbs {
    --a:   #6c47ff;
    --a2:  #ff4778;
    --go:  #ffd166;
    --ok:  #3ddba8;
    --err: #ff4778;
    --bg:  #080810;
    --s1:  #10101c;
    --s2:  #18182a;
    --bd:  #252538;
    --tx:  #e2e2f0;
    --mu:  #6060a0;
    --r:   12px;

    font-family: 'DM Sans', sans-serif;
    color:       var(--tx);
    background:  var(--bg);
    max-width:   660px;
    margin:      0 auto;
    padding:     36px 20px 60px;
    box-sizing:  border-box;
}
.qrbs *, .qrbs *::before, .qrbs *::after { box-sizing: border-box; }

@keyframes qrbs-up   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes qrbs-spin { to{transform:rotate(360deg)} }
@keyframes qrbs-pulse{ 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(108,71,255,.4)} 50%{transform:scale(1.06);box-shadow:0 0 0 16px rgba(108,71,255,0)} }
@keyframes qrbs-log  { from{opacity:0;transform:translateX(-5px)} to{opacity:1;transform:translateX(0)} }

/* ── Header ── */
.qrbs__header { text-align:center; margin-bottom:28px; }
.qrbs__title {
    font-family: 'Syne', sans-serif;
    font-size:   clamp(1.5rem,4vw,2.2rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    background:  linear-gradient(135deg,#fff 35%,#a98bff);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    margin: 0 0 8px; line-height:1.1;
}
.qrbs__tag { color:var(--mu); font-size:.9rem; margin:0; }

/* ── Steps ── */
.qrbs__steps {
    display:flex; background:var(--s1);
    border:1.5px solid var(--bd); border-radius:var(--r);
    margin-bottom:24px; overflow:hidden;
}
.qrbs__step {
    flex:1; display:flex; align-items:center; justify-content:center;
    gap:7px; padding:13px 8px;
    font-size:.75rem; font-weight:600; color:var(--mu);
    border-right:1px solid var(--bd); transition:all .25s;
}
.qrbs__step:last-child { border-right:none; }
.qrbs__snum {
    display:inline-flex; align-items:center; justify-content:center;
    width:19px; height:19px; border-radius:50%;
    background:var(--bd); font-size:.68rem; font-weight:700; flex-shrink:0;
    transition:all .25s;
}
.qrbs__step--on   { color:var(--tx); background:rgba(108,71,255,.08); }
.qrbs__step--on   .qrbs__snum { background:var(--a); color:#fff; }
.qrbs__step--done { color:var(--ok); }
.qrbs__step--done .qrbs__snum { background:var(--ok); color:#080810; }
@media(max-width:420px){ .qrbs__step > span:not(.qrbs__snum){display:none} }

/* ── Error ── */
.qrbs__err {
    background:rgba(255,71,120,.1); border:1.5px solid rgba(255,71,120,.3);
    border-radius:var(--r); color:var(--err);
    padding:12px 16px; font-size:.87rem;
    margin-bottom:18px; text-align:center;
}

/* ── Panels ── */
.qrbs__panel { animation:qrbs-up .3s ease; }
.qrbs__panel--center { text-align:center; }

/* ── Drop zone ── */
.qrbs__drop {
    border:2px dashed var(--bd); border-radius:var(--r);
    padding:36px 20px; text-align:center; cursor:pointer;
    background:var(--s1); transition:all .2s; margin-bottom:20px; outline:none;
}
.qrbs__drop:hover, .qrbs__drop:focus, .qrbs__drop--over {
    border-color:var(--a); background:rgba(108,71,255,.06);
}
.qrbs__drop-icon { font-size:2.4rem; margin-bottom:8px; }
.qrbs__drop-txt  { color:var(--mu); font-size:.88rem; margin:0 0 4px; }
.qrbs__drop-txt strong { color:var(--a); }
.qrbs__drop-hint { color:#404060; font-size:.75rem; margin:0; }

/* File input: visually hidden but NOT display:none or hidden attr
   so native .click() works reliably across all browsers */
.qrbs__file-input {
    position:absolute; width:1px; height:1px;
    opacity:0; pointer-events:none; overflow:hidden;
}
#qrbs-drop-preview { display:none; flex-direction:column; align-items:center; gap:11px; }
#qrbs-drop-preview.visible,
#qrbs-drop-preview[style*="display: flex"],
#qrbs-drop-preview[style*="display:flex"] { display:flex !important; }
#qrbs-preview { max-width:160px; max-height:160px; border-radius:10px; border:2px solid var(--a); object-fit:contain; }

/* ── Input ── */
.qrbs__input {
    width:100%; background:var(--s1);
    border:1.5px solid var(--bd); border-radius:var(--r);
    color:var(--tx); padding:11px 14px;
    font-family:'DM Sans',sans-serif; font-size:.92rem; outline:none;
    transition:border-color .2s;
}
.qrbs__input:focus { border-color:var(--a); }

/* ── Section label ── */
.qrbs__section-lbl {
    font-size:.72rem; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--mu); margin:22px 0 11px;
}

/* ── Themes ── */
.qrbs__themes {
    display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:12px;
}
@media(max-width:480px){ .qrbs__themes{grid-template-columns:repeat(3,1fr)} }
@media(max-width:340px){ .qrbs__themes{grid-template-columns:repeat(2,1fr)} }
.qrbs__theme {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:11px 5px; background:var(--s1);
    border:1.5px solid var(--bd); border-radius:9px;
    color:var(--mu); cursor:pointer; font-family:'DM Sans',sans-serif;
    transition:all .17s;
}
.qrbs__theme:hover { border-color:var(--a); color:var(--tx); background:rgba(108,71,255,.07); }
.qrbs__theme--sel, .qrbs__theme[aria-pressed="true"] {
    border-color:var(--a); background:rgba(108,71,255,.15);
    color:var(--tx); box-shadow:0 0 0 3px rgba(108,71,255,.2);
}
.qrbs__theme-em { font-size:1.4rem; }
.qrbs__theme-nm { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }

/* Custom theme — always-visible text input at top */
.qrbs__custom-top { margin-bottom:14px; }
.qrbs__custom-hint {
    color:var(--mu); font-size:.72rem; font-weight:600;
    letter-spacing:.5px; text-transform:uppercase;
    margin:10px 0 0; text-align:center;
}

/* ── Buttons ── */
.qrbs__btn-primary {
    display:block; width:100%; padding:14px;
    background:linear-gradient(135deg,var(--a),var(--a2));
    border:none; border-radius:var(--r); color:#fff;
    font-family:'Syne',sans-serif; font-size:.93rem; font-weight:700;
    cursor:pointer; letter-spacing:.3px; text-align:center; text-decoration:none;
    transition:opacity .17s, transform .13s; margin-top:20px;
}
.qrbs__btn-primary:hover:not(:disabled) { opacity:.85; transform:translateY(-1px); color:#fff; }
.qrbs__btn-primary:disabled { opacity:.45; cursor:not-allowed; }

.qrbs__btn-ghost {
    display:block; width:100%; padding:11px;
    background:transparent; border:1.5px solid var(--bd);
    border-radius:var(--r); color:var(--mu);
    font-family:'DM Sans',sans-serif; font-size:.87rem; cursor:pointer;
    margin-top:10px; text-align:center; transition:all .17s;
}
.qrbs__btn-ghost:hover { border-color:var(--tx); color:var(--tx); }
.qrbs__btn-sm { padding:7px 15px; width:auto; font-size:.78rem; margin-top:0; }

/* ── Gumroad unlock card ── */
.qrbs__unlock-card {
    background:var(--s1); border:1.5px solid var(--bd);
    border-radius:14px; overflow:hidden; margin-bottom:16px;
}
.qrbs__buy-section, .qrbs__key-section {
    padding:24px;
}
.qrbs__buy-section { border-bottom:1.5px solid var(--bd); }
.qrbs__buy-badge {
    display:inline-block; background:rgba(108,71,255,.15);
    border:1px solid rgba(108,71,255,.35); color:#a98bff;
    font-size:.68rem; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-bottom:10px;
}
.qrbs__buy-title { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:800; margin:0 0 6px; }
.qrbs__buy-desc  { color:var(--mu); font-size:.85rem; margin:0 0 16px; line-height:1.5; }
.qrbs__buy-btn {
    display:inline-block; padding:14px 28px;
    background:#22c55e; border:none; border-radius:var(--r);
    color:#fff; font-family:'Syne',sans-serif; font-size:.95rem; font-weight:800;
    cursor:pointer; text-decoration:none; letter-spacing:.3px;
    transition:background .18s, transform .13s;
}
.qrbs__buy-btn:hover { background:#16a34a; transform:translateY(-1px); color:#fff; }

.qrbs__divider {
    text-align:center; color:var(--mu); font-size:.75rem;
    padding:14px 24px; border-bottom:1.5px solid var(--bd);
    letter-spacing:.5px;
}

.qrbs__key-row { display:flex; gap:8px; align-items:stretch; }
.qrbs__key-row .qrbs__input { margin:0; flex:1; }
.qrbs__btn-verify { width:auto; margin-top:0; padding:11px 20px; font-size:.85rem; }

/* ── Summary ── */
.qrbs__summary {
    background:var(--s2); border:1.5px solid var(--bd);
    border-radius:var(--r); padding:16px; margin-bottom:14px;
}
.qrbs__sum-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; font-size:.87rem; border-bottom:1px solid var(--bd);
}
.qrbs__sum-row:last-child { border-bottom:none; }
.qrbs__sum-row span { color:var(--mu); }

/* ── Generating ── */
.qrbs__orb {
    width:68px; height:68px; margin:0 auto 20px; border-radius:50%;
    background:linear-gradient(135deg,var(--a),var(--a2));
    animation:qrbs-pulse 1.6s ease-in-out infinite;
    display:flex; align-items:center; justify-content:center; font-size:26px;
}
.qrbs__gen-h { font-family:'Syne',sans-serif; font-size:1.15rem; margin:0 0 6px; }
.qrbs__gen-sub { color:var(--mu); font-size:.83rem; line-height:1.6; margin:0; }
.qrbs__bar {
    width:100%; height:4px; background:var(--bd);
    border-radius:2px; margin:22px 0 14px; overflow:hidden;
}
.qrbs__bar-fill {
    height:100%; background:linear-gradient(90deg,var(--a),var(--a2));
    border-radius:2px; width:0%; transition:width .5s ease;
}
.qrbs__log {
    background:var(--s1); border:1px solid var(--bd);
    border-radius:var(--r); padding:12px 14px; text-align:left;
    min-height:72px; max-height:150px; overflow-y:auto;
    font-family:'Courier New',monospace; font-size:.72rem; line-height:2;
}
.qrbs__log-line { display:block; animation:qrbs-log .25s ease; }

/* ── Result ── */
.qrbs__done-badge {
    display:inline-block;
    background:rgba(61,219,168,.1); border:1.5px solid rgba(61,219,168,.28);
    color:var(--ok); font-size:.76rem; font-weight:700;
    padding:6px 14px; border-radius:999px;
    margin-bottom:20px; letter-spacing:1px; text-transform:uppercase;
}
.qrbs__result-img {
    max-width:280px; width:100%; border-radius:var(--r);
    border:2px solid var(--bd); box-shadow:0 8px 40px rgba(0,0,0,.5);
    display:block; margin:0 auto 10px;
}
.qrbs__scan-lbl {
    font-family:'Syne',sans-serif; font-weight:800; font-size:.77rem;
    letter-spacing:5px; text-transform:uppercase; color:var(--mu); margin:0 0 20px;
}
.qrbs__result-btns {
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:16px;
}
.qrbs__result-btns .qrbs__btn-primary { width:auto; margin-top:0; padding:12px 26px; }
.qrbs__warn { color:var(--mu); font-size:.75rem; margin:0; }