/* 会员卡权益说明 */
    .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(1180px, calc(100vw - 96px));
      max-height: min(780px, calc(100vh - 56px));
      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-frequent {
      margin: 0 18px 16px;
      padding: 13px 14px 14px;
      border: 1px solid #e4f0ea;
      border-radius: 8px;
      background: linear-gradient(135deg, #f8fdf9 0%, #f5faf8 100%);
      flex-shrink: 0;
    }
    .c-record-frequent-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 11px;
    }
    .c-record-frequent-head h2 {
      color: #20242a;
      font-size: 14px;
      line-height: 1.35;
      font-weight: 700;
    }
    .c-record-frequent-head h2 span {
      margin-left: 6px;
      color: #49aa77;
      font-size: 11px;
      letter-spacing: .06em;
    }
    .c-record-frequent-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }
    .c-record-frequent-card {
      position: relative;
      min-width: 0;
      height: 94px;
      padding: 10px 10px 9px 48px;
      border: 1px solid #e6ebee;
      border-radius: 7px;
      background: #fff;
      color: #333942;
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .c-record-frequent-card:hover {
      border-color: #7bd2a3;
      box-shadow: 0 5px 14px rgba(54, 142, 96, .12);
      transform: translateY(-1px);
    }
    .c-record-frequent-rank {
      position: absolute;
      top: 9px;
      left: 10px;
      width: 25px;
      height: 25px;
      border-radius: 7px;
      background: #edf8f1;
      color: #51ad7b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }
    .c-record-frequent-card:nth-child(-n+3) .c-record-frequent-rank {
      background: #fff3dc;
      color: #c9852e;
    }
    .c-record-frequent-count {
      position: absolute;
      top: 9px;
      right: 8px;
      color: #e38a43;
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap;
    }
    .c-record-frequent-thumb {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      margin-top: 23px;
      border-radius: 6px;
      background: #f4f6f8;
      font-size: 22px;
    }
    .c-record-frequent-info {
      position: absolute;
      left: 95px;
      right: 25px;
      top: 31px;
      display: block;
      min-width: 0;
    }
    .c-record-frequent-info strong {
      display: -webkit-box;
      overflow: hidden;
      color: #3d454d;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.45;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .c-record-frequent-info small {
      display: block;
      margin-top: 4px;
      color: #ef6f55;
      font-size: 12px;
      font-weight: 700;
    }
    .c-record-frequent-add {
      position: absolute;
      right: 8px;
      bottom: 7px;
      width: 20px;
      height: 20px;
      border: 1px solid #b8e4ca;
      border-radius: 50%;
      color: #43a970;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      line-height: 1;
    }
    .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;
    }
    @media (max-width: 980px) {
      .c-record-modal { width: calc(100vw - 32px); }
      .c-record-frequent-grid { grid-template-columns: repeat(5, 170px); overflow-x: auto; padding-bottom: 3px; }
      .c-record-frequent-card { width: 170px; }
    }
    .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;
    }