:root {
  color-scheme: light;
  --ink: #18324a;
  --muted: #71808c;
  --soft: #f4f7fc;
  --panel: #ffffff;
  --line: #e1e7e4;
  --teal: #109b8f;
  --teal-soft: #e3f5f1;
  --green: #2b9a68;
  --amber: #c78419;
  --amber-soft: #fff1d8;
  --coral: #f45d38;
  --shadow: 0 12px 28px rgba(38, 65, 93, .09);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--soft); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
.public-app { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; padding: 0 14px 24px; }
.public-header { position: relative; display: flex; align-items: end; justify-content: space-between; min-height: 164px; margin: 0 -14px 8px; padding: 28px 23px 20px; overflow: hidden; background: linear-gradient(145deg, #d9efff 0%, #eef8ff 52%, #d8f3ed 100%); }
.public-header::before { content: ""; position: absolute; right: -22px; bottom: -20px; width: 220px; height: 122px; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(151,207,237,.68)); clip-path: polygon(0 100%, 8% 41%, 20% 49%, 29% 10%, 43% 28%, 52% 0, 65% 35%, 76% 22%, 87% 52%, 100% 38%, 100% 100%); opacity: .8; }
.public-header::after { content: ""; position: absolute; left: -32px; bottom: -55px; width: 260px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.75); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand, .hero-slogan { position: relative; z-index: 1; }
.brand-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(145deg, #ff764d, #f45736); color: #fff; font-size: 27px; box-shadow: 0 9px 18px rgba(244, 93, 56, .22); }
.brand strong { display: block; color: #0e3562; font-size: 27px; line-height: 1.05; letter-spacing: -.05em; }
.brand small { display: block; margin-top: 6px; color: #6380a0; font-size: 12px; letter-spacing: .2em; }
.hero-slogan { display: flex; flex-direction: column; align-items: start; max-width: 120px; margin-left: auto; padding: 8px 0 4px 12px; color: #315c89; font-family: "KaiTi", "STKaiti", serif; font-size: 15px; line-height: 1.35; transform: rotate(-4deg); }
.hero-slogan strong { font-size: 17px; font-weight: 700; }
.hero-slogan i { display: block; width: 102px; height: 7px; margin: 1px 0 0 8px; border-top: 2px solid #173c70; border-radius: 50%; transform: rotate(-5deg); }
.brand-context { display: none; }
.listing-hero { display: none; }
.eyebrow, .service-kicker { color: var(--teal); font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.listing-hero h1 { margin: 5px 0 3px; color: #0e3562; font-size: 22px; line-height: 1.05; letter-spacing: -.04em; }
.listing-hero p { margin: 0; color: #7189a5; font-size: 11px; line-height: 1.5; }
.listing-stats { display: none; }
.stat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-pill strong { color: var(--ink); font-size: 14px; }
.stat-pill.available strong { color: var(--green); }
.stat-pill.renovating strong { color: var(--amber); }
.listing-section { margin-top: 2px; }
.section-heading { display: none; }
.section-heading h2 { margin: 0; color: #0e3562; font-size: 16px; letter-spacing: -.02em; }
.section-heading p { margin: 3px 0 0; color: #7890ab; font-size: 10px; }
.section-count { display: none; }
.listing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.service-panel.in-grid { grid-column: 1 / -1; width: 100%; margin: 3px 0 2px; }
.listing-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e6eaf0; border-radius: 15px; background: var(--panel); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.listing-card:active { transform: scale(.985); }
.listing-card-image { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #dfe9e5; }
.listing-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.listing-card-image.no-image { display: grid; place-items: center; color: #91aaa5; }
.listing-card-image.no-image iconify-icon { font-size: 38px; }
.status-badge { position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.status-badge.available { background: var(--green); }
.status-badge.renovating { background: var(--amber); }
.status-badge i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.favorite-mark { position: absolute; top: 8px; right: 9px; display: grid; place-items: center; width: 28px; height: 28px; color: #fff; font-family: Arial, sans-serif; font-size: 29px; line-height: 1; text-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
.listing-card-body { padding: 11px 12px 13px; }
.listing-card-title { display: -webkit-box; min-height: 2.7em; overflow: hidden; color: #0e3562; font-size: 15px; font-weight: 900; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.listing-card-meta { display: flex; flex-wrap: wrap; gap: 4px 7px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.listing-card-meta span + span::before { content: "·"; margin-right: 7px; color: #afbbb9; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; min-height: 23px; margin-top: 8px; }
.tag { padding: 4px 7px; border-radius: 6px; background: #f0f5f4; color: #5f7778; font-size: 10px; line-height: 1; }
.listing-card-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 10px; }
.listing-price { color: var(--coral); font-size: 22px; font-weight: 950; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.listing-price small { margin-left: 2px; color: #9f6a60; font-size: 11px; font-weight: 800; letter-spacing: 0; }
.listing-community { overflow: hidden; color: var(--muted); font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.empty-state { display: grid; justify-items: center; padding: 28px 18px; border: 1px dashed #cadbd6; border-radius: 15px; background: rgba(255, 255, 255, .8); text-align: center; }
.empty-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--teal-soft); color: var(--teal); font-size: 29px; }
.empty-state h3 { margin: 15px 0 6px; font-size: 17px; }
.empty-state p { width: min(100%, 300px); min-width: 0; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.empty-link, .text-button { margin-top: 17px; color: var(--teal); font-size: 13px; font-weight: 900; }
.error-state { border-color: #efd2cd; background: #fff9f7; }
.error-state .empty-icon { background: #fde8e2; color: var(--coral); }
.service-panel { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 12px; min-height: 190px; margin: 18px 0 8px; padding: 22px 18px 18px; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, #fff3e7 0%, #fff8f0 55%, #ffead8 100%); box-shadow: var(--shadow); }
.service-copy { position: relative; z-index: 2; min-width: 0; }
.service-copy h2 { margin: 6px 0 5px; color: #0e3562; font-size: 24px; letter-spacing: -.04em; }
.service-copy p { margin: 0; color: #617b98; font-size: 12px; line-height: 1.5; }
.service-points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.service-points span { display: grid; grid-template-columns: 26px auto; grid-template-rows: auto auto; column-gap: 5px; color: #1a4772; font-size: 11px; font-weight: 800; }
.service-points iconify-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ff7450; color: #fff; font-size: 15px; }
.service-points span:nth-child(2) iconify-icon { background: #7eb6ed; }
.service-points span:nth-child(3) iconify-icon { background: #5bc99e; }
.service-points small { color: #7189a5; font-size: 9px; font-weight: 500; line-height: 1.35; }
.service-art { position: absolute; right: 12px; top: 0; width: 47%; height: 100%; pointer-events: none; }
.service-note { position: absolute; right: 2px; top: 18px; color: #8a5b41; font-family: "KaiTi", "STKaiti", serif; font-size: 13px; line-height: 1.4; transform: rotate(-8deg); }
.service-cloud { position: absolute; border-radius: 50%; background: rgba(255,255,255,.78); }
.cloud-one { right: 54px; top: 47px; width: 42px; height: 16px; }
.cloud-two { right: 16px; top: 57px; width: 62px; height: 20px; }
.service-house { position: absolute; right: 14px; bottom: 21px; width: 80px; height: 54px; border-radius: 5px 5px 2px 2px; background: #ffe9c7; box-shadow: inset 0 -12px 0 rgba(242,158,102,.16); }
.service-house::before { content: ""; position: absolute; left: -12px; top: -27px; width: 86px; height: 58px; border-radius: 8px 8px 0 0; background: #f87842; clip-path: polygon(50% 0, 100% 48%, 91% 57%, 50% 23%, 10% 57%, 0 48%); }
.service-house i { position: absolute; left: 31px; bottom: 0; width: 18px; height: 28px; border-radius: 8px 8px 0 0; background: #f49363; }
.service-cta, .button-primary { border: 0; border-radius: 999px; background: var(--coral); color: #fff; font-weight: 900; }
.service-cta { position: relative; z-index: 3; flex: none; padding: 13px 17px; font-size: 12px; white-space: nowrap; }
.service-cta span { margin-left: 4px; font-size: 18px; vertical-align: -1px; }
.public-footer { padding: 20px 3px 8px; color: #8a9896; font-size: 11px; text-align: center; }

.detail-view { padding-bottom: 24px; }
.back-button { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 13px; padding: 7px 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 800; }
.back-button iconify-icon { transform: scaleX(-1); }
.detail-gallery-wrap { min-width: 0; }
.detail-gallery { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px; background: #dfe9e5; box-shadow: var(--shadow); }
.detail-gallery > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-gallery.no-image { display: grid; place-items: center; color: #91aaa5; font-size: 46px; }
.detail-gallery .status-badge { top: 13px; left: 13px; font-size: 12px; }
.detail-gallery-count { position: absolute; right: 12px; bottom: 12px; padding: 5px 8px; border-radius: 999px; background: rgba(24, 50, 74, .75); color: #fff; font-size: 11px; font-weight: 800; }
.gallery-arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; padding: 0 0 3px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; background: rgba(24, 50, 74, .58); color: #fff; font-family: Arial, sans-serif; font-size: 29px; line-height: 1; transform: translateY(-50%); }
.gallery-arrow:active { background: rgba(24, 50, 74, .82); }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-thumbs { display: flex; gap: 7px; padding: 8px 1px 0; overflow-x: auto; scrollbar-width: none; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb { flex: 0 0 56px; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #dfe9e5; }
.gallery-thumb.active { border-color: var(--coral); }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-body { padding: 17px 2px 0; }
.detail-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.detail-title { margin: 0; font-size: 25px; line-height: 1.25; letter-spacing: -.04em; }
.detail-price { flex: none; color: var(--coral); text-align: right; white-space: nowrap; }
.detail-price strong { font-size: 26px; letter-spacing: -.04em; }
.detail-price small { font-size: 11px; font-weight: 800; }
.detail-community { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.detail-availability { display: inline-flex; margin: 12px 0 0; padding: 6px 9px; border-radius: 7px; background: var(--teal-soft); color: #317a75; font-size: 11px; font-weight: 800; }
.detail-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-info-item { min-width: 0; }
.detail-info-item + .detail-info-item { padding-left: 8px; border-left: 1px solid var(--line); }
.detail-info-item span { display: block; color: var(--muted); font-size: 10px; }
.detail-info-item strong { display: block; overflow: hidden; margin-top: 5px; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.detail-section { padding: 15px 0; border-bottom: 1px solid var(--line); }
.detail-section h2 { margin: 0 0 10px; font-size: 17px; }
.detail-description { margin: 0; color: #586d79; font-size: 13px; line-height: 1.8; white-space: pre-line; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-tags .tag { padding: 7px 9px; background: var(--teal-soft); color: #317a75; font-size: 11px; }
.community-card { padding: 14px; border-radius: 14px; background: #f0f5f3; }
.community-card strong { display: block; font-size: 16px; }
.community-card p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.detail-cta { display: flex; gap: 9px; margin-top: 18px; }
.detail-cta button { flex: 1; min-height: 47px; border-radius: 12px; font-size: 14px; font-weight: 900; }
.detail-cta .button-secondary { border: 1px solid #c9dcda; background: #fff; color: var(--teal); }
.detail-cta .button-primary { background: var(--coral); }

.inquiry-dialog { width: min(420px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 18px; background: var(--panel); box-shadow: 0 24px 70px rgba(25, 45, 54, .25); color: var(--ink); }
.inquiry-dialog::backdrop { background: rgba(21, 38, 44, .42); }
.inquiry-dialog form { padding: 22px 20px 18px; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.dialog-heading h2 { margin: 6px 0 0; font-size: 20px; }
.dialog-close { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: #f7faf9; color: var(--muted); font-size: 21px; line-height: 1; }
.inquiry-context { margin: 13px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.inquiry-dialog label { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 800; }
.inquiry-dialog input { display: block; width: 100%; height: 44px; margin-top: 7px; padding: 0 12px; border: 1px solid #cddfdc; border-radius: 9px; outline: 0; color: var(--ink); }
.inquiry-dialog input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(15, 143, 135, .12); }
.form-status { min-height: 18px; margin: 11px 0 0; color: var(--coral); font-size: 12px; }
.dialog-actions { display: flex; gap: 9px; margin-top: 6px; }
.dialog-actions button { flex: 1; min-height: 42px; border-radius: 10px; font-size: 13px; font-weight: 900; }
.button-secondary { border: 1px solid #c9dcda; background: #fff; color: var(--teal); }
.dialog-actions .button-primary { background: var(--teal); }

@media (min-width: 600px) {
  .public-app { padding-right: 22px; padding-left: 22px; }
  .public-header { padding-top: 28px; }
  .listing-grid { gap: 16px; }
  .listing-card-body { padding: 14px 14px 16px; }
  .listing-card-title { font-size: 16px; }
  .listing-price { font-size: 24px; }
}
@media (max-width: 390px) {
  .public-app { padding-right: 11px; padding-left: 11px; }
  .brand-context { display: none; }
  .service-cta { width: 100%; }
  .detail-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .detail-info-item:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 599px) {
  .public-app { width: 100%; max-width: 390px; }
  .service-panel { align-items: stretch; flex-direction: column; min-height: 228px; }
  .service-copy { padding-right: 42%; }
  .service-art { top: 6px; right: 3px; width: 43%; height: 132px; }
  .service-cta { width: 100%; }
}