/* Shared rhythm and touch feedback; movement supports orientation. */
:root {
  --flow-ease: cubic-bezier(.2,.8,.2,1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
html {scroll-padding-bottom: 100px; scroll-behavior: auto;}
button, a {touch-action: manipulation;}
.button, .icon-button, .nav-item, .mobile-nav button, .filter-tabs button,
.life-subnav button, .h5-service-card, .report-card, .h5-collection-list > button {
  transition: background-color 160ms var(--flow-ease), color 160ms var(--flow-ease), transform 160ms var(--flow-ease), box-shadow 160ms var(--flow-ease);
}
.button:active, .icon-button:active, .h5-service-card:active, .report-card:active {
  transform: scale(.98);
}
.button {min-height: 46px; font-size: 14px; border-radius: 13px;}
.text-button {min-height: 44px; font-size: 12px;}
.report-info h3 {font-size: 14px; line-height: 1.6;}
.report-meta, .small-muted, .report-right, .map-note {font-size: 12px;}
.report-right strong {font-size: 16px;}
.report-meta .badge {font-size: 11px;}
.report-card {border-radius: 18px; padding: 17px;}
.map-note {color: #66786f;}
.segmented button, .map-view-toggle button {min-height: 44px; font-size: 12px;}
.region-select select, .status-select {min-height: 44px;}
.status-select {max-width: 170px;}
.flow-parent {margin: -7px 0 14px; font-size: 14px; gap: 4px;}
.flow-parent .icon {transform: rotate(180deg); width: 15px;}
.flow-care-bridge {
  display: flex; align-items: flex-start; gap: 15px; padding: 23px;
  margin-top: 23px; background: #eaf3ed; border: 1px solid #dce9df; border-radius: 22px;
}
.flow-care-symbol {
  display: grid; place-items: center; width: 43px; height: 43px;
  background: #ffffffbf; color: #467864; border-radius: 15px; flex-shrink: 0;
}
.flow-care-symbol .icon {width: 23px; height: 23px;}
.flow-care-bridge > div {min-width: 0; flex: 1;}
.flow-care-bridge h2 {font-size: 18px; margin: 0 0 7px; line-height: 1.6;}
.flow-care-bridge p {font-size: 13px; color: #687c70; line-height: 1.7; margin: 0;}
.flow-care-actions {display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px;}
.flow-care-bridge small {font-size: 11px; color: #687c70; line-height: 1.7;}
.h5-service-card strong {font-size: 14px;}
.h5-service-card small, .h5-services-heading p, .h5-services-note {font-size: 12px;}
.modal-head {position: sticky; top: -1px; background: #fff; z-index: 2; padding: 4px 0 10px; align-items: center;}
#modal-back {display: inline-flex; align-items: center; gap: 4px; background: transparent; color: #3c7664; min-height: 44px; font-size: 14px; padding: 0 8px 0 0;}
#modal-back .icon {transform: rotate(180deg); width: 16px;}
#modal-back[hidden] {display: none;}
.modal-head .eyebrow {flex: 1; font-size: 10px; letter-spacing: .7px; line-height: 1.5;}
#modal-title:focus {outline: none;}
.modal-copy, .modal-list {font-size: 14px; line-height: 1.85;}
.detail-grid dt {font-size: 12px;}
.detail-grid dd, .warning-inline {font-size: 13px; line-height: 1.75;}
.toast {font-size: 13px;}
/* Keep the public-use limits visible in the selected interface language. */
html[lang^="zh"] .publication-notice > span:last-child {display: none;}
html[lang="en"] .publication-notice > span:first-of-type {display: none;}
@media (hover: none) {
  .report-card:hover {transform: none; box-shadow: none;}
  .report-card:active {transform: scale(.98);}
}
@media (max-width: 1100px) {
  .h5-nearby-page .dashboard-layout > .aside-stack {grid-row: 2;}
  .h5-nearby-page .dashboard-layout > .h5-home-services {grid-row: 3;}
  .h5-nearby-page .aside-stack {gap: 12px;}
}
@media (max-width: 780px) {
  .topbar {
    position: sticky; top: 0; z-index: 20; height: calc(62px + env(safe-area-inset-top));
    background: #ffffffeb; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  main {padding-top: 21px; padding-bottom: 30px;}
  .mobile-nav {padding-top: 7px; padding-bottom: max(8px,env(safe-area-inset-bottom));}
  .mobile-nav button {font-size: 11px; min-height: 52px; gap: 5px;}
  .mobile-nav button:first-child .icon {stroke-width: 1.9;}
  .mobile-nav button.active {background: #e6f1e9; color: #286d57;}
  .h5-nearby-page > .page-title-row {align-items: flex-start; flex-direction: column; gap: 5px;}
  .h5-nearby-page > .page-title-row h1 {font-size: 27px; max-width: none;}
  .h5-nearby-page > .page-title-row .region-select {padding: 0; background: transparent; border: 0;}
  .h5-nearby-page > .page-title-row select {max-width: 230px; font-size: 14px !important; min-height: 36px;}
  .h5-nearby-page > .page-title-row .region-select > .icon {display: block; width: 14px;}
  .h5-source-strip {font-size: 12px; margin-bottom: 9px; gap: 4px; flex-wrap: wrap;}
  .h5-source-strip button {font-size: 12px;}
  .map-toolbar {padding: 15px; gap: 8px;}
  .section-label {font-size: 14px;}
  .map-toolbar .small-muted {font-size: 11px;}
  .demo-map {height: clamp(210px,29dvh,280px);}
  .radius-bar {padding: 10px 13px; gap: 6px;}
  .radius-bar > span {font-size: 12px;}
  .segmented {gap: 3px;}
  .segmented button {min-width: 44px; padding: 6px; border-radius: 9px;}
  .map-note {font-size: 11px; padding: 11px 14px;}
  .reports-header {margin-top: 24px;}
  .report-card {padding: 15px 13px; gap: 10px;}
  .report-symbol {width: 36px; height: 36px; border-radius: 12px;}
  .report-info h3 {font-size: 14px;}
  .report-right > .small-muted {display: none;}
  .report-right strong {font-size: 15px; margin-bottom: 0;}
  .report-meta {gap: 6px; font-size: 11px;}
  .flow-care-bridge {padding: 19px 16px; gap: 12px; margin-top: 20px;}
  .flow-care-symbol {width: 35px; height: 35px; border-radius: 12px;}
  .flow-care-bridge h2 {font-size: 17px;}
  .flow-care-actions {gap: 8px;}
  .flow-care-actions .button {flex: 1; min-width: 112px; padding: 10px; font-size: 13px;}
  .h5-home-services {padding: 21px 16px; background: #f7f9f6;}
  .h5-service-card {background: white; min-height: 88px;}
  .h5-service-card strong {font-size: 14px;}
  .h5-service-card small {font-size: 12px;}
  .h5-services-heading p, .h5-services-note {font-size: 12px;}
  .h5-services-heading > .text-button {font-size: 12px;}
  .page-title-row h1 {font-size: 26px; line-height: 1.45;}
  .page-title-row .eyebrow {margin-bottom: 7px;}
  .flow-parent {margin-top: -7px; margin-bottom: 7px;}
  dialog {padding: 23px 20px calc(24px + env(safe-area-inset-bottom)); max-height: calc(92dvh - env(safe-area-inset-top));}
  dialog[open] {animation: flow-sheet-in 220ms var(--flow-ease);}
  dialog::backdrop {animation: flow-backdrop-in 180ms ease-out;}
  .modal-head {margin: 0 -2px 8px; padding: 3px 0 8px;}
  dialog h2 {font-size: 24px;}
  .modal-head .eyebrow {font-size: 9px;}
  .modal-buttons {gap: 10px;}
  .modal-buttons .button {font-size: 14px; min-height: 48px;}
  .modal-copy, .modal-list {font-size: 14px;}
  .toast {font-size: 13px; bottom: calc(82px + env(safe-area-inset-bottom));}
}
@media (max-width: 365px) {
  .h5-nearby-page > .page-title-row h1 {font-size: 25px;}
  .report-symbol {display: none;}
  .flow-care-symbol {display: none;}
  .h5-service-card small {font-size: 11px;}
}
@keyframes flow-sheet-in {from {opacity: .5; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);}}
@keyframes flow-backdrop-in {from {opacity: 0;} to {opacity: 1;}}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}
.split-product-entry{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:16px 28px;padding:14px 18px;border:1px solid #dbe4ef;border-radius:16px;background:#fff;color:#31445f;font-size:14px}.split-product-entry a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:12px;background:#eaf2fd;color:#1768c5;text-decoration:none;font-weight:600}