/* ShopAccount payment workspace v4
   Shared visual system for Admin Payments, Bank Settings and customer Wallet. */

.payment-ops-v4,
.bank-settings-v4,
.wallet-deposit-v4 {
    --pay-canvas: #f5f7fa;
    --pay-surface: #ffffff;
    --pay-ink: #17191f;
    --pay-muted: #6f7888;
    --pay-border: #e3e7ed;
    --pay-border-strong: #d5dbe4;
    --pay-accent: #ff5262;
    --pay-accent-soft: #fff1f3;
    --pay-success: #178b63;
    --pay-success-soft: #edf9f4;
    --pay-warning: #b76a12;
    --pay-warning-soft: #fff7e9;
    --pay-danger: #c63f4d;
    --pay-radius: 14px;
    --pay-shadow: 0 10px 26px rgba(31, 39, 51, .045);
    color: var(--pay-ink);
}

.payment-ops-v4,
.bank-settings-v4 {
    width: min(100%, 1260px);
    margin-inline: auto;
    font-size: 14px;
}

.payment-v4-header,
.wallet-v4-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 22px;
}

.payment-v4-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.payment-v4-title-icon,
.payment-settings-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid #ffd2d7;
    border-radius: 12px;
    background: var(--pay-accent-soft);
    color: var(--pay-accent);
}

.payment-v4-title-icon .ui-icon,
.payment-settings-icon .ui-icon {
    width: 21px;
    height: 21px;
}

.payment-v4-header h1,
.wallet-v4-header h1 {
    margin: 0;
    color: var(--pay-ink);
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.payment-v4-header p,
.wallet-v4-header > div > p:last-child {
    margin: 6px 0 0;
    color: var(--pay-muted);
    font-size: 14px;
    line-height: 1.55;
}

.payment-v4-primary,
.payment-v4-secondary {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.payment-v4-primary {
    background: var(--pay-accent);
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 82, 98, .18);
}

.payment-v4-primary:hover {
    color: #fff;
    background: #ed4354;
    transform: translateY(-1px);
}

.payment-v4-secondary {
    border-color: var(--pay-border);
    background: #fff;
    color: #3d4655;
}

.payment-v4-secondary:hover {
    border-color: #ffc2c8;
    background: var(--pay-accent-soft);
    color: #d53b4b;
}

.payment-v4-primary .ui-icon,
.payment-v4-secondary .ui-icon {
    width: 16px;
    height: 16px;
}

.payment-health-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 18px;
    border: 1px solid var(--pay-border);
    border-radius: var(--pay-radius);
    background: var(--pay-surface);
    box-shadow: var(--pay-shadow);
    overflow: hidden;
}

.payment-health-strip article {
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
}

.payment-health-strip article + article {
    border-left: 1px solid var(--pay-border);
}

.payment-health-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
}

.payment-health-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.payment-health-icon.is-ready {
    color: var(--pay-success);
    background: var(--pay-success-soft);
}

.payment-health-icon.is-off {
    color: var(--pay-danger);
    background: var(--pay-accent-soft);
}

.payment-health-icon.is-warning {
    color: var(--pay-warning);
    background: var(--pay-warning-soft);
}

.payment-health-strip small,
.payment-health-strip em {
    display: block;
    color: var(--pay-muted);
    font-size: 11px;
    font-style: normal;
}

.payment-health-strip strong {
    display: block;
    margin: 2px 0;
    color: var(--pay-ink);
    font-size: 15px;
    line-height: 1.25;
}

.payment-health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.payment-health-dot.is-ready { background: #25ad7d; box-shadow: 0 0 0 4px #e5f7f0; }
.payment-health-dot.is-off { background: #e35563; box-shadow: 0 0 0 4px #ffebee; }

.payment-health-strip a {
    color: var(--pay-accent);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.payment-settings-workspace {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 20px;
}

.payment-channel-rail,
.payment-settings-card,
.payment-reconcile-card,
.bank-list-card-v4,
.bank-settings-card-v4 {
    border: 1px solid var(--pay-border);
    border-radius: var(--pay-radius);
    background: var(--pay-surface);
    box-shadow: var(--pay-shadow);
}

.payment-channel-rail {
    position: sticky;
    top: 88px;
    padding: 10px;
}

.payment-channel-rail > header {
    padding: 10px 10px 12px;
}

.payment-channel-rail h2,
.payment-settings-heading h2,
.payment-reconcile-card h2,
.bank-list-card-v4 h2,
.bank-settings-card-v4 h2 {
    margin: 0;
    color: var(--pay-ink);
    font-size: 17px;
    letter-spacing: -.015em;
}

.payment-channel-rail header p,
.payment-settings-heading p,
.payment-reconcile-card header p,
.bank-list-card-v4 header p,
.bank-settings-card-v4 header p {
    margin: 4px 0 0;
    color: var(--pay-muted);
    font-size: 12px;
    line-height: 1.45;
}

.payment-channel-option {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #3d4655;
    text-decoration: none;
    transition: .18s ease;
}

.payment-channel-option + .payment-channel-option {
    margin-top: 3px;
}

.payment-channel-option > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f3f5f8;
    color: #687386;
}

.payment-channel-option > span .ui-icon {
    width: 18px;
    height: 18px;
}

.payment-channel-option b {
    min-width: 0;
    color: var(--pay-ink);
    font-size: 13px;
}

.payment-channel-option small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--pay-muted);
    font-size: 10px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-channel-option mark {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
}

.payment-channel-option mark.is-ready { color: var(--pay-success); background: var(--pay-success-soft); }
.payment-channel-option mark.is-off { color: var(--pay-danger); background: var(--pay-accent-soft); }

.payment-channel-option:hover,
.payment-channel-option.active {
    border-color: #ffc8ce;
    background: var(--pay-accent-soft);
}

.payment-channel-option.active > span {
    color: #fff;
    background: var(--pay-accent);
}

.payment-bank-summary {
    margin-top: 12px;
    padding: 13px;
    border-top: 1px solid var(--pay-border);
}

.payment-bank-summary > div:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

.payment-bank-summary > div:first-child > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--pay-success);
    background: var(--pay-success-soft);
}

.payment-bank-summary .ui-icon {
    width: 16px;
    height: 16px;
}

.payment-bank-summary b {
    display: block;
    font-size: 12px;
}

.payment-bank-summary small {
    display: block;
    margin-top: 2px;
    color: var(--pay-muted);
    font-size: 10px;
}

.payment-bank-summary dl {
    margin: 12px 0;
}

.payment-bank-summary dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid #eef1f5;
    font-size: 10px;
}

.payment-bank-summary dt { color: var(--pay-muted); }
.payment-bank-summary dd { margin: 0; color: var(--pay-ink); font-weight: 700; text-align: right; }

.payment-bank-summary > a {
    color: var(--pay-accent);
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.payment-settings-card {
    min-width: 0;
    overflow: clip;
}

.payment-settings-heading,
.bank-settings-card-v4 > header,
.bank-list-card-v4 > header,
.payment-reconcile-card > header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--pay-border);
}

.payment-settings-heading > div:first-child,
.bank-settings-card-v4 > header > div:first-child {
    display: flex;
    align-items: center;
    gap: 11px;
}

.payment-settings-heading-actions,
.payment-sticky-actions > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-settings-section,
.bank-advanced-section {
    border-bottom: 1px solid var(--pay-border);
}

.payment-settings-section > summary,
.bank-advanced-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    color: var(--pay-ink);
    cursor: pointer;
    list-style: none;
    transition: background .18s ease;
}

.payment-settings-section > summary::-webkit-details-marker,
.bank-advanced-section > summary::-webkit-details-marker {
    display: none;
}

.payment-settings-section > summary:hover,
.bank-advanced-section > summary:hover {
    background: #fafbfc;
}

.payment-settings-section > summary > span,
.bank-advanced-section > summary > span {
    display: flex;
    align-items: center;
    gap: 11px;
}

.payment-settings-section > summary > span > .ui-icon,
.bank-advanced-section > summary > span > .ui-icon {
    width: 18px;
    height: 18px;
    color: #7b8493;
}

.payment-settings-section summary b,
.bank-advanced-section summary b {
    display: block;
    font-size: 13px;
}

.payment-settings-section summary small,
.bank-advanced-section summary small {
    display: block;
    margin-top: 2px;
    color: var(--pay-muted);
    font-size: 10px;
    font-weight: 500;
}

.payment-section-chevron {
    width: 17px;
    height: 17px;
    color: #8992a1;
    transition: transform .18s ease;
}

details[open] > summary .payment-section-chevron {
    transform: rotate(180deg);
}

.payment-settings-body {
    padding: 0 18px 18px;
}

.payment-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.payment-toggle-grid.single {
    grid-template-columns: 1fr;
}

.payment-toggle {
    min-height: 62px;
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--pay-border);
    border-radius: 11px;
    background: #fbfcfd;
    color: var(--pay-ink) !important;
    cursor: pointer;
}

.payment-toggle:has(input:checked) {
    border-color: #ffc0c7;
    background: var(--pay-accent-soft);
}

.payment-toggle input {
    flex: 0 0 auto;
    width: 18px !important;
    height: 18px;
    margin: 0 !important;
    accent-color: var(--pay-accent);
}

.payment-toggle b {
    display: block;
    font-size: 12px;
}

.payment-toggle small {
    display: block;
    margin-top: 3px;
    color: var(--pay-muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
}

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

.payment-field-grid label {
    min-width: 0;
    color: #4c5668;
    font-size: 11px;
    font-weight: 700;
}

.payment-field-grid label.span-2,
.payment-field-grid .span-2 {
    grid-column: 1 / -1;
}

.payment-field-grid input,
.payment-field-grid select,
.payment-field-grid textarea {
    width: 100%;
    min-height: 42px;
    display: block;
    margin-top: 6px;
    padding: 9px 11px;
    border: 1px solid var(--pay-border-strong);
    border-radius: 9px;
    background: #fff;
    color: var(--pay-ink);
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.payment-field-grid textarea {
    resize: vertical;
}

.payment-field-grid input:focus,
.payment-field-grid select:focus,
.payment-field-grid textarea:focus {
    border-color: #ff9aa5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 82, 98, .1);
}

.payment-field-grid label > small {
    display: block;
    margin-top: 5px;
    color: var(--pay-muted);
    font-size: 10px;
    font-weight: 500;
}

.payment-network-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.payment-network-list > span {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid var(--pay-border);
    border-radius: 9px;
    color: var(--pay-muted);
    font-size: 10px;
}

.payment-network-list b { color: var(--pay-ink); }
.payment-network-list small { color: var(--pay-success); }

.payment-webhook-box {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 11px;
    align-items: start;
    padding: 12px;
    border: 1px solid #cbe9dc;
    border-radius: 11px;
    background: var(--pay-success-soft);
}

.payment-webhook-box > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fff;
    color: var(--pay-success);
}

.payment-webhook-box b,
.payment-webhook-box code,
.payment-webhook-box small {
    display: block;
}

.payment-webhook-box b { font-size: 11px; }
.payment-webhook-box code { margin: 3px 0; color: #117656; font-size: 11px; overflow-wrap: anywhere; }
.payment-webhook-box small { color: #55756a; font-size: 10px; }

.payment-sticky-actions {
    position: sticky;
    z-index: 3;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    border-top: 1px solid var(--pay-border);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
}

.payment-sticky-actions > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pay-muted);
    font-size: 10px;
}

.payment-sticky-actions > span .ui-icon {
    width: 15px;
    height: 15px;
    color: var(--pay-success);
}

.payment-reconcile-card {
    overflow: hidden;
}

.payment-reconcile-card > header a,
.bank-list-card-v4 > header a {
    color: var(--pay-accent);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.payment-reconcile-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 190px auto;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pay-border);
    background: #fafbfc;
}

.payment-search-field {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid var(--pay-border-strong);
    border-radius: 9px;
    background: #fff;
}

.payment-search-field .ui-icon {
    width: 16px;
    height: 16px;
    color: #8992a1;
}

.payment-search-field input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pay-ink);
    font: inherit;
    font-size: 12px;
}

.payment-reconcile-toolbar select {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--pay-border-strong);
    border-radius: 9px;
    background: #fff;
    color: #485263;
    font: inherit;
    font-size: 12px;
}

.payment-reconcile-toolbar > span {
    color: var(--pay-muted);
    font-size: 11px;
    white-space: nowrap;
}

.payment-ops-v4 .deposit-reconcile-table {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.payment-ops-v4 .deposit-reconcile-table .mock-tr {
    grid-template-columns: 1.25fr .72fr .72fr .72fr .8fr 1.1fr;
    min-width: 920px;
    padding: 12px 16px;
    font-size: 12px;
}

.payment-ops-v4 .deposit-reconcile-table .mock-th {
    color: #788292;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.payment-filter-empty {
    margin: 0;
    padding: 28px;
    color: var(--pay-muted);
    text-align: center;
    font-size: 12px;
}

/* Bank settings */
.payment-section-nav {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border: 1px solid var(--pay-border);
    border-radius: 11px;
    background: #fff;
}

.payment-section-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #5c6676;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.payment-section-nav a.active {
    color: #d63b4b;
    background: var(--pay-accent-soft);
}

.payment-section-nav .ui-icon {
    width: 15px;
    height: 15px;
}

.bank-connection-banner {
    display: grid;
    grid-template-columns: 40px minmax(280px, 1fr) minmax(260px, auto) auto;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    padding: 13px 15px;
    border: 1px solid #ffd0d5;
    border-radius: var(--pay-radius);
    background: #fff9fa;
}

.bank-connection-banner > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--pay-accent);
    background: #fff;
}

.bank-connection-banner .ui-icon {
    width: 18px;
    height: 18px;
}

.bank-connection-banner b {
    display: block;
    font-size: 12px;
}

.bank-connection-banner p {
    margin: 3px 0 0;
    color: var(--pay-muted);
    font-size: 10px;
    line-height: 1.45;
}

.bank-connection-banner code {
    color: #d43f4e;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.bank-auto-health {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.bank-auto-health .status-pill {
    font-size: 10px;
}

.bank-auto-health code {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pay-muted);
}

.bank-webhook-url {
    padding: 8px 10px;
    border: 1px solid #ffd8dc;
    border-radius: 8px;
    background: #fff;
}

.bank-list-card-v4 {
    margin-bottom: 16px;
    overflow: hidden;
}

.bank-settings-v4 .bank-config-table {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.bank-settings-v4 .bank-config-table .mock-tr {
    grid-template-columns: 1.05fr .85fr 1.2fr .8fr 1fr .7fr;
    min-width: 900px;
    padding: 12px 16px;
    font-size: 12px;
}

.bank-settings-v4 .bank-config-table .mock-th {
    color: #788292;
    font-size: 10px;
    text-transform: uppercase;
}

.bank-identity-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.bank-identity-cell i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--pay-accent);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.bank-identity-cell b {
    font-size: 12px;
}

.bank-identity-cell small {
    display: block;
    margin-top: 2px;
    color: var(--pay-muted);
    font-size: 10px;
}

.bank-settings-v4 .table-actions a,
.bank-settings-v4 .table-actions button {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--pay-border);
    border-radius: 9px;
    background: #fff;
    color: #5d6878;
}

.bank-settings-v4 .table-actions .ui-icon {
    width: 15px;
    height: 15px;
}

.bank-settings-v4 .table-actions .danger-action {
    color: var(--pay-danger);
    border-color: #ffd3d7;
    background: #fff6f7;
}

.bank-empty-row {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 34px;
    color: var(--pay-muted);
    text-align: center;
}

.bank-empty-row .ui-icon {
    width: 28px;
    height: 28px;
}

.bank-empty-row b { color: var(--pay-ink); }
.bank-empty-row a { color: var(--pay-accent); font-size: 12px; }

.bank-config-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr);
    gap: 16px;
    align-items: start;
}

.bank-settings-card-v4 {
    min-width: 0;
    overflow: clip;
}

.bank-form-section {
    padding: 17px 18px;
}

.bank-form-section h3 {
    margin: 0 0 13px;
    color: var(--pay-ink);
    font-size: 13px;
}

.bank-auto-rule-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0 18px 18px;
    overflow: hidden;
    border: 1px solid var(--pay-border);
    border-radius: 11px;
    background: var(--pay-border);
}

.bank-auto-rule-strip > span {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    background: var(--pay-surface);
}

.bank-auto-rule-strip .ui-icon {
    grid-row: span 2;
    width: 17px;
    height: 17px;
    color: var(--pay-accent);
}

.bank-auto-rule-strip b {
    color: var(--pay-ink);
    font-size: 10px;
}

.bank-auto-rule-strip small {
    min-width: 0;
    margin-top: 2px;
    color: var(--pay-muted);
    font-size: 9px;
    line-height: 1.35;
}

.bank-mbank-connection {
    margin: 0 18px 18px;
    overflow: hidden;
    border: 1px solid #ffd6da;
    border-radius: 12px;
    background: #fffafb;
}

.bank-mbank-connection > summary {
    background: #fff5f6;
}

.bank-mbank-connection > summary b {
    color: #b42f3e;
}

.bank-advanced-section .payment-field-grid {
    padding: 0 18px 18px;
}

.copy-input-v4 {
    display: flex;
    margin-top: 6px;
}

.copy-input-v4 input {
    margin: 0;
    border-radius: 9px 0 0 9px;
}

.copy-input-v4 button {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--pay-border-strong);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    background: #fff;
    color: var(--pay-accent);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
}

/* Customer wallet */
.wallet-deposit-v4 {
    width: min(100%, 1260px);
    margin-inline: auto;
    padding-bottom: 36px;
    font-size: 14px;
}

.wallet-v4-header {
    padding: 4px 0 2px;
}

.wallet-v4-header .breadcrumb {
    margin: 0 0 7px;
    color: #8b94a2;
    font-size: 12px;
}

.wallet-v4-balance {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--pay-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--pay-shadow);
}

.wallet-v4-balance > div {
    min-width: 132px;
    padding: 11px 15px;
}

.wallet-v4-balance > div + div {
    border-left: 1px solid var(--pay-border);
}

.wallet-v4-balance dt {
    color: var(--pay-muted);
    font-size: 10px;
}

.wallet-v4-balance dd {
    margin: 4px 0 0;
    color: var(--pay-ink);
    font-size: 14px;
    font-weight: 800;
}

.wallet-deposit-v4 .wallet-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.wallet-deposit-v4 .wallet-payment-column,
.wallet-deposit-v4 .wallet-status-column {
    min-width: 0;
}

.wallet-deposit-v4 .payment-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0 0 12px;
    padding: 5px;
    border: 1px solid var(--pay-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--pay-shadow);
}

.wallet-deposit-v4 .payment-tabs button {
    min-width: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #667082;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wallet-deposit-v4 .payment-tabs button .ui-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.wallet-deposit-v4 .payment-tabs button b {
    display: block;
    font-size: 12px;
}

.wallet-deposit-v4 .payment-tabs button small {
    display: block;
    margin-top: 2px;
    color: #8992a1;
    font-size: 9px;
    font-weight: 500;
}

.wallet-deposit-v4 .payment-tabs button:hover {
    background: #f7f8fa;
}

.wallet-deposit-v4 .payment-tabs button.active {
    border-color: #ffc4ca;
    background: var(--pay-accent-soft);
    color: #d63a4a;
    box-shadow: inset 0 -2px 0 var(--pay-accent);
}

.wallet-deposit-v4 .payment-tabs button.active small {
    color: #ba6570;
}

.wallet-deposit-v4 .wallet-payment-panel,
.wallet-deposit-v4 .transaction-state,
.wallet-deposit-v4 .process-card,
.wallet-deposit-v4 .balance-history,
.wallet-deposit-v4 .wallet-aside .mock-panel {
    border: 1px solid var(--pay-border);
    border-radius: var(--pay-radius);
    background: #fff;
    box-shadow: var(--pay-shadow);
}

.wallet-deposit-v4 .wallet-payment-panel {
    overflow: hidden;
    animation: wallet-panel-in .24s ease both;
}

@keyframes wallet-panel-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.wallet-deposit-v4 .wallet-payment-panel > .panel-heading,
.wallet-deposit-v4 .balance-history > .panel-heading {
    min-height: 66px;
    padding: 14px 17px;
    border-bottom: 1px solid var(--pay-border);
}

.wallet-deposit-v4 .wallet-payment-panel > .panel-heading h2,
.wallet-deposit-v4 .balance-history h2 {
    margin: 0;
    color: var(--pay-ink);
    font-size: 16px;
}

.wallet-deposit-v4 .wallet-payment-panel > .panel-heading p,
.wallet-deposit-v4 .balance-history .panel-heading p {
    margin: 4px 0 0;
    color: var(--pay-muted);
    font-size: 11px;
}

.wallet-deposit-v4 .deposit-step {
    padding: 19px 20px;
    border-top: 1px solid var(--pay-border);
}

.wallet-deposit-v4 .payment-method-card form > .deposit-step:first-child,
.wallet-deposit-v4 .crypto-deposit-card > .deposit-step:first-of-type {
    border-top: 0;
}

.wallet-deposit-v4 .deposit-step h2 {
    margin: 0 0 14px;
    color: var(--pay-ink);
    font-size: 15px;
    line-height: 1.35;
}

.wallet-deposit-v4 .amount-selector {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.wallet-deposit-v4 .amount-selector button {
    min-height: 44px;
    padding: 8px 6px;
    border: 1px solid var(--pay-border-strong);
    border-radius: 9px;
    background: #fff;
    color: #556071;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.wallet-deposit-v4 .amount-selector button:hover,
.wallet-deposit-v4 .amount-selector button.active {
    border-color: #ff8f9a;
    background: var(--pay-accent-soft);
    color: #d83d4d;
}

.wallet-deposit-v4 .deposit-amount-input {
    min-height: 48px;
    display: flex;
    margin-top: 9px;
    border: 1px solid var(--pay-border-strong);
    border-radius: 10px;
    overflow: hidden;
}

.wallet-deposit-v4 .deposit-amount-input:focus-within {
    border-color: #ff94a0;
    box-shadow: 0 0 0 3px rgba(255, 82, 98, .1);
}

.wallet-deposit-v4 .deposit-amount-input input {
    min-width: 0;
    flex: 1;
    padding: 11px 13px;
    border: 0;
    outline: 0;
    color: var(--pay-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
}

.wallet-deposit-v4 .deposit-amount-input span {
    display: grid;
    place-items: center;
    padding: 0 13px;
    color: var(--pay-muted);
    background: #fafbfc;
    font-size: 11px;
    font-weight: 700;
}

.wallet-deposit-v4 .deposit-totals {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: 10px;
    background: #f7f8fa;
    color: #4f5969;
    font-size: 11px;
}

.wallet-deposit-v4 .deposit-totals small {
    display: block;
    margin-top: 4px;
    color: var(--pay-muted);
    font-size: 10px;
}

.wallet-deposit-v4 .deposit-totals strong {
    color: var(--pay-accent);
    font-size: 20px;
    letter-spacing: -.02em;
}

.wallet-deposit-v4 .gateway-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.wallet-deposit-v4 .gateway-selector label {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--pay-border);
    border-radius: 10px;
    background: #fff;
    color: var(--pay-ink);
    cursor: pointer;
}

.wallet-deposit-v4 .gateway-selector label:has(input:checked) {
    border-color: #ff99a3;
    background: var(--pay-accent-soft);
}

.wallet-deposit-v4 .gateway-selector input {
    position: absolute;
    right: 9px;
    top: 9px;
    accent-color: var(--pay-accent);
}

.wallet-deposit-v4 .gateway-selector i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--pay-accent);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.wallet-deposit-v4 .gateway-selector b {
    min-width: 0;
    font-size: 12px;
}

.wallet-deposit-v4 .gateway-selector small {
    display: block;
    margin-top: 3px;
    color: var(--pay-muted);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.35;
}

.wallet-deposit-v4 .bank-transfer-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 18px;
    margin: 0 0 11px;
    padding: 16px;
    border: 1px solid var(--pay-border);
    border-radius: 12px;
    background: #fafbfc;
}

.wallet-deposit-v4 .bank-transfer-box p {
    margin: 0 0 12px;
    color: var(--pay-muted);
    font-size: 11px;
}

.wallet-deposit-v4 .bank-transfer-box dl {
    display: grid;
    grid-template-columns: 150px 1fr;
    row-gap: 10px;
    margin: 0;
    font-size: 11px;
}

.wallet-deposit-v4 .bank-transfer-box dt {
    color: var(--pay-muted);
}

.wallet-deposit-v4 .bank-transfer-box dd {
    margin: 0;
    color: var(--pay-ink);
    font-weight: 750;
}

.wallet-deposit-v4 .bank-transfer-box > div > small {
    display: block;
    margin-top: 13px;
    color: var(--pay-warning);
    font-size: 9px;
    line-height: 1.45;
}

.wallet-deposit-v4 .qr-placeholder {
    min-height: 176px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 12px;
    border: 1px dashed #d1d7e0;
    border-radius: 11px;
    background: #fff;
    color: var(--pay-accent);
}

.wallet-deposit-v4 .qr-placeholder span {
    font-size: 42px;
}

.wallet-deposit-v4 .qr-placeholder b {
    font-size: 10px;
}

.wallet-deposit-v4 .qr-placeholder small {
    color: var(--pay-muted);
    font-size: 8px;
    text-align: center;
}

.wallet-deposit-v4 .qr-placeholder.qr-live img {
    width: 132px;
    height: 132px;
    object-fit: contain;
}

.wallet-deposit-v4 .mock-primary.full {
    min-height: 46px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(255, 82, 98, .14);
}

.wallet-deposit-v4 .mock-primary.full:disabled {
    box-shadow: none;
}

.wallet-deposit-v4 .wallet-status-column {
    display: grid;
    gap: 12px;
}

.wallet-deposit-v4 .transaction-state,
.wallet-deposit-v4 .process-card {
    padding: 17px;
}

.wallet-deposit-v4 .transaction-state header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.wallet-deposit-v4 .transaction-state h2,
.wallet-deposit-v4 .process-card h2 {
    margin: 0;
    color: var(--pay-ink);
    font-size: 16px;
}

.wallet-deposit-v4 .transaction-state > p {
    color: var(--pay-muted);
    font-size: 11px;
}

.wallet-deposit-v4 .transaction-state > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 11px;
    border-radius: 10px;
    background: #f7f8fa;
}

.wallet-deposit-v4 .transaction-state span {
    color: var(--pay-muted);
    font-size: 10px;
}

.wallet-deposit-v4 .transaction-state b {
    display: block;
    margin-top: 4px;
    color: var(--pay-ink);
    font-size: 12px;
}

.wallet-deposit-v4 .vertical-process {
    position: relative;
}

.wallet-deposit-v4 .vertical-process::before {
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 12px;
    width: 1px;
    background: var(--pay-border);
    content: "";
}

.wallet-deposit-v4 .vertical-process span {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    padding: 9px 0;
}

.wallet-deposit-v4 .vertical-process i {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--pay-border);
    border-radius: 50%;
    background: #fff;
    color: #8d96a4;
    font-size: 9px;
    font-style: normal;
}

.wallet-deposit-v4 .vertical-process .done i {
    border-color: var(--pay-success);
    background: var(--pay-success);
    color: #fff;
}

.wallet-deposit-v4 .vertical-process .active i {
    border-color: var(--pay-accent);
    background: var(--pay-accent);
    color: #fff;
}

.wallet-deposit-v4 .vertical-process b {
    color: var(--pay-ink);
    font-size: 11px;
}

.wallet-deposit-v4 .vertical-process small {
    display: block;
    margin-top: 3px;
    color: var(--pay-muted);
    font-size: 9px;
    font-weight: 500;
}

.wallet-deposit-v4 .balance-history {
    padding: 0;
    overflow: hidden;
}

.wallet-deposit-v4 .history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-top: 1px solid var(--pay-border);
    font-size: 10px;
}

.wallet-deposit-v4 .history-row small {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--pay-muted);
    font-size: 9px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.wallet-deposit-v4 .history-row > b {
    font-size: 11px;
    white-space: nowrap;
}

.wallet-deposit-v4 .history-row .status-pill {
    font-size: 8px;
}

.wallet-deposit-v4 .wallet-aside {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.15fr .9fr .95fr;
    gap: 12px;
}

.wallet-deposit-v4 .wallet-aside .mock-panel {
    padding: 15px;
}

.wallet-deposit-v4 .promo-list h2,
.wallet-deposit-v4 .wallet-help h2,
.wallet-deposit-v4 .safety-card h2 {
    margin: 0 0 10px;
    color: var(--pay-ink);
    font-size: 14px;
}

.wallet-deposit-v4 .promo-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.wallet-deposit-v4 .promo-list h2 {
    grid-column: 1 / -1;
}

.wallet-deposit-v4 .promo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px;
    border: 1px solid var(--pay-border);
    border-radius: 9px;
}

.wallet-deposit-v4 .promo-item i {
    font-size: 16px;
}

.wallet-deposit-v4 .promo-item b {
    font-size: 10px;
}

.wallet-deposit-v4 .promo-item small {
    display: block;
    margin-top: 2px;
    color: var(--pay-muted);
    font-size: 8px;
}

.wallet-deposit-v4 .wallet-help a {
    display: block;
    padding: 8px 0;
    border-top: 1px solid var(--pay-border);
    color: #4d5869;
    font-size: 10px;
    text-decoration: none;
}

.wallet-deposit-v4 .safety-card p {
    margin: 7px 0;
    color: var(--pay-success);
    font-size: 10px;
}

@media (max-width: 1120px) {
    .payment-settings-workspace,
    .bank-config-workspace {
        grid-template-columns: 1fr;
    }

    .payment-channel-rail {
        position: static;
    }

    .payment-channel-rail > header,
    .payment-bank-summary {
        display: none;
    }

    .payment-channel-rail {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .payment-channel-option + .payment-channel-option {
        margin-top: 0;
    }

    .wallet-deposit-v4 .wallet-page-grid {
        grid-template-columns: minmax(0, 1fr) 310px;
    }

    .bank-connection-banner {
        grid-template-columns: 40px 1fr auto;
    }

    .bank-webhook-url {
        display: none;
    }

    .bank-auto-health {
        justify-items: start;
    }
}

@media (max-width: 860px) {
    .payment-v4-header,
    .wallet-v4-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-health-strip {
        grid-template-columns: 1fr;
    }

    .payment-health-strip article + article {
        border-top: 1px solid var(--pay-border);
        border-left: 0;
    }

    .wallet-v4-balance {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }

    .wallet-v4-balance > div {
        min-width: 0;
    }

    .wallet-deposit-v4 .wallet-page-grid {
        grid-template-columns: 1fr;
    }

    .wallet-deposit-v4 .wallet-status-column {
        grid-template-columns: 1fr 1fr;
    }

    .wallet-deposit-v4 .balance-history {
        grid-column: 1 / -1;
    }

    .wallet-deposit-v4 .wallet-aside {
        grid-template-columns: 1fr;
    }

    .payment-reconcile-toolbar {
        grid-template-columns: 1fr 180px;
    }

    .payment-reconcile-toolbar > span {
        display: none;
    }

    .bank-connection-banner {
        grid-template-columns: 40px 1fr;
    }

    .bank-connection-banner .payment-v4-secondary {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 650px) {
    .payment-ops-v4,
    .bank-settings-v4,
    .wallet-deposit-v4 {
        font-size: 13px;
    }

    .payment-v4-header h1,
    .wallet-v4-header h1 {
        font-size: 27px;
    }

    .payment-channel-rail {
        grid-template-columns: 1fr;
    }

    .payment-settings-heading,
    .bank-settings-card-v4 > header,
    .bank-list-card-v4 > header,
    .payment-reconcile-card > header,
    .payment-sticky-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-settings-heading-actions,
    .payment-sticky-actions > div {
        width: 100%;
    }

    .payment-settings-heading-actions > *,
    .payment-sticky-actions > div > * {
        flex: 1;
    }

    .payment-toggle-grid,
    .payment-field-grid,
    .payment-network-list {
        grid-template-columns: 1fr;
    }

    .bank-auto-rule-strip {
        grid-template-columns: 1fr;
    }

    .payment-field-grid label.span-2,
    .payment-field-grid .span-2 {
        grid-column: auto;
    }

    .payment-reconcile-toolbar {
        grid-template-columns: 1fr;
    }

    .payment-section-nav {
        width: 100%;
    }

    .payment-section-nav a {
        flex: 1;
        justify-content: center;
    }

    .bank-connection-banner {
        grid-template-columns: 1fr;
    }

    .bank-connection-banner .payment-v4-secondary {
        grid-column: auto;
    }

    .wallet-v4-balance {
        grid-template-columns: 1fr;
    }

    .wallet-v4-balance > div + div {
        border-top: 1px solid var(--pay-border);
        border-left: 0;
    }

    .wallet-deposit-v4 .payment-tabs {
        grid-template-columns: 1fr;
    }

    .wallet-deposit-v4 .payment-tabs button {
        justify-content: flex-start;
    }

    .wallet-deposit-v4 .amount-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    .wallet-deposit-v4 .amount-selector button:last-child {
        grid-column: 1 / -1;
    }

    .wallet-deposit-v4 .gateway-selector {
        grid-template-columns: 1fr;
    }

    .wallet-deposit-v4 .bank-transfer-box {
        grid-template-columns: 1fr;
    }

    .wallet-deposit-v4 .bank-transfer-box dl {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .wallet-deposit-v4 .bank-transfer-box dd {
        margin-bottom: 7px;
    }

    .wallet-deposit-v4 .wallet-status-column {
        grid-template-columns: 1fr;
    }

    .wallet-deposit-v4 .balance-history {
        grid-column: auto;
    }

    .wallet-deposit-v4 .promo-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .payment-v4-primary,
    .payment-v4-secondary,
    .payment-channel-option,
    .payment-section-chevron,
    .wallet-deposit-v4 .wallet-payment-panel {
        transition: none;
        animation: none;
    }
}

.bank-list-card-v4 > header a.payment-v4-primary { color: #fff; }

@media (max-width: 650px) {
    .wallet-v4-balance {
        grid-template-columns: repeat(2, 1fr);
    }

    .wallet-v4-balance > div:nth-child(3) {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .wallet-v4-balance > div:nth-child(3) dd {
        margin-top: 0;
    }

    .wallet-deposit-v4 .payment-tabs {
        grid-template-columns: repeat(3, 1fr);
    }

    .wallet-deposit-v4 .payment-tabs button {
        min-height: 54px;
        justify-content: center;
        gap: 5px;
        padding: 7px 4px;
        text-align: center;
    }

    .wallet-deposit-v4 .payment-tabs button b {
        font-size: 10px;
        line-height: 1.2;
    }

    .wallet-deposit-v4 .payment-tabs button small {
        display: none;
    }

    .wallet-deposit-v4 .payment-tabs button .ui-icon {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 650px) { .payment-sticky-actions { position: static; } }

.payment-ops-v4 [data-deposit-row][hidden] { display: none !important; }