.cqrg-section {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem 4rem;
  background: radial-gradient(circle at top, #f0f5ff 0, #ffffff 55%);
}

.cqrg-card {
  max-width: 900px;
  width: 100%;
  background: #ffffff;
  border-radius: 28px;
  box-shadow:
    0 24px 60px rgba(15, 35, 52, 0.14),
    0 2px 8px rgba(15, 35, 52, 0.08);
  padding: 2.4rem 2.2rem 2.1rem;
  position: relative;
  overflow: hidden;
}

.cqrg-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 15% 0, rgba(0,136,255,0.12), transparent 60%),
    radial-gradient(circle at 90% 120%, rgba(83, 207, 255, 0.16), transparent 55%);
  pointer-events: none;
  opacity: 0.8;
}

.cqrg-card-header,
.cqrg-card-body,
.cqrg-card-footer {
  position: relative;
  z-index: 1;
}

.cqrg-title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #141e30;
  text-align: center;
}

.cqrg-subtitle {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  color: #5f6b7a;
  text-align: center;
}

/* Layout */

.cqrg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.8rem;
  margin-top: 2rem;
  align-items: flex-start;
}

.cqrg-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cqrg-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #3b4250;
}

.cqrg-field input[type="url"],
.cqrg-field input[type="text"],
.cqrg-field input[type="file"] {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #d3d9ea;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  background: #ffffff;
}

.cqrg-field input[type="url"]:focus,
.cqrg-field input[type="text"]:focus,
.cqrg-field input[type="file"]:focus {
  border-color: #0088ff;
  box-shadow: 0 0 0 1px rgba(0, 136, 255, 0.18);
}

.cqrg-field input[type="color"] {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #d3d9ea;
  padding: 0.15rem;
  height: 2.4rem;
  background: #ffffff;
}

.cqrg-field-group {
  display: flex;
  gap: 0.9rem;
}

.cqrg-help {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #8a94a6;
}

/* Preview */

.cqrg-preview-wrapper {
  display: flex;
  justify-content: center;
}

.cqrg-preview {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid #dde4f5;
  padding: 1.1rem 1.1rem 1.3rem;
  box-shadow: 0 10px 28px rgba(25, 60, 103, 0.12);
  text-align: center;
}

.cqrg-preview-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c7a90;
  margin-bottom: 0.5rem;
}

.cqrg-qrcode canvas,
.cqrg-qrcode img {
  display: block;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
}

.cqrg-preview-hint {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #6b7280;
}

/* Buttons */

.cqrg-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.cqrg-btn {
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.55rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.08s ease;
}

.cqrg-btn-primary {
  background: #0088ff;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 136, 255, 0.35);
}

.cqrg-btn-primary:hover {
  background: #006fd1;
  box-shadow: 0 10px 26px rgba(0, 110, 210, 0.45);
  transform: translateY(-1px);
}

.cqrg-btn-outline {
  background: #ffffff;
  color: #006fd1;
  border-color: #c1d9ff;
}

.cqrg-btn-outline[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.cqrg-btn-outline:hover:not([disabled]) {
  background: #f1f6ff;
}

/* Адаптив */

@media (max-width: 768px) {
  .cqrg-card {
    padding: 1.8rem 1.2rem 1.6rem;
    border-radius: 22px;
  }

  .cqrg-layout {
    grid-template-columns: 1fr;
  }

  .cqrg-preview {
    margin-top: 0.5rem;
  }
}
/* Неактивная кнопка (disabled) */
.cqrg-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* ---------------------------------------------
   SYSTEM MESSAGES / Уведомления
   --------------------------------------------- */

#cqrg-messages {
  position: relative;
  margin-bottom: 1.2rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
  text-align: center;
}

/* Видимость */
.cqrg-messages--visible {
  opacity: 1 !important;
  transform: translateY(0);
  pointer-events: auto;
}

/* ТИПЫ */

/* Успех — зелёный */
.cqrg-messages--success {
  background: #e9f9ef;
  color: #0f7b32;
  border: 1px solid #c4eccf;
  box-shadow: 0 4px 14px rgba(23, 92, 40, 0.12);
}

/* Ошибка — красный */
.cqrg-messages--error {
  background: #fdeaea;
  color: #b32020;
  border: 1px solid #f2bcbc;
  box-shadow: 0 4px 14px rgba(180, 40, 40, 0.15);
}

/* Информация — синий */
.cqrg-messages--info {
  background: #e8f3ff;
  color: #0d5ea8;
  border: 1px solid #c0dcff;
  box-shadow: 0 4px 14px rgba(0, 97, 182, 0.14);
}