/* ohm · visitor surfaces — brand/design-tokens.md 的逐条执行
   安缦风三军规：静如纸（无闲置动效）；每屏青铜一处；三步之内解决战斗 */

:root {
  --paper: #F6F3EC;
  --ink: #26221C;
  --stone: #A19883;
  --bronze: #8E7554;
  --oak: #C0A57D;
  --glass: #D9DDD6;
  --hair: 1px solid rgba(161, 152, 131, .45);
  /* 功能色（宪法外，2026-07-04 备案）：paper 底小字可读版石色 4.77:1；石原值退居装饰与墨底文字 */
  --tstone: #746B54;
  --warn: #A8442C;
}

/* 键盘焦点必须可见（WCAG 2.4.7）——墨描线，安静且最高对比 */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, -apple-system, "PingFang SC", sans-serif;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---- atoms ---- */
.label {
  font-size: 12px; letter-spacing: .28em; color: var(--tstone);
  text-transform: lowercase; font-weight: 400;
}
input.field, textarea.field {
  display: block; width: 100%;
  background: var(--glass);
  border: 1px solid rgba(161, 152, 131, .35);
  border-radius: 0;
  height: 56px; padding: 0 16px;
  font: inherit; font-size: 19px; color: var(--ink);
  outline: none;
}
input.field:focus { border-color: var(--stone); }
input.field:focus-visible { border-color: var(--ink); }
.cta {
  display: block; width: 100%;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 0;
  padding: 17px 0; font: inherit; font-size: 15px;
  letter-spacing: .28em; text-transform: lowercase; font-weight: 400;
  cursor: pointer;
}
.cta:active { opacity: .88; }
.fine { font-size: 11.5px; line-height: 1.65; color: var(--tstone); }
.fine a { color: var(--tstone); }
.globe {
  position: absolute; top: 18px; right: 20px;
  display: flex; align-items: center; gap: 6px;
  color: var(--tstone); font-size: 11px; letter-spacing: .28em;
}
/* 错误文字：warn 功能色（5.37:1）——青铜是度量专色，错误信息无权占用（宪法青铜条款） */
.err { font-size: 12.5px; color: var(--warn); min-height: 1.5em; }
.idle-note { font-size: 12.5px; color: var(--tstone); }

/* 品牌唯一签名动效：measured line 自左向右描线一次，240ms ease-out */
.mline { display: block; margin: 26px auto 20px; width: min(46%, 340px); }
.mline path {
  stroke-dasharray: 200; stroke-dashoffset: 200;
}
.drawn .mline path { animation: ohm-draw .24s ease-out .15s forwards; }
@keyframes ohm-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .drawn .mline path { animation: none; stroke-dashoffset: 0; }
}

/* ---- kiosk（iPad 横屏；同一 URL 即 agent 笔记本上的 web 版） ---- */
.screen { position: fixed; inset: 0; display: none; overflow-y: auto; }
.screen.on { display: flex; }
@media (max-height: 640px) { #s1 form { justify-content: flex-start; padding-top: 28px; } }

#s0 { flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
#s0 .lockup { width: min(44vw, 520px); }
#s0 .addr { font-size: clamp(18px, 2.6vw, 26px); margin-top: 18px; }
#s0 .hint {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  font-size: 12px; letter-spacing: .28em; color: var(--tstone); text-transform: lowercase;
  background: none; border: 0; cursor: pointer; font-weight: 300; padding: 12px 0;
}

#s1 { align-items: stretch; }
#s1 .photo {
  width: 40%; position: relative;
  background: linear-gradient(160deg, #CBBFA8 0%, #B3A68C 45%, #8F8570 100%);
}
#s1 .photo .addr-chip {
  position: absolute; left: 0; bottom: 34px;
  background: var(--oak); color: var(--ink);
  font-size: 12px; letter-spacing: .14em; padding: 8px 18px;
}
#s1 form {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 10px; padding: 48px min(7vw, 96px); position: relative;
}
#s1 .greet { font-size: clamp(19px, 2.3vw, 24px); margin-bottom: 14px; }
/* brokerage 行的包裹 div 不得破坏表单 flex 节奏 */
#row-brokerage { display: contents; }
#row-brokerage[hidden] { display: none; }
#s1 .echo { font-size: 11px; color: var(--tstone); margin: -4px 0 2px; }
#s1 .cta { margin-top: 16px; }
#s1 .fine { margin-top: 14px; }

#s3 { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#s3 .ty { font-size: clamp(26px, 3.4vw, 38px); font-weight: 300; }
#s3 .sub { font-size: 14px; color: var(--tstone); }
#s3 .ask {
  margin-top: 34px; display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--tstone);
}
#s3 .ask button {
  background: none; border: var(--hair); color: var(--tstone);
  font: inherit; font-size: 12px; letter-spacing: .18em; padding: 10px 24px;
  text-transform: lowercase; cursor: pointer;
}
#s3 .ask button.picked,
#s3 .ask button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
#s3 .credit {
  position: absolute; bottom: 24px; left: 0; right: 0; text-align: center;
  font-size: 11px; letter-spacing: .14em; color: var(--tstone);
}
.credit-logo {
  height: 14px; vertical-align: -3px; margin: 0 2px;
  filter: grayscale(1) opacity(.75);  /* 落款是呈递，不是横幅——灰度压一档 */
}

/* ---- 全屏签到 QR（经纪人手机举屏） ---- */
.qr-full {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 24px;
}
.qr-addr { font-size: clamp(17px, 4.6vw, 24px); font-weight: 300; text-align: center; }
.qr-img { width: min(78vw, 58vh, 460px); border: var(--hair); background: #fff; padding: 4%; }
.qr-hint { font-size: 12px; letter-spacing: .28em; color: var(--tstone); text-transform: lowercase; }
.qr-code { font-size: 13px; color: var(--tstone); }
.qr-code b { font-weight: 400; letter-spacing: .2em; color: var(--ink); }

/* ---- 大后台（平台运营面）：同一套纸面语汇，工作台密度 ---- */
.adm-wrap { max-width: 860px; margin: 0 auto; padding: 0 22px 64px; }
.adm-nav { display: flex; gap: 18px; margin: 6px 0 22px; }
.adm-nav a { font-size: 12px; letter-spacing: .22em; text-transform: lowercase;
  color: var(--tstone); text-decoration: none; padding-bottom: 3px; }
.adm-nav a.on { color: var(--ink); border-bottom: 1px solid var(--ink); }
table.adm { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
table.adm th { font-weight: 400; letter-spacing: .12em; color: var(--tstone); text-align: left;
  font-size: 11px; text-transform: lowercase; border-top: var(--hair); border-bottom: var(--hair); padding: 8px 6px; }
table.adm td { padding: 9px 6px; border-bottom: 1px solid rgba(161,152,131,.18); vertical-align: baseline; }
table.adm .r { text-align: right; }
.adm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 12px 0 6px; }
.adm-form .full { grid-column: 1 / -1; }
.adm-form input.field, .adm-form select.field { height: 46px; font-size: 15px; }
select.field {
  display: block; width: 100%; background: var(--glass);
  border: 1px solid rgba(161,152,131,.35); border-radius: 0;
  padding: 0 12px; font: inherit; color: var(--ink); outline: none;
}
.adm-act { background: none; border: var(--hair); color: var(--tstone); font: inherit;
  font-size: 11px; letter-spacing: .14em; padding: 8px 14px; text-transform: lowercase; cursor: pointer; }
.adm-act:hover { color: var(--ink); border-color: var(--ink); }
.adm-ok { font-size: 12px; color: var(--tstone); min-height: 1.4em; }

/* ---- 三分类快捷入口：安静的 + 号（长按 600ms 弹浮层） ---- */
.plus {
  position: absolute; right: 20px; bottom: 20px;
  width: 44px; height: 44px;
  background: none; border: var(--hair); border-radius: 0;
  color: var(--tstone); font: inherit; font-size: 20px; font-weight: 300;
  line-height: 1; cursor: pointer; opacity: .7;
}
.plus:focus-visible { opacity: 1; }
#s2 { align-items: center; justify-content: center; background: rgba(38, 34, 28, .18); }
.sheet {
  width: min(86vw, 420px);
  background: var(--paper);
  border: var(--hair);
  padding: 10px 0;
}
.sheet-row {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 16px 26px; font: inherit;
}
.sheet-row + .sheet-row { border-top: var(--hair); }
.sheet-title {
  display: block; font-size: 15px; letter-spacing: .18em;
  text-transform: lowercase; color: var(--ink); font-weight: 400;
}
.sheet-hint { display: block; font-size: 11.5px; color: var(--tstone); margin-top: 2px; }
.sheet-row:active { background: var(--glass); }

/* ---- mobile（扫码，竖屏） ---- */
.m-wrap { max-width: 480px; margin: 0 auto; padding: 0 22px 48px; }
.m-hero {
  height: 30vh; min-height: 180px; margin: 0 -22px;
  background: linear-gradient(160deg, #CBBFA8 0%, #B3A68C 45%, #8F8570 100%);
  position: relative;
}
.m-hero .addr-chip {
  position: absolute; left: 0; bottom: 22px;
  background: var(--oak); color: var(--ink);
  font-size: 11px; letter-spacing: .14em; padding: 7px 14px;
}
.m-wrap .greet { font-size: 19px; font-weight: 300; margin: 26px 0 14px; }
.m-wrap form { display: flex; flex-direction: column; gap: 9px; }
.m-wrap .echo { font-size: 11px; color: var(--tstone); margin: -3px 0 2px; }
.m-wrap .cta { margin-top: 14px; }
.m-wrap .fine { margin-top: 13px; }

/* ---- packet 落地页 ---- */
.p-wrap { max-width: 640px; margin: 0 auto; padding: 0 24px 64px; }
.p-hero {
  height: 34vh; min-height: 200px; margin: 0 -24px;
  background: linear-gradient(160deg, #CBBFA8 0%, #B3A68C 45%, #8F8570 100%);
  position: relative;
}
.p-hero .addr-chip {
  position: absolute; left: 0; bottom: 26px;
  background: var(--oak); color: var(--ink);
  font-size: 12px; letter-spacing: .14em; padding: 8px 16px;
}
.p-banner {
  border-bottom: var(--hair);
  padding: 14px 0; font-size: 13px; color: var(--tstone); text-align: center;
}
.p-wrap h1 { font-size: 24px; font-weight: 300; margin: 30px 0 4px; }
.p-city { color: var(--tstone); font-size: 14px; }
.facts {
  display: flex; gap: 36px; margin: 24px 0 8px;
  font-variant-numeric: tabular-nums lining-nums;
}
.facts b { display: block; font-size: 24px; font-weight: 300; }
.facts span { font-size: 11px; letter-spacing: .2em; color: var(--tstone); text-transform: lowercase; }
.p-desc { margin: 22px 0; max-width: 62ch; }
.p-rule { border: none; border-top: var(--hair); margin: 30px 0; }
.agent-card { display: flex; flex-direction: column; gap: 2px; }
.agent-card .name { font-weight: 400; }
.agent-card .meta { font-size: 12.5px; color: var(--tstone); }
.p-foot { margin-top: 40px; font-size: 11px; letter-spacing: .1em; color: var(--tstone); text-align: center; }
.p-credit { margin-bottom: 6px; letter-spacing: .14em; }

/* ---- gone ---- */
.g-wrap {
  height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 0 24px;
}

/* ---- 通用入口 / 登录 ---- */
.entry-form { width: min(86vw, 380px); display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.entry-agent { margin-top: 26px; letter-spacing: .1em; }

/* ---- 经纪人管理面（手机优先） ---- */
.a-wrap { max-width: 560px; margin: 0 auto; padding: 0 20px 64px; }
.a-top { display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0 14px; border-bottom: var(--hair); margin-bottom: 20px; }
.a-brand { font-size: 15px; letter-spacing: .22em; text-decoration: none; color: var(--ink); }
.a-user { font-size: 12px; color: var(--tstone); }
.a-user a { color: var(--tstone); }
.a-h1 { font-size: 21px; font-weight: 300; margin: 4px 0 2px; }
.a-list { margin-top: 8px; }
.a-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid rgba(161,152,131,.22);
  text-decoration: none; color: var(--ink); }
.a-addr { font-size: 15px; }
.a-meta { font-size: 11.5px; color: var(--tstone); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.chip { border: var(--hair); font-size: 10px; letter-spacing: .14em; padding: 2px 8px;
  text-transform: lowercase; color: var(--tstone); }
.chip-live { border-color: var(--ink); color: var(--ink); }
.chip-ended { opacity: .7; }
.a-count { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 6px; }
.a-count b { font-size: 40px; font-weight: 300; color: var(--bronze);
  font-variant-numeric: tabular-nums; }
.a-count span { font-size: 11px; letter-spacing: .2em; color: var(--tstone); }
.a-sec { margin: 26px 0 8px; }
.a-form { display: flex; flex-direction: column; gap: 9px; }
.a-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.a-mls { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.a-textarea { height: 110px; padding: 12px 16px; resize: vertical; font-size: 15px; }
.ghost-btn { background: none; border: var(--hair); color: var(--ink); font: inherit;
  font-size: 12px; letter-spacing: .18em; padding: 10px 18px; text-transform: lowercase;
  cursor: pointer; text-decoration: none; text-align: center; display: inline-block; }
.cta.danger { background: var(--ink); margin-top: 18px; }
.a-access { display: flex; gap: 20px; align-items: flex-start; }
.a-qr { width: 132px; height: 132px; border: var(--hair); background: #fff; }
.a-keys { display: flex; flex-direction: column; gap: 8px; }
.a-code { font-size: 22px; font-weight: 400; letter-spacing: .18em;
  font-variant-numeric: tabular-nums; }
.g-wrap .lockup { width: min(56vw, 300px); }
a.cta { text-decoration: none; text-align: center; }