/* ===== CSS 变量 ===== */
    :root {
      --brand:       #4caf82;
      --brand-light: #eef8f3;
      --brand-dark:  #399468;
      --brand-btn:   #52b788;

      --sidebar-bg:      #f5f6fa;
      --sidebar-border:  #e8eaf2;
      --sidebar-text:    #6b7280;
      --sidebar-active-bg: #e8f5ef;
      --sidebar-active-text: #3a9a6a;
      --sidebar-hover-bg: #eff0f6;

      --header-bg:    #ffffff;
      --content-bg:   #f2f4f8;
      --card-bg:      #ffffff;

      --text-primary:   #1a1f2e;
      --text-secondary: #5a6474;
      --text-muted:     #9ba5b2;

      --border:       #e4e8ef;
      --border-light: #edf0f5;

      --red:    #e85858;
      --orange: #f5a623;
      --blue:   #3a85c4;
      --green:  #4caf82;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;

      --shadow-sm: 0 1px 4px rgba(0,0,0,.05);
      --shadow-md: 0 2px 10px rgba(0,0,0,.08);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; color: var(--text-primary); background: var(--content-bg); }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
    ul, li { list-style: none; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #d0d5de; border-radius: 3px; }

body.endpoint-body {
      min-width: 720px;
      min-height: 100vh;
      overflow: auto;
      background: var(--content-bg);
    }
    .endpoint-body .miniprogram-container {
      min-height: 100vh;
    }
    /* ===== 微信小程序预览 ===== */
    .miniprogram-container {
      display: flex;
      gap: 30px;
      padding: 30px;
      height: 100%;
      align-items: flex-start;
      justify-content: center;
    }
    .phone-frame {
      width: 375px;
      height: 740px;
      border-radius: 40px;
      background: #fff;
      box-shadow: 0 0 0 8px #1a1a2e, 0 0 0 10px #333, 0 20px 60px rgba(0,0,0,.3);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: relative;
    }
    .phone-status-bar {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px 0 20px;
      background: #fff;
      font-size: 14px;
      font-weight: 600;
      flex-shrink: 0;
      position: relative;
      z-index: 10;
    }
    .phone-status-icons {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #333;
      font-size: 12px;
    }
    .phone-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      scroll-padding-bottom: 88px;
      background: #f5f5f5;
    }
    .phone-home-indicator {
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: #fff;
    }
    .phone-home-indicator::after {
      content: '';
      width: 134px;
      height: 5px;
      background: #000;
      border-radius: 3px;
      opacity: 0.2;
    }

    /* 页面选择器 */
    .mp-page-selector {
      flex-shrink: 0;
      width: 180px;
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      padding: 16px;
    }
    .mp-selector-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-light);
    }
    .mp-selector-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mp-selector-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-md);
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all .15s;
    }
    .mp-selector-item:hover {
      background: var(--sidebar-hover-bg);
    }
    .mp-selector-item.active {
      background: var(--brand-light);
      color: var(--brand-dark);
      font-weight: 600;
    }
    .mp-selector-icon {
      font-size: 16px;
    }

    /* ===== 小程序内部样式 ===== */
    /* 首页 */
    .mp-home { background: #f5f5f5; min-height: 100%; padding-bottom: 60px; }
    .mp-shop-header {
      background: #fff;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid #f0f0f0;
    }
    .mp-shop-logo {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a8d8b9, #6abf8a);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: #fff;
    }
    .mp-shop-name { font-size: 15px; font-weight: 600; color: #333; }
    .mp-shop-sub { font-size: 11px; color: #999; margin-top: 1px; }
    .mp-search-bar {
      margin: 10px 15px;
      background: #fff;
      border-radius: 20px;
      padding: 8px 15px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #999;
      font-size: 13px;
    }
    .mp-search-bar svg { flex-shrink: 0; opacity: .4; }
    .mp-banner {
      margin: 0 15px 12px;
      border-radius: 10px;
      overflow: hidden;
      height: 140px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      position: relative;
    }
    .mp-banner-text {
      font-size: 20px;
      font-weight: 700;
      text-shadow: 0 2px 8px rgba(0,0,0,.2);
    }
    .mp-banner-sub {
      font-size: 12px;
      opacity: .85;
      margin-top: 4px;
    }
    .mp-banner-dots {
      position: absolute;
      bottom: 10px;
      display: flex;
      gap: 5px;
    }
    .mp-banner-dots span {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,.5);
    }
    .mp-banner-dots span.active { background: #fff; width: 16px; border-radius: 3px; }

    .mp-quick-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 15px;
      background: #fff;
      margin: 0 15px 12px;
      border-radius: 10px;
    }
    .mp-quick-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }
    .mp-quick-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
    }
    .mp-quick-label { font-size: 11px; color: #666; }

    .mp-section {
      background: #fff;
      margin: 0 15px 12px;
      border-radius: 10px;
      padding: 14px;
    }
    .mp-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .mp-section-title { font-size: 15px; font-weight: 600; color: #333; }
    .mp-section-more { font-size: 12px; color: #999; }

    .mp-scroll-row {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .mp-scroll-row::-webkit-scrollbar { display: none; }

    .mp-product-card {
      flex-shrink: 0;
      width: 110px;
      cursor: pointer;
    }
    .mp-product-img {
      width: 110px; height: 110px;
      border-radius: 8px;
      background: #f5f5f5;
      display: flex; align-items: center; justify-content: center;
      font-size: 36px;
      margin-bottom: 6px;
    }
    .mp-product-name {
      font-size: 12px;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }
    .mp-product-price {
      font-size: 14px;
      font-weight: 600;
      color: #e85858;
      margin-top: 4px;
    }
    .mp-product-price::before { content: '¥'; font-size: 11px; }
    .mp-product-sold {
      font-size: 10px;
      color: #999;
      margin-top: 2px;
    }

    .mp-pet-card {
      flex-shrink: 0;
      width: 200px;
      background: #fafafa;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
    }
    .mp-pet-img {
      width: 100%; height: 130px;
      background: #e8dcc8;
      display: flex; align-items: center; justify-content: center;
      font-size: 48px;
    }
    .mp-pet-info { padding: 10px; }
    .mp-pet-name { font-size: 14px; font-weight: 600; color: #333; }
    .mp-pet-desc { font-size: 11px; color: #999; margin-top: 2px; }
    .mp-pet-price { font-size: 16px; font-weight: 600; color: #e85858; margin-top: 4px; }
    .mp-pet-price::before { content: '¥'; font-size: 12px; }

    .mp-hot-list { display: flex; flex-direction: column; gap: 12px; }
    .mp-hot-item {
      display: flex;
      gap: 10px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f5f5f5;
      cursor: pointer;
    }
    .mp-hot-item:last-child { border-bottom: none; padding-bottom: 0; }
    .mp-hot-img {
      width: 80px; height: 80px;
      border-radius: 8px;
      background: #f5f5f5;
      display: flex; align-items: center; justify-content: center;
      font-size: 30px;
      flex-shrink: 0;
    }
    .mp-hot-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
    .mp-hot-name { font-size: 13px; color: #333; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .mp-hot-bottom { display: flex; align-items: center; justify-content: space-between; }
    .mp-hot-price { font-size: 15px; font-weight: 600; color: #e85858; }
    .mp-hot-price::before { content: '¥'; font-size: 11px; }
    .mp-hot-sales { font-size: 11px; color: #999; }

    /* 小程序首页复刻 */
    .mp-home-replica {
      min-height: 100%;
      background: #f5f6f7;
      padding-bottom: 66px;
      color: #20242a;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .mp-home-top {
      min-height: 306px;
      background: linear-gradient(180deg, #82d7b0 0%, #63bf8e 46%, #fbf5ca 46%, #fff9d9 100%);
      position: relative;
      overflow: hidden;
    }
    .mp-home-top::before {
      content: '';
      position: absolute;
      left: -74px;
      top: -48px;
      width: 236px;
      height: 210px;
      background: rgba(255,255,255,.18);
      transform: rotate(17deg);
      border-radius: 34px;
      box-shadow: 135px 40px 0 rgba(255,255,255,.12);
    }
    .mp-home-nav {
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      position: relative;
      z-index: 2;
    }
    .mp-home-title {
      max-width: 230px;
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: 0 1px 3px rgba(25, 106, 73, .18);
    }
    .mp-home-capsule {
      position: absolute;
      right: 8px;
      top: 13px;
      height: 28px;
      width: 88px;
      border-radius: 16px;
      background: rgba(56, 128, 96, .35);
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
    }
    .mp-home-capsule span:last-child {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255,255,255,.9);
      border-radius: 50%;
      font-size: 0;
      position: relative;
    }
    .mp-home-capsule span:last-child::after {
      content: '';
      position: absolute;
      left: 5px;
      top: 5px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #fff;
    }
    .mp-home-search-row {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 13px;
    }
    .mp-home-search {
      flex: 1;
      height: 38px;
      border-radius: 20px;
      background: #fff;
      display: flex;
      align-items: center;
      padding: 0 13px;
      color: #b9c0c8;
      box-shadow: 0 6px 16px rgba(42, 133, 92, .08);
    }
    .mp-home-msg {
      width: 36px;
      color: #fff;
      font-size: 10px;
      text-align: center;
      line-height: 1.1;
    }
    .mp-home-msg-icon {
      width: 20px;
      height: 17px;
      margin: 0 auto 2px;
      border: 2px solid #fff;
      border-radius: 5px;
      position: relative;
    }
    .mp-home-msg-icon::before,
    .mp-home-msg-icon::after {
      content: '';
      position: absolute;
      background: #fff;
      border-radius: 50%;
    }
    .mp-home-msg-icon::before { width: 4px; height: 4px; right: -5px; top: -5px; }
    .mp-home-msg-icon::after { width: 3px; height: 3px; right: 2px; bottom: 3px; box-shadow: -6px 0 0 #fff; }
    .mp-home-hero {
      position: relative;
      z-index: 1;
      margin: 24px 8px 0;
      height: 214px;
      border-radius: 26px 26px 0 0;
      background: #fff;
      overflow: hidden;
    }
    .mp-home-hero::after {
      content: '';
      position: absolute;
      left: -24px;
      right: -24px;
      bottom: -10px;
      height: 58px;
      background: #fff9d9;
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    }
    .mp-home-hero-copy {
      position: absolute;
      left: 24px;
      top: 58px;
      z-index: 3;
    }
    .mp-home-hero-title {
      font-size: 24px;
      font-weight: 800;
      color: #217b5e;
      letter-spacing: 0;
    }
    .mp-home-hero-pill {
      margin-top: 9px;
      height: 25px;
      padding: 0 11px;
      border-radius: 13px;
      background: linear-gradient(90deg, #ff9142, #f4792e);
      color: #fff;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
    }
    .mp-home-hero-art {
      position: absolute;
      right: 12px;
      bottom: 11px;
      width: 194px;
      height: 160px;
      z-index: 2;
    }
    .mp-home-person {
      position: absolute;
      right: 44px;
      top: 6px;
      width: 76px;
      height: 92px;
      border-radius: 44px 44px 24px 24px;
      background: #f1a25d;
    }
    .mp-home-person::before {
      content: '';
      position: absolute;
      left: 25px;
      top: -9px;
      width: 38px;
      height: 34px;
      background: #5b3522;
      border-radius: 50% 50% 42% 42%;
      box-shadow: -15px 20px 0 #5b3522, 37px 32px 0 -6px #5b3522;
    }
    .mp-home-person::after {
      content: '';
      position: absolute;
      left: 30px;
      top: 9px;
      width: 34px;
      height: 32px;
      border-radius: 50%;
      background: #ffd5b0;
      box-shadow: -7px 36px 0 12px #f5f7f4;
    }
    .mp-home-scissor {
      position: absolute;
      right: 0;
      top: -2px;
      width: 44px;
      height: 68px;
    }
    .mp-home-scissor::before,
    .mp-home-scissor::after {
      content: '';
      position: absolute;
      width: 17px;
      height: 17px;
      border: 3px solid #7c7d82;
      border-radius: 50%;
      top: 23px;
    }
    .mp-home-scissor::before { left: 3px; }
    .mp-home-scissor::after { right: 3px; }
    .mp-home-scissor span,
    .mp-home-scissor i {
      position: absolute;
      left: 20px;
      top: 0;
      width: 3px;
      height: 64px;
      background: #7c7d82;
      transform: rotate(-20deg);
      border-radius: 3px;
    }
    .mp-home-scissor i { transform: rotate(20deg); }
    .mp-home-dog {
      position: absolute;
      left: 50px;
      bottom: 0;
      width: 76px;
      height: 87px;
      border-radius: 34px 34px 16px 16px;
      background: #d99233;
      box-shadow: inset 13px 0 0 rgba(255,199,97,.48);
    }
    .mp-home-dog::before {
      content: '';
      position: absolute;
      left: 8px;
      top: -20px;
      width: 58px;
      height: 54px;
      border-radius: 50%;
      background: #f1b64d;
      box-shadow: -10px 9px 0 #805234, 41px 8px 0 #805234;
    }
    .mp-home-dog::after {
      content: '';
      position: absolute;
      left: 24px;
      top: 9px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4c2f24;
      box-shadow: 25px 0 0 #4c2f24, 12px 17px 0 2px #89542d;
    }
    .mp-home-leaf {
      position: absolute;
      left: 2px;
      bottom: 16px;
      width: 55px;
      height: 90px;
      background: #65bd78;
      border-radius: 100% 0 100% 0;
      transform: rotate(-17deg);
      opacity: .95;
      box-shadow: 29px 24px 0 -13px #3d996d, 126px -4px 0 -18px #8ac96b;
    }
    .mp-home-appointment {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 12px 13px 8px;
    }
    .mp-home-service-card {
      min-height: 232px;
      border-radius: 16px;
      background: #fff;
      padding: 18px 10px 0;
      text-align: center;
      overflow: hidden;
      position: relative;
    }
    .mp-home-service-title {
      color: #23745f;
      font-size: 20px;
      font-weight: 800;
    }
    .mp-home-service-sub {
      margin-top: 6px;
      color: #53806f;
      font-size: 11px;
      white-space: nowrap;
    }
    .mp-home-service-ill {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 0;
      height: 142px;
    }
    .mp-home-service-ill .dog {
      position: absolute;
      left: 48px;
      bottom: 0;
      width: 68px;
      height: 86px;
      border-radius: 30px 30px 12px 12px;
      background: #df9d3e;
    }
    .mp-home-service-ill .dog::before {
      content: '';
      position: absolute;
      left: 5px;
      top: -24px;
      width: 56px;
      height: 55px;
      background: #f1bb62;
      border-radius: 50%;
      box-shadow: -10px 10px 0 #8c5f3d, 39px 9px 0 #8c5f3d;
    }
    .mp-home-service-ill .woman {
      position: absolute;
      left: 38px;
      top: 12px;
      width: 74px;
      height: 64px;
      border-radius: 36px 36px 20px 20px;
      background: #f3a465;
    }
    .mp-home-service-ill .cat {
      position: absolute;
      left: 56px;
      bottom: 5px;
      width: 76px;
      height: 78px;
      background: #f7f4ee;
      border-radius: 50% 50% 42% 42%;
      box-shadow: 0 0 0 9px #323238 inset;
    }
    .mp-home-service-ill .person {
      position: absolute;
      left: 10px;
      bottom: 24px;
      width: 94px;
      height: 112px;
      background: #f3a465;
      border-radius: 70px 60px 28px 28px;
      transform: rotate(-18deg);
    }
    .mp-home-feature-panel {
      margin: 14px 13px 10px;
      background: #fff;
      border-radius: 6px;
      min-height: 120px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      box-shadow: 0 1px 0 rgba(0,0,0,.02);
    }
    .mp-home-feature {
      text-align: center;
      color: #4e5966;
      font-size: 12px;
    }
    .mp-home-feature-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 9px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 25px;
      font-weight: 700;
    }
    .mp-home-store {
      margin: 0 13px 14px;
      background: #fff;
      border-radius: 6px;
      padding: 10px 8px;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 11px;
      align-items: center;
    }
    .mp-home-store-logo {
      width: 72px;
      height: 54px;
      border-radius: 5px;
      background: #f35a50;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    .mp-home-store-logo img {
      height: 64px;
      transform: translateY(5px);
    }
    .mp-home-store-name {
      font-size: 14px;
      font-weight: 700;
      color: #1f2429;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .mp-home-store-address {
      margin-top: 4px;
      font-size: 12px;
      color: #4b5563;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .mp-home-block {
      margin: 0 13px 16px;
    }
    .mp-home-block-head {
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .mp-home-block-title {
      font-size: 17px;
      font-weight: 500;
      color: #1f2429;
    }
    .mp-home-block-more {
      font-size: 12px;
      color: #6f7782;
    }
    .mp-home-pet-card {
      width: 184px;
      background: #fff;
      border-radius: 4px;
      overflow: hidden;
    }
    .mp-home-pet-img {
      height: 198px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mp-home-cat-face {
      width: 136px;
      height: 116px;
      border-radius: 52% 52% 45% 45%;
      background: #dfe8f3;
      border: 4px solid #172535;
      position: relative;
    }
    .mp-home-cat-face::before,
    .mp-home-cat-face::after {
      content: '';
      position: absolute;
      top: -31px;
      width: 52px;
      height: 52px;
      background: #dfe8f3;
      border: 4px solid #172535;
      transform: rotate(45deg);
      z-index: 0;
    }
    .mp-home-cat-face::before { left: 1px; }
    .mp-home-cat-face::after { right: 1px; }
    .mp-home-cat-eye {
      position: absolute;
      top: 39px;
      left: 36px;
      width: 17px;
      height: 30px;
      border-radius: 50%;
      background: #172535;
      box-shadow: 48px 0 0 #172535;
      z-index: 2;
    }
    .mp-home-cat-eye::after {
      content: '';
      position: absolute;
      left: 4px;
      top: 5px;
      width: 5px;
      height: 7px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 48px 0 0 #fff;
    }
    .mp-home-cat-nose {
      position: absolute;
      left: 61px;
      top: 75px;
      width: 14px;
      height: 12px;
      border-radius: 50% 50% 60% 60%;
      background: #172535;
      z-index: 2;
    }
    .mp-home-cat-nose::before,
    .mp-home-cat-nose::after {
      content: '';
      position: absolute;
      top: -19px;
      width: 8px;
      height: 4px;
      border-radius: 50%;
      background: #f4a5b4;
    }
    .mp-home-cat-nose::before { left: -39px; }
    .mp-home-cat-nose::after { right: -39px; }
    .mp-home-pet-info {
      padding: 0 8px 12px;
    }
    .mp-home-pet-tag {
      display: inline-flex;
      height: 18px;
      align-items: center;
      padding: 0 5px;
      border-radius: 2px;
      background: #9be4b5;
      color: #fff;
      font-size: 10px;
    }
    .mp-home-pet-name {
      font-size: 13px;
      color: #1f2429;
      margin-left: 4px;
    }
    .mp-home-price {
      margin-top: 24px;
      color: #ef4b3f;
      font-size: 15px;
    }
    .mp-home-price::before {
      content: '¥';
      font-size: 12px;
      margin-right: 1px;
    }
    .mp-home-store-goods {
      border: 1.5px solid #1e9a64;
      border-radius: 8px;
      background: #fff;
      padding: 9px 6px 11px;
      overflow: hidden;
    }
    .mp-home-store-goods-head {
      display: flex;
      justify-content: space-between;
      margin: 0 2px 8px;
      font-size: 14px;
      color: #1f2429;
    }
    .mp-home-store-goods-head span:last-child {
      font-size: 11px;
      color: #1f2429;
    }
    .mp-home-store-row {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .mp-home-store-row::-webkit-scrollbar { display: none; }
    .mp-home-mini-product {
      flex: 0 0 111px;
      min-width: 0;
    }
    .mp-home-mini-img {
      height: 79px;
      border-radius: 7px;
      overflow: hidden;
      background: #f4e3c6;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      position: relative;
    }
    .mp-home-mini-img .ad {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      line-height: 1.2;
      background: linear-gradient(135deg, rgba(255,169,57,.72), rgba(37,115,215,.82));
    }
    .mp-home-mini-name {
      margin-top: 5px;
      font-size: 12px;
      line-height: 1.25;
      color: #20242a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-home-mini-price {
      color: #ff6a35;
      font-size: 13px;
      text-align: center;
    }
    .mp-home-delivery-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 12px;
    }
    .mp-home-delivery-card {
      background: #fff;
      border-radius: 4px;
      overflow: hidden;
      min-height: 250px;
      display: flex;
      flex-direction: column;
    }
    .mp-home-delivery-img {
      height: 145px;
      margin: 10px 8px 6px;
      border-radius: 4px;
      background: #f5f7f7;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      color: #1f2429;
      font-weight: 800;
      text-align: center;
      line-height: 1.18;
    }
    .mp-home-pack {
      width: 116px;
      height: 92px;
      border-radius: 12px 12px 18px 18px;
      background: linear-gradient(135deg, #192f9a, #3562ef);
      box-shadow: inset -18px -12px 0 rgba(255,255,255,.1);
      transform: perspective(120px) rotateX(5deg) rotateZ(-2deg);
      position: relative;
    }
    .mp-home-pack::before {
      content: '全价全期犬粮\A 无谷低敏配方';
      white-space: pre;
      color: #fff;
      position: absolute;
      left: 14px;
      top: 16px;
      font-size: 12px;
      line-height: 1.25;
      text-align: left;
    }
    .mp-home-pack::after {
      content: '';
      position: absolute;
      right: 12px;
      bottom: 11px;
      width: 44px;
      height: 30px;
      border-radius: 50%;
      background: #fff8e6;
    }
    .mp-home-pouch {
      width: 112px;
      height: 118px;
      border-radius: 18px 18px 30px 30px;
      background: linear-gradient(135deg, #edf9dd, #f8fff4);
      box-shadow: inset -13px -9px 0 rgba(123, 205, 123, .22), 0 0 0 1px #e1eadb;
      position: relative;
      transform: rotate(8deg);
    }
    .mp-home-pouch::before {
      content: '';
      position: absolute;
      left: 28px;
      top: 40px;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: #b7e6a5;
      opacity: .85;
    }
    .mp-home-poster {
      width: 154px;
      height: 125px;
      border-radius: 3px;
      background: linear-gradient(145deg, #e5f4c8 0%, #e5f4c8 48%, #fffae8 48%, #fffae8 100%);
      border: 1px solid #b6d88d;
      position: relative;
      color: #223318;
      font-size: 14px;
      padding: 16px 10px;
    }
    .mp-home-poster::after {
      content: '19.9';
      position: absolute;
      right: 12px;
      bottom: 10px;
      color: #253617;
      font-size: 18px;
      font-weight: 900;
    }
    .mp-home-litter {
      width: 145px;
      height: 126px;
      border: 2px solid #7e2f92;
      border-radius: 5px;
      background: linear-gradient(180deg, #fbfbfb 0 68%, #d5f59d 68% 100%);
      padding: 12px 8px;
      font-size: 13px;
      color: #20242a;
    }
    .mp-home-delivery-name {
      padding: 0 8px;
      color: #20242a;
      font-size: 14px;
      line-height: 1.35;
      min-height: 38px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .mp-home-cloud-tag {
      display: inline-flex;
      height: 16px;
      align-items: center;
      padding: 0 5px;
      border-radius: 2px;
      background: #f19b75;
      color: #fff;
      font-size: 10px;
      margin-right: 4px;
      vertical-align: 1px;
    }
    .mp-home-delivery-price {
      color: #ef4b3f;
      font-size: 15px;
      padding: 6px 8px 11px;
      margin-top: auto;
    }
    .mp-home-delivery-price::before {
      content: '¥';
      font-size: 12px;
      margin-right: 1px;
    }

    /* 小程序洗护预约 */
    .mp-groom-booking-page {
      min-height: 100%;
      background: #f5f6f8;
      color: #161b2f;
      padding-bottom: 18px;
      position: relative;
      overflow-x: hidden;
    }
    .mp-groom-nav {
      height: 88px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border-bottom: 1px solid #eef0f2;
      flex-shrink: 0;
    }
    .mp-groom-back {
      position: absolute;
      left: 25px;
      top: 31px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #111;
      cursor: pointer;
    }
    .mp-groom-back svg { width: 26px; height: 26px; }
    .mp-groom-nav-title {
      font-size: 21px;
      font-weight: 500;
      color: #05070d;
    }
    .mp-groom-capsule {
      position: absolute;
      right: 13px;
      top: 24px;
      height: 32px;
      width: 108px;
      border: 1px solid #e8eaed;
      border-radius: 18px;
      background: rgba(255,255,255,.92);
      display: grid;
      grid-template-columns: 1fr 1px 1fr 1px 1fr;
      align-items: center;
      justify-items: center;
      color: #111;
      box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    }
    .mp-groom-capsule .dot { font-size: 20px; letter-spacing: -1px; transform: translateY(-2px); }
    .mp-groom-capsule .line { width: 18px; height: 4px; border-radius: 2px; background: #111; }
    .mp-groom-capsule .circle {
      width: 22px;
      height: 22px;
      border: 4px solid #111;
      border-radius: 50%;
      position: relative;
    }
    .mp-groom-capsule .circle::after {
      content: '';
      position: absolute;
      left: 5px;
      top: 5px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #111;
    }
    .mp-groom-divider {
      width: 1px;
      height: 22px;
      background: #e4e5e8;
    }
    .mp-groom-pet-bar {
      height: 103px;
      margin-top: 25px;
      background: linear-gradient(90deg, #66d0bb, #54bd78);
      border-radius: 13px 13px 0 0;
      padding: 0 25px;
      display: flex;
      align-items: center;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .mp-groom-pet-bar::after {
      content: '';
      position: absolute;
      right: -8px;
      top: 20px;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: rgba(255,255,255,.08);
      box-shadow: -18px 20px 0 rgba(255,255,255,.07);
    }
    .mp-groom-pet-logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(255,255,255,.8);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #d1d7d9;
      font-size: 9px;
      margin-right: 13px;
      flex-shrink: 0;
    }
    .mp-groom-pet-name {
      font-size: 24px;
      font-weight: 500;
      position: relative;
      z-index: 1;
    }
    .mp-groom-switch {
      position: absolute;
      right: 25px;
      top: 29px;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: #fff;
      color: #5bb784;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    .mp-groom-tabs {
      height: 91px;
      margin-top: -1px;
      background: #fff;
      border-radius: 11px 11px 0 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      position: relative;
      overflow: hidden;
    }
    .mp-groom-tabs::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 52%;
      height: 100%;
      background: #fff;
      border-bottom-right-radius: 78px;
      box-shadow: 25px 0 0 #e9ecef;
    }
    .mp-groom-tab {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 23px;
      color: #080a11;
    }
    .mp-groom-tab.active {
      color: #58a467;
      font-weight: 800;
    }
    .mp-groom-tab.active::after {
      content: '';
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 72px;
      height: 5px;
      border-radius: 5px;
      background: #5aaa73;
    }
    .mp-groom-body {
      display: grid;
      grid-template-columns: 176px 1fr;
      min-height: 640px;
    }
    .mp-groom-side {
      background: #fff;
      padding-top: 27px;
      border-radius: 0 16px 0 0;
    }
    .mp-groom-cat {
      height: 91px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      color: #0b0e18;
    }
    .mp-groom-cat.active {
      background: #f7f8fa;
      border-radius: 0 16px 16px 0;
    }
    .mp-groom-list {
      padding: 37px 23px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 26px;
    }
    .mp-groom-service-card {
      min-height: 154px;
      background: #fff;
      border-radius: 13px;
      padding: 16px 16px 14px;
      display: grid;
      grid-template-columns: 176px minmax(0, 1fr) 34px;
      column-gap: 20px;
      position: relative;
      cursor: pointer;
    }
    .mp-groom-service-img {
      width: 176px;
      height: 176px;
      border-radius: 10px;
      background: #f5f5f6;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #a5a9ae;
      font-size: 72px;
      grid-row: span 2;
      overflow: hidden;
    }
    .mp-groom-dog-face {
      width: 112px;
      height: 99px;
      border-radius: 45% 45% 48% 48%;
      background: linear-gradient(90deg, #d2d3d4 0 48%, #f7f7f7 48% 52%, #d2d3d4 52% 100%);
      position: relative;
      opacity: .68;
    }
    .mp-groom-dog-face::before,
    .mp-groom-dog-face::after {
      content: '';
      position: absolute;
      top: -27px;
      width: 52px;
      height: 58px;
      background: #d2d3d4;
      border-radius: 8px 42px 8px 42px;
      transform: rotate(-18deg);
    }
    .mp-groom-dog-face::before { left: 0; }
    .mp-groom-dog-face::after { right: 0; transform: rotate(18deg) scaleX(-1); }
    .mp-groom-dog-face span {
      position: absolute;
      left: 34px;
      top: 39px;
      width: 9px;
      height: 16px;
      border-radius: 50%;
      background: #777;
      box-shadow: 37px 0 0 #777, 18px 31px 0 3px #777;
      z-index: 2;
    }
    .mp-groom-card-title {
      font-size: 22px;
      color: #25283d;
      line-height: 1.25;
      padding-top: 3px;
    }
    .mp-groom-price-row {
      align-self: end;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-bottom: 12px;
    }
    .mp-groom-member {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      height: 28px;
      border-radius: 5px;
      overflow: hidden;
      background: #f0cc78;
      color: #2d3149;
      font-size: 18px;
      line-height: 1;
    }
    .mp-groom-member span:first-child {
      height: 100%;
      padding: 0 10px;
      background: #38394f;
      color: #ffe29a;
      display: inline-flex;
      align-items: center;
    }
    .mp-groom-member span:last-child {
      padding: 0 9px;
    }
    .mp-groom-price {
      color: #e3392f;
      font-size: 32px;
      line-height: 1;
    }
    .mp-groom-price::before {
      content: '¥';
      font-size: 18px;
      margin-right: 7px;
      vertical-align: 5px;
    }
    .mp-groom-price::after {
      content: '起';
      font-size: 18px;
      margin-left: 3px;
    }
    .mp-groom-add {
      align-self: center;
      justify-self: end;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: #63af77;
      color: #fff;
      font-size: 31px;
      line-height: 30px;
      cursor: pointer;
    }
    .mp-groom-desc {
      grid-column: 1 / -1;
      border-top: 1px solid #edf0f2;
      margin-top: 14px;
      padding-top: 14px;
      color: #9a9fa8;
      font-size: 19px;
      line-height: 1.45;
    }
    .mp-groom-placeholder {
      color: #999da3;
      font-size: 42px;
      width: 56px;
      height: 42px;
      border: 5px solid #9da1a7;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
    }
    .mp-groom-sheet-mask {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.58);
      z-index: 40;
      align-items: flex-end;
    }
    .mp-groom-sheet-mask.show { display: flex; }
    .mp-groom-sheet {
      width: 100%;
      min-height: 444px;
      background: #fff;
      border-radius: 12px 12px 0 0;
      padding: 28px 25px 96px;
      position: relative;
    }
    .mp-groom-sheet-title {
      text-align: center;
      font-size: 26px;
      color: #2d3048;
      margin-bottom: 60px;
    }
    .mp-groom-sheet-main {
      display: grid;
      grid-template-columns: 198px 1fr;
      gap: 22px;
      align-items: start;
    }
    .mp-groom-sheet-img {
      width: 198px;
      height: 198px;
      border-radius: 10px;
      background: #f5f5f6;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mp-groom-sheet-name {
      font-size: 22px;
      color: #25283d;
      margin-bottom: 12px;
    }
    .mp-groom-duration {
      display: inline-flex;
      align-items: center;
      height: 35px;
      border: 2px solid #63af77;
      border-radius: 4px;
      padding: 0 9px;
      color: #63af77;
      font-size: 17px;
      margin-bottom: 16px;
    }
    .mp-groom-sheet-price { margin-top: 18px; }
    .mp-groom-spec-title {
      margin-top: 38px;
      font-size: 24px;
      color: #25283d;
    }
    .mp-groom-specs {
      margin-top: 24px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .mp-groom-spec {
      height: 52px;
      min-width: 175px;
      border-radius: 27px;
      background: #f2f0f3;
      color: #5f6370;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      padding: 0 21px;
      cursor: pointer;
    }
    .mp-groom-spec.active {
      background: #f3fbf6;
      color: #477c62;
      border: 2px solid #62b27c;
    }
    .mp-groom-sheet-footer {
      position: absolute;
      left: 25px;
      right: 25px;
      bottom: 28px;
    }
    .mp-groom-book-btn {
      width: 100%;
      height: 54px;
      border: none;
      border-radius: 28px;
      background: linear-gradient(90deg, #65ac79, #427d5d);
      color: #fff;
      font-size: 24px;
      cursor: pointer;
    }
    .mp-groom-detail {
      min-height: 100%;
      background: #f6f7f9;
      color: #05070d;
      padding-bottom: 84px;
      position: relative;
    }
    .mp-groom-detail-hero {
      height: 375px;
      background: linear-gradient(180deg, #fff8e7, #fffdf5);
      position: relative;
      overflow: hidden;
    }
    .mp-groom-detail-back {
      position: absolute;
      left: 16px;
      top: 28px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(255,255,255,.75);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      cursor: pointer;
    }
    .mp-groom-detail-capsule { top: 27px; z-index: 3; }
    .mp-groom-detail-poster-text {
      position: absolute;
      left: 28px;
      right: 28px;
      top: 30px;
      text-align: center;
      color: #df8ba0;
      font-size: 48px;
      font-weight: 900;
      transform: rotate(5deg);
      text-shadow: 0 0 0 #fff, 2px 2px 0 #fff5f5;
      z-index: 1;
    }
    .mp-groom-detail-dog {
      position: absolute;
      left: 48px;
      right: 48px;
      bottom: -8px;
      height: 280px;
      border-radius: 48% 48% 42% 42%;
      background: radial-gradient(circle at 38% 30%, #fff6ca 0 11%, transparent 12%),
                  radial-gradient(circle at 62% 30%, #fff6ca 0 11%, transparent 12%),
                  #f7d974;
      box-shadow: inset 0 -54px 0 rgba(255,255,255,.36);
      z-index: 2;
    }
    .mp-groom-detail-dog::before,
    .mp-groom-detail-dog::after {
      content: '';
      position: absolute;
      top: 75px;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: #663c2b;
      box-shadow: inset -8px -8px 0 rgba(0,0,0,.12);
    }
    .mp-groom-detail-dog::before { left: 110px; }
    .mp-groom-detail-dog::after { right: 110px; }
    .mp-groom-detail-dog span {
      position: absolute;
      left: 50%;
      top: 139px;
      width: 28px;
      height: 22px;
      border-radius: 50%;
      background: #7b4b32;
      transform: translateX(-50%);
    }
    .mp-groom-detail-dog span::after {
      content: '';
      position: absolute;
      left: 9px;
      top: 24px;
      width: 14px;
      height: 22px;
      border-radius: 50%;
      background: #e59a72;
    }
    .mp-groom-detail-page-dot {
      position: absolute;
      right: 26px;
      bottom: 12px;
      height: 33px;
      padding: 0 12px;
      border-radius: 18px;
      background: rgba(0,0,0,.36);
      color: #fff;
      font-size: 19px;
      display: flex;
      align-items: center;
      z-index: 4;
    }
    .mp-groom-detail-card {
      margin: 11px 25px 0;
      background: #fff;
      border-radius: 12px;
      padding: 31px 26px 22px;
    }
    .mp-groom-detail-price-line {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 23px;
    }
    .mp-groom-detail-title {
      font-size: 26px;
      line-height: 1.2;
      margin-bottom: 26px;
    }
    .mp-groom-detail-desc {
      border-top: 1px solid #eef0f2;
      padding-top: 21px;
      color: #777c85;
      font-size: 22px;
    }
    .mp-groom-care-title {
      margin: 28px 25px 25px;
      font-size: 26px;
      color: #05070d;
    }
    .mp-groom-care-card {
      margin: 0 25px;
      min-height: 286px;
      background: #fff;
      border-radius: 12px;
      padding: 33px 25px;
    }
    .mp-groom-care-name {
      font-size: 25px;
      margin-bottom: 27px;
    }
    .mp-groom-care-item {
      width: 208px;
      height: 181px;
      border: 1px solid #e4e6e9;
      border-radius: 7px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #05070d;
      font-size: 20px;
    }
    .mp-groom-care-emoji {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: #f2f3f5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 31px;
    }
    .mp-groom-care-price {
      font-size: 22px;
      font-weight: 800;
    }
    .mp-groom-care-plus {
      width: 34px;
      height: 34px;
      border: 2px solid #62b27c;
      color: #62b27c;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 27px;
      line-height: 1;
    }
    .mp-groom-detail-footer {
      position: sticky;
      left: 0;
      right: 0;
      bottom: 0;
      height: 83px;
      background: #fff;
      box-shadow: 0 -2px 10px rgba(15,23,42,.08);
      display: grid;
      grid-template-columns: 86px 86px 1fr;
      align-items: center;
      padding: 0 26px 0 22px;
      gap: 10px;
    }
    .mp-groom-footer-mini {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #25283d;
      font-size: 19px;
      gap: 4px;
    }
    .mp-groom-footer-mini svg {
      width: 32px;
      height: 32px;
    }
    .mp-groom-detail-btn {
      height: 56px;
      border: none;
      border-radius: 28px;
      background: linear-gradient(90deg, #65ac79, #427d5d);
      color: #fff;
      font-size: 24px;
      cursor: pointer;
    }
    .mp-groom-reserve-page {
      min-height: 100%;
      background: #f5f6f8;
      color: #07101e;
      padding-bottom: 84px;
      position: relative;
    }
    .mp-groom-reserve-nav {
      height: 56px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border-bottom: 1px solid #eef0f2;
    }
    .mp-groom-reserve-nav .mp-groom-back {
      left: 14px;
      top: 13px;
    }
    .mp-groom-reserve-nav .mp-groom-capsule {
      width: 96px;
      height: 30px;
      right: 10px;
      top: 13px;
    }
    .mp-groom-reserve-title {
      font-size: 18px;
      font-weight: 600;
    }
    .mp-groom-reserve-petbar {
      margin: 12px 12px 10px;
      height: 58px;
      border-radius: 7px;
      background: #afd7bf;
      display: flex;
      align-items: center;
      padding: 0 14px;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }
    .mp-groom-reserve-petbar .mp-groom-pet-logo {
      width: 36px;
      height: 36px;
      margin: 0;
      color: #cfd9d5;
      background: rgba(255,255,255,.72);
    }
    .mp-groom-reserve-pet-name {
      font-size: 18px;
      color: #07101e;
      flex: 1;
    }
    .mp-groom-pet-select {
      height: 34px;
      border-radius: 18px;
      padding: 0 14px;
      background: #579869;
      color: #fff;
      font-size: 15px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
    .mp-groom-reserve-switch {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #67ad7a;
      color: #dceee3;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }
    .mp-groom-reserve-service {
      margin: 0 10px;
      background: #fff;
      min-height: 100px;
      padding: 12px 14px;
      display: grid;
      grid-template-columns: 64px minmax(0,1fr) 34px;
      gap: 12px;
      align-items: start;
      position: relative;
    }
    .mp-groom-reserve-service-img {
      width: 64px;
      height: 64px;
      border-radius: 6px;
      overflow: hidden;
      background: #fff7df;
      position: relative;
    }
    .mp-groom-reserve-service-img::before {
      content: '狗狗精致修剪';
      position: absolute;
      left: 4px;
      right: 4px;
      top: 4px;
      color: #d8879b;
      font-size: 9px;
      text-align: center;
      font-weight: 800;
      transform: rotate(-8deg);
    }
    .mp-groom-reserve-service-img::after {
      content: '';
      position: absolute;
      left: 17px;
      top: 23px;
      width: 33px;
      height: 34px;
      border-radius: 50%;
      background: #f3d36e;
      box-shadow: inset 0 -8px 0 rgba(255,255,255,.3);
    }
    .mp-groom-reserve-service-name {
      font-size: 17px;
      margin: 3px 0 12px;
    }
    .mp-groom-reserve-spec {
      display: inline-flex;
      height: 24px;
      border-radius: 13px;
      align-items: center;
      padding: 0 9px;
      background: #f1f2f5;
      color: #969ca6;
      font-size: 14px;
      margin-bottom: 12px;
    }
    .mp-groom-reserve-desc {
      color: #8e949e;
      font-size: 15px;
    }
    .mp-groom-reserve-remove {
      position: absolute;
      right: 0;
      top: 0;
      width: 34px;
      height: 34px;
      border-radius: 0 0 0 18px;
      background: #6aaa7a;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      line-height: 1;
    }
    .mp-groom-reserve-add-service {
      margin: 16px auto 26px;
      width: 118px;
      height: 38px;
      border: 1.5px solid #68ad7b;
      border-radius: 20px;
      color: #68ad7b;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    .mp-groom-add-pet {
      height: 52px;
      background: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: #69ad7b;
      font-size: 17px;
      margin-bottom: 1px;
    }
    .mp-groom-add-pet span:first-child {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #69ad7b;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      line-height: 1;
    }
    .mp-groom-time-panel {
      background: #fff;
      margin: 0 12px 10px;
      padding-bottom: 14px;
    }
    .mp-groom-time-head {
      min-height: 45px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      border-bottom: 1px solid #eef0f2;
      font-size: 17px;
    }
    .mp-groom-date-strip {
      padding: 13px 12px 2px;
      display: flex;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .mp-groom-date-strip::-webkit-scrollbar { display: none; }
    .mp-groom-date-card {
      flex: 0 0 76px;
      height: 62px;
      border: none;
      border-radius: 8px;
      background: #f7f7f8;
      color: #1f2937;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
    }
    .mp-groom-date-card span:last-child {
      font-size: 13px;
      font-weight: 500;
    }
    .mp-groom-date-card.active {
      background: #ffd900;
      color: #1f2937;
    }
    .mp-groom-period-grid {
      padding: 13px 12px 10px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .mp-groom-period {
      min-height: 62px;
      border-radius: 8px;
      background: #f7f8fa;
      border: 1px solid #edf0f2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 7px;
      padding: 9px 8px;
      color: #07101e;
      cursor: pointer;
      box-sizing: border-box;
    }
    .mp-groom-period.active {
      background: #8bcda3;
      border-color: #72bd8e;
      color: #fff;
    }
    .mp-groom-period-time {
      font-size: 14px;
      font-weight: 800;
      color: #111827;
      line-height: 1.2;
      white-space: nowrap;
    }
    .mp-groom-period-capacity {
      align-self: flex-start;
      height: 20px;
      border-radius: 10px;
      background: #eef1f3;
      color: #8a939c;
      display: flex;
      align-items: center;
      padding: 0 8px;
      font-size: 11px;
      line-height: 1;
    }
    .mp-groom-period.active .mp-groom-period-time,
    .mp-groom-period.active .mp-groom-period-capacity {
      color: rgba(255,255,255,.9);
    }
    .mp-groom-period.active .mp-groom-period-capacity {
      background: rgba(255,255,255,.22);
    }
    .mp-groom-subslots {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px 6px;
      padding: 2px 0 0;
    }
    .mp-groom-subslot {
      height: 40px;
      border-radius: 6px;
      background: #fff;
      border: 1px solid #e7ecef;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #07101e;
    }
    .mp-groom-subslot.active {
      background: #eaf7ef;
      border-color: #75bd8e;
      color: #4c9a65;
      font-weight: 700;
    }
    .mp-groom-info-card,
    .mp-groom-remark-card {
      margin: 10px 12px 0;
      background: #fff;
      border-radius: 8px;
      padding: 17px 12px;
    }
    .mp-groom-info-title,
    .mp-groom-remark-title {
      font-size: 18px;
      margin-bottom: 20px;
    }
    .mp-groom-info-row {
      min-height: 34px;
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr) 24px;
      align-items: center;
      gap: 8px;
      font-size: 16px;
    }
    .mp-groom-info-label {
      color: #9aa0a8;
    }
    .mp-groom-info-value {
      text-align: right;
      color: #07101e;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .mp-groom-edit-icon {
      color: #b6bbc3;
      font-size: 18px;
    }
    .mp-groom-remark-card {
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      min-height: 74px;
    }
    .mp-groom-remark-title {
      margin-bottom: 0;
    }
    .mp-groom-remark-placeholder {
      color: #9aa0a8;
      text-align: right;
      font-size: 15px;
      white-space: nowrap;
    }
    .mp-groom-reserve-footer {
      position: sticky;
      bottom: 0;
      height: 56px;
      background: #fff;
      box-shadow: 0 -2px 10px rgba(15,23,42,.08);
      display: grid;
      grid-template-columns: minmax(0,1fr) 114px;
      gap: 12px;
      align-items: center;
      padding: 8px 12px;
    }
    .mp-groom-fee {
      min-width: 0;
    }
    .mp-groom-fee-main {
      font-size: 16px;
      color: #25283d;
    }
    .mp-groom-fee-main strong {
      color: #ef5b56;
      font-size: 25px;
      font-weight: 500;
    }
    .mp-groom-fee-sub {
      margin-top: 2px;
      color: #9aa0a8;
      font-size: 13px;
    }
    .mp-groom-confirm-btn {
      height: 47px;
      border: none;
      border-radius: 24px;
      background: #579868;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
    }
    .mp-groom-booking-page .mp-groom-nav { height: 64px; }
    .mp-groom-booking-page .mp-groom-back { left: 14px; top: 18px; }
    .mp-groom-booking-page .mp-groom-nav-title { font-size: 20px; }
    .mp-groom-booking-page .mp-groom-capsule {
      width: 96px; height: 30px; top: 17px; right: 10px;
    }
    .mp-groom-pet-bar {
      height: 78px; margin-top: 14px; padding: 0 16px; border-radius: 10px 10px 0 0;
    }
    .mp-groom-pet-logo { width: 42px; height: 42px; margin-right: 10px; }
    .mp-groom-pet-name { font-size: 21px; }
    .mp-groom-switch {
      right: 16px; top: 20px; width: 40px; height: 40px; font-size: 25px;
    }
    .mp-groom-tabs { height: 64px; }
    .mp-groom-tabs::before { border-bottom-right-radius: 48px; box-shadow: 16px 0 0 #e9ecef; }
    .mp-groom-tab { font-size: 20px; }
    .mp-groom-tab.active::after { width: 42px; height: 4px; bottom: 6px; }
    .mp-groom-body {
      grid-template-columns: 88px minmax(0, 1fr);
      min-height: auto;
    }
    .mp-groom-side { padding-top: 14px; border-radius: 0 12px 0 0; }
    .mp-groom-cat { height: 78px; font-size: 18px; }
    .mp-groom-cat.active { border-radius: 0 12px 12px 0; }
    .mp-groom-list { padding: 16px 10px 18px; gap: 12px; min-width: 0; }
    .mp-groom-service-card {
      min-height: 118px;
      border-radius: 10px;
      padding: 10px 9px;
      grid-template-columns: 82px minmax(0, 1fr) 28px;
      column-gap: 10px;
      align-items: start;
    }
    .mp-groom-service-img {
      width: 82px; height: 82px; border-radius: 8px; font-size: 34px;
    }
    .mp-groom-dog-face { width: 54px; height: 48px; }
    .mp-groom-dog-face::before,
    .mp-groom-dog-face::after {
      top: -13px; width: 25px; height: 28px; border-radius: 5px 22px 5px 22px;
    }
    .mp-groom-dog-face span {
      left: 16px; top: 18px; width: 5px; height: 8px;
      box-shadow: 18px 0 0 #777, 9px 15px 0 2px #777;
    }
    .mp-groom-card-title {
      font-size: 16px;
      line-height: 1.25;
      padding-top: 2px;
    }
    .mp-groom-price-row {
      gap: 7px;
      padding-bottom: 0;
      min-width: 0;
    }
    .mp-groom-member {
      height: 21px;
      font-size: 12px;
      border-radius: 4px;
      max-width: 132px;
    }
    .mp-groom-member span:first-child { padding: 0 6px; white-space: nowrap; }
    .mp-groom-member span:last-child {
      padding: 0 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-groom-price { font-size: 23px; white-space: nowrap; }
    .mp-groom-price::before {
      font-size: 13px;
      margin-right: 4px;
      vertical-align: 3px;
    }
    .mp-groom-price::after { font-size: 13px; margin-left: 2px; }
    .mp-groom-add {
      width: 28px; height: 28px; font-size: 25px; line-height: 25px;
    }
    .mp-groom-desc {
      margin-top: 9px;
      padding-top: 8px;
      font-size: 14px;
      grid-column: 2 / -1;
    }
    .mp-groom-placeholder {
      width: 34px; height: 34px; font-size: 25px; border-width: 3px;
    }
    .mp-groom-sheet {
      min-height: 430px;
      padding: 22px 16px 84px;
    }
    .mp-groom-sheet-title {
      font-size: 22px;
      margin-bottom: 34px;
    }
    .mp-groom-sheet-main {
      grid-template-columns: 98px minmax(0, 1fr);
      gap: 14px;
    }
    .mp-groom-sheet-img {
      width: 98px; height: 98px;
    }
    .mp-groom-sheet-name {
      font-size: 18px;
      margin-bottom: 8px;
    }
    .mp-groom-duration {
      height: 26px;
      font-size: 13px;
      border-width: 1px;
      margin-bottom: 10px;
    }
    .mp-groom-sheet-price { margin-top: 12px; }
    .mp-groom-spec-title {
      margin-top: 28px;
      font-size: 20px;
    }
    .mp-groom-specs {
      margin-top: 16px;
      gap: 8px;
    }
    .mp-groom-spec {
      height: 36px;
      min-width: 92px;
      border-radius: 18px;
      font-size: 15px;
      padding: 0 12px;
    }
    .mp-groom-sheet-footer { left: 16px; right: 16px; bottom: 18px; }
    .mp-groom-book-btn {
      height: 46px;
      font-size: 19px;
    }
    .mp-groom-detail { padding-bottom: 0; }
    .mp-groom-detail-hero {
      height: 320px;
    }
    .mp-groom-detail-back {
      left: 14px; top: 24px; width: 44px; height: 44px;
    }
    .mp-groom-detail-capsule {
      width: 96px; height: 30px; top: 24px; right: 10px;
    }
    .mp-groom-detail-poster-text {
      left: 32px;
      right: 32px;
      top: 54px;
      font-size: 34px;
      line-height: 1.08;
    }
    .mp-groom-detail-dog {
      left: 46px;
      right: 46px;
      bottom: -18px;
      height: 230px;
    }
    .mp-groom-detail-dog::before,
    .mp-groom-detail-dog::after {
      top: 70px;
      width: 40px;
      height: 40px;
    }
    .mp-groom-detail-dog::before { left: 76px; }
    .mp-groom-detail-dog::after { right: 76px; }
    .mp-groom-detail-dog span {
      top: 126px;
      width: 22px;
      height: 17px;
    }
    .mp-groom-detail-dog span::after {
      left: 7px;
      top: 18px;
      width: 12px;
      height: 18px;
    }
    .mp-groom-detail-page-dot {
      right: 15px;
      bottom: 12px;
      height: 28px;
      font-size: 15px;
    }
    .mp-groom-detail-card {
      margin: 10px 12px 0;
      border-radius: 10px;
      padding: 18px 16px 16px;
    }
    .mp-groom-detail-price-line {
      gap: 10px;
      margin-bottom: 16px;
      flex-wrap: nowrap;
    }
    .mp-groom-detail-price-line .mp-groom-price { font-size: 30px; flex-shrink: 0; }
    .mp-groom-detail-price-line .mp-groom-member {
      max-width: 140px;
      height: 24px;
      font-size: 13px;
    }
    .mp-groom-detail-title {
      font-size: 22px;
      margin-bottom: 16px;
    }
    .mp-groom-detail-desc {
      padding-top: 14px;
      font-size: 17px;
    }
    .mp-groom-care-title {
      margin: 20px 12px 14px;
      font-size: 22px;
    }
    .mp-groom-care-card {
      margin: 0 12px 18px;
      min-height: 210px;
      padding: 20px 16px;
    }
    .mp-groom-care-name {
      font-size: 20px;
      margin-bottom: 16px;
    }
    .mp-groom-care-item {
      width: 118px;
      height: 150px;
      gap: 7px;
      font-size: 16px;
    }
    .mp-groom-care-emoji {
      width: 44px;
      height: 44px;
      font-size: 24px;
    }
    .mp-groom-care-price { font-size: 18px; }
    .mp-groom-care-plus {
      width: 28px;
      height: 28px;
      font-size: 22px;
    }
    .mp-groom-detail-footer {
      height: 70px;
      grid-template-columns: 58px 58px minmax(0, 1fr);
      padding: 0 12px;
      gap: 8px;
    }
    .mp-groom-footer-mini {
      font-size: 14px;
      gap: 2px;
    }
    .mp-groom-footer-mini svg {
      width: 25px;
      height: 25px;
    }
    .mp-groom-detail-btn {
      height: 46px;
      border-radius: 24px;
      font-size: 16px;
      padding: 0 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 小程序底部Tab栏 */
    .mp-tab-bar {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      height: 50px;
      background: #fff;
      border-top: 1px solid #eee;
      display: flex;
      z-index: 10;
    }
    .mp-tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-size: 10px;
      color: #999;
      cursor: pointer;
      transition: color .15s;
    }
    .mp-tab-item.active { color: #4caf82; }
    .mp-tab-item svg { width: 22px; height: 22px; }
    .mp-tab-cart-badge {
      position: relative;
    }
    .mp-tab-cart-badge::after {
      content: '3';
      position: absolute;
      top: -6px; right: -10px;
      background: #e85858;
      color: #fff;
      font-size: 10px;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      padding: 0 4px;
    }


    /* ===== 小程序首页 V2：清爽品牌商城 ===== */
    .mp-home-commerce {
      min-height: 100%;
      padding-bottom: 66px;
      background: #f4f6f8;
      color: #19212b;
    }
    .mp-home-commerce-head {
      padding: 10px 14px 16px;
      background: #fff;
      border-bottom: 1px solid #edf0f2;
    }
    .mp-home-commerce-nav {
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .mp-home-commerce-shop {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 9px;
    }
    .mp-home-commerce-logo {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: linear-gradient(135deg, #2f9a6d, #63c492);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      box-shadow: 0 5px 12px rgba(40,145,99,.2);
    }
    .mp-home-commerce-shop-copy { min-width: 0; }
    .mp-home-commerce-shop-name {
      max-width: 180px;
      font-size: 14px;
      font-weight: 750;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-home-commerce-shop-status {
      margin-top: 2px;
      color: #7c8794;
      font-size: 10px;
    }
    .mp-home-commerce-capsule {
      width: 72px;
      height: 26px;
      border: 1px solid #e1e5e9;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      color: #252b32;
      font-size: 15px;
      font-weight: 700;
    }
    .mp-home-commerce-search {
      height: 36px;
      margin-top: 9px;
      padding: 0 13px;
      border-radius: 18px;
      background: #f1f3f5;
      color: #9aa3ad;
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
    }
    .mp-home-commerce-hero {
      min-height: 154px;
      margin: 12px 13px 0;
      padding: 22px 20px;
      border-radius: 20px;
      background: linear-gradient(130deg, #19885f 0%, #43ae7d 64%, #6cc99b 100%);
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(29,137,96,.2);
    }
    .mp-home-commerce-hero::before,
    .mp-home-commerce-hero::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,.1);
    }
    .mp-home-commerce-hero::before { width: 150px; height: 150px; right: -46px; top: -55px; }
    .mp-home-commerce-hero::after { width: 88px; height: 88px; right: 42px; bottom: -52px; }
    .mp-home-commerce-hero-kicker {
      font-size: 11px;
      opacity: .82;
      letter-spacing: 1px;
    }
    .mp-home-commerce-hero-title {
      margin-top: 8px;
      font-size: 25px;
      line-height: 1.2;
      font-weight: 800;
    }
    .mp-home-commerce-hero-desc {
      margin-top: 9px;
      font-size: 11px;
      opacity: .86;
    }
    .mp-home-commerce-hero-pet {
      position: absolute;
      right: 24px;
      bottom: 20px;
      width: 92px;
      height: 92px;
      border-radius: 32px;
      background: rgba(255,255,255,.95);
      color: #3d976f;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 55px;
      transform: rotate(4deg);
      box-shadow: 0 12px 24px rgba(20,91,63,.18);
    }
    .mp-home-commerce-services {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 12px 13px 0;
    }
    .mp-home-commerce-service {
      min-height: 102px;
      padding: 15px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #e8ecef;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 5px 16px rgba(28,40,52,.05);
    }
    .mp-home-commerce-service.primary { border-top: 3px solid #2d996c; }
    .mp-home-commerce-service.secondary { border-top: 3px solid #dfaa5a; }
    .mp-home-commerce-service-title { font-size: 16px; font-weight: 800; }
    .mp-home-commerce-service-desc {
      max-width: 105px;
      margin-top: 6px;
      color: #7a8490;
      font-size: 10px;
      line-height: 1.45;
    }
    .mp-home-commerce-service-icon {
      position: absolute;
      right: 10px;
      bottom: 8px;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: #edf8f2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 23px;
    }
    .mp-home-commerce-service.secondary .mp-home-commerce-service-icon { background: #fff5e6; }
    .mp-home-commerce-quick {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin: 12px 13px 0;
      padding: 14px 7px 12px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #e9edef;
    }
    .mp-home-commerce-quick-item {
      text-align: center;
      color: #4d5864;
      font-size: 10px;
    }
    .mp-home-commerce-quick-icon {
      width: 38px;
      height: 38px;
      margin: 0 auto 7px;
      border-radius: 13px;
      background: #eaf6f0;
      color: #21865e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .mp-home-commerce-store {
      margin: 12px 13px 0;
      padding: 12px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #e9edef;
      display: grid;
      grid-template-columns: 44px minmax(0,1fr) auto;
      gap: 10px;
      align-items: center;
    }
    .mp-home-commerce-store-logo {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: #2e956b;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
    }
    .mp-home-commerce-store-name { font-size: 13px; font-weight: 750; }
    .mp-home-commerce-store-address {
      margin-top: 4px;
      color: #818b96;
      font-size: 9px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-home-commerce-store-enter { color: #8a949e; font-size: 18px; }
    .mp-home-commerce-section { margin: 17px 13px 0; }
    .mp-home-commerce-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 9px;
    }
    .mp-home-commerce-section-title { font-size: 16px; font-weight: 800; }
    .mp-home-commerce-section-more { color: #87919c; font-size: 10px; }
    .mp-home-commerce-pets,
    .mp-home-commerce-products {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 8px;
    }
    .mp-home-commerce-product {
      padding: 7px;
      border-radius: 13px;
      background: #fff;
      border: 1px solid #e9edef;
      min-width: 0;
    }
    .mp-home-commerce-product-img {
      height: 78px;
      border-radius: 10px;
      background: #f1f4f5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      overflow: hidden;
    }
    .mp-home-commerce-product-name {
      height: 29px;
      margin-top: 7px;
      font-size: 10px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .mp-home-commerce-product-price {
      margin-top: 5px;
      color: #e95252;
      font-size: 13px;
      font-weight: 800;
    }
    .mp-home-commerce-delivery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 10px;
    }
    .mp-home-commerce-delivery .mp-home-commerce-product-img { height: 118px; }
    .mp-home-commerce-cloud {
      display: inline-flex;
      margin-right: 3px;
      padding: 1px 4px;
      border-radius: 3px;
      background: #f2a07a;
      color: #fff;
      font-size: 8px;
    }

    /* ===== 小程序洗护预约 V2 ===== */
    .mp-g2-page {
      min-height: 100%;
      padding-bottom: 76px;
      background: #f4f6f8;
      color: #18212b;
      position: relative;
    }
    .mp-g2-nav {
      height: 56px;
      padding: 0 14px;
      background: #fff;
      border-bottom: 1px solid #e8ecef;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      font-size: 17px;
      font-weight: 750;
    }
    .mp-g2-back {
      position: absolute;
      left: 10px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #26313c;
      cursor: pointer;
    }
    .mp-g2-back svg { width: 23px; height: 23px; }
    .mp-g2-capsule {
      position: absolute;
      right: 10px;
      width: 70px;
      height: 27px;
      border: 1px solid #e0e5e8;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font-size: 14px;
    }
    .mp-g2-progress { padding: 11px 14px 0; }
    .mp-g2-progress-copy {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #7f8994;
      font-size: 10px;
    }
    .mp-g2-progress-copy > span:first-child { min-width: 0; }
    .mp-g2-progress-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .mp-g2-progress-back {
      height: 23px;
      padding: 0 9px;
      border: 1px solid #9bc8b3;
      border-radius: 12px;
      color: #2f7f5e;
      background: #fff;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
    }
    .mp-g2-progress-line {
      height: 4px;
      margin-top: 7px;
      border-radius: 3px;
      background: #e1e6e9;
      overflow: hidden;
    }
    .mp-g2-progress-line span {
      display: block;
      height: 100%;
      border-radius: 3px;
      background: #2d996c;
      transition: width .2s;
    }
    .mp-g2-card {
      margin: 12px 13px 0;
      padding: 15px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #e8ecef;
      box-shadow: 0 4px 14px rgba(22,34,46,.04);
    }
    .mp-g2-card-title { font-size: 17px; font-weight: 800; }
    .mp-g2-card-desc {
      margin-top: 5px;
      color: #84909b;
      font-size: 11px;
      line-height: 1.5;
    }
    .mp-g2-pet-list { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
    .mp-g2-pet-item {
      min-height: 65px;
      padding: 10px;
      border: 1px solid #e5e9ec;
      border-radius: 13px;
      display: grid;
      grid-template-columns: 44px minmax(0,1fr) 24px;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      background: #fff;
    }
    .mp-g2-pet-item.selected { border-color: #37a576; background: #f0faf5; }
    .mp-g2-pet-avatar {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: #eaf6f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
    .mp-g2-pet-name { font-size: 14px; font-weight: 750; }
    .mp-g2-pet-meta { margin-top: 4px; color: #87919b; font-size: 10px; }
    .mp-g2-check {
      width: 21px;
      height: 21px;
      border: 1px solid #d9dfe3;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      font-size: 12px;
    }
    .mp-g2-pet-item.selected .mp-g2-check { background: #32a171; border-color: #32a171; color: #fff; }
    .mp-g2-add-pet {
      margin: 10px 13px 0;
      height: 48px;
      border: 1px dashed #7bb99c;
      border-radius: 14px;
      background: #f7fcf9;
      color: #27865f;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .mp-g2-footer {
      position: sticky;
      left: 0;
      right: 0;
      bottom: 0;
      margin-top: 14px;
      min-height: 68px;
      padding: 10px 13px;
      background: rgba(255,255,255,.96);
      border-top: 1px solid #e7ebee;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 12;
    }
    .mp-g2-footer-summary { flex: 1; min-width: 0; }
    .mp-g2-footer-main { font-size: 13px; font-weight: 750; }
    .mp-g2-footer-sub { margin-top: 3px; color: #8a949f; font-size: 9px; }
    .mp-g2-btn {
      min-width: 136px;
      height: 45px;
      padding: 0 18px;
      border-radius: 23px;
      background: #2d956a;
      color: #fff;
      font-size: 14px;
      font-weight: 750;
      border: none;
      cursor: pointer;
    }
    .mp-g2-btn.disabled { background: #c6cdd1; cursor: not-allowed; }
    .mp-g2-pet-tabs {
      display: flex;
      gap: 7px;
      padding: 11px 13px 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .mp-g2-pet-tabs::-webkit-scrollbar { display: none; }
    .mp-g2-pet-tab {
      flex: 0 0 auto;
      min-width: 86px;
      padding: 8px 10px;
      border-radius: 12px;
      background: #e9edf0;
      color: #697480;
      font-size: 11px;
      text-align: center;
      cursor: pointer;
    }
    .mp-g2-pet-tab.active { background: #2e956b; color: #fff; }
    .mp-g2-pet-tab.done:not(.active) { background: #e5f5ec; color: #277b59; }
    .mp-g2-question {
      margin: 12px 13px 0;
      padding: 15px;
      border-radius: 16px;
      background: #fff8e8;
      border: 1px solid #f3dcae;
    }
    .mp-g2-question-title { font-size: 15px; font-weight: 800; color: #6f501f; }
    .mp-g2-question-desc { margin-top: 5px; color: #9a7540; font-size: 10px; }
    .mp-g2-question-progress {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 7px;
      color: #aa8249;
      font-size: 9px;
    }
    .mp-g2-choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .mp-g2-choice {
      min-width: 70px;
      height: 34px;
      padding: 0 12px;
      border: 1px solid #e1c58f;
      border-radius: 17px;
      background: #fff;
      color: #71562d;
      font-size: 12px;
      cursor: pointer;
    }
    .mp-g2-choice.active { border-color: #2f996d; background: #eaf7f0; color: #227a56; }
    .mp-g2-question-skip {
      width: 100%;
      margin-top: 11px;
      padding-top: 10px;
      border: 0;
      border-top: 1px solid rgba(189,145,74,.22);
      background: transparent;
      color: #8a6a36;
      font-size: 10px;
      text-align: right;
      cursor: pointer;
    }
    .mp-g2-skipped-note {
      margin: 12px 13px 0;
      padding: 10px 12px;
      border-radius: 13px;
      background: #eef6f2;
      color: #60736a;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 9px;
    }
    .mp-g2-skipped-note button {
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      color: #27865f;
      font-size: 10px;
      font-weight: 750;
      cursor: pointer;
    }
    .mp-g2-service-discovery {
      margin: 12px 13px 0;
      padding: 12px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #e8ecef;
      box-shadow: 0 4px 14px rgba(39,61,51,.04);
    }
    .mp-g2-service-search {
      height: 42px;
      padding: 0 12px;
      border: 1px solid #dfe6e3;
      border-radius: 13px;
      background: #f7f9f8;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #8b9690;
    }
    .mp-g2-service-search svg { flex: 0 0 auto; }
    .mp-g2-service-search input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: #2f3b35;
      font-size: 11px;
    }
    .mp-g2-service-search input::placeholder { color: #a2aaa6; }
    .mp-g2-search-clear {
      width: 22px;
      height: 22px;
      border: 0;
      border-radius: 50%;
      background: #e7ece9;
      color: #76817b;
      cursor: pointer;
    }
    .mp-g2-service-browser {
      margin: 12px 13px 0;
      min-height: 320px;
      border: 1px solid #e6ebe8;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(22,34,46,.04);
      display: grid;
      grid-template-columns: 82px minmax(0,1fr);
      align-items: stretch;
      overflow: hidden;
    }
    .mp-g2-category-sidebar {
      min-width: 0;
      padding: 10px 7px 14px;
      background: #f5f8f6;
      border-right: 1px solid #e6ebe8;
      align-self: stretch;
    }
    .mp-g2-category-sidebar-inner {
      position: sticky;
      top: 8px;
    }
    .mp-g2-category-entry {
      width: 100%;
      min-height: 35px;
      padding: 7px 6px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #617068;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3px;
      text-align: left;
      font-size: 10px;
      line-height: 1.2;
      cursor: pointer;
    }
    .mp-g2-category-entry + .mp-g2-category-entry { margin-top: 3px; }
    .mp-g2-category-entry small {
      flex: 0 0 auto;
      color: #9aa49f;
      font-size: 8px;
      font-weight: 500;
    }
    .mp-g2-category-entry.active {
      background: #3c9b71;
      color: #fff;
      font-weight: 750;
      box-shadow: 0 3px 8px rgba(60,155,113,.18);
    }
    .mp-g2-category-entry.active small { color: rgba(255,255,255,.82); }
    .mp-g2-category-groups {
      margin-top: 9px;
      padding-top: 8px;
      border-top: 1px solid #e1e7e3;
    }
    .mp-g2-category-group + .mp-g2-category-group { margin-top: 8px; }
    .mp-g2-category-entry.parent {
      min-height: 31px;
      color: #35463d;
      font-weight: 800;
    }
    .mp-g2-category-entry.child {
      min-height: 31px;
      padding-left: 13px;
      font-size: 9px;
    }
    .mp-g2-category-entry.parent.active,
    .mp-g2-category-entry.child.active { color: #fff; }
    .mp-g2-service-panel { min-width: 0; padding: 13px 10px 16px; }
    .mp-g2-service-panel .mp-g2-card-title { font-size: 15px; }
    .mp-g2-service-panel .mp-g2-service-item {
      padding: 8px;
      grid-template-columns: 48px minmax(0,1fr) 22px;
      gap: 8px;
      border-radius: 12px;
    }
    .mp-g2-service-panel .mp-g2-service-img { width: 48px; height: 48px; border-radius: 10px; font-size: 23px; }
    .mp-g2-service-panel .mp-g2-service-name { font-size: 12px; }
    .mp-g2-service-panel .mp-g2-service-desc {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .mp-g2-service-panel .mp-g2-service-tags { gap: 3px; }
    .mp-g2-service-panel .mp-g2-service-tag { padding: 2px 5px; font-size: 8px; }
    .mp-g2-service-panel .mp-g2-service-price { font-size: 15px; }
    .mp-g2-service-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .mp-g2-filter-tag {
      flex: 0 0 auto;
      padding: 4px 8px;
      border-radius: 10px;
      background: #e8f5ee;
      color: #2a805c;
      font-size: 9px;
    }
    .mp-g2-service-list { margin-top: 11px; display: flex; flex-direction: column; gap: 10px; }
    .mp-g2-service-item {
      padding: 10px;
      border: 1px solid #e4e9ec;
      border-radius: 14px;
      display: grid;
      grid-template-columns: 64px minmax(0,1fr) 25px;
      gap: 10px;
      align-items: center;
      background: #fff;
      cursor: pointer;
    }
    .mp-g2-service-item.selected { border-color: #35a374; background: #f0faf5; }
    .mp-g2-service-img {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      background: #f0f3f4;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
    }
    .mp-g2-service-name { font-size: 13px; font-weight: 750; }
    .mp-g2-service-desc { margin-top: 4px; color: #89939e; font-size: 9px; line-height: 1.4; }
    .mp-g2-service-tags { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }
    .mp-g2-service-tag {
      padding: 2px 6px;
      border-radius: 7px;
      background: #f0f2f4;
      color: #76808a;
      font-size: 8px;
    }
    .mp-g2-service-price { margin-top: 6px; color: #e25555; font-size: 15px; font-weight: 800; }
    .mp-g2-service-select {
      width: 22px;
      height: 22px;
      border: 1px solid #dce2e5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      font-size: 11px;
    }
    .mp-g2-service-item.selected .mp-g2-service-select { background: #34a172; border-color: #34a172; color: #fff; }

    .mp-g2-addon-panel {
      grid-column: 1 / -1;
      width: 100%;
      margin-top: 2px;
      padding-top: 9px;
      border-top: 1px solid #dce9e2;
      cursor: default;
    }
    .mp-g2-addon-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #34483d;
      font-size: 9px;
    }
    .mp-g2-addon-head strong { font-size: 10px; }
    .mp-g2-addon-head span { color: #7f8d85; }
    .mp-g2-addon-list { margin-top: 7px; display: flex; flex-direction: column; gap: 6px; }
    .mp-g2-addon-item {
      width: 100%;
      min-width: 0;
      padding: 7px;
      border: 1px solid #e1e7e4;
      border-radius: 10px;
      background: #fff;
      display: grid;
      grid-template-columns: 27px minmax(0,1fr) auto 18px;
      gap: 7px;
      align-items: center;
      color: #34413a;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }
    .mp-g2-addon-item.selected { border-color: #4ba47d; background: #eaf7f0; }
    .mp-g2-addon-icon {
      width: 27px;
      height: 27px;
      border-radius: 8px;
      background: #f1f5f3;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
    .mp-g2-addon-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mp-g2-addon-copy strong { font-size: 9px; }
    .mp-g2-addon-copy small {
      color: #89948e;
      font-size: 7px;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-g2-addon-price { color: #e25555; font-size: 9px; font-weight: 750; white-space: nowrap; }
    .mp-g2-addon-check {
      width: 18px;
      height: 18px;
      border: 1px solid #d7dfdb;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      font-size: 9px;
    }
    .mp-g2-addon-item.selected .mp-g2-addon-check { background: #3a9c70; border-color: #3a9c70; color: #fff; }
    .mp-g2-service-empty {
      padding: 30px 12px;
      border: 1px dashed #dce4e0;
      border-radius: 14px;
      background: #fafcfb;
      color: #8a9590;
      text-align: center;
    }
    .mp-g2-service-empty-icon { font-size: 29px; }
    .mp-g2-service-empty-title { margin-top: 8px; color: #54615b; font-size: 12px; font-weight: 750; }
    .mp-g2-service-empty-desc { margin-top: 4px; font-size: 9px; }
    .mp-g2-detail-hero {
      height: 205px;
      margin: 12px 13px 0;
      border-radius: 18px;
      background: linear-gradient(135deg, #e6f5ed, #f9fbfa);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 92px;
    }
    .mp-g2-detail-price { color: #e45151; font-size: 24px; font-weight: 850; }
    .mp-g2-detail-meta { margin-top: 8px; display: flex; gap: 7px; }
    .mp-g2-detail-meta span { padding: 4px 8px; border-radius: 9px; background: #f0f3f4; color: #727d88; font-size: 9px; }
    .mp-g2-summary-list { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; }
    .mp-g2-summary-item {
      padding: 10px;
      border: 1px solid #e5e9ec;
      border-radius: 12px;
      display: grid;
      grid-template-columns: 38px minmax(0,1fr) auto;
      gap: 9px;
      align-items: center;
    }
    .mp-g2-summary-avatar {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: #eaf6f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
    }
    .mp-g2-summary-name { font-size: 12px; font-weight: 750; }
    .mp-g2-summary-service { margin-top: 3px; color: #828d98; font-size: 9px; }
    .mp-g2-summary-addons { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; }
    .mp-g2-summary-addons div { display: flex; justify-content: space-between; gap: 8px; color: #6f7c75; font-size: 8px; }
    .mp-g2-summary-addons strong { color: #d95a5a; font-weight: 700; }
    .mp-g2-summary-price { color: #e15353; font-size: 13px; font-weight: 800; }
    .mp-g2-date-strip { display: flex; gap: 8px; margin-top: 11px; overflow-x: auto; scrollbar-width: none; }
    .mp-g2-date-strip::-webkit-scrollbar { display: none; }
    .mp-g2-date {
      flex: 0 0 72px;
      height: 65px;
      border: 1px solid #e4e9ec;
      border-radius: 12px;
      background: #f6f8f9;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: #5e6974;
      font-size: 10px;
      cursor: pointer;
    }
    .mp-g2-date strong { font-size: 14px; }
    .mp-g2-date.active { border-color: #2e956b; background: #2e956b; color: #fff; }
    .mp-g2-capacity-rule {
      margin-top: 11px;
      padding: 8px 10px;
      border-radius: 10px;
      background: #eef5f1;
      color: #68766f;
      display: flex;
      justify-content: space-between;
      font-size: 9px;
    }
    .mp-g2-capacity-rule strong { color: #267c59; }
    .mp-g2-period-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
    .mp-g2-period {
      min-width: 0;
      padding: 11px 3px;
      border: 1px solid #e1e6e9;
      border-radius: 12px;
      background: #f8f9fa;
      text-align: center;
      cursor: pointer;
    }
    .mp-g2-period.active { border-color: #3ca878; background: #3ca878; color: #fff; }
    .mp-g2-period.disabled { color: #a6aeb5; background: #f0f1f2; cursor: not-allowed; }
    .mp-g2-period-time { font-size: 10px; font-weight: 750; white-space: nowrap; }
    .mp-g2-period-capacity {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 51px;
      height: 20px;
      margin-top: 7px;
      padding: 0 6px;
      border-radius: 10px;
      background: #e9edef;
      color: #818b95;
      font-size: 9px;
      white-space: nowrap;
    }
    .mp-g2-period.active .mp-g2-period-capacity { background: rgba(255,255,255,.9); color: #66736c; }
    .mp-g2-period.disabled .mp-g2-period-capacity { background: #e5e7e8; color: #a2a9af; }
    .mp-g2-period.disabled.insufficient .mp-g2-period-capacity { background: #fff0dc; color: #ad6c25; }
    .mp-g2-slot-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 11px; }
    .mp-g2-slot {
      height: 43px;
      border: 1px solid #dfe5e8;
      border-radius: 9px;
      background: #fafbfc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
    }
    .mp-g2-slot.active { border-color: #67bf92; background: #67bf92; color: #fff; }
    .mp-g2-capacity-warning {
      margin-top: 10px;
      padding: 8px;
      border-radius: 9px;
      background: #fff7e7;
      color: #946224;
      font-size: 9px;
      text-align: center;
    }
    .mp-g2-total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      padding-top: 11px;
      border-top: 1px solid #edf0f2;
      font-size: 12px;
    }
    .mp-g2-total strong { color: #e45454; font-size: 19px; }
    .mp-g2-sheet-mask {
      position: absolute;
      inset: 0;
      z-index: 70;
      background: rgba(13,20,27,.5);
      display: flex;
      align-items: flex-end;
    }
    .mp-g2-sheet {
      width: 100%;
      padding: 18px 16px 24px;
      border-radius: 20px 20px 0 0;
      background: #fff;
    }
    .mp-g2-sheet-title { text-align: center; font-size: 17px; font-weight: 800; }
    .mp-g2-form-label { margin-top: 14px; color: #596571; font-size: 11px; }
    .mp-g2-form-input {
      width: 100%;
      height: 42px;
      margin-top: 7px;
      padding: 0 12px;
      border: 1px solid #dfe5e8;
      border-radius: 11px;
      outline: none;
      font-size: 13px;
    }
    .mp-g2-species { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 8px; }
    .mp-g2-species-btn {
      height: 38px;
      border: 1px solid #dfe5e8;
      border-radius: 11px;
      background: #fff;
      color: #66717c;
      font-size: 12px;
    }
    .mp-g2-species-btn.active { border-color: #329e71; background: #ebf8f1; color: #247c58; }
    .mp-g2-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
    .mp-g2-sheet-btn { height: 42px; border-radius: 21px; border: 1px solid #dfe4e7; background: #fff; color: #59646f; font-size: 13px; }
    .mp-g2-sheet-btn.primary { border-color: #2f956b; background: #2f956b; color: #fff; }
    .mp-g2-success {
      min-height: 620px;
      padding: 90px 24px;
      background: #fff;
      text-align: center;
    }
    .mp-g2-success-icon {
      width: 72px;
      height: 72px;
      margin: 0 auto;
      border-radius: 50%;
      background: #e7f6ed;
      color: #2e986b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 37px;
    }
    .mp-g2-success-title { margin-top: 18px; font-size: 22px; font-weight: 800; }
    .mp-g2-success-desc { margin-top: 8px; color: #7e8994; font-size: 12px; line-height: 1.6; }
    .mp-g2-success-btn { width: 180px; height: 44px; margin-top: 26px; border-radius: 22px; background: #2e956b; color: #fff; font-size: 14px; font-weight: 750; }

    /* ===== 商品搜索结果页（截图复刻） ===== */
    .mp-home-commerce-search input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: #53606d;
      font: inherit;
    }
    .mp-home-commerce-search input::placeholder { color: #9aa3ad; }
    .mp-home-commerce-search input::-webkit-search-cancel-button { display: none; }
    .mp-home-commerce-search > span { display: none; }

    .mp-product-search-page {
      min-height: 100%;
      background: #fff;
      color: #0b1f4a;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    .mp-ps-head {
      position: relative;
      overflow: hidden;
      padding: 0 10px 10px;
      background: linear-gradient(115deg, #3958a6 0%, #2f4a94 100%);
      color: #fff;
    }
    .mp-ps-head::before,
    .mp-ps-head::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,.035);
      pointer-events: none;
    }
    .mp-ps-head::before {
      width: 150px;
      height: 150px;
      left: -76px;
      top: -103px;
      box-shadow: 330px -38px 0 rgba(255,255,255,.025);
    }
    .mp-ps-head::after {
      width: 90px;
      height: 140px;
      right: -46px;
      top: -28px;
      transform: rotate(22deg);
    }
    .mp-ps-nav {
      position: relative;
      z-index: 1;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mp-ps-back {
      position: absolute;
      left: 0;
      top: 7px;
      width: 32px;
      height: 32px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mp-ps-back svg {
      width: 26px;
      height: 26px;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
    }
    .mp-ps-shop-name {
      width: 206px;
      padding-right: 18px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
      font-size: 16.5px;
      font-weight: 500;
      line-height: 1;
    }
    .mp-ps-capsule {
      position: absolute;
      right: 0;
      top: 7px;
      width: 103px;
      height: 30px;
      padding: 0 10px;
      border-radius: 17px;
      background: rgba(232,237,251,.72);
      color: #0e1320;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    }
    .mp-ps-capsule .dots {
      width: 28px;
      margin-top: -5px;
      font-size: 20px;
      letter-spacing: -2px;
      font-weight: 800;
      line-height: 1;
    }
    .mp-ps-capsule > i {
      width: 1px;
      height: 20px;
      background: rgba(28,38,64,.15);
    }
    .mp-ps-capsule .minus {
      margin-top: -4px;
      font-size: 25px;
      font-weight: 800;
      line-height: 1;
    }
    .mp-ps-capsule .target {
      width: 18px;
      height: 18px;
      border: 3px solid #111827;
      border-radius: 50%;
      position: relative;
    }
    .mp-ps-capsule .target::after {
      content: '';
      position: absolute;
      left: 4px;
      top: 4px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #111827;
    }
    .mp-ps-search {
      position: relative;
      z-index: 1;
      height: 32px;
      padding: 0 10px;
      border-radius: 18px;
      background: #fff;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .mp-ps-search svg {
      flex: 0 0 auto;
      width: 17px;
      height: 17px;
      color: #c9ccd2;
    }
    .mp-ps-search input {
      flex: 1;
      min-width: 0;
      height: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: #50545e;
      font-size: 13px;
    }
    .mp-ps-search input::-webkit-search-cancel-button { display: none; }
    .mp-ps-search input::placeholder { color: #b5bac2; }

    .mp-ps-sortbar {
      position: relative;
      z-index: 2;
      height: 45px;
      border-bottom: 1px solid #f1f2f5;
      background: #fff;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .mp-ps-sortbar button {
      position: relative;
      color: #3f4550;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 14px;
    }
    .mp-ps-sortbar button.active { color: #152653; }
    .mp-ps-sortbar button:first-child.active::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 6px;
      width: 18px;
      height: 7px;
      border-bottom: 2px solid #4b806a;
      border-radius: 50%;
      transform: translateX(-50%);
    }
    .mp-ps-sortbar button:last-child svg {
      width: 20px;
      height: 20px;
      color: #747981;
    }
    .mp-ps-price-arrows {
      width: 8px;
      height: 17px;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
    }
    .mp-ps-price-arrows i {
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
    }
    .mp-ps-price-arrows i:first-child { border-bottom: 5px solid #1e315f; }
    .mp-ps-price-arrows i:last-child { border-top: 5px solid #1e315f; }
    .mp-ps-price-arrows.asc i:last-child,
    .mp-ps-price-arrows.desc i:first-child { opacity: .25; }

    .mp-ps-filter-panel {
      padding: 10px 14px 12px;
      border-bottom: 1px solid #edf0f4;
      background: #fff;
      display: flex;
      gap: 9px;
      box-shadow: 0 6px 16px rgba(29,43,72,.05);
    }
    .mp-ps-filter-panel button {
      min-width: 68px;
      height: 30px;
      padding: 0 13px;
      border-radius: 15px;
      background: #f2f3f6;
      color: #707681;
      font-size: 12px;
    }
    .mp-ps-filter-panel button.active {
      background: #e8f5ee;
      color: #2f8e64;
      font-weight: 650;
    }

    .mp-ps-results {
      padding: 10px 12px 28px;
      background: #fff;
    }
    .mp-ps-product {
      min-height: 112px;
      padding: 10px 0 12px;
      display: grid;
      grid-template-columns: 90px minmax(0, 1fr);
      gap: 11px;
    }
    .mp-ps-thumb {
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mp-ps-product-main {
      min-width: 0;
      min-height: 88px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .mp-ps-product-name {
      width: 100%;
      color: #0b1f4a;
      font-size: 12.5px;
      letter-spacing: -.05px;
      line-height: 1.45;
      font-weight: 430;
      word-break: break-all;
    }
    .mp-ps-source {
      display: inline-flex;
      align-items: center;
      height: 17px;
      margin-top: 5px;
      padding: 0 5px;
      border-radius: 4px;
      background: #fa8f78;
      color: #fff;
      font-size: 11px;
      line-height: 1;
    }
    .mp-ps-source.self { background: #56b879; }
    .mp-ps-price-row {
      margin-top: 7px;
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
      line-height: 1;
    }
    .mp-ps-price {
      color: #f05555;
      font-size: 17px;
      font-weight: 650;
      letter-spacing: -.4px;
    }
    .mp-ps-price i {
      margin-right: 2px;
      font-style: normal;
      font-size: 12px;
      letter-spacing: 0;
    }
    .mp-ps-old-price {
      color: #777d86;
      font-size: 12px;
      text-decoration: line-through;
      text-decoration-thickness: 1px;
    }
    .mp-ps-sales {
      color: #8b929e;
      font-size: 11px;
    }
    .mp-ps-member {
      min-height: 20px;
      margin-top: 5px;
      display: flex;
      align-items: center;
      gap: 3px;
      color: #f39a20;
      font-size: 12.5px;
    }
    .mp-ps-member span {
      color: inherit;
      font-size: inherit;
      display: inline-flex;
      align-items: center;
      height: auto;
      padding: 0;
      background: transparent;
    }
    .mp-ps-member b {
      color: inherit;
      font-size: 13.5px;
      font-weight: 500;
    }

    .mp-ps-art {
      position: relative;
      width: 88px;
      height: 88px;
      overflow: hidden;
      border-radius: 8px;
      color: #30364a;
    }
    .mp-ps-art.wipes {
      background: #fbfbfb;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mp-ps-wipes-pack {
      position: relative;
      width: 82px;
      height: 48px;
      padding-top: 13px;
      border: 1px solid #ececf2;
      background: linear-gradient(90deg, #fff, #f0edf8 48%, #fff);
      box-shadow: 0 6px 7px rgba(79,83,101,.1);
      text-align: center;
    }
    .mp-ps-wipes-pack::before,
    .mp-ps-wipes-pack::after {
      content: '';
      position: absolute;
      top: 8px;
      width: 19px;
      height: 26px;
      border: 1px solid rgba(153,144,186,.18);
      border-radius: 50%;
    }
    .mp-ps-wipes-pack::before { left: 5px; transform: rotate(28deg); }
    .mp-ps-wipes-pack::after { right: 5px; transform: rotate(-28deg); }
    .mp-ps-wipes-pack .flower {
      position: absolute;
      left: 8px;
      top: 3px;
      color: #ebd66e;
      font-size: 9px;
    }
    .mp-ps-wipes-pack b {
      position: relative;
      z-index: 1;
      display: block;
      color: #77759a;
      font-size: 9px;
      letter-spacing: 1px;
    }
    .mp-ps-wipes-pack small {
      position: relative;
      z-index: 1;
      display: block;
      margin-top: 1px;
      color: #9997ad;
      font-size: 5px;
    }
    .mp-ps-wipes-pack i {
      position: absolute;
      right: 3px;
      bottom: 2px;
      color: #aaa9b8;
      font-size: 5px;
      font-style: normal;
    }

    .mp-ps-art.bug { background: transparent; }
    .mp-ps-bug-card {
      position: absolute;
      left: 22px;
      top: 5px;
      width: 48px;
      height: 78px;
      border: 1px solid #bc7960;
      border-radius: 3px;
      background: linear-gradient(145deg, #f7c34e, #e6782d 55%, #f6edda 56%);
      box-shadow: 0 4px 6px rgba(49,45,40,.15);
      transform: rotate(-1deg);
    }
    .mp-ps-bug-card .brand {
      position: absolute;
      left: 4px;
      top: 3px;
      color: #466170;
      font-size: 8px;
      font-weight: 800;
    }
    .mp-ps-bug-card small {
      position: absolute;
      right: 2px;
      top: 3px;
      color: #fff8a4;
      font-size: 6px;
      transform: rotate(12deg);
    }
    .mp-ps-bug-shape {
      position: absolute;
      left: 17px;
      top: 21px;
      width: 18px;
      height: 34px;
      border-radius: 60% 40% 55% 45%;
      background: #232322;
      transform: rotate(45deg);
      box-shadow: 0 0 0 2px #8f3f25;
    }
    .mp-ps-bug-shape::before,
    .mp-ps-bug-shape::after {
      content: '';
      position: absolute;
      width: 19px;
      height: 2px;
      background: #222;
      transform-origin: right center;
    }
    .mp-ps-bug-shape::before { left: -17px; top: 9px; transform: rotate(24deg); }
    .mp-ps-bug-shape::after { left: -16px; top: 22px; transform: rotate(-26deg); }
    .mp-ps-bug-shape i {
      position: absolute;
      left: 6px;
      top: -9px;
      width: 7px;
      height: 10px;
      border-radius: 50%;
      background: #151515;
    }

    .mp-ps-art.season {
      padding: 7px 5px 5px;
      background: #f0f1ef;
    }
    .mp-ps-art.season > strong {
      display: block;
      color: #55685e;
      text-align: center;
      font-size: 7px;
      font-weight: 600;
    }
    .mp-ps-season-grid {
      height: 65px;
      margin-top: 4px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
    }
    .mp-ps-season-grid i {
      padding-top: 22px;
      border-radius: 2px 2px 8px 8px;
      background: linear-gradient(#eef7f0, #bdcfb8);
      color: #6b7a6a;
      text-align: center;
      font-size: 6px;
      font-style: normal;
      box-shadow: 0 2px 3px rgba(79,91,82,.1);
    }
    .mp-ps-season-grid i:nth-child(2) { background: linear-gradient(#f8f7e3, #d8c99b); }
    .mp-ps-season-grid i:nth-child(3) { background: linear-gradient(#fff4df, #d8b57f); }
    .mp-ps-season-grid i:nth-child(4) { background: linear-gradient(#eef1ed, #9da9a5); }

    .mp-ps-art.cassava {
      background: linear-gradient(145deg, #a99bd3, #dfd7f0);
    }
    .mp-ps-art.cassava > strong,
    .mp-ps-art.towel > strong,
    .mp-ps-art.playground > strong {
      position: absolute;
      left: 6px;
      right: 6px;
      top: 4px;
      color: #fff;
      text-align: center;
      font-size: 7px;
      font-weight: 700;
      text-shadow: 0 1px 1px rgba(39,42,75,.18);
    }
    .mp-ps-cassava-bag {
      position: absolute;
      left: 33px;
      top: 22px;
      width: 46px;
      height: 51px;
      padding-top: 16px;
      border-radius: 5px 5px 12px 12px;
      background: linear-gradient(#eef7d8, #89bc70);
      color: #517d51;
      text-align: center;
      box-shadow: 0 4px 6px rgba(56,52,87,.18);
    }
    .mp-ps-cassava-bag span { font-size: 7px; font-weight: 800; }
    .mp-ps-cassava-bag i {
      position: absolute;
      right: 3px;
      top: 4px;
      width: 15px;
      height: 15px;
      border: 1px solid #333;
      border-radius: 50%;
      background: #f9f8e9;
      color: #171717;
      font-size: 6px;
      font-style: normal;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mp-ps-cassava-cat {
      position: absolute;
      left: 2px;
      bottom: -3px;
      font-size: 36px;
      filter: saturate(.7);
    }

    .mp-ps-art.towel {
      background: linear-gradient(145deg, #a694ec, #d8d1fa);
    }
    .mp-ps-towel-pack {
      position: absolute;
      left: 10px;
      top: 29px;
      width: 58px;
      height: 40px;
      padding: 8px 0 0 8px;
      border-radius: 3px;
      background: linear-gradient(135deg, #f8f8ff, #b7b2ee);
      color: #9892de;
      box-shadow: 0 4px 7px rgba(57,52,117,.18);
    }
    .mp-ps-towel-pack b { display: block; font-size: 9px; }
    .mp-ps-towel-pack small { display: block; margin-top: 2px; font-size: 5px; }
    .mp-ps-towel-dog {
      position: absolute;
      right: -5px;
      bottom: -6px;
      font-size: 39px;
      filter: grayscale(.75) brightness(1.2);
    }

    .mp-ps-art.playground {
      background: linear-gradient(135deg, #88a8c8, #d9e9ed);
    }
    .mp-ps-art.playground > strong { color: #283847; font-size: 6px; text-shadow: none; }
    .mp-ps-play-box {
      position: absolute;
      left: 12px;
      top: 23px;
      width: 68px;
      height: 50px;
      padding: 8px 4px;
      border-radius: 5px;
      background: linear-gradient(120deg, #f9fbfb, #8fd2d2);
      color: #314b57;
      text-align: center;
      box-shadow: 0 5px 8px rgba(46,66,80,.16);
    }
    .mp-ps-play-box b { display: block; font-size: 8px; }
    .mp-ps-play-box small { display: block; margin-top: 5px; font-size: 5px; }

    .mp-ps-empty {
      min-height: 360px;
      color: #a0a7b2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .mp-ps-empty span { font-size: 44px; font-weight: 300; }
    .mp-ps-empty b { margin-top: 9px; color: #6f7783; font-size: 14px; font-weight: 600; }
    .mp-ps-empty small { margin-top: 5px; font-size: 11px; }

    /* Profile and pet pages */
    .mp-profile-center { padding-bottom: 76px; }
    .mp-profile-center, .mp-pet-list-page, .mp-pet-form-page { min-height: 100%; color: #202825; background: #f3f5f4; }
    .mp-profile-hero { min-height: 154px; padding: 0 16px 54px; color: #fff; background: #4caf82; }
    .mp-profile-home-nav, .mp-profile-page-nav { height: 46px; display: flex; align-items: center; position: relative; }
    .mp-profile-home-nav { justify-content: space-between; }
    .mp-profile-home-title, .mp-profile-page-title { font-size: 16px; font-weight: 700; }
    .mp-profile-page-nav { padding: 0 14px; color: #fff; background: #4caf82; justify-content: center; }
    .mp-profile-back { position: absolute; left: 10px; top: 7px; width: 34px; height: 34px; color: #fff; display: flex; align-items: center; justify-content: center; }
    .mp-profile-back svg { width: 22px; height: 22px; }
    .mp-profile-capsule { width: 84px; height: 30px; padding: 0 8px; border: 1px solid rgba(255,255,255,.52); border-radius: 16px; color: #fff; display: flex; align-items: center; justify-content: space-between; }
    .mp-profile-page-nav .mp-profile-capsule { position: absolute; right: 10px; top: 8px; }
    .mp-profile-capsule .dots { font-size: 16px; line-height: 1; transform: translateY(-3px); }
    .mp-profile-capsule .minus { font-size: 16px; line-height: 1; }
    .mp-profile-capsule i { width: 1px; height: 16px; background: rgba(255,255,255,.35); }
    .mp-profile-capsule .target { width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #4caf82; }
    .mp-profile-user { min-height: 62px; display: flex; align-items: center; }
    .mp-profile-user-avatar { width: 50px; height: 50px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; color: #4f493f; background: #f2e1bf; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 800; flex-shrink: 0; }
    .mp-profile-user-copy { min-width: 0; margin-left: 11px; flex: 1; }
    .mp-profile-user-name { overflow: hidden; font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
    .mp-profile-user-welcome { margin-top: 4px; color: rgba(255,255,255,.82); font-size: 10px; }
    .mp-profile-member-code { margin-left: 8px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; flex-shrink: 0; }
    .mp-profile-member-code svg { width: 22px; height: 22px; }
    .mp-profile-wallet { position: relative; z-index: 1; margin: -44px 12px 0; padding: 13px 15px 14px; border-radius: 8px; color: #f8f2e7; background: #36433e; box-shadow: 0 5px 14px rgba(42,55,50,.16); }
    .mp-profile-wallet-head { padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.13); display: flex; align-items: baseline; gap: 7px; }
    .mp-profile-wallet-head span { font-size: 13px; font-weight: 700; }
    .mp-profile-wallet-head small { color: #bfc9c4; font-size: 8px; }
    .mp-profile-wallet-grid { padding-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); }
    .mp-profile-wallet-grid div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .mp-profile-wallet-grid strong { font-size: 14px; font-weight: 700; }
    .mp-profile-wallet-grid span { color: #cdd5d1; font-size: 9px; }
    .mp-profile-quick-stats { min-height: 52px; margin-top: 9px; padding: 0 28px; background: #fff; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; }
    .mp-profile-quick-stats div { display: flex; align-items: baseline; justify-content: center; gap: 9px; }
    .mp-profile-quick-stats span { color: #66706c; font-size: 11px; }
    .mp-profile-quick-stats strong { color: #27312d; font-size: 15px; }
    .mp-profile-quick-stats i { width: 1px; height: 22px; background: #ecefed; }
    .mp-profile-band { margin-top: 9px; padding: 14px 15px; background: #fff; }
    .mp-profile-band-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .mp-profile-band-head h2 { font-size: 14px; line-height: 1.2; font-weight: 700; }
    .mp-profile-band-head p { margin-top: 4px; color: #98a09d; font-size: 9px; }
    .mp-profile-band-head button { color: #7a8480; font-size: 10px; white-space: nowrap; }
    .mp-profile-band-head button span { margin-left: 2px; font-size: 15px; }
    .mp-profile-band-head.compact { align-items: center; }
    .mp-profile-order-tabs { height: 31px; margin-top: 10px; border-bottom: 1px solid #eef1ef; display: flex; gap: 25px; }
    .mp-profile-order-tab { position: relative; height: 31px; color: #818a86; font-size: 11px; }
    .mp-profile-order-tab.active { color: #318d65; font-weight: 700; }
    .mp-profile-order-tab.active::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 24px; height: 2px; border-radius: 1px; background: #4caf82; transform: translateX(-50%); }
    .mp-profile-order-grid { min-height: 66px; padding-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; }
    .mp-profile-order-item { color: #69736f; display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .mp-profile-order-item > span { width: 29px; height: 29px; border-radius: 50%; color: #318d65; background: #edf7f2; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
    .mp-profile-order-item small { font-size: 9px; }
    .mp-profile-pet-overview { width: 100%; min-height: 62px; margin-top: 12px; padding: 9px 11px; border: 1px solid #dcebe4; border-radius: 8px; background: #f3faf6; display: flex; align-items: center; text-align: left; }
    .mp-profile-pet-stack { width: 68px; display: flex; align-items: center; flex-shrink: 0; }
    .mp-profile-pet-stack > span { width: 34px; height: 34px; margin-right: -11px; border: 2px solid #fff; border-radius: 50%; background: #d9eee3; display: flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: 0 1px 4px rgba(42,78,61,.12); }
    .mp-profile-pet-overview-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 4px; }
    .mp-profile-pet-overview-copy strong { font-size: 12px; font-weight: 700; }
    .mp-profile-pet-overview-copy small { overflow: hidden; color: #7f8b85; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
    .mp-profile-pet-overview > svg { width: 17px; height: 17px; margin-left: 6px; color: #8d9893; flex-shrink: 0; }
    .mp-profile-services { padding-bottom: 17px; }
    .mp-profile-service-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 17px; }
    .mp-profile-service-grid > div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .mp-profile-service-grid span { width: 28px; height: 28px; border-radius: 7px; color: #397f62; background: #eff6f2; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
    .mp-profile-service-grid small { color: #68726e; font-size: 9px; }

    /* Pet list */
    .mp-pet-list-page { padding-bottom: 86px; }
    .mp-pet-list-content { padding: 13px 12px 18px; }
    .mp-pet-list-summary { padding: 7px 3px 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
    .mp-pet-list-summary > div { display: flex; align-items: baseline; gap: 5px; }
    .mp-pet-list-summary strong { color: #2e8e65; font-size: 23px; line-height: 1; }
    .mp-pet-list-summary span { color: #515b57; font-size: 11px; }
    .mp-pet-list-summary p { max-width: 205px; color: #929b97; font-size: 9px; text-align: right; }
    .mp-pet-list { display: flex; flex-direction: column; gap: 10px; }
    .mp-pet-list-item { min-height: 108px; padding: 14px 12px; border: 1px solid #e8ecea; border-radius: 8px; background: #fff; display: flex; align-items: center; position: relative; box-shadow: 0 2px 8px rgba(39,63,52,.04); }
    .mp-profile-pet-avatar { border-radius: 50%; background: #e8f3ed; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mp-profile-pet-avatar.cat { background: #edf2e8; }
    .mp-profile-pet-avatar.dog { background: #e7f2ee; }
    .mp-profile-pet-avatar.other { background: #f2eee7; }
    .mp-profile-pet-avatar.large { width: 68px; height: 68px; }
    .mp-profile-pet-avatar.large span { font-size: 37px; }
    .mp-pet-list-copy { min-width: 0; margin-left: 13px; padding-right: 28px; flex: 1; }
    .mp-pet-list-copy h2 { overflow: hidden; font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
    .mp-pet-list-copy p { overflow: hidden; margin-top: 7px; color: #747e79; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
    .mp-pet-list-meta { margin-top: 8px; display: flex; gap: 5px; }
    .mp-pet-list-meta span { padding: 3px 7px; border-radius: 4px; color: #53836e; background: #eef6f2; font-size: 9px; }
    .mp-pet-edit { position: absolute; right: 11px; top: 11px; width: 29px; height: 29px; border-radius: 50%; color: #6d7973; background: #f3f5f4; display: flex; align-items: center; justify-content: center; }
    .mp-pet-edit svg { width: 15px; height: 15px; }
    .mp-pet-empty { min-height: 310px; color: #8c9691; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .mp-pet-empty > span { font-size: 38px; }
    .mp-pet-empty h2 { margin-top: 10px; color: #3f4945; font-size: 15px; }
    .mp-pet-empty p { margin-top: 5px; font-size: 10px; }
    .mp-profile-bottom-action { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 12; height: 68px; padding: 11px 15px; border-top: 1px solid #e8ecea; background: rgba(255,255,255,.98); }
    .mp-profile-primary-action { width: 100%; height: 45px; border-radius: 7px; color: #fff; background: #419f75; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 700; box-shadow: 0 4px 10px rgba(47,142,98,.18); }
    .mp-profile-primary-action svg { width: 18px; height: 18px; }

    /* Pet create and edit */
    .mp-pet-form-page { padding-bottom: 88px; }
    .mp-pet-form-content { padding-bottom: 15px; }
    .mp-pet-species-panel, .mp-pet-form-section { margin-top: 9px; padding: 14px 15px; background: #fff; }
    .mp-pet-species-panel { margin-top: 0; padding-top: 13px; }
    .mp-pet-form-kicker { margin-bottom: 11px; color: #3f4945; font-size: 12px; font-weight: 700; }
    .mp-pet-species-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .mp-pet-species-option { height: 67px; border: 1px solid #e4e9e6; border-radius: 7px; color: #68726d; background: #fafbfa; display: grid; grid-template-columns: 29px 1fr; grid-template-rows: 1fr 1fr; align-items: center; text-align: left; }
    .mp-pet-species-option > span { grid-row: 1 / 3; padding-left: 7px; font-size: 23px; }
    .mp-pet-species-option strong { align-self: end; font-size: 12px; font-weight: 700; }
    .mp-pet-species-option small { align-self: start; margin-top: 1px; color: #a0a7a4; font-size: 7px; }
    .mp-pet-species-option.active { border-color: #55aa80; color: #287f59; background: #eff8f3; box-shadow: inset 0 0 0 1px #55aa80; }
    .mp-pet-form { display: block; }
    .mp-pet-form-section { padding-top: 0; padding-bottom: 0; }
    .mp-pet-field { min-height: 53px; border-bottom: 1px solid #edf0ee; display: grid; grid-template-columns: 72px minmax(0, 1fr) 18px; align-items: center; position: relative; }
    .mp-pet-field:last-child { border-bottom: 0; }
    .mp-pet-field > label { color: #3d4642; font-size: 12px; font-weight: 600; }
    .mp-pet-field input, .mp-pet-field select { min-width: 0; width: 100%; height: 52px; border: 0; outline: 0; color: #303935; background: transparent; font: inherit; font-size: 12px; text-align: right; }
    .mp-pet-field select { padding-right: 4px; appearance: none; color: #626c67; }
    .mp-pet-field > svg { width: 16px; height: 16px; color: #a2aaa6; }
    .mp-pet-field input::placeholder { color: #b1b7b4; }
    .mp-pet-field.avatar-field { min-height: 69px; grid-template-columns: 72px 1fr; }
    .mp-pet-avatar-options { display: flex; justify-content: flex-end; gap: 8px; }
    .mp-pet-avatar-option { width: 38px; height: 38px; border: 1px solid #e3e8e5; border-radius: 50%; background: #f5f7f6; font-size: 21px; }
    .mp-pet-avatar-option.active { border-color: #4ca87a; background: #eaf6f0; box-shadow: 0 0 0 2px #d8eee3; }
    .mp-pet-weight-input { display: flex; align-items: center; justify-content: flex-end; }
    .mp-pet-weight-input input { flex: 1; }
    .mp-pet-weight-input span { margin-left: 5px; color: #747d79; font-size: 11px; }
    .mp-pet-field.choices { min-height: 58px; grid-template-columns: 72px 1fr; }
    .mp-pet-choice-group { display: flex; justify-content: flex-end; gap: 6px; }
    .mp-pet-choice-group button { min-width: 49px; height: 29px; padding: 0 9px; border: 1px solid #e0e6e3; border-radius: 5px; color: #707a75; background: #fafbfa; font-size: 10px; }
    .mp-pet-choice-group button.active { border-color: #55a97e; color: #2d855f; background: #edf7f2; font-weight: 700; }

    /* Service detail poster */
    .mp-g2-service-bottom {
      margin-top: 7px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 6px;
      flex-wrap: wrap;
    }
    .mp-g2-service-bottom .mp-g2-service-price { margin-top: 0; }
    .mp-g2-service-price > span {
      margin-left: 2px;
      color: #8a949f;
      font-size: 8px;
      font-weight: 500;
      white-space: nowrap;
    }
    .mp-g2-service-detail-btn {
      height: 25px;
      padding: 0 10px;
      border: 1px solid #30966b;
      border-radius: 13px;
      color: #267c59;
      background: #fff;
      font-size: 9px;
      font-weight: 750;
      white-space: nowrap;
    }
    .mp-g2-service-item.selected .mp-g2-service-detail-btn { background: #f8fffb; }
    .mp-g2-poster-mask {
      position: absolute;
      top: 44px;
      right: 0;
      bottom: 20px;
      left: 0;
      z-index: 90;
      padding: 15px 14px;
      background: rgba(17,28,24,.68);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: mpG2PosterFade .18s ease-out;
    }
    .mp-g2-service-poster {
      width: 100%;
      max-height: 100%;
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 8px;
      overflow-y: auto;
      color: #26342e;
      background: #fbfaf5;
      box-shadow: 0 18px 40px rgba(7,20,15,.32);
      position: relative;
      animation: mpG2PosterRise .22s ease-out;
    }
    .mp-g2-service-poster::-webkit-scrollbar { width: 3px; }
    .mp-g2-service-poster::-webkit-scrollbar-thumb { background: #acc4b8; }
    .mp-g2-poster-close {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      width: 29px;
      height: 29px;
      border: 1px solid rgba(255,255,255,.36);
      border-radius: 50%;
      color: #fff;
      background: rgba(9,44,34,.32);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      line-height: 1;
    }
    .mp-g2-poster-hero {
      min-height: 164px;
      padding: 16px 76px 17px 18px;
      color: #fff;
      background: #204e40;
      border-bottom: 5px solid #e8b75d;
      position: relative;
      overflow: hidden;
    }
    .mp-g2-poster-hero::after {
      content: '';
      position: absolute;
      right: -24px;
      bottom: -31px;
      width: 112px;
      height: 112px;
      border: 16px solid rgba(255,255,255,.06);
      border-radius: 50%;
    }
    .mp-g2-poster-brand { display: flex; align-items: baseline; gap: 7px; }
    .mp-g2-poster-brand span { font-size: 12px; font-weight: 800; }
    .mp-g2-poster-brand small { color: #b9d6ca; font-size: 7px; }
    .mp-g2-poster-icon {
      position: absolute;
      top: 49px;
      right: 18px;
      z-index: 1;
      width: 50px;
      height: 50px;
      border: 1px solid rgba(255,255,255,.42);
      border-radius: 50%;
      background: #f5e5bd;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 27px;
      box-shadow: 0 7px 18px rgba(8,31,23,.2);
    }
    .mp-g2-poster-kicker {
      margin-top: 22px;
      color: #e8bf70;
      font-size: 8px;
      font-weight: 750;
    }
    .mp-g2-poster-hero h2 { margin-top: 4px; font-size: 21px; line-height: 1.2; }
    .mp-g2-poster-hero p { margin-top: 5px; color: #d3e4dd; font-size: 9px; }
    .mp-g2-poster-meta { margin-top: 11px; display: flex; gap: 5px; flex-wrap: wrap; }
    .mp-g2-poster-meta span {
      padding: 3px 7px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 9px;
      color: #e6f0ec;
      background: rgba(255,255,255,.08);
      font-size: 8px;
    }
    .mp-g2-poster-body { padding: 14px 17px 13px; }
    .mp-g2-poster-section-title { display: flex; align-items: center; justify-content: space-between; }
    .mp-g2-poster-section-title strong { font-size: 13px; }
    .mp-g2-poster-section-title span { color: #909a95; font-size: 8px; }
    .mp-g2-poster-group { margin-top: 12px; }
    .mp-g2-poster-group + .mp-g2-poster-group { padding-top: 11px; border-top: 1px dashed #d9dfdb; }
    .mp-g2-poster-group-head { display: flex; align-items: center; justify-content: space-between; }
    .mp-g2-poster-group-head strong { color: #31765c; font-size: 11px; }
    .mp-g2-poster-group-head span { color: #a87830; font-size: 8px; }
    .mp-g2-poster-steps { margin-top: 6px; }
    .mp-g2-poster-step {
      min-height: 31px;
      display: grid;
      grid-template-columns: 26px minmax(0,1fr) auto;
      align-items: center;
      gap: 7px;
      position: relative;
    }
    .mp-g2-poster-step:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 10px;
      top: 24px;
      width: 1px;
      height: 14px;
      background: #c7d9d0;
    }
    .mp-g2-poster-step-no {
      width: 21px;
      height: 21px;
      border-radius: 50%;
      color: #fff;
      background: #4d9c78;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 7px;
      font-weight: 750;
    }
    .mp-g2-poster-step-name { font-size: 10px; }
    .mp-g2-poster-step-price { color: #cf6554; font-size: 10px; font-weight: 750; }
    .mp-g2-poster-total {
      margin-top: 13px;
      padding: 10px 11px;
      border-left: 3px solid #e5b45b;
      background: #f5f0e4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .mp-g2-poster-total div { min-width: 0; display: flex; flex-direction: column; }
    .mp-g2-poster-total span { font-size: 10px; font-weight: 750; }
    .mp-g2-poster-total small { margin-top: 2px; color: #8b8b80; font-size: 7px; }
    .mp-g2-poster-total strong { color: #c45b4d; font-size: 17px; white-space: nowrap; }
    .mp-g2-poster-assurance { margin-top: 11px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
    .mp-g2-poster-assurance span {
      padding: 6px 2px;
      border: 1px solid #dce8e1;
      color: #4f7463;
      background: #f5f9f6;
      text-align: center;
      font-size: 8px;
    }
    .mp-g2-poster-footer {
      min-height: 58px;
      padding: 9px 14px;
      border-top: 1px solid #e3e6e2;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      position: sticky;
      bottom: 0;
    }
    .mp-g2-poster-footer > div { display: flex; flex-direction: column; gap: 2px; }
    .mp-g2-poster-footer strong { color: #cf5b4c; font-size: 13px; }
    .mp-g2-poster-footer span { color: #89928d; font-size: 8px; }
    .mp-g2-poster-footer button { width: 86px; height: 35px; border-radius: 18px; color: #fff; background: #318c65; font-size: 11px; font-weight: 750; }
    @keyframes mpG2PosterFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes mpG2PosterRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }