* {
    box-sizing: border-box;
}

.order-detail-modal {
    max-width: 1040px;
    max-height: calc(100vh - 48px);
    overflow: auto;
}

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

.order-detail-section {
    border: 1px solid #e5ebf5;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
}

.order-print-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.order-print-actions .order-detail-section-title {
    width: 100%;
    margin-bottom: 2px;
}

.order-print-link {
    text-decoration: none;
}

.order-print-hint {
    color: #6b7280;
    font-size: 12px;
}

.order-status-step em {
    display: block;
    margin-top: 6px;
    color: inherit;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    opacity: 0.72;
}

.order-log-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.order-log-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fbff;
    border: 1px solid #edf2fa;
}

.order-log-row strong {
    color: #111827;
    font-size: 13px;
}

.order-log-row span {
    color: #6b7280;
    font-size: 12px;
    text-align: right;
}

.order-detail-section-title {
    margin: 0 0 12px;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
}

.order-detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.order-detail-field {
    min-height: 68px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fbff;
    border: 1px solid #edf2fa;
}

.order-detail-field.full {
    grid-column: 1 / -1;
}

.order-detail-field span,
.order-detail-payment-row span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 5px;
}

.order-detail-field strong,
.order-detail-payment-row strong {
    display: block;
    color: #111827;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.order-status-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.order-status-step {
    padding: 10px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.order-status-step.done {
    background: #e7f7ee;
    color: #15915c;
}

.order-status-step.current {
    background: #fff3de;
    color: #cf8400;
}

.order-status-step.active {
    background: #e7f7ee;
    color: #15915c;
}

.order-detail-payment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.order-management-item-list {
    display: grid;
    gap: 10px;
}

.order-management-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e5eaf3;
    border-radius: 14px;
    background: #f8fbff;
}

.order-management-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef3fb;
    display: block;
}

.order-management-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.order-management-info strong,
.order-management-info span,
.order-management-side span,
.order-management-side strong {
    display: block;
}

.order-management-info strong {
    color: #1f2937;
    font-size: 14px;
    line-height: 1.35;
}

.order-management-info span,
.order-management-side span {
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
}

.order-management-side {
    text-align: right;
}

.order-management-side strong {
    margin-top: 4px;
    color: #1858cf;
    font-size: 15px;
}

.order-image-preview {
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.72);
}

.order-image-preview img {
    max-width: min(92vw, 920px);
    max-height: 86vh;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.order-image-preview-close {
    position: fixed;
    top: 22px;
    right: 26px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 760px) {
    .order-detail-summary-grid,
    .order-detail-payment-grid,
    .order-status-flow {
        grid-template-columns: 1fr;
    }

    .order-management-item {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .order-management-side {
        grid-column: 2;
        text-align: left;
    }
}

body {
    margin: 0;
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
    background: #f5f7fb;
    color: #111827;
}

a {
    color: inherit;
}

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 320px;
    background: #f8f9fc;
    border-right: 1px solid #d8deeb;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.brand {
    height: 106px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #d8deeb;
}

.brand-icon {
    width: 38px;
    height: 38px;
    color: #1247b9;
    flex: 0 0 auto;
}

.brand-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1247b9;
    letter-spacing: 1px;
}

.nav {
    padding: 18px 10px 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 6px;
    border-radius: 8px;
    color: #111111;
    text-decoration: none;
    font-size: 18px;
}

.nav-item svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.nav-item.active {
    background: #1858cf;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(24, 88, 207, 0.18);
}

.nav-item:hover {
    background: #edf3ff;
}

.nav-item.active:hover {
    background: #1858cf;
}

.sidebar-footer {
    padding: 0 10px 28px;
}

.footer-line {
    height: 1px;
    background: #d8deeb;
    margin: 0 0 18px;
}

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

.topbar {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    background: #f8f9fc;
    border-bottom: 1px solid #d8deeb;
}

.topbar-side,
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 180px;
}

.topbar-title {
    font-size: 22px;
    font-weight: 700;
    color: #1247b9;
    text-align: center;
    letter-spacing: 0.5px;
}

.icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #374151;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1858cf;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

.topbar-admin {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #d7dfef;
    border-radius: 14px;
    background: #ffffff;
}

.topbar-admin-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.topbar-admin-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.topbar-admin-meta {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.logout-link {
    color: #1858cf;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background-color: #f7f9fe;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(24, 88, 207, 0.18) 1px, transparent 0);
    background-size: 30px 30px;
}

.login-card {
    width: 100%;
    max-width: 560px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e2e8f5;
    border-radius: 26px;
    box-shadow: 0 28px 64px rgba(17, 24, 39, 0.08);
    padding: 40px 42px 34px;
}

.login-badge {
    width: 82px;
    height: 82px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0f56d4, #1f64dc);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(15, 86, 212, 0.2);
}

.login-title {
    margin: 0;
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}

.login-subtitle {
    margin: 14px auto 28px;
    max-width: 420px;
    text-align: center;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.55;
}

.login-group {
    margin-bottom: 22px;
}

.login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.login-label {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.4px;
}

.input-with-icon {
    position: relative;
}

.input-with-icon .field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
}

.input-with-icon .field-action {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    background: transparent;
    border: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.input-with-icon .input {
    padding-left: 42px;
    padding-right: 44px;
}

.captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 14px;
}

.captcha-chip {
    height: 54px;
    border: 1px solid #cfd8ea;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #1858cf;
    letter-spacing: 4px;
}

.login-btn {
    width: 100%;
    height: 56px;
    border-radius: 12px;
    border: 1px solid #1858cf;
    background: linear-gradient(180deg, #1958d0, #1448a8);
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(24, 88, 207, 0.22);
}

.login-divider {
    height: 1px;
    background: #d8deeb;
    margin: 28px 0 24px;
}

.login-note {
    text-align: center;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.6;
}

.login-note strong {
    color: #374151;
}

.content {
    padding: 26px 30px 34px;
}

.page-title {
    margin: 0;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 800;
    color: #101827;
}

.page-subtitle {
    margin: 10px 0 28px;
    color: #374151;
    font-size: 18px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.metric-card,
.panel,
.data-card {
    background: #ffffff;
    border: 1px solid #ccd6ea;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.03);
}

.metric-card {
    padding: 22px 20px 20px;
}

.metric-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.metric-icon {
    width: 52px;
    height: 58px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.metric-icon.blue {
    background: #1858cf;
    color: #ffffff;
}

.metric-icon.steel {
    background: #4e6497;
    color: #ffffff;
}

.metric-icon.green {
    background: #d7f6e0;
    color: #2f855a;
}

.metric-badge {
    padding: 7px 12px;
    border-radius: 999px;
    background: #61f287;
    color: #0c7a33;
    font-size: 14px;
    font-weight: 700;
}

.metric-label {
    font-size: 16px;
    color: #1f2937;
    margin-bottom: 10px;
}

.metric-value {
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
    color: #0f1720;
}

.bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(330px, 1fr);
    gap: 28px;
    align-items: start;
}

.panel {
    padding: 24px 30px 28px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.panel-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #101827;
}

.panel-link,
.filter-chip {
    color: #1247b9;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

.filter-chip {
    border: 1px solid #c7d2e8;
    border-radius: 10px;
    padding: 9px 14px;
    color: #111827;
    background: #ffffff;
}

.chart-wrap {
    border-top: 1px solid #d8deeb;
    padding-top: 24px;
}

.chart-box {
    height: 360px;
    border-left: 2px solid #d2d8e5;
    border-bottom: 2px solid #d2d8e5;
    padding: 12px 12px 0 10px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.bar {
    flex: 1;
    background: #1858cf;
    border-radius: 2px 2px 0 0;
}

.bar.h1 { height: 34%; }
.bar.h2 { height: 50%; }
.bar.h3 { height: 39%; }
.bar.h4 { height: 66%; }
.bar.h5 { height: 55%; }
.bar.h6 { height: 82%; }
.bar.h7 { height: 92%; }

.chart-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 10px;
    padding-left: 10px;
}

.chart-labels span {
    text-align: center;
    font-size: 15px;
    color: #374151;
}

.audit-panel {
    padding: 18px 0 16px;
    overflow: hidden;
}

.audit-panel .panel-head {
    padding: 0 18px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid #d8deeb;
}

.audit-list {
    padding: 4px 16px 8px;
}

.audit-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 72px;
    gap: 14px;
    align-items: center;
    padding: 18px 0;
}

.audit-logo {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #cfd7e7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: #4b5563;
    background: linear-gradient(135deg, #f6f9ff, #e5ebf7);
}

.audit-name {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.audit-meta {
    color: #374151;
    font-size: 16px;
}

.audit-meta.reject {
    color: #e14b45;
}

.audit-btn {
    height: 40px;
    border-radius: 10px;
    border: 1px solid #1858cf;
    background: #1858cf;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.audit-btn.stop {
    background: #ffffff;
    color: #111827;
    border-color: #98a4bb;
}

.audit-btn.disabled {
    background: #e5e7eb;
    color: #6b7280;
    border-color: #e5e7eb;
    cursor: default;
}

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

.toolbar-left,
.toolbar-right,
.toolbar-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar-filters {
    padding: 14px 16px;
    border: 1px solid #d8deeb;
    border-radius: 12px;
    background: #ffffff;
}

.search-box {
    position: relative;
}

.search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
}

.input,
.select,
.textarea {
    width: 100%;
    border: 1px solid #cfd8ea;
    border-radius: 10px;
    background: #ffffff;
    font-size: 15px;
    color: #111827;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input,
.select {
    height: 44px;
    padding: 0 14px;
}

.search-box .input {
    width: 300px;
    padding-left: 40px;
}

.textarea {
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: #1858cf;
    box-shadow: 0 0 0 3px rgba(24, 88, 207, 0.12);
}

.btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid #1858cf;
    background: #1858cf;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn.secondary {
    background: #ffffff;
    color: #1858cf;
}

.btn.light {
    background: #ffffff;
    color: #111827;
    border-color: #c7d2e8;
}

.btn.danger {
    background: #ffffff;
    color: #e14b45;
    border-color: #f0b0ae;
}

.btn-link {
    color: #1858cf;
    text-decoration: none;
    font-weight: 600;
}

.data-card {
    padding: 0;
    overflow: hidden;
}

.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 16px 14px;
    border-bottom: 1px solid #e6ebf5;
    text-align: left;
    font-size: 14px;
    color: #1f2937;
    white-space: nowrap;
}

.data-table thead th {
    background: #f4f7fc;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.check-cell {
    width: 28px;
    text-align: center;
}

.merchant-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #d9e0ee;
    background: linear-gradient(135deg, #f8fafc, #eef3fb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #93a1b5;
    font-weight: 700;
    margin-right: 10px;
    vertical-align: middle;
}

.merchant-name {
    font-weight: 700;
    color: #111827;
}

.merchant-sub {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: #eef2f7;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
}

.status-pill.pending {
    background: #f1f3f7;
    color: #6b7280;
}

.status-pill.stopped {
    background: #fdeaea;
    color: #d94841;
}

.split-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.merchant-form-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    padding: 24px;
}

.logo-panel {
    border-right: 1px solid #edf1f7;
    padding-right: 28px;
}

.upload-card {
    border: 2px dashed #cfd8ea;
    border-radius: 16px;
    background: #fafcff;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: #a0aec0;
}

.upload-title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.merchant-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
}

.status-option-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.status-option {
    min-width: 180px;
    height: 46px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #d5ddec;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.status-option.active {
    border-color: #1858cf;
    box-shadow: 0 0 0 3px rgba(24, 88, 207, 0.08);
}

.status-green-dot,
.status-gray-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-green-dot {
    background: #16a34a;
}

.status-gray-dot {
    background: #9ca3af;
}

.modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.36);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 999;
}

.modal-mask.show {
    display: flex;
}

.modal-card {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.22);
    padding: 24px;
}

.modal-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
    color: #111827;
}

.modal-subtitle {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

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

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

.tag-id {
    color: #7c8798;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
}

.avatar-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #1858cf;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    margin-right: 10px;
    vertical-align: middle;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.status-pill.active {
    background: #ddfbe6;
    color: #11793f;
}

.status-pill.disabled {
    background: #fde5e3;
    color: #d4483d;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.action-link {
    text-decoration: none;
    font-weight: 600;
}

.action-link.edit {
    color: #1858cf;
}

.action-link.enable {
    color: #0f8f45;
}

.action-link.disable {
    color: #6b7280;
}

.action-link.delete {
    color: #e14b45;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    font-size: 14px;
    color: #6b7280;
}

.pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pager .page-btn {
    min-width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid #d7dfef;
    background: #ffffff;
    color: #9aa4b2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
}

.pager .page-btn.active {
    background: #1858cf;
    color: #ffffff;
    border-color: #1858cf;
}

.form-card {
    padding: 0;
}

.form-header {
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e7edf7;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    padding: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.label {
    font-size: 14px;
    color: #374151;
    font-weight: 600;
}

.hint {
    font-size: 12px;
    color: #6b7280;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 44px;
}

.radio-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1f2937;
}

.alert {
    margin: 0 24px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}

.alert.success {
    background: #e8f8ee;
    color: #0f8f45;
}

.alert.error {
    background: #fde8e7;
    color: #cc3b34;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px 24px;
}

@media (max-width: 1400px) {
    .sidebar {
        width: 280px;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .bottom-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        flex-wrap: wrap;
        gap: 12px;
        height: auto;
        padding: 18px 22px;
    }

    .topbar-side,
    .topbar-actions {
        min-width: auto;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

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

    .logo-panel {
        border-right: 0;
        border-bottom: 1px solid #edf1f7;
        padding-right: 0;
        padding-bottom: 22px;
    }

    .merchant-form-grid,
    .modal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .content {
        padding: 22px 16px 28px;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .page-title {
        font-size: 30px;
    }

    .panel,
    .metric-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .search-box .input {
        width: 100%;
    }

    .toolbar-left,
    .toolbar-right,
    .toolbar-filters {
        width: 100%;
    }

    .login-card {
        padding: 28px 22px 24px;
        border-radius: 20px;
    }

    .captcha-row {
        grid-template-columns: 1fr;
    }

    .topbar-admin-text {
        align-items: flex-start;
    }
}

.merchant-login-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
    color: #111827;
    background: linear-gradient(90deg, #eef3ff 0%, #ffffff 46%, #eef3ff 100%);
}

.merchant-login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(400px, 0.78fr);
    gap: 26px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 34px;
}

.merchant-login-hero {
    padding: 12px 10px 12px 8px;
}

.merchant-login-copy {
    max-width: 660px;
}

.merchant-login-brand {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    color: #153fa8;
    letter-spacing: -0.6px;
    margin-bottom: 10px;
}

.merchant-login-brand .lang-cn,
.merchant-login-brand .lang-en {
    display: block;
}

.merchant-login-heading {
    margin: 0 0 10px;
    font-size: 44px;
    line-height: 1.05;
    font-weight: 800;
    color: #0f172a;
}

.merchant-login-desc {
    margin: 0 0 22px;
    max-width: 620px;
    font-size: 18px;
    line-height: 1.48;
    color: #374151;
}

.merchant-hero-image {
    position: relative;
    height: 286px;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(6, 24, 58, 0.02), rgba(6, 24, 58, 0.12)),
        url("images/merchant-login-warehouse.png") center center / cover no-repeat;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.merchant-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 27, 45, 0.04), rgba(11, 27, 45, 0.10));
}

.merchant-hero-rack {
    position: absolute;
    inset: 0;
}

.merchant-hero-rack span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(180deg, #df6f1d 0%, #8d3f0d 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.merchant-hero-rack span:nth-child(1) { left: 10%; }
.merchant-hero-rack span:nth-child(2) { left: 28%; }
.merchant-hero-rack span:nth-child(3) { left: 46%; }
.merchant-hero-rack span:nth-child(4) { left: 64%; }
.merchant-hero-rack span:nth-child(5) { left: 82%; }

.merchant-hero-stats {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 660px;
}

.merchant-stat-box {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.merchant-stat-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.6px;
    color: #6b7280;
    margin-bottom: 8px;
}

.merchant-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #153fa8;
}

.merchant-login-panel {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    padding: 20px 28px 24px;
    max-width: 468px;
    width: 100%;
    justify-self: end;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
}

.merchant-lang-switch {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

.lang-btn {
    width: 46px;
    height: 32px;
    border: 1px solid #cfd8ea;
    background: #ffffff;
    color: #111827;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.lang-btn.active {
    background: #1858cf;
    border-color: #1858cf;
    color: #ffffff;
}

.merchant-panel-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
}

.merchant-panel-subtitle {
    margin: 8px 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: #374151;
}

body[data-lang="cn"] .lang-en,
body[data-lang="en"] .lang-cn {
    display: none !important;
}

body[data-lang="cn"] .lang-cn,
body[data-lang="en"] .lang-en {
    display: inline;
}

.merchant-panel-title .lang-cn,
.merchant-panel-title .lang-en,
.merchant-panel-subtitle .lang-cn,
.merchant-panel-subtitle .lang-en,
.merchant-form-label .lang-cn,
.merchant-form-label .lang-en,
.merchant-check-row .lang-cn,
.merchant-check-row .lang-en,
.merchant-support-text .lang-cn,
.merchant-support-text .lang-en,
.merchant-stat-label .lang-cn,
.merchant-stat-label .lang-en {
    display: inline;
}

.merchant-form-group {
    margin-bottom: 18px;
}

.merchant-form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #111827;
    font-weight: 700;
}

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

.merchant-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    z-index: 1;
}

.merchant-input {
    width: 100%;
    height: 48px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    padding: 0 48px 0 42px;
    font-size: 15px;
    color: #111827;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.merchant-input:focus {
    border-color: #1858cf;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(24, 88, 207, 0.12);
}

.merchant-textarea {
    min-height: 112px;
    padding-top: 12px;
    line-height: 1.6;
    resize: vertical;
}

.merchant-eye-btn,
.field-action.merchant-eye-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.merchant-captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: 10px;
    align-items: center;
}

.merchant-captcha-box {
    height: 46px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    color: #1858cf;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer;
}

.merchant-login-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2px 0 18px;
}

.merchant-check-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #374151;
}

.merchant-login-btn {
    width: 100%;
    height: 50px;
    border: 1px solid #1147ad;
    border-radius: 8px;
    background: linear-gradient(180deg, #1652c0 0%, #1145a0 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(17, 71, 173, 0.18);
}

.merchant-login-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 22px 0 14px;
}

.merchant-support-text {
    text-align: center;
    color: #4b5563;
    font-size: 13px;
}

.merchant-support-text a {
    color: #1858cf;
    text-decoration: none;
    font-weight: 700;
}

.merchant-app {
    display: flex;
    min-height: 100vh;
    background: #f5f7fb;
}

.merchant-sidebar {
    width: 272px;
    background: #ffffff;
    border-right: 1px solid #d8deeb;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.merchant-sidebar-brand {
    height: 72px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #d8deeb;
}

.merchant-sidebar-menu {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

.merchant-sidebar-menu span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1f2a44;
    border-radius: 999px;
}

.merchant-sidebar-title {
    font-size: 16px;
    font-weight: 800;
    color: #1247b9;
}

.merchant-sidebar-section {
    padding: 12px 18px 6px;
    color: #6b7280;
    font-size: 12px;
}

.merchant-nav {
    padding: 4px 10px 24px;
}

.merchant-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 16px;
    margin-bottom: 6px;
    color: #111827;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.merchant-nav-item.active {
    background: #1858cf;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(24, 88, 207, 0.20);
}

.merchant-nav-item:hover {
    background: #eef4ff;
}

.merchant-nav-item.active:hover {
    background: #1858cf;
}

.merchant-nav-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    flex: 0 0 auto;
}

.merchant-nav-icon svg {
    width: 24px;
    height: 24px;
}

.merchant-nav-icon.whatsapp {
    color: #22c55e;
}

.merchant-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #cf2121;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

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

.merchant-topbar {
    height: 68px;
    padding: 0 22px;
    background: #ffffff;
    border-bottom: 1px solid #d8deeb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.merchant-searchbar {
    flex: 1;
    max-width: 560px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid #dce4f0;
    border-radius: 12px;
    background: #f5f7fb;
    color: #6b7280;
}

.merchant-searchbar-ghost {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    color: #8a94a6;
}

.merchant-searchbar-ghost svg {
    flex: 0 0 auto;
}

.merchant-searchbar-ghost input,
.merchant-searchbar-ghost .merchant-search-input {
    color: #495466;
}

.merchant-searchbar-ghost input::placeholder,
.merchant-searchbar-ghost .merchant-search-input::placeholder {
    color: #9aa3b2;
}

.merchant-searchbar.compact {
    max-width: 420px;
}

.merchant-searchbar input,
.merchant-search-input {
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #111827;
}

.merchant-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.merchant-lang-menu {
    position: relative;
}

.merchant-account-menu {
    position: relative;
}

.merchant-account-cluster {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.merchant-account-trigger {
    min-width: 206px;
    max-width: 320px;
    height: 44px;
    border: 1px solid #d6ddeb;
    border-radius: 16px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 8px;
    color: #111827;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.05);
}

.merchant-account-trigger:hover {
    border-color: #b8c8e5;
}

.merchant-account-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1247b9, #2862df);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex: 0 0 auto;
}

.merchant-account-avatar.large {
    width: 42px;
    height: 42px;
    font-size: 18px;
}

.merchant-account-labels {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 1;
}

.merchant-account-name {
    width: 100%;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.merchant-account-sub {
    width: 100%;
    font-size: 11px;
    line-height: 1.2;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.merchant-account-caret {
    width: 16px;
    height: 16px;
    color: #6b7280;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.merchant-account-caret svg {
    width: 100%;
    height: 100%;
}

.merchant-account-menu.open .merchant-account-caret {
    transform: rotate(180deg);
}

.merchant-account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 278px;
    padding: 12px;
    border: 1px solid #d7deeb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14);
    display: none;
    z-index: 30;
}

.merchant-account-menu.open .merchant-account-dropdown {
    display: block;
}

.merchant-account-dropdown-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 12px;
    border-bottom: 1px solid #edf1f7;
}

.merchant-account-dropdown-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.merchant-account-dropdown-meta strong {
    font-size: 14px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merchant-account-dropdown-meta span {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.merchant-account-dropdown-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.merchant-account-action {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 12px;
    color: #111827;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.merchant-account-action:hover {
    background: #f5f8fe;
}

.merchant-account-action.danger {
    color: #c62828;
}

.merchant-account-action.danger:hover {
    background: #fff3f2;
}

.merchant-account-action-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #eef4ff;
    color: #1858cf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.merchant-account-action.danger .merchant-account-action-icon {
    background: #fff1f0;
    color: #d14343;
}

.merchant-account-action-icon svg {
    width: 16px;
    height: 16px;
}

.merchant-lang-pill {
    min-width: 112px;
    height: 42px;
    padding: 0 14px;
    border-radius: 15px;
    border: 1px solid #c7d2e8;
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.05);
}

.merchant-lang-pill:hover {
    border-color: #b9c9e6;
}

.merchant-lang-pill-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    line-height: 1;
}

.merchant-lang-pill-caret {
    width: 14px;
    height: 14px;
    color: #6b7280;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}

.merchant-lang-pill-caret svg {
    width: 100%;
    height: 100%;
}

.merchant-lang-menu.open .merchant-lang-pill-caret {
    transform: rotate(180deg);
}

.merchant-lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 180px;
    padding: 10px;
    border: 1px solid #d7deeb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14);
    display: none;
    z-index: 35;
}

.merchant-lang-menu.open .merchant-lang-dropdown {
    display: block;
}

.merchant-lang-option {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #111827;
    cursor: pointer;
    text-align: center;
}

.merchant-lang-option:hover {
    background: #f5f8fe;
}

.merchant-lang-option.active {
    background: #eef4ff;
    color: #1858cf;
}

.merchant-lang-option-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.merchant-lang-option-sub {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.2;
}

.merchant-lang-option.active .merchant-lang-option-sub {
    color: #4a73d8;
}

.merchant-bell-btn {
    width: 42px;
    height: 42px;
    border: 0;
    background: #ffffff;
    border: 1px solid #d6ddeb;
    border-radius: 14px;
    position: relative;
    color: #1f2937;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.05);
}

.merchant-bell-btn:hover {
    border-color: #b8c8e5;
}

.merchant-message-menu {
    position: relative;
}

.merchant-message-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-width: min(360px, calc(100vw - 28px));
    padding: 14px;
    border: 1px solid #d7deeb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14);
    display: none;
    z-index: 35;
}

.merchant-message-menu.open .merchant-message-dropdown {
    display: block;
}

.merchant-bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #1858cf;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(24, 88, 207, 0.22);
}

.merchant-bell-badge.show {
    display: inline-flex;
}

.merchant-message-dropdown-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf1f7;
}

.merchant-message-dropdown-head strong {
    display: block;
    color: #111827;
    font-size: 15px;
}

.merchant-message-dropdown-head span {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.45;
}

.merchant-message-unread-tag {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1858cf;
    font-size: 11px;
    font-weight: 700;
}

.merchant-message-dropdown-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 6px;
}

.merchant-message-action-link {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.merchant-message-action-link:hover {
    color: #1858cf;
}

.merchant-message-action-link.primary {
    color: #1858cf;
}

.merchant-message-empty {
    padding: 18px 10px 10px;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

.merchant-message-item {
    display: block;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #edf2fa;
    background: #fbfcff;
    text-decoration: none;
    margin-top: 10px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.merchant-message-item:hover {
    border-color: #c9d8f2;
    background: #f6f9ff;
    transform: translateY(-1px);
}

.merchant-message-item.unread {
    border-color: #d4e0f8;
    background: #f5f9ff;
}

.merchant-message-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.merchant-message-item-head strong {
    color: #111827;
    font-size: 13px;
    line-height: 1.45;
}

.merchant-message-item-head span {
    color: #6b7280;
    font-size: 11px;
    white-space: nowrap;
}

.merchant-message-item-type {
    margin-top: 5px;
    color: #1858cf;
    font-size: 11px;
    font-weight: 700;
}

.merchant-message-item.read .merchant-message-item-type {
    color: #64748b;
}

.merchant-message-item p {
    margin: 8px 0 0;
    color: #5b677a;
    font-size: 12px;
    line-height: 1.6;
}

.message-content-section {
    min-width: 0;
}

.message-content-section .admin-message-preview {
    max-height: 320px;
    overflow: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.merchant-top-avatar .avatar,
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1247b9;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}

.merchant-account-profile-card {
    padding: 24px;
}

.merchant-account-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.merchant-account-profile-item {
    padding: 18px 20px;
    border: 1px solid #e3e8f2;
    border-radius: 16px;
    background: #f9fbff;
}

.merchant-account-profile-item label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: #6b7280;
}

.merchant-account-profile-item strong {
    font-size: 16px;
    color: #111827;
    word-break: break-all;
}

.merchant-account-profile-section {
    margin-top: 18px;
    padding-top: 6px;
}

.merchant-account-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.merchant-account-section-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #111827;
}

.merchant-account-status-chip {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #edf4ff;
    color: #1858cf;
    border: 1px solid #d8e5ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.merchant-account-enable-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.merchant-content {
    padding: 34px 28px 36px;
}

.merchant-dashboard-main {
    background:
        radial-gradient(circle at top right, rgba(24, 88, 207, 0.06), transparent 26%),
        linear-gradient(180deg, #f7faff 0%, #f3f6fb 100%);
}

.merchant-page-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.merchant-page-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    color: #111827;
}

.merchant-page-subtitle {
    margin: 6px 0 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.6;
}

.merchant-dashboard-head {
    align-items: flex-end;
}

.merchant-dashboard-kicker {
    margin-bottom: 8px;
    color: #1858cf;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.merchant-update-box {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #6b7280;
    font-size: 14px;
}

.merchant-refresh-btn {
    width: 42px;
    height: 42px;
    border: 1px solid #c7d2e8;
    border-radius: 14px;
    background: #ffffff;
    color: #6b7280;
}

.merchant-panel-heading {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}

.merchant-section-hint {
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

.merchant-cockpit-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 18px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #d7deeb;
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 18%, rgba(31, 91, 214, .12), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.merchant-cockpit-hero-copy h2 {
    margin: 10px 0 8px;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 900;
    color: #06142d;
}

.merchant-cockpit-hero-copy p {
    margin: 0;
    color: #506078;
    font-size: 15px;
    line-height: 1.8;
}

.merchant-kpi-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #edf4ff;
    color: #1858cf;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}

.merchant-cockpit-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.merchant-cockpit-hero-card {
    min-height: 120px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #e3e9f4;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.merchant-cockpit-hero-card span {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.merchant-cockpit-hero-card strong {
    margin-top: 12px;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    color: #111827;
}

.merchant-cockpit-hero-card em {
    margin-top: 8px;
    color: #6b7280;
    font-size: 12px;
    font-style: normal;
}

.merchant-cockpit-hero-card.accent-blue { border-left: 4px solid #1858cf; }
.merchant-cockpit-hero-card.accent-red { border-left: 4px solid #d64545; }
.merchant-cockpit-hero-card.accent-green { border-left: 4px solid #0f8f45; }

.cockpit-stats-grid {
    margin-bottom: 18px;
}

.cockpit-order-grid,
.cockpit-bottom-grid,
.cockpit-recent-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}

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

.merchant-flow-card {
    border: 1px solid #d7deeb;
    border-radius: 18px;
    padding: 16px;
    background: #f8fbff;
    min-height: 160px;
}

.merchant-flow-card.warning { border-top: 4px solid #d64545; }
.merchant-flow-card.info { border-top: 4px solid #1858cf; }
.merchant-flow-card.primary { border-top: 4px solid #5b6b86; }
.merchant-flow-card.success { border-top: 4px solid #0f8f45; }
.merchant-flow-card.muted { border-top: 4px solid #b9c3d5; }

.merchant-flow-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.merchant-flow-head span {
    color: #475467;
    font-size: 13px;
    font-weight: 700;
}

.merchant-flow-head strong {
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
}

.merchant-flow-hint {
    margin-top: 12px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.merchant-flow-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.merchant-method-chip,
.merchant-stock-pill,
.merchant-stock-gap {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.merchant-method-chip.delivery {
    background: #edf4ff;
    color: #1858cf;
}

.merchant-method-chip.pickup {
    background: #eef8ef;
    color: #0f8f45;
}

.merchant-method-chip.mixed {
    background: #f1f4f9;
    color: #526075;
}

.merchant-stock-pill.danger {
    background: #fdecec;
    color: #d64545;
}

.merchant-stock-gap {
    background: #fff3df;
    color: #a15c00;
}

.merchant-simple-table {
    width: 100%;
    border-collapse: collapse;
}

.merchant-simple-table th,
.merchant-simple-table td {
    padding: 12px 10px;
    border-top: 1px solid #e5eaf3;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}

.merchant-simple-table thead th {
    border-top: 0;
    color: #4b5563;
    font-weight: 800;
}

.merchant-product-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.merchant-product-thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eef3fb;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.merchant-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.merchant-product-thumb span {
    font-size: 16px;
    font-weight: 800;
    color: #1858cf;
}

.merchant-product-inline strong,
.merchant-table-stack strong {
    display: block;
    color: #111827;
    font-size: 13px;
}

.merchant-product-inline span,
.merchant-table-subtext,
.merchant-table-stack span {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
}

.merchant-money-inline {
    font-weight: 800;
}

.merchant-money-inline.danger {
    color: #d64545;
}

.merchant-table-wrap {
    overflow-x: auto;
}

.cockpit-mini-grid {
    margin-bottom: 16px;
}

.cockpit-receivable-grid {
    margin-bottom: 16px;
}

.cockpit-mini-grid .merchant-mini-stat {
    background: #f8fbff;
    border: 1px solid #e5eaf3;
}

.cockpit-mini-grid .merchant-mini-stat strong {
    font-size: 24px;
}

.merchant-dashboard-grid.cockpit-recent-grid {
    align-items: stretch;
}

.merchant-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.merchant-stat-card,
.merchant-panel-card,
.merchant-log-panel,
.merchant-filter-card,
.merchant-list-card,
.merchant-form-card {
    background: #ffffff;
    border: 1px solid #d7deeb;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.merchant-stat-card {
    padding: 20px 22px 18px;
}

.merchant-stat-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 15px;
    color: #374151;
}

.merchant-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf2ff;
}

.merchant-card-icon svg {
    width: 20px;
    height: 20px;
}

.merchant-card-icon.soft-blue { background: #dfe8ff; }
.merchant-card-icon.soft-red { background: #fde9e7; }
.merchant-card-icon.soft-steel { background: #e8eef8; }
.merchant-card-icon.soft-green { background: #e4f5ea; }
.merchant-card-icon.soft-blue { color: #3867d6; }
.merchant-card-icon.soft-red { color: #d64545; }
.merchant-card-icon.soft-steel { color: #5b6b86; }
.merchant-card-icon.soft-green { color: #25945a; }

.merchant-stat-card-value {
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
    color: #111827;
}

.merchant-stat-card-foot {
    margin-top: 10px;
    font-size: 14px;
}

.merchant-stat-card-foot.positive { color: #0f8f45; }
.merchant-stat-card-foot.warning { color: #d34841; }
.merchant-stat-card-foot.muted { color: #4b5563; }

.receivable-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 18px;
}

.receivable-hero-card,
.receivable-side-card,
.receivable-metric-card {
    border: 1px solid #d7deeb;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.receivable-hero-card {
    min-height: 190px;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
    gap: 22px;
    align-items: stretch;
    background:
        radial-gradient(circle at 86% 22%, rgba(31, 91, 214, .16), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
}

.receivable-kicker {
    color: #1858cf;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.receivable-hero-copy h1 {
    margin: 12px 0 8px;
    color: #06142d;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 900;
}

.receivable-hero-copy p {
    max-width: 620px;
    margin: 0;
    color: #4b5b73;
    font-size: 15px;
    line-height: 1.7;
}

.receivable-primary-total {
    padding: 22px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #1559d6 0%, #073fa8 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 18px 36px rgba(21, 89, 214, .22);
}

.receivable-primary-total span,
.receivable-side-card span,
.receivable-metric-card span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: inherit;
}

.receivable-primary-total strong {
    margin-top: 28px;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.04em;
}

.receivable-side-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.receivable-side-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf1f7;
}

.receivable-side-head strong {
    display: block;
    margin-top: 8px;
    color: #111827;
    font-size: 24px;
}

.receivable-side-head a {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1858cf;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.receivable-side-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f7;
}

.receivable-side-line:last-child {
    border-bottom: 0;
}

.receivable-side-line strong {
    color: #111827;
    font-size: 18px;
}

.receivable-side-line.warning strong {
    color: #d34841;
}

.receivable-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.receivable-metric-card {
    padding: 18px 20px;
}

.receivable-metric-card strong {
    display: block;
    margin-top: 12px;
    color: #0f172a;
    font-size: 26px;
    line-height: 1.1;
}

.receivable-metric-card em {
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
    font-style: normal;
}

.receivable-metric-card.danger {
    background: linear-gradient(135deg, #fff 0%, #fff6f5 100%);
}

.receivable-metric-card.danger strong,
.receivable-metric-card.warning strong {
    color: #cf3f38;
}

.receivable-metric-card.warning {
    background: linear-gradient(135deg, #fff 0%, #fff8eb 100%);
}

.receivable-metric-card.estimated {
    background: linear-gradient(135deg, #fff 0%, #f4f8ff 100%);
}

.receivable-metric-card.estimated strong {
    color: #1858cf;
}

.receivable-term-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.receivable-info-tip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff7e0;
    border: 1px solid #f4c75d;
    color: #9a6500;
    font-size: 12px;
    font-weight: 900;
    font-style: normal;
    cursor: help;
}

.receivable-info-tip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: 28px;
    width: 360px;
    max-width: min(360px, 70vw);
    padding: 12px 14px;
    border-radius: 12px;
    background: #101827;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 500;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index: 20;
}

.receivable-info-tip:hover::after,
.receivable-info-tip:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.customer-receivable-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid #d7deeb;
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 18%, rgba(31, 91, 214, .14), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.customer-receivable-main h1 {
    margin: 10px 0 6px;
    color: #06142d;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 900;
}

.customer-receivable-main p {
    margin: 0;
    color: #506078;
    font-size: 15px;
    line-height: 1.7;
}

.customer-receivable-actions {
    min-width: 260px;
    padding: 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e0e6f2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.customer-receivable-actions .btn {
    width: 100%;
    justify-content: center;
}

.customer-receivable-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.merchant-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
    gap: 20px;
    margin-bottom: 22px;
}

.merchant-panel-card {
    padding: 20px;
}

.merchant-panel-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.merchant-panel-card-head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.merchant-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.cockpit-snapshot-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.merchant-mini-stat {
    background: #f6f8fc;
    border-radius: 12px;
    padding: 16px 14px;
}

.merchant-mini-stat.compact {
    min-height: 116px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    border: 1px solid #e4eaf4;
    background: linear-gradient(180deg, #fbfcff 0%, #f4f7fb 100%);
}

.merchant-mini-stat span {
    display: block;
    color: #4b5563;
    font-size: 14px;
    margin-bottom: 10px;
}

.merchant-mini-stat.compact span {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.merchant-mini-stat.compact em {
    display: block;
    font-size: 12px;
    font-style: normal;
    color: #8b97ab;
    letter-spacing: .02em;
}

.merchant-mini-stat strong {
    font-size: 28px;
    font-weight: 800;
}

.merchant-mini-stat.compact strong {
    font-size: 26px;
    line-height: 1.05;
    color: #101828;
}

.merchant-stock-warning {
    border-top: 1px solid #e5eaf3;
    padding-top: 16px;
}

.merchant-warning-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d34841;
    margin-bottom: 14px;
}

.merchant-warning-head a {
    color: #1247b9;
    text-decoration: none;
    font-size: 14px;
}

.merchant-warning-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
}

.merchant-warning-item strong {
    color: #d10000;
}

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

.merchant-money-card {
    min-height: 168px;
    border-radius: 18px;
    padding: 28px 22px;
    background: #f7f8fc;
    border-left: 4px solid #1247b9;
}

.merchant-money-card.green { border-left-color: #0f8f45; }
.merchant-money-card.red { border-left-color: #d10000; }

.merchant-money-card span {
    display: block;
    color: #374151;
    font-size: 16px;
    margin-bottom: 18px;
}

.merchant-money-card strong {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 800;
}

.merchant-money-card.blue strong { color: #111827; }
.merchant-money-card.green strong { color: #0f8f45; }
.merchant-money-card.red strong { color: #d10000; }

.merchant-log-panel {
    padding: 20px;
}

.merchant-log-panel a {
    color: #1247b9;
    text-decoration: none;
}

.merchant-log-table {
    overflow-x: auto;
}

.merchant-log-table table,
.merchant-product-table,
.category-table {
    width: 100%;
    border-collapse: collapse;
}

.merchant-log-table th,
.merchant-log-table td,
.merchant-product-table th,
.merchant-product-table td {
    padding: 16px 12px;
    border-top: 1px solid #e5eaf3;
    text-align: left;
    font-size: 14px;
    color: #1f2937;
}

.merchant-log-table thead th,
.merchant-product-table thead th {
    border-top: 0;
    color: #4b5563;
    font-weight: 700;
    background: #ffffff;
}

.merchant-status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.merchant-status-tag.success {
    background: #e5f7eb;
    color: #0f8f45;
}

.merchant-status-tag.error {
    background: #fde8e7;
    color: #d34841;
}

.merchant-status-tag.muted {
    background: #eef2f7;
    color: #6b7280;
}

.page-tabs-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #d7deeb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.03);
}

.tab-scroll-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #d7deeb;
    border-radius: 10px;
    background: #f8fafc;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.tab-scroll-btn:hover {
    border-color: #bdd0f0;
    color: #1247b9;
}

.page-tab-track {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
}

.page-tab-track::-webkit-scrollbar {
    display: none;
}

.page-tab-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #d7deeb;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.page-tab-link.active {
    background: #1858cf;
    border-color: #1858cf;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(24, 88, 207, 0.18);
}

.page-extra-bar,
.page-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #d7deeb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.03);
}

.page-extra-bar {
    background: #f8fbff;
}

.page-table-toolbar {
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.page-table-toolbar-left,
.page-table-toolbar-right,
.page-extra-bar-left,
.page-extra-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.table-check-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.table-check-all input {
    margin: 0;
}

.btn.mini {
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

.btn.mini[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.page-extra-note {
    color: #64748b;
    font-size: 12px;
}

.merchant-filter-card {
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.merchant-filter-grid,
.merchant-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.merchant-select {
    min-width: 180px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #cfd8ea;
    border-radius: 10px;
    background: #ffffff;
}

.merchant-file-upload {
    max-width: 220px;
}

.merchant-import-tip,
.merchant-list-batch {
    font-size: 14px;
    color: #4b5563;
}

.merchant-import-tip {
    margin-bottom: 14px;
}

.merchant-list-card {
    overflow: hidden;
}

.merchant-list-batch {
    padding: 16px 18px;
    border-bottom: 1px solid #e5eaf3;
}

.merchant-table-wrap {
    overflow-x: auto;
}

.merchant-product-thumb {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    background: #eef2f7;
}

.merchant-product-thumb img,
.merchant-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.merchant-product-titleline {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 6px;
}

.merchant-product-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.merchant-product-sub,
.merchant-category-name {
    font-size: 13px;
    color: #6b7280;
}

.merchant-category-icon-cell {
    width: 68px;
    min-width: 68px;
}

.merchant-category-icon-cell img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    border: 1px solid #dbe3ef;
    background: #ffffff;
    padding: 7px;
}

.merchant-category-icon-empty {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px dashed #d4dce9;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    padding: 4px;
}

.merchant-price-cell {
    font-weight: 700;
}

.danger-stock {
    color: #d10000;
    font-weight: 700;
}

.safe-stock {
    color: #0f8f45;
    font-weight: 700;
}

.merchant-stock-alert-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff1f1;
    color: #d10000;
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}

.merchant-stock-stack {
    display: inline-grid;
    min-width: 118px;
    gap: 7px;
    padding: 12px 10px 11px;
    border: 1px solid #e5ebf5;
    border-radius: 12px;
    background: #ffffff;
}

.merchant-stock-stack.warning {
    border-color: #fecaca;
    background: #fff7f7;
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.05);
}

.merchant-stock-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.1;
}

.merchant-stock-line strong {
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    min-width: 28px;
    text-align: right;
}

.merchant-stock-line strong.safe {
    color: #138a4d;
}

.merchant-stock-line strong.danger {
    color: #d94841;
}

.merchant-stock-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    margin-top: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.merchant-action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.merchant-action-row a {
    color: #1247b9;
    text-decoration: none;
    font-weight: 600;
}

.order-detail-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 18px;
    padding: 16px 18px;
    border: 1px solid #e3eaf6;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.order-detail-inline-actions span {
    width: 100%;
    margin: 0 0 2px;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
}

.order-detail-inline-actions .btn {
    min-width: 88px;
    justify-content: center;
}

.order-detail-action-muted {
    color: #64748b;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.compact-head {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf1f7;
}

.credit-title-with-tip {
    display: flex;
    align-items: center;
    gap: 8px;
}

.credit-title-with-tip .receivable-info-tip {
    position: relative;
}

.credit-settings-card {
    overflow: visible;
}

.credit-title-with-tip .receivable-info-tip::after {
    top: 28px;
    bottom: auto;
    left: -4px;
    z-index: 80;
}

.product-form-page .merchant-form-card,
.product-image-page .merchant-form-card,
.category-page .merchant-panel-card {
    padding: 22px;
}

.merchant-image-filter-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 18px;
}

.merchant-search-field {
    min-width: 280px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #d8deeb;
    border-radius: 10px;
    background: #ffffff;
    color: #7b8798;
}

.merchant-search-field .merchant-search-input {
    font-size: 14px;
}

.merchant-select.sort {
    min-width: 200px;
}

.merchant-image-library {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.product-image-page .merchant-list-card-body {
    padding: 20px;
}

.product-image-page .merchant-list-card-foot {
    padding: 0 20px 20px;
}

.merchant-upload-guide-card,
.merchant-image-library-card {
    min-height: 322px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dce2ef;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.merchant-upload-guide-card {
    padding: 24px 18px;
    text-align: center;
    border-style: dashed;
    background: linear-gradient(180deg, #f7fbff 0%, #eff5ff 100%);
}

.merchant-upload-guide-icon {
    width: 78px;
    height: 78px;
    border-radius: 20px;
    background: #1556c8;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.merchant-upload-guide-icon svg {
    width: 42px;
    height: 42px;
}

.merchant-upload-guide-card h3 {
    margin: 0 0 10px;
    font-size: 24px;
    color: #0f172a;
}

.merchant-upload-guide-card p {
    margin: 0 auto 16px;
    max-width: 180px;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}

.merchant-upload-guide-qr {
    width: 124px;
    height: 124px;
    margin: 0 auto 12px;
    padding: 8px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #dbe4f3;
}

.merchant-upload-guide-qr img {
    width: 100%;
    height: 100%;
    display: block;
}

.merchant-upload-guide-link a {
    color: #1556c8;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.merchant-image-library-card.empty {
    border-color: #f2bec0;
}

.merchant-image-library-thumb {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.merchant-image-library-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.merchant-image-size-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe3ef;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.merchant-image-size-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    display: block;
}

.merchant-upload-empty-btn {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: #475569;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

.merchant-upload-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #eef2f8;
    color: #7b8798;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.merchant-upload-empty-icon svg {
    width: 26px;
    height: 26px;
}

.merchant-image-library-body {
    padding: 16px 16px 18px;
}

.merchant-image-library-body h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.45;
    color: #111827;
}

.merchant-image-library-sku,
.merchant-image-library-category,
.merchant-image-library-meta {
    font-size: 12px;
    color: #6b7280;
}

.merchant-image-library-category {
    margin-top: 6px;
}

.merchant-image-library-meta {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.merchant-image-library-meta strong {
    color: #7b8798;
    font-weight: 500;
}

.merchant-image-library-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.merchant-card-link,
.merchant-card-secondary-link {
    font-size: 13px;
    font-weight: 700;
    color: #1556c8;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.merchant-card-secondary-link {
    color: #64748b;
}

.merchant-upload-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 120;
}

.merchant-upload-modal.show {
    display: flex;
}

.merchant-modal-open {
    overflow: hidden;
}

.merchant-upload-modal-panel {
    width: 100%;
    max-width: 520px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
    padding: 22px 22px 20px;
    position: relative;
}

.merchant-upload-modal-panel h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #111827;
}

.merchant-upload-modal-panel p {
    margin: 0 0 18px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
}

.merchant-upload-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #eef2f8;
    color: #475569;
    cursor: pointer;
}

.merchant-upload-modal-close svg {
    width: 18px;
    height: 18px;
}

.merchant-upload-modal-field {
    margin-bottom: 16px;
}

.merchant-upload-modal-field.inline {
    margin-top: -4px;
}

.merchant-upload-modal-field label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
}

.merchant-upload-product-display {
    min-height: 54px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #f8fafc;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    color: #475569;
    font-size: 13px;
}

.merchant-upload-product-display strong {
    color: #111827;
    font-size: 15px;
}

.merchant-file-upload.wide {
    width: 100%;
    max-width: none;
}

.merchant-upload-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.merchant-mobile-image-body {
    margin: 0;
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
    background: #f4f7fb;
    color: #111827;
}

.merchant-mobile-image-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 18px 14px 30px;
}

.merchant-mobile-image-head h1 {
    margin: 0 0 8px;
    font-size: 24px;
}

.merchant-mobile-image-head p {
    margin: 0 0 16px;
    color: #475569;
    font-size: 13px;
    line-height: 1.65;
}

.merchant-mobile-filter {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.merchant-mobile-input,
.merchant-mobile-select {
    width: 100%;
    height: 46px;
    border: 1px solid #d4ddea;
    border-radius: 12px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 14px;
}

.mobile-full {
    width: 100%;
}

.merchant-mobile-image-list {
    display: grid;
    gap: 14px;
}

.merchant-mobile-image-card {
    border: 1px solid #dce2ef;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.merchant-mobile-image-card.empty {
    border-color: #f0c9c9;
}

.merchant-mobile-image-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.merchant-mobile-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.merchant-mobile-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
}

.merchant-mobile-image-content {
    padding: 14px;
}

.merchant-mobile-image-content h3 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.45;
}

.merchant-mobile-image-sku,
.merchant-mobile-image-category,
.merchant-mobile-image-time {
    color: #64748b;
    font-size: 12px;
    margin-bottom: 6px;
}

.merchant-mobile-image-upload {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.merchant-mobile-file {
    width: 100%;
}

.merchant-breadcrumb {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 8px;
}

.form-title {
    margin-bottom: 6px;
}

.merchant-form-section {
    padding: 20px 0;
    border-top: 1px solid #edf1f7;
}

.merchant-form-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.merchant-form-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
}

.merchant-form-grid {
    display: grid;
    gap: 18px;
}

.merchant-form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.merchant-form-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.merchant-form-field label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
}

.merchant-inline-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.merchant-upload-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.merchant-upload-box {
    flex: 1;
    min-height: 180px;
    border: 2px dashed #d3dbe8;
    border-radius: 18px;
    background: #f8fbff;
    padding: 26px;
    text-align: center;
    color: #6b7280;
}

.merchant-category-icon-editor {
    align-items: stretch;
}

.merchant-category-upload-box {
    min-width: 320px;
}

.merchant-category-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1858cf;
}

.merchant-category-upload-icon svg {
    width: 28px;
    height: 28px;
}

.merchant-category-icon-preview-card {
    width: 260px;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
}

.merchant-category-icon-preview-head {
    padding: 14px 16px;
    border-bottom: 1px solid #e8edf6;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.merchant-category-icon-preview-body {
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.merchant-category-icon-preview-frame {
    min-height: 140px;
    border: 1px dashed #d4dce9;
    border-radius: 16px;
    background: #f8fbff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.merchant-category-icon-preview-image {
    width: 88px;
    height: 88px;
    object-fit: contain;
    display: block;
}

.merchant-category-icon-placeholder {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

.merchant-category-icon-preview-tip {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.6;
    word-break: break-all;
}

.merchant-upload-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(180deg, #dbe7ff 0%, #eef4ff 100%);
    margin: 0 auto 14px;
}

.merchant-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 12px;
}

.merchant-upload-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

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

.merchant-image-card {
    background: #ffffff;
    border: 1px solid #e5eaf3;
    border-radius: 18px;
    overflow: hidden;
}

.merchant-image-thumb {
    aspect-ratio: 1 / 1;
    background: #eef2f7;
}

.merchant-image-meta {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #4b5563;
    font-size: 13px;
}

.merchant-image-meta strong {
    color: #111827;
    font-size: 15px;
}

.merchant-count-pill {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #edf3ff;
    color: #1247b9;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
}

.merchant-hidden-input {
    display: none;
}

.merchant-page-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.merchant-page-head.compact {
    margin-bottom: 6px;
}

.merchant-page-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.merchant-breadcrumb {
    font-size: 13px;
    margin-bottom: 0;
}

.merchant-form-section-title.with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.merchant-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #edf3ff;
    color: #1858cf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.merchant-section-icon svg {
    width: 18px;
    height: 18px;
}

.merchant-section-desc {
    margin: -4px 0 14px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}

.merchant-inline-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.merchant-form-field-ar .merchant-input {
    direction: rtl;
    text-align: right;
}

.merchant-structured-card {
    padding: 22px 24px;
}

.merchant-form-note-box {
    padding-bottom: 0;
}

.merchant-form-note {
    border: 1px dashed #cfd8ea;
    border-radius: 14px;
    background: #f8fbff;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.merchant-form-note strong {
    font-size: 14px;
    color: #111827;
}

.merchant-form-note span {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.7;
}

.product-edit-base-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(200px, 0.9fr) minmax(220px, 1fr);
}

.merchant-select-wide {
    width: 100%;
}

.full-span-2 {
    grid-column: span 2;
}

.merchant-spec-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.merchant-spec-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 12px;
    align-items: start;
    padding: 18px;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #fbfcff;
}

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

.merchant-spec-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
}

.merchant-spec-remove {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #7b8798;
    background: #eef2f8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.merchant-spec-remove svg {
    width: 18px;
    height: 18px;
}

.merchant-spec-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.merchant-spec-add-btn {
    min-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
}

.merchant-spec-note {
    color: #6b7280;
    font-size: 12px;
}

.page-filter-card {
    margin-bottom: 0;
}

.merchant-data-card-tip {
    padding: 0 2px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}

.merchant-batch-import-bar {
    margin-top: 14px;
}

.merchant-import-cluster {
    gap: 12px;
}

.merchant-import-note {
    color: #526075;
    font-size: 13px;
    line-height: 1.6;
}

.merchant-import-note strong {
    color: #1858cf;
    font-weight: 800;
}

.merchant-page-filter-card {
    padding: 18px 20px;
    border: 1px solid #d7deeb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.merchant-list-card-head {
    padding: 18px 20px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e8edf6;
}

.merchant-list-card-body {
    display: flex;
    flex-direction: column;
}

.merchant-list-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.merchant-list-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
}

.merchant-list-desc {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.merchant-product-table-enhanced th,
.merchant-product-table-enhanced td {
    vertical-align: top;
}

.merchant-spec-summary {
    min-width: 180px;
    color: #374151;
    font-size: 13px;
    line-height: 1.65;
    white-space: normal;
}

.merchant-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    z-index: 90;
}

.merchant-modal-card {
    width: 100%;
    max-width: 680px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #d8e0ec;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.2);
    padding: 22px;
}

.merchant-modal-card.wide {
    max-width: 980px;
}

.merchant-password-modal {
    max-width: 560px;
}

.merchant-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.merchant-modal-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    color: #111827;
}

.merchant-modal-subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}

.merchant-password-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.merchant-modal-close-text {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #eef2f8;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.merchant-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.merchant-detail-cell {
    border: 1px solid #e5ebf5;
    border-radius: 14px;
    background: #fbfcfe;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.merchant-detail-cell span {
    color: #6b7280;
    font-size: 12px;
}

.merchant-detail-cell strong {
    color: #111827;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

.merchant-detail-spec-panel {
    border: 1px solid #e5ebf5;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
}

.merchant-detail-spec-head {
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    background: #f7f9fd;
    border-bottom: 1px solid #e5ebf5;
}

.merchant-detail-spec-list {
    display: flex;
    flex-direction: column;
}

.merchant-detail-spec-item {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid #edf1f7;
}

.merchant-detail-spec-item:first-child {
    border-top: 0;
}

.merchant-detail-spec-item div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.merchant-detail-spec-item span {
    color: #6b7280;
    font-size: 12px;
}

.merchant-detail-spec-item strong {
    color: #111827;
    font-size: 14px;
    line-height: 1.6;
}

.merchant-empty-note {
    padding: 18px 16px;
    color: #6b7280;
    font-size: 13px;
}

.merchant-related-modal {
    max-width: 1100px;
}

.merchant-related-anchor {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid #dbe4f1;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f8ff 100%);
}

.merchant-related-anchor span {
    color: #6b7280;
    font-size: 12px;
}

.merchant-related-anchor strong {
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
}

.merchant-related-anchor em {
    color: #475569;
    font-size: 13px;
    font-style: normal;
}

.merchant-related-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.merchant-related-searchbar {
    flex: 1;
    max-width: none;
}

.merchant-related-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.8fr);
    gap: 18px;
}

.merchant-related-panel {
    border: 1px solid #e2e8f4;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
}

.merchant-related-panel.selected {
    background: linear-gradient(180deg, #fbfdff 0%, #f8faff 100%);
}

.merchant-related-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf2f8;
    background: #f8fafc;
}

.merchant-related-panel-head strong {
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.merchant-related-panel-head span {
    color: #64748b;
    font-size: 12px;
}

.merchant-related-candidate-list {
    max-height: 460px;
    overflow: auto;
    padding: 10px;
}

.merchant-related-item {
    display: grid;
    grid-template-columns: auto 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e6edf7;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
}

.merchant-related-item + .merchant-related-item {
    margin-top: 10px;
}

.merchant-related-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.merchant-related-thumb {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: #f4f7fb;
    border: 1px solid #e2e8f3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.merchant-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-related-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.merchant-related-copy strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.merchant-related-copy em {
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
    font-style: normal;
}

.merchant-related-copy small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.merchant-related-selected-summary {
    padding: 16px;
    color: #334155;
    font-size: 13px;
    line-height: 1.8;
    min-height: 180px;
    white-space: normal;
}

.merchant-related-helper {
    padding: 0 16px 16px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.7;
}

.merchant-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.customer-reset-password-modal {
    max-width: 620px;
}

.reset-password-grid {
    grid-template-columns: 1.3fr .9fr;
    padding: 8px 0 4px;
}

.reset-password-helper {
    justify-content: flex-end;
}

.reset-password-helper .btn {
    width: 100%;
}

.pager .page-btn.disabled {
    color: #c0c7d4;
    background: #f5f7fb;
    border-color: #e2e8f2;
    cursor: default;
}

@media (max-width: 1360px) {
    .merchant-login-shell {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .merchant-login-panel {
        max-width: 560px;
        width: 100%;
        margin: 0 auto;
    }

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

    .cockpit-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .merchant-form-grid.three,
    .merchant-form-grid.four,
    .merchant-inline-three,
    .merchant-spec-grid,
    .merchant-detail-grid,
    .merchant-detail-spec-item,
    .merchant-image-grid,
    .merchant-receivable-grid,
    .merchant-related-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .merchant-cockpit-hero,
    .cockpit-order-grid,
    .cockpit-bottom-grid,
    .cockpit-recent-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 980px) {
    .merchant-app {
        flex-direction: column;
    }

    .merchant-sidebar {
        width: 100%;
    }

    .merchant-topbar {
        flex-wrap: wrap;
        height: auto;
        padding: 18px;
    }

    .merchant-searchbar {
        max-width: none;
        width: 100%;
    }

    .merchant-cockpit-hero-grid,
    .merchant-flow-grid,
    .merchant-related-layout {
        grid-template-columns: 1fr;
    }

    .merchant-related-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    .merchant-login-shell {
        padding: 24px 16px;
    }

    .merchant-login-heading {
        font-size: 38px;
    }

    .merchant-login-desc {
        font-size: 17px;
    }

    .merchant-hero-image {
        height: 220px;
    }

    .merchant-hero-stats,
    .merchant-metric-grid,
    .merchant-form-grid.three,
    .merchant-form-grid.four,
    .merchant-inline-two,
    .merchant-inline-three,
    .merchant-spec-grid,
    .merchant-detail-grid,
    .merchant-detail-spec-item,
    .merchant-image-grid,
    .merchant-receivable-grid,
    .merchant-mini-grid,
    .merchant-captcha-row {
        grid-template-columns: 1fr;
    }

    .cockpit-snapshot-grid {
        grid-template-columns: 1fr;
    }

    .merchant-cockpit-hero {
        padding: 18px;
    }

    .merchant-cockpit-hero-copy h2 {
        font-size: 24px;
    }

    .merchant-cockpit-hero-grid {
        grid-template-columns: 1fr;
    }

    .merchant-login-panel,
    .merchant-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .merchant-page-head,
    .merchant-filter-card,
    .merchant-upload-preview {
        flex-direction: column;
        align-items: stretch;
    }

    .merchant-spec-row {
        grid-template-columns: 1fr;
    }

    .merchant-spec-actions {
        justify-content: flex-end;
        padding-top: 0;
    }

    .full-span-2 {
        grid-column: auto;
    }
}