/* Tianxuan page polish: enqueue after blacktech.css; front-end only. */
body,
body.dark-theme {
    color-scheme: dark;
    --tx-accent: #36f1bd;
    --tx-surface: #101718;
    --tx-text: #e5eeeb;
    --tx-muted: #9cafaa;
    --tx-border: #2a4037;
    /* Zibll defines these on body, so :root alone does not change native pages. */
    --theme-color: #36f1bd !important;
    --focus-color: #36f1bd !important;
    --focus-shadow-color: rgba(54, 241, 189, .18) !important;
    --focus-color-opacity05: rgba(54, 241, 189, .05);
    --focus-color-opacity1: rgba(54, 241, 189, .1);
    --focus-color-opacity2: rgba(54, 241, 189, .2);
    --focus-color-opacity3: rgba(54, 241, 189, .3);
    --focus-color-opacity4: rgba(54, 241, 189, .4);
    --key-color: #e8fff4;
    --main-color: #e5eeeb;
    --main-shadow: rgba(0, 0, 0, .18);
    --muted-color: #a4b7b0;
    --muted-2-color: #91a79c;
    --muted-3-color: #6d8378;
    --muted-4-color: #35463f;
    --body-bg-color: #080b0c;
    --main-bg-color: #101718;
    --muted-bg-color: #12221c;
    --muted-bg-2-color: #111c17;
    --main-border-color: #263631;
    --muted-border-color: #20362b;
    --blur-bg: rgba(16, 23, 24, .96);
    --float-btn-bg: rgba(26, 51, 39, .96);
    --header-bg: #0c1213;
    --header-color: #e5eeeb;
    --footer-bg: #090f0c;
    --footer-color: #91a79c;
}

/* Native modal/fallback states must not reintroduce white blur surfaces. */
body.modal-open,
body:has(.modal.in),
body.dark-theme.modal-open,
body.dark-theme:has(.modal.in),
body.fps-accelerat,
body.fps-accelerat.dark-theme {
    --blur-bg: #101718;
}

body :is(a, button, input, select, textarea, [tabindex]):not(.line-form-input):focus-visible {
    outline: 2px solid var(--tx-accent) !important;
    outline-offset: 3px;
}

.ux-search:focus-within,
.ux-header-actions form:focus-within {
    border-color: var(--tx-accent);
    box-shadow: 0 0 0 3px rgba(54, 241, 189, .1);
}

.ux-menu-toggle,
.ux-header-actions button,
.ux-search button,
.ux-side-login > a,
.ux-product-buy > a {
    min-height: 44px;
}

.ux-menu-toggle,
.ux-header-actions button {
    min-width: 44px;
}

.ux-header-actions form {
    height: 44px;
}

.ux-header-actions input {
    height: 100%;
}

.ux-filter-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: 12px;
}

.ux-filter-box a[aria-current="page"] {
    color: #a3f1c0;
    background: #244f33;
    box-shadow: inset 0 0 0 1px #3d7353;
}

.ux-pagination .nav-links,
.ux-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
}

.ux-pagination .page-numbers:not(ul) {
    min-width: 44px;
    height: 44px;
    padding-inline: 12px;
}

.ux-pagination ul.page-numbers {
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.ux-empty {
    min-height: 210px;
    padding: 30px 20px;
    text-align: center;
    line-height: 1.8;
}

.ux-empty > span {
    max-width: 520px;
}

.tx-empty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.tx-empty-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 18px;
    color: #c6f6df;
    background: #153126;
    border: 1px solid #365d48;
    border-radius: 6px;
}

.ux-breadcrumb {
    flex-wrap: wrap;
}

.ux-breadcrumb em,
.ux-page-head h1,
.ux-product-info h1,
.ux-page-card h1 {
    overflow-wrap: anywhere;
}

.ux-product-tags,
.ux-product-meta {
    flex-wrap: wrap;
}

#ux-article-content,
.ux-page-content :is(h2, h3, h4),
.ux-single-main :is(h2, h3, h4) {
    scroll-margin-top: 95px;
}

.ux-page-content,
.ux-single-main :is(.article-content, .wp-posts-content) {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.9;
}

.ux-page-content :is(img, video),
.ux-single-main :is(.article-content, .wp-posts-content) :is(img, video) {
    max-width: 100%;
    height: auto;
}

.ux-page-content :is(iframe, embed, object),
.ux-single-main :is(.article-content, .wp-posts-content) :is(iframe, embed, object) {
    max-width: 100%;
}

.ux-page-content pre,
.ux-single-main :is(.article-content, .wp-posts-content) pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    overflow-wrap: normal;
    color: #c6e4d3;
    background: #0b1511;
    border: 1px solid #2b4336;
    border-radius: 8px;
}

.ux-page-content code,
.ux-single-main :is(.article-content, .wp-posts-content) code {
    color: #a9e4c4;
    background-color: #153023;
}

.ux-page-content pre code,
.ux-single-main :is(.article-content, .wp-posts-content) pre code {
    color: inherit;
    background: transparent;
    white-space: inherit;
}

.ux-page-content :is(table, .wp-block-table),
.ux-single-main :is(.article-content, .wp-posts-content) :is(table, .wp-block-table) {
    max-width: 100%;
    overflow-x: auto;
}

.ux-page-content table,
.ux-single-main :is(.article-content, .wp-posts-content) table {
    display: block;
    border-collapse: collapse;
}

.ux-page-content :is(th, td),
.ux-single-main :is(.article-content, .wp-posts-content) :is(th, td) {
    border-color: #2a4336;
}

.ux-page-content a,
.ux-single-main :is(.article-content, .wp-posts-content) a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ux-card-content footer,
.bs-footer .ux-footer-bottom,
.bs-footer-contact small {
    color: #91aa99;
}

/* Author archives retain the original main query and published content. */
.tx-author-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
}

.tx-author-avatar {
    flex: 0 0 auto;
}

.tx-author-avatar :is(img, .avatar) {
    width: 88px;
    height: 88px;
    border: 2px solid #417256;
    border-radius: 50%;
    object-fit: cover;
}

.tx-author-info {
    flex: 1;
    min-width: min(260px, 100%);
}

.tx-author-info h1 {
    margin-top: 4px;
}

.tx-author-info p {
    max-width: 700px;
    line-height: 1.8;
}

.tx-author-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: #acccb9;
    font-size: 13px;
}

/* The native account form keeps its AJAX handlers, labels and captcha layout. */
.tx-auth-page {
    min-height: 70vh;
    padding: 58px 0 70px;
    background: radial-gradient(ellipse at 12% 10%, #11352a55, transparent 50%), #080b0c;
}

.tx-auth-page,
.tx-auth-page * {
    box-sizing: border-box;
}

.tx-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(1080px, calc(100% - 48px));
    margin-inline: auto;
    border: 1px solid #2a4037;
    border-radius: 14px;
    overflow: hidden;
    background: #101718;
    box-shadow: 0 20px 70px #0004;
}

.tx-auth-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    min-width: 0;
    padding: 48px;
    background: linear-gradient(145deg, #10251d, #0e1815 75%);
    border-right: 1px solid #294534;
}

.tx-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #d1f1df;
    font-size: 19px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tx-auth-brand > :is(i, svg) {
    color: #36f1bd;
    font-style: normal;
}

.tx-auth-brand svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.tx-auth-intro :is(h1, h2) {
    margin: 0;
    color: #e1f8eb;
    font-size: clamp(25px, 2.6vw, 35px);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.tx-auth-intro > p {
    margin: 0;
    color: #a3b8ad;
    font-size: 14px;
    line-height: 1.9;
}

.tx-auth-benefits {
    display: grid;
    gap: 14px;
    padding: 0;
    margin: 6px 0;
    list-style: none;
    color: #b6d2c2;
    font-size: 13px;
    line-height: 1.8;
}

.tx-auth-benefits li {
    padding-left: 14px;
    border-left: 2px solid #337254;
}

.tx-auth-form {
    min-width: 0;
    align-self: center;
    padding: 36px;
}

.tx-auth-form .sign {
    width: 100%;
    max-width: 460px;
    margin: auto;
    background: transparent !important;
    box-shadow: none;
}

.tx-auth-form .sign-img + .sign {
    margin-left: 0;
}

.tx-auth-form .sign-img {
    position: relative;
    padding-right: 0;
    margin-bottom: 20px;
}

.tx-auth-status:not(:empty) {
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid #375944;
    border-radius: 8px;
    color: #bfd8c8;
    background: #15261b;
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.tx-auth-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tx-auth-tabs a { padding: 10px 16px; min-height: 44px; border: 1px solid #2a4037; border-radius: 8px; color: #9cafaa; }
.tx-auth-tabs a[aria-current="page"] { color: #36f1bd; border-color: #36f1bd; background: #152a22; }
.tx-auth-help { color: #9cafaa; line-height: 1.9; overflow-wrap: anywhere; }
.tx-auth-help a { color: #36f1bd; }
.ux-side-login > i svg { width: 28px; height: 28px; fill: currentColor; }

/* Private management login follows the same visual identity. */
body.login { background: radial-gradient(ellipse at top, #14382b, #080b0c 65%); color: #e5eeeb; min-height: 100vh; padding-bottom: 0; }
.login #login { width: min(360px, calc(100% - 36px)); padding-top: 8vh; }
.login h1 a { background-image: none; width: auto; height: auto; text-indent: 0; color: #36f1bd; font-size: 26px; line-height: 1.5; }
.login form { background: #101718; color: #e5eeeb; border: 1px solid #2a4037; border-radius: 14px; box-shadow: 0 20px 60px #0004; }
.login form .input { background: #0b1110; color: #e5eeeb; border-color: #365147; border-radius: 7px; }
.login form .input:focus { border-color: #36f1bd; box-shadow: 0 0 0 1px #36f1bd; }
.login .button-primary { background: #36f1bd; color: #06251a; border-color: #36f1bd; min-height: 40px; }
.login #nav a, .login #backtoblog a, .login .privacy-policy-page-link a { color: #a4b7b0; }
.login .message, .login .notice { background: #101718; color: #e5eeeb; border-left-color: #36f1bd; }

.sign .line-form-input,
.modal .sign .line-form-input {
    color: #e5eeeb;
    background: transparent !important;
    opacity: 1;
}

.sign .scale-placeholder {
    color: #91a79c;
    opacity: .9;
}

.sign .line-form-input:focus ~ .scale-placeholder {
    color: #36f1bd;
}

.sign .line-form:focus-within .line-form-line {
    background: #36f1bd;
}

.sign :is(.signsubmit-loader, .resetpassword-loader),
.user-center .but.b-theme,
.modal-content .but.b-theme,
.modal-content .but.b-blue,
.tx-auth-form .but.b-blue {
    --this-bg: #36f1bd;
    --this-color: #06251a;
    --this-border: transparent;
    color: #06251a;
    background: #36f1bd;
}

.sign :is(.signsubmit-loader, .resetpassword-loader) {
    min-height: 46px;
    border-radius: 7px;
}

.sign .but-average > .but,
.user-center-nav .tab-nav-theme > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sign .social_loginbar a {
    min-width: 44px;
    min-height: 44px;
}

.sign .form-checkbox {
    color: #a4b7b0;
}

.user-center :is(.main-bg, .zib-widget),
.modal-content {
    border-color: #2a4037;
}

/* Compatibility when a parent sign template is still selected. */
.page-template-user-sign .sign-page.absolute {
    position: relative;
    min-height: 70vh;
    height: auto;
    padding: 60px 16px;
}

.page-template-user-sign .sign-row {
    height: auto;
}

.page-template-user-sign .sign-col {
    width: 100%;
    height: auto;
    margin-left: 0;
}

.page-template-user-sign .sign-page .sign {
    width: min(100%, 460px);
    max-width: 460px;
    border: 1px solid #2a4037;
    box-shadow: 0 20px 60px #0004;
}

@media (max-width: 820px) {
    body {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }

    .ux-mobile-nav {
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
    }

    .ux-mobile-nav > a {
        min-height: 58px;
    }

    .tx-auth-page {
        padding: 30px 0 42px;
    }

    .tx-auth-shell {
        grid-template-columns: minmax(0, 1fr);
        width: min(600px, calc(100% - 32px));
    }

    .tx-auth-intro {
        padding: 28px;
        gap: 14px;
        border-right: 0;
        border-bottom: 1px solid #294534;
    }

    .tx-auth-intro :is(h1, h2) {
        font-size: 26px;
    }

    .tx-auth-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
        font-size: 12px;
    }

    .tx-auth-form {
        padding: 28px;
    }

    #ux-article-content,
    .ux-page-content :is(h2, h3, h4),
    .ux-single-main :is(h2, h3, h4) {
        scroll-margin-top: 80px;
    }
}

@media (max-width: 540px) {
    .tx-auth-shell {
        width: calc(100% - 24px);
        border-radius: 10px;
    }

    .tx-auth-intro,
    .tx-auth-form {
        padding: 24px 18px;
    }

    .tx-auth-brand {
        font-size: 17px;
    }

    .tx-auth-intro :is(h1, h2) {
        font-size: 24px;
    }

    .tx-auth-benefits {
        grid-template-columns: minmax(0, 1fr);
    }

    .tx-author-head {
        align-items: flex-start;
        gap: 16px;
    }

    .tx-author-avatar :is(img, .avatar) {
        width: 68px;
        height: 68px;
    }

    .tx-author-info {
        min-width: min(200px, 100%);
    }

    .ux-search input {
        font-size: 16px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .tx-auth-page *,
    .ux-list-page *,
    .ux-single-page *,
    .ux-normal-page * {
        scroll-behavior: auto;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}
