/* qr-generator/css/style.css - modern, minimal UI */
.qr-generator {
  max-width: 480px;
  margin: 18px auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #111827;
}

.qr-generator-inner {
  background: #ffffff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.03);
}

.qr-generator-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.qr-input-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

.qr-text {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e6e6e9;
  font-size: 0.95rem;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.qr-text:focus {
  box-shadow: 0 6px 20px rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.6);
}

.qr-generate-btn {
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  color: #ffffff;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qr-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.qr-download-btn {
  background: linear-gradient(90deg, #06b6d4, #10b981);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.qr-reset-btn {
  background: transparent;
  color: #374151;
  border: 1px solid rgba(55,65,81,0.08);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.qr-result {
  margin-top: 14px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
}

.qr-placeholder {
  color: #6b7280;
  text-align: center;
}

.qr-error {
  color: #991b1b;
  background: #fff5f5;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #fecaca;
}

.qr-spinner {
  color: #4f46e5;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-weight: 700;
}

.qr-code img,
.qr-code canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  box-shadow: 0 8px 28px rgba(17,24,39,0.06);
  border-radius: 8px;
}

@media (max-width: 520px) {
  .qr-input-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .qr-generate-btn {
    width: 100%;
    justify-content: center;
  }
}