/* Theme tokens */
.jpqr-root{--jpqr-brand:#ef4444; --jpqr-bg:#0b1220; --jpqr-card:rgba(255,255,255,0.08); --jpqr-text:#E5E7EB; --jpqr-soft:#9CA3AF; --jpqr-border:rgba(255,255,255,0.12);}
.jpqr-root.jpqr-theme-light{--jpqr-bg:#f5f7fb; --jpqr-card:#ffffff; --jpqr-text:#111827; --jpqr-soft:#6B7280; --jpqr-border:rgba(0,0,0,0.08);}
@media (prefers-color-scheme: light){.jpqr-root.jpqr-theme-auto{--jpqr-bg:#f5f7fb; --jpqr-card:#ffffff; --jpqr-text:#111827; --jpqr-soft:#6B7280; --jpqr-border:rgba(0,0,0,0.08);}}
@media (prefers-color-scheme: dark){.jpqr-root.jpqr-theme-auto{--jpqr-bg:#0b1220; --jpqr-card:rgba(255,255,255,0.08); --jpqr-text:#E5E7EB; --jpqr-soft:#9CA3AF; --jpqr-border:rgba(255,255,255,0.12);}}

.jpqr-root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Helvetica,Arial,sans-serif;color:var(--jpqr-text);}
.jpqr-card{max-width:900px;margin:24px auto;padding:18px;border:1px solid var(--jpqr-border);background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)), var(--jpqr-card);backdrop-filter: blur(6px);}
.jpqr-rounded-2xl{border-radius:20px;}
.jpqr-shadow-lg{box-shadow:0 20px 40px rgba(0,0,0,0.15);}

.jpqr-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px;}
.jpqr-title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;}
.jpqr-icon{width:22px;height:22px;fill:var(--jpqr-brand);}

.jpqr-btn{border:none;padding:10px 14px;border-radius:12px;background:var(--jpqr-brand);color:#fff;font-weight:700;cursor:pointer;transition:transform .06s ease, opacity .2s;}
.jpqr-btn:hover{opacity:.95;}
.jpqr-btn:active{transform:translateY(1px);}

.jpqr-controls{display:grid;gap:12px;margin:8px 0;}
.jpqr-field{display:grid;gap:6px;}
.jpqr-text{width:100%;border-radius:14px;padding:12px;border:1px solid var(--jpqr-border);background:#fff;color:#111827;resize:vertical;line-height:1.55;}
.jpqr-root:not(.jpqr-theme-light) .jpqr-text{background:rgba(255,255,255,0.06);color:#fff;border-color:var(--jpqr-border);}

.jpqr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media (min-width:680px){.jpqr-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
.jpqr-field input, .jpqr-field select{border-radius:12px;border:1px solid var(--jpqr-border);padding:10px;background:#fff;color:#111827;}
.jpqr-root:not(.jpqr-theme-light) .jpqr-field input, .jpqr-root:not(.jpqr-theme-light) .jpqr-field select{background:rgba(255,255,255,0.06);color:#fff;border-color:var(--jpqr-border);}

.jpqr-preview{display:grid;gap:12px;margin-top:12px;}
.jpqr-canvas-wrap{display:flex;justify-content:center;align-items:center;min-height:200px;border:1px dashed var(--jpqr-border);border-radius:14px;background:rgba(255,255,255,0.6);}
.jpqr-root:not(.jpqr-theme-light) .jpqr-canvas-wrap{background:rgba(255,255,255,0.04);}
.jpqr-img{max-width:100%;height:auto;display:block;}

.jpqr-actions{display:flex;gap:10px;justify-content:center;}
.jpqr-footer{margin-top:8px;color:var(--jpqr-soft);}