/* QR + PromptPay tool */

/* Mode tabs */
.qr-tabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:5px;margin-bottom:24px}
.qr-tab{flex:1;padding:11px 12px;border:none;background:transparent;color:var(--text-secondary);font-weight:600;font-size:.9375rem;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}
.qr-tab.active{background:var(--accent);color:#06140a}
.qr-tab:not(.active):hover{color:var(--text);background:var(--surface)}

/* Segmented control */
.qr-segment{display:flex;gap:6px;flex-wrap:wrap}
.qr-seg-btn{flex:1;min-width:90px;padding:10px 12px;border:1px solid var(--border);background:var(--bg);color:var(--text-secondary);font-weight:500;font-size:.875rem;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}
.qr-seg-btn.active{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}
.qr-seg-btn:not(.active):hover{border-color:var(--elevated)}

/* Frame toggle */
.qr-frame-toggle{margin-top:6px;margin-bottom:4px}

/* Inputs */
.qr-input{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 16px;color:var(--text);font-size:.9375rem;width:100%;transition:border-color .2s;font-family:inherit}
.qr-input:focus{outline:none;border-color:var(--accent)}
.qr-file{width:100%;font-size:.875rem;color:var(--text-secondary)}
.qr-hint{margin-top:8px;font-size:.8125rem;color:var(--muted);line-height:1.5}
.qr-optional{color:var(--muted);font-size:.8125rem;font-weight:400}

/* Options accordion */
.qr-options{border-top:1px solid var(--border);margin-top:8px;padding-top:8px}
.qr-options-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:transparent;border:none;color:var(--text);font-weight:600;font-size:.9375rem;padding:12px 0;cursor:pointer;font-family:inherit}
.qr-chevron{width:18px;height:18px;transition:transform .2s}
.qr-options-toggle.open .qr-chevron{transform:rotate(180deg)}
.qr-options-body{padding-top:8px}
.qr-color-row{display:flex;gap:16px;margin-top:8px}
.qr-color-field{flex:1;display:flex;flex-direction:column;gap:8px;font-size:.875rem;font-weight:500;color:var(--text-secondary)}
.qr-color-field input[type=color]{width:100%;height:42px;border:1px solid var(--border);border-radius:8px;background:var(--bg);cursor:pointer;padding:4px}

/* Error */
.qr-error{margin-top:16px;padding:12px 16px;border-radius:10px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3);color:var(--error);font-size:.875rem;line-height:1.5}

/* Preview panel */
.qr-preview-panel{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.qr-preview-card{width:100%;display:flex;flex-direction:column;align-items:center}
.qr-canvas-frame{position:relative;width:100%;max-width:360px;aspect-ratio:1/1;background:repeating-conic-gradient(#e9e9ee 0% 25%, #fafafb 0% 50%) 50% / 24px 24px;border:1px solid var(--border);border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px}
[data-theme="dark"] .qr-canvas-frame{background:repeating-conic-gradient(#1a1a20 0% 25%, #141418 0% 50%) 50% / 24px 24px}
.qr-canvas-frame canvas{max-width:100%;max-height:100%;height:auto;border-radius:6px;image-rendering:pixelated;image-rendering:crisp-edges}
.qr-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);text-align:center;padding:24px}
.qr-empty svg{width:54px;height:54px;opacity:.5}
.qr-empty span{font-size:.875rem;max-width:200px}
.qr-caption{margin-top:16px;font-weight:600;font-size:1.0625rem;color:var(--text);min-height:1.4em;text-align:center}
.qr-actions{display:flex;gap:12px;width:100%;max-width:360px;margin-top:18px}
.qr-actions .btn{flex:1}
.qr-privacy{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:.8125rem;color:var(--muted);font-family:var(--mono)}
.qr-privacy-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex-shrink:0}

@media(max-width:968px){
    .qr-canvas-frame{max-width:300px}
    .qr-actions{max-width:300px}
}