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


/* v0.4.1: higher text contrast for fields + placeholders */
.wifiqr-row input[type=text],
.wifiqr-row input[type=url],
.wifiqr-row input[type=number],
.wifiqr-row input[type=color],
.wifiqr-row select {
  color:#f2f7ff !important;
  background:#10233a !important;
  border-color:#2b4a72 !important;
  font-weight:600;
}
.wifiqr-row input::placeholder,
.wifiqr-row input::-webkit-input-placeholder,
.wifiqr-row input::-moz-placeholder {
  color:#c3d5ee !important;
  opacity:0.95;
}

/* Presets row spacing */
.wifiqr-presets{margin-top:6px}


/* v0.4.2 padding improvements */
.wifiqr-style{margin-top:16px; padding:12px; background:#0d1e33; border-radius:10px}
.wifiqr-controls label{margin-bottom:8px; display:block}
.wifiqr-controls input, .wifiqr-controls select{margin-top:4px}

.wifiqr-card{margin-bottom:20px}

.wifiqr-qrbox{padding:24px; margin-top:14px}
.wifiqr-qr-mount{min-height:360px}


/* v0.4.3 spacing + QR border radius */
.wifiqr-presets{margin-bottom:10px !important;}
.wifiqr-actions{margin-top:10px !important;}

#wifiqr-qr{overflow:hidden;}
.wifiqr-qr-mount svg, .wifiqr-qr-mount canvas {border-radius: var(--wifiqr-radius, 0px);}


/* v0.4.3 spacing + rounded QR */
.wifiqr-presets{ margin-bottom:10px; }
.wifiqr-actions{ margin-top:10px; }

/* QR rounded corners via CSS variable */
.wifiqr-qr-mount svg,
.wifiqr-qr-mount canvas{
  border-radius: var(--wifiqr-radius, 12px);
  overflow: hidden;
}


/* v0.4.9 mobile responsiveness */
.wifiqr-grid{max-width:100%; overflow:hidden}
.wifiqr-card{width:100%; box-sizing:border-box}
.wifiqr-controls input, .wifiqr-controls select{max-width:100%}


/* v0.4.9 mobile fixes */
.wifiqr.box, .wifiqr-grid, .wifiqr-card,
.wifiqr-row input[type=text], .wifiqr-row input[type=url],
.wifiqr-row input[type=number], .wifiqr-row input[type=color],
.wifiqr-row select, .wifiqr-copy, .wifiqr-field-inline {
  box-sizing: border-box;
  max-width: 100%;
}

.wifiqr-grid{ width:100%; overflow:hidden; }
.wifiqr-field-inline{ grid-template-columns: minmax(0,1fr) auto; }
.wifiqr-copy{ overflow-wrap:anywhere; }

@media (max-width: 480px){
  .wifiqr-grid{ padding:16px; }
  .wifiqr-qrbox{ padding:16px; }
  .wifiqr-qr-mount{ min-height: 280px; }
}