:root {
    --tbf-font-sans: "TBF OPPO Sans", "HarmonyOS Sans SC", "HarmonyOS Sans", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tbf-font-display: "TBF Outfit", "TBF Harmony Latin", "HarmonyOS Sans", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --tbf-font-size-min: 12px;
    --tbf-ink: #101b31;
    --tbf-ink-2: #344159;
    --tbf-muted: #7d899c;
    --tbf-accent: #ff4f75;
    --tbf-accent-soft: rgba(255, 79, 117, .1);
    --tbf-surface: rgba(255, 255, 255, .78);
    --tbf-surface-strong: rgba(255, 255, 255, .92);
    --tbf-surface-soft: rgba(244, 248, 255, .72);
    --tbf-glass-panel-bg: linear-gradient(135deg, rgba(240, 247, 255, .82), rgba(248, 243, 251, .76));
    --tbf-glass-panel-border: rgba(255, 255, 255, .84);
    --tbf-glass-panel-shadow: 0 24px 62px rgba(35, 51, 82, .12), inset 0 1px 0 rgba(255, 255, 255, .92);
    --tbf-glass-panel-filter: blur(30px) saturate(162%);
    --tbf-glass-inner-bg: rgba(255, 255, 255, .34);
    --tbf-glass-inner-border: rgba(255, 255, 255, .58);
    --tbf-chrome-glass-bg: rgba(238, 246, 255, .42);
    --tbf-chrome-glass-filter: blur(32px) saturate(175%);
    --tbf-border: rgba(16, 27, 49, .09);
    --tbf-border-light: rgba(255, 255, 255, .86);
    --tbf-shadow-sm: 0 12px 34px rgba(36, 54, 91, .075);
    --tbf-shadow-md: 0 24px 70px rgba(36, 54, 91, .12);
    --tbf-radius-sm: 14px;
    --tbf-radius-md: 20px;
    --tbf-radius-lg: 28px;
    /*
     * 全站唯一外层页面版心。
     * 值只在这里按 CSS viewport 分档；Header / 首页 / 归档 / 详情 / Footer
     * 均只读取 --tbf-container，不再各自维护 max-width。
     * 基础断点沿用成熟响应式体系的 576 / 768 / 992 / 1200 节奏，
     * 再为 1440 / 1680 / 1920 / 2K / 4K 增加媒体站宽屏档位。
     */
    --tbf-container: 100%;
}

@media (min-width: 576px) {
    :root { --tbf-container: 540px; }
}

@media (min-width: 768px) {
    :root { --tbf-container: 720px; }
}

@media (min-width: 992px) {
    :root { --tbf-container: 960px; }
}

@media (min-width: 1200px) {
    :root { --tbf-container: 1080px; }
}

@media (min-width: 1440px) {
    :root { --tbf-container: 1200px; }
}

@media (min-width: 1680px) {
    :root { --tbf-container: 1360px; }
}

@media (min-width: 1920px) {
    :root { --tbf-container: 1440px; }
}

@media (min-width: 2200px) {
    :root { --tbf-container: 1440px; }
}

@media (min-width: 2560px) {
    :root { --tbf-container: 1440px; }
}

body.tbf-ui {
    color: var(--tbf-ink);
    font-family: var(--tbf-font-sans) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #fbfcff;
}

body.tbf-ui :where(h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select, option, label, li, dt, dd, th, td, small, strong, b, em, time) {
    font-family: var(--tbf-font-sans) !important;
}

body.tbf-ui :where(h1, h2, h3) {
    font-family: "Microsoft YaHei", "Microsoft YaHei UI", "PingFang SC", sans-serif !important;
}

body.tbf-ui :where(.tbf-module-heading__en, .tbf-hero__eyebrow, .tbf-hero__effect-count, .tbf-work-type, .tbf-work-resource, .tbf-access-badge) {
    font-family: var(--tbf-font-display) !important;
}

/*
 * Global page frame.
 *
 * Modown ships several breakpoint-specific .container max-width rules, some
 * with !important.  TBF uses one authoritative outer page width instead:
 * --tbf-container from tokens.css. The token itself changes at the canonical
 * viewport breakpoints; every normal page shell, header, topbar, homepage Mocat
 * and footer still reads the same single token. Component/readability widths
 * remain local to their own components.
 */
.tbf-ui .container,
.tbf-ui .main .container {
    max-width: var(--tbf-container) !important;
}

.tbf-ui a {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

body.tbf-ui .header,
body.home.tbf-home-page .header,
body.home.tbf-home-page .header:not(.scrolled) {
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.tbf-ui .header::before,
body.home.tbf-home-page .header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(237, 245, 255, .22);
    box-shadow: none;
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    backdrop-filter: blur(22px) saturate(155%);
}

body.tbf-ui .header > .container,
body.home.tbf-home-page .header > .container {
    z-index: 1;
}

body.tbf-ui .header.scrolled::before,
body.home.tbf-home-page .header.scrolled::before {
    background: rgba(244, 248, 255, .64);
    box-shadow: 0 10px 34px rgba(42, 58, 91, .09), inset 0 1px 0 rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    backdrop-filter: blur(30px) saturate(170%);
}

body.tbf-ui .topbar,
body.home.tbf-home-page .topbar {
    border-bottom: 1px solid rgba(255, 255, 255, .52);
    background: rgba(248, 251, 255, .48);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}

/* Cache-safe TopBar visibility. The server always renders the TopBar whenever
 * it is enabled; the legacy mobile-hide setting now changes presentation only.
 * This keeps the TopBar-related anonymous mobile/desktop FastCGI shell state consistent. */
@media (max-width: 1024px) {
    body.tbf-ui.tbf-topbar-mobile-hidden .topbar {
        display: none !important;
    }

    body.tbf-ui.tbf-topbar-mobile-hidden.has-topbar,
    body.tbf-ui.tbf-topbar-mobile-hidden.has-topbar.topbar-hide {
        margin-top: 60px !important;
    }

    body.tbf-ui.tbf-topbar-mobile-hidden.has-topbar .header,
    body.tbf-ui.tbf-topbar-mobile-hidden.has-topbar.topbar-hide .header {
        top: 0 !important;
    }

    body.tbf-ui.tbf-topbar-mobile-hidden.has-topbar .search-wrap.show,
    body.tbf-ui.tbf-topbar-mobile-hidden.has-topbar.topbar-hide .search-wrap.show {
        top: 60px !important;
    }
}

/* TopBar site notices: custom public updates replace legacy user activity stream. */
body.tbf-ui .topbar .tbf-site-notices {
    float: right;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: min(40vw, 470px);
    height: 30px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #68758a;
    line-height: normal;
    vertical-align: top;
}

body.tbf-ui .topbar .tbf-site-notices[hidden] {
    display: none !important;
}

body.tbf-ui .topbar .tbf-site-notices__icon {
    position: static !important;
    inset: auto !important;
    float: none !important;
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 30px;
    margin: 0;
    padding: 0;
    color: #8895a8;
    line-height: 0;
    text-align: center;
}

body.tbf-ui .topbar .tbf-site-notices__icon svg {
    display: block;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    overflow: visible;
    stroke: currentColor;
}

body.tbf-ui .topbar .tbf-site-notices__viewport {
    position: relative;
    float: none !important;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.tbf-ui .topbar .tbf-site-notices ul {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    display: block !important;
    width: 100%;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    list-style: none;
    will-change: transform;
}

body.tbf-ui .topbar .tbf-site-notices ul li {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    list-style: none !important;
    opacity: 1 !important;
    transform: none !important;
}

body.tbf-ui .topbar .tbf-site-notices__line {
    position: static !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px;
    width: 100%;
    height: 30px;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    line-height: 1;
    white-space: nowrap;
}

body.tbf-ui .topbar .tbf-site-notices__date {
    position: static !important;
    inset: auto !important;
    float: none !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center !important;
    align-self: center !important;
    order: 0;
    height: 30px;
    margin: 0 !important;
    padding: 0 !important;
    color: #9aa5b4;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 30px !important;
    text-align: left !important;
    white-space: nowrap;
}

body.tbf-ui .topbar .tbf-site-notices__text {
    position: static !important;
    inset: auto !important;
    float: none !important;
    display: block !important;
    flex: 0 1 auto;
    align-items: center !important;
    align-self: center !important;
    order: 1;
    min-width: 0;
    height: 30px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    color: #68758a;
    font-size: 13px;
    font-weight: 500;
    line-height: 30px !important;
    text-align: left !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.tbf-ui .topbar .tbf-site-notices__text :is(a, strong, b, em, i, span) {
    position: static !important;
    float: none !important;
    display: inline !important;
    margin: 0 !important;
    color: inherit;
    line-height: inherit !important;
    vertical-align: middle;
}

body.tbf-ui .topbar .tbf-site-notices__text a {
    text-decoration: none;
    transition: color .18s ease;
}

body.tbf-ui .topbar .tbf-site-notices__text a:hover {
    color: var(--tbf-ink);
}

@media (max-width: 1100px) {
    body.tbf-ui .topbar .tbf-site-notices {
        width: min(46vw, 430px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tbf-ui .topbar .tbf-site-notices ul {
        transition: none !important;
    }
}

body.home.tbf-home-page .header:not(.scrolled) .nav-main > li,
body.home.tbf-home-page .header:not(.scrolled) .nav-main > li > a,
body.home.tbf-home-page .header:not(.scrolled) .nav-right > li > a,
body.home.tbf-home-page .header:not(.scrolled) .nav-left > li > a,
body.tbf-ui .nav-main > li > a,
body.tbf-ui .nav-right > li > a {
    color: #28354c;
    font-weight: 650;
}

body.home.tbf-home-page .header:not(.scrolled) .nav-main > li > a:hover,
body.home.tbf-home-page .header:not(.scrolled) .nav-right > li > a:hover,
body.tbf-ui .nav-main > li.current-menu-item > a,
body.tbf-ui .nav-main > li.current_page_item > a,
body.tbf-ui .nav-main > li > a:hover,
body.tbf-ui .nav-right > li > a:hover {
    color: var(--tbf-ink);
}

body.tbf-ui :is(
    .search-wrap-container,
    .nav-main .sub-menu,
    .nav-right .nav-notice > .sub-menu,
    .nav-right .nav-login.yes > .sub-menu
) {
    background: var(--tbf-chrome-glass-bg);
    -webkit-backdrop-filter: var(--tbf-chrome-glass-filter);
    backdrop-filter: var(--tbf-chrome-glass-filter);
}

@media (min-width: 769px) {
    body.tbf-ui .nav-main > li.menu-item-has-children::after {
        color: var(--tbf-ink-2) !important;
        transition: color .22s ease, transform .22s ease;
    }

    body.tbf-ui .nav-main > li.menu-item-has-children:hover::after,
    body.tbf-ui .nav-main > li.current-menu-item.menu-item-has-children::after,
    body.tbf-ui .nav-main > li.current-menu-parent.menu-item-has-children::after,
    body.tbf-ui .nav-main > li.current-menu-ancestor.menu-item-has-children::after,
    body.tbf-ui .nav-main > li.current_page_item.menu-item-has-children::after,
    body.tbf-ui .nav-main > li.current-category-ancestor.menu-item-has-children::after {
        color: var(--tbf-accent) !important;
    }

    body.tbf-ui .nav-main .sub-menu {
        overflow: hidden;
        isolation: isolate;
        border-radius: 20px;
        transform: translateZ(0);
    }

    body.tbf-ui .nav-main > li > .sub-menu::before,
    body.tbf-ui .nav-right .nav-notice > .sub-menu::before,
    body.tbf-ui .nav-right .nav-login.yes > .sub-menu::before {
        border-bottom-color: var(--tbf-chrome-glass-bg);
        filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .58));
    }

    body.tbf-ui .nav-main .sub-menu a {
        margin: 2px 7px;
        border-radius: 11px;
        color: var(--tbf-ink-2);
        background: transparent !important;
        box-shadow: none !important;
        font-weight: 580;
        transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    body.tbf-ui .nav-main .sub-menu a:hover,
    body.tbf-ui .nav-main .sub-menu .current-menu-item > a,
    body.tbf-ui .nav-main .sub-menu .current-menu-ancestor > a,
    body.tbf-ui .nav-main .sub-menu .current-menu-parent > a {
        color: var(--tbf-accent) !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(-1px);
    }

    body.tbf-ui .nav-main > li.mega4 > .sub-menu > li.mg-show > a,
    body.tbf-ui .nav-main > li.mega33 > .sub-menu > li.mg-show > a,
    body.tbf-ui .nav-main > li.mega3 > .sub-menu > li.mg-show > a,
    body.tbf-ui .nav-main > li.mega2 > .sub-menu > li.mg-show > a {
        color: var(--tbf-accent) !important;
        background: transparent !important;
    }

    body.tbf-ui .nav-main > li.mega4 > .sub-menu > li > a::after,
    body.tbf-ui .nav-main > li.mega33 > .sub-menu > li > a::after,
    body.tbf-ui .nav-main > li.mega3 > .sub-menu > li > a::after,
    body.tbf-ui .nav-main > li.mega2 > .sub-menu > li > a::after {
        border-bottom-color: transparent !important;
        opacity: 0 !important;
    }

    body.tbf-ui .nav-main .sub-menu .sub-menu {
        border-left-color: rgba(255, 255, 255, .45) !important;
        background: linear-gradient(135deg, rgba(240, 247, 255, .44), rgba(247, 241, 255, .32)) !important;
    }
}

.tbf-ui .header .logo img {
    max-height: 38px;
}


.tbf-ui .search-wrap {
    top: -210px;
    padding: 14px 18px 0;
    background: transparent;
    pointer-events: none;
}

.tbf-ui .search-wrap.show {
    top: 70px;
    pointer-events: auto;
}

body.tbf-ui.has-topbar .search-wrap.show {
    top: 100px;
}

body.tbf-ui.has-topbar.topbar-hide .search-wrap.show {
    top: 70px;
}

.tbf-ui .search-wrap-container {
    height: auto;
    padding: 13px !important;
    border-radius: 25px;
}

.tbf-ui .search-wrap .search-form {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tbf-ui .search-wrap .search-input {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 55px;
    padding: 0 20px;
    border: 1px solid rgba(16, 27, 49, .07);
    border-radius: 18px;
    color: var(--tbf-ink);
    background: rgba(255, 255, 255, .42);
    font-size: 16px;
    outline: 0;
}

.tbf-ui .search-wrap .search-input:focus {
    border-color: rgba(16, 27, 49, .14);
    background: rgba(255, 255, 255, .66);
}

.tbf-ui .search-wrap .search-form .search-cat {
    z-index: 2;
    left: 18px;
    top: 16px;
}

.tbf-ui .search-wrap .search-form .search-cat + .search-input {
    text-indent: 96px;
}

.tbf-ui .search-wrap .search-form .search-btn {
    position: static;
    float: none;
    flex: 0 0 112px;
    width: 112px;
    height: 55px;
    border-radius: 18px;
    background: var(--tbf-ink);
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(16, 27, 49, .13);
}

.tbf-ui .search-wrap .icon-close {
    position: static;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    color: var(--tbf-ink);
    background: rgba(255, 255, 255, .35);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    z-index: 20;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.tbf-ui .search-wrap .icon-close:hover {
    background: rgba(255, 255, 255, .72);
}

.tbf-ui .search-wrap .search-cats {
    top: 65px;
    left: 0;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 17px;
    background: rgba(244, 249, 255, .68);
    box-shadow: 0 18px 44px rgba(40, 56, 89, .1);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}

.tbf-ui .nav-right .sub-menu {
    min-width: 340px;
    padding: 15px 14px 14px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 23px;
    transform: translateZ(0);
}

.tbf-ui .nav-right .sub-menu .user-info {
    padding: 4px 6px 10px;
}

.tbf-ui .nav-right .sub-menu .user-info .avatar {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, .88);
    box-shadow: 0 8px 20px rgba(34, 50, 83, .1);
}

.tbf-ui .nav-right .sub-menu .user-info .name .nickname {
    color: var(--tbf-ink);
    font-weight: 700;
}

.tbf-ui .nav-right .sub-menu .user-money,
.tbf-ui .nav-right .sub-menu .user-vip,
.tbf-ui .nav-right .sub-menu .user-cart {
    margin: 6px 4px;
    padding: 0;
    border: 0;
    background: transparent;
}

.tbf-ui .nav-right .sub-menu .money-left,
.tbf-ui .nav-right .sub-menu .vip-left,
.tbf-ui .nav-right .sub-menu .cart-left {
    margin-top: 0;
    padding: 9px 11px;
    border: 1px solid var(--tbf-glass-inner-border);
    border-radius: 14px;
    color: var(--tbf-ink-2);
    background: var(--tbf-glass-inner-bg);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
}

.tbf-ui .nav-right .sub-menu li.item a {
    width: 54px;
    height: 54px;
    color: var(--tbf-ink-2);
    border: 1px solid var(--tbf-glass-inner-border);
    background: var(--tbf-glass-inner-bg);
}

.tbf-ui .nav-right .sub-menu li.item a:hover {
    color: var(--tbf-ink);
    background: rgba(255, 255, 255, .34);
    transform: translateY(-2px);
}

@media (min-width: 769px) {
    body.tbf-ui .nav-right .sub-menu :where(
        .notice-list,
        .notice-content,
        .notice-empty,
        .notification-list,
        .notification-content,
        .message-list,
        .message-content
    ) {
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

@media (max-width: 768px) {
    .tbf-ui .search-wrap {
        padding: 10px 10px 0;
    }

    .tbf-ui .search-wrap.show,
    body.tbf-ui.has-topbar.topbar-hide .search-wrap.show {
        top: 60px;
    }

    body.tbf-ui.has-topbar .search-wrap.show {
        top: 90px;
    }

    .tbf-ui .search-wrap-container {
        padding: 9px !important;
        border-radius: 19px;
    }

    .tbf-ui .search-wrap .search-form {
        gap: 7px;
    }

    .tbf-ui .search-wrap .search-input {
        height: 46px;
        padding: 0 14px;
        border-radius: 13px;
        font-size: 14px;
    }

    .tbf-ui .search-wrap .search-form .search-btn {
        flex-basis: 74px;
        width: 74px;
        height: 46px;
        border-radius: 13px;
        font-size: 14px;
    }

    .tbf-ui .search-wrap .search-form .search-btn .icon {
        display: none;
    }

    .tbf-ui .search-wrap .icon-close {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .tbf-ui .search-wrap .search-form .search-cat {
        display: none;
    }

    .tbf-ui .search-wrap .search-form .search-cat + .search-input {
        text-indent: 0;
    }

    body.tbf-ui .header.nav-mobile-show > .container {
        position: relative;
        z-index: 10001;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main {
        z-index: 10005;
        pointer-events: auto;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main > li,
    body.tbf-ui .header.nav-mobile-show .nav-main a {
        position: relative;
        z-index: 1;
        pointer-events: auto;
    }

    body.tbf-ui .header.nav-mobile-show .logo {
        z-index: 10006;
    }

    body.tbf-ui .header.nav-mobile-show .nav-mobile-show-mask {
        z-index: 10000;
    }

    body.tbf-ui .nav-right .nav-notice > .sub-menu,
    body.tbf-ui .nav-right .nav-login.yes > .sub-menu {
        position: fixed;
        top: 68px;
        left: 12px;
        right: 12px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: calc(100vh - 86px);
        max-height: calc(100dvh - 86px);
        margin: 0;
        padding: 15px 14px 14px;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 22px;
        background: rgba(246, 249, 255, .76);
        box-shadow: 0 22px 56px rgba(31, 48, 80, .16), inset 0 1px 0 rgba(255, 255, 255, .82);
        -webkit-backdrop-filter: blur(30px) saturate(170%);
        backdrop-filter: blur(30px) saturate(170%);
        z-index: 10020;
    }

    body.tbf-ui.has-topbar .nav-right .nav-notice > .sub-menu,
    body.tbf-ui.has-topbar .nav-right .nav-login.yes > .sub-menu {
        top: 98px;
        max-height: calc(100vh - 116px);
        max-height: calc(100dvh - 116px);
    }

    body.tbf-ui .nav-right .nav-notice > .sub-menu::before,
    body.tbf-ui .nav-right .nav-login.yes > .sub-menu::before {
        display: none;
    }

    body.tbf-ui .nav-right .nav-notice .header__scroll {
        
        max-height: min(52dvh, 390px);
        padding-right: 3px;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.tbf-ui .nav-right .nav-login.yes > .sub-menu {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav {
        display: flex;
        align-items: stretch;
        left: 10px;
        right: 10px;
        bottom: max(8px, env(safe-area-inset-bottom));
        height: 62px;
        padding: 5px 6px 4px;
        box-sizing: border-box;
        overflow: visible;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 22px;
        color: var(--tbf-ink-2);
        background: rgba(246, 249, 255, .68);
        box-shadow: 0 14px 38px rgba(31, 48, 80, .13), inset 0 1px 0 rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: blur(28px) saturate(168%);
        backdrop-filter: blur(28px) saturate(168%);
        z-index: 10010;
    }

    body.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav > a {
        float: none;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: 16px;
        color: #43506a;
        line-height: 1;
    }

    body.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav > a:active {
        background: rgba(255, 255, 255, .46);
        transform: scale(.96);
    }

    body.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav > a > i.icon {
        top: 0;
        font-size: 23px;
        line-height: 24px;
    }

    body.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav > a > span {
        top: 0;
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: 11px;
        line-height: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav > a.special::after {
        display: none;
    }

    body.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav > a.special > i {
        top: 0;
    }

    body.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav .footer-nav-trigger {
        border: 1px solid rgba(255, 255, 255, .72);
        border-bottom: 0;
        color: var(--tbf-ink-2);
        background: rgba(246, 249, 255, .74);
        box-shadow: 0 -8px 20px rgba(31, 48, 80, .08);
        -webkit-backdrop-filter: blur(18px) saturate(155%);
        backdrop-filter: blur(18px) saturate(155%);
    }

    body.tbf-ui.tbf-has-mobile-footer-nav {
        margin-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

body.tbf-ui.page .banner-page {
    margin: 0 !important;
    padding: 36px 0 0 !important;
    color: var(--tbf-ink) !important;
    background: transparent !important;
    background-image: none !important;
    text-align: left !important;
}

body.tbf-ui.page .banner-page::before,
body.tbf-ui.page .banner-page::after {
    display: none !important;
    content: none !important;
}

body.tbf-ui.page .banner-page > .container {
    position: relative;
    min-height: 124px;
    padding: 30px 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .07);
    border-radius: 28px;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 20px 58px rgba(37, 56, 94, .065), inset 0 1px 0 rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
}

body.tbf-ui.page .banner-page > .container::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -120px;
    top: -205px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(170, 207, 255, .23), transparent 69%);
    pointer-events: none;
}

body.tbf-ui.page .banner-page .archive-title {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    color: var(--tbf-ink) !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 780 !important;
    letter-spacing: -.035em;
    line-height: 1.12;
    text-align: left !important;
    text-shadow: none !important;
}

body.tbf-ui.page .banner-page + .main {
    padding-top: 30px;
}

body.tbf-ui.page .single-content > .article-header {
    position: relative;
    margin: 0 0 26px !important;
    padding: 27px 30px !important;
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .07);
    border-radius: 24px;
    background: rgba(255, 255, 255, .66);
    box-shadow: 0 16px 42px rgba(37, 56, 94, .055), inset 0 1px 0 rgba(255, 255, 255, .9);
    text-align: left !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

body.tbf-ui.page .single-content > .article-header :is(.article-title, h1) {
    margin: 0 !important;
    color: var(--tbf-ink) !important;
    font-size: clamp(28px, 2.8vw, 40px) !important;
    font-weight: 760 !important;
    letter-spacing: -.035em;
    line-height: 1.15;
    text-align: left !important;
}

body.night.tbf-ui.page .banner-page > .container,
body.night.tbf-ui.page .single-content > .article-header {
    border-color: rgba(255, 255, 255, .075);
    background: rgba(28, 31, 39, .72);
    box-shadow: 0 20px 58px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .045);
}

body.night.tbf-ui.page .banner-page .archive-title,
body.night.tbf-ui.page .single-content > .article-header :is(.article-title, h1) {
    color: #f4f6fb !important;
}

@media (max-width: 620px) {
    body.tbf-ui.page .banner-page {
        padding-top: 22px !important;
    }

    body.tbf-ui.page .banner-page > .container {
        min-height: 96px;
        padding: 24px 22px;
        border-radius: 23px;
    }

    body.tbf-ui.page .banner-page .archive-title {
        font-size: 30px !important;
    }

    body.tbf-ui.page .banner-page + .main {
        padding-top: 22px;
    }

    body.tbf-ui.page .single-content > .article-header {
        margin-bottom: 20px !important;
        padding: 22px 20px !important;
        border-radius: 20px;
    }
}


@media (max-width: 768px) {
    body.night.tbf-ui .nav-right .nav-notice > .sub-menu,
    body.night.tbf-ui .nav-right .nav-login.yes > .sub-menu,
    body.night.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav {
        border-color: rgba(255, 255, 255, .09);
        color: #d8dde8;
        background: rgba(25, 29, 38, .76);
        box-shadow: 0 20px 52px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    body.night.tbf-ui.tbf-has-mobile-footer-nav .footer-fixed-nav > a {
        color: #c5ccda;
    }
}

/* Header login action: one canonical geometry for every desktop header state. */
.tbf-ui .nav-login.no {
    display: flex;
    align-items: center;
    gap: 0;
}

.tbf-ui .nav-login.no > a.reg,
.tbf-ui .nav-login.no > .signup-loader,
.tbf-ui .nav-login.no > .nav-line {
    display: none !important;
}

.tbf-ui .nav-login.no > a.signin-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff !important;
    background: rgba(16, 27, 49, .9);
    box-shadow: 0 10px 24px rgba(16, 27, 49, .14);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

@media (min-width: 1025px) {
    body.tbf-ui {
        margin-top: 90px;
    }

    /*body.tbf-ui.has-topbar {
        margin-top: 120px;
    }*/

    body.tbf-ui.has-topbar.topbar-hide {
        margin-top: 90px;
    }

    body.tbf-ui .header,
    body.home.tbf-home-page .header,
    body.home.tbf-home-page .header:not(.scrolled) {
        height: 90px;
    }

    body.tbf-ui .header::before,
    body.home.tbf-home-page .header::before {
        background: rgba(246, 249, 255, .68);
        box-shadow:
            0 8px 26px rgba(50, 66, 99, .055),
            inset 0 -1px 0 rgba(40, 57, 89, .055),
            inset 0 1px 0 rgba(255, 255, 255, .74);
        -webkit-backdrop-filter: blur(24px) saturate(154%);
        backdrop-filter: blur(24px) saturate(154%);
    }

    body.tbf-ui .header.scrolled::before,
    body.home.tbf-home-page .header.scrolled::before {
        background: rgba(246, 249, 255, .80);
        box-shadow:
            0 10px 30px rgba(42, 58, 91, .075),
            inset 0 -1px 0 rgba(40, 57, 89, .065),
            inset 0 1px 0 rgba(255, 255, 255, .80);
    }

    body.tbf-ui .header > .container,
    body.home.tbf-home-page .header > .container {
        height: 90px;
    }

    body.tbf-ui .header .logo,
    body.tbf-ui .header .logo > a,
    body.home.tbf-home-page .header .logo,
    body.home.tbf-home-page .header .logo > a {
        height: 90px;
    }

    body.tbf-ui .nav-main > li > a,
    body.home.tbf-home-page .header:not(.scrolled) .nav-main > li > a {
        height: 90px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
    }

    body.tbf-ui .nav-right {
        height: 90px;
        display: flex;
        align-items: center;
    }

    body.tbf-ui .nav-right > li {
        height: 90px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex;
        align-items: center;
    }

    body.tbf-ui .nav-right > li > a,
    body.home.tbf-home-page .header:not(.scrolled) .nav-right > li > a {
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.tbf-ui .nav-right .nav-login.no {
        height: 90px;
        padding: 0 !important;
    }

    body.tbf-ui .nav-right .nav-login.no > a.signin-loader,
    body.home.tbf-home-page .header:not(.scrolled) .nav-right .nav-login.no > a.signin-loader,
    body.home.tbf-home-page .header.scrolled .nav-right .nav-login.no > a.signin-loader {
        width: auto;
        height: 46px;
        min-height: 46px;
        padding: 0 18px;
        line-height: 1;
        box-sizing: border-box;
    }

    body.tbf-ui .search-wrap.show {
        top: 90px;
    }

    body.tbf-ui.has-topbar .search-wrap.show {
        top: 120px;
    }

    body.tbf-ui.has-topbar.topbar-hide .search-wrap.show {
        top: 90px;
    }
}


@media (min-width: 1025px) {
    body.tbf-ui .nav-left .nav-button,
    body.tbf-ui .nav-right .nav-button,
    body.home.tbf-home-page .nav-left .nav-button,
    body.home.tbf-home-page .nav-right .nav-button {
        display: none !important;
    }
}

/* Keep the parent-theme login/register drag captcha bound to one fresh pointer gesture. */
#form-slide-item,
#form-slide-item2,
#captcha-slide,
#captcha-slide2 {
    touch-action: none;
    user-select: none;
}

@media (max-width: 1024px) {
    body.tbf-ui .nav-right .nav-login.no {
        padding: 9px 4px !important;
    }

    body.tbf-ui .nav-right .nav-login.no > a.signin-loader,
    body.home.tbf-home-page .header:not(.scrolled) .nav-right .nav-login.no > a.signin-loader,
    body.home.tbf-home-page .header.scrolled .nav-right .nav-login.no > a.signin-loader {
        width: 34px;
        height: 42px;
        min-height: 0;
        padding: 0 !important;
        border: 0;
        border-radius: 0;
        color: #24324c !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.tbf-ui .nav-right .nav-login.no > a.signin-loader > i.icon {
        display: inline-block !important;
        margin: 0;
        color: currentColor !important;
        font-size: 24px;
        line-height: 1;
    }
}


@media (max-width: 768px) {
    /* Search lives on the right; account/login is handled by the bottom "我的" entry. */
    body.tbf-ui .nav-left .nav-search,
    body.home.tbf-home-page .nav-left .nav-search,
    body.tbf-ui .nav-right .nav-login,
    body.home.tbf-home-page .nav-right .nav-login {
        display: none !important;
    }

    body.tbf-ui .nav-right .nav-search,
    body.home.tbf-home-page .nav-right .nav-search {
        display: flex !important;
        order: 99;
        padding: 9px 0 9px 7px !important;
    }

    body.tbf-ui .nav-right .nav-search > a,
    body.home.tbf-home-page .nav-right .nav-search > a {
        width: 38px;
        height: 42px;
        margin-right: -10px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 14px;
        color: #24324c !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.tbf-ui .nav-right .nav-search > a .icon,
    body.home.tbf-home-page .nav-right .nav-search > a .icon {
        margin: 0;
        font-size: 18px;
    }

    /* Replace Modown's flat white mobile drawer with an inset glass sheet. */
    body.tbf-ui .header.nav-mobile-show .logo,
    body.home.tbf-home-page .header.nav-mobile-show .logo {
        top: 10px;
        left: 10px;
        width: min(260px, calc(100vw - 44px));
        height: 76px;
        padding: 10px 14px 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .78);
        border-bottom: 0;
        border-radius: 26px 26px 0 0;
        background: linear-gradient(145deg, rgba(249, 252, 255, .88), rgba(241, 246, 255, .76)) !important;
        box-shadow: 0 24px 64px rgba(24, 40, 70, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: blur(30px) saturate(165%);
        backdrop-filter: blur(30px) saturate(165%);
        transform: none;
    }

    body.tbf-ui .header.nav-mobile-show .logo img,
    body.home.tbf-home-page .header.nav-mobile-show .logo img {
        max-width: 148px;
        max-height: 42px;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main {
        top: 86px;
        bottom: max(78px, calc(env(safe-area-inset-bottom) + 72px));
        left: 10px;
        width: min(260px, calc(100vw - 44px));
        padding: 8px 10px 16px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, .78);
        border-top: 0;
        border-radius: 0 0 26px 26px;
        background: linear-gradient(155deg, rgba(249, 252, 255, .86), rgba(238, 245, 255, .74)) !important;
        box-shadow: 0 24px 64px rgba(24, 40, 70, .16), inset 0 -1px 0 rgba(255, 255, 255, .78);
        -webkit-backdrop-filter: blur(30px) saturate(165%);
        backdrop-filter: blur(30px) saturate(165%);
        scrollbar-width: none;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main::-webkit-scrollbar,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main::-webkit-scrollbar {
        display: none;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item {
        margin: 0 0 7px;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(17, 31, 57, .055);
        border-radius: 16px;
        background: rgba(255, 255, 255, .44) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74);
    }

    body.tbf-ui .header.nav-mobile-show .nav-main > li > a,
    body.tbf-ui .header.nav-mobile-show.scrolled .nav-main > li > a,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li > a {
        min-height: 48px;
        padding: 0 16px !important;
        display: flex;
        align-items: center;
        color: #26344d !important;
        font-size: 15px;
        font-weight: 680;
        line-height: 1.2;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main > li.current-menu-item,
    body.tbf-ui .header.nav-mobile-show .nav-main > li.current-menu-parent,
    body.tbf-ui .header.nav-mobile-show .nav-main > li.current_page_item,
    body.tbf-ui .header.nav-mobile-show .nav-main > li.current-menu-ancestor,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.current-menu-item {
        border-color: rgba(17, 31, 57, .06);
        background: rgba(17, 31, 57, .94) !important;
        box-shadow: 0 10px 26px rgba(17, 31, 57, .14);
    }

    body.tbf-ui .header.nav-mobile-show .nav-main > li.current-menu-item > a,
    body.tbf-ui .header.nav-mobile-show .nav-main > li.current-menu-parent > a,
    body.tbf-ui .header.nav-mobile-show .nav-main > li.current_page_item > a,
    body.tbf-ui .header.nav-mobile-show .nav-main > li.current-menu-ancestor > a,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.current-menu-item > a {
        color: #fff !important;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main .sub-menu,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main .sub-menu {
        top: 0;
        margin: -2px 8px 8px !important;
        padding: 4px 4px 3px !important;
        border: 0;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, .36) !important;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main .sub-menu a,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main .sub-menu a {
        min-height: 34px;
        margin: 0;
        padding: 0 10px !important;
        display: flex;
        align-items: center;
        border-radius: 10px;
        color: #657187 !important;
        font-size: 13px;
    }

    body.tbf-ui .header.nav-mobile-show .nav-mobile-show-mask,
    body.home.tbf-home-page .header.nav-mobile-show .nav-mobile-show-mask {
        background: rgba(20, 31, 52, .34);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    /*
     * Mobile drawer motion:
     * keep the existing glass sheet structure, only soften the moment it appears.
     */
    body.tbf-ui .header.nav-mobile-show .logo,
    body.home.tbf-home-page .header.nav-mobile-show .logo {
        animation: tbf-mobile-drawer-head-in .22s cubic-bezier(.22,.72,.28,1) both;
        will-change: transform, opacity;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main {
        animation: tbf-mobile-drawer-body-in .24s cubic-bezier(.22,.72,.28,1) both;
        will-change: transform, opacity;
    }

    body.tbf-ui .header.nav-mobile-show .nav-mobile-show-mask,
    body.home.tbf-home-page .header.nav-mobile-show .nav-mobile-show-mask {
        animation: tbf-mobile-drawer-mask-in .18s ease-out both;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item,
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item {
        animation: tbf-mobile-drawer-item-in .2s cubic-bezier(.22,.72,.28,1) both;
    }

    body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item:nth-child(1),
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item:nth-child(1) { animation-delay: .025s; }
    body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item:nth-child(2),
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item:nth-child(2) { animation-delay: .045s; }
    body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item:nth-child(3),
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item:nth-child(3) { animation-delay: .065s; }
    body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item:nth-child(4),
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item:nth-child(4) { animation-delay: .085s; }
    body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item:nth-child(5),
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item:nth-child(5) { animation-delay: .105s; }
    body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item:nth-child(6),
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item:nth-child(6) { animation-delay: .125s; }
    body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item:nth-child(7),
    body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item:nth-child(7) { animation-delay: .145s; }

    @keyframes tbf-mobile-drawer-head-in {
        from { opacity: 0; transform: translate3d(-14px,0,0); }
        to   { opacity: 1; transform: translate3d(0,0,0); }
    }

    @keyframes tbf-mobile-drawer-body-in {
        from { opacity: 0; transform: translate3d(-14px,0,0); }
        to   { opacity: 1; transform: translate3d(0,0,0); }
    }

    @keyframes tbf-mobile-drawer-item-in {
        from { opacity: 0; transform: translate3d(-8px,0,0); }
        to   { opacity: 1; transform: translate3d(0,0,0); }
    }

    @keyframes tbf-mobile-drawer-mask-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        body.tbf-ui .header.nav-mobile-show .logo,
        body.tbf-ui .header.nav-mobile-show .nav-main,
        body.tbf-ui .header.nav-mobile-show .nav-main > li.menu-item,
        body.tbf-ui .header.nav-mobile-show .nav-mobile-show-mask,
        body.home.tbf-home-page .header.nav-mobile-show .logo,
        body.home.tbf-home-page .header.nav-mobile-show .nav-main,
        body.home.tbf-home-page .header.nav-mobile-show .nav-main > li.menu-item,
        body.home.tbf-home-page .header.nav-mobile-show .nav-mobile-show-mask {
            animation: none !important;
        }
    }
}


/* WordPress article code blocks: neutral technical surface with copy action. */
body.tbf-ui .article-content .tbf-code-shell {
    position: relative;
    width: 100%;
    margin: 22px 0 26px;
}

body.tbf-ui .article-content pre,
body.tbf-ui .article-content .wp-block-code {
    position: relative;
    width: 100%;
    margin: 22px 0 26px;
    padding: 50px 20px 18px;
    overflow-x: auto;
    border: 1px solid rgba(16, 27, 49, .075);
    border-radius: 18px;
    color: #2d394b;
    background: linear-gradient(180deg, rgba(250, 251, 253, .98), rgba(246, 248, 251, .95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 10px 26px rgba(36, 54, 91, .028);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-size: 14px;
    font-weight: 520;
    line-height: 1.75;
    white-space: pre;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 27, 49, .14) transparent;
}

body.tbf-ui .article-content .tbf-code-shell > pre,
body.tbf-ui .article-content .tbf-code-shell > .wp-block-code {
    margin: 0;
}

body.tbf-ui .article-content pre::before,
body.tbf-ui .article-content .wp-block-code::before {
    content: "CODE";
    position: absolute;
    top: 16px;
    left: 18px;
    height: 16px;
    display: flex;
    align-items: center;
    color: #8b95a4;
    font-family: var(--tbf-font-display) !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
}

body.tbf-ui .article-content pre::after,
body.tbf-ui .article-content .wp-block-code::after {
    display: none;
}

body.tbf-ui .article-content .tbf-code-copy {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 18px;
    width: auto;
    min-width: 0;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 0;
    outline: 0;
    color: #8b95a4;
    background: transparent;
    box-shadow: none;
    font-family: var(--tbf-font-body) !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, opacity .18s ease;
}

body.tbf-ui .article-content .tbf-code-copy svg {
    width: 12px;
    height: 12px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.tbf-ui .article-content .tbf-code-copy:hover,
body.tbf-ui .article-content .tbf-code-copy:focus-visible {
    color: #344159;
    background: transparent;
    box-shadow: none;
}

body.tbf-ui .article-content .tbf-code-copy:focus-visible {
    outline: 1px solid rgba(16, 27, 49, .18);
    outline-offset: 4px;
    border-radius: 2px;
}

body.tbf-ui .article-content .tbf-code-copy.is-copied {
    color: #566273;
    background: transparent;
}

body.tbf-ui .article-content pre::-webkit-scrollbar,
body.tbf-ui .article-content .wp-block-code::-webkit-scrollbar {
    height: 6px;
}

body.tbf-ui .article-content pre::-webkit-scrollbar-thumb,
body.tbf-ui .article-content .wp-block-code::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(16, 27, 49, .14);
}

body.tbf-ui .article-content pre code,
body.tbf-ui .article-content .wp-block-code code {
    display: block;
    min-width: max-content;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #2d394b !important;
    background: transparent !important;
    box-shadow: none;
    font: inherit !important;
    white-space: inherit;
    text-shadow: none !important;
}

/* Keep code blocks monochrome even when a syntax-highlighter injects spans. */
body.tbf-ui .article-content pre code *,
body.tbf-ui .article-content .wp-block-code code * {
    color: inherit !important;
    background: transparent !important;
    text-shadow: none !important;
}

body.tbf-ui .article-content :not(pre) > code {
    padding: .16em .42em;
    border: 1px solid rgba(16, 27, 49, .06);
    border-radius: 6px;
    color: #344159;
    background: rgba(16, 27, 49, .05);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-size: .88em;
    font-weight: 600;
}

body.night.tbf-ui .article-content pre,
body.night.tbf-ui .article-content .wp-block-code {
    border-color: rgba(255, 255, 255, .08);
    color: #d8dee8;
    background: linear-gradient(180deg, rgba(34, 37, 43, .96), rgba(27, 30, 35, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.night.tbf-ui .article-content pre code,
body.night.tbf-ui .article-content .wp-block-code code {
    color: #d8dee8 !important;
}

body.night.tbf-ui .article-content pre::before,
body.night.tbf-ui .article-content .wp-block-code::before {
    color: #8993a2;
}

body.night.tbf-ui .article-content .tbf-code-copy {
    color: #8993a2;
    background: transparent;
    box-shadow: none;
}

body.night.tbf-ui .article-content .tbf-code-copy:hover,
body.night.tbf-ui .article-content .tbf-code-copy:focus-visible,
body.night.tbf-ui .article-content .tbf-code-copy.is-copied {
    color: #d8dee8;
    background: transparent;
}

body.night.tbf-ui .article-content :not(pre) > code {
    border-color: rgba(255, 255, 255, .07);
    color: #d8dee8;
    background: rgba(255, 255, 255, .06);
}

@media (max-width: 620px) {
    body.tbf-ui .article-content .tbf-code-shell {
        margin-top: 18px;
        margin-bottom: 22px;
    }

    body.tbf-ui .article-content pre,
    body.tbf-ui .article-content .wp-block-code {
        margin-top: 18px;
        margin-bottom: 22px;
        padding: 47px 15px 15px;
        border-radius: 15px;
        font-size: 13px;
        line-height: 1.7;
    }

    body.tbf-ui .article-content .tbf-code-shell > pre,
    body.tbf-ui .article-content .tbf-code-shell > .wp-block-code {
        margin: 0;
    }

    body.tbf-ui .article-content pre::before,
    body.tbf-ui .article-content .wp-block-code::before {
        top: 15px;
        left: 14px;
    }

    body.tbf-ui .article-content .tbf-code-copy {
        top: 15px;
        right: 14px;
        min-width: 0;
        height: 16px;
        padding: 0;
        border-radius: 0;
        font-size: 12px !important;
    }
}

/* TBF AI readiness: keyboard submenu access. Mirrors the parent hover state
 * without changing Modown markup, classes, or click behavior. */
.nav-main li:focus-within > .sub-menu,
.nav-right li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

.tbf-module-heading {
    margin: 0 auto 48px;
    text-align: center;
}

.tbf-module-heading__en {
    display: block;
    color: var(--tbf-ink);
    font-family: var(--tbf-font-display) !important;
    font-size: clamp(58px, 7vw, 96px);
    line-height: .88;
    font-weight: 900;
    letter-spacing: -.065em;
    text-transform: uppercase;
}

.tbf-module-heading h2 {
    margin: 14px 0 0;
    color: var(--tbf-accent);
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: .055em;
}

.tbf-module-actions {
    margin-top: 28px;
    text-align: center;
}

.tbf-module-more,
.tbf-ui .mocat .more a,
.tbf-home-page .home-blogs .more a {
    width: auto;
    min-height: 43px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(16, 27, 49, .11);
    border-radius: 999px;
    color: var(--tbf-ink) !important;
    background: rgba(255, 255, 255, .48) !important;
    overflow: hidden;
    outline: 0;
    box-shadow: 0 10px 26px rgba(36, 54, 91, .055);
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}

.tbf-module-more::before,
.tbf-ui .mocat .more a::before,
.tbf-home-page .home-blogs .more a::before {
    display: none !important;
    content: none !important;
}

.tbf-module-more::after,
.tbf-ui .mocat .more a::after,
.tbf-home-page .home-blogs .more a::after {
    content: "↗" !important;
    display: inline-block !important;
    margin-left: 1px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.tbf-module-more i,
.tbf-ui .mocat .more a i {
    display: none !important;
}

.tbf-module-more:hover,
.tbf-ui .mocat .more a:hover,
.tbf-home-page .home-blogs .more a:hover {
    color: #fff !important;
    border-color: var(--tbf-ink);
    background: var(--tbf-ink) !important;
    box-shadow: 0 12px 28px rgba(16, 27, 49, .16);
    transform: translateY(-2px);
}

.tbf-ui .pagination {
    margin: 34px 0 58px;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    text-align: center;
    font-size: 12px;
}

.tbf-ui .pagination ul {
    margin: 0 !important;
    padding: 6px !important;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .075);
    border-radius: 999px;
    background: rgba(255, 255, 255, .66);
    box-shadow: 0 12px 30px rgba(34, 54, 92, .06), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}

.tbf-ui .pagination ul > li {
    position: relative;
    z-index: 2;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.tbf-ui .pagination .tbf-pagination-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 0;
    height: 38px;
    border-radius: 999px;
    background: var(--tbf-ink);
    box-shadow: 0 8px 20px rgba(16, 27, 49, .16);
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: transform .38s cubic-bezier(.22, .78, .22, 1), width .38s cubic-bezier(.22, .78, .22, 1), height .38s cubic-bezier(.22, .78, .22, 1), opacity .2s ease;
    opacity: 0;
}

.tbf-ui .pagination ul > li > a,
.tbf-ui .pagination ul > li > span {
    min-width: 38px;
    height: 38px;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 0 13px !important;
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: #6f7a8a;
    background: transparent !important;
    opacity: 1;
    font-family: var(--tbf-font-ui);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    position: relative;
    z-index: 3;
    transition: color .24s ease, transform .24s ease;
}

.tbf-ui .pagination ul > li > a:hover,
.tbf-ui .pagination ul > li > a:focus {
    color: #fff;
    background: transparent !important;
    transform: none;
}

.tbf-ui .pagination ul.is-indicator-ready:not(.is-indicator-previewing) > .active > a,
.tbf-ui .pagination ul.is-indicator-ready:not(.is-indicator-previewing) > .active > span,
.tbf-ui .pagination ul.is-indicator-ready:not(.is-indicator-previewing) > li > span.current,
.tbf-ui .pagination ul > li.is-indicator-target > a,
.tbf-ui .pagination ul > li.is-indicator-target > span {
    color: #fff !important;
    background: transparent !important;
    box-shadow: none;
}

.tbf-ui .pagination ul.is-indicator-previewing > .active:not(.is-indicator-target) > a,
.tbf-ui .pagination ul.is-indicator-previewing > .active:not(.is-indicator-target) > span,
.tbf-ui .pagination ul.is-indicator-previewing > li:not(.is-indicator-target) > span.current {
    color: #6f7a8a !important;
}

.tbf-ui .pagination ul > li > span,
.tbf-ui .pagination ul > .disabled > span,
.tbf-ui .pagination ul > .disabled > a {
    color: #a3abb7;
}

.tbf-ui .pagination ul > li #jump_page {
    width: 44px;
    height: 38px;
    margin: 0 3px 0 7px;
    padding: 0 8px;
    box-sizing: border-box;
    float: none;
    border: 1px solid rgba(16, 27, 49, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    line-height: 36px;
    text-align: center;
    vertical-align: middle;
}

.tbf-ui .pagination ul > li .page-jump {
    padding: 0 8px !important;
    align-items: center;
    justify-content: center;
}

.tbf-ui .pagination-trigger {
    margin: 30px 0 56px;
    padding: 0 !important;
    background: transparent !important;
    text-align: center;
}

.tbf-ui .pagination-trigger a {
    min-height: 42px;
    margin: 0;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 27, 49, .09);
    border-radius: 999px;
    color: var(--tbf-ink) !important;
    background: rgba(255, 255, 255, .68) !important;
    box-shadow: 0 10px 26px rgba(34, 54, 92, .055);
    font-size: 13px;
    font-weight: 650;
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}

.tbf-ui .pagination-trigger a:hover {
    color: #fff !important;
    background: var(--tbf-ink) !important;
}

@media (max-width: 760px) {
    .tbf-ui .pagination {
        margin: 26px 0 42px;
    }

    .tbf-ui .pagination ul {
        gap: 3px;
        padding: 5px !important;
    }

    .tbf-ui .pagination ul > li > a,
    .tbf-ui .pagination ul > li > span {
        min-width: 34px;
        height: 34px;
        padding: 0 10px !important;
        font-size: var(--tbf-font-size-min);
    }
}

.tbf-home-section {
    position: relative;
    padding: 72px 0;
    border: 0;
}

.tbf-home-page .tbf-home-section--plain {
    background: #fff;
}

.tbf-home-page .tbf-home-section--soft {
    background:
        radial-gradient(circle at 82% 18%, rgba(220, 231, 251, .34), transparent 32%),
        linear-gradient(180deg, #f7f9fd 0%, #f4f7fc 100%);
}

.tbf-entity-grid {
    display: grid;
    justify-content: center;
}

.tbf-entity-grid--studio {
    grid-template-columns: repeat(auto-fit, minmax(96px, 122px));
    gap: 28px 28px;
}

.tbf-entity-grid--model {
    grid-template-columns: repeat(auto-fit, minmax(132px, 164px));
    gap: 30px 22px;
}

/*
 * Homepage entity modules are component-responsive.
 * The page frame is still controlled only by the global .container system;
 * this layer only decides how many entity cards fit inside the width that the
 * module actually receives.  This avoids device/orientation-specific rules and
 * also behaves correctly inside tablet split-screen windows.
 */
body.tbf-home-page .tbf-entity-module > .container {
    container-type: inline-size;
    container-name: tbf-home-entity;
}

body.tbf-home-page .tbf-entity-grid--studio,
body.tbf-home-page .tbf-entity-grid--model {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    --tbf-home-limit-tier: mobile;
}

@container tbf-home-entity (min-width: 680px) {
    body.tbf-home-page .tbf-entity-grid--studio,
    body.tbf-home-page .tbf-entity-grid--model {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        --tbf-home-limit-tier: tablet;
    }
}

@container tbf-home-entity (min-width: 840px) {
    body.tbf-home-page .tbf-entity-grid--studio,
    body.tbf-home-page .tbf-entity-grid--model {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        --tbf-home-limit-tier: tablet;
    }
}

@container tbf-home-entity (min-width: 1040px) {
    body.tbf-home-page .tbf-entity-grid--studio {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 28px;
        --tbf-home-limit-tier: desktop;
    }

    body.tbf-home-page .tbf-entity-grid--model {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 30px 22px;
        --tbf-home-limit-tier: desktop;
    }
}

.tbf-studio-card,
.tbf-model-card {
    min-width: 0;
    text-align: center;
}

.tbf-studio-card__link,
.tbf-model-card__link {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--tbf-ink) !important;
}

.tbf-studio-card__link {
    padding: 2px 3px;
}

.tbf-studio-card__image {
    width: 108px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(16, 27, 49, .055);
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 30px rgba(36, 54, 91, .045), inset 0 1px 0 rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tbf-studio-card__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    transform: none;
}

.tbf-studio-card__image i,
.tbf-model-card__image i {
    color: rgba(16, 27, 49, .22);
    font-size: 34px;
    font-style: normal;
    font-weight: 850;
}

.tbf-studio-card__name,
.tbf-model-card__name {
    max-width: 100%;
    overflow: hidden;
    color: var(--tbf-ink);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbf-studio-card__name {
    margin-top: 12px;
}

.tbf-studio-card__count,
.tbf-model-card__count {
    display: block;
    margin-top: 4px;
    color: var(--tbf-muted);
    font-size: 12px;
    line-height: 1.35;
}

.tbf-studio-card__link:hover .tbf-studio-card__image {
    border-color: rgba(16, 27, 49, .11);
}

.tbf-studio-card__link:hover .tbf-studio-card__image,
.tbf-model-card__link:hover .tbf-model-card__image {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 40px rgba(36, 54, 91, .09), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.tbf-model-card__link {
    padding: 4px 3px;
}

.tbf-model-card__image {
    position: relative;
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #edf2f8;
    box-shadow: 0 12px 30px rgba(35, 52, 84, .08);
}

.tbf-model-card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    object-fit: cover;
    object-position: 50% 14%;
}

.tbf-model-card__name {
    margin-top: 13px;
}

.tbf-ui .grids {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin: 0 0 30px;
}

.tbf-ui .grids::before,
.tbf-ui .grids::after {
    display: none;
}

.tbf-ui .grids .post.grid {
    position: relative;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .07);
    border-radius: 20px;
    color: var(--tbf-ink);
    background: rgba(255, 255, 255, .78) !important;
    background-image: none !important;
    box-shadow: 0 13px 34px rgba(36, 54, 91, .05), inset 0 1px 0 rgba(255, 255, 255, .66);
}

.tbf-ui .grids .post.grid:hover {
    border-color: rgba(16, 27, 49, .1);
    box-shadow: 0 20px 46px rgba(36, 54, 91, .085), inset 0 1px 0 rgba(255, 255, 255, .86);
}

.tbf-ui .grids .post.grid::before,
.tbf-ui .grids .post.grid.grid-ts::before {
    display: none !important;
}

.tbf-ui .grids .post.grid .img {
    position: relative;
    width: 100%;
    height: auto !important;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #eef2f7;
}

.tbf-ui .grids .post.grid .img > a {
    display: block;
    height: 100%;
}

.tbf-ui .grids .post.grid .thumb,
.tbf-ui .grids .post.grid.grid-ts img {
    width: 100%;
    height: 100%;
    display: block;
    visibility: visible !important;
    object-fit: cover;
    object-position: 50% 12%;
    opacity: 1 !important;
    transform: none !important;
}

.tbf-ui .grids .post.grid:hover .thumb {
    transform: none !important;
}

.tbf-ui .grids .post.grid .con {
    min-height: 0;
    padding: 14px 16px 15px;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 9px;
    color: var(--tbf-ink) !important;
    background: rgba(255, 255, 255, .84) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Journal/video list cards keep only brand/identity + one-line title in the
 * body. Resource count/capacity live on the cover hover layer; date is omitted
 * from listing cards so the visual rhythm stays compact across every surface. */
.tbf-ui .grids .post.grid.tbf-work-card--journal .con,
.tbf-ui .grids .post.grid.tbf-work-card--video .con {
    padding: 11px 16px 12px;
    gap: 6px;
}

.tbf-ui .grids .post.grid.tbf-work-card--journal .con h3,
.tbf-ui .grids .post.grid.tbf-work-card--video .con h3,
.tbf-ui .grids .post.grid.tbf-work-card--journal .con h3 a,
.tbf-ui .grids .post.grid.tbf-work-card--video .con h3 a {
    min-height: 1.4em !important;
    height: 1.4em !important;
    max-height: 1.4em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1;
}

.tbf-ui .grids .post.grid .con h3 {
    min-height: 2.8em;
    height: 2.8em;
    max-height: 2.8em;
    margin: 0;
    overflow: hidden;
    color: var(--tbf-ink) !important;
    font-family: var(--tbf-font-sans) !important;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -.018em;
    white-space: normal !important;
    text-overflow: clip !important;
    word-break: break-word;
}

.tbf-ui .grids .post.grid .con h3 a,
.tbf-ui .grids .post.grid.grid-ts .con h3 a,
.tbf-ui .grids .post.grid .con h3 a:visited {
    width: 100%;
    min-height: 2.8em !important;
    height: 2.8em !important;
    max-height: 2.8em !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--tbf-ink) !important;
    font-family: var(--tbf-font-display) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2;
    opacity: 1 !important;
    text-shadow: none !important;
}

.tbf-ui .grids .post.grid .con h3 a:hover {
    color: var(--tbf-accent) !important;
}

/* 今日新发布：只给当天新发布的期刊/视频标题加一个克制的小“新”标。 */
.tbf-ui .grids .post.grid .con h3.tbf-work-card__title.has-new {
    position: relative;
    padding-left: 22px;
}

.tbf-ui .grids .post.grid .con h3.tbf-work-card__title.has-new > a {
    width: auto !important;
}

.tbf-work-card__new-badge {
    position: absolute;
    top: 2px;
    left: 0;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 94, 126, .18);
    border-radius: 5px;
    color: #ef5d7d;
    background: rgba(244, 94, 126, .08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    font-family: var(--tbf-font-sans) !important;
    font-size: 10px;
    font-weight: 760;
    line-height: 1;
    pointer-events: none;
}

.tbf-work-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.tbf-work-brand__logo {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(16, 27, 49, .065);
    border-radius: 50%;
    color: var(--tbf-ink) !important;
    background: rgba(245, 247, 251, .92);
}

.tbf-work-brand__logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    transform: none;
}

.tbf-work-brand__logo span {
    font-size: 12px;
    font-weight: 850;
}

.tbf-work-brand__identity {
    min-width: 0;
    flex: 1;
}

.tbf-work-identity {
    min-height: 18px;
    overflow: hidden;
    color: var(--tbf-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbf-work-identity a {
    color: inherit !important;
}

.tbf-work-identity__studio {
    color: var(--tbf-ink-2) !important;
    font-weight: 760;
}

.tbf-work-identity__models,
.tbf-work-identity__model {
    color: var(--tbf-accent) !important;
    font-weight: 720;
}

.tbf-work-identity a:hover {
    text-decoration: underline;
}

.tbf-dot {
    margin: 0 5px;
    color: #abb3bf;
    font-weight: 400;
}

/* Journal/video cards keep quantity inside the existing issue badge.
 * On real mouse hover the badge expands smoothly from "NO.xxx" to
 * "NO.xxx | xx P/V". Capacity is intentionally absent from listing cards. */
.tbf-work-media-resource {
    display: none !important;
}

.tbf-work-type__count {
    max-width: 0;
    margin-left: -6px;
    padding-left: 0;
    overflow: hidden;
    border-left: 1px solid transparent;
    color: #6f7b8e;
    font-size: var(--tbf-font-size-min);
    font-weight: 720;
    letter-spacing: .01em;
    line-height: 16px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
    transition: max-width .30s cubic-bezier(.22,1,.36,1), margin-left .30s cubic-bezier(.22,1,.36,1), padding-left .30s cubic-bezier(.22,1,.36,1), border-color .18s ease, opacity .16s ease, transform .30s cubic-bezier(.22,1,.36,1);
}

@media (hover: hover) and (pointer: fine) {
    .tbf-work-card--journal .img:hover .tbf-work-type__count,
    .tbf-work-card--journal .img:focus-within .tbf-work-type__count,
    .tbf-work-card--video .img:hover .tbf-work-type__count,
    .tbf-work-card--video .img:focus-within .tbf-work-type__count,
    .tbf-work-list .img:hover .tbf-work-type__count,
    .tbf-work-list .img:focus-within .tbf-work-type__count {
        max-width: 104px;
        margin-left: 0;
        padding-left: 8px;
        border-left-color: rgba(16, 27, 49, .14);
        opacity: 1;
        transform: translateX(0);
    }
}

@media (hover: none), (pointer: coarse) {
    .tbf-work-type__count {
        display: none !important;
    }
}

.tbf-work-card--journal .tbf-work-footer,
.tbf-work-card--video .tbf-work-footer {
    display: none !important;
}

.tbf-work-footer {
    min-width: 0;
    padding-top: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tbf-work-resource,
.tbf-work-date {
    overflow: hidden;
    color: #87909f;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbf-work-resource {
    min-width: 0;
}

.tbf-work-date {
    flex: 0 0 auto;
    color: #a0a8b5;
}

.tbf-work-type,
.tbf-access-badge,
.tbf-work-resolution {
    position: absolute;
    z-index: 5;
    top: 13px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: var(--tbf-font-size-min);
    line-height: 1;
    font-weight: 760;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tbf-work-type {
    left: 13px;
    color: var(--tbf-ink);
    border: 1px solid rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 7px 18px rgba(30, 46, 77, .065), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.tbf-work-type b,
.tbf-work-type em {
    display: inline-flex;
    align-items: center;
    height: 16px;
    line-height: 16px;
    font-style: normal;
}

.tbf-work-type em {
    padding-left: 0;
    border-left: 0;
    color: var(--tbf-ink);
    font-size: var(--tbf-font-size-min);
    font-weight: 720;
    letter-spacing: .02em;
}

/* Only a real type-label + issue pair needs a permanent separator.
 * Journal/video badges start with the issue itself; their resource-count
 * separator belongs to the hidden hover expansion and must not leak before
 * hover merely because the hidden count span is a sibling. */
.tbf-work-type b + em {
    padding-left: 6px;
    border-left: 1px solid rgba(16, 27, 49, .14);
    color: #6f7b8e;
}

.tbf-work-resolution {
    display: none;
    left: 13px;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #35a9ff, #596cff);
    box-shadow: 0 7px 18px rgba(35, 111, 220, .22);
    font-size: var(--tbf-font-size-min);
    font-weight: 850;
    letter-spacing: .02em;
}

.tbf-access-badge {
    right: 13px;
    min-width: 42px;
    color: #fff;
    border: 0;
    background: rgba(16, 27, 49, .82);
    box-shadow: 0 7px 18px rgba(16, 27, 49, .13);
}

.tbf-access-badge i,
.tbf-access-badge b {
    position: static !important;
    width: auto !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center;
    line-height: 16px !important;
    vertical-align: middle;
}

.tbf-access-badge i {
    font-size: 12px !important;
    transform: translateY(0) !important;
}

.tbf-access-badge i::before {
    display: block;
    line-height: 16px !important;
}

.tbf-access-badge b {
    font-size: var(--tbf-font-size-min);
    font-weight: 800;
}

.tbf-access-badge b::before,
.tbf-access-badge b::after {
    display: none !important;
    content: none !important;
}

.tbf-access-badge--vip {
    color: #6d5100;
    background: rgba(255, 239, 172, .9);
}

.tbf-access-badge--free {
    color: #145d3a;
    background: rgba(217, 247, 230, .91);
}

.tbf-ui .grids .post.grid > .vip-tag,
.tbf-ui .grids .post.grid .price,
.tbf-ui .grids .post.grid .img-cat,
.tbf-ui .grids .post.grid .excerpt,
.tbf-ui .grids .post.grid .grid-meta,
.tbf-ui .grids .post.grid .grid-author,
.tbf-ui .grids .post.grid .tag,
.tbf-ui .grids .post.grid .cat {
    display: none !important;
}

.tbf-ui .grids .post.grid > .recommend-tag {
    top: auto;
    right: 11px;
    bottom: 11px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    font-size: var(--tbf-font-size-min);
}

.tbf-ui .lists .post.list,
.tbf-ui .lists .post.grid {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .07);
    border-radius: 18px;
    background: rgba(255, 255, 255, .76) !important;
    box-shadow: 0 11px 30px rgba(36, 54, 91, .045);
}

.tbf-ui .lists .post .img {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.tbf-ui .lists .post .con h3,
.tbf-ui .lists .post .con h3 a {
    color: var(--tbf-ink) !important;
    font-weight: 760;
}

.tbf-ui .lists .post .excerpt,
.tbf-ui .lists .post .grid-meta,
.tbf-ui .lists .post .cat,
.tbf-ui .lists .post .tag {
    display: none !important;
}

.tbf-work-list__foot .tbf-work-footer {
    flex: 1;
}

.tbf-ui .mocat {
    position: relative;
    padding: 72px 0;
}

.tbf-ui .mocat > .container > h2 {
    text-align: center;
}

.tbf-ui .mocat .desc {
    max-width: 680px;
    margin: -18px auto 29px;
    text-align: center;
    color: var(--tbf-muted);
}

.tbf-ui .mocat .child {
    margin: -10px auto 29px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.tbf-ui .mocat .child li {
    margin: 0;
}

.tbf-ui .mocat .child a {
    min-height: 34px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tbf-border);
    border-radius: 999px;
    color: var(--tbf-muted);
    background: rgba(255, 255, 255, .56);
}

.tbf-ui .mocat .child a.active,
.tbf-ui .mocat .child a:hover {
    color: #fff;
    border-color: var(--tbf-ink);
    background: var(--tbf-ink);
}

.tbf-ui .mocat .more {
    margin-top: 28px;
    text-align: center;
}

.tbf-ui .mocats .molis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.tbf-ui .mocats .moli {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .065);
    border-radius: 24px;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 14px 36px rgba(36, 54, 91, .05), inset 0 1px 0 rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}

.tbf-ui .mocats .moli-header {
    position: relative;
    min-height: 176px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 23px 23px 0 0;
    background-color: #edf2f9;
    background-size: cover !important;
    background-position: center !important;
}

.tbf-ui .mocats .moli-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 20, 37, .02), rgba(11, 20, 37, .66));
}

.tbf-ui .mocats .moli-header h3,
.tbf-ui .mocats .moli-header .des {
    position: relative;
    z-index: 2;
    color: #fff;
}

.tbf-ui .mocats .moli-header h3 {
    margin: 0;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 820;
}

.tbf-ui .mocats .moli-header .des {
    margin: 8px 0 0;
    opacity: .82;
    font-size: 12px;
    line-height: 1.6;
}

.tbf-ui .mocats .moli > ul {
    padding: 14px 20px 18px;
}

.tbf-ui .mocats .moli > ul li {
    min-width: 0;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(16, 27, 49, .055);
}

.tbf-ui .mocats .moli > ul li:last-child {
    border-bottom: 0;
}

.tbf-ui .mocats .moli > ul li > i {
    color: var(--tbf-accent);
    font-size: var(--tbf-font-size-min);
    font-style: normal;
    font-weight: 800;
}

.tbf-ui .mocats .moli > ul li > a {
    min-width: 0;
    overflow: hidden;
    color: var(--tbf-ink) !important;
    font-size: 13px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbf-ui .mocats .moli > ul li > span {
    color: var(--tbf-muted);
    font-size: var(--tbf-font-size-min);
}

.tbf-studio-profile {
    padding: 46px 0 18px;
}

.tbf-studio-profile__main {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 390px;
    gap: 34px;
    align-items: center;
    padding: 30px;
    border: 1px solid rgba(16, 27, 49, .07);
    border-radius: 28px;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 18px 48px rgba(36, 54, 91, .055), inset 0 1px 0 rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
}

.tbf-studio-profile__logo {
    width: 150px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #f2f5fa;
}

.tbf-studio-profile__logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    transform: none;
}

.tbf-studio-profile__logo span {
    color: rgba(16, 27, 49, .22);
    font-size: 52px;
    font-weight: 850;
}

.tbf-studio-profile__eyebrow {
    color: var(--tbf-accent);
    font-size: var(--tbf-font-size-min);
    font-weight: 800;
    letter-spacing: .16em;
}

.tbf-studio-profile__copy h1 {
    margin: 7px 0;
    color: var(--tbf-ink);
    font-size: 36px;
    line-height: 1.15;
}

.tbf-studio-profile__aliases {
    margin: 0 0 12px;
    color: #7b8493;
    font-size: 13px;
}

.tbf-studio-profile__intro {
    max-width: 720px;
    margin: 0;
    color: var(--tbf-muted);
    font-size: 14px;
    line-height: 1.8;
}

.tbf-studio-profile__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.tbf-studio-profile__stats span {
    padding: 16px 12px;
    border: 1px solid rgba(16, 27, 49, .06);
    border-radius: 17px;
    text-align: center;
    background: rgba(248, 250, 254, .62);
}

.tbf-studio-profile__stats strong {
    display: block;
    color: var(--tbf-ink);
    font-size: 22px;
    line-height: 1;
}

.tbf-studio-profile__stats small {
    display: block;
    margin-top: 7px;
    color: var(--tbf-muted);
    font-size: var(--tbf-font-size-min);
}

.tbf-studio-profile__models {
    margin: 22px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.tbf-studio-profile__models a {
    width: 82px;
    color: var(--tbf-ink);
    text-align: center;
}

.tbf-studio-profile__model-image {
    width: 68px;
    aspect-ratio: 1;
    margin: 0 auto 7px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #eef2f7;
}

.tbf-studio-profile__model-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
}

.tbf-studio-profile__model-image i {
    color: #a4adbc;
    font-style: normal;
    font-size: 22px;
    font-weight: 800;
}

.tbf-studio-profile__models b {
    display: block;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbf-ui .tbf-sliding-pills {
    position: relative;
    isolation: isolate;
}

.tbf-ui .tbf-sliding-pills--compact {
    padding: 5px;
    gap: 4px !important;
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .075);
    border-radius: 999px;
    background: rgba(255, 255, 255, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}

.tbf-ui .tbf-pill-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 0;
    height: 0;
    border-radius: 999px;
    background: var(--tbf-ink);
    box-shadow: none;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: transform .38s cubic-bezier(.22, .78, .22, 1), width .38s cubic-bezier(.22, .78, .22, 1), height .38s cubic-bezier(.22, .78, .22, 1), opacity .18s ease;
}

.tbf-ui .tbf-sliding-pills > :where(a, button) {
    position: relative;
    z-index: 2;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color .24s ease, transform .24s ease !important;
}

.tbf-ui .tbf-sliding-pills.is-pill-indicator-ready > :where(a, button).is-selection-target {
    color: #fff !important;
    border-color: transparent !important;
    background: transparent !important;
    transform: none !important;
}

/* Keep the current choice visible if JavaScript is delayed or an AJAX update
 * temporarily rebuilds the controls before the sliding indicator is ready. */
.tbf-ui .tbf-sliding-pills:not(.is-pill-indicator-ready) > :where(a, button).is-active,
.tbf-ui .tbf-sliding-pills:not(.is-pill-indicator-ready) > :where(a, button).active,
.tbf-ui .tbf-sliding-pills:not(.is-pill-indicator-ready) > :where(a, button)[aria-current="page"],
.tbf-ui .tbf-sliding-pills:not(.is-pill-indicator-ready) > :where(a, button)[aria-selected="true"] {
    color: #fff !important;
    background: var(--tbf-ink) !important;
    box-shadow: none !important;
}

.tbf-ui .tbf-sliding-pills.is-pill-indicator-ready.is-selection-previewing > :where(a, button).is-active:not(.is-selection-target),
.tbf-ui .tbf-sliding-pills.is-pill-indicator-ready.is-selection-previewing > :where(a, button).active:not(.is-selection-target) {
    color: var(--tbf-muted) !important;
}

.tbf-ui .pagination .tbf-pagination-indicator.is-circle,
.tbf-ui .tbf-pill-indicator.is-circle {
    border-radius: 50% !important;
}

.tbf-ui .tbf-sliding-pills--circle > :where(a, button) {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
    white-space: nowrap;
}

.tbf-ui .tbf-sliding-pills--circle.tbf-sliding-pills--compact {
    gap: 5px !important;
}

.tbf-ui .tbf-sliding-pills--hero .tbf-pill-indicator {
    border-radius: 999px;
}

.tbf-ui .tbf-sliding-pills--hero > a.is-selection-target {
    color: #fff !important;
}

@media (max-width: 760px) {
    .tbf-ui .tbf-sliding-pills--circle > :where(a, button) {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }
}



/* Site tips: align Modown's native notice bar and popup with the TBF glass UI. */
body.tbf-ui .sitetips-default {
    width: min(1180px, calc(100vw - 48px));
    max-width: none;
    bottom: 24px;
    margin: 0 auto;
    padding: 15px 62px 15px 18px;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 18px;
    color: var(--tbf-ink-2);
    background: linear-gradient(145deg, rgba(250, 253, 255, .91), rgba(244, 248, 255, .84));
    box-shadow: 0 18px 50px rgba(31, 49, 85, .13), inset 0 1px 0 rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(24px) saturate(158%);
    backdrop-filter: blur(24px) saturate(158%);
    font-family: var(--tbf-font-sans);
    font-size: 14px;
    line-height: 1.65;
    animation: tbf-sitetips-bar-enter .24s cubic-bezier(.2, .7, .2, 1) both;
}

body.tbf-ui .sitetips-default > .icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border: 1px solid rgba(16, 27, 49, .06);
    border-radius: 50%;
    color: var(--tbf-ink-2);
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.tbf-ui .sitetips-default .close,
body.tbf-ui .sitetips-pop .close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 27, 49, .08);
    border-radius: 50%;
    color: #68758b !important;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 8px 18px rgba(31, 49, 85, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    text-decoration: none !important;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

body.tbf-ui .sitetips-default .close {
    top: 50%;
    right: 14px;
    bottom: auto;
    line-height: 36px;
    transform: translateY(-50%);
}

body.tbf-ui .sitetips-default .close:hover,
body.tbf-ui .sitetips-pop .close:hover {
    color: var(--tbf-ink) !important;
    background: rgba(255, 255, 255, .9);
}

body.tbf-ui .sitetips-default .close:hover {
    transform: translateY(-50%) scale(1.04);
}

body.tbf-ui .sitetips-pop .close:hover {
    transform: scale(1.04);
}

body.tbf-ui .sitetips-default .close .icon,
body.tbf-ui .sitetips-pop .close .icon {
    top: 0;
    font-size: 18px;
    line-height: 1;
}

body.tbf-ui .sitetips-default a:not(.close):not(.btn) {
    padding: 0 !important;
    color: var(--tbf-ink) !important;
    background: transparent !important;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: rgba(16, 27, 49, .22);
    text-underline-offset: 3px;
}

body.tbf-ui .sitetips-default .btn {
    min-height: 34px;
    margin-left: 8px;
    padding: 0 13px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #101b31 !important;
    border-radius: 11px;
    color: #fff !important;
    background: #101b31 !important;
    box-shadow: 0 8px 18px rgba(16, 27, 49, .14);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

body.tbf-ui .sitetips-pop-shadow {
    background: rgba(19, 28, 46, .34);
    opacity: 1;
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
}

body.tbf-ui .sitetips-pop {
    width: min(460px, calc(100vw - 32px));
    min-height: 0;
    max-height: min(78vh, 680px);
    overflow: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 26px;
    color: var(--tbf-ink);
    background: linear-gradient(145deg, rgba(250, 253, 255, .93), rgba(244, 248, 255, .84));
    box-shadow: 0 34px 92px rgba(26, 39, 67, .23), inset 0 1px 0 rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(34px) saturate(168%);
    backdrop-filter: blur(34px) saturate(168%);
    font-family: var(--tbf-font-sans);
    font-size: 14px;
    line-height: 1.75;
    animation: tbf-sitetips-pop-enter .24s cubic-bezier(.2, .7, .2, 1) both;
}

body.tbf-ui .sitetips-pop::before,
body.tbf-ui .sitetips-pop::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

body.tbf-ui .sitetips-pop .sitetips-header {
    margin: 0;
    padding: 28px 72px 10px 28px;
    text-align: left;
}

body.tbf-ui .sitetips-pop .sitetips-header h3 {
    margin: 0;
    color: var(--tbf-ink);
    font-size: 20px;
    font-weight: 760;
    line-height: 1.35;
    letter-spacing: -.02em;
}

body.tbf-ui .sitetips-pop .sitetips-header h3::after {
    content: none !important;
    display: none !important;
}

body.tbf-ui .sitetips-pop .sitetips-main {
    padding: 7px 28px 30px;
    color: var(--tbf-ink-2);
}

body.tbf-ui .sitetips-pop .sitetips-main p {
    margin: 0 0 14px;
}

body.tbf-ui .sitetips-pop .sitetips-main p:last-child {
    margin-bottom: 0;
}

body.tbf-ui .sitetips-pop .sitetips-main a:not(.btn) {
    color: var(--tbf-ink);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: rgba(16, 27, 49, .22);
    text-underline-offset: 3px;
}

body.tbf-ui .sitetips-pop .btn {
    width: 100%;
    min-height: 46px;
    margin-top: 20px;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #101b31 !important;
    border-radius: 14px;
    color: #fff !important;
    background: #101b31 !important;
    box-shadow: 0 12px 28px rgba(16, 27, 49, .16);
    font-size: 14px;
    font-weight: 720;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

body.tbf-ui .sitetips-pop .close {
    top: 16px;
    right: 16px;
    line-height: 36px;
}

body.night.tbf-ui .sitetips-default,
body.night.tbf-ui .sitetips-pop {
    border-color: rgba(255, 255, 255, .1);
    color: #e7edf7;
    background: linear-gradient(145deg, rgba(25, 34, 52, .94), rgba(18, 27, 44, .9));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.night.tbf-ui .sitetips-pop .sitetips-header h3,
body.night.tbf-ui .sitetips-pop .sitetips-main,
body.night.tbf-ui .sitetips-default a:not(.close):not(.btn),
body.night.tbf-ui .sitetips-pop .sitetips-main a:not(.btn) {
    color: #e7edf7 !important;
}

@keyframes tbf-sitetips-bar-enter {
    from { transform: translateY(8px); }
    to { transform: translateY(0); }
}

@keyframes tbf-sitetips-pop-enter {
    from { transform: translateY(calc(-50% + 8px)); }
    to { transform: translateY(-50%); }
}

@media (max-width: 620px) {
    body.tbf-ui .sitetips-default {
        width: calc(100vw - 24px);
        bottom: 16px;
        padding: 14px 50px 14px 14px;
        border-radius: 16px;
        font-size: 13px;
        line-height: 1.6;
        text-align: left;
    }

    body.tbf-ui .sitetips-default > .icon {
        width: 28px;
        height: 28px;
        margin-right: 7px;
    }

    body.tbf-ui .sitetips-default .close {
        top: 10px;
        right: 10px;
        bottom: auto;
        width: 34px;
        height: 34px;
        transform: none;
    }

    body.tbf-ui .sitetips-default .close:hover {
        transform: scale(1.04);
    }

    body.tbf-ui .sitetips-pop {
        width: calc(100vw - 24px);
        max-width: 460px;
        max-height: calc(100vh - 40px);
        border-radius: 22px;
    }

    body.tbf-ui .sitetips-pop .sitetips-header {
        padding: 24px 64px 9px 22px;
    }

    body.tbf-ui .sitetips-pop .sitetips-header h3 {
        font-size: 18px;
    }

    body.tbf-ui .sitetips-pop .sitetips-main {
        padding: 6px 22px 24px;
    }

    body.tbf-ui .sitetips-pop .close {
        top: 11px;
        right: 11px;
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tbf-ui .sitetips-default,
    body.tbf-ui .sitetips-pop {
        animation: none;
    }
}

/* Unified glass modal surfaces: Layer dialogs, ErphpDown checkout and login/register. */
body.tbf-ui .layui-layer-shade.tbf-glass-shade {
    background: rgba(19, 28, 46, .34) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%);
}

body.tbf-ui .layui-layer.tbf-glass-layer {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .84) !important;
    border-radius: 28px !important;
    color: var(--tbf-ink) !important;
    background: linear-gradient(145deg, rgba(250, 253, 255, .90), rgba(244, 248, 255, .80)) !important;
    box-shadow: 0 32px 90px rgba(26, 39, 67, .22), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
    -webkit-backdrop-filter: blur(34px) saturate(170%);
    backdrop-filter: blur(34px) saturate(170%);
}

body.tbf-ui .tbf-glass-layer .layui-layer-title {
    height: 64px;
    padding: 0 72px 0 26px;
    display: flex;
    align-items: center;
    border: 0 !important;
    color: var(--tbf-ink) !important;
    background: transparent !important;
    font-family: var(--tbf-font-sans);
    font-size: 18px;
    font-weight: 760;
    line-height: 1;
}

body.tbf-ui .tbf-glass-layer .layui-layer-setwin {
    top: 14px;
    right: 16px;
}

body.tbf-ui .tbf-glass-layer .layui-layer-setwin .layui-layer-close1,
body.tbf-ui .tbf-glass-layer .layui-layer-setwin .layui-layer-close2 {
    width: 36px;
    height: 36px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .08);
    border-radius: 50%;
    background: rgba(255, 255, 255, .66) !important;
    box-shadow: 0 8px 18px rgba(31, 49, 85, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
}

body.tbf-ui .tbf-glass-layer .layui-layer-setwin .layui-layer-close1::before,
body.tbf-ui .tbf-glass-layer .layui-layer-setwin .layui-layer-close1::after,
body.tbf-ui .tbf-glass-layer .layui-layer-setwin .layui-layer-close2::before,
body.tbf-ui .tbf-glass-layer .layui-layer-setwin .layui-layer-close2::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 10px;
    width: 16px;
    height: 1.8px;
    border-radius: 999px;
    background: #536078;
}

body.tbf-ui .tbf-glass-layer .layui-layer-setwin a::before { transform: rotate(45deg); }
body.tbf-ui .tbf-glass-layer .layui-layer-setwin a::after { transform: rotate(-45deg); }

body.tbf-ui .tbf-glass-layer.layui-layer-dialog .layui-layer-content,
body.tbf-ui .tbf-glass-layer.layui-layer-page .layui-layer-content {
    padding: 22px 26px 26px !important;
    color: var(--tbf-ink-2) !important;
    background: transparent !important;
    font-family: var(--tbf-font-sans);
    font-size: 14px;
    line-height: 1.7;
}

body.tbf-ui .tbf-glass-layer .layui-layer-btn {
    padding: 0 26px 24px !important;
    border: 0 !important;
    background: transparent !important;
}

body.tbf-ui .tbf-glass-layer .layui-layer-btn a {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 27, 49, .08) !important;
    border-radius: 14px !important;
    color: var(--tbf-ink) !important;
    background: rgba(255, 255, 255, .70) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    font-weight: 700;
}

body.tbf-ui .tbf-glass-layer .layui-layer-btn .layui-layer-btn0 {
    border-color: #101b31 !important;
    color: #fff !important;
    background: #101b31 !important;
    box-shadow: 0 12px 28px rgba(16, 27, 49, .16);
}

body.tbf-ui .tbf-glass-layer .erphpdown-type-desc {
    margin: -4px 0 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(16, 27, 49, .07);
    border-radius: 18px;
    background: rgba(255, 255, 255, .52) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.tbf-ui .tbf-glass-layer .erphpdown-type-desc .type-name {
    color: var(--tbf-ink-2);
    font-size: 14px;
    font-weight: 650;
}

body.tbf-ui .tbf-glass-layer .erphpdown-type-desc .type-price {
    margin-top: 4px;
    color: var(--tbf-ink);
}

body.tbf-ui .tbf-glass-layer .erphpdown-type-desc .type-price span {
    font-size: 34px;
    font-weight: 650;
    letter-spacing: -.035em;
}

body.tbf-ui .tbf-glass-layer .erphpdown-type-link {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px;
    margin: 0 0 10px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    float: none !important;
    border: 1px solid rgba(16, 27, 49, .08) !important;
    border-radius: 16px !important;
    color: var(--tbf-ink) !important;
    background: rgba(255, 255, 255, .70) !important;
    box-shadow: 0 8px 22px rgba(31, 49, 85, .07), inset 0 1px 0 rgba(255, 255, 255, .88);
    font-size: 14px;
    font-weight: 700;
}

body.tbf-ui .tbf-glass-layer .erphpdown-type-credit {
    border-color: #101b31 !important;
    color: #fff !important;
    background: #101b31 !important;
    box-shadow: 0 12px 28px rgba(16, 27, 49, .16);
}

body.tbf-ui .tbf-glass-layer .erphpdown-promo {
    margin-top: 14px;
    color: var(--tbf-muted);
}

/* ErphpDown purchase iframe keeps the same glass shell while its inner page is restyled by JS. */
body.tbf-ui .tbf-erphp-purchase-layer .layui-layer-content,
body.tbf-ui .tbf-erphp-purchase-layer iframe {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Parent-theme login/register overlay aligned to the same modal language. */
body.tbf-ui .sign-mask {
    background: rgba(19, 28, 46, .34) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%);
}

body.tbf-ui .sign .sign-box {
    width: min(420px, calc(100vw - 30px)) !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(250, 253, 255, .91), rgba(244, 248, 255, .82));
    box-shadow: 0 34px 92px rgba(26, 39, 67, .23), inset 0 1px 0 rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(34px) saturate(170%);
    backdrop-filter: blur(34px) saturate(170%);
}

body.tbf-ui .sign .sign-box.has-left {
    width: min(720px, calc(100vw - 30px)) !important;
    padding-left: 280px;
}

body.tbf-ui .sign .sign-box.has-left .loginimage {
    width: 280px;
    border-radius: 29px 0 0 29px;
}

body.tbf-ui .sign form {
    padding: 30px;
}

body.tbf-ui .sign .logo-login {
    height: 66px;
}

body.tbf-ui .sign .form-item {
    margin-bottom: 12px;
}

body.tbf-ui .sign .form-control,
body.tbf-ui .sign .erphp-weixin-scan .ews-box .ews-input {
    min-height: 48px;
    padding-left: 40px;
    border: 1px solid rgba(16, 27, 49, .075) !important;
    border-radius: 15px !important;
    color: var(--tbf-ink) !important;
    background: rgba(255, 255, 255, .62) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

body.tbf-ui .sign .form-item > i {
    left: 14px;
    top: 13px;
    color: #7e899a;
}

body.tbf-ui .sign .form-slide-item {
    height: 48px;
    border: 1px solid rgba(16, 27, 49, .075);
    border-radius: 15px;
    color: var(--tbf-muted);
    background: rgba(238, 242, 248, .76);
    line-height: 48px;
    box-shadow: inset 0 2px 7px rgba(33, 54, 86, .06);
}

body.tbf-ui .sign .captcha-slide,
body.tbf-ui .sign .captcha-slide2 {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #fff;
    background: #101b31;
    line-height: 48px;
    box-shadow: 0 8px 20px rgba(16, 27, 49, .18);
}

body.tbf-ui .sign .captcha-clk,
body.tbf-ui .sign .captcha-clk2,
body.tbf-ui .sign .captcha-sms-clk {
    right: 13px;
    top: 14px;
    color: var(--tbf-ink-2);
    font-weight: 650;
}

body.tbf-ui .sign .sign-submit {
    padding-bottom: 18px;
    border-bottom-color: rgba(16, 27, 49, .07);
}

body.tbf-ui .sign .sign-submit .btn {
    min-height: 48px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: #101b31;
    box-shadow: 0 12px 28px rgba(16, 27, 49, .17);
    font-weight: 720;
}

body.tbf-ui .sign-trans,
body.tbf-ui .form-policy,
body.tbf-ui .sign .sign-notice {
    color: var(--tbf-muted);
}

body.tbf-ui .sign-trans a,
body.tbf-ui .form-policy a {
    color: var(--tbf-ink);
    font-weight: 650;
}

body.tbf-ui .sign-tips {
    background: rgba(190, 48, 59, .92);
}

@media (max-width: 620px) {
    body.tbf-ui .layui-layer.tbf-glass-layer {
        max-width: calc(100vw - 24px) !important;
        border-radius: 24px !important;
    }
    body.tbf-ui .tbf-glass-layer .layui-layer-title {
        height: 58px;
        padding-left: 21px;
        font-size: 17px;
    }
    body.tbf-ui .tbf-glass-layer .layui-layer-setwin {
        top: 11px;
        right: 12px;
    }
    body.tbf-ui .sign .sign-box.has-left {
        padding-left: 0;
    }
    body.tbf-ui .sign .sign-box.has-left .loginimage {
        display: none;
    }
    body.tbf-ui .sign form {
        padding: 26px 20px;
    }
}

.tbf-studio-profile__tabs {
    margin: 22px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tbf-studio-profile__tabs a {
    min-height: 36px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tbf-border);
    border-radius: 999px;
    color: var(--tbf-muted);
    background: #fff;
}

.tbf-studio-profile__tabs a.active,
.tbf-studio-profile__tabs a:hover {
    color: var(--tbf-ink);
    border-color: transparent;
    background: transparent;
}

.tbf-work-layout-toggle {
    display: none;
}

.tbf-work-layout-toggle__grid,
.tbf-work-layout-toggle__single {
    width: 20px;
    height: 20px;
    position: absolute;
    inset: 0;
    margin: auto;
    pointer-events: none;
}

.tbf-work-layout-toggle__grid {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    grid-template-rows: repeat(2, 7px);
    gap: 3px;
    place-content: center;
}

.tbf-work-layout-toggle__grid i,
.tbf-work-layout-toggle__single i {
    display: block;
    border: 1.8px solid currentColor;
    border-radius: 3px;
}

.tbf-work-layout-toggle__single {
    display: none;
}

.tbf-work-layout-toggle__single i {
    position: absolute;
    inset: 2px 1px;
    border-radius: 5px;
}

@media (max-width: 1180px) {
    .tbf-entity-grid--studio {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .tbf-entity-grid--model {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tbf-ui .grids {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tbf-studio-profile__main {
        grid-template-columns: 130px minmax(0, 1fr);
    }

    .tbf-studio-profile__logo {
        width: 130px;
    }

    .tbf-studio-profile__stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 760px) {
    .tbf-module-heading {
        margin-bottom: 26px;
    }

    .tbf-module-heading__en {
        font-size: clamp(38px, 12vw, 52px);
        line-height: .92;
    }

    .tbf-module-heading h2 {
        margin-top: 9px;
        font-size: 15px;
    }

    .tbf-home-section,
    .tbf-entity-module,
    .tbf-ui .mocat {
        padding: 52px 0;
    }

    .tbf-entity-grid--studio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 21px 10px;
    }

    .tbf-studio-card__image {
        width: 82px;
        padding: 0;
    }

    .tbf-studio-card__name {
        margin-top: 9px;
        font-size: 13px;
    }

    .tbf-studio-card__count {
        display: none;
    }

    .tbf-entity-grid--model {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 10px;
    }

    .tbf-model-card__image {
        width: 84px;
        height: 84px;
    }

    .tbf-model-card__name {
        margin-top: 9px;
        font-size: 13px;
    }

    .tbf-model-card__count {
        font-size: var(--tbf-font-size-min);
    }

    .tbf-ui .mocats .molis {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tbf-ui .grids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body.tbf-ui.tbf-work-layout-single #posts.grids {
        grid-template-columns: minmax(0, 1fr);
    }

    .tbf-work-layout-toggle {
        width: 52px;
        height: 52px;
        padding: 0;
        position: fixed;
        right: 14px;
        bottom: max(82px, calc(env(safe-area-inset-bottom) + 78px));
        z-index: 9990;
        display: block;
        line-height: 0;
        border: 1px solid rgba(255, 255, 255, .82);
        border-radius: 18px;
        color: #17243e;
        background: rgba(255, 255, 255, .70);
        box-shadow: 0 12px 30px rgba(31, 49, 85, .15), 0 2px 8px rgba(31, 49, 85, .07), inset 0 1px 0 rgba(255, 255, 255, .98);
        -webkit-backdrop-filter: blur(22px) saturate(175%);
        backdrop-filter: blur(22px) saturate(175%);
    }

    .tbf-work-layout-toggle[hidden] {
        display: none !important;
    }

    .tbf-work-layout-toggle.is-single .tbf-work-layout-toggle__grid {
        display: none;
    }

    .tbf-work-layout-toggle.is-single .tbf-work-layout-toggle__single {
        display: block;
    }

    .tbf-ui .grids .post.grid {
        border-radius: 16px;
    }

    .tbf-ui .grids .post.grid .con {
        padding: 11px 12px 12px;
        gap: 7px;
    }

    .tbf-ui .grids .post.grid.tbf-work-card--journal .con,
    .tbf-ui .grids .post.grid.tbf-work-card--video .con {
        padding: 9px 12px 10px;
        gap: 5px;
    }

    .tbf-ui .grids .post.grid.tbf-work-card--journal .con h3,
    .tbf-ui .grids .post.grid.tbf-work-card--video .con h3,
    .tbf-ui .grids .post.grid.tbf-work-card--journal .con h3 a,
    .tbf-ui .grids .post.grid.tbf-work-card--video .con h3 a {
        min-height: 1.4em !important;
        height: 1.4em !important;
        max-height: 1.4em !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        display: block !important;
        -webkit-line-clamp: 1 !important;
        line-clamp: 1;
    }

    .tbf-work-brand__logo {
        flex-basis: 25px;
        width: 25px;
        height: 25px;
    }

    .tbf-work-identity {
        font-size: var(--tbf-font-size-min);
    }

    .tbf-ui .grids .post.grid .con h3,
    .tbf-ui .grids .post.grid .con h3 a {
        min-height: 2.8em !important;
        height: 2.8em !important;
        max-height: 2.8em !important;
        font-size: 14px;
        line-height: 1.4 !important;
    }

    .tbf-ui .grids .post.grid .con h3.tbf-work-card__title.has-new { padding-left: 20px; }
    .tbf-work-card__new-badge { top: 2px; width: 15px; height: 15px; border-radius: 4px; font-size: 9px; }

    .tbf-work-footer {
        gap: 6px;
    }

    .tbf-work-resource,
    .tbf-work-date {
        font-size: var(--tbf-font-size-min);
    }

    .tbf-work-type,
    .tbf-access-badge {
        top: 9px;
        min-height: 27px;
        padding: 0 9px;
        font-size: var(--tbf-font-size-min);
    }

    .tbf-work-type {
        left: 9px;
    }

    .tbf-access-badge {
        right: 9px;
    }

    .tbf-access-badge b {
        font-size: var(--tbf-font-size-min) !important;
    }

    /* Mobile compact 1×2 work grid: the cover is too narrow for corner badges.
     * Keep both nodes in the shared cached HTML, but hide them only while the
     * existing layout switch is in its default double-column state. Switching
     * to 1×1 adds body.tbf-work-layout-single and restores the normal badges. */
    body.tbf-ui:not(.tbf-work-layout-single) #posts.grids .post.grid.tbf-work-card--journal .tbf-work-type,
    body.tbf-ui:not(.tbf-work-layout-single) #posts.grids .post.grid.tbf-work-card--journal .tbf-access-badge,
    body.tbf-ui:not(.tbf-work-layout-single) #posts.grids .post.grid.tbf-work-card--video .tbf-work-type,
    body.tbf-ui:not(.tbf-work-layout-single) #posts.grids .post.grid.tbf-work-card--video .tbf-access-badge {
        display: none !important;
    }

    .tbf-studio-profile {
        padding-top: 24px;
    }

    .tbf-studio-profile__main {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
        border-radius: 22px;
    }

    .tbf-studio-profile__logo {
        width: 86px;
        padding: 0;
        border-radius: 18px;
    }

    .tbf-studio-profile__copy h1 {
        font-size: 25px;
    }

    .tbf-studio-profile__intro {
        grid-column: 1 / -1;
    }

    .tbf-studio-profile__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

body.tbf-ui :is(.tbf-empty-state, .content-none) {
    width: 100%;
    min-height: 300px;
    margin: 0 !important;
    padding: 74px 28px !important;
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 27, 49, .065) !important;
    border-radius: 28px !important;
    color: var(--tbf-ink);
    background: rgba(255, 255, 255, .70) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88) !important;
    text-align: center;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
}

body.tbf-ui .tbf-empty-state__content {
    width: min(100%, 440px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

body.tbf-ui :is(.tbf-empty-state, .content-none) > svg,
body.tbf-ui .content-none svg {
    display: none !important;
}

body.tbf-ui .tbf-empty-state strong,
body.tbf-ui .content-none > div:first-of-type {
    margin: 0;
    color: var(--tbf-ink);
    font-size: 22px;
    font-weight: 720;
    line-height: 1.35;
}

body.tbf-ui .tbf-empty-state p {
    margin: 9px 0 20px;
    color: #8b95a4;
    font-size: 12px;
    line-height: 1.7;
}

body.tbf-ui .tbf-empty-state a {
    min-height: 42px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: var(--tbf-ink);
    box-shadow: 0 8px 20px rgba(16, 27, 49, .13);
    font-size: 12px;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease;
}

body.tbf-ui .tbf-empty-state a:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 11px 25px rgba(16, 27, 49, .17);
}

body.tbf-ui .tbf-library-empty {
    margin: 36px 0 70px !important;
}

body.tbf-ui .tbf-parent-empty-state {
    margin: 34px 0 72px !important;
}

body.tbf-ui .tbf-wallpaper-empty {
    margin: 0 0 52px !important;
}

body.night.tbf-ui :is(.tbf-empty-state, .content-none) {
    border-color: rgba(255, 255, 255, .075) !important;
    background: rgba(28, 31, 39, .72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.night.tbf-ui .tbf-empty-state strong,
body.night.tbf-ui .content-none > div:first-of-type {
    color: #f3f5fa;
}

body.night.tbf-ui .tbf-empty-state p {
    color: #929aa6;
}

@media (max-width: 620px) {
    body.tbf-ui :is(.tbf-empty-state, .content-none) {
        min-height: 248px;
        padding: 54px 20px !important;
        border-radius: 23px !important;
    }

    body.tbf-ui .tbf-empty-state strong,
    body.tbf-ui .content-none > div:first-of-type {
        font-size: 20px;
    }
}

.tbf-ui .grids .post.grid.tbf-work-card--video .img,
.tbf-ui .posts.grids .post.grid.tbf-work-card--video .img {
    aspect-ratio: 9 / 6;
}

/* Guest journal covers: one global rule for every real journal card.
 * Logged-in visitors keep each page's original journal-card ratio. */
body:not(.logged-in).tbf-ui .grids .post.grid.tbf-work-card--journal .img,
body:not(.logged-in).tbf-ui .posts.grids .post.grid.tbf-work-card--journal .img {
    aspect-ratio: 1 / 1;
}





.tbf-work-card--video .tbf-work-card__play {
    position: absolute;
    z-index: 4;
    inset: 50% auto auto 50%;
    width: 54px;
    height: 54px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 27, 49, .20);
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.tbf-play-triangle {
    width: 0;
    height: 0;
    display: block;
    margin-left: 4px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #111827;
}

.tbf-work-card--video:hover .tbf-work-card__play {
    box-shadow: 0 16px 38px rgba(16, 27, 49, .25);
    transform: translate(-50%, -50%) scale(1.045);
}

.tbf-work-grid--mixed {
    --tbf-masonry-row: 2px;
    display: grid !important;
    grid-auto-flow: row dense;
    grid-auto-rows: var(--tbf-masonry-row);
    align-items: start;
}

.tbf-work-grid--mixed > .tbf-work-card,
.tbf-work-grid--mixed > .tbf-library-card {
    position: relative !important;
    inset: auto !important;
    align-self: start !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
}

.tbf-work-grid--video-only > .tbf-work-card,
.tbf-work-grid--portrait-only > .tbf-work-card {
    grid-row-end: auto !important;
}

@media (max-width: 620px) {
    .tbf-work-card--video .tbf-work-card__play {
        width: 46px;
        height: 46px;
    }

    .tbf-work-card--video .tbf-play-triangle {
        margin-left: 4px;
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 13px;
    }
}


.tbf-ui .grids .post.grid.tbf-work-card--video .img > a,
.tbf-ui .posts.grids .post.grid.tbf-work-card--video .img > a {
    position: relative;
    width: 100%;
    height: 100%;


    overflow: hidden;

}

.tbf-ui .grids .post.grid.tbf-work-card--video .thumb,
.tbf-ui .posts.grids .post.grid.tbf-work-card--video .thumb {
    object-position: center;


    filter: blur(1px) saturate(.98) brightness(.99);
    transform: none;
    transition: filter .26s ease;

}

.tbf-ui .grids .post.grid.tbf-work-card--video .img > a::after,
.tbf-ui .posts.grids .post.grid.tbf-work-card--video .img > a::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, .06) 100%);
    pointer-events: none;
}

.tbf-ui .grids .post.grid.tbf-work-card--video:hover .thumb,
.tbf-ui .posts.grids .post.grid.tbf-work-card--video:hover .thumb {
    filter: blur(.7px) saturate(.99) brightness(1);
    transform: none;
}

/* Shared model/studio resource-bundle image entrance. */
/* Entity bundle entrance: lives inside model/studio artwork, never in the stats column. */
.tbf-entity-bundle-entry {
    position: absolute;
    z-index: 8;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    isolation: isolate;
}

.tbf-model-portrait > .tbf-entity-bundle-entry,
.tbf-agency-logo > .tbf-entity-bundle-entry {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.tbf-entity-bundle-orb {
    position: absolute;
    z-index: 5;
    right: 12px;
    bottom: 12px;
    width: 33px;
    height: 33px;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    color: #fff;
    background: rgba(16, 27, 49, .94);
    box-shadow: 0 9px 22px rgba(16, 27, 49, .22), inset 0 1px 0 rgba(255, 255, 255, .30);
    cursor: pointer;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    backdrop-filter: blur(16px) saturate(165%);
    transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease, background-color .24s ease, box-shadow .24s ease;
}

.tbf-entity-bundle-orb::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: transparent;
}

.tbf-entity-bundle-orb::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(112deg, transparent 24%, rgba(255,255,255,.48) 46%, transparent 68%);
    transform: translateX(-135%) rotate(8deg);
    opacity: 0;
    pointer-events: none;
    animation: tbf-bundle-orb-shine 2.25s ease-in-out infinite;
}

.tbf-entity-bundle-orb:hover {
    transform: none;
    background: rgba(21, 37, 65, .98);
    box-shadow: 0 11px 24px rgba(16, 27, 49, .24), inset 0 1px 0 rgba(255,255,255,.34);
}

.tbf-entity-bundle-orb svg {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: tbf-bundle-icon-drop 1.05s ease-in-out infinite;
}

.tbf-entity-bundle-peek {
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    border: 0;
    border-radius: inherit;
    text-align: center;
    color: #142039;
    background: linear-gradient(145deg, rgba(249, 252, 255, .84), rgba(229, 238, 249, .72));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.58);
    opacity: 0;
    visibility: hidden;
    clip-path: circle(16.5px at calc(100% - 28.5px) calc(100% - 28.5px));
    pointer-events: none;
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    transition: clip-path .50s cubic-bezier(.18,.82,.2,1), opacity .18s ease, visibility .18s ease;
}

.tbf-model-portrait .tbf-entity-bundle-peek,
.tbf-agency-logo .tbf-entity-bundle-peek {
    border-radius: inherit;
}

.tbf-entity-bundle-peek > span {
    color: rgba(70, 84, 110, .70);
    font: 750 9px/1.2 var(--tbf-font-display);
    letter-spacing: .16em;
}

.tbf-entity-bundle-peek > strong {
    max-width: 94%;
    margin: 9px 0 8px;
    font-size: 15px;
    font-weight: 780;
    line-height: 1.4;
}

.tbf-entity-bundle-peek > small {
    display: block;
    max-width: 96%;
    margin-top: 3px;
    color: #657189;
    font-size: 10px;
    line-height: 1.5;
}

.tbf-entity-bundle-peek > button {
    margin-top: 14px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    color: #fff;
    background: rgba(18, 29, 50, .94);
    box-shadow: 0 8px 22px rgba(20, 34, 58, .16);
    font-size: 11px;
    font-weight: 720;
    cursor: pointer;
    pointer-events: auto;
}

.tbf-entity-bundle-entry.is-peek-open .tbf-entity-bundle-peek {
    opacity: 1;
    visibility: visible;
    clip-path: circle(160% at calc(100% - 28.5px) calc(100% - 28.5px));
    pointer-events: auto;
}

.tbf-entity-bundle-entry.is-peek-open .tbf-entity-bundle-orb {
    opacity: 0;
    transform: scale(.72);
    pointer-events: none;
}

@keyframes tbf-bundle-orb-attention {
    0%, 100% { transform: translateY(0) scale(1); }
    48% { transform: translateY(-2px) scale(1.075); }
    72% { transform: translateY(0) scale(1.02); }
}

@keyframes tbf-bundle-orb-shine {
    0%, 30% { transform: translateX(-135%) rotate(8deg); opacity: 0; }
    44% { opacity: 1; }
    63%, 100% { transform: translateX(135%) rotate(8deg); opacity: 0; }
}

@keyframes tbf-bundle-icon-drop {
    0%, 100% { transform: translateY(-1px); }
    50% { transform: translateY(2px); }
}

@media (max-width: 760px) {
    .tbf-entity-bundle-orb { right: 10px; bottom: 10px; width: 33px; height: 33px; }
    .tbf-entity-bundle-orb svg { width: 14px; height: 14px; }
    .tbf-entity-bundle-peek { padding: 19px 15px 16px; clip-path: circle(16.5px at calc(100% - 26.5px) calc(100% - 26.5px)); }
    .tbf-entity-bundle-entry.is-peek-open .tbf-entity-bundle-peek { clip-path: circle(165% at calc(100% - 26.5px) calc(100% - 26.5px)); }
    .tbf-entity-bundle-peek > strong { font-size: 14px; }
}

/* Model resource bundle modal */
html.tbf-modal-open,
html.tbf-modal-open body {
    overflow: hidden;
}

.tbf-model-bundle-modal[hidden] {
    display: none !important;
}

.tbf-model-bundle-modal {
    position: fixed !important;
    z-index: 100080;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    transform: none !important;
    display: grid;
    place-items: center;
    padding: 26px;
    isolation: isolate;
}

.tbf-model-bundle-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 29, 47, .22);
    -webkit-backdrop-filter: blur(10px) saturate(128%);
    backdrop-filter: blur(10px) saturate(128%);
}

.tbf-model-bundle-modal__panel {
    position: relative;
    z-index: 1;
    width: min(900px, calc(100vw - 40px));
    max-height: min(82vh, 820px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 30px;
    color: var(--tbf-ink);
    background: linear-gradient(145deg, rgba(251, 253, 255, .86), rgba(241, 247, 255, .76));
    box-shadow: 0 34px 90px rgba(21, 34, 58, .20), inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(36px) saturate(178%);
    backdrop-filter: blur(36px) saturate(178%);
}

.tbf-model-bundle-modal__content {
    position: relative;
    max-height: min(82vh, 820px);
    overflow: auto;
    padding: 34px;
    scrollbar-width: thin;
}

.tbf-model-bundle-modal__close {
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    color: var(--tbf-ink-2);
    background: rgba(255, 255, 255, .58);
    box-shadow: 0 8px 24px rgba(29, 43, 70, .10), inset 0 1px 0 rgba(255, 255, 255, .95);
    font: 400 25px/1 var(--tbf-font-sans);
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

.tbf-mb-head {
    padding-right: 42px;
}

.tbf-mb-head > span,
.tbf-mb-section-title > span {
    display: block;
    color: #8b96a9;
    font: 700 11px/1.2 var(--tbf-font-display);
    letter-spacing: .14em;
}

.tbf-mb-head h2,
.tbf-mb-section-title h3 {
    margin: 8px 0 7px;
    color: var(--tbf-ink);
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.tbf-mb-model-identity {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 8px;
    display: inline-flex;
    align-items: center;
    color: #7f8a9d;
    font-size: 11px;
    font-weight: 680;
    line-height: 1.35;
    text-decoration: none;
}

a.tbf-mb-model-identity:hover {
    color: var(--tbf-ink);
}

.tbf-mb-counts {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.tbf-mb-counts.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tbf-mb-group-list {
    margin-top: 24px;
    display: grid;
    gap: 9px;
}

.tbf-mb-group {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 18px;
    color: var(--tbf-ink);
    background: rgba(255, 255, 255, .46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
    overflow: hidden;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.tbf-mb-group:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 10px 26px rgba(28, 44, 75, .08), inset 0 1px 0 #fff;
}

.tbf-mb-group__select {
    min-width: 0;
    flex: 1 1 auto;
    padding: 12px 8px 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.tbf-mb-group__select > span,
.tbf-mb-group__select strong,
.tbf-mb-group__select small { display: block; }
.tbf-mb-group__select strong { font-size: 14px; font-weight: 760; }
.tbf-mb-group__select small { margin-top: 4px; color: var(--tbf-muted); font-size: 11px; line-height: 1.45; }
.tbf-mb-group__select > b { flex: 0 0 auto; font-size: 12px; font-weight: 760; }
.tbf-mb-group.is-owned .tbf-mb-group__select > b { color: #2f7c58; }

.tbf-mb-group__preview {
    flex: 0 0 auto;
    margin: 10px 10px 10px 0;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 13px;
    color: #536079;
    background: rgba(255,255,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
    font-size: 11px;
    font-weight: 720;
    cursor: pointer;
    transition: transform .18s ease, color .18s ease, background-color .18s ease;
}

.tbf-mb-group__preview:hover {
    transform: translateY(-1px);
    color: #fff;
    background: #101b31;
}

.tbf-mb-back-icon {
    position: absolute;
    z-index: 4;
    top: 16px;
    left: 16px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    color: var(--tbf-ink-2);
    background: rgba(255, 255, 255, .58);
    box-shadow: 0 8px 24px rgba(29, 43, 70, .10), inset 0 1px 0 rgba(255, 255, 255, .95);
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.tbf-mb-back-icon:hover {
    transform: translateX(-2px);
    color: #fff;
    background: #101b31;
}

.tbf-mb-back-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tbf-mb-back-icon ~ .tbf-mb-head {
    min-height: 38px;
    padding-left: 44px;
}

.tbf-mb-type-tabs {
    width: fit-content;
    max-width: 100%;
    margin: 18px auto 0;
    padding: 4px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(106px, auto);
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 16px;
    background: rgba(255, 255, 255, .44);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.tbf-mb-type-tabs button {
    min-height: 42px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 12px;
    color: #69758a;
    background: transparent;
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tbf-mb-type-tabs button:hover {
    color: var(--tbf-ink);
    transform: translateY(-1px);
}

.tbf-mb-type-tabs button.is-active {
    color: #fff;
    background: #101b31;
    box-shadow: 0 8px 20px rgba(16, 27, 49, .16);
}

.tbf-mb-type-tabs small {
    color: inherit;
    opacity: .72;
    font-size: 10px;
    font-weight: 650;
}

.tbf-mb-no-resource {
    min-height: 170px;
    margin-top: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 20px;
    color: #7b8799;
    background: rgba(255, 255, 255, .40);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.tbf-mb-preview-summary {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tbf-mb-preview-summary > span {
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    color: var(--tbf-muted);
    background: rgba(255,255,255,.42);
    font-size: 11px;
}

.tbf-mb-preview-summary b {
    margin-left: 4px;
    color: var(--tbf-ink);
}

.tbf-mb-preview-list {
    margin-top: 16px;
    display: grid;
    gap: 7px;
}

.tbf-mb-preview-row {
    min-height: 54px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 14px;
    background: rgba(255,255,255,.42);
}

.tbf-mb-preview-seq {
    color: #7c889d;
    font: 700 11px/1 var(--tbf-font-display);
    text-align: center;
}

.tbf-mb-preview-row strong,
.tbf-mb-preview-row small { display: block; }
.tbf-mb-preview-row strong { color: var(--tbf-ink); font-size: 12px; line-height: 1.45; }
.tbf-mb-preview-row small { margin-top: 3px; color: var(--tbf-muted); font-size: 10px; }
.tbf-mb-preview-row.is-protected small { color: #a67925; }
.tbf-mb-preview-row.is-single small { color: #a65a63; }
.tbf-mb-preview-row.is-unavailable { opacity: .62; }
.tbf-mb-preview-row > a {
    color: #52617b;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.tbf-mb-preview-actions {
    position: sticky;
    bottom: -34px;
    margin: 16px -34px -34px;
    padding: 14px 34px 20px;
    background: linear-gradient(180deg, rgba(244,248,253,0), rgba(244,248,253,.94) 34%);
}

.tbf-mb-counts > div {
    min-height: 116px;
    padding: 17px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 20px;
    background: rgba(255, 255, 255, .42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    text-align: center;
}

.tbf-mb-counts > div.is-primary {
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 34px rgba(30, 47, 78, .08), inset 0 1px 0 #fff;
}

.tbf-mb-counts span,
.tbf-mb-counts small {
    color: var(--tbf-muted);
    font-size: 11px;
}

.tbf-mb-counts strong {
    margin: 7px 0 5px;
    color: var(--tbf-ink);
    font: 650 31px/1 var(--tbf-font-display);
    letter-spacing: -.04em;
}

.tbf-mb-inline-message {
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid rgba(190, 45, 45, .14);
    border-radius: 14px;
    background: rgba(255, 244, 244, .72);
    box-shadow: 0 8px 24px rgba(25, 31, 44, .06);
    color: #9f2f2f;
    font-size: 13px;
    line-height: 1.65;
}


.tbf-mb-actions {
    margin-top: 18px;
}

.tbf-mb-manifest-button {
    width: 100%;
    min-height: 46px;
    margin: 0 0 10px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 27, 49, .08);
    border-radius: 15px;
    color: #536079;
    background: rgba(255, 255, 255, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 720;
    cursor: pointer;
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
    transition: transform .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.tbf-mb-manifest-button:hover {
    transform: translateY(-1px);
    color: #fff;
    background: #101b31;
    box-shadow: 0 10px 24px rgba(16, 27, 49, .14);
}

.tbf-mb-manifest-pager {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.tbf-mb-manifest-pager button {
    min-width: 74px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(16, 27, 49, .08);
    border-radius: 999px;
    color: #52617b;
    background: rgba(255, 255, 255, .58);
    font-size: 11px;
    font-weight: 720;
    cursor: pointer;
}

.tbf-mb-manifest-pager button:not(:disabled):hover {
    color: #fff;
    background: #101b31;
}

.tbf-mb-manifest-pager button:disabled {
    opacity: .42;
    cursor: default;
}

.tbf-mb-manifest-pager span {
    min-width: 52px;
    color: var(--tbf-muted);
    font-size: 11px;
    text-align: center;
}

.tbf-mb-primary {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 17px;
    color: #fff !important;
    background: #101b31;
    box-shadow: 0 14px 30px rgba(16, 27, 49, .18);
    font-size: 14px;
    font-weight: 720;
    text-decoration: none !important;
    cursor: pointer;
}

.tbf-mb-primary:disabled {
    opacity: .62;
    cursor: wait;
}

.tbf-mb-payline,
.tbf-mb-free,
.tbf-mb-owned {
    margin-bottom: 11px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 17px;
    background: rgba(255, 255, 255, .46);
}

.tbf-mb-payline span,
.tbf-mb-free span,
.tbf-mb-action-tip {
    color: var(--tbf-muted);
    font-size: 12px;
}

.tbf-mb-payline span small {
    color: #8e98a8;
    font-size: 11px;
    font-weight: 500;
}

.tbf-mb-payline b,
.tbf-mb-free strong,
.tbf-mb-owned {
    color: var(--tbf-ink);
    font-weight: 720;
}

.tbf-mb-free.is-empty {
    display: block;
}

.tbf-mb-free.is-empty span {
    display: block;
    margin-top: 5px;
    line-height: 1.55;
}

.tbf-mb-action-tip {
    margin-top: 10px;
    display: block;
    text-align: center;
    line-height: 1.6;
}

.tbf-mb-loading {
    min-height: 230px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    color: var(--tbf-muted);
}

.tbf-mb-loading span {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(16, 27, 49, .11);
    border-top-color: var(--tbf-ink);
    border-radius: 50%;
    animation: tbf-mb-spin .72s linear infinite;
}

.tbf-mb-loading p {
    margin: 0;
    font-size: 13px;
}

@keyframes tbf-mb-spin { to { transform: rotate(360deg); } }

.tbf-mb-resource-stats {
    margin: 22px 0 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.tbf-mb-resource-stats.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.tbf-mb-resource-stats b {
    min-height: 76px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 17px;
    background: rgba(255, 255, 255, .42);
    font: 650 22px/1 var(--tbf-font-display);
}

.tbf-mb-resource-stats small {
    margin-top: 7px;
    color: var(--tbf-muted);
    font: 500 11px/1.2 var(--tbf-font-sans);
}

.tbf-mb-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
}

.tbf-mb-toolbar input,
.tbf-mb-toolbar button {
    min-height: 44px;
    border: 1px solid rgba(16, 27, 49, .075);
    border-radius: 14px;
    color: var(--tbf-ink);
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.tbf-mb-toolbar input {
    width: 100%;
    padding: 0 14px;
}

.tbf-mb-toolbar button {
    padding: 0 14px;
    font-weight: 650;
    cursor: pointer;
}

.tbf-mb-resource-list,
.tbf-mb-locked-section {
    margin-top: 14px;
}

.tbf-mb-resource,
.tbf-mb-locked {
    min-height: 66px;
    margin-top: 8px;
    padding: 10px 11px 10px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 16px;
    background: rgba(255, 255, 255, .43);
}

.tbf-mb-resource > div,
.tbf-mb-locked > div {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tbf-mb-resource > div > span {
    width: 30px;
    flex: 0 0 30px;
    color: #9aa4b4;
    font: 600 11px/1 var(--tbf-font-display);
}

.tbf-mb-resource p {
    min-width: 0;
    margin: 0;
}

.tbf-mb-resource strong,
.tbf-mb-locked strong {
    display: block;
    overflow: hidden;
    color: var(--tbf-ink);
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbf-mb-resource small,
.tbf-mb-locked small {
    margin-top: 3px;
    display: block;
    color: var(--tbf-muted);
    font-size: 11px;
}

.tbf-mb-resource > a,
.tbf-mb-resource > button,
.tbf-mb-locked > a {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 27, 49, .07);
    border-radius: 12px;
    color: var(--tbf-ink);
    background: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.tbf-mb-section-title {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(16, 27, 49, .07);
}

.tbf-mb-section-title h3 {
    font-size: 19px;
}

.tbf-mb-empty {
    padding: 30px;
    color: var(--tbf-muted);
    text-align: center;
}

@media (max-width: 640px) {
    .tbf-model-bundle-modal {
        padding: 12px;
        align-items: end;
    }
    .tbf-model-bundle-modal__panel {
        width: 100%;
        max-height: 88vh;
        border-radius: 28px 28px 22px 22px;
    }
    .tbf-model-bundle-modal__content {
        max-height: 88vh;
        padding: 28px 17px 20px;
    }
    .tbf-mb-head h2 { font-size: 22px; }
    .tbf-mb-counts { gap: 6px; }
    .tbf-mb-counts.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tbf-mb-counts.is-four > .is-primary { grid-column: auto; }
    .tbf-mb-counts > div { min-height: 96px; padding: 12px 7px; border-radius: 16px; }
    .tbf-mb-counts strong { font-size: 25px; }
    .tbf-mb-toolbar { grid-template-columns: 1fr 1fr; }
    .tbf-mb-toolbar input { grid-column: 1 / -1; }
    .tbf-mb-resource { align-items: stretch; flex-wrap: wrap; }
    .tbf-mb-resource > div { flex-basis: 100%; }
    .tbf-mb-resource > a,
    .tbf-mb-resource > button { flex: 1; }
    .tbf-mb-locked { align-items: center; }
    .tbf-mb-group { gap: 5px; }
    .tbf-mb-group__select { padding-left: 12px; gap: 8px; }
    .tbf-mb-group__select > b { font-size: 11px; }
    .tbf-mb-group__preview { margin: 8px 8px 8px 0; padding: 0 10px; }
    .tbf-mb-preview-row { grid-template-columns: 38px minmax(0, 1fr); }
    .tbf-mb-preview-row > a { grid-column: 2; width: fit-content; }
    .tbf-mb-preview-actions { bottom: -20px; margin: 14px -17px -20px; padding: 12px 17px 16px; }
    .tbf-mb-back-icon { top: 10px; left: 10px; width: 36px; height: 36px; }
    .tbf-model-bundle-modal__close { top: 10px; right: 10px; width: 36px; height: 36px; }
    .tbf-mb-back-icon ~ .tbf-mb-head { padding-left: 38px; }
    .tbf-mb-type-tabs { width: 100%; grid-auto-columns: minmax(0, 1fr); }
    .tbf-mb-type-tabs button { padding-inline: 10px; }
}




/* Shared scoped work search control. */
.tbf-scoped-work-search {
    width: min(276px, 30vw);
    height: 46px;
    padding: 4px 5px 4px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(16, 27, 49, .075);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 8px 24px rgba(28, 44, 75, .05), inset 0 1px 0 rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.tbf-scoped-work-search:focus-within {
    border-color: rgba(255, 82, 129, .24);
    background: rgba(255,255,255,.94);
    box-shadow: 0 0 0 4px rgba(255,82,129,.07), 0 10px 28px rgba(28,44,75,.06);
}

.tbf-scoped-work-search label {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
}

.tbf-scoped-work-search input[type="search"] {
    width: 100%;
    height: 36px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--tbf-ink);
    background: transparent;
    font-size: 13px;
}

.tbf-scoped-work-search input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.tbf-scoped-work-search button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--tbf-ink);
    cursor: pointer;
    font-size: 0;
    line-height: 1;
}

.tbf-scoped-work-search button svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tbf-scoped-search-filter > strong {
    max-width: 180px;
}

.tbf-agency-current-filter {
    position: relative;
    min-height: 46px;
    margin: 0;
    padding: 6px 6px 6px 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(17, 31, 57, .08);
    border-radius: 999px;
    color: #7d8796;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 10px 26px rgba(26, 42, 72, .07), inset 0 1px 0 rgba(255, 255, 255, .90);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    isolation: isolate;
}

.tbf-agency-current-filter::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid rgba(255, 82, 129, .42);
    border-radius: 999px;
    box-shadow:
        0 0 0 2px rgba(255, 82, 129, .08),
        0 0 12px 3px rgba(255, 82, 129, .16);
    opacity: .72;
    pointer-events: none;
    transform-origin: center;
    will-change: transform, opacity, box-shadow;
    animation: tbf-agency-current-filter-glow 1.55s ease-in-out infinite;
}

@keyframes tbf-agency-current-filter-glow {
    0%, 100% {
        opacity: .42;
        transform: scale(.985);
        box-shadow:
            0 0 0 1px rgba(255, 82, 129, .06),
            0 0 6px 1px rgba(255, 82, 129, .10);
    }
    50% {
        opacity: .92;
        transform: scale(1.045);
        box-shadow:
            0 0 0 3px rgba(255, 82, 129, .10),
            0 0 18px 6px rgba(255, 82, 129, .20);
    }
}

.tbf-agency-current-filter > span {
    color: #9aa3af;
    font-weight: 620;
}

.tbf-agency-current-filter > strong {
    max-width: 150px;
    overflow: hidden;
    color: var(--tbf-ink);
    font-size: 12px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbf-agency-current-filter > a {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #7c8796;
    background: rgba(17, 31, 57, .055);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.tbf-agency-current-filter > a:hover,
.tbf-agency-current-filter > a:focus-visible {
    color: #fff;
    background: var(--tbf-accent);
    transform: rotate(8deg);
}

@media (max-width: 760px) {
    .tbf-library-summary__meta .tbf-agency-current-filter {
        max-width: calc(100vw - 44px);
        min-height: 42px;
    }
}

@media (max-width: 620px) {
    body.tbf-ui .sign .sign-box,
    body.tbf-ui .sign .sign-box.has-left {
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: min(420px, calc(100vw - 28px)) !important;
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
        padding-left: 0;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 26px !important;
        transform: translate(-50%, -50%) !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.tbf-ui.sign-show.tbf-has-mobile-footer-nav .footer-fixed-nav {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


/* Wall-only metadata is hidden globally by default.
 * /journal picture-wall view explicitly reveals it in work-archive.css. */
.tbf-ui .tbf-journal-wall-meta {
    display: none !important;
}


body.tbf-home-page {
    background: #fff;
}

.tbf-home-main {
    overflow: hidden;
    background: #fff;
}

.tbf-hero {
    position: relative;
    min-height: 900px;
    margin-top: -70px;
    padding: 194px 0 64px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 22%, rgba(212, 227, 255, .76), transparent 33%),
        radial-gradient(circle at 32% 8%, rgba(255, 255, 255, .94), transparent 31%),
        linear-gradient(118deg, #edf4ff 0%, #fbfdff 48%, #e7f0ff 100%);
    background-size: 145% 145%;
    animation: tbf-hero-canvas 12s ease-in-out infinite alternate;
}

.tbf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .56;
    background:
        linear-gradient(118deg, transparent 0 36%, rgba(255, 255, 255, .72) 48%, transparent 62%),
        linear-gradient(90deg, rgba(177, 205, 251, .18), rgba(255, 255, 255, .08), rgba(186, 213, 255, .24));
    background-size: 240% 100%, 180% 100%;
    animation: tbf-hero-flow 13s ease-in-out infinite alternate;
}

.tbf-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 175px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(249, 252, 255, 0), rgba(249, 252, 255, .94) 72%, #f9fbff 100%);
}

.tbf-hero__ambient {
    position: absolute;
    inset: -8%;
    z-index: 1;
    overflow: hidden;
    transform: translate3d(var(--tbf-pointer-x, 0), var(--tbf-pointer-y, 0), 0);
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
    animation: tbf-ambient-breathe 10s ease-in-out infinite alternate;
}

.tbf-hero__ambient::before,
.tbf-hero__ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tbf-hero__ambient::before {
    opacity: .1;
    background-image:
        linear-gradient(rgba(16, 27, 49, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 27, 49, .07) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48%, transparent 97%);
    mask-image: linear-gradient(to right, transparent 0, #000 48%, transparent 97%);
}

.tbf-hero__ambient::after {
    inset: 2% -10%;
    opacity: .58;
    filter: blur(24px);
    background:
        linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, .72) 44%, rgba(194, 217, 255, .38) 56%, transparent 75%);
    background-size: 220% 100%;
    animation: tbf-hero-sheen 10s ease-in-out infinite;
}

.tbf-hero__orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(54px);
    opacity: .78;
    will-change: transform;
    animation: tbf-orbit 10s ease-in-out infinite alternate;
}

.tbf-hero__orb--one {
    width: 520px;
    height: 520px;
    top: -4%;
    right: -2%;
    background: rgba(167, 199, 251, .78);
}

.tbf-hero__orb--two {
    width: 410px;
    height: 410px;
    top: 28%;
    right: 24%;
    background: rgba(255, 255, 255, .96);
    animation-delay: -5s;
}

.tbf-hero__orb--three {
    width: 330px;
    height: 330px;
    top: 2%;
    left: 20%;
    background: rgba(224, 233, 253, .88);
    animation-delay: -9s;
}

.tbf-hero__beam {
    position: absolute;
    width: 58vw;
    height: 160px;
    right: -10vw;
    top: 42%;
    display: block;
    border-radius: 999px;
    filter: blur(34px);
    opacity: .42;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .94), rgba(189, 215, 255, .52), transparent);
    transform: rotate(-11deg);
    animation: tbf-beam-drift 12s ease-in-out infinite alternate;
}

.tbf-hero__aurora,
.tbf-hero__bubbles {
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}

.tbf-hero__aurora {
    width: 78vw;
    height: 190px;
    right: -22vw;
    border-radius: 48% 52% 50% 50% / 60% 44% 56% 40%;
    filter: blur(18px) saturate(165%);
    mix-blend-mode: screen;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(89, 171, 255, .08) 10%,
            rgba(99, 190, 255, .68) 28%,
            rgba(255, 255, 255, .95) 49%,
            rgba(205, 139, 255, .62) 68%,
            rgba(255, 176, 222, .28) 84%,
            transparent 100%);
    background-size: 180% 100%;
    box-shadow: 0 0 80px rgba(142, 190, 255, .24);
}

.tbf-hero__aurora::before,
.tbf-hero__aurora::after {
    content: "";
    position: absolute;
    inset: 20% 5%;
    border-radius: inherit;
    pointer-events: none;
}

.tbf-hero__aurora::before {
    border-top: 2px solid rgba(255, 255, 255, .82);
    filter: blur(.2px);
    opacity: .78;
}

.tbf-hero__aurora::after {
    inset: 36% 12%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    filter: blur(10px);
    opacity: .72;
}

.tbf-hero__aurora--one {
    top: 16%;
    transform: rotate(-15deg) translate3d(-12%, -8%, 0);
    animation: tbf-aurora-one 5.2s cubic-bezier(.45, .05, .3, .96) infinite alternate;
}

.tbf-hero__aurora--two {
    top: 48%;
    right: -27vw;
    height: 145px;
    transform: rotate(10deg) translate3d(9%, 8%, 0);
    animation: tbf-aurora-two 4.6s cubic-bezier(.45, .05, .3, .96) infinite alternate;
}

.tbf-hero__bubbles {
    inset: 4% -2% 3% 45%;
    overflow: hidden;
    filter: saturate(130%);
}

.tbf-hero__bubbles::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .58;
    background:
        radial-gradient(circle at 8% 16%, rgba(255,255,255,.96) 0 2px, transparent 3.5px),
        radial-gradient(circle at 24% 69%, rgba(147,190,255,.78) 0 1.5px, transparent 3px),
        radial-gradient(circle at 39% 31%, rgba(255,255,255,.88) 0 1px, transparent 2.8px),
        radial-gradient(circle at 51% 82%, rgba(177,154,255,.7) 0 2px, transparent 4px),
        radial-gradient(circle at 67% 24%, rgba(255,255,255,.92) 0 1.4px, transparent 3px),
        radial-gradient(circle at 78% 57%, rgba(124,180,255,.68) 0 2px, transparent 4.2px),
        radial-gradient(circle at 91% 36%, rgba(255,255,255,.9) 0 1px, transparent 2.6px),
        radial-gradient(circle at 96% 83%, rgba(184,157,255,.62) 0 1.6px, transparent 3.6px);
    filter: blur(.15px);
    animation: tbf-bubble-stars 7.4s ease-in-out infinite alternate;
}

.tbf-hero__bubbles i {
    position: absolute;
    display: block;
    width: var(--bubble-size, 110px);
    aspect-ratio: 1;
    left: var(--bubble-left, 50%);
    top: var(--bubble-top, 50%);
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,.98) 0 5%, transparent 17%),
        radial-gradient(circle at 65% 72%, rgba(151,192,255,.22), transparent 46%),
        linear-gradient(145deg, rgba(255,255,255,.38), rgba(186,214,255,.12));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset -12px -16px 34px rgba(120,169,240,.12),
        0 20px 45px rgba(65,91,139,.12);
    -webkit-backdrop-filter: blur(13px) saturate(165%);
    backdrop-filter: blur(13px) saturate(165%);
    animation: tbf-bubble-float var(--bubble-duration, 7s) ease-in-out var(--bubble-delay, 0s) infinite alternate;
    will-change: transform;
}

.tbf-hero__bubbles i:nth-child(1) { --bubble-size: 176px; --bubble-left: 58%; --bubble-top: 8%; --bubble-duration: 6.4s; }
.tbf-hero__bubbles i:nth-child(2) { --bubble-size: 92px; --bubble-left: 18%; --bubble-top: 19%; --bubble-duration: 5.2s; --bubble-delay: -2s; }
.tbf-hero__bubbles i:nth-child(3) { --bubble-size: 132px; --bubble-left: 36%; --bubble-top: 46%; --bubble-duration: 7.2s; --bubble-delay: -4s; }
.tbf-hero__bubbles i:nth-child(4) { --bubble-size: 68px; --bubble-left: 77%; --bubble-top: 44%; --bubble-duration: 4.8s; --bubble-delay: -1.4s; }
.tbf-hero__bubbles i:nth-child(5) { --bubble-size: 210px; --bubble-left: 61%; --bubble-top: 62%; --bubble-duration: 8.2s; --bubble-delay: -5s; }
.tbf-hero__bubbles i:nth-child(6) { --bubble-size: 54px; --bubble-left: 12%; --bubble-top: 72%; --bubble-duration: 5.8s; --bubble-delay: -3.2s; }
.tbf-hero__bubbles i:nth-child(7) { --bubble-size: 105px; --bubble-left: 86%; --bubble-top: 14%; --bubble-duration: 6.8s; --bubble-delay: -4.6s; }

.tbf-hero[data-tbf-effect="liquid"] .tbf-hero__liquid {
    opacity: 1;
}

.tbf-hero[data-tbf-effect="aurora"] {
    background:
        radial-gradient(circle at 78% 18%, rgba(211, 186, 255, .6), transparent 34%),
        radial-gradient(circle at 42% 14%, rgba(255, 255, 255, .94), transparent 34%),
        linear-gradient(118deg, #eef5ff 0%, #fbfdff 45%, #edf0ff 100%);
}

.tbf-hero[data-tbf-effect="aurora"] .tbf-hero__liquid {
    opacity: .08;
    transform: scale(.74) translate3d(12%, 5%, 0);
}

.tbf-hero[data-tbf-effect="aurora"] .tbf-hero__aurora {
    opacity: 1;
}

.tbf-hero[data-tbf-effect="aurora"] .tbf-hero__beam {
    opacity: .8;
    animation-duration: 5.4s;
}

.tbf-hero[data-tbf-effect="aurora"] .tbf-hero__word {
    color: rgba(255,255,255,.58);
}

.tbf-hero[data-tbf-effect="bubbles"] {
    background:
        radial-gradient(circle at 83% 20%, rgba(187, 217, 255, .78), transparent 34%),
        radial-gradient(circle at 63% 72%, rgba(231, 208, 255, .48), transparent 31%),
        linear-gradient(125deg, #f3f8ff 0%, #ffffff 47%, #edf4ff 100%);
}

.tbf-hero[data-tbf-effect="bubbles"] .tbf-hero__liquid {
    opacity: .06;
    transform: scale(.62) translate3d(20%, 8%, 0);
}

.tbf-hero[data-tbf-effect="bubbles"] .tbf-hero__bubbles {
    opacity: 1;
}

.tbf-hero[data-tbf-effect="bubbles"] .tbf-hero__orb {
    opacity: .42;
}

.tbf-hero[data-tbf-effect="bubbles"] .tbf-hero__beam {
    opacity: .18;
}

.tbf-hero__word {
    position: absolute;
    right: -38px;
    top: 166px;
    color: rgba(255, 255, 255, .42);
    font-size: clamp(125px, 18vw, 285px);
    line-height: .86;
    font-weight: 900;
    letter-spacing: -.095em;
    user-select: none;
    animation: tbf-word-breathe 9s ease-in-out infinite alternate;
}

.tbf-hero__liquid {
    position: absolute;
    z-index: 1;
    top: 182px;
    right: max(1vw, calc((100vw - var(--tbf-container)) / 2 - 24px));
    width: min(45vw, 680px);
    aspect-ratio: 1.12;
    transform: translate3d(calc(var(--tbf-pointer-x, 0) * -.55), calc(var(--tbf-pointer-y, 0) * -.45), 0);
    opacity: 1;
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.tbf-hero__liquid-shell,
.tbf-hero__liquid-core,
.tbf-hero__liquid-ring,
.tbf-hero__liquid-glint {
    position: absolute;
    display: block;
    border-radius: 46% 54% 58% 42% / 45% 38% 62% 55%;
    will-change: transform;
}

.tbf-hero__liquid-shell {
    inset: 5% 2% 4% 7%;
    border: 1px solid rgba(255, 255, 255, .82);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .42), rgba(206, 224, 255, .16) 43%, rgba(255, 255, 255, .1)),
        radial-gradient(circle at 26% 22%, rgba(255, 255, 255, .9), transparent 28%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 28px 24px 65px rgba(255, 255, 255, .22),
        inset -28px -30px 70px rgba(137, 176, 239, .13),
        0 42px 90px rgba(83, 111, 164, .14);
    -webkit-backdrop-filter: blur(26px) saturate(165%);
    backdrop-filter: blur(26px) saturate(165%);
    animation: tbf-liquid-morph 4.6s cubic-bezier(.55, .08, .32, .96) infinite alternate;
}

.tbf-hero__liquid-core {
    inset: 18% 13% 14% 19%;
    opacity: .74;
    filter: blur(2px);
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .92), transparent 28%),
        linear-gradient(145deg, rgba(190, 216, 255, .2), rgba(255, 255, 255, .68) 48%, rgba(176, 205, 252, .24));
    box-shadow: inset 0 0 56px rgba(255, 255, 255, .42);
    animation: tbf-liquid-core 4.2s ease-in-out infinite alternate;
}

.tbf-hero__liquid-ring {
    border: 1px solid rgba(255, 255, 255, .62);
    background: transparent;
    box-shadow: inset 0 0 28px rgba(255, 255, 255, .18), 0 0 34px rgba(177, 205, 250, .12);
}

.tbf-hero__liquid-ring--one {
    inset: 10% 8% 12% 13%;
    animation: tbf-liquid-ring 8s linear infinite;
}

.tbf-hero__liquid-ring--two {
    inset: 27% 24% 24% 30%;
    opacity: .72;
    animation: tbf-liquid-ring-reverse 6.5s linear infinite;
}

.tbf-hero__liquid-glint {
    width: 46%;
    height: 18%;
    top: 18%;
    left: 14%;
    filter: blur(10px);
    opacity: .78;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .96), transparent);
    transform: rotate(-20deg);
    animation: tbf-liquid-glint 4.8s ease-in-out infinite;
}

.tbf-hero__container {
    position: relative;
    z-index: 3;
    min-height: 642px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tbf-hero__effect-switch {
    position: absolute;
    top: 28px;
    right: 0;
    z-index: 5;
    min-height: 42px;
    padding: 7px 12px 7px 9px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 999px;
    color: #43516a;
    background: rgba(255, 255, 255, .42);
    box-shadow: 0 12px 30px rgba(42, 59, 93, .07), inset 0 1px 0 rgba(255, 255, 255, .94);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    backdrop-filter: blur(22px) saturate(155%);
}

.tbf-hero__effect-switch:hover {
    color: var(--tbf-ink);
    background: rgba(255, 255, 255, .7);
    transform: translateY(-2px);
}

.tbf-hero__effect-icon {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #7aa8f7, #b79cfa);
    box-shadow: 0 7px 16px rgba(89, 123, 190, .22);
    font-size: 13px;
}

.tbf-hero__effect-count {
    color: #8792a5;
    font-family: var(--tbf-font-display) !important;
    font-size: var(--tbf-font-size-min);
    font-variant-numeric: tabular-nums;
}

.tbf-hero__copy {
    position: relative;
    z-index: 2;
    width: min(720px, 58%);
    min-height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tbf-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #65738b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .17em;
}

.tbf-hero__eyebrow::before {
    content: "";
    width: 35px;
    height: 1px;
    background: currentColor;
    opacity: .48;
}

.tbf-hero h1 {
    max-width: 760px;
    margin: 25px 0 21px;
    color: var(--tbf-ink);
    font-size: clamp(76px, 7.6vw, 118px);
    line-height: .92;
    letter-spacing: -.082em;
    font-weight: 900;
}

/* Keep the original homepage H1 geometry and typography in normal flow.
 * MaskedHeading only supplies the clipped video/material motion; it must not
 * recalculate title width, font size, weight, tracking or alignment. */
.tbf-hero__title-slot {
    position: relative;
    width: max-content;
    max-width: 100%;
}

.tbf-hero__title-layout-text {
    display: block;
    visibility: visible;
    color: var(--tbf-ink);
    opacity: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    transition: opacity .18s ease;
}

.tbf-hero__title-slot > .tbf-hero__masked-heading.masked-heading {
    --tbf-mask-pad-x: .36em;
    --tbf-mask-pad-y: .32em;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    isolation: isolate;
    color: transparent;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
    overflow: visible;
    opacity: 0;
    transition: opacity .18s ease;
}

/* First paint is always the complete normal title. The video mask is promoted
 * only after JavaScript confirms that the video has produced a renderable
 * frame, preventing the fragmented-glyph state on cold loads. */
.tbf-hero__title-slot.is-mask-media-ready > .tbf-hero__title-layout-text {
    opacity: 0;
}

.tbf-hero__title-slot.is-mask-media-ready > .tbf-hero__masked-heading.masked-heading {
    opacity: 1;
}

.masked-heading__measure {
    position: relative;
    z-index: 0;
    display: block;
    color: transparent;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.masked-heading__word {
    position: relative;
    display: inline-block;
}

.masked-heading__baseline {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

.masked-heading__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.masked-heading__reveal,
.masked-heading__clip,
.masked-heading__media {
    position: absolute;
    inset: 0;
    display: block;
}

.masked-heading__reveal {
    z-index: 1;
    top: calc(0px - var(--tbf-mask-pad-y));
    right: calc(0px - var(--tbf-mask-pad-x));
    bottom: calc(0px - var(--tbf-mask-pad-y));
    left: calc(0px - var(--tbf-mask-pad-x));
    opacity: 1;
    pointer-events: none;
    overflow: visible;
}

.masked-heading__clip {
    overflow: visible;
}

.masked-heading__media {
    transform-origin: 50% 50%;
    will-change: transform;
}

.masked-heading__source {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

.tbf-hero__copy > p {
    max-width: 660px;
    margin: 0;
    color: #536078;
    font-size: 18px;
    line-height: 1.8;
}

/* Homepage subtitle: real one-shot typewriter.
 * The complete sentence remains server-rendered in the measure node/aria-label.
 * JavaScript only controls the visual layer and starts after the hero is actually
 * visible, avoiding a CSS animation finishing before the user can see it. */
.tbf-hero__intro--typewriter {
    min-height: 1.8em;
}

.tbf-hero__typewriter {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    white-space: nowrap;
}

.tbf-hero__typewriter-measure {
    display: inline-block;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.tbf-hero__typewriter-live,
.tbf-hero__typewriter-noscript {
    position: absolute;
    inset: 0 auto auto 0;
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.tbf-hero__typewriter-text {
    display: inline;
}

.tbf-hero__typewriter-cursor {
    display: inline-block;
    width: 1px;
    height: 1.08em;
    margin-left: 2px;
    vertical-align: -.12em;
    border-radius: 1px;
    background: currentColor;
    opacity: 0;
    transform: translateY(.12em);
    pointer-events: none;
}

.tbf-hero__typewriter.is-waiting .tbf-hero__typewriter-cursor,
.tbf-hero__typewriter.is-typing .tbf-hero__typewriter-cursor {
    opacity: .62;
    animation: tbfHeroTypewriterCursorBlink .72s step-end infinite;
}

.tbf-hero__typewriter.is-complete .tbf-hero__typewriter-cursor {
    opacity: 0;
    animation: tbfHeroTypewriterCursorOut .34s ease forwards;
}

@keyframes tbfHeroTypewriterCursorBlink {
    0%, 46% { opacity: .62; }
    47%, 100% { opacity: 0; }
}

@keyframes tbfHeroTypewriterCursorOut {
    from { opacity: .62; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tbf-hero__typewriter-cursor {
        display: none;
        animation: none !important;
    }
}

.tbf-hero__actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tbf-button {
    min-height: 54px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.tbf-button:hover {
    transform: translateY(-2px);
}

.tbf-button--primary {
    color: #fff !important;
    background: var(--tbf-ink);
    box-shadow: 0 14px 30px rgba(16, 27, 49, .18);
}

.tbf-button--quiet {
    color: var(--tbf-ink) !important;
    border: 1px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .48);
    box-shadow: 0 12px 28px rgba(42, 59, 93, .065), inset 0 1px 0 rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
}

.tbf-hero__bottom {
    position: relative;
    z-index: 3;
}

.tbf-hero__quick {
    width: max-content;
    max-width: 100%;
    margin: 0 auto 24px;
    padding: 7px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
    box-shadow: 0 13px 34px rgba(42, 59, 93, .075), inset 0 1px 0 rgba(255, 255, 255, .98);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}

.tbf-hero__quick a {
    min-height: 37px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #56637a;
    font-size: 13px;
    font-weight: 650;
}

.tbf-hero__quick a:hover {
    color: var(--tbf-ink);
    background: transparent;
}

.tbf-hero__search form {
    height: 80px;
    padding: 10px 10px 10px 25px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 26px;
    background: rgba(255, 255, 255, .52);
    box-shadow: 0 24px 64px rgba(48, 67, 104, .105), inset 0 1px 0 rgba(255, 255, 255, 1);
    -webkit-backdrop-filter: blur(28px) saturate(165%);
    backdrop-filter: blur(28px) saturate(165%);
}

.tbf-hero__search form > i {
    color: var(--tbf-ink);
    font-size: 22px;
}

.tbf-hero__search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tbf-ink);
    font-size: 16px;
}

.tbf-hero__search button {
    align-self: stretch;
    min-width: 122px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: var(--tbf-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.tbf-hero__search {
    position: relative;
}

.tbf-hero__live-search {
    position: absolute;
    z-index: 12;
    top: 92px;
    left: 0;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 24px;
    background: rgba(249, 251, 255, .9);
    box-shadow: 0 28px 72px rgba(35, 53, 88, .16), inset 0 1px 0 rgba(255, 255, 255, .98);
    -webkit-backdrop-filter: blur(30px) saturate(165%);
    backdrop-filter: blur(30px) saturate(165%);
}

.tbf-hero__live-search[hidden] {
    display: none;
}

.tbf-hero__live-search.is-portal {
    position: fixed;
    z-index: 10020;
    top: auto;
    left: auto;
    max-height: var(--tbf-live-max-height, 520px);
}

.tbf-hero__live-search.is-portal .tbf-hero__live-list {
    max-height: calc(var(--tbf-live-max-height, 520px) - 49px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tbf-hero__live-search.is-loading {
    opacity: 1;
}

.tbf-hero__live-list {
    padding: 10px;
}

.tbf-hero__live-item {
    min-height: 68px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
    color: var(--tbf-ink);
    transition: background-color .16s ease, transform .16s ease;
}

.tbf-hero__live-item:hover,
.tbf-hero__live-item.is-active {
    color: var(--tbf-ink);
    background: rgba(229, 236, 247, .68);
    transform: translateY(-1px);
}

.tbf-hero__live-thumb {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(20, 35, 60, .06);
    border-radius: 13px;
    background: rgba(255, 255, 255, .78);
}

.tbf-hero__live-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.tbf-hero__live-thumb.is-placeholder {
    color: #7f8da4;
    background: linear-gradient(145deg, rgba(238, 244, 252, .94), rgba(248, 241, 247, .86));
}

.tbf-hero__live-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tbf-hero__live-title {
    overflow: hidden;
    color: var(--tbf-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbf-hero__live-sub {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a96a8;
    font-size: 11px;
    line-height: 1;
}

.tbf-hero__live-sub b {
    min-height: 23px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(21, 37, 63, .07);
    border-radius: 999px;
    color: #53627a;
    background: rgba(255, 255, 255, .72);
    font-size: 10px;
    font-weight: 700;
}

.tbf-hero__live-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbf-hero__live-arrow {
    padding: 0 6px;
    flex: 0 0 auto;
    color: #8b98ab;
    font-size: 16px;
}

.tbf-hero__live-empty {
    padding: 24px 18px;
    color: #8995a7;
    font-size: 13px;
    text-align: center;
}

.tbf-hero__live-status {
    min-height: 68px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6f7d92;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.tbf-hero__live-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid rgba(76, 94, 121, .18);
    border-top-color: rgba(76, 94, 121, .72);
    border-radius: 50%;
    animation: tbf-live-search-spin .72s linear infinite;
}

@keyframes tbf-live-search-spin {
    to { transform: rotate(360deg); }
}

.tbf-hero__live-more {
    min-height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(21, 37, 63, .06);
    color: #596980;
    background: rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 650;
}

.tbf-hero__live-more:hover {
    color: var(--tbf-ink);
}

.tbf-hero__keywords {
    margin: 12px 9px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--tbf-muted);
    font-size: 12px;
}

.tbf-hero__keywords a {
    padding: 7px 11px;
    border: 1px solid var(--tbf-border);
    border-radius: 999px;
    color: #64728a;
    background: rgba(255, 255, 255, .46);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.tbf-home-content:empty {
    display: none;
}

.tbf-hero[data-tbf-motion="active"],
.tbf-hero[data-tbf-motion="active"]::before,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__ambient,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__ambient::after,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__orb,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__beam,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__word,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__liquid-shell,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__liquid-core,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__liquid-ring,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__liquid-glint,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__aurora,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__bubbles,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__bubbles::before,
.tbf-hero[data-tbf-motion="active"] .tbf-hero__bubbles i {
    animation-play-state: running !important;
}

@keyframes tbf-hero-canvas {
    0% { background-position: 0% 18%; }
    100% { background-position: 100% 82%; }
}

@keyframes tbf-ambient-breathe {
    0% { filter: saturate(100%); opacity: .82; }
    100% { filter: saturate(128%); opacity: 1; }
}

@keyframes tbf-hero-flow {
    0% { background-position: 0% 50%, 0% 50%; }
    100% { background-position: 100% 50%, 100% 50%; }
}

@keyframes tbf-hero-sheen {
    0%, 16% { background-position: 120% 50%; opacity: .18; }
    50% { opacity: .5; }
    84%, 100% { background-position: -20% 50%; opacity: .2; }
}

@keyframes tbf-orbit {
    0% { transform: translate3d(-4%, -3%, 0) scale(1); }
    100% { transform: translate3d(10%, 8%, 0) scale(1.16); }
}

@keyframes tbf-beam-drift {
    0% { transform: translate3d(-3%, -8%, 0) rotate(-11deg) scaleX(.94); }
    100% { transform: translate3d(8%, 10%, 0) rotate(-7deg) scaleX(1.08); }
}

@keyframes tbf-word-breathe {
    0% { transform: translate3d(0, -4px, 0); opacity: .56; }
    100% { transform: translate3d(-18px, 10px, 0); opacity: .82; }
}

@keyframes tbf-liquid-morph {
    0% { border-radius: 41% 59% 63% 37% / 47% 34% 66% 53%; transform: translate3d(-3%, -2%, 0) rotate(-5deg) scale(.94); }
    48% { border-radius: 61% 39% 43% 57% / 59% 64% 36% 41%; transform: translate3d(3%, 2%, 0) rotate(1deg) scale(1.035); }
    100% { border-radius: 35% 65% 49% 51% / 67% 38% 62% 33%; transform: translate3d(6%, -1%, 0) rotate(6deg) scale(1.08); }
}

@keyframes tbf-liquid-core {
    0% { border-radius: 54% 46% 62% 38% / 42% 58% 42% 58%; transform: translate3d(-7%, -4%, 0) rotate(4deg) scale(.92); }
    100% { border-radius: 38% 62% 45% 55% / 64% 39% 61% 36%; transform: translate3d(8%, 7%, 0) rotate(-7deg) scale(1.1); }
}

@keyframes tbf-liquid-ring {
    to { transform: rotate(360deg); }
}

@keyframes tbf-liquid-ring-reverse {
    to { transform: rotate(-360deg); }
}

@keyframes tbf-liquid-glint {
    0%, 18% { transform: translate3d(-20%, 0, 0) rotate(-20deg); opacity: .18; }
    48% { opacity: .9; }
    82%, 100% { transform: translate3d(130%, 75%, 0) rotate(-20deg); opacity: .14; }
}

@keyframes tbf-aurora-one {
    0% { background-position: 0% 50%; transform: rotate(-17deg) translate3d(-18%, -14%, 0) scaleX(.82) scaleY(.78); }
    52% { background-position: 58% 50%; transform: rotate(-9deg) translate3d(3%, 8%, 0) scaleX(1.08) scaleY(1.12); }
    100% { background-position: 100% 50%; transform: rotate(-3deg) translate3d(22%, 18%, 0) scaleX(1.2) scaleY(.9); }
}

@keyframes tbf-aurora-two {
    0% { background-position: 100% 50%; transform: rotate(13deg) translate3d(18%, 14%, 0) scaleX(1.12) scaleY(.88); }
    48% { background-position: 44% 50%; transform: rotate(5deg) translate3d(-2%, -6%, 0) scaleX(.94) scaleY(1.16); }
    100% { background-position: 0% 50%; transform: rotate(-2deg) translate3d(-24%, -18%, 0) scaleX(.82) scaleY(.82); }
}

@keyframes tbf-bubble-stars {
    0% { transform: translate3d(-8px, 10px, 0) scale(.98); opacity: .34; }
    45% { opacity: .68; }
    100% { transform: translate3d(18px, -14px, 0) scale(1.04); opacity: .48; }
}

@keyframes tbf-bubble-float {
    0% { transform: translate3d(-18px, 28px, 0) scale(.88) rotate(-5deg); opacity: .48; }
    45% { opacity: .92; }
    100% { transform: translate3d(26px, -42px, 0) scale(1.14) rotate(7deg); opacity: .78; }
}

@media (max-width: 1100px) {
    .tbf-hero {
        min-height: 850px;
    }

    .tbf-hero__copy {
        width: 62%;
    }

    .tbf-hero__liquid {
        right: -4vw;
        width: 47vw;
        opacity: .86;
    }
}

@media (max-width: 820px) {
    .tbf-hero__bubbles {
        inset: 10% -20% 12% 38%;
        opacity: .72;
    }

    .tbf-hero__bubbles i:nth-child(1),
    .tbf-hero__bubbles i:nth-child(5) {
        transform: scale(.78);
    }
}
@media (max-width: 820px) {
    .tbf-hero {
        min-height: 0;
        padding: 142px 0 46px;
    }

    .tbf-hero__container {
        min-height: 650px;
    }

    .tbf-hero__copy {
        width: 100%;
        min-height: 360px;
    }

    .tbf-hero h1 {
        max-width: 90%;
        font-size: clamp(62px, 15vw, 88px);
    }

    .tbf-hero__copy > p {
        max-width: 78%;
        font-size: 16px;
    }

    .tbf-hero__effect-switch {
        top: -12px;
        right: 4px;
    }

    .tbf-hero__liquid {
        top: 188px;
        right: -24%;
        width: 68vw;
        opacity: .48;
    }

    .tbf-hero__word {
        right: -9%;
        top: 170px;
        font-size: 27vw;
    }

    .tbf-hero__quick {
        overflow-x: auto;
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .tbf-hero {
        margin-top: -60px;
        padding: 112px 0 18px;
    }

    .tbf-hero__container {
        min-height: 438px;
        padding-bottom: 0;
    }

    .tbf-hero__copy {
        min-height: 232px;
        align-items: center;
        text-align: center;
    }

    .tbf-hero__eyebrow {
        justify-content: center;
        font-size: var(--tbf-font-size-min);
        letter-spacing: .12em;
    }

    .tbf-hero h1 {
        max-width: 100%;
        margin: 16px auto 16px;
        font-size: clamp(52px, 16.5vw, 72px);
        text-align: center;
    }

    .tbf-hero__masked-heading.masked-heading {
        align-self: center;
    }

    .tbf-hero__copy > p {
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        font-size: 15px;
        line-height: 1.64;
        text-align: center;
    }

    .tbf-hero__actions {
        margin-top: 20px;
        justify-content: center;
    }

    .tbf-button {
        min-height: 46px;
        padding: 0 18px;
        font-size: 13px;
    }

    .tbf-hero__liquid {
        top: 158px;
        right: -46%;
        width: 82vw;
        opacity: .3;
    }

    .tbf-hero__bottom {
        margin-top: 12px;
        padding-top: 0;
    }

    .tbf-hero__quick {
        display: none;
    }

    .tbf-hero__search {
        position: relative;
        z-index: 6;
        width: 100%;
        margin: 0 auto;
    }

    .tbf-hero__search form {
        height: 64px;
        padding: 8px 8px 8px 16px;
        border-radius: 20px;
    }

    .tbf-hero__search form > i {
        font-size: 18px;
    }

    .tbf-hero__search input {
        font-size: 14px;
    }

    .tbf-hero__search button {
        min-width: 92px;
        border-radius: 16px;
        font-size: 13px;
    }

    .tbf-hero__live-search {
        top: 72px;
        border-radius: 20px;
    }

    .tbf-hero__live-list {
        padding: 7px;
    }

    .tbf-hero__live-item {
        min-height: 60px;
        padding: 7px 8px;
        gap: 10px;
        border-radius: 14px;
    }

    .tbf-hero__live-thumb {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 12px;
    }

    .tbf-hero__live-title {
        font-size: 13px;
    }

    .tbf-hero__live-arrow {
        display: none;
    }

    .tbf-hero__keywords {
        display: none;
    }

    .tbf-hero__effect-text {
        display: none;
    }

    .tbf-hero__effect-switch {
        min-height: 38px;
        padding-right: 9px;
    }

    .tbf-hero__effect-icon {
        width: 25px;
        height: 25px;
    }
}

.tbf-home-page .mocat > .container {
    container-type: inline-size;
    container-name: tbf-home-module;
}

.tbf-home-page .mocat.tbf-mocat--feature .grids,
.tbf-home-page .mocat.tbf-mocat--photo .grids,
.tbf-home-page .mocat.tbf-mocat--editorial .grids,
.tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
    margin-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--feature .grids {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 205px;
    gap: 18px;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid {
    height: 205px;
    border: 0;
    border-radius: 18px;
    background: #dfe7f2 !important;
    box-shadow: 0 15px 38px rgba(29, 43, 70, .09);
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
    grid-column: span 2;
    grid-row: span 2;
    height: 428px;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    aspect-ratio: auto;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .img::after,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .img::after {
    content: "";
    position: absolute;
    inset: 28% 0 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 15, 30, .12) 35%, rgba(7, 15, 30, .78) 100%);
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px 18px 16px;
    display: block;
    color: #fff !important;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-brand,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-resource,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-type,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-access-badge {
    display: none !important;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con h3,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con h3 a {
    min-height: 1.35em !important;
    height: 1.35em !important;
    max-height: 1.35em !important;
    margin: 0;
    overflow: hidden !important;
    font-size: 15px;
    line-height: 1.35 !important;
    font-weight: 700;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child .con h3,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child .con h3 a {
    min-height: 1.35em !important;
    height: 1.35em !important;
    max-height: 1.35em !important;
    font-size: 21px;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con h3 a,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con h3 a:visited {
    color: #fff !important;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-footer {
    margin-top: 8px;
    padding: 0;
    justify-content: flex-start;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-date {
    color: rgba(255, 255, 255, .7);
}

/* “最新期刊”固定 8 项，组件宽度允许时始终采用 4×2 完整行；
 * 窄屏只降到 2 列，避免 Tablet 竖屏出现 3+3+2。 */
.tbf-home-page .mocat.tbf-mocat--journal .grids {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.tbf-home-page .mocat.tbf-mocat--photo .grids {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid {
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .065);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 13px 32px rgba(29, 43, 70, .065);
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid:hover {
    border-color: rgba(16, 27, 49, .11);
    box-shadow: 0 19px 42px rgba(29, 43, 70, .095);
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .img {
    aspect-ratio: 9 / 6;
    border-radius: 17px 17px 0 0;
    box-shadow: none;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .con {
    min-height: 82px;
    padding: 13px 15px 14px;
    gap: 7px;
    border-top: 1px solid rgba(16, 27, 49, .045);
    background: rgba(255, 255, 255, .9) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-brand,
.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-resource,
.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-access-badge,
.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-type {
    display: none !important;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .con h3,
.tbf-home-page .mocat.tbf-mocat--photo .post.grid .con h3 a {
    min-height: 1.35em !important;
    height: 1.35em !important;
    max-height: 1.35em !important;
    overflow: hidden !important;
    color: var(--tbf-ink) !important;
    font-family: var(--tbf-font-sans) !important;
    font-size: 16px;
    line-height: 1.35 !important;
    font-weight: 700;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-footer {
    padding: 0;
    justify-content: flex-start;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-date {
    color: #919baa;
}

.tbf-home-page .mocat.tbf-mocat--editorial .grids {
    height: 430px;
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid {
    flex: 1 1 0;
    width: auto;
    height: 430px;
    border: 0;
    border-radius: 21px;
    background: #e7edf6 !important;
    box-shadow: 0 18px 44px rgba(29, 43, 70, .09);
    transition: flex .46s cubic-bezier(.22, .8, .22, 1), box-shadow .28s ease;
}

.tbf-home-page .mocat.tbf-mocat--editorial .grids:not(:hover) .post.grid:first-child,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid:hover {
    flex: 2.65 1 0;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    aspect-ratio: auto;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 28px 20px 20px;
    display: block;
    color: #fff !important;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-brand,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-resource,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-access-badge,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-type {
    display: none !important;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con h3,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con h3 a {
    min-height: 1.3em !important;
    height: 1.3em !important;
    max-height: 1.3em !important;
    overflow: hidden !important;
    font-size: 17px;
    line-height: 1.3 !important;
    font-weight: 700;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con h3 a,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con h3 a:visited {
    color: #fff !important;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-footer {
    margin-top: 9px;
    padding: 0;
    justify-content: flex-start;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-date {
    color: rgba(255, 255, 255, .72);
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid {
    aspect-ratio: 9 / 7;
    border: 0;
    border-radius: 18px;
    background: #e8edf5 !important;
    box-shadow: 0 14px 34px rgba(29, 43, 70, .075);
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    aspect-ratio: auto;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .img::after {
    content: "";
    position: absolute;
    inset: 48% 0 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(7, 15, 30, .68));
    transition: opacity .28s ease;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px;
    display: block;
    opacity: 0;
    color: #fff !important;
    background: transparent !important;
    transition: opacity .28s ease;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid:hover .img::after,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid:hover .con {
    opacity: 1;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-brand,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-resource,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-access-badge,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-type {
    display: none !important;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-resolution {
    display: inline-flex;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con h3,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con h3 a {
    min-height: 1.35em !important;
    height: 1.35em !important;
    max-height: 1.35em !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: 16px;
    line-height: 1.35 !important;
    font-weight: 750;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-footer {
    display: none;
}

@media (hover: none) {
    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .img::after,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con {
        opacity: 1;
    }
    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con {
        transform: none;
    }
}

/* Homepage catalog modules now react to their own available width rather
 * than the device viewport.  The custom properties are consumed by home.js so
 * row balancing and preview limits follow the same component state as CSS. */
.tbf-home-page .mocat .grids {
    --tbf-home-limit-tier: desktop;
}

.tbf-home-page .mocat.tbf-mocat--photo .grids,
.tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
    --tbf-row-balance: 0;
}

@container tbf-home-module (max-width: 1040px) {
    .tbf-home-page .mocat .grids {
        --tbf-home-limit-tier: tablet;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .grids {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        grid-column: span 2;
    }

    .tbf-home-page .mocat.tbf-mocat--journal .grids {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tbf-home-page .mocat.tbf-mocat--photo .grids,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        --tbf-home-limit-tier: tablet;
        --tbf-row-balance: 1;
    }
}

@container tbf-home-module (max-width: 760px) {
    .tbf-home-page .mocat .grids {
        --tbf-home-limit-tier: mobile;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .grids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 220px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid,
    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        height: 220px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }

    .tbf-home-page .mocat.tbf-mocat--journal .grids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tbf-home-page .mocat.tbf-mocat--photo .grids,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        --tbf-home-limit-tier: mobile;
        --tbf-row-balance: 0;
    }

    .tbf-home-page .mocat.tbf-mocat--editorial .grids {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tbf-home-page .mocat.tbf-mocat--editorial .post.grid,
    .tbf-home-page .mocat.tbf-mocat--editorial .grids:not(:hover) .post.grid:first-child,
    .tbf-home-page .mocat.tbf-mocat--editorial .post.grid:hover {
        width: auto;
        height: 300px;
        flex: none;
    }
}


@container tbf-home-module (min-width: 700px) and (max-width: 760px) {
    .tbf-home-page .mocat.tbf-mocat--journal .grids {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container tbf-home-module (max-width: 520px) {
    .tbf-home-page .mocat.tbf-mocat--feature .grids,
    .tbf-home-page .mocat.tbf-mocat--photo .grids,
    .tbf-home-page .mocat.tbf-mocat--editorial .grids,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .grids {
        grid-auto-rows: 190px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid,
    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        height: 190px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child .con h3,
    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child .con h3 a {
        font-size: 15px;
    }

    .tbf-home-page .mocat.tbf-mocat--editorial .post.grid,
    .tbf-home-page .mocat.tbf-mocat--editorial .grids:not(:hover) .post.grid:first-child,
    .tbf-home-page .mocat.tbf-mocat--editorial .post.grid:hover {
        width: auto;
        height: clamp(168px, 45vw, 210px);
        aspect-ratio: auto;
    }

    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .img::after,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con {
        display: none;
    }
}

/* Three-column Mocat: tools / feed / visual picks. */
.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: stretch;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__panel {
    min-width: 0;
    padding: 26px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #f05b83;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__head h3 {
    margin: 0;
    color: #172033;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: #8b94a4;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__more-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__more:hover {
    color: #172033;
    transform: translateY(-1px);
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 8px;
    padding: 5px 3px 6px;
    color: #263044;
    text-align: center;
    text-decoration: none;
    transition: color .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool:hover {
    color: #172033;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool__logo {
    display: block;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    object-fit: contain;
    border-radius: 15px;
    transition: none;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool__name {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #263044;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.065);
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li:last-child {
    border-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__num {
    color: #c0c6d0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .02em;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li:nth-child(1) .tbf-triple-mocat__num {
    color: #ff5c87;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li:nth-child(2) .tbf-triple-mocat__num {
    color: #7b8cff;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li:nth-child(3) .tbf-triple-mocat__num {
    color: #33c7a5;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news a {
    overflow: hidden;
    color: #30394b;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news a:hover {
    color: #111827;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__visuals {
    display: grid;
    gap: 13px;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 8px;
    margin: -8px;
    border-radius: 17px;
    color: #263044;
    text-decoration: none;
    transition: background .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual:hover {
    background: rgba(248, 250, 252, 0.92);
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual__thumb {
    display: block;
    width: 92px;
    height: 62px;
    overflow: hidden;
    border-radius: 14px;
    background: #eef1f5;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual__title {
    display: -webkit-box;
    overflow: hidden;
    color: #30394b;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__empty {
    grid-column: 1 / -1;
    padding: 28px 0;
    color: #a0a8b5;
    font-size: 13px;
    text-align: center;
}

@container tbf-home-module (max-width: 1000px) {
    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat {
        grid-template-columns: 1fr 1fr;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__panel--visual {
        grid-column: 1 / -1;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__visuals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 26px;
    }
}

@container tbf-home-module (max-width: 640px) {
    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__panel,
    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__panel--visual {
        grid-column: auto;
        padding: 20px;
        border-radius: 22px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__head {
        margin-bottom: 16px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__head h3 {
        font-size: 20px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__more span {
        display: none;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__tools {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 8px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool {
        min-height: 0;
        padding: 4px 2px 5px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool__logo {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__visuals {
        grid-template-columns: 1fr;
    }
}

/* Discover four-column module: deals / apps / media / tech. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__panel {
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin-bottom: 18px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #f05b83;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__head h3 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: #8b94a4;
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__more svg {
    display: block;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__more:hover {
    color: #172033;
    transform: translateY(-1px);
}

/* Deals: one editorial lead, then compact text rows. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__feature {
    display: block;
    min-height: 112px;
    padding: 14px 16px;
    border-radius: 19px;
    background: rgba(247, 248, 251, 0.95);
    color: #263044;
    text-decoration: none;
    transition: background .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__feature:hover {
    background: #f3f5f8;
    transform: translateY(-1px);
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #a0a8b5;
    font-size: 10px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__meta b {
    color: #f05b83;
    font-weight: 700;
    letter-spacing: .08em;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__feature strong {
    display: -webkit-box;
    overflow: hidden;
    color: #263044;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    color: #8b94a4;
    font-size: 11px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 42px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: #30394b;
    text-decoration: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__row:last-child {
    border-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__row span {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__row time {
    color: #a0a8b5;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

/* Apps: existing featured covers, not logos. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-apps {
    display: grid;
    gap: 12px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 6px;
    margin: -6px;
    border-radius: 16px;
    color: #263044;
    text-decoration: none;
    transition: background .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app:hover {
    background: rgba(248, 250, 252, 0.92);
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__thumb {
    display: block;
    width: 78px;
    height: 54px;
    overflow: hidden;
    border-radius: 13px;
    background: #eef1f5;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__body {
    min-width: 0;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__body strong {
    display: -webkit-box;
    overflow: hidden;
    color: #30394b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__body small {
    display: block;
    margin-top: 5px;
    color: #a0a8b5;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

/* Media: lead visual card + restrained numbered links. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #e9edf2;
    color: #fff;
    text-decoration: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(180deg, rgba(8, 12, 20, 0), rgba(8, 12, 20, 0.72));
    pointer-events: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero > span {
    position: absolute;
    z-index: 1;
    right: 14px;
    bottom: 13px;
    left: 14px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero small {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 9px;
    letter-spacing: .08em;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 650;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero--empty::after {
    inset: 0;
    background: linear-gradient(135deg, #313846, #111827);
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-height: 42px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: #30394b;
    text-decoration: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__row:last-child {
    border-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__index {
    color: #b3bac5;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__row strong {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Tech: date-forward news stream, no cover dependency. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: #30394b;
    text-decoration: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row:last-child {
    border-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row time b {
    color: #616b7d;
    font-size: 11px;
    font-weight: 700;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row time span {
    margin-top: 4px;
    color: #b3bac5;
    font-size: 9px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.48;
    font-weight: 600;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@container tbf-home-module (max-width: 1080px) {
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-3,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container tbf-home-module (max-width: 640px) {
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-2,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-3,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-4 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__panel {
        padding: 20px;
        border-radius: 22px;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__head {
        min-height: 0;
        margin-bottom: 16px;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__head h3 {
        font-size: 20px;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__more span {
        display: none;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__thumb {
        width: 92px;
        height: 62px;
    }
}

/* 兔不凡账户入口：登录弹窗、独立登录页与找回密码共用视觉系统。 */
.tbf-account-visual {
    position: absolute;
    inset: 0 auto 0 0;
    width: 340px;
    overflow: hidden;
    border-radius: inherit;
    background: #dfe5ee;
    isolation: isolate;
}

.tbf-account-visual__slides,
.tbf-account-visual__slide {
    position: absolute;
    inset: 0;
}

.tbf-account-visual__slide {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .55s ease;
}

.tbf-account-visual__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.tbf-account-visual__slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.015);
    transition: transform 6s ease;
}

.tbf-account-visual__slide.is-active img {
    transform: scale(1.055);
}

.tbf-account-visual__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,16,31,.08) 12%, rgba(8,18,34,.15) 48%, rgba(7,15,29,.68) 100%);
    pointer-events: none;
}

.tbf-account-visual__brand {
    position: absolute;
    z-index: 3;
    left: 24px;
    right: 24px;
    bottom: 53px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,.26);
}

.tbf-account-visual__brand span {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .22em;
    opacity: .72;
}

.tbf-account-visual__brand strong {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.tbf-account-visual__caption {
    position: absolute;
    z-index: 3;
    left: 24px;
    right: 24px;
    bottom: 100px;
    color: #fff;
}

.tbf-account-visual__caption strong,
.tbf-account-visual__caption small {
    display: block;
}

.tbf-account-visual__caption strong {
    font-size: 17px;
    font-weight: 740;
    line-height: 1.35;
}

.tbf-account-visual__caption small {
    margin-top: 5px;
    color: rgba(255,255,255,.78);
    font-size: 11px;
    line-height: 1.5;
}

.tbf-account-visual__dots {
    position: absolute;
    z-index: 4;
    left: 24px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tbf-account-visual__dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.tbf-account-visual__dots button.is-active {
    width: 22px;
    background: rgba(255,255,255,.94);
}


/* Closed account modal must be completely inert. The parent Modown hides .sign
 * with visibility, while the carousel previously forced active slides back to
 * visibility:visible; that punched through the hidden parent and intercepted
 * clicks across entity/VIP pages. Keep the whole layer non-interactive unless
 * body.sign-show is present. */
body.tbf-ui .sign {
    pointer-events: none !important;
}
body.tbf-ui.sign-show .sign {
    pointer-events: auto !important;
}
body.tbf-ui:not(.sign-show) .sign .tbf-account-modal,
body.tbf-ui:not(.sign-show) .sign .tbf-account-visual,
body.tbf-ui:not(.sign-show) .sign .tbf-account-visual__slide {
    pointer-events: none !important;
}

/* 全站弹窗 */
body.tbf-ui .sign .sign-box.tbf-account-modal {
    width: min(440px, calc(100vw - 32px)) !important;
    max-height: min(780px, calc(100dvh - 36px));
    overflow: auto;
    border: 1px solid rgba(255,255,255,.88) !important;
    border-radius: 30px !important;
    background: linear-gradient(145deg, rgba(252,254,255,.94), rgba(244,248,253,.89)) !important;
    box-shadow: 0 38px 110px rgba(16,29,53,.27), inset 0 1px 0 rgba(255,255,255,.98) !important;
    -webkit-backdrop-filter: blur(34px) saturate(160%);
    backdrop-filter: blur(34px) saturate(160%);
}

body.tbf-ui .sign .sign-box.tbf-account-modal.has-left {
    width: min(820px, calc(100vw - 34px)) !important;
    min-height: 520px;
    padding-left: 334px !important;
}

body.tbf-ui .sign .tbf-account-modal .sign-wrap {
    min-width: 0;
    position: relative;
}

body.tbf-ui .sign .tbf-account-modal.has-left .sign-wrap {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.tbf-ui .sign .tbf-account-modal.has-left .tbf-account-visual {
    top: 16px;
    left: 16px;
    bottom: 16px;
    width: 302px;
    border-radius: 24px;
}

body.tbf-ui .sign .tbf-account-modal form {
    width: 100%;
    padding: 34px 34px 30px !important;
}

body.tbf-ui .sign .tbf-account-modal .logo-login {
    width: auto;
    height: auto !important;
    max-width: 142px;
    max-height: 58px;
    object-fit: contain;
}

body.tbf-ui .sign .tbf-account-modal .form-item:first-child {
    margin-bottom: 24px;
}

body.tbf-ui .sign .tbf-account-modal .form-control,
body.tbf-ui .sign .tbf-account-modal .erphp-weixin-scan .ews-box .ews-input {
    min-height: 50px !important;
    padding: 0 14px 0 42px !important;
    border: 1px solid rgba(16,27,49,.075) !important;
    border-radius: 16px !important;
    color: #101b31 !important;
    background: rgba(255,255,255,.70) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 7px 20px rgba(31,49,78,.035);
    outline: 0;
}

body.tbf-ui .sign .tbf-account-modal .form-control:focus {
    border-color: rgba(16,27,49,.18) !important;
    box-shadow: 0 0 0 4px rgba(55,92,148,.07), inset 0 1px 0 rgba(255,255,255,.98);
}

body.tbf-ui .sign .tbf-account-modal .form-item > i {
    left: 14px !important;
    top: 14px !important;
    color: #818c9c;
}

body.tbf-ui .sign .tbf-account-modal .form-slide-item {
    height: 50px !important;
    border-radius: 16px !important;
    line-height: 50px !important;
}

body.tbf-ui .sign .tbf-account-modal .captcha-slide,
body.tbf-ui .sign .tbf-account-modal .captcha-slide2 {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    border-radius: 15px !important;
    background: #111d33 !important;
}

body.tbf-ui .sign .tbf-account-modal .sign-submit {
    padding-bottom: 0;
    border-bottom: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.tbf-ui .sign .tbf-account-modal .sign-submit .btn {
    min-height: 50px;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: #111d33 !important;
    box-shadow: none;
    font-size: 14px;
    font-weight: 720;
}

body.tbf-ui .sign .tbf-account-modal .sign-submit .btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: none;
}

body.tbf-ui .sign .tbf-account-modal .sign-trans {
    min-height: 22px;
    margin-top: 13px;
    color: #8791a0;
    line-height: 1.7;
}

body.tbf-ui .sign .tbf-account-modal .sign-trans a {
    color: #26364f;
}

body.tbf-ui .sign .tbf-account-modal .social-login {
    margin-top: 22px;
}

body.tbf-ui .sign .tbf-account-modal .social-login .social-title {
    margin-bottom: 14px;
    color: #9aa3b0;
}

body.tbf-ui .sign .tbf-account-modal .sign-social a {
    transform: scale(.92);
    box-shadow: 0 8px 22px rgba(22,37,62,.10);
}

body.tbf-ui .sign .tbf-account-modal .sign-notice {
    padding: 0 32px 20px;
    color: #9aa4b2;
}

body.tbf-ui .sign .tbf-account-modal .expend-container::after {
    background: rgba(248,251,255,.96) !important;
}

body.tbf-ui .sign .tbf-account-modal .tbf-account-mode-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body.tbf-ui .sign .tbf-account-modal .tbf-account-mode-head > a {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

body.tbf-ui .sign .tbf-account-modal .tbf-account-mode-head > span {
    color: #8b96a7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

body.tbf-ui .sign .tbf-account-modal .tbf-account-mode-head > strong {
    margin-top: 6px;
    color: #101b31;
    font-size: 23px;
    letter-spacing: -.04em;
}

body.tbf-ui .sign .tbf-account-modal .tbf-account-mode-head > small {
    margin-top: 7px;
    color: #8c96a5;
    font-size: 12px;
    line-height: 1.65;
}

.tbf-account-password-status {
    display: none;
    margin: 9px 2px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.tbf-account-password-status.is-visible {
    display: block;
}

.tbf-account-password-status.is-success {
    color: #5d8171;
    background: transparent;
    border: 0;
}

.tbf-account-password-status.is-error {
    color: #af4052;
    background: transparent;
    border: 0;
}

/* 独立登录页 */
body.tbf-login-page.tbf-account-standalone {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 34px 22px;
    color: #101b31;
    background:
        radial-gradient(circle at 12% 12%, rgba(164,205,255,.28), transparent 32%),
        radial-gradient(circle at 88% 8%, rgba(255,196,218,.24), transparent 30%),
        linear-gradient(145deg, #f7faff, #f6f7fb);
    font-family: "HarmonyOS Sans SC","PingFang SC","Microsoft YaHei UI",system-ui,-apple-system,sans-serif;
}

body.tbf-login-page .loginbox.tbf-account-page-card {
    position: relative;
    width: min(470px, calc(100vw - 32px)) !important;
    min-height: 520px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 34px !important;
    color: #101b31;
    background: linear-gradient(145deg, rgba(253,254,255,.94), rgba(244,248,253,.88)) !important;
    box-shadow: 0 38px 110px rgba(24,39,67,.19), inset 0 1px 0 rgba(255,255,255,.98) !important;
    -webkit-backdrop-filter: blur(34px) saturate(160%);
    backdrop-filter: blur(34px) saturate(160%);
}

body.tbf-login-page .loginbox.tbf-account-page-card.has-left {
    width: min(920px, calc(100vw - 42px)) !important;
    min-height: 590px;
    padding-left: 376px !important;
}

body.tbf-login-page .loginbox.tbf-account-page-card .tbf-account-visual {
    top: 16px;
    left: 16px;
    bottom: 16px;
    width: 344px;
    border-radius: 26px;
}

body.tbf-login-page .loginbox.tbf-account-page-card .sign-wrap {
    width: 100%;
    max-width: none !important;
    min-height: 590px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 42px;
}

body.tbf-login-page .loginbox.tbf-account-page-card .part {
    width: 100%;
    max-width: 392px;
}

body.tbf-login-page .loginbox.tbf-account-page-card h2 {
    margin: 0 0 26px !important;
    text-align: center;
}

body.tbf-login-page .loginbox.tbf-account-page-card h2 a {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.tbf-login-page .loginbox.tbf-account-page-card h2 img {
    width: auto !important;
    height: auto !important;
    max-width: 158px;
    max-height: 62px;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain;
}

body.tbf-login-page .loginbox.tbf-account-page-card .input-item {
    margin-bottom: 12px;
}

body.tbf-login-page .loginbox.tbf-account-page-card .input-control {
    min-height: 52px;
    padding: 0 14px 0 43px !important;
    border: 1px solid rgba(16,27,49,.075) !important;
    border-radius: 16px !important;
    color: #101b31 !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 7px 20px rgba(31,49,78,.035);
    outline: 0;
}

body.tbf-login-page .loginbox.tbf-account-page-card .input-control:focus {
    border-color: rgba(16,27,49,.18) !important;
    box-shadow: 0 0 0 4px rgba(55,92,148,.07), inset 0 1px 0 rgba(255,255,255,.98);
}

body.tbf-login-page .loginbox.tbf-account-page-card .input-item .icon {
    left: 14px;
    top: 15px;
    color: #828d9d;
}

body.tbf-login-page .loginbox.tbf-account-page-card .form-slide-item {
    height: 52px;
    border: 1px solid rgba(16,27,49,.075);
    border-radius: 16px;
    color: #7f8a9a;
    background: rgba(237,242,248,.76);
    line-height: 52px;
}

body.tbf-login-page .loginbox.tbf-account-page-card .captcha-slide {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #111d33;
    line-height: 52px;
}

/*
 * Slider verification success state. Keep the account UI navy/white and use
 * only a restrained archive-status green to confirm that verification is done.
 */
body.tbf-ui .sign .tbf-account-modal .form-slide-item,
body.tbf-login-page .loginbox.tbf-account-page-card .form-slide-item {
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

body.tbf-ui .sign .tbf-account-modal .form-slide-item > span[id^="verification-status"],
body.tbf-login-page .loginbox.tbf-account-page-card .form-slide-item > span[id^="verification-status"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color .22s ease, font-weight .22s ease;
}

body.tbf-ui .sign .tbf-account-modal .form-slide-item.is-verified,
body.tbf-login-page .loginbox.tbf-account-page-card .form-slide-item.is-verified {
    border-color: rgba(74, 159, 112, .22) !important;
    background: linear-gradient(135deg, rgba(238, 249, 243, .88), rgba(249, 252, 250, .82)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 8px 22px rgba(54, 121, 84, .055) !important;
}

body.tbf-ui .sign .tbf-account-modal .form-slide-item.is-verified > span[id^="verification-status"],
body.tbf-login-page .loginbox.tbf-account-page-card .form-slide-item.is-verified > span[id^="verification-status"] {
    color: #56806a;
    font-weight: 650;
}

body.tbf-ui .sign .tbf-account-modal .form-slide-item.is-verified > span[id^="verification-status"]::before,
body.tbf-login-page .loginbox.tbf-account-page-card .form-slide-item.is-verified > span[id^="verification-status"]::before {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #56b789;
    box-shadow: 0 0 0 4px rgba(86, 183, 137, .12);
    content: "";
}

body.tbf-ui .sign .tbf-account-modal .form-slide-item.is-verified .captcha-slide,
body.tbf-ui .sign .tbf-account-modal .form-slide-item.is-verified .captcha-slide2,
body.tbf-login-page .loginbox.tbf-account-page-card .form-slide-item.is-verified .captcha-slide {
    cursor: default !important;
    animation: tbf-account-verified-pop .28s cubic-bezier(.22,.8,.34,1);
}

@keyframes tbf-account-verified-pop {
    0% { transform: scale(.92); }
    60% { transform: scale(1.045); }
    100% { transform: scale(1); }
}

body.tbf-login-page .loginbox.tbf-account-page-card .input-submit {
    margin: 12px 0 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.tbf-login-page .loginbox.tbf-account-page-card .input-submit .submit {
    min-height: 52px;
    padding: 0 22px;
    border: 0 !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: #111d33 !important;
    box-shadow: none;
    font-size: 14px;
    font-weight: 720;
}

body.tbf-login-page .loginbox.tbf-account-page-card .safe {
    margin: 16px 0 0;
}

body.tbf-login-page .loginbox.tbf-account-page-card .input-submit .submit:hover {
    box-shadow: none;
}

body.tbf-login-page .loginbox.tbf-account-page-card .safe a {
    color: #6f7b8d;
}

body.tbf-login-page .loginbox.tbf-account-page-card .safe a:hover {
    color: #101b31;
}

body.tbf-login-page .loginbox.tbf-account-page-card .sign-tips2,
body.tbf-login-page .loginbox.tbf-account-page-card .sign-tip {
    color: #b54154;
}

body.tbf-login-page .loginbox.tbf-account-page-card .regSuccess {
    margin: 34px 0;
    padding: 22px 18px;
    border: 1px solid rgba(45,140,98,.12);
    border-radius: 18px;
    color: #35755a;
    background: rgba(231,247,239,.68);
    line-height: 1.75;
}

body.tbf-login-page .loginbox.tbf-account-page-card .sign-notice {
    max-width: 390px;
    margin: 8px auto 0;
    color: #99a3b1;
}

body.tbf-login-page .return-home {
    position: fixed;
    top: 24px;
    left: 24px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 15px;
    color: #566478;
    background: rgba(255,255,255,.66);
    box-shadow: 0 10px 28px rgba(28,44,75,.08);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
}

body.tbf-login-page .return-home .icon {
    font-size: 21px;
}

body.tbf-login-page.night .loginbox.tbf-account-page-card {
    color: #eef2f8;
    border-color: rgba(255,255,255,.08) !important;
    background: linear-gradient(145deg, rgba(34,42,56,.94), rgba(25,32,44,.9)) !important;
}

body.tbf-login-page.night .loginbox.tbf-account-page-card .input-control,
body.tbf-login-page.night .loginbox.tbf-account-page-card .form-slide-item {
    color: #edf2fa !important;
    border-color: rgba(255,255,255,.075) !important;
    background: rgba(255,255,255,.055) !important;
}

body.tbf-login-page.night .loginbox.tbf-account-page-card .form-slide-item.is-verified {
    border-color: rgba(111, 197, 151, .24) !important;
    background: linear-gradient(135deg, rgba(61, 116, 88, .20), rgba(255,255,255,.055)) !important;
}

body.tbf-login-page.night .loginbox.tbf-account-page-card .form-slide-item.is-verified > span[id^="verification-status"] {
    color: #9bd4b6;
}

@media (max-width: 820px) {
    .tbf-account-visual:not(.tbf-account-visual--mobile-on) {
        display: none !important;
    }

    body.tbf-ui .sign .sign-box.tbf-account-modal.has-left {
        width: min(440px, calc(100vw - 28px)) !important;
        min-height: 0;
        padding-left: 0 !important;
    }

    body.tbf-login-page .loginbox.tbf-account-page-card.has-left {
        width: min(470px, calc(100vw - 32px)) !important;
        min-height: 520px;
        padding-left: 0 !important;
    }

    .tbf-account-visual.tbf-account-visual--mobile-on {
        position: relative;
        inset: auto;
        width: 100% !important;
        height: 190px;
        border-radius: 26px 26px 0 0 !important;
    }

    body.tbf-ui .sign .sign-box.tbf-account-modal.has-left:has(.tbf-account-visual--mobile-on),
    body.tbf-login-page .loginbox.tbf-account-page-card.has-left:has(.tbf-account-visual--mobile-on) {
        padding-left: 0 !important;
    }
}

@media (max-width: 640px) {
    body.tbf-ui .sign .sign-box.tbf-account-modal,
    body.tbf-ui .sign .sign-box.tbf-account-modal.has-left {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px);
        top: 50% !important;
        bottom: auto !important;
        left: 12px !important;
        transform: translateY(-50%) !important;
        border-radius: 26px !important;
    }

    body.tbf-ui .sign .tbf-account-modal.has-left .sign-wrap {
        min-height: 0;
        display: block;
    }

    body.tbf-ui .sign .tbf-account-modal form {
        padding: 28px 20px 24px !important;
    }

    body.tbf-ui .sign .tbf-account-modal .sign-notice {
        padding-right: 20px;
        padding-left: 20px;
    }

    body.tbf-login-page.tbf-account-standalone {
        padding: 18px 14px;
    }

    body.tbf-login-page .loginbox.tbf-account-page-card,
    body.tbf-login-page .loginbox.tbf-account-page-card.has-left {
        width: min(100%, 450px) !important;
        min-height: 0;
        border-radius: 27px !important;
    }

    body.tbf-login-page .loginbox.tbf-account-page-card .sign-wrap {
        min-height: 0;
        padding: 30px 20px 26px;
    }

    body.tbf-login-page .return-home {
        top: 14px;
        left: 14px;
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tbf-account-visual__slide,
    .tbf-account-visual__slide img,
    .tbf-account-visual__dots button,
    body.tbf-ui .sign .tbf-account-modal .sign-submit .btn {
        transition: none !important;
    }
}


/* v0.9.388：账户表单提示统一为表单内轻提示，不再使用底部整条红色旧提示。 */
body.tbf-ui .sign .tbf-account-modal .sign-tips {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 10px 0 2px !important;
    padding: 9px 12px 9px 34px !important;
    overflow: visible !important;
    border: 1px solid rgba(181,65,84,.12) !important;
    border-radius: 12px !important;
    color: #a43f51 !important;
    background: rgba(181,65,84,.065) !important;
    box-shadow: none !important;
    line-height: 1.55 !important;
    font-size: 12px !important;
    font-weight: 600;
    text-align: left;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
}
body.tbf-ui .sign .tbf-account-modal .sign-tips::before {
    content: "!";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #b54154;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-50%);
}
body.tbf-ui .sign .tbf-account-modal .sign-tips.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .16s ease, transform .16s ease;
}
body.tbf-ui .sign .tbf-account-modal .sign-tips:empty {
    display: none !important;
}

/* 独立登录 / 注册页的字段与提交提示使用同一视觉语言。 */
body.tbf-login-page .loginbox.tbf-account-page-card .sign-tips2,
body.tbf-login-page .loginbox.tbf-account-page-card .sign-tip {
    position: relative;
    margin: 8px 0 12px !important;
    padding: 8px 11px 8px 31px !important;
    border: 1px solid rgba(181,65,84,.11);
    border-radius: 11px;
    color: #a43f51 !important;
    background: rgba(181,65,84,.06);
    box-shadow: none;
    line-height: 1.5;
    font-size: 11px !important;
}
body.tbf-login-page .loginbox.tbf-account-page-card .sign-tips2::before,
body.tbf-login-page .loginbox.tbf-account-page-card .sign-tip::before {
    content: "!";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 13px;
    height: 13px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #b54154;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-50%);
}


/* Standalone login/register validation: keep errors inside the active form. */
body.tbf-login-page .loginbox.tbf-account-page-card .sign-tips2 {
    display: none;
    width: 100%;
    margin: 10px 0 0 !important;
    padding: 10px 12px 10px 36px !important;
    border: 1px solid rgba(190, 61, 83, .12) !important;
    border-radius: 13px !important;
    color: #a83d50 !important;
    background: rgba(255, 240, 243, .72) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    text-align: left !important;
}
body.tbf-login-page .loginbox.tbf-account-page-card .sign-tips2.is-visible { display: block; }
body.tbf-login-page .loginbox.tbf-account-page-card .sign-tips2:empty { display: none !important; }


/* v0.9.390：恢复 Modown“登录提示文字 / 注册协议地址”在新账户 UI 中的稳定布局。 */
body.tbf-ui .sign .tbf-account-modal .sign-notice,
body.tbf-login-page .loginbox.tbf-account-page-card .sign-notice {
    width: 100%;
    max-width: none;
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(16,27,49,.06);
    border-radius: 12px;
    color: #8b95a4;
    background: rgba(255,255,255,.48);
    box-shadow: none;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}
body.tbf-ui .sign .tbf-account-modal .sign-notice:empty,
body.tbf-login-page .loginbox.tbf-account-page-card .sign-notice:empty {
    display: none !important;
}
body.tbf-ui .sign .tbf-account-modal .form-policy,
body.tbf-login-page .loginbox.tbf-account-page-card .form-policy {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 2px 0;
    color: #8b95a4;
    font-size: 11px;
    line-height: 1.55;
    text-align: left;
}
body.tbf-ui .sign .tbf-account-modal .form-policy input,
body.tbf-login-page .loginbox.tbf-account-page-card .form-policy input {
    flex: 0 0 auto;
    margin: 2px 0 0;
}
body.tbf-ui .sign .tbf-account-modal .form-policy label,
body.tbf-login-page .loginbox.tbf-account-page-card .form-policy label {
    min-width: 0;
    margin: 0;
}
body.tbf-ui .sign .tbf-account-modal .form-policy a,
body.tbf-login-page .loginbox.tbf-account-page-card .form-policy a {
    color: #26364f;
    font-weight: 650;
}

@media (prefers-reduced-motion: reduce) {
    body.tbf-ui .sign .tbf-account-modal .form-slide-item.is-verified .captcha-slide,
    body.tbf-ui .sign .tbf-account-modal .form-slide-item.is-verified .captcha-slide2,
    body.tbf-login-page .loginbox.tbf-account-page-card .form-slide-item.is-verified .captcha-slide {
        animation: none !important;
    }
}

/* v0.9.669 · 登录 IP 防护状态。状态由无缓存 AJAX 获取，避免游客 FastCGI 公共缓存串 IP。 */
body.tbf-ui .tbf-login-guard-notice,
body.tbf-login-page .tbf-login-guard-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(210, 53, 69, .18);
    border-radius: 10px;
    background: rgba(255, 245, 246, .82);
    color: #a42635;
    font-size: 12px;
    line-height: 1.65;
}
body.tbf-ui .tbf-login-guard-notice__dot,
body.tbf-login-page .tbf-login-guard-notice__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: #d63638;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, .09);
}
body.tbf-ui .sign .signinsubmit-loader.is-tbf-login-guarded,
body.tbf-login-page .login-loader.is-tbf-login-guarded {
    cursor: not-allowed;
    opacity: .56;
}
body.night.tbf-ui .tbf-login-guard-notice {
    background: rgba(118, 31, 42, .20);
    border-color: rgba(255, 123, 136, .20);
    color: #ffb7bf;
}

/* ==========================================================================
   Modown 模块适配层（原站规则没有覆盖到的 modown 默认模块）
   ========================================================================== */

/* ---- 首页 mocat 模块节奏（对齐 tubufan 首页 section 的留白与底色） ---- */
body.tbf-home-page .contents .mocat{padding:72px 0;border:0;}
body.tbf-home-page .contents .mocat:nth-of-type(even){
    background:
        radial-gradient(circle at 82% 18%, rgba(220, 231, 251, .34), transparent 32%),
        linear-gradient(180deg, #f7f9fd 0%, #f4f7fc 100%);
}

/* ---- mocat 标题兜底（JS 会把 h2 升级成 tbf-module-heading，这里是降级样式） ---- */
.tbf-ui .mocat .container > h2{margin:0 0 36px;text-align:center;}
.tbf-ui .mocat .container > h2 span{color:var(--tbf-accent);font-size:clamp(17px,1.45vw,22px);font-weight:800;letter-spacing:.055em;}
.tbf-ui .mocat .container > h2 span i{display:inline-block;margin:0 0 0 8px;padding:3px 8px;border-radius:999px;color:#fff;background:var(--tbf-accent);font-size:11px;font-style:normal;font-weight:700;letter-spacing:.08em;vertical-align:3px;}

/* ---- mocat 描述 / 子分类筛选 chips ---- */
.tbf-ui .mocat .desc{margin:0 0 30px;text-align:center;color:var(--tbf-muted);}
.tbf-ui .mocat ul.child{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 34px;padding:7px;border:1px solid rgba(16,27,49,.075);border-radius:999px;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);box-shadow:0 12px 30px rgba(34,54,92,.06),inset 0 1px 0 rgba(255,255,255,.88);}
.tbf-ui .mocat ul.child li{float:none;margin:0;padding:0;}
.tbf-ui .mocat ul.child a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 16px;border-radius:999px;color:#6f7a8a !important;background:transparent !important;font-size:13px;font-weight:650;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.tbf-ui .mocat ul.child a.active,
.tbf-ui .mocat ul.child a:hover{color:#fff !important;background:var(--tbf-ink) !important;box-shadow:0 8px 20px rgba(16,27,49,.16);}

/* ---- 侧边栏小工具玻璃卡片 ---- */
.tbf-ui .sidebar .widget,
.tbf-ui .widgets .widget{
    margin-bottom:24px;padding:22px;
    border:1px solid rgba(16,27,49,.07);
    border-radius:20px;
    background:rgba(255,255,255,.78) !important;
    box-shadow:0 13px 34px rgba(36,54,91,.05),inset 0 1px 0 rgba(255,255,255,.66);
}
.tbf-ui .sidebar .widget h3,
.tbf-ui .widgets .widget h3{
    margin:0 0 16px;
    color:var(--tbf-ink);
    font-size:16px;
    font-weight:760;
    letter-spacing:-.01em;
}

/* ---- 侧栏文章小列表（widget-postlist） ---- */
.tbf-ui .widget-postlist .hasimg li{border-bottom:1px solid rgba(16,27,49,.05) !important;}

/* ---- 页脚：深色玻璃 ---- */
.tbf-ui .footer{
    background:#06070b !important;
    border-top:1px solid rgba(255,255,255,.06);
}
.tbf-ui .footer .copyright,
.tbf-ui .footer .copyright p{color:#7d899c;}
.tbf-ui .footer .copyright a,
.tbf-ui .footer .footer-links a{color:#c6cfdd;transition:color .2s ease;}
.tbf-ui .footer .copyright a:hover,
.tbf-ui .footer .footer-links a:hover{color:#fff;}
.tbf-ui .footer .footer-links ul li:first-child{color:#5b6678;}
.tbf-ui .footer .footer-widgets .widget{color:#98a2b3;}
.tbf-ui .footer .footer-widgets .widget h3,
.tbf-ui .footer .footer-widgets .widget .widget-title{margin:0 0 14px;color:#e8edf5;font-size:15px;font-weight:700;}
.tbf-ui .footer .footer-widgets .widget a{color:#98a2b3;}
.tbf-ui .footer .footer-widgets .widget a:hover{color:#fff;}

/* ---- 右侧悬浮工具条（rollbar）玻璃化 ---- */
.tbf-ui .rollbar{
    border:1px solid rgba(255,255,255,.72);
    border-radius:20px;
    background:rgba(246,249,255,.68) !important;
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    backdrop-filter:blur(24px) saturate(160%);
    box-shadow:0 16px 40px rgba(31,48,80,.13),inset 0 1px 0 rgba(255,255,255,.85);
}
.tbf-ui .rollbar li a{color:var(--tbf-ink-2);}
.tbf-ui .rollbar li h6{
    border-radius:12px;
    background:rgba(16,27,49,.92) !important;
    color:#fff !important;
}

/* ---- 底部公告条（sitetips）玻璃化 ---- */
.tbf-ui .sitetips-default{
    border:1px solid rgba(255,255,255,.72);
    border-radius:999px;
    background:rgba(246,249,255,.72) !important;
    color:var(--tbf-ink-2);
    box-shadow:0 14px 38px rgba(31,48,80,.13),inset 0 1px 0 rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    backdrop-filter:blur(24px) saturate(160%);
}

/* ---- 夜间模式下的追加适配 ---- */
body.night.tbf-ui .mocat .container > h2 span{color:var(--tbf-accent);}
body.night.tbf-ui .mocat ul.child{border-color:rgba(255,255,255,.09);background:rgba(25,29,38,.66);box-shadow:none;}
body.night.tbf-ui .sidebar .widget,
body.night.tbf-ui .widgets .widget{border-color:rgba(255,255,255,.075);background:rgba(28,31,39,.72) !important;box-shadow:none;}
body.night.tbf-ui .rollbar{border-color:rgba(255,255,255,.09);background:rgba(25,29,38,.76) !important;box-shadow:0 20px 52px rgba(0,0,0,.28);}
body.night.tbf-ui .sitetips-default{border-color:rgba(255,255,255,.09);background:rgba(25,29,38,.76) !important;color:#c5ccda;box-shadow:none;}
body.night.tbf-home-page .contents .mocat:nth-of-type(even){
    background:
        radial-gradient(circle at 82% 18%, rgba(38,48,74,.5), transparent 32%),
        linear-gradient(180deg,#161920 0%,#12151b 100%);
}

/* ---- 液态玻璃首屏（供 template/homepage-tubufan.php 使用，动画细节见 home.css） ---- */

/* ==========================================================================
   补丁 v1.1：首屏错位与视频蒙版可见性修复
   --------------------------------------------------------------------------
   1) 头部透明化不再依赖 WP 的 body.home 类——只要使用了液态玻璃首页模板
      （body.tbf-home-page，页面里存在 .tbf-hero），头部就浮在首屏之上；
      未滚动时导航用白字，滚动后切换成玻璃条。
   2) 首屏与 body 顶部留白精确联动：modown 在桌面端给 body 预留 70/100px，
      移动端预留 60/90px，hero 用等值负 margin 拉回，保证 header 恰好压在
      首屏渐变上而不是多出一条白边或把首屏顶下去。620~768px 区间此前缺失。
   3) 视频蒙版标题：glyph 坐标由 tubufan-ui.js 实测写入；这里补一个
      letter-spacing 兜底，并保证蒙版未激活时静态标题始终可见。
   ========================================================================== */

/* --- 1) 头部透明化（不依赖 body.home） --- */
body.tbf-home-page .header,
body.tbf-home-page .header:not(.scrolled) {
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.tbf-home-page .header:not(.scrolled)::before {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
body.tbf-home-page .header:not(.scrolled) .nav-main > li,
body.tbf-home-page .header:not(.scrolled) .nav-main > li > a,
body.tbf-home-page .header:not(.scrolled) .nav-right > li > a,
body.tbf-home-page .header:not(.scrolled) .nav-left > li > a {
    color: #ffffff;
}
body.tbf-home-page .header:not(.scrolled) .logo a,
body.tbf-home-page .header:not(.scrolled) .logo a img {
    color: #ffffff;
    filter: drop-shadow(0 2px 14px rgba(16, 27, 49, .28));
}
body.tbf-home-page .header:not(.scrolled) .nav-main li.menu-item-has-children:after {
    color: #ffffff;
}
body.tbf-home-page .header:not(.scrolled) .nav-right .nav-login.no > a.signin-loader {
    color: #ffffff !important;
    background: rgba(16, 27, 49, .34) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 10px 26px rgba(16, 27, 49, .12), inset 0 1px 0 rgba(255, 255, 255, .28);
}
body.tbf-home-page .header.scrolled .logo a,
body.tbf-home-page .header.scrolled .logo a img {
    color: var(--tbf-ink, #101b31);
    filter: none;
}

/* --- 2) 首屏与 body 顶部留白联动 --- */
body.tbf-home-page .tbf-hero { margin-top: -70px; }
@media (max-width: 768px) {
    body.tbf-home-page .tbf-hero { margin-top: -60px; }
}
/* topbar 关闭时 modown 会把 body margin-top 收窄，hero 同步收窄 */
body.tbf-home-page:not(.has-topbar) .tbf-hero { margin-top: -70px; }
@media (max-width: 768px) {
    body.tbf-home-page:not(.has-topbar) .tbf-hero { margin-top: -60px; }
}

/* --- 3) 视频蒙版标题兜底 --- */
/* 蒙版未激活（视频未就绪 / JS 未跑）时静态标题必须可见 */
.tbf-hero__title-layout-text { opacity: 1 !important; }
.tbf-hero__title-slot.is-mask-media-ready > .tbf-hero__title-layout-text { opacity: 0 !important; }
/* clipPath 内的 <text> 继承精确度量；显式补默认基线行为，防止部分浏览器把
   字形按 hanging 基线渲染造成整体偏移 */
.masked-heading__glyph {
    dominant-baseline: alphabetic;
    white-space: nowrap;
    text-anchor: start;
}
/* 视频层在字形外不可见、字形内保持视频原色 */
.masked-heading__source { opacity: 1; }
/* prefers-reduced-motion：直接隐藏蒙版层，保留静态标题 */
@media (prefers-reduced-motion: reduce) {
    .tbf-hero__masked-heading { display: none !important; }
    .tbf-hero__title-layout-text { opacity: 1 !important; }
}