/* template101_vip_payment
 * Independent visual layer shared by Traditional Chinese, Japanese and Korean.
 * Structure and behavior remain owned by the original template files.
 */

.payment-template-theme {
    --payment-ink: #102c31;
    --payment-ink-soft: #38545a;
    --payment-muted: #71858a;
    --payment-bg: #f2f7f5;
    --payment-paper: #fffdf9;
    --payment-surface: #ffffff;
    --payment-line: #dce8e4;
    --payment-navy: #0b2c35;
    --payment-teal: #0b9183;
    --payment-teal-dark: #087267;
    --payment-mint: #dff5ef;
    --payment-gold: #dda840;
    --payment-gold-soft: #fff2d2;
    --payment-danger: #db5a53;
    --payment-shadow: 0 18px 50px rgba(16, 44, 49, .10);
    --payment-shadow-soft: 0 8px 28px rgba(16, 44, 49, .08);
    color: var(--payment-ink);
    background: var(--payment-bg);
}

.payment-template-theme body {
    color: var(--payment-ink);
    background:
        radial-gradient(circle at 8% 4%, rgba(11, 145, 131, .10), transparent 30rem),
        radial-gradient(circle at 92% 12%, rgba(221, 168, 64, .11), transparent 28rem),
        var(--payment-bg) !important;
    font-family: Inter, "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

html.payment-template-theme,
.payment-template-theme body,
.payment-template-theme .pcMain,
.payment-template-theme .h5Main,
.payment-template-theme .page-pc-only,
.payment-template-theme .page-h5-only {
    background-color: var(--payment-bg) !important;
}

.payment-template-theme .pcMain {
    background-image:
        radial-gradient(circle at 5% 7%, rgba(11, 145, 131, .08), transparent 26rem),
        radial-gradient(circle at 95% 16%, rgba(221, 168, 64, .08), transparent 24rem) !important;
    background-repeat: no-repeat !important;
}

.payment-template-theme .pcMain .contains,
.payment-template-theme .pcMain .content,
.payment-template-theme .pcMain .contentBar,
.payment-template-theme .h5Main > .container,
.payment-template-theme .h5Main .main {
    background-color: transparent !important;
}

.payment-template-theme .h5Main > .container,
.payment-template-theme .h5Main .container {
    background: var(--payment-bg) !important;
}

.payment-template-theme .h5Main .main {
    background:
        radial-gradient(circle at 0 0, rgba(11, 145, 131, .08), transparent 18rem),
        var(--payment-bg) !important;
}

.payment-template-theme .h5Main .vip-new,
.payment-template-theme .h5Main .vip-read,
.payment-template-theme .h5Main .common-bgc {
    background: linear-gradient(180deg, #dff5ef 0, #ffffff 11%, #ffffff 100%) !important;
    border: 1px solid var(--payment-line) !important;
    box-shadow: var(--payment-shadow-soft) !important;
}

.payment-template-theme .h5Main .tabs,
.payment-template-theme .h5Main .hot-wrapper,
.payment-template-theme .h5Main .newest-wrapper {
    background-color: #fff !important;
    border: 1px solid var(--payment-line) !important;
    box-shadow: var(--payment-shadow-soft) !important;
}

.payment-template-theme a {
    color: inherit;
}

.payment-template-theme ::selection {
    color: #fff;
    background: var(--payment-teal);
}

.payment-template-theme :focus-visible {
    outline: 3px solid rgba(11, 145, 131, .28);
    outline-offset: 2px;
}

/* Header and desktop navigation */
.payment-template-theme .pcMain header,
.payment-template-theme .pcMain .header,
.payment-template-theme .h5Main header,
.payment-template-theme .h5Main .header {
    color: var(--payment-ink) !important;
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid rgba(11, 44, 53, .08) !important;
    box-shadow: 0 10px 35px rgba(16, 44, 49, .06) !important;
    backdrop-filter: blur(18px);
}

.payment-template-theme .pcMain .headerInner {
    min-height: 72px;
}

.payment-template-theme .pcMain .logo img,
.payment-template-theme .h5Main .logo img {
    filter: saturate(.65) hue-rotate(105deg) contrast(1.05);
}

.payment-template-theme .pcMain .headerSearch,
.payment-template-theme .pcMain .searchBox,
.payment-template-theme .h5Main .searchBar,
.payment-template-theme .h5Main .searchBox {
    overflow: hidden;
    background: #f5f9f8 !important;
    border: 1px solid var(--payment-line) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.payment-template-theme input,
.payment-template-theme textarea,
.payment-template-theme select {
    color: var(--payment-ink) !important;
    accent-color: var(--payment-teal);
}

.payment-template-theme input:focus,
.payment-template-theme textarea:focus,
.payment-template-theme select:focus {
    border-color: var(--payment-teal) !important;
    box-shadow: 0 0 0 4px rgba(11, 145, 131, .12) !important;
}

.payment-template-theme .pcMain nav {
    background: var(--payment-navy) !important;
    border: 0 !important;
    box-shadow: 0 14px 34px rgba(11, 44, 53, .18) !important;
}

.payment-template-theme .pcMain nav::before {
    display: none !important;
}

.payment-template-theme .pcMain nav ul.navlist > li,
.payment-template-theme .pcMain nav ul.navlist > li > a {
    color: rgba(255, 255, 255, .78) !important;
}

.payment-template-theme .pcMain nav ul.navlist > li:hover,
.payment-template-theme .pcMain nav ul.navlist > li:hover > a,
.payment-template-theme .pcMain nav ul.navlist > li.active,
.payment-template-theme .pcMain nav ul.navlist > li.active > a,
.payment-template-theme .pcMain nav ul.navlist > li.current,
.payment-template-theme .pcMain nav ul.navlist > li.current > a {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
}

.payment-template-theme .pcMain nav ul.navlist > li:hover::after,
.payment-template-theme .pcMain nav ul.navlist > li.active::after,
.payment-template-theme .pcMain nav ul.navlist > li.current::after {
    background: var(--payment-gold) !important;
}

.payment-template-theme .pcMain .allNavList,
.payment-template-theme .pcMain .navChild,
.payment-template-theme .pcMain .dropdown-menu {
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid var(--payment-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--payment-shadow) !important;
}

.payment-template-theme .pcMain .allNavList a:hover,
.payment-template-theme .pcMain .navChild a:hover,
.payment-template-theme .pcMain .dropdown-menu a:hover {
    color: var(--payment-teal-dark) !important;
    background: var(--payment-mint) !important;
}

/* Distinct floating topbar */
@media (min-width: 1025px) {
    .payment-template-theme .pcMain header,
    .payment-template-theme .pcMain .header {
        padding: 16px 0 12px !important;
        background:
            radial-gradient(circle at 12% 0, rgba(221, 168, 64, .22), transparent 20rem),
            linear-gradient(115deg, #071f27, #0c4c4b 62%, #0b6159) !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    .payment-template-theme .pcMain .headerInner {
        width: min(1180px, calc(100% - 48px)) !important;
        height: 72px !important;
        min-height: 72px !important;
        padding: 0 18px 0 22px !important;
        margin: 0 auto !important;
        background: rgba(255, 255, 255, .97) !important;
        border: 1px solid rgba(255, 255, 255, .58) !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 46px rgba(2, 24, 29, .24) !important;
        box-sizing: border-box !important;
    }

    .payment-template-theme .pcMain .headerLogo {
        display: flex !important;
        align-items: center !important;
        min-width: 190px !important;
        height: 48px !important;
        padding: 0 16px !important;
        background: linear-gradient(135deg, #f4faf8, #e8f5f1) !important;
        border: 1px solid rgba(11, 145, 131, .13) !important;
        border-radius: 15px !important;
        box-sizing: border-box !important;
    }

    .payment-template-theme .pcMain .headerLogo a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    .payment-template-theme .pcMain .headerLogo img {
        width: auto !important;
        max-width: 158px !important;
        height: 38px !important;
        object-fit: contain !important;
        filter: none !important;
    }

    .payment-template-theme .pcMain .headerSearch {
        width: min(390px, 34vw) !important;
        height: 46px !important;
        padding: 0 !important;
        background: #edf6f3 !important;
        border: 1px solid transparent !important;
        border-radius: 15px !important;
        box-shadow: inset 0 0 0 1px rgba(11, 44, 53, .04) !important;
    }

    .payment-template-theme #pcNavVueApp .pcNavVueSearchBox,
    .payment-template-theme .pcMain .headerSearch .layui-input-group {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 7px 0 18px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: inherit !important;
        box-sizing: border-box !important;
    }

    .payment-template-theme #pcNavVueApp .pcNavVueSearchInput,
    .payment-template-theme .pcMain .headerSearch .layui-input {
        height: 100% !important;
        padding: 0 !important;
        color: var(--payment-ink) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .payment-template-theme #pcNavVueApp .pcNavVueSearchAction,
    .payment-template-theme .pcMain .headerSearch .layui-input-suffix {
        position: static !important;
        display: flex !important;
        flex: 0 0 34px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        background: var(--payment-teal) !important;
        border-radius: 11px !important;
        box-shadow: 0 7px 16px rgba(11, 145, 131, .22) !important;
    }

    .payment-template-theme #pcNavVueApp .pcNavVueSearchAction a,
    .payment-template-theme .pcMain .headerSearch .layui-input-suffix a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
    }

    .payment-template-theme #pcNavVueApp .pcNavVueSearchAction img,
    .payment-template-theme .pcMain .headerSearch .layui-input-suffix img {
        width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
        filter: brightness(0) invert(1) !important;
    }

    .payment-template-theme .pcMain .headerUser {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: 18px !important;
    }

    .payment-template-theme .pcMain .headerUser .userItem {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 5px 10px 5px 7px !important;
        background: #f4f8f7 !important;
        border: 1px solid rgba(11, 44, 53, .07) !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        transition: color .18s ease, background .18s ease, transform .18s ease, border-color .18s ease !important;
    }

    .payment-template-theme .pcMain .headerUser .userItem:hover {
        color: var(--payment-teal-dark) !important;
        background: var(--payment-mint) !important;
        border-color: rgba(11, 145, 131, .20) !important;
        transform: translateY(-2px) !important;
    }

    .payment-template-theme .pcMain .headerUser .userItem > img,
    .payment-template-theme .pcMain .pcNavNoticeIconWrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 7px 0 0 !important;
        background: #fff !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 12px rgba(16, 44, 49, .08) !important;
        object-fit: contain !important;
    }

    .payment-template-theme .pcMain .headerUser .userItem > img {
        padding: 7px !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: brightness(0) saturate(100%) invert(42%) sepia(43%) saturate(1115%) hue-rotate(122deg) brightness(92%) contrast(92%) !important;
        box-sizing: border-box !important;
    }

    .payment-template-theme .pcMain .pcNavNoticeIconWrap img {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        filter: brightness(0) saturate(100%) invert(42%) sepia(43%) saturate(1115%) hue-rotate(122deg) brightness(92%) contrast(92%) !important;
    }

    .payment-template-theme .pcMain .headerUser .userItem:hover > img,
    .payment-template-theme .pcMain .headerUser .userItem:hover .pcNavNoticeIconWrap img {
        filter: brightness(0) saturate(100%) invert(65%) sepia(79%) saturate(447%) hue-rotate(359deg) brightness(91%) contrast(90%) !important;
    }

    .payment-template-theme .pcMain .pcNavNoticeIconWrap .noticeUnreadBadge {
        color: var(--payment-navy) !important;
        background: var(--payment-gold) !important;
        border-color: #fff !important;
    }

    .payment-template-theme .pcMain .headerUser .userItem > a {
        margin: 0 4px 0 0 !important;
        color: var(--payment-ink-soft) !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        white-space: nowrap !important;
    }

    .payment-template-theme .pcMain .headerUser .userItem:hover > a {
        color: var(--payment-teal-dark) !important;
    }

    .payment-template-theme .pcMain nav {
        height: 58px !important;
        padding: 0 0 12px !important;
        background: linear-gradient(115deg, #071f27, #0c4c4b 62%, #0b6159) !important;
        box-shadow: 0 12px 30px rgba(2, 24, 29, .16) !important;
        box-sizing: border-box !important;
    }

    .payment-template-theme .pcMain nav ul.navlist {
        width: min(1180px, calc(100% - 48px)) !important;
        height: 46px !important;
        padding: 5px 8px !important;
        margin: 0 auto !important;
        gap: 4px !important;
        background: rgba(255, 255, 255, .09) !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        border-radius: 15px !important;
        box-sizing: border-box !important;
        backdrop-filter: blur(12px);
    }

    .payment-template-theme .pcMain nav ul.navlist > li,
    .payment-template-theme .pcMain nav ul.navlist > li > a {
        height: 36px !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    .payment-template-theme .pcMain nav ul.navlist > li > a {
        padding: 0 15px !important;
    }

    .payment-template-theme .pcMain nav ul.navlist > li::before {
        display: none !important;
    }

    .payment-template-theme .pcMain nav ul.navlist > li:hover,
    .payment-template-theme .pcMain nav ul.navlist > li.active,
    .payment-template-theme .pcMain nav ul.navlist > li.current {
        background: rgba(255, 255, 255, .12) !important;
    }
}

/* General content surfaces */
.payment-template-theme .pcMain .contains,
.payment-template-theme .pcMain .container,
.payment-template-theme .h5Main .contains,
.payment-template-theme .h5Main .container,
.payment-template-theme .main {
    color: var(--payment-ink);
}

.payment-template-theme .pcMain .cardBox,
.payment-template-theme .pcMain .contentBar,
.payment-template-theme .pcMain .cardBar,
.payment-template-theme .pcMain .rankingBox,
.payment-template-theme .pcMain .mainList,
.payment-template-theme .pcMain .sliderList,
.payment-template-theme .h5Main .bookItem,
.payment-template-theme .h5Main .rankBox,
.payment-template-theme .h5Main .chapterBar,
.payment-template-theme .h5Main .bookInfoBar {
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid var(--payment-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--payment-shadow-soft) !important;
}

.payment-template-theme .pcMain .cardBox,
.payment-template-theme .pcMain .bookItem,
.payment-template-theme .pcMain li.listItem,
.payment-template-theme .h5Main .bookItem {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.payment-template-theme .pcMain .cardBox:hover,
.payment-template-theme .pcMain .bookItem:hover,
.payment-template-theme .pcMain li.listItem:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 145, 131, .35) !important;
    box-shadow: 0 18px 40px rgba(16, 44, 49, .13) !important;
}

.payment-template-theme .pcMain .imgItem img,
.payment-template-theme .pcMain .bookImage img,
.payment-template-theme .pcMain .bookItemImg img,
.payment-template-theme .h5Main .bookImg img,
.payment-template-theme .h5Main .bookItemImg img,
.payment-template-theme .h5Main .bookBaseInfo img {
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(11, 44, 53, .14);
}

.payment-template-theme h1,
.payment-template-theme h2,
.payment-template-theme h3,
.payment-template-theme h4,
.payment-template-theme .title,
.payment-template-theme .bookName {
    color: var(--payment-ink) !important;
    letter-spacing: -.01em;
}

.payment-template-theme .pcMain .fullLine::before,
.payment-template-theme .pcMain .title::before,
.payment-template-theme .h5Main .title::before,
.payment-template-theme .section-title::before {
    background: linear-gradient(180deg, var(--payment-gold), var(--payment-teal)) !important;
    border-radius: 99px !important;
}

.payment-template-theme .bookTags span,
.payment-template-theme .bookItemTag span,
.payment-template-theme .tag,
.payment-template-theme .label,
.payment-template-theme .badge {
    color: var(--payment-teal-dark) !important;
    background: var(--payment-mint) !important;
    border: 1px solid rgba(11, 145, 131, .15) !important;
    border-radius: 999px !important;
}

.payment-template-theme .bookItemAuthor,
.payment-template-theme .bookItemDesc,
.payment-template-theme .bookDesc,
.payment-template-theme .desc,
.payment-template-theme .intro,
.payment-template-theme .gray,
.payment-template-theme .subTitle {
    color: var(--payment-muted) !important;
}

.payment-template-theme .tabs,
.payment-template-theme .layui-tab-title {
    background: #e8f1ee !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 4px !important;
}

.payment-template-theme .tabs .active,
.payment-template-theme .tab.active,
.payment-template-theme .layui-tab-title .layui-this {
    color: var(--payment-teal-dark) !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 14px rgba(16, 44, 49, .08) !important;
}

.payment-template-theme .layui-tab-title .layui-this::after {
    border: 0 !important;
}

/* Buttons */
.payment-template-theme button,
.payment-template-theme .btn,
.payment-template-theme .button,
.payment-template-theme input[type="button"],
.payment-template-theme input[type="submit"] {
    border-radius: 12px;
}

.payment-template-theme .bookButtons a,
.payment-template-theme .bookBtn a,
.payment-template-theme .primaryBtn,
.payment-template-theme .primary-btn,
.payment-template-theme .submitBtn,
.payment-template-theme .submit-btn,
.payment-template-theme .payButton,
.payment-template-theme .rechargeCenterSubmitFigma,
.payment-template-theme .userCenterRechargeBtnFigma,
.payment-template-theme .payment-btn,
.payment-template-theme .guest-book-payment-btn {
    color: #fff !important;
    background: linear-gradient(135deg, var(--payment-teal), var(--payment-teal-dark)) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 24px rgba(11, 145, 131, .24) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.payment-template-theme .bookButtons a:hover,
.payment-template-theme .bookBtn a:hover,
.payment-template-theme .primaryBtn:hover,
.payment-template-theme .primary-btn:hover,
.payment-template-theme .submitBtn:hover,
.payment-template-theme .submit-btn:hover,
.payment-template-theme .payment-btn:hover,
.payment-template-theme .guest-book-payment-btn:hover {
    filter: brightness(1.04);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(11, 145, 131, .30) !important;
}

.payment-template-theme .secondaryBtn,
.payment-template-theme .secondary-btn,
.payment-template-theme .bookButtons a + a,
.payment-template-theme .bookBtn a + a {
    color: var(--payment-teal-dark) !important;
    background: #fff !important;
    border: 1px solid rgba(11, 145, 131, .28) !important;
    box-shadow: none !important;
}

/* User and recharge centers */
.payment-template-theme .userCenterPageFigma,
.payment-template-theme .rechargeCenterPageFigma {
    color: var(--payment-ink) !important;
    background: transparent !important;
}

.payment-template-theme .userCenterCardFigma,
.payment-template-theme .userCenterWalletFigma,
.payment-template-theme .userCenterMenuFigma,
.payment-template-theme .rechargeCenterBodyFigma,
.payment-template-theme .rechargeCenterFooterFigma {
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid var(--payment-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--payment-shadow-soft) !important;
}

.payment-template-theme .userCenterVipBannerFigma,
.payment-template-theme .rechargeCenterHeroFigma {
    color: #fff !important;
    background:
        radial-gradient(circle at 88% 15%, rgba(221, 168, 64, .38), transparent 10rem),
        linear-gradient(135deg, #0b2c35, #0d675f) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 44px rgba(11, 44, 53, .22) !important;
}

.payment-template-theme .userCenterVipBannerFigma *,
.payment-template-theme .rechargeCenterHeroFigma * {
    color: inherit;
}

.payment-template-theme .userCenterMenuItemFigma {
    border-color: var(--payment-line) !important;
}

.payment-template-theme .userCenterMenuItemFigma:hover {
    background: #f2faf7 !important;
}

.payment-template-theme .rechargeCenterSkuItemFigma,
.payment-template-theme .rechargeCenterPayItemFigma {
    color: var(--payment-ink) !important;
    background: #fff !important;
    border: 1px solid var(--payment-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 16px rgba(16, 44, 49, .05) !important;
}

.payment-template-theme .rechargeCenterSkuItemFigma.is-active,
.payment-template-theme .rechargeCenterPayItemFigma.is-active {
    background: linear-gradient(145deg, #fff, #e9faf5) !important;
    border-color: var(--payment-teal) !important;
    box-shadow: 0 0 0 3px rgba(11, 145, 131, .10), 0 12px 25px rgba(11, 145, 131, .12) !important;
}

.payment-template-theme .rechargeCenterSkuBadgeFigma {
    color: #5f4310 !important;
    background: var(--payment-gold-soft) !important;
    border-color: rgba(221, 168, 64, .35) !important;
}

/* Payment dialogs */
.payment-template-theme #payment,
.payment-template-theme #guest_book_payment,
.payment-template-theme .payment-container,
.payment-template-theme .guest-book-payment-container {
    color: var(--payment-ink) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(221, 168, 64, .12), transparent 18rem),
        linear-gradient(180deg, #fffefa, #fff) !important;
    border: 1px solid rgba(11, 145, 131, .16) !important;
    border-radius: 26px !important;
    box-shadow: 0 28px 75px rgba(11, 44, 53, .25) !important;
}

.payment-template-theme #payment::before,
.payment-template-theme #guest_book_payment::before,
.payment-template-theme .payment-container::before,
.payment-template-theme .guest-book-payment-container::before {
    content: "";
    display: block;
    width: 58px;
    height: 5px;
    margin: 0 auto 18px;
    background: linear-gradient(90deg, var(--payment-gold), var(--payment-teal));
    border-radius: 99px;
}

.payment-template-theme .payment-title,
.payment-template-theme .guest-book-payment-title {
    color: var(--payment-navy) !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
}

.payment-template-theme .pay_user,
.payment-template-theme .payment-subtitle,
.payment-template-theme .payment-server,
.payment-template-theme .guest-book-payment-subtitle {
    color: var(--payment-muted) !important;
}

.payment-template-theme .payment-checkbox-item,
.payment-template-theme .payment-pay-item,
.payment-template-theme .payment-coupon,
.payment-template-theme .guest-book-payment-item {
    color: var(--payment-ink) !important;
    background: #fff !important;
    border: 1px solid var(--payment-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 18px rgba(16, 44, 49, .05) !important;
}

.payment-template-theme .payment-checkbox-item:has(.post_checkbox:checked),
.payment-template-theme .payment-checkbox-item.active,
.payment-template-theme .payment-checkbox-item.selected,
.payment-template-theme .payment-pay-item.active,
.payment-template-theme .payment-pay-item.selected,
.payment-template-theme .guest-book-payment-item.active,
.payment-template-theme .guest-book-payment-item.selected {
    background: linear-gradient(145deg, #fff, #e9faf5) !important;
    border-color: var(--payment-teal) !important;
    box-shadow: 0 0 0 3px rgba(11, 145, 131, .10), 0 12px 28px rgba(11, 145, 131, .12) !important;
}

.payment-template-theme .post_checkbox,
.payment-template-theme .pay_bingo,
.payment-template-theme .payment-agreement-check input {
    accent-color: var(--payment-teal) !important;
}

.payment-template-theme .payment-card-name,
.payment-template-theme .post_pay_price,
.payment-template-theme .guest-book-payment-price {
    color: var(--payment-navy) !important;
}

.payment-template-theme .payment-coupon {
    background: var(--payment-gold-soft) !important;
    border-style: dashed !important;
    border-color: rgba(221, 168, 64, .62) !important;
}

.payment-template-theme .retention-saving,
.payment-template-theme .payment-saving,
.payment-template-theme .discount-tag {
    color: #6e4d0c !important;
    background: var(--payment-gold-soft) !important;
    border-color: rgba(221, 168, 64, .35) !important;
    border-radius: 999px !important;
}

.payment-template-theme .payment-pay-container {
    background: #edf4f2 !important;
    border-radius: 18px !important;
}

.payment-template-theme .payment-agreement-check {
    color: var(--payment-muted) !important;
}

/* Chapter reader and mobile chrome */
.payment-template-theme #chapterReaderH5App,
.payment-template-theme .novelread,
.payment-template-theme .chapterContent,
.payment-template-theme .readbookbox {
    color: var(--payment-ink);
}

.payment-template-theme #chapterReaderH5App .headerInner,
.payment-template-theme #chapterReaderH5App .chapterFooter,
.payment-template-theme #chapterReaderH5App .bottomBar,
.payment-template-theme .h5Main .bottomNav,
.payment-template-theme .h5Main .footerNav {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(11, 44, 53, .10) !important;
    box-shadow: 0 -12px 34px rgba(11, 44, 53, .09) !important;
    backdrop-filter: blur(18px);
}

.payment-template-theme .chapterList li,
.payment-template-theme .chapter-list li {
    border-color: var(--payment-line) !important;
}

.payment-template-theme .chapterList li:hover,
.payment-template-theme .chapter-list li:hover {
    color: var(--payment-teal-dark) !important;
    background: #f0faf7 !important;
}

/* Sign-in, registration and order lookup */
.payment-template-theme .registerBox,
.payment-template-theme .contentBox,
.payment-template-theme .order_main,
.payment-template-theme .order_item {
    color: var(--payment-ink) !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid var(--payment-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--payment-shadow) !important;
}

.payment-template-theme .stepBox {
    background: #eaf3f0 !important;
    border-radius: 14px !important;
}

.payment-template-theme .stepItem.active,
.payment-template-theme .stepItem.active .stepNumber {
    color: #fff !important;
    background: var(--payment-teal) !important;
    border-color: var(--payment-teal) !important;
}

.payment-template-theme .layui-input,
.payment-template-theme .search_box {
    color: var(--payment-ink) !important;
    background: #f7faf9 !important;
    border: 1px solid var(--payment-line) !important;
    border-radius: 12px !important;
}

.payment-template-theme .layui-btn,
.payment-template-theme .search_btn,
.payment-template-theme .reBtn {
    color: #fff !important;
    background: linear-gradient(135deg, var(--payment-teal), var(--payment-teal-dark)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 24px rgba(11, 145, 131, .22) !important;
}

.payment-template-theme .top_container {
    color: #fff !important;
    background:
        radial-gradient(circle at 75% 0, rgba(221, 168, 64, .40), transparent 18rem),
        linear-gradient(135deg, var(--payment-navy), #0d6b63) !important;
    border-radius: 0 0 32px 32px !important;
}

.payment-template-theme .top_container .title {
    color: #fff !important;
}

/* Standalone policy pages */
.payment-template-theme .policy-shell {
    color: var(--payment-ink) !important;
    background:
        radial-gradient(circle at 4% 0, rgba(11, 145, 131, .14), transparent 24rem),
        radial-gradient(circle at 96% 4%, rgba(221, 168, 64, .15), transparent 24rem),
        var(--payment-bg) !important;
}

.payment-template-theme .policy-topbar,
.payment-template-theme .policy-nav-card,
.payment-template-theme .policy-side-card,
.payment-template-theme .policy-content-card,
.payment-template-theme .policy-meta-card,
.payment-template-theme .policy-contact-card {
    background: rgba(255, 255, 255, .95) !important;
    border: 1px solid var(--payment-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--payment-shadow-soft) !important;
}

.payment-template-theme .policy-hero {
    color: #fff !important;
    background:
        radial-gradient(circle at 84% 8%, rgba(221, 168, 64, .42), transparent 18rem),
        linear-gradient(135deg, var(--payment-navy), #0c6d64) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 26px !important;
    box-shadow: 0 24px 60px rgba(11, 44, 53, .20) !important;
}

.payment-template-theme .policy-hero *,
.payment-template-theme .policy-title,
.payment-template-theme .policy-lead {
    color: inherit !important;
}

.payment-template-theme .policy-brand-mark,
.payment-template-theme .policy-chip,
.payment-template-theme .policy-status {
    color: var(--payment-teal-dark) !important;
    background: var(--payment-mint) !important;
    border-color: rgba(11, 145, 131, .18) !important;
}

.payment-template-theme .policy-nav-link.is-active,
.payment-template-theme .policy-nav-link.active,
.payment-template-theme .policy-nav-link:hover {
    color: #fff !important;
    background: var(--payment-teal) !important;
    border-radius: 12px !important;
}

.payment-template-theme .policy-gradient-text {
    color: var(--payment-gold) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.payment-template-theme .policy-section-title,
.payment-template-theme .policy-content-title,
.payment-template-theme .policy-nav-title {
    color: var(--payment-navy) !important;
}

.payment-template-theme .policy-section-content,
.payment-template-theme .policy-summary,
.payment-template-theme .policy-footnote,
.payment-template-theme .policy-meta-row {
    color: var(--payment-muted) !important;
}

/* Shared overlays and notifications */
.payment-template-theme .layui-layer,
.payment-template-theme .van-popup,
.payment-template-theme .modal-content,
.payment-template-theme .dialog-content {
    color: var(--payment-ink) !important;
    background: var(--payment-paper) !important;
    border: 1px solid rgba(11, 145, 131, .14) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(11, 44, 53, .25) !important;
}

.payment-template-theme .layui-layer-btn a,
.payment-template-theme .van-button--primary,
.payment-template-theme .dialog-confirm {
    color: #fff !important;
    background: var(--payment-teal) !important;
    border-color: var(--payment-teal) !important;
    border-radius: 10px !important;
}

.payment-template-theme .layui-layer-btn .layui-layer-btn1,
.payment-template-theme .dialog-cancel {
    color: var(--payment-teal-dark) !important;
    background: #fff !important;
    border-color: var(--payment-line) !important;
}

/* Footer */
.payment-template-theme .fakeSiteFooter,
.payment-template-theme footer.footer,
.payment-template-theme .pcMain footer {
    color: rgba(255, 255, 255, .72) !important;
    background: var(--payment-navy) !important;
    border-top: 4px solid var(--payment-teal) !important;
}

.payment-template-theme .fakeSiteFooter {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 34px !important;
    background:
        radial-gradient(circle at 15% -30%, rgba(11, 145, 131, .48), transparent 25rem),
        radial-gradient(circle at 86% 130%, rgba(221, 168, 64, .22), transparent 24rem),
        var(--payment-navy) !important;
    border-top: 0 !important;
}

.payment-template-theme .fakeSiteFooter::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: min(1180px, calc(100% - 48px)) !important;
    height: 3px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(90deg, transparent, var(--payment-teal) 24%, var(--payment-gold) 72%, transparent) !important;
    border-radius: 0 0 99px 99px !important;
}

.payment-template-theme .fakeSiteFooterInner {
    position: relative !important;
    z-index: 1 !important;
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    min-height: 158px !important;
    padding: 38px 32px 30px !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.payment-template-theme .fakeSiteFooterLinks {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.payment-template-theme .fakeSiteFooterLink {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 17px !important;
    color: rgba(255, 255, 255, .78) !important;
    background: rgba(255, 255, 255, .065) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 20px !important;
    text-decoration: none !important;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease !important;
}

.payment-template-theme .fakeSiteFooterLink:hover {
    color: var(--payment-navy) !important;
    background: var(--payment-gold) !important;
    border-color: var(--payment-gold) !important;
    transform: translateY(-2px) !important;
}

.payment-template-theme .fakeSiteFooterCopy {
    max-width: 820px !important;
    margin: 25px auto 0 !important;
    padding-top: 20px !important;
    color: rgba(255, 255, 255, .48) !important;
    border-top: 1px solid rgba(255, 255, 255, .09) !important;
    font-size: 12px !important;
    line-height: 20px !important;
    letter-spacing: .04em !important;
    text-align: center !important;
}

.payment-template-theme .fakeSiteFooter a,
.payment-template-theme footer.footer a,
.payment-template-theme .pcMain footer a {
    color: rgba(255, 255, 255, .84) !important;
}

.payment-template-theme .fakeSiteFooter a:hover,
.payment-template-theme footer.footer a:hover,
.payment-template-theme .pcMain footer a:hover {
    color: #fff !important;
}

.payment-template-theme .fakeSiteFooter__brand,
.payment-template-theme .fakeSiteFooter__title,
.payment-template-theme .fakeSiteFooter strong {
    color: var(--payment-gold) !important;
}

@media (max-width: 1024px) {
    .payment-template-theme body {
        background:
            radial-gradient(circle at 0 0, rgba(11, 145, 131, .12), transparent 18rem),
            var(--payment-bg) !important;
    }

    .payment-template-theme .h5Main .top {
        padding: 10px 10px 11px !important;
        background:
            radial-gradient(circle at 8% -20%, rgba(221, 168, 64, .40), transparent 12rem),
            linear-gradient(118deg, #071f27, #0b5f58) !important;
        border-radius: 0 0 22px 22px !important;
        box-shadow: 0 12px 28px rgba(2, 24, 29, .20) !important;
    }

    .payment-template-theme .h5Main .top .header,
    .payment-template-theme .h5Main .top #search_close.header,
    .payment-template-theme .h5Main .top #search_open.header {
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 7px 8px 7px 10px !important;
        background: rgba(255, 255, 255, .10) !important;
        border: 1px solid rgba(255, 255, 255, .13) !important;
        border-radius: 17px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
        box-sizing: border-box !important;
        backdrop-filter: blur(14px);
    }

    .payment-template-theme .h5Main .top .header-left {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 82px !important;
        height: 42px !important;
        padding: 0 10px !important;
        background: rgba(255, 255, 255, .96) !important;
        border-radius: 13px !important;
        box-sizing: border-box !important;
    }

    .payment-template-theme .h5Main .top .header-left > img,
    .payment-template-theme .h5Main .top .header-left > a > img {
        width: auto !important;
        max-width: 122px !important;
        height: 27px !important;
        object-fit: contain !important;
    }

    .payment-template-theme .h5Main .top .header-right {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        min-width: 0 !important;
        margin-left: 7px !important;
    }

    .payment-template-theme .h5Main .top #search_close .header-right-service,
    .payment-template-theme .h5Main .top #search_close .header-right > a {
        display: inline-flex;
        flex: 0 0 39px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 39px !important;
        height: 39px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, .11) !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .payment-template-theme .h5Main .top #search_close .header-right-service img,
    .payment-template-theme .h5Main .top #search_close .header-right > a img {
        width: 19px !important;
        height: 19px !important;
        margin: 0 !important;
        object-fit: contain !important;
        filter: brightness(0) invert(1) !important;
    }

    .payment-template-theme .h5Main .top #search_close .header-right-service p,
    .payment-template-theme .h5Main .top #search_close .header-right > a p {
        display: block !important;
    }

    .payment-template-theme .h5Main .top .search_container {
        flex: 1 1 96px !important;
        width: auto !important;
        min-width: 76px !important;
        max-width: 150px !important;
        height: 39px !important;
        padding: 0 11px !important;
        margin: 0 !important;
        gap: 7px !important;
        background: rgba(255, 255, 255, .12) !important;
        border: 1px solid rgba(255, 255, 255, .15) !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .payment-template-theme .h5Main .top .search_container img {
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        filter: brightness(0) invert(1) !important;
    }

    .payment-template-theme .h5Main .top .search_container input {
        min-width: 0 !important;
        height: 37px !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #fff !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 12px !important;
    }

    .payment-template-theme .h5Main .top .search_container input::placeholder {
        color: rgba(255, 255, 255, .64) !important;
    }

    .payment-template-theme .h5Main .top #search_open .search_form {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin-left: 7px !important;
    }

    .payment-template-theme .h5Main .top #search_open .search_container {
        max-width: none !important;
    }

    .payment-template-theme .h5Main .top #search_open .search_btn {
        height: 38px !important;
        padding: 0 13px !important;
        line-height: 38px !important;
        color: var(--payment-navy) !important;
        background: var(--payment-gold) !important;
        border-radius: 11px !important;
        box-shadow: none !important;
    }

    .payment-template-theme .h5Main > header,
    .payment-template-theme .h5Main header {
        padding: 10px 12px !important;
        background:
            radial-gradient(circle at 10% 0, rgba(221, 168, 64, .28), transparent 13rem),
            linear-gradient(115deg, #071f27, #0c5a55) !important;
        border: 0 !important;
        box-shadow: 0 10px 28px rgba(2, 24, 29, .18) !important;
        box-sizing: border-box !important;
    }

    .payment-template-theme .h5Main .headerInner,
    .payment-template-theme .h5Main .headerInner[style] {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 56px !important;
        height: 56px !important;
        padding: 0 8px 0 14px !important;
        background: rgba(255, 255, 255, .97) !important;
        border: 1px solid rgba(255, 255, 255, .58) !important;
        border-radius: 18px !important;
        box-shadow: 0 14px 34px rgba(2, 24, 29, .22) !important;
        box-sizing: border-box !important;
        backdrop-filter: blur(16px);
    }

    .payment-template-theme .h5Main .headerLeft,
    .payment-template-theme .h5Main .headerLogo,
    .payment-template-theme .h5Main .headerLogo a {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        height: 42px !important;
    }

    .payment-template-theme .h5Main .headerLogo img {
        width: auto !important;
        max-width: 150px !important;
        height: 30px !important;
        object-fit: contain !important;
        filter: none !important;
    }

    .payment-template-theme .h5Main .headerRight {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
    }

    .payment-template-theme .h5Main .headerIcon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 39px !important;
        height: 39px !important;
        margin: 0 !important;
        color: var(--payment-teal-dark) !important;
        background: #e8f6f2 !important;
        border: 1px solid rgba(11, 145, 131, .13) !important;
        border-radius: 13px !important;
        box-shadow: none !important;
    }

    .payment-template-theme .h5Main .headerIcon:last-child {
        color: #fff !important;
        background: var(--payment-teal) !important;
        border-color: var(--payment-teal) !important;
        box-shadow: 0 8px 16px rgba(11, 145, 131, .22) !important;
    }

    .payment-template-theme .h5Main .headerIcon svg,
    .payment-template-theme .h5Main .headerIcon path,
    .payment-template-theme .h5Main .headerIcon rect {
        fill: currentColor !important;
    }

    .payment-template-theme .h5Main .menuBox {
        color: #fff !important;
        background:
            radial-gradient(circle at 100% 0, rgba(221, 168, 64, .28), transparent 16rem),
            linear-gradient(160deg, #0b2c35, #0b5f58) !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        box-shadow: -20px 0 60px rgba(2, 24, 29, .34) !important;
    }

    .payment-template-theme .h5Main .menuList li a {
        color: rgba(255, 255, 255, .88) !important;
        background: rgba(255, 255, 255, .07) !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 14px !important;
    }

    .payment-template-theme .h5Main .menuImg {
        background: rgba(255, 255, 255, .12) !important;
        border-radius: 11px !important;
    }

    .payment-template-theme .h5Main .menuBtnBox a {
        color: var(--payment-navy) !important;
        background: var(--payment-gold) !important;
        border: 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 26px rgba(221, 168, 64, .22) !important;
    }

    .payment-template-theme .fakeSiteFooter {
        margin-top: 22px !important;
        border-radius: 22px 22px 0 0 !important;
    }

    .payment-template-theme .fakeSiteFooter::before {
        width: calc(100% - 40px) !important;
    }

    .payment-template-theme .fakeSiteFooterInner {
        width: 100% !important;
        min-height: 0 !important;
        padding: 28px 16px 24px !important;
    }

    .payment-template-theme .fakeSiteFooterLinks {
        justify-content: center !important;
        gap: 8px !important;
    }

    .payment-template-theme .fakeSiteFooterLink {
        width: auto !important;
        min-height: 34px !important;
        padding: 0 13px !important;
        font-size: 12px !important;
    }

    .payment-template-theme .fakeSiteFooterCopy {
        margin-top: 20px !important;
        padding-top: 17px !important;
        font-size: 11px !important;
        line-height: 18px !important;
    }

    .payment-template-theme .h5Main {
        color: var(--payment-ink);
        background: transparent !important;
    }

    .payment-template-theme .h5Main .headerInner {
        min-height: 58px;
    }

    .payment-template-theme .h5Main .searchBar,
    .payment-template-theme .h5Main .searchBox {
        border-radius: 12px !important;
    }

    .payment-template-theme .h5Main .bookItem,
    .payment-template-theme .h5Main .rankBox,
    .payment-template-theme .h5Main .chapterBar,
    .payment-template-theme .h5Main .bookInfoBar,
    .payment-template-theme .userCenterCardFigma,
    .payment-template-theme .userCenterWalletFigma,
    .payment-template-theme .userCenterMenuFigma,
    .payment-template-theme .rechargeCenterBodyFigma {
        border-radius: 16px !important;
        box-shadow: 0 8px 22px rgba(16, 44, 49, .07) !important;
    }

    .payment-template-theme #payment,
    .payment-template-theme #guest_book_payment,
    .payment-template-theme .payment-container,
    .payment-template-theme .guest-book-payment-container {
        border-radius: 24px 24px 0 0 !important;
        box-shadow: 0 -20px 54px rgba(11, 44, 53, .22) !important;
    }

    .payment-template-theme .payment-checkbox-item,
    .payment-template-theme .payment-pay-item,
    .payment-template-theme .guest-book-payment-item {
        border-radius: 14px !important;
    }

    .payment-template-theme .payment-btn,
    .payment-template-theme .guest-book-payment-btn,
    .payment-template-theme .rechargeCenterSubmitFigma {
        min-height: 50px;
        border-radius: 14px !important;
    }
}

/* Keep the selected card and its radio indicator visually consistent. */
.payment-template-theme .payment-pay-item,
.payment-template-theme .payment_v2_type_item {
    cursor: pointer;
    min-height: 48px;
    box-sizing: border-box;
}

.payment-template-theme .payment_v2_type_item {
    padding: 12px 38px 12px 12px;
    border: 1px solid var(--payment-line);
    border-radius: 12px;
}

.payment-template-theme .payment_v2_type_item.active {
    border-color: var(--payment-teal);
    background: #e9faf5;
}

.payment-template-theme .payment_v2_type_item .payment_v2_type_select {
    right: 12px;
}

.payment-template-theme .payment-pay-item:focus-visible,
.payment-template-theme .payment_v2_type_item:focus-visible {
    outline: 2px solid var(--payment-teal);
    outline-offset: 3px;
}

.payment-template-theme .mobile-nav-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1024px) {
    /* A separate search row leaves room for long logos and translated labels. */
    .payment-template-theme .h5Main .top #search_close.header:not(.hidden) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) repeat(3, 44px);
        grid-template-rows: auto auto;
        gap: 10px 6px !important;
        height: auto !important;
        padding: 10px !important;
    }

    .payment-template-theme .h5Main .top #search_close.hidden {
        display: none !important;
    }

    .payment-template-theme .h5Main .top #search_close .header-left {
        min-width: 0 !important;
        max-width: 160px !important;
        width: 100% !important;
        padding: 0 8px !important;
    }

    .payment-template-theme .h5Main .top #search_close .header-left img {
        max-width: 100% !important;
    }

    .payment-template-theme .h5Main .top #search_close .header-right {
        display: contents !important;
    }

    .payment-template-theme .h5Main .top #search_close .search_container {
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    .payment-template-theme .h5Main .top #search_close .search_container input {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    .payment-template-theme .h5Main .top #search_close .search_container,
    .payment-template-theme .h5Main .top #search_open .search_container {
        background: #edf8f5 !important;
    }

    .payment-template-theme .h5Main .top #search_close .search_container input,
    .payment-template-theme .h5Main .top #search_open .search_container input,
    .payment-template-theme .h5Main .top #search_close .search_container input::placeholder,
    .payment-template-theme .h5Main .top #search_open .search_container input::placeholder {
        color: #24534d !important;
    }

    .payment-template-theme .h5Main .top #search_close .search_container img,
    .payment-template-theme .h5Main .top #search_open .search_container img {
        filter: brightness(0) opacity(.7) !important;
    }

    .payment-template-theme .h5Main .top .header-right {
        gap: 8px !important;
    }

    .payment-template-theme .h5Main .top .header-right-service,
    .payment-template-theme .h5Main .top .header-right > a {
        color: #fff !important;
        margin-right: 0 !important;
        cursor: pointer;
    }

    .payment-template-theme .h5Main .top #search_close .header-right-service,
    .payment-template-theme .h5Main .top #search_close .header-right > a {
        width: 44px !important;
        height: 48px !important;
        flex-direction: column;
        gap: 3px;
    }

    .payment-template-theme .h5Main .top .header-right p,
    .payment-template-theme .h5Main .top #search_close .header-right p {
        display: block !important;
        max-width: 60px;
        margin: 0 !important;
        color: #fff !important;
        font-size: 11px !important;
        line-height: 16px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .payment-template-theme .h5Main .top #search_close .header-right p {
        max-width: 40px;
    }

    .payment-template-theme .h5Main .top .header-right-service img {
        filter: brightness(0) invert(1);
    }

    .payment-template-theme .h5Main .top .mobile-nav-icon * {
        fill: none !important;
    }

    .payment-template-theme .h5Main .headerContains:has(.headerTabs) {
        width: 100%;
        position: static;
        transform: none;
    }

    .payment-template-theme .h5Main .headerTabs {
        display: flex;
        gap: 6px;
        width: 100%;
        padding: 4px;
        box-sizing: border-box;
    }

    .payment-template-theme .h5Main .headerTabs a {
        flex: 1;
        min-width: 0;
        padding: 10px 8px !important;
        margin: 0 !important;
        color: #24534d !important;
        background: transparent !important;
        border-radius: 12px;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
    }

    .payment-template-theme .h5Main .headerTabs a.active {
        color: #fff !important;
        background: #087568 !important;
        font-weight: 700;
    }

    /* Login changes are layout-only; retain the existing input/button palette. */
    .payment-template-theme .h5Main.mobile-login-page .contains {
        padding: clamp(32px, 7vh, 64px) 24px 32px;
    }

    .payment-template-theme .mobile-login-page .demo-reg-container {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    .payment-template-theme .mobile-login-heading {
        margin: 0 0 28px;
        font-size: 24px;
        line-height: 1.4;
        font-weight: 700;
    }

    .payment-template-theme .mobile-login-page .layui-form-item {
        margin-bottom: 20px;
    }

    .payment-template-theme .mobile-login-page .layui-input-wrap {
        position: relative;
    }

    .payment-template-theme .mobile-login-page .layui-input-prefix {
        position: absolute;
        left: 12px;
        z-index: 1;
    }

    .payment-template-theme .mobile-login-page .layui-input {
        height: 52px;
        line-height: 52px;
        padding-left: 40px !important;
        padding-right: 48px !important;
        box-sizing: border-box;
    }

    .payment-template-theme .mobile-login-page #password_icon {
        right: 8px !important;
        padding: 10px;
        width: 44px !important;
        height: 44px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .payment-template-theme .mobile-login-page .layui-btn {
        margin-top: 4px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
    }

    .payment-template-theme .mobile-login-page .form-desc {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .payment-template-theme .mobile-login-page .form-desc a {
        float: none !important;
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 16px !important;
        text-align: center;
        font-size: 14px;
        min-height: 44px;
        box-sizing: border-box;
    }

    .payment-template-theme .mobile-login-page .form-desc::before,
    .payment-template-theme .mobile-login-page .form-desc::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .payment-template-theme *,
    .payment-template-theme *::before,
    .payment-template-theme *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}