/*
 * app.css — CHỈ style cho form và màn hình tiến độ.
 *
 * KHÔNG được chứa style của báo cáo: cái đó nằm ở report.css bên tool và là nguồn duy
 * nhất. Thêm rule cho .aiseo-report ở đây là bắt đầu tạo ra bản sao thứ hai của layout.
 *
 * Mọi selector đều bắt đầu từ .up4d-seo-app để không đụng theme.
 */

.up4d-seo-app { margin: 24px 0; }

.up4d-seo-form {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .06);
}
.up4d-seo-field { display: grid; gap: 6px; }
.up4d-seo-field > span {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b;
}
.up4d-seo-app textarea,
.up4d-seo-app select {
  width: 100%; font: inherit; padding: 12px 14px;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #0f172a;
}
.up4d-seo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.up4d-seo-submit {
  justify-self: start; border: 0; border-radius: 10px; padding: 14px 22px;
  font: inherit; font-weight: 850; cursor: pointer;
  background: #2196f3; color: #fff;
}
.up4d-seo-submit:hover { filter: brightness(1.05); }
.up4d-seo-submit[disabled] { opacity: .6; cursor: default; }

.up4d-seo-progress { margin: 20px 0; }
.up4d-seo-progress-msg { margin: 0 0 8px; color: #64748b; font-size: 14px; }
.up4d-seo-bar {
  height: 14px; border-radius: 999px; background: #e2e8f0; overflow: hidden;
}
.up4d-seo-bar > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #2196f3, #0ea5e9);
  transition: width .5s;
}

.up4d-seo-error,
.up4d-seo-notice {
  margin: 16px 0; padding: 14px 16px; border-radius: 10px;
  border: 1px solid #fca5a5; background: #fef2f2; color: #991b1b; font-size: 14px;
}
.up4d-seo-notice { border-color: #fcd34d; background: #fffbeb; color: #92400e; }

@media (max-width: 700px) {
  .up4d-seo-row { grid-template-columns: 1fr; }
}