/* myusmini 租赁市场：只在 Worker 渲染的市场页面加载（worker/market/shell.json）。
   颜色、字体、圆角一律用 style.css 的变量，深色模式随之切换，这里不另写颜色。
   类名约定见 docs/market/实现规格.md 13.1；SSR 结构不固定的地方，选择器尽量不依赖子元素顺序。 */

/* ---------- 用户内容 ---------- */

/* 用户写的字不进展示字体子集，统一用系统字体；渲染 UGC 的 h1–h4 也要带 .ugc */
.ugc { font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; overflow-wrap: anywhere; }
/* 用户标题长短不一，不做 balance（会把一行半的标题拆成两行短的） */
h1.ugc, h2.ugc, h3.ugc, h4.ugc { font-weight: 600; letter-spacing: 0; word-break: normal; text-wrap: pretty; }
/* 私信、帖子、评价是纯文本：保留换行。标签里不要留模板缩进 */
p.ugc, li.ugc, dd.ugc, blockquote.ugc, div.ugc { white-space: pre-line; }

/* ---------- 页面骨架 ---------- */

/* --mk-filters-w、--mk-layout-gap：列表页筛选栏的宽度和两栏间距（.mk-layout），出租说明页的求租卡片按同样的数对齐结果栏宽度 */
.mk { --mk-measure: 44rem; --mk-filters-w: 264px; --mk-layout-gap: clamp(32px, 4vw, 52px); padding-bottom: clamp(64px, 8vw, 112px); min-height: 60vh; }
/* 同一个元素既是 .wrap 又是 .section 时，.section 的 padding 会把左右留白清零 */
.mk .wrap.section, .mk .wrap.section-tight { padding-left: var(--gutter); padding-right: var(--gutter); }
/* 子导航下面已经有留白，市场页里的 .section 不再叠加站点大版块的上下边距 */
.mk > .section, .mk > :is(section, div, article) > .section:first-child { padding-top: clamp(4px, 1.5vw, 16px); padding-bottom: 0; }
.mk p.is-error { color: var(--danger); }
.mk-muted { color: var(--ink-3); }
/* 市场页里的小节标题比站点营销页小一号（长文 .prose 除外）；更具体的组件规则写在后面会覆盖它 */
.mk :where(:not(.prose)) > h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.35; }
/* 只给没有组件类的普通小节；对话页的 .mk-snapshot 这类带边框的块也是 .wrap 的直接子 section，不能把标题往下推 */
.mk .wrap > section:not([class]) > h2:first-child { margin: clamp(28px, 4vw, 44px) 0 14px; }
/* 没有 .mk-hero 的页面标题（消息、发布、账户等） */
.mk .wrap > h1, .mk-account-main > h1 { margin-bottom: 14px; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.2; }
.mk .wrap > :is(h1, p, .mk-hint, .mk-notice) + :is(ol, ul, form, .mk-empty, .mk-mine) { margin-top: 22px; }
.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; }
.mk-field-error { margin: 0; font-size: .84rem; color: var(--danger); }
.mk-badge { display: inline-flex; align-items: center; padding: .2em .6em; border: 1px solid var(--rule-2); border-radius: 999px; font-size: .78rem; line-height: 1.4; color: var(--ink-2); white-space: nowrap; font-family: var(--sans); }
.mk-hint { margin: 0; font-size: .86rem; line-height: 1.7; color: var(--ink-3); }
/* 发送中、还不能用（比如还没收到注销验证码）的按钮和输入框看得出不能点 */
.mk .btn:disabled, .mk :is(.input, .select, .textarea):disabled { opacity: .55; cursor: not-allowed; }
/* 登录页、注销框的提示区是 role="status"，空着时只缩成 1px 留在读屏树里（不用 display: none 或 hidden），
   否则第一条提示读屏不读；绝对定位也不占表单网格的一行 */
.mk-login [data-login-msg]:empty, .mk [data-delete-msg]:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* 子导航：找设备 · 求租 · 我要出租 | 交流区 · 发布 · 消息 · 登录/我的。窄屏在自身范围内横向滚动 */
.mk-subnav { border-bottom: 1px solid var(--rule); margin-bottom: clamp(28px, 4vw, 48px); }
.mk-subnav > .wrap, .mk-subnav > ul, .mk-subnav > div { display: flex; align-items: stretch; gap: 0 26px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mk-subnav > .wrap::-webkit-scrollbar, .mk-subnav > ul::-webkit-scrollbar, .mk-subnav > div::-webkit-scrollbar { display: none; }
.mk-subnav ul { list-style: none; margin: 0; padding: 0; }
.mk-subnav li { display: flex; flex: none; }
.mk-subnav a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 14px 0 12px; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: .93rem; text-decoration: none; white-space: nowrap; transition: color .2s var(--ease), border-color .2s var(--ease); }
.mk-subnav a:hover { color: var(--ink); }
.mk-subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--clay); }
/* 三个主入口：字大一号、加粗，当前页用陶土色；后面的次要栏目小一号、颜色淡一级，中间一道短竖线 */
.mk-subnav-main { position: relative; display: flex; flex: none; align-items: stretch; gap: 0 26px; padding-right: 26px; }
.mk-subnav-main::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 1.2em; background: var(--rule-2); transform: translateY(-50%); }
.mk-subnav-main a { font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.mk-subnav-main a[aria-current="page"] { color: var(--clay-text); border-bottom-width: 3px; }
.mk-subnav-main ~ a { font-size: .88rem; color: var(--ink-3); }
.mk-subnav-main ~ a:hover, .mk-subnav-main ~ a[aria-current="page"] { color: var(--ink); }
@media (max-width: 640px) { .mk-subnav > .wrap, .mk-subnav > ul, .mk-subnav > div, .mk-subnav-main { gap: 0 20px; } .mk-subnav-main { padding-right: 20px; } }
/* 900px 以下头部一直显示“登录”或“消息 · 我的”（.nav-account），子导航不再重复这几项，375px 宽放得下一行，不出现被屏幕边切掉半个字的链接 */
@media (max-width: 900px) { .mk-subnav .mk-subnav-acct { display: none; } }
/* 320–359px 再收紧间距，最后的“发布”也放得下（16px 时 320px 宽仍切掉“发布”的边） */
@media (max-width: 359px) { .mk-subnav > .wrap, .mk-subnav > ul, .mk-subnav > div, .mk-subnav-main { gap: 0 12px; } .mk-subnav-main { padding-right: 12px; } }

/* 栏目页头：标题 + 一句说明 + 主要动作。比站点 .page-hero 紧凑，筛选和结果要尽快露出来 */
.mk-hero { padding: 0 0 clamp(22px, 3vw, 36px); }
.mk-hero > :not(.wrap), .mk-hero > .wrap > * { margin: 0; }
/* 页头本身是 .wrap 或里面包一层 .wrap 都行；不能让外层 grid 把 .wrap 缩成内容宽度 */
.mk-hero:not(:has(> .wrap)), .mk-hero > .wrap { display: grid; gap: 12px; justify-items: start; }
.mk-hero h1 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.16; }
.mk-hero p { max-width: 40em; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.8; color: var(--ink-2); }
.mk-hero .mk-actions { margin-top: 8px; }
/* 页头里一行次要入口（/market 的指南链接和“有 Mac 想出租？”、/market/wanted 的“有 Mac 想出租？”）：比副标题小一号、淡一级 */
.mk-hero .mk-hero-aside { font-size: .93rem; line-height: 1.7; color: var(--ink-3); }
/* 给租客和给房东的两句各是一个 span：宽屏同一行，放不下时第二句整句换到下一行，不在句子中间断开 */
.mk-hero-aside > span { display: inline-block; }
/* 页头里达到门槛才出现的一行真实数字（/market、出租说明页）：比次要入口再小一号，数字等宽 */
.mk-hero .mk-stats { font-size: .86rem; line-height: 1.6; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 页头里的状态提示（出租说明页）：页头是 justify-items: start 的网格，提示默认缩到文字宽度，几条叠在一起宽窄不一；
   统一拉满到和副标题一样的最大宽度 */
.mk-hero .mk-notice { justify-self: stretch; max-width: 40em; }

/* ---------- 头部：登录 / 我的 / 未读 ---------- */

.site-header .nav-links { margin-left: auto; }
.nav-account { display: flex; align-items: center; gap: 18px; font-size: .95rem; }
.nav-account:empty { display: none; }
.nav-account a:not(.btn) { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color .2s var(--ease); }
.nav-account a:not(.btn):hover, .nav-account a[aria-current="page"] { color: var(--ink); }

/* 未读数：文字是数字，0 时带 hidden */
.mk-unread { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--clay); color: var(--on-clay); font: 600 .7rem/1 var(--sans); font-variant-numeric: tabular-nums; }

/* 市场页头部多了账户入口，窄一点的桌面宽度把间距收紧，避免挤出一行 */
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-links { gap: 22px; }
}
@media (max-width: 900px) {
  .site-header .nav { gap: 14px; }
  .nav-account { margin-left: auto; gap: 12px; font-size: .9rem; }
}
/* 320–359px 登录后一行要放品牌、消息和未读数、我的、菜单按钮：再收紧间距和字号（未读数最多写 99+，见 market.js），
   否则“消息”压到品牌字上、菜单按钮被挤扁 */
@media (max-width: 359px) {
  .site-header .nav { gap: 6px; }
  .nav-account { gap: 8px; font-size: .84rem; }
  .nav-account a:not(.btn) { gap: 3px; }
  .nav-account .mk-unread { min-width: 16px; height: 16px; padding: 0 3px; font-size: .66rem; }
}

/* ---------- 提示 ---------- */

.mk-notice { margin: 0 0 1.2em; padding: 14px 18px; border: 1px solid var(--rule); border-left: 3px solid var(--rule-2); border-radius: var(--r-sm); background: var(--card); color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
.mk-notice.is-warn { border-color: var(--clay-soft); border-left-color: var(--clay); background: var(--clay-soft); color: var(--ink); }
/* 浅陶土底上，陶土色链接和三级灰字都不到 4.5:1：链接用正文色加下划线，说明文字用二级灰 */
.mk-notice.is-warn a:not(.btn) { color: var(--ink); text-decoration: underline; }
.mk-notice.is-warn :is(.mk-hint, .mk-muted) { color: var(--ink-2); }
.mk-notice > :last-child { margin-bottom: 0; }
.mk-notice strong { color: var(--ink); }
.mk-notice .btn { margin-top: 10px; }
/* 待办横幅（shell.js，规格 6.9）：子导航下面、正文上面，消息页以外的市场页才有。它是 .wrap 里唯一的段落，
   站点的 p:last-child 会去掉下边距，这里补回和正文之间的距离；“去处理”不折行 */
.mk .mk-todo { margin: 0 0 clamp(18px, 2.6vw, 28px); }
.mk-todo a { font-weight: 600; white-space: nowrap; }

.mk-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 250; width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--r-sm); background: var(--ink); color: var(--paper); box-shadow: var(--shadow); font-size: .92rem; line-height: 1.6; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .25s var(--ease), transform .4s var(--ease); }
.mk-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.mk-toast.is-error { background: var(--danger); color: var(--paper); }

/* ---------- 列表页：筛选 + 结果 ---------- */

.mk-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 901px) {
  .mk-layout { grid-template-columns: var(--mk-filters-w) minmax(0, 1fr); gap: var(--mk-layout-gap); }
}

.mk-filters { display: grid; gap: 16px; align-content: start; min-width: 0; margin: 0; }
.mk-filters form, form.mk-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; }
.mk-filters h2, .mk-filters h3 { font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .08em; color: var(--ink-3); }
.mk-filters .field { gap: 6px; }
.mk-filters .field > label, .mk-filters .field > legend { font-size: .86rem; color: var(--ink-2); }
/* 输入框字号不能小于 16px，否则 iOS 聚焦时会放大页面 */
.mk-filters .input, .mk-filters .select { padding: 10px 12px; font-size: 1rem; border-radius: 8px; }
.mk-filters .select { padding-right: 34px; background-position: right 12px center; }
.mk-filters .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-filters fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mk-filters legend { margin-bottom: 6px; padding: 0; font-size: .86rem; font-weight: 500; color: var(--ink-2); }
.mk-filters .mk-actions a { font-size: .88rem; }
.mk-filters .btn { justify-self: start; }
.mk-filters details { border-top: 1px solid var(--rule); padding-top: 10px; }
.mk-filters details > summary { cursor: pointer; padding: 4px 0; font-size: .9rem; color: var(--ink-2); list-style-position: inside; }
.mk-filters details[open] > summary { margin-bottom: 12px; }
.mk-filters details > :not(summary) + :not(summary) { margin-top: 14px; }
/* 窄屏筛选项两两并排，避免把结果压到一屏以外；搜索框、按钮、分组占整行 */
/* 筛选项多时，窄屏默认只露出第一项、搜索按钮和“更多筛选”（后两个是 market.js 加的按钮）。
   窄屏改了筛选不自动提交，提交按钮（“应用筛选”）是唯一的入口，放宽到整行 */
.mk-filters-toggle, .mk-filters-search { display: none; }
@media (max-width: 900px) {
  .mk-filters-toggle { display: inline-flex; justify-self: start; }
  form[data-mk-filters].is-collapsed > :not([data-mk-keep], .mk-filters-toggle, .mk-filters-search) { display: none; }
  form[data-mk-filters] .mk-actions [type="submit"] { flex: 1 1 auto; }
  .mk-filters form, form.mk-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mk-filters form > :not(.field), form.mk-filters > :not(.field),
  .mk-filters .field:has(input[type="search"], input[name="q"], .field-row, .mk-choice-grid) { grid-column: 1 / -1; }
  /* 收起时“应用筛选”也藏起来了：关键词和搜索按钮（market.js 加的）同一行，按钮和输入框底边对齐、等高
     （输入框是 1.8 倍行高加上下 10px 内边距和 1px 边框）。和上一条优先级相同，要写在它后面 */
  form[data-mk-filters].is-collapsed { grid-template-columns: minmax(0, 1fr) auto; }
  form[data-mk-filters].is-collapsed > [data-mk-keep] { grid-column: 1; }
  form[data-mk-filters].is-collapsed > .mk-filters-search { display: inline-flex; grid-column: 2; align-self: end; min-height: calc(1.8rem + 22px); }
}
/* 只有整块筛选放得下一屏时才固定；矮屏固定会把“排序”和“筛选”按钮藏进内部滚动 */
@media (min-width: 901px) and (min-height: 1180px) {
  .mk-filters { position: sticky; top: 92px; max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px 4px 2px 2px; margin: -2px -4px -2px -2px; }
}

.mk-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; margin: 0; }
.mk-results > ul, .mk-results > ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mk-results > p, .mk-results > h2 { margin: 0; }
.mk-results > h2 { font-size: 1.3rem; }
.mk-wanted-history { display: grid; gap: 14px; margin-top: 18px; padding-top: 24px; border-top: 1px solid var(--rule); }
.mk-wanted-history > h2 { margin: 0; font-size: 1.3rem; }
.mk-wanted-history > p { margin: 0; }
.mk-wanted-history > ul { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }

.mk-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 0; font-size: .92rem; }
.mk-pagination > ul, .mk-pagination > ol { display: contents; list-style: none; }
.mk-pagination li { display: contents; }
.mk-pagination a:not(.btn), .mk-pagination span:not(.mk-muted), .mk-pagination strong { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--ink-2); text-decoration: none; font-variant-numeric: tabular-nums; transition: border-color .2s var(--ease), color .2s var(--ease); }
.mk-pagination a:not(.btn):hover { border-color: var(--ink); color: var(--ink); }
.mk-pagination .mk-muted { font-size: .88rem; font-variant-numeric: tabular-nums; }
.mk-pagination [aria-current="page"], .mk-pagination strong { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mk-pagination [aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* 空状态：列表里是虚线框；整页（.section）时只是一段说明 */
/* 只清上下外边距：404/410/500 页的 <section class="wrap section mk-empty"> 要留着 .wrap 的左右 auto 居中 */
.mk-empty { display: grid; gap: 14px; justify-items: start; margin-block: 0; }
.mk-empty > * { margin: 0; }
.mk-empty:not(.section) { padding: clamp(22px, 4vw, 36px); border: 1px dashed var(--rule-2); border-radius: var(--r); background: color-mix(in srgb, var(--card) 60%, transparent); }
.mk-empty.section { padding-top: clamp(24px, 4vw, 48px); }
.mk-empty.section > * { max-width: 40rem; }
.mk-empty h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.mk-empty h2 { font-size: 1.35rem; }
.mk-empty h3 { font-size: 1.12rem; }
.mk-empty p { max-width: 36em; }
.mk-alternatives { width: 100%; margin-block: 4px; }
.mk-alternatives h3 { margin: 0 0 6px; }
.mk-alternatives p { margin: 0 0 14px; font-size: .88rem; }
.mk-alternatives ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mk-alternatives a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--card); text-decoration: none; }
.mk-alternatives a:hover { border-color: var(--clay); }
.mk-alternatives a span:last-child { color: var(--clay); white-space: nowrap; }

/* ---------- 卡片（出租方案、求租，browse / host / account 共用） ---------- */

/* 卡片的父元素是查询容器：同一张卡在一栏列表、两栏网格、账户页里各自排版 */
.mk :where(*):has(> .mk-card) { container-type: inline-size; }
.mk-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: clamp(18px, 2.4vw, 24px); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); transition: border-color .3s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.mk-card > * { margin: 0; min-width: 0; }
.mk-card:has(.mk-card-title a):hover { border-color: var(--rule-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.mk-card-title { font-size: 1.1rem; line-height: 1.45; color: var(--ink); }
.mk-card-title a { color: inherit; text-decoration: none; }
.mk-card-title a:hover { color: var(--clay-text); }
/* 标题链接铺满整张卡片；卡片里的其他链接和按钮浮在上面，仍然可以单独点 */
.mk-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
/* 焦点框画在整张卡上；不支持 :has 的浏览器保留链接自己的焦点框 */
@supports selector(:has(*)) {
  .mk-card-title a:focus-visible { outline: none; }
  .mk-card:has(.mk-card-title a:focus-visible) { outline: 2px solid var(--clay); outline-offset: 3px; }
}
.mk-card :is(a, button, summary, input, select, label):not(.mk-card-title a) { position: relative; z-index: 1; }
.mk-card-meta { font-size: .88rem; line-height: 1.7; color: var(--ink-3); }
/* 元信息是“文字 · 文字 标签”这样的行内内容，标签和文字之间留一点空 */
:is(.mk-card-meta, .mk-post-meta, .mk-card-foot, .mk-card-terms) .mk-tag { margin: 0 6px; }
.mk-card-meta + .mk-card-meta { color: var(--ink-2); }
.mk-card-price { font-family: var(--display); font-size: clamp(1.15rem, 1rem + .6vw, 1.32rem); text-wrap: balance; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.mk-card-price :is(small, span, .mk-muted) { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); }
.mk-card-terms { font-size: .86rem; line-height: 1.6; color: var(--ink-2); }
/* 房东 · N 天前确认 ………… 状态标签（标签浮在右边，文字照常换行） */
.mk-card-foot { display: flow-root; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--rule); font-size: .86rem; color: var(--ink-3); }
.mk-card-foot a { color: var(--ink-2); }
.mk-card-foot > :last-child:not(:first-child) { float: right; margin: 0 0 0 12px; }
.mk-card .mk-tag { justify-self: start; }
.mk-card .mk-actions { margin-top: 4px; }
/* 宽一点时价格放右上角，信息在左边一列，便于上下对比 */
@container (min-width: 520px) {
  /* 价格列按内容宽度，最多占三分之一，长的“按季预付…（首期…）”在列内换行 */
  .mk-card:has(> .mk-card-price) { grid-template-columns: minmax(0, 1fr) fit-content(34%); column-gap: 28px; }
  .mk-card:has(> .mk-card-price) > * { grid-column: 1; }
  .mk-card > .mk-card-price { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: start; text-align: right; }
  .mk-card > .mk-card-foot, .mk-card > .mk-actions { grid-column: 1 / -1; }
}

/* myusmini 自营：单独一张卡，标明商业关系，不混进第三方结果 */
.mk-official { position: relative; display: grid; gap: 10px; margin: 0; padding: clamp(18px, 2.4vw, 26px); border: 1px dashed var(--clay); border-radius: var(--r); background: var(--paper-2); }
.mk-official > * { margin: 0; }
.mk-official :is(h2, h3) { font-size: 1.15rem; line-height: 1.45; }
.mk-official p { font-size: .92rem; color: var(--ink-2); }
.mk-official .mk-badge { justify-self: start; border-color: var(--clay); color: var(--clay-text); }

/* ---------- 状态标签 ---------- */

/* 文字统一用正文色，状态靠前面的小圆点区分：浅色深色都清楚，也不只靠颜色传达 */
.mk-tag { display: inline-flex; align-items: center; gap: 6px; padding: .22em .7em; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 500 .78rem/1.4 var(--sans); white-space: nowrap; vertical-align: middle; }
.mk-tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.mk-tag.is-available { border-color: color-mix(in srgb, var(--olive) 55%, var(--rule-2)); }
.mk-tag.is-available::before { background: var(--olive); }
.mk-tag.is-from::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--olive); }
.mk-tag.is-full::before { background: var(--sand); box-shadow: inset 0 0 0 1px var(--desk); }
.mk-tag.is-paused::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.mk-tag.is-expired { color: var(--ink-3); }
.mk-tag.is-expired::before { background: var(--rule-2); }
.mk-tag.is-pending::before { background: var(--sky); box-shadow: inset 0 0 0 1px var(--night); }
.mk-tag.is-updating { border-color: var(--clay-soft); background: var(--clay-soft); color: var(--ink); }
.mk-tag.is-updating::before { background: var(--clay); }
.mk-tag.is-removed { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.mk-tag.is-removed::before { background: var(--danger); }
.mk-tag.is-closed { color: var(--ink-3); }
.mk-tag.is-closed::before { background: var(--ink-3); }
/* “房东自述”：说明性的小标，不是状态 */
.mk-tag.is-self { padding: .1em .55em; border-style: dashed; background: transparent; color: var(--ink-3); font-weight: 400; }
.mk-tag.is-self::before { display: none; }

/* ---------- 详情页 ---------- */

.mk-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.mk-detail-main { display: grid; gap: clamp(28px, 3.5vw, 40px); min-width: 0; }
.mk-detail-main > * { margin: 0; }
.mk-detail-main > section { display: grid; gap: 12px; min-width: 0; }
.mk-detail-main > section > * { margin: 0; }
.mk-detail-main h1 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.3; }
.mk-detail-main h2 { font-size: 1.3rem; line-height: 1.4; }
.mk-detail-main header { display: grid; gap: 10px; }
.mk-detail-main header > * { margin: 0; }
.mk-detail-side { display: grid; gap: 16px; min-width: 0; }
.mk-detail-side > * { margin: 0; }
@media (min-width: 901px) {
  .mk-detail { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: clamp(32px, 4.5vw, 64px); }
}
/* 费用和联系区只在整列放得下一屏时固定（带询问表单时侧栏约 1430px 高）；
   笔记本的高度固定了会把“发送询问”藏进侧栏内部的滚动，所以矮屏跟着页面滚动 */
@media (min-width: 901px) and (min-height: 1600px) {
  .mk-detail-side { position: sticky; top: 92px; max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 3px; margin: -3px; }
}

/* 规格表：dl 里 dt/dd 直接并列或包在 div 里都行。
   标签列按内容宽度但最多占 40%（fit-content）：发布向导的确认页会把整句勾选项当标签，max-content 会把值那一列挤成 0、文字溢出屏幕 */
.mk-spec { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--rule); font-size: .95rem; }
.mk-spec > div { display: contents; }
.mk-spec dt, .mk-spec dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--rule); line-height: 1.65; }
.mk-spec dt { min-width: 5.5em; padding-right: 20px; color: var(--ink-3); font-size: .9rem; overflow-wrap: anywhere; }
.mk-spec dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.mk-spec dd .mk-tag { margin-left: 4px; }
@media (min-width: 1100px) {
  /* 宽屏两组并排，规格一屏看完 */
  .mk-detail-main .mk-spec.is-wide { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 24px; }
}

/* 费用要点：最短租期、首期、押金、额外费用，放在联系区旁边 */
.mk-terms { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; padding: 6px 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); font-size: .93rem; }
.mk-terms > div { display: contents; }
.mk-terms :is(dt, dd) { margin: 0; padding: 10px 0; border-bottom: 1px dashed var(--rule); }
.mk-terms dt { color: var(--ink-3); padding-right: 16px; }
.mk-terms dd { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.mk-terms > div:last-child > *, .mk-terms > dt:nth-last-child(2), .mk-terms > dd:last-child { border-bottom: 0; }
ul.mk-terms, ol.mk-terms { grid-template-columns: minmax(0, 1fr); list-style: none; }
.mk-terms dl > div:last-child > *, .mk-terms dl > :is(dt, dd):nth-last-child(-n + 2) { border-bottom: 0; }
.mk-terms > dl.mk-spec { border-top: 1px solid var(--rule); }
.mk-terms > li { padding: 10px 0; border-bottom: 1px dashed var(--rule); color: var(--ink); }
.mk-terms > li:last-child { border-bottom: 0; }
.mk-terms > dl { grid-column: 1 / -1; display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.mk-terms > dl > div { display: contents; }
.mk-terms .mk-card-price { padding: 12px 0 8px; grid-column: 1 / -1; font-size: 1.6rem; }
.mk-terms > :is(p, h2, h3) { grid-column: 1 / -1; margin: 0; padding: 12px 0 4px; }

.mk-host { display: grid; gap: 8px; margin: 0; padding: 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); font-size: .93rem; }
.mk-host > * { margin: 0; }
.mk-host :is(h2, h3) { font-size: 1.12rem; line-height: 1.4; }
.mk-host :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.mk-host :is(h2, h3) a:hover { color: var(--clay-text); }
.mk-host dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 4px 0 0; }
.mk-host dl > div { display: contents; }
.mk-host dt { color: var(--ink-3); }
.mk-host dd { margin: 0; color: var(--ink); }
.mk-host ul { margin: 0; padding-left: 1.2em; }

.mk-contact { display: grid; gap: 14px; margin: 0; padding: 20px; background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r); box-shadow: var(--shadow); }
.mk-contact > * { margin: 0; }
.mk-contact :is(h2, h3) { font-size: 1.15rem; line-height: 1.4; }
.mk-contact form { display: grid; gap: 14px; margin: 0; }
.mk-contact .textarea { min-height: 112px; }
.mk-contact .field-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mk-contact :is(.btn-primary, [type="submit"]) { width: 100%; }
.mk-contact > .btn { justify-self: stretch; }
/* 联系区开头重复一行要点（方案：价格、首期、押金、额外费用、最短租期；求租：预算和时间）：窄屏底部按钮跳过来时，费用就在表单旁边 */
.mk-contact .mk-card-terms { padding-bottom: 12px; border-bottom: 1px dashed var(--rule); font-variant-numeric: tabular-nums; text-wrap: pretty; }
/* 窄屏详情页底部的“联系房东”跳转按钮（market.js 生成） */
.mk-jump { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 40; box-shadow: var(--shadow); }
@media (min-width: 901px) { .mk-jump { display: none; } }

/* ---------- 表单 ---------- */

.mk-form { display: grid; gap: 22px; min-width: 0; margin: 0; }
.mk-form > * { margin: 0; }
.mk-form h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.2; }
.mk-form h2 { font-size: 1.4rem; line-height: 1.35; }
.mk-form form, form.mk-form form { display: grid; gap: 18px; margin: 0; }
.mk-form fieldset, .mk fieldset.field-row { min-width: 0; margin: 0; padding: 0; border: 0; }
.field fieldset > legend { margin-bottom: 8px; padding: 0; font-size: .95rem; font-weight: 500; color: var(--ink); }
.field[role="radiogroup"] > span:first-child { font-size: .95rem; font-weight: 500; color: var(--ink); }
.mk-form .field { gap: 8px; }
/* 长表单不铺满宽屏，一行太长不好读；发布页表单上面的标题、说明和提示跟表单同宽 */
.mk form[data-mk-publish], .mk-account-main .mk-form, .mk .wrap:has(> form[data-mk-publish]) > * { max-width: 820px; }
.mk-form .field > .mk-hint, .mk-form .field > .hint { margin-top: -2px; }
.mk-form .input[type="date"] { min-height: 50px; }
.mk-form .textarea { min-height: 120px; }
/* 询问表单“希望什么时候开始”：选“选一个日期”时才显示下面的日期框（data-show-if） */
.mk-start-date { display: grid; gap: 6px; }
.mk-start-date > label { font-size: .95rem; font-weight: 500; color: var(--ink); }
/* 发布表单服务约定四项下面的“使用推荐写法”（market.js 把模板填进文本框） */
.mk-form .field > [data-template-for] { justify-self: start; }
.field.invalid .mk-field-error:not([hidden]) { animation: rise .35s var(--ease) both; }

/* 字数提示（JS 生成，快到上限时出现） */
.mk-count { margin: -2px 0 0; font-size: .78rem; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.mk-count.is-over { color: var(--danger); }

/* 登录页：窄卡片 */
.mk-login > .mk-form, .mk-login .mk-form[data-mk-login] { max-width: 480px; padding: clamp(24px, 4vw, 40px); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); }
.mk-login [data-turnstile] { min-height: 65px; }
.mk-login [data-turnstile]:empty { min-height: 0; }
.mk-login .mk-form .btn-primary { width: 100%; }

.mk-login.section { padding-top: clamp(8px, 2vw, 24px); }

/* 分步表单的进度：当前一步带名称，其他只显示序号（窄屏不会挤成两行） */
.mk-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: mk-step; overflow-x: auto; scrollbar-width: none; }
.mk-steps::-webkit-scrollbar { display: none; }
.mk-steps li { counter-increment: mk-step; position: relative; flex: 1 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 2px 0; border-top: 2px solid var(--rule); font-size: .86rem; line-height: 1.3; color: var(--ink-3); white-space: nowrap; transition: border-color .3s var(--ease), color .3s var(--ease); }
.mk-steps li::before { content: counter(mk-step); flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--rule-2); border-radius: 50%; background: var(--card); color: var(--ink-3); font: 500 .74rem/1 var(--mono); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.mk-steps li.is-done { border-top-color: var(--ink-3); color: var(--ink-2); }
.mk-steps li.is-done::before { border-color: var(--ink-3); background: var(--ink-3); color: var(--paper); }
.mk-steps li[aria-current="step"] { border-top-color: var(--clay); color: var(--ink); }
.mk-steps li[aria-current="step"]::before { border-color: var(--clay); background: var(--clay); color: var(--on-clay); }
/* 还有错误没改的步骤：序号换成红底“!”，不只靠颜色区分（读屏另有“有错误”的文字）；
   当前步骤保留自己的顶线和文字颜色，免得和其他出错的步骤分不清 */
.mk-steps li.has-error:not([aria-current="step"]) { border-top-color: var(--danger); color: var(--danger); }
.mk-steps li.has-error::before { content: "!"; content: "!" / ""; border-color: var(--danger); background: var(--danger); color: var(--paper); }
.mk-steps .mk-step-jump { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mk-steps .mk-step-jump:hover { color: var(--ink); }
/* market.js 生成的跳转按钮：点击区域铺满整个步骤（序号圆点 + 名称），窄屏名称藏起来时也点得到 */
.mk-steps .mk-step-jump::after { content: ""; position: absolute; inset: 0; }
@supports selector(:has(*)) {
  .mk-steps .mk-step-jump:focus-visible { outline: none; }
  .mk-steps li:has(> .mk-step-jump:focus-visible) { outline: 2px solid var(--clay); outline-offset: -2px; }
}
/* 窄屏只给当前步骤留名称，其他步骤只露序号；名称交给读屏（不能把 li 的字号设成 0，按钮会跟着缩成 0×0） */
@media (max-width: 640px) {
  .mk-steps li { min-width: 44px; min-height: 44px; justify-content: center; }
  .mk-steps li:not([aria-current="step"]) { flex: none; gap: 0; }
  .mk-steps li:not([aria-current="step"]) .mk-step-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .mk-steps li[aria-current="step"] { flex: 1 1 auto; justify-content: flex-start; }
}

.mk-step { display: grid; gap: 22px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mk-step > * { margin: 0; }
.mk-step > :is(h2, legend) { padding: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.35; color: var(--ink); }
.mk-step-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.mk-step-nav :is([data-step-next], [data-op="submit"]) { margin-left: auto; }
.mk-step-nav [data-step-next] + [data-op="submit"] { margin-left: 0; }
@media (max-width: 520px) {
  .mk-step-nav .btn { flex: 1 1 auto; }
  .mk-step-nav :is([data-step-next], [data-op="submit"]) { flex-basis: 100%; order: -1; margin-left: 0; }
}

/* 复选框说明：文字里可以夹链接，不用 grid 以免被拆成几格。
   单个复选框的 label 是 .field 的直接子元素，站点的 .field > label（0,1,1）会把 padding 清零，复选框就盖住第一个字；
   所以这里同时写 .field > .mk-check（0,2,0）压过它。多选、单选块在 .mk-choice-grid 里，不受影响 */
.mk-check, .field > .mk-check { position: relative; display: block; padding-left: 28px; font-size: .93rem; font-weight: 400; line-height: 1.7; color: var(--ink-2); cursor: pointer; }
.mk-check input { position: absolute; left: 0; top: .28em; width: 18px; height: 18px; margin: 0; accent-color: var(--clay); }
.mk-check + .mk-check { margin-top: 10px; }

/* 多选、单选做成可点的小块 */
.mk-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr)); gap: 8px; margin: 0; }
.mk-choice-grid label { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; margin: 0; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font-size: .93rem; line-height: 1.4; cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.mk-choice-grid label:hover { border-color: var(--ink-3); }
.mk-choice-grid label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mk-choice-grid label:has(input:focus-visible) { outline: 2px solid var(--clay); outline-offset: 2px; }
.mk-choice-grid input { position: static; flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--clay); }
.mk-choice-grid .mk-check + .mk-check { margin-top: 0; }

/* ---------- 消息 ---------- */

.mk-inbox { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.mk-inbox-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 16px 14px; border-bottom: 1px solid var(--rule); color: var(--ink-2); text-decoration: none; transition: background-color .2s var(--ease); }
.mk-inbox-item:has(> a:only-child) { display: block; padding: 0; }
.mk-inbox-item > a:only-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 16px 14px; color: inherit; text-decoration: none; }
:is(.mk-inbox-item, .mk-inbox-item > a:only-child) > * { margin: 0; min-width: 0; }
:is(.mk-inbox-item, .mk-inbox-item > a:only-child) > :first-child { flex: 1 1 55%; color: var(--ink); font-size: 1rem; }
:is(.mk-inbox-item, .mk-inbox-item > a:only-child) > time { margin-left: auto; font-size: .84rem; color: var(--ink-3); white-space: nowrap; }
.mk-inbox-item:hover { background: color-mix(in srgb, var(--card) 70%, transparent); }
a.mk-inbox-item:hover, .mk-inbox-item a:hover { color: inherit; }
.mk-inbox-item a { color: var(--ink); text-decoration: none; }
.mk-inbox-item.is-unread { background: color-mix(in srgb, var(--clay-soft) 45%, transparent); }
.mk-inbox-item.is-unread :is(a, :first-child) { font-weight: 600; }
.mk-inbox-item:is(.is-unread, .is-todo)::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--clay); }
.mk-inbox-item .mk-muted, .mk-inbox-item small { font-size: .86rem; }
.mk-inbox-item > a:has(> .mk-card-title) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; }
.mk-inbox-item > a > .mk-card-title { grid-column: 1; grid-row: 1; font-size: 1rem; line-height: 1.5; }
.mk-inbox-item > a > .mk-card-meta { grid-column: 1 / -1; grid-row: 2; font-size: .86rem; }
.mk-inbox-item > a > .mk-card-foot { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; font-size: .84rem; color: var(--ink-3); white-space: nowrap; }
/* 待你回复、待你确认成交（规格 6.9）：这些会话排在收件箱最前面，标签单独占一行，窄屏也不挤掉时间 */
.mk-inbox-item > a > .mk-inbox-todo { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mk-tag.is-todo { border-color: var(--clay-soft); background: var(--clay-soft); color: var(--ink); }
.mk-tag.is-todo::before { background: var(--clay); }

/* 对话页是 <section class="wrap section mk-thread">：只清上下外边距，保留 .wrap 的左右居中 */
.mk-thread { display: grid; gap: 18px; min-width: 0; margin-block: 0; }
.mk-thread > * { margin: 0; }
/* 对话页的说明、提示、快照和成交面板按阅读宽度排；消息列表和输入框仍然占满 */
.mk-thread > :is(.mk-hint, .mk-notice, .mk-snapshot, .mk-deal) { max-width: var(--mk-measure); }
.mk-thread-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 20px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.mk-thread-head > * { margin: 0; min-width: 0; }
.mk-thread-head > .mk-actions { margin-top: 6px; gap: 8px; }
@media (min-width: 641px) {
  .mk-thread-head { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-thread-head > * { grid-column: 1; }
  .mk-thread-head > .mk-actions { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; }
}
.mk-thread-head :is(h1, h2) { font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.3; }
.mk-thread-head p { font-size: .9rem; color: var(--ink-3); }

.mk-msgs { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 6px 0; list-style: none; }
.mk-msg { position: relative; align-self: flex-start; display: grid; gap: 4px; max-width: min(80%, 38rem); margin: 0; padding: 10px 14px 8px; background: var(--card); border: 1px solid var(--rule); border-radius: 16px 16px 16px 4px; animation: rise .35s var(--ease) both; }
.mk-msg > * { margin: 0; }
.mk-msg p { color: var(--ink); line-height: 1.7; }
.mk-msg time { justify-self: end; font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mk-msg.is-mine { align-self: flex-end; background: var(--clay-soft); border-color: transparent; border-radius: 16px 16px 4px 16px; }
/* 浅陶土底上三级灰只有 4.3:1，自己消息里的时间和“已隐藏”提示用二级灰 */
.mk-msg.is-mine time, .mk-msg.is-mine.is-hidden p { color: var(--ink-2); }
/* 房东的快捷回复（固定文案，规格 6.3）：仍在发送者那一侧，虚线边框加“快捷回复”标签，和自己打的字区分开 */
.mk-msg.is-quick { border-style: dashed; border-color: var(--rule-2); }
.mk-msg-label { font-size: .74rem; font-weight: 500; color: var(--ink-2); }
.mk-msg.is-system { align-self: center; max-width: min(94%, 40rem); padding: 8px 14px; background: transparent; border: 1px dashed var(--rule-2); border-radius: var(--r-sm); text-align: center; }
.mk-msg.is-system p { font-size: .86rem; color: var(--ink-2); }
.mk-msg.is-system time { justify-self: center; }
.mk-msg.is-hidden p { color: var(--ink-3); font-style: italic; }
.mk-msg :is(button, .btn) { justify-self: start; }
/* 别人消息上的“举报”：小号灰色文字链接，和时间同一行（左边举报、右边时间） */
.mk-report-link { display: inline-flex; align-items: center; min-height: 24px; margin: 0; padding: 0 2px; border: 0; background: none; color: var(--ink-3); font: .76rem/1.4 var(--sans); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 2px; cursor: pointer; transition: color .2s var(--ease); }
.mk-report-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.mk-msg:has(> .mk-report-link) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
.mk-msg:has(> .mk-report-link) > p { grid-column: 1 / -1; }
.mk-msg:has(> .mk-report-link) > time { grid-row: 2; grid-column: 2; align-self: center; }
.mk-msg:has(> .mk-report-link) > .mk-report-link { grid-row: 2; grid-column: 1; }
@media (max-width: 640px) { .mk-msg { max-width: 90%; } }

.mk-composer { display: grid; gap: 10px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--rule); background: var(--paper); }
.mk-composer > * { margin: 0; }
.mk-composer .textarea { min-height: 76px; max-height: 40vh; }
.mk-composer .mk-actions { justify-content: space-between; }
/* 输入框下面这句是安全提醒（不要发密码、验证码），字号不比别处的说明小，用二级灰 */
.mk-composer .mk-hint { font-size: .88rem; color: var(--ink-2); }
/* 回复框上面的快捷回复（方案咨询里的房东）；紧跟着的回复框不再画分隔线 */
.mk-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.mk-quick > * { margin: 0; }
.mk-quick .mk-hint { font-size: .88rem; color: var(--ink-2); }
.mk-quick + .mk-composer { padding-top: 0; border-top: 0; }

.mk-snapshot { display: grid; gap: 8px; margin: 0; padding: 16px 18px; border: 1px dashed var(--rule-2); border-radius: var(--r); background: var(--paper-2); font-size: .92rem; }
.mk-snapshot > * { margin: 0; }
.mk-snapshot :is(h2, h3, summary) { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--ink); }
.mk-snapshot summary { cursor: pointer; }
.mk-snapshot details[open] summary { margin-bottom: 10px; }
.mk-snapshot .mk-spec { font-size: .88rem; }
/* 快照底色是 --paper-2，三级灰在浅色下只有 4.49:1，改用二级灰 */
.mk-snapshot :is(.mk-card-meta, .mk-hint, .mk-muted, .mk-spec dt) { color: var(--ink-2); }

.mk-deal, .mk-review { display: grid; gap: 12px; margin: 0; padding: 18px 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); font-size: 1rem; }
.mk-deal > *, .mk-review > * { margin: 0; }
.mk-deal :is(h2, h3), .mk-review :is(h2, h3) { font-size: 1.12rem; line-height: 1.4; }
/* 会话页顶部“查看条件”跳到成交卡片的标题：和账户页小节一样给吸顶的头部留出位置 */
.mk-deal > h2 { scroll-margin-top: 96px; }
/* 成交卡片里的交付记录：和上面的合作信息用一条细线隔开 */
.mk-delivery { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rule); }
.mk-delivery > * { margin: 0; }
.mk-delivery > h3 { scroll-margin-top: 96px; }
.mk-deal form, .mk-review form { display: grid; gap: 14px; margin: 0; }
.mk-deal details > summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.mk-deal details[open] > summary { margin-bottom: 14px; }
/* 提议成交的字段每行两个（金额 + 币种、周期 + 开始日期、租期），各行用同样的两列，单独一个的占左列，上下对齐；手机上一列 */
.mk-deal .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 600px) { .mk-deal .field-row { grid-template-columns: minmax(0, 1fr); } }
.mk-review blockquote { margin: 4px 0 0; padding: 8px 0 8px 14px; border-left: 2px solid var(--rule-2); color: var(--ink-2); }
.mk-review .mk-review { padding: 12px 14px; background: var(--paper); }
.mk-review + .mk-review { margin-top: 12px; }
.mk-topic-list:has(> .mk-review) { border-top: 0; display: grid; gap: 12px; }
.mk-topic-list > li.mk-review { padding: 16px 18px; border: 1px solid var(--rule); }
/* 评分 1–5：单选做成一排小块 */
form[data-feedback] :is(fieldset, .field, div):not(.mk-choice-grid):has(> label > input[name="rating"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
form[data-feedback] :is(fieldset, .field, div):not(.mk-choice-grid):has(> label > input[name="rating"]) > :not(label) { flex-basis: 100%; }
form[data-feedback] :not(.mk-choice-grid) > label:has(> input[name="rating"]) { display: inline-flex; align-items: center; gap: 6px; min-width: 52px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--card); color: var(--ink); cursor: pointer; }
form[data-feedback] :not(.mk-choice-grid) > label:has(> input[name="rating"]:checked) { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); }
form[data-feedback] input[name="rating"] { accent-color: var(--clay); margin: 0; }

/* 页面里的小操作按钮（举报、拉黑、编辑、删除、结果反馈）：SSR 没给 .btn 时也不显示成系统默认按钮 */
.mk :is([data-mk-report], [data-block], [data-post-edit], [data-post-delete], [data-outcome], [data-dialog-close], [data-post-edit-cancel]):not(.btn, .mk-report-link) { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; color: var(--ink-3); font: .8rem/1.4 var(--sans); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); }
.mk :is([data-mk-report], [data-block], [data-post-edit], [data-post-delete], [data-outcome], [data-dialog-close], [data-post-edit-cancel]):not(.btn, .mk-report-link):hover { color: var(--ink); border-color: var(--ink-3); }
.mk .btn-ghost[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mk [data-outcome][aria-pressed="true"]:not(.btn) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mk [data-block][data-blocked="false"].btn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--rule-2)); }
/* 确认注销是不可撤销的操作：实心危险色按钮。背景、文字一起改，不管 SSR 给的是 .btn-ink 还是 .btn-ghost，
   浅色 --paper 压 --danger 5.9:1、深色 7.2:1；悬停往 --ink 方向加深/提亮，对比度只会更高 */
.mk [data-delete-account] [data-delete-confirm] { background: var(--danger); border-color: var(--danger); color: var(--paper); }
.mk [data-delete-account] [data-delete-confirm]:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 84%, var(--ink)); border-color: color-mix(in srgb, var(--danger) 84%, var(--ink)); color: var(--paper); }

/* ---------- 交流区 ---------- */

.mk-board-tabs { display: flex; gap: 8px; margin: 0 0 22px; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: none; }
.mk-board-tabs::-webkit-scrollbar { display: none; }
.mk-board-tabs > :is(ul, ol) { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-board-tabs li { display: flex; flex: none; }
.mk-board-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--ink-2); font-size: .9rem; text-decoration: none; white-space: nowrap; transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); }
.mk-board-tabs a:hover { border-color: var(--ink-3); color: var(--ink); }
.mk-board-tabs a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.mk-topic-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.mk-topic-list > li, .mk-topic-list > .mk-topic { margin: 0; padding: 18px 2px; border-bottom: 1px solid var(--rule); }
.mk-topic { position: relative; display: grid; gap: 6px; min-width: 0; }
.mk-topic > * { margin: 0; }
.mk-topic :is(h2, h3) { font-size: 1.1rem; line-height: 1.45; }
.mk-topic :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.mk-topic :is(h2, h3) a:hover { color: var(--clay-text); }
.mk-topic h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.3; }
.mk-topic > .ugc:not(:is(h1, h2, h3)), .mk-reply > .ugc:not(:is(h1, h2, h3)) { font-size: 1rem; line-height: 1.85; color: var(--ink); }
article.mk-topic { gap: 14px; padding-bottom: 26px; }
.mk-topic .mk-badge { margin-right: 4px; }

.mk-reply { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 18px 0; border-top: 1px solid var(--rule); scroll-margin-top: 96px; }
/* 帖子页整列按阅读宽度排（主题、回复、回复框），一行不超过四十几个字 */
article.mk-topic, article.mk-topic ~ section { max-width: var(--mk-measure); }
.mk-reply > * { margin: 0; }
:is(ol, ul):has(> li > .mk-reply, > .mk-reply) { margin: 0; padding: 0; list-style: none; }
.mk-reply.is-removed > .ugc, .mk-reply .mk-muted.ugc { color: var(--ink-3); font-style: italic; }

.mk-post-meta { margin: 0; font-size: .84rem; line-height: 1.7; color: var(--ink-3); }
.mk-post-meta a { color: var(--ink-2); text-decoration: none; }
.mk-post-meta a:hover { color: var(--clay-text); }
.mk-post-meta .mk-actions { display: inline-flex; margin-left: 8px; gap: 6px; vertical-align: middle; }

form[data-post-edit-form] { display: grid; gap: 12px; margin: 6px 0 0; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--card); }
form[data-post-edit-form] > * { margin: 0; }
form[data-mk-reply] { display: grid; gap: 12px; margin: 0; }

/* ---------- 账户 ---------- */

.mk-account { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.mk-account > :not(.mk-account-nav) { min-width: 0; }
.mk-account section { scroll-margin-top: 96px; }
.mk-account :is(section, .mk-account-main) > :is(h2, h3) { margin-bottom: 14px; }
.mk-account h2 { font-size: 1.45rem; line-height: 1.35; }
.mk-account-main > section:first-of-type { margin-top: clamp(28px, 4vw, 40px); }
.mk-account section + section { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--rule); }
.mk-account form { display: grid; gap: 16px; margin: 0; }
.mk-account-nav { display: flex; gap: 8px; margin: 0; padding: 0 0 4px; overflow-x: auto; scrollbar-width: none; font-size: .9rem; }
.mk-account-nav::-webkit-scrollbar { display: none; }
.mk-account-nav > :is(ul, ol) { display: contents; list-style: none; }
.mk-account-nav li { display: contents; }
.mk-account-nav a { flex: none; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: color .2s var(--ease), border-color .2s var(--ease); }
.mk-account-nav a:hover, .mk-account-nav a[aria-current], .mk-account-nav a.active { color: var(--ink); border-color: var(--clay); }
@media (min-width: 901px) {
  .mk-account { grid-template-columns: 196px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  .mk-account-nav { position: sticky; top: 96px; flex-direction: column; gap: 0; overflow: visible; }
  .mk-account-nav a { padding: 7px 0 7px 14px; border: 0; border-left: 1.5px solid var(--rule); border-radius: 0; }
  .mk-account-nav a:hover, .mk-account-nav a[aria-current], .mk-account-nav a.active { border-left-color: var(--clay); }
}

/* 我的内容：列表/卡片，或表格（窄屏表格逐行变卡片，td 用 data-label 标列名） */
:is(ul, ol, div).mk-mine { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
:is(ul, ol, div).mk-mine > :not(.mk-card) { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sm); }
:is(ul, ol, div).mk-mine > * > * { margin: 0; }
.mk-mine :is(h3, h4) { font-size: 1.05rem; line-height: 1.45; }
.mk-mine :is(h3, h4) a { color: var(--ink); text-decoration: none; }
.mk-mine :is(h3, h4) a:hover { color: var(--clay-text); }
.mk-mine .mk-actions { gap: 8px; }
.mk-mine form[data-availability-form] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.mk-mine form[data-availability-form] .field { flex: 1 1 160px; }
.mk-mine form[data-availability-form] :is(.input, .select) { padding: 9px 12px; font-size: 1rem; }
.mk-mine form[data-availability-form] .select { padding-right: 34px; }
table.mk-mine { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sm); }
table.mk-mine :is(th, td) { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
table.mk-mine thead th { background: var(--paper-2); color: var(--ink-2); font-size: .82rem; font-weight: 500; }
table.mk-mine tbody tr:last-child :is(th, td) { border-bottom: 0; }
@media (max-width: 760px) {
  table.mk-mine, table.mk-mine :is(tbody, tr, th, td) { display: block; }
  table.mk-mine { border: 0; background: none; }
  table.mk-mine thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.mk-mine tr { margin-bottom: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sm); }
  table.mk-mine :is(th, td) { padding: 4px 0; border: 0; }
  table.mk-mine td[data-label]::before { content: attr(data-label) "："; color: var(--ink-3); }
}

/* ---------- 对话框（举报等） ---------- */

.mk-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 28px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); color: var(--ink-2); box-shadow: var(--shadow); }
.mk-dialog::backdrop { background: rgba(25, 23, 20, .5); }
.mk-dialog[open] { animation: rise .35s var(--ease) both; }
.mk-dialog h2 { font-size: 1.4rem; line-height: 1.3; margin-bottom: 0; }
.mk-dialog form { display: grid; gap: 18px; }
.mk-dialog .mk-actions { justify-content: flex-end; }

/* ---------- 规范页、长文 ---------- */

.mk .doc { margin-top: clamp(8px, 2vw, 20px); }
.mk .prose > section { scroll-margin-top: 104px; }
.mk .prose dl { margin: 0 0 1.2em; }
.mk .prose dt { color: var(--ink); font-weight: 600; margin-top: .8em; }
.mk .prose dd { margin: .2em 0 0; }

/* ---------- 出租说明页 /market/become-host ---------- */

/* 各节是没有类名的 section，标题间距用“页面骨架”里的通用规则；段落、列表和问答按阅读宽度收窄 */
.mk-become > section > :is(p, ul), .mk-become .faq { max-width: var(--mk-measure); }
.mk-become > section > ul { margin: 0 0 1em; padding-left: 1.3em; }
/* 只管说明文字里的列表（发布要求、平台做什么）；求租卡片的列表不受影响，间距和 /market/wanted 一样 */
.mk-become :is(section > ul, .mk-host-split ul) > li { margin: .35em 0; line-height: 1.75; }
.mk-become :is(section > ul, .mk-host-split ul) > li::marker { color: var(--clay); }
.mk-become strong { color: var(--ink); font-weight: 600; }
.mk-become .mk-results { margin-bottom: 14px; }
/* 求租卡片和 /market/wanted 的结果栏一样宽：宽屏时是整行减去筛选栏和两栏间距，窄屏时两边都是整行 */
@media (min-width: 901px) {
  .mk-become .mk-results { max-width: calc(100% - var(--mk-filters-w) - var(--mk-layout-gap)); }
}

/* 四步：窄屏一列，宽屏两列；序号是圆圈里的数字 */
.mk-host-steps { counter-reset: mk-host-step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mk-host-steps > li { counter-increment: mk-host-step; position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; padding: 18px 20px 18px 62px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sm); }
.mk-host-steps > li::before { content: counter(mk-host-step); position: absolute; left: 18px; top: 17px; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--clay); border-radius: 999px; color: var(--ink); font: 600 .92rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.mk-host-steps > li > * { margin: 0; }
.mk-host-steps h3 { font-size: 1.1rem; line-height: 1.45; }
.mk-host-steps p { font-size: .93rem; line-height: 1.75; color: var(--ink-2); }
@media (min-width: 761px) { .mk-host-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 平台做什么、不做什么：两块并排，窄屏上下排 */
.mk-host-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mk-host-split > * { display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; padding: 18px 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sm); }
.mk-host-split > * > * { margin: 0; }
.mk-host-split h3 { font-size: 1.1rem; }
.mk-host-split ul { padding-left: 1.3em; }
@media (min-width: 641px) { .mk-host-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 窄屏 ---------- */

.mk img, .mk video { max-width: 100%; height: auto; }
.mk table { max-width: 100%; }
.mk pre { max-width: 100%; overflow-x: auto; }
.mk :is(input, select, textarea) { max-width: 100%; }
@media (max-width: 640px) {
  .mk-dialog { padding: 20px; }
  .mk-actions .btn { flex: 1 1 auto; }
  .mk-become-cta .btn { flex-basis: 100%; }
  .mk-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .mk-card, .mk-host, .mk-contact, .mk-deal, .mk-review { border-radius: var(--r-sm); }
  .mk-terms { padding: 4px 16px; }
  .mk-spec { grid-template-columns: fit-content(42%) minmax(0, 1fr); }
  .mk-spec dt { min-width: 4.5em; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-toast, .mk-card, .mk-steps li, .mk-steps li::before { transition: none; }
  .mk-msg, .mk-dialog[open], .field.invalid .mk-field-error:not([hidden]) { animation: none; }
  .mk-card:has(.mk-card-title a):hover { transform: none; }
}