/* Shared layout for the feedback and cooperation flows. Loaded after theme files. */
body[data-page="suggest"] .hero,
body[data-page="cooperate"] .hero {
  padding: 28px 0 48px !important;
}

body[data-page="cooperate"] .cooperate-success > div {
  width: min(100%, 460px);
}

body[data-page="cooperate"] .cooperate-success-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

body[data-page="cooperate"] .success-return-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}

body[data-page="cooperate"] .success-return-btn:active {
  transform: scale(.98);
}

body[data-page="cooperate"] .success-return-btn:focus-visible {
  outline: 2px solid #00aceb;
  outline-offset: 2px;
}

body[data-page="cooperate"] .success-return-btn {
  border: 1px solid #00aceb;
  background: linear-gradient(135deg, #00aceb, #6fd4f4);
  color: #fff;
}

body[data-page="cooperate"] .success-return-btn:hover {
  border-color: #3672d8;
  background: linear-gradient(135deg, #3672d8, #00aceb);
}

body[data-page="cooperate"] .cooperate-success-countdown {
  min-height: 21px;
  margin-top: 12px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="suggest"] .hero-card,
body[data-page="cooperate"] .hero-card {
  width: min(1280px, calc(100vw - 48px)) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr) !important;
  align-items: stretch !important;
  gap: 24px !important;
  padding: 24px !important;
  border-radius: 26px !important;
}

body[data-page="suggest"] .hero-copy,
body[data-page="cooperate"] .hero-copy {
  min-width: 0 !important;
  min-height: 100% !important;
  padding: 32px !important;
  border-radius: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

body[data-page="suggest"] .hero-copy h1,
body[data-page="cooperate"] .hero-copy h1 {
  margin: 0 0 14px !important;
  font-size: 36px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

body[data-page="suggest"] .hero-copy p,
body[data-page="cooperate"] .hero-copy p {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  overflow-wrap: anywhere !important;
}

body[data-page="suggest"] .hero-copy::after,
body[data-page="cooperate"] .hero-copy::after {
  width: 56px !important;
  height: 4px !important;
  margin-top: 24px !important;
}

body[data-page="suggest"] .form-card,
body[data-page="cooperate"] .form-card {
  width: 100% !important;
  min-width: 0 !important;
  padding: 26px !important;
  border-radius: 22px !important;
}

body[data-page="suggest"] .form-card h2,
body[data-page="cooperate"] .form-card h2 {
  margin: 0 0 20px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body[data-page="suggest"] .form-grid,
body[data-page="cooperate"] .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 17px !important;
}

body[data-page="suggest"] .field,
body[data-page="cooperate"] .field {
  min-width: 0 !important;
  gap: 8px !important;
}

body[data-page="suggest"] .field label,
body[data-page="cooperate"] .field label {
  min-height: 20px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

body[data-page="suggest"] .field input,
body[data-page="suggest"] .field select,
body[data-page="suggest"] .field textarea,
body[data-page="cooperate"] .field input,
body[data-page="cooperate"] .field select,
body[data-page="cooperate"] .field textarea {
  min-width: 0 !important;
  border-radius: 13px !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

body[data-page="suggest"] .field input,
body[data-page="suggest"] .field select,
body[data-page="cooperate"] .field input,
body[data-page="cooperate"] .field select {
  height: 50px !important;
  padding: 0 15px !important;
  line-height: 50px !important;
}

body[data-page="suggest"] .field textarea,
body[data-page="cooperate"] .field textarea {
  min-height: 136px !important;
  padding: 13px 15px !important;
  line-height: 1.65 !important;
}

body[data-page="suggest"] .submit-row,
body[data-page="cooperate"] .submit-row {
  min-height: 48px !important;
  margin-top: 20px !important;
  gap: 14px !important;
}

body[data-page="suggest"] .submit-btn,
body[data-page="cooperate"] .submit-btn {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body[data-page="suggest"] .form-status,
body[data-page="cooperate"] .form-status {
  line-height: 1.5 !important;
}

@media (max-width: 860px) {
  body[data-page="suggest"] .hero-card,
  body[data-page="cooperate"] .hero-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body.mobile-page[data-page="suggest"] .hero,
body.mobile-page[data-page="cooperate"] .hero {
  padding: 12px 0 34px !important;
}

body.mobile-page[data-page="cooperate"] .nav-inner {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  row-gap: 8px !important;
}

body.mobile-page[data-page="cooperate"] .logo {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.mobile-page[data-page="cooperate"] .mobile-primary-nav {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

body.mobile-page[data-page="cooperate"] .cooperate-success-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

body.mobile-page[data-page="cooperate"] .success-return-btn {
  width: 100%;
}

body.mobile-page[data-page="suggest"] .hero-card,
body.mobile-page[data-page="cooperate"] .hero-card {
  width: calc(100% - 20px) !important;
  max-width: 370px !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 16px !important;
  border-radius: 24px !important;
}

body.mobile-page[data-page="suggest"] .hero-copy,
body.mobile-page[data-page="cooperate"] .hero-copy {
  min-height: 0 !important;
  padding: 10px 2px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
}

body.mobile-page[data-page="suggest"] .hero-copy h1,
body.mobile-page[data-page="cooperate"] .hero-copy h1 {
  margin: 0 0 9px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

body.mobile-page[data-page="suggest"] .hero-copy p,
body.mobile-page[data-page="cooperate"] .hero-copy p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

body.mobile-page[data-page="suggest"] .hero-copy::after,
body.mobile-page[data-page="cooperate"] .hero-copy::after {
  width: 48px !important;
  height: 3px !important;
  margin-top: 16px !important;
}

body.mobile-page[data-page="suggest"] .form-card,
body.mobile-page[data-page="cooperate"] .form-card {
  padding: 20px !important;
  border-radius: 22px !important;
}

body.mobile-page[data-page="suggest"] .form-card h2,
body.mobile-page[data-page="cooperate"] .form-card h2 {
  margin-bottom: 18px !important;
  font-size: 23px !important;
}

body.mobile-page[data-page="suggest"] .form-grid,
body.mobile-page[data-page="cooperate"] .form-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 16px !important;
}

body.mobile-page[data-page="suggest"] .field.wide,
body.mobile-page[data-page="cooperate"] .field.wide {
  grid-column: auto !important;
}

body.mobile-page[data-page="suggest"] .field input,
body.mobile-page[data-page="suggest"] .field select,
body.mobile-page[data-page="cooperate"] .field input,
body.mobile-page[data-page="cooperate"] .field select {
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

body.mobile-page[data-page="suggest"] .submit-row,
body.mobile-page[data-page="cooperate"] .submit-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin-top: 18px !important;
}

body.mobile-page[data-page="suggest"] .submit-btn,
body.mobile-page[data-page="cooperate"] .submit-btn {
  width: 100% !important;
}

/* Desktop demand registration follows the same two-column feedback composition. */
body[data-page="demand"] .hero {
  padding: 28px 0 48px !important;
}

body[data-page="demand"] .hero-card {
  width: min(1280px, calc(100vw - 48px)) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr) !important;
  align-items: stretch !important;
  gap: 24px !important;
  padding: 24px !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg,#00202e,#003b52 54%,#0a3a58) !important;
  box-shadow: 0 24px 70px rgba(7,17,31,.18) !important;
}

body[data-page="demand"] .hero-copy {
  min-width: 0 !important;
  min-height: 100% !important;
  padding: 32px !important;
  border-radius: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

body[data-page="demand"] .hero-copy h1 {
  margin: 0 0 14px !important;
  font-size: 36px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  color: #f8fafc !important;
}

body[data-page="demand"] .hero-copy p {
  max-width: 100% !important;
  margin: 0 !important;
  color: rgba(226,232,240,.78) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  overflow-wrap: anywhere !important;
}

body[data-page="demand"] .hero-copy::after {
  content: "";
  width: 56px !important;
  height: 4px !important;
  margin-top: 24px !important;
  border-radius: 999px;
  background: linear-gradient(90deg,#6fd4f4,#00aceb);
}

body[data-page="demand"] .form-card {
  width: 100% !important;
  min-width: 0 !important;
  padding: 26px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  box-shadow: 0 18px 45px rgba(2,8,23,.18) !important;
}

body[data-page="demand"] .form-card h2 {
  margin: 0 0 6px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body[data-page="demand"] .form-intro {
  margin: 0 0 20px !important;
  color: var(--text-3) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

body[data-page="demand"] .demand-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 17px !important;
}

body[data-page="demand"] .demand-form-grid > .inline-grid,
body[data-page="demand"] .demand-form-grid > .field,
body[data-page="demand"] .demand-form-grid > .conditional,
body[data-page="demand"] .demand-form-grid > .privacy-consent,
body[data-page="demand"] .demand-form-grid > .submit-row {
  grid-column: 1 / -1;
}

body[data-page="demand"] .field {
  min-width: 0 !important;
  gap: 8px !important;
}

body[data-page="demand"] .field label {
  min-height: 20px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

body[data-page="demand"] .field input,
body[data-page="demand"] .field select,
body[data-page="demand"] .field textarea {
  min-width: 0 !important;
  border-radius: 13px !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

body[data-page="demand"] .field input,
body[data-page="demand"] .field select {
  height: 50px !important;
  padding: 0 15px !important;
  line-height: 50px !important;
}

body[data-page="demand"] .field textarea {
  min-height: 136px !important;
  padding: 13px 15px !important;
  line-height: 1.65 !important;
}

body[data-page="demand"] .region-grid,
body[data-page="demand"] .inline-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body[data-page="demand"] .region-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-page="demand"] .type-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-page="demand"] .type-option {
  min-height: 108px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  border-color: rgba(148,163,184,.24) !important;
  background: #f0fafd !important;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease !important;
}

body[data-page="demand"] .type-option:hover {
  border-color: rgba(0,172,235,.42) !important;
}

body[data-page="demand"] .type-option.active {
  border-color: rgba(0,172,235,.54) !important;
  background: #e6f7fd !important;
  box-shadow: 0 0 0 3px rgba(0,172,235,.08) !important;
}

body[data-page="demand"] .conditional {
  padding: 16px !important;
  border-radius: 16px !important;
  background: #f0fafd !important;
  border-color: rgba(148,163,184,.18) !important;
}

body[data-page="demand"] .privacy-consent {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

body[data-page="demand"] .submit-row {
  min-height: 48px !important;
  margin-top: 3px !important;
  gap: 14px !important;
}

body[data-page="demand"] .primary-btn,
body[data-page="demand"] .ghost-btn {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body[data-page="demand"] .primary-btn {
  background: linear-gradient(135deg,#00aceb,#6fd4f4) !important;
}

/* PC 端表单页改为纵向阅读：先看页面说明，再填写完整表单。 */
@media (min-width: 861px) {
  body[data-page="suggest"] .hero-card,
  body[data-page="cooperate"] .hero-card,
  body[data-page="demand"] .hero-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  body[data-page="suggest"] .hero-card,
  body[data-page="demand"] .hero-card {
    background:
      radial-gradient(circle at 12% 8%, rgba(0,172,235,.11), transparent 26%),
      radial-gradient(circle at 92% 0%, rgba(255, 255, 255, .86), transparent 24%),
      rgba(255, 255, 255, .48) !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    box-shadow: 0 24px 70px rgba(0,172,235,.10), inset 0 1px 0 rgba(255, 255, 255, .68) !important;
  }

  body[data-page="suggest"] .hero-copy,
  body[data-page="cooperate"] .hero-copy,
  body[data-page="demand"] .hero-copy {
    min-height: 0 !important;
    padding: 22px 28px 8px !important;
    justify-content: flex-start !important;
  }

  body[data-page="suggest"] .hero-copy,
  body[data-page="demand"] .hero-copy {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-page="suggest"] .hero-copy h1,
  body[data-page="demand"] .hero-copy h1 {
    color: #002e3d !important;
  }

  body[data-page="suggest"] .hero-copy p,
  body[data-page="demand"] .hero-copy p {
    color: #566780 !important;
  }

  body[data-page="suggest"] .hero-copy::after,
  body[data-page="demand"] .hero-copy::after {
    display: none !important;
    content: none !important;
  }

  body[data-page="suggest"] .form-card,
  body[data-page="cooperate"] .form-card,
  body[data-page="demand"] .form-card {
    max-width: none !important;
  }
}

@media (max-width: 860px) {
  body[data-page="demand"] .hero-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="demand"] .demand-form-grid,
  body[data-page="demand"] .inline-grid,
  body[data-page="demand"] .region-grid,
  body[data-page="demand"] .type-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
body[data-page="demand"] .back-link {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: #fff;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="demand"] .back-link:hover {
  border-color: rgba(0,172,235,.38);
  color: #0087b3;
}
/* Keep demand registration on the same Cloud Blue glass palette as feedback. */
body[data-page="demand"] .hero {
  padding: 28px 0 48px !important;
}

body[data-page="demand"] .hero-card {
  background:
    radial-gradient(circle at 12% 8%, rgba(0,172,235,.11), transparent 26%),
    radial-gradient(circle at 92% 0%, rgba(255, 255, 255, .86), transparent 24%),
    rgba(255, 255, 255, .48) !important;
  border-color: rgba(255, 255, 255, .72) !important;
  box-shadow:
    0 24px 70px rgba(0,172,235,.10),
    inset 0 1px 0 rgba(255, 255, 255, .68) !important;
}

body[data-page="demand"] .hero-copy {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="demand"] .hero-copy h1 {
  color: #002e3d !important;
}

body[data-page="demand"] .hero-copy p {
  color: #566780 !important;
}

body[data-page="demand"] .form-card {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.82) !important;
  box-shadow:
    0 22px 64px rgba(0,172,235,.13),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}