:root {
  --ink: #24211f;
  --muted: #6f6a63;
  --paper: #f7f2e8;
  --surface: #fffdf8;
  --line: #ded6c9;
  --red: #d94b3f;
  --red-dark: #ac332b;
  --blue: #4c91d9;
  --amber: #e9a333;
  --green: #89a986;
  --pink: #f1b7a8;
  --shadow: 0 14px 40px rgba(54, 42, 29, 0.12);
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #e9e1d4; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(217,75,63,.08), transparent 24rem),
    linear-gradient(135deg, #eee8de, #e6ddcf);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}
body, button, input, textarea { font-family: "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-shell {
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 48px rgba(30, 24, 18, .14);
  position: relative;
  overflow-x: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(247,242,232,.92);
  border-bottom: 1px solid rgba(82,68,53,.1);
  backdrop-filter: blur(14px);
}
.brand, .city-button { border: 0; background: transparent; cursor: pointer; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; text-align: left; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--ink); color: #f0a096; font-weight: 900; }
.brand > span:last-child { display: grid; }
.brand strong { font-size: .95rem; letter-spacing: .02em; }
.brand small { color: var(--muted); font-size: .7rem; }
.city-button { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); }
.city-button span { color: var(--muted); font-size: .68rem; }
.city-button strong { font-size: .82rem; }
.city-button b { color: var(--red); }

main { min-height: calc(100dvh - 66px); }
.view { display: none; padding: 18px 17px calc(92px + var(--safe-bottom)); animation: enter .24s ease both; }
.view.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero {
  min-height: 230px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 24px 17px;
  border: 1px solid #d7c9b6;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent),
    linear-gradient(135deg, #f5e4cd, #e8efe5 68%, #d8e5e2);
  box-shadow: 0 10px 30px rgba(71, 50, 31, .09);
}
.hero::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -24px; height: 90px; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.42); transform: rotate(-3deg); }
.hero-copy { width: 63%; position: relative; z-index: 3; }
.eyebrow { margin: 0 0 5px; color: var(--red-dark); font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
.hero h1, .page-heading h1, .contact-heading h1 { margin: 0; font-family: "Hiragino Mincho ProN", "Songti SC", serif; font-size: 2.08rem; line-height: 1.12; letter-spacing: -.05em; }
.hero-copy > p:last-child { max-width: 235px; margin: 14px 0 0; color: #585047; font-size: .82rem; }
.hero-mascot { position: absolute; z-index: 2; width: 47%; right: -5%; bottom: -7%; filter: drop-shadow(0 12px 15px rgba(44,30,20,.18)); }
.sun-dot { position: absolute; top: 24px; right: 26px; width: 28px; height: 28px; border-radius: 50%; background: var(--red); opacity: .9; }

.quick-section, .more-section { margin-top: 27px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: 1.28rem; letter-spacing: -.035em; }
.section-heading.compact { align-items: center; }
.section-heading.compact span { color: var(--muted); font-size: .7rem; }
.text-button { border: 0; background: transparent; color: var(--muted); font-size: .76rem; cursor: pointer; }
.text-button span { display: inline-grid; min-width: 19px; height: 19px; place-items: center; margin-left: 3px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .65rem; }
.primary-grid { display: grid; gap: 11px; }
.tool-card { width: 100%; min-height: 105px; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 13px; padding: 16px; border: 0; border-radius: 21px; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 8px 22px rgba(45,39,32,.1); }
.toilet-card { background: linear-gradient(135deg, #3879bf, #67a6e3); }
.smoking-card { background: linear-gradient(135deg, #ce8523, #eab04b); }
.tool-icon { width: 57px; height: 57px; display: grid; place-items: center; border-radius: 18px; background: rgba(255,255,255,.2); font-size: 1.7rem; }
.tool-card > span:nth-child(2) { display: grid; }
.tool-card strong { font-size: 1.35rem; letter-spacing: -.03em; }
.tool-card small { margin-top: 4px; color: rgba(255,255,255,.87); font-size: .78rem; }
.tool-card b { font-size: 2rem; font-weight: 300; }

.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-card { min-height: 106px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.9); text-align: left; cursor: pointer; }
.mini-card > span:last-child { display: grid; gap: 3px; }
.mini-card strong { font-size: .88rem; }
.mini-card small { color: var(--muted); font-size: .67rem; }
.mini-art { width: 46px; height: 70px; display: grid; place-items: center; border-radius: 14px; font-size: 1.4rem; }
.mini-art.coral { background: #f7d9d1; }
.mini-art.green { background: #dfead9; }
.mini-art.blue { background: #dce9f2; color: #2f6f9d; }
.mini-art.yellow { background: #f5e5b9; color: #a3342d; font-size: 2rem; }

.ask-card { width: 100%; min-height: 176px; overflow: hidden; position: relative; display: flex; margin-top: 24px; padding: 22px; border: 0; border-radius: 24px; background: linear-gradient(135deg, #292521, #3c332c); color: #fff; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.ask-card::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; right: -48px; top: -55px; background: var(--red); opacity: .16; }
.ask-card img { position: absolute; z-index: 2; width: 43%; right: -1%; bottom: -33%; filter: drop-shadow(0 8px 12px rgba(0,0,0,.2)); }
.ask-copy { width: 68%; display: grid; position: relative; z-index: 3; }
.ask-copy small { color: #f0a096; font-size: .66rem; font-weight: 900; letter-spacing: .13em; }
.ask-copy strong { margin: 5px 0 1px; font-family: "Hiragino Mincho ProN", "Songti SC", serif; font-size: 1.8rem; }
.ask-copy em { color: #d9d2ca; font-style: normal; font-size: .79rem; }
.ask-copy b { align-self: end; width: max-content; padding: 8px 12px; border-radius: 999px; background: var(--red); font-size: .74rem; }
.coverage-note { margin: 14px 7px 0; color: var(--muted); font-size: .67rem; text-align: center; }

.back-button { margin: 0 0 19px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-size: .83rem; font-weight: 750; cursor: pointer; }
.page-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 19px; }
.page-heading.small { align-items: flex-end; margin-top: 3px; }
.page-heading.no-gap { margin-bottom: 12px; }
.page-heading h1 { font-size: 1.82rem; }
.page-heading p:last-child { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.page-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 21px; background: #dceaf7; font-size: 2rem; }
.heading-mascot { width: 90px; height: 90px; object-fit: contain; object-position: bottom; }
.source-list { display: grid; gap: 11px; }
.source-card { padding: 17px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.source-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.source-top h2 { margin: 0; font-size: 1.02rem; }
.source-top span { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #e3efe2; color: #35603b; font-size: .63rem; font-weight: 850; }
.source-card p { margin: 8px 0 12px; color: var(--muted); font-size: .76rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.badge-row span { padding: 4px 7px; border-radius: 7px; background: #f1ede6; color: #605b54; font-size: .62rem; font-weight: 760; }
.source-open { width: 100%; min-height: 45px; display: grid; place-items: center; border-radius: 12px; background: var(--red); color: #fff; text-decoration: none; font-size: .82rem; font-weight: 850; }
.how-card { display: grid; grid-template-columns: 27px 1fr; gap: 13px 10px; margin-top: 16px; padding: 16px; border: 1px dashed #cdbfaa; border-radius: 18px; background: #fff9ed; }
.how-card > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 900; }
.how-card p { margin: 0; display: grid; }
.how-card strong { font-size: .78rem; }
.how-card small { margin-top: 2px; color: var(--muted); font-size: .69rem; }
.assistant-cta { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; margin-top: 13px; padding: 15px; border: 0; border-radius: 18px; background: var(--ink); color: #fff; text-align: left; cursor: pointer; }
.assistant-cta > span:first-child { font-size: 1.6rem; }
.assistant-cta > span:nth-child(2) { display: grid; }
.assistant-cta strong { font-size: .91rem; }
.assistant-cta small { color: #c7c0b8; font-size: .67rem; }
.assistant-cta b { font-size: 1.5rem; }
.japanese-shortcut, .wide-soft-button { width: 100%; margin-top: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-weight: 800; cursor: pointer; }

.toilet-map-view { padding-left: 0; padding-right: 0; }
.toilet-map-view > .back-button, .toilet-map-heading, .location-status, .toilet-results-heading, .toilet-results, .map-data-note { margin-left: 17px; margin-right: 17px; }
.toilet-map-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.toilet-map-heading h1 { margin: 0; font-family: "Hiragino Mincho ProN", "Songti SC", serif; font-size: 2rem; line-height: 1.1; }
.toilet-map-heading p:last-child { margin: 5px 0 0; color: var(--muted); font-size: .78rem; }
.locate-button { flex: 0 0 auto; min-height: 42px; padding: 0 13px; border: 0; border-radius: 13px; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 850; cursor: pointer; }
.location-status { margin-bottom: 10px; padding: 9px 11px; border-radius: 11px; background: #ece7df; color: var(--muted); font-size: .7rem; }
.location-status[data-tone="loading"] { background: #fff0d7; color: #7f581c; }
.location-status[data-tone="success"] { background: #e2f0df; color: #38643a; }
.location-status[data-tone="error"] { background: #fae4df; color: #8e3830; }
.toilet-map { width: 100%; height: min(48vh, 430px); min-height: 330px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #e8e4dc; }
/* Leaflet 的核心定位样式同时保存在本地，避免外部样式加载慢时地图瓦片散开。 */
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box { position: absolute; left: 0; top: 0; }
.leaflet-container { overflow: hidden; -webkit-tap-highlight-color: transparent; }
.leaflet-tile { visibility: hidden; max-width: none !important; max-height: none !important; }
.leaflet-tile-loaded { visibility: inherit; }
.leaflet-zoom-animated { transform-origin: 0 0; }
.leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img { max-width: none !important; max-height: none !important; }
.leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; }
.leaflet-top { top: 0; } .leaflet-right { right: 0; } .leaflet-bottom { bottom: 0; } .leaflet-left { left: 0; }
.leaflet-control { position: relative; z-index: 800; pointer-events: auto; }
.leaflet-control-zoom { margin: 10px; border: 1px solid #bbb; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.leaflet-control-zoom a { width: 30px; height: 30px; display: block; border-bottom: 1px solid #ccc; background: #fff; color: #222; text-align: center; text-decoration: none; font: bold 18px/30px sans-serif; }
.leaflet-control-zoom a:last-child { border-bottom: 0; }
.leaflet-control-attribution { margin: 0; padding: 2px 5px; background: rgba(255,255,255,.82); color: #555; font-size: 10px; }
.leaflet-control-attribution a { color: #246ea8; }
.toilet-pin-shell { background: transparent; border: 0; }
.toilet-pin-shell span { width: 34px; height: 34px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50% 50% 50% 10px; transform: rotate(-45deg); background: #3e8ad4; color: #fff; box-shadow: 0 4px 12px rgba(23,58,92,.28); font-size: .7rem; font-weight: 900; }
.toilet-pin-shell i { transform: rotate(45deg); font-style: normal; }
.toilet-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; margin-bottom: 9px; }
.toilet-results-heading > div { display: grid; }
.toilet-results-heading strong { font-size: 1rem; }
.toilet-results-heading small { color: var(--muted); font-size: .66rem; }
.toilet-results-heading button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: .68rem; font-weight: 800; cursor: pointer; }
.toilet-results { display: grid; gap: 9px; }
.toilet-result { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.toilet-result-main { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.toilet-result-main > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.toilet-result-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.toilet-result-main small { color: var(--muted); font-size: .65rem; }
.toilet-result-main b { color: var(--blue); font-size: 1.35rem; }
.toilet-rank { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: #dceaf7; color: #2d6ea9; font-size: .72rem; font-weight: 900; }
.toilet-result-actions { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #eee8de; }
.toilet-result-actions a, .toilet-result-actions button { min-height: 39px; display: grid; place-items: center; padding: 7px 4px; border: 0; border-right: 1px solid #eee8de; background: #faf7f1; color: var(--ink); text-decoration: none; font-size: .64rem; font-weight: 800; cursor: pointer; }
.toilet-result-actions > :last-child { border-right: 0; }
.map-empty { padding: 27px 18px; border: 1px dashed #cfc2af; border-radius: 17px; color: var(--muted); text-align: center; }
.map-empty span { font-size: 1.8rem; }
.map-empty p { margin: 7px 0 0; font-size: .72rem; }
.map-data-note { color: var(--muted); font-size: .64rem; text-align: center; }

.paste-box { display: grid; gap: 7px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.paste-box span, .contact-form > label > span, .trip-details > label > span { font-size: .74rem; font-weight: 850; }
.paste-box textarea { width: 100%; padding: 0; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--ink); font-size: .95rem; line-height: 1.55; }
.input-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0 13px; }
.soft-button, .plain-button { padding: 8px 10px; border-radius: 9px; font-size: .72rem; font-weight: 800; cursor: pointer; }
.soft-button { border: 1px solid var(--line); background: #fff; }
.plain-button { border: 0; background: transparent; color: var(--muted); }
.detected-card { display: grid; gap: 3px; margin-bottom: 13px; padding: 13px; border-radius: 14px; background: #e8f2e5; }
.detected-card small, .detected-card span { color: #567056; font-size: .66rem; }
.detected-card strong { overflow-wrap: anywhere; font-size: .85rem; }
.map-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.map-link { min-height: 77px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--ink); text-decoration: none; text-align: center; font-size: .68rem; font-weight: 800; }
.map-link span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; font-weight: 900; }
.map-link.google span { background: #4285f4; }
.map-link.amap span { background: #3aa65c; }
.map-link.apple span { background: #333; }
.map-link.disabled { opacity: .38; pointer-events: none; }
.helper-actions { display: grid; gap: 9px; margin-top: 14px; }
.pig-button, .show-button { min-height: 50px; border-radius: 14px; font-weight: 850; cursor: pointer; }
.pig-button { border: 0; background: var(--red); color: #fff; }
.show-button { border: 1px solid #e8b7b0; background: #fff1ee; color: #8c312b; }
.map-tip { margin: 14px 4px 0; color: var(--muted); font-size: .68rem; }

.phrase-tabs { display: flex; gap: 7px; overflow-x: auto; margin: 10px 0 14px; }
.phrase-tabs button { flex: 1 0 auto; padding: 9px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .72rem; font-weight: 800; cursor: pointer; }
.phrase-tabs button.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.phrase-card { min-height: 330px; display: flex; flex-direction: column; justify-content: center; padding: 26px 22px; border: 1px solid #d8c5aa; border-radius: 24px; background: linear-gradient(145deg, #fffdf9, #f2e4cd); text-align: center; box-shadow: var(--shadow); }
.phrase-card > span { align-self: center; padding: 5px 9px; border-radius: 999px; background: var(--red); color: #fff; font-size: .63rem; font-weight: 900; letter-spacing: .1em; }
.phrase-card p { margin: 24px 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(2rem, 9vw, 3.25rem); line-height: 1.35; font-weight: 800; }
.phrase-card hr { width: 64%; border: 0; border-top: 1px solid #d5c6b3; }
.phrase-card small { margin-top: 12px; font-size: .92rem; }
.phrase-card em { margin-top: 13px; color: var(--muted); font-size: .74rem; font-style: normal; overflow-wrap: anywhere; }
.phrase-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 9px; margin-top: 13px; }
.primary-action, .secondary-action { min-height: 49px; border-radius: 13px; font-weight: 850; cursor: pointer; }
.primary-action { border: 0; background: #3b85d4; color: #fff; }
.secondary-action { border: 1px solid var(--line); background: #fff; }
.safety-note { padding: 11px; border-radius: 11px; background: #fff0e2; color: #7b4a28; font-size: .7rem; text-align: center; }

.favorite-heading { margin-bottom: 15px; }
.favorite-list { display: grid; gap: 10px; }
.favorite-card { padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.favorite-card-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.favorite-card strong { overflow-wrap: anywhere; font-size: .87rem; }
.favorite-card small { display: block; margin-top: 4px; color: var(--muted); font-size: .67rem; }
.delete-favorite { flex: 0 0 auto; border: 0; background: transparent; color: #9b948b; font-size: .72rem; cursor: pointer; }
.favorite-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.favorite-nav a { min-height: 38px; display: grid; place-items: center; border-radius: 10px; background: #f0ece5; color: var(--ink); text-decoration: none; font-size: .68rem; font-weight: 800; }
.empty-state { padding: 34px 18px; border: 1px dashed #cfc2af; border-radius: 19px; text-align: center; }
.empty-state span { font-size: 2.2rem; }
.empty-state h2 { margin: 8px 0 5px; font-size: 1rem; }
.empty-state p { margin: 0; color: var(--muted); font-size: .72rem; }
.storage-note { color: var(--muted); font-size: .67rem; text-align: center; }

.contact-heading { min-height: 150px; overflow: hidden; position: relative; display: flex; align-items: center; padding: 19px; border-radius: 23px; background: linear-gradient(135deg, #f0dec7, #dfe9dc); }
.contact-heading > div { position: relative; z-index: 2; width: 72%; }
.contact-heading h1 { font-size: 1.75rem; }
.contact-heading p:last-child { margin: 9px 0 0; color: var(--muted); font-size: .76rem; }
.contact-heading img { position: absolute; width: 39%; right: -5%; bottom: -24%; }
.contact-form { display: grid; gap: 12px; margin-top: 16px; }
.contact-form fieldset { margin: 0; padding: 0; border: 0; }
.contact-form legend { margin-bottom: 8px; font-size: .77rem; font-weight: 850; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-grid label { cursor: pointer; }
.choice-grid input { position: absolute; opacity: 0; }
.choice-grid span { min-height: 45px; display: flex; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: .72rem; font-weight: 750; }
.choice-grid input:checked + span { border-color: var(--red); background: #fff0ed; box-shadow: inset 0 0 0 1px var(--red); }
.contact-form > label { display: grid; gap: 6px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.contact-form textarea { resize: vertical; }
.trip-details { display: grid; gap: 12px; }
.trip-details > label { display: grid; gap: 6px; }
.direct-wechat-prompt { display: grid; gap: 12px; padding: 12px; border: 1px solid #a9dfbe; border-radius: 15px; background: #edfff3; box-shadow: 0 7px 18px rgba(36,145,82,.08); }
.direct-wechat-top { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; }
.direct-wechat-top > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #d3f4df; }
.direct-wechat-prompt p { display: grid; gap: 2px; margin: 0; }
.direct-wechat-prompt strong { font-size: .76rem; }
.direct-wechat-prompt small { color: #55715e; font-size: .61rem; line-height: 1.45; }
.group-qr-card { display: grid; grid-template-columns: minmax(132px, 44%) 1fr; align-items: center; gap: 14px; padding: 11px; border-radius: 14px; background: #fff; box-shadow: 0 5px 15px rgba(33,108,66,.08); }
.group-qr-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.group-qr-card p strong { color: #222; font-size: 1rem; }
.direct-wechat-copy { min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: #25b667; color: #fff; font-size: .67rem; font-weight: 900; cursor: pointer; }
.contact-submit, .copy-inquiry { min-height: 48px; border-radius: 13px; font-weight: 850; cursor: pointer; }
.contact-submit { border: 0; background: var(--red); color: #fff; }
.copy-inquiry { border: 1px solid var(--line); background: #fff; }
.contact-note { margin: 12px 4px 0; color: var(--muted); font-size: .67rem; }
.email-contact { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; margin-top: 15px; padding: 12px; border: 1px solid #d8d1f0; border-radius: 15px; background: #f8f5ff; box-shadow: 0 7px 18px rgba(84,62,145,.07); }
.email-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #7c68b8; color: #fff; font-size: 1.05rem; font-weight: 950; }
.email-contact > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.email-contact strong { font-size: .76rem; }
.email-contact small { overflow-wrap: anywhere; color: #625b79; font-family: "PingFang SC", sans-serif; font-size: .62rem; }
.email-actions { display: grid; gap: 5px; }
.email-actions a, .email-actions button { min-width: 62px; padding: 6px 8px; border-radius: 9px; font-size: .62rem; font-weight: 850; text-align: center; text-decoration: none; cursor: pointer; }
.email-actions a { background: #7c68b8; color: #fff; }
.email-actions button { border: 1px solid #cfc5ea; background: #fff; color: #5b4b8c; }

.bottom-nav { position: fixed; z-index: 60; left: 50%; bottom: 0; width: min(100%, 560px); min-height: calc(66px + var(--safe-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 14px var(--safe-bottom); border-top: 1px solid rgba(82,68,53,.13); background: rgba(255,253,248,.94); backdrop-filter: blur(16px); }
.bottom-nav button { position: relative; display: grid; justify-items: center; gap: 2px; border: 0; background: transparent; color: #79736b; font-size: .67rem; cursor: pointer; }
.bottom-nav button > span { font-size: 1.3rem; line-height: 1; }
.bottom-nav button.active { color: var(--red); font-weight: 850; }
.bottom-nav i { position: absolute; top: -2px; left: calc(50% + 9px); min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: .58rem; font-style: normal; }

.app-dialog { width: min(440px, calc(100% - 24px)); margin: auto; padding: 20px; border: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.app-dialog::backdrop { background: rgba(33,28,24,.46); backdrop-filter: blur(3px); }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; }
.dialog-heading h2 { margin: 0; font-size: 1.35rem; }
.dialog-heading > button { width: 35px; height: 35px; border: 0; border-radius: 50%; background: #eee8df; font-size: 1.35rem; cursor: pointer; }
.city-list { display: grid; gap: 8px; margin-top: 17px; }
.city-list button { display: flex; justify-content: space-between; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 850; cursor: pointer; }
.city-list small { color: var(--muted); font-weight: 500; }
.compact-dialog { text-align: center; }
.compact-dialog h2 { margin: 7px 0; }
.compact-dialog p { color: var(--muted); font-size: .78rem; }
.coming-icon { font-size: 2.5rem; }
.dialog-primary { width: 100%; padding: 12px; border: 0; border-radius: 11px; background: var(--ink); color: #fff; font-weight: 850; cursor: pointer; }
.map-choice-dialog { padding: 21px; }
.map-choice-intro { margin: 10px 0 15px; color: var(--muted); font-family: "PingFang SC", sans-serif; font-size: .76rem; }
.map-choice-grid { display: grid; gap: 9px; }
.map-choice { min-height: 68px; display: grid; grid-template-columns: 43px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 11px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 5px 14px rgba(51,41,31,.05); }
.map-choice > span { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-weight: 950; }
.map-choice strong { align-self: end; font-size: .89rem; }
.map-choice small { align-self: start; color: var(--muted); font-family: "PingFang SC", sans-serif; font-size: .65rem; }
.map-choice.amap > span { background: #28a65e; }
.map-choice.google > span { background: #4285f4; }
.map-choice.apple > span { background: #333; font-size: 1.15rem; }
.map-choice.community { border-color: #bce7d0; background: #f1fff6; }
.map-choice.community > span { background: #35a968; font-size: 1.1rem; }
.map-choice-extra-list { display: contents; }
.map-choice-extra-list[hidden] { display: none; }
.map-choice.private-bath { border-color: #ead7b4; background: #fffaf0; }
.map-choice.private-bath > span { background: #c58a3a; }
.map-choice.reservation { border-color: #efd7b1; background: #fff9ed; }
.map-choice.reservation > span { background: #cf8b32; }
.map-choice-note { margin: 12px 2px 0; color: #817a72; font-family: "PingFang SC", sans-serif; font-size: .62rem; line-height: 1.45; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(82px + var(--safe-bottom)); max-width: calc(100% - 36px); transform: translate(-50%, 16px); padding: 11px 15px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: var(--shadow); font-size: .76rem; text-align: center; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 首页视觉：按产品效果图收紧为清晰的手机工具入口 */
.topbar {
  position: relative;
  display: grid;
  gap: 8px;
  overflow: hidden;
  padding: 12px 15px 9px;
  background:
    radial-gradient(circle at 93% 8%, rgba(243,154,145,.23), transparent 90px),
    linear-gradient(180deg, #fffaf3, #f7f2e8);
  border-bottom: 0;
  backdrop-filter: none;
}
.header-scene { position: absolute; z-index: 0; width: 178px; height: 90px; right: -23px; top: -5px; opacity: .78; pointer-events: none; }
.brand { position: relative; z-index: 2; width: 100%; min-height: 58px; gap: 10px; }
.brand-mascot { position: relative; flex: 0 0 62px; width: 62px; height: 58px; overflow: hidden; border-radius: 23px; background: #f2ded2; box-shadow: 0 6px 15px rgba(56,42,29,.09); }
.brand-mascot img { position: absolute; width: 82px; max-width: none; left: -10px; top: -6px; }
.brand > span:last-child { gap: 1px; }
.brand strong { font-size: clamp(1.05rem, 4.6vw, 1.32rem); font-weight: 950; letter-spacing: -.045em; text-shadow: 0 1px rgba(255,255,255,.8); }
.brand small { color: #655f59; font-size: clamp(.62rem, 2.55vw, .74rem); line-height: 1.3; font-family: "PingFang SC", sans-serif; font-weight: 550; }
.city-button { position: relative; z-index: 2; width: fit-content; min-height: 36px; display: grid; grid-template-columns: auto auto auto; align-items: center; justify-self: start; gap: 7px; padding: 0 11px; border-color: #ded8d0; background: rgba(255,255,255,.88); box-shadow: 0 5px 14px rgba(48,38,26,.06); text-align: left; cursor: pointer; }
.city-button span { color: var(--red); font-size: .68rem; }
.city-button strong { max-width: 180px; overflow: hidden; color: #54504b; font-size: .72rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.city-button strong i { color: var(--ink); font-style: normal; }
.city-button b { color: #8b8580; font-size: .95rem; }
.header-controls { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; justify-self: start; }
.language-picker { min-height: 36px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #ded8d0; border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 5px 14px rgba(48,38,26,.06); }
.language-picker > span { color: var(--red); font-size: .66rem; font-weight: 900; white-space: nowrap; }
.language-picker select { max-width: 64px; appearance: none; border: 0; outline: 0; background: transparent; color: #54504b; font-family: "PingFang SC", sans-serif; font-size: .7rem; font-weight: 760; cursor: pointer; }
html[lang="en"] .brand strong { font-size: clamp(.98rem, 4vw, 1.2rem); letter-spacing: -.035em; }
html[lang="en"] .brand small { font-size: clamp(.58rem, 2.25vw, .69rem); }
html[lang="en"] .travel-hero-copy strong { font-size: clamp(.82rem, 3.5vw, 1rem); line-height: 1.25; }
html[lang="en"] .travel-hero-copy small { font-size: .55rem; }
html[lang="en"] .quick-section .section-heading h1 { font-size: clamp(1.55rem, 6.8vw, 2rem); letter-spacing: -.07em; }
html[lang="en"] .tool-card strong { font-size: clamp(1.06rem, 4.7vw, 1.38rem); letter-spacing: -.045em; }
html[lang="en"] .tool-card small { max-width: 108px; font-size: clamp(.62rem, 2.45vw, .73rem); line-height: 1.38; }
html[lang="en"] .tattoo-feature-card small { max-width: 220px; }
html[lang="en"] .tattoo-callout { font-size: .68rem; }
html[lang="en"] .bottom-nav button { font-size: .62rem; }
html[lang="en"] .language-picker > span { font-size: .62rem; }

.view[data-view="home"] { padding-top: 8px; }
.quick-section { margin-top: 2px; }
.travel-hero {
  position: relative;
  width: calc(100% - 16px);
  min-height: 132px;
  overflow: hidden;
  margin: 0 auto 10px;
  border-radius: 19px;
  background: #f7ead5 url("./heitu-travel-hero.png") 42% center / cover no-repeat;
  box-shadow: 0 12px 30px rgba(74,48,23,.12);
}
.travel-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 41%, rgba(255,250,241,.14) 55%, rgba(255,250,241,.84) 100%); }
.travel-hero-copy { position: absolute; z-index: 2; width: 54%; right: 4px; top: 11px; display: grid; gap: 3px; text-align: center; transform: rotate(-2deg); }
.travel-hero-copy small { color: #9b493b; font-family: "Hannotate SC", "STKaiti", "KaiTi", serif; font-size: .62rem; font-weight: 700; letter-spacing: .07em; }
.travel-hero-copy strong { color: #24211f; font-family: "Hannotate SC", "STKaiti", "KaiTi", serif; font-size: clamp(.9rem, 4vw, 1.12rem); line-height: 1.3; letter-spacing: .02em; text-shadow: 0 1px #fff; }
.quick-section .section-heading { justify-content: flex-start; gap: 7px; margin: 0 3px 10px; }
.quick-section .section-heading h1 { margin: 0; font-size: clamp(1.7rem, 7.8vw, 2.25rem); line-height: 1.05; font-weight: 950; letter-spacing: -.065em; }
.accent-spark { align-self: flex-start; color: #ee746b; font-size: 1.55rem; font-weight: 900; transform: rotate(-17deg); }
.primary-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
.tool-card { position: relative; min-height: 205px; display: block; overflow: hidden; padding: 22px 19px; border: 1px solid rgba(62,51,40,.045); border-radius: 27px; color: var(--ink); box-shadow: 0 12px 27px rgba(55,43,31,.085), inset 0 1px rgba(255,255,255,.62); transition: transform .18s ease, box-shadow .18s ease; }
.tool-card::before { content: ""; position: absolute; width: 92px; height: 92px; left: -28px; bottom: -38px; border-radius: 50%; background: rgba(255,255,255,.23); }
.tool-card::after { content: ""; position: absolute; width: 145px; height: 82px; right: -29px; bottom: -31px; border-radius: 50%; background: rgba(255,255,255,.28); }
.tool-card > span:first-child { position: relative; z-index: 2; display: grid; gap: 4px; }
.tool-card strong { font-size: clamp(1.27rem, 5.6vw, 1.62rem); line-height: 1.1; font-weight: 950; letter-spacing: -.055em; }
.tool-card small { max-width: 155px; color: #4f4a45; font-size: clamp(.71rem, 2.8vw, .82rem); line-height: 1.48; font-family: "PingFang SC", sans-serif; font-weight: 560; }
.tool-illustration { position: absolute; z-index: 2; right: 5px; bottom: 5px; width: 70%; max-width: 152px; filter: drop-shadow(0 8px 7px rgba(50,40,30,.13)); pointer-events: none; }
.tool-illustration svg { width: 100%; height: auto; display: block; overflow: visible; }
.tool-card > b { position: absolute; z-index: 3; left: 18px; bottom: 18px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: inset 0 1px rgba(255,255,255,.7); font-size: 1.65rem; font-weight: 400; }
.toilet-card { background: radial-gradient(circle at 88% 10%, rgba(255,255,255,.55), transparent 62px), linear-gradient(145deg, #dff8e6, #bdecc9); }
.toilet-card > b { color: #27945b; }
.smoking-card { background: radial-gradient(circle at 85% 9%, rgba(255,255,255,.45), transparent 58px), linear-gradient(145deg, #fff1c9, #fbdc91); }
.smoking-card > b { color: #ca8112; }
.convenience-card { background: radial-gradient(circle at 86% 8%, rgba(255,255,255,.47), transparent 62px), linear-gradient(145deg, #ffdfdc, #ffbbb6); }
.convenience-card > b { color: #df5d57; }
.anime-card { background: radial-gradient(circle at 85% 8%, rgba(255,255,255,.48), transparent 62px), linear-gradient(145deg, #def2ff, #add9fb); }
.anime-card > b { color: #317fbe; }
.anime-card small { max-width: 108px; line-height: 1.38; }
.anime-card .tool-illustration { right: -3px; bottom: 6px; width: 58%; max-width: 128px; }
.tattoo-feature-card { min-height: 205px; background: radial-gradient(circle at 90% 8%, rgba(255,255,255,.5), transparent 70px), linear-gradient(135deg, #fde8ef, #eec4d5); }
.tattoo-feature-card > b { color: #9c4f73; }
.tattoo-feature-card small { max-width: 112px; }
.tattoo-feature-card .tool-illustration { right: -9px; bottom: 2px; width: 68%; max-width: 150px; }
.tattoo-callout { z-index: 3; width: max-content; margin: 7px 0 3px; padding: 5px 8px; border-radius: 999px; background: #a94f78; color: #fff; box-shadow: 0 5px 12px rgba(133,56,91,.18); font-family: "PingFang SC", sans-serif; font-size: .68rem; font-style: normal; font-weight: 900; letter-spacing: 0; }
.wayback-feature-card { min-height: 205px; background: radial-gradient(circle at 91% 6%, rgba(255,255,255,.56), transparent 72px), linear-gradient(135deg, #e4f6f4, #b9e1e7); }
.wayback-feature-card > b { color: #317692; }
.wayback-feature-card small { max-width: 112px; }
.wayback-feature-card .tool-illustration { right: -8px; bottom: 2px; width: 67%; max-width: 150px; }
.wayback-callout { z-index: 3; width: max-content; margin: 7px 0 3px; padding: 5px 8px; border-radius: 999px; background: #347f9e; color: #fff; box-shadow: 0 5px 12px rgba(45,104,129,.2); font-family: "PingFang SC", sans-serif; font-size: .68rem; font-style: normal; font-weight: 900; letter-spacing: 0; }

.home-shortcuts { display: grid; gap: 10px; margin-top: 19px; }
.home-shortcut { width: 100%; min-height: 87px; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid rgba(66,54,43,.07); border-radius: 20px; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 7px 20px rgba(55,43,31,.06); }
.home-shortcut > span:nth-child(2) { display: grid; gap: 3px; }
.home-shortcut strong { font-size: 1.03rem; }
.home-shortcut small { color: #5d5751; font-size: .72rem; }
.home-shortcut small i { font-style: normal; }
.home-shortcut > b { color: #817872; font-size: 1.45rem; }
.shortcut-icon { width: 51px; height: 55px; display: grid; place-items: center; border-radius: 15px; color: #fff; font-size: 1.5rem; font-weight: 900; box-shadow: 0 7px 15px rgba(56,45,35,.1); }
.luggage-shortcut { background: linear-gradient(135deg, #fff7df, #f5e3b9); }
.luggage-shortcut .shortcut-icon { background: linear-gradient(145deg, #d7a34c, #a96f25); }
.favorite-shortcut { background: linear-gradient(135deg, #fff1f0, #fbdedd); }
.favorite-shortcut .shortcut-icon { background: linear-gradient(145deg, #ff7169, #e44942); }
.japanese-home-shortcut { background: linear-gradient(135deg, #edf6fc, #dcecf7); }
.japanese-home-shortcut .shortcut-icon { background: linear-gradient(145deg, #6b8da6, #3f6179); font-family: "Hiragino Mincho ProN", serif; }
.spread-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.spread-action { min-width: 0; min-height: 78px; display: grid; grid-template-columns: 35px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 11px 12px; border: 1px solid rgba(66,54,43,.07); border-radius: 18px; color: var(--ink); text-align: left; box-shadow: 0 7px 18px rgba(55,43,31,.055); cursor: pointer; }
.spread-action > span { grid-row: 1 / 3; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.72); font-size: 1rem; }
.spread-action strong { align-self: end; overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.spread-action small { align-self: start; overflow: hidden; color: #6c655e; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.spread-action.save-site { background: linear-gradient(135deg, #fff5da, #f6e5b9); }
.spread-action.share-site { background: linear-gradient(135deg, #e9f6f2, #d3ebe5); }
.community-maps { margin-top: 23px; }
.community-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 3px 11px; }
.community-heading small { display: block; margin-bottom: 1px; color: #c75449; font-size: .59rem; font-weight: 900; letter-spacing: .12em; }
.community-heading h2 { margin: 0; font-size: 1.28rem; font-weight: 950; letter-spacing: -.045em; }
.community-heading > span { color: #7b746d; font-size: .65rem; }
.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.community-card { min-width: 0; min-height: 82px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px; border: 1px solid rgba(66,54,43,.065); border-radius: 18px; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 7px 18px rgba(55,43,31,.055); }
.community-card > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.community-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 900; }
.community-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #665f58; font-family: "PingFang SC", sans-serif; font-size: .61rem; }
.community-card > b { color: #7f7770; font-size: 1.16rem; }
.community-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; font-size: 1.25rem; font-weight: 950; box-shadow: inset 0 1px rgba(255,255,255,.45); }
.community-toilet { background: #e7f7f4; } .community-toilet .community-icon { background: linear-gradient(145deg,#62d2cb,#35aaa4); }
.community-onsen { background: #fff0df; } .community-onsen .community-icon { background: linear-gradient(145deg,#efb362,#dd8138); }
.community-fishing { background: #e4f4fb; } .community-fishing .community-icon { background: linear-gradient(145deg,#55bfe0,#278caf); }
.community-trash { background: #eaf6e8; }
.community-trash .community-icon { background: linear-gradient(145deg,#75bd71,#438f4b); }
.community-maps > p { margin: 9px 4px 0; color: #7a736c; font-family: "PingFang SC", sans-serif; font-size: .59rem; line-height: 1.45; }

.ask-card { min-height: 174px; margin-top: 18px; padding: 22px 18px; background: radial-gradient(circle at 78% 19%, rgba(255,255,255,.45), transparent 74px), linear-gradient(135deg, #fff0d5, #f7d6a7); color: var(--ink); box-shadow: 0 9px 25px rgba(74,48,23,.09); }
.ask-card::after { right: -27px; top: -57px; background: #fff; opacity: .22; }
.ask-card img { width: 47%; right: -3%; left: auto; bottom: -13%; }
.ask-copy { width: 59%; margin-left: 0; }
.ask-copy small { color: #b75e25; }
.ask-copy strong { margin: 2px 0; font-family: inherit; font-size: 1.55rem; }
.ask-copy em { color: #62564a; font-size: .74rem; }
.ask-copy b { margin-top: 12px; align-self: auto; background: #ed6a2f; color: #fff; }
.coverage-note { margin-top: 12px; }

.wayback-view { padding-top: 10px; }
.wayback-heading { min-height: 130px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 10px; padding: 23px 20px; overflow: hidden; border: 1px solid rgba(49,118,146,.09); border-radius: 25px; background: radial-gradient(circle at 90% 18%, rgba(255,255,255,.7), transparent 66px), linear-gradient(140deg,#e8f7f5,#c5e6ec); box-shadow: 0 10px 24px rgba(51,89,100,.09); }
.wayback-heading h1 { margin: 2px 0 5px; font-size: 2rem; line-height: 1; font-weight: 950; letter-spacing: -.06em; }
.wayback-heading p:last-child { margin: 0; color: #4f676e; font-size: .78rem; }
.wayback-heading-icon { flex: 0 0 auto; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: 0 8px 18px rgba(49,118,146,.12); font-size: 2.5rem; }
.wayback-privacy { margin: 0 3px 14px; color: #65726f; font-size: .68rem; text-align: center; }
.wayback-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wayback-action { min-height: 118px; display: grid; justify-items: start; align-content: center; gap: 3px; padding: 17px; border: 0; border-radius: 22px; color: var(--ink); text-align: left; box-shadow: 0 9px 22px rgba(55,43,31,.08); cursor: pointer; }
.wayback-action.remember { background: linear-gradient(145deg,#fff0d9,#f7cf9d); }
.wayback-action.return { background: linear-gradient(145deg,#e9efff,#cbdaf7); }
.wayback-action > span { font-size: 1.55rem; }
.wayback-action strong { font-size: 1.12rem; font-weight: 950; }
.wayback-action small { color: #625e58; font-size: .68rem; }
.wayback-capture { margin-top: 13px; padding: 18px; border: 1px solid #c8e2dc; border-radius: 23px; background: #f5fffb; box-shadow: 0 10px 24px rgba(55,91,79,.08); }
.wayback-capture-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.wayback-capture-head > div { display: grid; gap: 2px; }
.wayback-capture-head small { color: #5d776f; font-size: .66rem; }
.wayback-capture-head strong { font-size: 1.08rem; }
.wayback-capture-head > span { padding: 5px 8px; border-radius: 999px; background: #dcefe9; color: #387060; font-size: .62rem; white-space: nowrap; }
.wayback-address { margin: 14px 0 4px; color: #252321; font-size: .92rem; font-weight: 750; line-height: 1.55; }
.wayback-coordinates { margin: 0 0 14px; color: #7a746e; font-size: .64rem; }
.wayback-labels { margin: 0; padding: 0; border: 0; }
.wayback-labels legend { margin-bottom: 8px; font-size: .73rem; font-weight: 850; }
.wayback-labels > div { display: flex; flex-wrap: wrap; gap: 7px; }
.wayback-labels label { cursor: pointer; }
.wayback-labels input { position: absolute; opacity: 0; pointer-events: none; }
.wayback-labels span { display: block; padding: 7px 10px; border: 1px solid #d8d3cb; border-radius: 999px; background: #fff; color: #514d48; font-size: .68rem; font-weight: 750; }
.wayback-labels input:checked + span { border-color: #3e8ba4; background: #3e8ba4; color: #fff; box-shadow: 0 5px 11px rgba(62,139,164,.16); }
.wayback-note { display: grid; gap: 7px; margin-top: 14px; }
.wayback-note > span { font-size: .73rem; font-weight: 850; }
.wayback-note input { min-height: 45px; padding: 0 13px; border: 1px solid #d8d3cb; border-radius: 13px; background: #fff; color: var(--ink); font: inherit; font-size: .78rem; outline: 0; }
.wayback-note input:focus { border-color: #3e8ba4; box-shadow: 0 0 0 3px rgba(62,139,164,.12); }
.wayback-save { width: 100%; min-height: 48px; margin-top: 14px; border: 0; border-radius: 15px; background: linear-gradient(135deg,#3f91a5,#2d748f); color: #fff; font-size: .86rem; font-weight: 900; box-shadow: 0 8px 17px rgba(45,116,143,.2); cursor: pointer; }
.wayback-saved { margin-top: 21px; }
.wayback-saved-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 3px 10px; }
.wayback-saved-head small { color: #3e7890; font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.wayback-saved-head h2 { margin: 2px 0 0; font-size: 1.25rem; letter-spacing: -.04em; }
.wayback-saved-head > span { color: #7a746e; font-size: .68rem; }
.wayback-list { display: grid; gap: 10px; }
.wayback-empty { padding: 27px 18px; border: 1px dashed #cfc7bc; border-radius: 19px; background: rgba(255,255,255,.56); text-align: center; }
.wayback-empty span { display: block; margin-bottom: 6px; font-size: 1.8rem; }
.wayback-empty strong { display: block; font-size: .9rem; }
.wayback-empty p { margin: 5px 0 0; color: #77706a; font-size: .68rem; line-height: 1.5; }
.wayback-place { padding: 15px; border: 1px solid #ddd6cc; border-radius: 19px; background: #fff; box-shadow: 0 7px 18px rgba(55,43,31,.055); }
.wayback-place-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.wayback-place-title { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 9px; min-width: 0; }
.wayback-place-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #e5f2f3; font-size: 1rem; }
.wayback-place-title strong { display: block; font-size: .9rem; }
.wayback-place-title small { display: block; margin-top: 2px; color: #77706a; font-size: .6rem; }
.wayback-delete { flex: 0 0 auto; padding: 5px 7px; border: 0; background: transparent; color: #9a9189; font-size: .62rem; cursor: pointer; }
.wayback-place-address { margin: 10px 0 3px; color: #3f3a36; font-size: .72rem; font-weight: 650; line-height: 1.5; }
.wayback-place-note { margin: 4px 0 0; padding: 7px 9px; border-radius: 9px; background: #fff5e6; color: #775a3b; font-size: .67rem; }
.wayback-place-coords { margin: 5px 0 0; color: #8b847d; font-size: .58rem; }
.wayback-place-actions { display: grid; grid-template-columns: 1.05fr .9fr .9fr; gap: 7px; margin-top: 11px; }
.wayback-place-actions button { min-height: 39px; border-radius: 12px; font: inherit; font-size: .72rem; font-weight: 850; cursor: pointer; }
.wayback-navigate { border: 0; background: #347f9e; color: #fff; }
.wayback-copy { padding: 0 12px; border: 1px solid #d3ccc3; background: #fff; color: #5c5550; }
.wayback-share { padding: 0 9px; border: 1px solid #bcdcd4; background: #eef8f5; color: #346b5e; }
.wayback-nav-place { margin: 2px 0 13px; padding: 13px; border-radius: 15px; background: #eef7f7; }
.wayback-nav-place strong { display: block; font-size: .95rem; }
.wayback-nav-place p { margin: 5px 0 0; color: #4d4a46; font-size: .7rem; line-height: 1.45; }
.wayback-nav-place small { display: block; margin-top: 5px; color: #8a6847; font-size: .65rem; }
.copy-wayback-place { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid #d3ccc3; border-radius: 13px; background: #fff; color: var(--ink); font-weight: 850; cursor: pointer; }
.save-site-guide { margin: 13px 0 15px; padding: 14px; border-radius: 16px; background: #fff8e7; color: #50483e; }
.save-site-guide strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: .92rem; }
.save-site-guide p { margin: 0; font-size: .72rem; line-height: 1.65; }
.save-site-guide ol { margin: 9px 0 0; padding-left: 1.25rem; font-size: .72rem; line-height: 1.7; }
.copy-site-link { width: 100%; min-height: 44px; margin-top: 9px; border: 1px solid #d7cfc4; border-radius: 13px; background: #fff; color: var(--ink); font-weight: 850; cursor: pointer; }
.shared-place-card { margin: 13px 0 10px; padding: 14px; border: 1px solid #cfe1df; border-radius: 16px; background: #eef8f6; }
.shared-place-card > strong { display: block; font-size: 1.05rem; }
.shared-place-card > p { margin: 7px 0 0; color: #47433f; font-size: .72rem; line-height: 1.55; }
.shared-place-card > small { display: block; margin-top: 6px; color: #77716b; font-size: .61rem; }
.shared-place-note { padding: 7px 9px; border-radius: 9px; background: #fff4dc; color: #765837 !important; }
.shared-place-nav { margin-bottom: 10px; }
.shared-place-privacy { margin: 10px 2px 12px; color: #77716b; font-size: .62rem; line-height: 1.5; }

.contact-heading { min-height: 190px; align-items: flex-start; padding: 24px 19px; background: linear-gradient(145deg, #fff5e8, #e8efe4); box-shadow: 0 9px 24px rgba(65,49,32,.07); }
.contact-heading > div { width: 66%; }
.contact-heading h1 { font-family: "Arial Rounded MT Bold", "PingFang SC", sans-serif; font-size: 1.85rem; font-weight: 950; }
.contact-heading img { width: 46%; right: -2%; bottom: -7%; filter: drop-shadow(0 8px 12px rgba(58,41,26,.14)); }
.wechat-contact { margin-top: 19px; }
.wechat-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: #7b746c; }
.wechat-divider span { height: 1px; background: #d8d0c5; }
.wechat-divider strong { font-size: .72rem; }
.wechat-copy { width: 100%; min-height: 62px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 11px; margin-top: 11px; padding: 10px 13px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #3fc77b, #21aa62); color: #fff; text-align: left; box-shadow: 0 8px 20px rgba(33,170,98,.2); cursor: pointer; }
.wechat-copy > span:first-child { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.2); font-size: 1.05rem; font-weight: 950; }
.wechat-copy > span:nth-child(2) { display: grid; }
.wechat-copy strong { font-size: .86rem; }
.wechat-copy small { color: rgba(255,255,255,.82); font-size: .7rem; }
.wechat-copy b { padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: .68rem; }
.wechat-contact > p { margin: 8px 3px 0; color: var(--muted); font-size: .64rem; text-align: center; }

@media (min-width: 700px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100dvh - 48px); border-radius: 28px; overflow: hidden; }
  .bottom-nav { bottom: 24px; border-radius: 0 0 28px 28px; }
  .tool-card:hover, .mini-card:hover, .ask-card:hover, .assistant-cta:hover { transform: translateY(-2px); }
}
@media (max-width: 360px) {
  .brand-mascot { flex-basis: 54px; width: 54px; height: 50px; }
  .brand-mascot img { width: 70px; }
  .tool-card { min-height: 188px; padding: 18px 14px; }
  .tool-card > b { left: 13px; bottom: 13px; }
  .tool-illustration { right: 1px; bottom: 3px; width: 72%; }
  .choice-grid { grid-template-columns: 1fr; }
  .travel-hero { width: calc(100% - 12px); min-height: 124px; }
  .travel-hero-copy { width: 55%; right: 2px; top: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 找黑豚三步流程：只作用于 contact 视图，不改变首页结构与样式 */
.contact-flow { --contact-navy: #102b4e; --contact-pink: #ff3365; --contact-blue: #208eea; padding-top: 10px; }
.contact-flow-bar { min-height: 43px; display: grid; grid-template-columns: 92px 1fr 92px; align-items: center; margin-bottom: 9px; }
.contact-flow-bar .back-button { width: max-content; margin: 0; }
.contact-progress { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.contact-progress li { position: relative; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #e7ebef; color: #8a949f; font-size: .64rem; font-weight: 950; }
.contact-progress li + li::before { content: ""; position: absolute; width: 16px; height: 2px; right: 100%; top: 50%; background: #dbe1e6; transform: translateY(-50%); }
.contact-progress li.active { background: var(--contact-navy); color: #fff; box-shadow: 0 4px 10px rgba(16,43,78,.2); }
.contact-progress li.done { background: #f6b92d; color: #fff; }
.contact-progress li.done + li::before, .contact-progress li.active + li::before { background: #f6c95f; }
.contact-step[hidden] { display: none !important; }
.contact-step.active { animation: contact-step-in .24s ease both; }
@keyframes contact-step-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.contact-choice-heading { min-height: 228px; align-items: flex-start; padding: 27px 20px; border: 1px solid rgba(76,111,139,.08); border-radius: 27px; background: radial-gradient(circle at 80% 12%, rgba(255,255,255,.72), transparent 88px), linear-gradient(145deg,#f1f9ff,#d8edfb 55%,#fff4ec); box-shadow: 0 11px 28px rgba(51,79,100,.1); }
.contact-choice-heading > div { width: 70%; }
.contact-choice-heading h1 { color: #101f35; font-family: "Hannotate SC", "STKaiti", "KaiTi", serif; font-size: clamp(1.9rem, 8vw, 2.45rem); line-height: 1.18; letter-spacing: -.04em; }
.contact-choice-heading p:last-child { max-width: 260px; color: #536170; font-size: .76rem; line-height: 1.68; }
.contact-choice-heading img { width: 43%; right: -2%; bottom: -7%; }
.contact-paths { display: grid; gap: 12px; margin-top: 15px; }
.contact-path { position: relative; min-height: 116px; display: grid; grid-template-columns: 64px minmax(0,1fr) 28px; align-items: center; gap: 15px; overflow: hidden; padding: 16px; border: 1px solid transparent; border-radius: 22px; color: var(--contact-navy); text-align: left; box-shadow: 0 7px 18px rgba(39,57,74,.065); cursor: pointer; }
.contact-path::after { content: ""; position: absolute; width: 105px; height: 105px; right: -37px; top: -39px; border-radius: 50%; background: rgba(255,255,255,.42); }
.contact-path.travel-path { border-color: #cfe3f3; background: #edf6fc; }
.contact-path.other-path { border-color: #efd8d4; background: #fbefec; }
.contact-path > span:nth-child(2) { position: relative; z-index: 2; display: grid; gap: 7px; }
.contact-path strong { font-size: 1.03rem; line-height: 1.3; font-weight: 950; }
.contact-path small { color: #647183; font-size: .76rem; line-height: 1.55; }
.contact-path > b { position: relative; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.84); font-size: 1.55rem; font-weight: 500; }
.path-icon { position: relative; z-index: 2; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: rgba(255,255,255,.68); font-size: 1.75rem; box-shadow: 0 4px 12px rgba(62,56,50,.055); }
.travel-path .path-icon { background: #e2f1fb; }
.other-path .path-icon { background: #f8e1dd; }
.contact-trust-link { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 7px; margin: 26px auto 3px; color: #657386; font-size: .78rem; text-underline-offset: 4px; }
.contact-trust-link span { font-size: 1.15rem; text-decoration: none; }

.travel-inquiry-heading { position: relative; margin: 5px 0 18px; padding: 23px 20px 18px; overflow: hidden; border-radius: 24px; background: linear-gradient(145deg,#f8fbff,#edf6fd); }
.travel-inquiry-heading::after { content: "✈"; position: absolute; right: 19px; top: 13px; color: #d9eafa; font-size: 4.3rem; transform: rotate(-9deg); }
.travel-inquiry-heading h2 { position: relative; z-index: 2; margin: 3px 0 6px; color: var(--contact-navy); font-family: "Hannotate SC", "STKaiti", "KaiTi", serif; font-size: 2.15rem; letter-spacing: -.04em; }
.travel-inquiry-heading p:last-child { position: relative; z-index: 2; margin: 0; color: #5b6875; font-size: .8rem; }
.travel-inquiry-form { display: grid; gap: 23px; }
.travel-inquiry-form fieldset { margin: 0; padding: 0; border: 0; }
.travel-inquiry-form legend { width: 100%; display: flex; align-items: center; gap: 9px; margin-bottom: 11px; color: var(--contact-navy); }
.travel-inquiry-form legend > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--contact-navy); color: #fff; font-size: .72rem; font-style: normal; font-weight: 950; }
.travel-inquiry-form legend > span { display: flex; align-items: baseline; gap: 7px; font-size: 1.02rem; font-weight: 950; }
.travel-inquiry-form legend small { color: #8e98a3; font-size: .64rem; font-weight: 700; }
.travel-choice-grid { display: grid; gap: 10px; }
.service-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.timing-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.travel-choice-grid label { cursor: pointer; }
.travel-choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.travel-choice-grid label > span { min-height: 110px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 10px 7px; border: 1.5px solid #e2e4e5; border-radius: 14px; background: #fff; color: var(--contact-navy); text-align: center; box-shadow: 0 4px 12px rgba(37,56,74,.035); transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.travel-choice-grid label:nth-child(1) > span { background: #fff5f7; }
.travel-choice-grid label:nth-child(2) > span { background: #f3f9ff; }
.travel-choice-grid label:nth-child(3) > span { background: #f1fbf7; }
.travel-choice-grid label:nth-child(4) > span { background: #f5f7f9; }
.travel-choice-grid.service-choices label > span { background: #fffdfa; }
.travel-choice-grid b { color: #53657d; font-size: 1.7rem; }
.travel-choice-grid strong { font-size: .78rem; line-height: 1.35; }
.travel-choice-grid input:checked + span { border-color: var(--contact-pink); background: #fff0f4; box-shadow: 0 0 0 2px rgba(255,51,101,.12), 0 8px 20px rgba(255,51,101,.09); transform: translateY(-1px); }
.timing-choices label > span { min-height: 96px; gap: 7px; padding: 8px 3px; }
.timing-choices b { font-size: 1.4rem; }
.timing-choices strong { font-size: .72rem; white-space: nowrap; }
.travel-form-note { width: max-content; max-width: 94%; display: grid; gap: 2px; margin: -6px 0 0 9px; padding: 9px 14px; background: linear-gradient(100deg,#fff7c9,#fff2a9); color: #4d432e; font-family: "Hannotate SC", "STKaiti", "KaiTi", serif; transform: rotate(-2deg); }
.travel-form-note span { font-size: .82rem; font-weight: 850; }
.travel-form-note small { font-size: .66rem; }
.travel-inquiry-form .contact-submit { min-height: 61px; border-radius: 14px; background: #e35f59; font-size: 1.05rem; box-shadow: 0 7px 18px rgba(195,70,64,.17); }
.travel-inquiry-form .contact-submit span { margin-left: 8px; font-size: 1.25rem; }

.channels-hero { position: relative; min-height: 210px; display: flex; align-items: flex-start; justify-content: flex-end; overflow: hidden; padding: 25px 20px; border-radius: 26px; background: linear-gradient(145deg,#dff2ff,#fae7ef); box-shadow: 0 10px 26px rgba(48,76,102,.1); }
.channels-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 47%; background: linear-gradient(0deg,rgba(255,255,255,.56),transparent); }
.channels-hero img { position: absolute; z-index: 2; width: 48%; left: -2%; bottom: -9%; filter: drop-shadow(0 9px 12px rgba(39,51,67,.15)); }
.channels-hero > div { position: relative; z-index: 3; width: 56%; display: grid; gap: 7px; padding: 12px 14px; border-radius: 50% 48% 45% 52%; background: rgba(255,255,255,.9); text-align: center; transform: rotate(-2deg); }
.channels-hero > div > span { font-family: "Hannotate SC", "STKaiti", "KaiTi", serif; font-size: 1.25rem; font-weight: 900; }
.channels-hero strong { color: var(--contact-navy); font-size: .9rem; }
.channels-hero small { color: #5f6873; font-size: .65rem; line-height: 1.5; }
.inquiry-summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin-top: 13px; padding: 13px 14px; border: 1px solid #f1dfad; border-radius: 16px; background: #fff9e8; }
.inquiry-summary > span { color: #8c7652; font-size: .62rem; font-weight: 850; }
.inquiry-summary > strong { grid-column: 1; color: #514735; font-size: .72rem; line-height: 1.45; }
.inquiry-summary button { grid-column: 2; grid-row: 1 / 3; min-height: 34px; padding: 0 10px; border: 1px solid #dfc985; border-radius: 10px; background: #fff; color: #6c592c; font-size: .64rem; font-weight: 850; cursor: pointer; }
.recommended-contact { position: relative; overflow: hidden; margin-top: 14px; padding: 17px 14px 14px; border: 2px solid #64cf8e; border-radius: 21px; background: #f1fff6; box-shadow: 0 8px 21px rgba(37,176,95,.09); }
.recommended-label { position: absolute; right: 0; top: 0; padding: 5px 11px; border-radius: 0 18px 0 13px; background: #28b967; color: #fff; font-size: .62rem; font-weight: 900; }
.wechat-main-row, .contact-channel { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.wechat-main-row > span:nth-child(2), .contact-channel > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.wechat-main-row strong, .contact-channel strong { color: var(--contact-navy); font-size: .85rem; }
.wechat-main-row small, .contact-channel small { overflow-wrap: anywhere; color: #68727c; font-size: .64rem; }
.wechat-main-row button { min-height: 35px; padding: 0 10px; border: 0; border-radius: 10px; background: #24b75f; color: #fff; font-size: .64rem; font-weight: 900; cursor: pointer; }
.channel-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; font-size: 1rem; font-weight: 950; box-shadow: inset 0 1px rgba(255,255,255,.35); }
.wechat-icon { background: linear-gradient(145deg,#32d56f,#12a94c); }
.wechat-qr-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #bce9cc; }
.wechat-qr-row img { width: 96px; height: 96px; display: block; border-radius: 12px; object-fit: cover; }
.wechat-qr-row span { display: grid; gap: 5px; }
.wechat-qr-row strong { color: var(--contact-navy); font-size: .8rem; }
.wechat-qr-row small { color: #64736a; font-size: .64rem; line-height: 1.55; }
.contact-channel-list { display: grid; gap: 9px; margin-top: 12px; }
.contact-channel { min-height: 70px; padding: 10px 12px; border: 1px solid #e0e4e8; border-radius: 17px; background: #fff; color: var(--contact-navy); text-decoration: none; box-shadow: 0 5px 15px rgba(37,56,74,.04); transition: transform .16s ease, box-shadow .16s ease; }
.email-contact-standalone { margin-top: 12px; }
a.contact-channel:active { transform: scale(.985); }
.contact-channel > b { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #f3f5f7; color: #68727c; font-size: 1.25rem; font-weight: 500; }
.xhs-icon { background: linear-gradient(145deg,#ff3d65,#e91340); font-size: .58rem; }
.douyin-icon, .tiktok-icon { background: linear-gradient(145deg,#272727,#050505); }
.bili-icon { background: linear-gradient(145deg,#35bdec,#1596c7); }
.youtube-icon { background: linear-gradient(145deg,#ff3131,#dd0505); }
.email-icon { background: linear-gradient(145deg,#399cff,#1677dd); }
.channel-actions { display: grid; gap: 5px; }
.channel-actions a, .channel-actions button { min-width: 55px; padding: 5px 7px; border-radius: 8px; font-size: .58rem; font-weight: 850; text-align: center; text-decoration: none; cursor: pointer; }
.channel-actions a { background: #2188e5; color: #fff; }
.channel-actions button { border: 1px solid #bcd8ef; background: #fff; color: #23679d; }

@media (max-width: 360px) {
  .contact-flow-bar { grid-template-columns: 78px 1fr 78px; }
  .contact-progress { gap: 12px; }
  .contact-choice-heading { min-height: 208px; padding: 22px 16px; }
  .contact-choice-heading h1 { font-size: 1.78rem; }
  .contact-choice-heading p:last-child { font-size: .69rem; }
  .contact-path { grid-template-columns: 56px minmax(0,1fr) 28px; min-height: 116px; padding: 14px; gap: 10px; }
  .path-icon { width: 56px; height: 56px; border-radius: 15px; }
  .contact-path strong { font-size: .93rem; }
  .service-choices { gap: 7px; }
  .service-choices label > span { min-height: 96px; padding: 8px 4px; }
  .travel-choice-grid strong { font-size: .7rem; }
  .timing-choices { gap: 5px; }
  .timing-choices label > span { min-height: 86px; }
  .timing-choices strong { font-size: .64rem; }
  .channels-hero { min-height: 195px; }
  .channels-hero > div { width: 61%; }
  .wechat-main-row, .contact-channel { grid-template-columns: 43px minmax(0,1fr) auto; gap: 9px; }
  .channel-icon { width: 43px; height: 43px; border-radius: 12px; }
}

/* 2026-09 首页高还原：仅重构首页展示层，业务入口继续使用原 data-* 属性 */
@media screen {
  .app-shell { width: min(100%, 480px); }
  .bottom-nav { width: min(100%, 480px); }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 8px;
    padding: 11px 14px 9px;
    background: #fffaf2;
  }
  .header-scene { display: none; }
  .brand { min-width: 0; min-height: 54px; gap: 8px; }
  .brand-mascot { flex-basis: 50px; width: 50px; height: 50px; border-radius: 18px; }
  .brand-mascot img { width: 68px; left: -9px; top: -5px; }
  .brand > span:last-child { min-width: 0; }
  .brand strong { overflow: hidden; font-size: clamp(.92rem, 3.65vw, 1.08rem); line-height: 1.18; text-overflow: ellipsis; white-space: nowrap; }
  .brand small { overflow: hidden; font-size: clamp(.5rem, 2vw, .6rem); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .header-controls { justify-self: end; gap: 5px; }
  .city-button, .language-picker { min-height: 36px; padding: 0 8px; border-radius: 14px; box-shadow: 0 4px 12px rgba(48,38,26,.055); }
  .city-button { gap: 4px; }
  .city-button strong { max-width: 74px; font-size: .63rem; }
  .city-button b { display: none; }
  .language-picker { display: grid; grid-template-columns: auto; gap: 0; justify-items: start; }
  .language-picker > span { font-size: .53rem; line-height: 1; }
  .language-picker select { max-width: 48px; font-size: .59rem; line-height: 1; }

  .view[data-view="home"] { padding: 6px 14px calc(88px + var(--safe-bottom)); }
  .travel-hero {
    width: 100%;
    min-height: 118px;
    margin: 0 0 9px;
    border: 1px solid rgba(111,81,51,.08);
    border-radius: 22px;
    background-color: #f8e7d8;
    background-image: url("./assets/hero-banner.png");
    background-position: center -31px;
    background-size: 106% auto;
    background-repeat: no-repeat;
    box-shadow: 0 8px 22px rgba(74,48,23,.09);
  }
  .travel-hero::after { background: linear-gradient(90deg, transparent 0 48%, rgba(255,250,241,.08) 58%, rgba(255,250,241,.42) 100%); }
  .travel-hero-copy { width: 51%; right: 2.5%; top: 16%; gap: 2px; transform: rotate(-2.5deg); }
  .travel-hero-copy strong { font-size: clamp(.78rem, 3.25vw, .95rem); line-height: 1.25; }
  .travel-hero-copy small { display: inline-block; width: fit-content; justify-self: center; margin-top: 2px; padding: 2px 7px; border-radius: 5px; background: rgba(255,192,188,.86); font-size: .52rem; }

  .quick-section { margin-top: 0; }
  .quick-section .section-heading { margin: 0 3px 9px; }
  .quick-section .section-heading h1 { font-size: clamp(1.78rem, 8.6vw, 2.35rem); }
  .accent-spark { font-size: 1.45rem; }
  .primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .tool-card {
    height: 176px;
    min-height: 176px;
    padding: 18px 15px;
    border-radius: 23px;
    box-shadow: 0 7px 18px rgba(55,43,31,.07), inset 0 1px rgba(255,255,255,.72);
  }
  .tool-card::before, .tool-card::after { display: none; }
  .tool-copy { position: relative; z-index: 3; width: 67%; display: grid; align-content: start; gap: 5px; }
  .tool-card strong { font-size: clamp(1.16rem, 5.25vw, 1.48rem); line-height: 1.06; }
  .tool-card small { max-width: none; margin: 0; color: #49443f; font-size: clamp(.63rem, 2.55vw, .75rem); line-height: 1.42; font-weight: 620; }
  .tool-illustration {
    right: -8%;
    bottom: -5%;
    width: 78%;
    height: 79%;
    max-width: none;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 6px 6px rgba(50,40,30,.1));
  }
  .tool-card > b { left: 15px; bottom: 13px; width: 35px; height: 35px; font-size: 1.35rem; }
  .toilet-card .tool-illustration { right: -7%; bottom: -7%; width: 80%; height: 77%; }
  .smoking-card .tool-illustration { right: -10%; bottom: -8%; width: 82%; height: 78%; }
  .wayback-feature-card .tool-illustration { right: -13%; bottom: -5%; width: 91%; height: 83%; }
  .tattoo-feature-card .tool-illustration { right: -13%; bottom: -9%; width: 91%; height: 83%; max-width: none; }
  .convenience-card .tool-illustration { right: -10%; bottom: -8%; width: 86%; height: 79%; }
  .luggage-card { background: radial-gradient(circle at 88% 8%, rgba(255,255,255,.52), transparent 66px), linear-gradient(145deg, #fff1c7, #f8d993); }
  .luggage-card > b { color: #bd7a13; }
  .luggage-card .tool-illustration { right: -11%; bottom: -8%; width: 88%; height: 81%; }
  .tattoo-callout { width: fit-content; max-width: 126px; margin: 2px 0 0; padding: 4px 7px; font-size: clamp(.53rem, 2.15vw, .62rem); line-height: 1.15; }

  .more-tools { margin-top: 16px; }
  .more-tools-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 0 3px 8px; }
  .more-tools-heading h2 { margin: 0; font-size: 1.45rem; line-height: 1; font-weight: 950; letter-spacing: -.05em; }
  .more-tools-heading span { max-width: 58%; color: #777069; font-size: .59rem; line-height: 1.35; text-align: right; }
  .more-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .mini-tool {
    position: relative;
    min-width: 0;
    min-height: 92px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    overflow: hidden;
    padding: 9px 17px 9px 7px;
    border: 1px solid rgba(66,54,43,.06);
    border-radius: 18px;
    color: var(--ink);
    text-align: left;
    box-shadow: 0 6px 16px rgba(55,43,31,.05);
    cursor: pointer;
  }
  .anime-mini { background: linear-gradient(145deg,#e8f7ff,#ccecfb); }
  .japanese-mini { background: linear-gradient(145deg,#f4ecff,#e4d8f7); }
  .laundry-mini { background: linear-gradient(145deg,#e9fbf8,#d0f0eb); }
  .mini-tool img { width: 50px; height: 58px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(45,38,31,.09)); }
  .mini-tool > span { min-width: 0; display: grid; gap: 3px; }
  .mini-tool strong { font-size: clamp(.7rem, 2.85vw, .82rem); line-height: 1.14; font-weight: 900; }
  .mini-tool small { color: #5f5953; font-size: clamp(.49rem, 1.95vw, .58rem); line-height: 1.35; }
  .mini-tool > b { position: absolute; right: 6px; bottom: 8px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.7); color: #5d8da3; font-size: .9rem; }

  .spread-actions { gap: 8px; margin-top: 10px; }
  .spread-action { min-height: 68px; grid-template-columns: 38px minmax(0,1fr) auto; grid-template-rows: auto auto; column-gap: 8px; padding: 9px 10px; border-radius: 17px; }
  .spread-action > span { grid-row: 1 / 3; width: 38px; height: 38px; color: #fff; font-size: 1.05rem; }
  .spread-action.share-site > span { background: linear-gradient(145deg,#54c86e,#25a94f); }
  .spread-action.save-site > span { background: linear-gradient(145deg,#ffc842,#f2a600); }
  .spread-action strong { font-size: clamp(.75rem, 3vw, .88rem); }
  .spread-action small { font-size: clamp(.5rem, 2.05vw, .61rem); }
  .spread-action > b { grid-column: 3; grid-row: 1 / 3; color: #80776f; font-size: 1.2rem; }

  .ask-card-home { min-height: 104px; margin-top: 11px; padding: 13px 13px 13px 38%; border: 1px solid rgba(197,88,73,.1); border-radius: 20px; background: radial-gradient(circle at 88% 18%, rgba(255,255,255,.7), transparent 70px), linear-gradient(135deg,#fff0e8,#fff7dc); box-shadow: 0 7px 18px rgba(74,48,23,.07); }
  .ask-card-home::after { width: 90px; height: 90px; right: -25px; top: -34px; background: #f3a4a0; opacity: .18; }
  .ask-card-home img { width: 43%; right: auto; left: -3%; bottom: -27%; }
  .ask-card-home .ask-copy { width: 100%; align-content: center; gap: 4px; }
  .ask-card-home .ask-copy strong { margin: 0; font-size: clamp(.95rem, 4vw, 1.18rem); line-height: 1.18; }
  .ask-card-home .ask-copy strong em { margin-left: 5px; color: #d84d43; font-size: 1.14em; font-style: normal; }
  .ask-card-home .ask-copy small { color: #615a54; font-size: clamp(.55rem, 2.2vw, .66rem); line-height: 1.45; letter-spacing: 0; }
  .ask-card-home .ask-copy b { position: absolute; right: 1px; top: 50%; width: 27px; height: 27px; display: grid; place-items: center; margin: 0; transform: translateY(-50%); border-radius: 50%; background: #e44f42; color: #fff; font-size: 1.05rem; }
  .community-maps { margin-top: 20px; }
}

html[lang="en"] .tool-card strong { font-size: clamp(.88rem, 3.8vw, 1.06rem); line-height: 1.05; }
html[lang="en"] .tool-card small { font-size: clamp(.53rem, 2.05vw, .62rem); line-height: 1.3; }
html[lang="en"] .tool-copy { width: 64%; }
html[lang="en"] .tattoo-callout { max-width: 108px; font-size: .48rem; }
html[lang="en"] .more-tools-heading h2 { font-size: 1.18rem; }
html[lang="en"] .more-tools-heading span { font-size: .5rem; }
html[lang="en"] .mini-tool { grid-template-columns: 43px minmax(0,1fr); padding-left: 5px; }
html[lang="en"] .mini-tool img { width: 45px; height: 54px; }
html[lang="en"] .mini-tool strong { font-size: .6rem; }
html[lang="en"] .mini-tool small { font-size: .44rem; }
html[lang="en"] .spread-action { min-height: 74px; }
html[lang="en"] .spread-action strong { overflow: visible; font-size: .7rem; line-height: 1.12; text-overflow: clip; white-space: normal; }
html[lang="en"] .spread-action small { font-size: .48rem; white-space: normal; }

@media (max-width: 380px) {
  .topbar { padding-inline: 10px; }
  .brand-mascot { flex-basis: 44px; width: 44px; height: 44px; }
  .brand-mascot img { width: 61px; }
  .brand strong { font-size: .82rem; }
  .brand small { font-size: .46rem; }
  .city-button, .language-picker { padding-inline: 6px; }
  .city-button strong { max-width: 60px; font-size: .56rem; }
  .travel-hero { min-height: 104px; border-radius: 18px; }
  .tool-card { height: 163px; min-height: 163px; padding: 15px 12px; }
  .tool-card > b { left: 12px; bottom: 11px; width: 32px; height: 32px; }
  .more-tools-grid { gap: 5px; }
  .mini-tool { min-height: 92px; grid-template-columns: 41px minmax(0,1fr); padding-left: 5px; }
  .mini-tool img { width: 43px; height: 50px; }
}