:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #697386;
    --line: #dce3ef;
    --primary: #1167d8;
    --primary-dark: #0b4fa7;
    --success: #168258;
    --danger: #b42318;
    --old-blue: #105cfb;
    --old-page-gap: 15px;
    --old-page-pad: 15px;
    --old-toolbar-min-height: 62px;
    --old-diy-top-gap: 20px;
    --old-diy-column-pad: 10px;
    --old-diy-component-width: 235px;
    --old-diy-left-space: 255px;
    --old-diy-attr-width: 370px;
    --old-diy-attr-space: 392px;
    --old-diy-attr-inner-width: 360px;
    --old-diy-phone-width: 375px;
    --old-diy-toolbar-offset: 140px;
    --old-diy-action-offset: calc(var(--old-diy-phone-width) / 2 + 16px);
    --diy-work-height: 525px;
}

/* The legacy shop theme is shared by the DIY canvas and every H5 page. */
body[data-shop-theme] .text-color {
    color: var(--base-color) !important;
}

body[data-shop-theme] .border-color {
    border-color: var(--base-color) !important;
}

body[data-shop-theme] .bg-color {
    background-color: var(--base-color) !important;
}

/* Legacy cashier refund workbench. Isolated from admin refunds and DIY pages. */
.cashier-refund-workbench,
.cashier-refund-workbench * {
    box-sizing: border-box;
}

.cashier-refund-workbench {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    color: #303133;
}

.cashier-refund-shell {
    display: flex;
    width: calc(100% - 88px);
    height: 100vh;
    margin-left: 88px;
    background: #fff;
}

.cashier-refund-sidebar {
    display: flex;
    width: 500px;
    height: 100%;
    flex: 0 0 500px;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-refund-main {
    position: relative;
    width: 0;
    height: 100%;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    border-right: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-refund-pane-title {
    position: relative;
    display: flex;
    height: 60px;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    font-size: 18px;
    font-weight: 500;
}

.cashier-refund-pane-title > span {
    position: absolute;
    right: 20px;
    color: #1473ff;
    font-size: 24px;
    letter-spacing: 2px;
    line-height: 1;
}

.cashier-refund-search {
    position: relative;
    display: block;
    height: 60px;
    flex: 0 0 60px;
    padding: 10px 20px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-refund-search input {
    width: 100%;
    height: 40px;
    padding: 0 18px 0 44px;
    border: 0;
    border-radius: 4px;
    outline: 0;
    background: #f5f5f5;
    color: #303133;
    font: inherit;
}

.cashier-refund-search > span {
    position: absolute;
    top: 20px;
    left: 36px;
    width: 17px;
    height: 17px;
    border: 2px solid #909399;
    border-radius: 50%;
}

.cashier-refund-search > span::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -3px;
    width: 7px;
    height: 2px;
    transform: rotate(45deg);
    background: #909399;
}

.cashier-refund-list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}

.cashier-refund-list:hover {
    scrollbar-color: #c1c1c1 transparent;
}

.cashier-refund-list::-webkit-scrollbar,
.cashier-refund-detail::-webkit-scrollbar {
    width: 5px;
}

.cashier-refund-list::-webkit-scrollbar-thumb,
.cashier-refund-detail::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: transparent;
}

.cashier-refund-list:hover::-webkit-scrollbar-thumb,
.cashier-refund-detail:hover::-webkit-scrollbar-thumb {
    background: #c1c1c1;
}

.cashier-refund-list-item {
    display: block;
    width: 100%;
    padding: 20px;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    color: #303133;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cashier-refund-list-item:hover,
.cashier-refund-list-item.active {
    background: #ecf5ff;
}

.cashier-refund-list-title,
.cashier-refund-list-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
}

.cashier-refund-list-title {
    margin-bottom: 20px;
    font-size: 16px;
}

.cashier-refund-list-title strong {
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-refund-list-title em {
    flex: 0 0 auto;
    margin-left: 12px;
    color: #1473ff;
    font-style: normal;
}

.cashier-refund-list-summary span:last-child {
    display: flex;
    align-items: center;
}

.cashier-refund-list-summary b {
    margin-left: 5px;
    color: #fe2278;
    font-size: 18px;
    font-weight: 400;
}

.cashier-refund-list-empty {
    margin-top: 300px;
    color: #e6e6e6;
    font-size: 40px;
    text-align: center;
}

.cashier-refund-detail {
    width: 100%;
    height: calc(100% - 60px);
    padding: 20px 20px 80px;
    overflow-y: auto;
    background: #f8f8f8;
}

.cashier-refund-empty {
    position: absolute;
    inset: 60px 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cashier-refund-empty img {
    width: 210px;
    height: auto;
}

.cashier-refund-information h2 {
    margin: 0 0 24px;
    color: #303133;
    font-size: 24px;
    line-height: 1.4;
}

.cashier-refund-product {
    display: flex;
    min-height: 150px;
    align-items: center;
    padding: 20px;
    background: #fff;
}

.cashier-refund-product-image {
    display: flex;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    overflow: hidden;
    background: #f5f7fa;
}

.cashier-refund-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cashier-refund-no-image {
    color: #c0c4cc;
    font-size: 12px;
}

.cashier-refund-product-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    margin-right: 15px;
}

.cashier-refund-product-copy strong {
    overflow-wrap: anywhere;
    font-size: 16px;
    font-weight: 400;
}

.cashier-refund-product-copy small {
    margin-top: 8px;
    color: #909399;
}

.cashier-refund-product-price {
    flex: 0 0 auto;
    font-weight: 700;
    text-align: right;
}

.cashier-refund-product-price small {
    color: #999;
    font-size: 12px;
    font-weight: 400;
}

.cashier-refund-fields {
    margin: 15px 0 0;
    padding: 20px;
    background: #fff;
}

.cashier-refund-fields > div {
    display: flex;
    min-height: 30px;
    align-items: flex-start;
    line-height: 30px;
}

.cashier-refund-fields dt {
    flex: 0 0 auto;
}

.cashier-refund-fields dd {
    width: 0;
    min-width: 0;
    flex: 1;
    margin: 0 0 0 10px;
    overflow-wrap: anywhere;
    text-align: right;
}

/* Legacy cashier employee workbench. Isolated from admin staff pages. */
.cashier-staff-workbench,
.cashier-staff-workbench * {
    box-sizing: border-box;
}

.cashier-staff-workbench {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    color: #303133;
}

.cashier-staff-shell {
    display: flex;
    width: calc(100% - 88px);
    height: 100vh;
    margin-left: 88px;
    background: #fff;
}

.cashier-staff-sidebar {
    display: flex;
    width: 500px;
    height: 100%;
    flex: 0 0 500px;
    flex-direction: column;
    border-right: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-staff-pane-title {
    position: relative;
    display: flex;
    height: 60px;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    font-size: 18px;
    font-weight: 500;
}

.cashier-staff-pane-title > span {
    position: absolute;
    right: 20px;
    color: #1473ff;
    font-size: 24px;
    letter-spacing: 2px;
    line-height: 1;
}

.cashier-staff-search {
    position: relative;
    height: 60px;
    flex: 0 0 60px;
    padding: 10px 20px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-staff-search input {
    width: 100%;
    height: 40px;
    padding: 0 18px 0 44px;
    border: 0;
    border-radius: 4px;
    outline: 0;
    background: #f5f5f5;
    color: #303133;
    font: inherit;
}

.cashier-staff-search > span {
    position: absolute;
    top: 20px;
    left: 36px;
    width: 17px;
    height: 17px;
    border: 2px solid #909399;
    border-radius: 50%;
}

.cashier-staff-search > span::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -3px;
    width: 7px;
    height: 2px;
    transform: rotate(45deg);
    background: #909399;
}

.cashier-staff-list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}

.cashier-staff-list:hover {
    scrollbar-color: #c1c1c1 transparent;
}

.cashier-staff-list::-webkit-scrollbar,
.cashier-staff-detail::-webkit-scrollbar {
    width: 5px;
}

.cashier-staff-list::-webkit-scrollbar-thumb,
.cashier-staff-detail::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: transparent;
}

.cashier-staff-list:hover::-webkit-scrollbar-thumb,
.cashier-staff-detail:hover::-webkit-scrollbar-thumb {
    background: #c1c1c1;
}

.cashier-staff-list-item {
    display: flex;
    width: 100%;
    min-height: 110px;
    align-items: center;
    padding: 20px;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    color: #303133;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cashier-staff-list-item:hover,
.cashier-staff-list-item.active {
    background: #ecf5ff;
}

.cashier-staff-list-item > img {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    margin-right: 10px;
    object-fit: contain;
}

.cashier-staff-list-copy {
    display: flex;
    min-width: 0;
    height: 60px;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

.cashier-staff-list-copy > span {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cashier-staff-list-copy strong,
.cashier-staff-list-copy em,
.cashier-staff-list-copy i,
.cashier-staff-list-copy time {
    overflow: hidden;
    font-style: normal;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-staff-list-copy strong,
.cashier-staff-list-copy em {
    font-size: 16px;
}

.cashier-staff-list-copy em {
    flex: none;
    color: #1473ff;
}

.cashier-staff-list-copy i,
.cashier-staff-list-copy time {
    color: #606266;
    font-size: 14px;
}

.cashier-staff-list-copy i {
    max-width: 220px;
}

.cashier-staff-list-copy time {
    flex: none;
}

.cashier-staff-list-empty {
    padding-top: 300px;
    color: #e6e6e6;
    font-size: 40px;
    text-align: center;
}

.cashier-staff-add {
    height: 88px;
    flex: 0 0 88px;
    padding: 24px 20px;
    border-top: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-staff-primary,
.cashier-staff-detail-actions button,
.cashier-staff-confirm button {
    height: 40px;
    padding: 0 24px;
    border: 1px solid #1473ff;
    border-radius: 2px;
    background: #fff;
    color: #1473ff;
    font: inherit;
    cursor: pointer;
}

.cashier-staff-primary {
    background: #1473ff;
    color: #fff;
}

.cashier-staff-primary:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.cashier-staff-add .cashier-staff-primary {
    width: 100%;
}

.cashier-staff-main {
    position: relative;
    min-width: 0;
    height: 100%;
    flex: 1;
    border-right: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-staff-detail {
    height: calc(100% - 60px);
    padding: 20px;
    overflow-y: auto;
}

.cashier-staff-workbench.has-manage-actions .cashier-staff-detail {
    height: calc(100% - 128px);
}

.cashier-staff-information h3,
.cashier-staff-logs h3 {
    margin: 0 0 32px;
    color: #303133;
    font-size: 18px;
    font-weight: 400;
}

.cashier-staff-information-box {
    display: flex;
    min-height: 208px;
    justify-content: space-between;
}

.cashier-staff-information-box dl {
    width: 500px;
    margin: 0;
}

.cashier-staff-information-box dl > div {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 15px;
    padding-left: 10px;
}

.cashier-staff-information-box dt {
    width: 130px;
    flex: 0 0 130px;
    margin-right: 16px;
    color: #303133;
    font-weight: 400;
    text-align: right;
}

.cashier-staff-information-box dd {
    min-width: 0;
    margin: 0 23px 0 0;
    overflow: hidden;
    color: #303133;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-staff-information-box > img {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    object-fit: contain;
}

.cashier-staff-logs h3 {
    margin-bottom: 32px;
}

.cashier-staff-log-table {
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
}

.cashier-staff-log-head,
.cashier-staff-log-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(150px, 1fr) minmax(180px, 1fr);
    min-height: 56px;
    align-items: center;
    padding: 0 38px;
}

.cashier-staff-log-head {
    background: #f7f8fa;
}

.cashier-staff-log-head span:last-child,
.cashier-staff-log-row time {
    text-align: right;
}

.cashier-staff-log-row {
    min-height: 60px;
    border-top: 1px solid #e6e6e6;
}

.cashier-staff-log-row span,
.cashier-staff-log-row time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-staff-log-empty {
    height: 180px;
    padding-top: 75px;
    color: #999;
    text-align: center;
}

.cashier-staff-log-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 15px;
}

.cashier-staff-log-pager button {
    width: 32px;
    height: 32px;
    border: 1px solid #e6e6e6;
    background: #fff;
    cursor: pointer;
}

.cashier-staff-log-pager button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.cashier-staff-empty {
    position: relative;
    width: 100%;
    height: 100%;
}

.cashier-staff-empty img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 210px;
    transform: translate(-50%, -50%);
}

.cashier-staff-detail-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: 68px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-staff-detail-actions[hidden] {
    display: none;
}

.cashier-staff-detail-actions button {
    width: 100px;
    padding: 0;
}

.cashier-staff-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
}

.cashier-staff-modal[hidden] {
    display: none;
}

.cashier-staff-dialog {
    width: 420px;
    height: 338px;
    margin: 0;
    border: 0;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(0, 0, 0, .18);
}

.cashier-staff-dialog > header {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px 0 20px;
    border-bottom: 1px solid #f0f0f0;
}

.cashier-staff-dialog > header strong {
    font-weight: 400;
}

.cashier-staff-dialog > header button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #606266;
    font-size: 22px;
    cursor: pointer;
}

.cashier-staff-form {
    display: flex;
    height: 233px;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 20px;
}

.cashier-staff-form > label {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 10px;
}

.cashier-staff-form > label[hidden] {
    display: none;
}

.cashier-staff-form > label > span:first-child {
    width: 110px;
    flex: 0 0 110px;
    padding-right: 10px;
    text-align: right;
}

.cashier-staff-form i {
    margin-right: 3px;
    color: #f00;
    font-style: normal;
}

.cashier-staff-form input,
.cashier-staff-form select {
    width: 240px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    outline: 0;
    background: #fff;
    color: #303133;
    font: inherit;
}

.cashier-staff-form input:focus,
.cashier-staff-form select:focus {
    border-color: #1473ff;
}

.cashier-staff-form input:disabled {
    background: #f5f5f5;
    color: #909399;
}

.cashier-staff-radios {
    display: flex;
    width: 240px;
    align-items: center;
    gap: 26px;
}

.cashier-staff-radios label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cashier-staff-radios input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.cashier-staff-dialog > footer {
    height: 55px;
    padding: 7px 10px;
    border-top: 1px solid #eee;
}

.cashier-staff-dialog > footer .cashier-staff-primary {
    width: 100%;
}

.cashier-staff-confirm {
    width: 420px;
    padding: 30px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(0, 0, 0, .18);
}

.cashier-staff-confirm p {
    margin: 0 0 30px;
    font-size: 16px;
    text-align: center;
}

.cashier-staff-confirm footer {
    display: flex;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 1180px) {
    .cashier-staff-sidebar {
        width: 420px;
        flex-basis: 420px;
    }

    .cashier-staff-information-box dl {
        width: min(500px, calc(100% - 175px));
    }
}

/* The legacy admin pages share this card rhythm across modules. Keep the
   base contract here so individual pages only need to add their exceptions. */
.common-wrap {
    padding: 15px;
    margin: 15px 15px 0;
    background: #fff;
}

.common-wrap .head {
    display: flex;
    align-items: center;
}

.common-wrap .head .title {
    font-size: 16px;
}

.common-wrap .head .sub-title {
    margin-left: 10px;
    color: #999;
}

.common-wrap .body {
    margin-top: 15px;
}

/* 旧程序装修组件基础截断规则，商品/导航长文本都依赖这两个类。 */
.using-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-hidden {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.h5-mobile-body .h5-store-payment-phone,
.h5-store-payment-phone {
    background: #f4f5f7;
}

body.h5-mobile-body .h5-store-paycode-phone,
.h5-store-paycode-phone {
    background: #f72d1e;
    padding: 15px;
    box-sizing: border-box;
}

/* Store cashier: F7 card sales. Kept page-scoped so the sealed billing UI is unaffected. */
.cashier-card-pos .cashier-card-cart-empty img {
    width: 60%;
    max-width: 210px;
    margin: 40px auto 0;
    object-fit: contain;
}

.cashier-card-pos .cashier-card-cart-empty small {
    margin-top: 15px;
}

.cashier-card-pos .cashier-pos-workspace {
    gap: 20px;
    padding: 20px;
}

.cashier-card-pos .cashier-card-ticket {
    flex: 0 0 400px;
    min-width: 400px;
}

.cashier-card-ticket-action {
    display: flex;
    justify-content: flex-end;
}

.cashier-card-ticket-action .cashier-pos-button {
    width: 140px;
}

.cashier-card-stage,
.cashier-card-goods-view {
    height: 100%;
}

.cashier-card-goods-view {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.cashier-card-tabs {
    display: flex;
    flex: 0 0 88px;
    align-items: center;
    gap: 0;
    height: 88px;
    padding: 22px 24px;
    border-radius: 4px;
    background: #fff;
}

.cashier-card-tabs::before {
    position: absolute;
    width: 0;
    height: 0;
    content: "";
}

.cashier-card-tabs button {
    min-width: 102px;
    height: 44px;
    padding: 0 22px;
    border: 0;
    background: #edf5ff;
    color: #1473ff;
}

.cashier-card-tabs button:first-child {
    border-radius: 22px 0 0 22px;
}

.cashier-card-tabs button:last-child {
    border-radius: 0 22px 22px 0;
}

.cashier-card-tabs button.active {
    border-radius: 22px;
    background: #1473ff;
    color: #fff;
}

.cashier-card-list-scroll {
    flex: 1;
    min-height: 0;
    margin-top: 20px;
    padding: 30px;
    overflow-y: auto;
    border-radius: 4px;
    background: #fff;
    scrollbar-width: thin;
}

.cashier-card-list[hidden] {
    display: none;
}

.cashier-card-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}

.cashier-card-item {
    position: relative;
    display: flex;
    min-width: 0;
    height: 112px;
    padding: 10px 18px 10px 10px;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 4px;
    background: #fff;
    color: #303133;
    text-align: left;
    transition: border-color .18s, background-color .18s;
}

.cashier-card-item.has-stock:hover,
.cashier-card-item.has-stock:focus {
    border-color: #1473ff;
    background: #edf5ff;
    outline: 0;
}

.cashier-card-image {
    display: flex;
    flex: 0 0 90px;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 3px;
    background: #f2f6fb;
    color: #909399;
}

.cashier-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cashier-card-image em {
    font-size: 12px;
    font-style: normal;
}

.cashier-card-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    height: 90px;
    margin-left: 10px;
    flex-direction: column;
}

.cashier-card-copy strong {
    display: -webkit-box;
    max-height: 40px;
    overflow: hidden;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cashier-card-copy small {
    margin-top: 4px;
    overflow: hidden;
    color: #909399;
    font-size: 12px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-card-copy b {
    margin-top: auto;
    color: #1473ff;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
}

.cashier-card-item.no-stock {
    cursor: not-allowed;
}

.cashier-card-item > i {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-style: normal;
}

.cashier-card-empty,
.cashier-card-disabled {
    grid-column: 1 / -1;
    display: flex;
    min-height: 280px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #999;
    text-align: center;
}

.cashier-card-empty strong {
    color: #606266;
    font-size: 16px;
    font-weight: 500;
}

.cashier-card-empty span {
    margin-top: 8px;
}

.cashier-card-disabled {
    height: 100%;
    min-height: 420px;
    border-radius: 4px;
    background: #fff;
}

.cashier-card-payment-view .cashier-pos-pay-icon {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 50%;
    background: #f2f6fb;
    color: #1473ff;
}

.cashier-card-payment-view .cashier-pos-remark input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #dcdfe6;
    outline: 0;
}

.cashier-card-payment-view .cashier-pos-remark[hidden] {
    display: none;
}

.cashier-card-bill-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed #ddd;
}

.cashier-card-bill-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-card-bill-line strong {
    flex: 0 0 auto;
    color: #303133;
    font-weight: 400;
}

@media (max-width: 1500px) {
    .cashier-card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1701px) {
    .cashier-card-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Keep cashier dialogs independent from legacy admin modal overrides below the base layer. */
.old-modal-mask.cashier-goods-modal-mask,
.old-modal-mask.cashier-price-tags-picker-mask {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.old-modal-mask.cashier-goods-modal-mask[hidden],
.old-modal-mask.cashier-price-tags-picker-mask[hidden] {
    display: none;
}

.old-modal.cashier-goods-modal,
.old-modal.cashier-price-tags-picker {
    position: static;
    inset: auto;
    min-height: 0;
}

.old-modal.cashier-goods-modal {
    width: min(900px, calc(100vw - 80px));
}

.old-modal.cashier-price-tags-picker {
    width: min(860px, calc(100vw - 80px));
}

/* Cashier terminal: scoped standalone layout matched to the legacy POS. */
body.cashier-terminal-body {
    min-width: 1200px;
    margin: 0;
    overflow: hidden;
    background: #f5f7fa;
    color: #303133;
    font: 14px/1.5 "Microsoft YaHei", Arial, sans-serif;
}

.cashier-terminal-main {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.cashier-pos,
.cashier-pos * {
    box-sizing: border-box;
}

.cashier-pos {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #f5f7fa;
}

.cashier-pos button,
.cashier-pos input,
.cashier-pos textarea {
    font: inherit;
}

.cashier-pos button {
    cursor: pointer;
}

.cashier-pos-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 88px;
    padding: 18px 0 16px;
    background: #20293a;
    color: #fff;
}

.cashier-pos-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: #1473ff;
    color: #fff;
    text-decoration: none;
    line-height: 1.05;
}

.cashier-pos-brand span {
    font-size: 10px;
    font-weight: 600;
}

.cashier-pos-brand small {
    font-size: 10px;
}

.cashier-pos-primary-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 0;
}

.cashier-pos-primary-nav a,
.cashier-pos-more-button {
    position: relative;
    display: flex;
    flex: 0 0 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 0 20px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #bdc4d0;
    text-decoration: none;
    transition: color .15s, background .15s;
}

.cashier-pos-primary-nav a:hover,
.cashier-pos-primary-nav a.active,
.cashier-pos-more-button:hover,
.cashier-pos-more-button.active {
    background: #1473ff;
    color: #fff;
}

.cashier-pos-primary-nav i,
.cashier-pos-more-button i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    border: 1px solid currentColor;
    border-radius: 5px;
    font-size: 13px;
    font-style: normal;
    line-height: 22px;
}

.cashier-pos-more-button i {
    border: 0;
    font-size: 20px;
}

.cashier-pos-primary-nav span,
.cashier-pos-more-button span {
    font-size: 13px;
}

.cashier-pos-primary-nav kbd {
    position: absolute;
    right: 3px;
    bottom: 2px;
    color: inherit;
    font: 9px/1 Arial, sans-serif;
    opacity: .65;
}

.cashier-pos-more-button {
    flex: 0 0 60px;
    margin: 0;
}

.cashier-pos-more {
    position: fixed;
    z-index: 120;
    left: 78px;
    bottom: 16px;
    display: grid;
    grid-template-columns: repeat(3, 112px);
    gap: 0;
    width: 360px;
    padding: 14px 12px 12px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 5px 26px rgba(20, 31, 52, .2);
}

.cashier-pos-more[hidden] {
    display: none;
}

.cashier-pos-more::before {
    position: absolute;
    left: -8px;
    bottom: 20px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid #fff;
    border-bottom: 8px solid transparent;
    content: "";
}

.cashier-pos-more strong {
    grid-column: 1 / -1;
    padding: 9px 8px 6px;
    color: #999;
    font-size: 12px;
    font-weight: 400;
}

.cashier-pos-more a {
    height: 34px;
    padding: 0 8px;
    color: #303133;
    line-height: 34px;
    text-decoration: none;
}

.cashier-pos-more a:hover {
    background: #eef5ff;
    color: #1473ff;
}

/* Legacy cashier order workbench. This is intentionally isolated from the
   regular store/admin order tables because the POS uses a full-height split view. */
.cashier-order-terminal-main {
    display: flex;
    height: 100vh;
    margin-left: 88px;
    overflow: hidden;
    background: #fff;
}

.cashier-order-terminal-list {
    position: relative;
    display: flex;
    flex: 0 0 500px;
    flex-direction: column;
    width: 500px;
    min-width: 500px;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-order-terminal-title {
    position: relative;
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-order-terminal-title strong {
    color: #303133;
    font-size: 18px;
    font-weight: 500;
}

.cashier-order-terminal-title > button {
    position: absolute;
    top: 50%;
    right: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1473ff;
    transform: translateY(-50%);
}

.cashier-order-terminal-search {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    height: 60px;
    padding: 10px 20px;
    border-bottom: 1px solid #e6e6e6;
}

.cashier-order-terminal-search button {
    position: absolute;
    z-index: 1;
    width: 42px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
}

.cashier-order-terminal-search button::before {
    display: block;
    width: 12px;
    height: 12px;
    margin-left: 16px;
    border: 1.5px solid #909399;
    border-radius: 50%;
    content: "";
}

.cashier-order-terminal-search button::after {
    position: absolute;
    top: 25px;
    left: 28px;
    width: 6px;
    height: 1.5px;
    background: #909399;
    content: "";
    transform: rotate(45deg);
}

.cashier-order-terminal-search input {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 42px;
    border: 0;
    border-radius: 4px;
    outline: none;
    background: #f5f5f5;
    color: #303133;
    font-size: 14px;
}

.cashier-order-terminal-scenes {
    display: flex;
    flex: 0 0 55px;
    align-items: center;
    gap: 15px;
    height: 55px;
    padding: 0 20px;
    border-bottom: 1px solid #e6e6e6;
}

.cashier-order-terminal-scenes a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    height: 32px;
    padding: 0 18px;
    border: 1px solid #e6e6e6;
    color: #303133;
    text-decoration: none;
}

.cashier-order-terminal-scenes a.active {
    border-color: #1473ff;
    color: #1473ff;
}

.cashier-order-terminal-cards {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cashier-order-terminal-card {
    display: block;
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    color: #303133;
    text-decoration: none;
    transition: background .15s;
}

.cashier-order-terminal-card:hover,
.cashier-order-terminal-card.active {
    background: #eef5ff;
}

.cashier-order-terminal-card-title,
.cashier-order-terminal-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.cashier-order-terminal-card-title {
    margin-bottom: 18px;
}

.cashier-order-terminal-card-title strong {
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-order-terminal-card-title span {
    flex: 0 0 auto;
    margin-left: 15px;
    color: #1473ff;
}

.cashier-order-terminal-card-summary {
    gap: 12px;
}

.cashier-order-terminal-card-summary > span:first-child {
    flex: 0 0 auto;
}

.cashier-order-terminal-card-summary .buyer {
    display: flex;
    flex: 1;
    min-width: 0;
}

.cashier-order-terminal-card-summary .buyer b {
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-order-terminal-card-summary .amount {
    flex: 0 0 auto;
}

.cashier-order-terminal-card-summary .amount b {
    margin-left: 5px;
    color: #fe2278;
    font-size: 18px;
    font-weight: 400;
}

.cashier-order-terminal-card-summary em {
    flex: 0 0 auto;
    padding: 2px 4px;
    border: 1px solid #1473ff;
    border-radius: 2px;
    color: #1473ff;
    font-size: 12px;
    font-style: normal;
}

.cashier-order-terminal-empty,
.cashier-order-terminal-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #e0e3e8;
    font-size: 32px;
}

.cashier-order-terminal-pagination {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 44px;
    border-top: 1px solid #e6e6e6;
}

.cashier-order-terminal-pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #e6e6e6;
    color: #303133;
    text-decoration: none;
}

.cashier-order-terminal-pagination a.disabled {
    color: #c6cad1;
    cursor: not-allowed;
}

.cashier-order-terminal-filter {
    position: absolute;
    z-index: 10;
    inset: 60px 0 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.cashier-order-terminal-filter[hidden],
.cashier-order-terminal-detail-panel[hidden] {
    display: none !important;
}

.cashier-order-terminal-filter-scroll {
    flex: 1;
    min-height: 0;
    padding: 6px 22px 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

.cashier-order-terminal-filter fieldset {
    margin: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
}

.cashier-order-terminal-filter legend {
    margin-bottom: 12px;
    color: #303133;
    font-size: 15px;
}

.cashier-order-filter-dates {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cashier-order-filter-dates input {
    width: calc(50% - 12px);
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #dfe3ea;
    border-radius: 2px;
    color: #303133;
}

.cashier-order-filter-quick,
.cashier-order-filter-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cashier-order-filter-quick {
    margin-top: 12px;
}

.cashier-order-filter-quick button,
.cashier-order-filter-values span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #e6e6e6;
    background: #fff;
    color: #303133;
}

.cashier-order-filter-quick button:hover,
.cashier-order-filter-values input:checked + span {
    border-color: #1473ff;
    color: #1473ff;
}

.cashier-order-filter-values input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cashier-order-terminal-filter-actions {
    display: flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 64px;
    border-top: 1px solid #e6e6e6;
}

.cashier-order-terminal-filter-actions a,
.cashier-order-terminal-filter-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 36px;
    border: 1px solid #dfe3ea;
    border-radius: 2px;
    background: #fff;
    color: #303133;
    text-decoration: none;
}

.cashier-order-terminal-filter-actions button {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-order-terminal-detail {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.cashier-order-terminal-detail-tabs {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-order-terminal-detail-tabs button {
    height: 50px;
    padding: 0 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #606266;
}

.cashier-order-terminal-detail-tabs button.active {
    border-bottom-color: #1473ff;
    color: #1473ff;
}

.cashier-order-terminal-detail-scroll {
    flex: 1;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    background: #f8f8f8;
}

.cashier-order-terminal-detail-panel h2 {
    margin: 0 0 24px;
    color: #303133;
    font-size: 24px;
}

.cashier-order-terminal-info-card {
    margin: 0 0 20px;
    padding: 20px 30px;
    background: #fff;
}

.cashier-order-terminal-info-card h3 {
    margin: 0 0 20px;
    color: #303133;
    font-size: 18px;
    font-weight: 500;
}

.cashier-order-terminal-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 30px;
}

.cashier-order-terminal-info-grid p {
    display: flex;
    min-width: 0;
    margin: 0;
    color: #303133;
    word-break: break-word;
}

.cashier-order-terminal-info-grid p.wide {
    grid-column: 1 / -1;
}

.cashier-order-terminal-info-grid p > span {
    flex: 0 0 112px;
    text-align: right;
}

.cashier-order-terminal-info-grid .price {
    color: #fe2278;
    font-weight: 400;
}

.cashier-order-terminal-goods-table,
.cashier-order-terminal-log-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.cashier-order-terminal-goods-table th,
.cashier-order-terminal-goods-table td,
.cashier-order-terminal-log-table th,
.cashier-order-terminal-log-table td {
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
    font-weight: 400;
}

.cashier-order-terminal-goods-table th:first-child {
    width: 46%;
}

.cashier-order-terminal-goods-table thead,
.cashier-order-terminal-log-table thead {
    background: #f7f8fa;
}

.cashier-order-terminal-goods-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cashier-order-terminal-goods-cell .image {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    overflow: hidden;
    background: #f3f5f8;
    color: #a0a7b4;
    font-size: 12px;
}

.cashier-order-terminal-goods-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cashier-order-terminal-goods-cell > span:last-child {
    min-width: 0;
}

.cashier-order-terminal-goods-cell strong,
.cashier-order-terminal-goods-cell small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-order-terminal-goods-cell strong {
    font-weight: 400;
}

.cashier-order-terminal-goods-cell small {
    margin-top: 5px;
    color: #909399;
}

.cashier-order-terminal-actions {
    display: flex;
    flex: 0 0 80px;
    align-items: center;
    justify-content: flex-end;
    min-height: 80px;
    padding: 18px 20px;
    border-top: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-order-terminal-actions .table-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cashier-order-terminal-actions .layui-btn {
    height: 40px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #1473ff;
    border-radius: 2px;
    background: #1473ff;
    color: #fff;
    line-height: 38px;
}

@media (max-width: 1500px) {
    .cashier-order-terminal-list {
        flex-basis: 430px;
        width: 430px;
        min-width: 430px;
    }

    .cashier-order-terminal-card {
        padding: 16px;
    }

    .cashier-order-terminal-card-summary {
        gap: 8px;
        font-size: 13px;
    }

    .cashier-order-terminal-scenes a {
        min-width: 108px;
    }

    .cashier-order-terminal-info-card {
        padding: 18px 20px;
    }

    .cashier-order-terminal-info-grid p > span {
        flex-basis: 92px;
    }
}

/* Legacy cashier price-tag workbench. */
.cashier-price-tags,
.cashier-price-tags * {
    box-sizing: border-box;
}

.cashier-price-tags {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    color: #303133;
}

.cashier-price-tags-main {
    position: relative;
    width: calc(100% - 88px);
    height: 100vh;
    margin-left: 88px;
    padding: 15px 15px 88px;
    overflow: hidden;
    background: #fff;
}

.cashier-price-tags-title {
    display: flex;
    height: 42px;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.cashier-price-tags-title a {
    color: #303133;
    text-decoration: none;
}

.cashier-price-tags-title a:first-letter {
    font-size: 25px;
}

.cashier-price-tags-title i {
    color: #c0c4cc;
    font-style: normal;
}

.cashier-price-tags-title strong {
    font-weight: 400;
}

.cashier-price-tags-actions {
    display: flex;
    gap: 15px;
    height: 50px;
    align-items: center;
}

.cashier-price-tags-actions button,
.cashier-price-tags-footer button,
.cashier-price-tags-picker-search button,
.cashier-price-tags-picker footer button {
    height: 34px;
    padding: 0 15px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    background: #fff;
    color: #303133;
    cursor: pointer;
}

.cashier-price-tags-table-wrap {
    height: calc(100vh - 210px);
    border: 1px solid #dcdfe6;
    overflow: auto;
}

.cashier-price-tags-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.cashier-price-tags-table th,
.cashier-price-tags-table td {
    height: 52px;
    padding: 7px 16px;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    text-align: center;
    vertical-align: middle;
}

.cashier-price-tags-table th:last-child,
.cashier-price-tags-table td:last-child {
    border-right: 0;
}

.cashier-price-tags-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7f7f7;
    font-weight: 400;
}

.cashier-price-tags-table input[type="checkbox"],
.cashier-price-tags-picker input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.cashier-price-tags-table .goods-name {
    text-align: left;
}

.cashier-price-tags-table .goods-name strong,
.cashier-price-tags-table .goods-name small {
    display: block;
    font-weight: 400;
    line-height: 21px;
}

.cashier-price-tags-table .goods-name small {
    color: #909399;
}

.cashier-price-tags-empty td {
    height: 160px;
    border-bottom: 0;
    color: #999;
}

.cashier-price-tags-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: 73px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #fff;
    box-shadow: 0 -1px 0 #ebeef5;
}

.cashier-price-tags-footer span b {
    font-weight: 400;
}

.cashier-price-tags-footer > div {
    display: flex;
    gap: 15px;
}

.cashier-price-tags-footer button {
    min-width: 120px;
    height: 40px;
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-price-tags-picker-mask {
    position: fixed;
    inset: 0;
    z-index: 4200;
}

.cashier-price-tags-picker {
    position: static;
    inset: auto;
    width: min(860px, calc(100vw - 80px));
    min-height: 0;
    border-radius: 3px;
}

.cashier-price-tags-picker-search {
    display: flex;
    justify-content: flex-end;
    padding: 15px 20px;
    background: #f5f7fa;
}

.cashier-price-tags-picker-search input {
    width: 340px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #dcdfe6;
    outline: 0;
}

.cashier-price-tags-picker-search button {
    border-left: 0;
    border-radius: 0 3px 3px 0;
}

.cashier-price-tags-picker-list {
    height: 430px;
    padding: 0 20px;
    overflow-y: auto;
}

.cashier-price-tags-picker-list label {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #ebeef5;
    cursor: pointer;
}

.cashier-price-tags-picker-list .thumb {
    display: flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ebeef5;
    background: #f5f7fa;
    color: #909399;
    font-size: 12px;
}

.cashier-price-tags-picker-list .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cashier-price-tags-picker-list .info {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.cashier-price-tags-picker-list .info strong {
    font-weight: 400;
}

.cashier-price-tags-picker-list .info small,
.cashier-price-tags-picker-list .info em {
    color: #909399;
    font-style: normal;
}

.cashier-price-tags-picker-empty {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #999;
}

.cashier-price-tags-picker footer {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-top: 1px solid #ebeef5;
}

.cashier-price-tags-picker footer button.primary {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-price-tags-print-sheet {
    display: none;
}

@media print {
    body > *:not(.cashier-price-tags-print-sheet) {
        display: none !important;
    }

    .cashier-price-tags-print-sheet {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4mm;
        padding: 4mm;
    }

    .cashier-price-tags-print-sheet article {
        display: grid;
        min-height: 32mm;
        align-content: center;
        border: .2mm solid #222;
        padding: 3mm;
        break-inside: avoid;
    }

    .cashier-price-tags-print-sheet article strong,
    .cashier-price-tags-print-sheet article span,
    .cashier-price-tags-print-sheet article small,
    .cashier-price-tags-print-sheet article em {
        font-style: normal;
        line-height: 1.5;
    }

    .cashier-price-tags-print-sheet article b {
        font-size: 22pt;
    }
}

.cashier-pos-workspace {
    display: flex;
    gap: 20px;
    height: 100vh;
    margin-left: 88px;
    padding: 20px;
    overflow: hidden;
}

.cashier-pos-ticket,
.cashier-pos-stage,
.cashier-pos-goods-head,
.cashier-pos-categories,
.cashier-pos-payment-view,
.cashier-pos-money-box {
    border-radius: 4px;
    background: #fff;
}

.cashier-pos-ticket {
    position: relative;
    display: flex;
    flex: 0 0 400px;
    flex-direction: column;
    min-width: 400px;
    height: 100%;
    overflow: hidden;
}

.cashier-pos-time {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.cashier-pos-time span {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    line-height: 28px;
}

.cashier-pos-time input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #e5e5e5;
    color: #303133;
}

.cashier-pos-member {
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.cashier-pos-avatar {
    display: flex;
    flex: 0 0 54px;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #edf4ff;
    color: #1473ff;
    font-size: 20px;
}

.cashier-pos-member-copy {
    flex: 1;
    min-width: 0;
    margin-left: 10px;
}

.cashier-pos-member-copy strong,
.cashier-pos-member-copy span,
.cashier-pos-member-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-pos-member-copy strong {
    color: #222;
    font-size: 15px;
}

.cashier-pos-member-copy span,
.cashier-pos-member-copy small {
    margin-top: 3px;
    color: #808695;
    font-size: 12px;
}

.cashier-pos-member-button,
.cashier-pos-member-guest {
    flex: 0 0 auto;
    height: 34px;
    margin-left: 8px;
    padding: 0 12px;
    border: 1px solid #1473ff;
    border-radius: 2px;
    background: #1473ff;
    color: #fff;
}

.cashier-pos-member-guest {
    border-color: #dcdfe6;
    background: #fff;
    color: #606266;
}

.cashier-pos-cart {
    flex: 1;
    min-height: 0;
    padding: 0 20px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cashier-pos-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 240px;
    color: #999;
    text-align: center;
}

.cashier-pos-empty span {
    font-size: 15px;
}

.cashier-pos-empty small {
    margin-top: 8px;
    color: #aaa;
}

.cashier-pos-empty.error {
    color: #f04444;
}

.cashier-pos-cart-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #e6e6e6;
}

.cashier-pos-cart-image {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: #f4f7fb;
    color: #999;
    font-size: 12px;
}

.cashier-pos-cart-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cashier-pos-cart-copy {
    flex: 1;
    min-width: 0;
}

.cashier-pos-cart-copy > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cashier-pos-cart-copy strong {
    overflow: hidden;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-pos-cart-copy > div:first-child button {
    border: 0;
    background: transparent;
    color: #888;
}

.cashier-pos-cart-copy > div:first-child button:hover {
    color: #1473ff;
}

.cashier-pos-cart-copy > small {
    display: block;
    min-height: 18px;
    margin-top: 2px;
    color: #808695;
    font-size: 12px;
}

.cashier-pos-cart-price {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    margin-top: 5px;
}

.cashier-pos-cart-price em {
    color: #303133;
    font-style: normal;
}

.cashier-pos-cart-price > span {
    color: #f23c3c;
}

.cashier-pos-cart-price > div {
    display: flex;
    align-items: center;
}

.cashier-pos-cart-price button,
.cashier-pos-cart-price input {
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid #e6e6e6;
    background: #fff;
    text-align: center;
}

.cashier-pos-cart-price button:last-child {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-pos-cart-price input {
    width: 40px;
    border-width: 1px 0;
}

.cashier-pos-ticket-bottom {
    flex: 0 0 auto;
    padding: 16px 20px 24px;
    background: #fff;
    box-shadow: 0 -1px 0 #eee;
}

.cashier-pos-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    margin-bottom: 16px;
}

.cashier-pos-total span {
    font-weight: 500;
}

.cashier-pos-total strong {
    color: #1473ff;
    font-size: 27px;
}

.cashier-pos-total em {
    font-style: normal;
}

.cashier-pos-ticket-actions {
    display: grid;
    grid-template-columns: 98px 98px 1fr;
    gap: 10px;
}

.cashier-pos-button {
    height: 40px;
    padding: 0 16px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    background: #fff;
    color: #303133;
}

.cashier-pos-button.primary {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-pos-button:disabled {
    border-color: #c8d8f4;
    background: #c8d8f4;
    cursor: not-allowed;
}

.cashier-pos-ticket-actions em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 9px;
    background: #f04444;
    color: #fff;
    font-size: 11px;
    font-style: normal;
}

.cashier-pos-ticket-shade {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255, 255, 255, .62);
}

.cashier-pos-ticket-shade[hidden] {
    display: none;
}

.cashier-pos-stage {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

.cashier-pos-goods-view,
.cashier-pos-payment-view,
.cashier-pos-success {
    width: 100%;
    height: 100%;
}

.cashier-pos-goods-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    margin-bottom: 20px;
    padding: 22px 24px;
}

.cashier-pos-segmented {
    display: flex;
    height: 44px;
    border-radius: 22px;
    background: #edf5ff;
}

.cashier-pos-segmented button {
    min-width: 102px;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #1473ff;
}

.cashier-pos-segmented button.active {
    background: #1473ff;
    color: #fff;
}

.cashier-pos-search {
    display: flex;
    width: 318px;
    height: 40px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: #fff;
}

.cashier-pos-search[hidden] {
    display: none;
}

.cashier-pos-search input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 4px 0 22px;
    border: 0;
    outline: 0;
}

.cashier-pos-search button {
    width: 42px;
    height: 38px;
    border: 0;
    background: #fff;
    color: #303133;
    font-size: 24px;
}

.cashier-pos-goods-body {
    display: flex;
    gap: 20px;
    height: calc(100% - 108px);
}

.cashier-pos-goods-body[hidden] {
    display: none;
}

.cashier-pos-categories {
    flex: 0 0 152px;
    width: 152px;
    padding: 24px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cashier-pos-categories button {
    width: 104px;
    height: 40px;
    margin: 0 0 20px;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    background: #fff;
    color: #303133;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-pos-categories button.active {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-pos-product-area {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding-bottom: 62px;
    overflow: hidden;
}

.cashier-pos-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-content: start;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cashier-pos-product-grid > .cashier-pos-empty {
    grid-column: 1 / -1;
}

.cashier-pos-product-card {
    min-width: 0;
    height: 132px;
    padding: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

.cashier-pos-product-card:hover,
.cashier-pos-product-card:focus {
    border-color: #1473ff;
    box-shadow: 0 3px 12px rgba(20, 115, 255, .1);
    outline: 0;
}

.cashier-pos-product-image {
    display: flex;
    float: left;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin-right: 14px;
    overflow: hidden;
    background: #f2f6fb;
    color: #9aa3b2;
}

.cashier-pos-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cashier-pos-product-image i {
    font-size: 12px;
    font-style: normal;
}

.cashier-pos-product-copy {
    display: flex;
    min-width: 0;
    height: 90px;
    flex-direction: column;
    justify-content: space-between;
}

.cashier-pos-product-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cashier-pos-product-copy > span {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
}

.cashier-pos-product-copy em {
    color: #f23c3c;
    font-size: 16px;
    font-style: normal;
}

.cashier-pos-product-copy small {
    overflow: hidden;
    color: #999;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-pos-pagination {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: 58px;
    padding: 0 20px;
    background: #fff;
}

.cashier-pos-pagination[hidden] {
    display: none;
}

.cashier-pos-pagination button {
    width: 32px;
    height: 32px;
    border: 1px solid #dcdfe6;
    background: #fff;
}

.cashier-pos-money-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 108px);
}

.cashier-pos-money-panel[hidden] {
    display: none;
}

.cashier-pos-money-box {
    width: 440px;
    padding: 30px 20px;
}

.cashier-pos-money-input {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 16px;
    border: 1px solid #e6e6e6;
}

.cashier-pos-money-input span,
.cashier-pos-money-input input {
    font-size: 25px;
}

.cashier-pos-money-input input {
    flex: 1;
    min-width: 0;
    height: 58px;
    margin-left: 5px;
    border: 0;
    outline: 0;
}

.cashier-pos-keyboard {
    display: grid;
    grid-template-columns: 1fr 92px;
    gap: 10px;
    margin-top: 10px;
}

.cashier-pos-number-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cashier-pos-keyboard button {
    height: 54px;
    border: 1px solid #e6e6e6;
    background: #fff;
    color: #303133;
    font-size: 18px;
}

.cashier-pos-key-actions {
    display: grid;
    grid-template-rows: 54px 54px 1fr;
    gap: 8px;
}

.cashier-pos-key-actions button {
    font-size: 14px;
}

.cashier-pos-key-actions button.primary {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-pos-payment-view {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) 330px;
    gap: 20px;
    background: transparent;
}

.cashier-pos-payment-view[hidden] {
    display: none;
}

.cashier-pos-payment-main,
.cashier-pos-bill {
    height: 100%;
    padding: 24px;
    overflow-y: auto;
    border-radius: 4px;
    background: #fff;
}

.cashier-pos-payment-main h2 {
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
    font-size: 20px;
}

.cashier-pos-settlement-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    border-bottom: 1px solid #f0f0f0;
}

.cashier-pos-settlement-row strong {
    font-size: 17px;
}

.cashier-pos-settlement-row strong.discount {
    color: #f04444;
}

.cashier-pos-pay-title {
    margin: 26px 0 12px;
    font-weight: 600;
}

.cashier-pos-pay-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cashier-pos-pay-method {
    position: relative;
    display: flex;
    align-items: center;
    height: 62px;
    padding: 0 14px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
}

.cashier-pos-pay-method input {
    position: absolute;
    opacity: 0;
}

.cashier-pos-pay-method i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 50%;
    background: #f2f6fb;
    color: #1473ff;
    font-style: normal;
}

.cashier-pos-pay-method.active {
    border-color: #1473ff;
    color: #1473ff;
}

.cashier-pos-cash,
.cashier-pos-remark {
    display: block;
    margin-top: 20px;
}

.cashier-pos-cash[hidden] {
    display: none;
}

.cashier-pos-cash label,
.cashier-pos-remark > span {
    display: block;
    margin-bottom: 8px;
}

.cashier-pos-cash > div {
    display: flex;
    align-items: center;
    width: 280px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dcdfe6;
}

.cashier-pos-cash input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 0;
    outline: 0;
}

.cashier-pos-cash small {
    display: block;
    margin-top: 6px;
    color: #1473ff;
}

.cashier-pos-remark textarea {
    width: 100%;
    min-height: 76px;
    padding: 10px;
    border: 1px solid #dcdfe6;
    resize: vertical;
}

.cashier-pos-payment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.cashier-pos-payment-actions .cashier-pos-button {
    min-width: 112px;
}

.cashier-pos-bill h3 {
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
    font-size: 17px;
    text-align: center;
}

.cashier-pos-bill-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px 76px;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px dashed #ddd;
}

.cashier-pos-bill-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-pos-bill-line small {
    display: block;
    color: #999;
}

.cashier-pos-bill-line b,
.cashier-pos-bill-line em {
    font-style: normal;
    font-weight: 400;
    text-align: right;
}

.cashier-pos-bill dl {
    margin-top: 20px;
}

.cashier-pos-bill dl > div {
    display: flex;
    justify-content: space-between;
    min-height: 34px;
}

.cashier-pos-bill dt,
.cashier-pos-bill dd {
    margin: 0;
}

.cashier-pos-bill .total {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    font-size: 18px;
    font-weight: 600;
}

.cashier-pos-bill .total dd {
    color: #1473ff;
    font-size: 22px;
}

.cashier-pos-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #fff;
}

.cashier-pos-success[hidden] {
    display: none;
}

.cashier-pos-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e9f8ef;
    color: #25b864;
    font-size: 42px;
}

.cashier-pos-success h2 {
    margin: 18px 0 6px;
}

.cashier-pos-success > strong {
    color: #1473ff;
    font-size: 30px;
}

.cashier-pos-success p {
    margin: 12px 0 24px;
    color: #808695;
}

.cashier-terminal-body .cashier-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .42);
}

.cashier-terminal-body .cashier-modal[hidden] {
    display: none;
}

.cashier-terminal-body .cashier-modal-box {
    width: 720px;
    max-height: 76vh;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

.cashier-terminal-body .cashier-modal-box.small {
    width: 480px;
}

.cashier-terminal-body .cashier-modal-box.pending-box {
    width: 820px;
}

.cashier-terminal-body .cashier-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
}

.cashier-terminal-body .cashier-panel-title > button {
    border: 0;
    background: transparent;
    color: #999;
    font-size: 24px;
}

.cashier-terminal-body .cashier-search-input {
    display: flex;
    padding: 18px 20px;
}

.cashier-terminal-body .cashier-search-input input,
.cashier-terminal-body [data-field="payment-code"] {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dcdfe6;
}

.cashier-terminal-body .cashier-search-input button {
    width: 72px;
    height: 40px;
    border: 1px solid #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-terminal-body .cashier-member-results,
.cashier-terminal-body .cashier-sku-results,
.cashier-terminal-body .cashier-pending-list {
    max-height: calc(76vh - 112px);
    padding: 0 20px 20px;
    overflow-y: auto;
}

.cashier-terminal-body .cashier-member-row,
.cashier-terminal-body .cashier-sku-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #eee;
    background: #fff;
    text-align: left;
}

.cashier-terminal-body .cashier-member-row:hover,
.cashier-terminal-body .cashier-sku-row:hover {
    background: #f4f8ff;
}

.cashier-terminal-body .cashier-member-row span,
.cashier-terminal-body .cashier-sku-row small {
    color: #808695;
}

.cashier-terminal-body .cashier-sku-row em {
    color: #f04444;
    font-style: normal;
}

.cashier-code-tip {
    margin: 20px 20px 12px;
    color: #808695;
}

.cashier-terminal-body [data-field="payment-code"] {
    width: calc(100% - 40px);
    margin: 0 20px;
}

.cashier-code-confirm {
    display: block;
    width: 120px;
    margin: 18px auto 22px;
}

.cashier-pending-row {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

.cashier-pending-head,
.cashier-pending-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cashier-pending-head strong {
    color: #1473ff;
    font-size: 18px;
}

.cashier-pending-head span,
.cashier-pending-meta {
    color: #808695;
}

.cashier-pending-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 8px 0 12px;
}

.cashier-pending-actions {
    justify-content: flex-end;
    gap: 8px;
}

.cashier-pending-actions button {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #dcdfe6;
    background: #fff;
}

.cashier-pending-actions button.primary {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-toast {
    position: fixed;
    z-index: 1000;
    top: 30px;
    left: 50%;
    min-width: 160px;
    padding: 11px 18px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: rgba(34, 34, 34, .9);
    color: #fff;
    text-align: center;
}

.cashier-toast.success {
    background: rgba(34, 162, 92, .94);
}

.cashier-toast.error {
    background: rgba(230, 70, 70, .94);
}

/* Legacy cashier recharge page: the ticket stays disabled while the right
   pane switches between member recharge and payment. */
.cashier-recharge-ticket .cashier-pos-cart {
    pointer-events: none;
}

.cashier-recharge-ticket-action {
    display: flex;
    justify-content: flex-end;
}

.cashier-recharge-ticket-action .cashier-pos-button {
    width: 140px;
}

.cashier-recharge-stage {
    border: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-recharge-member-view {
    position: relative;
    height: 100%;
    padding: 0 20px 84px;
    overflow-y: auto;
    background: #fff;
}

.cashier-recharge-member-view[hidden] {
    display: none;
}

.cashier-recharge-page-title {
    height: 66px;
    border-bottom: 1px solid #e6e6e6;
    color: #303133;
    font-size: 14px;
    line-height: 66px;
}

.cashier-recharge-disabled-old {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    color: #999;
}

.cashier-recharge-profile {
    display: flex;
    align-items: center;
    min-height: 110px;
    padding-top: 20px;
}

.cashier-recharge-profile-avatar {
    display: flex;
    flex: 0 0 70px;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 50%;
    background: #edf4ff;
    color: #1473ff;
    font-size: 24px;
}

.cashier-recharge-profile-copy {
    flex: 1;
    min-width: 0;
    margin-left: 15px;
}

.cashier-recharge-profile-copy > div {
    display: flex;
    align-items: center;
    min-height: 32px;
}

.cashier-recharge-profile-copy strong {
    max-width: 260px;
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-recharge-profile-copy [data-profile-level] {
    min-width: 65px;
    height: 22px;
    margin-left: 15px;
    padding: 0 4px;
    border: 1px solid #1473ff;
    border-radius: 2px;
    color: #1473ff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.cashier-recharge-profile-copy [data-profile-level][hidden] {
    display: none;
}

.cashier-recharge-profile-copy .cashier-pos-button {
    width: 100px;
    height: 28px;
    margin-left: 10px;
    padding: 0 10px;
}

.cashier-recharge-profile-copy p {
    margin: 8px 0 0;
    color: #606266;
}

.cashier-recharge-form {
    width: min(920px, 100%);
    margin-top: 20px;
}

.cashier-recharge-form-row {
    display: flex;
    margin-bottom: 12px;
}

.cashier-recharge-form-row[hidden],
.cashier-recharge-gift-tip[hidden] {
    display: none;
}

.cashier-recharge-form-row > label {
    flex: 0 0 130px;
    width: 130px;
    height: 32px;
    padding-right: 10px;
    line-height: 32px;
    text-align: right;
}

.cashier-recharge-form-row > label i {
    margin-right: 3px;
    color: #f00;
    font-style: normal;
}

.cashier-recharge-form-row > div {
    flex: 1;
    min-width: 0;
}

.cashier-recharge-mode {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 32px;
}

.cashier-recharge-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.cashier-recharge-mode input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #1473ff;
}

.cashier-recharge-package-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
}

.cashier-recharge-package-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 62px;
    margin-bottom: 10px;
    padding: 5px 15px;
    border: 1px solid #e6e6e6;
    cursor: pointer;
    white-space: nowrap;
}

.cashier-recharge-package-option input {
    position: absolute;
    opacity: 0;
}

.cashier-recharge-package-option strong {
    font-size: 17px;
}

.cashier-recharge-package-option span {
    color: #999;
}

.cashier-recharge-package-option.active {
    border-color: #1473ff;
    background: #f1f6ff;
    color: #1473ff;
}

.cashier-recharge-package-option.active span {
    color: #1473ff;
}

.cashier-recharge-input {
    width: 230px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}

.cashier-recharge-rewards span {
    display: block;
    width: max-content;
    min-width: 240px;
    margin-bottom: 10px;
    padding: 5px 10px;
    background: #f8f8f8;
    color: #1473ff;
    font-size: 13px;
}

.cashier-recharge-gift-tip {
    margin: 0 0 15px 130px;
    color: #999;
}

.cashier-recharge-next {
    position: absolute;
    bottom: 24px;
    left: 150px;
    width: 140px;
}

.cashier-recharge-payment-view {
    padding: 0;
    border: 0;
}

.cashier-recharge-payment-view .cashier-pos-pay-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 50%;
    background: #f2f6fb;
    color: #1473ff;
}

.cashier-recharge-bill dd {
    max-width: 165px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legacy shift handoff in the standalone POS terminal. */
.cashier-shift-terminal-main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin-left: 88px;
    overflow: hidden;
    background: #f5f7fa;
}

.cashier-shift-terminal-panel {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 620px;
    max-height: calc(100vh - 32px);
    padding: 24px 40px 18px;
    overflow-y: auto;
}

.cashier-shift-terminal-panel h1 {
    margin: 0;
    color: #567485;
    font-size: 16px;
    font-weight: 700;
}

.cashier-shift-terminal-time {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-top: 20px;
    padding: 8px 14px;
    border-radius: 5px;
    background: #eaf3ff;
    color: #1473ff;
    font-size: 14px;
}

.cashier-shift-terminal-time strong {
    margin: 0 5px;
    font-weight: 700;
}

.cashier-shift-terminal-time i {
    margin: 0 4px;
    font-style: normal;
}

.cashier-shift-terminal-metrics {
    width: 540px;
    margin-top: 30px;
}

.cashier-shift-terminal-metric {
    display: flex;
    align-items: center;
    width: 540px;
    height: 60px;
    margin-top: 10px;
    padding: 0 23px;
    border: 1px solid #e1e1e1;
    background: #f9fbfb;
}

.cashier-shift-terminal-metric:first-child {
    margin-top: 0;
}

.cashier-shift-terminal-mark {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 15%;
    background: #1473ff;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.cashier-shift-terminal-metric > strong {
    margin-left: 20px;
    color: #567485;
    font-size: 16px;
}

.cashier-shift-terminal-metric > em {
    margin-left: auto;
    color: #567485;
    font-size: 14px;
    font-style: normal;
}

.cashier-shift-terminal-detail-link {
    height: 34px;
    margin-top: 25px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #1473ff;
}

.cashier-shift-terminal-detail-link span {
    margin-left: 5px;
    font-size: 18px;
}

.cashier-shift-terminal-actions {
    display: flex;
    gap: 21px;
    margin-top: 64px;
}

.cashier-shift-terminal-button {
    width: 170px;
    height: 50px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    background: #fff;
    color: #606266;
}

.cashier-shift-terminal-button.primary {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-shift-terminal-button.compact {
    width: 100px;
    height: 38px;
}

.cashier-shift-terminal-button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.cashier-terminal-body .cashier-shift-terminal-detail-modal {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 60vh;
}

.cashier-shift-terminal-detail-content {
    flex: 1;
    min-height: 0;
    padding: 10px 20px;
    overflow-y: auto;
    color: #303133;
}

.cashier-shift-terminal-detail-content section {
    margin-left: 30px;
}

.cashier-shift-terminal-detail-content strong,
.cashier-shift-terminal-detail-content p {
    display: block;
    margin: 0;
    padding: 10px;
}

.cashier-shift-terminal-detail-content p {
    margin-left: 40px;
    color: #606266;
    font-weight: 400;
}

.cashier-shift-terminal-detail-footer {
    display: flex;
    justify-content: flex-end;
    padding: 15px;
    border-top: 1px solid #eee;
}

.cashier-terminal-body .cashier-shift-terminal-confirm-modal {
    padding-bottom: 20px;
}

.cashier-shift-terminal-confirm-modal > p {
    margin: 0;
    padding: 30px 24px;
    color: #303133;
    font-size: 15px;
    text-align: center;
}

.cashier-shift-terminal-confirm-modal > div:last-child {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Shift record and sold-goods management pages inside the cashier shell. */
.cashier-shift-manage-main {
    height: 100vh;
    margin-left: 88px;
    padding: 15px;
    overflow: auto;
    background: #fff;
}

.cashier-shift-manage-filter {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 65px;
    margin-bottom: 15px;
    padding: 15px;
    background: #f2f3f5;
}

.cashier-shift-manage-filter input,
.cashier-shift-manage-filter select {
    width: 210px;
    height: 35px;
    padding: 0 10px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    background: #fff;
    color: #303133;
}

.cashier-shift-manage-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 72px;
    height: 35px;
    padding: 0 15px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    background: #fff;
    color: #303133;
    text-decoration: none;
}

.cashier-shift-manage-button.primary {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-shift-manage-table-wrap {
    width: 100%;
    overflow-x: auto;
    background: #fff;
}

.cashier-shift-manage-table {
    width: 100%;
    min-width: 1160px;
    border-collapse: collapse;
    table-layout: fixed;
}

.cashier-shift-manage-table col.employee {
    width: 12%;
}

.cashier-shift-manage-table col.time {
    width: 14%;
}

.cashier-shift-manage-table col.action {
    width: 12%;
}

.cashier-shift-manage-table th,
.cashier-shift-manage-table td {
    height: 50px;
    padding: 10px 14px;
    border-bottom: 1px solid #ebeef5;
    color: #303133;
    text-align: left;
    vertical-align: middle;
}

.cashier-shift-manage-table th {
    height: 45px;
    background: #f5f7fa;
    font-weight: 400;
}

.cashier-shift-manage-table .center {
    text-align: center;
}

.cashier-shift-manage-table .number {
    text-align: right;
}

.cashier-shift-manage-actions button,
.cashier-shift-manage-actions a {
    margin-left: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1473ff;
    text-decoration: none;
}

.cashier-shift-manage-actions button:first-child,
.cashier-shift-manage-actions a:first-child {
    margin-left: 0;
}

.cashier-shift-manage-empty {
    height: 150px !important;
    color: #999 !important;
    text-align: center !important;
}

.cashier-shift-manage-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}

.cashier-shift-manage-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-decoration: none;
}

.cashier-shift-manage-pagination a.active {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-shift-sales-title {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
}

.cashier-shift-sales-title a {
    color: #303133;
    text-decoration: none;
}

.cashier-shift-sales-title small {
    margin-left: auto;
    color: #999;
}

.cashier-shift-sales-filter label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cashier-shift-sales-filter label > span {
    flex: 0 0 auto;
}

.cashier-shift-sales-table col.product {
    width: 25%;
}

.cashier-shift-sales-product {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cashier-shift-sales-product > span {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: #f2f5f9;
    color: #aaa;
    font-size: 12px;
}

.cashier-shift-sales-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cashier-shift-sales-product div {
    min-width: 0;
}

.cashier-shift-sales-product strong,
.cashier-shift-sales-product small,
.cashier-shift-sales-product em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-shift-sales-product small,
.cashier-shift-sales-product em {
    margin-top: 4px;
    color: #999;
    font-style: normal;
}

@media (max-height: 800px) {
    .cashier-shift-terminal-panel {
        padding-top: 16px;
    }

    .cashier-shift-terminal-time {
        margin-top: 14px;
    }

    .cashier-shift-terminal-metrics {
        margin-top: 20px;
    }

    .cashier-shift-terminal-detail-link {
        margin-top: 16px;
    }

    .cashier-shift-terminal-actions {
        margin-top: 34px;
    }
}

@media (min-width: 1680px) {
    .cashier-pos-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1370px) {
    .cashier-pos-workspace {
        gap: 16px;
        padding: 16px;
    }

    .cashier-pos-ticket {
        flex-basis: 380px;
        min-width: 380px;
    }

    .cashier-pos-goods-head {
        padding: 22px 18px;
    }

    .cashier-pos-segmented button {
        min-width: 86px;
        padding: 0 15px;
    }

    .cashier-pos-search {
        width: 270px;
    }

    .cashier-pos-categories {
        flex-basis: 132px;
        width: 132px;
        padding: 20px 14px;
    }

    .cashier-pos-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .cashier-pos-payment-view {
        grid-template-columns: minmax(450px, 1fr) 280px;
        gap: 16px;
    }

    .cashier-recharge-form {
        width: 760px;
    }
}

.cashier-top-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.store-cashier-shift-page {
    padding: 20px;
    background: #f5f6f8;
    min-height: calc(100vh - 80px);
}

.cashier-shift-head,
.cashier-shift-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cashier-shift-head h2 {
    margin: 0;
    color: #1f2d3d;
    font-size: 22px;
    font-weight: 600;
}

.cashier-shift-head p,
.cashier-shift-user {
    margin: 8px 0 0;
    color: #8b97a7;
    font-size: 13px;
}

.cashier-shift-actions {
    display: flex;
    gap: 8px;
}

.cashier-shift-user {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e7ebf0;
}

.cashier-shift-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.cashier-shift-metrics > div {
    min-height: 122px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e7ebf0;
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}

.cashier-shift-metrics b {
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    background: #eaf2ff;
    color: #1769e0;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 600;
}

.cashier-shift-metrics span {
    color: #66758a;
    font-size: 14px;
}

.cashier-shift-metrics strong {
    color: #1f2d3d;
    font-size: 18px;
    font-weight: 600;
}

.cashier-shift-metrics em {
    color: #8b97a7;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.cashier-shift-card {
    margin-top: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e7ebf0;
}

.cashier-shift-card-head {
    min-height: 32px;
}

.cashier-shift-detail {
    margin-top: 14px;
    border-top: 1px solid #edf0f4;
}

.cashier-shift-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid #f0f2f5;
    color: #59697c;
}

.cashier-shift-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.cashier-shift-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e7ebf0;
}

.cashier-shift-filter .layui-input {
    width: 180px;
}

.cashier-shift-table-wrap {
    margin-top: 14px;
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e7ebf0;
}

.cashier-shift-table {
    margin: 0;
    min-width: 1040px;
}

.cashier-shift-table th {
    white-space: nowrap;
    background: #f8f9fb;
}

.cashier-shift-table td,
.cashier-shift-table th {
    padding: 13px 12px;
}

.cashier-shift-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

.cashier-shift-pagination a {
    min-width: 30px;
    padding: 6px 8px;
    color: #536174;
    text-align: center;
    border: 1px solid #dfe5ed;
    background: #fff;
}

.cashier-shift-pagination a.active {
    color: #fff;
    background: #1769e0;
    border-color: #1769e0;
}

@media (max-width: 1100px) {
    .cashier-shift-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .store-cashier-shift-page {
        padding: 12px;
    }

    .cashier-shift-head,
    .cashier-shift-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .cashier-shift-actions,
    .cashier-top-links {
        flex-wrap: wrap;
    }

    .cashier-shift-metrics {
        grid-template-columns: 1fr;
    }

    .cashier-shift-filter .layui-input {
        width: 100%;
    }
}

/* Admin home follows the legacy dashboard bands: each business block keeps
   its own spacing while all data is supplied by the real statistics service. */
.admin-home-section {
    margin-bottom: 0;
}

.admin-home-section .common-wrap {
    background: #fff;
    border: 0;
    border-radius: 0;
}

.admin-home-section .head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.admin-home-section .head .title {
    color: #333;
    font-size: 16px;
    font-weight: 400;
}

.admin-home-section .sub-title {
    color: #999;
    font-size: 14px;
}

.admin-home-section .body {
    margin-top: 15px;
}

.dashboard-summary-grid,
.dashboard-todo-grid {
    display: flex;
    flex-wrap: wrap;
}

.dashboard-guide-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-guide-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 14px 10px;
    color: inherit;
    border-right: 1px solid #eef0f5;
    text-decoration: none;
}

.dashboard-guide-item:last-child {
    border-right: 0;
}

.dashboard-guide-item:hover .dashboard-guide-action:not(.complete) {
    color: #fff;
    background: var(--base-color, #1267f5);
}

.dashboard-guide-icon {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.dashboard-guide-icon-bg {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(18, 103, 245, .12);
    border-radius: 50%;
}

.dashboard-guide-icon .iconfont {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--base-color, #1267f5);
    font-size: 24px;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.dashboard-guide-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.dashboard-guide-title,
.dashboard-guide-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-guide-title {
    color: #303133;
}

.dashboard-guide-desc {
    color: #999;
    font-size: 12px;
}

.dashboard-guide-action {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    color: var(--base-color, #1267f5);
    border: 1px solid var(--base-color, #1267f5);
    border-radius: 30px;
    line-height: 26px;
    white-space: nowrap;
}

.dashboard-guide-action.complete {
    color: #999;
    border-color: #e6e6e6;
}

.dashboard-guide-action.complete .iconfont {
    margin-right: 2px;
    color: #00a717;
    font-size: 12px;
}

.dashboard-summary-item,
.dashboard-todo-item {
    width: 25%;
    min-height: 0;
    padding: 0 15px 10px;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
}

.dashboard-summary-item .title,
.dashboard-todo-item .title {
}

.dashboard-summary-item .title .iconfont,
.dashboard-todo-item .title .iconfont {
    color: #c8c9cc;
    font-size: 13px;
    cursor: help;
}

.dashboard-summary-item .value,
.dashboard-todo-item .value {
    color: #303133;
    font-size: 26px;
    font-weight: 400;
    margin-top: 10px;
}

.dashboard-summary-item .bottom-title {
    margin-top: 5px;
    color: #909399;
    font-size: 14px;
}

.dashboard-total-grid {
    margin-top: 15px;
}

.dashboard-total-grid .dashboard-summary-item {
    min-height: 0;
}

.dashboard-todo-grid {
    padding: 0;
}

.dashboard-todo-item {
    cursor: pointer;
}

.dashboard-todo-grid .dashboard-todo-item {
    width: 0;
    flex: 1;
}

.dashboard-chart-grid {
    display: flex;
}

.dashboard-chart-grid .common-wrap {
    flex: 1;
    min-width: 0;
}

.dashboard-chart-grid .common-wrap:first-child,
.dashboard-addon-wrap .common-wrap:first-child {
    margin-right: 0;
}

.dashboard-chart {
    height: 300px;
}

.dashboard-chart > div {
    width: 100%;
    height: 300px;
}

.dashboard-function-grid {
    display: flex;
}

.dashboard-function-grid a {
    flex: 1;
    padding-bottom: 10px;
    color: #303133;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.dashboard-function-grid a:hover {
    color: var(--base-color, #1267f5);
}

.dashboard-function-icon {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-top: 10px;
}

.dashboard-function-grid a span {
    margin-top: 10px;
}

.dashboard-addon-grid {
    display: flex;
    flex-wrap: wrap;
    padding-right: 0;
}

.dashboard-addon-wrap {
    display: flex;
}

.dashboard-addon-wrap .common-wrap {
    flex: 1;
    min-width: 0;
    padding-right: 0;
}

.dashboard-addon-item {
    width: 33.33%;
    margin-bottom: 15px;
    box-sizing: border-box;
    color: #303133;
    position: relative;
    text-decoration: none;
}

.dashboard-addon-info {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 10px;
    margin-right: 15px;
    border: 1px solid #eee;
}

.dashboard-addon-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: contain;
}

.dashboard-addon-copy {
    min-width: 0;
}

.dashboard-addon-item:hover {
    color: var(--base-color, #1267f5);
}

.dashboard-addon-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-addon-desc {
    margin-top: 8px;
    color: #8a94a6;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-addon-count {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #8a94a6;
    font-size: 12px;
}

.dashboard-empty {
    flex: 0 0 100%;
    padding: 34px 0;
    color: #8a94a6;
    text-align: center;
}

@media (max-width: 1100px) {
    .dashboard-function-grid {
        flex-wrap: wrap;
    }

    .dashboard-function-grid a {
        flex: 0 0 33.3333%;
    }
}

@media (max-width: 760px) {
    .dashboard-summary-grid,
    .dashboard-todo-grid,
    .dashboard-addon-grid {
        display: flex;
    }

    .dashboard-summary-item {
        width: 50%;
    }

    .dashboard-todo-grid .dashboard-todo-item {
        width: 50%;
        flex: 0 0 50%;
    }

    .dashboard-function-grid {
        flex-wrap: wrap;
    }

    .dashboard-function-grid a {
        flex: 0 0 50%;
    }

    .dashboard-chart-grid,
    .dashboard-addon-wrap {
        display: block;
    }

    .dashboard-addon-item {
        width: 100%;
    }

    .dashboard-guide-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-guide-item,
    .dashboard-guide-item:last-child {
        border-right: 0;
        border-bottom: 1px solid #eef0f5;
    }

    .dashboard-guide-item:last-child {
        border-bottom: 0;
    }
}

.app-reply-manager {
    margin-top: 16px;
}

.app-template-manager {
    margin-top: 16px;
}

.app-template-channel-tips {
    margin-bottom: 16px;
}

.app-template-jump-card {
    margin-bottom: 14px;
}

.app-template-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #303133;
    cursor: pointer;
}

.app-template-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.app-template-switch i {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    border-radius: 10px;
    background: #c9d0da;
    transition: background .15s ease;
}

.app-template-switch i::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    content: '';
    transition: transform .15s ease;
}

.app-template-switch input:checked + i {
    background: #1f7cff;
}

.app-template-switch input:checked + i::after {
    transform: translateX(16px);
}

.app-template-toolbar {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-template-batch-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-template-check {
    width: 46px;
    text-align: center !important;
}

.app-template-check input {
    width: 14px;
    height: 14px;
    margin: 0;
    vertical-align: middle;
}

.app-template-operation {
    min-width: 150px;
    text-align: right !important;
    white-space: nowrap;
}

.app-template-operation .layui-btn + .layui-btn {
    margin-left: 6px;
}

.app-template-content {
    max-width: 420px;
    overflow: hidden;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: pre-line;
}

.app-reply-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #e6e9ef;
    background: #fff;
}

.app-reply-node-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.app-reply-node-card,
.app-reply-rule-card {
    border: 1px solid #e6e9ef;
    background: #fff;
}

.app-reply-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 12px 14px;
    border-bottom: 1px solid #edf0f4;
}

.app-reply-node-list,
.app-reply-rule-body {
    min-height: 54px;
    padding: 8px 14px;
}

.app-reply-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 42px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f1f3;
}

.app-reply-line:last-child {
    border-bottom: 0;
}

.app-reply-type,
.app-reply-keyword {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 6px;
    border: 1px solid #d7e7ff;
    color: #1f7cff;
    background: #f4f8ff;
    font-size: 12px;
    line-height: 18px;
}

.app-reply-type {
    border-color: #d9e8dc;
    color: #3b8c4a;
    background: #f3faf4;
}

.app-reply-summary {
    display: inline-block;
    max-width: 420px;
    color: #606b7b;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.app-reply-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
}

.app-reply-actions button {
    padding: 0;
    border: 0;
    color: #1f7cff;
    background: transparent;
    cursor: pointer;
}

.app-reply-actions button:last-child {
    color: #e34d59;
}

.app-reply-rules {
    margin-top: 14px;
}

.app-reply-rules-title {
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid #1f7cff;
    line-height: 20px;
}

.app-reply-rule-card + .app-reply-rule-card {
    margin-top: 10px;
}

.app-reply-keywords {
    margin-top: 7px;
}

.app-reply-empty,
.app-reply-empty-line {
    padding: 22px 14px;
    color: #9aa3b2;
    text-align: center;
}

.app-reply-editor {
    padding: 18px 20px 8px;
}

@media (max-width: 900px) {
    .app-reply-node-grid {
        grid-template-columns: 1fr;
    }

    .app-reply-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

.member-register-config-page {
    min-height: calc(100vh - 70px);
    padding: var(--old-page-pad) var(--old-page-pad) 80px;
}

.member-register-config-form {
    max-width: 1180px;
}

.member-register-config-form .card-common {
    margin: 0 0 var(--old-page-gap);
}

.member-register-config-form .layui-card-header {
    height: 46px;
    line-height: 46px;
}

.member-register-config-form .layui-card-body {
    padding: 15px;
}

.member-register-config-form .register-desc {
    width: 65%;
    margin: 0 0 15px 0;
    padding: 5px 10px;
    border: 1px dashed #ff8143;
    color: #ff8143;
    background: #fff7f1;
    line-height: 1.6;
    box-sizing: border-box;
}

.member-register-config-form .layui-form-item {
    margin-bottom: 16px;
}

.member-register-config-form .layui-form-label,
.member-register-agreement-form .layui-form-label {
    width: 170px;
    line-height: 32px;
    padding: 0 8px 0 0;
    box-sizing: border-box;
}

.member-register-config-form .layui-input-block,
.member-register-agreement-form .layui-input-block {
    margin-left: 178px;
    min-height: 32px;
}

.member-register-config-form .old-checkbox-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.member-register-config-form .word-aux {
    width: 50%;
    margin-left: 178px;
    padding-top: 6px;
    color: #9aa4b5;
    font-size: 12px;
    line-height: 1.6;
}

.member-register-config-form .len-short {
    width: 120px;
}

.member-register-config-form .len-long,
.member-register-agreement-form .len-long {
    width: 430px;
}

.register-wap-bg-box {
    width: 104px;
    height: 104px;
    border: 1px dashed #d6dde8;
    background: #f8f9fb;
}

.register-wap-bg-box .upload-default,
.register-wap-bg-box .upload {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #66758d;
}

.register-wap-bg-box .upload {
    align-content: center;
    gap: 4px;
}

.register-wap-bg-box .upload i {
    font-size: 22px;
    font-style: normal;
    line-height: 1;
}

.register-wap-bg-box .upload p {
    margin: 0;
    font-size: 12px;
}

.register-wap-bg-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.register-config-actions {
    padding-left: 178px;
}

.member-register-agreement-page {
    min-height: calc(100vh - 70px);
    margin: 15px;
}

.member-register-agreement-form .layui-form-item {
    margin-bottom: 16px;
}

.member-register-agreement-form .layui-input-inline {
    width: auto;
}

.member-register-agreement-actions,
.member-register-agreement-form .form-message {
    margin-left: 178px;
}

.map-config-page {
    min-height: calc(100vh - 70px);
    padding: 0 0 80px;
    background: #fff;
}

.map-config-form {
    background: #fff;
    padding: 15px 0;
}

.map-config-form .layui-form-item {
    display: block;
    min-height: 34px;
    margin-bottom: 20px;
}

.map-config-form .layui-form-label {
    float: left;
    width: 200px;
    height: 34px;
    padding: 0 10px 0 0;
    line-height: 34px;
    box-sizing: border-box;
}

.map-config-form .layui-input-block {
    margin-left: 200px;
    min-height: 34px;
}

.map-config-form .len-long {
    width: 450px;
}

.map-config-form .len-short {
    flex: 0 0 120px;
    width: 120px;
}

.map-config-form .layui-input {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
}

.map-config-form .word-aux {
    margin: 5px 0 0 200px;
    line-height: 1.6;
}

.map-config-form .inline-block {
    display: inline-block;
}

.map-config-form .map-key-link {
    margin-left: 5px;
    line-height: 32px;
}

.map-config-form .map-time-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.map-config-form .form-row,
.map-config-form .form-message {
    margin-left: 200px;
}

.member-cancel-filter .layui-form-label {
    width: 120px;
    flex: 0 0 120px;
}

.member-cancel-filter .form-row {
    margin-left: 120px;
}

.member-cancel-filter .layui-input-inline {
    width: 185px;
    min-width: 185px;
}

.member-cancel-filter .old-date-input {
    position: relative;
}

.member-cancel-filter .calendar {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa8bd;
    pointer-events: none;
}

.member-cancel-table-wrap .old-tabs {
    margin: 0 0 15px;
}

.member-cancel-status {
    color: #606266;
}

.member-cancel-status.status-0 {
    color: #105cfb;
}

.member-cancel-status.status-1 {
    color: #18a058;
}

.member-cancel-status.status--1 {
    color: #e33;
}

.member-cancel-modal {
    width: 560px;
}

.member-cancel-detail-table {
    margin: 0;
}

.member-cancel-layer-detail {
    padding: 20px;
}

.member-cancel-detail-table th {
    width: 120px;
    color: #606266;
    font-weight: 400;
    background: #f8f8f8;
}

.member-cancel-config-form .layui-form-item,
.member-cancel-agreement-form .layui-form-item {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 0;
    margin-bottom: 10px;
}

.member-cancel-config-form .layui-form-label,
.member-cancel-agreement-form .layui-form-label {
    width: 200px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
}

.member-cancel-config-form .layui-input-block,
.member-cancel-agreement-form .layui-input-inline {
    grid-column: 2;
    min-width: 0;
}

.member-cancel-config-form .word-aux {
    grid-column: 2;
    margin: 5px 0 0;
    color: #b2b2b2;
    font-size: 12px;
    line-height: 1.6;
}

.member-cancel-config-form .form-row,
.member-cancel-agreement-form .form-row {
    margin: 20px 0 0 200px;
}

.member-cancel-config-form .form-message,
.member-cancel-agreement-form .form-message {
    margin-left: 12px;
}

.member-cancel-agreement-form .len-long {
    width: 450px;
}

.member-cancel-agreement-form .special-length {
    width: 950px;
    max-width: 950px;
}

.member-cancel-filter .layui-btn:not(.layui-btn-primary),
.member-cancel-config-actions .layui-btn,
.member-cancel-agreement-actions .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
    padding: 0 16px;
    border: 1px solid #105cfb;
    border-radius: 2px;
    background: #105cfb;
    color: #fff;
}

.member-cancel-config-form .switch-like {
    margin-top: 4px;
}

.offlinepay-filter .layui-form-label {
    width: 90px;
}

.offlinepay-filter .form-row {
    margin-left: 110px;
}

.offlinepay-table-wrap .old-tabs {
    margin: 0 0 18px;
}

.offlinepay-table th,
.offlinepay-table td {
    vertical-align: middle;
}

.offlinepay-member {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
}

.offlinepay-member span {
    color: #697386;
}

.offlinepay-status {
    color: #606266;
}

.offlinepay-status.status-0 {
    color: #105cfb;
}

.offlinepay-status.status-1 {
    color: #18a058;
}

.offlinepay-status.status-2 {
    color: #e33;
}

.offlinepay-status.status-3 {
    color: #909399;
}

.offlinepay-modal {
    width: 800px;
}

.offlinepay-modal .img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.offlinepay-modal .img-item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px dashed #ccc;
    background: #fff;
}

.offlinepay-modal .img-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 90%;
    max-height: 90%;
    transform: translate(-50%, -50%);
}

.offlinepay-detail-table {
    margin: 12px 0 0;
}

.offlinepay-detail-table th {
    width: 120px;
    color: #606266;
    font-weight: 400;
    background: #f8f8f8;
}

.h5-servicer-shell {
    background: #f4f4f4;
}

.h5-servicer-phone {
    position: relative;
    min-height: 100vh;
    background: #f4f4f4;
    overflow: hidden;
}

.h5-servicer-status {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.h5-servicer-status a {
    color: #303133;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
}

.h5-servicer-room {
    height: calc(100vh - 48px - 58px);
    padding: 12px 10px 18px;
    box-sizing: border-box;
    overflow-y: auto;
}

.h5-servicer-loading {
    position: sticky;
    top: 0;
    margin: -12px -10px 10px;
    height: 36px;
    color: #909399;
    font-size: 12px;
    line-height: 36px;
    text-align: center;
    background: rgba(244, 244, 244, .95);
}

.h5-servicer-empty {
    padding-top: 38vh;
    color: #909399;
    font-size: 13px;
    text-align: center;
}

.h5-chat-message {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 13px 0;
}

.h5-chat-message.right {
    flex-direction: row-reverse;
}

.h5-chat-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: #fff;
    font-size: 13px;
    background: #9ca6b3;
    border-radius: 50%;
}

.h5-chat-message.right .h5-chat-avatar {
    background: #1f7cff;
}

.h5-chat-body {
    max-width: calc(100% - 78px);
}

.h5-chat-bubble,
.h5-chat-card {
    padding: 10px 12px;
    color: #303133;
    font-size: 14px;
    line-height: 20px;
    word-break: break-word;
    background: #fff;
    border-radius: 5px;
}

.h5-chat-message.right .h5-chat-bubble,
.h5-chat-message.right .h5-chat-card {
    color: #10220d;
    background: #4cd964;
}

.h5-chat-card {
    min-width: 138px;
    color: #606266;
}

.h5-chat-image {
    display: block;
    max-width: 150px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 5px;
}

.h5-servicer-input {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    background: #f4f4f4;
    border-top: 1px solid #e5e5e5;
}

.h5-servicer-keywords {
    display: flex;
    gap: 8px;
    padding: 10px 12px 0;
    overflow-x: auto;
}

.h5-servicer-keywords button {
    flex: 0 0 auto;
    height: 28px;
    border: 0;
    padding: 0 10px;
    color: #303133;
    font-size: 12px;
    background: #fff;
    border-radius: 4px;
}

.h5-servicer-context {
    display: flex;
    gap: 8px;
    padding: 10px 12px 0;
}

.h5-servicer-context button {
    height: 30px;
    border: 1px solid #d8dee9;
    padding: 0 12px;
    color: #303133;
    background: #fff;
    border-radius: 4px;
}

.h5-servicer-form {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 58px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.h5-servicer-form textarea {
    min-width: 0;
    height: 36px;
    flex: 1;
    border: 0;
    padding: 8px 12px;
    box-sizing: border-box;
    font: inherit;
    resize: none;
    background: #fff;
    border-radius: 18px;
    outline: none;
}

.h5-servicer-tool {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 0;
    color: #303133;
    font-size: 23px;
    line-height: 32px;
    background: transparent;
}

.h5-servicer-send {
    min-width: 46px;
    height: 30px;
    border: 0;
    padding: 0 10px;
    color: #fff;
    border-radius: 4px;
}

.h5-servicer-disabled {
    display: grid;
    min-height: calc(100vh - 48px);
    place-items: center;
    padding: 18px;
    box-sizing: border-box;
}

.h5-servicer-disabled-card {
    width: 100%;
    padding: 26px 18px;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    border-radius: 8px;
}

.h5-servicer-disabled-card b {
    display: block;
    margin-bottom: 10px;
    color: #303133;
    font-size: 17px;
}

.h5-servicer-disabled-card p {
    margin: 0 0 18px;
    color: #909399;
    font-size: 13px;
}

.h5-servicer-disabled-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    color: #fff;
    text-decoration: none;
    background: #1f7cff;
    border-radius: 4px;
}

.h5-verification-phone {
    background: #f6f7fb;
    color: #303133;
    min-height: 100vh;
    padding-bottom: 24px;
}

.h5-verification-phone .h5-status {
    background: #fff;
    border-bottom: 1px solid #edf0f5;
}

.h5-verification-phone .h5-status a:last-child {
    color: #1f73ff;
    font-size: 13px;
    min-width: 72px;
    text-align: right;
}

.h5-verify-hero {
    background: #fff;
    min-height: 330px;
    padding: 34px 20px 30px;
    position: relative;
}

.h5-verify-record-link {
    color: #1f73ff;
    font-size: 13px;
    position: absolute;
    right: 18px;
    top: 18px;
}

.h5-verify-manual {
    margin: 12px auto 0;
    max-width: 310px;
    text-align: center;
}

.h5-verify-process {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-bottom: 22px;
}

.h5-verify-process span {
    align-items: center;
    color: #303133;
    display: inline-flex;
    flex-direction: column;
    font-size: 13px;
    gap: 8px;
}

.h5-verify-process i {
    align-items: center;
    border: 1px solid #1f73ff;
    border-radius: 50%;
    color: #1f73ff;
    display: inline-flex;
    font-style: normal;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.h5-verify-process em {
    color: #909399;
    font-style: normal;
    margin-top: -20px;
}

.h5-verify-manual input {
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    box-sizing: border-box;
    height: 44px;
    outline: none;
    padding: 0 12px;
    width: 100%;
}

.h5-verify-manual button,
.h5-verify-fixed-action button {
    background: #1f73ff;
    border: 0;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    height: 42px;
    margin-top: 18px;
    width: 100%;
}

.h5-verify-scan {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 auto;
    max-width: 310px;
    text-align: center;
}

.h5-verify-scan span {
    align-items: center;
    background: #1f73ff;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(31, 115, 255, .22);
    color: #fff;
    display: inline-flex;
    font-size: 72px;
    height: 180px;
    justify-content: center;
    width: 180px;
}

.h5-verify-scan strong {
    font-size: 16px;
}

.h5-verify-scan em {
    color: #909399;
    font-size: 12px;
    font-style: normal;
}

.h5-verify-actions {
    align-items: center;
    background: #fff;
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    padding: 22px 18px;
}

.h5-verify-actions button {
    background: transparent;
    border: 0;
    color: #303133;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    font-size: 13px;
    gap: 7px;
}

.h5-verify-actions button.active {
    color: #1f73ff;
}

.h5-verify-actions span {
    font-size: 26px;
}

.h5-verify-tabs {
    background: #fff;
    border-bottom: 1px solid #edf0f5;
    display: flex;
    overflow-x: auto;
    padding: 0 10px;
}

.h5-verify-tabs button {
    background: transparent;
    border: 0;
    color: #303133;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 14px;
    height: 48px;
    padding: 0 14px;
    position: relative;
}

.h5-verify-tabs button.active {
    color: #1f73ff;
}

.h5-verify-tabs button.active::after {
    background: #1f73ff;
    bottom: 0;
    content: "";
    height: 2px;
    left: 14px;
    position: absolute;
    right: 14px;
}

.h5-verify-list {
    padding: 10px;
}

.h5-verify-record {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    margin-bottom: 10px;
}

.h5-verify-record-head {
    align-items: center;
    border-bottom: 1px solid #edf0f5;
    color: #909399;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    padding: 10px 12px;
}

.h5-verify-record-body {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 58px 1fr auto;
    padding: 12px;
}

.h5-verify-record-img,
.h5-verify-goods-img {
    align-items: center;
    background: #f1f5fb;
    border-radius: 3px;
    color: #a8b3c7;
    display: flex;
    height: 58px;
    justify-content: center;
    overflow: hidden;
    width: 58px;
}

.h5-verify-record-img img,
.h5-verify-goods-img img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.h5-verify-record-info,
.h5-verify-goods-info {
    min-width: 0;
}

.h5-verify-record-info strong,
.h5-verify-goods-info strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-verify-record-info em,
.h5-verify-goods-info em,
.h5-verify-record-price em,
.h5-verify-goods-price em {
    color: #909399;
    display: block;
    font-size: 12px;
    font-style: normal;
    margin-top: 5px;
}

.h5-verify-record-price,
.h5-verify-goods-price {
    color: #ff4d4f;
    font-size: 13px;
    text-align: right;
}

.h5-verify-card {
    background: #fff;
    border-radius: 4px;
    margin: 10px;
    overflow: hidden;
}

.h5-verify-card h2 {
    align-items: center;
    border-bottom: 1px solid #edf0f5;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    margin: 0;
    padding: 13px 14px;
}

.h5-verify-card h2 i {
    background: #1f73ff;
    display: inline-block;
    height: 15px;
    width: 3px;
}

.h5-verify-goods {
    border-bottom: 1px solid #edf0f5;
    display: grid;
    gap: 10px;
    grid-template-columns: 58px 1fr auto;
    padding: 12px 14px;
}

.h5-verify-goods-total {
    color: #606266;
    font-size: 12px;
    grid-column: 1 / -1;
    text-align: right;
}

.h5-verify-goods-total strong {
    color: #1f73ff;
    font-weight: 500;
}

.h5-verify-row {
    align-items: flex-start;
    border-bottom: 1px solid #f1f3f7;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    margin: 0;
    padding: 12px 14px;
}

.h5-verify-row span {
    color: #303133;
}

.h5-verify-row em {
    color: #909399;
    font-style: normal;
    margin-left: 14px;
    text-align: right;
}

.h5-verify-fixed-action {
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid #edf0f5;
    bottom: 0;
    box-sizing: border-box;
    left: 50%;
    max-width: 430px;
    padding: 10px 16px;
    position: sticky;
    transform: translateX(-50%);
    width: 100%;
}

.h5-verify-fixed-action button {
    margin-top: 0;
}

.h5-storeclose-phone {
    background: #fff;
    min-height: 100vh;
}

.h5-storeclose-box {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 165px;
    text-align: center;
}

.h5-storeclose-box img {
    display: block;
    max-width: 120px;
    width: 120px;
}

.h5-storeclose-box strong {
    color: #909399;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 28px;
}

.h5-store-payment-phone {
    background: #f4f5f7;
}

.h5-store-payment-page {
    min-height: 100%;
    padding-bottom: 76px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
}

.h5-store-payment-spacer {
    height: 100px;
}

.h5-store-payment-store {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 86px;
    margin: 0 15px;
    padding: 15px 10px 30px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .88) 100%);
    box-sizing: border-box;
}

.h5-store-payment-tip {
    min-width: 0;
    color: #f2c7b5;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.h5-store-payment-store-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 20px;
    padding: 0 7px 0 2px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .2);
    color: #efcab6;
    font-size: 12px;
}

.h5-store-payment-store-link img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.h5-store-payment-store-link i {
    margin-left: 4px;
    font-style: normal;
}

.h5-store-payment-menu {
    margin: 0 15px;
    padding: 15px 15px 30px;
    border-radius: 12px;
    background: #fff;
    transform: translateY(-20px);
    box-sizing: border-box;
}

.h5-store-payment-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.h5-store-payment-menu-item {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.h5-store-payment-menu-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.h5-store-payment-menu-item strong,
.h5-store-payment-menu-item span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-payment-menu-item strong {
    margin-top: 5px;
    color: #222;
    font-size: 14px;
    font-weight: 700;
}

.h5-store-payment-menu-item span {
    color: #999;
    font-size: 9px;
}

.h5-store-payment-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 49px;
    margin: 30px auto 0;
    border-radius: 49px;
    background: #f72d1e;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.h5-store-payment-image {
    margin: 15px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    transform: translateY(-20px);
}

.h5-store-payment-image img {
    display: block;
    width: 100%;
}

.h5-store-paycode-phone {
    background: #f72d1e;
    padding: 15px;
    box-sizing: border-box;
}

.h5-store-paycode-card {
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.h5-store-paycode-member {
    display: flex;
    align-items: center;
    padding: 18px 16px;
    background: #f6f6f6;
}

.h5-store-paycode-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.h5-store-paycode-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-store-paycode-info {
    min-width: 0;
    flex: 1;
}

.h5-store-paycode-info strong,
.h5-store-paycode-info em {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-paycode-info strong {
    color: #1f2d3d;
    font-size: 15px;
    font-weight: 700;
}

.h5-store-paycode-info em {
    width: fit-content;
    max-width: 160px;
    height: 20px;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 20px;
    background: #474758;
    color: #ddc095;
    font-size: 12px;
    font-style: normal;
    line-height: 20px;
}

.h5-store-paycode-recharge {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 15px;
    border: 1px solid #f72d1e;
    border-radius: 32px;
    color: #f72d1e;
    font-size: 13px;
    line-height: 30px;
    letter-spacing: 2px;
}

.h5-store-paycode-body {
    position: relative;
    margin: 20px 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px dashed #dedede;
    text-align: center;
}

.h5-store-paycode-body::before,
.h5-store-paycode-body::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f72d1e;
}

.h5-store-paycode-body::before {
    left: 0;
    transform: translate(calc(-50% - 20px), 50%);
}

.h5-store-paycode-body::after {
    right: 0;
    transform: translate(calc(50% + 20px), 50%);
}

.h5-store-paycode-loading,
.h5-store-paycode-error {
    min-height: 24px;
    color: #999;
    font-size: 13px;
    line-height: 24px;
}

.h5-store-paycode-error {
    color: #f72d1e;
}

.h5-store-paycode-barcode {
    height: 100px;
    overflow: hidden;
}

.h5-store-paycode-barcode img {
    width: 295px;
    max-width: 100%;
    height: 125px;
    object-fit: fill;
}

.h5-store-paycode-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    color: #999;
    font-size: 12px;
}

.h5-store-paycode-auth span {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
}

.h5-store-paycode-auth button {
    border: 0;
    background: transparent;
    color: #163d8f;
    font-size: 13px;
}

.h5-store-paycode-qrcode {
    display: block;
    width: 160px;
    height: 160px;
    margin: 15px auto 0;
}

.h5-store-paycode-dynamic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    margin-top: 10px;
    padding: 2px 13px;
    border: 0;
    border-radius: 30px;
    background: #f6f6f6;
    color: #666;
    font-size: 13px;
}

.h5-store-paycode-dynamic strong {
    font-weight: 700;
}

.h5-store-paycode-dynamic i {
    color: #999;
    font-style: normal;
}

.h5-store-paycode-body p {
    margin: 10px 0 0;
    color: #999;
    font-size: 12px;
    line-height: 1.45;
}

.h5-store-paycode-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: center;
    padding: 25px 0;
}

.h5-store-paycode-account a {
    display: block;
    min-width: 0;
    text-align: center;
}

.h5-store-paycode-account strong,
.h5-store-paycode-account span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-paycode-account strong {
    color: #f72d1e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.h5-store-paycode-account span {
    margin-top: 5px;
    color: #999;
    font-size: 12px;
}

.h5-store-paycode-account i {
    width: 1px;
    height: 25px;
    background: #ddd;
}

* { box-sizing: border-box; }

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, "Microsoft YaHei", sans-serif;
    font-size: 14px;
    letter-spacing: 0;
}

body.shop-diy-editor-page {
    min-height: 0;
    background: #fff;
}

a { color: inherit; text-decoration: none; }

.old-admin-shell .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 55px;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.old-logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 124px;
    height: 80px;
    background: #1c2233;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

.old-logo a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #105cfb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.header-right {
    position: fixed;
    top: 0;
    left: 124px;
    right: 0;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

.crumbs {
    display: flex;
    align-items: center;
    height: 55px;
}

.crumbs strong {
    width: 131px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.crumbs span {
    height: 55px;
    line-height: 55px;
    border-left: 1px solid #eee;
    padding-left: 16px;
    color: var(--muted);
}

.account-area {
    height: 55px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding-right: 24px;
    color: #333;
}

.account-area a,
.account-area button {
    border: 0;
    background: transparent;
    color: #333;
    padding: 0;
    min-height: auto;
}

.account-area a:hover,
.account-area button:hover {
    color: #105cfb;
}

.first-nav {
    position: fixed;
    top: 80px;
    left: 0;
    bottom: 0;
    width: 124px;
    z-index: 15;
    background: #1c2233;
    overflow-y: auto;
}

.first-nav nav {
    width: 124px;
    display: grid;
    gap: 4px;
    padding-top: 8px;
}

.first-nav a {
    width: 108px;
    height: 40px;
    margin: 0 8px;
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 15px;
}

.first-nav a i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 18px;
    background: transparent;
}

.first-nav a i:not(.iconfont) {
    border-radius: 2px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.1);
}

.first-nav a.active,
.first-nav a:hover {
    background: #105cfb;
    color: #fff;
}

.first-nav a.disabled {
    opacity: 0.46;
    cursor: default;
}

.first-nav a.disabled:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
}

.second-nav {
    position: fixed;
    top: 55px;
    left: 124px;
    bottom: 0;
    width: 132px;
    z-index: 14;
    background: #fff;
    border-right: 1px solid #eee;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.second-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.second-nav nav {
    padding: 0;
}

.second-menu-tree {
    width: 132px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    background: transparent;
}

.second-menu-tree .layui-nav-item {
    width: calc(100% - 24px);
    line-height: 40px;
    margin: 0 12px;
    list-style: none;
}

.second-menu-tree .layui-nav-item > a {
    position: relative;
    height: 36px;
    margin-bottom: 4px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    color: #333;
    padding: 0 20px 0 6px;
}

.second-menu-tree .layui-nav-item > a span {
    line-height: 36px;
    white-space: nowrap;
    word-break: keep-all;
}

.second-menu-tree .layui-nav-item > a:hover,
.second-menu-tree .layui-nav-tree > .layui-this > .second-selected-nav,
.second-menu-tree .second-selected-nav {
    background: #eff0f4;
    color: #105cfb;
}

.second-menu-tree .layui-nav-item > a:hover .layui-nav-more {
    border-color: #105cfb #105cfb transparent transparent;
}

.second-menu-tree .layui-nav-item.disabled > a,
.second-menu-tree dd.disabled > a {
    color: #b0b6c3;
    cursor: default;
}

.second-menu-tree .layui-nav-child {
    position: relative;
    top: 0;
    z-index: 0;
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.second-menu-tree .layui-nav-itemed > .layui-nav-child,
.second-menu-tree .layui-nav-child-itemed > .layui-nav-child {
    display: block;
}

.second-menu-tree .layui-nav-child dd {
    position: relative;
    min-height: 0;
    margin: 0;
    list-style: none;
}

.second-menu-tree .layui-nav-child dd > a {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    color: #666;
}

.second-menu-tree .layui-nav-child dd > a span {
    width: 100%;
    padding-left: 20px;
    line-height: 40px;
    font-size: 14px;
}

.second-menu-tree .layui-nav-child dd[data-menu-level="1"] > a span {
    padding-left: 20px;
}

.second-menu-tree .layui-nav-child dd[data-menu-level="2"] > a span {
    padding-left: 34px;
}

.second-menu-tree .layui-nav-child dd[data-menu-level="3"] > a span {
    padding-left: 48px;
}

.second-menu-tree .layui-nav-child dd.layui-this,
.second-menu-tree .layui-nav-child dd.layui-this a {
    background: #f0f6ff;
    color: #333;
}

.second-menu-tree .layui-nav-child dd.layui-this .layui-left-nav {
    color: #105cfb;
}

.second-menu-tree .layui-nav-more {
    position: absolute;
    top: 13px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: #333 #333 transparent transparent;
    transform: rotate(45deg);
    transition: transform 0.16s ease, top 0.16s ease;
}

.second-menu-tree .layui-nav-itemed > a .layui-nav-more,
.second-menu-tree .layui-nav-child-itemed > a .layui-nav-more {
    top: 10px;
    transform: rotate(135deg);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 220px;
    background: #101827;
    color: #fff;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.brand { font-size: 22px; font-weight: 700; }

.sidebar nav { display: grid; gap: 6px; }

.sidebar a,
.sidebar button {
    border: 0;
    border-radius: 6px;
    color: #d9e2f2;
    background: transparent;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
}

.sidebar a.active,
.sidebar a:hover,
.sidebar button:hover { background: #1d2a3f; color: #fff; }

.shell {
    margin-left: 256px;
    min-height: 100vh;
    padding: 70px 15px 15px;
    background: #eff0f4;
}

.shop-diy-editor-page .shell {
    min-height: initial;
    padding: 55px var(--old-page-pad) 0;
    background: #fff;
}

.standalone {
    min-height: 100vh;
    padding: 32px;
}

.auth-page {
    background: #eef3f9;
}

.auth-box {
    width: min(420px, 100%);
    margin: 10vh auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    display: grid;
    gap: 22px;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.page-head h1,
.mobile-head h1,
.auth-box h1 {
    margin: 4px 0 0;
    font-size: 28px;
    line-height: 1.2;
}

.eyebrow {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.meta { color: var(--muted); }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 16px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.muted { color: var(--muted); }

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

.metric {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    display: grid;
    gap: 10px;
}

.metric span { color: var(--muted); }
.metric strong { font-size: 26px; }

.form-stack,
.form-grid { display: grid; gap: 14px; }

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

.span-2 { grid-column: span 2; }

label {
    display: grid;
    gap: 7px;
    color: #39455c;
}

input,
select,
textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    background: #fff;
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    padding: 0;
    border-radius: 2px;
    vertical-align: middle;
    flex: 0 0 16px;
    accent-color: #105cfb;
}

input[type="radio"] {
    border-radius: 50%;
}

input[readonly] { background: #f1f4f9; }
textarea { resize: vertical; font-family: inherit; line-height: 1.5; }

button,
.link-button {
    min-height: 36px;
    border-radius: 6px;
    border: 1px solid var(--line);
    padding: 8px 12px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}

.primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.primary:hover { background: var(--primary-dark); }
.ghost.full { margin-top: auto; width: 100%; }
.text-link { color: var(--primary); }

/* Keep Layui controls on the old administration visual contract. */
.layui-btn {
    height: 34px;
    min-height: 34px;
    border: 1px solid #105cfb;
    border-radius: 2px;
    padding: 0 16px;
    background: #105cfb;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
}

.layui-btn.layui-btn-primary {
    border-color: #e6e6e6;
    background: #fff;
    color: #333;
}

.layui-btn.layui-btn-sm {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 28px;
}

.layui-btn.layui-btn-xs {
    height: 22px;
    min-height: 22px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 20px;
}

/* Table operations are compact text actions in the old administration UI. */
.layui-table .layui-btn,
table .table-btn .layui-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 23px;
    min-height: 23px;
    border: 0;
    border-radius: 50px;
    padding: 2px 8px 2px 0;
    margin: 5px 0 5px 5px;
    background: transparent;
    color: #105cfb;
    line-height: 17px;
}

.layui-table-view tr .layui-btn {
    justify-content: flex-end;
    padding: 2px 2px 2px 8px;
    margin: 5px 0;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-message {
    margin: 0;
    min-height: 20px;
    color: var(--danger);
}

.toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.toggle-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.toggle-row input { width: auto; min-height: auto; }

.divider {
    border-top: 1px solid var(--line);
    margin: 2px 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

th { color: var(--muted); font-weight: 600; }
.actions { display: flex; gap: 8px; align-items: center; }
.actions a { color: var(--primary); }
.actions button { min-height: 30px; padding: 4px 8px; }
.status { color: var(--success); }

.empty {
    min-height: 220px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 10px;
    color: var(--muted);
}

.empty h2 { color: var(--text); margin: 0; }
.empty.compact { min-height: 120px; }

.split {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
}

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

.permission-list div {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px;
    display: grid;
    gap: 4px;
}

.permission-list span {
    color: var(--muted);
    font-size: 12px;
    word-break: break-all;
}

.sku-editor {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}

.sku-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.sku-table {
    min-width: 980px;
}

.sku-table input {
    min-width: 120px;
}

.editor-shell {
    display: block;
    width: 100%;
    min-height: 500px;
}

.detail-fallback.ueditor-active {
    display: none;
}

.mobile-page {
    width: min(520px, 100%);
    margin: 0 auto;
}

.mobile-head {
    margin-bottom: 18px;
}

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

.cashier-store-select-page {
    margin: 14px 0 70px;
    background: #fff;
}

.cashier-store-select-head {
    min-height: 88px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid #e8ebf1;
}

.cashier-store-select-head h2 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.cashier-store-select-head p,
.cashier-store-select-head > span {
    margin: 0;
    color: #8a94a6;
    font-size: 13px;
}

.cashier-store-select-error {
    margin: 16px 24px 0;
    padding: 10px 14px;
    color: #d0302f;
    background: #fff3f3;
    border: 1px solid #ffd6d6;
}

.cashier-store-select-table-wrap {
    padding: 0 24px 24px;
}

.cashier-store-select-table {
    margin: 0;
    border-top: 0;
}

.cashier-store-select-table th {
    background: #f7f8fb;
}

.cashier-store-select-table th,
.cashier-store-select-table td {
    vertical-align: middle;
}

.cashier-store-select-table th:nth-child(1) { width: 26%; }
.cashier-store-select-table th:nth-child(2) { width: 14%; }
.cashier-store-select-table th:nth-child(3) { width: 30%; }
.cashier-store-select-table th:nth-child(4) { width: 14%; }
.cashier-store-select-table th:nth-child(5) { width: 16%; }

.cashier-store-select-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cashier-store-select-info img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 1px solid #e5e9f2;
    object-fit: cover;
}

.cashier-store-select-info strong,
.cashier-store-select-info span {
    display: block;
    line-height: 1.6;
}

.cashier-store-select-info strong {
    color: #303133;
    font-weight: 400;
}

.cashier-store-select-info span {
    color: #8a94a6;
    font-size: 12px;
}

.cashier-store-select-info em {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 5px;
    color: #1468ff;
    font-size: 12px;
    font-style: normal;
    background: #eef4ff;
}

.cashier-store-select-address {
    color: #52627a;
    line-height: 1.6;
}

.cashier-store-select-table form {
    margin: 0;
}

.cashier-store-select-table .layui-btn {
    min-width: 92px;
}

@media (max-width: 1100px) {
    .cashier-store-select-table th:nth-child(2),
    .cashier-store-select-table td:nth-child(2),
    .cashier-store-select-table th:nth-child(4),
    .cashier-store-select-table td:nth-child(4) {
        display: none;
    }
}

.store-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.store-item h2 { margin: 0 0 6px; font-size: 18px; }
.store-item p { margin: 0; color: var(--muted); }
.store-item span { color: var(--primary); font-weight: 700; }

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

.product-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
}

.product-card img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 6px;
    background: #eef2f7;
}

.product-card h2 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.35;
}

.product-card p {
    margin: 0 0 8px;
    color: var(--muted);
}

.product-card strong {
    display: block;
    color: var(--danger);
    font-size: 18px;
    margin-bottom: 4px;
}

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

.single-filter-box {
    min-height: var(--old-toolbar-min-height);
    margin: 0;
    padding: var(--old-page-pad);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 2px 2px 0 0;
    box-sizing: border-box;
}

.single-filter-box .tools,
.single-filter-box .layui-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.screen,
.table-tab,
.layui-card,
.old-table-wrap,
.old-section {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    margin-bottom: var(--old-page-gap);
}

.single-filter-box + .screen,
.single-filter-box + .table-tab,
.single-filter-box + .layui-card,
.single-filter-box + .old-table-wrap {
    margin-top: 0;
}

.single-filter-box + .table-tab:not(.store-table-tab),
.single-filter-box + .layui-card:not(.card-common),
.single-filter-box + .old-table-wrap {
    padding: 0 var(--old-page-pad) var(--old-page-pad);
    border-top: 0;
    border-radius: 0 0 2px 2px;
    box-shadow: none;
}

.single-filter-box + .layui-card:not(.card-common) > .old-table,
.single-filter-box + .table-tab:not(.store-table-tab) > .old-table,
.single-filter-box + .old-table-wrap > .old-table {
    margin: 0;
}

.old-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0 0;
    color: #6b7a99;
    font-size: 12px;
}

.old-pagination a {
    min-width: 32px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d9e1ec;
    border-radius: 2px;
    color: #2f3b52;
    line-height: 30px;
    text-align: center;
    background: #fff;
}

.staff-old-page .staff-log-filter {
    min-height: 52px;
    padding: 0 15px 14px;
    justify-content: flex-start;
    align-items: flex-start;
}

.staff-log-filter .layui-form {
    gap: 10px;
}

.staff-log-user-select,
.staff-log-user-select .layui-input {
    width: 200px;
}

.staff-log-search-inline {
    display: inline-flex;
    width: 280px;
}

.staff-log-search-inline .layui-input {
    width: 237px;
    border-radius: 2px 0 0 2px;
}

.staff-log-search-inline .layui-btn {
    width: 43px;
    border-radius: 0 2px 2px 0;
}

.staff-log-list-wrap {
    padding: 0 15px 15px !important;
}

.staff-log-batch-bar {
    display: flex;
    align-items: center;
    min-height: 49px;
}

.staff-log-batch-bar .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
}

.staff-log-batch-top {
    border-bottom: 1px solid #e5e9f2;
}

.staff-log-batch-bottom {
    border-top: 1px solid #e5e9f2;
}

.staff-log-table {
    margin: 0;
}

.staff-log-check-cell {
    width: 3%;
    text-align: center !important;
}

.staff-log-check-cell input[type="checkbox"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin: 0;
    vertical-align: middle;
}

.staff-log-table td.staff-log-empty {
    height: 220px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--muted);
}

.staff-log-list-wrap .old-pagination {
    padding-top: 10px;
}

.staff-list-toolbar .layui-form {
    margin-left: auto;
}

.staff-old-page .staff-list-toolbar {
    min-height: 52px;
    padding: 0 15px 14px;
    align-items: flex-start;
}

.staff-old-page .staff-list-toolbar > .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding: 0 15px;
    border: 1px solid #1266ff;
    border-radius: 2px;
    background: #1266ff;
    color: #fff;
    font-size: 14px;
}

.staff-search-inline {
    display: flex;
    align-items: center;
    width: 270px;
}

.staff-search-inline .layui-input {
    border-radius: 2px 0 0 2px;
}

.staff-search-inline .layui-btn {
    width: 58px;
    border-radius: 0 2px 2px 0;
}

.staff-old-table .table-btn,
.staff-role-table .table-btn {
    justify-content: flex-end;
}

.staff-old-table .store-group-list {
    line-height: 1.5;
    color: #52627a;
}

.staff-old-form .old-radio-row {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 34px;
}

.staff-old-form .old-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.staff-old-form {
    min-height: calc(100vh - 86px);
    padding: 15px 0 24px;
    background: #fff;
}

.staff-old-form .layui-form-item {
    align-items: center;
    gap: 0;
    min-height: 34px;
    margin-bottom: 10px;
}

.staff-old-form .layui-form-label {
    flex: 0 0 200px;
    width: 200px;
    padding-right: 10px;
    color: #454545;
}

.staff-old-form .layui-input-block {
    flex: 0 1 650px;
    min-width: 0;
}

.staff-old-form .layui-input-inline {
    min-width: 0;
}

.staff-old-form .len-long {
    width: 450px;
    max-width: 100%;
}

.staff-old-form .len-mid {
    max-width: 100%;
    flex: 0 0 250px;
    width: 250px;
}

.staff-old-form .layui-input {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
}

.staff-old-form .staff-creator-text,
.staff-old-form .staff-status-switch-row {
    min-height: 34px;
    display: flex;
    align-items: center;
}

.staff-old-form .staff-status-help {
    margin: 5px 0 0 200px;
}

.staff-old-form .form-row {
    margin-top: 20px;
    padding-left: 200px;
}

.staff-old-form .layui-btn:not(.layui-btn-primary) {
    border-color: #1266ff;
    background: #1266ff;
    color: #fff;
}

.staff-old-form .layui-btn,
.staff-old-form .link-button {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
}

.staff-old-form .manage-store[hidden] {
    display: none;
}

.staff-old-form .staff-store-table-wrap {
    width: 600px;
    max-width: calc(100vw - 460px);
}

.staff-old-form .staff-store-table {
    width: 600px;
    max-width: 100%;
    margin: 0;
    border: 0;
}

.staff-old-form .staff-store-table th,
.staff-old-form .staff-store-table td {
    height: 42px;
    padding: 7px 15px;
    border-color: #edf0f5;
}

.staff-old-form .staff-store-table th {
    background: #f7f8fa;
    font-weight: 400;
}

.staff-old-form .staff-store-table .align-center {
    text-align: center;
}

.staff-old-form .staff-store-table .store-group {
    width: 200px;
    margin: 0 auto;
}

.staff-old-form .staff-store-table .table-link {
    border: 0;
    background: transparent;
    color: #1266ff;
    cursor: pointer;
}

.old-modal.staff-store-modal {
    width: 100vw;
    min-height: 100vh;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.old-modal .old-modal-panel.staff-store-select-panel {
    top: 15vh;
    width: 720px;
    min-height: 260px;
}

.staff-store-select-body {
    max-height: 390px;
    padding: 15px 20px 0;
    overflow: auto;
}

.staff-store-select-table {
    margin: 0;
}

.staff-store-select-table th,
.staff-store-select-table td {
    height: 42px;
    padding: 8px 12px;
}

.staff-store-select-table input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.staff-store-select-panel .form-row.mid {
    justify-content: center;
    padding: 15px 0 18px;
}

.staff-store-select-panel .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
}

.staff-store-select-panel .layui-btn:not(.layui-btn-primary) {
    border-color: #1266ff;
    background: #1266ff;
    color: #fff;
}

.staff-role-form .group-tree-block {
    width: 950px;
    max-width: calc(100vw - 500px);
}

.staff-role-form .role-creator-text {
    display: flex;
    min-height: 34px;
    align-items: center;
}

.staff-role-form .role-description-row,
.staff-role-form .role-permission-row {
    align-items: flex-start;
}

.staff-role-form .layui-textarea {
    width: 450px;
    min-height: 100px;
    padding: 6px 10px;
    border-color: #e6e6e6;
    line-height: 22px;
    resize: vertical;
}

.staff-role-form .permission-tree-table {
    width: 950px;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

.staff-role-form .permission-tree-table td {
    min-height: 42px;
    padding: 10px;
    border: 1px solid #e6e6e6;
    vertical-align: middle;
    background: #fff;
}

.staff-role-form .permission-tree-table tr:hover td {
    background: #fff;
}

.staff-role-form .permission-tree-choice {
    display: inline-flex;
    min-height: 20px;
    margin: 0 14px 0 0;
    align-items: center;
    gap: 6px;
    color: #454545;
    line-height: 20px;
    cursor: pointer;
}

.staff-role-form .permission-tree-choice input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #1266ff;
}

.screen {
    padding: 14px 14px 10px;
}

.layui-form-item,
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 18px;
    margin-bottom: 12px;
}

.layui-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Date-range separators are inline form text, not the two-column page split layout. */
.layui-form-mid.split {
    display: block;
    flex: 0 0 auto;
    width: auto;
    grid-template-columns: none;
    gap: 0;
}

.layui-form-label {
    width: 92px;
    color: #333;
    text-align: right;
    white-space: nowrap;
}

.layui-input-inline {
    min-width: 180px;
}

.layui-input-inline.short {
    min-width: 120px;
}

.layui-input-block {
    flex: 1 1 460px;
    min-width: 260px;
}

.store-old-form .layui-form-item {
    align-items: center;
}

/* 门店基础页沿用旧版 form-wrap 的平面表单节奏，运营/结算页仍保留各自卡片布局。 */
.store-basic-form {
    margin: 0;
    padding: 15px 0;
    border-radius: 5px;
    background: #fff;
}

.store-basic-form .old-form-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.store-basic-form .old-form-card > h2 {
    display: none;
}

.store-basic-form .old-form-card .card-body {
    padding: 0;
}

.store-basic-form .layui-form-item {
    gap: 0;
    margin-bottom: 10px;
}

.store-basic-form .layui-form-label {
    flex: 0 0 200px;
    width: 200px;
    height: 34px;
    padding: 0 10px 0 0;
    line-height: 34px;
}

.store-basic-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
    line-height: 34px;
}

.store-basic-form .layui-input-inline {
    min-width: 0;
}

.store-basic-form .len-mid {
    width: 250px;
    max-width: 250px;
}

.store-basic-form .len-long {
    width: 450px;
    max-width: 450px;
}

.store-basic-form .word-aux {
    flex-basis: 100%;
    margin-left: 200px;
    margin-top: 5px;
    color: #b2b2b2;
    line-height: 1.6;
}

.store-basic-form .address-line {
    flex-wrap: nowrap;
}

.store-basic-form .store-map-shell {
    width: 650px;
    max-width: 100%;
}

.store-edit-tabs {
    display: flex;
    align-items: center;
    gap: 34px;
    min-height: 52px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #eef0f5;
}

.store-edit-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 52px;
    color: #333;
    font-size: 14px;
}

.store-edit-tabs a.active {
    color: #1267f5;
}

.store-edit-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #1267f5;
}

.store-old-form .layui-form-label {
    flex: 0 0 108px;
}

.store-old-form .compact-label {
    width: auto;
    flex-basis: auto;
}

.store-old-form .len-mid {
    max-width: 360px;
}

.store-old-form .len-long {
    max-width: 650px;
}

.merchant-info-page .form-wrap,
.merchant-info-page .old-table-wrap {
    margin: 0;
}

.merchant-info-form .layui-form-item {
    align-items: center;
}

.merchant-info-form .layui-form-label {
    flex: 0 0 118px;
}

.merchant-info-form .layui-input-block {
    flex: 0 1 760px;
}

.merchant-info-form .len-long {
    max-width: 620px;
}

.merchant-info-form .len-mid,
.merchant-area-table .len-mid {
    max-width: 180px;
}

.merchant-info-form .len-short,
.merchant-area-table .len-short {
    max-width: 120px;
}

.merchant-basic-form .layui-textarea.len-long {
    width: 620px;
    max-width: 100%;
    min-height: 90px;
}

.merchant-status-group .layui-input-block {
    display: block;
}

.merchant-status-line {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.merchant-status-label {
    width: 80px;
    flex: 0 0 80px;
    color: #333;
}

/* 店铺基础信息严格沿用旧版 200px 标签、450px 输入和 250x120 上传框。 */
.merchant-info-page .merchant-basic-form.old-upload-form {
    min-height: 650px;
    margin: 0;
    padding: 15px 15px 80px;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
}

.merchant-info-page .merchant-basic-form.old-upload-form .layui-form-item {
    gap: 0;
    margin-bottom: 10px;
    align-items: flex-start;
}

.merchant-info-page .merchant-basic-form.old-upload-form .layui-form-label {
    width: 200px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 0;
    flex: 0 0 200px;
    box-sizing: border-box;
}

.merchant-info-page .merchant-basic-form.old-upload-form .layui-input-block {
    width: 450px;
    min-width: 0;
    flex: 0 0 450px;
    line-height: 34px;
}

.merchant-info-page .merchant-basic-form.old-upload-form .layui-input.len-long,
.merchant-info-page .merchant-basic-form.old-upload-form .layui-textarea.len-long {
    width: 450px;
    max-width: 450px;
}

.merchant-info-page .merchant-basic-form.old-upload-form .layui-input.len-long {
    height: 34px;
    min-height: 34px;
}

.merchant-info-page .merchant-basic-form.old-upload-form .layui-textarea.len-long {
    min-height: 100px;
}

.merchant-info-page .merchant-basic-form.old-upload-form .word-aux {
    display: block;
    width: calc(100% - 200px);
    margin: 5px 0 0 200px;
    flex: 0 0 calc(100% - 200px);
    color: #b2b2b2;
    font-size: 12px;
    line-height: 1.6;
}

.merchant-info-page .merchant-basic-form.old-upload-form .word-aux p {
    margin: 0;
}

.merchant-info-page .merchant-basic-form.old-upload-form .img-upload {
    width: 250px;
    min-width: 0;
    flex: 0 0 250px;
}

.merchant-info-page .merchant-basic-form.old-upload-form .upload-img-block {
    width: 250px;
    height: 120px;
    padding: 10px;
    border: 1px dashed #ddd;
    box-sizing: border-box;
    position: relative;
}

.merchant-info-page .merchant-basic-form.old-upload-form .upload-img-box {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    position: static;
}

.merchant-info-page .merchant-basic-form.old-upload-form .upload-default i {
    font-size: 30px;
    color: #6d7278;
}

.merchant-info-page .merchant-basic-form.old-upload-form .upload-default p {
    color: #5a5a5a;
    line-height: 20px;
    white-space: nowrap;
}

.merchant-info-page .merchant-basic-form.old-upload-form .upload-img-box .operation {
    inset: 0;
}

.merchant-info-page .merchant-basic-form.old-upload-form .merchant-status-group .layui-input-block {
    width: 450px;
    flex: 0 0 450px;
}

.merchant-info-page .merchant-basic-form.old-upload-form .merchant-status-line {
    min-height: 34px;
}

.merchant-info-page .merchant-basic-form.old-upload-form .form-row {
    margin: 20px 0 0 200px;
    padding: 0;
}

.merchant-info-page .merchant-basic-form.old-upload-form .form-row .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding: 0 15px;
    border-color: #1266ff;
    background: #1266ff;
    color: #fff;
}

.merchant-status-example {
    padding: 0;
    border: 0;
    background: transparent;
    color: #1266ff;
    cursor: pointer;
    font-size: 12px;
}

.merchant-status-example-mask {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .38);
}

.merchant-status-example-mask[hidden] {
    display: none;
}

.merchant-status-example-dialog {
    width: 500px;
    height: 660px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}

.merchant-status-example-head {
    height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.merchant-status-example-head button {
    border: 0;
    background: transparent;
    color: #999;
    cursor: pointer;
    font-size: 22px;
}

.merchant-status-example-body {
    height: 612px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20px;
    box-sizing: border-box;
    overflow: auto;
}

.merchant-status-example-body img {
    width: 300px;
    height: auto;
}

.merchant-status-line .old-radio {
    margin-right: 4px;
}

.merchant-area-inline,
.merchant-address-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.merchant-contact-map {
    width: 760px;
    max-width: 100%;
    height: 500px;
    border: 1px solid #dce3f0;
    background: #f5f7fb;
    box-sizing: border-box;
    color: #8b9ab4;
    display: block;
}

.empty-address-text {
    font-size: 14px;
    color: #f43530;
    height: 34px;
    line-height: 34px;
}

.merchant-info-form .empty-address.error {
    color: #f43530;
}

/* 联系我们沿用旧版 200px 标签、450px 输入、250px 地区选择和 950px 地图。 */
.merchant-info-page .merchant-contact-form {
    min-height: 650px;
    margin: 0;
    padding: 15px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}

.merchant-info-page .merchant-contact-form .layui-form-item {
    gap: 0;
    margin-bottom: 10px;
    align-items: flex-start;
}

.merchant-info-page .merchant-contact-form .layui-form-label {
    width: 200px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 0;
    flex: 0 0 200px;
    box-sizing: border-box;
}

.merchant-info-page .merchant-contact-form .layui-input-block {
    width: 450px;
    min-width: 0;
    flex: 0 0 450px;
    line-height: 34px;
}

.merchant-info-page .merchant-contact-form .layui-input.len-long {
    width: 450px;
    max-width: 450px;
    height: 34px;
    min-height: 34px;
}

.merchant-info-page .merchant-contact-form .merchant-area-inline {
    width: 770px;
    flex: 0 0 770px;
    gap: 10px;
}

.merchant-info-page .merchant-contact-form .merchant-area-inline .len-mid {
    width: 250px;
    max-width: 250px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 250px;
}

.merchant-info-page .merchant-contact-form .merchant-address-line {
    width: 560px;
    flex: 0 0 560px;
    gap: 10px;
}

.merchant-info-page .merchant-contact-form .merchant-address-line .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
}

.merchant-info-page .merchant-contact-form .merchant-contact-map {
    width: 950px;
    max-width: 950px;
    height: 500px;
}

.merchant-info-page .merchant-contact-form .merchant-map-item .layui-input-block {
    width: 950px;
    flex: 0 0 950px;
}

.merchant-info-page .merchant-contact-form .word-aux {
    display: block;
    width: calc(100% - 200px);
    margin: 5px 0 0 200px;
    flex: 0 0 calc(100% - 200px);
    color: #b2b2b2;
    font-size: 12px;
    line-height: 1.6;
}

.merchant-info-page .merchant-contact-form .empty-local-map .word-aux,
.merchant-info-page .merchant-contact-form .empty-address-text {
    width: auto;
    height: 34px;
    margin: 0;
    color: #f43530;
    font-size: 14px;
    line-height: 34px;
}

.merchant-info-page .merchant-contact-form .form-row {
    margin: 20px 0 0 200px;
    padding: 0;
}

.merchant-info-page .merchant-contact-form .form-row .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding: 0 15px;
    border-color: #1266ff;
    background: #1266ff;
    color: #fff;
}

.merchant-address-type {
    line-height: 25px;
}

.merchant-address-type em {
    display: inline-block;
    color: #fff;
    background: #1267f5;
    font-style: normal;
    font-size: 12px;
    margin-left: 5px;
    padding: 2px 4px;
    border-radius: 2px;
    line-height: 16px;
}

.merchant-site-address-page .single-filter-box {
    min-height: 48px;
    padding: 0 15px 14px;
}

.merchant-site-address-page .single-filter-box > .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding: 0 15px;
    border-color: #1266ff;
    border-radius: 2px;
    background: #1266ff;
    color: #fff;
}

.merchant-site-address-page .old-search-input,
.merchant-site-address-page .old-search-input .layui-input {
    height: 34px;
    min-height: 34px;
}

.merchant-info-page .merchant-site-address-form {
    min-height: 650px;
    margin: 0;
    padding: 15px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}

.merchant-info-page .merchant-site-address-form .layui-form-item {
    gap: 0;
    margin-bottom: 10px;
    align-items: flex-start;
}

.merchant-info-page .merchant-site-address-form .layui-form-label {
    width: 200px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 0;
    flex: 0 0 200px;
    box-sizing: border-box;
}

.merchant-info-page .merchant-site-address-form .layui-input-block {
    width: 450px;
    min-width: 0;
    flex: 0 0 450px;
    line-height: 34px;
}

.merchant-info-page .merchant-site-address-form .layui-input.len-long {
    width: 450px;
    max-width: 450px;
    height: 34px;
    min-height: 34px;
}

.merchant-info-page .merchant-site-address-form .merchant-area-inline {
    width: 770px;
    flex: 0 0 770px;
    gap: 10px;
}

.merchant-info-page .merchant-site-address-form .merchant-area-inline .len-mid {
    width: 250px;
    max-width: 250px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 250px;
}

.merchant-info-page .merchant-site-address-form .form-row {
    margin: 20px 0 0 200px;
    padding: 0;
}

.merchant-info-page .merchant-site-address-form .form-row .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding: 0 15px;
    border-radius: 2px;
}

.merchant-info-page .merchant-site-address-form .form-row .layui-btn:not(.layui-btn-primary) {
    border-color: #1266ff;
    background: #1266ff;
    color: #fff;
}

.merchant-area-page .single-filter-box {
    min-height: 48px;
    padding: 0 15px 14px;
}

.merchant-area-page .single-filter-box > .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding: 0 15px;
    border: 1px solid #1266ff;
    border-radius: 2px;
    background: #1266ff;
    color: #fff;
    font-size: 14px;
}

.merchant-area-table th,
.merchant-area-table td {
    padding: 9px 15px;
    min-height: 20px;
    line-height: 20px;
    font-size: 14px;
}

.merchant-area-page .merchant-area-table th {
    height: 38px;
}

.merchant-area-table tr th:first-child,
.merchant-area-table tr td:first-child {
    padding: 9px 0 9px 10px;
}

.merchant-area-table .align-left {
    text-align: left !important;
}

.merchant-area-table .align-right {
    text-align: right !important;
}

.merchant-area-table .flex-wrap {
    display: flex;
    align-items: center;
}

.merchant-area-table .level-icon {
    width: auto;
    color: #8b9ab4;
    flex: 0 0 auto;
    margin-right: 10px;
}

.merchant-area-table .add-child {
    margin-left: 10px;
}

.merchant-area-table .area-toggle {
    border: 0;
    background: transparent;
    color: #1267f5;
    cursor: pointer;
    display: inline-block;
    width: 10px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    text-align: center;
}

.store-old-form .area-select {
    min-width: 156px;
}

.store-old-form .old-radio-row,
.store-old-form .old-checkbox-row,
.store-old-form .day-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.store-old-form .old-radio-row label,
.store-old-form .old-checkbox-row label,
.store-old-form .day-wrap label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #333;
    line-height: 20px;
    white-space: nowrap;
}

.store-old-form .old-radio-row input[type="radio"],
.store-old-form .old-checkbox-row input[type="checkbox"],
.store-old-form .day-wrap input[type="radio"] {
    margin: 0;
}

.store-old-form .day-input-wrap {
    min-width: 80px;
    width: 80px;
}

.store-old-form .day-input {
    width: 80px;
}

.store-old-form .day-input[readonly] {
    background: #f5f5f5;
}

.store-old-form .delivery-time-row {
    align-items: center;
}

.address-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.address-line .address-content {
    flex: 1 1 420px;
}

.address-line button {
    border-radius: 2px;
}

.map-form-item {
    align-items: flex-start;
}

.store-map-shell {
    width: min(650px, 100%);
    height: 500px;
    overflow: hidden;
}

.selffetch-map,
.store-old-form #container {
    width: 100%;
    height: 100%;
    border: 1px solid #dce3ef;
    background: #f7f8fa;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: #697386;
}

.map-placeholder strong {
    color: #172033;
    font-size: 16px;
}

.map-placeholder a {
    color: #105cfb;
}

.store-list-toolbar {
    margin-bottom: 0;
}

.store-list-toolbar .link-button {
    border-radius: 2px;
}

.store-search-form {
    margin-left: auto;
}

.store-search-inline {
    width: 280px;
    display: flex;
    align-items: center;
}

.store-search-inline input {
    border-radius: 2px 0 0 2px;
}

.store-search-submit {
    min-width: 54px;
    border-radius: 0 2px 2px 0;
    border-left: 0;
}

.store-table-tab {
    margin-top: 0;
    padding-top: 0;
}

.store-table-tab .layui-tab-title {
    height: 44px;
    margin: 0 0 20px;
    padding: 0 18px;
    border-bottom: 1px solid #e6e8ef;
    display: flex;
    align-items: flex-end;
    gap: 24px;
    list-style: none;
}

.store-table-tab .layui-tab-title li {
    height: 44px;
    line-height: 44px;
    color: #333;
    cursor: pointer;
    list-style: none;
}

.store-table-tab .layui-tab-title li a {
    display: block;
    height: 44px;
}

.store-table-tab .layui-tab-title .layui-this {
    color: #105cfb;
    border-bottom: 2px solid #105cfb;
}

.store-table-tab .store-list {
    width: 100%;
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.store-table-tab .store-li {
    display: inline-block;
    width: calc(25% - 19px);
    min-height: 250px;
    margin-right: 25px;
    margin-bottom: 25px;
    border: 1px solid #eaeaea;
    border-top-width: 3px;
    border-bottom-color: #eaeaea !important;
    border-left-color: #eaeaea !important;
    border-right-color: #eaeaea !important;
    box-sizing: border-box;
    border-radius: 2px;
    padding: 20px 15px 10px 20px;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    background: #fff;
}

.store-table-tab .store-info {
    display: flex;
    align-items: center;
    min-height: 42px;
}

.store-table-tab .store-info img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 2px;
    object-fit: cover;
    flex: 0 0 40px;
}

.store-table-tab .store-content {
    min-width: 0;
    flex: 1;
}

.store-table-tab .store-tag-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.store-table-tab .store-tag-wrap span {
    font-size: 12px;
    line-height: 1;
    padding: 3px 4px;
    border: 1px solid var(--base-color);
    border-radius: 2px;
    color: var(--base-color);
}

.store-table-tab .store-detail,
.store-table-tab .store-settlement,
.store-table-tab .store-order-summary {
    margin-top: 10px;
}

.store-table-tab .store-detail p,
.store-table-tab .store-settlement p {
    margin: 0;
    line-height: 20px;
}

.store-table-tab .store-settlement {
    color: #666;
    font-size: 13px;
}

.store-table-tab .store-order-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #666;
    font-size: 13px;
}

.store-table-tab .store-li.border-color {
    border-top-color: #105cfb;
}

.store-table-tab .store-li:hover {
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 5px 10px rgba(16, 92, 251, 0.2);
}

.store-table-tab .store-li:nth-child(4n) {
    margin-right: 0;
}

.store-table-tab .store-name {
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 15px;
    position: relative;
    font-weight: 600;
    color: #333;
}

.store-table-tab .store-name .store-name {
    display: inline-block;
    white-space: nowrap;
    width: 72%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.store-table-tab .store-default {
    color: #105cfb;
    background: #fff;
    border: 1px solid #105cfb;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 2px;
    margin-right: 5px;
}

.store-table-tab .store-time {
    font-size: 14px;
    color: #999;
    line-height: 20px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.store-table-tab .store-operation {
    position: relative;
    color: #7e7e7e;
    min-height: 30px;
    line-height: 30px;
    overflow: hidden;
    margin-top: 15px;
}

.store-table-tab .operation-type {
    color: #105cfb;
    font-size: 14px;
    margin-right: 20px;
    display: none;
}

.store-table-tab .operation-button,
.store-table-tab .edit-password {
    border: 0;
    background: transparent;
    color: #105cfb;
    min-height: auto;
    height: auto;
    line-height: inherit;
    padding: 0;
    border-radius: 0;
}

.store-table-tab .operation-button {
    margin-right: 20px;
}

.store-table-tab .edit-password {
    margin-left: 15px;
}

.store-table-tab .disabled-link,
.store-table-tab .disabled-option {
    color: #b0b6c3;
    cursor: not-allowed;
}

.store-table-tab .type-name,
.store-table-tab .type-name-cloe {
    position: absolute;
    right: 0;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 2px;
    font-weight: 400;
}

.store-table-tab .type-name {
    border: 1px solid #08ba06;
    color: #08ba06;
}

.store-table-tab .type-name-cloe {
    border: 1px solid #ddd;
    color: #999;
}

.store-table-tab .store-li:hover .store-time {
    color: #666 !important;
}

.store-table-tab .store-li:hover .operation-type {
    display: inline-block !important;
}

.store-table-tab #list_page {
    padding-right: 25px;
    text-align: right;
}

.store-table-tab .empty {
    width: 100%;
    min-height: 220px;
    margin: 0 auto;
    font-size: 18px;
    color: #999;
    display: grid;
    place-items: center;
}

.store-password-modal {
    width: 550px;
    min-height: 220px;
}

.store-password-modal-form {
    padding: 24px 20px 20px;
}

.store-password-modal-form .layui-form-item {
    align-items: flex-start;
    margin-bottom: 16px;
}

.store-password-modal-form .layui-form-label.mid {
    flex: 0 0 118px;
    width: 118px;
}

.store-password-modal-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
}

.store-password-modal-form .len-mid {
    width: 260px;
    max-width: 260px;
}

.store-password-modal-form .word-aux.mid,
.store-password-modal-form .form-row.mid {
    margin-left: 118px;
}

.store-password-modal-form .form-message {
    margin: 8px 0 0 118px;
    color: #b42318;
}

.deliverer-list-toolbar {
    margin-bottom: 0;
}

.deliverer-filter-form {
    margin-left: auto;
}

.deliverer-store-filter {
    width: 180px;
}

.deliverer-search-inline {
    width: 280px;
    display: flex;
    align-items: center;
}

.deliverer-search-inline input {
    border-radius: 2px 0 0 2px;
}

.deliverer-search-inline button {
    min-width: 54px;
    border-radius: 0 2px 2px 0;
    border-left: 0;
}

.deliverer-list-card {
    padding: 0;
}

.deliverer-old-table .table-btn {
    justify-content: flex-end;
}

.deliverer-form-card {
    border-radius: 2px;
}

.deliverer-form-card .layui-card-body {
    padding: 24px 18px 80px;
}

.deliverer-old-form .layui-form-item {
    align-items: center;
    margin-bottom: 18px;
}

.deliverer-old-form .layui-form-label {
    flex: 0 0 120px;
    width: 120px;
}

.deliverer-old-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
}

.deliverer-old-form .len-mid {
    width: 300px;
    max-width: 300px;
}

.deliverer-old-form .layui-form-mid {
    min-height: 32px;
    line-height: 32px;
    color: #333;
}

.deliverer-form-actions {
    padding-left: 120px;
}

.delivery-page {
    padding: 0 0 80px;
}

.delivery-method-list {
    width: 100%;
}

.delivery-method-list .data_load {
    background: #fff;
}

.delivery-card {
    border: 1px solid #f1f1f1;
    margin: 0 0 15px;
    border-radius: 2px;
    background: #fff;
    user-select: none;
}

.delivery-card.dragging {
    opacity: 0.7;
}

.delivery-card .layui-card-header {
    height: 42px;
    min-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.delivery-title-box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.delivery-sort-handle {
    width: 18px;
    line-height: 18px;
    color: #a5acb8;
    cursor: move;
    text-align: center;
    font-size: 18px;
}

.delivery-name-input {
    display: none;
    width: 190px;
    height: 32px;
    min-height: 32px;
    border-radius: 2px;
}

.delivery-card.editing .delivery-name-input {
    display: block;
}

.delivery-card.editing .delivery-card-title {
    display: none;
}

.delivery-card-title {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-weight: 600;
}

.delivery-edit-btn {
    width: 24px;
    height: 24px;
    min-height: 24px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: #8a93a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delivery-edit-btn:hover {
    color: #105cfb;
    background: transparent;
}

.old-switch {
    width: 44px;
    height: 24px;
    min-height: 24px;
    display: inline-block;
    position: relative;
}

.old-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.old-switch span {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: #d3dae6;
    cursor: pointer;
    transition: background 0.16s ease;
}

.old-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    transition: transform 0.16s ease;
}

.old-switch input:checked + span {
    background: #105cfb;
}

.old-switch input:checked + span::after {
    transform: translateX(20px);
}

.delivery-card .layui-card-body {
    min-height: 0;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.delivery-desc {
    color: #666;
    line-height: 1.8;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.delivery-card .btn-box {
    flex-shrink: 0;
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.delivery-card .btn-box a {
    cursor: pointer;
    color: #105cfb;
}

.delivery-card .btn-box a.disabled {
    color: #b0b6c3;
    cursor: not-allowed;
}

.old-switch.disabled span {
    cursor: not-allowed;
}

.order-screen {
    margin: 0 0 15px;
    background: #fff;
    border: 0;
}

.order-filter-form {
    padding: 15px 0;
    border: 1px solid #f1f1f1;
}

.order-filter-form .layui-form-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 0;
    margin-bottom: 10px;
}

.order-filter-form .layui-inline {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.order-filter-form .layui-form-label {
    width: 120px;
    flex: 0 0 120px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
    text-align: right;
    color: #454545;
}

.order-filter-form .layui-input-inline {
    width: 185px;
    min-width: 185px;
}

.order-filter-form input,
.order-filter-form select {
    height: 32px;
    min-height: 32px;
    border-radius: 2px;
}

.order-filter-actions {
    margin-left: 120px;
    margin-top: 20px;
}

.order-delivery-time-field.is-hidden {
    display: none;
}

.order-export-message {
    margin: 4px 0 0 104px;
    color: #1e6be6;
}

.order-receive-message {
    min-height: 18px;
    color: #1e6be6;
}

.order-filter-actions .layui-btn[disabled],
.order-batch-bar .layui-btn[disabled],
.order-old-table .layui-btn[disabled] {
    color: #a0a7b4;
    background: #f5f7fa;
    border-color: #e2e6ef;
    cursor: not-allowed;
}

.order-list-panel {
    margin: 14px 0 70px;
    background: #fff;
    border: 0;
}

.order-status-tabs {
    display: flex;
    align-items: center;
    height: 41px;
    border-bottom: 1px solid #f1f1f1;
    padding: 0;
    gap: 0;
    box-sizing: border-box;
}

.order-scene-tabs {
    display: flex;
    gap: 0;
    margin: -8px 0 18px;
    border-bottom: 1px solid #e5e6eb;
}

.order-scene-tabs a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 22px;
    color: #555;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.order-scene-tabs a.active {
    color: #1677ff;
    border-bottom-color: #1677ff;
}

.order-status-tabs a {
    display: block;
    height: 41px;
    padding: 0 15px;
    line-height: 41px;
    color: #333;
    text-decoration: none;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
    box-sizing: border-box;
}

.order-status-tabs a.active {
    color: #333;
    background: #f2f3f5;
    border-bottom-color: #f1f1f1;
}

.order-status-tabs a:last-child {
    border-right: 1px solid #f1f1f1;
}

.order-status-tabs span {
    margin-left: 4px;
    color: #8a94a6;
}

.order-batch-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid #e5e9f2;
}

.order-batch-bar.is-empty {
    display: none;
}

.order-batch-bar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #333;
}

.order-old-table {
    border-top: 0;
}

.order-old-table th {
    background: #f7f8fb;
    color: #333;
}

.order-old-table th,
.order-old-table td {
    vertical-align: top;
}

.order-group {
    border-top: 10px solid #f2f4f8;
}

.order-head-row td {
    background: #f7f8fb;
    color: #697386;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e9f2;
}

.order-head-row label {
    display: inline-flex;
    margin-right: 8px;
    vertical-align: middle;
}

.order-head-row span {
    margin-right: 22px;
}

.order-product-cell {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.order-product-image {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border: 1px solid #e1e6ef;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa3b2;
    overflow: hidden;
}

.order-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-product-info {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.order-product-info strong {
    font-weight: 400;
    color: #1f2a44;
    line-height: 1.4;
}

.order-product-title {
    color: #1f2a44;
    line-height: 1.4;
}

.order-product-title:hover,
.order-address-edit-link:hover,
.order-copy-link:hover,
.order-refund-link:hover {
    color: #105cfb;
}

.order-product-info span,
.order-product-info em {
    font-size: 12px;
    color: #697386;
    font-style: normal;
}

.order-product-info .order-product-card-info {
    color: #105cfb;
    word-break: break-all;
}

.order-product-info .order-item-delivery-status,
.order-promotion-status {
    color: #105cfb;
}

.order-address-text {
    display: block;
    max-width: 220px;
}

.order-address-copy-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.order-address-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    white-space: nowrap;
}

.order-copy-link,
.order-address-edit-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #697386;
    cursor: pointer;
    font-size: 12px;
}

.order-refund-status,
.order-refund-link {
    white-space: nowrap;
}

.order-page-bar {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 14px;
    border-top: 1px solid #e5e9f2;
    color: #697386;
}

.order-page-bar .disabled {
    color: #a0a7b4;
    background: #f5f7fa;
    cursor: default;
}

.order-export-page {
    margin: 15px 20px 70px;
}

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

.export-list-view {
    border: 1px solid #e5e9f2;
    border-radius: 2px;
    box-shadow: none;
}

.export-list-view .layui-card-header {
    min-height: 44px;
    height: auto;
    padding: 10px 14px;
    background: #f8f8f8;
    border-bottom: 1px solid #e5e9f2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.export-select {
    display: flex;
    align-items: center;
}

.apply-time {
    flex: 1 1 auto;
    min-width: 0;
    color: #333;
}

.download-button {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #697386;
}

.text-button {
    border: 0;
    background: transparent;
    color: #1e6be6;
    min-height: auto;
    height: auto;
    line-height: 1.5;
    padding: 0;
    cursor: pointer;
}

.export-condition-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    color: #697386;
}

.export-foot-operation {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.export-content-bar {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 34px;
    background: #f5f7fa;
}

.export-page {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.export-page .disabled {
    color: #a0a7b4;
    background: #f5f7fa;
    cursor: default;
}

.trade-order-detail,
.trade-order-packages,
.trade-order-invoice,
.trade-order-payments,
.trade-order-goods,
.trade-order-money,
.trade-order-logs {
    margin: 15px 20px;
    border: 1px solid #e5e9f2;
    border-radius: 2px;
    box-shadow: none;
}

.trade-order-detail .layui-card-header,
.trade-order-packages .layui-card-header,
.trade-order-invoice .layui-card-header,
.trade-order-payments .layui-card-header,
.trade-order-goods .layui-card-header,
.trade-order-money .layui-card-header,
.trade-order-logs .layui-card-header {
    height: 44px;
    min-height: 44px;
    line-height: 44px;
    padding: 0 18px;
    border-bottom: 1px solid #e5e9f2;
    font-size: 14px;
}

.order-detail-grid {
    display: flex;
    align-items: flex-start;
    padding: 18px;
}

.order-detail-column {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 28px;
    border-left: 1px solid #f0f2f5;
}

.order-detail-column:first-child {
    padding-left: 0;
    border-left: 0;
}

.cashier-order-detail .order-detail-grid {
    max-width: 1000px;
}

.cashier-order-detail .order-detail-column:first-child {
    flex: 0 1 40%;
    padding-right: 48px;
}

.cashier-order-detail .order-detail-column:last-child {
    flex: 0 1 60%;
    padding-right: 30px;
}

.detail-line {
    display: flex;
    align-items: flex-start;
    min-height: 26px;
    margin-bottom: 10px;
    color: #9aa3b2;
}

.detail-line span {
    flex: 0 0 86px;
    text-align: right;
}

.detail-line strong {
    min-width: 0;
    margin-left: 14px;
    color: #333;
    font-weight: 400;
    word-break: break-all;
}

.order-state-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
}

.order-state-line .detail-line {
    margin-bottom: 0;
}

.order-detail-state-line {
    display: block;
}

.order-status-operation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.order-detail-reminder {
    display: flex;
    margin-top: 16px;
    color: #8a94a6;
    line-height: 22px;
}

.order-detail-reminder .orderStatus-content-title {
    flex: 0 0 86px;
    color: #323233;
    text-align: right;
}

.order-detail-reminder .orderStatus-content-text {
    margin-left: 14px;
}

.order-detail-reminder .text-tile {
    margin: 0 0 2px;
}

.trade-order-invoice .layui-card-body {
    padding: 18px 28px;
}

.trade-order-invoice .contentOne-content {
    display: flex;
    min-height: 26px;
    margin-bottom: 10px;
    line-height: 22px;
    font-size: 12px;
}

.trade-order-invoice .contentOne-content-title {
    flex: 0 0 118px;
    color: #646566;
    text-align: right;
}

.trade-order-invoice .contentOne-content-text {
    max-width: 720px;
    margin-left: 14px;
    color: #333;
    word-break: break-all;
    white-space: pre-wrap;
}

.order-config-page {
    padding: 0 0 70px;
}

.order-config-page .balance-boday {
    padding: 20px;
}

.order-config-card {
    margin: 15px 0 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.order-config-card:first-of-type {
    margin-top: 0;
}

.order-config-card.top {
    padding-top: 15px;
}

.order-config-card .layui-card-header {
    display: flex;
    height: auto;
    min-height: 14px;
    padding: 0 20px;
    align-items: center;
    border-bottom: 0;
    font-size: 14px;
    line-height: normal;
}

.order-config-card .card-title {
    position: relative;
    padding-left: 10px;
    font-size: 14px;
    font-weight: 600;
}

.order-config-card .card-title::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 14px;
    border-radius: 5px;
    background: var(--old-blue);
    content: "";
    transform: translateY(-50%);
}

.order-config-doc-link {
    font-weight: 400;
    font-size: 12px;
}

.order-config-card .layui-card-body {
    padding: 20px;
}

.order-config-page .layui-form-item {
    display: block;
    position: relative;
    min-height: 34px;
    margin-bottom: 15px;
}

.order-config-page .layui-form-label {
    float: left;
    width: 200px;
    height: 34px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
    color: #454545;
    font-size: 14px;
    line-height: 34px;
    text-align: right;
}

.order-config-page .layui-input-block {
    min-height: 34px;
    min-width: 0;
    margin-left: 200px;
}

.order-config-page .layui-input-inline {
    display: inline-block;
    min-width: 0;
    vertical-align: middle;
}

.order-config-page .layui-input {
    height: 34px;
    min-height: 34px;
    border: 1px solid #e6e6e6;
    border-radius: 0;
    font-size: 14px;
    line-height: 34px;
}

.order-config-page .layui-textarea {
    min-height: 100px;
    border: 1px solid #e6e6e6;
    border-radius: 0;
    font-size: 14px;
}

.order-config-page .len-short {
    width: 120px !important;
}

.order-config-page .len-long {
    width: 450px !important;
}

.order-config-page .layui-form-mid {
    display: inline-block;
    height: 34px;
    min-height: 34px;
    padding: 0;
    margin-left: 8px;
    color: #333;
    line-height: 34px;
    vertical-align: middle;
}

.order-config-page .word-aux {
    clear: both;
    display: block;
    margin-top: 5px;
    margin-left: 200px;
    padding-top: 0;
    color: #b2b2b2;
    font-size: 12px;
    line-height: 1.6;
}

.order-config-page .examples,
.order-config-page .examples2 {
    cursor: pointer;
}

.order-config-page .examples2 {
    font-weight: 600;
}

.order-config-page .old-radio-row,
.order-config-page .old-checkbox-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    min-height: 34px;
}

.order-config-page .old-radio-row label,
.order-config-page .old-checkbox-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #333;
    font-size: 12px;
}

.order-config-page .order-audio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}

.order-config-page .order-audio-box {
    min-width: 300px;
}

.order-config-page .order-audio-row audio {
    width: 300px;
    height: 54px;
}

.order-config-page .order-audio-upload {
    cursor: pointer;
}

.order-config-page .word-aux p {
    margin: 0 0 4px;
}

.order-config-page .invoice-content-box {
    width: 200px;
}

.order-config-page .invoice-content-block .item {
    position: relative;
    margin-bottom: 10px;
}

.order-config-page .invoice-content-block .item:last-child {
    margin-bottom: 0;
}

.order-config-page .invoice-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .3);
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
}

.order-config-page .radio-type {
    display: none !important;
}

.order-config-page .invoice-tip {
    display: block;
    margin-left: 200px;
    color: #1267ff;
    font-size: 12px;
}

.order-config-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 200px;
}

.order-config-actions .layui-btn,
.member-withdraw-config-actions .layui-btn {
    height: 34px;
    min-height: 34px;
    padding: 0 15px;
    border: 1px solid var(--old-blue);
    border-radius: 2px;
    background: var(--old-blue);
    color: #fff;
    font-size: 14px;
    line-height: 32px;
}

.order-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.order-detail-actions .layui-btn[disabled] {
    color: #a0a7b4;
    background: #f5f7fa;
    border-color: #e2e6ef;
    cursor: not-allowed;
}

.trade-order-goods .layui-card-body {
    padding: 0;
}

.trade-order-money {
    margin-bottom: 15px;
}

.trade-order-money:last-child {
    margin-bottom: 70px;
}

.order-money-lines {
    display: grid;
    justify-content: end;
    gap: 8px;
    padding: 18px 28px;
}

.order-money-lines div {
    display: flex;
    justify-content: space-between;
    min-width: 260px;
}

.order-money-lines span {
    color: #697386;
}

.order-money-lines strong {
    color: #333;
    font-weight: 400;
}

.order-money-lines .text-color {
    font-weight: 600;
}

.trade-order-logs {
    margin-bottom: 70px;
}

.order-log-list {
    display: grid;
    gap: 0;
    padding: 14px 18px 18px;
}

.order-log-item {
    display: grid;
    grid-template-columns: 100px 24px minmax(0, 1fr);
    min-height: 46px;
    color: #697386;
}

.order-log-time {
    text-align: right;
    color: #8a94a6;
    font-size: 12px;
}

.order-log-time p {
    margin: 0 0 2px;
}

.order-log-dot {
    position: relative;
}

.order-log-dot::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 11px;
    width: 8px;
    height: 8px;
    border: 2px solid #1e6be6;
    border-radius: 50%;
    background: #fff;
}

.order-log-dot::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: -2px;
    left: 15px;
    width: 1px;
    background: #e5e9f2;
}

.order-log-item:last-child .order-log-dot::after {
    display: none;
}

.order-log-content {
    padding: 0 0 14px 10px;
    color: #333;
}

.order-remark-modal {
    width: 440px;
    min-height: 0;
}

.order-address-modal {
    width: 980px;
    min-height: 0;
}

.order-address-form {
    padding: 18px 22px;
}

.order-address-form .area-select {
    width: 180px;
}

.order-map-placeholder {
    width: 876px;
    max-width: 100%;
    height: 380px;
    border: 1px solid #e5e9f2;
    background: #f8f9fc;
}

.order-map-placeholder .map-placeholder {
    height: 100%;
}

.order-address-form .address-line {
    display: flex;
    gap: 8px;
    align-items: center;
}

.order-address-form .empty-address {
    display: block;
    margin-top: 8px;
}

.order-address-form .empty-address.error {
    color: #ff4d4f;
}

.address-analysis-btn {
    margin-top: 8px;
}

.order-remark-form {
    padding: 18px 20px 16px;
}

.order-remark-form textarea {
    width: 400px;
    min-height: 100px;
    resize: vertical;
}

.order-remark-form .form-row {
    justify-content: flex-end;
    margin: 14px 0 0;
    padding-left: 0;
}

.order-remark-form .form-message {
    min-height: 20px;
    margin: 8px 0 0;
    color: #b42318;
    text-align: right;
}

.trade-order-packages .layui-card-body {
    padding: 0;
}

.order-package-list {
    display: grid;
    gap: 0;
}

.order-package-item {
    border-bottom: 1px solid #e5e9f2;
}

.order-package-item:last-child {
    border-bottom: 0;
}

.package-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 14px 18px 6px;
    background: #fafbfc;
}

.package-head .detail-line {
    margin-bottom: 6px;
}

.package-goods-list {
    display: grid;
    gap: 8px;
    padding: 12px 18px 16px 118px;
}

.package-goods-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #697386;
}

.package-goods-item strong {
    min-width: 240px;
    max-width: 520px;
    color: #333;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.package-goods-item em {
    color: #8a94a6;
    font-style: normal;
}

.package-actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-left: auto;
}

.package-actions .layui-btn {
    min-height: 28px;
    height: 28px;
    line-height: 26px;
    padding: 0 12px;
}

.package-trace-panel {
    margin: 0 18px 18px 118px;
    padding: 14px 18px 10px;
    border: 1px solid #e5e9f2;
    background: #fbfcff;
}

.package-trace-status {
    margin-bottom: 12px;
    color: #333;
}

.package-trace-list {
    display: grid;
    gap: 0;
}

.package-trace-item {
    min-height: 42px;
}

.order-logistics-modal {
    width: 760px;
    min-height: 0;
}

.order-logistics-form {
    padding: 16px 20px;
}

.order-logistics-table {
    max-height: 430px;
    overflow: auto;
    border-top: 1px solid #e5e9f2;
    border-bottom: 1px solid #e5e9f2;
}

.order-logistics-table .old-table {
    margin: 0;
    border-top: 0;
}

.order-logistics-table th {
    background: #f5f6fa;
}

.order-logistics-table td {
    vertical-align: middle;
}

.order-logistics-form .form-row {
    justify-content: flex-end;
    margin: 14px 0 0;
    padding-left: 0;
}

.order-logistics-form .form-message {
    min-height: 20px;
    margin: 8px 0 0;
    color: #b42318;
    text-align: right;
}

.order-delivery-modal {
    width: 720px;
    min-height: 0;
}

.order-delivery-form {
    padding: 18px 20px 16px;
}

.order-delivery-form .layui-form-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.order-delivery-form .layui-form-label {
    flex: 0 0 92px;
    width: 92px;
    min-height: 32px;
    line-height: 32px;
    text-align: right;
}

.order-delivery-form .layui-input-block {
    flex: 1 1 auto;
    min-width: 0;
}

.order-delivery-form .input-text {
    min-height: 32px;
    line-height: 32px;
    color: #333;
}

.order-delivery-form .radio-line {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 32px;
}

.order-delivery-form .radio-line label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.order-delivery-goods {
    max-height: 260px;
    margin-top: 8px;
    overflow: auto;
    border-top: 1px solid #e5e9f2;
    border-bottom: 1px solid #e5e9f2;
}

.order-delivery-goods .old-table {
    margin: 0;
    border-top: 0;
}

.order-delivery-goods th {
    background: #f5f6fa;
}

.order-delivery-form .form-row {
    justify-content: flex-end;
    margin: 14px 0 0;
    padding-left: 0;
}

.order-delivery-form .form-message {
    min-height: 20px;
    margin: 8px 0 0;
    color: #b42318;
    text-align: right;
}

.order-single-delivery-modal {
    width: 800px;
    min-height: 0;
}

.order-single-delivery-form {
    padding: 18px 20px 16px;
}

.order-single-delivery-form .layui-form-item {
    align-items: flex-start;
    margin-bottom: 12px;
}

.order-single-delivery-form .layui-form-label {
    width: 92px;
    min-height: 32px;
    line-height: 32px;
}

.order-single-delivery-form .layui-input-block {
    min-width: 0;
}

.order-single-delivery-form .input-text {
    min-height: 32px;
    margin: 0;
    line-height: 32px;
    color: #333;
}

.order-single-delivery-form .old-radio-inline {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-right: 28px;
    gap: 6px;
    white-space: nowrap;
}

.single-delivery-goods-box {
    max-height: 310px;
    margin-top: 8px;
    overflow: auto;
    border-top: 1px solid #e6e8ef;
    border-bottom: 1px solid #e6e8ef;
}

.single-delivery-goods-box .old-table {
    margin: 0;
}

.single-delivery-goods-box th {
    background: #f5f5f5;
}

.single-delivery-goods-box td,
.single-delivery-goods-box th {
    padding: 8px 12px;
}

.order-single-delivery-form .form-row {
    justify-content: flex-end;
    margin-top: 14px;
    padding-left: 0;
}

.delivery-message {
    min-height: 22px;
    margin: 8px 0 0;
    color: #b42318;
}

.delivery-message.ok {
    color: #168258;
}

.local-delivery-page {
    padding-bottom: 80px;
}

.local-card {
    border: 0;
    border-radius: 2px;
    margin-bottom: 15px;
    background: #fff;
}

.local-card .layui-card-header {
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.local-card .layui-card-header .card-title {
    font-weight: 600;
}

.local-card .layui-card-body {
    padding: 18px 0 24px;
}

.local-delivery-form .layui-form-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-bottom: 16px;
}

.local-delivery-form .layui-form-label {
    flex: 0 0 132px;
    width: 132px;
    min-height: 32px;
    line-height: 32px;
    text-align: right;
    color: #333;
}

.local-delivery-form .layui-input-block {
    flex: 1 1 640px;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.local-delivery-form .layui-input-inline {
    min-width: 0;
}

.local-delivery-form .len-long {
    width: 520px;
}

.local-check-row,
.local-delivery-form .old-radio-row,
.local-delivery-form .old-checkbox-row,
.local-delivery-form .day-wrap,
.inline-money-row,
.local-discount-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.local-check-row label,
.local-delivery-form .old-radio-row label,
.local-delivery-form .old-checkbox-row label,
.local-delivery-form .day-wrap label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #333;
    line-height: 20px;
    white-space: nowrap;
}

.local-check-row label.disabled {
    color: #a0a7b4;
}

.local-delivery-form input,
.local-delivery-form select,
.local-delivery-form textarea {
    height: 32px;
    min-height: 32px;
    border-radius: 2px;
}

.local-delivery-form input[type="checkbox"],
.local-delivery-form input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
}

.local-delivery-form .short {
    width: 140px;
}

.local-delivery-form .short-number {
    width: 100px;
    flex: 0 0 100px;
}

.local-discount-line {
    margin-left: 144px;
}

.local-delivery-form .word-aux {
    flex: 0 0 calc(100% - 144px);
    margin-left: 144px;
    color: #9aa3b2;
    line-height: 1.6;
}

.local-map-block {
    display: flex;
    width: min(1100px, 100%);
    gap: 20px;
}

.local-map {
    flex: 0 0 750px;
    height: 500px;
    border: 1px solid #ededed;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: #f7f8fa;
}

.local-map .map {
    width: 100%;
    height: 100%;
}

.overlayers {
    flex: 1 1 auto;
    height: 500px;
    border: 1px solid #ededed;
    border-radius: 4px;
    overflow-y: auto;
    background: #fff;
}

.region-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.region-list li {
    padding: 30px 12px;
    position: relative;
    border: 1px solid transparent;
    border-bottom-color: #ebedf0;
}

.region-list li.border-color {
    border-color: #165dff;
}

.area-content {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.area-label {
    width: 70px;
    flex: 0 0 70px;
}

.area-input-inline {
    width: 190px;
}

.region-add-block button {
    display: block;
    width: 196px;
    height: 32px;
    min-height: 32px;
    margin: 10px auto;
    padding: 0;
    border-radius: 2px;
}

.region-add-block button:hover {
    border-color: #165dff;
    color: #165dff;
}

.region-add-block button:disabled,
.region-add-block button.disabled {
    color: #b0b7c3;
    cursor: not-allowed;
    border-color: #e3e7ef;
    background: #f7f8fa;
}

.area-block-delete {
    position: absolute;
    top: 6px;
    right: 8px;
    min-height: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: #105cfb;
}

.local-fixed-btn {
    left: 256px;
}

.store-old-form .img-upload {
    flex-basis: 80px;
    min-width: 80px;
}

.store-old-form .upload-img-block {
    width: 66px;
    height: 66px;
}

.store-old-form .upload-img-box,
.store-old-form .store-image-list .item {
    width: 66px;
    height: 66px;
    min-height: 66px;
    border: 1px dashed #d7dce5;
    border-radius: 0;
    background: #fff;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
}

.store-old-form .store-image-list [draggable="true"] {
    cursor: move;
}

.store-old-form .upload-img-box img,
.store-old-form .store-image-list img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.store-old-form .upload-default {
    width: 100%;
    height: 100%;
    color: #909399;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
}

.store-old-form .upload-default i {
    font-style: normal;
    font-size: 24px;
    line-height: 1;
}

.store-old-form .upload-default p {
    margin: 0;
    font-size: 12px;
}

.store-old-form .preview_img,
.store-old-form .img-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-old-form .upload-img-box .operation,
.store-old-form .store-image-list .operation {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    display: none;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 6px;
    font-size: 12px;
}

.store-old-form .upload-img-box:hover .operation,
.store-old-form .store-image-list .item:hover .operation {
    display: grid;
}

.store-old-form .replace_img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 0;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 12px;
}

.store-old-form .store-image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 66px;
}

.store-old-form .store-image-list button.item {
    cursor: pointer;
}

.store-old-form .store-image-list .operation button {
    border: 0;
    background: transparent;
    color: #fff;
    min-height: auto;
    height: auto;
    line-height: 1;
    padding: 0;
    font-size: 12px;
}

.store-old-form .store-image-list .operation button:disabled {
    color: rgba(255, 255, 255, .45);
    cursor: default;
}

.brand-list-toolbar {
    margin-bottom: 0;
}

.brand-search-inline {
    width: 280px;
    display: flex;
    align-items: center;
}

.brand-search-inline input {
    border-radius: 2px 0 0 2px;
}

.brand-search-inline button {
    min-width: 54px;
    border-left: 0;
    border-radius: 0 2px 2px 0;
}

.brand-search-inline button i {
    font-size: 15px;
    line-height: 1;
}

.brand-list-card {
    padding: 0;
}

.brand-old-table .img-box {
    width: 50px;
    height: 50px;
    border: 1px solid #e6e8ef;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-old-table .img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-old-table .edit-sort {
    width: 80px;
    min-height: 32px;
    height: 32px;
    border-radius: 2px;
}

.brand-old-table .table-btn {
    justify-content: flex-end;
}

.express-company-toolbar {
    margin-bottom: 0;
}

.express-company-old-table td {
    vertical-align: middle;
}

.express-company-old-table .table-btn {
    justify-content: flex-end;
}

.express-company-form.old-upload-form.form-wrap {
    padding: 0 0 80px;
    background: transparent;
    border: 0;
}

.express-company-card {
    border-radius: 2px;
}

.express-company-card .layui-card-header {
    height: 46px;
    padding: 0 18px;
    border-bottom: 1px solid #e6e8ef;
    display: flex;
    align-items: center;
}

.express-company-card .layui-card-body {
    padding: 24px 18px 28px;
}

.express-company-form .old-switch {
    margin-top: 4px;
}

.express-sheet-rule .discount-box {
    min-height: 1px;
}

.express-sheet-rule .discount {
    max-width: 760px;
    margin: 0 0 12px 108px;
    padding: 5px 15px;
    border: 1px dashed #bce8f1;
    background: #f6fbfd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    line-height: 34px;
}

.express-sheet-rule .discount p {
    margin: 0;
}

.express-sheet-rule .discount-del .layui-btn {
    min-height: 30px;
    padding: 0 12px;
}

.express-rule-row {
    margin-left: 108px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.layui-hide {
    display: none !important;
}

.shipping-template-toolbar {
    margin-bottom: 0;
}

.shipping-template-list-card {
    padding: 0;
}

.freeshipping-list-page .single-filter-box {
    padding: 0;
}

.freeshipping-list-page .table-tab {
    margin-bottom: 0;
}

.freeshipping-list-page .layui-tab-content {
    padding: 14px 0 0;
}

.freeshipping-old-table td {
    vertical-align: middle;
}

.freeshipping-old-table .table-btn {
    justify-content: flex-end;
}

.freeshipping-form.form-wrap {
    padding: 20px 0 80px;
    background: #fff;
    border: 0;
}

.freeshipping-form .layui-form-item {
    align-items: flex-start;
}

.freeshipping-form .layui-form-label {
    width: 110px;
}

.freeshipping-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
}

.freeshipping-form .form-row {
    padding-left: 110px;
}

.freeshipping-form .area-table,
.freeshipping-area-table {
    width: 800px;
}

.freeshipping-area-table .old-table {
    margin: 0;
}

.freeshipping-area-table .add-distribution {
    cursor: pointer;
}

.freeshipping-area-table .area-selected {
    border-right: 0;
}

.freeshipping-area-table .area-btn {
    border-left: 0;
    text-align: right;
}

.freeshipping-area-table .area-show {
    margin: 0;
}

.freeshipping-area-table .right-opt {
    float: right;
}

.freeshipping-area-table .opt-update {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #105cfb;
    cursor: pointer;
}

.freeshipping-area-modal .shipping-area-dialog {
    width: 760px;
}

.freeshipping-area-modal .modal-body {
    min-height: 410px;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
}

.shipping-template-old-table td {
    vertical-align: middle;
}

.shipping-template-old-table .table-btn {
    justify-content: flex-end;
}

.shipping-template-form.form-wrap {
    padding: 24px 0 80px;
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
}

.shipping-template-form .layui-form-item {
    align-items: flex-start;
}

.shipping-template-form .layui-form-label {
    flex: 0 0 110px;
}

.shipping-template-form .layui-input-block {
    flex: 0 1 900px;
    min-width: 0;
}

.shipping-template-form .form-row {
    padding-left: 110px;
}

.shipping-template-form .len-long {
    max-width: 650px;
}

.shipping-card-switch {
    margin-left: 4px;
}

.shipping-rule-table {
    width: 900px;
    margin: 0;
}

.shipping-rule-table th,
.shipping-rule-table td {
    vertical-align: middle;
}

.shipping-rule-table input {
    min-height: 32px;
    height: 32px;
    border-radius: 2px;
}

.shipping-rule-table .table-btn {
    justify-content: flex-end;
}

.shipping-rule-table .operation-cell {
    text-align: right;
}

.shipping-rule-table .add-distribution {
    color: #105cfb;
    cursor: pointer;
    text-align: left;
}

.shipping-rule-table .add-distribution-link {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #105cfb;
    cursor: pointer;
    line-height: 1.4;
}

.shipping-word-aux {
    margin-top: 8px;
    color: #a0a7b4;
}

.area-edit-link {
    width: 100%;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #105cfb;
    text-align: left;
    line-height: 1.45;
    word-break: break-all;
}

.shipping-area-modal[hidden] {
    display: none;
}

.shipping-area-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.35);
}

.shipping-area-dialog {
    width: min(920px, calc(100vw - 48px));
    max-height: 82vh;
    background: #fff;
    border: 1px solid #d7deeb;
    box-shadow: 0 14px 40px rgba(18, 28, 45, 0.22);
    display: flex;
    flex-direction: column;
}

.shipping-area-dialog .modal-head {
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid #edf0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shipping-area-dialog .modal-head button {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 30px;
}

.shipping-area-dialog .modal-body {
    min-height: 420px;
    padding: 16px;
    overflow: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
    gap: 16px;
}

.shipping-area-dialog .modal-foot {
    height: 56px;
    padding: 10px 16px;
    border-top: 1px solid #edf0f5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.area-select-panel,
.area-selected-panel {
    border: 1px solid #e5e9f2;
    background: #fff;
}

.area-panel-title {
    height: 40px;
    padding: 0 12px;
    border-bottom: 1px solid #e5e9f2;
    line-height: 40px;
    font-weight: 600;
}

.area-picker-grid {
    min-height: 330px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    border-bottom: 1px solid #e5e9f2;
}

.area-picker-list {
    min-width: 0;
    max-height: 330px;
    overflow: auto;
    border-right: 1px solid #e5e9f2;
}

.area-picker-list:last-child {
    border-right: 0;
}

.area-picker-list > button {
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: #fff;
    text-align: left;
}

.area-picker-list > button:hover,
.area-picker-list > button.active {
    color: #105cfb;
    background: #eef5ff;
}

.area-picker-checks {
    padding: 8px 10px;
}

.area-option {
    min-height: 28px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
}

.area-option input {
    width: auto;
    min-height: auto;
}

.area-option.indent-1 {
    padding-left: 18px;
    color: #666;
}

.area-add-btn {
    margin: 10px 12px;
}

.area-selected-list {
    min-height: 378px;
    max-height: 378px;
    overflow: auto;
    padding: 12px;
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.area-selected-tag {
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid #b8d4ff;
    background: #f4f8ff;
    color: #105cfb;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
}

.area-selected-tag button {
    width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #105cfb;
    color: #fff;
    line-height: 18px;
}

.area-empty {
    width: 100%;
    color: #9aa3b4;
    text-align: center;
    padding: 18px 0;
}

.shipping-fixed-btn {
    left: 256px;
}

.express-trace-form.form-wrap {
    padding: 0 0 80px;
    background: transparent;
    border: 0;
}

.express-trace-card {
    border-radius: 2px;
}

.express-trace-card .layui-card-body {
    padding: 24px 18px 18px;
}

.express-trace-form .config-item {
    margin: 0 0 18px;
}

.express-trace-form .word-aux {
    margin-left: 104px;
    margin-top: 7px;
    color: #a0a7b4;
}

.express-trace-form .word-aux p {
    margin: 0 0 5px;
}

.express-trace-actions {
    justify-content: flex-start;
    padding-left: 104px;
}

.old-upload-form.form-wrap {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    padding: 24px 18px 80px;
}

.old-upload-form .layui-form-item {
    align-items: flex-start;
}

.old-upload-form .layui-form-label {
    flex: 0 0 108px;
}

.old-upload-form .len-long {
    width: 650px;
    max-width: 100%;
}

.old-upload-form .layui-textarea {
    min-height: 92px;
}

.old-upload-form .img-upload {
    flex: 0 0 auto;
    min-width: 80px;
}

.old-upload-form .upload-img-block {
    width: 66px;
    height: 66px;
}

.old-upload-form .upload-img-box {
    width: 66px;
    height: 66px;
    min-height: 66px;
    border: 1px dashed #d7dce5;
    border-radius: 0;
    background: #fff;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.old-upload-form .upload-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.old-upload-form .upload-default {
    width: 100%;
    height: 100%;
    color: #909399;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
}

.old-upload-form .upload-default i {
    font-style: normal;
    font-size: 24px;
    line-height: 1;
}

.old-upload-form .upload-default p {
    margin: 0;
    font-size: 12px;
}

.old-upload-form .preview_img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.old-upload-form .upload-img-box .operation {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    display: none;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 6px;
    font-size: 12px;
}

.old-upload-form .upload-img-box:hover .operation {
    display: grid;
}

.old-upload-form .replace_img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 0;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 12px;
}

.label-list-toolbar {
    margin-bottom: 0;
}

.label-search-inline {
    width: 280px;
    display: flex;
    align-items: center;
}

.label-search-inline input {
    border-radius: 2px 0 0 2px;
}

.label-search-inline button {
    min-width: 54px;
    border-left: 0;
    border-radius: 0 2px 2px 0;
}

.label-list-card {
    padding: 0;
}

.member-label-page {
    padding: 0 var(--old-page-pad) var(--old-page-pad);
    border-top: 0;
    border-radius: 0 0 2px 2px;
    box-shadow: none;
}

.member-label-page .member-label-table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.member-label-page .member-label-table th,
.member-label-page .member-label-table td {
    padding: 10px 12px;
}

.member-label-page .member-label-table th:first-child,
.member-label-page .member-label-table td:first-child {
    text-align: center;
}

.member-label-page .member-label-table td:nth-child(4),
.member-label-page .member-label-table td:nth-child(5) {
    text-align: center;
}

.member-label-page .member-label-table td:last-child {
    text-align: right;
}

.member-label-page .member-label-batch {
    padding: 10px 0 0;
    border-bottom: 0;
}

.label-old-table .edit-sort {
    width: 80px;
    min-height: 32px;
    height: 32px;
    margin: 0 auto;
    border-radius: 2px;
    text-align: center;
}

.label-old-table .table-btn {
    justify-content: flex-end;
}

.old-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, .28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.old-modal-mask[hidden] {
    display: none;
}

.old-toast,
.old-layer-msg {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 120;
    min-width: 120px;
    max-width: 320px;
    padding: 10px 18px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    pointer-events: none;
}

.old-modal-content {
    padding: 24px 28px;
}

.old-modal {
    width: 500px;
    min-height: 200px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
}

.old-modal-head {
    height: 44px;
    padding: 0 14px;
    border-bottom: 1px solid #e6e8ef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.old-modal-head strong {
    font-size: 14px;
    font-weight: 600;
}

.old-modal-head button {
    border: 0;
    background: transparent;
    min-height: auto;
    height: 30px;
    width: 30px;
    padding: 0;
    font-size: 18px;
    color: #999;
}

.old-modal-mask.legacy-layer-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.legacy-layer-mask > .legacy-layer-modal {
    position: static;
    inset: auto;
    z-index: auto;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.legacy-layer-mask > .legacy-layer-modal .old-modal-content {
    min-height: 0;
    overflow: auto;
}

.legacy-layer-footer {
    min-height: 54px;
    padding: 10px 20px;
    border-top: 1px solid #e6e8ef;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    box-sizing: border-box;
}

.service-list-toolbar {
    margin-bottom: 0;
}

.service-search-inline {
    width: 280px;
    display: flex;
    align-items: center;
}

.service-search-inline input {
    border-radius: 2px 0 0 2px;
}

.service-search-inline button {
    border-left: 0;
    border-radius: 0 2px 2px 0;
}

.service-list-card {
    padding: 0;
}

.service-old-table .table-btn {
    justify-content: flex-end;
}

.service-old-table td {
    vertical-align: middle;
}

.service-icon-cell {
    margin: 0 auto;
}

.td-box {
    width: 40px;
    height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.icon-img-box {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 30px;
    display: flex;
}

.icon-img-box img {
    width: 30px;
    max-height: 30px;
    object-fit: contain;
}

.icon-wrap {
    width: inherit;
    height: inherit;
    font-size: 100%;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrap .js-icon {
    font-size: 50%;
    line-height: 1;
}

.service-modal {
    width: 500px;
    min-height: 400px;
}

.service-modal-form {
    padding: 22px 24px 18px;
}

.service-modal-form .layui-form-item {
    align-items: flex-start;
    margin-bottom: 16px;
}

.service-modal-form .layui-form-label.mid {
    flex: 0 0 112px;
    width: 112px;
}

.service-modal-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
}

.service-modal-form .len-mid {
    width: 260px;
    max-width: 260px;
}

.service-modal-form textarea.len-mid {
    height: 92px;
    min-height: 92px;
}

.service-modal-form .img-upload {
    min-width: 0;
}

.img-icon-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-img-upload {
    width: 66px;
    height: 66px;
    min-height: 66px;
    font-size: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 0;
    text-align: center;
    margin-right: 2px;
    padding: 0;
    position: relative;
    background: #fff;
    overflow: hidden;
}

.icon-img-upload .add {
    color: #105cfb;
    font-size: 26px;
    margin: 0 auto;
    width: 66px;
    height: 66px;
    line-height: 66px;
    text-align: center;
    cursor: pointer;
}

.icon-img-upload img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-img-upload .operation {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: none;
    flex-direction: column;
    z-index: 5;
}

.icon-img-upload:hover .operation {
    display: flex;
}

.icon-img-upload .operation span {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
}

.icon-img-upload .operation .js-replace {
    flex: 0 0 24px;
    height: 24px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    line-height: 24px;
    cursor: pointer;
}

.img-icon-box .action-box {
    display: flex;
}

.img-icon-box .action {
    margin-right: 3px;
    width: 42px;
    height: 28px;
    min-height: 28px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 0;
    cursor: pointer;
    padding: 0;
}

.img-icon-box .action:hover {
    border-color: #105cfb;
    color: #105cfb;
}

.service-json-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f8fb;
    color: #105cfb;
    font-size: 24px;
}

.attr-list-toolbar {
    margin-bottom: 0;
}

.attr-search-inline {
    width: 300px;
    display: flex;
    align-items: center;
}

.attr-search-inline input {
    border-radius: 2px 0 0 2px;
}

.attr-search-inline button {
    border-left: 0;
    border-radius: 0 2px 2px 0;
}

.attr-list-card {
    padding: 0;
}

.attr-old-table .edit-sort,
.attribute-old-table .edit-sort {
    width: 120px;
    min-height: 32px;
    height: 32px;
    border-radius: 2px;
}

.attr-old-table .table-btn,
.attribute-old-table .table-btn {
    justify-content: flex-end;
}

.attr-modal {
    width: 500px;
    min-height: 250px;
}

.attr-modal-form,
.attr-group-modal-form {
    padding: 22px 24px 18px;
}

.attr-modal-form .layui-form-item,
.attr-group-modal-form .layui-form-item {
    align-items: flex-start;
    margin-bottom: 16px;
}

.attr-modal-form .layui-form-label.mid,
.attr-group-modal-form .layui-form-label.mid {
    flex: 0 0 128px;
    width: 128px;
}

.attr-modal-form .layui-input-block,
.attr-group-modal-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
}

.attr-modal-form .len-mid,
.attr-group-modal-form .len-mid {
    width: 260px;
    max-width: 260px;
}

.attr-modal-form .len-short,
.attr-group-modal-form .len-short {
    width: 120px;
    max-width: 120px;
}

.attr-modal-form .word-aux.mid,
.attr-group-modal-form .word-aux.mid {
    flex: 0 0 100%;
    margin: -8px 0 0 128px;
}

.attr-manage-panel {
    background: #fff;
    padding: 10px 20px;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
}

.attr-manage-panel .custom-panel-content {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}

.attr-manage-panel .custom-panel-content .panel-content {
    width: calc(100% - 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.attr-manage-panel .custom-panel-content .panel-content li {
    display: flex;
    margin-bottom: 5px;
    min-height: 20px;
    line-height: 20px;
    list-style: none;
}

.attr-manage-panel .custom-panel-content .panel-content li div {
    width: 25%;
}

.attr-manage-panel .custom-panel-content .panel-content li span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #333;
}

.attr-manage-panel .custom-panel-content .panel-content li span:first-of-type {
    display: inline-block;
    width: 90px;
}

.attr-manage-panel .custom-panel-content .panel-operation {
    align-self: center;
    margin-left: auto;
    font-size: 14px;
}

.attr-manage-panel .custom-panel-content.attribute {
    display: block;
    border-bottom: 0;
}

.attr-manage-panel .form-row.sm {
    margin-top: 14px;
}

.attr-group-modal {
    width: 500px;
    min-height: 230px;
}

.attr-value-modal {
    width: 800px;
    min-height: 500px;
}

.attribute-modal-form {
    padding: 22px 24px 18px;
}

.attribute-modal-form .layui-form-item {
    align-items: flex-start;
    margin-bottom: 16px;
}

.attribute-modal-form .layui-form-label {
    flex: 0 0 108px;
    width: 108px;
}

.attribute-modal-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
}

.attribute-modal-form .len-long {
    width: 520px;
    max-width: 520px;
}

.attribute-modal-form .len-mid {
    width: 260px;
    max-width: 260px;
}

.attribute-value-list {
    margin: 0 0 14px 108px;
    width: 560px;
}

.attribute-value-list .table-wrap {
    max-height: 210px;
    margin-bottom: 10px;
    overflow-y: auto;
}

.attribute-value-list .layui-table {
    width: 100%;
    margin: 0;
    border: 1px solid #e6e8ef;
}

.attribute-value-list .layui-table th,
.attribute-value-list .layui-table td {
    padding: 8px 10px;
}

.attribute-value-list .layui-table:first-child th {
    border-bottom: 0;
}

.attribute-value-list .layui-table:last-child {
    margin-top: 0;
}

.category-list-toolbar {
    margin-bottom: 0;
}

.goods-category-list {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
}

.goods-category-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.goods-category-list .table_div {
    color: #666;
}

.goods-category-list .table_head {
    display: flex;
    font-weight: 700;
    background-color: #f7f7f7;
}

.goods-category-list .table_head li {
    height: 50px;
    line-height: 50px;
    border: 0;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

.goods-category-list .table_head .operate {
    text-align: right;
}

.goods-category-list .table_head li:first-child {
    padding-right: 0;
}

.goods-category-list .table_tr {
    display: flex;
    min-height: 50px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    align-items: center;
}

.goods-category-list .table_td {
    position: relative;
    padding: 5px 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.goods-category-list .category-tree-control {
    width: 60px;
    padding-right: 0;
}

.goods-category-list .category-name-cell {
    flex: 6;
}

.goods-category-list .category-image-cell,
.goods-category-list .category-show-cell,
.goods-category-list .category-operate-cell {
    flex: 2;
}

.goods-category-list .category-operate-cell {
    justify-content: flex-end;
}

.goods-category-list .category-level-2 {
    padding-left: 42px;
}

.goods-category-list .category-level-3 {
    padding-left: 84px;
}

.goods-category-list .img-box {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #e6e8ef;
    background: #fff;
    overflow: hidden;
}

.goods-category-list .img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.goods-category-list .table-btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.goods-category-list .layui-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 23px;
    min-height: 23px;
    border: 0;
    border-radius: 50px;
    background-color: transparent;
    color: #105cfb;
    text-align: center;
    padding: 2px 0;
    margin: 5px 0 5px 10px;
    position: relative;
}

.goods-category-list .layui-btn.danger {
    color: #b42318;
}

.goods-category-list .switch {
    width: 30px;
    height: 30px;
    min-height: 30px;
    border: 0;
    background: transparent;
    color: #105cfb;
    padding: 0;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.goods-category-list .empty_switch {
    display: inline-block;
    width: 30px;
    height: 25px;
    padding-right: 15px;
}

.goods-category-list .table_move {
    cursor: move;
    float: left;
    width: 18px;
    margin-right: 10px;
    line-height: 30px;
    color: #999;
    font-size: 11px;
    overflow: hidden;
}

.goods-category-list .category-hidden {
    display: none;
}

.switch-mini {
    width: 42px;
    height: 22px;
    display: inline-block;
    position: relative;
}

.switch-mini input {
    display: none;
}

.switch-mini span {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: #c4ccd8;
    cursor: pointer;
}

.switch-mini span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.16s ease;
}

.switch-mini input:checked + span {
    background: #105cfb;
}

.switch-mini input:checked + span::after {
    transform: translateX(20px);
}

.category-old-form .js-pid {
    display: flex;
    align-items: center;
    gap: 20px;
}

.category-old-form .input-text {
    min-height: 32px;
    line-height: 32px;
    color: #333;
}

.category-old-form .click-link {
    height: 34px;
    line-height: 32px;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
    padding: 0 16px;
    border: 1px solid #c9c9c9;
    background-color: #fff;
    color: #555;
}

.category-old-form .link-url-show {
    margin-right: 10px;
    min-height: 32px;
    line-height: 32px;
}

.category-parent-modal,
.category-link-modal {
    width: 500px;
}

.category-parent-body,
.category-link-body {
    padding: 22px 24px 18px;
    display: grid;
    gap: 14px;
}

.label-modal-form {
    padding: 24px 20px 20px;
}

.label-modal-form .layui-form-label.mid {
    width: 112px;
}

.label-modal-form .form-row.mid {
    padding-left: 112px;
}

.empty-address {
    display: none;
    margin-top: 8px;
}

.empty-address.visible,
.empty-address.error {
    display: block;
    color: #b42318;
}

.required {
    color: #b42318;
    margin-right: 2px;
}

.layui-form-label .required {
    display: inline-block;
    line-height: inherit;
    vertical-align: baseline;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 100px;
}

.layui-tab-title {
    min-height: 42px;
    margin: 0;
    padding: 0 14px;
    border-bottom: 1px solid #e6e8ef;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    list-style: none;
}

.layui-tab-title a,
.layui-tab-title button,
.layui-tab-title li {
    min-height: 42px;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #333;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.layui-tab-title .layui-this,
.layui-tab-title a.active,
.layui-tab-title button.active {
    border-bottom-color: #105cfb;
    color: #105cfb;
}

.layui-tab-content {
    padding: 14px;
}

.old-table {
    background: #fff;
}

.old-table th {
    height: 46px;
    background: #f7f8fa;
    color: #333;
    font-weight: 500;
}

.old-table td {
    vertical-align: middle;
}

.table-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.table-btn a,
.table-btn button,
.text-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 26px;
    border: 0;
    background: transparent;
    color: #105cfb;
    padding: 0;
    line-height: 26px;
    vertical-align: middle;
}

.text-action.danger,
.table-btn .danger {
    color: var(--danger);
}

.batch-bar {
    padding: 10px 14px;
    border-bottom: 1px solid #e6e8ef;
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-bar button {
    min-height: 30px;
    border-radius: 2px;
}

.goods-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
}

.goods-thumb {
    width: 52px;
    height: 52px;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    background: #f3f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #9aa4b2;
    font-size: 12px;
}

.goods-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goods-title {
    display: grid;
    gap: 5px;
}

.fenxiao-admin-page .old-page-tabs {
    margin-bottom: var(--old-page-gap);
}

.fenxiao-tabs {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 56px;
    padding: 0 var(--old-page-pad);
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
}

.fenxiao-tabs a {
    display: inline-flex;
    align-items: center;
    height: 56px;
    color: #303133;
    border-bottom: 2px solid transparent;
}

.fenxiao-tabs a.active {
    color: #105cfb;
    border-bottom-color: #105cfb;
}

.fenxiao-overview-card,
.fenxiao-chart-card {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    padding: 15px;
    margin-bottom: var(--old-page-gap);
}

.fenxiao-section-title {
    color: #111827;
    font-weight: 600;
    margin-bottom: 14px;
}

.fenxiao-dashboard-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--old-page-gap);
}

.fenxiao-metric-grid {
    display: grid;
    gap: 0;
}

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

.fenxiao-metric-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fenxiao-metric-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fenxiao-metric {
    min-height: 86px;
    padding: 14px 16px;
    border-right: 1px solid #e6e8ef;
}

.fenxiao-metric:last-child {
    border-right: 0;
}

.fenxiao-metric p {
    margin: 0 0 12px;
    color: #7a869a;
}

.fenxiao-metric strong {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 600;
    color: #111827;
}

.fenxiao-empty-chart {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a869a;
}

.fenxiao-level-bars {
    min-height: 160px;
    display: grid;
    align-content: center;
    gap: 10px;
}

.fenxiao-level-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    padding: 0 12px;
    background: #f7f8fa;
    color: #303133;
}

.fenxiao-table .goods-info {
    min-width: 0;
}

.fenxiao-modal {
    width: 560px;
}

.fenxiao-modal-form {
    padding: 18px 22px;
}

.fenxiao-inline-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.fenxiao-inline-edit .text-action {
    min-height: 20px;
    width: 20px;
    color: #8a96a8;
    line-height: 20px;
}

.fenxiao-inline-edit .text-action:hover {
    color: #105cfb;
}

.fenxiao-relation-modal {
    width: 520px;
}

.fenxiao-config-form {
    margin-bottom: var(--old-page-gap);
}

.fenxiao-config-actions {
    padding-left: 20px;
}

.fenxiao-withdraw-summary {
    margin-bottom: var(--old-page-gap);
}

.fenxiao-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--old-page-gap);
    margin-bottom: var(--old-page-gap);
}

.detail-info-card {
    margin-bottom: var(--old-page-gap);
}

.fenxiao-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    line-height: 30px;
}

.fenxiao-info-grid span {
    color: #606266;
}

.fenxiao-info-grid strong,
.fenxiao-info-grid a {
    color: #303133;
}

.detail-toolbar,
.detail-sub-toolbar,
.detail-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-sub-toolbar {
    padding: 0 var(--old-page-pad) var(--old-page-gap);
}

.detail-sub-toolbar a {
    color: #303133;
    padding: 7px 14px;
    border-bottom: 2px solid transparent;
}

.detail-sub-toolbar a.active {
    color: #105cfb;
    border-bottom-color: #105cfb;
}

.detail-filter-row {
    padding: 0 var(--old-page-pad) var(--old-page-gap);
}

.detail-filter-row .layui-input {
    width: 180px;
}

.fenxiao-detail-tabs {
    margin: 0 var(--old-page-pad) var(--old-page-gap);
}

.fenxiao-order-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    line-height: 30px;
}

.fenxiao-order-info-grid > div {
    min-width: 0;
}

.fenxiao-order-info-grid > .wide {
    grid-column: 1 / -1;
}

.fenxiao-order-info-grid span {
    color: #606266;
    margin-right: 8px;
}

.fenxiao-order-info-grid strong {
    color: #303133;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.fenxiao-order-total {
    float: right;
    color: #606266;
    font-size: 13px;
    font-weight: 400;
}

.fenxiao-order-total strong {
    color: #f5222d;
    font-size: 16px;
}

.fenxiao-order-table-wrap {
    overflow-x: auto;
}

.fenxiao-order-detail-table {
    min-width: 860px;
}

.fenxiao-product-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.fenxiao-product-image {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e2e2e2;
    color: #9aa4b2;
    font-size: 12px;
}

.fenxiao-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fenxiao-product-name {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.fenxiao-product-name strong {
    color: #303133;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.fenxiao-product-name em {
    color: #8e8c8c;
    font-size: 12px;
    font-style: normal;
}

.commission-info {
    line-height: 22px;
}

.commission-level {
    display: grid;
    grid-template-columns: 72px minmax(130px, 1fr) 110px 90px;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.commission-level:last-child {
    margin-bottom: 0;
}

.commission-level span {
    color: #606266;
}

@media (max-width: 800px) {
    .fenxiao-order-info-grid {
        grid-template-columns: 1fr;
    }

    .fenxiao-order-info-grid > .wide {
        grid-column: auto;
    }

    .commission-level {
        grid-template-columns: 72px minmax(100px, 1fr);
    }
}

@media (max-width: 1000px) {
    .fenxiao-detail-grid {
        grid-template-columns: 1fr;
    }
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mini-tag {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    border: 1px solid rgba(16, 92, 251, 0.25);
    border-radius: 2px;
    color: #105cfb;
    background: rgba(16, 92, 251, 0.06);
    padding: 0 5px;
    font-size: 12px;
}

.mini-tag.gray {
    border-color: #d8dde8;
    color: #697386;
    background: #f7f8fb;
}

.old-product-screen .layui-input-inline {
    width: 185px;
    min-width: 185px;
}

.old-product-screen .range-inline .layui-input-inline {
    width: 185px;
    min-width: 185px;
}

.old-product-screen .layui-form-mid {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    color: #666;
}

/* 商品列表沿用旧版筛选面板节奏；装修编辑器有独立的间距体系。 */
.old-product-screen {
    padding: 15px 0 5px;
    margin-bottom: 0;
    border: 0;
    border-radius: 5px;
}

.old-product-screen .layui-form-item {
    gap: 0;
    margin-bottom: 10px;
}

.old-product-screen .layui-inline {
    gap: 0;
    margin-right: 10px;
    margin-bottom: 0;
}

.old-product-screen .layui-form-label {
    width: 120px;
    padding-right: 10px;
}

.old-product-screen .layui-input-inline {
    margin-left: 0;
}

.old-product-screen .form-row {
    padding-left: 120px;
}

.product-list-tab {
    margin-top: 14px;
}

.product-list-tab .layui-tab-title {
    min-height: 41px;
    height: 41px;
    padding: 0;
    gap: 0;
    align-items: stretch;
    border-color: #f1f1f1;
}

.product-list-tab .layui-tab-title li {
    min-height: 41px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #f1f1f1;
    border-right: 0;
    border-bottom-color: #f1f1f1;
}

.product-list-tab .layui-tab-title li:last-child {
    border-right: 1px solid #f1f1f1;
}

.product-list-tab .layui-tab-title li.layui-this {
    background: #f2f3f5;
    border-radius: 2px 0 0 2px;
}

.product-list-tab .layui-tab-title li.layui-this::after,
.product-list-tab .layui-tab-title a.active {
    border-bottom-color: transparent;
}

.product-list-tab .layui-tab-title a.active {
    color: #333;
}

.product-list-tab .layui-tab-content {
    padding: 0;
    border: 0;
    background: #fff;
}

.old-product-actions {
    gap: 8px;
}

.product-batch-panel {
    top: 10vh;
    width: 760px;
    min-height: 420px;
}

.product-batch-form {
    padding: 18px 18px 16px;
}

.batch-set-tips {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    margin-bottom: 12px;
    background: #f7f8fb;
    color: #697386;
    border: 1px solid #eef1f6;
}

.batch-set-wrap {
    min-height: 260px;
    border: 1px solid #eef1f6;
    display: grid;
    grid-template-columns: 160px 1fr;
    background: #fff;
}

.batch-set-tabs {
    border-right: 1px solid #eef1f6;
    background: #f9fafc;
}

.batch-set-tabs button {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid #eef1f6;
    border-radius: 0;
    background: transparent;
    color: #333;
    padding: 0 16px;
}

.batch-set-tabs button.active {
    background: #fff;
    color: #105cfb;
}

.batch-set-content {
    padding: 24px 28px;
}

.batch-panel {
    display: none;
}

.batch-panel.active {
    display: block;
}

.batch-panel .layui-form-item {
    margin-bottom: 18px;
}

.batch-panel .layui-form-label {
    width: 96px;
    padding: 0 12px 0 0;
    line-height: 34px;
    text-align: right;
}

.batch-panel .layui-input-block {
    margin-left: 108px;
    min-height: 34px;
}

.batch-panel .len-mid {
    width: 220px;
}

.batch-panel .len-short {
    width: 120px;
}

.batch-panel .tiny-select {
    width: 92px;
}

.batch-panel .sign-select {
    width: 56px;
}

.batch-panel .checkbox-list,
.batch-panel .radio-list,
.batch-panel .inline-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.batch-panel .radio-list.wrap {
    align-items: flex-start;
}

.batch-panel .checkbox-list label,
.batch-panel .radio-list label {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.batch-panel input[type="checkbox"],
.batch-panel input[type="radio"] {
    width: 14px;
    height: 14px;
}

.batch-panel .word-aux.offset {
    margin-left: 108px;
    margin-top: 8px;
    color: #8a94a6;
}

.product-batch-actions {
    padding-left: 188px;
    margin-top: 16px;
    gap: 8px;
}

.product-batch-form .form-message {
    margin: 8px 0 0 188px;
    color: var(--danger);
}

.disabled-link-button,
button.disabled-option:disabled,
.table-btn button.disabled-option:disabled {
    border-color: #d8deea;
    background: #fff;
    color: #9aa4b2 !important;
    cursor: not-allowed;
}

.product-old-table th,
.product-old-table td {
    font-size: 13px;
}

.old-goods-info {
    align-items: flex-start;
    min-width: 330px;
}

.goods-expand-toggle {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    line-height: 18px;
    padding: 0;
    margin-top: 16px;
    border-radius: 2px;
    border: 1px solid #d8deea;
    background: #fff;
    color: #666;
    font-size: 16px;
    text-align: center;
}

.goods-title a {
    color: #333;
    line-height: 1.4;
    word-break: break-word;
}

.goods-title a:hover {
    color: #105cfb;
}

.mini-tag.red {
    background: #f52f3e;
    border-color: #f52f3e;
    color: #fff;
}

.mini-tag.dark {
    background: #222;
    border-color: #222;
    color: #fff;
}

.danger-text {
    color: #e23b3b;
}

.old-operation {
    min-width: 160px;
}

.sku-detail-row td {
    background: #fafbfe;
    padding-top: 0;
    padding-bottom: 0;
}

.sku-empty {
    padding: 18px 0;
    color: #9aa4b2;
}

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

.sku-list-old li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 160px;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #eef1f7;
}

.sku-thumb {
    width: 42px;
    height: 42px;
    border: 1px solid #e6e8ef;
    background: #f3f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #9aa4b2;
    font-size: 12px;
}

.sku-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sku-info {
    display: grid;
    gap: 5px;
    color: #555;
}

.sku-info > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sku-name {
    color: #333;
    font-weight: 500;
}

.sku-price {
    text-align: right;
    color: #333;
}

.sku-member-price {
    margin-top: 2px;
    color: #8a5a13;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 2px;
    padding: 0 6px;
    color: #168258;
    background: rgba(22, 130, 88, 0.08);
}

.status-pill.off,
.status-pill.pending {
    color: #a16207;
    background: rgba(161, 98, 7, 0.1);
}

.status-pill.danger {
    color: var(--danger);
    background: rgba(180, 35, 24, 0.08);
}

.page-tabs {
    position: sticky;
    top: 65px;
    z-index: 10;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
}

.old-form-card {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    margin-bottom: 12px;
}

.old-form-card > h2,
.layui-card-header {
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border-bottom: 1px solid #e6e8ef;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
}

.old-form-card .card-body,
.layui-card-body {
    padding: 16px 14px;
}

.old-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.old-form-grid .span-2,
.old-form-grid .sku-editor {
    grid-column: span 2;
}

.field-help,
.word-aux {
    color: #8a94a6;
    font-size: 12px;
    line-height: 1.6;
}

.fixed-btn {
    position: sticky;
    bottom: 0;
    z-index: 12;
    margin: 16px -15px -15px;
    padding: 12px 18px 12px 115px;
    border-top: 1px solid #e6e8ef;
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    gap: 10px;
}

.tree-table {
    border: 1px solid #e6e8ef;
    background: #fff;
}

.tree-head,
.tree-row {
    display: grid;
    grid-template-columns: 54px minmax(220px, 1fr) 130px 120px 120px 170px;
    align-items: center;
}

.tree-head {
    min-height: 46px;
    background: #f7f8fa;
    color: #333;
    font-weight: 500;
}

.tree-row {
    min-height: 54px;
    border-top: 1px solid #e6e8ef;
}

.tree-head > div,
.tree-row > div {
    padding: 8px 12px;
}

.tree-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tree-indent-2 { padding-left: 24px; }
.tree-indent-3 { padding-left: 52px; }

.inline-edit {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border-top: 1px solid #e6e8ef;
}

.inline-edit .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.old-search-input {
    display: flex;
    align-items: center;
    gap: 0;
}

.single-filter-box .old-search-input {
    width: 280px;
    margin-left: 8px;
}

.single-filter-box .old-search-input .layui-input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 2px 0 0 2px;
}

.single-filter-box .old-search-input .layui-btn {
    width: 42px;
    flex: 0 0 42px;
    height: 34px;
    min-height: 34px;
    line-height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.old-search-input input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 2px 0 0 2px;
}

.old-search-input button {
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-left: 0;
    border-radius: 0 2px 2px 0;
    width: 42px;
    min-width: 42px;
}

.shop-content-toolbar,
.old-page-tabs + .single-filter-box {
    min-height: 62px;
    margin: 0;
    padding: var(--old-page-pad);
    background: #fff;
    border: 1px solid #e6e8ef;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
    box-sizing: border-box;
}

.old-page-tabs + .single-filter-box {
    border-top: 0;
    border-radius: 0;
}

.shop-content-toolbar + .shop-content-list,
.old-page-tabs + .single-filter-box + .shop-content-list,
.shop-content-toolbar + .shop-album-panel,
.old-page-tabs + .single-filter-box + .shop-album-panel {
    margin-top: 0;
}

.meta-edit-row {
    display: none;
    background: #f8fafc;
}

.meta-edit-row.open {
    display: table-row;
}

.meta-edit-row td {
    padding: 14px;
}

.compact-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
}

.store-category-page .layui-form-label {
    width: 160px;
    flex: 0 0 160px;
}

.store-category-page .word-aux {
    margin-left: 160px;
    width: 100%;
}

.store-category-page .category-table {
    width: 665px;
}

.store-category-page .category-head,
.store-category-page .category-tr {
    display: flex;
    width: 100%;
    min-height: 50px;
    padding: 8px 0;
    box-sizing: border-box;
}

.store-category-page .category-head {
    background: #f9f9fc;
}

.store-category-page .category-body {
    max-height: 470px;
    overflow: auto;
}

.store-category-page .category-head span,
.store-category-page .category-tr .tr-input,
.store-category-page .category-tr .tr-active {
    padding: 0 15px;
    box-sizing: border-box;
}

.store-category-page .category-head span:first-child,
.store-category-page .category-tr .tr-input {
    flex: 1;
}

.store-category-page .category-head span:last-child,
.store-category-page .category-tr .tr-active {
    width: 150px;
    text-align: center;
}

.store-category-page .category-tr {
    align-items: center;
    min-height: auto;
    padding: 15px 0;
    border-bottom: 1px solid #e4e4e4;
    background: transparent;
}

.store-category-page .category-tr .tr-input input {
    width: 350px;
    height: 36px;
    min-height: 36px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    padding: 0 15px;
    line-height: 36px;
}

.store-category-page .category-tr .tr-active {
    display: flex;
    justify-content: center;
    gap: 18px;
}

.store-category-page .tr-save,
.store-category-page .tr-delete,
.store-category-page .add-category {
    min-height: auto;
    border: 0;
    background: transparent;
    padding: 0;
    color: #105cfb;
    cursor: pointer;
}

.store-category-page .category-empty {
    padding: 15px 0;
    text-align: center;
    border-bottom: 1px solid #e4e4e4;
    color: #8a94a6;
}

.store-category-page .add-category {
    margin-top: 12px;
}

.store-category-page .category-message {
    margin-top: 8px;
}

.store-label-table .edit-sort {
    width: 80px;
    min-height: 32px;
    height: 32px;
    padding: 0 8px;
}

.store-label-table .table-btn {
    justify-content: flex-end;
}

.store-goods-modal-mask {
    z-index: 90;
}

.store-goods-modal {
    width: min(920px, calc(100vw - 48px));
    max-height: calc(100vh - 64px);
    overflow: hidden;
}

.store-goods-modal-body {
    max-height: calc(100vh - 112px);
    padding: 20px 22px;
    overflow: auto;
}

.store-goods-modal-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 16px;
    color: #68758a;
}

.store-goods-modal-summary strong {
    color: #202b3c;
    font-size: 16px;
}

.store-goods-sku-table th,
.store-goods-sku-table td {
    vertical-align: middle;
}

.store-goods-sku-table .layui-input {
    width: 92px;
    height: 32px;
}

.store-goods-sku-table small {
    color: #96a0b2;
}

.store-goods-restriction {
    display: block;
    margin-bottom: 7px;
    white-space: nowrap;
}

.store-goods-sku-table .layui-btn-sm {
    min-height: 28px;
    height: 28px;
    line-height: 26px;
    padding: 0 10px;
}

.old-modal[hidden] {
    display: none;
}

.old-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.old-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.old-modal-panel {
    position: absolute;
    top: 18vh;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    min-height: 220px;
    background: #fff;
    border: 1px solid #e2e7f0;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
}

.old-modal-title {
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid #edf0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.old-modal-title button {
    width: 28px;
    height: 28px;
    min-height: 28px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #8a94a6;
    font-size: 22px;
    line-height: 28px;
}

.old-modal-form {
    padding: 24px 24px 20px;
}

.old-modal-form .form-row.mid {
    padding-left: 118px;
}

.record-change.increase {
    color: #168258;
}

.record-change.decrease {
    color: #b42318;
}

.goods-form-tools {
    margin-bottom: 10px;
}

.goods-edit-form {
    display: block;
}

.goods-tabs {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
}

.goods-edit-form .layui-tab-content {
    background: #eff0f4;
}

.goods-edit-form .layui-tab-item {
    display: none;
}

.goods-edit-form .layui-tab-item.layui-show {
    display: block;
}

.goods-edit-form .layui-card {
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    margin-bottom: 12px;
}

.goods-edit-form .layui-card-header .card-title,
.goods-edit-form .layui-card-header {
    font-size: 15px;
    font-weight: 600;
}

.goods-edit-form .layui-form-item {
    gap: 8px 12px;
}

.goods-edit-form .layui-form-label {
    flex: 0 0 126px;
    width: 126px;
    line-height: 38px;
}

.goods-edit-form .layui-input-inline {
    min-width: 220px;
}

.goods-edit-form .layui-input-block {
    min-width: 320px;
}

.goods-edit-form .len-short {
    max-width: 160px;
}

.goods-edit-form .len-mid {
    max-width: 360px;
}

.goods-edit-form .len-long {
    max-width: 650px;
}

.goods-edit-form textarea.len-long {
    min-height: 82px;
}

.commodity-type-box {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.commodity-type-item {
    width: 168px;
    min-height: 74px;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    background: #fff;
    color: #333;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 10px;
}

.commodity-type-item span:first-child {
    font-size: 15px;
    font-weight: 600;
}

.commodity-type-item span:last-child {
    color: #8a94a6;
    font-size: 12px;
}

.commodity-type-item.border-color {
    border-color: #105cfb;
    color: #105cfb;
    background: rgba(16, 92, 251, 0.04);
}

.checkbox-line,
.radio-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    min-height: 38px;
}

.checkbox-line label,
.radio-line label {
    width: auto;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #333;
    line-height: 20px;
    white-space: nowrap;
}

.checkbox-line input,
.radio-line input {
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
}

.disabled-option {
    color: #9aa4b2 !important;
}

.goods-image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 104px;
}

.upload-img-item,
.upload-img-add {
    position: relative;
    width: 104px;
    min-height: 132px;
}

.upload-img-square,
.upload-img-add {
    border: 1px dashed #cfd7e6;
    border-radius: 2px;
    background: #f8fafc;
}

.upload-img-square {
    width: 104px;
    height: 104px;
    overflow: hidden;
}

.upload-img-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-img-add {
    height: 104px;
    min-height: 104px;
    color: #697386;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
}

.upload-img-add span {
    font-size: 26px;
    line-height: 1;
}

.upload-img-add em {
    font-style: normal;
    font-size: 12px;
}

.upload-img-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.upload-img-actions button {
    min-height: 22px;
    padding: 0 4px;
    border: 0;
    color: #105cfb;
    background: transparent;
    font-size: 12px;
}

.upload-img-actions button:disabled {
    color: #b0b6c3;
    cursor: default;
}

.main-image-mark {
    position: absolute;
    top: 4px;
    left: 4px;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 2px;
    color: #fff;
    background: #105cfb;
    font-size: 12px;
    line-height: 20px;
}

.video-thumb {
    width: 280px;
    height: 158px;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    background: #f7f8fa;
    overflow: hidden;
}

.video-thumb video {
    width: 100%;
    height: 100%;
    background: #111827;
}

.up-video {
    width: 280px;
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.up-video button {
    border-radius: 2px;
}

.up-video .delete-video {
    color: #b42318;
}

.file-title ul {
    margin: 4px 0 0;
    padding-left: 0;
    list-style: none;
}

.switch-like {
    width: 44px;
    height: 24px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.switch-like input {
    display: none;
}

.switch-like span {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: #c4ccd8;
    transition: background 0.16s ease;
}

.switch-like span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.16s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.switch-like input:checked + span {
    background: #105cfb;
}

.switch-like input:checked + span::after {
    transform: translateX(20px);
}

.goods-edit-form .spec-edit-list {
    margin-bottom: 10px;
    user-select: none;
}

.goods-edit-form .spec-edit-list .spec-item {
    position: relative;
    border: 1px dotted transparent;
    background: #fff;
    padding: 10px;
}

.goods-edit-form .spec-edit-list .spec-item:hover {
    border-color: #9e9e9e;
    cursor: move;
}

.goods-edit-form .spec-edit-list .spec-item .layui-form-item:last-child {
    margin-bottom: 0;
}

.goods-edit-form .spec-edit-list .spec-name-wrap {
    position: relative;
    width: 240px;
}

.goods-edit-form .spec-edit-list .spec-name-wrap .layui-input {
    padding-right: 30px;
}

.goods-edit-form .spec-edit-list .spec-image-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    cursor: pointer;
}

.goods-edit-form .spec-edit-list .spec-image-toggle input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #1265f8;
}

.goods-edit-form .spec-edit-list .layui-input-block.spec-value {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.goods-edit-form .spec-edit-list .spec-value ul {
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.goods-edit-form .spec-edit-list .spec-value ul:empty {
    display: none;
}

.goods-edit-form .spec-edit-list .spec-value ul li {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 30px;
    margin: 4px 8px 4px 0;
    padding: 0 15px;
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    background: #f7f7f7;
    color: #303133;
    font-size: 12px;
    line-height: 30px;
    vertical-align: middle;
    cursor: pointer;
}

.goods-edit-form .spec-edit-list .spec-value-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    min-width: 25px;
    height: 25px;
    min-height: 25px;
    margin: 0 5px 0 -10px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    vertical-align: middle;
}

.goods-edit-form .spec-edit-list .spec-value-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goods-edit-form .spec-edit-list .spec-txt {
    vertical-align: middle;
}

.goods-edit-form .spec-edit-list .spec-txt[contenteditable="true"] {
    min-width: 40px;
    padding: 5px 10px;
    outline: 0;
    border: 1px solid #1265f8;
    border-radius: 2px;
    background: #fff;
}

.goods-edit-form .spec-edit-list .spec-value-remove,
.goods-edit-form .spec-edit-list .spec-group-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    display: none;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
}

.goods-edit-form .spec-edit-list .spec-value ul li:hover .spec-value-remove,
.goods-edit-form .spec-edit-list .spec-item:hover .spec-group-remove {
    display: block;
}

.goods-edit-form .spec-edit-list .spec-group-remove {
    position: absolute;
    top: -8px;
    right: -8px;
}

.goods-edit-form .spec-edit-list .add-spec-value {
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 30px;
}

.goods-edit-form .spec-edit-list .add-spec-value-popup {
    position: absolute;
    z-index: 30;
    left: -15px;
    top: 35px;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 15px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    cursor: auto;
}

.goods-edit-form .spec-edit-list .add-spec-value-popup.show {
    display: flex;
}

.goods-edit-form .spec-edit-list .add-spec-value-popup .layui-input {
    width: 280px;
}

.goods-edit-form .spec-edit-list .add-spec-value-popup .layui-btn {
    flex: 0 0 auto;
}

.editor-media-modal[hidden] {
    display: none;
}

.editor-media-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0, 0, 0, .46);
}

.editor-media-dialog {
    display: grid;
    grid-template-rows: 52px 70px minmax(420px, 1fr) 62px;
    width: min(1080px, calc(100vw - 60px));
    height: min(760px, calc(100vh - 60px));
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
}

.editor-media-header,
.editor-media-toolbar,
.editor-media-footer {
    display: flex;
    align-items: center;
}

.editor-media-header {
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #e5e5e5;
}

.editor-media-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.editor-media-header button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a8f99;
    font-size: 24px;
    line-height: 32px;
}

.editor-media-toolbar {
    gap: 12px;
    padding: 0 24px;
    border-bottom: 1px solid #eef0f4;
}

.editor-media-toolbar .layui-input {
    width: 240px;
    margin-left: auto;
}

.editor-media-body {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    min-height: 0;
}

.editor-media-groups {
    overflow: auto;
    padding: 8px 0;
    border-right: 1px solid #eef0f4;
    background: #fafafa;
}

.editor-media-groups button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding-right: 16px;
    border: 0;
    background: transparent;
    color: #303133;
    text-align: left;
}

.editor-media-groups button.active {
    background: #edf4ff;
    color: #1265f8;
}

.editor-media-groups button em {
    color: #9aa1ad;
    font-style: normal;
}

.editor-media-assets {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    align-content: start;
    gap: 18px;
    overflow: auto;
    padding: 20px 24px;
}

.editor-media-assets > .empty {
    grid-column: 1 / -1;
}

.editor-media-card {
    position: relative;
    min-width: 0;
    padding: 0;
    border: 2px solid transparent;
    background: #fff;
    text-align: left;
}

.editor-media-card > span {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #e8eaf0;
    background: #f5f7fa;
}

.editor-media-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.editor-media-card em {
    display: block;
    overflow: hidden;
    padding: 8px 2px 2px;
    color: #303133;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-media-card i {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1265f8;
    color: #fff;
    font-style: normal;
    line-height: 24px;
    text-align: center;
}

.editor-media-card:hover,
.editor-media-card.selected {
    border-color: #1265f8;
}

.editor-media-card.selected i {
    display: block;
}

.editor-media-footer {
    justify-content: flex-end;
    gap: 12px;
    padding: 0 24px;
    border-top: 1px solid #eef0f4;
}

.editor-media-footer span {
    margin-right: auto;
    color: #8a8f99;
}

.goods-edit-form .batch-operation-sku {
    display: none;
}

.goods-edit-form .batch-operation-sku.show {
    display: flex;
}

.goods-edit-form .batch-operation-sku .layui-input-inline {
    flex: 1 1 900px;
    align-items: center;
    flex-wrap: wrap;
}

.goods-edit-form .batch-operation-sku .text-color {
    display: inline-block;
    height: 34px;
    margin-right: 10px;
    color: #105cfb;
    cursor: pointer;
    line-height: 34px;
}

.goods-edit-form .batch-operation-sku [data-batch-value],
.goods-edit-form .batch-operation-sku [data-apply-batch],
.goods-edit-form .batch-operation-sku [data-clear-batch],
.goods-edit-form .batch-operation-sku [data-batch-spec-filters],
.goods-edit-form .batch-operation-sku [data-batch-image-panel] {
    display: none;
}

.goods-edit-form .batch-operation-sku [data-batch-controls].editing > .text-color {
    display: none !important;
}

.goods-edit-form .batch-operation-sku [data-batch-controls].editing [data-batch-value],
.goods-edit-form .batch-operation-sku [data-batch-controls].editing [data-apply-batch],
.goods-edit-form .batch-operation-sku [data-batch-controls].editing [data-clear-batch] {
    display: inline-block;
    margin-right: 8px;
}

.goods-edit-form .batch-operation-sku [data-batch-controls].editing [data-batch-spec-filters] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
}

.goods-edit-form .batch-operation-sku [data-batch-spec-filters] .layui-input-inline {
    flex: 0 0 150px;
    width: 150px;
}

.goods-edit-form .batch-operation-sku [data-batch-spec-filters] select {
    width: 150px;
    height: 34px;
    padding: 0 28px 0 10px;
}

.goods-edit-form .batch-operation-sku [data-batch-controls].image-editing [data-batch-value] {
    display: none;
}

.goods-edit-form .batch-operation-sku [data-batch-controls].image-editing [data-batch-image-panel] {
    display: flex;
    order: 5;
    width: 100%;
    gap: 8px;
    clear: both;
    padding-top: 8px;
}

.goods-edit-form .batch-sku-image {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

.goods-edit-form .batch-sku-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goods-edit-form .sku-table {
    display: none;
    min-width: 0;
    user-select: none;
}

.goods-edit-form .sku-table.show {
    display: flex;
}

.goods-edit-form .sku-table .layui-input-block {
    min-width: 0;
}

.goods-edit-form .sku-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.goods-edit-form .sku-table-body {
    min-width: 1360px;
    margin: 0;
}

.goods-edit-form .sku-table-body th,
.goods-edit-form .sku-table-body td {
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

.goods-edit-form .sku-table-body .layui-input {
    width: 108px;
    min-width: 108px;
}

.goods-edit-form .sku-table-body td:nth-last-child(2) .layui-input {
    width: 180px;
    min-width: 180px;
}

.goods-edit-form .sku-table-body .sku-imgs {
    width: 130px;
    min-width: 130px;
}

.goods-edit-form .sku-images {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.goods-edit-form .sku-images .img-wrap {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

.goods-edit-form .sku-images .img-wrap > a {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    line-height: 50px;
    text-align: center;
}

.goods-edit-form .sku-images .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goods-edit-form .sku-images .operation {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(0, 0, 0, .3);
}

.goods-edit-form .sku-images .img-wrap:hover .operation {
    display: flex;
}

.goods-edit-form .sku-images .operation button {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 20px;
}

.goods-edit-form .sku-images .upload-sku-img {
    display: inline-block;
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
    margin: 8px;
    padding: 0;
    border: 1px dashed #d9d9d9;
    border-radius: 2px;
    background: #fbfbfb;
    color: #606266;
    font-size: 22px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
}

.goods-edit-form .sku-default-cell {
    min-width: 54px;
}

.goods-edit-form .sku-default-help {
    margin: 10px 0 0;
}

.text-button {
    border: 0;
    background: transparent;
    color: #1e6fff;
    padding: 0;
    min-height: auto;
    line-height: 20px;
    cursor: pointer;
}

.stock-transform-summary {
    margin-top: 4px;
    color: #8a94a6;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.stock-transform-single-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stock-transform-set-dialog {
    width: 560px;
}

.stock-transform-set-body {
    padding: 24px 28px 18px;
}

.stock-transform-set-body .layui-form-label.sm {
    width: 94px;
}

.stock-transform-set-body .layui-input-block {
    margin-left: 104px;
}

.inline-transform-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.special-length {
    width: min(980px, 100%);
}

.goods-fixed-btn {
    margin-left: 0;
    margin-right: 0;
}

/* Product form: keep the old admin layout while preserving the SuperCai Shop brand. */
.old-logo a span {
    display: block;
    text-align: center;
    font-size: 8px;
    line-height: 1.08;
    letter-spacing: 0;
}

.account-area {
    gap: 16px;
    font-size: 13px;
}

.account-area .visit-shop {
    min-height: 26px;
    line-height: 24px;
    padding: 0 10px;
    border: 1px solid #2f72c9;
    color: #2f72c9;
    border-radius: 2px;
}

.account-area .account-sep {
    width: 1px;
    height: 18px;
    background: #e6e8ef;
}

.account-area .admin-drop {
    cursor: pointer;
    font-size: 13px;
}

.goods-form-tools {
    display: none;
}

.goods-edit-form {
    display: block;
    margin: 0;
}

.goods-tabs {
    background: #fff;
    border: 0;
    border-radius: 0;
}

.goods-tabs > .layui-tab-title {
    min-height: 54px;
    padding: 0 30px;
    border-bottom: 1px solid #e6e8ef;
    align-items: center;
    gap: 40px;
}

.goods-tabs > .layui-tab-title li {
    height: 54px;
    line-height: 54px;
    padding: 0;
    font-size: 14px;
}

.goods-edit-form .layui-tab-content {
    min-height: 0;
    padding: 16px 30px 90px;
    background: #fff;
}

.goods-edit-form[data-active-tab="detail"] .layui-tab-content {
    padding-bottom: 22px;
}

.goods-edit-form .layui-tab-item {
    display: none;
}

.goods-edit-form .layui-tab-item.layui-show {
    display: block;
}

.goods-edit-form .layui-card,
.goods-edit-form .card-common {
    border: 0;
    border-radius: 0;
    margin: 0 0 12px;
    background: #fff;
}

.goods-edit-form .layui-card-header {
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-bottom: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

.goods-edit-form .layui-card-header .card-title {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

.goods-edit-form .layui-card-header .card-title::before {
    content: "";
    width: 4px;
    height: 16px;
    margin-right: 8px;
    background: #105cfb;
}

.goods-edit-form .layui-card-body {
    padding: 8px 0 10px;
}

.goods-edit-form .layui-form-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.goods-edit-form .layui-form-label,
.goods-edit-form .layui-form-label.sm,
.goods-edit-form .compact-label {
    display: block;
    flex: 0 0 126px;
    width: 126px;
    height: 32px;
    line-height: 32px;
    padding: 0;
    color: #333;
    text-align: right;
}

.goods-edit-form [data-tab-panel="detail"] .layui-form-label.sm {
    flex-basis: 48px;
    width: 48px;
}

.goods-edit-form .layui-input-inline,
.goods-edit-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.goods-edit-form input,
.goods-edit-form select,
.goods-edit-form textarea {
    min-height: 32px;
    height: 32px;
    border-radius: 0;
    padding: 6px 10px;
    font-size: 14px;
}

.goods-edit-form textarea {
    height: auto;
}

.goods-edit-form .len-short {
    width: 120px;
    max-width: none;
}

.goods-edit-form .len-mid {
    width: 240px;
    max-width: none;
}

.goods-edit-form .len-long {
    width: 450px;
    max-width: none;
}

.goods-edit-form .category-path-add {
    margin-left: 8px;
    height: 32px;
    line-height: 30px;
    padding: 0 12px;
}

.goods-edit-form .category-path-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    max-width: 760px;
}

.goods-edit-form .category-path-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #dbe2ee;
    background: #fff;
    color: #303133;
    font-size: 13px;
}

.goods-edit-form .category-path-tag.main {
    border-color: #1e73ff;
    color: #1e73ff;
}

.goods-edit-form .category-path-tag em {
    font-style: normal;
    color: #8a95a8;
}

.goods-edit-form .category-path-tag.main em {
    color: #1e73ff;
}

.goods-edit-form .category-path-tag button {
    border: 0;
    background: transparent;
    color: #8a95a8;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.goods-edit-form textarea.len-long {
    width: 450px;
    height: 100px;
    min-height: 100px;
}

.goods-edit-form .layui-form-mid {
    min-height: 32px;
    line-height: 32px;
    padding: 0;
}

.goods-edit-form .layui-form-item > .word-aux,
.goods-edit-form .file-title.word-aux {
    flex: 0 0 calc(100% - 138px);
    min-width: calc(100% - 138px);
    width: auto;
    max-width: 760px;
    margin-left: 138px;
    color: #a0a7b4;
}

.goods-edit-form .radio-line,
.goods-edit-form .checkbox-line {
    min-height: 32px;
    align-items: center;
}

.goods-edit-form .switch-like {
    margin-top: 2px;
}

.commodity-type-box {
    gap: 14px;
}

.commodity-type-item {
    width: 108px;
    min-height: 80px;
    padding: 8px;
    border-radius: 0;
    gap: 4px;
}

.commodity-type-item span:first-child {
    font-size: 14px;
    font-weight: 400;
}

.commodity-type-item span:last-child {
    font-size: 13px;
    color: #333;
}

.commodity-type-item.border-color {
    background: #fff;
    color: #333;
    border-color: #4f8fa6;
}

.goods-edit-form .card-package-types {
    display: flex;
    align-items: stretch;
    gap: 14px;
    max-width: 790px;
}

.goods-edit-form .card-package-type {
    position: relative;
    width: 220px;
    min-height: 76px;
    padding: 12px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    background: #fff;
    color: #333;
    text-align: left;
    cursor: pointer;
}

.goods-edit-form .card-package-type strong,
.goods-edit-form .card-package-type span {
    display: block;
    font-weight: 400;
}

.goods-edit-form .card-package-type strong {
    margin-bottom: 7px;
    font-size: 14px;
}

.goods-edit-form .card-package-type span {
    color: #999;
    font-size: 12px;
    line-height: 18px;
}

.goods-edit-form .card-package-type.active {
    border-color: #1788fb;
    color: #1788fb;
}

.goods-edit-form .card-package-type.active::after {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0;
    height: 0;
    border-right: 18px solid #1788fb;
    border-top: 18px solid transparent;
    content: "";
}

.goods-edit-form .card-package-content {
    width: min(980px, calc(100% - 138px));
}

.goods-edit-form .card-package-search {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.goods-edit-form .card-package-table {
    margin: 0 0 8px;
}

.goods-edit-form .card-package-table th,
.goods-edit-form .card-package-table td {
    padding: 8px 10px;
    vertical-align: middle;
}

.goods-edit-form .card-package-product {
    display: flex;
    align-items: center;
    gap: 10px;
}

.goods-edit-form .card-package-product .table-thumb {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #eee;
    color: #aaa;
    font-size: 12px;
}

.goods-edit-form .card-package-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goods-edit-form .card-package-table small {
    display: block;
    margin-top: 4px;
    color: #999;
}

.upload-img-list {
    align-items: flex-start;
}

.upload-img-item,
.upload-img-square,
.upload-img-add {
    width: 82px;
    height: 82px;
    min-height: 82px;
    border-radius: 0;
}

.upload-img-add {
    font-size: 22px;
}

.video-thumb,
.up-video {
    width: 250px;
    height: 120px;
    min-height: 120px;
    border-radius: 0;
}

.special-length {
    width: min(960px, calc(100vw - 520px));
    max-width: 960px;
}

.goods-edit-form .edui-default,
.goods-edit-form .edui-editor,
.goods-edit-form .edui-editor * {
    box-sizing: content-box;
}

.goods-edit-form .edui-editor {
    width: 100% !important;
    max-width: 100%;
    background: #fff;
}

.goods-edit-form .edui-editor input,
.goods-edit-form .edui-editor select,
.goods-edit-form .edui-editor textarea,
.goods-edit-form .edui-editor button {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
}

.goods-edit-form .edui-editor select {
    appearance: auto;
}

.goods-edit-form .edui-editor iframe {
    background: #fff;
}

.goods-fixed-btn {
    position: fixed;
    left: 256px;
    right: 0;
    bottom: 0;
    height: 64px;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e6e8ef;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 32;
}

.old-page-footer {
    height: 180px;
    padding-top: 68px;
    background: #eff0f4;
    color: #4d5563;
    text-align: center;
    font-size: 12px;
}

.goods-fixed-btn .primary,
.goods-fixed-btn .layui-btn,
.goods-fixed-btn .link-button {
    min-width: 60px;
    height: 34px;
    min-height: 34px;
    line-height: 32px;
    border-radius: 2px;
    padding: 0 18px;
}

.goods-fixed-btn .form-message {
    position: absolute;
    left: 24px;
    color: #b42318;
}

.goods-import-page {
    padding: 15px;
}

.goods-import-page .common-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 25px 100px;
    margin: 0 0 15px;
    background: #fff;
}

.goods-import-page .tips-wrap {
    min-width: 130px;
    text-align: center;
}

.goods-import-page .tips-wrap > span {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto 15px;
    color: #1167e8;
    border: 1px solid #1167e8;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
}

.goods-import-page .tips-wrap p {
    margin: 0 0 5px;
}

.goods-import-page .interval-wrap {
    position: relative;
    width: 260px;
    height: 45px;
    border-bottom: 1px solid #e6e6e6;
}

.goods-import-page .interval-wrap > span {
    position: absolute;
    right: 0;
    bottom: -5px;
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid #e6e6e6;
    border-bottom: 0;
    border-left: 0;
    transform: rotate(45deg);
}

.import-card-wrap {
    margin: 0;
}

.import-card-header {
    display: flex;
    align-items: center;
    gap: 18px;
}

.import-card-header .card-title {
    margin-right: auto;
    font-weight: 700;
}

.goods-import-form .layui-form-item {
    margin-top: 22px;
}

.batch-delivery-page {
    padding: 15px;
}

.batch-delivery-page .common-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 25px 90px;
    margin: 0 0 15px;
    background: #fff;
}

.batch-delivery-page .tips-wrap {
    min-width: 130px;
    max-width: 150px;
    text-align: center;
}

.batch-delivery-page .tips-wrap > span {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto 15px;
    color: #1167e8;
    border: 1px solid #1167e8;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
}

.batch-delivery-page .tips-wrap p {
    margin: 0;
    color: #333;
    line-height: 1.55;
}

.batch-delivery-page .interval-wrap {
    position: relative;
    flex: 1 1 160px;
    max-width: 250px;
    height: 45px;
    border-bottom: 1px solid #e6e6e6;
}

.batch-delivery-page .interval-wrap > span {
    position: absolute;
    right: 0;
    bottom: -5px;
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid #e6e6e6;
    border-bottom: 0;
    border-left: 0;
    transform: rotate(45deg);
}

.order-import-panel .single-filter-box {
    justify-content: flex-start;
    padding: var(--old-page-pad);
}

.order-import-panel .layui-tab-content,
.order-import-detail-panel .layui-tab-content {
    padding: 15px;
}

.order-import-detail-summary {
    margin: 15px 15px 0;
    background: #fff;
    border: 1px solid #e6e8ef;
}

.order-import-detail-summary ul {
    margin: 0;
    padding: 12px 18px;
    list-style: none;
    line-height: 28px;
}

.order-import-detail-panel {
    margin: 15px;
}

.member-import-page .single-filter-box {
    justify-content: flex-start;
    line-height: 34px;
}

.member-import-toolbar .tools {
    gap: 10px;
}

.member-import-toolbar .layui-btn {
    min-height: 34px;
    height: 34px;
    padding: 0 15px;
    border: 1px solid #105cfb;
    border-radius: 2px;
    background: #105cfb;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.member-import-toolbar .layui-btn-primary {
    border-color: #d2d2d2;
    background: #fff;
    color: #333;
}

.member-import-toolbar .layui-btn:hover,
.member-import-toolbar .layui-btn:focus {
    border-color: #105cfb;
    color: #fff;
}

.member-import-toolbar .layui-btn-primary:hover,
.member-import-toolbar .layui-btn-primary:focus {
    border-color: #105cfb;
    background: #fff;
    color: #105cfb;
}

.member-import-toolbar .import-message {
    margin: 0 0 0 6px;
    color: #697386;
}

.member-import-toolbar .import-message.error {
    color: #b42318;
}

.member-import-table .layui-tab-content,
.member-import-detail-table .layui-tab-content {
    padding: 0;
}

.member-import-table .old-table,
.member-import-detail-table .old-table {
    margin: 0;
    border-top: 0;
}

.member-import-detail-card {
    margin-bottom: 15px;
    background: #fff;
    border: 1px solid #e6e8ef;
    padding: 14px 18px;
}

.member-import-detail-card .detail-line {
    margin: 0 0 8px;
    line-height: 24px;
}

.member-import-detail-card .detail-line:last-child {
    margin-bottom: 0;
}

.member-import-detail-card .goods-name {
    display: inline-block;
    margin-right: 16px;
    font-weight: 600;
}

.goods-import-form .layui-form-label {
    width: 150px;
}

.goods-import-form .layui-input-block {
    margin-left: 170px;
}

.import-type-list ul {
    margin: 0 0 10px;
    padding: 0;
}

.import-type-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 28px;
}

.import-upload-box {
    width: 160px;
    height: 160px;
    min-height: 160px;
    border-radius: 0;
    background: #fff;
}

.import-upload-box .upload {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7b8494;
}

.import-upload-box i {
    font-style: normal;
    font-size: 30px;
    color: #1167e8;
}

.import-upload-box.loading {
    opacity: 0.7;
}

.import-message {
    margin-left: 170px;
    color: #b42318;
}

.data_load {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.data_load[hidden] {
    display: none;
}

.data_load-img {
    width: 60px;
    height: 60px;
}

.data_load-img span {
    display: block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: #15a05d;
    color: #fff;
    text-align: center;
    font-size: 34px;
}

.data_load-title {
    margin-top: 15px;
    color: #333;
    font-size: 18px;
}

.data_load-content,
.data_load-footer {
    margin-top: 18px;
    color: #333;
    font-size: 14px;
}

.import-record-toolbar {
    justify-content: flex-end;
}

.import-record-screen .layui-inline {
    align-items: center;
}

.import-record-screen .layui-input-inline {
    width: 200px;
}

.import-record-screen .old-date-input {
    position: relative;
}

.import-record-screen .calendar {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa8bd;
    pointer-events: none;
}

.import-record-table {
    margin-top: 15px;
}

.goods-grab-page .single-filter-box {
    min-height: var(--old-toolbar-min-height);
}

.grab_select {
    margin-bottom: 18px;
    padding: 30px 0;
    border: 0;
    background: #f2f3f5;
}

.goods-grab-form .layui-form-item,
.goods-grab-config-form .layui-form-item {
    margin-bottom: 18px;
}

.goods-grab-form .layui-input-inline {
    width: auto;
    min-width: 720px;
}

.goods-grab-form .layui-form-label,
.goods-grab-config-form .layui-form-label {
    width: 140px;
}

.goods-grab-form .len-long {
    width: 600px;
    min-height: 110px;
}

.goods-grab-form .word-aux {
    margin-left: 150px;
    margin-top: 8px;
}

.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 18px;
    min-height: 34px;
}

.goods-grab-form .category-wrap {
    width: 220px;
    min-width: 220px;
}

.goods-grab-form .category-wrap select {
    height: 34px;
    border-radius: 2px;
}

.goods-grab-form .form-row.mid {
    padding-left: 150px;
}

.grab-message {
    margin-left: 150px;
    color: #b42318;
}

.grab-progress {
    width: 400px;
    min-height: 128px;
    margin: 15px 0 0 150px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.grab-progress .process {
    width: 80%;
    height: 10px;
    margin: 20px auto 10px;
    position: relative;
    border-radius: 20px;
    background: #e2e2e2;
}

.grab-progress .present {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 10px;
    border-radius: 20px;
    background: #5fb878;
}

.grab-progress .present_num {
    position: absolute;
    top: -22px;
    right: -18px;
    font-size: 12px;
}

.grab-progress .load_head {
    margin-top: 24px;
    font-size: 14px;
}

.grab-progress .load_text {
    margin-top: 8px;
    font-size: 12px;
}

.grab-record-card {
    padding-bottom: 10px;
}

.goods-grab-table th,
.goods-grab-table td,
.goods-grab-detail-table th,
.goods-grab-detail-table td {
    white-space: nowrap;
}

.goods-grab-table .table-btn .layui-btn {
    margin-left: 6px;
}

.goods-grab-detail-page #detail_list,
.goods-grab-detail-table {
    margin-top: 15px;
}

.copy_link {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
}

.goods-grab-config-page .layui-form {
    padding-top: 10px;
}

.goods-grab-config-form .layui-input-block {
    margin-left: 150px;
}

.goods-grab-config-form .len-long {
    width: 420px;
}

.goods-grab-config-form .word-aux {
    margin-left: 150px;
}

.stock-page .screen {
    margin: 0 0 16px;
}

.stock-page .classification {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-bottom: 12px;
}

.stock-page .layui-input-inline.short {
    width: 120px;
}

.stock-tab .layui-tab-title a {
    color: inherit;
}

.stock-manage-table .table-title,
.stock-edit-table .table-title,
.stock-sku-modal .table-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.stock-manage-table .title-pic,
.stock-edit-table .title-pic,
.stock-sku-modal .title-pic {
    width: 48px;
    height: 48px;
    border: 1px solid #e5e9f2;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.stock-manage-table .title-pic img,
.stock-edit-table .title-pic img,
.stock-sku-modal .title-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stock-manage-table .title-pic span,
.stock-edit-table .title-pic span,
.stock-sku-modal .title-pic span {
    width: 18px;
    height: 18px;
    border: 1px solid #c8cdd8;
}

.stock-manage-table .title-content,
.stock-edit-table .title-content,
.stock-sku-modal .title-content {
    min-width: 0;
}

.stock-manage-table .title-content p,
.stock-edit-table .title-content p,
.stock-sku-modal .title-content p {
    max-width: 260px;
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-manage-table .title-content p + p,
.stock-edit-table .title-content p + p,
.stock-sku-modal .title-content p + p {
    color: #8a93a6;
}

.stock-document-table .table-btn {
    justify-content: flex-end;
}

.stock-document-form .layui-form-item,
.stock-config-form .layui-form-item {
    margin-bottom: 18px;
}

.stock-document-form .layui-input-block {
    max-width: 760px;
}

.stock-document-goods {
    max-width: 1000px;
}

.stock-edit-table input {
    width: 100%;
    height: 32px;
    border: 1px solid #d7deeb;
    padding: 0 8px;
}

.stock-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 12px 32px;
    color: #333;
}

.stock-detail-grid span {
    color: #6b7280;
}

.stock-detail-grid .span-2 {
    grid-column: 1 / -1;
}

.stock-sku-modal[hidden] {
    display: none;
}

.stock-sku-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.stock-sku-dialog {
    width: min(920px, 100%);
    max-height: 78vh;
    background: #fff;
    border: 1px solid #d7deeb;
    box-shadow: 0 14px 40px rgba(18, 28, 45, 0.22);
    display: flex;
    flex-direction: column;
}

.stock-sku-dialog .modal-head {
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid #edf0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stock-sku-dialog .modal-head button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}

.stock-sku-dialog .modal-tools {
    padding: 12px 16px;
}

.stock-sku-dialog .modal-tools input {
    width: 280px;
    height: 34px;
    border: 1px solid #d7deeb;
    padding: 0 10px;
}

.stock-sku-dialog .modal-body {
    padding: 0 16px 16px;
    overflow: auto;
}

.stock-config-form {
    padding: 24px 32px;
}

.stock-config-form .radio-inline {
    margin-right: 28px;
}

.stock-allot-form .store-view {
    margin-bottom: 16px;
}

.stock-allot-form .remark {
    width: 614px;
}

.allot-edit-table tfoot td {
    background: #fafafa;
    color: #333;
}

.stock-total-line {
    display: flex;
    justify-content: flex-end;
    padding: 14px 13px 0 0;
}

.stock-total-line span {
    color: #f5222d;
}

.stock-page .table-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-page .table-title .title-pic {
    width: 50px;
    height: 50px;
    border: 1px solid #e5e9f2;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.stock-check-form .tips {
    padding: 8px 0 16px;
    color: #1e6be6;
}

.stock-title-body {
    position: relative;
}

.stock-title-body span {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border: 1px solid #d8dee9;
    color: #6b7280;
    background: #fff;
    cursor: pointer;
}

.stock-title-body input {
    padding-right: 32px;
    cursor: pointer;
}

.check-edit-table .stock-num {
    width: 120px;
    height: 28px;
}

.goods-up {
    color: #15a024;
}

.goods-down {
    color: #d93026;
}

.check-state-tabs {
    padding: 0 0 10px;
}

.check-state-tabs .tab-status {
    display: flex;
    border-bottom: 1px solid #e5e9f2;
}

.check-state-tabs .tab-status li {
    padding: 8px 22px;
    cursor: pointer;
}

.check-state-tabs .tab-status li.active {
    color: #1e6be6;
    border-bottom: 2px solid #1e6be6;
}

.stock-transform-form .tips {
    padding: 0 0 14px 100px;
    color: #1e6be6;
}

.transform-goods-list {
    display: grid;
    gap: 8px;
}

.transform-goods-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.transform-goods-item .title-pic,
.transform-edit-table .title-pic {
    width: 42px;
    height: 42px;
    border: 1px solid #e5e9f2;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.transform-goods-item .title-pic img,
.transform-edit-table .title-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.transform-goods-item .title-pic span,
.transform-edit-table .title-pic span {
    width: 16px;
    height: 16px;
    border: 1px solid #c8cdd8;
}

.transform-goods-info {
    min-width: 0;
}

.transform-goods-info p {
    margin: 0 0 3px;
    color: #333;
}

.transform-goods-info p:first-child {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transform-goods-info p:not(:first-child) {
    color: #7b8494;
    font-size: 12px;
}

.transform-edit-table .transform-num {
    width: 120px;
    height: 28px;
}

.stock-page .table-title .title-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stock-page .table-title .title-pic span {
    width: 18px;
    height: 18px;
    border: 1px solid #c8cdd8;
}

@media (max-width: 860px) {
    .order-detail-grid {
        flex-direction: column;
    }

    .order-detail-column {
        width: 100%;
        padding: 0;
        border-left: 0;
    }

    .order-state-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-delivery-modal,
    .order-logistics-modal,
    .order-address-modal,
    .order-remark-modal {
        width: calc(100vw - 28px);
    }

    .order-delivery-form textarea,
    .order-remark-form textarea {
        width: 100%;
    }

    .package-goods-list {
        padding-left: 18px;
    }

    .package-trace-panel {
        margin-left: 18px;
    }

    .single-filter-box,
    .layui-inline,
    .form-row,
    .fixed-btn {
        align-items: stretch;
        flex-direction: column;
    }

    .form-row,
    .fixed-btn {
        padding-left: 0;
    }

    .store-old-form .layui-form-item,
    .address-line {
        align-items: stretch;
        flex-direction: column;
    }

    .store-old-form .layui-form-label,
    .store-old-form .compact-label,
    .layui-input-block,
    .layui-input-inline {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    .store-map-shell {
        height: 360px;
    }

    .old-form-grid,
    .compact-form,
    .inline-edit .form-grid {
        grid-template-columns: 1fr;
    }

    .old-form-grid .span-2,
    .old-form-grid .sku-editor {
        grid-column: span 1;
    }

    .tree-head {
        display: none;
    }

    .tree-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .old-admin-shell .topbar,
    .old-logo,
    .header-right,
    .first-nav,
    .second-nav {
        position: static;
        width: auto;
    }

    .old-logo {
        height: 58px;
    }

    .header-right {
        height: auto;
        padding: 10px 14px;
        flex-direction: column;
        align-items: flex-start;
    }

    .crumbs {
        height: auto;
        flex-wrap: wrap;
    }

    .crumbs strong,
    .crumbs span {
        width: auto;
        height: auto;
        line-height: 1.5;
    }

    .first-nav nav,
    .second-nav nav {
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .first-nav a {
        width: auto;
    }

    .sidebar {
        position: static;
        width: auto;
        min-height: auto;
    }

    .shell {
        margin-left: 0;
        padding: 18px;
    }

    .metric-grid,
    .form-grid,
    .split,
    .permission-list {
        grid-template-columns: 1fr;
    }

    .span-2 { grid-column: span 1; }
    .page-head { align-items: flex-start; flex-direction: column; }
}

.receipt-printer-tabs {
    height: 54px;
    padding: 0 16px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #e6e8ef;
    display: flex;
    align-items: flex-end;
    gap: 34px;
}

.receipt-printer-tabs a {
    height: 54px;
    border-bottom: 2px solid transparent;
    color: #333;
    display: inline-flex;
    align-items: center;
}

.receipt-printer-tabs a.active {
    border-bottom-color: #105cfb;
    color: #105cfb;
}

.receipt-printer-toolbar {
    margin-bottom: 0;
}

.receipt-printer-list-card,
.receipt-template-list-card {
    padding: 0;
}

.receipt-table-btn {
    gap: 8px;
}

.receipt-tips {
    margin-bottom: 12px;
}

.receipt-tips .layui-colla-title {
    min-height: 38px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #e6e8ef;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.receipt-tips .layui-colla-content {
    margin: 0;
    padding: 10px 24px;
    border: 1px solid #e6e8ef;
    border-top: 0;
    background: #fff;
    color: #8a94a6;
}

.receipt-old-form .form-row {
    padding-left: 108px;
}

.receipt-old-form .len-mid {
    max-width: 360px;
}

.receipt-static-text {
    min-height: 34px;
    display: flex;
    align-items: center;
    color: #333;
}

.receipt-template-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.receipt-template-box > .form-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.receipt-template-box .preview {
    width: 310px;
    margin: 0 20px 0 0;
    flex: 0 0 310px;
}

.receipt-template-box .preview .layui-card-body {
    margin: 20px;
    padding: 0 10px;
    border: 1px solid #ededed;
    border-radius: 5px;
}

.receipt-template-box .preview .layui-card-body div {
    font-size: 12px;
    color: #333;
}

.receipt-template-box .preview .layui-card-body div ~ div {
    border-top: 1px dashed #ededed;
}

.receipt-template-box .preview .receipt-name {
    text-align: center;
    line-height: 40px;
}

.receipt-template-box .preview .shopping-name {
    line-height: 40px;
    font-size: 16px;
    text-align: center;
}

.receipt-template-box .preview .order-info,
.receipt-template-box .preview .goods-info,
.receipt-template-box .preview .price-info,
.receipt-template-box .preview .buyer-info,
.receipt-template-box .preview .shopping-info {
    padding: 8px 0;
}

.receipt-template-box .preview .order-info span {
    display: block;
    line-height: 2.5;
}

.receipt-template-box .preview .goods-info table {
    width: 100%;
}

.receipt-template-box .preview .goods-info tr {
    line-height: 2.5;
}

.receipt-template-box .preview .goods-info th {
    font-weight: 400;
}

.receipt-template-box .preview .goods_code_show td {
    line-height: 1;
    padding-bottom: 5px;
}

.receipt-template-box .preview .price-info p {
    margin: 0;
    display: flex;
    line-height: 2.5;
    justify-content: space-between;
}

.receipt-template-box .preview .buyer-info span,
.receipt-template-box .preview .shopping-info span {
    display: block;
    line-height: 2;
}

.receipt-template-box .preview .buyer-message,
.receipt-template-box .preview .merchant-message,
.receipt-template-box .preview .form_show {
    padding: 10px 0;
    line-height: 1.5;
}

.receipt-template-box .preview .button-info {
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.receipt-template-box .preview .shopping-code {
    text-align: center;
}

.receipt-qrcode {
    width: 100px;
    height: 100px;
    margin: 10px auto;
    border: 1px solid #d8dde8;
    background: repeating-linear-gradient(45deg, #f4f6fa, #f4f6fa 5px, #fff 5px, #fff 10px);
    color: #8a94a6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receipt-template-box .commodity-type-box {
    gap: 15px;
}

.receipt-template-box .commodity-type-item {
    width: 108px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 0;
    text-align: center;
}

.receipt-template-box .commodity-type-item span:first-child {
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 1100px) {
    .receipt-template-box {
        flex-direction: column;
    }

    .receipt-template-box .preview {
        width: 310px;
        flex-basis: auto;
    }
}

.refund-screen {
    margin-bottom: 12px;
}

.refund-filter-form .layui-form-label {
    width: 92px;
}

.refund-list-panel .layui-tab-title.refund-status-tabs {
    overflow: visible;
}

.refund-status-tabs a {
    display: block;
    white-space: nowrap;
}

.refund-list-table .separation-row td {
    height: 12px;
    padding: 0;
    border: 0;
    background: #eef1f7;
}

.refund-head-row td {
    padding: 8px 12px;
    color: #5f6f8a;
    background: #f8f9fb;
}

.refund-head-row .order-item-header {
    margin-right: 50px;
}

.refund-product-cell .order-product-info strong {
    max-width: 360px;
}

.refund-detail .order-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.refund-detail .detail-line span,
.refund-goods .detail-line span {
    width: 86px;
}

.refund-image-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 8px;
}

.refund-image-row span {
    width: 86px;
    color: #5f6f8a;
    flex: 0 0 86px;
}

.refund-image-row img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border: 1px dashed #ccd3df;
    background: #fff;
}

.refund-state-line {
    align-items: flex-start;
    display: block;
}

.refund-detail-actions {
    margin: 12px 0;
}

.refund-reminder {
    margin-top: 14px;
    color: #8a94a6;
}

.refund-reminder .orderStatus-content-title {
    display: inline-block;
    width: 70px;
    color: #323233;
    vertical-align: top;
}

.refund-reminder .orderStatus-content-text {
    display: inline-block;
}

.refund-logs .old-timeline {
    padding: 0 8px;
}

.refund-logs .old-timeline-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 170px;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f5;
}

.refund-logs .old-timeline-item:last-child {
    border-bottom: 0;
}

.refund-log-way {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 12px;
    background: #edf3ff;
    color: #1769ff;
    font-size: 12px;
}

.refund-log-way-buyer {
    background: #fff4e8;
    color: #f08300;
}

.refund-log-way-seller {
    background: #edf3ff;
    color: #1769ff;
}

.refund-log-way-system,
.refund-log-way-platform {
    background: #f2f3f5;
    color: #737b87;
}

.refund-logs .old-timeline-item strong,
.refund-logs .old-timeline-item em,
.refund-logs .old-timeline-item time {
    display: block;
    font-size: 13px;
    line-height: 20px;
}

.refund-logs .old-timeline-item strong {
    color: #323233;
    font-weight: 400;
}

.refund-logs .old-timeline-item em,
.refund-logs .old-timeline-item time {
    margin-top: 3px;
    color: #8a94a6;
    font-style: normal;
    white-space: nowrap;
}

.refund-logs .old-timeline-item time {
    margin-top: 0;
    text-align: right;
}

.refund-action-modal {
    width: 700px;
}

.refund-action-modal .modal-note {
    margin: 0 0 14px;
    color: #666;
}

.refund-view-list {
    margin-top: 0;
    font-size: 14px;
    line-height: 20px;
    color: #323233;
}

.refund-view-item {
    margin-bottom: 10px;
}

.refund-view-item-label {
    width: 98px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

.refund-action-modal [data-refund-form="agree"] .refund-view-item-label,
.refund-action-modal [data-refund-form="refuse"] .refund-view-item-label,
.refund-action-modal [data-refund-form="receive"] .refund-view-item-label {
    width: 75px;
}

.refund-view-item-label.align-top {
    vertical-align: top;
}

.refund-view-item-content {
    display: inline-block;
}

.refund-money {
    color: #e1251b;
}

.active-refund-link {
    border: 1px solid currentColor;
    padding: 2px 4px;
}

.active-refund-modal {
    width: 700px;
}

.active-refund-modal .word-aux {
    margin: 6px 0 0 102px;
    color: #999;
    font-size: 12px;
    line-height: 1.8;
}

@media (max-width: 1200px) {
    .refund-detail .order-detail-grid {
        grid-template-columns: 1fr;
    }
}

.verify-stat-grid {
    display: flex;
    gap: 0;
    background: #fff;
}

.verify-stat-grid > div {
    flex: 1;
    padding: 16px 18px;
    background: #fff;
    border-right: 1px solid #eef1f7;
}

.verify-stat-grid > div:last-child {
    border-right: 0;
}

.verify-stat-grid p {
    margin: 0;
    color: #5f6f8a;
    line-height: 20px;
}

.verify-stat-grid p a {
    margin-left: 12px;
}

.verify-stat-grid strong {
    display: block;
    margin: 8px 0 4px;
    font-size: 26px;
    font-weight: 500;
}

.verify-stat-grid span {
    color: #909399;
    font-size: 13px;
}

.verify-screen {
    margin-bottom: 15px;
}

.verify-screen .layui-colla-content {
    padding: 15px var(--old-page-pad);
}

.verify-screen .layui-input-inline.old-date-input {
    position: relative;
}

.verify-screen .calendar {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa8bd;
    pointer-events: none;
}

.verify-buyer-info {
    line-height: 20px;
}

.verify-code-title {
    min-height: 40px;
}

.verify-table-toolbar {
    padding: 0 0 12px;
}

.verify-table-toolbar.bottom {
    padding: 12px 0 0;
}

.verify-table-title {
    display: flex;
    align-items: center;
    min-width: 0;
}

.verify-contraction {
    display: inline-block;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #333;
    text-align: center;
    line-height: 14px;
    cursor: pointer;
    user-select: none;
}

.verify-contraction:disabled {
    color: transparent;
    cursor: default;
}

.verify-title-pic {
    display: flex;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    margin-right: 8px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e2e2e2;
    background: #fff;
}

.verify-title-pic img {
    max-width: 100%;
    max-height: 100%;
}

.verify-code-title strong,
.verify-code-title em {
    display: block;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verify-type-badge {
    display: inline-block;
    margin-bottom: 4px;
    padding: 0 6px;
    line-height: 18px;
    border: 1px solid #105cfb;
    color: #105cfb;
    border-radius: 3px;
    font-size: 12px;
}

.verify-item-list {
    overflow: hidden;
    padding: 0 45px;
}

.verify-item-list li {
    float: left;
    display: flex;
    width: 294px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px;
    align-items: center;
    border: 1px solid #efefef;
}

.verify-item-list .img-wrap {
    display: flex;
    width: 80px;
    height: 80px;
    margin-right: 8px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e2e2;
}

.verify-item-list .img-wrap img {
    max-width: 100%;
    max-height: 100%;
}

.verify-item-list .info-wrap {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.verify-item-list .name-wrap {
    flex: 1;
}

.verify-item-list .info-wrap span {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 1;
    font-size: 12px;
}

.verify-item-list .info-wrap span.sku-name {
    margin-top: 0;
    margin-bottom: 5px;
    color: #333;
    line-height: 1.3;
    font-size: 14px;
    -webkit-line-clamp: 2;
}

.verify-card-search {
    margin-bottom: 16px;
}

.verify-card-search .layui-input-inline {
    position: relative;
    width: 420px;
}

.verify-card-search .code-searsh {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    padding: 0;
    height: 38px;
    line-height: 36px;
    border-color: #e5e5e5;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
}

.verify-block {
    background: #fff;
}

.search-content-block {
    padding: 20px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}

.search-content {
    display: flex;
}

.verify-step-text {
    flex: 1;
    margin-left: 10px;
}

.verify-step-text-title {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
}

.verify-step-text-content {
    color: #999;
    font-size: 12px;
}

.verify-no-block {
    padding: 20px;
}

.verify-info {
    margin-bottom: 16px;
    color: #323233;
    font-size: 14px;
    line-height: 30px;
}

.verify-info-inner {
    padding: 24px 16px 0;
    overflow-y: auto;
}

.verify-info-item {
    display: flex;
    padding-bottom: 16px;
}

.verify-info-img {
    display: flex;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    color: #8a94a6;
}

.verify-info-img img {
    max-width: 100%;
    max-height: 100%;
}

.verify-info-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.verify-info-desc {
    position: relative;
    margin: 0 16px 24px;
    padding-top: 16px;
    border-top: 1px solid #dcdee0;
    font-size: 14px;
    line-height: 30px;
}

.verify-info-desc-item {
    margin: 8px 0;
    color: #969799;
    line-height: 20px;
}

.verify-button {
    position: absolute;
    right: 0;
    bottom: 0;
}

.verify-user-panel .old-table {
    margin-top: 0;
}

.verify-verifier-form .check-member {
    position: relative;
}

.verify-verifier-form .check-member .layui-btn {
    position: absolute;
    top: 1px;
    left: 207px;
    height: 32px;
    padding: 0 10px;
    border-color: #e5e5e5;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

.verify-verifier-form .search-result {
    display: flex;
    position: relative;
    align-items: center;
    width: 360px;
    margin-top: 10px;
    padding: 15px 30px 15px 15px;
    border: 1px solid #e5e5e5;
    background: #fff;
}

.verify-verifier-form .search-res-img {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    text-align: center;
    line-height: 50px;
}

.verify-verifier-form .search-res-img img {
    max-width: 100%;
    max-height: 100%;
}

.verify-verifier-form .search-res-intro p {
    margin: 0;
    line-height: 24px;
}

.verify-verifier-form .search-res-close {
    position: absolute;
    top: 5px;
    right: 5px;
    border: 0;
    background: transparent;
    color: #999;
    cursor: pointer;
}

.verifier-confirm-modal {
    width: 380px;
}

.verifier-confirm-modal .old-modal-body {
    padding: 22px 26px;
}

.verifier-confirm-text {
    margin: 0 0 16px;
    text-align: center;
}

@media (max-width: 1200px) {
    .verify-stat-grid {
        flex-wrap: wrap;
    }

    .verify-stat-grid > div {
        flex: 0 0 50%;
    }
}

.evaluate-panel {
    padding: 0;
}

.evaluate-panel .layui-tab-content {
    padding: 0;
}

.evaluate-status-tabs {
    border-bottom: 1px solid #edf0f5;
}

.evaluate-status-tabs a {
    display: block;
    white-space: nowrap;
}

.evaluate-batch-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px 10px;
    border: 0;
}

.evaluate-batch-tools .layui-btn {
    min-height: 32px;
    padding: 5px 12px;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 18px;
}

.evaluate-table {
    margin: 0;
}

.evaluate-table th,
.evaluate-table td {
    padding: 13px 15px;
    vertical-align: top;
}

.evaluate-goods-cell {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.evaluate-goods-cell .title-pic {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border: 1px solid #e2e7f0;
    background: #f5f7fb;
    color: #9aa5b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.evaluate-goods-cell .title-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.evaluate-goods-cell .title-content {
    min-width: 0;
}

.evaluate-goods-cell .sku-name {
    margin: 0 0 6px;
    max-width: 210px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.evaluate-goods-cell p {
    margin: 0 0 4px;
}

.evaluate-level {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
}

.evaluate-level img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.evaluate-level span {
    display: inline-block;
    line-height: 24px;
    color: #323233;
}

.evaluate-content p,
.evaluate-reply p,
.evaluate-again p {
    margin: 0;
    line-height: 22px;
    word-break: break-all;
}

.evaluate-img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 0 2px;
}

.evaluate-img-thumb {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e7f0;
    background: #f8fafc;
}

.evaluate-img-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.evaluate-reply,
.evaluate-again,
.evaluate-again-status {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
}

.evaluate-reply {
    padding: 8px;
    background: #f7f9fc;
}

.evaluate-reply span,
.evaluate-again span {
    color: #105cfb;
}

.evaluate-table hr {
    border: 0;
    border-top: 1px solid #eef1f7;
    margin: 12px 0;
}

.evaluate-table .table-btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.evaluate-table .table-btn .layui-btn {
    min-height: 28px;
    padding: 4px 8px;
}

.evaluate-reply-modal {
    width: 420px;
}

.evaluate-reply-modal .layui-textarea {
    width: 350px;
    max-width: 100%;
    min-height: 150px;
    margin: 10px auto 0;
    resize: vertical;
}

.evaluate-reply-modal .form-row,
.evaluate-reply-modal .form-message {
    width: 350px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.evaluate-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 15px;
}

.evaluate-page-size-form {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.evaluate-page-size-form select {
    height: 28px;
    min-width: 48px;
    border: 1px solid #d7deeb;
    background: #fff;
    color: #323233;
}

.delivery-operation {
    min-height: 45px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e8ef;
    background: #fff;
}

.delivery-operation.bottom {
    justify-content: space-between;
    border-top: 1px solid #e5e8ef;
    border-bottom: 0;
}

.delivery-operation .order-operation-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.delivery-operation .btn-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delivery-order-table .order-head-row td {
    background: #f7f8fb;
    color: #4f5e78;
}

.delivery-order-table .order-head-row span {
    margin-right: 28px;
}

.order-batch-delivery-modal {
    width: 760px;
}

.order-batch-delivery-modal form {
    padding: 18px 22px 20px;
}

.batch-delivery-table {
    margin: 10px 0 14px;
}

.batch-delivery-table th,
.batch-delivery-table td {
    padding: 8px 10px;
}

/* 门店概况旧版取消 body-content 的额外内外边距，仅保留 common-wrap 自身间距。 */
.store-dashboard-page .shell {
    padding: 55px 0 15px;
}

.store-dashboard-summary .common-wrap,
.store-dashboard-rankings .common-wrap {
    background: #fff;
}

.panel-content.card-common {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
}

.store-dashboard-summary .sub-title {
    color: #999;
}

.store-dashboard-summary .summary-wrap {
    display: flex;
    flex-wrap: wrap;
}

.store-dashboard-summary .summary-item {
    width: 25%;
    padding: 0 15px 10px;
    box-sizing: border-box;
}

.store-dashboard-summary .summary-item .title {
    color: #909399;
    font-size: 14px;
    margin-top: 5px;
}

.finance-summary-body .content .title {
    color: #697386;
    font-size: 13px;
    margin-bottom: 10px;
}

.store-dashboard-summary .summary-item .value {
    color: #303133;
    font-size: 26px;
    margin-top: 10px;
}

.finance-summary-body .content .money {
    color: #172033;
    font-size: 24px;
    font-weight: 600;
}

.store-terminal-profile {
    margin-top: 15px;
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
}

.store-terminal-profile .body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 30px;
    padding: 16px;
    color: #303133;
    font-size: 14px;
}

.store-terminal-profile span {
    color: #697386;
}

.store-terminal-profile strong {
    font-weight: 400;
}

.store-terminal-orders .body {
    min-height: 260px;
    padding: 0 15px 15px;
}

.store-dashboard-rankings {
    margin-top: 0;
    display: flex;
}

.store-dashboard-rankings .common-wrap {
    flex: 1;
    min-width: calc((100% - 45px) / 2);
    max-width: calc((100% - 45px) / 2);
    box-sizing: border-box;
}

.store-dashboard-rankings .common-wrap:first-child {
    margin-right: 0;
}

.store-dashboard-rankings .sort-type {
    display: flex;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
}

.store-dashboard-rankings .head .title {
    flex: 1;
}

.store-dashboard-rankings .type-item {
    width: 80px;
    border: 0;
    background: #f5f5f5;
    color: #333;
    line-height: 28px;
    font-size: 12px;
    cursor: pointer;
    transition: all .3s;
}

.store-dashboard-rankings .type-item:hover {
    background: #eee;
}

.store-dashboard-rankings .type-item:last-child {
    border-right: 0;
}

.store-dashboard-rankings .type-item.active {
    background: #1267f5;
    color: #fff;
}

.store-dashboard-rankings .body {
    width: 100%;
    min-height: 0;
    padding: 0;
}

.ranking-empty {
    padding: 100px 0;
    text-align: center;
    color: #8a94a6;
}

.ranking-table {
    margin-top: 15px;
}

.ranking-table th,
.ranking-table td {
    padding: 12px 10px;
}

.ranking-table .goods-name {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.align-right {
    text-align: right !important;
}

.admin-dashboard-summary .summary-wrap,
.stat-summary .summary-wrap {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.admin-dashboard-summary .summary-item,
.stat-summary .summary-item {
    color: inherit;
    text-decoration: none;
}

.admin-dashboard-summary .summary-item:hover,
.stat-summary .summary-item:hover {
    background: #f8fbff;
}

.admin-summary-wrap .summary-item:nth-child(4n),
.stat-summary-wrap .summary-item:nth-child(4n) {
    border-right: 0;
}

.admin-shortcuts .body {
    min-height: 260px;
    padding: 18px;
}

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

.admin-shortcut-grid a {
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #172033;
    border: 1px solid #e1e5ee;
    background: #fff;
    text-decoration: none;
}

.admin-shortcut-grid a:hover {
    color: #105cfb;
    border-color: #105cfb;
}

.stat-page .common-wrap {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
}

.stat-page .common-wrap + .common-wrap,
.stat-page .store-dashboard-summary,
.stat-table-grid,
.stat-source-wrap {
    margin-top: 15px;
}

.stat-filter-wrap .head,
.stat-table-wrap .head,
.stat-source-wrap .head {
    min-height: 46px;
    padding: 0 16px;
    border-bottom: 1px solid #eef0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-filter-wrap .head .title,
.stat-table-wrap .head .title,
.stat-source-wrap .head .title {
    font-size: 15px;
    font-weight: 600;
    color: #172033;
}

.stat-filter-wrap .sub-title {
    color: #8a94a6;
    font-size: 12px;
}

.stat-filter-body {
    min-height: 62px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-sizing: border-box;
}

.stat-date-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-date-actions .date-btn {
    display: inline-block;
    height: 32px;
    padding: 0 18px;
    line-height: 32px;
    color: #303133;
    background: #fff;
    border: 1px solid #d8dde8;
    text-decoration: none;
}

.stat-date-actions .date-btn.active,
.stat-date-actions .date-btn:hover {
    color: #fff;
    background: #105cfb;
    border-color: #105cfb;
}

.stat-custom-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-custom-form .layui-input-inline {
    width: 190px;
}

.stat-form-mid {
    color: #6b7280;
}

.stat-summary-item .value small {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 400;
    color: #697386;
}

.stat-summary-item .bottom-title {
    margin-top: 8px;
    color: #8a94a6;
    font-size: 12px;
    line-height: 18px;
}

.stat-table-wrap .body {
    padding: 0 15px 15px;
}

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

.stat-table {
    margin-top: 15px;
}

.stat-table th,
.stat-table td {
    padding: 12px 14px;
}

.stat-source-wrap .body {
    padding: 14px 16px;
    color: #697386;
    line-height: 24px;
}

.stat-source-wrap p {
    margin: 0;
}

.stat-legacy-shop-page {
    min-height: calc(100vh - 86px);
    padding: 15px;
    background: #fff;
    box-sizing: border-box;
}

.stat-legacy-time-screen .stat-screen-items {
    display: flex;
    align-items: center;
}

.stat-legacy-time-screen .item {
    position: relative;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid #d2d2d2;
    border-left: 0;
    border-radius: 0;
    background: #fff;
    color: #303133;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.stat-legacy-time-screen .item:first-child {
    border-left: 1px solid #d2d2d2;
}

.stat-legacy-time-screen .item.selected,
.stat-legacy-time-screen .item:hover {
    z-index: 1;
    color: #fff;
    border-color: #1268f3;
    background: #1268f3;
}

.stat-legacy-data-wrap {
    display: flex;
    margin-top: 15px;
}

.stat-legacy-data-item {
    flex: 1;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 15px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #303133;
    text-align: left;
    cursor: pointer;
}

.stat-legacy-data-item:last-child {
    padding-right: 0;
}

.stat-legacy-data-item .box {
    display: block;
    height: 92px;
    padding: 15px;
    border: 1px solid #eee;
    background: #fff;
    box-sizing: border-box;
}

.stat-legacy-data-item .title {
    display: block;
    color: inherit;
    font-size: 14px;
    line-height: 20px;
}

.stat-legacy-data-item .value {
    display: block;
    margin-top: 4px;
    color: inherit;
    font-size: 25px;
    font-weight: 700;
    line-height: 40px;
}

.stat-legacy-data-item .stat-help {
    margin-left: 4px;
    color: #c8c9cc;
    font-size: 14px;
    font-style: normal;
}

.stat-legacy-data-item.selected .box {
    border-color: #1268f3;
    color: #1268f3;
}

.stat-legacy-visit-data {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 15px;
    color: #999;
    font-size: 14px;
    line-height: 20px;
}

.stat-legacy-visit-data .value {
    margin: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.stat-legacy-constitute-wrap {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.stat-legacy-survey {
    flex: 1;
    min-width: 0;
    min-height: 122px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    background: #f2f3f5;
    box-sizing: border-box;
}

.stat-legacy-constitute-card {
    flex: 1;
    min-width: 0;
    padding: 10px 15px;
    box-sizing: border-box;
}

.stat-legacy-constitute-title,
.stat-legacy-constitute-value,
.stat-legacy-constitute-detail {
    display: block;
    white-space: nowrap;
}

.stat-legacy-constitute-title {
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
}

.stat-legacy-constitute-value {
    margin-top: 4px;
    color: #303133;
    font-size: 24px;
    font-weight: 400;
    line-height: 34px;
}

.stat-legacy-constitute-detail {
    margin-top: 2px;
    color: #1268f3;
    font-size: 12px;
    line-height: 18px;
    text-decoration: none;
}

.stat-legacy-constitute-symbol {
    flex: 0 0 auto;
    padding: 0 5px;
    color: #303133;
    font-size: 18px;
    line-height: 24px;
}

.stat-legacy-chart {
    width: 100%;
    height: 400px;
    margin-top: 30px;
}

.stat-legacy-board-list {
    margin-top: 15px;
}

.stat-legacy-board {
    display: flex;
    min-height: 120px;
    margin-top: 15px;
}

.stat-legacy-board:first-child {
    margin-top: 0;
}

.stat-legacy-board.visit {
    background: #f3f8ff;
}

.stat-legacy-board.order {
    background: #fffaf3;
}

.stat-legacy-board .board-title {
    display: flex;
    flex: 0 0 100px;
    height: 120px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-sizing: border-box;
}

.stat-legacy-board.visit .board-title {
    background: #177bff;
}

.stat-legacy-board.order .board-title {
    background: #ff9f15;
}

.stat-legacy-board .board-title .iconfont {
    margin-bottom: 10px;
    color: #fff;
    font-size: 36px;
    line-height: 36px;
}

.stat-legacy-board .board-item {
    display: flex;
    width: 15%;
    padding: 0 50px;
    flex-direction: column;
    justify-content: center;
    box-sizing: content-box;
}

.stat-legacy-board .board-item .title {
    font-size: 14px;
    line-height: 20px;
}

.stat-legacy-board .board-item .value {
    margin: 8px 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 32px;
}

.stat-legacy-board .board-item .ratio {
    color: #999;
    font-size: 12px;
    line-height: 1;
}

.stat-legacy-board .board-item .iconfont {
    margin: 0 3px;
    font-size: 12px;
}

.stat-legacy-board .rise {
    color: #f97337;
}

.stat-legacy-board .decline {
    color: #0cc361;
}

.stat-legacy-goods-page {
    min-height: calc(100vh - 70px);
    background: transparent;
    box-sizing: border-box;
}

.stat-goods-time-screen {
    display: flex;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
}

.stat-goods-time-screen .stat-screen-items {
    display: flex;
}

.stat-goods-time-screen .item {
    position: relative;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid #d2d2d2;
    border-left: 0;
    border-radius: 0;
    background: #fff;
    color: #303133;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.stat-goods-time-screen .item:first-child {
    border-left: 1px solid #d2d2d2;
}

.stat-goods-time-screen .item.selected,
.stat-goods-time-screen .item:hover {
    z-index: 1;
    border-color: #1268f3;
    background: #1268f3;
    color: #fff;
}

.stat-goods-stat {
    padding: 5px 20px;
    margin-bottom: 10px;
    background: #fff;
}

.stat-goods-stat-row {
    display: flex;
    min-height: 82px;
    padding: 15px 0;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eff0f4;
    box-sizing: border-box;
}

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

.stat-goods-stat-row .stat-item-head {
    flex: 0 0 150px;
    font-size: 14px;
    font-weight: 400;
}

.stat-goods-stat-row .stat-item-content,
.stat-goods-stat-row .stat-item-spacer {
    flex: 0 0 180px;
}

.stat-goods-stat-row .stat-item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-goods-stat-row .stat-item-label {
    color: #303133;
    font-size: 14px;
    line-height: 20px;
}

.stat-goods-stat-row .stat-help {
    margin-left: 4px;
    color: #999;
    font-size: 14px;
    font-style: normal;
}

.stat-goods-stat-row .stat-item-content strong {
    margin-top: 8px;
    color: #303133;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.stat-goods-market {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.stat-goods-market .market-stat-item {
    width: calc(50% - 5px);
    background: #fff;
}

.stat-goods-market .market-item-head {
    height: 45px;
    margin: 0;
    padding: 0 15px;
    border-bottom: 1px solid #eff0f4;
    font-size: 14px;
    font-weight: 700;
    line-height: 45px;
}

.stat-goods-market .market-item-content {
    min-height: 55px;
    margin: 0;
    padding: 10px 20px;
    list-style: none;
    box-sizing: border-box;
}

.stat-goods-market .market-item-content li {
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: space-between;
    line-height: 35px;
}

.stat-goods-market .market-item-content li span {
    max-width: calc(100% - 110px);
    overflow: hidden;
    color: #999;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-goods-market .market-item-content li strong {
    color: #303133;
    font-weight: 400;
}

.stat-goods-visitor {
    padding-top: 30px;
    background: #fff;
}

.stat-goods-chart {
    width: 100%;
    height: 400px;
}

.stat-chart-error {
    height: 400px;
    margin-top: 30px;
    color: #909399;
    line-height: 400px;
    text-align: center;
}

.stat-chart-error[hidden] {
    display: none;
}

.stat-custom-mask {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .28);
}

.stat-custom-mask[hidden] {
    display: none;
}

.stat-custom-panel {
    width: 480px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
}

.stat-custom-head {
    height: 44px;
    padding: 0 14px;
    border-bottom: 1px solid #e6e8ef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-custom-head strong {
    font-size: 14px;
}

.stat-custom-head button {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #999;
    font-size: 18px;
}

.stat-custom-dialog-form {
    padding: 20px 22px 18px;
}

.stat-custom-dialog-form .layui-form-label {
    width: 100px;
    flex: 0 0 100px;
}

.stat-custom-dialog-form .stat-custom-range-wrap {
    position: relative;
    flex: 0 0 300px;
    width: 300px;
    min-width: 300px;
}

.stat-custom-dialog-form .stat-custom-range-wrap .calendar {
    position: absolute;
    top: 50%;
    right: 10px;
    color: #8b9bb3;
    transform: translateY(-50%);
    pointer-events: none;
}

.stat-custom-dialog-form .form-message {
    min-height: 20px;
    margin: 0 0 4px 100px;
    color: #d92d20;
    line-height: 20px;
}

.stat-custom-dialog-form .form-row {
    padding-left: 100px;
}

@media (max-width: 1180px) {
    .admin-dashboard-summary .summary-wrap,
    .stat-summary .summary-wrap {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .stat-table-grid {
        grid-template-columns: 1fr;
    }

    .stat-filter-body {
        align-items: flex-start;
        flex-direction: column;
    }

    .stat-legacy-constitute-wrap {
        flex-direction: column;
    }
}

.finance-summary-body {
    display: flex;
    padding: 20px 0;
}

.finance-summary-body .content {
    width: 33.333%;
    padding: 0 24px;
    border-right: 1px solid #eef0f5;
}

.finance-summary-body .content:last-child {
    border-right: 0;
}

.store-account-screen,
.store-withdraw-screen {
    margin-top: 15px;
}

.store-account-screen .old-date-input,
.store-withdraw-screen .old-date-input {
    position: relative;
}

.store-account-screen .calendar,
.store-withdraw-screen .calendar {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa8bd;
    pointer-events: none;
}

.confirm-popup-hint {
    position: relative;
}

.confirm-popup-example {
    display: inline-block;
    margin-left: 6px;
    cursor: pointer;
}

.confirm-popup-preview {
    position: absolute;
    left: 42px;
    top: 24px;
    z-index: 10;
    display: none;
    width: 230px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.confirm-popup-example:hover + .confirm-popup-preview {
    display: block;
}

.confirm-popup-preview img {
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto;
}

.account-filter-actions,
.store-config-actions {
    align-items: center;
}

.account-data-sum {
    margin-left: 10px;
    color: #333;
}

.store-account-table th,
.store-account-table td,
.store-withdraw-table th,
.store-withdraw-table td {
    padding: 12px 14px;
    vertical-align: top;
}

.store-account-table .text {
    max-width: 520px;
    line-height: 20px;
    word-break: break-all;
}

.withdraw-status {
    line-height: 20px;
}

.withdraw-status-pending_audit,
.withdraw-status-wait_transfer,
.withdraw-status-0,
.withdraw-status-1,
.withdraw-status-3 {
    color: #1267f5;
}

.withdraw-status-transferred,
.withdraw-status-2 {
    color: #1b8f3a;
}

.withdraw-status-refused,
.withdraw-status-transfer_failed,
.withdraw-status--1,
.withdraw-status--2 {
    color: #d92d20;
}

.withdraw-status-closed {
    color: #8a94a6;
}

.withdraw-actions {
    justify-content: flex-end;
}

.transfer-modal {
    width: 800px;
}

.member-withdraw-table-wrap .old-modal-mask[data-transfer-modal] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-withdraw-table-wrap .old-modal-mask[data-transfer-modal][hidden] {
    display: none;
}

.member-withdraw-table-wrap .old-modal-mask[data-transfer-modal] > .transfer-modal {
    position: static;
    inset: auto;
    z-index: auto;
    width: 800px;
    max-width: calc(100vw - 48px);
    min-height: 200px;
    max-height: calc(100vh - 48px);
}

.transfer-modal-form {
    padding: 18px 22px;
    max-height: calc(100vh - 118px);
    overflow-y: auto;
}

.transfer-modal-form .upload-default {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.transfer-modal-form .upload-default,
.transfer-modal-form .upload-default > span {
    width: 100%;
    height: 100%;
}

.transfer-modal-form .upload-default .upload {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
}

.transfer-modal-form .upload-default [hidden],
.transfer-modal-form .operation[hidden] {
    display: none !important;
}

.transfer-modal-form .operation button {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

.transfer-modal-form .operation > div > button + button {
    margin-left: 16px;
}

.transfer-modal-form .operation .replace_img {
    width: 100%;
}

.transfer-modal-form .form-message {
    min-height: 32px;
    line-height: 32px;
}

.member-withdraw-screen {
    margin-top: 15px;
}

.member-withdraw-screen .old-date-input,
.member-recharge-order-screen .old-date-input,
.member-account-screen .old-date-input,
.member-recommend-screen .old-date-input,
.birthdaygift-record-screen .old-date-input,
.promotion-date-range .old-date-input {
    position: relative;
    display: inline-block;
}

.member-withdraw-screen .calendar,
.member-recharge-order-screen .calendar,
.member-account-screen .calendar,
.member-recommend-screen .calendar,
.birthdaygift-record-screen .calendar,
.promotion-date-range .calendar {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b9bb3;
    pointer-events: none;
}

.member-withdraw-table th,
.member-withdraw-table td {
    padding: 12px 14px;
    vertical-align: top;
}

.member-withdraw-config {
    width: 100%;
    max-width: none;
    padding: 14px 0;
    border-radius: 5px;
    background: #fff;
}

.member-withdraw-config .layui-form-item {
    display: block;
    position: relative;
    min-height: 34px;
    margin-bottom: 15px;
}

.member-withdraw-config .layui-form-label {
    float: left;
    width: 200px;
    height: 34px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
    color: #454545;
    font-size: 14px;
    line-height: 34px;
    text-align: right;
}

.withdraw-detail-card .layui-form-label {
    width: 150px;
    flex: 0 0 150px;
}

.member-withdraw-config .layui-input-block {
    min-width: 0;
    min-height: 34px;
    margin-left: 200px;
}

.withdraw-detail-card .layui-input-block {
    margin-left: 0;
}

.member-withdraw-config .word-aux {
    display: block;
    margin-top: 5px;
    margin-left: 200px;
    color: #b2b2b2;
    font-size: 12px;
    line-height: 1.6;
}

.member-withdraw-config .layui-input-inline {
    display: inline-block;
    width: auto;
    min-width: 0;
}

.member-withdraw-config .len-short {
    width: 120px !important;
    height: 34px;
    min-height: 34px;
    border-color: #e6e6e6;
    border-radius: 0;
    font-size: 14px;
    line-height: 34px;
}

.member-withdraw-config .layui-form-mid {
    display: inline-block;
    height: 34px;
    min-height: 34px;
    padding: 0;
    margin-left: 8px;
    line-height: 34px;
    vertical-align: middle;
}

.member-withdraw-transfer-types {
    width: auto;
    display: flex;
    gap: 28px;
    align-items: center;
}

.member-withdraw-transfer-types label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 20px;
    white-space: nowrap;
}

.member-withdraw-transfer-types input[type="checkbox"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    margin: 0;
}

.member-withdraw-config-actions,
.withdraw-detail-actions {
    padding-left: 200px;
}

.withdraw-detail-card {
    max-width: 980px;
}

.withdraw-detail-card .layui-card-body {
    padding: 16px 0;
}

.finance-dashboard {
    padding: 0;
}

.finance-common-wrap {
    margin: 0 0 16px;
    background: #fff;
    border: 1px solid #eef0f5;
}

.finance-head {
    height: 48px;
    line-height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid #eef0f5;
}

.finance-head .title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.finance-head .sub-title {
    margin-left: 12px;
    font-size: 12px;
    color: #8a94a6;
}

.finance-body {
    padding: 16px 18px 18px;
}

.finance-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.finance-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e6e8ef;
    padding: 6px 10px;
}

.finance-date-range .layui-input {
    width: 210px;
}

.finance-date-range .iconfont {
    margin-left: -24px;
    color: #8a94a6;
    pointer-events: none;
}

.finance-date-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.finance-date-buttons .date-btn {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #333;
    cursor: pointer;
}

.finance-date-buttons .date-btn.text-color {
    color: #105cfb;
}

.finance-survey {
    display: flex;
    background: #f2f3f5;
    margin: 10px 0 0;
}

.finance-survey .layui-card {
    width: 50%;
    margin: 10px 0 0;
    padding-left: 40px;
    box-sizing: border-box;
    background: #f2f3f5;
    border-radius: 0;
    box-shadow: none;
}

.finance-survey .layui-card-header {
    height: 34px;
    line-height: 34px;
    padding: 0;
    border: 0;
    font-size: 14px;
    color: #333;
}

.finance-survey .layui-card-body {
    padding: 0 0 14px;
    font-size: 24px;
    color: #333;
}

.finance-survey.stat {
    min-height: 90px;
    align-items: center;
    padding-left: 0;
}

.finance-survey.stat .layui-card {
    width: 150px !important;
    margin-top: 0;
}

.finance-survey .symbol {
    padding: 0 20px;
    font-size: 18px;
}

.finance-survey .symbol.small {
    padding: 0 10px;
}

.finance-survey .formula-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.finance-survey .stat-text {
    padding: 0 10px;
    font-size: 14px;
}

.finance-dashboard .stat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.finance-dashboard .stat-item {
    width: calc((100% - 30px) / 4);
    min-height: 104px;
    padding: 15px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.finance-dashboard .stat-name {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: #333;
}

.finance-dashboard .stat-name a {
    white-space: nowrap;
}

.finance-dashboard .js-prompt-top {
    margin-left: 5px;
    color: #c8c9cc;
    cursor: help;
}

.finance-dashboard .stat-value {
    margin-top: 15px;
    font-size: 24px;
    color: #333;
}

@media (max-width: 1580px) {
    .finance-dashboard .stat-item {
        width: calc((100% - 20px) / 3);
    }
}

.transfer-modal-form .layui-form-label {
    width: 118px;
}

.transfer-modal-form .input-text {
    min-height: 32px;
    line-height: 32px;
    margin: 0;
}

.withdraw-detail-card .promotion-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 0 22px;
    padding: 8px 0;
}

.promotion-view-item {
    display: flex;
    min-height: 34px;
    line-height: 24px;
    padding: 5px 0;
}

.promotion-view-item label,
.promotion-view-item-custom-label {
    flex: 0 0 130px;
    color: #697386;
    text-align: right;
    padding-right: 8px;
}

.promotion-view-item span,
.promotion-view-item-custom-box {
    color: #333;
    word-break: break-all;
}

.promotion-view-item-line {
    grid-column: 1 / -1;
    display: flex;
    padding: 8px 0;
}

.withdraw-detail-card .upload-img-box img {
    max-width: 180px;
    max-height: 120px;
    border: 1px solid #e2e7f0;
    object-fit: contain;
}

@media (max-width: 1180px) {
    .store-dashboard-summary .summary-wrap {
        width: 100%;
    }

    .store-dashboard-rankings {
        display: block;
    }

    .store-dashboard-rankings .common-wrap {
        min-width: 0;
        max-width: none;
    }
}

.member-summary-wrap {
    display: flex;
    flex-wrap: wrap;
}

/* 旧版会员概况页覆盖 body-content 的默认留白，只保留 common-wrap 自身间距。 */
.member-dashboard-page .shell {
    padding: 55px 0 15px;
}

.member-summary-wrap .summary-item {
    flex: 1;
    padding: 0 15px;
    box-sizing: border-box;
}

.member-summary-wrap .summary-item .title,
.member-summary-wrap .summary-item .bottom-title {
    color: #909399;
    font-size: 14px;
    margin-top: 5px;
}

.member-summary-wrap .summary-item .value {
    color: #303133;
    font-size: 26px;
    margin-top: 10px;
}

.member-summary-wrap .summary-item.last {
    flex: 0 0 240px;
    padding-left: 80px;
    border-left: 1px solid #eee;
}

.member-dashboard-summary.common-wrap,
.member-dashboard-grid .common-wrap,
.member-distribution-panel.common-wrap {
    padding: 15px;
    margin: 15px 15px 0;
    background: #fff;
}

.member-dashboard-summary .head,
.member-dashboard-grid .head,
.member-distribution-panel .head {
    display: flex;
    align-items: center;
}

.member-dashboard-summary .head .title,
.member-dashboard-grid .head .title,
.member-distribution-panel .head .title {
    color: #303133;
    font-size: 16px;
}

.member-dashboard-summary .head .sub-title {
    margin-left: 10px;
    color: #999;
}

.member-dashboard-summary .body,
.member-dashboard-grid .body,
.member-distribution-panel .body {
    margin-top: 15px;
}

.member-summary-wrap {
    align-items: stretch;
}

.member-order-chart {
    flex: 0 0 230px;
    height: 90px;
}

.member-order-chart > div {
    width: 230px;
    height: 90px;
}

.member-dashboard-grid {
    display: flex;
}

.member-dashboard-grid .common-wrap {
    flex: 1;
    min-width: 0;
}

.member-dashboard-grid .common-wrap:first-child {
    margin-right: 0;
}

.member-chart {
    width: 100%;
    height: 300px;
}

.member-ratio-chart {
    height: 200px;
}

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

.trend-row {
    display: grid;
    grid-template-columns: 92px minmax(120px, 1fr) 40px;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    color: #667089;
}

.trend-row div {
    height: 8px;
    background: #edf1f7;
    overflow: hidden;
}

.trend-row i {
    display: block;
    height: 100%;
    min-width: 0;
    background: #105cfb;
}

.trend-row strong {
    color: #303133;
    font-weight: 500;
    text-align: right;
}

.member-stat-table {
    margin: 0;
}

.member-distribution-wrap {
    display: flex;
}

.member-map-wrap,
.member-distribution-table {
    flex: 1;
    min-width: 0;
}

.member-map-wrap {
    display: flex;
    justify-content: center;
    margin-right: 15px;
}

.member-map-chart {
    width: 80%;
    height: 600px;
}

.member-distribution-table {
    overflow: hidden;
}

.member-distribution-table .old-table {
    width: 100%;
}

.member-screen .layui-form-item {
    align-items: center;
    margin-bottom: 10px;
}

.member-screen .layui-form-label {
    width: 92px;
    flex: 0 0 92px;
    line-height: 32px;
}

.member-screen .layui-input-inline {
    min-width: 170px;
}

.member-screen .layui-input-inline.short {
    min-width: 96px;
    width: 96px;
}

.member-screen .layui-form-mid {
    min-height: 32px;
    line-height: 32px;
}

.member-screen input,
.member-screen select {
    height: 32px;
    min-height: 32px;
}

.member-filter-actions {
    padding-left: 110px;
}

.member-batch-bar,
.member-label-batch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #edf0f5;
}

.member-old-table th,
.member-old-table td {
    padding: 12px 14px;
    vertical-align: top;
}

.member-title-cell {
    display: flex;
    gap: 10px;
    min-width: 0;
}

.member-avatar,
.member-avatar-preview {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border: 1px solid #e5e9f2;
    background: #f7f8fb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa4b7;
    overflow: hidden;
}

.member-avatar img,
.member-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-avatar span {
    font-size: 13px;
}

.member-title-text {
    min-width: 0;
}

.member-title-text p {
    margin: 0 0 4px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip_style {
    display: inline-block;
    background: #333;
    color: #fff5a0;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.status-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #d7deeb;
    color: #667089;
}

.status-badge.active {
    border-color: #50b85a;
    color: #1f8f35;
}

.status-badge.blacklist {
    border-color: #333;
    color: #333;
}

.status-badge.disabled {
    color: #a0a7b4;
}

.member-edit-form .layui-form-item {
    align-items: center;
    margin-bottom: 18px;
}

.member-edit-form .layui-form-label {
    flex: 0 0 120px;
    width: 120px;
    line-height: 32px;
}

.member-edit-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
}

.member-edit-form .len-long {
    width: 420px;
}

.member-edit-form .len-mid {
    width: 260px;
}

.member-edit-form .avatar-field {
    display: flex;
    align-items: center;
    gap: 14px;
}

.member-avatar-preview .upload-default {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #8b95aa;
}

.member-avatar-preview .upload-default span {
    font-size: 24px;
    line-height: 1;
}

.member-avatar-preview .upload-default p {
    margin: 0;
    font-size: 12px;
}

.member-edit-form .radio-line,
.member-edit-form .checkbox-line,
.member-label-modal-form .checkbox-line {
    min-height: 32px;
    align-items: center;
}

.member-edit-form input[type="checkbox"],
.member-edit-form input[type="radio"],
.member-old-table input[type="checkbox"],
.member-label-table input[type="checkbox"],
.member-label-modal-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
}

.member-form-row {
    padding-left: 120px;
}

.member-label-checks {
    max-width: 760px;
}

.member-detail-page {
    padding: 0;
}

.member-detail-info-wrap {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.member-detail-info-wrap .layui-card {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.member-detail-info,
.member-detail-account {
    display: flex;
    width: 100%;
    min-width: 0;
}

.member-detail-info .headimg {
    width: 70px;
    height: 70px;
    margin-right: 15px;
    border: 1px solid #eef0f5;
    background: #f7f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #9aa4b5;
    font-size: 12px;
}

.member-detail-info .headimg img {
    max-width: 100%;
    max-height: 100%;
}

.member-detail-info .info,
.member-detail-account .info {
    flex: 1;
    width: 0;
    display: flex;
    flex-wrap: wrap;
}

.member-detail-info .data-item,
.member-detail-account .data-item {
    width: 50%;
    min-height: 30px;
    line-height: 30px;
    padding-right: 10px;
    box-sizing: border-box;
    color: #333;
}

.member-detail-info .data-item.wide {
    width: 100%;
}

.member-detail-info .data-item > span:first-child,
.member-detail-account .data-item > span:first-child {
    color: #555;
}

.member-card-tab-panel {
    min-height: 220px;
}

.member-card-search {
    display: flex;
    justify-content: flex-end;
    margin: 15px 0;
    padding: 0;
}

.member-card-search .layui-input-inline {
    display: flex;
    width: 260px;
}

.member-card-search .layui-input {
    flex: 1;
    min-width: 0;
    border-radius: 0;
}

.member-card-search .layui-btn {
    width: 42px;
    min-width: 42px;
    padding: 0;
    border-left: 0;
    border-radius: 0;
}

.member-card-product {
    display: flex;
    align-items: center;
    min-width: 0;
}

.member-card-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-right: 10px;
    flex: 0 0 52px;
    border: 1px solid #eef0f5;
    background: #f7f9fc;
}

.member-card-product-image img {
    max-width: 100%;
    max-height: 100%;
}

.member-card-product-title {
    min-width: 0;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-card-product-title small {
    display: block;
    margin-top: 4px;
    color: #999;
}

.member-card-table th:first-child,
.member-card-table td:first-child {
    width: 25%;
}

.member-card-table .operation,
.member-card-detail-page .operation {
    text-align: right;
}

.member-card-pagination {
    margin-top: 15px;
    text-align: right;
}

.member-card-detail-page .card-common {
    margin-top: 15px;
    margin-bottom: 0;
    box-shadow: none;
}

.member-card-summary {
    display: flex;
    flex-wrap: wrap;
}

.member-card-summary > div {
    width: 33.3333%;
    min-height: 30px;
    line-height: 30px;
    padding-right: 10px;
    box-sizing: border-box;
}

.member-card-summary label {
    color: #555;
}

.member-card-detail-page .layui-tab-title {
    margin-bottom: 15px;
}

@media (max-width: 1100px) {
    .member-card-summary > div {
        width: 50%;
    }
}

.member-detail-page .edit-icon {
    border: 0;
    background: transparent;
    padding: 0 0 0 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 30px;
}

.member-detail-page .edit-icon .iconfont {
    font-size: 14px;
    line-height: 1;
}

.member-detail-records {
    margin: 0;
}

.member-detail-records .layui-tab-content {
    padding: 0;
}

.member-detail-records .layui-tab-item {
    display: none;
}

.member-detail-records .layui-tab-item.layui-show {
    display: block;
}

.member-detail-records .layui-tab-title {
    border-bottom-color: #e9edf4;
}

.member-detail-table {
    margin: 0;
}

.member-detail-table th,
.member-detail-table td {
    padding: 12px 14px;
}

.member-detail-layer-form {
    padding: 20px 24px;
}

.member-detail-layer-form > label {
    display: inline-flex;
    align-items: center;
    margin-right: 22px;
    line-height: 32px;
}

.member-detail-layer-form input[type="checkbox"],
.member-detail-layer-form input[type="radio"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    margin: 0 6px 0 0;
}

.member-detail-layer-form .layer-label {
    display: block;
    margin: 0 0 8px;
}

.member-detail-layer-form.address .layui-input + .layer-label {
    margin-top: 14px;
}

.member-detail-layer-form.adjust .layui-form-label {
    width: 140px;
    flex: 0 0 140px;
}

.member-detail-layer-form.adjust .layui-input-block {
    margin-left: 0;
}

.member-detail-layer-form.adjust .word-aux {
    margin-left: 140px;
}

.word-aux.in-row {
    line-height: 32px;
    color: #8a93a6;
}

.member-label-table .edit-sort {
    width: 80px;
    min-height: 32px;
    height: 32px;
    padding: 0 8px;
}

.member-label-table .table-btn,
.member-old-table .table-btn {
    justify-content: flex-end;
}

.member-old-table .member-row-actions {
    margin-left: auto;
    gap: 10px;
}

.member-old-table .member-row-actions .layui-btn {
    min-height: 22px;
    line-height: 22px;
}

.member-row-operation {
    position: relative;
}

.member-row-operation .more-operation {
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 6;
    width: 112px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e6e8ef;
    box-shadow: 0 4px 12px rgba(20, 31, 50, 0.12);
    text-align: left;
}

.member-row-operation .more-operation a,
.member-row-operation .more-operation button {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 0;
    background: transparent;
    padding: 0 12px;
    color: #333;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
}

.member-row-operation .more-operation a:hover,
.member-row-operation .more-operation button:hover {
    color: #105cfb;
    background: #f5f8ff;
}

.member-action-panel {
    width: 620px;
}

.member-apply-panel {
    width: 620px;
}

.member-coupon-panel {
    width: 700px;
}

.member-action-form .layui-form-item {
    align-items: flex-start;
}

.member-action-form .layui-form-label.mid {
    flex: 0 0 128px;
    width: 128px;
}

.member-action-form .form-row.mid {
    padding-left: 128px;
}

.member-coupon-form .coupon-modal.one-list {
    padding: 14px;
}

.member-coupon-form .coupon-modal.one-list .coupon-list {
    width: 100%;
}

.member-coupon-form .coupon-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef0f4;
}

.member-coupon-form .coupon-option-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-coupon-form .coupon-option-main em,
.member-coupon-form .coupon-option-remain {
    color: #8a93a6;
    font-style: normal;
    font-size: 12px;
}

.account-filter-tip,
.order-filter-tip {
    min-height: 28px;
    line-height: 28px;
    margin-bottom: 10px;
    padding: 0 10px;
    background: #f7f8fa;
    border: 1px solid #e6e8ef;
    color: #5f6f8f;
}

.account-filter-tip a,
.order-filter-tip a {
    margin-left: 10px;
    color: #105cfb;
}

.member-label-edit-form .layui-form-item {
    align-items: flex-start;
    margin-bottom: 16px;
}

.member-label-edit-form .layui-form-label.mid,
.member-label-modal-form .layui-form-label.mid {
    flex: 0 0 118px;
    width: 118px;
}

.member-label-edit-form .layui-input-block,
.member-label-modal-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
}

.member-label-edit-form .len-mid {
    width: 280px;
}

.member-label-edit-form textarea.len-mid {
    min-height: 78px;
}

.member-label-edit-form .form-row.mid,
.member-label-modal-form .form-row.mid {
    padding-left: 118px;
}

.member-label-modal-panel {
    width: 560px;
}

@media (max-width: 900px) {
    .member-dashboard-grid {
        display: block;
    }

    .member-summary-wrap .summary-item.last {
        flex: 1 1 170px;
        padding-left: 15px;
        border-left: 0;
    }

    .member-order-chart {
        flex: 1 1 240px;
    }

    .member-distribution-wrap {
        display: block;
    }

    .member-map-wrap {
        margin-right: 0;
    }

    .member-map-chart {
        width: 100%;
    }
}

.member-level-tip {
    padding: 0 20px;
    margin-bottom: 16px;
}

.member-level-tip .levellistTip {
    height: 48px;
    line-height: 48px;
    background: #fff5ed;
    color: #666;
    padding: 0 16px;
    box-sizing: border-box;
}

.member-level-tip .iconfont {
    color: #1269ff;
    margin-right: 6px;
}

.text-link {
    border: 0;
    background: transparent;
    color: #1269ff;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.vip-name {
    color: #b38f47;
}

.level-equity {
    line-height: 1.6;
}

.member-level-table td,
.member-level-table th {
    vertical-align: top;
}

.member-level-table .table-btn {
    justify-content: flex-end;
}

.member-level-form .layui-card {
    margin-bottom: 16px;
}

.member-level-form .layui-form-item {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: flex-start;
    row-gap: 5px;
    margin-bottom: 18px;
}

.member-level-form .layui-form-label {
    grid-column: 1;
    width: 200px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
}

.member-level-form .layui-input-inline,
.member-level-form .layui-input-block {
    grid-column: 2;
    flex: 0 0 auto;
    min-width: 0;
}

.member-level-form .word-aux,
.member-level-form .form-message {
    grid-column: 2;
    margin: 0;
}

.member-level-form .len-long {
    width: 450px;
}

.member-level-form .len-short {
    width: 120px;
}

.member-level-form textarea.len-long {
    min-height: 86px;
}

.member-level-form .input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.member-level-form .color-inline {
    display: flex;
    align-items: center;
    height: 32px;
}

.member-level-form .color-picker {
    width: 44px;
    height: 30px;
    padding: 0;
    border: 1px solid #d8dee9;
    background: #fff;
}

.level-picture-block {
    display: block;
}

.level-picture-preview {
    width: 250px;
    height: 120px;
    padding: 10px;
    border: 1px dashed #ddd;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.level-picture-preview .upload-img-box {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}

.level-picture-preview img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
}

.level-picture-preview .upload-default {
    position: absolute;
    inset: 0;
}

.level-picture-preview .upload-default .upload {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.level-picture-preview .upload-default .iconfont {
    color: #6d7278;
    font-size: 30px;
}

.level-picture-preview .upload-default p {
    margin: 0;
    color: #5a5a5a;
    line-height: 20px;
    white-space: nowrap;
}

.level-picture-operation {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    text-align: center;
}

.level-picture-preview.has-image:hover .level-picture-operation,
.level-picture-preview.has-image:focus .level-picture-operation,
.level-picture-preview.has-image:focus-within .level-picture-operation {
    display: block;
}

.level-picture-review,
.level-picture-delete {
    width: 34px;
    height: 34px;
    margin-top: 34px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.level-picture-review .iconfont {
    font-size: 22px;
}

.level-picture-delete {
    font-size: 25px;
    line-height: 34px;
}

.level-picture-replace {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 24px;
    background: rgba(0, 0, 0, .5);
    font-size: 12px;
    line-height: 24px;
}

.member-level-form .member-level-primary-action,
.old-modal .member-level-primary-action {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 2px;
    background: #105cfb;
    color: #fff;
    line-height: 32px;
}

.member-level-form .form-row {
    margin-top: 20px;
    margin-left: 200px;
}

.selected-goods-table {
    width: 780px;
    margin-bottom: 10px;
}

.manjian-selected-goods-table,
.groupbuy-selected-goods-table,
.pintuan-selected-sku-table,
.pinfan-selected-sku-table,
.seckill-selected-sku-table,
.bargain-selected-sku-table,
.bundling-selected-sku-table,
.presale-selected-sku-table,
.topic-selected-goods-table,
.discount-selected-sku-table,
.divideticket-selected-goods-table,
.divideticket-detail-goods-table {
    width: 780px;
}

.selected-table-actions {
    width: 780px;
    margin: 0 0 8px;
    display: flex;
    gap: 8px;
}

.seckill-time-label-list ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 0 12px;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}

.seckill-time-label-list li {
    min-height: 28px;
    line-height: 26px;
    padding: 0 10px;
    border: 1px solid #e1e7f0;
    background: #f8fafc;
    color: #3d4b63;
    font-size: 12px;
}

.seckill-time-label-list .empty-time-tag {
    color: #9aa4b5;
}

.seckill-time-panel {
    width: 620px;
}

.coupon-selected-store-table {
    width: 700px;
    margin: 10px 0 0;
}

.selected-goods-table .empty-line,
.selected-coupon-table .empty-line,
.coupon-selected-store-table .empty-line,
.divideticket-detail-goods-table .empty-line,
.goods-select-table .empty-line {
    height: 44px;
    color: #9aa4b5;
    text-align: center;
}

.selected-coupon-table {
    width: 420px;
    margin-bottom: 10px;
}

.goods-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.goods-img-mini {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid #e1e7f0;
    background: #f3f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a94a6;
    font-size: 12px;
    overflow: hidden;
}

.goods-img-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goods-select-panel {
    width: 760px;
}

.goods-select-body {
    max-height: 430px;
    overflow: auto;
    padding: 14px 20px 0;
}

.goods-select-table input[type="checkbox"],
.member-level-table input[type="checkbox"],
.member-level-form input[type="checkbox"],
.member-level-form input[type="radio"],
.promotion-coupon-form input[type="checkbox"],
.promotion-coupon-form input[type="radio"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
}

.member-level-form .old-switch input {
    position: absolute;
    opacity: 0;
}

.member-level-form .old-switch span {
    display: inline-block;
    width: 48px;
    height: 24px;
    background: #d4dbe6;
    border-radius: 12px;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}

.member-level-form .old-switch span::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: transform .15s ease;
}

.member-level-form .old-switch input:checked + span {
    background: #1269ff;
}

.member-level-form .old-switch input:checked + span::after {
    transform: translateX(24px);
}

.member-level-form .switch-line {
    height: 32px;
    display: flex;
    align-items: center;
}

.member-account-summary .finance-summary-body {
    padding: 20px 50px 0;
    flex-wrap: wrap;
}

.member-account-summary .finance-summary-body .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 30px;
    padding: 0;
    border-right: 0;
}

.member-account-summary .finance-summary-body.two-cols .content {
    width: 50%;
}

.member-account-summary .finance-summary-body .content .title {
    margin-bottom: 0;
    color: #909399;
    font-size: 14px;
}

.member-account-summary .finance-summary-body .content .money {
    max-width: 250px;
    margin-top: 10px;
    color: #303133;
    font-size: 26px;
    font-weight: 400;
}

.member-account-summary .bottom-title {
    color: #909399;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

.member-account-screen {
    margin: 15px 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
}

.member-account-screen .layui-colla-content {
    padding: 15px 0;
    border: 0;
    background: #f2f3f5;
}

.member-account-screen .layui-form-item {
    align-items: center;
    gap: 0;
    margin-bottom: 15px;
}

.member-account-screen .layui-inline {
    gap: 0;
    margin-right: 10px;
    margin-bottom: 5px;
}

.member-account-screen .layui-form-label {
    width: 120px;
    height: 34px;
    flex: 0 0 120px;
    line-height: 34px;
    font-size: 14px;
}

.member-account-screen .layui-input-inline {
    width: 185px;
    min-width: 185px;
}

.member-account-screen input,
.member-account-screen select {
    width: 185px;
    height: 34px;
    min-height: 34px;
}

.member-account-screen .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    box-sizing: border-box;
}

.member-account-screen .layui-btn-primary.date-picker-btn.selected {
    border-color: var(--old-blue);
    background: var(--old-blue);
    color: #fff;
}

.member-account-screen .member-account-actions .layui-btn {
    border: 0;
    background: #105cfb;
    color: #fff;
}

.member-account-actions {
    margin-top: 20px;
    margin-left: 120px;
    padding-left: 0;
}

.member-account-table th,
.member-account-table td,
.member-point-rule-table th,
.member-point-rule-table td {
    padding: 12px 14px;
    vertical-align: top;
}

.member-account-table .text {
    max-width: 520px;
    line-height: 20px;
    word-break: break-all;
}

.member-account-table .member-account-empty-row td {
    padding: 0;
}

.member-account-table .member-account-empty-row .empty.compact {
    display: block;
    min-height: 56px;
    height: 56px;
    line-height: 56px;
}

.member-title-cell.compact {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
}

.member-avatar.small {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 12px;
}

.member-title-cell.compact .member-title-text {
    display: grid;
    gap: 3px;
    color: #303133;
}

.member-title-cell.compact .member-title-text span:last-child {
    color: #8a94a6;
}

.member-point-card {
    margin-top: 15px;
}

.member-point-card .layui-card-header.simple {
    min-height: 46px;
    padding: 0 16px;
    border-bottom: 1px solid #eef0f5;
    display: flex;
    align-items: center;
}

.member-point-card .layui-card-body {
    padding: 10px 25px;
}

.member-point-rule-table th,
.member-point-rule-table td {
    padding: 15px;
}

.member-point-actions,
.member-point-task {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.member-point-actions .layui-btn:not(.layui-btn-primary),
.member-point-modal-form .layui-btn:not(.layui-btn-primary) {
    border-color: var(--old-blue);
    background: var(--old-blue);
    color: #fff;
}

.text-link.inline {
    margin-left: 6px;
}

.member-point-modal {
    width: 600px;
}

[data-point-clear-modal],
[data-point-task-modal] {
    width: auto;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.member-point-modal-form {
    padding: 18px 22px;
}

.member-point-modal-form .layui-form-label.sm {
    flex: 0 0 80px;
    width: 80px;
}

.member-point-modal-form .layui-input-block {
    flex: 1;
}

.member-point-modal-form textarea.len-long {
    width: 450px;
    min-height: 86px;
}

.member-point-modal-form .word-aux.sm {
    margin-left: 80px;
    color: #9aa4b5;
    font-size: 12px;
}

.member-point-modal-form .form-row.sm {
    margin-left: 80px;
    padding-left: 0;
}

.member-cluster-toolbar {
    margin-bottom: 15px;
}

.member-cluster-screen {
    margin-bottom: 15px;
    padding: 0;
    border: 0;
    background: transparent;
}

.member-cluster-screen .layui-colla-item {
    border: 0;
}

.member-cluster-screen .layui-colla-content {
    display: block;
    padding: 15px;
    border: 0;
    background: #f2f3f5;
}

.member-cluster-filter .layui-form-item {
    align-items: center;
}

.member-cluster-filter .layui-form-label {
    width: 92px;
    flex: 0 0 92px;
}

.member-cluster-filter .layui-input-inline {
    min-width: 200px;
}

.member-cluster-filter input {
    height: 32px;
}

.member-cluster-list .old-table {
    margin: 0;
}

.member-cluster-list {
    padding: 0;
}

.member-cluster-list .table-btn {
    justify-content: flex-end;
}

.cluster-operation {
    position: relative;
}

.cluster-operation .more-operation {
    position: absolute;
    right: 0;
    top: 32px;
    z-index: 5;
    width: 112px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e6e8ef;
    box-shadow: 0 4px 12px rgba(20, 31, 50, 0.12);
    text-align: left;
}

.cluster-operation .more-operation a,
.cluster-operation .more-operation button {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 0;
    background: transparent;
    padding: 0 12px;
    color: #333;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
}

.cluster-operation .more-operation a:hover,
.cluster-operation .more-operation button:hover {
    color: #105cfb;
    background: #f5f8ff;
}

.member-cluster-form .layui-card {
    margin-top: 15px;
    margin-bottom: 0;
    border: 0;
    border-radius: 2px;
    box-shadow: none;
}

.member-cluster-form .layui-card:first-of-type {
    margin-top: 0;
}

.member-cluster-form .layui-card-header {
    height: auto;
    line-height: initial;
    padding: 0 20px 0;
    border-bottom: 0;
}

.member-cluster-form .card-title {
    position: relative;
    padding-left: 10px;
    font-size: 14px;
    font-weight: 600;
}

.member-cluster-form .card-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 14px;
    border-radius: 5px;
    background: var(--base-color);
    transform: translateY(-50%);
}

.member-cluster-form .layui-form-label {
    flex: 0 0 200px;
    width: 200px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
}

.member-cluster-form .layui-card-body {
    padding: 20px;
}

.member-cluster-form .layui-form-item {
    gap: 0;
    margin-bottom: 10px;
    align-items: flex-start;
}

.member-cluster-form .layui-input-block {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 34px;
}

.cluster-button-line {
    display: block;
    max-width: none;
}

.cluster-button-line .cluster-btn {
    margin-right: 10px;
    margin-bottom: 15px;
    min-width: 0;
}

.cluster-button-line .cluster-btn.border-color {
    border-color: #105cfb;
}

.member-cluster-table-wrap {
    max-width: none;
}

.member-cluster-rule-table {
    margin: 0;
}

.member-cluster-rule-table th,
.member-cluster-rule-table td {
    padding: 15px 30px;
    min-height: 20px;
    line-height: 20px;
    vertical-align: middle;
}

.member-cluster-rule-table .include-cell {
    display: flex;
    gap: 18px;
    align-items: center;
}

.member-cluster-rule-table .include-cell label,
.member-cluster-rule-table .checkbox-line label {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    line-height: 20px;
    white-space: nowrap;
}

.member-cluster-rule-table input[type="checkbox"],
.member-cluster-rule-table input[type="radio"],
.member-cluster-select-panel input[type="checkbox"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    margin: 0;
}

.cluster-range-inputs,
.cluster-select-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cluster-range-inputs input {
    width: 210px;
}

.cluster-select-value .layui-input {
    width: 260px;
}

.cluster-calculate-row {
    margin-left: 110px;
    gap: 18px;
}

.member-cluster-select-panel {
    width: 450px;
}

.member-cluster-select-panel .layui-form-label.sm {
    width: 70px;
    flex: 0 0 70px;
}

.member-cluster-select-panel .form-row.sm {
    padding-left: 70px;
}

.cluster-adjust-panel {
    width: 800px;
}

.cluster-adjust-panel .layui-form-label {
    width: 150px;
    flex: 0 0 150px;
}

.cluster-adjust-panel .form-row.mid {
    padding-left: 150px;
}

.cluster-coupon-panel {
    width: 700px;
}

.coupon-modal {
    display: grid;
    grid-template-columns: 1fr 70px 1fr;
    gap: 14px;
    padding: 18px 20px;
}

.coupon-modal .coupon-list {
    min-height: 320px;
    border: 1px solid #e6e8ef;
}

.coupon-modal .title {
    height: 38px;
    line-height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid #e6e8ef;
}

.coupon-modal .add {
    align-self: center;
    height: 32px;
    border: 1px solid #105cfb;
    background: #105cfb;
    color: #fff;
}

.coupon-modal .box {
    padding: 18px;
    min-height: 280px;
}

.coupon-option,
.coupon-selected-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f2f5;
    color: #303133;
}

.coupon-option:last-child,
.coupon-selected-item:last-child {
    border-bottom: 0;
}

.coupon-option input {
    width: 14px;
    height: 14px;
    min-width: 14px;
}

.coupon-option-main {
    flex: 1;
    min-width: 0;
}

.coupon-option-main strong,
.coupon-selected-item span {
    display: block;
    font-weight: 400;
    color: #303133;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coupon-option-main em,
.coupon-selected-item em,
.coupon-option-remain {
    font-style: normal;
    color: #8091ad;
    font-size: 12px;
}

.coupon-option-remain {
    flex: 0 0 auto;
}

.modal-operation {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 20px;
}

.member-point-modal-form input[type="radio"],
.member-point-modal-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
}

.member-point-modal-form .radio-line {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 32px;
}

.point-task-time {
    display: flex;
    align-items: center;
    gap: 10px;
}

.point-task-time .len-short {
    width: 120px;
}

.invoice-screen {
    margin-bottom: 15px;
    padding: 0;
}

.invoice-screen .layui-colla-content {
    padding: 15px var(--old-page-pad);
}

.invoice-screen .layui-form-item {
    align-items: center;
    margin-bottom: 12px;
}

.invoice-screen .layui-form-label {
    width: 86px;
    flex: 0 0 86px;
    line-height: 32px;
    padding: 0;
}

.invoice-screen .layui-input-inline {
    position: relative;
    width: 180px;
    min-width: 180px;
}

.invoice-screen .calendar {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa8bd;
    pointer-events: none;
}

.invoice-screen input,
.invoice-screen select {
    height: 32px;
    min-height: 32px;
    border-radius: 2px;
}

.invoice-screen .date-picker-btn {
    height: 32px;
    min-height: 32px;
    line-height: 30px;
    padding: 0 12px;
    border-radius: 2px;
}

.invoice-list-tab {
    margin: 0 0 var(--old-page-gap);
    padding: 0;
}

.invoice-list-tab .layui-tab-title {
    height: 46px;
    min-height: 46px;
    padding: 0 18px;
    gap: 24px;
}

.invoice-list-tab .layui-tab-title li,
.invoice-list-tab .layui-tab-title a {
    height: 46px;
    line-height: 46px;
}

.invoice-list-tab .layui-tab-content {
    padding: 0;
}

.invoice-table th {
    background: #f7f8fb;
    color: #333;
}

.invoice-table th,
.invoice-table td {
    padding: 12px 14px;
    vertical-align: top;
}

.invoice-title-cell {
    max-width: 260px;
}

.invoice-title-cell p {
    width: 100%;
    margin: 0 0 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.invoice-edit-form {
    margin: 0;
    padding: 24px 0 30px;
    background: #fff;
}

.invoice-edit-form .layui-form-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.invoice-edit-form .layui-form-label {
    flex: 0 0 120px;
    width: 120px;
    line-height: 32px;
    padding: 0;
    color: #333;
}

.invoice-edit-form .layui-input-block {
    flex: 0 0 auto;
    min-width: 0;
}

.invoice-edit-form .layui-input-inline.old-radio-row {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-width: 260px;
}

.invoice-edit-form .old-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #333;
    white-space: nowrap;
}

.invoice-edit-form .static-text {
    min-height: 32px;
    line-height: 32px;
    color: #333;
}

.invoice-edit-form .len-long {
    width: 420px;
    max-width: 420px;
}

.invoice-edit-form textarea.len-long {
    min-height: 86px;
}

.invoice-edit-actions {
    padding-left: 120px;
}

.order-adjust-modal {
    width: 1180px;
}

.order-adjust-form {
    padding: 18px 20px 22px;
}

.order-adjust-tip {
    margin: 0 0 12px;
    color: #666;
    font-size: 12px;
}

.order-adjust-table th,
.order-adjust-table td {
    padding: 10px 12px;
    vertical-align: middle;
}

.order-adjust-table .len-short {
    width: 96px;
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    text-align: right;
}

.order-adjust-form .form-row {
    margin-top: 16px;
}

.text-muted {
    color: #8a92a6;
    font-size: 12px;
    line-height: 20px;
}

.transaction-agreement-page,
.after-sale-page {
    margin: 0 0 80px;
    padding: 15px 0 28px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.transaction-agreement-page .layui-card-body,
.after-sale-page .layui-card-body {
    padding: 0;
}

.transaction-agreement-form .layui-form-item,
.after-sale-form .layui-form-item {
    display: block;
    min-height: 34px;
    margin-bottom: 15px;
}

.transaction-agreement-form .layui-form-label,
.after-sale-form .layui-form-label {
    float: left;
    width: 200px;
    height: 34px;
    padding: 0 10px 0 0;
    line-height: 34px;
    text-align: right;
    box-sizing: border-box;
}

.transaction-agreement-form .layui-input-inline,
.after-sale-form .layui-input-inline {
    display: block;
    min-width: 0;
    margin-left: 200px;
}

.transaction-agreement-form .len-long {
    width: 450px;
    height: 34px;
    min-height: 34px;
}

.transaction-agreement-form .special-length,
.after-sale-form .special-length {
    width: min(900px, 100%);
    max-width: 100%;
}

.member-cancel-agreement-form .special-length {
    width: min(950px, 100%);
    max-width: 100%;
}

.member-cancel-agreement-form .edui-editor,
.member-cancel-agreement-form .edui-editor-iframeholder,
.member-cancel-agreement-form .edui-editor-iframeholder iframe,
.transaction-agreement-form .edui-editor,
.transaction-agreement-form .edui-editor-iframeholder,
.transaction-agreement-form .edui-editor-iframeholder iframe,
.after-sale-form .edui-editor,
.after-sale-form .edui-editor-iframeholder,
.after-sale-form .edui-editor-iframeholder iframe {
    width: 100% !important;
    max-width: 100%;
}

.transaction-agreement-form .form-row,
.transaction-agreement-form .form-message,
.after-sale-form .form-row,
.after-sale-form .form-message,
.after-sale-form .after-sale-tip {
    margin-left: 200px;
}

.after-sale-form .old-radio-row {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 32px;
    width: fit-content;
}

.after-sale-form .old-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.default-image-page {
    min-height: calc(100vh - 70px);
    background: #fff;
    padding: 15px 0 80px;
}

.default-image-form .layui-form-item {
    display: block;
    min-height: 120px;
    margin: 5px 0 10px 0;
}

.default-image-form .layui-form-label {
    float: left;
    width: 200px;
    height: 34px;
    padding: 0 10px 0 0;
    line-height: 34px;
    box-sizing: border-box;
}

.default-image-form .layui-input-inline {
    display: block;
    margin-left: 200px;
}

.default-image-form .upload-img-block {
    position: relative;
    width: 250px;
    height: 120px;
    padding: 10px;
    border: 1px dashed #ddd;
    box-sizing: border-box;
}

.default-image-form .upload-img-box {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

.default-image-form .upload-default {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.default-image-form .upload {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #8d9ab2;
    font-size: 13px;
}

.default-image-form .upload i {
    font-size: 24px;
    color: #8d9ab2;
}

.default-image-form .preview_img {
    display: block;
    width: 100%;
    height: 100%;
}

.default-image-form .preview_img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.default-image-form .operation {
    position: absolute;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, .48);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
}

.default-image-form .upload-img-box.hover:hover .operation {
    display: flex;
}

.default-image-form .operation button {
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.default-image-form .operation .iconfont,
.default-image-form .operation .layui-icon {
    font-size: 18px;
}

.default-image-form .replace_img {
    color: #fff;
    font-size: 12px;
}

.default-image-hint {
    margin: 0 0 22px 200px;
}

.default-image-form .form-row,
.default-image-form .form-message {
    margin-left: 200px;
}

.image-preview-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .68);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-mask[hidden] {
    display: none;
}

.image-preview-mask img {
    max-width: 82vw;
    max-height: 82vh;
    background: #fff;
}

.image-preview-mask button {
    position: absolute;
    top: 30px;
    right: 40px;
    width: 36px;
    height: 36px;
    border: 0;
    background: #fff;
    color: #222;
    cursor: pointer;
    font-size: 24px;
    line-height: 36px;
}

.captcha-line {
    gap: 6px;
}

.captcha-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 54px;
    gap: 8px;
    align-items: center;
}

.captcha-control img {
    width: 120px;
    height: 46px;
    border: 1px solid #d8dde8;
    background: #f5f8ff;
    cursor: pointer;
}

.captcha-control button {
    border: 1px solid #d8dde8;
    background: #fff;
    color: #335078;
    height: 38px;
    cursor: pointer;
}

.captcha-config-page {
    min-height: calc(100vh - 70px);
    background: #fff;
    padding: 15px 0 80px;
}

.captcha-config-form .layui-form-item {
    display: block;
    min-height: 34px;
    margin-bottom: 15px;
}

.captcha-config-form .layui-form-label {
    float: left;
    width: 200px;
    height: 34px;
    padding: 0 10px 0 0;
    line-height: 34px;
    box-sizing: border-box;
}

.captcha-config-form .layui-input-block {
    margin-left: 200px;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.captcha-word-aux {
    margin-left: 200px;
}

.captcha-config-form .examples {
    cursor: pointer;
    margin-left: 15px;
}

.captcha-config-form .form-row,
.captcha-config-form .form-message {
    margin-left: 200px;
}

.captcha-demo-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .48);
}

.captcha-demo-mask[hidden] {
    display: none;
}

.captcha-demo-dialog {
    position: relative;
    width: 600px;
    height: 660px;
    background: #fff;
    padding: 44px 54px;
}

.captcha-demo-dialog > button {
    position: absolute;
    top: 12px;
    right: 16px;
    border: 0;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

.captcha-demo-dialog h3 {
    margin: 0 0 34px;
    font-size: 16px;
    color: #333;
}

.captcha-demo-card {
    width: 360px;
    margin: 42px auto 0;
    border: 1px solid #e1e6f0;
    background: #f7f9fd;
    padding: 34px 36px;
}

.captcha-demo-card.front {
    margin-top: 8px;
}

.login-copyright-logo {
    display: block;
    max-width: 180px;
    max-height: 58px;
    object-fit: contain;
}

.copyright-config-page {
    min-height: calc(100vh - 70px);
    background: transparent;
    padding: 15px 0 80px;
}

.copyright-config-form .layui-card {
    margin: 15px 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.copyright-config-form .layui-card:first-of-type {
    margin-top: 0;
}

.copyright-config-form .layui-card-header {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 20px;
    padding: 0 20px;
    border-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: initial;
}

.copyright-config-form .card-title {
    position: relative;
    padding-left: 10px;
}

.copyright-config-form .card-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 14px;
    border-radius: 5px;
    background: #126bf4;
    transform: translateY(-50%);
}

.copyright-config-form .layui-card-body {
    padding: 20px;
}

.copyright-config-form .layui-form-item {
    display: block;
    min-height: 34px;
    margin-bottom: 10px;
}

.copyright-config-form .layui-form-label {
    float: left;
    width: 200px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
    color: #454545;
}

.copyright-config-form .layui-input-block {
    min-height: 34px;
    margin-left: 200px;
}

.copyright-config-form .len-long {
    width: 450px;
    max-width: 100%;
}

.copyright-config-form .layui-input {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
}

.copyright-config-form textarea.len-long {
    min-height: 100px;
}

.copyright-config-form .upload-img-block {
    position: relative;
    width: 250px;
    height: 120px;
    padding: 10px;
    border: 1px dashed #ddd;
    box-sizing: border-box;
}

.copyright-config-form .upload-img-box {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    overflow: hidden;
}

.copyright-config-form .upload-default {
    border: 0;
    background: transparent;
    padding: 0;
}

.copyright-config-form .upload-default .upload {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    height: 100%;
}

.copyright-config-form .upload-default .upload span {
    font-size: 12px;
}

.copyright-config-form .preview_img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.copyright-config-form .upload-img-box:not(.hover) .operation {
    display: none !important;
}

.copyright-config-form .upload-img-box .operation {
    inset: 0;
    padding: 0;
    align-content: center;
    gap: 0;
}

.copyright-config-form .upload-img-box .operation > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-bottom: 24px;
}

.copyright-config-form .upload-img-box .operation button {
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.copyright-config-form .upload-img-box .operation > div button {
    width: 28px;
    height: 34px;
    padding: 0;
    font-size: 25px;
    line-height: 34px;
}

.copyright-config-form .upload-img-box .operation .replace_img {
    height: 24px;
    padding: 0;
    line-height: 24px;
}

.copyright-config-form .copyright-business-tip {
    margin: 5px 0 0 200px;
    color: #b2b2b2;
    font-size: 12px;
    line-height: 1.6;
}

.copyright-config-form .form-row,
.copyright-config-form .form-message {
    margin-left: 200px;
}

.copyright-config-form .single-filter-box {
    padding: 14px 0;
    background: #fff;
}

.copyright-config-form .single-filter-box .layui-btn {
    height: 34px;
    min-height: 34px;
    padding: 0 18px;
    border-color: #126bf4;
    background: #126bf4;
    color: #fff;
    line-height: 32px;
}

.api-security-page {
    min-height: calc(100vh - 70px);
    background: #fff;
    padding: 24px 0 80px;
}

.api-security-form {
    width: 760px;
    max-width: calc(100% - 32px);
    padding: 0 16px;
}

.api-security-form .layui-form-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

.api-security-form .layui-form-label {
    flex: 0 0 170px;
    width: 170px;
    line-height: 32px;
    padding: 0;
}

.api-security-form .layui-input-block {
    flex: 0 1 auto;
    min-width: 0;
}

.api-security-form .api-secret-line,
.api-security-form .api-time-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.api-security-form .len-long {
    width: 430px;
    max-width: 100%;
}

.api-security-form .len-short {
    width: 130px;
}

.api-security-form .word-aux {
    flex-basis: 100%;
    margin: -6px 0 0 178px;
}

.api-security-form .word-aux p {
    margin: 0;
}

.api-security-form .form-row,
.api-security-form .form-message {
    margin-left: 178px;
}

.upload-config-page,
.cloud-upload-page,
.cloud-upload-form-page {
    min-height: calc(100vh - 70px);
    background: #fff;
    padding: 20px 0 80px;
}

.upload-config-form .layui-card {
    margin: 0 0 12px;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    box-shadow: none;
}

.upload-config-form .layui-card-header {
    height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid #e6e8ef;
    font-size: 15px;
    font-weight: 600;
}

.upload-config-form .layui-card-body {
    padding: 17px 16px 10px;
}

.upload-config-form .layui-form-item,
.cloud-upload-form .layui-form-item {
    display: block;
    min-height: 34px;
    margin-bottom: 20px;
}

.upload-config-form .layui-form-label,
.cloud-upload-form .layui-form-label {
    float: left;
    width: 200px;
    height: 34px;
    padding: 0 10px 0 0;
    line-height: 34px;
    box-sizing: border-box;
}

.upload-config-form .layui-input-block,
.cloud-upload-form .layui-input-block {
    margin-left: 200px;
    min-height: 34px;
    min-width: 0;
}

.upload-config-form .inline-inputs,
.cloud-upload-form .inline-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.upload-config-form .len-short,
.cloud-upload-form .len-short {
    flex: 0 0 120px;
    width: 120px;
}

.upload-config-form .len-long,
.cloud-upload-form .len-long {
    width: 450px;
    max-width: 100%;
}

.upload-config-form .layui-input,
.cloud-upload-form .layui-input {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
}

.upload-config-form .word-aux,
.cloud-upload-form .word-aux {
    margin: 5px 0 0 200px;
    line-height: 1.6;
}

.upload-config-form .old-radio-row,
.cloud-upload-form .old-radio-row {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 22px;
    width: fit-content;
}

.upload-config-form .old-radio-row.wrap,
.cloud-upload-form .old-radio-row.wrap {
    flex-wrap: wrap;
    max-width: 560px;
    row-gap: 10px;
}

.upload-config-form .old-radio-row label,
.cloud-upload-form .old-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.upload-config-form .upload-img-block {
    position: relative;
    width: 250px;
    height: 120px;
    padding: 10px;
    border: 1px dashed #ddd;
    box-sizing: border-box;
}

.upload-config-form .upload-img-box {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: transparent;
}

.upload-config-form .upload-default {
    border: 0;
    background: transparent;
    padding: 0;
}

.upload-config-form .upload-default .upload {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    height: 100%;
}

.upload-config-form .upload-default .upload span {
    font-size: 12px;
}

.upload-config-form .preview_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.upload-config-form .form-row,
.upload-config-form .form-message,
.cloud-upload-form .form-row,
.cloud-upload-form .form-message {
    margin-left: 200px;
}

.cloud-upload-page .old-table-wrap {
    margin: 0 16px;
}

.cloud-upload-page .old-table th,
.cloud-upload-page .old-table td {
    height: 46px;
}

.cloud-upload-page .status {
    display: inline-flex;
    align-items: center;
    height: 22px;
    margin-right: 8px;
    padding: 0 8px;
    border-radius: 2px;
    color: #105cfb;
    background: #edf4ff;
    font-size: 12px;
}

.cloud-upload-page .status.muted {
    color: #8a94a6;
    background: #f2f4f8;
}

.cloud-upload-form {
    margin: 0 16px;
    padding: 18px 16px 80px;
    border: 1px solid #e6e8ef;
    background: #fff;
}

.captcha-demo-title {
    text-align: center;
    font-size: 22px;
    color: #105cfb;
    margin-bottom: 28px;
}

.captcha-demo-row {
    height: 42px;
    border: 1px solid #d8dde8;
    background: #fff;
    margin-bottom: 14px;
}

.captcha-demo-code {
    display: grid;
    grid-template-columns: 1fr 104px;
    gap: 10px;
    border: 0;
    background: transparent;
}

.captcha-demo-code span {
    border: 1px solid #d8dde8;
    background: #fff;
}

.captcha-demo-code strong {
    border: 1px solid #d8dde8;
    background: #f5f8ff;
    color: #1f4f9e;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 42px;
    text-align: center;
}

.captcha-demo-button {
    height: 42px;
    background: #105cfb;
}

.hide {
    display: none !important;
}

.hidden {
    display: none !important;
}

@media (max-width: 1100px) {
    .member-level-form .len-long,
    .selected-goods-table {
        width: min(100%, 420px);
    }

    .member-level-form .layui-form-label {
        grid-column: 1;
        width: 130px;
    }

    .member-level-form .layui-form-item {
        grid-template-columns: 130px minmax(0, 1fr);
    }

    .member-level-form .form-row {
        margin-left: 130px;
    }

    .member-account-summary .finance-summary-body.two-cols,
    .member-account-summary .finance-summary-body {
        flex-wrap: wrap;
    }

    .member-account-summary .finance-summary-body.two-cols .content,
    .member-account-summary .finance-summary-body .content {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #eef0f5;
    }
}

/* 旧后台表单控件校准：修复 label 内星号分行、控件偏大和二级菜单滚动条外露。 */
label.layui-form-label,
.layui-form-label {
    display: block;
    gap: 0;
}

input[type="checkbox"],
input[type="radio"],
.local-delivery-form input[type="checkbox"],
.local-delivery-form input[type="radio"],
.store-old-form .old-radio-row input[type="radio"],
.store-old-form .old-checkbox-row input[type="checkbox"],
.store-old-form .day-wrap input[type="radio"],
.member-edit-form input[type="checkbox"],
.member-edit-form input[type="radio"],
.member-old-table input[type="checkbox"],
.member-label-table input[type="checkbox"],
.member-label-modal-form input[type="checkbox"],
.member-cluster-rule-table input[type="checkbox"],
.member-cluster-rule-table input[type="radio"],
.member-cluster-select-panel input[type="checkbox"],
.member-point-modal-form input[type="radio"],
.member-point-modal-form input[type="checkbox"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    flex: 0 0 14px;
}

.old-switch,
.switch-like {
    width: 42px;
    height: 22px;
    min-height: 22px;
}

.old-switch span,
.switch-like span {
    border-radius: 22px;
}

.old-switch span::after,
.switch-like span::after {
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
}

.old-switch input:checked + span::after,
.switch-like input:checked + span::after {
    transform: translateX(20px);
}

.payment-page,
.payment-form-page {
    padding: 20px 18px;
    background: #fff;
    min-height: calc(100vh - 70px);
}

.payment-page .old-table-wrap {
    border: 0;
    background: #fff;
}

.payment-table th,
.payment-table td {
    height: 54px;
    padding: 10px 14px;
    font-size: 14px;
}

.payment-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.payment-name-cell img {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    display: block;
}

.payment-page .status {
    display: inline-block;
    min-width: 42px;
    color: #999;
}

.payment-page .status.success {
    color: #0fae58;
}

.payment-page .status.warning {
    color: #ff8c1a;
}

.message-notice-page,
.message-recipient-page,
.sms-center-page,
.sms-form-page,
.sms-record-page {
    padding-top: var(--old-page-gap);
}

.message-tips {
    margin: 0 0 var(--old-page-gap);
    padding: 0 var(--old-page-pad);
}

.message-tip {
    min-height: 34px;
    line-height: 22px;
    padding: 6px 12px;
    margin-bottom: 8px;
    color: #ff6a00;
    background: #fff8ee;
    border: 1px solid #ffe0b8;
}

.message-section {
    margin: 0 0 var(--old-page-gap);
    padding: 0 var(--old-page-pad) var(--old-page-pad);
    background: #fff;
    border: 1px solid #e5e9f2;
}

.message-section-title {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    border-bottom: 1px solid #e5e9f2;
}

.message-section-title span::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    background: #1167ff;
}

.message-section-title a {
    color: #1167ff;
    font-weight: 400;
}

.message-block-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: var(--old-page-gap);
    padding-top: var(--old-page-pad);
}

.message-block-card {
    min-height: 168px;
    background: #fff;
    border: 1px solid #e5e9f2;
}

.message-block-card.saving {
    opacity: .72;
}

.message-block-card.save-error {
    border-color: #ff4d4f;
}

.message-block-head {
    min-height: 48px;
    padding: 9px 12px;
    background: #f7f8fa;
    border-bottom: 1px solid #e5e9f2;
}

.message-block-head strong,
.message-block-head span {
    display: block;
    line-height: 20px;
}

.message-block-head span {
    color: #7f8ca3;
    font-size: 12px;
}

.message-block-body {
    padding: 12px;
}

.message-block-body p {
    min-height: 38px;
    margin: 0 0 10px;
    color: #7f8ca3;
    line-height: 19px;
}

.message-channel-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 112px;
    height: 28px;
    margin: 0 12px 4px 0;
}

.message-channel-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.message-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-title-line strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    border-radius: 50%;
    background: #b8c0cc;
    cursor: help;
}

.message-config-link {
    margin-left: auto;
    color: var(--base-color);
    font-weight: 400;
}

.message-channel-row {
    position: relative;
    gap: 7px;
    min-width: 0;
    margin-right: 18px;
    color: #454545;
    cursor: pointer;
}

.message-channel-row i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    color: #a9b0bb;
    font-size: 11px;
    font-style: normal;
    line-height: 13px;
    border: 1px solid #c6ccd5;
    border-radius: 2px;
    background: #fff;
}

.message-channel-row input:checked + i {
    color: #fff;
    border-color: var(--base-color);
    background: var(--base-color);
}

.message-channel-row input:checked + i::before {
    content: "✓";
}

.message-channel-row:hover {
    color: var(--base-color);
}

.message-verify-section .layui-form-item {
    margin: var(--old-page-pad) 0 0;
}

.message-recipient-editor .old-form-inline,
.sms-record-page .old-filter-form,
.message-recipient-page .old-filter-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.message-recipient-page .layui-form-item,
.sms-record-page .layui-form-item {
    margin-bottom: 0;
}

.message-recipient-page .layui-form-label {
    width: auto;
    min-width: 64px;
    padding-left: 0;
}

.message-recipient-page .layui-input-inline.len-long {
    width: 320px;
}

.sms-center-page .old-page-tabs,
.sms-form-page .old-page-tabs,
.sms-record-page .old-page-tabs {
    margin-bottom: var(--old-page-gap);
}

.sms-center-page .status {
    display: inline-block;
    min-width: 42px;
    color: #999;
}

.sms-center-page .status.success {
    color: #0fae58;
}

.sms-center-page .status.warning {
    color: #ff8c1a;
}

.sms-provider-desc {
    padding-left: 130px;
}

.sms-record-detail {
    position: relative;
    display: inline-block;
}

.sms-record-detail summary {
    color: #1167ff;
    cursor: pointer;
    list-style: none;
}

.sms-record-detail summary::-webkit-details-marker {
    display: none;
}

.sms-record-detail div {
    position: absolute;
    right: 0;
    z-index: 5;
    width: 320px;
    padding: 10px;
    text-align: left;
    color: #333;
    background: #fff;
    border: 1px solid #d8dee9;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
}

.sms-record-detail p {
    margin: 0 0 6px;
    line-height: 20px;
}

.site-deploy-page,
.system-cache-page,
.system-database-page,
.system-auth-page {
    padding-top: var(--old-page-gap);
}

.theme-tone-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.theme-tone-item {
    min-width: 86px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #e5e9f2;
    border-radius: 3px;
    cursor: pointer;
}

.theme-tone-item.active {
    border-color: #1167ff;
    color: #1167ff;
}

.theme-tone-item input {
    display: none;
}

.theme-tone-item span {
    width: 24px;
    height: 16px;
    border-radius: 2px;
}

.system-terminal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: var(--old-page-gap);
    margin-bottom: var(--old-page-gap);
}

.system-terminal-card .layui-card-body {
    min-height: 118px;
}

.system-terminal-row {
    display: flex;
    align-items: center;
    min-height: 34px;
    line-height: 22px;
}

.system-terminal-row span {
    width: 88px;
    text-align: right;
    color: #666;
}

.system-terminal-row em {
    font-style: normal;
}

.system-terminal-row a {
    color: #1167ff;
}

.site-deploy-overall .layui-card-body {
    padding: 18px 20px 6px;
}

.site-deploy-jump-row,
.site-deploy-theme-row {
    margin-bottom: 18px;
}

.site-deploy-jump-row .layui-form-label,
.site-deploy-theme-row .layui-form-label {
    width: 220px;
}

.site-deploy-jump-row .layui-input-block,
.site-deploy-theme-row .layui-input-block {
    margin-left: 220px;
}

.site-deploy-jump-row .word-aux {
    margin-left: 220px;
    color: #999;
    font-size: 12px;
    line-height: 22px;
}

.site-deploy-terminal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.site-deploy-terminal-grid .system-terminal-card {
    min-width: 0;
    margin: 0;
}

.system-terminal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.system-terminal-head .text-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #1167ff;
    cursor: pointer;
    font-size: 14px;
}

.system-terminal-state {
    margin: 8px 0 0 88px;
    color: #0fae58;
    font-size: 12px;
    line-height: 20px;
}

.system-terminal-state.pending,
.system-terminal-unavailable {
    color: #999;
}

.system-terminal-unavailable {
    margin: 4px 0 0 88px;
    font-size: 12px;
    line-height: 20px;
}

.site-deploy-actions {
    margin-top: 20px;
}

.site-deploy-modal[hidden] {
    display: none;
}

.site-deploy-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-deploy-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}

.site-deploy-modal-panel {
    position: relative;
    z-index: 1;
    width: 720px;
    max-width: calc(100vw - 32px);
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

.site-deploy-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 20px;
    border-bottom: 1px solid #e5e9f2;
}

.site-deploy-modal-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.site-deploy-modal-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8993a5;
    cursor: pointer;
    font-size: 22px;
    line-height: 28px;
}

.site-deploy-terminal-form {
    padding: 20px 24px 24px;
}

.site-deploy-tip {
    margin-bottom: 18px;
    padding: 10px 14px;
    background: #f7f8fa;
    color: #7b8493;
    font-size: 12px;
    line-height: 22px;
}

.site-deploy-tip p {
    margin: 0;
}

.site-deploy-terminal-form .layui-form-label {
    width: 110px;
}

.site-deploy-terminal-form .layui-input-block {
    margin-left: 110px;
}

.site-deploy-terminal-form .word-aux {
    margin-left: 110px;
    color: #999;
    font-size: 12px;
    line-height: 22px;
}

.deploy-domain-input {
    width: 440px;
    max-width: 100%;
}

.site-deploy-build-row .layui-btn-disabled {
    color: #aab2c0;
    background: #f1f3f6;
    border-color: #e3e7ee;
    cursor: not-allowed;
}

.site-deploy-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 110px;
    padding-top: 8px;
}

.site-deploy-modal-actions .form-message {
    color: #0fae58;
    font-size: 12px;
}

.site-deploy-modal-actions .form-message.error,
.site-deploy-form .form-message.error {
    color: #e33;
}

@media (max-width: 1100px) {
    .site-deploy-terminal-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 760px) {
    .site-deploy-terminal-grid {
        grid-template-columns: 1fr;
    }

    .site-deploy-jump-row .layui-form-label,
    .site-deploy-theme-row .layui-form-label,
    .site-deploy-jump-row .layui-input-block,
    .site-deploy-theme-row .layui-input-block,
    .site-deploy-jump-row .word-aux {
        margin-left: 0;
        width: auto;
    }

    .site-deploy-terminal-form .layui-form-label,
    .site-deploy-terminal-form .layui-input-block,
    .site-deploy-terminal-form .word-aux,
    .site-deploy-modal-actions {
        margin-left: 0;
    }
}

.app-channel-page,
.app-channel-setting-page,
.app-channel-config-page,
.app-channel-feature-page {
    padding-top: var(--old-page-gap);
}

.app-channel-head,
.app-channel-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 86px;
    margin: 0 0 var(--old-page-gap);
    padding: 0 24px;
    background: #fff;
    border: 1px solid #e5e9f2;
}

.app-channel-head h2,
.app-channel-summary h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.app-channel-head p,
.app-channel-summary p {
    margin: 0;
    color: #7f8ca3;
    line-height: 22px;
}

.app-channel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: var(--old-page-gap);
}

.app-channel-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 132px;
    padding: 24px 22px;
    color: #333;
    background: #fff;
    border: 1px solid #e5e9f2;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-channel-card:hover,
.app-entry-card:hover {
    border-color: #1167ff;
    box-shadow: 0 6px 18px rgba(17, 103, 255, .08);
    transform: translateY(-1px);
}

.app-channel-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    background: #f5f7fb;
    border: 1px solid #eef1f6;
    border-radius: 4px;
}

.app-channel-icon img,
.app-channel-summary-main img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.app-channel-info {
    flex: 1 1 auto;
    min-width: 0;
}

.app-channel-info strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
}

.app-channel-info em,
.app-channel-info small {
    display: block;
    color: #7f8ca3;
    font-style: normal;
    line-height: 21px;
}

.app-channel-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 24px;
    padding: 0 9px;
    color: #8a94a6;
    background: #f5f6fa;
    border: 1px solid #e5e9f2;
    border-radius: 2px;
    white-space: nowrap;
}

.app-channel-status.success {
    color: #0fae58;
    background: #effaf4;
    border-color: #c8efd9;
}

.app-channel-status.warning {
    color: #d98200;
    background: #fff8ed;
    border-color: #ffe0b8;
}

.app-channel-summary-main {
    display: flex;
    align-items: center;
}

.app-channel-summary-main img {
    margin-right: 14px;
}

.app-channel-process,
.app-channel-entry {
    margin-bottom: var(--old-page-gap);
}

.app-channel-process .layui-card-body {
    padding: 20px;
}

.app-channel-process .progress-wrap {
    display: flex;
    align-items: center;
    min-height: 120px;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

.app-channel-process .progress-point {
    flex: 1 1 0;
}

.app-channel-process .progress-point-pic {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 30px;
    text-align: center;
}

.app-channel-process .progress-point-pic img {
    max-width: 100%;
    max-height: 100%;
}

.app-channel-process .progress-point-text {
    margin: 0;
    color: #333;
    line-height: 22px;
}

.app-channel-process .progress-point-arrow {
    flex: 0 0 30px;
    width: 30px;
    line-height: 30px;
}

.app-channel-process .progress-point-arrow img {
    max-width: 100%;
    vertical-align: middle;
}

.app-process-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.app-process-item {
    position: relative;
    min-height: 46px;
    display: flex;
    align-items: center;
}

.app-process-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 22px;
    width: calc(100% - 88px);
    height: 1px;
    background: #dce3ef;
}

.app-process-item span {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: #1167ff;
    background: #eef4ff;
    border: 1px solid #bdd1ff;
    border-radius: 50%;
}

.app-process-item em {
    position: relative;
    z-index: 1;
    padding-right: 8px;
    font-style: normal;
    color: #333;
    background: #fff;
}

.app-channel-entry .layui-card-body {
    display: block;
    padding: 0;
}

.app-channel-entry .item-block-parent {
    border-radius: 0 0 5px 5px;
}

.app-channel-entry .item-block.disabled {
    color: #8a94a6;
    cursor: default;
}

.app-channel-entry .item-block.disabled:hover {
    color: #8a94a6;
    background: #f7f8fa;
}

.app-channel-domain-box {
    width: 720px;
    margin: 8px 0 0 130px;
    padding: 12px 14px;
    color: #7f8ca3;
    background: #f7f8fa;
    border: 1px solid #e5e9f2;
}

.app-channel-domain-box p {
    margin: 0;
    line-height: 24px;
}

.app-channel-domain-box span {
    display: inline-block;
    min-width: 130px;
    color: #333;
}

.app-channel-config-desc {
    padding-left: 130px;
}

.channel-image-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.channel-image-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    padding: 0;
    color: #999;
    background: #fafafa;
    border: 1px dashed #d9dfe9;
    cursor: pointer;
}

.channel-image-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.channel-copy-row .layui-input-inline {
    width: 520px;
}

.channel-copy-row .layui-btn {
    vertical-align: top;
}

.channel-image-picker .word-aux {
    flex-basis: 100%;
    margin: 0;
}

.app-feature-intro {
    color: #7f8ca3;
    line-height: 24px;
}

.app-feature-intro p {
    margin: 0;
}

.app-feature-warning {
    margin-top: 8px !important;
    color: #d98200;
}

.app-feature-warning a {
    margin-left: 8px;
    color: #1167ff;
}

.app-channel-feature-form .layui-card,
.app-channel-feature-page .app-feature-table {
    margin-bottom: var(--old-page-gap);
}

.app-inline-edit-table th,
.app-inline-edit-table td {
    padding: 10px 12px;
    vertical-align: middle;
}

.app-inline-edit-table .layui-input,
.app-inline-edit-table select {
    width: 100%;
    height: 34px;
}

.app-inline-edit-table select {
    padding: 0 8px;
    border: 1px solid #d8dee9;
    background: #fff;
}

.legacy-material-flat-editor {
    display: none;
}

.app-material-manager {
    margin-bottom: var(--old-page-gap);
    padding: 20px 24px 24px;
    background: #fff;
    border: 1px solid #e5e9f2;
}

.app-material-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 44px;
    margin-bottom: 18px;
}

.app-material-actions,
.app-material-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-material-tabs {
    align-self: stretch;
    border-bottom: 1px solid #eee;
}

.app-material-tabs button {
    height: 44px;
    padding: 0 15px;
    color: #333;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.app-material-tabs button:hover,
.app-material-tabs button.active {
    color: var(--base-color);
    border-bottom-color: var(--base-color);
}

.app-material-row {
    display: grid;
    grid-template-columns: minmax(380px, 1fr) 150px 150px 180px;
    align-items: center;
    min-height: 76px;
    border-bottom: 1px solid #eee;
}

.app-material-row.head {
    min-height: 46px;
    color: #606266;
    background: #f7f7f7;
}

.app-material-cell {
    min-width: 0;
    padding: 10px 14px;
}

.app-material-preview {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.app-material-type {
    flex: 0 0 auto;
    padding: 2px 5px;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    background: #1aad19;
}

.app-material-type.text {
    background: #999;
}

.app-material-title {
    display: block;
    overflow: hidden;
    color: var(--base-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.app-material-summary {
    display: block;
    overflow: hidden;
    color: #777;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-material-cover {
    flex: 0 0 54px;
    width: 54px;
    height: 42px;
    object-fit: cover;
    border: 1px solid #eee;
}

.app-material-actions-cell {
    white-space: nowrap;
}

.app-material-actions-cell button {
    margin-right: 10px;
    padding: 0;
    color: var(--base-color);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.app-material-actions-cell button:last-child {
    margin-right: 0;
    color: #ff4d4f;
}

.app-material-empty {
    padding: 100px 20px;
    color: #999;
    text-align: center;
}

.app-material-editor {
    padding: 4px 8px 12px;
}

.app-material-editor .layui-form-item {
    margin-bottom: 14px;
}

.app-material-editor .layui-form-label {
    width: 78px;
    padding: 9px 12px 9px 0;
    text-align: left;
}

.app-material-editor .layui-input-block {
    margin-left: 90px;
}

.app-material-editor .material-content {
    min-height: 130px;
}

@media (max-width: 1000px) {
    .app-material-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-material-row {
        grid-template-columns: minmax(240px, 1fr) 120px 120px 140px;
    }
}

.app-share-list {
    overflow: hidden;
}

.app-share-card {
    display: inline-block;
    vertical-align: top;
    width: 300px;
    height: 192px;
    margin: 0 8px 8px 0;
    padding: 0;
    border: 1px solid #eeeeee;
    border-radius: 3px;
    box-sizing: border-box;
}

.app-share-card .layui-card-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    padding: 0 15px;
    border-bottom: 1px solid #eeeeee !important;
    color: #606266;
    font-size: 14px;
    font-weight: 400;
    box-sizing: border-box;
}

.app-share-card .layui-card-header .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-share-edit {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.app-share-card .layui-card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: calc(100% - 55px);
    padding: 18px 20px 20px;
    color: rgba(0, 0, 0, .6);
    box-sizing: border-box;
}

.app-share-title {
    overflow: hidden;
    margin: 0;
    color: #303133;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-share-content {
    display: flex;
    min-height: 70px;
}

.app-share-text {
    flex: 1;
    overflow: hidden;
    padding-right: 10px;
    color: #909399;
    line-height: 1.6;
    word-break: break-word;
}

.app-share-image {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border: 1px solid #f1f1f1;
    background-color: #ececec;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    line-height: 70px;
}

.app-share-image span {
    color: #c0c0c0;
    font-weight: bold;
}

.app-share-empty {
    padding: 48px 20px;
    color: #999;
    text-align: center;
}

.app-share-editor .layui-input-inline {
    width: 300px;
}

.app-share-editor .layui-input-inline.textarea {
    width: 300px;
}

.app-share-editor .layui-textarea {
    min-height: 70px;
}

.app-package-tips {
    margin-top: 20px;
}

.app-package-wrap {
    display: flex;
    gap: 30px;
    margin-top: 50px;
}

.app-package-column {
    flex: 1;
    min-width: 0;
    border: 1px solid #f1f1f1;
}

.app-package-column .layui-card {
    margin: 0;
    border: 0;
}

.app-package-info {
    color: #606266;
    font-size: 12px;
    text-align: center;
}

.app-package-qrcode,
.app-package-qrcode-empty {
    display: block;
    width: 130px;
    height: 130px;
    margin: 30px auto;
    border: 1px solid #f1f1f1;
    background: #fafafa;
    box-sizing: border-box;
    object-fit: contain;
}

.app-package-qrcode-empty {
    padding-top: 54px;
    color: #999;
    font-size: 12px;
}

.app-package-info dl {
    display: flex;
    margin: 0;
    line-height: 30px;
}

.app-package-info dt,
.app-package-info dd {
    flex: 1;
    margin: 0;
}

.app-package-info dt {
    width: 100px;
    color: #999;
    text-align: right;
}

.app-package-info dd {
    overflow: hidden;
    padding-left: 30px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-package-download .layui-timeline {
    padding-left: 40px;
}

.app-package-download .layui-timeline-item {
    padding-bottom: 40px;
}

.app-package-download .layui-timeline-item:last-child {
    padding-bottom: 0;
}

.app-package-download .layui-timeline-title {
    margin-bottom: 5px;
    font-size: 12px;
}

.app-package-download .layui-timeline-content p,
.app-package-boundary {
    font-size: 12px;
}

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

.app-package-record {
    margin-top: var(--old-page-gap);
}

@media (max-width: 900px) {
    .app-package-wrap {
        flex-direction: column;
        margin-top: 24px;
    }
}

.wechat-menu-card .layui-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wechat-menu-card .layui-card-body {
    padding: 20px;
}

.wechat-menu-editor {
    display: grid;
    grid-template-columns: 340px minmax(560px, 1fr);
    gap: 20px;
    min-height: 570px;
    padding: 20px;
    background: #f4f5f9;
    border: 1px solid #e7e7eb;
}

.wechat-menu-preview-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wechat-mobile-preview {
    position: relative;
    width: 320px;
    height: 570px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e7e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wechat-mobile-head {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 58px;
    padding-bottom: 9px;
    color: #fff;
    font-size: 15px;
    background: #1d1d1d;
}

.wechat-mobile-body {
    position: absolute;
    top: 58px;
    right: 0;
    bottom: 51px;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(#fff, #fafafa);
}

.wechat-preview-main {
    display: flex;
    width: 100%;
    min-height: 51px;
    border-top: 1px solid #e7e7eb;
    background: #fafafa;
}

.wechat-preview-main button,
.wechat-preview-submenu button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 5px;
    color: #616161;
    font-size: 13px;
    background: transparent;
    border: 0;
    border-left: 1px solid #e7e7eb;
    cursor: pointer;
}

.wechat-preview-main button:first-child {
    border-left: 0;
}

.wechat-preview-main button.active,
.wechat-preview-submenu button.active {
    color: var(--base-color);
    background: #eef5ff;
}

.wechat-preview-placeholder {
    align-self: center;
    color: #aaa;
    font-size: 12px;
}

.wechat-preview-submenu {
    position: absolute;
    right: 0;
    bottom: 51px;
    left: 0;
    display: flex;
    min-height: 42px;
    padding: 0 5px;
    background: #fafafa;
    border: 1px solid #d0d0d0;
}

.wechat-preview-submenu button {
    border-left: 1px solid #d0d0d0;
}

.wechat-preview-submenu button:first-child {
    border-left: 0;
}

.wechat-mobile-foot {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-around;
    color: #aaa;
    font-size: 12px;
    border-top: 1px solid #e7e7eb;
    background: #fafafa;
}

.wechat-preview-main + .wechat-mobile-foot {
    display: none;
}

.wechat-menu-preview-column > .word-aux {
    width: 320px;
    margin-top: 12px;
    line-height: 20px;
}

.wechat-menu-builder {
    min-width: 0;
    background: #f4f5f9;
    border: 1px solid #e7e7eb;
}

.wechat-menu-builder-head,
.wechat-menu-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wechat-menu-builder-head {
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid #e7e7eb;
}

.wechat-menu-builder-body {
    display: grid;
    grid-template-columns: 210px minmax(300px, 1fr);
    min-height: 516px;
}

.wechat-menu-root-list {
    padding: 15px;
    border-right: 1px solid #e7e7eb;
    background: #fff;
}

.wechat-menu-root,
.wechat-menu-child {
    margin-bottom: 8px;
    border: 1px solid #e7e7eb;
    background: #fff;
}

.wechat-menu-root.active,
.wechat-menu-child.active {
    border-color: var(--base-color);
}

.wechat-menu-root-line,
.wechat-menu-child {
    display: flex;
    align-items: center;
}

.wechat-menu-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px;
    overflow: hidden;
    color: #333;
    font-size: 13px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fff;
    border: 0;
    cursor: pointer;
}

.wechat-menu-select:hover,
.wechat-menu-root.active > .wechat-menu-root-line .wechat-menu-select,
.wechat-menu-child.active .wechat-menu-select {
    color: var(--base-color);
    background: #f2f7ff;
}

.wechat-menu-delete {
    flex: 0 0 30px;
    width: 30px;
    height: 32px;
    color: #a7aebc;
    font-size: 18px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.wechat-menu-delete:hover {
    color: #ff4d4f;
}

.wechat-menu-children {
    padding: 8px 8px 1px 24px;
    background: #fafafa;
    border-top: 1px solid #e7e7eb;
}

.wechat-menu-child {
    margin-bottom: 7px;
}

.wechat-menu-list-empty,
.wechat-menu-detail-empty {
    padding: 30px 12px;
    color: #999;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
}

.wechat-menu-detail {
    padding: 20px 24px;
    background: #fff;
}

.wechat-menu-detail-head {
    min-height: 38px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e7e7eb;
}

.wechat-menu-detail-head > span {
    display: inline-flex;
    gap: 8px;
}

.wechat-menu-field {
    margin-bottom: 15px;
}

.wechat-menu-field > label {
    display: block;
    margin-bottom: 7px;
    color: #606266;
    font-size: 13px;
}

.wechat-menu-field .layui-input,
.wechat-menu-field .layui-textarea {
    width: 100%;
    box-sizing: border-box;
}

.wechat-menu-field .word-aux {
    margin-top: 5px;
}

.wechat-menu-content-fields {
    padding-top: 4px;
}

.wechat-menu-note {
    margin-top: 12px;
}

@media (max-width: 1180px) {
    .wechat-menu-editor {
        grid-template-columns: 320px minmax(520px, 1fr);
        gap: 14px;
        padding: 14px;
    }

    .wechat-menu-builder-body {
        grid-template-columns: 190px minmax(280px, 1fr);
    }
}

.app-feature-table .table-toolbar {
    padding: 16px 24px;
}

.store-user-page,
.store-user-log-page,
.store-user-role-page {
    padding-top: var(--old-page-gap);
}

.store-user-create-form .layui-form-item,
.store-role-create-form .layui-form-item,
.store-user-log-page .old-filter-form .layui-form-item {
    margin-bottom: 0;
}

.store-user-create-form .layui-form-item + .layui-form-item {
    margin-top: 10px;
}

.store-user-page .old-table-wrap,
.store-user-log-page .old-table-wrap,
.store-user-role-page .old-table-wrap {
    margin-bottom: var(--old-page-gap);
}

.store-user-tag {
    display: inline-block;
    height: 20px;
    line-height: 18px;
    margin-left: 8px;
    padding: 0 6px;
    color: #1167ff;
    border: 1px solid #bdd1ff;
    background: #eef4ff;
    border-radius: 2px;
    font-size: 12px;
}

.table-action-link {
    padding: 0;
    color: #1167ff;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.store-role-permission-box {
    display: flex;
    align-items: flex-start;
    padding: 12px 0 0 110px;
}

.store-role-permission-box .permission-title {
    flex: 0 0 86px;
    line-height: 30px;
    color: #333;
}

.store-settlement-page {
    padding-top: var(--old-page-gap);
}

.store-settlement-page .old-page-tabs {
    margin-bottom: var(--old-page-gap);
}

.cashier-order-page {
    padding-top: var(--old-page-gap);
}

.cashier-order-screen .order-filter-form {
    padding: 15px 0 12px;
}

.card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cashier-order-screen .order-filter-actions {
    justify-content: flex-start;
    margin-top: 12px;
}

.cashier-date-button {
    height: 32px;
    min-height: 32px;
    margin-left: 10px;
    padding: 0 14px;
    line-height: 30px;
}

.cashier-order-batch-bar {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    gap: 14px;
    border-bottom: 1px solid #f1f1f1;
}

.cashier-order-batch-bar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cashier-order-batch-bar [data-order-action-message] {
    color: #1677ff;
}

.cashier-old-table input[type="checkbox"],
.cashier-order-batch-bar input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}

.cashier-old-table .order-product-image {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
}

.cashier-old-table .order-product-info strong {
    max-width: 260px;
}

.cashier-old-table .text-color-sub {
    margin-top: 4px;
}

.cashier-old-table .table-btn {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.cashier-order-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 118px;
    color: #999;
}

.cashier-order-buyer-remark td {
    padding: 5px 10px !important;
    background: #fff;
}

.cashier-order-shop-remark td {
    padding: 5px 10px !important;
    color: #d09b4c;
    background: #fff9df;
}

.store-settlement-summary {
    margin-bottom: var(--old-page-gap);
}

.store-settlement-stat {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    border: 1px solid #eef0f5;
    background: #fff;
}

.store-settlement-stat > div {
    min-height: 74px;
    padding: 16px 20px;
    border-right: 1px solid #eef0f5;
}

.store-settlement-stat > div:last-child {
    border-right: 0;
}

.store-settlement-stat span {
    display: block;
    margin-bottom: 8px;
    color: #6b7891;
}

.store-settlement-stat strong {
    display: block;
    color: #101828;
    font-size: 22px;
    line-height: 28px;
}

.store-settlement-page .old-filter-form .layui-form-item,
.store-withdraw-apply-form .layui-form-item {
    margin-bottom: 0;
}

.store-withdraw-apply-form .layui-form-item + .layui-form-item {
    margin-top: 10px;
}

.store-withdraw-apply-box .old-section-title {
    margin-bottom: 12px;
    padding-left: 8px;
    border-left: 3px solid #1167ff;
    color: #101828;
    font-weight: 600;
}

.store-withdraw-apply-box .old-empty-line {
    color: #8a94a6;
}

.store-settlement-table th,
.store-settlement-table td {
    padding: 12px 14px;
}

.store-settlement-table .text {
    max-width: 520px;
    line-height: 20px;
    word-break: break-all;
}

.store-member-dashboard,
.store-member-list,
.store-member-detail {
    padding-top: var(--old-page-gap);
}

.store-member-dashboard-grid,
.store-member-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: var(--old-page-gap);
}

.store-member-detail-grid {
    grid-template-columns: 1fr;
}

.store-member-ratio-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 60px 70px;
    gap: 12px;
    align-items: center;
    height: 34px;
    color: #333;
}

.store-member-ratio-row + .store-member-ratio-row {
    border-top: 1px solid #f1f3f7;
}

.store-member-ratio-row strong,
.store-member-ratio-row em {
    font-style: normal;
    text-align: right;
}

.store-member-table th,
.store-member-table td {
    padding: 12px 14px;
    vertical-align: top;
}

.store-member-detail-head {
    display: grid;
    grid-template-columns: 84px minmax(240px, 1fr) minmax(220px, 1fr);
    gap: 22px;
    align-items: start;
}

.store-cashier-page {
    padding-top: var(--old-page-gap);
}

.cashier-topbar,
.cashier-receipt,
.cashier-goods,
.cashier-pay {
    background: #fff;
    border: 1px solid #e5e9f2;
}

.cashier-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 74px;
    margin-bottom: var(--old-page-gap);
    padding: 14px 18px;
}

.cashier-topbar h2 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
}

.cashier-topbar p {
    margin: 0;
    color: #7d8799;
    font-size: 13px;
}

.cashier-top-stats {
    display: flex;
    align-items: center;
    gap: 28px;
    color: #7d8799;
}

.cashier-top-stats span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 90px;
}

.cashier-top-stats strong {
    color: #101828;
    font-size: 20px;
    line-height: 24px;
}

.cashier-workbench {
    display: grid;
    grid-template-columns: 360px minmax(460px, 1fr) 300px;
    gap: var(--old-page-gap);
    align-items: stretch;
    min-height: calc(100vh - 190px);
}

.cashier-receipt,
.cashier-goods,
.cashier-pay {
    display: flex;
    flex-direction: column;
    min-height: 640px;
}

.cashier-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid #eef0f5;
}

.cashier-panel-title.compact {
    padding: 0;
    border-bottom: 0;
}

.cashier-panel-title strong {
    color: #101828;
    font-size: 15px;
    font-weight: 600;
}

.cashier-receipt-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cashier-receipt-actions em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #1167ff;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    line-height: 16px;
}

.cashier-consume-time {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #eef0f5;
}

.cashier-consume-time label {
    flex: 0 0 74px;
    color: #333;
}

.cashier-consume-time .layui-input {
    height: 34px;
}

.cashier-member-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 16px;
    padding: 12px;
    border: 1px solid #e5e9f2;
    background: #f8fafc;
}

.cashier-member-card div {
    min-width: 0;
}

.cashier-member-card strong,
.cashier-member-card em,
.cashier-muted {
    display: block;
}

.cashier-member-card strong {
    margin-top: 4px;
    color: #101828;
    font-size: 16px;
    font-weight: 600;
}

.cashier-member-card em,
.cashier-muted {
    color: #7d8799;
    font-style: normal;
    font-size: 12px;
}

.cashier-cart {
    flex: 1;
    min-height: 260px;
    padding: 0 16px 16px;
    overflow: auto;
}

.cashier-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    width: 100%;
    color: #8a94a6;
    font-size: 14px;
}

.cashier-empty.compact {
    min-height: 72px;
}

.cashier-empty.error {
    color: #e64646;
}

.cashier-cart-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eef0f5;
}

.cashier-cart-img {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #eef0f5;
    background: #f5f7fb;
    color: #8a94a6;
    font-size: 12px;
}

.cashier-cart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cashier-cart-main {
    min-width: 0;
}

.cashier-cart-main strong,
.cashier-cart-main em,
.cashier-cart-main span {
    display: block;
}

.cashier-cart-main strong {
    color: #101828;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cashier-cart-main em {
    margin-top: 3px;
    color: #8a94a6;
    font-style: normal;
    font-size: 12px;
}

.cashier-cart-main span {
    margin-top: 4px;
    color: #f23c3c;
    font-size: 13px;
}

.cashier-cart-num {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cashier-cart-num button,
.cashier-cart-num input {
    width: 28px;
    height: 26px;
    border: 1px solid #d8dee9;
    background: #fff;
    text-align: center;
}

.cashier-cart-num input {
    width: 56px;
}

.cashier-cart-num .delete {
    margin-left: auto;
    color: #e64646;
}

.cashier-total-box {
    padding: 12px 16px 16px;
    border-top: 1px solid #eef0f5;
    background: #fbfcff;
}

.cashier-total-box div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    color: #6b7891;
}

.cashier-total-box strong {
    color: #101828;
    font-size: 16px;
}

.cashier-pay-money strong {
    color: #f23c3c;
    font-size: 24px;
}

.cashier-goods {
    padding: 16px;
}

.cashier-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.cashier-search-input {
    display: flex;
    flex: 1;
    min-width: 0;
}

.cashier-search-input .layui-input {
    height: 36px;
    border-right: 0;
}

.cashier-search-input button {
    width: 42px;
    height: 36px;
    border: 1px solid #d8dee9;
    background: #fff;
    color: #101828;
}

.cashier-goods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
    align-content: start;
    flex: 1;
    overflow: auto;
}

.cashier-goods-card {
    min-height: 166px;
    padding: 10px;
    border: 1px solid #e5e9f2;
    background: #fff;
    text-align: left;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.cashier-goods-card:hover {
    border-color: #1167ff;
    box-shadow: 0 4px 12px rgba(17, 103, 255, .12);
    transform: translateY(-1px);
}

.cashier-goods-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 86px;
    margin-bottom: 8px;
    background: #f5f7fb;
    color: #8a94a6;
}

.cashier-goods-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cashier-goods-card strong,
.cashier-goods-card em,
.cashier-goods-card small {
    display: block;
}

.cashier-goods-card strong {
    height: 36px;
    color: #101828;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    overflow: hidden;
}

.cashier-goods-card em {
    color: #f23c3c;
    font-style: normal;
    font-size: 14px;
}

.cashier-goods-card small {
    margin-top: 4px;
    color: #8a94a6;
}

.cashier-pay {
    padding: 0 16px 16px;
}

.cashier-pay .cashier-panel-title {
    margin: 0 -16px 14px;
}

.cashier-pay-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.cashier-pay-method {
    position: relative;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dee9;
    background: #fff;
    cursor: pointer;
}

.cashier-pay-method input {
    position: absolute;
    opacity: 0;
}

.cashier-pay-method.active {
    border-color: #1167ff;
    color: #1167ff;
}

.cashier-cash-received {
    margin: -2px 0 16px;
    padding: 10px 12px;
    border: 1px solid #e5e9f2;
    background: #fafbfe;
}

.cashier-cash-received[hidden] {
    display: none;
}

.cashier-cash-received label {
    display: block;
    margin-bottom: 7px;
    color: #333;
    font-size: 13px;
}

.cashier-cash-received-input {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cashier-cash-received-input > span {
    color: #333;
}

.cashier-cash-received-input .layui-input {
    height: 34px;
}

.cashier-cash-received small {
    display: block;
    margin-top: 6px;
    color: #1167ff;
}

.store-cashier-recharge {
    padding-top: var(--old-page-gap);
}

.cashier-recharge-header,
.cashier-recharge-card {
    border: 1px solid #e5e9f2;
    background: #fff;
}

.cashier-recharge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 74px;
    margin-bottom: var(--old-page-gap);
    padding: 14px 18px;
}

.cashier-recharge-header h2 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 18px;
    font-weight: 600;
}

.cashier-recharge-header p {
    margin: 0;
    color: #7d8799;
    font-size: 13px;
}

.cashier-recharge-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.4fr) minmax(280px, .9fr);
    gap: var(--old-page-gap);
    align-items: start;
}

.cashier-recharge-card {
    min-height: 340px;
    padding: 0 16px 18px;
}

.cashier-recharge-title {
    min-height: 44px;
    display: flex;
    align-items: center;
    margin: 0 -16px 14px;
    padding: 0 16px;
    border-bottom: 1px solid #eef0f5;
}

.cashier-recharge-member-search {
    display: flex;
    gap: 8px;
}

.cashier-recharge-member-search .layui-input {
    min-width: 0;
}

.cashier-recharge-member-results {
    min-height: 100px;
    margin-top: 12px;
}

.cashier-recharge-member-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 6px;
    padding: 9px 10px;
    border: 1px solid #e5e9f2;
    background: #fff;
    color: #333;
    text-align: left;
    cursor: pointer;
}

.cashier-recharge-member-row:hover,
.cashier-recharge-package:hover {
    border-color: #1167ff;
}

.cashier-recharge-member-row span,
.cashier-recharge-selected,
.cashier-recharge-package span,
.cashier-recharge-package small {
    color: #7d8799;
}

.cashier-recharge-selected {
    margin-top: 14px;
    padding: 10px;
    background: #f5f7fb;
}

.cashier-recharge-switch,
.cashier-recharge-pay-types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 14px;
}

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

.cashier-recharge-package {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 88px;
    padding: 10px;
    border: 1px solid #d8dee9;
    cursor: pointer;
}

.cashier-recharge-package.active {
    border-color: #1167ff;
    background: #f5f8ff;
}

.cashier-recharge-package input,
.cashier-recharge-pay input {
    position: absolute;
    opacity: 0;
}

.cashier-recharge-package strong {
    color: #1167ff;
    font-size: 18px;
}

.cashier-recharge-package small {
    min-height: 16px;
}

.cashier-recharge-custom[hidden],
.cashier-recharge-cash[hidden] {
    display: none;
}

.cashier-recharge-custom,
.cashier-recharge-cash,
.cashier-recharge-remark {
    display: block;
    margin-top: 14px;
}

.cashier-recharge-custom span,
.cashier-recharge-cash > span,
.cashier-recharge-remark > span {
    display: block;
    margin-bottom: 7px;
    color: #333;
}

.cashier-recharge-pay {
    position: relative;
    padding: 9px 12px;
    border: 1px solid #d8dee9;
    cursor: pointer;
}

.cashier-recharge-pay.active {
    border-color: #1167ff;
    color: #1167ff;
}

.cashier-recharge-cash small {
    display: block;
    margin-top: 6px;
    color: #1167ff;
}

.cashier-recharge-total {
    margin-top: 18px;
    color: #333;
}

.cashier-recharge-total strong {
    color: #e94040;
    font-size: 24px;
}

.cashier-recharge-total em {
    font-style: normal;
}

.cashier-recharge-submit {
    width: 100%;
    margin-top: 14px;
}

.cashier-recharge-result {
    min-height: 22px;
    margin-top: 10px;
    color: #16a05d;
    line-height: 22px;
}

.cashier-recharge-disabled {
    padding: 46px 20px;
    border: 1px solid #e5e9f2;
    background: #fff;
    color: #8a94a6;
    text-align: center;
}

.cashier-remark {
    display: block;
    margin-bottom: 16px;
}

.cashier-remark span {
    display: block;
    margin-bottom: 8px;
    color: #333;
}

.cashier-submit {
    width: 100%;
    height: 42px;
    margin-bottom: 18px;
}

.cashier-code-tip {
    margin: 0 0 12px;
    color: #8a94a6;
    line-height: 22px;
}

.cashier-code-confirm {
    width: 100%;
    margin-top: 14px;
}

.cashier-recent {
    flex: 1;
    overflow: auto;
}

.cashier-recent-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f5;
    color: #333;
}

.cashier-recent-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-recent-row strong {
    color: #f23c3c;
    font-size: 14px;
}

.cashier-recent-row em {
    grid-column: 1 / -1;
    color: #8a94a6;
    font-style: normal;
    font-size: 12px;
}

.cashier-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 24, 40, .35);
}

.cashier-modal[hidden] {
    display: none;
}

.cashier-modal-box {
    width: 560px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 80px);
    padding: 0 16px 16px;
    overflow: auto;
    background: #fff;
    border: 1px solid #e5e9f2;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .16);
}

.cashier-modal-box.small {
    width: 360px;
}

.cashier-modal-box.pending-box {
    width: 660px;
}

.cashier-modal-box .cashier-panel-title {
    margin: 0 -16px 14px;
}

.cashier-member-results,
.cashier-sku-results {
    margin-top: 12px;
}

.cashier-member-row,
.cashier-sku-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid #e5e9f2;
    background: #fff;
    text-align: left;
}

.cashier-member-row + .cashier-member-row,
.cashier-sku-row + .cashier-sku-row {
    margin-top: 8px;
}

.cashier-member-row:hover,
.cashier-sku-row:hover {
    border-color: #1167ff;
    color: #1167ff;
}

.cashier-member-row strong,
.cashier-member-row span {
    display: block;
}

.cashier-member-row span,
.cashier-sku-row small {
    color: #8a94a6;
}

.cashier-sku-row em {
    color: #f23c3c;
    font-style: normal;
}

.cashier-custom-money {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.cashier-custom-money span {
    flex: 0 0 82px;
    text-align: right;
}

/* Legacy cashier member workbench. Keep isolated from admin member pages. */
.cashier-member-workbench,
.cashier-member-workbench * {
    box-sizing: border-box;
}

.cashier-member-workbench {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    color: #303133;
}

.cashier-member-shell {
    display: flex;
    width: calc(100% - 88px);
    height: 100vh;
    margin-left: 88px;
    background: #fff;
}

.cashier-member-sidebar {
    position: relative;
    flex: 0 0 500px;
    width: 500px;
    height: 100%;
    border-right: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-member-main {
    min-width: 0;
    flex: 1;
    height: 100%;
    background: #f5f5f5;
}

.cashier-member-pane-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    font-size: 18px;
    font-weight: 500;
}

.cashier-member-search {
    position: relative;
    height: 55px;
    padding: 10px 20px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-member-search input {
    width: 100%;
    height: 35px;
    padding: 0 44px 0 40px;
    border: 0;
    outline: 0;
    background: #f5f5f5;
    color: #303133;
    font: inherit;
}

.cashier-member-search > span,
.cashier-member-search button {
    position: absolute;
    top: 18px;
    width: 19px;
    height: 19px;
}

.cashier-member-search > span {
    left: 35px;
    border: 2px solid #606266;
    border-radius: 50%;
}

.cashier-member-search > span::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 7px;
    height: 2px;
    transform: rotate(45deg);
    background: #606266;
}

.cashier-member-search button {
    right: 30px;
    width: 40px;
    border: 0;
    background: transparent;
}

.cashier-member-search button::before {
    content: "搜索";
    position: absolute;
    right: 0;
    top: 0;
    color: #1473ff;
    line-height: 19px;
}

.cashier-member-list {
    height: calc(100% - 183px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.cashier-member-list:hover {
    scrollbar-color: #ddd transparent;
}

.cashier-member-list::-webkit-scrollbar {
    width: 6px;
}

.cashier-member-list::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: transparent;
}

.cashier-member-list:hover::-webkit-scrollbar-thumb {
    background: #ddd;
}

.cashier-member-list-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 92px;
    padding: 15px;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    color: #303133;
    text-align: left;
    cursor: pointer;
}

.cashier-member-list-item:hover,
.cashier-member-list-item.active {
    background: #ecf5ff;
}

.cashier-member-list-item > img {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.cashier-member-list-item .copy {
    display: block;
    min-width: 0;
    flex: 1;
    padding-left: 15px;
}

.cashier-member-list-item .title,
.cashier-member-list-item .desc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cashier-member-list-item .title strong {
    max-width: 260px;
    overflow: hidden;
    color: #303133;
    font-size: 15px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-member-list-item .title em {
    flex: none;
    padding: 1px 5px;
    border: 1px solid #1473ff;
    border-radius: 2px;
    background: #fff;
    color: #1473ff;
    font-size: 13px;
    font-style: normal;
}

.cashier-member-list-item .desc {
    margin-top: 15px;
    color: #606266;
    font-size: 14px;
}

.cashier-member-list-item .desc i {
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-member-list-item .desc b {
    color: #fe2278;
    font-size: 18px;
    font-weight: 400;
}

.cashier-member-add {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 68px;
    padding: 16px 20px;
    border-top: 1px solid #e6e6e6;
    background: #fff;
}

.cashier-member-primary {
    height: 36px;
    padding: 0 22px;
    border: 1px solid #1473ff;
    border-radius: 2px;
    background: #1473ff;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.cashier-member-primary:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.cashier-member-add .cashier-member-primary {
    width: 100%;
}

.cashier-member-detail {
    height: calc(100% - 60px);
    padding: 15px;
    overflow-y: auto;
}

.cashier-member-profile {
    display: flex;
    align-items: center;
    width: 100%;
}

.cashier-member-profile > img {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.cashier-member-profile > div {
    min-width: 0;
    flex: 1;
    padding-left: 15px;
}

.cashier-member-profile h2 {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 0;
    color: #303133;
    font-size: 16px;
    font-weight: 400;
}

.cashier-member-profile h2 em {
    margin-left: 15px;
    padding: 1px 5px;
    border: 1px solid #1473ff;
    border-radius: 2px;
    background: #fff;
    color: #1473ff;
    font-size: 13px;
    font-style: normal;
}

.cashier-member-profile p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    margin: 15px 0 0;
    color: #606266;
}

.cashier-member-account {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 20px;
    padding: 25px 0;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    background: #fff;
}

.cashier-member-account > div {
    min-width: 0;
    padding: 0 16px;
    border-right: 1px solid #eee;
}

.cashier-member-account > div:last-child {
    border-right: 0;
}

.cashier-member-account span,
.cashier-member-account strong,
.cashier-member-account button {
    display: block;
}

.cashier-member-account span {
    overflow: hidden;
    color: #606266;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cashier-member-account strong {
    margin-top: 10px;
    color: #303133;
    font-size: 26px;
    font-weight: 400;
}

.cashier-member-account button {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1473ff;
    cursor: pointer;
}

.cashier-member-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.cashier-member-action-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 116px;
    padding: 15px 8px;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    background: #fff;
    color: #303133;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.cashier-member-action-card:hover {
    border-color: #1473ff;
    box-shadow: 0 4px 14px rgba(20, 115, 255, .1);
}

.cashier-member-action-card img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.cashier-member-action-card span {
    margin-top: 10px;
}

.cashier-member-empty {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.cashier-member-empty img {
    width: 200px;
    max-width: 70%;
}

.cashier-member-empty span {
    margin-top: 15px;
}

.cashier-member-empty.detail {
    min-height: 360px;
}

.cashier-member-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
}

.cashier-member-modal[hidden] {
    display: none;
}

.cashier-member-dialog {
    width: 800px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    margin: 0;
    overflow: auto;
    border: 0;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(0, 0, 0, .18);
}

.cashier-member-dialog.small {
    width: 380px;
}

.cashier-member-dialog.medium {
    width: 520px;
}

.cashier-member-dialog.account {
    width: 420px;
}

.cashier-member-dialog.coupon,
.cashier-member-dialog.records {
    width: 900px;
}

.cashier-member-dialog > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 15px 0 20px;
    border-bottom: 1px solid #f0f0f0;
}

.cashier-member-dialog > header strong {
    font-weight: 400;
}

.cashier-member-dialog > header button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #606266;
    font-size: 24px;
    line-height: 30px;
    cursor: pointer;
}

.cashier-member-form {
    padding: 20px;
}

.cashier-member-form > label {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.cashier-member-form > label > span:first-child {
    flex: 0 0 120px;
    padding-right: 10px;
    line-height: 32px;
    text-align: right;
}

.cashier-member-dialog.small .cashier-member-form > label > span:first-child {
    flex-basis: 90px;
}

.cashier-member-form i {
    margin-right: 3px;
    color: #f00;
    font-style: normal;
}

.cashier-member-form input,
.cashier-member-form select,
.cashier-member-form textarea {
    width: 250px;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    outline: 0;
    background: #fff;
    color: #303133;
    font: inherit;
}

.cashier-member-form input:focus,
.cashier-member-form select:focus,
.cashier-member-form textarea:focus {
    border-color: #1473ff;
}

.cashier-member-form label.textarea textarea {
    resize: vertical;
}

.cashier-member-form label.static em {
    color: #606266;
    font-style: normal;
    line-height: 32px;
}

.cashier-member-radios {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 32px;
}

.cashier-member-radios label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cashier-member-radios input {
    width: 14px;
    min-height: 14px;
    margin: 0;
}

.cashier-member-form-tip {
    margin: -5px 0 12px 130px;
    color: #999;
    font-size: 12px;
}

.cashier-member-dialog > footer {
    display: flex;
    min-height: 55px;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-top: 1px solid #eee;
}

.cashier-member-dialog.small > footer .cashier-member-primary {
    width: 100%;
}

.cashier-member-coupon-table,
.cashier-member-record-table {
    padding: 10px 20px 20px;
}

.cashier-member-coupon-table .head,
.cashier-member-coupon-table .row,
.cashier-member-record-table .head,
.cashier-member-record-table .row {
    display: grid;
    grid-template-columns: 1.25fr .8fr 1.4fr .7fr;
    min-height: 50px;
    align-items: center;
}

.cashier-member-coupon-table .head,
.cashier-member-record-table .head {
    background: #f7f8fa;
}

.cashier-member-coupon-table .row,
.cashier-member-record-table .row {
    border-bottom: 1px solid #e6e6e6;
}

.cashier-member-coupon-table span,
.cashier-member-record-table span {
    min-width: 0;
    padding: 0 10px;
    overflow-wrap: anywhere;
}

.cashier-member-coupon-table input {
    width: 80px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e6e6e6;
    text-align: center;
}

.cashier-member-table-empty {
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: center;
    color: #909399;
}

@media (max-width: 1450px) {
    .cashier-member-account > div {
        padding: 0 10px;
    }

    .cashier-member-account strong {
        font-size: 22px;
    }

    .cashier-member-actions {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

/* Legacy cashier verification and verification-record workbenches. */
.cashier-verify-workbench,
.cashier-verify-workbench *,
.cashier-verify-record-workbench,
.cashier-verify-record-workbench * {
    box-sizing: border-box;
}

.cashier-verify-workbench,
.cashier-verify-record-workbench {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    color: #303133;
}

.cashier-verify-main {
    width: calc(100% - 88px);
    height: 100vh;
    margin-left: 88px;
    background: #fff;
}

.cashier-verify-search-step {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 80px;
}

.cashier-verify-search-step h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
}

.cashier-verify-search-form {
    display: flex;
    gap: 0;
    margin-top: 30px;
}

.cashier-verify-search-form > div {
    position: relative;
    width: 450px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 2px 0 0 2px;
}

.cashier-verify-search-form input {
    width: 100%;
    height: 100%;
    padding: 0 48px 0 15px;
    border: 0;
    outline: 0;
    font-size: 16px;
}

.cashier-verify-search-form > div span {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    color: #606266;
    font-size: 24px;
    line-height: 48px;
    text-align: center;
}

.cashier-verify-search-form .cashier-member-primary {
    width: 100px;
    height: 50px;
    border-radius: 0 2px 2px 0;
}

.cashier-verify-search-step p {
    margin: 30px 0 0;
    color: #909399;
}

.cashier-verify-search-step > a {
    margin-top: 20px;
    color: #1473ff;
    text-decoration: none;
}

.cashier-verify-result-step {
    height: 100%;
    padding: 15px;
    overflow-y: auto;
}

.cashier-verify-result-search {
    display: flex;
    width: 600px;
    height: 40px;
}

.cashier-verify-result-search input {
    min-width: 0;
    flex: 1;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-right: 0;
    outline: 0;
    font-size: 16px;
}

.cashier-verify-result-search button {
    width: 100px;
    height: 40px;
    border-radius: 0 2px 2px 0;
}

.cashier-verify-result-card {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #eee;
    background: #fff;
}

.cashier-verify-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
}

.cashier-verify-item img,
.cashier-verify-item > span {
    display: flex;
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    background: #f5f5f5;
    object-fit: contain;
}

.cashier-verify-item div {
    display: flex;
    min-height: 100px;
    flex-direction: column;
    justify-content: space-between;
}

.cashier-verify-item strong,
.cashier-verify-item em {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.cashier-verify-result-card dl {
    margin: 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
}

.cashier-verify-result-card dl > div {
    display: flex;
    width: 500px;
    margin-top: 15px;
    color: #999;
}

.cashier-verify-result-card dt {
    flex: 0 0 130px;
}

.cashier-verify-result-card dd {
    margin: 0;
}

.cashier-verify-result-card footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.cashier-verify-result-card footer button {
    width: 100px;
    height: 36px;
}

.cashier-verify-cancel {
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    background: #fff;
    color: #606266;
}

.cashier-verify-empty {
    padding: 50px 0;
    color: #909399;
    text-align: center;
}

.cashier-verify-record-shell {
    width: calc(100% - 88px);
    height: 100vh;
    margin-left: 88px;
    background: #fff;
}

.cashier-verify-record-shell > header {
    display: grid;
    grid-template-columns: 500px minmax(0, 1fr);
    height: 60px;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}

.cashier-verify-record-shell > header span {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e6e6e6;
    font-size: 18px;
    font-weight: 500;
}

.cashier-verify-record-body {
    display: grid;
    grid-template-columns: 500px minmax(0, 1fr);
    height: calc(100% - 60px);
}

.cashier-verify-record-body > aside {
    min-width: 0;
    border-right: 1px solid #e6e6e6;
}

.cashier-verify-record-list {
    height: calc(100% - 55px);
    overflow-y: auto;
}

.cashier-verify-record-row {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 20px;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    color: #303133;
    text-align: left;
    cursor: pointer;
}

.cashier-verify-record-row:hover,
.cashier-verify-record-row.active {
    background: #ecf5ff;
}

.cashier-verify-record-row > span {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.cashier-verify-record-row strong,
.cashier-verify-record-row em,
.cashier-verify-record-row i {
    font-style: normal;
    font-weight: 400;
}

.cashier-verify-record-row strong,
.cashier-verify-record-row em {
    width: 50%;
    line-height: 1;
}

.cashier-verify-record-row em {
    text-align: right;
}

.cashier-verify-record-row i {
    display: block;
    margin-top: 15px;
}

.cashier-verify-record-detail {
    min-width: 0;
    height: 100%;
    padding: 20px;
    overflow-y: auto;
}

.cashier-verify-detail-empty {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.cashier-verify-detail-empty img {
    width: 210px;
}

.cashier-verify-detail-empty span {
    margin-top: 12px;
}

.cashier-verify-record-detail-inner {
    margin-top: 20px;
}

.cashier-verify-record-product {
    display: flex;
    align-items: center;
    min-height: 110px;
    margin-bottom: 10px;
    padding: 15px;
    background: #f5f5f5;
}

.cashier-verify-record-product img,
.cashier-verify-record-product > span {
    display: flex;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}

.cashier-verify-record-product strong {
    margin-left: 15px;
    font-weight: 400;
}

.cashier-verify-record-detail-inner dl {
    margin: 20px 0 0;
}

.cashier-verify-record-detail-inner dl > div {
    display: flex;
    min-height: 32px;
}

.cashier-verify-record-detail-inner dt {
    flex: 0 0 160px;
    padding-right: 10px;
    text-align: right;
}

.cashier-verify-record-detail-inner dd {
    margin: 0;
}

.cashier-verify-record-empty {
    padding-top: 300px;
    color: #e6e6e6;
    font-size: 40px;
    text-align: center;
}

/* Legacy cashier goods management. */
.cashier-goods-workbench,
.cashier-goods-workbench * {
    box-sizing: border-box;
}

.cashier-goods-workbench {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    color: #303133;
}

.cashier-goods-main {
    width: calc(100% - 88px);
    height: 100vh;
    margin-left: 88px;
    padding: 15px;
    overflow-y: auto;
    background: #fff;
}

.cashier-goods-filter {
    margin-bottom: 15px;
    padding: 15px 15px 0;
    background: #f2f3f5;
}

.cashier-goods-filter form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 24px;
}

.cashier-goods-filter label {
    display: flex;
    align-items: center;
    min-height: 35px;
    margin-bottom: 15px;
}

.cashier-goods-filter label > span {
    width: 84px;
    padding-right: 14px;
    text-align: right;
}

.cashier-goods-filter input,
.cashier-goods-filter select {
    width: 180px;
    height: 35px;
    padding: 0 10px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    outline: 0;
    background: #fff;
    color: #303133;
    font-size: 14px;
}

.cashier-goods-filter input:focus,
.cashier-goods-filter select:focus {
    border-color: #1473ff;
}

.cashier-goods-price-filter i {
    position: relative;
    display: block;
    width: 180px;
    height: 35px;
    font-style: normal;
}

.cashier-goods-price-filter i input {
    width: 100%;
    padding-right: 32px;
}

.cashier-goods-price-filter i em {
    position: absolute;
    top: 0;
    right: 10px;
    font-style: normal;
    line-height: 35px;
}

.cashier-goods-price-filter b {
    width: 24px;
    font-weight: 400;
    text-align: center;
}

.cashier-goods-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 35px;
    margin: 0 0 15px 84px;
}

.cashier-goods-filter-actions button,
.cashier-goods-filter-actions a,
.cashier-goods-table-footer button {
    display: inline-flex;
    height: 35px;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    background: #fff;
    color: #303133;
    text-decoration: none;
    cursor: pointer;
}

.cashier-goods-filter-actions .cashier-member-primary {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-goods-table-wrap {
    border: 1px solid #ebeef5;
    background: #fff;
}

.cashier-goods-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.cashier-goods-table th,
.cashier-goods-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #ebeef5;
    text-align: center;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.cashier-goods-table th {
    height: 48px;
    background: #f5f7fa;
    font-weight: 400;
}

.cashier-goods-table tbody tr {
    min-height: 76px;
}

.cashier-goods-table tbody tr:hover {
    background: #f8fbff;
}

.cashier-goods-table .align-right {
    text-align: right;
}

.cashier-goods-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.cashier-goods-info {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.cashier-goods-thumb {
    display: flex;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ebeef5;
    background: #f5f7fa;
    color: #909399;
    font-size: 12px;
}

.cashier-goods-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cashier-goods-info strong,
.cashier-goods-info small {
    display: block;
    font-weight: 400;
    line-height: 20px;
}

.cashier-goods-info small {
    color: #909399;
}

.cashier-goods-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 10px;
}

.cashier-goods-actions button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #1473ff;
    cursor: pointer;
}

.cashier-goods-empty-row td {
    height: 380px;
    color: #d9dce1;
    font-size: 32px;
}

.cashier-goods-table-footer {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
}

.cashier-goods-table-footer > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cashier-goods-table-footer span {
    color: #909399;
}

.cashier-goods-pagination {
    display: flex;
    gap: 5px;
}

.cashier-goods-pagination a {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-decoration: none;
}

.cashier-goods-pagination a.active {
    border-color: #1473ff;
    background: #1473ff;
    color: #fff;
}

.cashier-goods-pagination a.disabled {
    pointer-events: none;
    color: #c0c4cc;
}

.cashier-goods-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 4000;
}

.cashier-goods-modal {
    position: static;
    inset: auto;
    width: min(900px, calc(100vw - 80px));
    min-height: 0;
    border-radius: 5px;
}

.cashier-goods-modal-body {
    height: 490px;
    padding: 20px;
    overflow-y: auto;
}

.cashier-goods-modal-loading {
    display: flex;
    min-height: 380px;
    align-items: center;
    justify-content: center;
    color: #909399;
}

.cashier-goods-detail h3 {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 400;
}

.cashier-goods-detail h3:not(:first-child) {
    margin-top: 18px;
}

.cashier-goods-detail dl {
    width: 560px;
    margin: 0 0 25px;
}

.cashier-goods-detail dl > div {
    display: flex;
    min-height: 36px;
}

.cashier-goods-detail dt {
    width: 96px;
    flex: 0 0 96px;
    text-align: right;
}

.cashier-goods-detail dd {
    min-width: 0;
    margin: 0 0 0 16px;
}

.cashier-goods-sku-scroll,
.cashier-goods-record-scroll {
    max-height: 300px;
    overflow: auto;
}

.cashier-goods-sku-scroll table,
.cashier-goods-record-scroll table {
    width: 100%;
    border-collapse: collapse;
}

.cashier-goods-sku-scroll th,
.cashier-goods-sku-scroll td,
.cashier-goods-record-scroll th,
.cashier-goods-record-scroll td {
    padding: 10px 8px;
    border: 1px solid #ebeef5;
    text-align: center;
}

.cashier-goods-sku-scroll th,
.cashier-goods-record-scroll th {
    background: #f5f7fa;
    font-weight: 400;
}

.cashier-goods-sku-scroll input[type="number"] {
    width: 90px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #dcdfe6;
}

.cashier-goods-restriction {
    display: block;
    margin-bottom: 6px;
    white-space: nowrap;
}

.cashier-goods-restriction input {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

.cashier-goods-sku-scroll button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #1473ff;
    border-radius: 2px;
    background: #1473ff;
    color: #fff;
}

.cashier-goods-help,
.cashier-goods-form-message {
    margin: 12px 0 0;
    color: #909399;
}

.cashier-goods-form-message {
    color: #1473ff;
}

@media (max-width: 1500px) {
    .cashier-goods-filter form {
        gap: 0 12px;
    }

    .cashier-goods-filter label > span {
        width: 76px;
        padding-right: 10px;
    }

    .cashier-goods-filter input,
    .cashier-goods-filter select,
    .cashier-goods-price-filter i {
        width: 160px;
    }

    .cashier-goods-filter-actions {
        margin-left: 76px;
    }

    .cashier-goods-table th,
    .cashier-goods-table td {
        padding-right: 6px;
        padding-left: 6px;
    }
}

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

.cashier-pending-row {
    padding: 12px;
    border: 1px solid #e5e9f2;
    background: #fff;
}

.cashier-pending-head,
.cashier-pending-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cashier-pending-head strong {
    color: #f23c3c;
    font-size: 17px;
}

.cashier-pending-head span,
.cashier-pending-meta,
.cashier-pending-items {
    color: #8a94a6;
    font-size: 12px;
}

.cashier-pending-meta {
    margin-top: 6px;
}

.cashier-pending-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 8px;
    line-height: 18px;
}

.cashier-pending-actions {
    justify-content: flex-end;
    margin-top: 10px;
}

.cashier-toast {
    position: fixed;
    left: 50%;
    top: 72px;
    z-index: 2000;
    transform: translateX(-50%);
    min-width: 140px;
    padding: 10px 16px;
    background: rgba(16, 24, 40, .92);
    color: #fff;
    text-align: center;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
}

.cashier-toast.success {
    background: #16a34a;
}

.cashier-toast.error {
    background: #e64646;
}

.member-avatar.large {
    width: 64px;
    height: 64px;
}

.store-role-permission-box .permission-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 8px 18px;
    width: 760px;
    max-width: calc(100vw - 620px);
}

.store-role-permission-box label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #333;
}

.system-cache-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 20px 20px;
}

.system-cache-page .layui-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.system-cache-page .layui-card-header {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 20px;
    padding: 0 20px;
    border-bottom: 0;
    line-height: initial;
}

.system-cache-page .layui-card-body {
    padding: 20px;
}

.system-cache-page .card-title {
    position: relative;
    padding-left: 10px;
    font-size: 14px;
    font-weight: 600;
}

.system-cache-page .card-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 14px;
    border-radius: 5px;
    background: #126bf4;
    transform: translateY(-50%);
}

.system-cache-all input,
.system-cache-item input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.system-cache-item {
    display: flex;
    justify-content: space-between;
    width: 800px;
    padding: 20px 0;
    margin-left: 20px;
    border-bottom: 1px solid #e6e6e6;
    box-sizing: border-box;
}

.system-cache-item .item-content-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.system-cache-item .item-content-desc {
    max-width: 660px;
    margin: 5px 0 0 26px;
    color: #888;
    font-size: 14px;
    line-height: 20px;
}

.system-cache-item > .layui-btn,
.system-cache-actions > .layui-btn {
    height: 34px;
    min-height: 34px;
    padding: 0 14px;
    line-height: 32px;
}

.system-cache-actions {
    width: 820px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 45px;
}

.system-cache-actions .form-message {
    position: absolute;
    margin-left: 20px;
    transform: translateY(38px);
}

.system-database-toolbar {
    min-height: 48px;
    padding: 0 0 14px;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
}

.system-database-page .system-database-table-wrap,
.system-database-imports-page .old-table-wrap {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.system-database-table {
    border: 0;
    table-layout: fixed;
}

.system-database-table .system-db-check-col {
    width: 3%;
}

.system-database-table .system-db-name-col {
    width: 30%;
}

.system-database-table .system-db-count-col,
.system-database-table .system-db-size-col {
    width: 21%;
}

.system-database-table .system-db-time-col {
    width: 25%;
}

.system-database-table th,
.system-database-table td,
.system-backup-table th,
.system-backup-table td {
    height: 51px;
    padding: 15px;
    border-right: 0;
    border-left: 0;
}

.system-database-table .check-box {
    padding-right: 0;
    padding-left: 0;
    text-align: center;
}

.system-backup-table {
    table-layout: fixed;
}

.system-backup-table .data-empty {
    height: 51px;
    text-align: center;
}

.system-backup-table .toolbar .table-btn {
    justify-content: flex-end;
    gap: 0;
}

.system-backup-table .toolbar .table-action-link {
    display: inline-flex;
    min-height: 27px;
    margin: 5px;
    padding: 2px 8px;
    align-items: center;
    border: 0;
    border-radius: 50px;
    background: #f3f3f3;
    color: #5a5a5a;
    font-size: 13px;
    line-height: 23px;
    cursor: pointer;
}

.system-backup-table .toolbar .table-action-link:hover {
    background: var(--old-blue);
    color: #fff;
}

.table-action-link.danger {
    color: #f56c6c;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.system-auth-page .old-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.system-auth-table {
    table-layout: fixed;
    color: #666;
    font-size: 14px;
}

.system-auth-table .system-auth-label-col {
    width: 20%;
}

.system-auth-table .system-auth-value-col {
    width: 30%;
}

.system-auth-table td {
    height: 39px;
    min-height: 20px;
    padding: 9px 15px;
    border: 1px solid #e6e6e6;
    line-height: 20px;
}

.system-auth-table .bg-color-light-gray {
    background: #f7f7f7;
    color: #666;
}

.payment-form {
    width: 900px;
    padding-top: 10px;
}

.payment-form-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px 0;
    padding-left: 18px;
    height: 36px;
}

.payment-form-head strong {
    font-size: 15px;
    color: #1f2d3d;
}

.payment-form .layui-form-item {
    margin-bottom: 18px;
    min-height: 34px;
}

.payment-form .layui-form-label {
    width: 160px;
    padding: 7px 12px 7px 0;
}

.payment-form .layui-input-block {
    margin-left: 172px;
    min-height: 34px;
}

.payment-form .layui-input-inline {
    margin-left: 0;
    min-height: 34px;
}

.payment-form .layui-input,
.payment-form .layui-textarea {
    border-color: #e5e5e5;
    border-radius: 0;
    font-size: 14px;
}

.payment-form .len-long {
    width: 460px;
}

.payment-form textarea.len-long {
    height: 112px;
    min-height: 112px;
}

.payment-form .word-aux {
    margin-left: 172px;
    margin-top: 6px;
    color: #b7b7b7;
    font-size: 12px;
    line-height: 1.7;
}

.payment-form .word-aux span,
.payment-form .input-text span {
    margin-right: 15px;
}

.payment-form .old-radio-row {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    min-height: 34px;
}

.payment-form .old-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #333;
    white-space: nowrap;
}

.payment-form .file-upload {
    display: inline-block;
    margin-right: 8px;
    color: #666;
    line-height: 32px;
}

.payment-form .cert-upload-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.payment-form .transfer-config {
    margin-left: 0;
}

.payment-form .payment-type {
    margin: -8px 0 16px 0;
}

.payment-code-upload {
    width: 102px;
    height: 102px;
    border: 1px dashed #d7dee9;
    position: relative;
    background: #fff;
}

.payment-code-upload .upload-default {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    cursor: pointer;
    color: #8392a5;
}

.payment-code-upload .upload-empty {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.payment-code-upload .upload-empty i {
    font-size: 22px;
}

.payment-code-upload .preview_img,
.payment-code-upload .preview_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.payment-code-upload .hidden {
    display: none !important;
}

.payment-code-upload .operation {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: rgba(0, 0, 0, .55);
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.payment-code-upload.has-image:hover .operation {
    display: flex;
}

.payment-code-upload .operation button {
    border: 0;
    background: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.payment-form .form-row {
    margin-left: 172px;
    padding: 16px 0 28px;
}

.payment-form .form-message {
    display: inline-block;
    margin-left: 12px;
    color: #0fae58;
}

.payment-form .form-message.error {
    color: #e33;
}

.customer-service-page {
    padding: 20px;
    background: #fff;
    min-height: calc(100vh - 70px);
}

.customer-service-card {
    width: calc(100% / 3);
    min-width: 520px;
    max-width: 620px;
    border-color: #e5e5e5;
}

.customer-service-card .layui-card-header {
    height: 52px;
    padding: 0 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer-service-card .card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.customer-service-card .card-title::before,
.servicer-title::before {
    content: "";
    width: 3px;
    height: 15px;
    background: #1266ff;
    display: inline-block;
}

.customer-service-card .layui-card-body {
    padding: 20px 0 10px;
}

.servicer-summary-row {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 8px;
    font-size: 14px;
}

.servicer-summary-row label {
    width: 158px;
    padding-right: 12px;
    text-align: right;
    color: #333;
}

.servicer-summary-row span {
    color: #666;
}

.customer-service-edit {
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 18px;
    cursor: pointer;
}

.servicer-config-modal {
    width: 760px;
    max-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
}

.old-modal-mask > .servicer-config-modal {
    position: static;
    inset: auto;
    z-index: auto;
}

.servicer-config-modal .old-modal-head {
    flex: 0 0 auto;
}

.servicer-config-form {
    padding: 18px 18px 20px;
    overflow: auto;
}

.servicer-terminal {
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #f0f2f5;
}

.servicer-terminal:last-of-type {
    border-bottom: 0;
}

.servicer-title {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    margin-bottom: 12px;
    color: #1f2d3d;
    font-weight: 600;
    font-size: 14px;
}

.servicer-config-form .layui-form-item {
    margin-bottom: 14px;
    min-height: 34px;
}

.servicer-config-form [data-servicer-panel][hidden] {
    display: none !important;
}

.servicer-config-form .layui-form-label.mid {
    width: 142px;
    padding: 7px 12px 7px 0;
    text-align: right;
}

.servicer-config-form .layui-input-block {
    margin-left: 154px;
    min-height: 34px;
}

.servicer-config-form .old-radio-row {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    min-height: 34px;
}

.servicer-config-form .old-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: #333;
}

.servicer-config-form .len-long {
    width: 420px;
}

.servicer-config-form .form-row.mid {
    margin-left: 154px;
    padding-top: 4px;
}

.servicer-config-form .form-message {
    display: inline-block;
    margin-left: 12px;
    color: #0fae58;
}

.servicer-config-form .form-message.error {
    color: #e33;
}

.goods-setting-page {
    padding: 20px 18px;
    background: #fff;
    min-height: calc(100vh - 70px);
}

.goods-setting-form {
    width: 100%;
    box-sizing: border-box;
}

.goods-setting-form .layui-card {
    border-color: #e5e5e5;
    margin-bottom: 15px;
}

.goods-setting-form .layui-card-header {
    height: 42px;
    padding-left: 16px;
    font-size: 14px;
}

.goods-setting-form .card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.goods-setting-form .card-title::before {
    content: "";
    width: 3px;
    height: 15px;
    display: inline-block;
    background: #1266ff;
}

.goods-setting-form .layui-card-body {
    padding: 18px 16px 14px;
}

.goods-setting-form .layui-form-item {
    display: block;
    gap: 0;
    min-height: 34px;
    margin-bottom: 20px;
}

.goods-setting-form .layui-form-label {
    float: left;
    width: 200px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
}

.goods-setting-form .layui-input-block {
    margin-left: 200px;
    min-height: 34px;
    min-width: 0;
}

.goods-setting-form .len-long {
    width: 450px;
}

.goods-setting-form textarea.len-long {
    height: 100px;
    min-height: 100px;
}

.goods-setting-form .len-mid {
    width: 250px;
}

.goods-setting-form .len-short {
    width: 120px;
}

.goods-setting-form .layui-input,
.goods-setting-form .layui-select,
.goods-setting-form select {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
}

.goods-setting-form .word-aux {
    margin-left: 200px;
    margin-top: 5px;
    color: #b7b7b7;
    font-size: 12px;
    line-height: 1.6;
}

.goods-setting-form .old-radio-row {
    display: flex;
    align-items: center;
    gap: 24px;
    width: fit-content;
}

.goods-setting-form .old-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.goods-setting-form .keywords-block {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    max-width: 620px;
}

.goods-setting-form .keywords-item {
    position: relative;
    margin: 0;
    width: 120px;
    min-width: 120px;
}

.goods-setting-form .keywords-item.dragging {
    opacity: .55;
}

.goods-setting-form .keyword-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    line-height: 14px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.goods-setting-form .form-row {
    margin-left: 200px;
    padding: 4px 0 28px;
}

.goods-setting-form .layui-btn {
    height: 34px;
    min-height: 34px;
    line-height: 32px;
    padding: 0 15px;
}

.goods-search-setting-page .goods-setting-form > .layui-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.goods-search-setting-page .goods-setting-form > .layui-card .layui-card-header {
    height: 20px;
    min-height: 20px;
    line-height: 20px;
    padding: 0 20px;
    margin-top: 15px;
    border-bottom: 0;
}

.goods-search-setting-page .goods-setting-form > .layui-card:first-child .layui-card-header {
    margin-top: 0;
}

.goods-search-setting-page .goods-setting-form > .layui-card .layui-card-body {
    padding: 15px 0 0;
}

.goods-setting-form .form-message {
    display: inline-block;
    margin-left: 12px;
    color: #0fae58;
}

.goods-setting-form .form-message.error {
    color: #e33;
}

.goods-demo-mask {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .28);
}

.goods-demo-mask[hidden] {
    display: none;
}

.goods-demo-dialog {
    width: 500px;
    max-height: calc(100vh - 80px);
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.goods-sort-demo-dialog {
    width: 900px;
    height: 660px;
    max-height: calc(100vh - 40px);
}

.goods-demo-head {
    height: 44px;
    padding: 0 14px;
    border-bottom: 1px solid #e6e8ef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.goods-demo-head strong {
    font-size: 14px;
    font-weight: 600;
}

.goods-demo-head button {
    width: 30px;
    height: 30px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #999;
    font-size: 18px;
    cursor: pointer;
}

.goods-demo-body {
    max-height: calc(100vh - 124px);
    padding: 20px;
    overflow: auto;
    text-align: center;
}

.goods-demo-body img {
    max-width: 100%;
    height: auto;
}

.goods-sort-demo-body {
    height: 616px;
    max-height: none;
    padding: 18px 25px;
    box-sizing: border-box;
    overflow: hidden;
}

.goods-sort-demo-stage {
    position: relative;
    width: 850px;
    height: 580px;
    overflow: hidden;
    background: #fff;
}

.goods-sort-demo-stage > img {
    position: absolute;
    left: 125px;
    width: 600px;
    max-width: none;
    object-fit: contain;
}

.goods-sort-demo-stage > img:first-of-type {
    top: 20px;
    height: 500px;
}

.goods-sort-demo-stage > img:nth-of-type(2) {
    top: 60px;
    height: 400px;
}

.goods-sort-demo-stage > img[hidden] {
    display: none;
}

.goods-sort-demo-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 34px;
    height: 52px;
    min-height: 0;
    margin-top: -26px;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .18);
    color: #fff;
    font-size: 28px;
    line-height: 52px;
    cursor: pointer;
}

.goods-sort-demo-arrow.prev {
    left: 0;
}

.goods-sort-demo-arrow.next {
    right: 0;
}

.goods-sort-demo-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.goods-sort-demo-dots button {
    width: 8px;
    height: 8px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d7d7d7;
    cursor: pointer;
}

.goods-sort-demo-dots button.active {
    background: #1266ff;
}

.shop-content-list {
    margin: 0 0 var(--old-page-gap);
    padding: 0 var(--old-page-pad) var(--old-page-pad);
    background: #fff;
    border: 1px solid #e6e8ef;
    border-top: 0;
    border-radius: 0 0 2px 2px;
    box-shadow: none;
    box-sizing: border-box;
}

.shop-content-shell {
    margin: 0 0 var(--old-page-gap);
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    box-sizing: border-box;
}

.shop-content-shell > .old-page-tabs {
    border: 0;
    border-bottom: 1px solid #edf0f5;
    border-radius: 0;
}

.shop-content-shell > .shop-content-toolbar,
.shop-content-shell > .single-filter-box {
    border: 0;
    border-radius: 0;
}

.shop-content-shell > .shop-content-list,
.shop-content-shell > .shop-album-panel,
.shop-content-shell > .table-tab,
.shop-content-shell > .old-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.shop-content-shell > .shop-content-list:last-child,
.shop-content-shell > .shop-album-panel:last-child,
.shop-content-shell > .table-tab:last-child,
.shop-content-shell > .old-table-wrap:last-child {
    padding-bottom: var(--old-page-pad);
}

.pc-config-page .old-table .edit-sort {
    width: 70px;
    height: 30px;
}

.pc-config-form-page {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 2px;
    padding: 18px 0 24px;
}

.pc-config-form .len-mid {
    width: 360px;
}

.pc-config-form .pc-floor-json {
    width: 720px;
    min-height: 260px;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.6;
}

.pc-floor-editor {
    width: 1210px;
    max-width: calc(100vw - 520px);
    min-height: 160px;
    background: #f5f5f5;
    padding: 14px;
    box-sizing: border-box;
    overflow-x: auto;
}

.pc-floor-empty {
    height: 120px;
    line-height: 120px;
    text-align: center;
    color: #999;
    background: #fff;
    border: 1px dashed #d8dde6;
}

.pc-floor-preview {
    width: 1210px;
    color: #333;
}

.pc-floor-preview h2,
.pc-floor-preview h3,
.pc-floor-preview h4,
.pc-floor-preview p,
.pc-floor-preview ul,
.pc-floor-preview li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-floor-preview [data-edit-text],
.pc-floor-preview [data-upload-img],
.pc-floor-preview [data-select-goods],
.pc-floor-preview [data-category-edit] {
    cursor: pointer;
}

.pc-floor-preview .empty {
    background: #ebf8fd;
    color: #88c4dc;
    text-align: center;
}

.pc-floor-preview .empty span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}

.pc-floor-preview img {
    max-width: 100%;
    max-height: 100%;
}

.pc-floor-preview .left-wrap-box {
    position: relative;
}

.pc-floor-preview .mask {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(101, 101, 101, .6);
    color: #fff;
    opacity: 0;
    transition: opacity .15s;
}

.pc-floor-preview .left-wrap-box:hover .mask {
    opacity: 1;
}

.pc-floor-preview .left-img-replace {
    position: relative;
    height: 100%;
}

.pc-floor-preview .left-img-replace .replace {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-floor-preview .left-img-replace h4 {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 22;
    font-size: 12px;
    font-weight: normal;
}

.pc-floor-preview .goods-list {
    display: flex;
    flex-wrap: wrap;
}

.pc-floor-preview .goods-list li {
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.pc-floor-preview .goods-list .img-wrap {
    margin: 0 auto 18px;
    text-align: center;
}

.pc-floor-preview .goods-list h3 {
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 5px 15px;
}

.pc-floor-preview .goods-list .desc {
    height: 20px;
    margin: 0 30px 10px;
    color: #b0b0b0;
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-floor-preview .goods-list .price {
    margin: 0 10px 14px;
    text-align: center;
}

.pc-floor-preview .goods-list .price del {
    margin-left: .5em;
    color: #b0b0b0;
}

.pc-floor-preview.floor-style-1 .head-wrap h2,
.pc-floor-preview.floor-style-4 .head-wrap h2 {
    line-height: 30px;
    padding: 10px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-floor-preview.floor-style-1 .body-wrap {
    min-height: 614px;
    position: relative;
}

.pc-floor-preview.floor-style-1 .left-wrap {
    width: 234px;
    height: 614px;
    float: left;
}

.pc-floor-preview.floor-style-1 .goods-list {
    margin-left: 235px;
}

.pc-floor-preview.floor-style-1 .goods-list li {
    width: 23%;
    margin: 0 0 15px 15px;
    padding: 17px 0;
}

.pc-floor-preview.floor-style-1 .goods-list .img-wrap,
.pc-floor-preview.floor-style-2 .goods-list .img-wrap,
.pc-floor-preview.floor-style-4 .goods-list .img-wrap {
    width: 160px;
    height: 160px;
    line-height: 160px;
}

.pc-floor-preview.floor-style-1 .bottom-wrap,
.pc-floor-preview.floor-style-2 .bottom-wrap,
.pc-floor-preview.floor-style-4 .bottom-wrap {
    width: 1210px;
    height: 118px;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
}

.pc-floor-preview.floor-style-2 .head-wrap {
    text-align: center;
}

.pc-floor-preview.floor-style-2 .head-wrap h2 {
    line-height: 30px;
    padding: 10px;
    font-size: 22px;
}

.pc-floor-preview.floor-style-2 .head-wrap p {
    margin-bottom: 20px;
    padding: 0 10px;
    color: #b0b0b0;
    font-size: 14px;
}

.pc-floor-preview.floor-style-2 .goods-list li {
    width: 18.5%;
    margin: 0 0 15px 15px;
    padding: 15px 0;
}

.pc-floor-preview.floor-style-3 {
    overflow: hidden;
}

.pc-floor-preview.floor-style-3 .head-wrap {
    height: 50px;
    line-height: 50px;
}

.pc-floor-preview.floor-style-3 .title-name {
    display: inline-block;
}

.pc-floor-preview.floor-style-3 .title-name span {
    float: left;
    width: 5px;
    height: 21px;
    margin-top: 15px;
    background: #1266ff;
}

.pc-floor-preview.floor-style-3 .title-name h2 {
    float: left;
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
}

.pc-floor-preview.floor-style-3 .category-wrap {
    float: right;
    display: flex;
}

.pc-floor-preview.floor-style-3 .category-wrap li {
    margin-right: 10px;
}

.pc-floor-preview.floor-style-3 .category-wrap a {
    color: inherit;
    text-decoration: none;
}

.pc-floor-preview.floor-style-3 .body-wrap {
    position: relative;
    min-height: 360px;
}

.pc-floor-preview.floor-style-3 .left-img-wrap {
    width: 190px;
    height: 360px;
    float: left;
    position: relative;
}

.pc-floor-preview.floor-style-3 .right-goods-wrap {
    margin-left: 190px;
    text-align: center;
    overflow: hidden;
}

.pc-floor-preview.floor-style-3 .right-goods-wrap > li {
    float: left;
    width: 19.9%;
    background: #fff;
    border: solid #f9f9f9;
    border-width: 0 0 1px 1px;
    cursor: pointer;
}

.pc-floor-preview.floor-style-3 .right-goods-wrap > li h4 {
    font-size: 14px;
    margin: 10px 20px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: normal;
}

.pc-floor-preview.floor-style-3 .right-goods-wrap > li p {
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 10px 30px;
    height: 20px;
}

.pc-floor-preview.floor-style-3 .right-goods-wrap > li .img-wrap {
    width: 105px;
    height: 105px;
    line-height: 105px;
    display: inline-block;
    margin-bottom: 5px;
}

.pc-floor-preview.floor-style-3 .right-goods-wrap > li .img-wrap img {
    max-width: 100%;
    max-height: 100%;
}

.pc-floor-preview.floor-style-3 .right-goods-wrap > li .img-wrap.empty {
    background: #ebf8fd;
    color: #88c4dc;
}

.pc-floor-preview.floor-style-3 .bottom-goods-wrap {
    clear: both;
    margin-left: 190px;
    overflow: hidden;
    display: flex;
}

.pc-floor-preview.floor-style-3 .bottom-goods-wrap > li {
    flex: 1;
    background: #fff;
    border-left: 1px solid #f9f9f9;
    padding: 10px 0;
    cursor: pointer;
}

.pc-floor-preview.floor-style-3 .bottom-goods-wrap > li:first-child {
    border-left: 0;
}

.pc-floor-preview.floor-style-3 .bottom-goods-wrap > li .info-wrap {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.pc-floor-preview.floor-style-3 .bottom-goods-wrap > li .info-wrap h4 {
    font-size: 14px;
    margin: 0 10px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 90px;
    font-weight: normal;
}

.pc-floor-preview.floor-style-3 .bottom-goods-wrap > li .info-wrap p {
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 20px;
    width: 70px;
}

.pc-floor-preview.floor-style-3 .bottom-goods-wrap > li .img-wrap {
    width: 60px;
    height: 60px;
    line-height: 60px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 10px;
}

.pc-floor-preview.floor-style-3 .bottom-goods-wrap > li .img-wrap img {
    max-width: 100%;
    max-height: 100%;
}

.pc-floor-preview.floor-style-3 .bottom-goods-wrap > li .img-wrap.empty {
    background: #ebf8fd;
    color: #88c4dc;
}

.pc-floor-preview.floor-style-4 .head-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pc-floor-preview.floor-style-4 .body-wrap {
    min-height: 323px;
    position: relative;
}

.pc-floor-preview.floor-style-4 .left-wrap {
    width: 500px;
    height: 323px;
    float: left;
}

.pc-floor-preview.floor-style-4 .goods-list {
    margin-left: 515px;
}

.pc-floor-preview.floor-style-4 .goods-list li {
    width: calc((100% - 45px) / 3);
    margin-left: 15px;
    padding: 29px 0;
}

.pc-floor-preview.floor-style-4 .head-wrap .more {
    cursor: pointer;
}

.pc-category-img-mode {
    display: flex;
    gap: 10px;
}

.pc-category-img-mode .layui-btn.active {
    border-color: #105cfb;
    color: #105cfb;
}

.pc-category-page .index-classify {
    width: min(800px, 100%);
    border: 1px solid #edf0f5;
    background: #fff;
}

.pc-floor-inline-form .layui-form-item {
    align-items: flex-start;
}

.pc-floor-inline-form .old-radio-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 32px;
}

.pc-floor-image-picker {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.pc-floor-image-preview {
    width: 120px;
    height: 84px;
    border: 1px dashed #d7dce5;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #909399;
    font-size: 12px;
}

.pc-floor-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pc-floor-image-empty {
    padding: 12px;
    text-align: center;
}

.shop-content-shell > .table-tab,
.shop-content-shell > .old-table-wrap {
    padding: 0 var(--old-page-pad) var(--old-page-pad);
}

.shop-content-shell > .table-tab .layui-tab-title {
    margin: 0 0 var(--old-page-pad);
}

.shop-content-shell > .table-tab .layui-tab-content {
    padding: 0;
}

.shop-content-shell > .table-tab .old-table,
.shop-content-shell > .old-table-wrap .old-table {
    margin: 0;
}

.old-page-tabs {
    height: 52px;
    margin: 0;
    display: flex;
    align-items: flex-end;
    gap: 34px;
    background: #fff;
    padding: 0 var(--old-page-pad);
    border: 1px solid #e6e8ef;
    border-bottom: 1px solid #edf0f5;
    border-radius: 2px 2px 0 0;
    box-sizing: border-box;
}

.old-page-tabs a {
    height: 52px;
    line-height: 52px;
    color: #333;
    position: relative;
}

.old-page-tabs a.active {
    color: #1266ff;
}

.old-page-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #1266ff;
}

.admin-fourth-tabs {
    margin-bottom: var(--old-page-gap);
}

.electronic-sheet-desc {
    width: 65%;
    margin: 0 0 15px 0;
    padding: 5px 10px;
    border: 1px dashed #ff8143;
    background: #fff0e9;
    color: #ff8143;
    line-height: 1.8;
    box-sizing: border-box;
}

.electronic-sheet-tabs + .single-filter-box,
.electronic-sheet-tabs + .electronic-sheet-config-form,
.electronic-sheet-tabs + .old-tips-wrap {
    margin-top: 0;
}

.electronic-sheet-toolbar {
    justify-content: space-between;
}

.promotion-app-page,
.promotion-dashboard-page {
    margin: 0;
}

.promotion-app-section,
.promotion-summary-card,
.promotion-status-card {
    margin-bottom: var(--old-page-gap);
}

.promotion-app-section .layui-card-header,
.promotion-summary-card .layui-card-header,
.promotion-status-card .layui-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 var(--old-page-pad);
    border-bottom: 1px solid #edf0f5;
    box-sizing: border-box;
}

.promotion-app-section .layui-card-body {
    padding: 0 !important;
}

.promotion-status-card .layui-card-body {
    padding: 0 var(--old-page-pad) var(--old-page-pad);
}

.promotion-app-search {
    margin-left: auto;
}

.promotion-app-search .old-search-input {
    width: 260px;
}

.item-block-parent {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-sizing: border-box;
}

.item-block-parent.item-five {
    display: flex;
    flex-wrap: wrap;
}

.item-block-parent .item-block {
    position: relative;
    display: inline-block;
    min-width: 0;
    color: #333;
    background: #f7f8fa;
    border-radius: 4px;
    box-sizing: border-box;
    text-decoration: none;
}

.item-block-parent .item-block:hover {
    color: #333;
    background: #f2f3f5;
}

.item-block-parent .item-block-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 15px;
    box-sizing: border-box;
}

.item-block-parent .item-pic {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    line-height: 40px;
    text-align: center;
    flex: 0 0 40px;
}

.item-block-parent .item-pic img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.item-block-parent .item-con {
    min-width: 0;
    height: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.item-block-parent .item-con .item-content-title {
    overflow: hidden;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-block-parent .item-con .item-content-desc {
    color: #999;
    font-size: 12px;
    line-height: 20px;
}

.item-block-parent .item-float-wrap {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: all .2s;
}

.item-block-parent .item-float {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 30px;
    padding: 0 20px;
    color: #333;
    font-size: 12px;
    line-height: 30px;
    background: #f2f3f5;
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
}

.item-block-parent .item-float i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 5px;
}

.item-block-parent .item-float span {
    margin-right: 5px;
    margin-left: 5px;
}

.item-block-parent .item-block-hover:hover {
    border-color: transparent;
}

.item-block-parent .item-block-hover:hover .item-float-wrap {
    bottom: -30px;
    opacity: 1;
    z-index: 99;
}

@media screen and (min-width: 1700px) {
    .item-block-parent.item-five > .item-block {
        width: 19%;
        margin-right: 1.25%;
        margin-bottom: 25px;
    }

    .item-block-parent.item-five > .item-block:nth-child(5n) {
        margin-right: 0;
    }
}

@media screen and (min-width: 1460px) and (max-width: 1699px) {
    .item-block-parent.item-five > .item-block {
        width: 23.5%;
        margin-right: 2%;
        margin-bottom: 25px;
    }

    .item-block-parent.item-five > .item-block:nth-child(4n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 1459px) {
    .item-block-parent.item-five > .item-block {
        width: 31.5%;
        margin-right: 2%;
        margin-bottom: 25px;
    }

    .item-block-parent.item-five > .item-block:nth-child(3n) {
        margin-right: 0;
    }
}

.item-block-parent .item-poa-pic {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

.line-hiding {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promotion-app-grid {
    display: flex;
    flex-wrap: wrap;
}

.item-block-parent .promotion-app-card {
    position: relative;
    display: block;
    min-height: 72px;
    color: #333;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 2px;
    text-decoration: none;
    box-sizing: border-box;
}

.item-block-parent .promotion-app-card:hover {
    color: #333;
    border-color: #d8dde8;
    background: #fff;
}

.promotion-app-card-wrap {
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 15px;
    box-sizing: border-box;
}

.promotion-app-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    flex: 0 0 40px;
}

.promotion-app-icon img,
.promotion-config-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.promotion-app-content {
    min-width: 0;
    flex: 1;
}

.promotion-app-title {
    overflow: hidden;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promotion-app-desc {
    margin: 0;
    overflow: hidden;
    color: #999;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-block-parent .promotion-app-badge {
    position: absolute;
    top: 0;
    right: -1px;
    width: 70px;
    height: 28px;
    color: #fff;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    background-image: linear-gradient(to right, var(--base-color, #1267f5), var(--base-color, #1267f5));
    border-bottom-left-radius: 3px;
}

.promotion-app-shortcut {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    color: #333;
    font-size: 16px;
    font-weight: bold;
}

.promotion-app-card:not(.is-developing):hover .promotion-app-shortcut {
    display: inline-block;
}

.promotion-app-card.is-developing {
    cursor: default;
}

.promotion-app-card[hidden],
.empty-promotion[hidden] {
    display: none !important;
}

/* The legacy tool page uses a 30px "敬请期待" corner badge; marketing cards use 28px. */
.item-block-parent.tool-promotion .promotion-app-badge {
    height: 30px;
    line-height: 30px;
}

.system-addon-page {
    margin: 0;
}

.system-addon-section {
    margin-bottom: var(--old-page-gap);
}

.system-addon-section .layui-card-header {
    min-height: 52px;
    padding: 0 var(--old-page-pad);
    border-bottom: 1px solid #edf0f5;
    box-sizing: border-box;
}

.system-addon-section .layui-card-body {
    padding: var(--old-page-pad);
}

.system-addon-section .layui-field-box {
    padding: 0 !important;
}

.system-addon-grid {
    display: flex;
    flex-wrap: wrap;
}

.system-addon-card {
    position: relative;
    display: block;
    min-height: 70px;
    color: #333;
    background: #f7f8fa;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
}

.system-addon-card:hover {
    color: #333;
    background: #f2f3f5;
}

.system-addon-wrap {
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 15px;
    box-sizing: border-box;
}

.system-addon-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    flex: 0 0 40px;
}

.system-addon-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.system-addon-con {
    min-width: 0;
    flex: 1;
}

.system-addon-title {
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-addon-desc {
    margin: 0;
    overflow: hidden;
    color: #999;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-addon-auth-mark {
    margin-left: 4px;
    color: #ff0000;
    font-size: 12px;
    flex: 0 0 auto;
}

.system-addon-float {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: all .2s;
}

.system-addon-card:hover .system-addon-float {
    bottom: -30px;
    opacity: 1;
    z-index: 99;
}

.system-addon-float-row {
    min-width: 60px;
    height: 30px;
    padding: 0;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
}

.system-addon-float-row + .system-addon-float-row {
    border-left: 0;
}

.system-addon-float-row i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: 1px;
}

.system-addon-float-row i.bg-color-blue {
    background: #1266ff;
}

.system-addon-float-row i.bg-color-red {
    background: #ff4544;
}

.system-addon-float-row.is-disabled {
    color: #aaa;
    cursor: not-allowed;
}

.empty-promotion {
    width: 100%;
    padding: 100px 0;
    color: #909399;
    text-align: center;
}

.promotion-summary-date {
    color: #909399;
    font-size: 12px;
}

.promotion-summary-body {
    display: flex;
    padding: 20px var(--old-page-pad) 24px;
}

.promotion-summary-item {
    width: 33.333%;
    border-right: 1px solid #edf0f5;
}

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

.promotion-summary-item .title {
    margin: 0 0 12px;
    color: #909399;
}

.promotion-summary-item .num {
    margin: 0;
    color: #1f2d3d;
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
}

.promotion-config-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    padding-top: var(--old-page-pad);
}

.promotion-config-card {
    display: flex;
    align-items: center;
    min-height: 88px;
    padding: 14px 12px;
    color: #303133;
    border: 1px solid #eee;
    border-radius: 2px;
    text-decoration: none;
    box-sizing: border-box;
}

.promotion-config-card:hover {
    color: #303133;
    border-color: #d8dde8;
}

.promotion-config-icon {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    flex: 0 0 40px;
}

.promotion-config-info {
    min-width: 0;
    flex: 1;
}

.promotion-config-title {
    line-height: 22px;
}

.promotion-config-info p {
    margin: 6px 0 0;
    overflow: hidden;
    color: #909399;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promotion-config-state {
    margin-left: 10px;
    color: #1266ff;
    font-size: 12px;
}

/* Marketing overview follows the old full-width dashboard rhythm. */
.promotion-dashboard-shell .shell {
    padding: 55px 0 15px;
}

.promotion-dashboard-page {
    color: #333;
    background: #eff0f4;
}

.promotion-dashboard-block,
.promotion-dashboard-calendar {
    margin: 0 0 15px;
    padding: 15px;
    background: #fff;
    box-sizing: border-box;
}

.promotion-dashboard-head {
    display: flex;
    align-items: center;
    min-height: 24px;
    line-height: 24px;
}

.promotion-dashboard-title {
    color: #333;
    font-size: 16px;
}

.promotion-dashboard-subtitle {
    margin-left: 10px;
    color: #909399;
    font-size: 14px;
}

.promotion-dashboard-more {
    margin-left: auto;
    color: var(--base-color, #1267f5);
}

.promotion-dashboard-summary-body {
    display: flex;
    flex-wrap: wrap;
    padding: 10px !important;
}

.promotion-dashboard-summary-item {
    display: flex;
    width: 33.333%;
    flex-direction: column;
    justify-content: center;
}

.promotion-dashboard-summary-item .title {
    margin: 5px 0 0;
    color: #909399;
    font-size: 14px;
}

.promotion-dashboard-summary-item .num {
    max-width: 250px;
    margin: 10px 0 0;
    color: #666;
    font-size: 26px;
    font-weight: 400;
    line-height: 32px;
}

.promotion-dashboard-card-grid {
    display: flex;
    flex-wrap: wrap;
}

.promotion-dashboard-card {
    width: 25%;
    margin-top: 15px;
    color: #333;
    text-decoration: none;
    box-sizing: border-box;
}

.promotion-dashboard-card-main,
.promotion-dashboard-card-detail {
    margin-right: 15px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.promotion-dashboard-card-main {
    display: flex;
    align-items: center;
    min-height: 61px;
    padding: 10px;
}

.promotion-dashboard-card:hover .promotion-dashboard-card-main,
.promotion-dashboard-card:hover .promotion-dashboard-card-detail {
    border-color: #d8dde8;
}

.promotion-dashboard-card-icon {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    flex: 0 0 40px;
}

.promotion-dashboard-card-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.promotion-dashboard-card-info {
    display: flex;
    min-width: 0;
    color: #333;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
}

.promotion-dashboard-card-title,
.promotion-dashboard-card-desc,
.promotion-dashboard-card-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promotion-dashboard-card-title {
    color: #333;
    line-height: 20px;
}

.promotion-dashboard-card-desc {
    color: #999;
    font-size: 12px;
    line-height: 20px;
}

.promotion-dashboard-config-card .old-switch {
    margin-left: 8px;
    flex: 0 0 auto;
}

.promotion-dashboard-card-detail {
    display: block;
    padding: 10px;
    color: #333;
    border-top: 0;
    line-height: 14px;
    text-decoration: none;
}

.promotion-dashboard-activity-card .promotion-dashboard-card-main {
    min-height: 62px;
}

.promotion-dashboard-calendar {
    position: relative;
    min-height: 400px;
}

.promotion-dashboard-calendar-head {
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
}

.promotion-calendar-month {
    display: inline-block;
    width: 150px;
    text-align: center;
}

.promotion-calendar-arrow {
    padding: 0;
    color: #333;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.promotion-calendar-arrow:hover {
    color: var(--base-color, #1267f5);
}

.promotion-dashboard-calendar-body {
    position: relative;
}

.promotion-calendar-row {
    display: flex;
    height: 40px;
    line-height: 40px;
}

.promotion-calendar-group {
    border-bottom: 1px solid #eee;
}

.promotion-calendar-name {
    width: 180px;
    padding-right: 10px;
    overflow: hidden;
    border-right: 1px solid #eee;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    flex: 0 0 180px;
}

.promotion-calendar-name a {
    color: #333;
}

.promotion-calendar-days {
    display: flex;
    width: 0;
    min-width: 0;
    flex: 1;
}

.promotion-calendar-days > span {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.promotion-calendar-days-head {
    height: 36px;
    margin-top: 15px;
    background: #f2f3f5;
    line-height: 36px;
}

.promotion-calendar-tag {
    margin-right: 4px;
    padding: 2px 5px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    border-radius: 3px;
}

.promotion-calendar-progress {
    display: block;
    width: 100%;
    height: 15px;
}

.promotion-calendar-progress.start {
    border-radius: 15px 0 0 15px;
}

.promotion-calendar-progress.end {
    border-radius: 0 15px 15px 0;
}

.promotion-calendar-progress.start.end {
    border-radius: 15px;
}

.promotion-calendar-empty {
    padding: 200px 0;
    color: #909399;
    text-align: center;
}

.promotion-calendar-empty a {
    color: var(--base-color, #1267f5);
}

.promotion-calendar-loading {
    position: absolute;
    inset: 0;
    padding-top: 180px;
    color: var(--base-color, #1267f5);
    background: rgba(255, 255, 255, .6);
    text-align: center;
    box-sizing: border-box;
}

.promotion-calendar-loading[hidden] {
    display: none;
}

@media (max-width: 1450px) {
    .promotion-dashboard-card {
        width: 33.333%;
    }
}

.shop-content-list .old-table {
    margin: 0;
}

.shop-content-list .pagination {
    padding: 14px 16px;
}

.shop-help-category-sort-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.shop-help-category-prompt {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #999;
    cursor: help;
}

.shop-help-category-prompt .iconfont {
    font-size: 14px;
}

.shop-help-category-prompt-box {
    position: absolute;
    z-index: 20;
    top: 24px;
    left: 50%;
    display: none;
    width: 250px;
    padding: 10px 12px;
    transform: translateX(-50%);
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    color: #666;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    white-space: normal;
}

.shop-help-category-prompt:hover .shop-help-category-prompt-box,
.shop-help-category-prompt:focus .shop-help-category-prompt-box {
    display: block;
}

.shop-content-form {
    margin: 18px;
    padding-top: 10px;
    background: #fff;
}

.shop-content-form .layui-form-label {
    width: 150px;
    padding: 7px 12px 7px 0;
}

.shop-content-form .layui-input-block {
    margin-left: 162px;
    min-height: 34px;
}

.shop-content-form .len-long {
    width: 450px;
}

.shop-content-form .len-mid {
    width: 250px;
}

.shop-content-form .len-short {
    width: 120px;
}

.shop-content-form .word-aux,
.shop-content-form .layui-word-aux {
    margin-left: 162px;
    color: #999;
    font-size: 12px;
}

.shop-content-form .special-length {
    width: 950px;
}

.shop-content-form .form-row {
    margin-left: 162px;
    padding: 10px 0 30px;
}

.shop-content-form .form-message {
    display: inline-block;
    margin-left: 12px;
    color: #e33;
}

/* 文章、帮助和公告沿用旧版内容页的 200px 表单标签基准。 */
.shop-legacy-content-form {
    margin: 0;
    padding: 15px 0;
    border-radius: 5px;
}

.shop-legacy-content-form .layui-form-label {
    width: 200px;
}

.shop-legacy-content-form .layui-input-block {
    margin-left: 200px;
}

.shop-legacy-content-form .word-aux,
.shop-legacy-content-form .layui-word-aux {
    margin-left: 200px;
}

.shop-legacy-content-form .form-row {
    margin-left: 200px;
}

.shop-content-list .table-btn .disabled {
    color: #9aa7bd;
    border-color: #d9e1ee;
    background: #f6f8fb;
    cursor: not-allowed;
}

.shop-notice-detail {
    margin: 18px;
    padding: 20px 0 30px;
    background: #fff;
}

.shop-notice-detail .guide-title,
.shop-notice-detail .guide-time {
    text-align: center;
}

.shop-notice-detail .guide-title {
    height: 50px;
    line-height: 50px;
    margin: 0;
    font-size: 25px;
    font-weight: 600;
}

.shop-notice-detail .guide-time {
    margin: 0;
    line-height: 24px;
    color: #999;
}

.shop-notice-detail .guide-content {
    padding: 10px 80px 0;
    min-height: 260px;
}

.shop-notice-detail .form-row {
    padding: 20px 80px 0;
}

.shop-content-form .old-radio-row {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    min-height: 32px;
}

.shop-content-form .old-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 32px;
}

.shop-content-form textarea.article-abstract {
    height: 86px;
    min-height: 86px;
}

.article-cover-picker {
    width: 100px;
    height: 100px;
    border: 1px dashed #d7dee8;
    background: #fff;
    color: #8a94a6;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.article-cover-picker .upload-default {
    display: grid;
    align-content: center;
    justify-items: center;
    height: 100%;
    line-height: 20px;
}

.article-cover-picker .upload-default i {
    font-style: normal;
    font-size: 30px;
    line-height: 30px;
    color: #6d7278;
}

.article-cover-picker .upload-default p {
    margin: 0;
    color: #5a5a5a;
    font-size: 12px;
    white-space: nowrap;
}

.article-cover-picker.has-image {
    border-style: solid;
    background: #f4f7fb;
}

.article-cover-picker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-cover-picker .cover-replace {
    position: absolute;
    inset: auto 0 0;
    height: 24px;
    line-height: 24px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, .45);
}

.article-category-modal-form .layui-form-item {
    margin-bottom: 18px;
}

.article-category-modal-form .layui-form-label.mid {
    width: 106px;
    padding: 7px 12px 7px 0;
}

.article-category-modal-form .layui-input-block {
    margin-left: 118px;
}

.article-category-modal-form .len-mid {
    width: 250px;
}

.article-category-modal-form .len-short {
    width: 120px;
}

.article-category-modal-form .word-aux.mid {
    margin-left: 118px;
    color: #999;
    font-size: 12px;
}

.article-category-modal-form .form-message {
    display: inline-block;
    margin-left: 12px;
    color: #e33;
}

.album-toolbar .tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-album-panel {
    display: flex;
    align-items: stretch;
    gap: 45px;
    min-height: 560px;
    margin: 0 0 var(--old-page-gap);
    padding: var(--old-page-pad);
    background: #fff;
    border: 1px solid #e6e8ef;
    border-top: 0;
    border-radius: 0 0 2px 2px;
}

.shop-album-panel .album-list {
    width: 170px;
    height: 530px;
    flex: 0 0 170px;
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.album-tree,
.album-tree-children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.album-tree {
    flex: 1;
    overflow-y: auto;
    background: #f5f5f5;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.album-tree::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.album-tree-item {
    margin: 0;
    color: #333;
}

.album-tree-main {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.album-tree-main a {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.album-tree-main a span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.album-tree-main a em {
    font-style: normal;
    color: #999;
    font-size: 12px;
}

.album-tree-item.selected > .album-tree-main {
    background: #e8e8e8;
}

.album-tree-item.selected > .album-tree-main a {
    color: #105cfb;
}

.album-tree-item.level-2 .album-tree-main a {
    padding-left: 6px;
}

.album-tree-arrow {
    width: 24px;
    height: 40px;
    flex: 0 0 24px;
    position: relative;
    cursor: pointer;
}

.album-tree-arrow::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 8px;
    width: 6px;
    height: 6px;
    border: 1px solid #555;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}

.album-tree-arrow.open::after {
    top: 14px;
    transform: rotate(135deg);
}

.album-tree-arrow.empty::after {
    display: none;
}

.album-tree-item.closed > .album-tree-children {
    display: none;
}

.shop-album-panel .album-content {
    flex: 1;
    min-width: 0;
}

.album-content-title {
    min-height: 28px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.album-content-title .text-action {
    line-height: 22px;
}

.album-img-box {
    min-height: 405px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    list-style: none;
}

.album-img-box > li {
    width: 170px;
    margin: 0 20px 25px 0;
    text-align: center;
    border: 1px solid #eee;
    background: #fff;
    position: relative;
}

.album-img-box > li.video {
    width: 200px;
}

.album-img-box > li.selected {
    border-color: #105cfb;
}

.album-img-box > li .iconxuanzhong {
    position: absolute;
    right: -1px;
    bottom: -1px;
    display: none;
    width: 22px;
    height: 22px;
    line-height: 22px;
    color: #105cfb;
    font-size: 22px;
}

.album-img-box > li.selected .iconxuanzhong {
    display: block;
}

.album-pic {
    position: relative;
    width: 130px;
    height: 130px;
    line-height: 130px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
}

.album-img-box > li.video .album-pic {
    width: 200px;
    height: 200px;
    line-height: 200px;
    background: #ccc;
}

.album-pic img,
.album-pic video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.album-no-file {
    color: #9aa4b2;
}

.album-img-select {
    text-align: left;
    padding: 5px;
    border-top: 1px solid #eee;
}

.album-img-select .pic-name {
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-img-select .pic-spec {
    color: #999;
    font-size: 12px;
    line-height: 1.5;
}

.album-img-operation {
    min-height: 30px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    gap: 3px;
    font-size: 12px;
}

.album-img-operation .text-action {
    font-size: 12px;
    min-height: 20px;
    line-height: 20px;
}

.album-empty {
    width: 100% !important;
    min-height: 120px;
    border: 0 !important;
    color: #8a94a6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-foot-operation {
    min-height: 36px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.album-content-bar {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
}

.album-foot-operation .page {
    margin-left: auto;
}

.album-upload-modal {
    width: 580px;
}

.album-group-modal {
    width: 500px;
}

.album-move-modal {
    width: 360px;
}

.album-group-form,
.album-move-form,
.multuple-list-box {
    padding: 22px 24px 18px;
}

.album-group-form .layui-form-item,
.multuple-list-box .layui-form-item {
    align-items: flex-start;
}

.album-group-form .layui-form-label.mid,
.album-move-form .layui-form-label.mid {
    width: 112px;
}

.album-group-form .layui-input-block {
    min-width: 0;
}

.album-group-form .len-mid {
    width: 260px;
}

.album-group-form .form-row.mid,
.album-move-form .form-row.mid {
    margin-left: 112px;
    padding-left: 0;
}

.multuple-list-box .layui-form-label.sm {
    width: 90px;
    padding: 7px 12px 7px 0;
}

.multuple-list-box .layui-input-block {
    margin-left: 102px;
    min-width: 0;
}

.multuple-list {
    height: 300px;
    margin: 0;
    padding: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    overflow-y: auto;
    list-style: none;
}

.multuple-list-img {
    width: 120px;
    height: 120px;
    border: 1px solid #ddd;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
}

.multuple-list-img .bg-color {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    color: #fff;
    background: #105cfb;
    font-size: 18px;
}

.multuple-list-image,
.multuple-list-img img,
.multuple-list-img video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.upload-close-modal {
    display: none;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    line-height: 20px;
    text-align: center;
    font-size: 18px;
    z-index: 1;
}

.multuple-list-img:hover .upload-close-modal {
    display: block;
}

.tips {
    display: none;
    position: absolute;
    left: 3%;
    top: -24px;
    max-width: 180px;
    padding: 4px 6px;
    color: #fff;
    background: #666;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multuple-list-img:hover .tips {
    display: block;
}

.img-group {
    max-height: 300px;
    padding: 18px 24px 0;
    overflow-y: auto;
}

.img-group label {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.img-group .one-group {
    margin-left: 18px;
}

.img-group .two-group {
    margin-left: 42px;
}

.shop-diy-management-page {
    margin-bottom: var(--old-page-gap);
}

.shop-diy-management-page .management-info {
    display: flex;
    margin-bottom: 50px;
}

.shop-diy-management-page .phone-wrap {
    width: 340px;
    min-width: 340px;
    height: 667px;
}

.shop-diy-management-page .iframe-wrap {
    width: 340px;
    height: 100%;
    border: 1px solid #eee;
    background: #fff;
}

.shop-diy-management-page .iframe-wrap #iframe-management {
    width: 340px;
    height: 100%;
    display: block;
}

.shop-diy-management-page .management-phone-static {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.shop-diy-management-page .management-phone-static img {
    display: block;
    width: 100%;
    height: auto;
}

.shop-diy-management-page .management-phone-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    border-top: 1px solid #eee;
    background: rgba(255, 255, 255, .96);
    color: #333;
    font-size: 12px;
    text-align: center;
}

.shop-diy-management-page .management-empty {
    text-align: center;
    color: #666;
}

.shop-diy-management-page .management-empty img {
    display: block;
    width: 190px;
    margin: 80px auto 40px;
}

.shop-diy-management-page .management-empty p {
    margin: 0 0 8px;
}

.shop-diy-management-page .management-info-left {
    width: 100%;
    max-width: 680px;
    margin-left: 40px;
}

.shop-diy-management-page .management-info-left-box {
    position: relative;
    padding: 20px;
    border: 1px solid #eee;
    background: #fff;
}

.shop-diy-management-page .management-info-left-box::after {
    position: absolute;
    content: "";
    width: 26px;
    height: 26px;
    background: #fff;
    transform: rotate(-45deg);
    left: -13px;
    top: 26px;
    border: 1px solid #eee;
    border-right: 0;
    border-bottom: 0;
}

.shop-diy-management-page .management-info-top {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.shop-diy-management-page .management-info-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 800;
}

.shop-diy-management-page .word-aux {
    margin: 10px 0 0;
    color: #999;
}

.shop-diy-management-page .management-info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #f7f8fa;
}

.shop-diy-management-page .management-info-box-img {
    width: 100px;
    min-height: 100px;
}

.shop-diy-management-page .management-info-box-img .tips {
    width: 100px;
    height: 100px;
    margin: 0;
    border: 1px dashed #ddd;
    box-sizing: border-box;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
}

.shop-diy-management-page .management-qrcode {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.shop-diy-management-page .management-qrcode canvas,
.shop-diy-management-page .management-qrcode img,
.shop-diy-management-page .management-qrcode table {
    width: 100px !important;
    height: 100px !important;
    display: block;
}

.shop-diy-management-page .blockflex {
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
}

.shop-diy-bottom-editor {
    flex: 1;
    min-width: 0;
    max-width: 760px;
}

.management-info-box-title {
    color: #333;
    line-height: 28px;
}

.management-info-box-title-bottom {
    color: #999;
    line-height: 24px;
}

.shop-diy-page-list .layui-tab-title {
    margin-bottom: 0;
}

.shop-diy-page-list .layui-tab-title li a {
    display: block;
}

.shop-diy-page-list .layui-tab-content {
    padding: var(--old-page-pad) 0 0;
}

.shop-diy-page-list .old-table,
.shop-diy-route-list .old-table {
    margin: 0;
}

.shop-diy-page-list .table-actions {
    min-height: 44px;
    padding: 15px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-diy-page-list .table-actions .page {
    margin-left: auto;
}

.shop-diy-page-list .operation-wrap {
    position: relative;
    display: inline-block;
}

.shop-diy-page-list .popup-qrcode-wrap {
    position: absolute;
    z-index: 1200;
    top: -73px;
    left: -180px;
    width: 170px;
    height: 230px;
    padding: 10px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(200, 201, 204, .5);
    text-align: center;
}

.shop-diy-page-list .popup-qrcode-wrap[hidden] {
    display: none;
}

.shop-diy-page-list .popup-qrcode-wrap::before,
.shop-diy-page-list .popup-qrcode-wrap::after {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 0;
    height: 0;
    content: "";
    pointer-events: none;
    border: solid transparent;
}

.shop-diy-page-list .popup-qrcode-wrap::before {
    margin-top: -29px;
    border-width: 8px;
    border-left-color: #e5e5e5;
}

.shop-diy-page-list .popup-qrcode-wrap::after {
    margin-top: -31px;
    border-width: 7px;
    border-left-color: #fff;
}

.shop-diy-page-list .page-qrcode-box {
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.shop-diy-page-list .page-qrcode-box canvas,
.shop-diy-page-list .page-qrcode-box img,
.shop-diy-page-list .page-qrcode-box table {
    width: 150px !important;
    height: 150px !important;
    display: block;
}

.shop-diy-page-list .popup-qrcode-wrap p {
    margin: 5px 0;
    color: #666;
    font-size: 12px;
    line-height: 1.8;
}

.old-modal-mask .shop-diy-page-modal {
    position: static;
    inset: auto;
    z-index: auto;
    width: auto;
    max-width: calc(100vw - 80px);
}

.shop-diy-page-form {
    padding: 20px 20px 10px;
}

.shop-diy-page-form .select-page {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
    gap: 0;
}

.shop-diy-page-form .select-page .item {
    position: relative;
    width: 200px;
    height: 390px;
    margin: 0 30px 0 0;
    padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #e9edef;
    background: #fff;
    cursor: pointer;
}

.shop-diy-page-form .select-page .item:last-child {
    margin-right: 0;
}

.shop-diy-page-form .select-page .item .checked {
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 101;
    display: none;
    font-size: 30px;
}

.shop-diy-page-form .select-page .item.selected .checked {
    display: block;
}

.shop-diy-page-form .select-page .item .mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 52.65%, #fff 83.57%);
    pointer-events: none;
}

.shop-diy-page-form .select-page .item img {
    width: 180px;
    max-width: none;
}

.shop-diy-page-form .select-page .item .info {
    position: absolute;
    left: 0;
    bottom: 12px;
    z-index: 100;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #333;
    background: #fff;
}

.shop-diy-page-form .select-page .item .info i {
    margin-bottom: 10px;
    color: #333;
    font-size: 24px;
}

.shop-diy-page-form .select-page .item .info span {
    font-size: 16px;
    font-weight: bold;
}

.shop-diy-page-form .layui-form-item {
    margin: 18px 0 0;
}

.shop-diy-page-form .diy-selected-type {
    display: inline-block;
    min-height: 34px;
    line-height: 34px;
    color: #333;
}

.shop-diy-page-form .select-btn {
    height: 40px;
    margin-top: 20px;
    padding-top: 10px;
    padding-right: 10px;
    border-top: 1px solid #e9edef;
    line-height: 40px;
    text-align: right;
}

.shop-diy-page-form .form-message,
.shop-diy-bottom-editor .form-message {
    display: inline-block;
    margin-left: 12px;
    color: #0fae58;
}

.shop-diy-page-form .form-message.error,
.shop-diy-bottom-editor .form-message.error {
    color: #e33;
}

.shop-diy-route-list .old-pagination {
    padding: 15px 0 0;
}

.route-name-col {
    width: 10%;
}

.route-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: visible;
}

.route-wrap > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.route-wrap .text-action {
    white-space: nowrap;
}

.route-wrap .promote-wrap {
    position: relative;
    flex: 0 0 auto;
}

.route-qrcode-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1263fb;
    font-size: 24px;
    line-height: 26px;
    vertical-align: bottom;
    cursor: pointer;
}

.route-wrap .qrcode-wrap {
    display: none;
    position: absolute;
    z-index: 2000;
    top: 40px;
    right: 5px;
    width: 200px;
    margin-bottom: 20px;
    transform: translateX(10px);
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 2px 8px 0 rgba(200, 201, 204, 0.5);
    color: #303133;
    font-size: 14px;
    line-height: 20px;
}

.route-wrap .qrcode-wrap::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 7px;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 8px;
    border-bottom-color: #fff;
    pointer-events: none;
}

.route-wrap .qrcode-wrap h4 {
    margin: 0;
    border-bottom: 2px solid #1263fb;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.route-wrap .qrcode-wrap img,
.route-wrap .qrcode-wrap canvas,
.route-wrap .qrcode-wrap table {
    display: block;
    width: 130px !important;
    height: 130px !important;
    max-width: 100%;
    margin: 10px auto;
}

.route-wrap .qrcode-wrap span {
    display: block;
    margin-bottom: 10px;
    color: #1263fb;
    text-align: center;
    cursor: pointer;
}

.qr-target {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-message {
    width: 150px;
    min-height: 80px;
    color: #909399;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 20px;
}

.shop-promote-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 155px;
    background: rgba(0, 0, 0, 0.28);
}

.shop-promote-modal[hidden] {
    display: none;
}

.shop-promote-panel {
    width: 730px;
    min-height: 450px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
}

.shop-promote-modal .marked-message {
    height: 48px;
    padding: 0 16px;
    background: #fff5ed;
    color: #666;
    font-size: 14px;
    line-height: 50px;
    display: flex;
}

.shop-promote-modal .marked-message p {
    margin: 0;
}

.shop-promote-modal .promote-flex {
    display: flex;
    margin-top: 15px;
    padding: 0 10px;
}

.shop-promote-modal .promote-img {
    width: 200px;
    height: 200px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

.shop-promote-modal .promote-img img,
.shop-promote-modal .promote-img canvas,
.shop-promote-modal .promote-img table {
    width: 160px !important;
    height: 160px !important;
}

.shop-promote-modal .label-width {
    width: 100px;
}

.shop-promote-modal .block-left {
    display: flex;
    margin-left: 100px !important;
    min-height: 34px;
    align-items: center;
}

.shop-promote-modal .promote-radio {
    color: #333;
}

.shop-promote-modal .h5-path {
    width: 300px;
    margin-left: 20px;
}

.shop-promote-modal .h5-path span {
    display: block;
    margin-bottom: 10px;
}

.shop-promote-modal .h5-path p {
    margin: 0;
}

.shop-promote-modal .h5-path p input {
    width: 150px;
    height: 30px;
    margin-right: 10px;
    padding: 0 5px;
    border: 1px solid #e6e6e5;
    border-radius: 5px;
    line-height: 30px;
}

.shop-promote-modal .promote-download {
    margin: 15px 0 0 20px;
}

.shop-diy-editor-title {
    height: 40px;
    line-height: 40px;
    font-weight: 600;
}

.shop-diy-bottom-editor textarea {
    min-height: 390px;
    font-family: Consolas, Monaco, monospace;
    line-height: 1.5;
}

.shop-diy-bottom-editor .form-row {
    margin: 14px 0 20px;
}

.shop-diy-route-ref {
    padding-top: 12px;
    border-top: 1px solid #edf0f5;
}

.shop-diy-route-ref .link-button {
    margin: 0 8px 8px 0;
}

.shop-diy-bottom {
    position: relative;
    min-height: calc(100vh - 110px);
    margin: 0 0 var(--old-page-gap);
    padding: 15px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

.bottom-nav-design .preview {
    float: left;
    width: 320px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.bottom-nav-design .preview-head {
    position: relative;
    height: 64px;
    background: url("/assets/legacy-diy/diyview/preview_head_old.png") no-repeat;
    background-size: 100% 64px;
}

.bottom-nav-design .preview-head > span {
    display: block;
    height: 64px;
    margin: 0 40px 0 50px;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    line-height: 82px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-nav-design .preview-block {
    position: relative;
    min-height: 100px;
    border: 1px solid #e5e5e5;
    border-top: 0;
    background: #fff;
}

.bottom-nav-design .preview-block ul {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
    background: #fff;
}

.bottom-nav-design .preview-block li {
    flex: 1 1 0;
    min-width: 0;
    margin: 5px 0;
    list-style: none;
    text-align: center;
}

.bottom-nav-design .preview-block li > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    line-height: 30px;
}

.bottom-nav-design .preview-block li img {
    width: 20px;
    max-width: 20px;
    max-height: 20px;
}

.bottom-nav-design .preview-block li i {
    font-family: "icondiy" !important;
    font-size: 20px;
    font-style: normal;
    line-height: 1;
}

.bottom-nav-design .preview-block li span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-nav-empty-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #c8c9cc;
    border: 1px dashed #c8c9cc;
    font-size: 16px !important;
    line-height: 18px !important;
}

.bottom-nav-design .custom-save {
    position: relative;
    margin-top: 20px;
    padding: 0;
    text-align: center;
}

.bottom-nav-design .custom-save .save {
    min-width: 60px;
    height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: #105cfb;
    color: #fff;
    font-size: 14px;
    line-height: 34px;
    cursor: pointer;
}

.bottom-nav-message {
    position: absolute;
    top: 7px;
    left: calc(50% + 42px);
    margin-left: 0;
    color: #0fae58;
    white-space: nowrap;
}

.bottom-nav-message.error {
    color: #e33;
}

.bottom-nav-design .edit-attribute {
    float: left;
    width: 400px;
    height: calc(100vh - 150px);
    margin-left: 20px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    background: #fff;
}

.bottom-nav-design .edit-attribute::-webkit-scrollbar {
    width: 4px;
}

.bottom-nav-design .edit-attribute::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.bottom-nav-design .edit-attribute::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.bottom-menu-config {
    padding: 15px;
}

.bottom-menu-config .template-edit-title {
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid #1263fb;
}

.bottom-menu-config .template-edit-title h3 {
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}

.bottom-menu-config .layui-form-item {
    min-height: 34px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.bottom-menu-config .layui-form-label.sm {
    width: 70px;
    padding: 7px 10px 7px 0;
    color: #909399;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    box-sizing: border-box;
}

.bottom-menu-config .layui-input-block {
    flex: 1;
    min-width: 0;
    margin-left: 0;
}

.bottom-nav-type-text {
    display: inline-block;
    margin-bottom: 8px;
    color: #303133;
}

.bottom-nav-type-list {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.bottom-nav-type-list li {
    width: 44px;
    height: 44px;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #606266;
    cursor: pointer;
}

.bottom-nav-type-list li.border-color {
    border-color: #1263fb;
    color: #1263fb;
}

.bottom-nav-type-list .iconfont {
    font-size: 22px;
}

.bottom-nav-radio-group {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bottom-nav-radio {
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #303133;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.bottom-nav-radio i {
    position: relative;
    width: 14px;
    height: 14px;
    border: 1px solid #c0c4cc;
    border-radius: 50%;
    box-sizing: border-box;
}

.bottom-nav-radio.layui-form-radioed i {
    border-color: #1263fb;
}

.bottom-nav-radio.layui-form-radioed i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1263fb;
}

.bottom-nav-radio.layui-form-radioed span {
    color: #1263fb;
}

.bottom-nav-color-fields .bottom-nav-color {
    width: 80px;
    height: 32px;
    padding: 2px;
}

.bottom-menu-config .bottom-menu-set {
    margin: 0;
    padding: 0;
}

.bottom-menu-config .bottom-menu-set > li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 16px;
    padding: 10px 10px 10px 25px;
    border: 1px dashed #e5e5e5;
    background: #fff;
    list-style: none;
}

.bottom-menu-config .bottom-menu-set > li:first-child {
    margin-top: 0;
}

.bottom-menu-config .bottom-menu-set > li::before {
    content: none;
}

.bottom-menu-config .bottom-menu-set > li.dragging {
    opacity: .6;
}

.bottom-menu-config .bottom-menu-set > li.drag-over {
    border-color: var(--old-blue);
}

.bottom-menu-config .bottom-nav-drag {
    position: absolute;
    top: calc(50% - 11px);
    left: 8px;
    color: #909399;
    font-size: 20px;
    line-height: 22px;
    cursor: move;
}

.bottom-menu-config .content-block {
    width: 100%;
}

.bottom-menu-config .image-block {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-top: 15px;
    margin-right: 20px;
}

.bottom-menu-config .icon-block {
    position: relative;
    display: inline-block;
    width: 64px;
    margin-right: 10px;
    color: #303133;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    vertical-align: top;
}

.bottom-menu-config .icon-box,
.bottom-menu-config .upload-box {
    position: relative;
    width: 60px;
    height: 60px;
    border: 1px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    color: #909399;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
}

.bottom-menu-config .icon-box img,
.bottom-menu-config .upload-box img {
    max-width: 34px;
    max-height: 34px;
}

.bottom-menu-config .icon-box .add {
    color: #1263fb;
    font-size: 26px;
    font-style: normal;
}

.bottom-menu-config .icon-box .icondiy {
    font-family: "icondiy" !important;
    color: #303133;
    font-size: 24px;
    font-style: normal;
}

.bottom-menu-config .icon-box .operation,
.bottom-menu-config .upload-box .operation {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
}

.bottom-menu-config .icon-box:hover .operation,
.bottom-menu-config .upload-box:hover .operation {
    display: flex;
}

.bottom-menu-config .operation-warp {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-menu-config .operation-warp button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}

.bottom-menu-config .js-replace {
    padding: 5px 0;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    line-height: 1;
    text-align: center;
}

.bottom-menu-config .icon-block .action-box {
    position: absolute;
    right: -50px;
    top: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
}

.bottom-menu-config .icon-block:hover .action-box {
    display: flex;
}

.bottom-menu-config .icon-block .action {
    position: relative;
    width: 42px;
    height: 28px;
    margin-left: 6px;
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    font-size: 12px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.bottom-menu-config .icon-block .action input[type="color"] {
    position: absolute;
    inset: 0;
    width: 42px;
    height: 28px;
    opacity: 0;
    cursor: pointer;
}

.bottom-menu-config .icon-text {
    width: 64px;
    height: 30px;
    padding: 0 13px;
    color: #606266;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
}

.bottom-icon-fields {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bottom-icon-fields .layui-input {
    width: 100%;
    height: 30px;
}

.bottom-icon-shortcuts {
    display: flex;
    gap: 6px;
}

.bottom-icon-shortcuts .link-button {
    height: 28px;
    min-height: 28px;
    padding: 0 8px;
    line-height: 26px;
}

.bottom-icon-shortcuts .link-button:disabled {
    color: #c0c4cc;
    border-color: #ebeef5;
    cursor: not-allowed;
}

.bottom-link-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bottom-link-select .layui-input {
    width: 100%;
    height: 32px;
}

.bottom-menu-config .bottom-menu-set > li .del {
    position: absolute;
    top: -10px;
    right: -10px;
    display: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #909399;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
}

.bottom-menu-config .bottom-menu-set > li:hover .del {
    display: block;
}

.bottom-menu-config .add-item {
    margin: 10px 0;
    padding: 10px;
    border: 1px dashed #e5e5e5;
    color: #1263fb;
    text-align: center;
    cursor: pointer;
}

.bottom-menu-config .add-item i {
    margin-right: 10px;
    font-size: 18px;
    font-style: normal;
    vertical-align: middle;
}

.bottom-menu-config .add-item span {
    vertical-align: middle;
}

.bottom-menu-config p.hint {
    margin: 10px;
    color: #999;
    font-size: 12px;
}

.bottom-icon-picker-mask {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
}

.bottom-icon-picker-mask[hidden] {
    display: none;
}

.bottom-icon-picker {
    width: 560px;
    max-width: calc(100vw - 60px);
    max-height: calc(100vh - 100px);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
}

.bottom-icon-picker-title {
    height: 48px;
    padding: 0 15px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
}

.bottom-icon-picker-title button {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #606266;
    font-size: 22px;
    line-height: 28px;
    cursor: pointer;
}

.bottom-icon-picker-actions {
    height: 56px;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #909399;
    box-sizing: border-box;
}

.bottom-icon-picker-actions .layui-btn {
    height: 32px;
    min-height: 32px;
    padding: 0 14px;
    line-height: 30px;
}

.bottom-icon-picker-grid {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 10px;
    overflow: auto;
}

.bottom-icon-picker-grid button {
    height: 46px;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #303133;
    cursor: pointer;
}

.bottom-icon-picker-grid button:hover {
    border-color: #1263fb;
    color: #1263fb;
}

.bottom-icon-picker-grid .icondiy {
    font-family: "icondiy" !important;
    font-size: 22px;
    font-style: normal;
}

.bottom-icon-picker-empty {
    grid-column: 1 / -1;
    padding: 30px 0;
    color: #909399;
    text-align: center;
}

.diy-icon-picker-mask {
    z-index: 12000;
}

.diy-icon-picker .bottom-icon-picker-actions .layui-input {
    width: 320px;
}

.diy-icon-picker .bottom-icon-picker-actions span {
    color: #909399;
    font-size: 12px;
}

.diy-icon-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 210px;
}

.diy-icon-select > .icondiy {
    flex: 0 0 auto;
    font-size: 22px;
}

.diy-icon-select > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-diy-edit {
    position: relative;
    margin: 0 0 var(--old-page-gap);
    padding: var(--old-diy-top-gap) 0 0;
    min-height: var(--diy-work-height, 620px);
    background: #f7f8fa;
    overflow: hidden;
    box-sizing: border-box;
}

.shop-diy-editor-page .shop-diy-edit {
    margin-bottom: 0;
}

.shop-diy-top-save {
    display: none;
}

.diy-component-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: var(--old-diy-component-width);
    height: var(--diy-work-height, 620px);
    padding: 0 var(--old-diy-column-pad);
    background: #fff;
    overflow: hidden;
    user-select: none;
    box-sizing: content-box;
}

.diy-attr-panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: var(--old-diy-attr-width);
    height: var(--diy-work-height, 620px);
    min-height: 0;
    padding: var(--old-diy-column-pad);
    background: #fff;
    border-top: 1px solid #f7f8fa;
    overflow: hidden;
    box-sizing: content-box;
}

.diy-attr-panel .attr-wrap {
    width: var(--old-diy-attr-space);
    height: calc(var(--diy-work-height, 620px) - 1px);
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
}

.diy-attr-panel .restore-wrap {
    width: var(--old-diy-attr-inner-width);
}

.diy-panel-tabs {
    display: flex;
    align-items: stretch;
    height: 40px;
    margin: 10px 0 5px -10px;
}

.diy-panel-tabs span {
    flex: 1;
    position: relative;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #303133;
    background: #fff;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
}

.diy-panel-tabs span:last-child {
    border-right: 1px solid #f1f1f1;
}

.diy-panel-tabs .selected {
    color: #303133;
    background: #f1f1f1;
}

.diy-panel-tabs .disabled {
    color: #b8c0cc;
}

.diy-component-group {
    width: 257px;
    height: calc(var(--diy-work-height, 665px) - 55px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.diy-component-group::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.diy-component-empty {
    height: 120px;
    color: #999;
    font-size: 12px;
    line-height: 120px;
    text-align: center;
}

.diy-component-group h3 {
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
    margin: 0;
    font-size: 14px;
    color: #303133;
    font-weight: 500;
    cursor: pointer;
}

.diy-component-group .arrow {
    display: inline-block;
    width: 16px;
    margin-right: 5px;
    color: #7d8795;
}

.diy-component-group h3 img {
    flex: none;
    width: 16px;
    margin-right: 5px;
    transition: transform .2s;
    vertical-align: -3px;
}

.diy-component-group ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.diy-component-subgroup.collapsed h3 img {
    transform: rotate(-90deg);
}

.diy-component-subgroup.collapsed ul {
    display: none;
}

.diy-component-group li {
    float: left;
    width: 78px;
    height: 75px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-component-group li button {
    width: 78px;
    height: 75px;
    border: 0;
    padding: 0;
    background: #fff;
    color: #303133;
    cursor: pointer;
}

.diy-component-group li button:hover {
    color: var(--old-blue);
}

.diy-component-group li.drag-source button {
    color: var(--old-blue);
    opacity: .65;
}

.diy-component-group li.selected button {
    color: var(--old-blue);
}

.diy-component-group li button:disabled {
    color: #bbb;
    cursor: not-allowed;
    background: #fff;
}

.diy-component-group li.disabled {
    color: #bbb;
}

.diy-component-group li.disabled i,
.diy-component-group li.disabled span {
    color: #bbb;
}

.diy-component-group i {
    display: inline-block;
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 23px;
}

.diy-component-group span {
    display: block;
    margin-top: 5px;
    line-height: 18px;
    font-size: 12px;
}

.diy-preview-panel {
    position: relative;
    min-width: 0;
    min-height: var(--diy-work-height, 620px);
    margin-left: var(--old-diy-left-space);
    margin-right: var(--old-diy-attr-space);
    overflow: hidden;
    text-align: center;
}

.diy-preview-panel .preview-restore-wrap {
    margin-right: -12px;
}

.diy-preview-panel .div-wrap {
    position: relative;
    height: var(--diy-work-height, 620px);
    min-height: 525px;
    overflow-x: hidden;
    overflow-y: auto;
}

.diy-preview-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    height: var(--diy-work-height, 620px);
    margin: 0;
    pointer-events: none;
}

.position-page-btn {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 9;
    margin-left: var(--old-diy-action-offset);
    min-width: 78px;
    height: 38px;
    padding: 0 15px;
    border-color: #f7f8fa;
    border-radius: 2px;
    background: #fff;
    color: #303133;
    line-height: 36px;
    white-space: nowrap;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
    box-sizing: border-box;
    pointer-events: auto;
}

.diy-preview-toolbar .quick-action {
    position: absolute;
    left: 50%;
    top: 20%;
    z-index: 9;
    width: 42px;
    margin: 0 0 0 var(--old-diy-action-offset);
    padding: 0;
    list-style: none;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
    pointer-events: auto;
}

.diy-preview-toolbar .quick-action li {
    position: relative;
}

.diy-preview-toolbar .quick-action button {
    width: 42px;
    height: 40px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #303133;
    cursor: pointer;
}

.diy-preview-toolbar .quick-action i {
    display: block;
    line-height: 40px;
    font-size: 20px;
}

.diy-preview-toolbar .quick-action span {
    display: none;
    position: absolute;
    top: 5px;
    right: -60px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 14px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
}

.diy-preview-toolbar .quick-action span::after {
    content: "";
    position: absolute;
    left: -3px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: #fff;
    transform: rotate(45deg);
}

.diy-preview-toolbar .quick-action li:not(.disabled):hover span {
    display: block;
}

.diy-preview-toolbar .quick-action li.disabled i,
.diy-preview-toolbar .quick-action button:disabled i {
    color: #cecece;
}

.diy-preview-toolbar .quick-action li.disabled button,
.diy-preview-toolbar .quick-action button:disabled {
    cursor: default;
}

.diy-phone-frame {
    width: var(--old-diy-phone-width);
    margin: -64px auto 20px;
    padding-top: 64px;
    border: 2px solid #f0f1f3;
    background: #fff;
    background-repeat: no-repeat;
    background-position-y: 128px;
    background-size: 100%;
    text-align: left;
    position: relative;
    box-sizing: content-box;
}

.diy-phone-frame.without-nav {
    margin-top: 0;
    padding-top: 0;
}

.diy-phone-head {
    width: var(--old-diy-phone-width);
    height: 64px;
}

.diy-phone-head[hidden] {
    display: none;
}

.diy-phone-head .nav-tabbar {
    height: 64px;
}

.diy-phone-head .preview-head-div {
    box-sizing: border-box;
    height: 64px;
    background: url("/assets/legacy-diy/diyview/preview_head.png") no-repeat 50%/cover;
    cursor: pointer;
    overflow: hidden;
}

.diy-phone-head .nav-tabbar.style-1 .preview-head-div {
    font-size: 16px;
    line-height: 90px;
}

.diy-phone-head .nav-tabbar.style-1 .preview-head-div span {
    display: inline-block;
    padding: 0 15px;
}

.diy-phone-head .nav-tabbar.style-1.center .preview-head-div span {
    width: 160px;
    margin: 0 auto;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diy-phone-head .nav-tabbar.style-2 .preview-head-div {
    padding: 0 15px;
    line-height: 90px;
}

.diy-phone-head .nav-tabbar.style-2 .preview-head-div span {
    font-size: 16px;
}

.diy-phone-head .nav-tabbar.style-2 img {
    max-width: 150px;
    height: 28px;
    margin-right: 15px;
    vertical-align: middle;
}

.diy-phone-head .nav-tabbar.style-3 .preview-head-div {
    padding: 0 15px;
    line-height: 90px;
}

.diy-phone-head .nav-tabbar.style-3 .img-text-search {
    display: flex;
    align-items: center;
    padding-top: 28px;
    padding-right: 100px;
}

.diy-phone-head .nav-tabbar.style-3 .img-text-search img {
    max-width: 85px;
    height: 30px;
    margin-right: 10px;
}

.diy-phone-head .nav-tabbar.style-3 .top-search-box {
    flex: 1;
    width: 80%;
    height: 30px;
    display: flex;
    align-items: center;
    border: 1px solid #e6e6e6;
    border-radius: 30px;
    background: #fff;
    color: #909399;
    line-height: 1;
}

.diy-phone-head .nav-tabbar.style-3 .top-search-box i {
    margin: 0 5px 0 10px;
}

.diy-phone-head .nav-tabbar.style-3 .top-search-box span {
    line-height: 1;
}

.diy-phone-head .nav-tabbar.style-4 .preview-head-div {
    display: flex;
    padding: 0 15px;
    line-height: 90px;
}

.diy-phone-head .nav-tabbar.style-4 span.store-name {
    margin: 0 5px;
    font-size: 16px;
}

.diy-phone-head .nav-tabbar.style-4 .nearby-store-name {
    display: inline-block;
    margin: -1px 5px 0;
}

.diy-phone-head .nav-tabbar.style-4 .nearby-store-name span {
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .3);
    font-size: 12px;
}

.diy-phone-head .nav-tabbar.style-4 i:first-child {
    font-size: 18px;
}

.diy-phone-head .nav-tabbar.style-4 i:last-child {
    font-size: 14px;
}

.diy-phone-body {
    position: relative;
    min-height: var(--diy-preview-body-min, 400px);
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

.diy-pop-preview-status,
.diy-pop-preview-mask {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 45;
    height: min(520px, var(--diy-preview-body-min, 520px));
    pointer-events: none;
}

.diy-pop-preview-status {
    height: 74px;
    padding: 14px 18px;
    border-bottom: 1px dashed #d7dbe2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .96);
    color: #606266;
    box-sizing: border-box;
}

.diy-pop-preview-status strong,
.diy-pop-preview-status span { display: block; }
.diy-pop-preview-status span { margin-top: 4px; color: #909399; font-size: 12px; }

.diy-pop-preview-mask {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
}

.diy-pop-preview-content { position: relative; display: flex; flex-direction: column; align-items: center; }
.diy-pop-preview-content img { display: block; object-fit: contain; }
.diy-pop-preview-image-error {
    display: none;
    width: 260px;
    min-height: 90px;
    padding: 18px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #d84a3a;
    text-align: center;
    box-sizing: border-box;
}
.diy-pop-preview-content.image-error img { display: none; }
.diy-pop-preview-content.image-error .diy-pop-preview-image-error { display: flex; }
.diy-pop-preview-close {
    width: 30px;
    height: 30px;
    margin-top: 17px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
    font-weight: 300;
    line-height: 25px;
    text-align: center;
    box-sizing: border-box;
}
.diy-pop-preview-empty {
    width: 260px;
    min-height: 90px;
    padding: 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #d84a3a;
    text-align: center;
    box-sizing: border-box;
}

.diy-phone-nav {
    height: 50px;
    border-top: 1px solid #edf0f5;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;
    color: #333;
    font-size: 12px;
}

.diy-phone-nav span {
    max-width: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.diy-preview-empty {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a94a6;
}

.diy-phone-body.is-component-drop-target .diy-preview-empty {
    display: none;
}

.diy-drop-placeholder {
    height: 32px;
    margin: 4px 0;
    border: 1px dashed var(--old-blue);
    background: #f7f8fa;
    box-sizing: border-box;
}

.diy-preview-item-wrap {
    position: relative;
    outline: 2px dotted transparent;
}

.diy-preview-item-wrap[data-preview-draggable="true"] {
    user-select: none;
}

.diy-preview-item-wrap.dragging {
    opacity: .45;
}

.diy-preview-tag {
    position: absolute;
    top: 0;
    left: -90px;
    z-index: 4;
    min-width: 70px;
    min-height: 20px;
    padding: 4px 7px;
    overflow: hidden;
    color: #303133;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.diy-preview-item-wrap:hover .diy-preview-tag,
.diy-preview-item-wrap.is-hover .diy-preview-tag,
.diy-preview-item-wrap.selected .diy-preview-tag {
    color: #303133;
}

.diy-preview-component {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-sizing: border-box;
    cursor: move;
}

.diy-preview-item-wrap > .del {
    display: none;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 20;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #999;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}

.diy-preview-item-wrap:hover > .del,
.diy-preview-item-wrap.is-hover > .del,
.diy-preview-item-wrap.selected > .del {
    display: block;
}

.diy-preview-component,
.diy-preview-component * {
    box-sizing: border-box;
}

.diy-preview-item-wrap:hover:not(.selected),
.diy-preview-item-wrap.is-hover:not(.selected) {
    outline-color: var(--old-blue);
    cursor: move;
}

.diy-preview-item-wrap.selected {
    outline: 2px solid var(--old-blue);
    outline-offset: 0;
}

.diy-preview-component.selected {
    outline: 0;
}

.diy-preview-component.ornament-stroke {
    border: 1px solid #ededed;
}

.diy-preview-component h4 {
    margin: 0;
    font-size: 16px;
}

.diy-preview-component p {
    margin: 6px 0 0;
    color: #999;
}

.diy-preview-component.search {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #8a94a6;
}

.diy-preview-component.search .preview-box {
    padding: 0;
    box-sizing: border-box;
}

.diy-preview-component.search .top-search-form {
    display: flex;
    align-items: center;
    height: 30px;
}

.diy-preview-component.search .search-logo {
    width: auto;
    max-width: 85px;
    height: 30px;
    object-fit: contain;
}

.diy-preview-component.search .search-logo-preview {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 85px;
    height: 30px;
    margin-right: 10px;
    overflow: hidden;
}

.diy-preview-component.search .search-logo-preview em {
    display: none;
    color: #d84a3a;
    font-size: 9px;
    font-style: normal;
    line-height: 1.2;
    text-align: center;
}

.diy-preview-component.search .search-logo-preview.image-error img {
    display: none;
}

.diy-preview-component.search .search-logo-preview.image-error em {
    display: block;
}

.diy-preview-component.search .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    overflow: hidden;
    font-size: 30px;
}

.diy-preview-component.search .top-search-box {
    flex: 1;
    position: relative;
    height: 30px;
    margin-top: 0;
    padding-left: 15px;
    overflow: hidden;
    border-radius: 3px;
    line-height: 30px;
    box-sizing: border-box;
}

.diy-preview-component.search .top-search-box.round {
    border-radius: 30px;
}

.diy-preview-component.search .top-search-intro {
    line-height: 30px;
}

.diy-preview-component.search .top-search-icon {
    position: absolute;
    top: 50%;
    right: 6px;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    text-align: center;
    line-height: 30px;
}

.diy-preview-component.search .top-search-icon i {
    font-size: 18px;
}

.diy-preview-component.search .preview-box-3 .top-search-box {
    display: flex;
    align-items: center;
    height: 34px;
    margin-top: 0;
    padding-left: 0;
}

.diy-preview-component.search .preview-box-3 .top-search-icon {
    position: initial;
    width: auto;
    margin-top: 0;
    padding-left: 13px;
}

.diy-preview-component.search .preview-box-3 .top-search-icon i {
    font-size: 16px;
}

.diy-preview-component.search .preview-box-3 .top-search-intro {
    flex: 1;
    margin-left: 7px;
}

.diy-preview-component.search .preview-box-3 .top-search-btn {
    width: 58px;
    height: 27px;
    margin-top: 1px;
    margin-right: 4px;
    margin-left: auto;
    border-radius: 15px;
    color: #fff;
    line-height: 27px;
    text-align: center;
}

.diy-preview-component.search .preview-box-3 .icon-box {
    width: auto;
    margin-right: 0;
    margin-left: 12px;
    color: #fff;
    font-size: 37px;
}

.diy-preview-component.search .preview-box-3 .search-logo {
    margin: 0;
}

.diy-preview-component.search .preview-box-3 .search-logo-preview {
    margin-right: 0;
    margin-left: 12px;
}

.diy-preview-component.notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fff;
    color: #303133;
}

.diy-preview-component.notice span {
    width: 58px;
    min-width: 58px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--old-blue);
    overflow: hidden;
}

.diy-preview-component.notice span img {
    max-width: 58px;
    max-height: 20px;
    display: block;
    object-fit: contain;
}

.diy-preview-component.notice b {
    width: 1px;
    height: 16px;
    background: #e5e9f2;
}

.diy-preview-component.notice em {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.notice.notice-empty {
    min-height: 72px;
    justify-content: center;
    color: #999ca7;
    font-size: 12px;
    text-align: center;
}

.diy-preview-component.notice.notice-empty em {
    flex: 0 1 auto;
}

.diy-preview-component.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    text-align: center;
}

.diy-preview-component.nav span {
    min-width: 0;
    color: #303133;
    font-size: 12px;
}

.diy-preview-component.nav .nav-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
}

.diy-preview-component.nav .nav-img i,
.diy-preview-component.nav .nav-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diy-preview-component.nav em {
    display: block;
    overflow: hidden;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.graphic-nav-preview {
    display: block;
    padding: 0;
    background: transparent;
    overflow: hidden;
    text-align: center;
}

.diy-preview-component.graphic-nav-preview .graphic-nav {
    padding: 10px 5px;
    background: transparent;
    box-sizing: border-box;
}

.diy-preview-component.graphic-nav-preview .graphic-nav.fixed {
    display: flex;
    flex-wrap: wrap;
}

.diy-preview-component.graphic-nav-preview .graphic-nav.singleSlide {
    display: flex;
    overflow-x: auto;
}

.diy-preview-component.graphic-nav-preview .graphic-nav.singleSlide::-webkit-scrollbar {
    height: 5px;
}

.diy-preview-component.graphic-nav-preview .graphic-nav.singleSlide::-webkit-scrollbar-track {
    background-color: #e4e4e4;
}

.diy-preview-component.graphic-nav-preview .graphic-nav.singleSlide::-webkit-scrollbar-thumb {
    background-color: #999;
}

.diy-preview-component.graphic-nav-preview .graphic-nav.singleSlide .graphic-nav-item {
    flex-shrink: 0;
}

.diy-preview-component.graphic-nav-preview .graphic-nav.pageSlide {
    position: relative;
    padding-bottom: 22px;
}

.diy-preview-component.graphic-nav-preview .graphic-nav.pageSlide .graphic-nav-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

.graphic-nav-preview-radio {
    position: absolute;
    z-index: 3;
    bottom: 7px;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    background: rgba(0, 0, 0, .1);
    cursor: pointer;
    transform: translateX(-50%);
}

.graphic-nav-preview-radio.straightLine {
    width: 13px;
    height: 4px;
    border-radius: 0;
}

.graphic-nav-preview-radio.hide {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: rgba(144, 147, 153, .22);
}

.graphic-nav-preview-radio:checked {
    background: rgba(0, 0, 0, .55);
}

.graphic-nav-preview-radio.is-single {
    display: none;
}

.graphic-nav-preview-page {
    display: none;
}

.graphic-nav-preview-radio:checked + .graphic-nav-preview-page {
    display: block;
}

.diy-preview-component.graphic-nav-preview.ornament-shadow,
.diy-preview-component.quick-nav-preview.ornament-shadow {
    box-shadow: 0 0 5px #ededed;
}

.diy-preview-component.graphic-nav-preview.ornament-stroke,
.diy-preview-component.quick-nav-preview.ornament-stroke {
    border-color: #ededed;
}

.diy-preview-component.graphic-nav-preview .graphic-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 7px 0;
    min-width: 0;
}

.diy-preview-component.graphic-nav-preview .graphic-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.diy-preview-component.graphic-nav-preview .graphic-img img,
.diy-preview-component.graphic-nav-preview .graphic-img > i {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    background: transparent;
}

.diy-preview-component.graphic-nav-preview .graphic-img-empty {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 2px;
    align-items: center;
    justify-content: center;
    color: #b86b60;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
    box-sizing: border-box;
}

.diy-preview-component.graphic-nav-preview .graphic-img > i {
    background: transparent;
    font-size: 25px;
    line-height: 1;
}

.diy-preview-component.graphic-nav-preview .graphic-img > .icon-wrap {
    flex: 0 0 100%;
    min-width: 0;
    min-height: 0;
}

.diy-preview-component.graphic-nav-preview .graphic-img .tag {
    position: absolute;
    top: -5px;
    right: -12px;
    padding: 2px 6px;
    border-radius: 12px 12px 12px 0;
    color: #fff;
    background-color: red;
    font-size: 12px;
    transform: scale(.8);
}

.diy-preview-component.graphic-nav-preview .graphic-text {
    display: block;
    overflow: hidden;
    width: 100%;
    padding-top: 6px;
    padding-bottom: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.graphic-nav-dots {
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.graphic-nav-dots i,
.graphic-nav-dots button,
.graphic-nav-dots label {
    display: block;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .1);
    cursor: pointer;
}

.graphic-nav-dots i.active,
.graphic-nav-dots button.active,
.graphic-nav-dots label.active {
    background: rgba(0, 0, 0, .5);
}

.graphic-nav-dots.straightLine i,
.graphic-nav-dots.straightLine button,
.graphic-nav-dots.straightLine label {
    width: 12px;
    height: 4px;
    border-radius: 0;
}

.graphic-nav-preview-pager {
    position: absolute;
    right: 10px;
    bottom: 2px;
    display: flex;
    gap: 2px;
}

.graphic-nav-preview-pager button,
.graphic-nav-preview-pager label,
.graphic-nav-preview-pager span {
    display: flex;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #909399;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.graphic-nav-preview-pager button:disabled,
.graphic-nav-preview-pager .disabled {
    color: #d6d8dc;
    cursor: default;
}

.diy-preview-component.quick-nav-preview {
    display: block;
    padding: 0;
    background: transparent;
    overflow: hidden;
}

.diy-preview-component.quick-nav-preview .preview-box {
    margin: 0 15px;
    padding: 8px 0;
    border-radius: 5px;
    background: transparent;
    box-sizing: border-box;
}

.diy-preview-component.quick-nav-preview .quick-nav {
    display: flex;
    overflow: hidden;
    padding: 5px 0;
    box-sizing: border-box;
}

.diy-preview-component.quick-nav-preview .quick-nav::-webkit-scrollbar {
    height: 0;
}

.diy-preview-component.quick-nav-preview .quick-nav-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    box-sizing: border-box;
}

.diy-preview-component.quick-nav-preview .quick-nav-item:last-child {
    margin-right: 0;
}

.diy-preview-component.quick-nav-preview .quick-img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.diy-preview-component.quick-nav-preview .quick-img img,
.diy-preview-component.quick-nav-preview .quick-img > i {
    display: block;
    width: auto;
    max-width: 40px;
    height: 20px;
    object-fit: contain;
}

.diy-preview-component.quick-nav-preview .quick-img .icon-wrap,
.diy-preview-component.quick-nav-preview .quick-img i {
    font-size: 30px;
    color: #666;
}

.diy-preview-component.quick-nav-preview .quick-img .icon-wrap {
    width: 20px !important;
    height: 20px !important;
}

.diy-preview-component.quick-nav-preview .quick-text {
    width: 100%;
    height: 20px;
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.quick-nav-preview .quick-nav-empty {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
    font-size: 12px;
    font-weight: 400;
}

.diy-preview-component.float-btn-preview {
    position: absolute;
    z-index: 999;
    width: var(--float-size, 40px);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
}

.diy-preview-component.float-btn-preview .float-btn-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border: 1px dashed;
    text-align: center;
}

.diy-preview-component.float-btn-preview .float-btn-empty {
    width: 118px;
    padding: 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .96);
    color: #d84a3a;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.diy-preview-component.float-btn-preview.position-1,
.diy-preview-component.float-btn-preview.position-3 {
    left: 30px;
}

.diy-preview-component.float-btn-preview.position-2,
.diy-preview-component.float-btn-preview.position-4 {
    left: calc(100% - var(--float-size, 40px) - 30px);
}

.diy-preview-component.float-btn-preview.position-1,
.diy-preview-component.float-btn-preview.position-2 {
    top: calc(100px + var(--float-offset, 0px));
}

.diy-preview-component.float-btn-preview.position-3,
.diy-preview-component.float-btn-preview.position-4 {
    bottom: calc(40px + var(--float-offset, 0px));
}

.diy-preview-item-wrap.float-btn-wrap {
    position: static;
    height: 0;
    margin: 0 !important;
}

.diy-preview-item-wrap.float-btn-wrap .diy-preview-tag {
    display: none;
}

.diy-preview-item-wrap.float-btn-wrap:hover .diy-preview-component,
.diy-preview-item-wrap.float-btn-wrap.is-hover .diy-preview-component,
.diy-preview-item-wrap.float-btn-wrap .diy-preview-component.selected {
    outline: 0;
}

.diy-preview-component.float-btn-preview .float-btn-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 10px;
    overflow: hidden;
}

.diy-preview-component.float-btn-preview .float-btn-item:nth-last-child(1) {
    margin-bottom: 0;
}

.diy-preview-component.float-btn-preview .img-box,
.diy-preview-component.float-btn-preview .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.diy-preview-component.float-btn-preview .img-box img,
.diy-preview-component.float-btn-preview .icon-box > i {
    max-width: 100%;
    max-height: 100%;
}

.diy-preview-component.image {
    padding: 0;
    position: relative;
    color: #9aa5b5;
    background: transparent;
    overflow: hidden;
}

.diy-preview-component.image .image-ads-warp {
    position: relative;
    overflow: hidden;
}

.diy-preview-component.image .image-ads-item {
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.diy-preview-component.image .image-ads-item.layui-hide {
    display: none;
}

.diy-preview-component.image .image-ads-preview-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.diy-preview-component.image .image-ads-preview-slide {
    display: none;
    position: relative;
}

.diy-preview-component.image .image-ads-preview-radio:checked + .image-ads-preview-slide {
    display: block;
}

.diy-preview-component.image .image-ads-empty-state {
    min-height: 80px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b86b60;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
}

.diy-preview-component.image .image-ads-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.diy-preview-component.image .carousel-btn {
    position: absolute;
    inset: 0;
}

.diy-preview-component.image .carousel-btn .arrows {
    position: relative;
    top: 50%;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    transform: translateY(-50%);
}

.diy-preview-component.image .carousel-btn .arrows label {
    display: none;
    cursor: pointer;
}

.diy-preview-component.image .carousel-btn .arrows i {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .35);
    color: #fff;
    cursor: pointer;
    line-height: 36px;
    text-align: center;
}

.diy-preview-component.image .carousel-btn:hover .arrows label {
    display: block;
}

.diy-preview-component.image .carousel-btn .arrows label.is-disabled {
    visibility: hidden;
}

.diy-preview-component.image .dot-wrap,
.diy-preview-component.image .carousel-dot {
    position: absolute;
    bottom: 10px;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
}

.diy-preview-component.image .dot-wrap.hide {
    display: none;
}

.diy-preview-component.image .dot-wrap.left,
.diy-preview-component.image .carousel-dot.left {
    left: 35px;
    transform: none;
}

.diy-preview-component.image .dot-wrap.right,
.diy-preview-component.image .carousel-dot.right {
    right: 0;
    left: auto;
    transform: none;
}

.diy-preview-component.image .dot-wrap i,
.diy-preview-component.image .carousel-dot i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b2b2b2;
    margin-right: 5px;
    cursor: pointer;
}

.diy-preview-component.image .dot-wrap label {
    display: inline-block;
    cursor: pointer;
}

.diy-preview-component.image .dot-wrap.line i,
.diy-preview-component.image .carousel-dot.line i {
    width: 9px;
    height: 3px;
    border-radius: 2px;
}

.diy-preview-component.image .dot-wrap.straightLine i {
    width: 12px;
    height: 4px;
    border-radius: 0;
}

.diy-preview-component.image .dot-wrap i.active {
    background-color: rgba(0, 0, 0, .6);
}

.diy-preview-component.image .dot-wrap.line i.active,
.diy-preview-component.image .carousel-dot.line i:first-child {
    width: 18px;
}

.diy-preview-component.rubik {
    padding: 0;
    overflow: hidden;
    background: transparent;
}

.diy-preview-component.rubik > .preview-box {
    display: block;
}

.diy-preview-component.rubik .rubik-preview-layout {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.diy-preview-component.rubik .rubik-preview-cell {
    position: absolute;
    overflow: hidden;
    background: #f1f3f7;
}

.diy-preview-component.rubik .rubik-preview-cell img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.diy-preview-component.rubik .rubik-preview-image-error {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #f5f6f8;
    color: #b86b60;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.diy-preview-component.rubik .rubik-preview-cell.image-error .rubik-preview-image-error {
    display: flex;
}

.diy-preview-component.rubik .rubik-empty-state {
    min-height: 136px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
    background: #f5f7fa;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
}

.diy-rubik-name {
    margin: 0 0 8px 90px;
    color: #303133;
    font-size: 13px;
}

.diy-preview-component.rubik .preview-box {
    padding: 0;
    margin: 0;
}

.diy-preview-component.rubik > div {
    display: block;
}

.diy-preview-component.rubik ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.diy-preview-component.rubik ul li {
    box-sizing: border-box;
    text-align: center;
}

.diy-preview-component.rubik ul li div {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.diy-preview-component.rubik ul li img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
}

.diy-preview-component.rubik li.row1-of2 {
    width: 50%;
}

.diy-preview-component.rubik li.row1-of3 {
    width: 33.33%;
}

.diy-preview-component.rubik li.row1-of4 {
    width: 25%;
}

.diy-preview-component.rubik li.row2-lt-of2-rt {
    width: 50%;
    display: inline-block;
}

.diy-preview-component.rubik li.row1-tp-of2-bm:nth-child(1) {
    width: 100%;
}

.diy-preview-component.rubik li.row1-tp-of2-bm:nth-child(2),
.diy-preview-component.rubik li.row1-tp-of2-bm:nth-child(3) {
    width: 50%;
}

.diy-preview-component.rubik ul .template-left,
.diy-preview-component.rubik ul .template-right {
    width: 50%;
    box-sizing: border-box;
}

.diy-preview-component.rubik ul .template-left li.row1-lt-of2-rt,
.diy-preview-component.rubik ul .template-left li.row1-lt-of1-tp-of2-bm {
    width: 100%;
}

.diy-preview-component.rubik ul .template-right li.row1-lt-of2-rt,
.diy-preview-component.rubik ul .template-right .template-top li.row1-lt-of1-tp-of2-bm {
    width: 100%;
}

.diy-preview-component.rubik ul .template-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.diy-preview-component.rubik ul .template-bottom li {
    width: 50%;
    box-sizing: border-box;
}

.rubik-cube-list .diy-list-title {
    padding-left: 0;
}

.diy-preview-component.text h4 {
    margin: 0;
    line-height: 22px;
}

.diy-preview-component.text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.diy-preview-component.text p {
    margin: 2px 0 0;
    line-height: 18px;
}

.diy-preview-component.text em {
    flex: none;
    font-style: normal;
    font-size: 12px;
}

.diy-preview-component.line {
    padding: 0;
    background: transparent;
}

.diy-preview-component.line .auxiliary-line-content {
    padding-top: 15px;
}

.diy-preview-component.line .auxiliary-line-bottom {
    width: 100%;
    height: 15px;
}

.diy-preview-component.blank {
    min-height: 0;
    padding: 0;
    background: transparent;
}

.diy-preview-component.blank .preview-box {
    padding: 10px 0;
}

.diy-preview-component.data {
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    color: #5b6678;
    background: #fff;
}

.diy-preview-component.data span {
    color: #9aa5b5;
    font-size: 12px;
}

.diy-save-bar {
    position: relative;
    z-index: 18;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    margin: 0;
    padding: 15px 400px 15px 290px;
    gap: 10px;
    background: #fff;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

.diy-save-bar .layui-btn {
    display: inline-block;
    min-width: 64px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--old-blue);
    border-radius: 2px;
    background: var(--old-blue);
    color: #fff;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.diy-save-bar .layui-btn:hover,
.diy-save-bar .layui-btn:focus {
    color: #fff;
    opacity: 1;
    text-decoration: none;
}

.diy-save-bar [data-message],
.template-message {
    color: #0fae58;
}

.diy-save-bar [data-message].error,
.template-message.error {
    color: #e33;
}

.diy-attr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    height: auto;
    line-height: 22px;
    margin-bottom: 10px;
    padding: 10px 0 15px 10px;
    border-bottom: 2px solid #f2f4f6;
    color: #303133;
    font-size: 18px;
    font-weight: 500;
}

.diy-attr-head > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-attr-tab-wrap {
    flex: none;
    display: flex;
    align-items: center;
    margin-right: 0;
    border-radius: 50px;
    background: #f5f5f5;
    font-size: 14px;
    font-weight: 400;
}

.diy-attr-tab-wrap[hidden] {
    display: none;
}

.diy-attr-tab-wrap [data-attr-tab] {
    height: 34px;
    min-height: 34px;
    padding: 0 15px;
    border: 0;
    border-radius: 50px;
    background: transparent;
    color: #303133;
    line-height: 34px;
    cursor: pointer;
}

.diy-attr-tab-wrap [data-attr-tab].active {
    color: #fff;
    background: var(--old-blue);
}

.diy-attr-body {
    width: 360px;
    padding: 0 0 20px;
    overflow: visible;
}

.diy-attr-panel .layui-form-item {
    display: block;
    min-height: 34px;
    margin: 0 0 15px;
    gap: 0;
    clear: both;
}

.diy-attr-panel .layui-form-label {
    width: 90px;
    color: #666;
}

.diy-attr-panel .layui-form-label.sm {
    float: left;
    width: 90px;
    height: 34px;
    margin: 0;
    padding: 0;
    color: #666;
    font-size: 13px;
    line-height: 34px;
    text-align: right;
}

.diy-attr-panel .layui-input-block {
    min-width: 0;
    min-height: 34px;
    margin-left: 100px;
    line-height: 34px;
}

.diy-attr-panel .layui-input,
.diy-component-controls .layui-input {
    width: 220px;
    height: 34px;
    min-height: 34px;
    border-radius: 2px;
}

.diy-attr-panel .color-input {
    width: 38px;
    padding: 4px;
}

.diy-attr-panel .selected-style {
    display: inline-flex;
    align-items: center;
    min-width: 80px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--old-blue);
    line-height: 34px;
    cursor: pointer;
}

.diy-attr-panel .selected-style i {
    margin-left: 5px;
    color: #818181;
    font-size: 12px;
}

.diy-static-text {
    min-height: 32px;
    line-height: 32px;
}

.diy-link-helper {
    min-height: 34px;
    margin-bottom: 15px;
}

.diy-link-helper .layui-input-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
}

.diy-link-helper .diy-link-value {
    display: inline-flex;
    align-items: center;
    max-width: 150px;
    height: 34px;
    overflow: hidden;
    color: #999;
    line-height: 34px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.diy-link-helper .diy-link-value::after {
    content: "›";
    margin-left: 4px;
    color: #818181;
}

.diy-link-helper .diy-link-value.text-color {
    color: #105cfb;
}

.diy-link-helper .layui-btn.sm {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 2px;
    line-height: 28px;
}

.diy-component-controls .diy-link-value {
    display: inline-flex;
    align-items: center;
    max-width: 130px;
    height: 34px;
    margin-right: 6px;
    overflow: hidden;
    color: #999;
    line-height: 34px;
    white-space: nowrap;
    vertical-align: middle;
}

.diy-component-controls .diy-link-value span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diy-component-controls .diy-link-value i {
    margin-left: 5px;
    color: #818181;
    font-style: normal;
    font-size: 12px;
}

.diy-component-controls .diy-link-value.text-color {
    color: #105cfb;
}

.diy-component-controls .layui-btn.sm {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 2px;
    line-height: 28px;
}

.diy-component-controls {
    padding: 0;
}

.diy-attr-panel .template-edit-title {
    clear: both;
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 5px solid #f6f7f9;
    color: #303133;
    font-weight: 600;
    line-height: 20px;
}

.diy-attr-panel .template-edit-title:last-of-type {
    border-bottom: 0;
}

.diy-attr-panel .template-edit-title h3 {
    margin: 0;
    padding: 10px;
    color: #303133;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.diy-component-controls .icon-radio .layui-input-block {
    min-height: 34px;
    overflow: hidden;
}

.diy-current-choice {
    float: left;
    display: inline-block;
    max-width: 82px;
    height: 32px;
    overflow: hidden;
    color: #666;
    line-height: 32px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-component-controls .icon-radio .icon-wrap.diy-choice-wrap {
    float: right;
    display: block;
    width: auto;
    height: 32px;
    margin: 0;
    padding: 0;
    color: #909399;
    list-style: none;
}

.diy-component-controls .icon-radio .icon-wrap.diy-choice-wrap li {
    float: left;
    display: inline-block;
    width: 50px;
    height: 32px;
    border: 1px solid #eee;
    border-right-color: transparent;
    box-sizing: border-box;
    color: #909399;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.diy-component-controls .icon-radio .icon-wrap.diy-choice-wrap li:last-child {
    border-right-color: #eee;
}

.diy-component-controls .icon-radio .icon-wrap.diy-choice-wrap li.border-color {
    border-color: #105cfb;
}

.diy-component-controls .icon-radio .icon-wrap.diy-choice-wrap li.border-color + li {
    border-left-color: transparent;
}

.diy-component-controls .icon-radio .icon-wrap.diy-choice-wrap i {
    color: inherit;
    font-size: 18px;
    line-height: 30px;
}

.diy-component-controls .icon-radio .icon-wrap.diy-choice-wrap b {
    color: inherit;
    font-size: 12px;
    font-weight: 400;
}

.diy-radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 34px;
}

.diy-radio {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}

.diy-radio i {
    position: relative;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 1px solid #d2d2d2;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

.diy-radio.active i {
    border-color: #105cfb;
}

.diy-radio.active i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #105cfb;
}

.diy-radio span {
    color: #333;
    font-size: 13px;
    line-height: 24px;
    white-space: nowrap;
}

.diy-component-controls .len-mini {
    width: 72px;
}

.diy-component-controls .btn-style .layui-form-label {
    margin-top: 5px;
}

.diy-component-controls .diy-goods-btn-style-list {
    display: flex;
    align-items: center;
    min-height: 30px;
}

.diy-component-controls .diy-goods-btn-style-list .item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 30px;
    min-height: 30px;
    margin-right: 10px;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    box-sizing: content-box;
    appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    font: inherit;
    font-size: 0;
}

.diy-component-controls .diy-goods-btn-style-list .item:nth-child(2),
.diy-component-controls .diy-goods-btn-style-list .item:nth-child(3) {
    width: 35px;
}

.diy-component-controls .diy-goods-btn-style-list .item:last-child {
    width: 60px;
    margin-right: 0;
}

.diy-component-controls .diy-goods-btn-style-list .item.border-color {
    border-color: #105cfb;
}

.diy-component-controls .diy-goods-btn-style-list .buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 25px;
    color: #fff;
    background: #105cfb;
    font-size: 12px;
    line-height: 16px;
}

.diy-component-controls .diy-goods-btn-style-list .shopping-cart-btn,
.diy-component-controls .diy-goods-btn-style-list .plus-sign-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 5px;
    border: 1px solid;
    border-radius: 50%;
    color: #105cfb;
    font-size: 18px;
    line-height: 18px;
}

.diy-component-controls .diy-goods-btn-style-list .diy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid;
    border-radius: 25px;
    color: #105cfb;
    font-size: 12px;
    line-height: 16px;
}

.diy-goods-recommend-current {
    width: 180px;
    justify-content: space-between;
}

.diy-goods-recommend-style-mask {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .32);
}

.diy-goods-recommend-style-mask[hidden] {
    display: none;
}

.diy-goods-recommend-style-modal {
    position: static;
    transform: none;
    width: 920px;
    max-width: calc(100vw - 80px);
    background: #fff;
    overflow: hidden;
}

.style-list-con-goods-recommend {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.style-list-con-goods-recommend .style-li-goods-recommend {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 210px;
    padding: 0;
    margin-top: 15px;
    margin-right: 12px;
    overflow: hidden;
    border: 1px solid #ededed;
    background: #f7f8fa;
    cursor: pointer;
    box-sizing: border-box;
}

.style-list-con-goods-recommend .style-li-goods-recommend:nth-child(1),
.style-list-con-goods-recommend .style-li-goods-recommend:nth-child(2),
.style-list-con-goods-recommend .style-li-goods-recommend:nth-child(3) {
    margin-top: 0;
}

.style-list-con-goods-recommend .style-li-goods-recommend:nth-child(3n) {
    margin-right: 0;
}

.style-list-con-goods-recommend .style-li-goods-recommend:hover,
.style-list-con-goods-recommend .style-li-goods-recommend.selected {
    border-color: #105cfb;
}

.style-list-con-goods-recommend .style-li-goods-recommend img {
    display: block;
    width: 100%;
    height: auto;
}

.style-list-con-goods-recommend .style-li-goods-recommend span {
    display: none;
}

.diy-range {
    display: flex;
    align-items: center;
    min-height: 34px;
}

.diy-range input[type="range"] {
    width: 116px;
    margin: 0 10px 0 0;
    accent-color: #105cfb;
}

.diy-range .layui-input.len-mini {
    width: 60px;
    margin-right: 6px;
}

.diy-control-unit {
    margin-left: 8px;
    color: #666;
}

.diy-control-empty {
    padding: 0 10px 15px;
    color: #999;
    font-size: 12px;
    line-height: 22px;
}

.diy-small-textarea {
    width: 220px;
    min-height: 96px;
    border-radius: 2px;
}

.diy-list-editor {
    margin: 0 0 15px;
    clear: both;
}

.diy-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    margin: 0 0 10px;
    padding-left: 10px;
    color: #303133;
    font-weight: 600;
}

.diy-list-title .layui-btn.sm {
    height: 28px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 2px;
    line-height: 26px;
}

.diy-list-limit {
    color: #909399;
    font-size: 12px;
    font-weight: 400;
}

.diy-list-item {
    position: relative;
    margin: 0 0 16px;
    padding: 10px;
    border: 1px dashed #e5e5e5;
    background: #fff;
}

.diy-list-item .layui-form-item {
    margin-bottom: 10px;
}

.diy-list-item .layui-form-item:last-of-type {
    margin-bottom: 0;
}

.diy-list-item:hover .del {
    display: block;
}

.diy-list-item .del {
    position: absolute;
    top: -10px;
    right: -10px;
    display: none;
    width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #999;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.diy-list-item > .icontuodong {
    position: absolute;
    top: 50%;
    left: 10px;
    color: #909399;
    cursor: move;
    font-size: 18px;
    transform: translateY(-50%);
}

.graphic-nav-list .diy-list-item,
.quick-nav-list .diy-list-item,
.image-ad-list .diy-list-item {
    padding-left: 36px;
}

.diy-color-pair {
    display: flex;
    gap: 8px;
    align-items: center;
}

.diy-color-pair .color-picker {
    width: 44px;
    height: 30px;
}

.diy-image-upload {
    position: relative;
    display: inline-flex;
    width: 66px;
    height: 66px;
    min-height: 66px;
    margin-right: 8px;
    padding: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed #ccc;
    border-radius: 0;
    background: #fff;
    color: #105cfb;
    vertical-align: top;
}

.diy-image-upload img {
    max-width: 100%;
    max-height: 100%;
}

.diy-image-upload .add {
    font-style: normal;
    font-size: 26px;
    line-height: 1;
}

.diy-image-upload span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    height: 22px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
}

.diy-image-upload:hover span,
.diy-image-upload:not(.has-image) span {
    display: block;
}

.diy-video-upload {
    display: inline-flex;
    min-width: 112px;
    height: 34px;
    margin-right: 8px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #d2d2d2;
    border-radius: 0;
    background: #fff;
    color: #333;
    vertical-align: middle;
}

.diy-video-upload:hover,
.diy-video-upload.has-video {
    border-color: var(--theme-color, #105cfb);
    color: var(--theme-color, #105cfb);
}

.diy-video-file {
    display: inline-block;
    max-width: 150px;
    margin-right: 8px;
    overflow: hidden;
    color: #666;
    font-style: normal;
    line-height: 34px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.diy-component-json {
    min-height: 360px;
    font-family: Consolas, Monaco, monospace;
    line-height: 1.5;
}

.rich-text-list {
    margin: 0 0 16px 10px;
}

.diy-rich-editor {
    width: 100%;
    min-height: 450px;
    padding-left: 10px;
    box-sizing: border-box;
}

.shop-template-page {
    margin: 0;
    background: #fff;
    border: 0;
    padding: 0;
    box-sizing: border-box;
}

.shop-template-shell {
    padding: var(--old-page-pad);
}

.theme-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
}

.theme-item {
    display: inline-block;
    min-width: 140px;
    height: 60px;
    line-height: 60px;
    margin-right: 10px;
    margin-bottom: 15px;
    padding: 0;
    border: 1px solid #ededed;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    font: inherit;
}

.theme-item.active,
.theme-item.border-color {
    border-color: var(--old-blue);
    color: var(--old-blue);
}

.theme-item .style {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
}

.theme-item .style-color {
    display: flex;
    width: 50px;
    height: 16px;
}

.theme-item .style-color i {
    width: 25px;
    height: 16px;
    display: block;
}

.theme-item .style-color-img {
    width: 50px;
    height: 16px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
}

.theme-item .style > span:last-child {
    margin-left: 10px;
    font-size: 12px;
    color: #333;
}

.template-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.template-list li {
    width: 270px;
    height: 410px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: #fff;
    margin-right: 30px;
    margin-bottom: 30px;
}

.template-list .item-img {
    width: 200px;
    height: 300px;
    margin: 0 auto;
    background: #f6f8fb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.template-list .item-img img {
    max-width: 100%;
}

.template-list .item-name,
.template-list .item-desc {
    display: block;
    padding-top: 7px;
    line-height: 22px;
}

.template-list .item-desc {
    color: #999;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.template-list .item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.template-list .item-hide {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    text-align: center;
}

.template-list li:hover .item-hide {
    display: block;
}

.template-list .item-btn-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.template-list .item-hide button {
    width: 100px;
    height: 33px;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    background: transparent;
    cursor: pointer;
}

.template-list .item-hide button:disabled {
    opacity: .55;
    cursor: wait;
}

.template-list .is-default {
    display: inline-block;
    margin-top: 5px;
    padding: 6px;
    border-radius: 4px;
    line-height: 1;
    color: #fff;
    font-size: 12px;
    background: var(--old-blue);
}

.template-preview-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .5);
    align-items: center;
    justify-content: center;
}

.template-preview-modal.show {
    display: flex;
}

.template-preview-box {
    width: 420px;
    max-height: 86vh;
    background: #fff;
    border-radius: 4px;
    position: relative;
    padding: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.template-preview-box button {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.template-preview-box h3 {
    margin: 0 28px 12px 0;
    font-size: 16px;
    font-weight: 600;
}

.template-preview-box div {
    max-height: calc(86vh - 70px);
    overflow: auto;
    text-align: center;
    background: #f6f8fb;
}

.template-preview-box img {
    max-width: 100%;
}

.shop-template-empty {
    height: 180px;
    line-height: 180px;
    border: 1px solid #edf0f5;
    background: #fff;
}

.shop-diy-full-screen .topbar,
.shop-diy-full-screen .first-nav,
.shop-diy-full-screen .second-nav {
    display: none;
}

.shop-diy-full-screen main.shell {
    margin-left: 0;
    padding-top: 0;
}

.shop-diy-full-screen .shop-diy-top-save {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
}

.shop-diy-full-screen .diy-save-bar {
    display: none !important;
}

.diy-page-style-mask {
    position: fixed;
    inset: 0;
    z-index: 12000;
}

.diy-page-style-modal {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 800px;
    min-height: 380px;
}

.diy-page-style-modal .nav-style {
    display: flex;
    flex-wrap: wrap;
    padding: 22px 22px 6px;
}

.diy-page-style-modal .text-title {
    width: 32%;
    height: 100px;
    margin: 0 2% 15px 0;
    border: 1px solid #cccccc;
    padding: 0;
    background: #eee;
    line-height: 100px;
    cursor: pointer;
    box-sizing: border-box;
}

.diy-page-style-modal .text-title:nth-child(3n) {
    margin-right: 0;
}

.diy-page-style-modal .text-title.border-color {
    border-color: var(--old-blue);
}

.diy-page-style-modal .text-title img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.diy-page-style-actions {
    padding: 8px 22px 22px;
    justify-content: flex-end;
}

.diy-heatmap-mask {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diy-heatmap-mask[hidden] {
    display: none;
}

.diy-heatmap-modal {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(1000px, calc(100vw - 48px));
    height: min(760px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
}

.diy-heatmap-wrap {
    flex: 1;
    display: flex;
    align-items: flex-start;
    width: 900px;
    max-width: calc(100% - 60px);
    min-height: 0;
    margin: 0 auto;
    padding: 30px;
    overflow: auto;
}

.diy-heatmap-stage {
    flex: none;
    position: relative;
    width: 600px;
    height: 600px;
    background-color: #f2f4f4;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 1px dashed #333;
    box-sizing: border-box;
}

.diy-heatmap-box {
    position: absolute;
    min-width: 50px;
    min-height: 50px;
    padding: 5px;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, .7);
    cursor: move;
    user-select: none;
    box-sizing: border-box;
}

.diy-heatmap-box:hover,
.diy-heatmap-box.active {
    border-color: var(--old-blue);
    background: rgba(255, 255, 255, .82);
}

.diy-heatmap-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #303133;
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diy-heatmap-box i {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #333;
    border-radius: 50%;
}

.diy-heatmap-box i[data-heatmap-resize="nw"] {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.diy-heatmap-box i[data-heatmap-resize="ne"] {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.diy-heatmap-box i[data-heatmap-resize="sw"] {
    left: -5px;
    bottom: -5px;
    cursor: sw-resize;
}

.diy-heatmap-box i[data-heatmap-resize="se"] {
    right: -5px;
    bottom: -5px;
    cursor: se-resize;
}

.diy-heatmap-manage {
    flex: none;
    width: 220px;
    padding-left: 20px;
}

.diy-heatmap-manage h3 {
    margin: 0 0 10px;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
}

.diy-heatmap-manage .layui-btn {
    margin-bottom: 10px;
}

.diy-heatmap-list {
    height: 500px;
    overflow-y: auto;
}

.diy-heatmap-list .item {
    display: flex;
    margin-bottom: 16px;
    color: #303133;
    font-size: 14px;
    line-height: 22px;
}

.diy-heatmap-list .item label {
    flex: none;
    width: 80px;
    padding-right: 10px;
    text-align: right;
}

.diy-heatmap-list .item div {
    flex: 1;
    min-width: 0;
}

.diy-heatmap-list .item button {
    max-width: 110px;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: transparent;
    color: #333;
    line-height: 22px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: top;
}

.diy-heatmap-list .item button.text-color,
.diy-heatmap-list .item.active button {
    color: var(--old-blue);
}

.diy-heatmap-list .item i {
    margin-left: 10px;
    color: #303133;
    cursor: pointer;
}

.diy-heatmap-actions {
    flex: none;
    justify-content: flex-end;
    padding: 12px 30px 24px;
    border-top: 1px solid #f2f2f2;
}

.shop-adv-table .adv-img-box {
    width: 62px;
    height: 42px;
    border: 1px solid #e6e8ef;
    background: #f6f8fb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-adv-table .adv-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.old-bottom-actions {
    min-height: 44px;
    padding: 15px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.old-bottom-actions .pagination {
    margin-left: auto;
}

.shop-adv-search-form select.layui-input {
    width: 170px;
    height: 34px;
}

.shop-adv-form .adv-size-line,
.shop-adv-form .adv-link-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.shop-adv-form .adv-link-line .len-long {
    width: 360px;
}

.shop-adv-form .adv-url-show {
    display: inline-block;
    min-width: 90px;
    max-width: 260px;
    min-height: 34px;
    line-height: 34px;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-link-picker-mask {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .32);
}

.shop-link-picker-mask[hidden] {
    display: none;
}

.shop-link-picker-mask .shop-link-picker {
    position: static;
    inset: auto;
    width: 720px;
    max-width: calc(100vw - 80px);
    min-height: 585px;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e7f0;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .18);
}

.shop-link-picker-body {
    max-height: calc(100vh - 190px);
    padding: 0 15px 15px;
    overflow: auto;
}

.shop-link-picker .link-box {
    margin-top: 10px;
    font-size: 12px;
}

.shop-link-picker .link-center {
    display: flex;
    height: 480px;
}

.shop-link-picker .link-left {
    width: 138px;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid #f2f2f2;
}

.shop-link-picker .link-left::-webkit-scrollbar {
    display: none;
}

.shop-link-picker .link-left dt {
    position: relative;
    height: 32px;
    line-height: 32px;
    padding-left: 15px;
    cursor: pointer;
    transition: all .3s;
}

.shop-link-picker .link-left dt.triangle::after {
    content: "";
    position: absolute;
    left: 0;
    top: 51%;
    border: 4px solid transparent;
    border-right-color: #333;
    border-bottom-color: #333;
    transform: translateY(-50%);
}

.shop-link-picker .link-left dt.active::after {
    transform: translateY(-50%) rotate(-45deg);
}

.shop-link-picker .link-right {
    display: none;
    flex: 1;
    height: 100%;
    padding-left: 20px;
    overflow-y: auto;
}

.shop-link-picker .link-right.active {
    display: block;
}

.shop-link-picker .link-right dl {
    overflow: hidden;
}

.shop-link-picker .link-right dt {
    height: 40px;
    line-height: 40px;
}

.shop-link-picker .link-right dd {
    float: left;
    margin: 5px 5px 5px 0;
    padding: 0 16px;
    border: 1px solid #ededed;
    border-radius: 3px;
    line-height: 30px;
    color: #666;
    cursor: pointer;
}

.shop-link-picker .link-right dd.border-color,
.shop-link-picker .link-right dd.text-color {
    border-color: #105cfb;
    color: #105cfb;
}

.shop-link-picker .shop-link-custom-panel {
    padding-top: 12px;
}

.shop-link-picker .shop-link-custom-panel .layui-form-item {
    margin-bottom: 15px;
}

.shop-link-picker .shop-link-custom-panel .layui-form-label.mid {
    width: 92px;
    padding: 9px 10px 9px 0;
    color: #303133;
    font-size: 12px;
    line-height: 20px;
    text-align: right;
    box-sizing: border-box;
}

.shop-link-picker .shop-link-custom-panel .layui-input-inline,
.shop-link-picker .shop-link-custom-panel .layui-input-block {
    margin-left: 100px;
}

.shop-link-picker .shop-link-custom-panel .layui-input.len-mid {
    width: 260px;
    height: 34px;
    font-size: 12px;
}

.shop-link-picker .shop-link-custom-panel .required {
    color: #ff4544;
    margin-right: 3px;
}

.shop-link-picker .shop-link-custom-panel .word-aux.mid {
    margin: 6px 0 0 100px;
    color: #999;
    font-size: 12px;
    line-height: 18px;
}

.shop-link-picker-error {
    float: left;
    max-width: 300px;
    overflow: hidden;
    color: #ff4544;
    font-size: 12px;
    line-height: 32px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-link-picker .link-btn {
    position: relative;
    top: 10px;
    height: 45px;
    line-height: 45px;
    margin-top: 20px;
    padding-top: 10px;
    padding-right: 10px;
    text-align: right;
    border-top: 1px solid #f2f2f2;
}

.shop-adv-form .upload-img-box {
    width: 92px;
    height: 92px;
    padding: 0;
    border: 1px dashed #d7dce7;
    background: #f8fafc;
    cursor: pointer;
}

.shop-adv-form .upload-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-frontend-page {
    margin: var(--old-page-gap);
    padding: 0;
    min-height: calc(100vh - 190px);
    overflow: hidden;
}

.shop-config-canvas {
    min-height: calc(100vh - 190px);
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
}

.shop-phone-preview {
    width: calc(100% - 360px);
    min-width: 420px;
    background: #fff;
    border-right: 1px solid #edf0f5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop-phone-head {
    width: 320px;
    height: 48px;
    margin-top: 28px;
    line-height: 48px;
    text-align: center;
    color: #303133;
    background: #fff;
    border: 1px solid #e6e8ef;
    border-bottom: 0;
}

.shop-phone-body {
    width: 320px;
    min-height: 560px;
    background: #f7f8fa;
    border: 1px solid #e6e8ef;
    box-sizing: border-box;
}

.shop-attr-panel {
    width: 360px;
    flex: 0 0 360px;
    background: #fff;
}

.shop-attr-title {
    height: 40px;
    padding: 0 12px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.shop-attr-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

.shop-attr-tabs button {
    height: 24px;
    min-height: 24px;
    line-height: 22px;
    padding: 0 10px;
    border: 1px solid transparent;
    background: #f7f8fa;
    color: #333;
}

.shop-attr-tabs button.active {
    background: #105cfb;
    border-color: #105cfb;
    color: #fff;
}

.shop-attr-body {
    padding: 18px 14px 80px;
    max-height: calc(100vh - 230px);
    overflow: auto;
}

.shop-form-item {
    display: block;
    margin-bottom: 18px;
}

.shop-form-item .layui-form-label {
    float: left;
    width: 92px;
    min-height: 32px;
    line-height: 32px;
    padding-right: 8px;
    box-sizing: border-box;
}

.shop-form-item .layui-input-block.compact {
    min-width: 0;
    margin-left: 100px;
    min-height: 32px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-form-item .diy-word-aux,
.shop-form-item .word-aux {
    clear: both;
    margin-left: 100px;
    padding-top: 6px;
    color: #9aa4b5;
    line-height: 1.6;
    font-size: 12px;
}

.template-edit-title {
    margin: 20px 0 14px;
    padding-left: 0;
    color: #303133;
    font-weight: 600;
    line-height: 20px;
}

.template-edit-title:first-child {
    margin-top: 0;
}

.old-radio,
.old-checkbox {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #333;
    font-style: normal;
    white-space: nowrap;
}

.shop-diy-editor-page .old-radio,
.shop-diy-editor-page .old-checkbox {
    position: relative;
}

.old-radio input,
.old-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.old-radio span,
.old-checkbox span {
    width: 14px;
    height: 14px;
    border: 1px solid #c9d1df;
    background: #fff;
    box-sizing: border-box;
    flex: 0 0 14px;
}

.old-radio span {
    border-radius: 50%;
}

.old-checkbox span {
    border-radius: 2px;
}

.old-radio input:checked + span {
    border: 4px solid #105cfb;
}

.old-checkbox input:checked + span {
    border-color: #105cfb;
    background: #105cfb;
    position: relative;
}

.old-checkbox input:checked + span::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.old-radio em,
.old-checkbox em {
    display: inline-block;
    font-style: normal;
    line-height: 24px;
    white-space: nowrap;
}

.option-wrap {
    gap: 10px 14px;
}

.color-picker {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d9dee8;
    background: #fff;
}

.color-value {
    color: #606b80;
    min-width: 72px;
}

.goods-recommend-title {
    margin: 0 0 10px;
    color: #303133;
    font-size: 16px;
    line-height: 28px;
}

.goods-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.goods-preview-item {
    min-width: 0;
    padding-bottom: 10px;
    background: #fff;
}

.goods-preview-img {
    aspect-ratio: 1 / 1;
    background: #eef2f8;
}

.goods-preview-name {
    margin: 8px 8px 0;
    color: #303133;
    font-size: 13px;
    line-height: 18px;
    height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.goods-preview-name.multiple {
    height: 36px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.goods-preview-price {
    margin: 8px 8px 0;
    color: #e1251b;
    font-weight: 600;
}

.goods-preview-buy {
    height: 24px;
    min-height: 24px;
    margin: 8px 8px 0 auto;
    padding: 0 10px;
    border: 0;
    background: #ff6a00;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: right;
}

.style-options button {
    height: 34px;
    min-height: 34px;
    min-width: 54px;
    border: 1px solid #d9dee8;
    background: #fff;
    color: #333;
}

.style-options button.active {
    border-color: #105cfb;
    color: #105cfb;
}

.range-row input[type="range"] {
    width: 136px;
}

.range-row .len-mini {
    width: 64px;
}

.selected-goods-text {
    color: #606b80;
}

.shop-goods-picker {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 720px;
    max-height: 76vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.shop-goods-picker .old-modal-title button {
    width: auto;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    padding: 0 4px;
    font-size: 13px;
    line-height: 28px;
}

.shop-goods-picker-tools {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-goods-picker-body {
    min-height: 240px;
    max-height: 46vh;
    overflow: auto;
    padding: 0 14px;
}

.shop-goods-picker-body .old-table {
    width: 100%;
}

.picker-goods-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.picker-goods-img {
    width: 46px;
    height: 46px;
    border: 1px solid #e6e8ef;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a94a6;
    font-size: 12px;
}

.picker-goods-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picker-goods-info strong {
    display: block;
    color: #303133;
    font-weight: 400;
}

.picker-goods-info p {
    margin: 4px 0 0;
    color: #8a94a6;
}

.promotion-zone-empty-page {
    min-height: calc(100vh - 160px);
    margin: 15px;
    padding: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a94a6;
}

.promotion-zone-config-page {
    position: relative;
    min-height: calc(100vh - 85px);
    margin: 15px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #fff;
    visibility: hidden;
}

.promotion-zone-config-page .table-tab {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
}

.promotion-zone-config-page .layui-tab-title {
    display: block;
    height: 41px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    border-bottom: 1px solid #f1f1f1;
}

.promotion-zone-config-page .layui-tab-title li {
    position: relative;
    display: inline-block;
    min-width: 65px;
    height: 41px;
    margin: 0;
    padding: 0 15px;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
    background: #fff;
    box-sizing: content-box;
    line-height: 40px;
    color: #303133;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}

.promotion-zone-config-page .layui-tab-title li:last-child {
    border-right: 1px solid #f1f1f1;
}

.promotion-zone-config-page .layui-tab-title li.layui-this {
    border-radius: 2px 0 0 2px;
    background: #f2f3f5;
    color: #303133;
}

.promotion-zone-config-page .layui-tab-title li.layui-this::after {
    content: none;
}

.promotion-zone-config-page .preview-wrap {
    margin-left: 255px;
    margin-right: 358px;
    overflow: hidden;
}

.promotion-zone-config-page .diy-view-wrap {
    width: 375px;
    margin: 0 auto 20px;
    border: 2px solid #f0f1f3;
    background: #fff;
    background-repeat: no-repeat;
    background-position-y: 64px;
    background-size: 100%;
}

.promotion-zone-config-page .preview-head {
    width: 375px;
    height: 64px;
    color: #333;
    text-align: left;
    font-size: 14px;
    background: #fff url("/assets/legacy-diy/diyview/preview_head.png") no-repeat 50%/cover;
}

.promotion-zone-config-page .preview-head span {
    display: block;
    height: 100%;
    padding: 0 15px;
    line-height: 87px;
    text-align: left;
}

.promotion-zone-config-page .preview-block {
    min-height: 400px;
    background: transparent;
}

.promotion-zone-config-page .preview-draggable {
    min-height: 320px;
    padding: 0;
    background: #fff;
}

.promotion-zone-config-page .preview-draggable img {
    display: block;
    width: 100%;
}

.promotion-zone-config-page .preview-draggable img[hidden] {
    display: none;
}

.promotion-zone-config-page .edit-attribute {
    position: absolute;
    top: 0;
    right: 0;
    width: 370px;
    height: 100%;
    padding: 0;
    border-top: 0;
    background: #fff;
    box-sizing: content-box;
}

.promotion-zone-config-page .attr-wrap {
    width: 392px;
    height: 424px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

.promotion-zone-config-page .attr-title {
    height: auto;
    margin: 0;
    padding: 0 0 1px 10px;
    line-height: 40px;
    border-bottom: 1px solid #f1f1f1;
}

.promotion-zone-config-page .attr-title .title {
    font-size: 14px;
    font-weight: 400;
    color: #303133;
}

.promotion-zone-config-page .edit-content-wrap {
    padding: 0;
}

.promotion-zone-config-page .layui-form-item {
    display: block;
    min-height: 34px;
    margin-bottom: 16px;
    clear: both;
}

.promotion-zone-config-page .layui-form-label.sm {
    float: left;
    width: 90px;
    padding: 7px 0;
    line-height: 20px;
    color: #303133;
    text-align: right;
}

.promotion-zone-config-page .layui-input-block {
    min-height: 34px;
    margin-left: 100px;
    line-height: 34px;
}

.promotion-zone-config-page .flex {
    display: flex;
    align-items: center;
}

.promotion-zone-config-page .flex .layui-form-label.sm {
    flex: 0 0 90px;
}

.promotion-zone-config-page .flex-fill {
    flex: 1;
    margin-left: 10px;
}

.promotion-zone-config-page .curr-color {
    margin-left: 7px;
    color: #303133;
    line-height: 34px;
}

.promotion-zone-config-page .color-selector {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    vertical-align: top;
    cursor: pointer;
}

.promotion-zone-config-page .color-selector span {
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid #d7dde8;
    box-sizing: border-box;
}

.promotion-zone-config-page .color-selector input {
    position: absolute;
    inset: 0;
    width: 34px;
    height: 34px;
    opacity: 0;
    cursor: pointer;
}

.promotion-zone-config-page .color-selector-reset {
    display: inline-block;
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #105cfb;
    line-height: 34px;
    cursor: pointer;
}

.promotion-zone-config-page .custom-save {
    padding: 15px 400px 15px 290px;
    background: #fff;
    text-align: center;
}

.promotion-zone-config-page .custom-save .layui-btn {
    min-width: 60px;
    min-height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: #105cfb;
    color: #fff;
    cursor: pointer;
}

.promotion-zone-config-page .form-message {
    display: inline-block;
    min-height: 20px;
    margin-right: 12px;
    color: #0f8a4b;
}

.promotion-zone-config-page .form-message.error {
    color: #b42318;
}

.goods-detail-config-page {
    position: relative;
    min-height: calc(100vh - 85px);
    margin: 0;
    padding: 20px 0 0;
    overflow: hidden;
    border: 0;
    background: #f7f8fa;
    visibility: hidden;
}

.goods-detail-config-page .preview-wrap {
    margin-right: 378px;
    overflow: auto;
}

.goods-detail-config-page .diy-view-wrap {
    width: 375px;
    margin: 0 auto 20px;
    border: 2px solid #f0f1f3;
    background: #fff;
    background-repeat: no-repeat;
    background-position-y: 64px;
    background-size: 100%;
}

.goods-detail-config-page .preview-head {
    width: 375px;
    height: 64px;
    color: #333;
    text-align: left;
    font-size: 14px;
    background: #fff url("/assets/legacy-diy/diyview/preview_head.png") no-repeat 50%/cover;
}

.goods-detail-config-page .preview-head span {
    display: block;
    height: 100%;
    padding: 0 15px;
    line-height: 87px;
}

.goods-detail-config-page .preview-block {
    min-height: 400px;
}

.goods-detail-config-page .preview-draggable img {
    display: block;
    max-width: 100%;
}

.goods-detail-config-page .edit-attribute {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 370px;
    padding: 10px;
    overflow: hidden;
    border-top: 1px solid #f7f8fa;
    background: #fff;
}

.goods-detail-config-page .attr-wrap {
    width: 392px;
    height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
}

.goods-detail-config-page .attr-title {
    margin-bottom: 10px;
    padding: 10px 0 15px 10px;
    border-bottom: 2px solid #f2f4f6;
    color: #303133;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.goods-detail-config-page .attr-title .title {
    font-size: 18px;
}

.goods-detail-config-page .edit-content-wrap {
    padding: 0;
}

.goods-detail-config-page .layui-form-item {
    display: block;
    min-height: 34px;
    margin: 0 0 18px;
    gap: 0;
}

.goods-detail-config-page .layui-form-label.sm {
    float: left;
    width: 90px;
    height: 34px;
    margin: 0;
    padding: 0;
    color: #666;
    font-size: 13px;
    line-height: 34px;
    text-align: right;
}

.goods-detail-config-page .layui-input-block {
    min-width: 0;
    min-height: 34px;
    margin-left: 100px;
    line-height: 34px;
}

.goods-detail-config-page .diy-word-aux {
    clear: both;
    display: block;
    margin: 5px 0 0 95px;
    color: #b2b2b2;
    font-size: 12px;
    line-height: 1.6;
}

.goods-detail-config-page .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.goods-detail-config-page .flex-left {
    display: flex;
    align-items: center;
}

.goods-detail-config-page .flex-fill {
    flex: 1;
    margin-left: 10px;
}

.goods-detail-config-page .curr-color {
    margin-left: 7px;
    color: #303133;
}

.goods-detail-config-page .color-selector {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 34px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

.goods-detail-config-page .color-selector input {
    position: absolute;
    inset: 0;
    width: 38px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.goods-detail-config-page .color-selector span {
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid #d9dee8;
    border-radius: 2px;
}

.goods-detail-config-page .color-selector-reset {
    display: inline-block;
    min-height: auto;
    margin-left: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #105cfb;
    background: transparent;
    line-height: 34px;
    cursor: pointer;
}

.goods-detail-config-page .custom-save {
    padding: 15px 400px 15px 0;
    background: #fff;
    text-align: center;
}

.goods-detail-config-page .custom-save .layui-btn {
    min-width: 60px;
    min-height: 34px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid #105cfb;
    border-radius: 2px;
    color: #fff;
    background: #105cfb;
    line-height: 32px;
}

.goods-detail-config-page .form-message {
    display: inline-block;
    min-height: 20px;
    margin-right: 12px;
    color: #0f8a4b;
    vertical-align: middle;
}

.goods-detail-config-page .form-message.error {
    color: #b42318;
}

.goods-card-config-page {
    position: relative;
    min-height: calc(100vh - 85px);
    margin: 0;
    padding: 20px 20px 0 0;
    overflow: hidden;
    border: 0;
    background: #f7f8fa;
    visibility: hidden;
}

.goods-card-config-page .preview-wrap {
    margin: 0 392px 0 0;
    overflow: auto;
}

.goods-card-config-page .preview-restore-wrap {
    visibility: hidden;
}

.goods-card-config-page .div-wrap {
    overflow: auto;
}

.goods-card-config-page .diy-view-wrap {
    width: 375px;
    margin: 0 auto 20px;
    border: 2px solid #f0f1f3;
    background: #fff;
}

.goods-card-config-page .preview-head {
    width: 375px;
    height: 64px;
    color: #333;
    text-align: left;
    font-size: 14px;
    background: #fff url("/assets/legacy-diy/diyview/preview_head.png") no-repeat 50%/cover;
}

.goods-card-config-page .preview-head span {
    display: block;
    height: 100%;
    padding: 0 15px;
    line-height: 87px;
}

.goods-card-config-page .preview-block {
    min-height: 400px;
}

.goods-card-config-page .preview-draggable {
    padding: 10px;
}

.goods-card-config-page .edit-attribute {
    position: absolute;
    top: 0;
    right: 20px;
    z-index: 1;
    display: block;
    width: 370px;
    padding: 10px;
    overflow: hidden;
    border-top: 1px solid #f7f8fa;
    background: #fff;
}

.goods-card-config-page .attr-wrap {
    width: 392px;
    height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
}

.goods-card-config-page .attr-title {
    margin-bottom: 10px;
    padding: 10px 0 15px 10px;
    border-bottom: 2px solid #f2f4f6;
    color: #303133;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.goods-card-config-page .attr-title .title {
    font-size: 18px;
}

.goods-card-config-page .tab-wrap {
    display: flex;
    align-items: center;
    margin-right: 18px;
}

.goods-card-config-page .tab-wrap span {
    min-width: 46px;
    height: 26px;
    margin-left: 8px;
    padding: 0 10px;
    border-radius: 2px;
    color: #333;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
}

.goods-card-config-page .tab-wrap span.active {
    background: #105cfb;
    color: #fff;
}

.goods-card-config-page .edit-content-wrap,
.goods-card-config-page .edit-style-wrap {
    padding: 0;
}

.goods-card-config-page .layui-form-item {
    display: block;
    min-height: 34px;
    margin: 0 0 15px;
    gap: 0;
}

.goods-card-config-page .layui-form-label.sm {
    float: left;
    width: 90px;
    height: 34px;
    margin: 0;
    padding: 0;
    color: #666;
    font-size: 13px;
    line-height: 34px;
    text-align: right;
}

.goods-card-config-page .layui-input-block {
    min-width: 0;
    min-height: 34px;
    margin-left: 100px;
    line-height: 34px;
}

.goods-card-config-page .layui-input {
    width: 220px;
    height: 34px;
    min-height: 34px;
    border-radius: 2px;
}

.goods-card-config-page .diy-word-aux,
.goods-card-config-page .word-aux {
    clear: both;
    display: block;
    margin: 5px 0 0 100px;
    color: #b2b2b2;
    font-size: 12px;
    line-height: 1.6;
}

.goods-card-config-page .cart-event-tip {
    margin-left: 100px;
}

.goods-card-config-page .template-edit-title {
    margin: 0 0 12px;
    padding: 0;
    border-bottom: 5px solid #f6f7f9;
}

.goods-card-config-page .template-edit-title:last-of-type {
    border-bottom: 0;
}

.goods-card-config-page .template-edit-title h3 {
    margin: 0;
    padding: 10px;
    color: #303133;
    font-size: 14px;
    font-weight: 600;
}

.goods-card-config-page .option-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.goods-card-config-page .old-layui-checkbox,
.goods-card-config-page .old-layui-radio {
    position: relative;
    display: inline-flex;
    width: auto;
    min-height: 30px;
    margin: 0 5px 0 0;
    padding: 0;
    align-items: center;
    gap: 5px;
    color: #333;
    line-height: 30px;
    cursor: pointer;
}

.goods-card-config-page .old-layui-checkbox input,
.goods-card-config-page .old-layui-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.goods-card-config-page .old-layui-checkbox > span {
    display: inline-block;
    height: 22px;
    padding: 0 5px 0 0;
    color: #333;
    line-height: 22px;
}

.goods-card-config-page .old-layui-checkbox > i {
    width: 14px;
    height: 14px;
    border: 1px solid #d2d2d2;
    color: transparent;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
}

.goods-card-config-page .old-layui-checkbox.layui-form-checked > i {
    border-color: #105cfb;
    color: #105cfb;
}

.goods-card-config-page .old-layui-radio > i {
    color: #999;
    font-size: 16px;
    line-height: 30px;
}

.goods-card-config-page .old-layui-radio.layui-form-radioed > i,
.goods-card-config-page .old-layui-radio.layui-form-radioed > span {
    color: #105cfb;
}

.goods-card-config-page .selected-style {
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #105cfb;
    line-height: 34px;
}

.goods-card-config-page .selected-style i {
    margin-left: 5px;
    color: #818181;
    font-size: 12px;
}

.goods-card-config-page .btn-style .layui-form-label {
    margin-top: 5px;
}

.goods-card-config-page .btn-style .layui-input-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.goods-card-config-page .btn-style .item {
    display: inline-flex;
    box-sizing: content-box;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 30px;
    min-height: 30px;
    margin: 0 10px 0 0;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    vertical-align: top;
}

.goods-card-config-page .btn-style .item:nth-child(2),
.goods-card-config-page .btn-style .item:nth-child(3) {
    width: 35px;
}

.goods-card-config-page .btn-style .item:last-child {
    width: 60px;
    margin-right: 0;
}

.goods-card-config-page .btn-style .item.border-color {
    border-color: #105cfb;
}

.goods-card-config-page .btn-style .buy-btn {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 25px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.goods-card-config-page .btn-style .shopping-cart-btn,
.goods-card-config-page .btn-style .plus-sign-btn {
    display: inline-flex;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 5px;
    border: 1px solid;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.goods-card-config-page .btn-style .shopping-cart-btn .iconfont,
.goods-card-config-page .btn-style .plus-sign-btn .iconfont {
    font-size: 18px;
    line-height: 18px;
}

.goods-card-config-page .btn-style .shopping-cart-btn::before,
.goods-card-config-page .btn-style .plus-sign-btn::before,
.goods-card-config-page .goods-list .goods-item .shopping-cart-btn::before,
.goods-card-config-page .goods-list .goods-item .plus-sign-btn::before {
    font-family: "iconfont" !important;
    font-size: 18px;
    line-height: 18px;
}

.goods-card-config-page .btn-style .diy-btn {
    padding: 6px 10px;
    border: 1px solid;
    border-radius: 25px;
    font-size: 12px;
    white-space: nowrap;
}

.goods-card-config-page .diy-icon {
    display: flex;
    margin: 10px 0 10px 100px;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.goods-card-config-page .diy-icon .icon-diy-type {
    display: flex;
    align-items: center;
    gap: 10px;
}

.goods-card-config-page .icon-diy-preview {
    display: inline-flex;
    width: 42px;
    height: 28px;
    border: 1px solid #eee;
    background: #fff;
    align-items: center;
    justify-content: center;
    line-height: 28px;
}

.goods-card-config-page .icon-diy-preview img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}

.goods-card-config-page .icon-diy-preview span {
    color: #999;
    font-size: 16px;
}

.goods-card-config-page .icon-diy-preview .iconfont {
    font-size: 20px;
    line-height: 28px;
}

.goods-card-config-page .diy-icon .len-mid {
    width: 220px;
}

.goods-card-config-page .diy-icon .goods-icon-upload,
.goods-card-config-page .diy-icon .goods-icon-clear {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 2px;
    line-height: 28px;
}

.goods-card-config-page .diy-icon .action-box {
    display: flex;
    margin-bottom: 0;
    gap: 10px;
}

.goods-card-config-page .diy-icon .action {
    position: relative;
    width: 42px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 1px solid #eee;
    border-radius: 0;
    background: #fff;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
}

.goods-card-config-page .diy-icon .action .iconfont {
    font-size: 20px;
}

.goods-card-config-page .diy-icon .action input[type="color"] {
    position: absolute;
    inset: 0;
    width: 42px;
    height: 28px;
    min-height: 28px;
    opacity: 0;
    cursor: pointer;
}

.goods-card-config-page .slide-row .layui-input-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.goods-card-config-page .slide-row input[type="range"] {
    width: 135px;
}

.goods-card-config-page .len-mini {
    width: 64px;
}

.goods-card-config-page .color-picker {
    width: 38px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 2px;
}

.goods-icon-style-editor {
    padding: 18px 20px 8px;
}

.goods-icon-style-preview {
    display: flex;
    width: 100px;
    height: 100px;
    margin: 0 auto 18px;
    align-items: center;
    justify-content: center;
    border: 1px dashed #eee;
    font-size: 100px;
    overflow: hidden;
}

.goods-icon-style-preview .iconfont {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
}

.goods-icon-style-title {
    margin: 0 0 10px;
    padding-left: 10px;
    border-left: 2px solid #1f7cff;
    color: #303133;
    font-weight: 600;
    line-height: 1;
}

.goods-icon-style-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.goods-icon-style-preset {
    display: inline-flex;
    width: 72px;
    padding: 4px 4px 6px;
    flex-direction: column;
    align-items: center;
    border: 1px dashed #eee;
    background: #fff;
    color: #606266;
    cursor: pointer;
}

.goods-icon-style-preset:hover,
.goods-icon-style-preset.active {
    border-color: #1f7cff;
}

.goods-icon-style-preset-icon {
    display: flex;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 60px;
}

.goods-icon-style-preset-icon .iconfont {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
}

.goods-icon-style-preset em {
    margin-top: 4px;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
}

.goods-icon-style-fields {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

.goods-icon-style-field {
    display: flex;
    min-height: 34px;
    margin-bottom: 10px;
    align-items: center;
    gap: 8px;
}

.goods-icon-style-field > label {
    width: 90px;
    color: #606266;
    text-align: right;
}

.goods-icon-style-field > input[type="number"] {
    width: 72px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    color: #303133;
}

.goods-icon-style-field > input[type="range"] {
    width: 180px;
}

.goods-icon-style-colors {
    display: flex;
    align-items: center;
    gap: 8px;
}

.goods-icon-style-colors input[type="color"] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #dcdfe6;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.goods-icon-style-add {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #dcdfe6;
    border-radius: 50%;
    background: #fff;
    color: #606266;
    cursor: pointer;
}

.goods-icon-style-add:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.goods-card-config-page .goods-recommend-title {
    margin: 20px 0;
    text-align: center;
}

.goods-card-config-page .goods-recommend-title span {
    position: relative;
}

.goods-card-config-page .goods-recommend-title span::before,
.goods-card-config-page .goods-recommend-title span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    border-top: 1px solid #969696;
    transform: translateY(-50%);
}

.goods-card-config-page .goods-recommend-title span::before {
    left: 0;
    transform: translateX(-130%);
}

.goods-card-config-page .goods-recommend-title span::after {
    right: 0;
    transform: translateX(130%);
}

.goods-card-config-page .goods-list .goods-item {
    line-height: 1;
}

.goods-card-config-page .goods-list .goods-item .sale {
    align-self: flex-end;
    color: #999ca7;
    font-size: 12px;
}

.goods-card-config-page .goods-list .goods-item .info-wrap .goods-name {
    height: 18px;
    margin-bottom: 5px;
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.goods-card-config-page .goods-list .goods-item .info-wrap .goods-name.multiple {
    height: 36px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.goods-card-config-page .goods-list .goods-item .shopping-cart-btn,
.goods-card-config-page .goods-list .goods-item .plus-sign-btn {
    display: inline-flex;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 5px;
    border: 1px solid;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.goods-card-config-page .goods-list .goods-item .buy-btn {
    min-width: 0;
    height: 26px;
    min-height: 26px;
    color: #fff;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
}

.goods-card-config-page .goods-list .goods-item .price-wrap {
    font-size: 0;
}

.goods-card-config-page .goods-list .goods-item .icon-diy {
    font-size: 40px;
}

.goods-card-config-page .goods-list .goods-item .icon-diy img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    vertical-align: middle;
}

.goods-card-config-page .goods-list.row1-of2 {
    display: flex;
    flex-wrap: wrap;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item {
    width: calc(50% - 5px);
    margin-top: 10px;
    margin-right: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item:nth-child(2n) {
    margin-right: 0;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item:nth-of-type(1),
.goods-card-config-page .goods-list.row1-of2 .goods-item:nth-of-type(2) {
    margin-top: 0;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item .goods-img {
    width: calc(100% + 2px);
    height: 160px;
    text-align: center;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item .goods-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item .info-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item .info-wrap .pro-info {
    display: flex;
    margin-top: auto;
    justify-content: space-between;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item .discount-price .price-wrap .unit {
    font-size: 12px;
    font-weight: bold;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item .discount-price .price-wrap .price {
    font-size: 16px;
    font-weight: bold;
}

.goods-card-config-page .goods-list.row1-of2 .goods-item .delete-price {
    flex: 1;
    color: #999ca7;
    font-size: 12px;
    line-height: 14px;
    text-decoration: line-through;
}

.goods-card-config-page .goods-list.row1-of2.style-2 .pro-info {
    align-items: center;
}

.goods-card-config-page .goods-list.row1-of2.style-2 .discount-price {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
}

.goods-card-config-page .goods-list.row1-of2.style-2 .sale {
    margin-top: 5px;
}

.goods-card-config-page .custom-save {
    padding: 15px 400px 15px 0;
    background: #fff;
    text-align: center;
}

.goods-card-config-page .custom-save .layui-btn {
    min-width: 60px;
    min-height: 34px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid #105cfb;
    border-radius: 2px;
    color: #fff;
    background: #105cfb;
    line-height: 32px;
}

.goods-card-config-page .form-message {
    display: inline-block;
    min-height: 20px;
    margin-right: 12px;
    color: #0f8a4b;
    vertical-align: middle;
}

.goods-card-config-page .form-message.error {
    color: #b42318;
}

@media (max-width: 1200px) {
    .shop-config-canvas {
        flex-direction: column;
    }

    .shop-phone-preview,
    .shop-attr-panel {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
        border-right: 0;
    }

    .shop-attr-body {
        max-height: none;
    }
}

.diy-component-controls .selected-style {
    display: inline-flex;
    align-items: center;
    min-width: 110px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #333;
    line-height: 34px;
    cursor: pointer;
}

.diy-component-controls .selected-style span {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-component-controls .selected-style i {
    margin-left: 5px;
    color: #818181;
    font-size: 12px;
}

.diy-component-controls .selected-style.diy-heatmap-entry {
    min-width: 130px;
}

.diy-component-controls .selected-style.diy-heatmap-entry.text-color {
    color: #105cfb;
}

.diy-component-controls .diy-word-aux {
    clear: both;
    margin: 0 0 14px 100px;
    color: #b2b2b2;
    font-size: 12px;
    line-height: 1.6;
}

.diy-image-choice-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 260px;
}

.diy-image-choice {
    min-height: 0;
    padding: 6px;
    border: 1px solid #e5e9f2;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
}

.diy-image-choice.selected,
.diy-image-choice:hover {
    border-color: #105cfb;
}

.diy-image-choice img {
    display: block;
    width: 100%;
    height: 84px;
    object-fit: cover;
    background: #f3f5f8;
}

.diy-image-choice span {
    display: block;
    margin-top: 5px;
    color: #606266;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.diy-text-style-current {
    width: 180px;
    justify-content: space-between;
}

.diy-text-style-list {
    width: 280px;
    max-height: 430px;
    margin-top: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow-y: auto;
    border: 1px solid #eef0f5;
    background: #fff;
    box-sizing: border-box;
}

.diy-text-style-card {
    min-height: 92px;
    padding: 6px;
    border: 1px solid #e5e9f2;
    background: #fff;
    cursor: pointer;
    text-align: center;
}

.diy-text-style-card:hover,
.diy-text-style-card.selected {
    border-color: #105cfb;
}

.diy-text-style-card img {
    display: block;
    width: 100%;
    height: 62px;
    object-fit: contain;
    background: #f6f7f9;
}

.diy-text-style-card span {
    display: block;
    margin-top: 5px;
    color: #606266;
    font-size: 12px;
    line-height: 16px;
}

.notice-config-item .diy-link-value {
    max-width: 118px;
}

.diy-data-picker-mask {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .32);
}

.diy-data-picker-mask[hidden] {
    display: none;
}

.diy-data-picker-mask .diy-data-picker {
    position: static;
    transform: none;
    width: 760px;
    max-width: calc(100vw - 80px);
    height: 560px;
    max-height: calc(100vh - 100px);
    background: #fff;
    overflow: hidden;
}

.diy-picker-toolbar {
    height: 58px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-bottom: 1px solid #f1f3f7;
}

.diy-picker-toolbar .layui-input {
    width: 260px;
}

.diy-picker-table-wrap {
    height: 380px;
    padding: 15px;
    overflow: auto;
}

.diy-picker-table {
    width: 100%;
}

.diy-picker-table th,
.diy-picker-table td {
    padding: 10px 12px;
}

.diy-picker-entity {
    display: flex;
    align-items: center;
    min-width: 0;
}

.diy-picker-img {
    width: 48px;
    height: 48px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e5e9f2;
    background: #f7f8fb;
    color: #8c96a8;
    font-size: 12px;
}

.diy-picker-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diy-picker-entity strong {
    display: block;
    max-width: 360px;
    overflow: hidden;
    color: #303133;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-picker-entity p {
    margin: 4px 0 0;
    max-width: 360px;
    overflow: hidden;
    color: #8c96a8;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.goods-data {
    padding: 0;
    border-color: transparent;
    background: transparent;
}

.diy-preview-component.goods-data .goods-list {
    width: 100%;
    overflow: hidden;
}

.diy-preview-component.goods-recommend .top-wrap {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.diy-preview-component.goods-recommend .top-wrap i {
    width: 35px;
    height: 35px;
    margin-right: 5px;
    margin-left: 10px;
    border-radius: 50%;
    font-size: 25px;
    line-height: 35px;
    text-align: center;
}

.diy-preview-component.goods-recommend .top-wrap h3 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.diy-preview-component.goods-recommend .top-wrap .line {
    height: 14px;
    margin: 0 5px;
    border: 1px solid;
}

.diy-preview-component.goods-recommend .top-wrap .sub {
    font-size: 12px;
}

.diy-preview-component.goods-data .goods-item {
    line-height: 1;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
}

.diy-preview-component.goods-data .goods-img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f3f5f8;
}

.diy-preview-component.goods-data .goods-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diy-preview-component.goods-data b,
.diy-preview-component.article-data b {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: #303133;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.goods-data .goods-name {
    margin-bottom: 5px;
    color: #303133;
    font-size: 14px;
    line-height: 1.3;
    max-width: 100%;
    word-break: break-all;
}

.diy-preview-component.goods-data .goods-name.using-hidden {
    word-break: keep-all;
}

.diy-preview-component.goods-data .info-wrap,
.diy-preview-component.goods-data .discount-price,
.diy-preview-component.goods-data .pro-info {
    min-width: 0;
}

.diy-preview-component.goods-data .tag-wrap {
    margin-bottom: 10px;
}

.diy-preview-component.goods-data .hollow-tag {
    display: inline-block;
    max-width: 100%;
    padding: 1px 2px 0;
    border: 1px solid #ff6a00;
    border-radius: 2px;
    box-sizing: border-box;
    color: #ff6a00;
    font-size: 9px;
    line-height: 1.2;
}

.diy-preview-component.goods-data .label-wrap {
    position: relative;
    display: inline-block;
    margin: 5px 0;
    padding: 4px 8px 4px 26px;
    border-radius: 20px;
}

.diy-preview-component.goods-data .label-wrap img {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 23px;
    height: 23px;
}

.diy-preview-component.goods-data .label-wrap span {
    font-size: 12px;
}

.diy-preview-component.goods-data .pro-info {
    display: flex;
    justify-content: space-between;
}

.diy-preview-component.goods-data .discount-price {
    min-width: 0;
}

.diy-preview-component.goods-data .price-wrap {
    display: flex;
    align-items: center;
    font-size: 0;
}

.diy-preview-component.goods-data .member-price-vip {
    display: block;
    width: 22px;
    height: auto;
    margin-left: 4px;
    object-fit: contain;
}

.diy-preview-component.goods-data i {
    font-style: normal;
}

.diy-preview-component.goods-data .unit {
    font-size: 12px;
}

.diy-preview-component.goods-data .price {
    font-size: 16px;
    font-weight: 700;
}

.diy-preview-component.goods-data .delete-price {
    flex: 1;
    color: #999;
    font-size: 12px;
    line-height: 14px;
    text-decoration: line-through;
}

.diy-preview-component.goods-data .sale {
    align-self: flex-end;
    color: #999;
    font-size: 12px;
}

.diy-preview-component.goods-data .buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 26px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}

.diy-preview-component.goods-data .shopping-cart-btn,
.diy-preview-component.goods-data .plus-sign-btn {
    padding: 5px;
    border: 1px solid;
    border-radius: 50%;
    font-size: 18px;
}

.diy-preview-component.goods-data .diy-btn-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
}

.diy-preview-component.goods-data .diy-btn-preview img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.diy-preview-component.goods-data .row1-of1 .goods-item {
    display: flex;
    margin-bottom: 10px;
    padding: 8px;
}

.diy-preview-component.goods-data .row1-of1 .goods-item:last-child {
    margin-bottom: 0;
}

.diy-preview-component.goods-data .row1-of1 .goods-img {
    width: 130px;
    height: 130px;
    flex: none;
}

.diy-preview-component.goods-data .row1-of1 .info-wrap {
    flex: 1;
    width: calc(100% - 130px);
    padding: 3px 0 5px 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.diy-preview-component.goods-data .row1-of1 .pro-info {
    align-items: center;
    margin-top: auto;
}

.diy-preview-component.goods-data .row1-of2 {
    display: flex;
    flex-wrap: wrap;
}

.diy-preview-component.goods-data .row1-of2 .goods-item {
    width: calc(50% - 5px);
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
}

.diy-preview-component.goods-data .row1-of2 .goods-item:nth-child(2n) {
    margin-right: 0;
}

.diy-preview-component.goods-data .row1-of2 .goods-item:nth-child(1),
.diy-preview-component.goods-data .row1-of2 .goods-item:nth-child(2) {
    margin-top: 0;
}

.diy-preview-component.goods-data .row1-of2 .goods-img {
    width: calc(100% + 2px);
    height: 160px;
}

.diy-preview-component.goods-data .row1-of2 .info-wrap {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.diy-preview-component.goods-data .row1-of2 .pro-info {
    margin-top: auto;
}

.diy-preview-component.goods-data .row1-of3 {
    display: flex;
    flex-wrap: wrap;
}

.diy-preview-component.goods-data .row1-of3 .goods-item {
    width: calc(33.33% - 6px);
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.diy-preview-component.goods-data .row1-of3 .goods-item:nth-child(3n-1) {
    margin-right: 9px;
    margin-left: 9px;
}

.diy-preview-component.goods-data .row1-of3 .goods-item:nth-child(1),
.diy-preview-component.goods-data .row1-of3 .goods-item:nth-child(2),
.diy-preview-component.goods-data .row1-of3 .goods-item:nth-child(3) {
    margin-top: 0;
}

.diy-preview-component.goods-data .row1-of3 .goods-img {
    width: calc(100% + 2px);
    height: 110px;
}

.diy-preview-component.goods-data .row1-of3 .info-wrap {
    flex: 1;
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.diy-preview-component.goods-data .row1-of3 .pro-info {
    flex-direction: column;
    margin-top: auto;
}

.diy-preview-component.goods-recommend .style-1 .goods-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 10px;
    background: transparent !important;
    overflow: hidden;
}

.diy-preview-component.goods-recommend .style-1 .goods-list .goods-item {
    display: flex;
    flex: 0 0 100px;
    flex-direction: column;
    width: 100px;
    max-width: 100px;
    margin-top: 10px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

.diy-preview-component.goods-recommend .style-1 .goods-list .goods-item:nth-of-type(1),
.diy-preview-component.goods-recommend .style-1 .goods-list .goods-item:nth-of-type(2),
.diy-preview-component.goods-recommend .style-1 .goods-list .goods-item:nth-of-type(3) {
    margin-top: 0;
}

.diy-preview-component.goods-recommend .style-1 .goods-list .goods-img,
.diy-preview-component.goods-recommend .style-2 .goods-list .goods-img,
.diy-preview-component.goods-recommend .style-3 .goods-list .goods-img {
    width: 100%;
    height: 100px;
}

.diy-preview-component.goods-recommend .style-1 .goods-list .info-wrap,
.diy-preview-component.goods-recommend .style-2 .goods-list .info-wrap,
.diy-preview-component.goods-recommend .style-3 .goods-list .info-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 5px;
    padding: 0;
}

.diy-preview-component.goods-recommend .style-1 .goods-list .pro-info,
.diy-preview-component.goods-recommend .style-2 .goods-list .pro-info {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}

.diy-preview-component.goods-recommend .style-1 .goods-list .discount-price,
.diy-preview-component.goods-recommend .style-2 .goods-list .discount-price {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
}

.diy-preview-component.goods-recommend .style-2 {
    padding-bottom: 10px;
    background-repeat: round;
}

.diy-preview-component.goods-recommend .style-2 .goods-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 10px;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff !important;
    box-sizing: border-box;
}

.diy-preview-component.goods-recommend .style-2 .goods-list .goods-item {
    display: flex;
    flex: 0 0 100px;
    flex-direction: column;
    width: 100px;
    max-width: 100px;
    margin-top: 10px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

.diy-preview-component.goods-recommend .style-2 .goods-list .goods-item:nth-of-type(1),
.diy-preview-component.goods-recommend .style-2 .goods-list .goods-item:nth-of-type(2),
.diy-preview-component.goods-recommend .style-2 .goods-list .goods-item:nth-of-type(3) {
    margin-top: 0;
}

.diy-preview-component.goods-recommend .style-3 {
    background-position: bottom;
}

.diy-preview-component.goods-recommend .style-3 .goods-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 10px;
    background: transparent !important;
    overflow: hidden;
}

.diy-preview-component.goods-recommend .style-3 .goods-list .goods-item {
    display: flex;
    flex: 0 0 100px;
    flex-direction: column;
    width: 100px;
    max-width: 100px;
    margin-top: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.diy-preview-component.goods-recommend .goods-list .goods-name {
    min-height: 18px;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
}

.diy-preview-component.goods-recommend .style-1 .goods-list .goods-name {
    font-size: 13px;
}

.diy-preview-component.goods-recommend .style-2 .goods-list .goods-name {
    line-height: 1;
}

.diy-preview-component.goods-recommend .style-3 .goods-list .pro-info {
    display: block;
    margin-top: auto;
    text-align: center;
}

.diy-preview-component.goods-data .horizontal-slide {
    margin: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
}

.diy-preview-component.goods-data .horizontal-slide::-webkit-scrollbar {
    display: none;
}

.diy-preview-component.goods-data .horizontal-slide .goods-item {
    width: 97px;
    display: inline-block;
    margin-right: var(--goods-slide-gap, 10px);
    margin-left: var(--goods-slide-gap, 10px);
    vertical-align: top;
}

.diy-preview-component.goods-data .horizontal-slide.slide-slide {
    scroll-snap-type: x mandatory;
}

.diy-preview-component.goods-data .horizontal-slide.slide-slide .goods-item {
    scroll-snap-align: start;
}

.diy-preview-component.goods-data .horizontal-slide .goods-img {
    width: calc(100% + 2px);
    height: 100px;
}

.diy-preview-component.goods-data .horizontal-slide .info-wrap {
    padding: 5px 10px;
}

.diy-preview-component.goods-data .horizontal-slide .pro-info {
    flex-direction: column;
    margin-top: 5px;
}

.diy-preview-component.goods-data .large-mode .goods-item {
    width: 100%;
    margin-top: 10px;
}

.diy-preview-component.goods-data .large-mode .goods-item:first-child {
    margin-top: 0;
}

.diy-preview-component.goods-data .large-mode .goods-img {
    width: 101.5%;
    height: 160px;
}

.diy-preview-component.goods-data .large-mode .info-wrap {
    padding: 10px 10px 25px;
}

.diy-preview-component.goods-data .large-mode .pro-info {
    align-items: center;
    margin-top: 5px;
    position: relative;
}

.diy-preview-component.goods-data .row1-of2.style-1 .pro-info .discount-price .price-wrap {
    display: inline-block;
}

.diy-preview-component.goods-data .row1-of2.style-1 .pro-info .discount-price .delete-price {
    display: inline-block;
    margin-left: 5px;
}

.diy-preview-component.goods-data .row1-of2.style-1 .pro-info .sale {
    margin-top: 5px;
}

.diy-preview-component.goods-data .row1-of2.style-2 .pro-info {
    align-items: center;
}

.diy-preview-component.goods-data .row1-of2.style-2 .pro-info .discount-price {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
}

.diy-preview-component.goods-data .row1-of2.style-2 .pro-info .sale {
    margin-top: 5px;
}

.diy-preview-component.goods-data .row1-of2.style-3 .pro-info .discount-price {
    display: flex;
    flex: 1;
    align-content: center;
    justify-content: space-between;
}

.diy-preview-component.goods-data .row1-of3.style-1 .pro-info .delete-price {
    margin-left: 10px;
}

.diy-preview-component.goods-data .row1-of3.style-2 .pro-info {
    flex-direction: row !important;
    align-items: center;
}

.diy-preview-component.goods-data .row1-of3.style-2 .pro-info .discount-price {
    flex-direction: column;
    align-items: initial !important;
}

.diy-preview-component.goods-data .horizontal-slide .discount-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.diy-preview-component.goods-data .horizontal-slide .delete-price {
    flex-basis: 100%;
    align-self: flex-end;
}

.diy-preview-component.goods-data .large-mode.style-1 .pro-info .discount-price {
    display: flex;
    flex: 1;
    align-items: baseline;
}

.diy-preview-component.goods-data .large-mode.style-1 .pro-info .discount-price .price-wrap {
    display: flex;
    align-items: baseline;
}

.diy-preview-component.goods-data .large-mode.style-1 .pro-info .discount-price .delete-price {
    display: inline-block;
    margin-left: 5px;
}

.diy-preview-component.goods-data .large-mode.style-1 .pro-info .sale {
    position: absolute;
    bottom: -15px;
    font-size: 12px;
}

.diy-preview-component.article-data {
    padding: 0;
}

.diy-preview-component.article-data .list-wrap.style-1 .item {
    display: flex;
    margin-bottom: 10px;
    padding: 10px;
}

.diy-preview-component.article-data .list-wrap.style-1 .item:last-child {
    margin-bottom: 0;
}

.diy-preview-component.article-data .img-wrap {
    width: 80px;
    margin-right: 10px;
    text-align: center;
}

.diy-preview-component.article-data .img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #f3f5f8;
}

.diy-preview-component.article-data .info-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

.diy-preview-component.article-data .title {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.diy-preview-component.article-data .read-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 5px;
    color: #999ca7;
    line-height: 1;
}

.diy-preview-component.article-data .category-icon {
    width: 4px;
    height: 4px;
    margin-right: 5px;
    border-radius: 50%;
}

.diy-preview-component.article-data .date {
    margin-left: 10px;
}

.diy-preview-component.brand-data {
    padding: 0;
    background: #fff;
}

.diy-preview-component.brand-data .brand-wrap {
    background: #fff;
}

.diy-preview-component.brand-data .title-wrap {
    margin: 0;
    padding: 10px 0 5px;
    text-align: center;
}

.diy-preview-component.brand-data ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 10px;
    list-style: none;
}

.diy-preview-component.brand-data li {
    width: 22.59%;
    height: 62px;
    margin-top: 10px;
    margin-right: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    text-align: center;
}

.diy-preview-component.brand-data li:nth-of-type(1),
.diy-preview-component.brand-data li:nth-of-type(2),
.diy-preview-component.brand-data li:nth-of-type(3),
.diy-preview-component.brand-data li:nth-of-type(4) {
    margin-top: 0;
}

.diy-preview-component.brand-data li:nth-of-type(4n) {
    margin-right: 0;
}

.diy-preview-component.brand-data img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.diy-preview-component.brand-data .brand-image-empty,
.diy-preview-component.article-data .article-image-empty {
    padding: 4px;
    color: #999ca7;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
}

.diy-preview-component.brand-empty {
    min-height: 72px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #999ca7;
    font-size: 12px;
}

.diy-preview-component.top-category-data .top-category-real-empty {
    color: #999ca7;
    font-size: 12px;
    white-space: nowrap;
}

.diy-preview-component.goods-category-data {
    padding: 0;
    overflow: hidden;
    background: #fff;
    color: #303133;
    font-size: 12px;
}

.diy-preview-component.goods-category-data img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

.diy-preview-component.goods-category-data .goods-category-search {
    height: 52px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.diy-preview-component.goods-category-data .goods-category-search span {
    flex: 1;
    height: 32px;
    padding-left: 15px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    color: #999ca7;
}

.diy-preview-component.goods-category-data .goods-category-search i {
    width: 34px;
    margin-left: -34px;
    color: #999ca7;
    line-height: 32px;
    text-align: center;
}

.diy-preview-component.goods-category-data .goods-category-layout {
    min-height: 430px;
    display: flex;
    background: #fff;
}

.diy-preview-component.goods-category-data .goods-category-side {
    flex: 0 0 85px;
    width: 85px;
    background: #f5f5f5;
}

.diy-preview-component.goods-category-data .goods-category-side > span {
    position: relative;
    min-height: 50px;
    padding: 10px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: anywhere;
    text-align: center;
    box-sizing: border-box;
}

.diy-preview-component.goods-category-data .goods-category-side > span.active {
    background: #fff;
    font-weight: 600;
}

.diy-preview-component.goods-category-data .goods-category-side > span.active::before {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--base-color, #ff6a00);
    content: "";
}

.diy-preview-component.goods-category-data .goods-category-main {
    flex: 1;
    min-width: 0;
    padding: 0 12px 16px;
    box-sizing: border-box;
}

.diy-preview-component.goods-category-data .goods-category-banner {
    width: 100%;
    height: 86px;
    margin: 10px 0;
    overflow: hidden;
}

.diy-preview-component.goods-category-data .goods-category-main h4 {
    margin: 12px 0 6px;
    font-size: 14px;
    text-align: center;
}

.diy-preview-component.goods-category-data .goods-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diy-preview-component.goods-category-data .goods-category-grid > div {
    min-width: 0;
    padding: 8px 4px;
    text-align: center;
}

.diy-preview-component.goods-category-data .goods-category-grid-image {
    width: 58px;
    height: 58px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f5f5;
}

.diy-preview-component.goods-category-data .goods-category-grid-image.empty {
    padding: 4px;
    color: #999ca7;
    font-size: 9px;
    line-height: 1.2;
    box-sizing: border-box;
}

.diy-preview-component.goods-category-data .goods-category-grid > div > span:last-child {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diy-preview-component.goods-category-data .goods-category-children {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.diy-preview-component.goods-category-data .goods-category-children span {
    padding: 5px 10px;
    border-radius: 14px;
    background: #f5f6f7;
    color: #606266;
    font-size: 11px;
}

.diy-preview-component.goods-category-data .goods-category-children span.active {
    color: var(--base-color, #ff6a00);
}

.diy-preview-component.goods-category-data .goods-category-product {
    padding: 10px 0;
    background: #fff;
    box-sizing: border-box;
}

.diy-preview-component.goods-category-data .goods-category-product.row {
    display: flex;
}

.diy-preview-component.goods-category-data .goods-category-product-image {
    position: relative;
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f5f5;
    color: #999ca7;
    font-size: 10px;
    text-align: center;
}

.diy-preview-component.goods-category-data .goods-category-product-info {
    flex: 1;
    min-width: 0;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
}

.diy-preview-component.goods-category-data .goods-category-product strong {
    display: -webkit-box;
    min-height: 36px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.diy-preview-component.goods-category-data .goods-category-product-foot {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.diy-preview-component.goods-category-data .goods-category-product-foot span {
    color: var(--base-color, #ff6a00);
    font-size: 16px;
    font-weight: 700;
}

.diy-preview-component.goods-category-data .goods-category-product-foot del {
    color: #999ca7;
    font-size: 10px;
}

.diy-preview-component.goods-category-data .goods-category-product-foot em {
    margin-left: auto;
    padding: 5px 9px;
    border-radius: 13px;
    background: var(--base-color, #ff6a00);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    white-space: nowrap;
}

.diy-preview-component.goods-category-data.template-3 .goods-category-main {
    padding-top: 10px;
}

.diy-preview-component.goods-category-data .goods-category-product.large .goods-category-product-image {
    width: 100%;
    height: 190px;
    margin-bottom: 8px;
}

.diy-preview-component.goods-category-data .goods-category-product.large strong {
    min-height: 0;
}

.diy-preview-component.goods-category-data .goods-category-product.large .goods-category-product-foot {
    min-height: 32px;
}

.diy-preview-component.goods-category-data .goods-category-top {
    position: relative;
    height: 104px;
    padding-right: 42px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    box-sizing: border-box;
}

.diy-preview-component.goods-category-data .goods-category-top > span {
    flex: 0 0 70px;
    width: 70px;
    padding: 8px 5px;
    text-align: center;
    box-sizing: border-box;
}

.diy-preview-component.goods-category-data .goods-category-top-image {
    width: 55px;
    height: 55px;
    margin: 0 auto 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f5f5;
    color: #999ca7;
    font-size: 9px;
}

.diy-preview-component.goods-category-data .goods-category-top > span > em {
    max-width: 100%;
    padding: 2px 5px;
    border-radius: 9px;
    display: inline-block;
    overflow: hidden;
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diy-preview-component.goods-category-data .goods-category-top > span.active > em {
    background: var(--base-color, #ff6a00);
    color: #fff;
}

.diy-preview-component.goods-category-data .goods-category-top > b {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 10px;
}

.diy-preview-component.goods-category-data .goods-category-state {
    flex: 1;
    min-height: 120px;
    padding: 24px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999ca7;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
}

.diy-preview-component.goods-category-data .goods-category-state.error {
    color: #d84a3a;
}

.diy-preview-component.goods-category-data .goods-category-quick {
    height: 50px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, .08);
    box-sizing: border-box;
}

.diy-preview-component.goods-category-data .goods-category-quick span {
    flex: 1;
    color: #999ca7;
    font-size: 11px;
}

.diy-preview-component.goods-category-data .goods-category-quick em {
    padding: 8px 16px;
    border-radius: 16px;
    background: var(--base-color, #ff6a00);
    color: #fff;
    font-style: normal;
}

.diy-preview-component.top-category-data {
    min-height: 35px;
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.diy-preview-component.top-category-data .preview-box {
    border-radius: 0;
}

.diy-preview-component.top-category-data .top-category-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0 12px;
    box-sizing: border-box;
}

.diy-preview-component.top-category-data .preview-box-line .top-category-wrap {
    height: 35px;
    padding: 0 12px;
}

.diy-preview-component.top-category-data .top-category-item {
    display: inline-block;
    padding: 3px 10px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

.diy-preview-component.top-category-data .preview-box-line .top-category-item {
    margin-right: 20px;
    padding: 3px 0;
}

.diy-preview-component.top-category-data .top-category-item.active {
    position: relative;
}

.diy-preview-component.top-category-data .top-category-item p {
    margin: 0;
    color: inherit;
    line-height: 20px;
}

.diy-preview-component.top-category-data .preview-box-line .top-category-item.active .line {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    transform: translateX(-50%);
}

.diy-preview-component.top-category-data .top-category-wrap.fill .top-category-item {
    margin-right: 0;
}

.diy-preview-component.top-category-data .top-category-wrap .iconfont {
    position: absolute;
    right: 12px;
    color: #333;
    font-size: 16px;
    line-height: 1;
}

.diy-preview-component.member-info-data {
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.diy-preview-component.member-info-data .member-info-wrap {
    position: relative;
    min-height: 155px;
    overflow: hidden;
}

.diy-preview-component.member-info-data .info-wrap {
    display: flex;
    align-items: center;
    padding: 15px;
    color: #fff;
    box-sizing: border-box;
}

.diy-preview-component.member-info-data .headimg {
    flex: none;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
}

.diy-preview-component.member-info-data .headimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diy-preview-component.member-info-data .member-avatar-empty {
    padding: 4px;
    color: inherit;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
}

.diy-preview-component.member-info-data .info {
    flex: 1;
    min-width: 0;
    padding-right: 10px;
}

.diy-preview-component.member-info-data .nickname {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.diy-preview-component.member-info-data .name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.member-info-data .desc {
    font-size: 12px;
    line-height: 1;
}

.diy-preview-component.member-info-data .member-code {
    flex: none;
    color: inherit;
    font-size: 20px;
}

.diy-preview-component.member-info-data .member-level {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 18px;
    margin-left: 5px;
    padding: 0 8px;
    border-radius: 2px;
    background: linear-gradient(107deg, #7c7878 0%, #201a18 100%);
    color: #f7c774;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.diy-preview-component.member-info-data .member-level .iconfont {
    margin-right: 5px;
    font-size: 12px;
}

.diy-preview-component.member-info-data .member-level.style3,
.diy-preview-component.member-info-data .member-level.style4 {
    height: auto;
    margin-left: 0;
    padding: 0;
    background: transparent;
}

.diy-preview-component.member-info-data .member-level.style3 img {
    width: auto;
    height: 18px;
}

.diy-preview-component.member-info-data .member-level.style3 span {
    display: inline-block;
    height: 18px;
    margin-left: 5px;
    padding: 0 10px;
    border-radius: 18px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 0;
    background: #f8cf9a;
    color: #8d4b16;
    line-height: 18px;
}

.diy-preview-component.member-info-data .member-level.style4 {
    overflow: hidden;
    border-radius: 10px;
    background: #474758;
}

.diy-preview-component.member-info-data .member-level.style4 img {
    width: auto;
    height: 18px;
}

.diy-preview-component.member-info-data .member-level.style4 span {
    padding: 0 10px 0 3px;
    color: #ddc095;
    line-height: 18px;
}

.diy-preview-component.member-info-data .account-info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    color: #fff;
}

.diy-preview-component.member-info-data .account-item {
    flex: 1;
    text-align: center;
}

.diy-preview-component.member-info-data .account-item .value {
    margin-bottom: 2px;
    font-size: 17px;
    font-weight: 700;
}

.diy-preview-component.member-info-data .account-item .title {
    font-size: 13px;
}

.diy-preview-component.member-info-data .solid {
    width: 1px;
    height: 35px;
    border-radius: 1px;
    background: #fff;
}

.diy-preview-component.member-info-data .super-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 15px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: url("/assets/legacy-diy/components/member_info/img/super_member_bg.png") no-repeat bottom / 100% 100%, linear-gradient(107deg, #7c7878 0%, #201a18 100%);
    box-sizing: border-box;
    color: #fff;
}

.diy-preview-component.member-info-data .super-info {
    flex: 1;
    min-width: 0;
    font-size: 18px;
}

.diy-preview-component.member-info-data .super-info img {
    width: auto;
    height: 18px;
    margin-bottom: 7px;
}

.diy-preview-component.member-info-data .super-text {
    display: flex;
    align-items: center;
    color: #ffdbA6;
    font-size: 12px;
}

.diy-preview-component.member-info-data.style-1 .account-info {
    padding: 10px 0;
}

.diy-preview-component.member-info-data.style-1 .super-member {
    height: 50px;
}

.diy-preview-component.member-info-data.style-2 .member-info-wrap {
    border-radius: 0 0 100% 100% / 0 0 35px 35px;
}

.diy-preview-component.member-info-data.style-2 .account-info {
    margin-top: 10px !important;
    border-radius: 9px;
    background: #fff;
    color: #333;
}

.diy-preview-component.member-info-data.style-2 .solid {
    background: #f2f2f2;
}

.diy-preview-component.member-info-data.style-2 .super-member {
    background: url("/assets/legacy-diy/components/member_info/img/super_member_bg.png") no-repeat bottom / 100% 100%, linear-gradient(107deg, #fadcb5 0%, #f6bd74 100%);
    color: #8d4b16;
}

.diy-preview-component.member-info-data.style-3 .info-wrap,
.diy-preview-component.member-info-data.style-3 .account-info {
    color: #282c38;
}

.diy-preview-component.member-info-data.style-3 .account-item .value {
    font-size: 22px;
}

.diy-preview-component.member-info-data.style-3 .account-item .title {
    color: #aab0ba;
}

.diy-preview-component.member-info-data.style-3 .solid {
    background: transparent;
}

.diy-preview-component.member-info-data.style-3 .super-member {
    border-radius: 11px;
    background: #292f45 url("/assets/legacy-diy/components/member_info/img/supervip_bg.png") no-repeat bottom / 100% 100%;
}

.diy-preview-component.member-info-data.style-3 .super-info .desc {
    color: #e3c377;
}

.diy-preview-component.member-info-data.style-3 .super-text span {
    display: block;
    width: 80px;
    height: 28px;
    border-radius: 28px;
    background: #e3c377;
    color: #77413e;
    font-size: 12px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.diy-preview-component.member-info-data.style-4 .member-info-wrap {
    min-height: 278px;
}

.diy-preview-component.member-info-data.style-4:not(.has-super-member),
.diy-preview-component.member-info-data.style-4:not(.has-super-member) .member-info-wrap {
    background: transparent !important;
}

.diy-preview-component.member-info-data.style-4:not(.has-super-member) .member-info-wrap::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 165px;
    background: var(--member-info-background);
    content: "";
    pointer-events: none;
}

.diy-preview-component.member-info-data.style-4:not(.has-super-member) .info-wrap,
.diy-preview-component.member-info-data.style-4:not(.has-super-member) .member-info-style4 {
    z-index: 1;
}

.diy-preview-component.member-info-data.style-4:not(.has-super-member) .info-wrap {
    position: relative;
}

.diy-preview-component.member-info-data.style-4 .info-wrap {
    padding: 22px 15px;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 {
    position: absolute;
    top: 100px;
    left: 12px;
    right: 12px;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
}

.diy-preview-component.member-info-data.style-4.has-super-member .member-info-wrap {
    min-height: 318px;
}

.diy-preview-component.member-info-data.style-4.has-super-member .info-wrap {
    padding: 15px 15px 133px;
}

.diy-preview-component.member-info-data.style-4.has-super-member .member-info-style4 {
    top: 100px;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 .super-member {
    height: 60px;
    padding: 10px;
    border-radius: 11px;
    background: #292f45 url("/assets/legacy-diy/components/member_info/img/super_vip_bg_4.png") no-repeat bottom / 100% 100%;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 .super-info {
    display: flex;
    align-items: center;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 .super-info img {
    width: 40px;
    height: auto;
    margin: 0 10px 0 0;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 .super-info .desc {
    color: #333;
    font-size: 15px;
    font-weight: 700;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 .super-text {
    justify-content: center;
    width: 69px;
    height: 26px;
    margin-left: auto;
    border-radius: 13px;
    background: #333;
    color: #f6dcad;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 .account-info {
    padding: 25px 0;
    color: #282c38;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 .solid {
    background: transparent;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 .account-item .value {
    color: #282c38;
    font-size: 19px;
}

.diy-preview-component.member-info-data.style-4 .member-info-style4 .account-item .title {
    color: #666;
    font-size: 12px;
}

.diy-preview-component.member-info-data.style-4 .style4-other {
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
}

.diy-preview-component.member-info-data.style-4 .style4-btn-wrap {
    display: flex;
    flex: 1;
}

.diy-preview-component.member-info-data.style-4 .style4-btn-wrap button {
    width: 100px;
    height: 40px;
    margin: 0;
    border-radius: 22px;
    line-height: 40px;
}

.diy-preview-component.member-info-data.style-4 .style4-btn-wrap button:first-child {
    margin-right: 15px;
    border: 0;
    background: #ff6a00;
    color: #fff;
}

.diy-preview-component.member-info-data.style-4 .style4-btn-wrap button:last-child {
    height: 38px;
    border: 1px solid #ff6a00;
    background: #fff;
    color: #ff6a00;
    line-height: 38px;
}

.diy-preview-component.member-info-data.style-4 .code {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    background: #ff6a00;
    box-sizing: border-box;
}

.diy-preview-component.member-info-data.style-4 .code img {
    width: 100%;
    height: 100%;
}

.diy-preview-component.member-order-data {
    padding: 0;
    background: #fff;
}

.diy-preview-component.member-order-data .status-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    color: #333;
}

.diy-preview-component.member-order-data .item-wrap {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.diy-preview-component.member-order-data .icon-block {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    margin: 2px auto;
    font-size: 30px;
}

.diy-preview-component.member-order-data .icon-block > img,
.diy-preview-component.member-order-data .icon-shade {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.diy-preview-component.member-order-data .icon-block > img {
    z-index: 6;
}

.diy-preview-component.member-order-data .icon-shade {
    z-index: 5;
    background: var(--base-color, #ff6a00);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.diy-preview-component.member-order-data .icon-block i {
    display: block;
    font-size: 30px;
    line-height: 30px;
}

.diy-preview-component.member-order-data.style-4 .icon-block i {
    font-size: 32px;
}

.diy-preview-component.member-order-data .title {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #333;
    font-size: 13px;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.many-goods-group,
.hot-area-item {
    position: relative;
    padding-right: 28px;
}

.diy-preview-component.many-goods-data {
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.diy-preview-component.many-goods-data .many-goods-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 10px 8px;
    overflow: hidden;
    border-bottom: 1px solid #f1f3f7;
}

.diy-preview-component.many-goods-data .many-goods-tabs span {
    flex: 0 0 auto;
    min-width: 64px;
    text-align: center;
}

.diy-preview-component.many-goods-data .many-goods-tabs b,
.diy-preview-component.many-goods-data .many-goods-tabs em {
    display: block;
    overflow: hidden;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.many-goods-data .many-goods-tabs b {
    font-size: 13px;
    line-height: 20px;
}

.diy-preview-component.many-goods-data .many-goods-tabs em {
    color: #909399;
    font-size: 11px;
    line-height: 16px;
}

.diy-preview-component.many-goods-data .many-goods-tabs .active {
    color: var(--old-blue);
}

.diy-preview-component.many-goods-data .many-goods-body {
    display: block;
    padding: 0;
}

.diy-preview-component.follow-official {
    padding: 8px 10px;
    background: #fff;
}

.diy-preview-component.follow-official.is-hidden {
    opacity: .55;
}

.diy-preview-component.follow-official > div {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #303133;
}

.diy-preview-component.follow-official i {
    color: #1e6be6;
    font-size: 18px;
}

.diy-preview-component.follow-official span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #606266;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.follow-official button {
    height: 24px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: #1e6be6;
    color: #fff;
    font-size: 12px;
}

.diy-preview-component.hot-area-data {
    padding: 0;
    overflow: hidden;
    background: #f3f5f8;
}

.diy-preview-component.hot-area-data .hot-area-stage {
    position: relative;
    min-height: 150px;
}

.diy-preview-component.hot-area-data img {
    display: block;
    width: 100%;
}

.diy-preview-component.hot-area-data .hot-area-empty {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
    font-size: 12px;
}

.diy-preview-component.hot-area-data .hot-area-stage span {
    position: absolute;
    min-width: 20px;
    min-height: 20px;
    border: 1px solid rgba(30, 107, 230, .65);
    background: rgba(30, 107, 230, .16);
}

/* 店铺装修：继续恢复旧程序基础组件预览结构 */
.diy-preview-component.component-title {
    padding: 0;
    display: block;
    background: transparent;
}

.diy-preview-component.component-title .preview-box {
    border-radius: 0;
}

.component-title h2 {
    margin: 0;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.component-title p {
    font-size: 12px;
    color: #8c8c8c;
    padding: 5px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.component-title .text-title {
    text-align: center;
    position: relative;
    padding: 5px 0;
}

.component-title .text-title .text-title-box {
    position: relative;
}

.component-title .text-style-1 .text-title-box {
    display: inline-block;
}

.component-title .text-title .line-left,
.component-title .text-title .line-right {
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 1px;
    top: 50%;
}

.component-title .text-style-1 .line-left {
    left: 0;
    margin-left: -30px;
}

.component-title .text-style-1 .line-right {
    right: 0;
    margin-right: -30px;
}

.text-title-style-2 {
    width: 100%;
    height: 6px;
    margin-top: 3px;
    position: relative;
}

.component-title .text-title .inner-line {
    display: inline-block;
    width: 100%;
    height: 1px;
    vertical-align: top;
}

.component-title .text-style-2 .line-triangle {
    background: transparent !important;
    position: absolute;
    display: inline-block;
    border: 6px solid #000;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    left: 50%;
    bottom: 0;
    margin-left: -6px;
    transform: rotate(45deg);
}

.text-title-style-3 {
    width: 100%;
    height: 1px;
    margin-top: 5px;
    position: relative;
}

.component-title .line-short {
    width: 162px;
    height: 3px;
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: 50%;
    margin-left: -81px;
}

.component-title .text-style-4 .text-title-line {
    height: 5px;
    position: relative;
    text-align: center;
    margin-top: 5px;
}

.component-title .text-style-4 .line-left {
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 0;
    width: calc((100% - 22px) / 2);
    height: 1px;
}

.component-title .text-style-4 .line-center {
    width: 6px;
    height: 6px;
    border: 1px solid #000;
    display: inline-block;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -3px;
}

.component-title .text-style-4 .line-right {
    display: inline-block;
    position: absolute;
    top: 4px;
    right: 0;
    width: calc((100% - 22px) / 2);
    height: 1px;
}

.component-title .text-style-5 .text-title-con {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid;
}

.component-title .text-style-5 .text-title-block {
    display: inline-block;
    padding: 5px;
    border: 1px solid;
    position: relative;
}

.component-title .text-style-5 .line-left,
.component-title .text-style-5 .line-right {
    height: 5px;
    position: absolute;
    width: 40px;
    top: 50%;
    margin-top: -2px;
}

.component-title .text-style-5 .line-left {
    left: 0;
    margin-left: -30px;
}

.component-title .text-style-5 .line-right {
    right: 0;
    margin-right: -30px;
}

.component-title .text-title .text-title-outer {
    display: inline-block;
    position: relative;
}

.component-title .text-title .text-title-outer .text-title-con {
    display: inline-block;
    padding: 3px 25px;
    border: 1px solid;
    position: relative;
    z-index: 2;
}

.component-title .text-title .text-title-outer .text-title-con-2 {
    position: absolute;
    display: inline-block;
    top: 5px;
    right: -5px;
    bottom: -5px;
    left: 5px;
    border: 1px solid;
    z-index: 0;
}

.component-title .text-style-8 .text-title-box {
    padding-left: 10px;
}

.component-title .text-style-8 .text-title-con {
    margin-left: 10px;
}

.component-title .text-style-8 .line-left {
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2px;
}

.component-title .text-style-9 .text-title-box,
.component-title .text-style-10 .text-title-box {
    position: relative;
}

.component-title .text-style-9 .text-title-box span,
.component-title .text-style-10 .text-title-box span {
    padding: 0 8px;
}

.component-title .text-style-9 .text-title-box .left,
.component-title .text-style-10 .text-title-box .left {
    position: absolute;
    left: 0;
    width: 66px;
    height: 20px;
    top: 0;
}

.component-title .text-style-9 .text-title-box .more,
.component-title .text-style-10 .text-title-box .more {
    font-size: 12px;
    width: 66px;
    text-align: right;
    position: absolute;
    top: 2px;
    right: 0;
}

.component-title .text-style-9 .text-title-box .center,
.component-title .text-style-10 .text-title-box .center {
    width: calc(100% - 132px);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.component-title .text-style-10 .text-title-box .center {
    position: relative;
}

.component-title .text-style-9 .text-title-box .center div,
.component-title .text-style-10 .text-title-box .center div {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.component-title .text-style-9 .text-title-box .center img,
.component-title .text-style-10 .text-title-box .center img {
    max-width: 100%;
}

.component-title .text-style-9 .text-title-box .center span,
.component-title .text-style-10 .text-title-box .center span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 5;
}

.component-title .text-style-10 .text-title-box .center > img {
    width: 99px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -50px;
    z-index: 0;
}

.component-title .text-style-9 .text-subTitle-box p,
.component-title .text-style-10 .text-subTitle-box p,
.component-title .text-style-11 .text-subTitle-box p {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.component-title .text-style-11 {
    text-align: unset;
}

.component-title .text-style-11 .text-title-box {
    position: relative;
    margin: 5px 0;
    padding-left: 17px;
}

.component-title .text-style-11 .text-title-box .left {
    width: calc(100% - 66px);
    text-align: left;
}

.component-title .text-style-11 .text-title-box .more {
    font-size: 12px;
    width: 68px;
    text-align: right;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.component-title .text-style-11 .text-title-box .text-title-con {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    z-index: 5;
}

.component-title .text-style-11 .text-subTitle-box {
    position: relative;
    z-index: 5;
}

.component-title .text-style-11 .left-img {
    width: 30.5px;
    position: absolute;
    bottom: -13px;
    left: 8px;
    z-index: 0;
}

.component-title .text-style-11 .right-img {
    width: 17.5px;
    position: absolute;
    top: -7px;
    left: 86px;
    z-index: 0;
}

.component-title .text-style-12 .text-title-box,
.component-title .text-style-16 .text-title-box {
    display: flex;
    align-items: center;
    padding: 10px;
}

.component-title .text-style-12 .text-title-box .more,
.component-title .text-style-16 .text-title-box .more {
    display: flex;
    align-items: center;
    margin-left: auto;
    font-size: 12px;
}

.component-title .text-style-12 .text-title-box .title,
.component-title .text-style-16 .text-title-box .title {
    text-align: left;
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.component-title .text-style-12 .text-title-box .sub-title {
    margin-left: 8px;
    text-align: left;
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.component-title .text-style-13 .text-title-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.component-title .text-style-13 .text-title-box .right-img {
    transform: rotateY(180deg);
}

.component-title .text-style-13 .text-title-box img {
    max-height: 25px;
    max-width: 38px;
}

.component-title .text-style-13 .text-title-box .text-title {
    max-width: 210px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 8px;
}

.component-title .text-title.text-style-14 {
    display: flex;
    justify-content: space-between;
    text-align: initial;
    align-items: center;
    padding: 0 10px;
}

.component-title .text-title.text-style-14 .title-wrap .text {
    font-size: 0;
    display: inline-block;
}

.component-title .text-title.text-style-14 .title-wrap .zone {
    color: inherit;
}

.component-title .text-title.text-style-14 .title-wrap .iconfont {
    font-size: 12px;
}

.component-title .text-title.text-style-14 .title-wrap .iconfont:nth-of-type(1) {
    margin-left: 5px;
}

.component-title .text-title.text-style-14 .title-wrap .iconfont:nth-of-type(2) {
    opacity: 0.6;
}

.component-title .text-title.text-style-14 .title-wrap .iconfont:nth-of-type(3) {
    opacity: 0.4;
}

.component-title .text-title.text-style-14 .title-wrap .sub-title {
    opacity: 0.6;
    margin-top: 5px;
}

.component-title .text-title.text-style-14 .more span {
    font-size: 14px;
}

.component-title .text-title.text-style-15 .title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.component-title .text-title.text-style-15 .ornament {
    display: flex;
    align-items: flex-end;
    margin: 0 20px;
}

.component-title .text-title.text-style-15 .ornament .line {
    border-left: 4px solid;
    transform: rotate(40deg);
    border-radius: 20px;
    height: 14px;
    display: block;
    margin-right: 6px;
}

.component-title .text-title.text-style-15 .ornament .line:nth-of-type(2) {
    height: 20px;
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.component-title .text-title.text-style-15 .ornament .my {
    transform: rotate(40deg);
    line-height: 0;
    position: relative;
    top: 2px;
}

.component-title .text-title.text-style-15 .ornament .my .yuan {
    border-radius: 50%;
    width: 4px;
    height: 4px;
    display: block;
    background: currentColor;
}

.component-title .text-title.text-style-15 .ornament .my .vertical {
    border-left: 4px solid;
    height: 10px;
    margin-top: 2px;
    display: inline-block;
    border-radius: 20px;
}

.component-title .text-title.text-style-15 .sub-title {
    opacity: 0.6;
    margin-top: 2px;
}

.component-title .text-style-16 .text-title-box .sub-title {
    margin-left: 10px;
    text-align: left;
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 17px;
    background-image: radial-gradient(transparent 60%, #fff);
    height: 25px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    position: relative;
}

.component-title .text-style-16 .text-title-box .sub-title > i {
    padding: 6px;
    background-image: radial-gradient(transparent 30%, #fff);
    border-radius: 50%;
    margin-left: -10px;
    margin-right: 3px;
    font-size: 14px;
}

.diy-preview-component.rubik-cube {
    padding: 0;
    overflow: hidden;
    background: transparent;
}

.diy-preview-component.rubik-cube .preview-box {
    padding: 0;
    margin: 0;
    display: block;
    gap: 0;
}

.diy-preview-component.rubik-cube div.tip {
    text-align: center;
    height: 136px;
    line-height: 136px;
    background-size: cover;
    background-repeat: no-repeat;
}

.diy-preview-component.rubik-cube ul {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}

.diy-preview-component.rubik-cube ul li {
    text-align: center;
    list-style: none;
}

.diy-preview-component.rubik-cube ul li div {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.diy-preview-component.rubik-cube ul li img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

.diy-preview-component.rubik-cube ul li.row1-of2 {
    width: 50%;
}

.diy-preview-component.rubik-cube ul li.row1-of2 div,
.diy-preview-component.rubik-cube ul li.row1-of3 div,
.diy-preview-component.rubik-cube ul li.row1-of4 div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.diy-preview-component.rubik-cube ul li.row1-of2:nth-child(1) div,
.diy-preview-component.rubik-cube ul li.row1-of3:nth-child(1) div,
.diy-preview-component.rubik-cube ul li.row1-of4:nth-child(1) div {
    margin-left: 0 !important;
}

.diy-preview-component.rubik-cube ul li.row1-of2:nth-child(2) div,
.diy-preview-component.rubik-cube ul li.row1-of3:nth-child(3) div,
.diy-preview-component.rubik-cube ul li.row1-of4:nth-child(4) div {
    margin-right: 0 !important;
}

.diy-preview-component.rubik-cube ul li.row1-of3 {
    width: 33.33%;
}

.diy-preview-component.rubik-cube ul li.row1-of4 {
    width: 25%;
}

.diy-preview-component.rubik-cube ul li.row2-lt-of2-rt {
    width: 50%;
    display: inline-block;
}

.diy-preview-component.rubik-cube ul li.row2-lt-of2-rt:nth-child(1) div {
    margin-top: 0 !important;
    margin-left: 0 !important;
}

.diy-preview-component.rubik-cube ul li.row2-lt-of2-rt:nth-child(2) div {
    margin-top: 0 !important;
    margin-right: 0 !important;
}

.diy-preview-component.rubik-cube ul li.row2-lt-of2-rt:nth-child(3) div {
    margin-bottom: 0 !important;
    margin-left: 0 !important;
}

.diy-preview-component.rubik-cube ul li.row2-lt-of2-rt:nth-child(4) div {
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}

.diy-preview-component.rubik-cube ul .template-left,
.diy-preview-component.rubik-cube ul .template-right {
    width: 50%;
    box-sizing: border-box;
}

.diy-preview-component.rubik-cube ul .template-left li,
.diy-preview-component.rubik-cube ul .template-right li {
    width: 100%;
}

.diy-preview-component.rubik-cube ul .template-left li div {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.diy-preview-component.rubik-cube ul .template-right li.row1-lt-of2-rt:nth-child(1) div {
    margin-top: 0 !important;
    margin-right: 0 !important;
}

.diy-preview-component.rubik-cube ul .template-right li.row1-lt-of2-rt:nth-child(2) div {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.diy-preview-component.rubik-cube ul li.row1-tp-of2-bm:nth-child(1) {
    width: 100%;
}

.diy-preview-component.rubik-cube ul li.row1-tp-of2-bm:nth-child(2),
.diy-preview-component.rubik-cube ul li.row1-tp-of2-bm:nth-child(3) {
    width: 50%;
}

.diy-preview-component.rubik-cube ul li.row1-tp-of2-bm:nth-child(1) div {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.diy-preview-component.rubik-cube ul li.row1-tp-of2-bm:nth-child(2) div {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

.diy-preview-component.rubik-cube ul li.row1-tp-of2-bm:nth-child(3) div {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.diy-preview-component.rubik-cube ul .template-left li.row1-lt-of1-tp-of2-bm {
    width: 100%;
}

.diy-preview-component.rubik-cube ul .template-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.diy-preview-component.rubik-cube ul .template-bottom li {
    width: 50%;
    box-sizing: border-box;
}

.diy-preview-component.rubik-cube ul .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(1) {
    margin-left: 0 !important;
}

.diy-preview-component.rubik-cube ul .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(2) {
    margin-right: 0 !important;
}

.diy-preview-component.video-box {
    padding: 0;
    background: transparent;
}

.diy-preview-component.video-box .video-wrap video {
    width: 100%;
    height: 225px;
    display: block;
    background: #111;
    object-fit: cover;
}

.diy-preview-component.video-box .video-wrap {
    position: relative;
    overflow: hidden;
}

.diy-preview-component.video-box .video-empty {
    height: 225px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #999ca7;
    font-size: 12px;
}

.diy-preview-component.video-box .video-preview-error {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, .68);
    font-size: 12px;
}

.diy-preview-component.video-box .video-wrap.video-error .video-preview-error {
    display: flex;
}

.diy-preview-component.article-empty {
    min-height: 72px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999ca7;
    font-size: 12px;
}

.diy-preview-component.follow-official-account-wrap {
    padding: 0;
    background: transparent;
}

.diy-preview-component.follow-official-account-wrap.is-hidden {
    opacity: .55;
}

.diy-preview-component.follow-official-account-wrap.is-unavailable {
    background: #f7f8fa;
}

.diy-preview-component.follow-official-account-wrap .follow-account-state {
    min-height: 54px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    color: #606266;
    text-align: left;
}

.diy-preview-component.follow-official-account-wrap .follow-account-state strong {
    color: #303133;
    font-size: 13px;
    font-weight: 600;
}

.diy-preview-component.follow-official-account-wrap .follow-account-state span {
    overflow: hidden;
    color: #909399;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.follow-official-account-wrap .site-info-box {
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
}

.diy-preview-component.follow-official-account-wrap .site-info {
    display: flex;
    align-items: center;
}

.diy-preview-component.follow-official-account-wrap .img-box {
    width: 35px;
    height: 35px;
    line-height: initial;
    border-radius: 50%;
    overflow: hidden;
}

.diy-preview-component.follow-official-account-wrap .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diy-preview-component.follow-official-account-wrap .info-box {
    display: flex;
    flex-direction: column;
    color: #fff;
    justify-content: space-between;
    margin-left: 10px;
    text-align: left;
    width: 200px;
}

.diy-preview-component.follow-official-account-wrap .site-info span {
    display: -webkit-box;
    font-size: 12px;
    overflow: hidden;
    opacity: 0.8;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.diy-preview-component.follow-official-account-wrap .site-info span:nth-child(1) {
    width: 150px;
    font-weight: bold;
    opacity: 1;
    font-size: 14px;
}

.diy-preview-component.follow-official-account-wrap button {
    width: 90px;
    height: 28px;
    line-height: 28px;
    border-radius: 33px;
    font-size: 12px;
    padding: 0;
    border: 1px solid #fff;
    background: #fff;
}

.diy-preview-component.hot-area {
    padding: 0;
    overflow: hidden;
    background: transparent;
}

.diy-preview-component.hot-area .hot-area-warp {
    overflow: hidden;
    position: relative;
}

.diy-preview-component.hot-area .hot-area-item {
    position: relative;
}

.diy-preview-component.hot-area .hot-area-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.diy-preview-component.hot-area .hot-area-preview-error {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #909399;
    font-size: 12px;
}

.diy-preview-component.hot-area .hot-area-item.image-error .hot-area-preview-image,
.diy-preview-component.hot-area .hot-area-item.image-error .hot-area-link {
    display: none;
}

.diy-preview-component.hot-area .hot-area-item.image-error .hot-area-preview-error {
    display: flex;
}

.diy-preview-component.hot-area .hot-area-empty-state {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #909399;
    font-size: 12px;
}

.diy-preview-component.hot-area .hot-area-link {
    position: absolute;
    z-index: 2;
    display: block;
    min-width: 1px;
    min-height: 1px;
    background: transparent;
}

.diy-preview-component.rich-text {
    max-width: 100%;
    padding: 0;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
}

.diy-preview-component.rich-text img {
    max-width: 100% !important;
}

.diy-preview-component.many-goods-list {
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.diy-preview-component.many-goods-list .goods-cate-list {
    display: flex;
    align-items: center;
    padding: 10px 0;
    overflow: hidden;
}

.diy-preview-component.many-goods-list .goods-cate-list .split-line {
    width: 1px;
    height: 15px;
    background-color: #E5E5E5;
    margin-right: calc((100% - 82px * 4) / 6);
    margin-left: calc((100% - 82px * 4) / 6);
}

.diy-preview-component.many-goods-list .goods-cate-list .goods-cate-item {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
}

.diy-preview-component.many-goods-list .goods-cate-list .goods-cate-item p:first-child {
    font-size: 16px;
    color: #303133;
    line-height: 1;
    margin: 0;
}

.diy-preview-component.many-goods-list .goods-cate-list .goods-cate-item p:nth-child(2) {
    font-size: 12px;
    color: #909399;
    margin: 5px 0 0;
    line-height: 18px;
    text-overflow: ellipsis;
    word-break: keep-all;
    max-width: 100%;
    overflow: hidden;
    padding: 0 5px;
}

.diy-preview-component.many-goods-list .goods-cate-list .goods-cate-item.active p:first-child {
    font-weight: 600;
}

.diy-preview-component.many-goods-list .goods-cate-list .goods-cate-item.active p:nth-child(2) {
    color: #FFFFFF;
    border-radius: 10px;
}

.diy-preview-component.promotion-empty {
    min-height: 72px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    color: #999ca7;
    font-size: 12px;
    text-align: center;
}

.diy-preview-component.coupon-data {
    padding: 0;
    background: transparent;
    overflow: hidden;
}

.diy-preview-component.coupon-data .coupon-wrap {
    padding: 10px 0;
    overflow: hidden;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.diy-preview-component.coupon-data .coupon-style-1,
.diy-preview-component.coupon-data .coupon-style-2,
.diy-preview-component.coupon-data .coupon-style-3,
.diy-preview-component.coupon-data .coupon-style-4,
.diy-preview-component.coupon-data .coupon-style-6,
.diy-preview-component.coupon-data .coupon-style-7 {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 8px;
}

.diy-preview-component.coupon-data .coupon-style-5 {
    padding: 0 10px;
}

.diy-preview-component.coupon-data .coupon-item {
    position: relative;
    flex: 0 0 calc(33.33% - 8px);
    min-width: 0;
    height: 72px;
    margin: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: url("/assets/legacy-diy/uniapp/coupon/style1-bg.png") center / 100% 100% no-repeat;
    line-height: 1;
}

.diy-preview-component.coupon-data.coupon-box-2 .coupon-item {
    background-image: url("/assets/legacy-diy/uniapp/coupon/coupon_bg1.png");
}

.diy-preview-component.coupon-data.coupon-box-3 .coupon-item {
    background-image: url("/assets/legacy-diy/uniapp/coupon/coupon_shu.png");
    height: 110px;
    flex-direction: column;
}

.diy-preview-component.coupon-data.coupon-box-4 .coupon-item {
    background-image: url("/assets/legacy-diy/uniapp/coupon/style4_bg.png");
}

.diy-preview-component.coupon-data.coupon-box-5 .coupon-item {
    flex: 1 1 100%;
    height: 82px;
    margin: 0 0 8px;
    justify-content: flex-start;
    background-image: url("/assets/legacy-diy/uniapp/coupon/style5_bg.png");
}

.diy-preview-component.coupon-data.coupon-box-6 .coupon-item {
    background-image: url("/assets/legacy-diy/uniapp/coupon/style6-bg-1.png");
    flex: 0 0 104px;
    height: 135px;
    flex-direction: column;
    justify-content: center;
}

.diy-preview-component.coupon-data.coupon-box-7 .coupon-item {
    background-image: url("/assets/legacy-diy/uniapp/coupon/style7_bg.png");
    flex: 0 0 304px;
    height: 80px;
    justify-content: flex-start;
}

.diy-preview-component.coupon-data.coupon-box-6 .coupon-info {
    padding-top: 20px;
}

.diy-preview-component.coupon-data.coupon-box-6 .coupon-get {
    position: absolute;
    top: 10px;
    right: 0;
    margin: 0;
}

.diy-preview-component.coupon-data.coupon-box-7 .coupon-info {
    flex: 1;
    display: grid;
    grid-template-columns: 38% 62%;
    align-items: center;
}

.diy-preview-component.coupon-data.coupon-box-7 .coupon-num {
    grid-row: 1 / 3;
}

.diy-preview-component.coupon-data .coupon-validity {
    overflow: hidden;
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.coupon-data .coupon-info {
    flex: 1;
    min-width: 0;
    padding: 0 6px;
    text-align: center;
}

.diy-preview-component.coupon-data.coupon-box-5 .coupon-info {
    text-align: left;
    padding-left: 20px;
}

.diy-preview-component.coupon-data .coupon-num {
    display: flex;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
}

.diy-preview-component.coupon-data.coupon-box-5 .coupon-num {
    justify-content: flex-start;
}

.diy-preview-component.coupon-data .coupon-sign {
    font-size: 12px;
}

.diy-preview-component.coupon-data .coupon-size {
    font-size: 24px;
    font-weight: 700;
}

.diy-preview-component.coupon-data .coupon-type,
.diy-preview-component.coupon-data .coupon-name {
    margin-top: 6px;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component.coupon-data .coupon-get {
    flex: none;
    min-width: 42px;
    height: 22px;
    margin-right: 6px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
}

.diy-preview-component.diy-seckill,
.diy-preview-component.diy-pintuan,
.diy-preview-component.diy-bargain,
.diy-preview-component.diy-groupbuy,
.diy-preview-component.diy-pinfan,
.diy-preview-component.diy-presale {
    padding: 0;
    overflow: hidden;
    background: transparent;
}

.diy-preview-component .diy-seckill,
.diy-preview-component .diy-pintuan,
.diy-preview-component .diy-bargain,
.diy-preview-component .diy-groupbuy,
.diy-preview-component .diy-pinfan,
.diy-preview-component .diy-presale {
    overflow: hidden;
}

.diy-preview-component .seckill-head,
.diy-preview-component .pintuan-head,
.diy-preview-component .bargain-head {
    height: 46px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-size: 100% 100%;
    box-sizing: border-box;
    color: #fff;
}

.diy-preview-component .seckill-head .left-text,
.diy-preview-component .pintuan-head .left-text,
.diy-preview-component .bargain-head .left-text {
    flex: none;
    max-width: 96px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component .seckill-head .title-img,
.diy-preview-component .pintuan-head .title-img,
.diy-preview-component .bargain-head .title-img {
    flex: none;
    max-width: 92px;
    max-height: 24px;
    object-fit: contain;
}

.diy-preview-component .seckill-head .time {
    display: flex;
    align-items: center;
    margin-left: 8px;
    font-size: 12px;
}

.diy-preview-component .seckill-head .number {
    min-width: 18px;
    height: 18px;
    margin: 0 2px;
    border-radius: 2px;
    background: #fff;
    color: #fd3b54;
    line-height: 18px;
    text-align: center;
}

.diy-preview-component .seckill-head .symbol {
    color: #fff;
}

.diy-preview-component .head-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diy-preview-component .head-content .avatar {
    width: 18px;
    height: 18px;
    margin-left: -5px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    object-fit: cover;
}

.diy-preview-component .head-content .avatar:first-child {
    margin-left: 0;
}

.diy-preview-component .head-content em {
    margin-left: 6px;
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
}

.diy-preview-component .head-content-empty em {
    margin-left: 0;
    opacity: .88;
}

.diy-preview-component .head-right {
    flex: none;
    display: flex;
    align-items: center;
    font-size: 12px;
}

.diy-preview-component .head-right .iconfont {
    font-size: 12px;
}

.diy-preview-component .content-wrap {
    padding: 10px;
}

.diy-preview-component .row1-of1 .content-wrap .item {
    display: flex;
    margin-bottom: 10px;
    padding: 8px;
    overflow: hidden;
    background: #fff;
}

.diy-preview-component .row1-of1 .content-wrap .item:last-child {
    margin-bottom: 0;
}

.diy-preview-component .horizontal-slide .content-wrap {
    display: flex;
    overflow: hidden;
}

.diy-preview-component .horizontal-slide .content-wrap .item {
    flex: 0 0 105px;
    margin-right: 10px;
    overflow: hidden;
    background: #fff;
}

.diy-preview-component .content-wrap .img-wrap {
    position: relative;
    flex: none;
    width: 108px;
    height: 108px;
    overflow: hidden;
    background: #f3f5f8;
}

.diy-preview-component .content-wrap .groupbuy-sale {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30px;
    padding: 10px 8px 0;
    background: linear-gradient(180deg, transparent, rgba(255, 23, 69, .9));
    color: #fff;
    font-size: 10px;
    line-height: 20px;
    box-sizing: border-box;
}

.diy-preview-component .horizontal-slide .content-wrap .img-wrap {
    width: 105px;
    height: 105px;
}

.diy-preview-component .content-wrap .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diy-preview-component .content-wrap .content {
    flex: 1;
    min-width: 0;
    padding: 2px 0 2px 10px;
    display: flex;
    flex-direction: column;
}

.diy-preview-component .horizontal-slide .content-wrap .content {
    padding: 7px;
}

.diy-preview-component .content-wrap .goods-name {
    color: #303133;
    font-size: 14px;
    line-height: 18px;
}

.diy-preview-component .content-wrap .tag-wrap {
    display: flex;
    align-items: center;
    margin-top: 6px;
    gap: 5px;
    color: #ff1544;
    font-size: 12px;
}

.diy-preview-component .content-wrap .group-tag {
    height: 18px;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: 9px;
    line-height: 17px;
}

.diy-preview-component .content-wrap .pinfan-tags {
    gap: 0;
}

.diy-preview-component .content-wrap .pinfan-tags .group-tag {
    border: 0;
    border-radius: 2px;
}

.diy-preview-component .content-wrap .pinfan-reward {
    padding: 1px 4px;
    border: 1px solid currentColor;
    border-radius: 2px;
    line-height: 14px;
}

.diy-preview-component .content-wrap .progress {
    display: flex;
    align-items: center;
    margin-top: 8px;
    color: #999ca7;
    font-size: 12px;
}

.diy-preview-component .content-wrap .progress .bg {
    width: 80px;
    height: 8px;
    margin-right: 6px;
    overflow: hidden;
    border-radius: 8px;
    background: #fcecd7;
}

.diy-preview-component .content-wrap .progress .bg i {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: #fdbe6c;
}

.diy-preview-component .content-wrap .progress em {
    color: #ff1544;
    font-style: normal;
}

.diy-preview-component .content-wrap .bottom-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
}

.diy-preview-component .content-wrap .price-wrap {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    color: #ff1745;
    line-height: 1;
}

.diy-preview-component .content-wrap .price {
    font-size: 18px;
    font-weight: 700;
}

.diy-preview-component .content-wrap .unit {
    font-size: 12px;
}

.diy-preview-component .content-wrap .original-price {
    width: 100%;
    margin-top: 5px;
    color: #999ca7;
    font-size: 12px;
    text-decoration: line-through;
}

.diy-preview-component .content-wrap button {
    flex: none;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(to right, #ff7b1d, #ff1544);
    color: #fff;
    font-size: 12px;
    line-height: 26px;
}

.diy-preview-component .diy-pinfan.row1-of1 .content-wrap button {
    min-width: 72px;
    height: 42px;
    padding: 3px 8px;
    line-height: 17px;
}

.diy-preview-component .diy-pinfan.row1-of1 .content-wrap button span,
.diy-preview-component .diy-pinfan.row1-of1 .content-wrap button small {
    display: block;
    font-size: 12px;
}

.diy-preview-component.store-show-data {
    padding: 0;
    background: transparent;
}

.component-store-show-info .preview-box {
    min-height: 50px;
}

.component-store-show-info .style-one,
.component-store-show-info .style-three {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.component-store-show-info .style-one .info-item {
    flex: 1;
    min-width: 0;
}

.component-store-show-info .style-one .store-name {
    margin-right: 10px;
    font-size: 16px;
}

.component-store-show-info .style-one .change {
    font-size: 12px;
}

.component-store-show-info .style-one p {
    margin: 10px 0 0;
    font-size: 12px;
}

.component-store-show-info .style-one .img-wrap,
.component-store-show-info .style-three .img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;
}

.component-store-show-info .style-one .img-wrap img,
.component-store-show-info .style-three .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.component-store-show-info .store-preview-image em {
    display: none;
    padding: 3px;
    color: #d84a3a;
    font-size: 8px;
    font-style: normal;
    line-height: 1.15;
    text-align: center;
}

.component-store-show-info .store-preview-image.image-error img,
.component-store-show-info .store-preview-image.image-empty img {
    display: none;
}

.component-store-show-info .store-preview-image.image-error em,
.component-store-show-info .store-preview-image.image-empty em {
    display: block;
}

.component-store-show-info .store-show-preview-empty {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999ca7;
    font-size: 12px;
}

.component-store-show-info .style-three .info-item {
    display: flex;
    align-items: center;
    min-width: 0;
}

.component-store-show-info .style-three .store-name {
    margin-right: 15px;
    margin-left: 8px;
    font-size: 16px;
}

.component-store-show-info .style-three .change {
    font-size: 12px;
}

.component-store-show-info .style-three .icon-wrap {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: space-between;
    width: 20px;
    height: 20px;
}

.component-store-show-info .style-three .icon-wrap img {
    max-width: 100%;
    max-height: 100%;
}

.component-store-show-info .style-three .icon-wrap i {
    color: #303133;
    font-size: 18px;
}

.component-store-show-info .style-four {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.component-store-show-info .style-four .store-left-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    line-height: 34px;
}

.component-store-show-info .style-four .store-left-wrap .iconweizhi {
    margin-right: 3px;
    font-size: 14px;
}

.component-store-show-info .style-four .store-left-wrap .iconyoujiantou {
    margin-left: 3px;
    font-size: 14px;
}

.component-store-show-info .style-four .store-name {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.component-store-show-info .style-four .store-right-search {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 235px;
    height: 35px;
    padding: 0 15px;
    border-radius: 18px;
    background-color: #fff;
    color: #909399;
    font-size: 12px;
    line-height: 35px;
    box-sizing: border-box;
}

.component-store-show-info .style-four .store-right-search .iconsousuo2 {
    position: absolute;
    right: 15px;
    height: 12px;
    color: #909399;
    font-size: 13px;
}

.diy-preview-component.store-label-data {
    padding: 0;
    background: #fff;
}

.component-store-label .preview-box ul {
    display: flex;
    align-content: center;
    margin: 0;
    padding: 10px 0;
    overflow: hidden;
    list-style: none;
}

.component-store-label .preview-box ul.between {
    justify-content: space-between;
}

.component-store-label .preview-box ul li {
    display: flex;
    align-content: center;
    flex-shrink: 0;
    margin-right: 10px;
    word-break: keep-all;
}

.component-store-label .preview-box ul li:last-of-type {
    margin-right: 0;
}

.component-store-label .preview-box ul li .icon-box {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    font-size: 20px;
    line-height: 20px;
}

.store-label-empty {
    height: 42px;
    color: #909399;
    font-size: 12px;
    line-height: 42px;
    text-align: center;
}

.standalone .h5-shell {
    min-height: calc(100vh + 64px);
    margin: -32px;
    padding: 24px 12px;
    background: #edf1f7;
    color: #303133;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    box-sizing: border-box;
}

.h5-shell a {
    color: inherit;
    text-decoration: none;
}

.h5-phone {
    width: min(var(--old-diy-phone-width), calc(100vw - 24px));
    min-height: 667px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #dfe6f2;
    border-radius: 18px;
    background: #f5f7fb;
    box-shadow: 0 10px 28px rgba(15, 35, 75, .12);
}

.h5-status {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    color: #1f2d3d;
    font-size: 13px;
    box-sizing: border-box;
}

.h5-status strong {
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-status a {
    color: #303133;
    font-size: 26px;
    line-height: 1;
}

.h5-status span:last-child {
    text-align: right;
}

.h5-store-bar {
    display: grid;
    grid-template-columns: minmax(80px, auto) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid #f1f3f7;
    border-bottom: 1px solid #edf0f5;
    font-size: 12px;
}

.h5-store-name {
    color: var(--base-color, #0b63f6);
    font-weight: 700;
}

.h5-store-bar span {
    overflow: hidden;
    color: #7b8794;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-empty-panel {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 220px;
    margin: 12px;
    padding: 24px;
    border: 1px solid #e4e9f2;
    border-radius: 8px;
    background: #fff;
    color: #8b95a5;
    text-align: center;
}

.h5-empty-panel strong {
    color: #303133;
    font-size: 16px;
}

.h5-empty-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 18px;
    border-radius: 17px;
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-diy-page {
    padding-bottom: 64px;
    container-type: inline-size;
}

.h5-diy-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    margin: 10px 14px;
    padding: 0 16px;
    border-radius: 21px;
    background: #fff;
    color: #909399;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(31, 45, 61, .04);
}

.h5-diy-search i {
    color: #1f2d3d;
    font-style: normal;
    font-size: 22px;
}

.h5-image-ads {
    display: grid;
    gap: 10px;
    margin: 10px 12px;
}

.h5-image-ads a,
.h5-rubik a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: #eef2f7;
}

.h5-image-ads img,
.h5-rubik img {
    display: block;
    width: 100%;
    height: auto;
}

.h5-graphic-nav,
.h5-quick-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 4px;
    margin: 10px 12px;
    padding: 14px 8px;
    border-radius: 10px;
    background: #fff;
}

.h5-graphic-nav a,
.h5-quick-nav a {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
}

.h5-graphic-nav span,
.h5-quick-nav span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7b1d, #ff1544);
    color: #fff;
}

.h5-quick-nav span {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.h5-graphic-nav img,
.h5-quick-nav img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-graphic-nav em,
.h5-quick-nav em {
    max-width: 100%;
    overflow: hidden;
    color: #303133;
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-rubik {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 12px;
}

.h5-rubik-row1-of4,
.h5-rubik-row1-of3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.h5-diy-section,
.h5-text-title,
.h5-rich-text,
.h5-store-card {
    margin: 10px 12px;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
}

.h5-diy-section h2,
.h5-text-title h2,
.h5-detail-card h2 {
    margin: 0 0 12px;
    color: #1f2d3d;
    font-size: 16px;
}

.h5-diy-section h2 small {
    margin-left: 6px;
    color: #8b95a5;
    font-size: 12px;
    font-weight: 400;
}

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

.h5-product-tile,
.h5-product-row {
    position: relative;
    min-width: 0;
    border-radius: 8px;
    background: #fff;
}

.h5-product-tile {
    overflow: hidden;
    border: 1px solid #edf0f5;
}

.h5-product-img,
.h5-product-row-img {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #eef5ff;
    color: #9aa8ba;
}

.h5-product-img {
    height: 128px;
}

.h5-product-img img,
.h5-product-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-product-tile strong,
.h5-product-tile small,
.h5-product-tile em {
    display: block;
    margin: 0 8px;
}

.h5-product-tile strong {
    overflow: hidden;
    margin-top: 8px;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-product-tile em {
    margin-top: 6px;
    color: #ff1745;
    font-style: normal;
    font-weight: 700;
}

.h5-product-tile small {
    margin-top: 4px;
    margin-bottom: 10px;
    color: #8b95a5;
    font-size: 12px;
}

.h5-diy-empty {
    display: grid;
    place-items: center;
    min-height: 80px;
    color: #909399;
    font-size: 13px;
}

.h5-bottom-nav {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 2px;
    min-height: 54px;
    padding: 5px 4px 4px;
    border-top: 1px solid #edf0f5;
    background: #fff;
}

.h5-bottom-nav a {
    display: grid;
    justify-items: center;
    gap: 2px;
    color: #303133;
    font-size: 11px;
}

.h5-bottom-nav i {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #ff4d4d;
    font-style: normal;
}

.h5-bottom-nav img {
    max-width: 20px;
    max-height: 20px;
}

.h5-list-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
}

.h5-list-search input {
    width: 100%;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    outline: none;
    box-sizing: border-box;
}

.h5-list-search button {
    height: 36px;
    border: 0;
    border-radius: 18px;
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-list-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    border-top: 1px solid #f1f3f7;
    border-bottom: 1px solid #edf0f5;
    background: #fff;
}

.h5-list-sort {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
}

.h5-list-sort a,
.h5-list-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    color: #303133;
    font-size: 14px;
    font-weight: 600;
}

.h5-list-sort a.active {
    color: var(--base-color, #0b63f6);
}

.h5-list-sort i {
    margin-left: 3px;
    color: inherit;
    font-size: 12px;
    font-style: normal;
    line-height: 1;
}

.h5-list-mode {
    border-left: 1px solid #edf0f5;
    color: #7b8794;
    font-size: 20px;
    text-decoration: none;
}

.h5-list-screen {
    background: #fff;
    border-bottom: 1px solid #edf0f5;
}

.h5-list-screen summary {
    height: 0;
    overflow: hidden;
    list-style: none;
}

.h5-list-screen summary::-webkit-details-marker {
    display: none;
}

.h5-list-screen form {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: #fff;
}

.h5-list-screen label {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    color: #303133;
    font-size: 13px;
}

.h5-list-screen label:first-of-type {
    grid-template-columns: 72px minmax(0, 1fr) 10px minmax(0, 1fr);
}

.h5-list-screen label span {
    color: #606b7b;
}

.h5-list-screen input,
.h5-list-screen select {
    width: 100%;
    height: 34px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid #d8e1ef;
    border-radius: 4px;
    background: #fff;
    color: #303133;
    box-sizing: border-box;
}

.h5-list-screen i {
    color: #8b95a5;
    font-style: normal;
    text-align: center;
}

.h5-list-screen form > div {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.h5-list-screen form > div a,
.h5-list-screen form > div button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 34px;
    border: 1px solid #d8e1ef;
    border-radius: 17px;
    background: #fff;
    color: #303133;
    font-size: 13px;
}

.h5-list-screen form > div button {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-category-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
    background: #fff;
}

.h5-category-tabs a {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    background: #f1f4f9;
    color: #606b7b;
    font-size: 13px;
    line-height: 30px;
}

.h5-category-tabs a.active {
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-product-list {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.h5-product-list.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.h5-product-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
    border: 1px solid #edf0f5;
}

.h5-product-list.grid .h5-product-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
    overflow: hidden;
}

.h5-product-row-img {
    width: 96px;
    height: 96px;
    border-radius: 8px;
}

.h5-product-list.grid .h5-product-row-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 0;
}

.h5-product-row-info {
    position: relative;
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding-right: 54px;
}

.h5-product-list.grid .h5-product-row-info {
    min-height: 122px;
    padding: 0 10px 38px;
}

.h5-product-row-info strong,
.h5-product-row-info small,
.h5-product-row-info em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-product-row-info strong {
    color: #1f2d3d;
    font-size: 15px;
}

.h5-product-row-info strong.multiple {
    display: -webkit-box;
    min-height: 40px;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.h5-product-row-info small,
.h5-product-row-info em,
.h5-product-row-info i {
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-product-row-info span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.h5-product-row-info b {
    color: #ff1745;
    font-size: 16px;
}

.h5-product-row-info del {
    color: #a8b0bd;
    font-size: 12px;
}

.h5-product-list.grid .h5-product-row-info span {
    display: grid;
    justify-content: start;
    gap: 2px;
}

.h5-product-row-info .h5-list-buy {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 42px;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    font-style: normal;
    line-height: 24px;
    text-align: center;
}

.h5-product-list.grid .h5-product-row-info .h5-list-buy {
    right: 10px;
    bottom: 10px;
}

/* H5 goods list: legacy uniapp search/sort/drawer layout. */
.h5-list-phone {
    background: #f6f7f9;
    padding-bottom: 14px;
}

.h5-list-head-wrap {
    position: sticky;
    top: 44px;
    z-index: 12;
    background: #fff;
}

.h5-list-phone .h5-list-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 15px 5px;
    background: #fff;
}

.h5-list-phone .h5-list-search label {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    border-radius: 35px;
    background: #f5f6f8;
}

.h5-list-phone .h5-list-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 10px 0 18px;
    border: 0;
    border-radius: 35px;
    background: transparent;
    color: #303133;
    font-size: 13px;
}

.h5-list-phone .h5-list-search input[type="search"]::placeholder {
    color: #8b95a5;
}

.h5-list-phone .h5-list-search label button {
    flex: 0 0 42px;
    width: 42px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0 35px 35px 0;
    background: transparent;
    color: #8b95a5;
    font-size: 19px;
    line-height: 32px;
}

.h5-list-phone .h5-list-mode {
    flex: 0 0 30px;
    width: 30px;
    height: 32px;
    border: 0;
    color: #606266;
    font-size: 22px;
    line-height: 32px;
}

.h5-list-phone .h5-list-sort {
    display: flex;
    min-width: 0;
    height: 40px;
    padding: 5px 10px 5px 0;
    border: 0;
    background: #fff;
}

.h5-list-phone .h5-list-sort a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 30px;
    color: #303133;
    font-size: 14px;
    font-weight: 700;
}

.h5-list-phone .h5-list-sort a.active {
    color: var(--base-color, #0b63f6);
}

.h5-list-phone .h5-list-sort a > span:not(.h5-list-price-arrows) {
    margin-left: 4px;
    color: #8b95a5;
    font-size: 14px;
}

.h5-list-price-arrows {
    display: inline-flex;
    flex-direction: column;
    width: 16px;
    margin-left: 4px;
    color: #909399;
    line-height: 1;
}

.h5-list-price-arrows i {
    height: 9px;
    margin: 0;
    font-size: 13px;
    line-height: 9px;
}

.h5-list-price-arrows i.active {
    color: var(--base-color, #0b63f6);
}

.h5-list-screen-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.h5-list-screen-drawer:target {
    opacity: 1;
    pointer-events: auto;
}

.h5-list-drawer-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.h5-list-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(84vw, 360px);
    max-width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: -6px 0 16px rgba(15, 23, 42, 0.12);
    transform: translateX(100%);
    transition: transform 0.18s ease;
}

.h5-list-screen-drawer:target .h5-list-drawer-panel {
    transform: translateX(0);
}

.h5-list-drawer-panel h2 {
    margin: 0;
    padding: 15px;
    background: #f6f4f5;
    color: #7a8599;
    font-size: 14px;
    font-weight: 400;
}

.h5-list-drawer-panel form {
    height: calc(100% - 48px);
    overflow-y: auto;
    padding-bottom: 78px;
    box-sizing: border-box;
}

.h5-list-drawer-panel section {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.h5-list-drawer-panel h3 {
    margin: 0;
    padding: 15px;
    color: #303133;
    font-size: 14px;
    font-weight: 400;
}

.h5-list-price-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 15px 12px;
}

.h5-list-price-filter input {
    width: 100%;
    height: 28px;
    border: 0;
    border-radius: 25px;
    background: #f5f5f5;
    color: #303133;
    font-size: 12px;
    text-align: center;
    outline: 0;
}

.h5-list-price-filter i {
    display: block;
    width: 18px;
    height: 1px;
    background: #8b95a5;
}

.h5-list-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 0 15px 12px;
}

.h5-list-chip {
    display: inline-flex;
    max-width: calc(33.333% - 7px);
}

.h5-list-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.h5-list-chip span {
    display: block;
    min-width: 72px;
    max-width: 100%;
    height: 30px;
    padding: 0 8px;
    overflow: hidden;
    border-radius: 3px;
    background: #f5f5f5;
    color: #303133;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-list-chip input:checked + span {
    color: var(--base-color, #0b63f6);
}

.h5-list-drawer-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 10px 0 14px;
    background: #fff;
}

.h5-list-drawer-footer a,
.h5-list-drawer-footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 36px;
    margin: 0;
    border: 1px solid #d8dee9;
    background: #fff;
    color: #303133;
    font-size: 14px;
}

.h5-list-drawer-footer a {
    border-radius: 18px 0 0 18px;
}

.h5-list-drawer-footer button {
    border-color: var(--base-color, #0b63f6);
    border-radius: 0 18px 18px 0;
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-list-phone .h5-category-tabs,
.h5-list-phone .h5-store-bar {
    display: none;
}

.h5-list-phone .h5-product-list.single-column {
    display: block;
    padding: 10px 12px 16px;
}

.h5-list-phone .h5-product-list.double-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 12px 16px;
}

.h5-list-phone .h5-product-row {
    position: relative;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: #303133;
    text-decoration: none;
    box-sizing: border-box;
}

.h5-list-phone .h5-product-list.single-column .h5-product-row {
    display: flex;
    gap: 10px;
    min-height: 126px;
    margin-bottom: 10px;
    padding: 13px;
}

.h5-list-phone .h5-product-list.double-column .h5-product-row {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    overflow: hidden;
}

.h5-list-phone .h5-product-row-img {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background: #f3f6fb;
    color: #aab2bf;
    font-size: 12px;
}

.h5-list-phone .h5-product-list.double-column .h5-product-row-img {
    flex-basis: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px 6px 0 0;
}

.h5-list-phone .h5-product-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-list-phone .h5-product-row-img em {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 17px;
    font-style: normal;
}

.h5-list-phone .h5-product-row-info {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 0 54px 0 0;
}

.h5-list-phone .h5-product-list.double-column .h5-product-row-info {
    min-height: 116px;
    padding: 8px 10px 38px;
}

.h5-list-phone .h5-product-row-info strong {
    display: block;
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-list-phone .h5-product-row-info strong.multiple {
    display: -webkit-box;
    min-height: 36px;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.h5-list-phone .h5-product-row-info small,
.h5-list-phone .h5-product-row-info em,
.h5-list-phone .h5-product-row-info i {
    overflow: hidden;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-product-price-line,
.h5-product-meta-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.h5-product-price-line b {
    color: #ff1745;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.h5-product-price-line b i {
    margin-right: 1px;
    color: inherit;
    font-size: 12px;
    font-style: normal;
}

.h5-product-vip-tag,
.h5-product-promotion-tag {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 5px;
    border-radius: 2px;
    background: #202020;
    color: #fff !important;
    font-size: 11px !important;
}

.h5-product-promotion-tag {
    align-self: flex-start;
    background: #ff1745;
}

.h5-product-meta-line del {
    color: #a8b0bd;
    font-size: 12px;
}

.h5-list-phone .h5-product-row-info .h5-list-buy {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 42px;
    height: 24px;
    padding: 0 8px;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    line-height: 24px;
    text-align: center;
}

.h5-list-phone .h5-product-list.double-column .h5-product-row-info .h5-list-buy {
    right: 10px;
    bottom: 10px;
}

.h5-search-page {
    min-height: 100vh;
    background: #fff;
}

.h5-search-top {
    padding: 15px 15px 10px;
    background: #fff;
    box-sizing: border-box;
}

.h5-search-form {
    margin: 0;
}

.h5-search-form label {
    display: flex;
    align-items: center;
    height: 34px;
    border-radius: 18px;
    background: #f5f6f8;
}

.h5-search-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px 0 14px;
    border: 0;
    border-radius: 18px;
    outline: 0;
    background: transparent;
    color: #303133;
    font-size: 14px;
}

.h5-search-form input[type="search"]::placeholder {
    color: #8b95a5;
}

.h5-search-form button {
    flex: 0 0 42px;
    width: 42px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 0 18px 18px 0;
    background: transparent;
    color: #303133;
    font-size: 20px;
    line-height: 34px;
}

.h5-search-content {
    padding: 4px 15px 20px;
}

.h5-search-history {
    margin-top: 16px;
}

.h5-search-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.h5-search-section-title strong {
    color: #303133;
    font-size: 15px;
    font-weight: 600;
}

.h5-search-section-title button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #8b95a5;
    font-size: 13px;
}

.h5-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h5-search-tags a {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 30px;
    padding: 0 13px;
    overflow: hidden;
    border-radius: 16px;
    background: #f6f6f6;
    color: #303133;
    font-size: 13px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-select-list {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.h5-store-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
}

.h5-store-search input,
.h5-store-search button,
.h5-store-tools button,
.h5-store-tools a {
    height: 34px;
    border: 1px solid #d8e1ef;
    border-radius: 17px;
    background: #fff;
    font-size: 13px;
}

.h5-store-search input {
    min-width: 0;
    padding: 0 14px;
    color: #303133;
}

.h5-store-search button,
.h5-store-tools button {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-store-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 0;
    color: #7b8794;
    font-size: 12px;
}

.h5-store-tools button,
.h5-store-tools a {
    flex: 0 0 auto;
    padding: 0 12px;
}

.h5-store-tools a {
    display: inline-flex;
    align-items: center;
    color: var(--base-color, #0b63f6);
}

.h5-store-tools span {
    min-width: 0;
    line-height: 1.45;
}

.h5-store-select {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
}

.h5-store-cover {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 8px;
    background: #eef5ff;
    color: #8b95a5;
}

.h5-store-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-store-info {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.h5-store-info strong,
.h5-store-info em,
.h5-store-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-info strong {
    color: #1f2d3d;
    font-size: 15px;
}

.h5-store-info strong i {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 9px;
    background: #eaf2ff;
    color: var(--base-color, #0b63f6);
    font-size: 11px;
    font-style: normal;
}

.h5-store-info em,
.h5-store-info small {
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-store-info span {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.h5-store-info span b {
    padding: 1px 6px;
    border-radius: 10px;
    background: #f1f5fb;
    color: #606b7b;
    font-size: 11px;
    font-weight: 400;
}

.h5-store-select > .detail {
    color: var(--base-color, #0b63f6);
    font-size: 13px;
    text-align: right;
}

.h5-store-detail-phone {
    background: #f5f6fa;
}

.h5-store-detail {
    padding-bottom: 18px;
}

.h5-store-hero {
    position: relative;
    display: grid;
    place-items: center;
    height: 210px;
    overflow: hidden;
    background: #fff;
    color: #9aa8ba;
}

.h5-store-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(180deg, rgba(245, 246, 250, 0), #f5f6fa);
}

.h5-store-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-store-hero span {
    position: absolute;
    right: 16px;
    bottom: 28px;
    z-index: 2;
    min-width: 42px;
    padding: 3px 10px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.h5-store-detail-card,
.h5-store-map-card {
    position: relative;
    z-index: 3;
    margin: -18px 12px 12px;
    padding: 0 12px;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(31, 45, 61, .06);
}

.h5-store-map-card {
    margin-top: 12px;
    padding: 14px 12px;
    box-shadow: none;
}

.h5-store-detail-title,
.h5-store-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    border-bottom: 1px solid #eef1f6;
}

.h5-store-detail-title strong {
    min-width: 0;
    color: #1f2d3d;
    font-size: 17px;
    font-weight: 700;
}

.h5-store-detail-title em {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 11px;
    background: #eaf7f0;
    color: #16a05d;
    font-size: 12px;
    font-style: normal;
}

.h5-store-detail-title em.warning {
    background: #fff3e4;
    color: #e67e22;
}

.h5-store-close-reason {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #eef1f6;
    color: #e67e22;
    font-size: 12px;
    line-height: 1.5;
}

.h5-store-detail-row.block {
    display: grid;
    justify-content: stretch;
    gap: 8px;
    padding: 12px 0;
}

.h5-store-detail-row > span {
    min-width: 0;
    color: #606b7b;
    font-size: 13px;
    line-height: 1.55;
}

.h5-store-detail-row b {
    display: block;
    margin-bottom: 3px;
    color: #1f2d3d;
    font-weight: 600;
}

.h5-store-detail-row small {
    display: block;
    margin-top: 3px;
    color: #8b95a5;
    font-size: 12px;
}

.h5-store-detail-row > a {
    flex: 0 0 auto;
    color: var(--base-color, #0b63f6);
    font-size: 13px;
}

.h5-store-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.h5-store-tags i {
    padding: 2px 7px;
    border-radius: 11px;
    background: #f1f5fb;
    color: #606b7b;
    font-size: 12px;
    font-style: normal;
}

.h5-store-map-card > strong {
    display: block;
    margin-bottom: 10px;
    color: #1f2d3d;
    font-size: 15px;
}

.h5-store-map-box {
    display: grid;
    place-items: center;
    min-height: 150px;
    border-radius: 8px;
    border: 1px solid #d8e1ef;
    background: #f7f9fd;
    color: #7b8794;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    padding: 14px;
}

.h5-store-map-box [data-h5-store-map] {
    width: 100%;
}

.h5-store-map-box [data-h5-store-map].is-map-ready {
    display: block;
    width: 100%;
    height: 180px;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.h5-store-detail-actions {
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -4px 16px rgba(31, 45, 61, .07);
}

.h5-store-detail-actions a {
    display: grid;
    place-items: center;
    height: 40px;
    border: 1px solid #d8e1ef;
    border-radius: 20px;
    background: #fff;
    color: #303133;
    font-size: 14px;
}

.h5-store-detail-actions a.primary {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-store-phone {
    background: #f5f6fa;
}

.h5-store-current {
    margin-bottom: 10px;
    padding: 10px 12px 0;
    background: #fff;
}

.h5-store-current-title {
    color: #636363;
    font-size: 12px;
}

.h5-store-current-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 15px;
}

.h5-store-current-main span {
    min-width: 0;
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-current-main button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #df5948;
    font-size: 12px;
}

.h5-store-current-main button .iconfont {
    font-size: 14px;
}

.h5-store-list-box {
    padding: 0 12px 12px;
    background: #fff;
}

.h5-store-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 0 5px;
}

.h5-store-list-title {
    flex: 0 0 auto;
    color: #666;
    font-size: 14px;
}

.h5-store-list-head .h5-store-search {
    display: flex;
    flex: 0 0 132px;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 13px;
    border-radius: 17px;
    background: #f0f1f3;
    box-sizing: border-box;
}

.h5-store-list-head .h5-store-search input,
.h5-store-list-head .h5-store-search button {
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #666;
    font-size: 12px;
}

.h5-store-list-head .h5-store-search input {
    min-width: 0;
    padding: 0;
}

.h5-store-list-head .h5-store-search input::placeholder {
    color: #b3b4b9;
}

.h5-store-list-head .h5-store-search button {
    flex: 0 0 auto;
    padding: 0;
    color: #b3b4b9;
    font-size: 17px;
    line-height: 1;
}

.h5-store-map-tip {
    margin: 2px 0 10px;
    color: #999ca7;
    font-size: 12px;
    line-height: 1.45;
}

.h5-store-select-list {
    display: block;
    padding: 0;
}

.h5-store-select {
    display: block;
    margin: 10px 3px 15px;
    padding: 13px 14px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 5px rgba(128, 132, 148, .3);
}

.h5-store-select-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: inherit;
}

.h5-store-state {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 3px 5px;
    border: 1px solid #66ad95;
    border-radius: 2px;
    color: #66ad95;
    font-size: 12px;
    line-height: 1;
}

.h5-store-state.warning {
    border-color: #ff0000;
    color: #ff0000;
}

.h5-store-select-main strong {
    max-width: 100%;
    margin: 12px 0 5px;
    overflow: hidden;
    color: #303133;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-close-desc {
    color: #ff0000;
    font-size: 12px;
    font-style: normal;
}

.h5-store-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    color: #5f6067;
    font-size: 12px;
}

.h5-store-time-row small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: inherit;
    font-size: 12px;
}

.h5-store-time-row .icondiy {
    color: #81838a;
    font-size: 13px;
}

.h5-store-address {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 3px;
    color: #5f6067;
    font-size: 12px;
    line-height: 1.3;
}

.h5-store-address .iconfont {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1.3;
}

.h5-store-other {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
}

.h5-store-other > a {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    color: #df5948;
    font-size: 12px;
}

.h5-store-other > a .iconfont {
    font-size: 12px;
}

.h5-store-other .h5-store-tags {
    min-width: 0;
}

.h5-store-other .h5-store-tags i {
    margin: 0 8px 4px 0;
    padding: 4px 6px;
    border-radius: 2px;
    background: #f3f9ed;
    color: #77ab69;
    font-size: 12px;
}

.h5-store-detail-card .h5-store-tags i {
    background: #f4f5fa;
    color: #6f7dad;
}

.h5-store-open-date {
    color: #606b7b;
    font-size: 12px;
}

.h5-store-detail-row.address-wrap b {
    color: #606b7b;
    font-weight: 400;
}

.h5-store-detail-row.telphone-wrap span {
    color: var(--base-color, #0b63f6);
    font-size: 15px;
    font-weight: 700;
}

.h5-goods-detail-shell {
    background: #f6f6f6;
}

.h5-goods-detail-phone {
    min-height: 100vh;
    padding-bottom: 58px;
    background: #f6f6f6;
}

.h5-goods-status {
    background: rgba(255, 255, 255, 0.96);
}

.h5-goods-media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 430px;
    overflow: hidden;
    background: #fff;
    color: #999;
}

.h5-goods-media::before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 35px;
    background-image: linear-gradient(transparent 35%, #f6f6f6);
    content: "";
    pointer-events: none;
}

.h5-goods-media img,
.h5-goods-media video {
    width: 100%;
    height: 430px;
    object-fit: contain;
    background: #fff;
}

.h5-goods-media-count {
    position: absolute;
    right: 18px;
    bottom: 24px;
    z-index: 2;
    min-width: 40px;
    height: 22px;
    padding: 0 8px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.36);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    line-height: 22px;
    text-align: center;
}

.h5-goods-price-card,
.h5-goods-entry-card,
.h5-goods-card {
    margin: 0 12px 10px;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}

.h5-goods-price-card {
    position: relative;
    z-index: 2;
    margin-top: -30px;
    padding: 10px 15px;
}

.h5-goods-price-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.h5-goods-price-symbol,
.h5-goods-price-line strong {
    color: #ff1745;
    font-weight: 700;
    line-height: 1;
}

.h5-goods-price-symbol {
    font-size: 15px;
}

.h5-goods-price-line strong {
    font-size: 28px;
}

.h5-goods-price-line del {
    margin-left: 8px;
    color: #999;
    font-size: 13px;
}

.h5-goods-member-price-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 2px;
    background: #fff2e8;
    color: #ff6a00;
    font-size: 11px;
    font-style: normal;
    line-height: 20px;
    vertical-align: middle;
}

.h5-goods-member-price-tag[hidden],
.h5-goods-member-price-popup[hidden] {
    display: none;
}

.h5-goods-price-line del.is-hidden {
    display: none;
}

.h5-goods-discount-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 2px;
    background: #ff1745;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    vertical-align: middle;
}

.h5-goods-share-actions {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}

.h5-goods-share-actions .h5-goods-icon-action {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #606266;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
}

.h5-goods-share-actions .h5-goods-icon-action span {
    display: block;
    height: 16px;
    color: #303133;
    font-size: 18px;
    line-height: 16px;
}

.h5-goods-share-actions .h5-goods-icon-action em {
    margin-top: 3px;
    color: #606266;
    font-size: 11px;
    font-style: normal;
}

.h5-goods-share-actions .h5-goods-icon-action.active span,
.h5-goods-share-actions .h5-goods-icon-action.active em {
    color: #ff1745;
}

.h5-goods-price-card h1 {
    margin: 10px 0 0;
    color: #303133;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

.h5-goods-price-card p {
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.55;
}

.h5-goods-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.h5-goods-tag-list span {
    height: 22px;
    padding: 0 8px;
    border: 1px solid #ffccd6;
    border-radius: 3px;
    background: #fff5f7;
    color: #ff1745;
    font-size: 12px;
    line-height: 22px;
}

.h5-goods-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: #999ca7;
    font-size: 12px;
}

.h5-goods-meta span:last-child {
    text-align: right;
}

.h5-goods-entry-card {
    padding: 0 15px;
}

.h5-goods-entry-row {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 16px;
    column-gap: 10px;
    align-items: center;
    min-height: 37px;
    border-bottom: 0;
    color: #303133;
}

.h5-goods-entry-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.h5-goods-entry-row:last-child {
    border-bottom: 0;
}

.h5-goods-entry-row > span {
    color: #909399;
    font-size: 13px;
}

.h5-goods-entry-row strong {
    min-width: 0;
    overflow: hidden;
    color: #303133;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-entry-row i {
    color: #c0c4cc;
    font-size: 20px;
    font-style: normal;
    text-align: right;
}

.h5-goods-community-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 12px 10px;
    padding: 12px 15px;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}

.h5-goods-community-box {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.h5-goods-community-box img {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
}

.h5-goods-community-box div {
    min-width: 0;
}

.h5-goods-community-box strong,
.h5-goods-community-box span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-community-box strong {
    color: #303133;
    font-size: 14px;
    font-weight: 600;
}

.h5-goods-community-box span {
    margin-top: 4px;
    color: #909399;
    font-size: 12px;
}

.h5-goods-community-card > button {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: #ff1745;
    color: #fff;
    font-size: 13px;
}

.h5-goods-community-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.h5-goods-community-modal[hidden] {
    display: none;
}

.h5-goods-community-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.h5-goods-community-modal.open .h5-goods-community-backdrop {
    opacity: 1;
}

.h5-goods-community-dialog {
    position: relative;
    z-index: 1;
    width: 280px;
    min-height: 300px;
    padding: 36px 26px 24px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.18s ease;
    box-sizing: border-box;
}

.h5-goods-community-modal.open .h5-goods-community-dialog {
    transform: translateY(0);
}

.h5-goods-community-title {
    color: #303133;
    font-size: 17px;
    font-weight: 600;
}

.h5-goods-community-qrcode {
    display: grid;
    place-items: center;
    width: 172px;
    height: 172px;
    margin: 22px auto 18px;
    background: #f6f8fb;
}

.h5-goods-community-qrcode img {
    max-width: 160px;
    max-height: 160px;
    object-fit: contain;
}

.h5-goods-community-dialog p {
    margin: 0;
    color: #909399;
    font-size: 13px;
}

.h5-goods-community-close {
    position: absolute;
    left: 50%;
    bottom: 72px;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 30px;
}

.h5-goods-promotion-row strong {
    display: flex;
    align-items: center;
    gap: 6px;
}

.h5-goods-promotion-row strong > em {
    flex: 0 0 auto;
    height: 18px;
    padding: 0 5px;
    border-radius: 2px;
    background: #fff2f4;
    color: #ff1745;
    font-size: 11px;
    font-style: normal;
    line-height: 18px;
}

.h5-goods-promotion-row strong > small {
    overflow: hidden;
    color: #8b95a5;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-store-row strong small {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: #8b95a5;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-delivery-list {
    display: grid;
    gap: 8px;
    padding: 2px 0 12px 48px;
}

.h5-goods-delivery-list div {
    display: grid;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f7f9fc;
}

.h5-goods-delivery-list div.not-support {
    opacity: 0.46;
}

.h5-goods-delivery-list b {
    color: #303133;
    font-size: 13px;
}

.h5-goods-delivery-list span {
    color: #8b95a5;
    font-size: 12px;
    line-height: 1.45;
}

.h5-goods-service-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.h5-goods-service-summary em {
    position: relative;
    padding-left: 14px;
    color: #303133;
    font-size: 13px;
    font-style: normal;
}

.h5-goods-service-summary em::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--base-color, #0b63f6);
    color: #fff;
    content: "✓";
    font-size: 8px;
    line-height: 10px;
    text-align: center;
    transform: translateY(-50%);
}

.h5-goods-action-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: transparent;
}

.h5-goods-action-sheet[hidden] {
    display: none;
}

.h5-goods-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.18s ease;
}

.h5-goods-action-sheet.open .h5-goods-sheet-backdrop {
    background: rgba(0, 0, 0, 0.42);
}

.h5-goods-sheet-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: 72vh;
    padding: 16px 15px calc(15px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.18s ease;
}

.h5-goods-action-sheet.open .h5-goods-sheet-panel {
    transform: translateY(0);
}

.h5-goods-sheet-panel h3 {
    margin: 0 36px 16px;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
}

.h5-goods-sheet-close {
    position: absolute;
    top: 8px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #909399;
    font-size: 22px;
    line-height: 32px;
}

.h5-goods-delivery-sheet-list,
.h5-goods-service-sheet-list {
    display: grid;
    gap: 14px;
}

.h5-goods-delivery-sheet-list > div,
.h5-goods-service-sheet-list > div {
    position: relative;
    min-height: 34px;
    padding-left: 30px;
}

.h5-goods-delivery-sheet-list > div.not-support {
    opacity: 0.45;
}

.h5-goods-sheet-icon {
    position: absolute;
    top: 1px;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
}

.h5-goods-delivery-sheet-list .not-support .h5-goods-sheet-icon {
    background: #c0c4cc;
}

.h5-goods-delivery-sheet-list strong,
.h5-goods-service-sheet-list strong {
    display: block;
    color: #303133;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.h5-goods-delivery-sheet-list p,
.h5-goods-service-sheet-list p,
.h5-goods-sheet-empty {
    margin: 4px 0 0;
    color: #8b95a5;
    font-size: 12px;
    line-height: 1.55;
}

.h5-goods-sheet-empty {
    padding: 18px 0;
    text-align: center;
}

.h5-goods-store-sheet-list {
    display: grid;
    gap: 0;
}

.h5-goods-store-sheet-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 38px;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #f0f2f5;
    color: inherit;
    text-decoration: none;
}

.h5-goods-store-sheet-item:first-child {
    border-top: 0;
}

.h5-goods-store-sheet-image {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 4px;
    overflow: hidden;
    background: #f4f7fb;
    color: #aab2bf;
    font-size: 12px;
}

.h5-goods-store-sheet-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-goods-store-sheet-info {
    min-width: 0;
}

.h5-goods-store-sheet-info strong {
    display: block;
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-store-sheet-info em,
.h5-goods-store-sheet-info small {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-store-sheet-item > i {
    color: var(--base-color, #0b63f6);
    font-size: 12px;
    font-style: normal;
    text-align: right;
}

.h5-goods-store-sheet-item.active > i {
    color: #ff1745;
}

.h5-goods-sheet-primary {
    width: 100%;
    height: 40px;
    margin-top: 18px;
    border: 0;
    background: #ff1745;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.h5-goods-share-sheet {
    padding: 16px 0 calc(10px + env(safe-area-inset-bottom));
}

.h5-goods-share-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 4px 18px 16px;
}

.h5-goods-share-grid button {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #303133;
}

.h5-goods-share-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f4f7fb;
    color: var(--base-color, #0b63f6);
    font-size: 24px;
}

.h5-goods-share-grid em {
    color: #303133;
    font-size: 13px;
    font-style: normal;
    line-height: 18px;
}

.h5-goods-share-cancel {
    width: 100%;
    height: 48px;
    border: 0;
    border-top: 8px solid #f5f6f8;
    background: #fff;
    color: #303133;
    font-size: 15px;
}

.h5-goods-poster-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
}

.h5-goods-poster-modal[hidden] {
    display: none;
}

.h5-goods-poster-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.18s ease;
}

.h5-goods-poster-modal.open .h5-goods-poster-backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.h5-goods-poster-dialog {
    position: relative;
    z-index: 1;
    width: min(82vw, 320px);
    transform: scale(0.96);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.h5-goods-poster-modal.open .h5-goods-poster-dialog {
    transform: scale(1);
    opacity: 1;
}

.h5-goods-poster-close {
    position: absolute;
    top: -42px;
    right: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 30px;
}

.h5-goods-poster-image {
    min-height: 360px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

.h5-goods-poster-image img {
    display: block;
    width: 100%;
    height: auto;
}

.h5-goods-poster-save {
    height: 42px;
    border-radius: 0 0 8px 8px;
    background: #fff;
    color: #303133;
    font-size: 14px;
    line-height: 42px;
    text-align: center;
}

.h5-goods-card {
    padding: 13px 15px;
}

.h5-goods-card h2 {
    margin: 0 0 12px;
    color: #303133;
    font-size: 15px;
    font-weight: 700;
}

.h5-goods-card h2 span,
.h5-goods-card h2 em {
    color: #606266;
    font-weight: 400;
    font-style: normal;
}

.h5-goods-attr {
    padding: 0;
    overflow: hidden;
}

.h5-goods-attr h2 {
    height: 35px;
    margin: 0 10px;
    color: #606266;
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
}

.h5-goods-attr-table {
    margin: 10px;
    overflow: hidden;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
}

.h5-goods-evaluate h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h5-goods-evaluate h2 > span {
    color: #303133;
    font-weight: 700;
}

.h5-goods-evaluate h2 a {
    color: #8b95a5;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
}

.h5-goods-sku-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.h5-goods-sku-source-options {
    display: none;
}

.h5-goods-sku-group {
    padding-bottom: 0;
    position: relative;
}

.h5-goods-spec-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.h5-goods-spec-value {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 28px;
    margin: 0 10px 10px 0;
    padding: 2px 15px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    color: #303133;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
}

.h5-goods-spec-value.active {
    border-color: #ff1745;
    color: #ff1745;
}

.h5-goods-spec-value.disabled,
.h5-goods-spec-value:disabled {
    border-style: dashed;
    color: #b8bec8;
    cursor: not-allowed;
}

.h5-goods-spec-value em {
    position: absolute;
    right: -1px;
    bottom: -1px;
    min-width: 24px;
    padding: 0 3px;
    border-radius: 4px 0 4px 0;
    background: #c0c4cc;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    line-height: 14px;
    text-align: center;
}

.h5-goods-sku-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    max-width: 100%;
    min-height: 28px;
    margin: 0 10px 10px 0;
    padding: 2px 15px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    color: #303133;
    text-align: center;
}

.h5-goods-sku-option.active {
    border-color: #ff1745;
    background: #fff;
    color: #ff1745;
}

.h5-goods-sku-option.disabled {
    opacity: 0.55;
}

.h5-goods-sku-option:disabled {
    cursor: not-allowed;
}

.h5-goods-sku-option strong {
    overflow: hidden;
    color: #303133;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-sku-option.active strong {
    color: #ff1745;
}

.h5-goods-sku-option span {
    display: none;
}

.h5-goods-sku-option em {
    display: none;
}

.h5-goods-quantity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding: 10px 0;
    line-height: 36px;
    border-top: 0;
}

.h5-goods-quantity-row > div:first-child {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.h5-goods-quantity-row strong {
    color: #303133;
    font-size: 14px;
}

.h5-goods-quantity-row span {
    color: #8b95a5;
    font-size: 12px;
    line-height: 1.35;
}

.h5-goods-stepper {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 30px 48px 30px;
    height: 34px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
}

.h5-goods-stepper button,
.h5-goods-stepper input {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 34px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    background: #fff;
    color: #303133;
    text-align: center;
    line-height: 32px;
}

.h5-goods-stepper button {
    padding: 0;
    font-size: 22px;
}

.h5-goods-stepper input {
    padding: 0 4px;
    border-left: 0;
    border-right: 0;
    background: #f7f7f7;
    font-size: 13px;
    font-weight: 700;
}

.h5-goods-hidden-form {
    display: none;
}

.h5-goods-sku-mask {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.18s ease;
}

.h5-goods-sku-mask.open {
    background: rgba(0, 0, 0, 0.42);
}

.h5-goods-sku-mask[hidden] {
    display: none;
}

.h5-goods-sku-popup {
    position: relative;
    width: min(100%, var(--old-diy-phone-width));
    height: var(--sku-popup-height, 48vh);
    min-height: 318px;
    max-height: 75vh;
    padding: 0 0 calc(70px + env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.18s ease;
}

.h5-goods-sku-mask.open .h5-goods-sku-popup {
    transform: translateY(0);
}

@media (max-width: 480px) {
    .h5-goods-sku-popup {
        width: 100%;
    }
}

.h5-goods-sku-close {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 20px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #909399;
    font-size: 22px;
    line-height: 40px;
}

.h5-goods-sku-head {
    position: relative;
    display: block;
    min-height: 85px;
    padding: 15px 35px 8px 105px;
    border-bottom: 1px solid #edf0f5;
}

.h5-goods-sku-thumb {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #f4f7fb;
    color: #aab2bf;
    font-size: 12px;
    position: absolute;
    left: 15px;
    top: 15px;
}

.h5-goods-sku-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-goods-sku-head strong {
    display: block;
    margin-top: 0;
    color: #ff1745;
    font-size: 20px;
    line-height: 1.2;
}

.h5-goods-sku-head > div > em,
.h5-goods-sku-head > div > span {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: #606266;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-sku-head b {
    font-weight: 400;
}

.h5-goods-member-price-popup {
    display: inline-block;
    margin-top: 3px;
    color: #ff6a00;
    font-size: 12px;
}

.h5-goods-sku-head strong span {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.h5-goods-sku-body {
    margin-top: 0;
    height: calc(100% - 155px);
    max-height: none;
    overflow-y: auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.h5-goods-sku-body h3 {
    margin: 0;
    padding: 10px 0;
    color: #303133;
    font-size: 14px;
    font-weight: 400;
}

.h5-goods-sku-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(15px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    height: 40px;
    padding: 0 15px;
    border-top: 0;
    background: #fff;
    box-sizing: border-box;
}

.h5-goods-sku-footer.dual {
    grid-template-columns: 1fr 1fr;
}

.h5-home-sku-message {
    margin: 16px 0;
    color: #8b95a5;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.h5-home-sku-message.error {
    color: #f33;
}

.h5-goods-sku-confirm,
.h5-goods-sku-cart {
    width: 100%;
    height: 40px;
    margin: 0;
    border: 0;
    border-radius: 5px;
    background: #ff1745;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.h5-goods-sku-cart {
    background: #ff9f1a;
}

.h5-goods-sku-confirm:disabled,
.h5-goods-sku-cart:disabled {
    background: #dcdfe6;
    color: #909399;
}

.h5-goods-empty-line {
    padding: 18px 0;
    color: #999ca7;
    font-size: 13px;
    text-align: center;
}

.h5-goods-evaluate article {
    padding: 10px 0;
    border-top: 1px solid #f0f2f5;
}

.h5-goods-evaluate article:first-of-type {
    border-top: 0;
}

.h5-goods-evaluator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #999ca7;
    font-size: 12px;
}

.h5-goods-evaluator-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.h5-goods-evaluator-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef3fb;
    color: #8b95a5;
    font-size: 13px;
}

.h5-goods-evaluator-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-goods-evaluator strong {
    display: block;
    color: #303133;
    font-size: 13px;
}

.h5-goods-evaluator em {
    display: block;
    margin-top: 2px;
    color: #ffb400;
    font-size: 11px;
    font-style: normal;
    letter-spacing: 1px;
}

.h5-goods-evaluate-sku {
    margin-top: 8px;
    color: #999ca7;
    font-size: 12px;
}

.h5-goods-evaluate p {
    margin: 8px 0 0;
    color: #303133;
    font-size: 13px;
    line-height: 1.65;
}

.h5-goods-evaluate-images {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-top: 9px;
    padding-bottom: 2px;
}

.h5-goods-evaluate-images img {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 4px;
    object-fit: cover;
    background: #f4f7fb;
}

.h5-goods-attr-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    border-top: 1px solid #f1f1f1;
    font-size: 13px;
}

.h5-goods-attr-row:first-of-type {
    border-top: 0;
}

.h5-goods-attr-row[hidden] {
    display: none;
}

.h5-goods-attr span {
    padding: 8px 10px;
    border-right: 1px solid #f1f1f1;
    background: #fbfafa;
    color: #8b95a5;
    line-height: 1.3;
    white-space: pre-wrap;
}

.h5-goods-attr strong {
    min-width: 0;
    padding: 8px 10px;
    color: #303133;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap;
}

.h5-goods-attr-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    border: 0;
    border-top: 1px solid #f0f2f5;
    background: #fff;
    color: #606266;
    font-size: 13px;
    cursor: pointer;
}

.h5-goods-attr-action i {
    margin-left: 3px;
    font-size: 12px;
}

.h5-goods-attr.is-open .h5-goods-attr-action i {
    transform: rotate(180deg);
}

.h5-goods-rich-card {
    padding: 0;
    overflow: hidden;
}

.h5-goods-detail-tab {
    height: 35px;
    margin: 5px 10px 0;
    border-bottom: 0;
    color: #606266;
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
    text-align: left;
}

.h5-goods-rich,
.h5-goods-after-sale {
    overflow: hidden;
    padding: 5px 15px 15px;
    color: #303133;
    font-size: 14px;
    line-height: 1.75;
}

.h5-goods-rich img,
.h5-goods-rich video,
.h5-goods-after-sale img {
    max-width: 100%;
    height: auto;
}

.h5-goods-after-sale {
    border-top: 10px solid #f6f6f6;
}

.h5-goods-action-bar {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 46px 46px 46px minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
    width: min(430px, 100vw);
    max-width: 430px;
    transform: translateX(-50%);
    min-height: 50px;
    padding: 5px 10px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid #edf0f5;
    background: #fff;
    box-sizing: border-box;
    box-shadow: none;
}

.h5-goods-action-bar.only-buy {
    grid-template-columns: 46px 46px 46px minmax(0, 1fr);
}

.h5-goods-action-bar a,
.h5-goods-action-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 40px;
    border: 0;
    border-radius: 5px;
    background: #fff;
    color: #303133;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}

.h5-goods-action-bar button {
    padding: 0;
}

.h5-goods-action-bar > a:not(.h5-goods-buy-now) {
    display: grid;
    gap: 1px;
    border-radius: 0;
    color: #303133;
}

.h5-goods-action-bar a span {
    font-size: 19px;
    line-height: 1;
}

.h5-goods-action-bar .h5-goods-action-cart {
    width: 100%;
    background: #ff9f1a;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
}

.h5-goods-action-bar .h5-goods-buy-now {
    background: #ff1745;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
}

.h5-goods-action-bar button:disabled,
.h5-goods-action-bar .disabled {
    background: #dcdfe6 !important;
    color: #909399 !important;
    pointer-events: none;
}

.h5-detail-phone {
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

.h5-detail-gallery {
    display: grid;
    place-items: center;
    min-height: 320px;
    background: #eef5ff;
    color: #9aa8ba;
}

.h5-detail-gallery img {
    width: 100%;
    height: auto;
    min-height: 320px;
    object-fit: cover;
}

.h5-detail-card {
    margin: 10px 12px;
    padding: 14px;
    border-radius: 8px;
    background: #fff;
}

.h5-detail-card h1 {
    margin: 8px 0;
    color: #1f2d3d;
    font-size: 18px;
    line-height: 1.4;
}

.h5-detail-card p {
    margin: 0;
    color: #7b8794;
    line-height: 1.7;
}

.h5-detail-intro {
    font-size: 13px;
}

.h5-detail-price {
    color: #ff1745;
    font-size: 22px;
    font-weight: 700;
}

.h5-detail-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: #8b95a5;
    font-size: 12px;
}

.h5-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.h5-service-tags span {
    padding: 4px 8px;
    border-radius: 12px;
    background: #f1f5fb;
    color: #606b7b;
    font-size: 12px;
}

.h5-sku-list {
    display: grid;
    gap: 8px;
}

.h5-sku-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #edf0f5;
    border-radius: 6px;
}

.h5-sku-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-sku-list span {
    color: #ff1745;
    font-weight: 700;
}

.h5-sku-list em {
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-detail-rich {
    overflow: hidden;
}

.h5-detail-rich img,
.h5-rich-text img,
.h5-after-sale-content img {
    max-width: 100%;
    height: auto;
}

.h5-after-sale-content {
    overflow: hidden;
    color: #606b7b;
    font-size: 13px;
    line-height: 1.7;
}

.h5-after-sale-content p {
    margin: 0 0 8px;
}

.h5-guess-section {
    margin: 0 12px 10px;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

.h5-guess-section h2 {
    height: 35px;
    margin: 0 10px;
    padding: 0;
    color: #606266;
    font-size: 16px;
    font-weight: 400;
    line-height: 35px;
}

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

.h5-guess-card {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    color: #303133;
}

.h5-guess-img {
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: #eef5ff;
    color: #9aa8ba;
    font-size: 12px;
}

.h5-guess-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-guess-card strong {
    overflow: hidden;
    margin-top: 8px;
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-guess-card strong.multiple {
    display: -webkit-box;
    min-height: 36px;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.h5-guess-price {
    margin-top: 6px;
    color: #ff1544;
    font-size: 16px;
    font-weight: 700;
}

.h5-guess-card small {
    margin-top: 2px;
    color: #999ca7;
    font-size: 12px;
}

.h5-guess-card em {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-width: 42px;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    font-style: normal;
    line-height: 24px;
    text-align: center;
}

.h5-goods-toast {
    position: fixed;
    left: 50%;
    top: 45%;
    z-index: 80;
    max-width: 72vw;
    padding: 10px 16px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity .18s ease;
}

.h5-goods-toast.show {
    opacity: 1;
}

.h5-goods-toast.error {
    background: rgba(212, 48, 48, 0.86);
}

.h5-detail-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: 52px 52px minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #edf0f5;
    background: #fff;
}

.h5-detail-actions a,
.h5-detail-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid #d8e1ef;
    border-radius: 19px;
    background: #fff;
    color: #303133;
    font-size: 14px;
}

.h5-detail-actions form {
    margin: 0;
}

.h5-detail-actions form button {
    width: 100%;
    border-color: #ff9f1a;
    background: #fff6e8;
    color: #e87d00;
}

.h5-detail-actions button {
    border-color: #f2b8c4;
    background: #ffe8ee;
    color: #ff1745;
}

.h5-detail-actions form button {
    border-color: #ff9f1a;
    background: #fff6e8;
    color: #e87d00;
}

.h5-detail-actions .h5-buy-action,
.h5-order-actions a,
.h5-checkout-actions .h5-primary {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-form-error {
    margin: 10px 12px 0;
    padding: 10px 12px;
    border: 1px solid #ffd0d9;
    border-radius: 8px;
    background: #fff2f5;
    color: #d9304f;
    font-size: 13px;
    line-height: 1.5;
}

.h5-checkout-form,
.h5-order-phone {
    padding-bottom: 72px;
}

.h5-checkout-card {
    margin: 10px 12px;
    padding: 12px;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

.h5-checkout-card h2 {
    margin: 0 0 10px;
    color: #1f2d3d;
    font-size: 15px;
    font-weight: 700;
}

.h5-checkout-card > strong,
.h5-checkout-card > span,
.h5-checkout-card > a,
.h5-checkout-card > p {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.55;
}

.h5-checkout-card > span,
.h5-checkout-card > p {
    color: #7b8794;
}

.h5-checkout-card > a {
    color: var(--base-color, #0b63f6);
}

.h5-order-goods,
.h5-order-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.h5-order-goods {
    grid-template-columns: 72px minmax(0, 1fr);
}

.h5-order-goods-list {
    display: grid;
    gap: 10px;
}

.h5-order-goods-card .h5-order-goods + .h5-order-goods {
    padding-top: 10px;
    border-top: 1px solid #edf0f5;
}

.h5-order-goods-img {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 8px;
    background: #eef3fb;
    color: #9aa8ba;
    font-size: 12px;
}

.h5-order-goods-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-order-goods strong,
.h5-order-item strong {
    display: block;
    overflow: hidden;
    color: #1f2d3d;
    font-size: 14px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-order-goods em,
.h5-order-item em,
.h5-order-item small {
    display: block;
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-order-goods b,
.h5-order-item b {
    display: block;
    margin-top: 8px;
    color: #ff1745;
    font-size: 16px;
}

.h5-checkout-skus,
.h5-delivery-options,
.h5-pickup-slots,
.h5-order-items {
    display: grid;
    gap: 8px;
}

.h5-checkout-skus label,
.h5-delivery-options label,
.h5-pickup-slots label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 10px;
    border: 1px solid #e4e9f2;
    border-radius: 8px;
    background: #fff;
}

.h5-checkout-skus label.active,
.h5-delivery-options label.active,
.h5-pickup-slots label.active {
    border-color: var(--base-color, #0b63f6);
    background: #f2f7ff;
}

.h5-delivery-options label.disabled {
    color: #b0b8c4;
    background: #f7f8fb;
}

.h5-checkout-skus input,
.h5-delivery-options input,
.h5-pickup-slots input {
    width: 14px;
    height: 14px;
    margin-top: 3px;
}

.h5-checkout-skus strong,
.h5-delivery-options strong {
    display: block;
    color: #1f2d3d;
    font-size: 13px;
}

.h5-pickup-slots span {
    color: #1f2d3d;
    font-size: 13px;
    line-height: 1.45;
}

.h5-checkout-skus em,
.h5-delivery-options em {
    display: block;
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.h5-field {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.h5-field-vertical {
    grid-template-columns: 1fr;
    gap: 6px;
}

.h5-field span {
    color: #303133;
    font-size: 13px;
}

.h5-field input,
.h5-field textarea,
.h5-field select {
    width: 100%;
    min-width: 0;
    border: 1px solid #d8e1ef;
    border-radius: 6px;
    background: #fff;
    color: #303133;
    font: inherit;
    box-sizing: border-box;
}

.h5-field input,
.h5-field select {
    height: 36px;
    padding: 0 10px;
}

.h5-field textarea {
    padding: 8px 10px;
    resize: vertical;
}

.h5-dynamic-field > span {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.h5-dynamic-field i {
    color: #ff1745;
    font-style: normal;
}

.h5-form-choice-grid {
    display: grid;
    gap: 8px;
}

.h5-form-choice-grid label {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 24px;
    color: #303133;
    font-size: 13px;
}

.h5-form-choice-grid input {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    margin: 0;
}

.h5-form-choice-grid em {
    font-style: normal;
    line-height: 1.45;
}

.h5-form-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.h5-form-range b {
    color: #8b95a5;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}

.h5-form-city {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.h5-form-city input {
    min-width: 0;
}

.h5-goods-form-block {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #edf0f5;
}

.h5-goods-form-block h3 {
    margin: 0 0 8px;
    color: #1f2d3d;
    font-size: 13px;
    font-weight: 700;
}

.h5-order-goods-entry + .h5-order-goods-entry {
    padding-top: 10px;
    border-top: 1px solid #edf0f5;
}

.h5-order-form-data {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 6px 8px;
    margin: 8px 0 0;
    color: #606b78;
    font-size: 12px;
    line-height: 1.45;
}

.h5-order-form-data-card {
    margin-top: 0;
    grid-template-columns: 84px minmax(0, 1fr);
}

.h5-order-form-data dt {
    color: #8b95a5;
}

.h5-order-form-data dd {
    min-width: 0;
    margin: 0;
    color: #303133;
    word-break: break-word;
}

.h5-order-form-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.h5-order-form-images img {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    object-fit: cover;
    background: #eef3fb;
}

.h5-order-delivery-card strong {
    color: #1f2d3d;
}

.h5-order-verify-card {
    display: grid;
    gap: 10px;
}

.h5-order-verify-card h2 {
    margin-bottom: 0;
}

.h5-order-verify-item {
    padding: 10px;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #f8fbff;
}

.h5-order-verify-code-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h5-order-verify-code-line strong {
    display: block;
    color: var(--base-color, #0b63f6);
    font-size: 22px;
    letter-spacing: 1px;
}

.h5-order-verify-code-line button {
    flex: 0 0 auto;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #d8e1ef;
    border-radius: 13px;
    background: #fff;
    color: var(--base-color, #0b63f6);
    font-size: 12px;
}

.h5-order-verify-media {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 10px;
    border-radius: 8px;
    background: #fff;
}

.h5-order-verify-barcode {
    display: block;
    max-width: 220px;
    width: 100%;
    height: 54px;
    object-fit: contain;
}

.h5-order-verify-qrcode {
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 8px;
    background: #fff;
}

.h5-order-verify-qrcode canvas,
.h5-order-verify-qrcode img,
.h5-order-verify-qrcode table {
    width: 96px !important;
    height: 96px !important;
}

.h5-order-verify-media p {
    margin: 0;
    color: #7b8794;
    font-size: 12px;
    line-height: 1.4;
}

.h5-order-verify-item span,
.h5-order-verify-item em,
.h5-order-verify-item small {
    display: block;
    margin-top: 5px;
    color: #7b8794;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.h5-order-verify-item em {
    color: #303133;
}

.h5-order-verify-records {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #d8e1ef;
}

.h5-order-verify-info {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #d8e1ef;
}

.h5-order-verify-info strong {
    color: #303133;
    font-size: 13px;
    font-weight: 500;
}

.h5-order-card-code-item {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #f8fbff;
}

.h5-order-card-code-item p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.h5-order-card-code-item p > span {
    flex: 0 0 auto;
    color: #7b8794;
    font-size: 13px;
}

.h5-order-card-code-item strong {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    color: #303133;
    font-size: 14px;
    font-weight: 500;
}

.h5-order-card-code-item button {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1f73ff;
    font-size: 12px;
}

.h5-address-grid {
    display: grid;
    gap: 8px;
}

.h5-location-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.h5-secondary-mini {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d8e1ef;
    border-radius: 16px;
    background: #fff;
    color: var(--base-color, #0b63f6);
    font-size: 12px;
    white-space: nowrap;
}

.h5-location-row span {
    min-width: 0;
    color: #8b95a5;
    font-size: 12px;
    line-height: 1.45;
}

.h5-amount-card p {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 0;
    color: #606b78;
    font-size: 13px;
}

.h5-amount-card p:first-child {
    margin-top: 0;
}

.h5-amount-card strong {
    color: #ff1745;
    font-size: 18px;
}

.h5-amount-card .h5-amount-total {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #edf0f5;
    color: #303133;
}

.h5-order-log-card {
    display: grid;
    gap: 8px;
}

.h5-order-log-item {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding-top: 8px;
    border-top: 1px solid #edf0f5;
    color: #606b78;
    font-size: 12px;
}

.h5-order-log-item:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.h5-order-log-item b {
    color: #303133;
    font-weight: 400;
    line-height: 1.45;
}

.h5-payment-records {
    display: grid;
    gap: 8px;
}

.h5-payment-record {
    padding-top: 8px;
    border-top: 1px solid #edf0f5;
}

.h5-payment-record:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.h5-payment-record p {
    display: flex;
    justify-content: space-between;
    margin: 0;
    color: #303133;
    font-size: 13px;
}

.h5-payment-record b {
    color: #ff1745;
    font-weight: 700;
}

.h5-payment-record em,
.h5-payment-record small {
    display: block;
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.h5-payment-result a {
    display: inline-flex;
    margin-top: 8px;
    color: var(--base-color, #0b63f6);
    font-size: 13px;
    text-decoration: none;
}

.h5-pay-result-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 47px 18px 20px;
    border-radius: 0;
    background: #fff;
    color: #303133;
    text-align: center;
    box-sizing: border-box;
}

.h5-pay-result-box > img {
    width: 40px;
    height: auto;
    display: block;
}

.h5-pay-result-box > span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f1f4f8;
    color: #8b95a5;
    font-size: 34px;
    font-weight: 700;
}

.h5-pay-result-box.success > span {
    background: #e8f8ef;
    color: #18a058;
}

.h5-pay-result-box.pending > span {
    background: #fff7e8;
    color: #e87d00;
}

.h5-pay-result-box.fail > span {
    background: #fff0f3;
    color: #d9304f;
}

.h5-pay-result-box strong {
    margin-top: 13px;
    font-size: 16px;
    font-weight: 400;
}

.h5-pay-result-box.success strong {
    color: #09bb07;
}

.h5-pay-result-box.fail strong,
.h5-pay-result-box.pending strong {
    color: #ff4646;
}

.h5-pay-result-box p {
    margin: 20px 0 12px;
    color: #333;
    font-weight: 700;
    line-height: 25px;
}

.h5-pay-result-box p span {
    font-size: 18px;
}

.h5-pay-result-box p b {
    font-size: 30px;
}

.h5-pay-result-box em {
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-pay-result-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 40px;
    margin-top: 12px;
    padding-bottom: 20px;
    background: #fff;
    box-sizing: content-box;
}

.h5-pay-result-actions a {
    width: 100px;
    height: 33px;
    border: 1px solid #8b95a5;
    border-radius: 33px;
    color: #303133;
    font-size: 15px;
    line-height: 33px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.h5-pay-result-actions a + a {
    margin-left: 20px;
}

.h5-pay-result-actions .go-home {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-checkout-actions,
.h5-order-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #edf0f5;
    background: #fff;
}

.h5-transaction-agreement {
    margin: 10px 12px 12px;
    color: #606266;
    font-size: 12px;
    line-height: 1.6;
}

.h5-transaction-agreement button {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--base-color, #0b63f6);
    font: inherit;
}

.h5-agreement-modal[hidden] {
    display: none;
}

.h5-agreement-modal {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 24px;
}

.h5-agreement-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
}

.h5-agreement-dialog {
    position: relative;
    z-index: 1;
    width: min(320px, 100%);
    max-height: 70vh;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.24);
}

.h5-agreement-dialog > strong {
    display: block;
    padding: 16px 44px 12px;
    color: #1f2d3d;
    font-size: 15px;
    text-align: center;
}

.h5-agreement-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #606266;
    font-size: 22px;
    line-height: 1;
}

.h5-agreement-content {
    max-height: calc(70vh - 52px);
    overflow-y: auto;
    padding: 0 16px 18px;
    color: #303133;
    font-size: 13px;
    line-height: 1.7;
}

.h5-agreement-content img {
    max-width: 100%;
    height: auto;
}

.h5-checkout-actions button,
.h5-checkout-actions a,
.h5-order-actions button,
.h5-order-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid #d8e1ef;
    border-radius: 19px;
    background: #fff;
    color: #303133;
    font-size: 14px;
    text-decoration: none;
}

.h5-checkout-actions button:disabled,
.h5-order-actions button:disabled {
    border-color: #d8e1ef;
    background: #eef2f7;
    color: #9aa8ba;
}

.h5-order-actions form {
    display: contents;
}

.h5-order-actions .h5-primary-link {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-order-status {
    margin: 10px 12px;
    padding: 16px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--base-color, #0b63f6), #2f8cff);
    color: #fff;
}

.h5-order-status strong,
.h5-order-status span,
.h5-order-status em {
    display: block;
}

.h5-order-status strong {
    font-size: 20px;
}

.h5-order-status span {
    margin-top: 8px;
    font-size: 12px;
    opacity: .9;
}

.h5-order-status em {
    margin-top: 4px;
    font-size: 12px;
    font-style: normal;
    opacity: .85;
}

.h5-order-detail-old {
    background: #f7f7f7;
}

.h5-order-detail-old .h5-order-status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 96px;
    margin: 0;
    padding: 18px 22px;
    border-radius: 0;
    background: var(--base-color, #0b63f6) url("/assets/legacy/uniapp/order/status-wrap-bg.png") center / cover no-repeat;
    box-sizing: border-box;
}

.h5-order-detail-old .h5-order-status-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h5-order-detail-old .h5-order-status-main img {
    flex: 0 0 auto;
    width: 52px;
    height: 43px;
    object-fit: contain;
}

.h5-order-detail-old .h5-order-status-main > div {
    min-width: 0;
}

.h5-order-detail-old .h5-order-status-main strong,
.h5-order-detail-old .h5-order-status-main span {
    display: block;
}

.h5-order-detail-old .h5-order-status-main span {
    margin-top: 9px;
}

.h5-order-detail-old .h5-order-status strong {
    order: 1;
    font-size: 20px;
    font-weight: 700;
}

.h5-order-detail-old .h5-order-status span,
.h5-order-detail-old .h5-order-status em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-order-detail-old .h5-order-status span {
    order: 2;
    margin-top: 9px;
    font-size: 12px;
}

.h5-order-detail-old .h5-order-status em {
    order: 3;
    margin-top: 5px;
}

.h5-order-detail-old .h5-order-countdown {
    order: 4;
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-style: normal;
    opacity: .92;
}

.h5-order-detail-old .h5-checkout-card {
    margin: 10px 10px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.h5-order-detail-old .h5-checkout-card h2 {
    position: relative;
    padding-left: 9px;
    font-size: 14px;
}

.h5-order-detail-old .h5-checkout-card h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 3px;
    height: 14px;
    border-radius: 1px;
    background: var(--base-color, #0b63f6);
}

.h5-order-detail-old .h5-order-store-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.h5-order-detail-old .h5-order-store-link strong {
    flex: 1 1 auto;
}

.h5-order-detail-old .h5-order-store-link span {
    flex: 0 0 auto;
    color: #9aa4b2;
    font-size: 20px;
    line-height: 1;
}

.h5-order-detail-old .h5-order-actions {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: min(375px, calc(100vw - 24px));
    transform: translateX(-50%);
    box-sizing: border-box;
    box-shadow: 0 -6px 18px rgba(15, 35, 75, .08);
}

.h5-order-detail-old .h5-order-cancel-form button {
    border-color: #d8e1ef;
    background: #fff;
    color: #303133;
}

.h5-order-search {
    margin: 10px 12px;
    padding: 12px;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    background: #fff;
}

.h5-order-search button,
.h5-lookup-result a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin-top: 12px;
    padding: 0 18px;
    border: 1px solid var(--base-color, #0b63f6);
    border-radius: 18px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 14px;
}

.h5-lookup-result a {
    width: fit-content;
}

.h5-order-cancel-form {
    margin: 0;
}

.h5-order-cancel-form button {
    width: 100%;
    border-color: #ffd0d9;
    background: #fff2f5;
    color: #d9304f;
}

.h5-content-phone {
    padding-bottom: 24px;
}

.h5-content-phone.with-bottom-nav {
    padding-bottom: calc(50px + env(safe-area-inset-bottom) + 24px);
}

.h5-content-card,
.h5-content-list,
.h5-content-detail {
    margin: 10px 12px;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.h5-content-card h2 {
    margin: 0;
    padding: 12px;
    border-bottom: 1px solid #edf0f5;
    color: #1f2d3d;
    font-size: 15px;
}

.h5-content-row,
.h5-content-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 8px;
    align-items: center;
    min-height: 46px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf0f5;
    color: #303133;
    box-sizing: border-box;
}

.h5-content-row:last-child,
.h5-content-item:last-child {
    border-bottom: 0;
}

.h5-content-row span,
.h5-content-main strong,
.h5-content-main em,
.h5-content-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-content-row i,
.h5-content-item i {
    color: #b0b8c4;
    font-style: normal;
    text-align: right;
}

.h5-content-search {
    margin-top: 10px;
}

.h5-content-item.article {
    grid-template-columns: 76px minmax(0, 1fr) 18px;
}

.h5-content-cover {
    display: grid;
    place-items: center;
    width: 76px;
    height: 58px;
    overflow: hidden;
    border-radius: 8px;
    background: #eef3fb;
    color: #9aa8ba;
    font-size: 12px;
}

.h5-content-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-content-main strong {
    display: block;
    color: #1f2d3d;
    font-size: 14px;
    line-height: 1.45;
}

.h5-content-main em,
.h5-content-main small {
    display: block;
    margin-top: 5px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-content-detail {
    padding: 16px;
}

.h5-content-detail h1 {
    margin: 0;
    color: #1f2d3d;
    font-size: 20px;
    line-height: 1.45;
}

.h5-content-meta {
    margin: 8px 0 0;
    color: #8b95a5;
    font-size: 12px;
}

.h5-content-hero {
    display: block;
    width: 100%;
    margin-top: 14px;
    border-radius: 8px;
}

.h5-content-rich {
    margin-top: 16px;
    color: #303133;
    font-size: 14px;
    line-height: 1.75;
}

.h5-content-rich img {
    max-width: 100%;
    height: auto;
}

.h5-legacy-content-page {
    background: #f8f8f8;
    color: #303133;
}

.h5-legacy-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 0 24px;
    color: #999ca7;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
}

.h5-legacy-empty.notice {
    min-height: 154px;
}

.h5-legacy-empty.article {
    min-height: 100px;
    padding-top: 100px;
    align-items: start;
}

.h5-legacy-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    margin-top: 12px;
    padding: 0 18px;
    border-radius: 17px;
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-help-wrap {
    padding-top: 10px;
}

.h5-help-item {
    width: calc(100% - 30px);
    margin: 0 auto 9px;
    padding: 16px 17px;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
}

.h5-help-title {
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f1f1;
    color: #000;
    font-size: 15px;
    line-height: 1.4;
}

.h5-help-title.empty {
    padding-bottom: 0;
    border-bottom: 0;
}

.h5-help-row {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
    color: #666;
    font-size: 14px;
    line-height: 1.45;
}

.h5-help-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.h5-notice-list {
    padding-top: 1px;
}

.h5-notice-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12px;
    padding: 16px 17px 12px;
    border-radius: 5px;
    background: #fff;
    line-height: 1;
    box-sizing: border-box;
}

.h5-notice-title-row,
.h5-notice-more {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.h5-notice-title-row {
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f3f3;
    overflow: hidden;
}

.h5-notice-title {
    display: flex;
    min-width: 0;
    align-items: center;
}

.h5-notice-title b {
    flex: 0 0 auto;
    order: 2;
    margin-left: 8px;
    padding: 1px 3px;
    border-radius: 3px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
}

.h5-notice-title strong {
    overflow: hidden;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-notice-item small,
.h5-notice-more i {
    color: #999ca7;
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
}

.h5-notice-more {
    padding-top: 10px;
    font-size: 12px;
}

.h5-notice-more .detail {
    display: -webkit-box;
    width: calc(100% - 22px);
    overflow: hidden;
    color: #666;
    line-height: 18px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.h5-notice-more i {
    flex: 0 0 14px;
    text-align: right;
}

.h5-article-tabs {
    position: sticky;
    top: 44px;
    z-index: 4;
    display: flex;
    overflow-x: auto;
    height: 40px;
    border-radius: 0 0 12px 12px;
    background: #fff;
    white-space: nowrap;
}

.h5-article-tabs::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.h5-article-tabs a {
    position: relative;
    flex: 0 0 auto;
    padding: 0 15px;
    color: #303133;
    font-size: 15px;
    line-height: 40px;
}

.h5-article-tabs a.active {
    color: var(--base-color, #0b63f6);
}

.h5-article-tabs a.active::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    height: 3px;
    background: linear-gradient(270deg, rgba(11, 99, 246, .35) 0%, var(--base-color, #0b63f6) 100%);
}

.h5-article-wrap {
    padding-top: 1px;
    background: #f8f8f8;
}

.h5-article-item {
    display: flex;
    margin: 12px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    color: #303133;
    box-sizing: border-box;
}

.h5-article-img {
    display: flex;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    margin-right: 10px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #eef3fb;
}

.h5-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-article-info {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

.h5-article-info strong {
    display: -webkit-box;
    overflow: hidden;
    color: #303133;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-article-info small {
    display: flex;
    align-items: center;
    color: #999ca7;
    font-size: 12px;
    line-height: 1;
}

.h5-article-info small i {
    width: 4px;
    height: 4px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--base-color, #0b63f6);
}

.h5-article-info small em {
    margin-left: 10px;
    font-style: normal;
}

.h5-detail-page {
    background: #fff;
}

.h5-legacy-detail {
    min-height: calc(100% - 44px);
    padding: 15px;
    background: #fff;
    word-break: break-all;
    box-sizing: border-box;
}

.h5-legacy-detail h1 {
    margin: 0;
    color: #303133;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

.h5-detail-help .h5-legacy-detail h1 {
    text-align: center;
    font-weight: 400;
}

.h5-legacy-meta {
    margin: 10px 0 0;
    color: #999ca7;
    font-size: 12px;
}

.h5-legacy-meta.right {
    text-align: right;
}

.h5-legacy-rich {
    margin-top: 12px;
    color: #303133;
    font-size: 14px;
    line-height: 1.75;
}

.h5-legacy-rich img {
    max-width: 100%;
    height: auto;
}

.h5-article-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    color: #999;
    font-size: 12px;
}

.h5-article-bottom b {
    color: var(--base-color, #0b63f6);
    font-weight: 400;
}

.h5-external-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin-top: 14px;
    padding: 0 18px;
    border-radius: 18px;
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-notice-strip {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin: 10px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(31, 45, 61, .04);
}

.h5-notice-strip strong {
    color: #ff1745;
    font-size: 13px;
}

.h5-notice-strip a,
.h5-home-articles a strong,
.h5-home-articles a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-notice-strip a {
    color: #303133;
    font-size: 13px;
}

.h5-home-articles {
    display: grid;
    gap: 0;
}

.h5-home-articles a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid #edf0f5;
}

.h5-home-articles a strong {
    color: #303133;
    font-size: 13px;
}

.h5-home-articles a span {
    color: #8b95a5;
    font-size: 12px;
}

.h5-member-head {
    margin: 10px 12px;
    padding: 18px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--base-color, #0b63f6), #2f8cff);
    color: #fff;
}

.h5-member-head strong,
.h5-member-head span {
    display: block;
}

.h5-member-head strong {
    font-size: 20px;
}

.h5-member-head span {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    opacity: .9;
}

.h5-member-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.h5-member-meta em {
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    font-style: normal;
}

.h5-login-phone {
    padding-bottom: 24px;
    background: #f5f7fb;
}

.h5-login-head {
    margin: 12px;
    padding: 22px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--base-color, #0b63f6), #4aa2ff);
    color: #fff;
}

.h5-login-head strong,
.h5-login-head span {
    display: block;
}

.h5-login-head strong {
    font-size: 22px;
}

.h5-login-head span {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    opacity: .9;
}

.h5-login-form {
    display: grid;
    gap: 12px;
    margin: 10px 12px;
    padding: 16px 12px;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    background: #fff;
}

.h5-login-form label {
    display: grid;
    gap: 7px;
    color: #303133;
    font-size: 13px;
}

.h5-login-form input {
    height: 42px;
    border: 1px solid #dbe3ef;
    border-radius: 6px;
    padding: 0 12px;
    background: #fff;
    color: #303133;
    font-size: 14px;
    outline: 0;
}

.h5-login-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 21px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-align: center;
}

.h5-login-form button:disabled {
    background: #9bbdfb;
}

.h5-login-form p,
.h5-login-notice {
    min-height: 18px;
    margin: 0;
    color: #d9304f;
    font-size: 12px;
    line-height: 1.5;
}

.h5-login-notice.success {
    color: #18a058;
}

.h5-login-links {
    margin-top: 10px;
}

.h5-auth-shell {
    min-height: 100vh;
    background: #fff;
}

.h5-auth-page {
    width: min(100vw, 375px);
    min-height: 100vh;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 77px 0 36px;
    background: #fff;
    color: #303133;
}

.h5-auth-login-page {
    padding-top: 104px;
}

.h5-auth-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.h5-auth-logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.h5-auth-logo-image {
    display: block;
    width: 150px;
    height: 45px;
    object-fit: contain;
}

.h5-auth-logo-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.h5-auth-header {
    width: 80%;
    margin: 58px auto 0;
}

.h5-auth-login-page .h5-auth-header {
    margin-top: 0;
}

.h5-auth-header strong {
    display: block;
    color: #222;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.h5-auth-header p {
    margin: 12px 0 0;
    color: #838383;
    font-size: 13px;
    line-height: 1.4;
}

.h5-auth-header button,
.h5-auth-inline-link,
.h5-auth-code,
.h5-auth-agreement button,
.h5-auth-mode button {
    border: 0;
    background: transparent;
    color: var(--base-color, #0b63f6);
    font: inherit;
    cursor: pointer;
}

.h5-auth-form {
    width: 80%;
    margin: 50px auto 0;
}

.h5-auth-login-page .h5-auth-form {
    margin-top: 50px;
}

.h5-auth-input {
    height: 30px;
    margin-top: 30px;
}

.h5-auth-field {
    display: flex;
    align-items: center;
    height: 30px;
    border-bottom: 1px solid #e6e6e6;
}

.h5-auth-field input {
    flex: 1;
    min-width: 0;
    height: 30px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #303133;
    font-size: 14px;
    line-height: 30px;
}

.h5-auth-field input::placeholder {
    color: #bfbfbf;
}

.h5-auth-area {
    margin-right: 10px;
    color: #303133;
    font-size: 14px;
}

.h5-auth-inline-link,
.h5-auth-code {
    flex: none;
    padding: 0;
    white-space: nowrap;
    color: #838383;
    font-size: 13px;
}

.h5-auth-code {
    color: var(--base-color, #0b63f6);
}

.h5-auth-code:disabled {
    color: #999;
    cursor: default;
}

.h5-auth-captcha {
    flex: none;
    width: 70px;
    height: 26px;
    object-fit: cover;
    cursor: pointer;
}

.h5-auth-mode {
    display: flex;
    justify-content: flex-end;
    min-height: 18px;
    margin-top: 22px;
    font-size: 13px;
}

.h5-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    padding: 0;
    margin: 47px 0 0;
    border: 1px solid var(--base-color, #0b63f6);
    border-radius: 23px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.h5-auth-submit:disabled {
    opacity: .7;
    cursor: default;
}

.h5-auth-agreement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 15px;
    color: #838383;
    font-size: 12px;
    line-height: 24px;
}

.h5-auth-agreement input {
    width: 13px;
    height: 13px;
    margin: 0 2px 0 0;
    accent-color: var(--base-color, #0b63f6);
}

.h5-auth-agreement button {
    padding: 0;
    font-size: 12px;
}

.h5-auth-error,
.h5-auth-notice {
    min-height: 18px;
    margin: 14px 0 0;
    color: #d9304f;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.h5-auth-notice.success {
    color: #18a058;
}

.h5-auth-index {
    padding-right: 22px;
    padding-left: 22px;
}

.h5-auth-index-logo {
    padding-top: 77px;
}

.h5-auth-index-desc {
    min-height: 17px;
    margin: 20px 0 0;
    color: #333;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
}

.h5-auth-index-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 90px;
}

.h5-auth-index-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 315px);
    height: 44px;
    padding: 0;
    border: 1px solid var(--base-color, #0b63f6);
    border-radius: 22px;
    background: #fff;
    color: var(--base-color, #0b63f6);
    font-size: 13px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.h5-auth-index-btn.is-primary {
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-auth-index-agreement {
    margin-top: 24px;
}

.h5-auth-index-footer {
    margin-top: 100px;
    color: #999;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.h5-auth-index-footer button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 15px auto 15px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    color: var(--base-color, #0b63f6);
    font-size: 0;
    line-height: 38px;
    cursor: pointer;
}

.h5-auth-account-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
}

.h5-auth-account-icon::before,
.h5-auth-account-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid currentColor;
}

.h5-auth-account-icon::before {
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
}

.h5-auth-account-icon::after {
    bottom: 0;
    width: 16px;
    height: 9px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 0;
}

.h5-auth-index-footer em {
    display: block;
    color: #838383;
    font-style: normal;
}

.h5-auth-back {
    position: fixed;
    top: 36px;
    left: max(12px, calc(50% - 203px));
    z-index: 2;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 28px;
    line-height: 28px;
    cursor: pointer;
}

.h5-auth-code-panel {
    margin-top: 34px;
}

.h5-auth-code-panel input {
    width: 100%;
    height: 44px;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    outline: 0;
    background: transparent;
    color: #303133;
    font-size: 22px;
    letter-spacing: 8px;
    text-align: center;
}

.h5-agreement-page {
    width: min(100vw, 430px);
    min-height: 100vh;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    color: #303133;
    font-size: 14px;
    line-height: 1.8;
}

.h5-agreement-content img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 390px) {
    .h5-auth-page {
        padding-right: 0;
        padding-left: 0;
    }

    .h5-auth-index {
        padding-right: 22px;
        padding-left: 22px;
    }

    .h5-auth-header,
    .h5-auth-form {
        width: 80%;
    }
}

.h5-cart-phone {
    padding-bottom: 64px;
}

.h5-cart-list {
    display: grid;
    gap: 10px;
    margin: 10px 12px;
}

.h5-cart-item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    background: #fff;
}

.h5-cart-item.invalid {
    opacity: .72;
}

.h5-cart-img {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    overflow: hidden;
    border-radius: 8px;
    background: #eef3fb;
    color: #9aa8ba;
    font-size: 12px;
}

.h5-cart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-cart-info {
    min-width: 0;
}

.h5-cart-info strong,
.h5-cart-info span,
.h5-cart-info small,
.h5-cart-info em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-cart-info strong {
    color: #1f2d3d;
    font-size: 14px;
    line-height: 1.4;
}

.h5-cart-info span,
.h5-cart-info small {
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
}

.h5-cart-info em {
    margin-top: 4px;
    color: #d9304f;
    font-size: 12px;
    font-style: normal;
}

.h5-cart-info p {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 0;
}

.h5-cart-info b {
    color: #ff1745;
    font-size: 16px;
}

.h5-cart-info i {
    color: #606b78;
    font-size: 12px;
    font-style: normal;
}

.h5-cart-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.h5-cart-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d8e1ef;
    border-radius: 15px;
    background: #fff;
    color: #303133;
    font-size: 12px;
}

.h5-cart-actions form {
    margin: 0;
}

.h5-cart-summary {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #edf0f5;
    background: #fff;
}

.h5-cart-phone.with-bottom-nav .h5-cart-summary {
    bottom: 54px;
}

.h5-cart-summary span {
    color: #606b78;
    font-size: 13px;
}

.h5-cart-summary strong {
    color: #ff1745;
    font-size: 18px;
}

.h5-cart-summary form {
    margin: 0;
}

.h5-cart-summary button {
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 17px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 13px;
}

/* H5 order and cart old mobile layout */
.h5-order-phone.with-bottom-nav,
.h5-cart-phone.with-bottom-nav {
    background: #f7f7f7;
}

.h5-order-phone.with-bottom-nav {
    padding-bottom: 112px;
}

.h5-order-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    background: #fff;
}

.h5-order-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 92px;
    padding: 0 18px;
    border: 1px solid var(--base-color, #0b63f6);
    color: var(--base-color, #0b63f6);
    font-size: 14px;
    text-decoration: none;
}

.h5-order-switch a:first-child {
    border-radius: 18px 0 0 18px;
}

.h5-order-switch a:last-child {
    border-left: 0;
    border-radius: 0 18px 18px 0;
}

.h5-order-switch a.active {
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-order-mini-search {
    position: static;
    z-index: 5;
    display: grid;
    gap: 8px;
    padding: 12px 12px 10px;
    background: #fff;
}

.h5-order-search-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    height: 38px;
    border-radius: 19px;
    background: #f2f4f8;
    overflow: hidden;
}

.h5-order-search-box input,
.h5-order-search-box button,
.h5-order-mobile-input {
    border: 0;
    background: transparent;
    color: #303133;
    font: inherit;
}

.h5-order-search-box input {
    min-width: 0;
    padding: 0 0 0 14px;
    font-size: 14px;
}

.h5-order-search-box button {
    height: 38px;
    color: #606b78;
    font-size: 20px;
}

.h5-order-mobile-input {
    width: 100%;
    height: 34px;
    padding: 0 14px;
    border-radius: 17px;
    background: #f2f4f8;
    box-sizing: border-box;
    font-size: 13px;
}

.h5-order-tabs {
    position: static;
    z-index: 4;
    display: flex;
    justify-content: space-around;
    height: 44px;
    border-radius: 0 0 12px 12px;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: none;
}

.h5-order-tabs::-webkit-scrollbar {
    display: none;
}

.h5-order-tabs a {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 0 5px;
    color: #303133;
    font-size: 14px;
    text-decoration: none;
}

.h5-order-tabs a.active {
    color: var(--base-color, #0b63f6);
    font-weight: 600;
}

.h5-order-tabs a.active::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(270deg, #9bc6ff 0%, var(--base-color, #0b63f6) 100%);
}

.h5-order-tabs em {
    margin-left: 3px;
    color: inherit;
    font-size: 11px;
    font-style: normal;
}

.h5-order-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 10px 0;
    color: #8b95a5;
    font-size: 13px;
}

.h5-order-filter-row label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 58px;
    border-radius: 15px;
    background: #fff;
    color: #303133;
    box-shadow: 0 1px 5px rgba(30, 45, 70, 0.08);
}

.h5-filter-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.h5-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 81;
    width: min(315px, 84vw);
    background: #fff;
    box-shadow: -8px 0 24px rgba(30, 45, 70, 0.18);
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

.h5-filter-toggle:checked + .h5-filter-mask {
    opacity: 1;
    pointer-events: auto;
}

.h5-filter-toggle:checked + .h5-filter-mask + .h5-filter-drawer {
    transform: translateX(0);
}

.h5-filter-drawer form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.h5-filter-drawer header,
.h5-filter-drawer footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eef1f6;
}

.h5-filter-drawer header strong {
    color: #606b78;
    font-size: 16px;
}

.h5-filter-drawer header label {
    color: #8b95a5;
    font-size: 22px;
}

.h5-filter-drawer section {
    padding: 14px 16px 0;
}

.h5-filter-drawer section h3 {
    margin: 0 0 10px;
    color: #303133;
    font-size: 14px;
    font-weight: 500;
}

.h5-filter-date {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.h5-filter-date span {
    height: 1px;
    background: #d8e1ef;
}

.h5-filter-input,
.h5-filter-date input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d8e1ef;
    border-radius: 3px;
    background: #fff;
    color: #303133;
    box-sizing: border-box;
    font: inherit;
    font-size: 13px;
}

.h5-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.h5-filter-tags label {
    display: inline-flex;
}

.h5-filter-tags input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.h5-filter-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #d8e1ef;
    border-radius: 15px;
    background: #fff;
    color: #606b78;
    box-sizing: border-box;
    font-size: 12px;
}

.h5-filter-tags label.active span {
    border-color: var(--base-color, #0b63f6);
    color: var(--base-color, #0b63f6);
    background: #eef5ff;
}

.h5-filter-drawer footer {
    margin-top: auto;
    border-top: 1px solid #eef1f6;
    border-bottom: 0;
}

.h5-filter-drawer footer a,
.h5-filter-drawer footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    height: 38px;
    border: 1px solid #d8e1ef;
    border-radius: 19px;
    background: #fff;
    color: #303133;
    font: inherit;
    font-size: 14px;
    text-decoration: none;
}

.h5-filter-drawer footer button {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-order-empty {
    margin-top: 18px;
}

.h5-order-list-cards {
    display: grid;
    gap: 10px;
    margin: 10px 10px 0;
}

.h5-order-list-card {
    border-radius: 0;
    background: #fff;
    overflow: hidden;
}

.h5-order-list-card header {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid #f2f2f2;
    color: #303133;
    font-size: 13px;
}

.h5-order-list-card header span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-order-list-card header em {
    flex: 0 0 auto;
    color: #606b78;
    font-size: 12px;
    font-style: normal;
}

.h5-order-list-card header strong {
    flex: 1 0 auto;
    color: #ff1745;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.h5-order-list-body {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    color: inherit;
    text-decoration: none;
}

.h5-order-list-img {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 0;
    background: #f3f6fb;
    color: #9aa8ba;
    font-size: 12px;
    overflow: hidden;
}

.h5-order-list-img img,
.h5-order-multi-goods img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-order-list-info {
    min-width: 0;
}

.h5-order-list-info strong {
    display: -webkit-box;
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-order-list-info em,
.h5-order-list-info small {
    display: block;
    margin-top: 5px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-order-multi-goods {
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.h5-order-multi-goods i {
    display: grid;
    place-items: center;
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border-radius: 0;
    background: #f3f6fb;
    color: #9aa8ba;
    font-size: 12px;
    font-style: normal;
    overflow: hidden;
}

.h5-order-multi-shade {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 22px;
    height: 70px;
}

.h5-order-multi-shade img {
    display: block;
    width: 100%;
    height: 100%;
}

.h5-order-list-card footer {
    padding: 10px 12px 12px;
    border-top: 1px solid #f0f2f5;
}

.h5-order-list-card footer p {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    color: #606b78;
    font-size: 12px;
}

.h5-order-list-card footer b {
    color: #303133;
    font-size: 13px;
}

.h5-order-list-card footer div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.h5-order-list-countdown {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-right: auto;
    color: #b5b6b9;
    font-size: 10px;
}

.h5-order-list-countdown img {
    width: 13px;
    height: 13px;
    margin-right: 3px;
}

.h5-order-list-countdown strong {
    margin-left: 3px;
    color: #ff4644;
    font-size: 10px;
    font-weight: 400;
}

.h5-order-list-card footer a,
.h5-order-page a,
.h5-order-list-card footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d8e1ef;
    border-radius: 15px;
    background: #fff;
    color: #303133;
    font: inherit;
    font-size: 12px;
    text-decoration: none;
}

.h5-order-list-card footer a.primary {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-order-inline-form {
    margin: 0;
}

.h5-order-inline-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d8e1ef;
    border-radius: 15px;
    background: #fff;
    color: #303133;
    font: inherit;
    font-size: 12px;
}

.h5-order-list-card footer button:disabled {
    color: #8b95a5;
    background: #f5f7fa;
}

.h5-order-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 18px;
    color: #606b78;
    font-size: 12px;
}

.h5-virtual-phone.with-bottom-nav {
    padding-bottom: 68px;
}

.h5-virtual-tabs {
    border-radius: 0;
}

.h5-virtual-list {
    display: grid;
    gap: 10px;
    margin: 10px;
}

.h5-virtual-card {
    overflow: hidden;
    background: #fff;
}

.h5-virtual-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid #f1f3f7;
}

.h5-virtual-card header span {
    color: #303133;
    font-size: 13px;
}

.h5-virtual-card header strong {
    color: var(--base-color, #0b63f6);
    font-size: 13px;
    font-weight: 600;
}

.h5-virtual-card.used header strong,
.h5-virtual-card.disabled header strong {
    color: #8b95a5;
}

.h5-virtual-body {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
}

.h5-virtual-info {
    min-width: 0;
}

.h5-virtual-info strong {
    display: -webkit-box;
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-virtual-info em,
.h5-virtual-info small {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-virtual-code {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 9px 10px;
    background: #f6f8fb;
}

.h5-virtual-code span,
.h5-virtual-code em {
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-virtual-code strong {
    overflow: hidden;
    color: #303133;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-virtual-media {
    display: grid;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 12px;
    border: 1px solid #edf1f6;
    background: #fff;
    text-align: center;
}

.h5-virtual-barcode {
    display: block;
    width: min(100%, 260px);
    height: 46px;
    margin: 0 auto;
    object-fit: contain;
}

.h5-virtual-qrcode {
    display: block;
    width: 112px;
    height: 112px;
    margin: 0 auto;
}

.h5-virtual-media p {
    margin: 0;
    color: #8b95a5;
    font-size: 12px;
}

.h5-virtual-cardinfo {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    margin: 0 12px 12px;
    padding: 10px;
    border: 1px solid #edf1f6;
    background: #fff;
}

.h5-virtual-cardinfo dt,
.h5-virtual-cardinfo dd {
    margin: 0;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
}

.h5-virtual-cardinfo dt {
    color: #8b95a5;
}

.h5-virtual-cardinfo dd {
    overflow-wrap: anywhere;
    color: #303133;
}

.h5-virtual-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 12px;
    border-top: 1px solid #f0f2f5;
}

.h5-virtual-card footer span {
    min-width: 0;
    overflow: hidden;
    color: #8b95a5;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-virtual-card footer a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d8e1ef;
    border-radius: 15px;
    color: #303133;
    font-size: 12px;
    text-decoration: none;
}

.h5-refund-list-card header strong {
    color: var(--base-color, #0b63f6);
}

.h5-refund-list-body {
    padding-bottom: 12px;
}

.h5-refund-list-card footer b {
    color: #ff1745;
}

.h5-refund-list-card footer div {
    flex-wrap: wrap;
}

.h5-refund-activist {
    background: #f7f7f7;
}

.h5-refund-activist .h5-status {
    background: #fff;
}

.h5-refund-activist .h5-order-mini-search {
    padding: 10px 12px 2px;
    background: #f7f7f7;
}

.h5-refund-activist-list {
    padding: 0 12px 18px;
}

.h5-refund-activist-card {
    margin-top: 10px;
    padding: 13px 12px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.h5-refund-activist-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 13px;
    border-bottom: 1px solid #f1f1f1;
    color: #303133;
    font-size: 12px;
}

.h5-refund-activist-card header strong {
    font-size: 12px;
    font-weight: 500;
}

.h5-refund-activist-card header strong.process,
.h5-refund-activist-card header strong.fail {
    color: var(--base-color, #0b63f6);
}

.h5-refund-activist-card header strong.success {
    color: #303133;
}

.h5-refund-activist-goods {
    display: flex;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid #f7f7f7;
    color: inherit;
}

.h5-refund-activist-img {
    flex: 0 0 85px;
    width: 85px;
    height: 85px;
    border-radius: 4px;
    background: #f3f7ff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa7b7;
    font-size: 12px;
}

.h5-refund-activist-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-refund-activist-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.h5-refund-activist-info > strong {
    color: #303133;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.h5-refund-activist-info > strong a {
    color: inherit;
    text-decoration: none;
}

.h5-refund-activist-info > span {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    color: var(--base-color, #0b63f6);
    font-size: 12px;
}

.h5-refund-activist-info b {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #303133;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.h5-refund-activist-info i {
    margin-top: 8px;
    color: #909399;
    font-style: normal;
}

.h5-refund-activist-card footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 13px;
}

.h5-refund-activist-card footer p {
    margin: 0;
    color: #606266;
    font-size: 12px;
}

.h5-refund-activist-card footer p span + span {
    margin-left: 8px;
}

.h5-refund-activist-card footer b {
    color: #ff1745;
    font-weight: 500;
}

.h5-refund-activist-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.h5-refund-activist-actions a,
.h5-refund-activist-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d8e1ef;
    border-radius: 15px;
    background: #fff;
    color: #303133;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
}

.h5-refund-activist-actions a.primary,
.h5-refund-activist-actions button.primary {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-evaluate-phone.with-bottom-nav {
    padding-bottom: 96px;
    background: #f7f7f7;
}

.h5-evaluate-tabs {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: none;
}

.h5-evaluate-tabs::-webkit-scrollbar {
    display: none;
}

.h5-evaluate-tabs a {
    flex: 0 0 auto;
    min-width: 72px;
    padding: 7px 14px;
    border-radius: 18px;
    background: #f0f0f0;
    color: #303133;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.h5-evaluate-tabs a.active {
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-evaluate-list {
    display: grid;
    gap: 10px;
    margin: 12px;
}

.h5-evaluate-card {
    padding: 12px;
    border-radius: 8px;
    background: #fff;
}

.h5-evaluate-card header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.h5-evaluate-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #edf3ff;
    color: var(--base-color, #0b63f6);
    font-size: 14px;
    overflow: hidden;
}

.h5-evaluate-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-evaluate-member {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.h5-evaluate-member strong {
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-evaluate-member em {
    color: #9aa4b2;
    font-size: 11px;
    font-style: normal;
    line-height: 1;
}

.h5-evaluate-card header i {
    color: #ffb400;
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0;
    white-space: nowrap;
}

.h5-evaluate-card p {
    margin: 12px 0 0;
    color: #303133;
    font-size: 14px;
    line-height: 1.65;
    word-break: break-word;
}

.h5-evaluate-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 10px;
}

.h5-evaluate-images a {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    background: #edf3fb;
    overflow: hidden;
}

.h5-evaluate-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-evaluate-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    color: #9aa4b2;
    font-size: 12px;
}

.h5-evaluate-reply {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    background: #f8f8f8;
    color: #303133;
    font-size: 13px;
    line-height: 1.55;
}

.h5-evaluate-reply strong {
    font-weight: 500;
}

.h5-evaluate-again {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f2f5;
}

.h5-evaluate-again > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--base-color, #0b63f6);
    font-size: 13px;
}

.h5-evaluate-again > div em {
    color: #9aa4b2;
    font-style: normal;
}

.h5-evaluate-empty {
    margin-top: 18px;
}

.h5-order-item-action {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 6px;
    padding: 2px 8px;
    border: 1px solid #ff9f1a;
    border-radius: 12px;
    color: #e87d00;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
}

.h5-order-meta-card p,
.h5-trace-card p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 0;
    color: #7b8794;
    font-size: 13px;
}

.h5-order-meta-card p b,
.h5-trace-card p b {
    color: #303133;
    font-weight: 400;
    text-align: right;
}

.h5-public-form {
    margin: 0;
}

.h5-refund-types {
    display: grid;
    gap: 8px;
}

.h5-refund-types label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 10px;
    border: 1px solid #e4e9f2;
    border-radius: 8px;
    background: #fff;
}

.h5-refund-types label.active {
    border-color: var(--base-color, #0b63f6);
    background: #f2f7ff;
}

.h5-refund-types input,
.h5-evaluate-types input,
.h5-evaluate-anonymous input {
    width: 14px;
    height: 14px;
    margin: 3px 0 0;
}

.h5-refund-types strong,
.h5-refund-types em {
    display: block;
    font-style: normal;
    line-height: 1.45;
}

.h5-refund-types strong {
    color: #1f2d3d;
    font-size: 13px;
}

.h5-refund-types em {
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
}

.h5-refund-option-card .h5-refund-types label {
    position: relative;
    min-height: 56px;
}

.h5-refund-type-select {
    display: grid;
    gap: 10px;
    margin: 10px 12px 0;
}

.h5-refund-type-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 12px;
    border-bottom: 1px solid #eef1f6;
    color: inherit;
    text-decoration: none;
}

.h5-refund-type-option:last-child {
    border-bottom: 0;
}

.h5-refund-type-option span,
.h5-refund-type-option strong,
.h5-refund-type-option em {
    display: block;
    min-width: 0;
}

.h5-refund-type-option strong {
    color: #303133;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.h5-refund-type-option em {
    margin-top: 4px;
    color: #909399;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
}

.h5-refund-type-option b {
    color: #b8c0cc;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.h5-refund-reason-field {
    cursor: pointer;
}

.h5-refund-reason-field em {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #606a78;
    font-style: normal;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-refund-reason-field em.is-placeholder {
    color: #9aa4b2;
}

.h5-refund-reason-field b {
    margin-left: 8px;
    color: #b8c0cc;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.h5-refund-reason-modal[hidden] {
    display: none;
}

.h5-refund-reason-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
}

.h5-refund-reason-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.h5-refund-reason-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 15px 15px;
    border-radius: 12px 12px 0 0;
    background: #fff;
}

.h5-refund-reason-sheet header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    border-bottom: 1px solid #f2f2f2;
}

.h5-refund-reason-sheet header strong {
    color: #303133;
    font-size: 15px;
}

.h5-refund-reason-sheet header button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8b95a5;
    font-size: 22px;
    line-height: 28px;
}

.h5-refund-reason-list {
    max-height: 50vh;
    overflow: auto;
}

.h5-refund-reason-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #f2f2f2;
    background: #fff;
    color: #303133;
    font-size: 14px;
    text-align: left;
}

.h5-refund-reason-list button b {
    color: var(--base-color, #0b63f6);
    font-size: 16px;
    font-weight: 400;
}

.h5-refund-reason-sheet > .h5-primary-link {
    display: block;
    width: 100%;
    margin-top: 12px;
}

.h5-refund-batch-count {
    margin: 10px 12px 0;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    color: #303133;
    font-size: 14px;
}

.h5-refund-batch-count strong {
    margin: 0 4px;
    color: var(--base-color, #0b63f6);
    font-size: 16px;
}

.h5-refund-batch-list {
    display: grid;
    gap: 10px;
    margin: 10px 12px 76px;
}

.h5-refund-batch-item {
    display: grid;
    grid-template-columns: 20px 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
}

.h5-refund-batch-item input,
.h5-refund-batch-bottom input {
    width: 15px;
    height: 15px;
    margin: 0;
}

.h5-refund-batch-item > span:last-child {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.h5-refund-batch-item strong {
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-refund-batch-item em,
.h5-refund-batch-item small {
    overflow: hidden;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-refund-batch-bottom {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border-top: 1px solid #edf0f5;
    background: rgba(255, 255, 255, 0.96);
}

.h5-refund-batch-bottom label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #303133;
    font-size: 14px;
}

.h5-refund-batch-bottom button {
    width: 108px;
}

.h5-upload-panel {
    margin-top: 12px;
}

.h5-upload-title {
    margin-bottom: 8px;
    color: #303133;
    font-size: 13px;
    font-weight: 500;
}

.h5-upload-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h5-upload-item,
.h5-upload-add {
    width: 72px;
    height: 72px;
    border-radius: 4px;
}

.h5-upload-item {
    position: relative;
    display: block;
    overflow: visible;
    background: #f5f7fb;
}

.h5-upload-item img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

.h5-upload-item button {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 16px;
    line-height: 18px;
}

.h5-upload-add {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px dashed #b8c0cc;
    background: #fff;
    color: #8b95a5;
}

.h5-upload-add strong {
    color: #606a78;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

.h5-upload-add em {
    margin-top: 6px;
    font-style: normal;
    font-size: 12px;
}

.h5-upload-panel p {
    margin: 8px 0 0;
    color: #8b95a5;
    font-size: 12px;
}

.h5-upload-panel p.error {
    color: #f43f3b;
}

.h5-refund-status {
    background: linear-gradient(135deg, #1677ff 0%, #4f8fff 100%);
}

.h5-refund-status small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.35;
}

.h5-refund-history-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 10px 0;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    color: #303133;
    font-size: 14px;
    text-decoration: none;
}

.h5-refund-history-link b {
    color: #b8c0cc;
    font-size: 20px;
    font-weight: 400;
}

.h5-refund-proof {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #edf0f5;
    color: #7b8794;
    font-size: 13px;
}

.h5-refund-proof > span {
    flex: 0 0 66px;
}

.h5-refund-proof > div {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 8px;
}

.h5-refund-proof a {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f7fb;
}

.h5-refund-proof img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-refund-log-card {
    display: grid;
    gap: 8px;
}

.h5-refund-address-card p {
    margin: 4px 0 0;
    color: #606a78;
    font-size: 13px;
    line-height: 1.55;
}

.h5-refund-delivery-actions {
    margin-top: 0;
}

.h5-refund-log {
    padding: 8px 0;
    border-top: 1px solid #edf0f5;
}

.h5-refund-log:first-of-type {
    border-top: 0;
}

.h5-refund-log strong,
.h5-refund-log span {
    display: block;
}

.h5-refund-log strong {
    color: #303133;
    font-size: 13px;
    font-weight: 500;
}

.h5-refund-log span {
    margin-top: 3px;
    color: #8b95a5;
    font-size: 12px;
}

.h5-refund-consult-page {
    display: grid;
    gap: 12px;
}

.h5-refund-consult-page .h5-refund-log {
    display: grid;
    gap: 3px;
    padding: 12px 0;
}

.h5-refund-consult-page .h5-refund-log small {
    color: #a0a8b5;
    font-size: 11px;
}

.h5-refund-history-actions {
    justify-content: center;
}

.h5-eval-section {
    margin-top: 10px;
    background: #f5f7fb;
}

.h5-eval-good {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 15px 15px 14px;
    background: #fff;
}

.h5-eval-good > span:nth-child(2) {
    min-width: 0;
}

.h5-eval-good strong,
.h5-eval-good em {
    display: block;
    line-height: 1.45;
}

.h5-eval-good strong {
    color: #303133;
    font-size: 14px;
    font-weight: 400;
}

.h5-eval-good em {
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-trace-goods-name {
    color: inherit;
    text-decoration: none;
}

.h5-eval-star {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #fff;
    color: #303133;
    font-size: 14px;
}

.h5-eval-star > span {
    font-weight: 600;
}

.h5-eval-star div {
    display: flex;
    gap: 2px;
}

.h5-eval-star button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c9d0da;
    font-size: 20px;
    line-height: 1;
}

.h5-eval-star button.active {
    color: #ffb400;
}

.h5-eval-star em {
    color: var(--base-color, #0b63f6);
    font-size: 12px;
    font-style: normal;
}

.h5-eval-text {
    position: relative;
    margin-top: 10px;
    padding: 14px 15px 18px;
    background: #fff;
}

.h5-eval-text textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 0;
    border: 0;
    resize: vertical;
    color: #303133;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
}

.h5-eval-text > small {
    position: absolute;
    top: 92px;
    right: 15px;
    color: #9aa4b2;
    font-size: 12px;
}

.h5-eval-upload {
    margin-top: 14px;
}

.h5-eval-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 35;
    display: flex;
    align-items: center;
    width: min(100vw, 375px);
    height: 54px;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 -2px 12px rgba(20, 31, 51, .08);
}

.h5-eval-bottom label {
    display: inline-flex;
    flex: 0 0 30%;
    gap: 6px;
    align-items: center;
    padding-left: 15px;
    color: #303133;
    font-size: 14px;
}

.h5-eval-bottom input {
    width: 14px;
    height: 14px;
}

.h5-eval-bottom button {
    flex: 1;
    height: 40px;
    margin: 0 12px 0 0;
    border: 0;
    border-radius: 4px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 15px;
}

.h5-evaluate-submit-form {
    padding-bottom: 68px;
}

.h5-trace-items {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #edf0f5;
}

.h5-trace-items span {
    color: #606a78;
    font-size: 13px;
    line-height: 1.45;
}

.h5-trace-tabs {
    position: sticky;
    top: 44px;
    z-index: 8;
    display: flex;
    overflow-x: auto;
    background: #fff;
    white-space: nowrap;
}

.h5-trace-tabs::-webkit-scrollbar {
    display: none;
}

.h5-trace-tabs button {
    flex: 0 0 auto;
    padding: 15px 12px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: #fff;
    color: #555;
    font-size: 15px;
}

.h5-trace-tabs button.active {
    border-bottom-color: var(--base-color, #0b63f6);
    color: var(--base-color, #0b63f6);
}

.h5-trace-panel {
    display: none;
    padding-bottom: 64px;
}

.h5-trace-panel.active {
    display: block;
}

.h5-trace-goods-card {
    padding: 15px;
}

.h5-trace-goods-card .h5-order-item + .h5-order-item {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f2f4f8;
}

.h5-trace-company-card {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
}

.h5-trace-company-logo {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
    background: #f5f7fb;
    color: #8b95a5;
    font-size: 13px;
    line-height: 60px;
    text-align: center;
}

.h5-trace-company-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.h5-trace-company-card > div {
    min-width: 0;
    flex: 1;
}

.h5-trace-company-card p {
    display: flex;
    align-items: center;
    margin: 5px 0;
    color: #303133;
    font-size: 13px;
    line-height: 1.45;
}

.h5-trace-company-card p b {
    color: #7b8794;
    font-weight: 400;
}

.h5-trace-company-card button {
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid #d8dee9;
    border-radius: 3px;
    background: #fff;
    color: #606a78;
    font-size: 12px;
}

.h5-trace-line-card {
    padding: 10px 15px;
}

.h5-trace-node {
    position: relative;
    display: flex;
    gap: 12px;
}

.h5-trace-node::after {
    position: absolute;
    top: 28px;
    bottom: -8px;
    left: 8px;
    width: 1px;
    background: #e5e7ec;
    content: "";
}

.h5-trace-node:last-child::after {
    display: none;
}

.h5-trace-node i {
    position: relative;
    z-index: 1;
    flex: 0 0 16px;
    width: 10px;
    height: 10px;
    margin-top: 19px;
    border-radius: 50%;
    background: #c9d0da;
}

.h5-trace-node.active i {
    background: var(--base-color, #0b63f6);
    box-shadow: 0 0 0 4px rgba(11, 99, 246, .12);
}

.h5-trace-node > div {
    flex: 1;
    padding: 12px 0;
}

.h5-trace-node strong,
.h5-trace-node span {
    display: block;
    line-height: 1.45;
}

.h5-trace-node strong {
    color: #606a78;
    font-size: 13px;
    font-weight: 400;
}

.h5-trace-node.active strong,
.h5-trace-node.active span {
    color: var(--base-color, #0b63f6);
}

.h5-trace-node span {
    margin-top: 6px;
    color: #9aa4b2;
    font-size: 12px;
}

.h5-trace-empty {
    padding: 26px 12px;
    color: #7b8794;
    font-size: 14px;
    text-align: center;
}

.h5-cart-phone {
    padding-bottom: 118px;
}

.h5-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 12px;
    color: #606b78;
    font-size: 13px;
}

.h5-cart-header button {
    border: 0;
    background: transparent;
    color: #606b78;
    font: inherit;
}

.h5-cart-list {
    display: grid;
    gap: 10px;
    margin: 0 12px 12px;
}

.h5-cart-store {
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.h5-cart-store-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid #f0f2f5;
    color: #303133;
    font-size: 13px;
}

.h5-cart-store-title i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #eef5ff;
    color: var(--base-color, #0b63f6);
    font-size: 11px;
    font-style: normal;
}

.h5-cart-store.invalid {
    opacity: .74;
}

.h5-cart-invalid-clear {
    margin-left: auto;
}

.h5-cart-invalid-clear button {
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--base-color, #0b63f6);
    font-size: 12px;
}

.h5-cart-store .h5-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 24px 90px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 14px 12px;
    border: 0;
    border-radius: 0;
    background: #fff;
}

.h5-cart-store .h5-cart-item + .h5-cart-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 46px;
    right: 12px;
    height: 1px;
    background: #f0f2f5;
}

.h5-cart-check,
.h5-cart-summary-check i {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    padding: 0;
    border: 1px solid #d0d8e6;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.h5-cart-check.active,
.h5-cart-summary-check.active i {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
}

.h5-cart-check.active::after,
.h5-cart-summary-check.active i::after {
    content: "";
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.h5-cart-check.disabled {
    background: #f2f4f8;
}

.h5-cart-store .h5-cart-img {
    width: 90px;
    height: 90px;
    border-radius: 6px;
}

.h5-cart-store .h5-cart-info strong {
    display: -webkit-box;
    color: #303133;
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-cart-store .h5-cart-info span {
    display: inline-flex;
    max-width: 100%;
    margin-top: 7px;
    padding: 3px 7px;
    border-radius: 4px;
    background: #f4f4f4;
    color: #666;
    font-size: 12px;
}

.h5-cart-sku-trigger {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-top: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.h5-cart-sku-trigger span,
.h5-cart-sku-static {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    margin: 0;
    padding: 3px 7px;
    border-radius: 4px;
    background: #f4f4f4;
    color: #666;
    font-size: 12px;
    line-height: 1.3;
    box-sizing: border-box;
}

.h5-cart-sku-trigger i {
    width: 0;
    height: 0;
    margin-left: -2px;
    border-top: 4px solid #999;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.h5-cart-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.h5-cart-price-row b {
    color: #ff1745;
    font-size: 17px;
}

.h5-cart-stepper {
    display: grid;
    grid-template-columns: 28px 38px 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 4px;
    background: #f5f6f8;
}

.h5-cart-stepper button,
.h5-cart-stepper input {
    width: 100%;
    height: 28px;
    border: 0;
    background: transparent;
    color: #303133;
    font: inherit;
    text-align: center;
}

.h5-cart-stepper button {
    font-size: 18px;
}

.h5-cart-stepper input {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    font-size: 12px;
}

.h5-cart-stepper input::-webkit-outer-spin-button,
.h5-cart-stepper input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.h5-cart-store .h5-cart-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.h5-cart-store .h5-cart-actions button {
    min-width: 66px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 12px;
}

.h5-cart-store .h5-cart-actions form {
    display: none;
}

.h5-cart-phone.is-editing .h5-cart-actions form,
.h5-cart-store.invalid .h5-cart-actions form {
    display: block;
}

.h5-cart-summary {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    max-width: 430px;
    min-height: 52px;
    padding: 8px 12px;
    transform: translateX(-50%);
    border-top: 0;
    background: #fff;
    box-sizing: border-box;
}

.h5-cart-phone.with-bottom-nav .h5-cart-summary {
    bottom: 54px;
}

.h5-cart-summary-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #606b78;
    font-size: 12px;
    line-height: 1;
}

.h5-cart-summary > span:nth-child(2) {
    justify-self: end;
    color: #303133;
    font-size: 13px;
}

.h5-cart-total-box {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.h5-cart-summary strong {
    color: #ff1745;
    font-size: 17px;
}

.h5-cart-total-box button {
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--base-color, #0b63f6);
    font-size: 11px;
}

.h5-cart-total-box button:disabled {
    color: #a8b2c2;
}

.h5-cart-summary > button,
.h5-cart-summary form button {
    min-width: 88px;
    height: 35px;
    padding: 0 16px;
    border: 0;
    border-radius: 18px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.h5-cart-summary > button:disabled {
    background: #c7d0df;
    color: #fff;
}

.h5-cart-summary form button:disabled {
    background: #c7d0df;
    color: #fff;
}

.h5-cart-sku-mask {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .42);
    opacity: 0;
    transition: opacity .16s ease;
}

.h5-cart-discount-mask {
    position: fixed;
    inset: 0;
    z-index: 58;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .38);
    opacity: 0;
    transition: opacity .16s ease;
}

.h5-cart-discount-mask.open {
    opacity: 1;
}

.h5-cart-discount-mask[hidden] {
    display: none;
}

.h5-cart-discount-panel {
    width: 100%;
    max-width: 430px;
    padding: 14px 14px 18px;
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform .18s ease;
}

.h5-cart-discount-mask.open .h5-cart-discount-panel {
    transform: translateY(0);
}

.h5-cart-discount-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
}

.h5-cart-discount-head strong {
    color: #303133;
    font-size: 15px;
}

.h5-cart-discount-head button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #f5f6f8;
    color: #606b78;
    font-size: 20px;
}

.h5-cart-discount-body {
    display: grid;
    gap: 12px;
    padding-top: 12px;
}

.h5-cart-discount-body div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #606b78;
    font-size: 13px;
}

.h5-cart-discount-body b {
    color: #303133;
    font-size: 14px;
}

.h5-cart-discount-body .total {
    padding-top: 12px;
    border-top: 1px solid #edf0f5;
    color: #303133;
}

.h5-cart-discount-body .total b {
    color: #ff1745;
    font-size: 17px;
}

.h5-cart-sku-mask.open {
    opacity: 1;
}

.h5-cart-sku-mask[hidden] {
    display: none;
}

.h5-cart-sku-panel {
    position: relative;
    width: 100%;
    max-width: 430px;
    max-height: min(78vh, 620px);
    padding: 16px 14px 74px;
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .18s ease;
}

.h5-cart-sku-mask.open .h5-cart-sku-panel {
    transform: translateY(0);
}

.h5-cart-sku-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #f5f6f8;
    color: #606b78;
    font-size: 20px;
    line-height: 28px;
}

.h5-cart-sku-head {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    min-height: 92px;
    padding-right: 34px;
}

.h5-cart-sku-thumb {
    width: 82px;
    height: 82px;
    border-radius: 8px;
    background: #f3f7ff;
    overflow: hidden;
}

.h5-cart-sku-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-cart-sku-thumb b {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #9aa7bc;
    font-size: 13px;
}

.h5-cart-sku-head strong {
    display: -webkit-box;
    color: #303133;
    font-size: 15px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.h5-cart-sku-head b {
    display: block;
    margin-top: 8px;
    color: #ff1745;
    font-size: 18px;
}

.h5-cart-sku-head span {
    display: block;
    margin-top: 4px;
    color: #7b8794;
    font-size: 12px;
}

.h5-cart-sku-body {
    margin-top: 16px;
}

.h5-cart-sku-body h3 {
    margin: 0 0 10px;
    color: #303133;
    font-size: 14px;
}

.h5-cart-sku-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.h5-cart-sku-options button {
    display: grid;
    gap: 3px;
    min-width: 96px;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: #f6f7f9;
    color: #303133;
    text-align: left;
}

.h5-cart-sku-options button.active {
    border-color: var(--base-color, #0b63f6);
    background: #eef5ff;
    color: var(--base-color, #0b63f6);
}

.h5-cart-sku-options button.disabled {
    opacity: .48;
}

.h5-cart-sku-options strong,
.h5-cart-sku-options span,
.h5-cart-sku-options em {
    display: block;
}

.h5-cart-sku-options strong {
    font-size: 13px;
    font-weight: 500;
}

.h5-cart-sku-options span {
    color: #ff1745;
    font-size: 12px;
}

.h5-cart-sku-options em {
    color: #98a3b3;
    font-size: 11px;
    font-style: normal;
}

.h5-cart-sku-footer {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 61;
    width: 100%;
    max-width: 430px;
    padding: 10px 14px;
    transform: translateX(-50%);
    background: #fff;
    box-sizing: border-box;
}

.h5-cart-sku-footer button {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 20px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.h5-cart-sku-footer button:disabled {
    background: #c7d0df;
}

.h5-payment-list {
    display: grid;
    gap: 10px;
    margin: 10px 12px 72px;
}

.h5-payment-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    background: #fff;
}

.h5-payment-logo {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f2f6ff;
    color: var(--base-color, #0b63f6);
    font-size: 14px;
    font-weight: 700;
}

.h5-payment-logo.balance {
    background: #fff4e5;
    color: #ff8a00;
    font-size: 15px;
}

.h5-payment-logo img {
    max-width: 28px;
    max-height: 28px;
}

.h5-payment-info strong,
.h5-payment-info em,
.h5-payment-info small {
    display: block;
}

.h5-payment-info strong {
    color: #1f2d3d;
    font-size: 14px;
}

.h5-payment-info em,
.h5-payment-info small {
    margin-top: 4px;
    color: #7b8794;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.h5-payment-qrcode {
    display: block;
    width: 92px;
    height: 92px;
    margin-top: 8px;
    border: 1px solid #edf0f5;
    object-fit: cover;
}

.h5-payment-card button {
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 17px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 13px;
}

.h5-payment-balance-row {
    width: 100%;
    border: 1px solid #e4e9f2;
    border-radius: 10px;
    color: inherit;
    font: inherit;
    text-align: left;
}

.h5-payment-balance-row .h5-switch-visual {
    justify-self: end;
}

.h5-payment-balance-row.active .h5-switch-visual {
    background: var(--base-color, #0b63f6);
}

.h5-payment-balance-row.active .h5-switch-visual::after {
    transform: translateX(18px);
}

.h5-payment-result {
    margin: 10px 12px;
    padding: 12px;
    border: 1px solid #cfe0ff;
    border-radius: 10px;
    background: #f4f8ff;
}

.h5-payment-result strong,
.h5-payment-result span {
    display: block;
    color: #24507f;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .standalone .h5-shell {
        min-height: 100vh;
        margin: -32px;
        padding: 0;
    }

    .h5-phone {
        width: 100%;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

body.h5-mobile-body {
    background: #edf1f7;
}

body.h5-mobile-body .standalone {
    padding: 0;
}

body.h5-mobile-body .standalone .h5-shell {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #edf1f7;
}

body.h5-mobile-body .h5-phone {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* H5 front page: render saved DIY data like the legacy mobile storefront. */
.standalone .h5-front-shell {
    min-height: 100vh;
    margin: -32px;
    padding: 0;
    background: #eef1f6;
}

body.h5-front-body .standalone {
    padding: 0;
}

body.h5-front-body .standalone .h5-front-shell {
    margin: 0;
}

.h5-real-phone {
    width: 100%;
    max-width: var(--old-diy-phone-width);
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-shadow: none;
}

body.h5-front-body .h5-real-phone,
body.h5-front-body .h5-bottom-nav-real {
    max-width: var(--old-diy-phone-width);
}

/* Keep every H5 route inside the same desktop phone window as the legacy app. */
@media (min-width: 481px) {
    body.h5-mobile-body .standalone .h5-phone:not(.h5-real-phone) {
        width: min(var(--old-diy-phone-width), calc(100vw - 24px));
        max-width: var(--old-diy-phone-width);
    }
}

.h5-native-nav {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 16px;
}

.h5-native-nav strong {
    max-width: 78%;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-front-diy {
    padding-bottom: 0;
}

.h5-front-diy.with-bottom-nav {
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

.h5-store-confirm-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, .42);
    box-sizing: border-box;
}

.h5-store-confirm-mask[hidden] {
    display: none;
}

.h5-store-confirm {
    width: min(100%, 360px);
    padding: 18px;
    border-radius: 10px;
    background: #fff;
    color: #202021;
    box-sizing: border-box;
}

.h5-store-confirm h3 {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 24px;
    text-align: center;
}

.h5-store-confirm-position {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-bottom: 14px;
    font-size: 12px;
}

.h5-store-confirm-position i {
    flex: 0 0 auto;
    color: #303133;
    font-style: normal;
    font-size: 16px;
}

.h5-store-confirm-position span {
    flex: 1;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-confirm-position button {
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    background: transparent;
    color: #fd463e;
    font: inherit;
    cursor: pointer;
}

.h5-store-confirm-position button:disabled {
    color: #a8abb2;
    cursor: wait;
}

.h5-store-confirm-card {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--base-color, #0b63f6);
    border-radius: 8px;
}

.h5-store-confirm-card em {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #fee9ea;
    color: #fd463e;
    font-size: 11px;
    font-style: normal;
}

.h5-store-confirm-card strong,
.h5-store-confirm-card p,
.h5-store-confirm-card small {
    display: block;
}

.h5-store-confirm-card strong {
    margin-bottom: 6px;
    font-size: 16px;
}

.h5-store-confirm-card p,
.h5-store-confirm-card small {
    margin: 0 0 6px;
    color: #5f6067;
    font-size: 12px;
    line-height: 18px;
}

.h5-store-confirm-card small:last-child,
.h5-store-confirm-card p:last-child {
    margin-bottom: 0;
}

.h5-store-confirm-card small.warning {
    color: #fd463e;
}

.h5-store-confirm-actions {
    display: grid;
    gap: 12px;
}

.h5-store-confirm-actions .primary {
    height: 38px;
    border: 0;
    border-radius: 19px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.h5-store-confirm-actions > a {
    color: #5e6066;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.h5-store-confirm-actions > a span {
    margin-left: 4px;
    font-size: 17px;
    font-weight: 400;
}

.h5-store-confirm-message {
    margin: 12px 0 0;
    color: #fd463e;
    font-size: 12px;
    text-align: center;
}

.h5-store-required-mask {
    position: fixed;
    inset: 0;
    z-index: 79;
    display: grid;
    align-items: end;
    background: rgba(0, 0, 0, .42);
}

.h5-store-required {
    width: min(100%, 480px);
    margin: 0 auto;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    background: #fff;
    color: #202021;
    box-sizing: border-box;
    text-align: center;
}

.h5-store-required h3 {
    margin: 0 0 12px;
    font-size: 18px;
}

.h5-store-required p {
    margin: 0 auto 18px;
    max-width: 320px;
    color: #999;
    font-size: 13px;
    line-height: 20px;
}

.h5-store-required .primary {
    display: block;
    height: 40px;
    border-radius: 20px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 14px;
    line-height: 40px;
}

.h5-diy-component {
    box-sizing: border-box;
}

.h5-search-box {
    padding: 10px 15px;
}

.h5-search-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 12px 0 18px;
    border-radius: 19px;
    box-sizing: border-box;
    color: #606266;
    font-size: 14px;
}

.h5-search-inner span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-search-inner i {
    flex: 0 0 auto;
    color: #303133;
    font-size: 20px;
    font-style: normal;
}

.h5-search-inner.search-style-3::after {
    content: "搜索";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 30px;
    margin-left: 8px;
    border-radius: 15px;
    background: #1f7cfe;
    color: #fff;
    font-size: 13px;
}

.h5-search-box.top-search {
    padding: 0;
}

.h5-search-box.top-search.position-fixed {
    position: sticky;
    top: 0;
    z-index: 30;
}

.h5-search-box.top-search .preview-box {
    box-sizing: border-box;
    padding: 0;
}

.h5-search-box.top-search .top-search-form {
    display: flex;
    align-items: center;
    height: 30px;
}

.h5-search-box.top-search .top-search-form > img {
    flex: 0 0 auto;
    max-width: 85px;
    height: 30px;
    margin-right: 10px;
    object-fit: contain;
}

.h5-search-box.top-search .top-search-form > .icon-box {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    overflow: hidden;
    font-size: 30px;
}

.h5-search-box.top-search .top-search-box {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    margin-top: -3px;
    overflow: hidden;
    padding: 0 38px 0 15px;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 30px;
}

.h5-search-box.top-search .top-search-box.border-circle {
    border-radius: 30px;
}

.h5-search-box.top-search .top-search-intro {
    display: block;
    min-width: 0;
    overflow: hidden;
    line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-search-box.top-search .top-search-icon {
    position: absolute;
    top: 50%;
    right: 6px;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    line-height: 30px;
    text-align: center;
}

.h5-search-box.top-search .top-search-icon i {
    font-size: 18px;
    font-style: normal;
}

.h5-search-box.top-search .preview-box-3 .top-search-form {
    height: 34px;
}

.h5-search-box.top-search .preview-box-3 .top-search-box {
    display: flex;
    align-items: center;
    height: 34px;
    margin-top: 0;
    padding: 0;
    line-height: 34px;
}

.h5-search-box.top-search .preview-box-3 .top-search-icon {
    position: static;
    width: auto;
    margin-top: 0;
    padding-left: 13px;
}

.h5-search-box.top-search .preview-box-3 .top-search-icon i {
    font-size: 16px;
}

.h5-search-box.top-search .preview-box-3 .top-search-intro {
    flex: 1 1 auto;
    margin-left: 7px;
    line-height: 34px;
}

.h5-search-box.top-search .preview-box-3 .top-search-btn {
    flex: 0 0 58px;
    height: 27px;
    margin: 1px 4px 0 8px;
    border-radius: 15px;
    color: #fff;
    font-size: 13px;
    line-height: 27px;
    text-align: center;
}

.h5-search-box.top-search .preview-box-3 .top-search-form > img,
.h5-search-box.top-search .preview-box-3 .top-search-form > .icon-box {
    margin-right: 0;
    margin-left: 12px;
}

.h5-search-box.top-search .preview-box-3 .top-search-logo-link {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    max-width: 85px;
    height: 30px;
    margin-left: 12px;
    overflow: hidden;
}

.h5-search-box.top-search .preview-box-3 .top-search-logo-link > img {
    display: block;
    width: auto;
    max-width: 85px;
    height: 30px;
    object-fit: contain;
}

.h5-search-box.top-search .preview-box-3 .top-search-logo-link > .icon-box {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    font-size: 30px;
}

.h5-top-category-real {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #fff;
}

.h5-top-category-real .top-category-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0 36px 0 12px;
    overflow-x: auto;
    box-sizing: border-box;
    scrollbar-width: none;
}

.h5-top-category-real .top-category-wrap::-webkit-scrollbar {
    display: none;
}

.h5-top-category-real .top-category-item {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    padding: 3px 10px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

.h5-top-category-real.preview-box-line .top-category-item {
    margin-right: 20px;
    padding: 3px 0;
}

.h5-top-category-real.preview-box-line .top-category-item .line {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    transform: translateX(-50%);
}

.h5-top-category-real .top-category-more {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 35px;
    background: inherit;
    font-size: 16px;
}

.h5-hot-area-real {
    position: relative;
    overflow: hidden;
}

.h5-hot-area-real img {
    display: block;
    width: 100%;
    height: auto;
}

.h5-hot-area-real a {
    position: absolute;
    display: block;
    font-size: 0;
}

.h5-video-real {
    overflow: hidden;
    background: #000;
}

.h5-video-real video {
    display: block;
    width: 100%;
    max-height: 260px;
    background: #000;
}

.h5-image-ads-real {
    position: relative;
    overflow: hidden;
}

.h5-image-ads-track {
    position: relative;
    width: 100%;
    min-height: 1px;
    overflow: hidden;
}

.h5-image-ads-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.h5-image-ads-slide.active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

.h5-image-ads-dots {
    position: absolute;
    right: 12px;
    bottom: 8px;
    left: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}

.h5-image-ads-dots.left {
    justify-content: flex-start;
}

.h5-image-ads-dots.center {
    justify-content: center;
}

.h5-image-ads-dots.right {
    justify-content: flex-end;
}

.h5-image-ads-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .52);
    pointer-events: auto;
}

.h5-image-ads-dots.line button {
    width: 9px;
    height: 3px;
    border-radius: 2px;
}

.h5-image-ads-dots.line button.active {
    width: 18px;
}

.h5-image-ads-dots.straightLine button {
    width: 12px;
    height: 4px;
    border-radius: 0;
}

.h5-image-ads-dots button.active {
    background: var(--indicator-color, #fff);
}

.h5-image-ads-real a,
.h5-rubik-real a {
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: inherit;
}

.h5-image-ads-real img {
    display: block;
    width: 100%;
    height: 100%;
}

.h5-rubik-real img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--fit, fill);
}

.h5-graphic-nav-real {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 10px 5px;
    overflow: hidden;
}

.h5-graphic-nav-real.pageSlide {
    display: block;
    padding-bottom: 18px;
}

.h5-graphic-nav-pages {
    width: 100%;
    overflow: hidden;
}

.h5-graphic-nav-page {
    display: none;
    flex-wrap: wrap;
    width: 100%;
}

.h5-graphic-nav-page.active {
    display: flex;
}

.h5-graphic-nav-dots {
    position: absolute;
    right: 0;
    bottom: 7px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.h5-graphic-nav-dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #dedede;
}

.h5-graphic-nav-dots.straightLine button {
    width: 12px;
    height: 3px;
    border-radius: 0;
}

.h5-graphic-nav-dots button.active {
    background: var(--base-color, #0b63f6);
}

.h5-graphic-nav-real.singleSlide {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.h5-graphic-nav-real.singleSlide::-webkit-scrollbar {
    display: none;
}

.h5-graphic-nav-real a {
    position: relative;
    display: flex;
    flex: 0 0 calc(100% / var(--cols));
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 7px 0;
    box-sizing: border-box;
}

.h5-graphic-nav-real.singleSlide a {
    flex: 0 0 calc(100% / var(--cols));
}

.h5-graphic-nav-real span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
    color: #fff;
    font-size: 40px;
}

.h5-graphic-nav-real span img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.h5-graphic-nav-real span i {
    font-family: "icondiy" !important;
    font-size: calc(var(--icon-size) * .62);
    font-style: normal;
    line-height: 1;
}

.h5-graphic-nav-real em {
    display: block;
    max-width: 100%;
    padding-top: 6px;
    padding-bottom: 0;
    overflow: hidden;
    color: var(--font-color);
    font-size: var(--font-size);
    font-weight: var(--font-weight, 400);
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.h5-graphic-nav-real.img a {
    gap: 0;
}

.h5-graphic-nav-real.text a {
    min-height: 32px;
    align-content: center;
}

.h5-graphic-tag {
    position: absolute;
    top: -5px;
    right: -12px;
    max-width: none;
    min-width: 0;
    height: auto;
    padding: 2px 6px;
    border-radius: 12px 12px 12px 0;
    font-size: 12px;
    font-style: normal;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    transform: scale(.8);
}

.h5-graphic-tag.text-alone {
    top: 0;
    right: 2px;
}

.h5-graphic-nav-real.quick {
    gap: 10px 4px;
    padding: 10px 8px;
}

.h5-quick-nav-real {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding: 5px 0;
    scrollbar-width: none;
}

.h5-quick-nav-real::-webkit-scrollbar {
    display: none;
}

.h5-quick-nav-real a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 30px;
    margin-right: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    box-sizing: border-box;
    font-size: 12px;
    white-space: nowrap;
}

.h5-quick-nav-real a:last-child {
    margin-right: 0;
}

.h5-quick-nav-real .quick-img {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    height: 20px;
    margin-right: 5px;
}

.h5-quick-nav-real .quick-img img {
    width: auto;
    height: 20px;
    max-width: 48px;
    object-fit: contain;
}

.h5-quick-nav-real .quick-img i {
    font-size: 30px;
    font-style: normal;
    line-height: 20px;
}

.h5-quick-nav-real .quick-text {
    display: block;
    max-width: 120px;
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-diy-nav-outer {
    overflow: visible;
}

.h5-rubik-real {
    display: block;
    overflow: hidden;
}

.h5-rubik-real ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.h5-rubik-real li {
    box-sizing: border-box;
    text-align: center;
}

.h5-rubik-real li a {
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.h5-rubik-real li img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.h5-rubik-real li.row1-of2 {
    width: 50%;
}

.h5-rubik-real li.row1-of3 {
    width: 33.33%;
}

.h5-rubik-real li.row1-of4 {
    width: 25%;
}

.h5-rubik-real li.row2-lt-of2-rt {
    display: inline-block;
    width: 50%;
}

.h5-rubik-real li.row1-tp-of2-bm:first-child {
    width: 100%;
}

.h5-rubik-real li.row1-tp-of2-bm:nth-child(2),
.h5-rubik-real li.row1-tp-of2-bm:nth-child(3) {
    width: 50%;
}

.h5-rubik-real ul .template-left,
.h5-rubik-real ul .template-right {
    width: 50%;
    box-sizing: border-box;
}

.h5-rubik-real ul .template-left li.row1-lt-of2-rt,
.h5-rubik-real ul .template-left li.row1-lt-of1-tp-of2-bm,
.h5-rubik-real ul .template-right li.row1-lt-of2-rt,
.h5-rubik-real ul .template-right .template-top li.row1-lt-of1-tp-of2-bm {
    width: 100%;
}

.h5-rubik-real ul .template-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.h5-rubik-real ul .template-bottom li {
    width: 50%;
    box-sizing: border-box;
}

.h5-brand-real {
    padding: 12px;
    color: #303133;
}

.h5-brand-real h2 {
    margin: 0 0 10px;
    color: #303133;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.h5-brand-real div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.h5-brand-real a {
    display: grid;
    min-width: 0;
    gap: 6px;
    justify-items: center;
    color: #303133;
    font-size: 12px;
}

.h5-brand-real span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 50%;
    background: #f1f5fb;
    color: var(--base-color, #0b63f6);
    font-weight: 700;
}

.h5-brand-real img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-brand-real em {
    max-width: 100%;
    overflow: hidden;
    color: #303133;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-title-real {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    gap: 8px;
}

.h5-title-real strong,
.h5-title-real .title-link {
    min-width: 0;
    line-height: 22px;
    color: #303133;
    text-decoration: none;
}

.h5-title-real .title-sub {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 10px;
}

.h5-title-real .title-sub i {
    font-size: 1em;
}

.h5-title-real .title-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 12px;
}

.h5-title-real .title-more i {
    font-style: normal;
    font-size: 16px;
    line-height: 1;
}

.h5-title-real.style-12,
.h5-title-real.style-16 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.h5-goods-section-real {
    overflow: hidden;
}

.h5-goods-section-real.goods-data .goods-list .goods-item {
    line-height: 1;
    overflow: hidden;
    box-sizing: border-box;
    color: #303133;
    text-decoration: none;
}

.h5-goods-section-real.goods-data .goods-list .goods-item .sale {
    align-self: flex-end;
    color: var(--goods-sale-color, #999ca7);
    font-size: 12px;
}

.h5-goods-section-real.goods-data .goods-list .goods-item .goods-name,
.h5-goods-section-real.goods-data .goods-list .goods-item strong {
    display: block;
    margin-bottom: 5px;
    overflow: hidden;
    color: var(--goods-name-color, #303133);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-section-real.goods-data .goods-list .goods-item.name-multiple .goods-name,
.h5-goods-section-real.goods-data .goods-list .goods-item.name-multiple strong {
    display: -webkit-box;
    min-height: 38px;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.h5-goods-section-real.goods-data .goods-list .goods-img,
.h5-goods-section-real.goods-data .goods-list .pic {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--goods-img-radius, 0);
    background: #eef5ff;
    color: #b8c5d8;
    font-size: 12px;
}

.h5-goods-section-real.goods-data .goods-list .goods-img img,
.h5-goods-section-real.goods-data .goods-list .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-goods-section-real.goods-data .goods-list .info-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.h5-goods-section-real.goods-data .goods-list .pro-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
    gap: 6px;
}

.h5-goods-section-real.goods-data .goods-list .discount-price {
    min-width: 0;
}

.h5-goods-section-real.goods-data .goods-list .price-wrap {
    display: flex;
    align-items: flex-end;
    color: var(--goods-price-color, #ff1544);
    font-weight: 700;
    line-height: 1;
}

.h5-goods-section-real.goods-data .goods-list .price-wrap .unit {
    font-size: 12px;
    line-height: 16px;
}

.h5-goods-section-real.goods-data .goods-list .price-wrap .price {
    font-size: 16px;
    line-height: 18px;
}

.h5-goods-section-real.goods-data .goods-list .delete-price {
    margin-top: 2px;
    color: #999ca7;
    font-size: 12px;
    line-height: 14px;
    text-decoration: line-through;
}

.h5-goods-section-real.goods-data .goods-list .info-wrap em {
    color: var(--goods-price-color, #ff1544);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}

.h5-goods-section-real.goods-data .goods-list .info-wrap em del {
    margin-left: 5px;
    color: #999ca7;
    font-size: 12px;
    font-weight: 400;
}

.h5-goods-section-real.goods-data .goods-list .info-wrap small {
    color: var(--goods-sale-color, #999ca7);
    font-size: 12px;
}

.h5-goods-section-real.goods-data .goods-list .tag-wrap {
    margin-bottom: 10px;
    line-height: 1;
}

.h5-goods-section-real.goods-data .goods-list .hollow-tag {
    display: inline-block;
    max-width: 100%;
    margin-right: 5px;
    padding: 1px 2px 0;
    border: 1px solid var(--goods-action-bg, #ff6a00);
    border-radius: 2px;
    box-sizing: border-box;
    color: var(--goods-action-bg, #ff6a00);
    font-size: 9px;
    line-height: 1.2;
}

.h5-goods-section-real.goods-data .goods-list .member-price-vip {
    display: block;
    width: 22px;
    height: auto;
    margin-left: 4px;
    object-fit: contain;
}

.h5-goods-section-real.goods-data .goods-list .goods-item.sale-hidden small {
    display: none;
}

.h5-goods-section-real.goods-data .goods-list .buy-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 42px;
    height: 26px;
    margin: 0;
    padding: 0 var(--goods-action-padding, 0px);
    border: 0;
    color: var(--goods-action-color, #fff);
    background: var(--goods-action-bg, #ff6a00);
    border-radius: var(--goods-action-radius, 25px);
    font-size: 12px;
    font-weight: var(--goods-action-font-weight, 400);
    font-style: normal;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
}

.h5-goods-section-real.goods-data .goods-list .shopping-cart-btn,
.h5-goods-section-real.goods-data .goods-list .plus-sign-btn {
    width: auto;
    height: auto;
    padding: 5px;
    border: 1px solid;
    border-radius: 50%;
    background: transparent;
    color: var(--goods-action-bg, #ff6a00);
    font-size: 18px;
    line-height: 1;
}

.h5-goods-section-real.goods-data .goods-list.row1-of1 .goods-item {
    display: flex;
    margin-bottom: 10px;
    padding: 8px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of1 .goods-item:last-of-type {
    margin-bottom: 0;
}

.h5-goods-section-real.goods-data .goods-list.row1-of1 .goods-img {
    flex: none;
    width: 130px;
    height: 130px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of1 .info-wrap {
    width: calc(100% - 130px);
    padding: 3px 0 5px 10px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of1 .pro-info {
    align-items: center;
}

.h5-goods-section-real.goods-data .goods-list.row1-of1 .discount-price {
    display: flex;
    flex-direction: column;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2 {
    display: flex;
    flex-wrap: wrap;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2 .goods-item {
    display: flex;
    flex-direction: column;
    width: calc(50% - 5px);
    margin-top: 10px;
    margin-right: 10px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2 .goods-item:nth-child(2n) {
    margin-right: 0;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2 .goods-item:nth-of-type(1),
.h5-goods-section-real.goods-data .goods-list.row1-of2 .goods-item:nth-of-type(2) {
    margin-top: 0;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2 .goods-img {
    width: calc(100% + 2px);
    height: 160px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2 .info-wrap {
    padding: 10px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of3 {
    display: flex;
    flex-wrap: wrap;
}

.h5-goods-section-real.goods-data .goods-list.row1-of3 .goods-item {
    display: flex;
    flex-direction: column;
    width: calc(33.33% - 6px);
    margin-top: 10px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of3 .goods-item:nth-child(3n-1) {
    margin-right: 9px;
    margin-left: 9px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of3 .goods-item:nth-of-type(1),
.h5-goods-section-real.goods-data .goods-list.row1-of3 .goods-item:nth-of-type(2),
.h5-goods-section-real.goods-data .goods-list.row1-of3 .goods-item:nth-of-type(3) {
    margin-top: 0;
}

.h5-goods-section-real.goods-data .goods-list.row1-of3 .goods-img {
    width: calc(100% + 2px);
    height: 110px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of3 .info-wrap {
    padding: 5px;
}

.h5-goods-section-real.goods-data .goods-list.horizontal-slide {
    margin: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.h5-goods-section-real.goods-data .goods-list.horizontal-slide::-webkit-scrollbar {
    display: none;
}

.h5-goods-section-real.goods-data .goods-list.horizontal-slide .goods-item {
    display: inline-flex;
    flex-direction: column;
    width: 97px;
    margin-right: var(--goods-slide-gap, 10px);
    margin-left: var(--goods-slide-gap, 10px);
    vertical-align: top;
}

.h5-goods-section-real.goods-data .goods-list.horizontal-slide.slide-slide {
    scroll-snap-type: x mandatory;
}

.h5-goods-section-real.goods-data .goods-list.horizontal-slide.slide-slide .goods-item {
    scroll-snap-align: start;
}

.h5-goods-section-real.goods-data .goods-list.horizontal-slide .goods-img {
    width: calc(100% + 2px);
    height: 100px;
}

.h5-goods-section-real.goods-data .goods-list.horizontal-slide .info-wrap {
    padding: 5px 10px;
}

.h5-goods-section-real.goods-data .goods-list.large-mode {
    display: block;
}

.h5-goods-section-real.goods-data .goods-list.large-mode .goods-item {
    width: 100%;
    margin-top: 10px;
}

.h5-goods-section-real.goods-data .goods-list.large-mode .goods-item:first-child {
    margin-top: 0;
}

.h5-goods-section-real.goods-data .goods-list.large-mode .goods-img {
    width: 101.5%;
    height: 160px;
}

.h5-goods-section-real.goods-data .goods-list.large-mode .info-wrap {
    padding: 10px 10px 25px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2.style-1 .pro-info .discount-price .price-wrap {
    display: inline-flex;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2.style-1 .pro-info .discount-price .delete-price {
    display: inline-block;
    margin-left: 5px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2.style-1 .pro-info .sale {
    margin-top: 5px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2.style-2 .pro-info {
    align-items: center;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2.style-2 .pro-info .discount-price {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2.style-2 .pro-info .sale {
    margin-top: 5px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of2.style-3 .pro-info .discount-price {
    display: flex;
    flex: 1;
    align-content: center;
    justify-content: space-between;
}

.h5-goods-section-real.goods-data .goods-list.row1-of3.style-1 .pro-info .delete-price {
    margin-left: 10px;
}

.h5-goods-section-real.goods-data .goods-list.row1-of3.style-2 .pro-info {
    flex-direction: row !important;
    align-items: center;
}

.h5-goods-section-real.goods-data .goods-list.row1-of3.style-2 .pro-info .discount-price {
    flex-direction: column;
    align-items: initial !important;
}

.h5-goods-section-real.goods-data .goods-list.horizontal-slide .discount-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.h5-goods-section-real.goods-data .goods-list.horizontal-slide .delete-price {
    flex-basis: 100%;
    align-self: flex-end;
}

.h5-goods-section-real.goods-data .goods-list.large-mode.style-1 .pro-info {
    align-items: center;
    margin-top: 5px;
    position: relative;
}

.h5-goods-section-real.goods-data .goods-list.large-mode.style-1 .pro-info .discount-price {
    display: flex;
    flex: 1;
    align-items: baseline;
}

.h5-goods-section-real.goods-data .goods-list.large-mode.style-1 .pro-info .discount-price .price-wrap {
    display: flex;
    align-items: baseline;
}

.h5-goods-section-real.goods-data .goods-list.large-mode.style-1 .pro-info .discount-price .delete-price {
    display: inline-block;
    margin-left: 5px;
}

.h5-goods-section-real.goods-data .goods-list.large-mode.style-1 .pro-info .sale {
    position: absolute;
    bottom: -15px;
    font-size: 12px;
}

.h5-goods-section-real.goods-recommend .top-wrap {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.h5-goods-section-real.goods-recommend .top-wrap > span:not(.line):not(.sub),
.h5-goods-section-real.goods-recommend .top-wrap > b,
.h5-goods-section-real.goods-recommend .top-wrap > small {
    display: none;
}

.h5-goods-section-real.goods-recommend .top-wrap i {
    width: 35px;
    height: 35px;
    margin-right: 5px;
    margin-left: 10px;
    border-radius: 50%;
    font-size: 25px;
    line-height: 35px;
    text-align: center;
}

.h5-goods-section-real.goods-recommend .top-wrap h3 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.h5-goods-section-real.goods-recommend .top-wrap .line {
    height: 14px;
    margin: 0 5px;
    border: 1px solid;
}

.h5-goods-section-real.goods-recommend .top-wrap .sub {
    font-size: 12px;
}

.h5-goods-section-real.goods-recommend .style-1 .goods-list,
.h5-goods-section-real.goods-recommend .style-3 .goods-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 10px;
    overflow: hidden;
}

.h5-goods-section-real.goods-recommend .style-2 {
    padding-bottom: 10px;
    background-repeat: round;
}

.h5-goods-section-real.goods-recommend .style-2 .goods-list {
    display: flex;
    margin: 0 5px;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.h5-goods-section-real.goods-recommend .style-1 .goods-item,
.h5-goods-section-real.goods-recommend .style-2 .goods-item,
.h5-goods-section-real.goods-recommend .style-3 .goods-item {
    display: flex;
    flex-direction: column;
    width: 100px;
    margin-top: 10px;
    background: #fff;
}

.h5-goods-section-real.goods-recommend .style-1 .goods-item:nth-of-type(1),
.h5-goods-section-real.goods-recommend .style-1 .goods-item:nth-of-type(2),
.h5-goods-section-real.goods-recommend .style-1 .goods-item:nth-of-type(3),
.h5-goods-section-real.goods-recommend .style-2 .goods-item:nth-of-type(1),
.h5-goods-section-real.goods-recommend .style-2 .goods-item:nth-of-type(2),
.h5-goods-section-real.goods-recommend .style-2 .goods-item:nth-of-type(3) {
    margin-top: 0;
}

.h5-goods-section-real.goods-recommend .style-1 .goods-img,
.h5-goods-section-real.goods-recommend .style-2 .goods-img,
.h5-goods-section-real.goods-recommend .style-3 .goods-img {
    width: calc(100% + 2px);
    height: 110px;
}

.h5-goods-section-real.goods-recommend .style-1 .info-wrap,
.h5-goods-section-real.goods-recommend .style-2 .info-wrap,
.h5-goods-section-real.goods-recommend .style-3 .info-wrap {
    margin: 5px;
    padding: 0;
}

.h5-goods-section-real.goods-recommend .style-1 .pro-info,
.h5-goods-section-real.goods-recommend .style-2 .pro-info {
    display: flex;
    align-items: normal;
    justify-content: space-between;
    gap: normal;
    margin-top: auto;
}

.h5-goods-section-real.goods-recommend .style-1 .discount-price,
.h5-goods-section-real.goods-recommend .style-2 .discount-price {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
}

.h5-goods-section-real.goods-recommend .style-3 {
    background-position: bottom;
}

.h5-goods-section-real.goods-recommend .style-3 .goods-item {
    background: transparent;
}

.h5-goods-section-real.goods-recommend .style-3 .goods-list {
    background: transparent !important;
}

.h5-goods-section-real.goods-recommend .style-3 .pro-info {
    display: block;
    margin-top: auto;
    text-align: center;
}

.h5-goods-section-real.goods-recommend .style-3 .label-wrap {
    position: relative;
    display: inline-block;
    margin: 5px 0;
    padding: 4px 8px 4px 26px;
    border-radius: 20px;
}

.h5-goods-section-real.goods-recommend .style-3 .label-wrap img {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 23px;
    height: 23px;
}

.h5-goods-section-real.goods-recommend .style-3 .label-wrap span {
    font-size: 12px;
}

.h5-goods-section-real.goods-recommend .goods-item > i.buy-btn,
.h5-goods-section-real.goods-recommend .goods-item > .h5-diy-goods-action {
    position: static;
    align-self: flex-end;
    margin-top: auto;
}

.h5-goods-section-real h2 {
    display: flex;
    align-items: center;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    gap: 6px;
    box-sizing: border-box;
    color: #303133;
    font-size: 16px;
}

.h5-goods-section-real h2 span {
    font-weight: 700;
}

.h5-goods-section-real h2 small {
    color: #999ca7;
    font-size: 12px;
    font-weight: 400;
}

.h5-goods-section-real h2 i {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 16px;
    font-style: normal;
}

.h5-goods-section-real h2 b {
    flex: 0 0 18px;
    height: 1px;
    background: currentColor;
    opacity: .18;
}

.h5-goods-section-real.GoodsRecommend h2 {
    height: auto;
    padding: 10px 0;
}

.h5-goods-section-real.GoodsRecommend h2 i {
    width: 35px;
    height: 35px;
    margin-left: 10px;
    margin-right: 5px;
    font-size: 25px;
    line-height: 35px;
}

.h5-goods-section-real.GoodsRecommend h2 span {
    font-size: 16px;
    font-weight: 700;
}

.h5-goods-section-real.GoodsRecommend h2 b {
    flex: 0 0 auto;
    width: 1px;
    height: 14px;
    margin: 0 5px;
    border-left: 1px solid currentColor;
    background: transparent;
    opacity: 1;
}

.h5-goods-section-real.GoodsRecommend h2 small {
    font-size: 12px;
}

.h5-many-goods-tabs-real {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    padding: 10px 0;
    background: #fff;
    scrollbar-width: none;
}

.h5-many-goods-tabs-real::-webkit-scrollbar {
    display: none;
}

.h5-many-goods-tabs-real a {
    position: relative;
    display: grid;
    flex: 0 0 25%;
    min-width: 78px;
    gap: 5px;
    justify-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    color: var(--many-title-color, #303133);
}

.h5-many-goods-tabs-real a + a::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 15px;
    background: #e5e5e5;
    content: "";
    transform: translateY(-50%);
}

.h5-many-goods-tabs-real span {
    max-width: 100%;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-many-goods-tabs-real em {
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    color: #999ca7;
    font-size: 12px;
    font-style: normal;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-many-goods-tabs-real .active span {
    font-weight: 700;
}

.h5-many-goods-tabs-real .active em {
    padding: 0 8px;
    background: #ff4544;
    color: #fff;
}

.h5-many-goods-panel-real[hidden] {
    display: none;
}

.h5-product-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.h5-product-cards.single {
    display: block;
}

.h5-product-cards.row1-of3 {
    display: flex;
    flex-wrap: wrap;
}

.h5-product-cards.horizontal-slide {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 10px;
    padding-bottom: 0;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.h5-product-cards.horizontal-slide::-webkit-scrollbar {
    display: none;
}

.h5-product-cards.horizontal-slide .h5-diy-goods {
    flex: 0 0 97px;
    width: 97px;
    margin-right: 10px;
    scroll-snap-align: start;
}

.h5-product-cards.large-mode {
    display: block;
}

.h5-diy-goods {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    color: #303133;
}

.h5-product-cards.single .h5-diy-goods {
    display: flex;
    margin-bottom: 10px;
    padding: 8px;
}

.h5-product-cards.large-mode .h5-diy-goods {
    width: 100%;
    margin-top: 10px;
    border-radius: 0;
}

.h5-product-cards.row1-of3 .h5-diy-goods .info,
.h5-product-cards.horizontal-slide .h5-diy-goods .info {
    padding: 7px 7px 9px;
}

.h5-product-cards.row1-of3 .h5-diy-goods strong,
.h5-product-cards.horizontal-slide .h5-diy-goods strong {
    font-size: 12px;
    line-height: 17px;
}

.h5-product-cards.row1-of3 .h5-diy-goods em,
.h5-product-cards.horizontal-slide .h5-diy-goods em {
    font-size: 14px;
}

.h5-product-cards.row1-of3 .h5-diy-goods > i,
.h5-product-cards.horizontal-slide .h5-diy-goods > i,
.h5-product-cards.row1-of3 .h5-diy-goods-action,
.h5-product-cards.horizontal-slide .h5-diy-goods-action {
    right: 6px;
    bottom: 7px;
    min-width: 32px;
    height: 20px;
    padding: 0 var(--goods-action-padding, 0px);
    font-size: 11px;
    line-height: 20px;
}

.h5-diy-goods .pic {
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--goods-img-radius, 0);
    background: #eef5ff;
    color: #b8c5d8;
    font-size: 12px;
}

.h5-diy-goods .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-product-cards.single .h5-diy-goods .pic {
    flex: none;
    width: 130px;
    height: 130px;
    aspect-ratio: auto;
}

.h5-product-cards.row1-of2 .h5-diy-goods {
    display: flex;
    flex-direction: column;
    width: calc(50% - 5px);
    margin-top: 10px;
    margin-right: 10px;
    box-sizing: border-box;
}

.h5-product-cards.row1-of2 .h5-diy-goods:nth-child(2n) {
    margin-right: 0;
}

.h5-product-cards.row1-of2 .h5-diy-goods:nth-child(1),
.h5-product-cards.row1-of2 .h5-diy-goods:nth-child(2) {
    margin-top: 0;
}

.h5-product-cards.row1-of2 .h5-diy-goods .pic {
    width: calc(100% + 2px);
    height: 160px;
    aspect-ratio: auto;
}

.h5-product-cards.row1-of2 .h5-diy-goods .info {
    flex: 1;
    padding: 10px;
}

.h5-product-cards.row1-of3 .h5-diy-goods {
    display: flex;
    flex-direction: column;
    width: calc(33.33% - 6px);
    margin-top: 10px;
    box-sizing: border-box;
}

.h5-product-cards.row1-of3 .h5-diy-goods:nth-child(3n-1) {
    margin-right: 9px;
    margin-left: 9px;
}

.h5-product-cards.row1-of3 .h5-diy-goods:nth-child(1),
.h5-product-cards.row1-of3 .h5-diy-goods:nth-child(2),
.h5-product-cards.row1-of3 .h5-diy-goods:nth-child(3) {
    margin-top: 0;
}

.h5-product-cards.row1-of3 .h5-diy-goods .pic {
    width: calc(100% + 2px);
    height: 110px;
    aspect-ratio: auto;
}

.h5-product-cards.row1-of3 .h5-diy-goods .info {
    flex: 1;
    padding: 5px;
}

.h5-product-cards.horizontal-slide .h5-diy-goods .pic {
    width: calc(100% + 2px);
    height: 100px;
    aspect-ratio: auto;
}

.h5-product-cards.horizontal-slide .h5-diy-goods .info {
    padding: 5px 10px;
}

.h5-product-cards.large-mode .h5-diy-goods:first-child {
    margin-top: 0;
}

.h5-product-cards.large-mode .h5-diy-goods .pic {
    width: 101.5%;
    height: 160px;
    aspect-ratio: auto;
}

.h5-product-cards.large-mode .h5-diy-goods .info {
    padding: 10px 10px 25px;
}

.h5-diy-goods .info {
    display: flex;
    flex-direction: column;
    padding: var(--goods-card-pad, 0px);
    gap: 0;
}

.h5-product-cards.single .h5-diy-goods .info {
    flex: 1;
    width: calc(100% - 130px);
    padding: 3px 0 5px 10px;
}

.h5-product-cards.single .h5-diy-goods.hide-action .info {
    padding-right: 0;
}

.h5-diy-goods strong {
    overflow: hidden;
    color: var(--goods-name-color, #303133);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}

.h5-diy-goods.name-multiple strong {
    display: -webkit-box;
    min-height: 38px;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.h5-diy-goods em {
    color: var(--goods-price-color, #ff1544);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}

.h5-diy-goods em del {
    margin-left: 5px;
    color: #999ca7;
    font-size: 12px;
    font-weight: 400;
}

.h5-diy-goods small {
    color: var(--goods-sale-color, #999ca7);
    font-size: 12px;
}

.h5-diy-goods.sale-hidden small {
    display: none;
}

.h5-diy-goods > i {
    position: absolute;
    right: 8px;
    bottom: 10px;
    min-width: 42px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--goods-action-radius, 12px);
    background: var(--goods-action-bg, #ff6a00);
    color: var(--goods-action-color, #fff);
    font-size: 12px;
    font-style: normal;
    line-height: 24px;
    text-align: center;
}

.h5-diy-goods-action {
    position: absolute;
    right: 8px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 42px;
    height: 24px;
    margin: 0;
    padding: 0 var(--goods-action-padding, 0px);
    border-radius: var(--goods-action-radius, 12px);
    background: var(--goods-action-bg, #ff6a00);
    color: var(--goods-action-color, #fff);
    font-size: 12px;
    font-weight: var(--goods-action-font-weight, 400);
    line-height: 1;
    text-align: center;
}

.h5-diy-goods-action button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
}

.h5-diy-goods > .h5-card-buy-icon-cart,
.h5-diy-goods > .h5-card-buy-icon-add,
.h5-diy-goods-action.h5-card-buy-icon-cart,
.h5-diy-goods-action.h5-card-buy-icon-add {
    display: flex;
    box-sizing: content-box;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    width: 18px;
    height: 18px;
    padding: 5px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--goods-action-bg, transparent);
    color: var(--goods-action-color, #ff6a00);
    font-size: 0;
    line-height: 18px;
}

.h5-diy-goods-action.h5-card-buy-icon-cart button,
.h5-diy-goods-action.h5-card-buy-icon-add button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0;
    line-height: 1;
}

.h5-diy-goods > .h5-card-buy-icon-cart i,
.h5-diy-goods > .h5-card-buy-icon-add i,
.h5-diy-goods-action.h5-card-buy-icon-cart i,
.h5-diy-goods-action.h5-card-buy-icon-add i {
    font-size: 18px;
    line-height: 18px;
}

.h5-diy-goods > .h5-card-buy-icon-diy,
.h5-diy-goods-action.h5-card-buy-icon-diy {
    display: flex;
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0 !important;
    border-radius: var(--goods-action-icon-radius, 0) !important;
    background: var(--goods-action-icon-bg, transparent);
    color: var(--goods-action-color, #ff6a00);
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 40px;
}

.h5-diy-goods-action.h5-card-buy-icon-diy i {
    line-height: 1;
}

.h5-diy-goods > .h5-card-buy-icon-diy img,
.h5-diy-goods-action.h5-card-buy-icon-diy img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.h5-goods-section-real.GoodsRecommend.style-1 .h5-product-cards,
.h5-goods-section-real.GoodsRecommend.style-3 .h5-product-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0 !important;
    margin: 0 10px;
    overflow: hidden;
}

.h5-goods-section-real.GoodsRecommend.style-2 {
    padding-bottom: 10px;
    background-repeat: round;
}

.h5-goods-section-real.GoodsRecommend.style-2 .h5-product-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0 !important;
    margin: 0 5px;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

.h5-goods-section-real.GoodsRecommend.style-1 .h5-diy-goods,
.h5-goods-section-real.GoodsRecommend.style-2 .h5-diy-goods,
.h5-goods-section-real.GoodsRecommend.style-3 .h5-diy-goods {
    display: flex;
    flex: 0 0 100px;
    flex-direction: column;
    width: 100px;
    margin-top: 10px;
    overflow: hidden;
    background: #fff;
}

.h5-goods-section-real.GoodsRecommend.style-3 .h5-diy-goods {
    background: transparent;
}

.h5-goods-section-real.GoodsRecommend .h5-product-cards.recommend-goods .h5-diy-goods {
    flex: 0 0 100px;
    width: 100px;
    max-width: 100px;
    min-width: 0;
    box-sizing: border-box;
}

.h5-goods-section-real.GoodsRecommend.style-1 .h5-diy-goods:nth-of-type(1),
.h5-goods-section-real.GoodsRecommend.style-1 .h5-diy-goods:nth-of-type(2),
.h5-goods-section-real.GoodsRecommend.style-1 .h5-diy-goods:nth-of-type(3),
.h5-goods-section-real.GoodsRecommend.style-2 .h5-diy-goods:nth-of-type(1),
.h5-goods-section-real.GoodsRecommend.style-2 .h5-diy-goods:nth-of-type(2),
.h5-goods-section-real.GoodsRecommend.style-2 .h5-diy-goods:nth-of-type(3) {
    margin-top: 0;
}

.h5-goods-section-real.GoodsRecommend.style-1 .h5-diy-goods .pic,
.h5-goods-section-real.GoodsRecommend.style-2 .h5-diy-goods .pic,
.h5-goods-section-real.GoodsRecommend.style-3 .h5-diy-goods .pic {
    width: calc(100% + 2px);
    height: 110px;
    aspect-ratio: auto;
}

.h5-goods-section-real.GoodsRecommend.style-1 .h5-diy-goods .info,
.h5-goods-section-real.GoodsRecommend.style-2 .h5-diy-goods .info,
.h5-goods-section-real.GoodsRecommend.style-3 .h5-diy-goods .info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    margin: 5px;
    padding: 0;
}

.h5-goods-section-real.GoodsRecommend.style-1 .h5-diy-goods em,
.h5-goods-section-real.GoodsRecommend.style-2 .h5-diy-goods em,
.h5-goods-section-real.GoodsRecommend.style-3 .h5-diy-goods em {
    font-size: 16px;
}

.h5-goods-section-real.GoodsRecommend .h5-product-cards.recommend-goods .h5-diy-goods strong {
    min-height: 18px;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
}

.h5-goods-section-real.GoodsRecommend.style-1 .h5-diy-goods > i,
.h5-goods-section-real.GoodsRecommend.style-2 .h5-diy-goods > i,
.h5-goods-section-real.GoodsRecommend.style-3 .h5-diy-goods > i,
.h5-goods-section-real.GoodsRecommend.style-1 .h5-diy-goods-action,
.h5-goods-section-real.GoodsRecommend.style-2 .h5-diy-goods-action,
.h5-goods-section-real.GoodsRecommend.style-3 .h5-diy-goods-action {
    position: static;
    align-self: flex-end;
    margin-top: auto;
}

.h5-notice-real,
.h5-promotion-empty {
    padding: 12px 14px;
    color: #303133;
}

.h5-notice-real {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 8px;
    overflow: hidden;
}

.h5-notice-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 80px;
    height: 20px;
    overflow: hidden;
}

.h5-notice-icon img {
    display: block;
    width: auto;
    max-width: 80px;
    height: 20px;
    object-fit: contain;
}

.h5-notice-icon i {
    font-size: 20px;
    font-style: normal;
    line-height: 20px;
}

.h5-notice-split {
    flex: 0 0 1px;
    width: 1px;
    height: 16px;
    background: #ededed;
}

.h5-notice-track {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: calc(var(--notice-size, 14px) * 1.5);
    overflow: hidden;
}

.h5-notice-item {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--notice-color, #303133) !important;
    font-size: var(--notice-size, 14px) !important;
    font-weight: var(--notice-weight, 400);
    line-height: 1.5;
    text-align: left;
}

.h5-notice-real.upDown .h5-notice-item {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .25s ease, transform .25s ease;
}

.h5-notice-real.upDown .h5-notice-item.active {
    opacity: 1;
    transform: translateY(0);
}

.h5-notice-real.horizontal .h5-notice-track {
    display: flex;
    align-items: center;
    overflow: visible;
    white-space: nowrap;
    will-change: transform;
}

.h5-notice-real.horizontal .h5-notice-item {
    display: block;
    flex: 0 0 auto;
    margin-right: 50px;
}

.h5-notice-real a {
    min-width: 0;
    overflow: hidden;
    color: #303133;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-notice-dialog[hidden] {
    display: none !important;
}

.h5-notice-dialog {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(0 0 0 / 45%);
}

.h5-notice-dialog-card {
    display: block;
    width: min(315px, 100%);
    padding: 0 15px 20px;
    border-radius: 4px;
    background: #fff;
    color: #303133;
}

.h5-notice-dialog-head {
    position: relative;
    display: block;
    height: 50px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    line-height: 50px;
    text-align: center;
}

.h5-notice-dialog-head strong {
    font-size: 16px;
    font-weight: 400;
}

.h5-notice-dialog-head button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #606266;
    font-size: 22px;
    line-height: 50px;
}

.h5-notice-dialog-content {
    display: block;
    max-height: 300px;
    overflow-y: auto;
    color: #303133;
    font-size: 14px;
    line-height: 1.7;
    white-space: normal;
}

.h5-notice-dialog-confirm {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 20px;
    border: 0;
    border-radius: 4px;
    background: var(--base-color, #ff4544);
    color: #fff;
    font-size: 15px;
}

.h5-store-real {
    display: block;
    padding: 0;
    color: #303133;
}

.h5-store-real-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 10px;
}

.h5-store-real-copy {
    flex: 1;
    min-width: 0;
}

.h5-store-real-copy > div {
    display: flex;
    align-items: center;
    min-width: 0;
}

.h5-store-real strong {
    display: block;
    min-width: 0;
    margin-right: 10px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-real p {
    margin: 10px 0 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-real a {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 20px;
    text-decoration: none;
}

.h5-store-real img {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    margin-left: 10px;
    border-radius: 50%;
    object-fit: cover;
}

.h5-store-label-real {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
}

.h5-store-label-real a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 5px 10px;
    border-radius: 14px;
    background: #eef5ff;
    color: var(--label-color);
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    line-height: 18px;
}

.h5-store-label-real i {
    flex: 0 0 auto;
    font-family: "icondiy" !important;
    font-size: 16px;
    font-style: normal;
    line-height: 1;
}

.h5-store-label-real span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-float-btn-real {
    position: fixed;
    z-index: 990;
    display: grid;
    gap: 10px;
}

.h5-float-btn-real a {
    display: grid;
    place-items: center;
    width: var(--float-size);
    height: var(--float-size);
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--base-color, #0b63f6);
}

.h5-float-btn-real img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.h5-float-btn-real i {
    font-family: "icondiy" !important;
    font-size: var(--float-size);
    font-style: normal;
    line-height: 1;
}

.h5-float-btn-real.position-1 {
    top: calc(50px + var(--float-offset));
    left: 15px;
}

.h5-float-btn-real.position-2 {
    top: calc(50px + var(--float-offset));
    right: 15px;
}

.h5-float-btn-real.position-3 {
    bottom: calc(80px + var(--float-offset) + env(safe-area-inset-bottom, 0px));
    left: 15px;
}

.h5-float-btn-real.position-4 {
    right: 15px;
    bottom: calc(80px + var(--float-offset) + env(safe-area-inset-bottom, 0px));
}

.h5-article-real {
    padding: 0;
    overflow: hidden;
    background: var(--article-component-bg, #fff);
}

.h5-diy-article-list {
    padding: 0;
    background: var(--article-component-bg, #fff);
}

.h5-diy-article-item {
    display: flex;
    min-width: 0;
    margin-top: 12px;
    padding: 10px;
    overflow: hidden;
    border-radius: var(--article-item-radius, 0);
    background: var(--article-item-bg, #fff);
    color: #303133;
    box-sizing: border-box;
}

.h5-diy-article-item:first-child {
    margin-top: 0;
}

.h5-diy-article-item.shadow {
    box-shadow: 0 0 5px var(--article-ornament-color, #ededed);
}

.h5-diy-article-item.stroke {
    border: 1px solid var(--article-ornament-color, #ededed);
}

.h5-diy-article-img {
    display: flex;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    margin-right: 10px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #eef3fb;
}

.h5-diy-article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-diy-article-info {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

.h5-diy-article-info strong {
    display: -webkit-box;
    overflow: hidden;
    color: #303133;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-diy-article-info small {
    display: flex;
    align-items: center;
    color: #999ca7;
    font-size: 12px;
    line-height: 1;
}

.h5-diy-article-info small i {
    width: 4px;
    height: 4px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--base-color, #0b63f6);
}

.h5-diy-article-info small em {
    margin-left: 10px;
    font-style: normal;
}

.h5-follow-real {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: #303133;
}

.h5-follow-real strong,
.h5-follow-real span {
    display: block;
}

.h5-follow-real strong {
    font-size: 15px;
    line-height: 20px;
}

.h5-follow-real span {
    margin-top: 4px;
    color: #909399;
    font-size: 12px;
    line-height: 18px;
}

.h5-follow-real img {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 4px;
    object-fit: cover;
}

.h5-line-real span {
    display: block;
    width: 100%;
    border-top-width: 1px;
}

.h5-promotion-empty,
.h5-diy-empty {
    display: grid;
    min-height: 72px;
    place-items: center;
    color: #999ca7;
    font-size: 13px;
}

.h5-category-real {
    min-height: calc(100vh - 54px);
    background: #fff;
}

.h5-category-search {
    position: sticky;
    top: 44px;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #edf0f5;
}

.h5-category-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e1e7f0;
    border-radius: 17px;
    background: #f6f8fb;
    color: #303133;
}

.h5-category-search button {
    height: 34px;
    border: 0;
    border-radius: 17px;
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-category-layout {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 540px;
}

.h5-category-layout nav {
    background: #f5f7fb;
}

.h5-category-layout nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 10px;
    border-left: 3px solid transparent;
    color: #303133;
    font-size: 13px;
}

.h5-category-layout nav a.active {
    border-left-color: var(--base-color, #0b63f6);
    background: #fff;
    color: var(--base-color, #0b63f6);
    font-weight: 700;
}

.h5-category-goods {
    padding: 10px;
    overflow: hidden;
    background: #fff;
}

.h5-category-goods .h5-product-cards {
    gap: 10px;
}

.h5-category-template-one {
    display: flex;
    min-height: calc(100vh - 54px);
    flex-direction: column;
    overflow: hidden;
}

.h5-category-template-one .h5-category-layout {
    flex: 1;
    min-height: 0;
}

.h5-category-template-one .h5-category-layout nav {
    overflow-y: auto;
}

.h5-category-template-one .h5-category-layout nav a {
    min-height: 52px;
    justify-content: center;
    border-left: 0;
    background: #f5f5f5;
    color: #222;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    word-break: break-all;
}

.h5-category-template-one .h5-category-layout nav a.active {
    position: relative;
    background: #fff;
    color: #333;
    font-weight: 700;
}

.h5-category-template-one .h5-category-layout nav a.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 18px;
    border-radius: 0 2px 2px 0;
    background: var(--base-color, #0b63f6);
    transform: translateY(-50%);
}

.h5-category-panel {
    min-width: 0;
    padding: 12px 12px 28px;
    overflow-y: auto;
    background: #fff;
}

.h5-category-adv {
    display: block;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f7fb;
}

.h5-category-adv img {
    display: block;
    width: 100%;
    height: auto;
}

.h5-category-title {
    margin: 8px 0 12px;
    color: #303133;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.h5-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
    margin-bottom: 18px;
}

.h5-category-card {
    display: grid;
    gap: 7px;
    justify-items: center;
    min-width: 0;
    color: #303133;
    text-align: center;
}

.h5-category-card span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 6px;
    background: #f6f8fb;
}

.h5-category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-category-card b {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #9aa6b8;
    font-size: 20px;
    font-weight: 700;
}

.h5-category-card em {
    display: block;
    width: 100%;
    min-height: 18px;
    padding-bottom: 1px;
    color: #303133;
    font-size: 12px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.h5-category-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    color: #999;
    font-size: 13px;
}

.h5-member-real {
    display: block;
    min-height: 0;
    padding: 0;
    container-type: inline-size;
    color: #fff;
    overflow: hidden;
}

.h5-member-profile-real {
    display: flex;
    align-items: center;
    gap: 2.6667cqw;
    padding: 5.8667cqw 4cqw;
}

.h5-member-avatar-real {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 16cqw;
    height: 16cqw;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
    color: #fff;
}

.h5-member-avatar-real img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-member-name-real {
    min-width: 0;
    flex: 1;
}

.h5-member-name-real strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-member-name-real strong {
    font-size: 5.0667cqw;
    font-weight: 600;
    line-height: 6.9333cqw;
}

.h5-member-level-real {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    height: 5.3333cqw;
    margin-top: 1.3333cqw;
    padding: 0 2.1333cqw;
    border-radius: .5333cqw;
    background: linear-gradient(107deg, #7c7878 0%, #201a18 100%);
    color: #f7c774;
    font-size: 3.2cqw;
    line-height: 5.3333cqw;
}

.h5-member-level-real > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-member-level-real .icondiy {
    margin-right: 1.3333cqw;
    font-size: 3.2cqw;
}

.h5-member-level-real.style-3 {
    height: 5.3333cqw;
    padding: 0;
    background: transparent;
}

.h5-member-level-real.style-3 img,
.h5-member-level-real.style-4 img {
    display: block;
    width: 5.3333cqw;
    height: auto;
}

.h5-member-level-real.style-3 span {
    height: 4.8cqw;
    margin-left: 1.3333cqw;
    padding: 0 2.6667cqw;
    border-radius: 4.8cqw 4.8cqw 4.8cqw 0;
    background: #f8cf9a;
    color: #8d4b16;
    font-weight: 700;
    line-height: 4.8cqw;
}

.h5-member-level-real.style-4 {
    height: auto;
    padding: 0;
    border-radius: 2.6667cqw;
    background: #474758;
}

.h5-member-level-real.style-4 span {
    padding: 0 2.6667cqw 0 .8cqw;
    color: #ddc095;
    line-height: 5.3333cqw;
}

.h5-member-setting-real {
    display: grid;
    place-items: center;
    width: 6.9333cqw;
    height: 6.9333cqw;
    color: rgba(255, 255, 255, .9);
}

.h5-member-setting-real span {
    font-size: 5.3333cqw;
}

.h5-member-account-real {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 var(--member-info-margin, 15px);
    padding: 5.3333cqw 0;
    color: #fff;
}

.h5-member-account-real a {
    display: grid;
    justify-items: center;
    gap: .8cqw;
    min-width: 0;
    color: inherit;
}

.h5-member-account-real a + a {
    border-left: 1px solid rgba(255, 255, 255, .26);
}

.h5-member-account-real strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 4.5333cqw;
    line-height: 5.8667cqw;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-member-account-real em {
    color: rgba(255, 255, 255, .82);
    font-size: 3.2cqw;
    font-style: normal;
    line-height: 4.5333cqw;
}

.h5-member-style4-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.h5-member-style4-actions a {
    min-width: 74px;
    height: 28px;
    padding: 0 11px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
}

.h5-member-orders-real {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 4cqw 0;
    container-type: inline-size;
}

.h5-member-orders-real a {
    display: grid;
    justify-items: center;
    gap: 1.0667cqw;
    min-width: 0;
    color: #303133;
}

.h5-member-orders-real i {
    display: grid;
    place-items: center;
    width: 8cqw;
    height: 8cqw;
    font-size: 8cqw;
    font-style: normal;
    position: relative;
}

.h5-member-orders-real i span {
    font-family: "icondiy" !important;
    line-height: 1;
}

.h5-member-orders-real i img,
.h5-member-orders-real .h5-member-order-shade {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 90%;
    height: 90%;
}

.h5-member-orders-real i img {
    z-index: 2;
    object-fit: contain;
}

.h5-member-orders-real .h5-member-order-shade {
    z-index: 1;
    background: var(--base-color, #F4391c);
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
}

.h5-member-orders-real i strong {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(46%, -34%);
    min-width: 4cqw;
    height: 4cqw;
    padding: 0 1.0667cqw;
    border-radius: 2.4cqw;
    background: var(--base-color, #F4391c);
    color: #fff;
    font-size: 2.6667cqw;
    font-weight: 400;
    line-height: 4cqw;
    text-align: center;
}

.h5-member-orders-real em {
    max-width: 100%;
    overflow: hidden;
    color: #303133;
    font-size: 3.4667cqw;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-bottom-nav-real {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: min(var(--old-diy-phone-width), 100vw);
    max-width: var(--old-diy-phone-width);
    min-height: 56px;
    transform: translateX(-50%);
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    padding: 0 0 constant(safe-area-inset-bottom);
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-top: 1px solid #f5f5f5;
    box-sizing: border-box;
}

.h5-bottom-nav-spacer {
    width: 100%;
    height: 56px;
    padding-bottom: 0;
    box-sizing: border-box;
    background: transparent;
}

.h5-bottom-nav-real a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 55px;
    padding-bottom: 5px;
    box-sizing: border-box;
    color: var(--normal);
    font-size: 12px;
    line-height: 1;
}

.h5-bottom-nav-item-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    text-align: center;
}

.h5-bottom-nav-real a.active {
    color: var(--active);
}

.h5-bottom-nav-real i {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    margin-top: 5px;
    color: currentColor;
    font-size: 20px;
    font-style: normal;
    line-height: 20px;
}

.h5-bottom-nav-real img {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
}

.h5-bottom-nav-real i span {
    font-family: "icondiy" !important;
    font-size: 20px;
    line-height: 20px;
}

.h5-bottom-nav-real .h5-bottom-nav-label {
    display: block;
    max-width: 100%;
    margin-top: 6px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-payment-shell {
    background: #f4f6fb;
}

.h5-payment-phone {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--base-color, #0b63f6) 0, var(--base-color, #0b63f6) 130px, #f4f6fb 130px, #f4f6fb 100%);
    padding-bottom: 0;
}

.h5-payment-status {
    background: var(--base-color, #0b63f6);
    border-bottom-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.h5-payment-status a,
.h5-payment-status strong {
    color: #fff;
}

.h5-payment-form {
    padding: 30px 0 0;
}

.h5-mobile-wrap,
.h5-site-wrap,
.h5-address-box,
.h5-store-box {
    margin: 10px 12px 0;
    background: #fff;
    box-sizing: border-box;
}

.h5-mobile-wrap,
.h5-site-wrap {
    padding: 14px 12px;
    border-radius: 8px;
}

.h5-mobile-tip {
    margin-bottom: 12px;
    padding: 9px 11px;
    border-radius: 6px;
    background: #eef5ff;
    color: var(--base-color, #0b63f6);
    font-size: 12px;
    line-height: 1.45;
}

.h5-delivery-mode {
    margin: 10px 12px 0;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: #cfe0ff;
}

.h5-delivery-action {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    background: #dcebff;
}

.h5-delivery-action label {
    position: relative;
    display: grid;
    place-items: center;
    height: 38px;
    margin: 0;
    color: #303133;
    font-size: 15px;
    cursor: pointer;
}

.h5-delivery-action label > span {
    position: relative;
    z-index: 3;
}

.h5-delivery-action label input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.h5-delivery-action label.active {
    border-radius: 8px 8px 0 0;
    background: #fff;
    color: var(--base-color, #0b63f6);
    font-weight: 400;
}

.h5-delivery-action label.active::before,
.h5-delivery-action label.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dcebff;
}

.h5-delivery-action label.active::before {
    left: 0;
    transform: translateX(-100%);
}

.h5-delivery-action label.active::after {
    right: 0;
    transform: translateX(100%);
}

.h5-delivery-action label.active i::before,
.h5-delivery-action label.active i::after {
    content: "";
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 10px;
    height: 10px;
    background: #fff;
}

.h5-delivery-action label.active i::before {
    left: 0;
    transform: translateX(-100%);
}

.h5-delivery-action label.active i::after {
    right: 0;
    transform: translateX(100%);
}

.h5-delivery-action label.disabled:not(.active) {
    color: #a3adbc;
    cursor: not-allowed;
}

.h5-delivery-action label.active.disabled {
    background: #fff;
    color: var(--base-color, #0b63f6);
    cursor: pointer;
}

.h5-address-box,
.h5-store-box {
    position: relative;
    overflow: hidden;
    padding: 15px 12px 18px;
    border-radius: 0 0 8px 8px;
}

.h5-address-box.not-delivery-type,
.h5-store-box.not-delivery-type {
    border-radius: 8px;
}

.h5-address-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    object-fit: cover;
}

.h5-local-store {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf0f5;
    color: #303133;
    font-size: 13px;
    line-height: 1.45;
}

.h5-local-store strong {
    color: var(--base-color, #0b63f6);
}

.h5-local-store em {
    display: block;
    margin-top: 3px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-local-store a,
.h5-local-store button,
.h5-store-info a,
.h5-store-info button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--base-color, #0b63f6);
    font: inherit;
    font-size: 12px;
}

.h5-store-switch-trigger i {
    color: #909399;
    font-style: normal;
}

.h5-address-summary {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 40px;
}

.h5-address-summary::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--base-color, #0b63f6);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-sizing: border-box;
}

.h5-address-summary > div {
    min-width: 0;
    flex: 1;
}

.h5-address-summary strong,
.h5-address-summary span {
    display: block;
}

.h5-address-summary strong {
    color: #303133;
    font-size: 14px;
}

.h5-address-summary span {
    margin-top: 3px;
    color: #606b78;
    font-size: 12px;
    line-height: 1.45;
}

.h5-address-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.h5-address-fields label,
.h5-payment-form-row,
.h5-store-time,
.h5-time-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.h5-address-fields label.wide {
    grid-column: 1 / -1;
    align-items: start;
}

.h5-address-fields span,
.h5-payment-form-row span,
.h5-store-time > span,
.h5-time-row > span,
.h5-buyer-message > span {
    color: #303133;
    font-size: 13px;
    font-weight: 700;
}

.h5-address-fields input,
.h5-address-fields textarea,
.h5-payment-form-row input,
.h5-store-time select,
.h5-time-row select,
.h5-buyer-message textarea,
.h5-payment-phone .h5-field input,
.h5-payment-phone .h5-field textarea,
.h5-payment-phone .h5-field select {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #303133;
    font: inherit;
    box-sizing: border-box;
}

.h5-address-fields input,
.h5-payment-form-row input,
.h5-store-time select,
.h5-time-row select,
.h5-payment-phone .h5-field input,
.h5-payment-phone .h5-field select {
    height: 34px;
    padding: 0 8px;
    border-bottom: 1px solid #edf0f5;
}

.h5-address-fields textarea,
.h5-buyer-message textarea,
.h5-payment-phone .h5-field textarea {
    padding: 8px;
    border: 1px solid #edf0f5;
    border-radius: 6px;
    resize: vertical;
}

.h5-time-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf0f5;
}

.h5-store-info {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 0;
    border-bottom: 0;
}

.h5-store-info div {
    min-width: 0;
    flex: 1;
}

.h5-store-info strong,
.h5-store-info em,
.h5-store-info span {
    display: block;
}

.h5-store-info strong {
    overflow: hidden;
    color: #303133;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-info em,
.h5-store-info span {
    margin-top: 4px;
    overflow: hidden;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-box .h5-payment-form-row,
.h5-store-box .h5-store-time {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
}

.h5-store-box .h5-payment-form-row {
    padding: 10px 0;
    border-top: 1px solid #f4f4f6;
}

.h5-store-box .h5-payment-form-row input {
    height: 24px;
    padding: 0;
    border-bottom: 0;
}

.h5-store-box .h5-store-time {
    min-height: 34px;
}

.h5-payment-form-row {
    margin-top: 10px;
}

.h5-store-time {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid #f4f4f6;
}

.h5-store-time em {
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-time-trigger {
    display: flex;
    min-width: 0;
    height: 34px;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #303133;
    font: inherit;
    text-align: right;
}

.h5-time-trigger em {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #303133;
    font-size: 13px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-time-trigger i,
.h5-order-cell i {
    color: #909399;
    font-style: normal;
}

.h5-order-goods-wrap {
    padding: 0;
}

.h5-site-body {
    padding: 0 12px;
}

.h5-payment-goods {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
}

.h5-payment-goods + .h5-payment-goods,
.h5-goods-form-block + .h5-payment-goods {
    border-top: 1px solid #edf0f5;
}

.h5-payment-goods-img {
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 4px;
    background: #eef3fb;
    color: #9aa8ba;
    font-size: 12px;
}

.h5-payment-goods-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-payment-goods-info {
    min-width: 0;
}

.h5-payment-goods-info strong,
.h5-payment-goods-info em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h5-payment-goods-info strong {
    color: #303133;
    font-size: 14px;
    line-height: 1.45;
}

.h5-payment-goods-info em {
    margin-top: 5px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
}

.h5-payment-goods-info div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 12px;
}

.h5-payment-goods-info b {
    color: #ff1745;
    font-size: 16px;
}

.h5-payment-goods-info span {
    color: #606b78;
    font-size: 13px;
}

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

.h5-order-cell {
    display: flex;
    min-height: 40px;
    align-items: center;
    background: #fff;
    color: #303133;
    line-height: 1.4;
}

.h5-order-cell > span {
    flex: 0 0 86px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
}

.h5-order-cell > button {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #303133;
    font: inherit;
    text-align: right;
}

.h5-order-cell em {
    min-width: 0;
    overflow: hidden;
    color: #606b78;
    font-size: 13px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-point-card {
    padding: 0 12px;
}

.h5-point-entry {
    min-height: 44px;
    gap: 12px;
}

.h5-point-entry > span {
    flex: 1 1 auto;
    color: #303133;
    font-weight: 400;
}

.h5-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.h5-switch-visual {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 20px;
    border-radius: 10px;
    background: #c9d1dd;
    transition: background .18s ease;
}

.h5-switch-visual::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .18s ease;
}

.h5-switch-input:checked + .h5-switch-visual {
    background: var(--base-color, #0b63f6);
}

.h5-switch-input:checked + .h5-switch-visual::after {
    transform: translateX(18px);
}

.h5-system-form-wrap h2 {
    margin: 0 0 10px;
    color: #303133;
    font-size: 14px;
}

.h5-amount-card p {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 0;
    color: #606b78;
    font-size: 13px;
}

.h5-amount-card p:first-child {
    margin-top: 0;
}

.h5-amount-card b {
    color: #303133;
}

.h5-delivery-message {
    display: block !important;
    color: #8b95a5 !important;
    line-height: 1.45;
}

.h5-payment-submit-block {
    height: calc(60px + env(safe-area-inset-bottom));
}

.h5-payment-submit {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(430px, 100vw);
    max-width: 430px;
    min-height: 50px;
    transform: translateX(-50%);
    padding: 0 15px calc(env(safe-area-inset-bottom));
    border-top: 0;
    background: #fff;
    box-sizing: border-box;
}

.h5-payment-submit div {
    min-width: 0;
    color: #303133;
    font-size: 13px;
}

.h5-payment-submit span {
    color: #8b95a5;
    margin-right: 6px;
}

.h5-payment-submit em {
    font-style: normal;
}

.h5-payment-submit strong {
    color: #ff1745;
    font-size: 20px;
}

.h5-payment-submit button {
    flex: 0 0 auto;
    width: 90px;
    height: 35px;
    border: 0;
    border-radius: 4px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.h5-payment-submit button:disabled {
    background: #c7d1df;
    color: #fff;
}

@media (min-width: 481px) {
    body.h5-mobile-body .h5-goods-action-bar,
    body.h5-mobile-body .h5-payment-submit {
        width: var(--old-diy-phone-width);
        max-width: var(--old-diy-phone-width);
    }
}

.h5-sheet[hidden] {
    display: none;
}

.h5-sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
}

.h5-sheet-mask {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
}

.h5-sheet-panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: 430px;
    max-height: 78vh;
    transform: translateX(-50%);
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-sizing: border-box;
}

.h5-sheet-panel header {
    position: relative;
    height: 50px;
    border-bottom: 1px solid #f0f2f7;
    text-align: center;
}

.h5-sheet-panel header strong {
    color: #303133;
    font-size: 15px;
    line-height: 50px;
}

.h5-sheet-panel header button {
    position: absolute;
    top: 0;
    right: 13px;
    height: 50px;
    border: 0;
    background: transparent;
    color: #909399;
    font-size: 22px;
}

.h5-time-sheet {
    height: min(390px, 78vh);
}

.h5-time-picker {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    height: calc(100% - 50px);
}

.h5-time-days {
    overflow-y: auto;
    background: #f8f8f8;
}

.h5-time-days button,
.h5-time-options button {
    width: 100%;
    border: 0;
    background: transparent;
    color: #303133;
    font: inherit;
    text-align: left;
}

.h5-time-days button {
    min-height: 52px;
    padding: 8px 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.35;
}

.h5-time-days button.active {
    background: #fff;
    color: var(--base-color, #0b63f6);
}

.h5-time-options {
    overflow-y: auto;
    padding: 0 16px;
}

.h5-time-options button {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    font-size: 13px;
}

.h5-time-options button[hidden] {
    display: none;
}

.h5-time-options button.active {
    color: var(--base-color, #0b63f6);
}

.h5-time-options i,
.h5-coupon-option i {
    visibility: hidden;
    color: var(--base-color, #0b63f6);
    font-style: normal;
}

.h5-time-options .active i,
.h5-coupon-option.active i {
    visibility: visible;
}

.h5-store-choice-sheet {
    max-height: 70vh;
}

.h5-store-choice-list {
    max-height: calc(70vh - 50px);
    overflow-y: auto;
    padding: 0 14px env(safe-area-inset-bottom);
    box-sizing: border-box;
}

.h5-store-choice {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #edf0f5;
    color: #303133;
}

.h5-store-choice:last-child {
    border-bottom: 0;
}

.h5-store-choice span {
    min-width: 0;
}

.h5-store-choice strong,
.h5-store-choice em,
.h5-store-choice small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-store-choice strong {
    font-size: 14px;
}

.h5-store-choice em,
.h5-store-choice small {
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-store-choice i {
    flex: 0 0 auto;
    color: #909399;
    font-style: normal;
}

.h5-store-choice.active strong,
.h5-store-choice.active i {
    color: var(--base-color, #0b63f6);
}

.h5-message-sheet {
    max-height: 58vh;
}

.h5-message-body {
    padding: 16px;
}

.h5-message-body textarea {
    width: 100%;
    min-height: 96px;
    padding: 10px;
    resize: vertical;
    border: 1px solid #edf0f5;
    border-radius: 6px;
    background: #f7f8fa;
    color: #303133;
    font: inherit;
    box-sizing: border-box;
}

.h5-message-sheet footer {
    padding: 0 16px 16px;
}

.h5-message-sheet footer button {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.h5-coupon-sheet-body {
    max-height: calc(78vh - 50px);
    overflow-y: auto;
    padding: 12px;
}

.h5-coupon-option {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fff;
    color: #303133;
    text-align: left;
    box-sizing: border-box;
}

.h5-coupon-option + .h5-coupon-option,
.h5-coupon-empty + .h5-coupon-option {
    margin-top: 10px;
}

.h5-coupon-option.active {
    border-color: var(--base-color, #0b63f6);
}

.h5-coupon-option.disabled {
    opacity: 0.48;
}

.h5-coupon-option span,
.h5-coupon-option em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-coupon-option span {
    color: #303133;
    font-size: 14px;
}

.h5-coupon-option em {
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-coupon-empty {
    padding: 30px 0;
    color: #909399;
    font-size: 13px;
    text-align: center;
}

.h5-pay-choice-sheet {
    top: 50%;
    bottom: auto;
    width: 75vw;
    max-width: 360px;
    max-height: 78vh;
    transform: translate(-50%, -50%);
    border-radius: 6px 6px 0 0;
}

.h5-pay-choice-body {
    max-height: calc(78vh - 100px);
    overflow-y: auto;
    padding: 0 0 10px;
}

.h5-pay-choice-summary {
    display: grid;
    gap: 4px;
    margin-top: 15px;
    padding: 10px 0 20px;
    background: #fff;
    font-weight: 700;
    text-align: center;
}

.h5-pay-choice-summary span {
    color: #909399;
    font-size: 12px;
}

.h5-pay-choice-summary strong {
    color: #ff4d25;
    font-size: 24px;
    line-height: 1.2;
}

.h5-pay-choice-summary em {
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-pay-choice-error {
    margin: 0 0 10px;
}

.h5-pay-choice-options {
    display: block;
}

.h5-pay-choice-option {
    display: flex;
    width: 100%;
    min-height: 45px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border: 0;
    border-bottom: 1px solid #edf0f5;
    border-radius: 0;
    background: #fff;
    color: #303133;
    font: inherit;
    text-align: left;
    box-sizing: border-box;
}

.h5-pay-choice-option:active {
    background: #f7f8fa;
}

.h5-pay-choice-text,
.h5-pay-choice-text strong,
.h5-pay-choice-option em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-pay-choice-text {
    flex: 1 1 auto;
}

.h5-pay-choice-icon {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: 50%;
    background: #f2f5fb;
    color: var(--base-color, #0b63f6);
    font-size: 13px;
    font-weight: 700;
}

.h5-pay-choice-icon.balance {
    background: #fff4e5;
    color: #ff8a00;
}

.h5-pay-choice-text strong {
    color: #303133;
    font-size: 14px;
}

.h5-pay-choice-text em {
    margin-top: 4px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-pay-choice-option i {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-left: 10px;
    border: 1px solid #dcdfe6;
    border-radius: 50%;
    background: #fff;
}

.h5-pay-choice-option.active i {
    border-color: var(--base-color, #0b63f6);
    box-shadow: inset 0 0 0 4px #fff;
    background: var(--base-color, #0b63f6);
}

.h5-pay-choice-balance .h5-switch-visual {
    flex: 0 0 auto;
    margin-left: 10px;
}

.h5-pay-choice-balance.active .h5-switch-visual {
    background: var(--base-color, #0b63f6);
}

.h5-pay-choice-balance.active .h5-switch-visual::after {
    transform: translateX(18px);
}

.h5-pay-choice-footer {
    height: 50px;
    padding: 10px 15px 0;
    box-sizing: border-box;
}

.h5-pay-choice-footer button {
    width: 100%;
    height: 36px;
    border: 0;
    border-radius: 4px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-style: normal;
}

.h5-pay-choice-footer button:disabled,
.h5-pay-choice-option:disabled {
    opacity: 0.58;
}

.h5-pay-choice-detail {
    display: block;
    margin-top: 14px;
    color: var(--base-color, #0b63f6);
    font-size: 13px;
    text-align: center;
}

.h5-offlinepay-phone {
    background: #f6f6f6;
}

.h5-offlinepay {
    min-height: 100%;
    padding: 10px 15px 92px;
    box-sizing: border-box;
    background: #f6f6f6;
}

.h5-offlinepay-info {
    padding: 20px 15px;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

.h5-offlinepay-info .title {
    color: #666;
    font-size: 12px;
    font-weight: 600;
    line-height: 17px;
}

.h5-offlinepay-info .pay-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: 3px;
    color: #ef000c;
}

.h5-offlinepay-info .pay-price span {
    font-size: 13px;
    font-weight: 700;
}

.h5-offlinepay-info .pay-price strong {
    font-size: 23px;
    line-height: 30px;
}

.h5-offlinepay-info .pay-time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    color: #666;
    font-size: 13px;
}

.h5-offlinepay-info .pay-time em {
    min-width: 52px;
    padding: 0 6px;
    border-radius: 2px;
    background: #f0f0f3;
    color: #333;
    font-style: normal;
    line-height: 18px;
}

.h5-offlinepay-type {
    margin-top: 20px;
}

.h5-offlinepay-tabs {
    display: flex;
    height: 40px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: #f1f2f5;
}

.h5-offlinepay-tabs button {
    width: 115px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #333;
    font-size: 16px;
}

.h5-offlinepay-tabs button.active {
    background: #fff;
    color: var(--base-color, #0b63f6);
    font-weight: 700;
}

.h5-offlinepay-bank {
    padding: 15px;
    border-radius: 0 0 8px 8px;
    background: #fff;
}

.h5-offlinepay-bank p {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding-top: 15px;
    color: #666;
    font-size: 13px;
    line-height: 18px;
}

.h5-offlinepay-bank p:first-child {
    padding-top: 0;
}

.h5-offlinepay-bank span {
    flex: 0 0 78px;
}

.h5-offlinepay-bank strong {
    flex: 1 1 auto;
    color: #333;
    font-weight: 500;
    word-break: break-all;
}

.h5-offlinepay-code {
    display: grid;
    justify-items: center;
    gap: 15px;
    padding: 25px 0;
    border-radius: 0 0 8px 8px;
    background: #fff;
}

.h5-offlinepay-code img,
.h5-offlinepay-code span {
    width: 180px;
    height: 180px;
    border: 1px solid #dedede;
    border-radius: 8px;
    box-sizing: border-box;
}

.h5-offlinepay-code img {
    padding: 15px;
    object-fit: contain;
}

.h5-offlinepay-code span {
    display: grid;
    place-items: center;
    color: #999;
    font-size: 13px;
}

.h5-offlinepay-code strong {
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.h5-offlinepay-form {
    margin-top: 10px;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
}

.h5-offlinepay-form h2 {
    margin: 0;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
}

.h5-offlinepay-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.h5-offlinepay-image {
    position: relative;
    width: 55px;
    height: 55px;
    border: 0;
    background: transparent;
    padding: 0;
}

.h5-offlinepay-image img {
    width: 55px;
    height: 55px;
    border-radius: 4px;
    object-fit: cover;
}

.h5-offlinepay-image span {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    line-height: 18px;
}

.h5-offlinepay-image.add {
    display: grid;
    place-items: center;
    border: 1px dashed #898989;
    color: #898989;
}

.h5-offlinepay-image.add strong {
    font-size: 24px;
    line-height: 1;
}

.h5-offlinepay-image.add em {
    font-size: 12px;
    font-style: normal;
    line-height: 1;
}

.h5-offlinepay-desc {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #898989;
}

.h5-offlinepay-desc textarea {
    width: 100%;
    min-height: 78px;
    border: 0;
    resize: vertical;
    color: #333;
    font-size: 12px;
    line-height: 20px;
    outline: none;
}

.h5-offlinepay-footer {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 30;
    width: min(430px, 100%);
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 15px calc(14px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: #f6f6f6;
}

.h5-offlinepay-footer button {
    height: 44px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
}

.h5-offlinepay-footer .back {
    flex: 0 0 110px;
    border: 1.5px solid var(--base-color, #0b63f6);
    background: #fff;
    color: var(--base-color, #0b63f6);
}

.h5-offlinepay-footer .save {
    flex: 1 1 auto;
    border: 0;
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-offlinepay-loading,
.h5-offlinepay-empty {
    padding: 30px 0;
    border-radius: 8px;
    background: #fff;
    color: #909399;
    font-size: 13px;
    text-align: center;
}

.h5-goods-coupon-entry {
    border-bottom: 0;
}

.h5-goods-coupon-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    font-style: normal;
}

.h5-goods-coupon-tags b {
    position: relative;
    flex: 0 0 auto;
    max-width: 116px;
    height: 20px;
    padding: 1px 8px;
    border: 1px solid #ff1745;
    border-radius: 3px;
    color: #ff1745;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-coupon-list {
    padding: 8px 12px 12px 52px;
    display: grid;
    gap: 8px;
}

.h5-goods-coupon-list form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #f0d8c7;
    background: #fff8f2;
}

.h5-goods-coupon-list strong {
    display: block;
    color: #ff4d25;
    font-size: 14px;
}

.h5-goods-coupon-list span,
.h5-goods-coupon-list em {
    display: block;
    color: #6b7280;
    font-size: 11px;
    font-style: normal;
    line-height: 1.45;
}

.h5-goods-coupon-list input,
.h5-coupon-select-row select {
    height: 34px;
    border: 1px solid #dbe3ef;
    background: #fff;
    padding: 0 8px;
    font-size: 12px;
    outline: none;
}

.h5-goods-coupon-list button {
    height: 34px;
    border: 0;
    background: #ff5a2f;
    color: #fff;
    font-size: 12px;
}

.h5-goods-coupon-list button:disabled {
    background: #c8ced8;
}

.h5-goods-coupon-sheet {
    height: min(400px, 78vh);
}

.h5-goods-coupon-sheet .h5-goods-coupon-list {
    padding: 0;
}

.h5-goods-coupon-sheet .h5-goods-coupon-list form {
    min-height: 95px;
    border-color: #ffe2da;
    border-radius: 4px;
    background: #fff7f5;
}

.h5-goods-coupon-sheet .h5-goods-login-link {
    height: 34px;
    border-radius: 2px;
    background: #ff5a2f;
    font-size: 12px;
}

.h5-coupon-notice,
.h5-coupon-message {
    margin: 0;
    padding: 0 12px 10px 52px;
    color: #7a8599;
    font-size: 12px;
}

.h5-coupon-notice.success {
    color: #0f9f6e;
}

.h5-coupon-notice.error {
    color: #e5484d;
}

.h5-coupon-message {
    padding: 0 0 10px;
}

.h5-coupon-message.success {
    color: #0f9f6e;
}

.h5-coupon-message.error {
    color: #e5484d;
}

.h5-coupon-card {
    padding: 12px;
}

.h5-coupon-select-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.h5-coupon-select-row span {
    color: #303133;
    font-size: 14px;
}

.h5-invoice-card {
    padding: 12px;
}

.h5-invoice-sheet {
    max-height: 83vh;
}

.h5-invoice-sheet-body {
    max-height: calc(83vh - 106px);
    overflow-y: auto;
    padding: 14px 16px 12px;
}

.h5-invoice-popup-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    color: #303133;
    font-size: 14px;
}

.h5-invoice-popup-row + .h5-invoice-popup-row {
    margin-top: 10px;
}

.h5-invoice-popup-row > span {
    color: #303133;
}

.h5-invoice-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.h5-invoice-options label {
    position: relative;
    display: inline-flex;
    min-width: 70px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe3ef;
    border-radius: 4px;
    background: #fff;
    color: #606b78;
    cursor: pointer;
}

.h5-invoice-options label.active {
    border-color: var(--base-color, #0b63f6);
    background: var(--base-color, #0b63f6);
    color: #fff;
}

.h5-invoice-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.h5-invoice-options em {
    font-style: normal;
}

.h5-invoice-content-options label {
    min-width: 82px;
}

.h5-invoice-form-row {
    align-items: start;
}

.h5-invoice-form-group {
    display: grid;
    gap: 8px;
}

.h5-invoice-form-group input {
    width: 100%;
    height: 36px;
    border: 1px solid #dbe3ef;
    border-radius: 4px;
    background: #fff;
    color: #303133;
    font-size: 14px;
    padding: 0 10px;
    outline: none;
    box-sizing: border-box;
}

.h5-invoice-sheet footer {
    padding: 0 16px 16px;
}

.h5-invoice-sheet footer button {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: var(--base-color, #0b63f6);
    color: #fff;
    font-size: 15px;
}

.h5-invoice-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 36px;
    color: #303133;
    font-size: 14px;
}

.h5-invoice-row span {
    color: #303133;
}

.h5-invoice-row input,
.h5-invoice-row select {
    width: 100%;
    height: 36px;
    border: 1px solid #dbe3ef;
    border-radius: 6px;
    background: #fff;
    color: #303133;
    font-size: 14px;
    padding: 0 10px;
    outline: none;
    box-sizing: border-box;
}

.h5-invoice-tip {
    margin: 0;
    color: #8a94a6;
    font-size: 12px;
    line-height: 1.5;
}

.h5-coupon-phone {
    background: #f5f6fa;
    padding-bottom: 64px;
}

.h5-coupon-tabs {
    height: 44px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
    border-bottom: 1px solid #eef1f6;
}

.h5-coupon-tabs.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h5-coupon-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #303133;
    font-size: 13px;
    text-decoration: none;
    position: relative;
}

.h5-coupon-tabs a.active {
    color: #ff4d25;
    font-weight: 600;
}

.h5-coupon-tabs a.active::after {
    content: "";
    width: 26px;
    height: 2px;
    background: #ff4d25;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.h5-coupon-mobile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #eef1f6;
}

.h5-coupon-mobile input,
.h5-coupon-receive-box input {
    height: 36px;
    border: 1px solid #dbe3ef;
    background: #fff;
    padding: 0 10px;
    color: #303133;
    font-size: 13px;
    outline: none;
}

.h5-coupon-mobile button,
.h5-coupon-receive-box button,
.h5-coupon-primary {
    min-height: 36px;
    border: 0;
    background: #ff4d25;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
}

.h5-coupon-mobile button {
    padding: 0;
}

.h5-coupon-toast {
    margin: 10px 12px 0;
    padding: 9px 10px;
    background: #eefaf5;
    color: #0f9f6e;
    font-size: 12px;
}

.h5-coupon-toast.error {
    background: #fff1f0;
    color: #e5484d;
}

.h5-coupon-listone {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.h5-coupon-listone .h5-coupon-card {
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    min-height: 104px;
    background: #fff7f2;
    border: 1px solid #ffd9c8;
    overflow: hidden;
}

.h5-coupon-listone .h5-coupon-card.disabled {
    background: #fff;
    border-color: #edf0f5;
    color: #9aa3b2;
}

.h5-coupon-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    color: inherit;
    text-decoration: none;
}

.h5-coupon-value {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ff4d25;
    border-right: 1px dashed rgba(255, 108, 64, .45);
}

.h5-coupon-card.disabled .h5-coupon-value {
    color: #a7afbd;
    border-right-color: #e5e8ef;
}

.h5-coupon-value strong {
    font-size: 24px;
    line-height: 1.1;
}

.h5-coupon-value em,
.h5-coupon-info i,
.h5-coupon-info small {
    font-style: normal;
    font-size: 11px;
    line-height: 1.5;
}

.h5-coupon-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px 10px;
}

.h5-coupon-info b {
    color: #303133;
    font-size: 14px;
    line-height: 1.4;
}

.h5-coupon-info i,
.h5-coupon-info small {
    color: #7a8599;
}

.h5-coupon-card.disabled .h5-coupon-info b,
.h5-coupon-card.disabled .h5-coupon-info i,
.h5-coupon-card.disabled .h5-coupon-info small {
    color: #a7afbd;
}

.h5-coupon-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.h5-coupon-action a,
.h5-coupon-action button {
    width: 56px;
    min-height: 32px;
    border: 0;
    border-radius: 16px;
    background: #ff4d25;
    color: #fff;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h5-coupon-action button:disabled {
    background: #c7d1df;
}

.h5-coupon-detail-card {
    margin: 12px;
    background: #fff7f2;
    border: 1px solid #ffd9c8;
}

.h5-coupon-detail-card.disabled {
    background: #fff;
    border-color: #edf0f5;
}

.h5-coupon-detail-top {
    padding: 20px 16px;
    color: #ff4d25;
    text-align: center;
    border-bottom: 1px dashed rgba(255, 108, 64, .45);
}

.h5-coupon-detail-top span {
    display: block;
    font-size: 34px;
    font-weight: 700;
}

.h5-coupon-detail-top strong {
    display: block;
    margin-top: 6px;
    color: #303133;
    font-size: 16px;
}

.h5-coupon-detail-top em {
    display: block;
    margin-top: 4px;
    color: #7a8599;
    font-style: normal;
    font-size: 12px;
}

.h5-coupon-detail-card dl {
    margin: 0;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    row-gap: 8px;
    font-size: 13px;
}

.h5-coupon-detail-card dt {
    color: #7a8599;
}

.h5-coupon-detail-card dd {
    margin: 0;
    color: #303133;
}

.h5-coupon-receive-box form {
    display: grid;
    gap: 10px;
}

.h5-coupon-receive-box label {
    display: grid;
    gap: 6px;
    color: #606b80;
    font-size: 12px;
}

.h5-coupon-primary {
    width: 100%;
    margin-top: 10px;
    border-radius: 18px;
}

.h5-coupon-primary:disabled {
    background: #c7d1df;
}

.h5-member-coupon-head {
    margin: 12px 12px 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #edf0f5;
}

.h5-member-coupon-head strong {
    display: block;
    color: #303133;
    font-size: 15px;
}

.h5-member-coupon-head span {
    display: block;
    margin-top: 4px;
    color: #7a8599;
    font-size: 12px;
}

@media (max-width: 768px) {
    .standalone .h5-front-shell {
        margin: 0;
        background: transparent;
    }

    .h5-real-phone {
        width: 100%;
        max-width: none;
    }

    body.h5-front-body .h5-real-phone,
    body.h5-front-body .h5-bottom-nav-real {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .h5-bottom-nav-real {
        width: 100%;
        max-width: none;
    }
}

.h5-goods-track-box {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f3f7;
}

.h5-goods-collect-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 8px;
    align-items: center;
}

.h5-goods-icon-form {
    display: block;
}

.h5-goods-login-form {
    grid-template-columns: minmax(0, 1fr);
}

.h5-goods-collect-form input,
.h5-member-track-search input {
    min-width: 0;
    height: 34px;
    border: 1px solid #d8dee9;
    border-radius: 17px;
    padding: 0 12px;
    background: #fff;
    color: #303133;
    font-size: 13px;
    outline: 0;
}

.h5-goods-collect-form:not(.h5-goods-icon-form) button,
.h5-goods-login-link,
.h5-member-track-search button,
.h5-member-track-batch button,
.h5-member-goods-delete button,
.h5-member-footprint-footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: 0;
    border-radius: 17px;
    background: #ff6a00;
    color: #fff;
    font-size: 13px;
}

.h5-goods-track-links {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 12px;
}

.h5-goods-track-links a {
    color: #7a8599;
    text-decoration: none;
}

.h5-goods-track-notice,
.h5-member-track-notice {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
}

.h5-goods-track-notice.success,
.h5-member-track-notice.success {
    background: #eef8f0;
    color: #1f8f45;
}

.h5-goods-track-notice.error,
.h5-member-track-notice.error {
    background: #fff0f0;
    color: #d72f2f;
}

.h5-member-goods-phone {
    background: #f5f6f8;
    padding-bottom: 64px;
}

.h5-member-track-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-bottom: 1px solid #edf0f5;
}

.h5-member-track-search button,
.h5-member-track-batch button,
.h5-member-footprint-footer button {
    background: #1189ff;
}

.h5-member-track-notice {
    margin: 10px 12px 0;
}

.h5-member-track-batch {
    display: flex;
    justify-content: flex-end;
    padding: 10px 12px 0;
}

.h5-member-track-batch button {
    min-width: 58px;
    background: #fff;
    color: #303133;
    border: 1px solid #d8dee9;
}

.h5-member-track-batch .danger,
.h5-member-footprint-footer button[type="submit"] {
    background: #ff4d4f;
    color: #fff;
    border-color: #ff4d4f;
}

.h5-member-track-empty {
    margin: 12px;
}

.h5-member-goods-list {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.h5-member-goods-list h2 {
    margin: 2px 0 0;
    color: #7a8599;
    font-size: 13px;
    font-weight: 500;
}

.h5-member-goods-card {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 104px;
    padding: 10px;
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 8px;
}

.h5-member-goods-check {
    align-self: center;
    padding: 0 2px 0 0;
}

.h5-member-goods-card:has(.h5-member-goods-check:not([hidden])) {
    grid-template-columns: 26px 92px minmax(0, 1fr) auto;
}

.h5-member-goods-check input {
    width: 16px;
    height: 16px;
}

.h5-member-goods-img {
    width: 92px;
    height: 92px;
    overflow: hidden;
    border-radius: 4px;
    background: #f0f5fb;
    color: #97a6ba;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.h5-member-goods-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-member-goods-info {
    min-width: 0;
    color: #303133;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.h5-member-goods-info strong {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.h5-member-goods-info em,
.h5-member-goods-info small {
    color: #7a8599;
    font-style: normal;
    font-size: 12px;
}

.h5-member-goods-info span {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.h5-member-goods-info b {
    color: #ff4d25;
    font-size: 16px;
}

.h5-member-goods-info del {
    color: #a7afbd;
    font-size: 12px;
}

.h5-member-goods-delete {
    align-self: end;
}

.h5-member-goods-delete button {
    min-width: 52px;
    height: 28px;
    background: #fff;
    color: #606b80;
    border: 1px solid #d8dee9;
}

.h5-member-footprint-footer {
    position: sticky;
    bottom: 58px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid #edf0f5;
}

.h5-member-track-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 2px 0 14px;
    color: #7a8599;
    font-size: 12px;
}

.h5-member-track-pages a {
    color: #1189ff;
    text-decoration: none;
}

.h5-member-track-pages a.disabled {
    color: #a7afbd;
    pointer-events: none;
}

.h5-address-phone {
    background: #f7f7f7;
    padding-bottom: 90px;
}

.h5-address-empty {
    min-height: calc(100vh - 190px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 30px 68px;
    box-sizing: border-box;
    text-align: center;
}

.h5-address-empty img {
    width: 50%;
    max-width: 210px;
    margin-bottom: 12px;
}

.h5-address-empty p {
    margin: 0;
    color: #999;
    font-size: 13px;
}

.h5-address-empty a {
    display: grid;
    place-items: center;
    width: 50%;
    min-width: 150px;
    height: 39px;
    margin-top: 25px;
    border-radius: 39px;
    background: #ff6a00;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
}

.h5-address-list {
    display: grid;
    gap: 10px;
    padding: 10px 0 0;
}

.h5-address-card {
    background: #fff;
    border-radius: 0;
    box-sizing: border-box;
}

.h5-address-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50px;
    align-items: stretch;
    min-height: 77px;
    padding: 12px 15px 0;
    box-sizing: border-box;
}

.h5-address-card-main button {
    width: 100%;
    border: 0;
    padding: 0 0 14px;
    background: #fff;
    color: #303133;
    text-align: left;
}

.h5-address-card-main strong,
.h5-address-card-main span {
    display: block;
}

.h5-address-card-main strong {
    display: flex;
    min-width: 0;
    align-items: center;
    color: #333;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

.h5-address-card-main em {
    margin-left: 13px;
    color: #333;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
}

.h5-address-card-main b {
    margin-left: auto;
    color: #f00;
    font-size: 12px;
    font-weight: 400;
}

.h5-address-card-main span {
    margin-top: 5px;
    color: #888;
    font-size: 13px;
    line-height: 20px;
}

.h5-address-edit {
    align-self: start;
    color: #999;
    font-size: 12px;
    line-height: 20px;
    text-align: right;
    text-decoration: none;
}

.h5-address-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin: 0 15px;
    border-top: 1px solid #ebedf0;
}

.h5-address-default-form button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #666;
    font-size: 12px;
}

.h5-address-default-form i {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 24px;
    background: #ededed;
    transform: scale(.7);
    transform-origin: left center;
}

.h5-address-default-form i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.h5-address-card.is-default .h5-address-default-form i {
    background: #ff6a00;
}

.h5-address-card.is-default .h5-address-default-form i::after {
    left: 22px;
}

.h5-address-delete-form button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: #f1f1f1;
    color: #606266;
    font-size: 18px;
    line-height: 1;
}

.h5-address-create-bar,
.h5-address-submit-bar {
    position: fixed;
    right: 50%;
    bottom: 0;
    z-index: 20;
    width: min(100%, 430px);
    transform: translateX(50%);
    padding: 15px 15px calc(15px + env(safe-area-inset-bottom));
    background: #fff;
    box-sizing: border-box;
}

.h5-address-create-bar a,
.h5-address-submit-bar button {
    display: grid;
    place-items: center;
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 40px;
    background: #ff6a00;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.h5-address-create-bar span {
    margin-right: 5px;
}

.h5-address-bottom-space,
.h5-address-form-bottom {
    height: 82px;
}

.h5-address-form {
    display: grid;
    gap: 0;
    padding: 0;
}

.h5-address-form-card,
.h5-address-identify {
    display: grid;
    gap: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 0;
}

.h5-address-form-title {
    min-height: 36px;
    display: flex;
    align-items: flex-end;
    padding: 10px 15px 5px;
    background: #f8f8f8;
    color: #999;
    font-size: 13px;
    box-sizing: border-box;
}

.h5-address-form-card label,
.h5-address-area-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 50px;
    margin: 0 15px;
    background: #fff;
    border-bottom: 1px solid #ebedf0;
    box-sizing: border-box;
}

.h5-address-form-card label:last-child,
.h5-address-form-card .h5-address-map-tip + label {
    border-bottom: 0;
}

.h5-address-form-card span,
.h5-address-area-row > span {
    color: #303133;
    font-size: 14px;
}

.h5-address-form-card i,
.h5-address-area-row i {
    margin-left: 5px;
    color: #ff4544;
    font-style: normal;
}

.h5-address-form-card input,
.h5-address-form-card textarea,
.h5-address-identify textarea {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #333;
    font-size: 14px;
    outline: 0;
    box-sizing: border-box;
}

.h5-address-form-card textarea {
    height: 70px;
    padding: 12px 0;
    line-height: 25px;
    resize: none;
}

.h5-address-area-row div,
.h5-address-location-inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.h5-address-location-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h5-address-area-row input,
.h5-address-location-inputs input {
    height: 34px;
    border: 1px solid #edf0f5;
    border-radius: 4px;
    padding: 0 8px;
    background: #fff;
}

.h5-address-picker-row button,
.h5-address-map-address-row button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: #333;
    font-size: 14px;
    text-align: left;
}

.h5-address-picker-row em,
.h5-address-map-address-row em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-style: normal;
}

.h5-address-location-icon,
.h5-address-map-address-row .iconyoujiantou {
    flex: 0 0 auto;
    margin-left: auto;
    color: #999;
    font-size: 17px;
    line-height: 1;
}

.h5-address-location-icon {
    color: #ff6a00;
    font-size: 19px;
}

.h5-address-picker-row button:disabled em,
.h5-address-map-address-row button:disabled em {
    color: #999;
}

.h5-address-map-tip {
    margin: 0 15px;
    padding: 8px 0 12px 84px;
    color: #999;
    font-size: 12px;
    line-height: 18px;
}

body.h5-map-open {
    overflow: hidden;
}

.h5-address-map-modal[hidden] {
    display: none;
}

.h5-address-map-modal {
    position: fixed;
    inset: 0 auto 0 50%;
    z-index: 80;
    width: min(100%, 430px);
    transform: translateX(-50%);
    background: #fff;
}

.h5-address-map-panel {
    display: grid;
    grid-template-rows: 50px 56px minmax(280px, 1fr) auto;
    width: 100%;
    height: 100%;
    background: #fff;
}

.h5-address-map-panel > header {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.h5-address-map-panel > header strong {
    color: #222;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
}

.h5-address-map-panel > header button {
    height: 50px;
    border: 0;
    background: transparent;
    color: #666;
    font-size: 14px;
}

.h5-address-map-panel > header button:last-child {
    color: #ff6a00;
}

.h5-address-map-panel > header button:disabled {
    color: #c8c9cc;
}

.h5-address-map-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 66px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    background: #f7f7f7;
}

.h5-address-map-search input {
    width: 100%;
    height: 38px;
    min-width: 0;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    padding: 0 12px;
    background: #fff;
    color: #333;
    font-size: 14px;
    outline: 0;
    box-sizing: border-box;
}

.h5-address-map-search button {
    height: 38px;
    border: 0;
    border-radius: 3px;
    background: #ff6a00;
    color: #fff;
    font-size: 14px;
}

.h5-address-map-canvas {
    min-height: 280px;
    background: #f2f4f7;
}

.h5-address-map-panel > footer {
    display: grid;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    background: #fff;
}

.h5-address-map-panel > footer button {
    justify-self: start;
    border: 0;
    padding: 0;
    background: transparent;
    color: #ff6a00;
    font-size: 14px;
}

.h5-address-map-panel > footer button .iconfont {
    margin-right: 5px;
    font-size: 17px;
}

.h5-address-map-panel > footer em {
    overflow: hidden;
    color: #666;
    font-size: 13px;
    font-style: normal;
    line-height: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-address-default-row input {
    width: 18px;
    height: 18px;
}

.h5-address-identify {
    margin-top: 10px;
}

.h5-address-identify-inner {
    margin: 0 15px 15px;
    padding: 15px;
    background: #fff;
}

.h5-address-identify span {
    display: block;
    margin: 0 0 8px;
    color: #7d5329;
    font-size: 12px;
    line-height: 18px;
}

.h5-address-identify textarea {
    min-height: 92px;
    border: 1px solid #ebedf0;
    border-radius: 15px;
    padding: 10px;
    resize: none;
}

.h5-address-identify button {
    float: right;
    min-width: 56px;
    height: 30px;
    margin-top: 8px;
    border: 0;
    border-radius: 15px;
    background: #ff6a00;
    color: #fff;
    font-size: 13px;
}

.h5-address-summary a {
    flex: 0 0 auto;
    color: var(--base-color, #0b63f6);
    font-size: 12px;
    text-decoration: none;
}

.h5-bank-phone {
    min-height: 100%;
    background: #f5f6f8;
    padding-bottom: 108px;
}

.h5-bank-search {
    position: sticky;
    top: 45px;
    z-index: 5;
}

.h5-bank-empty {
    min-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 92px;
    color: #8b95a5;
    text-align: center;
    box-sizing: border-box;
}

.h5-bank-empty img {
    width: 50%;
    max-width: 210px;
    margin-bottom: 18px;
}

.h5-bank-empty strong {
    color: #303133;
    font-size: 15px;
    font-weight: 500;
}

.h5-bank-empty span {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
}

.h5-bank-empty a {
    display: grid;
    place-items: center;
    min-width: 128px;
    height: 38px;
    margin-top: 18px;
    border-radius: 19px;
    background: #ff6a00;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

.h5-bank-list {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.h5-bank-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 8px;
}

.h5-bank-card.is-default {
    border-color: #ffd4b2;
}

.h5-bank-card-main {
    padding: 13px 12px 10px;
}

.h5-bank-card-top,
.h5-bank-card-user,
.h5-bank-card-bottom,
.h5-bank-default {
    display: flex;
    align-items: center;
}

.h5-bank-card-top {
    justify-content: space-between;
}

.h5-bank-card-top strong {
    color: #303133;
    font-size: 15px;
    font-weight: 500;
}

.h5-bank-card-top a {
    color: #606b80;
    font-size: 13px;
    text-decoration: none;
}

.h5-bank-card-user {
    gap: 12px;
    margin-top: 9px;
    color: #303133;
    font-size: 14px;
}

.h5-bank-card-user em {
    color: #606b80;
    font-style: normal;
}

.h5-bank-card-extra {
    margin-top: 7px;
    color: #8b95a5;
    font-size: 13px;
    line-height: 1.45;
}

.h5-bank-card-bottom {
    justify-content: space-between;
    min-height: 40px;
    padding: 0 12px;
    border-top: 1px solid #edf0f5;
}

.h5-bank-card-bottom form {
    margin: 0;
}

.h5-bank-default {
    gap: 8px;
    border: 0;
    background: transparent;
    color: #606b80;
    font-size: 13px;
}

.h5-bank-default i {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #c8d0dc;
    transition: background .18s ease;
}

.h5-bank-default i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
    transition: transform .18s ease;
}

.h5-bank-default.active i {
    background: #ff6a00;
}

.h5-bank-default.active i::after {
    transform: translateX(16px);
}

.h5-bank-delete {
    border: 0;
    background: transparent;
    color: #606b80;
    font-size: 13px;
}

.h5-bank-form {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.h5-bank-form-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 8px;
}

.h5-bank-form-card label {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 49px;
    padding: 0 12px;
    border-bottom: 1px solid #f1f3f7;
    box-sizing: border-box;
}

.h5-bank-form-card label:last-child,
.h5-bank-form-card label[hidden] + label:last-child {
    border-bottom: 0;
}

.h5-bank-form-card label[hidden] {
    display: none;
}

.h5-bank-form-card span {
    color: #303133;
    font-size: 14px;
}

.h5-bank-form-card input,
.h5-bank-form-card select {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 0;
    background: transparent;
    color: #303133;
    font-size: 14px;
    outline: 0;
}

.h5-withdraw-phone {
    min-height: 100%;
    background: #fff;
    padding-bottom: 72px;
}

.h5-withdraw-search {
    border-bottom-color: #f7f7f7;
}

.h5-withdraw-account {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    margin: 0 10px;
    padding: 10px 48px 10px 15px;
    border-bottom: 1px solid #f2f3f5;
    color: #303133;
    text-decoration: none;
    box-sizing: border-box;
}

.h5-withdraw-account span {
    flex: 0 0 auto;
    color: #303133;
    font-size: 14px;
}

.h5-withdraw-account strong {
    min-width: 0;
    flex: 1;
    margin: 0 44px 0 8px;
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-withdraw-account img {
    position: absolute;
    right: 50px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
}

.h5-withdraw-account i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9098a8;
    font-size: 22px;
    font-style: normal;
}

.h5-withdraw-form {
    padding-top: 10px;
}

.h5-withdraw-money-card {
    margin: 0 10px;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 10px rgba(110, 110, 110, .09);
}

.h5-withdraw-money-card h2 {
    margin: 0;
    color: #303133;
    font-size: 15px;
    font-weight: 500;
}

.h5-withdraw-money-row {
    display: flex;
    align-items: baseline;
    min-height: 72px;
    border-bottom: 1px solid #eee;
}

.h5-withdraw-money-row span {
    color: #303133;
    font-size: 30px;
    line-height: 1.3;
}

.h5-withdraw-money-row input {
    flex: 1;
    min-width: 0;
    height: 54px;
    border: 0;
    padding-left: 10px;
    color: #303133;
    font-size: 30px;
    font-weight: 700;
    outline: 0;
}

.h5-withdraw-money-row button {
    width: 22px;
    height: 22px;
    border: 0;
    padding: 0;
    background: transparent;
}

.h5-withdraw-money-row button img {
    width: 20px;
    height: 20px;
}

.h5-withdraw-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    color: #8b95a5;
    font-size: 13px;
}

.h5-withdraw-balance button {
    border: 0;
    background: transparent;
    color: #ff6a00;
    font-size: 13px;
    white-space: nowrap;
}

.h5-withdraw-money-card p {
    margin: 12px 0 0;
    color: #999;
    font-size: 12px;
    line-height: 1.6;
}

.h5-withdraw-submit {
    display: block;
    width: calc(100% - 30px);
    height: 42px;
    margin: 30px 15px 0;
    border: 0;
    border-radius: 4px;
    background: #ff6a00;
    color: #fff;
    font-size: 15px;
    text-align: center;
}

.h5-withdraw-submit:disabled {
    background: #ccc;
}

.h5-withdraw-record-link {
    display: block;
    margin-top: 20px;
    color: #303133;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.h5-withdraw-list {
    background: #fff;
}

.h5-withdraw-record {
    position: relative;
    display: block;
    min-height: 72px;
    margin: 0 12px;
    padding: 12px 96px 12px 0;
    border-bottom: 1px solid #eee;
    color: #303133;
    text-decoration: none;
    box-sizing: border-box;
}

.h5-withdraw-record-main strong,
.h5-withdraw-record-main span,
.h5-withdraw-record-right strong,
.h5-withdraw-record-right span {
    display: block;
}

.h5-withdraw-record-main strong {
    color: #303133;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.h5-withdraw-record-main span {
    margin-top: 5px;
    color: #8b95a5;
    font-size: 13px;
}

.h5-withdraw-record-right {
    position: absolute;
    right: 0;
    top: 12px;
    text-align: right;
}

.h5-withdraw-record-right strong {
    color: #ff6a00;
    font-size: 15px;
    font-weight: 500;
}

.h5-withdraw-record-right span {
    margin-top: 5px;
    color: #606b80;
    font-size: 13px;
}

.h5-withdraw-record-right span.danger {
    color: #f5222d;
}

.h5-withdraw-record p {
    margin: 8px 0 0;
    color: #8b95a5;
    font-size: 13px;
    line-height: 1.5;
}

.h5-withdraw-detail-money {
    margin: 20px 40px 0;
    border-bottom: 1px solid #edf0f5;
    padding: 28px 0;
    color: #303133;
    text-align: center;
}

.h5-withdraw-detail-money strong {
    font-size: 28px;
    font-weight: 700;
}

.h5-withdraw-detail-card {
    margin: 20px 40px;
}

.h5-withdraw-detail-line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    margin-bottom: 10px;
    color: #303133;
    font-size: 14px;
    line-height: 1.45;
}

.h5-withdraw-detail-line span {
    color: #8b95a5;
}

.h5-withdraw-detail-line strong {
    color: #303133;
    font-size: 14px;
    font-weight: 400;
    word-break: break-all;
}

.h5-account-phone,
.h5-account-detail-phone {
    min-height: 100%;
    background: #f5f6f8;
    padding-bottom: 72px;
}

.h5-account-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #edf0f5;
}

.h5-account-search input {
    min-width: 0;
    height: 34px;
    border: 1px solid #d8dee9;
    border-radius: 17px;
    padding: 0 12px;
    background: #fff;
    color: #303133;
    font-size: 13px;
    outline: 0;
}

.h5-account-search button {
    height: 34px;
    border: 0;
    border-radius: 17px;
    background: #1189ff;
    color: #fff;
    font-size: 13px;
}

.h5-account-hero {
    min-height: 214px;
    padding: 34px 34px 74px;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
    border-radius: 0 0 100% 100% / 0 0 35px 35px;
}

.h5-balance-hero {
    background: url("/assets/legacy-diy/uniapp/balance/balance_bg.png") no-repeat right bottom / auto 170px, linear-gradient(314deg, #fe7849 0%, #ff1959 100%);
}

.h5-point-hero {
    background: url("/assets/legacy-diy/uniapp/point/point_bg.png") no-repeat right bottom / auto 170px, linear-gradient(314deg, #f16914 0%, #feaa4c 100%);
}

.h5-account-total {
    margin-bottom: 10px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    line-height: 1;
}

.h5-account-title {
    color: #f6f6f6;
    font-size: 14px;
    line-height: 1;
}

.h5-account-stat {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.h5-account-stat.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h5-account-stat.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h5-account-stat strong,
.h5-account-stat em {
    display: block;
    color: #f6f6f6;
    font-style: normal;
    line-height: 1;
}

.h5-account-stat strong {
    margin-bottom: 10px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-account-stat em {
    font-size: 12px;
}

.h5-account-menu,
.h5-point-menu {
    margin: 0 12px;
    background: #fff;
    border-radius: 10px;
    transform: translateY(-45px);
    box-shadow: 0 5px 18px rgba(31, 44, 71, .05);
}

.h5-account-menu {
    padding: 0 15px;
}

.h5-account-menu a {
    display: flex;
    min-height: 52px;
    align-items: center;
    color: #303133;
    text-decoration: none;
}

.h5-account-menu i {
    margin-right: 10px;
    background: linear-gradient(135deg, #fe7849 0%, #ff1959 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 23px;
}

.h5-account-menu span {
    flex: 1;
    font-size: 14px;
}

.h5-account-menu b {
    color: #a7afbd;
    font-size: 20px;
    font-weight: 400;
}

.h5-account-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: -32px 12px 12px;
}

.h5-account-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: 21px;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
}

.h5-account-actions .recharge-withdraw {
    background: #1189ff;
}

.h5-account-actions .withdraw {
    background: #303133;
}

.h5-account-actions a:only-child {
    grid-column: 1 / -1;
}

.h5-account-member {
    margin: -32px 12px 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #edf0f5;
}

.h5-account-member strong,
.h5-account-member span {
    display: block;
}

.h5-account-member strong {
    color: #303133;
    font-size: 15px;
}

.h5-account-member span {
    margin-top: 4px;
    color: #7a8599;
    font-size: 12px;
}

.h5-point-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 15px;
}

.h5-point-menu a {
    display: flex;
    align-items: center;
    color: #303133;
    text-decoration: none;
}

.h5-point-menu span {
    display: grid;
    width: 44px;
    height: 44px;
    margin-right: 12px;
    place-items: center;
    background: #f3f3f3;
    border-radius: 10px;
}

.h5-point-menu img {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.h5-point-menu strong {
    font-size: 16px;
}

.h5-point-task {
    display: grid;
    gap: 0;
    margin: -30px 12px 12px;
    padding: 16px;
    background: #fff;
    border-radius: 9px;
}

.h5-point-task h2 {
    margin: 0 0 20px;
    color: #303133;
    font-size: 16px;
}

.h5-point-task a {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) 70px;
    gap: 13px;
    align-items: center;
    min-height: 60px;
    color: #303133;
    text-decoration: none;
}

.h5-point-task i {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 10px;
    background: #f3f3f3;
    color: #ff5a35;
    font-size: 23px;
}

.h5-point-task span,
.h5-point-task strong,
.h5-point-task em {
    display: block;
    min-width: 0;
}

.h5-point-task strong {
    color: #303133;
    font-size: 14px;
}

.h5-point-task em {
    margin-top: 6px;
    color: #8b95a5;
    font-size: 12px;
    font-style: normal;
}

.h5-point-task b {
    display: grid;
    height: 30px;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(135deg, #fe7849 0%, #ff1959 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.h5-account-tab {
    position: sticky;
    top: 45px;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 40px;
    background: #1189ff;
}

.h5-account-tab label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.h5-account-tab select {
    max-width: 92%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    outline: 0;
}

.h5-account-tab option {
    color: #303133;
}

.h5-account-record-list {
    background: #fff;
}

.h5-account-record {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin: 0 16px;
    padding: 15px 0 16px;
    border-bottom: 1px solid #edf0f5;
}

.h5-account-record:last-child {
    border-bottom: 0;
}

.h5-account-record strong,
.h5-account-record span,
.h5-account-record time {
    display: block;
}

.h5-account-record strong {
    color: #303133;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.h5-account-record span,
.h5-account-record time {
    margin-top: 8px;
    color: #8b95a5;
    font-size: 12px;
    line-height: 1.25;
}

.h5-account-record em {
    color: #303133;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.h5-account-record em.income {
    color: #1189ff;
}

.h5-account-empty {
    margin-top: 14px;
}

.h5-signin-phone {
    min-height: 100%;
    overflow: hidden;
    background: #f6f6fb;
    padding-bottom: 24px;
}

.h5-signin-status {
    position: relative;
    z-index: 3;
    background: transparent;
    color: #303133;
}

.h5-signin-status a,
.h5-signin-status strong {
    color: #303133;
}

.h5-signin-search {
    position: relative;
    z-index: 3;
    border-bottom: 0;
    background: #fff;
}

.h5-signin-main {
    position: relative;
    padding: 0 15px 20px;
}

.h5-signin-bg {
    position: absolute;
    top: -90px;
    left: -50%;
    z-index: 0;
    width: 200%;
    height: 250px;
    border-radius: 0 0 100% 100% / 0 0 20% 20%;
    background: linear-gradient(136deg, #fe7849 0%, #ff1959 100%);
}

.h5-signin-member {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 92px;
    gap: 10px;
    align-items: center;
    padding: 26px 0 28px;
}

.h5-signin-avatar {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
}

.h5-signin-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-signin-avatar span {
    color: #ff4b52;
    font-size: 18px;
    font-weight: 700;
}

.h5-signin-info strong,
.h5-signin-info span {
    display: block;
    color: #fff;
    line-height: 1;
}

.h5-signin-info strong {
    margin-bottom: 10px;
    font-size: 16px;
}

.h5-signin-info b {
    margin: 0 4px;
    font-weight: 700;
}

.h5-signin-info span {
    font-size: 12px;
}

.h5-signin-action-form {
    margin: 0;
}

.h5-signin-action {
    width: 82px;
    border: 0;
    padding: 0;
    background: transparent;
}

.h5-signin-action img {
    display: block;
    width: 80px;
}

.h5-signin-action:disabled {
    cursor: default;
}

.h5-signin-message {
    position: relative;
    z-index: 2;
    margin: -8px 0 12px;
    border-radius: 8px;
    padding: 9px 12px;
    background: #fff8ec;
    color: #ff6b00;
    font-size: 13px;
}

.h5-signin-message.error {
    background: #fff1f1;
    color: #f04444;
}

.h5-signin-days,
.h5-signin-mine,
.h5-signin-rule {
    position: relative;
    z-index: 2;
    margin-bottom: 15px;
    border-radius: 9px;
    background: #fff;
}

.h5-signin-days {
    padding: 15px 15px 6px;
}

.h5-signin-days h2,
.h5-signin-mine h2,
.h5-signin-rule h2 {
    margin: 0;
    color: #303133;
    font-size: 16px;
    line-height: 1;
}

.h5-signin-day-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.h5-signin-day {
    display: grid;
    min-height: 78px;
    place-items: center;
    border-radius: 9px;
    background: #f5f6fa;
    padding: 9px 4px;
    box-sizing: border-box;
    color: #303133;
}

.h5-signin-day.signed {
    background: linear-gradient(136deg, #fe7849 0%, #ff1959 100%);
    color: #fff;
}

.h5-signin-day.last {
    grid-column: span 2;
}

.h5-signin-day strong,
.h5-signin-day span {
    display: block;
    font-size: 12px;
    line-height: 1;
}

.h5-signin-day strong {
    font-weight: 700;
}

.h5-signin-day span {
    color: inherit;
    opacity: .72;
}

.h5-signin-day img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.h5-signin-day.last img {
    width: 54px;
    height: 34px;
}

.h5-signin-mine {
    padding: 15px;
}

.h5-signin-mine > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.h5-signin-mine article {
    position: relative;
    min-height: 78px;
    overflow: hidden;
    border-radius: 9px;
    padding: 22px 14px 0;
    box-sizing: border-box;
}

.h5-signin-mine article img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-signin-mine article strong,
.h5-signin-mine article span {
    position: relative;
    z-index: 1;
    display: block;
}

.h5-signin-mine article strong {
    color: #303133;
    font-size: 14px;
}

.h5-signin-mine article span {
    margin-top: 8px;
    color: #9aa2b2;
    font-size: 12px;
}

.h5-signin-rule {
    padding: 15px;
}

.h5-signin-rule p {
    margin: 12px 0 0;
    color: #7a8599;
    font-size: 13px;
    line-height: 1.65;
}

.h5-profile-phone {
    background: #f6f7fb;
}

.h5-profile-search {
    margin-bottom: 10px;
}

.h5-profile-list {
    margin: 10px 0 18px;
    background: #fff;
}

.h5-profile-cell {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 49px;
    padding: 12px 15px;
    color: #333;
    background: #fff;
}

.h5-profile-cell + .h5-profile-cell::before {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    top: 0;
    border-top: 1px solid #eef0f5;
}

.h5-profile-cell span {
    flex: 0 0 auto;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
}

.h5-profile-cell em {
    min-width: 0;
    margin-left: auto;
    color: #8b95a6;
    font-size: 13px;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 235px;
    text-align: right;
}

.h5-profile-cell i {
    flex: 0 0 auto;
    margin-left: 8px;
    color: #c6ccd6;
    font-style: normal;
    font-size: 22px;
    line-height: 1;
}

.h5-profile-cell.disabled i {
    display: none;
}

.h5-profile-cell.head {
    min-height: 69px;
}

.h5-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #eef0f5;
    border-radius: 50%;
    overflow: hidden;
    background: #f1f4fa;
    color: #7b8797;
    font-weight: 600;
}

.h5-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-profile-logout {
    display: block;
    height: 44px;
    margin: 18px 15px 80px;
    border-radius: 4px;
    background: #1189f4;
    color: #fff;
    text-align: center;
    line-height: 44px;
    font-size: 15px;
}

.h5-profile-edit-form {
    margin-top: 10px;
}

.h5-profile-edit-form label,
.h5-profile-radio-row {
    display: flex;
    align-items: center;
    min-height: 49px;
    padding: 12px 18px;
    background: #fff;
    border-bottom: 1px solid #eef0f5;
}

.h5-profile-edit-form label span,
.h5-profile-radio-row > span {
    flex: 0 0 86px;
    color: #333;
    font-size: 14px;
}

.h5-profile-edit-form input[type="text"],
.h5-profile-edit-form input[type="tel"],
.h5-profile-edit-form input[type="url"],
.h5-profile-edit-form input[type="date"] {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    color: #333;
    font-size: 14px;
}

.h5-profile-edit-form p {
    margin: 8px 18px 0;
    color: #8b95a6;
    font-size: 12px;
    line-height: 1.6;
}

.h5-profile-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: auto;
    padding: 0;
    margin-right: 18px;
    border: 0;
}

.h5-profile-radio-row input {
    width: 15px;
    height: 15px;
}

.h5-profile-save {
    display: block;
    width: calc(100% - 30px);
    height: 44px;
    margin: 24px 15px 80px;
    border: 0;
    border-radius: 4px;
    background: #1189f4;
    color: #fff;
    font-size: 15px;
}

.h5-member-contact-phone,
.h5-pay-password-phone {
    background: #fff;
}

.h5-member-contact {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 75px auto 0;
}

.h5-member-contact img {
    width: 250px;
    max-width: 100%;
    height: auto;
    display: block;
}

.h5-member-contact .tips {
    margin: 14px 0 10px;
    color: #999;
    font-size: 12px;
}

.h5-member-contact p {
    margin: 10px 0 0;
    color: #999;
    font-size: 12px;
}

.h5-member-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 4px;
    background: #1189f4;
    color: #fff;
    font-size: 14px;
}

.h5-member-contact-btn.disabled {
    background: #c8cdd6;
    cursor: not-allowed;
}

.h5-member-cancel-phone {
    position: relative;
    background: #f7f8fa;
}

.h5-cancel-agreement-scroll {
    height: calc(100vh - 105px);
    min-height: 456px;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
}

.h5-cancel-agreement-scroll h1 {
    margin: 0 0 10px;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
}

.h5-cancel-rich {
    color: #303133;
    font-size: 12px;
    line-height: 22px;
    word-break: break-word;
}

.h5-cancel-rich p {
    margin: 0 0 8px;
}

.h5-cancel-empty,
.h5-cancel-none {
    display: grid;
    place-items: center;
    color: #909399;
    font-size: 13px;
    text-align: center;
}

.h5-cancel-empty {
    min-height: 180px;
}

.h5-cancel-fixed-form,
.h5-cancel-fixed-actions {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(430px, 100vw);
    min-height: 75px;
    padding: 8px 12px 12px;
    transform: translateX(-50%);
    background: #fff;
    box-sizing: border-box;
}

.h5-cancel-fixed-form {
    flex-direction: column;
}

.h5-cancel-agree {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #838383;
    font-size: 14px;
}

.h5-cancel-agree input {
    width: 15px;
    height: 15px;
    margin: 0 6px 0 0;
}

.h5-cancel-primary,
.h5-cancel-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 40px;
    box-sizing: border-box;
}

.h5-cancel-primary {
    border: 0;
    background: #1189f4;
    color: #fff;
}

.h5-cancel-primary:disabled {
    background: #c8cdd6;
    cursor: not-allowed;
}

.h5-cancel-plain {
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
}

.h5-cancel-fixed-actions {
    gap: 15px;
}

.h5-cancel-fixed-actions form {
    margin: 0;
}

.h5-cancel-message,
.h5-cancel-error {
    color: #fa6a00;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
}

.h5-cancel-message {
    margin-bottom: 10px;
}

.h5-cancel-assets {
    padding: 15px 12px 95px;
}

.h5-cancel-risk {
    height: 28px;
    padding-left: 10px;
    border-radius: 3px;
    background: rgba(250, 106, 0, .2);
    color: #fa6a00;
    font-size: 14px;
    line-height: 28px;
    box-sizing: border-box;
}

.h5-cancel-error {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    background: #fff7ef;
}

.h5-cancel-asset-card {
    margin-top: 15px;
    padding: 10px;
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
}

.h5-cancel-asset-card h2 {
    display: flex;
    align-items: center;
    margin: 0;
    color: #303133;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.h5-cancel-asset-card h2 i {
    width: 3px;
    height: 14px;
    margin-right: 10px;
    border-radius: 1px;
    background: #1189f4;
}

.h5-cancel-asset-grid {
    display: grid;
    gap: 10px;
    align-items: center;
    margin-top: 26px;
    padding: 0 13px 18px;
    text-align: center;
}

.h5-cancel-asset-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.h5-cancel-asset-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h5-cancel-asset-grid strong,
.h5-cancel-asset-grid span {
    display: block;
}

.h5-cancel-asset-grid strong {
    overflow: hidden;
    color: #303133;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-cancel-asset-grid span {
    margin-top: 14px;
    color: #666;
    font-size: 13px;
    line-height: 16px;
}

.h5-cancel-status {
    padding: 25px;
}

.h5-cancel-step {
    position: relative;
    display: flex;
    min-height: 100px;
}

.h5-cancel-step i {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: 9px;
    border-radius: 50%;
    background: #1189f4;
    color: #fff;
    font-style: normal;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.h5-cancel-step div {
    padding-top: 1px;
}

.h5-cancel-step strong,
.h5-cancel-step span {
    display: block;
}

.h5-cancel-step strong {
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

.h5-cancel-step span {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
}

.h5-cancel-step b {
    position: absolute;
    top: 18px;
    left: 9px;
    width: 1px;
    height: 82px;
    background: #1189f4;
}

.h5-cancel-step b.light,
.h5-cancel-step.muted i {
    opacity: .4;
}

.h5-cancel-step.last {
    min-height: 40px;
}

.h5-cancel-none {
    min-height: 360px;
    padding: 24px;
}

.h5-cancel-none strong,
.h5-cancel-none span,
.h5-cancel-none a {
    display: block;
}

.h5-cancel-none strong {
    color: #303133;
    font-size: 16px;
}

.h5-cancel-none span {
    margin-top: 8px;
}

.h5-cancel-none a {
    margin-top: 18px;
    color: #1189f4;
}

.h5-cancel-result {
    padding: 150px 38px 0;
    text-align: center;
}

.h5-cancel-success {
    padding-top: 42px;
}

.h5-cancel-result img {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.h5-cancel-success img {
    width: 50px;
    height: 50px;
}

.h5-cancel-result strong,
.h5-cancel-result span {
    display: block;
}

.h5-cancel-result strong {
    margin-top: 15px;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.h5-cancel-success strong {
    font-size: 12px;
    line-height: 14px;
}

.h5-cancel-result span {
    margin-top: 10px;
    color: #838383;
    font-size: 14px;
    line-height: 25px;
}

.h5-cancel-success span {
    padding: 0 50px;
    font-size: 10px;
    line-height: 20px;
}

.h5-cancel-result-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 86px;
}

.h5-cancel-result-actions.single {
    margin-top: 86px;
}

.h5-pay-password-bind {
    padding: 86px 32px 0;
    text-align: center;
}

.h5-pay-password-bind strong {
    display: block;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

.h5-pay-password-bind span {
    display: block;
    margin-top: 6px;
    color: #8b95a6;
    font-size: 13px;
}

.h5-pay-password-bind a {
    display: block;
    height: 42px;
    margin-top: 20px;
    border-radius: 4px;
    background: #1189f4;
    color: #fff;
    line-height: 42px;
}

.h5-pay-password-bind a + a {
    margin-top: 10px;
    border: 1px solid #d8deea;
    background: #fff;
    color: #333;
}

.h5-pay-password-panel {
    min-height: calc(100vh - 45px);
    background: #fff;
}

.h5-pay-password-tip {
    width: 60%;
    margin: 0 auto;
    padding-top: 50px;
    color: #333;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

.h5-pay-password-wrap {
    width: 80%;
    margin: 20px auto 0;
}

.h5-pay-password-input {
    display: block;
    width: 100%;
    height: 44px;
    border: 1px solid #d8deea;
    border-radius: 4px;
    outline: none;
    text-align: center;
    letter-spacing: 8px;
    color: #333;
    font-size: 20px;
}

.h5-pay-password-code {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: #1189f4;
    font-size: 12px;
}

.h5-pay-password-action-tip {
    margin-top: 40px;
    color: #333;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

.h5-pay-password-confirm {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 15px;
    border: 0;
    border-radius: 4px;
    background: #1189f4;
    color: #fff;
    font-size: 14px;
}

.h5-pay-password-confirm.disabled {
    background: #ccc;
}

.h5-pay-password-message {
    min-height: 18px;
    margin-top: 12px;
    color: #1189f4;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
}

.h5-pay-password-message.error {
    color: #f04646;
}

.h5-pay-password-status {
    margin: 20px 30px 80px;
    color: #999;
    text-align: center;
    font-size: 12px;
}

.h5-level-phone {
    background: #fff;
}

.h5-level-top {
    height: 74px;
    overflow: hidden;
}

.h5-level-top img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.h5-level-member {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 58px;
    margin: -52px 15px 12px;
    color: #fff;
}

.h5-level-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.65);
    overflow: hidden;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-weight: 600;
}

.h5-level-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-level-member div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.h5-level-member strong,
.h5-level-member span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-level-member strong {
    font-size: 14px;
    font-weight: 500;
}

.h5-level-member span {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,.9);
}

.h5-level-member a {
    color: #fff;
    font-size: 12px;
}

.h5-level-card-list {
    padding: 0 15px 4px;
}

.h5-level-card {
    min-height: 168px;
    margin-bottom: 12px;
    padding: 20px 22px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(27, 42, 73, .12);
}

.h5-level-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h5-level-card-head strong {
    font-size: 20px;
    font-weight: 600;
}

.h5-level-card-head span {
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
}

.h5-level-card em,
.h5-level-card b,
.h5-level-card p {
    display: block;
}

.h5-level-card em {
    margin-top: 18px;
    font-style: normal;
    font-size: 12px;
    opacity: .86;
}

.h5-level-card b {
    margin-top: 3px;
    font-size: 25px;
}

.h5-level-progress {
    height: 5px;
    margin-top: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    overflow: hidden;
}

.h5-level-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
}

.h5-level-card p {
    margin: 9px 0 0;
    font-size: 12px;
    opacity: .9;
}

.h5-level-section,
.h5-level-rules,
.h5-level-rule-card {
    margin: 12px 15px;
    background: #fff;
}

.h5-level-section h2 {
    margin: 0;
    padding: 14px 0;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #eef0f5;
}

.h5-level-equity {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #eef0f5;
}

.h5-level-equity:last-child {
    border-bottom: 0;
}

.h5-level-equity img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    margin-right: 12px;
}

.h5-level-equity span {
    min-width: 0;
    display: block;
}

.h5-level-equity strong,
.h5-level-equity em {
    display: block;
}

.h5-level-equity strong {
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.h5-level-equity em,
.h5-level-muted {
    margin-top: 4px;
    color: #8b95a6;
    font-size: 12px;
    font-style: normal;
}

.h5-level-rules {
    padding: 20px 15px 10px;
}

.h5-level-rules-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.h5-level-rules-title img {
    width: 27px;
    height: 9px;
}

.h5-level-rules-title strong {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.h5-level-table {
    border: 1px solid #eef0f5;
}

.h5-level-table div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 42px;
    border-bottom: 1px solid #eef0f5;
}

.h5-level-table div:last-child {
    border-bottom: 0;
}

.h5-level-table span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 13px;
}

.h5-level-table span + span {
    border-left: 1px solid #eef0f5;
}

.h5-level-rule-card {
    padding: 5px 15px 15px;
}

.h5-level-rule-card h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 12px 0;
    color: #333;
    font-size: 15px;
    font-weight: 500;
}

.h5-level-rule-card h2 img {
    width: 17px;
    height: 17px;
}

.h5-level-rule-card p {
    margin: 0 0 7px;
    color: #8b95a6;
    font-size: 13px;
    line-height: 1.7;
}

.h5-card-phone,
.h5-code-phone {
    min-height: 100%;
    background: #f7f7f7;
    padding-bottom: 72px;
}

.h5-card-phone .h5-status,
.h5-code-phone .h5-status {
    background: #fff;
}

.h5-card-phone .h5-profile-search,
.h5-code-phone .h5-profile-search {
    margin-bottom: 0;
}

.h5-card-top {
    position: relative;
    height: 230px;
    overflow: hidden;
}

.h5-card-top > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.h5-card-member {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 20px 20px 0;
    box-sizing: border-box;
}

.h5-card-member .h5-level-avatar {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border: 2px solid #fff;
    color: #fff;
    background: rgba(255, 255, 255, .2);
}

.h5-card-member div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 7px;
}

.h5-card-member strong,
.h5-card-member em {
    display: block;
    overflow: hidden;
    color: #fff;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-card-member strong {
    font-size: 15px;
    font-weight: 700;
}

.h5-card-member em {
    color: #ccc;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.h5-member-card {
    position: relative;
    z-index: 2;
    min-height: 180px;
    margin: -110px 30px 12px;
    overflow: hidden;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 0 8px 22px rgba(39, 28, 7, .14);
    color: #fff;
    padding: 33px 20px 22px;
    box-sizing: border-box;
}

.h5-member-card::before {
    content: "";
    position: absolute;
    inset: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 5px;
    pointer-events: none;
}

.h5-member-card-icon {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 58px;
    height: 58px;
    object-fit: contain;
    opacity: .92;
}

.h5-member-card strong,
.h5-member-card span,
.h5-member-card em,
.h5-member-card p {
    position: relative;
    z-index: 1;
    display: block;
    color: #fff;
}

.h5-member-card strong {
    margin-top: 6px;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 500;
}

.h5-member-card span {
    margin-top: 24px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.3;
}

.h5-member-card em {
    margin-top: 5px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-style: normal;
    line-height: 1.3;
}

.h5-member-card p {
    max-height: 34px;
    margin: 8px 94px 0 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    line-height: 1.55;
}

.h5-member-card a {
    position: absolute;
    right: 15px;
    bottom: 20px;
    z-index: 1;
    display: grid;
    width: 80px;
    height: 28px;
    place-items: center;
    border-radius: 3px;
    background: #fff;
    color: #b18639;
    font-size: 12px;
    text-decoration: none;
}

.h5-card-section {
    margin: 12px 15px;
    padding: 10px 15px 15px;
    border-radius: 5px;
    background: #fff;
}

.h5-card-section h2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 10px 0 17px;
    color: #303133;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

.h5-card-section h2 i {
    height: 1px;
    width: 30px;
    background: #303133;
}

.h5-card-section h2 i:first-child {
    justify-self: end;
}

.h5-card-section h2 i:last-child {
    justify-self: start;
}

.h5-card-privileges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 19px;
    justify-items: center;
}

.h5-card-privileges article {
    min-width: 0;
    display: grid;
    justify-items: center;
    text-align: center;
}

.h5-card-privilege-icon {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.h5-card-privileges strong {
    display: block;
    margin-top: 10px;
    color: #303133;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

.h5-card-privileges em {
    display: block;
    max-width: 96px;
    margin-top: 6px;
    color: #8b95a6;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.h5-member-code-popup {
    min-height: 450px;
    margin: 12px 15px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #fff;
}

.h5-member-code-title {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    color: #303133;
}

.h5-member-code-title i {
    margin-right: 8px;
    color: #303133;
    font-size: 18px;
    font-style: normal;
}

.h5-member-code-title strong {
    font-size: 15px;
    font-weight: 500;
}

.h5-member-barcode {
    width: 240px;
    height: 65px;
    margin: 0 auto 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h5-member-barcode img {
    max-width: 100%;
    height: 54px;
    display: block;
}

.h5-member-code-number {
    margin-bottom: 20px;
    color: #000;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
}

.h5-member-qrcode {
    display: grid;
    width: 180px;
    height: 180px;
    place-items: center;
    margin: 0 auto 15px;
}

.h5-member-qrcode canvas,
.h5-member-qrcode img {
    width: 180px !important;
    height: 180px !important;
}

.h5-member-code-popup p {
    margin: 0;
    color: #999;
    text-align: center;
    font-size: 11px;
    line-height: 1.45;
}

.h5-invite-phone {
    background: #f7f7f7;
}

.h5-invite-phone .h5-profile-search {
    margin: 10px 12px 0;
}

.h5-invite-hero {
    position: relative;
    width: 100%;
    overflow: visible;
    background: #fff;
}

.h5-invite-hero-bg {
    display: block;
    width: 100%;
    height: auto;
}

.h5-invite-rule {
    position: absolute;
    top: 10px;
    right: 6px;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.h5-invite-title-img {
    position: absolute;
    left: 50%;
    bottom: 110px;
    width: 166px;
    height: auto;
    transform: translateX(-50%);
}

.h5-invite-time {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
    color: #fff;
    text-align: center;
    font-size: 13px;
}

.h5-invite-btn {
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 305px;
    height: 63px;
    color: #ff0029;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 56px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%);
}

.h5-invite-content {
    margin: 30px 15px 0;
    background: #fff;
}

.h5-invite-friends {
    margin-top: 42px;
}

.h5-invite-content h2 {
    margin: 0 0 14px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

.h5-invite-list {
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    background: #fff;
}

.h5-invite-friend {
    display: flex;
    align-items: center;
    padding: 15px 12px;
    border-bottom: 1px solid #f4f4f4;
}

.h5-invite-friend:last-child {
    border-bottom: 0;
}

.h5-invite-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    overflow: hidden;
    border: 1px solid #0b68ff;
    border-radius: 50%;
    color: #0b68ff;
    text-align: center;
    font-size: 15px;
    line-height: 36px;
    background: #fff;
}

.h5-invite-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-invite-friend-main {
    flex: 1;
    min-width: 0;
}

.h5-invite-friend-main div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.h5-invite-friend-main strong {
    overflow: hidden;
    color: #303133;
    font-size: 14px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-invite-friend-main time {
    flex: 0 0 auto;
    color: #999;
    font-size: 12px;
}

.h5-invite-friend-main p {
    margin: 0;
    color: #0b68ff;
    font-size: 12px;
}

.h5-invite-empty {
    padding: 25px 12px;
    color: #999;
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
}

.h5-invite-empty span {
    display: block;
}

.h5-invite-more {
    display: block;
    padding: 15px;
    color: #999;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
}

.h5-invite-rewards {
    display: flex;
    gap: 0;
    margin-top: 18px;
}

.h5-invite-rewards article {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 107px;
}

.h5-invite-rewards img {
    display: block;
    width: 100%;
    height: 100%;
}

.h5-invite-rewards div {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 17px;
    box-sizing: border-box;
}

.h5-invite-rewards strong {
    color: #ff2440;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
}

.h5-invite-rewards small {
    font-size: 13px;
    font-weight: 500;
}

.h5-invite-rewards span {
    margin-top: 8px;
    color: #666;
    font-size: 12px;
}

.h5-invite-desc {
    padding: 15px 0 0;
    color: #999;
    font-size: 12px;
    line-height: 1.8;
}

.h5-invite-desc p {
    margin: 0 0 5px;
}

.h5-invite-desc span {
    display: block;
}

.h5-invite-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 36px 0 40px;
}

.h5-invite-steps div {
    width: 70px;
    color: #999;
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
}

.h5-invite-steps div img {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 10px;
    object-fit: contain;
}

.h5-invite-arrow {
    width: 20px;
    height: 12px;
    margin-top: 8px;
}

.h5-invite-share {
    margin-bottom: 74px;
    padding-bottom: 18px;
}

.h5-invite-share-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
}

.h5-invite-qr {
    display: grid;
    width: 150px;
    height: 150px;
    place-items: center;
}

.h5-invite-qr canvas,
.h5-invite-qr img {
    width: 150px !important;
    height: 150px !important;
}

.h5-invite-share-card p {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    color: #666;
    text-align: center;
    font-size: 12px;
}

.h5-invite-share-card button {
    height: 36px;
    padding: 0 20px;
    border: 0;
    border-radius: 4px;
    background: #0b68ff;
    color: #fff;
    font-size: 14px;
}

.h5-invite-rule-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    background: rgba(0, 0, 0, .35);
}

.h5-invite-rule-panel[hidden] {
    display: none;
}

.h5-invite-rule-panel > div {
    width: 100%;
    max-height: 42%;
    overflow: auto;
    padding: 16px 15px 24px;
    box-sizing: border-box;
    border-radius: 12px 12px 0 0;
    background: #fff;
}

.h5-invite-rule-panel button {
    float: right;
    border: 0;
    background: transparent;
    color: #303133;
    font-size: 24px;
    line-height: 1;
}

.h5-invite-rule-panel h3 {
    margin: 0 0 14px;
    text-align: center;
    font-size: 16px;
}

.h5-invite-rule-panel p {
    margin: 0;
    color: #666;
    font-size: 13px;
    line-height: 1.8;
}

.h5-hongbao-phone {
    background: #f7f7f7;
}

.h5-hongbao-search {
    margin: 10px 15px 0;
}

.h5-hongbao-tabs {
    position: sticky;
    top: 44px;
    z-index: 4;
    display: flex;
    justify-content: space-around;
    height: 45px;
    background: #fff;
}

.h5-hongbao-tabs a {
    height: 43px;
    padding: 0 4px;
    border-bottom: 2px solid transparent;
    color: #303133;
    text-decoration: none;
    font-size: 15px;
    line-height: 45px;
}

.h5-hongbao-tabs a.active {
    border-bottom-color: #0b68ff;
    color: #0b68ff;
}

.h5-hongbao-list {
    padding: 0 15px 74px;
}

.h5-hongbao-card {
    margin-top: 12px;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.h5-hongbao-card-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    color: #606266;
    font-size: 12px;
}

.h5-hongbao-card-top em {
    color: #fa5b14;
    font-style: normal;
}

.h5-hongbao-card-body {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.h5-hongbao-card-body img {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 5px;
    object-fit: cover;
}

.h5-hongbao-card-body div {
    min-width: 0;
    margin-left: 12px;
}

.h5-hongbao-card-body strong {
    display: -webkit-box;
    overflow: hidden;
    color: #303133;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-hongbao-card-body p {
    margin: 6px 0 4px;
    overflow: hidden;
    color: #606266;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-hongbao-card-body span {
    color: #909399;
    font-size: 12px;
}

.h5-hongbao-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.h5-hongbao-card-foot strong {
    color: #fa5b14;
    font-size: 18px;
    line-height: 1;
}

.h5-hongbao-card-foot small {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 400;
}

.h5-hongbao-card-foot a,
.h5-hongbao-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 25px;
    padding: 0 16px;
    border-radius: 13px;
    background: linear-gradient(90deg, #ff7200 0%, #ff1e00 100%);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}

.h5-hongbao-members {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.h5-hongbao-members span {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    margin-left: -20px;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #fff;
    color: #0b68ff;
    font-size: 14px;
    line-height: 26px;
}

.h5-hongbao-members img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-hongbao-more {
    display: block;
    margin: 8px 15px 78px;
    padding: 12px 0;
    color: #909399;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
}

.h5-hongbao-detail-phone {
    padding-bottom: 70px;
}

.h5-flash {
    margin: 10px 15px;
    padding: 9px 12px;
    border-radius: 6px;
    background: #eef6ff;
    color: #0b68ff;
    font-size: 13px;
}

.h5-flash-error {
    background: #fff2f0;
    color: #f04438;
}

.h5-hongbao-hero {
    min-height: 500px;
    padding: 12px 20px 24px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.h5-hongbao-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.h5-hongbao-hero-head img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.h5-hongbao-hero-head button {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 12px;
}

.h5-hongbao-panel {
    margin-top: 70px;
    color: #fff;
    text-align: center;
}

.h5-hongbao-panel p {
    margin: 0 0 10px;
    font-size: 15px;
}

.h5-hongbao-panel p b {
    color: #ffe37c;
    font-size: 18px;
}

.h5-category-root-strip {
    display: flex;
    min-height: 86px;
    padding: 5px 40px 5px 10px;
    overflow-x: auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f2f2f2;
    background: #fff;
    scrollbar-width: none;
}

.h5-category-root-strip::-webkit-scrollbar {
    display: none;
}

.h5-category-root-strip a {
    display: flex;
    flex: 0 0 65px;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    color: #666;
    text-align: center;
}

.h5-category-root-strip a > span {
    display: grid;
    width: 46px;
    height: 46px;
    padding: 2px;
    overflow: hidden;
    place-items: center;
    border: 2px solid transparent;
    border-radius: 23px;
    box-sizing: border-box;
}

.h5-category-root-strip a.active > span {
    border-color: var(--base-color, #F4391c);
}

.h5-category-root-strip img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
}

.h5-category-root-strip b {
    font-size: 18px;
}

.h5-category-root-strip em {
    display: block;
    width: 100%;
    margin-top: 3px;
    overflow: hidden;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-category-root-strip a.active em {
    padding: 1px 8px;
    border-radius: 12px;
    background: var(--base-color, #F4391c);
    color: var(--btn-text-color, #fff);
    box-sizing: border-box;
}

.h5-hongbao-panel strong {
    display: block;
    color: #ffe37c;
    font-size: 46px;
    line-height: 1.1;
}

.h5-hongbao-panel strong small {
    margin-left: 4px;
    font-size: 18px;
}

.h5-hongbao-panel em {
    display: block;
    margin: 10px 0;
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    font-style: normal;
}

.h5-hongbao-panel form {
    margin-top: 18px;
}

.h5-hongbao-panel button {
    min-width: 132px;
    height: 40px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffe283, #ffb021);
    color: #b02d00;
    font-size: 16px;
    font-weight: 700;
}

.h5-hongbao-heads {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 108px;
    overflow: hidden;
    margin-bottom: 16px;
}

.h5-hongbao-heads span {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 22px;
}

.h5-hongbao-heads img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-hongbao-how,
.h5-hongbao-rule {
    margin: 12px 15px 0;
    padding: 16px 12px;
    border-radius: 8px;
    background: #fff;
}

.h5-hongbao-how h2,
.h5-hongbao-rule h2 {
    margin: 0 0 16px;
    color: #303133;
    text-align: center;
    font-size: 16px;
}

.h5-hongbao-how div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.h5-hongbao-how div img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.h5-hongbao-how div img.arrow {
    width: 28px;
    height: 18px;
}

.h5-hongbao-how p {
    display: flex;
    justify-content: space-around;
    margin: 10px 0 0;
    color: #909399;
    font-size: 12px;
}

.h5-hongbao-rule p {
    margin: 0;
    color: #909399;
    font-size: 13px;
    line-height: 1.7;
}

.h5-divideticket-phone {
    background: #fff3e8;
}

.h5-divideticket-card .h5-hongbao-card-foot a,
.h5-divideticket-phone .h5-hongbao-share-link {
    background: linear-gradient(90deg, #ff9a1f 0%, #ff4b00 100%);
}

.h5-divideticket-hero {
    min-height: 560px;
    padding: 12px 18px 24px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
}

.h5-divideticket-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.h5-divideticket-hero-head a,
.h5-divideticket-hero-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .28);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}

.h5-divideticket-title {
    margin: 26px 0 16px;
    color: #fff;
    text-align: center;
}

.h5-divideticket-title img {
    display: block;
    width: 180px;
    max-width: 84%;
    margin: 0 auto 8px;
}

.h5-divideticket-title strong {
    display: block;
    color: #fff7a6;
    font-size: 42px;
    line-height: 1.1;
}

.h5-divideticket-title small {
    margin-left: 4px;
    font-size: 16px;
}

.h5-divideticket-title p {
    margin: 8px 0 0;
    font-size: 14px;
}

.h5-divideticket-panel {
    min-height: 260px;
    padding: 44px 20px 24px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    color: #9a3b00;
    text-align: center;
}

.h5-divideticket-panel p {
    margin: 0 0 14px;
    color: #9a3b00;
    font-size: 14px;
    line-height: 1.6;
}

.h5-divideticket-panel p b {
    color: #f54500;
    font-size: 18px;
}

.h5-divideticket-panel em {
    display: block;
    margin: 8px 0 14px;
    color: #b66a2f;
    font-size: 12px;
    font-style: normal;
}

.h5-divideticket-panel button {
    min-width: 142px;
    height: 40px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffe48d 0%, #ff9d23 100%);
    color: #a52a00;
    font-size: 15px;
    font-weight: 700;
}

.h5-divideticket-panel .h5-hongbao-heads span {
    border-color: #fff5d7;
    background: #fff7df;
    color: #ff7a00;
}

.h5-divideticket-success {
    width: 86px;
    height: auto;
    margin-bottom: 8px;
}

.h5-divideticket-rule {
    margin-bottom: 12px;
}

.member-recommend-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    flex-wrap: nowrap;
}

.member-recommend-filter > .layui-input {
    width: 190px;
}

.member-recommend-filter .date-sep {
    color: #909399;
}

.member-recommend-tabs {
    margin: 0 18px;
    background: #fff;
}

.member-recommend-tabs .layui-tab-title {
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #edf0f5;
}

.member-recommend-tabs .layui-tab-title li {
    min-width: 74px;
    padding: 0 14px;
    line-height: 50px;
}

.member-recommend-tabs .layui-tab-title li a {
    color: inherit;
}

.member-recommend-form .card-common {
    margin: 0 0 15px;
    border-radius: 2px;
}

.member-recommend-form .card-common:last-child {
    margin-bottom: 0;
}

.member-recommend-form .layui-card-body {
    padding: 22px 0 8px;
}

.member-recommend-form .old-checkbox-row,
.member-coupon-select {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.member-coupon-select {
    max-width: 760px;
    align-items: flex-start;
}

.member-coupon-select .word-aux {
    flex-basis: 100%;
    margin-left: 0;
}

.coupon-choice {
    padding: 0 10px;
    min-height: 32px;
    border: 1px solid #e5e9f2;
    border-radius: 2px;
    background: #fff;
}

.empty-inline {
    min-height: 24px;
    line-height: 24px;
    color: #909399;
}

.member-recommend-detail .card-common {
    margin: 18px;
}

.member-recommend-detail .shop-content-list {
    margin-top: 0;
}

.member-detail-actions {
    margin: 10px 0 0 132px;
}

.coupon-mini-name {
    display: inline-block;
    margin: 0 8px 4px 0;
    color: #1266ff;
}

.member-signin-form {
    padding-top: 20px;
}

.member-signin-form .layui-form-item {
    margin-bottom: 14px;
}

.member-signin-form .layui-form-label {
    flex: 0 0 132px;
    width: 132px;
}

.member-signin-form .layui-input-block {
    flex: 0 1 auto;
    min-width: 0;
}

.member-signin-form .len-short {
    width: 100px;
    min-width: 100px;
}

.member-signin-form .layui-input-inline {
    min-width: 100px;
}

.member-signin-form .layui-form-mid {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: #333;
}

.member-signin-form .width-wrap {
    width: 115px;
}

.member-signin-form .layui-block {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.member-signin-form .word-aux {
    margin-left: 132px;
}

.member-signin-aux {
    margin-top: -4px;
    margin-bottom: 16px;
}

.member-signin-series-row {
    align-items: flex-start;
}

.member-signin-table {
    width: 680px;
    margin: 0;
    border: 1px solid #e6e8ef;
}

.member-signin-table th,
.member-signin-table td {
    padding: 15px;
}

.member-signin-table th.operation,
.member-signin-table td:last-child {
    text-align: right;
}

.member-signin-table + .layui-btn {
    margin-top: 15px;
}

.member-signin-form .empty-wrap {
    color: #8a94a6;
    text-align: center;
}

.member-signin-actions {
    margin-left: 132px;
}

.hongbao-admin-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    flex-wrap: nowrap;
}

.hongbao-admin-filter > .layui-input {
    width: 190px;
}

.hongbao-admin-filter .date-sep {
    color: #909399;
}

.hongbao-admin-tabs {
    margin: 0 18px;
    background: #fff;
}

.hongbao-admin-tabs .layui-tab-title {
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #edf0f5;
}

.hongbao-admin-tabs .layui-tab-title li {
    min-width: 70px;
    padding: 0 14px;
    line-height: 50px;
}

.hongbao-admin-tabs .layui-tab-title li a {
    color: inherit;
}

.hongbao-admin-form .layui-card {
    margin: 0;
    border-radius: 2px;
}

.hongbao-admin-form .layui-card-body {
    padding: 22px 0 8px;
}

.hongbao-admin-form .inline-fields,
.hongbao-image-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}

.hongbao-image-field {
    align-items: flex-start;
}

.hongbao-image-preview {
    width: 120px;
    height: 72px;
    border: 1px dashed #d7dee8;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8a94a6;
    overflow: hidden;
}

.hongbao-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hongbao-image-preview div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
}

.hongbao-image-preview strong {
    color: #1266ff;
    font-size: 24px;
    font-weight: 400;
    line-height: 22px;
}

.hongbao-admin-detail .card-common {
    margin: 18px;
}

.hongbao-detail-image img {
    max-width: 260px;
    max-height: 120px;
    border: 1px solid #e2e7f0;
    object-fit: contain;
}

.hongbao-detail-actions {
    margin: 10px 0 0 132px;
}

.hongbao-member-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hongbao-member-cell img,
.hongbao-member-cell .avatar-empty {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 34px;
    border: 1px solid #e1e6ef;
    background: #f3f6fb;
    object-fit: cover;
}

.hongbao-member-cell strong,
.hongbao-member-cell em {
    display: block;
    line-height: 18px;
    font-style: normal;
}

.hongbao-member-cell em {
    color: #8a94a6;
    font-size: 12px;
}

.member-recharge-toolbar {
    align-items: center;
    gap: 18px;
}

.member-recharge-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #333;
    white-space: nowrap;
}

.member-recharge-filter {
    margin-left: auto;
}

.member-recharge-table .table-btn {
    justify-content: flex-end;
}

.member-recharge-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.member-recharge-cover,
.member-recharge-detail-img {
    width: 48px;
    height: 48px;
    border: 1px solid #e5e9f2;
    background: #f7f9fc;
    color: #9aa8bd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: none;
    overflow: hidden;
}

.member-recharge-cover img,
.member-recharge-detail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-recharge-detail-img {
    width: 90px;
    height: 90px;
}

.member-recharge-form .layui-form-label {
    width: 130px;
}

.member-recharge-form .member-coupon-select,
.member-recharge-form .old-checkbox-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.member-recharge-tag {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 2px 8px;
    border: 1px solid #d9e5ff;
    color: #1260f5;
    background: #f5f8ff;
}

.member-recharge-subtitle {
    color: #52627a;
}

.member-recharge-order-screen .layui-form-label {
    width: 80px;
}

.member-recharge-config-line {
    margin-bottom: 15px;
    padding: 0;
}

.member-recharge-config-line .member-recharge-switch {
    display: flex;
    align-items: center;
    min-height: 38px;
}

.member-recharge-toolbar {
    padding: 0;
}

.member-recharge-table .point-left {
    margin-right: 14px;
}

.member-recharge-order-page .finance-summary-body.two-cols .content {
    width: 50%;
}

.member-recharge-order-list-wrap .layui-table {
    margin-top: 15px;
}

.member-recharge-order-list-wrap .layui-table thead tr {
    background-color: #f8f6f9;
}

.member-recharge-order-list-wrap .layui-table th {
    border-width: 0;
    font-size: 14px;
}

.member-recharge-order-head {
    margin-bottom: 0;
}

.member-recharge-order-table {
    margin-top: 0;
}

.member-recharge-order-table tbody + tbody .header-row td {
    border-top: 10px solid #fff;
}

.member-recharge-order-table .header-row {
    background: #f7f7f7;
}

.member-recharge-order-table .header-row:hover,
.member-recharge-order-table .content-row:hover {
    background: #f7f7f7;
}

.member-recharge-order-table .content-row:hover {
    background: #fff;
}

.member-recharge-order-table .header-row td {
    padding: 8px 15px;
}

.member-recharge-order-table .order-item-header {
    display: inline-block;
    margin-right: 50px;
    color: #333;
    vertical-align: middle;
}

.member-recharge-order-table .order-item-header:first-child {
    margin-right: 10px;
}

.member-recharge-order-table .order-item-header.more {
    position: relative;
    cursor: pointer;
}

.member-recharge-order-table .more-operation {
    display: none;
    position: absolute;
    z-index: 20;
    top: 28px;
    left: -12px;
    width: 210px;
    padding: 10px;
    color: #333;
    line-height: 20px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(200, 201, 204, .5);
}

.member-recharge-order-table .more-operation::before {
    position: absolute;
    top: -14px;
    left: 8px;
    content: "";
    border: 8px solid transparent;
    border-bottom-color: #fff;
}

.member-recharge-order-table td {
    padding: 12px 15px;
    border-color: #f1f1f1;
}

.member-recharge-order-table .operation .layui-btn {
    display: inline;
    padding: 0 0 0 8px;
    margin: 0;
    line-height: 23px;
    background: transparent;
    border: 0;
}

.order-no-data-block ul {
    width: 200px;
    margin: 20px auto;
    padding-bottom: 20px;
}

.order-no-data-block li {
    color: #c2c2c2;
    text-align: center;
}

.order-no-data-block li:first-child {
    height: 70px;
    line-height: 70px;
}

.order-no-data-block li:first-child i {
    font-size: 35px;
}

.member-recharge-detail-card .promotion-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 0 22px;
    padding: 8px 0;
}

.member-recharge-detail-card .upload-img-box img {
    max-width: 180px;
    max-height: 120px;
    border: 1px solid #e2e7f0;
    object-fit: contain;
}

.member-recharge-detail-actions {
    padding: 0 0 20px;
}

.h5-recharge-phone {
    background: #f5f6f8;
    min-height: 100vh;
    padding-bottom: 78px;
}

.h5-recharge-hero {
    margin: 12px;
    padding: 18px;
    color: #fff;
    background: linear-gradient(135deg, #1266ff, #1f8cff);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(18, 102, 255, .18);
}

.h5-recharge-hero strong,
.h5-recharge-hero span {
    display: block;
}

.h5-recharge-hero strong {
    font-size: 19px;
    line-height: 26px;
}

.h5-recharge-hero span {
    margin-top: 6px;
    font-size: 13px;
    opacity: .9;
}

.h5-recharge-list,
.h5-recharge-order-list {
    padding: 0 12px 12px;
}

.h5-recharge-card,
.h5-recharge-order-card {
    position: relative;
    margin-top: 10px;
    padding: 14px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(18, 32, 56, .04);
}

.h5-recharge-card div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.h5-recharge-card strong {
    color: #f04b32;
    font-size: 24px;
    line-height: 30px;
}

.h5-recharge-card span,
.h5-recharge-card p,
.h5-recharge-order-card p {
    color: #69788f;
    font-size: 13px;
}

.h5-recharge-card p {
    min-height: 19px;
    margin: 8px 86px 0 0;
}

.h5-recharge-card button {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 72px;
    height: 32px;
    border: 0;
    border-radius: 16px;
    background: #1266ff;
    color: #fff;
}

.h5-recharge-card button:disabled {
    background: #c4ccd8;
}

.h5-recharge-custom-card {
    padding-bottom: 62px;
}

.h5-recharge-custom-card div {
    display: block;
}

.h5-recharge-custom-card strong {
    color: #1f2d3d;
    font-size: 20px;
}

.h5-recharge-custom-card label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.h5-recharge-custom-card label span {
    width: 64px;
    color: #44546a;
    font-size: 13px;
}

.h5-recharge-custom-card input {
    flex: 1;
    height: 38px;
    min-width: 0;
    border: 1px solid #d9e1ef;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 14px;
}

.h5-mobile-tip {
    margin: 0 12px 12px;
    color: #8a94a6;
    font-size: 12px;
}

.h5-recharge-order-card .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f6;
}

.h5-recharge-order-card .head strong {
    color: #1f2d3d;
    font-size: 15px;
}

.h5-recharge-order-card .head span {
    color: #1266ff;
    font-size: 13px;
}

.h5-recharge-order-card .body {
    padding-top: 10px;
}

.h5-recharge-order-actions {
    justify-content: flex-end;
    margin-top: 12px;
}

.h5-recharge-order-actions a {
    min-width: 72px;
}

.manjian-admin-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.manjian-admin-filter > .layui-input {
    width: 190px;
}

.manjian-admin-filter .date-sep {
    color: #8b98aa;
}

.manjian-admin-tabs {
    margin-top: 0;
}

.manjian-admin-tabs .layui-tab-title {
    background: #fff;
}

.manjian-admin-form .layui-card,
.manjian-admin-detail .layui-card {
    margin: 0 0 16px;
}

.manjian-admin-form .inline-fields,
.manjian-rule-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.manjian-rule-list {
    width: 860px;
    max-width: calc(100% - 20px);
}

.manjian-rule-row {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #e6edf5;
    background: #fbfcff;
}

.manjian-coupon-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    color: #586780;
}

.manjian-coupon-choice {
    margin-right: 2px;
}

.manjian-coupon-num {
    width: 58px;
    height: 28px;
}

.manjian-goods-box {
    width: 860px;
    max-width: calc(100% - 20px);
    max-height: 360px;
    overflow: auto;
    border: 1px solid #e6edf5;
    background: #fff;
}

.manjian-goods-item {
    display: grid;
    grid-template-columns: 28px 1fr 90px;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid #eef2f7;
}

.manjian-goods-item:last-child {
    border-bottom: 0;
}

.manjian-goods-item span {
    color: #1f2d3d;
}

.manjian-goods-item em {
    color: #8b98aa;
    font-style: normal;
    text-align: right;
}

.manjian-admin-detail .detail-row {
    display: flex;
    min-height: 34px;
    line-height: 34px;
}

.manjian-admin-detail .detail-row span {
    width: 120px;
    color: #586780;
    text-align: right;
}

.manjian-admin-detail .detail-row b {
    flex: 1;
    padding-left: 12px;
    color: #1f2d3d;
    font-weight: 400;
}

.discount-admin-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.discount-admin-filter label {
    color: #1f2d3d;
}

.discount-admin-filter .len-mid {
    width: 170px;
}

.discount-admin-filter .date-sep {
    color: #8b98aa;
}

.discount-admin-tabs {
    margin-top: 0;
}

.discount-admin-tabs .layui-tab-title {
    background: #fff;
}

.discount-table .old-checkbox,
.discount-sku-edit-table .old-checkbox {
    margin: 0;
}

.discount-goods-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
}

.discount-goods-title.no-expand {
    gap: 10px;
}

.discount-expand {
    width: 18px;
    height: 18px;
    border: 1px solid #d7e0ec;
    background: #fff;
    color: #0b65f8;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
}

.discount-goods-img,
.discount-sku-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border: 1px solid #edf1f7;
    background: #f5f8fc;
    color: #8b98aa;
}

.discount-goods-img img,
.discount-sku-img img {
    max-width: 100%;
    max-height: 100%;
}

.discount-goods-name {
    flex: 1;
    line-height: 1.5;
    color: #1f2d3d;
    word-break: break-all;
}

.discount-sku-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 45px;
    color: #586780;
}

.discount-sku-card {
    display: flex;
    align-items: center;
    width: 294px;
    min-height: 180px;
    padding: 10px;
    border: 1px solid #efefef;
    background: #fff;
}

.discount-sku-card .discount-sku-img {
    width: 120px;
    height: 120px;
    margin-right: 8px;
}

.discount-sku-info {
    flex: 1;
    min-width: 0;
}

.discount-sku-info span,
.discount-sku-info em {
    display: -webkit-box;
    margin-bottom: 5px;
    overflow: hidden;
    color: #586780;
    font-style: normal;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.discount-sku-info span {
    color: #1f2d3d;
    -webkit-line-clamp: 2;
}

.discount-batch-row {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e6edf5;
    background: #fff;
}

.discount-admin-form .layui-card,
.discount-admin-detail .layui-card {
    margin: 0 0 16px;
}

.discount-admin-form .inline-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.discount-edit-goods,
.discount-product-picker {
    width: 1000px;
    max-width: calc(100% - 20px);
}

.discount-product-picker {
    max-height: 520px;
    overflow: auto;
    border: 1px solid #e6edf5;
    background: #fff;
}

.discount-product-card {
    border-bottom: 1px solid #e6edf5;
}

.discount-product-card:last-child {
    border-bottom: 0;
}

.discount-product-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 8px 12px;
    background: #f8fafd;
}

.discount-edit-title {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #e6edf5;
    border-bottom: 0;
    background: #f8fafd;
    color: #1f2d3d;
    line-height: 40px;
}

.discount-sku-edit-table {
    margin: 0;
}

.discount-sku-edit-table .len-input {
    width: 120px;
}

.discount-selected-count {
    margin-top: 10px;
    color: #586780;
}

.bundling-admin-form .inline-fields,
.bundling-admin-form .old-choice-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bundling-selected-table {
    width: 1000px;
    max-width: calc(100% - 20px);
    margin: 0 0 10px;
}

.bundling-select-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0;
    color: #586780;
}

.bundling-select-actions em {
    color: #105cfb;
    font-style: normal;
}

.bundling-product-picker {
    display: none;
    width: 1000px;
    max-width: calc(100% - 20px);
    max-height: 520px;
    overflow: auto;
    border: 1px solid #e6edf5;
    background: #fff;
}

.bundling-product-picker.is-open {
    display: block;
}

.bundling-money-line {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #1f2d3d;
}

.bundling-money-line strong {
    font-weight: 500;
}

.old-detail-list {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    row-gap: 14px;
    column-gap: 10px;
    margin: 0;
    color: #1f2d3d;
}

.old-detail-list dt {
    text-align: right;
    color: #586780;
}

.old-detail-list dd {
    margin: 0;
}

.h5-bundling-phone {
    min-height: 100vh;
    background: #f5f7fb;
}

.h5-bundling-head,
.h5-bundling-card,
.h5-bundling-buy {
    margin: 10px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(16, 92, 251, 0.04);
}

.h5-bundling-head {
    padding: 16px;
}

.h5-bundling-head h1 {
    margin: 0 0 12px;
    color: #1f2d3d;
    font-size: 18px;
    line-height: 1.35;
}

.h5-bundling-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.h5-bundling-price span {
    color: #586780;
    font-size: 12px;
}

.h5-bundling-price strong {
    color: #ff2c44;
    font-size: 24px;
}

.h5-bundling-price del,
.h5-bundling-head p {
    color: #8a93a6;
}

.h5-bundling-head p {
    margin: 8px 0 0;
    font-size: 13px;
}

.h5-bundling-card {
    padding: 12px 0;
}

.h5-bundling-card h2 {
    margin: 0;
    padding: 0 14px 10px;
    border-bottom: 1px solid #eef2f7;
    font-size: 15px;
}

.h5-bundling-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
}

.h5-bundling-item:last-child {
    border-bottom: 0;
}

.h5-bundling-img {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    overflow: hidden;
    border-radius: 6px;
    background: #f2f5fa;
}

.h5-bundling-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-bundling-img span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #8a93a6;
    font-size: 12px;
}

.h5-bundling-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.h5-bundling-info strong {
    color: #1f2d3d;
    font-size: 14px;
}

.h5-bundling-info span {
    color: #8a93a6;
    font-size: 12px;
}

.h5-bundling-info em {
    color: #ff2c44;
    font-style: normal;
}

.h5-bundling-buy {
    padding: 14px;
}

.h5-bundling-buy label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    color: #1f2d3d;
}

.h5-bundling-buy input {
    width: 90px;
    height: 34px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    text-align: center;
}

.h5-bundling-buy button {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 22px;
    background: #105cfb;
    color: #fff;
    font-size: 16px;
}

.discount-selected-count span {
    color: #0b65f8;
}

.discount-admin-detail .detail-row {
    display: flex;
    min-height: 34px;
    line-height: 34px;
}

.discount-admin-detail .detail-row span {
    width: 120px;
    color: #586780;
    text-align: right;
}

.discount-admin-detail .detail-row b {
    flex: 1;
    padding-left: 12px;
    color: #1f2d3d;
    font-weight: 400;
}

.pintuan-admin-filter,
.pintuan-group-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.pintuan-admin-filter label,
.pintuan-group-filter label {
    color: #1f2d3d;
}

.pintuan-admin-filter .len-mid,
.pintuan-group-filter .len-mid {
    width: 170px;
}

.pintuan-admin-filter .date-sep,
.pintuan-group-filter .date-sep {
    color: #8b98aa;
}

.pintuan-admin-tabs {
    margin-top: 0;
}

.pintuan-admin-tabs .layui-tab-title {
    background: #fff;
}

.pintuan-table .old-checkbox,
.pintuan-sku-edit-table .old-checkbox {
    margin: 0;
}

.pintuan-admin-form .layui-card,
.pintuan-admin-detail .layui-card,
.pintuan-group-order-page .layui-card {
    margin: 0 0 16px;
}

.pintuan-admin-form .inline-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pintuan-admin-form .old-radio-row,
.pintuan-admin-form .old-checkbox-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pintuan-admin-form .layui-input-block .old-radio,
.pintuan-admin-form .layui-input-block .old-checkbox {
    min-height: 32px;
}

.pintuan-ladder-block .layui-input-block.inline-fields {
    flex: 0 1 auto;
}

.pintuan-sku-edit-table {
    min-width: 980px;
}

.pintuan-sku-edit-table th,
.pintuan-sku-edit-table td {
    vertical-align: middle;
}

.pintuan-sku-edit-table .len-input {
    width: 110px;
}

.pintuan-sku-edit-table .forbidden {
    background: #f5f5f5;
    color: #8a94a6;
    cursor: not-allowed;
}

.pintuan-product-picker {
    width: 1040px;
    max-width: calc(100% - 20px);
}

.pintuan-admin-detail .detail-row,
.pintuan-group-order-page .detail-row {
    display: flex;
    min-height: 34px;
    line-height: 34px;
}

.pintuan-admin-detail .detail-row span,
.pintuan-group-order-page .detail-row > span {
    width: 150px;
    color: #586780;
    text-align: right;
}

.pintuan-admin-detail .detail-row b,
.pintuan-group-order-page .detail-row b {
    flex: 1;
    padding-left: 12px;
    color: #1f2d3d;
    font-weight: 400;
}

.promotion-stat-view {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 92px;
}

.promotion-stat-item {
    flex: 0 0 180px;
    padding: 18px 24px;
    border-right: 1px solid #edf0f5;
}

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

.promotion-stat-item-title {
    color: #586780;
    line-height: 22px;
}

.promotion-stat-item-value {
    margin-top: 8px;
    color: #172033;
    font-size: 24px;
    font-weight: 700;
}

.pintuan-member-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
}

.pintuan-member-cell span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid #e6edf5;
    border-radius: 50%;
    background: #f5f8fc;
    color: #8b98aa;
    flex: none;
}

.pintuan-member-cell.inline span {
    width: 50px;
    height: 50px;
}

.pintuan-member-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pintuan-member-cell b,
.pintuan-member-cell em {
    color: #1f2d3d;
    font-style: normal;
    font-weight: 400;
}

.pintuan-group-summary .discount-goods-title {
    display: inline-flex;
    min-height: 50px;
}

.pintuan-group-page .shop-content-list,
.pintuan-group-order-page .shop-content-list {
    border-top: 1px solid #e6e8ef;
    border-radius: 2px;
}
.h5-pintuan-phone {
    background: #f6f7fb;
    padding-bottom: 76px;
}

.h5-pintuan-search {
    margin: 10px 12px;
}

.h5-pintuan-list,
.h5-pintuan-my-list {
    display: grid;
    gap: 10px;
    padding: 0 12px 16px;
}

.h5-pintuan-card,
.h5-pintuan-order-card {
    display: flex;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    color: #303133;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}

.h5-pintuan-img {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef3fb;
    display: grid;
    place-items: center;
    color: #8c9bb0;
    font-size: 13px;
}

.h5-pintuan-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-pintuan-info,
.h5-pintuan-order-card > div {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.h5-pintuan-info strong,
.h5-pintuan-order-card strong {
    font-size: 15px;
    line-height: 1.35;
    color: #202633;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.h5-pintuan-info em,
.h5-pintuan-order-card em,
.h5-pintuan-order-card small {
    font-style: normal;
    font-size: 12px;
    color: #8b97aa;
}

.h5-pintuan-info span,
.h5-pintuan-order-card span {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #8b97aa;
    font-size: 12px;
}

.h5-pintuan-info b {
    color: #ff3434;
    font-size: 19px;
}

.h5-pintuan-info del {
    color: #a5adba;
}

.h5-pintuan-info i {
    align-self: flex-end;
    font-style: normal;
    background: linear-gradient(90deg, #ff5a2c, #ff1f56);
    color: #fff;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    padding: 0 14px;
    font-size: 13px;
}

.h5-pintuan-detail-phone {
    background: #f5f6fa;
    padding-bottom: 120px;
}

.h5-pintuan-media {
    height: 375px;
    background: #f0f4fb;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.h5-pintuan-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-pintuan-price-band {
    background: linear-gradient(90deg, #ff5638, #ff1972);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}

.h5-pintuan-price-band div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.h5-pintuan-price-band em,
.h5-pintuan-price-band del,
.h5-pintuan-price-band span {
    font-style: normal;
    font-size: 12px;
    opacity: .92;
}

.h5-pintuan-price-band strong {
    font-size: 24px;
}

.h5-pintuan-title-card,
.h5-pintuan-section {
    background: #fff;
    margin: 10px 12px 0;
    border-radius: 10px;
    padding: 12px;
}

.h5-pintuan-title-card h1 {
    margin: 0;
    font-size: 17px;
    line-height: 1.4;
    color: #1f2530;
}

.h5-pintuan-title-card p {
    margin: 6px 0 0;
    color: #8b97aa;
    font-size: 13px;
}

.h5-pintuan-title-card div {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: #8b97aa;
    font-size: 12px;
}

.h5-pintuan-section h2 {
    margin: 0 0 10px;
    font-size: 15px;
    color: #202633;
}

.h5-pintuan-section p {
    margin: 0;
    color: #6f7c90;
    font-size: 13px;
    line-height: 1.7;
}

.h5-pintuan-group-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #eef1f6;
}

.h5-pintuan-group-row:first-of-type {
    border-top: 0;
}

.h5-pintuan-group-row span {
    color: #202633;
    font-size: 14px;
}

.h5-pintuan-group-row em {
    font-style: normal;
    color: #ff3434;
    font-size: 12px;
}

.h5-pintuan-group-row form {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.h5-pintuan-group-row input,
.h5-pintuan-bottom-actions input {
    min-width: 0;
    flex: 1;
    height: 34px;
    border: 1px solid #d9e1ef;
    border-radius: 17px;
    padding: 0 12px;
    font-size: 13px;
}

.h5-pintuan-group-row button,
.h5-pintuan-group-row a,
.h5-pintuan-share-actions a,
.h5-pintuan-bottom-actions button,
.h5-pintuan-bottom-actions .primary {
    border: 0;
    border-radius: 17px;
    background: #ff4d37;
    color: #fff;
    min-height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.h5-pintuan-skus {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.h5-pintuan-skus a {
    border: 1px solid #dde5f1;
    border-radius: 15px;
    color: #4b5b73;
    padding: 6px 12px;
    font-size: 13px;
    background: #fff;
}

.h5-pintuan-skus a.active {
    color: #ff3434;
    border-color: #ff3434;
    background: #fff5f3;
}

.h5-pintuan-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    text-align: center;
}

.h5-pintuan-flow span {
    display: grid;
    gap: 5px;
    justify-items: center;
    color: #4c5a70;
    font-size: 11px;
}

.h5-pintuan-flow img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.h5-pintuan-bottom-actions {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100vw, 420px);
    background: #fff;
    border-top: 1px solid #e8edf4;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    z-index: 20;
}

.h5-pintuan-bottom-actions > a {
    flex: 0 0 46px;
    text-align: center;
    color: #5f6d82;
    font-size: 12px;
}

.h5-pintuan-bottom-actions form {
    min-width: 0;
    flex: 1;
    display: flex;
    gap: 6px;
}

.h5-pintuan-bottom-actions button {
    border-radius: 18px;
    white-space: nowrap;
    background: linear-gradient(90deg, #ff6a2a, #ff1c55);
}

.h5-pintuan-bottom-actions button.plain {
    background: #2f88ff;
}

.h5-pintuan-share-head {
    margin: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff6a2a, #ff245a);
    color: #fff;
    padding: 18px 14px;
    display: grid;
    gap: 6px;
    text-align: center;
}

.h5-pintuan-share-head.success {
    background: linear-gradient(135deg, #24ba69, #12a572);
}

.h5-pintuan-share-head.fail {
    background: linear-gradient(135deg, #9aa6b8, #6f7b90);
}

.h5-pintuan-share-head strong {
    font-size: 22px;
}

.h5-pintuan-share-head span {
    font-size: 14px;
}

.h5-pintuan-members {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h5-pintuan-members span {
    width: 56px;
    display: grid;
    justify-items: center;
    gap: 4px;
    color: #6f7c90;
    font-size: 11px;
}

.h5-pintuan-members img,
.h5-pintuan-members b {
    width: 42px;
    height: 42px;
    border-radius: 21px;
}

.h5-pintuan-members img {
    object-fit: cover;
}

.h5-pintuan-members b {
    display: grid;
    place-items: center;
    background: #eef3fb;
    color: #9aa6b8;
}

.h5-pintuan-share-actions {
    display: flex;
    gap: 10px;
    padding: 14px 12px;
}

.h5-pintuan-share-actions a {
    flex: 1;
    background: #fff;
    color: #2f88ff;
    border: 1px solid #cfe0ff;
}

.h5-pintuan-share-actions a.primary {
    background: #ff4d37;
    color: #fff;
    border-color: #ff4d37;
}

.h5-goods-pintuan-entry {
    margin: 10px 12px 0;
    background: linear-gradient(90deg, #ff5b31, #ff225c);
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.h5-goods-pintuan-entry span {
    font-size: 13px;
    opacity: .92;
}

.h5-goods-pintuan-entry strong {
    font-size: 20px;
    margin-right: auto;
}

.h5-goods-pintuan-entry em {
    font-style: normal;
    font-size: 12px;
}

.h5-goods-seckill-entry,
.h5-seckill-price-band {
    background: linear-gradient(90deg, #ff3d19, #ff8a00);
}

.h5-goods-presale-entry {
    background: linear-gradient(90deg, #2f7bff, #20b8ff);
}

.h5-seckill-phone {
    background: #f6f7fb;
    padding-bottom: 76px;
}

.h5-seckill-status {
    background: #ff5a1f;
    color: #fff;
}

.h5-seckill-tabs {
    display: flex;
    gap: 1px;
    background: #fff;
    border-bottom: 1px solid #edf1f7;
    overflow-x: auto;
    scrollbar-width: none;
}

.h5-seckill-tabs::-webkit-scrollbar {
    display: none;
}

.h5-seckill-tabs a {
    flex: 1 0 96px;
    display: grid;
    gap: 3px;
    justify-items: center;
    padding: 10px 8px 9px;
    color: #606b7d;
    background: #fff;
}

.h5-seckill-tabs a.active {
    color: #fff;
    background: #ff5a1f;
}

.h5-seckill-tabs strong {
    font-size: 16px;
}

.h5-seckill-tabs span {
    font-size: 12px;
}

.h5-seckill-list {
    display: grid;
    gap: 10px;
    padding: 10px 12px 16px;
}

.h5-seckill-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    color: #303133;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}

.h5-seckill-img {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 8px;
    background: #fff0e8;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #bd8d74;
    font-size: 13px;
}

.h5-seckill-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-seckill-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.h5-seckill-info strong {
    font-size: 15px;
    line-height: 1.35;
    color: #202633;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.h5-seckill-info em,
.h5-seckill-stock {
    font-style: normal;
    font-size: 12px;
    color: #8b97aa;
}

.h5-seckill-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.h5-seckill-price b {
    color: #ff2d1f;
    font-size: 20px;
}

.h5-seckill-price del {
    color: #a5adba;
    font-size: 12px;
}

.h5-seckill-info i {
    align-self: flex-end;
    font-style: normal;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    padding: 0 14px;
    background: linear-gradient(90deg, #ff5a1f, #ff2b1f);
    color: #fff;
    font-size: 13px;
}

.h5-seckill-detail-phone {
    background: #f5f6fa;
    padding-bottom: 120px;
}

.h5-seckill-media {
    background: #fff2ec;
}

.h5-seckill-price-band {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}

.h5-seckill-price-band div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.h5-seckill-price-band em,
.h5-seckill-price-band del,
.h5-seckill-price-band span {
    font-style: normal;
    font-size: 12px;
    opacity: .92;
}

.h5-seckill-price-band strong {
    font-size: 25px;
}

.h5-seckill-time-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.h5-seckill-time-list span {
    border: 1px solid #ffe1d2;
    border-radius: 15px;
    background: #fff8f4;
    color: #ff5a1f;
    padding: 6px 12px;
    font-size: 13px;
}

.h5-seckill-rich div {
    color: #3d4858;
    font-size: 13px;
    line-height: 1.7;
}

.h5-seckill-rich img,
.h5-seckill-rich video {
    max-width: 100%;
    height: auto;
}

.h5-seckill-bottom-actions button {
    background: linear-gradient(90deg, #ff5a1f, #ff2b1f);
}

.h5-seckill-bottom-actions button:disabled {
    background: #c8d0dc;
}

.topic-adv-thumb img,
.topic-upload-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topic-upload-box {
    position: relative;
    width: 100px;
    height: 100px;
    padding: 0;
    margin-bottom: 10px;
    border: 1px dashed #d8dee9;
    border-radius: 2px;
    background: #fff;
    color: #8b95aa;
    cursor: pointer;
    overflow: hidden;
}

.topic-upload-box .upload-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.topic-upload-box .upload-default i {
    display: block;
    font-size: 24px;
    font-style: normal;
    line-height: 1;
}

.topic-upload-box .upload-default p {
    margin: 8px 0 0;
}

.topic-upload-box .operation {
    position: absolute;
    inset: auto 0 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 28px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 12px;
}

.topic-upload-box.hover:hover .operation {
    display: flex;
}

.topic-upload-box .replace_img {
    color: #fff;
}

.topic-color-input {
    width: 88px;
    padding: 4px;
}

.h5-topic-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.h5-topic-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #303133;
    text-decoration: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(31, 45, 61, .08);
}

.h5-topic-banner {
    display: block;
    width: 100%;
    aspect-ratio: 2.7 / 1;
    background: #f5f7fa;
}

.h5-topic-banner img,
.h5-topic-detail-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.h5-topic-banner b {
    display: grid;
    height: 100%;
    place-items: center;
    color: #909399;
    font-weight: 400;
}

.h5-topic-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
}

.h5-topic-info strong,
.h5-topic-head h1,
.h5-topic-goods-card strong {
    color: #1f2d3d;
    font-size: 16px;
    line-height: 1.35;
}

.h5-topic-info em,
.h5-topic-info small,
.h5-topic-head p,
.h5-topic-head span,
.h5-topic-goods-card em,
.h5-topic-goods-card small {
    color: #7d8ca1;
    font-style: normal;
    line-height: 1.5;
}

.h5-topic-info i,
.h5-topic-goods-card i {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 12px;
    color: #fff;
    font-style: normal;
    background: #ff6a00;
    border-radius: 999px;
}

.h5-topic-detail-banner {
    width: 100%;
    aspect-ratio: 2.7 / 1;
    background: #f5f7fa;
}

.h5-topic-head {
    margin: 10px 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
}

.h5-topic-head h1 {
    margin: 0 0 8px;
}

.h5-topic-goods-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px 82px;
}

.h5-topic-goods-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    color: #303133;
    text-decoration: none;
    background: #fff;
    border-radius: 8px;
}

.h5-topic-goods-card > span {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f5f7fa;
    border-radius: 6px;
    overflow: hidden;
}

.h5-topic-goods-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.h5-topic-goods-card b {
    display: grid;
    height: 100%;
    place-items: center;
    color: #909399;
    font-weight: 400;
}

.h5-topic-goods-card div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.h5-topic-goods-card div b {
    display: inline;
    height: auto;
    place-items: initial;
    color: #ff4d00;
    font-size: 17px;
    font-weight: 700;
}

.h5-topic-goods-card del {
    color: #a8abb2;
    font-size: 12px;
}

.h5-topic-price-band {
    background: linear-gradient(90deg, #ff7a18, #ff2d55);
}

.h5-order-tip {
    margin: 6px 0 0;
    color: #ff5a00;
    font-size: 12px;
}

/* H5 goods cards: keep the legacy card link and buy action separated. */
.h5-product-row-link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.h5-product-row > .h5-list-buy,
.h5-product-row > .h5-list-buy-form {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-width: 42px;
}

.h5-product-row > .h5-list-buy {
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    font-style: normal;
    line-height: 28px;
    text-align: center;
}

.h5-product-row > .h5-card-buy-icon-cart,
.h5-product-row > .h5-card-buy-icon-add,
.h5-list-buy-form .h5-card-buy-icon-cart,
.h5-list-buy-form .h5-card-buy-icon-add {
    box-sizing: content-box;
    min-width: 18px;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    padding: 5px;
    font-size: 0;
    line-height: 18px;
}

.h5-product-row > .h5-card-buy-icon-cart i,
.h5-product-row > .h5-card-buy-icon-add i,
.h5-list-buy-form .h5-card-buy-icon-cart i,
.h5-list-buy-form .h5-card-buy-icon-add i {
    font-size: 18px;
    line-height: 18px;
}

.h5-product-row > .h5-card-buy-icon-diy,
.h5-list-buy-form .h5-card-buy-icon-diy {
    min-width: 40px;
    width: 40px;
    height: 40px;
    border: 0 !important;
    padding: 0;
    background: var(--goods-action-icon-bg, transparent);
    border-radius: var(--goods-action-icon-radius, 0) !important;
    font-size: 40px;
    line-height: 40px;
}

.h5-product-row > .h5-card-buy-icon-diy i,
.h5-list-buy-form .h5-card-buy-icon-diy i {
    font-size: 40px;
    line-height: 1;
}

.h5-product-row > .h5-card-buy-icon-diy img,
.h5-list-buy-form .h5-card-buy-icon-diy img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    vertical-align: middle;
}

.h5-list-buy-form {
    margin: 0;
}

.h5-list-buy-form .h5-list-buy {
    position: static;
    display: block;
    width: 100%;
    height: 26px;
    border: 0;
    padding: 0 8px;
    font-size: 12px;
    font-style: normal;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
}

.h5-list-buy-form .h5-card-buy-icon-cart,
.h5-list-buy-form .h5-card-buy-icon-add {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    padding: 5px;
    line-height: 18px;
}

.h5-guess-main {
    display: grid;
    color: inherit;
    text-decoration: none;
}

.h5-guess-buy,
.h5-guess-buy-form {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-width: 42px;
    height: 26px;
    margin: 0;
}

.h5-guess-buy-form {
    height: auto;
}

.h5-guess-buy {
    display: block;
    padding: 0 8px;
    font-size: 12px;
    font-style: normal;
    line-height: 28px;
    text-align: center;
}

.h5-guess-buy.h5-card-buy-icon-cart,
.h5-guess-buy.h5-card-buy-icon-add,
.h5-guess-buy-form .h5-card-buy-icon-cart,
.h5-guess-buy-form .h5-card-buy-icon-add {
    box-sizing: content-box;
    min-width: 18px;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    padding: 5px;
    font-size: 0;
    line-height: 18px;
}

.h5-guess-buy.h5-card-buy-icon-cart i,
.h5-guess-buy.h5-card-buy-icon-add i,
.h5-guess-buy-form .h5-card-buy-icon-cart i,
.h5-guess-buy-form .h5-card-buy-icon-add i {
    font-size: 18px;
    line-height: 18px;
}

.h5-guess-buy.h5-card-buy-icon-diy,
.h5-guess-buy-form .h5-card-buy-icon-diy {
    min-width: 40px;
    width: 40px;
    height: 40px;
    border: 0 !important;
    background: var(--goods-action-icon-bg, transparent);
    border-radius: var(--goods-action-icon-radius, 0) !important;
    padding: 0;
    font-size: 40px;
    line-height: 40px;
}

.h5-guess-buy.h5-card-buy-icon-diy i,
.h5-guess-buy-form .h5-card-buy-icon-diy i {
    font-size: 40px;
    line-height: 1;
}

.h5-guess-buy.h5-card-buy-icon-diy img,
.h5-guess-buy-form .h5-card-buy-icon-diy img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    vertical-align: middle;
}

.h5-guess-buy-form button {
    display: block;
    width: 100%;
    height: 26px;
    border: 0;
    padding: 0 8px;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
}

.h5-guess-buy-form .h5-card-buy-icon-cart,
.h5-guess-buy-form .h5-card-buy-icon-add {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    padding: 5px;
    line-height: 18px;
}

.h5-copyright-real {
    margin: 20px 0;
    padding: 0 14px;
    color: #666;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.h5-copyright-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.h5-copyright-logo img {
    width: 80px;
    height: 12px;
    object-fit: contain;
}

.h5-copyright-real a {
    color: inherit;
    text-decoration: none;
}

.h5-copyright-icp {
    display: block;
    margin-top: 5px;
}

.h5-copyright-links {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

.h5-copyright-record {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
}

.h5-copyright-record:first-child {
    margin-left: 0;
}

.h5-copyright-record img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    object-fit: contain;
}

.community-qrcode-table .community-qrcode-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.community-qrcode-table .img-box {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid #e5e9f2;
    background: #f7f8fa;
}

.community-qrcode-table .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-qrcode-table .img-box span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #8b95a5;
    font-size: 12px;
}

.community-qrcode-name {
    min-width: 0;
    color: #303133;
    text-align: left;
}

.product-qrcode-manage {
    display: inline-block;
    margin-left: 12px;
    color: #1f7cff;
    line-height: 34px;
    text-decoration: none;
}

body.h5-mobile-body .h5-store-payment-phone,
.h5-store-payment-phone {
    background: #f4f5f7;
}

body.h5-mobile-body .h5-store-paycode-phone,
.h5-store-paycode-phone {
    background: #f72d1e;
    padding: 15px;
    box-sizing: border-box;
}
.h5-goods-card-shell {
    align-items: flex-start;
    background: #f5f5f5;
}

.h5-goods-card-phone {
    min-height: 100vh;
    padding-bottom: 24px;
    background: #f5f5f5;
}

.h5-goods-card-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 40px;
    margin-bottom: 15px;
    border-radius: 0 0 12px 12px;
    background: #fff;
}

.h5-goods-card-tabs a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #303133;
    font-size: 15px;
}

.h5-goods-card-tabs a.active {
    color: var(--h5-theme, #1677ff);
}

.h5-goods-card-tabs a.active::after {
    position: absolute;
    right: 35%;
    bottom: 0;
    left: 35%;
    height: 3px;
    border-radius: 3px;
    background: var(--h5-theme, #1677ff);
    content: "";
}

.h5-goods-card-list {
    min-height: 360px;
}

.h5-goods-card-item {
    position: relative;
    display: block;
    height: 160px;
    margin: 0 15px 12px;
    overflow: hidden;
    border-radius: 9px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.h5-goods-card-overlay {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    box-sizing: border-box;
    padding: 18px;
    border-radius: inherit;
    background: rgba(0, 0, 0, .4);
}

.h5-goods-card-overlay > strong {
    overflow: hidden;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-card-overlay > em {
    display: -webkit-box;
    height: 26px;
    margin-top: 10px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-goods-card-meta {
    display: grid;
    grid-template-columns: .9fr .8fr 1.3fr;
    align-items: center;
    margin-top: auto;
    font-size: 12px;
    line-height: 1;
}

.h5-goods-card-meta i {
    min-width: 0;
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h5-goods-card-meta i:nth-child(2) {
    padding-left: 10px;
}

.h5-goods-card-meta i:last-child {
    text-align: right;
}

.h5-goods-card-meta.warning,
.h5-goods-card-validity.warning {
    color: #ff3535;
}

.h5-goods-card-empty {
    display: flex;
    min-height: 360px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #999;
}

.h5-goods-card-empty-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #bbb;
    font-size: 34px;
}

.h5-goods-card-empty strong {
    font-size: 14px;
    font-weight: 400;
}

.h5-goods-card-empty a {
    min-width: 88px;
    margin-top: 18px;
    padding: 8px 16px;
    border-radius: 18px;
    background: var(--h5-theme, #1677ff);
    color: #fff;
    text-align: center;
}

.h5-goods-card-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 10px 0;
    font-size: 13px;
}

.h5-goods-card-pagination a {
    color: var(--h5-theme, #1677ff);
}

.h5-goods-card-detail {
    padding-top: 12px;
}

.h5-goods-card-hero {
    margin-bottom: 12px;
}

.h5-goods-card-hero .h5-goods-card-overlay {
    padding: 22px 18px;
}

.h5-goods-card-validity {
    align-self: flex-end;
    margin-top: auto;
    font-size: 12px;
}

.h5-goods-card-package,
.h5-goods-card-introduction {
    margin: 0 12px 12px;
    padding: 0 12px 15px;
    border-radius: 9px;
    background: #fff;
}

.h5-goods-card-package h2,
.h5-goods-card-introduction h2 {
    margin: 0;
    padding-top: 12px;
    color: #303133;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.h5-goods-card-package-desc {
    margin: 5px 0 0 5px;
    color: #888;
    font-size: 12px;
}

.h5-goods-card-package-list {
    margin-top: 10px;
}

.h5-goods-card-package-item {
    position: relative;
    min-height: 100px;
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 6px;
    background: #fbf9fc;
}

.h5-goods-card-package-item:last-child {
    margin-bottom: 0;
}

.h5-goods-card-package-item > a {
    display: flex;
    min-height: 80px;
    padding-right: 70px;
    color: #303133;
}

.h5-goods-card-package-image,
.h5-goods-card-record-image {
    display: grid;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    place-items: center;
    margin-right: 12px;
    overflow: hidden;
    border-radius: 5px;
    background: #f0f4fa;
}

.h5-goods-card-package-image img,
.h5-goods-card-record-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-goods-card-package-image i,
.h5-goods-card-record-image i {
    color: #a8b4c5;
    font-size: 12px;
    font-style: normal;
}

.h5-goods-card-package-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.h5-goods-card-package-content strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-goods-card-package-content small:first-of-type {
    margin-top: auto;
}

.h5-goods-card-package-content small {
    color: #666;
    font-size: 12px;
    line-height: 1.5;
}

.h5-goods-card-verify {
    position: absolute;
    right: 10px;
    bottom: 24px;
}

.h5-goods-card-verify summary,
.h5-goods-card-pick-note {
    display: inline-flex;
    width: 64px;
    height: 25px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--h5-theme, #1677ff);
    border-radius: 25px;
    color: var(--h5-theme, #1677ff);
    cursor: pointer;
    font-size: 12px;
    list-style: none;
}

.h5-goods-card-verify summary::-webkit-details-marker {
    display: none;
}

.h5-goods-card-pick-note {
    position: absolute;
    right: 10px;
    bottom: 24px;
    border-color: var(--h5-theme, #1677ff);
    background: var(--h5-theme, #1677ff);
    color: #fff;
}

.h5-goods-card-verify[open] > div {
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    display: flex;
    width: min(315px, calc(100vw - 36px));
    max-height: calc(100vh - 48px);
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 24px 20px;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .28);
}

.h5-goods-card-verify .barcode {
    width: 240px;
    height: 50px;
    object-fit: contain;
}

.h5-goods-card-verify .qrcode {
    width: 165px;
    height: 165px;
    margin-top: 18px;
}

.h5-goods-card-verify b {
    margin: 8px 0 18px;
    color: #666;
    font-size: 14px;
    font-weight: 400;
}

.h5-goods-card-verify span {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 13px;
}

.h5-goods-card-verify em {
    max-width: 190px;
    overflow-wrap: anywhere;
    color: var(--h5-theme, #1677ff);
    font-style: normal;
    text-align: right;
}

.h5-goods-card-record-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0 5px;
    color: #888;
    font-size: 12px;
}

.h5-goods-card-record-link span {
    margin-left: 3px;
}

.h5-goods-card-introduction {
    margin-bottom: 20px;
    overflow: hidden;
}

.h5-goods-card-introduction > div {
    margin-top: 15px;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.h5-goods-card-introduction img,
.h5-goods-card-introduction video,
.h5-goods-card-introduction table {
    max-width: 100%;
}

.h5-goods-card-record-list {
    padding-bottom: 12px;
}

.h5-goods-card-record-item {
    margin: 12px 12px 0;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
}

.h5-goods-card-record-item > header {
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: space-between;
    margin: 0 12px;
    border-bottom: 1px solid #f4f4f4;
    color: #888;
    font-size: 12px;
}

.h5-goods-card-record-item > header b {
    color: var(--h5-theme, #1677ff);
    font-weight: 400;
}

.h5-goods-card-record-item > div {
    display: flex;
    padding: 10px;
}

.h5-goods-card-record-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.h5-goods-card-record-content strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-goods-card-record-content > span {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
}

.h5-goods-card-record-content em {
    color: var(--h5-theme, #1677ff);
    font-style: normal;
}

@media (max-width: 520px) {
    .h5-goods-card-shell .h5-phone {
        width: 100%;
        max-width: none;
    }
}

.h5-card-pickup-phone {
    padding-bottom: 0;
}

.h5-card-pickup-form {
    min-height: calc(100vh - 44px);
}

.h5-card-pickup-main {
    padding: 12px 12px 72px;
}

.h5-card-pickup-card {
    padding: 0 12px 15px;
    border-radius: 9px;
    background: #fff;
}

.h5-card-pickup-card h1 {
    margin: 0;
    padding-top: 12px;
    color: #303133;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.h5-card-pickup-desc {
    margin: 5px 0 0 5px;
    color: #888;
    font-size: 12px;
}

.h5-card-pickup-list {
    margin-top: 10px;
}

.h5-card-pickup-item {
    position: relative;
    display: flex;
    min-height: 100px;
    align-items: stretch;
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 6px;
    background: #fbf9fc;
    box-sizing: border-box;
}

.h5-card-pickup-item:last-child {
    margin-bottom: 0;
}

.h5-card-pickup-item.disabled {
    opacity: .7;
}

.h5-card-pickup-image {
    display: grid;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    place-items: center;
    margin-right: 12px;
    overflow: hidden;
    border-radius: 5px;
    background: #f0f4fa;
}

.h5-card-pickup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h5-card-pickup-image i {
    color: #a8b4c5;
    font-size: 12px;
    font-style: normal;
}

.h5-card-pickup-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding-right: 96px;
}

.h5-card-pickup-content strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-card-pickup-content small:first-of-type {
    margin-top: auto;
}

.h5-card-pickup-content small,
.h5-card-pickup-content em {
    color: #666;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
}

.h5-card-pickup-content em {
    color: #999;
}

.h5-card-pickup-stepper {
    position: absolute;
    right: 10px;
    bottom: 17px;
    display: grid;
    width: 88px;
    height: 25px;
    grid-template-columns: 25px 38px 25px;
    overflow: hidden;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

.h5-card-pickup-stepper button,
.h5-card-pickup-stepper input {
    width: 100%;
    height: 23px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #303133;
    font-size: 13px;
    line-height: 23px;
    text-align: center;
    box-sizing: border-box;
}

.h5-card-pickup-stepper input {
    border-right: 1px solid #e4e7ed;
    border-left: 1px solid #e4e7ed;
}

.h5-card-pickup-stepper button:disabled {
    color: #c0c4cc;
}

.h5-card-pickup-empty {
    padding: 60px 0;
    color: #999;
    font-size: 13px;
    text-align: center;
}

.h5-card-pickup-message {
    min-height: 18px;
    margin: 8px 12px 0;
    color: #f04444;
    font-size: 12px;
    text-align: center;
}

.h5-card-pickup-action {
    position: sticky;
    z-index: 30;
    bottom: 0;
    display: flex;
    height: 50px;
    align-items: center;
    padding: 6px 12px;
    border-top: 1px solid #edf0f4;
    background: #fff;
    box-sizing: border-box;
}

.h5-card-pickup-action button {
    width: 100%;
    height: 38px;
    border: 0;
    border-radius: 19px;
    background: var(--h5-theme, #1677ff);
    color: #fff;
    font-size: 14px;
}

.h5-card-pickup-action button:disabled {
    background: #c7d1df;
}

/* Legacy shop palette semantics: every H5 surface consumes the selected theme. */
.h5-goods-community-card > button,
.h5-goods-sheet-primary,
.h5-goods-sku-confirm,
.h5-goods-action-bar .h5-goods-buy-now {
    background: var(--goods-btn-color, var(--base-color, #F4391c));
    color: var(--btn-text-color, #fff);
}

.h5-goods-sku-cart,
.h5-goods-action-bar .h5-goods-action-cart {
    background: var(--goods-btn-color-shallow, var(--base-help-color, #F7B500));
    color: #fff;
}

.h5-goods-promotion-row strong > em,
.h5-goods-price-symbol,
.h5-goods-price-line strong,
.h5-goods-sku-head strong,
.h5-detail-price,
.h5-sku-list span,
.h5-guess-price,
.h5-order-item b,
.h5-amount-card strong,
.h5-payment-record b,
.h5-cart-info b,
.h5-cart-summary strong,
.h5-order-list-card header strong,
.h5-refund-list-card footer b,
.h5-refund-activist-card footer b,
.h5-cart-price-row b,
.h5-cart-discount-body .total b,
.h5-cart-sku-head b,
.h5-cart-sku-options span,
.h5-payment-goods-info b,
.h5-payment-submit strong {
    color: var(--goods-price-color, var(--price-color, #FC5227));
}

.h5-goods-store-sheet-item.active > i,
.h5-goods-spec-value.active,
.h5-goods-sku-option.active,
.h5-goods-sku-option.active strong {
    border-color: var(--goods-btn-color, var(--base-color, #F4391c));
    color: var(--goods-btn-color, var(--base-color, #F4391c));
}

.h5-goods-coupon-tags b {
    border-color: var(--goods-coupon-color, #FC5227);
    color: var(--goods-coupon-color, #FC5227);
}

.h5-member-orders-real i strong {
    background: var(--base-color, #F4391c);
}

.h5-order-status,
.h5-member-head,
.h5-login-head {
    background: linear-gradient(135deg, var(--theme-bg-color, var(--base-color, #F4391c)), var(--theme-bg-color-shallow, var(--base-color, #F4391c)));
}

.h5-order-tabs a.active::after {
    background: var(--base-color, #F4391c);
}

.h5-filter-tags label.active span,
.h5-cart-sku-options button.active,
.h5-mobile-tip {
    background: var(--base-color-shallow, #FFF4F4);
    color: var(--base-color, #F4391c);
}

.h5-delivery-mode,
.h5-delivery-action,
.h5-delivery-action label.active::before,
.h5-delivery-action label.active::after {
    background: var(--base-color-shallow, #FFF4F4);
}

.h5-payment-phone {
    background: linear-gradient(180deg, var(--theme-bg-color, var(--base-color, #F4391c)) 0, var(--theme-bg-color-shallow, var(--base-color, #F4391c)) 130px, #f4f6fb 130px, #f4f6fb 100%);
}

.h5-payment-status {
    background: var(--theme-bg-color, var(--base-color, #F4391c));
    color: var(--btn-text-color, #fff);
}

.h5-checkout-actions .h5-primary,
.h5-pay-result-actions .go-home,
.h5-order-actions .h5-primary-link,
.h5-lookup-result a,
.h5-legacy-empty a,
.h5-external-link,
.h5-login-form button,
.h5-auth-submit,
.h5-auth-index-btn.is-primary,
.h5-cart-summary button,
.h5-order-switch a.active,
.h5-filter-drawer footer button,
.h5-order-list-card footer a.primary,
.h5-refund-activist-actions button.primary,
.h5-evaluate-tabs a.active,
.h5-eval-bottom button,
.h5-cart-summary form button,
.h5-cart-sku-footer button,
.h5-payment-card button,
.h5-store-confirm-actions .primary,
.h5-store-required .primary,
.h5-payment-submit button,
.h5-message-sheet footer button,
.h5-pay-choice-footer button,
.h5-offlinepay-footer .save,
.h5-invoice-sheet footer button {
    color: var(--btn-text-color, #fff);
}

/* The old category page uses one embedded search field and compact goods rows. */
.h5-category-search {
    position: sticky;
    top: 0;
    z-index: 5;
    display: block;
    padding: 10px 15px;
    border-bottom: 0;
    background: #fff;
}

.h5-category-search input {
    width: 100%;
    height: 32px;
    padding: 0 42px 0 20px;
    border: 0;
    border-radius: 20px;
    outline: 0;
    background: #f5f5f5;
    color: #333;
    box-sizing: border-box;
}

.h5-category-search button {
    position: absolute;
    top: 10px;
    right: 15px;
    display: grid;
    width: 40px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: #89899a;
    font-size: 18px;
}

.h5-category-layout {
    grid-template-columns: clamp(85px, 22.6667vw, 106px) minmax(0, 1fr);
}

.h5-category-template-goods .h5-category-layout nav a {
    position: relative;
    min-height: 50px;
    justify-content: center;
    padding: 0 8px;
    border-left: 0;
    background: #f5f5f5;
    color: #303133;
    line-height: 18px;
    text-align: center;
    word-break: break-word;
}

.h5-category-template-goods .h5-category-layout nav a.active {
    background: #fff;
    color: #303133;
}

.h5-category-template-goods .h5-category-layout nav a.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 17px;
    border-radius: 0 4px 4px 0;
    background: var(--base-color, #F4391c);
    transform: translateY(-50%);
}

.h5-category-goods {
    padding: 13px 10px 10px;
}

.h5-category-subtabs {
    display: flex;
    margin: -3px 0 10px;
    padding: 0 28px 0 0;
    overflow-x: auto;
    gap: 8px;
    background: #fff;
    white-space: nowrap;
    scrollbar-width: none;
}

.h5-category-subtabs::-webkit-scrollbar {
    display: none;
}

.h5-category-subtabs a {
    display: block;
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 14px;
    background: #f5f5f5;
    color: #303133;
    font-size: 12px;
    line-height: 18px;
}

.h5-category-subtabs a.active {
    background: var(--base-color, #F4391c);
    color: var(--btn-text-color, #fff);
}

.h5-category-sections.all {
    scroll-behavior: smooth;
}

.h5-category-section {
    scroll-margin-top: 54px;
}

.h5-category-section + .h5-category-section {
    margin-top: 15px;
}

.h5-goods-section-real.goods-data.h5-category-goods-real .goods-list.row1-of1 .goods-item {
    min-height: clamp(90px, 24vw, 112px);
    margin: 0;
    padding: 0 0 clamp(13px, 3.4667vw, 16px);
    gap: clamp(7px, 1.8667vw, 9px);
    background: #fff;
    --goods-action-bg: var(--base-color, #F4391c) !important;
    --goods-action-color: var(--btn-text-color, #fff) !important;
    --goods-price-color: var(--price-color, #FC5227) !important;
}

.h5-goods-section-real.goods-data.h5-category-goods-real .goods-list.row1-of1 .goods-img {
    flex: 0 0 clamp(90px, 24vw, 112px);
    width: clamp(90px, 24vw, 112px);
    height: clamp(90px, 24vw, 112px);
    margin: 0;
}

.h5-goods-section-real.goods-data.h5-category-goods-real .goods-list.row1-of1 .info-wrap {
    width: auto;
    min-width: 0;
    padding: 2px 0 0;
}

.h5-category-goods-real .goods-list.row1-of1 .goods-name {
    display: -webkit-box;
    min-height: 36px;
    margin: 0;
    line-height: 18px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.h5-category-goods-real .goods-list.row1-of1 .pro-info {
    min-width: 0;
    margin-top: auto;
}

.h5-category-goods-real .goods-list .buy-btn {
    min-width: 40px;
    height: 25px;
    padding: 0 10px;
    color: var(--btn-text-color, #fff);
    background: var(--goods-action-bg, var(--base-color, #F4391c));
    line-height: 25px;
}

.h5-category-cart-spacer {
    height: clamp(50px, 13.3333vw, 63px);
}

.h5-category-cart-real {
    position: fixed;
    left: 50%;
    bottom: var(--h5-bottom-nav-offset, 0px);
    z-index: 29;
    display: flex;
    align-items: center;
    width: min(var(--old-diy-phone-width, 430px), 100vw);
    max-width: var(--old-diy-phone-width, 430px);
    height: clamp(50px, 13.3333vw, 63px);
    padding: 0 clamp(15px, 4vw, 19px);
    transform: translateX(-50%);
    border-top: 1px solid #f5f5f5;
    background: #fff;
    box-sizing: border-box;
}

.h5-category-cart-icon {
    position: relative;
    display: grid;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    place-items: center;
    border-radius: 50%;
    background: var(--base-color, #F4391c);
    color: var(--btn-text-color, #fff);
}

.h5-category-cart-icon > span {
    font-size: 20px;
}

.h5-category-cart-icon > i {
    position: absolute;
    top: -3px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 1px solid #fff;
    border-radius: 9px;
    background: var(--goods-cart-num-corner, #FC5227);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    line-height: 14px;
    text-align: center;
    box-sizing: border-box;
}

.h5-category-cart-total {
    min-width: 0;
    flex: 1;
    color: #303133;
    font-size: 13px;
}

.h5-category-cart-total strong {
    color: var(--price-color, #FC5227);
    font-size: 16px;
}

.h5-shell .h5-category-cart-checkout {
    display: grid;
    align-self: center;
    min-width: clamp(104px, 26.6667vw, 125px);
    height: clamp(35px, 9.3333vw, 44px);
    padding: 0 20px;
    place-items: center;
    border-radius: 999px;
    background: var(--base-color, #F4391c);
    color: var(--btn-text-color, #fff);
    font-size: 14px;
}

/* The legacy mobile tab bar is 110rpx, not a fixed 56px at every preview width. */
.h5-bottom-nav-real {
    height: calc(clamp(55px, 14.6667vw, 69px) + constant(safe-area-inset-bottom));
    height: calc(clamp(55px, 14.6667vw, 69px) + env(safe-area-inset-bottom, 0px));
    min-height: calc(clamp(55px, 14.6667vw, 69px) + constant(safe-area-inset-bottom));
    min-height: calc(clamp(55px, 14.6667vw, 69px) + env(safe-area-inset-bottom, 0px));
}

.h5-bottom-nav-spacer {
    height: calc(clamp(55px, 14.6667vw, 69px) + constant(safe-area-inset-bottom));
    height: calc(clamp(55px, 14.6667vw, 69px) + env(safe-area-inset-bottom, 0px));
}

.h5-bottom-nav-real a {
    height: clamp(55px, 14.6667vw, 69px);
    padding-bottom: clamp(5px, 1.3333vw, 6px);
}

.h5-bottom-nav-item-body {
    height: clamp(50px, 13.3333vw, 63px);
}

@media (max-width: 480px) {
    .h5-category-cart-real {
        width: 100%;
        max-width: none;
    }
}

/* Member style 4 keeps the legacy floating white account panel. */
.h5-member-real.style-4 {
    position: relative;
    min-height: 0;
    aspect-ratio: 375 / 278;
    padding: 0;
    overflow: visible;
    background: transparent !important;
    box-sizing: border-box;
}

.h5-member-real.style-4::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 44cqw;
    background: var(--member-info-background, var(--base-color, #F4391c));
    content: "";
    pointer-events: none;
}

.h5-member-real.style-4 .h5-member-profile-real,
.h5-member-real.style-4 .h5-member-style4-panel {
    z-index: 1;
}

.h5-member-real.style-4 .h5-member-profile-real {
    position: relative;
}

.h5-member-real.style-1 .h5-member-account-real {
    padding: 2.6667cqw 0;
}

.h5-member-real.style-2 {
    border-radius: 0 0 100% 100% / 0 0 35px 35px;
}

.h5-member-account-outside {
    margin-top: 2.6667cqw;
    border-radius: 2.4cqw;
    background: #fff;
    color: #333;
}

.h5-member-account-outside a + a {
    border-left-color: #f2f2f2;
}

.h5-member-account-outside strong {
    color: #000;
}

.h5-member-account-outside em {
    color: #666;
}

.h5-member-real.style-3,
.h5-member-real.style-3 .h5-member-account-real {
    color: #282c38;
}

.h5-member-real.style-3 .h5-member-profile-real strong,
.h5-member-real.style-3 .h5-member-setting-real,
.h5-member-real.style-3 .h5-member-account-real strong {
    color: #282c38;
}

.h5-member-real.style-3 .h5-member-account-real em {
    color: #aab0ba;
}

.h5-member-real.style-3 .h5-member-account-real a + a {
    border-left: 0;
}

.h5-member-real.style-4 .h5-member-style4-panel {
    position: absolute;
    top: 28.8cqw;
    right: 3.2cqw;
    left: 3.2cqw;
    padding: 4cqw;
    border-radius: 2.1333cqw;
    background: #fff;
    color: #282c38;
    box-sizing: border-box;
}

.h5-member-real.style-4 .h5-member-account-real {
    margin: 0;
    padding: 6.6667cqw 0;
    color: #282c38;
}

.h5-member-real.style-4 .h5-member-account-real a + a {
    border-left: 0;
}

.h5-member-real.style-4 .h5-member-account-real strong {
    color: #282c38;
    font-size: 5.0667cqw;
}

.h5-member-real.style-4 .h5-member-account-real em {
    color: #666;
}

.h5-member-real.style-4 .h5-member-style4-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 10.6667cqw;
    gap: 4cqw;
    align-items: center;
    margin: 0 1.3333cqw;
}

.h5-member-real.style-4 .h5-member-style4-actions a {
    display: grid;
    min-width: 0;
    height: 10.6667cqw;
    padding: 0 2.1333cqw;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 5.8667cqw;
    background: var(--base-color, #F4391c);
    color: var(--btn-text-color, #fff);
    font-size: 3.2cqw;
    line-height: 1;
    box-sizing: border-box;
}

.h5-member-real.style-4 .h5-member-style4-actions a:nth-child(2) {
    border-color: var(--base-color, #F4391c);
    background: #fff;
    color: var(--base-color, #F4391c);
}

.h5-member-real.style-4 .h5-member-style4-actions .h5-member-style4-code {
    width: 10.6667cqw;
    padding: 2.6667cqw;
    border: 0;
    border-radius: 50%;
    background: var(--base-color, #F4391c);
}

.h5-member-real.style-4 .h5-member-style4-code img {
    display: block;
    width: 5.3333cqw;
    height: 5.3333cqw;
}
.member-reward-form {
    padding: 28px 30px 70px;
    background: #fff;
    min-height: calc(100vh - 150px);
}

.member-reward-form .layui-form-item {
    margin-bottom: 18px;
}

.member-reward-form .layui-form-label {
    width: 150px;
}

.member-reward-form .layui-input-block {
    margin-left: 180px;
}

.member-reward-form .reward-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.member-reward-form .reward-inline .len-short {
    width: 160px;
}

.member-reward-form .reward-check-label {
    color: #303133;
}

.member-reward-coupon-table {
    width: 650px;
    margin: 0;
}

.member-reward-coupon-table .len-short {
    width: 100px;
}

.reward-coupon-enable {
    display: block;
    margin-bottom: 15px;
}

.reward-coupon-options {
    display: flex;
    flex-wrap: wrap;
    width: 700px;
    border: 1px solid #e5e7eb;
    padding: 12px 16px;
    gap: 12px 28px;
}

.reward-coupon-options label {
    min-width: 180px;
}

.member-reward-actions {
    margin-left: 180px;
    padding-top: 16px;
}

.member-consume-tabs {
    margin: 0;
    background: #fff;
}

.member-consume-tabs .layui-tab-title {
    padding-left: 20px;
}

.member-consume-records {
    background: #fff;
    padding: 20px;
    min-height: calc(100vh - 170px);
}

.member-consume-records .old-inline-search {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    margin-bottom: 15px;
}

.member-consume-records .old-inline-search .layui-select {
    width: 150px;
}

.member-consume-records .old-inline-search .layui-input {
    width: 240px;
}

.empty-inline {
    color: #909399;
    line-height: 38px;
}
/* Shared legacy lottery admin pages. */
.lottery-admin-page .lottery-table td,
.lottery-admin-page .lottery-table th { vertical-align: middle; }
.lottery-game-form .lottery-award-editor { min-width: 900px; }
.lottery-game-form .lottery-award-editor td { vertical-align: middle; }
.lottery-game-form .lottery-award-editor .layui-input,
.lottery-game-form .lottery-award-editor .layui-select { min-width: 110px; }
.lottery-game-form .lottery-add-award { margin-top: 14px; }
.old-detail-grid { display:grid;grid-template-columns:150px minmax(240px,1fr);margin:0;line-height:36px; }
.old-detail-grid dt { color:#666;text-align:right;padding-right:16px; }
.old-detail-grid dd { margin:0;color:#333;min-width:0; }

/* Old LiveInfo DIY protocol: one real live/upcoming room and two content toggles. */
.component-live-info .live-wrap {
    overflow: hidden;
    background: #fff;
}
.component-live-info .banner-wrap {
    position: relative;
    width: 100%;
    height: 104px;
    display: flex;
    overflow: hidden;
    background: #f2f3f5;
}
.component-live-info .banner-wrap > img,
.component-live-info .live-banner-empty {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.component-live-info .live-banner-empty,
.component-live-info .live-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999ca7;
    font-size: 12px;
}
.component-live-info .live-preview-empty {
    min-height: 104px;
    background: #fff;
}
.component-live-info .shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(136, 136, 136, .3);
}
.component-live-info .banner-wrap .wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 10px;
    box-sizing: border-box;
}
.component-live-info .room-name {
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.component-live-info .status-name {
    flex: 0 0 auto;
    margin-right: 10px;
    padding: 4px 6px;
    border-radius: 18px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
}
.component-live-info .status-name.active {
    background: var(--old-theme-color, #ff4544);
}
.component-live-info .status-name i {
    margin-right: 4px;
    font-size: 12px;
}
.component-live-info .room-info {
    height: 50px;
    padding: 10px;
    display: flex;
    align-items: center;
    min-width: 0;
    color: #303133;
    box-sizing: border-box;
}
.component-live-info .anchor-img {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 50%;
    object-fit: cover;
}
.component-live-info .anchor-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f3f5;
    color: #999ca7;
    font-size: 9px;
}
.component-live-info .anchor-name,
.component-live-info .goods-text {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.component-live-info .separate {
    flex: 0 0 auto;
    margin: 0 5px;
    color: #808080;
}

/* Old PaymentQrcode DIY protocol: one visibility switch and two fixed actions. */
.component-payment-qrcode .payment-qrocde-box {
    position: relative;
    min-height: 103px;
    overflow: hidden;
    display: flex;
    border-radius: 8px;
    background: #fff;
}
.component-payment-qrcode .qrocde-left {
    flex: 1;
    min-width: 0;
}
.component-payment-qrcode .qrocde-desc {
    margin: 10px 0 15px;
    color: #999;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}
.component-payment-qrcode .qrocde-action {
    padding-bottom: 15px;
    display: flex;
    justify-content: center;
}
.component-payment-qrcode .qrocde-action > div {
    width: 115px;
    height: 43px;
    margin: 0;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #999;
    color: #fff;
    box-sizing: border-box;
}
.component-payment-qrcode .qrocde-action > div:first-child {
    margin-right: 23px;
}
.component-payment-qrcode .qrocde-action i {
    margin-right: 5px;
    font-size: 18px;
}
.component-payment-qrcode .qrocde-action span {
    font-size: 15px;
}
.component-payment-qrcode .qrocde-right {
    position: relative;
    z-index: 2;
    flex: 0 0 45px;
    width: 45px;
    min-width: 45px;
    max-width: 45px;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-sizing: border-box;
}
.component-payment-qrcode .qrocde-right::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--base-color, #58be6a);
    transform: translateY(-50%);
}
.component-payment-qrcode .qrocde-right i {
    font-size: 17px;
}
.component-payment-qrcode .qrocde-right .name {
    margin-top: 6px;
    color: #fff;
    font-size: 13px;
    letter-spacing: 3px;
    line-height: 1.15;
    writing-mode: vertical-rl;
}
.component-payment-qrcode .payment-qrcode-hidden {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .82);
    color: #777;
    font-size: 14px;
}

.note-cover-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.note-cover-item {
    position: relative;
    width: 112px;
    height: 112px;
    overflow: hidden;
    background: #f5f5f5;
}
.note-cover-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.note-cover-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .58);
    font-size: 18px;
    line-height: 20px;
    cursor: pointer;
}
.old-inline-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}
.old-inline-filter > .layui-input {
    width: 140px;
}

.component-notes .goods-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px;
}
.component-notes .goods-head .title-wrap {
    display: flex;
    align-items: center;
    width: calc(100% - 75px);
}
.component-notes .goods-head .name {
    max-width: 180px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.component-notes .goods-head .more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 75px;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
}
.component-notes .goods-head .more i {
    margin-left: 2px;
    font-size: 12px;
}
.component-notes .list-wrap {
    width: 100%;
}
.component-notes .list-wrap .item {
    width: 100%;
    margin-top: 15px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .1);
}
.component-notes .list-wrap .item:first-child {
    margin-top: 0;
}
.component-notes .item-con {
    padding: 10px;
}
.component-notes .notes-title {
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.component-notes .notes-highlights-list {
    margin-top: 5px;
}
.component-notes .notes-highlights-list span {
    display: inline-block;
    margin-right: 5px;
    padding: 0 5px;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
}
.component-notes .notes-intro {
    margin-top: 5px;
    font-size: 14px;
}
.component-notes .notes-intro span {
    margin-right: 7px;
}
.component-notes .img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 130px;
    padding: 0 10px;
    overflow: hidden;
    box-sizing: border-box;
}
.component-notes .img-wrap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.component-notes .img-wrap-boxs {
    flex-wrap: wrap;
    justify-content: space-between;
    height: auto;
}
.component-notes .img-wrap-boxs > img {
    width: 31%;
    height: 100px;
    margin-top: 10px;
    object-fit: contain;
}
.component-notes .img-wrap-boxs > img:nth-child(-n+3) {
    margin-top: 0;
}
.component-notes .notes-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3px;
}
.component-notes .notes-info span {
    color: #969799;
    font-size: 12px;
}
.component-notes .notes-preview-empty,
.component-notes .notes-image-empty {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: center;
    color: #999;
    background: #f7f7f7;
    font-size: 13px;
}