/**
 * 支付 / VIP / 提现弹窗 UI（E7-06）
 * 覆盖 confirm-pay、二维码支付、VIP 开通弹窗、提现弹窗（43）。
 */

.mika-confirm-pay.confirm-pay-container,
.confirm-pay-container.mika-confirm-pay {
    max-width: 100%;
    width: 100%;
    border-radius: var(--mika-radius);
    overflow: hidden;
    background: var(--mika-color-surface);
}

.mika-confirm-pay.is-mlm-plan .confirm-pay-content {
    padding-bottom: 4px;
}

.mika-confirm-pay .colorful-header .title div {
    color: var(--mika-color-text);
}

.mika-confirm-pay .pay-info {
    background: var(--mika-color-surface-muted);
    border-radius: var(--mika-radius);
}

.mika-confirm-pay .pay-info-title {
    color: var(--mika-color-text);
}

.mika-confirm-pay .pay-info-price .rigth span:last-of-type {
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
}

.mika-confirm-pay .pay-button button,
.confirm-pay-container .pay-button button {
    background: var(--mika-color-primary);
    background-image: none;
    border-radius: var(--mika-radius-button);
    box-shadow: none;
    transition: opacity var(--mika-duration-fast) var(--mika-ease-out);
}

.mika-confirm-pay .pay-button button:hover:not(:disabled),
.confirm-pay-container .pay-button button:hover:not(:disabled) {
    opacity: 0.92;
    transform: none;
}

.mika-confirm-pay .pay-button button:disabled,
.confirm-pay-container .pay-button button:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.mika-confirm-pay .pay-button button,
.confirm-pay-container .pay-button button,
.mika-confirm-pay .pay-button button:hover,
.confirm-pay-container .pay-button button:hover {
    color: #fff !important;
}

.mika-confirm-pay .mlm-confirm-secure {
    margin: 12px 16px 0;
    padding: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mika-color-text-subtle, #808098);
}

.mika-confirm-pay.is-mlm-plan .pay-button {
    padding-bottom: 8px;
}

.mika-confirm-pay.is-mlm-plan .colorful-header .title i {
    color: var(--mika-color-primary, var(--theme-color));
}

/* Pay result modal — design 59-支付结果确认 */
.mika-pay-check {
    --mika-pay-check-red: var(--mika-color-primary);
    --mika-pay-check-green: #4ad47f;
    position: relative;
    padding: 32px 40px 28px;
    min-width: 280px;
    text-align: center;
    box-sizing: border-box;
}

.mika-pay-check-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #b0b6c2;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.mika-pay-check-close:hover {
    color: #6b7280;
}

.mika-pay-check-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 6px;
}

.mika-pay-check-mark {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}

.mika-pay-check-brand strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--mika-color-text, #171b26);
    letter-spacing: 0.01em;
    line-height: 1;
}

.mika-pay-check-brand em {
    font-style: normal;
    font-weight: 700;
    color: var(--mika-pay-check-red);
    margin-left: 4px;
}

.mika-pay-check-subtitle {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.4;
    color: #9aa3b2;
    font-weight: 400;
}

.mika-pay-check-state .icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
}

.mika-pay-check-icon-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mika-pay-check-ring-soft {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mika-pay-check-green) 16%, transparent);
    z-index: 0;
}

.mika-pay-spark {
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 8px;
    background: #fbbf24;
    clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
}

.mika-pay-spark--1 { top: 10px; right: 18px; background: #facc15; }
.mika-pay-spark--2 {
    top: 34px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: transparent;
    clip-path: none;
}
.mika-pay-spark--2::before,
.mika-pay-spark--2::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #34d399;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
.mika-pay-spark--2::before { width: 8px; height: 2px; }
.mika-pay-spark--2::after { width: 2px; height: 8px; }
.mika-pay-spark--3 { bottom: 22px; left: 10px; width: 7px; height: 7px; background: #fde047; }
.mika-pay-spark--4 {
    top: 18px;
    left: 14px;
    width: 7px;
    height: 7px;
    background: transparent;
    clip-path: none;
}
.mika-pay-spark--4::before,
.mika-pay-spark--4::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #2dd4bf;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
.mika-pay-spark--4::before { width: 7px; height: 2px; }
.mika-pay-spark--4::after { width: 2px; height: 7px; }
.mika-pay-spark--5 { bottom: 14px; right: 22px; width: 5px; height: 5px; background: #4ade80; }

.mika-pay-check-state.success .icon {
    background: var(--mika-pay-check-green);
    box-shadow: 0 10px 24px rgba(74, 212, 127, 0.32);
}

.mika-pay-check-state.fail .icon {
    background: var(--mika-pay-check-red);
    margin-bottom: 14px;
}

.mika-pay-check-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--mika-color-text, #171b26);
    line-height: 1.35;
}

.mika-pay-check-amount {
    margin: 10px 0 0;
    color: var(--mika-pay-check-red);
    letter-spacing: -0.02em;
    line-height: 1.15;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    font-weight: 800;
}

.mika-pay-check-currency {
    font-size: 22px;
    font-weight: 700;
}

.mika-pay-check-num {
    font-size: 34px;
    font-weight: 800;
}

.mika-pay-check-desc {
    margin: 8px 0 0;
    font-size: 13px;
    color: #8991a1;
}

.mika-pay-check-meta {
    list-style: none;
    margin: 22px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #eef0f4;
    border-bottom: 1px solid #eef0f4;
    padding-bottom: 16px;
    text-align: left;
}

.mika-pay-check-meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.4;
}

.mika-pay-check-meta li:last-child {
    margin-bottom: 0;
}

.mika-pay-check-meta span {
    flex: 0 0 auto;
    color: #9aa3b2;
}

.mika-pay-check-meta strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 70%;
    font-weight: 600;
    color: #303746;
    word-break: break-all;
    text-align: right;
}

.mika-pay-check-copy {
    border: 0;
    background: transparent;
    color: #b0b6c2;
    cursor: pointer;
    padding: 0;
    font-size: 15px;
    line-height: 1;
}

.mika-pay-check-copy:hover {
    color: var(--mika-pay-check-red);
}

.mika-pay-check-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

.mika-pay-check-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.mika-pay-check-btn.is-primary {
    border: 0;
    background: var(--mika-pay-check-red);
    color: #fff;
    box-shadow: none;
}

.mika-pay-check-btn.is-ghost {
    border: 1px solid var(--mika-pay-check-red);
    background: var(--mika-color-surface, #fff);
    color: var(--mika-pay-check-red);
}

.mika-pay-check-ring {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--mika-pay-check-red) 20%, transparent);
    border-top-color: var(--mika-pay-check-red);
    animation: mika-pay-spin 0.9s linear infinite;
}

.mika-pay-check-steps {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 18px 0 14px;
    font-size: 12px;
    color: #8991a1;
}

.mika-pay-check-steps .is-done,
.mika-pay-check-steps .is-active {
    color: var(--mika-pay-check-red);
    font-weight: 600;
}

.mika-pay-check-tip {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fafbfc;
    color: #8991a1;
    font-size: 12px;
    line-height: 1.5;
}

.mika-confirm-pay .pay-button button.is-loading,
.confirm-pay-container .pay-button button.is-loading {
    position: relative;
    color: transparent;
}

.mika-confirm-pay .pay-button button.is-loading::after,
.confirm-pay-container .pay-button button.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mika-pay-spin 0.7s linear infinite;
}

.mika-pay.qrcode-pay-container,
.qrcode-pay-container.mika-pay {
    background: var(--mika-color-surface);
}

.mika-pay .pay-loading-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: var(--mika-color-text-muted);
}

.mika-pay .pay-loading-tip::after {
    content: '';
    width: 24px;
    height: 30px;
    margin-left: 8px;
    background: url(images/loading.svg) no-repeat center center;
    background-size: contain;
}

.mika-pay .pay-title {
    color: var(--mika-color-text);
}

.mika-pay .pay-price {
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
}

.mika-pay .pay-countdown {
    color: var(--mika-color-text-subtle);
}

.mika-pay-vip.pay-vip-container,
.pay-vip-container.mika-pay-vip {
    background: var(--mika-color-surface);
    color: var(--mika-color-text);
}

.mika-pay-vip .vip-modal-title {
    color: var(--mika-color-text);
}

.mika-pay-vip .vip-modal-subtitle {
    color: var(--mika-color-text-subtle);
}

.mika-pay-vip .vip-modal-code-link {
    color: var(--mika-color-primary);
}

.mika-pay-vip .vip-tier-toggle .vip-tier-btn.active,
.mika-pay-vip .vip-tier-toggle button.active {
    background: var(--mika-color-primary);
    background-image: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.mika-pay-vip .vip-pay-btn,
.mika-pay-vip .card-code-btn {
    background: var(--mika-color-primary);
    background-image: none;
    border-radius: var(--mika-radius-button);
    box-shadow: none;
    transition: opacity var(--mika-duration-fast) var(--mika-ease-out);
}

.mika-pay-vip .vip-pay-btn:hover:not(:disabled),
.mika-pay-vip .card-code-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: none;
}

.mika-pay-vip .vip-pay-btn:disabled,
.mika-pay-vip .card-code-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.mika-pay-vip .vip-pay-btn.is-loading,
.mika-pay-vip .card-code-btn.is-loading {
    position: relative;
    color: transparent;
}

.mika-pay-vip .vip-pay-btn.is-loading::after,
.mika-pay-vip .card-code-btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mika-pay-spin 0.7s linear infinite;
}

.mika-pay-vip.pay-vip-empty {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mika-color-text-subtle);
}

.pay-type li.active {
    border-color: color-mix(in srgb, var(--mika-color-primary) 45%, transparent);
}

.pay-type .balance {
    background: var(--mika-color-surface-muted);
    border-radius: var(--mika-radius);
    color: var(--mika-color-text-subtle);
}

.pay-type .balance .rigth {
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
}

@keyframes mika-pay-spin {
    to {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 480px) {
    .mika-confirm-pay.confirm-pay-container,
    .mika-pay-vip.pay-vip-container {
        max-width: 100%;
    }
}

/* ── High-frequency modals (design alignment, app-layout scope) ── */

.app-layout-active .mika-modal-content:has(.mika-login),
.app-layout-active .mika-modal-content:has(.pay-vip-container),
.app-layout-active .mika-modal-content:has(.recharge-container) {
    background: var(--mika-color-surface, #fff);
    border-radius: var(--mika-radius, 16px);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) {
    width: 620px !important;
    max-width: min(620px, calc(100vw - 32px));
    border-radius: 24px;
}

/* VIP modal — design 41-VIP开通弹窗 */
.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-vip-container {
    padding: 0 0 18px;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-header {
    margin: 0 0 14px;
    padding: 20px 24px 16px;
    background: transparent;
    color: var(--mika-color-text, #171b26);
    position: relative;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-header--atmosphere {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    margin-bottom: 14px;
    padding: 20px 24px 16px;
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--mika-color-primary) 14%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--mika-color-primary) 6%, var(--mika-color-surface, #fff)) 0%, var(--mika-color-surface, #fff) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--mika-color-primary) 8%, #eceef2);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-header--lite,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-header--bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 20px 24px 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-status-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mika-color-bg, #f5f7f9);
    color: var(--mika-color-text-subtle, #6b7280);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-status-pill.is-active {
    background: color-mix(in srgb, var(--mika-color-primary) 12%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mika-color-primary) 12%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-title {
    color: var(--mika-color-text, #171b26);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-subtitle {
    color: var(--mika-color-text-subtle, #8991a1);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-code-link {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--mika-color-primary);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-tier-toggle,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-tier-diff,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-section,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-pay-summary,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-pay-action,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-footer,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-product-empty,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-cardpay-panel .card-code-warp {
    margin-left: 24px;
    margin-right: 24px;
}

/* 收银确认：订单摘要（页上已选 → 弹窗不再重选） */
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 16px 16px 14px;
    border-radius: var(--mika-radius, 14px);
    background: color-mix(in srgb, var(--mika-color-primary) 6%, var(--mika-color-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--mika-color-primary) 16%, #e8eaef);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container.is-checkout) .vip-modal-header--lite {
    margin-bottom: 4px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__tier {
    font-size: 12px;
    font-weight: 650;
    color: var(--mika-color-text-subtle, #6b7280);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__plan {
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--mika-color-text, #111827);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__hint {
    font-size: 12px;
    color: var(--mika-color-text-subtle, #6b7280);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__price {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    flex-shrink: 0;
    color: var(--mika-color-primary);
    line-height: 1;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__price small {
    font-size: 14px;
    font-weight: 750;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__price em {
    font-style: normal;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__change {
    align-self: flex-start;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mika-color-primary);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-checkout-summary__change:hover {
    text-decoration: underline;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-edit-plans-foot {
    margin: 12px 24px 8px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-edit-plans-foot .vip-pay-btn {
    width: 100%;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-tier-diff {
    margin-top: -4px;
    margin-bottom: 12px;
    padding: 0;
    color: var(--mika-color-text-subtle, #6b7280);
    font-size: 12px;
    line-height: 1.45;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 4px;
    overflow: visible;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design.is-count-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design.is-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-card {
    position: relative;
    padding: 18px 10px 14px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #e8eaef;
    border-radius: var(--mika-radius, 14px);
    background: var(--mika-color-surface, #fff);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 118px;
}

/* 推荐档轻量底色，与选中描边区分 */
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-card.recommended {
    background: color-mix(in srgb, var(--mika-color-primary) 5%, var(--mika-color-surface, #fff));
    border-color: color-mix(in srgb, var(--mika-color-primary) 28%, #e8eaef);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-card.best-save {
    border-color: color-mix(in srgb, var(--mika-color-primary) 18%, #e8eaef);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 2;
    padding: 2px 9px;
    background: var(--mika-color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    white-space: nowrap;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-badge--save {
    background: color-mix(in srgb, var(--mika-color-primary) 12%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
    border: 1px solid color-mix(in srgb, var(--mika-color-primary) 28%, transparent);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-check {
    display: none;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-price {
    margin-top: 8px;
    color: var(--mika-color-text, #171b26);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-currency {
    font-size: 13px;
    font-weight: 700;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-card.active .vip-plan-price,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-card.active .vip-plan-num,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-card.active .vip-plan-currency {
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-num {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-monthly {
    margin-top: 8px;
    color: #8991a1;
    font-size: 12px;
    line-height: 1.3;
    min-height: 1.3em;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-secondary {
    margin-top: auto;
    padding-top: 8px;
    min-height: 1.3em;
    font-size: 12px;
    line-height: 1.3;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-secondary.vip-plan-monthly {
    margin-top: auto;
    color: #8991a1;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-save {
    margin-top: 8px;
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mika-color-primary) 8%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
    font-size: 12px;
    font-weight: 600;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-secondary.vip-plan-save {
    margin-top: auto;
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mika-color-primary) 8%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
    font-size: 12px;
    font-weight: 600;
}

/*
 * 购买赠送积分：与 /vip 页面用同一套金色语言（金色 = 额外福利）。
 * vip.css 的 --vip-gold-* 只定义在 .mika-vip-page 上，弹窗是 teleport 出去的取不到，
 * 这里补一份同值令牌，暗色跟随主题提亮。
 * 文字直接用金色（浅色 6.7:1 / 暗色 8.0:1）；琥珀色系在浅底上当文字会掉到 3.2:1，不达标。
 * 无论有没有赠积分都占位（min-height），保证同一行三张卡等高。
 */
.app-layout-active .mika-modal-content:has(.pay-vip-container) {
    --pay-vip-gold-deep: #854f0b;
}

html.dark-theme .app-layout-active .mika-modal-content:has(.pay-vip-container),
body.dark-theme .app-layout-active .mika-modal-content:has(.pay-vip-container) {
    --pay-vip-gold-deep: #e8bd6b;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-bonus {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 1.3em;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--pay-vip-gold-deep, #854f0b);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-bonus i {
    font-size: 13px;
    line-height: 1;
    color: var(--pay-vip-gold-deep, #854f0b);
}

/* 权益：决策中段，先讲价值再选套餐 */
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-section--pros {
    margin-top: 0;
    margin-bottom: 14px;
    padding: 12px 12px;
    border-radius: 14px;
    background: var(--mika-color-bg, #f5f7f9);
    border: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-item > i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    background: color-mix(in srgb, var(--mika-color-primary) 10%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-text strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
    line-height: 1.3;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-text span {
    font-size: 11px;
    color: var(--mika-color-text-subtle, #8991a1);
    line-height: 1.35;
}

/* 旧页脚芯片样式保留兼容 */
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-section--compact {
    margin-top: 14px;
    margin-bottom: 0;
    padding-top: 12px;
    border-top: 1px dashed #eceef2;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mika-color-text-muted, #6b7280);
    text-align: center;
    letter-spacing: 0.02em;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--mika-color-bg, #f5f7f9);
    color: var(--mika-color-text-subtle, #6b7280);
    font-size: 12px;
    line-height: 1.2;
    max-width: 100%;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-chip i {
    font-size: 14px;
    color: var(--mika-color-primary);
    flex-shrink: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip {
    margin-top: 14px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
    margin-bottom: 10px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-options li {
    flex: 1 1 0;
    min-width: 96px;
    max-width: 140px;
    height: auto;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #e8eaef !important;
    border-radius: 12px !important;
    background: var(--mika-color-surface, #fff) !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    cursor: pointer;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-options li .pay-type-check {
    display: none;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-main {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-main > i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--mika-color-bg, #f5f7f9);
    color: var(--mika-color-text, #171b26);
    box-shadow: none;
    flex-shrink: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-wecatpay .pay-type-main > i {
    background: #e8f8ef;
    color: #09bb07;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-alipay .pay-type-main > i {
    background: #e8f3ff;
    color: #1677ff;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-balance .pay-type-main > i {
    background: color-mix(in srgb, var(--mika-color-primary) 8%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-card .pay-type-main > i,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-more-item .pay-type-main > i {
    background: #f0f1f4;
    color: #6b7280;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-options li.active {
    border-color: var(--mika-color-primary) !important;
    background: color-mix(in srgb, var(--mika-color-primary) 4%, var(--mika-color-surface, #fff)) !important;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-options li.active .pay-type-main > i,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-more-item.active .pay-type-main > i {
    box-shadow: none;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-name {
    font-size: 12px;
    color: var(--mika-color-text, #303746);
    text-align: left;
    line-height: 1.2;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-more-options {
    margin-top: 8px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .balance {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .balance .balance-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .balance.is-insufficient {
    background: color-mix(in srgb, #ef4444 8%, var(--mika-color-surface, #fff));
    color: #b91c1c;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .balance.is-insufficient .rigth {
    color: #b91c1c;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .balance-recharge-link {
    border: 0;
    background: transparent;
    color: var(--mika-color-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .balance-warn {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #b91c1c;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-balance.is-insufficient {
    border-color: color-mix(in srgb, #ef4444 35%, #e8eaef) !important;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-tier-toggle {
    border-radius: 12px;
    background: var(--mika-color-bg, #f5f7f9);
    margin-bottom: 12px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-tier-hint {
    margin: -4px 0 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mika-color-primary) 6%, var(--mika-color-bg, #f5f7f9));
    font-size: 12px;
    line-height: 1.45;
    color: var(--mika-color-text-muted, #6b7280);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-tier-btn.active {
    background: var(--mika-color-primary);
    color: #fff;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-card.active {
    border-color: var(--mika-color-primary);
    box-shadow: none;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-grid--design .vip-plan-card.active {
    border-color: var(--mika-color-primary);
    background: color-mix(in srgb, var(--mika-color-primary) 3%, var(--mika-color-surface, #fff));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mika-color-primary) 20%, transparent);
    transform: translateY(-1px);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-card.active .vip-plan-num,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-plan-card.active .vip-plan-currency {
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-pay-action {
    margin-top: 14px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-pay-btn,
.app-layout-active .mika-modal-content:has(.pay-vip-container) .card-code-btn {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: var(--mika-color-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--mika-color-primary) 18%, transparent);
    cursor: pointer;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-cta-hint {
    margin: 8px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--mika-color-text-subtle, #8991a1);
    line-height: 1.4;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: #8991a1;
    font-size: 12px;
    text-align: center;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-agree-text {
    margin: 0;
    color: #8991a1;
    line-height: 1.45;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-agree-text a {
    color: #6b7280;
    text-decoration: none;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-agree-text a:hover {
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .close {
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    background: transparent;
    border-radius: 50%;
    box-shadow: none;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .close i {
    color: var(--mika-color-text-subtle, #8991a1);
    opacity: 1;
    font-size: 18px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-header--hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 28px 32px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-modal-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-pay-summary {
    border-radius: 12px;
    border-color: #eceef2;
    background: #fafbfc;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-pay-summary-amount {
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip .pay-type-options li.active {
    border-color: var(--mika-color-primary) !important;
}

.app-layout-active .mika-modal-content:has(.pay-vip-container) .pay-type-vip li.active .pay-type-check {
    border-color: var(--mika-color-primary);
    background: var(--mika-color-primary);
}

@media screen and (max-width: 560px) {
    .app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-list {
        grid-template-columns: 1fr;
    }

    .app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-item {
        align-items: center;
    }

    .app-layout-active .mika-modal-content:has(.pay-vip-container) .vip-privilege-text span {
        display: none;
    }
}

/* Recharge modal — design 31-充值弹窗 */
.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-container {
    padding: 32px 32px 24px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-header-icon {
    border-radius: 12px;
    background: color-mix(in srgb, var(--mika-color-primary) 6%, var(--mika-color-surface, #fff));
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.recharge-container) .fast-amount-list .item {
    border-radius: 12px;
    border-color: #e5e7eb;
    background: var(--mika-color-surface, #fff);
}

.app-layout-active .mika-modal-content:has(.recharge-container) .fast-amount-list .item.active {
    border-color: var(--mika-color-primary);
    background: var(--mika-color-surface, #fff);
    box-shadow: 0 0 0 1px var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.recharge-container) .fast-amount-list .item-check {
    background: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options li {
    border-radius: 12px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options li.active {
    border-color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-button button {
    height: 52px;
    border-radius: 12px;
    background: var(--mika-color-primary);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--mika-color-primary) 22%, transparent);
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    color: #8991a1;
    font-size: 12px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-footer i {
    color: var(--mika-color-primary);
}

/* Design 31 — 充值金额卡 / 支付方式横向三卡 */
.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-brand {
    margin-bottom: 14px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-brand img {
    display: block;
    width: 72px;
    height: auto;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-header-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-header-icon {
    display: none;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--mika-color-text, #171b26);
    line-height: 1.3;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-desc {
    margin-top: 6px;
    color: #8991a1;
    font-size: 13px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .fast-amount-list .item .price-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.recharge-container) .fast-amount-list .item-check {
    top: auto;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    border-radius: 6px 0 10px 0;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .fast-amount-list .item-custom .custom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .fast-amount-list .item-custom .custom input {
    width: 72px;
    border: 0;
    background: transparent;
    font-size: 14px;
    outline: none;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .fast-amount-list .custom-unit {
    color: #8991a1;
    font-size: 13px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options li {
    display: flex;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 96px;
    padding: 14px 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options li .pay-type-check {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options li .pay-type-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding-right: 20px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options li .pay-type-main > i {
    font-size: 28px;
    line-height: 1;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-options li.active .pay-type-name {
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-more-btn {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafbfc;
    color: #8991a1;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .pay-type-recharge .pay-type-desc {
    font-size: 12px;
    color: #8991a1;
    font-weight: 400;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-order-summary {
    background: var(--mika-color-surface-muted, #f7f8fa);
    border-color: transparent;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .recharge-order-summary__title {
    display: none;
}

.app-layout-active .mika-modal-content:has(.recharge-container) .close {
    top: 16px;
    right: 16px;
    background: #f3f4f6;
    border-radius: 50%;
    box-shadow: none;
}

/* Shared shell — remaining payment / utility modals */
.app-layout-active .mika-modal-content:has(.create-topic-container) {
    background: var(--mika-color-surface, #fff);
    border-radius: var(--mika-radius, 16px);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container),
.app-layout-active .mika-modal-content:has(.captcha-container),
.app-layout-active .mika-modal-content:has(.join-circle-container),
.app-layout-active .mika-modal-content:has(.image-upload-box),
.app-layout-active .mika-modal-content:has(.confirm-pay-container),
.app-layout-active .mika-modal-content:has(.qrcode-pay-container),
.app-layout-active .mika-modal-content:has(.mika-pay-check),
.app-layout-active .mika-modal-content:has(.pay-check-container) {
    background: var(--mika-color-surface, #fff);
    border-radius: var(--mika-radius, 16px);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.app-layout-active .mika-modal-content:has(.binding-container),
.mika-modal-content:has(.mika-binding) {
    width: 399px;
    max-width: calc(100vw - 32px);
    background: var(--mika-color-surface, #fff);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.app-layout-active .mika-modal-content:has(.create-topic-container) .close,
.app-layout-active .mika-modal-content:has(.withdrawal-container) .close,
.app-layout-active .mika-modal-content:has(.captcha-container) .close,
.app-layout-active .mika-modal-content:has(.join-circle-container) .close,
.app-layout-active .mika-modal-content:has(.image-upload-box) .close,
.app-layout-active .mika-modal-content:has(.confirm-pay-container) .close,
.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .close,
.app-layout-active .mika-modal-content:has(.mika-pay-check) .close,
.app-layout-active .mika-modal-content:has(.pay-check-container) .close {
    top: 16px;
    right: 16px;
    background: #f3f4f6;
    border-radius: 50%;
    box-shadow: none;
}

/* Binding modal close — design 46 plain X (no circle) */
.app-layout-active .mika-modal-content:has(.binding-container) .close,
.mika-modal-content:has(.mika-binding) .close {
    top: 18px;
    right: 18px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.app-layout-active .mika-modal-content:has(.binding-container) .close i,
.mika-modal-content:has(.mika-binding) .close i {
    width: 22px;
    height: 22px;
    font-size: 20px;
    color: #9aa0ac;
    opacity: 1;
}

/* Confirm pay — design 42-确认支付弹窗 */
.app-layout-active .mika-modal-content:has(.confirm-pay-container) {
    width: 420px !important;
    max-width: calc(100vw - 32px);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .close {
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    background: transparent;
    color: #9aa3b2;
    font-size: 18px;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .confirm-pay-container {
    color: var(--mika-color-text, #171b26);
    padding: 28px 28px 24px;
    box-sizing: border-box;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .confirm-pay-header {
    margin-bottom: 22px;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .confirm-pay-brand {
    display: flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 18px;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .confirm-pay-brand img {
    display: block;
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .confirm-pay-heading {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mika-color-text, #171b26);
    letter-spacing: -0.02em;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .confirm-pay-content {
    padding: 0;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-section {
    margin-bottom: 18px;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-section-label,
.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm > .title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1.3;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-info {
    margin: 0;
    padding: 14px;
    border: 1px solid #e8ebf0;
    border-radius: var(--mika-radius, 14px);
    background: var(--mika-color-surface, #fff);
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-info-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-info-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #1a1d24;
    color: var(--mika-color-primary);
    font-size: 24px;
    flex-shrink: 0;
    overflow: hidden;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-info-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-info-copy {
    flex: 1;
    min-width: 0;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-info-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
    line-height: 1.35;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-info-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #9aa3b2;
    line-height: 1.4;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-info-amount {
    flex-shrink: 0;
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type,
.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm {
    padding: 0;
    margin-bottom: 18px;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-panel {
    margin: 0;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-options {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-options li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #e8ebf0;
    border-radius: var(--mika-radius, 14px);
    background: var(--mika-color-surface, #fff);
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-options li .pay-type-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-options li .pay-type-main > i {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-alipay .pay-type-main > i {
    color: #1677ff;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-wecatpay .pay-type-main > i {
    color: #07c160;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-balance .pay-type-main > i {
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-desc {
    display: none;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .pay-type-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    background: var(--mika-color-surface, #fff);
    color: transparent;
    font-size: 14px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm li.active {
    border-color: #e8ebf0;
    box-shadow: none;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm li.active .pay-type-check {
    border-color: var(--mika-color-primary);
    background: var(--mika-color-primary);
    color: #fff;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .balance {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid #e8ebf0;
    border-radius: var(--mika-radius, 14px);
    background: #fafbfc;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-type-confirm .balance .rigth {
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
    font-weight: 600;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-section-amount {
    margin-bottom: 22px;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-amount-value {
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-button {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-button button,
.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-confirm-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: var(--mika-color-primary);
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-confirm-btn:hover:not(:disabled) {
    opacity: 0.92;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-cancel-btn {
    border: 1.5px solid var(--mika-color-primary) !important;
    background: var(--mika-color-surface, #fff) !important;
    color: var(--mika-color-primary) !important;
    box-shadow: none !important;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .pay-cancel-btn:hover {
    background: color-mix(in srgb, var(--mika-color-primary) 8%, var(--mika-color-surface, #fff)) !important;
}

.app-layout-active .mika-modal-content:has(.confirm-pay-container) .mlm-confirm-secure {
    display: none;
}

/* QR pay — design 49-支付二维码弹窗 */
.app-layout-active .mika-modal-content:has(.qrcode-pay-container) {
    width: 400px !important;
    max-width: calc(100vw - 32px);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .close {
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    color: #9aa3b2;
    font-size: 16px;
    box-shadow: none;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .qrcode-pay-container {
    border-radius: 20px;
    overflow: hidden;
    background: var(--mika-color-surface, #fff);
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .qrcode-pay {
    padding: 28px 28px 24px;
    text-align: center;
    box-sizing: border-box;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin: 0 0 14px;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-brand-logo img {
    display: block;
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-heading {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mika-color-text, #171b26);
    letter-spacing: -0.02em;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-qrcode {
    width: 220px;
    height: 220px;
    margin: 0 auto 20px;
    padding: 12px;
    border: 1.5px solid #ff6b8a;
    border-radius: 16px;
    background: var(--mika-color-surface, #fff);
    box-sizing: border-box;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-qrcode img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-amount-block {
    margin: 0 0 18px;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-amount-label {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #9aa3b2;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-amount-value {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
    letter-spacing: -0.02em;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-methods-block {
    margin: 0 0 16px;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-methods-label {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #9aa3b2;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-methods-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 36px;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-method-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 64px;
    color: #9aa3b2;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-method-item.active {
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-method-icon.is-wecatpay {
    color: #07c160;
    background: rgba(7, 193, 96, 0.08);
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-method-icon.is-alipay {
    color: #1677ff;
    background: rgba(22, 119, 255, 0.08);
    border-radius: 8px;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-method-name {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-method-item.active .pay-method-name {
    font-weight: 600;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-countdown {
    margin: 0 0 18px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-countdown em {
    font-style: normal;
    color: var(--mika-color-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid var(--mika-color-primary);
    border-radius: 12px;
    background: var(--mika-color-surface, #fff);
    color: var(--mika-color-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-done-btn:hover {
    background: color-mix(in srgb, var(--mika-color-primary) 8%, var(--mika-color-surface, #fff));
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-expired-body {
    padding: 24px 0 8px;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-expired-body > i {
    display: block;
    margin: 0 auto 12px;
    font-size: 40px;
    color: #9aa3b2;
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-expired-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.qrcode-pay-container) .pay-expired-desc {
    margin: 0 0 20px;
    font-size: 13px;
    color: #9aa3b2;
}

/* Pay result — design 59-支付结果确认 */
.app-layout-active .mika-modal-content:has(.mika-pay-check),
.app-layout-active .mika-modal-content:has(.pay-check-container) {
    width: 420px;
    max-width: calc(100vw - 32px);
    border-radius: var(--mika-radius, 16px);
    background: var(--mika-color-surface, #fff);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.app-layout-active .mika-modal-content:has(.mika-pay-check) .mika-pay-check,
.app-layout-active .mika-modal-content:has(.pay-check-container) .mika-pay-check {
    padding: 32px 40px 28px;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.mika-pay-check) .close,
.app-layout-active .mika-modal-content:has(.pay-check-container) .close {
    display: none !important;
}

/* Pay method modal — design 65-支付方式选择 */
.app-layout-active .mika-modal-content:has(.pay-method-container) {
    width: 400px;
    max-width: calc(100vw - 32px);
    padding: 0;
    background: var(--mika-color-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-method-container {
    padding: 28px 24px 24px;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .mika-pay-method__title {
    margin: 0 0 18px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-type-method {
    padding: 0;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-type-method .pay-type-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-type-method .pay-type-options li {
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: var(--mika-color-surface, #fff);
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-type-method li.active {
    border-color: var(--mika-color-primary);
    box-shadow: 0 0 0 1px var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-type-method li.active .pay-type-check {
    border-color: var(--mika-color-primary);
    background: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-type-method .pay-type-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-type-method .pay-type-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-type-method .pay-type-desc {
    font-size: 12px;
    color: #8991a1;
    font-weight: 400;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .pay-type-method .balance {
    display: none;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .mika-pay-method__summary {
    margin-top: 18px;
    padding-top: 4px;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .mika-pay-method__row,
.app-layout-active .mika-modal-content:has(.pay-method-container) .mika-pay-method__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    color: #8991a1;
    font-size: 14px;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .mika-pay-method__row strong {
    color: #303746;
    font-weight: 500;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .mika-pay-method__total {
    margin-top: 4px;
    color: #303746;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .mika-pay-method__total strong {
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
    font-size: 24px;
    font-weight: 700;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .mika-pay-method__action {
    margin-top: 18px;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .mika-pay-method__action button {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--mika-color-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--mika-color-primary) 22%, transparent);
    cursor: pointer;
}

.app-layout-active .mika-modal-content:has(.pay-method-container) .close {
    top: 16px;
    right: 16px;
    background: #f3f4f6;
    border-radius: 50%;
    box-shadow: none;
}

/* 充值自定义金额：避免「自定义」被挤成竖排 */
.app-layout-active .mika-modal-content:has(.recharge-container) .fast-amount-list .item-custom .price-name {
    writing-mode: horizontal-tb;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Create topic — design 57 (shell overrides; field styles in style.css) */
.app-layout-active .mika-modal-content:has(.create-topic-container) {
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
}

.app-layout-active .mika-modal-content:has(.create-topic-container) .close {
    top: 14px;
    right: 14px;
    background: #f3f4f6;
    border-radius: 50%;
    box-shadow: none;
}

/* Withdrawal — design 43-提现弹窗 */
.app-layout-active .mika-modal-content:has(.withdrawal-container) {
    width: 480px !important;
    max-width: calc(100vw - 32px);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .close {
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    background: transparent;
    color: #9aa3b2;
    font-size: 18px;
    box-shadow: none;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-withdrawal,
.app-layout-active .mika-modal-content:has(.withdrawal-container) .withdrawal-container {
    color: var(--mika-color-text, #171b26);
    padding: 28px 28px 24px;
    box-sizing: border-box;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-header {
    margin-bottom: 8px;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-brand {
    display: flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 16px;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-brand img {
    display: block;
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-heading {
    margin: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mika-color-text, #171b26);
    letter-spacing: -0.02em;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-body {
    padding: 0;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-balance {
    text-align: center;
    margin: 14px 0 20px;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-balance-label {
    color: #8991a1;
    font-size: 13px;
    line-height: 1.4;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-balance-value {
    margin-top: 6px;
    color: var(--mika-color-finance, var(--mika-color-text, #111827));
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-balance-value .unit {
    font-size: 22px;
    margin-right: 4px;
    font-weight: 700;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-label {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
    line-height: 1.3;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-amount {
    position: relative;
    display: block;
    margin-bottom: 8px;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-amount .input {
    width: 100%;
    height: 48px;
    padding: 0 88px 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: var(--mika-color-surface, #fff);
    color: var(--mika-color-text, #171b26);
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
    -moz-appearance: textfield;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-amount .input::-webkit-outer-spin-button,
.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-amount .input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-amount .input:focus {
    border-color: #ff647f;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mika-color-primary) 8%, transparent);
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-all {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--mika-color-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-limit {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8991a1;
    font-size: 12px;
    line-height: 1.4;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-fee {
    margin: -6px 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f5f7fb;
    display: grid;
    gap: 8px;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-fee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #5b6472;
    line-height: 1.4;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-fee-row em {
    font-style: normal;
    color: #303746;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-fee-row.is-arrive {
    padding-top: 8px;
    border-top: 1px dashed #d8dee8;
    color: #303746;
    font-weight: 600;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-fee-row.is-arrive strong {
    color: var(--mika-color-primary, #2f6bff);
    font-size: 15px;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 18px;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #303746;
    cursor: pointer;
    user-select: none;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-radio {
    width: 18px;
    height: 18px;
    border: 2px solid #cfd5de;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    flex: 0 0 auto;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-method.active .mika-wd-radio {
    border-color: var(--mika-color-primary);
    background: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-method.active .mika-wd-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mika-color-surface, #fff);
    transform: translate(-50%, -50%);
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-method .ri-alipay-fill {
    color: #1677ff;
    font-size: 20px;
    line-height: 1;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-method .ri-wechat-pay-fill {
    color: #07c160;
    font-size: 20px;
    line-height: 1;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-method em {
    font-style: normal;
    font-weight: 500;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 148px;
    margin-bottom: 20px;
    padding: 28px 16px;
    border: 1px dashed #d1d5db;
    border-radius: var(--mika-radius, 14px);
    background: #fafbfc;
    cursor: pointer;
    color: #303746;
    box-sizing: border-box;
    text-align: center;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-upload.has-preview {
    padding: 12px;
    background: var(--mika-color-surface, #fff);
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-upload-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffe5ea;
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-upload-ico i {
    font-size: 22px;
    color: var(--mika-color-primary);
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-upload strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--mika-color-text, #171b26);
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-upload-hint {
    font-size: 12px;
    color: #8991a1;
    line-height: 1.45;
    max-width: 280px;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-preview {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-actions {
    margin: 0;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-submit {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--mika-color-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--mika-color-primary) 22%, transparent);
    cursor: pointer;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.app-layout-active .mika-modal-content:has(.withdrawal-container) .mika-wd-tip {
    margin-top: 14px;
    text-align: center;
    color: #8991a1;
    font-size: 12px;
    line-height: 1.5;
}