/* ===== 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;
    }


    /* ===== 移动端预览样式 ===== */
    .mobile-status-bar { background: #f5f5f5; }
    .mobile-content { background: #f5f5f5; position: relative; display: flex; flex-direction: column; overflow: hidden; }
    .mobile-scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; background: #f5f5f5; }
    .mobile-scroll-area::-webkit-scrollbar { display: none; }

    /* 移动端首页 */
    .mobile-home { background: #f5f5f5; min-height: 100%; }
    .mobile-banner {
      background: linear-gradient(135deg, #4caf82 0%, #36a06c 100%);
      padding: 16px 20px 18px;
      border-radius: 0 0 20px 20px;
    }
    .mobile-banner-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .mobile-banner-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff;
    }
    .mobile-banner-logo-circle {
      width: 32px;
      height: 32px;
      background: rgba(255,255,255,.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-banner-logo-text { font-size: 15px; font-weight: 600; }
    .mobile-banner-msg {
      width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .mobile-banner-msg .mobile-badge-dot {
      position: absolute;
      top: 2px; right: 2px;
      width: 8px; height: 8px;
      background: #ff4d4f;
      border-radius: 50%;
      border: 1.5px solid #4caf82;
    }
    .mobile-banner-card {
      background: rgba(255,255,255,.18);
      border-radius: 12px;
      padding: 14px 16px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .mobile-banner-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
    .mobile-banner-card-desc { font-size: 11px; opacity: .85; }
    .mobile-banner-card-icon {
      width: 50px; height: 50px; flex-shrink: 0;
      background: rgba(255,255,255,.2);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
    }

    /* 快捷功能 */
    .mobile-quick {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      background: #fff;
      margin: 12px 12px 0;
      border-radius: 12px;
      padding: 18px 10px 14px;
    }
    .mobile-quick-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }
    .mobile-quick-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
    }
    .mobile-quick-icon.cashier { background: linear-gradient(135deg, #4caf82, #36a06c); }
    .mobile-quick-icon.service { background: linear-gradient(135deg, #5b8def, #4a7de0); }
    .mobile-quick-icon.scan { background: linear-gradient(135deg, #f0a030, #e89520); }
    .mobile-quick-icon.bill { background: linear-gradient(135deg, #e8707a, #d96070); }
    .mobile-quick-label { font-size: 12px; color: #333; font-weight: 500; position: relative; }
    .mobile-quick-badge {
      position: absolute;
      top: -6px; right: -18px;
      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;
    }

    /* 移动端 AI经营建议 */
    .mobile-ai-insight {
      margin: 12px 12px 0;
      border-radius: 14px;
      padding: 14px;
      background:
        radial-gradient(circle at 18% 0%, rgba(96, 201, 145, .14), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #fbfffd 100%);
      border: 1px solid rgba(76, 175, 130, .16);
      box-shadow: 0 4px 14px rgba(26, 83, 56, .05);
    }
    .mobile-ai-insight-head {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px;
    }
    .mobile-ai-insight-logo {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: linear-gradient(135deg, #45c58b, #2fac70);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 6px 14px rgba(47, 172, 112, .18);
      flex-shrink: 0;
    }
    .mobile-ai-insight-title { font-size: 15px; font-weight: 700; color: #1f2d25; }
    .mobile-ai-insight-sub { margin-top: 2px; font-size: 11px; color: #8a9490; line-height: 1.35; }
    .mobile-ai-insight-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mobile-ai-insight-item {
      position: relative;
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      background: #fff;
      border: 1px solid #edf1ee;
      border-radius: 12px;
      padding: 11px 11px 11px 12px;
      overflow: hidden;
    }
    .mobile-ai-insight-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: #4caf82;
    }
    .mobile-ai-insight-item.customer::before { background: #4f8df5; }
    .mobile-ai-insight-item.booking::before { background: #f0a33a; }
    .mobile-ai-insight-item.stock::before { background: #e8707a; }
    .mobile-ai-insight-dot {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: #eef9f3;
      color: #35a96b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      margin-top: 2px;
    }
    .mobile-ai-insight-item.customer .mobile-ai-insight-dot { background: #eef5ff; color: #3978dc; }
    .mobile-ai-insight-item.booking .mobile-ai-insight-dot { background: #fff7e8; color: #c97800; }
    .mobile-ai-insight-item.stock .mobile-ai-insight-dot { background: #fff0f1; color: #d96070; }
    .mobile-ai-insight-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .mobile-ai-insight-tag {
      display: inline-flex;
      align-items: center;
      height: 21px;
      padding: 0 8px;
      border-radius: 11px;
      background: #f0faf5;
      color: #2fac70;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .mobile-ai-insight-item.customer .mobile-ai-insight-tag { background: #eef5ff; color: #3978dc; }
    .mobile-ai-insight-item.booking .mobile-ai-insight-tag { background: #fff7e8; color: #c97800; }
    .mobile-ai-insight-item.stock .mobile-ai-insight-tag { background: #fff0f1; color: #d96070; }
    .mobile-ai-insight-range {
      font-size: 11px;
      color: #9aa3a0;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .mobile-ai-insight-main { font-size: 12px; line-height: 1.5; color: #626b67; }
    .mobile-ai-insight-main strong {
      color: #1f2d25;
      font-size: 17px;
      line-height: 1;
      margin: 0 2px;
    }
    .mobile-ai-insight-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .mobile-ai-insight-chip {
      display: inline-flex;
      align-items: center;
      height: 21px;
      padding: 0 7px;
      border-radius: 11px;
      background: #f7f8fa;
      color: #7c8490;
      font-size: 11px;
      white-space: nowrap;
    }
    .mobile-ai-insight-chip.good { background: #eef9f3; color: #35a96b; }
    .mobile-ai-insight-chip.warn { background: #fff5e6; color: #c97800; }
    .mobile-ai-insight-chip.danger { background: #fff0f1; color: #d96070; }

    /* 订单管理 */
    .mobile-section {
      margin: 12px 12px 0;
      background: #fff;
      border-radius: 12px;
      padding: 16px;
    }
    .mobile-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .mobile-section-title {
      font-size: 15px;
      font-weight: 600;
      color: #1a1a1a;
    }
    .mobile-section-more {
      font-size: 12px;
      color: #999;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .mobile-order-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .mobile-order-card {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 14px 12px;
      cursor: pointer;
      transition: background .15s;
    }
    .mobile-order-card:hover { background: #f0f1f3; }
    .mobile-order-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .mobile-order-card-name {
      font-size: 13px;
      color: #333;
      font-weight: 500;
    }
    .mobile-order-card-count {
      font-size: 18px;
      font-weight: 700;
      color: #333;
    }
    .mobile-order-card-tag {
      display: inline-block;
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 3px;
      font-weight: 500;
    }
    .mobile-order-card-tag.cloud { background: #e8f4fd; color: #1890ff; }
    .mobile-order-card-tag.local { background: #e6f9f0; color: #4caf82; }

    /* 常用管理 */
    .mobile-manage-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .mobile-manage-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
      cursor: pointer;
    }
    .mobile-manage-icon {
      width: 40px; height: 40px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .mobile-manage-icon.fund { background: #fff7e6; }
    .mobile-manage-icon.customer { background: #e6f7ff; }
    .mobile-manage-icon.dropship { background: #f0f5ff; }
    .mobile-manage-icon.mall { background: #f6ffed; }
    .mobile-manage-label { font-size: 12px; color: #555; }

    /* 移动端底部Tab栏 */
    .mobile-tab-bar {
      height: 55px;
      background: #fff;
      border-top: 1px solid #f0f0f0;
      display: flex;
      z-index: 10;
      flex-shrink: 0;
      padding-bottom: 4px;
    }
    .mobile-tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      font-size: 10px;
      color: #999;
      cursor: pointer;
      transition: color .15s;
    }
    .mobile-tab-item.active { color: #4caf82; }
    .mobile-tab-item svg { width: 22px; height: 22px; }

    /* 占位页面 */
    .mobile-placeholder-page {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: 400px; padding: 60px 20px;
    }

    /* 管理页（个人中心）- 网格布局 */
    .mobile-manage-page { background: #f5f5f5; min-height: 100%; }
    .mobile-manage-header {
      background: linear-gradient(135deg, #4caf82 0%, #36a06c 100%);
      padding: 30px 20px 24px;
      display: flex; align-items: center; gap: 14px;
    }
    .mobile-manage-avatar {
      width: 52px; height: 52px;
      background: rgba(255,255,255,.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .mobile-manage-userinfo { flex: 1; }
    .mobile-manage-name { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 3px; }
    .mobile-manage-shop { font-size: 13px; color: rgba(255,255,255,.8); }
    .mobile-manage-switch { cursor: pointer; padding: 4px; }

    /* 今日数据统计 */
    .mobile-manage-stats {
      display: flex; align-items: center; justify-content: space-around;
      background: #fff;
      margin: -12px 12px 10px;
      border-radius: 12px;
      padding: 14px 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
      position: relative; z-index: 2;
    }
    .mobile-manage-stat-item { text-align: center; }
    .mobile-manage-stat-num { display: block; font-size: 18px; font-weight: 700; color: #333; }
    .mobile-manage-stat-label { display: block; font-size: 11px; color: #999; margin-top: 3px; }

    /* 分组block */
    .mobile-manage-block {
      margin: 0 12px 10px;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
    }
    .mobile-manage-block-title {
      font-size: 14px; font-weight: 600; color: #333;
      padding: 14px 16px 8px;
    }

    /* 图标网格 - 4列 */
    .mobile-manage-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
    .mobile-manage-grid-item {
      display: flex; flex-direction: column; align-items: center;
      padding: 10px 4px 14px;
      cursor: pointer;
    }
    .mobile-manage-grid-item:active { background: #f9f9f9; }
    .mobile-manage-grid-icon {
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 6px;
    }
    .mobile-manage-grid-text {
      font-size: 12px; color: #555; text-align: center;
      line-height: 1.3;
    }
    .mobile-grid-badge {
      position: absolute;
      top: -4px; right: -8px;
      background: #e85858; color: #fff;
      font-size: 10px; font-weight: 600;
      min-width: 16px; height: 16px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      padding: 0 4px;
      line-height: 1;
    }

    /* 移动端系统订单 */
    .mobile-system-orders-page {
      background: #f5f6f7;
      min-height: 100%;
      padding-bottom: 22px;
      color: #1f2d25;
    }
    .mobile-system-header {
      height: 48px;
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: center;
      background: #fff;
      border-bottom: 1px solid #eef0f2;
      position: sticky;
      top: 0;
      z-index: 8;
    }
    .mobile-system-back {
      width: 34px;
      height: 34px;
      margin-left: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #1f2d25;
    }
    .mobile-system-title {
      text-align: center;
      font-size: 16px;
      font-weight: 800;
    }
    .mobile-system-version {
      margin: 12px;
      border-radius: 16px;
      padding: 16px;
      color: #fff;
      background:
        radial-gradient(circle at 86% 20%, rgba(255,255,255,.22), transparent 23%),
        linear-gradient(135deg, #4caf82, #2fac70);
      box-shadow: 0 8px 22px rgba(47, 172, 112, .18);
      overflow: hidden;
      position: relative;
    }
    .mobile-system-version::after {
      content: 'VIP';
      position: absolute;
      right: 16px;
      top: 18px;
      width: 58px;
      height: 38px;
      border-radius: 14px;
      background: rgba(255,255,255,.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      letter-spacing: 0;
    }
    .mobile-system-version-name {
      font-size: 18px;
      font-weight: 900;
      margin-bottom: 4px;
    }
    .mobile-system-version-desc {
      font-size: 12px;
      opacity: .86;
      margin-bottom: 14px;
    }
    .mobile-system-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 14px;
    }
    .mobile-system-stat {
      min-width: 0;
      padding: 9px 7px;
      border-radius: 10px;
      background: rgba(255,255,255,.16);
    }
    .mobile-system-stat span {
      display: block;
      font-size: 10px;
      opacity: .78;
      margin-bottom: 3px;
      white-space: nowrap;
    }
    .mobile-system-stat strong {
      display: block;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-system-action-row {
      display: flex;
      gap: 10px;
      position: relative;
      z-index: 1;
    }
    .mobile-system-action {
      flex: 1;
      height: 34px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.68);
      background: rgba(255,255,255,.14);
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      font-family: inherit;
    }
    .mobile-system-action.primary {
      border-color: #fff;
      background: #fff;
      color: #2fac70;
    }
    .mobile-system-section-title {
      padding: 4px 14px 9px;
      color: #1f2d25;
      font-size: 15px;
      font-weight: 800;
    }
    .mobile-system-order-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0 12px 24px;
    }
    .mobile-system-order-card {
      background: #fff;
      border-radius: 14px;
      padding: 13px 12px;
      border: 1px solid #eef1f3;
      box-shadow: 0 4px 14px rgba(20, 40, 70, .04);
    }
    .mobile-system-order-head {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f2f3;
    }
    .mobile-system-order-no {
      min-width: 0;
      flex: 1;
      color: #8d96a3;
      font-size: 11px;
      line-height: 1.4;
    }
    .mobile-system-order-no strong {
      display: block;
      color: #1f2d25;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-system-status {
      flex-shrink: 0;
      height: 23px;
      padding: 0 9px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
    }
    .mobile-system-status.pending { background: #fff5e6; color: #d47b16; }
    .mobile-system-status.done { background: #eef9f3; color: #35a96b; }
    .mobile-system-detail {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 12px;
      padding: 12px 0;
    }
    .mobile-system-detail-item {
      min-width: 0;
      font-size: 12px;
      color: #8d96a3;
    }
    .mobile-system-detail-item.full { grid-column: 1 / -1; }
    .mobile-system-detail-item strong {
      display: block;
      margin-top: 3px;
      color: #1f2d25;
      font-size: 14px;
      font-weight: 700;
      word-break: break-all;
    }
    .mobile-system-countdown {
      margin-top: 1px;
      color: #44504b;
      font-size: 12px;
      line-height: 1.45;
    }
    .mobile-system-countdown span { color: #ff4d4f; }
    .mobile-system-order-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding-top: 10px;
      border-top: 1px solid #f0f2f3;
    }
    .mobile-system-btn {
      min-width: 94px;
      height: 32px;
      border-radius: 16px;
      border: 1px solid #d9dee4;
      background: #fff;
      color: #44504b;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
    }
    .mobile-system-btn.primary {
      border-color: #4caf82;
      background: #4caf82;
      color: #fff;
    }
    .mobile-plan-sheet-mask {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.46);
      z-index: 50;
      display: none;
      align-items: flex-end;
    }
    .mobile-plan-sheet-mask.show { display: flex; }
    .mobile-plan-sheet {
      width: 100%;
      max-height: 88%;
      overflow-y: auto;
      background: #f6f8f9;
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -8px 24px rgba(0,0,0,.18);
    }
    .mobile-plan-sheet-head {
      height: 58px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, #4fc583, #87dcb0);
      color: #fff;
      border-radius: 18px 18px 0 0;
    }
    .mobile-plan-sheet-title {
      font-size: 18px;
      font-weight: 800;
      flex: 1;
    }
    .mobile-plan-sheet-close {
      width: 32px;
      height: 32px;
      border: none;
      background: transparent;
      color: #fff;
      font-size: 28px;
      line-height: 1;
    }
    .mobile-plan-sheet-body { padding: 14px 12px 18px; }
    .mobile-plan-feature-card,
    .mobile-plan-picker-card {
      background: #fff;
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 12px;
    }
    .mobile-plan-card-title {
      font-size: 15px;
      font-weight: 800;
      color: #1f2d25;
      margin-bottom: 10px;
    }
    .mobile-plan-feature-list {
      display: flex;
      flex-direction: column;
      gap: 9px;
      color: #67716d;
      font-size: 13px;
      line-height: 1.45;
    }
    .mobile-plan-feature-list div::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #67716d;
      margin-right: 8px;
      vertical-align: 2px;
    }
    .mobile-plan-version-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }
    .mobile-plan-version {
      height: 42px;
      border-radius: 8px;
      background: #f3f5f8;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #4b5563;
      font-weight: 700;
      border: 1px solid transparent;
    }
    .mobile-plan-version.active {
      background: #f1fffa;
      color: #49b87a;
      border-color: #64d598;
    }
    .mobile-plan-period-list {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 3px;
    }
    .mobile-plan-period-list::-webkit-scrollbar { display: none; }
    .mobile-plan-period {
      min-width: 132px;
      border-radius: 10px;
      padding: 12px 10px 0;
      background: linear-gradient(180deg, #f5f7fa 0%, #f7f8fb 76%, #fff5e4 76%, #fff5e4 100%);
      overflow: hidden;
      border: 1px solid transparent;
    }
    .mobile-plan-period.active {
      border-color: #ff9d36;
      background: linear-gradient(180deg, #f2fffd 0%, #ecfffd 76%, #ffc969 76%, #ffc969 100%);
    }
    .mobile-plan-period-name {
      font-size: 16px;
      font-weight: 800;
      color: #3c2b1d;
      margin-bottom: 12px;
    }
    .mobile-plan-price {
      color: #ff7f28;
      font-size: 25px;
      font-weight: 800;
      line-height: 1;
    }
    .mobile-plan-price small { font-size: 12px; }
    .mobile-plan-origin {
      margin-top: 8px;
      color: #a6acb5;
      text-decoration: line-through;
      font-size: 12px;
    }
    .mobile-plan-slogan {
      margin: 14px -10px 0;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8b5d1e;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .mobile-plan-order-btn {
      width: 100%;
      height: 44px;
      margin-top: 14px;
      border: none;
      border-radius: 22px;
      color: #fff;
      background: linear-gradient(135deg, #ff9d36, #ff7f28);
      font-size: 15px;
      font-weight: 800;
      font-family: inherit;
    }

    /* 移动端会员管理 */
    .mobile-customer-page {
      min-height: 100%;
      background: #f7f8fa;
      color: #252a31;
      padding-bottom: 86px;
    }
    .mobile-customer-page.detail {
      background: linear-gradient(180deg, #dceeff 0, #f7f8fa 116px);
    }
    .mobile-customer-header {
      height: 44px;
      display: grid;
      grid-template-columns: 40px 1fr 40px;
      align-items: center;
      background: #fff;
    }
    .mobile-customer-page.detail .mobile-customer-header { background: transparent; }
    .mobile-customer-back {
      width: 34px; height: 34px; margin-left: 3px;
      display: flex; align-items: center; justify-content: center;
      color: #252a31; cursor: pointer;
    }
    .mobile-customer-back svg { width: 22px; height: 22px; }
    .mobile-customer-title {
      text-align: center;
      font-size: 17px;
      font-weight: 500;
    }
    .mobile-customer-search {
      margin: 0 12px 10px;
      height: 34px;
      border-radius: 18px;
      background: #f1f1f1;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 12px;
      color: #858b94;
      font-size: 13px;
    }
    .mobile-customer-sort-row {
      height: 38px;
      padding: 0 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #252a31;
      background: #fff;
      border-bottom: 1px solid #f0f1f3;
    }
    .mobile-customer-sort-row .filter {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .mobile-customer-list {
      padding: 8px 12px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .mobile-customer-card {
      min-height: 132px;
      border-radius: 8px;
      background: linear-gradient(105deg, #fff 0%, #f7fbff 52%, #fff 100%);
      box-shadow: 0 2px 10px rgba(15,23,42,.05);
      padding: 11px 10px 10px;
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .mobile-customer-card-top {
      display: grid;
      grid-template-columns: 46px minmax(0,1fr) auto 28px;
      align-items: center;
      gap: 6px;
      margin-bottom: 9px;
    }
    .mobile-customer-logo {
      width: 40px; height: 25px;
      display: flex; align-items: center; justify-content: center;
      color: #d8dde5;
      font-size: 9px;
      line-height: 1.05;
      font-weight: 700;
      text-align: center;
    }
    .mobile-customer-avatar {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(145deg, #e9fff5, #d6f5e7);
      border: 1px solid #cfeee0; font-size: 24px; overflow: hidden;
    }    .mobile-customer-phone-main {
      font-size: 16px;
      font-weight: 600;
      color: #20242a;
      white-space: nowrap;
    }
    .mobile-customer-phone-sub {
      font-size: 12px;
      color: #4b5563;
      white-space: nowrap;
    }
    .mobile-customer-call {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: #4fc083;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
    }
    .mobile-customer-card-body {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
      gap: 8px;
      align-items: end;
    }
    .mobile-customer-mini-card {
      height: 46px;
      border-radius: 4px;
      color: #fff;
      background: linear-gradient(110deg, #43d7c0 0%, #38cfa3 62%, #30bd76 100%);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px 0 10px;
      box-sizing: border-box;
      font-size: 14px;
    }
    .mobile-customer-mini-card::before {
      content: '';
      position: absolute;
      top: -34px;
      right: 104px;
      width: 64px;
      height: 130px;
      transform: rotate(32deg);
      border-radius: 40px;
      background: rgba(255,255,255,.14);
    }
    .mobile-customer-mini-card.pink {
      background: linear-gradient(110deg, #ffa6b8 0%, #ff7b97 62%, #ff5575 100%);
      font-size: 14px;
    }
    .mobile-customer-mini-card .pill {
      min-width: 48px;
      height: 22px;
      border-radius: 14px;
      background: #fff;
      color: #2d9f71;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
    .mobile-customer-pet-btn {
      margin-top: 8px;
      width: 64px;
      height: 22px;
      border-radius: 14px;
      background: #3fb879;
      color: #fff;
      border: none;
      font-size: 12px;
    }
    .mobile-customer-stats {
      text-align: right;
      color: #8f96a3;
      font-size: 12px;
      line-height: 1.65;
    }
    .mobile-customer-stats strong {
      color: #252a31;
      font-size: 16px;
      font-weight: 500;
      margin-left: 6px;
    }
    .mobile-customer-add {
      position: absolute;
      left: 106px;
      right: 106px;
      bottom: 14px;
      height: 40px;
      border-radius: 24px;
      border: none;
      background: linear-gradient(90deg, #49b978 0%, #26714e 100%);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 8px 18px rgba(38,113,78,.18);
    }
    .mobile-customer-profile {
      margin: 0 12px 10px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 2px 9px rgba(15,23,42,.06);
      padding: 11px 10px 10px;
    }
    .mobile-customer-profile-top {
      display: grid;
      grid-template-columns: 46px minmax(0,1fr) auto 28px;
      gap: 6px;
      align-items: start;
      margin-bottom: 11px;
    }
    .mobile-customer-id {
      margin-top: 4px;
      font-size: 12px;
      color: #8f96a3;
    }
    .mobile-customer-assets {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .mobile-customer-asset-card {
      height: 56px;
      border-radius: 5px;
      color: #fff;
      background: linear-gradient(90deg, #74dfb5, #4fca8d);
      display: grid;
      grid-template-columns: 40px 1fr;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .mobile-customer-asset-card.blue { background: linear-gradient(90deg, #80b8ff, #5f78f0); }
    .mobile-customer-asset-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(255,255,255,.45);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px;
    }
    .mobile-customer-asset-title { font-size: 13px; opacity: .95; }
    .mobile-customer-asset-value { font-size: 18px; margin-top: 2px; }
    .mobile-customer-remark {
      margin-top: 11px;
      padding-top: 9px;
      border-top: 1px solid #f2f3f5;
      color: #8f96a3;
      font-size: 13px;
    }
    .mobile-customer-section {
      margin: 0 12px 10px;
      border-radius: 8px;
      background: #fff;
      padding: 12px 10px;
      box-sizing: border-box;
    }
    .mobile-customer-section-head {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 15px; font-weight: 700; color: #252a31;
    }
    .mobile-customer-green-btn {
      height: 28px;
      min-width: 88px;
      border-radius: 16px;
      border: none;
      background: #55c88e;
      color: #fff;
      font-size: 13px;
    }
    .mobile-customer-tags {
      margin-top: 12px;
      background: #f7f8fa;
      min-height: 42px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .mobile-customer-tag {
      height: 24px;
      padding: 0 12px;
      border-radius: 15px;
      background: #fff;
      color: #4a76b8;
      display: inline-flex;
      align-items: center;
      font-size: 13px;
    }
    .mobile-customer-tabs {
      margin: 0 12px;
      background: #fff;
      border-radius: 8px 8px 0 0;
      padding: 8px 10px 0;
    }
    .mobile-customer-tabbar {
      height: 34px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 7px;
      background: #ededee;
      overflow: hidden;
    }
    .mobile-customer-tabbar span {
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; color: #333942; cursor: pointer;
    }
    .mobile-customer-tabbar .active {
      color: #fff;
      background: linear-gradient(90deg, #7edfb7, #42b979);
    }
    .mobile-customer-menu {
      margin: 0 12px 24px;
      background: #fff;
      border-radius: 0 0 8px 8px;
      padding: 8px 12px;
    }
    .mobile-customer-menu-row {
      min-height: 46px;
      display: grid;
      grid-template-columns: 1fr auto 28px;
      align-items: center;
      border-bottom: 1px solid #f0f1f3;
      font-size: 15px;
      color: #252a31;
      cursor: pointer;
    }
    .mobile-customer-menu-row:last-child { border-bottom: none; }
    .mobile-customer-open-pill {
      height: 26px;
      min-width: 76px;
      border-radius: 17px;
      border: 1px solid #7fcfaf;
      background: #fff;
      color: #2b9b6e;
      font-size: 14px;
    }
    .mobile-customer-chevron { color: #9aa1ac; font-size: 23px; text-align: right; }
    .mobile-customer-tag.muted { color: #9aa1ac; }
    .mobile-customer-tab-content { min-height: 220px; }
    .mobile-customer-info-records {
      margin: 0 12px 24px;
      padding: 8px 12px 0;
      border-radius: 0 0 8px 8px;
      background: #fff;
    }
    .mobile-customer-info-row {
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid #eceef1;
      color: #252a31;
      font-size: 15px;
    }
    .mobile-customer-info-row:last-child { border-bottom: none; }
    .mobile-customer-info-row.link { cursor: pointer; }
    .mobile-customer-info-row strong {
      color: #252a31;
      font-size: 14px;
      font-weight: 400;
      text-align: right;
      white-space: nowrap;
    }

    /* 营业概况报表 */
    .mobile-bo-page {
      min-height: 100%;
      background: #f7f8fa;
      color: #222;
      padding-bottom: 14px;
    }
    .mobile-bo-header {
      height: 44px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: sticky;
      top: 0;
      z-index: 12;
      border-bottom: 1px solid #f2f2f2;
    }
    .mobile-bo-back {
      position: absolute;
      left: 10px;
      top: 0;
      width: 36px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      cursor: pointer;
    }
    .mobile-bo-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
    .mobile-bo-tabs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      padding: 12px 14px 10px;
      background: #fff;
    }
    .mobile-bo-tab {
      height: 28px;
      border-radius: 3px;
      background: #f4f5f6;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    .mobile-bo-tab.active {
      color: #39b88a;
      background: #eefaf5;
      font-weight: 500;
    }
    .mobile-bo-date {
      margin: 8px 14px 16px;
      height: 30px;
      border-radius: 4px;
      border: 1px solid #ededed;
      background: #fff;
      display: grid;
      grid-template-columns: 1fr 32px 1fr;
      align-items: center;
      text-align: center;
      color: #333;
      font-size: 12px;
    }
    .mobile-bo-date span:nth-child(2) {
      color: #333;
      font-size: 12px;
    }
    .mobile-bo-hero {
      position: relative;
      margin: 0 10px 8px;
      min-height: 80px;
      border-radius: 7px;
      background: linear-gradient(106deg, #fff 0%, #f4fffb 48%, #dffcf5 100%);
      box-shadow: 0 3px 10px rgba(34, 95, 79, .05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: visible;
      z-index: 1;
    }
    .mobile-bo-hero.tip-open { z-index: 30; }
    .mobile-bo-hero::before {
      content: '';
      position: absolute;
      right: -18px;
      bottom: -22px;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(70, 211, 166, .22) 0 18%, rgba(70, 211, 166, .12) 19% 36%, rgba(70, 211, 166, .06) 37% 54%, transparent 55%);
    }
    .mobile-bo-hero-label,
    .mobile-bo-card-title {
      color: #999;
      font-size: 13px;
      line-height: 1.2;
      text-align: center;
    }
    .mobile-bo-help {
      display: inline-flex;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #9fa5ad;
      color: #fff;
      font-size: 9px;
      align-items: center;
      justify-content: center;
      margin-left: 3px;
      vertical-align: 1px;
      font-style: normal;
      border: none;
      padding: 0;
      line-height: 14px;
    }
    .mobile-bo-tip {
      display: none;
      position: absolute;
      left: 50%;
      top: 36px;
      transform: translateX(-50%);
      width: calc(100vw - 54px);
      max-width: 340px;
      background: #fff;
      border: 1px solid #e3e7ec;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.16);
      padding: 10px 12px;
      z-index: 20;
      color: #4b5563;
      font-size: 12px;
      line-height: 1.6;
      text-align: left;
    }
    .mobile-bo-tip.show { display: block; }
    .mobile-bo-main-num {
      color: #222;
      font-size: 18px;
      font-weight: 700;
      margin-top: 9px;
      position: relative;
      z-index: 0;
    }
    .mobile-bo-main-num span {
      font-size: 12px;
      font-weight: 400;
      margin-left: 2px;
    }
    .mobile-bo-card {
      background: #fff;
      border-radius: 7px;
      margin: 0 10px 8px;
      padding: 16px 14px 10px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .025);
    }
    .mobile-bo-card .mobile-bo-main-num {
      text-align: center;
      margin-top: 7px;
      margin-bottom: 17px;
    }
    .mobile-bo-subgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 62px;
      align-items: center;
      position: relative;
    }
    .mobile-bo-subgrid::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 8px;
      bottom: 8px;
      width: 1px;
      background: #f2f2f2;
    }
    .mobile-bo-subitem {
      text-align: center;
      min-width: 0;
    }
    .mobile-bo-subitem.full {
      grid-column: 1 / -1;
      margin-top: 5px;
    }
    .mobile-bo-sublabel {
      color: #aaa;
      font-size: 12px;
      margin-bottom: 7px;
    }
    .mobile-bo-subvalue {
      color: #1f2933;
      font-size: 15px;
      font-weight: 700;
    }
    .mobile-bo-subvalue span {
      font-size: 11px;
      font-weight: 400;
      margin-left: 1px;
    }
    .mobile-bo-share {
      margin-top: 9px;
      text-align: center;
      font-size: 12px;
      color: #5acba1;
      font-weight: 500;
    }
    .mobile-bo-chart-card,
    .mobile-bo-table-card {
      background: #fff;
      border-radius: 7px;
      margin: 10px 10px 0;
      padding: 14px 12px 12px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .025);
    }
    .mobile-bo-section-title {
      color: #1f2933;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 18px;
    }
    .mobile-bo-donut-wrap {
      position: relative;
      height: 214px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-bo-donut {
      width: 168px;
      height: 168px;
      border-radius: 50%;
      background: conic-gradient(#5b8ff9 0deg 358.96deg, #72d7a6 358.96deg 360deg);
      position: relative;
    }
    .mobile-bo-donut::after {
      content: '';
      position: absolute;
      inset: 43px;
      border-radius: 50%;
      background: #fff;
    }
    .mobile-bo-line-label {
      position: absolute;
      color: #333;
      font-size: 10px;
      white-space: nowrap;
    }
    .mobile-bo-line-label.left {
      left: 0;
      top: 91px;
    }
    .mobile-bo-line-label.right {
      right: -1px;
      top: 91px;
    }
    .mobile-bo-line-label.left::after,
    .mobile-bo-line-label.right::before {
      content: '';
      display: inline-block;
      width: 34px;
      height: 1px;
      background: #d7dce2;
      vertical-align: 3px;
    }
    .mobile-bo-line-label.left::after { margin-left: 4px; }
    .mobile-bo-line-label.right::before { margin-right: 4px; }
    .mobile-bo-legend {
      display: flex;
      justify-content: center;
      gap: 18px;
      margin-top: 4px;
      color: #7b8794;
      font-size: 11px;
    }
    .mobile-bo-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-right: 4px;
    }
    .mobile-bo-dot.blue { background: #5b8ff9; }
    .mobile-bo-dot.green { background: #72d7a6; }
    .mobile-bo-table-card {
      padding: 14px 10px 10px;
    }
    .mobile-bo-table-wrap {
      overflow: hidden;
      border-radius: 3px;
      border: 1px solid #f0f0f0;
    }
    .mobile-bo-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 12px;
      color: #444;
      background: #fff;
    }
    .mobile-bo-table th {
      background: #fafbff;
      color: #333;
      font-weight: 700;
      height: 42px;
      border: 1px solid #f0f0f0;
      text-align: center;
    }
    .mobile-bo-table td {
      height: 38px;
      border: 1px solid #f0f0f0;
      text-align: center;
      color: #333;
    }
    .mobile-bo-table th:first-child,
    .mobile-bo-table td:first-child {
      width: 28%;
    }

    /* 营业分析报表 */
    .mobile-ba-top-tabs {
      display: flex;
      gap: 22px;
      padding: 12px 18px 0;
      background: #fff;
      overflow-x: auto;
      white-space: nowrap;
      border-bottom: 1px solid #f4f4f4;
    }
    .mobile-ba-top-tabs::-webkit-scrollbar { display: none; }
    .mobile-ba-top-tab {
      height: 38px;
      position: relative;
      color: #555;
      font-size: 15px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-ba-top-tab.active {
      color: #222;
      font-weight: 700;
    }
    .mobile-ba-top-tab.active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 4px;
      border-radius: 4px 4px 0 0;
      background: #42c79c;
    }
    .mobile-ba-card {
      background: #fff;
      border-radius: 8px;
      margin: 10px 16px 0;
      padding: 18px 16px 16px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .025);
      position: relative;
    }
    .mobile-ba-card-title {
      text-align: center;
      color: #1f2933;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .mobile-ba-card-title.muted {
      color: #aaa;
      font-weight: 400;
    }
    .mobile-ba-main-num {
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      color: #1f2933;
      margin-bottom: 22px;
    }
    .mobile-ba-main-num span {
      font-size: 12px;
      font-weight: 400;
      margin-left: 2px;
    }
    .mobile-ba-hero {
      position: relative;
      margin: 10px 16px 0;
      padding: 22px 16px 20px;
      border: 1px solid #e5f7f0;
      background: linear-gradient(135deg, #ffffff 0%, #ecfff8 100%);
      overflow: visible;
    }
    .mobile-ba-hero::after {
      content: '';
      position: absolute;
      right: -22px;
      bottom: -28px;
      width: 92px;
      height: 92px;
      border-radius: 50%;
      border: 14px solid rgba(98, 211, 171, .16);
    }
    .mobile-ba-turnover-title {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: #666;
      font-size: 14px;
      margin-bottom: 14px;
    }
    .mobile-ba-help-btn {
      width: 15px;
      height: 15px;
      border: none;
      border-radius: 50%;
      background: #b8c0ca;
      color: #fff;
      font-size: 10px;
      line-height: 15px;
      padding: 0;
      font-weight: 700;
    }
    .mobile-ba-tip {
      display: none;
      position: absolute;
      left: 50%;
      top: 30px;
      transform: translateX(-50%);
      width: calc(100vw - 54px);
      max-width: 340px;
      background: #fff;
      border: 1px solid #e3e7ec;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.16);
      padding: 10px 12px;
      z-index: 20;
      color: #4b5563;
      font-size: 12px;
      line-height: 1.6;
      text-align: left;
      pointer-events: auto;
    }
    .mobile-ba-tip.show {
      display: block;
    }
    .mobile-ba-card.mobile-ba-hero.tip-open { z-index: 30; }
    .mobile-ba-hero .mobile-ba-main-num {
      position: relative;
      z-index: 0;
      margin-bottom: 0;
    }
    .mobile-ba-metric-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px 0;
      position: relative;
      margin-top: 8px;
    }
    .mobile-ba-metric-grid::before {
      content: '';
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 50%;
      width: 1px;
      background: #f2f2f2;
    }
    .mobile-ba-metric {
      text-align: center;
      min-height: 48px;
    }
    .mobile-ba-metric-label {
      color: #aaa;
      font-size: 13px;
      margin-bottom: 8px;
    }
    .mobile-ba-metric-val {
      color: #1f2933;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.25;
    }
    .mobile-ba-metric-val span {
      font-size: 12px;
      font-weight: 400;
      margin-left: 1px;
    }
    .mobile-ba-metric-sub {
      color: #aaa;
      font-size: 13px;
      line-height: 1.4;
      margin-top: 2px;
    }
    .mobile-ba-guest {
      text-align: center;
      margin-top: 30px;
    }
    .mobile-ba-guest-title {
      color: #1f2933;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .mobile-ba-guest-sub {
      color: #aaa;
      font-size: 14px;
      margin-top: 8px;
    }
    .mobile-ba-guest-sub strong {
      color: #1f2933;
      font-weight: 700;
    }
    .mobile-ba-three-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      position: relative;
      margin-top: 20px;
    }
    .mobile-ba-three-grid::before,
    .mobile-ba-three-grid::after {
      content: '';
      position: absolute;
      top: 9px;
      bottom: 9px;
      width: 1px;
      background: #f2f2f2;
    }
    .mobile-ba-three-grid::before { left: 33.33%; }
    .mobile-ba-three-grid::after { left: 66.66%; }
    .mobile-ba-two-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      position: relative;
      margin-top: 28px;
    }
    .mobile-ba-two-grid::before {
      content: '';
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 50%;
      width: 1px;
      background: #f2f2f2;
    }
    .mobile-ba-chart-card {
      background: #fff;
      border-radius: 8px;
      margin: 16px 16px 0;
      padding: 18px 14px 18px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .025);
    }
    .mobile-ba-section-title {
      color: #1f2933;
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 22px;
    }
    .mobile-ba-chart {
      position: relative;
      height: 250px;
    }
    .mobile-ba-y-label {
      position: absolute;
      left: 22px;
      color: #333;
      font-size: 12px;
      transform: translateY(50%);
    }
    .mobile-ba-y-label.y18000 { bottom: 206px; }
    .mobile-ba-y-label.y15000 { bottom: 172px; }
    .mobile-ba-y-label.y12000 { bottom: 138px; }
    .mobile-ba-y-label.y9000 { bottom: 104px; }
    .mobile-ba-y-label.y6000 { bottom: 70px; }
    .mobile-ba-y-label.y3000 { bottom: 36px; }
    .mobile-ba-y-label.y0 { bottom: 0; }
    .mobile-ba-plot {
      position: absolute;
      left: 82px;
      right: 16px;
      top: 4px;
      bottom: 42px;
      border-left: 1px solid #d7d7d7;
      border-bottom: 1px solid #d7d7d7;
      background:
        linear-gradient(to bottom, transparent calc(16.66% - .5px), #ddd calc(16.66% - .5px), #ddd calc(16.66% + .5px), transparent calc(16.66% + .5px)),
        linear-gradient(to bottom, transparent calc(33.33% - .5px), #ddd calc(33.33% - .5px), #ddd calc(33.33% + .5px), transparent calc(33.33% + .5px)),
        linear-gradient(to bottom, transparent calc(50% - .5px), #ddd calc(50% - .5px), #ddd calc(50% + .5px), transparent calc(50% + .5px)),
        linear-gradient(to bottom, transparent calc(66.66% - .5px), #ddd calc(66.66% - .5px), #ddd calc(66.66% + .5px), transparent calc(66.66% + .5px)),
        linear-gradient(to bottom, transparent calc(83.33% - .5px), #ddd calc(83.33% - .5px), #ddd calc(83.33% + .5px), transparent calc(83.33% + .5px));
    }
    .mobile-ba-legend {
      position: absolute;
      right: 4px;
      top: 0;
      font-size: 12px;
      color: #333;
      line-height: 1.8;
    }
    .mobile-ba-legend i {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 6px;
      vertical-align: -1px;
    }
    .mobile-ba-legend .member { background: #5b8ff9; }
    .mobile-ba-legend .guest { background: #49b07d; }
    .mobile-ba-bar {
      position: absolute;
      bottom: 0;
      width: 18px;
    }
    .mobile-ba-bar.member { background: #5b8ff9; }
    .mobile-ba-bar.guest { background: #49b07d; }
    .mobile-ba-bar-label {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -14px;
      color: #333;
      font-size: 7px;
      white-space: nowrap;
    }
    .mobile-ba-bar.product-member { left: 28%; height: 2px; }
    .mobile-ba-bar.product-guest { left: calc(28% + 20px); height: 188px; }
    .mobile-ba-bar.service-member { left: 57%; height: 2px; }
    .mobile-ba-bar.service-guest { left: calc(57% + 20px); height: 1px; }
    .mobile-ba-bar.board-member { left: 86%; height: 1px; }
    .mobile-ba-bar.board-guest { left: calc(86% + 20px); height: 1px; }
    .mobile-ba-x-labels {
      position: absolute;
      left: 82px;
      right: 16px;
      bottom: 0;
      height: 34px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: end;
      text-align: center;
      color: #222;
      font-size: 18px;
      font-weight: 500;
    }

    /* 打印设置 */
    .mobile-print-page {
      min-height: 100%;
      background: #f5f5f5;
      color: #20242a;
      padding-bottom: 16px;
    }
    .mobile-print-page.detail {
      background: #fff;
      padding-bottom: 8px;
    }
    .mobile-print-header {
      height: 44px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: sticky;
      top: 0;
      z-index: 15;
      border-bottom: 1px solid #f1f1f1;
    }
    .mobile-print-back {
      position: absolute;
      left: 4px;
      top: 0;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #222;
      cursor: pointer;
    }
    .mobile-print-back svg {
      width: 24px;
      height: 24px;
    }
    .mobile-print-title {
      font-size: 16px;
      font-weight: 600;
      color: #20242a;
      letter-spacing: 0;
    }
    .mobile-print-card {
      margin: 12px 12px 0;
      padding: 14px 14px 12px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 12px rgba(31, 41, 55, .025);
    }
    .mobile-print-section-title {
      font-size: 15px;
      font-weight: 600;
      color: #1e232b;
      margin-bottom: 12px;
    }
    .mobile-print-row {
      display: flex;
      align-items: center;
      min-height: 44px;
      gap: 10px;
    }
    .mobile-print-row + .mobile-print-row {
      margin-top: 10px;
    }
    .mobile-print-label {
      width: 82px;
      flex-shrink: 0;
      font-size: 14px;
      font-weight: 600;
      color: #1f242c;
    }
    .mobile-print-segment {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .mobile-print-seg {
      height: 32px;
      border-radius: 17px;
      background: #f2f2f3;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #20242a;
    }
    .mobile-print-seg.active {
      background: #f4fffb;
      border: 1px solid #3d927a;
      color: #54a892;
    }
    .mobile-print-input-wrap {
      flex: 1;
      height: 34px;
      border: 1px solid #dedede;
      border-radius: 8px;
      display: grid;
      grid-template-columns: 1fr 44px;
      overflow: hidden;
      background: #fff;
    }
    .mobile-print-input-wrap input {
      border: none;
      outline: none;
      padding: 0 12px;
      font-size: 14px;
      color: #777;
      min-width: 0;
    }
    .mobile-print-unit {
      border-left: 1px solid #dedede;
      color: #888;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-print-style-card {
      padding: 14px 14px 8px;
    }
    .mobile-print-menu-row {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }
    .mobile-print-menu-row span {
      font-size: 14px;
      font-weight: 600;
      color: #1f242c;
    }
    .mobile-print-chevron {
      color: #999;
      font-size: 22px;
      font-weight: 300;
      line-height: 1;
    }
    .mobile-receipt-list {
      background: #fff;
      padding: 10px 14px 0;
    }
    .mobile-receipt-row {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .mobile-receipt-row.title-row {
      height: 48px;
      align-items: flex-start;
      padding-top: 3px;
    }
    .mobile-receipt-label {
      font-size: 14px;
      font-weight: 400;
      color: #24272d;
      white-space: nowrap;
    }
    .mobile-receipt-title-right {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #9b9b9b;
      font-size: 13px;
      min-width: 0;
    }
    .mobile-receipt-title-right span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-receipt-edit {
      color: #2f7d68;
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    .mobile-switch {
      width: 38px;
      height: 22px;
      border-radius: 13px;
      background: #dedede;
      position: relative;
      flex-shrink: 0;
    }
    .mobile-switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
    .mobile-switch.on {
      background: #2f7d68;
    }
    .mobile-switch.on::after {
      left: 18px;
    }
    .mobile-receipt-discount {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      justify-content: flex-end;
    }
    .mobile-receipt-pill {
      min-width: 82px;
      height: 30px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #1f242c;
      background: #f3f3f4;
      padding: 0 10px;
    }
    .mobile-receipt-pill.active {
      color: #54a892;
      border: 1px solid #3d927a;
      background: #f4fffb;
    }
    .mobile-receipt-footer {
      position: sticky;
      left: auto;
      right: auto;
      bottom: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      z-index: 20;
      padding: 10px 12px 12px;
      background: linear-gradient(to top, #fff 76%, rgba(255,255,255,0));
    }
    .mobile-receipt-btn {
      height: 42px;
      border-radius: 22px;
      border: none;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
    }
    .mobile-receipt-btn.preview {
      background: #f0f3f4;
      color: #28745f;
    }
    .mobile-receipt-btn.save {
      background: linear-gradient(90deg, #46b575 0%, #25785f 100%);
      color: #fff;
    }
    .mobile-receipt-preview-page {
      min-height: 100%;
      background: #f3f4f6;
      color: #20242a;
      padding-bottom: 18px;
    }
    .mobile-receipt-preview-hero {
      height: 104px;
      background: #4caf82;
      position: sticky;
      top: 0;
      z-index: 12;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      box-shadow: 0 6px 14px rgba(47, 125, 104, .18);
    }
    .mobile-receipt-preview-back {
      position: absolute;
      left: 10px;
      top: 0;
      width: 44px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      cursor: pointer;
    }
    .mobile-receipt-preview-title {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: 0;
    }
    .mobile-receipt-paper-wrap {
      margin: -12px 12px 0;
      position: relative;
      z-index: 14;
    }
    .mobile-receipt-paper {
      background: #fff;
      border-radius: 4px;
      padding: 16px 12px 20px;
      box-shadow: 0 8px 18px rgba(31, 41, 55, .16);
      border-top: 6px solid #148b3f;
    }
    .mobile-ticket-shop {
      text-align: center;
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #1f242c;
    }
    .mobile-ticket-line {
      border-top: 1px dashed #bbb;
      margin: 10px 0;
    }
    .mobile-ticket-row {
      font-size: 15px;
      line-height: 1.65;
      color: #30333a;
      word-break: break-all;
    }
    .mobile-ticket-section-title {
      font-size: 16px;
      font-weight: 700;
      margin: 8px 0 6px;
    }
    .mobile-ticket-grid-head,
    .mobile-ticket-grid-row {
      display: grid;
      grid-template-columns: 1fr 70px 86px;
      align-items: center;
      column-gap: 8px;
      font-size: 15px;
      line-height: 1.7;
    }
    .mobile-ticket-grid-head {
      font-weight: 700;
      margin-bottom: 4px;
    }
    .mobile-ticket-grid-row .center {
      text-align: center;
    }
    .mobile-ticket-grid-row .right,
    .mobile-ticket-grid-head .right {
      text-align: right;
    }
    .mobile-ticket-product-name,
    .mobile-ticket-code {
      font-size: 15px;
      line-height: 1.55;
      margin: 6px 0;
      color: #30333a;
    }
    .mobile-ticket-summary {
      font-size: 15px;
      line-height: 1.75;
      color: #30333a;
    }
    .mobile-ticket-payline {
      padding-left: 76px;
      text-indent: -76px;
    }
    .mobile-ticket-pay-subline {
      padding-left: 76px;
    }

    /* 洗护报告子页面 */
    .mobile-wash-report { background: #f5f5f5; min-height: 100%; }
    .mobile-sub-header {
      background: var(--brand, #4caf82);
      padding: 0;
      display: flex; align-items: center;
      height: 44px;
      position: sticky; top: 0; z-index: 10;
    }
    .mobile-sub-back {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: #fff;
    }
    .mobile-sub-back:active { opacity: .7; }
    .mobile-sub-title {
      font-size: 16px; font-weight: 600; color: #fff;
      flex: 1; text-align: center;
      margin-right: 44px;
    }
    .mobile-sub-action {
      position: absolute;
      right: 10px;
      top: 7px;
      height: 30px;
      padding: 0 11px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.72);
      background: rgba(255,255,255,.18);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }
    .mobile-sub-action:active { opacity: .75; }
    .mobile-wr-search {
      padding: 12px 12px 0;
      background: var(--brand, #4caf82);
    }
    .mobile-wr-search-box {
      display: flex; align-items: center;
      background: #fff;
      border-radius: 20px;
      padding: 8px 14px;
      gap: 8px;
    }
    .mobile-wr-search-box svg { flex-shrink: 0; color: #bbb; }
    .mobile-wr-search-box input {
      flex: 1; border: none; outline: none; font-size: 13px;
      background: transparent; color: #333;
    }
    .mobile-wr-search-box input::placeholder { color: #bbb; }
    .mobile-wr-filter {
      display: flex; align-items: center;
      padding: 8px 12px 12px;
      gap: 8px;
      background: var(--brand, #4caf82);
    }
    .mobile-wr-date-input {
      flex: 1;
      display: flex; align-items: center; gap: 4px;
      background: #fff;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px; color: #666;
      cursor: pointer;
    }
    .mobile-wr-date-input svg { width: 14px; height: 14px; color: #999; flex-shrink: 0; }
    .mobile-wr-date-input input {
      border: none; outline: none; background: transparent;
      font-size: 12px; color: #333; width: 100%;
    }
    .mobile-wr-search-btn {
      display: flex; align-items: center; justify-content: center; gap: 4px;
      background: #fff;
      color: var(--brand, #4caf82);
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 12px; font-weight: 600;
      cursor: pointer; border: none;
    }
    .mobile-wr-search-btn:active { opacity: .7; }
    .mobile-wr-search-btn svg { width: 14px; height: 14px; }
    .mobile-wr-count {
      padding: 8px 14px;
      font-size: 12px; color: #999;
    }
    .mobile-wr-count span { color: var(--brand, #4caf82); font-weight: 600; }
    .mobile-wr-list { padding: 0 12px; }
    .mobile-wr-card {
      background: #fff;
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 10px;
    }
    .mobile-wr-card-row1 {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
    }
    .mobile-wr-customer {
      font-size: 15px; font-weight: 600; color: #333;
    }
    .mobile-wr-status {
      font-size: 11px; padding: 2px 8px;
      border-radius: 10px; font-weight: 500;
    }
    .mobile-wr-status.published { background: #f0fdf4; color: #38a169; }
    .mobile-wr-status.draft { background: #fff5e6; color: #c87d00; }
    .mobile-wr-card-info {
      display: flex; flex-wrap: wrap; gap: 4px 16px;
      margin-bottom: 10px;
    }
    .mobile-wr-info-item {
      font-size: 12px; color: #888;
      display: flex; align-items: center; gap: 4px;
    }
    .mobile-wr-info-item .label { color: #aaa; }
    .mobile-wr-info-item .value { color: #555; }
    .mobile-wr-card-time {
      font-size: 11px; color: #bbb;
      margin-bottom: 10px;
      display: flex; align-items: center; gap: 4px;
    }
    .mobile-wr-card-time svg { width: 13px; height: 13px; flex-shrink: 0; }
    .mobile-wr-card-actions {
      display: flex; gap: 8px;
      justify-content: flex-end;
      padding-top: 10px;
      border-top: 1px solid #f0f0f0;
    }
    .mobile-wr-btn {
      font-size: 12px; padding: 5px 14px;
      border-radius: 14px; border: none;
      cursor: pointer; font-weight: 500;
    }
    .mobile-wr-btn:active { opacity: .7; }
    .mobile-wr-btn.primary {
      background: var(--brand, #4caf82); color: #fff;
    }
    .mobile-wr-btn.edit {
      background: #fff; color: #2a6bc4;
      border: 1px solid #2a6bc4;
    }
    .mobile-wr-btn.delete {
      background: #fff; color: #e85858;
      border: 1px solid #e85858;
    }
    .mobile-wr-empty {
      text-align: center; padding: 60px 20px;
      color: #ccc; font-size: 13px;
    }
    .mobile-wr-empty svg { margin-bottom: 12px; color: #ddd; }
    .mobile-wr-fab {
      position: fixed;
      bottom: 80px; right: 20px;
      width: 48px; height: 48px;
      background: var(--brand, #4caf82);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      box-shadow: 0 4px 12px rgba(76,175,130,.4);
      cursor: pointer;
      z-index: 20;
    }
    .mobile-wr-fab:active { transform: scale(.95); }
    .mobile-wr-fab svg { width: 24px; height: 24px; }

    /* 新增洗护报告表单页 */
    .mobile-wr-form { background: #f5f6f7; min-height: 100%; padding-bottom: 74px; }
    .mobile-wr-form-section {
      background: #fff;
      margin: 10px 10px 0;
      padding: 0 14px;
      border-radius: 12px;
      box-shadow: 0 1px 5px rgba(15,23,42,.04);
    }
    .mobile-wr-form-section-title {
      font-size: 14px; font-weight: 600; color: #333;
      padding: 14px 0 10px;
      display: flex; align-items: center; gap: 6px;
    }
    .mobile-wr-form-section-title::before {
      content: '';
      width: 3px; height: 14px;
      background: var(--brand, #4caf82);
      border-radius: 2px;
    }
    .mobile-wr-form-row {
      display: flex; align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f5f5f5;
      min-height: 44px;
    }
    .mobile-wr-form-row:last-child { border-bottom: none; }
    .mobile-wr-form-label {
      width: 80px; flex-shrink: 0;
      font-size: 13px; color: #666;
    }
    .mobile-wr-form-label.required::before {
      content: '*';
      color: #ff4d4f;
      margin-right: 4px;
    }
    .mobile-wr-form-value {
      flex: 1; font-size: 13px; color: #333;
    }
    .mobile-wr-form-input {
      width: 100%; border: 1px solid #e5e7eb; outline: none;
      font-size: 13px; color: #333;
      background: #fff;
      border-radius: 8px;
      height: 34px;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .mobile-wr-form-input::placeholder { color: #ccc; }
    .mobile-wr-form-select {
      width: 100%; border: 1px solid #e0e0e0;
      border-radius: 8px; padding: 7px 10px;
      font-size: 13px; color: #333;
      background: #fff; outline: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
    }
    .mobile-wr-form-radio-group {
      display: flex; gap: 20px;
    }
    .mobile-wr-form-radio {
      display: flex; align-items: center; gap: 4px;
      font-size: 13px; color: #555;
      cursor: pointer;
    }
    .mobile-wr-form-radio input[type="radio"] {
      accent-color: var(--brand, #4caf82);
    }
    /* 选择服务按钮 */
    .mobile-wr-pick-service {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      width: 112px; height: 36px; padding: 0 14px;
      background: var(--brand, #4caf82);
      color: #fff; border: none; border-radius: 19px;
      font-size: 14px; font-weight: 500;
      cursor: pointer; margin: 4px 0 2px;
    }
    .mobile-wr-pick-service:active { opacity: .8; }
    .mobile-wr-pick-service svg { width: 16px; height: 16px; }
    /* 已选服务列表 */
    .mobile-wr-service-list {
      padding: 8px 0;
    }
    .mobile-wr-service-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid #f8f8f8;
      font-size: 13px; color: #333;
    }
    .mobile-wr-service-item:last-child { border-bottom: none; }
    .mobile-wr-service-remove {
      color: #e85858; cursor: pointer; font-size: 18px; line-height: 1;
    }
    /* 图片上传 */
    .mobile-wr-upload-area {
      display: flex; gap: 10px;
      padding: 6px 0 10px;
      flex-wrap: wrap;
    }
    .mobile-wr-upload-box {
      width: 92px; height: 92px;
      border: 1.5px dashed #d9d9d9;
      border-radius: 4px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 6px; cursor: pointer;
      color: #333; font-size: 12px;
      background: #fff;
    }
    .mobile-wr-upload-box svg { width: 24px; height: 24px; }
    .mobile-wr-upload-box:active { border-color: var(--brand, #4caf82); color: var(--brand, #4caf82); }
    .mobile-wr-upload-hint {
      font-size: 11px;
      color: #7b8490;
      line-height: 1.55;
      padding: 0 0 12px;
    }
    .mobile-wr-upload-img {
      width: 80px; height: 80px;
      border-radius: 8px;
      background: #f5f5f5;
      display: flex; align-items: center; justify-content: center;
      color: #ccc; font-size: 11px;
      position: relative;
    }
    /* 检查项目标签 */
    .mobile-wr-check-group {
      margin-bottom: 10px;
      border: 1px solid #f0f2f4;
      border-radius: 10px;
      padding: 10px;
      background: #fff;
    }
    .mobile-wr-check-group-title {
      font-size: 13px; color: #222; font-weight: 700;
    }
    .mobile-wr-check-group-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .mobile-wr-check-actions {
      display: flex;
      gap: 10px;
      font-size: 12px;
      color: #4f7be8;
    }
    .mobile-wr-check-actions span { cursor: pointer; }
    .mobile-wr-section-add {
      margin-left: auto;
      height: 28px;
      border: none;
      border-radius: 15px;
      background: var(--brand, #4caf82);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      padding: 0 12px;
      cursor: pointer;
    }
    .mobile-wr-check-tags {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .mobile-wr-check-tag {
      min-width: 46px;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px; color: #666;
      background: #f4f7fd;
      border: 1px solid #edf1f7;
      cursor: pointer;
      text-align: center;
      box-sizing: border-box;
    }
    .mobile-wr-check-tag:active,
    .mobile-wr-check-tag.active {
      background: #e8f5ee;
      color: var(--brand, #4caf82);
      border-color: var(--brand, #4caf82);
    }
    .mobile-wr-check-add {
      min-width: 42px;
      height: 23px;
      border-radius: 5px;
      border: 1px solid var(--brand, #4caf82);
      background: #fff;
      color: var(--brand, #4caf82);
      font-size: 18px;
      line-height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    /* 健康评估 */
    .mobile-wr-health-group {
      display: flex; gap: 10px;
      padding: 6px 0;
    }
    .mobile-wr-health-option {
      flex: 1;
      padding: 10px 0;
      text-align: center;
      border-radius: 8px;
      font-size: 13px; font-weight: 500;
      border: 1px solid #e0e0e0;
      color: #666;
      cursor: pointer;
    }
    .mobile-wr-health-option.active {
      border-color: var(--brand, #4caf82);
      color: var(--brand, #4caf82);
      background: #f0faf5;
    }
    /* 护理建议文本 */
    .mobile-wr-textarea {
      width: 100%; border: 1px solid #e0e0e0;
      border-radius: 8px; padding: 10px 12px;
      font-size: 13px; color: #333;
      min-height: 80px; resize: vertical;
      outline: none; font-family: inherit;
    }
    .mobile-wr-textarea:focus { border-color: var(--brand, #4caf82); }
    .mobile-wr-advice-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 10px;
    }
    .mobile-wr-advice-head strong {
      color: #222;
      font-size: 14px;
    }
    .mobile-wr-advice-head span {
      color: #999;
      font-size: 11px;
    }
    .mobile-wr-advice-row {
      display: grid;
      grid-template-columns: 18px 1fr;
      align-items: center;
      gap: 8px;
      padding: 0 0 14px;
    }
    .mobile-wr-advice-dot {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 1px solid var(--brand, #4caf82);
      position: relative;
      box-sizing: border-box;
    }
    .mobile-wr-advice-dot::after {
      content: '';
      position: absolute;
      width: 7px;
      height: 7px;
      left: 3px;
      top: 3px;
      border-radius: 50%;
      background: var(--brand, #4caf82);
    }
    /* 底部固定操作栏 */
    .mobile-wr-form-footer {
      position: sticky;
      bottom: 0;
      left: auto;
      right: auto;
      background: #fff;
      padding: 10px 12px 12px;
      display: flex; gap: 10px;
      box-shadow: 0 -2px 8px rgba(0,0,0,.06);
      z-index: 20;
      box-sizing: border-box;
    }
    .mobile-wr-form-footer .btn {
      flex: 1; padding: 10px 0;
      border-radius: 8px; border: none;
      font-size: 14px; font-weight: 500;
      cursor: pointer; text-align: center;
    }
    .mobile-wr-form-footer .btn:active { opacity: .8; }
    .mobile-wr-form-footer .btn-preview {
      background: #f5f5f5; color: #666;
    }
    .mobile-wr-form-footer .btn-save {
      background: #fff; color: var(--brand, #4caf82);
      border: 1px solid var(--brand, #4caf82);
    }
    .mobile-wr-form-footer .btn-publish {
      background: var(--brand, #4caf82); color: #fff;
    }

    /* ===== 移动端服务管理 ===== */
    .mobile-service-page {
      min-height: 100%;
      background: #f6f7f8;
      color: #20242a;
      padding-bottom: 10px;
    }
    .mobile-service-head {
      position: sticky;
      top: 0;
      z-index: 12;
      background: #fff;
      padding: 14px 14px 10px;
      box-shadow: 0 1px 0 rgba(0,0,0,.03);
    }
    .mobile-service-top {
      position: relative;
      display: grid;
      grid-template-columns: 44px 1fr 86px;
      align-items: center;
      min-height: 42px;
      gap: 8px;
    }
    .mobile-service-back {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #20242a;
      cursor: pointer;
    }
    .mobile-service-tabs {
      height: 38px;
      border-radius: 22px;
      background: #ededee;
      padding: 3px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
    }
    .mobile-service-tab {
      border-radius: 19px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #1f242c;
      cursor: pointer;
    }
    .mobile-service-tab.active {
      background: #fff;
      color: #28745f;
      box-shadow: 0 1px 5px rgba(15,23,42,.08);
    }
    .mobile-service-top-action {
      text-align: right;
      color: #20242a;
      font-size: 15px;
      font-weight: 500;
      white-space: nowrap;
      cursor: pointer;
    }
    .mobile-service-search-line {
      display: grid;
      grid-template-columns: 1fr 82px;
      gap: 10px;
      align-items: center;
      margin-top: 12px;
    }
    .mobile-service-search {
      height: 38px;
      border-radius: 20px;
      background: #f1f1f2;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      color: #9aa0a6;
    }
    .mobile-service-search input {
      border: none;
      outline: none;
      background: transparent;
      min-width: 0;
      flex: 1;
      font-size: 14px;
      color: #333;
    }
    .mobile-service-search input::placeholder { color: #a9a9a9; }
    .mobile-service-filter {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      font-size: 15px;
      color: #333;
      cursor: pointer;
    }
    .mobile-service-filter svg { color: #6f7378; }
    .mobile-service-layout {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      align-items: stretch;
      min-height: calc(100vh - 154px);
      padding-bottom: 94px;
    }
    .mobile-service-cats {
      background: #fff;
      border-right: 1px solid #edf0f2;
      padding: 8px 0 10px;
      overflow-y: auto;
    }
    .mobile-service-cat {
      min-height: 48px;
      padding: 8px 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #7b8087;
      font-size: 13px;
      line-height: 1.25;
      text-align: center;
      border-left: 3px solid transparent;
      cursor: pointer;
      box-sizing: border-box;
    }
    .mobile-service-cat.active {
      background: #eef9f3;
      color: #2f9b6a;
      border-left-color: #48bd83;
      font-weight: 800;
    }
    .mobile-service-cat.root {
      position: relative;
      font-weight: 700;
    }
    .mobile-service-cat.root.expanded::after {
      content: '';
      position: absolute;
      right: 8px;
      top: 50%;
      width: 6px;
      height: 6px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-65%) rotate(45deg);
      opacity: .45;
    }
    .mobile-service-cat.child {
      min-height: 38px;
      padding: 7px 7px 7px 14px;
      justify-content: flex-start;
      text-align: left;
      color: #8a8f98;
      font-size: 12px;
      background: #fff;
    }
    .mobile-service-cat.child::before {
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #cfd6d2;
      margin-right: 6px;
      flex: 0 0 auto;
    }
    .mobile-service-cat.child.active {
      background: #f3fbf7;
      color: #2f9b6a;
      border-left-color: #48bd83;
      font-weight: 800;
    }
    .mobile-service-cat.child.active::before {
      background: #48bd83;
    }
    .mobile-service-content { min-width: 0; }
    .mobile-service-list {
      padding: 8px 8px 0;
    }
    .mobile-service-card {
      background: #fff;
      min-height: 104px;
      margin-bottom: 9px;
      display: grid;
      grid-template-columns: 80px minmax(0, 1fr);
      gap: 9px;
      padding: 10px 9px;
      box-sizing: border-box;
      position: relative;
      border-radius: 6px;
      box-shadow: 0 1px 0 rgba(15,23,42,.03);
    }
    .mobile-service-card.print-mode {
      grid-template-columns: 22px 78px minmax(0, 1fr);
      align-items: center;
    }
    .mobile-service-check {
      width: 18px;
      height: 18px;
      accent-color: #4caf82;
    }
    .mobile-service-thumb {
      width: 80px;
      height: 80px;
      border-radius: 7px;
      overflow: hidden;
      position: relative;
      background: #d9d9d9;
      flex-shrink: 0;
    }
    .mobile-service-thumb.logo {
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,.75);
      font-weight: 900;
      font-size: 17px;
      letter-spacing: 1px;
      flex-direction: column;
    }
    .mobile-service-thumb.logo span:last-child {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 3px;
      margin-left: 4px;
      margin-top: 3px;
    }
    .mobile-service-thumb.dog {
      background: linear-gradient(180deg,#fff4cc 0%,#ffe2b8 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-service-thumb.dog::before {
      content: '狗狗精致修剪';
      position: absolute;
      top: 11px;
      left: 9px;
      right: 9px;
      color: #ef8bac;
      font-weight: 800;
      font-size: 11px;
      text-align: center;
      transform: rotate(-8deg);
    }
    .mobile-service-dog-face {
      width: 50px;
      height: 43px;
      border-radius: 48% 48% 46% 46%;
      background: #f4c05a;
      position: relative;
      margin-top: 20px;
    }
    .mobile-service-dog-face::before,
    .mobile-service-dog-face::after {
      content: '';
      position: absolute;
      width: 21px;
      height: 29px;
      border-radius: 50%;
      background: #e4a93e;
      top: 2px;
    }
    .mobile-service-dog-face::before { left: -13px; transform: rotate(-20deg); }
    .mobile-service-dog-face::after { right: -13px; transform: rotate(20deg); }
    .mobile-service-dog-face span {
      position: absolute;
      left: 50%;
      top: 24px;
      width: 34px;
      height: 16px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: #ffe2a5;
    }
    .mobile-service-status {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 23px;
      background: rgba(95,95,95,.58);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }
    .mobile-service-status.off {
      background: rgba(95,95,95,.78);
    }
    .mobile-service-info {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
    }
    .mobile-service-title {
      padding-right: 24px;
      font-size: 16px;
      color: #20242a;
      line-height: 1.25;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-service-pill {
      align-self: flex-start;
      max-width: 100%;
      height: 21px;
      border-radius: 12px;
      background: #eeeeef;
      color: #8a8a8a;
      font-size: 12px;
      padding: 0 9px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }
    .mobile-service-code,
    .mobile-service-count {
      font-size: 13px;
      color: #8a8a8a;
      white-space: nowrap;
    }
    .mobile-service-count strong {
      font-size: 18px;
      color: #222;
      margin-left: 2px;
      margin-right: 2px;
    }
    .mobile-service-price-row {
      display: flex;
      align-items: baseline;
      gap: 9px;
      white-space: nowrap;
    }
    .mobile-service-price {
      color: #df3033;
      font-size: 17px;
      font-weight: 800;
    }
    .mobile-service-member {
      color: #8a8a8a;
      font-size: 12px;
    }
    .mobile-service-more {
      position: absolute;
      right: 8px;
      top: 8px;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #8a8f98;
      font-size: 20px;
      line-height: 28px;
      padding: 0;
      cursor: pointer;
    }
    .mobile-service-footer {
      position: sticky;
      bottom: 0;
      z-index: 16;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      padding: 10px 12px 12px;
      background: linear-gradient(to top, #fff 78%, rgba(255,255,255,0));
      box-sizing: border-box;
    }
    .mobile-service-footer button {
      height: 50px;
      border-radius: 25px;
      border: none;
      font-size: 17px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-width: 0;
      white-space: nowrap;
    }
    .mobile-service-footer button svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
    }
    .mobile-service-footer .settings {
      background: #f0f3f4;
      color: #2f7d68;
    }
    .mobile-service-footer .category {
      background: #f0f3f4;
      color: #2f7d68;
    }
    .mobile-service-footer .add {
      background: linear-gradient(90deg,#55bc7c,#1f7658);
      color: #fff;
    }
    .mobile-service-footer-three {
      grid-template-columns: .92fr .98fr 1.1fr;
      gap: 7px;
      padding-left: 10px;
      padding-right: 10px;
    }
    .mobile-service-footer-three button {
      height: 48px;
      font-size: 14px;
    }
    .mobile-service-footer-single {
      display: flex;
      justify-content: center;
    }
    .mobile-service-footer-single .add {
      min-width: 170px;
    }
    .mobile-service-print-footer {
      grid-template-columns: 78px 1fr 126px;
      align-items: center;
    }
    .mobile-service-print-count {
      color: #4b5563;
      font-size: 15px;
      text-align: center;
      font-weight: 700;
    }
    .mobile-service-print-footer .cancel {
      background: #f3f4f5;
      color: #4b5563;
    }
    .mobile-service-empty {
      background: #fff;
      border-radius: 6px;
      min-height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      color: #9aa0a6;
      font-size: 14px;
    }
    .mobile-service-empty svg {
      color: #c6cbd1;
    }
    .mobile-service-sheet-mask {
      position: absolute;
      inset: 0;
      z-index: 60;
      background: rgba(15, 23, 42, .42);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: stretch;
    }
    .mobile-service-sheet {
      width: 100%;
      max-height: 84%;
      background: #fff;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      box-shadow: 0 -10px 28px rgba(15,23,42,.18);
      animation: mobileServiceSheetUp .2s ease-out;
      display: flex;
      flex-direction: column;
    }
    @keyframes mobileServiceSheetUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    .mobile-service-sheet-handle {
      display: flex;
      justify-content: center;
      padding: 10px 0 4px;
    }
    .mobile-service-sheet-handle span {
      width: 36px;
      height: 4px;
      border-radius: 3px;
      background: #d6dadd;
    }
    .mobile-service-sheet-head {
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      border-bottom: 1px solid #edf0f2;
    }
    .mobile-service-sheet-title {
      font-size: 17px;
      font-weight: 800;
      color: #20242a;
    }
    .mobile-service-sheet-close {
      width: 30px;
      height: 30px;
      border: none;
      background: #f3f4f5;
      border-radius: 50%;
      color: #6b7280;
      font-size: 20px;
      line-height: 30px;
      cursor: pointer;
    }
    .mobile-service-sheet-body {
      padding: 14px 16px 18px;
      overflow-y: auto;
      flex: 1 1 auto;
      min-height: 0;
      box-sizing: border-box;
    }
    .mobile-service-sheet-section {
      margin-bottom: 18px;
    }
    .mobile-service-sheet-label {
      font-size: 13px;
      color: #6f7378;
      font-weight: 700;
      margin-bottom: 9px;
    }
    .mobile-service-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mobile-service-chip {
      height: 32px;
      padding: 0 12px;
      border-radius: 17px;
      border: 1px solid #e3e7ea;
      background: #fff;
      color: #545b64;
      font-size: 13px;
      cursor: pointer;
    }
    .mobile-service-chip.active {
      color: #28745f;
      background: #eef9f3;
      border-color: #b8e6cd;
      font-weight: 700;
    }
    .mobile-service-sheet-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 0 16px 18px;
      flex-shrink: 0;
    }
    .mobile-service-sheet-btn {
      height: 44px;
      border: none;
      border-radius: 22px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
    }
    .mobile-service-sheet-btn.cancel {
      background: #f3f4f5;
      color: #4b5563;
    }
    .mobile-service-sheet-btn.primary {
      background: linear-gradient(90deg,#55bc7c,#1f7658);
      color: #fff;
    }
    .mobile-service-category-row {
      min-height: 54px;
      display: grid;
      grid-template-columns: 1fr 42px 42px;
      gap: 8px;
      align-items: center;
      border-bottom: 1px solid #f0f2f3;
    }
    .mobile-service-category-row strong {
      display: block;
      font-size: 15px;
      color: #20242a;
      margin-bottom: 3px;
    }
    .mobile-service-category-row span {
      font-size: 12px;
      color: #9aa0a6;
    }
    .mobile-service-category-row button,
    .mobile-service-action-list button {
      border: none;
      background: transparent;
      color: #28745f;
      font-size: 13px;
      cursor: pointer;
    }
    .mobile-service-category-row button.danger,
    .mobile-service-action-list button.danger {
      color: #df3033;
    }
    .mobile-service-form-grid {
      display: grid;
      gap: 12px;
    }
    .mobile-service-form-grid label {
      display: grid;
      gap: 6px;
      color: #555d66;
      font-size: 13px;
      font-weight: 700;
    }
    .mobile-service-sheet-section .mobile-service-form-two label {
      display: grid;
      gap: 6px;
      color: #555d66;
      font-size: 13px;
      font-weight: 700;
    }
    .mobile-service-form-grid input,
    .mobile-service-form-grid select,
    .mobile-service-sheet-section .mobile-service-form-two input {
      width: 100%;
      height: 38px;
      border: 1px solid #e3e7ea;
      border-radius: 8px;
      padding: 0 10px;
      box-sizing: border-box;
      font: inherit;
      color: #20242a;
      outline: none;
      background: #fff;
    }
    .mobile-service-form-grid input:focus,
    .mobile-service-form-grid select:focus,
    .mobile-service-sheet-section .mobile-service-form-two input:focus {
      border-color: #4caf82;
    }
    .mobile-service-parent-display {
      display: grid;
      gap: 6px;
    }
    .mobile-service-parent-label {
      color: #555d66;
      font-size: 13px;
      font-weight: 700;
    }
    .mobile-service-parent-card {
      min-height: 44px;
      border: 1px solid #e7ecef;
      border-radius: 10px;
      background: #f6f8f9;
      padding: 0 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      box-sizing: border-box;
    }
    .mobile-service-parent-card strong {
      min-width: 0;
      color: #20242a;
      font-size: 15px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-service-form-two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .mobile-service-action-summary {
      border-radius: 8px;
      background: #f6f8f9;
      padding: 12px;
      margin-bottom: 10px;
    }
    .mobile-service-action-summary strong {
      display: block;
      font-size: 16px;
      color: #20242a;
      margin-bottom: 5px;
    }
    .mobile-service-action-summary span {
      font-size: 12px;
      color: #7b8087;
    }
    .mobile-service-action-list {
      display: grid;
      gap: 2px;
    }
    .mobile-service-action-list button {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f0f2f3;
      color: #20242a;
      font-size: 15px;
      text-align: left;
      padding: 0;
    }
    .mobile-service-action-grid {
      gap: 10px;
    }
    .mobile-service-action-grid .mobile-service-action-button {
      min-height: 56px;
      height: auto;
      display: grid;
      grid-template-columns: 34px 1fr 18px;
      gap: 10px;
      align-items: center;
      border: 1px solid #e8edf0;
      border-radius: 12px;
      background: #fff;
      padding: 10px 12px;
      color: #20242a;
      font-size: 14px;
      font-weight: 700;
      box-sizing: border-box;
    }
    .mobile-service-action-grid .mobile-service-action-button .mobile-service-action-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eef3f1;
      color: #28745f;
      font-size: 18px;
      font-weight: 800;
    }
    .mobile-service-action-grid .mobile-service-action-button .mobile-service-action-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }
    .mobile-service-action-grid .mobile-service-action-button .mobile-service-action-copy strong {
      color: inherit;
      font-size: 15px;
      line-height: 1.2;
    }
    .mobile-service-action-grid .mobile-service-action-button .mobile-service-action-copy span {
      color: #7b8087;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.25;
    }
    .mobile-service-action-grid .mobile-service-action-button .mobile-service-action-arrow {
      color: #9aa0a6;
      font-size: 18px;
      font-weight: 700;
      justify-self: end;
    }
    .mobile-service-action-grid .mobile-service-action-button.add {
      background: #eef9f3;
      border-color: #bde7cf;
      color: #28745f;
    }
    .mobile-service-action-grid .mobile-service-action-button.add .mobile-service-action-icon {
      background: #d8f0e3;
    }
    .mobile-service-action-grid .mobile-service-action-button.edit {
      background: #f7f9fb;
      border-color: #e3e8ec;
      color: #334155;
    }
    .mobile-service-action-grid .mobile-service-action-button.edit .mobile-service-action-icon {
      background: #e9edf2;
      color: #536170;
      font-size: 14px;
    }
    .mobile-service-action-grid .mobile-service-action-button.danger {
      background: #fff4f4;
      border-color: #ffd4d4;
      color: #df3033;
    }
    .mobile-service-action-grid .mobile-service-action-button.danger .mobile-service-action-icon {
      background: #ffe1e1;
      color: #df3033;
      font-size: 14px;
    }
    .mobile-service-category-page {
      min-height: 100%;
      background: #f6f7f8;
      color: #20242a;
      padding-bottom: 104px;
      box-sizing: border-box;
    }
    .mobile-service-category-head {
      height: 76px;
      background: #fff;
      display: grid;
      grid-template-columns: 68px 1fr 76px;
      align-items: center;
      border-bottom: 1px solid #f0f2f4;
    }
    .mobile-service-category-back {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #30343a;
    }
    .mobile-service-category-title {
      text-align: center;
      font-size: 22px;
      font-weight: 500;
      color: #252a32;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-service-category-sort {
      border: none;
      background: transparent;
      color: #8a8a8a;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
    }
    .mobile-service-category-sort.active {
      color: #28745f;
      font-weight: 700;
    }
    .mobile-service-category-list {
      padding: 16px 12px 0;
      display: grid;
      gap: 13px;
    }
    .mobile-service-category-group {
      border-radius: 12px;
      background: #fff;
      overflow: hidden;
    }
    .mobile-service-category-group.menu-open {
      position: relative;
      z-index: 72;
      overflow: visible;
    }
    .mobile-service-category-menu-mask {
      position: absolute;
      inset: 0;
      z-index: 70;
      border: none;
      background: transparent;
      padding: 0;
      margin: 0;
      cursor: default;
    }
    .mobile-service-category-card {
      min-height: 76px;
      border-radius: 12px;
      background: #fff;
      display: grid;
      grid-template-columns: 1fr 42px 28px;
      align-items: center;
      gap: 6px;
      padding: 0 14px 0 16px;
      box-sizing: border-box;
      cursor: pointer;
    }
    .mobile-service-category-group .mobile-service-category-card {
      border-radius: 12px;
    }
    .mobile-service-category-group.expanded .mobile-service-category-card {
      border-radius: 12px 12px 0 0;
    }
    .mobile-service-category-card.sorting {
      grid-template-columns: 28px 1fr 42px 28px;
    }
    .mobile-service-category-drag {
      color: #b8bec5;
      font-size: 22px;
      line-height: 1;
    }
    .mobile-service-category-name {
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .mobile-service-category-name strong {
      font-size: 19px;
      font-weight: 500;
      color: #20242a;
      line-height: 1.25;
    }
    .mobile-service-category-name span {
      font-size: 12px;
      color: #9aa0a6;
    }
    .mobile-service-category-menu-wrap {
      position: relative;
      width: 36px;
      height: 36px;
    }
    .mobile-service-category-menu-wrap.open,
    .mobile-service-category-child.menu-open {
      z-index: 73;
    }
    .mobile-service-category-more {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 50%;
      background: #f4f6f7;
      color: #28745f;
      font-size: 19px;
      line-height: 36px;
      cursor: pointer;
    }
    .mobile-service-category-more.active {
      background: #e4f2eb;
      color: #1f7658;
    }
    .mobile-service-category-action-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: -8px;
      z-index: 74;
      width: 188px;
      padding: 4px 0;
      border: 1px solid #edf0f2;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(31, 41, 55, .18);
      box-sizing: border-box;
      animation: mobileServiceCategoryMenuDrop .16s ease-out;
      transform-origin: top right;
    }
    @keyframes mobileServiceCategoryMenuDrop {
      from { opacity: 0; transform: translateY(-7px) scale(.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .mobile-service-category-action-tip {
      position: absolute;
      top: -6px;
      right: 19px;
      width: 11px;
      height: 11px;
      border-top: 1px solid #edf0f2;
      border-left: 1px solid #edf0f2;
      background: #fff;
      transform: rotate(45deg);
    }
    .mobile-service-category-action-menu button {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 46px;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      border: none;
      background: #fff;
      padding: 0 16px;
      color: #30343a;
      font-size: 15px;
      text-align: left;
      cursor: pointer;
      box-sizing: border-box;
    }
    .mobile-service-category-action-menu button + button {
      border-top: 1px solid #f0f2f3;
    }
    .mobile-service-category-action-menu button:active {
      background: #f6f8f9;
    }
    .mobile-service-category-action-menu button.add {
      color: #28745f;
    }
    .mobile-service-category-action-menu button.danger {
      color: #df3033;
    }
    .mobile-service-category-action-menu svg {
      width: 21px;
      height: 21px;
    }
    .mobile-service-category-action-menu span {
      white-space: nowrap;
    }
    .mobile-service-category-chevron {
      color: #969ca3;
      font-size: 34px;
      font-weight: 300;
      line-height: 1;
      text-align: right;
      transition: transform .16s ease;
    }
    .mobile-service-category-group.expanded .mobile-service-category-chevron {
      transform: rotate(90deg);
    }
    .mobile-service-category-children {
      margin: 0 14px 14px;
      padding: 4px 0 8px;
      border-top: 1px solid #eef1f3;
    }
    .mobile-service-category-child {
      min-height: 52px;
      display: grid;
      grid-template-columns: 1fr 38px;
      gap: 8px;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid #f1f3f4;
      box-sizing: border-box;
    }
    .mobile-service-category-child:last-child {
      border-bottom: none;
    }
    .mobile-service-category-child-name {
      min-width: 0;
      display: grid;
      gap: 2px;
      padding-left: 8px;
      position: relative;
    }
    .mobile-service-category-child-name::before {
      content: '';
      position: absolute;
      left: 0;
      top: 11px;
      width: 3px;
      height: 18px;
      border-radius: 2px;
      background: #d6e9df;
    }
    .mobile-service-category-child-name strong {
      color: #20242a;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.25;
    }
    .mobile-service-category-child-name span {
      color: #9aa0a6;
      font-size: 12px;
    }
    .mobile-service-category-empty {
      min-height: 180px;
      border-radius: 12px;
      background: #fff;
      color: #9aa0a6;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      font-size: 14px;
    }
    .mobile-service-category-foot {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 18;
      padding: 14px 28px 20px;
      background: linear-gradient(to top, #f6f7f8 78%, rgba(246,247,248,0));
      box-sizing: border-box;
    }
    .mobile-service-category-add {
      width: 100%;
      height: 56px;
      border: none;
      border-radius: 30px;
      background: linear-gradient(90deg,#56b879,#2e7657);
      color: #fff;
      font-size: 18px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .mobile-service-category-add svg {
      width: 18px;
      height: 18px;
    }
    .mobile-boarding-cats {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 10px 12px 2px;
      scrollbar-width: none;
    }
    .mobile-boarding-cats::-webkit-scrollbar { display: none; }
    .mobile-boarding-cat {
      flex: 0 0 auto;
      height: 30px;
      padding: 0 12px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #e6ebe8;
      color: #626a66;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-boarding-cat.active {
      background: #eaf8f1;
      border-color: #b9e2cc;
      color: #26865d;
      font-weight: 700;
    }
    .mobile-boarding-list { padding: 10px 12px 96px; }
    .mobile-boarding-card {
      background: #fff;
      border: 1px solid #edf1ee;
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 10px;
      box-shadow: 0 2px 8px rgba(17, 24, 39, .035);
    }
    .mobile-boarding-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }
    .mobile-boarding-title { min-width: 0; }
    .mobile-boarding-title strong {
      display: block;
      color: #20242a;
      font-size: 16px;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-boarding-title span {
      display: block;
      margin-top: 3px;
      color: #9aa0a6;
      font-size: 12px;
    }
    .mobile-boarding-status {
      flex-shrink: 0;
      min-width: 48px;
      height: 24px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #eaf8f1;
      color: #2f9b6a;
      font-size: 12px;
      font-weight: 700;
    }
    .mobile-boarding-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px 10px;
      margin-top: 8px;
    }
    .mobile-boarding-meta div {
      min-width: 0;
      color: #8a8f98;
      font-size: 12px;
      line-height: 1.35;
    }
    .mobile-boarding-meta strong {
      display: block;
      margin-top: 2px;
      color: #2f343b;
      font-size: 13px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-boarding-price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #f0f2f4;
    }
    .mobile-boarding-price {
      color: #df3033;
      font-size: 18px;
      font-weight: 800;
    }
    .mobile-boarding-price small { font-size: 12px; font-weight: 600; }
    .mobile-boarding-member { color: #8a8f98; font-size: 12px; }
    .mobile-boarding-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 10px;
    }
    .mobile-boarding-actions button {
      height: 28px;
      padding: 0 11px;
      border-radius: 15px;
      border: 1px solid rgba(48,155,106,.55);
      color: #2f9b6a;
      background: #fff;
      font-size: 12px;
    }
    .mobile-boarding-head-title {
      text-align: center;
      color: #20242a;
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
    }
    .mobile-boarding-list-inline {
      padding: 8px 8px 0;
    }
    .mobile-boarding-card.compact {
      border: none;
      border-radius: 6px;
      margin-bottom: 9px;
      padding: 8px;
      box-shadow: 0 1px 0 rgba(15,23,42,.03);
      position: relative;
    }
    .mobile-boarding-card.compact.print-mode {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }
    .mobile-boarding-card-body {
      min-width: 0;
    }
    .mobile-boarding-card-main {
      min-width: 0;
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 9px;
      align-items: stretch;
    }
    .mobile-boarding-thumb {
      height: 82px;
      border-radius: 7px;
      background: #eeeeef;
      overflow: hidden;
      position: relative;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-boarding-thumb.pet {
      background: linear-gradient(180deg,#ffc6cd 0%,#ffe0de 100%);
    }
    .mobile-boarding-thumb.logo {
      background: #f4f4f4;
      color: rgba(170,170,170,.62);
      flex-direction: column;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 1px;
    }
    .mobile-boarding-thumb-logo-sub {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 3px;
      margin-left: 4px;
      margin-top: 2px;
    }
    .mobile-boarding-thumb-label {
      position: absolute;
      left: 10px;
      top: 8px;
      min-height: 20px;
      border-radius: 12px;
      background: rgba(232,83,91,.82);
      color: #fff;
      padding: 0 8px;
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 800;
    }
    .mobile-boarding-thumb-pets {
      font-size: 36px;
      line-height: 1;
      transform: translateY(10px);
      letter-spacing: -12px;
      margin-right: 10px;
    }
    .mobile-boarding-thumb-status {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 22px;
      background: rgba(76,76,76,.48);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
    }
    .mobile-boarding-card.compact .mobile-boarding-card-head {
      display: block;
      padding-right: 20px;
      margin-bottom: 6px;
    }
    .mobile-boarding-more {
      position: absolute;
      right: 8px;
      top: 8px;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #8a8f98;
      font-size: 20px;
      line-height: 28px;
      padding: 0;
      cursor: pointer;
    }
    .mobile-boarding-remain-pill {
      max-width: 70px;
      height: 22px;
      border-radius: 12px;
      background: #dff5e9;
      color: #279a67;
      padding: 0 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      box-sizing: border-box;
    }
    .mobile-boarding-code-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 4px;
      align-items: center;
      margin-top: 4px;
    }
    .mobile-boarding-code-row .mobile-boarding-line {
      margin-top: 0;
      font-size: 12px;
    }
    .mobile-boarding-line {
      color: #8a8f98;
      font-size: 13px;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 5px;
    }
    .mobile-boarding-card-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 8px;
      margin-top: 6px;
    }
    .mobile-boarding-card-grid div {
      min-width: 0;
      color: #8a8f98;
      font-size: 12px;
      line-height: 1.3;
    }
    .mobile-boarding-card-grid strong {
      display: block;
      margin-top: 2px;
      color: #20242a;
      font-size: 13px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-boarding-card.compact .mobile-boarding-price-row {
      justify-content: flex-start;
      gap: 4px;
      margin-top: 8px;
      padding-top: 0;
      border-top: none;
      white-space: nowrap;
    }
    .mobile-boarding-card.compact .mobile-boarding-price {
      font-size: 16px;
    }
    .mobile-boarding-card.compact .mobile-boarding-member {
      font-size: 11px;
    }
    .mobile-boarding-card.compact .mobile-boarding-status.off {
      background: #f1f2f3;
      color: #6b7280;
    }
    .mobile-boarding-setting-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      border-bottom: 1px solid #f0f2f3;
      padding: 10px 0;
    }
    .mobile-boarding-setting-row strong {
      display: block;
      color: #20242a;
      font-size: 14px;
      margin-bottom: 3px;
    }
    .mobile-boarding-setting-row span {
      color: #8a8f98;
      font-size: 12px;
    }
    .mobile-service-settings-page {
      min-height: 100%;
      background: #f6f7f8;
      color: #20242a;
      padding-bottom: 10px;
    }
    .mobile-service-settings-head {
      position: sticky;
      top: 0;
      z-index: 14;
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      align-items: center;
      min-height: 52px;
      padding: 8px 14px;
      background: #fff;
      box-shadow: 0 1px 0 rgba(15,23,42,.05);
      box-sizing: border-box;
    }
    .mobile-service-settings-back {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #20242a;
      cursor: pointer;
    }
    .mobile-service-settings-title {
      text-align: center;
      font-size: 18px;
      font-weight: 800;
    }
    .mobile-service-settings-body {
      padding: 12px 12px 92px;
      box-sizing: border-box;
    }
    .mobile-service-settings-section {
      background: #fff;
      border-radius: 8px;
      padding: 14px 12px;
      margin-bottom: 10px;
      box-sizing: border-box;
    }
    .mobile-service-settings-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
      font-size: 16px;
      font-weight: 800;
      color: #20242a;
    }
    .mobile-service-settings-add {
      border: none;
      background: transparent;
      color: #2f8f72;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      padding: 0;
    }
    .mobile-service-settings-template-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 12px;
    }
    .mobile-service-settings-template {
      min-width: 0;
      min-height: 96px;
      padding: 11px 10px;
      border: 1px solid #e7eaee;
      border-radius: 8px;
      background: #fbfcfd;
      text-align: left;
      cursor: pointer;
      box-sizing: border-box;
    }
    .mobile-service-settings-template.active {
      border-color: #41ae80;
      background: #f0fbf5;
      box-shadow: inset 0 0 0 1px rgba(65,174,128,.18);
    }
    .mobile-service-settings-template-name {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 7px;
      color: #20242a;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.2;
    }
    .mobile-service-settings-template-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #c5ccd3;
      flex-shrink: 0;
    }
    .mobile-service-settings-template.active .mobile-service-settings-template-dot {
      background: #37a875;
      box-shadow: 0 0 0 4px rgba(55,168,117,.12);
    }
    .mobile-service-settings-template-desc {
      color: #7b828b;
      font-size: 12px;
      line-height: 1.45;
    }
    .mobile-service-settings-panel {
      border: 1px solid #edf0f2;
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      box-sizing: border-box;
    }
    .mobile-service-settings-panel-title {
      font-size: 14px;
      font-weight: 800;
      color: #20242a;
      margin-bottom: 5px;
    }
    .mobile-service-settings-panel-desc {
      color: #7a828b;
      font-size: 12px;
      line-height: 1.55;
    }
    .mobile-service-settings-hour-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 7px;
      margin-top: 12px;
    }
    .mobile-service-settings-hour {
      height: 30px;
      border-radius: 6px;
      background: #f4f6f7;
      color: #57606a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      white-space: nowrap;
    }
    .mobile-service-settings-capacity {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      color: #444b53;
      font-size: 13px;
      flex-wrap: wrap;
    }
    .mobile-service-settings-capacity input {
      width: 52px;
      height: 32px;
      border: 1px solid #dfe4e8;
      border-radius: 6px;
      text-align: center;
      font-size: 15px;
      color: #20242a;
      outline: none;
    }
    .mobile-service-settings-note {
      width: 100%;
      color: #98a0a8;
      font-size: 12px;
      line-height: 1.5;
    }
    .mobile-service-settings-custom-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .mobile-service-settings-custom-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mobile-service-settings-slot {
      display: grid;
      grid-template-columns: 1fr 74px 34px;
      gap: 8px;
      align-items: center;
      padding: 10px;
      background: #f8fafb;
      border: 1px solid #edf0f2;
      border-radius: 8px;
      box-sizing: border-box;
    }
    .mobile-service-settings-time {
      display: grid;
      grid-template-columns: 1fr 20px 1fr;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .mobile-service-settings-time span {
      text-align: center;
      color: #8c949c;
      font-size: 12px;
    }
    .mobile-service-settings-select,
    .mobile-service-settings-count {
      width: 100%;
      height: 32px;
      border: 1px solid #dfe4e8;
      border-radius: 6px;
      background: #fff;
      color: #20242a;
      font-size: 13px;
      outline: none;
      box-sizing: border-box;
    }
    .mobile-service-settings-select {
      padding: 0 4px;
    }
    .mobile-service-settings-count {
      text-align: center;
    }
    .mobile-service-settings-delete {
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 16px;
      background: #fff1f1;
      color: #d94747;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .mobile-service-settings-radio-line {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .mobile-service-settings-radio {
      height: 44px;
      border: 1px solid #e1e5e9;
      border-radius: 8px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #4e565f;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
    }
    .mobile-service-settings-radio.active {
      border-color: #42ad7d;
      background: #effaf4;
      color: #27785f;
    }
    .mobile-service-settings-radio-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #c7cdd3;
      box-sizing: border-box;
    }
    .mobile-service-settings-radio.active .mobile-service-settings-radio-dot {
      border-color: #37a875;
      box-shadow: inset 0 0 0 3px #fff;
      background: #37a875;
    }
    .mobile-service-settings-advice-head {
      display: grid;
      grid-template-columns: 54px 1fr 54px;
      gap: 8px;
      height: 34px;
      align-items: center;
      padding: 0 10px;
      background: #f5f7f8;
      color: #7b838c;
      font-size: 12px;
      font-weight: 700;
      border-radius: 7px;
    }
    .mobile-service-settings-empty {
      min-height: 92px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #a0a8b0;
      font-size: 13px;
    }
    .mobile-service-settings-empty svg {
      width: 72px;
      height: 48px;
    }
    .mobile-service-settings-footer {
      position: sticky;
      bottom: 0;
      z-index: 16;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 10px 12px 12px;
      background: linear-gradient(to top, #fff 78%, rgba(255,255,255,0));
      box-sizing: border-box;
    }
    .mobile-service-settings-footer button {
      height: 48px;
      border: none;
      border-radius: 24px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
    }
    .mobile-service-settings-footer .cancel {
      background: #f0f3f4;
      color: #52606b;
    }
    .mobile-service-settings-footer .save {
      background: linear-gradient(90deg,#55bc7c,#1f7658);
      color: #fff;
    }

    /* ===== 移动端服务预约 ===== */
    .mobile-sb-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px; background: var(--brand, #4caf82); color: #fff;
    }
    .mobile-sb-header-left { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
    .mobile-sb-header-tabs {
      display: flex; align-items: center; gap: 4px;
      background: rgba(255,255,255,.25); border-radius: 20px;
      padding: 3px; margin: 0 auto;
    }
    .mobile-sb-header-tab {
      padding: 5px 16px; border-radius: 17px; font-size: 14px;
      color: rgba(255,255,255,.85); cursor: pointer; transition: all .2s;
      white-space: nowrap;
    }
    .mobile-sb-header-tab.active {
      background: #fff; color: var(--brand, #4caf82); font-weight: 600;
      box-shadow: 0 2px 6px rgba(0,0,0,.1);
    }
    .mobile-sb-search-bar {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px; background: var(--brand, #4caf82);
    }
    .mobile-sb-search-input {
      flex: 1; display: flex; align-items: center;
      background: #fff; border-radius: 20px; padding: 8px 14px; gap: 8px;
    }
    .mobile-sb-search-input input {
      flex: 1; border: none; outline: none; font-size: 13px;
      background: transparent; color: #333;
    }
    .mobile-sb-search-input input::placeholder { color: #bbb; }
    .mobile-sb-status-tabs {
      display: flex; padding: 0 16px; background: #fff;
      border-bottom: 1px solid #f0f0f0; overflow-x: auto; gap: 0;
    }
    .mobile-sb-status-tabs::-webkit-scrollbar { display: none; }
    .mobile-sb-status-tab {
      flex-shrink: 0; padding: 12px 14px; font-size: 13px; color: #999;
      cursor: pointer; border-bottom: 2px solid transparent;
      white-space: nowrap; transition: all .15s; font-weight: 500;
    }
    .mobile-sb-status-tab.active { color: var(--brand, #4caf82); border-bottom-color: var(--brand, #4caf82); }
    .mobile-sb-list { padding: 10px 16px 24px; }
    .mobile-sb-card {
      background: #fff; border-radius: 12px; padding: 14px 16px;
      margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .mobile-sb-card-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .mobile-sb-order-no {
      font-size: 13px; font-weight: 600; color: #333;
      display: flex; align-items: center; gap: 6px;
    }
    .mobile-sb-expired-tag {
      font-size: 10px; padding: 1px 6px; background: #fff3e0; color: #e67e22;
      border-radius: 3px; font-weight: 500;
    }
    .mobile-sb-status {
      font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 500;
    }
    .mobile-sb-status.pending_confirm { background: #fff8e1; color: #f59e0b; }
    .mobile-sb-status.pending { background: #e3f2fd; color: #1976d2; }
    .mobile-sb-status.serving { background: #e8f5e9; color: #388e3c; }
    .mobile-sb-status.completed { background: #f5f5f5; color: #999; }
    .mobile-sb-status.cancelled { background: #fce4ec; color: #c62828; }
    .mobile-sb-card-body { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
    .mobile-sb-info-row {
      display: flex; align-items: flex-start; gap: 8px; font-size: 12px;
    }
    .mobile-sb-info-row .label { color: #aaa; min-width: 56px; flex-shrink: 0; }
    .mobile-sb-info-row .value { color: #555; }
    .mobile-sb-card-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 12px; border-top: 1px solid #f0f0f0;
    }
    .mobile-sb-time-info { font-size: 11px; color: #bbb; }
    .mobile-sb-card-actions { display: flex; gap: 8px; }
    .mobile-sb-act-btn {
      font-size: 12px; padding: 6px 14px; border-radius: 6px;
      border: 1px solid #e0e0e0; background: #fff; color: #666;
      cursor: pointer; transition: all .15s; white-space: nowrap;
    }
    .mobile-sb-act-btn:active { transform: scale(.96); }
    .mobile-sb-act-btn.confirm { color: var(--brand, #4caf82); border-color: var(--brand, #4caf82); }
    .mobile-sb-act-btn.start { color: #1976d2; border-color: #1976d2; background: #e3f2fd; }
    .mobile-sb-act-btn.complete { color: #388e3c; border-color: #388e3c; background: #e8f5e9; }
    .mobile-sb-act-btn.report { color: #7c3aed; border-color: #7c3aed; background: #f3e8ff; }
    .mobile-sb-act-btn.cancel { color: #999; border-color: #ddd; }
    .mobile-sb-act-btn.view { color: #666; border-color: #ccc; }
    .mobile-sb-act-btn.edit { color: #1976d2; border-color: #1976d2; }
    .mobile-sb-fab {
      position: fixed; bottom: 76px; right: 20px;
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--brand, #4caf82); color: #fff;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 14px rgba(76,175,130,.4);
      cursor: pointer; border: none; font-size: 26px; z-index: 50;
    }
    .mobile-sb-fab:active { transform: scale(.92); }
    .mobile-sb-bottom-btn {
      flex-shrink: 0;
      padding: 10px 16px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
      background: #fff; border-top: 1px solid #f0f0f0;
    }
    .mobile-sb-bottom-btn button {
      width: 100%; padding: 13px 0; border-radius: 24px;
      background: var(--brand, #4caf82); color: #fff;
      border: none; font-size: 15px; font-weight: 600;
      cursor: pointer; box-shadow: 0 2px 8px rgba(76,175,130,.3);
    }
    .mobile-sb-bottom-btn button:active { transform: scale(.98); opacity: .92; }
    /* ===== 移动端通用 Toast 提示 ===== */
    .mobile-toast-wrap {
      position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
      z-index: 99999; display: flex; flex-direction: column; align-items: center; gap: 8px;
      pointer-events: none; width: 80%; max-width: 320px;
    }
    .mobile-toast-item {
      pointer-events: auto;
      background: rgba(0,0,0,.78); color: #fff; padding: 10px 20px; border-radius: 10px;
      font-size: 14px; text-align: center; line-height: 1.5;
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
      animation: mobileToastIn .3s ease forwards;
      white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    }
    .mobile-toast-item.out { animation: mobileToastOut .25s ease forwards; }
    .mobile-toast-item.success { background: rgba(46,125,91,.92); }
    .mobile-toast-item.error { background: rgba(211,47,47,.92); }
    .mobile-toast-item.warning { background: rgba(230,126,34,.92); }
    @keyframes mobileToastIn { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
    @keyframes mobileToastOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-16px); } }
    /* ===== 移动端通用确认弹窗 ===== */
    .mobile-confirm-mask {
      position: fixed; top:0; left:0; right:0; bottom:0;
      background: rgba(0,0,0,.45); z-index: 99998;
      display: flex; align-items: center; justify-content: center;
      animation: fadeIn .2s ease;
    }
    .mobile-confirm-box {
      background: #fff; border-radius: 16px; width: 80%; max-width: 300px;
      overflow: hidden; animation: mobileConfirmIn .25s ease;
    }
    .mobile-confirm-title {
      font-size: 16px; font-weight: 600; text-align: center;
      padding: 24px 20px 8px; color: #1a1a1a;
    }
    .mobile-confirm-msg {
      font-size: 14px; color: #666; text-align: center;
      padding: 4px 20px 20px; line-height: 1.6;
    }
    .mobile-confirm-btns {
      display: flex; border-top: 1px solid #f0f0f0;
    }
    .mobile-confirm-btn {
      flex: 1; padding: 14px 0; text-align: center; font-size: 16px;
      cursor: pointer; border: none; background: none;
    }
    .mobile-confirm-btn.cancel { color: #999; }
    .mobile-confirm-btn.ok { color: var(--brand, #4caf82); font-weight: 600; }
    .mobile-confirm-btn.ok.danger { color: #d32f2f; }
    @keyframes mobileConfirmIn { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    /* 摄像头标签 */
    .mobile-sb-cam-tag {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; padding: 4px 10px; border-radius: 6px;
      background: #e8f5ef; color: #2e7d5b; cursor: pointer; font-weight: 500;
    }
    .mobile-sb-cam-tag:active { background: #d0ead8; }
    .mobile-sb-cam-tag.none {
      background: #f5f5f5; color: #bbb; border: 1px dashed #ddd; cursor: default;
    }
    .mobile-sb-cam-tag.playback {
      background: #e8eef6; color: #4a6fa5;
    }
    .mobile-sb-cam-tag.playback:active { background: #d8e2f0; }
    .mobile-sb-cam-dot {
      width: 6px; height: 6px; border-radius: 50%; background: var(--brand, #4caf82);
      display: inline-block; animation: mobile-cam-blink 1.5s infinite;
    }
    @keyframes mobile-cam-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: .3; }
    }
    /* 摄像头弹窗 Tab */
    .mobile-sb-cam-tab {
      flex: 1; text-align: center; padding: 10px 0; font-size: 13px;
      color: #999; cursor: pointer; border-bottom: 2px solid transparent;
      font-weight: 500; transition: all .15s;
    }
    .mobile-sb-cam-tab.active { color: var(--brand, #4caf82); border-bottom-color: var(--brand, #4caf82); }
    /* 摄像头列表 */
    .mobile-sb-cam-list { display: flex; flex-direction: column; gap: 8px; }
    .mobile-sb-cam-list-item {
      display: flex; align-items: center; padding: 12px; border: 1px solid #eee;
      border-radius: 10px; cursor: pointer; transition: all .15s;
    }
    .mobile-sb-cam-list-item:active { background: #f8f8f8; }
    .mobile-sb-cam-list-item.selected { border-color: var(--brand, #4caf82); background: #f0faf5; }
    .mobile-sb-cam-list-item.selected .mobile-sb-cam-item-icon { background: var(--brand, #4caf82); color: #fff; }
    .mobile-sb-cam-item-icon {
      width: 36px; height: 36px; border-radius: 8px; background: #f0f0f0;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; margin-right: 10px; flex-shrink: 0; transition: all .15s;
    }
    .mobile-sb-cam-item-info { flex: 1; }
    .mobile-sb-cam-item-name { font-size: 13px; font-weight: 500; color: #333; }
    .mobile-sb-cam-item-code { font-size: 11px; color: #bbb; margin-top: 2px; font-family: monospace; }
    .mobile-sb-cam-item-status {
      font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500;
    }
    .mobile-sb-cam-item-status.online { background: #e8f5ef; color: #2e7d5b; }
    .mobile-sb-cam-item-status.offline { background: #f5f5f5; color: #bbb; }
    /* 实时视频区 */
    .mobile-sb-cam-video-area {
      width: 100%; height: 200px; background: #0d1117; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .mobile-sb-cam-video-placeholder { color: #4a5568; text-align: center; }
    .mobile-sb-cam-live-badge {
      position: absolute; top: 10px; left: 10px;
      background: rgba(232,88,88,.9); color: #fff;
      font-size: 10px; font-weight: 600; padding: 2px 8px;
      border-radius: 3px; display: flex; align-items: center; gap: 4px;
    }
    .mobile-sb-cam-live-dot {
      width: 5px; height: 5px; border-radius: 50%; background: #fff;
      animation: mobile-cam-blink 1s infinite;
    }

    /* ===== 移动端摄像头管理 ===== */
    .mobile-cam-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px; background: var(--brand, #4caf82);
      color: #fff; font-size: 16px; font-weight: 600;
    }
    .mobile-cam-header-left { display: flex; align-items: center; gap: 8px; }
    .mobile-cam-header-right { display: flex; align-items: center; gap: 12px; }
    .mobile-cam-perm-btn {
      font-size: 13px; color: #fff; background: rgba(255,255,255,.18);
      border: none; border-radius: 14px; padding: 5px 12px; cursor: pointer;
    }
    .mobile-cam-search-bar {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px; background: var(--brand, #4caf82);
    }
    .mobile-cam-search-input {
      flex: 1; display: flex; align-items: center;
      background: #fff; border-radius: 20px; padding: 8px 14px; gap: 8px;
    }
    .mobile-cam-search-input input {
      flex: 1; border: none; outline: none; font-size: 13px;
      background: transparent; color: #333;
    }
    .mobile-cam-search-input input::placeholder { color: #bbb; }
    .mobile-cam-filter-btn {
      display: flex; align-items: center; gap: 4px;
      font-size: 13px; color: #fff; background: rgba(255,255,255,.18);
      border: none; border-radius: 20px; padding: 8px 14px; cursor: pointer;
      white-space: nowrap;
    }
    .mobile-cam-filter-btn.active { background: rgba(255,255,255,.35); }
    .mobile-cam-list { padding: 12px 16px 80px; }
    .mobile-cam-card {
      background: #fff; border-radius: 12px; padding: 14px 16px;
      margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .mobile-cam-card-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .mobile-cam-card-name {
      font-size: 15px; font-weight: 600; color: #333;
      display: flex; align-items: center; gap: 6px;
    }
    .mobile-cam-status {
      font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 500;
    }
    .mobile-cam-status.online { background: #e8f5ef; color: #2e7d5b; }
    .mobile-cam-status.offline { background: #f2f4f3; color: #999; }
    .mobile-cam-card-info {
      display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
    }
    .mobile-cam-info-row {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; color: #888;
    }
    .mobile-cam-info-row .label { color: #aaa; min-width: 36px; }
    .mobile-cam-info-row .value { color: #555; font-family: monospace; }
    .mobile-cam-info-row .value.text { font-family: inherit; }
    .mobile-cam-card-actions {
      display: flex; gap: 8px; padding-top: 12px;
      border-top: 1px solid #f0f0f0;
    }
    .mobile-cam-act-btn {
      flex: 1; font-size: 12px; padding: 7px 0; border-radius: 6px;
      border: 1px solid #e0e0e0; background: #fff; color: #666;
      cursor: pointer; text-align: center; transition: all .15s;
    }
    .mobile-cam-act-btn:active { transform: scale(.96); }
    .mobile-cam-act-btn.enable { color: var(--brand, #4caf82); border-color: var(--brand, #4caf82); background: #f0faf5; }
    .mobile-cam-act-btn.edit { color: #3b82f6; border-color: #3b82f6; background: #eff6ff; }
    .mobile-cam-act-btn.disable { color: #f59e0b; border-color: #f59e0b; background: #fffbeb; }
    .mobile-cam-act-btn.delete { color: #ef4444; border-color: #ef4444; background: #fef2f2; }
    .mobile-cam-fab {
      position: fixed; bottom: 76px; right: 20px;
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--brand, #4caf82); color: #fff;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 14px rgba(76,175,130,.4);
      cursor: pointer; border: none; font-size: 26px; z-index: 50;
    }
    .mobile-cam-fab:active { transform: scale(.92); }
    /* 摄像头弹窗 */
    .mobile-cam-modal-mask {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,.45); z-index: 200;
      display: flex; align-items: flex-end; justify-content: center;
    }
    .mobile-sb-cam-modal-mask {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,.45); z-index: 200;
      display: flex; align-items: flex-end; justify-content: center;
    }
    .mobile-cam-modal-sheet {
      background: #fff; border-radius: 16px 16px 0 0;
      width: 100%; max-width: 420px; padding: 0 0 env(safe-area-inset-bottom);
      animation: cam-sheet-up .25s ease-out;
    }
    @keyframes cam-sheet-up {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    .mobile-cam-modal-handle {
      display: flex; justify-content: center; padding: 10px 0 4px;
    }
    .mobile-cam-modal-handle span {
      width: 36px; height: 4px; background: #ddd; border-radius: 2px;
    }
    .mobile-cam-modal-title {
      font-size: 16px; font-weight: 600; color: #333;
      text-align: center; padding: 6px 0 16px;
    }
    .mobile-cam-modal-body { padding: 0 20px 20px; }
    .mobile-cam-form-group {
      margin-bottom: 14px;
    }
    .mobile-cam-form-label {
      font-size: 13px; font-weight: 500; color: #555; margin-bottom: 6px; display: block;
    }
    .mobile-cam-form-input {
      width: 100%; padding: 10px 14px; border: 1px solid #e5e5e5;
      border-radius: 8px; font-size: 14px; outline: none;
      transition: border-color .15s; box-sizing: border-box;
    }
    .mobile-cam-form-input:focus { border-color: var(--brand, #4caf82); }
    .mobile-cam-form-textarea {
      width: 100%; padding: 10px 14px; border: 1px solid #e5e5e5;
      border-radius: 8px; font-size: 14px; outline: none; resize: none;
      height: 80px; box-sizing: border-box; font-family: inherit;
    }
    .mobile-cam-form-textarea:focus { border-color: var(--brand, #4caf82); }
    .mobile-cam-modal-actions {
      display: flex; gap: 10px; padding: 0 20px 20px;
    }
    .mobile-cam-modal-btn {
      flex: 1; padding: 12px 0; border-radius: 10px; font-size: 14px;
      font-weight: 500; border: none; cursor: pointer; text-align: center;
    }
    .mobile-cam-modal-btn.cancel { background: #f5f5f5; color: #666; }
    .mobile-cam-modal-btn.confirm { background: var(--brand, #4caf82); color: #fff; }
    .mobile-cam-modal-btn:active { opacity: .8; }
    /* 删除确认弹窗 */
    .mobile-cam-confirm-body {
      text-align: center; padding: 20px 20px 10px;
    }
    .mobile-cam-confirm-icon { font-size: 44px; margin-bottom: 10px; }
    .mobile-cam-confirm-text { font-size: 14px; color: #555; line-height: 1.6; }
    .mobile-cam-confirm-name { color: #333; font-weight: 600; }
    /* 权限弹窗 */
    .mobile-cam-perm-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 0; border-bottom: 1px solid #f0f0f0;
    }
    .mobile-cam-perm-item:last-child { border-bottom: none; }
    .mobile-cam-perm-info {}
    .mobile-cam-perm-title { font-size: 14px; font-weight: 500; color: #333; }
    .mobile-cam-perm-desc { font-size: 12px; color: #999; margin-top: 4px; line-height: 1.6; }
    .mobile-cam-toggle {
      position: relative; width: 44px; height: 24px; flex-shrink: 0;
    }
    .mobile-cam-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .mobile-cam-toggle-slider {
      position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
      background: #d0d5de; border-radius: 24px; transition: .25s;
    }
    .mobile-cam-toggle-slider::before {
      content: ''; position: absolute; height: 20px; width: 20px;
      left: 2px; bottom: 2px; background: #fff; border-radius: 50%;
      transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
    .mobile-cam-toggle input:checked + .mobile-cam-toggle-slider { background: var(--brand, #4caf82); }
    .mobile-cam-toggle input:checked + .mobile-cam-toggle-slider::before { transform: translateX(20px); }

    /* ===== 移动端收银台 ===== */
    .mobile-cashier { background: #f5f5f5; min-height: 100%; display: flex; flex-direction: column; }
    .mobile-cashier-header {
      background: #3d4550;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 22px; height: 48px; flex-shrink: 0;
    }
    .mobile-cashier-header .back {
      width: 102px; height: 36px; display: flex; align-items: center; justify-content: flex-start; gap: 4px; cursor: pointer;
      color: #fff; font-size: 15px; white-space: nowrap;
    }
    .mobile-cashier-header .back svg { stroke: #fff; }
    .mobile-cashier-header .title { font-size: 20px; font-weight: 500; color: #fff; letter-spacing: 0; }
    .mobile-cashier-header .right-btn { width: 102px; text-align: right; font-size: 15px; color: #fff; cursor: pointer; white-space: nowrap; }
    .mobile-cashier-hero {
      background: #3d4550;
      padding-bottom: 25px;
      position: relative;
      flex-shrink: 0;
    }
    .mobile-cashier-actions {
      width: 300px;
      height: 64px;
      display: flex; gap: 7px; padding: 9px 10px 0; background: rgba(255,255,255,.22);
      border: 1px solid rgba(105, 222, 183, .55);
      border-radius: 8px 8px 0 0;
      margin: 0 auto;
      box-sizing: border-box;
      overflow: hidden;
    }
    .mobile-cashier-btn {
      flex: 1; height: 28px; border-radius: 15px; font-size: 13px;
      display: flex; align-items: center; justify-content: center; gap: 3px;
      cursor: pointer; font-weight: 500; white-space: nowrap; padding: 0 8px;
      border: none;
    }
    .mobile-cashier-btn.green {
      background: linear-gradient(90deg, #34d4bb, #2bcf94); color: #fff;
    }
    .mobile-cashier-btn.orange {
      background: linear-gradient(135deg, #f4b45c, #dfa052);
      color: #fff; border: none;
    }
    .mobile-cashier-btn.blue {
      background: linear-gradient(135deg, #5b9df5, #4a8de5);
      color: #fff; border: none;
    }
    .mobile-cashier-member {
      background: linear-gradient(110deg, #ffe9a9 0%, #ffd06e 45%, #f1a43e 100%);
      margin: -38px 20px 0; border-radius: 8px;
      padding: 15px 16px; display: flex; align-items: center; justify-content: space-between;
      position: relative;
      min-height: 78px;
      box-shadow: 0 6px 16px rgba(159, 102, 24, .14);
      overflow: hidden;
      color: #9a5809;
      z-index: 2;
    }
    .mobile-cashier-member::before {
      content: '';
      position: absolute;
      top: -46px;
      left: 122px;
      width: 128px;
      height: 190px;
      transform: rotate(34deg);
      background: rgba(255,255,255,.18);
      border-radius: 80px;
    }
    .mobile-cashier-member-left { display: flex; align-items: center; gap: 12px; }
    .mobile-cashier-member-avatar {
      width: 42px; height: 42px; border-radius: 50%; background: #fff;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid rgba(255,255,255,.4);
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }
    .mobile-cashier-member-avatar img { width: 28px; height: 28px; }
    .mobile-cashier-member-info {}
    .mobile-cashier-member-name { position: relative; z-index: 1; font-size: 16px; font-weight: 600; color: #9a5809; display: flex; align-items: center; gap: 4px; }
    .mobile-cashier-member-name svg { stroke: #9a5809; width: 14px; height: 14px; }
    .mobile-cashier-member-tag {
      display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #9a5809;
      background: transparent; border: none;
      padding: 0; border-radius: 0; margin-top: 6px;
      position: relative; z-index: 1;
    }
    .mobile-cashier-member-balance { position: relative; z-index: 1; font-size: 14px; color: #9a5809; text-align: right; line-height: 1.45; }
    .mobile-cashier-member-balance span { font-size: 28px; font-weight: 700; color: #b16608; }
    .mobile-cashier-member-balance .benefits { display: block; font-size: 12px; color: #9a5809; }
    .mobile-cashier-member-close {
      position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      color: #fff; font-size: 16px; background: rgba(124, 85, 30, .42); border-radius: 50%;
      z-index: 3;
    }
    .mobile-cashier-barcode {
      display: flex; gap: 8px; padding: 10px 12px; background: #fff;
      align-items: center; margin: 10px 12px 0; border-radius: 0 0 10px 10px;
    }
    .mobile-cashier-barcode-input {
      flex: 1; display: flex; align-items: center; gap: 6px;
      background: #f5f5f5; border-radius: 18px; padding: 0 12px; height: 36px;
    }
    .mobile-cashier-barcode-input svg { color: #999; flex-shrink: 0; }
    .mobile-cashier-barcode-input input {
      border: none; background: transparent; outline: none; font-size: 13px; width: 100%;
    }
    .mobile-cashier-barcode-input input::placeholder { color: #bbb; }
    .mobile-cashier-barcode-btn {
      height: 36px; padding: 0 16px; border-radius: 18px; border: none;
      background: #f0f0f0; color: #666; font-size: 13px; cursor: pointer;
    }
    .mobile-cashier-barcode-btn.scan { background: #f0f0f0; color: #666; }
    .mobile-cashier-tabs {
      display: flex; gap: 10px; padding: 10px 12px; background: #fff;
      margin-top: 8px;
    }
    .mobile-cashier-tab {
      flex: 1; height: 34px; border-radius: 17px; border: 1px solid #ddd;
      background: #fff; font-size: 13px; color: #555; cursor: pointer;
      display: flex; align-items: center; justify-content: center; position: relative;
    }
    .mobile-cashier-tab .badge {
      position: absolute; top: -4px; right: 6px;
      background: #ff4d4f; color: #fff; font-size: 10px; min-width: 16px; height: 16px;
      border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
    }
    .mobile-cashier-list-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 12px 8px;
    }
    .mobile-cashier-list-header .title { font-size: 14px; font-weight: 700; color: #333; }
    .mobile-cashier-list-header .title span { font-size: 12px; font-weight: 400; color: #999; margin-left: 4px; }
    .mobile-cashier-list-header .clear { font-size: 12px; color: #999; border: 1px solid #ddd; padding: 3px 10px; border-radius: 12px; background: #fff; cursor: pointer; }
    .mobile-cashier-item {
      background: #fff; margin: 0 12px 10px; border-radius: 10px; padding: 12px;
    }
    .mobile-cashier-item-main { display: flex; gap: 10px; }
    .mobile-cashier-item-thumb {
      width: 60px; height: 60px; border-radius: 6px; background: #f5f5f5;
      display: flex; align-items: center; justify-content: center; font-size: 28px;
      flex-shrink: 0; overflow: hidden;
    }
    .mobile-cashier-item-info { flex: 1; min-width: 0; }
    .mobile-cashier-item-name { font-size: 14px; font-weight: 600; color: #333; line-height: 1.4; }
    .mobile-cashier-item-spec { font-size: 11px; color: #999; margin-top: 3px; }
    .mobile-cashier-item-price { font-size: 16px; font-weight: 700; color: #ff4d4f; margin-top: 4px; }
    .mobile-cashier-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
    .mobile-cashier-item-tags { display: flex; gap: 4px; }
    .mobile-cashier-item-tag {
      width: 22px; height: 22px; border-radius: 50%; font-size: 11px;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .mobile-cashier-item-tag.big { background: #e8f5e9; color: var(--brand, #4caf82); }
    .mobile-cashier-item-tag.split { background: #e6f7ff; color: #1890ff; }
    .mobile-cashier-item-tag.gift { background: #fff3e0; color: #f0a030; }
    .mobile-cashier-item-tag.del { background: #fff1f0; color: #ff4d4f; }
    .mobile-cashier-qty {
      display: flex; align-items: center; gap: 0; border: 1px solid #ddd; border-radius: 4px; overflow: hidden;
    }
    .mobile-cashier-qty button {
      width: 28px; height: 28px; border: none; background: #f8f8f8; font-size: 16px; color: #666; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .mobile-cashier-qty span {
      width: 32px; text-align: center; font-size: 14px; color: #333; border-left: 1px solid #eee; border-right: 1px solid #eee;
      line-height: 28px;
    }
    .mobile-cashier-item-attrs {
      display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
    }
    .mobile-cashier-item-attr {
      font-size: 11px; color: #999; background: #f8f8f8; padding: 3px 10px; border-radius: 12px;
    }
    .mobile-cashier-footer {
      position: sticky; bottom: 0; background: #fff; border-top: 1px solid #eee;
      padding: 8px 12px; display: flex; align-items: center; justify-content: space-between;
    }
    .mobile-cashier-footer-left {}
    .mobile-cashier-footer-amount { font-size: 13px; color: #666; }
    .mobile-cashier-footer-amount .price { font-size: 22px; font-weight: 700; color: #ff4d4f; }
    .mobile-cashier-footer-sub { font-size: 11px; color: #999; margin-top: 2px; }
    .mobile-cashier-footer-sub svg { width: 12px; height: 12px; vertical-align: -1px; margin-left: 2px; }
    .mobile-cashier-footer-right { display: flex; gap: 8px; }
    .mobile-cashier-footer-btn {
      height: 40px; padding: 0 24px; border-radius: 20px; border: none;
      font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .mobile-cashier-footer-btn.hold { background: #f5f5f5; color: #666; }
    .mobile-cashier-footer-btn.pay { background: var(--brand, #4caf82); color: #fff; }

    .mobile-cashier-sheet-overlay {
      position: absolute; inset: 0; z-index: 120;
      background: rgba(0,0,0,.56);
      display: flex; align-items: flex-end;
    }
    .mobile-cashier-action-sheet {
      width: 100%; background: #fff; border-radius: 10px 10px 0 0;
      overflow: hidden; box-shadow: 0 -10px 28px rgba(0,0,0,.16);
      animation: mobileCashierSheetUp .18s ease-out;
    }
    @keyframes mobileCashierSheetUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    .mobile-cashier-sheet-head {
      height: 60px; display: flex; align-items: center; justify-content: space-between;
      padding: 0 18px; border-bottom: 1px solid #edf0f2;
      font-size: 17px; color: #2f343a;
    }
    .mobile-cashier-sheet-head button {
      border: none; background: transparent; font-size: 17px; color: #2d7e62;
      padding: 0; cursor: pointer;
    }
    .mobile-cashier-sheet-head .cancel { color: #333942; }
    .mobile-cashier-sheet-space { height: 96px; border-bottom: 1px solid #edf0f2; }
    .mobile-cashier-sheet-options { padding: 10px 0 36px; text-align: center; }
    .mobile-cashier-sheet-option {
      height: 42px; display: flex; align-items: center; justify-content: center;
      font-size: 20px; color: #a9adb3; cursor: pointer;
    }
    .mobile-cashier-sheet-option.active { font-size: 24px; color: #262a30; }

    .mobile-consume-record-page {
      min-height: 100%; background: #f5f6f8; color: #252a31;
      display: flex; flex-direction: column;
    }
    .mobile-consume-record-header {
      height: 54px; background: #fff; display: grid; grid-template-columns: 48px 1fr 48px;
      align-items: center; border-bottom: 1px solid #f0f1f3; flex-shrink: 0;
    }
    .mobile-consume-record-back {
      width: 44px; height: 44px; margin-left: 3px;
      display: flex; align-items: center; justify-content: center; color: #252a31; cursor: pointer;
    }
    .mobile-consume-record-title { text-align: center; font-size: 19px; font-weight: 500; }
    .mobile-consume-record-main { padding: 9px 12px 0; }
    .mobile-consume-record-search-box {
      height: 38px; border-radius: 20px; background: #eceef0; color: #999fa7;
      display: flex; align-items: center; gap: 8px; padding: 0 12px; box-sizing: border-box;
    }
    .mobile-consume-record-search-box svg { flex-shrink: 0; color: #969ca4; }
    .mobile-consume-record-search-box input {
      min-width: 0; flex: 1; border: none; outline: none; background: transparent;
      color: #333942; font: inherit; font-size: 14px;
    }
    .mobile-consume-record-search-box input::placeholder { color: #9ba1aa; }
    .mobile-consume-record-summary {
      margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    }
    .mobile-consume-record-stat {
      min-height: 70px; padding: 9px 4px 7px; box-sizing: border-box;
      border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(34,41,47,.11);
      display: flex; flex-direction: column; align-items: center; justify-content: space-between;
      white-space: nowrap;
    }
    .mobile-consume-record-stat strong { color: #353a41; font-size: 18px; font-weight: 600; }
    .mobile-consume-record-stat strong small { font-size: 12px; font-weight: 500; margin-right: 1px; }
    .mobile-consume-record-stat span { color: #5f646b; font-size: 11px; }
    .mobile-consume-record-filter {
      width: 100%; height: 54px; padding: 0 4px; border: none; background: transparent;
      display: flex; align-items: center; gap: 18px; color: #33383f; cursor: pointer; text-align: left;
    }
    .mobile-consume-record-filter span { font-size: 14px; }
    .mobile-consume-record-filter strong { font-size: 15px; font-weight: 400; }
    .mobile-consume-record-filter svg { margin-left: -13px; }
    .mobile-consume-record-orders {
      background: #fff; border-top: 1px solid #f0f1f3;
    }
    .mobile-consume-record-order-row {
      min-height: 72px; margin: 0 14px; display: grid;
      grid-template-columns: 40px minmax(0,1fr) auto 12px; gap: 6px; align-items: center;
      border-bottom: 1px solid #e7e9ec; cursor: pointer;
    }
    .mobile-consume-record-order-row.hidden { display: none; }
    .mobile-consume-record-store {
      width: 38px; height: 38px; border-radius: 7px; background: #fffdf2;
      display: flex; align-items: center; justify-content: center; font-size: 22px;
    }
    .mobile-consume-record-order-info { min-width: 0; }
    .mobile-consume-record-order-title {
      min-width: 0; display: flex; align-items: center; gap: 4px;
      color: #30353b; font-size: 12px; white-space: nowrap;
    }
    .mobile-consume-record-order-title span {
      min-width: 0; overflow: hidden; text-overflow: ellipsis;
    }
    .mobile-consume-record-order-title em {
      flex-shrink: 0; padding: 2px 4px; border-radius: 3px;
      background: #ff9d2c; color: #fff; font-size: 10px; font-style: normal;
    }
    .mobile-consume-record-order-time { margin-top: 5px; color: #999fa7; font-size: 12px; }
    .mobile-consume-record-order-total { color: #30353b; font-size: 14px; white-space: nowrap; }
    .mobile-consume-record-order-arrow { color: #8e949b; font-size: 22px; line-height: 1; }
    .mobile-consume-record-empty {
      display: none; min-height: 110px; align-items: center; justify-content: center;
      color: #a0a5ad; font-size: 14px;
    }
    .mobile-consume-record-empty.show { display: flex; }

    .mobile-member-card-page,
    .mobile-member-recharge-page {
      min-height: 100%; background: #f7f8fa; color: #252a31;
      display: flex; flex-direction: column;
    }
    .mobile-member-header {
      height: 56px; background: #fff; display: grid; grid-template-columns: 48px 1fr 48px;
      align-items: center; border-bottom: 1px solid #f0f1f3; flex-shrink: 0;
    }
    .mobile-member-back {
      width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
      margin-left: 6px; color: #252a31; cursor: pointer;
    }
    .mobile-member-back svg { width: 24px; height: 24px; }
    .mobile-member-header-title { text-align: center; font-size: 20px; font-weight: 500; }
    .mobile-member-body { padding: 12px 12px 96px; }
    .mobile-member-gold-card {
      height: 114px; border-radius: 7px; overflow: hidden; position: relative;
      background: linear-gradient(110deg, #ffe6a8 0%, #ffc86d 55%, #f0a43a 100%);
      color: #965206; padding: 17px 15px; margin-bottom: 12px;
      box-shadow: 0 8px 18px rgba(235, 166, 58, .16);
    }
    .mobile-member-gold-card::before,
    .mobile-member-gold-card::after {
      content: ''; position: absolute; width: 135px; height: 210px; top: -46px;
      border-radius: 80px; transform: rotate(32deg);
      background: rgba(255,255,255,.18);
    }
    .mobile-member-gold-card::before { left: 158px; }
    .mobile-member-gold-card::after { right: -16px; background: rgba(255,255,255,.1); }
    .mobile-member-card-name {
      position: relative; z-index: 1; font-size: 18px; font-weight: 600; letter-spacing: 0;
    }
    .mobile-member-card-rule {
      position: absolute; left: 15px; bottom: 18px; z-index: 1; font-size: 13px; color: #9b650e;
    }
    .mobile-member-card-amount {
      position: absolute; right: 15px; top: 27px; z-index: 1;
      font-size: 26px; line-height: 1; font-weight: 700; color: #9b5708;
    }
    .mobile-member-card-amount .yen { font-size: 13px; margin-right: 3px; font-weight: 500; }
    .mobile-member-record-btn {
      position: absolute; right: 15px; bottom: 18px; z-index: 1;
      height: 29px; min-width: 78px; border-radius: 16px; border: none;
      background: rgba(255,255,255,.78); color: #9b5708; font-size: 14px; cursor: pointer;
    }
    .mobile-member-info-card {
      background: #fff; border-radius: 8px; margin-bottom: 12px; padding: 0 12px;
      box-shadow: 0 3px 12px rgba(15,23,42,.025);
    }
    .mobile-member-info-row {
      min-height: 54px; display: grid; grid-template-columns: 104px 1fr; align-items: center;
      border-bottom: 1px solid #f0f1f3; font-size: 15px;
    }
    .mobile-member-info-row:last-child { border-bottom: none; }
    .mobile-member-info-row .label { font-weight: 600; color: #252a31; }
    .mobile-member-info-row .value { color: #252a31; }
    .mobile-member-section-title {
      font-size: 18px; font-weight: 700; padding: 16px 0 6px;
    }
    .mobile-member-fixedbar {
      flex-shrink: 0; background: rgba(255,255,255,.96); border-top: 1px solid #edf0f2;
      padding: 10px 12px 12px; display: grid; grid-template-columns: 86px minmax(0,1fr);
      gap: 10px; align-items: center;
    }
    .mobile-member-more,
    .mobile-member-primary {
      height: 44px; border: none; border-radius: 23px; font-size: 16px; font-weight: 600;
      cursor: pointer;
    }
    .mobile-member-more { background: #f1f4f4; color: #2a7d64; }
    .mobile-member-primary {
      background: linear-gradient(90deg, #48b778 0%, #26714e 100%); color: #fff;
    }

    .mobile-member-recharge-body { padding: 12px 12px 86px; }
    .mobile-member-recharge-card {
      border-radius: 7px; background: linear-gradient(110deg, #ffe6a8 0%, #ffc56a 55%, #efa53a 100%);
      color: #9b5708; padding: 15px 14px 13px; margin-bottom: 12px; position: relative; overflow: hidden;
    }
    .mobile-member-recharge-card::before,
    .mobile-member-recharge-card::after {
      content: ''; position: absolute; width: 125px; height: 190px; top: -42px;
      border-radius: 80px; transform: rotate(32deg); background: rgba(255,255,255,.18);
    }
    .mobile-member-recharge-card::before { left: 170px; }
    .mobile-member-recharge-card::after { right: -12px; background: rgba(255,255,255,.1); }
    .mobile-member-recharge-card-title { position: relative; z-index: 1; font-size: 18px; font-weight: 600; margin-bottom: 12px; }
    .mobile-member-recharge-stats {
      position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    }
    .mobile-member-recharge-stat {
      min-height: 50px; border-radius: 4px; background: rgba(255,255,255,.28);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-size: 12px; color: #9b5708;
    }
    .mobile-member-recharge-stat strong { display: block; margin-top: 5px; font-size: 18px; line-height: 1; }
    .mobile-member-recharge-form-card {
      background: #fff; border-radius: 8px; padding: 0 12px 16px; margin-bottom: 12px;
      box-shadow: 0 3px 12px rgba(15,23,42,.025);
    }
    .mobile-member-form-row {
      min-height: 46px; display: grid; grid-template-columns: 118px minmax(0,1fr);
      align-items: center; border-bottom: 1px solid #f0f1f3; font-size: 14px;
    }
    .mobile-member-form-row:last-child { border-bottom: none; }
    .mobile-member-form-label { font-weight: 600; color: #252a31; }
    .mobile-member-form-label.required::before { content: '*'; color: #ef4444; margin-right: 2px; }
    .mobile-member-form-value {
      color: #252a31; min-width: 0; display: flex; align-items: center; justify-content: space-between;
      gap: 8px; line-height: 1.3;
    }
    .mobile-member-money-input {
      width: 100%; border: none; outline: none; text-align: right; font-size: 18px;
      color: #252a31; font-family: inherit; background: transparent;
    }
    .mobile-member-gift-toggle { display: flex; justify-content: flex-end; gap: 12px; width: 100%; }
    .mobile-member-gift-pill {
      width: 72px; height: 28px; border-radius: 15px; border: 1px solid #2c7d65;
      background: #fff; color: #2c7d65; font-size: 14px; display: flex; align-items: center; justify-content: center;
    }
    .mobile-member-gift-pill.muted { border: none; background: #f1f1f1; color: #42464d; }
    .mobile-member-remark {
      grid-column: 1 / -1; margin-top: 10px; height: 74px; border: none; border-radius: 4px;
      background: #f4f2f4; padding: 12px; resize: none; font-size: 14px; font-family: inherit; outline: none;
    }
    .mobile-member-pay-card,
    .mobile-member-setting-card {
      background: #fff; border-radius: 8px; padding: 18px 12px 16px; margin-bottom: 12px;
      box-shadow: 0 3px 12px rgba(15,23,42,.025);
    }
    .mobile-member-card-heading { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: #252a31; }
    .mobile-member-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .mobile-member-pay-pill {
      height: 36px; border-radius: 20px; border: none; background: #f1f1f1;
      color: #252a31; font-size: 14px;
    }
    .mobile-member-setting-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .mobile-member-print-combo {
      height: 38px; border: 1px solid #9bdabc; border-radius: 21px; background: #effaf5; color: #55b889;
      padding: 0; display: grid; grid-template-columns: minmax(0,1fr) 56px; overflow: hidden;
      font-size: 14px; cursor: pointer;
    }
    .mobile-member-print-combo span {
      display: flex; align-items: center; justify-content: center;
    }
    .mobile-member-print-combo .preview {
      border-left: 1px solid #9bdabc; font-size: 13px;
    }
    .mobile-benefit-print-combo {
      grid-template-columns: minmax(0,1fr) 46px;
      font-size: 13px;
    }
    .mobile-benefit-print-combo .preview { font-size: 12px; }
    .mobile-member-sms-pill {
      height: 38px; border-radius: 21px; border: none; background: #f1f1f1;
      color: #252a31; font-size: 14px;
    }
    .mobile-member-recharge-footer {
      flex-shrink: 0; background: rgba(255,255,255,.96); border-top: 1px solid #edf0f2;
      padding: 10px 12px 12px; display: flex; justify-content: center;
    }
    .mobile-member-recharge-submit {
      width: 200px; height: 44px; border: none; border-radius: 23px;
      background: linear-gradient(90deg, #48b778 0%, #26714e 100%); color: #fff;
      font-size: 16px; font-weight: 600; cursor: pointer;
    }

    /* 移动端团购验券页面 */
    .mobile-gb-page { background: #f5f5f5; min-height: 100%; display: flex; flex-direction: column; }
    .mobile-gb-header {
      background: #3d4550; display: flex; align-items: center; justify-content: space-between;
      padding: 0 12px; height: 46px; flex-shrink: 0;
    }
    .mobile-gb-header .back { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .mobile-gb-header .back svg { stroke: #fff; }
    .mobile-gb-header .title { font-size: 16px; font-weight: 600; color: #fff; }
    .mobile-gb-header .right { width: 36px; }
    .mobile-gb-body { flex: 1; overflow-y: auto; padding: 12px; }
    .mobile-gb-input-wrap {
      display: flex; gap: 8px; margin-bottom: 12px;
    }
    .mobile-gb-input-wrap .mobile-gb-input-box {
      flex: 1; position: relative; display: flex; align-items: center;
    }
    .mobile-gb-input-wrap input {
      width: 100%; height: 40px; border: 1px solid #ddd; border-radius: 8px;
      padding: 0 38px 0 12px; font-size: 14px; outline: none;
    }
    .mobile-gb-input-wrap input:focus { border-color: var(--brand, #4caf82); }
    .mobile-gb-input-wrap .mobile-gb-scan-btn {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      width: 28px; height: 28px; border-radius: 6px; border: none;
      background: transparent; color: #888; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      padding: 0;
    }
    .mobile-gb-input-wrap .mobile-gb-scan-btn:active { background: #eee; }
    .mobile-gb-input-wrap button {
      height: 40px; padding: 0 18px; border-radius: 8px; border: none;
      background: var(--brand, #4caf82); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
    }

    /* 扫码弹窗 */
    .mobile-scan-overlay {
      position: fixed; inset: 0; z-index: 20000;
      background: #000; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
    }
    .mobile-scan-header {
      position: absolute; top: 0; left: 0; right: 0; height: 46px;
      display: flex; align-items: center; padding: 0 12px; z-index: 1;
    }
    .mobile-scan-header .back {
      width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .mobile-scan-header .back svg { stroke: #fff; }
    .mobile-scan-title { color: #fff; font-size: 16px; font-weight: 600; margin-left: 4px; }
    .mobile-scan-frame {
      width: 220px; height: 220px; border: 2px solid rgba(76,175,130,0.6);
      border-radius: 12px; position: relative; overflow: hidden;
    }
    .mobile-scan-frame::before,
    .mobile-scan-frame::after,
    .mobile-scan-frame .corner-tl,
    .mobile-scan-frame .corner-tr,
    .mobile-scan-frame .corner-bl,
    .mobile-scan-frame .corner-br {
      position: absolute; width: 18px; height: 18px; border-color: var(--brand, #4caf82);
      border-style: solid; content: '';
    }
    .mobile-scan-frame::before { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
    .mobile-scan-frame::after  { top: -2px; right: -2px; border-width: 3px 3px 0 0; }
    .mobile-scan-frame .corner-bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; }
    .mobile-scan-frame .corner-br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; }
    .mobile-scan-line {
      position: absolute; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--brand, #4caf82), transparent);
      box-shadow: 0 0 8px var(--brand, #4caf82);
      animation: mobile-scan-move 2s linear infinite;
    }
    @keyframes mobile-scan-move {
      0%   { top: 0; opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }
    .mobile-scan-hint {
      color: rgba(255,255,255,0.7); font-size: 13px; margin-top: 20px; text-align: center;
    }
    .mobile-gb-status {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 40px 20px; color: #999; font-size: 14px; text-align: center;
    }
    .mobile-gb-status svg { width: 48px; height: 48px; color: #d9d9d9; margin-bottom: 8px; }
    .mobile-gb-result-card {
      background: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 10px;
    }
    .mobile-gb-result-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 12px; background: #f8f8f8; border-bottom: 1px solid #eee;
    }
    .mobile-gb-result-title { font-size: 14px; font-weight: 600; color: #333; }
    .mobile-gb-result-badge {
      font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #e8f5e9; color: var(--brand, #4caf82);
    }
    .mobile-gb-result-badge.pick { background: #fff7e6; color: #fa8c16; }
    .mobile-gb-item {
      display: flex; align-items: center; gap: 10px; padding: 10px 12px;
      border-bottom: 1px solid #f5f5f5;
    }
    .mobile-gb-item:last-child { border-bottom: none; }
    .mobile-gb-item-emoji { font-size: 20px; width: 28px; text-align: center; }
    .mobile-gb-item-info { flex: 1; min-width: 0; }
    .mobile-gb-item-name { font-size: 13px; color: #333; font-weight: 500; }
    .mobile-gb-item-sub { font-size: 11px; color: #999; margin-top: 1px; }
    .mobile-gb-item-price { font-size: 13px; color: #666; white-space: nowrap; }
    .mobile-gb-item-price .zero { color: var(--brand, #4caf82); font-weight: 600; }
    .mobile-gb-pick-label {
      font-size: 13px; font-weight: 600; color: #333; padding: 10px 12px 6px;
    }
    .mobile-gb-pick-label span { font-size: 12px; color: #999; font-weight: 400; }
    .mobile-gb-pick-option {
      display: flex; align-items: center; gap: 8px; padding: 8px 12px;
      border-bottom: 1px solid #f5f5f5; cursor: pointer;
    }
    .mobile-gb-pick-option:last-child { border-bottom: none; }
    .mobile-gb-pick-option.selected { background: #f0faf4; }
    .mobile-gb-pick-radio {
      width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ddd;
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    }
    .mobile-gb-pick-option.selected .mobile-gb-pick-radio { border-color: var(--brand, #4caf82); }
    .mobile-gb-pick-option.selected .mobile-gb-pick-radio::after {
      content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brand, #4caf82);
    }
    .mobile-gb-source { font-size: 12px; color: #999; padding: 0 12px 8px; }
    .mobile-gb-footer {
      display: flex; gap: 10px; padding: 10px 12px; background: #fff;
      border-top: 1px solid #eee; flex-shrink: 0;
    }
    .mobile-gb-footer button {
      flex: 1; height: 42px; border-radius: 8px; border: none;
      font-size: 14px; font-weight: 500; cursor: pointer;
    }
    .mobile-gb-footer .mobile-gb-btn-cancel { background: #f5f5f5; color: #666; }
    .mobile-gb-footer .mobile-gb-btn-confirm { background: var(--brand, #4caf82); color: #fff; }
    .mobile-gb-footer .mobile-gb-btn-confirm:disabled { background: #bfbfbf; cursor: not-allowed; }

    /* ===== 移动端订单列表页 ===== */
    .mobile-ord-page { background: #f5f5f5; min-height: 100%; display: flex; flex-direction: column; }
    .mobile-ord-header {
      background: #3d4550; display: flex; align-items: center; justify-content: space-between;
      padding: 0 12px; height: 46px; flex-shrink: 0;
    }
    .mobile-ord-header .back { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .mobile-ord-header .back svg { stroke: #fff; }
    .mobile-ord-header .title { font-size: 16px; font-weight: 600; color: #fff; }
    .mobile-ord-header .print { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .mobile-ord-header .print svg { stroke: #fff; }
    .mobile-ord-main-tabs {
      display: flex; background: #fff; border-bottom: 1px solid #eee;
    }
    .mobile-ord-main-tab {
      flex: 1; text-align: center; padding: 10px 0; font-size: 14px; color: #666;
      position: relative; cursor: pointer;
    }
    .mobile-ord-main-tab.active { color: var(--brand, #4caf82); font-weight: 600; }
    .mobile-ord-main-tab.active::after {
      content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 2px;
      background: var(--brand, #4caf82); border-radius: 2px;
    }
    .mobile-ord-search {
      display: flex; align-items: center; background: #fff; padding: 8px 12px; gap: 8px;
      border-bottom: 1px solid #eee;
    }
    .mobile-ord-search svg { color: #bbb; flex-shrink: 0; }
    .mobile-ord-search input {
      flex: 1; border: none; font-size: 14px; outline: none; color: #333;
      background: transparent;
    }
    .mobile-ord-search input::placeholder { color: #bbb; }
    .mobile-ord-status-tabs {
      display: flex; background: #fff; padding: 0 12px; gap: 16px;
      overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #eee;
    }
    .mobile-ord-status-tabs::-webkit-scrollbar { display: none; }
    .mobile-ord-status-tab {
      padding: 10px 0; font-size: 13px; color: #666; white-space: nowrap;
      position: relative; cursor: pointer;
    }
    .mobile-ord-status-tab.active { color: var(--brand, #4caf82); font-weight: 600; }
    .mobile-ord-status-tab .badge {
      position: absolute; top: 4px; right: -10px; width: 7px; height: 7px;
      background: #e53935; border-radius: 50%; border: 1.5px solid #fff;
    }
    .mobile-ord-filter {
      display: flex; align-items: center; justify-content: space-between;
      background: #fff; padding: 8px 12px; font-size: 13px; color: #666;
      border-bottom: 1px solid #eee;
    }
    .mobile-ord-stats {
      display: grid; grid-template-columns: repeat(4, 1fr); background: #fff;
      padding: 10px 12px; border-bottom: 1px solid #eee;
    }
    .mobile-ord-stat-item { text-align: center; }
    .mobile-ord-stat-val { font-size: 15px; font-weight: 700; color: #333; }
    .mobile-ord-stat-label { font-size: 11px; color: #999; margin-top: 2px; }
    .mobile-ord-stat-label svg { width: 12px; height: 12px; vertical-align: middle; margin-left: 2px; color: #ccc; }
    .mobile-ord-list { padding: 8px 12px; }
    .mobile-ord-card {
      background: #fff; border-radius: 10px; padding: 12px; margin-bottom: 8px;
    }
    .mobile-ord-card-top {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
    }
    .mobile-ord-card-no {
      font-size: 13px; color: #666; display: flex; align-items: center; gap: 6px;
    }
    .mobile-ord-card-tag {
      font-size: 11px; padding: 1px 6px; border-radius: 4px;
      border: 1px solid #ddd; color: #999;
    }
    .mobile-ord-card-status {
      font-size: 13px; color: var(--brand, #4caf82); font-weight: 600;
    }
    .mobile-ord-card-time {
      font-size: 12px; color: #999; margin-bottom: 8px;
    }
    .mobile-ord-card-user {
      display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
    }
    .mobile-ord-card-user svg { color: #ccc; }
    .mobile-ord-card-user-name { font-size: 13px; color: #333; }
    .mobile-ord-card-sales {
      font-size: 12px; color: #999; margin-left: auto;
    }
    .mobile-ord-card-goods {
      display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    }
    .mobile-ord-card-imgs {
      display: flex; gap: 6px; flex: 1;
    }
    .mobile-ord-card-img {
      width: 52px; height: 52px; border-radius: 6px; background: #f5f5f5;
      display: flex; align-items: center; justify-content: center; font-size: 24px;
      overflow: hidden; flex-shrink: 0; position: relative;
    }
    .mobile-ord-card-img .gb-tag {
      position: absolute; top: 0; left: 0; font-size: 9px; background: #fff7e6;
      color: #fa8c16; padding: 1px 4px; border-radius: 0 0 4px 0;
    }
    .mobile-ord-card-total {
      text-align: right;
    }
    .mobile-ord-card-price { font-size: 16px; font-weight: 700; color: #333; }
    .mobile-ord-card-count { font-size: 12px; color: #999; }
    .mobile-ord-card-actions {
      display: flex; justify-content: flex-end; gap: 8px;
    }
    .mobile-ord-card-actions button {
      padding: 5px 16px; border-radius: 14px; font-size: 13px; cursor: pointer;
      border: 1px solid var(--brand, #4caf82); color: var(--brand, #4caf82);
      background: #fff;
    }

    /* ===== 移动端售后中心 ===== */
    .mobile-after-sale-page {
      min-height: 100%; background: #f6f7f9; display: flex; flex-direction: column;
      color: #20242a;
    }
    .mobile-after-sale-top {
      height: 60px; background: #fff; display: flex; align-items: center;
      padding: 0 16px; gap: 12px; flex-shrink: 0;
      border-bottom: 1px solid #eef0f2;
    }
    .mobile-after-sale-back {
      width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
      color: #1f2329; cursor: pointer; flex-shrink: 0;
    }
    .mobile-after-sale-main-tabs {
      flex: 1; height: 38px; background: #eef0f1; border-radius: 9px;
      display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px;
    }
    .mobile-after-sale-main-tab {
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px; font-size: 15px; color: #444; font-weight: 500;
    }
    .mobile-after-sale-main-tab.active {
      background: #fff; color: var(--brand, #4caf82); font-weight: 700;
      box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    }
    .mobile-after-sale-search-wrap { background: #fff; padding: 14px 14px 10px; }
    .mobile-after-sale-search {
      height: 42px; border-radius: 22px; background: #f5f6f7;
      display: flex; align-items: center; gap: 8px; padding: 0 14px; color: #9aa0a8;
    }
    .mobile-after-sale-search input {
      flex: 1; min-width: 0; border: none; outline: none; background: transparent;
      font-size: 14px; color: #333;
    }
    .mobile-after-sale-search input::placeholder { color: #a7abb2; }
    .mobile-after-sale-status-tabs {
      display: flex; align-items: center; gap: 27px; overflow-x: auto; scrollbar-width: none;
      background: #fff; padding: 10px 18px 0; height: 48px; border-bottom: 1px solid #eef0f2;
    }
    .mobile-after-sale-status-tabs::-webkit-scrollbar { display: none; }
    .mobile-after-sale-status-tab {
      position: relative; flex: 0 0 auto; height: 38px; display: flex; align-items: center;
      font-size: 15px; color: #8f949b; white-space: nowrap;
    }
    .mobile-after-sale-status-tab.active { color: #20242a; font-weight: 700; }
    .mobile-after-sale-status-tab.active::after {
      content: ''; position: absolute; left: 50%; transform: translateX(-50%);
      bottom: 0; width: 30px; height: 3px; border-radius: 3px; background: var(--brand, #4caf82);
    }
    .mobile-after-sale-filter-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 14px 12px; font-size: 15px; background: #f6f7f9; color: #20242a;
    }
    .mobile-after-sale-date {
      display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
    }
    .mobile-after-sale-date svg { color: #7d838c; }
    .mobile-after-sale-total { color: #20242a; white-space: nowrap; }
    .mobile-after-sale-total strong { font-size: 17px; margin-left: 5px; }
    .mobile-after-sale-list { padding: 10px 12px 40px; }
    .mobile-after-sale-card {
      background: #fff; border-radius: 10px; padding: 14px 14px 12px;
      box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
    }
    .mobile-after-sale-card-head {
      display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
      margin-bottom: 14px;
    }
    .mobile-after-sale-no { min-width: 0; color: #8c929a; font-size: 13px; line-height: 1.55; }
    .mobile-after-sale-type {
      display: inline-flex; align-items: center; height: 23px; padding: 0 5px;
      border: 1px solid rgba(48, 155, 106, .65); border-radius: 4px;
      color: var(--brand, #4caf82); font-size: 13px; margin-left: 4px;
    }
    .mobile-after-sale-finish { color: #2f7f63; font-size: 17px; font-weight: 700; padding-top: 8px; }
    .mobile-after-sale-customer {
      display: flex; align-items: center; gap: 7px; color: #333; font-size: 15px; margin-bottom: 14px;
    }
    .mobile-after-sale-avatar {
      width: 21px; height: 21px; border-radius: 3px; background: #f0f1f3; color: #c0c4cc;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .mobile-after-sale-phone { color: #777; margin-left: 2px; }
    .mobile-after-sale-product {
      display: grid; grid-template-columns: 88px 1fr 46px; gap: 12px; align-items: center; margin-bottom: 12px;
    }
    .mobile-after-sale-img {
      width: 88px; height: 88px; border-radius: 7px; background: linear-gradient(135deg, #5e35b1 0%, #ffd84c 58%, #fff6b6 100%);
      display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff; overflow: hidden;
    }
    .mobile-after-sale-product-info { min-width: 0; }
    .mobile-after-sale-product-name {
      font-size: 15px; color: #222; line-height: 1.45;
      overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .mobile-after-sale-refund { margin-top: 16px; color: #555; font-size: 15px; }
    .mobile-after-sale-refund strong { font-size: 24px; color: #1f2329; margin-left: 1px; }
    .mobile-after-sale-count { align-self: end; text-align: right; color: #999; font-size: 13px; padding-bottom: 20px; }
    .mobile-after-sale-result {
      height: 44px; border-radius: 2px; background: #f8f9fa; display: flex; align-items: center;
      justify-content: center; gap: 18px; color: #333; font-size: 15px;
    }
    .mobile-after-sale-result strong { font-size: 16px; }

    /* ===== 移动端售后单详情 ===== */
    .mobile-after-sale-detail-page {
      min-height: 100%; background: #f7f7f8; display: flex; flex-direction: column; color: #20242a;
    }
    .mobile-after-sale-detail-header {
      height: 58px; background: #fff; display: flex; align-items: center; justify-content: space-between;
      padding: 0 18px; border-bottom: 1px solid #f0f1f2; flex-shrink: 0;
    }
    .mobile-after-sale-detail-back {
      width: 34px; height: 34px; display: flex; align-items: center; justify-content: flex-start;
      color: #20242a; cursor: pointer;
    }
    .mobile-after-sale-detail-title { font-size: 18px; font-weight: 500; color: #20242a; }
    .mobile-after-sale-detail-log { font-size: 14px; color: #9aa0a8; }
    .mobile-after-sale-detail-body { padding: 14px 12px 76px; }
    .mobile-after-sale-detail-status {
      background: #fff; border-radius: 8px; padding: 16px 14px 14px; margin-bottom: 12px;
      display: flex; justify-content: space-between; align-items: flex-start;
    }
    .mobile-after-sale-detail-status-left { min-width: 0; }
    .mobile-after-sale-detail-status-title {
      display: flex; align-items: center; gap: 8px; color: var(--brand, #4caf82);
      font-size: 17px; font-weight: 600; margin-bottom: 12px;
    }
    .mobile-after-sale-detail-status-title svg { flex-shrink: 0; }
    .mobile-after-sale-detail-status-time { font-size: 14px; color: #8f949b; }
    .mobile-after-sale-detail-status-money { color: var(--brand, #4caf82); font-size: 17px; padding-top: 4px; }
    .mobile-after-sale-detail-card {
      background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden;
    }
    .mobile-after-sale-detail-product {
      display: grid; grid-template-columns: 58px 1fr 56px; gap: 10px;
      padding: 14px; border-bottom: 1px solid #f1f2f3;
    }
    .mobile-after-sale-detail-img {
      width: 58px; height: 58px; border-radius: 6px; background: linear-gradient(135deg, #5e35b1 0%, #ffd84c 58%, #fff6b6 100%);
      display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; overflow: hidden;
    }
    .mobile-after-sale-detail-product-name {
      font-size: 15px; color: #20242a; line-height: 1.35; margin-bottom: 16px;
    }
    .mobile-after-sale-detail-spec { font-size: 13px; color: #9aa0a8; }
    .mobile-after-sale-detail-price { text-align: right; color: #20242a; font-size: 15px; }
    .mobile-after-sale-detail-price .qty { margin-top: 26px; color: #8f949b; }
    .mobile-after-sale-detail-row {
      min-height: 44px; display: flex; align-items: center; justify-content: space-between;
      padding: 0 14px; font-size: 14px; color: #8f949b;
    }
    .mobile-after-sale-detail-row .value { color: #20242a; text-align: right; max-width: 68%; }
    .mobile-after-sale-detail-row .strong { color: #20242a; font-weight: 700; font-size: 16px; }
    .mobile-after-sale-detail-row .copy {
      margin-left: 6px; padding: 1px 6px; border-radius: 10px; background: #f0f1f2;
      color: #656b75; font-size: 12px;
    }
    .mobile-after-sale-detail-refund-box {
      margin: 0 14px 10px; background: #f7f8f9; padding: 10px 12px;
    }
    .mobile-after-sale-detail-refund-line {
      height: 34px; display: flex; align-items: center; justify-content: space-between;
      font-size: 14px; color: #555b63;
    }
    .mobile-after-sale-detail-collapse {
      display: flex; justify-content: center; padding: 18px 0 16px;
    }
    .mobile-after-sale-detail-collapse span {
      display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 20px;
      border: 1px solid #e0e2e5; border-radius: 15px; color: #555b63; font-size: 14px;
    }
    .mobile-after-sale-detail-footer {
      position: absolute; left: 12px; right: 12px; bottom: 16px;
    }
    .mobile-after-sale-detail-logistics {
      height: 48px; width: 100%; border: none; border-radius: 24px;
      background: #317a5b; color: #fff; font-size: 16px; font-weight: 600;
    }

    /* ===== 移动端订单详情页 ===== */
    .mobile-ord-det-page { background: #f5f5f5; min-height: 100%; display: flex; flex-direction: column; }
    .mobile-ord-det-header {
      background: #3d4550; display: flex; align-items: center; justify-content: space-between;
      padding: 0 12px; height: 46px; flex-shrink: 0;
    }
    .mobile-ord-det-header .back { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .mobile-ord-det-header .back svg { stroke: #fff; }
    .mobile-ord-det-header .title { font-size: 16px; font-weight: 600; color: #fff; }
    .mobile-ord-det-header .print { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .mobile-ord-det-header .print svg { stroke: #fff; }
    .mobile-ord-det-body { flex: 1; overflow-y: auto; }
    .mobile-ord-det-section { background: #fff; margin-bottom: 8px; }
    .mobile-ord-det-section-title {
      padding: 12px; font-size: 14px; font-weight: 600; color: #333;
      border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 6px;
    }
    .mobile-ord-det-section-title::before {
      content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--brand, #4caf82);
    }
    .mobile-ord-det-gb-head {
      border-bottom-color: #ffe0b2;
    }
    .mobile-ord-det-gb-tip {
      font-size: 11px; color: var(--brand, #4caf82); font-weight: 400; line-height: 1.4;
    }
    .mobile-ord-det-product {
      display: flex; align-items: flex-start; gap: 10px; padding: 12px;
      border-bottom: 1px solid #f5f5f5;
    }
    .mobile-ord-det-product:last-child { border-bottom: none; }
    .mobile-ord-det-product-img {
      width: 56px; height: 56px; border-radius: 6px; background: #f5f5f5;
      display: flex; align-items: center; justify-content: center; font-size: 28px;
      flex-shrink: 0; position: relative; overflow: hidden;
    }
    .mobile-ord-det-product-img .gb-tag {
      position: absolute; top: 0; left: 0; font-size: 9px; background: #fff7e6;
      color: #fa8c16; padding: 1px 4px; border-radius: 0 0 4px 0;
    }
    .mobile-ord-det-product-info { flex: 1; min-width: 0; }
    .mobile-ord-det-product-top {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    }
    .mobile-ord-det-product-name {
      flex: 1; min-width: 0; font-size: 14px; color: #333; font-weight: 500; line-height: 1.4;
    }
    .mobile-ord-det-product-tags {
      display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap;
    }
    .mobile-ord-det-product-tag {
      font-size: 10px; padding: 1px 6px; border-radius: 8px;
      border: 1px solid #ddd; color: #999;
    }
    .mobile-ord-det-product-tag.green {
      border-color: var(--brand, #4caf82); color: var(--brand, #4caf82); background: #f0faf4;
    }
    .mobile-ord-det-product-row {
      display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px;
    }
    .mobile-ord-det-product-spec { min-width: 0; flex: 1; font-size: 11px; color: #999; }
    .mobile-ord-det-product-qty { font-size: 12px; color: #999; white-space: nowrap; }
    .mobile-ord-det-product-price {
      display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
      font-size: 14px; color: #333; font-weight: 600; white-space: nowrap;
    }
    .mobile-ord-det-refund-status { color: #eba23c; font-size: 10px; font-weight: 500; }
    .mobile-ord-det-groupbuy-price .original { color: #bbb; font-size: 11px; text-decoration: line-through; }
    .mobile-ord-det-groupbuy-price .actual { color: var(--brand, #4caf82); font-weight: 600; }
    .mobile-ord-det-product-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
    .mobile-ord-det-product-actions button {
      height: 24px; min-width: 48px; padding: 0 9px; border: 1px solid #999; border-radius: 13px;
      background: #fff; color: #555; font-size: 11px; line-height: 22px; cursor: pointer;
    }
    .mobile-ord-det-product-actions button.return { border-color: #777; color: #333; }
    .mobile-ord-det-product-actions button:disabled { border-color: #ddd; color: #bbb; background: #fafafa; cursor: default; }
    .mobile-ord-det-profit {
      padding: 12px; text-align: center; font-size: 13px; color: #666;
      border-bottom: 1px solid #f5f5f5;
    }
    .mobile-ord-det-profit strong { color: #e53935; font-size: 15px; }
    .mobile-ord-det-summary {
      padding: 12px; border-bottom: 1px solid #f5f5f5;
    }
    .mobile-ord-det-sum-row {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 13px; color: #666; margin-bottom: 6px;
    }
    .mobile-ord-det-sum-row:last-child { margin-bottom: 0; }
    .mobile-ord-det-sum-row .label { }
    .mobile-ord-det-sum-row .val { font-weight: 500; color: #333; }
    .mobile-ord-det-sum-row .val.red { color: #e53935; font-weight: 700; font-size: 15px; }
    .mobile-ord-det-sum-row .val.arrow { color: #999; }
    .mobile-ord-det-info {
      padding: 12px; border-bottom: 1px solid #f5f5f5;
    }
    .mobile-ord-det-info-row {
      display: flex; align-items: center; font-size: 13px; color: #666; margin-bottom: 8px;
    }
    .mobile-ord-det-info-row:last-child { margin-bottom: 0; }
    .mobile-ord-det-info-label { width: 80px; flex-shrink: 0; }
    .mobile-ord-det-info-val { color: #333; flex: 1; }
    .mobile-ord-det-info-val.blue { color: var(--blue, #2196f3); }
    .mobile-ord-det-info-copy {
      font-size: 11px; color: var(--brand, #4caf82); border: 1px solid var(--brand, #4caf82);
      padding: 1px 6px; border-radius: 4px; margin-left: 6px; cursor: pointer;
    }
    .mobile-ord-det-gb-section {
      padding: 0; background: #fff; border-bottom: 1px solid #ffe0b2;
    }
    .mobile-ord-det-gb-title {
      padding: 10px 12px; font-size: 13px; font-weight: 600; color: #e53935;
      background: #fff8f0; border-bottom: 1px solid #ffe9c7;
      display: flex; align-items: center; gap: 4px;
    }
    .mobile-ord-det-gb-section .mobile-ord-det-product {
      background: #fff; border-bottom-color: #f0f0f0;
    }
    .mobile-ord-det-gb-total {
      display: flex; justify-content: flex-end; padding: 10px 12px 12px;
      background: #fff8f0; border-top: 1px solid #ffe0b2;
      font-size: 13px; color: #e53935; font-weight: 500;
    }
    .mobile-ord-det-footer {
      padding: 10px 12px; background: #fff; border-top: 1px solid #eee;
      flex-shrink: 0;
    }
    .mobile-ord-det-footer button {
      width: 100%; height: 42px; border-radius: 8px; border: none;
      background: var(--brand, #4caf82); color: #fff; font-size: 15px;
      font-weight: 500; cursor: pointer;
    }
    .mobile-ord-det-footer button:disabled { background: #a8cbbb; cursor: default; }

    /* 订单退货 / 退单底部弹窗 */
    .mobile-order-refund-overlay {
      position: absolute; inset: 0; z-index: 180; display: flex; align-items: flex-end;
      background: rgba(0,0,0,.55); animation: fadeIn .18s ease;
    }
    .mobile-order-refund-sheet {
      width: 100%; max-height: calc(100% - 48px); display: flex; flex-direction: column;
      overflow: hidden; border-radius: 14px 14px 0 0; background: #f5f6f8;
      box-shadow: 0 -10px 28px rgba(0,0,0,.16); animation: mobileCashierSheetUp .2s ease-out;
    }
    .mobile-order-refund-sheet.item-return { height: 82%; }
    .mobile-order-refund-sheet.full-order { height: 78%; }
    .mobile-order-refund-head {
      position: relative; height: 58px; flex-shrink: 0; display: flex; align-items: center;
      justify-content: center; border-bottom: 1px solid #eef0f2; background: #fff;
    }
    .mobile-order-refund-head strong { font-size: 20px; color: #25282d; }
    .mobile-order-refund-head button {
      position: absolute; right: 16px; top: 50%; width: 30px; height: 30px; padding: 0;
      transform: translateY(-50%); border: none; border-radius: 50%; background: #e9ebef;
      color: #fff; font-size: 24px; line-height: 28px; cursor: pointer;
    }
    .mobile-order-refund-body { flex: 1; min-height: 0; padding: 12px; overflow-y: auto; }
    .mobile-order-return-product {
      display: flex; align-items: center; gap: 10px; padding: 14px 12px; margin-bottom: 12px;
      border-radius: 10px; background: #fff;
    }
    .mobile-order-return-product-img {
      width: 66px; height: 66px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      border-radius: 8px; background: #f6f6f6; font-size: 34px;
    }
    .mobile-order-return-product-info { flex: 1; min-width: 0; }
    .mobile-order-return-product-name {
      overflow: hidden; color: #262a30; font-size: 14px; font-weight: 500; line-height: 1.45;
      text-overflow: ellipsis; white-space: nowrap;
    }
    .mobile-order-return-product-spec { margin-top: 8px; color: #9a9fa8; font-size: 12px; }
    .mobile-order-return-available { margin-top: 12px; color: #9a9fa8; font-size: 12px; }
    .mobile-order-return-product-side {
      align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
    }
    .mobile-order-return-product-price { color: #20242a; font-size: 14px; font-weight: 600; }
    .mobile-order-return-stepper { display: flex; align-items: center; gap: 12px; }
    .mobile-order-return-stepper button {
      width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;
      background: #f2f3f5; color: #8f959d; font-size: 18px; cursor: pointer;
    }
    .mobile-order-return-stepper span { min-width: 14px; color: #24282e; font-size: 17px; text-align: center; }
    .mobile-order-refund-card { overflow: hidden; border-radius: 10px; background: #fff; }
    .mobile-order-refund-card.compact { margin-top: 12px; }
    .mobile-order-refund-row {
      min-height: 54px; margin: 0 14px; display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid #f1f2f4; color: #292d33; font-size: 14px;
    }
    .mobile-order-refund-row:last-of-type { border-bottom: none; }
    .mobile-order-refund-row.large { min-height: 68px; margin: 0; padding: 0 14px; font-size: 16px; }
    .mobile-order-refund-row strong { color: #24282e; font-weight: 500; }
    .mobile-order-refund-row .amount { color: #e8423f; font-size: 19px; }
    .mobile-order-refund-row .chevron { margin-left: 8px; color: #727780; font-size: 18px; }
    .mobile-order-help {
      display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center;
      border: 1px solid #9da3ad; border-radius: 50%; color: #8d939c; font-size: 11px;
    }
    .mobile-order-refund-note {
      display: block; padding: 14px; border-top: 1px solid #f1f2f4; color: #292d33; font-size: 14px;
    }
    .mobile-order-refund-note textarea {
      width: 100%; height: 68px; margin-top: 10px; padding: 10px 12px; resize: none;
      border: 1px solid #e1e4e8; border-radius: 8px; outline: none; background: #fafbfc;
      color: #2b2f35; font: inherit; line-height: 1.45; box-sizing: border-box;
    }
    .mobile-order-refund-note textarea:focus { border-color: var(--brand, #4caf82); background: #fff; }
    .mobile-order-refund-tabs {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px;
      border-radius: 10px; background: #fff;
    }
    .mobile-order-refund-tabs button {
      height: 38px; border: none; border-radius: 8px; background: transparent;
      color: #555b63; font-size: 15px; cursor: pointer;
    }
    .mobile-order-refund-tabs button.active { background: #f3f5f6; color: #328061; font-weight: 600; }
    .mobile-order-refund-method-row {
      min-height: 64px; padding: 0 14px; display: grid; grid-template-columns: 1fr auto auto;
      align-items: center; gap: 10px; border-bottom: 1px solid #f1f2f4;
    }
    .mobile-order-refund-method-row strong { color: #292d33; font-size: 15px; }
    .mobile-order-refund-method-row button {
      min-width: 86px; height: 34px; padding: 0 12px; border: none; border-radius: 18px;
      background: #f2f1f3; color: #454950; font-size: 14px; cursor: pointer;
    }
    .mobile-order-refund-method-row button.active {
      border: 1px solid #4caf82; background: #f7fffb; color: #43a979;
    }
    .mobile-order-refund-tips { margin-top: 14px; color: #989da6; font-size: 12px; line-height: 1.65; }
    .mobile-order-refund-footer { flex-shrink: 0; padding: 10px 18px 14px; background: #fff; }
    .mobile-order-refund-footer button {
      width: 100%; height: 44px; border: none; border-radius: 24px;
      background: linear-gradient(90deg, #4caf82, #317a5b); color: #fff;
      font-size: 16px; font-weight: 600; cursor: pointer;
    }

    /* 分类页 */
    .mp-category { background: #fff; min-height: 100%; display: flex; }
    .mp-cat-sidebar {
      width: 85px;
      background: #f5f5f5;
      flex-shrink: 0;
    }
    .mp-cat-item {
      padding: 14px 8px;
      text-align: center;
      font-size: 12px;
      color: #666;
      cursor: pointer;
      position: relative;
    }
    .mp-cat-item.active {
      background: #fff;
      color: #4caf82;
      font-weight: 600;
    }
    .mp-cat-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 20px;
      background: #4caf82;
      border-radius: 0 2px 2px 0;
    }
    .mp-cat-content { flex: 1; padding: 15px; overflow-y: auto; }
    .mp-cat-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }
    .mp-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .mp-cat-product {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }
    .mp-cat-product-img {
      width: 60px; height: 60px;
      border-radius: 10px;
      background: #f8f8f8;
      display: flex; align-items: center; justify-content: center;
      font-size: 28px;
    }
    .mp-cat-product-name { font-size: 11px; color: #666; text-align: center; }

    /* 购物车页 */
    .mp-cart-page {
      min-height: 100%;
      background: #f4f5f7;
      color: #182033;
      padding-bottom: 140px;
    }
    .mp-cart-hero {
      height: 42px;
      background: linear-gradient(135deg, #d7f3e4 0%, #77d8b0 38%, #59c995 100%);
      position: relative;
      overflow: hidden;
    }
    .mp-cart-hero::before {
      content: '';
      position: absolute;
      inset: -70px auto auto -52px;
      width: 170px;
      height: 160px;
      background: linear-gradient(32deg, rgba(255,255,255,.42) 0 18%, rgba(255,255,255,.15) 18% 32%, transparent 32% 100%);
      transform: rotate(18deg);
    }
    .mp-cart-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, rgba(255,255,255,.24), rgba(255,255,255,0) 44%);
    }
    .mp-cart-nav-title {
      position: absolute;
      top: 10px;
      left: 0;
      right: 0;
      text-align: center;
      color: #fff;
      font-size: 20px;
      line-height: 1;
      font-weight: 500;
      z-index: 2;
    }
    .mp-cart-capsule {
      position: absolute;
      top: 8px;
      right: 10px;
      width: 92px;
      height: 26px;
      border-radius: 14px;
      background: rgba(223, 247, 235, .82);
      border: 1px solid rgba(49, 133, 96, .18);
      display: grid;
      grid-template-columns: 34px 1px 28px 1px 27px;
      align-items: center;
      justify-items: center;
      color: #0f171a;
      z-index: 2;
      box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    .mp-cart-capsule .dots {
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .mp-cart-capsule .dots span {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #111;
    }
    .mp-cart-capsule .divider {
      width: 1px;
      height: 15px;
      background: rgba(49, 76, 68, .18);
    }
    .mp-cart-capsule .minus {
      width: 12px;
      height: 4px;
      border-radius: 3px;
      background: #111;
    }
    .mp-cart-capsule .target {
      width: 16px;
      height: 16px;
      border: 4px solid #111;
      border-radius: 50%;
      position: relative;
    }
    .mp-cart-capsule .target::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: #111;
    }
    .mp-cart-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 12px 7px;
      font-size: 17px;
      line-height: 1;
      color: #3a4352;
    }
    .mp-cart-edit {
      font-size: 15px;
      color: #2f3746;
      cursor: pointer;
    }
    .mp-cart-store-card {
      margin: 10px 10px 12px;
      padding: 14px 10px 0;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
    }
    .mp-cart-store-card.cloud {
      padding-bottom: 4px;
    }
    .mp-cart-store-head {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      margin-bottom: 12px;
    }
    .mp-cart-store-title {
      min-width: 0;
      font-size: 17px;
      line-height: 1.25;
      color: #151c2b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-cart-check {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid #cfd5dc;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      flex-shrink: 0;
      cursor: pointer;
    }
    .mp-cart-check.checked {
      border-color: #49b37a;
      background: #49b37a;
    }
    .mp-cart-check.checked::after {
      content: '✓';
      font-size: 14px;
      line-height: 1;
      font-weight: 700;
      transform: translateY(-1px);
    }
    .mp-cart-goods-row {
      display: grid;
      grid-template-columns: 26px 84px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      padding-bottom: 10px;
    }
    .mp-cart-goods-row + .mp-cart-goods-row {
      border-top: 1px solid #eef0f3;
      padding-top: 8px;
    }
    .mp-cart-thumb {
      width: 78px;
      height: 78px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      display: block;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
      flex-shrink: 0;
    }
    .mp-cart-thumb.sausage {
      background: linear-gradient(105deg, #6e2a91 0 28%, #ffe36f 28% 100%);
    }
    .mp-cart-thumb.sausage::before {
      content: '';
      position: absolute;
      left: 14px;
      top: 43px;
      width: 40px;
      height: 21px;
      border-radius: 50%;
      background: linear-gradient(#fb8bd3, #c83db7);
      box-shadow: 2px 4px 0 rgba(0,0,0,.12);
      transform: rotate(-8deg);
    }
    .mp-cart-thumb.sausage::after {
      content: '肉肉怪';
      position: absolute;
      left: 20px;
      top: 50px;
      color: #fff;
      font-size: 8px;
      font-weight: 700;
      transform: rotate(-8deg);
    }
    .mp-cart-thumb.sausage .bucket {
      position: absolute;
      right: 18px;
      top: 17px;
      width: 25px;
      height: 21px;
      border-radius: 6px 6px 10px 10px;
      background: linear-gradient(#ff9bdd, #c93bb4);
      border: 2px solid rgba(255,255,255,.45);
    }
    .mp-cart-thumb.sausage .stick {
      position: absolute;
      right: 7px;
      bottom: 21px;
      width: 39px;
      height: 6px;
      border-radius: 10px;
      background: #f1e7ef;
      border: 1px solid #d6c7d0;
      transform: rotate(14deg);
    }
    .mp-cart-thumb.litter {
      background: linear-gradient(135deg, #aaa2d8, #efe8ff);
    }
    .mp-cart-thumb.litter .bag {
      position: absolute;
      right: 13px;
      top: 13px;
      width: 37px;
      height: 49px;
      border-radius: 8px 8px 5px 5px;
      background: linear-gradient(155deg, #f6f9f1, #74c966);
      color: #fff;
      font-size: 10px;
      line-height: 1.1;
      font-weight: 700;
      text-align: center;
      padding-top: 8px;
      box-shadow: 0 7px 10px rgba(68,61,101,.18);
    }
    .mp-cart-thumb.litter .cat {
      position: absolute;
      left: 10px;
      bottom: 7px;
      width: 32px;
      height: 27px;
      border-radius: 50% 50% 42% 42%;
      background: #d8a172;
      box-shadow: inset 0 -8px 0 rgba(255,255,255,.42);
    }
    .mp-cart-thumb.litter .cat::before,
    .mp-cart-thumb.litter .cat::after {
      content: '';
      position: absolute;
      top: 10px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #232323;
    }
    .mp-cart-thumb.litter .cat::before { left: 10px; }
    .mp-cart-thumb.litter .cat::after { right: 10px; }
    .mp-cart-thumb.treat {
      background: #f6f7ec;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mp-cart-thumb.treat .pack {
      width: 55px;
      height: 68px;
      border-radius: 2px;
      background: linear-gradient(#fff6ac 0 30%, #42b95c 30% 100%);
      border: 1px solid rgba(0,0,0,.08);
      color: #fff;
      font-size: 10px;
      line-height: 1.2;
      font-weight: 700;
      text-align: center;
      padding-top: 29px;
      box-shadow: 0 7px 10px rgba(0,0,0,.1);
      position: relative;
    }
    .mp-cart-thumb.treat .pack::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 24px;
      width: 29px;
      height: 24px;
      border-radius: 50%;
      background: #c97933;
      box-shadow: inset 0 -7px 0 rgba(255,255,255,.28);
    }
    .mp-cart-info {
      min-width: 0;
    }
    .mp-cart-product-name {
      font-size: 15px;
      line-height: 1.22;
      color: #111827;
      word-break: break-word;
    }
    .mp-cart-member-badge {
      display: inline-flex;
      align-items: center;
      height: 17px;
      padding: 0 5px;
      margin-right: 5px;
      border-radius: 5px;
      background: #ff9c7e;
      color: #fff;
      font-size: 12px;
      line-height: 17px;
      vertical-align: 1px;
      white-space: nowrap;
    }
    .mp-cart-spec {
      margin-top: 8px;
      color: #9aa2b3;
      font-size: 13px;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-cart-bottom {
      margin-top: 5px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 8px;
    }
    .mp-cart-price {
      color: #ff4957;
      font-size: 18px;
      line-height: 1;
      white-space: nowrap;
      font-weight: 400;
    }
    .mp-cart-price .yuan {
      font-size: 15px;
      margin-right: 1px;
    }
    .mp-cart-qty {
      width: 96px;
      height: 25px;
      border-radius: 5px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 28px 40px 28px;
      background: #f1f3f5;
      flex-shrink: 0;
    }
    .mp-cart-qty button,
    .mp-cart-qty span {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-right: 2px solid #fff;
      background: #f1f3f5;
      color: #0f172a;
      font-size: 16px;
      line-height: 1;
    }
    .mp-cart-qty button:first-child {
      color: #c2c8d0;
    }
    .mp-cart-qty button:last-child {
      border-right: 0;
      font-size: 18px;
    }
    .mp-cart-qty span {
      font-size: 15px;
      background: #f8f9fb;
    }
    .mp-cart-checkout {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 78px;
      height: 54px;
      background: #fff;
      border-top: 1px solid #e6e7ea;
      border-bottom: 1px solid #f1f1f2;
      display: flex;
      align-items: center;
      padding: 0 10px;
      z-index: 14;
    }
    .mp-cart-footer-check {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #5d6674;
      font-size: 14px;
      flex-shrink: 0;
    }
    .mp-cart-total {
      flex: 1;
      padding-left: 11px;
      min-width: 0;
    }
    .mp-cart-total-main {
      color: #0d1834;
      font-size: 18px;
      line-height: 1.15;
      white-space: nowrap;
    }
    .mp-cart-total-sub {
      color: #9aa2b3;
      font-size: 12px;
      margin-top: 2px;
      white-space: nowrap;
    }
    .mp-cart-settle {
      width: 100px;
      height: 38px;
      border: 0;
      border-radius: 24px;
      background: #3f8f60;
      color: #fff;
      font-size: 16px;
      line-height: 1;
      font-weight: 500;
      flex-shrink: 0;
    }
    .mp-cart-tab-bar {
      height: 58px;
      bottom: 20px;
      border-top-color: #edf0f3;
    }
    .mp-cart-tab-bar .mp-tab-item {
      font-size: 13px;
      gap: 2px;
    }
    .mp-cart-tab-bar .mp-tab-item svg {
      width: 25px;
      height: 25px;
    }
    .mp-cart-tab-bar .mp-tab-cart-badge::after {
      top: -11px;
      right: -12px;
      min-width: 20px;
      height: 20px;
      border-radius: 50%;
      padding: 0;
      font-size: 13px;
      background: #ff3842;
      border: 2px solid #fff;
    }

    /* 商品结算页 */
    .mp-settle-page {
      min-height: 100%;
      background: #f4f4f5;
      color: #0d1834;
      padding-bottom: 0;
    }
    .mp-settle-nav {
      height: 54px;
      background: linear-gradient(135deg, #d7f3e4 0%, #77d8b0 38%, #59c995 100%);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      flex-shrink: 0;
    }
    .mp-settle-nav::before {
      content: '';
      position: absolute;
      inset: -58px auto auto -46px;
      width: 170px;
      height: 160px;
      background: linear-gradient(32deg, rgba(255,255,255,.42) 0 18%, rgba(255,255,255,.15) 18% 32%, transparent 32% 100%);
      transform: rotate(18deg);
    }
    .mp-settle-back {
      position: absolute;
      left: 10px;
      top: 13px;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      z-index: 2;
      cursor: pointer;
    }
    .mp-settle-back svg {
      width: 26px;
      height: 26px;
    }
    .mp-settle-title {
      position: relative;
      z-index: 2;
      font-size: 20px;
      font-weight: 500;
      line-height: 1;
    }
    .mp-settle-capsule {
      position: absolute;
      top: 12px;
      right: 10px;
      width: 104px;
      height: 30px;
      border-radius: 17px;
      background: rgba(223, 247, 235, .82);
      border: 1px solid rgba(49, 133, 96, .18);
      display: grid;
      grid-template-columns: 38px 1px 32px 1px 30px;
      align-items: center;
      justify-items: center;
      z-index: 2;
      box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    .mp-settle-capsule .dots {
      display: flex;
      gap: 5px;
    }
    .mp-settle-capsule .dots span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #111;
    }
    .mp-settle-capsule .divider {
      width: 1px;
      height: 18px;
      background: rgba(49, 76, 68, .18);
    }
    .mp-settle-capsule .minus {
      width: 14px;
      height: 4px;
      border-radius: 3px;
      background: #111;
    }
    .mp-settle-capsule .target {
      width: 18px;
      height: 18px;
      border: 4px solid #111;
      border-radius: 50%;
      position: relative;
    }
    .mp-settle-capsule .target::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: #111;
    }
    .mp-settle-body {
      padding: 10px 9px 0;
    }
    .mp-settle-card {
      background: #fff;
      border-radius: 10px;
      margin-bottom: 10px;
      padding: 14px 12px;
      overflow: hidden;
    }
    .mp-settle-delivery-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .mp-settle-section-title {
      font-size: 15px;
      color: #121a2f;
      font-weight: 500;
      line-height: 1;
    }
    .mp-settle-toggle {
      height: 30px;
      min-width: 178px;
      border-radius: 18px;
      border: 2px solid #4caf82;
      background: #fff;
      display: grid;
      grid-template-columns: 74px 1fr;
      align-items: center;
      color: #4caf82;
      font-size: 12px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .mp-settle-toggle span {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      white-space: nowrap;
    }
    .mp-settle-toggle .active {
      background: #4caf82;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
    }
    .mp-settle-delivery-pill {
      min-width: 60px;
      height: 28px;
      padding: 0 16px;
      border-radius: 16px;
      background: #4caf82;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
    }
    .mp-settle-address-row {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr) 12px;
      gap: 8px;
      align-items: center;
      color: #8f98aa;
      font-size: 13px;
      line-height: 1.35;
    }
    .mp-settle-address-row + .mp-settle-address-row {
      margin-top: 4px;
    }
    .mp-settle-address-main {
      color: #1f2937;
      font-size: 15px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-settle-address-arrow {
      color: #ff9a9a;
      font-size: 18px;
      line-height: 1;
    }
    .mp-settle-shop-title {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      font-size: 17px;
      color: #182033;
      line-height: 1.25;
      margin-bottom: 14px;
    }
    .mp-settle-shop-title svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: #1e293b;
    }
    .mp-settle-shop-name {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-settle-product-line {
      min-height: 92px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 76px;
      gap: 10px;
      align-items: center;
    }
    .mp-settle-product-list {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .mp-settle-thumb {
      width: 62px;
      height: 62px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
    }
    .mp-settle-thumb.sausage {
      background: linear-gradient(105deg, #6e2a91 0 28%, #ffe36f 28% 100%);
    }
    .mp-settle-thumb.sausage::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 34px;
      width: 32px;
      height: 17px;
      border-radius: 50%;
      background: linear-gradient(#fb8bd3, #c83db7);
      transform: rotate(-8deg);
    }
    .mp-settle-thumb.sausage::after {
      content: '';
      position: absolute;
      right: 14px;
      top: 13px;
      width: 20px;
      height: 17px;
      border-radius: 6px 6px 10px 10px;
      background: linear-gradient(#ff9bdd, #c93bb4);
      border: 2px solid rgba(255,255,255,.45);
    }
    .mp-settle-thumb.litter {
      background: linear-gradient(135deg, #aaa2d8, #efe8ff);
    }
    .mp-settle-thumb.litter::before {
      content: '猫砂';
      position: absolute;
      right: 10px;
      top: 12px;
      width: 31px;
      height: 40px;
      border-radius: 7px 7px 5px 5px;
      background: linear-gradient(155deg, #f6f9f1, #74c966);
      color: #fff;
      font-size: 9px;
      line-height: 40px;
      font-weight: 700;
      text-align: center;
    }
    .mp-settle-thumb.litter::after {
      content: '';
      position: absolute;
      left: 8px;
      bottom: 7px;
      width: 28px;
      height: 22px;
      border-radius: 50%;
      background: #d8a172;
    }
    .mp-settle-thumb.treat {
      background: #f6f7ec;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mp-settle-thumb.treat::before {
      content: 'DOG\A TREATS';
      white-space: pre;
      width: 46px;
      height: 56px;
      border-radius: 2px;
      background: linear-gradient(#fff6ac 0 30%, #42b95c 30% 100%);
      border: 1px solid rgba(0,0,0,.08);
      color: #fff;
      font-size: 8px;
      line-height: 1.1;
      font-weight: 700;
      text-align: center;
      padding-top: 28px;
    }
    .mp-settle-count {
      justify-self: end;
      color: #9aa2b3;
      font-size: 15px;
      white-space: nowrap;
    }
    .mp-settle-count span {
      color: #ff9a9a;
      margin-left: 3px;
    }
    .mp-settle-subtotal {
      text-align: right;
      margin: 2px 0 22px;
      color: #0f172a;
      font-size: 15px;
    }
    .mp-settle-money {
      color: #ff4b5c;
      font-size: 30px;
      line-height: 1;
      margin-left: 4px;
      font-weight: 400;
    }
    .mp-settle-money small {
      font-size: 14px;
      margin-right: 2px;
    }
    .mp-settle-divider {
      height: 1px;
      background: #edf0f2;
      margin: 0 0 16px;
    }
    .mp-settle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 33px;
      font-size: 15px;
      color: #14203a;
    }
    .mp-settle-row .right {
      color: #939bad;
      font-weight: 500;
      text-align: right;
      white-space: nowrap;
    }
    .mp-settle-row .strong {
      color: #0f172a;
      font-weight: 700;
    }
    .mp-settle-row .red {
      color: #ff4b5c;
      font-weight: 700;
    }
    .mp-settle-row .muted {
      display: block;
      color: #9aa2b3;
      font-size: 12px;
      margin-top: 2px;
      font-weight: 400;
    }
    .mp-settle-help {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border: 1px solid #9aa2b3;
      border-radius: 50%;
      color: #9aa2b3;
      font-size: 10px;
      margin-left: 4px;
      vertical-align: 1px;
    }
    .mp-settle-total-line {
      text-align: right;
      color: #0f172a;
      font-size: 16px;
      margin-top: 2px;
    }
    .mp-settle-total-line span {
      color: #ff4b5c;
      font-weight: 700;
      margin-left: 4px;
    }
    .mp-settle-message {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      align-items: start;
      min-height: 72px;
      font-size: 15px;
    }
    .mp-settle-message .placeholder {
      color: #9aa2b3;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mp-settle-footer {
      position: sticky;
      bottom: 0;
      height: 70px;
      background: #fff;
      border-top: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 9px;
      z-index: 10;
      box-shadow: 0 -2px 10px rgba(15,23,42,.04);
    }
    .mp-settle-pay {
      flex: 1;
      min-width: 0;
    }
    .mp-settle-pay-main {
      font-size: 15px;
      color: #14203a;
      line-height: 1.1;
      white-space: nowrap;
    }
    .mp-settle-pay-main strong {
      color: #ff4b5c;
      font-size: 24px;
      font-weight: 400;
      margin-left: 2px;
    }
    .mp-settle-pay-main small {
      color: #ff4b5c;
      font-size: 14px;
      margin-left: 2px;
    }
    .mp-settle-pay-sub {
      margin-top: 5px;
      color: #9aa2b3;
      font-size: 12px;
      white-space: nowrap;
    }
    .mp-settle-submit {
      width: 112px;
      height: 40px;
      border: 0;
      border-radius: 22px;
      background: #357d58;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* 我的页面 */
    .mp-mine { background: #f5f5f5; min-height: 100%; }
    .mp-mine-top {
      background: #4caf82;
      position: relative;
    }
    .mp-mine-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 15px 6px;
      position: relative;
    }
    .mp-mine-nav-title { font-size: 17px; font-weight: 600; color: #fff; }
    .mp-mine-capsule {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      background: rgba(255,255,255,.25);
      border-radius: 20px;
      overflow: hidden;
    }
    .mp-mine-capsule-btn {
      width: 32px; height: 28px;
      display: flex; align-items: center; justify-content: center;
    }
    .mp-mine-capsule-btn svg { width: 16px; height: 16px; color: #fff; }
    .mp-mine-capsule-divider { width: 1px; background: rgba(255,255,255,.3); align-self: stretch; }
    .mp-mine-user {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 15px 20px;
      position: relative;
    }
    .mp-mine-avatar {
      width: 58px; height: 58px;
      border-radius: 50%;
      background: rgba(255,255,255,.3);
      display: flex; align-items: center; justify-content: center;
      border: 2px solid rgba(255,255,255,.6);
      flex-shrink: 0;
      overflow: hidden;
    }
    .mp-mine-avatar svg { width: 32px; height: 32px; color: rgba(255,255,255,.8); }
    .mp-mine-userinfo { flex: 1; }
    .mp-mine-name-row { display: flex; align-items: center; gap: 8px; }
    .mp-mine-name { font-size: 20px; font-weight: 700; color: #fff; }
    .mp-mine-qrcode-btn {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: rgba(255,255,255,.25);
      color: #fff;
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.4);
      white-space: nowrap;
      flex-shrink: 0;
      cursor: pointer;
    }
    .mp-mine-qrcode-btn svg { width: 14px; height: 14px; }
    .mp-mine-welcome { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 4px; }
    .mp-mine-vip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: linear-gradient(90deg, #c8960c, #e8b84b);
      color: #fff;
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 10px;
      margin-top: 6px;
      font-weight: 500;
    }
    .mp-mine-vip svg { width: 12px; height: 12px; }

    /* 会员码弹窗 */
    .mp-qrcode-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn .2s;
    }
    .mp-qrcode-box {
      width: 280px;
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      animation: slideUp .25s;
    }
    .mp-qrcode-header {
      background: linear-gradient(135deg, #c8960c, #e8b84b);
      padding: 18px 20px 14px;
      text-align: center;
      position: relative;
    }
    .mp-qrcode-title {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }
    .mp-qrcode-subtitle {
      font-size: 11px;
      color: rgba(255,255,255,.8);
      margin-top: 3px;
    }
    .mp-qrcode-close {
      position: absolute;
      right: 12px;
      top: 12px;
      width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,.8);
      cursor: pointer;
      border-radius: 50%;
      background: rgba(255,255,255,.2);
    }
    .mp-qrcode-close svg { width: 14px; height: 14px; }
    .mp-qrcode-body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .mp-qrcode-number {
      font-size: 32px;
      font-weight: 700;
      color: #333;
      letter-spacing: 8px;
      font-variant-numeric: tabular-nums;
    }
    .mp-qrcode-tip {
      font-size: 11px;
      color: #999;
      margin-top: 6px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .mp-qrcode-tip svg { width: 12px; height: 12px; color: #c8960c; }
    .mp-qrcode-img {
      width: 140px;
      height: 140px;
      background: #f5f5f5;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #eee;
    }
    .mp-qrcode-img svg { width: 120px; height: 120px; color: #333; }
    .mp-qrcode-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px 16px;
      gap: 10px;
    }
    .mp-qrcode-countdown {
      font-size: 12px;
      color: #999;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .mp-qrcode-countdown svg { width: 12px; height: 12px; color: #4caf82; }
    .mp-qrcode-countdown .time { color: #4caf82; font-weight: 600; }
    .mp-qrcode-refresh {
      font-size: 12px;
      color: #4caf82;
      display: flex;
      align-items: center;
      gap: 3px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px 10px;
      border-radius: 14px;
      transition: background .15s;
    }
    .mp-qrcode-refresh:hover { background: #e8f5e9; }
    .mp-qrcode-refresh svg { width: 12px; height: 12px; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

    /* 会员卡区域 */
    .mp-mine-card {
      margin: -10px 15px 10px;
      background: #fff;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
      position: relative;
      z-index: 1;
    }
    .mp-mine-card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .mp-mine-card-label {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .mp-mine-card-label svg { width: 18px; height: 18px; color: #4caf82; }
    .mp-mine-card-right {
      font-size: 12px;
      color: #999;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .mp-mine-card-items {
      display: flex;
      justify-content: space-around;
    }
    .mp-mine-card-item {
      text-align: center;
      cursor: pointer;
    }
    .mp-mine-card-value { font-size: 20px; font-weight: 700; color: #333; }
    .mp-mine-card-value .unit { font-size: 12px; font-weight: 400; color: #999; }
    .mp-mine-card-label-text { font-size: 11px; color: #999; margin-top: 4px; }

    /* 小伙伴/奖励统计条 */
    .mp-mine-bar {
      display: flex;
      margin: 0 15px 10px;
      background: #fff;
      border-radius: 12px;
      padding: 14px 0;
    }
    .mp-mine-bar-item {
      flex: 1;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      border-right: 1px solid #f0f0f0;
    }
    .mp-mine-bar-item:last-child { border-right: none; }
    .mp-mine-bar-icon { font-size: 20px; }
    .mp-mine-bar-text { font-size: 12px; color: #666; font-weight: 500; }

    /* 订单区域 */
    .mp-mine-orders {
      background: #fff;
      margin: 0 15px 10px;
      border-radius: 12px;
      padding: 0 14px;
    }
    .mp-mine-orders-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
    }
    .mp-mine-orders-title { font-size: 15px; font-weight: 600; color: #333; }
    .mp-mine-orders-right { font-size: 12px; color: #999; }
    .mp-mine-order-tabs {
      display: flex;
      border-bottom: 1px solid #f0f0f0;
    }
    .mp-mine-order-tab {
      flex: 1;
      text-align: center;
      padding: 10px 0;
      font-size: 13px;
      color: #999;
      cursor: pointer;
      position: relative;
    }
    .mp-mine-order-tab.active { color: #333; font-weight: 600; }
    .mp-mine-order-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 2px;
      background: #4caf82;
      border-radius: 1px;
    }
    .mp-mine-order-icons {
      display: flex;
      justify-content: space-around;
      padding: 16px 0;
    }
    .mp-mine-order-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }
    .mp-mine-order-icon {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: #f5f5f5;
      display: flex; align-items: center; justify-content: center;
    }
    .mp-mine-order-icon svg { width: 20px; height: 20px; color: #666; }
    .mp-mine-order-item span { font-size: 11px; color: #666; }

    /* 服务订单-洗护页 */
    .mp-service-order { background: #f5f5f5; min-height: 100%; padding-bottom: 20px; }
    .mp-so-nav {
      background: #4caf82;
      padding: 8px 15px;
      display: flex;
      align-items: center;
      position: relative;
    }
    .mp-so-back {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; cursor: pointer;
    }
    .mp-so-back svg { width: 20px; height: 20px; }
    .mp-so-nav-title { font-size: 17px; font-weight: 600; color: #fff; position: absolute; left: 50%; transform: translateX(-50%); }
    .mp-so-capsule {
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      display: flex; background: rgba(255,255,255,.25); border-radius: 20px; overflow: hidden;
    }
    .mp-so-capsule-btn { width: 32px; height: 28px; display: flex; align-items: center; justify-content: center; }
    .mp-so-capsule-btn svg { width: 16px; height: 16px; color: #fff; }
    .mp-so-capsule-divider { width: 1px; background: rgba(255,255,255,.3); align-self: stretch; }
    .mp-so-tabs {
      display: flex;
      background: #fff;
      border-bottom: 1px solid #f0f0f0;
    }
    .mp-so-tab {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      font-size: 14px;
      color: #666;
      cursor: pointer;
      position: relative;
    }
    .mp-so-tab.active { color: #4caf82; font-weight: 600; }
    .mp-so-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%; transform: translateX(-50%);
      width: 24px; height: 2px;
      background: #4caf82;
      border-radius: 1px;
    }
    .mp-so-filters {
      display: flex;
      background: #fff;
      padding: 8px 15px;
      gap: 12px;
    }
    .mp-so-filter {
      font-size: 12px;
      color: #666;
      padding: 4px 12px;
      border-radius: 14px;
      background: #f5f5f5;
      cursor: pointer;
    }
    .mp-so-filter.active {
      background: #4caf82;
      color: #fff;
    }
    .mp-so-list { padding: 10px 15px; }
    .mp-so-card {
      background: #fff;
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 10px;
    }
    .mp-so-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .mp-so-card-shop {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      display: flex; align-items: center; gap: 4px;
    }
    .mp-so-card-status {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }
    .mp-so-card-status.cancelled { background: #f5f5f5; color: #999; }
    .mp-so-card-status.waiting { background: #fff3e0; color: #f5a623; }
    .mp-so-card-status.pending { background: #e8f5e9; color: #4caf82; }
    .mp-so-card-status.done { background: #f0f0f0; color: #666; }
    .mp-so-time {
      font-size: 11px;
      color: #999;
      margin-bottom: 10px;
      display: flex; align-items: center; gap: 4px;
    }
    .mp-so-time svg { width: 12px; height: 12px; }
    .mp-so-pet {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px dashed #eee;
    }
    .mp-so-pet-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: #e8f5e9;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .mp-so-pet-info { flex: 1; }
    .mp-so-pet-name { font-size: 13px; font-weight: 600; color: #333; }
    .mp-so-pet-count { font-size: 11px; color: #999; }
    .mp-so-services {
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mp-so-service-item {
      background: #fafafa;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .mp-so-service-icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: #e8f5e9;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .mp-so-service-info { flex: 1; }
    .mp-so-service-name { font-size: 13px; color: #333; font-weight: 500; }
    .mp-so-service-meta { font-size: 11px; color: #999; margin-top: 2px; }
    .mp-so-service-price { font-size: 14px; font-weight: 600; color: #e85858; }
    .mp-so-service-price::before { content: '¥'; font-size: 11px; }
    .mp-so-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding-top: 10px;
      border-top: 1px solid #f5f5f5;
      margin-top: 4px;
    }
    .mp-so-btn {
      font-size: 12px;
      padding: 5px 14px;
      border-radius: 14px;
      border: 1px solid #ddd;
      color: #666;
      cursor: pointer;
    }
    .mp-so-btn.primary {
      background: #4caf82;
      color: #fff;
      border-color: #4caf82;
    }
    .mp-so-btn.danger {
      border-color: #e85858;
      color: #e85858;
    }

    /* 视频查看页 */
    .mp-video-page { background: #f5f5f5; min-height: 100%; padding-bottom: 20px; }
    .mp-vp-nav {
      background: #4caf82;
      padding: 8px 15px;
      display: flex;
      align-items: center;
      position: relative;
    }
    .mp-vp-nav-title { font-size: 17px; font-weight: 600; color: #fff; position: absolute; left: 50%; transform: translateX(-50%); }
    .mp-vp-order-info {
      background: #fff;
      padding: 14px 15px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .mp-vp-pet-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: #e8f5e9;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }
    .mp-vp-pet-name { font-size: 15px; font-weight: 600; color: #333; }
    .mp-vp-order-time { font-size: 11px; color: #999; margin-top: 2px; }
    .mp-vp-section-title {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      padding: 14px 15px 10px;
    }
    .mp-vp-list { padding: 0 15px; display: flex; flex-direction: column; gap: 12px; }
    .mp-vp-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow .15s;
    }
    .mp-vp-card:active { box-shadow: 0 0 0 2px rgba(76,175,130,.3); }
    .mp-vp-video {
      width: 100%;
      height: 200px;
      background: #1a1a2e;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .mp-vp-video-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%);
    }
    .mp-vp-video-content {
      position: relative;
      z-index: 1;
      text-align: center;
    }
    .mp-vp-play-btn {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: rgba(255,255,255,.2);
      backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 8px;
    }
    .mp-vp-play-btn svg { width: 28px; height: 28px; color: #fff; }
    .mp-vp-video-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
    }
    .mp-vp-label-live {
      background: rgba(232,88,88,.9);
      color: #fff;
    }
    .mp-vp-label-live .mp-vp-live-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #fff;
      animation: mpVpPulse 1.2s ease-in-out infinite;
    }
    .mp-vp-label-playback {
      background: rgba(255,255,255,.2);
      color: rgba(255,255,255,.9);
    }
    .mp-vp-video-cam {
      position: absolute;
      bottom: 8px; left: 10px;
      font-size: 11px;
      color: rgba(255,255,255,.6);
      display: flex; align-items: center; gap: 4px;
      z-index: 1;
    }
    .mp-vp-video-time {
      position: absolute;
      bottom: 8px; right: 10px;
      font-size: 11px;
      color: rgba(255,255,255,.6);
      z-index: 1;
    }
    .mp-vp-card-info {
      padding: 12px 14px;
    }
    .mp-vp-card-title {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
    }
    .mp-vp-card-meta {
      font-size: 12px;
      color: #999;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .mp-vp-no-video {
      background: #fff;
      border-radius: 12px;
      padding: 40px 20px;
      text-align: center;
    }
    .mp-vp-no-video-icon { font-size: 40px; margin-bottom: 10px; }
    .mp-vp-no-video-text { font-size: 14px; color: #999; }
    .mp-vp-no-video-sub { font-size: 12px; color: #ccc; margin-top: 4px; }
    @keyframes mpVpPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: .3; }
    }

    /* 我的宠物 */
    .mp-mine-pets {
      background: #fff;
      margin: 0 15px 10px;
      border-radius: 12px;
      padding: 14px;
    }
    .mp-mine-pets-title {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }
    .mp-mine-pet-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px;
      background: #fafafa;
      border-radius: 10px;
    }
    .mp-mine-pet-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: #e8f5e9;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }
    .mp-mine-pet-info { flex: 1; }
    .mp-mine-pet-name { font-size: 14px; font-weight: 600; color: #333; }
    .mp-mine-pet-breed { font-size: 11px; color: #999; margin-top: 2px; }
    .mp-mine-pet-add {
      background: #4caf82;
      color: #fff;
      font-size: 12px;
      padding: 6px 14px;
      border-radius: 16px;
    }

    /* 服务中心 */
    .mp-mine-services {
      background: #fff;
      margin: 0 15px 70px;
      border-radius: 12px;
      padding: 14px;
    }
    .mp-mine-services-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }
    .mp-mine-service-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px 0;
    }
    .mp-mine-service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }
    .mp-mine-service-icon {
      width: 40px; height: 40px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
    }
    .mp-mine-service-label { font-size: 11px; color: #666; }

    /* ===== 移动端营销 / 限时特价 ===== */
    .mobile-marketing-page {
      min-height: 100%;
      background: #f4f5f6;
      color: #25282d;
    }
    .mobile-marketing-header {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-bottom: 1px solid #eff0f1;
      font-size: 17px;
      font-weight: 600;
    }
    .mobile-marketing-content {
      padding: 10px 12px 78px;
    }
    .mobile-marketing-section {
      margin-bottom: 10px;
      padding: 15px 8px 13px;
      border-radius: 9px;
      background: #fff;
    }
    .mobile-marketing-section h2 {
      padding: 0 7px 13px;
      color: #25282d;
      font-size: 15px;
      font-weight: 600;
    }
    .mobile-marketing-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      row-gap: 18px;
    }
    .mobile-marketing-item {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: #4f545b;
      font-size: 12px;
      line-height: 1.2;
    }
    .mobile-marketing-icon {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      font-size: 18px;
      font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
    }
    .mobile-marketing-icon.mint { color: #2f966d; background: linear-gradient(145deg, #ddf7eb, #c7eedc); }
    .mobile-marketing-icon.orange { color: #e08332; background: linear-gradient(145deg, #fff0d9, #ffe0b1); }
    .mobile-marketing-icon.blue { color: #4c82c7; background: linear-gradient(145deg, #e7f2ff, #d6e8ff); }
    .mobile-marketing-icon.purple { color: #8265bd; background: linear-gradient(145deg, #f1eaff, #e5d8ff); }
    .mobile-marketing-icon.pink { color: #c8627e; background: linear-gradient(145deg, #ffeaf1, #ffd8e4); }
    .mobile-marketing-icon.cyan { color: #3d929b; background: linear-gradient(145deg, #e0f7f8, #c9eef1); }

    .mobile-fs-shell {
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #f4f5f6;
      color: #25282d;
    }
    .mobile-fs-header {
      height: 52px;
      flex-shrink: 0;
      display: grid;
      grid-template-columns: 48px 1fr 48px;
      align-items: center;
      background: #fff;
      border-bottom: 1px solid #eff0f1;
    }
    .mobile-fs-header h1 {
      text-align: center;
      font-size: 17px;
      font-weight: 600;
    }
    .mobile-fs-back {
      width: 48px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #30343a;
    }
    .mobile-fs-back svg { width: 24px; height: 24px; }
    .mobile-fs-header-space { width: 48px; }
    .mobile-fs-tabs {
      height: 46px;
      flex-shrink: 0;
      display: flex;
      background: #fff;
      border-bottom: 1px solid #eceeef;
    }
    .mobile-fs-tabs button {
      position: relative;
      flex: 1;
      color: #7d8289;
      font-size: 14px;
    }
    .mobile-fs-tabs button.active {
      color: #317a5b;
      font-weight: 600;
    }
    .mobile-fs-tabs button.active::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 36px;
      height: 3px;
      border-radius: 2px;
      background: #317a5b;
      transform: translateX(-50%);
    }
    .mobile-fs-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 12px 12px 20px;
    }
    .mobile-fs-list::-webkit-scrollbar,
    .mobile-fs-form-body::-webkit-scrollbar,
    .mobile-fs-price-body::-webkit-scrollbar,
    .mobile-fs-product-list::-webkit-scrollbar { display: none; }
    .mobile-fs-activity-card {
      margin-bottom: 11px;
      padding: 15px 15px 13px;
      border-radius: 9px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(24,33,29,.03);
    }
    .mobile-fs-activity-card.draft-card {
      border: 1px solid rgba(49,122,91,.22);
      box-shadow: 0 3px 12px rgba(49,122,91,.08);
    }
    .mobile-fs-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .mobile-fs-card-head > div { min-width: 0; }
    .mobile-fs-card-head h3 {
      margin-top: 7px;
      overflow: hidden;
      color: #24282d;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-fs-status {
      display: inline-flex;
      align-items: center;
      height: 21px;
      padding: 0 8px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 500;
    }
    .mobile-fs-status.draft { color: #e98a2b; background: #fff3e5; }
    .mobile-fs-status.running { color: #2f8c66; background: #e9f7f0; }
    .mobile-fs-status.upcoming { color: #397fc0; background: #eaf4ff; }
    .mobile-fs-status.ended { color: #8a8f96; background: #f0f1f2; }
    .mobile-fs-publish {
      height: 31px;
      min-width: 62px;
      padding: 0 14px;
      border: 1px solid #317a5b;
      border-radius: 16px;
      background: #fff;
      color: #317a5b;
      font-size: 13px;
      font-weight: 600;
    }
    .mobile-fs-running-mark {
      flex-shrink: 0;
      padding-top: 4px;
      color: #3a8d6b;
      font-size: 12px;
    }
    .mobile-fs-running-mark.muted { color: #9aa0a7; }
    .mobile-fs-card-time {
      margin-top: 10px;
      color: #8b9097;
      font-size: 12px;
      line-height: 1.5;
    }
    .mobile-fs-card-divider {
      height: 1px;
      margin: 12px 0 10px;
      background: #f0f1f2;
    }
    .mobile-fs-card-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #7e838a;
      font-size: 12px;
    }
    .mobile-fs-card-summary strong { color: #393e44; font-weight: 500; }
    .mobile-fs-card-products {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 9px;
    }
    .mobile-fs-card-products span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      overflow: hidden;
      color: #555b62;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-fs-card-products em {
      flex-shrink: 0;
      color: #e14c48;
      font-style: normal;
      font-weight: 600;
    }
    .mobile-fs-footer {
      flex-shrink: 0;
      padding: 10px 14px 12px;
      background: #fff;
      border-top: 1px solid #eceeef;
    }
    .mobile-fs-primary {
      width: 100%;
      height: 44px;
      border-radius: 23px;
      background: linear-gradient(90deg, #4caf82, #317a5b);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      box-shadow: 0 5px 13px rgba(49,122,91,.16);
    }
    .mobile-fs-primary:disabled {
      background: #bdc9c3;
      box-shadow: none;
      cursor: default;
    }

    .mobile-fs-form-body,
    .mobile-fs-price-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 12px 12px 24px;
    }
    .mobile-fs-form-card {
      margin-bottom: 11px;
      padding: 0 14px;
      border-radius: 9px;
      background: #fff;
    }
    .mobile-fs-form-row {
      min-height: 54px;
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr) 14px;
      align-items: center;
      width: 100%;
      border-bottom: 1px solid #f0f1f2;
      color: #2f3338;
      text-align: left;
    }
    .mobile-fs-form-row:last-child { border-bottom: none; }
    .mobile-fs-form-row > span {
      font-size: 14px;
      white-space: nowrap;
    }
    .mobile-fs-form-row i,
    .mobile-fs-price-input i {
      margin-right: 3px;
      color: #e54c4c;
      font-style: normal;
    }
    .mobile-fs-form-row input {
      width: 100%;
      min-width: 0;
      height: 42px;
      border: none;
      outline: none;
      background: transparent;
      color: #33383e;
      font-family: inherit;
      font-size: 13px;
      text-align: right;
    }
    .mobile-fs-form-row input::placeholder { color: #b5b9be; }
    .mobile-fs-form-row b {
      color: #a5aab0;
      font-size: 20px;
      font-weight: 400;
      text-align: right;
    }
    .mobile-fs-form-button strong {
      overflow: hidden;
      color: #656b72;
      font-size: 13px;
      font-weight: 400;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-fs-product-section { padding-bottom: 2px; }
    .mobile-fs-empty-product {
      padding: 20px 0 22px;
      color: #a0a5ab;
      font-size: 12px;
      text-align: center;
    }
    .mobile-fs-selected-list { padding: 4px 0 10px; }
    .mobile-fs-selected-product {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      padding: 9px 0;
      border-top: 1px solid #f2f3f4;
    }
    .mobile-fs-selected-product > div { min-width: 0; }
    .mobile-fs-selected-product strong,
    .mobile-fs-price-product strong {
      display: -webkit-box;
      overflow: hidden;
      color: #353a40;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.35;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .mobile-fs-selected-product small,
    .mobile-fs-price-product small {
      display: block;
      margin-top: 4px;
      color: #a0a5ab;
      font-size: 10px;
    }
    .mobile-fs-selected-price {
      color: #e04c47;
      font-size: 12px;
      white-space: nowrap;
    }
    .mobile-fs-form-tip {
      padding: 0 4px;
      color: #999fa6;
      font-size: 11px;
      line-height: 1.6;
    }

    .mobile-fs-select-shell { background: #fff; }
    .mobile-fs-search {
      height: 54px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: #fff;
      border-bottom: 1px solid #eef0f1;
    }
    .mobile-fs-search svg {
      width: 18px;
      height: 18px;
      margin-left: 10px;
      color: #8e949b;
    }
    .mobile-fs-search input {
      flex: 1;
      height: 36px;
      padding: 0 12px 0 0;
      border: none;
      outline: none;
      border-radius: 18px;
      background: #f4f5f6;
      color: #34393f;
      font-family: inherit;
      font-size: 13px;
    }
    .mobile-fs-search {
      position: relative;
      padding-left: 38px;
    }
    .mobile-fs-search svg {
      position: absolute;
      left: 11px;
      z-index: 1;
    }
    .mobile-fs-search input { padding-left: 13px; }
    .mobile-fs-select-main {
      flex: 1;
      min-height: 0;
      display: flex;
      overflow: hidden;
    }
    .mobile-fs-category-rail {
      width: 84px;
      flex-shrink: 0;
      overflow-y: auto;
      background: #f4f5f6;
    }
    .mobile-fs-category-rail button {
      position: relative;
      width: 100%;
      min-height: 52px;
      padding: 8px 6px;
      color: #6c7279;
      font-size: 12px;
      line-height: 1.3;
    }
    .mobile-fs-category-rail button.active {
      background: #fff;
      color: #2f7659;
      font-weight: 600;
    }
    .mobile-fs-category-rail button.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 15px;
      width: 3px;
      height: 22px;
      border-radius: 0 2px 2px 0;
      background: #317a5b;
    }
    .mobile-fs-product-panel {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      background: #fff;
    }
    .mobile-fs-select-toolbar {
      height: 43px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 11px;
      border-bottom: 1px solid #eef0f1;
      color: #747a81;
      font-size: 11px;
    }
    .mobile-fs-select-toolbar label {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #4d5359;
    }
    .mobile-fs-select-toolbar input {
      accent-color: #317a5b;
    }
    .mobile-fs-select-toolbar span { flex: 1; }
    .mobile-fs-select-toolbar strong { color: #317a5b; }
    .mobile-fs-select-toolbar button { color: #317a5b; font-size: 11px; }
    .mobile-fs-product-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }
    .mobile-fs-product-row {
      position: relative;
      display: grid;
      grid-template-columns: 20px 56px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-height: 88px;
      padding: 11px 11px 11px 9px;
      border-bottom: 1px solid #f0f1f2;
      background: #fff;
    }
    .mobile-fs-product-row[hidden] { display: none !important; }
    .mobile-fs-product-row.selected { background: #fbfefc; }
    .mobile-fs-product-row > input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .mobile-fs-checkmark {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #c6cbd0;
      border-radius: 50%;
      background: #fff;
    }
    .mobile-fs-product-row > input:checked + .mobile-fs-checkmark {
      border-color: #317a5b;
      background: #317a5b;
    }
    .mobile-fs-product-row > input:checked + .mobile-fs-checkmark::after {
      content: '✓';
      color: #fff;
      font-size: 11px;
      font-weight: 700;
    }
    .mobile-fs-product-thumb {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 7px;
      font-size: 24px;
    }
    .mobile-fs-product-row .mobile-fs-product-thumb {
      width: 56px;
      height: 56px;
      font-size: 29px;
    }
    .mobile-fs-product-thumb.orange { background: linear-gradient(135deg, #fff0dc, #ffd09a); }
    .mobile-fs-product-thumb.purple { background: linear-gradient(135deg, #efe8ff, #cbb7f6); }
    .mobile-fs-product-thumb.blue { background: linear-gradient(135deg, #e3f2ff, #b8d9f4); }
    .mobile-fs-product-thumb.yellow { background: linear-gradient(135deg, #fff5cf, #f3d477); }
    .mobile-fs-product-thumb.green { background: linear-gradient(135deg, #e2f5e8, #b6dec4); }
    .mobile-fs-product-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .mobile-fs-product-copy strong {
      display: -webkit-box;
      overflow: hidden;
      color: #30353b;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.35;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .mobile-fs-product-copy small {
      margin-top: 4px;
      overflow: hidden;
      color: #9da2a8;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-fs-product-copy em {
      margin-top: 5px;
      color: #de514c;
      font-size: 10px;
      font-style: normal;
    }
    .mobile-fs-no-products {
      padding: 72px 16px;
      color: #a4a9af;
      font-size: 12px;
      text-align: center;
    }

    .mobile-fs-price-tip {
      margin-bottom: 10px;
      color: #999fa6;
      font-size: 11px;
    }
    .mobile-fs-price-card {
      margin-bottom: 11px;
      padding: 14px;
      border-radius: 9px;
      background: #fff;
    }
    .mobile-fs-price-product {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding-bottom: 13px;
      border-bottom: 1px solid #f0f1f2;
    }
    .mobile-fs-price-product .mobile-fs-product-thumb {
      width: 56px;
      height: 56px;
      font-size: 29px;
    }
    .mobile-fs-price-retail,
    .mobile-fs-price-input {
      min-height: 49px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f0f1f2;
      color: #555b62;
      font-size: 13px;
    }
    .mobile-fs-price-retail strong {
      color: #30353a;
      font-weight: 500;
    }
    .mobile-fs-price-input { border-bottom: none; }
    .mobile-fs-price-input > span { color: #30353a; }
    .mobile-fs-price-input > div {
      width: 126px;
      height: 36px;
      display: flex;
      align-items: center;
      overflow: hidden;
      border: 1px solid #dfe2e5;
      border-radius: 5px;
      background: #fff;
    }
    .mobile-fs-price-input b {
      padding-left: 10px;
      color: #e04c47;
      font-size: 14px;
      font-weight: 500;
    }
    .mobile-fs-price-input input {
      flex: 1;
      min-width: 0;
      height: 34px;
      padding: 0 9px 0 4px;
      border: none;
      outline: none;
      color: #e04c47;
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      text-align: right;
    }

    /* 限时特价详情与编辑确认 */
    .mobile-fs-activity-card[role="button"] {
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .mobile-fs-activity-card[role="button"]:active {
      transform: scale(.992);
      box-shadow: 0 1px 5px rgba(24,33,29,.08);
    }
    .mobile-fs-detail-shell { background: #f5f6f7; }
    .mobile-fs-detail-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 12px 12px 24px;
    }
    .mobile-fs-detail-body::-webkit-scrollbar { display: none; }
    .mobile-fs-detail-card {
      margin-bottom: 12px;
      padding: 0 14px;
      border-radius: 9px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(24,33,29,.02);
    }
    .mobile-fs-detail-card.compact { padding: 0; }
    .mobile-fs-detail-row {
      min-height: 56px;
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid #f0f1f2;
      color: #2f3338;
    }
    .mobile-fs-detail-row:last-child { border-bottom: none; }
    .mobile-fs-detail-row > span {
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
    }
    .mobile-fs-detail-row strong {
      overflow: hidden;
      color: #34383e;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-fs-detail-row input,
    .mobile-fs-detail-row select {
      width: 100%;
      min-width: 0;
      height: 38px;
      padding: 0 10px;
      border: 1px solid #cfe1d8;
      outline: none;
      border-radius: 5px;
      background: #fbfefc;
      color: #2f3439;
      font-family: inherit;
      font-size: 13px;
    }
    .mobile-fs-detail-row input:focus,
    .mobile-fs-detail-row select:focus {
      border-color: #4caf82;
      box-shadow: 0 0 0 2px rgba(76,175,130,.1);
    }
    .mobile-fs-detail-product-row {
      min-height: 56px;
      width: 100%;
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr) 16px;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      color: #30343a;
      text-align: left;
    }
    .mobile-fs-detail-product-row > span {
      font-size: 14px;
      font-weight: 500;
    }
    .mobile-fs-detail-product-row strong {
      color: #44494f;
      font-size: 14px;
      font-weight: 400;
    }
    .mobile-fs-detail-product-row b {
      color: #989da3;
      font-size: 23px;
      font-weight: 400;
      line-height: 1;
      text-align: right;
    }
    .mobile-fs-detail-edit-tip {
      padding: 0 4px;
      color: #8e949a;
      font-size: 11px;
      line-height: 1.6;
    }

    .mobile-fs-edit-confirm-mask {
      position: absolute;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(22, 27, 25, .42);
      animation: fadeIn .18s ease;
    }
    .mobile-fs-edit-confirm {
      width: 100%;
      overflow: hidden;
      border: 1px solid #dfe2e4;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 14px 40px rgba(0,0,0,.22);
    }
    .mobile-fs-edit-confirm-head {
      height: 49px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      border-bottom: 1px solid #eceeef;
    }
    .mobile-fs-edit-confirm-head strong {
      color: #292d31;
      font-size: 14px;
      font-weight: 500;
    }
    .mobile-fs-edit-confirm-head button {
      width: 30px;
      height: 30px;
      color: #8e949a;
      font-size: 20px;
      line-height: 1;
    }
    .mobile-fs-edit-confirm-body {
      min-height: 92px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 18px 15px;
    }
    .mobile-fs-edit-confirm-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #fff2d6;
      color: #efa52b;
      font-size: 19px;
      font-weight: 700;
    }
    .mobile-fs-edit-confirm-body h3 {
      margin: 1px 0 7px;
      color: #30343a;
      font-size: 14px;
      font-weight: 600;
    }
    .mobile-fs-edit-confirm-body p {
      color: #8c9299;
      font-size: 11px;
      line-height: 1.55;
    }
    .mobile-fs-edit-confirm-actions {
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 0 13px;
      border-top: 1px solid #eceeef;
    }
    .mobile-fs-edit-confirm-actions button {
      min-width: 78px;
      height: 34px;
      padding: 0 17px;
      border-radius: 18px;
      font-size: 13px;
    }
    .mobile-fs-edit-confirm-actions .cancel {
      border: 1px solid #dfe2e5;
      background: #fff;
      color: #737980;
    }
    .mobile-fs-edit-confirm-actions .confirm {
      background: linear-gradient(90deg, #5bbb91, #4aaa7e);
      color: #fff;
      font-weight: 500;
    }

    /* ===== 移动端本店商品：左类目 / 右商品 ===== */
    .mobile-product-page {
      min-height: 100%;
      background: #f5f6f7;
      color: #20242a;
    }
    .mobile-product-head {
      position: sticky;
      top: 0;
      z-index: 12;
      padding: 6px 12px 10px;
      background: #fff;
      box-shadow: 0 1px 0 rgba(0,0,0,.04);
    }
    .mobile-product-top {
      position: relative;
      height: 48px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 78px;
      align-items: center;
    }
    .mobile-product-back {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #292e34;
    }
    .mobile-product-back svg { width: 28px; height: 28px; }
    .mobile-product-top h1 {
      overflow: hidden;
      color: #252a31;
      font-size: 19px;
      font-weight: 500;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-product-manage-trigger {
      position: relative;
      z-index: 22;
      color: #4e5359;
      font-size: 14px;
      text-align: right;
      white-space: nowrap;
    }
    .mobile-product-manage-mask {
      position: fixed;
      inset: 0;
      z-index: 20;
      background: transparent;
    }
    .mobile-product-manage-menu {
      position: absolute;
      top: 48px;
      right: 0;
      z-index: 23;
      width: 160px;
      padding: 3px 0;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 5px 20px rgba(30,39,35,.16);
    }
    .mobile-product-manage-menu::before {
      content: '';
      position: absolute;
      top: -7px;
      right: 24px;
      width: 14px;
      height: 14px;
      transform: rotate(45deg);
      border-radius: 2px 0 0;
      background: #fff;
    }
    .mobile-product-manage-menu button {
      position: relative;
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 16px;
      border-bottom: 1px solid #f0f1f2;
      color: #292d32;
      font-size: 15px;
      text-align: left;
    }
    .mobile-product-manage-menu button:last-child { border-bottom: none; }
    .mobile-product-manage-menu svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }
    .mobile-product-search-line {
      padding-top: 6px;
    }
    .mobile-product-search {
      height: 38px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border-radius: 20px;
      background: #f1f2f3;
      color: #9da2a8;
    }
    .mobile-product-search svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .mobile-product-search input {
      min-width: 0;
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      color: #343940;
      font-family: inherit;
      font-size: 12px;
    }
    .mobile-product-search input::placeholder { color: #a3a8ae; }
    .mobile-product-tool-line {
      display: grid;
      grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      padding-top: 9px;
    }
    .mobile-product-sort-trigger {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 3px;
      color: #4e555b;
      font-size: 13px;
      white-space: nowrap;
    }
    .mobile-product-sort-trigger span {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-product-sort-trigger svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      transition: transform .18s ease;
    }
    .mobile-product-sort-trigger.active svg { transform: rotate(180deg); }
    .mobile-product-ai-entry {
      min-width: 0;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0 9px;
      border: 1px solid #ccebdc;
      border-radius: 15px;
      background: #f0faf5;
      color: #3b956c;
      font-size: 11px;
      white-space: nowrap;
    }
    .mobile-product-ai-entry > span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobile-product-ai-icon {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 50%;
      background: linear-gradient(135deg, #57c58f, #399c72);
      color: #fff;
      font-size: 8px;
      font-weight: 700;
    }
    .mobile-product-filter {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      color: #555b62;
      font-size: 13px;
    }
    .mobile-product-filter svg { width: 21px; height: 21px; }
    .mobile-product-sort-panel {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 25;
      max-height: calc(100vh - 145px);
      overflow-y: auto;
      padding-bottom: 12px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(28,37,33,.08);
    }
    .mobile-product-sort-option {
      width: 100%;
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 22px 0 20px;
      border-bottom: 1px solid #f0f1f2;
      color: #343a40;
      font-size: 14px;
      text-align: left;
    }
    .mobile-product-sort-option.active {
      background: #eef9f3;
      color: #288d62;
    }
    .mobile-product-sort-option svg {
      width: 21px;
      height: 21px;
      flex-shrink: 0;
      color: #33aa73;
    }
    .mobile-product-layout {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      align-items: stretch;
      min-height: calc(100vh - 195px);
      padding-bottom: 78px;
    }
    .mobile-product-cats {
      overflow-y: auto;
      padding: 8px 0 10px;
      border-right: 1px solid #eceff1;
      background: #fff;
    }
    .mobile-product-cats::-webkit-scrollbar,
    .mobile-product-list::-webkit-scrollbar { display: none; }
    .mobile-product-cat {
      position: relative;
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 9px;
      border-left: 3px solid transparent;
      color: #7b8087;
      font-size: 13px;
      line-height: 1.25;
      text-align: center;
    }
    .mobile-product-cat.active {
      border-left-color: #48bd83;
      background: #eef9f3;
      color: #2f9368;
      font-weight: 700;
    }
    .mobile-product-cat.root {
      padding-right: 19px;
      font-weight: 700;
    }
    .mobile-product-cat.root::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 9px;
      width: 6px;
      height: 6px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-50%) rotate(-45deg);
      opacity: .45;
      transition: transform .16s ease;
    }
    .mobile-product-cat.root.expanded::after {
      transform: translateY(-70%) rotate(45deg);
    }
    .mobile-product-cat.child {
      min-height: 38px;
      justify-content: flex-start;
      padding: 7px 6px 7px 16px;
      background: #fff;
      color: #8a8f98;
      font-size: 12px;
      text-align: left;
    }
    .mobile-product-cat.child::before {
      content: '';
      width: 4px;
      height: 4px;
      flex: 0 0 auto;
      margin-right: 6px;
      border-radius: 50%;
      background: #cfd6d2;
    }
    .mobile-product-cat.child.active {
      border-left-color: #48bd83;
      background: #f3fbf7;
      color: #2f9368;
      font-weight: 700;
    }
    .mobile-product-cat.child.active::before { background: #48bd83; }
    .mobile-product-content { min-width: 0; }
    .mobile-product-list {
      padding: 8px 8px 0;
    }
    .mobile-product-card {
      min-height: 122px;
      display: grid;
      grid-template-columns: 66px minmax(0, 1fr);
      gap: 9px;
      margin-bottom: 9px;
      padding: 10px 8px;
      border: 1px solid #eef0f2;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(24,33,29,.02);
    }
    .mobile-product-card[hidden] { display: none !important; }
    .mobile-product-thumb {
      height: 76px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      align-self: start;
      overflow: hidden;
      border-radius: 7px;
      font-weight: 700;
    }
    .mobile-product-thumb > span {
      font-size: 25px;
      line-height: 1;
    }
    .mobile-product-thumb > small {
      max-width: 58px;
      margin-top: 7px;
      overflow: hidden;
      color: rgba(39,44,49,.62);
      font-size: 9px;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-product-thumb.lilac { background: linear-gradient(145deg,#eee8ff,#d9cef4); }
    .mobile-product-thumb.blue { background: linear-gradient(145deg,#dff0ff,#9dd0ec); color:#176b9d; }
    .mobile-product-thumb.yellow { background: linear-gradient(145deg,#fff4bf,#ffd75f); }
    .mobile-product-thumb.orange { background: linear-gradient(145deg,#fff1d8,#ffc980); }
    .mobile-product-thumb.cyan { background: linear-gradient(145deg,#dff8f6,#aee1dd); }
    .mobile-product-thumb.pink { background: linear-gradient(145deg,#ffe8ec,#f5b9c4); }
    .mobile-product-thumb.green { background: linear-gradient(145deg,#e2f5e8,#b6dec4); }
    .mobile-product-info {
      position: relative;
      min-width: 0;
    }
    .mobile-product-info h3 {
      min-height: 34px;
      padding-right: 20px;
      overflow: hidden;
      color: #252a31;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .mobile-product-more {
      position: absolute;
      top: -7px;
      right: -4px;
      width: 28px;
      height: 28px;
      color: #9298a0;
      font-size: 21px;
      line-height: 1;
    }
    .mobile-product-spec {
      display: inline-flex;
      max-width: 100%;
      height: 22px;
      align-items: center;
      margin-top: 2px;
      padding: 0 7px;
      overflow: hidden;
      border-radius: 11px;
      background: #f0f1f2;
      color: #90969d;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-product-metrics {
      display: flex;
      gap: 18px;
      margin-top: 7px;
      color: #90969d;
      font-size: 11px;
    }
    .mobile-product-metrics .danger { color: #e25b54; }
    .mobile-product-price-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-top: 7px;
      white-space: nowrap;
    }
    .mobile-product-price-row strong {
      color: #df3e3e;
      font-size: 17px;
      font-weight: 700;
    }
    .mobile-product-price-row span {
      overflow: hidden;
      color: #8d939a;
      font-size: 11px;
      text-overflow: ellipsis;
    }
    .mobile-product-empty {
      display: none;
      min-height: 220px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
      color: #9da3a9;
    }
    .mobile-product-empty.show { display: flex; }
    .mobile-product-empty span { font-size: 40px; }
    .mobile-product-empty strong { font-size: 13px; font-weight: 500; }
    .mobile-product-footer {
      position: sticky;
      bottom: 0;
      z-index: 16;
      display: flex;
      justify-content: center;
      padding: 10px 12px 12px;
      background: linear-gradient(to top,#fff 78%,rgba(255,255,255,0));
    }
    .mobile-product-footer button {
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 25px;
      font-size: 15px;
      font-weight: 700;
    }
    .mobile-product-footer button svg { width: 17px; height: 17px; }
    .mobile-product-footer .add {
      min-width: 170px;
      background: linear-gradient(90deg,#55bc7c,#267858);
      color: #fff;
    }

    /* ===== 移动端活体管理：左类目 / 右活体 ===== */
    .mobile-live-summary-line {
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 8px;
      color: #4baa7c;
      font-size: 12px;
    }
    .mobile-live-summary-line button {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: #555b62;
      font-size: 13px;
    }
    .mobile-live-summary-line button svg {
      width: 18px;
      height: 18px;
    }
    .mobile-live-layout {
      min-height: calc(100vh - 182px);
    }
    .mobile-live-card {
      min-height: 154px;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 9px;
      margin-bottom: 9px;
      padding: 10px 8px 0;
      overflow: hidden;
      border: 1px solid #eef0f2;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(24,33,29,.02);
      box-sizing: border-box;
    }
    .mobile-live-card[hidden] { display: none !important; }
    .mobile-live-thumb {
      width: 64px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: start;
      overflow: hidden;
      border-radius: 8px;
      background: linear-gradient(145deg,#f4f8fb,#e5eef6);
    }
    .mobile-live-avatar {
      width: 62px;
      height: 62px;
    }
    .mobile-live-info {
      position: relative;
      min-width: 0;
      padding-top: 1px;
    }
    .mobile-live-info h3 {
      min-height: 25px;
      padding-right: 48px;
      overflow: hidden;
      color: #252a31;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.45;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-live-info h3 b {
      margin-left: 3px;
      color: #4c80ef;
      font-size: 17px;
      font-weight: 600;
    }
    .mobile-live-status {
      position: absolute;
      top: 2px;
      right: 0;
      color: #43ac7d;
      font-size: 11px;
      white-space: nowrap;
    }
    .mobile-live-status.sold { color: #9ba1a8; }
    .mobile-live-breed {
      display: inline-flex;
      max-width: 100%;
      height: 21px;
      align-items: center;
      padding: 0 7px;
      overflow: hidden;
      border-radius: 11px;
      background: #f0f1f2;
      color: #90969d;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-live-price-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 9px;
      white-space: nowrap;
    }
    .mobile-live-price-row strong {
      color: #df3e3e;
      font-size: 17px;
      font-weight: 700;
    }
    .mobile-live-price-row span {
      overflow: hidden;
      color: #8d939a;
      font-size: 10px;
      text-overflow: ellipsis;
    }
    .mobile-live-actions {
      grid-column: 1 / -1;
      min-height: 43px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin: 1px -8px 0;
      border-top: 1px solid #f0f2f3;
      background: #fbfcfd;
    }
    .mobile-live-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: #555d65;
      font-size: 12px;
    }
    .mobile-live-actions button + button { border-left: 1px solid #edf0f2; }
    .mobile-live-actions svg {
      width: 19px;
      height: 19px;
      color: #4ba97a;
    }

    .mobile-live-breed-form {
      display: grid;
      gap: 14px;
    }
    .mobile-live-breed-parent {
      padding: 12px 14px;
      border-radius: 10px;
      background: #f5f7f6;
      color: #626970;
      font-size: 14px;
    }
    .mobile-live-breed-parent strong {
      color: #252b31;
      font-weight: 600;
    }
    .mobile-live-breed-field {
      display: grid;
      gap: 8px;
      color: #333940;
      font-size: 14px;
    }
    .mobile-live-breed-field > span:first-child i {
      margin-right: 4px;
      color: #ef3f3f;
      font-style: normal;
    }
    .mobile-live-breed-input {
      position: relative;
      display: block;
    }
    .mobile-live-breed-input input {
      width: 100%;
      height: 48px;
      padding: 0 44px 0 14px;
      border: 1px solid #dce2df;
      outline: none;
      border-radius: 24px;
      background: #fff;
      color: #292f35;
      font-family: inherit;
      font-size: 15px;
      box-sizing: border-box;
    }
    .mobile-live-breed-input input:focus {
      border-color: #67b88c;
      box-shadow: 0 0 0 4px rgba(76,175,130,.12);
    }
    .mobile-live-breed-input svg {
      position: absolute;
      top: 50%;
      right: 15px;
      width: 21px;
      height: 21px;
      color: #9ba2a8;
      transform: translateY(-50%);
      pointer-events: none;
    }
    .mobile-live-breed-suggestions {
      display: none;
      overflow: hidden;
      border: 1px solid #e4e8e6;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(35,45,40,.12);
    }
    .mobile-live-breed-suggestions.show { display: block; }
    .mobile-live-breed-suggestions-title {
      padding: 9px 13px;
      background: #f4f7f5;
      color: #7f878d;
      font-size: 11px;
    }
    .mobile-live-breed-suggestions button {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      border-top: 1px solid #f0f2f1;
      color: #292f35;
      text-align: left;
    }
    .mobile-live-breed-suggestions button[hidden] { display: none; }
    .mobile-live-breed-suggestions button:active { background: #eef8f3; }
    .mobile-live-breed-suggestions button strong {
      font-size: 15px;
      font-weight: 500;
    }
    .mobile-live-breed-suggestions button span {
      flex-shrink: 0;
      color: #4aa477;
      font-size: 11px;
    }
    .mobile-live-breed-suggestions-empty {
      padding: 16px 13px;
      border-top: 1px solid #f0f2f1;
      color: #969da3;
      font-size: 12px;
      line-height: 1.55;
      text-align: center;
    }

    /* ===== 移动端新增商品 ===== */
    .mobile-product-create-scroll {
      background: #f3f5f4;
      scroll-behavior: smooth;
    }
    .mobile-product-create-page {
      min-height: 100%;
      padding-bottom: 18px;
      background: #f3f5f4;
      color: #252b30;
    }
    .mobile-pc-head {
      position: sticky;
      top: 0;
      z-index: 18;
      height: 54px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 48px;
      align-items: center;
      padding: 0 8px;
      background: rgba(255,255,255,.97);
      box-shadow: 0 1px 0 rgba(27,38,32,.06);
      backdrop-filter: blur(8px);
    }
    .mobile-pc-head h1 {
      color: #242a2f;
      font-size: 19px;
      font-weight: 600;
      text-align: center;
    }
    .mobile-pc-back {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2d3338;
    }
    .mobile-pc-back svg { width: 27px; height: 27px; }
    .mobile-pc-mode {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 10px 12px;
      padding: 4px;
      border-radius: 14px;
      background: #e7ece9;
    }
    .mobile-pc-mode button {
      min-height: 54px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border-radius: 11px;
      color: #737c77;
    }
    .mobile-pc-mode button strong {
      font-size: 15px;
      font-weight: 700;
    }
    .mobile-pc-mode button span {
      font-size: 10px;
      opacity: .8;
    }
    .mobile-pc-mode button.active {
      background: #fff;
      color: #2d9568;
      box-shadow: 0 2px 8px rgba(30,84,59,.1);
    }
    .mobile-pc-mode-panel[hidden],
    .mobile-pc-setting-panel[hidden],
    .mobile-pc-sku-advanced[hidden],
    .mobile-pc-field[hidden] { display: none !important; }
    .mobile-pc-card {
      margin: 10px 12px 0;
      padding: 17px 15px;
      border: 1px solid #edf0ee;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(30,49,40,.035);
    }
    .mobile-pc-card-title {
      min-height: 28px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 13px;
    }
    .mobile-pc-card-title > span,
    .mobile-pc-card-title > div > span {
      color: #272d32;
      font-size: 16px;
      font-weight: 750;
    }
    .mobile-pc-card-title small {
      color: #939b96;
      font-size: 11px;
      font-weight: 400;
    }
    .mobile-pc-card-title small i,
    .mobile-pc-card-title i,
    .mobile-pc-field > label i,
    .mobile-pc-label-row > label i,
    .mobile-pc-note i {
      margin-right: 3px;
      color: #ed5b55;
      font-style: normal;
    }
    .mobile-pc-field {
      min-width: 0;
      margin-top: 13px;
    }
    .mobile-pc-card-title + .mobile-pc-field,
    .mobile-pc-card-title + .mobile-pc-field-grid,
    .mobile-pc-card-title + .mobile-pc-upload-grid,
    .mobile-pc-sku-body > .mobile-pc-field:first-child { margin-top: 0; }
    .mobile-pc-field > label,
    .mobile-pc-label-row > label {
      display: block;
      margin-bottom: 7px;
      color: #555e59;
      font-size: 12px;
      font-weight: 600;
    }
    .mobile-pc-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .mobile-pc-label-row > span {
      color: #9ca39f;
      font-size: 10px;
    }
    .mobile-pc-label-row .mobile-pc-check {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 0;
      color: #348e65;
      font-size: 11px;
      font-weight: 600;
    }
    .mobile-pc-check input {
      width: 17px;
      height: 17px;
      accent-color: #4caf82;
    }
    .mobile-pc-field > input,
    .mobile-pc-field > select,
    .mobile-pc-field > textarea,
    .mobile-pc-addon,
    .mobile-pc-input-action > input {
      width: 100%;
      border: 1px solid #dde3df;
      border-radius: 10px;
      background: #fff;
      color: #30363a;
      font-family: inherit;
      font-size: 13px;
      outline: none;
    }
    .mobile-pc-field > input,
    .mobile-pc-field > select,
    .mobile-pc-input-action > input {
      height: 44px;
      padding: 0 12px;
    }
    .mobile-pc-field > select {
      padding-right: 30px;
      appearance: auto;
    }
    .mobile-pc-field > textarea {
      min-height: 78px;
      padding: 11px 12px;
      resize: vertical;
      line-height: 1.5;
    }
    .mobile-pc-field input::placeholder,
    .mobile-pc-field textarea::placeholder { color: #b0b7b3; }
    .mobile-pc-field input:focus,
    .mobile-pc-field select:focus,
    .mobile-pc-field textarea:focus,
    .mobile-pc-addon:focus-within,
    .mobile-pc-input-action:focus-within {
      border-color: #57b986;
      box-shadow: 0 0 0 3px rgba(75,175,125,.08);
    }
    .mobile-pc-field input:disabled,
    .mobile-pc-field select:disabled,
    .mobile-pc-field textarea:disabled {
      background: #f1f3f2;
      color: #9ca49f;
      -webkit-text-fill-color: #9ca49f;
      opacity: 1;
    }
    .mobile-pc-field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 13px;
    }
    .mobile-pc-field-grid > .mobile-pc-field { margin-top: 0; }
    .mobile-pc-input-action {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 88px;
      overflow: hidden;
      border: 1px solid #dde3df;
      border-radius: 10px;
      background: #fff;
    }
    .mobile-pc-input-action > input {
      min-width: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none !important;
    }
    .mobile-pc-input-action > button {
      min-height: 44px;
      border-left: 1px solid #e1e6e3;
      background: #f0faf5;
      color: #329267;
      font-size: 12px;
      font-weight: 700;
    }
    .mobile-pc-addon {
      height: 44px;
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }
    .mobile-pc-addon input {
      min-width: 0;
      flex: 1;
      padding: 0 10px;
      border: 0;
      outline: 0;
      background: transparent;
      color: inherit;
      font-family: inherit;
      font-size: 13px;
    }
    .mobile-pc-addon span {
      min-width: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #e1e6e3;
      background: #fafbfa;
      color: #69726d;
      font-size: 11px;
    }
    .mobile-pc-upload-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .mobile-pc-upload {
      width: 100%;
      height: 116px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      overflow: hidden;
      border: 1px dashed #bdc9c2;
      border-radius: 12px;
      background: #f8fbf9 center / cover no-repeat;
      color: #8c9690;
    }
    .mobile-pc-upload.compact {
      width: 104px;
      height: 104px;
    }
    .mobile-pc-upload.wide {
      height: 112px;
    }
    .mobile-pc-upload input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .mobile-pc-upload-plus {
      color: #4baa78;
      font-size: 28px;
      font-weight: 300;
      line-height: 1;
    }
    .mobile-pc-upload-text {
      font-size: 11px;
      font-weight: 600;
    }
    .mobile-pc-upload.has-image {
      border-style: solid;
      border-color: #9acdb2;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0,0,0,.65);
    }
    .mobile-pc-upload.has-image .mobile-pc-upload-plus { opacity: 0; }
    .mobile-pc-upload.has-image .mobile-pc-upload-text {
      margin-top: auto;
      width: 100%;
      padding: 7px 5px;
      background: rgba(23,40,31,.55);
      text-align: center;
    }
    .mobile-pc-tip {
      margin-top: 8px;
      color: #9ba39e;
      font-size: 10px;
      line-height: 1.5;
    }
    .mobile-pc-setting-row {
      min-height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid #edf0ee;
    }
    .mobile-pc-card-title + .mobile-pc-setting-row { border-top: 0; }
    .mobile-pc-setting-row > div {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mobile-pc-setting-row strong {
      color: #343b37;
      font-size: 13px;
      font-weight: 650;
    }
    .mobile-pc-setting-row > div > span {
      color: #9aa19d;
      font-size: 10px;
    }
    .mobile-pc-switch {
      min-width: 78px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      color: #959d98;
      font-size: 10px;
      font-style: normal;
    }
    .mobile-pc-switch input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .mobile-pc-switch-track {
      position: relative;
      width: 42px;
      height: 24px;
      flex-shrink: 0;
      border-radius: 13px;
      background: #d9dedb;
      transition: background .18s ease;
    }
    .mobile-pc-switch-track::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,.18);
      transition: transform .18s ease;
    }
    .mobile-pc-switch input:checked + .mobile-pc-switch-track { background: #4caf82; }
    .mobile-pc-switch input:checked + .mobile-pc-switch-track::after { transform: translateX(18px); }
    .mobile-pc-switch input:checked ~ em { color: #2f9468; }
    .mobile-pc-switch input:disabled + .mobile-pc-switch-track { opacity: .5; }
    .mobile-pc-switch em {
      width: 24px;
      font-style: normal;
      text-align: left;
    }
    .mobile-pc-setting-panel {
      margin: 0 -2px 10px;
      padding: 11px;
      border-radius: 10px;
      background: #f3f8f5;
    }
    .mobile-pc-setting-panel .mobile-pc-field { margin-top: 0; }
    .mobile-pc-note {
      margin-top: 8px;
      padding: 9px 10px;
      border-radius: 8px;
      background: #fff8ed;
      color: #8e7550;
      font-size: 10px;
      line-height: 1.45;
    }
    .mobile-pc-card-title-stack {
      display: block;
    }
    .mobile-pc-card-title-stack > div:first-child {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }
    .mobile-pc-sku-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }
    .mobile-pc-sku-actions button {
      min-height: 42px;
      padding: 0 8px;
      border: 1px solid #b8d7c6;
      border-radius: 10px;
      background: #fff;
      color: #378e66;
      font-size: 12px;
      font-weight: 650;
    }
    .mobile-pc-sku-actions button.primary {
      border-color: #4caf82;
      background: #4caf82;
      color: #fff;
    }
    .mobile-pc-sku-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .mobile-pc-sku-card {
      overflow: hidden;
      border: 1px solid #dce5e0;
      border-radius: 12px;
      background: #fbfcfb;
    }
    .mobile-pc-sku-head {
      min-height: 58px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 46px;
      align-items: stretch;
      border-bottom: 1px solid #e7ece9;
      background: #f0f7f3;
    }
    .mobile-pc-sku-card.is-collapsed .mobile-pc-sku-head { border-bottom: 0; }
    .mobile-pc-sku-toggle {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) 20px;
      align-items: center;
      gap: 8px;
      padding: 0 10px;
      text-align: left;
    }
    .mobile-pc-sku-index {
      height: 26px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 14px;
      background: #dff1e8;
      color: #348e65;
      font-size: 10px;
      font-weight: 750;
    }
    .mobile-pc-sku-summary {
      overflow: hidden;
      color: #38413c;
      font-size: 12px;
      font-weight: 650;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-pc-sku-toggle svg {
      width: 18px;
      height: 18px;
      color: #7b8981;
      transition: transform .18s ease;
    }
    .mobile-pc-sku-card.is-collapsed .mobile-pc-sku-toggle svg { transform: rotate(-90deg); }
    .mobile-pc-sku-delete {
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #dfe7e2;
      color: #df665e;
    }
    .mobile-pc-sku-delete svg { width: 20px; height: 20px; }
    .mobile-pc-sku-body {
      padding: 14px 12px;
      background: #fff;
    }
    .mobile-pc-sku-card.is-collapsed .mobile-pc-sku-body { display: none; }
    .mobile-pc-sku-advanced {
      margin-top: 13px;
      padding: 12px 10px;
      border: 1px solid #dcebe3;
      border-radius: 10px;
      background: #f3f9f6;
    }
    .mobile-pc-subtitle {
      margin-bottom: 10px;
      color: #378b64;
      font-size: 11px;
      font-weight: 700;
    }
    .mobile-pc-inline-setting {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #49534d;
      font-size: 12px;
      font-weight: 600;
    }
    .mobile-pc-detail-upload {
      margin-top: 17px;
      padding-top: 16px;
      border-top: 1px solid #edf0ee;
    }
    .mobile-product-create-actions {
      position: relative;
      z-index: 24;
      flex-shrink: 0;
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: 10px;
      padding: 10px 12px 12px;
      border-top: 1px solid #e7ebe8;
      background: rgba(255,255,255,.98);
      box-shadow: 0 -5px 18px rgba(30,48,39,.06);
    }
    .mobile-product-create-actions button {
      height: 48px;
      border-radius: 24px;
      font-size: 15px;
      font-weight: 700;
    }
    .mobile-product-create-actions .cancel {
      border: 1px solid #d9dfdc;
      background: #fff;
      color: #5f6863;
    }
    .mobile-product-create-actions .primary {
      background: linear-gradient(90deg,#55bc7c,#287c5b);
      color: #fff;
      box-shadow: 0 5px 14px rgba(55,142,99,.22);
    }
    .mobile-pc-input-action > button:active,
    .mobile-pc-sku-actions button:active,
    .mobile-product-create-actions button:active { transform: scale(.985); }

    /* ===== 移动端新增商品 · 多规格四步流程 ===== */
    .mobile-product-create-scroll {
      position: relative;
    }
    .mobile-pc-wizard-mode {
      padding-bottom: 8px;
    }
    .mobile-pc-wizard-step[hidden],
    .mobile-pc-sku-editor-page[hidden],
    .mobile-product-create-actions[hidden] {
      display: none !important;
    }
    .mobile-pc-wizard-progress {
      margin: 10px 12px 0;
      padding: 14px 14px 13px;
      border: 1px solid #e6ece8;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(31,58,43,.055);
    }
    .mobile-pc-wizard-current {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 13px;
    }
    .mobile-pc-wizard-current span {
      min-width: 47px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: #e7f5ed;
      color: #2d8d62;
      font-size: 12px;
      font-weight: 750;
    }
    .mobile-pc-wizard-current strong {
      color: #27302b;
      font-size: 15px;
      font-weight: 750;
    }
    .mobile-pc-wizard-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 2px;
    }
    .mobile-pc-wizard-track::before {
      content: '';
      position: absolute;
      top: 13px;
      left: 11%;
      right: 11%;
      height: 2px;
      background: #e2e8e4;
    }
    .mobile-pc-wizard-track button {
      position: relative;
      z-index: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: #99a19c;
    }
    .mobile-pc-wizard-track button:disabled {
      opacity: 1;
    }
    .mobile-pc-wizard-track button i {
      width: 27px;
      height: 27px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #dfe6e2;
      border-radius: 50%;
      background: #fff;
      color: #8b9690;
      font-size: 11px;
      font-style: normal;
      font-weight: 750;
    }
    .mobile-pc-wizard-track button span {
      overflow: hidden;
      width: 100%;
      font-size: 9px;
      font-weight: 650;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-pc-wizard-track button.active,
    .mobile-pc-wizard-track button.done {
      color: #328d64;
    }
    .mobile-pc-wizard-track button.active i {
      border-color: #3fa873;
      background: #3fa873;
      color: #fff;
      box-shadow: 0 0 0 4px rgba(63,168,115,.12);
    }
    .mobile-pc-wizard-track button.done i {
      border-color: #a7d7bd;
      background: #e9f7ef;
      color: #328d64;
    }
    .mobile-pc-section-intro .mobile-pc-card-title > div {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mobile-pc-section-intro .mobile-pc-card-title > div small {
      display: block;
    }
    .mobile-pc-section-intro .mobile-pc-card-title > b {
      color: #d7e8df;
      font-size: 23px;
      font-weight: 800;
      line-height: 1;
    }
    .mobile-pc-wizard-guide {
      margin: 10px 12px 0;
      padding: 16px;
      border-radius: 15px;
      background: linear-gradient(135deg,#e8f6ee,#f7fbf8);
      color: #4d5b53;
    }
    .mobile-pc-wizard-guide > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .mobile-pc-wizard-guide span {
      color: #348d65;
      font-size: 11px;
      font-weight: 750;
    }
    .mobile-pc-wizard-guide strong {
      color: #2e3933;
      font-size: 15px;
      font-weight: 750;
    }
    .mobile-pc-wizard-guide p {
      margin-top: 8px;
      color: #819087;
      font-size: 11px;
      line-height: 1.55;
    }
    .mobile-pc-sku-summary-card {
      overflow: hidden;
      border: 1px solid #e1e7e3;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 3px 10px rgba(32,55,43,.035);
    }
    .mobile-pc-sku-summary-card.is-complete {
      border-color: #bcdcca;
      background: linear-gradient(135deg,#fff,#f8fcfa);
    }
    .mobile-pc-sku-summary-main {
      width: 100%;
      min-height: 136px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 13px 14px 11px;
      text-align: left;
    }
    .mobile-pc-sku-summary-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .mobile-pc-sku-status {
      height: 23px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 12px;
      background: #fff3e1;
      color: #ba7a25;
      font-size: 10px;
      font-weight: 700;
    }
    .mobile-pc-sku-summary-card.is-complete .mobile-pc-sku-status {
      background: #e8f7ef;
      color: #328c63;
    }
    .mobile-pc-sku-summary-main > strong {
      margin-top: 11px;
      overflow: hidden;
      color: #303a34;
      font-size: 15px;
      font-weight: 750;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-pc-sku-summary-meta {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 7px;
      color: #76827b;
      font-size: 11px;
    }
    .mobile-pc-sku-summary-meta em {
      overflow: hidden;
      font-style: normal;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-pc-sku-summary-meta i {
      width: 3px;
      height: 3px;
      flex-shrink: 0;
      border-radius: 50%;
      background: #c8d0cb;
    }
    .mobile-pc-sku-summary-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid #eef1ef;
      color: #99a29c;
      font-size: 10px;
    }
    .mobile-pc-sku-summary-foot svg {
      width: 17px;
      height: 17px;
      color: #6f7c75;
    }
    .mobile-pc-image-sku-list,
    .mobile-pc-advanced-sku-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .mobile-pc-image-sku-card {
      min-height: 126px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 104px;
      align-items: center;
      gap: 12px;
      padding: 11px;
      border: 1px solid #e2e8e4;
      border-radius: 13px;
      background: #fbfcfb;
    }
    .mobile-pc-image-sku-info {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .mobile-pc-image-sku-info > span,
    .mobile-pc-advanced-sku-head > span {
      height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 12px;
      background: #e4f3eb;
      color: #368e66;
      font-size: 9px;
      font-weight: 750;
    }
    .mobile-pc-image-sku-info strong {
      width: 100%;
      margin-top: 10px;
      overflow: hidden;
      color: #354039;
      font-size: 13px;
      font-weight: 750;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-pc-image-sku-info small {
      width: 100%;
      margin-top: 5px;
      overflow: hidden;
      color: #969f99;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-pc-detail-image {
      height: 132px;
      background-color: #f8fbf9;
    }
    .mobile-pc-advanced-sku-card {
      margin: 10px 12px 0;
      padding: 14px;
      border: 1px solid #e4e9e6;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(30,49,40,.03);
    }
    .mobile-pc-advanced-sku-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 12px;
      border-bottom: 1px solid #edf1ee;
    }
    .mobile-pc-advanced-sku-head strong {
      min-width: 0;
      overflow: hidden;
      color: #354039;
      font-size: 13px;
      font-weight: 750;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-pc-advanced-sku-card .mobile-pc-sku-advanced {
      margin-top: 12px;
    }
    .mobile-pc-inline-setting > span i {
      margin-right: 3px;
      color: #ed5b55;
      font-style: normal;
    }
    .mobile-pc-advanced-empty {
      margin-top: 12px;
      padding: 14px 10px;
      border-radius: 10px;
      background: #f5f7f6;
      color: #9aa29d;
      font-size: 10px;
      line-height: 1.5;
      text-align: center;
    }
    .mobile-pc-sku-editor-page {
      position: absolute;
      inset: 0;
      z-index: 60;
      min-height: 0;
      display: flex;
      flex-direction: column;
      background: #f3f5f4;
    }
    .mobile-pc-sku-editor-shell {
      min-height: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .mobile-pc-sku-editor-head {
      height: 54px;
      flex-shrink: 0;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) 58px;
      align-items: center;
      padding: 0 8px;
      border-bottom: 1px solid #edf0ee;
      background: #fff;
    }
    .mobile-pc-sku-editor-head button {
      height: 42px;
      color: #737d77;
      font-size: 13px;
      font-weight: 600;
    }
    .mobile-pc-sku-editor-head button.save {
      color: #2f9568;
      font-weight: 750;
    }
    .mobile-pc-sku-editor-head > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .mobile-pc-sku-editor-head strong {
      color: #28302c;
      font-size: 17px;
      font-weight: 700;
    }
    .mobile-pc-sku-editor-head span {
      color: #9aa29d;
      font-size: 9px;
    }
    .mobile-pc-sku-editor-scroll {
      min-height: 0;
      flex: 1;
      overflow-y: auto;
      padding-bottom: 18px;
    }
    .mobile-pc-sku-editor-scroll::-webkit-scrollbar {
      display: none;
    }
    .mobile-pc-sku-editor-scroll .mobile-pc-card {
      margin-top: 10px;
    }
    .mobile-pc-delete-sku {
      width: calc(100% - 24px);
      height: 46px;
      margin: 12px;
      border: 1px solid #efc8c5;
      border-radius: 12px;
      background: #fff;
      color: #d85f58;
      font-size: 13px;
      font-weight: 700;
    }
    .mobile-pc-sku-editor-actions {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: 10px;
      padding: 10px 12px 12px;
      border-top: 1px solid #e7ebe8;
      background: rgba(255,255,255,.98);
      box-shadow: 0 -5px 18px rgba(30,48,39,.06);
    }
    .mobile-pc-sku-editor-actions button {
      height: 48px;
      border: 1px solid #d9dfdc;
      border-radius: 24px;
      background: #fff;
      color: #606963;
      font-size: 14px;
      font-weight: 700;
    }
    .mobile-pc-sku-editor-actions button.primary {
      border-color: transparent;
      background: linear-gradient(90deg,#55bc7c,#287c5b);
      color: #fff;
      box-shadow: 0 5px 14px rgba(55,142,99,.22);
    }
    .mobile-pc-sku-summary-main:active,
    .mobile-pc-sku-editor-actions button:active,
    .mobile-pc-delete-sku:active {
      transform: scale(.988);
    }
    /* 新增商品顶部紧凑化与规格异常状态 */
    .mobile-pc-mode {
      gap: 4px;
      margin: 6px 12px;
      padding: 3px;
      border-radius: 11px;
    }
    .mobile-pc-mode button {
      min-height: 42px;
      gap: 1px;
      border-radius: 9px;
    }
    .mobile-pc-mode button strong {
      font-size: 14px;
    }
    .mobile-pc-mode button span {
      font-size: 9px;
    }
    .mobile-pc-wizard-progress {
      margin: 6px 12px 0;
      padding: 8px 10px 9px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(31,58,43,.04);
    }
    .mobile-pc-wizard-current {
      gap: 8px;
      margin-bottom: 6px;
    }
    .mobile-pc-wizard-current span {
      min-width: 40px;
      height: 20px;
      border-radius: 10px;
      font-size: 10px;
    }
    .mobile-pc-wizard-current strong {
      font-size: 13px;
    }
    .mobile-pc-wizard-track {
      gap: 0;
    }
    .mobile-pc-wizard-track::before {
      top: 10px;
      left: 12%;
      right: 12%;
      height: 1px;
    }
    .mobile-pc-wizard-track button {
      gap: 3px;
    }
    .mobile-pc-wizard-track button i {
      width: 21px;
      height: 21px;
      border-width: 1.5px;
      font-size: 9px;
    }
    .mobile-pc-wizard-track button span {
      font-size: 8px;
    }
    .mobile-pc-wizard-track button.active i {
      box-shadow: 0 0 0 2px rgba(63,168,115,.1);
    }
    .mobile-pc-wizard-guide {
      margin-top: 8px;
      padding: 12px 14px;
      border-radius: 12px;
    }
    .mobile-pc-wizard-guide p {
      margin-top: 5px;
    }
    .mobile-pc-sku-summary-card {
      position: relative;
    }
    .mobile-pc-sku-summary-card.is-incomplete-alert {
      border-color: #ea6761;
      background: #fffafa;
      box-shadow: 0 0 0 2px rgba(234,103,97,.12);
    }
    .mobile-pc-sku-summary-card.is-incomplete-alert .mobile-pc-sku-status {
      background: #fee9e7;
      color: #d5544e;
    }
    .mobile-pc-sku-summary-top {
      padding-right: 49px;
    }
    .mobile-pc-sku-card-delete {
      position: absolute;
      top: 11px;
      right: 10px;
      z-index: 2;
      height: 27px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 0 7px;
      border-radius: 14px;
      background: #fff0ef;
      color: #d75e58;
      font-size: 9px;
      font-weight: 700;
    }
    .mobile-pc-sku-card-delete svg {
      width: 13px;
      height: 13px;
    }
    .mobile-pc-sku-card-delete:active {
      transform: scale(.96);
    }
    .mobile-pc-auto-name {
      min-height: 62px;
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 0 0 12px;
      padding: 10px 12px;
      border: 1px solid #dce9e2;
      border-radius: 12px;
      background: #f7fbf9;
    }
    .mobile-pc-auto-name > input {
      width: 19px;
      height: 19px;
      flex: 0 0 19px;
      accent-color: #3aa774;
    }
    .mobile-pc-auto-name > span {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .mobile-pc-auto-name strong {
      color: #35423b;
      font-size: 12px;
      font-weight: 750;
    }
    .mobile-pc-auto-name small {
      color: #87938c;
      font-size: 9px;
      line-height: 1.45;
    }
    .mobile-pc-name-mode {
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 7px;
      padding: 5px 8px;
      border-radius: 8px;
      background: #f2f7f4;
      color: #69907a;
      font-size: 9px;
    }
    .mobile-pc-name-mode[hidden] {
      display: none;
    }
    .mobile-pc-name-mode button {
      min-height: 28px;
      padding: 0 9px;
      border-radius: 8px;
      background: #e3f2ea;
      color: #31825c;
      font-size: 9px;
      font-weight: 700;
    }
    .mobile-pc-name-mode button[hidden] {
      display: none;
    }
    .mobile-product-create-page .mobile-pc-field input.is-invalid {
      border-color: #e45e58;
      background: #fffafa;
      box-shadow: 0 0 0 2px rgba(228,94,88,.1);
    }