:root {
  --bg: #f2f4f7;
  --panel: #ffffff;
  --text: #14212b;
  --muted: #60707c;
  --primary: #19638a;
  --primary-dark: #0f4865;
  --line: #d8e1e8;
  --ring: rgba(25, 99, 138, 0.22);
}

body {
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(850px 500px at 2% -10%, #dcecf5 0%, transparent 60%),
    linear-gradient(160deg, #f0f3f6 0%, #f8fafb 100%);
}

h1,
h2,
h3,
.eyebrow {
  font-family: "Outfit", sans-serif;
}

.hero {
  max-width: 1120px;
  margin: 2.2rem auto 1rem;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 252, 255, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 1.25rem;
  box-shadow: 0 18px 48px rgba(15, 28, 35, 0.09);
  backdrop-filter: blur(10px);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
}

.app-main {
  max-width: 1120px;
}

.ui-panel {
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--panel);
  box-shadow: 0 10px 26px rgba(15, 28, 35, 0.06);
}

.helper-copy {
  color: var(--muted);
  font-size: 0.93rem;
  margin-bottom: 1.1rem;
}

.workflow-pill {
  color: #2f5d77;
  background: #e9f4fb;
  border: 1px solid #cfe3f0;
  border-radius: 999px;
  padding: 0.32rem 0.72rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge-soft {
  color: #31566a;
  background: #e6f1f7;
  border: 1px solid #d0e4ef;
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-weight: 600;
}

.form-control {
  min-height: 48px;
  border-radius: 0.72rem;
  border-color: var(--line);
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem var(--ring);
}

.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.upload-input {
  border-style: dashed;
  border-width: 2px;
  border-color: #b8cedd;
  background: #f7fbfe;
  padding: 0.45rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.upload-input:hover {
  border-color: var(--primary);
  background: #f3f9fd;
}

.upload-field {
  background: #fdfefe;
  border: 1px solid #e6edf2;
  border-radius: 0.9rem;
  padding: 0.95rem 0.95rem 0.85rem;
}

.upload-input::file-selector-button {
  border: 0;
  border-radius: 0.6rem;
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  padding: 0.55rem 0.9rem;
  margin-right: 0.8rem;
  cursor: pointer;
}

.upload-input::file-selector-button:hover {
  background: var(--primary-dark);
}

.upload-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.38rem;
}

.action-row {
  padding-top: 0.4rem;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  border-radius: 0.72rem;
  font-weight: 600;
  min-height: 46px;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-outline-secondary {
  border-radius: 0.72rem;
  min-height: 46px;
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
  border-radius: 0.72rem;
  min-height: 46px;
  font-weight: 600;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

.preview-card {
  border: 1px solid var(--line);
  background: #fbfcfe;
  border-radius: 0.9rem;
  padding: 0.78rem;
}

.preview-tag {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #445b69;
  font-weight: 700;
}

.preview-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 0.72rem;
}

.combined-preview-card img {
  width: 100%;
  max-height: 620px;
  height: auto;
  object-fit: contain;
  background: #f2f6f9;
}

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

.section-input-preview {
  padding-bottom: 0.5rem;
}

.section-output-result {
  background: linear-gradient(135deg, rgba(31, 107, 143, 0.04) 0%, rgba(31, 107, 143, 0.02) 100%);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(31, 107, 143, 0.08);
}

.result-heading {
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.result-actions {
  padding-top: 0.2rem;
}

.bg-shape {
  position: fixed;
  pointer-events: none;
  z-index: -1;
  opacity: 0.45;
}

.shape-1 {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9dd5ea, #5ea8c7);
  top: -120px;
  left: -120px;
  filter: blur(35px);
}

@media (max-width: 767px) {
  .hero {
    margin-top: 1.2rem;
    margin-bottom: 0.8rem;
  }

  .lead {
    font-size: 1rem;
  }

  .preview-card img {
    height: 200px;
  }

  .upload-field {
    padding: 0.85rem;
  }

  .combined-preview-card img {
    max-height: 360px;
    height: auto;
  }
}