/* 旧版浅色顶部栏主题兜底：即使浏览器仍保存旧主题对象，也按原别名使用深色顶部栏。 */
body[layadmin-themealias="default"],
body[layadmin-themealias="dark-blue"],
body[layadmin-themealias="coffee"],
body[layadmin-themealias="purple-red"],
body[layadmin-themealias="ocean"],
body[layadmin-themealias="green"],
body[layadmin-themealias="red"],
body[layadmin-themealias="fashion-red"],
body[layadmin-themealias="classic-black"],
body[layadmin-themealias="green-header"],
body[layadmin-themealias="ocean-header"],
body[layadmin-themealias="classic-black-header"] {
    --merchant-admin-header-link: #f8f8f8;
    --merchant-admin-header-link-hover: #fff;
    --merchant-admin-header-arrow: #fbfbfb;
}

body[layadmin-themealias="default"] {
    --merchant-admin-header: #20222a;
}

body[layadmin-themealias="dark-blue"] {
    --merchant-admin-header: #03152a;
}

body[layadmin-themealias="coffee"] {
    --merchant-admin-header: #2e241b;
}

body[layadmin-themealias="purple-red"] {
    --merchant-admin-header: #50314f;
}

body[layadmin-themealias="ocean"] {
    --merchant-admin-header: #344058;
}

body[layadmin-themealias="green"] {
    --merchant-admin-header: #3a3d49;
}

body[layadmin-themealias="red"] {
    --merchant-admin-header: #20222a;
}

body[layadmin-themealias="fashion-red"] {
    --merchant-admin-header: #28333e;
}

body[layadmin-themealias="classic-black"] {
    --merchant-admin-header: #24262f;
}

body[layadmin-themealias="green-header"] {
    --merchant-admin-header: #2f9688;
}

body[layadmin-themealias="ocean-header"] {
    --merchant-admin-header: #1e9fff;
}

body[layadmin-themealias="classic-black-header"] {
    --merchant-admin-header: #393d49;
}

body[layadmin-themealias] .layui-layout-admin .layui-header {
    background-color: var(--merchant-admin-header) !important;
}

body[layadmin-themealias] .layui-layout-admin .layui-header > .layui-nav > .layui-nav-item > a,
body[layadmin-themealias] .layui-layout-admin .layui-header > .layui-nav > .layui-nav-item > a cite {
    color: var(--merchant-admin-header-link) !important;
}

body[layadmin-themealias] .layui-layout-admin .layui-header > .layui-nav > .layui-nav-item > a:hover {
    color: var(--merchant-admin-header-link-hover) !important;
}

body[layadmin-themealias] .layui-layout-admin .layui-header .layui-nav .layui-nav-more {
    border-top-color: var(--merchant-admin-header-arrow) !important;
}

body[layadmin-themealias] .layui-layout-admin .layui-header .layui-nav .layui-nav-mored {
    border-color: transparent transparent var(--merchant-admin-header-arrow) !important;
}

.merchant-page {
    padding-bottom: 24px;
}

.merchant-page .layui-card {
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.merchant-page .layui-card-header {
    height: 48px;
    line-height: 48px;
    font-weight: 600;
    color: #20222a;
}

.merchant-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.merchant-toolbar-title {
    font-size: 16px;
    font-weight: 600;
    color: #20222a;
}

.merchant-subtext {
    margin-top: 4px;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.6;
}

.merchant-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 16px;
    border: 1px solid #f0f2f5;
    border-radius: 4px;
    background: #fff;
}

.merchant-stat-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #fff;
    font-size: 22px;
    flex: 0 0 auto;
}

.merchant-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #20222a;
    line-height: 1.2;
}

.merchant-stat-label {
    margin-top: 4px;
    color: #8c98a4;
    font-size: 12px;
}

.merchant-panel {
    border: 1px solid #f0f2f5;
    border-radius: 4px;
    background: #fff;
}

.merchant-panel-head {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f2f5;
    font-weight: 600;
    color: #20222a;
}

.merchant-panel-body {
    padding: 16px;
}

.merchant-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #e6e9ee;
    border-radius: 4px;
    background: #fff;
    color: #5f6b7a;
    font-size: 12px;
    cursor: pointer;
}

.merchant-chip:hover,
.merchant-chip.is-active {
    border-color: #1e9fff;
    color: #1e9fff;
    background: #f3faff;
}

.merchant-copy-row {
    display: flex;
    gap: 8px;
}

.merchant-copy-row .layui-input {
    flex: 1;
    background: #f8fafc;
}

.merchant-empty {
    padding: 24px;
    text-align: center;
    color: #8c98a4;
    background: #fbfcfd;
    border: 1px dashed #e6e9ee;
    border-radius: 4px;
}

.merchant-doc-section {
    margin-top: 24px;
    border: 1px solid #e9edf3;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    scroll-margin-top: 76px;
}

.merchant-doc-section h2 {
    margin: 0;
    padding: 18px 20px;
    background: #fff;
    border-bottom: 1px solid #edf1f5;
    color: #20222a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

.merchant-doc-section .doc-body {
    padding: 22px 24px 24px;
    background: #fff;
    color: #4b5563;
    line-height: 1.8;
    overflow-x: auto;
}

.merchant-doc-section .doc-body p {
    margin: 0 0 14px;
}

.merchant-doc-section .doc-body p:last-child {
    margin-bottom: 0;
}

.merchant-doc-endpoint {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.merchant-doc-endpoint-item {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: #fbfcfd;
    box-sizing: border-box;
}

.merchant-doc-endpoint-item span {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.4;
}

.merchant-doc-endpoint-item code,
.merchant-doc-endpoint-item strong {
    display: block;
    margin-top: 6px;
    color: #20222a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    word-break: break-all;
}

.merchant-doc-method-tag {
    display: inline-block;
    min-width: 48px;
    padding: 2px 8px;
    border: 1px solid #d7ecff;
    border-radius: 3px;
    background: #f3faff;
    color: #1e9fff !important;
    text-align: center;
}

.merchant-doc-note {
    display: flex;
    gap: 10px;
    margin: 0 0 16px;
    padding: 13px 14px;
    border: 1px solid #d7ecff;
    border-radius: 4px;
    background: #f3faff;
    color: #4b5563;
    line-height: 1.7;
}

.merchant-doc-note i {
    flex: 0 0 auto;
    color: #1e9fff;
    font-size: 20px;
    line-height: 1.4;
}

.merchant-doc-note strong {
    display: block;
    margin-bottom: 4px;
    color: #20222a;
    font-weight: 700;
}

.merchant-doc-note p {
    margin: 0;
}

.merchant-doc-subsection {
    margin-top: 18px;
}

.merchant-doc-subsection:first-child {
    margin-top: 0;
}

.merchant-doc-subsection h3 {
    margin: 0 0 10px;
    color: #20222a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.merchant-doc-content .layui-table {
    margin: 0 0 16px;
    color: #4b5563;
    background: #fff;
}

.merchant-doc-content .layui-table:last-child {
    margin-bottom: 0;
}

.merchant-doc-content .layui-table th {
    background: #f7f8fa;
    color: #4b5563;
    font-weight: 600;
}

.merchant-doc-content .layui-table td,
.merchant-doc-content .layui-table th {
    padding: 13px 16px;
    line-height: 1.65;
}

.merchant-doc-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 18px;
}

.merchant-doc-nav {
    position: sticky;
    top: 16px;
    width: 190px;
    flex: 0 0 190px;
}

.merchant-doc-nav-list {
    padding: 8px 0;
}

.merchant-doc-nav-list a {
    display: block;
    height: 34px;
    line-height: 34px;
    padding: 0 16px;
    color: #5f6b7a;
    border-left: 3px solid transparent;
    font-size: 13px;
}

.merchant-doc-nav-list a:hover,
.merchant-doc-nav-list a.is-active {
    color: #1e9fff;
    background: #f3faff;
    border-left-color: #1e9fff;
}

.merchant-doc-content {
    min-width: 0;
    flex: 1;
}

.merchant-doc-content .merchant-doc-section:first-child {
    margin-top: 0;
}

.merchant-doc-placeholder {
    margin-top: 14px;
    padding: 16px 18px;
    color: #8c98a4;
    background: #fbfcfd;
    border: 1px dashed #dde5ee;
    border-radius: 4px;
    line-height: 1.8;
}

.merchant-doc-section .doc-body > .merchant-doc-placeholder:first-child {
    margin-top: 0;
}

.merchant-doc-faq-list {
    display: grid;
    gap: 18px;
}

.merchant-doc-faq-item {
    padding: 0 0 0 16px;
    border-left: 3px solid #d7e4ff;
}

.merchant-doc-faq-item h3 {
    margin: 0 0 10px;
    color: #20222a;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}

.merchant-doc-faq-item p {
    margin: 0 0 10px;
}

.merchant-doc-faq-item ul {
    margin: 0;
    padding-left: 22px;
}

.merchant-doc-faq-item li {
    margin: 6px 0;
    line-height: 1.8;
}

.merchant-doc-todo {
    color: #8c98a4;
}

.merchant-doc-standalone-body {
    margin: 0;
    background: #f2f4f8;
    color: #20222a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

.layui-layout-admin .layui-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.layui-layout-admin .layui-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: inline-block;
    flex: 0 0 auto;
}

.layui-layout-admin .layui-logo span {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layadmin-side-shrink .layui-layout-admin .layui-logo {
    background-image: url("../img/logo.png");
    background-size: 30px 30px;
}

.layadmin-side-shrink .layui-layout-admin .layui-logo img {
    display: none;
}

.merchant-doc-single-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 16px 0;
    box-sizing: border-box;
}

.merchant-doc-back,
.merchant-doc-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e1e8f0;
    border-radius: 4px;
    background: #fff;
    color: #5f6b7a;
    font-size: 14px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
}

.merchant-doc-back:hover,
.merchant-doc-menu-btn:hover {
    color: #1e9fff;
    border-color: #d7ecff;
    background: #eef7ff;
}

.merchant-doc-menu-btn {
    display: none;
}

.merchant-doc-drawer {
    display: none;
}

.merchant-doc-drawer-mask {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, .42);
}

.merchant-doc-drawer-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1201;
    width: 78%;
    max-width: 320px;
    background: #fff;
    box-shadow: 8px 0 24px rgba(15, 23, 42, .16);
    transform: translateX(-100%);
    transition: transform .2s ease;
}

.merchant-doc-drawer.is-open {
    display: block;
}

.merchant-doc-drawer.is-open .merchant-doc-drawer-panel {
    transform: translateX(0);
}

.merchant-doc-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 14px;
    border-bottom: 1px solid #f0f2f5;
    color: #1e9fff;
    font-size: 17px;
    font-weight: 700;
}

.merchant-doc-drawer-head button {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #8c98a4;
    font-size: 24px;
    line-height: 34px;
    cursor: pointer;
}

.merchant-doc-drawer-body {
    position: absolute;
    top: 52px;
    bottom: 45px;
    left: 0;
    right: 0;
    overflow-y: auto;
}

.merchant-doc-drawer-body .merchant-panel {
    border: 0;
    border-radius: 0;
}

.merchant-doc-drawer-body .merchant-doc-nav-title {
    display: none;
}

.merchant-doc-drawer-body .merchant-doc-tree {
    padding-top: 8px;
}

.merchant-doc-drawer-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    line-height: 44px;
    border-top: 1px solid #edf1f5;
    color: #20222a;
    text-align: center;
    font-weight: 600;
}

.merchant-doc-drawer-open {
    overflow: hidden;
}

.merchant-doc-public-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
    transform: translateZ(0);
}

.merchant-doc-public-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1180px;
    height: 60px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.merchant-doc-public-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #20222a;
    font-size: 18px;
    font-weight: 700;
    line-height: 60px;
    white-space: nowrap;
}

.merchant-doc-public-logo i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #1e9fff;
    font-size: 22px;
    line-height: 1;
}

.merchant-doc-public-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.merchant-doc-public-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 4px;
    color: #5f6b7a;
    font-size: 14px;
    line-height: 34px;
    box-sizing: border-box;
    white-space: nowrap;
}

.merchant-doc-public-nav a:hover,
.merchant-doc-public-nav a.is-active {
    color: #1e9fff;
    background: #eef7ff;
}

.merchant-doc-public-nav a.layui-btn {
    color: #fff;
    border-color: #1e9fff;
    background: #1e9fff;
}

.merchant-doc-public-nav a.layui-btn:hover {
    color: #fff;
    border-color: #1e9fff;
    background: #1e9fff;
    opacity: .92;
}

.merchant-doc-public-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 16px 34px;
    box-sizing: border-box;
}

.merchant-doc-standalone-body .merchant-doc-actions {
    display: none;
}

.merchant-doc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
    padding: 20px 22px;
    border: 1px solid #e7eef6;
    border-radius: 4px;
    background: #fff;
}

.merchant-doc-title {
    color: #20222a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.merchant-doc-desc {
    margin-top: 6px;
    color: #6b7785;
    font-size: 13px;
    line-height: 1.8;
}

.merchant-doc-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.merchant-doc-overview-card {
    display: block;
    min-height: 128px;
    padding: 18px;
    color: inherit;
    box-sizing: border-box;
}

.merchant-doc-overview-card i {
    color: #1e9fff;
    font-size: 28px;
}

.merchant-doc-overview-card strong {
    display: block;
    margin-top: 12px;
    color: #20222a;
    font-size: 16px;
}

.merchant-doc-overview-card span {
    display: block;
    margin-top: 6px;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.7;
}

.merchant-doc-nav-panel {
    overflow: hidden;
}

.merchant-doc-nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid #f0f2f5;
    color: #1e9fff;
    font-size: 18px;
    font-weight: 700;
}

.merchant-doc-tree {
    padding: 10px 0;
}

.merchant-doc-tree-link,
.merchant-doc-tree-children a,
.merchant-doc-tree-title {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-left: 3px solid transparent;
    color: #4b5563;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
}

.merchant-doc-tree-title {
    gap: 6px;
    font-weight: 500;
}

.merchant-doc-tree-title i {
    color: #8c98a4;
    font-size: 12px;
    transition: transform .18s ease;
}

.merchant-doc-tree-group:not(.is-open) .merchant-doc-tree-title i {
    transform: rotate(-90deg);
}

.merchant-doc-tree-link:hover,
.merchant-doc-tree-children a:hover,
.merchant-doc-tree-link.is-active,
.merchant-doc-tree-children a.is-active,
.merchant-doc-nav-list a.is-active {
    color: #1e9fff;
    background: #f3faff;
    border-left-color: #1e9fff;
}

.merchant-doc-tree-children {
    display: none;
    padding: 2px 0 6px;
}

.merchant-doc-tree-group.is-open .merchant-doc-tree-children {
    display: block;
}

.merchant-doc-tree-children a {
    min-height: 34px;
    padding-left: 44px;
    color: #5f6b7a;
    font-size: 13px;
}

.merchant-doc-nav-foot {
    padding: 12px 16px;
    border-top: 1px solid #f0f2f5;
    color: #20222a;
    text-align: center;
    font-weight: 600;
}

.merchant-code {
    display: block;
    padding: 14px 16px;
    overflow-x: auto;
    border-radius: 4px;
    background: #20222a;
    color: #e8edf3;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    line-height: 1.7;
}

.merchant-dashboard-page {
    background: #f2f4f8;
}

.merchant-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
    padding: 20px 22px;
    border: 1px solid #e7eef6;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.merchant-dashboard-title {
    color: #20222a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.merchant-dashboard-desc {
    margin-top: 6px;
    color: #6b7785;
    font-size: 13px;
    line-height: 1.7;
}

.merchant-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.merchant-dashboard-stat {
    min-height: 148px;
    padding: 18px;
    border: 1px solid #e9edf3;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.merchant-dashboard-stat-head,
.merchant-dashboard-stat-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.merchant-dashboard-stat-head {
    color: #5f6b7a;
    font-size: 13px;
}

.merchant-dashboard-stat-head i {
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 4px;
    text-align: center;
    font-size: 19px;
}

.merchant-dashboard-stat-value {
    margin: 18px 0 16px;
    color: #20222a;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    word-break: break-all;
}

.merchant-dashboard-stat-value em {
    margin-left: 4px;
    color: #8c98a4;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.merchant-dashboard-stat-foot {
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.6;
}

.merchant-dashboard-stat-foot b {
    color: #5f6b7a;
    font-weight: 500;
    text-align: right;
}

.merchant-dashboard-stat.is-blue .merchant-dashboard-stat-head i {
    color: #1e9fff;
    background: #eef7ff;
}

.merchant-dashboard-stat.is-green .merchant-dashboard-stat-head i {
    color: #16b777;
    background: #edf9f3;
}

.merchant-dashboard-stat.is-cyan .merchant-dashboard-stat-head i {
    color: #16baaa;
    background: #ecfbf9;
}

.merchant-dashboard-stat.is-orange .merchant-dashboard-stat-head i {
    color: #ffb800;
    background: #fff8e5;
}

.merchant-dashboard-card .layui-card-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e1e8f0;
    /*margin-top: 30px;*/
}

.merchant-dashboard-card .layui-card-header:after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -1px;
    width: 72px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #16baaa, #1e9fff);
}

.merchant-dashboard-card .layui-card-header .layui-badge {
    position: relative;
    z-index: 1;
}

.merchant-dashboard-rate-section {
    border: 1px solid #e1e8f0;
}

.merchant-dashboard-rate-section > .layui-card-body {
    border-top: 1px solid #edf1f5;
    background: #fff;
}

.merchant-dashboard-chart {
    height: 360px !important;
    background: #fff;
}

.merchant-dashboard-chart .layui-carousel-ind {
    display: none;
}

.merchant-dashboard-account-list {
    display: grid;
    gap: 10px;
}

.merchant-dashboard-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #f0f2f5;
    border-radius: 4px;
    background: #fbfcfd;
    box-sizing: border-box;
}

.merchant-dashboard-account-item span {
    color: #8c98a4;
    font-size: 12px;
}

.merchant-dashboard-account-item strong {
    color: #20222a;
    font-weight: 600;
    text-align: right;
}

.merchant-dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.merchant-dashboard-shortcuts a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    border: 1px solid #f0f2f5;
    border-radius: 4px;
    color: #5f6b7a;
    background: #fbfcfd;
}

.merchant-dashboard-shortcuts a:hover {
    color: #1e9fff;
    border-color: #d7ecff;
    background: #f3faff;
}

.merchant-dashboard-shortcuts i {
    margin-bottom: 6px;
    font-size: 22px;
}

.merchant-dashboard-shortcuts span {
    font-size: 12px;
}

.merchant-dashboard-rate-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 15px;
}

.merchant-dashboard-rate-item {
    min-width: 0;
    grid-column: span 3;
}

.merchant-dashboard-rate-empty {
    grid-column: 1 / -1;
}

.merchant-dashboard-rate-grid.is-count-1 .merchant-dashboard-rate-item {
    grid-column: 5 / span 4;
}

.merchant-dashboard-rate-grid.is-count-2 .merchant-dashboard-rate-item {
    grid-column: span 4;
}

.merchant-dashboard-rate-grid.is-count-2 .merchant-dashboard-rate-item:first-child {
    grid-column: 3 / span 4;
}

.merchant-dashboard-rate-grid.is-count-3 .merchant-dashboard-rate-item,
.merchant-dashboard-rate-grid.is-count-5 .merchant-dashboard-rate-item,
.merchant-dashboard-rate-grid.is-count-6 .merchant-dashboard-rate-item {
    grid-column: span 4;
}

.merchant-dashboard-rate-grid.is-count-5 .merchant-dashboard-rate-item:nth-child(4) {
    grid-column: 3 / span 4;
}

.merchant-dashboard-rate-grid.is-count-5 .merchant-dashboard-rate-item:nth-child(5) {
    grid-column: 7 / span 4;
}

.merchant-dashboard-rate-grid.is-count-7 .merchant-dashboard-rate-item:nth-child(n + 5) {
    grid-column: span 4;
}

.merchant-dashboard-rate-card {
    --pay-accent: #16baaa;
    --pay-accent-rgb: 22, 186, 170;
    position: relative;
    overflow: hidden;
    min-height: 172px;
    padding: 18px 18px 16px;
    border: 1px solid #c7d4e2;
    border-radius: 4px;
    background: #fbfdff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .075);
    box-sizing: border-box;
}

.merchant-dashboard-rate-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--pay-accent);
    opacity: .85;
}

.merchant-dashboard-rate-card.is-pay-alipay {
    --pay-accent: #1677ff;
    --pay-accent-rgb: 22, 119, 255;
}

.merchant-dashboard-rate-card.is-pay-wxpay,
.merchant-dashboard-rate-card.is-pay-wechat,
.merchant-dashboard-rate-card.is-pay-wechatpay {
    --pay-accent: #07c160;
    --pay-accent-rgb: 7, 193, 96;
}

.merchant-dashboard-rate-card.is-pay-qqpay,
.merchant-dashboard-rate-card.is-pay-qq {
    --pay-accent: #12b7f5;
    --pay-accent-rgb: 18, 183, 245;
}

.merchant-dashboard-rate-card.is-pay-unionpay,
.merchant-dashboard-rate-card.is-pay-union,
.merchant-dashboard-rate-card.is-pay-bankpay,
.merchant-dashboard-rate-card.is-pay-bank {
    --pay-accent: #1356a2;
    --pay-accent-rgb: 19, 86, 162;
}

.merchant-dashboard-rate-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.merchant-dashboard-rate-card img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex: 0 0 auto;
}

.merchant-dashboard-rate-card strong {
    display: block;
    color: #20222a;
    font-size: 15px;
}

.merchant-dashboard-rate-title span {
    display: inline-block;
    margin-top: 5px;
    padding: 1px 6px;
    border: 1px solid rgba(var(--pay-accent-rgb), .16);
    border-radius: 4px;
    background: rgba(var(--pay-accent-rgb), .055);
    color: #5f6b7a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.merchant-rate-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.merchant-rate-metric {
    min-width: 0;
    padding: 10px;
    border: 1px solid #dfe7f0;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

.merchant-rate-metric span {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.4;
}

.merchant-rate-metric strong {
    display: block;
    margin-top: 5px;
    color: #20222a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-all;
}

.merchant-profile-panel {
    padding: 4px 0;
}

.merchant-profile-panel-title {
    color: #20222a;
    font-size: 16px;
    font-weight: 700;
}

.merchant-profile-panel-desc {
    margin-top: 6px;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.7;
}

.merchant-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.merchant-profile-info-item {
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid #f0f2f5;
    border-radius: 4px;
    background: #fbfcfd;
    box-sizing: border-box;
}

.merchant-profile-info-item span {
    display: block;
    color: #8c98a4;
    font-size: 12px;
}

.merchant-profile-info-item strong {
    display: block;
    margin-top: 8px;
    color: #20222a;
    font-size: 14px;
    font-weight: 600;
    word-break: break-all;
}

.merchant-profile-contact-placeholder {
    margin-top: 14px;
    padding: 12px 14px;
    color: #5f6b7a;
    border: 1px dashed #dbe5ef;
    border-radius: 4px;
    background: #fff;
    line-height: 1.7;
}

.merchant-profile-contact-placeholder i {
    color: #1e9fff;
    margin-right: 4px;
}

.merchant-google-box {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #f0f2f5;
    border-radius: 4px;
    background: #fbfcfd;
}

.merchant-google-icon {
    width: 54px;
    height: 54px;
    line-height: 54px;
    border-radius: 4px;
    color: #1e9fff;
    background: #eef7ff;
    text-align: center;
    flex: 0 0 auto;
}

.merchant-google-icon i {
    font-size: 28px;
}

.merchant-google-main {
    min-width: 0;
    flex: 1;
}

.merchant-google-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #20222a;
}

.merchant-google-status strong {
    font-weight: 700;
}

.merchant-google-secret {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.merchant-google-secret .layui-input {
    background: #fff;
}

.merchant-announcement-card .layui-card-header,
.merchant-agent-card .layui-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.merchant-announcement-list {
    display: grid;
    gap: 12px;
}

.merchant-announcement-state {
    display: none;
    min-height: 160px;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: #8c98a4;
    text-align: center;
}

.merchant-announcement-state.is-visible {
    display: flex;
}

.merchant-announcement-state.is-error {
    color: #d9534f;
}

.merchant-announcement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid #f0f2f5;
    border-radius: 4px;
    background: #fff;
}

.merchant-announcement-main {
    min-width: 0;
    flex: 1;
}

.merchant-announcement-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #20222a;
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.merchant-announcement-title em {
    font-style: normal;
}

.merchant-announcement-preview {
    margin-top: 10px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.merchant-announcement-time {
    margin-top: 8px;
    color: #8c98a4;
    font-size: 12px;
}

.merchant-announcement-modal {
    max-height: 68vh;
    padding: 18px 20px 20px;
    overflow-y: auto;
}

.merchant-announcement-modal-time {
    margin-bottom: 12px;
    color: #8c98a4;
    font-size: 12px;
}

.merchant-announcement-modal-content {
    color: #4b5563;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.merchant-announcement-modal-content p {
    margin: 0 0 10px;
}

.merchant-announcement-modal-content img {
    max-width: 100%;
    height: auto;
}

.merchant-announcement-modal-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.merchant-announcement-pagination {
    padding-top: 16px;
    text-align: right;
}

.merchant-agent-page .merchant-stat-value {
    word-break: break-all;
}

.merchant-agent-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.merchant-agent-summary-item {
    min-width: 0;
}

.merchant-agent-page .merchant-dashboard-stat {
    min-height: 118px;
    padding: 16px 18px 14px;
}

.merchant-agent-page .merchant-dashboard-stat-value {
    margin: 14px 0 12px;
    font-size: 28px;
}

.merchant-agent-stat-number,
.merchant-agent-cost-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-agent-cost-card > .layui-card-body,
.merchant-agent-invite-card > .layui-card-body {
    border-top: 1px solid #edf1f5;
    background: #fff;
}

.merchant-agent-section-note {
    margin-bottom: 12px;
    color: #6b7785;
    font-size: 13px;
    line-height: 1.7;
}

.merchant-agent-cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.merchant-agent-rate-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.merchant-agent-cost-item {
    --pay-accent: #16baaa;
    --pay-accent-rgb: 22, 186, 170;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid #e5ebf2;
    border-radius: 4px;
    background: #fbfcfd;
    box-sizing: border-box;
    overflow: hidden;
}

.merchant-agent-rate-strip-item {
    min-height: 62px;
    padding: 11px 12px;
    background: #fff;
    box-shadow: none;
}

.merchant-agent-cost-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: var(--pay-accent);
    opacity: .72;
}

.merchant-agent-cost-item.is-pay-alipay {
    --pay-accent: #1677ff;
    --pay-accent-rgb: 22, 119, 255;
}

.merchant-agent-cost-item.is-pay-wxpay,
.merchant-agent-cost-item.is-pay-wechat,
.merchant-agent-cost-item.is-pay-wechatpay {
    --pay-accent: #07c160;
    --pay-accent-rgb: 7, 193, 96;
}

.merchant-agent-cost-item.is-pay-qqpay,
.merchant-agent-cost-item.is-pay-qq {
    --pay-accent: #12b7f5;
    --pay-accent-rgb: 18, 183, 245;
}

.merchant-agent-cost-item.is-pay-unionpay,
.merchant-agent-cost-item.is-pay-union,
.merchant-agent-cost-item.is-pay-bankpay,
.merchant-agent-cost-item.is-pay-bank {
    --pay-accent: #1356a2;
    --pay-accent-rgb: 19, 86, 162;
}

.merchant-agent-cost-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.merchant-agent-cost-main img {
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: #fff;
    object-fit: contain;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.merchant-agent-cost-main strong {
    display: block;
    color: #20222a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-agent-cost-main span {
    display: inline-block;
    margin-top: 3px;
    color: #8c98a4;
    font-size: 12px;
}

.merchant-agent-cost-value {
    padding: 2px 8px;
    border: 1px solid rgba(var(--pay-accent-rgb), .18);
    border-radius: 4px;
    background: rgba(var(--pay-accent-rgb), .055);
    color: #20222a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.merchant-agent-rate-strip-item .merchant-agent-cost-value {
    font-size: 16px;
}

.merchant-agent-invite-card.is-compact > .layui-card-body {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr);
    align-items: center;
    gap: 8px 14px;
}

.merchant-agent-invite-card.is-compact .merchant-agent-invite-meta {
    margin-bottom: 0;
}

.merchant-agent-invite-card.is-compact .merchant-agent-copy-row {
    min-width: 0;
}

.merchant-agent-invite-card.is-compact .merchant-subtext {
    grid-column: 1 / -1;
    margin-top: 0;
}

.merchant-agent-invite-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.merchant-agent-invite-meta span {
    color: #8c98a4;
    font-size: 12px;
}

.merchant-agent-invite-meta strong {
    padding: 2px 8px;
    border: 1px solid #e5ebf2;
    border-radius: 4px;
    background: #fbfcfd;
    color: #20222a;
    font-size: 13px;
    line-height: 1.6;
}

.merchant-agent-copy-row .layui-btn {
    min-width: 104px;
}

.merchant-agent-rate-summary {
    min-width: 0;
    max-width: 100%;
}

.merchant-agent-rate-matrix {
    display: grid;
    gap: 6px;
}

.merchant-agent-rate-tools {
    display: flex;
    justify-content: flex-end;
}

.merchant-agent-rate-toggle {
    height: 22px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: #1e9fff;
    font-size: 12px;
    line-height: 22px;
    cursor: pointer;
}

.merchant-agent-rate-toggle:hover {
    color: #0b8fe8;
}

.merchant-agent-rate-matrix.is-collapsed .merchant-agent-rate-matrix-row:nth-child(n + 5) {
    display: none;
}

.merchant-agent-rate-earnings.is-collapsed .merchant-agent-rate-earnings-item:nth-child(n + 5) {
    display: none;
}

.merchant-agent-identity {
    min-width: 0;
    color: #5f6b7a;
    font-size: 12px;
}

.merchant-agent-identity > strong,
.merchant-agent-identity > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-agent-identity > strong {
    color: #20222a;
    font-size: 13px;
    font-weight: 600;
}

.merchant-agent-identity > span {
    margin-top: 2px;
    color: #7a8794;
}

.merchant-agent-identity dl {
    display: grid;
    gap: 2px;
    margin-top: 8px;
}

.merchant-agent-identity dl div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 5px;
}

.merchant-agent-identity dt,
.merchant-agent-identity dd {
    margin: 0;
    font-weight: 400;
}

.merchant-agent-identity dt {
    color: #a0aab5;
}

.merchant-agent-identity dd {
    min-width: 0;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-agent-rate-earnings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 1px;
    border: 1px solid #e5ebf2;
    border-radius: 3px;
    background: #e5ebf2;
    overflow: hidden;
}

.merchant-agent-rate-earnings-item {
    min-width: 0;
    padding: 6px 8px;
    background: #fbfcfd;
    box-sizing: border-box;
}

.merchant-agent-rate-earnings-method,
.merchant-agent-rate-earnings-path,
.merchant-agent-rate-earnings-meta {
    display: flex;
    align-items: center;
    min-width: 0;
}

.merchant-agent-rate-earnings-method {
    gap: 6px;
    margin-bottom: 4px;
}

.merchant-agent-rate-earnings-method img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    flex: 0 0 auto;
}

.merchant-agent-rate-earnings-method > strong {
    min-width: 0;
    overflow: hidden;
    color: #20222a;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-agent-rate-earnings-path {
    justify-content: space-between;
    gap: 4px;
    color: #7a8794;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.merchant-agent-rate-earnings-path i {
    color: #b4bec9;
    font-style: normal;
}

.merchant-agent-rate-earnings-path strong {
    color: #5f6b7a;
    font-weight: 600;
}

.merchant-agent-rate-earnings-meta {
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #e5ebf2;
    color: #8c98a4;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.merchant-agent-rate-earnings-meta strong {
    color: #20222a;
    font-size: 12px;
    font-weight: 600;
}

.merchant-agent-rate-earnings-item.is-positive .merchant-agent-rate-earnings-meta > span:first-child {
    color: #0f9f90;
}

.merchant-agent-rate-earnings-meta .is-muted {
    color: #a0aab5;
    font-size: 11px;
    font-weight: 400;
}

.merchant-agent-rate-matrix-head,
.merchant-agent-rate-matrix-row {
    display: grid;
    grid-template-columns: minmax(64px, 1fr) minmax(88px, 1.1fr) minmax(54px, .7fr);
    align-items: center;
    column-gap: 8px;
}

.merchant-agent-rate-matrix-head {
    padding: 3px 0 5px;
    border-bottom: 1px solid #edf1f5;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.merchant-agent-rate-matrix-head span:nth-child(2),
.merchant-agent-rate-matrix-head span:nth-child(3) {
    text-align: right;
}

.merchant-agent-rate-matrix-body {
    max-height: 164px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.merchant-agent-rate-matrix-row {
    min-height: 26px;
    border-bottom: 1px solid #f4f6f8;
    color: #5f6b7a;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-agent-rate-matrix-row:last-child {
    border-bottom: 0;
}

.merchant-agent-time-list {
    display: grid;
    gap: 3px;
    color: #5f6b7a;
    line-height: 1.5;
    white-space: nowrap;
}

.merchant-agent-time-list span {
    display: inline-block;
    width: 32px;
    margin-right: 6px;
    color: #8c98a4;
}

.merchant-agent-time-list > div {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
}

.merchant-agent-time-list > div > span {
    width: auto;
    margin-right: 0;
}

.merchant-agent-time-list .merchant-agent-time-value {
    display: grid;
    width: auto;
    margin: 0;
    color: #5f6b7a;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.merchant-agent-time-value b,
.merchant-agent-time-value em {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    white-space: nowrap;
}

.merchant-agent-time-value em {
    color: #8c98a4;
}

.merchant-agent-time-list .merchant-agent-time-empty {
    width: auto;
    margin: 0;
    color: #a0aab5;
}

.merchant-agent-rate-name {
    min-width: 0;
    overflow: hidden;
    color: #20222a;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-agent-rate-pair {
    display: inline-flex;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
    color: #7a8794;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.merchant-agent-rate-pair em,
.merchant-agent-rate-pair i {
    font-style: normal;
}

.merchant-agent-rate-pair i {
    color: #b4bec9;
}

.merchant-agent-rate-matrix-row strong {
    color: #8c98a4;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.merchant-agent-rate-matrix-row.is-positive strong {
    color: #0f9f90;
}

.merchant-agent-list-card > .layui-card-body {
    background: #f4f6f8;
}

.merchant-agent-list-card .layui-table-cell {
    height: auto;
    min-height: 28px;
    line-height: 1.5;
    overflow: visible;
    white-space: normal;
}

.merchant-agent-list-card .layui-table-header th {
    border-color: #e5ebf2;
    background: #f7f9fb;
    color: #5f6b7a;
    font-size: 13px;
    font-weight: 600;
}

.merchant-agent-list-card .layui-table-header .layui-table-patch {
    background: #f7f9fb;
}

.merchant-agent-list-card .layui-table-header th[data-field="operate"],
.merchant-agent-list-card .layui-table-body td[data-field="operate"] {
    border-right-color: transparent;
}

.merchant-agent-list-card .layui-table-body td {
    border-color: #edf1f5;
    vertical-align: top;
}

.merchant-agent-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
}

.merchant-agent-actions .layui-btn {
    width: 100%;
    margin: 0;
    padding: 0 7px;
    border-radius: 2px;
    box-sizing: border-box;
}

.merchant-agent-actions .layui-btn + .layui-btn {
    margin-left: 0;
}

.merchant-agent-actions .merchant-agent-action-primary {
    border-color: #009688;
    background: #009688;
    color: #fff;
}

.merchant-agent-actions .merchant-agent-action-secondary {
    border-color: #d9e1e8;
    background: #fff;
    color: #5f6b7a;
}

.merchant-agent-actions .merchant-agent-action-secondary:hover {
    border-color: #009688;
    color: #009688;
}

.merchant-agent-mobile-card {
    min-width: 0;
    border: 1px solid #e1e7ee;
    border-radius: 4px;
    background: #fff;
    color: #5f6b7a;
    box-sizing: border-box;
    overflow: hidden;
}

.merchant-agent-mobile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #edf1f5;
}

.merchant-agent-mobile-identity {
    min-width: 0;
}

.merchant-agent-mobile-identity strong,
.merchant-agent-mobile-identity span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-agent-mobile-identity strong {
    color: #20222a;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.merchant-agent-mobile-identity span {
    margin-top: 2px;
    color: #7a8794;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-agent-mobile-rate-action {
    min-width: 76px;
    margin: 0;
    border-color: #009688;
    background: #009688;
    color: #fff;
    flex: 0 0 auto;
}

.merchant-agent-mobile-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf1f5;
    background: #fbfcfd;
}

.merchant-agent-mobile-contact-grid > div,
.merchant-agent-mobile-times > div {
    min-width: 0;
}

.merchant-agent-mobile-contact-grid span,
.merchant-agent-mobile-times > div > span {
    display: block;
    margin-bottom: 3px;
    color: #8c98a4;
    font-size: 11px;
    line-height: 1.4;
}

.merchant-agent-mobile-contact-grid strong {
    display: block;
    overflow: hidden;
    color: #4f5b69;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-agent-mobile-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf1f5;
}

.merchant-agent-mobile-times > div + div {
    padding-left: 12px;
    border-left: 1px solid #edf1f5;
}

.merchant-agent-mobile-times .merchant-agent-time-value {
    display: grid;
    color: #5f6b7a;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.merchant-agent-mobile-times .merchant-agent-time-empty {
    color: #a0aab5;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-agent-mobile-rates {
    padding: 11px 12px 12px;
}

.merchant-agent-mobile-section-title {
    margin-bottom: 8px;
    color: #5f6b7a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.merchant-agent-mobile-actions-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #edf1f5;
    background: #fbfcfd;
}

.merchant-agent-mobile-actions-secondary .layui-btn {
    width: 100%;
    margin: 0;
    padding: 0 8px;
    border-color: #d9e1e8;
    background: #fff;
    color: #5f6b7a;
    box-sizing: border-box;
}

.merchant-agent-mobile-actions-secondary .layui-btn + .layui-btn {
    margin-left: 0;
}

.merchant-agent-mobile-actions-secondary .layui-btn:hover {
    border-color: #009688;
    color: #009688;
}

.merchant-agent-empty {
    margin-top: 12px;
    padding: 22px 18px;
    border: 1px dashed #dbe5ef;
    border-radius: 4px;
    background: #fbfcfd;
    text-align: center;
}

.merchant-agent-empty-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    border-radius: 4px;
    background: #eef7ff;
    color: #1e9fff;
    font-size: 24px;
    line-height: 42px;
}

.merchant-agent-empty strong {
    display: block;
    color: #20222a;
    font-size: 15px;
}

.merchant-agent-empty p {
    margin: 7px 0 14px;
    color: #6b7785;
    font-size: 13px;
    line-height: 1.7;
}

.merchant-agent-empty-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.merchant-agent-status {
    display: flex;
    gap: 12px;
    min-height: 74px;
    padding: 14px;
    border: 1px dashed #dbe5ef;
    border-radius: 4px;
    background: #fbfcfd;
    box-sizing: border-box;
}

.merchant-agent-status i {
    color: #ffb800;
    font-size: 28px;
    line-height: 1;
}

.merchant-agent-status strong {
    display: block;
    color: #20222a;
    font-size: 14px;
}

.merchant-agent-status p {
    margin: 7px 0 0;
    color: #6b7785;
    font-size: 12px;
    line-height: 1.7;
}

/* 代理中心行内操作弹层：限定作用域，保持 LayuiAdmin 外观并统一信息层级。 */
.merchant-agent-layer {
    overflow: hidden;
    border-radius: 2px;
}

.merchant-agent-layer .layui-layer-title {
    height: 44px;
    padding: 0 44px 0 18px;
    border-bottom: 1px solid #e6e6e6;
    background: #f8f8f8;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 44px;
}

.merchant-agent-layer .layui-layer-setwin {
    top: 15px;
    right: 16px;
}

.merchant-agent-layer .layui-layer-content {
    max-height: calc(78vh - 44px);
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    color: #5f6b7a;
}

.merchant-agent-layer-form .layui-layer-content {
    max-height: calc(78vh - 104px);
}

.merchant-agent-layer-body,
.merchant-agent-layer-form-body {
    padding: 16px 20px 18px;
    box-sizing: border-box;
}

.merchant-agent-layer .layui-layer-btn {
    padding: 10px 20px 12px;
    border-top: 1px solid #e6e6e6;
    background: #fafafa;
    text-align: right;
}

.merchant-agent-layer .layui-layer-btn a {
    height: 30px;
    margin: 0 0 0 8px;
    padding: 0 16px;
    border-radius: 2px;
    font-size: 13px;
    line-height: 30px;
}

.merchant-agent-layer .layui-layer-btn .layui-layer-btn0 {
    border-color: #009688;
    background: #009688;
    color: #fff;
}

.merchant-agent-layer-context {
    display: flex;
    min-height: 44px;
    margin-bottom: 16px;
    padding: 9px 12px;
    border: 1px solid #e6e6e6;
    border-left: 3px solid #009688;
    border-radius: 2px;
    background: #f8f8f8;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.merchant-agent-layer-context span {
    color: #666;
    font-size: 13px;
}

.merchant-agent-layer-context strong {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-agent-layer-context em {
    padding-left: 8px;
    border-left: 1px solid #d9dee5;
    color: #8c98a4;
    font-size: 13px;
    font-style: normal;
}

.merchant-agent-layer-section + .merchant-agent-layer-section {
    margin-top: 18px;
}

.merchant-agent-layer-section-title {
    min-height: 22px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6e6e6;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
}

.merchant-agent-rate-editor-row {
    display: grid;
    grid-template-columns: minmax(150px, .75fr) minmax(230px, 1.25fr);
    min-height: 68px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f5;
    align-items: center;
    column-gap: 18px;
    box-sizing: border-box;
}

.merchant-agent-rate-editor-row:last-child {
    border-bottom: 0;
}

.merchant-agent-rate-editor-method {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.merchant-agent-rate-editor-method img {
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 1px solid #edf1f5;
    border-radius: 2px;
    background: #fff;
    object-fit: contain;
    box-sizing: border-box;
    flex: none;
}

.merchant-agent-rate-editor-method strong,
.merchant-agent-rate-editor-method span {
    display: block;
}

.merchant-agent-rate-editor-method strong {
    overflow: hidden;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-agent-rate-editor-method span {
    margin-top: 2px;
    color: #8c98a4;
    font-size: 12px;
    line-height: 18px;
}

.merchant-agent-rate-editor-control {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto;
    min-width: 0;
    align-items: center;
    column-gap: 12px;
}

.merchant-agent-rate-input {
    position: relative;
    min-width: 0;
}

.merchant-agent-rate-input .layui-input {
    padding-right: 42px;
    color: #333;
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-agent-rate-input .merchant-agent-rate-value {
    -moz-appearance: textfield;
}

.merchant-agent-rate-input .merchant-agent-rate-value::-webkit-inner-spin-button,
.merchant-agent-rate-input .merchant-agent-rate-value::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.merchant-agent-rate-input .layui-input.is-invalid {
    border-color: #c2413b !important;
    box-shadow: 0 0 0 1px rgba(194, 65, 59, .08) inset;
}

.merchant-agent-rate-input-suffix {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 34px;
    border-left: 1px solid #e6e6e6;
    background: #f8f8f8;
    color: #6b7785;
    line-height: 36px;
    text-align: center;
    pointer-events: none;
}

.merchant-agent-rate-preview {
    display: grid;
    min-width: 76px;
    text-align: right;
    row-gap: 2px;
}

.merchant-agent-rate-preview span {
    color: #8c98a4;
    font-size: 12px;
    line-height: 18px;
}

.merchant-agent-rate-preview strong {
    color: #6b7785;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-agent-spread-positive {
    color: #087f5b !important;
}

.merchant-agent-spread-invalid {
    color: #c2413b !important;
}

.merchant-agent-layer .layui-layer-btn .layui-layer-btn0.is-disabled {
    border-color: #9fbab7;
    background: #9fbab7;
    cursor: not-allowed;
    opacity: .78;
}

.merchant-agent-edit-field {
    margin-bottom: 14px;
}

.merchant-agent-edit-field:last-child {
    margin-bottom: 0;
}

.merchant-agent-edit-field .layui-form-label {
    display: flex;
    width: 100px;
    padding-right: 10px;
    padding-left: 10px;
    color: #666;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.merchant-agent-edit-field .layui-input-block {
    margin-left: 120px;
}

.merchant-agent-field-optional {
    padding: 0 3px;
    border: 1px solid #d9dee5;
    border-radius: 2px;
    color: #8c98a4;
    font-size: 10px;
    font-style: normal;
    line-height: 15px;
    white-space: nowrap;
}

.merchant-agent-edit-field .layui-input {
    color: #333;
}

.merchant-agent-edit-field .layui-input::placeholder {
    color: #b4bec9;
}

.merchant-agent-create-context em {
    margin-left: auto;
}

.merchant-agent-create-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.merchant-agent-create-section-title > em {
    color: #8c98a4;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    white-space: nowrap;
}

.merchant-agent-create-section-title > em i {
    color: #c2413b;
    font-style: normal;
}

.merchant-agent-field-required {
    color: #c2413b;
    font-size: 14px;
    font-style: normal;
    line-height: 1;
}

.merchant-agent-create-input-shell {
    position: relative;
}

.merchant-agent-create-input-shell.has-captcha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 106px;
    gap: 8px;
}

.merchant-agent-captcha-refresh {
    height: 38px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8dee8;
    border-radius: 3px;
    cursor: pointer;
}

.merchant-agent-captcha-refresh img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-agent-captcha-refresh:hover,
.merchant-agent-captcha-refresh:focus-visible {
    border-color: #009688;
    outline: 0;
}

.merchant-agent-create-field .layui-input {
    color: #333;
}

.merchant-agent-create-field .layui-input.is-invalid {
    border-color: #c2413b !important;
    box-shadow: 0 0 0 1px rgba(194, 65, 59, .08) inset;
}

.merchant-agent-create-input-shell.has-password-toggle .layui-input {
    padding-right: 62px;
}

.merchant-agent-password-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 52px;
    padding: 0;
    border: 0;
    border-left: 1px solid #e6e6e6;
    border-radius: 0 2px 2px 0;
    background: #f8f8f8;
    color: #6b7785;
    font-size: 12px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}

.merchant-agent-password-toggle:hover,
.merchant-agent-password-toggle:focus {
    background: #f2f8f7;
    color: #009688;
}

.merchant-agent-password-toggle:focus-visible {
    box-shadow: 0 0 0 1px #009688 inset;
}

.merchant-agent-field-error {
    display: none;
    margin-top: 4px;
    color: #c2413b;
    font-size: 12px;
    line-height: 18px;
}

.merchant-agent-field-error.is-visible {
    display: block;
}

.merchant-agent-create-notice {
    margin-top: 18px;
    padding: 10px 12px;
    border: 1px solid #e6e6e6;
    border-left: 3px solid #009688;
    border-radius: 2px;
    background: #fbfcfd;
    box-sizing: border-box;
}

.merchant-agent-create-notice strong {
    display: block;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}

.merchant-agent-create-notice p {
    margin: 3px 0 0;
    color: #7b8794;
    font-size: 12px;
    line-height: 1.7;
}

.merchant-agent-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.merchant-agent-stat-item {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    background: #fafafa;
    box-sizing: border-box;
}

.merchant-agent-stat-item > span {
    display: block;
    color: #666;
    font-size: 13px;
    line-height: 20px;
}

.merchant-agent-stat-item > strong {
    display: block;
    margin-top: 5px;
    color: #333;
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-agent-stat-item > strong em {
    margin-left: 4px;
    color: #8c98a4;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.merchant-agent-stat-item small {
    display: flex;
    min-height: 22px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #e6e6e6;
    color: #8c98a4;
    font-size: 12px;
    line-height: 22px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.merchant-agent-stat-item small b {
    color: #333;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

.merchant-agent-layer-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e6e6e6;
    border-bottom: 0;
    box-sizing: border-box;
}

.merchant-agent-layer-table {
    width: 100%;
    margin: 0;
    border: 0;
    table-layout: fixed;
}

.merchant-agent-layer-table th,
.merchant-agent-layer-table td {
    padding: 9px 12px;
    border-color: #e6e6e6;
    color: #5f6b7a;
    font-size: 14px;
    line-height: 20px;
}

.merchant-agent-layer-table th {
    background: #f8f8f8;
    color: #4b5563;
    font-weight: 500;
}

.merchant-agent-layer-table th:last-child,
.merchant-agent-layer-table td:last-child {
    border-right: 0;
}

.merchant-agent-layer-align-right,
.merchant-agent-layer-number,
.merchant-agent-layer-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-agent-layer-money {
    color: #333 !important;
    font-weight: 600;
    white-space: nowrap;
}

.merchant-agent-layer-number strong {
    font-weight: 600;
}

.merchant-agent-layer-method {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    color: #333;
    align-items: center;
    gap: 7px;
}

.merchant-agent-layer-method img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: none;
}

.merchant-agent-layer-method span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-agent-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
}

.merchant-agent-profile-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    min-width: 0;
    min-height: 52px;
    padding: 9px 12px;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    align-items: center;
    column-gap: 10px;
    box-sizing: border-box;
}

.merchant-agent-profile-item span {
    color: #666;
    font-size: 13px;
}

.merchant-agent-profile-item strong {
    min-width: 0;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    overflow-wrap: anywhere;
}

.merchant-agent-profile-item.is-numeric strong {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-agent-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.merchant-agent-status-item {
    display: flex;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    background: #fafafa;
    color: #666;
    font-size: 13px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
}

.merchant-agent-status-badge {
    display: inline-block;
    height: 20px;
    padding: 0 7px;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.merchant-agent-status-badge.is-success {
    background: #087f5b;
}

.merchant-agent-status-badge.is-danger {
    background: #c43c2b;
}

.merchant-agent-status-badge.is-disabled {
    background: #6b7785;
}

.merchant-agent-layer-empty {
    padding: 14px;
    color: #8c98a4;
    font-size: 13px;
    text-align: center;
}

@media (max-width: 560px) {
    .merchant-agent-layer-body,
    .merchant-agent-layer-form-body {
        padding: 14px;
    }

    .merchant-agent-layer .layui-layer-btn {
        padding-right: 14px;
        padding-left: 14px;
    }

    .merchant-agent-layer-context {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .merchant-agent-layer-context em {
        width: 100%;
        margin-left: 0;
        padding: 4px 0 0;
        border-top: 1px solid #e6e6e6;
        border-left: 0;
    }

    .merchant-agent-rate-editor-row {
        grid-template-columns: 1fr;
        row-gap: 9px;
    }

    .merchant-agent-rate-editor-control {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .merchant-agent-edit-field .layui-form-label {
        float: none;
        width: auto;
        padding: 0 0 6px;
        justify-content: flex-start;
    }

    .merchant-agent-edit-field .layui-input-block {
        margin-left: 0;
    }

    .merchant-agent-stats-grid,
    .merchant-agent-profile-grid,
    .merchant-agent-status-grid {
        grid-template-columns: 1fr;
    }

    .merchant-agent-profile-item {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .merchant-agent-layer-table {
        min-width: 520px;
    }
}

.merchant-order-detail {
    min-height: 100%;
    padding: 16px;
    background: #f3f6fa;
    box-sizing: border-box;
    color: #20222a;
}

.merchant-order-detail * {
    box-sizing: border-box;
}

.merchant-order-detail-hero,
.merchant-order-detail-section {
    border: 1px solid #e7eef6;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.merchant-order-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 16px;
    margin-bottom: 14px;
    padding: 18px;
    border-left: 3px solid #1e9fff;
}

.merchant-order-detail-hero-main {
    min-width: 0;
}

.merchant-order-detail-kicker,
.merchant-order-detail-item span,
.merchant-order-amount-card span {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-order-detail-kicker {
    margin-bottom: 5px;
}

.merchant-order-detail-title strong {
    display: block;
    color: #20222a;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    word-break: break-all;
}

.merchant-order-detail-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 7px;
    color: #6b7785;
    line-height: 1.7;
}

.merchant-order-detail-sub span {
    min-width: 0;
    word-break: break-all;
}

.merchant-order-detail-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
}

.merchant-order-detail-chip,
.merchant-order-detail-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid #dce8f6;
    border-radius: 3px;
    background: #f5f9ff;
    color: #1e6fb8;
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
}

.merchant-order-detail-hero-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.merchant-order-detail-hero-stat {
    min-width: 0;
    padding: 12px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: #fbfcfd;
}

.merchant-order-detail-hero-stat span {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-order-detail-hero-stat strong {
    display: block;
    margin-top: 5px;
    color: #20222a;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-all;
}

.merchant-order-detail-hero-stat.is-primary strong {
    color: #1e9fff;
}

.merchant-order-detail-hero-stat.is-income strong {
    color: #16b777;
}

.merchant-order-detail-section {
    margin-top: 14px;
    overflow: hidden;
}

.merchant-order-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 0 18px;
    border-bottom: 1px solid #edf1f5;
    color: #20222a;
    font-size: 15px;
    font-weight: 700;
}

.merchant-order-detail-section-head div {
    min-width: 0;
}

.merchant-order-detail-section-head i {
    margin-right: 6px;
    color: #1e9fff;
}

.merchant-order-detail-section-head em {
    flex: 0 1 auto;
    color: #8c98a4;
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    text-align: right;
}

.merchant-order-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    padding: 4px 18px 12px;
}

.merchant-order-detail-item {
    min-width: 0;
    padding: 13px 0 12px;
    border-bottom: 1px solid #f2f4f7;
}

.merchant-order-detail-item strong {
    display: block;
    margin-top: 4px;
    color: #20222a;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
    word-break: break-all;
}

.merchant-order-detail-item.is-main strong {
    color: #111827;
    font-weight: 700;
}

.merchant-order-detail-item.is-full {
    grid-column: 1 / -1;
}

.merchant-order-detail-item.is-url strong {
    color: #4b647d;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
}

.merchant-order-detail-item strong.is-success {
    color: #16b777;
}

.merchant-order-detail-item strong.is-warning {
    color: #ff8f1f;
}

.merchant-order-detail-item strong.is-danger {
    color: #ff5722;
}

.merchant-order-detail-item strong.is-muted {
    color: #8c98a4;
}

.merchant-order-detail-item strong.is-waiting {
    color: #1e9fff;
}

.merchant-order-detail-paytype {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.merchant-order-detail-paytype img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.merchant-order-amount-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 18px 18px;
}

.merchant-order-amount-card {
    grid-column: span 2;
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
    box-sizing: border-box;
}

.merchant-order-amount-card strong {
    display: block;
    margin-top: 6px;
    color: #20222a;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-all;
}

.merchant-order-amount-card em {
    display: block;
    margin-top: 3px;
    color: #9aa6b2;
    font-style: normal;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-order-amount-card.is-primary strong {
    color: #1e9fff;
}

.merchant-order-amount-card.is-income strong {
    color: #16b777;
}

.merchant-order-amount-card.is-compact {
    grid-column: span 3;
}

.merchant-order-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 18px 18px 4px;
}

.merchant-order-timeline-item {
    position: relative;
    min-width: 0;
    padding: 0 14px 16px 22px;
    border-bottom: 1px solid #f2f4f7;
}

.merchant-order-timeline-item:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 6px;
    width: 100%;
    height: 1px;
    background: #e7eef6;
}

.merchant-order-timeline-item:last-child:before {
    display: none;
}

.merchant-order-timeline-item i {
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 1;
    width: 11px;
    height: 11px;
    border: 2px solid #c8d5e2;
    border-radius: 50%;
    background: #fff;
}

.merchant-order-timeline-item.is-active i {
    border-color: #16b777;
    background: #16b777;
}

.merchant-order-timeline-item.is-warning i {
    border-color: #ff8f1f;
    background: #ff8f1f;
}

.merchant-order-timeline-item span {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-order-timeline-item strong {
    display: block;
    margin-top: 4px;
    color: #20222a;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    word-break: break-all;
}

.merchant-order-extension-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 18px 18px;
}

.merchant-order-extension-card {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: #fbfcfd;
}

.merchant-order-extension-card.is-placeholder {
    border-style: dashed;
}

.merchant-order-extension-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.merchant-order-extension-card-head span {
    color: #20222a;
    font-size: 14px;
    font-weight: 700;
}

.merchant-order-extension-card-head em {
    color: #8c98a4;
    font-style: normal;
    font-size: 12px;
}

.merchant-order-extension-card pre,
.merchant-order-extension-card p {
    margin: 0;
    line-height: 1.8;
    word-break: break-all;
}

.merchant-order-extension-card pre {
    white-space: pre-wrap;
    color: #4b647d;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
}

.merchant-order-extension-card p {
    color: #8c98a4;
}

.merchant-order-copy-btn,
.merchant-order-copy-text,
.merchant-order-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 9px;
    border: 1px solid #dce8f6;
    border-radius: 3px;
    background: #f7fbff;
    color: #1e6fb8;
    font-size: 12px;
    line-height: 22px;
    cursor: pointer;
    transition: all .16s ease;
}

.merchant-order-copy-btn:hover,
.merchant-order-copy-text:hover,
.merchant-order-expand-btn:hover {
    border-color: #1e9fff;
    background: #eef7ff;
    color: #0b78c8;
}

.merchant-order-copy-text {
    height: 22px;
    padding: 0 7px;
    margin-left: 8px;
}

.merchant-order-detail-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.merchant-order-detail-title strong {
    min-width: 0;
}

.merchant-order-copy-value {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.merchant-order-copy-value .merchant-order-copy-text {
    flex: none;
    margin-left: 0;
}

.merchant-order-status-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 3px;
    background: #f2f4f7;
    color: #6b7785;
    font-style: normal;
    font-size: 12px;
    line-height: 24px;
}

.merchant-order-status-tag.is-success {
    background: #ecf8f2;
    color: #16b777;
}

.merchant-order-status-tag.is-warning {
    background: #fff6e9;
    color: #ff8f1f;
}

.merchant-order-status-tag.is-danger {
    background: #fff1ed;
    color: #ff5722;
}

.merchant-order-status-tag.is-waiting {
    background: #eef7ff;
    color: #1e9fff;
}

.merchant-order-detail-hero-stat em {
    display: block;
    margin-top: 4px;
    color: #9aa6b2;
    font-style: normal;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-order-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 18px 18px;
}

.merchant-order-time-item {
    position: relative;
    min-width: 0;
    padding: 14px 16px 14px 42px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: #fbfcfd;
}

.merchant-order-time-item i {
    position: absolute;
    top: 18px;
    left: 17px;
    width: 11px;
    height: 11px;
    border: 2px solid #c8d5e2;
    border-radius: 50%;
    background: #fff;
}

.merchant-order-time-item.is-active i {
    border-color: #16b777;
    background: #16b777;
}

.merchant-order-time-item span {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-order-time-item strong {
    display: block;
    margin-top: 5px;
    color: #20222a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    word-break: break-all;
}

.merchant-order-callback-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 18px 18px;
}

.merchant-order-long-field,
.merchant-order-params-card {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: #fbfcfd;
}

.merchant-order-long-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.merchant-order-long-head span {
    color: #20222a;
    font-size: 14px;
    font-weight: 700;
}

.merchant-order-long-head .merchant-order-copy-text {
    flex: none;
    margin-left: 0;
}

.merchant-order-long-value,
.merchant-order-json {
    max-height: 48px;
    overflow: hidden;
    color: #4b647d;
    line-height: 1.8;
    word-break: break-all;
}

.merchant-order-json {
    max-height: 150px;
    margin: 0;
    padding: 12px;
    border: 1px solid #e7eef6;
    border-radius: 4px;
    background: #fff;
    white-space: pre-wrap;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
}

.merchant-order-json.is-json {
    color: #34495e;
}

.merchant-order-long-field.is-expanded .merchant-order-long-value,
.merchant-order-params-card.is-expanded .merchant-order-json {
    max-height: none;
}

.merchant-order-expand-btn {
    margin-top: 10px;
}

.merchant-order-empty {
    padding: 16px;
    border: 1px dashed #dde5ee;
    border-radius: 4px;
    background: #fff;
    color: #8c98a4;
    text-align: center;
}

.merchant-order-copy-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 99999;
    min-width: 82px;
    padding: 9px 14px;
    border-radius: 4px;
    background: rgba(32, 34, 42, .88);
    color: #fff;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: all .18s ease;
}

.merchant-order-copy-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.merchant-settlement-apply,
.merchant-settlement-list,
.merchant-settlement-list-page {
    border: 1px solid #e7eef6;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.merchant-settlement-apply .layui-card-header,
.merchant-settlement-list .layui-card-header,
.merchant-settlement-list-page .layui-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    min-height: 48px;
    border-bottom-color: #edf1f5;
    color: #20222a;
    font-size: 15px;
    font-weight: 700;
}

.merchant-settlement-apply .layui-card-header em,
.merchant-settlement-list .layui-card-header em,
.merchant-settlement-list-page .layui-card-header em {
    flex: 1;
    color: #8c98a4;
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
}

.merchant-settlement-header-link {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #dce8f6;
    border-radius: 3px;
    background: #f7fbff;
    color: #1e6fb8;
    font-size: 12px;
    line-height: 24px;
}

.merchant-settlement-header-link:hover {
    border-color: #1e9fff;
    color: #0b78c8;
}

.merchant-settlement-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
}

.merchant-settlement-main,
.merchant-settlement-side {
    min-width: 0;
}

.merchant-settlement-balance {
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid #e4eef8;
    border-left: 3px solid #1e9fff;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.merchant-settlement-balance span,
.merchant-settlement-account-type span,
.merchant-settlement-account-item span,
.merchant-settlement-help {
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.6;
}

.merchant-settlement-balance > strong {
    display: block;
    margin-top: 6px;
    color: #16b777;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
}

.merchant-settlement-balance p {
    margin: 8px 0 0;
    color: #6b7785;
    line-height: 1.7;
}

.merchant-settlement-rule {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.merchant-settlement-rule > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #edf3f9;
    border-radius: 4px;
    background: #fff;
}

.merchant-settlement-rule span,
.merchant-settlement-preview span {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-settlement-rule strong {
    display: block;
    margin-top: 3px;
    color: #20222a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-all;
}

.merchant-settlement-form {
    padding: 18px 18px 6px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: #fbfcfd;
}

.merchant-settlement-form .layui-form-label {
    width: 110px;
    padding-left: 0;
    color: #4b5563;
}

.merchant-settlement-form .layui-input-block {
    margin-left: 120px;
}

.merchant-settlement-input {
    position: relative;
}

.merchant-settlement-amount-line {
    display: flex;
    gap: 8px;
}

.merchant-settlement-amount-line .merchant-settlement-input {
    flex: 1;
    min-width: 0;
}

.merchant-settlement-fill {
    flex: none;
    width: 88px;
}

.merchant-settlement-input span {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 1;
    color: #8c98a4;
    line-height: 38px;
}

.merchant-settlement-input .layui-input {
    padding-left: 30px;
}

.merchant-settlement-real {
    color: #16b777;
    font-weight: 700;
}

.merchant-settlement-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.merchant-settlement-preview > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: #fff;
}

.merchant-settlement-preview strong {
    display: block;
    margin-top: 3px;
    color: #20222a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.merchant-settlement-preview > div:last-child strong {
    color: #16b777;
}

.merchant-settlement-help {
    margin-top: 7px;
}

.merchant-settlement-account,
.merchant-settlement-notice {
    padding: 16px;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    background: #fbfcfd;
}

.merchant-settlement-notice {
    margin-top: 14px;
}

.merchant-settlement-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid #dce8f6;
    border-radius: 4px;
    background: #f7fbff;
}

.merchant-settlement-guide span,
.merchant-settlement-list-guide p {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.6;
}

.merchant-settlement-guide strong {
    display: block;
    margin-top: 3px;
    color: #20222a;
    font-size: 14px;
}

.merchant-settlement-guide a {
    flex: none;
    color: #1e6fb8;
    font-size: 13px;
}

.merchant-settlement-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.merchant-settlement-section-title span {
    color: #20222a;
    font-size: 14px;
    font-weight: 700;
}

.merchant-settlement-edit {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border: 1px solid #dce8f6;
    border-radius: 3px;
    background: #f7fbff;
    color: #1e6fb8;
    font-size: 12px;
    line-height: 22px;
}

.merchant-settlement-edit:hover {
    border-color: #1e9fff;
    color: #0b78c8;
}

.merchant-settlement-account-type {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 4px;
    background: #fff;
}

.merchant-settlement-account-type i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: #eef7ff;
    color: #1e9fff;
    font-size: 20px;
}

.merchant-settlement-account-type strong {
    display: block;
    margin-top: 3px;
    color: #20222a;
    font-size: 15px;
}

.merchant-settlement-account-list {
    margin-top: 10px;
}

.merchant-settlement-account-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f5;
}

.merchant-settlement-account-item:last-child {
    border-bottom: 0;
}

.merchant-settlement-account-item strong {
    min-width: 0;
    color: #20222a;
    font-weight: 500;
    text-align: right;
    word-break: break-all;
}

.merchant-settlement-empty {
    margin-top: 10px;
    padding: 14px;
    border: 1px dashed #dde5ee;
    border-radius: 4px;
    background: #fff;
    color: #8c98a4;
    line-height: 1.8;
}

.merchant-settlement-notice ul {
    margin: 0;
    padding-left: 18px;
    color: #6b7785;
    line-height: 1.9;
}

.merchant-settlement-list {
    margin-top: 15px;
}

.merchant-settlement-list-page .layui-card-body {
    padding: 15px;
}

.merchant-page .merchant-settlement-list-page {
    border: 0;
    border-radius: 2px;
    box-shadow: none;
}

.merchant-page .merchant-settlement-list-page > .layui-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 43px;
    box-sizing: border-box;
    min-height: 0;
    padding: 0 15px;
    border-bottom-color: #f6f6f6;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 42px;
}

.layui-card > .merchant-financial-search.layui-card-header {
    display: block;
    height: auto;
    min-height: 0;
    padding: 15px 15px 10px;
    border-bottom: 0;
    background: transparent;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.merchant-financial-search .layui-form-item {
    margin-bottom: 0;
    line-height: normal;
}

.merchant-financial-search .layui-form-item .layui-inline {
    margin-right: 10px;
    margin-bottom: 10px;
}

.merchant-financial-search .layui-input {
    width: 188px;
    height: 38px;
    color: #666;
    font-size: 14px;
    font-weight: 400;
}

.merchant-financial-search .merchant-settlement-filter,
.merchant-financial-search .merchant-settlement-filter .layui-form-select {
    width: 188px;
}

.merchant-financial-search .layui-btn {
    height: 38px;
    border-color: #009688;
    background-color: #009688;
    font-size: 14px;
    font-weight: 400;
    line-height: 38px;
}

.merchant-financial-search .layui-btn:hover {
    border-color: #008678;
    background-color: #008678;
}

.merchant-settlement-list-page .layui-table-page .layui-laypage-skip .layui-input {
    width: 40px;
}

.merchant-settlement-list-page .layui-table-page .layui-laypage-limits .layui-input {
    width: auto;
}

.merchant-settlement-list-page > .layui-card-header .merchant-settlement-header-link {
    height: 30px;
    margin-top: 0;
    padding: 0 10px;
    border-color: #e6e6e6;
    border-radius: 2px;
    background: #fff;
    color: #1e9fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 28px;
}

.merchant-settlement-list-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 15px 16px;
    border: 1px solid #edf1f5;
    border-left: 3px solid #1e9fff;
    border-radius: 4px;
    background: #fbfcfd;
}

.merchant-settlement-list-guide strong {
    display: block;
    color: #20222a;
    font-size: 15px;
}

.merchant-settlement-list-guide p {
    margin: 4px 0 0;
}

.merchant-settlement-table-tip {
    display: none;
}

/* 商户端资金类表格：以金额与状态为核心建立统一的数据阅读层级。 */
.merchant-financial-table-page .layui-table-header th,
.merchant-financial-table-page .layui-table-body td {
    padding-top: 6px;
    padding-bottom: 6px;
}

.merchant-financial-table-page .layui-table-header .layui-table-cell {
    height: 28px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
}

.merchant-financial-table-page .layui-table-body .layui-table-cell {
    height: 28px;
    color: #5f6b7a;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
}

.merchant-financial-table-page .layui-table-body td[data-field="memo"] .layui-table-cell,
.merchant-financial-table-page .layui-table-body td[data-field="createtime"] .layui-table-cell,
.merchant-financial-table-page .layui-table-body td[data-field="complete_time"] .layui-table-cell {
    color: #6b7785;
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.merchant-financial-table-page .financial-amount {
    display: inline-block;
    color: #20222a;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    line-height: 28px;
    white-space: nowrap;
}

.merchant-financial-table-page .financial-amount-primary,
.merchant-financial-table-page .financial-amount-neutral {
    color: #20222a;
}

.merchant-financial-table-page .financial-amount-positive {
    color: #087f5b;
}

.merchant-financial-table-page .financial-amount-negative,
.merchant-financial-table-page .financial-amount-fee {
    color: #c43c2b;
}

.merchant-financial-table-page .financial-amount-fee {
    font-weight: 500;
}

.merchant-financial-table-page .financial-method {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    color: #5f6b7a;
    font-size: 14px;
    font-weight: 400;
    vertical-align: top;
}

.merchant-financial-table-page .financial-method-icon {
    flex: none;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.merchant-financial-table-page .layui-badge.financial-status {
    box-sizing: border-box;
    height: 20px;
    padding: 0 7px;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    vertical-align: middle;
}

.merchant-financial-table-page .financial-status-processing {
    background-color: #0b6fae;
}

.merchant-financial-table-page .financial-status-success {
    background-color: #087f5b;
}

.merchant-financial-table-page .financial-status-failed {
    background-color: #c43c2b;
}

.merchant-financial-table-page .financial-status-pending {
    background-color: #a45f00;
}

/* 商户结算列表：收款快照、结算金额与时间使用稳定双行结构，保持七列信息层级。 */
.merchant-settlement-list-page .layui-table-body td {
    vertical-align: middle;
}

.merchant-settlement-list-page .layui-table-body td[data-field="settlement_info_items"] .layui-table-cell,
.merchant-settlement-list-page .layui-table-body td[data-field="amount"] .layui-table-cell,
.merchant-settlement-list-page .layui-table-body td[data-field="createtime"] .layui-table-cell {
    height: 40px;
    line-height: 20px;
}

.merchant-settlement-info,
.merchant-settlement-time {
    display: flex;
    min-width: 0;
    min-height: 40px;
    flex-direction: column;
    justify-content: center;
    line-height: 20px;
}

.merchant-settlement-info-line {
    display: flex;
    min-width: 0;
    height: 20px;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.merchant-settlement-info-line em {
    flex: 0 0 68px;
    overflow: hidden;
    color: #8c98a4;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    text-overflow: ellipsis;
}

.merchant-settlement-info-line strong {
    min-width: 0;
    overflow: hidden;
    flex: 1;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-overflow: ellipsis;
}

.merchant-settlement-info-more {
    flex: none;
    color: #8c98a4;
    font-size: 11px;
    font-weight: 400;
}

.merchant-settlement-copy {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    outline: 0;
    flex: none;
    background: transparent;
    color: #8c98a4;
    cursor: pointer;
    line-height: 20px;
}

.merchant-settlement-copy:hover,
.merchant-settlement-copy:focus {
    color: #009688;
}

.merchant-settlement-copy .layui-icon {
    font-size: 14px;
}

.merchant-settlement-time span {
    display: block;
    overflow: hidden;
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-settlement-time-primary {
    color: #5f6b7a;
}

.merchant-settlement-time-secondary {
    color: #8c98a4;
}

.merchant-settlement-list-amount {
    display: flex;
    min-width: 0;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    line-height: 20px;
}

.merchant-settlement-list-amount-line {
    display: flex;
    min-width: 0;
    height: 20px;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.merchant-settlement-list-amount-label {
    flex: 0 0 28px;
    color: #8c98a4;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    text-align: left;
}

.merchant-settlement-list-amount-value {
    min-width: 0;
    overflow: hidden;
    flex: 1;
    color: #8c98a4;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-settlement-list-amount-value .financial-amount {
    display: block;
    line-height: 20px;
}

/* 商户订单列表：沿用资金类表格层级，只增强同一单元格内的主次信息。 */
.merchant-order-list-page .layui-table-body td[data-field="id"] .layui-table-cell,
.merchant-order-list-page .layui-table-body td[data-field="amount"] .layui-table-cell,
.merchant-order-list-page .layui-table-body td[data-field="mch_amount"] .layui-table-cell,
.merchant-order-list-page .layui-table-body td[data-field="createtime"] .layui-table-cell {
    height: auto;
    min-height: 42px;
    line-height: normal;
}

.merchant-order-list-page .merchant-order-pair {
    display: flex;
    min-width: 0;
    height: 42px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.merchant-order-list-page .merchant-order-pair-primary,
.merchant-order-list-page .merchant-order-pair-secondary {
    display: block;
    min-width: 0;
    overflow: hidden;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-order-list-page .merchant-order-pair-primary {
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
}

.merchant-order-list-page .merchant-order-pair-secondary {
    color: #6b7785;
    font-size: 13px;
    font-weight: 400;
}

.merchant-order-list-page .merchant-order-number-pair {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-order-list-page .merchant-order-pair .financial-amount {
    display: block;
    line-height: 20px;
}

.merchant-order-list-page .merchant-order-amount-primary {
    color: #20222a;
    font-size: 14px;
    font-weight: 600;
}

.merchant-order-list-page .merchant-order-amount-secondary {
    color: #5f6b7a;
    font-size: 13px;
    font-weight: 500;
}

.merchant-order-list-page .merchant-order-amount-different {
    color: #8a5a00;
}

.merchant-order-list-page .merchant-order-mch-amount {
    color: #20222a;
    font-size: 14px;
    font-weight: 600;
}

.merchant-order-list-page .merchant-order-charge-mode {
    color: #6b7785;
    font-size: 13px;
    font-weight: 400;
}

.merchant-order-list-page .merchant-order-time-pair .merchant-order-pair-primary,
.merchant-order-list-page .merchant-order-time-pair .merchant-order-pair-secondary {
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-order-list-page .merchant-order-time-pair .merchant-order-pair-primary {
    color: #5f6b7a;
}

.merchant-order-list-page .merchant-order-time-pair .merchant-order-pair-secondary {
    color: #6b7785;
}

.merchant-order-list-page .merchant-order-method {
    min-height: 28px;
    line-height: 28px;
    white-space: nowrap;
}

.merchant-order-list-page .merchant-order-method .financial-method-icon {
    width: 20px;
    height: 20px;
}

.merchant-order-list-page .merchant-order-status {
    white-space: nowrap;
}

.merchant-order-list-page .financial-status-neutral {
    background-color: #6b7785;
}

.merchant-order-list-page .merchant-order-actions {
    display: flex;
    align-items: center;
    min-height: 28px;
    white-space: nowrap;
}

.settle-page .settle-shell {
    background: transparent;
}

.settle-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 43px;
    min-height: 0;
    border-bottom-color: #f6f6f6;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 42px;
}

.settle-page-header > div {
    min-width: 0;
}

.settle-page-header span {
    display: inline-block;
    color: #333;
    font-size: 14px;
    font-weight: 400;
}

.settle-page-header em {
    margin-left: 10px;
    color: #8c98a4;
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
}

.settle-layout {
    display: flex;
    flex-wrap: wrap;
}

.settle-main,
.settle-side {
    min-width: 0;
}

.settle-page .settle-summary,
.settle-page .settle-account-card,
.settle-page .settle-form-card,
.settle-page .settle-note-card,
.settle-page .settle-disabled-card,
.settle-page .settle-history-card {
    box-sizing: border-box;
    border: 1px solid #dde3ec;
    border-radius: 2px;
    background: #fff;
    box-shadow: none;
}

.settle-summary {
    margin-bottom: 15px;
    border-left: 3px solid #009688 !important;
}

.settle-account-card {
    margin-bottom: 15px;
}

.settle-summary .layui-card-body {
    padding: 12px 16px;
}

.settle-summary-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.settle-summary-main {
    flex: 0 0 auto;
    min-width: 166px;
}

.settle-label {
    margin-bottom: 4px;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.5;
}

.settle-amount {
    color: #16b777;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.18;
    word-break: break-all;
}

.settle-summary-rules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    flex: 1;
    min-width: 0;
    border-radius: 2px;
    background: #f7f8fa;
    overflow: hidden;
}

.settle-summary-rules span {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 48px;
    padding: 7px 10px;
    border-left: 1px solid #dfe5ee;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.5;
}

.settle-summary-rules span:first-child {
    border-left: 0;
}

.settle-summary-rules strong {
    display: block;
    margin-top: 2px;
    color: #20222a;
    font-size: 13px;
    font-weight: 700;
    word-break: break-all;
}

.settle-desc {
    margin-top: 8px;
    color: #5f6b7a;
    font-size: 13px;
    line-height: 1.7;
}

.settle-desc-light {
    color: #8c98a4;
}

.settle-page .settle-summary-header,
.settle-page .settle-account-header,
.settle-page .settle-form-header,
.settle-page .settle-note-card .layui-card-header,
.settle-page .settle-history-card .layui-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 43px;
    box-sizing: border-box;
    min-height: 0;
    border-bottom-color: #e1e6ee;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 42px;
}

.settle-summary-header em,
.settle-account-header em,
.settle-form-header em {
    color: #8c98a4;
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    text-align: right;
}

.settle-account-card .layui-card-body,
.settle-form-card .layui-card-body {
    padding: 14px 20px 16px;
}

.settle-account-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.settle-account-main {
    display: flex;
    align-items: center;
    flex: 0 0 320px;
    min-width: 0;
}

.settle-account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: 4px;
    background: #f2fbfa;
    color: #009688;
    text-align: center;
    font-size: 17px;
    line-height: 32px;
    overflow: hidden;
}

.settle-account-icon img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.settle-account-icon.has-image span {
    display: none;
}

.settle-account-icon.has-image.is-fallback span {
    display: block;
}

.settle-account-overview {
    min-width: 0;
}

.settle-account-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #20222a;
    line-height: 1.45;
}

.settle-account-title strong {
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settle-account-primary {
    margin-top: 4px;
    color: #606975;
    font-size: 13px;
    line-height: 1.45;
}

.settle-account-primary em {
    margin-right: 8px;
    color: #8c98a4;
    font-style: normal;
}

.settle-account-primary strong {
    color: #20222a;
    font-weight: 600;
    word-break: break-all;
}

.settle-account-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.settle-account-meta span {
    min-width: 0;
    padding-left: 10px;
    border-left: 1px solid #dfe5ee;
}

.settle-account-meta em {
    display: block;
    color: #8c98a4;
    font-style: normal;
    font-size: 12px;
    line-height: 1.45;
}

.settle-account-meta strong {
    display: block;
    margin-top: 1px;
    color: #20222a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-all;
}

.settle-account-list-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin: 10px 0 20px;
}

.settle-info-row {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #d7dde7;
    border-radius: 4px;
    background: #fff;
    color: #606975;
}

.settle-info-row span:first-child {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.5;
}

.settle-info-row strong {
    display: block;
    margin-top: 2px;
    color: #20222a;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-all;
}

.settle-form {
    margin-top: 0;
}

.settle-form-card .layui-form-item {
    margin-bottom: 16px;
}

.settle-form-card .layui-form-label {
    width: 120px;
    box-sizing: border-box;
    padding: 9px 14px 9px 0;
    color: #333;
    font-weight: 400;
    text-align: right;
}

.settle-form-card .layui-input-block {
    min-width: 0;
    max-width: 820px;
    margin-left: 120px;
}

.settle-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.settle-prefix {
    position: static;
    flex: 0 0 40px;
    width: 40px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #d7dde7;
    border-right: 0;
    border-radius: 2px 0 0 2px;
    background: #f7f8fa;
    color: #8c98a4;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
}

.settle-page .settle-amount-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding-left: 12px;
    padding-right: 12px;
    border-color: #d7dde7 !important;
    border-radius: 0 !important;
}

.settle-page .settle-all-btn {
    position: static;
    flex: 0 0 96px;
    height: 38px !important;
    margin-left: -1px;
    border-color: #d7dde7 !important;
    border-radius: 0 2px 2px 0 !important;
    background: #fff !important;
    color: #555 !important;
    line-height: 38px !important;
}

.settle-page .settle-all-btn:hover {
    border-color: #c9d2df !important;
    background: #f8fafc !important;
    color: #333 !important;
}

.settle-form-card .js-submit-btn {
    min-width: 144px;
    height: 38px;
    line-height: 38px;
}

.settle-form-card .js-submit-btn:not(.layui-btn-disabled) {
    border-color: #009688;
    background-color: #009688;
}

.settle-form-card .js-submit-btn:not(.layui-btn-disabled):hover {
    border-color: #008678;
    background-color: #008678;
}

.settle-help {
    margin-top: 6px;
    color: #8c98a4;
    font-size: 13px;
    line-height: 1.6;
}

.settle-error {
    display: none;
    margin-top: 8px;
    color: #ff5722;
    font-size: 13px;
    line-height: 1.6;
}

.settle-error.is-visible {
    display: block;
}

.settle-page .layui-form-danger,
.settle-page .settle-input-error {
    border-color: #ff5722 !important;
}

.settle-calc-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 2px;
    background: #f7f8fa;
}

.settle-calc-row {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 12px;
    border-left: 1px solid #dfe5ee;
    color: #606975;
    line-height: 1.5;
}

.settle-calc-row:first-child {
    padding-left: 0;
    border-left: 0;
}

.settle-calc-row strong {
    display: block;
    margin-top: 2px;
    color: #333;
    font-weight: 600;
}

.settle-divider {
    display: none;
}

.settle-final span {
    color: #333;
    font-weight: 600;
}

.settle-final strong {
    color: #16b777;
    font-size: 18px;
}

.settle-calc-card .settle-help {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dfe5ee;
}

.settle-form-card .js-google-code {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border-color: #d7dde7;
}

.settle-form-card .js-google-code:focus {
    border-color: #c9d2df !important;
}

.settle-account-card .settle-unbound {
    margin: 12px 0 0;
}

.settle-submit-item {
    margin-bottom: 0 !important;
}

.settle-security-warning,
.settle-unbound {
    margin: 10px 0 20px;
    padding: 12px 14px;
    border: 1px dashed #ffdcc7;
    border-radius: 4px;
    background: #fff8f3;
    color: #ff5722;
    line-height: 1.7;
}

.settle-rule-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 12px;
    border-radius: 2px;
    background: #f7f8fa;
    overflow: hidden;
}

.settle-rule-list div {
    box-sizing: border-box;
    padding: 9px 10px;
    border: 0;
    border-left: 1px solid #dfe5ee;
    border-top: 1px solid #dfe5ee;
    border-radius: 0;
    background: transparent;
}

.settle-rule-list div:nth-child(-n + 2) {
    border-top: 0;
}

.settle-rule-list div:nth-child(odd) {
    border-left: 0;
}

.settle-rule-list span {
    display: block;
    color: #8c98a4;
    font-size: 12px;
    line-height: 1.5;
}

.settle-rule-list strong {
    display: block;
    margin-top: 3px;
    color: #20222a;
    font-weight: 700;
    line-height: 1.5;
}

.settle-note-list {
    margin: 0;
    padding-left: 18px;
    color: #6b7785;
    line-height: 1.75;
}

.settle-history-card p {
    margin: 0 0 12px;
    color: #6b7785;
    line-height: 1.7;
}

.settle-confirm {
    color: #5f6b7a;
    line-height: 1.8;
}

.settle-confirm p {
    margin: 0 0 6px;
}

.settle-confirm strong {
    color: #20222a;
}

.settle-confirm-note {
    margin-top: 8px !important;
    color: #8c98a4;
    font-size: 12px;
}

.merchant-settlement-disabled {
    padding: 38px 20px;
    border: 1px dashed #dde5ee;
    border-radius: 4px;
    background: #fbfcfd;
    text-align: center;
}

.merchant-settlement-disabled i {
    display: block;
    color: #1e9fff;
    font-size: 34px;
    line-height: 1;
}

.merchant-settlement-disabled strong {
    display: block;
    margin-top: 12px;
    color: #20222a;
    font-size: 16px;
}

.merchant-settlement-disabled p {
    margin: 8px auto 16px;
    max-width: 460px;
    color: #6b7785;
    line-height: 1.8;
}

@media (max-width: 1200px) {
    .merchant-dashboard-rate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .merchant-dashboard-rate-grid .merchant-dashboard-rate-item {
        grid-column: auto !important;
    }
}

@media (max-width: 980px) {
    .merchant-order-detail-hero {
        grid-template-columns: 1fr;
    }

    .merchant-order-detail-hero-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .merchant-order-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 10px;
    }

    .merchant-order-time-grid {
        grid-template-columns: 1fr;
    }

    .merchant-settlement-layout {
        grid-template-columns: 1fr;
    }

    .merchant-order-timeline-item:nth-child(2):before {
        display: none;
    }
}

@media (max-width: 839px) {
    .merchant-agent-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .merchant-agent-summary-item:last-child {
        grid-column: 1 / -1;
    }

    .merchant-agent-rate-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 769px) and (max-width: 839px) {
    .merchant-agent-cost-card > .layui-card-body,
    .merchant-agent-invite-card > .layui-card-body {
        padding: 12px 14px;
    }

    .merchant-agent-section-note {
        margin-bottom: 8px;
    }

    .merchant-agent-rate-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .merchant-agent-rate-strip-item {
        min-height: 56px;
        padding: 9px 10px;
    }

    .merchant-agent-cost-main img {
        width: 28px;
        height: 28px;
    }

    .merchant-agent-cost-value,
    .merchant-agent-rate-strip-item .merchant-agent-cost-value {
        font-size: 15px;
    }

    .merchant-agent-invite-card.is-compact > .layui-card-body {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 8px 12px;
    }

    .merchant-agent-invite-meta {
        gap: 6px;
    }

    .merchant-agent-copy-row .layui-btn {
        min-width: 92px;
        padding: 0 12px;
    }
}

@media (max-width: 639px) {
    .merchant-agent-summary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .merchant-agent-summary-item:last-child {
        grid-column: auto;
    }

    .merchant-agent-rate-strip {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {
    .merchant-page .layui-fluid,
    .layui-fluid.merchant-page {
        padding: 10px;
    }

    .merchant-stat {
        min-height: 62px;
        padding: 12px;
    }

    .merchant-stat-value {
        font-size: 19px;
    }

    .merchant-copy-row,
    .merchant-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .merchant-doc-layout {
        display: block;
    }

    .merchant-doc-nav {
        position: static;
        width: auto;
        margin-bottom: 12px;
    }

    .merchant-doc-nav-list {
        display: flex;
        overflow-x: auto;
        padding: 8px;
        white-space: nowrap;
    }

    .merchant-doc-nav-list a {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border-left: 0;
        border-radius: 4px;
    }

    .merchant-doc-public-header {
        height: auto;
        position: static;
    }

    .merchant-doc-public-inner {
        display: block;
        height: auto;
        padding: 12px;
    }

    .merchant-doc-public-logo {
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .merchant-doc-public-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
        padding-bottom: 0;
        white-space: normal;
    }

    .merchant-doc-public-nav a {
        width: 100%;
        padding: 0 6px;
        font-size: 13px;
        text-align: center;
    }

    .merchant-doc-public-main {
        padding: 12px;
    }

    .merchant-doc-single-tools {
        position: sticky;
        top: 0;
        z-index: 999;
        justify-content: space-between;
        padding: 10px 12px;
        border-bottom: 1px solid #edf1f5;
        background: #fff;
        box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
    }

    .merchant-doc-menu-btn {
        display: inline-flex;
    }

    .merchant-doc-standalone-body .merchant-doc-public-main {
        padding-top: 12px;
    }

    .merchant-doc-standalone-body .merchant-doc-nav {
        display: none;
    }

    .merchant-doc-standalone-body .merchant-doc-layout {
        display: block;
    }

    .merchant-doc-standalone-body .merchant-doc-tree {
        max-height: none;
    }

    .merchant-doc-top,
    .merchant-doc-actions {
        display: block;
    }

    .merchant-doc-standalone-body .merchant-doc-actions {
        display: none;
    }

    .merchant-doc-actions {
        margin-top: 14px;
    }

    .merchant-doc-actions .layui-btn {
        width: 100%;
        margin: 0 0 8px;
    }

    .merchant-doc-tree {
        max-height: 300px;
        overflow: auto;
    }

    .merchant-doc-section {
        margin-top: 16px;
        scroll-margin-top: 16px;
    }

    .merchant-doc-section h2 {
        padding: 15px 18px;
        font-size: 17px;
    }

    .merchant-doc-section .doc-body {
        padding: 16px 18px 18px;
    }

    .merchant-doc-endpoint {
        grid-template-columns: 1fr;
    }

    .merchant-doc-note {
        display: block;
    }

    .merchant-doc-note i {
        display: block;
        margin-bottom: 6px;
    }

    .merchant-doc-content .layui-table {
        min-width: 620px;
    }

    .merchant-order-detail {
        padding: 10px;
    }

    .merchant-order-detail-hero {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .merchant-order-detail-title strong {
        font-size: 18px;
    }

    .merchant-order-detail-sub,
    .merchant-order-detail-section-head,
    .merchant-order-extension-card-head,
    .merchant-order-detail-title,
    .merchant-order-copy-value,
    .merchant-order-long-head {
        display: block;
    }

    .merchant-order-copy-btn,
    .merchant-order-copy-value .merchant-order-copy-text,
    .merchant-order-long-head .merchant-order-copy-text {
        margin: 8px 0 0;
    }

    .merchant-order-detail-section-head {
        padding: 12px 15px;
    }

    .merchant-order-detail-section-head em {
        display: block;
        margin-top: 4px;
        text-align: left;
    }

    .merchant-order-detail-hero-side {
        grid-template-columns: 1fr;
    }

    .merchant-order-detail-status {
        justify-content: flex-start;
        margin-top: 12px;
    }

    .merchant-order-detail-grid,
    .merchant-order-amount-grid,
    .merchant-order-timeline,
    .merchant-order-extension-grid,
    .merchant-order-time-grid {
        grid-template-columns: 1fr;
    }

    .merchant-order-detail-grid {
        padding: 4px 15px 12px;
    }

    .merchant-order-amount-grid,
    .merchant-order-extension-grid,
    .merchant-order-time-grid,
    .merchant-order-callback-list {
        padding: 15px;
    }

    .merchant-order-amount-card,
    .merchant-order-amount-card.is-compact {
        grid-column: auto;
    }

    .merchant-order-timeline {
        padding: 15px 15px 0;
    }

    .merchant-order-timeline-item:before {
        top: 12px;
        left: 5px;
        width: 1px;
        height: 100%;
    }

    .merchant-order-timeline-item:nth-child(2):before {
        display: block;
    }

    .merchant-order-timeline-item:last-child:before {
        display: none;
    }

    .merchant-settlement-apply .layui-card-header,
    .merchant-settlement-list .layui-card-header,
    .merchant-settlement-list-page .layui-card-header,
    .merchant-settlement-section-title,
    .merchant-settlement-account-item,
    .merchant-settlement-guide,
    .merchant-settlement-list-guide {
        display: block;
    }

    .merchant-settlement-apply .layui-card-header em,
    .merchant-settlement-list .layui-card-header em,
    .merchant-settlement-list-page .layui-card-header em {
        display: block;
        margin-top: 4px;
    }

    .merchant-settlement-header-link,
    .merchant-settlement-guide a,
    .merchant-settlement-list-guide .layui-btn {
        margin-top: 10px;
    }

    .merchant-settlement-balance {
        padding: 16px;
    }

    .merchant-settlement-balance > strong {
        font-size: 26px;
    }

    .merchant-settlement-rule,
    .merchant-settlement-preview {
        grid-template-columns: 1fr;
    }

    .merchant-settlement-amount-line {
        display: block;
    }

    .merchant-settlement-fill {
        width: 100%;
        margin-top: 8px;
    }

    .merchant-settlement-form {
        padding: 15px;
    }

    .merchant-settlement-form .layui-form-label {
        width: auto;
        padding: 0 0 8px;
        float: none;
        text-align: left;
    }

    .merchant-settlement-form .layui-input-block {
        margin-left: 0;
    }

    .merchant-settlement-edit {
        margin-top: 8px;
    }

    .merchant-settlement-account-item strong {
        display: block;
        margin-top: 4px;
        text-align: left;
    }

    .merchant-settlement-list-page .layui-card-body {
        padding: 12px;
    }

    .merchant-settlement-table-tip {
        display: block;
        margin: 0 0 8px;
        color: #8c98a4;
        font-size: 12px;
        line-height: 1.6;
    }

    .merchant-settlement-list-page .layui-table-view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .merchant-settlement-list-page .layui-table-box,
    .merchant-settlement-list-page .layui-table-header,
    .merchant-settlement-list-page .layui-table-body {
        min-width: 1190px;
    }

    .merchant-settlement-list-page .layui-table-page {
        height: auto;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .merchant-settlement-list-page .layui-laypage-skip,
    .merchant-settlement-list-page .layui-laypage-limits {
        display: none;
    }

    .merchant-page .merchant-settlement-list-page > .layui-card-header {
        display: flex;
        height: auto;
        min-height: 43px;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 42px;
    }

    .merchant-settlement-list-page > .layui-card-header .merchant-settlement-header-link {
        margin-top: 0;
    }

    .layui-card > .merchant-financial-search.layui-card-header {
        display: block;
        padding: 12px 12px 6px;
        line-height: normal;
    }

    .merchant-financial-search .layui-form-item .layui-inline {
        display: block;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .merchant-financial-search .layui-input,
    .merchant-financial-search .layui-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .merchant-financial-search .merchant-settlement-filter,
    .merchant-financial-search .merchant-settlement-filter .layui-form-select {
        width: 100%;
    }

    .settle-page .settle-page-header,
    .settle-page .settle-summary-header,
    .settle-page .settle-account-header,
    .settle-page .settle-form-header,
    .settle-page .settle-note-card .layui-card-header,
    .settle-page .settle-history-card .layui-card-header {
        display: block;
        height: auto;
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 1.6;
    }

    .settle-page-header em,
    .settle-summary-header em,
    .settle-account-header em,
    .settle-form-header em {
        display: block;
        margin: 4px 0 0;
        text-align: left;
    }

    .settle-summary .layui-card-body,
    .settle-account-card .layui-card-body,
    .settle-form-card .layui-card-body {
        padding: 15px;
    }

    .settle-summary-grid {
        display: block;
    }

    .settle-summary-main {
        min-width: 0;
    }

    .settle-amount {
        font-size: 28px;
    }

    .settle-summary-rules {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        margin-top: 12px;
    }

    .settle-summary-rules span {
        display: block;
        min-height: 0;
        padding: 8px 10px;
    }

    .settle-summary-rules span:nth-child(odd) {
        border-left: 0;
    }

    .settle-summary-rules span:nth-child(n + 3) {
        border-top: 1px solid #dfe5ee;
    }

    .settle-summary-rules strong {
        display: block;
        margin-top: 2px;
    }

    .settle-account-confirm {
        display: block;
    }

    .settle-account-main {
        flex: none;
    }

    .settle-account-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #edf1f5;
    }

    .settle-account-meta span {
        padding-left: 0;
        border-left: 0;
    }

    .settle-account-confirm .layui-btn {
        width: 100%;
        margin-top: 12px;
    }

    .settle-account-list-inline {
        grid-template-columns: 1fr;
    }

    .settle-form-card .layui-form-item {
        display: block;
        margin-bottom: 20px;
    }

    .settle-form-card .layui-form-label {
        display: block;
        box-sizing: border-box;
        width: auto;
        padding: 0 0 8px;
        flex: none;
        float: none;
        text-align: left;
    }

    .settle-form-card .layui-input-block {
        margin-left: 0;
    }

    .settle-input-wrap {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 96px;
        gap: 0;
    }

    .settle-page .settle-all-btn {
        width: auto;
        min-width: 0;
        height: 38px !important;
        margin: 0 0 0 -1px;
        border-radius: 0 2px 2px 0 !important;
        line-height: 38px !important;
    }

    .settle-calc-card {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .settle-calc-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border-top: 1px solid #dfe5ee;
        border-left: 0;
    }

    .settle-calc-row:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .settle-calc-row strong {
        margin-top: 0;
        text-align: right;
    }

    .settle-final strong {
        font-size: 20px;
    }

    .settle-form-card .js-google-code,
    .settle-input-wrap {
        max-width: none;
    }

    .settle-submit-item .layui-btn {
        width: 100%;
    }

    .merchant-dashboard-hero,
    .merchant-dashboard-actions,
    .merchant-dashboard-stat-foot,
    .merchant-dashboard-account-item {
        display: block;
    }

    .merchant-dashboard-actions {
        margin-top: 14px;
    }

    .merchant-dashboard-actions .layui-btn {
        width: 100%;
        margin: 0 0 8px;
    }

    .merchant-dashboard-stat {
        min-height: auto;
        padding: 15px;
    }

    .merchant-dashboard-stat-value {
        margin: 14px 0 12px;
        font-size: 26px;
    }

    .merchant-dashboard-stat-foot b,
    .merchant-dashboard-account-item strong {
        display: block;
        margin-top: 4px;
        text-align: left;
    }

    .merchant-dashboard-chart {
        height: 300px !important;
    }

    .merchant-dashboard-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .merchant-profile-info-grid,
    .merchant-rate-metrics {
        grid-template-columns: 1fr;
    }

    .merchant-google-box,
    .merchant-google-secret,
    .merchant-announcement-item,
    .merchant-agent-status {
        display: block;
    }

    .merchant-agent-cost-grid {
        grid-template-columns: 1fr;
    }

    .merchant-agent-invite-card.is-compact > .layui-card-body {
        display: block;
    }

    .merchant-agent-invite-card.is-compact .merchant-agent-invite-meta {
        margin-bottom: 12px;
    }

    .merchant-agent-invite-card.is-compact .merchant-subtext {
        margin-top: 8px;
    }

    .merchant-agent-cost-item {
        align-items: flex-start;
    }

    .merchant-agent-rate-matrix-head,
    .merchant-agent-rate-matrix-row {
        grid-template-columns: minmax(56px, 1fr) minmax(78px, 1fr) minmax(48px, .7fr);
        column-gap: 6px;
    }

    .merchant-agent-rate-matrix-row {
        align-items: flex-start;
    }

    .merchant-agent-invite-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .merchant-agent-invite-meta .layui-btn {
        width: 100%;
    }

    .merchant-agent-list-card .layui-card-body {
        padding-right: 10px;
        padding-left: 10px;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-view {
        margin: 0;
        border: 0;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-header {
        display: none;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-box,
    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-main,
    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-body {
        overflow: visible;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-body table {
        width: 100% !important;
        background: transparent;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-body tr {
        display: block;
        margin-bottom: 10px;
        background: transparent;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-body tr:last-child {
        margin-bottom: 0;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-body td {
        display: block;
        width: 100% !important;
        padding: 0;
        border: 0;
        background: transparent;
        box-sizing: border-box;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-cell {
        width: 100% !important;
        min-height: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-page {
        height: auto;
        min-height: 42px;
        padding: 8px 0 0;
        border-top: 0;
        text-align: center;
        box-sizing: border-box;
        overflow: visible;
    }

    .merchant-agent-list-card .layui-laypage-skip,
    .merchant-agent-list-card .layui-laypage-limits {
        display: none;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-table-page > div {
        height: auto;
    }

    .merchant-agent-list-card.merchant-agent-mobile-table .layui-laypage {
        margin: 0;
    }

    .merchant-agent-mobile-card .merchant-agent-rate-earnings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .merchant-google-main,
    .merchant-announcement-view {
        margin-top: 12px;
    }

    .merchant-google-secret .layui-btn,
    .merchant-announcement-view {
        width: 100%;
    }
}

@media (min-width: 640px) and (max-width: 768px) {
    .merchant-agent-cost-card > .layui-card-body,
    .merchant-agent-invite-card > .layui-card-body {
        padding: 12px 14px;
    }

    .merchant-agent-section-note {
        margin-bottom: 8px;
    }

    .merchant-agent-rate-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .merchant-agent-rate-strip-item {
        min-height: 56px;
        padding: 9px 10px;
    }

    .merchant-agent-cost-main {
        align-items: center;
    }

    .merchant-agent-cost-main img {
        width: 28px;
        height: 28px;
    }

    .merchant-agent-cost-value,
    .merchant-agent-rate-strip-item .merchant-agent-cost-value {
        font-size: 15px;
    }

    .merchant-agent-invite-card.is-compact > .layui-card-body {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        align-items: center;
        gap: 8px 12px;
    }

    .merchant-agent-invite-card.is-compact .merchant-agent-invite-meta,
    .merchant-agent-invite-meta {
        flex-direction: row;
        align-items: center;
        margin-bottom: 0;
    }

    .merchant-agent-invite-meta .layui-btn {
        width: auto;
    }

    .merchant-copy-row,
    .merchant-agent-copy-row {
        flex-direction: row;
        align-items: stretch;
    }

    .merchant-agent-copy-row .layui-btn {
        width: auto;
        min-width: 92px;
        padding: 0 12px;
    }

    .merchant-agent-invite-card.is-compact .merchant-subtext {
        grid-column: 1 / -1;
        margin-top: 0;
    }
}

@media (max-width: 639px) {
    .merchant-agent-invite-card.is-compact .merchant-agent-invite-meta,
    .merchant-agent-invite-meta {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .merchant-agent-invite-meta .layui-btn {
        width: auto;
        margin-left: auto;
        flex: 0 0 auto;
    }

    .merchant-agent-copy-row {
        flex-direction: row;
        align-items: stretch;
        min-width: 0;
    }

    .merchant-agent-copy-row .layui-input {
        min-width: 0;
        height: 38px;
        flex: 1 1 auto;
    }

    .merchant-agent-copy-row .layui-btn {
        width: auto;
        min-width: 92px;
        padding: 0 12px;
        flex: 0 0 auto;
    }
}

@media (max-width: 420px) {
    .settle-account-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px) {
    .merchant-agent-invite-meta,
    .merchant-agent-copy-row {
        gap: 6px;
    }

    .merchant-agent-invite-meta .layui-btn,
    .merchant-agent-copy-row .layui-btn {
        padding: 0 10px;
    }

    .merchant-agent-copy-row .layui-btn {
        min-width: 86px;
    }

    .merchant-agent-mobile-card .merchant-agent-rate-earnings-grid {
        grid-template-columns: 1fr;
    }

    .merchant-agent-mobile-head,
    .merchant-agent-mobile-contact-grid,
    .merchant-agent-mobile-times,
    .merchant-agent-mobile-rates,
    .merchant-agent-mobile-actions-secondary {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* 商户订单详情：方案 B，保持 LayuiAdmin 原生层级与状态色。 */
.merchant-order-detail.merchant-order-detail-compact {
    min-height: 100%;
    padding: 15px;
    background: #f2f2f2;
    color: #666;
}

.merchant-order-detail-compact .merchant-order-detail-summary,
.merchant-order-detail-compact .merchant-order-detail-section {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.merchant-order-detail-compact .merchant-order-detail-section {
    margin-top: 15px;
}

.merchant-order-detail-compact .merchant-order-detail-summary-head,
.merchant-order-detail-compact .merchant-order-detail-section-head {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #e6e6e6;
    background: #f8f8f8;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.merchant-order-detail-compact .merchant-order-detail-summary-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
}

.merchant-order-detail-compact .merchant-order-detail-identifiers {
    min-width: 0;
    padding: 0 15px;
}

.merchant-order-detail-compact .merchant-order-detail-number {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    min-height: 56px;
    border-bottom: 1px solid #e6e6e6;
}

.merchant-order-detail-compact .merchant-order-detail-number:last-child {
    border-bottom: 0;
}

.merchant-order-detail-compact .merchant-order-detail-number > span,
.merchant-order-detail-compact .merchant-order-detail-meta-item > span,
.merchant-order-detail-compact .merchant-order-detail-amount > span,
.merchant-order-detail-compact .merchant-order-detail-label {
    color: #666;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}

.merchant-order-detail-compact .merchant-order-detail-number > strong {
    min-width: 0;
    margin: 0;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    overflow-wrap: anywhere;
}

.merchant-order-detail-compact .merchant-order-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    border-left: 1px solid #e6e6e6;
}

.merchant-order-detail-compact .merchant-order-detail-meta-item {
    display: flex;
    min-width: 0;
    min-height: 112px;
    padding: 16px 12px;
    border-left: 1px solid #e6e6e6;
    flex-direction: column;
    justify-content: center;
}

.merchant-order-detail-compact .merchant-order-detail-meta-item:first-child {
    border-left: 0;
}

.merchant-order-detail-compact .merchant-order-detail-meta-item > strong {
    min-width: 0;
    margin-top: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

.merchant-order-detail-compact .layui-badge.financial-status {
    box-sizing: border-box;
    height: 20px;
    padding: 0 7px;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    vertical-align: middle;
}

.merchant-order-detail-compact .merchant-order-detail-paytype {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.merchant-order-detail-compact .merchant-order-detail-paytype img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: none;
}

.merchant-order-detail-compact .merchant-order-detail-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e6e6e6;
    background: #fafafa;
}

.merchant-order-detail-compact .merchant-order-detail-amount {
    display: flex;
    min-width: 0;
    min-height: 62px;
    padding: 12px 15px;
    border-left: 1px solid #e6e6e6;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.merchant-order-detail-compact .merchant-order-detail-amount:first-child {
    border-left: 0;
}

.merchant-order-detail-compact .merchant-order-detail-amount > strong {
    min-width: 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-order-detail-compact .merchant-order-detail-amount.is-primary > strong {
    color: #1e9fff;
}

.merchant-order-detail-compact .merchant-order-detail-amount.is-income > strong {
    color: #009688;
}

.merchant-order-detail-compact .merchant-order-refund-head {
    justify-content: space-between;
    gap: 12px;
}

.merchant-order-detail-compact .merchant-order-refund-amounts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid #e6e6e6;
    background: #fafafa;
}

.merchant-order-detail-compact .merchant-order-refund-amount {
    display: flex;
    min-width: 0;
    min-height: 62px;
    padding: 12px 15px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.merchant-order-detail-compact .merchant-order-refund-amount + .merchant-order-refund-amount {
    border-left: 1px solid #e6e6e6;
}

.merchant-order-detail-compact .merchant-order-refund-amount > span {
    color: #666;
    font-size: 13px;
    line-height: 20px;
}

.merchant-order-detail-compact .merchant-order-refund-amount > strong {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-order-detail-compact .merchant-order-refund-amount:first-child > strong {
    color: #ff5722;
}

.merchant-order-detail-compact .merchant-order-refund-rows {
    padding-top: 0;
}

.merchant-order-detail-compact .merchant-order-refund-warning {
    margin: 15px;
    padding: 10px 12px;
    border-left: 3px solid #ffb800;
    background: #fffbe6;
    color: #8a6d3b;
    font-size: 13px;
    line-height: 22px;
}

.merchant-order-detail-compact .merchant-order-detail-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    padding: 0 15px;
}

.merchant-order-detail-compact .merchant-order-detail-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    min-width: 0;
    min-height: 56px;
    border-bottom: 1px solid #e6e6e6;
}

.merchant-order-detail-compact .merchant-order-detail-row.is-full {
    grid-column: 1 / -1;
}

.merchant-order-detail-compact .merchant-order-detail-value {
    min-width: 0;
    margin: 0;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    word-break: break-word;
}

.merchant-order-detail-compact .merchant-order-detail-numeric {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.merchant-order-detail-compact .merchant-order-copy-value {
    display: flex !important;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.merchant-order-detail-compact .merchant-order-copy-value .merchant-order-copy-text {
    margin-left: 0;
    flex: none;
}

.merchant-order-detail-compact .merchant-order-copy-text {
    border-color: #d2d2d2;
    background: #fff;
    color: #666;
}

.merchant-order-detail-compact .merchant-order-copy-text:hover {
    border-color: #009688;
    background: #fff;
    color: #009688;
}

.merchant-order-detail-compact .merchant-order-copy-text:focus-visible {
    outline: 2px solid rgba(0, 150, 136, .25);
    outline-offset: 2px;
}

.merchant-order-detail-compact .merchant-order-callback-list {
    display: block;
    padding: 0 15px 10px;
}

.merchant-order-detail-compact .merchant-order-long-field,
.merchant-order-detail-compact .merchant-order-params-card {
    min-width: 0;
    padding: 13px 0 12px;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 0;
    background: transparent;
}

.merchant-order-detail-compact .merchant-order-long-field:last-child {
    border-bottom: 0;
}

.merchant-order-detail-compact .merchant-order-long-head {
    margin-bottom: 6px;
}

.merchant-order-detail-compact .merchant-order-long-head span {
    color: #666;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}

.merchant-order-detail-compact .merchant-order-long-value {
    max-height: none;
    color: #666;
    font-size: 13px;
    line-height: 22px;
    font-variant-numeric: tabular-nums;
    overflow: visible;
    overflow-wrap: anywhere;
}

.merchant-order-detail-compact .merchant-order-params-card {
    padding: 14px 15px 15px;
    border-bottom: 0;
}

.merchant-order-detail-compact .merchant-order-json {
    box-sizing: border-box;
    max-height: 160px;
    padding: 10px 12px;
    border-color: #e6e6e6;
    background: #f8f8f8;
    color: #666;
    line-height: 1.7;
    overflow: auto;
}

.merchant-order-detail-compact .merchant-order-empty {
    padding: 12px;
    color: #999;
}

@media (max-width: 760px) {
    .merchant-order-detail.merchant-order-detail-compact {
        padding: 10px;
    }

    .merchant-order-detail-compact .merchant-order-detail-summary-body,
    .merchant-order-detail-compact .merchant-order-detail-rows,
    .merchant-order-detail-compact .merchant-order-detail-amounts,
    .merchant-order-detail-compact .merchant-order-refund-amounts,
    .merchant-order-detail-compact .merchant-order-refund-rows {
        grid-template-columns: 1fr;
    }

    .merchant-order-detail-compact .merchant-order-detail-meta {
        grid-template-columns: 1fr;
        border-top: 1px solid #e6e6e6;
        border-left: 0;
    }

    .merchant-order-detail-compact .merchant-order-detail-meta-item {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
        min-height: 56px;
        padding: 8px 18px;
        border-top: 1px solid #e6e6e6;
        border-left: 0;
    }

    .merchant-order-detail-compact .merchant-order-detail-meta-item:first-child {
        border-top: 0;
    }

    .merchant-order-detail-compact .merchant-order-detail-meta-item > strong {
        margin-top: 0;
    }

    .merchant-order-detail-compact .merchant-order-detail-amount {
        min-height: 54px;
        border-top: 1px solid #e6e6e6;
        border-left: 0;
    }

    .merchant-order-detail-compact .merchant-order-detail-amount:first-child {
        border-top: 0;
    }

    .merchant-order-detail-compact .merchant-order-refund-amount {
        min-height: 54px;
    }

    .merchant-order-detail-compact .merchant-order-refund-amount + .merchant-order-refund-amount {
        border-top: 1px solid #e6e6e6;
        border-left: 0;
    }

    .merchant-order-detail-compact .merchant-order-detail-row.is-full {
        grid-column: auto;
    }

    .merchant-order-detail-compact .merchant-order-detail-summary-head,
    .merchant-order-detail-compact .merchant-order-detail-section-head {
        padding: 0 15px;
    }

    .merchant-order-detail-compact .merchant-order-detail-identifiers,
    .merchant-order-detail-compact .merchant-order-detail-rows {
        padding-right: 15px;
        padding-left: 15px;
    }

    .merchant-order-detail-compact .merchant-order-callback-list {
        padding-right: 15px;
        padding-left: 15px;
    }

    .merchant-order-detail-compact .merchant-order-params-card {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (max-width: 480px) {
    .merchant-order-detail-compact .merchant-order-detail-number,
    .merchant-order-detail-compact .merchant-order-detail-meta-item,
    .merchant-order-detail-compact .merchant-order-detail-row {
        grid-template-columns: 1fr;
        align-content: center;
        row-gap: 3px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .merchant-order-detail-compact .merchant-order-detail-number,
    .merchant-order-detail-compact .merchant-order-detail-row {
        min-height: 62px;
    }

    .merchant-order-detail-compact .merchant-order-copy-value,
    .merchant-order-detail-compact .merchant-order-long-head {
        flex-wrap: wrap;
    }

    .merchant-order-detail-compact .merchant-order-detail-amount > strong {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .merchant-order-detail-compact .merchant-order-copy-text,
    .merchant-order-detail-compact + .merchant-order-copy-toast {
        transition: none;
    }
}