:root {
  --h5-width: 542.5px;
  --bg: #f4f5f7;
  --panel: #fff;
  --text: #111827;
  --muted: #8a93a3;
  --primary: #ec5c55;
  --primary-dark: #d94740;
  --orange-bg: #feeae8;
  --gray-bg: #efefef;
  --line: #e6e9ef;
}

* {
  color: #333;
  box-sizing: border-box;
  font-weight: 400;
}

body {
  margin: 0;
  background: var(--bg);
  color: #333;
  font-family: Helvetica, Verdana, Arial, "Droid Sans", "Droid Sans Fallback", "PingFang SC", sans-serif;
  letter-spacing: 0;
  font-weight: 400;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.page {
  width: min(var(--h5-width), 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 22.4cqw;
  background: #fff;
  container-type: inline-size;
}

.hero img {
  display: block;
  width: 100%;
  height: auto;
}

.apply-panel {
  display: grid;
  gap: 0;
  margin: -9.33cqw 2cqw 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
  z-index: 2;
  line-height: 1;
}

.apply-panel-primary {
  margin: calc(-9.33cqw - 20px) calc(2cqw + 20px) 0;
}

.field-row {
  display: grid;
  border-radius: 1.33cqw;
  background: #fff;
  box-shadow: 0 1px 4.67cqw rgba(0, 0, 0, 0.1);
  padding: 0 3.33cqw;
}

.city-field,
.phone-field {
  display: grid;
  grid-template-columns: 3.73cqw minmax(0, 1fr) 5.07cqw;
  align-items: center;
  min-height: 16cqw;
  border: 0;
  background: #fff;
  padding: 0;
  text-align: left;
}

.city-field {
  grid-template-columns: 3.73cqw minmax(0, 1fr) 3.2cqw;
  border-bottom: 1px solid #e1e1e1;
}

.field-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.city-icon {
  width: 3.73cqw;
  height: 4.67cqw;
  background-image: url("./assets/addr1.png");
}

.down-icon {
  width: 3.2cqw;
  height: 1.87cqw;
  justify-self: end;
  background-image: url("./assets/dowico.png");
}

.phone-icon {
  width: 3.47cqw;
  height: 5.33cqw;
  background-image: url("./assets/phicon1.png");
}

.lock-icon {
  width: 5.07cqw;
  height: 6.13cqw;
  justify-self: end;
  background-image: url("./assets/prvia.png");
}

.city-field strong {
  min-width: 0;
  color: #222;
  font-size: 3.73cqw;
  line-height: 4.8cqw;
  margin-left: 3.33cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #222;
  font-size: 3.73cqw;
  line-height: 6.4cqw;
  margin-left: 3.33cqw;
}

.privacy-row {
  display: flex;
  align-items: flex-start;
  gap: 1.07cqw;
  color: #333;
  font-size: 2.93cqw;
  line-height: 1;
  padding-top: 2.67cqw;
  margin-bottom: 3.33cqw;
}

.privacy-row input {
  appearance: none;
  width: 3cqw;
  height: 3cqw;
  flex: 0 0 auto;
  margin-top: 0;
  border: 1px solid #b8c0cc;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
}

.privacy-row input:checked {
  border-color: #4a9eff;
  background: #4a9eff;
}

.privacy-row input:checked::after {
  content: "";
  width: 35%;
  height: 58%;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-8%) rotate(45deg);
}

.privacy-row button {
  border: 0;
  background: transparent;
  color: #479fe2;
  padding: 0;
  text-decoration: underline;
  position: relative;
  z-index: 3;
}

.submit {
  width: 100%;
  height: 12cqw;
  border: 0;
  border-radius: 1.07cqw;
  background: var(--primary);
  color: #fff;
  font-size: 4.8cqw;
  font-weight: 400;
}

.submit:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.submit:not(:disabled):active {
  background: var(--primary-dark);
}

.stats {
  display: grid;
  place-items: center;
  gap: 0;
  padding: 2.67cqw 2.13cqw 3.2cqw;
  background: #fff;
}

.stats strong {
  color: #fb6345;
  font-size: 12cqw;
  line-height: 1.2;
  font-weight: 200;
}

.stats span {
  color: rgba(0, 0, 0, 0.4);
  font-size: 3.2cqw;
}

.content-section {
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding: 3.33cqw 4cqw 2.67cqw;
  background: #fff;
}

.brand-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.25cqw;
  margin: 7.5cqw 0 6.67cqw;
  font-size: 4.53cqw;
  font-weight: 500;
}

.brand-title span {
  width: 4cqw;
  height: 3.6cqw;
  background: url("./assets/i80.png") no-repeat center / contain;
}

.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 4cqw;
}

.advantage-grid div {
  display: grid;
  justify-items: center;
  gap: 3.47cqw;
  min-width: 0;
  margin-bottom: 4cqw;
}

.advantage-grid img {
  width: 16cqw;
  height: 16cqw;
  object-fit: contain;
}

.advantage-grid span {
  color: #666;
  font-size: 3.2cqw;
  text-align: center;
  white-space: nowrap;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 4.67cqw;
  margin-bottom: 2.67cqw;
}

.section-title strong {
  color: #000;
  font-size: 5.6cqw;
  font-weight: 600;
}

.section-title span {
  min-width: 0;
  border-left: 1px solid #e6e6e6;
  padding: 0 2.67cqw;
  margin-left: 4.67cqw;
  color: #999;
  font-size: 3.2cqw;
}

.case-list {
  display: flex;
  gap: 1.87cqw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-top: 4cqw;
  padding-bottom: 6cqw;
  -webkit-overflow-scrolling: touch;
}

.case-slide {
  display: grid;
  gap: 5.33cqw;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.case-card {
  display: grid;
  grid-template-columns: 26.67cqw minmax(0, 1fr);
  gap: 2cqw;
}

.case-card img {
  width: 26.67cqw;
  height: 19.33cqw;
  object-fit: cover;
}

.case-card h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
  font-size: 4cqw;
  font-weight: 500;
}

.tags {
  display: flex;
  gap: 0.67cqw;
  flex-wrap: wrap;
  margin: 2.1cqw 0 1.35cqw;
}

.tags span {
  padding: 1.33cqw 1.6cqw;
  background: var(--gray-bg);
  color: #999;
  font-size: 2.93cqw;
}

.tags .hot {
  background: var(--orange-bg);
  color: #ff6342;
}

.bid {
  display: flex;
  align-items: center;
  gap: 1.07cqw;
  margin: 0;
  min-width: 0;
  color: #999;
  font-size: 2.93cqw;
}

.bid em {
  flex: 0 0 auto;
  border-radius: 2px;
  background: #fb6345;
  color: #fff;
  padding: 0.67cqw 0.8cqw 0.53cqw;
  font-style: normal;
  font-weight: 700;
}

.bid strong {
  margin-left: auto;
  color: #ff6342;
  font-size: 5.6cqw;
  white-space: nowrap;
}

.notice {
  margin: 0;
  padding: 3.33cqw 0;
  color: #9da4af;
  font-size: 3.2cqw;
}

.comment-list {
  overflow-x: auto;
  overflow: hidden;
  padding: 4cqw 0 0;
  -webkit-overflow-scrolling: touch;
}

.comment-track {
  display: flex;
  transition: transform 260ms ease;
}

.comment-card {
  flex: 0 0 100%;
  min-height: 58.4cqw;
  border-radius: 8px;
  background: #fff url("./assets/sallerbg.png") no-repeat center / 100% 100%;
  padding: 3.33cqw 0 2cqw;
}

.comment-card h3 {
  margin: 4.67cqw 1.33cqw 4.67cqw;
  padding: 0 2.67cqw;
  color: #333;
  font-size: 5.87cqw;
  line-height: 1.5;
  font-weight: 600;
}

.comment-card p {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.07cqw;
  margin: 0 1.33cqw 4cqw 0;
  padding: 0 2cqw;
  color: #999;
  font-size: 3.2cqw;
  text-align: right;
}

.comment-card p span {
  width: 4.8cqw;
  border-top: 1px solid #999;
}

.comment-card div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.33cqw;
  padding: 0 0 0 3.33cqw;
}

.comment-card img {
  width: 100%;
  max-width: 18.4cqw;
  height: 14cqw;
  object-fit: cover;
  border-radius: 4px;
}

.comment-dots {
  display: flex;
  justify-content: center;
  gap: 0.93cqw;
  padding: 1.87cqw 0 0;
}

.comment-dots button {
  width: 1.6cqw;
  height: 1.6cqw;
  border: 0;
  border-radius: 999px;
  background: #d6d6d6;
  padding: 0;
}

.comment-dots button.active {
  width: 4.27cqw;
  background: #a6a6a6;
}

.progress-card {
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
  overflow: hidden;
}

.progress-card img {
  display: block;
  width: 100%;
  height: auto;
}

.deal-card {
  border-radius: 0.53cqw;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
  padding: 2.67cqw 2cqw;
  margin: 3.33cqw;
}

.deal-main {
  display: grid;
  grid-template-columns: 16cqw minmax(0, 1fr);
  gap: 2cqw;
}

.deal-main img {
  width: 16cqw;
  height: 12cqw;
  object-fit: cover;
}

.deal-main h3 {
  margin: 0 0 2.67cqw;
  color: #000;
  font-size: 4cqw;
}

.deal-main p {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.8cqw;
  margin: 0;
  min-width: 0;
}

.deal-main span {
  flex: 0 0 auto;
  background: var(--orange-bg);
  color: #ff6342;
  padding: 1.1cqw 1.1cqw;
  font-size: 2.65cqw;
  white-space: nowrap;
}

.deal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8cqw;
  margin-top: 1.33cqw;
  padding-top: 2.67cqw;
  border-top: 1px solid #dfdfdf;
}

.deal-stats div {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
}

.deal-stats strong {
  color: #666;
  font-size: 4.27cqw;
  white-space: nowrap;
}

.deal-stats span {
  color: #999;
  font-size: 3.2cqw;
  text-align: center;
}

.fixed-apply {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 10;
  width: min(var(--h5-width), 100%);
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 -2px 16px rgba(17, 24, 39, 0.12);
  padding: max(5px, calc(4cqw - 35px)) 0;
  container-type: inline-size;
}

.fixed-apply.is-hidden {
  display: none;
}

.apply-panel-fixed {
  margin: 0 calc(2cqw + 20px);
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  gap: 8px;
}

.fixed-form-row {
  display: grid;
  grid-template-columns: minmax(0, 70%) 30%;
  align-items: stretch;
  position: relative;
}

.apply-panel-fixed .field-row {
  grid-template-columns: 21.33cqw minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  border-radius: 0.8cqw;
  box-shadow: 0 1px 16px rgba(17, 24, 39, 0.08);
  overflow: hidden;
  padding: 0 1.33cqw;
}

.apply-panel-fixed .city-field {
  min-height: 13.33cqw;
  border-bottom: 0;
  border-right: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr) 16px;
  position: relative;
}

.apply-panel-fixed .city-field::after {
  content: "";
  position: absolute;
  top: calc(50% - 20px);
  right: -10px;
  width: 1px;
  height: 40px;
  background: #e1e1e1;
}

.apply-panel-fixed .city-field strong {
  margin-left: 3.33cqw;
  font-size: 3.73cqw;
}

.apply-panel-fixed .phone-field {
  min-height: 13.33cqw;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
}

.apply-panel-fixed .submit {
  height: 13.33cqw;
  border-radius: 0;
  font-size: 3.73cqw;
}

.apply-panel-fixed .privacy-row {
  margin: 0;
  padding-top: 2.67cqw;
  font-size: 2.93cqw;
  line-height: 1;
}

.apply-panel-fixed .field-icon {
  display: none;
}

.apply-panel-fixed .down-icon {
  display: inline-block;
  width: 3.47cqw;
  height: 2cqw;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(17, 24, 39, 0.38);
  z-index: 20;
}

.sheet {
  width: min(var(--h5-width), 100%);
  max-height: 100vh;
  overflow: auto;
  border-radius: 0;
  background: #fff;
  padding: 14px 16px 20px;
}

.city-sheet {
  display: flex;
  flex-direction: column;
  height: min(86vh, 620px);
  overflow: hidden;
  padding: 0;
}

.city-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 20px;
}

.sheet.city-sheet header {
  position: static;
  flex: 0 0 auto;
  margin: 0;
}

.sheet header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -14px -16px 14px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.sheet header button {
  border: 0;
  background: transparent;
  color: #2e75c9;
}

.sheet header span {
  width: 34px;
}

.city-current {
  margin: 8px 0 14px;
  color: #666;
  font-size: 14px;
}

.city-search {
  display: block;
  margin: 0 0 12px;
}

.city-search input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f8fa;
  color: var(--text);
  font-size: 14px;
  padding: 0 12px;
  outline: 0;
}

.city-search input:focus {
  border-color: #179ed6;
  background: #fff;
}

.city-section-title {
  margin: 12px 0 8px;
  color: #666;
  font-size: 14px;
  font-weight: 600;
}

.city-located {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff6f5;
  color: #666;
  font-size: 14px;
}

.city-located-value {
  flex: 0 0 auto;
  min-width: 72px;
  height: 32px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: #fff;
  color: var(--primary);
}

.city-located-empty {
  color: #9da4af;
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.city-hot-grid {
  margin-bottom: 4px;
}

.city-grid button {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
}

.city-grid button.active {
  border-color: var(--primary);
  background: #fff1f0;
  color: var(--primary);
  font-weight: 700;
}

.city-empty {
  grid-column: 1 / -1;
  margin: 8px 0;
  color: #9da4af;
  font-size: 14px;
  text-align: center;
}

.policy p {
  margin: 0 0 14px;
  color: #1b2b39;
  line-height: 1.75;
  text-align: justify;
}

.success-page {
  display: grid;
  width: min(var(--h5-width), 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 2cqw;
  background: #fff;
  container-type: inline-size;
}

.success-card {
  width: 100%;
  padding-top: 27.33cqw;
  text-align: center;
}

.success-image {
  width: 17.33cqw;
  height: 17.33cqw;
  object-fit: contain;
  margin: 4.67cqw 0 0;
}

.success-card h1 {
  margin: 5.07cqw 0 0;
  font-size: 4.8cqw;
  font-weight: 700;
}

.success-card p {
  margin: 2.27cqw 0 0;
  color: #666;
  font-size: 3.2cqw;
}

.back-pre {
  position: fixed;
  left: 50%;
  bottom: 20%;
  width: min(var(--h5-width), 100%);
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  color: #666;
  text-align: center;
  text-decoration: underline;
  font-size: 4cqw;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 180px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 40px);
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 14px;
  z-index: 30;
}

@media (max-width: 380px) {
  .bid {
    flex-wrap: wrap;
  }

  .bid strong {
    margin-left: 0;
  }

  .apply-panel-fixed .field-row {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}