/* 家访邀请页：暖纸色、水彩插画和柔和的绿。 */
:root { --ink:#29463a; --muted:#687467; --brand:#32674d; --bg:#fbf7ec; --line:#e7e6d8; }
body {
  background: radial-gradient(ellipse at 0 28%,#e8eddcc4,transparent 40%),
              radial-gradient(ellipse at 100% 55%,#f5dfb954,transparent 35%),
              var(--bg);
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:radial-gradient(#82744518 .6px,transparent .6px);
  background-size:5px 5px;
}
main { max-width:600px; padding:24px 20px calc(20px + env(safe-area-inset-bottom)); }
.hero { padding:0 0 24px; text-align:center; }
.eyebrow {
  display:inline-flex; padding:5px 13px; border:1px solid #d7dfc9;
  border-radius:30px; background:#f4f5eac9; color:#527047; font-size:12px; letter-spacing:1.5px;
}
.eyebrow svg { width:16px; height:16px; }
h1 { margin:20px 0 12px; font-size:42px; letter-spacing:3px; line-height:1.25; color:#2c503e; }
h1>span:first-child { font-size:20px; letter-spacing:.5px; margin-bottom:12px; font-weight:600; }
h1 .title-dot { display:inline-block; width:9px; height:9px; margin:0 0 5px 5px; border-radius:50%; background:#dba552; }
.hero p { font-size:13px; line-height:1.8; color:#6b7565; }
.hero-art { position:relative; margin:6px -12px 0; }
.hero-art img { display:block; width:100%; height:auto; mix-blend-mode:multiply; border-radius:18px; }
.art-caption {
  position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  white-space:nowrap; background:#fffdf3ed; border:1px solid #e0dec4;
  border-radius:30px; padding:3px 13px; color:#75805d; font-size:11px; letter-spacing:2px;
}
.hero-bottom { justify-content:center; gap:5px 12px; margin-top:16px; font-size:11px; }
.dot-label:before { background:#bd9345; }
.form-card {
  position:relative; padding:23px; border-color:#e7e5d7; border-radius:24px;
  background:#fffefaf7; box-shadow:0 12px 35px #5067480d,0 2px 4px #50674804;
}
.form-card::before { content:""; position:absolute; top:-1px; left:28px; width:46px; height:3px; border-radius:0 0 3px 3px; background:#a1b790; }
.title-with-icon { display:flex; gap:10px; align-items:center; min-width:0; }
.section-icon { width:37px; height:41px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:13px; color:#658263; background:#edf1e5; }
.section-icon svg { width:23px; height:23px; stroke-width:1.5; }
.calendar-icon { background:#f5ebd8; color:#9a7846; }
.kicker { font-size:10px; letter-spacing:1.2px; color:#79816d; }
h2 { font-size:20px; font-weight:650; letter-spacing:.3px; }
.pill { color:#637952; background:#eef2e7; font-size:10px; padding:5px 8px; }
.helper { font-size:12px; color:#717b6b; }
.identity-note { background:#edf3e9; color:#58714c; border-left:3px solid #a6ba94; border-radius:8px; }
label { font-size:14px; margin-top:18px; color:#405746; }
input { background:#fdfcf7; border-color:#dddccd; border-radius:11px; height:50px; }
input::placeholder { color:#8a8d7f; }
input[readonly] { background:#f1f3eb; }
input:focus-visible { outline:2px solid #829d75; outline-offset:2px; }
.sub-label { color:#7b816f; }
.datetime { gap:10px; }
.time-help { margin-bottom:20px; }
.primary { min-height:51px; border-radius:12px; background:#32674d; box-shadow:0 4px 8px #32674d12; letter-spacing:.6px; }
.primary:hover { background:#27563e; }
.text-button { color:#56734d; font-size:12px; }
.form-footer { margin-top:7px; }
.appointments { padding:0 2px; margin-top:32px; }
.count { background:#f6eddc; border:1px solid #ede1c9; border-radius:13px; padding:6px 11px; gap:5px; align-items:center; }
.count strong { font-size:28px; color:#7f6333; }
.count span { font-size:10px; color:#887959; }
.list-toolbar { margin:10px 0 7px; font-size:11px; color:#7c826f; }
.date-group { border-color:#e3e6dc; border-radius:17px; box-shadow:0 4px 14px #415b3f05; background:#fffefa; }
.date-heading { padding:10px 14px; font-weight:600; border-left-width:3px; }
.booking-row { padding:14px 0; margin:0 15px; border-color:#eeeee4; }
.avatar { width:37px; height:37px; border-radius:50%; }
.slot { font-size:16px; color:#425744; }
.phone { color:#828779; }
.privacy { font-size:11px; color:#818672; text-align:center; margin-top:17px; }
.empty { border-color:#d5ddc4; background:#f2f4eac9; color:#7b876b; }
footer { margin-top:23px; border-color:#dfdfcd; font-size:11px; color:#869073; }
footer>span { display:flex; align-items:center; gap:5px; }
footer svg { width:14px; height:14px; color:#a4ad8c; }
dialog { background:#fffef9; border:1px solid #e0e3d4; border-radius:23px; }
dialog::backdrop { background:#2d443263; backdrop-filter:blur(3px); }
.close { background:#eff2e8; color:#718266; }
@media(max-width:380px) {
  main { padding:20px 15px calc(18px + env(safe-area-inset-bottom)); }
  .form-card { padding:21px 18px; }
  h1 { font-size:38px; }
  h1>span:first-child { font-size:18px; }
  h2 { font-size:18px; }
  .title-with-icon { gap:8px; }
  .section-icon { width:32px; height:37px; border-radius:11px; }
  .pill { font-size:9px; padding:5px 7px; }
  .count { padding:6px 9px; }
  .count strong { font-size:26px; }
}
@media(min-width:768px) {
  main { padding-top:38px; }
  .hero-art { max-width:470px; margin:7px auto 0; }
  .form-card { padding:28px; }
  h1 { font-size:46px; }
}

/* 精修：一张紧凑页头，清晰表单，以及微信风格底部滚轮。 */
:root { --ink:#294638; --muted:#647365; --brand:#32674d; --bg:#f7f7ef; }
body { background:linear-gradient(165deg,#faf5e9 0,#f5f6ed 48%,#f7f8f2 100%); }
body::before { display:none; }
main { padding-top:16px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hero { padding:0 0 16px; }
.hero-art { margin:0; overflow:hidden; border-radius:20px; border:1px solid #e9e4d5; background:#fff8ee; }
.hero-art img { mix-blend-mode:normal; border-radius:0; }
.hero-bottom { margin-top:12px; font-size:12px; color:#697361; letter-spacing:0; }
.form-card { padding:22px; background:#fffefa; border-color:#e7e8db; box-shadow:0 8px 28px #475d3a08; }
.form-card::before { display:none; }
.kicker { display:none; }
.section-icon { width:32px; height:34px; border-radius:10px; }
.section-icon svg { width:21px; height:21px; }
h2 { font-size:20px; letter-spacing:0; margin:0; }
.pill { font-size:10px; }
.helper { color:#677363; font-size:13px; margin:12px 0 16px; }
label { margin-top:16px; }
input { background:#fafbf6; border-color:#dfe4d8; border-radius:12px; }
input::placeholder { font-size:13px; color:#798372; }
.time-help { font-size:12px; margin:9px 0 19px; line-height:1.65; }
.primary { font-size:16px; font-weight:600; letter-spacing:0; box-shadow:none; }
.count { background:#eef3e8; border-color:#e1e7d8; padding:5px 10px; }
.count strong { color:#48663e; font-size:25px; }
.count span { color:#607358; font-size:11px; }
.list-toolbar { color:#6b7764; font-size:12px; }
.privacy { font-size:12px; color:#697461; }
.phone { color:#6f7c6b; }
.choose-time {
  display:flex; align-items:center; gap:10px; width:100%; min-height:54px; padding:12px;
  border:1px solid #dfe4d8; border-radius:12px; background:#fafbf6; color:#798372; text-align:left;
}
.choose-time>svg { flex-shrink:0; width:21px; height:21px; color:#7d916d; }
.choose-time>span { flex:1; font-size:14px; }
.choose-time .chevron { width:17px; height:17px; color:#929e86; }
.choose-time.has-time { color:#2b5138; background:#f0f6ec; border-color:#c9dbc0; }
.choose-time.has-time>span { font-size:16px; font-weight:550; }
.choose-time[aria-invalid=true] { border-color:var(--error); }
.time-sheet {
  position:fixed; inset:auto 0 0; margin:0 auto; width:100%; max-width:600px; max-height:calc(100dvh - 20px);
  border:0; border-radius:24px 24px 0 0; padding:10px 20px calc(20px + env(safe-area-inset-bottom));
  background:#fffefb; overflow:hidden; color:#294638;
}
.sheet-handle { width:32px; height:4px; border-radius:4px; background:#d9dfd1; margin:0 auto 8px; }
.picker-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.picker-heading h2 { font-size:17px; font-weight:600; }
.picker-action { border:0; background:none; min-height:44px; min-width:48px; padding:8px 0; color:#6e7a68; font-size:15px; }
.picker-action.confirm { color:#32674d; font-weight:600; }
.picker-instruction { text-align:center; color:#708068; font-size:13px; margin:5px 0 18px; }
.wheel-labels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:center; font-size:12px; color:#74806e; margin-bottom:4px; }
.wheel-area { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.wheel-highlight { position:absolute; inset:96px 0 auto; height:48px; border-radius:12px; background:#eff5e9; border-top:1px solid #e2ebda; border-bottom:1px solid #e2ebda; pointer-events:none; }
.wheel {
  position:relative; z-index:1; height:240px; overflow-y:auto; padding:96px 0; min-width:0;
  scroll-snap-type:y mandatory; scrollbar-width:none; touch-action:pan-y; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; user-select:none; cursor:grab;
  mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);
}
.wheel::-webkit-scrollbar { display:none; }
.wheel.dragging { scroll-snap-type:none; cursor:grabbing; }
.wheel:focus-visible { outline:2px solid #7b9b68; outline-offset:-2px; border-radius:10px; }
.wheel-item { height:48px; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; color:#7b8673; font-size:20px; font-variant-numeric:tabular-nums; flex-shrink:0; }
.wheel-item.selected { color:#2e5940; font-size:23px; font-weight:600; }
.picker-preview { font-size:15px; text-align:center; color:#365b40; background:#f5f8f0; border-radius:10px; padding:10px; margin:12px 0 8px; min-height:44px; }
.picker-footnote { font-size:12px; color:#73836a; text-align:center; margin:0; }
.sheet-open { overflow:hidden; }
.known-booking { background:#eef5e8; border:1px solid #dce8d2; border-radius:12px; padding:14px; margin:14px 0 18px; color:#3c6342; }
.known-booking strong { font-size:15px; font-weight:600; }
.known-booking p { margin:5px 0 0; font-size:13px; color:#5c7553; line-height:1.7; }
@media(max-width:380px) {
  main { padding-top:14px; }
  .form-card { padding:20px 18px; }
  .hero-bottom { font-size:11px; }
  h2 { font-size:19px; }
  .pill { font-size:9px; }
  .choose-time>span { font-size:13px; }
  .choose-time.has-time>span { font-size:15px; }
  .time-sheet { padding-left:16px; padding-right:16px; }
}
@media(min-width:768px) {
  main { padding-top:26px; }
  .hero-art { max-width:none; margin:0; }
}

/* 固定家访排期选择 */
.time-sheet { max-height:90dvh; }
.schedule-body { max-height:55dvh; overflow-y:auto; overscroll-behavior:contain; padding:0 2px 12px; }
.schedule-label { font-size:14px; font-weight:600; color:#315c49; margin:14px 0 10px; display:flex; align-items:center; gap:8px; }
.schedule-label>span { font-size:11px; color:#839181; font-weight:400; }
.schedule-days { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.schedule-slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.schedule-day,.schedule-slot { min-height:62px; border:1px solid #e1e7dc; border-radius:12px; background:#f8faf5; color:#3c5145; padding:10px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; }
.schedule-day strong { font-size:14px; }.schedule-slot strong { font-size:16px; font-variant-numeric:tabular-nums; }
.schedule-day span,.schedule-slot span { font-size:10px; color:#798672; }
.schedule-day.selected,.schedule-slot.selected { border-color:#37664f; background:#e8f1e8; box-shadow:inset 0 0 0 1px #37664f; }
.schedule-slot.selected span { color:#315e47; }.schedule-slot:disabled { background:#f1f1ec; color:#93968b; border-color:#ecece6; cursor:default; }
.schedule-slot:disabled span { color:#8c8e82; }.schedule-day:focus-visible,.schedule-slot:focus-visible { outline:3px solid #d5b367; outline-offset:2px; }
@media(max-width:370px) { .schedule-day span { font-size:9px; } .schedule-slot strong { font-size:15px; } }

.schedule-days { max-height:210px; overflow-y:auto; overscroll-behavior:contain; padding:2px; }
.more-bookings { display:block; width:100%; min-height:48px; margin:16px 0 0; border:1px solid #dce5d5; border-radius:14px; background:#f5f8ef; color:#3c684f; font-size:14px; cursor:pointer; }
.more-bookings[hidden] { display:none; }.more-bookings:focus-visible { outline:3px solid #d5b367; outline-offset:2px; }

/* 日期切换不改变弹层几何；日期和时段各自滚动，操作区固定。 */
.time-sheet { height:min(760px,90vh); height:min(760px,90dvh); max-height:90vh; max-height:90dvh; overflow-anchor:none; }
.time-sheet[open] { display:flex; flex-direction:column; }
.time-sheet>.sheet-handle,.time-sheet>.picker-heading,.time-sheet>.picker-instruction,.time-sheet>.picker-preview,.time-sheet>.picker-footnote { flex-shrink:0; }
.schedule-body { flex:1; min-height:0; max-height:none; overflow:hidden; display:flex; flex-direction:column; padding-bottom:0; }
.schedule-label { flex-shrink:0; }
.schedule-days { flex:0 0 clamp(138px,25vh,210px); flex-basis:clamp(138px,25dvh,210px); height:clamp(138px,25dvh,210px); max-height:none; align-content:start; overflow-anchor:none; }
.schedule-slots { flex:1; min-height:0; align-content:start; overflow-y:auto; overscroll-behavior:contain; overflow-anchor:none; padding:2px 2px 8px; }

.schedule-day.full { background:#f1f1ec; color:#96998e; border-color:#ecece6; cursor:pointer; box-shadow:none; }
.schedule-day.full span { color:#909487; }
.schedule-slot { height:66px; min-height:66px; }
.schedule-slot span { display:block; max-width:100%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:16px; }

.schedule-day.full.selected { border-color:#a5ac9e; box-shadow:inset 0 0 0 1px #a5ac9e; }

/* 本人预约日期与时段：柔和红色并附文字。 */
.schedule-day.mine,.schedule-slot.mine { background:#fcefed; color:#9a4644; border-color:#dca6a2; }
.schedule-day.mine span,.schedule-slot.mine span { color:#a35c57; }
.schedule-day.mine.selected,.schedule-slot.mine.selected { border-color:#ae5c57; box-shadow:inset 0 0 0 1px #ae5c57; }

.schedule-day,.schedule-slot { -webkit-tap-highlight-color:transparent; }