:root {
	--lhc-page-max: 1320px;
	--lhc-page-wide: min(90vw, var(--lhc-page-max));
	--lhc-page-wide-tablet: calc(100vw - 48px);
	--lhc-page-wide-mobile: calc(100vw - 28px);
	/* Canonical brand action color: every solid-fill pill button/link across
	   the site (nav CTA, filter "Filter" buttons, card "View details", active
	   filter chips, etc.) must reference these three tokens instead of
	   hardcoding a hex value or radius. Change the color/shape once, here,
	   and it propagates everywhere — that is the whole point of this block. */
	--lhc-brand-blue: #1687F8;
	--lhc-brand-blue-deep: #075fd8;
	--lhc-brand-action: var(--lhc-brand-blue);
	--lhc-brand-action-hover: #0f6fd6;
	--lhc-brand-pill-radius: 999px;
	/* Canonical typography scale — same reasoning as the color tokens above:
	   every page title, section heading, body copy, and small/eyebrow label
	   across the whole site (homepage, guides, listings, service pages, new
	   pages built later) should reference these instead of picking its own
	   font stack or clamp() size. Change the scale once, here. */
	--lhc-type-body-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
	--lhc-type-display-family: Georgia, "Times New Roman", "NSimSun", "新宋体", SimSun, "宋体", serif;
	--lhc-type-h1-size: clamp(36px, 3.3vw, 52px);
	--lhc-type-h1-line-height: 1.1;
	--lhc-type-h2-size: clamp(24px, 2.1vw, 30px);
	--lhc-type-h2-line-height: 1.25;
	--lhc-type-h3-size: 20px;
	--lhc-type-h3-line-height: 1.3;
	--lhc-type-body-size: 16px;
	--lhc-type-small-size: 13px;
	--lhc-type-eyebrow-size: 12px;
	--lhc-brand-violet: #7c3aed;
	--lhc-brand-coral: #ff6b8a;
	--lhc-brand-orange: #ff9f1c;
	--lhc-brand-mint: #26bfa0;
	--lhc-brand-mint-deep: #087c69;
	--lhc-ink: #102033;
	--lhc-ink-strong: #08182c;
	--lhc-muted: #5c6b7a;
	--lhc-surface: #ffffff;
	--lhc-surface-soft: #f6f9ff;
	--lhc-bg-gradient: linear-gradient(135deg, #eef5ff 0%, #f7f1ff 52%, #fff3f7 100%);
	--lhc-accent-gradient: linear-gradient(135deg, #0b7cff 0%, #7c3aed 56%, #ff6b8a 100%);
	--lhc-heading-gradient: linear-gradient(90deg, #08182c 0%, #075fd8 46%, #7c3aed 100%);
}
.lhc-design-system,
.lhc-submit-form-wrap,
.lhc-listing-display,
.lhc-listing-detail,
.lhc-resource-library,
.lhc-document-translation,
.lhc-resume-builder,
.lhc-internal-search {
	--lhc-color-text: #17212b;
	--lhc-color-muted: #5f6b76;
	--lhc-color-border: #d8e0e7;
	--lhc-color-surface: #ffffff;
	--lhc-color-soft: #f5f8fa;
	--lhc-color-primary: #146c94;
	--lhc-color-primary-dark: #0f4f6f;
	--lhc-color-accent: #2f8f83;
	--lhc-color-warning: #b7791f;
	--lhc-color-warning-bg: #fff8e6;
	--lhc-color-error: #b42318;
	--lhc-radius-sm: 6px;
	--lhc-radius-md: 8px;
	--lhc-radius-lg: 12px;
	--lhc-shadow-soft: 0 10px 30px rgba(23, 33, 43, 0.08);
	--lhc-space-xs: 6px;
	--lhc-space-sm: 10px;
	--lhc-space-md: 16px;
	--lhc-space-lg: 24px;
	--lhc-space-xl: 36px;
	color: var(--lhc-color-text);
}
.lhc-submit-form-wrap {
	box-sizing: border-box;
	max-width: 880px;
	margin: 0 auto;
}

.lhc-submit-form-wrap *,
.lhc-submit-form-wrap *::before,
.lhc-submit-form-wrap *::after {
	box-sizing: border-box;
}

.lhc-submit-form-note,
.lhc-submit-field .description,
.lhc-translation-field .description {
	color: #50575e;
	font-size: 14px;
}

.lhc-submit-message {
	margin: 16px 0;
	padding: 12px 14px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #f6f7f7;
}

.lhc-submit-message.is-success {
	border-color: #00a32a;
	background: #f0fff4;
}

.lhc-submit-message.is-error {
	border-color: #d63638;
	background: #fff5f5;
}

/* Final "submission received" panel shown after a completed post — kept
   on-brand (rounded card, brand tokens) instead of a bare WP-notice box,
   since this replaces the whole page and previously dropped out of the
   site's visual style right at the moment a submitter most needs
   reassurance that it worked. */
.lhc-submit-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 12px 0 32px;
	padding: 44px 32px;
	border: 1px solid rgba(8, 124, 105, 0.18);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(38, 191, 160, 0.08), rgba(38, 191, 160, 0.02));
	text-align: center;
}

.lhc-submit-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 4px;
	border-radius: 50%;
	background: var(--lhc-brand-mint-deep, #087c69);
	color: #fff;
	font-size: 24px;
	font-weight: 800;
}

.lhc-submit-success strong {
	color: var(--lhc-ink-strong, #08182c);
	font-family: var(--lhc-type-display-family);
	font-size: 22px;
	font-weight: 800;
}

.lhc-submit-success p {
	max-width: 480px;
	margin: 0;
	color: var(--lhc-muted, #5c6b7a);
	font-size: 15px;
	line-height: 1.6;
}

.lhc-submit-success__action {
	margin-top: 10px;
	min-height: 42px;
	padding: 10px 26px;
	border: 1px solid var(--lhc-brand-blue, #1687F8);
	border-radius: 999px;
	background: var(--lhc-brand-blue, #1687F8);
	box-shadow: none;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}

.lhc-submit-success__action:hover {
	border-color: var(--lhc-brand-blue-deep, #075fd8);
	background: var(--lhc-brand-blue-deep, #075fd8);
	color: #fff;
}

/* The Housing submit page normally lays .lhc-product-layout__main out in
   a two-column grid alongside a "before you publish" sidebar aside. The
   success panel has no aside, so pin it to a single, centered column
   instead of leaving an empty second track beside it. */
body.lhc-inner-page-shell .lhc-submit-form-wrap.is-success[data-lhc-submit-type="housing"] .lhc-product-layout--submit {
	display: block;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap.is-success[data-lhc-submit-type="housing"] .lhc-product-layout__main {
	max-width: 640px;
	margin: 0 auto;
}

.lhc-submit-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.lhc-submit-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lhc-submit-field--full {
	grid-column: 1 / -1;
}

.lhc-submit-field label {
	font-weight: 600;
}

.lhc-submit-field input,
.lhc-submit-field select,
.lhc-submit-field textarea,
.lhc-listing-filters input,
.lhc-listing-filters select,
.lhc-resource-filters select,
.lhc-search-form input,
.lhc-search-form select,
.lhc-translation-field select,
.lhc-translation-field textarea,
.lhc-resume-field input,
.lhc-resume-field select,
.lhc-resume-field textarea {
	width: 100%;
	max-width: 100%;
	min-height: 42px;
	padding: 9px 10px;
	border: 1px solid #8c8f94;
	border-radius: 6px;
	background: #fff;
	font: inherit;
}

.lhc-submit-field textarea,
.lhc-translation-field textarea,
.lhc-resume-field textarea {
	min-height: 120px;
	resize: vertical;
}

/* v1.0.194: short "verification code sent" feedback, rendered right under
   the "发送验证码" button (see render_contact_row()) instead of the old
   full-width banner at the top of the page. Shared, un-scoped rule so it
   looks the same on every listing type (Housing/Roommates/Secondhand all
   share this send button). */
.lhc-submit-code-feedback {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #3a6b3f;
}

.lhc-submit-actions,
.lhc-search-actions,
.lhc-translation-actions,
.lhc-resume-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.lhc-submit-actions .button,
.lhc-listing-display .button,
.lhc-listing-detail .button,
.lhc-resource-library .button,
.lhc-internal-search .button,
.lhc-translation-actions .button,
.lhc-resume-actions .button,
.lhc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 14px;
	border-radius: var(--lhc-radius-sm, 6px);
	font-weight: 700;
	text-decoration: none;
}

.lhc-button--primary {
	border: 1px solid var(--lhc-color-primary, #146c94);
	background: var(--lhc-color-primary, #146c94);
	color: #fff;
}

.lhc-button--secondary {
	border: 1px solid var(--lhc-color-border, #d8e0e7);
	background: var(--lhc-color-surface, #fff);
	color: var(--lhc-color-primary-dark, #0f4f6f);
}

.lhc-button--disabled {
	cursor: default;
	opacity: 0.7;
}

.lhc-listing-display,
.lhc-listing-detail,
.lhc-resource-library,
.lhc-document-translation,
.lhc-resume-builder,
.lhc-internal-search,
.lhc-home {
	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
}

.lhc-listing-display *,
.lhc-listing-display *::before,
.lhc-listing-display *::after,
.lhc-listing-detail *,
.lhc-listing-detail *::before,
.lhc-listing-detail *::after,
.lhc-resource-library *,
.lhc-resource-library *::before,
.lhc-resource-library *::after,
.lhc-document-translation *,
.lhc-document-translation *::before,
.lhc-document-translation *::after,
.lhc-resume-builder *,
.lhc-resume-builder *::before,
.lhc-resume-builder *::after,
.lhc-internal-search *,
.lhc-internal-search *::before,
.lhc-internal-search *::after,
.lhc-home *,
.lhc-home *::before,
.lhc-home *::after {
	box-sizing: border-box;
}

.lhc-listing-filters,
.lhc-resource-filters,
.lhc-search-form,
.lhc-translation-grid,
.lhc-resume-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	align-items: end;
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: #f6f7f7;
}

.lhc-listing-filters label,
.lhc-resource-filters label,
.lhc-search-field,
.lhc-translation-field,
.lhc-resume-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 600;
}

.lhc-search-field--wide,
.lhc-translation-field--full,
.lhc-resume-field--full {
	grid-column: 1 / -1;
}

.lhc-listing-grid,
.lhc-resource-grid,
.lhc-search-result-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.lhc-listing-card,
.lhc-resource-card,
.lhc-search-result-card,
.lhc-home-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: #fff;
}

.lhc-listing-card__image {
	display: block;
	aspect-ratio: 4 / 3;
	background: #f0f0f1;
	text-decoration: none;
}

.lhc-listing-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lhc-listing-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	width: 100%;
	height: 100%;
	background: #f0f0f1;
	color: #50575e;
	font-weight: 600;
}

.lhc-listing-card__body,
.lhc-resource-card,
.lhc-search-result-card,
.lhc-home-card {
	gap: 12px;
	padding: 16px;
}

.lhc-listing-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.lhc-listing-card h3,
.lhc-listing-detail h2,
.lhc-resource-card h3,
.lhc-search-section h3,
.lhc-search-result-card h4,
.lhc-home h1,
.lhc-home h2,
.lhc-home h3,
.lhc-translation-result h3,
.lhc-resume-preview h3 {
	margin: 0;
}

.lhc-listing-card p,
.lhc-listing-detail p,
.lhc-contact-protection p,
.lhc-resource-card p,
.lhc-search-result-card p,
.lhc-home p,
.lhc-document-translation p,
.lhc-resume-builder p {
	margin: 0;
}

.lhc-listing-badges,
.lhc-resource-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.lhc-listing-badges span,
.lhc-resource-card__badges span,
.lhc-home-card__badge,
.lhc-search-result-card__badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #edf2f7;
	color: #1d2327;
	font-size: 12px;
	font-weight: 600;
}

.lhc-listing-facts,
.lhc-resource-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lhc-listing-facts--detail {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 20px 0;
}

.lhc-listing-facts li,
.lhc-resource-facts li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f1;
}

.lhc-listing-facts span,
.lhc-resource-facts span,
.lhc-search-result-card__meta,
.lhc-home-card__missing {
	color: #646970;
}

.lhc-listing-detail-link,
.lhc-search-result-card .button,
.lhc-home-card .lhc-button {
	align-self: flex-start;
	margin-top: auto;
}

/* v1.0.250：几处提交类表单此前完全没有提交成功提示，或只有下面这组更大
   （16px 正文字号）的常驻提示框——站长明确要求新提示的字体不能做得太大，
   要跟已经上线的"预约咨询" toast（content-pages.css 里的
   .lhc-contact-form__toast）保持一致的观感，所以这里单独抽出一个共享的
   小号 pill 提示，而不是复用下面这组更大的 .lhc-notice。举报房源、资讯
   投稿按钮下方、线下汇款订单/凭证上传，几处新提示都用这一份样式 +
   assets/js/lhc-toast.js 的淡出逻辑，避免同一类提示在不同表单上长得不
   一样。 */
.lhc-toast {
	margin: 12px 0 0;
	padding: 9px 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	background: #e4f8ef;
	color: #0f6e56;
	font-size: 13.5px;
	font-weight: 650;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.lhc-toast--hide {
	opacity: 0;
}

/* v1.0.250：求租/求购提醒订阅表单改成留在原页面内提示后新增的失败态——
   沿用站内已有的红色提示配色（.lhc-listing-notice.is-error 等用的是同一
   组 #d63638 / #fff5f5），字号跟成功态一样保持 13.5px，不做更大的强调。 */
.lhc-toast--error {
	background: #fff5f5;
	color: #b42318;
}

.lhc-listing-empty,
.lhc-listing-notice,
.lhc-safety-notice,
.lhc-resource-empty,
.lhc-resource-notice,
.lhc-resource-warning,
.lhc-search-empty,
.lhc-notice,
.lhc-translation-note,
.lhc-translation-privacy,
.lhc-translation-disclaimer,
.lhc-translation-result,
.lhc-resume-notice,
.lhc-resume-privacy,
.lhc-resume-disclaimer,
.lhc-resume-result,
.lhc-resume-pdf-notice {
	margin: 16px 0;
	padding: 14px 16px;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: #fff;
}

.lhc-listing-notice.is-error,
.lhc-resource-notice.is-error,
.lhc-translation-result.is-error,
.lhc-resume-result.is-error {
	border-color: #d63638;
	background: #fff5f5;
}

.lhc-translation-result.is-success,
.lhc-resume-result.is-success {
	border-color: #00a32a;
	background: #f0fff4;
}

.lhc-safety-notice,
.lhc-resource-warning,
.lhc-translation-disclaimer,
.lhc-resume-disclaimer,
.lhc-resume-pdf-notice,
.lhc-notice--warning {
	border-color: #dba617;
	background: #fff8e5;
}

/* "仅供信息展示" and its body copy had no font-size of their own — same gap
   as the contact-protection box above, just missed in that pass because
   it's a <strong>/<p> pair rather than an <h3>/<p> pair. Same tokens,
   same fix. */
.lhc-safety-notice strong {
	font-weight: 700;
	display: block;
	margin-bottom: 4px;
	color: var(--lhc-color-warning, #b7791f);
	font-size: var(--lhc-type-h3-size, 20px);
}

.lhc-safety-notice p {
	margin: 0;
	font-size: var(--lhc-type-body-size, 16px);
}

.lhc-translation-result,
.lhc-translation-output,
.lhc-resume-result,
.lhc-resume-preview,
.lhc-resume-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lhc-translation-output {
	padding: 12px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
}

.lhc-resume-preview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.lhc-resume-preview {
	padding: 18px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: #fff;
}

.lhc-resume-preview__eyebrow,
.lhc-resume-preview__meta,
.lhc-resume-preview__notice,
.lhc-resume-result__notice {
	color: #50575e;
	font-size: 14px;
}

.lhc-resume-section {
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f1;
}

.lhc-resume-section h4 {
	font-weight: 700;
	margin: 0;
	font-size: 16px;
}

/* The "受保护的联系方式" heading, its intro copy, and the "联系方法" fact
   row were removed from this box entirely (see render_contact_box()) --
   it now shows nothing but the reveal button, the revealed value, or the
   unavailable notice, and per explicit follow-up feedback it no longer
   wears its own card chrome either (no border/background on the section
   itself) -- whatever state renders inside is plain content in the
   summary card, same as the price/facts above it. */
.lhc-contact-protection {
	margin-top: 12px;
}

.lhc-contact-protection > p {
	color: var(--lhc-muted, #5c6b7a);
	font-size: var(--lhc-type-body-size, 16px);
}

/* Revealed contact detail previously stacked a bold label above a
   separate paragraph, each inside its own bordered box -- sitting right
   under the (now-removed) heading's own box, that read as two nested
   frames stacked on top of each other. Collapsed to a single line
   (label + value side by side) inside just one thin box, sized to that
   one line instead of two stacked ones. */
.lhc-protected-contact-value {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
}

.lhc-protected-contact-value__label {
	flex: none;
	color: var(--lhc-muted, #5c6b7a);
	font-size: var(--lhc-type-small-size, 13px);
	white-space: nowrap;
}

.lhc-protected-contact-value strong {
	font-weight: 700;
	font-size: var(--lhc-type-body-size, 16px);
}

/* "查看联系方式" no longer sits inside its own bordered box (see the
   section-level comment above) -- just the pill button by itself,
   aligned to the right of the summary card to balance visually against
   the price/facts above it instead of stretching flush left. */
.lhc-contact-reveal-form {
	display: flex;
	justify-content: flex-end;
	margin-top: 0;
}

/* "查看联系方式" is the same kind of primary action as the card-level
   "查看详情" button, so it uses the same canonical pill tokens (see the
   :root comment above) instead of the plain 6px form-button radius it
   was inheriting, with no color of its own until the housing-page
   override bolted on an unrelated gradient. One consistent look on
   every page, not just Housing. */
.lhc-contact-protection .button {
	border-color: transparent;
	border-radius: var(--lhc-brand-pill-radius, 999px);
	background: var(--lhc-brand-action, var(--lhc-brand-blue, #1687F8));
	color: #fff;
}

.lhc-contact-protection .button:hover {
	background: var(--lhc-brand-action-hover, #0f6fd6);
	color: #fff;
}

/* "发送验证邮件" (the listing-alert subscribe form's submit button) never had
   its own styling, so it fell back to the browser/theme's plain
   rectangular button instead of the site's canonical pill shape used by
   every other primary action button (see the .lhc-contact-protection
   .button comment above). Give it the same treatment. */
.lhc-alert-form button.button {
	border-color: transparent;
	border-radius: var(--lhc-brand-pill-radius, 999px);
	background: var(--lhc-brand-action, var(--lhc-brand-blue, #1687F8));
	color: #fff;
	font-weight: 700;
}

.lhc-alert-form button.button:hover {
	background: var(--lhc-brand-action-hover, #0f6fd6);
	color: #fff;
}

.lhc-listing-detail {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* v1.0.200：详情页图片区域改成"一次只显示一张 + 左右切换"的轮播。
   最多允许上传 6 张图（Life_Hub_Submit_Forms::MAX_IMAGES），如果照以前
   "有几张图排几列"的网格思路，2 张、3 张、6 张排出来的区域高度、每张图
   的裁切比例都完全不一样，图片一多设计就被撑爆，也没法跟旁边的信息
   卡片保持统一、好看的比例。轮播从根上解决这个问题：不管上传几张，
   外层这个框永远是同一个固定比例（16:10），行为、观感跟图片数量完全
   无关。 */
.lhc-detail-carousel {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	overflow: hidden;
	background: #f0f0f1;
}

.lhc-detail-carousel__track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.25s ease;
}

.lhc-detail-carousel__slide {
	flex: 0 0 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
}

.lhc-detail-carousel__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lhc-detail-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	border: none;
	border-radius: 999px;
	background: rgba(20, 24, 33, 0.45);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.lhc-detail-carousel__nav:hover,
.lhc-detail-carousel__nav:focus-visible {
	background: rgba(20, 24, 33, 0.68);
}

.lhc-detail-carousel__nav--prev {
	left: 10px;
}

.lhc-detail-carousel__nav--next {
	right: 10px;
}

.lhc-detail-carousel__counter {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 1;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(20, 24, 33, 0.55);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.lhc-resource-card__title-en {
	color: #50575e;
	font-size: 14px;
}

.lhc-resource-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.lhc-home {
	display: flex;
	flex-direction: column;
	gap: var(--lhc-space-xl, 36px);
	padding: var(--lhc-space-lg, 24px) var(--lhc-space-md, 16px);
}

.lhc-home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
	gap: var(--lhc-space-lg, 24px);
	align-items: stretch;
	padding: clamp(24px, 5vw, 56px);
	border: 1px solid var(--lhc-color-border, #d8e0e7);
	border-radius: var(--lhc-radius-lg, 12px);
	background: linear-gradient(135deg, #eef8fb 0%, #ffffff 60%, #f6fbf7 100%);
}

.lhc-home-hero__content,
.lhc-home-hero__panel,
.lhc-home-section,
.lhc-home-card,
.lhc-search-section {
	display: flex;
	flex-direction: column;
	gap: var(--lhc-space-md, 16px);
}

.lhc-home-eyebrow {
	color: var(--lhc-color-primary-dark, #0f4f6f);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.lhc-home-hero h1 {
	font-weight: 700;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: 0;
}

.lhc-home-hero p,
.lhc-home-section__header p {
	max-width: 680px;
	color: var(--lhc-color-muted, #5f6b76);
	font-size: 16px;
}

.lhc-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lhc-space-sm, 10px);
}

.lhc-home-hero__panel {
	justify-content: center;
	padding: var(--lhc-space-lg, 24px);
	border: 1px solid var(--lhc-color-border, #d8e0e7);
	border-radius: var(--lhc-radius-md, 8px);
	background: rgba(255, 255, 255, 0.8);
}

.lhc-home-section__header {
	display: flex;
	flex-direction: column;
	gap: var(--lhc-space-xs, 6px);
	margin-bottom: var(--lhc-space-md, 16px);
}

.lhc-home-entry-grid,
.lhc-home-tool-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lhc-space-md, 16px);
}

.lhc-home-entry-grid--compact {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lhc-home-card {
	min-height: 220px;
	box-shadow: var(--lhc-shadow-soft, 0 10px 30px rgba(23, 33, 43, 0.08));
}

.lhc-home-card--disabled {
	background: var(--lhc-color-soft, #f5f8fa);
}

.lhc-home-embedded-search .lhc-internal-search {
	max-width: none;
}

.lhc-home-safety {
	margin: 0;
}

.lhc-floating-help {
	position: fixed;
	right: 18px;
	bottom: 96px;
	z-index: 9998;
	box-sizing: border-box;
	font: inherit;
}

/* Desktop/mouse only: tuck the launcher mostly off the right edge when idle,
   so it doesn't sit as a second floating bubble next to any third-party
   widget (live chat, etc.) that also anchors to a screen corner. It slides
   fully into view on hover/focus, and always stays fully visible once
   actually opened. Touch devices skip this (no reliable hover) and just
   keep the safer default position set above. */
@media (hover: hover) and (pointer: fine) {
	.lhc-floating-help__button {
		transform: translateX(calc(100% - 30px));
		opacity: 0.62;
		transition: transform 0.22s ease, opacity 0.22s ease, background-color 0.18s ease, box-shadow 0.18s ease;
	}

	.lhc-floating-help:hover .lhc-floating-help__button,
	.lhc-floating-help:focus-within .lhc-floating-help__button,
	.lhc-floating-help__button:focus-visible,
	.lhc-floating-help__button[aria-expanded="true"] {
		transform: translateX(0);
		opacity: 1;
	}
}

.lhc-floating-help *,
.lhc-floating-help *::before,
.lhc-floating-help *::after {
	box-sizing: border-box;
}

.lhc-floating-help__button,
.lhc-floating-help__item,
.lhc-floating-help__close,
.lhc-floating-help__wechat-close {
	font: inherit;
}

.lhc-floating-help__button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 10px 16px 10px 13px;
	border: 0;
	border-radius: 999px;
	background: rgba(20, 108, 148, 0.62);
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 24px rgba(23, 33, 43, 0.16);
	color: #fff;
	font-size: 14px;
	font-weight: 650;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.lhc-floating-help__button-icon {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	opacity: 0.95;
}

.lhc-floating-help__button:hover,
.lhc-floating-help__button:focus-visible,
.lhc-floating-help__button[aria-expanded="true"] {
	background: #146c94;
	box-shadow: 0 14px 30px rgba(23, 33, 43, 0.24);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.lhc-floating-help__button {
		transition: none;
	}
}

.lhc-floating-help__button:focus-visible,
.lhc-floating-help__item:focus-visible,
.lhc-floating-help__close:focus-visible,
.lhc-floating-help__wechat-close:focus-visible {
	outline: 3px solid #94d2f0;
	outline-offset: 2px;
}

.lhc-floating-help__panel {
	position: absolute;
	right: 0;
	bottom: 62px;
	width: min(320px, calc(100vw - 32px));
	max-height: min(76vh, 620px);
	overflow: auto;
	padding: 14px;
	border: 1px solid #d8e0e7;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(23, 33, 43, 0.18);
	color: #17212b;
}

.lhc-floating-help__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.lhc-floating-help__header strong {
	font-size: 16px;
	font-weight: 750;
}

.lhc-floating-help__close,
.lhc-floating-help__wechat-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #d8e0e7;
	border-radius: 999px;
	background: #fff;
	color: #17212b;
	cursor: pointer;
}

.lhc-floating-help__notice {
	margin: 0 0 12px;
	color: #5f6b76;
	font-size: 13px;
	line-height: 1.45;
}

.lhc-floating-help__menu {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.lhc-floating-help__menu-label {
	margin: 6px 0 -2px;
	padding-top: 10px;
	border-top: 1px dashed #e1e8ef;
	color: #8a97a6;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lhc-floating-help__more {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #edf2f7;
}

.lhc-floating-help__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 42px;
	padding: 10px 12px;
	border: 1px solid #d8e0e7;
	border-radius: 8px;
	background: #fff;
	color: #0f4f6f;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.lhc-floating-help__item:hover,
.lhc-floating-help__item:focus {
	border-color: #146c94;
	background: #eef8fb;
	color: #0f4f6f;
	text-decoration: none;
}

.lhc-floating-help__item--report {
	border-color: #d8e0e7;
	background: #fff;
	color: #0f4f6f;
}

.lhc-floating-help__wechat {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(23, 33, 43, 0.42);
	z-index: 9999;
}

.lhc-floating-help__wechat[hidden] {
	display: none !important;
}

.lhc-floating-help__wechat-card {
	position: relative;
	width: min(300px, 100%);
	padding: 18px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(23, 33, 43, 0.24);
	text-align: center;
}

.lhc-floating-help__wechat-close {
	position: absolute;
	top: 8px;
	right: 8px;
}

.lhc-floating-help__wechat-qr {
	display: block;
	max-width: 220px;
	height: auto;
	margin: 18px auto 12px;
	border-radius: 8px;
}

.lhc-floating-help__wechat-card p {
	margin: 0;
	color: #5f6b76;
	font-size: 13px;
	line-height: 1.45;
}

.lhc-participation-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}

.lhc-participation-actions__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 14px;
	border: 1px solid #146c94;
	border-radius: 6px;
	background: #fff;
	color: #0f4f6f;
	font-weight: 700;
	text-decoration: none;
}

.lhc-participation-actions__link:hover {
	background: #eef8fb;
	color: #0f4f6f;
}

.lhc-participation-actions__link:focus-visible,
.lhc-submit-form :is(input, select, textarea, button):focus-visible {
	outline: 3px solid #146c94;
	outline-offset: 2px;
}
@media (max-width: 900px) {
	.lhc-listing-grid,
	.lhc-listing-filters,
	.lhc-resource-grid,
	.lhc-resource-filters,
	.lhc-search-form,
	.lhc-search-result-list,
	.lhc-translation-grid,
	.lhc-resume-grid,
	.lhc-resume-preview-grid,
	.lhc-home-hero,
	.lhc-home-entry-grid,
	.lhc-home-tool-grid,
	.lhc-home-entry-grid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.lhc-participation-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.lhc-participation-actions__link {
		width: 100%;
	}
	.lhc-submit-grid,
	.lhc-listing-grid,
	.lhc-listing-filters,
	.lhc-listing-facts--detail,
	.lhc-resource-grid,
	.lhc-resource-filters,
	.lhc-search-form,
	.lhc-search-result-list,
	.lhc-translation-grid,
	.lhc-resume-grid,
	.lhc-resume-preview-grid,
	.lhc-home-hero,
	.lhc-home-entry-grid,
	.lhc-home-tool-grid,
	.lhc-home-entry-grid--compact {
		grid-template-columns: 1fr;
	}

	.lhc-home {
		padding: var(--lhc-space-md, 16px) var(--lhc-space-sm, 10px);
	}

	.lhc-home-hero {
		padding: var(--lhc-space-lg, 24px);
	}

	.lhc-home-hero h1 {
	font-weight: 700;
		font-size: 34px;
	}

	.lhc-home-hero__actions,
	.lhc-search-actions {
		flex-direction: column;
	}

	.lhc-submit-actions .button,
	.lhc-listing-filters .button,
	.lhc-contact-reveal-form .button,
	.lhc-resource-filters .button,
	.lhc-resource-actions .button,
	.lhc-internal-search .button,
	.lhc-search-actions .button,
	.lhc-translation-actions .button,
	.lhc-resume-actions .button,
	.lhc-button {
		width: 100%;
	}

	.lhc-floating-help {
		right: 12px;
		bottom: 88px;
	}

	.lhc-floating-help__button {
		min-height: 44px;
		padding: 9px 14px 9px 12px;
	}

	.lhc-floating-help__panel {
		right: 0;
		bottom: 56px;
		width: calc(100vw - 24px);
		max-height: 72vh;
	}
}

/* Housing listing visual layout. Scoped to listing display/detail only.
   Neither of these ever pinned its own font-family, so every element
   inside (title, price, contact box, fact rows...) was just inheriting
   whatever the active WP theme happens to set on <body> -- normally
   invisible, since the Latin part of that inherited stack happens to
   read the same as the plugin's own canonical --lhc-type-body-family
   token. But neither of them lists a Chinese fallback (PingFang SC /
   Microsoft YaHei) the way the plugin's own token does, so the *Chinese*
   glyphs specifically can end up resolving to a different actual
   typeface than they do elsewhere on the site (where something already
   references --lhc-type-body-family directly), even though the
   declared font-family looks identical for the Latin characters. Pin it
   explicitly here so every listing card and detail page (housing,
   flatmate, secondhand -- they all render through this one shared
   template) gets the same, deliberate font stack instead of an
   ambient/coincidental one. */
.lhc-listing-display,
.lhc-listing-detail {
	max-width: 1180px;
	padding: 24px;
	border: 1px solid #e6e1d8;
	border-radius: 14px;
	background: #f7f4ee;
	font-family: var(--lhc-type-body-family);
}

.lhc-listing-display {
	margin-top: 24px;
}

.lhc-participation-actions {
	margin-bottom: 14px;
}

.lhc-listing-filters {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 22px;
	padding: 16px;
	border: 1px solid #e4e9f5;
	border-radius: 14px;
	background: #f7f9fd;
	box-shadow: 0 2px 10px rgba(18, 32, 63, 0.04);
}

/* v1.0.201：这颗筛选栏的 label（学校/地区/房型/最低价格...）以前是
   12px + font-weight:700（加粗），跟房源/找室友/资源筛选那几处各自的
   专属规则一样，都比正常文字明显粗一圈。统一改成不加粗的 600（跟本
   文件里其它表单 label 的通用基准一致），字号也跟着房源/找室友/资源
   筛选那几处已经在用的 13px 对齐，全站筛选栏的 label 现在是同一套
   字号和字重。
   v1.0.219：用户在找室友页反馈 600 实际看着还是偏粗，要求改细；这次
   把范围扩大到全站所有筛选栏（这条基础规则覆盖求租/二手等没有专属
   覆盖规则的页面），统一改成 400（正常字重，不加粗）。 */
.lhc-listing-filters label {
	gap: 4px;
	color: #33415c;
	font-size: 13px;
	font-weight: 400;
}

.lhc-listing-filters input,
.lhc-listing-filters select {
	min-height: 44px;
	border-color: #d7deef;
	border-radius: 8px;
	background: #fff;
	color: #12203f;
}

.lhc-listing-filters input:focus,
.lhc-listing-filters select:focus {
	outline: none;
	border-color: #2f5bff;
	box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.15);
}

/* v1.0.184：全站胶囊按钮专项筛查——"筛选"这颗提交按钮此前一直没写
   font-size，跟旁边 .lhc-listing-category-rail 分类筛选 chip（13px）、
   .lhc-chip 徽标（11px）比，字号直接继承页面正文默认字号，加上
   min-height:44px、padding:8px 22px 这套偏大的尺寸，整颗按钮明显比周围
   的筛选 chip 粗一圈。这里收到跟"查看详情"卡片按钮（v1.0.183 定的参照
   尺寸：14px / 38px 最小高度）一致的紧凑规格，房源、找室友两个页面各自
   的加强层同步收紧（见下方对应位置），求租、二手两个类型本来就没有专属
   加强层，直接沿用这条改过的基础规则。 */
.lhc-listing-filters .button {
	display: inline-flex;
	align-self: end;
	justify-self: start;
	width: auto;
	min-width: 0;
	min-height: 38px;
	padding: 7px 20px;
	border: 1px solid var(--lhc-brand-blue);
	border-radius: 999px;
	background: var(--lhc-brand-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	transition: background 140ms ease, box-shadow 140ms ease;
}

.lhc-listing-filters .button:hover {
	background: var(--lhc-brand-action-hover);
	box-shadow: 0 6px 16px rgba(22, 135, 248, 0.28);
}

.lhc-listing-filters .button:focus,
.lhc-listing-detail-link:focus,
.lhc-listing-category-rail a:focus,
.lhc-roommates-post__action:focus,
.lhc-secondhand-post__action:focus {
	outline: none;
}

.lhc-listing-filters .button:focus-visible,
.lhc-listing-detail-link:focus-visible,
.lhc-listing-category-rail a:focus-visible,
.lhc-roommates-post__action:focus-visible,
.lhc-secondhand-post__action:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(22, 135, 248, 0.3);
}

/* Category quick-filter rail (secondhand-style browse). */
.lhc-secondhand-page__header {
	margin: 0 0 18px;
}

.lhc-secondhand-page__header h1 {
	margin: 0 0 6px;
	color: #12203f;
	font-family: var(--lhc-type-display-family);
	font-size: var(--lhc-type-h2-size);
	font-weight: 700;
	line-height: var(--lhc-type-h2-line-height);
}

/* v1.0.202：标题下面的说明句已经从 PHP 里删掉了（.lhc-secondhand-page__header
   不再渲染 <p>），这条规则跟着删掉，避免留死代码。 */

.lhc-listing-category-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.lhc-listing-category-rail a {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid #e4e9f5;
	border-radius: 999px;
	background: #fff;
	color: #33415c;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.lhc-listing-category-rail a:hover {
	border-color: #a9d2ff;
	color: var(--lhc-brand-blue);
}

.lhc-listing-category-rail a.is-active {
	border-color: var(--lhc-brand-blue);
	background: var(--lhc-brand-blue);
	color: #fff;
}

.lhc-listing-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.lhc-listing-card {
	min-height: 100%;
	border-color: #e4e9f5;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(18, 32, 63, 0.05);
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.lhc-listing-card:hover {
	border-color: #b7c6ff;
	box-shadow: 0 12px 28px rgba(18, 32, 63, 0.12);
	transform: translateY(-3px);
}

.lhc-listing-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #eef2fb;
	overflow: hidden;
}

.lhc-listing-image-placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	background: linear-gradient(160deg, #eef2fb, #f7f9fd);
	color: #7b88a8;
}

.lhc-listing-image-placeholder__mark {
	width: 44px;
	height: auto;
	opacity: 0.55;
}

.lhc-listing-image-placeholder span {
	font-size: 12px;
	font-weight: 600;
}

.lhc-listing-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc(100% - 20px);
}

.lhc-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(18, 32, 63, 0.78);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	backdrop-filter: blur(2px);
}

.lhc-chip--category {
	background: rgba(47, 91, 255, 0.88);
}

.lhc-chip--condition {
	background: rgba(31, 169, 113, 0.88);
}

.lhc-chip--featured {
	background: rgba(216, 137, 0, 0.9);
}

.lhc-chip--video {
	background: rgba(18, 32, 63, 0.78);
}

.lhc-listing-card__reviewed {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #1fa971;
	font-size: 11px;
	font-weight: 700;
}

.lhc-listing-card__reviewed::before {
	content: '\2713';
}

/* 价格此前是叠在封面图片左下角的深色徽标（position:absolute），会挡住一部分
   照片，实际生效还依赖前端 JS（user-listing-tools.js）把它从图片里搬出来，
   一旦 JS 没跑起来（存储不可用等情况）价格就会一直卡在图片上。现在价格
   直接在服务端 markup 里就渲染在图片下方卡片主体的顶部一行、和"找室友"这
   类标签同一行、靠右对齐（见 .lhc-listing-card__top-row），不再叠在图片上，
   也不再依赖 JS 搬运。字重同时从 800 降到 600，不再是"加粗"的观感。 */
.lhc-listing-card__top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.lhc-listing-card__price {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	color: #12203f;
	font-size: 16px;
	font-weight: 600;
}

.lhc-listing-card__price em {
	color: #6b7690;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
}

.lhc-listing-card__body {
	gap: 10px;
	padding: 16px;
}

.lhc-listing-card .lhc-listing-badges span {
	background: #eef2fb;
	color: #2f5bff;
}

/* v1.0.234：用户反馈卡片标题（"测试房源，请勿联系"这一行）字号再缩小
   一档、且不要加粗——17px/700 改成 15px/400。housing 页面下面还有一条
   更具体的 body.lhc-housing-page 选择器把 font-weight 又压回 700（当初
   是为了跟其它类型的卡片标题统一成同一档默认粗细，见那条规则上的
   注释），这次一并改成不加粗，两处保持一致。 */
.lhc-listing-card h3 {
	font-weight: 400;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: #12203f;
	font-size: 15px;
	line-height: 1.35;
}

/* v1.0.182：这条摘要段落此前一直没写 font-size，走的是设计系统里
   --lhc-type-body-size（16px）这个全站正文默认字号——跟旁边 13px 的信息
   行、17px 的卡片标题放在一起，摘要几乎和标题一样大，缺少该有的大小
   层级，看上去偏大。这里单独给卡片摘要收一档到 14px（跟"住房"类型卡片
   已经在用的摘要字号一致），不影响全站正文默认字号本身。 */
.lhc-listing-card__body > p {
	display: -webkit-box;
	overflow: hidden;
	min-height: 3.9em;
	color: #5b6785;
	font-size: 14px;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.lhc-listing-facts {
	gap: 0;
}

.lhc-listing-card .lhc-listing-facts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
}

.lhc-listing-facts li {
	align-items: baseline;
	padding: 6px 0;
	border-bottom-color: #eef1f9;
	color: #5b6785;
	font-size: 13px;
}

.lhc-listing-facts li strong {
	color: #12203f;
	text-align: right;
}

/* v1.0.182："查看详情"按钮此前一直没有按胶囊显示——根源是这条规则只写了
   单个 class（.lhc-listing-detail-link，优先级 0-1-0），而卡片这颗按钮
   同时还命中了文件更前面的通用按钮规则 .lhc-listing-display .button
   （两个 class 组合，优先级 0-2-0：border-radius 定的是 6px 的小圆角矩形）。
   CSS 优先级比较的是选择器本身的组合，跟两条规则谁写在文件更后面无关，
   0-2-0 天然高于 0-1-0，所以就算这条胶囊规则写在文件更靠后，border-radius
   也一直被前面那条 6px 的通用规则压制，按钮从来没有真正显示成胶囊。
   （同一份文件里 .lhc-listing-filters .button 那颗"筛选"按钮能正常显示成
   胶囊，就是因为它本来就写成了两个 class 的组合选择器，优先级同样是
   0-2-0，能和通用规则打平、再靠写在文件更后面险胜——查看详情按钮当初
   少了这一步。）这里改成同样的写法，用 .lhc-listing-card 限定一层，
   优先级同样提到 0-2-0，跟"筛选"按钮用的是完全一致的写法。

   v1.0.183：圆角改对之后，用户反馈按钮文字还是偏大、胶囊跟着显得偏大——
   查下来这条规则本身没写 font-size/padding/min-height，这几项全部继承
   自更前面那条通用按钮规则（min-height:42px、padding:8px 14px，文字大小
   则再往上继承页面正文默认字号），按钮整体偏大、偏粗。这里补上明确的
   小号数值，跟房源/找室友页面各自专属加强层里已经在用的"查看详情"按钮
   尺寸（min-height:38px、padding:7px 16px、font-size:14px）对齐，字缩小
   之后胶囊本身也跟着收窄，不再依赖上层通用按钮的大尺寸。 */
.lhc-listing-card .lhc-listing-detail-link {
	min-height: 38px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--lhc-brand-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.lhc-listing-detail-link:hover {
	background: var(--lhc-brand-action-hover);
}

.lhc-listing-detail {
	margin-top: 24px;
}

.lhc-listing-back-link {
	display: inline-flex;
	margin-bottom: 18px;
	color: #2f5bff;
	font-weight: 700;
	text-decoration: none;
}

.lhc-listing-detail__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
	gap: 24px;
	align-items: start;
}

.lhc-listing-detail__images {
	min-width: 0;
}

.lhc-listing-detail__images > .lhc-listing-image-placeholder {
	aspect-ratio: 16 / 10;
	border-radius: 16px;
}

/* v1.0.199 曾经在这里让左侧图片区域"裁图撑满去匹配右侧卡片高度"，
   结果卡片内容多少不同（比如房源 6 项信息 vs 二手 2 项信息），算出来的
   高度不稳定，把图片挤成不好看的比例。v1.0.200 改用轮播（见上面
   .lhc-detail-carousel 的说明）从根上解决：图片区域永远是固定的
   16:10 比例，完全不依赖右侧卡片的高度，也就不需要再靠"撑高对齐"这种
   容易变形的办法了，这里不再需要桌面端专属的对齐规则。 */

.lhc-listing-detail__summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
	border: 1px solid #e4e9f5;
	border-radius: 16px;
	background: #fff;
}

.lhc-listing-detail__summary .lhc-listing-badges span {
	background: #eef2fb;
	color: #2f5bff;
}

/* v1.0.236：用户上一轮反馈"测试房源，请勿联系"这行标题要缩小一号、不
   加粗时，我只改了卡片网格（.lhc-listing-card h3）那处，没有连带改这里
   ——详情页自己的标题一直是同一段文字放大后的版本，用户测试详情页时
   发现这里还是原来的大小/粗细，明确要求一起改。这里不再跟随卡片
   标题的字号联动（注释里"match the grid card's title size"的初衷仍然
   保留：详情页标题就是要跟卡片标题看起来一致），直接把两处都下调一号、
   去掉加粗，保持两边一致。 */
.lhc-listing-detail__summary h2 {
	font-weight: 400;
	color: #12203f;
	font-size: 15px;
	line-height: 1.35;
}

.lhc-listing-price {
	margin: 0;
	color: #12203f;
	/* Was a flat 30px/800 (page-H1 scale), then 22px -- both still read
	   as oversized/dominating next to the 17px title above it and the
	   13-16px fact rows in this compact summary card. Keep it a little
	   larger than the title (it's still the headline number) but not by
	   much, so it complements the card instead of overpowering it. */
	font-size: 18px;
	font-weight: 700;
}

.lhc-listing-facts--detail {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	margin: 0;
}

.lhc-listing-detail__content {
	margin-top: 24px;
	padding: 22px;
	border: 1px solid #e4e9f5;
	border-radius: 16px;
	background: #fff;
	line-height: 1.7;
	/* This box renders a listing's own free-text description (wpautop'd
	   post_content), and unlike every other piece of text on this page it
	   never had a font-size of its own -- so it fell back to the theme's
	   own default paragraph size, which on this site's block theme is
	   noticeably larger than the compact type scale the rest of the
	   listing-detail page uses. That's why it kept reading as oversized
	   through every earlier round that only touched the title/price/
	   contact-heading (all of which DID already have this token). Pin it
	   explicitly, and pin the child <p> too since a more specific theme
	   rule on the bare "p" element would otherwise win over inheriting
	   this from the container. */
	font-size: var(--lhc-type-body-size, 16px);
}

.lhc-listing-detail__content p {
	font-size: var(--lhc-type-body-size, 16px);
}

.lhc-listing-detail > .lhc-safety-notice {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-color: #f3dfa8;
	background: #fff9eb;
}

.lhc-listing-empty {
	margin: 0;
	padding: 56px 24px;
	border: 1px dashed #d7deef;
	border-radius: 16px;
	background: #f7f9fd;
	text-align: center;
}

.lhc-listing-empty::before {
	display: block;
	margin: 0 auto 14px;
	width: 40px;
	height: 40px;
	background: url('../images/home-logo-v.png') center / contain no-repeat;
	opacity: 0.5;
	content: '';
}

.lhc-listing-empty h2 {
	font-weight: 800;
	margin: 0 0 8px;
	color: #12203f;
	font-size: 20px;
}

.lhc-listing-empty p {
	max-width: 46ch;
	margin-inline: auto;
	color: #5b6785;
	font-size: 15px;
	line-height: 1.65;
}

@media (max-width: 1080px) {
	.lhc-listing-filters {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.lhc-listing-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.lhc-listing-display,
	.lhc-listing-detail {
		padding: 16px;
		border-radius: 10px;
	}
	.lhc-listing-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lhc-listing-detail__hero {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.lhc-listing-filters,
	.lhc-listing-grid,
	.lhc-listing-card .lhc-listing-facts,
	.lhc-listing-facts--detail {
		grid-template-columns: 1fr;
	}
	.lhc-listing-filters .button {
		width: 100%;
	}
	.lhc-listing-detail__summary,
	.lhc-listing-detail__content {
		padding: 16px;
	}
}

/* Housing-only block-theme container breakout. */
body.lhc-housing-page :where(.wp-site-blocks, main, .site-main, .content-area, .entry-content, .wp-block-post-content, .wp-block-shortcode, .is-layout-constrained, .alignwide, .alignfull) { max-width: none !important; }
body.lhc-housing-page :where(main, .site-main, .content-area) { width: 100% !important; }
body.lhc-housing-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode), body.lhc-housing-page :where(.wp-block-post-title, .entry-title, .page-title) { width: min(90vw, 1320px) !important; max-width: 1320px !important; margin-inline: auto !important; }
body.lhc-housing-page .lhc-listing-display, body.lhc-housing-page .lhc-listing-detail { width: 100% !important; max-width: none !important; margin-inline: 0 !important; }
body.lhc-housing-page .lhc-listing-grid { grid-template-columns: repeat(3, minmax(280px, 1fr)); justify-content: start; }
body.lhc-housing-page .lhc-listing-card { max-width: 420px; }
@media (max-width: 1100px) { body.lhc-housing-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode), body.lhc-housing-page :where(.wp-block-post-title, .entry-title, .page-title) { width: calc(100vw - 48px) !important; } body.lhc-housing-page .lhc-listing-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 480px) { body.lhc-housing-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode), body.lhc-housing-page :where(.wp-block-post-title, .entry-title, .page-title) { width: calc(100vw - 28px) !important; } body.lhc-housing-page .lhc-listing-grid { grid-template-columns: 1fr; } body.lhc-housing-page .lhc-listing-card { max-width: none; } }

/* Marketplace pages (housing, roommate, secondhand) share the same wide, un-boxed layout. */
/* WordPress block themes constrain "is-layout-constrained" content through these
   custom properties, not just a max-width on the wrapper itself — override them
   directly so every nested constrained child (post title, entry content, inner
   groups) widens consistently, regardless of the exact selector the theme used. */
body.lhc-marketplace-page {
	--wp--style--global--content-size: 1320px;
	--wp--style--global--wide-size: 1320px;
}
body.lhc-marketplace-page :where(.wp-site-blocks, main, .site-main, .content-area, .entry-content, .wp-block-post-content, .wp-block-shortcode, .is-layout-constrained, .alignwide, .alignfull, .wp-block-group) { max-width: none !important; }
body.lhc-marketplace-page :where(main, .site-main, .content-area) { width: 100% !important; }
body.lhc-marketplace-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode) { width: min(90vw, 1320px) !important; max-width: 1320px !important; margin-inline: auto !important; }
body.lhc-marketplace-page .lhc-listing-display, body.lhc-marketplace-page .lhc-listing-detail { width: 100% !important; max-width: none !important; margin-inline: 0 !important; }
body.lhc-marketplace-page .lhc-listing-grid { grid-template-columns: repeat(3, minmax(280px, 1fr)); justify-content: start; }
body.lhc-marketplace-page .lhc-listing-card { max-width: 420px; }
/* The shortcode already renders its own bilingual heading (housing/roommate/secondhand
   header blocks), so the theme's separate WP page-title block would just duplicate it —
   hide that block only on these pages. */
body.lhc-marketplace-page :where(.wp-block-post-title, .entry-title, .page-title) { display: none !important; }
@media (max-width: 1100px) {
	body.lhc-marketplace-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode) { width: calc(100vw - 48px) !important; }
	body.lhc-marketplace-page .lhc-listing-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 480px) {
	body.lhc-marketplace-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode) { width: calc(100vw - 28px) !important; }
	body.lhc-marketplace-page .lhc-listing-grid { grid-template-columns: 1fr; }
	body.lhc-marketplace-page .lhc-listing-card { max-width: none; }
}

/* TASKS/014 Housing brand visual pilot. Visual-only and Housing scoped. */
body.lhc-housing-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode),
body.lhc-housing-page :where(.wp-block-post-title, .entry-title, .page-title) {
	width: var(--lhc-page-wide) !important;
	max-width: var(--lhc-page-max) !important;
}

body.lhc-housing-page :where(main, .site-main, .content-area) {
	background: var(--lhc-bg-gradient);
}

body.lhc-housing-page .lhc-listing-display,
body.lhc-housing-page .lhc-listing-detail {
	border-color: rgba(11, 124, 255, 0.16);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 18px 42px rgba(39, 66, 117, 0.1);
	color: var(--lhc-ink);
}

body.lhc-housing-page .lhc-participation-actions__link,
body.lhc-housing-page .lhc-listing-filters .button {
	border-color: transparent;
	background: var(--lhc-accent-gradient);
	box-shadow: 0 8px 18px rgba(64, 89, 192, 0.2);
	color: #fff;
}

body.lhc-housing-page .lhc-participation-actions__link:hover,
body.lhc-housing-page .lhc-listing-filters .button:hover {
	filter: saturate(1.08) brightness(0.98);
	color: #fff;
}

/* "查看联系方式" now uses the same flat brand-blue pill everywhere (see
   the base .lhc-contact-protection .button rule) instead of picking up
   the gradient/6px treatment meant for filter and nav-CTA buttons — that
   mismatch was the reported "background color and shape aren't unified". */
body.lhc-housing-page .lhc-contact-protection .button {
	box-shadow: 0 8px 18px rgba(22, 135, 248, 0.22);
}

body.lhc-housing-page .lhc-listing-filters {
	border-color: rgba(11, 124, 255, 0.18);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 10px 26px rgba(39, 66, 117, 0.1);
}

body.lhc-housing-page .lhc-listing-filters input,
body.lhc-housing-page .lhc-listing-filters select {
	border-color: rgba(16, 32, 51, 0.18);
	border-radius: 6px;
	background: #fff;
	color: var(--lhc-ink);
}

body.lhc-housing-page .lhc-listing-filters :is(input, select, .button):focus-visible,
body.lhc-housing-page .lhc-participation-actions__link:focus-visible,
body.lhc-housing-page .lhc-contact-protection .button:focus-visible {
	outline: 3px solid rgba(11, 124, 255, 0.32);
	outline-offset: 2px;
}

body.lhc-housing-page .lhc-listing-card,
body.lhc-housing-page .lhc-listing-detail__summary,
body.lhc-housing-page .lhc-listing-detail__content,
body.lhc-housing-page .lhc-listing-empty {
	border-color: rgba(11, 124, 255, 0.14);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 10px 24px rgba(39, 66, 117, 0.08);
}

body.lhc-housing-page .lhc-listing-card:hover {
	border-color: rgba(124, 58, 237, 0.38);
	box-shadow: 0 16px 30px rgba(64, 89, 192, 0.14);
}

body.lhc-housing-page .lhc-listing-image-placeholder {
	background: linear-gradient(135deg, #e8f3ff 0%, #eff8f5 52%, #f6efff 100%);
	color: var(--lhc-brand-blue-deep);
}

body.lhc-housing-page .lhc-listing-image-placeholder::before,
body.lhc-housing-page .lhc-listing-image-placeholder::after {
	border-color: currentColor;
}

body.lhc-housing-page .lhc-listing-price,
body.lhc-housing-page .lhc-listing-card .lhc-listing-facts li:nth-child(4) strong {
	color: #087c69;
}

@media (max-width: 1100px) {
	body.lhc-housing-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode),
	body.lhc-housing-page :where(.wp-block-post-title, .entry-title, .page-title) {
		width: var(--lhc-page-wide-tablet) !important;
	}
}

@media (max-width: 480px) {
	body.lhc-housing-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode),
	body.lhc-housing-page :where(.wp-block-post-title, .entry-title, .page-title) {
		width: var(--lhc-page-wide-mobile) !important;
	}
}

/* TASKS/015 Housing typography color refinement. No layout or behavior changes. */
body.lhc-housing-page :where(.wp-block-post-title, .entry-title, .page-title) {
	color: var(--lhc-ink-strong);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	body.lhc-housing-page :where(.wp-block-post-title, .entry-title, .page-title) {
		background: var(--lhc-heading-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

/* font-weight was originally 800 here -- heavier than the same title/price
   text reads on flatmate/secondhand listings (which don't carry
   body.lhc-housing-page and so never got this bump), and heavier than the
   browser's own default h2/h3 bold (700) that this whole card otherwise
   used. v1.0.234 dropped the card grid title (.lhc-listing-card h3) to
   not-bold per the user's request; v1.0.236 did the same to the detail
   page's own <h2> summary title (.lhc-listing-detail__summary h2) once the
   user pointed out it still showed bold there -- both titles for the same
   listing (card + detail) are meant to read the same size/weight, kept as
   two separate rules only because they're two different elements/pages. */
body.lhc-housing-page .lhc-listing-card h3 {
	color: var(--lhc-brand-blue-deep);
	font-weight: 400;
}

body.lhc-housing-page .lhc-listing-detail__summary h2 {
	color: var(--lhc-brand-blue-deep);
	font-weight: 400;
}

body.lhc-housing-page .lhc-listing-price,
body.lhc-housing-page .lhc-listing-card .lhc-listing-facts li:nth-child(4) strong {
	color: var(--lhc-brand-mint-deep);
}

body.lhc-housing-page :is(.lhc-participation-actions__link, .lhc-listing-filters .button, .lhc-contact-protection .button) {
	font-weight: 800;
}

/* TASK 017 曾把这里改成 16px/700，想法是让房源筛选栏更好读。但下面
   还有一条更精确的选择器（[data-lhc-listing-type="housing"] 那条，
   搜 v1.0.201 注释）专门盯着房源列表页的筛选栏，优先级更高，实际渲染
   时早就被那条规则盖掉了——这条 16px/700 一直是没生效的死代码。
   v1.0.201 把这里也改成跟其它筛选栏统一的 13px/600（不加粗），这样
   两条规则不会再互相矛盾。
   v1.0.219：这条虽然是死代码（没有实际生效），但跟着下面真正生效的
   那条规则一起同步改成 400，避免两条规则的字重数值又变得不一致。 */
body.lhc-housing-page .lhc-listing-filters label {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

body.lhc-housing-page .lhc-listing-filters :is(input, select) {
    min-height: 48px;
    font-size: 16px;
    line-height: 1.35;
}

body.lhc-housing-page .lhc-listing-filters .button {
    min-height: 48px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

/* TASK 019: unified product surface for Life Hub service pages. */
body.lhc-inner-page-shell :where(main, .site-main, .content-area) {
    background: linear-gradient(135deg, #f2f7ff 0%, #f7f3ff 50%, #f2fbf8 100%);
}

body.lhc-inner-page-shell :where(.wp-block-post-title, .entry-title, .page-title) {
    color: var(--lhc-ink-strong);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: 0;
}

body.lhc-inner-page-shell :where(.wp-block-post-content, .entry-content, .wp-block-shortcode) > :not(.lhc-home) a:not(.button) {
    color: inherit;
    text-decoration: none;
}

body.lhc-inner-page-shell .lhc-resource-library,
body.lhc-inner-page-shell .lhc-submit-form-wrap,
body.lhc-inner-page-shell .lhc-service-hub {
    max-width: none;
    margin: 0;
}

body.lhc-inner-page-shell .lhc-resource-filters,
body.lhc-inner-page-shell .lhc-submit-form,
body.lhc-inner-page-shell .lhc-service-hub {
    border: 1px solid rgba(11, 124, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 34px rgba(39, 66, 117, 0.09);
}

body.lhc-inner-page-shell .lhc-resource-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

body.lhc-inner-page-shell .lhc-resource-filters label,
body.lhc-inner-page-shell .lhc-submit-field label {
    color: var(--lhc-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

body.lhc-inner-page-shell :is(.lhc-resource-filters select, .lhc-submit-field input, .lhc-submit-field select, .lhc-submit-field textarea) {
    min-height: 48px;
    border-color: rgba(16, 32, 51, 0.18);
    border-radius: 6px;
    background: #fff;
    color: var(--lhc-ink);
    font-size: 16px;
    line-height: 1.4;
}

body.lhc-inner-page-shell .lhc-submit-field textarea {
    min-height: 138px;
}

body.lhc-inner-page-shell :is(.lhc-resource-filters .button, .lhc-submit-actions .button, .lhc-resource-actions .button) {
    min-height: 48px;
    border: 0;
    border-radius: 6px;
    background: var(--lhc-accent-gradient);
    box-shadow: 0 8px 18px rgba(64, 89, 192, 0.18);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

body.lhc-inner-page-shell :is(.lhc-resource-filters .button, .lhc-submit-actions .button, .lhc-resource-actions .button):hover {
    color: #fff;
    filter: saturate(1.06) brightness(0.98);
}

body.lhc-inner-page-shell :is(.lhc-resource-filters select, .lhc-submit-field input, .lhc-submit-field select, .lhc-submit-field textarea, .lhc-resource-filters .button, .lhc-submit-actions .button, .lhc-resource-actions .button):focus-visible {
    outline: 3px solid rgba(11, 124, 255, 0.32);
    outline-offset: 2px;
}

body.lhc-inner-page-shell .lhc-resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

body.lhc-inner-page-shell .lhc-resource-card {
    min-height: 100%;
    border-color: rgba(11, 124, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(39, 66, 117, 0.08);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.lhc-inner-page-shell .lhc-resource-card:hover {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 16px 30px rgba(64, 89, 192, 0.14);
    transform: translateY(-2px);
}

body.lhc-inner-page-shell .lhc-resource-empty {
    display: grid;
    gap: 10px;
    justify-items: start;
    padding: clamp(28px, 4vw, 48px);
    border: 1px dashed rgba(11, 124, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--lhc-muted);
    text-align: left;
}

body.lhc-inner-page-shell .lhc-resource-empty h2 {
	font-weight: 800;
    margin: 0;
    color: var(--lhc-ink-strong);
    font-size: 24px;
}

body.lhc-inner-page-shell .lhc-resource-empty p {
    max-width: 56ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap > h2 {
	font-weight: 800;
    margin: 0;
    color: var(--lhc-ink-strong);
    font-family: var(--lhc-type-display-family);
    font-size: var(--lhc-type-h2-size);
    line-height: var(--lhc-type-h2-line-height);
}

body.lhc-inner-page-shell .lhc-submit-form-note {
    max-width: 68ch;
    margin: 10px 0 24px;
    color: var(--lhc-muted);
    font-size: 16px;
    line-height: 1.7;
}

body.lhc-inner-page-shell .lhc-submit-form {
    display: grid;
    gap: 18px;
    padding: clamp(20px, 3vw, 32px);
}

body.lhc-inner-page-shell .lhc-submit-form__group {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(16, 32, 51, 0.1);
    border-radius: 8px;
    background: rgba(248, 251, 255, 0.78);
}

body.lhc-inner-page-shell .lhc-submit-form__group h3 {
	font-weight: 700;
    margin: 0;
    color: var(--lhc-ink-strong);
    font-size: 18px;
    line-height: 1.35;
}

body.lhc-inner-page-shell .lhc-submit-actions {
    margin-top: 4px;
}

body.lhc-inner-page-shell .lhc-service-hub {
    display: grid;
    gap: 28px;
    padding: clamp(24px, 4vw, 48px);
}

/* The eyebrow badge + <h2> title + intro paragraph this component used to
   render here were removed (see Life_Hub_Service_Hubs::render_hub()) --
   they duplicated the page's own title/intro, in a visibly different
   style. ".lhc-service-hub__status" is still rendered (a small "in
   preparation" pill, not a title) and keeps its badge styling below. */
body.lhc-inner-page-shell .lhc-service-hub__status,
body.lhc-inner-page-shell .lhc-service-hub__card-status {
    display: inline-flex;
    width: fit-content;
    min-height: 30px;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    border: 1px solid rgba(124, 58, 237, 0.16);
    background: #f7f2ff;
    color: #6d28d9;
}

body.lhc-inner-page-shell .lhc-service-hub__note {
    margin: 0;
    color: var(--lhc-muted);
    font-size: 16px;
    line-height: 1.7;
}

body.lhc-inner-page-shell .lhc-service-hub__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

body.lhc-inner-page-shell .lhc-service-hub__card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 188px;
    padding: 20px;
    border: 1px solid rgba(11, 124, 255, 0.14);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(39, 66, 117, 0.07);
}

body.lhc-inner-page-shell .lhc-service-hub__card h3 {
	font-weight: 700;
    margin: 0;
    color: var(--lhc-ink-strong);
    font-size: 20px;
}

body.lhc-inner-page-shell .lhc-service-hub__card p {
    margin: 0;
    color: var(--lhc-muted);
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-resource-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.lhc-inner-page-shell .lhc-resource-grid,
    body.lhc-inner-page-shell .lhc-service-hub__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.lhc-inner-page-shell .lhc-resource-filters,
    body.lhc-inner-page-shell .lhc-resource-grid,
    body.lhc-inner-page-shell .lhc-service-hub__grid {
        grid-template-columns: 1fr;
    }
    body.lhc-inner-page-shell .lhc-resource-filters,
    body.lhc-inner-page-shell .lhc-submit-form,
    body.lhc-inner-page-shell .lhc-service-hub {
        padding: 16px;
    }
    body.lhc-inner-page-shell .lhc-submit-form__group {
        padding: 14px;
    }
    body.lhc-inner-page-shell .lhc-submit-grid {
        grid-template-columns: 1fr;
    }
    body.lhc-inner-page-shell .lhc-submit-actions .button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.lhc-inner-page-shell .lhc-resource-card {
        transition: none;
    }
    body.lhc-inner-page-shell .lhc-resource-card:hover {
        transform: none;
    }
}

/* TASK 020: compact filter CTA and listing form density without changing behavior. */
body.lhc-inner-page-shell .lhc-resource-filters .button {
    justify-self: end;
    width: fit-content;
    min-width: 112px;
    padding-inline: 24px;
    border-radius: 999px;
}

body.lhc-inner-page-shell .lhc-submit-form {
    gap: 14px;
}

body.lhc-inner-page-shell .lhc-submit-form__group {
    gap: 10px;
    padding: 16px;
}

body.lhc-inner-page-shell .lhc-submit-form__group--basics .lhc-submit-field:first-child {
    grid-column: 1 / -1;
}

body.lhc-inner-page-shell .lhc-submit-form__group--location .lhc-submit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.lhc-inner-page-shell .lhc-submit-form__group--pricing .lhc-submit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.lhc-inner-page-shell .lhc-submit-form__group--contact .lhc-submit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.lhc-inner-page-shell .lhc-submit-form__group--contact .lhc-submit-field--full {
    grid-column: auto;
}

body.lhc-inner-page-shell .lhc-submit-form__group--contact textarea {
    min-height: 96px;
}

body.lhc-inner-page-shell .lhc-submit-actions {
    margin-top: 0;
    gap: 10px;
}

body.lhc-inner-page-shell .lhc-submit-actions .button {
    flex: 0 0 auto;
    min-width: 156px;
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-submit-form__group--location .lhc-submit-grid,
    body.lhc-inner-page-shell .lhc-submit-form__group--pricing .lhc-submit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.lhc-inner-page-shell .lhc-resource-filters .button {
        justify-self: stretch;
        width: 100%;
    }

    body.lhc-inner-page-shell :is(.lhc-submit-form__group--location, .lhc-submit-form__group--pricing, .lhc-submit-form__group--contact) .lhc-submit-grid {
        grid-template-columns: 1fr;
    }

    body.lhc-inner-page-shell .lhc-submit-form__group--contact .lhc-submit-field--full {
        grid-column: 1 / -1;
    }

    body.lhc-inner-page-shell .lhc-submit-actions .button {
        width: 100%;
        min-width: 0;
    }
}

/* TASK 021: Life Hub frontend product design system and two-column service pages. */
body.lhc-inner-page-shell {
    --lhc-ui-ink: #14213d;
    --lhc-ui-muted: #61708a;
    --lhc-ui-line: rgba(64, 89, 142, 0.16);
    --lhc-ui-surface: rgba(255, 255, 255, 0.94);
    --lhc-ui-soft: #f5f8ff;
    --lhc-ui-primary: #315efb;
    --lhc-ui-violet: #7357e8;
    --lhc-ui-mint: #0f9b85;
    --lhc-ui-radius: 8px;
    --lhc-ui-shadow: 0 18px 46px rgba(36, 61, 118, 0.12);
    --lhc-ui-shadow-soft: 0 10px 26px rgba(36, 61, 118, 0.08);
}

body.lhc-inner-page-shell .lhc-product-layout,
body.lhc-inner-page-shell .lhc-resource-library__top {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

body.lhc-inner-page-shell .lhc-product-layout__main,
body.lhc-inner-page-shell .lhc-resource-library__filters {
    min-width: 0;
}

body.lhc-inner-page-shell .lhc-product-page-intro {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

body.lhc-inner-page-shell .lhc-product-page-intro h2 {
    margin: 0;
    color: var(--lhc-ui-ink);
    font-family: var(--lhc-type-display-family);
    font-size: var(--lhc-type-h2-size);
    font-weight: 800;
    line-height: var(--lhc-type-h2-line-height);
}

body.lhc-inner-page-shell .lhc-product-page-intro .lhc-submit-form-note {
    margin: 0;
    color: var(--lhc-ui-muted);
    font-size: 16px;
    line-height: 1.7;
}

body.lhc-inner-page-shell .lhc-product-layout__aside {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 20px;
}

body.lhc-inner-page-shell .lhc-product-aside-card,
body.lhc-inner-page-shell .lhc-resource-spotlight {
    display: grid;
    gap: 10px;
    padding: 20px;
    border: 1px solid var(--lhc-ui-line);
    border-radius: var(--lhc-ui-radius);
    background: var(--lhc-ui-surface);
    box-shadow: var(--lhc-ui-shadow-soft);
}

body.lhc-inner-page-shell .lhc-product-aside-card--feature,
body.lhc-inner-page-shell .lhc-resource-spotlight {
    border-color: rgba(49, 94, 251, 0.2);
    background: linear-gradient(135deg, #edf3ff 0%, #f7f2ff 56%, #effcf8 100%);
}

body.lhc-inner-page-shell :is(.lhc-product-aside-card h3, .lhc-resource-spotlight h2) {
	font-weight: 800;
    margin: 0;
    color: var(--lhc-ui-ink);
    font-size: 18px;
    line-height: 1.35;
}

body.lhc-inner-page-shell :is(.lhc-product-aside-card p, .lhc-resource-spotlight p) {
    margin: 0;
    color: var(--lhc-ui-muted);
    font-size: 15px;
    line-height: 1.62;
}

body.lhc-inner-page-shell :is(.lhc-product-aside-card__eyebrow, .lhc-resource-spotlight__eyebrow, .lhc-resource-spotlight__status) {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(49, 94, 251, 0.1);
    color: var(--lhc-ui-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.3;
}

body.lhc-inner-page-shell .lhc-submit-form {
    border-color: var(--lhc-ui-line);
    border-radius: var(--lhc-ui-radius);
    background: var(--lhc-ui-surface);
    box-shadow: var(--lhc-ui-shadow);
}

body.lhc-inner-page-shell .lhc-submit-form__group {
    border-color: rgba(64, 89, 142, 0.12);
    background: var(--lhc-ui-soft);
}

body.lhc-inner-page-shell .lhc-submit-actions .button {
    min-height: 48px;
    border-radius: 999px;
    padding-inline: 22px;
    background: linear-gradient(135deg, var(--lhc-ui-primary), var(--lhc-ui-violet));
    box-shadow: 0 10px 20px rgba(49, 94, 251, 0.2);
}

body.lhc-inner-page-shell .lhc-resource-library__top {
    margin-bottom: 24px;
}

body.lhc-inner-page-shell .lhc-resource-filters {
    grid-template-columns: repeat(3, minmax(150px, 210px)) auto;
    justify-content: start;
    gap: 12px;
    margin: 0;
    padding: 18px;
    border-color: var(--lhc-ui-line);
    background: var(--lhc-ui-surface);
    box-shadow: var(--lhc-ui-shadow-soft);
}

body.lhc-inner-page-shell .lhc-resource-filters .button {
    justify-self: start;
    align-self: end;
    width: fit-content;
    min-width: 104px;
    padding-inline: 20px;
    border-radius: 999px;
}

body.lhc-inner-page-shell .lhc-resource-spotlight {
    min-height: 100%;
    align-content: start;
}

body.lhc-inner-page-shell .lhc-resource-grid {
    margin-top: 0;
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-product-layout,
    body.lhc-inner-page-shell .lhc-resource-library__top {
        grid-template-columns: 1fr;
    }

    body.lhc-inner-page-shell .lhc-product-layout__aside {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.lhc-inner-page-shell .lhc-resource-filters {
        grid-template-columns: repeat(2, minmax(150px, 1fr)) auto;
    }
}

@media (max-width: 640px) {
    body.lhc-inner-page-shell .lhc-product-layout__aside {
        grid-template-columns: 1fr;
    }

    body.lhc-inner-page-shell .lhc-product-aside-card,
    body.lhc-inner-page-shell .lhc-resource-spotlight {
        padding: 16px;
    }

    body.lhc-inner-page-shell .lhc-resource-filters {
        grid-template-columns: 1fr;
    }

    body.lhc-inner-page-shell .lhc-resource-filters .button {
        justify-self: stretch;
        width: 100%;
    }
}


/* TASK 022: focused polish for the Housing post-listing product page. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit {
  grid-template-columns: minmax(0, 860px) minmax(280px, 340px);
  justify-content: start;
  gap: clamp(24px, 3vw, 42px);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__main {
  max-width: 860px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-page-intro {
  margin-bottom: 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form-note {
  max-width: 62ch;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form {
  max-width: 860px;
  padding: 24px;
  gap: 12px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group {
  width: min(100%, 820px);
  padding: 14px;
  gap: 8px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-grid {
  align-items: start;
  gap: 12px 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--basics {
  grid-template-columns: minmax(0, 820px);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--basics textarea {
  min-height: 126px;
  max-width: 820px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location {
  grid-template-columns: repeat(3, minmax(0, 240px));
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing {
  grid-template-columns: repeat(4, minmax(140px, 180px));
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  max-width: 820px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(1) {
  grid-column: span 3;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(2) {
  grid-column: 4 / -1;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(3) {
  grid-column: span 6;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(4) {
  grid-column: 7 / span 3;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact textarea {
  min-height: 112px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
  max-width: 340px;
  gap: 14px;
  counter-reset: lhc-post-listing-tip;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-aside-card {
  position: relative;
  overflow: hidden;
  min-height: 122px;
  padding: 20px 18px 18px 62px;
  border-color: rgba(76, 103, 182, .14);
  box-shadow: 0 14px 28px rgba(41, 63, 121, .08);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-aside-card::before {
  counter-increment: lhc-post-listing-tip;
  content: "0" counter(lhc-post-listing-tip);
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #2c6ed5, #6d58d7);
  box-shadow: 0 7px 14px rgba(68, 84, 188, .22);
  font-size: 12px;
  font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-aside-card:nth-child(1) {
  background: linear-gradient(145deg, #f7faff, #f0edff);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-aside-card:nth-child(2) {
  background: linear-gradient(145deg, #f2fcff, #edfbf7);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-aside-card:nth-child(3) {
  background: linear-gradient(145deg, #f8f5ff, #f2f7ff);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-aside-card:nth-child(4) {
  background: linear-gradient(145deg, #fff9ef, #f5f8ff);
}

@media (max-width: 1100px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit {
    grid-template-columns: minmax(0, 860px);
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
    max-width: none;
  }
}

@media (max-width: 760px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form {
    padding: 18px;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(n) {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact {
    grid-template-columns: minmax(0, 1fr);
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(n) {
    grid-column: 1 / -1;
  }
}


/* TASK 023: Housing post-listing marketplace visual system. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] {
  --lhc-market-ink: #071a33;
  --lhc-market-navy: #061a33;
  --lhc-market-green: #008f5a;
  --lhc-market-green-dark: #007447;
  --lhc-market-green-soft: #eef9f3;
  --lhc-market-border: #d9e2ec;
  --lhc-market-muted: #66758a;
  max-width: 1360px;
  margin-inline: auto;
  color: var(--lhc-market-ink);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-chrome {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 22px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--lhc-market-navy);
  box-shadow: 0 12px 24px rgba(6, 26, 51, .14);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav__brand {
  flex: 0 0 auto;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav__links {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px 16px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav__links a {
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav__links a:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav__links a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav__current {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 6px;
  color: #fff;
  background: var(--lhc-market-green);
  font-size: 14px;
  font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid #dcece3;
  border-radius: 8px;
  background: var(--lhc-market-green-soft);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-trust > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-trust > div > span {
  display: grid;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--lhc-market-green);
  font-size: 12px;
  font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-trust p {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--lhc-market-muted);
  font-size: 13px;
  line-height: 1.4;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-trust strong {
	font-weight: 700;
  color: var(--lhc-market-ink);
  font-size: 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  max-width: 1360px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__main { max-width: none; }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-page-intro { margin: 0 0 12px; }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form-note {
  max-width: none;
  color: var(--lhc-market-muted);
  font-size: 15px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form {
  max-width: none;
  padding: 6px 20px 20px;
  border: 1px solid var(--lhc-market-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  gap: 0;
  counter-reset: lhc-market-section;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group {
  width: auto;
  margin: 0;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid #e7edf2;
  border-radius: 0;
  background: transparent;
  gap: 10px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--lhc-market-ink);
  font-size: 17px;
  font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group h3::before {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  counter-increment: lhc-market-section;
  content: counter(lhc-market-section);
  border-radius: 50%;
  color: #fff;
  background: var(--lhc-market-navy);
  font-size: 12px;
  font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-grid { gap: 12px 16px; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--basics { grid-template-columns: minmax(0, 1fr); }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact { grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); max-width: none; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(n) { grid-column: auto; }


body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-submit-field label, .lhc-marketplace-upload__title) { color: var(--lhc-market-ink); font-size: 14px; font-weight: 750; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-submit-field input, .lhc-submit-field select, .lhc-submit-field textarea) { min-height: 44px; border-color: #d5e0e8; border-radius: 6px; color: var(--lhc-market-ink); font-size: 15px; background: #fff; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-field textarea { min-height: 102px; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-submit-field input, .lhc-submit-field select, .lhc-submit-field textarea):focus { border-color: var(--lhc-market-green); box-shadow: 0 0 0 3px rgba(0, 143, 90, .12); }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media input[type="file"] {
  width: 100%;
  min-height: 114px;
  padding: 12px;
  border: 1px dashed #9ab7aa;
  border-radius: 8px;
  color: var(--lhc-market-muted);
  background: #fbfffc;
  cursor: pointer;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 14px;
  border: 1px solid #a8d2b9;
  border-radius: 999px;
  color: var(--lhc-market-green-dark);
  background: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media input[type="file"]:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media input[type="file"]:focus-visible {
  border-color: var(--lhc-market-green);
  background: var(--lhc-market-green-soft);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions { justify-content: flex-end; margin-top: 18px; gap: 12px; }
/* This is the most specific rule matching the housing form's submit
   button (higher specificity than the generic, unscoped
   ".lhc-submit-actions .button" rule elsewhere in this file that already
   uses the site's canonical pill radius), so it's the one that actually
   decides this button's shape -- changed from a plain 6px rounded rect
   to the shared --lhc-brand-pill-radius token to match every other
   solid-fill action button on the site (nav CTA, card "View details",
   the contact row's "发送邮箱验证码" button, etc). */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions .button { min-width: 148px; min-height: 46px; border-radius: var(--lhc-brand-pill-radius); font-size: 15px; font-weight: 800; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions .button:not(.button-primary) { color: var(--lhc-market-green-dark); border-color: #91c8aa; background: #fff; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions .button-primary { color: #fff; border-color: var(--lhc-market-green); background: var(--lhc-market-green); box-shadow: none; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions .button-primary:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions .button-primary:focus-visible { color: #fff; border-color: var(--lhc-market-green-dark); background: var(--lhc-market-green-dark); }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside { max-width: 360px; gap: 14px; counter-reset: none; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-aside-card,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview { display: grid; gap: 9px; padding: 18px; border: 1px solid var(--lhc-market-border); border-radius: 8px; background: #fff; box-shadow: none; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-aside-card--review { background: #f7fbf9; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-aside-card__eyebrow,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__eyebrow { width: fit-content; padding: 4px 8px; border-radius: 999px; color: var(--lhc-market-green-dark); background: #e6f6ed; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-marketplace-aside-card h3, .lhc-marketplace-preview h3) {
	font-weight: 700; margin: 0; color: var(--lhc-market-ink); font-size: 17px; line-height: 1.4; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-aside-card p { margin: 0; color: var(--lhc-market-muted); font-size: 14px; line-height: 1.6; }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-marketplace-review-steps, .lhc-marketplace-image-checklist) { display: grid; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps { counter-reset: lhc-market-review; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-marketplace-review-steps li, .lhc-marketplace-image-checklist li) { position: relative; min-height: 24px; padding-left: 34px; color: var(--lhc-market-muted); font-size: 13px; line-height: 1.45; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li::before { position: absolute; left: 0; display: grid; width: 22px; height: 22px; place-items: center; counter-increment: lhc-market-review; content: counter(lhc-market-review); border-radius: 50%; color: #fff; background: var(--lhc-market-navy); font-size: 11px; font-weight: 800; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-image-checklist li::before { position: absolute; left: 0; content: "+"; color: var(--lhc-market-green); font-weight: 800; }


body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview { padding: 0; overflow: hidden; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__image { position: relative; display: grid; min-height: 142px; place-items: center; background: linear-gradient(135deg, #b9d1c4, #f0e4cf 50%, #8ea99a); overflow: hidden; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__image span { display: grid; width: 52px; height: 52px; place-items: center; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; color: #fff; background: rgba(6,26,51,.62); font-size: 16px; font-weight: 800; }
/* Real listing photo swapped in by submit-preview.js once the user
   selects an image -- sits on top of (and fully covers) the placeholder
   gradient/initials above. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__image img[data-lhc-preview-photo] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__body { display: grid; gap: 8px; padding: 16px; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__body p { margin: 0; color: var(--lhc-market-muted); font-size: 13px; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__body > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--lhc-market-muted); font-size: 12px; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__body strong {
	font-weight: 700; color: var(--lhc-market-green-dark); font-size: 19px; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__body em { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: var(--lhc-market-green-dark); background: #e6f6ed; font-style: normal; font-weight: 750; }

@media (max-width: 1100px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-layout { grid-template-columns: minmax(0, 1fr); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav { align-items: flex-start; flex-wrap: wrap; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav__current { margin-left: auto; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-trust { grid-template-columns: 1fr; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav { gap: 12px; padding: 14px; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav__links { order: 3; flex-basis: 100%; gap: 7px 12px; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-nav__current { padding: 8px 10px; font-size: 13px; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form { padding: 4px 14px 16px; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact { grid-template-columns: minmax(0, 1fr); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions { justify-content: stretch; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions .button { width: 100%; }
}


body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media .lhc-submit-field > label:not(.lhc-marketplace-upload__dropzone) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__dropzone {
  display: grid;
  min-height: 132px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 16px;
  border: 1px dashed #9ab7aa;
  border-radius: 8px;
  cursor: pointer;
  background: #fbfffc;
  text-align: center;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__dropzone:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media input[type="file"]:focus-visible + .lhc-marketplace-upload__dropzone {
  border-color: var(--lhc-market-green);
  background: var(--lhc-market-green-soft);
  outline: 3px solid rgba(0, 143, 90, .12);
  outline-offset: 2px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--lhc-market-green);
  background: #dff5e9;
  font-size: 20px;
  font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__action {
  padding: 7px 13px;
  border: 1px solid #b6d8c6;
  border-radius: 999px;
  color: var(--lhc-market-green-dark);
  background: #fff;
  font-size: 13px;
  font-weight: 750;
}


/* TASK 024: compact fields and banner refinement for the Housing post form. */
body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="housing"]) :is(.wp-block-post-title, .entry-title, .page-title) { display: none; }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-chrome {
  margin-bottom: 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 8px;
  color: #fff;
  background: var(--lhc-market-navy);
  box-shadow: 0 10px 20px rgba(6, 26, 51, .12);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__intro {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__brand {
  flex: 0 0 auto;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, .2);
  color: #d6f3e5;
  font-size: 14px;
  font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner h2 {
	font-weight: 800;
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.15;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.4;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(214, 243, 229, .22);
  border-radius: 999px;
  color: #dff6e9;
  background: rgba(255, 255, 255, .07);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__trust span::before {
  content: "•";
  color: #48ca8b;
  font-size: 16px;
  line-height: .5;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__status {
  padding: 8px 11px;
  border-radius: 6px;
  color: #fff;
  background: var(--lhc-market-green);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-page-intro {
  display: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form {
  padding-top: 2px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group {
  padding: 14px 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--basics textarea {
  min-height: 52px;
  max-height: 180px;
  resize: vertical;
  line-height: 1.45;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact textarea {
  min-height: 52px;
  max-height: 104px;
  resize: vertical;
  line-height: 1.45;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing .lhc-submit-field:nth-child(6) {
  grid-column: span 2;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact {
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr) minmax(180px, 1.05fr) minmax(138px, .6fr);
  align-items: end;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(1) { grid-column: 1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(2) { grid-column: 2 / -1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(3) { grid-column: 1 / span 2; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(4) { grid-column: 3; }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action {
  display: flex;
  align-items: end;
  min-height: 44px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action .button {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-color: #91c8aa;
  border-radius: 6px;
  color: var(--lhc-market-green-dark);
  background: #fff;
  font-size: 14px;
  font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action .button:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action .button:focus-visible {
  border-color: var(--lhc-market-green);
  background: var(--lhc-market-green-soft);
}

/* "Sending…" (instant, on click) and the post-reload resend countdown both
   disable this button via JS — give the disabled state its own visible
   treatment (works whether the button carries the housing page's green
   outline above or a page's plain default button styling) instead of
   leaving it looking clickable while it's actually locked. */
.lhc-submit-code-send:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__dropzone {
  min-height: 94px;
  padding: 12px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions {
  margin-top: 14px;
}


@media (max-width: 1100px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__trust {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 13px 14px;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__trust {
    grid-column: auto;
    justify-content: flex-start;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__status {
    justify-self: start;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing .lhc-submit-field:nth-child(6) {
    grid-column: span 2;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(n),
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__intro {
    align-items: flex-start;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner__brand {
    padding-right: 8px;
    font-size: 12px;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-marketplace-banner h2 {
	font-weight: 800;
    font-size: 21px;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact {
    grid-template-columns: minmax(0, 1fr);
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing .lhc-submit-field:nth-child(6) {
    grid-column: auto;
  }

  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action {
    grid-column: 1 / -1;
  }
}

/* TASK 025: Housing post-listing header banner and inner-grid repair. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  max-width: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-product-layout__main, .lhc-submit-form) {
  width: 100%;
  max-width: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  width: 100%;
  max-width: none;
  column-gap: 20px;
  align-items: start;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > h3 {
  grid-column: 1;
  min-width: 0;
  writing-mode: horizontal-tb;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > .lhc-submit-grid {
  display: grid;
  grid-column: 2;
  width: 100%;
  min-width: 0;
  align-items: start;
  gap: 12px 16px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--basics > .lhc-submit-grid,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media > .lhc-submit-grid {
  grid-template-columns: minmax(0, 1fr);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location > .lhc-submit-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing > .lhc-submit-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing > .lhc-submit-grid .lhc-submit-field:nth-child(6) {
  grid-column: span 2;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid {
  grid-template-columns: minmax(170px, .8fr) minmax(260px, 1.5fr) minmax(190px, 1fr) minmax(140px, .7fr);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(1) { grid-column: 1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(2) { grid-column: 2 / -1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(3) { grid-column: 1 / span 2; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(4) { grid-column: 3; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action { grid-column: 4; min-width: 140px; }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-field { min-width: 0; width: 100%; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-field label { display: block; min-width: 0; writing-mode: horizontal-tb; text-orientation: mixed; white-space: normal; line-height: 1.35; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-field :is(input, select, textarea) { width: 100%; min-width: 0; box-sizing: border-box; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact textarea { height: 44px; min-height: 44px; max-height: 44px; resize: none; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action .button { min-width: 140px; white-space: nowrap; }

@media (max-width: 1100px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group { grid-template-columns: minmax(0, 1fr); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > :is(h3, .lhc-submit-grid) { grid-column: 1; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location > .lhc-submit-grid,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing > .lhc-submit-grid,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing > .lhc-submit-grid .lhc-submit-field:nth-child(6) { grid-column: span 2; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(n),
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action { grid-column: auto; }
}

@media (max-width: 560px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location > .lhc-submit-grid,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing > .lhc-submit-grid,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid { grid-template-columns: minmax(0, 1fr); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing > .lhc-submit-grid .lhc-submit-field:nth-child(6),
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action { grid-column: 1 / -1; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action .button { width: 100%; }
}

/* TASK 026: light Housing post-listing flow and overflow-safe form grids. */
body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="housing"]) :is(.wp-block-post-title, .entry-title, .page-title) {
  display: block;
  margin-block: 18px 6px !important;
}

body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="housing"]) .wp-site-blocks > main#wp--skip-link--target > .wp-block-group.alignfull:first-child {
  padding-top: 20px !important;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-page-intro {
  display: block;
  margin: 0 0 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: #52706a;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-flow::before {
  width: 7px;
  height: 7px;
  align-self: center;
  content: "";
  border-radius: 50%;
  background: var(--lhc-market-green);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  align-items: start;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-product-layout__main, .lhc-submit-form, .lhc-submit-form__group, .lhc-submit-form__group > .lhc-submit-grid, .lhc-submit-field) {
  min-width: 0;
  max-width: 100%;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid {
  grid-template-columns: minmax(180px, .8fr) minmax(200px, 1fr) minmax(140px, .7fr);
  overflow: hidden;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(1) { grid-column: 1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(2) { grid-column: 2 / -1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(3) { grid-column: 1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(4) { grid-column: 2; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action { grid-column: 3; min-width: 0; }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact :is(input, select, textarea),
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action .button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action .button {
  padding-inline: 12px;
  white-space: nowrap;
}

@media (max-width: 1500px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-flow { font-size: 13px; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(n),
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action { grid-column: auto; }
}

@media (max-width: 560px) {
  body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="housing"]) :is(.wp-block-post-title, .entry-title, .page-title) { margin-block: 14px 5px !important; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid { grid-template-columns: minmax(0, 1fr); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action { grid-column: 1 / -1; }
}

/* TASK 027: restore stable desktop columns and a restrained post-listing title. */
body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="housing"]) :is(.wp-block-post-title, .entry-title, .page-title) {
  font-size: clamp(28px, 2.5vw, 34px) !important;
  font-weight: 800;
  line-height: 1.18;
  margin-block: 16px 6px !important;
}

body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="housing"]) :is(.wp-block-post-title, .entry-title, .page-title) + .wp-block-paragraph,
body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="housing"]) :where(.wp-block-post-content, .entry-content) > .wp-block-paragraph:first-child {
  display: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px);
  gap: 28px;
  align-items: start;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-product-layout__main, .lhc-product-layout__aside, .lhc-submit-form, .lhc-submit-form__group, .lhc-submit-form__group > .lhc-submit-grid, .lhc-submit-field) {
  min-width: 0;
  max-width: 100%;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__main {
  width: 100%;
  max-width: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
  width: 100%;
  max-width: 360px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 10px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > :is(h3, .lhc-submit-grid) {
  grid-column: 1;
  min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > .lhc-submit-grid {
  width: 100%;
  min-width: 0;
  gap: 16px 18px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location > .lhc-submit-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing > .lhc-submit-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid {
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.25fr) minmax(140px, .65fr);
  overflow: visible;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(1) { grid-column: 1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(2) { grid-column: 2 / -1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(3) { grid-column: 1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(4) { grid-column: 2; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action { grid-column: 3; min-width: 0; }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-field :is(input, select, textarea),
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action .button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit { grid-template-columns: minmax(0, 1fr); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside { max-width: none; }
}

@media (max-width: 760px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location > .lhc-submit-grid,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing > .lhc-submit-grid,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(n),
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action { grid-column: auto; }
}

@media (max-width: 560px) {
  body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="housing"]) :is(.wp-block-post-title, .entry-title, .page-title) { font-size: clamp(26px, 7vw, 30px) !important; }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--location > .lhc-submit-grid,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--pricing > .lhc-submit-grid,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid { grid-template-columns: minmax(0, 1fr); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-action { grid-column: 1 / -1; }
}

/* TASK 028: verification row, aside alignment, and native upload activation. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid {
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.75fr);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(1) { grid-column: 1; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(2) { grid-column: 2; }
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-field:nth-child(3) { grid-column: 1; }

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row {
  display: grid;
  grid-column: 2;
  grid-template-columns: minmax(180px, 1fr) 152px;
  min-width: 0;
  gap: 12px;
  align-items: end;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-field,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action {
  min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row :is(input, .button) {
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action {
  display: flex;
  align-items: end;
  min-width: 152px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(.lhc-product-layout--submit, .lhc-product-layout__aside) {
  align-items: start;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
  align-self: start;
  margin-top: 0;
  padding-top: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-aside-card:first-child {
  margin-top: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload {
  position: relative;
  min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip: auto;
  cursor: pointer;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__dropzone {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row { grid-template-columns: minmax(0, 1fr); }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action { min-width: 0; }
}

/* TASK 029: compact title-flow row and proportional Housing contact controls. */
body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="housing"]) :is(.wp-block-post-title, .entry-title, .page-title) {
  display: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-page-intro {
  margin: 0 0 12px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-title-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-page-title {
  margin: 0;
  color: var(--lhc-market-ink);
  font-family: var(--lhc-type-display-family);
  font-size: clamp(28px, 2.25vw, 34px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-title-row .lhc-submit-flow {
  flex: 0 1 auto;
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit {
  grid-template-columns: minmax(0, 1fr) clamp(280px, 21vw, 320px);
}

/* Contact section: the standalone "Contact method" dropdown was removed
   (redundant per user request), and every remaining control -- phone
   country/area code, the free-text "code not listed" override, the
   protected contact detail, email, and email verification code + send
   button -- is now rendered as ONE single-row flex layout instead of a
   positional grid (see render_contact_row() in
   class-life-hub-submit-forms.php). .lhc-submit-contact-row is a brand
   new class name that none of this stylesheet's older, nth-child-keyed
   rules for this section target, so it fully owns its own layout below
   without needing to touch (or fight the cascade of) that older CSS. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact > .lhc-submit-grid {
  display: block;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item label {
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Height/padding here match the 48px baseline the rest of this form's
   fields use (see the .lhc-submit-contact-row height rules appended near
   the end of this file, which pin these same five controls to that exact
   baseline with !important -- needed because a block of older, unrelated
   contact-section CSS earlier in this file also matches plain
   input/select/textarea descendants of .lhc-submit-form__group--contact
   with !important height rules of its own. The values are duplicated here,
   non-!important, purely so this block reads correctly on its own without
   having to cross-reference the file's tail end.) */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item :is(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  font-size: 13px;
  box-sizing: border-box;
  /* Match the border/radius/background every other field in this form
     uses (see the .lhc-submit-field rule this row deliberately does not
     inherit from, since it isn't wrapped in .lhc-submit-field). Without
     this, these five controls fall back to the browser's native
     input/select border (a thick dark inset/outset edge with square
     corners on Windows/Chrome), which -- even at an identical 48px box
     height -- reads as visibly heavier/taller than the neighboring
     fields above this row. */
  border: 1px solid #d5e0e8;
  border-radius: 6px;
  background: #fff;
  color: var(--lhc-market-ink);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item :is(input, select, textarea):focus {
  border-color: var(--lhc-market-green);
  box-shadow: 0 0 0 3px rgba(0, 143, 90, .12);
  outline: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item textarea {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  resize: none;
  padding-top: 9px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--country {
  flex: 0 1 118px;
  min-width: 96px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--country-other {
  flex: 0 1 72px;
  min-width: 62px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--contact-value {
  flex: 1.4 1 110px;
  min-width: 96px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--email {
  flex: 1.2 1 110px;
  min-width: 96px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--code {
  flex: 0.7 1 80px;
  min-width: 70px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--send {
  flex: 0 1 auto;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--send .button {
  min-height: 48px;
  white-space: nowrap;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  /* This button previously carried no color/shape rule of its own, so it
     rendered as the browser's native gray 3D button (2px outset border) --
     the plainest, most out-of-place element in the row. Give it the
     site's canonical pill shape (--lhc-brand-pill-radius) in a warm tone
     (--lhc-brand-orange) so it reads as a deliberate secondary action,
     visually distinct from the blue primary "提交审核" button, while
     still using the site's shared design tokens rather than a one-off
     color. */
  color: #fff;
  background: var(--lhc-brand-orange);
  border: 1px solid var(--lhc-brand-orange);
  border-radius: var(--lhc-brand-pill-radius);
  box-shadow: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--send .button:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--send .button:focus-visible {
  background: #e88900;
  border-color: #e88900;
}

@media (max-width: 720px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item {
    flex: 1 1 45%;
  }
}

@media (max-width: 560px) {
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row {
    flex-direction: column;
  }
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item,
  body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--send {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* TASK 032: Keep the marketplace submission controls compact and inside the form column. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview {
    margin-top: 0;
    width: 100%;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__image {
    min-height: 210px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload {
    position: relative;
    min-height: 148px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    clip: auto !important;
    clip-path: none !important;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__dropzone {
    min-height: 148px;
    pointer-events: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row {
    grid-template-columns: minmax(110px, 130px) minmax(118px, 132px);
    gap: 9px;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    align-items: end;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-field,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action {
    min-width: 0;
    width: auto;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row #lhc_email_code,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .button {
    box-sizing: border-box;
    height: 50px;
    min-height: 50px;
    margin: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .button {
    width: 132px;
    min-width: 118px;
    padding-inline: 12px;
    white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions {
    justify-content: flex-end;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions .button-primary {
    flex: 0 0 auto;
    width: auto;
    min-width: 118px;
    max-width: 160px;
    padding-inline: 22px;
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__image {
        min-height: 190px;
    }
}

@media (max-width: 560px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-preview__image {
        min-height: 170px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .button,
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-actions .button-primary {
        width: 100%;
        max-width: none;
    }
}

/* Post-listing contact-row repair: reset legacy nested grid placement. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group h3::before {
    background: var(--lhc-brand-blue);
    box-shadow: 0 4px 10px rgba(22, 135, 248, 0.28);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-code-row {
    grid-column: 4;
    grid-template-columns: minmax(0, 1fr) 128px;
    justify-self: stretch;
    width: 100%;
    gap: 9px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action {
    grid-column: auto !important;
    display: flex;
    align-items: end;
    width: 128px;
    min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row #lhc_email_code {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px;
    padding-block: 10px;
    line-height: 1.2;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action .button {
    width: 128px;
    min-width: 0;
    height: 50px;
    min-height: 50px;
}

@media (max-width: 1400px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-code-row {
        grid-column: 2 / -1;
        max-width: 300px;
    }
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-code-row {
        grid-column: auto;
        max-width: none;
    }
}

@media (max-width: 560px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact .lhc-submit-code-row {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action,
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action .button {
        width: 100%;
    }
}

/* Post-listing contact and review-aside alignment polish. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact :is(input, select, textarea),
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action .button {
    box-sizing: border-box;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li::before {
    background: var(--lhc-brand-blue);
    box-shadow: 0 3px 8px rgba(22, 135, 248, 0.26);
}

@media (min-width: 1101px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
        margin-top: 64px;
    }
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
        margin-top: 0;
    }
}

/* Final post-listing control baseline alignment. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--contact :is(input, select, textarea),
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action .button {
    box-sizing: border-box !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
}

@media (min-width: 1101px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
        margin-top: 48px;
    }
}

/* Housing contact controls use explicit IDs to match the standard field baseline. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(#lhc_contact_method, #lhc_contact_value, #lhc_email, #lhc_email_code) {
    box-sizing: border-box !important;
    block-size: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 9px 10px !important;
    line-height: 1.4 !important;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action .button {
    box-sizing: border-box !important;
    block-size: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding-block: 9px !important;
}

/* Compact, single-line listing controls with a roomier image dropzone.
   v1.0.194: this used to be scoped to [data-lhc-submit-type="housing"]
   only -- Request/Roommates/Secondhand were left on the taller base
   field styles (base .lhc-submit-field textarea alone renders ~138px
   with the default rows="4", vs. Housing's 48px single-line box here),
   which is the root cause behind "发布二手" feeling oversized/bulky
   (measured live: the description textarea was 138px on that page vs.
   48px on Housing's, everything else was already ~48px on both). Widened
   to all four listing types so every submission form shares one compact
   baseline -- ".lhc-submit-code-row" in the second selector below is
   old/unused markup outside Housing (see the comment near the shared
   render_contact_row() output further down) so extending it is a no-op
   for the other three types, not a behavior change. */
body.lhc-inner-page-shell .lhc-submit-form-wrap:is([data-lhc-submit-type="housing"], [data-lhc-submit-type="request"], [data-lhc-submit-type="flatmate"], [data-lhc-submit-type="secondhand"]) .lhc-submit-form__group {
    padding-block: 10px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap:is([data-lhc-submit-type="housing"], [data-lhc-submit-type="request"], [data-lhc-submit-type="flatmate"], [data-lhc-submit-type="secondhand"]) .lhc-submit-form__group > .lhc-submit-grid {
    gap: 10px 16px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap:is([data-lhc-submit-type="housing"], [data-lhc-submit-type="request"], [data-lhc-submit-type="flatmate"], [data-lhc-submit-type="secondhand"]) .lhc-submit-field :is(input:not([type="file"]), select, textarea),
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action .button {
    box-sizing: border-box !important;
    block-size: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 8px 10px !important;
    line-height: 1.35 !important;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap:is([data-lhc-submit-type="housing"], [data-lhc-submit-type="request"], [data-lhc-submit-type="flatmate"], [data-lhc-submit-type="secondhand"]) .lhc-submit-field textarea {
    resize: vertical;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media > .lhc-submit-grid,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group--media .lhc-marketplace-upload {
    grid-template-columns: minmax(0, 1fr);
    grid-column: 1 / -1;
    width: 100%;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__dropzone {
    min-height: 200px;
}

/* Keep the explicit contact-field rules on the shared compact baseline. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] :is(#lhc_contact_method, #lhc_contact_value, #lhc_email, #lhc_email_code),
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-code-row .lhc-submit-code-action .button {
    box-sizing: border-box !important;
    block-size: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 8px 10px !important;
    line-height: 1.35 !important;
}

/* Local image-selection feedback; files still upload only on form submission. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__dropzone {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 18px;
    text-align: center;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload.has-lhc-upload-preview .lhc-marketplace-upload__icon,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload.has-lhc-upload-preview .lhc-marketplace-upload__title,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload.has-lhc-upload-preview .lhc-marketplace-upload__action {
    display: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__preview {
    display: grid;
    justify-items: center;
    gap: 9px;
    width: min(100%, 520px);
    pointer-events: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__status {
    margin: 0;
    color: var(--lhc-market-green-dark);
    font-size: 14px;
    font-weight: 750;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__thumbs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    object-fit: cover;
    background: #f6f9fb;
}

@media (max-width: 560px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 240px;
    }
}

/* Keep selected image previews inside six fixed thumbnail slots. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__preview {
    max-width: 100%;
    max-height: 132px;
    overflow: hidden;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__thumbs {
    display: grid !important;
    grid-template-columns: repeat(6, 84px) !important;
    grid-auto-rows: 84px;
    justify-content: center;
    gap: 8px;
    width: min(100%, 544px) !important;
    height: 84px;
    max-height: 84px;
    overflow: hidden;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__thumbs img {
    display: block !important;
    width: 84px !important;
    min-width: 0 !important;
    max-width: 84px !important;
    height: 84px !important;
    min-height: 0 !important;
    max-height: 84px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover !important;
    overflow: hidden;
}

@media (max-width: 560px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__preview {
        max-height: 188px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__thumbs {
        grid-template-columns: repeat(3, 72px) !important;
        grid-auto-rows: 72px;
        width: min(100%, 232px) !important;
        height: auto;
        max-height: 152px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-upload__thumbs img {
        width: 72px !important;
        max-width: 72px !important;
        height: 72px !important;
        max-height: 72px !important;
    }
}

/* TASK 033: Housing marketplace listing polish. */
body.lhc-housing-page {
    --lhc-housing-ink: #061a33;
    --lhc-housing-muted: #627184;
    --lhc-housing-line: #d8e2ec;
    --lhc-housing-green: #008f5a;
    --lhc-housing-green-dark: #007447;
    --lhc-housing-navy: #061a33;
}

body.lhc-housing-page:has(.lhc-listing-display[data-lhc-listing-type="housing"]) :where(.wp-block-post-title, .entry-title, .page-title) {
    display: none;
}

body.lhc-housing-page :where(main, .site-main, .content-area) {
    background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 46%, #f7faf9 100%);
}

body.lhc-housing-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode) {
    width: min(90vw, 1320px) !important;
    max-width: 1320px !important;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] {
    display: grid;
    gap: 18px;
    width: 100% !important;
    max-width: 1320px !important;
    margin: 18px auto 0 !important;
    padding: 0 0 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--lhc-housing-ink);
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-market-header {
    display: flex;
    min-width: 0;
    align-items: end;
    justify-content: space-between;
    gap: 16px 28px;
    padding: 8px 0 2px;
}

body.lhc-housing-page .lhc-housing-market-header__copy {
    display: grid;
    min-width: 0;
    gap: 6px;
}

body.lhc-housing-page .lhc-housing-market-header h1 {
    margin: 0;
    color: var(--lhc-housing-ink);
    font-family: var(--lhc-type-display-family);
    font-size: var(--lhc-type-h1-size);
    font-weight: 820;
    line-height: var(--lhc-type-h1-line-height);
    letter-spacing: 0;
}

body.lhc-housing-page .lhc-housing-market-header p {
    max-width: none;
    margin: 0;
    color: var(--lhc-housing-muted);
    font-size: 16px;
    line-height: 1.55;
    white-space: nowrap;
}

body.lhc-housing-page .lhc-housing-market-header .lhc-participation-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin: 0;
    gap: 8px;
}

body.lhc-housing-page .lhc-housing-market-header .lhc-participation-actions__link {
    min-height: 42px;
    width: auto;
    padding: 9px 18px;
    border: 1px solid var(--lhc-housing-green);
    border-radius: 6px;
    background: var(--lhc-housing-green);
    box-shadow: none;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}

body.lhc-housing-page .lhc-housing-market-header .lhc-participation-actions__link:not(:first-child) {
    border-color: #c7d8d0;
    background: #fff;
    color: var(--lhc-housing-green-dark);
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters {
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) minmax(170px, 1.05fr) minmax(132px, .78fr) minmax(156px, .86fr) minmax(112px, .58fr) minmax(112px, .58fr) auto;
    gap: 10px;
    align-items: end;
    justify-content: start;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--lhc-housing-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: none;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters input[type="hidden"] {
    display: none;
}

/* v1.0.201：这条选择器比上面 TASK 017 那条更精确，实际渲染时是它
   生效——原来是 font-weight: 750（比"加粗"的 700 还要更粗一档），改成
   跟全站其它筛选栏一致的 600，不再加粗。
   v1.0.219：用户反馈 600 实际看着还是偏粗，要求进一步改细，统一降到
   400（正常字重）。 */
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters label {
    min-width: 0;
    gap: 5px;
    color: var(--lhc-housing-ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters :is(input, select) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    background: #fff;
    color: var(--lhc-housing-ink);
    font-size: 15px;
    line-height: 1.35;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters :is(input, select):focus-visible {
    outline: 3px solid rgba(0, 143, 90, .16);
    outline-offset: 1px;
    border-color: var(--lhc-housing-green);
}

/* v1.0.184：跟基础层的"筛选"按钮一起收紧尺寸（原来 44px/15px 比旁边的
   分类筛选 chip 明显粗一圈），颜色/字重仍保留房源页自己的深蓝配色。 */
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters .button {
    justify-self: start;
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 7px 20px;
    border: 1px solid var(--lhc-brand-blue);
    border-radius: 999px;
    background: var(--lhc-housing-navy);
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card {
    display: flex;
    min-width: 0;
    max-width: none;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid var(--lhc-housing-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    transition: border-color 160ms ease, transform 160ms ease;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card:hover {
    border-color: rgba(0, 143, 90, .42);
    box-shadow: none;
    transform: translateY(-1px);
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e8f0ec;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card__image img {
    transition: transform 200ms ease;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card:hover .lhc-listing-card__image img {
    transform: scale(1.018);
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-image-placeholder {
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(6, 26, 51, .08), rgba(0, 143, 90, .08)),
        linear-gradient(145deg, #edf4f7 0%, #f7fbf8 48%, #e7f0ea 100%);
    color: transparent;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-image-placeholder::before {
    width: 58px;
    height: 40px;
    border: 2px solid rgba(6, 26, 51, .24);
    border-top: 0;
    border-radius: 4px;
    content: "";
    transform: translateY(8px);
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-image-placeholder::after {
    position: absolute;
    top: calc(50% - 31px);
    width: 38px;
    height: 38px;
    border-top: 2px solid rgba(6, 26, 51, .24);
    border-left: 2px solid rgba(6, 26, 51, .24);
    content: "";
    transform: rotate(45deg);
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card__body {
    flex: 1;
    gap: 10px;
    min-width: 0;
    padding: 14px;
}

/* 价格现在由服务端直接渲染在 .lhc-listing-card__top-row 里（图片下方、和
   "住房"类型标签同一行、靠右对齐），不再叠在图片上，也不再需要 JS 把它从
   .lhc-user-tool-controls 里搬出来，所以这里改成直接给 .lhc-listing-card__price
   本身定制颜色；字重同时从 850 降到 600。 */
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card__price {
    color: var(--lhc-housing-green-dark, #007447);
    font-size: 17px;
    font-weight: 600;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card__price em {
    color: var(--lhc-housing-green-dark, #007447);
    opacity: .7;
    font-size: 12px;
    font-weight: 500;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-badges {
    gap: 6px;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-badges span {
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid #dce8e2;
    border-radius: 999px;
    background: #f5fbf8;
    color: #39715c;
    font-size: 12px;
    font-weight: 700;
}

/* v1.0.234: this is the selector that was actually winning on the 房源
   listing grid (higher specificity than the plainer .lhc-listing-card h3 /
   body.lhc-housing-page .lhc-listing-card h3 rules above) -- 18px/820 was
   the real size+weight the user's "测试房源，请勿联系" screenshot showed.
   Dropped one size (18px -> 16px) and un-bolded per that request. */
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card h3 {
    order: 2;
    margin: 0;
    color: var(--lhc-housing-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.32;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card h3 a {
    color: inherit;
    text-decoration: none;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card__body > p {
    order: 4;
    min-height: 0;
    color: var(--lhc-housing-muted);
    font-size: 14px;
    line-height: 1.55;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card .lhc-listing-facts {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    padding-top: 4px;
    border-top: 1px solid #edf2f5;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-facts li {
    min-width: 0;
    align-items: start;
    justify-content: start;
    gap: 4px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f4f6;
    font-size: 13px;
    line-height: 1.35;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-facts li span {
    flex: 0 0 auto;
    color: #7a8794;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-facts li strong {
    min-width: 0;
    color: var(--lhc-housing-ink);
    font-weight: 760;
    text-align: left;
    overflow-wrap: anywhere;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-facts li:nth-child(4) {
    grid-column: 1 / -1;
    order: -1;
    align-items: baseline;
    padding: 8px 0 9px;
    border-bottom-color: #e5eee8;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-facts li:nth-child(4) span {
    color: #7a8794;
}

/* Move-in date keeps its own top row and accent color for quick scanning,
   but its text now stays the same size/weight as every other fact value
   (set by the shared ".lhc-listing-facts li strong" rule above) instead of
   jumping to 20px — larger than the card title and the price badge. */
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-facts li:nth-child(4) strong {
    color: var(--lhc-housing-green-dark);
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-detail-link {
    order: 5;
    align-self: flex-start;
    margin-top: auto;
    min-height: 38px;
    padding: 7px 16px;
    border: 1px solid var(--lhc-brand-blue);
    border-radius: 999px;
    background: var(--lhc-brand-blue);
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-empty {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin: 0;
    padding: 40px 20px;
    border: 1px dashed #cbd8d3;
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    color: var(--lhc-housing-muted);
    text-align: center;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-empty h2 {
	font-weight: 800;
    margin: 0;
    color: var(--lhc-housing-ink);
    font-size: 22px;
}

@media (max-width: 1179px) {
    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters {
        grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(132px, .8fr) minmax(150px, .9fr);
    }

    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.lhc-housing-page :where(.wp-block-post-content, .entry-content, .wp-block-shortcode) {
        width: calc(100vw - 28px) !important;
    }

    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] {
        gap: 14px;
        margin-top: 12px !important;
        padding-bottom: 24px;
    }

    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-market-header {
        display: grid;
        align-items: start;
        gap: 12px;
    }

    body.lhc-housing-page .lhc-housing-market-header h1 {
        font-size: clamp(28px, 8vw, 32px);
    }

    body.lhc-housing-page .lhc-housing-market-header p {
        white-space: normal;
        font-size: 15px;
    }

    body.lhc-housing-page .lhc-housing-market-header .lhc-participation-actions {
        justify-content: start;
        width: 100%;
    }

    body.lhc-housing-page .lhc-housing-market-header .lhc-participation-actions__link {
        width: auto;
        max-width: 100%;
    }

    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    body.lhc-housing-page .lhc-housing-market-header .lhc-participation-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.lhc-housing-page .lhc-housing-market-header .lhc-participation-actions__link {
        width: 100%;
    }

    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters,
    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card .lhc-listing-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters .button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card,
    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card__image img {
        transition: none;
    }

    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card:hover,
    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-card:hover .lhc-listing-card__image img {
        transform: none;
    }
}

/* TASK 034: Housing is a browse-and-filter page, not a posting entry point. */
body.lhc-housing-page :where(.wp-block-post-content, .entry-content) > :is(p:first-child, .wp-block-paragraph:first-child) {
    display: none;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] {
    margin-top: 0 !important;
}
/* TASK 035: clear Housing browse title and high-visibility filter action. */
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-listing-title {
    margin: 0;
    color: var(--lhc-housing-ink);
    font-family: var(--lhc-type-display-family);
    font-size: var(--lhc-type-h2-size);
    font-weight: 820;
    line-height: var(--lhc-type-h2-line-height);
    letter-spacing: 0;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters .button {
    border-color: var(--lhc-brand-blue);
    background: var(--lhc-brand-blue);
    color: #fff;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters .button:hover {
    border-color: var(--lhc-brand-action-hover);
    background: var(--lhc-brand-action-hover);
    color: #fff;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-listing-filters .button:focus-visible {
    outline-color: rgba(22, 119, 255, .35);
}
/* TASK 036: shared, compact heading rhythm for Housing browse and post pages. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-page-intro {
    display: flex;
    min-height: 112px;
    margin: 0 !important;
    align-items: center;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-title-row {
    width: 100%;
    align-items: center;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-page-title,
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-listing-title {
    color: var(--lhc-brand-blue);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-listing-title {
    display: flex;
    min-height: 112px;
    align-items: center;
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-page-intro,
    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-listing-title {
        min-height: auto;
    }
}
/* TASK 037: restore compact Housing header dimensions and column alignment. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-page-intro {
    display: block;
    min-height: 0;
    margin: 0 0 12px !important;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-title-row {
    width: auto;
    align-items: flex-end;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-page-title,
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-listing-title {
    color: #0b3d91;
    font-size: var(--lhc-type-h2-size);
    font-weight: 800;
    line-height: var(--lhc-type-h2-line-height);
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-listing-title {
    display: block;
    min-height: 0;
}

@media (min-width: 1101px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
        margin-top: 0;
    }
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-page-title,
    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-listing-title {
        font-size: var(--lhc-type-h2-size);
    }
}
/* TASK 038: match Housing page titles to the bright review-step blue. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-page-title,
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-listing-title {
    color: var(--lhc-brand-blue);
}
/* TASK 039: match the Housing browse header start to the compact post-listing header. */
@media (min-width: 761px) {
    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] {
        margin-top: -36px !important;
    }
}
/* Housing page: visible "post a listing" entry point, shown above the
   filter form so it doesn't require finding a separate page link. Styled
   as a single-row banner (the Roommates page mirrors this exact structure
   via its own lhc-roommates-post rules) using the Housing page's own
   green/navy palette. */
body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 18px;
    padding: 18px 22px;
    border: 1px solid rgba(0, 143, 90, .22);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 143, 90, .08), rgba(0, 143, 90, .02));
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post__text {
    min-width: 0;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--lhc-housing-green-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post h2 {
    margin: 0 0 4px;
    color: var(--lhc-housing-ink);
    font-size: 19px;
    font-weight: 820;
    line-height: 1.3;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post p {
    margin: 0;
    color: var(--lhc-housing-muted);
    font-size: 14px;
    line-height: 1.5;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post__action {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 22px;
    border: 1px solid var(--lhc-housing-green);
    border-radius: 999px;
    background: var(--lhc-housing-green);
    box-shadow: none;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post__action:hover {
    border-color: var(--lhc-housing-green-dark);
    background: var(--lhc-housing-green-dark);
    color: #fff;
}

body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post__action.is-disabled {
    border-color: var(--lhc-housing-line);
    background: #eef2f0;
    color: var(--lhc-housing-muted);
    cursor: not-allowed;
}

@media (max-width: 640px) {
    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    body.lhc-housing-page .lhc-listing-display[data-lhc-listing-type="housing"] .lhc-housing-post__action {
        width: 100%;
        text-align: center;
    }
}

/* Secondhand page: visible "post an item" entry point, mirroring the
   Housing/Roommates post cards above (render_housing_post_card() /
   render_roommates_post_banner()) exactly -- Secondhand had no such entry
   point at all before, so there was no way to reach the submit form from
   the browse page. Secondhand has no dedicated body class like Housing's
   lhc-housing-page or Roommates' lhc-roommates-page, so it's scoped by the
   listing-display's own data-lhc-listing-type attribute instead, using the
   site's shared brand blue (already used by this page's own filter/detail
   buttons) rather than introducing a fourth accent color. */
body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 18px;
    padding: 18px 22px;
    border: 1px solid rgba(22, 135, 248, .22);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(22, 135, 248, .08), rgba(22, 135, 248, .02));
}

body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post__text {
    min-width: 0;
}

body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--lhc-brand-blue-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post h2 {
    margin: 0 0 4px;
    color: #12203f;
    font-size: 19px;
    font-weight: 820;
    line-height: 1.3;
}

body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post p {
    margin: 0;
    color: #5b6785;
    font-size: 14px;
    line-height: 1.5;
}

body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post__action {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 22px;
    border: 1px solid var(--lhc-brand-blue);
    border-radius: 999px;
    background: var(--lhc-brand-blue);
    box-shadow: none;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post__action:hover {
    border-color: var(--lhc-brand-blue-deep);
    background: var(--lhc-brand-blue-deep);
    color: #fff;
}

body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post__action.is-disabled {
    border-color: #dce3ea;
    background: #eef2f0;
    color: #5b6785;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="secondhand"] .lhc-secondhand-post__action {
        width: 100%;
        text-align: center;
    }
}

/* TASK 040: Resource Center Option 3 marketplace tool-library polish. */
body.lhc-inner-page-shell:has(.lhc-resource-library) {
    --lhc-resource-blue: var(--lhc-brand-blue);
    --lhc-resource-blue-deep: #0b67cf;
    --lhc-resource-ink: #17324d;
    --lhc-resource-muted: #64748b;
    --lhc-resource-line: #d9e5f2;
    --lhc-resource-soft: #f6f9fd;
}

body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-title, .entry-title, .page-title) {
    margin: 18px 0 6px !important;
    color: var(--lhc-resource-blue);
    font-size: clamp(34px, 3vw, 42px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.025em;
}

body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-content, .entry-content) > :is(p:first-child, .wp-block-paragraph:first-child) {
    max-width: 64ch;
    margin: 0 0 16px;
    color: var(--lhc-resource-muted);
    font-size: 15px;
    line-height: 1.55;
}

body.lhc-inner-page-shell .lhc-resource-library {
    width: 100%;
    max-width: var(--lhc-page-max);
    margin: 0;
    padding: 0 0 32px;
    color: var(--lhc-resource-ink);
}

body.lhc-inner-page-shell .lhc-resource-library__top {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 18px;
    align-items: stretch;
    margin: 0 0 20px;
}

body.lhc-inner-page-shell .lhc-resource-filters {
    grid-template-columns: minmax(170px, 1.2fr) minmax(170px, 1.1fr) minmax(118px, .65fr) max-content;
    align-items: end;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--lhc-resource-line);
    border-radius: 8px;
    background: var(--lhc-resource-soft);
    box-shadow: none;
}

/* v1.0.201：资料/资源筛选栏的 label 跟房源/求租/二手/找室友几处筛选栏
   是同一种"标签+下拉框"结构，字重统一改成不加粗的 600。
   v1.0.219：用户反馈 600 实际看着还是偏粗，要求进一步改细，统一降到
   400（正常字重）。注意跟下面 .lhc-submit-field label 共享的那条组合
   规则（16px/700，line 2119 附近）是不同的选择器，这次没有动它——
   那条是提交表单本身的字段标签，不属于筛选栏。 */
body.lhc-inner-page-shell .lhc-resource-filters label {
    min-width: 0;
    color: #41566e;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

body.lhc-inner-page-shell .lhc-resource-filters select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #cedceb;
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
    color: var(--lhc-resource-ink);
    font-size: 14px;
}

body.lhc-inner-page-shell .lhc-resource-filters .button {
    align-self: end;
    justify-self: start;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 19px;
    border: 1px solid var(--lhc-resource-blue);
    border-radius: 7px;
    background: var(--lhc-resource-blue);
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

body.lhc-inner-page-shell .lhc-resource-filters .button:hover {
    border-color: var(--lhc-resource-blue-deep);
    background: var(--lhc-resource-blue-deep);
    box-shadow: none;
    color: #fff;
    filter: none;
}

body.lhc-inner-page-shell .lhc-resource-filters :is(select, .button):focus-visible,
body.lhc-inner-page-shell .lhc-resource-actions .button:focus-visible {
    outline: 3px solid rgba(22, 135, 248, .26);
    outline-offset: 2px;
}

body.lhc-inner-page-shell .lhc-resource-spotlight {
    position: relative;
    min-height: 0;
    align-content: start;
    gap: 9px;
    padding: 16px 18px;
    border: 1px solid #cfe0f3;
    border-radius: 8px;
    background: #fbfdff;
    box-shadow: none;
}

body.lhc-inner-page-shell .lhc-resource-spotlight::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lhc-resource-blue);
    box-shadow: 0 0 0 4px rgba(22, 135, 248, .11);
    content: '';
}

body.lhc-inner-page-shell .lhc-resource-spotlight :is(.lhc-resource-spotlight__eyebrow, .lhc-resource-spotlight__status) {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--lhc-resource-blue-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

body.lhc-inner-page-shell .lhc-resource-spotlight h2 {
    color: var(--lhc-resource-ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.32;
}

body.lhc-inner-page-shell .lhc-resource-spotlight p {
    color: var(--lhc-resource-muted);
    font-size: 14px;
    line-height: 1.55;
}

body.lhc-inner-page-shell .lhc-resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.lhc-inner-page-shell .lhc-resource-card {
    min-width: 0;
    min-height: 100%;
    padding: 16px;
    border: 1px solid var(--lhc-resource-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

body.lhc-inner-page-shell .lhc-resource-card:hover {
    border-color: rgba(22, 135, 248, .55);
    box-shadow: 0 7px 18px rgba(22, 82, 144, .07);
    transform: translateY(-1px);
}

body.lhc-inner-page-shell .lhc-resource-card__badges span {
    padding: 3px 8px;
    border: 1px solid #cfe2f8;
    border-radius: 999px;
    background: #f3f8ff;
    color: var(--lhc-resource-blue-deep);
    font-size: 11px;
    font-weight: 700;
}

body.lhc-inner-page-shell .lhc-resource-card h3 {
	font-weight: 700;
    color: var(--lhc-resource-ink);
    font-size: 18px;
    line-height: 1.35;
}

body.lhc-inner-page-shell .lhc-resource-card :is(p, .lhc-resource-card__title-en) {
    color: var(--lhc-resource-muted);
    font-size: 14px;
    line-height: 1.55;
}

body.lhc-inner-page-shell .lhc-resource-facts {
    border-top: 1px solid #edf2f7;
}

body.lhc-inner-page-shell .lhc-resource-actions .button {
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--lhc-resource-blue);
    border-radius: 6px;
    background: var(--lhc-resource-blue);
    box-shadow: none;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

body.lhc-inner-page-shell .lhc-resource-empty {
    position: relative;
    gap: 8px;
    justify-items: start;
    padding: clamp(28px, 4vw, 42px);
    border: 1px dashed #b9d6f4;
    border-radius: 8px;
    background: #fbfdff;
    box-shadow: none;
    color: var(--lhc-resource-muted);
}

body.lhc-inner-page-shell .lhc-resource-empty::before {
    width: 30px;
    height: 22px;
    border: 2px solid #9ec9f4;
    border-radius: 5px;
    background: linear-gradient(135deg, #f1f8ff, #fff);
    content: '';
}

body.lhc-inner-page-shell .lhc-resource-empty h2 {
	font-weight: 800;
    color: var(--lhc-resource-ink);
    font-size: 20px;
    line-height: 1.35;
}

body.lhc-inner-page-shell .lhc-resource-empty p {
    max-width: 58ch;
    color: var(--lhc-resource-muted);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 1179px) {
    body.lhc-inner-page-shell .lhc-resource-library__top {
        grid-template-columns: 1fr;
    }

    body.lhc-inner-page-shell .lhc-resource-filters {
        grid-template-columns: repeat(3, minmax(140px, 1fr)) max-content;
    }

    body.lhc-inner-page-shell .lhc-resource-spotlight {
        grid-template-columns: auto 1fr;
        align-items: start;
    }

    body.lhc-inner-page-shell .lhc-resource-spotlight :is(.lhc-resource-spotlight__eyebrow, .lhc-resource-spotlight__status) {
        grid-column: 2;
    }

    body.lhc-inner-page-shell .lhc-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-title, .entry-title, .page-title) {
        margin-top: 14px !important;
        font-size: clamp(28px, 8vw, 32px);
    }

    body.lhc-inner-page-shell .lhc-resource-library__top {
        gap: 14px;
        margin-bottom: 16px;
    }

    body.lhc-inner-page-shell .lhc-resource-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

    body.lhc-inner-page-shell .lhc-resource-filters .button {
        width: 100%;
        grid-column: 1 / -1;
    }

    body.lhc-inner-page-shell .lhc-resource-spotlight {
        grid-template-columns: auto 1fr;
        padding: 15px;
    }

    body.lhc-inner-page-shell .lhc-resource-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body.lhc-inner-page-shell .lhc-resource-filters {
        grid-template-columns: 1fr;
    }
}
/* TASK 041: align Resource Center copy with a compact 6:4 tool-and-spotlight layout. */
@media (min-width: 1180px) {
    body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-title, .entry-title, .page-title),
    body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-content, .entry-content) > :is(p:first-child, .wp-block-paragraph:first-child) {
        margin-left: 48px;
    }

    body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-title, .entry-title, .page-title) {
        margin-top: -18px !important;
    }

    body.lhc-inner-page-shell .lhc-resource-library {
        width: calc(100% - 48px);
        max-width: 1120px;
        margin-left: 48px;
    }

    body.lhc-inner-page-shell .lhc-resource-library__top {
        grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
    }

    body.lhc-inner-page-shell .lhc-resource-filters {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    body.lhc-inner-page-shell .lhc-resource-filters .lhc-resource-featured-filter,
    body.lhc-inner-page-shell .lhc-resource-filters .button {
        max-width: 180px;
    }
}
/* TASK 042: Resource Center uses a single, aligned title row and the shared site-wide page width. */
body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-title, .entry-title, .page-title),
body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-content, .entry-content) > :is(p:first-child, .wp-block-paragraph:first-child) {
    display: none;
}

body.lhc-inner-page-shell .lhc-resource-library {
    width: var(--lhc-page-wide);
    max-width: var(--lhc-page-max);
    margin-inline: auto;
}

body.lhc-inner-page-shell .lhc-resource-library__header {
    display: flex;
    align-items: flex-end;
    gap: clamp(22px, 3vw, 46px);
    min-height: 72px;
    margin: 0 0 20px;
}

body.lhc-inner-page-shell .lhc-resource-library__header h1 {
    flex: 0 0 auto;
    margin: 0;
    color: var(--lhc-resource-blue);
    font-family: var(--lhc-type-display-family);
    font-size: var(--lhc-type-h1-size);
    font-weight: 800;
    line-height: var(--lhc-type-h1-line-height);
    letter-spacing: -.025em;
}

body.lhc-inner-page-shell .lhc-resource-library__header p {
    max-width: 62ch;
    margin: 0 0 4px;
    color: var(--lhc-resource-muted);
    font-size: 15px;
    line-height: 1.55;
}

@media (min-width: 1180px) {
    body.lhc-inner-page-shell .lhc-resource-library {
        width: var(--lhc-page-wide);
        margin-left: auto;
    }

    body.lhc-inner-page-shell .lhc-resource-library__top {
        grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
    }

    body.lhc-inner-page-shell .lhc-resource-filters {
        grid-template-columns: minmax(160px, 1.2fr) minmax(160px, 1.15fr) minmax(130px, .75fr) max-content;
    }

    body.lhc-inner-page-shell .lhc-resource-filters .lhc-resource-featured-filter,
    body.lhc-inner-page-shell .lhc-resource-filters .button {
        max-width: none;
    }
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-resource-library {
        width: calc(100vw - 28px);
    }

    body.lhc-inner-page-shell .lhc-resource-library__header {
        display: grid;
        gap: 6px;
        min-height: 0;
        margin-bottom: 16px;
    }

    body.lhc-inner-page-shell .lhc-resource-library__header h1 {
        font-size: clamp(28px, 8vw, 32px);
    }

    body.lhc-inner-page-shell .lhc-resource-library__header p {
        margin: 0;
        font-size: 14px;
    }
}
/* TASK 043: remove Resource Center duplicate chrome and lock the wide single-row desktop toolbar. */
body.lhc-inner-page-shell:has(.lhc-resource-library) :where(main, .site-main, .content-area) h1 {
    display: none !important;
}

body.lhc-inner-page-shell:has(.lhc-resource-library) .lhc-resource-library__header h1 {
    display: block !important;
}

body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-content, .entry-content) > :is(p, .wp-block-paragraph):first-child,
body.lhc-inner-page-shell:has(.lhc-resource-library) :where(.wp-block-post-content, .entry-content) .wp-block-paragraph:first-of-type {
    display: none;
}

body.lhc-inner-page-shell .lhc-resource-library {
    width: var(--lhc-page-wide);
    max-width: var(--lhc-page-max);
    margin-inline: auto;
}

body.lhc-inner-page-shell .lhc-resource-library__header,
body.lhc-inner-page-shell .lhc-resource-library__top,
body.lhc-inner-page-shell .lhc-resource-empty {
    width: 100%;
}

@media (min-width: 1180px) {
    body.lhc-inner-page-shell .lhc-resource-library {
        width: var(--lhc-page-wide);
        margin-left: auto;
    }

    body.lhc-inner-page-shell .lhc-resource-library__top {
        grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
        gap: 22px;
    }

    body.lhc-inner-page-shell .lhc-resource-filters {
        grid-template-columns: minmax(220px, 1.1fr) minmax(260px, 1.25fr) minmax(140px, .55fr) auto;
        gap: 10px;
    }

    body.lhc-inner-page-shell .lhc-resource-filters .button {
        width: auto;
        min-width: 86px;
        padding-inline: 22px;
        justify-self: start;
    }
}
/* TASK 044: align the Housing post-listing review aside with the first form section. */
@media (min-width: 1101px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit {
        align-items: start;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
        align-self: start;
        margin-top: 48px;
        padding-top: 0;
    }
}

/* Mobile fix: the "TASK 029" rule above (search
   .lhc-product-layout--submit[data-lhc-submit-type="housing"] earlier in
   this file) replaced the old fixed aside width with a proportional
   clamp(280px, 21vw, 320px) column -- but clamp()'s 280px floor never
   shrinks below 280px at ANY viewport, so on a phone (~390px wide) this
   was still forcing a 2-column grid with an unshrinkable 280px sidebar,
   squeezing the actual form fields down to a ~54px sliver with the
   "审核流程"/"图片建议" review-tips cards visually overlapping the form.
   Several earlier collapse rules for this exact selector, scoped to
   max-width: 560px/1100px/1500px elsewhere in this file, got silently
   defeated because that later rule shares the same selector specificity
   and sits after them in the cascade -- same-specificity rules resolve
   by source order, not by which one "sounds newer" or more specific to
   mobile. Re-establish the collapse at the same 1100px boundary TASK 044
   just above already treats as this component's desktop/narrow split
   (and that the flatmate version of this same layout, below, already
   collapses at) -- placed at the very end of every other rule for this
   selector in the file so it's guaranteed to win. */
@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout--submit {
        grid-template-columns: minmax(0, 1fr);
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-product-layout__aside {
        max-width: none;
        margin-top: 0;
    }
}

/* Second mobile fix from the same TASK 029 rule: it also set
   white-space: nowrap on the "填写房源信息 → 邮箱验证 → 提交审核 →
   审核通过后展示" step-flow line under the page title (a more specific
   selector than the earlier .lhc-submit-flow rule, so it won regardless
   of viewport). That single unbroken line is wider than a phone screen
   at any font-size this page uses, so it was forcing the page itself to
   scroll horizontally -- the real cause of the "background doesn't reach
   the right edge on mobile" report, since a full-bleed background is
   still only ever as wide as the *intended* viewport, not however far a
   stray nowrap element happens to push the page's real scrollable width.
   Let it wrap at the same 760px breakpoint this selector already uses to
   shrink its font-size (just above). */
@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-title-row .lhc-submit-flow {
        white-space: normal;
    }
}

/* TASK 045: Roommates listing page aligned to the compact Post Listing layout. */
body.lhc-inner-page-shell:has(.lhc-listing-display[data-lhc-listing-type="flatmate"]) :where(.wp-block-post-title, .entry-title, .page-title),
body.lhc-inner-page-shell:has(.lhc-listing-display[data-lhc-listing-type="flatmate"]) :where(.wp-block-post-content, .entry-content) > :is(p, .wp-block-paragraph):first-child {
    display: none;
}

body.lhc-inner-page-shell:has(.lhc-listing-display[data-lhc-listing-type="flatmate"]) :where(.wp-block-post-content, .entry-content, .wp-block-shortcode) {
    width: var(--lhc-page-wide);
    max-width: var(--lhc-page-max);
    margin-inline: auto;
}

body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="flatmate"].lhc-roommates-page {
    --lhc-roommates-blue: var(--lhc-brand-blue);
    --lhc-roommates-ink: #17324d;
    --lhc-roommates-muted: #64748b;
    --lhc-roommates-line: #d9e5f2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--lhc-roommates-ink);
}

body.lhc-inner-page-shell .lhc-roommates-page__header {
    display: flex;
    align-items: flex-end;
    gap: clamp(20px, 3vw, 46px);
    min-height: 0;
    margin: 0 0 18px;
}

body.lhc-inner-page-shell .lhc-roommates-page__header h1 {
    flex: 0 0 auto;
    margin: 0;
    color: var(--lhc-roommates-blue);
    font-family: var(--lhc-type-display-family);
    font-size: var(--lhc-type-h2-size);
    font-weight: 800;
    line-height: var(--lhc-type-h2-line-height);
    letter-spacing: -.025em;
}

/* v1.0.202：标题旁边那句说明已经从 PHP 里删掉了（.lhc-roommates-page__header
   不再渲染 <p>），这条规则跟着删掉，避免留死代码。 */

body.lhc-inner-page-shell .lhc-listing-display[data-lhc-listing-type="flatmate"].lhc-roommates-page .lhc-listing-filters {
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) minmax(170px, 1.05fr) minmax(132px, .78fr) minmax(156px, .86fr) minmax(112px, .58fr) minmax(112px, .58fr) auto;
    gap: 10px;
    align-items: end;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid var(--lhc-roommates-line);
    border-radius: 8px;
    background: #f6f9fd;
    box-shadow: none;
}

/* v1.0.219：用户明确要求"找室友"页筛选栏的标签不要加粗，改用细字体——
   这里特意只改这一页自己的选择器（不动 v1.0.201 那条全站统一的 600），
   避免影响房源页等其它页面的筛选栏标签。 */
body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-filters label {
    min-width: 0;
    gap: 5px;
    color: var(--lhc-roommates-ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-filters :is(input, select) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    background: #fff;
    color: var(--lhc-roommates-ink);
    font-size: 15px;
}

/* v1.0.184：跟基础层的"筛选"按钮一起收紧尺寸；顺带把 font-weight 从 600
   改成 700——找室友页是全站唯一一处筛选按钮字重比其它同类按钮（房源/
   基础层都是 700 起）更细的，之前应该是疏漏，不是有意的页面主题差异。 */
body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-filters .button {
    justify-self: start;
    width: auto;
    min-width: 76px;
    min-height: 38px;
    padding-inline: 20px;
    border-color: var(--lhc-roommates-blue);
    border-radius: 999px;
    background: var(--lhc-roommates-blue);
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-card {
    min-width: 0;
    border: 1px solid var(--lhc-roommates-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-card__image {
    aspect-ratio: 16 / 10;
    background: #edf5ff;
}

/* 价格现在由服务端直接渲染在 .lhc-listing-card__top-row 里（图片下方、和
   "找室友"类型标签同一行、靠右对齐），不再叠在图片上，也不再需要 JS 把它从
   .lhc-user-tool-controls 里搬出来，所以这里改成直接给 .lhc-listing-card__price
   本身定制颜色；字重同时从 850 降到 600，不再是"加粗"的观感。 */
body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-card__price {
    color: var(--lhc-roommates-blue);
    font-size: 17px;
    font-weight: 600;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-card__price em {
    color: var(--lhc-roommates-blue);
    opacity: .7;
    font-size: 12px;
    font-weight: 500;
}

/* Match Housing's card body copy exactly -- without this, the summary
   paragraph fell back to the theme's body-wide default (22px), rendering
   noticeably larger than every other line of card text. */
body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-card__body > p {
    min-height: 0;
    color: var(--lhc-roommates-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Match Housing's "查看详情" button exactly -- without a dedicated,
   sufficiently specific override here, the generic ".lhc-listing-display
   .button" rule (border-radius: var(--lhc-radius-sm, 6px)) wins the
   specificity fight over the base pill rule, rendering a 6px rounded
   rectangle instead of the intended full pill shape. */
body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-detail-link {
    align-self: flex-start;
    margin-top: auto;
    min-height: 38px;
    padding: 7px 16px;
    border: 1px solid var(--lhc-brand-blue);
    border-radius: 999px;
    background: var(--lhc-brand-blue);
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-empty {
    margin: 0;
    padding: 32px 20px;
    border: 1px dashed #b8d8fb;
    border-radius: 8px;
    background: #fbfdff;
    color: var(--lhc-roommates-muted);
    text-align: center;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-empty h2 {
	font-weight: 800;
    margin: 0 0 6px;
    color: var(--lhc-roommates-ink);
    font-size: 21px;
}

@media (max-width: 1179px) {
    body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell:has(.lhc-listing-display[data-lhc-listing-type="flatmate"]) :where(.wp-block-post-content, .entry-content, .wp-block-shortcode) {
        width: calc(100vw - 28px);
    }

    body.lhc-inner-page-shell .lhc-roommates-page__header {
        display: grid;
        gap: 6px;
        margin-bottom: 16px;
    }

    body.lhc-inner-page-shell .lhc-roommates-page__header h1 {
        font-size: clamp(28px, 8vw, 32px);
    }

    body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

    body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    body.lhc-inner-page-shell .lhc-roommates-page .lhc-listing-filters .button {
        width: 100%;
    }
}
/* Roommates page: visible "post roommate information" entry point, shown
   above the filter form so it doesn't require finding a separate page
   link. Styled as a single-row banner (matching Housing's lhc-housing-post
   layout) using the Roommates page's own blue palette. */
body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 18px;
    padding: 18px 22px;
    border: 1px solid rgba(22, 135, 248, .22);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(22, 135, 248, .08), rgba(22, 135, 248, .02));
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post__text {
    min-width: 0;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--lhc-roommates-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post h2 {
    margin: 0 0 4px;
    color: var(--lhc-roommates-ink);
    font-size: 19px;
    font-weight: 820;
    line-height: 1.3;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post p {
    margin: 0;
    color: var(--lhc-roommates-muted);
    font-size: 14px;
    line-height: 1.5;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post__action {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 22px;
    border: 1px solid var(--lhc-roommates-blue);
    border-radius: 999px;
    background: var(--lhc-roommates-blue);
    box-shadow: none;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post__action:hover {
    border-color: var(--lhc-brand-action-hover);
    background: var(--lhc-brand-action-hover);
    color: #fff;
}

body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post__action.is-disabled {
    border-color: var(--lhc-roommates-line);
    background: #eef2f5;
    color: var(--lhc-roommates-muted);
    cursor: not-allowed;
}

@media (max-width: 640px) {
    body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    body.lhc-inner-page-shell .lhc-roommates-page .lhc-roommates-post__action {
        width: 100%;
        text-align: center;
    }
}

/* TASK 049: Roommates submission page uses the established posting rhythm. */
body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="flatmate"]) :is(.wp-block-post-title, .entry-title, .page-title),
body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="flatmate"]) :where(.wp-block-post-content, .entry-content) > :is(p, .wp-block-paragraph):first-child {
    display: none;
}

/* Secondhand's actual WordPress page (unlike Housing/Flatmate's) still
   carries the theme's own native post-title block plus a leftover
   "This is a Life Hub starter page..." placeholder paragraph ahead of the
   [life_hub_submit_secondhand] shortcode in its saved content -- both were
   always there, but rendered invisibly mismatched (an untranslated English
   placeholder sitting above the shortcode's own correctly-translated
   Chinese title/intro) until the page-title/starter-paragraph translation
   fix above made them match, which is what surfaced them as an exact
   visible duplicate of the shortcode's own "发布二手" heading and intro
   line. Every other submit-type page hides these two native elements once
   the shortcode is present (see the Housing/Flatmate rules above) -- this
   type never had the matching rule. */
body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="secondhand"]) :is(.wp-block-post-title, .entry-title, .page-title),
body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="secondhand"]) :where(.wp-block-post-content, .entry-content) > :is(p, .wp-block-paragraph):first-child {
    display: none;
}

body.lhc-inner-page-shell:has(.lhc-submit-form-wrap[data-lhc-submit-type="flatmate"]) :where(.wp-block-post-content, .entry-content, .wp-block-shortcode) {
    width: var(--lhc-page-wide);
    max-width: var(--lhc-page-max);
    margin-inline: auto;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] {
    --lhc-roommate-post-blue: var(--lhc-brand-blue);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-product-layout--submit {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px);
    gap: 28px;
    align-items: start;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-product-page-intro {
    margin: 0 0 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 28px;
}

/* Match the canonical page-title formula used site-wide (same shared
   --lhc-type-h2-size / --lhc-type-h2-line-height / display-family tokens
   as "留学租房" and "发布房源" -- only the accent color differs). This
   previously used its own independent clamp(30px, 2.5vw, 34px) with no
   font-family override, which both rendered visibly larger than Housing's
   (its 30px floor equalled Housing's 30px ceiling) and fell back to the
   inherited sans-serif body font instead of the shared serif display font. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-page-title {
    margin: 0;
    color: var(--lhc-roommate-post-blue);
    font-family: var(--lhc-type-display-family);
    font-size: var(--lhc-type-h2-size);
    font-weight: 800;
    line-height: var(--lhc-type-h2-line-height);
    letter-spacing: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-flow,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-code-action .button {
    border-color: var(--lhc-roommate-post-blue);
    background: var(--lhc-roommate-post-blue);
    color: #fff;
}

/* Match the Housing submit page's compact button sizing exactly (only the
   fill color differs) -- this previously had no size override at all, so
   it fell back to the generic, larger ".lhc-submit-actions .button" base
   (48px/156px/16px) where Housing's own override compacts it to
   46px/118-160px/15px, making "提交审核" render visibly larger than
   Housing's "提交审核". */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-actions .button-primary {
    min-width: 118px;
    max-width: 160px;
    min-height: 46px;
    font-size: 15px;
    border-color: var(--lhc-roommate-post-blue);
    background: var(--lhc-roommate-post-blue);
    color: #fff;
}

/* Secondhand's "提交审核" button had no compact sizing override either
   (same gap as Flatmate's above), so it fell back to the generic
   ".lhc-submit-actions .button" base sizing instead of the compact
   118-160px pill every other submit page uses, reading as a visibly
   oversized/stretched capsule next to them. Mirrors the Housing/Flatmate
   override exactly, using this page's own blue accent (already its
   primary color elsewhere, so no distinct fill color is needed). */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-actions {
    justify-content: flex-end;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-actions .button-primary {
    flex: 0 0 auto;
    width: auto;
    min-width: 118px;
    max-width: 160px;
    min-height: 46px;
    font-size: 15px;
    padding-inline: 22px;
    border-color: var(--lhc-brand-blue);
    background: var(--lhc-brand-blue);
    color: #fff;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-actions .button-primary:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-actions .button-primary:focus-visible {
    border-color: var(--lhc-brand-blue-deep);
    background: var(--lhc-brand-blue-deep);
}

/* TASK 055: give Secondhand's own .lhc-submit-page-title / .lhc-submit-flow
   the same compact page-title formula Housing/Flatmate already use. The
   native-title hide rule above (see the long comment at the "Secondhand's
   actual WordPress page" block) already removes the duplicate WordPress
   page title, but nothing ever gave the shortcode's own title row a
   matching size -- so it fell back to the theme's default xx-large h1,
   rendering visibly larger than every other submit page's heading and
   its own flow/description line larger than the compact form below it.
   Uses --lhc-brand-blue directly (already this page's primary color via
   its button rules above) rather than a new type-specific color alias. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-product-page-intro {
    margin: 0 0 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 28px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-page-title {
    margin: 0;
    color: var(--lhc-brand-blue);
    font-family: var(--lhc-type-display-family);
    font-size: var(--lhc-type-h2-size);
    font-weight: 800;
    line-height: var(--lhc-type-h2-line-height);
    letter-spacing: 0;
}

/* v1.0.196: this line used to be a short one-line "flow" summary (fixed at
   white-space:nowrap on desktop, only allowed to wrap under 760px) --
   page_secondhand_intro (see class-life-hub-participation-copy.php) was
   just replaced with a much longer compliance/caution paragraph, which
   nowrap would have forced onto one giant unbroken line overflowing the
   page at desktop widths. Now wraps normally and always takes its own
   full-width line under the title (flex-basis:100%) instead of trying to
   sit beside it -- a paragraph this long next to a short title looked
   cramped, not just broken. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-title-row .lhc-submit-flow {
    flex: 1 1 100%;
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5d7187;
    white-space: normal;
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-title-row {
        align-items: flex-start;
        gap: 6px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-page-title {
        font-size: var(--lhc-type-h2-size);
    }
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-flow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 3px;
    padding: 0;
    background: transparent;
    color: #5d7187;
    font-size: 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-flow::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lhc-roommate-post-blue);
    content: "";
}

/* Match Housing's title-row flow text exactly -- without this, the longer
   prose-style flow copy ("提交找室友需求与预算，完成邮箱验证后等待平台审核。")
   wraps to 3 lines next to the page title, since a flex item with no width
   constraint shrinks to fit before it wraps. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-title-row .lhc-submit-flow {
    flex: 0 1 auto;
    margin: 0 0 2px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-title-row .lhc-submit-flow {
        white-space: normal;
    }
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-product-layout__aside {
    align-self: start;
    margin-top: 48px;
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-product-layout--submit {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The generic ".lhc-product-layout__aside { grid-template-columns:
       repeat(2, minmax(0, 1fr)); }" rule (in the shared, non-type-scoped
       block above) is meant for asides with an even number of cards. This
       page's aside has 3 (two ".lhc-marketplace-aside-card" plus the
       ".lhc-marketplace-preview" listing-preview card), so between 640px and
       1100px wide it tiled 2-up with the 3rd card left stranded alone at
       half width -- its heading and text wrapped one or two words per line.
       Below 640px a separate rule already forces this back to one column,
       which is why the bug only ever showed up at tablet/narrow-desktop
       widths, not on an actual phone. Force one column through the whole
       640-1100px range instead, matching the equivalent fix already applied
       to the Post Listing (housing) page's aside. */
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-product-layout__aside {
        margin-top: 0;
        grid-template-columns: minmax(0, 1fr);
    }
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-product-layout__aside {
    align-self: start;
    margin-top: 48px;
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-product-layout--submit {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Same 3-card stranding fix as Flatmate/Housing above -- Secondhand's
       aside now also has 3 cards (two ".lhc-marketplace-aside-card" plus
       the ".lhc-marketplace-preview" listing-preview card) now that it uses
       render_marketplace_aside() too. */
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-product-layout__aside {
        margin-top: 0;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-title-row {
        align-items: flex-start;
        gap: 6px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-page-title {
        font-size: var(--lhc-type-h2-size);
    }
}
/* TASK 050: compact the Roommates protected-contact row. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact > .lhc-submit-grid {
    display: grid;
    grid-template-columns: minmax(145px, 170px) minmax(220px, 260px) minmax(220px, 260px) minmax(210px, auto);
    gap: 12px;
    align-items: end;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact :is(.lhc-submit-field, .lhc-submit-code-row) {
    min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact textarea {
    min-height: 44px;
    height: 44px;
    max-height: 44px;
    resize: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-code-row {
    display: grid;
    grid-template-columns: minmax(96px, 120px) auto;
    gap: 8px;
    align-items: end;
    min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-code-row :is(.lhc-submit-field, .lhc-submit-code-action) {
    min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-code-row :is(input, .button) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-code-action .button {
    width: auto;
    padding-inline: 16px;
    white-space: nowrap;
}

@media (min-width: 1180px) and (max-width: 1420px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact > .lhc-submit-grid {
        grid-template-columns: minmax(145px, 170px) minmax(220px, 1fr) minmax(210px, 1fr);
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-code-row {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (min-width: 761px) and (max-width: 1179px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact > .lhc-submit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-code-row {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact > .lhc-submit-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-code-row {
        grid-template-columns: minmax(96px, 120px) auto;
        width: 100%;
    }
}

/* TASK 051: denser Roommates basics and contact fields. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--basics textarea {
    min-height: 52px;
    height: 52px;
    max-height: none;
    overflow: auto;
    resize: vertical;
    line-height: 1.45;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact :is(input, select, textarea),
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact .lhc-submit-code-action .button {
    min-width: 0;
}

@media (min-width: 1180px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact > .lhc-submit-grid {
        grid-template-columns: minmax(145px, 170px) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(196px, auto);
        gap: 12px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-code-row {
        grid-column: auto;
        justify-self: stretch;
    }
}

/* Contact section markup was migrated to the shared render_contact_row()
   output (see class-life-hub-submit-forms.php) for BOTH submit types, the
   same way it already was for Housing above -- but only Housing's CSS was
   ever updated to match. Everything from "TASK 050" through the
   min-width:1180px block just above still targets the OLD field markup
   (".lhc-submit-field", ".lhc-submit-code-row", ".lhc-submit-code-action")
   that render_contact_row() no longer outputs for this page, so none of it
   matches anything in the live DOM any more -- it is dead code, left in
   place rather than deleted per this codebase's convention. What actually
   renders now is a single ".lhc-submit-contact-row" div inside
   ".lhc-submit-grid", which the still-live "TASK 050" display:grid /
   grid-template-columns rules above (and their media-query variants) treat
   as a multi-column grid it doesn't populate -- squeezing that one row into
   a single grid track (roughly a quarter to half of the available width,
   depending on breakpoint), which is the main reason "联系方式" reads as
   cramped/misaligned. Neutralize the grid the same way Housing's own
   equivalent rule does, then give ".lhc-submit-contact-row" its own
   dedicated layout below, mirroring Housing's block. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--contact > .lhc-submit-grid {
    display: block;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item label {
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item :is(input, select, textarea) {
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    font-size: 13px;
    box-sizing: border-box;
    /* Match the border/radius/background every other field on this page
       uses (see .lhc-submit-field, which this row deliberately does not
       inherit from since it isn't wrapped in .lhc-submit-field) -- without
       this these controls fall back to the browser's native input/select
       border. */
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    background: #fff;
    color: var(--lhc-roommate-post-blue);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item :is(input, select, textarea):focus {
    border-color: var(--lhc-roommate-post-blue);
    box-shadow: 0 0 0 3px rgba(22, 135, 248, .12);
    outline: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item textarea {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    resize: none;
    padding-top: 9px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--country {
    flex: 0 1 118px;
    min-width: 96px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--country-other {
    flex: 0 1 72px;
    min-width: 62px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--contact-value {
    flex: 1.4 1 110px;
    min-width: 96px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--email {
    flex: 1.2 1 110px;
    min-width: 96px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--code {
    flex: 0.7 1 80px;
    min-width: 70px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--send {
    flex: 0 1 auto;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--send .button {
    min-height: 48px;
    white-space: nowrap;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    /* Same warm secondary-action tone Housing uses for its equivalent send
       button (--lhc-brand-orange), so it reads as a deliberate secondary
       action distinct from this page's blue primary "提交审核" button,
       instead of the browser's native gray 3D button it rendered as with
       no color/shape rule of its own. */
    color: #fff;
    background: var(--lhc-brand-orange);
    border: 1px solid var(--lhc-brand-orange);
    border-radius: var(--lhc-brand-pill-radius);
    box-shadow: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--send .button:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--send .button:focus-visible {
    background: #e88900;
    border-color: #e88900;
}

@media (max-width: 720px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item {
        flex: 1 1 45%;
    }
}

@media (max-width: 560px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row {
        flex-direction: column;
    }
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item,
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-contact-row__item--send {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* "图片与补充说明" (images) dropzone for the Roommates ("flatmate") submit
   page. Every ".lhc-marketplace-upload*" rule in this stylesheet was
   scoped to [data-lhc-submit-type="housing"] only -- Flatmate never had a
   dedicated block at all. That alone would have left the dropzone looking
   plain, but the real breakage went one step further: the PHP template's
   wrapping <div> only added the ".lhc-marketplace-upload" class (the hook
   every rule below, and the upload-preview JS, keys off) for
   "housing"/"secondhand", even though the dropzone markup itself (icon +
   title + "选择图片" button) was already being rendered for "flatmate" too
   -- so the box that did render had no container class for any CSS to
   attach to, and after choosing images nothing appeared at all, because
   submit-preview.js's change-listener was *also* wired to housing's file
   input only. All three gaps (the PHP class, this CSS, and the JS) are
   fixed together as one change -- see class-life-hub-submit-forms.php and
   submit-preview.js. Values below are an original, self-contained ruleset
   for this page (not a line-for-line copy of Housing's -- that block has
   accumulated several superseding duplicate declarations of its own across
   past edits), reusing this page's blue theme in place of Housing's green. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload {
    display: flex;
    position: relative;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--media .lhc-submit-field > label:not(.lhc-marketplace-upload__dropzone),
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--media input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload__dropzone {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 200px;
    padding: 18px;
    border: 1px dashed #a9c9f2;
    border-radius: 8px;
    background: #f6fafe;
    text-align: center;
    cursor: pointer;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload__dropzone:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group--media input[type="file"]:focus-visible + .lhc-marketplace-upload__dropzone {
    border-color: var(--lhc-roommate-post-blue);
    background: #e8f2fe;
    outline: 3px solid rgba(22, 135, 248, .12);
    outline-offset: 2px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload__icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: var(--lhc-roommate-post-blue);
    background: #e3f0fe;
    font-size: 20px;
    font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload__title {
    margin: 0;
    color: var(--lhc-ink);
    font-size: 14px;
    font-weight: 750;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload__action {
    padding: 7px 13px;
    border: 1px solid #bcd8f7;
    border-radius: 999px;
    color: #0b5ed7;
    background: #fff;
    font-size: 13px;
    font-weight: 750;
}

/* Once images are chosen, submit-preview.js appends ".__preview" inside the
   dropzone and adds "has-lhc-upload-preview" to the wrapper -- swap the
   dropzone's icon/title/button prompt for the status text + thumbnail grid
   instead of stacking both. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload.has-lhc-upload-preview .lhc-marketplace-upload__icon,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload.has-lhc-upload-preview .lhc-marketplace-upload__title,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload.has-lhc-upload-preview .lhc-marketplace-upload__action {
    display: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload__preview {
    display: grid;
    gap: 9px;
    width: 100%;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload__status {
    margin: 0;
    color: var(--lhc-roommate-post-blue);
    font-size: 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, 84px);
    justify-content: center;
    gap: 8px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-upload__thumbs img {
    width: 84px;
    height: 84px;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    object-fit: cover;
}

/* TASK 052: coordinated Roommates form and review-step badges. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form {
    counter-reset: lhc-roommate-form-step;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group {
    --lhc-roommate-step-color: var(--lhc-brand-blue);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group:nth-of-type(2) {
    --lhc-roommate-step-color: #18bfa3;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group:nth-of-type(3) {
    --lhc-roommate-step-color: #ff9f43;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group:nth-of-type(4) {
    --lhc-roommate-step-color: #6c8cff;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group:nth-of-type(5) {
    --lhc-roommate-step-color: #2dbe7f;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group > h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #17324d;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group > h3::before {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--lhc-roommate-step-color);
    color: #fff;
    content: counter(lhc-roommate-form-step);
    counter-increment: lhc-roommate-form-step;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-product-layout__aside {
    counter-reset: lhc-roommate-aside-step;
    font-family: inherit;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] :is(.lhc-marketplace-aside-card, .lhc-marketplace-preview) {
    --lhc-roommate-aside-color: var(--lhc-brand-blue);
    font-family: inherit;
    box-shadow: none;
}

/* Only the two sidebar tip cards (review steps, image guidance) continue
   the numbered-badge sequence -- the listing-preview card below them gets
   its own plain pill eyebrow instead (see further down), matching how the
   Housing submit page's equivalent preview card is labelled, so it no
   longer needs to consume a step number. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-aside-card {
    counter-increment: lhc-roommate-aside-step;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-aside-card:nth-child(2) {
    --lhc-roommate-aside-color: #18bfa3;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview {
    --lhc-roommate-aside-color: #ff9f43;
}

/* The Roommates listing-preview card reuses the exact same markup/JS as
   Housing's (#lhc_preview_image + submit-preview.js's updateImage(), which
   just sets .src on an <img data-lhc-preview-photo> it drops into this div)
   -- but only Housing ever got the sizing rules below. Without them the
   wrapper here has no height and the img no object-fit, so choosing a
   photo rendered it at native pixel size and blew the preview card (and
   the whole aside column) out instead of showing a cropped thumbnail. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__image {
    position: relative;
    display: grid;
    min-height: 210px;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--lhc-roommate-aside-color), #ffe3c2 65%, #ff9f43);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__image span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(23, 50, 77, 0.5);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__image img[data-lhc-preview-photo] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__image {
        min-height: 190px;
    }
}

@media (max-width: 560px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__image {
        min-height: 170px;
    }
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-aside-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #17324d;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-aside-card__eyebrow::before {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--lhc-roommate-aside-color);
    color: #fff;
    content: counter(lhc-roommate-aside-step);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

/* Match the Housing listing-preview card's eyebrow pill exactly (same
   shape/size formula), tinted with this card's own accent color instead
   of Housing's green -- this previously shared the numbered-circle
   treatment above with the sidebar tip cards, which is why it rendered as
   "3 房源预览" instead of a plain "房源预览" label like Housing's. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 159, 67, .16);
    color: #b3540c;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] :is(.lhc-marketplace-review-steps, .lhc-marketplace-image-checklist) li,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__body :is(h3, p, strong, span, em) {
    font-family: inherit;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] :is(.lhc-marketplace-review-steps, .lhc-marketplace-image-checklist) li {
    color: #51677e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}

/* Match the Housing listing-preview card's body typography sizes exactly
   (17px/700 title, 13px meta) -- only the price's accent color stays this
   page's own blue. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__body h3 {
    color: #17324d;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__body p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

/* The price row previously had no flex layout of its own here (Housing's
   equivalent ".lhc-marketplace-preview__body > div" rule was never
   mirrored), so "HKD 6,800", "/ 月" and the status badge below just sat as
   plain inline content with no gap -- hence "HKD 6,800/ 月资料已审核"
   running together with no spacing, and the status badge below having no
   room to render as a badge at all. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__body > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__body strong {
    color: var(--lhc-brand-blue);
    font-size: 19px;
    font-weight: 700;
}

/* The "资料已审核" status badge is a universal reviewed/approved
   indicator, not a page accent -- give it the exact same green pill
   Housing uses instead of leaving it unstyled (it previously had no rule
   at all here, so it rendered as plain italic text glued onto the price
   line instead of a badge). */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-marketplace-preview__body em {
    margin-left: auto;
    padding: 4px 7px;
    border-radius: 999px;
    color: #007447;
    background: #e6f6ed;
    font-style: normal;
    font-weight: 750;
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] .lhc-submit-form__group > h3 {
        gap: 8px;
        font-size: 17px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="flatmate"] :is(.lhc-submit-form__group > h3::before, .lhc-marketplace-aside-card__eyebrow::before) {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
}

/* Secondhand's submit page now shares the same trust/live-preview aside
   cards as Housing and Flatmate (render_marketplace_aside() in
   class-life-hub-submit-forms.php) instead of the plain fallback aside --
   this block mirrors the Flatmate block above exactly, just with the blue
   accent this page already uses elsewhere (its own "发布二手" entry card,
   filter/detail buttons) instead of introducing a fourth color. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-product-layout__aside {
    counter-reset: lhc-secondhand-aside-step;
    font-family: inherit;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] :is(.lhc-marketplace-aside-card, .lhc-marketplace-preview) {
    --lhc-secondhand-aside-color: var(--lhc-brand-blue);
    font-family: inherit;
    box-shadow: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-aside-card {
    counter-increment: lhc-secondhand-aside-step;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-aside-card:nth-child(2) {
    --lhc-secondhand-aside-color: #18bfa3;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview {
    --lhc-secondhand-aside-color: #ff9f43;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__image {
    position: relative;
    display: grid;
    min-height: 210px;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--lhc-secondhand-aside-color), #ffe3c2 65%, #ff9f43);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__image span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(23, 50, 77, 0.5);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__image img[data-lhc-preview-photo] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__image {
        min-height: 190px;
    }
}

@media (max-width: 560px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__image {
        min-height: 170px;
    }
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-aside-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #17324d;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-aside-card__eyebrow::before {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--lhc-secondhand-aside-color);
    color: #fff;
    content: counter(lhc-secondhand-aside-step);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 159, 67, .16);
    color: #b3540c;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] :is(.lhc-marketplace-review-steps, .lhc-marketplace-image-checklist) li,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__body :is(h3, p, strong, span, em) {
    font-family: inherit;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] :is(.lhc-marketplace-review-steps, .lhc-marketplace-image-checklist) li {
    position: relative;
    min-height: 24px;
    padding-left: 34px;
    color: #66758a;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.45;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-image-checklist li::before {
    position: absolute;
    left: 0;
    content: "+";
    color: var(--lhc-brand-blue);
    font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__body h3 {
    color: #17324d;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__body p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__body > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__body strong {
    color: var(--lhc-brand-blue);
    font-size: 19px;
    font-weight: 700;
}

/* The "资料已审核" status badge is the same universal reviewed/approved
   green pill Housing and Flatmate use. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-preview__body em {
    margin-left: auto;
    padding: 4px 7px;
    border-radius: 999px;
    color: #007447;
    background: #e6f6ed;
    font-style: normal;
    font-weight: 750;
}

/* Numbered section badges, matching the "发布房源" (Housing) template
   exactly per explicit request -- Secondhand previously had no
   counter-badge system at all and fell back to the shared plain-text
   ".lhc-submit-form__group h3" base rule (18px/700, no circular number),
   which is what read as a font/size mismatch next to Housing's numbered,
   warm-tone-rotating 17px/800 headings. Values below were pulled directly
   from Housing's own actual rendered output (computed styles), not
   re-derived from its several-times-superseded declarations, so this is a
   single, clean, authoritative block for this page -- deliberately not
   layered on top of anything else, to avoid the override-stacking that
   made Housing's own version fragile. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form {
    counter-reset: lhc-secondhand-form-step;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group {
    --lhc-secondhand-step-color: var(--lhc-brand-blue);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group:nth-of-type(2) {
    --lhc-secondhand-step-color: #34c6a3;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group:nth-of-type(3) {
    --lhc-secondhand-step-color: #ff9a3d;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group:nth-of-type(4) {
    --lhc-secondhand-step-color: #6c8cff;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group:nth-of-type(5) {
    --lhc-secondhand-step-color: #22b573;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group > h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #071a33;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group > h3::before {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 999px;
    background: var(--lhc-secondhand-step-color);
    color: #fff;
    content: counter(lhc-secondhand-form-step);
    counter-increment: lhc-secondhand-form-step;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group > h3 {
        gap: 9px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group > h3::before {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 13px;
    }
}

/* Sidebar "审核流程" (review steps) numbered badges -- same gap: Housing's
   list items get a colored circular counter badge per step; Secondhand's
   fell back to a plain browser list-number ("1. 2. 3."). Values again
   match Housing's actual rendered output exactly. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] :is(.lhc-marketplace-review-steps, .lhc-marketplace-image-checklist) {
    display: grid;
    gap: 10px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-review-steps {
    counter-reset: lhc-secondhand-review-step;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-review-steps li {
    position: relative;
    padding-left: 40px;
    color: #66758a;
    font-size: 13px;
    font-weight: 300;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-review-steps li:nth-child(1) {
    --lhc-secondhand-review-color: var(--lhc-brand-blue);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-review-steps li:nth-child(2) {
    --lhc-secondhand-review-color: #34c6a3;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-review-steps li:nth-child(3) {
    --lhc-secondhand-review-color: #ff9a3d;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-review-steps li::before {
    position: absolute;
    left: 0;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: var(--lhc-secondhand-review-color);
    color: #fff;
    content: counter(lhc-secondhand-review-step);
    counter-increment: lhc-secondhand-review-step;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

/* Secondhand's contact section renders the exact same shared
   render_contact_row() markup as Housing/Flatmate (see class-life-hub-
   submit-forms.php), but only those two types ever got matching CSS --
   without it, this page's "联系方式" row fell back to the older
   nth-child-keyed grid rules meant for the pre-refactor markup, squeezing
   the whole row into a single cramped grid track. This block mirrors the
   Flatmate contact-row block above exactly (same layout/sizing), using
   this page's own blue accent for focus/text color. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group--contact > .lhc-submit-grid {
    display: block;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item label {
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item :is(input, select, textarea) {
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    font-size: 13px;
    box-sizing: border-box;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    background: #fff;
    color: var(--lhc-ink);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item :is(input, select, textarea):focus {
    border-color: var(--lhc-brand-blue);
    box-shadow: 0 0 0 3px rgba(22, 135, 248, .12);
    outline: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item textarea {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    resize: none;
    padding-top: 9px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--country {
    flex: 0 1 118px;
    min-width: 96px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--country-other {
    flex: 0 1 72px;
    min-width: 62px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--contact-value {
    flex: 1.4 1 110px;
    min-width: 96px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--email {
    flex: 1.2 1 110px;
    min-width: 96px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--code {
    flex: 0.7 1 80px;
    min-width: 70px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--send {
    flex: 0 1 auto;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--send .button {
    min-height: 48px;
    white-space: nowrap;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--lhc-brand-orange);
    border: 1px solid var(--lhc-brand-orange);
    border-radius: var(--lhc-brand-pill-radius);
    box-shadow: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--send .button:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--send .button:focus-visible {
    background: #e88900;
    border-color: #e88900;
}

@media (max-width: 720px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item {
        flex: 1 1 45%;
    }
}

@media (max-width: 560px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row {
        flex-direction: column;
    }
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item,
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-contact-row__item--send {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* "图片与补充说明" (images) dropzone for the Secondhand submit page. The
   PHP template already adds the ".lhc-marketplace-upload" container class
   for "secondhand" (see class-life-hub-submit-forms.php), and
   submit-preview.js already wires up its file-input change listener for
   this type too -- but every ".lhc-marketplace-upload*" CSS rule in this
   stylesheet was scoped to "housing"/"flatmate" only, so the dropzone
   itself rendered with no defined size/layout at all: no dashed border, no
   minimum height, and (critically) no room for the thumbnail preview grid
   submit-preview.js renders after choosing photos -- which is what made
   the uploaded item photos have "no room to show" in this section. Mirrors
   the Flatmate block above, reusing this page's own blue accent. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload {
    display: flex;
    position: relative;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group--media .lhc-submit-field > label:not(.lhc-marketplace-upload__dropzone),
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group--media input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload__dropzone {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 200px;
    padding: 18px;
    border: 1px dashed #a9c9f2;
    border-radius: 8px;
    background: #f6fafe;
    text-align: center;
    cursor: pointer;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload__dropzone:hover,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-submit-form__group--media input[type="file"]:focus-visible + .lhc-marketplace-upload__dropzone {
    border-color: var(--lhc-brand-blue);
    background: #e8f2fe;
    outline: 3px solid rgba(22, 135, 248, .12);
    outline-offset: 2px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload__icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: var(--lhc-brand-blue);
    background: #e3f0fe;
    font-size: 20px;
    font-weight: 800;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload__title {
    margin: 0;
    color: var(--lhc-ink);
    font-size: 14px;
    font-weight: 750;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload__action {
    padding: 7px 13px;
    border: 1px solid #bcd8f7;
    border-radius: 999px;
    color: #0b5ed7;
    background: #fff;
    font-size: 13px;
    font-weight: 750;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload.has-lhc-upload-preview .lhc-marketplace-upload__icon,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload.has-lhc-upload-preview .lhc-marketplace-upload__title,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload.has-lhc-upload-preview .lhc-marketplace-upload__action {
    display: none;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload__preview {
    display: grid;
    gap: 9px;
    width: 100%;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload__status {
    margin: 0;
    color: var(--lhc-brand-blue);
    font-size: 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, 84px);
    justify-content: center;
    gap: 8px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="secondhand"] .lhc-marketplace-upload__thumbs img {
    width: 84px;
    height: 84px;
    border: 1px solid #d5e0e8;
    border-radius: 6px;
    object-fit: cover;
}

/* TASK 053: Housing submit step badges use large solid color rounds. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] {
    --lhc-housing-step-blue: var(--lhc-brand-blue);
    --lhc-housing-step-mint: #34c6a3;
    --lhc-housing-step-orange: #ff9a3d;
    --lhc-housing-step-indigo: #6c8cff;
    --lhc-housing-step-green: #22b573;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group {
    --lhc-housing-step-color: var(--lhc-housing-step-blue);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group:nth-of-type(2) {
    --lhc-housing-step-color: var(--lhc-housing-step-mint);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group:nth-of-type(3) {
    --lhc-housing-step-color: var(--lhc-housing-step-orange);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group:nth-of-type(4) {
    --lhc-housing-step-color: var(--lhc-housing-step-indigo);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group:nth-of-type(5) {
    --lhc-housing-step-color: var(--lhc-housing-step-green);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > h3 {
    align-items: center;
    gap: 12px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > h3::before {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 999px;
    background: var(--lhc-housing-step-color);
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li:nth-child(1) {
    --lhc-housing-review-step-color: var(--lhc-housing-step-blue);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li:nth-child(2) {
    --lhc-housing-review-step-color: var(--lhc-housing-step-mint);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li:nth-child(3) {
    --lhc-housing-review-step-color: var(--lhc-housing-step-orange);
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li {
    min-height: 44px;
    padding-left: 58px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li::before {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--lhc-housing-review-step-color);
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > h3 {
        gap: 9px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > h3::before,
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li::before {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 14px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li {
        min-height: 34px;
        padding-left: 46px;
    }
}

/* TASK 054: use the smaller Housing step-badge scale. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > h3::before,
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li::before {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 14px;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li {
    min-height: 32px;
    padding-left: 44px;
}

@media (max-width: 760px) {
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-form__group > h3::before,
    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li::before {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 13px;
    }

    body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-marketplace-review-steps li {
        min-height: 28px;
        padding-left: 40px;
    }
}

/* -----------------------------------------------------------------------
   Contact row height fix (appended at the very end of this file on
   purpose): a much older block of contact-section CSS higher up matches
   any input/select/textarea inside .lhc-submit-form__group--contact with
   `height: 56px !important`, and a separate, later block pins four
   specific field IDs (#lhc_contact_method / #lhc_contact_value / #lhc_email
   / #lhc_email_code -- the old 3-slot contact layout's IDs) to
   `height: 48px !important` instead. The phone-country-code and
   "type a code not listed" controls added for the row layout never had
   matching IDs in that second block, so they were only ever caught by the
   first (56px) rule -- while the row's other three controls, reusing
   those old IDs, got the second (48px) rule instead. Same row, two
   different heights, purely by coincidence of which legacy rule happened
   to match which element -- see render_contact_row()'s $contact_value_id /
   $email_id / $email_code_id, which no longer reuse those old IDs, so this
   coincidence can't reoccur going forward.
   This rule settles the row on ONE explicit height (48px, the same
   baseline every other field in this form uses) for all five controls,
   regardless of which of the older rules would otherwise have mattered.
   Same selector shape/specificity as those older `!important` rules, so
   placing it after both in the file is what makes it win the tie. */
body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row :is(input, select, textarea) {
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 8px 10px !important;
  line-height: 1.35 !important;
}

body.lhc-inner-page-shell .lhc-submit-form-wrap[data-lhc-submit-type="housing"] .lhc-submit-contact-row__item--send .button {
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}