/*
 * V13：个人信息、登录密码、支付密码统一顶部布局。
 * 仅做前端视觉覆盖和返回导航修复，不修改表单、接口及业务数据。
 */

html[data-mpp-v13] {
    --mpp-v13-title: #ffffff;
    --mpp-v13-subtitle: rgba(255,255,255,.84);
    --mpp-v13-control-bg: rgba(255,255,255,.14);
    --mpp-v13-control-border: rgba(255,255,255,.30);
}

html[data-mpp-v13] .mpp-v13-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 300px !important;
    height: 300px !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
}

html[data-mpp-v13="personal"] .mpp-v13-hero {
    min-height: 260px !important;
    height: 260px !important;
}

/* 清除旧 V11/V12 生成层，避免双重标题。 */
html[data-mpp-v13] #merchant-personal-layout-header-v12,
html[data-mpp-v13] #merchant-personal-header-v11,
html[data-mpp-v13] .mpi-v12-header,
html[data-mpp-v13] .mpi-v11-header {
    display: none !important;
}

/* 隐藏原页面纵向标题组；业务表单不在该组内。 */
html[data-mpp-v13] .mpp-v13-old-heading,
html[data-mpp-v13] .mpp-v13-old-heading-group {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html[data-mpp-v13] .mpp-v13-header {
    position: absolute !important;
    inset: 0 !important;
    z-index: 70 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 34px 104px 42px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    pointer-events: none !important;
}

html[data-mpp-v13] .mpp-v13-icon {
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 17px !important;
    color: #fff !important;
    background: rgba(255,255,255,.13) !important;
    box-shadow: 0 14px 34px rgba(3,14,34,.20) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
}

html[data-mpp-v13] .mpp-v13-icon svg {
    width: 27px !important;
    height: 27px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.9 !important;
}

html[data-mpp-v13] .mpp-v13-title {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--mpp-v13-title) !important;
    -webkit-text-fill-color: var(--mpp-v13-title) !important;
    font-size: clamp(28px,2.2vw,38px) !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    letter-spacing: .07em !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
}

html[data-mpp-v13] .mpp-v13-subtitle {
    display: block !important;
    width: auto !important;
    max-width: 760px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--mpp-v13-subtitle) !important;
    -webkit-text-fill-color: var(--mpp-v13-subtitle) !important;
    font-size: clamp(13px,1vw,16px) !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
}

html[data-mpp-v13] .mpp-v13-back {
    position: absolute !important;
    top: 50% !important;
    left: 32px !important;
    z-index: 90 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--mpp-v13-control-border) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: var(--mpp-v13-control-bg) !important;
    box-shadow: 0 10px 28px rgba(4,15,38,.23) !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html[data-mpp-v13] .mpp-v13-back svg {
    width: 23px !important;
    height: 23px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
}

html[data-mpp-v13] .mpp-v13-back:hover {
    background: rgba(255,255,255,.22) !important;
}

html[data-mpp-v13] .mpp-v13-content-card {
    position: relative !important;
    z-index: 80 !important;
}

@media (max-width: 760px) {
    html[data-mpp-v13] .mpp-v13-hero,
    html[data-mpp-v13="personal"] .mpp-v13-hero {
        min-height: 210px !important;
        height: 210px !important;
    }

    html[data-mpp-v13] .mpp-v13-header {
        gap: 8px !important;
        padding: 24px 62px 30px !important;
    }

    html[data-mpp-v13] .mpp-v13-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 15px !important;
    }

    html[data-mpp-v13] .mpp-v13-title {
        font-size: 24px !important;
        letter-spacing: .04em !important;
    }

    html[data-mpp-v13] .mpp-v13-subtitle {
        font-size: 13px !important;
        white-space: normal !important;
    }

    html[data-mpp-v13] .mpp-v13-back {
        left: 12px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 12px !important;
    }
}