/* ══════════════════════════════════════════════════════
   QR Code Designer Pro — Dark Theme v2.4
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

.qrcg-fw-widget {
    --ac:       #00d9b0;
    --ac2:      #00f0c4;
    --ac-l:     rgba(0,217,176,.13);
    --ac-glow:  rgba(0,217,176,.25);
    --blue:     #3b9eff;
    --bd:       #1f3550;
    --bd2:      #2a4266;
    --bg:       #07111f;
    --bg2:      #0c1a2e;
    --bg3:      #111f35;
    --bg4:      #162540;
    --txt:      #eef4ff;
    --txt2:     #a8c4e0;
    --txt3:     #6a8faf;
    --rd:       10px;
    --rd-sm:    7px;
    --tr:       all .17s ease;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--txt);
    background: transparent;
    box-sizing: border-box;
}
.qrcg-fw-widget *, .qrcg-fw-widget *::before, .qrcg-fw-widget *::after { box-sizing: border-box; }

/* HEADINGS */
.qrcg-fw-title    { margin:0 0 6px; font-size:1.6em; font-weight:800; color:var(--txt); }
.qrcg-fw-subtitle { margin:0 0 20px; color:var(--txt2); font-size:.95em; }

/* LAYOUT */
.qrcg-fw-layout { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }

/* TYPE PILLS */
.qrcg-fw-pills { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.qrcg-fw-pill {
    display:inline-flex; align-items:center; gap:5px;
    padding:7px 16px; border:1.5px solid var(--bd2);
    background:var(--bg3); border-radius:50px; cursor:pointer;
    font-size:13px; font-weight:600; font-family:inherit;
    color:var(--txt2); transition:var(--tr);
}
.qrcg-fw-pill:hover  { border-color:var(--ac); color:var(--txt); background:var(--ac-l); }
.qrcg-fw-pill.active {
    background:linear-gradient(135deg,var(--ac),var(--blue));
    border-color:transparent; color:#07111f; font-weight:800;
    box-shadow:0 4px 16px var(--ac-glow);
}
.qrcg-fw-pill span { font-size:12px; letter-spacing:.2px; }

/* FIELDS */
.qrcg-fw-fields-wrap { margin-bottom:18px; }
.qrcg-fw-field-block + .qrcg-fw-field-block { margin-top:0; }
.qrcg-fw-label {
    display:block; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.7px;
    color:var(--txt2); margin:14px 0 5px;
}
.qrcg-fw-label:first-child { margin-top:0; }
.qrcg-fw-input {
    width:100%; padding:10px 14px;
    border:1.5px solid var(--bd); border-radius:var(--rd-sm);
    font-size:14px; font-family:inherit; color:var(--txt);
    background:var(--bg3); outline:none; transition:var(--tr); margin-top:4px;
}
.qrcg-fw-input:focus { border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-l); background:var(--bg4); }
.qrcg-fw-input::placeholder { color:var(--txt3); }
textarea.qrcg-fw-input { resize:vertical; line-height:1.5; }
select.qrcg-fw-input   { cursor:pointer; color-scheme:dark; }
.qrcg-fw-row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* DESIGN SECTION */
.qrcg-fw-design-section {
    background:var(--bg2); border:1.5px solid var(--bd);
    border-radius:var(--rd); margin-bottom:20px; overflow:hidden;
}
.qrcg-fw-design-heading {
    padding:11px 16px; margin:0; font-size:11.5px; font-weight:800;
    letter-spacing:.8px; text-transform:uppercase;
    color:var(--ac); border-bottom:1.5px solid var(--bd); background:var(--bg3);
}

/* TABS */
.qrcg-fw-tabs-row {
    display:flex; overflow-x:auto; scrollbar-width:none;
    border-bottom:1.5px solid var(--bd); background:var(--bg3); padding:0 6px; gap:0;
}
.qrcg-fw-tabs-row::-webkit-scrollbar { display:none; }
.qrcg-fw-tab {
    padding:11px 14px 9px; border:none; border-bottom:2px solid transparent;
    background:none; cursor:pointer; font-size:12px; font-weight:700;
    font-family:inherit; color:var(--txt3); white-space:nowrap;
    letter-spacing:.4px; margin-bottom:-2px; transition:var(--tr);
}
.qrcg-fw-tab:hover  { color:var(--txt2); }
.qrcg-fw-tab.active { color:var(--ac); border-bottom-color:var(--ac); }

/* PANELS */
.qrcg-fw-panel { display:none; padding:16px; background:var(--bg2); }
.qrcg-fw-panel.active { display:block; }

/* DOT STYLE GRID */
.qrcg-fw-dot-style-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.qrcg-fw-style-chip {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:14px 6px 10px; border:1.5px solid var(--bd);
    border-radius:var(--rd-sm); background:var(--bg3);
    cursor:pointer; font-size:11.5px; font-weight:700;
    font-family:inherit; color:var(--txt3); transition:var(--tr);
}
.qrcg-fw-style-chip:hover  { border-color:var(--ac); color:var(--txt2); background:var(--bg4); }
.qrcg-fw-style-chip.active {
    border-color:var(--ac); background:var(--ac-l); color:var(--ac2);
    box-shadow:0 0 0 1px rgba(0,217,176,.2), 0 4px 14px rgba(0,217,176,.12);
}

/* Dot previews */
.qrcg-fw-dot-preview { width:36px; height:36px; position:relative; color:var(--txt3); }
.qrcg-fw-style-chip:hover  .qrcg-fw-dot-preview { color:var(--txt2); }
.qrcg-fw-style-chip.active .qrcg-fw-dot-preview { color:var(--ac); }
.qrcg-fw-dot-preview {
    background:
        radial-gradient(circle at 30% 30%, currentColor 38%, transparent 40%),
        radial-gradient(circle at 70% 30%, currentColor 38%, transparent 40%),
        radial-gradient(circle at 30% 70%, currentColor 38%, transparent 40%),
        radial-gradient(circle at 70% 70%, currentColor 38%, transparent 40%);
}
.qrcg-fw-style-chip[data-val="square"] .qrcg-fw-dot-preview {
    background:
        linear-gradient(currentColor 0 0) 5% 5%/40% 40% no-repeat,
        linear-gradient(currentColor 0 0) 55% 5%/40% 40% no-repeat,
        linear-gradient(currentColor 0 0) 5% 55%/40% 40% no-repeat,
        linear-gradient(currentColor 0 0) 55% 55%/40% 40% no-repeat;
}
.qrcg-fw-style-chip[data-val="rounded"] .qrcg-fw-dot-preview {
    background:
        radial-gradient(30% 30% at 25% 25%, currentColor 100%, transparent 100%),
        radial-gradient(30% 30% at 75% 25%, currentColor 100%, transparent 100%),
        radial-gradient(30% 30% at 25% 75%, currentColor 100%, transparent 100%),
        radial-gradient(30% 30% at 75% 75%, currentColor 100%, transparent 100%);
    border-radius:4px;
}

/* SEG BUTTONS (Solid/Gradient/None, White/None/Custom) */
.qrcg-fw-seg-row {
    display:flex; background:var(--bg4); border:1.5px solid var(--bd);
    border-radius:var(--rd-sm); overflow:hidden; margin-bottom:14px;
}
.qrcg-fw-seg {
    flex:1; padding:10px 4px; background:transparent; border:none;
    border-right:1px solid var(--bd); font-size:12px; font-weight:700;
    font-family:inherit; color:var(--txt3); cursor:pointer; transition:var(--tr);
}
.qrcg-fw-seg:last-child { border-right:none; }
.qrcg-fw-seg:hover  { background:var(--ac-l); color:var(--ac); }
.qrcg-fw-seg.active { background:linear-gradient(135deg,var(--ac),var(--blue)); color:#07111f; font-weight:800; }

/* BADGE & HINT */
.qrcg-fw-badge-sm {
    display:inline-block; background:var(--ac-l); color:var(--ac);
    font-size:10.5px; font-weight:700; padding:1px 8px;
    border-radius:4px; font-family:monospace; float:right;
}
.qrcg-fw-hint { font-size:11.5px; color:var(--txt3); margin:8px 0 0; }

/* RANGE */
.qrcg-fw-range { width:100%; accent-color:var(--ac); cursor:pointer; margin:6px 0; }

/* COLOR PICKERS */
.qrcg-fw-color-row { display:flex; align-items:center; gap:8px; margin-top:6px; }
.qrcg-fw-colorpick {
    width:38px; height:38px; border-radius:var(--rd-sm);
    border:2px solid var(--bd2); cursor:pointer; padding:2px;
    background:var(--bg3); flex-shrink:0; transition:var(--tr);
}
.qrcg-fw-colorpick:hover { border-color:var(--ac); }
.qrcg-fw-hexval { flex:1; font-family:monospace; font-size:13px; margin-top:0!important; text-transform:uppercase; }

/* DIVIDER */
.qrcg-fw-divider { border:none; border-top:1px solid var(--bd); margin:14px 0; }

/* PRESETS */
.qrcg-fw-presets-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:8px; }
.qrcg-fw-preset-btn {
    display:flex; height:30px; border-radius:6px;
    overflow:hidden; border:1.5px solid var(--bd2); cursor:pointer; transition:var(--tr);
}
.qrcg-fw-preset-btn span { flex:1; display:block; }
.qrcg-fw-preset-btn:hover { border-color:var(--ac); transform:scale(1.08); box-shadow:0 4px 12px rgba(0,217,176,.2); }

/* LOGO ZONE */
.qrcg-fw-logo-zone {
    border:2px dashed var(--bd2); border-radius:var(--rd);
    min-height:100px; display:flex; align-items:center;
    justify-content:center; cursor:pointer; background:var(--bg3);
    transition:var(--tr); color:var(--txt3); font-size:13px;
    text-align:center; gap:6px; padding:16px;
}
.qrcg-fw-logo-zone:hover { border-color:var(--ac); background:var(--ac-l); color:var(--txt2); }
.qrcg-fw-logo-zone img { max-width:100%; max-height:80px; object-fit:contain; border-radius:6px; }
.qrcg-fw-logo-actions { display:flex; gap:8px; margin-top:8px; margin-bottom:4px; }
.qrcg-fw-mini-btn {
    padding:7px 14px; font-size:12px; font-weight:700; font-family:inherit;
    border:1.5px solid var(--bd2); border-radius:var(--rd-sm);
    background:var(--bg3); color:var(--txt2); cursor:pointer; transition:var(--tr);
}
.qrcg-fw-mini-btn:hover { border-color:var(--ac); color:var(--ac); background:var(--ac-l); }
.qrcg-fw-danger-btn      { border-color:rgba(255,107,120,.4)!important; color:#ff6b78!important; }
.qrcg-fw-danger-btn:hover{ background:rgba(255,107,120,.1)!important; border-color:#ff6b78!important; }

/* FRAME GRID */
.qrcg-fw-frame-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:14px; }
.qrcg-fw-frame-chip {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:8px 4px; border:1.5px solid var(--bd); border-radius:var(--rd-sm);
    background:var(--bg3); cursor:pointer; font-size:10.5px; font-weight:700;
    font-family:inherit; color:var(--txt3); transition:var(--tr);
}
.qrcg-fw-frame-chip:hover  { border-color:var(--ac); color:var(--txt2); background:var(--bg4); }
.qrcg-fw-frame-chip.active { border-color:var(--ac); background:var(--ac-l); color:var(--ac); }
.qrcg-fw-frame-thumb {
    width:40px; height:40px; background:var(--bg4);
    display:flex; align-items:center; justify-content:center;
    border-radius:3px; position:relative; font-size:18px;
}
.qrcg-fw-frame-thumb::before { content:'⬛'; font-size:16px; }
.qrcg-fw-frame-thumb.simple      { border:3px solid var(--ac); }
.qrcg-fw-frame-thumb.rounded     { border:3px solid var(--ac); border-radius:10px; }
.qrcg-fw-frame-thumb.shadow      { box-shadow:3px 3px 0 var(--blue); }
.qrcg-fw-frame-thumb.double      { border:2px solid var(--ac); outline:2px solid var(--blue); outline-offset:2px; }
.qrcg-fw-frame-thumb.label-bottom{ border:3px solid var(--ac); padding-bottom:12px; }
.qrcg-fw-frame-thumb.label-bottom::after { content:'SCAN'; position:absolute; bottom:0; left:0; right:0; background:var(--ac); color:#07111f; font-size:7px; font-weight:900; text-align:center; padding:2px 0; letter-spacing:1px; }
.qrcg-fw-frame-thumb.label-top  { border:3px solid var(--ac); padding-top:12px; }
.qrcg-fw-frame-thumb.label-top::after { content:'SCAN'; position:absolute; top:0; left:0; right:0; background:var(--ac); color:#07111f; font-size:7px; font-weight:900; text-align:center; padding:2px 0; letter-spacing:1px; }

/* GENERATE BUTTON */
.qrcg-fw-generate-btn {
    width:100%; margin-top:10px; padding:14px;
    background:linear-gradient(135deg,var(--ac),var(--blue));
    color:#07111f; border:none; border-radius:var(--rd);
    font-size:15px; font-weight:800; font-family:inherit;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
    transition:var(--tr); box-shadow:0 6px 24px var(--ac-glow); letter-spacing:.3px;
}
.qrcg-fw-generate-btn:hover   { filter:brightness(1.07); box-shadow:0 10px 32px rgba(0,217,176,.4); transform:translateY(-1px); }
.qrcg-fw-generate-btn:active  { transform:scale(.98); }
.qrcg-fw-generate-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; filter:none; }

.qrcg-fw-spinner-dot {
    width:18px; height:18px; border:2.5px solid rgba(7,17,31,.3);
    border-top-color:#07111f; border-radius:50%; animation:qrcg-spin .7s linear infinite;
}
@keyframes qrcg-spin { to { transform:rotate(360deg); } }

.qrcg-fw-error-msg {
    margin-top:10px; padding:10px 14px; border-radius:var(--rd-sm);
    background:rgba(255,107,120,.1); border:1.5px solid rgba(255,107,120,.4);
    color:#ff6b78; font-size:13px;
}

/* PREVIEW COLUMN */
.qrcg-fw-sticky-preview { position:sticky; top:24px; }
.qrcg-fw-preview-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--txt3); margin:0 0 10px; }
.qrcg-fw-canvas-box {
    background:var(--bg3); border:1.5px solid var(--bd);
    border-radius:var(--rd); min-height:280px;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden; transition:background .2s;
}
.qrcg-fw-canvas-box.dark-bg  { background:#0f1117; }
.qrcg-fw-canvas-box.check-bg { background-image:repeating-conic-gradient(rgba(255,255,255,.04) 0% 25%,transparent 0% 50%); background-size:20px 20px; }
.qrcg-fw-empty-state { text-align:center; color:var(--txt3); padding:24px; }
.qrcg-fw-empty-icon  { font-size:60px; opacity:.15; animation:qrcg-float 3s ease-in-out infinite; }
@keyframes qrcg-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.qrcg-fw-empty-state p { font-size:13px; margin:10px 0 0; }
.qrcg-fw-canvas { max-width:100%; height:auto; display:block; image-rendering:pixelated; }
.qrcg-fw-canvas-spinner {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(7,17,31,.75); backdrop-filter:blur(3px);
}
.qrcg-fw-spin-ring { width:36px; height:36px; border:3px solid var(--bd2); border-top-color:var(--ac); border-radius:50%; animation:qrcg-spin .8s linear infinite; }
.qrcg-fw-qr-meta   { font-size:11px; color:var(--txt3); text-align:center; margin:8px 0 12px; font-family:monospace; }

/* DOWNLOAD BUTTONS */
.qrcg-fw-dl-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.qrcg-fw-dl-btn {
    flex:1; padding:11px;
    background:linear-gradient(135deg,var(--ac),var(--blue));
    color:#07111f; text-decoration:none; border-radius:var(--rd-sm);
    font-size:13px; font-weight:800; text-align:center; transition:var(--tr);
    display:block; box-shadow:0 4px 14px var(--ac-glow); border:none;
}
.qrcg-fw-dl-btn:hover { filter:brightness(1.07); color:#07111f; transform:translateY(-1px); }
.qrcg-fw-svg-dl-btn, .qrcg-fw-new-btn {
    padding:9px 14px; font-size:12px; font-weight:700; font-family:inherit;
    border:1.5px solid var(--bd2); border-radius:var(--rd-sm);
    background:var(--bg3); cursor:pointer; color:var(--txt2); transition:var(--tr);
}
.qrcg-fw-svg-dl-btn:hover { border-color:var(--ac); color:var(--ac); background:var(--ac-l); }
.qrcg-fw-new-btn:hover    { border-color:var(--bd2); color:var(--txt); }

/* TRACKING TOGGLE */
.qrcg-fw-track-row {
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(135deg,rgba(0,217,176,.08),rgba(59,158,255,.08));
    border:1.5px solid rgba(0,217,176,.25); border-radius:10px;
    padding:13px 16px; margin-bottom:14px; gap:10px; cursor:pointer;
}
.qrcg-fw-track-left  { display:flex; align-items:center; gap:10px; }
.qrcg-fw-track-title { font-size:14px; font-weight:700; color:var(--txt); }
.qrcg-fw-track-sub   { font-size:11px; color:var(--ac); margin-top:1px; font-weight:600; }
.qrcg-fw-track-pulse {
    width:10px; height:10px; border-radius:50%; background:var(--ac); flex-shrink:0;
    animation:qrcg-pulse 2s infinite;
}
@keyframes qrcg-pulse { 0%{box-shadow:0 0 0 0 var(--ac-glow)} 70%{box-shadow:0 0 0 8px rgba(0,217,176,0)} 100%{box-shadow:0 0 0 0 rgba(0,217,176,0)} }

/* iOS switch */
.qrcg-fw-switch { position:relative; width:48px; height:26px; flex-shrink:0; }
.qrcg-fw-switch input { opacity:0; width:0; height:0; position:absolute; }
.qrcg-fw-switch-slider { position:absolute; inset:0; background:var(--bg4); border:1px solid var(--bd2); border-radius:26px; cursor:pointer; transition:.2s; }
.qrcg-fw-switch-slider::before { content:''; position:absolute; width:20px; height:20px; left:3px; top:2px; background:var(--txt3); border-radius:50%; transition:.2s; }
.qrcg-fw-switch input:checked + .qrcg-fw-switch-slider { background:var(--ac); border-color:transparent; }
.qrcg-fw-switch input:checked + .qrcg-fw-switch-slider::before { transform:translateX(22px); background:#07111f; }

/* TRACKING MODAL */
.qrcg-fw-track-overlay { position:fixed; inset:0; background:rgba(5,10,20,.75); backdrop-filter:blur(5px); z-index:999998; animation:qrcg-fdIn .18s ease; }
.qrcg-fw-track-box {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:999999; background:#0c1a2e; border:1.5px solid #1f3550;
    border-radius:20px; padding:38px 32px; width:400px; max-width:calc(100vw - 24px);
    box-shadow:0 24px 80px rgba(0,0,0,.6); text-align:center;
    animation:qrcg-slideUp .22s cubic-bezier(.34,1.56,.64,1); font-family:inherit;
}
@keyframes qrcg-fdIn    { from{opacity:0} to{opacity:1} }
@keyframes qrcg-slideUp { from{opacity:0;transform:translate(-50%,-44%)} to{opacity:1;transform:translate(-50%,-50%)} }

.qrcg-fw-track-icon { font-size:42px; display:block; margin-bottom:8px; }
.qrcg-fw-track-box h3  { font-size:1.4rem; font-weight:800; color:var(--txt); margin:0 0 8px; }
.qrcg-fw-track-desc    { color:var(--txt2); font-size:14px; line-height:1.5; margin:0 0 18px; }
.qrcg-fw-track-close   { position:absolute; top:12px; right:14px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--txt3); padding:4px 7px; border-radius:6px; transition:background .15s; }
.qrcg-fw-track-close:hover { background:var(--bg3); color:var(--txt); }
.qrcg-fw-track-pills   { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-bottom:22px; }
.qrcg-fw-track-pills span { background:var(--ac-l); color:var(--ac); padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700; }
.qrcg-fw-track-google-btn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:12px; background:var(--bg3); color:var(--txt); border:1.5px solid var(--bd2); border-radius:10px; font-size:14px; font-weight:700; text-decoration:none; transition:all .15s; margin-bottom:12px; font-family:inherit; }
.qrcg-fw-track-google-btn:hover { border-color:var(--ac); box-shadow:0 4px 14px var(--ac-glow); }
.qrcg-fw-track-or { position:relative; text-align:center; color:var(--txt3); font-size:12px; margin-bottom:12px; }
.qrcg-fw-track-or::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--bd); }
.qrcg-fw-track-or span { background:#0c1a2e; padding:0 10px; position:relative; }
.qrcg-fw-track-email-btn { display:block; width:100%; padding:12px; background:linear-gradient(135deg,var(--ac),var(--blue)); color:#07111f; border-radius:10px; font-size:14px; font-weight:800; text-decoration:none; margin-bottom:14px; transition:all .15s; box-shadow:0 5px 18px var(--ac-glow); font-family:inherit; border:none; }
.qrcg-fw-track-email-btn:hover { filter:brightness(1.07); color:#07111f; }
.qrcg-fw-track-login-line { font-size:13px; color:var(--txt2); margin:0 0 14px; }
.qrcg-fw-track-login-line a { color:var(--ac); font-weight:700; text-decoration:none; }
.qrcg-fw-track-skip { background:none; border:none; color:var(--txt3); font-size:12px; cursor:pointer; text-decoration:underline; padding:4px; font-family:inherit; }
.qrcg-fw-track-skip:hover { color:var(--txt2); }
.qrcg-fw-track-confirm { display:block; width:100%; padding:12px; background:linear-gradient(135deg,var(--ac),var(--blue)); color:#07111f; border:none; border-radius:10px; font-size:15px; font-weight:800; cursor:pointer; margin:16px 0 10px; box-shadow:0 5px 18px var(--ac-glow); font-family:inherit; transition:all .15s; }
.qrcg-fw-track-confirm:hover { filter:brightness(1.07); }
.qrcg-fw-track-dash-link { display:block; color:var(--ac); font-size:13px; font-weight:700; text-decoration:none; margin-bottom:14px; }
.qrcg-fw-track-cancel { background:none; border:none; color:var(--txt3); font-size:13px; cursor:pointer; font-family:inherit; }

/* HIDDEN */
.qrcg-fw-hidden { display:none!important; }

/* RESPONSIVE */
@media(max-width:900px) {
    .qrcg-fw-layout { grid-template-columns:1fr; }
    .qrcg-fw-sticky-preview { position:static; }
    .qrcg-fw-right { order:-1; }
}
@media(max-width:540px) {
    .qrcg-fw-pill { padding:6px 10px; font-size:12px; }
    .qrcg-fw-frame-grid { grid-template-columns:repeat(3,1fr); }
    .qrcg-fw-dot-style-grid { grid-template-columns:repeat(3,1fr); }
}

/* ══════════════════════════════════════════════════════
   COLORFUL TYPE BUTTONS + VISIBLE DESIGN TABS  v2.5
══════════════════════════════════════════════════════ */

/* Base pill reset — darker, more button-like */
.qrcg-fw-pills { gap: 8px !important; flex-wrap: wrap !important; }
.qrcg-fw-pill {
    padding: 8px 16px !important;
    border-radius: 9px !important;
    border: 1.5px solid transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    gap: 6px !important;
    background: var(--bg4) !important;
    color: var(--txt2) !important;
    transition: all .18s ease !important;
}
.qrcg-fw-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.3) !important;
}

/* Each type gets its own color */
.qrcg-fw-pill[data-type="url"]   { border-color: rgba(0,217,176,.35)  !important; color: #00d9b0 !important; }
.qrcg-fw-pill[data-type="text"]  { border-color: rgba(59,158,255,.35) !important; color: #3b9eff !important; }
.qrcg-fw-pill[data-type="email"] { border-color: rgba(255,148,84,.35) !important; color: #ff9454 !important; }
.qrcg-fw-pill[data-type="phone"] { border-color: rgba(52,211,153,.35) !important; color: #34d399 !important; }
.qrcg-fw-pill[data-type="sms"]   { border-color: rgba(167,139,250,.35)!important; color: #a78bfa !important; }
.qrcg-fw-pill[data-type="vcard"] { border-color: rgba(251,191,36,.35) !important; color: #fbbf24 !important; }
.qrcg-fw-pill[data-type="wifi"]  { border-color: rgba(96,165,250,.35) !important; color: #60a5fa !important; }
.qrcg-fw-pill[data-type="geo"]   { border-color: rgba(251,113,133,.35)!important; color: #fb7185 !important; }

/* Active state — solid colored button */
.qrcg-fw-pill[data-type="url"].active   { background: rgba(0,217,176,.15)  !important; border-color: #00d9b0  !important; color: #00f0c4 !important; box-shadow: 0 0 16px rgba(0,217,176,.25) !important; }
.qrcg-fw-pill[data-type="text"].active  { background: rgba(59,158,255,.15) !important; border-color: #3b9eff  !important; color: #7dc8ff !important; box-shadow: 0 0 16px rgba(59,158,255,.25) !important; }
.qrcg-fw-pill[data-type="email"].active { background: rgba(255,148,84,.15) !important; border-color: #ff9454  !important; color: #ffb480 !important; box-shadow: 0 0 16px rgba(255,148,84,.25) !important; }
.qrcg-fw-pill[data-type="phone"].active { background: rgba(52,211,153,.15) !important; border-color: #34d399  !important; color: #6ee7b7 !important; box-shadow: 0 0 16px rgba(52,211,153,.25) !important; }
.qrcg-fw-pill[data-type="sms"].active   { background: rgba(167,139,250,.15)!important; border-color: #a78bfa  !important; color: #c4b5fd !important; box-shadow: 0 0 16px rgba(167,139,250,.25) !important; }
.qrcg-fw-pill[data-type="vcard"].active { background: rgba(251,191,36,.15) !important; border-color: #fbbf24  !important; color: #fcd34d !important; box-shadow: 0 0 16px rgba(251,191,36,.25) !important; }
.qrcg-fw-pill[data-type="wifi"].active  { background: rgba(96,165,250,.15) !important; border-color: #60a5fa  !important; color: #93c5fd !important; box-shadow: 0 0 16px rgba(96,165,250,.25) !important; }
.qrcg-fw-pill[data-type="geo"].active   { background: rgba(251,113,133,.15)!important; border-color: #fb7185  !important; color: #fda4af !important; box-shadow: 0 0 16px rgba(251,113,133,.25) !important; }

/* ══ DESIGN TABS — proper pill buttons, not plain text ══ */
.qrcg-fw-tabs-row {
    display: flex !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    background: var(--bg3) !important;
    border-bottom: 1.5px solid var(--bd) !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}
.qrcg-fw-tab {
    padding: 7px 14px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--bd2) !important;
    border-bottom: 1.5px solid var(--bd2) !important;
    background: var(--bg4) !important;
    color: var(--txt2) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    transition: all .18s ease !important;
    white-space: nowrap !important;
}
.qrcg-fw-tab:hover {
    border-color: var(--ac) !important;
    color: var(--txt) !important;
    background: var(--ac-l) !important;
}
.qrcg-fw-tab.active {
    background: linear-gradient(135deg, rgba(0,217,176,.2), rgba(59,158,255,.2)) !important;
    border-color: var(--ac) !important;
    color: var(--ac2) !important;
    box-shadow: 0 0 12px rgba(0,217,176,.2) !important;
}

/* ══ DOT STYLE CHIPS — force dark bg, kill any white ══ */
.qrcg-fw-style-chip {
    background: var(--bg3) !important;
    border: 1.5px solid var(--bd2) !important;
    color: var(--txt2) !important;
    border-radius: 10px !important;
    padding: 14px 6px 10px !important;
    transition: all .18s ease !important;
}
.qrcg-fw-style-chip:hover {
    background: var(--bg4) !important;
    border-color: var(--ac) !important;
    color: var(--txt) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.3) !important;
}
.qrcg-fw-style-chip.active {
    background: rgba(0,217,176,.12) !important;
    border-color: var(--ac) !important;
    color: var(--ac2) !important;
    box-shadow: 0 0 0 1px rgba(0,217,176,.25), 0 6px 18px rgba(0,217,176,.15) !important;
}

/* ══ "DESIGN OPTIONS" heading row ══ */
.qrcg-fw-design-heading {
    background: linear-gradient(135deg, rgba(0,217,176,.08), rgba(59,158,255,.08)) !important;
    border-bottom: 1.5px solid rgba(0,217,176,.2) !important;
    color: var(--ac2) !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
}