.generator-shell { display:grid; grid-template-columns: minmax(0, 1.06fr) 430px; gap: 22px; align-items:start; }
.generator-card { padding: 26px; }
.preview-card { padding: 24px; position: sticky; top: 96px; }
.card-head h2, .preview-card h2 { margin: 0 0 8px; font-size: 1.4rem; }
.card-head p, .preview-card p { margin:0; color: var(--muted); }
.subsection { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.subsection h3 { margin:0 0 16px; font-size: 1.02rem; }
.form-grid, .controls-grid, .icon-grid { display:grid; gap:16px; }
.form-grid, .controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display:grid; gap:8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size:.92rem; color:#dfe9ff; font-weight: 760; }
.input, .select, .textarea {
  width:100%; min-height: 50px; padding: 0 14px; border-radius: 16px; color: var(--text);
  border: 1px solid var(--line); background: rgba(255,255,255,.04); outline:none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.textarea { min-height: 110px; padding: 12px 14px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #7f96bf; }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(107,177,255,.48); box-shadow: 0 0 0 4px rgba(77,125,255,.14); }
.option-row { display:flex; gap:16px; flex-wrap:wrap; }
.check { display:flex; align-items:center; gap:10px; min-height: 44px; color: var(--muted); font-weight: 650; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.color-field { display:grid; grid-template-columns: 56px 1fr; gap: 10px; align-items:center; }
.color-input { width:56px; height:50px; padding:4px; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.04); }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top: 20px; }
.actions .btn { flex: 1 1 150px; }
.preview-frame {
  margin-top: 20px; min-height: 410px; padding: 26px; border-radius: 24px; overflow:hidden;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.045) 50%, rgba(255,255,255,.045) 75%, transparent 75%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  background-size: 28px 28px, auto;
  display:grid; place-items:center;
}
.qr-stage { width:100%; display:grid; place-items:center; }
.qr-stage svg, .qr-stage img { max-width:100%; height:auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.2)); }
.preview-note, .payload-box {
  margin-top: 16px; border-radius: 18px; border: 1px solid var(--line); padding: 14px 16px; background: rgba(255,255,255,.03); color: var(--muted);
}
.payload-box code { display:block; white-space:pre-wrap; overflow-wrap:anywhere; color:#dce7ff; }
.error-box {
  display:none; margin-top:14px; border-radius:18px; padding:14px 16px; border:1px solid rgba(255,104,104,.3); background: rgba(255,104,104,.1); color:#ffd9d9;
}
.generator-benefits { margin-top:18px; display:grid; gap:10px; }
.generator-benefits div { display:flex; gap:10px; align-items:center; color: var(--muted); }
.generator-benefits span {
  width:26px; height:26px; display:grid; place-items:center; border-radius:999px; flex:none;
  background: rgba(77,125,255,.18); color:#cce0ff;
}
.related-links { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.related-link {
  padding:16px 18px; border-radius:18px; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text);
}
.related-link span { display:block; color: var(--muted); font-size:.92rem; margin-top:6px; }

.type-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.type-chip { display:flex; align-items:center; justify-content:center; min-height: 64px; padding: 10px 12px; border-radius: 18px; border:1px solid var(--line); background: rgba(255,255,255,.03); font-weight: 750; text-align:center; }
.type-chip.active { border-color: rgba(107,177,255,.45); background: rgba(77,125,255,.16); box-shadow: inset 0 0 0 1px rgba(107,177,255,.18); }
.preview-card .btn { width: 100%; }


.select, .input, .textarea, .color-input { color-scheme: dark; }
.select { appearance:none; -webkit-appearance:none; background-image: linear-gradient(45deg, transparent 50%, #b8cdf7 50%), linear-gradient(135deg, #b8cdf7 50%, transparent 50%); background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:40px; }
.select option { color: #edf4ff; background: #10213f; }
.input[type="file"] { padding: 11px 14px; }


.select {
  color: #edf4ff;
  background-color: rgba(255,255,255,.04);
}
.select option, .select optgroup {
  background: #12284d !important;
  color: #edf4ff !important;
}
.select option:hover, .select option:checked, .select option:focus {
  background: #2757b8 !important;
  color: #ffffff !important;
}
.input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 1px solid rgba(107,177,255,.28);
  background: rgba(77,125,255,.14);
  color: #edf4ff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}