/* Universal QR Styled UI (inherits from WiFi plugin palette) */
:root{
  --b:#0b1b2b; --c:#0f2740; --mut:#9fb3c8; --acc:#38bdf8; --acc2:#22d3ee; --br:#1e3a5f;
}
.uqr.box{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#e6f0ff}
.uqr-grid{background:linear-gradient(135deg,var(--b),#06131f); padding:24px; border-radius:16px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:18px; width:100%}
@media (max-width: 900px){ .uqr-grid{grid-template-columns:1fr} }
.uqr-card{background:var(--c); border:1px solid var(--br); border-radius:14px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.25); margin-bottom:20px}
.uqr-h{margin:0 0 12px; font-size:20px}
.uqr-row{margin-bottom:12px}
.uqr-row label{display:block; font-size:13px; color:#cfe0ff; margin-bottom:6px}
.uqr-row input[type=text], .uqr-row input[type=url], .uqr-row input[type=number], .uqr-row input[type=color],
.uqr-row input[type=tel], .uqr-row input[type=email], .uqr-row select, .uqr-row textarea{
  width:100%; padding:12px; border-radius:10px; border:1px solid var(--br); background:#0c1f35; color:#f2f7ff; outline:none; box-sizing:border-box
}
.uqr-row textarea{resize:vertical}
.uqr-row input:focus, .uqr-row select:focus, .uqr-row textarea:focus{border-color:var(--acc); box-shadow:0 0 0 3px rgba(56,189,248,.2)}
.uqr-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.uqr-btn{background:#102233; color:#dbeafe; border:1px solid var(--br); padding:10px 14px; border-radius:10px; cursor:pointer}
.uqr-btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#001222; border:0; font-weight:700}
.uqr-style{margin-top:16px; padding:12px; background:#0d1e33; border-radius:10px}
.uqr-controls{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.uqr-controls .full{grid-column:1/-1}
.uqr-field-inline{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center}
.uqr-copy{font-size:12px; color:#a8c0ff; padding:10px 12px; border-radius:10px; border:1px solid var(--br); background:#0c1f35; overflow-wrap:anywhere}
.uqr-copy-btn{padding:10px 12px; border-radius:10px; border:1px solid var(--br); background:#102233; color:#dbeafe; cursor:pointer}
.uqr-qrbox{display:flex; align-items:center; justify-content:center; background:#08172a; border:1px dashed var(--br); border-radius:14px; padding:24px; margin-top:14px}
.uqr-qr-mount{width:100%; display:flex; align-items:center; justify-content:center; min-height:320px}
.uqr-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.uqr-tabs button{background:#0c1f35; color:#cfe0ff; border:1px solid var(--br); border-radius:999px; padding:8px 12px; cursor:pointer; font-size:13px}
.uqr-tabs button.active, .uqr-tabs button:hover{border-color:var(--acc); color:#7dd3fc}


/* v0.1.2 spacing */
.uqr-row{ margin-bottom:16px } /* increased vertical rhythm */
.uqr-controls label{ margin-bottom:10px; display:block }
.uqr-controls input, .uqr-controls select, .uqr-controls textarea{ margin-top:4px }
.uqr-presets{ margin-bottom:10px }


/* v0.1.3 radius fix */
.uqr-qr-mount{ border-radius: var(--uqr-radius, 12px); overflow: hidden; }
.uqr-qr-mount svg, .uqr-qr-mount canvas{ max-width: 100%; height: auto }


/* v0.1.4 corner radius + logo overlay */
.uqr-qrbox{ position: relative; }
.uqr-qr-mount{ position: relative; }
.uqr-qr-mount canvas{ border-radius: var(--uqr-radius, 12px); display:block; }
.uqr-logo-wrap{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  background:#ffffff; border-radius:12px; padding:6px; box-shadow:0 2px 8px rgba(0,0,0,.2); display:none;
}
.uqr-logo-wrap img{ display:block; width:100%; height:auto; }