/* ==========================================================
   nexpoint QR-Code-Generator
   Datei: /assets/app.css
   Version: 1
   ========================================================== */

.qr-hero { position: relative; overflow: hidden; padding-top: clamp(54px, 7vw, 88px); }
.qr-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -42% 38%;
  height: 390px;
  background: radial-gradient(circle, rgba(47,160,245,.20), transparent 62%);
  pointer-events: none;
}
.qr-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .72fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
.qr-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.qr-hero-card h2 { margin: 14px 0 10px; font-size: clamp(1.45rem, 2.4vw, 2.15rem); line-height: 1.04; letter-spacing: -.04em; }
.qr-hero-card p { margin: 0; color: var(--nxp-text-soft); }
.qr-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.qr-mini-grid div { padding: 12px; border: 1px solid var(--nxp-border); border-radius: 17px; background: var(--nxp-surface-soft); }
.qr-mini-grid strong { display: block; font-size: 1.26rem; line-height: 1; }
.qr-mini-grid span { display: block; margin-top: 4px; color: var(--nxp-muted); font-size: .86rem; line-height: 1.25; }

.qr-builder { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, .70fr); gap: 22px; align-items: start; }
.qr-panel { padding: clamp(18px, 3vw, 30px); }
.qr-section-head { margin-bottom: 18px; }
.qr-section-head h2 { margin-top: 10px; }
.qr-section-head p { margin: 10px 0 0; color: var(--nxp-text-soft); }
.qr-section-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.qr-status { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 10px; border-radius: 999px; background: var(--nxp-surface-soft); color: var(--nxp-muted); border: 1px solid var(--nxp-border); font-size: .85rem; font-weight: 850; }
.qr-status.is-error { color: #b42318; background: #fff2f1; border-color: rgba(180,35,24,.24); }
html[data-theme="dark"] .qr-status.is-error { background: rgba(180,35,24,.16); color: #ffb4ae; }

#qrForm { display: grid; gap: 18px; }
#qrForm fieldset { margin: 0; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--nxp-border); }
#qrForm fieldset:last-of-type { border-bottom: 0; padding-bottom: 0; }
#qrForm legend { margin: 0 0 12px; padding: 0; color: var(--nxp-text); font-weight: 900; font-size: 1.02rem; }
#qrForm label { color: var(--nxp-text-soft); font-weight: 800; }
#qrForm input[type="text"],
#qrForm input[type="email"],
#qrForm input[type="url"],
#qrForm input[type="tel"],
#qrForm textarea,
#qrForm select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--nxp-border);
  border-radius: 16px;
  background: var(--nxp-surface-soft);
  color: var(--nxp-text);
  font-weight: 750;
  outline: none;
}
#qrForm textarea { resize: vertical; line-height: 1.45; }
#qrForm input:focus,
#qrForm textarea:focus,
#qrForm select:focus { border-color: rgba(122, 60, 240, .55); box-shadow: 0 0 0 4px var(--nxp-primary-soft); }
#qrForm input[type="color"] {
  width: 100%; height: 48px; padding: 4px; border-radius: 16px; border: 1px solid var(--nxp-border); background: var(--nxp-surface-soft); cursor: pointer;
}
#qrForm input[type="checkbox"],
#qrForm input[type="radio"],
#qrForm input[type="range"] { accent-color: var(--nxp-primary); }
#qrForm input[type="range"] { width: 100%; }

.qr-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qr-mode-card {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 82px;
  padding: 13px 13px 13px 40px;
  border: 1px solid var(--nxp-border);
  border-radius: 18px;
  background: var(--nxp-surface-soft);
  cursor: pointer;
}
.qr-mode-card input { position: absolute; left: 14px; top: 18px; width: 16px; height: 16px; }
.qr-mode-card span { color: var(--nxp-text); font-weight: 950; line-height: 1.1; }
.qr-mode-card small { color: var(--nxp-muted); font-weight: 750; line-height: 1.25; }
.qr-mode-card.is-active { border-color: rgba(122, 60, 240, .48); background: var(--nxp-primary-soft); box-shadow: 0 0 0 4px rgba(122,60,240,.07); }

.qr-content-panel { animation: qrFade .16s ease; }
@keyframes qrFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.qr-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qr-field-grid label { display: grid; gap: 6px; min-width: 0; }
.qr-field-grid-one { grid-template-columns: 1fr; }
.qr-field-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.qr-checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--nxp-border);
  border-radius: 16px;
  background: var(--nxp-surface-soft);
  color: var(--nxp-text) !important;
}

.qr-logo-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--nxp-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--nxp-surface-soft) 82%, transparent);
}
.qr-logo-box strong { display: block; color: var(--nxp-text); }
.qr-logo-box p { margin: 4px 0 0; color: var(--nxp-text-soft); font-size: .93rem; }
.qr-upload-button { white-space: nowrap; }
.qr-logo-controls { margin-top: 12px; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--nxp-border); border-radius: 20px; background: var(--nxp-surface-soft); }
.qr-logo-preview-row { display: flex; align-items: center; gap: 12px; }
.qr-logo-preview-row img { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; padding: 6px; background: #fff; border: 1px solid var(--nxp-border); }
.qr-logo-controls label:not(.qr-checkbox-label) { display: grid; gap: 6px; }
.qr-logo-controls strong { color: var(--nxp-primary); }

.qr-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qr-preview-panel { position: sticky; top: calc(var(--nxp-header-height) + 18px); }
.qr-preview-wrap {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--nxp-border);
  border-radius: 26px;
  background:
    linear-gradient(45deg, rgba(122,60,240,.06), rgba(47,160,245,.06)),
    var(--nxp-surface-soft);
  overflow: hidden;
}
.qr-preview-wrap svg { width: min(100%, 360px); height: auto; border-radius: 18px; box-shadow: var(--nxp-shadow-sm); }
.qr-preview-wrap.is-error { place-items: start; min-height: auto; color: #b42318; }
.qr-preview-error { margin: 0; font-weight: 850; }

.qr-output-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.qr-output-info div { padding: 12px; border: 1px solid var(--nxp-border); border-radius: 16px; background: var(--nxp-surface-soft); min-width: 0; }
.qr-output-info strong { display: block; color: var(--nxp-text); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-output-info span { display: block; margin-top: 4px; color: var(--nxp-muted); font-size: .82rem; font-weight: 750; }
.qr-preview-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.qr-preview-actions .nxp-btn { width: 100%; }
.qr-payload-details { margin-top: 14px; border: 1px solid var(--nxp-border); border-radius: 18px; background: var(--nxp-surface-soft); overflow: hidden; }
.qr-payload-details summary { cursor: pointer; padding: 12px 14px; font-weight: 850; color: var(--nxp-text-soft); }
.qr-payload-details pre { margin: 0; padding: 0 14px 14px; max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--nxp-text-soft); font-size: .86rem; }

.qr-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

@media (max-width: 1080px) {
  .qr-hero-grid, .qr-builder { grid-template-columns: 1fr; }
  .qr-preview-panel { position: static; }
}

@media (max-width: 760px) {
  .qr-hero { padding-top: 42px; }
  .qr-panel, .qr-hero-card { padding: 18px; }
  .qr-mini-grid, .qr-info-grid, .qr-mode-grid, .qr-field-grid, .qr-field-grid-compact, .qr-output-info, .qr-preview-actions { grid-template-columns: 1fr; }
  .qr-logo-box { align-items: stretch; flex-direction: column; }
  .qr-logo-box .nxp-btn, .qr-actions .nxp-btn, .qr-hero-actions .nxp-btn { width: 100%; }
  .qr-section-head-row { flex-direction: column; align-items: stretch; }
  .qr-preview-wrap { min-height: 300px; }
}