:root {
  --bg: #f4f6f3;
  --card: #ffffff;
  --ink: #1f231f;
  --muted: #7d857d;
  --line: #e8ece7;
  --green: #058765;
  --green-soft: #e7f4ef;
  --orange: #e64119;
  --orange-soft: #fff0eb;
  --gold: #b78518;
  --shadow: 0 14px 34px rgba(40, 48, 42, 0.12);
  --app-font-scale: 1;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #111612;
  --card: #1b241f;
  --ink: #edf4ef;
  --muted: #aab8ae;
  --line: #2c3a33;
  --green-soft: #12382d;
  --orange-soft: #3a1d15;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-size: calc(16px * var(--app-font-scale));
  display: grid;
  place-items: start center;
  overflow-x: hidden;
}

.render-guard-tip {
  width: min(100vw, 430px);
  margin: 0 auto;
  padding: 10px 14px;
  color: #7a4b13;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
}

.render-guard-basic .drawer.open {
  background: rgba(15, 23, 42, .22);
}

.render-guard-basic .withdraw-panel,
.render-guard-basic .merchant-form-grid {
  box-shadow: none;
}

.render-guard-basic .withdraw-progress-steps,
.render-guard-basic .withdraw-record-list,
.render-guard-basic .fee-info-card,
.render-guard-basic .withdraw-fee-preview {
  display: none !important;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.phone {
  position: relative;
  width: min(100vw, 430px);
  min-height: 100vh;
  background: var(--card);
  padding: 12px 18px 86px;
  box-shadow: 0 0 0 1px rgba(232, 236, 231, 0.8);
  overflow-x: hidden;
}

.app-header {
  display: grid;
  grid-template-columns: 48px 1fr 42px;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #ef4b24, #c92915);
  font-weight: 900;
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(230, 65, 25, 0.24);
}

.brand-copy h1,
.brand-copy p,
h2,
h3,
p {
  margin: 0;
}

.brand-copy h1 {
  font-size: 22px;
  line-height: 1.2;
}

.brand-copy p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.ghost-button {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--green);
  background: var(--green-soft);
  font-weight: 800;
}

.search-box {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  height: 48px;
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(42, 50, 44, 0.05);
}

.search-box .search-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.search-box .search-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-box input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.content {
  display: grid;
  gap: 18px;
  padding-top: 16px;
  min-width: 0;
}

.content > section,
.hero,
.section-head,
.service-grid,
.category-row,
.pet-grid,
.service-list {
  min-width: 0;
  max-width: 100%;
}

.hero {
  min-height: 144px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #17231d url("./assets/hero.png") center / cover no-repeat;
  color: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.14));
}

.hero > * {
  position: relative;
}

.hero h2 {
  max-width: 260px;
  font-size: 25px;
  line-height: 1.18;
}

.hero p {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  max-width: 280px;
}

.hero .primary-button {
  width: 108px;
  margin-top: 16px;
}

.home-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #eef2ed;
}

.home-mode-tab {
  min-height: 34px;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.home-mode-tab.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 4px 12px rgba(40, 48, 42, 0.08);
}

.home-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-quick-action {
  min-height: 104px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.home-quick-action strong {
  font-size: 14px;
}

.home-quick-action small {
  color: var(--muted);
  font-size: 11px;
}

.home-quick-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--green);
  font-weight: 900;
}

.nearby-home-card,
.home-order-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.nearby-home-card > div,
.home-order-shortcut > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.nearby-home-card strong,
.home-order-shortcut strong {
  font-size: 15px;
}

.nearby-home-card span,
.home-order-shortcut span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.nearby-home-card .text-action,
.home-order-shortcut .text-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: 19px;
}

.text-link {
  color: #c66354;
  background: transparent;
  font-size: 13px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.trust-strip {
  display: grid;
  gap: 9px;
}

.platform-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.platform-card {
  min-height: 106px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: 14px;
  padding: 11px 9px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.platform-card strong {
  color: #222922;
  font-size: 14px;
  line-height: 1.25;
}

.platform-card span,
.platform-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.platform-card em {
  color: var(--green);
  font-weight: 800;
}

.safety-strip {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #f5fbf8;
  border: 1px solid #d7ebe4;
}

.safety-strip-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.safety-strip-head strong {
  display: block;
  color: #102a22;
  font-size: 15px;
  line-height: 1.35;
}

.safety-strip-head span {
  display: block;
  margin-top: 3px;
  color: #60736b;
  font-size: 12px;
  line-height: 1.45;
}

.safety-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.safety-card {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 11px;
  border-radius: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
}

.safety-card em {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--orange);
  background: var(--orange-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.safety-card strong {
  color: #1f231f;
  font-size: 14px;
  line-height: 1.35;
}

.safety-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.trust-card {
  min-height: 70px;
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.trust-card strong {
  color: var(--green);
  font-size: 15px;
}

.trust-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.service-tile {
  min-height: 86px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 10px;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.service-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--green);
  font-weight: 900;
}

.category-row,
.service-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.service-filter-row {
  margin: 2px 0 4px;
}

.category-row::-webkit-scrollbar,
.service-filter-row::-webkit-scrollbar {
  display: none;
}

.service-filter-row .chip {
  flex: 0 0 auto;
}

.chip {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 14px;
  color: #353b35;
  background: #fff;
  border: 1px solid var(--line);
  white-space: nowrap;
}

.chip.active {
  color: #fff;
  background: #171b17;
  border-color: #171b17;
}

.pet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pet-card,
.service-card,
.post-card,
.profile-card,
.learning-card {
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(40, 48, 42, 0.06);
  content-visibility: auto;
}

.pet-card {
  contain-intrinsic-size: 320px;
}

.service-card {
  contain-intrinsic-size: 170px;
}

.post-card,
.profile-card,
.learning-card {
  contain-intrinsic-size: 220px;
}

.clickable-card {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.clickable-card:hover,
.clickable-card:focus-visible {
  transform: translateY(-1px);
  border-color: #bfe0d5;
  box-shadow: 0 12px 24px rgba(40, 48, 42, 0.1);
  outline: none;
}

.clickable-card:active {
  transform: translateY(0);
}

.pet-cover {
  position: relative;
  aspect-ratio: 1.02;
  min-height: 146px;
  background-color: #edf5ff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  cursor: pointer;
}

.pet-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0) 42%, rgba(255, 255, 255, 0.08));
}

.pet-badge {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  border-radius: 999px;
  padding: 4px 8px;
  color: #fff;
  background: #171b17;
  font-size: 12px;
  font-weight: 700;
}

.heart {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: #d06b76;
}

.pet-body {
  padding: 11px;
}

.pet-body h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.tag {
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 11px;
}

.buyer-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: #fffaf4;
  border: 1px solid #f1dfca;
}

.launch-guide-card,
.merchant-onboarding-card {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(180deg, #eff6ff, #fff);
}

.launch-guide-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.launch-guide-steps button,
.merchant-onboarding-card {
  text-align: left;
}

.launch-guide-steps button {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 10px;
  color: var(--ink);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #fff;
}

.launch-guide-steps strong,
.merchant-onboarding-card strong {
  font-size: 14px;
  line-height: 1.35;
}

.launch-guide-steps span,
.merchant-onboarding-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.merchant-onboarding-card {
  border-color: #fed7aa;
  background: linear-gradient(180deg, #fff7ed, #fff);
}

.merchant-onboarding-card div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.buyer-guide strong {
  color: #53301f;
  font-size: 14px;
}

.buyer-guide span {
  display: block;
  margin-top: 4px;
  color: #6e5b4c;
  font-size: 12px;
  line-height: 1.45;
}

.profile-list,
.mini-pet-list,
.support-grid,
.trust-guide {
  display: grid;
  gap: 10px;
}

.profile-card.compact {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.profile-card.compact img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
}

.profile-card.compact strong,
.mini-pet-card strong,
.support-card strong,
.trust-guide-card strong {
  display: block;
  color: #222922;
  font-size: 14px;
  line-height: 1.35;
}

.profile-card.compact span,
.mini-pet-card span,
.support-card span,
.trust-guide-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.profile-card.compact p {
  margin-top: 7px;
  color: #596159;
  font-size: 12px;
  line-height: 1.45;
}

.profile-card.compact em {
  display: inline-block;
  margin-top: 8px;
  color: var(--green);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.decision-card {
  display: grid;
  gap: 5px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #fffaf4;
  border: 1px solid #f1dfca;
}

.decision-card span {
  color: #8b6b4f;
  font-size: 12px;
}

.decision-card strong {
  color: #2c2218;
  font-size: 17px;
  line-height: 1.35;
}

.decision-card p {
  color: #6e5b4c;
  font-size: 12px;
  line-height: 1.45;
}

.platform-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.platform-tabs button {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 8px;
  color: #596159;
  background: #f4f6f3;
  font-size: 12px;
  font-weight: 800;
}

.platform-tabs button.active {
  color: #fff;
  background: #171b17;
}

.platform-hero-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #058765, #1f231f);
}

.platform-hero-card span,
.platform-hero-card p,
.platform-hero-card em {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
}

.platform-hero-card strong {
  font-size: 20px;
  line-height: 1.25;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.platform-module-card {
  min-height: 92px;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
}

.platform-module-card strong,
.platform-flow strong {
  display: block;
  color: #222922;
  font-size: 14px;
  line-height: 1.35;
}

.platform-module-card span,
.platform-flow span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.platform-flow {
  display: grid;
  gap: 9px;
}

.platform-flow article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.platform-flow b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 13px;
}

.safety-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 4px;
}

.safety-nav button {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  color: #596159;
  background: #f4f6f3;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.safety-nav span {
  margin-right: 4px;
  color: var(--orange);
}

.safety-nav button.active {
  color: #fff;
  background: #171b17;
}

.safety-nav button.active span {
  color: #ffe2d7;
}

.safety-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 8px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #1f231f, #058765);
}

.safety-hero-card > div {
  min-width: 0;
}

.safety-hero-card span,
.safety-hero-card p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.45;
}

.safety-hero-card strong {
  display: block;
  margin: 5px 0;
  font-size: 20px;
  line-height: 1.25;
}

.role-grid,
.evidence-grid,
.safety-board-grid,
.guardrail-grid,
.emergency-grid,
.hospital-list,
.evidence-checklist {
  display: grid;
  gap: 9px;
}

.role-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.role-grid article,
.evidence-grid button,
.safety-board-grid button,
.guardrail-card,
.emergency-grid button,
.hospital-list article,
.evidence-checklist label {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
}

.role-grid b,
.evidence-grid strong,
.safety-board-grid strong,
.guardrail-card strong,
.emergency-grid strong,
.hospital-list strong {
  color: #1f231f;
  font-size: 14px;
  line-height: 1.35;
}

.role-grid span,
.evidence-grid span,
.safety-board-grid em,
.guardrail-card p,
.guardrail-card > span,
.emergency-grid span,
.hospital-list span,
.evidence-checklist span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.guardrail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guardrail-card > div,
.hospital-list article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.guardrail-card p,
.guardrail-card > span {
  margin: 0;
}

.evidence-checklist label {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  background: #f7f8f6;
}

.evidence-checklist input {
  accent-color: var(--green);
}

.emergency-panel,
.insurance-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #fffaf4;
  border: 1px solid #f1dfca;
}

.emergency-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.emergency-grid button {
  min-height: 78px;
}

.hospital-list article {
  background: #fff;
}

.emergency-panel a {
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.insurance-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: #f5fbf8;
  border-color: #d7ebe4;
}

.insurance-panel strong,
.insurance-panel span {
  display: block;
}

.insurance-panel strong {
  color: #102a22;
  font-size: 14px;
}

.insurance-panel span {
  margin-top: 4px;
  color: #60736b;
  font-size: 12px;
  line-height: 1.45;
}

.risk-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.risk-flow article {
  min-height: 116px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.risk-flow b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 12px;
}

.risk-flow strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.risk-flow span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.mini-pet-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.mini-pet-card img {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  object-fit: cover;
}

.mini-pet-card em {
  display: block;
  margin-top: 4px;
  color: var(--orange);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.support-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-card,
.trust-guide-card {
  min-height: 82px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
}

.security-score {
  min-height: 96px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  margin: 12px 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #058765, #e64119);
}

.security-score strong {
  font-size: 34px;
  line-height: 1;
}

.security-score span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
}

.acceptance-flow {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.acceptance-flow div {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px;
  border-radius: 14px;
  background: #f7f8f6;
}

.acceptance-flow strong {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 13px;
}

.acceptance-flow span {
  color: #596159;
  font-size: 13px;
  line-height: 1.45;
}

.knowledge-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.knowledge-switcher button {
  min-height: 36px;
  border-radius: 999px;
  color: #596159;
  background: #f4f6f3;
  font-size: 12px;
  font-weight: 800;
}

.knowledge-switcher button.active {
  color: #fff;
  background: var(--green);
}

.community-page {
  display: grid;
  gap: 14px;
  padding-bottom: 18px;
}

.community-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 0;
}

.community-head h2 {
  font-size: 22px;
  line-height: 1;
}

.message-head {
  justify-content: space-between;
}

.message-head .publish-button,
.message-head .message-batch-count {
  margin-left: auto;
}

.publish-button {
  min-height: 30px;
  border-radius: 9px;
  padding: 0 12px;
  color: #fff;
  background: var(--orange);
  font-size: 12px;
  font-weight: 800;
}

.community-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 10px 0 2px;
}

.community-tabs button {
  min-height: 38px;
  border-radius: 9px;
  color: #2a302a;
  background: transparent;
  font-weight: 800;
}

.community-tabs button.active {
  color: #fff;
  background: #151815;
  box-shadow: 0 8px 16px rgba(20, 22, 20, 0.16);
}

.feed-card {
  display: grid;
  gap: 12px;
  padding: 15px 14px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(232, 236, 231, 0.78);
  box-shadow: 0 8px 20px rgba(40, 48, 42, 0.05);
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}

.feed-author {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 9px;
  align-items: center;
}

.feed-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    linear-gradient(rgba(20, 26, 20, 0.12), rgba(20, 26, 20, 0.42)),
    url("./assets/golden.png") center / cover;
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
}

.feed-avatar.cat {
  background:
    linear-gradient(rgba(20, 26, 20, 0.12), rgba(20, 26, 20, 0.42)),
    url("./assets/tabby.png") center / cover;
}

.feed-author strong {
  display: block;
  color: #252a25;
  font-size: 14px;
  line-height: 1.25;
}

.feed-author em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}

.feed-card p {
  color: #252a25;
  font-size: 13px;
  line-height: 1.68;
}

.feed-placeholder {
  min-height: 144px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fafbf8, #f4f6f2);
  border: 1px solid #f0f2ee;
}

.feed-image {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-radius: 12px;
  background: #eef1ed;
}

.feed-actions {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 14px;
  align-items: center;
  color: #737b73;
  font-size: 12px;
}

.feed-actions button {
  color: #5f675f;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.feed-actions button:last-child {
  justify-self: end;
}

.risk-row {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

.risk-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  font-weight: 800;
}

.risk-pill.low {
  color: #087252;
  background: #e7f4ef;
}

.risk-pill.mid {
  color: #8a5a00;
  background: #fff5dc;
}

.risk-pill.high {
  color: #ad351e;
  background: #fff0eb;
}

.desc-box {
  min-height: 48px;
  margin-top: 9px;
  border-radius: 10px;
  background: #f7f8f6;
  color: #6e756e;
  padding: 8px;
  font-size: 12px;
  line-height: 1.42;
}

.card-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.price {
  color: var(--orange);
  font-size: 20px;
  font-weight: 900;
}

.heart.active {
  color: #fff;
  background: var(--orange);
}

.rating {
  color: var(--gold);
  font-size: 13px;
}

.primary-button,
.orange-button,
.text-action {
  min-height: 38px;
  border-radius: 11px;
  padding: 0 14px;
  font-weight: 800;
}

.primary-button,
.orange-button {
  color: #fff;
  background: var(--orange);
  box-shadow: 0 8px 16px rgba(230, 65, 25, 0.22);
}

.text-action {
  color: var(--green);
  background: var(--green-soft);
}

.text-action.danger-soft {
  color: #ad351e;
  background: #fff0eb;
}

.full,
.full-link {
  width: 100%;
  margin-top: 12px;
}

.service-list {
  display: grid;
  gap: 12px;
}

.service-card {
  display: grid;
  grid-template-columns: 112px 1fr;
  min-height: 138px;
}

.service-photo {
  background: #e9eee8 center / cover no-repeat;
}

.service-info {
  padding: 12px;
  display: grid;
  gap: 6px;
}

.service-info .orange-button {
  justify-self: end;
  min-height: 34px;
}

.service-info .tags {
  margin-top: 2px;
}

.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100vw, 430px);
  height: 70px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 22px rgba(40, 48, 42, 0.08);
  z-index: 10;
}

.tab {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  color: #5f675f;
  background: transparent;
  font-size: 12px;
}

.tab .tab-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  line-height: 1;
}

.tab .tab-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab.active {
  color: var(--orange);
  font-weight: 800;
}

.orders-page {
  display: grid;
  gap: 14px;
  padding: 8px 12px 24px;
}

.orders-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px 2px;
}

.orders-eyebrow,
.orders-section-kicker {
  color: var(--brand, #1677ff);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.orders-page-head h1 {
  margin: 4px 0 5px;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.1;
}

.orders-page-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.orders-head-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1677ff, #56a2ff);
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(22, 119, 255, .2);
}

.orders-message-button {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(22, 119, 255, .13);
  border-radius: 14px;
  color: var(--brand, #1677ff);
  background: #fff;
}

.orders-message-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orders-message-button b {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  color: #fff;
  background: #ef4444;
  font-size: 10px;
}

.orders-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.orders-summary-item {
  min-width: 0;
  min-height: 90px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border-right: 1px solid #edf1f5;
  color: var(--ink);
  background: #fff;
}

.orders-summary-item:last-child {
  border-right: 0;
}

.orders-summary-item strong {
  color: var(--brand, #1677ff);
  font-size: 21px;
  line-height: 1;
}

.orders-summary-item span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.orders-summary-item em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.orders-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.orders-shortcuts button {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.orders-shortcuts span {
  color: var(--brand, #1677ff);
  font-size: 15px;
}

.orders-list-section {
  display: grid;
  gap: 8px;
}

.orders-list-section .section-head {
  align-items: end;
  padding: 0 2px 2px;
}

.orders-list-section .section-head h2 {
  margin: 3px 0 0;
  font-size: 18px;
}

.orders-recent-list {
  display: grid;
  gap: 10px;
}

.orders-help-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(22, 119, 255, .13);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(22, 119, 255, .06), #fff);
}

.orders-help-panel strong,
.orders-help-panel span {
  display: block;
}

.orders-help-panel strong {
  color: var(--ink);
  font-size: 13px;
}

.orders-help-panel span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.orders-login-page .login-method-grid {
  margin-top: 2px;
}

.drawer {
  position: fixed;
  inset: 0;
  display: none;
  place-items: start center;
  background: #fbfcfa;
  z-index: 20;
}

.toast-modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(23, 27, 23, 0.22);
  z-index: 30;
}

.drawer.open,
.toast-modal.open {
  display: grid;
}

.drawer-card {
  width: min(100vw, 430px);
  height: 100vh;
  max-height: 100vh;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 0;
  background: #fbfcfa;
  box-shadow: 0 0 0 1px rgba(232, 236, 231, 0.8);
  padding: 18px;
  animation: pageIn 0.16s ease-out;
}

.drawer-card.compact {
  max-height: 100vh;
}

.drawer-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  margin: -18px -18px 14px;
  padding: 14px 18px 12px;
  background: rgba(251, 252, 250, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.back-button {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #f4f6f3;
}

.back-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.level-label {
  display: none;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 3px;
}

.detail-hero {
  height: 210px;
  border-radius: 18px;
  background: #e9eee8 center / cover no-repeat;
  margin-bottom: 14px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
}

.info-panel {
  border-radius: 14px;
  background: #f7f8f6;
  padding: 12px;
  color: #596159;
  line-height: 1.55;
  font-size: 13px;
}

.learning-list {
  display: grid;
  gap: 10px;
}

.learning-card {
  padding: 13px;
}

.learning-card h3 {
  margin-bottom: 6px;
}

.learning-card a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 700;
}

.mine-hero {
  min-height: 116px;
  border-radius: 0 0 2px 2px;
  margin: -12px -18px 14px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  background:
    linear-gradient(105deg, rgba(2, 104, 75, 0.94), rgba(223, 72, 26, 0.9)),
    url("./assets/hero.png") center / cover;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
  background-size: cover;
  background-position: center;
  border: 3px solid rgba(255, 255, 255, 0.72);
  font-size: 23px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(22, 28, 22, 0.22);
}

.avatar-button {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.avatar-button:hover,
.avatar-button:focus-visible {
  transform: translateY(-1px);
  border-color: #fff;
  box-shadow: 0 10px 24px rgba(22, 28, 22, 0.28), 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.image-avatar {
  color: transparent;
  text-indent: -999px;
  overflow: hidden;
}

.mine-profile-copy {
  min-width: 0;
  flex: 1;
}

.mine-hero h2 {
  font-size: 22px;
  margin-bottom: 5px;
}

.mine-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
}

.mine-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mine-name-row h2 {
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile-edit-pill {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.46);
}

.profile-edit-pill:hover {
  background: rgba(255, 255, 255, 0.28);
}

.identity-entry-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.auth-bind-row span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.auth-bind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.auth-bind-row span {
  color: #7d857d;
  background: #f4f6f3;
  border: 1px solid #e8ece7;
}

.auth-bind-row span.active {
  color: #0958d9;
  background: #eaf3ff;
  border-color: rgba(22, 119, 255, 0.2);
}

.auth-bind-row span.bound {
  color: #058765;
  background: #e7f4ef;
  border-color: rgba(5, 135, 101, 0.18);
}

.btn-merchant-entry,
.btn-provider-entry {
  width: 88px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.btn-merchant-entry {
  color: #fff;
  background: #1677ff;
  border: 1px solid #1677ff;
}

.btn-merchant-entry:hover {
  background: #0958d9;
  border-color: #0958d9;
}

.btn-provider-entry {
  width: 96px;
  color: #1677ff;
  background: #fff;
  border: 1px solid #1677ff;
}

.btn-provider-entry:hover {
  color: #0958d9;
  border-color: #0958d9;
  background: #eef6ff;
}

.profile-setup-card,
.profile-inline-card,
.profile-editor-card {
  border-radius: 16px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  background: linear-gradient(135deg, rgba(22, 119, 255, 0.08), rgba(255, 255, 255, 0.96));
  box-shadow: 0 12px 30px rgba(22, 119, 255, 0.08);
}

.profile-setup-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px;
}

.profile-setup-card strong,
.profile-inline-card strong,
.profile-editor-preview strong,
.profile-editor-name-button strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.profile-setup-card p,
.profile-inline-card span,
.profile-editor-preview span,
.profile-editor-name-button span,
.profile-editor-hint,
.profile-upload-status {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.profile-upload-status:not(:empty) {
  margin-top: -4px;
  color: var(--green);
  font-weight: 800;
}

.profile-setup-card .primary-button {
  width: auto;
  min-width: 88px;
  white-space: nowrap;
}

.profile-inline-card {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
}

.small-avatar {
  width: 42px;
  height: 42px;
  border-width: 2px;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--orange));
  font-size: 17px;
}

.profile-editor-card {
  display: grid;
  gap: 13px;
  padding: 14px;
}

.profile-editor-preview {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
}

.profile-editor-name-button {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.profile-editor-name-button:hover,
.profile-editor-name-button:focus-visible {
  background: #fff;
  border-color: rgba(22, 119, 255, 0.28);
  box-shadow: 0 8px 18px rgba(22, 119, 255, 0.1);
  outline: none;
}

.profile-editor-name-button span::after {
  content: "  编辑";
  color: #1677ff;
  font-weight: 800;
}

.profile-editor-avatar {
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--orange));
}

.profile-editor-avatar-button {
  position: relative;
  border: 3px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.profile-editor-avatar-button::after {
  content: "换";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 900;
  text-indent: 0;
}

.profile-editor-avatar-button:hover,
.profile-editor-avatar-button:focus-visible {
  transform: translateY(-1px);
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.16), 0 12px 24px rgba(22, 119, 255, 0.18);
  outline: none;
}

.input-attention {
  border-color: #1677ff !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.14) !important;
}

.profile-role-tabs,
.profile-avatar-grid,
.profile-role-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-role-tabs button,
.profile-avatar-grid button {
  min-height: 34px;
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
}

.profile-role-tabs button {
  flex: 1 1 90px;
}

.profile-avatar-grid button {
  width: 42px;
  height: 42px;
  padding: 0;
}

.profile-role-tabs button.active,
.profile-avatar-grid button.active {
  color: #fff;
  background: #1677ff;
  border-color: #1677ff;
  box-shadow: 0 8px 18px rgba(22, 119, 255, 0.18);
}

.profile-role-shortcuts {
  margin-top: 12px;
}

.profile-upload-box {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px dashed rgba(22, 119, 255, 0.34);
  cursor: pointer;
}

.profile-upload-box input {
  display: none;
}

.profile-upload-box span {
  color: var(--brand, #1677ff);
  font-size: 14px;
  font-weight: 900;
}

.profile-upload-box em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.identity-guide-card {
  position: relative;
  display: grid;
  gap: 8px;
  margin: -2px 0 12px;
  padding: 13px 44px 13px 13px;
  border-radius: 14px;
  color: var(--ink);
  background: #eef6ff;
  border: 1px solid rgba(22, 119, 255, 0.22);
  box-shadow: 0 10px 22px rgba(22, 119, 255, 0.08);
}

.identity-guide-card strong {
  font-size: 15px;
  line-height: 1.35;
}

.identity-guide-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.identity-guide-card .btn-merchant-entry {
  width: 96px;
}

.identity-guide-close {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #64748b;
  background: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1;
}

.secondary-identity-row {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  background: #fafafa;
}

.identity-switch-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.identity-switch-panel button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  min-height: 86px;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}

.identity-switch-panel button.active {
  border-color: rgba(22, 119, 255, 0.35);
  background: #eef6ff;
}

.identity-switch-panel span {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: #1677ff;
  font-weight: 800;
}

.identity-switch-panel strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.identity-switch-panel em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.order-panel {
  padding: 0 0 12px;
  margin-bottom: 10px;
  background: #fff;
}

.section-head.flat {
  margin-bottom: 0;
  padding: 10px 6px 11px;
}

.order-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border-radius: 0;
  border: 0;
  overflow: hidden;
}

.order-stat {
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--ink);
  background: #fff;
  border-right: 1px solid #f1f3f0;
}

.order-stat:last-child {
  border-right: 0;
}

.order-stat strong {
  font-size: 19px;
  line-height: 1;
}

.order-stat span {
  color: #7f8780;
  font-size: 12px;
}

.order-inline-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 10px;
  background: #fff;
}

.order-inline-actions button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--brand, #1677ff);
  background: var(--brand-soft, #eaf3ff);
  font-size: 12px;
  font-weight: 800;
}

.order-list-guide,
.order-aftersale-panel {
  display: grid;
  gap: 8px;
}

.order-list-guide,
.order-aftersale-panel {
  border-radius: 14px;
  border: 1px solid rgba(22, 119, 255, 0.12);
  background: #fff;
}

.order-list-guide strong,
.order-aftersale-panel strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.order-list-guide span,
.order-aftersale-panel span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.order-list-guide,
.order-aftersale-panel {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 10px;
  padding: 12px;
}

.order-aftersale-panel {
  margin: 12px 0;
  background: linear-gradient(135deg, rgba(22, 119, 255, 0.06), #fff);
}

.order-aftersale-panel div:last-child {
  display: flex;
  gap: 8px;
}

.order-recent-use {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid #edf0ec;
  background: #fbfcff;
}

.order-recent-main {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.order-recent-main span,
.order-recent-main em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
}

.order-recent-main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-recent-actions {
  display: flex;
  align-items: center;
}

.mine-list {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(232, 236, 231, 0.8);
  margin-top: 6px;
}

.mine-row {
  width: 100%;
  min-height: 53px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #202420;
  background: #fff;
  border-bottom: 1px solid #edf0ec;
  font-weight: 700;
  text-align: left;
}

.mine-row:last-child {
  border-bottom: 0;
}

.mine-row b {
  color: #8a928a;
  font-size: 19px;
}

.login-page,
.login-panel {
  display: grid;
  gap: 12px;
}

.login-hero-card {
  min-height: 128px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin: -4px -2px 0;
  padding: 18px;
  border-radius: 14px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(5, 135, 101, 0.96), rgba(230, 65, 25, 0.92)),
    url("./assets/hero.png") center / cover;
  box-shadow: 0 12px 26px rgba(40, 48, 42, 0.14);
}

.login-logo {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.42);
  font-size: 24px;
  font-weight: 900;
}

.login-hero-card h2 {
  font-size: 23px;
  line-height: 1.15;
}

.login-hero-card p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  line-height: 1.45;
}

.login-method-grid {
  display: grid;
  gap: 10px;
}

.login-method-card {
  min-height: 86px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(232, 236, 231, 0.9);
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.06);
}

.login-method-card span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  background: var(--brand, #1677ff);
}

.login-method-card.wechat span {
  background: #07c160;
}

.login-method-card.alipay span {
  background: #1677ff;
}

.login-method-card strong {
  font-size: 16px;
  line-height: 1.25;
}

.login-method-card em,
.login-terms {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.login-form-grid {
  display: grid;
  gap: 10px;
}

.login-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.login-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.login-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.login-status.ok {
  color: #058765;
}

.login-status.error {
  color: #ad351e;
}

.login-switch-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.oauth-hero {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: #f7f8f6;
}

.oauth-hero span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: #07c160;
  font-size: 22px;
  font-weight: 900;
}

.oauth-panel.alipay .oauth-hero span {
  background: #1677ff;
}

.oauth-hero strong {
  color: var(--ink);
  font-size: 17px;
}

.oauth-hero p,
.oauth-step-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.oauth-step-list {
  display: grid;
  gap: 8px;
}

.oauth-step-list div {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.oauth-step-list b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--brand, #1677ff);
  background: var(--brand-soft, #eaf3ff);
  font-size: 12px;
}

.account-auth-card {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 13px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(232, 236, 231, 0.9);
}

.account-auth-card strong {
  color: var(--ink);
  font-size: 14px;
}

.account-auth-card > span {
  color: var(--muted);
  font-size: 12px;
}

.merchant-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  margin-bottom: 2px;
}

.merchant-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 13px;
  color: #596159;
  background: #f4f6f3;
  font-size: 12px;
  font-weight: 800;
}

.merchant-tabs button.active {
  color: #fff;
  background: #171b17;
}

.desktop-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 13px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #1f231f, #058765);
}

.desktop-preview-card span,
.desktop-preview-card p {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.45;
}

.desktop-preview-card strong {
  display: block;
  margin: 4px 0;
  font-size: 16px;
  line-height: 1.35;
}

.desktop-preview-card .orange-button {
  min-width: 82px;
  box-shadow: none;
}

.merchant-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.desktop-dashboard {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.desktop-main-panel,
.desktop-columns section {
  border-radius: 16px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--line);
}

.desktop-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.desktop-panel-head span,
.desktop-panel-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.desktop-panel-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
}

.desktop-panel-head em {
  justify-self: end;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--green);
  background: var(--green-soft);
  font-weight: 800;
}

.desktop-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.desktop-kpis article {
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: 12px;
  padding: 9px;
  background: #f7f8f6;
}

.desktop-kpis span,
.desktop-kpis em,
.desktop-columns span {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.desktop-kpis strong {
  color: var(--orange);
  font-size: 17px;
  line-height: 1;
}

.desktop-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.desktop-columns section {
  display: grid;
  gap: 8px;
  align-content: start;
}

.desktop-columns h3 {
  font-size: 15px;
}

.desktop-columns button,
.desktop-columns article {
  display: grid;
  gap: 4px;
  border-radius: 12px;
  padding: 10px;
  color: var(--ink);
  background: #f7f8f6;
  text-align: left;
}

.desktop-columns strong {
  font-size: 13px;
  line-height: 1.35;
}

.safety-board-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.safety-board-grid button {
  min-height: 116px;
  background: #f7f8f6;
}

.safety-board-grid span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 11px;
  font-weight: 800;
}

.merchant-stat-card,
.merchant-module-card,
.merchant-todo,
.merchant-order-card,
.customer-row,
.settlement-list article,
.analytics-list article,
.ops-list article,
.order-status-strip button,
.traffic-source-grid article,
.withdraw-timeline article,
.issue-card,
.progress-steps article {
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
}

.merchant-stat-card {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 5px;
}

.launch-guard-kpis .merchant-stat-card strong {
  color: var(--orange);
}

.merchant-stat-card span,
.merchant-todo span,
.merchant-module-card span,
.merchant-order-card span,
.customer-row span,
.settlement-list span,
.analytics-list span,
.ops-list span,
.order-status-strip span,
.order-status-strip em,
.traffic-source-grid span,
.withdraw-timeline span,
.progress-steps em {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.merchant-stat-card strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}

.merchant-stat-card em,
.merchant-todo em,
.merchant-order-card em,
.settlement-list em,
.analytics-list em {
  color: var(--green);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.dispatch-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.dispatch-summary-grid article {
  min-height: 78px;
  border-radius: 14px;
  padding: 10px;
  display: grid;
  align-content: center;
  gap: 4px;
  background: #f7fbf8;
  border: 1px solid #dceee5;
}

.dispatch-summary-grid span,
.dispatch-summary-grid em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.dispatch-summary-grid strong {
  color: var(--green);
  font-size: 22px;
  line-height: 1.1;
}

.dispatch-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.dispatch-flow article {
  min-height: 102px;
  border-radius: 14px;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--line);
}

.dispatch-flow b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 12px;
}

.dispatch-flow strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.dispatch-flow span,
.dispatch-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.dispatch-card {
  border-color: #dceee5;
}

.dispatch-card.grab {
  background: #fff8ee;
  border-color: #f4d5a8;
}

.merchant-section {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.merchant-section h3 {
  font-size: 16px;
}

.merchant-boss-panel {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 13px;
  border-radius: 16px;
  background: #f7fbf8;
  border: 1px solid #dceee5;
}

.merchant-boss-panel span,
.merchant-boss-panel p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.merchant-boss-panel strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 16px;
}

.boss-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.boss-action-grid button {
  min-height: 38px;
  padding: 0 8px;
  font-size: 12px;
}

.merchant-todo-list,
.merchant-module-grid,
.merchant-order-list,
.settlement-list,
.analytics-list {
  display: grid;
  gap: 9px;
}

.merchant-todo {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
}

.merchant-todo span {
  grid-row: span 2;
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--green);
  background: var(--green-soft);
  font-weight: 800;
}

.merchant-todo strong,
.merchant-module-card strong,
.merchant-order-card strong,
.customer-row strong,
.settlement-list strong,
.analytics-list strong,
.ops-list strong,
.order-status-strip strong,
.traffic-source-grid strong,
.withdraw-timeline strong,
.issue-card strong,
.progress-steps span {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.merchant-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.ops-focus-strip,
.order-status-strip,
.traffic-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.ops-focus-strip article {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: 14px;
  padding: 11px;
  background: #f7f8f6;
  border: 1px solid var(--line);
}

.ops-focus-strip strong {
  color: var(--green);
  font-size: 14px;
}

.ops-focus-strip span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ops-list,
.withdraw-timeline,
.trend-bars {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}

.ops-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
}

.edge-guard-list article em {
  color: var(--green);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.ops-list span {
  grid-column: 1 / -1;
}

.media-upload-panel,
.finance-rule-panel {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  border-radius: 14px;
  padding: 12px;
  background: #f7fbf8;
  border: 1px solid #dceee5;
}

.media-upload-panel strong,
.finance-rule-panel strong {
  color: var(--ink);
  font-size: 14px;
}

.media-upload-panel span,
.finance-rule-panel span,
.media-upload-panel em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.media-upload-panel div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.order-status-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.order-status-strip button,
.traffic-source-grid article {
  display: grid;
  gap: 3px;
  min-height: 76px;
  align-content: center;
  text-align: left;
}

.order-status-strip strong,
.traffic-source-grid strong {
  color: var(--orange);
  font-size: 20px;
  line-height: 1;
}

.merchant-order-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.finance-rule-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.finance-rule-panel span {
  grid-column: 1 / -1;
}

.withdraw-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #f7fbf8;
  border: 1px solid #dceee5;
}

.withdraw-panel.compact {
  background: #fffaf2;
  border-color: #f2dfc4;
}

.withdraw-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.withdraw-panel strong,
.withdraw-record-list strong,
.fee-info-card strong,
.withdraw-faq strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.withdraw-panel span,
.withdraw-fee-preview,
.withdraw-record-list span,
.fee-info-card span,
.fee-info-card p,
.withdraw-faq span,
.withdraw-progress-steps span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.merchant-form-grid.compact {
  margin: 0;
  background: #fff;
}

.withdraw-fee-preview {
  grid-column: 1 / -1;
  padding: 9px 10px;
  border-radius: 12px;
  color: #58625b;
  background: #f7f8f6;
  border: 1px solid var(--line);
}

.withdraw-record-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.withdraw-record-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 11px;
  border-radius: 14px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}

.withdraw-record-list button:disabled,
.withdraw-panel button:disabled,
.merchant-form-grid button:disabled {
  cursor: wait;
  opacity: .68;
  transform: none;
}

.withdraw-record-list em {
  color: var(--green);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.withdraw-progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.withdraw-progress-steps article {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 104px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.withdraw-progress-steps b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #aeb6ae;
  font-size: 12px;
}

.withdraw-progress-steps article.done b {
  background: var(--green);
}

.withdraw-progress-steps strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.fee-info-card,
.withdraw-faq {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.fee-info-card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fee-info-card div {
  display: grid;
  gap: 4px;
}

.fee-info-card p {
  grid-column: 1 / -1;
  margin: 0;
}

.withdraw-timeline article {
  display: grid;
  gap: 4px;
  border-left: 4px solid #dceee5;
}

.trend-bars article {
  display: grid;
  gap: 7px;
}

.trend-bars article div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.trend-bars strong {
  color: var(--ink);
  font-size: 13px;
}

.trend-bars b {
  height: 8px;
  border-radius: 999px;
  background: var(--green);
}

.merchant-module-card {
  min-height: 92px;
}

.progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.progress-steps article {
  min-height: 90px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px;
}

.progress-steps strong {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #aeb6ae;
  font-size: 12px;
}

.progress-steps article.done strong,
.progress-steps article.active strong {
  background: var(--green);
}

.progress-steps article.active {
  border-color: #bfe0d5;
  background: #f4fbf8;
}

.issue-card {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  border-color: #f1dfca;
  background: #fffaf4;
}

.issue-card p {
  color: #6e5b4c;
  font-size: 12px;
  line-height: 1.45;
}

.merchant-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.merchant-action-row button {
  min-height: 40px;
  padding: 0 8px;
  font-size: 12px;
}

.merchant-order-card,
.customer-row,
.settlement-list article,
.analytics-list article {
  display: grid;
  gap: 6px;
}

.merchant-order-card div {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.owner-status-bar {
  background: linear-gradient(135deg, #08765c, #23332d);
}

.student-status-bar {
  background: linear-gradient(135deg, #0a8063, #284036);
}

.provider-status-bar {
  background: linear-gradient(135deg, #1677ff, #1f334a);
}

.provider-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.provider-path-grid button {
  display: grid;
  gap: 6px;
  min-height: 116px;
  padding: 12px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.provider-path-grid strong {
  color: var(--ink);
  font-size: 15px;
}

.provider-path-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.provider-path-grid em {
  color: #1677ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.provider-check-field {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
}

.provider-check-field label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-benefit-grid,
.student-tool-grid,
.quick-reply-strip {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}

.student-benefit-grid,
.student-tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-benefit-grid article,
.student-tool-grid button,
.quick-reply-strip button {
  display: grid;
  gap: 5px;
  min-height: 84px;
  padding: 11px;
  border-radius: 14px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
}

.student-benefit-grid strong,
.student-tool-grid strong,
.quick-reply-strip strong {
  color: var(--ink);
  font-size: 14px;
}

.student-benefit-grid span,
.student-benefit-grid em,
.student-tool-grid span,
.quick-reply-strip span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.role-detail-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.role-detail-tabs button {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px 7px;
  border-radius: 13px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
}

.role-detail-tabs button.active {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}

.role-detail-tabs strong {
  font-size: 12px;
}

.role-detail-tabs span {
  font-size: 10px;
  line-height: 1.25;
}

.detail-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.detail-ops-grid button,
.role-setting-list article {
  display: grid;
  gap: 5px;
  min-height: 84px;
  padding: 11px;
  border-radius: 14px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}

.detail-ops-grid strong,
.role-setting-list strong {
  font-size: 14px;
}

.detail-ops-grid span,
.role-setting-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.role-form-grid {
  display: grid;
  gap: 9px;
}

.role-form-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.role-form-grid input {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
}

.address-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.address-chip-row span {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 12px;
  font-weight: 800;
}

.role-setting-list {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}

:root[data-theme="dark"] .hero,
:root[data-theme="dark"] section,
:root[data-theme="dark"] .drawer-panel,
:root[data-theme="dark"] .booking-panel,
:root[data-theme="dark"] .confirm-card,
:root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .pet-card,
:root[data-theme="dark"] .mine-row,
:root[data-theme="dark"] .message-thread-card,
:root[data-theme="dark"] .message-card,
:root[data-theme="dark"] .detail-ops-grid button,
:root[data-theme="dark"] .role-setting-list article,
:root[data-theme="dark"] .role-detail-tabs button,
:root[data-theme="dark"] .student-benefit-grid article,
:root[data-theme="dark"] .student-tool-grid button,
:root[data-theme="dark"] .quick-reply-strip button,
:root[data-theme="dark"] .staff-table article,
:root[data-theme="dark"] .cookie-consent,
:root[data-theme="dark"] .feature-switch-list label,
:root[data-theme="dark"] .role-form-grid input,
:root[data-theme="dark"] .commission-row span,
:root[data-theme="dark"] .commission-table article,
:root[data-theme="dark"] .wechat-message-menu,
:root[data-theme="dark"] .chat-bubble.seller {
  background: #1b241f;
  border-color: var(--line);
}

:root[data-theme="dark"] .info-panel,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .weaknet-note,
:root[data-theme="dark"] .message-delivery-state,
:root[data-theme="dark"] .payment-countdown,
:root[data-theme="dark"] .commission-panel {
  color: var(--muted);
  background: #15211b;
  border-color: var(--line);
}

.weaknet-note,
.message-delivery-state {
  display: grid;
  gap: 4px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 13px;
  color: #60736b;
  background: #f4fbf8;
  border: 1px solid #dceee5;
  font-size: 12px;
  line-height: 1.45;
}

.weaknet-note.offline {
  color: #8a4c28;
  background: #fff6ed;
  border-color: #f4d5a8;
}

.text-action.light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
}

.staff-table {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.staff-table-head,
.staff-table article {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 48px 48px 52px;
  gap: 8px;
  align-items: center;
}

.staff-table-head {
  color: var(--muted);
  font-size: 12px;
  padding: 0 10px;
}

.staff-table article {
  padding: 11px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.staff-table strong,
.staff-table em {
  display: block;
}

.staff-table strong {
  color: var(--ink);
  font-size: 13px;
}

.staff-table em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.staff-table span,
.staff-table b {
  text-align: center;
  font-size: 12px;
}

.staff-table b {
  padding: 4px 6px;
  border-radius: 999px;
}

.staff-table b.ok {
  color: var(--green);
  background: var(--green-soft);
}

.staff-table b.warn {
  color: var(--orange);
  background: #fff0e7;
}

.merchant-form-grid {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.merchant-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.merchant-form-grid input {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 0 12px;
  background: #f9faf8;
}

.merchant-form-grid select,
.merchant-form-grid textarea,
.upload-field-grid input,
.upload-field-grid select,
.merchant-upload-form textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  color: var(--ink);
  background: #f9faf8;
}

.merchant-upload-entry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.merchant-upload-entry article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 188px;
  padding: 13px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.merchant-upload-entry span,
.upload-guide-strip span,
.upload-record-list span,
.upload-media-box span,
.upload-tip-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.merchant-upload-entry strong,
.upload-guide-strip strong,
.upload-record-list strong,
.upload-media-box strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.merchant-upload-entry p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.merchant-upload-entry button {
  align-self: end;
}

.upload-guide-strip,
.upload-record-list article {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #f7fbf8;
  border: 1px solid #dceee5;
}

.upload-record-list {
  display: grid;
  gap: 8px;
}

.upload-record-list article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin: 0;
  background: #fff;
  border-color: var(--line);
}

.upload-record-list em {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.upload-step-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.upload-step-grid article {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  min-height: 72px;
  padding: 8px 5px;
  border-radius: 13px;
  background: #f7f8f6;
  border: 1px solid var(--line);
  text-align: center;
}

.upload-step-grid b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--green);
  font-size: 12px;
}

.upload-step-grid span {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
}

.merchant-upload-form {
  display: grid;
  gap: 12px;
}

.merchant-upload-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.merchant-upload-section h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  font-size: 15px;
}

.upload-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.upload-field-grid label,
.merchant-upload-section label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.merchant-upload-form textarea {
  min-height: 96px;
  resize: vertical;
}

.upload-media-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: #f7fbf8;
  border: 1px dashed #b7d8cd;
}

.upload-media-box input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.upload-media-box div {
  display: grid;
  gap: 4px;
}

.upload-tip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.upload-tip-list span {
  padding: 7px 9px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-weight: 700;
}

.upload-submit-bar {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 0 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--card) 28%);
}

.message-status-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #058765, #171b17);
}

.message-status-bar strong,
.message-status-bar span {
  display: block;
}

.message-status-bar strong {
  font-size: 15px;
}

.message-status-bar span,
.message-status-bar em {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-style: normal;
}

.message-status-bar em {
  justify-self: end;
  font-weight: 800;
}

.merchant-chat-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.merchant-chat-dashboard article,
.customer-mini-crm article,
.video-visit-card,
.evidence-export-panel label,
.followup-list article,
.customer-profile-head {
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.merchant-chat-dashboard article {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
}

.merchant-chat-dashboard span,
.merchant-chat-dashboard em,
.customer-mini-crm span,
.customer-mini-crm em,
.followup-list em,
.video-visit-card span,
.video-visit-card em,
.evidence-export-panel em,
.customer-profile-head span {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.merchant-chat-dashboard strong,
.customer-mini-crm strong {
  color: var(--ink);
  font-size: 16px;
}

.customer-segment-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.customer-segment-row .chip {
  flex: 0 0 auto;
}

.chat-action-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.merchant-tool-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.merchant-tool-nav button:only-child {
  grid-column: 1 / -1;
}

.conversation-list,
.quick-reply-grid,
.followup-list,
.evidence-export-panel {
  display: grid;
  gap: 10px;
}

.conversation-card,
.pet-card-send,
.risk-note,
.ai-reply-card,
.quick-reply-grid button,
.record-card {
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.conversation-card {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.conversation-head,
.conversation-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.conversation-foot > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.conversation-head strong {
  color: var(--ink);
  font-size: 15px;
}

.conversation-head span,
.conversation-foot span {
  color: var(--muted);
  font-size: 12px;
}

.conversation-card p {
  color: #414841;
  font-size: 13px;
  line-height: 1.5;
}

.customer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-tags em {
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.ai-reply-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #f7f8f6;
}

.ai-reply-card.prominent {
  margin: 12px 0;
  border-color: #dceee5;
  background: #f4fbf8;
}

.ai-reply-card strong,
.risk-note strong,
.quick-reply-grid strong,
.pet-card-send strong {
  color: var(--ink);
  font-size: 13px;
}

.ai-reply-card span,
.risk-note span,
.quick-reply-grid span,
.pet-card-send span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.quick-reply-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-reply-grid button {
  min-height: 96px;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 12px;
  text-align: left;
}

.customer-mini-crm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.customer-mini-crm article {
  display: grid;
  gap: 5px;
  min-height: 64px;
  padding: 10px;
  align-content: center;
}

.merchant-chat-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.message-topbar.standalone {
  margin: 12px 0;
}

.evidence-export-panel label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
}

.evidence-export-panel span,
.evidence-export-panel strong,
.evidence-export-panel em {
  display: block;
}

.followup-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 12px;
}

.followup-list article > span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 11px;
  font-weight: 800;
}

.followup-list p {
  grid-column: 1 / -1;
  color: #414841;
  font-size: 13px;
  line-height: 1.45;
}

.followup-list button {
  justify-self: end;
}

.customer-profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
}

.customer-profile-head strong,
.customer-profile-head span {
  display: block;
}

.video-visit-card {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
}

.video-preview {
  min-height: 142px;
  border-radius: 12px;
  display: grid;
  align-content: end;
  gap: 5px;
  padding: 12px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.62)),
    url("./assets/carecat.png") center / cover no-repeat;
}

.video-preview span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  color: #fff;
  background: var(--orange);
  font-weight: 900;
}

.video-preview strong {
  font-size: 18px;
}

.video-preview em {
  color: rgba(255, 255, 255, 0.84);
}

.pet-card-send {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-top: 12px;
}

.pet-card-send img {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  object-fit: cover;
}

.risk-note {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 12px;
  border-color: #f1dfca;
  background: #fffaf4;
}

.detail-action-row {
  display: grid;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 12px;
  border-radius: 14px;
  background: #fff7f1;
  border: 1px solid #f1dfca;
}

.detail-action-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.detail-action-row .primary-button,
.detail-action-row .orange-button,
.detail-action-row .text-action {
  width: 100%;
}

.commission-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #f7fbf8;
  border: 1px solid #dceee2;
}

.commission-panel strong,
.commission-panel span {
  display: block;
}

.commission-panel strong {
  color: var(--ink);
  font-size: 15px;
}

.commission-panel span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.commission-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.commission-row span {
  min-height: 54px;
  border-radius: 12px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
}

.commission-row b {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: 14px;
}

.commission-table {
  display: grid;
  gap: 8px;
}

.commission-table article {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto;
  gap: 6px 10px;
  padding: 11px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.commission-table strong,
.commission-table span,
.commission-table em,
.commission-table small {
  line-height: 1.4;
}

.commission-table strong {
  color: var(--ink);
  font-size: 13px;
}

.commission-table span {
  justify-self: end;
  color: var(--orange);
  font-size: 15px;
  font-weight: 900;
}

.commission-table em,
.commission-table small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.message-primary-page > .risk-note {
  display: none;
}

.chat-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.chat-profile strong,
.chat-profile span {
  display: block;
}

.chat-profile strong {
  color: var(--ink);
  font-size: 15px;
}

.chat-profile span,
.chat-profile em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.chat-thread {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 0;
}

.chat-day-divider {
  display: grid;
  place-items: center;
  margin: 2px 0;
}

.chat-day-divider span {
  border-radius: 999px;
  padding: 3px 9px;
  color: #8b948b;
  background: #eef1ed;
  font-size: 11px;
}

.wechat-message {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.wechat-message.me {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.wechat-message.me .wechat-avatar {
  grid-column: 2;
}

.wechat-message.me .wechat-message-main {
  grid-column: 1;
  grid-row: 1;
  justify-items: end;
}

.wechat-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.wechat-message.me .wechat-avatar {
  background: var(--orange);
}

.wechat-message-main {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.wechat-message-main small {
  color: var(--muted);
  font-size: 11px;
}

.chat-bubble {
  max-width: 240px;
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(31, 35, 31, 0.04);
}

.chat-bubble strong {
  font-size: 12px;
}

.chat-bubble p {
  color: #303730;
  font-size: 13px;
  line-height: 1.55;
}

.chat-bubble.user {
  background: #95ec69;
  border: 1px solid #7dd957;
}

.chat-bubble.user strong {
  color: #596159;
}

.chat-bubble.seller {
  background: #fff;
  border: 1px solid var(--line);
}

.chat-bubble.seller strong {
  color: var(--green);
}

.wechat-message-menu {
  position: absolute;
  width: 168px;
  display: grid;
  padding: 6px;
  border: 1px solid rgba(31, 35, 31, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 30px rgba(31, 35, 31, 0.18);
  z-index: 45;
}

.wechat-message-menu button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-size: 13px;
}

.wechat-message-menu button:hover {
  background: #f3f6f2;
}

.wechat-message-menu .danger {
  color: #ef4444;
}

.chat-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.chat-tools button {
  min-height: 38px;
  padding: 0 8px;
  font-size: 12px;
}

.chat-tool-panel,
.voice-call-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.chat-tool-hero,
.voice-call-panel,
.user-video-visit {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.chat-tool-hero {
  min-height: 142px;
  display: grid;
  align-content: end;
  gap: 5px;
  padding: 16px;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #f97316);
}

.chat-tool-hero span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 900;
}

.chat-tool-hero strong {
  font-size: 22px;
}

.chat-tool-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  line-height: 1.5;
}

.chat-tool-grid,
.chat-tool-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chat-tool-checklist span {
  min-height: 38px;
  display: grid;
  place-items: center start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.voice-call-panel {
  justify-items: center;
  padding: 18px 14px;
  text-align: center;
}

.voice-call-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-weight: 900;
  font-size: 22px;
}

.voice-call-panel strong {
  color: var(--ink);
  font-size: 18px;
}

.voice-call-panel span {
  color: var(--muted);
  font-size: 12px;
}

.chat-input-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding: 8px;
  border-radius: 14px;
  background: #f7f8f6;
}

.chat-input-demo span {
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.chat-input-demo input {
  min-width: 0;
  border: 0;
  outline: 0;
  border-radius: 10px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
}

.logout-button {
  width: 100%;
  min-height: 43px;
  margin-top: 18px;
  border-radius: 11px;
  color: #a33c3d;
  background: #fff;
  border: 1px solid #ead3d0;
  font-weight: 800;
}

.mine-orders {
  display: grid;
  gap: 10px;
}

.check-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  border-left: 3px solid var(--green);
  border-radius: 0 10px 10px 0;
  padding: 9px 10px;
  background: #f7f8f6;
  color: #4d554d;
  font-size: 13px;
  line-height: 1.45;
}

.mini-section {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.mini-section h3 {
  font-size: 16px;
}

.report-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.report-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.8fr) auto;
  gap: 8px;
  padding: 11px;
  border-bottom: 1px solid #edf0ec;
  align-items: start;
}

.report-row:last-child {
  border-bottom: 0;
}

.report-row strong {
  font-size: 13px;
  line-height: 1.4;
}

.report-row > span:last-child {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.status-badge {
  justify-self: end;
  min-width: 46px;
  border-radius: 999px;
  padding: 4px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.status-badge.ok {
  color: var(--green);
  background: var(--green-soft);
}

.status-badge.warn {
  color: #8a5b00;
  background: #fff4d6;
}

.status-badge.bad {
  color: #a33c3d;
  background: #fff0eb;
}

.admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.admin-kpi {
  min-height: 62px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: var(--ink);
}

.admin-kpi strong {
  color: var(--orange);
  font-size: 18px;
  line-height: 1;
}

.admin-kpi span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.admin-module-grid {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.admin-module {
  min-height: 70px;
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 5px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.admin-module strong {
  font-size: 15px;
}

.admin-module span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.audit-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-list li {
  border-radius: 12px;
  padding: 10px;
  background: #f7f8f6;
  color: #4d554d;
  font-size: 12px;
  line-height: 1.45;
}

.audit-list span {
  display: block;
  color: var(--muted);
  margin-bottom: 3px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.admin-stats span {
  min-height: 58px;
  border-radius: 12px;
  padding: 10px;
  display: grid;
  align-content: center;
  gap: 5px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11px;
}

.admin-stats strong {
  color: var(--ink);
  font-size: 14px;
}

.admin-list {
  display: grid;
  gap: 10px;
}

.admin-card {
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.admin-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}

.admin-card-head strong {
  min-width: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.admin-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.admin-money span {
  border-radius: 10px;
  padding: 8px;
  color: #596159;
  background: #f7f8f6;
  font-size: 11px;
  line-height: 1.35;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-actions .primary-button,
.admin-actions .orange-button {
  min-height: 34px;
  padding: 0 11px;
  font-size: 12px;
}

.admin-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}

.payment-countdown {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 9px 10px;
  border-radius: 12px;
  color: #7a4b13;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: 12px;
  line-height: 1.45;
}

.payment-countdown strong {
  color: #9a3412;
  font-size: 13px;
}

.payment-countdown.expired {
  color: #8b1d1d;
  background: #fff1f2;
  border-color: #fecdd3;
}

.cookie-consent {
  position: sticky;
  top: 8px;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.cookie-consent strong,
.cookie-consent span {
  display: block;
}

.cookie-consent strong {
  font-size: 14px;
}

.cookie-consent span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.cookie-consent .primary-button {
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.user-notice-grid {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.user-notice-card {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 13px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(38, 49, 42, 0.06);
}

.user-notice-card strong {
  font-size: 14px;
}

.user-notice-card span,
.notice-copy {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.readiness-grid {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.readiness-grid article {
  display: grid;
  gap: 8px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 18px rgba(38, 49, 42, 0.06);
}

.readiness-grid strong {
  color: var(--ink);
  font-size: 14px;
}

.readiness-grid p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.readiness-pill {
  width: fit-content;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.readiness-pill.ok {
  color: #067647;
  background: rgba(22, 163, 74, 0.12);
}

.readiness-pill.warn {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}

.notice-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

.notice-action-row .primary-button {
  min-height: 38px;
  padding: 0 16px;
}

.feature-switch-list {
  display: grid;
  gap: 8px;
}

.feature-switch-list label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--line);
}

.feature-switch-list input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.feature-switch-list strong,
.feature-switch-list em {
  display: block;
}

.feature-switch-list strong {
  color: var(--ink);
  font-size: 13px;
}

.feature-switch-list em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.deploy-progress {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border-radius: 14px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--line);
}

.deploy-progress div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.deploy-progress strong {
  color: var(--orange);
  font-size: 28px;
  line-height: 1;
}

.deploy-progress span {
  color: var(--muted);
  font-size: 12px;
}

.deploy-progress meter {
  width: 100%;
  height: 12px;
}

.deploy-checklist {
  display: grid;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.deploy-check {
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #edf0ec;
  color: #313831;
  font-size: 13px;
  line-height: 1.4;
}

.deploy-check:last-child {
  border-bottom: 0;
}

.deploy-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.deploy-check input:checked + span {
  color: var(--muted);
  text-decoration: line-through;
}

.task-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.task-stats span {
  min-height: 60px;
  border-radius: 12px;
  padding: 9px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11px;
}

.task-stats strong {
  color: var(--orange);
  font-size: 18px;
  line-height: 1;
}

.task-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 10px;
}

.task-list {
  display: grid;
  gap: 10px;
}

.task-card {
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.task-card.done {
  opacity: 0.7;
}

.task-title {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  align-items: start;
}

.task-title input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--green);
}

.task-title strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
}

.task-title em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  margin-top: 4px;
}

.task-card p {
  color: #596159;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 9px;
}

.sprint-hero {
  display: grid;
  gap: 5px;
  border-radius: 14px;
  padding: 14px;
  margin: 12px 0;
  color: #213322;
  background: linear-gradient(135deg, #f7fbef, #fff4e7);
  border: 1px solid #eadfcb;
}

.sprint-hero strong {
  font-size: 17px;
}

.sprint-hero span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.sprint-path {
  display: flex;
  gap: 7px;
  align-items: center;
  overflow-x: auto;
  padding: 4px 0 12px;
}

.sprint-path span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  color: #313831;
  font-size: 12px;
}

.sprint-path b {
  color: var(--orange);
  font-size: 13px;
}

.drawer-subtitle {
  margin: 15px 0 9px;
  font-size: 15px;
  color: #222922;
}

.message-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.message-topbar label {
  height: 40px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #f4f6f3;
  color: var(--muted);
}

.message-topbar input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
}

.message-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: end;
  margin: 6px 0 12px;
}

.message-summary strong {
  color: var(--orange);
  font-size: 30px;
  line-height: 1;
}

.message-summary span,
.message-section-title {
  color: var(--muted);
  font-size: 12px;
}

.message-batch-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.message-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.message-shortcuts button {
  min-height: 64px;
  display: grid;
  gap: 3px;
  align-content: center;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
}

.message-shortcuts strong {
  color: var(--ink);
  font-size: 13px;
}

.message-shortcuts span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.message-section-title {
  margin: 14px 0 8px;
  font-weight: 800;
}

.message-batch-tip {
  margin: 6px 0 12px;
  border-radius: 12px;
  padding: 9px 11px;
  color: #5c635c;
  background: #f4f6f3;
  font-size: 12px;
}

.message-thread-list,
.message-list {
  display: grid;
  gap: 9px;
}

.message-thread-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 82px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
}

.message-thread-card.batching,
.message-card.batching {
  grid-template-columns: 26px 42px minmax(0, 1fr);
  user-select: none;
}

.message-thread-card.selected,
.message-card.selected {
  border-color: rgba(230, 65, 25, 0.46);
  background: #fff8f4;
}

.message-thread-card.batching {
  grid-template-columns: 26px 46px minmax(0, 1fr);
}

.message-avatar,
.message-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: var(--green);
  font-weight: 900;
}

.message-check {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #d8ded6;
  border-radius: 999px;
  color: #fff;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.selected .message-check {
  border-color: var(--orange);
  background: var(--orange);
}

.message-thread-main,
.message-thread-head {
  min-width: 0;
}

.message-thread-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.message-thread-head strong {
  color: var(--ink);
  font-size: 15px;
}

.message-thread-head small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.message-thread-main em {
  display: block;
  margin-top: 4px;
  color: #596159;
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.message-thread-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.message-thread-tags b {
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 10px;
}

.message-thread-card i {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--orange);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.message-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 74px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
}

.message-batch-bar {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(40, 48, 42, 0.1);
}

.phone:has(.message-batch-bar) {
  padding-bottom: 28px;
}

.phone:has(.message-batch-bar) .tabbar {
  display: none;
}

.message-batch-bar > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.message-batch-bar .text-link {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 8px;
  font-weight: 800;
  white-space: nowrap;
}

.message-batch-bar .text-link.blue {
  color: #1677c8;
}

.message-batch-bar .text-link.danger {
  color: #d63a2f;
}

.message-batch-bar .text-link:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.message-card.unread {
  border-color: #f1dfca;
  background: #fffaf4;
}

.message-card span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.message-card strong {
  color: var(--ink);
  font-size: 14px;
}

.message-card small,
.message-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.sprint-grid,
.sprint-days {
  display: grid;
  gap: 10px;
}

.sprint-card,
.sprint-day {
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(40, 48, 42, 0.05);
}

.sprint-card strong,
.sprint-day strong {
  display: block;
  color: #222922;
  font-size: 14px;
  line-height: 1.4;
}

.sprint-card em,
.sprint-day em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.sprint-card p,
.sprint-day p {
  margin-top: 9px;
  color: #596159;
  font-size: 12px;
  line-height: 1.45;
}

.seller-panel,
.health-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0;
  background: #fff;
  border: 1px solid var(--line);
}

.seller-panel strong,
.health-summary strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.seller-panel span,
.health-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.trade-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.trade-panel div {
  min-height: 62px;
  border-radius: 12px;
  padding: 10px;
  display: grid;
  align-content: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--line);
}

.trade-panel span {
  color: var(--muted);
  font-size: 11px;
}

.trade-panel strong {
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.payment-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.payment-options .primary-button,
.payment-options .orange-button,
.payment-options .text-action {
  min-height: 42px;
  padding: 0 10px;
  font-size: 13px;
}

.record-section {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.record-section h3 {
  font-size: 16px;
}

.record-card {
  border-radius: 12px;
  padding: 11px;
  background: #fff;
  border: 1px solid var(--line);
}

.record-card strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.record-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.timeline-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.timeline-list li {
  position: relative;
  border-radius: 12px;
  padding: 9px 10px 9px 28px;
  background: #f7f8f6;
  color: #4d554d;
  font-size: 13px;
  line-height: 1.45;
}

.timeline-list li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.express-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(22, 119, 255, 0.16);
  background: linear-gradient(135deg, rgba(22, 119, 255, 0.07), rgba(255, 255, 255, 0.96));
}

.express-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.express-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.express-head span,
.express-timeline span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.express-head em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  color: #0958d9;
  background: #eef6ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.express-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.express-steps span {
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
}

.express-steps span.done {
  color: #fff;
  background: #1677ff;
  border-color: #1677ff;
}

.express-timeline {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.express-timeline li {
  display: grid;
  gap: 3px;
  padding-left: 12px;
  border-left: 3px solid rgba(22, 119, 255, 0.24);
}

.express-timeline b {
  color: var(--ink);
  font-size: 12px;
}

.empty-state.compact {
  padding: 16px 12px;
  font-size: 12px;
}

.detail-body .service-list,
#detailBody .service-list {
  margin-top: 4px;
}

.booking-form {
  display: grid;
  gap: 12px;
}

.booking-form label,
.booking-form fieldset {
  display: grid;
  gap: 6px;
  color: #555d55;
  font-size: 13px;
}

.booking-form input,
.booking-form textarea,
.booking-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  outline: none;
  background: #fbfcfa;
}

.booking-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.booking-form fieldset {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
}

.booking-form legend {
  padding: 0 4px;
  color: var(--ink);
  font-weight: 800;
}

.booking-form fieldset label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.booking-form fieldset input {
  width: auto;
}

.booking-form .fieldset-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.pet-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pet-type-grid label {
  align-items: flex-start;
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
}

.pet-type-grid label:has(input:checked) {
  border-color: var(--orange);
  background: var(--orange-soft);
}

.pet-type-grid span {
  display: grid;
  gap: 3px;
}

.pet-type-grid strong {
  color: var(--ink);
  font-size: 14px;
}

.pet-type-grid em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.booking-form .risk-disclosure-field {
  border-color: #f2c98c;
  background: #fffaf0;
}

.booking-form .risk-disclosure-field label {
  align-items: flex-start;
}

.booking-form .risk-disclosure-field .risk-text {
  display: grid;
  align-items: stretch;
}

.booking-form .risk-disclosure-field input:not([type="checkbox"]) {
  width: 100%;
}

.risk-disclosure-panel {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #f2c98c;
  background: #fffaf0;
}

.risk-disclosure-panel strong {
  color: var(--ink);
  font-size: 14px;
}

.risk-disclosure-panel div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.risk-disclosure-panel span {
  border-radius: 999px;
  padding: 4px 8px;
  color: #8a520c;
  background: #ffe8bd;
  font-size: 11px;
  font-weight: 800;
}

.risk-disclosure-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.price-breakdown {
  border-radius: 14px;
  padding: 10px;
  display: grid;
  gap: 4px;
  background: #fff8ee;
  border: 1px solid #f4d5a8;
}

.price-breakdown span,
.price-breakdown strong {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.price-breakdown em,
.price-breakdown b {
  font-style: normal;
}

.price-breakdown strong {
  color: var(--orange);
  font-size: 15px;
}

.price-breakdown .commission-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.booking-form textarea {
  min-height: 88px;
  resize: vertical;
}

.confirm-card {
  width: min(calc(100vw - 36px), 360px);
  border-radius: 18px;
  background: #fff;
  padding: 20px;
  box-shadow: var(--shadow);
  text-align: center;
}

.confirm-card h2 {
  margin-bottom: 8px;
}

.confirm-card p:not(.level-label) {
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.empty-state {
  border-radius: 16px;
  background: #fff;
  border: 1px dashed #dfe5dd;
  padding: 26px 16px;
  text-align: center;
  color: var(--muted);
}

.floating-service {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--orange);
  box-shadow: 0 8px 18px rgba(230, 65, 25, 0.18);
  font-size: 14px;
  font-weight: 800;
}

.order-filter-bar,
.order-action-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.order-filter-bar {
  grid-template-columns: minmax(0, 1fr) 118px;
}

.order-filter-bar.three {
  grid-template-columns: minmax(0, 1fr) 118px auto;
}

.order-filter-bar input,
.order-filter-bar select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  outline: none;
}

.order-filter-bar button {
  min-height: 39px;
}

.order-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-action-grid button {
  min-height: 42px;
}

@keyframes pageIn {
  from {
    transform: translateX(22px);
    opacity: 0.82;
  }
}

@media (min-width: 900px) {
  body {
    padding: 22px 0;
  }

  .phone {
    min-height: calc(100vh - 44px);
    border-radius: 28px;
    overflow: hidden;
  }

  .tabbar {
    bottom: 22px;
    border-radius: 0 0 28px 28px;
  }
}

@media (max-width: 360px) {
  .admin-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-stats,
  .admin-money,
  .trade-panel,
  .payment-options,
  .platform-strip,
  .platform-grid,
  .safety-card-grid,
  .role-grid,
  .risk-flow,
  .safety-board-grid,
  .guardrail-grid,
  .emergency-grid,
  .insurance-panel,
  .desktop-kpis,
  .desktop-columns,
  .dispatch-summary-grid,
  .dispatch-flow,
  .booking-two-col,
  .order-filter-bar,
  .order-action-grid,
  .ops-focus-strip,
  .order-status-strip,
  .traffic-source-grid {
    grid-template-columns: 1fr;
  }

  .merchant-chat-dashboard,
  .chat-action-row,
  .merchant-chat-tools,
  .customer-mini-crm,
  .merchant-tool-nav {
    grid-template-columns: 1fr;
  }
}

.mine-guest-hero-v2 {
  align-items: center;
  padding-bottom: 34px;
}

.mine-guest-avatar-v2 {
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.16);
}

.mine-guest-subtitle {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
  line-height: 1.45;
}

.mine-guest-login-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: #129fa8;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.mine-guest-order-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid #edf1f2;
  border-radius: 14px;
  background: #fbfcfc;
  text-align: left;
}

.mine-guest-order-hint > span:last-child {
  display: grid;
  gap: 4px;
}

.mine-guest-order-hint strong,
.mine-guest-order-hint em {
  display: block;
}

.mine-guest-order-hint strong {
  color: #203233;
  font-size: 14px;
}

.mine-guest-order-hint em {
  color: #788789;
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.mine-guest-note-v2 {
  display: grid;
  gap: 5px;
  padding: 4px 4px 10px;
  color: #738486;
}

.mine-guest-note-v2 strong {
  color: #253637;
  font-size: 14px;
}

.mine-guest-note-v2 span {
  font-size: 12px;
  line-height: 1.5;
}

/* Final commercial polish: keep behavior intact, normalize visual rhythm. */
:root {
  --brand: #1677ff;
  --brand-soft: #eaf3ff;
  --success: #16a34a;
  --warning: #ef4444;
  --radius: 8px;
  --radius-lg: 8px;
  --shadow-soft: 0 8px 22px rgba(29, 41, 57, 0.08);
  --shadow-hover: 0 14px 30px rgba(29, 41, 57, 0.14);
  --green: var(--brand);
  --green-soft: var(--brand-soft);
  --orange: #ff7a1a;
  --orange-soft: #fff3e8;
  --line: #e5e7eb;
  --bg: #f5f7fb;
  --muted: #667085;
}

:root[data-theme="dark"] {
  --brand-soft: #10243f;
  --orange-soft: #3a2413;
  --bg: #0f172a;
  --card: #111827;
  --ink: #f8fafc;
  --muted: #a7b0c0;
  --line: #263244;
}

html {
  scrollbar-color: var(--brand) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(22, 119, 255, 0.48);
}

::-webkit-scrollbar-track {
  background: transparent;
}

body {
  font-size: calc(14px * var(--app-font-scale));
  line-height: 1.5;
}

h2,
.section-head h2,
.drawer-head h2,
.booking-head h2,
.confirm-card h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

h3,
.pet-body h3,
.service-info h3,
.drawer-subtitle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

p,
li,
input,
textarea,
select,
button,
.muted,
.desc-box {
  font-size: 14px;
  font-weight: 400;
}

.muted,
.tag,
.message-thread-tags b,
.brand-copy p,
.info-panel,
.empty-state p,
.field-hint,
small,
em {
  font-size: 12px;
  font-weight: 400;
}

.phone {
  padding: 16px 16px 88px;
}

.content {
  gap: 16px;
  padding-top: 16px;
}

.app-header,
.section-head,
.merchant-stat-grid,
.pet-grid,
.service-list,
.detail-ops-grid,
.role-setting-list,
.ops-list,
.check-list,
.record-section,
.admin-list,
.task-list {
  gap: 8px;
}

.hero,
.pet-card,
.service-card,
.post-card,
.profile-card,
.learning-card,
.feed-card,
.mine-list,
.mine-row,
.drawer-card,
.booking-panel,
.confirm-card,
.info-panel,
.empty-state,
.merchant-stat-card,
.admin-card,
.message-thread-card,
.message-card,
.chat-profile,
.commission-panel,
.commission-table article,
.commission-row span,
.role-detail-tabs button,
.detail-ops-grid button,
.role-setting-list article,
.record-card,
.order-filter-bar input,
.order-filter-bar select,
.booking-form input,
.booking-form textarea,
.booking-form select,
.booking-form fieldset,
.search-box,
.chat-input-demo,
.chat-input-demo input {
  border-radius: var(--radius);
}

.pet-card,
.service-card,
.feed-card,
.profile-card,
.learning-card,
.message-thread-card,
.message-card,
.merchant-stat-card,
.admin-card,
.task-card,
.sprint-day,
.drawer-card,
.booking-panel,
.confirm-card {
  box-shadow: var(--shadow-soft);
}

.pet-card {
  border-radius: 12px;
}

.pet-card .pet-cover {
  aspect-ratio: 1 / 1;
  min-height: 154px;
}

.clickable-card,
.service-card,
.pet-card,
.feed-card,
.message-thread-card,
.message-card,
.mine-row,
.detail-ops-grid button,
.role-detail-tabs button,
.primary-button,
.orange-button,
.text-action,
.text-link,
.chip,
.tab,
.btn-merchant-entry,
.btn-provider-entry,
.identity-switch-panel button,
.floating-service {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.clickable-card:hover,
.service-card:hover,
.pet-card:hover,
.feed-card:hover,
.message-thread-card:hover,
.message-card:hover,
.mine-row:hover,
.detail-ops-grid button:hover,
.role-detail-tabs button:hover {
  transform: translateY(-2px);
  border-color: rgba(22, 119, 255, 0.28);
  box-shadow: var(--shadow-hover);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.clickable-card:focus-visible {
  outline: 2px solid rgba(22, 119, 255, 0.35);
  outline-offset: 2px;
}

input,
textarea,
select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}

input.is-invalid,
textarea.is-invalid {
  border-color: var(--warning);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

input.is-valid,
textarea.is-valid {
  border-color: var(--success);
}

.field-hint {
  min-height: 16px;
  color: var(--muted);
}

.field-hint.error {
  color: var(--warning);
}

.field-hint.ok {
  color: var(--success);
}

.primary-button,
.orange-button,
.text-action {
  min-height: 40px;
  border-radius: var(--radius);
  padding: 0 16px;
  font-weight: 600;
}

.primary-button {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(22, 119, 255, 0.2);
}

.primary-button:hover,
.floating-service:hover {
  background: #0958d9;
  box-shadow: 0 12px 24px rgba(22, 119, 255, 0.28);
}

.orange-button {
  color: #fff;
  background: var(--orange);
  box-shadow: 0 8px 18px rgba(255, 122, 26, 0.2);
}

.orange-button:hover {
  background: #e96a0f;
  box-shadow: 0 12px 24px rgba(255, 122, 26, 0.26);
}

.text-action,
.text-link,
.chip.active {
  color: var(--brand);
  background: var(--brand-soft);
}

.text-link:hover,
.text-action:hover,
.chip:hover {
  color: #0958d9;
  background: #dbeafe;
}

.chip.active {
  border-color: rgba(22, 119, 255, 0.28);
}

.search-box {
  height: 48px;
  border-color: rgba(22, 119, 255, 0.12);
  background: rgba(255, 255, 255, 0.96);
}

.search-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12), var(--shadow-soft);
}

.tabbar {
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}

.tab svg,
.back-button svg,
.search-box .search-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  border-style: solid;
  padding: 24px 16px;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.empty-state.compact {
  padding: 16px;
}

.empty-state::before {
  content: "宠";
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--orange));
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(22, 119, 255, 0.18);
}

.empty-state .empty-pet {
  display: none;
}

.empty-state strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.empty-state p {
  max-width: 260px;
  color: var(--muted);
}

.lazy-bg {
  background-color: #eef4ff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.lazy-bg:not(.is-loaded) {
  background-size: 72px 72px;
  animation: softPulse 1.2s ease-in-out infinite;
}

.skeleton-line {
  min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f7, #f8fafc, #eef2f7);
  background-size: 200% 100%;
  animation: skeletonMove 1.2s ease-in-out infinite;
}

@keyframes softPulse {
  50% {
    filter: brightness(0.96);
  }
}

@keyframes skeletonMove {
  to {
    background-position: -200% 0;
  }
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .identity-switch-panel button,
:root[data-theme="dark"] .profile-role-tabs button,
:root[data-theme="dark"] .profile-avatar-grid button,
:root[data-theme="dark"] .profile-upload-box,
:root[data-theme="dark"] .order-list-guide,
:root[data-theme="dark"] .order-aftersale-panel,
:root[data-theme="dark"] .merchant-upload-entry article,
:root[data-theme="dark"] .merchant-upload-section,
:root[data-theme="dark"] .upload-record-list article,
:root[data-theme="dark"] .upload-field-grid input,
:root[data-theme="dark"] .upload-field-grid select,
:root[data-theme="dark"] .merchant-upload-form textarea,
:root[data-theme="dark"] .commission-row span,
:root[data-theme="dark"] .commission-table article,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .chat-input-demo input {
  color: var(--ink);
  background: #111827;
  border-color: var(--line);
}

:root[data-theme="dark"] .empty-state {
  background: linear-gradient(180deg, #111827, #0f172a);
}

:root[data-theme="dark"] .upload-guide-strip,
:root[data-theme="dark"] .upload-media-box,
:root[data-theme="dark"] .identity-guide-card,
:root[data-theme="dark"] .profile-setup-card,
:root[data-theme="dark"] .profile-inline-card,
:root[data-theme="dark"] .profile-editor-card,
:root[data-theme="dark"] .order-recent-use,
:root[data-theme="dark"] .launch-guide-card,
:root[data-theme="dark"] .merchant-onboarding-card,
:root[data-theme="dark"] .launch-guide-steps button,
:root[data-theme="dark"] .identity-switch-panel button.active,
:root[data-theme="dark"] .withdraw-panel,
:root[data-theme="dark"] .withdraw-fee-preview,
:root[data-theme="dark"] .upload-step-grid article {
  background: #15211b;
  border-color: var(--line);
}

:root[data-theme="dark"] .text-action,
:root[data-theme="dark"] .text-link,
:root[data-theme="dark"] .order-inline-actions button,
:root[data-theme="dark"] .chip.active {
  color: #93c5fd;
  background: #10243f;
}

:root[data-theme="dark"] .lazy-bg {
  background-color: #142036;
}

@media (max-width: 480px) {
  .withdraw-panel {
    padding: 10px;
    border-radius: 12px;
  }

  .withdraw-panel .merchant-form-grid,
  .merchant-form-grid.compact,
  .withdraw-progress-steps,
  .fee-info-card,
  .withdraw-record-list button {
    grid-template-columns: 1fr;
  }

  .withdraw-panel button,
  .withdraw-record-list button,
  .merchant-form-grid .orange-button.full {
    width: 100%;
  }

  .withdraw-progress-steps article {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .withdraw-progress-steps article span {
    grid-column: 2;
  }

  .withdraw-record-list em {
    max-width: none;
    white-space: normal;
  }
}

@media (max-width: 360px) {
  .phone {
    width: 100vw;
    padding: 12px 12px 84px;
  }

  .hero {
    min-height: 132px;
    padding: 16px;
  }

  .mine-hero {
    padding: 16px 14px;
    gap: 10px;
  }

  .identity-entry-row {
    gap: 6px;
  }

  .btn-merchant-entry,
  .btn-provider-entry {
    width: auto;
    min-width: 82px;
    padding: 0 9px;
    font-size: 12px;
  }

  .hero h2 {
    font-size: 20px;
  }

  .pet-grid,
  .role-detail-tabs,
  .merchant-stat-grid,
  .launch-guide-steps,
  .merchant-onboarding-card div,
  .withdraw-progress-steps,
  .fee-info-card,
  .commission-row,
  .commission-table article,
  .merchant-upload-entry,
  .upload-field-grid,
  .order-filter-bar.three,
  .cookie-consent {
    grid-template-columns: 1fr;
  }

  .upload-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tab {
    min-width: 0;
    font-size: 11px;
  }

  .tab svg {
    width: 18px;
    height: 18px;
  }

  .card-foot,
  .admin-actions,
  .chat-tools,
  .detail-action-row,
  .order-action-grid {
    grid-template-columns: 1fr;
  }

  .primary-button,
  .orange-button,
  .text-action {
    width: 100%;
  }

  .login-code-row,
  .login-hero-card,
  .login-method-card,
  .oauth-hero {
    grid-template-columns: 1fr;
  }

  .login-logo,
  .login-method-card span,
  .oauth-hero span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}

.merchant-chat-state-row,
.merchant-status-list,
.pet-card-choice-grid,
.summary-panel,
.knowledge-list,
.tag-choice-grid {
  display: grid;
  gap: 10px;
}

.merchant-chat-state-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 10px 0 12px;
}

.merchant-chat-state-row span,
.merchant-status-list article,
.tag-choice-grid label,
.pet-card-choice-grid article,
.summary-panel article,
.knowledge-list article {
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.merchant-chat-state-row span {
  min-height: 54px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
}

.merchant-chat-state-row b,
.merchant-status-list strong,
.pet-card-choice-grid strong,
.summary-panel strong,
.knowledge-list strong {
  color: var(--ink);
  font-size: 13px;
}

.merchant-chat-state-row em,
.merchant-status-list p,
.pet-card-choice-grid p,
.summary-panel p,
.knowledge-list p {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.merchant-status-list article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
}

.merchant-status-list article > span {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.merchant-ops-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.tag-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 0 12px;
}

.tag-choice-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.tag-choice-grid input {
  accent-color: var(--green);
}

.tag-editor-row {
  margin: 8px 0 12px;
}

.pet-card-choice-grid article {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.pet-card-choice-grid img {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
  background: #f4f6f3;
}

.pet-card-choice-grid span {
  display: inline-block;
  margin: 3px 0;
  color: var(--orange);
  font-size: 14px;
  font-weight: 900;
}

.summary-panel article,
.knowledge-list article {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.summary-panel span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 11px;
  font-weight: 900;
}

.knowledge-list article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.knowledge-list p {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  .chat-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-tool-grid,
  .chat-tool-checklist {
    grid-template-columns: 1fr;
  }

  .merchant-chat-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merchant-chat-state-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tag-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pet-card-choice-grid article {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .pet-card-choice-grid button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .merchant-ops-strip {
    grid-template-columns: 1fr;
  }
}

/* Store review polish: permissions, global search, recent use and quick order actions. */
.quick-permission-card,
.global-search-panel,
.virtual-list-note {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.quick-permission-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.quick-permission-card strong,
.global-search-results strong {
  display: block;
}

.quick-permission-card span,
.global-search-results span,
.permission-grid span,
.permission-grid em,
.virtual-list-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.global-search-results,
.permission-grid,
.account-data-grid {
  display: grid;
  gap: 8px;
}

.global-search-results button,
.permission-grid button,
.account-data-grid button {
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: #fff;
  text-align: left;
}

.global-search-panel {
  padding: 12px;
}

.search-box.compact {
  margin-bottom: 10px;
  box-shadow: none;
}

.permission-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-data-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.account-data-grid button span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.permission-grid button em {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-soft);
  font-style: normal;
  font-weight: 800;
}

.order-swipe-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 0;
  overflow: visible;
}

.order-swipe-card::-webkit-scrollbar {
  display: none;
}

.order-swipe-main {
  min-width: 0;
}

.order-swipe-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-height: 34px;
  padding: 0 2px;
}

.order-swipe-actions button {
  min-width: 56px;
  min-height: 32px;
  border: 1px solid rgba(22, 119, 255, 0.18);
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.order-swipe-actions button:last-child {
  color: #c2410c;
  border-color: rgba(255, 122, 26, 0.22);
  background: var(--orange-soft);
}

.virtual-list-note {
  padding: 8px 10px;
  box-shadow: none;
}

@media (hover: hover) {
  .order-swipe-actions {
    opacity: 0.96;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .order-swipe-card:hover .order-swipe-actions,
  .order-swipe-card:focus-within .order-swipe-actions {
    opacity: 1;
  }
}

@media (max-width: 360px) {
  .quick-permission-card,
  .permission-grid,
  .account-data-grid {
    grid-template-columns: 1fr;
  }

  .order-swipe-actions button {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

:root[data-theme="dark"] .quick-permission-card,
:root[data-theme="dark"] .global-search-panel,
:root[data-theme="dark"] .virtual-list-note,
:root[data-theme="dark"] .global-search-results button,
:root[data-theme="dark"] .permission-grid button,
:root[data-theme="dark"] .account-data-grid button {
  color: var(--ink);
  background: #111827;
  border-color: var(--line);
}

/* Mine tab follows the compact, task-first personal-center layout. */
.phone:has(.mine-page-v2) {
  background: #f5f7f8;
}

.phone:has(.mine-page-v2) .search-box {
  display: none;
}

.phone:has(.mine-page-v2) .content {
  gap: 0;
  padding-top: 0;
}

.mine-page-v2 {
  min-height: calc(100vh - 70px);
  display: grid;
  gap: 16px;
  width: calc(100% + 32px);
  max-width: none;
  margin: 0 -16px;
  padding: 0 18px 28px;
  background: #f5f7f8;
}

.content > .mine-page-v2 {
  width: calc(100% + 32px);
  max-width: none;
}

.mine-profile-hero-v2 {
  min-height: 150px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -18px;
  padding: 26px 20px 48px;
  color: #fff;
  background: linear-gradient(135deg, #28baa5 0%, #1595b7 100%);
}

.mine-profile-identity-v2 {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.mine-profile-identity-v2 h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 20px;
  line-height: 1.1;
}

.mine-role-pill-v2 {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .22);
  font-size: 11px;
  font-weight: 800;
}

.mine-avatar-v2 {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border: 2px solid rgba(255, 255, 255, .66);
  color: #fff;
  background: rgba(255, 255, 255, .16);
  box-shadow: none;
  font-size: 22px;
}

.mine-edit-v2 {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

.mine-edit-v2 svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mine-orders-card-v2,
.mine-tools-card-v2,
.mine-recent-v2 {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(44, 74, 78, .06);
}

.mine-orders-card-v2 {
  margin-top: -34px;
  padding: 17px 14px 11px;
}

.mine-card-head-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 13px;
}

.mine-card-head-v2 h2 {
  margin: 0;
  color: #172225;
  font-size: 17px;
  line-height: 1.2;
}

.mine-card-head-v2 button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #829197;
  background: transparent;
  font-size: 12px;
}

.mine-card-head-v2 button span {
  color: #829197;
  font-size: 18px;
  line-height: 1;
}

.mine-order-stats-v2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.mine-order-stats-v2 button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 4px 2px 7px;
  color: #263337;
  background: transparent;
}

.mine-order-stats-v2 strong {
  font-size: 12px;
  font-weight: 700;
}

.mine-order-stats-v2 em {
  color: #516067;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.mine-order-icon-v2 {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #12a991;
  background: #e8f7f4;
  font-size: 17px;
  line-height: 1;
}

.mine-order-icon-v2.orange {
  color: #f59a1b;
  background: #fff5e5;
}

.mine-order-icon-v2.gold {
  color: #f0a215;
  background: #fff7e5;
}

.mine-tools-card-v2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px 7px;
  padding: 18px 10px 16px;
}

.mine-tool-v2 {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #203034;
  background: transparent;
}

.mine-tool-v2 strong {
  max-width: 100%;
  overflow: hidden;
  color: #26383c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-tool-icon-v2 {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0ba797;
  background: #e8f6f4;
  font-size: 20px;
  line-height: 1;
}

.mine-auth-card-v2 {
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  color: #213136;
  background: #fff;
  box-shadow: 0 8px 24px rgba(44, 74, 78, .05);
  text-align: left;
}

.mine-auth-icon-v2 {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #24b5c2;
  font-size: 23px;
  line-height: 1;
}

.mine-auth-card-v2 strong,
.mine-auth-card-v2 em {
  display: block;
}

.mine-auth-card-v2 strong {
  font-size: 14px;
}

.mine-auth-card-v2 em {
  margin-top: 2px;
  color: #8a989d;
  font-size: 11px;
  font-style: normal;
}

.mine-auth-card-v2 > b {
  color: #8a989d;
  font-size: 21px;
  font-weight: 400;
}

.mine-switch-role-v2 {
  min-height: 39px;
  border: 1px solid #19b9b1;
  border-radius: 999px;
  color: #16aaa5;
  background: transparent;
  font-size: 12px;
}

.mine-recent-v2 {
  padding: 15px 12px 12px;
}

.mine-recent-v2 .service-list {
  display: grid;
  gap: 10px;
}

.mine-logout-v2 {
  min-height: 38px;
  color: #a15e5e;
  background: transparent;
  font-size: 12px;
}

@media (max-width: 360px) {
  .mine-tools-card-v2 {
    gap: 15px 3px;
    padding-inline: 5px;
  }

  .mine-tool-icon-v2 {
    width: 36px;
    height: 36px;
  }
}