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

    /* ===== 整体布局 ===== */
    #app { display: flex; height: 100vh; overflow: hidden; }

    /* ===== 侧边栏 ===== */
    #sidebar {
      width: 180px;
      min-width: 180px;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
    }

    /* 店铺头部 */
    .shop-header {
      padding: 16px 14px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--sidebar-border);
    }
    .shop-avatar {
      width: 40px; height: 40px; min-width: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a8d8b9, #6abf8a);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      border: 2px solid #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,.12);
    }
    .shop-info { overflow: hidden; }
    .shop-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .shop-badge {
      display: inline-flex; align-items: center; gap: 3px;
      margin-top: 3px;
      background: linear-gradient(90deg, #c8960c, #e8b84b);
      color: #fff;
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 8px;
      font-weight: 500;
    }

    /* 导航菜单 */
    .nav-menu { flex: 1; padding: 8px 0; }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      color: var(--sidebar-text);
      font-size: 13.5px;
      cursor: pointer;
      transition: background .15s, color .15s;
      border-radius: 0;
      position: relative;
      white-space: nowrap;
    }
    .nav-item:hover { background: var(--sidebar-hover-bg); color: var(--text-primary); }
    .nav-item.active {
      background: var(--sidebar-active-bg);
      color: var(--sidebar-active-text);
      font-weight: 500;
    }
    .nav-item.active::after {
      content: '';
      position: absolute;
      right: 0; top: 6px; bottom: 6px;
      width: 3px;
      background: var(--brand);
      border-radius: 2px 0 0 2px;
    }
    .nav-icon {
      width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      opacity: .7;
      flex-shrink: 0;
    }
    .nav-item.active .nav-icon { opacity: 1; }
    /* SVG图标统一尺寸 */
    .nav-icon svg { width: 18px; height: 18px; }

    /* 红点角标 */
    .nav-dot-badge {
      width: 7px; height: 7px;
      background: var(--red);
      border-radius: 50%;
      margin-left: auto;
      flex-shrink: 0;
    }

    /* ===== 导航折叠子菜单 ===== */
    .nav-group { }
    .nav-item.has-sub {
      justify-content: flex-start;
    }
    .nav-label { flex: 1; }
    .nav-arrow {
      font-size: 12px;
      color: var(--text-muted);
      transition: transform .2s;
      margin-left: auto;
      flex-shrink: 0;
      display: flex; align-items: center;
    }
    .nav-arrow svg { width: 14px; height: 14px; }
    .nav-group.open > .nav-item.has-sub .nav-arrow {
      transform: rotate(90deg);
    }

    /* 子菜单容器 */
    .nav-sub {
      max-height: 0;
      overflow: hidden;
      transition: max-height .25s ease;
      background: rgba(0,0,0,.015);
    }
    .nav-sub.open {
      max-height: 300px;
    }
    .nav-sub-item {
      padding: 8px 16px 8px 46px;
      font-size: 13px;
      color: var(--sidebar-text);
      cursor: pointer;
      transition: all .15s;
      position: relative;
      white-space: nowrap;
    }
    .nav-sub-item:hover { background: var(--sidebar-hover-bg); color: var(--text-primary); }
    .nav-sub-item.active {
      color: var(--sidebar-active-text);
      font-weight: 500;
      background: var(--sidebar-active-bg);
    }
    .nav-sub-item.active::before {
      content: '';
      position: absolute;
      right: 0; top: 4px; bottom: 4px;
      width: 3px;
      background: var(--brand);
      border-radius: 2px 0 0 2px;
    }

    /* 营销中心导航：贴合门店端原型中的圆角主入口和圆点子项 */
    .nav-group[data-group="marketing"] > .nav-item.active {
      margin: 0 8px;
      padding-left: 8px;
      padding-right: 8px;
      border-radius: 24px;
      background: #fff;
      color: var(--brand);
    }
    .nav-group[data-group="marketing"] > .nav-item.active::after { display: none; }
    .nav-group[data-group="marketing"] .nav-sub { background: transparent; }
    .nav-group[data-group="marketing"] .nav-sub-item {
      padding-left: 48px;
      background: transparent;
    }
    .nav-group[data-group="marketing"] .nav-sub-item::after {
      content: '';
      position: absolute;
      left: 34px;
      top: 50%;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #b9c0cc;
      transform: translateY(-50%);
    }
    .nav-group[data-group="marketing"] .nav-sub-item.active { color: var(--brand); }
    .nav-group[data-group="marketing"] .nav-sub-item.active::before { display: none; }
    .nav-group[data-group="marketing"] .nav-sub-item.active::after { background: var(--brand); }

    /* ===== 右侧主区域 ===== */
    #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

    /* ===== 顶部操作栏 ===== */
    #header {
      height: 48px;
      min-height: 48px;
      background: var(--header-bg);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 6px;
      box-shadow: var(--shadow-sm);
      z-index: 50;
    }
    /* 左侧面包屑/工具图标区 */
    .header-left {
      display: flex; align-items: center; gap: 8px;
      color: var(--text-muted);
      font-size: 15px;
    }
    .header-icon-btn {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--text-muted);
      transition: background .15s;
      font-size: 15px;
    }
    .header-icon-btn:hover { background: var(--border-light); color: var(--text-secondary); }

    /* 弹性间隔 */
    .header-spacer { flex: 1; }

    /* 右侧功能按钮组 */
    .header-right { display: flex; align-items: center; gap: 6px; }

    /* 绿色功能按钮 */
    .hbtn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 5px 10px;
      border-radius: var(--radius-sm);
      font-size: 12.5px;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
      border: 1px solid transparent;
    }
    .hbtn-green {
      background: #ebf7f1;
      color: #3a9a6a;
      border-color: #c2e8d5;
    }
    .hbtn-green:hover { background: #d6f0e4; }
    .hbtn-icon { font-size: 13px; }

    /* 带角标按钮 */
    .hbtn-wrap { position: relative; }
    .hbtn-badge {
      position: absolute;
      top: -4px; right: -6px;
      min-width: 16px; height: 16px;
      background: var(--red);
      border-radius: 8px;
      font-size: 10px;
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      padding: 0 3px;
      font-weight: 500;
    }
    .hbtn-badge.orange { background: var(--orange); }

    /* 分隔线 */
    .header-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }

    /* 文字按钮（帮助中心/客服等） */
    .htxt-btn {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 4px 6px;
      font-size: 12.5px;
      color: var(--text-secondary);
      border-radius: var(--radius-sm);
      cursor: pointer;
      white-space: nowrap;
    }
    .htxt-btn:hover { background: var(--border-light); color: var(--text-primary); }

    /* 通知铃铛 */
    .hbell-wrap { position: relative; }
    .hbell {
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 15px;
      color: var(--text-secondary);
    }
    .hbell:hover { background: var(--border-light); }
    .hbell-badge {
      position: absolute;
      top: 0px; right: 0px;
      min-width: 16px; height: 16px;
      background: var(--red);
      border-radius: 8px;
      font-size: 10px;
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      padding: 0 3px;
    }

    /* 用户信息 */
    .header-user {
      display: flex; align-items: center; gap: 6px;
      padding: 4px 8px;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background .15s;
    }
    .header-user:hover { background: var(--border-light); }
    .user-avatar {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a8d8b9, #6abf8a);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
    }
    .user-name { font-size: 12.5px; color: var(--text-secondary); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-arrow { font-size: 10px; color: var(--text-muted); }
    .account-menu-wrap { position: relative; }
    .account-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      width: 148px;
      background: #fff;
      border: 1px solid var(--border-light);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(20, 40, 70, .14);
      padding: 6px;
      display: none;
      z-index: 80;
    }
    .account-menu.show { display: block; }
    .account-menu-item {
      height: 34px;
      padding: 0 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-secondary);
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
    }
    .account-menu-item:hover { background: #f5f8f6; color: var(--brand); }
    .account-menu-item.danger:hover { background: #fff3f3; color: var(--red); }

    /* ===== 内容区 ===== */
    #content { flex: 1; overflow-y: auto; background: var(--content-bg); }
    #app.cashier-mode #content { overflow: hidden; height: 100vh; }
    #app.billing-mode #sidebar { display: none !important; }
    #app.billing-mode #header { display: none !important; }
    #app.billing-mode #main { width: 100%; height: 100vh; overflow: hidden; }
    #app.billing-mode #content { padding: 0; overflow-y: auto; background: #f4f6f8; height: 100vh; }
    #app.billing-mode .page.active { display: block; min-height: 100%; }

    /* ===== 页面切换 ===== */
    .page { display: none; }
    .page.active { display: block; }
    .endpoint-page.active { height: 100%; min-height: 720px; overflow: hidden; }
    .endpoint-frame { width: 100%; height: 100%; min-height: 720px; display: block; border: 0; background: var(--content-bg); }

    /* ===== 营销中心 - 门店营销 ===== */
    #page-marketing.active { min-height: 100%; background: #fff; }
    .store-marketing-page {
      min-height: calc(100vh - 48px);
      padding: 26px 24px 48px;
      background: #fff;
    }
    .store-marketing-section h2 {
      margin: 0 0 20px;
      color: #20242b;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.3;
    }
    .store-marketing-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(190px, 1fr));
      gap: 24px 30px;
      max-width: 1180px;
    }
    .store-marketing-card {
      min-width: 0;
      height: 104px;
      padding: 0 32px;
      display: flex;
      align-items: center;
      gap: 18px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: #f7f8fa;
      color: #22262e;
      text-align: left;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .store-marketing-card:hover {
      border-color: #f3c999;
      box-shadow: 0 8px 24px rgba(46, 55, 72, .08);
      transform: translateY(-1px);
    }
    .store-marketing-icon {
      width: 62px;
      height: 62px;
      flex: 0 0 62px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: linear-gradient(145deg, #f59a3f 0%, #f5bd70 100%);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    }
    .store-marketing-icon svg { width: 44px; height: 44px; }
    .store-marketing-icon-text { font-size: 31px; font-weight: 400; line-height: 1; }
    .store-marketing-copy { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
    .store-marketing-copy strong {
      overflow: hidden;
      color: #23262e;
      font-size: 17px;
      font-weight: 500;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .store-marketing-copy small {
      overflow: hidden;
      color: #8f949d;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .store-marketing-order { margin-top: 42px; }

    @media (max-width: 1180px) {
      .store-marketing-grid { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
    }
    @media (max-width: 760px) {
      .store-marketing-page { padding: 20px 16px 36px; }
      .store-marketing-grid { grid-template-columns: 1fr; }
      .store-marketing-card { padding: 0 24px; }
    }

    /* ===== 门店营销 - 活动列表 ===== */
    #page-marketing-special.active,
    #page-marketing-discount.active,
    #page-marketing-special-detail.active,
    #page-marketing-discount-detail.active { min-height: 100%; background: #f3f5f8; }
    .marketing-activity-page { min-height: calc(100vh - 48px); padding: 18px 12px 12px; background: #f3f5f8; }
    .marketing-list-tabs { height: 48px; display: flex; align-items: flex-end; gap: 12px; padding-left: 14px; }
    .marketing-list-tabs button {
      position: relative; min-width: 152px; height: 48px; padding: 0 28px; border-radius: 8px 8px 0 0;
      background: #e8ebef; color: #303640; font-size: 16px; font-weight: 500;
    }
    .marketing-list-tabs button.active { background: #fff; font-weight: 700; }
    .marketing-list-tabs button.active::after {
      content: ''; position: absolute; left: 36px; right: 36px; bottom: 9px; height: 5px;
      border-radius: 3px; background: #70c48f;
    }
    .marketing-list-panel {
      min-height: calc(100vh - 126px); padding: 26px 12px 14px; display: flex; flex-direction: column;
      border-radius: 8px; background: #fff;
    }
    .marketing-list-filter { display: flex; align-items: center; gap: 10px; padding: 0 2px 22px; }
    .marketing-list-filter > input,
    .marketing-date-filter,
    .marketing-pagination input,
    .marketing-product-search input,
    .marketing-form-row > input,
    .marketing-range-input,
    .marketing-type-row select,
    .marketing-price-input,
    .marketing-discount-input {
      height: 36px; border: 1px solid #dfe3e7; border-radius: 19px; background: #fff;
      color: #3a4049; font: inherit; outline: none; transition: border-color .15s, background .15s;
    }
    .marketing-list-filter > input { width: 210px; padding: 0 14px; }
    .marketing-date-filter { width: 390px; padding: 0 12px; display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; }
    .marketing-date-filter input { min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: #4c535e; }
    .marketing-date-filter span { color: #afb5bd; }
    .marketing-primary-btn,
    .marketing-outline-btn,
    .marketing-soft-btn {
      height: 36px; padding: 0 24px; border-radius: 19px; border: 1px solid #d8dde2;
      background: #fff; color: #343a43; white-space: nowrap;
    }
    .marketing-primary-btn { border-color: #76c492; background: #76c492; color: #fff; }
    .marketing-primary-btn:hover { border-color: #5eaf7c; background: #5eaf7c; }
    .marketing-outline-btn:hover { border-color: #65b786; color: #4ca873; }
    .marketing-add-btn { margin-left: auto; }
    .marketing-list-table-wrap { position: relative; flex: 1; min-height: 410px; overflow: auto; }
    .marketing-list-table,
    .marketing-product-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .marketing-list-table thead,
    .marketing-product-table thead { background: #f3f5f8; }
    .marketing-list-table th { height: 58px; padding: 0 18px; text-align: left; font-size: 13px; font-weight: 600; }
    .marketing-list-table td { height: 76px; padding: 0 18px; border-bottom: 1px solid #edf0f2; color: #242a31; font-size: 13px; }
    .marketing-list-table th:last-child,
    .marketing-list-table td:last-child { text-align: center; }
    .marketing-status-running { color: #62b783; }
    .marketing-effect-pill { min-width: 168px; height: 42px; border: 1px solid #65b985; border-radius: 22px; color: #68b888; }
    .marketing-row-actions { display: flex; justify-content: center; gap: 8px; }
    .marketing-row-actions button,
    .marketing-row-remove { height: 30px; padding: 0 12px; border: 1px solid #61b883; border-radius: 16px; color: #51aa75; background: #fff; }
    .marketing-row-actions button:hover,
    .marketing-row-remove:hover { background: #f1faf5; }
    .marketing-list-empty { padding: 80px 0; text-align: center; color: #a0a7b0; }
    .marketing-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 14px; color: #454c55; }
    .marketing-pagination button { width: 34px; height: 34px; border: 1px solid #e0e4e8; border-radius: 50%; color: #9ba2aa; }
    .marketing-pagination button.active { border-color: #77c795; background: #77c795; color: #fff; }
    .marketing-pagination .go { color: #5eb27d; background: #fff; }
    .marketing-pagination input { width: 76px; padding: 0 12px; border-radius: 18px; }
    .marketing-page-size { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border: 1px solid #e0e4e8; border-radius: 18px; }

    /* ===== 门店营销 - 活动详情/编辑 ===== */
    .marketing-detail-page { position: relative; min-height: calc(100vh - 48px); padding: 12px; background: #f3f5f8; }
    .marketing-detail-card { margin-bottom: 12px; padding: 26px 58px 30px; border-radius: 8px; background: #fff; }
    .marketing-detail-card h2 { margin: 0 0 24px; font-size: 18px; font-weight: 700; color: #20252c; }
    .marketing-form-row { min-height: 48px; display: grid; grid-template-columns: 92px minmax(280px, 460px); align-items: center; gap: 4px; }
    .marketing-form-row > label { color: #323840; font-weight: 500; }
    .marketing-form-row > label span { margin-right: 7px; color: #ed6666; }
    .marketing-form-row > input { width: 100%; padding: 0 14px; }
    .marketing-range-input { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; padding: 0 12px; gap: 8px; }
    .marketing-range-input input { min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
    .marketing-range-input b,
    .marketing-range-input i { color: #adb4bc; font-style: normal; font-weight: 400; }
    .marketing-type-row { display: flex; align-items: center; gap: 10px; }
    .marketing-type-row select { width: 100%; padding: 0 14px; appearance: auto; }
    .marketing-type-row strong { min-width: 150px; font-size: 13px; font-weight: 500; }
    .marketing-scope-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px; }
    .marketing-scope-label { padding-top: 10px; font-weight: 500; color: #343a42; }
    .marketing-product-panel { min-height: 520px; padding: 26px 22px 18px; display: flex; flex-direction: column; background: #f6f7f9; }
    .marketing-product-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
    .marketing-product-toolbar > div { display: flex; align-items: center; gap: 10px; }
    .marketing-product-search { margin-left: auto; }
    .marketing-product-search input { width: 230px; padding: 0 40px 0 14px; }
    .marketing-product-search { position: relative; }
    .marketing-product-search > span { position: absolute; right: 118px; color: #252a31; font-size: 18px; }
    .marketing-product-table { background: #fff; }
    .marketing-product-table th { height: 58px; padding: 0 14px; text-align: center; font-size: 13px; font-weight: 600; }
    .marketing-product-table th:first-child,
    .marketing-product-table td:first-child { width: 31%; text-align: left; }
    .marketing-product-table td { height: 84px; padding: 0 14px; border-bottom: 1px solid #edf0f2; text-align: center; font-size: 13px; }
    .marketing-product-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .marketing-product-cell > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .marketing-product-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
    .marketing-product-cell small { color: #969ea8; }
    .marketing-product-thumb { width: 46px; height: 46px; flex: 0 0 46px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 25px; }
    .marketing-product-thumb.purple { background: linear-gradient(135deg, #6e48aa, #e2b457); }
    .marketing-product-thumb.blue { background: linear-gradient(135deg, #5b8bd7, #eef5ff); }
    .marketing-product-thumb.mint { background: linear-gradient(135deg, #bed8c4, #f2e6c8); }
    .marketing-price-input { width: 110px; padding: 0 14px; }
    .marketing-product-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: #969ea8; }
    .marketing-pagination.compact { padding-top: 12px; }
    .marketing-pagination.compact button { width: 32px; height: 32px; }
    .marketing-soft-btn { border-color: transparent; background: #f1f2f3; color: #858c95; }
    .marketing-discount-tools label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
    .marketing-discount-input { width: 150px; display: grid; grid-template-columns: 1fr 42px; align-items: center; border-radius: 18px; overflow: hidden; }
    .marketing-discount-input input { min-width: 0; height: 34px; padding: 0 12px; border: 0; outline: 0; background: transparent; font: inherit; }
    .marketing-discount-input b { height: 100%; display: flex; align-items: center; justify-content: center; border-left: 1px solid #e2e5e8; font-weight: 500; }
    .marketing-participant-row { margin-top: 20px; }
    .marketing-participant-row > div { display: flex; gap: 22px; color: #737b85; }
    .marketing-detail-actions { position: sticky; bottom: 0; z-index: 5; padding: 12px 18px; display: flex; justify-content: flex-end; gap: 10px; border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 -4px 18px rgba(34,44,58,.06); }
    .marketing-detail-page.is-editing .marketing-detail-actions {
      position: absolute; top: 32px; right: 30px; bottom: auto; padding: 0;
      background: transparent; box-shadow: none;
    }
    .marketing-save-confirm { width: 420px; max-width: calc(100vw - 40px); }
    .marketing-save-confirm-close {
      width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%; color: #8c949e; font-size: 18px; line-height: 1;
    }
    .marketing-save-confirm-close:hover { background: #f1f3f5; color: #343a42; }
    .marketing-save-confirm-body { display: flex; align-items: flex-start; gap: 14px; padding: 24px 22px; }
    .marketing-save-confirm-icon {
      width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center;
      border-radius: 50%; background: #fff4df; color: #e6a23c; font-size: 20px; font-weight: 700;
    }
    .marketing-save-confirm-copy strong { display: block; margin: 1px 0 8px; color: #242a31; font-size: 15px; }
    .marketing-save-confirm-copy p { margin: 0; color: #68717d; font-size: 13px; line-height: 1.7; }
    .marketing-save-confirm .modal-footer { padding: 12px 20px 16px; }
    .marketing-save-confirm .modal-btn { min-width: 84px; height: 34px; padding: 0 18px; border-radius: 18px; }
    .marketing-detail-page [data-marketing-editable]:disabled {
      opacity: 1; cursor: not-allowed; border-color: #e1e4e7; background-color: #f2f3f4; color: #a8afb7;
    }
    .marketing-detail-page input:not(:disabled):focus,
    .marketing-detail-page select:not(:disabled):focus { border-color: #65b985; background: #fff; }
    .marketing-detail-page.is-editing [data-marketing-editable] { color: #343a42; }

    @media (max-width: 1180px) {
      .marketing-list-filter { flex-wrap: wrap; }
      .marketing-add-btn { margin-left: 0; }
      .marketing-detail-card { padding: 24px 26px; }
      .marketing-product-toolbar { align-items: flex-start; flex-direction: column; }
      .marketing-product-search { margin-left: 0; }
    }

    /* ===== 首页布局 ===== */
    .dashboard-wrap {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 0;
      min-height: 100%;
    }
    .dashboard-main { padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
    .dashboard-side {
      border-left: 1px solid var(--border);
      background: var(--card-bg);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow-y: auto;
    }

    /* 待处理状态横幅 */
    .status-banner {
      background: linear-gradient(135deg, #4caf82 0%, #52c49a 100%);
      border-radius: var(--radius-lg);
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }
    .status-banner::before {
      content: '';
      position: absolute;
      right: -20px; top: -20px;
      width: 120px; height: 120px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }
    .status-banner::after {
      content: '';
      position: absolute;
      right: 40px; bottom: -30px;
      width: 80px; height: 80px;
      background: rgba(255,255,255,.06);
      border-radius: 50%;
    }
    .status-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      position: relative;
      z-index: 1;
    }
    .status-num {
      font-size: 26px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
    .status-label { font-size: 12px; color: rgba(255,255,255,.85); }
    .status-divider { width: 1px; height: 36px; background: rgba(255,255,255,.2); }

    /* AI经营建议 */
    .ai-insight-card {
      background:
        radial-gradient(circle at 18% 0%, rgba(96, 201, 145, .16), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fbfffd 100%);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(76, 175, 130, .18);
      padding: 15px 18px;
      box-shadow: 0 8px 24px rgba(26, 83, 56, .05);
    }
    .ai-insight-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .ai-insight-title-wrap { display: flex; align-items: center; gap: 9px; min-width: 0; }
    .ai-insight-icon {
      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: 16px;
      box-shadow: 0 6px 14px rgba(47, 172, 112, .22);
    }
    .ai-insight-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
    .ai-insight-sub { margin-top: 3px; font-size: 11px; color: var(--text-muted); }
    .ai-insight-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .ai-insight-item {
      position: relative;
      min-width: 0;
      background: #fff;
      border: 1px solid var(--border-light);
      border-radius: 12px;
      padding: 11px;
      overflow: hidden;
    }
    .ai-insight-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--brand);
    }
    .ai-insight-item.customer::before { background: #4f8df5; }
    .ai-insight-item.booking::before { background: #f0a33a; }
    .ai-insight-item.stock::before { background: #e8707a; }
    .ai-insight-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 9px;
    }
    .ai-insight-tag {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 8px;
      border-radius: 11px;
      font-size: 11px;
      font-weight: 700;
      background: #f0faf5;
      color: var(--brand);
      white-space: nowrap;
    }
    .ai-insight-item.customer .ai-insight-tag { background: #eef5ff; color: #3978dc; }
    .ai-insight-item.booking .ai-insight-tag { background: #fff7e8; color: #c97800; }
    .ai-insight-item.stock .ai-insight-tag { background: #fff0f1; color: #d96070; }
    .ai-insight-range { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
    .ai-insight-main {
      font-size: 12px;
      line-height: 1.5;
      color: var(--text-secondary);
      min-height: 42px;
    }
    .ai-insight-main strong {
      color: var(--text-primary);
      font-size: 17px;
      line-height: 1;
      margin: 0 2px;
    }
    .ai-insight-detail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
    .ai-insight-chip {
      height: 22px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 11px;
      background: #f7f8fa;
      color: #7c8490;
      font-size: 11px;
      white-space: nowrap;
    }
    .ai-insight-chip.good { background: #eef9f3; color: #35a96b; }
    .ai-insight-chip.warn { background: #fff5e6; color: #c97800; }
    .ai-insight-chip.danger { background: #fff0f1; color: #d96070; }

    /* 店铺数据区 */
    .section-header {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 12px;
    }
    .section-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .section-time { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
    .refresh-btn { cursor: pointer; color: var(--text-muted); font-size: 13px; }
    .refresh-btn:hover { color: var(--brand); }

    /* 数据卡片网格 */
    .data-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }
    .data-card {
      background: var(--card-bg);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-light);
      padding: 14px 16px;
    }
    .data-card.wide { grid-column: span 1; }
    .data-card-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
    .data-card-value { font-size: 22px; font-weight: 600; color: var(--text-primary); line-height: 1.2; margin-bottom: 6px; }
    .data-card-trend { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
    .trend-down { color: #4caf82; }
    .trend-up { color: var(--red); }

    /* 右侧附加数据（悬浮卡） */
    .data-card-extra {
      background: #fff;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      min-width: 130px;
    }
    .extra-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 12px; color: var(--text-secondary); }
    .extra-val { display: flex; align-items: center; gap: 4px; }
    .extra-change { font-size: 11px; color: var(--text-muted); }
    .extra-change.neg { color: var(--text-muted); }
    .extra-change.zero { color: var(--text-muted); }

    /* 营收趋势 */
    .trend-card {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-light);
      padding: 16px 18px;
    }
    .trend-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px;
    }
    .trend-tabs { display: flex; gap: 4px; }
    .trend-tab {
      padding: 4px 12px;
      border-radius: 16px;
      font-size: 12.5px;
      cursor: pointer;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      background: #fff;
      transition: all .15s;
    }
    .trend-tab.active { background: var(--brand-light); color: var(--brand); border-color: #b2dfc8; }
    .trend-select {
      display: flex; align-items: center; gap: 4px;
      padding: 4px 10px;
      border: 1px solid var(--border);
      border-radius: 16px;
      font-size: 12.5px;
      color: var(--text-secondary);
      cursor: pointer;
      background: #fff;
    }

    /* SVG折线图 */
    .chart-area { position: relative; height: 160px; }
    .chart-svg { width: 100%; height: 100%; }
    .chart-yaxis { position: absolute; left: 0; top: 0; bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; }
    .chart-ylabel { font-size: 11px; color: var(--text-muted); }
    .chart-inner { margin-left: 32px; height: 100%; position: relative; }

    /* ===== 右侧边栏（公告/广告） ===== */
    .side-ad {
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: linear-gradient(135deg, #d4f0e3, #a8e0c4);
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .side-ad-inner { text-align: center; z-index: 1; }
    .side-ad-title { font-size: 13px; font-weight: 600; color: #2a7a52; margin-bottom: 4px; }
    .side-ad-sub { font-size: 11px; color: #4a9a72; }
    .side-ad-tag {
      display: inline-block;
      background: var(--brand);
      color: #fff;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 8px;
      margin-bottom: 6px;
    }

    .announce-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 12px; text-align: center; }
    .announce-list { display: flex; flex-direction: column; gap: 12px; }
    .announce-item { cursor: pointer; }
    .announce-item:hover .announce-name { color: var(--brand); }
    .announce-name { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
    .announce-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .announce-more { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }

    /* ===== 服务管理页面 ===== */

    /* 右侧主内容 */
    .service-main {
      flex: 1;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-x: hidden;
    }

    /* 视图切换Tab */
    .view-tabs {
      display: flex;
      gap: 0;
      border-bottom: 2px solid var(--border);
    }
    .view-tab {
      padding: 8px 20px;
      font-size: 13.5px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all .15s;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
    }
    .view-tab:hover { color: var(--text-primary); }
    .view-tab.active {
      color: var(--brand);
      font-weight: 500;
      border-bottom-color: var(--brand);
    }

    /* 筛选区 */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .filter-search {
      display: flex;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 5px 10px;
      gap: 6px;
      background: #fff;
    }
    .filter-search .filter-icon { font-size: 13px; color: var(--text-muted); }
    .filter-search input {
      border: none;
      outline: none;
      font-size: 13px;
      color: var(--text-primary);
      width: 170px;
      font-family: inherit;
    }
    .filter-search input::placeholder { color: var(--text-muted); }
    .filter-select {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      background: #fff;
      white-space: nowrap;
    }
    .filter-select:hover { border-color: var(--brand); }
    .filter-arrow { font-size: 10px; color: var(--text-muted); }
    .filter-date-range {
      display: flex;
      align-items: center;
      padding: 5px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      color: var(--text-muted);
      background: #fff;
      gap: 0;
    }
    .filter-calendar { font-size: 12px; margin-left: 4px; }
    .filter-spacer { flex: 1; }
    .filter-btn-query {
      padding: 5px 16px;
      border-radius: var(--radius-sm);
      background: var(--brand);
      color: #fff;
      font-size: 13px;
      cursor: pointer;
      transition: background .15s;
    }
    .filter-btn-query:hover { background: var(--brand-dark); }
    .filter-btn-add {
      padding: 5px 16px;
      border-radius: var(--radius-sm);
      background: var(--brand);
      color: #fff;
      font-size: 13px;
      cursor: pointer;
      transition: background .15s;
    }
    .filter-btn-add:hover { background: var(--brand-dark); }
    .filter-btn-export {
      padding: 5px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: #fff;
      color: var(--text-secondary);
      font-size: 13px;
      cursor: pointer;
      transition: all .15s;
    }
    .filter-btn-export:hover {
      border-color: var(--brand);
      color: var(--brand);
    }

    /* 状态Tab */
    .status-tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
    }
    .status-tab {
      padding: 7px 18px;
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all .15s;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      white-space: nowrap;
    }
    .status-tab:hover { color: var(--text-primary); }
    .status-tab.active {
      color: var(--brand);
      font-weight: 500;
      border-bottom-color: var(--brand);
    }

    /* 数据表格 */
    .data-table-wrap {
      background: var(--card-bg);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-light);
      overflow-x: auto;
      flex: 1;
    }
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      white-space: nowrap;
    }
    .data-table thead {
      background: #fafbfc;
    }
    .data-table th {
      padding: 10px 12px;
      text-align: left;
      font-weight: 500;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      font-size: 12.5px;
    }
    .data-table td {
      padding: 10px 12px;
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-light);
      line-height: 1.5;
    }
    .data-table tbody tr:hover { background: #f8faf9; }

    /* ===== 服务管理 - 洗护服务 ===== */
    .service-groom-page {
      height: 100%; background: #f3f5f7; padding: 12px 14px;
      display: flex; gap: 12px; overflow: hidden;
    }
    .sg-category-panel {
      width: 202px; background: #fff; border: 1px solid #edf0f2; border-radius: 6px;
      display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden;
    }
    .sg-category-actions {
      display: flex; align-items: center; gap: 8px; padding: 12px;
      border-bottom: 1px solid #edf0f2;
    }
    .sg-btn {
      height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid #dfe3e8;
      background: #fff; color: var(--text-primary); font-size: 13px; cursor: pointer;
      box-shadow: 0 1px 3px rgba(15, 23, 42, .04); white-space: nowrap;
    }
    .sg-btn.green {
      border-color: transparent; background: linear-gradient(90deg, #93d4ac, #68b988);
      color: #fff; box-shadow: none;
    }
    .sg-btn.outline-green {
      border-color: rgba(76, 175, 130, .62); color: #2f9b6a; background: #fff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    }
    .sg-category-actions .sg-btn { flex: 1; padding: 0 8px; }
    .sg-category-list { padding: 16px 18px; display: flex; flex-direction: column; gap: 17px; }
    .sg-category-item {
      display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4b5563;
      white-space: nowrap;
    }
    .sg-category-item.active { color: var(--brand); font-weight: 700; }
    .sg-category-item .arrow { font-size: 12px; color: #6b7280; }
    .sg-custom-btn {
      align-self: center; margin-top: 2px; height: 34px; padding: 0 14px; border: none;
      border-radius: 4px; background: #71bf8f; color: #fff; font-size: 13px; font-weight: 600;
      cursor: pointer;
    }
    #page-service-boarding .sg-category-panel { overflow: visible; position: relative; z-index: 4; }
    .sg-board-category-list {
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      background: #fff;
      border-radius: 0 0 6px 6px;
    }
    .sg-board-cat-title {
      height: 28px;
      display: flex;
      align-items: center;
      color: var(--brand);
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 8px;
    }
    .sg-board-cat-group { position: relative; }
    .sg-board-cat-parent {
      height: 38px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #4b5563;
      font-size: 14px;
      white-space: nowrap;
    }
    .sg-board-cat-arrow {
      width: 14px;
      height: 22px;
      border: none;
      background: transparent;
      color: #667085;
      font-size: 18px;
      line-height: 22px;
      padding: 0;
      cursor: pointer;
      transition: transform .15s ease;
    }
    .sg-board-cat-group.open .sg-board-cat-arrow { transform: rotate(90deg); }
    .sg-board-sub-list { display: none; padding: 2px 0 6px 22px; }
    .sg-board-cat-group.open .sg-board-sub-list { display: block; }
    .sg-board-sub-item {
      height: 36px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 32px 0 12px;
      color: #1f2937;
      font-size: 13px;
      position: relative;
      border-radius: 4px;
    }
    .sg-board-sub-item:hover { background: #f7faf8; color: var(--brand); }
    .sg-board-sub-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sg-board-sub-more {
      position: absolute;
      right: 7px;
      top: 8px;
      width: 20px;
      height: 20px;
      border: none;
      background: transparent;
      padding: 0;
      display: none;
      cursor: pointer;
    }
    .sg-board-sub-more::before {
      content: '';
      position: absolute;
      inset: 0;
      background: #58b986;
      clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    }
    .sg-board-sub-more::after {
      content: '';
      position: absolute;
      left: 7px;
      top: 7px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
    }
    .sg-board-sub-item:hover .sg-board-sub-more,
    .sg-board-sub-more.show { display: block; }
    .sg-board-cat-menu {
      position: absolute;
      right: 0;
      top: 34px;
      width: 90px;
      padding: 8px 0;
      border-radius: 4px;
      border: 1px solid #eef1f5;
      background: #fff;
      box-shadow: 0 10px 24px rgba(15,23,42,.14);
      z-index: 30;
      display: none;
    }
    .sg-board-cat-menu.show { display: block; }
    .sg-board-cat-menu button {
      width: 100%;
      height: 34px;
      border: none;
      background: transparent;
      color: #4b5563;
      font-size: 13px;
      text-align: center;
      cursor: pointer;
    }
    .sg-board-cat-menu button:hover { color: var(--brand); background: #f7faf8; }
    .sg-main {
      flex: 1; min-width: 0; background: #fff; padding: 16px 12px 0;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .sg-toolbar {
      display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-bottom: 14px;
    }
    .sg-search {
      width: 260px; height: 34px; display: flex; align-items: center; gap: 7px;
      border: 1px solid #dfe3e8; border-radius: 18px; padding: 0 12px; color: #a3a9b2;
    }
    .sg-search input {
      flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: var(--text-primary);
      min-width: 0;
    }
    .sg-search input::placeholder { color: #9fa6af; }
    .sg-select {
      width: 128px; height: 34px; display: flex; align-items: center; justify-content: space-between;
      border: 1px solid #dfe3e8; border-radius: 18px; padding: 0 12px; color: #6b7280;
      font-size: 13px; background: #fff;
    }
    .sg-toolbar-spacer { flex: 1; }
    .sg-segment {
      height: 34px; display: flex; align-items: center; background: #eef0f2; border-radius: 18px;
      padding: 3px;
    }
    .sg-segment-btn {
      min-width: 70px; height: 28px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
      font-size: 13px; color: #1f2937; cursor: pointer;
    }
    .sg-segment-btn.active { background: #71bf8f; color: #fff; font-weight: 600; box-shadow: 0 1px 4px rgba(20, 83, 45, .16); }
    .sg-table-wrap { flex: 1; min-height: 0; overflow: auto; }
    .sg-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 0; font-size: 13px; }
    .sg-table thead { background: #f3f6f9; position: sticky; top: 0; z-index: 1; }
    .sg-table th {
      height: 42px; padding: 0 8px; text-align: center; color: #1f2937; font-weight: 600;
      border-right: 1px solid #edf0f2; white-space: nowrap;
    }
    .sg-table th:nth-child(1), .sg-table td:nth-child(1) { width: 42px; }
    .sg-table th:nth-child(2), .sg-table td:nth-child(2) { width: 20%; }
    .sg-table th:nth-child(3), .sg-table td:nth-child(3) { width: 18%; }
    .sg-table th:nth-child(4), .sg-table td:nth-child(4) { width: 14%; }
    .sg-table th:nth-child(5), .sg-table td:nth-child(5) { width: 13%; }
    .sg-table th:nth-child(6), .sg-table td:nth-child(6) { width: 238px; }
    .sg-table th:nth-child(2), .sg-table td:nth-child(2),
    .sg-table th:nth-child(3), .sg-table td:nth-child(3) { text-align: left; }
    .sg-table td {
      height: 54px; padding: 0 8px; text-align: center; color: #2f343b;
      border-bottom: 1px solid #edf0f2; vertical-align: middle; overflow: hidden;
      text-overflow: ellipsis;
    }
    .sg-table tbody tr:nth-child(even) { background: #f5f7fa; }
    .sg-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--brand); }
    .sg-status {
      display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 42px;
      padding: 0 8px; border-radius: 3px; font-size: 12px;
    }
    .sg-status.on { background: #ecfff1; color: var(--brand); }
    .sg-status.off { background: #eef5ff; color: #5f7cff; }
    .sg-actions { display: flex; justify-content: center; gap: 5px; white-space: nowrap; }
    .sg-action {
      height: 26px; padding: 0 9px; border-radius: 14px; border: 1px solid rgba(48, 155, 106, .7);
      background: #fff; color: var(--brand); font-size: 12px; cursor: pointer;
    }
    .sg-action.delete { border-color: #dfe3e8; color: #2f343b; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
    .sg-bottom {
      height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 8px;
      background: #fff; flex-shrink: 0;
    }
    .sg-bottom-left { display: flex; align-items: center; gap: 8px; color: #1f2937; font-size: 13px; }
    .sg-bottom-muted { color: #9aa0a8; }
    .sg-bottom-right { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 13px; color: #1f2937; }
    .sg-bottom .sg-btn { height: 30px; padding: 0 13px; }
    .sg-boarding-table th:nth-child(1), .sg-boarding-table td:nth-child(1) { width: 42px; }
    .sg-boarding-table th:nth-child(2), .sg-boarding-table td:nth-child(2) { width: 22%; text-align: left; }
    .sg-boarding-table th:nth-child(3), .sg-boarding-table td:nth-child(3) { width: 14%; text-align: left; }
    .sg-boarding-table th:nth-child(4), .sg-boarding-table td:nth-child(4) { width: 12%; }
    .sg-boarding-table th:nth-child(5), .sg-boarding-table td:nth-child(5) { width: 10%; }
    .sg-boarding-table th:nth-child(6), .sg-boarding-table td:nth-child(6) { width: 14%; }
    .sg-boarding-table th:nth-child(7), .sg-boarding-table td:nth-child(7) { width: 8%; }
    .sg-boarding-table th:nth-child(8), .sg-boarding-table td:nth-child(8) { width: 238px; }
    .sg-title-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
    .sg-title-main { font-weight: 600; color: #1f2937; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sg-title-sub { font-size: 12px; color: #9aa0a8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sg-price-stack { display: flex; flex-direction: column; gap: 3px; align-items: center; line-height: 1.25; }
    .sg-price-stack strong { color: #df3033; }
    .sg-price-stack span { font-size: 12px; color: #8a8f98; }
    .sg-board-cat-modal-mask {
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,.28);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .sg-board-cat-modal {
      width: 640px;
      background: #fff;
      border-radius: 2px;
      box-shadow: 0 18px 48px rgba(15,23,42,.2);
      overflow: hidden;
    }
    .sg-board-cat-modal-head {
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #eef1f5;
      color: #111827;
      font-size: 20px;
      font-weight: 800;
    }
    .sg-board-cat-modal-body {
      padding: 36px 50px 26px;
    }
    .sg-board-cat-parent-line {
      margin-bottom: 30px;
      color: #1f2937;
      font-size: 17px;
      line-height: 24px;
    }
    .sg-board-cat-field {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
    }
    .sg-board-cat-label {
      color: #1f2937;
      font-size: 17px;
      white-space: nowrap;
    }
    .sg-board-cat-label .required {
      color: #ff4d4f;
      margin-right: 8px;
    }
    .sg-board-cat-input-wrap {
      height: 46px;
      border: 1px solid #cfd5dc;
      border-radius: 23px;
      display: flex;
      align-items: center;
      position: relative;
      background: #fff;
    }
    .sg-board-cat-input-wrap input {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: transparent;
      padding: 0 44px 0 18px;
      color: #1f2937;
      font-size: 17px;
    }
    .sg-board-cat-input-wrap input::placeholder { color: #9aa3af; }
    .sg-board-cat-clear {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      border: none;
      border-radius: 50%;
      background: #b8bec5;
      color: #fff;
      font-size: 14px;
      line-height: 18px;
      padding: 0;
      cursor: pointer;
    }
    .sg-board-cat-modal-actions {
      padding: 0 76px 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 86px;
    }
    .sg-board-cat-modal-btn {
      height: 46px;
      border-radius: 23px;
      border: 1px solid #dfe4ea;
      background: #fff;
      color: #1f2937;
      font-size: 18px;
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(15,23,42,.04);
      cursor: pointer;
    }
    .sg-board-cat-modal-btn.primary {
      border-color: #5abc85;
      background: #5abc85;
      color: #fff;
      box-shadow: 0 6px 14px rgba(64,168,115,.18);
    }

    /* ===== 服务管理 - 洗护设置 ===== */
    .service-groom-settings-page {
      height: 100%; background: #f3f5f7; padding: 14px 16px 0;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .sgs-card {
      flex: 1; min-height: 0; background: #fff; border-radius: 8px; padding: 28px 40px;
      display: flex; flex-direction: column; overflow: auto;
    }
    .sgs-title {
      font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 28px;
    }
    .sgs-form {
      width: 100%; max-width: 1600px; display: flex; flex-direction: column; gap: 26px;
    }
    .sgs-row {
      display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: flex-start;
      column-gap: 28px; margin-bottom: 0;
    }
    .sgs-label {
      min-height: 40px; display: flex; align-items: center; justify-content: flex-end;
      font-size: 14px; color: #111827;
    }
    .sgs-input-group {
      width: 460px; height: 40px; display: grid; grid-template-columns: 1fr 48px;
      border: 1px solid #d9dce0; border-radius: 20px; overflow: hidden; background: #fff;
    }
    .sgs-input-group input {
      border: none; outline: none; padding: 0 18px; font-size: 14px; color: #111827; font-family: inherit;
    }
    .sgs-input-suffix {
      display: flex; align-items: center; justify-content: center; background: #f1f2f4;
      border-left: 1px solid #d9dce0; color: #111827; font-size: 14px;
    }
    .sgs-week-select {
      min-height: 42px; max-width: 720px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      border: 1px solid #dfe3e8; border-radius: 22px; padding: 6px 42px 6px 12px; background: #fff;
      position: relative;
    }
    .sgs-week-select::after {
      content: ''; position: absolute; right: 18px; top: 50%; transform: translateY(-35%);
      border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #b6bcc5;
    }
    .sgs-week-chip {
      height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
      border-radius: 15px; background: #f0f2f4; color: #6b7280; font-size: 14px;
      box-shadow: inset 0 0 0 1px #e4e7eb;
    }
    .sgs-week-chip .x {
      width: 18px; height: 18px; border-radius: 50%; background: #d8dde3; color: #8f97a3;
      display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
    }
    .sgs-section-card {
      max-width: 960px; background: #f7f9fb; border: 1px solid #e7ebef; border-radius: 8px;
      overflow: hidden;
    }
    .sgs-template-panel {
      max-width: 960px; display: flex; flex-direction: column; gap: 14px;
    }
    .sgs-template-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    }
    .sgs-template-card {
      min-height: 92px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff;
      padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
      position: relative;
    }
    .sgs-template-card.active {
      border-color: #71bf8f; background: #f1fbf5; box-shadow: 0 0 0 2px rgba(113, 191, 143, .12);
    }
    .sgs-template-card.active::after {
      content: '当前使用'; position: absolute; right: 10px; top: 10px; height: 22px; padding: 0 8px;
      border-radius: 11px; background: #71bf8f; color: #fff; font-size: 12px; display: flex; align-items: center;
    }
    .sgs-template-name { font-size: 14px; font-weight: 700; color: #111827; padding-right: 58px; }
    .sgs-template-desc { font-size: 12px; color: #6b7280; line-height: 1.45; }
    .sgs-template-preview {
      border: 1px solid #e7ebef; border-radius: 10px; background: #fff; overflow: hidden;
    }
    .sgs-template-view { display: none; }
    .sgs-template-view.active { display: block; }
    .sgs-template-view.custom.active { width: 560px; }
    .sgs-template-preview-head {
      min-height: 48px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid #e7ebef; gap: 16px;
    }
    .sgs-template-preview-title { font-size: 14px; font-weight: 700; color: #111827; }
    .sgs-template-preview-tip { font-size: 12px; color: #6b7280; line-height: 1.5; text-align: right; }
    .sgs-hour-grid {
      display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px;
      padding: 14px 16px; background: #f7f9fb;
    }
    .sgs-hour-chip {
      height: 34px; border-radius: 6px; background: #fff; border: 1px solid #e4e7eb;
      display: flex; align-items: center; justify-content: center; color: #333942; font-size: 13px;
    }
    .sgs-capacity-row {
      display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid #e7ebef;
      background: #fff; font-size: 14px; color: #111827;
    }
    .sgs-capacity-input {
      width: 118px; height: 36px; border: 1px solid #dfe3e8; border-radius: 18px;
      padding: 0 14px; outline: none; font-size: 14px;
    }
    .sgs-template-note {
      color: #8f97a3; font-size: 12px; line-height: 1.5;
    }
    .sgs-template-detail-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    }
    .sgs-template-detail-card {
      border: 1px solid #e7ebef; border-radius: 10px; background: #fff; overflow: hidden;
      min-height: 210px;
    }
    .sgs-template-view.custom .sgs-template-detail-card {
      width: 560px; min-height: auto;
    }
    .sgs-template-detail-head {
      padding: 12px 14px; background: #f7f9fb; border-bottom: 1px solid #e7ebef;
      display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    }
    .sgs-template-detail-copy { min-width: 0; }
    .sgs-template-detail-title { font-size: 14px; font-weight: 700; color: #111827; }
    .sgs-template-detail-desc { margin-top: 6px; font-size: 12px; color: #6b7280; line-height: 1.55; }
    .sgs-add-custom-slot {
      flex-shrink: 0; height: 32px; padding: 0 14px; border: none; border-radius: 16px;
      background: #71bf8f; color: #fff; font-size: 13px; cursor: pointer;
      box-shadow: 0 2px 6px rgba(113, 191, 143, .28);
    }
    .sgs-template-slot-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
    .sgs-template-slot {
      min-height: 34px; display: grid; grid-template-columns: 1fr 84px; align-items: center;
      gap: 10px; font-size: 13px; color: #333942;
    }
    .sgs-template-slot-time {
      height: 34px; border: 1px solid #e4e7eb; border-radius: 17px; display: flex;
      align-items: center; justify-content: center; background: #fff;
    }
    .sgs-template-slot-count {
      height: 34px; border: 1px solid #e4e7eb; border-radius: 17px; display: flex;
      align-items: center; justify-content: center; color: #6b7280; background: #fff;
    }
    .sgs-custom-slot-table {
      width: 100%; border-collapse: collapse; background: #fff; font-size: 13px;
    }
    .sgs-custom-slot-table.compact {
      width: 560px; table-layout: fixed;
    }
    .sgs-custom-slot-table th {
      height: 42px; background: #f1f4f7; color: #111827; font-weight: 600;
      padding: 0 12px; text-align: left; border-right: 1px solid #e7ebef;
    }
    .sgs-custom-slot-table.compact th:nth-child(1),
    .sgs-custom-slot-table.compact td:nth-child(1) { width: 250px; }
    .sgs-custom-slot-table.compact th:nth-child(2),
    .sgs-custom-slot-table.compact td:nth-child(2) { width: 150px; }
    .sgs-custom-slot-table.compact th:nth-child(3),
    .sgs-custom-slot-table.compact td:nth-child(3) { width: 90px; text-align: left; }
    .sgs-custom-slot-table th:nth-child(2),
    .sgs-custom-slot-table td:nth-child(2) { width: 112px; }
    .sgs-custom-slot-table th:nth-child(3),
    .sgs-custom-slot-table td:nth-child(3) { width: 64px; text-align: center; }
    .sgs-custom-slot-table td {
      height: 54px; padding: 0 12px; border-top: 1px solid #e7ebef; color: #333942;
    }
    .sgs-custom-time-range {
      width: 220px; height: 34px; border: 1px solid #dfe3e8; border-radius: 17px; padding: 0 10px;
      display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; background: #fff;
    }
    .sgs-custom-time-picker {
      grid-template-columns: 80px 24px 80px;
    }
    .sgs-time-select {
      width: 100%; height: 32px; border: none; outline: none; background: transparent;
      color: #111827; font-size: 13px; font-family: inherit; cursor: pointer;
    }
    .sgs-custom-time-range .to { text-align: center; color: #333942; }
    .sgs-custom-count {
      width: 76px; height: 34px; border: 1px solid #dfe3e8; border-radius: 17px;
      padding: 0 10px; outline: none; font-size: 13px;
    }
    .sgs-section-head {
      height: 52px; display: flex; align-items: center; justify-content: space-between;
      padding: 0 18px; background: #fff; border-bottom: 1px solid #e7ebef;
    }
    .sgs-section-title { font-size: 14px; font-weight: 700; color: #111827; }
    .sgs-add-slot {
      height: 34px; padding: 0 18px; border: none; border-radius: 17px;
      background: #71bf8f; color: #fff; font-size: 14px; cursor: pointer;
    }
    .sgs-slot-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
    .sgs-slot-table th {
      height: 48px; background: #f1f4f7; color: #111827; font-weight: 600;
      padding: 0 20px; text-align: left; border-right: 1px solid #e7ebef;
    }
    .sgs-slot-table th:nth-child(2), .sgs-slot-table td:nth-child(2) { width: 220px; }
    .sgs-slot-table th:nth-child(3), .sgs-slot-table td:nth-child(3) { width: 100px; text-align: center; }
    .sgs-slot-table td {
      height: 70px; padding: 0 20px; border-top: 1px solid #e7ebef; color: #333942;
    }
    .sgs-time-range {
      width: 390px; height: 38px; border: 1px solid #dfe3e8; border-radius: 20px;
      display: grid; grid-template-columns: 34px 1fr 32px 1fr; align-items: center;
      padding: 0 14px; color: #333942; background: #fff;
    }
    .sgs-time-range svg { color: #aeb5bf; }
    .sgs-time-range .to { text-align: center; color: #333942; }
    .sgs-count-input {
      width: 140px; height: 38px; border: 1px solid #dfe3e8; border-radius: 20px;
      padding: 0 14px; font-size: 14px; color: #333942; outline: none;
    }
    .sgs-delete-link { color: #58a5ff; cursor: pointer; font-size: 14px; }
    .sgs-radio-line { min-height: 40px; display: flex; align-items: center; gap: 22px; font-size: 14px; color: #111827; }
    .sgs-row.report-advice {
      align-items: flex-start; margin-top: 8px; padding-top: 8px;
    }
    .sgs-radio {
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    }
    .sgs-radio-dot {
      width: 16px; height: 16px; border-radius: 50%; border: 1px solid #d6d9de;
      display: inline-flex; align-items: center; justify-content: center; background: #fff;
    }
    .sgs-radio.active .sgs-radio-dot { border-color: #71bf8f; }
    .sgs-radio.active .sgs-radio-dot::after {
      content: ''; width: 8px; height: 8px; border-radius: 50%; background: #71bf8f;
    }
    .sgs-suggestion-box {
      width: 100%; min-height: 350px; background: #f5f7f9; border-radius: 4px;
      padding: 26px; display: flex; flex-direction: column;
    }
    .sgs-add-btn {
      align-self: flex-start; height: 40px; padding: 0 22px; border: none; border-radius: 20px;
      background: #71bf8f; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
      margin-bottom: 12px;
    }
    .sgs-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
    .sgs-table th {
      height: 58px; background: #f1f4f7; color: #111827; font-weight: 600;
      padding: 0 20px; text-align: left; border-right: 1px solid #edf0f2;
    }
    .sgs-table th:nth-child(1) { width: 76px; text-align: center; }
    .sgs-table th:nth-child(3) { width: 190px; text-align: center; }
    .sgs-empty {
      height: 186px; display: flex; align-items: center; justify-content: center;
      color: #c3c8cf; font-size: 14px; border-top: 1px solid #edf0f2;
    }
    .sgs-empty-icon {
      width: 76px; height: 48px; margin-right: 10px; color: #d7dbe0;
    }
    .sgs-footer {
      height: 68px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      gap: 60px; background: #fff; border-top: 1px solid #edf0f2;
    }
    .sgs-footer-btn {
      min-width: 138px; height: 44px; border-radius: 22px; border: 1px solid #d9dce0;
      background: #fff; color: #111827; font-size: 15px; cursor: pointer;
    }
    .sgs-footer-btn.save {
      border-color: transparent; background: linear-gradient(90deg, #9bd7b4, #69b887);
      color: #fff;
    }

    /* 表格单元格样式 */
    .cell-id { color: var(--blue); cursor: pointer; font-size: 12.5px; }
    .cell-id:hover { text-decoration: underline; }
    .cell-tag {
      display: inline-block;
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 11px;
      margin-top: 2px;
    }
    .tag-expired { background: #fff5e6; color: #c87d00; }
    .cell-link { color: var(--blue); cursor: pointer; font-size: 12.5px; }
    .cell-link:hover { text-decoration: underline; }
    .cell-duration { font-size: 12.5px; color: var(--text-secondary); }
    .sort-icon { font-size: 10px; color: var(--text-muted); cursor: pointer; margin-left: 2px; }

    /* 服务状态 */
    .cell-status {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
    }
    .status-pending { background: #fff5e6; color: #c87d00; }
    .status-confirmed { background: #e8f0fb; color: #2a6bc4; }
    .status-completed { background: #e8f5ee; color: #3a9a6a; }
    .status-cancelled { background: #f2f4f3; color: var(--text-muted); }

    /* 操作按钮 */
    .cell-actions { display: flex; gap: 6px; }
    .action-btn {
      padding: 3px 8px;
      border-radius: 3px;
      font-size: 12px;
      cursor: pointer;
      transition: all .15s;
    }
    .btn-complete { background: var(--brand); color: #fff; }
    .btn-complete:hover { background: var(--brand-dark); }
    .btn-report { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
    .btn-report:hover { background: var(--brand-light); }
    .btn-more { background: #fff; color: var(--text-secondary); border: 1px solid var(--border); }
    .btn-more:hover { background: var(--border-light); }
    .btn-view { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
    .btn-view:hover { background: #e8f0fb; }

    /* ===== 会员管理 ===== */
    .member-page { padding: 12px 12px 14px; display: flex; flex-direction: column; height: 100%; background: #f6f8fb; }
    .member-filter-row {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 0;
      padding: 20px 12px 18px; background: #fff; border-radius: 8px 8px 0 0;
    }
    .member-filter-right {
      margin-left: auto; display: flex; gap: 8px;
    }
    .member-filter-search {
      display: flex; align-items: center; border: 1px solid var(--border);
      border-radius: 18px; padding: 0 12px; gap: 6px; background: #fff; height: 34px;
    }
    .member-filter-search input { border: none; outline: none; font-size: 13px; color: var(--text-primary); width: 210px; font-family: inherit; }
    .member-filter-search input::placeholder { color: var(--text-muted); }
    .member-filter-select {
      height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px;
      border: 1px solid var(--border); border-radius: 18px; min-width: 96px;
      font-size: 13px; color: var(--text-secondary); cursor: pointer; background: #fff; white-space: nowrap;
    }
    .member-filter-select:hover { border-color: var(--brand); }
    .member-filter-btn-query {
      height: 34px; padding: 0 20px; border-radius: 18px; background: var(--brand); color: #fff;
      font-size: 13px; cursor: pointer; border: none;
    }
    .member-filter-btn-query:hover { background: var(--brand-dark); }
    .member-filter-btn-reset {
      height: 34px; padding: 0 18px; border-radius: 18px; background: #fff; color: var(--text-primary);
      font-size: 13px; cursor: pointer; border: 1px solid var(--border);
    }
    .member-filter-btn-reset:hover { border-color: var(--brand); color: var(--brand); }
    .member-btn-outline {
      height: 34px; padding: 0 17px; border-radius: 18px; background: #fff; color: var(--brand);
      font-size: 13px; cursor: pointer; border: 1px solid var(--brand); display: flex; align-items: center; gap: 4px;
    }
    .member-btn-outline:hover { border-color: var(--brand); color: var(--brand); }
    .member-btn-primary {
      height: 34px; padding: 0 17px; border-radius: 18px; background: var(--brand); color: #fff;
      font-size: 13px; cursor: pointer; border: none; display: flex; align-items: center; gap: 4px;
    }
    .member-btn-primary:hover { background: var(--brand-dark); }
    .member-table-wrap {
      background: var(--card-bg); border-radius: 0 0 8px 8px; border: none;
      overflow-x: auto; overflow-y: hidden; flex: 1; display: flex; flex-direction: column;
    }
    .member-table { width: 100%; min-width: 1500px; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
    .member-table thead { background: #f3f5f8; }
    .member-table th {
      height: 58px; padding: 0 12px; text-align: left; font-weight: 600; color: #1f2933;
      border-bottom: none; white-space: nowrap; font-size: 12.5px;
    }
    .member-table td {
      height: 106px; padding: 0 12px; color: var(--text-primary); border-bottom: none; line-height: 1.5;
      vertical-align: middle;
    }
    .member-table tbody tr:nth-child(even) { background: #f5f7fa; }
    .member-table tbody tr:hover { background: #eef8f3; }
    .member-table th:nth-child(1), .member-table td:nth-child(1) { width: 30px; text-align: center; }
    .member-table th:nth-child(2), .member-table td:nth-child(2) { width: 126px; }
    .member-table th:nth-child(3), .member-table td:nth-child(3) { width: 132px; }
    .member-table th:nth-child(4), .member-table td:nth-child(4) { width: 154px; }
    .member-table th:nth-child(5), .member-table td:nth-child(5) { width: 88px; text-align: center; }
    .member-table th:nth-child(6), .member-table td:nth-child(6) { width: 78px; text-align: center; }
    .member-table th:nth-child(7), .member-table td:nth-child(7) { width: 120px; }
    .member-table th:nth-child(8), .member-table td:nth-child(8) { width: 100px; }
    .member-table th:nth-child(9), .member-table td:nth-child(9) { width: 118px; text-align: center; }
    .member-table th:nth-child(10), .member-table td:nth-child(10) { width: 108px; text-align: center; }
    .member-table th:nth-child(11), .member-table td:nth-child(11) { width: 104px; text-align: center; }
    .member-table th:nth-child(12), .member-table td:nth-child(12) { width: 118px; text-align: center; }
    .member-table th:nth-child(13), .member-table td:nth-child(13) { width: 136px; text-align: center; }
    .member-phone { color: #1268ff; font-size: 14px; cursor: pointer; }
    .member-phone:hover { text-decoration: underline; }
    .member-phone-mask { color: var(--text-muted); font-size: 12px; margin-top: 3px; }
    .member-card-badge {
      display: inline-flex; flex-direction: column; align-items: flex-start;
      width: 132px; box-sizing: border-box; overflow: hidden;
      padding: 0 10px; border-radius: 8px 8px 0 0; font-size: 12px; min-width: 0;
    }
    .member-card-empty {
      width: 132px; height: 78px; display: inline-flex; flex-direction: column;
      border: 1px solid #dbe4ef; border-radius: 8px; background: #fff;
      overflow: hidden; box-sizing: border-box;
    }
    .member-card-badge.green {
      width: 100%; height: 30px; justify-content: center; color: #fff; border: none;
      border-radius: 0; padding-left: 12px;
      background: linear-gradient(135deg, #18b981 0%, #55d3a3 55%, #17b77f 55%, #17b77f 100%);
    }
    .member-card-badge.red {
      width: 132px; height: 78px; padding: 0 12px; justify-content: flex-start;
      color: #ff5066; border: 1px solid #dbe4ef; border-radius: 8px;
      background: linear-gradient(135deg, #ff8fa2 0%, #ff6f89 58%, #ff5575 58%, #ff5575 100%);
      position: relative;
    }
    .member-card-badge.red::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
      background: #fff; border-top: 0;
    }
    .member-card-badge.red .card-name { color: #fff; height: 30px; display: flex; align-items: center; position: relative; z-index: 1; }
    .member-card-badge .card-name { font-weight: 700; font-size: 12px; margin-bottom: 0; }
    .member-card-badge .card-balance { font-size: 15px; font-weight: 700; margin-top: 8px; position: relative; z-index: 1; }
    .member-card-badge .card-gift { font-size: 12px; color: var(--text-muted); position: relative; z-index: 1; }
    .member-open-card-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 5px;
      width: 104px; height: 28px; border: 1px solid #88d3af; border-radius: 15px;
      color: var(--brand); font-size: 12px; cursor: pointer; background: #fff; margin: 10px auto 0;
    }
    .member-open-card-btn:hover { background: var(--brand-light); }
    .member-tag-btn {
      display: inline-flex; align-items: center; gap: 3px;
      height: 28px; padding: 0 14px; border: 1px solid var(--border); border-radius: 15px;
      color: var(--text-primary); font-size: 12px; cursor: pointer; background: #fff;
    }
    .member-tag-btn:hover { border-color: var(--brand); color: var(--brand); }
    .member-tag-btn.solid {
      border-style: solid; border-color: var(--brand); color: var(--brand); background: #f3fbf7;
    }
    .member-add-pet {
      display: inline-flex; align-items: center; gap: 2px;
      height: 28px; padding: 0 14px; border: 1px solid var(--border); border-radius: 15px;
      color: var(--text-primary); font-size: 12px; cursor: pointer; background: #fff;
    }
    .member-add-pet:hover { border-color: var(--brand); color: var(--brand); }
    .member-amount { color: var(--red); font-size: 13px; }
    .member-action-btns { display: flex; gap: 8px; justify-content: center; min-width: 120px; }
    .member-action-btn {
      height: 28px; min-width: 54px; padding: 0 13px; border-radius: 15px; font-size: 12px; cursor: pointer; transition: all .15s;
      white-space: nowrap; flex-shrink: 0; line-height: 26px;
    }
    .member-action-btn.edit { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
    .member-action-btn.edit:hover { background: var(--brand-light); }
    .member-action-btn.more { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
    .member-action-btn.more:hover { border-color: var(--brand); color: var(--brand); }
    .member-bottom-bar {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 92px; padding: 12px 10px 12px; border-top: 14px solid #f5f7fa; background: #fff;
    }
    .member-bottom-left { display: flex; align-items: center; gap: 12px; }
    .member-bottom-right { display: flex; align-items: center; gap: 6px; }
    .member-card-clickable { cursor: pointer; }
    /* ===== 会员详情 ===== */
    #page-member-detail.active { height: 100%; }
    .member-detail-page {
      height: 100%; overflow-y: auto; box-sizing: border-box; padding: 12px;
      background: #f5f7fa; color: var(--text-primary);
    }
    .member-detail-top { display: grid; grid-template-columns: 1.08fr 1fr; gap: 12px; }
    .member-detail-card { min-width: 0; background: #fff; border-radius: 8px; padding: 22px 24px; box-sizing: border-box; }
    .member-detail-profile-head { display: flex; align-items: center; min-height: 64px; }
    .member-detail-avatar {
      width: 54px; height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: center;
      border-radius: 50%; background: #e6f7f2; font-size: 32px; overflow: hidden;
    }
    .member-detail-identity { margin-left: 15px; min-width: 0; }
    .member-detail-name-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
    .member-detail-name-row strong { font-size: 17px; color: #101828; }
    .member-detail-gender {
      display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
      border-radius: 4px; background: #5f78f5; color: #fff; font-size: 12px; font-weight: 700;
    }
    .member-detail-id { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
    .member-detail-outline-btn {
      height: 34px; padding: 0 19px; margin-left: auto; border: 1px solid #d9dee5; border-radius: 18px;
      background: #fff; color: #303741; font-size: 13px; cursor: pointer;
    }
    .member-detail-outline-btn:hover { color: var(--brand); border-color: var(--brand); }
    .member-detail-basic {
      display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding: 13px 15px;
      border-radius: 6px; background: #f4f6f9; color: var(--text-secondary); font-size: 12px;
    }
    .member-detail-basic > div { display: flex; align-items: center; gap: 12px; padding: 0 13px; border-right: 1px solid #dfe4ea; }
    .member-detail-basic > div:first-child { padding-left: 0; }
    .member-detail-basic > div:last-child { justify-content: space-between; padding-right: 0; border-right: 0; }
    .member-detail-basic strong { color: #3b4450; font-size: 13px; white-space: nowrap; }
    .member-detail-eye { color: #9aa4b2; font-size: 11px; }
    .member-detail-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
    .member-detail-mini-card { min-height: 86px; padding: 14px 16px; box-sizing: border-box; border-radius: 6px; background: #f4f6f9; }
    .member-detail-mini-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .member-detail-mini-title strong { font-size: 13px; }
    .member-detail-mini-title button { padding: 0; border: 0; background: transparent; color: #446bff; font-size: 12px; cursor: pointer; }
    .member-detail-muted { color: #8f98a4; font-size: 12px; }
    .member-detail-tag {
      display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
      border: 1px solid #caead9; border-radius: 13px; background: #f2fbf6; color: #57a87c; font-size: 12px;
    }
    .member-detail-overview-card { display: grid; grid-template-columns: minmax(210px, .9fr) minmax(250px, 1.15fr); gap: 28px; }
    .member-detail-card h3 { margin: 2px 0 17px; font-size: 15px; color: #101828; }
    .member-detail-overview-list { display: flex; flex-direction: column; gap: 15px; }
    .member-detail-overview-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12px; }
    .member-detail-overview-list span { color: #87909c; }
    .member-detail-overview-list strong { color: #46505c; font-weight: 500; white-space: nowrap; }
    .member-detail-overview-list strong.green { color: #59ae82; }
    .member-detail-help {
      display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
      margin-left: 3px; border-radius: 50%; background: #9ba4af; color: #fff !important; font-size: 10px;
    }
    .member-detail-card-actions { display: flex; align-items: center; justify-content: space-between; }
    .member-detail-card-actions > div { display: flex; gap: 7px; }
    .member-detail-more-btn,
    .member-detail-renew-btn { height: 30px; padding: 0 13px; border-radius: 16px; font-size: 12px; cursor: pointer; }
    .member-detail-more-btn { border: 1px solid #d9dee5; background: #fff; color: #6c7580; }
    .member-detail-renew-btn { border: 1px solid var(--brand); background: var(--brand); color: #fff; }
    .member-detail-card-visual {
      min-height: 154px; padding: 19px 21px; box-sizing: border-box; border: 4px solid #e6eef5;
      border-radius: 8px; color: #08234b; overflow: hidden; position: relative;
      background: linear-gradient(122deg, #b9e0f6 0%, #8fc6e8 57%, #79b7df 57%, #70add8 100%);
    }
    .member-detail-card-visual::before,
    .member-detail-card-visual::after {
      content: ''; position: absolute; top: -70px; width: 88px; height: 280px;
      transform: rotate(35deg); border-radius: 50px; background: rgba(255,255,255,.18);
    }
    .member-detail-card-visual::before { right: 98px; }
    .member-detail-card-visual::after { right: -24px; background: rgba(255,255,255,.1); }
    .member-detail-card-visual > * { position: relative; z-index: 1; }
    .member-detail-card-visual > strong { display: block; margin-bottom: 23px; font-size: 16px; }
    .member-detail-card-money { display: flex; gap: 24px; }
    .member-detail-card-money div,
    .member-detail-card-valid { display: flex; flex-direction: column; gap: 4px; }
    .member-detail-card-money span,
    .member-detail-card-valid span { font-size: 11px; color: #486278; }
    .member-detail-card-money b { font-size: 17px; }
    .member-detail-card-valid { margin-top: 14px; }
    .member-detail-card-valid b { font-size: 12px; }
    .member-detail-tabs {
      display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; padding: 0 16px;
      overflow-x: auto; background: transparent;
    }
    .member-detail-tabs button {
      min-width: 108px; height: 43px; padding: 0 18px; border: 0; border-radius: 6px 6px 0 0;
      background: #e9edf1; color: #202731; font-size: 14px; cursor: pointer; position: relative; white-space: nowrap;
    }
    .member-detail-tabs button.active { background: #fff; font-weight: 700; }
    .member-detail-tabs button.active::after {
      content: ''; position: absolute; left: 24px; right: 24px; bottom: 7px; height: 4px;
      border-radius: 3px; background: #8dd6ab;
    }
    .member-detail-content { min-height: 440px; background: #fff; border-radius: 7px; overflow: hidden; }
    .member-detail-panel { display: none; padding: 18px 16px 24px; box-sizing: border-box; }
    .member-detail-panel.active { display: block; }
    .member-detail-add-pet {
      height: 32px; padding: 0 17px; margin-bottom: 14px; border: 0; border-radius: 17px;
      background: #7bc797; color: #fff; font-size: 12px; cursor: pointer;
    }
    .member-detail-table-wrap { width: 100%; overflow-x: auto; }
    .member-detail-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
    .member-detail-table thead { background: #f3f5f8; }
    .member-detail-table th { height: 52px; padding: 0 12px; text-align: left; font-weight: 600; color: #303741; white-space: nowrap; }
    .member-detail-table td { height: 70px; padding: 0 12px; border-bottom: 1px solid #edf0f3; color: #343c46; }
    .member-detail-table tbody tr:nth-child(even) { background: #f7f8fa; }
    .member-detail-table tbody tr:hover { background: #f0f8f4; }
    .member-detail-table.pet-table { min-width: 1160px; }
    .member-detail-table.pet-table th:first-child { width: 50px; }
    .member-detail-table.pet-table th:nth-child(2) { width: 62px; }
    .member-detail-table.pet-table th:last-child { width: 120px; }
    .member-detail-pet-avatar {
      display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
      border-radius: 6px; background: #daefe2; font-size: 21px;
    }
    .member-detail-subtext { color: #89939f; font-size: 11px; }
    .member-detail-row-actions { display: flex; gap: 7px; }
    .member-detail-row-actions button {
      height: 27px; padding: 0 12px; border: 1px solid var(--brand); border-radius: 14px;
      background: #fff; color: var(--brand); font-size: 11px; cursor: pointer;
    }
    .member-detail-row-actions button.plain { color: #303741; border-color: #d7dce2; }
    .member-detail-filter-row { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }
    .member-detail-search {
      width: 270px; height: 34px; display: flex; align-items: center; gap: 6px;
      padding: 0 12px; box-sizing: border-box; border: 1px solid #cae5d4; border-radius: 18px; background: #fff;
      box-shadow: 0 0 0 2px rgba(109, 192, 143, .13);
    }
    .member-detail-search span { color: #929ba6; font-size: 17px; }
    .member-detail-search input { width: 100%; border: 0; outline: 0; color: #303741; font: inherit; font-size: 12px; }
    .member-detail-date {
      width: 285px; height: 34px; display: flex; align-items: center; justify-content: space-between;
      padding: 0 13px; box-sizing: border-box; border: 1px solid #d9dee5; border-radius: 18px;
      color: #8a939e; font-size: 12px; background: #fff;
    }
    .member-detail-date b { color: #b0b6bd; font-weight: 400; }
    .member-detail-date i { color: #a4acb6; font-style: normal; }
    .member-detail-order-select {
      width: 132px; height: 34px; padding: 0 13px; border: 1px solid #d9dee5; border-radius: 18px;
      background: #fff; color: #66707b; font: inherit; font-size: 12px; outline: 0; cursor: pointer;
    }
    .member-detail-query,
    .member-detail-reset { height: 34px; padding: 0 18px; border-radius: 18px; font-size: 12px; cursor: pointer; }
    .member-detail-query { border: 1px solid var(--brand); background: var(--brand); color: #fff; }
    .member-detail-reset { border: 1px solid #d7dce2; background: #fff; color: #4d5661; }
    .member-detail-table.consume-table { min-width: 900px; }
    .member-detail-table.consume-table th:first-child { width: 260px; }
    .member-detail-table.consume-table th:nth-child(2) { width: 150px; text-align: center; }
    .member-detail-table.consume-table th:nth-child(3) { width: 150px; text-align: center; }
    .member-detail-table.consume-table th:nth-child(4) { width: 200px; text-align: center; }
    .member-detail-table.consume-table th:nth-child(5) { width: 260px; text-align: center; }
    .member-detail-table.consume-table td:nth-child(n+2) { text-align: center; }
    .member-detail-table a { color: #5f78f5; cursor: pointer; text-decoration: none; }
    .member-detail-table a:hover { text-decoration: underline; }
    .member-detail-order-type.after-sale {
      display: inline-flex; height: 24px; align-items: center; padding: 0 10px;
      border-radius: 12px; background: #fff1f0; color: #e05c58; font-weight: 600;
    }
    .member-detail-negative { color: #e34f4f !important; font-weight: 700; }
    .member-detail-after-sale-row { background: #fffafa !important; }
    .member-detail-empty { min-height: 360px; align-items: center; justify-content: center; color: #9aa3ae; }
    .member-detail-empty.active { display: flex; }
    @media (max-width: 980px) {
      .member-detail-top { grid-template-columns: 1fr; }
      .member-detail-overview-card { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 680px) {
      .member-detail-card { padding: 18px 16px; }
      .member-detail-overview-card,
      .member-detail-profile-grid { grid-template-columns: 1fr; }
      .member-detail-basic { grid-template-columns: 1fr; gap: 10px; }
      .member-detail-basic > div { padding: 0; border-right: 0; }
      .member-detail-id { white-space: normal; }
    }

    .member-card-modal-overlay {
      position: fixed; inset: 0; z-index: 10060; background: rgba(15,23,42,.28);
      display: flex; align-items: center; justify-content: center; padding: 32px;
    }
    .member-card-modal {
      width: min(680px, calc(100vw - 80px)); background: #fff; border-radius: 6px;
      box-shadow: 0 18px 48px rgba(15,23,42,.24); padding: 20px 22px 24px; position: relative;
    }
    .member-card-modal-title { font-size: 20px; font-weight: 700; color: #20242a; margin-bottom: 18px; }
    .member-card-modal-close {
      position: absolute; top: 18px; right: 20px; width: 28px; height: 28px; border: none;
      background: transparent; color: #8b8f96; font-size: 34px; line-height: 26px; cursor: pointer;
    }
    .member-card-modal-card {
      height: 196px; border-radius: 8px; overflow: hidden; position: relative; color: #fff;
      background: linear-gradient(110deg, #f9aec0 0%, #ff7f9b 58%, #ff5a7b 100%);
      padding: 38px 34px; box-sizing: border-box;
    }
    .member-card-modal-card::before,
    .member-card-modal-card::after {
      content: ''; position: absolute; top: -54px; width: 150px; height: 310px;
      transform: rotate(34deg); border-radius: 90px; background: rgba(255,255,255,.14);
    }
    .member-card-modal-card::before { left: 320px; }
    .member-card-modal-card::after { right: -20px; background: rgba(255,255,255,.08); }
    .member-card-modal-name { position: relative; z-index: 1; font-size: 34px; font-weight: 500; margin-bottom: 34px; }
    .member-card-modal-label { position: relative; z-index: 1; font-size: 20px; opacity: .9; margin-bottom: 12px; }
    .member-card-modal-amount { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 18px; }
    .member-card-modal-money { font-size: 38px; line-height: 1; font-weight: 500; }
    .member-card-modal-gift { font-size: 20px; opacity: .82; }
    .member-card-modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 34px; }
    .member-card-modal-action {
      height: 40px; padding: 0 22px; border-radius: 21px; border: 1px solid #d8dde5;
      background: #fff; color: #333942; font-size: 16px; cursor: pointer;
    }
    .member-card-modal-action.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
    .member-flow-page {
      height: 100%; overflow-y: auto; background: #f5f7fa; padding: 14px 12px 72px; box-sizing: border-box;
    }
    .member-flow-section {
      background: #fff; border-radius: 8px; padding: 28px 86px; margin-bottom: 14px;
      box-sizing: border-box;
    }
    .member-flow-title { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 26px; }
    .member-flow-card-row { display: flex; align-items: center; gap: 42px; margin-bottom: 36px; }
    .member-flow-card-preview {
      width: 270px; height: 86px; border: 1px solid #dbe4ef; border-radius: 8px;
      background: linear-gradient(110deg, #ffabc0 0%, #ff7896 58%, #ff5576 100%);
      color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center;
      padding-left: 22px; position: relative; overflow: hidden;
    }
    .member-flow-card-preview::before,
    .member-flow-option-card::before {
      content: ''; position: absolute; top: -44px; right: 52px; width: 92px; height: 180px;
      transform: rotate(35deg); border-radius: 60px; background: rgba(255,255,255,.16);
    }
    .member-flow-card-stat { font-size: 15px; color: #606875; line-height: 1.5; min-width: 140px; }
    .member-flow-card-stat strong { display: block; color: #ff4d5d; font-size: 22px; line-height: 1.25; }
    .member-flow-card-stat .green { color: var(--brand); font-size: 18px; font-weight: 700; }
    .member-flow-benefits { display: grid; grid-template-columns: repeat(3, 270px); gap: 38px; }
    .member-flow-benefit {
      min-height: 96px; border: 1px solid #e1e6ed; border-radius: 6px; padding: 22px 24px;
      box-sizing: border-box; font-size: 16px; color: #20242a;
    }
    .member-flow-benefit .icon { color: #ffb13d; margin-right: 12px; }
    .member-flow-view {
      display: inline-flex; height: 28px; min-width: 64px; align-items: center; justify-content: center;
      margin-top: 18px; border: 1px solid #d8dde5; border-radius: 15px; font-size: 14px; color: #333942;
    }
    .member-flow-form { display: grid; grid-template-columns: 110px 470px; gap: 18px 20px; align-items: start; }
    .member-flow-label { min-height: 36px; display: flex; align-items: center; font-size: 15px; color: #20242a; }
    .member-flow-label.required::before { content: '*'; color: #ff4d4f; margin-right: 7px; }
    .member-flow-input,
    .member-flow-select {
      height: 36px; border: 1px solid #d7dce4; border-radius: 18px; background: #f8f8f8;
      color: #a0a6b1; display: flex; align-items: center; justify-content: space-between;
      padding: 0 14px; box-sizing: border-box; font-size: 14px;
    }
    .member-flow-input .unit { width: 42px; height: 34px; margin-right: -14px; border-left: 1px solid #d7dce4; display: flex; align-items: center; justify-content: center; color: #333942; }
    .member-flow-pay-row { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 10px; }
    .member-flow-add-pay { width: 470px; height: 36px; border: 1px solid #d7dce4; border-radius: 18px; background: #f8f8f8; color: #b4bac4; font-size: 14px; }
    .member-flow-textarea { width: 470px; height: 118px; border: 1px solid #d7dce4; border-radius: 8px; background: #f8f8f8; resize: none; padding: 12px; box-sizing: border-box; }
    .member-flow-checks { min-height: 36px; display: flex; align-items: center; gap: 24px; color: #a0a6b1; font-size: 14px; }
    .member-flow-checks label { display: inline-flex; align-items: center; gap: 8px; }
    .member-flow-checks input { width: 18px; height: 18px; accent-color: var(--brand); }
    .member-flow-print-stack {
      display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px;
    }
    .member-flow-preview-btn {
      height: 26px; padding: 0 13px; border: 1px solid #c9cdd4; border-radius: 14px;
      background: #fff; color: #333942; font-size: 12px; cursor: pointer; margin-left: 26px;
    }
    .member-flow-preview-btn:hover { border-color: var(--brand); color: var(--brand); }
    .member-flow-footer {
      position: sticky; bottom: 0; height: 58px; background: rgba(255,255,255,.96);
      border-top: 1px solid #e7ebef; display: flex; align-items: center; justify-content: center; gap: 12px;
    }
    .member-flow-confirm {
      height: 36px; padding: 0 28px; border: none; border-radius: 18px; background: #e9ecef;
      color: #b2b8c2; font-size: 14px; cursor: pointer;
    }
    .member-flow-confirm.active { background: var(--brand); color: #fff; }
    .member-flow-cancel {
      height: 36px; padding: 0 24px; border: 1px solid #d7dce4; border-radius: 18px; background: #fff; color: #333942; font-size: 14px; cursor: pointer;
    }
    .member-open-grid { display: grid; grid-template-columns: repeat(3, 250px); gap: 26px 68px; }
    .member-open-choice { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
    .member-open-radio { width: 16px; height: 16px; border: 1px solid #cfd6df; border-radius: 50%; margin-top: 2px; background: #fff; }
    .member-open-choice-title { font-size: 15px; margin-bottom: 8px; color: #333942; }
    .member-flow-option-card {
      width: 250px; height: 78px; border-radius: 7px; border: 1px solid #dbe4ef; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55);
      color: #9b5708; padding: 14px 20px; box-sizing: border-box; position: relative; overflow: hidden;
      background: linear-gradient(110deg, #ffe4a4 0%, #ffc56c 58%, #f1a83a 100%);
    }
    .member-flow-option-card.pink { color: #fff; background: linear-gradient(110deg, #ffabc0 0%, #ff7896 58%, #ff5576 100%); }
    .member-flow-option-card.dark { color: #fff; background: linear-gradient(110deg, #535353 0%, #3f4141 58%, #252728 100%); }
    .member-flow-option-card.blue { color: #164064; background: linear-gradient(110deg, #c7efff 0%, #8cd3ec 58%, #60bedf 100%); }
    .member-flow-option-card .money { position: relative; z-index: 1; font-size: 20px; font-weight: 700; }
    .member-flow-option-card .rule { position: relative; z-index: 1; font-size: 15px; margin-top: 4px; }

    /* 分页 */
    .pagination {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
    }
    .pagination-total { font-size: 13px; color: var(--text-secondary); margin-right: 8px; }
    .page-btn {
      min-width: 28px;
      height: 28px;
      padding: 0 8px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: #fff;
      color: var(--text-secondary);
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
    }
    .page-btn:hover { border-color: var(--brand); color: var(--brand); }
    .page-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
    .pagination-to { font-size: 13px; color: var(--text-secondary); }
    .page-input {
      width: 40px;
      height: 28px;
      border: 1px solid var(--border);
      border-radius: 3px;
      text-align: center;
      font-size: 13px;
      color: var(--text-primary);
      outline: none;
    }
    .page-input:focus { border-color: var(--brand); }
    .pagination-unit { font-size: 13px; color: var(--text-secondary); }
    .page-btn-go {
      padding: 3px 10px;
      background: var(--brand);
      color: #fff;
      border-radius: 3px;
      font-size: 12px;
      cursor: pointer;
      transition: background .15s;
    }
    .page-btn-go:hover { background: var(--brand-dark); }

    /* ===== 系统设置页面 ===== */
    .sysset-wrap {
      display: flex; height: 100%; overflow: hidden;
    }
    .sysset-sidebar {
      width: 180px; flex-shrink: 0; border-right: 1px solid var(--border-light);
      background: #fff; padding: 20px 12px; display: flex; flex-direction: column;
      align-items: center; gap: 6px; overflow-y: auto;
    }
    .sysset-nav-item {
      width: 140px; padding: 9px 12px; border-radius: 8px;
      font-size: 13px; color: var(--text-secondary); cursor: pointer;
      text-align: center; transition: all .15s; border: none; background: #f0f5f2;
      font-family: inherit;
    }
    .sysset-nav-item:hover { color: var(--brand); background: #e0efe6; }
    .sysset-nav-item.active {
      color: #fff; background: var(--brand); font-weight: 500;
    }
    .sysset-nav-save {
      margin-top: 16px; width: 140px; padding: 8px 0;
      background: var(--brand); color: #fff; border: none;
      border-radius: 20px; font-size: 13px; cursor: pointer;
      font-family: inherit; transition: background .15s;
    }
    .sysset-nav-save:hover { background: var(--brand-dark); }
    .sysset-main {
      flex: 1; overflow-y: auto; padding: 20px 28px;
      box-sizing: border-box;
    }
    .sysset-section {
      margin-bottom: 28px;
    }
    .sysset-section-title {
      font-size: 15px; font-weight: 600; color: var(--text-primary);
      margin-bottom: 16px; padding-bottom: 8px;
      border-bottom: 1px solid var(--border-light);
    }
    .sysset-section-title .tag-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 10px; border: 1px solid var(--brand);
      border-radius: 4px; font-size: 12px; color: var(--brand);
      background: #fff; cursor: pointer; margin-left: 8px;
      font-family: inherit; font-weight: normal;
    }
    .sysset-section-title .tag-btn:hover { background: var(--brand-light); }
    .sysset-field {
      margin-bottom: 16px;
    }
    .sysset-field:last-child { margin-bottom: 0; }
    .sysset-field-label {
      font-size: 13px; color: var(--text-primary); margin-bottom: 10px;
    }
    .sysset-field-row {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .sysset-field-row .sysset-input {
      height: 32px; padding: 0 10px; border: 1px solid var(--border);
      border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary);
      font-family: inherit; outline: none; width: 120px;
      transition: border-color .15s;
    }
    .sysset-field-row .sysset-input:focus { border-color: var(--brand); }
    .sysset-field-row .unit {
      font-size: 13px; color: var(--text-secondary);
    }
    .sysset-field-row .sep-text {
      font-size: 13px; color: var(--text-secondary); margin: 0 4px;
    }
    .sysset-field-desc {
      font-size: 12px; color: var(--text-muted); margin-top: 8px;
    }
    .sysset-field-desc .num {
      color: var(--brand); font-weight: 600;
    }
    /* 单选组 */
    .sysset-radio-group { display: flex; gap: 24px; flex-wrap: wrap; }
    .sysset-radio {
      display: flex; align-items: center; gap: 6px;
      font-size: 13px; color: var(--text-primary); cursor: pointer;
    }
    .sysset-radio input {
      width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer;
    }
    .sysset-radio-row {
      margin-bottom: 12px;
    }
    .sysset-radio-row:last-child { margin-bottom: 0; }
    .sysset-radio-row .sysset-field-label {
      margin-bottom: 8px;
    }
    .sysset-meituan-commission {
      margin-top: 18px;
    }
    .sysset-meituan-commission .sysset-field-label {
      font-weight: 600;
      margin-bottom: 12px;
    }
    .sysset-meituan-join-row {
      display: flex; align-items: center; gap: 28px;
      margin-bottom: 12px; flex-wrap: wrap;
    }
    .sysset-meituan-join-label {
      font-size: 13px; color: var(--text-primary);
    }
    .sysset-meituan-join-options {
      align-items: center; gap: 20px;
    }
    .sysset-meituan-note {
      font-size: 12px; color: #2aa7a2;
    }
    .sysset-meituan-methods {
      flex-direction: column; gap: 10px;
    }
    /* Toggle 开关（电商渠道用） */
    .sysset-toggle-wrap {
      display: flex; align-items: center; gap: 12px;
    }
    .sysset-toggle {
      position: relative; display: inline-block; width: 44px; height: 24px;
      cursor: pointer; flex-shrink: 0;
    }
    .sysset-toggle input { opacity: 0; width: 0; height: 0; }
    .sysset-toggle-slider {
      position: absolute; inset: 0; border-radius: 12px;
      background: #d9d9d9; transition: all .2s;
    }
    .sysset-toggle-slider::before {
      content: ''; position: absolute; width: 20px; height: 20px;
      border-radius: 50%; background: #fff; left: 2px; top: 2px;
      transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .sysset-toggle input:checked + .sysset-toggle-slider { background: var(--brand); }
    .sysset-toggle input:checked + .sysset-toggle-slider::before { transform: translateX(20px); }
    .sysset-toggle-label { font-size: 13px; color: var(--text-primary); }
    .sysset-toggle-btn {
      padding: 4px 14px; border: 1px solid var(--border);
      border-radius: var(--radius-sm); font-size: 12px; color: var(--text-secondary);
      background: #fff; cursor: pointer; font-family: inherit;
    }
    .sysset-toggle-btn:hover { border-color: var(--brand); color: var(--brand); }
    /* 占位子页面 */
    .settings-sub-placeholder {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: 400px; color: var(--text-muted); gap: 12px;
    }

    /* ===== 通用占位页 ===== */
    .placeholder-page {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: 400px; color: var(--text-muted); gap: 12px;
    }
    .ph-icon { font-size: 48px; opacity: .3; }
    .ph-title { font-size: 16px; font-weight: 500; color: var(--text-secondary); }
    .ph-desc { font-size: 13px; }

    /* ===== 通用组件 ===== */
    .tag {
      display: inline-flex; align-items: center;
      padding: 2px 8px; border-radius: 10px; font-size: 12px;
    }
    .tag-green  { background: #e8f5ee; color: #3a9a6a; }
    .tag-orange { background: #fff5e6; color: #c87d00; }
    .tag-red    { background: #fff0f0; color: #c53030; }
    .tag-blue   { background: #e8f0fb; color: #2a6bc4; }
    .tag-gray   { background: #f2f4f3; color: var(--text-muted); }

    /* ===== 弹窗 ===== */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,.4);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal-box {
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: 0 8px 30px rgba(0,0,0,.15);
      overflow: hidden;
    }
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-light);
    }
    .modal-title { font-size: 15px; font-weight: 500; color: var(--text-primary); }
    .modal-close {
      width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      font-size: 14px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all .15s;
    }
    .modal-close:hover { background: var(--border-light); color: var(--text-primary); }
    .modal-body { padding: 20px; }
    .modal-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 20px;
      border-top: 1px solid var(--border-light);
    }
    .modal-btn {
      padding: 7px 20px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      cursor: pointer;
      transition: all .15s;
    }
    .modal-btn-cancel {
      background: #fff;
      color: var(--text-secondary);
      border: 1px solid var(--border);
    }
    .modal-btn-cancel:hover { border-color: var(--text-muted); color: var(--text-primary); }
    .modal-btn-confirm {
      background: var(--brand);
      color: #fff;
      border: 1px solid var(--brand);
    }
    .modal-btn-confirm:hover { background: var(--brand-dark); }
    .modal-btn-danger {
      background: var(--red);
      color: #fff;
      border: 1px solid var(--red);
    }
    .modal-btn-danger:hover { background: #d04040; }

    /* ===== 系统付费订单 ===== */
    .sys-pay-page {
      min-height: 100%;
      background: #f4f6f8;
      color: #1f2a37;
    }
    .sys-pay-topbar {
      height: 58px;
      background: #f8fbff;
      border-bottom: 1px solid #e5edf3;
      box-shadow: 0 1px 6px rgba(20, 40, 70, .06);
      display: flex;
      align-items: center;
      padding: 0 24px;
      gap: 10px;
      position: sticky;
      top: 0;
      z-index: 5;
    }
    .sys-pay-logo {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, #45c58b, #2fac70);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 800;
      box-shadow: 0 4px 10px rgba(47, 172, 112, .22);
      flex-shrink: 0;
    }
    .sys-pay-title { font-size: 15px; font-weight: 700; color: #13202d; }
    .sys-pay-spacer { flex: 1; }
    .sys-pay-back,
    .sys-pay-action,
    .sys-pay-order-btn,
    .plan-modal-pay-btn {
      font-family: inherit;
      cursor: pointer;
    }
    .sys-pay-back {
      height: 34px;
      padding: 0 18px;
      border: none;
      border-radius: 18px;
      background: linear-gradient(135deg, #7ed9aa, #48b778);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 4px 10px rgba(47, 172, 112, .18);
    }
    .sys-pay-main { padding: 24px 42px 46px; }
    .sys-pay-hero {
      min-height: 206px;
      border: 1px solid #d9ece9;
      border-radius: 8px;
      overflow: hidden;
      background:
        radial-gradient(circle at 86% 28%, rgba(55, 190, 159, .22), transparent 14%),
        radial-gradient(circle at 91% 74%, rgba(110, 223, 163, .18), transparent 10%),
        linear-gradient(112deg, #effaf6 0%, #eefaf8 43%, #dff8f9 68%, #c8eff2 100%);
      box-shadow: 0 2px 8px rgba(20, 40, 70, .08);
      display: grid;
      grid-template-columns: minmax(520px, 46%) 1fr;
      position: relative;
    }
    .sys-pay-hero-art {
      position: relative;
      min-height: 206px;
    }
    .sys-pay-hero-art::before {
      content: '';
      position: absolute;
      right: 78px;
      top: 28px;
      width: 310px;
      height: 132px;
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.22)),
        repeating-linear-gradient(160deg, rgba(52, 159, 170, .20) 0 2px, transparent 2px 14px);
      transform: skewX(-12deg);
    }
    .sys-pay-hero-art::after {
      content: 'VIP';
      position: absolute;
      right: 246px;
      top: 54px;
      width: 96px;
      height: 66px;
      border-radius: 22px;
      background: linear-gradient(145deg, #19bda8, #8df1d4);
      color: rgba(255,255,255,.95);
      font-size: 24px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 16px 26px rgba(19, 150, 143, .24);
    }
    .sys-pay-info {
      position: relative;
      z-index: 1;
      padding: 34px 38px 28px;
      display: grid;
      grid-template-columns: 126px 1fr;
      row-gap: 18px;
      column-gap: 20px;
      align-content: start;
      font-size: 15px;
      line-height: 1.5;
    }
    .sys-pay-label { font-weight: 700; color: #1f2a37; }
    .sys-pay-value { color: #1f2a37; }
    .sys-pay-actions {
      grid-column: 1 / -1;
      display: flex;
      gap: 42px;
      margin-top: 4px;
    }
    .sys-pay-action {
      width: 126px;
      height: 34px;
      border-radius: 18px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #d0d7de;
      background: #fff;
      color: #2f3542;
      box-shadow: 0 3px 8px rgba(20, 40, 70, .12);
    }
    .sys-pay-action.primary {
      color: #fff;
      border-color: #55be82;
      background: linear-gradient(135deg, #75d79d, #45b86f);
    }
    .sys-pay-section {
      margin-top: 26px;
      background: #fff;
      border: 1px solid #eef1f3;
    }
    .sys-pay-section-title {
      padding: 22px 26px;
      font-size: 17px;
      font-weight: 700;
      border-bottom: 1px solid #edf0f2;
    }
    .sys-pay-order-card {
      padding: 26px 30px 28px;
      border-bottom: 22px solid #f4f6f8;
    }
    .sys-pay-order-card:last-child { border-bottom: none; }
    .sys-pay-order-meta {
      display: flex;
      align-items: center;
      gap: 22px;
      flex-wrap: wrap;
      color: #8e96a3;
      font-size: 14px;
      margin-bottom: 22px;
    }
    .sys-pay-order-meta strong { color: #26313d; font-weight: 700; }
    .sys-pay-countdown { margin-left: auto; color: #2f3542; }
    .sys-pay-countdown span { color: #ff4d4f; font-weight: 700; }
    .sys-pay-order-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 18px;
      align-items: start;
    }
    .sys-pay-order-item { min-width: 0; }
    .sys-pay-order-label {
      color: #8e96a3;
      font-size: 13px;
      margin-bottom: 7px;
    }
    .sys-pay-order-value {
      color: #1f2a37;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.45;
      word-break: break-all;
    }
    .sys-pay-status {
      height: 24px;
      padding: 0 10px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
    }
    .sys-pay-status.pending { background: #fff5e6; color: #d47b16; }
    .sys-pay-status.done { background: #eef9f3; color: #35a96b; }
    .sys-pay-order-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 24px;
    }
    .sys-pay-order-btn {
      min-width: 90px;
      height: 32px;
      border-radius: 16px;
      border: 1px solid #d7dce2;
      background: #fff;
      color: #4a5564;
      font-size: 13px;
      font-weight: 600;
    }
    .sys-pay-order-btn.primary {
      border-color: #4caf82;
      background: #4caf82;
      color: #fff;
    }
    .sys-pay-order-card.addon-order {
      background: linear-gradient(90deg, #fbfffd 0%, #fff 42%);
      box-shadow: inset 4px 0 0 #55be82;
    }
    #systemPayDynamicOrders .sys-pay-order-card {
      border-bottom: 22px solid #f4f6f8;
    }
    .sys-pay-order-type {
      height: 24px;
      padding: 0 10px;
      border-radius: 12px;
      background: #eef9f3;
      color: #35a96b;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
    }
    .plan-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(14, 25, 38, .45);
      z-index: 1100;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .plan-modal-overlay.show { display: flex; }
    .plan-modal-box {
      width: 830px;
      max-width: calc(100vw - 48px);
      max-height: calc(100vh - 60px);
      overflow: hidden;
      background: #f5f7f9;
      border-radius: 10px;
      box-shadow: 0 18px 48px rgba(12, 24, 38, .26);
    }
    .plan-modal-head {
      height: 58px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      background: linear-gradient(135deg, #4fc583, #8bdcb2);
      color: #fff;
    }
    .plan-modal-title { font-size: 18px; font-weight: 800; }
    .plan-modal-version {
      height: 24px;
      padding: 0 10px;
      border-radius: 12px;
      background: rgba(255,255,255,.22);
      display: inline-flex;
      align-items: center;
      font-size: 12px;
    }
    .plan-modal-close {
      margin-left: auto;
      width: 30px;
      height: 30px;
      border: none;
      background: transparent;
      color: #fff;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
    }
    .plan-modal-body {
      padding: 18px;
      max-height: calc(100vh - 118px);
      overflow-y: auto;
    }
    .plan-modal-card {
      background: #fff;
      border-radius: 10px;
      padding: 16px;
      margin-bottom: 14px;
      border: 1px solid #eef1f3;
    }
    .plan-modal-card-title {
      font-size: 16px;
      font-weight: 800;
      color: #1f2d25;
      margin-bottom: 12px;
    }
    .plan-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .plan-feature-item {
      min-height: 58px;
      border-radius: 8px;
      background: #f7faf8;
      color: #58645f;
      font-size: 13px;
      line-height: 1.45;
      padding: 10px;
    }
    .plan-picker-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 16px;
    }
    .plan-version {
      height: 42px;
      border-radius: 8px;
      background: #f3f5f8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #4b5563;
      border: 1px solid transparent;
    }
    .plan-version.active {
      background: #f1fffa;
      color: #49b87a;
      border-color: #64d598;
    }
    .plan-period-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .plan-period-card {
      min-height: 154px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: linear-gradient(180deg, #f5f7fa 0%, #f7f8fb 76%, #fff5e4 76%, #fff5e4 100%);
      padding: 14px;
      overflow: hidden;
    }
    .plan-period-card.active {
      border-color: #ff9d36;
      background: linear-gradient(180deg, #f2fffd 0%, #ecfffd 76%, #ffc969 76%, #ffc969 100%);
    }
    .plan-period-name { font-size: 17px; font-weight: 800; color: #3c2b1d; margin-bottom: 18px; }
    .plan-price { color: #ff7f28; font-size: 27px; font-weight: 800; line-height: 1; }
    .plan-price small { font-size: 13px; }
    .plan-origin { margin-top: 8px; color: #a6acb5; text-decoration: line-through; font-size: 12px; }
    .plan-slogan {
      margin: 20px -14px -14px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8b5d1e;
      font-size: 13px;
      font-weight: 700;
    }
    .plan-modal-pay-btn {
      width: 180px;
      height: 38px;
      border: none;
      border-radius: 19px;
      background: linear-gradient(135deg, #ff9d36, #ff7f28);
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      display: block;
      margin: 16px auto 0;
    }

    /* ===== 表单 ===== */
    .form-row { margin-bottom: 18px; }
    .form-row:last-child { margin-bottom: 0; }
    .form-label {
      display: block;
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 6px;
      font-weight: 500;
    }
    .form-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      color: var(--text-primary);
      outline: none;
      transition: border-color .15s;
      font-family: inherit;
    }
    .form-input:focus { border-color: var(--brand); }
    .form-input::placeholder { color: var(--text-muted); }
    .form-hint {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    .form-textarea {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      color: var(--text-primary);
      outline: none;
      transition: border-color .15s;
      font-family: inherit;
      resize: vertical;
    }
    .form-textarea:focus { border-color: var(--brand); }
    .form-textarea::placeholder { color: var(--text-muted); }

    /* 摄像头权限弹窗 */
    .perm-item {
      padding: 18px 0;
      border-bottom: 1px solid var(--border-light);
    }
    .perm-item:last-child { border-bottom: none; padding-bottom: 4px; }
    .perm-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .perm-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
    }
    .perm-desc {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 8px;
      line-height: 1.7;
    }
    /* 开关组件 */
    .toggle-switch {
      position: relative;
      width: 42px;
      height: 22px;
      flex-shrink: 0;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background: #d0d5de;
      border-radius: 22px;
      transition: .25s;
    }
    .toggle-slider::before {
      content: '';
      position: absolute;
      height: 18px; width: 18px;
      left: 2px; bottom: 2px;
      background: #fff;
      border-radius: 50%;
      transition: .25s;
      box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
    .toggle-switch input:checked + .toggle-slider {
      background: var(--brand);
    }
    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(20px);
    }

    /* ===== 新建/编辑洗护单页面 ===== */
    .form-page { background: var(--card-bg); border-radius: var(--radius-lg); padding: 0; }
    .form-page-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 24px;
      border-bottom: 1px solid var(--border);
    }
    .form-back-btn {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: #fff;
      cursor: pointer;
      font-size: 16px;
      color: var(--text-secondary);
      transition: .15s;
    }
    .form-back-btn:hover { border-color: var(--brand); color: var(--brand); }
    .form-page-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .form-page-body { padding: 24px; }
    .form-section { margin-bottom: 28px; }
    .form-section:last-child { margin-bottom: 0; }
    .form-section-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
      padding-left: 10px;
      border-left: 3px solid var(--brand);
    }
    .form-row-inline {
      display: flex;
      gap: 16px;
      margin-bottom: 18px;
      align-items: flex-start;
    }
    .form-col { flex: 1; min-width: 0; }
    .form-col-half { width: 50%; }
    .form-col-third { width: 33.33%; }
    .form-label-required::before {
      content: '*';
      color: var(--red);
      margin-right: 4px;
    }
    .form-radio-group {
      display: flex;
      gap: 16px;
      margin-top: 6px;
    }
    .form-radio {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text-primary);
    }
    .form-radio input[type="radio"] { accent-color: var(--brand); }
    .form-textarea { resize: vertical; min-height: 60px; }
    .form-word-count {
      text-align: right;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    .form-color-group {
      display: flex;
      gap: 8px;
      margin-top: 6px;
    }
    .form-color-dot {
      width: 24px; height: 24px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: .15s;
    }
    .form-color-dot.selected { border-color: var(--text-primary); transform: scale(1.15); }
    .form-pet-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      margin-top: 8px;
      cursor: pointer;
      transition: .15s;
    }
    .form-pet-card:hover { border-color: var(--brand); }
    .form-pet-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--brand-light);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
    }
    .form-pet-info { flex: 1; }
    .form-pet-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .form-pet-breed { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .form-service-table {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-top: 8px;
    }
    .form-service-table table { width: 100%; border-collapse: collapse; }
    .form-service-table th {
      background: var(--sidebar-bg);
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
      text-align: left;
      border-bottom: 1px solid var(--border);
    }
    .form-service-table td {
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-light);
    }
    .form-service-table tr:last-child td { border-bottom: none; }
    .form-add-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 10px;
      padding: 6px 14px;
      background: var(--brand-light);
      color: var(--brand-dark);
      border: 1px dashed var(--brand);
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 13px;
      transition: .15s;
    }
    .form-add-btn:hover { background: #d9f0e4; }
    .form-page-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    /* ===== 创建洗护报告页面 ===== */
    #page-service-report-create.page.active { min-height: 100%; }
    .wr-create-page {
      min-height: 100%;
      background: #f5f6f7;
      padding: 0 8px 18px;
      box-sizing: border-box;
    }
    .wr-create-shell {
      min-height: 100%;
      background: #fff;
      border-radius: 3px;
      padding: 28px 26px 22px;
      box-sizing: border-box;
    }
    .wr-create-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 26px;
    }
    .wr-create-title {
      font-size: 18px;
      font-weight: 700;
      color: #111827;
    }
    .wr-create-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .wr-create-btn {
      height: 38px;
      min-width: 86px;
      padding: 0 22px;
      border-radius: 20px;
      border: 1px solid #62bd8d;
      background: #fff;
      color: #4bae79;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
    }
    .wr-create-btn:hover { background: #f4fbf7; }
    .wr-create-btn.primary {
      min-width: 116px;
      border-color: transparent;
      background: #68bd8d;
      color: #fff;
    }
    .wr-create-btn.primary:hover { background: #55ad7d; }
    .wr-client-form {
      width: 560px;
      margin-left: 78px;
      margin-bottom: 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .wr-form-line {
      display: grid;
      grid-template-columns: 88px 1fr;
      align-items: center;
      gap: 12px;
    }
    .wr-label {
      text-align: right;
      font-size: 14px;
      color: #111827;
      white-space: nowrap;
    }
    .wr-label.required::before {
      content: '*';
      color: #f15b50;
      margin-right: 8px;
      font-weight: 500;
    }
    .wr-radio-row {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .wr-radio {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: #111827;
      cursor: pointer;
    }
    .wr-radio input {
      width: 15px;
      height: 15px;
      margin: 0;
      accent-color: #67bd8c;
    }
    .wr-select-field,
    .wr-date-field,
    .wr-text-field {
      height: 34px;
      border: 1px solid #d9dde3;
      border-radius: 18px;
      background: #fff;
      color: #a0a6af;
      font-size: 14px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      box-shadow: inset 0 1px 1px rgba(15,23,42,.02);
    }
    .wr-date-field,
    .wr-text-field {
      color: #1f2937;
    }
    .wr-select-arrow,
    .wr-date-icon {
      color: #bcc2ca;
      font-size: 15px;
      flex-shrink: 0;
    }
    .wr-section {
      background: #fff;
      border: 1px solid #eceff2;
      border-radius: 8px;
      box-shadow: 0 1px 5px rgba(15,23,42,.04);
      margin-bottom: 18px;
      padding: 20px 16px 14px;
    }
    .wr-section.soft {
      background: #f6f7f9;
      border-color: transparent;
      box-shadow: none;
      padding: 20px;
    }
    .wr-section-title {
      font-size: 15px;
      font-weight: 700;
      color: #111827;
      margin-bottom: 18px;
    }
    .wr-service-pick {
      height: 36px;
      padding: 0 22px;
      border: none;
      border-radius: 19px;
      background: #67bd8c;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .wr-upload-box {
      width: 110px;
      height: 110px;
      border: 1px dashed #cfd5dc;
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #111827;
      font-size: 14px;
      cursor: pointer;
      background: #fff;
    }
    .wr-upload-plus {
      font-size: 24px;
      line-height: 1;
      font-weight: 300;
    }
    .wr-upload-hint {
      margin-top: 12px;
      color: #5f6b77;
      font-size: 12px;
    }
    .wr-check-section {
      background: #f6f7f9;
      border-radius: 7px;
      padding: 16px;
      margin-bottom: 18px;
    }
    .wr-check-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .wr-add-project {
      height: 32px;
      padding: 0 18px;
      border: none;
      border-radius: 17px;
      background: #67bd8c;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .wr-check-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .wr-check-card {
      background: #fff;
      border-radius: 7px;
      padding: 12px 16px 14px;
    }
    .wr-check-card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .wr-check-name {
      font-size: 14px;
      font-weight: 700;
      color: #111827;
    }
    .wr-check-actions {
      display: flex;
      gap: 10px;
      font-size: 12px;
      color: #4f7be8;
    }
    .wr-check-actions span { cursor: pointer; }
    .wr-tag-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px 16px;
    }
    .wr-tag {
      min-width: 48px;
      height: 20px;
      padding: 0 10px;
      border-radius: 3px;
      background: #f4f7fd;
      color: #1f2937;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-sizing: border-box;
    }
    .wr-tag.active {
      background: #e8f5ee;
      color: #3b9968;
      box-shadow: inset 0 0 0 1px rgba(103,189,140,.28);
    }
    .wr-tag-add {
      width: 48px;
      height: 22px;
      border: 1px solid #67bd8c;
      border-radius: 4px;
      background: #fff;
      color: #42aa73;
      font-size: 20px;
      line-height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .wr-advice-section {
      padding: 20px 16px;
    }
    .wr-health-row {
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .wr-advice-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .wr-advice-title strong {
      font-size: 15px;
      color: #111827;
    }
    .wr-advice-title span {
      color: #a1a8b1;
      font-size: 12px;
    }
    .wr-advice-line {
      display: grid;
      grid-template-columns: 16px minmax(240px, 680px);
      align-items: center;
      gap: 10px;
    }
    .wr-advice-dot {
      width: 15px;
      height: 15px;
      border: 1px solid #67bd8c;
      border-radius: 50%;
      position: relative;
      box-sizing: border-box;
    }
    .wr-advice-dot::after {
      content: '';
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #67bd8c;
      left: 3px;
      top: 3px;
    }

    /* 摄像头操作按钮 */
    .btn-disable { background: #fff; color: var(--orange); border: 1px solid var(--orange); }
    .btn-disable:hover { background: #fff8ee; }
    .btn-enable { background: var(--brand); color: #fff; }
    .btn-enable:hover { background: var(--brand-dark); }
    .btn-edit { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
    .btn-edit:hover { background: #e8f0fb; }
    .btn-delete { background: #fff; color: var(--red); border: 1px solid var(--red); }
    .btn-delete:hover { background: #fff0f0; }
    .btn-download { background: var(--brand); color: #fff; }
    .btn-download:hover { background: var(--brand-dark); }
    .btn-confirm { background: var(--brand); color: #fff; }
    .btn-confirm:hover { background: var(--brand-dark); }
    .btn-cancel-order { background: #fff; color: var(--text-muted); border: 1px solid var(--border); }
    .btn-cancel-order:hover { color: var(--red); border-color: var(--red); }
    .btn-start { background: var(--brand); color: #fff; }
    .btn-start:hover { background: var(--brand-dark); }
    .btn-complete { background: var(--blue); color: #fff; }
    .btn-complete:hover { background: #2d73b0; }
    .btn-report { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
    .btn-report:hover { background: #e8f0fb; }
    .btn-more { background: #fff; color: var(--text-secondary); border: 1px solid var(--border); }
    .btn-more:hover { background: var(--sidebar-bg); }
    .btn-view { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
    .btn-view:hover { background: #e8f0fb; }
    .status-confirm { background: #fff7e6; color: #d48806; }
    .status-serving { background: #e6f7ff; color: #096dd9; }
    .status-active { background: #e6f7ff; color: #096dd9; }
    .status-done { background: #f0fdf4; color: #38a169; }
    .status-published { background: #f0fdf4; color: #38a169; }
    .camera-preview-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 28px;
      padding: 0 12px;
      border: 1px solid #409eff;
      border-radius: var(--radius-sm);
      background: #fff;
      color: #2f7edb;
      font-size: 12px;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
    }
    .camera-preview-btn:hover {
      background: #eef6ff;
      border-color: #2f7edb;
    }
    .camera-preview-btn .preview-icon {
      font-size: 10px;
      line-height: 1;
    }

    /* ===== 摄像头单元格 ===== */
    .cell-camera {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
    }
    .cell-camera.active {
      background: var(--brand-light);
      color: var(--brand-dark);
      font-weight: 500;
    }
    .cell-camera.active:hover {
      background: #d9f0e4;
    }
    .cell-camera.none {
      color: var(--text-muted);
      border: 1px dashed var(--border);
    }
    .cell-camera.none:hover {
      border-color: var(--brand);
      color: var(--brand);
    }
    .cell-camera.disabled {
      color: var(--text-muted);
      cursor: default;
    }
    .camera-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--green);
      display: inline-block;
      animation: cam-blink 1.5s infinite;
    }
    @keyframes cam-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: .3; }
    }
    .camera-switch-tag {
      font-size: 10px;
      padding: 1px 5px;
      background: #fff3e0;
      color: #e67e22;
      border-radius: 3px;
      font-weight: 500;
    }

    /* ===== 摄像头弹窗（洗护单内） ===== */
    .cam-modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,.45);
      z-index: 1001;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cam-modal-box {
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: 0 12px 40px rgba(0,0,0,.2);
      width: 620px;
      max-height: 80vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .cam-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border-light);
      flex-shrink: 0;
    }
    .cam-modal-header h3 {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .cam-modal-close {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      font-size: 16px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all .15s;
    }
    .cam-modal-close:hover { background: var(--border-light); color: var(--text-primary); }
    .cam-modal-body {
      padding: 0;
      overflow-y: auto;
      flex: 1;
    }

    /* 弹窗内 Tab */
    .cam-tabs {
      display: flex;
      border-bottom: 1px solid var(--border-light);
      background: #fafbfc;
    }
    .cam-tab {
      padding: 10px 20px;
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all .15s;
      font-weight: 500;
    }
    .cam-tab:hover { color: var(--text-primary); }
    .cam-tab.active {
      color: var(--brand);
      border-bottom-color: var(--brand);
    }

    /* 实时视频区 */
    .cam-live-section {
      padding: 20px;
    }
    .cam-video-area {
      width: 100%;
      height: 300px;
      background: #0d1117;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .cam-video-placeholder {
      color: #4a5568;
      text-align: center;
    }
    .cam-video-placeholder .cam-icon { font-size: 48px; margin-bottom: 8px; }
    .cam-video-placeholder .cam-text { font-size: 13px; }
    .cam-live-badge {
      position: absolute;
      top: 12px; left: 12px;
      background: rgba(232,88,88,.9);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .cam-live-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #fff;
      animation: cam-blink 1s infinite;
    }
    .cam-info-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .cam-info-row .cam-name { font-weight: 500; color: var(--text-primary); font-size: 13px; }

    /* 选择摄像头列表 */
    .cam-select-section {
      padding: 20px;
    }
    .cam-select-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .cam-select-item {
      display: flex;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all .15s;
    }
    .cam-select-item:hover { border-color: var(--brand); background: var(--brand-light); }
    .cam-select-item.selected { border-color: var(--brand); background: var(--brand-light); }
    .cam-select-icon {
      width: 36px; height: 36px;
      border-radius: var(--radius-sm);
      background: var(--border-light);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      margin-right: 12px;
      flex-shrink: 0;
    }
    .cam-select-item.selected .cam-select-icon { background: var(--brand); }
    .cam-select-info { flex: 1; }
    .cam-select-info .cam-name-text { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .cam-select-info .cam-code-text { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: monospace; }
    .cam-select-status {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 3px;
      font-weight: 500;
    }
    .cam-select-status.online { background: #e8f5ef; color: #3a9a6a; }
    .cam-select-status.offline { background: #f2f4f3; color: var(--text-muted); }

    /* 回看列表 */
    .cam-playback-section {
      padding: 20px;
    }
    .cam-playback-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-muted);
      font-size: 13px;
    }
    .cam-playback-empty .cam-playback-icon { font-size: 36px; margin-bottom: 8px; }
    .cam-playback-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .cam-playback-item {
      display: flex;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all .15s;
    }
    .cam-playback-item:hover { border-color: var(--blue); background: #f0f6ff; }
    .cam-playback-thumb {
      width: 64px; height: 40px;
      background: #0d1117;
      border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      margin-right: 12px;
      flex-shrink: 0;
      position: relative;
    }
    .cam-playback-thumb .play-icon {
      font-size: 14px;
      color: #fff;
      opacity: .8;
    }
    .cam-playback-info { flex: 1; }
    .cam-playback-info .pb-cam-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .cam-playback-info .pb-time-range { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
    .cam-playback-info .pb-duration { font-size: 11px; color: var(--blue); margin-top: 2px; }
    .cam-playback-action {
      font-size: 12px;
      color: var(--blue);
      padding: 4px 10px;
      border: 1px solid var(--blue);
      border-radius: var(--radius-sm);
      white-space: nowrap;
    }
    .cam-playback-action:hover { background: var(--blue); color: #fff; }

    /* 弹窗底栏 */
    .cam-modal-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 20px;
      border-top: 1px solid var(--border-light);
      flex-shrink: 0;
    }

    /* ===== 收银台全屏模式 ===== */
    #app.cashier-mode #sidebar { display: none !important; }
    #app.cashier-mode #header  { display: none !important; }
    #app.cashier-mode #main    { width: 100%; height: 100vh; overflow: hidden; }
    #app.cashier-mode #content { padding: 0; overflow: hidden; height: 100vh; }
    #app.cashier-mode .page.active { display: flex; flex-direction: column; height: 100%; }

    /* 收银台专属顶部栏 */
    .cashier-topbar {
      height: 60px;
      background: #fff;
      border-bottom: 1px solid #eef1f4;
      display: flex;
      align-items: center;
      padding: 0 15px;
      gap: 12px;
      box-shadow: none;
      flex-shrink: 0;
    }
    .cashier-back-btn {
      display: flex; align-items: center; gap: 6px;
      height: 32px;
      padding: 0 12px;
      background: #5cc286;
      border: 1px solid #5cc286;
      border-radius: 2px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }
    .cashier-back-btn:hover { background: #4fb679; color: #fff; }
    .cashier-back-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
    .cashier-topbar-title {
      font-size: 16px; font-weight: 700; color: var(--text-primary);
      display: flex; align-items: center; gap: 6px;
    }
    .cashier-topbar-spacer { flex: 1; }
    /* 顶部栏右侧按钮(复用原有样式) */

    /* ===== 收银台主体 ===== */
    .cashier-wrap {
      display: flex;
      height: calc(100vh - 60px);
      overflow: hidden;
      background: #f6f7f9;
      padding: 12px;
      gap: 14px;
      box-sizing: border-box;
    }

    /* ---- 左侧：商品选择+已选商品表格 ---- */
    .cashier-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: transparent;
    }

    /* 搜索栏 */
    .c-search-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 22px 14px 9px;
      background: #fff;
      border-radius: 10px 10px 0 0;
      border-bottom: none;
      flex-shrink: 0;
    }
    .c-search-input {
      width: min(560px, 38vw); flex-shrink: 0;
      height: 38px;
      border: 1px solid #d8dde3;
      border-radius: 20px;
      padding: 0 16px;
      font-size: 13px;
      outline: none;
      color: var(--text-primary);
      background: #fff;
    }
    .c-search-input::placeholder { color: #bfbfbf; }
    .c-search-input:focus { border-color: var(--brand); }
    .c-btn {
      height: 36px; padding: 0 18px;
      border-radius: 19px;
      font-size: 13px;
      cursor: pointer;
      display: flex; align-items: center; gap: 4px;
      white-space: nowrap;
      border: 1px solid #d9d9d9;
      background: #fff; color: var(--text-primary);
      transition: all .15s;
    }
    .c-btn:hover { border-color: var(--brand); color: var(--brand); }
    .c-btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
    .c-btn-primary:hover { background: #3d9b73; }
    .c-btn-link { border: none; background: none; color: var(--brand); padding: 0 7px; font-size: 13px; }
    .c-btn-link:hover { color: #3d9b73; }
    .c-badge {
      background: var(--red); color: #fff;
      font-size: 10px; padding: 0 4px;
      border-radius: 8px; min-width: 16px;
      text-align: center; line-height: 16px;
    }
    .c-sep { width: 1px; height: 20px; background: #e8eaf2; margin: 0 2px; }

    /* 已选商品标题栏 */
    .c-cart-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 14px 14px;
      background: #fff;
      border-bottom: none;
      flex-shrink: 0;
    }
    .c-cart-title {
      display: flex; align-items: center; gap: 6px;
      font-size: 18px; font-weight: 700; color: var(--text-primary);
    }
    .c-cart-title svg { width: 26px; height: 26px; color: #5f6670; }
    .c-cart-actions {
      display: flex; align-items: center; gap: 9px; font-size: 13px;
    }
    .c-salesman {
      display: flex; align-items: center; gap: 4px;
      color: var(--text-secondary); font-size: 13px;
    }
    .c-salesman select {
      border: 1px solid #d9d9d9; border-radius: 4px;
      padding: 2px 6px; font-size: 13px; outline: none;
      color: var(--text-primary); background: #fff;
    }

    /* 已选商品表格 */
    .c-cart-table-wrap {
      flex: 1; overflow-y: auto; background: #fff;
      border-radius: 0 0 10px 10px;
    }
    .c-cart-table {
      width: 100%; border-collapse: collapse;
      font-size: 13px;
    }
    .c-cart-table thead {
      position: sticky; top: 0; z-index: 2;
      background: #f1f4f8;
    }
    .c-cart-table th {
      padding: 14px 8px; text-align: center;
      font-weight: 700; color: #20242a;
      border-bottom: 1px solid #e8eaf2;
      white-space: nowrap; font-size: 13px;
    }
    .c-cart-table th:nth-child(2) { text-align: left; }
    .c-cart-table td {
      padding: 13px 8px; text-align: center;
      border-bottom: 1px solid #f0f2f5;
      color: var(--text-primary);
      vertical-align: middle;
    }
    .c-cart-table td:nth-child(2) { text-align: left; }
    .c-cart-table tr:hover td { background: #f9fafb; }
    .c-cart-table .c-img {
      width: 48px; height: 48px; border-radius: 4px;
      background: #f5f6fa; display: flex;
      align-items: center; justify-content: center;
      font-size: 23px; margin: 0 auto;
    }
    .c-cart-table .c-name {
      max-width: 260px; line-height: 1.45;
    }
    .c-cart-table .c-name-main {
      font-size: 13px; font-weight: 500; color: var(--text-primary);
    }
    .c-cart-table .c-name-sub {
      font-size: 12px; color: var(--text-muted); margin-top: 2px;
    }
    .c-cart-table .c-discount-rate {
      color: #e85858;
    }
    .c-cart-table .c-price { font-weight: 600; }
    .c-cart-benefit-row td {
      background: #f7f8fa !important;
      padding: 14px 0 14px 76px !important;
      border-bottom: 1px solid #edf0f4;
    }
    .c-cart-benefit-wrap {
      display: grid;
      grid-template-columns: minmax(280px, 450px) 112px 1fr;
      align-items: center;
      gap: 16px;
    }
    .c-cart-benefit-card {
      height: 34px;
      border: 1px solid #6cc38f;
      border-radius: 5px;
      background: #fff;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 12px;
      color: #20242a;
      box-shadow: 0 1px 4px rgba(61,155,115,.12);
      min-width: 0;
    }
    .c-cart-benefit-info-icon {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #5f6670;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      flex-shrink: 0;
    }
    .c-cart-benefit-tag {
      padding: 2px 7px;
      border-radius: 3px;
      background: #a9a9a9;
      color: #f7d070;
      font-weight: 600;
      flex-shrink: 0;
      font-size: 12px;
    }
    .c-cart-benefit-card-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 12px;
    }
    .c-cart-benefit-qty {
      width: 112px;
      justify-self: start;
    }
    .c-cart-benefit-qty .c-qty-btn {
      width: 26px;
    }
    .c-cart-benefit-qty .c-qty-input {
      width: 60px;
      box-sizing: border-box;
    }
    .c-cart-benefit-deduct {
      font-size: 12px;
      color: #20242a;
      text-align: right;
      padding-right: 26px;
    }
    .c-cart-benefit-deduct b {
      font-size: 16px;
      font-weight: 700;
    }
    .c-qty-ctrl {
      display: inline-flex; align-items: center;
      border: 1px solid #d9d9d9; border-radius: 4px;
      overflow: hidden;
    }
    .c-qty-btn {
      width: 28px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 16px; color: var(--text-secondary);
      background: #fafafa; border: none;
      transition: background .15s;
    }
    .c-qty-btn:hover { background: #eee; }
    .c-qty-btn:active { background: #ddd; }
    .c-qty-input {
      width: 52px; height: 30px;
      text-align: center; border: none;
      border-left: 1px solid #d9d9d9;
      border-right: 1px solid #d9d9d9;
      font-size: 14px; font-weight: 500;
      color: var(--text-primary);
      outline: none; background: #fff;
    }
    .c-action-btns {
      display: flex; gap: 5px; justify-content: center; flex-wrap: wrap;
    }
    .c-act-btn {
      width: 28px; height: 28px; padding: 0; border-radius: 50%;
      font-size: 12px; cursor: pointer;
      border: 1px solid #d9d9d9; background: #fff;
      color: var(--text-secondary); transition: all .15s;
      display: flex; align-items: center; justify-content: center;
    }
    .c-act-btn:hover { border-color: var(--brand); color: var(--brand); }
    .c-act-btn.c-act-del { color: #e85858; border-color: #ffa39e; }
    .c-act-btn.c-act-del:hover { background: #fff1f0; }
    .c-cart-empty-table {
      text-align: center; padding: 60px 0;
      color: var(--text-muted); font-size: 13px;
    }
    .c-cart-empty-table svg { width: 48px; height: 48px; opacity: .3; margin-bottom: 8px; }

    /* 底部结算栏 */
    .c-settle-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px;
      background: #fff;
      border-top: none;
      border-radius: 10px;
      margin-top: 14px;
      flex-shrink: 0;
      min-height: 60px;
    }
    .c-settle-left {
      display: flex; align-items: center; gap: 12px;
    }
    .c-settle-activity {
      height: 36px; min-width: 114px; padding: 0 16px;
      border: 1px solid #d8dde3; border-radius: 22px;
      font-size: 13px; color: #20242a; cursor: pointer;
      display: flex; align-items: center; gap: 4px;
      justify-content: center;
    }
    .c-meituan-voucher-active {
      display: none; align-items: center; gap: 8px;
      padding: 7px 12px;
      border-radius: 18px;
      background: linear-gradient(90deg, #e8f8ef 0%, #fff7e6 100%);
      border: 1px solid #6cc38f;
      color: #237a55;
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(61,155,115,.14);
    }
    .c-meituan-voucher-active .amount {
      color: #e8582f;
      font-weight: 800;
    }
    .c-meituan-voucher-active .remove {
      width: 16px; height: 16px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(35,122,85,.12);
      color: #237a55;
      cursor: pointer;
      font-size: 12px;
    }
    .c-settle-right {
      display: flex; align-items: center; gap: 18px;
    }
    .c-settle-item {
      font-size: 13px; color: #333942;
      display: flex; align-items: center; gap: 4px;
    }
    .c-settle-item .c-val { font-weight: 600; color: var(--text-primary); }
    .c-settle-item .c-val-red { font-weight: 600; color: #e85858; }
    .c-settle-total {
      font-size: 13px; color: #333942;
    }
    .c-settle-total .c-total-val {
      font-size: 32px; font-weight: 400; color: #111827;
    }
    .c-settle-total .c-total-unit { font-size: 13px; }
    .c-settle-pay-btn {
      height: 48px; min-width: 156px; padding: 0 32px;
      background: var(--brand); color: #fff;
      border: none; border-radius: 26px;
      font-size: 18px; font-weight: 700;
      cursor: pointer; transition: background .15s;
    }
    .c-settle-pay-btn:hover { background: #3d9b73; }

    /* 收银结账弹窗 */
    .c-pay-overlay {
      position: fixed; inset: 0; z-index: 10020;
      background: rgba(0,0,0,.42);
      display: flex; align-items: center; justify-content: center;
    }
    .c-pay-modal {
      width: min(1280px, calc(100vw - 64px));
      height: min(720px, calc(100vh - 64px));
      background: #fff; border-radius: 4px;
      display: grid; grid-template-columns: minmax(560px, 1fr) minmax(600px, 1fr);
      box-shadow: 0 12px 36px rgba(0,0,0,.18);
      overflow: hidden;
      color: #20242a;
    }
    .c-pay-left, .c-pay-right {
      padding: 28px 28px 24px;
      overflow-y: auto;
    }
    .c-pay-left {
      border-right: 1px solid #edf0f3;
    }
    .c-pay-right {
      display: flex; flex-direction: column;
      overflow: hidden;
      padding-bottom: 0;
    }
    .c-pay-title {
      font-size: 24px; font-weight: 700; color: #20242a;
      display: flex; align-items: baseline; gap: 4px;
      margin-bottom: 30px;
    }
    .c-pay-title small {
      font-size: 15px; color: #4b5563; font-weight: 600;
    }
    .c-pay-scan-card {
      width: 88px; height: 88px;
      border: 1px solid #d9dde3; border-radius: 8px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 7px; font-size: 14px; color: #20242a;
      margin-bottom: 34px;
      background: #fff;
    }
    .c-pay-scan-icon {
      width: 44px; height: 44px; border-radius: 9px; background: #aaa;
      color: #fff; display: flex; align-items: center; justify-content: center;
      font-size: 25px; line-height: 1;
    }
    .c-pay-subtitle {
      font-size: 24px; font-weight: 700; margin-bottom: 22px; color: #20242a;
    }
    .c-pay-method-grid {
      display: grid; grid-template-columns: repeat(4, 90px);
      gap: 18px 26px; margin-bottom: 24px;
    }
    .c-pay-method {
      min-width: 0; height: 82px; border: 1px solid #dedede; border-radius: 6px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; background: #fafafa; color: #20242a; font-size: 14px;
    }
    .c-pay-method.active {
      background: #fff; border-color: #4caf82; box-shadow: inset 0 0 0 1px #4caf82;
    }
    .c-pay-method-icon {
      width: 40px; height: 40px; border-radius: 50%; background: #aaa;
      color: #fff; display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 700;
    }
    .c-pay-method-icon.vip { background: #f1c94a; font-style: italic; font-size: 17px; }
    .c-pay-method-icon.wx { background: #69c547; font-size: 21px; }
    .c-pay-inputs {
      display: grid; grid-template-columns: 120px 120px; gap: 12px 38px;
      align-items: start;
    }
    .c-pay-mini-label { font-size: 15px; color: #20242a; margin-bottom: 8px; }
    .c-pay-mini-input {
      width: 116px; height: 38px; border: 1px solid #d8d8d8; border-radius: 19px;
      padding: 0 16px; font-size: 17px; color: #20242a; outline: none;
    }
    .c-pay-balance {
      grid-column: 1 / span 2;
      margin-top: 10px; color: #ef5a5a; font-size: 14px;
    }
    .c-pay-right-title-row {
      display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
      flex-shrink: 0;
    }
    .c-pay-right-title {
      font-size: 24px; font-weight: 700; color: #20242a;
    }
    .c-pay-print {
      height: 34px; padding: 0 18px; border: 1px solid #cfd3dc; border-radius: 18px;
      background: #fff; color: #20242a; font-size: 14px; cursor: pointer;
    }
    .c-pay-detail-scroll {
      flex: 1; overflow-y: auto; padding-right: 2px;
    }
    .c-pay-row {
      display: grid; grid-template-columns: 130px minmax(0, 1fr);
      align-items: center; min-height: 44px; column-gap: 18px;
      font-size: 15px; color: #20242a;
    }
    .c-pay-row-label { display: flex; align-items: center; gap: 8px; }
    .c-pay-row-value {
      justify-self: end; font-size: 16px; font-weight: 600; color: #20242a;
    }
    .c-pay-row-value.muted { font-weight: 500; }
    .c-pay-help {
      width: 17px; height: 17px; border-radius: 50%; background: #9ca3af;
      color: #fff; display: inline-flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700;
    }
    .c-pay-pill {
      justify-self: end; width: min(260px, 100%); height: 34px; border: 1px solid #d6d6d6;
      border-radius: 22px; display: flex; align-items: center; justify-content: flex-end;
      padding: 0 14px; font-size: 14px; font-weight: 700; color: #20242a;
      gap: 8px;
    }
    .c-pay-arrow { color: #b7bbc2; font-size: 20px; font-weight: 400; }
    .c-pay-input-line {
      justify-self: end; width: min(260px, 100%); height: 34px;
      border: 1px solid #d6d6d6; border-radius: 22px;
      padding: 0 14px; font-size: 14px; outline: none;
    }
    .c-pay-field-stack {
      justify-self: end; width: min(260px, 100%);
    }
    .c-pay-field-stack .c-pay-input-line {
      width: 100%; box-sizing: border-box;
    }
    .c-pay-deduct {
      text-align: right; font-size: 15px; font-weight: 700; margin-top: 5px;
    }
    .c-pay-deduct-coupon {
      justify-self: end;
      width: min(260px, 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 34px;
      padding: 0 14px;
      border: 1px solid #d6d6d6;
      border-radius: 18px;
      background: #fff;
      box-sizing: border-box;
      font-size: 14px;
      color: #20242a;
    }
    .c-pay-deduct-coupon .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #4b5563;
    }
    .c-pay-deduct-coupon .amount {
      flex-shrink: 0;
      color: #e85858;
      font-weight: 700;
    }
    .c-pay-discount-wrap {
      justify-self: end; width: min(260px, 100%); height: 34px; border: 1px solid #d6d6d6;
      border-radius: 22px; display: grid; grid-template-columns: 1fr 42px; overflow: hidden;
    }
    .c-pay-discount-wrap input {
      border: none; outline: none; padding: 0 14px; font-size: 14px;
    }
    .c-pay-discount-wrap span {
      border-left: 1px solid #d6d6d6; background: #f3f4f6;
      display: flex; align-items: center; justify-content: center; font-size: 14px;
    }
    .c-pay-actual {
      justify-self: end; width: min(430px, 100%); height: 38px; border: 1px solid #b8d2c5;
      border-radius: 24px; display: grid; grid-template-columns: 100px 1fr; overflow: hidden;
    }
    .c-pay-actual span {
      border-right: 1px solid #b8d2c5; display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }
    .c-pay-actual input {
      border: none; outline: none; text-align: right; padding: 0 18px;
      font-size: 18px; font-weight: 700;
    }
    .c-pay-check-row {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 12px; margin: 12px 0 8px;
    }
    .c-pay-check {
      display: flex; align-items: center; gap: 10px;
      font-size: 14px; color: #20242a;
    }
    .c-pay-check input {
      width: 16px; height: 16px; accent-color: #4caf82;
    }
    .c-pay-footer {
      flex-shrink: 0;
      margin: 14px -28px 0;
      padding: 14px 28px 16px;
      box-shadow: 0 -6px 18px rgba(0,0,0,.05);
      display: flex; align-items: center; justify-content: space-between;
      background: #fff;
    }
    .c-pay-footer-amount {
      display: flex; align-items: baseline; gap: 8px; color: #20242a;
      font-size: 14px; font-weight: 600;
    }
    .c-pay-footer-amount .amount {
      font-size: 36px; font-weight: 800; letter-spacing: 0;
    }
    .c-pay-footer-note { color: #ef5a5a; font-size: 13px; margin-top: 0; }
    .c-pay-submit {
      width: 158px; height: 48px; border: none; border-radius: 26px;
      background: #79c68e; color: #fff; font-size: 22px; font-weight: 700;
      cursor: pointer; box-shadow: 0 4px 10px rgba(61,155,115,.22);
    }

    /* ---- 右侧：选择客户 ---- */
    .cashier-right {
      width: 306px; min-width: 306px;
      display: flex; flex-direction: column;
      background: #fff;
      border-left: none;
      border-radius: 10px;
      overflow: hidden;
    }
    .c-member-panel-title {
      padding: 19px 18px 8px;
      font-size: 18px;
      line-height: 1;
      font-weight: 700;
      color: #20242a;
      flex-shrink: 0;
    }

    /* 会员搜索 */
    .c-member-search {
      padding: 9px 18px 12px;
      border-bottom: none;
      flex-shrink: 0;
      position: relative;
    }
    .c-member-search-input {
      width: 100%; height: 36px;
      border: 1px solid #d8dde3; border-radius: 21px;
      padding: 0 12px 0 34px; font-size: 13px;
      outline: none; color: var(--text-primary);
      background: #fff; box-sizing: border-box;
    }
    .c-member-search-input::placeholder { color: #bfbfbf; }
    .c-member-search-input:focus { border-color: var(--brand); }
    .c-search-icon {
      position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
      width: 15px; height: 15px; color: #9aa1ac; pointer-events: none;
      z-index: 1;
    }

    /* 会员搜索下拉 */
    .c-member-dropdown {
      position: absolute; top: 100%; left: 12px; right: 12px;
      background: #fff; border: 1px solid #e8eaf2; border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 100;
      max-height: 200px; overflow-y: auto;
    }
    .c-member-dropdown-item {
      padding: 10px 12px; cursor: pointer;
      display: flex; align-items: center; gap: 10px;
      transition: background .1s;
    }
    .c-member-dropdown-item:hover { background: #f5f7fa; }
    .c-member-dropdown-item .c-dd-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .c-member-dropdown-item .c-dd-phone { font-size: 12px; color: var(--text-muted); margin-left: auto; }

    /* 会员信息行 */
    .c-member-info-row {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 78px;
      margin: 0 18px 11px;
      padding: 12px 14px; border-bottom: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #f2f6fa 0%, #dfe9f2 100%);
      flex-shrink: 0;
      box-sizing: border-box;
    }
    .c-member-info-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    .c-member-info-name { font-size: 17px; font-weight: 700; color: var(--text-primary); }
    .c-member-info-phone { font-size: 12px; color: #4b5563; }
    .c-member-edit-icon {
      font-size: 13px; cursor: pointer; color: #bfbfbf;
      margin-left: 4px; transition: color .15s;
    }
    .c-member-edit-icon:hover { color: var(--brand); }
    .c-member-info-right { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; }
    .c-member-record-btn {
      padding: 5px 10px; border: none;
      border-radius: 14px; font-size: 12px;
      cursor: pointer; color: #fff;
      background: rgba(79,87,96,.48); transition: all .15s;
    }
    .c-member-record-btn:hover { border-color: var(--brand); color: var(--brand); }
    .c-member-close {
      width: 22px; height: 22px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; color: var(--text-muted); cursor: pointer;
      transition: all .15s;
    }
    .c-member-close:hover { background: #f0f0f0; color: var(--text-primary); }

    /* 宠物选择 */
    .c-pet-select-row {
      padding: 0 18px 13px; border-bottom: none;
      flex-shrink: 0; position: relative;
    }
    .c-pet-select-wrap {
      display: flex; align-items: center; justify-content: space-between;
      height: 36px; padding: 0 14px;
      border: 1px solid #d8dde3; border-radius: 21px;
      cursor: pointer; background: #fff;
      transition: border-color .15s;
    }
    .c-pet-select-wrap:hover { border-color: var(--brand); }
    .c-pet-select-label { font-size: 13px; color: var(--text-primary); }
    .c-member-section-title {
      padding: 0 18px 10px;
      font-size: 18px;
      line-height: 1;
      font-weight: 700;
      color: #20242a;
      flex-shrink: 0;
    }
    .c-pet-arrow {
      width: 12px; height: 12px; color: #bfbfbf; flex-shrink: 0;
      transition: transform .2s;
    }
    .c-pet-arrow.open { transform: rotate(180deg); }
    .c-pet-dropdown {
      position: absolute; left: 12px; right: 12px; top: 100%;
      background: #fff; border: 1px solid #e8eaf2; border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 100;
      max-height: 180px; overflow-y: auto;
    }
    .c-pet-dropdown-item {
      padding: 8px 12px; cursor: pointer;
      display: flex; align-items: center; gap: 8px;
      transition: background .1s; font-size: 13px;
    }
    .c-pet-dropdown-item:hover { background: #f5f7fa; }
    .c-pet-dropdown-item.selected { color: var(--brand); font-weight: 500; }
    .c-pet-dropdown-item .c-pet-name { color: var(--text-primary); }
    .c-pet-dropdown-item .c-pet-breed {
      font-size: 12px; color: var(--text-muted); margin-left: auto;
    }
    .c-pet-dropdown-item .c-pet-gender-icon {
      font-size: 12px; width: 16px; text-align: center;
    }

    /* 会员权益切换 */
    .c-member-rights {
      display: flex; align-items: center; gap: 10px;
      padding: 0 18px 16px; border-bottom: none;
      flex-shrink: 0; font-size: 13px;
    }
    .c-member-rights-title { font-size: 12px; color: var(--text-muted); margin-right: 4px; }
    .c-rights-toggle {
      height: 28px; flex: 1;
      display: flex; align-items: center; justify-content: center; gap: 6px;
      font-size: 12px; cursor: pointer;
      border: 1px solid #8fd7b3;
      border-radius: 18px;
      color: var(--brand);
    }
    .c-rights-radio {
      width: 14px; height: 14px; border-radius: 50%;
      border: 1px solid #d9d9d9; display: flex;
      align-items: center; justify-content: center;
    }
    .c-rights-radio.active { border-color: var(--brand); }
    .c-rights-radio.active::after {
      content: ''; width: 8px; height: 8px;
      border-radius: 50%; background: var(--brand);
    }
    .c-rights-label { color: var(--text-primary); }
    .c-rights-label.active { color: var(--brand); font-weight: 600; }

    /* 主Tab（会员卡券/会员概况/预约单） */
    .c-member-main-tabs {
      display: flex; border-bottom: none;
      background: #f2f4f6;
      margin: 0 8px;
      border-radius: 8px 8px 0 0;
      flex-shrink: 0;
    }
    .c-member-main-tab {
      flex: 1; text-align: center; padding: 10px 0;
      font-size: 13px; color: var(--text-secondary);
      cursor: pointer; position: relative; transition: color .15s;
    }
    .c-member-main-tab:hover { color: var(--text-primary); }
    .c-member-main-tab.active { color: var(--brand); font-weight: 600; }
    .c-member-main-tab.active::after {
      content: ''; position: absolute; bottom: -1px; left: 16px; right: 16px;
      height: 2px; background: var(--brand); border-radius: 1px;
    }

    /* 子Tab（会员卡/权益卡/优惠券） */
    .c-member-sub-tabs {
      display: flex; gap: 7px; padding: 11px 18px;
      flex-shrink: 0; border-bottom: none;
    }
    .c-member-sub-tab {
      padding: 5px 14px; font-size: 12px;
      color: var(--text-secondary); cursor: pointer;
      border-radius: 14px; transition: all .15s;
      background: #f5f7fa;
    }
    .c-member-sub-tab:hover { color: var(--brand); }
    .c-member-sub-tab.active {
      background: #e8f5ef; color: var(--brand); font-weight: 500;
    }

    /* 绿色VIP卡 */
    .c-vip-card {
      background: linear-gradient(135deg, #ffe6a5 0%, #ffc45c 58%, #f4a832 100%);
      border-radius: 8px; padding: 12px 13px;
      margin: 0 18px 12px; color: #a24e00;
    }
    .c-vip-card-top {
      display: flex; align-items: center; justify-content: space-between;
    }
    .c-vip-card-level { font-size: 15px; font-weight: 700; }
    .c-vip-card-recharge {
      padding: 4px 12px; background: rgba(177,111,20,.22);
      color: #fff; border: none;
      border-radius: 14px; font-size: 12px; cursor: pointer;
      transition: background .15s;
    }
    .c-vip-card-recharge:hover { background: rgba(255,255,255,.3); }
    .c-vip-card-amount {
      font-size: 24px; font-weight: 700; margin-top: 9px;
    }
    .c-vip-card-amount .c-vip-card-unit { font-size: 14px; font-weight: 400; }

    /* 会员卡权益说明 */
    .c-card-benefits {
      margin: 0 18px 8px; padding: 12px 13px;
      background: #f9fffe; border: 1px solid #e8f5ef;
      border-radius: 6px;
    }
    .c-card-benefits-title {
      font-size: 13px; color: #20242a; margin-bottom: 7px; font-weight: 700;
    }
    .c-card-benefits-row {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--text-secondary);
    }
    .c-record-overlay {
      position: fixed;
      inset: 0;
      z-index: 10070;
      background: rgba(15, 23, 42, .28);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 42px;
      box-sizing: border-box;
    }
    .c-record-modal {
      width: min(1080px, calc(100vw - 120px));
      max-height: min(600px, calc(100vh - 92px));
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
      color: #333942;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .c-record-head {
      height: 52px;
      display: flex;
      align-items: center;
      padding: 0 18px;
      flex-shrink: 0;
    }
    .c-record-title {
      font-size: 18px;
      font-weight: 700;
      color: #20242a;
    }
    .c-record-close {
      margin-left: auto;
      width: 30px;
      height: 30px;
      border: none;
      background: transparent;
      color: #858b94;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
    }
    .c-record-filter {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 18px 18px;
      flex-shrink: 0;
    }
    .c-record-search,
    .c-record-select {
      height: 36px;
      border: 1px solid #d8dde3;
      border-radius: 18px;
      background: #fff;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      color: #8f96a3;
      font-size: 13px;
    }
    .c-record-search {
      width: 230px;
      gap: 7px;
      padding: 0 13px;
    }
    .c-record-search svg {
      width: 15px;
      height: 15px;
      color: #a8aeb8;
      flex-shrink: 0;
    }
    .c-record-select {
      width: 150px;
      justify-content: space-between;
      padding: 0 13px;
    }
    .c-record-btn {
      height: 36px;
      min-width: 78px;
      padding: 0 20px;
      border-radius: 18px;
      border: 1px solid #d8dde3;
      background: #fff;
      color: #333942;
      font-size: 13px;
      cursor: pointer;
    }
    .c-record-btn.primary {
      border-color: #59bd86;
      background: #59bd86;
      color: #fff;
      box-shadow: 0 3px 9px rgba(89, 189, 134, .22);
    }
    .c-record-segment {
      margin-left: auto;
      height: 38px;
      padding: 3px;
      border-radius: 20px;
      background: #eef0f2;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .c-record-segment button {
      height: 32px;
      min-width: 82px;
      border-radius: 17px;
      border: none;
      background: transparent;
      color: #333942;
      font-size: 14px;
      cursor: pointer;
    }
    .c-record-segment button.active {
      background: #59bd86;
      color: #fff;
      font-weight: 600;
    }
    .c-record-body {
      padding: 0 18px;
      overflow: auto;
      flex: 1;
    }
    .c-record-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 13px;
    }
    .c-record-table th {
      height: 46px;
      background: #f3f6fa;
      border: 1px solid #eef1f4;
      color: #333942;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
    }
    .c-record-table td {
      min-height: 54px;
      padding: 14px 12px;
      border-bottom: 1px solid #edf0f3;
      color: #4a4f58;
      text-align: center;
      vertical-align: middle;
      line-height: 1.55;
    }
    .c-record-table .left { text-align: left; }
    .c-record-expand {
      width: 18px;
      height: 18px;
      border: 1px solid #dfe3e8;
      border-radius: 3px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #333942;
    }
    .c-record-goods {
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }
    .c-record-thumb {
      width: 46px;
      height: 46px;
      border-radius: 5px;
      background: #f5f6fa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 23px;
    }
    .c-record-goods-name {
      color: #4096ff;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.55;
    }
    .c-record-goods-sub {
      margin-top: 4px;
      color: #8f96a3;
      font-size: 12px;
    }
    .c-record-cart-btn {
      height: 30px;
      padding: 0 12px;
      border: 1px solid #59bd86;
      border-radius: 16px;
      background: #fff;
      color: #2d9b6a;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }
    .c-record-cart-btn:hover {
      background: #eefaf4;
    }
    .c-record-foot {
      min-height: 88px;
      padding: 16px 18px 18px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      flex-shrink: 0;
    }
    .c-record-pagination {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #333942;
      font-size: 13px;
      justify-self: end;
    }
    .c-record-page-circle {
      width: 34px;
      height: 34px;
      border: 1px solid #dfe3e8;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #a0a6b0;
    }
    .c-record-page-circle.active {
      background: #59bd86;
      color: #fff;
      border-color: #59bd86;
      font-weight: 700;
    }
    .c-record-page-size,
    .c-record-page-input,
    .c-record-go {
      height: 34px;
      border: 1px solid #dfe3e8;
      border-radius: 17px;
      background: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 13px;
      box-sizing: border-box;
    }
    .c-record-page-input { width: 70px; }
    .c-record-go {
      width: 34px;
      padding: 0;
      color: #59bd86;
      font-weight: 700;
    }
    .c-record-ok {
      height: 36px;
      min-width: 92px;
      border: none;
      border-radius: 19px;
      background: #59bd86;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      justify-self: center;
    }
    .c-member-recharge-overlay {
      position: fixed;
      inset: 0;
      z-index: 10085;
      background: rgba(15, 23, 42, .34);
      color: #20242a;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      overflow-y: auto;
    }
    .c-member-recharge-dialog {
      width: min(640px, calc(100vw - 56px));
      max-height: calc(100vh - 56px);
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
      overflow-y: auto;
      position: relative;
    }
    .c-member-recharge-close {
      position: absolute;
      top: 12px;
      right: 14px;
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      color: #8c8c8c;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      z-index: 2;
    }
    .c-member-recharge-title {
      position: sticky;
      top: 0;
      background: #fff;
      padding: 15px 20px 13px;
      font-size: 16px;
      font-weight: 700;
      z-index: 1;
      border-bottom: 1px solid #f0f2f5;
    }
    .c-member-recharge-content {
      width: auto;
      max-width: none;
      margin-left: 0;
      padding: 20px 24px 24px;
    }
    .c-member-recharge-section {
      margin-bottom: 22px;
    }
    .c-member-recharge-section-title {
      font-size: 16px;
      font-weight: 700;
      color: #20242a;
      margin-bottom: 14px;
    }
    .c-member-recharge-card-row {
      display: grid;
      grid-template-columns: 1fr 92px 110px;
      align-items: center;
      gap: 14px;
    }
    .c-member-recharge-card-wrap {
      border: 1px solid #e2e6ea;
      border-radius: 7px;
      padding: 5px;
      background: #fff;
    }
    .c-member-recharge-card-face {
      height: 58px;
      border-radius: 6px;
      background: linear-gradient(135deg, #f7dfa2 0%, #f4c15f 58%, #f3ad36 100%);
      color: #9a4a05;
      display: flex;
      align-items: center;
      padding-left: 18px;
      font-size: 16px;
      font-weight: 700;
      overflow: hidden;
      position: relative;
    }
    .c-member-recharge-card-face::after {
      content: '';
      position: absolute;
      top: -28px;
      right: 38px;
      width: 110px;
      height: 150px;
      transform: rotate(35deg);
      background: rgba(255,255,255,.15);
      box-shadow: 54px 0 0 rgba(255,255,255,.09);
    }
    .c-member-recharge-stat {
      color: #4b5563;
      font-size: 13px;
      line-height: 1.8;
    }
    .c-member-recharge-stat strong {
      display: block;
      color: #ff4d5d;
      font-size: 18px;
      line-height: 1.4;
    }
    .c-member-recharge-stat .green {
      color: var(--brand);
      font-size: 14px;
      font-weight: 700;
    }
    .c-member-recharge-switch-line {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      color: #20242a;
      font-size: 14px;
    }
    .c-member-recharge-switch {
      width: 45px;
      height: 24px;
      border-radius: 14px;
      background: #c2c5c8;
      position: relative;
    }
    .c-member-recharge-switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,.18);
    }
    .c-member-recharge-gift-card {
      width: 100%;
      min-height: 82px;
      border: 1px solid #e2e6ea;
      border-radius: 5px;
      padding: 16px 18px 12px;
      color: #333942;
      font-size: 14px;
    }
    .c-member-recharge-gift-card .money-dot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #79d19b;
      color: #fff;
      font-size: 12px;
      margin-right: 8px;
    }
    .c-member-recharge-gift-card strong {
      color: #ff4d5d;
      font-size: 18px;
    }
    .c-member-recharge-view {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      padding: 0 14px;
      border: 1px solid #d8dde6;
      border-radius: 15px;
      background: #fff;
      color: #4b5563;
      font-size: 13px;
      margin-top: 16px;
    }
    .c-member-recharge-benefit-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .c-member-recharge-benefit {
      min-height: 64px;
      border: 1px solid #e2e6ea;
      border-radius: 5px;
      padding: 14px 18px;
      color: #333942;
      font-size: 14px;
    }
    .c-member-recharge-benefit .icon {
      color: #ffb650;
      margin-right: 10px;
    }
    .c-member-recharge-benefit .c-member-recharge-view {
      margin-left: 44px;
      margin-top: 10px;
    }
    .c-member-recharge-form {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 16px 18px;
      align-items: start;
    }
    .c-member-recharge-label {
      min-height: 32px;
      display: flex;
      align-items: center;
      color: #333942;
      font-size: 14px;
    }
    .c-member-recharge-label.required::before {
      content: '*';
      color: #ff4d4f;
      margin-right: 7px;
    }
    .c-member-recharge-input,
    .c-member-recharge-select {
      height: 32px;
      border: 1px solid #d8dce2;
      border-radius: 16px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #20242a;
      font-size: 14px;
      padding: 0 14px;
      min-width: 0;
    }
    .c-member-recharge-input .unit {
      width: 38px;
      height: 30px;
      margin-right: -14px;
      border-left: 1px solid #d8dce2;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #20242a;
    }
    .c-member-recharge-pay-row {
      display: grid;
      grid-template-columns: 124px minmax(0, 1fr);
      gap: 10px;
    }
    .c-member-recharge-add-pay {
      height: 32px;
      border: 1px solid #d8dce2;
      border-radius: 16px;
      background: #fff;
      color: #333942;
      font-size: 14px;
      width: 100%;
    }
    .c-member-recharge-textarea {
      width: 100%;
      height: 98px;
      border: 1px solid #d8dce2;
      border-radius: 7px;
      resize: none;
      padding: 10px 12px;
      font-size: 14px;
    }
    .c-member-recharge-checks {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      min-height: 32px;
      font-size: 14px;
      color: #333942;
    }
    .c-member-recharge-print-stack {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .c-member-recharge-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 28px;
    }
    .c-member-recharge-check span:first-child {
      width: 16px;
      height: 16px;
      border: 1px solid #d8dce2;
      border-radius: 2px;
      background: #fff;
    }
    .c-member-recharge-preview {
      height: 24px;
      padding: 0 12px;
      border: 1px solid #c9cdd4;
      border-radius: 12px;
      background: #fff;
      color: #20242a;
      font-size: 12px;
      cursor: pointer;
      margin-left: 24px;
    }
    .c-member-recharge-preview:hover {
      border-color: var(--brand);
      color: var(--brand);
    }
    .c-rights-toggle:not(.active) {
      border-color: #5f6670;
      color: #333942;
    }
    .c-member-recharge-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 22px;
    }
    .c-member-recharge-confirm {
      height: 34px;
      padding: 0 28px;
      border: none;
      border-radius: 18px;
      background: #6fc995;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
    .c-member-recharge-cancel {
      height: 34px;
      padding: 0 24px;
      border: 1px solid #d8dce2;
      border-radius: 18px;
      background: #fff;
      color: #4b5563;
      font-size: 14px;
      cursor: pointer;
    }
      flex-shrink: 0;
    }
    .c-member-tab {
      flex: 1; text-align: center; padding: 10px 0;
      font-size: 13px; color: var(--text-secondary);
      cursor: pointer; position: relative;
      transition: color .15s;
    }
    .c-member-tab:hover { color: var(--brand); }
    .c-member-tab.active {
      color: var(--brand); font-weight: 600;
    }
    .c-member-tab.active::after {
      content: ''; position: absolute;
      bottom: 0; left: 50%; transform: translateX(-50%);
      width: 40px; height: 2px;
      background: var(--brand); border-radius: 1px;
    }
    .c-member-tab .c-tab-badge {
      font-size: 10px; color: #999; margin-left: 2px;
    }

    /* 会员卡列表 */
    .c-card-list,
    .c-member-panel {
      flex: 1; overflow-y: auto; padding: 12px;
    }
    .c-member-panel { display: none; }
    .c-member-panel.active { display: block; }
    .c-card-item {
      background: #fff;
      border: 1px solid #e8eaf2;
      border-radius: 8px;
      padding: 14px;
      margin-bottom: 8px;
    }
    .c-card-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
    }
    .c-card-type {
      font-size: 14px; font-weight: 600; color: var(--text-primary);
    }
    .c-card-type-tag {
      font-size: 11px; padding: 1px 6px;
      border-radius: 3px; margin-left: 6px;
    }
    .c-card-type-tag.active { background: #e8f5ef; color: var(--brand); }
    .c-card-balance { font-size: 12px; color: var(--text-muted); }
    .c-card-amount {
      font-size: 20px; font-weight: 700; color: #e85858;
    }
    .c-card-amount .c-card-unit { font-size: 12px; font-weight: 400; }
    .c-card-footer {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 10px; padding-top: 10px;
      border-top: 1px dashed #e8eaf2;
    }
    .c-card-info { font-size: 11px; color: var(--text-muted); line-height: 1.6; }
    .c-card-recharge {
      padding: 4px 14px;
      background: var(--brand); color: #fff;
      border: none; border-radius: 4px;
      font-size: 13px; cursor: pointer;
      font-weight: 500; transition: background .15s;
    }
    .c-card-recharge:hover { background: #3d9b73; }

    .c-benefit-buy-btn {
      width: 100%;
      height: 32px;
      border: none;
      border-radius: 16px;
      background: linear-gradient(90deg, #86d5ad 0%, #51b777 100%);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 12px;
      box-shadow: 0 4px 10px rgba(81, 183, 119, .16);
    }
    .c-benefit-buy-btn:hover { background: linear-gradient(90deg, #74ca9e 0%, #46ab6d 100%); }
    .c-benefit-open-overlay {
      position: fixed;
      inset: 0;
      z-index: 10080;
      background: rgba(15, 23, 42, .34);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .c-benefit-open-modal {
      width: min(720px, calc(100vw - 56px));
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
      color: #20242a;
      position: relative;
      padding: 18px 22px 24px;
    }
    .c-benefit-open-title {
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      color: #20242a;
      line-height: 1.2;
      margin-bottom: 20px;
    }
    .c-benefit-open-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 30px;
      height: 30px;
      border: none;
      background: transparent;
      color: #8c8c8c;
      font-size: 32px;
      line-height: 26px;
      cursor: pointer;
    }
    .c-benefit-open-form {
      display: grid;
      gap: 22px;
      padding: 0 14px;
    }
    .c-benefit-open-row {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      align-items: center;
      gap: 22px;
      min-height: 40px;
    }
    .c-benefit-open-label {
      font-size: 18px;
      color: #20242a;
      line-height: 1;
    }
    .c-benefit-open-label .required {
      color: #ff4d4f;
      margin-right: 8px;
    }
    .c-benefit-open-control {
      height: 40px;
      border: 1px solid #d9d9d9;
      border-radius: 22px;
      background: #f7f7f7;
      color: #20242a;
      font-size: 16px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
    }
    .c-benefit-open-control.placeholder {
      color: #a5abb5;
    }
    .c-benefit-open-control.date {
      border-radius: 4px;
      background: #fff;
    }
    .c-benefit-open-arrow {
      color: #b8b8b8;
      font-size: 22px;
      line-height: 1;
    }
    .c-benefit-open-operator {
      font-size: 17px;
      color: #20242a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .c-benefit-open-print {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #20242a;
      font-size: 17px;
      white-space: nowrap;
    }
    .c-benefit-open-tools {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 18px;
      padding-right: 14px;
    }
    .c-benefit-open-check {
      width: 20px;
      height: 20px;
      border-radius: 3px;
      background: var(--brand);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      line-height: 1;
    }
    .c-benefit-open-preview {
      height: 32px;
      padding: 0 16px;
      border: 1px solid #c9cdd4;
      border-radius: 16px;
      background: #fff;
      color: #20242a;
      font-size: 15px;
      cursor: pointer;
    }
    .c-benefit-open-preview:hover {
      border-color: var(--brand);
      color: var(--brand);
    }
    .c-benefit-open-actions {
      display: flex;
      justify-content: center;
      gap: 54px;
      margin-top: 28px;
    }
    .c-benefit-open-btn {
      width: 170px;
      height: 42px;
      border-radius: 22px;
      font-size: 18px;
      cursor: pointer;
      letter-spacing: 4px;
    }
    .c-benefit-open-btn.cancel {
      background: #fff;
      color: #20242a;
      border: 1px solid #c9cdd4;
    }
    .c-benefit-open-btn.confirm {
      border: none;
      color: #fff;
      background: linear-gradient(90deg, #89d7ad, #51b777);
    }
    .c-benefit-card-blue {
      min-height: 104px;
      border-radius: 8px;
      padding: 18px 18px 14px;
      margin-bottom: 14px;
      background: linear-gradient(135deg, #b9eafa 0%, #83c9e6 100%);
      color: #06234d;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      row-gap: 22px;
    }
    .c-benefit-card-name { font-size: 17px; font-weight: 700; }
    .c-benefit-card-count { font-size: 16px; font-weight: 600; color: #063068; }
    .c-benefit-card-valid { font-size: 14px; color: #092b56; }
    .c-benefit-card-detail {
      align-self: end;
      justify-self: end;
      border: 1px solid #62bd8c;
      background: rgba(255,255,255,.82);
      color: var(--brand);
      border-radius: 8px;
      padding: 4px 12px;
      font-size: 14px;
      cursor: pointer;
    }
    .c-benefit-empty {
      padding: 28px 12px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
    }

    .c-benefit-detail-overlay {
      position: fixed;
      inset: 0;
      z-index: 10070;
      background: rgba(15, 23, 42, .34);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .c-benefit-detail-modal {
      width: min(1220px, calc(100vw - 48px));
      max-height: calc(100vh - 48px);
      background: #f5f6f8;
      border-radius: 6px;
      box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      color: #111827;
    }
    .c-benefit-detail-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 30px;
      height: 30px;
      border: 1px solid #d8dde6;
      border-radius: 50%;
      background: #fff;
      color: #6b7280;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      z-index: 2;
    }
    .c-benefit-detail-close:hover { color: #111827; border-color: #b8c0cc; }
    .c-benefit-detail-body {
      overflow-y: auto;
      padding: 24px 24px 16px;
    }
    .c-benefit-detail-section {
      background: #fff;
      border-radius: 6px;
      padding: 28px 30px;
      margin-bottom: 20px;
    }
    .c-benefit-detail-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 22px;
    }
    .c-benefit-detail-subtitle {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .c-benefit-detail-info {
      display: grid;
      grid-template-columns: 110px 1fr 110px 1fr;
      row-gap: 24px;
      column-gap: 28px;
      font-size: 14px;
      align-items: center;
      max-width: 720px;
    }
    .c-benefit-detail-label { font-weight: 700; color: #111827; }
    .c-benefit-detail-value { color: #111827; }
    .c-benefit-detail-valid {
      display: inline-flex;
      align-items: center;
      height: 24px;
      padding: 0 10px;
      border-radius: 4px;
      border: 1px solid #a8df8e;
      background: #f2ffe9;
      color: #48b833;
      font-size: 13px;
    }
    .c-benefit-detail-red { color: #ff3b30; }
    .c-benefit-detail-green { color: #33b764; font-weight: 700; }
    .c-benefit-exchange-wrap {
      background: #f7f8fa;
      border-radius: 6px;
      padding: 18px 16px 16px;
      margin: 0 34px 30px;
    }
    .c-benefit-exchange-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      color: #48b77a;
      font-weight: 700;
      font-size: 14px;
    }
    .c-benefit-exchange-summary {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 13px;
      color: #4b5563;
      font-weight: 400;
    }
    .c-benefit-count-mode {
      padding: 6px 12px;
      border: 1px solid #a8df8e;
      border-radius: 4px;
      background: #f6fff1;
      color: #52b83f;
      font-size: 13px;
    }
    .c-benefit-detail-table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      font-size: 13px;
      color: #333846;
    }
    .c-benefit-detail-table th {
      height: 58px;
      background: #f4f5f7;
      color: #5b6472;
      font-weight: 600;
      text-align: center;
      border-right: 1px solid #eef0f4;
    }
    .c-benefit-detail-table td {
      height: 74px;
      border-bottom: 1px solid #eef0f4;
      text-align: center;
    }
    .c-benefit-detail-table td:nth-child(2),
    .c-benefit-detail-table th:nth-child(2) { text-align: left; }
    .c-benefit-add-cart-btn {
      min-width: 78px;
      height: 30px;
      border: 1px solid #80cfa4;
      border-radius: 15px;
      background: #f5fff9;
      color: var(--brand);
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
    }
    .c-benefit-add-cart-btn:hover {
      background: #e8f8ef;
      border-color: var(--brand);
    }
    .c-benefit-goods-cell {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 260px;
    }
    .c-benefit-thumb {
      width: 42px;
      height: 42px;
      border-radius: 4px;
      background: linear-gradient(135deg, #2f80ed, #56ccf2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      flex-shrink: 0;
    }
    .c-benefit-thumb.light { background: #f1f3f5; color: #c2c8d0; }
    .c-benefit-goods-name {
      max-width: 220px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #20242a;
    }
    .c-benefit-goods-spec { color: #8b95a1; margin-top: 4px; }
    .c-benefit-discount-block {
      background: #f7f8fa;
      border-radius: 6px;
      padding: 16px;
      margin: 0 34px 24px;
    }
    .c-benefit-discount-line {
      min-height: 58px;
      background: #fff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 0 16px;
      margin-top: 16px;
      font-size: 14px;
    }
    .c-benefit-discount-tabs {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .c-benefit-discount-tabs strong {
      margin-right: 4px;
      font-size: 15px;
    }
    .c-benefit-pill {
      height: 32px;
      padding: 0 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      border: 1px solid #e6e8ec;
      color: #7b8491;
      background: #fff;
      font-size: 13px;
    }
    .c-benefit-pill.active {
      border-color: #9bd9bd;
      color: #61bd8c;
      background: #f4fffa;
    }
    .c-benefit-discount-input {
      width: 168px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #e0e3e8;
      border-radius: 17px;
      background: #f6f7f8;
      color: #b4bac4;
      overflow: hidden;
    }
    .c-benefit-discount-input span:first-child { padding-left: 18px; }
    .c-benefit-discount-input span:last-child {
      height: 100%;
      min-width: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #e0e3e8;
      color: #111827;
      background: #fff;
    }
    .c-benefit-checkbox {
      width: 16px;
      height: 16px;
      border: 1px solid #d9dde5;
      border-radius: 3px;
      background: #f6f7f8;
      display: inline-block;
    }
    .c-benefit-discount-table {
      margin-top: 12px;
      background: #fff;
      border-radius: 6px;
      padding: 12px;
    }
    .c-benefit-discount-table table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .c-benefit-discount-table th {
      height: 48px;
      background: #f2f2f2;
      text-align: left;
      padding: 0 12px;
      font-weight: 600;
    }
    .c-benefit-discount-table td {
      height: 50px;
      border-bottom: 1px solid #eceff3;
      padding: 0 12px;
    }
    .c-benefit-detail-note {
      color: #9aa3af;
      font-size: 12px;
      margin-top: 14px;
    }
    .c-benefit-detail-footer {
      flex-shrink: 0;
      padding: 14px 0 20px;
      text-align: center;
      background: #f5f6f8;
    }
    .c-benefit-detail-footer button {
      min-width: 64px;
      height: 34px;
      border-radius: 17px;
      border: 1px solid #d8dde6;
      background: #fff;
      color: #3f4652;
      cursor: pointer;
      font-size: 14px;
    }

    /* 无会员选中状态 */
    .c-member-empty { display: none; }
    .c-guest-card {
      background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
      border-radius: 8px; padding: 16px 20px;
      display: flex; align-items: center; justify-content: space-between;
      color: var(--text-secondary); font-size: 14px;
    }
    .c-guest-card .c-guest-name {
      font-size: 16px; font-weight: 600; color: var(--text-primary);
    }
    .c-guest-card .c-guest-dash {
      font-size: 20px; color: #c0c4cc;
    }
    .c-add-member-btn {
      width: 100%; margin-top: 10px; padding: 10px;
      background: var(--brand, #4caf82); color: #fff; border: none;
      border-radius: 8px; font-size: 14px; font-weight: 500;
      cursor: pointer; transition: background 0.2s;
    }
    .c-add-member-btn:hover { background: #43a074; }
    .c-member-empty svg { width: 48px; height: 48px; opacity: .3; }
    .c-member-empty p { font-size: 13px; }

    /* 选购弹窗 */
    .cp-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,.45); z-index: 9999;
      display: flex; align-items: center; justify-content: center;
    }
    .cp-box {
      background: #fff; border-radius: 8px;
      width: 860px; max-height: 580px;
      display: flex; flex-direction: column;
      box-shadow: 0 4px 24px rgba(0,0,0,.15);
    }
    .cp-header {
      padding: 0 20px; border-bottom: 1px solid #e8eaf2;
      display: flex; flex-direction: column; flex-shrink: 0;
    }
    .cp-tabs {
      display: flex; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
    }
    .cp-tab {
      padding: 12px 20px; font-size: 14px; color: var(--text-secondary);
      cursor: pointer; position: relative; transition: color .15s;
      white-space: nowrap;
    }
    .cp-tab:hover { color: var(--text-primary); }
    .cp-tab.active { color: #4caf82; font-weight: 600; }
    .cp-tab.active::after {
      content: ''; position: absolute; bottom: -1px; left: 20px; right: 20px;
      height: 2px; background: #4caf82; border-radius: 1px;
    }
    .cp-search-row {
      display: flex; align-items: center; gap: 10px; padding: 10px 0;
    }
    .cp-search-row .cp-search {
      flex: 1; height: 30px; border: 1px solid #d9d9d9;
      border-radius: 4px; padding: 0 8px 0 30px; font-size: 13px;
      outline: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23bfbfbf' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 8px center no-repeat;
    }
    .cp-search-row .cp-search:focus { border-color: #4caf82; }
    .cp-search-row .cp-cat-select {
      height: 30px; border: 1px solid #d9d9d9; border-radius: 4px;
      padding: 0 8px; font-size: 13px; outline: none; color: var(--text-primary);
    }
    .cp-search-row .cp-btn-query {
      height: 30px; padding: 0 16px; border: none; border-radius: 4px;
      background: #4caf82; color: #fff; font-size: 13px; cursor: pointer;
    }
    .cp-body { display: flex; flex: 1; overflow: hidden; }
    .cp-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .cp-table-wrap { flex: 1; overflow-y: auto; padding: 0; }
    .cp-table {
      width: 100%; border-collapse: collapse; font-size: 13px;
    }
    .cp-table thead th {
      position: sticky; top: 0; background: #fafafa;
      padding: 10px 12px; text-align: left; font-weight: 500;
      color: var(--text-secondary); border-bottom: 1px solid #e8eaf2;
      white-space: nowrap;
    }
    .cp-table tbody tr {
      border-bottom: 1px solid #f0f0f0; cursor: pointer;
      transition: background .1s;
    }
    .cp-table tbody tr:hover { background: #f9fffe; }
    .cp-table tbody tr.cp-row-selected { background: #edf9f3; }
    .cp-table td { padding: 10px 12px; vertical-align: middle; }
    .cp-table .cp-col-check { width: 36px; text-align: center; }
    .cp-table .cp-col-code { width: 120px; color: var(--text-muted); font-size: 12px; }
    .cp-table .cp-col-price { width: 80px; color: #e85858; font-weight: 500; }
    .cp-table .cp-col-vip { width: 80px; color: #4caf82; font-weight: 500; }
    .cp-table .cp-col-stock { width: 60px; text-align: center; color: var(--text-secondary); }
    .cp-good-info { display: flex; align-items: center; gap: 10px; }
    .cp-good-img {
      width: 40px; height: 40px; border-radius: 6px;
      background: #f5f7fa; display: flex; align-items: center;
      justify-content: center; font-size: 22px; flex-shrink: 0;
    }
    .cp-good-name { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
    .cp-good-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .cp-footer {
      padding: 10px 20px; border-top: 1px solid #e8eaf2;
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0; font-size: 13px; color: var(--text-secondary);
    }
    .cp-footer-left { display: flex; align-items: center; gap: 16px; }
    .cp-footer-right { display: flex; align-items: center; gap: 12px; }
    .cp-footer .cp-btn {
      padding: 6px 20px; border-radius: 4px; font-size: 13px;
      cursor: pointer; border: 1px solid #d9d9d9; background: #fff;
    }
    .cp-footer .cp-btn-cancel { margin-right: 0; }
    .cp-footer .cp-btn-confirm {
      background: #4caf82; color: #fff; border-color: #4caf82;
    }
    .cp-footer .cp-btn-confirm:hover { background: #43a074; }
    .cp-footer .cp-page {
      display: flex; align-items: center; gap: 4px;
    }
    .cp-footer .cp-page-btn {
      width: 26px; height: 26px; border: 1px solid #d9d9d9;
      border-radius: 4px; display: flex; align-items: center;
      justify-content: center; cursor: pointer; font-size: 12px;
      background: #fff; color: var(--text-secondary);
    }
    .cp-footer .cp-page-btn.active { background: #4caf82; color: #fff; border-color: #4caf82; }
    .cp-checkbox {
      width: 15px; height: 15px; accent-color: #4caf82; cursor: pointer;
    }

    /* 团购验券弹窗 */
    .gb-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,.45); z-index: 10000;
      display: flex; align-items: center; justify-content: center;
    }
    .gb-box {
      background: #fff; border-radius: 8px;
      width: 520px; max-height: 640px;
      display: flex; flex-direction: column;
      box-shadow: 0 4px 24px rgba(0,0,0,.15);
    }
    .gb-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; border-bottom: 1px solid #e8eaf2; flex-shrink: 0;
    }
    .gb-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .gb-close {
      width: 28px; height: 28px; border: none; background: none;
      cursor: pointer; font-size: 18px; color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      border-radius: 4px; transition: all .15s;
    }
    .gb-close:hover { background: #f5f5f5; color: var(--text-primary); }
    .gb-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
    .gb-input-row {
      display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
    }
    .gb-input-row input {
      flex: 1; height: 36px; border: 1px solid #d9d9d9; border-radius: 4px;
      padding: 0 12px; font-size: 14px; outline: none;
    }
    .gb-input-row input:focus { border-color: var(--brand); }
    .gb-input-row input::placeholder { color: #bfbfbf; }
    .gb-input-row .gb-btn-query {
      height: 36px; padding: 0 20px; border: none; border-radius: 4px;
      background: var(--brand); color: #fff; font-size: 13px;
      cursor: pointer; white-space: nowrap; transition: background .15s;
    }
    .gb-input-row .gb-btn-query:hover { background: #3d9b73; }
    .gb-input-row .gb-btn-query:disabled { background: #bfbfbf; cursor: not-allowed; }
    .gb-status {
      text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 14px;
    }
    .gb-status svg { width: 48px; height: 48px; color: #d9d9d9; margin-bottom: 8px; }
    .gb-result { border: 1px solid #e8eaf2; border-radius: 8px; overflow: hidden; }
    .gb-result-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #e8eaf2;
    }
    .gb-result-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .gb-result-badge {
      font-size: 12px; padding: 2px 8px; border-radius: 10px;
      background: #e8f5ee; color: var(--brand);
    }
    .gb-result-badge.type-pick { background: #fff7e6; color: #fa8c16; }
    .gb-result-badge.type-voucher { background: #eaf3ff; color: #2f6fb0; }
    .gb-voucher-card {
      border: 1px solid #b7e3c8;
      border-radius: 10px;
      overflow: hidden;
      background: linear-gradient(135deg, #f0fbf5 0%, #fffaf0 100%);
      box-shadow: 0 2px 10px rgba(61,155,115,.12);
    }
    .gb-voucher-main {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
      padding: 18px 18px 12px;
    }
    .gb-voucher-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .gb-voucher-desc { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
    .gb-voucher-amount {
      flex-shrink: 0;
      text-align: right;
      color: #e8582f;
      font-size: 30px;
      font-weight: 800;
      line-height: 1;
    }
    .gb-voucher-amount span { font-size: 13px; font-weight: 600; color: #ad6800; display: block; margin-top: 5px; }
    .gb-voucher-meta {
      padding: 10px 18px 14px;
      border-top: 1px dashed #b7e3c8;
      display: grid;
      gap: 6px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .gb-voucher-meta b { color: var(--text-primary); font-weight: 600; }
    .gb-items { padding: 12px 16px; }
    .gb-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 0; border-bottom: 1px solid #f0f0f0;
    }
    .gb-item:last-child { border-bottom: none; }
    .gb-item-emoji {
      width: 36px; height: 36px; border-radius: 6px;
      background: #f5f5f5; display: flex; align-items: center;
      justify-content: center; font-size: 18px; flex-shrink: 0;
    }
    .gb-item-info { flex: 1; min-width: 0; }
    .gb-item-name { font-size: 13px; color: var(--text-primary); font-weight: 500; }
    .gb-item-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .gb-item-price { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
    .gb-item-price .gb-zero { color: var(--brand); font-weight: 600; }
    .gb-pick-group { margin-bottom: 12px; }
    .gb-pick-label {
      font-size: 13px; color: var(--text-primary); font-weight: 500;
      margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
    }
    .gb-pick-label span { font-size: 12px; color: var(--text-muted); font-weight: 400; }
    .gb-pick-options { display: flex; flex-direction: column; gap: 6px; }
    .gb-pick-option {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; border: 1px solid #e8eaf2; border-radius: 6px;
      cursor: pointer; transition: all .15s;
    }
    .gb-pick-option:hover { border-color: var(--brand-light); }
    .gb-pick-option.selected { border-color: var(--brand); background: #f0faf4; }
    .gb-pick-option .gb-pick-radio {
      width: 16px; height: 16px; border-radius: 50%; border: 2px solid #d9d9d9;
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .gb-pick-option.selected .gb-pick-radio {
      border-color: var(--brand);
    }
    .gb-pick-option.selected .gb-pick-radio::after {
      content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
    }
    .gb-pick-emoji { font-size: 16px; }
    .gb-pick-info { flex: 1; }
    .gb-pick-name { font-size: 13px; color: var(--text-primary); }
    .gb-pick-sub { font-size: 12px; color: var(--text-muted); }
    .gb-pick-price { font-size: 12px; color: var(--text-muted); }
    .gb-footer {
      display: flex; align-items: center; justify-content: flex-end; gap: 10px;
      padding: 12px 20px; border-top: 1px solid #e8eaf2; flex-shrink: 0;
    }
    .gb-footer .gb-btn {
      height: 34px; padding: 0 20px; border-radius: 4px; font-size: 13px;
      cursor: pointer; transition: all .15s;
    }
    .gb-footer .gb-btn-cancel {
      border: 1px solid #d9d9d9; background: #fff; color: var(--text-secondary);
    }
    .gb-footer .gb-btn-cancel:hover { border-color: var(--brand); color: var(--brand); }
    .gb-footer .gb-btn-confirm {
      border: 1px solid var(--brand); background: var(--brand); color: #fff;
    }
    .gb-footer .gb-btn-confirm:hover { background: #3d9b73; }
    .gb-footer .gb-btn-confirm:disabled { background: #bfbfbf; border-color: #bfbfbf; cursor: not-allowed; }
    .gb-coupon-info {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; background: #fff7e6; border-radius: 6px;
      margin-bottom: 12px; font-size: 13px; color: #ad6800;
    }

    /* 美团外卖商品管理 */
    .mt-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
    .mt-top-bar {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px; background: #fff; border-bottom: 1px solid #e8eaf2;
      flex-shrink: 0;
    }
    .mt-tag-btn {
      height: 32px; padding: 0 14px;
      border-radius: 4px; font-size: 13px; cursor: pointer;
      border: none; background: var(--brand); color: #fff;
      display: flex; align-items: center; gap: 4px;
    }
    .mt-sort-btn {
      font-size: 13px; color: var(--text-secondary); cursor: pointer;
      background: none; border: none; padding: 0 4px;
    }
    .mt-sort-btn:hover { color: var(--brand); }
    .mt-body { display: flex; flex: 1; overflow: hidden; }
    .mt-sidebar {
      width: 220px; background: #fff; border-right: 1px solid #e8eaf2;
      display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
    }
    .mt-all-cats {
      padding: 10px 14px; font-size: 13px; color: var(--brand);
      cursor: pointer; font-weight: 500;
    }
    .mt-cat-tree { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
    .mt-cat-node {
      display: flex; align-items: center; gap: 4px;
      padding: 5px 6px 5px 8px; cursor: pointer;
      border-radius: 4px; font-size: 13px; color: var(--text-primary);
      transition: background .15s;
    }
    .mt-cat-node:hover { background: var(--sidebar-hover-bg); }
    .mt-cat-node.active { background: #e8f5ee; color: var(--brand); }
    .mt-cat-arrow {
      width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); flex-shrink: 0; transition: transform .15s;
    }
    .mt-cat-arrow.open { transform: rotate(90deg); }
    .mt-cat-dot {
      width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
      flex-shrink: 0;
    }
    .mt-cat-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mt-cat-children { padding-left: 2px; }
    .mt-sync-btn {
      margin: 8px 10px; padding: 8px 0;
      border: none; border-radius: 4px; background: var(--brand); color: #fff;
      font-size: 13px; cursor: pointer; text-align: center;
    }
    .mt-sync-btn:hover { background: #3d9b73; }
    .mt-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f8f9fc; }
    .mt-table-wrap { flex: 1; overflow: auto; padding: 12px 16px; }
    .mt-table {
      width: 100%; border-collapse: collapse; background: #fff;
      border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .mt-table th {
      background: #fafbfc; padding: 10px 6px; font-size: 12px; color: var(--text-secondary);
      font-weight: 500; text-align: center; border-bottom: 1px solid #e8eaf2;
      white-space: nowrap;
    }
    .mt-table th:first-child { padding-left: 12px; }
    .mt-table th:last-child { padding-right: 12px; }
    .mt-table td {
      padding: 10px 6px; font-size: 12px; color: var(--text-primary);
      border-bottom: 1px solid #f0f0f0; text-align: center; vertical-align: middle;
    }
    .mt-table td:first-child { padding-left: 12px; }
    .mt-table td:last-child { padding-right: 12px; }
    .mt-table tr:hover td { background: #fafbfc; }
    .mt-td-goods { display: flex; align-items: center; gap: 8px; }
    .mt-td-img {
      width: 44px; height: 44px; border-radius: 4px; background: #f5f5f5;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0; overflow: hidden;
    }
    .mt-td-info { text-align: left; min-width: 0; }
    .mt-td-name { font-size: 12px; color: var(--text-primary); line-height: 1.4; }
    .mt-td-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .mt-status-tag {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-size: 11px; white-space: nowrap;
    }
    .mt-status-on { background: #e8f5ee; color: var(--brand); }
    .mt-status-off { background: #f5f5f5; color: var(--text-muted); }
    .mt-bottom-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px; background: #fff; border-top: 1px solid #e8eaf2;
      flex-shrink: 0;
    }
    .mt-bottom-left { display: flex; align-items: center; gap: 12px; font-size: 13px; }
    .mt-batch-btn {
      padding: 4px 12px; border: 1px solid #d9d9d9; border-radius: 4px;
      background: #fff; color: var(--text-secondary); font-size: 12px; cursor: pointer;
    }
    .mt-batch-btn:hover { border-color: var(--brand); color: var(--brand); }
    .mt-bottom-right { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
    .mt-page-input {
      width: 36px; height: 26px; border: 1px solid #d9d9d9; border-radius: 4px;
      text-align: center; font-size: 12px; outline: none;
    }
    .mt-page-go {
      padding: 3px 10px; border: 1px solid #d9d9d9; border-radius: 4px;
      background: #fff; color: var(--text-secondary); font-size: 12px; cursor: pointer;
    }
    .mt-page-go:hover { border-color: var(--brand); color: var(--brand); }
    .mt-page-size {
      height: 26px; border: 1px solid #d9d9d9; border-radius: 4px;
      padding: 0 4px; font-size: 12px; outline: none; color: var(--text-secondary);
    }
    .mt-audit-success { color: var(--brand); font-size: 12px; }
    .mt-audit-reject { color: #e85858; font-size: 12px; }
    .mt-audit-reject a { color: #e85858; text-decoration: underline; cursor: pointer; }

    /* ===== 美团团购引导页 ===== */
    .mtgb-wrap {
      height: 100%;
      background: linear-gradient(180deg, #eef8f3 0%, #dff3e8 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
    }
    .mtgb-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 60px;
      max-width: 1100px;
      padding: 40px;
    }
    .mtgb-left { flex: 1; max-width: 640px; }
    .mtgb-right {
      flex-shrink: 0;
      display: flex;
      align-items: flex-end;
    }
    .mtgb-mascot { width: 280px; height: auto; object-fit: contain; }
    .mtgb-title {
      font-size: 32px;
      font-weight: 700;
      color: #1a1f2e;
      margin-bottom: 8px;
    }
    .mtgb-subtitle {
      font-size: 16px;
      color: var(--brand);
      margin-bottom: 24px;
    }
    .mtgb-badge {
      display: inline-block;
      padding: 6px 16px;
      background: #1a1f2e;
      color: #fff;
      border-radius: 4px;
      font-size: 13px;
      margin-bottom: 20px;
    }
    .mtgb-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 32px;
    }
    .mtgb-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .mtgb-card-icon { font-size: 28px; margin-bottom: 4px; }
    .mtgb-card-title {
      font-size: 15px;
      font-weight: 600;
      color: #1a1f2e;
    }
    .mtgb-card-desc {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    .mtgb-bottom {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .mtgb-tip { font-size: 13px; color: var(--text-secondary); }
    .mtgb-btn {
      padding: 8px 24px;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background .2s;
    }
    .mtgb-btn:hover { background: var(--brand-dark); }
    .mtgb-btn.is-opened {
      background: #e8f7ef;
      color: #2f9b68;
      box-shadow: inset 0 0 0 1px #8fd4ae;
    }
    .mtgb-btn.is-opened:hover { background: #def2e7; }
    .mtgb-btn-outline {
      padding: 8px 24px;
      background: #fff;
      color: var(--brand);
      border: 1px solid var(--brand);
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all .2s;
    }
    .mtgb-btn-outline:hover { background: var(--brand-light); }

    /* ===== 美团团购包收费流程 ===== */
    .mtgb-pay-overlay {
      position: fixed;
      inset: 0;
      z-index: 1150;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(17, 30, 42, .48);
      backdrop-filter: blur(2px);
    }
    .mtgb-pay-overlay.show { display: flex; }
    .mtgb-pay-dialog {
      width: 680px;
      max-width: calc(100vw - 48px);
      max-height: calc(100vh - 48px);
      overflow: hidden;
      border-radius: 14px;
      background: #f6f8fa;
      box-shadow: 0 24px 64px rgba(15, 31, 43, .28);
    }
    .mtgb-pay-head {
      min-height: 76px;
      padding: 18px 22px;
      display: flex;
      align-items: center;
      gap: 18px;
      color: #fff;
      background: linear-gradient(135deg, #38b979, #72d59d);
    }
    .mtgb-pay-title { font-size: 20px; font-weight: 800; }
    .mtgb-pay-subtitle { margin-top: 5px; font-size: 12px; opacity: .9; }
    .mtgb-pay-close {
      margin-left: auto;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,.14);
      color: #fff;
      font-size: 25px;
      line-height: 1;
      cursor: pointer;
    }
    .mtgb-pay-content {
      max-height: calc(100vh - 124px);
      padding: 20px 22px 22px;
      overflow-y: auto;
    }
    .mtgb-pay-product {
      padding: 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      border: 1px solid #e2eee8;
      border-radius: 12px;
      background: linear-gradient(135deg, #f4fff9, #fff);
    }
    .mtgb-pay-product-icon {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #ffcb61, #ff9f43);
      color: #fff;
      font-size: 22px;
      font-weight: 800;
      box-shadow: 0 8px 18px rgba(255, 159, 67, .22);
    }
    .mtgb-pay-product-main { min-width: 0; flex: 1; }
    .mtgb-pay-product-name { color: #1f2a37; font-size: 17px; font-weight: 800; }
    .mtgb-pay-product-desc { margin-top: 5px; color: #7c8794; font-size: 12px; line-height: 1.55; }
    .mtgb-pay-price { color: #f07834; font-size: 28px; font-weight: 800; white-space: nowrap; }
    .mtgb-pay-price > span { margin-right: 2px; font-size: 14px; }
    .mtgb-pay-price small { margin-left: 4px; color: #9aa2ab; font-size: 12px; font-weight: 500; }
    .mtgb-pay-section {
      margin-top: 16px;
      padding: 17px 18px;
      border: 1px solid #e9edf0;
      border-radius: 12px;
      background: #fff;
    }
    .mtgb-pay-section-title { margin-bottom: 13px; color: #25313d; font-size: 15px; font-weight: 800; }
    .mtgb-pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .mtgb-pay-method {
      height: 52px;
      padding: 0 14px;
      border: 1px solid #dde3e7;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      color: #35414d;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .mtgb-pay-method.active { border-color: #55be82; background: #f2fbf6; box-shadow: 0 0 0 1px #55be82; }
    .mtgb-pay-method-icon {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
    }
    .mtgb-pay-method-icon.wechat { background: #28b36c; }
    .mtgb-pay-method-icon.alipay { background: #1677ff; }
    .mtgb-pay-method-check { margin-left: auto; color: #55be82; opacity: 0; }
    .mtgb-pay-method.active .mtgb-pay-method-check { opacity: 1; }
    .mtgb-pay-note {
      margin-top: 14px;
      padding: 10px 12px;
      border-radius: 8px;
      background: #fff8e8;
      color: #9a6b22;
      font-size: 12px;
      line-height: 1.55;
    }
    .mtgb-pay-footer {
      margin-top: 18px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 22px;
    }
    .mtgb-pay-total { color: #67727e; font-size: 13px; }
    .mtgb-pay-total strong { margin-left: 8px; color: #f07834; font-size: 22px; }
    .mtgb-pay-submit,
    .mtgb-pay-secondary {
      min-width: 146px;
      height: 40px;
      padding: 0 22px;
      border-radius: 20px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .mtgb-pay-submit { border: none; background: linear-gradient(135deg, #49bd7b, #6ed39a); color: #fff; }
    .mtgb-pay-secondary { border: 1px solid #d7dee3; background: #fff; color: #58636f; }
    .mtgb-pay-qr {
      max-height: calc(100vh - 124px);
      padding: 24px 28px 26px;
      overflow-y: auto;
      background: #f8faf9;
    }
    .mtgb-pay-qr-method {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: left;
    }
    .mtgb-pay-qr-title { color: #26323d; font-size: 17px; font-weight: 800; }
    .mtgb-pay-qr-title span { margin: 0 4px; color: #39a76d; }
    .mtgb-pay-qr-subtitle { margin-top: 4px; color: #8a949e; font-size: 12px; }
    .mtgb-pay-qr-card {
      width: 300px;
      margin: 18px auto 0;
      padding: 18px 20px 16px;
      border: 1px solid #e0e8e3;
      border-radius: 14px;
      background: #fff;
      text-align: center;
      box-shadow: 0 8px 24px rgba(31, 59, 44, .08);
    }
    .mtgb-pay-qr-code {
      width: 210px;
      height: 210px;
      margin: 0 auto;
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(21, 1fr);
      grid-template-rows: repeat(21, 1fr);
      background: #fff;
      border: 1px solid #e7ebee;
      box-shadow: inset 0 0 0 5px #fff;
    }
    .mtgb-pay-qr-code span { display: block; background: #fff; }
    .mtgb-pay-qr-code span.dark { background: #17212b; }
    .mtgb-pay-qr-amount { margin-top: 12px; color: #f07834; font-size: 24px; font-weight: 800; }
    .mtgb-pay-qr-amount span { color: #98a1aa; font-size: 12px; font-weight: 500; }
    .mtgb-pay-qr-status {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: #68747f;
      font-size: 12px;
    }
    .mtgb-pay-qr-status span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #52bd80;
      box-shadow: 0 0 0 5px rgba(82, 189, 128, .13);
      animation: mtgbQrWaiting 1.4s ease-in-out infinite;
    }
    @keyframes mtgbQrWaiting {
      0%, 100% { opacity: .55; transform: scale(.9); }
      50% { opacity: 1; transform: scale(1.08); }
    }
    .mtgb-pay-qr-actions { margin-top: 18px; display: flex; justify-content: center; gap: 14px; }
    .mtgb-pay-success {
      padding: 36px 34px 32px;
      max-height: calc(100vh - 124px);
      overflow-y: auto;
      text-align: center;
      background: #fff;
    }
    .mtgb-pay-success-icon {
      width: 66px;
      height: 66px;
      margin: 0 auto;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #4bc284, #82dca8);
      color: #fff;
      font-size: 34px;
      font-weight: 700;
      box-shadow: 0 10px 24px rgba(70, 184, 121, .24);
    }
    .mtgb-pay-success-title { margin-top: 18px; color: #25313d; font-size: 22px; font-weight: 800; }
    .mtgb-pay-success-desc { margin-top: 7px; color: #7d8792; font-size: 13px; }
    .mtgb-pay-success-order {
      margin-top: 24px;
      padding: 16px 20px;
      border-radius: 12px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px 26px;
      background: #f6f9f7;
      text-align: left;
    }
    .mtgb-pay-success-order div { min-width: 0; display: flex; align-items: center; gap: 12px; }
    .mtgb-pay-success-order span { width: 58px; flex-shrink: 0; color: #939ba5; font-size: 12px; }
    .mtgb-pay-success-order strong { min-width: 0; color: #33404b; font-size: 13px; word-break: break-all; }
    .mtgb-pay-success-actions { margin-top: 26px; display: flex; justify-content: center; gap: 14px; }

    @media (max-width: 760px) {
      .mtgb-pay-methods,
      .mtgb-pay-success-order { grid-template-columns: 1fr; }
      .mtgb-pay-product { align-items: flex-start; flex-wrap: wrap; }
      .mtgb-pay-price { margin-left: 62px; }
      .mtgb-pay-footer { align-items: stretch; flex-direction: column; gap: 12px; }
      .mtgb-pay-total { text-align: right; }
      .mtgb-pay-qr-card { width: min(300px, 100%); }
      .mtgb-pay-qr-actions { align-items: stretch; flex-direction: column; }
    }

    /* ===== 美团团购-套餐对应关系页面 ===== */
    .mtgm-wrap {
      display: flex; flex-direction: column; height: 100%; overflow: hidden;
    }
    .mtgm-top {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .mtgm-search {
      display: flex; align-items: center; gap: 8px; flex: 1; max-width: 400px;
    }
    .mtgm-search input {
      flex: 1; height: 32px; border: 1px solid #d9d9d9; border-radius: 4px;
      padding: 0 10px; font-size: 13px; outline: none;
    }
    .mtgm-search input:focus { border-color: var(--brand); }
    .mtgm-search-btn {
      height: 32px; padding: 0 14px; background: var(--brand); color: #fff;
      border: none; border-radius: 4px; font-size: 13px; cursor: pointer;
    }
    .mtgm-search-btn:hover { background: var(--brand-dark); }
    .mtgm-filter {
      display: flex; align-items: center; gap: 6px;
      padding-left: 2px;
    }
    .mtgm-filter-btn {
      height: 32px; padding: 0 14px; border: 1px solid var(--border);
      background: #fff; color: var(--text-secondary); border-radius: 16px;
      font-size: 13px; cursor: pointer; transition: all .15s;
    }
    .mtgm-filter-btn:hover { border-color: var(--brand); color: var(--brand); }
    .mtgm-filter-btn.active {
      background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark);
      font-weight: 500;
    }
    .mtgm-sync-btn {
      height: 32px; padding: 0 14px; background: #fff; color: var(--brand);
      border: 1px solid var(--brand); border-radius: 4px; font-size: 13px;
      cursor: pointer; display: flex; align-items: center; gap: 4px;
    }
    .mtgm-sync-btn:hover { background: var(--brand-light); }
    .mtgm-body {
      flex: 1; overflow: auto; padding: 16px 20px;
    }
    .mtgm-board {
      display: block;
    }
    .mtgm-section { margin-bottom: 26px; }
    .mtgm-section-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .mtgm-section-title {
      font-size: 15px; font-weight: 600; color: var(--text-primary);
      display: flex; align-items: center; gap: 8px;
    }
    .mtgm-section-count {
      font-size: 12px; color: var(--text-muted); font-weight: 400;
    }
    .mtgm-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 220px));
      gap: 16px;
      align-items: stretch;
      justify-content: start;
    }
    .mtgm-item {
      background: #fff; border: 1px solid transparent; border-radius: 8px; padding: 18px;
      box-shadow: 0 1px 3px rgba(0,0,0,.04); cursor: pointer;
      transition: box-shadow .2s, border-color .2s;
      display: flex; flex-direction: column;
      min-height: 178px;
    }
    .mtgm-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); }
    .mtgm-item.status-complete { border-color: rgba(0, 150, 80, .42); }
    .mtgm-item.status-auto { border-color: rgba(236, 142, 30, .66); }
    .mtgm-item.status-unmapped { border-color: rgba(229, 57, 53, .45); }
    .mtgm-item.pending {
      cursor: default;
    }
    .mtgm-item.pending:hover { box-shadow: 0 1px 3px rgba(0,0,0,.04); }
    .mtgm-item-head {
      display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .mtgm-item-name {
      font-size: 15px; font-weight: 600; color: var(--text-primary);
    }
    .mtgm-item-tag {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-size: 11px; white-space: nowrap;
    }
    .mtgm-tag-fixed { background: #e8f5ee; color: var(--brand); }
    .mtgm-tag-pick { background: #fff3e0; color: #e09513; }
    .mtgm-tag-voucher { background: #eaf3ff; color: #2f6fb0; }
    .mtgm-item-info {
      font-size: 12px; color: var(--text-secondary); line-height: 1.6;
      margin-bottom: 4px;
    }
    .mtgm-item-mapping {
      margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-light);
      font-size: 12px; color: var(--text-muted);
    }
    .mtgm-item-mapping .mapped { color: var(--brand); }
    .mtgm-item-mapping .auto { color: #d98200; }
    .mtgm-item-mapping .unmapped { color: var(--red); }

    /* 套餐对应关系设置弹窗 */
    .mtgm-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.45);
      display: flex; align-items: center; justify-content: center;
      z-index: 9999;
    }
    .mtgm-config-overlay {
      align-items: stretch;
      justify-content: center;
      padding: 16px;
    }
    .mtgm-config-shell {
      width: min(1420px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      display: grid;
      grid-template-columns: minmax(640px, 720px) minmax(540px, 1fr);
      gap: 0;
      align-self: center;
      box-shadow: 0 8px 28px rgba(0,0,0,.18);
      border-radius: 10px;
    }
    .mtgm-modal {
      background: #fff; border-radius: 12px; width: 720px; max-height: 80vh;
      display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(0,0,0,.15);
    }
    .mtgm-config-shell .mtgm-modal {
      width: auto;
      max-height: calc(100vh - 32px);
      border-radius: 8px 0 0 8px;
      box-shadow: none;
    }
    .mtgm-modal-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; border-bottom: 1px solid var(--border);
    }
    .mtgm-modal-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .mtgm-modal-close {
      width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: var(--text-muted); cursor: pointer; border-radius: 4px;
    }
    .mtgm-modal-close:hover { background: #f5f5f5; color: var(--text-primary); }
    .mtgm-modal-body {
      flex: 1; overflow-y: auto; padding: 16px 20px;
    }
    .mtgm-map-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 0; border-bottom: 1px solid var(--border-light);
    }
    .mtgm-map-item.status-auto {
      margin: 0 -8px; padding: 12px 8px; border-left: 3px solid #f0a33a;
      background: #fffaf2;
    }
    .mtgm-map-item.status-unmapped {
      margin: 0 -8px; padding: 12px 8px; border-left: 3px solid var(--red);
      background: #fff8f8;
    }
    .mtgm-map-item:last-child { border-bottom: none; }
    .mtgm-map-left {
      flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    }
    .mtgm-map-img {
      width: 40px; height: 40px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; flex-shrink: 0; background: #f5f5f5;
      border: 1px solid var(--border-light);
    }
    .mtgm-map-info { flex: 1; min-width: 0; }
    .mtgm-map-mt-name {
      font-size: 14px; font-weight: 500; color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mtgm-map-mt-sub {
      font-size: 12px; color: var(--text-muted); margin-top: 2px;
      display: flex; align-items: center; gap: 4px;
    }
    .mtgm-map-price-input {
      width: 80px; padding: 3px 8px; border: 1px solid var(--border);
      border-radius: 4px; font-size: 13px; color: var(--text-primary);
      text-align: right; outline: none;
    }
    .mtgm-map-price-input:focus { border-color: var(--brand); }
    .mtgm-map-arrow {
      flex-shrink: 0; color: var(--text-muted); font-size: 16px;
    }
    .mtgm-map-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .mtgm-map-picker-btn {
      display: inline-flex; align-items: center; gap: 6px;
      height: 32px; padding: 0 12px; border: 1px dashed var(--brand);
      border-radius: 4px; font-size: 13px; color: var(--brand);
      background: var(--brand-light); cursor: pointer; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    }
    .mtgm-map-picker-btn:hover { background: #d4edda; }
    .mtgm-map-picker-btn.empty { border-style: dashed; color: var(--brand); }
    .mtgm-map-picker-btn.filled { border-style: solid; background: #e8f5ee; color: var(--brand-dark); }
    .mtgm-map-picker-btn.auto { border-style: solid; background: #fff6e6; border-color: #f0a33a; color: #9a5a00; }
    .mtgm-map-bld-hint {
      font-size: 11px; color: var(--text-muted);
    }
    .mtgm-map-status {
      flex-shrink: 0; font-size: 12px; white-space: nowrap;
    }
    .mtgm-map-status.ok { color: var(--brand); }
    .mtgm-map-status.auto { color: #d98200; }
    .mtgm-map-status.no { color: var(--red); }
    .mtgm-map-group {
      background: #f8f9fa; border: 1px solid var(--border-light);
      border-radius: 8px; padding: 10px 12px; margin: 4px 0 8px;
      font-size: 12px; color: var(--text-secondary);
    }
    .mtgm-map-group-title {
      font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;
    }
    .mtgm-map-option-tag {
      display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
      border-radius: 10px; background: #fff3e0; color: #e09513;
      font-size: 11px; margin-left: 6px; font-weight: 400;
    }
    .mtgm-config-tip {
      padding: 10px 12px;
      border: 1px solid #d8ecdc;
      border-radius: 8px;
      background: #f6fffa;
      color: #386f52;
      font-size: 13px;
      line-height: 1.55;
      margin-bottom: 14px;
    }
    .mtgm-config-summary {
      display: grid;
      grid-template-columns: .95fr .62fr .82fr 1.65fr;
      gap: 10px;
      align-items: stretch;
      margin-bottom: 14px;
    }
    .mtgm-config-stat {
      border: 1px solid var(--border-light);
      border-radius: 8px;
      background: #f8f9fa;
      padding: 10px 12px;
      min-width: 0;
    }
    .mtgm-config-stat.price-card {
      background: #fff;
      border-color: #cfe7d7;
    }
    .mtgm-config-stat.income-card {
      background: #fff;
      border-color: #cfe7d7;
    }
    .mtgm-config-stat .label {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .mtgm-config-stat .value {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.35;
    }
    .mtgm-config-price-line {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.35;
    }
    .mtgm-config-income-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 5px;
      align-items: center;
      margin-bottom: 5px;
    }
    .mtgm-config-income-label {
      font-size: 11px;
      color: var(--text-secondary);
      font-weight: 600;
    }
    .mtgm-config-income-field {
      position: relative;
    }
    .mtgm-config-income-field::before {
      content: '¥';
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 13px;
      z-index: 1;
    }
    .mtgm-config-income-input {
      width: 100%;
      height: 30px;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 0 10px 0 24px;
      font-size: 13px;
      color: var(--text-primary);
      background: #fff;
      outline: none;
    }
    .mtgm-config-income-input:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(76, 175, 130, .1);
    }
    .mtgm-config-income-hint {
      color: var(--text-muted);
      font-size: 10px;
      line-height: 1.4;
    }
    .mtgm-config-section {
      border: 1px solid var(--border-light);
      border-radius: 10px;
      background: #fff;
      padding: 12px;
      margin-bottom: 14px;
    }
    .mtgm-config-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .mtgm-config-section-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .mtgm-config-section-desc {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 400;
    }
    .mtgm-config-add {
      height: 28px;
      padding: 0 10px;
      border: 1px solid var(--brand);
      border-radius: 14px;
      background: var(--brand-light);
      color: var(--brand);
      font-size: 12px;
      cursor: pointer;
    }
    .mtgm-config-fixed-actions {
      padding-top: 8px;
      border-top: 1px solid var(--border-light);
    }
    .mtgm-config-row {
      display: grid;
      grid-template-columns: 1fr 74px 42px;
      gap: 8px;
      align-items: center;
      padding: 8px 0;
      border-top: 1px solid var(--border-light);
    }
    .mtgm-config-row:first-of-type { border-top: none; }
    .mtgm-config-select,
    .mtgm-config-input {
      height: 30px;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 0 8px;
      font-size: 13px;
      color: var(--text-primary);
      background: #fff;
      outline: none;
    }
    .mtgm-config-select:focus,
    .mtgm-config-input:focus { border-color: var(--brand); }
    .mtgm-config-picker-field {
      height: 30px;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 0 9px;
      font-size: 13px;
      color: var(--text-primary);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      min-width: 0;
    }
    .mtgm-config-picker-field:hover {
      border-color: var(--brand);
      background: #fbfffd;
    }
    .mtgm-config-picker-field.active {
      border-color: var(--brand);
      background: #effaf3;
      box-shadow: 0 0 0 2px rgba(76,175,80,.12);
    }
    .mtgm-config-picker-field.empty { color: var(--text-muted); }
    .mtgm-config-picker-field .name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .mtgm-config-picker-field .arrow {
      color: var(--text-muted);
      flex-shrink: 0;
      margin-left: 8px;
    }
    .mtgm-config-del {
      height: 28px;
      border: 1px solid #f2c0c0;
      border-radius: 4px;
      background: #fff8f8;
      color: var(--red);
      cursor: pointer;
      font-size: 12px;
    }
    .mtgm-option-group {
      border: 1px dashed #f0bf72;
      border-radius: 8px;
      background: #fffaf2;
      padding: 10px;
      margin-top: 10px;
    }
    .mtgm-option-head {
      display: grid;
      grid-template-columns: 1fr 96px 42px;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }
    .mtgm-config-pick-panel {
      background: #fff;
      border-left: 1px solid var(--border);
      border-radius: 0 8px 8px 0;
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 32px);
      overflow: hidden;
    }
    .mtgm-config-pick-empty {
      background: #fff;
      border-left: 1px dashed var(--border);
      border-radius: 0 8px 8px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 13px;
    }
    .mtgm-config-pick-panel .mtgm-pick-head {
      flex-shrink: 0;
    }
    .mtgm-config-pick-panel .mtgm-pick-body {
      min-height: 0;
    }
    .mtgm-config-pick-panel .mtgm-pick-table tbody tr {
      cursor: pointer;
    }
    .mtgm-voucher-summary {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
      margin-bottom: 14px;
    }
    .mtgm-voucher-stat {
      background: #f8f9fa; border: 1px solid var(--border-light);
      border-radius: 8px; padding: 10px 12px;
    }
    .mtgm-voucher-stat .label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
    .mtgm-voucher-stat .value { font-size: 18px; font-weight: 700; color: var(--text-primary); }
    .mtgm-voucher-section {
      border-top: 1px solid var(--border-light);
      padding-top: 14px; margin-top: 12px;
    }
    .mtgm-voucher-config-section {
      padding-top: 12px;
    }
    .mtgm-voucher-section-title {
      font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px;
    }
    .mtgm-voucher-scope-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .mtgm-voucher-scope-card {
      border: 1px solid var(--border); border-radius: 8px;
      padding: 12px; cursor: pointer; background: #fff; transition: all .15s;
    }
    .mtgm-voucher-scope-card:hover { border-color: var(--brand); }
    .mtgm-voucher-scope-card.active {
      border-color: var(--brand); background: var(--brand-light);
      box-shadow: 0 0 0 1px rgba(61,155,115,.12);
    }
    .mtgm-voucher-scope-name {
      font-size: 14px; font-weight: 600; color: var(--text-primary);
      display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
    }
    .mtgm-voucher-scope-desc {
      font-size: 12px; color: var(--text-secondary); line-height: 1.5;
    }
    .mtgm-voucher-rule-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 12px; border: 1px solid var(--border-light);
      border-radius: 8px; background: #fff;
    }
    .mtgm-voucher-rule-row.include-items {
      align-items: stretch;
      border-style: dashed;
      border-color: rgba(61,155,115,.55);
      border-left: 4px solid var(--brand);
      background: #fbfffd;
      padding: 14px 14px 14px 16px;
    }
    .mtgm-voucher-rule-main { min-width: 0; }
    .mtgm-voucher-rule-row.include-items .mtgm-voucher-rule-main {
      display: flex; flex-direction: column; justify-content: center;
    }
    .mtgm-voucher-rule-title {
      font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px;
    }
    .mtgm-voucher-rule-title .tag {
      display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
      border-radius: 10px; background: #e8f5ee; color: var(--brand-dark);
      font-size: 11px; font-weight: 500; margin-left: 8px; vertical-align: 1px;
    }
    .mtgm-voucher-rule-desc {
      font-size: 12px; color: var(--text-muted); line-height: 1.5;
    }
    .mtgm-voucher-action {
      height: 30px; padding: 0 12px; border-radius: 4px;
      border: 1px solid var(--brand); color: var(--brand); background: #fff;
      font-size: 12px; cursor: pointer; white-space: nowrap;
    }
    .mtgm-voucher-action:hover { background: var(--brand-light); }
    .mtgm-voucher-action.primary {
      align-self: center;
      height: 36px; padding: 0 16px;
      background: var(--brand); color: #fff; border-color: var(--brand);
      font-size: 16px; font-weight: 500;
    }
    .mtgm-voucher-action.primary:hover { background: var(--brand-dark); }
    .mtgm-voucher-check {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; color: var(--text-primary); white-space: nowrap;
    }
    .mtgm-voucher-check input { accent-color: var(--brand); }
    .mtgm-voucher-picked {
      display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
    }
    .mtgm-voucher-chip {
      display: inline-flex; align-items: center; gap: 4px;
      max-width: 180px; height: 24px; padding: 0 8px;
      background: #f5f7f8; border: 1px solid var(--border-light);
      border-radius: 12px; font-size: 12px; color: var(--text-secondary);
    }
    .mtgm-voucher-chip span {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mtgm-voucher-empty {
      margin-top: 8px; font-size: 12px; color: var(--text-muted);
    }
    .mtgm-modal-foot {
      display: flex; align-items: center; justify-content: flex-end; gap: 10px;
      padding: 12px 20px; border-top: 1px solid var(--border);
    }
    .mtgm-modal-btn {
      padding: 6px 20px; border-radius: 4px; font-size: 13px; cursor: pointer;
    }
    .mtgm-modal-cancel {
      background: #fff; border: 1px solid #d9d9d9; color: var(--text-secondary);
    }
    .mtgm-modal-cancel:hover { border-color: var(--brand); color: var(--brand); }
    .mtgm-modal-save {
      background: var(--brand); border: none; color: #fff;
    }
    .mtgm-modal-save:hover { background: var(--brand-dark); }

    /* ===== 商品选择器弹窗 ===== */
    .mtgm-pick-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.45);
      display: flex; align-items: center; justify-content: center;
      z-index: 10000;
    }
    .mtgm-pick-modal {
      background: #fff; border-radius: 12px; width: 900px; max-width: 90vw;
      height: 640px; max-height: 85vh;
      display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.18);
      overflow: hidden;
    }
    .mtgm-pick-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 20px; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .mtgm-pick-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .mtgm-pick-head-right { display: flex; align-items: center; gap: 12px; }
    .mtgm-pick-stats {
      font-size: 13px; color: var(--text-secondary);
    }
    .mtgm-pick-stats .num { color: var(--brand); font-weight: 600; }
    .mtgm-pick-confirm {
      padding: 6px 20px; background: var(--brand); color: #fff;
      border: none; border-radius: 20px; font-size: 13px; cursor: pointer;
    }
    .mtgm-pick-confirm:hover { background: var(--brand-dark); }
    .mtgm-pick-close {
      width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: var(--text-muted); cursor: pointer; border-radius: 4px;
    }
    .mtgm-pick-close:hover { background: #f5f5f5; color: var(--text-primary); }

    .mtgm-pick-tabs {
      display: flex; gap: 8px; padding: 10px 20px 0; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .mtgm-pick-tab {
      padding: 8px 20px; font-size: 14px; color: var(--text-secondary);
      cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: all .2s;
    }
    .mtgm-pick-tab:hover { color: var(--brand); }
    .mtgm-pick-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 500; }

    .mtgm-pick-body {
      display: flex; flex: 1; overflow: hidden;
    }
    .mtgm-pick-sidebar {
      width: 160px; border-right: 1px solid var(--border); overflow-y: auto;
      padding: 12px 0; flex-shrink: 0; background: #fafafa;
    }
    .mtgm-pick-cat {
      padding: 8px 16px; font-size: 13px; color: var(--text-primary);
      cursor: pointer; display: flex; align-items: center; justify-content: space-between;
      transition: background .15s;
    }
    .mtgm-pick-cat:hover { background: #f0f0f0; }
    .mtgm-pick-cat.active { background: var(--brand-light); color: var(--brand-dark); font-weight: 500; }
    .mtgm-pick-cat-arrow { font-size: 10px; color: var(--text-muted); transition: transform .2s; }
    .mtgm-pick-cat.active .mtgm-pick-cat-arrow { color: var(--brand); }
    .mtgm-pick-subcat {
      padding-left: 16px;
    }
    .mtgm-pick-subcat .mtgm-pick-cat {
      padding: 6px 16px 6px 28px; font-size: 12px;
    }

    .mtgm-pick-main {
      flex: 1; display: flex; flex-direction: column; overflow: hidden;
    }
    .mtgm-pick-toolbar {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px; border-bottom: 1px solid var(--border-light);
      flex-shrink: 0;
    }
    .mtgm-pick-search {
      display: flex; align-items: center; gap: 6px; flex: 1; max-width: 320px;
    }
    .mtgm-pick-search input {
      flex: 1; height: 30px; border: 1px solid #d9d9d9; border-radius: 4px;
      padding: 0 10px; font-size: 13px; outline: none;
    }
    .mtgm-pick-search input:focus { border-color: var(--brand); }
    .mtgm-pick-search-btn {
      height: 30px; padding: 0 14px; background: var(--brand); color: #fff;
      border: none; border-radius: 4px; font-size: 13px; cursor: pointer;
    }

    .mtgm-pick-table-wrap { flex: 1; overflow: auto; }
    .mtgm-pick-table {
      width: 100%; border-collapse: collapse; font-size: 13px;
    }
    .mtgm-pick-table th {
      background: #f8f9fa; color: var(--text-secondary); font-weight: 500;
      padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-light);
      white-space: nowrap; position: sticky; top: 0; z-index: 1;
    }
    .mtgm-pick-table td {
      padding: 10px 12px; border-bottom: 1px solid var(--border-light);
      color: var(--text-primary); vertical-align: middle;
    }
    .mtgm-pick-table tr:hover { background: #f8f9fa; }
    .mtgm-pick-table .cell-img {
      width: 40px; height: 40px; border-radius: 4px;
      background: #f5f5f5; display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .mtgm-pick-table .cell-name { font-weight: 500; }
    .mtgm-pick-table .cell-spec { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .mtgm-pick-table .cell-price { color: var(--red); font-weight: 500; }
    .mtgm-pick-table .cell-memprice { color: var(--text-secondary); }
    .mtgm-pick-sel-btn {
      width: 24px; height: 24px; border-radius: 50%;
      border: 2px solid #d9d9d9; background: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 12px; color: transparent;
      transition: all .2s; padding: 0;
    }
    .mtgm-pick-sel-btn:hover { border-color: var(--brand); }
    .mtgm-pick-sel-btn.selected {
      background: var(--brand); border-color: var(--brand); color: #fff;
    }

    .mtgm-pick-empty {
      text-align: center; padding: 60px 0; color: var(--text-muted); font-size: 13px;
    }

    /* ===== 订单管理 ===== */
    .ord-page {
      padding: 14px 16px 12px; display: flex; flex-direction: column; height: 100%;
      overflow: hidden; background: #f3f5f6; gap: 0;
    }
    /* 顶部主Tab（门店订单/代发订单） */
    .ord-main-tabs {
      display: flex; align-items: flex-end; gap: 6px;
      padding: 0; background: transparent; border-bottom: none; flex-shrink: 0;
    }
    .ord-main-tab {
      min-width: 112px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
      padding: 0 22px; font-size: 14px; font-weight: 500; border-radius: 8px 8px 0 0;
      color: var(--text-secondary); cursor: pointer; border: 1px solid #e5e9ed; border-bottom: none;
      background: #eef1f3; position: relative; transition: all .2s;
    }
    .ord-main-tab:hover { color: var(--brand); background: #f8faf9; }
    .ord-main-tab.active { color: var(--brand); background: #fff; border-color: #fff; font-weight: 600; }
    .ord-main-tab.active::after {
      content: ''; position: absolute; left: 24px; right: 24px; bottom: 0;
      height: 3px; border-radius: 3px 3px 0 0; background: var(--brand);
    }
    /* 筛选区 */
    .ord-filter-area {
      padding: 18px 18px 12px; background: #fff; flex-shrink: 0;
      border-radius: 0 8px 0 0; border: 1px solid #edf0f2; border-bottom: none;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    }
    .ord-filter-row1 {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
    }
    .ord-filter-row2 {
      display: flex; align-items: center; gap: 10px; margin-bottom: 0;
    }
    .ord-search {
      display: flex; align-items: center; border: 1px solid var(--border);
      border-radius: 18px; padding: 0 12px; gap: 7px; background: #fff; min-width: 250px; height: 34px;
    }
    .ord-search input { border: none; outline: none; font-size: 13px; color: var(--text-primary); width: 198px; font-family: inherit; }
    .ord-search input::placeholder { color: var(--text-muted); }
    .ord-fsel {
      display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 12px;
      border: 1px solid var(--border); border-radius: 17px; min-width: 96px;
      font-size: 13px; color: var(--text-secondary); cursor: pointer; background: #fff; white-space: nowrap;
    }
    .ord-fsel:hover { border-color: var(--brand); }
    .ord-date-range {
      display: flex; align-items: center; gap: 6px; height: 34px;
      border: 1px solid var(--border); border-radius: 17px;
      padding: 0 12px; background: #fff; font-size: 13px; color: var(--text-secondary); cursor: pointer;
    }
    .ord-date-sep { color: var(--text-muted); margin: 0 2px; }
    .ord-btn-query {
      height: 34px; padding: 0 20px; border-radius: 17px; background: var(--brand); color: #fff;
      font-size: 13px; cursor: pointer; border: none; white-space: nowrap;
    }
    .ord-btn-query:hover { background: var(--brand-dark); }
    .ord-btn-reset {
      height: 34px; padding: 0 16px; border-radius: 17px; background: #fff; color: var(--text-secondary);
      font-size: 13px; cursor: pointer; border: 1px solid var(--border); white-space: nowrap;
    }
    .ord-btn-reset:hover { border-color: var(--brand); color: var(--brand); }
    .ord-btn-export {
      display: flex; align-items: center; gap: 4px;
      height: 34px; padding: 0 14px; border-radius: 17px; background: #fff; color: var(--text-secondary);
      font-size: 13px; cursor: pointer; border: 1px solid var(--border); white-space: nowrap;
    }
    .ord-btn-export:hover { border-color: var(--brand); color: var(--brand); }
    .ord-quick-period {
      display: flex; align-items: center;
      border: 1px solid var(--border); border-radius: 17px; overflow: hidden; background: #fff; height: 34px;
    }
    .ord-period-btn {
      height: 32px; min-width: 42px; padding: 0 12px; font-size: 13px; color: var(--text-secondary);
      cursor: pointer; border: none; background: none; border-right: 1px solid var(--border);
      transition: all .15s;
    }
    .ord-period-btn:last-child { border-right: none; }
    .ord-period-btn:hover { background: var(--brand-light); color: var(--brand); }
    .ord-period-btn.active { background: var(--brand-light); color: var(--brand); font-weight: 500; }
    /* 状态Tab行 */
    .ord-status-tabs {
      display: flex; align-items: center; gap: 6px;
      padding: 12px 18px 0; background: #fff; border-left: 1px solid #edf0f2; border-right: 1px solid #edf0f2;
      border-bottom: none; flex-shrink: 0; overflow-x: auto;
    }
    .ord-status-tab {
      min-width: 86px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
      padding: 0 14px; font-size: 13px; color: var(--text-secondary); background: #f4f6f7;
      cursor: pointer; border: 1px solid #edf0f2; border-bottom: none; border-radius: 6px 6px 0 0;
      white-space: nowrap; transition: all .2s; position: relative;
    }
    .ord-status-tab:hover { color: var(--brand); background: #fafcfa; }
    .ord-status-tab.active { color: var(--brand); background: #fff; font-weight: 600; }
    .ord-status-tab.active::after {
      content: ''; position: absolute; left: 18px; right: 18px; bottom: 0;
      height: 3px; border-radius: 3px 3px 0 0; background: var(--brand);
    }
    /* 统计栏 */
    .ord-stats-bar {
      display: flex; align-items: center; gap: 0; padding: 12px 18px;
      background: #fff; border: 1px solid #edf0f2; border-top: none; border-bottom: none; flex-shrink: 0;
    }
    .ord-stat-item {
      display: flex; align-items: center; gap: 4px; font-size: 13px;
      color: var(--text-secondary); margin-right: 20px; white-space: nowrap;
    }
    .ord-stat-val { color: var(--red); font-weight: 600; }
    .ord-stat-val.green { color: var(--brand); }
    .ord-stat-q {
      width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted);
      color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0;
    }
    .ord-expand-btn {
      margin-left: auto; height: 30px; padding: 0 14px; font-size: 12px; color: var(--brand);
      border: 1px solid rgba(48, 155, 106, .55); border-radius: 15px; cursor: pointer; background: #fff;
    }
    .ord-expand-btn:hover { border-color: var(--brand); background: var(--brand-light); }
    /* 表格区 */
    .ord-table-wrap {
      flex: 1; overflow: auto; background: #fff; border-left: 1px solid #edf0f2; border-right: 1px solid #edf0f2;
    }
    .ord-table { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 13px; }
    .ord-table thead { background: #f6f8f9; position: sticky; top: 0; z-index: 1; }
    .ord-table th {
      padding: 13px 12px; text-align: center; font-weight: 500; color: var(--text-secondary);
      border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 12.5px;
    }
    .ord-table th:nth-child(2) { text-align: left; }
    .ord-table td {
      padding: 13px 12px; color: var(--text-primary); border-bottom: 1px solid var(--border-light);
      vertical-align: middle; text-align: center;
    }
    .ord-table td:nth-child(2) { text-align: left; }
    .ord-table tbody tr:hover { background: #f8faf9; }
    /* 商品列（订单信息区块） */
    .ord-order-block { display: flex; flex-direction: column; gap: 4px; }
    .ord-order-no {
      font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 7px;
      flex-wrap: wrap;
    }
    .ord-order-no a { color: var(--blue); text-decoration: none; cursor: pointer; }
    .ord-order-no a:hover { text-decoration: underline; }
    .ord-order-source {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 2px 7px; border-radius: 9px; font-size: 11px;
      background: #e8f4ff; color: #1677ff;
    }
    .ord-order-time { font-size: 12px; color: var(--text-muted); }
    .ord-order-member {
      display: flex; align-items: center; gap: 4px; font-size: 12px;
      color: var(--text-secondary); margin-top: 2px;
    }
    .ord-member-avatar {
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--brand); color: #fff; font-size: 10px;
      display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .ord-member-name { color: var(--blue); cursor: pointer; }
    .ord-member-name:hover { text-decoration: underline; }
    .ord-source-tag {
      padding: 1px 6px; border-radius: 8px; font-size: 11px;
      background: #f0f0f0; color: var(--text-secondary);
    }
    /* 交易状态badge */
    .ord-status-badge {
      display: inline-flex; align-items: center; padding: 3px 8px;
      border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap;
    }
    .ord-status-badge.done { background: #eaf7ef; color: #3a9a6a; }
    .ord-status-badge.pending { background: #fff7e6; color: #e67e22; }
    .ord-status-badge.cancel { background: #f5f5f5; color: #999; }
    /* 实收款详情 */
    .ord-payment { display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
    .ord-payment-main { font-weight: 600; font-size: 14px; color: #e0524d; }
    .ord-payment-detail { font-size: 11px; color: var(--text-muted); }
    /* 操作列按钮 */
    .ord-action-btns { display: flex; justify-content: center; gap: 7px; }
    .ord-action-btn {
      height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12px; cursor: pointer;
      border: 1px solid rgba(48, 155, 106, .45); background: #fff; color: var(--brand);
    }
    .ord-action-btn:hover { border-color: var(--brand); background: var(--brand-light); color: var(--brand); }
    .ord-action-btn.primary { background: #fff; color: var(--brand); border-color: rgba(48, 155, 106, .55); }
    .ord-action-btn.primary:hover { background: var(--brand-light); }
    .ord-summary-row { background: #fff; }
    .ord-summary-cell {
      display: flex; align-items: center; gap: 14px; min-width: 300px;
    }
    .ord-row-toggle {
      width: 26px; height: 26px; border: 1px solid rgba(48, 155, 106, .55);
      border-radius: 4px; background: #fff; color: var(--brand); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
      transition: all .15s;
    }
    .ord-row-toggle:hover { background: var(--brand-light); border-color: var(--brand); }
    .ord-row-toggle svg { width: 14px; height: 14px; transition: transform .15s; }
    .ord-summary-row.expanded .ord-row-toggle svg { transform: rotate(180deg); }
    .ord-product-row { display: none; background: #fbfcfc; }
    .ord-product-row.is-visible { display: table-row; }
    .ord-product-row td { padding-top: 10px; padding-bottom: 10px; color: var(--text-secondary); }
    .ord-product-row td:first-child { border-bottom-color: transparent; }
    .ord-goods-cell { display: flex; align-items: center; gap: 10px; min-width: 250px; }
    .ord-goods-thumb {
      width: 42px; height: 42px; border-radius: 6px; border: 1px solid #e8edf0;
      background: #fff; display: inline-flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .ord-goods-name { font-size: 13px; color: var(--text-primary); line-height: 1.35; }
    .ord-goods-spec { margin-top: 3px; font-size: 12px; color: var(--text-muted); }
    .ord-money-red { color: #e0524d; font-weight: 600; }
    /* 底部分页栏 */
    .ord-bottom-bar {
      display: flex; align-items: center; padding: 11px 18px; background: #fff;
      border: 1px solid #edf0f2; border-top: 1px solid var(--border); gap: 10px; flex-shrink: 0;
      border-radius: 0 0 8px 8px;
    }
    .ord-bottom-left { display: flex; align-items: center; gap: 8px; }
    .ord-bottom-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

    /* ===== 售后管理 ===== */
    .aft-page {
      padding: 14px 16px 12px; display: flex; flex-direction: column; height: 100%;
      overflow: hidden; background: #f3f5f6;
    }
    .aft-main-tabs {
      display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0;
    }
    .aft-main-tab {
      min-width: 120px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
      padding: 0 22px; border: 1px solid #e5e9ed; border-bottom: none; border-radius: 8px 8px 0 0;
      background: #eef1f3; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer;
      position: relative;
    }
    .aft-main-tab.active { background: #fff; color: var(--text-primary); border-color: #fff; font-weight: 600; }
    .aft-main-tab.active::after {
      content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px;
      border-radius: 3px 3px 0 0; background: var(--brand);
    }
    .aft-filter-area {
      padding: 26px 20px 24px; background: #fff; border: 1px solid #edf0f2; border-bottom: none;
      border-radius: 0 8px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
    }
    .aft-search {
      height: 34px; width: 320px; display: flex; align-items: center; gap: 7px;
      border: 1px solid var(--border); border-radius: 17px; padding: 0 13px; color: var(--text-muted);
    }
    .aft-search input {
      border: none; outline: none; width: 260px; color: var(--text-primary); font-size: 13px; font-family: inherit;
    }
    .aft-date-range {
      height: 34px; min-width: 310px; display: flex; align-items: center; justify-content: space-between;
      border: 1px solid var(--border); border-radius: 17px; padding: 0 14px; color: var(--text-muted); font-size: 13px;
    }
    .aft-filter-btn {
      height: 34px; padding: 0 24px; border-radius: 17px; border: 1px solid var(--border);
      background: #fff; color: var(--text-secondary); font-size: 13px; cursor: pointer;
    }
    .aft-filter-btn.primary { border-color: var(--brand); background: linear-gradient(90deg, #9bd7b4, #72bf93); color: #fff; }
    .aft-filter-btn.outline { border-color: rgba(48, 155, 106, .65); color: var(--brand); }
    .aft-filter-btn:hover { border-color: var(--brand); color: var(--brand); }
    .aft-filter-btn.primary:hover { color: #fff; background: var(--brand); }
    .aft-body {
      background: #fff; border-left: 1px solid #edf0f2; border-right: 1px solid #edf0f2;
      flex-shrink: 0;
    }
    .aft-status-tabs {
      display: flex; align-items: flex-end; gap: 12px; padding: 34px 20px 0;
      border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border);
      overflow-x: auto;
    }
    .aft-status-tab {
      min-width: 102px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
      padding: 0 15px; background: #eef0f2; border: 1px solid #e5e9ed; border-bottom: none;
      border-radius: 6px 6px 0 0; color: var(--text-primary); font-size: 13px; cursor: pointer; position: relative;
      white-space: nowrap;
    }
    .aft-status-tab.active { background: #fff; font-weight: 600; }
    .aft-status-tab.active::after {
      content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px;
      border-radius: 3px 3px 0 0; background: var(--brand);
    }
    .aft-stat-row {
      display: flex; align-items: center; padding: 22px 20px 18px; font-size: 13px; color: var(--text-primary);
    }
    .aft-stat-row .amount { color: #f05b57; margin-left: 8px; }
    .aft-expand-btn {
      margin-left: auto; height: 34px; padding: 0 18px; border-radius: 17px;
      border: 1px solid rgba(48, 155, 106, .65); color: var(--brand); background: #fff; font-size: 13px; cursor: pointer;
    }
    .aft-expand-btn:hover { background: var(--brand-light); }
    .aft-table-wrap {
      flex: 1; overflow: auto; background: #fff; border-left: 1px solid #edf0f2; border-right: 1px solid #edf0f2;
    }
    .aft-table { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: 13px; }
    .aft-table thead { background: #f4f6f8; position: sticky; top: 0; z-index: 1; }
    .aft-table th {
      height: 50px; padding: 0 12px; text-align: center; color: var(--text-primary); font-weight: 600;
      border-bottom: 1px solid var(--border-light); white-space: nowrap;
    }
    .aft-table th:nth-child(2), .aft-table td:nth-child(2) { text-align: left; }
    .aft-table td {
      padding: 14px 12px; text-align: center; color: var(--text-primary); border-bottom: 1px solid var(--border-light);
      vertical-align: middle;
    }
    .aft-summary-row { background: #f4f6f8; }
    .aft-summary-row td { padding-top: 16px; padding-bottom: 16px; }
    .aft-summary-cell { display: flex; align-items: center; gap: 12px; min-width: 360px; }
    .aft-row-toggle {
      width: 20px; height: 20px; border-radius: 3px; border: 1px solid rgba(48, 155, 106, .65);
      color: var(--brand); background: #fff; display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0;
    }
    .aft-row-toggle svg { width: 13px; height: 13px; transition: transform .15s; }
    .aft-summary-row.expanded .aft-row-toggle svg { transform: rotate(180deg); }
    .aft-order-meta { display: grid; grid-template-columns: 250px 170px 100px 72px; align-items: center; column-gap: 16px; }
    .aft-order-lines { display: flex; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: 12px; }
    .aft-order-lines a { color: #6ca3ff; cursor: pointer; text-decoration: none; }
    .aft-submit { color: var(--text-secondary); white-space: nowrap; }
    .aft-member-pill {
      display: inline-flex; align-items: center; justify-content: center; min-width: 68px; height: 20px;
      padding: 0 9px; border: 1px solid rgba(48, 155, 106, .6); border-radius: 10px;
      color: var(--brand); background: #fff; font-size: 12px;
    }
    .aft-refunded { color: var(--brand); font-size: 12px; }
    .aft-success-badge {
      display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 12px;
      border-radius: 3px; background: #ecfff1; color: var(--brand); font-size: 12px; white-space: nowrap;
    }
    .aft-money-main { font-size: 18px; font-weight: 700; color: #34383d; }
    .aft-money-detail { margin-top: 4px; color: var(--text-muted); font-size: 12px; }
    .aft-action-btn {
      height: 26px; min-width: 58px; border-radius: 13px; border: 1px solid rgba(48, 155, 106, .65);
      background: #fff; color: var(--brand); font-size: 12px; cursor: pointer;
    }
    .aft-action-btn:hover { background: var(--brand-light); }
    .aft-product-row { display: none; background: #fff; }
    .aft-product-row.is-visible { display: table-row; }
    .aft-product-cell { display: flex; align-items: center; gap: 10px; min-width: 360px; padding-left: 0; }
    .aft-product-thumb {
      width: 44px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
      background: linear-gradient(135deg, #6b45c4, #ffd958); display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 22px;
    }
    .aft-product-name { font-size: 13px; color: var(--text-primary); line-height: 1.35; }
    .aft-product-spec { margin-top: 4px; color: var(--text-muted); font-size: 12px; }
    .aft-bottom-bar {
      display: flex; align-items: center; padding: 12px 18px; background: #fff; border: 1px solid #edf0f2;
      border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; flex-shrink: 0;
    }
    .aft-bottom-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

    /* ===== 售后单详情 ===== */
    .aft-det-page {
      height: 100%; overflow-y: auto; background: #f3f5f6; padding: 14px 16px 18px;
    }
    .aft-det-card {
      background: #fff; border-radius: 8px; padding: 18px 16px 22px;
      border: 1px solid #edf0f2; display: flex; flex-direction: column; gap: 24px;
    }
    .aft-det-section { display: flex; flex-direction: column; gap: 12px; }
    .aft-det-title {
      display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-primary);
    }
    .aft-det-title::before {
      content: ''; width: 4px; height: 18px; border-radius: 2px; background: var(--brand);
    }
    .aft-det-title a { margin-left: 4px; font-size: 12px; font-weight: 400; color: #6b8cff; cursor: pointer; }
    .aft-det-table {
      width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; color: var(--text-primary);
    }
    .aft-det-table th {
      height: 48px; padding: 0 14px; text-align: left; background: #f4f6f8; font-weight: 600;
      border: 1px solid #eef1f4; border-left: none; border-right: none; white-space: nowrap;
    }
    .aft-det-table td {
      height: 48px; padding: 0 14px; border-bottom: 1px solid var(--border-light); vertical-align: middle;
    }
    .aft-det-table.center th, .aft-det-table.center td { text-align: center; }
    .aft-det-table.center th:first-child, .aft-det-table.center td:first-child { text-align: left; }
    .aft-det-link { color: #5f94ff; text-decoration: none; cursor: pointer; }
    .aft-det-product { display: flex; align-items: center; gap: 10px; min-width: 180px; }
    .aft-det-product-thumb {
      width: 44px; height: 44px; border-radius: 5px; background: linear-gradient(135deg, #6b45c4, #ffd958);
      display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex-shrink: 0;
    }
    .aft-det-product-name {
      max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      color: var(--text-primary); margin-bottom: 4px;
    }
    .aft-det-product-spec { color: var(--text-muted); font-size: 12px; }
    .aft-det-total {
      margin-top: 10px; background: #f4f6f8; min-height: 92px; display: flex; align-items: flex-start;
      padding: 20px 40px; color: var(--text-primary);
    }
    .aft-det-total-left { display: flex; align-items: center; gap: 22px; font-size: 14px; }
    .aft-det-total-left strong { font-size: 15px; }
    .aft-det-total-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; width: auto; }
    .aft-det-total-line {
      display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 18px;
      font-size: 13px; position: relative;
    }
    .aft-det-total-line.refund { padding-bottom: 14px; }
    .aft-det-total-line strong { font-size: 14px; justify-self: end; }
    .aft-det-total-line .red { color: #f0524d; }
    .aft-det-refund-block { display: flex; align-items: center; justify-self: end; gap: 4px; }
    .aft-det-refund-breakdown {
      position: absolute; right: 0; top: calc(100% + 1px); text-align: right;
      font-size: 12px; font-weight: 400; color: var(--text-muted); line-height: 1.4; white-space: nowrap;
    }
    .aft-det-q {
      width: 15px; height: 15px; border-radius: 50%; background: #8d96a3; color: #fff;
      display: inline-flex; align-items: center; justify-content: center; font-size: 11px; margin-left: 4px;
    }
    .aft-det-info-wrap {
      background: #f4f6f8; padding: 22px 40px; display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 52px; min-height: 270px;
    }
    .aft-det-info-card { background: #fff; min-height: 230px; }
    .aft-det-info-title {
      height: 42px; display: flex; align-items: center; justify-content: center;
      border-bottom: 1px solid var(--border-light); font-size: 14px; font-weight: 700;
    }
    .aft-det-info-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
    .aft-det-info-row { display: flex; align-items: flex-start; gap: 14px; font-size: 13px; color: var(--text-secondary); }
    .aft-det-info-row .label { width: 68px; color: var(--text-muted); flex-shrink: 0; }
    .aft-det-info-row .blue { color: #5f94ff; margin-left: 10px; }
    .aft-det-buyer {
      display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 22px;
      color: var(--text-primary);
    }
    .aft-det-buyer-avatar {
      width: 22px; height: 22px; border-radius: 50%; background: #eaf7ef; display: inline-flex;
      align-items: center; justify-content: center; font-size: 12px;
    }
    .aft-log-box { background: #f4f6f8; padding: 24px 22px; border-radius: 4px; }
    .aft-log-item {
      position: relative; padding-left: 28px; padding-bottom: 24px; color: var(--text-secondary); font-size: 13px;
    }
    .aft-log-item:last-child { padding-bottom: 0; }
    .aft-log-item::before {
      content: ''; position: absolute; left: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
      background: var(--brand);
    }
    .aft-log-item::after {
      content: ''; position: absolute; left: 8px; top: 18px; bottom: 2px; width: 1px; background: var(--brand);
    }
    .aft-log-item:last-child::after { display: none; }
    .aft-log-main { color: var(--text-primary); font-weight: 600; margin-bottom: 10px; }
    .aft-log-main span { color: var(--text-muted); font-weight: 400; margin-left: 8px; }
    .aft-log-time { color: var(--text-muted); }

    /* ===== 订单详情页 ===== */
    .ord-det-page {
      display: flex; flex-direction: column; height: 100%; overflow-y: auto;
      background: #f4f6f8; padding: 0;
    }
    /* 顶部操作栏 */
    .ord-det-topbar {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .ord-det-back {
      display: flex; align-items: center; gap: 4px;
      padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
      font-size: 13px; color: var(--text-secondary); cursor: pointer; background: #fff;
    }
    .ord-det-back:hover { border-color: var(--brand); color: var(--brand); }
    .ord-det-topbar-btns { margin-left: auto; display: flex; gap: 8px; }
    .ord-det-topbtn {
      display: flex; align-items: center; gap: 4px;
      padding: 5px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
      font-size: 13px; color: var(--text-secondary); cursor: pointer; background: #fff;
    }
    .ord-det-topbtn:hover { border-color: var(--brand); color: var(--brand); }
    .ord-det-topbtn.danger { color: #e53935; border-color: #e5393540; }
    .ord-det-topbtn.danger:hover { background: #fef2f2; border-color: #e53935; }
    /* 主内容区 */
    .ord-det-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
    /* 信息卡通用 */
    .ord-det-card {
      background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
      overflow: hidden;
    }
    .ord-det-card-title {
      display: flex; align-items: center; gap: 6px;
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      font-size: 14px; font-weight: 600; color: var(--text-primary);
    }
    .ord-det-card-tip {
      display: flex; align-items: center; gap: 4px;
      font-size: 12px; font-weight: 400; color: var(--brand-dark);
    }
    .ord-det-card-tip svg { flex-shrink: 0; }
    .ord-det-card-title::before {
      content: ''; display: inline-block; width: 3px; height: 14px;
      background: var(--brand); border-radius: 2px;
    }
    /* 订单信息表格（4列） */
    .ord-det-info-grid {
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: 0;
    }
    .ord-det-info-cell {
      padding: 12px 16px; border-right: 1px solid var(--border);
    }
    .ord-det-info-cell:last-child { border-right: none; }
    .ord-det-info-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
    .ord-det-info-val { font-size: 13px; color: var(--text-primary); }
    .ord-det-status-done { color: #3a9a6a; font-weight: 500; }
    /* 商品信息表格 */
    .ord-det-goods-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .ord-det-goods-table th {
      padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 500;
      color: var(--text-secondary); background: #fafbfc;
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    .ord-det-goods-table td {
      padding: 10px 12px; vertical-align: middle;
      border-bottom: 1px solid var(--border-light); color: var(--text-primary);
    }
    .ord-det-goods-table tbody tr:hover { background: #f8faf9; }
    /* 商品图+名称 */
    .ord-det-goods-info { display: flex; align-items: center; gap: 10px; min-width: 200px; }
    .ord-det-goods-img {
      width: 44px; height: 44px; border-radius: 6px; object-fit: cover;
      background: #f0f0f0; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: #ccc; border: 1px solid var(--border-light);
    }
    .ord-det-goods-name { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
    .ord-det-goods-spec { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    /* 券来源标签 */
    .ord-det-coupon-tag {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 500;
      margin-left: 6px; vertical-align: middle;
    }
    .ord-det-coupon-tag.meituan { background: #ffe8e8; color: #e53935; }
    .ord-det-coupon-tag.douyin  { background: #1a1a1a; color: #fff; }
    .ord-det-coupon-tag::before {
      content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    }
    .ord-det-coupon-tag.meituan::before { background: #e53935; }
    .ord-det-coupon-tag.douyin::before  { background: #fff; }
    /* 服务信息表格 */
    .ord-det-service-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .ord-det-service-table th {
      padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 500;
      color: var(--text-secondary); background: #fafbfc;
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    .ord-det-service-table td {
      padding: 10px 12px; vertical-align: middle;
      border-bottom: 1px solid var(--border-light); color: var(--text-primary);
    }
    .ord-det-service-table tbody tr:hover { background: #f8faf9; }
    .ord-det-service-info { display: flex; align-items: center; gap: 10px; min-width: 200px; }
    .ord-det-service-img {
      width: 44px; height: 44px; border-radius: 6px; object-fit: cover;
      background: #f5f5f5; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: #ccc; border: 1px solid var(--border-light);
    }
    .ord-det-service-name { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
    .ord-det-service-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    /* 券核销分组 */
    .ord-det-group-head {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; margin-bottom: 0;
      background: #fff8f0; border-radius: 6px 6px 0 0;
      font-size: 13px; font-weight: 500; color: #e53935;
      border: 1px solid #ffe0b2; border-bottom: none;
    }
    .ord-det-group-head svg { flex-shrink: 0; }
    .ord-det-group-head + .ord-det-goods-table,
    .ord-det-group-head + .ord-det-service-table {
      border-radius: 0 0 6px 6px;
    }
    .ord-det-group-divider {
      height: 10px;
    }
    .ord-det-voucher-subtotal { color: var(--brand); font-weight: 600; }
    .ord-det-voucher-note,
    .ord-det-payment-note {
      display: block; margin-top: 2px; font-size: 11px; line-height: 1.35;
      color: #d84941; white-space: nowrap;
    }
    .ord-det-voucher-total {
      display: flex; justify-content: flex-end; padding: 10px 12px;
      background: #fff8f0; border-top: 1px solid #ffe0b2; border-radius: 0 0 6px 6px;
      font-size: 13px; color: #e53935; font-weight: 500;
    }
    /* 金额高亮 */
    .ord-det-price-red { color: #e53935; font-weight: 500; }
    /* 汇总行 */
    .ord-det-summary {
      display: flex; align-items: flex-start; padding: 12px 16px;
      border-top: 1px solid var(--border); background: #fafbfc;
    }
    .ord-det-summary-left { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
    .ord-det-summary-right {
      margin-left: auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
      min-width: 244px; font-size: 13px;
    }
    .ord-det-sum-row {
      display: grid; grid-template-columns: 108px 104px 16px;
      align-items: start; gap: 8px; white-space: nowrap;
    }
    .ord-det-sum-label { color: var(--text-secondary); text-align: right; }
    .ord-det-sum-val { color: var(--text-primary); text-align: right; }
    .ord-det-sum-val.red { color: #e53935; font-weight: 600; font-size: 14px; }
    .ord-det-meituan-record { display: flex; align-items: flex-start; color: var(--text-muted); }
    .ord-det-meituan-record-main { display: flex; flex-direction: column; color: var(--text-primary); }
    .ord-det-meituan-record-price { margin-top: 2px; color: #e53935; font-size: 12px; font-weight: 600; }
    .ord-det-meituan-record-note { margin-top: 1px; color: var(--text-muted); font-size: 11px; }
    .ord-det-amount-stack { display: flex; flex-direction: column; align-items: flex-end; }
    .ord-det-sum-row .ord-det-amount-stack { width: 104px; }
    .ord-det-payment-detail { align-items: flex-start; }
    .ord-det-paid-zero { color: #e53935; font-weight: 600; }
    .ord-det-meituan-payment { color: #e53935; font-weight: 500; }
    /* 4栏信息卡（配送/支付/买家/备注） */
    .ord-det-info4 {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    }
    .ord-det-info4-col {
      padding: 16px; border-right: 1px solid var(--border);
    }
    .ord-det-info4-col:last-child { border-right: none; }
    .ord-det-info4-title {
      font-size: 13px; font-weight: 600; color: var(--text-primary);
      margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light);
    }
    .ord-det-info4-row { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
    .ord-det-info4-item { display: flex; align-items: flex-start; gap: 6px; }
    .ord-det-info4-key { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
    .ord-det-info4-value { color: var(--text-primary); }
    /* 底部操作按钮 */
    .ord-det-footer {
      display: flex; justify-content: center; gap: 10px; padding: 20px;
      background: #fff; border-top: 1px solid var(--border); flex-shrink: 0; margin-top: 4px;
    }
    .ord-det-print-btn,
    .ord-det-return-btn {
      min-width: 104px; padding: 7px 22px; border-radius: var(--radius-sm);
      font-size: 13px; cursor: pointer;
    }
    .ord-det-print-btn { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
    .ord-det-print-btn:hover { background: var(--brand-dark); }
    .ord-det-return-btn { background: #fff; color: #e05252; border: 1px solid #e9aaaa; }
    .ord-det-return-btn:hover { background: #fff5f5; border-color: #e05252; }

    /* 订单详情 - 退货/退单弹窗 */
    .ord-return-overlay {
      position: fixed; inset: 0; z-index: 10110; display: flex; align-items: center; justify-content: center;
      padding: 18px; background: rgba(28, 38, 48, .34);
    }
    .ord-return-modal {
      width: min(820px, calc(100vw - 36px)); max-height: calc(100vh - 36px); overflow: auto;
      background: #fff; border-radius: 8px; box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
      color: var(--text-primary); font-size: 12px;
    }
    .ord-return-modal.order { width: min(520px, calc(100vw - 36px)); }
    .ord-return-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 18px 12px; border-bottom: 1px solid var(--border-light);
    }
    .ord-return-title { font-size: 17px; font-weight: 600; line-height: 1; }
    .ord-return-close {
      width: 26px; height: 26px; padding: 0; border: 0; background: transparent;
      color: #9aa1a8; font-size: 23px; line-height: 24px; cursor: pointer;
    }
    .ord-return-close:hover { color: var(--text-primary); }
    .ord-return-body { padding: 14px 18px 16px; }
    .ord-return-table-wrap { overflow-x: auto; border: 1px solid var(--border-light); border-radius: 5px; }
    .ord-return-table { width: 100%; min-width: 750px; border-collapse: collapse; table-layout: fixed; }
    .ord-return-table th {
      padding: 8px 7px; background: #f6f7fa; color: var(--text-secondary);
      font-size: 11px; font-weight: 500; text-align: left; white-space: nowrap;
    }
    .ord-return-table td { padding: 9px 7px; border-top: 1px solid var(--border-light); vertical-align: middle; }
    .ord-return-table th:first-child { width: 190px; }
    .ord-return-table th:nth-child(2) { width: 58px; }
    .ord-return-table th:nth-child(3),
    .ord-return-table th:nth-child(4),
    .ord-return-table th:nth-child(5),
    .ord-return-table th:nth-child(6) { width: 76px; }
    .ord-return-table th:nth-child(7),
    .ord-return-table th:nth-child(8) { width: 90px; }
    .ord-return-product { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .ord-return-product-icon {
      width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--border-light); border-radius: 4px; background: #f5f6f7; font-size: 16px;
    }
    .ord-return-product-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
    .ord-return-product-sub { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
    .ord-return-input,
    .ord-return-select {
      width: 100%; height: 28px; box-sizing: border-box; border: 1px solid #dfe3e6; border-radius: 14px;
      background: #fff; color: var(--text-primary); font-size: 11px; outline: none;
    }
    .ord-return-input { padding: 0 9px; }
    .ord-return-select { padding: 0 22px 0 8px; cursor: pointer; }
    .ord-return-input:focus,
    .ord-return-select:focus,
    .ord-return-remark textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(82, 181, 132, .11); }
    .ord-return-remark { margin-top: 12px; }
    .ord-return-remark label { display: flex; align-items: center; gap: 3px; margin-bottom: 6px; font-weight: 500; }
    .ord-return-required { color: #e05252; }
    .ord-return-remark textarea {
      display: block; width: 100%; min-height: 58px; resize: vertical; box-sizing: border-box;
      padding: 8px 10px; border: 1px solid #dfe3e6; border-radius: 5px;
      color: var(--text-primary); font: inherit; line-height: 1.5; outline: none;
    }
    .ord-return-actions { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
    .ord-return-btn {
      min-width: 100px; height: 32px; padding: 0 20px; border-radius: 17px;
      border: 1px solid #d7dcdf; background: #fff; color: var(--text-secondary);
      font-size: 12px; cursor: pointer;
    }
    .ord-return-btn.primary { border-color: var(--brand); background: var(--brand); color: #fff; }
    .ord-return-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
    .ord-return-btn.primary:hover { background: var(--brand-dark); color: #fff; }
    .ord-order-return-form { display: flex; flex-direction: column; gap: 16px; padding: 2px 8px 0; }
    .ord-order-return-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 10px; }
    .ord-order-return-label { font-size: 13px; font-weight: 600; }
    .ord-order-return-options { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
    .ord-order-return-option { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
    .ord-order-return-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
    .ord-order-return-amount { color: #e53935; font-size: 17px; font-weight: 600; }
    .ord-order-return-form .ord-return-remark { margin-top: -2px; }
    .ord-order-return-tip {
      padding: 10px 12px; border-radius: 4px; background: #f7f8f9;
      color: var(--text-secondary); font-size: 12px; line-height: 1.75;
    }
    @media (max-width: 640px) {
      .ord-return-overlay { align-items: flex-start; padding: 12px; }
      .ord-return-modal,
      .ord-return-modal.order { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
      .ord-order-return-row { grid-template-columns: 78px 1fr; }
    }

    /* ===== 营业报表 - 营收概况 ===== */
    #page-report-sales.page.active { height: 100%; }
    .report-page { display: flex; flex-direction: column; height: 100%; overflow-y: auto; background: #f5f6f9; }
    .report-container { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 100%; box-sizing: border-box; }
    /* Tab栏 */
    .report-tabs { display: flex; gap: 12px; width: fit-content; }
    .report-tab { position: relative; padding: 12px 22px 13px; border-radius: 8px 8px 0 0; font-size: 15px; color: var(--text-primary); cursor: pointer; border: none; background: #eef0f4; }
    .report-tab:hover { color: var(--text-primary); }
    .report-tab.active { background: #fff; color: var(--text-primary); font-weight: 600; }
    .report-tab.active::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px; background: var(--brand); }
    /* 头部栏：大数字 + 日期 */
    .report-header-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; background: #fff; border-radius: 0 10px 10px 10px; padding: 18px 24px; box-shadow: 0 1px 2px rgba(18, 31, 56, .04); }
    .report-rev-total { position: relative; display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--text-primary); }
    .report-rev-total strong { font-size: 30px; color: var(--text-primary); font-weight: 800; letter-spacing: 0; }
    .report-help-btn { width: 19px; height: 19px; border-radius: 50%; border: none; background: #8c939d; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
    .report-help-btn:hover { background: var(--brand); }
    .report-help-pop {
      display: none; position: absolute; left: 0; top: 40px; width: 420px; z-index: 20;
      background: #fff; border: 1px solid var(--border); border-radius: 8px;
      padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
      font-size: 13px; line-height: 1.7; color: var(--text-secondary);
    }
    .report-help-pop.show { display: block; }
    .report-date-bar { display: flex; align-items: center; gap: 14px; }
    .report-date-pills { display: flex; gap: 14px; background: transparent; padding: 0; border-radius: 0; }
    .report-date-pill { padding: 7px 16px; border-radius: 18px; font-size: 14px; color: var(--text-secondary); cursor: pointer; border: 1px solid var(--border); background: #fff; }
    .report-date-pill:hover { color: var(--text-primary); }
    .report-date-pill.active { background: #fff; color: var(--brand-dark); border-color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
    .report-date-range { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 0 12px; height: 36px; }
    .report-date-input { width: 112px; padding: 0; border: none; font-size: 14px; color: var(--text-primary); outline: none; background: transparent; }
    .report-date-sep { color: var(--text-muted); font-size: 14px; }
    .report-btn-query { height: 36px; padding: 0 28px; background: var(--brand); color: #fff; border: none; border-radius: 18px; font-size: 14px; cursor: pointer; }
    .report-btn-query:hover { background: var(--brand-dark); }
    /* 指标卡片 */
    .report-rev-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; background: #fff; border-radius: 10px; padding: 14px 16px; }
    .report-rev-card { background: #fafbfc; border-radius: 7px; border: 1px solid var(--border-light); padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 14px; min-height: 170px; }
    .report-rev-card-title { font-size: 16px; color: var(--text-primary); text-align: center; font-weight: 600; }
    .report-rev-card-num { font-size: 24px; font-weight: 800; color: var(--text-primary); text-align: center; }
    .report-rev-card-rows { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border-light); padding-top: 14px; }
    .report-rev-card-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
    .report-rev-card-row .label { color: var(--text-muted); }
    .report-rev-card-row .value { color: var(--text-primary); font-weight: 600; }
    /* 底部两栏 */
    .report-rev-bottom { display: grid; grid-template-columns: minmax(420px, .72fr) minmax(680px, 1.48fr); gap: 14px; flex: 1; min-height: 450px; align-items: stretch; }
    .report-rev-section { background: #fff; border-radius: 8px; border: none; padding: 18px 18px; display: flex; flex-direction: column; min-height: 0; box-shadow: 0 1px 2px rgba(18, 31, 56, .04); }
    .report-rev-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
    .report-rev-section-title::before { content: ''; display: inline-block; width: 3px; height: 18px; background: var(--brand); border-radius: 2px; }
    /* 环形图 */
    .report-rev-chart-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: 1; min-height: 0; }
    .report-rev-chart-area { position: relative; width: 300px; height: 220px; display: flex; align-items: center; justify-content: center; }
    .report-rev-chart { width: 160px; height: 160px; flex-shrink: 0; }
    /* 环形图外围标签 */
    .report-rev-chart-label { position: absolute; font-size: 13px; color: var(--text-primary); white-space: nowrap; }
    .report-rev-chart-label span { color: var(--text-secondary); }
    /* 图例放在下方 */
    .report-rev-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; }
    .report-rev-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
    .report-rev-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .report-rev-legend-name { color: var(--text-secondary); }
    /* 渠道表格 */
    .report-rev-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .report-rev-table thead th { padding: 8px 6px; text-align: center; color: var(--text-secondary); font-weight: 500; background: #f8f9fb; border: 1px solid var(--border-light); }
    .report-rev-table thead th.group { background: #f0f2f5; font-weight: 600; }
    .report-rev-table tbody td { padding: 10px 6px; text-align: center; border: 1px solid var(--border-light); color: var(--text-primary); }
    .report-rev-table tbody tr:hover { background: #f8faf9; }
    .report-rev-table .col-type { text-align: left; padding-left: 12px; color: var(--text-secondary); }
    .report-rev-table .col-num { font-weight: 600; }

    /* ===== 营业报表 - 营业分析 ===== */
    .report-tab-panel { display: none; }
    .report-tab-panel.active { display: block; }
    #page-report-sales .report-tab-panel.active {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    /* 营业分析头部 */
    .report-ana-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; background: #fff; border-radius: 0 10px 10px 10px; padding: 18px 24px; box-shadow: 0 1px 2px rgba(18, 31, 56, .04); }
    .report-ana-total { position: relative; display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--text-primary); }
    .report-ana-total strong { font-size: 30px; color: var(--text-primary); font-weight: 800; letter-spacing: 0; }
    /* 5个指标卡片 */
    .report-ana-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; background: #fff; border-radius: 10px; padding: 14px 16px 18px; }
    .report-ana-card { background: #fafbfc; border-radius: 7px; border: 1px solid var(--border-light); padding: 18px 22px 16px; display: flex; flex-direction: column; min-height: 258px; }
    .report-ana-card.highlight { border-color: var(--brand); background: #fff; box-shadow: inset 0 -3px 0 var(--brand); }
    .report-ana-card-title { font-size: 16px; font-weight: 700; color: var(--text-primary); text-align: center; padding-bottom: 14px; border-bottom: 1px dashed var(--border-light); margin-bottom: 14px; }
    .report-ana-card-rows { display: flex; flex-direction: column; gap: 12px; flex: 1; justify-content: center; }
    .report-ana-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; }
    .report-ana-card-row .label { min-width: 0; }
    .report-ana-card-row .value { flex-shrink: 0; }
    .report-ana-card-row.summary-row .label { font-weight: 700; color: var(--text-primary); font-size: 15px; }
    .report-ana-card-row.summary-row .value { font-weight: 800; font-size: 17px; }
    .report-ana-card-row.sub-row { font-size: 14px; }
    .report-ana-card-row.sub-row .label { padding-left: 20px; }
    .report-ana-card-row .label { color: var(--text-secondary); }
    .report-ana-card-row .value { color: var(--text-primary); font-weight: 700; }
    .report-ana-card-row .sub { color: var(--text-muted); font-size: 12px; margin-left: 4px; }
    .report-ana-card-row .sub .s-muted { color: var(--text-muted); }
    .report-ana-info-icon { display: inline-flex; width: 13px; height: 13px; background: #b0b8c4; color: #fff; border-radius: 50%; font-size: 10px; align-items: center; justify-content: center; margin-left: 2px; cursor: help; }
    /* 底部两栏 */
    .report-ana-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 360px; }
    .report-ana-section { background: #fff; border-radius: 8px; border: none; padding: 18px 18px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(18, 31, 56, .04); }
    .report-ana-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
    .report-ana-section-title::before { content: ''; display: inline-block; width: 3px; height: 18px; background: var(--brand); border-radius: 2px; }
    /* 左侧两个小卡片 */
    .report-ana-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: 100%; }
    .report-ana-inner-card { background: #fff; border-radius: 7px; border: 1px solid var(--border-light); padding: 18px 22px; display: flex; flex-direction: column; }
    .report-ana-inner-title { font-size: 16px; font-weight: 700; color: var(--text-primary); text-align: center; padding-bottom: 14px; border-bottom: 1px dashed var(--border-light); margin-bottom: 14px; }
    .report-ana-inner-rows { display: flex; flex-direction: column; gap: 12px; }
    .report-ana-inner-row { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
    .report-ana-inner-row .label { color: var(--text-secondary); }
    .report-ana-inner-row .value { color: var(--text-primary); font-weight: 700; }
    .report-ana-inner-row .unit { color: var(--text-muted); font-size: 13px; font-weight: 400; margin-left: 2px; }
    /* 右侧柱状图 */
    .report-ana-chart-area { display: flex; flex-direction: column; gap: 16px; flex: 1; justify-content: center; }
    .report-ana-chart-legend { display: flex; justify-content: flex-end; gap: 18px; font-size: 14px; }
    .report-ana-chart-legend-item { display: flex; align-items: center; gap: 4px; }
    .report-ana-chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
    .report-ana-bars { display: flex; justify-content: space-around; align-items: flex-end; height: 250px; padding: 0 18px; border-bottom: 1px solid var(--border-light); }
    .report-ana-bar-group { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
    .report-ana-bar-pair { display: flex; align-items: flex-end; gap: 8px; height: 170px; }
    .report-ana-bar { width: 30px; border-radius: 4px 4px 0 0; min-height: 2px; }
    .report-ana-bar-val { font-size: 14px; color: var(--text-muted); }
    .report-ana-bar-label { font-size: 15px; color: var(--text-secondary); }

    /* ===== 商品管理 ===== */
    #page-product.page.active { height: 100%; }
    .pm-page {
      height: 100%;
      padding: 16px;
      background: #f4f6fa;
      overflow: hidden;
      color: #303844;
    }
    .pm-shell {
      height: 100%;
      min-width: 980px;
      display: grid;
      grid-template-columns: 212px minmax(0, 1fr);
      gap: 12px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(24, 38, 66, .04);
      overflow: hidden;
      border: 1px solid #eef1f5;
    }
    .pm-category-panel {
      border-right: 1px solid #edf0f3;
      display: flex;
      flex-direction: column;
      min-width: 0;
      background: #fff;
    }
    .pm-category-actions {
      height: 80px;
      padding: 18px 12px;
      display: flex;
      gap: 8px;
      align-items: center;
      border-bottom: 1px solid #edf0f3;
    }
    .pm-btn {
      height: 34px;
      border-radius: 17px;
      padding: 0 16px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    .pm-btn.primary { background: #62c38f; color: #fff; box-shadow: 0 3px 10px rgba(76,175,130,.16); }
    .pm-btn.outline { background: #fff; color: #8b95a2; border-color: #dfe4ea; }
    .pm-category-list {
      padding: 20px 0;
      overflow: visible;
      flex: 1;
      position: relative;
    }
    .pm-category-title {
      height: 32px;
      display: flex;
      align-items: center;
      padding: 0 24px;
      color: #52b983;
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .pm-cat-item {
      height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 24px;
      color: #4f5966;
      font-size: 14px;
      cursor: pointer;
    }
    .pm-cat-item:hover { background: #f7faf8; color: #2f9b68; }
    .pm-cat-item.active { background: #f2fbf6; color: #2f9b68; font-weight: 700; }
    .pm-cat-arrow {
      width: 12px;
      color: #56606d;
      font-size: 12px;
      transform: translateY(-1px);
    }
    .pm-cat-group { position: relative; }
    .pm-cat-parent {
      height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 24px;
      color: #4f5966;
      font-size: 14px;
      cursor: pointer;
    }
    .pm-cat-parent:hover { background: #f7faf8; color: #2f9b68; }
    .pm-cat-parent .pm-cat-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform .15s ease;
    }
    .pm-cat-group.open .pm-cat-parent .pm-cat-arrow { transform: rotate(90deg); }
    .pm-sub-list { display: none; padding: 2px 0 10px; }
    .pm-cat-group.open .pm-sub-list { display: block; }
    .pm-sub-item {
      height: 40px;
      margin: 4px 0;
      padding: 0 30px 0 58px;
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      color: #1f2937;
      font-size: 14px;
      cursor: pointer;
    }
    .pm-sub-item:hover { background: #f7faf8; }
    .pm-sub-item.active {
      color: #40a873;
      font-weight: 800;
      background: #f2fbf6;
    }
    .pm-sub-drag {
      width: 14px;
      color: #a5adb8;
      font-size: 18px;
      line-height: 1;
      letter-spacing: -4px;
    }
    .pm-sub-spacer { width: 14px; flex-shrink: 0; }
    .pm-sub-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pm-sub-more {
      position: absolute;
      right: 0;
      top: 6px;
      width: 24px;
      height: 28px;
      border: none;
      border-radius: 14px 0 0 14px;
      background: #58bd8a;
      color: #fff;
      font-size: 18px;
      line-height: 28px;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0;
      box-shadow: 0 6px 16px rgba(64,168,115,.18);
    }
    .pm-sub-item.active .pm-sub-more,
    .pm-sub-item:hover .pm-sub-more,
    .pm-sub-more.show { display: flex; }
    .pm-cat-menu {
      position: absolute;
      right: -22px;
      top: 39px;
      width: 96px;
      padding: 10px 0;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(15,23,42,.16);
      border: 1px solid #eef1f5;
      z-index: 20;
      display: none;
    }
    .pm-cat-menu.show { display: block; }
    .pm-cat-menu::before {
      content: '';
      position: absolute;
      right: 34px;
      top: -8px;
      width: 16px;
      height: 16px;
      background: #fff;
      border-left: 1px solid #eef1f5;
      border-top: 1px solid #eef1f5;
      transform: rotate(45deg);
    }
    .pm-cat-menu button {
      width: 100%;
      height: 38px;
      border: none;
      background: transparent;
      color: #4b5563;
      font-size: 14px;
      text-align: center;
    }
    .pm-cat-menu button:hover { color: #40a873; background: #f7faf8; }
    .pm-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      background: #fff;
      overflow: hidden;
      position: relative;
    }
    .pm-toolbar {
      height: 80px;
      padding: 18px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid #edf0f3;
      flex-shrink: 0;
    }
    .pm-search {
      width: 320px;
      height: 38px;
      border: 1px solid #dfe4ea;
      border-radius: 21px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 15px;
      color: #9aa3af;
      background: #fff;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, .02);
    }
    .pm-search input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      color: #374151;
      font-size: 14px;
      background: transparent;
    }
    .pm-search input::placeholder { color: #9aa3af; }
    .pm-toolbar-spacer { flex: 1; }
    .pm-table-wrap {
      flex: 1;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      position: relative;
      background: #fff;
    }
    .pm-table {
      width: 100%;
      min-width: 0;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 13px;
    }
    .pm-table col.sel { width: 3.5%; }
    .pm-table col.goods { width: 27%; }
    .pm-table col.brand { width: 9%; }
    .pm-table col.cost { width: 9%; }
    .pm-table col.price { width: 7.5%; }
    .pm-table col.member { width: 7.5%; }
    .pm-table col.stock { width: 9%; }
    .pm-table col.sales { width: 6%; }
    .pm-table col.ops { width: 21.5%; }
    .pm-table thead th {
      height: 56px;
      background: #f3f6fa;
      color: #333b47;
      font-size: 13px;
      font-weight: 800;
      text-align: center;
      border-bottom: 1px solid #edf0f3;
      white-space: nowrap;
    }
    .pm-table thead th.goods-head { text-align: left; }
    .pm-table tbody tr { height: 104px; border-bottom: 1px solid #eef1f4; }
    .pm-table tbody tr:nth-child(even) { background: #f5f7fa; }
    .pm-table tbody tr:hover { background: #f0faf5; }
    .pm-table td {
      padding: 12px 8px;
      color: #4b5563;
      vertical-align: middle;
      text-align: center;
    }
    .pm-table td.pm-cell-goods { text-align: left; }
    .pm-table td.pm-cell-ops { padding-left: 8px; padding-right: 10px; }
    .pm-checkbox {
      width: 16px;
      height: 16px;
      border: 1px solid #d6dce4;
      border-radius: 2px;
      display: inline-block;
      background: #fff;
      vertical-align: middle;
    }
    .pm-goods {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .pm-thumb {
      width: 54px;
      height: 54px;
      border-radius: 2px;
      border: 1px solid #e5e9ee;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      line-height: 1.15;
    }
    .pm-thumb.ai { background: linear-gradient(135deg, #0f7cff, #2ed0a8); }
    .pm-thumb.oil { background: linear-gradient(135deg, #fff7d8, #f6c623); color: #7b5a00; }
    .pm-thumb.feed { background: linear-gradient(135deg, #f8e3a2, #3bb58d); color: #244234; }
    .pm-thumb.cat { background: linear-gradient(135deg, #1e8eea, #f6f0dc); color: #0d4c7d; }
    .pm-thumb.can { background: linear-gradient(135deg, #7427b8, #f4c23a); }
    .pm-thumb.duck { background: linear-gradient(135deg, #e7f5de, #8eb36b); color: #2b4b25; }
    .pm-goods-info { min-width: 0; }
    .pm-goods-title {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #5aa7ff;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .pm-goods-tag {
      height: 20px;
      padding: 0 6px;
      border-radius: 4px;
      background: #ffe9e9;
      color: #ff6b6b;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 700;
    }
    .pm-goods-meta {
      margin-top: 6px;
      color: #9aa3af;
      font-size: 12px;
      line-height: 1.5;
    }
    .pm-stock-head {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .pm-sort {
      display: inline-flex;
      flex-direction: column;
      gap: 2px;
      color: #b9c0ca;
      font-size: 10px;
      line-height: 8px;
    }
    .pm-op-list {
      display: flex;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
    }
    .pm-op {
      height: 27px;
      min-width: 44px;
      padding: 0 8px;
      border-radius: 15px;
      border: 1px solid #55bd83;
      color: #40a873;
      background: #fff;
      font-size: 12px;
      font-weight: 700;
    }
    .pm-op:hover { background: #f0faf5; }
    .pm-op.danger {
      border-color: #dfe4ea;
      color: #4f5966;
    }
    .pm-op.danger:hover { background: #f7f8fa; }
    .pm-footer {
      height: 70px;
      border-top: 1px solid #edf0f3;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 14px;
      flex-shrink: 0;
      background: #fff;
    }
    .pm-footer-left {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #4f5966;
      font-size: 14px;
    }
    .pm-selected { color: #9aa3af; }
    .pm-selected strong { color: #4f5966; font-weight: 700; }
    .pm-batch {
      height: 36px;
      padding: 0 18px;
      border-radius: 18px;
      border: 1px solid #dfe4ea;
      color: #4f5966;
      background: #fff;
      font-size: 14px;
      font-weight: 700;
    }
    .pm-footer-spacer { flex: 1; }
    .pm-total { color: #4f5966; font-size: 14px; }
    .pm-total strong { font-size: 16px; font-weight: 800; }
    .pm-page-btn,
    .pm-page-num,
    .pm-page-size,
    .pm-go-input,
    .pm-go-btn {
      height: 36px;
      border: 1px solid #dfe4ea;
      background: #fff;
      color: #4f5966;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
    .pm-page-btn,
    .pm-page-num { width: 36px; border-radius: 50%; }
    .pm-page-num.active {
      background: #62c38f;
      color: #fff;
      border-color: #62c38f;
      font-weight: 800;
    }
    .pm-page-size {
      width: 96px;
      border-radius: 18px;
      gap: 5px;
    }
    .pm-go-text { color: #4f5966; font-size: 14px; }
    .pm-go-input {
      width: 70px;
      border-radius: 18px;
      font-weight: 700;
    }
    .pm-go-btn {
      width: 38px;
      border-radius: 19px;
      color: #40a873;
      font-weight: 800;
    }
    .pm-cat-modal-mask {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .28);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .pm-cat-modal {
      width: 680px;
      background: #fff;
      border-radius: 2px;
      box-shadow: 0 18px 50px rgba(15,23,42,.2);
      overflow: hidden;
    }
    .pm-cat-modal-head {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #eef1f5;
      color: #111827;
      font-size: 22px;
      font-weight: 800;
    }
    .pm-cat-modal-body {
      padding: 34px 56px 30px;
    }
    .pm-cat-modal-parent {
      margin-bottom: 26px;
      color: #1f2937;
      font-size: 18px;
      line-height: 24px;
    }
    .pm-cat-field {
      display: grid;
      grid-template-columns: 116px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
    }
    .pm-cat-label {
      color: #1f2937;
      font-size: 18px;
      white-space: nowrap;
    }
    .pm-cat-label .required {
      color: #ff4d4f;
      margin-right: 8px;
    }
    .pm-cat-input-wrap {
      position: relative;
      height: 46px;
      border: 1px solid #66bd8e;
      border-radius: 23px;
      display: flex;
      align-items: center;
      background: #fff;
    }
    .pm-cat-input-wrap input {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: transparent;
      padding: 0 44px 0 18px;
      color: #1f2937;
      font-size: 18px;
    }
    .pm-cat-input-wrap input::placeholder { color: #9aa3af; }
    .pm-cat-input-clear {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      border: none;
      border-radius: 50%;
      background: #b8bec5;
      color: #fff;
      font-size: 14px;
      line-height: 18px;
      padding: 0;
    }
    .pm-cat-modal-actions {
      padding: 0 80px 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 88px;
    }
    .pm-cat-modal-btn {
      height: 48px;
      border-radius: 24px;
      border: 1px solid #dfe4ea;
      background: #fff;
      color: #1f2937;
      font-size: 20px;
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(15,23,42,.04);
    }
    .pm-cat-modal-btn.primary {
      border-color: #5abc85;
      background: #5abc85;
      color: #fff;
      box-shadow: 0 6px 14px rgba(64,168,115,.18);
    }

    /* ===== 商品管理 - 新增商品 ===== */
    #page-product-create.active { min-height: 100%; }
    .pc-page {
      min-width: 860px;
      min-height: calc(100vh - 48px);
      padding: 14px 14px 22px;
      background: #f3f5f8;
      color: #30363f;
    }
    .pc-section {
      margin-bottom: 12px;
      padding: 22px 78px 24px;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(30, 42, 62, .025);
    }
    .pc-section-title {
      margin: 0;
      color: #20252d;
      font-size: 16px;
      font-weight: 800;
      line-height: 24px;
    }
    .pc-field {
      width: 620px;
      margin-top: 16px;
      display: grid;
      grid-template-columns: 96px 352px minmax(0, 1fr);
      align-items: center;
      column-gap: 10px;
    }
    .pc-field:first-of-type { margin-top: 22px; }
    .pc-label {
      color: #30363f;
      font-size: 14px;
      line-height: 36px;
      text-align: right;
      white-space: nowrap;
    }
    .pc-required {
      margin-right: 8px;
      color: #ef625c;
    }
    .pc-control {
      width: 352px;
      height: 36px;
      padding: 0 14px;
      border: 1px solid #dfe3e8;
      border-radius: 19px;
      outline: none;
      background: #fff;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
      transition: border-color .15s, box-shadow .15s;
    }
    select.pc-control {
      padding-right: 34px;
      color: #606976;
      cursor: pointer;
    }
    .pc-control::placeholder,
    .pc-control input::placeholder,
    .pc-textarea-wrap textarea::placeholder,
    .pc-setting-panel input::placeholder { color: #b2b8c0; }
    .pc-control:focus,
    .pc-control:focus-within,
    .pc-textarea-wrap:focus-within,
    .pc-setting-panel input:focus,
    .pc-setting-input-addon:focus-within {
      border-color: #66bd8e;
      box-shadow: 0 0 0 2px rgba(82, 183, 136, .08);
    }
    .pc-control.disabled,
    .pc-control:disabled {
      border-color: #dde1e5;
      background: #f3f3f3;
      color: #b7bbc1;
      cursor: not-allowed;
    }
    .pc-inline-btn {
      width: 76px;
      height: 34px;
      border-radius: 18px;
      background: #73c397;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 3px 8px rgba(69, 170, 117, .14);
    }
    .pc-inline-btn:hover { background: #62b687; }
    .pc-control-addon {
      padding: 0;
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }
    .pc-control-addon input {
      min-width: 0;
      flex: 1;
      padding: 0 14px;
      border: 0;
      outline: 0;
      background: transparent;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
    }
    .pc-control-addon > span {
      width: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #dfe3e8;
      color: #5f6873;
      font-size: 13px;
      flex-shrink: 0;
    }
    .pc-field-top { align-items: start; }
    .pc-field-top .pc-label { padding-top: 1px; }
    .pc-textarea-wrap {
      position: relative;
      width: 352px;
      height: 82px;
      border: 1px solid #dfe3e8;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }
    .pc-textarea-wrap textarea {
      width: 100%;
      height: 100%;
      padding: 10px 13px 22px;
      border: 0;
      outline: 0;
      resize: none;
      background: transparent;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
      line-height: 20px;
    }
    .pc-textarea-count {
      position: absolute;
      right: 10px;
      bottom: 6px;
      color: #a9afb7;
      font-size: 12px;
    }
    .pc-image-section { padding-bottom: 30px; }
    .pc-upload-row {
      margin-top: 26px;
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      align-items: start;
      column-gap: 10px;
    }
    .pc-upload-row.detail-row { margin-top: 28px; }
    .pc-upload-label {
      color: #30363f;
      font-size: 14px;
      line-height: 20px;
      text-align: right;
    }
    .pc-upload-box {
      position: relative;
      width: 92px;
      height: 92px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      overflow: hidden;
      border: 1px dashed #d9dee4;
      background: #fff;
      color: #414852;
      cursor: pointer;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .pc-upload-box:hover { border-color: #6cbd91; background-color: #f8fcfa; }
    .pc-upload-box input { display: none; }
    .pc-upload-plus {
      color: #aab1ba;
      font-size: 23px;
      font-weight: 300;
      line-height: 20px;
    }
    .pc-upload-text { font-size: 13px; }
    .pc-upload-box.has-image {
      border-style: solid;
      border-color: #dfe4e9;
    }
    .pc-upload-box.has-image .pc-upload-plus,
    .pc-upload-box.has-image .pc-upload-text { display: none; }
    .pc-upload-tip {
      margin-top: 10px;
      color: #a3aab4;
      font-size: 12px;
      line-height: 18px;
      white-space: nowrap;
    }
    .pc-advanced-section { min-height: 270px; padding-bottom: 28px; }
    .pc-setting-row {
      width: 310px;
      min-height: 28px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .pc-setting-label {
      width: 140px;
      color: #30363f;
      font-size: 14px;
      text-align: right;
    }
    .pc-switch {
      position: relative;
      width: 52px;
      height: 24px;
      display: inline-flex;
      flex-shrink: 0;
      cursor: pointer;
    }
    .pc-switch input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .pc-switch-track {
      position: relative;
      width: 52px;
      height: 24px;
      border-radius: 13px;
      background: #c6c9cd;
      color: #fff;
      font-size: 11px;
      line-height: 24px;
      transition: background .16s ease;
    }
    .pc-switch-track::before {
      content: '';
      position: absolute;
      left: 3px;
      top: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(36, 44, 54, .18);
      transition: transform .16s ease;
    }
    .pc-switch-text {
      display: block;
      padding-left: 24px;
      white-space: nowrap;
    }
    .pc-switch input:checked + .pc-switch-track { background: #67bd8d; }
    .pc-switch input:checked + .pc-switch-track::before { transform: translateX(28px); }
    .pc-switch input:checked + .pc-switch-track .pc-switch-text { padding-left: 7px; }
    .pc-setting-panel {
      width: 450px;
      margin: 12px 0 4px 96px;
      display: none;
      grid-template-columns: 92px 260px;
      align-items: center;
      gap: 10px;
      color: #4b535e;
      font-size: 13px;
    }
    .pc-setting-panel.show { display: grid; }
    .pc-setting-panel > label { text-align: right; }
    .pc-setting-panel > input,
    .pc-setting-input-addon {
      width: 260px;
      height: 34px;
      border: 1px solid #dfe3e8;
      border-radius: 18px;
      outline: 0;
      background: #fff;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
    }
    .pc-setting-panel > input { padding: 0 13px; }
    .pc-setting-input-addon {
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }
    .pc-setting-input-addon input {
      min-width: 0;
      flex: 1;
      padding: 0 13px;
      border: 0;
      outline: 0;
      background: transparent;
      font-family: inherit;
    }
    .pc-setting-input-addon span {
      width: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #dfe3e8;
      flex-shrink: 0;
    }
    .pc-advanced-note {
      width: 510px;
      min-height: 64px;
      margin-top: 22px;
      padding: 20px 14px;
      display: flex;
      align-items: flex-start;
      border-radius: 2px;
      background: #f5f7fa;
      color: #30363f;
      font-size: 13px;
      line-height: 22px;
    }
    .pc-advanced-note span {
      margin-right: 5px;
      color: #ef625c;
    }
    .pc-actions {
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(30, 42, 62, .025);
    }
    .pc-action {
      min-width: 98px;
      height: 36px;
      padding: 0 24px;
      border: 1px solid #d9dee4;
      border-radius: 19px;
      background: #fff;
      color: #3d444e;
      font-size: 13px;
      font-weight: 700;
    }
    .pc-action:hover { border-color: #71bd91; color: #4aaa77; }
    .pc-action.primary {
      border-color: #73c397;
      background: #73c397;
      color: #fff;
      box-shadow: 0 4px 10px rgba(69, 170, 117, .15);
    }
    .pc-action.primary:hover { background: #62b687; color: #fff; }

    @media (max-width: 1180px) {
      .pc-section { padding-left: 44px; padding-right: 44px; }
      .pc-field { grid-template-columns: 88px 340px minmax(0, 1fr); }
      .pc-control,
      .pc-textarea-wrap { width: 340px; }
      .pc-upload-row { grid-template-columns: 88px minmax(0, 1fr); }
    }

    .pc-mode-card {
      height: 60px;
      margin-bottom: 12px;
      padding: 0 78px;
      display: flex;
      align-items: stretch;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(30, 42, 62, .025);
    }
    .pc-mode-option {
      position: relative;
      width: 132px;
      height: 60px;
      display: block;
      color: #30363f;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .pc-mode-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .pc-mode-option > span {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color .16s ease, background-color .16s ease;
    }
    .pc-mode-option > span::after {
      content: '';
      position: absolute;
      right: 24px;
      bottom: 0;
      left: 24px;
      height: 3px;
      border-radius: 3px 3px 0 0;
      background: #63b98a;
      opacity: 0;
      transform: scaleX(.35);
      transition: opacity .16s ease, transform .16s ease;
    }
    .pc-mode-option:hover > span {
      background: #f7fbf9;
      color: #4ca978;
    }
    .pc-mode-option input:checked + span {
      background: linear-gradient(180deg, rgba(99, 185, 138, 0) 0%, rgba(99, 185, 138, .08) 100%);
      color: #43a572;
      font-weight: 800;
    }
    .pc-mode-option input:checked + span::after {
      opacity: 1;
      transform: scaleX(1);
    }
    .pc-mode-option input:focus-visible + span {
      outline: 2px solid rgba(99, 185, 138, .34);
      outline-offset: -4px;
      border-radius: 5px;
    }
    .pc-mode-panel[hidden] { display: none !important; }
    .pc-page.mode-multi { min-width: 1180px; }
    .pc-section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .pc-multi-heading-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .pc-multi-auto-name {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #4c5662;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }
    .pc-multi-auto-name input {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 1;
      width: 42px;
      height: 22px;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      transform: translateY(-50%);
    }
    .pc-multi-auto-name input:disabled { cursor: not-allowed; }
    .pc-multi-auto-switch {
      position: relative;
      width: 42px;
      height: 22px;
      flex-shrink: 0;
      border-radius: 11px;
      background: #c9cfd6;
      box-shadow: inset 0 0 0 1px rgba(68, 78, 90, .06);
      transition: background-color .16s ease, box-shadow .16s ease;
    }
    .pc-multi-auto-switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(46, 56, 68, .22);
      transition: transform .16s ease;
    }
    .pc-multi-auto-name input:checked + .pc-multi-auto-switch {
      background: #63b98a;
      box-shadow: inset 0 0 0 1px rgba(49, 151, 97, .08);
    }
    .pc-multi-auto-name input:checked + .pc-multi-auto-switch::after {
      transform: translateX(20px);
    }
    .pc-multi-auto-name input:focus-visible + .pc-multi-auto-switch {
      box-shadow: 0 0 0 3px rgba(99, 185, 138, .2);
    }
    .pc-multi-auto-name input:disabled + .pc-multi-auto-switch {
      opacity: .55;
      cursor: not-allowed;
    }
    .pc-multi-auto-name small {
      color: #929aa4;
      font-size: 12px;
      font-weight: 400;
    }
    .pc-section-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .pc-table-action {
      min-width: 118px;
      height: 36px;
      padding: 0 18px;
      border: 1px solid #d7dce2;
      border-radius: 19px;
      background: #fff;
      color: #444c57;
      font-size: 13px;
      font-weight: 700;
    }
    .pc-table-action:hover { border-color: #65ba8b; color: #48a875; }
    .pc-table-action.primary {
      border-color: #63b98a;
      background: #63b98a;
      color: #fff;
    }
    .pc-multi-section { padding: 22px 28px 26px; }
    .pc-multi-table-scroll {
      margin-top: 18px;
      overflow-x: auto;
      border: 1px solid #edf0f3;
      border-radius: 6px;
      background: #fff;
    }
    .pc-multi-table { min-width: 1460px; }
    .pc-multi-grid {
      display: grid;
      grid-template-columns: 148px 190px 170px 112px 112px 116px 168px 112px 112px 62px;
      gap: 10px;
      align-items: start;
    }
    .pc-multi-head {
      min-height: 48px;
      padding: 0 14px;
      align-items: center;
      background: #f4f6f9;
      color: #343b45;
      font-size: 13px;
      font-weight: 800;
      text-align: center;
    }
    .pc-multi-head span { color: #ef625c; }
    .pc-multi-row {
      min-height: 126px;
      padding: 16px 14px;
      border-top: 1px solid #edf0f3;
      background: #fff;
    }
    .pc-multi-row:nth-child(even) { background: #fafbfc; }
    .pc-multi-cell {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 7px;
    }
    .pc-multi-input,
    .pc-multi-other-input {
      width: 100%;
      border: 1px solid #dce1e6;
      outline: 0;
      background: #fff;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
    }
    .pc-multi-input {
      height: 34px;
      padding: 0 11px;
      border-radius: 18px;
    }
    .pc-multi-input:focus,
    .pc-multi-other-input:focus {
      border-color: #66bd8e;
      box-shadow: 0 0 0 2px rgba(82, 183, 136, .08);
    }
    .pc-multi-input.is-invalid,
    .pc-multi-input.is-invalid:focus {
      border-color: #ef625c;
      box-shadow: 0 0 0 2px rgba(239, 98, 92, .1);
    }
    .pc-multi-input:disabled {
      background: #f3f4f6;
      color: #aeb4bc;
    }
    .pc-multi-input::placeholder,
    .pc-multi-other-input::placeholder { color: #b5bbc3; }
    .pc-multi-barcode-choice {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: flex-start;
      color: #58ad79;
      font-size: 12px;
      cursor: pointer;
    }
    .pc-multi-barcode-choice input {
      width: 15px;
      height: 15px;
      accent-color: #66b989;
    }
    .pc-multi-generate {
      align-self: center;
      color: #4e9ef7;
      font-size: 12px;
      line-height: 18px;
      cursor: pointer;
    }
    .pc-multi-generate:hover { color: #277fdc; }
    .pc-multi-other-input {
      min-height: 66px;
      padding: 8px 10px;
      border-radius: 6px;
      resize: vertical;
      line-height: 17px;
    }
    .pc-multi-other-cell.is-hidden .pc-multi-other-input { display: none; }
    .pc-multi-other-cell.is-hidden::after {
      content: '未启用';
      padding-top: 9px;
      color: #b7bdc5;
      font-size: 12px;
      text-align: center;
    }
    .pc-multi-delete {
      margin-top: 8px;
      color: #50a2f5;
      font-size: 13px;
      white-space: nowrap;
    }
    .pc-multi-delete:hover { color: #ef625c; }
    .pc-multi-name-reset {
      align-self: flex-start;
      margin-left: 8px;
      color: #4e9ef7;
      font-size: 12px;
      line-height: 18px;
      cursor: pointer;
    }
    .pc-multi-name-reset:hover { color: #277fdc; }
    .pc-multi-name-reset.is-hidden { display: none; }
    .pc-multi-image-section { padding: 22px 78px 30px; }
    .pc-multi-image-head,
    .pc-multi-image-row {
      width: 290px;
      display: grid;
      grid-template-columns: 170px 96px;
      align-items: center;
      gap: 24px;
    }
    .pc-multi-image-head {
      margin-top: 22px;
      color: #5b6470;
      font-size: 13px;
      text-align: center;
    }
    .pc-multi-image-row {
      min-height: 94px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f2f5;
    }
    .pc-multi-image-row:last-child { border-bottom: 0; }
    .pc-multi-name {
      min-width: 0;
      overflow: hidden;
      color: #3b424c;
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pc-upload-box.compact {
      width: 68px;
      height: 68px;
      margin: 0 auto;
      gap: 2px;
    }
    .pc-upload-box.compact .pc-upload-plus { font-size: 19px; }
    .pc-upload-box.compact .pc-upload-text { font-size: 11px; }
    .pc-multi-upload-tip { margin-left: 194px; white-space: normal; }
    .pc-multi-advanced { min-height: 360px; }
    .pc-multi-setting-panel {
      width: 720px;
      margin: 12px 0 8px 34px;
      padding: 12px 18px;
      display: none;
      border: 1px solid #edf0f3;
      border-radius: 6px;
      background: #fafbfc;
    }
    .pc-multi-setting-panel.show { display: block; }
    .pc-multi-setting-head,
    .pc-multi-setting-row {
      display: grid;
      grid-template-columns: 190px 170px 190px;
      align-items: center;
      gap: 18px;
    }
    .pc-multi-setting-head {
      min-height: 34px;
      color: #6a7380;
      font-size: 12px;
      text-align: center;
    }
    .pc-multi-setting-row {
      min-height: 52px;
      border-top: 1px solid #edf0f3;
    }
    .pc-multi-setting-row:first-child { border-top: 0; }
    .pc-multi-setting-row .pc-multi-name { padding-left: 8px; }
    .pc-multi-setting-input,
    .pc-multi-setting-addon {
      width: 160px;
      height: 34px;
      border: 1px solid #dce1e6;
      border-radius: 18px;
      background: #fff;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
    }
    .pc-multi-setting-input {
      padding: 0 12px;
      outline: 0;
    }
    .pc-multi-setting-addon {
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }
    .pc-multi-setting-addon input {
      min-width: 0;
      flex: 1;
      padding: 0 11px;
      border: 0;
      outline: 0;
      background: transparent;
      font-family: inherit;
    }
    .pc-multi-setting-addon span {
      width: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #dce1e6;
      color: #5f6873;
      flex-shrink: 0;
    }
    .pc-multi-setting-input:focus,
    .pc-multi-setting-addon:focus-within {
      border-color: #66bd8e;
      box-shadow: 0 0 0 2px rgba(82, 183, 136, .08);
      outline: 0;
    }
    .pc-multi-setting-panel input:disabled {
      background: #f3f4f6;
      color: #b5bbc3;
    }
    .pc-multi-setting-head.warning,
    .pc-multi-setting-row.warning {
      grid-template-columns: 190px 170px 190px;
    }
    .pc-multi-setting-head.repurchase,
    .pc-multi-setting-row.repurchase {
      grid-template-columns: 190px 140px;
    }
    .pc-repurchase-setting-row {
      width: auto;
      flex-wrap: wrap;
    }
    .pc-setting-tip {
      color: #77808b;
      font-size: 12px;
    }
    .pc-setting-tip i {
      margin-right: 4px;
      color: #ef625c;
      font-style: normal;
    }
    .pc-multi-repurchase-control {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-required-marker {
      margin-right: 5px;
      color: #ef4f4f;
      font-style: normal;
      font-weight: 700;
    }
    .pc-switch.compact {
      width: 46px;
      height: 22px;
    }
    .pc-switch.compact .pc-switch-track {
      width: 46px;
      height: 22px;
      line-height: 22px;
    }
    .pc-switch.compact .pc-switch-track::before {
      width: 16px;
      height: 16px;
    }
    .pc-switch.compact input:checked + .pc-switch-track::before { transform: translateX(24px); }
    .pc-switch.compact .pc-switch-text { padding-left: 22px; font-size: 10px; }
    .pc-switch.compact input:checked + .pc-switch-track .pc-switch-text { padding-left: 6px; }

    @media (max-width: 1280px) {
      .pc-mode-card { padding-left: 44px; padding-right: 44px; }
      .pc-multi-image-section { padding-left: 44px; padding-right: 44px; }
      .pc-multi-setting-panel { margin-left: 0; }
    }

    /* ===== 商品管理 - 活体管理 ===== */
    #page-live-product.page.active { height: 100%; }
    .lp-page {
      height: 100%;
      padding: 16px;
      background: #f4f6fa;
      color: #303844;
      overflow: hidden;
    }
    .lp-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
    .lp-shell {
      height: 100%;
      min-width: 1120px;
      display: grid;
      grid-template-columns: 238px minmax(0, 1fr);
      background: #fff;
      border: 1px solid #edf0f4;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(24, 38, 66, .04);
      overflow: hidden;
    }
    .lp-category-panel {
      min-width: 0;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #edf0f3;
      background: #fff;
    }
    .lp-category-actions {
      height: 80px;
      padding: 18px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid #edf0f3;
      flex-shrink: 0;
    }
    .lp-btn {
      height: 38px;
      padding: 0 20px;
      border: 1px solid transparent;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      color: #5e6672;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, color .15s ease;
    }
    .lp-btn.primary { background: #69c292; color: #fff; box-shadow: 0 3px 10px rgba(76, 175, 130, .14); }
    .lp-btn.primary:hover { background: #58b984; }
    .lp-btn.outline { border-color: #dfe4ea; color: #949ca8; }
    .lp-btn.outline.dark { color: #303844; }
    .lp-btn.outline:hover { border-color: #6bc395; color: #45aa76; }
    .lp-category-list { padding: 22px 0; overflow: auto; }
    .lp-category-list button { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
    .lp-category-all {
      height: 42px;
      padding: 0 30px;
      color: #626b77;
      font-size: 15px;
      font-weight: 700;
    }
    .lp-category-all.active { color: #49ae79; }
    .lp-category-item {
      height: 58px;
      padding: 0 30px;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #414a56;
      font-size: 15px;
      font-weight: 700;
    }
    .lp-category-item:hover,
    .lp-category-item.active { background: #f2fbf6; color: #45aa76; }
    .lp-category-arrow { color: #505966; font-size: 22px; line-height: 1; }
    .lp-category-item.active .lp-category-arrow { color: #45aa76; }
    .lp-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
    .lp-toolbar {
      min-height: 80px;
      padding: 18px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      border-bottom: 1px solid #edf0f3;
      flex-shrink: 0;
    }
    .lp-search {
      width: 300px;
      height: 40px;
      padding: 0 15px;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #dfe4ea;
      border-radius: 21px;
      color: #5c6570;
      background: #fff;
      flex-shrink: 1;
    }
    .lp-search svg { width: 18px; height: 18px; flex-shrink: 0; }
    .lp-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #374151; font-size: 14px; }
    .lp-search input::placeholder { color: #9199a5; }
    .lp-select-wrap { width: 176px; height: 40px; position: relative; flex-shrink: 1; }
    .lp-select-wrap select,
    .lp-status-select,
    .lp-page-size select {
      width: 100%;
      height: 100%;
      padding: 0 34px 0 15px;
      border: 1px solid #dfe4ea;
      border-radius: 21px;
      outline: 0;
      background: #fff;
      color: #858d99;
      font-size: 14px;
      cursor: pointer;
    }
    .lp-toolbar-spacer { flex: 1; min-width: 8px; }
    .lp-query { min-width: 88px; }
    .lp-add { min-width: 112px; }
    .lp-table-area { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .lp-table-scroll { flex: 1; min-height: 0; overflow-x: auto; overflow-y: auto; scrollbar-width: none; }
    .lp-table-scroll::-webkit-scrollbar { display: none; }
    .lp-table { width: 100%; min-width: 1320px; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
    .lp-table col.select { width: 4%; }
    .lp-table col.picture { width: 8%; }
    .lp-table col.name { width: 15%; }
    .lp-table col.breed { width: 9%; }
    .lp-table col.sex { width: 8%; }
    .lp-table col.cost { width: 8%; }
    .lp-table col.price { width: 8%; }
    .lp-table col.status { width: 10%; }
    .lp-table col.package { width: 9%; }
    .lp-table col.actions { width: 21%; }
    .lp-table thead th {
      height: 58px;
      padding: 0 8px;
      background: #f4f6f9;
      border-bottom: 1px solid #edf0f3;
      color: #303844;
      font-size: 14px;
      font-weight: 800;
      text-align: center;
      white-space: nowrap;
    }
    .lp-table tbody tr { height: 112px; border-bottom: 1px solid #edf0f3; }
    .lp-table tbody tr:nth-child(even) { background: #f5f7fa; }
    .lp-table tbody tr:hover { background: #f0faf5; }
    .lp-table td { padding: 10px 8px; color: #4a535e; text-align: center; vertical-align: middle; }
    .lp-table .lp-text-left { text-align: left; }
    .lp-checkbox {
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 1px solid #d5dbe3;
      border-radius: 2px;
      background: #fff;
      cursor: pointer;
      vertical-align: middle;
      position: relative;
    }
    .lp-checkbox:checked,
    .lp-checkbox:indeterminate { border-color: #62bd8b; background: #62bd8b; }
    .lp-checkbox:checked::after {
      content: '';
      position: absolute;
      left: 5px;
      top: 2px;
      width: 5px;
      height: 9px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .lp-checkbox:indeterminate::after { content: ''; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: #fff; }
    .lp-pet-avatar { width: 62px; height: 62px; display: block; margin: 0 auto; }
    .lp-name-link { border: 0; background: transparent; color: #5d8fff; font-size: 15px; font-weight: 700; cursor: pointer; }
    .lp-name-link:hover { color: #3d74ec; }
    .lp-status-select { width: 102px; height: 38px; padding-left: 16px; color: #414a55; font-weight: 700; }
    .lp-pill-action,
    .lp-row-actions button {
      height: 34px;
      padding: 0 14px;
      border: 1px solid #59b982;
      border-radius: 18px;
      background: #fff;
      color: #49aa76;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      cursor: pointer;
    }
    .lp-pill-action:hover,
    .lp-row-actions button:hover { background: #f0faf5; }
    .lp-row-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
    .lp-row-actions button { height: 31px; padding: 0 12px; }
    .lp-row-actions button.delete { border-color: #dfe4ea; color: #4f5966; }
    .lp-row-actions button.delete:hover { background: #f7f8fa; }
    .lp-empty-row td { height: 220px; color: #9aa3af; background: #fff; }
    .lp-scrollbar { height: 42px; padding: 21px 16px 0; background: #fff; flex-shrink: 0; }
    .lp-scrollbar::before { content: ''; display: block; height: 10px; border-radius: 5px; background: #e6e8eb; }
    .lp-scrollbar span { display: block; width: 78%; height: 10px; margin-top: -10px; border-radius: 5px; background: #a8a8a8; }
    .lp-footer {
      min-height: 72px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-top: 1px solid #edf0f3;
      background: #fff;
      flex-shrink: 0;
    }
    .lp-check-label { display: flex; align-items: center; gap: 10px; color: #303844; font-size: 14px; white-space: nowrap; cursor: pointer; }
    .lp-selected { color: #9aa3af; font-size: 14px; white-space: nowrap; }
    .lp-batch {
      height: 36px;
      padding: 0 17px;
      border: 1px solid #dfe4ea;
      border-radius: 19px;
      background: #fff;
      color: #3e4752;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .lp-footer-spacer { flex: 1; }
    .lp-total { color: #4f5966; font-size: 14px; white-space: nowrap; }
    .lp-total strong { color: #303844; font-size: 16px; }
    .lp-page-btn,
    .lp-page-num,
    .lp-go-btn {
      width: 36px;
      height: 36px;
      border: 1px solid #dfe4ea;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      color: #a4abb4;
      font-size: 23px;
      line-height: 1;
      flex-shrink: 0;
    }
    .lp-page-num { color: #fff; font-size: 14px; }
    .lp-page-num.active { border-color: #69c292; background: #69c292; font-weight: 800; }
    .lp-page-size { width: 100px; height: 38px; }
    .lp-page-size select { padding: 0 12px; color: #4f5966; font-weight: 700; }
    .lp-go-text { color: #4f5966; font-size: 14px; white-space: nowrap; }
    .lp-go-input { width: 78px; height: 38px; border: 1px solid #dfe4ea; border-radius: 20px; outline: 0; text-align: center; color: #303844; font-size: 14px; }
    .lp-go-btn { width: 38px; color: #4faa77; font-size: 14px; font-weight: 800; cursor: pointer; }

    @media (max-width: 1500px) {
      .lp-toolbar { gap: 8px; }
      .lp-search { width: 245px; }
      .lp-select-wrap { width: 150px; }
      .lp-btn { padding: 0 15px; }
    }

    /* 活体管理：紧凑单屏布局 */
    .lp-page { padding: 12px; }
    .lp-shell {
      min-width: 0;
      grid-template-columns: 178px minmax(0, 1fr);
    }
    .lp-category-actions {
      height: 72px;
      padding: 14px 10px;
      gap: 6px;
    }
    .lp-btn {
      height: 34px;
      padding: 0 14px;
      font-size: 13px;
    }
    .lp-category-list { padding: 16px 0; }
    .lp-category-all {
      height: 38px;
      padding: 0 20px;
      font-size: 14px;
    }
    .lp-category-item {
      height: 50px;
      padding: 0 20px;
      font-size: 14px;
    }
    .lp-toolbar {
      min-height: 72px;
      padding: 14px 12px;
      gap: 8px;
    }
    .lp-search {
      width: clamp(190px, 24vw, 270px);
      height: 36px;
      padding: 0 12px;
    }
    .lp-search svg { width: 16px; height: 16px; }
    .lp-search input { font-size: 13px; }
    .lp-select-wrap {
      width: 148px;
      height: 36px;
      min-width: 124px;
      flex: 0 1 148px;
    }
    .lp-select-wrap select,
    .lp-status-select,
    .lp-page-size select {
      padding-left: 12px;
      padding-right: 28px;
      font-size: 13px;
    }
    .lp-toolbar-spacer { min-width: 2px; }
    .lp-query { min-width: 72px; }
    .lp-add { min-width: 96px; }
    .lp-table-scroll { overflow-x: hidden; }
    .lp-table {
      min-width: 0;
      font-size: 13px;
    }
    .lp-table col.select { width: 3.5%; }
    .lp-table col.picture { width: 7.5%; }
    .lp-table col.name { width: 15%; }
    .lp-table col.breed { width: 8.5%; }
    .lp-table col.sex { width: 6.5%; }
    .lp-table col.cost { width: 7.5%; }
    .lp-table col.price { width: 7.5%; }
    .lp-table col.status { width: 10%; }
    .lp-table col.package { width: 9%; }
    .lp-table col.actions { width: 25%; }
    .lp-table thead th {
      height: 52px;
      padding: 0 4px;
      font-size: 13px;
    }
    .lp-table tbody tr { height: 92px; }
    .lp-table td { padding: 8px 4px; }
    .lp-pet-avatar { width: 52px; height: 52px; }
    .lp-name-link { font-size: 13px; }
    .lp-status-select {
      width: 88px;
      height: 32px;
      padding-left: 11px;
      font-size: 12px;
    }
    .lp-pill-action,
    .lp-row-actions button {
      height: 30px;
      padding: 0 10px;
      font-size: 12px;
    }
    .lp-row-actions { gap: 4px; }
    .lp-row-actions button {
      height: 28px;
      padding: 0 7px;
    }
    .lp-scrollbar { display: none; }
    .lp-footer {
      min-height: 64px;
      padding: 0 12px;
      gap: 8px;
    }
    .lp-check-label {
      gap: 7px;
      font-size: 13px;
    }
    .lp-selected,
    .lp-total,
    .lp-go-text { font-size: 13px; }
    .lp-total strong { font-size: 14px; }
    .lp-batch {
      height: 32px;
      padding: 0 13px;
      font-size: 13px;
    }
    .lp-page-btn,
    .lp-page-num,
    .lp-go-btn {
      width: 32px;
      height: 32px;
    }
    .lp-page-size {
      width: 88px;
      height: 34px;
    }
    .lp-go-input {
      width: 64px;
      height: 34px;
      border-radius: 18px;
      font-size: 13px;
    }
    .lp-go-btn {
      width: 34px;
      font-size: 13px;
    }

    @media (max-width: 1500px) {
      .lp-shell { grid-template-columns: 164px minmax(0, 1fr); }
      .lp-toolbar { gap: 6px; }
      .lp-search { width: clamp(170px, 20vw, 220px); }
      .lp-select-wrap {
        width: 132px;
        min-width: 112px;
        flex-basis: 132px;
      }
      .lp-btn { padding: 0 11px; }
      .lp-table { font-size: 12px; }
      .lp-table col.name { width: 14%; }
      .lp-table col.actions { width: 26%; }
    }

    /* 活体管理：品类设置交互 */
    .lp-category-list {
      position: relative;
      overflow: visible;
    }
    .lp-category-list .lp-category-toggle,
    .lp-category-list .lp-category-settings {
      width: auto;
      text-align: center;
    }
    .lp-category-group { position: relative; }
    .lp-category-parent,
    .lp-subcategory-row {
      position: relative;
      display: flex;
      align-items: center;
      color: #3f4854;
      cursor: pointer;
    }
    .lp-category-parent {
      height: 46px;
      padding: 0 38px 0 16px;
      font-size: 14px;
      font-weight: 700;
    }
    .lp-category-parent:hover,
    .lp-subcategory-row:hover { background: #f6fbf8; }
    .lp-category-parent.active,
    .lp-subcategory-row.active {
      color: #4eae7b;
      font-weight: 800;
    }
    .lp-category-toggle {
      width: 18px !important;
      height: 32px;
      margin-right: 5px;
      padding: 0;
      border: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: #525b66;
      cursor: pointer;
      flex-shrink: 0;
    }
    .lp-category-toggle .lp-category-arrow {
      display: inline-block;
      font-size: 19px;
      line-height: 1;
      transform: rotate(0);
      transition: transform .16s ease;
    }
    .lp-category-group.open > .lp-category-parent .lp-category-toggle .lp-category-arrow {
      transform: rotate(90deg);
    }
    .lp-category-label,
    .lp-subcategory-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .lp-category-label { flex: 1; }
    .lp-subcategory-list { display: none; padding: 0 0 4px; }
    .lp-category-group.open > .lp-subcategory-list { display: block; }
    .lp-subcategory-row {
      height: 40px;
      padding: 0 38px 0 42px;
      font-size: 13px;
    }
    .lp-subcategory-name { flex: 1; }
    .lp-category-settings {
      position: absolute;
      right: 8px;
      top: 50%;
      width: 25px !important;
      height: 25px;
      padding: 0;
      border: 0;
      background: transparent !important;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-50%);
      cursor: pointer;
      transition: opacity .12s ease;
      z-index: 22;
    }
    .lp-category-parent:hover > .lp-category-settings,
    .lp-subcategory-row:hover > .lp-category-settings,
    .lp-category-settings:focus-visible,
    .lp-category-settings.show {
      opacity: 1;
      visibility: visible;
    }
    .lp-settings-shape {
      position: relative;
      width: 24px;
      height: 24px;
      display: block;
      background: #5aaf7f;
      clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
    }
    .lp-settings-shape::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      transform: translate(-50%, -50%);
    }
    .lp-category-menu {
      position: absolute;
      right: 7px;
      top: 40px;
      width: 112px;
      padding: 7px 0;
      border: 1px solid #eef0f3;
      border-radius: 4px;
      display: none;
      background: #fff;
      box-shadow: 0 14px 34px rgba(35, 45, 58, .18);
      z-index: 40;
    }
    .lp-category-menu.show { display: block; }
    .lp-category-menu::before {
      content: '';
      position: absolute;
      right: 13px;
      top: -7px;
      width: 13px;
      height: 13px;
      border-left: 1px solid #eef0f3;
      border-top: 1px solid #eef0f3;
      background: #fff;
      transform: rotate(45deg);
    }
    .lp-category-menu button {
      position: relative;
      width: 100%;
      height: 34px;
      padding: 0 14px;
      border: 0;
      display: block;
      background: transparent;
      color: #4d5560;
      font-size: 13px;
      text-align: center;
      cursor: pointer;
      z-index: 1;
    }
    .lp-category-menu button:hover {
      background: #f3faf6;
      color: #48a874;
    }
    .lp-subcategory-row .lp-category-menu { top: 34px; }
    .lp-category-menu.parent-menu { width: 118px; }

    .lp-category-modal-mask {
      position: fixed;
      inset: 0;
      padding: 20px;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(22, 28, 36, .48);
      z-index: 2500;
    }
    .lp-category-modal-mask.show { display: flex; }
    .lp-category-modal {
      width: 620px;
      max-width: calc(100vw - 40px);
      overflow: hidden;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 22px 60px rgba(18, 24, 32, .24);
    }
    .lp-category-modal-head {
      height: 74px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #edf0f3;
      color: #171b22;
      font-size: 24px;
      font-weight: 800;
    }
    .lp-category-modal-body {
      padding: 36px 62px 44px;
    }
    .lp-category-modal-parent {
      color: #2f3540;
      font-size: 19px;
    }
    .lp-category-modal-parent strong { font-weight: 500; }
    .lp-category-modal-field {
      margin-top: 38px;
      display: grid;
      grid-template-columns: 128px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      color: #2f3540;
      font-size: 18px;
    }
    .lp-category-modal-field i {
      margin-right: 8px;
      color: #ff4b43;
      font-style: normal;
    }
    .lp-category-modal-input {
      position: relative;
      height: 50px;
      display: flex;
      align-items: center;
      border: 1px solid #d9dde2;
      border-radius: 26px;
      background: #fff;
    }
    .lp-category-modal-input:focus-within { border-color: #69bd8e; }
    .lp-category-modal-input input {
      width: 100%;
      height: 100%;
      padding: 0 46px 0 20px;
      border: 0;
      outline: 0;
      background: transparent;
      color: #2f3540;
      font-size: 18px;
    }
    .lp-category-modal-input b {
      position: absolute;
      right: 20px;
      top: 18px;
      width: 11px;
      height: 11px;
      border-right: 2px solid #b9bec5;
      border-bottom: 2px solid #b9bec5;
      transform: rotate(45deg);
      pointer-events: none;
    }
    .lp-category-modal-actions {
      padding: 0 76px 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
    }
    .lp-category-modal-actions button {
      height: 52px;
      border: 1px solid #d9dde2;
      border-radius: 27px;
      background: #fff;
      color: #20252d;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 3px 8px rgba(30, 38, 48, .04);
    }
    .lp-category-modal-actions button.primary {
      border-color: #72be91;
      background: #72be91;
      color: #fff;
      box-shadow: 0 6px 14px rgba(76, 171, 117, .18);
    }
    .lp-category-modal-actions button:hover { border-color: #62b687; }
    .lp-category-modal-actions button.primary:hover { background: #62b687; }

    @media (max-width: 1500px) {
      .lp-category-parent { padding-left: 13px; }
      .lp-subcategory-row { padding-left: 34px; }
      .lp-category-modal { width: 560px; }
    }