:root {
    --cj-bg: #f3f6f8;
    --cj-panel: #ffffff;
    --cj-text: #17212b;
    --cj-muted: #70808f;
    --cj-line: #e5ebf0;
    --cj-primary: #10b99c;
    --cj-primary-dark: #0a8b78;
    --cj-accent: #ff5d76;
    --cj-gold: #ffb547;
    --cj-blue: #2f8cff;
    --cj-shadow: 0 18px 55px rgba(20, 36, 51, .12);
    --cj-search-bg: #ffffff;
    --cj-search-border: transparent;
    --cj-search-text: #1f2937;
    --cj-search-placeholder: #8793a5;
    --cj-icon-blue-bg: #eef4ff;
    --cj-icon-red-bg: #fff0f3;
    --cj-icon-gold-bg: #fff8e7;
}

body.cj-theme {
    margin: 0;
    background: #f7fbff;
    color: var(--cj-text);
    font-family: "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

body.cj-theme button,
body.cj-theme input,
body.cj-theme select,
body.cj-theme textarea {
    font-family: "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

body.cj-night {
    --cj-bg: #050505;
    --cj-panel: #101010;
    --cj-text: #f6f7f9;
    --cj-muted: #b7bec9;
    --cj-line: #2a2a2a;
    --cj-shadow: 0 18px 55px rgba(0, 0, 0, .35);
    --cj-search-bg: #171717;
    --cj-search-border: #343434;
    --cj-search-text: #f6f7f9;
    --cj-search-placeholder: #9da4af;
    --cj-icon-blue-bg: rgba(67, 126, 255, .18);
    --cj-icon-red-bg: rgba(255, 82, 105, .16);
    --cj-icon-gold-bg: rgba(245, 167, 0, .16);
}

/* Night theme state. Keep this near variables so day/night styles stay paired. */
body.cj-night,
body.cj-night .cj-site-main,
body.cj-night .cj-ai-home,
body.cj-night .cj-product-page {
    background: var(--cj-bg);
    color: var(--cj-text);
}

body.cj-night .cj-site-header,
body.cj-night .cj-category-card,
body.cj-night .cj-category-rail,
body.cj-night .cj-platform-notice,
body.cj-night .cj-ai-resource-card,
body.cj-night .cj-ai-plan,
body.cj-night .cj-footer,
body.cj-night .cj-header-search-popover,
body.cj-night .cj-product-cover,
body.cj-night .cj-product-info,
body.cj-night .cj-product-author,
body.cj-night .cj-service-steps,
body.cj-night .cj-product-content,
body.cj-night .cj-product-side section,
body.cj-night .cj-pay-dialog,
body.cj-night .cj-auth-dialog {
    border-color: var(--cj-line);
    background: var(--cj-panel);
    box-shadow: var(--cj-shadow);
}

body.cj-night .cj-ai-hero,
body.cj-night .cj-ai-hero-inner {
    background: var(--cj-bg);
}

body.cj-night .cj-blue-banner {
    border-color: var(--cj-line);
    background: linear-gradient(100deg, #101010, #191919);
    box-shadow: var(--cj-shadow);
}

body.cj-night .cj-ai-search,
body.cj-night .cj-header-search-popover,
body.cj-night .cj-auth-form input,
body.cj-night .cj-pay-product,
body.cj-night .cj-pay-order-grid div,
body.cj-night .cj-pay-summary,
body.cj-night .cj-pay-methods button,
body.cj-night .cj-resource-pagination a,
body.cj-night .cj-resource-pagination span,
body.cj-night .cj-footer-qrcode span,
body.cj-night .cj-unlock-card textarea,
body.cj-night .cj-unlock-card-bottom textarea {
    border-color: var(--cj-search-border);
    background: var(--cj-search-bg);
    color: var(--cj-text);
}

body.cj-night .cj-header-search-popover::before {
    border-color: var(--cj-search-border);
    background: var(--cj-search-bg);
}

body.cj-night .cj-ai-search input,
body.cj-night .cj-header-search-popover input,
body.cj-night .cj-auth-form input {
    color: var(--cj-search-text);
    background: transparent;
}

body.cj-night .cj-ai-search input::placeholder,
body.cj-night .cj-header-search-popover input::placeholder,
body.cj-night .cj-auth-form input::placeholder {
    color: var(--cj-search-placeholder);
}

body.cj-night .cj-brand-text strong,
body.cj-night .cj-ai-hero h1,
body.cj-night .cj-ai-section-title h2,
body.cj-night .cj-category-card strong,
body.cj-night .cj-ai-resource-card h3,
body.cj-night .cj-ai-resource-card h3 a,
body.cj-night .cj-ai-plan h3,
body.cj-night .cj-blue-banner strong,
body.cj-night .cj-footer-grid strong,
body.cj-night .cj-product-info h1,
body.cj-night .cj-product-author > strong,
body.cj-night .cj-service-steps strong,
body.cj-night .cj-detail-tabs a,
body.cj-night .cj-detail-panel h2,
body.cj-night .cj-product-side strong,
body.cj-night .cj-related-card span,
body.cj-night .cj-pay-product strong,
body.cj-night .cj-pay-summary strong,
body.cj-night .cj-pay-order-grid strong,
body.cj-night .cj-auth-form h2 {
    color: var(--cj-text);
}

body.cj-night .cj-brand-text small,
body.cj-night .cj-main-nav a,
body.cj-night .cj-hero-subtitle,
body.cj-night .cj-category-card small,
body.cj-night .cj-category-rail a,
body.cj-night .cj-platform-notice,
body.cj-night .cj-platform-notice p,
body.cj-night .cj-ai-section-title a,
body.cj-night .cj-ai-resource-card p,
body.cj-night .cj-ai-resource-card footer span,
body.cj-night .cj-ai-plan p,
body.cj-night .cj-ai-plan li,
body.cj-night .cj-blue-banner p,
body.cj-night .cj-footer,
body.cj-night .cj-footer a,
body.cj-night .cj-copyright,
body.cj-night .cj-product-desc,
body.cj-night .cj-product-stats,
body.cj-night .cj-product-meta dt,
body.cj-night .cj-product-meta dd,
body.cj-night .cj-product-service,
body.cj-night .cj-product-author p,
body.cj-night .cj-service-steps div,
body.cj-night .cj-detail-panel p,
body.cj-night .cj-product-side section > a,
body.cj-night .cj-pay-product span,
body.cj-night .cj-pay-product small,
body.cj-night .cj-pay-head p,
body.cj-night .cj-pay-safe,
body.cj-night .cj-auth-form p,
body.cj-night .cj-auth-form small {
    color: var(--cj-muted);
}

body.cj-night .cj-header-search,
body.cj-night .cj-theme-toggle,
body.cj-night .cj-login-link {
    border-color: #2f2f2f;
    color: var(--cj-text);
    background: var(--cj-panel);
}

body.cj-night .cj-header-search:hover,
body.cj-night .cj-theme-toggle:hover,
body.cj-night .cj-main-nav a:hover,
body.cj-night .cj-platform-notice a {
    color: #7ea7ff;
}

body.cj-night .cj-header-search-popover button,
body.cj-night .cj-register-link,
body.cj-night .cj-resource-pagination a.is-active,
body.cj-night .cj-view-all-button,
body.cj-night .cj-ai-plan button,
body.cj-night .cj-product-actions button:first-child,
body.cj-night .cj-pay-submit,
body.cj-night .cj-auth-submit {
    color: #fff;
    background: #2368ff;
    border-color: #2368ff;
}

body.cj-night .cj-category-rail a.is-active,
body.cj-night .cj-detail-tabs a.is-active {
    color: #7ea7ff;
}

body.cj-night .cj-product-meta,
body.cj-night .cj-detail-tabs,
body.cj-night .cj-detail-panel th,
body.cj-night .cj-detail-panel td {
    border-color: #303030;
}

body.cj-night .cj-detail-panel th,
body.cj-night .cj-detail-panel td {
    background: #0b0b0b;
    color: #dfe4eb;
}

body.cj-night .cj-mobile-tabbar {
    border-color: var(--cj-line);
    background: rgba(10, 10, 10, .98);
}

body.cj-night .cj-mobile-tabbar a {
    color: #aeb5c0;
}

body.cj-night .cj-mobile-tabbar a.is-active {
    color: #7ea7ff;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.cj-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.cj-site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--cj-panel) 88%, transparent);
    border-bottom: 1px solid var(--cj-line);
    backdrop-filter: blur(18px);
}

.cj-header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cj-brand,
.cj-main-nav,
.cj-header-actions,
.cj-quick-card,
.cj-resource-card footer,
.cj-section-title,
.cj-buy-card,
.cj-license {
    display: flex;
    align-items: center;
}

.cj-brand {
    gap: 12px;
    min-width: 0;
}

.cj-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, var(--cj-primary), #31d076);
}

.cj-brand-mark.has-logo-image {
    background: transparent;
    box-shadow: none;
}

.cj-brand-mark.has-logo-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.cj-brand-text small,
.cj-kicker,
.cj-card-cat,
.cj-resource-card footer span,
.cj-section-title span,
.cj-price-panel p,
.cj-buy-card p,
.cj-license p,
.cj-user-profile p {
    color: var(--cj-muted);
}

.cj-brand-text {
    display: grid;
    min-width: 0;
    line-height: 1.2;
}

.cj-brand-text strong {
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-main-nav {
    gap: 18px;
}

.cj-main-nav a {
    font-size: 14px;
    color: var(--cj-muted);
}

.cj-main-nav a:hover {
    color: var(--cj-primary);
}

.cj-header-actions {
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.cj-icon-button,
.cj-menu-button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: var(--cj-bg);
    color: var(--cj-text);
    cursor: pointer;
}

.cj-vip-pill,
.cj-button,
.cj-search button,
.cj-plan button,
.cj-license-box button,
.cj-price-panel button,
.cj-buy-card button {
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--cj-primary);
    cursor: pointer;
}

.cj-vip-pill {
    padding: 10px 14px;
    background: #2b3035;
    font-size: 14px;
}

.cj-menu-button,
.cj-mobile-drawer {
    display: none;
}

.cj-hero {
    position: relative;
    min-height: 500px;
    overflow: hidden;
}

.cj-hero-media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, .45)),
        url("https://picsum.photos/seed/chuangjian-hero/1800/900") center/cover;
}

.cj-hero-content {
    position: relative;
    z-index: 1;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
}

.cj-hero h1 {
    margin: 10px 0;
    font-size: clamp(36px, 6vw, 72px);
    line-height: 1;
}

.cj-hero p {
    max-width: 720px;
    margin: 0 0 26px;
    color: rgba(255, 255, 255, .86);
}

.cj-search {
    width: min(760px, 100%);
    display: flex;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
}

.cj-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    padding: 0 18px;
    background: transparent;
    font-size: 16px;
}

.cj-search button {
    padding: 14px 24px;
}

.cj-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.cj-keywords a {
    padding: 7px 10px;
    border-radius: 8px;
    color: #1d332c;
    background: rgba(255, 255, 255, .8);
}

.cj-quick-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: -38px;
    position: relative;
    z-index: 2;
}

.cj-quick-card {
    gap: 14px;
    padding: 20px;
    border-radius: 8px;
    background: var(--cj-panel);
    box-shadow: var(--cj-shadow);
}

.cj-quick-card span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: var(--cj-accent);
}

.cj-quick-card small {
    display: block;
    margin-top: 4px;
    color: var(--cj-muted);
}

.cj-announcement {
    margin-top: 24px;
    display: grid;
    gap: 14px;
}

.cj-banner,
.cj-ticker {
    border-radius: 8px;
    background: var(--cj-panel);
    box-shadow: var(--cj-shadow);
}

.cj-banner {
    padding: 28px;
    color: #fff;
    background: linear-gradient(95deg, #ff4966, #ffb547);
    font-size: 22px;
    font-weight: 800;
}

.cj-ticker {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
}

.cj-ticker span {
    color: var(--cj-primary);
    font-weight: 800;
}

.cj-layout,
.cj-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    margin-top: 30px;
}

.cj-section-title {
    justify-content: space-between;
    margin: 0 0 16px;
}

.cj-section-title h2,
.cj-section-title h1 {
    margin: 0;
}

.cj-kicker {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--cj-primary);
}

.cj-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cj-resource-card,
.cj-sidebar > *,
.cj-plan,
.cj-license,
.cj-user-menu,
.cj-user-panel {
    border: 1px solid var(--cj-line);
    border-radius: 8px;
    background: var(--cj-panel);
    box-shadow: var(--cj-shadow);
}

.cj-resource-card {
    overflow: hidden;
}

.cj-resource-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.cj-resource-card > div {
    padding: 14px;
}

.cj-resource-card h3,
.cj-resource-card h2 {
    min-height: 48px;
    margin: 8px 0 14px;
    font-size: 16px;
    line-height: 1.5;
}

.cj-card-cat {
    color: var(--cj-primary);
    font-size: 13px;
}

.cj-resource-card footer {
    justify-content: space-between;
}

.cj-resource-card footer strong {
    color: var(--cj-accent);
}

.cj-sidebar {
    display: grid;
    gap: 16px;
    align-content: start;
}

.cj-login-panel {
    padding: 24px;
    text-align: center;
}

.cj-login-panel img {
    width: 86px;
    height: 86px;
    margin: 0 auto 12px;
    border-radius: 50%;
    object-fit: cover;
}

.cj-button {
    display: inline-flex;
    padding: 10px 22px;
}

.cj-button-blue {
    background: var(--cj-blue);
}

.cj-button-orange {
    background: #ff9345;
}

.cj-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
}

.cj-tool-grid a {
    padding: 16px 10px;
    border-radius: 8px;
    text-align: center;
    background: var(--cj-bg);
}

.cj-rank-panel,
.cj-price-panel {
    padding: 18px;
}

.cj-membership,
.cj-license,
.cj-user-center {
    margin-top: 34px;
}

.cj-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cj-plan {
    padding: 22px;
}

.cj-plan span {
    color: var(--cj-primary);
    font-weight: 800;
}

.cj-plan strong {
    display: block;
    margin: 16px 0;
    font-size: 34px;
    color: var(--cj-accent);
}

.cj-plan button,
.cj-license-box button,
.cj-price-panel button,
.cj-buy-card button {
    width: 100%;
    padding: 12px 16px;
}

.cj-license {
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
}

.cj-license-box {
    min-width: 300px;
    display: grid;
    gap: 10px;
}

.cj-footer {
    margin-top: 50px;
    padding: 34px 0 86px;
    color: var(--cj-muted);
    background: var(--cj-panel);
}

.cj-footer-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 24px;
}

.cj-footer-links,
.cj-footer-qrcode {
    display: grid;
    gap: 8px;
}

.cj-single-layout {
    align-items: start;
    padding-top: 28px;
}

.cj-single-hero {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
}

.cj-single-hero img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    filter: brightness(.68);
}

.cj-single-hero div {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
}

.cj-single-hero h1 {
    margin: 8px 0 0;
    font-size: clamp(28px, 5vw, 46px);
}

.cj-buy-card {
    justify-content: space-between;
    gap: 18px;
    margin: 22px 0;
    padding: 22px;
    border-radius: 8px;
    background: var(--cj-panel);
}

.cj-buy-card strong,
.cj-price-panel strong {
    font-size: 34px;
    color: var(--cj-accent);
}

.cj-entry-content,
.cj-hidden-content,
.cj-post-nav {
    padding: 24px;
    border-radius: 8px;
    background: var(--cj-panel);
}

.cj-hidden-content {
    margin-top: 18px;
    border: 1px dashed var(--cj-primary);
    color: var(--cj-primary);
    text-align: center;
}

.cj-post-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
}

.cj-price-panel {
    background: var(--cj-panel);
}

.cj-buy-card-hero {
    border: 1px solid var(--cj-line);
    box-shadow: var(--cj-shadow);
}

.cj-favorite-floating {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    cursor: pointer;
    font-size: 24px;
}

.cj-favorite-floating.is-active,
.cj-favorite-button.is-active {
    color: var(--cj-gold);
}

.cj-unlock-card {
    margin: 22px 0;
    padding: 26px;
    border: 2px solid #5a55c8;
    border-radius: 8px;
    background: var(--cj-panel);
    box-shadow: var(--cj-shadow);
}

.cj-unlock-card-head > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cj-line);
    padding-bottom: 16px;
}

.cj-unlock-card span {
    color: var(--cj-muted);
}

.cj-unlock-card strong {
    color: #e5353c;
    font-size: 42px;
}

.cj-unlock-card textarea {
    width: 100%;
    min-height: 132px;
    box-sizing: border-box;
    border: 1px solid var(--cj-line);
    border-radius: 8px;
    padding: 16px;
    resize: vertical;
    background: #fff;
    color: #27313a;
    font: inherit;
    line-height: 1.8;
}

.cj-unlock-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 14px;
    margin-top: 16px;
}

.cj-unlock-card button,
.cj-order-row button,
.cj-purchased-row a {
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--cj-blue);
    cursor: pointer;
}

.cj-unlock-actions button,
.cj-unlock-card-bottom button {
    min-height: 58px;
    font-size: 20px;
    font-weight: 700;
}

.cj-favorite-button {
    border: 1px solid var(--cj-line);
    background: #fff;
    color: #8b9199;
    font-size: 28px;
}

.cj-unlock-card-bottom {
    text-align: center;
    border: 0;
}

.cj-unlock-card-bottom h2 {
    margin: 0 0 18px;
    color: var(--cj-primary);
    font-size: 30px;
}

.cj-unlock-card-bottom textarea {
    min-height: 240px;
    text-align: left;
}

.cj-unlock-card-bottom p {
    color: var(--cj-primary);
}

.cj-unlock-card-bottom button {
    width: min(280px, 100%);
    margin: 10px auto 0;
}

.cj-pay-modal[hidden] {
    display: none;
}

.cj-pay-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
}

.cj-pay-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 22, 30, .5);
    backdrop-filter: blur(6px);
}

.cj-pay-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100% - 28px));
    border-radius: 18px;
    background: #fff;
    color: #1d252d;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .24);
    padding: 24px;
}

.cj-pay-head {
    margin-bottom: 16px;
}

.cj-pay-head > span {
    color: #1677ff;
    font-size: 12px;
    font-weight: 800;
}

.cj-pay-dialog h2 {
    margin: 4px 0 4px;
    color: #17233d;
    font-size: 24px;
}

.cj-pay-head p {
    margin: 0;
    color: #7b8798;
    font-size: 13px;
}

.cj-pay-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #f3f5f8;
    cursor: pointer;
    font-size: 24px;
}

.cj-pay-product {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid #edf1f7;
    border-radius: 14px;
    padding: 10px;
    background: #fbfdff;
}

.cj-pay-product img {
    width: 74px;
    height: 58px;
    border-radius: 10px;
    object-fit: cover;
}

.cj-pay-product em {
    font-style: normal;
    color: #1677ff;
}

.cj-pay-product strong,
.cj-pay-product span,
.cj-pay-product small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-pay-product strong {
    color: #18233a;
    font-size: 15px;
}

.cj-pay-product span,
.cj-pay-product small {
    margin-top: 3px;
    color: #7a8798;
    font-size: 12px;
}

.cj-pay-summary {
    display: grid;
    gap: 8px;
    margin: 14px 0 16px;
    border-radius: 14px;
    padding: 12px 14px;
    background: #f6f8fb;
}

.cj-pay-order-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.cj-pay-order-grid div {
    border: 1px solid #edf1f7;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

.cj-pay-order-grid span,
.cj-pay-order-grid strong {
    display: block;
}

.cj-pay-order-grid span {
    color: #8792a4;
    font-size: 12px;
}

.cj-pay-order-grid strong {
    margin-top: 4px;
    color: #26344f;
    font-size: 13px;
}

.cj-pay-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #738195;
    font-size: 13px;
}

.cj-pay-summary div:last-child {
    border-top: 1px solid #e8edf5;
    padding-top: 8px;
    color: #1e2a40;
    font-weight: 900;
}

.cj-pay-summary strong {
    color: #222c3d;
    font-size: 15px;
}

.cj-pay-summary div:last-child strong {
    color: #ff334d;
    font-size: 24px;
}

.cj-pay-label {
    margin: 0 0 12px;
    color: #5f6f85;
    font-size: 14px;
    font-weight: 800;
}

.cj-pay-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cj-pay-methods button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 54px;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 0 12px;
    background: #fff;
    color: #3a3f46;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
}

.cj-pay-methods button.is-active {
    border-color: #1677ff;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, .08);
}

.cj-pay-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
}

.cj-pay-wechat {
    background: #16bf22;
}

.cj-pay-alipay {
    background: #1498e8;
}

.cj-pay-epay {
    background: #faad14;
}

.cj-pay-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

.cj-pay-methods strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-pay-safe {
    margin: 12px 0 0;
    border-radius: 10px;
    padding: 8px 10px;
    color: #68809e;
    background: #f2f7ff;
    font-size: 12px;
}

.cj-pay-safe.is-valid {
    color: #0f8f59;
    background: #eafaf2;
}

.cj-pay-submit {
    width: 100%;
    margin-top: 14px;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(90deg, #ff755f, #ff2638);
    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
}

.cj-pay-submit:disabled {
    cursor: wait;
    opacity: .72;
}

.cj-user-center {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
}

.cj-user-menu {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px;
}

.cj-user-menu a {
    padding: 12px;
    border-radius: 8px;
    color: var(--cj-muted);
}

.cj-user-menu a.is-active,
.cj-user-menu a:hover {
    color: #fff;
    background: var(--cj-primary);
}

.cj-user-panel {
    padding: 24px;
}

.cj-user-profile {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cj-user-profile img {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
}

.cj-user-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 24px 0;
}

.cj-user-stats span,
.cj-notice-list p {
    padding: 16px;
    border-radius: 8px;
    background: var(--cj-bg);
}

.cj-user-stats strong {
    display: block;
    margin-bottom: 6px;
}

.cj-user-section {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--cj-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cj-panel) 92%, var(--cj-bg));
}

.cj-user-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.cj-user-section-head h2 {
    margin: 0;
}

.cj-user-section-head span {
    color: var(--cj-muted);
}

.cj-user-center-v2 {
    align-items: start;
}

.cj-user-menu-v2 {
    gap: 10px;
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.cj-user-hero-card {
    display: grid;
    justify-items: center;
    gap: 7px;
    margin-bottom: 6px;
    border-radius: 16px;
    padding: 22px 14px;
    color: #fff;
    background: linear-gradient(135deg, #2368ff, #00b894);
}

.cj-user-hero-card img {
    width: 72px;
    height: 72px;
    border: 3px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
}

.cj-user-hero-card span {
    max-width: 100%;
    overflow: hidden;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-user-hero-card em {
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, .18);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.cj-user-menu-v2 button,
.cj-user-logout {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    padding: 0 12px;
    color: #55627a;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-align: left;
}

.cj-user-menu-v2 button .cj-ant-icon,
.cj-user-logout .cj-ant-icon {
    width: 17px;
    height: 17px;
}

.cj-user-menu-v2 button.is-active,
.cj-user-menu-v2 button:hover,
.cj-user-logout:hover {
    color: #2368ff;
    background: #eef5ff;
}

.cj-user-logout {
    justify-content: center;
    margin-top: 4px;
    color: #ff4d4f;
    background: #fff1f0;
}

.cj-user-panel-v2 {
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
}

.cj-user-stats-v2 {
    margin: 0;
    border-bottom: 1px solid var(--cj-line);
    padding: 18px;
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.cj-user-stats-v2 span {
    border: 1px solid #edf2fb;
    background: #fff;
}

.cj-user-stats-v2 small {
    display: block;
    margin-bottom: 8px;
    color: #7b8798;
    font-size: 12px;
}

.cj-user-stats-v2 strong {
    margin: 0;
    color: #17233d;
    font-size: 22px;
}

.cj-user-panel-v2 .cj-user-section {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cj-user-panel-v2 .cj-user-section[hidden] {
    display: none;
}

.cj-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cj-profile-grid div {
    display: grid;
    gap: 6px;
    border: 1px solid #edf2fb;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.cj-profile-grid span {
    color: #7b8798;
    font-size: 12px;
}

.cj-profile-grid strong {
    overflow: hidden;
    color: #17233d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-user-table {
    display: grid;
    border: 1px solid #edf2fb;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.cj-user-table-head,
.cj-user-table-row {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr .7fr .7fr .8fr;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
}

.cj-user-table-three .cj-user-table-head,
.cj-user-table-three .cj-user-table-row {
    grid-template-columns: minmax(0, 1fr) 150px 90px;
}

.cj-user-table-head {
    color: #5f6f87;
    background: #fafafa;
    font-size: 13px;
    font-weight: 900;
}

.cj-user-table-row {
    border-top: 1px solid #f0f3f8;
    color: #344057;
    font-size: 13px;
}

.cj-user-table-row > span,
.cj-user-table-row time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-user-table-row em {
    width: max-content;
    border-radius: 999px;
    padding: 4px 9px;
    color: #225bd8;
    background: #eef4ff;
    font-style: normal;
    font-weight: 800;
}

.cj-user-table-row em.is-paid {
    color: #0f8f59;
    background: #eafaf2;
}

.cj-user-table-row a,
.cj-favorite-list-v2 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    padding: 7px 10px;
    color: #2368ff;
    background: #eef5ff;
    font-weight: 800;
}

.cj-favorite-list-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cj-user-empty {
    padding: 20px;
    color: var(--cj-muted);
    text-align: center;
}

.cj-user-login-empty {
    grid-column: 1 / -1;
}

.cj-user-login-empty div {
    display: flex;
    justify-content: center;
    gap: 10px;
}

body.cj-night .cj-header-avatar,
body.cj-night .cj-header-user-menu,
body.cj-night .cj-user-menu-v2,
body.cj-night .cj-user-stats-v2,
body.cj-night .cj-profile-grid div,
body.cj-night .cj-user-table {
    border-color: rgba(255, 255, 255, .1);
    background: #141414;
}

body.cj-night .cj-header-user-menu a,
body.cj-night .cj-user-menu-v2 button,
body.cj-night .cj-profile-grid strong,
body.cj-night .cj-user-table-row,
body.cj-night .cj-user-stats-v2 strong {
    color: #e8eefc;
}

body.cj-night .cj-user-table-head,
body.cj-night .cj-user-stats-v2 span {
    border-color: rgba(255, 255, 255, .1);
    background: #1f1f1f;
}

.cj-segmented {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    padding: 4px;
    border-radius: 8px;
    background: var(--cj-bg);
}

.cj-segmented button {
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    background: transparent;
    color: var(--cj-muted);
    cursor: pointer;
}

.cj-segmented button.is-active {
    color: #fff;
    background: var(--cj-blue);
}

.cj-order-table,
.cj-purchased-table {
    overflow: hidden;
    border: 1px solid var(--cj-line);
    border-radius: 8px;
}

.cj-order-head,
.cj-order-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 90px 90px 96px;
    gap: 12px;
    align-items: center;
    padding: 14px;
}

.cj-purchased-head,
.cj-purchased-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px 104px;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
}

.cj-order-head,
.cj-purchased-head {
    background: var(--cj-bg);
    color: var(--cj-muted);
    font-weight: 700;
}

.cj-order-row + .cj-order-row,
.cj-purchased-row {
    border-top: 1px solid var(--cj-line);
}

.cj-order-row strong {
    color: var(--cj-accent);
}

.cj-order-row em {
    font-style: normal;
}

.cj-order-row .is-paid {
    color: var(--cj-primary);
}

.cj-order-row .is-waiting {
    color: var(--cj-gold);
}

.cj-order-row button,
.cj-purchased-row a {
    display: inline-grid;
    place-items: center;
    min-height: 38px;
    padding: 0 14px;
    box-shadow: 0 10px 20px rgba(47, 140, 255, .28);
}

.cj-purchased-row time {
    color: var(--cj-muted);
}

.cj-favorite-list {
    display: grid;
    gap: 10px;
}

.cj-favorite-list a {
    padding: 14px;
    border-radius: 8px;
    background: var(--cj-bg);
}

.cj-notice-list p {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cj-mobile-tabbar {
    display: none;
}

@media (max-width: 980px) {
    .cj-main-nav {
        display: none;
    }

    .cj-menu-button {
        display: inline-grid;
        place-items: center;
    }

    .cj-mobile-drawer.is-open {
        display: grid;
        gap: 8px;
        padding: 0 16px 16px;
        background: var(--cj-panel);
    }

    .cj-mobile-drawer a {
        padding: 12px;
        border-radius: 8px;
        background: var(--cj-bg);
    }

    .cj-quick-nav,
    .cj-resource-grid,
    .cj-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cj-layout,
    .cj-single-layout,
    .cj-user-center {
        grid-template-columns: 1fr;
    }

    .cj-footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cj-shell {
        width: min(100% - 20px, 1180px);
    }

    .cj-header-inner {
        min-height: 64px;
    }

    .cj-brand-text small,
    .cj-vip-pill {
        display: none;
    }

    .cj-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .cj-header-actions {
        margin-left: auto;
    }

    .cj-hero,
    .cj-hero-content {
        min-height: 460px;
    }

    .cj-search {
        flex-direction: column;
        gap: 8px;
    }

    .cj-search input {
        min-height: 46px;
        padding: 0 12px;
    }

    .cj-quick-nav,
    .cj-resource-grid,
    .cj-plan-grid,
    .cj-user-stats {
        grid-template-columns: 1fr;
    }

    .cj-pay-dialog {
        padding: 20px;
    }

    .cj-pay-methods,
    .cj-order-head,
    .cj-order-row,
    .cj-purchased-head,
    .cj-purchased-row {
        grid-template-columns: 1fr;
    }

    .cj-order-head,
    .cj-purchased-head {
        display: none;
    }

    .cj-user-section-head,
    .cj-unlock-card-head > div,
    .cj-unlock-actions {
        grid-template-columns: 1fr;
        display: grid;
    }

    .cj-license,
    .cj-buy-card,
    .cj-user-profile {
        display: grid;
    }

    .cj-license-box {
        min-width: 0;
    }

    .cj-mobile-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1px;
        background: var(--cj-line);
        border-top: 1px solid var(--cj-line);
    }

    .cj-mobile-tabbar a {
        padding: 12px 4px;
        text-align: center;
        background: var(--cj-panel);
        font-size: 13px;
    }
}

/* Latest customer AI draft: blue-white resource portal homepage. */
.cj-site-header {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid #edf2fb;
    box-shadow: 0 10px 30px rgba(45, 90, 160, .04);
}

.cj-header-inner {
    min-height: 72px;
}

.cj-brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2f6eff, #1d95ff);
    box-shadow: 0 10px 24px rgba(47, 110, 255, .26);
    font-size: 19px;
}

.cj-brand-mark.has-logo-image {
    background: transparent;
    box-shadow: none;
}

.cj-brand-text strong {
    display: block;
    overflow: hidden;
    font-size: 18px;
    color: #17233d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-brand-text small {
    display: block;
    overflow: hidden;
    color: #7e8ca6;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-main-nav {
    margin-left: auto;
    gap: 34px;
}

.cj-main-nav a {
    color: #2d3954;
    font-size: 14px;
}

.cj-main-nav a:hover {
    color: #2368ff;
}

.cj-main-nav a.is-active {
    color: #2368ff;
    font-weight: 800;
}

.cj-header-search {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cj-text);
    cursor: pointer;
    font-size: 22px;
}

.cj-login-link {
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cj-text);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.cj-register-link {
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    color: #fff;
    background: #2368ff;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(35, 104, 255, .25);
}

.cj-header-user {
    position: relative;
}

.cj-header-avatar {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e7eef9;
    border-radius: 999px;
    padding: 3px 11px 3px 4px;
    color: #26364f;
    background: #fff;
    box-shadow: 0 8px 18px rgba(35, 104, 255, .08);
}

.cj-header-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.cj-header-avatar span {
    max-width: 86px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-header-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    min-width: 142px;
    display: none;
    border: 1px solid #edf2fb;
    border-radius: 12px;
    padding: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(31, 78, 145, .14);
}

.cj-header-user:hover .cj-header-user-menu,
.cj-header-user:focus-within .cj-header-user-menu {
    display: grid;
}

.cj-header-user-menu a {
    border-radius: 8px;
    padding: 9px 10px;
    color: #46546d;
    font-size: 13px;
    font-weight: 700;
}

.cj-header-user-menu a:hover {
    color: #2368ff;
    background: #f1f6ff;
}

.cj-ai-home {
    background:
        radial-gradient(circle at 8% 14%, rgba(78, 130, 255, .13), transparent 22%),
        radial-gradient(circle at 92% 8%, rgba(35, 104, 255, .1), transparent 22%),
        linear-gradient(180deg, #f7fbff 0%, #ffffff 60%, #f9fbff 100%);
}

.cj-ai-hero {
    position: relative;
    overflow: hidden;
    min-height: 330px;
}

.cj-hero-slides,
.cj-hero-slide {
    position: absolute;
    inset: 0;
}

.cj-hero-slides::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .2));
}

.cj-hero-slide {
    opacity: 0;
    background-image: var(--cj-hero-day-image);
    background-position: center;
    background-size: cover;
    transition: opacity .5s ease;
}

body.cj-night .cj-hero-slide {
    background-image: var(--cj-hero-night-image, var(--cj-hero-day-image));
}

.cj-hero-slide.is-active {
    opacity: 1;
}

.cj-ai-hero.has-slides .cj-ai-hero-inner {
    z-index: 1;
}

.cj-ai-hero.has-slides .cj-hero-badge,
.cj-ai-hero.has-slides h1,
.cj-ai-hero.has-slides .cj-hero-subtitle {
    color: var(--cj-hero-copy-color, #fff);
}

.cj-ai-hero.has-slides .cj-hero-badge {
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
}

.cj-hero-slide-link {
    margin: -10px 0 14px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .2);
}

.cj-hero-dots {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.cj-hero-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.cj-hero-dots button.is-active {
    width: 24px;
    background: #fff;
}

.cj-ai-hero-inner {
    position: relative;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cj-hero-badge {
    margin: 0 0 16px;
    padding: 9px 22px;
    border-radius: 999px;
    color: #2368ff;
    background: #eaf2ff;
    font-weight: 700;
    font-size: 14px;
}

.cj-ai-hero h1 {
    margin: 0;
    color: #111827;
    font-size: 43px;
    line-height: 1.2;
    font-weight: 900;
}

.cj-hero-subtitle {
    margin: 14px 0 26px;
    color: #66728a;
    font-size: 16px;
}

.cj-ai-search {
    width: min(620px, calc(100% - 20px));
    height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    align-items: center;
    padding: 0 6px 0 26px;
    border-radius: 999px;
    border: 1px solid var(--cj-search-border);
    background: var(--cj-search-bg);
    box-shadow: 0 16px 45px rgba(38, 86, 150, .15);
}

.cj-ai-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--cj-search-text);
    background: transparent;
    font-size: 15px;
}

.cj-ai-search button {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #1d73ff, #2354ff);
    cursor: pointer;
    font-size: 25px;
    box-shadow: 0 9px 18px rgba(35, 84, 255, .3);
}

.cj-hero-illustration {
    position: absolute;
    width: 180px;
    height: 150px;
    opacity: .9;
}

.cj-hero-illustration-left {
    left: 12px;
    top: 78px;
    transform: rotate(-10deg);
}

.cj-hero-illustration-right {
    right: 20px;
    top: 72px;
    transform: rotate(12deg);
}

.cj-hero-illustration span,
.cj-hero-illustration i {
    position: absolute;
    display: block;
    border-radius: 16px;
    background: linear-gradient(135deg, #dfeaff, #7ca2ff);
    box-shadow: 0 20px 45px rgba(53, 103, 210, .18);
}

.cj-hero-illustration span {
    width: 96px;
    height: 118px;
    left: 32px;
    top: 14px;
}

.cj-hero-illustration i {
    width: 72px;
    height: 92px;
    right: 18px;
    top: 0;
    background: linear-gradient(135deg, #ffffff, #dbe8ff);
}

.cj-category-grid-section {
    margin-top: 8px;
    padding: 14px 0 8px;
    overflow: visible;
}

.cj-category-grid-section.is-slider {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
}

.cj-category-grid-section.is-wrap {
    display: block;
}

.cj-category-grid-section.is-marquee {
    display: block;
    overflow: hidden;
}

.cj-category-grid-section > button {
    width: 34px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    color: #94a2b8;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 8px 22px rgba(33, 70, 120, .08);
    cursor: pointer;
    font-size: 24px;
}

.cj-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: -4px;
}

.cj-category-grid-section .cj-category-grid {
    width: 100%;
    margin: 0;
}

.cj-category-grid-section.is-slider .cj-category-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    padding: 6px 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.cj-category-grid-section.is-slider .cj-category-grid::-webkit-scrollbar {
    display: none;
}

.cj-category-grid-section.is-slider .cj-category-card {
    flex: 0 0 calc((100% - 60px) / 6);
    min-width: 150px;
}

.cj-category-grid-section.is-wrap .cj-category-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cj-category-grid-section.is-marquee .cj-category-grid {
    width: max-content;
    display: flex;
    gap: 12px;
    padding: 6px 0;
    animation: cjCategoryMarquee 34s linear infinite;
}

.cj-category-grid-section.is-marquee:hover .cj-category-grid {
    animation-play-state: paused;
}

.cj-category-grid-section.is-marquee .cj-category-card {
    flex: 0 0 170px;
    min-width: 170px;
}

@media (max-width: 980px) {
    .cj-category-grid-section.is-slider {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        gap: 8px;
    }

    .cj-category-grid-section.is-slider .cj-category-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc(25% - 8px);
        grid-template-rows: none;
        gap: 10px;
    }

    .cj-category-grid-section.is-wrap .cj-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cj-category-grid-section.is-slider .cj-category-card {
        min-width: 0;
    }
}

.cj-category-card {
    min-height: 74px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid #edf2fb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(33, 70, 120, .08);
}

.cj-category-card span {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #2368ff;
    background: var(--cj-icon-blue-bg);
    font-size: 20px;
}

.cj-category-card strong {
    color: #1f2b42;
    font-size: 14px;
}

.cj-category-card small {
    color: #8a96aa;
    font-size: 12px;
}

.cj-category-card.is-red span,
.cj-category-card.is-pink span {
    color: #ff5269;
    background: var(--cj-icon-red-bg);
}

.cj-category-card.is-gold span {
    color: #f5a700;
    background: var(--cj-icon-gold-bg);
}

.cj-category-rail {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #edf2fb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(33, 70, 120, .06);
}

.cj-category-rail button {
    border: 0;
    background: transparent;
    color: #94a2b8;
    font-size: 24px;
    cursor: pointer;
}

.cj-category-rail div {
    display: grid;
    grid-template-columns: repeat(8, minmax(70px, 1fr));
    gap: 10px;
}

.cj-category-rail.is-slider div {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.cj-category-rail.is-slider div::-webkit-scrollbar {
    display: none;
}

.cj-category-rail.is-slider a {
    flex: 0 0 108px;
}

.cj-category-rail.is-wrap {
    grid-template-columns: 1fr;
}

.cj-category-rail.is-wrap > button {
    display: none;
}

.cj-category-rail.is-wrap div {
    display: grid;
    grid-template-columns: repeat(8, minmax(70px, 1fr));
}

.cj-category-rail.is-marquee {
    overflow: hidden;
    grid-template-columns: 1fr;
}

.cj-category-rail.is-marquee > button {
    display: none;
}

.cj-category-rail.is-marquee div {
    width: max-content;
    display: flex;
    gap: 10px;
    overflow: visible;
    animation: cjCategoryMarquee 30s linear infinite;
}

.cj-category-rail.is-marquee:hover div {
    animation-play-state: paused;
}

.cj-category-rail.is-marquee a {
    flex: 0 0 108px;
}

.cj-category-rail a {
    display: grid;
    justify-items: center;
    gap: 7px;
    color: #506078;
    font-size: 12px;
}

.cj-category-rail a span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #2368ff;
    background: var(--cj-icon-blue-bg);
}

.cj-category-rail a.is-active {
    color: #2368ff;
}

.cj-category-rail a.is-active::after {
    content: "";
    width: 32px;
    height: 3px;
    border-radius: 999px;
    background: #2368ff;
}

.cj-platform-notice {
    margin-top: 14px;
    min-height: 44px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border: 1px solid #edf2fb;
    border-radius: 12px;
    background: #fff;
    color: #63718a;
}

.cj-platform-notice span {
    color: #2368ff;
    font-weight: 800;
}

.cj-platform-notice p {
    margin: 0;
}

.cj-notice-marquee {
    min-width: 0;
    overflow: hidden;
}

.cj-notice-marquee p {
    display: inline-block;
    min-width: max-content;
    animation: cjNoticeMarquee 16s linear infinite;
    will-change: transform;
}

.cj-platform-notice:hover .cj-notice-marquee p {
    animation-play-state: paused;
}

.cj-blue-banner {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 42px;
    border-radius: 12px;
    color: #fff;
    background:
        radial-gradient(circle at 80% 35%, rgba(255, 255, 255, .26), transparent 22%),
        linear-gradient(100deg, #0e4dff, #2c78ff);
    box-shadow: 0 18px 40px rgba(35, 104, 255, .2);
}

.cj-blue-banner strong {
    font-size: 27px;
}

.cj-blue-banner p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .82);
}

.cj-blue-banner a {
    padding: 10px 22px;
    border-radius: 999px;
    color: #2368ff;
    background: #fff;
    font-weight: 800;
}

.cj-banner-gift {
    position: absolute;
    right: 180px;
    top: 18px;
    font-size: 54px;
    opacity: .26;
}

.cj-daily-section,
.cj-membership {
    margin-top: 28px;
}

.cj-ai-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cj-ai-section-title h2 {
    position: relative;
    margin: 0;
    padding-left: 13px;
    color: #111827;
    font-size: 20px;
}

.cj-ai-section-title h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 999px;
    background: #2368ff;
}

.cj-ai-section-title a {
    color: #8a96aa;
    font-size: 13px;
}

.cj-ai-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cj-ai-resource-card {
    overflow: hidden;
    border: 1px solid #edf2fb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(33, 70, 120, .08);
}

.cj-ai-thumb {
    position: relative;
    height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(14, 27, 56, .92), rgba(20, 95, 180, .76)),
        radial-gradient(circle at 75% 20%, rgba(86, 205, 255, .55), transparent 25%);
}

.cj-ai-thumb span {
    position: absolute;
    left: 12px;
    top: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f5a623;
    font-size: 12px;
}

.cj-ai-thumb strong {
    font-size: 18px;
}

.cj-ai-thumb small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .8);
}

.cj-ai-thumb.is-photo,
.cj-ai-thumb.is-video {
    background: linear-gradient(135deg, #1f2937, #4b6b92);
}

.cj-ai-thumb.is-light {
    background: linear-gradient(135deg, #ddecff, #5f8dff);
}

.cj-ai-thumb.is-blueprint,
.cj-ai-thumb.is-code,
.cj-ai-thumb.is-prompt {
    background: linear-gradient(135deg, #071d3e, #0c78c9);
}

.cj-ai-resource-card > div {
    padding: 12px 14px 14px;
}

.cj-ai-resource-card h3 {
    min-height: 44px;
    margin: 0;
    color: #17233d;
    font-size: 16px;
    line-height: 1.4;
}

.cj-ai-resource-card p {
    margin: 6px 0 12px;
    color: #7e8ca6;
    font-size: 13px;
}

.cj-ai-resource-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cj-ai-resource-card footer strong {
    color: #ff3b4f;
}

.cj-ai-resource-card footer span {
    color: #9aa6b8;
    font-size: 12px;
}

.cj-resource-pagination {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin: 22px 0 14px;
}

.cj-resource-pagination a,
.cj-resource-pagination span {
    min-width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #63718a;
    background: #fff;
    border: 1px solid #e6edf7;
    font-size: 13px;
}

.cj-resource-pagination a.is-active {
    color: #fff;
    background: #2368ff;
    border-color: #2368ff;
}

.cj-view-all-button {
    width: min(320px, 100%);
    height: 50px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 8px;
    color: #fff;
    background: #2368ff;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(35, 104, 255, .22);
}

.cj-real-empty {
    padding: 42px 24px;
    border: 1px dashed var(--cj-line);
    border-radius: 14px;
    background: var(--cj-panel);
    color: var(--cj-muted);
    text-align: center;
}

.cj-real-empty strong {
    display: block;
    margin-bottom: 8px;
    color: var(--cj-text);
    font-size: 18px;
}

.cj-real-empty a {
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 8px;
    color: #fff;
    background: var(--cj-primary);
}

.cj-ai-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.cj-ai-plan {
    position: relative;
    min-height: 190px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 18px;
    padding: 28px;
    border: 1px solid #dbe7ff;
    border-radius: 14px;
    background: linear-gradient(135deg, #fffdf8, #fff);
    box-shadow: 0 14px 36px rgba(33, 70, 120, .08);
}

.cj-ai-plan.is-star {
    background: linear-gradient(135deg, #f8fbff, #fff);
}

.cj-plan-badge {
    position: absolute;
    left: 0;
    top: 0;
    padding: 7px 12px;
    border-radius: 12px 0 12px 0;
    color: #fff;
    background: #ffb13c;
    font-size: 13px;
    font-weight: 800;
}

.cj-ai-plan h3 {
    margin: 0 0 8px;
    color: #17233d;
    font-size: 22px;
}

.cj-ai-plan p {
    margin: 0 0 10px;
    color: #66728a;
}

.cj-ai-plan ul {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    color: #48576f;
    font-size: 14px;
    line-height: 1.9;
}

.cj-ai-plan li::before {
    content: "✓";
    margin-right: 8px;
    color: #2bb673;
}

.cj-ai-plan strong {
    color: #ff334d;
    font-size: 26px;
}

.cj-ai-plan del {
    margin-left: 12px;
    color: #a1abba;
}

.cj-ai-plan i {
    align-self: center;
    justify-self: center;
    width: 112px;
    height: 112px;
    border-radius: 28px;
    background: linear-gradient(135deg, #ffe4a8, #f5a623);
    transform: rotate(12deg);
    box-shadow: 0 18px 40px rgba(245, 166, 35, .24);
}

.cj-ai-plan.is-star i {
    background: linear-gradient(135deg, #dce8ff, #5b8bff);
    box-shadow: 0 18px 40px rgba(91, 139, 255, .24);
}

.cj-ai-plan button {
    position: absolute;
    right: 28px;
    bottom: 26px;
    min-width: 150px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #2368ff;
    cursor: pointer;
    font-weight: 800;
}

.cj-footer {
    margin-top: 54px;
    padding: 34px 0 18px;
    border-top: 1px solid #edf2fb;
    background: #fff;
    color: #66728a;
}

.cj-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 2fr;
    gap: 28px;
}

.cj-footer-grid > div {
    display: grid;
    align-content: start;
    gap: 8px;
}

.cj-footer-grid strong {
    color: #1f2b42;
}

.cj-footer-qrcode {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.cj-footer-qrcode span {
    min-height: 96px;
    display: grid;
    place-items: center;
    border: 1px solid #edf2fb;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff, #f7fbff);
    text-align: center;
}

.cj-copyright {
    margin: 28px 0 0;
    text-align: center;
    color: #9aa6b8;
    font-size: 13px;
}

@media (max-width: 980px) {
    .cj-header-inner {
        min-height: 64px;
    }

    .cj-menu-button {
        display: inline-grid;
        place-items: center;
        order: 0;
        background: transparent;
        font-size: 24px;
    }

    .cj-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .cj-main-nav,
    .cj-login-link,
    .cj-register-link {
        display: none;
    }

    .cj-header-actions {
        margin-left: auto;
    }

    .cj-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cj-category-rail {
        overflow: visible;
    }

    .cj-category-rail div {
        overflow-x: auto;
        grid-template-columns: repeat(8, 74px);
        padding-bottom: 4px;
    }

    .cj-ai-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cj-ai-plan-grid,
    .cj-footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body.cj-theme {
        background: #fff;
    }

    .cj-shell {
        width: min(100% - 24px, 1180px);
    }

    .cj-brand-text strong {
        font-size: 15px;
    }

    .cj-brand-text small {
        font-size: 10px;
    }

    .cj-ai-hero,
    .cj-ai-hero-inner {
        min-height: 245px;
    }

    .cj-hero-badge {
        margin-top: 10px;
        padding: 7px 16px;
        font-size: 12px;
    }

    .cj-ai-hero h1 {
        font-size: 25px;
    }

    .cj-hero-subtitle {
        max-width: 300px;
        margin: 10px 0 18px;
        font-size: 13px;
        line-height: 1.7;
    }

    .cj-ai-search {
        height: 48px;
        padding-left: 18px;
        grid-template-columns: minmax(0, 1fr) 48px;
    }

    .cj-ai-search button {
        width: 40px;
        height: 40px;
    }

    .cj-hero-illustration {
        display: none;
    }

    .cj-category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 14px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(33, 70, 120, .08);
    }

    .cj-category-card {
        min-height: 74px;
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 7px;
        padding: 10px 4px;
        border: 0;
        box-shadow: none;
    }

    .cj-category-card small {
        display: none;
    }

    .cj-category-rail {
        padding: 10px;
        grid-template-columns: minmax(0, 1fr);
    }

    .cj-category-rail > button {
        display: none;
    }

    .cj-platform-notice {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 0 12px;
        font-size: 12px;
    }

    .cj-blue-banner {
        min-height: 76px;
        padding: 0 16px;
    }

    .cj-blue-banner strong {
        font-size: 18px;
    }

    .cj-blue-banner p {
        font-size: 12px;
    }

    .cj-blue-banner a {
        padding: 7px 12px;
        font-size: 12px;
    }

    .cj-ai-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cj-ai-thumb {
        height: 88px;
        padding: 10px;
    }

    .cj-ai-thumb strong {
        font-size: 14px;
    }

    .cj-ai-resource-card > div {
        padding: 10px;
    }

    .cj-ai-resource-card h3 {
        min-height: 38px;
        font-size: 13px;
    }

    .cj-ai-resource-card p {
        font-size: 11px;
    }

    .cj-resource-pagination {
        gap: 7px;
    }

    .cj-view-all-button {
        height: 42px;
    }

    .cj-ai-plan {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) 86px;
        padding: 20px;
    }

    .cj-ai-plan ul {
        display: none;
    }

    .cj-ai-plan i {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .cj-ai-plan button {
        right: 20px;
        bottom: 18px;
        min-width: 118px;
        height: 36px;
        font-size: 12px;
    }

    .cj-footer {
        padding-bottom: 84px;
    }

    .cj-footer-grid {
        gap: 18px;
    }

    .cj-footer-grid > div:not(.cj-footer-qrcode) {
        display: none;
    }

    .cj-footer-qrcode {
        grid-template-columns: repeat(2, 1fr);
    }

    .cj-mobile-tabbar {
        box-shadow: 0 -10px 24px rgba(33, 70, 120, .08);
    }

    .cj-mobile-tabbar a.is-active {
        color: #2368ff;
        font-weight: 800;
    }
}

/* Homepage refinement pass: align with the customer's latest desktop/mobile AI draft. */
.cj-shell {
    width: min(1120px, calc(100% - 32px));
}

.cj-header-inner {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.cj-brand {
    justify-self: start;
    max-width: 100%;
}

.cj-main-nav {
    justify-content: center;
    margin-left: 0;
    gap: 32px;
}

.cj-header-actions {
    justify-self: end;
    justify-content: flex-end;
    gap: 18px;
}

.cj-header-search svg,
.cj-ai-search button svg,
.cj-category-card svg,
.cj-category-rail svg,
.cj-notice-label svg,
.cj-platform-notice a svg {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cj-ai-hero,
.cj-ai-hero-inner {
    min-height: 300px;
}

.cj-hero-badge {
    margin-bottom: 14px;
    padding: 8px 20px;
}

.cj-ai-hero h1 {
    font-size: 42px;
}

.cj-hero-subtitle {
    margin: 10px 0 22px;
}

.cj-category-grid {
    gap: 12px;
}

.cj-category-card {
    min-height: 62px;
    padding: 12px 14px;
    grid-template-columns: 38px minmax(0, 1fr);
}

.cj-category-card span {
    width: 38px;
    height: 38px;
}

.cj-category-card strong {
    font-size: 13px;
}

.cj-category-card small {
    font-size: 11px;
}

.cj-category-rail {
    padding: 12px 14px;
}

.cj-category-rail div {
    scroll-behavior: smooth;
}

.cj-category-rail a span {
    width: 30px;
    height: 30px;
}

.cj-platform-notice {
    min-height: 42px;
}

.cj-notice-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cj-platform-notice a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #7d8aa2;
}

.cj-platform-notice a svg {
    width: 14px;
    height: 14px;
}

.cj-blue-banner {
    min-height: 84px;
}

.cj-blue-banner strong {
    font-size: 24px;
}

.cj-ai-resource-grid {
    gap: 14px;
}

.cj-ai-resource-grid.is-list {
    grid-template-columns: 1fr;
}

.cj-ai-resource-grid.is-list .cj-ai-resource-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: stretch;
}

.cj-ai-resource-grid.is-list .cj-ai-thumb {
    height: 142px;
    min-height: 142px;
}

.cj-ai-resource-grid.is-list .cj-ai-thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.cj-ai-resource-grid.is-list .cj-ai-resource-card h3 {
    min-height: 0;
}

.cj-ai-thumb {
    height: auto;
    display: block;
    padding: 0;
    background: #07182f;
}

.cj-ai-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cj-ai-thumb > strong,
.cj-ai-thumb > small {
    display: none;
}

.cj-ai-resource-card > div {
    padding: 10px 12px 12px;
}

.cj-ai-resource-card h3 {
    min-height: 40px;
    font-size: 15px;
}

.cj-ai-resource-card p {
    margin: 4px 0 10px;
}

.cj-ai-plan-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cj-ai-plan {
    min-height: 250px;
    display: block;
    padding: 22px;
}

.cj-ai-plan h3 {
    font-size: 19px;
}

.cj-ai-plan ul {
    font-size: 13px;
    line-height: 1.85;
}

.cj-ai-plan li::before {
    content: "✓";
    margin-right: 8px;
    color: #2bb673;
}

.cj-ai-plan strong {
    font-size: 24px;
}

.cj-ai-plan i {
    position: absolute;
    right: 20px;
    top: 62px;
    width: 76px;
    height: 76px;
    border-radius: 22px;
}

.cj-ai-plan button {
    right: 22px;
    bottom: 22px;
    min-width: 128px;
}

.cj-footer-qrcode span {
    min-height: 128px;
    gap: 6px;
    font-size: 13px;
}

.cj-footer-qrcode img {
    width: 76px;
    height: 76px;
    display: block;
}

@media (max-width: 980px) {
    .cj-header-inner {
        display: flex;
    }

    .cj-ai-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cj-shell {
        width: min(100% - 24px, 1180px);
    }

    .cj-ai-hero,
    .cj-ai-hero-inner {
        min-height: 238px;
    }

    .cj-category-grid {
        padding: 12px;
    }

    .cj-category-card {
        min-height: 68px;
    }

    .cj-ai-thumb {
        height: auto;
        padding: 0;
    }

    .cj-ai-plan {
        display: grid;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) 86px;
    }

    .cj-ai-plan i {
        position: static;
        width: 72px;
        height: 72px;
    }
}

/* Ant Design icon and homepage alignment. */
.cj-shell,
.cj-ai-home > .cj-shell {
    width: min(1120px, calc(100% - 32px));
    box-sizing: border-box;
}

.cj-ant-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    stroke: none;
    vertical-align: -0.125em;
}

.cj-ant-icon path {
    fill: currentColor;
    stroke: none;
}

.cj-header-search {
    display: inline-grid;
    place-items: center;
    color: var(--cj-text);
}

.cj-theme-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--cj-line);
    border-radius: 50%;
    color: var(--cj-text);
    background: var(--cj-panel);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(35, 104, 255, .08);
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.cj-theme-toggle:hover,
.cj-header-search:hover {
    color: #2368ff;
    background: #eef4ff;
}

.cj-theme-toggle .cj-ant-icon {
    width: 18px;
    height: 18px;
}

.cj-theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.cj-theme-toggle-sun {
    display: none;
}

body.cj-night .cj-theme-toggle-sun {
    display: inline-grid;
}

body.cj-night .cj-theme-toggle-moon {
    display: none;
}

.cj-header-search .cj-ant-icon {
    width: 19px;
    height: 19px;
}

.cj-ai-search input[type="search"]::-webkit-search-cancel-button,
.cj-ai-search input[type="search"]::-webkit-search-decoration {
    appearance: none;
    -webkit-appearance: none;
}

.cj-ai-search button {
    background: transparent;
    box-shadow: none;
    color: #2368ff;
}

.cj-ai-search button .cj-ant-icon {
    width: 24px;
    height: 24px;
}

.cj-category-card span,
.cj-category-rail a span {
    color: #2368ff;
}

.cj-notice-label svg {
    color: inherit;
}

.cj-category-card span .cj-ant-icon {
    width: 21px;
    height: 21px;
}

.cj-category-rail a span .cj-ant-icon {
    width: 18px;
    height: 18px;
}

.cj-notice-label .cj-ant-icon {
    width: 17px;
    height: 17px;
    color: #2368ff;
}

.cj-category-grid-section,
.cj-category-grid,
.cj-category-rail,
.cj-platform-notice,
.cj-blue-banner,
.cj-daily-section,
.cj-membership,
.cj-footer-grid {
    margin-left: auto;
    margin-right: auto;
}

.cj-category-grid-section,
.cj-category-grid,
.cj-category-rail,
.cj-platform-notice,
.cj-blue-banner {
    width: min(1120px, calc(100% - 32px));
}

.cj-daily-section,
.cj-membership {
    width: min(1120px, calc(100% - 32px));
}

.cj-category-card {
    box-sizing: border-box;
}

.cj-category-rail div {
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 2px;
}

.cj-ai-resource-card {
    box-sizing: border-box;
}

.cj-ai-thumb img {
    background: #0c1c3b;
}

.cj-footer-qrcode img {
    margin: 0 auto;
}

@media (max-width: 640px) {
    .cj-shell,
    .cj-ai-home > .cj-shell,
    .cj-category-grid,
    .cj-category-rail,
    .cj-platform-notice,
    .cj-blue-banner,
    .cj-daily-section,
    .cj-membership {
        width: min(100% - 24px, 1180px);
    }

    .cj-category-rail div {
        overflow-x: auto;
    }

    .cj-ai-search button {
        color: #2368ff;
    }
}

/* Compact product/detail page controls. */
.cj-single-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
}

.cj-single-hero img {
    height: 300px;
}

.cj-buy-card {
    padding: 16px 18px;
}

.cj-buy-card h2 {
    margin: 4px 0;
    font-size: 18px;
}

.cj-buy-card p {
    margin: 0;
    font-size: 13px;
}

.cj-buy-card strong,
.cj-price-panel strong {
    font-size: 24px;
}

.cj-buy-card button,
.cj-price-panel button,
.cj-pay-submit,
.cj-unlock-card button,
.cj-order-row button,
.cj-purchased-row a {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 7px;
    font-size: 14px;
}

.cj-price-panel {
    padding: 16px;
}

.cj-price-panel p {
    font-size: 12px;
    line-height: 1.7;
}

.cj-unlock-card {
    padding: 18px;
}

.cj-unlock-card strong {
    font-size: 28px;
}

.cj-unlock-card textarea {
    min-height: 110px;
    font-size: 13px;
}

.cj-unlock-actions {
    grid-template-columns: minmax(0, 1fr) 46px;
}

.cj-favorite-button {
    font-size: 20px;
}

.cj-pay-dialog {
    width: min(460px, calc(100% - 28px));
    padding: 22px;
}

.cj-pay-row {
    padding: 14px 16px;
    font-size: 16px;
}

.cj-pay-row strong {
    font-size: 28px;
}

.cj-pay-methods button {
    min-height: 54px;
    font-size: 14px;
}

.cj-pay-icon {
    width: 34px;
    height: 34px;
}

@media (max-width: 640px) {
    .cj-single-layout {
        grid-template-columns: 1fr;
    }

    .cj-single-hero img {
        height: 220px;
    }
}

/* Final customer-detail pass: mobile polish, auth modal, compact product page. */
.cj-view-all-button {
    margin-top: 18px;
}

.cj-category-card strong,
.cj-category-rail a,
.cj-notice-label,
.cj-platform-notice p,
.cj-mobile-tabbar a span {
    white-space: nowrap;
}

.cj-ai-plan li::before {
    content: "✓";
}

.cj-mobile-tabbar {
    position: fixed;
    left: 50%;
    bottom: 10px;
    z-index: 40;
    width: min(440px, calc(100% - 20px));
    min-height: 60px;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    border: 1px solid rgba(218, 228, 245, .92);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 28px rgba(28, 66, 120, .14);
    transform: translateX(-50%);
    backdrop-filter: blur(16px);
}

.cj-mobile-tabbar a {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 3px;
    color: #7b8799;
    font-size: 11px;
    line-height: 1.2;
}

.cj-mobile-tabbar .cj-ant-icon {
    width: 21px;
    height: 21px;
}

.cj-mobile-tabbar a.is-active {
    color: #2368ff;
}

.cj-auth-modal[hidden] {
    display: none;
}

.cj-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
}

.cj-auth-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.cj-auth-dialog {
    position: relative;
    z-index: 1;
    width: min(360px, calc(100% - 36px));
    border-radius: 8px;
    padding: 26px 28px 24px;
    background: rgba(246, 247, 250, .96);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .28);
}

.cj-auth-close {
    position: absolute;
    top: 12px;
    right: 14px;
    border: 0;
    background: transparent;
    color: #a0a7b2;
    cursor: pointer;
    font-size: 24px;
}

.cj-auth-logo {
    display: grid;
    justify-items: center;
    margin-bottom: 18px;
    color: #1b3f9a;
    line-height: 1.1;
}

.cj-auth-logo span {
    width: 52px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 3px solid currentColor;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 900;
}

.cj-auth-logo strong {
    margin-top: 6px;
    font-size: 25px;
    letter-spacing: .08em;
}

.cj-auth-logo small {
    font-size: 10px;
    letter-spacing: .12em;
}

.cj-auth-tabs {
    display: flex;
    gap: 18px;
    margin-bottom: 12px;
}

.cj-auth-tabs button,
.cj-auth-form p button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.cj-auth-tabs button {
    padding: 0 0 5px;
    color: #7e8794;
    font-size: 18px;
}

.cj-auth-tabs button.is-active {
    color: #2c3440;
    border-bottom: 2px solid #36b7ff;
}

.cj-auth-form {
    display: none;
}

.cj-auth-form.is-active {
    display: grid;
    gap: 12px;
}

.cj-auth-form h2 {
    margin: 0;
    color: #3b4652;
    font-size: 24px;
    font-weight: 500;
}

.cj-auth-form p {
    margin: -4px 0 6px;
    color: #929aa6;
    font-size: 12px;
}

.cj-auth-form p button {
    color: #8b93a0;
}

.cj-auth-form input {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid #dfe3ea;
    background: transparent;
    outline: 0;
    color: #303946;
}

.cj-auth-meta,
.cj-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.cj-auth-meta {
    color: #9aa2ad;
    font-size: 12px;
}

.cj-auth-meta label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cj-auth-meta input {
    width: auto;
    height: auto;
}

.cj-code-row button {
    height: 32px;
    border: 0;
    border-radius: 16px;
    padding: 0 12px;
    color: #fff;
    background: #2394ff;
    cursor: pointer;
    font-size: 12px;
}

.cj-code-row button:disabled {
    color: #9aa5b5;
    background: #e8edf5;
    cursor: not-allowed;
}

.cj-auth-form small {
    color: #ff6b6b;
    font-size: 12px;
}

.cj-auth-form small.is-valid {
    color: #20a66a;
}

.cj-auth-submit {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(90deg, #48c7ff, #1d8cff);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(29, 140, 255, .22);
}

.cj-auth-submit .cj-ant-icon {
    width: 15px;
    height: 15px;
}

.cj-product-page {
    margin-top: 26px;
}

.cj-product-top {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr) 210px;
    gap: 18px;
    align-items: stretch;
}

.cj-product-cover,
.cj-product-info,
.cj-product-author,
.cj-service-steps,
.cj-product-content,
.cj-product-side section {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(35, 72, 118, .08);
}

.cj-product-cover {
    overflow: hidden;
}

.cj-product-cover > img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.cj-product-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    color: #66728a;
    font-size: 12px;
}

.cj-product-stats button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #6d6aff;
    cursor: pointer;
}

.cj-product-info {
    padding: 5px 8px 0 0;
    box-shadow: none;
}

.cj-product-info h1 {
    margin: 0 0 10px;
    color: #18233a;
    font-size: 22px;
    line-height: 1.45;
}

.cj-product-desc {
    margin: 0 0 14px;
    color: #ff263d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

.cj-product-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0 0 14px;
    padding: 14px 0;
    border-top: 1px solid #edf1f7;
    border-bottom: 1px solid #edf1f7;
}

.cj-product-meta div {
    display: flex;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
}

.cj-product-meta dt {
    color: #8b96a8;
    white-space: nowrap;
}

.cj-product-meta dd {
    margin: 0;
    color: #344057;
    font-weight: 700;
}

.cj-product-service {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    color: #68758a;
    font-size: 13px;
}

.cj-product-service b {
    color: #5e55ff;
    font-weight: 700;
}

.cj-product-service a {
    color: #5e55ff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.cj-menu-image-icon {
    width: 1em;
    height: 1em;
    object-fit: contain;
    display: inline-block;
}

.cj-product-price {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}

.cj-product-price span {
    border-radius: 4px;
    padding: 3px 6px;
    color: #f5222d;
    background: #fff1f0;
    font-size: 12px;
}

.cj-product-price strong {
    color: #f5222d;
    font-size: 32px;
}

.cj-product-price del {
    color: #9aa3b2;
}

.cj-product-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cj-product-actions button,
.cj-product-actions a {
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}

.cj-product-actions button:nth-child(1) {
    background: #8068ff;
}

.cj-product-actions .cj-product-primary-action {
    background: #8068ff;
}

.cj-product-actions button:nth-child(2) {
    background: #ff6572;
}

.cj-product-author {
    padding: 16px;
    text-align: center;
}

.cj-product-author > strong {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    color: #3a4658;
}

.cj-product-author img {
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    border-radius: 50%;
    object-fit: cover;
}

.cj-product-author h2 {
    margin: 0;
    color: #ff4055;
    font-size: 15px;
}

.cj-product-author p {
    color: #7d889a;
    font-size: 12px;
    line-height: 1.7;
}

.cj-product-author a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    border: 1px solid #8b74ff;
    border-radius: 4px;
    color: #7862ff;
    font-size: 13px;
}

.cj-service-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
    padding: 20px;
}

.cj-service-steps div {
    display: grid;
    justify-items: center;
    gap: 7px;
    text-align: center;
    color: #8792a4;
    font-size: 12px;
}

.cj-service-steps svg,
.cj-service-steps .cj-ant-icon {
    width: 36px;
    height: 36px;
    color: #8b74ff;
}

.cj-service-steps svg:not(.cj-ant-icon) {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cj-service-steps strong {
    color: #334057;
    font-size: 13px;
}

.cj-product-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
    margin-top: 18px;
}

.cj-product-content {
    overflow: hidden;
}

.cj-detail-tabs {
    display: flex;
    gap: 24px;
    padding: 16px 18px 0;
    border-bottom: 1px solid #edf1f7;
}

.cj-detail-tabs a {
    padding-bottom: 14px;
    color: #344057;
    font-weight: 700;
}

.cj-detail-tabs a.is-active {
    color: #7b63ff;
    border-bottom: 3px solid #8b74ff;
}

.cj-detail-panel {
    padding: 18px;
}

.cj-detail-panel table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    font-size: 13px;
}

.cj-detail-panel th,
.cj-detail-panel td {
    border: 1px solid #edf1f7;
    padding: 12px;
    text-align: left;
}

.cj-detail-panel th {
    width: 110px;
    color: #7d889a;
    background: #f7f9fc;
}

.cj-product-side {
    display: grid;
    align-content: start;
    gap: 18px;
}

.cj-product-side section {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.cj-product-side strong {
    color: #253149;
}

.cj-product-side section > a {
    color: #7768ff;
    font-size: 13px;
}

.cj-related-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.cj-related-card img {
    width: 74px;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    object-fit: cover;
}

.cj-related-card span {
    color: #344057;
    font-size: 12px;
    line-height: 1.5;
}

@keyframes cjNoticeMarquee {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes cjCategoryMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 980px) {
    .cj-product-top,
    .cj-product-content-layout {
        grid-template-columns: 1fr;
    }

    .cj-product-author {
        display: none;
    }

    .cj-service-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.cj-theme {
        padding-bottom: 86px;
    }

    .cj-mobile-tabbar {
        display: grid;
    }

    .cj-header-actions {
        gap: 10px;
    }

    .cj-category-card strong {
        max-width: 100%;
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
    }

    .cj-category-rail div {
        grid-template-columns: repeat(8, minmax(72px, 1fr));
    }

    .cj-category-rail a {
        min-width: 72px;
        font-size: 11px;
    }

    .cj-platform-notice {
        overflow: hidden;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    .cj-platform-notice p {
        display: inline-block;
        min-width: max-content;
        margin: 0;
        animation: cjNoticeMarquee 14s linear infinite;
    }

    .cj-platform-notice a {
        white-space: nowrap;
    }

    .cj-ai-plan-grid {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
    }

    .cj-ai-plan {
        flex: 0 0 82%;
        min-height: 188px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 76px;
        scroll-snap-align: start;
    }

    .cj-ai-plan h3,
    .cj-ai-plan p,
    .cj-ai-plan strong,
    .cj-ai-plan del {
        white-space: nowrap;
    }

    .cj-ai-plan p {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cj-product-page {
        width: min(100% - 24px, 1180px);
        margin-top: 14px;
    }

    .cj-product-cover > img {
        aspect-ratio: 16 / 10;
    }

    .cj-product-stats {
        flex-wrap: wrap;
    }

    .cj-product-info {
        padding: 14px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 12px 34px rgba(35, 72, 118, .08);
    }

    .cj-product-info h1 {
        font-size: 18px;
    }

    .cj-product-meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .cj-product-price {
        justify-content: flex-start;
    }

    .cj-product-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cj-service-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 14px 10px;
    }

    .cj-service-steps span {
        display: none;
    }

    .cj-detail-tabs {
        overflow-x: auto;
        gap: 18px;
        padding-left: 14px;
        white-space: nowrap;
    }

    .cj-detail-panel {
        padding: 14px;
        overflow-x: auto;
    }

    .cj-product-side {
        display: none;
    }
}

/* Desktop-only correction pass. Keep mobile rules isolated for the next step. */
@media (min-width: 981px) {
    .cj-product-page {
        width: min(1120px, calc(100% - 32px));
        display: block;
        margin: 28px auto 0;
    }

    .cj-product-top {
        display: grid;
        grid-template-columns: 420px minmax(0, 1fr) 210px;
        gap: 18px;
        align-items: stretch;
    }

    .cj-product-cover,
    .cj-product-info,
    .cj-product-author {
        min-width: 0;
    }

    .cj-product-info {
        padding: 2px 0 0;
    }

    .cj-product-actions button,
    .cj-product-actions a,
    .cj-unlock-card button,
    .cj-pay-submit {
        min-height: 34px;
        padding: 0 14px;
        border-radius: 5px;
        font-size: 13px;
        line-height: 34px;
    }

    .cj-unlock-card-bottom {
        padding: 18px;
        text-align: left;
    }

    .cj-unlock-card-bottom h2 {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .cj-unlock-card-bottom textarea {
        min-height: 108px;
        font-size: 13px;
    }

    .cj-unlock-card-bottom button {
        width: auto;
        margin: 10px 0 0;
    }

    .cj-ai-plan {
        overflow: hidden;
    }

    .cj-ai-plan > div,
    .cj-ai-plan .cj-plan-badge,
    .cj-ai-plan button {
        position: relative;
        z-index: 2;
    }

    .cj-ai-plan i {
        z-index: 1;
        opacity: .18;
        pointer-events: none;
    }
}

/* Current pass fixes: header search, auth icon, real covers and membership buttons. */
.cj-header-actions {
    position: relative;
}

.cj-header-search-popover[hidden] {
    display: none;
}

.cj-header-search-popover {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 50;
    width: 360px;
    height: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: center;
    border: 1px solid #e4ecf8;
    border-radius: 24px;
    padding: 0 4px 0 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(31, 78, 145, .16);
}

.cj-header-search-popover::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 18px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 1px solid #e4ecf8;
    border-top: 1px solid #e4ecf8;
    transform: rotate(45deg);
}

.cj-header-search-popover input {
    position: relative;
    z-index: 1;
    width: 100%;
    border: 0;
    outline: 0;
    color: #26364f;
    background: transparent;
    font: inherit;
}

.cj-header-search-popover button {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #2368ff;
    background: transparent;
    cursor: pointer;
}

.cj-ai-thumb img,
.cj-related-card img {
    object-fit: cover;
    object-position: center;
}

.cj-auth-submit svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 981px) {
    .cj-ai-plan {
        min-height: 310px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 24px 22px;
    }

    .cj-ai-plan button {
        position: relative;
        right: auto;
        bottom: auto;
        align-self: flex-start;
        margin-top: 18px;
    }
}

/* Product detail refinement pass. */
@media (min-width: 981px) {
    .cj-product-top {
        grid-template-columns: 420px minmax(0, 1fr) 210px;
    }

    .cj-product-info {
        padding: 8px 22px 0 22px;
    }

    .cj-product-info h1,
    .cj-product-desc,
    .cj-product-service,
    .cj-product-price,
    .cj-product-actions {
        margin-left: 0;
        margin-right: 0;
    }

    .cj-product-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 22px;
        padding: 14px 0;
    }

    .cj-product-meta div {
        min-width: 0;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .cj-product-meta dt {
        flex: 0 0 auto;
    }

    .cj-product-meta dd {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cj-detail-panel table {
        table-layout: auto;
    }

    .cj-detail-panel th,
    .cj-detail-panel td {
        white-space: nowrap;
    }

    .cj-detail-panel td {
        min-width: 160px;
    }
}

@media (min-width: 981px) {
    .cj-product-info::before {
        content: "";
        display: block;
        height: 1px;
        margin-left: -4px;
    }
}

.cj-detail-panel[hidden] {
    display: none;
}

.cj-detail-panel h2 {
    margin: 0 0 10px;
    color: #202c44;
    font-size: 18px;
}

.cj-detail-panel p {
    margin: 0;
    color: #5d6b82;
    line-height: 1.9;
}

@media (max-width: 640px) {
    .cj-mobile-tabbar {
        transform: none;
    }
}

/* Current correction: product cover breathing room and configurable mobile tabbar. */
.cj-product-cover {
    padding: 10px;
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.cj-product-cover > img {
    display: block;
    border-radius: 14px;
}

.cj-product-stats {
    margin: 8px 0 0;
    padding: 9px 4px 0;
}

@media (max-width: 980px) {
    .cj-product-cover {
        padding: 8px;
    }

    .cj-product-cover > img {
        border-radius: 13px;
    }
}

@media (max-width: 640px) {
    .cj-mobile-tabbar {
        grid-template-columns: repeat(var(--cj-mobile-tab-count, 5), minmax(0, 1fr));
        border-color: rgba(210, 221, 239, .9);
        background: rgba(255, 255, 255, .97);
    }

    .cj-mobile-tabbar a {
        position: relative;
        isolation: isolate;
        color: #7b8799;
        transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    .cj-mobile-tabbar a::before {
        content: "";
        position: absolute;
        inset: 4px 6px;
        z-index: -1;
        border-radius: 15px;
        background: transparent;
        transition: background .2s ease, box-shadow .2s ease;
    }

    .cj-mobile-tabbar a .cj-ant-icon,
    .cj-mobile-tabbar a svg {
        fill: currentColor;
        stroke: none;
    }

    .cj-mobile-tabbar a.is-active {
        color: #2368ff;
        transform: translateY(-1px);
    }

    .cj-mobile-tabbar a.is-active::before {
        background: linear-gradient(180deg, rgba(35, 104, 255, .14), rgba(35, 104, 255, .05));
        box-shadow: inset 0 0 0 1px rgba(35, 104, 255, .08);
    }
}

@media (max-width: 980px) {
    .cj-mobile-drawer {
        position: fixed;
        top: 10px;
        bottom: 10px;
        left: 0;
        z-index: 80;
        width: min(78vw, 300px);
        height: auto;
        display: grid;
        align-content: start;
        gap: 8px;
        overflow-y: auto;
        border-radius: 0 18px 18px 0;
        padding: 16px 14px 18px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 18px 0 48px rgba(15, 23, 42, .22);
        transform: translateX(-108%);
        opacity: 0;
        pointer-events: none;
        transition: transform .24s ease, opacity .24s ease;
    }

    .cj-mobile-drawer.is-open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .cj-mobile-drawer a {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 12px;
        border-radius: 10px;
        color: #26344d;
        background: #f5f7fb;
        font-weight: 700;
    }

    .cj-mobile-drawer a.is-active {
        color: #2368ff;
        background: #eef5ff;
    }

    .cj-mobile-drawer a .cj-ant-icon {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .cj-mobile-drawer-card {
        display: grid;
        gap: 8px;
        margin-bottom: 8px;
        border-radius: 14px;
        padding: 14px;
        color: #fff;
        background: linear-gradient(135deg, #2368ff, #00b894);
    }

    .cj-mobile-drawer-card p,
    .cj-mobile-drawer-card span {
        margin: 0;
        color: rgba(255, 255, 255, .8);
        font-size: 12px;
        line-height: 1.6;
    }

    .cj-mobile-user-mini {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .cj-mobile-user-mini img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
    }

    .cj-mobile-user-mini div {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .cj-mobile-drawer-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .cj-mobile-drawer-actions a {
        min-height: 30px;
        padding: 0 10px;
        color: #fff;
        background: rgba(255, 255, 255, .18);
        font-size: 12px;
    }

    body.cj-night .cj-mobile-drawer {
        background: rgba(16, 16, 16, .98);
        box-shadow: 18px 0 48px rgba(0, 0, 0, .45);
    }

    body.cj-night .cj-mobile-drawer a {
        color: #e8eefc;
        background: rgba(255, 255, 255, .08);
    }

    body.cj-night .cj-mobile-drawer-card {
        background: linear-gradient(135deg, #171717, #26364f);
    }
}

/* Desktop detail/auth correction pass. */
.cj-auth-message {
    min-height: 18px;
    color: #ff4d4f;
    font-size: 12px;
    font-weight: 700;
}

.cj-auth-message.is-valid {
    color: #18a45f;
}

@media (min-width: 981px) {
    .cj-product-info {
        padding-left: 22px;
        padding-right: 22px;
    }

    .cj-product-info h1,
    .cj-product-desc,
    .cj-product-meta,
    .cj-product-service,
    .cj-product-price,
    .cj-product-actions {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Component refinements for real user/order/member flows. */
body.cj-theme {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cj-site-main {
    flex: 1 0 auto;
}

.cj-footer {
    margin-top: auto;
}

.cj-header-user {
    padding-bottom: 10px;
    margin-bottom: -10px;
}

.cj-header-user-menu {
    top: calc(100% + 2px);
}

.cj-header-user-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.cj-brand {
    flex: 0 1 auto;
}

.cj-brand-mark {
    flex-shrink: 0;
}

.cj-brand-text {
    min-width: 0;
}

.cj-brand-text strong,
.cj-brand-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-category-grid-section {
    padding-top: 18px;
}

.cj-ai-thumb span {
    display: none;
}

.cj-ai-resource-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.cj-ai-resource-card > div {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.cj-ai-resource-card h3,
.cj-ai-resource-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.cj-ai-resource-card h3 {
    min-height: 42px;
    -webkit-line-clamp: 2;
}

.cj-ai-resource-card p {
    min-height: 38px;
    -webkit-line-clamp: 2;
}

.cj-ai-resource-card footer {
    margin-top: auto;
}

.cj-category-rail.is-marquee div {
    animation-duration: 20s;
}

.cj-platform-notice:hover .cj-notice-marquee p,
.cj-platform-notice:focus-within .cj-notice-marquee p {
    animation-play-state: paused;
}

.cj-ai-plan {
    display: flex;
    flex-direction: column;
}

.cj-ai-plan > div {
    min-height: 178px;
}

.cj-ai-plan h3 {
    min-height: 28px;
}

.cj-ai-plan strong {
    display: inline-block;
    min-height: 34px;
}

.cj-ai-plan button {
    margin-top: auto;
}

.cj-footer-grid {
    align-items: start;
}

.cj-footer-qrcode {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.cj-glass-card {
    border: 1px solid rgba(221, 231, 245, .76);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 16px 40px rgba(31, 78, 145, .09);
    backdrop-filter: blur(14px);
}

.cj-user-center-page {
    margin-top: 24px;
    margin-bottom: 36px;
}

.cj-user-shell-card {
    overflow: hidden;
    border: 1px solid rgba(221, 231, 245, .78);
    border-radius: 22px;
    padding: 14px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 18px 48px rgba(31, 78, 145, .1);
}

.cj-user-hero-panel {
    min-height: 190px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #2878ff, #00b894);
}

.cj-user-hero-panel img {
    width: 92px;
    height: 92px;
    border: 3px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    object-fit: cover;
}

.cj-user-hero-panel strong {
    font-size: 22px;
}

.cj-user-hero-panel span {
    color: rgba(255, 255, 255, .82);
}

.cj-user-hero-panel em {
    border-radius: 999px;
    padding: 4px 12px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    font-style: normal;
}

.cj-user-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 4px 4px;
}

.cj-user-feature-grid a {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    color: #344057;
    background: rgba(247, 250, 255, .82);
    font-weight: 800;
}

.cj-user-feature-grid a.is-active,
.cj-user-feature-grid a:hover {
    color: #2368ff;
    background: rgba(35, 104, 255, .08);
}

.cj-user-logout {
    color: #f04455 !important;
    background: rgba(255, 82, 105, .08) !important;
}

.cj-user-stats-v3 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.cj-user-stats-v3 span {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
}

.cj-user-stats-v3 small {
    color: #6b7890;
}

.cj-user-stats-v3 strong {
    color: #17233d;
    font-size: 26px;
}

.cj-user-section-v3 {
    padding: 22px;
}

.cj-user-section-v3[hidden] {
    display: none;
}

.cj-profile-edit-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.cj-profile-edit-form label {
    display: grid;
    gap: 6px;
    color: #66728a;
    font-size: 13px;
}

.cj-profile-edit-form input {
    min-height: 40px;
    box-sizing: border-box;
    border: 1px solid #e4ecf8;
    border-radius: 12px;
    padding: 0 12px;
    background: rgba(255, 255, 255, .85);
}

.cj-profile-edit-form button {
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    padding: 0 18px;
    color: #fff;
    background: #2368ff;
    font-weight: 800;
    cursor: pointer;
}

.cj-profile-edit-form small {
    grid-column: 1 / -1;
    color: #18a45f;
    font-weight: 700;
}

.cj-profile-edit-form small.is-error {
    color: #f04455;
}

.cj-user-message-screen {
    min-height: 70vh;
}

.cj-message-topbar {
    position: sticky;
    top: 76px;
    z-index: 5;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 0;
    background: color-mix(in srgb, var(--cj-bg) 82%, transparent);
    backdrop-filter: blur(12px);
}

.cj-message-topbar a,
.cj-message-topbar span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #111827;
    background: rgba(255, 255, 255, .74);
    font-size: 34px;
}

.cj-message-topbar h1 {
    margin: 0;
    text-align: center;
    font-size: 30px;
}

.cj-message-list {
    display: grid;
    gap: 18px;
}

.cj-message-card {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 24px;
}

.cj-message-bell {
    position: relative;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(180deg, #ffbf3f, #ff8d00);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .46), 0 12px 28px rgba(255, 141, 0, .28);
}

.cj-message-bell span {
    position: absolute;
    top: 0;
    right: -8px;
    border-radius: 999px;
    padding: 2px 8px;
    background: #f20f28;
    font-size: 12px;
    font-weight: 900;
}

.cj-message-bell .cj-ant-icon {
    width: 42px;
    height: 42px;
}

.cj-message-card h2 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 22px;
    line-height: 1.35;
}

.cj-message-card h2 a {
    color: #1677ff;
}

.cj-message-card p,
.cj-message-card time {
    display: block;
    margin: 0 0 10px;
    color: #6b7280;
    font-size: 18px;
}

body.cj-night .cj-glass-card,
body.cj-night .cj-user-shell-card {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(18, 18, 18, .72);
}

body.cj-night .cj-user-stats-v3 strong,
body.cj-night .cj-message-card h2 {
    color: #f6f7f9;
}

.cj-archive .cj-resource-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cj-archive .cj-resource-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cj-archive .cj-resource-card h2 {
    display: -webkit-box;
    min-height: 48px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 2026-07 visible UI rebuild: resource archive, categories, detail page and user center. */
.cj-menu-button {
    display: none;
    place-items: center;
    gap: 4px;
}

.cj-menu-button span {
    width: 20px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
}

.cj-main-nav a.is-active {
    color: var(--cj-primary);
    font-weight: 800;
}

.cj-brand {
    max-width: min(360px, 34vw);
}

.cj-brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}

.cj-brand-text {
    min-width: 0;
    max-width: 220px;
}

.cj-brand-text strong,
.cj-brand-text small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-category-grid-section {
    position: relative;
    overflow: visible;
    padding: 18px 0 6px;
}

.cj-category-grid-section > button {
    display: none !important;
}

.cj-category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    overflow: visible !important;
    padding: 0 !important;
}

.cj-category-card {
    min-height: 112px;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 14px;
    border: 1px solid rgba(214, 226, 245, .78);
    border-radius: 20px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .45));
    box-shadow: 0 16px 42px rgba(35, 83, 145, .08);
    backdrop-filter: blur(16px);
}

.cj-category-card span {
    grid-row: 1 / span 2;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--cj-primary);
    background: rgba(35, 104, 255, .1);
}

.cj-category-card span .cj-ant-icon,
.cj-category-card span svg {
    width: 24px;
    height: 24px;
}

.cj-category-card strong,
.cj-category-card small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-category-card strong {
    color: #17233d;
    font-size: 18px;
    line-height: 1.2;
}

.cj-category-card small {
    color: #728198;
    font-size: 13px;
}

.cj-category-rail div {
    scroll-behavior: smooth;
}

.cj-category-rail a {
    min-width: max-content;
    width: max-content;
    max-width: none;
    padding-inline: 14px;
    white-space: nowrap;
}

.cj-category-rail.is-marquee div {
    animation-duration: 14s;
}

.cj-category-rail.is-marquee:hover div,
.cj-category-rail.is-marquee:focus-within div {
    animation-play-state: paused;
}

.cj-platform-notice:hover .cj-notice-marquee p,
.cj-platform-notice:focus-within .cj-notice-marquee p {
    animation-play-state: paused;
}

.cj-all-resources-page {
    padding: 38px 0 54px;
}

.cj-all-resources-head {
    margin-bottom: 24px;
    text-align: center;
}

.cj-all-resources-head p {
    margin: 0 0 8px;
    color: var(--cj-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
}

.cj-all-resources-head h1 {
    margin: 0 0 24px;
    color: var(--cj-text);
    font-size: clamp(28px, 4vw, 44px);
}

.cj-all-category-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.cj-all-category-filter a {
    min-width: 96px;
    border: 1px solid rgba(211, 221, 235, .95);
    border-radius: 999px;
    padding: 12px 20px;
    color: #667287;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 22px rgba(31, 78, 145, .06);
    font-weight: 800;
    text-align: center;
}

.cj-all-category-filter a.is-active,
.cj-all-category-filter a:hover {
    border-color: transparent;
    color: #fff;
    background: #2368ff;
}

.cj-ai-resource-grid {
    align-items: stretch;
}

.cj-ai-resource-card {
    overflow: hidden;
    border: 1px solid rgba(220, 229, 242, .9);
    border-radius: 18px;
    background: var(--cj-panel);
    box-shadow: 0 16px 38px rgba(31, 78, 145, .08);
}

.cj-ai-thumb {
    overflow: hidden;
}

.cj-ai-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

.cj-ai-resource-card > div {
    padding: 14px;
}

.cj-ai-resource-card h3 {
    margin: 0 0 8px;
    color: #18233a;
    font-size: 16px;
    line-height: 1.45;
}

.cj-ai-resource-card p {
    margin: 0 0 12px;
    color: #6f7e92;
    font-size: 13px;
    line-height: 1.5;
}

.cj-ai-resource-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cj-ai-resource-card footer strong,
.cj-product-price strong {
    color: #f04444 !important;
}

.cj-ai-resource-card footer span {
    color: #8a96a8;
    font-size: 13px;
}

.cj-ai-resource-grid.is-list,
.cj-archive-resource-grid.is-list {
    display: grid;
    grid-template-columns: 1fr;
}

.cj-ai-resource-grid.is-list .cj-ai-resource-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
}

.cj-ai-resource-grid.is-list .cj-ai-thumb img {
    height: 100%;
    min-height: 132px;
}

.cj-view-all-button {
    margin-top: 22px;
}

.cj-ai-plan-grid {
    align-items: stretch;
}

.cj-ai-plan {
    min-height: 336px;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 22px;
}

.cj-ai-plan .cj-plan-body {
    min-height: 246px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.cj-ai-plan h3 {
    min-height: 30px;
    margin-bottom: 6px;
}

.cj-plan-subline {
    min-height: 22px;
}

.cj-plan-benefits {
    min-height: 96px;
    margin-bottom: 14px;
}

.cj-plan-price {
    min-height: 54px;
    display: grid;
    align-content: end;
    margin-top: auto;
}

.cj-plan-price strong {
    color: #f04444;
    font-size: 34px;
}

.cj-ai-plan button {
    width: 100%;
    margin-top: 14px;
}

.cj-product-redesign {
    padding: 28px 0 54px;
}

.cj-product-redesign-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 22px;
    align-items: start;
}

.cj-product-main-stack {
    display: grid;
    gap: 18px;
}

.cj-product-main-card {
    display: grid;
    grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
    gap: 20px;
    border: 1px solid rgba(220, 229, 242, .9);
    border-radius: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 48px rgba(31, 78, 145, .1);
}

.cj-product-cover-v2 {
    border-radius: 20px;
    padding: 8px;
    background: #f4f8ff;
}

.cj-product-cover-v2 img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    object-fit: cover;
}

.cj-product-info-v2 {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    padding: 6px 4px;
}

.cj-product-type {
    width: fit-content;
    border-radius: 999px;
    padding: 5px 12px;
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
    font-size: 12px;
    font-weight: 900;
}

.cj-product-info-v2 h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.22;
}

.cj-product-desc {
    margin: 0;
    color: #667287;
    line-height: 1.75;
}

.cj-product-meta-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.cj-product-meta-v2 div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 10px 12px;
    background: #f7faff;
}

.cj-product-meta-v2 dt,
.cj-product-meta-v2 dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.cj-product-meta-v2 dt {
    color: #7a8798;
}

.cj-product-meta-v2 dd {
    color: #26364f;
    font-weight: 800;
}

.cj-product-service-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cj-product-service-v2 a {
    border-radius: 999px;
    padding: 7px 12px;
    color: #2368ff;
    background: rgba(35, 104, 255, .08);
    font-size: 13px;
    font-weight: 800;
}

.cj-product-buy-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
}

.cj-product-price {
    display: grid;
    gap: 2px;
}

.cj-product-price span {
    color: #7a8798;
    font-size: 13px;
}

.cj-product-price strong {
    font-size: 38px;
    line-height: 1;
}

.cj-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cj-product-actions button,
.cj-product-actions a,
.cj-side-user-card button,
.cj-side-user-card a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 13px;
    padding: 0 18px;
    color: #fff;
    background: #2368ff;
    font-weight: 900;
    cursor: pointer;
}

.cj-product-actions button:last-child {
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
}

.cj-pay-product-membership {
    grid-template-columns: 58px minmax(0, 1fr);
}

.cj-pay-plan-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #ffb547, #f04455);
    overflow: visible;
    line-height: 0;
    text-overflow: clip;
    white-space: normal;
}

.cj-pay-plan-icon .cj-ant-icon,
.cj-pay-plan-icon svg {
    width: 30px;
    height: 30px;
    display: block;
    flex: 0 0 30px;
    margin: auto;
    color: currentColor;
    fill: currentColor;
    overflow: visible;
}

.cj-service-steps-v2 {
    border-radius: 22px;
}

.cj-product-content-v2 {
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
}

.cj-product-aside-v2 {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 16px;
}

.cj-side-user-card,
.cj-side-latest-card {
    border: 1px solid rgba(220, 229, 242, .9);
    border-radius: 22px;
    padding: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 40px rgba(31, 78, 145, .08);
}

.cj-side-user-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.cj-side-user-card img,
.cj-side-user-card > span {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
}

.cj-side-user-card p {
    margin: 0;
    color: #6f7e92;
    line-height: 1.6;
}

.cj-side-latest-card {
    display: grid;
    gap: 12px;
}

.cj-side-latest-card > strong {
    color: #17233d;
    font-size: 18px;
}

.cj-related-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.cj-related-card img {
    width: 74px;
    height: 54px;
    border-radius: 10px;
    object-fit: cover;
}

.cj-related-card span {
    display: -webkit-box;
    overflow: hidden;
    color: #26364f;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.35;
}

.cj-user-center-rebuild {
    padding: 28px 0 54px;
}

.cj-user-profile-hero {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
}

.cj-user-quick-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cj-user-quick-stats span,
.cj-user-function-grid a,
.cj-user-order-card,
.cj-user-member-card,
.cj-user-promotion-card {
    border: 1px solid rgba(221, 231, 245, .72);
    border-radius: 18px;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 14px 36px rgba(31, 78, 145, .08);
    backdrop-filter: blur(14px);
}

.cj-user-quick-stats span {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
}

.cj-user-quick-stats small {
    color: #6b7890;
}

.cj-user-quick-stats strong {
    color: #17233d;
    font-size: 26px;
}

.cj-user-function-panel {
    margin-top: 18px;
    padding: 22px;
}

.cj-user-function-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cj-user-function-grid a {
    min-height: 126px;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
    padding: 18px;
}

.cj-user-function-grid a > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: #2368ff;
}

.cj-user-function-grid a strong {
    color: #17233d;
    font-size: 17px;
}

.cj-user-function-grid a small {
    color: #6f7e92;
}

.cj-user-function-grid .is-tone-2 > span { background: #ff8a00; }
.cj-user-function-grid .is-tone-3 > span { background: #19b37a; }
.cj-user-function-grid .is-tone-4 > span { background: #8b5cf6; }
.cj-user-function-grid .is-tone-5 > span { background: #f04455; }
.cj-user-function-grid .is-tone-6 > span { background: #0ea5e9; }

.cj-user-logout-wide {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    border-radius: 14px;
    color: #f04455;
    background: rgba(240, 68, 85, .08);
    font-weight: 900;
}

.cj-user-order-list {
    display: grid;
    gap: 12px;
}

.cj-user-order-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
}

.cj-user-order-card > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: #2368ff;
}

.cj-user-order-card strong,
.cj-user-order-card small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-user-order-card small {
    color: #7a8798;
}

.cj-user-order-card em {
    border-radius: 999px;
    padding: 6px 10px;
    font-style: normal;
    font-weight: 900;
}

.cj-user-order-card em.is-paid {
    color: #16a163;
    background: rgba(22, 161, 99, .1);
}

.cj-user-order-card em.is-waiting {
    color: #f59e0b;
    background: rgba(245, 158, 11, .12);
}

.cj-user-order-card b {
    color: #f04444;
}

.cj-user-order-card a,
.cj-user-member-card a,
.cj-user-promotion-card button {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    background: #2368ff;
    font-weight: 900;
    cursor: pointer;
}

.cj-user-order-card a,
.cj-user-order-card button[data-cj-resume-order] {
    min-width: 86px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    color: #fff;
    background: linear-gradient(135deg, #2563ff, #18a8ff);
    box-shadow: 0 10px 22px rgba(37, 99, 255, .22);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.cj-user-order-card a::after,
.cj-user-order-card button[data-cj-resume-order]::after {
    content: "›";
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
}

.cj-user-order-card a:hover,
.cj-user-order-card button[data-cj-resume-order]:hover {
    color: #fff;
    filter: brightness(1.04);
    box-shadow: 0 12px 26px rgba(37, 99, 255, .28);
    transform: translateY(-1px);
}

.cj-user-order-card a:active,
.cj-user-order-card button[data-cj-resume-order]:active {
    transform: translateY(0);
}

.cj-user-member-card,
.cj-user-promotion-card {
    display: grid;
    gap: 12px;
    padding: 22px;
}

.cj-user-member-card > span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #ffb547, #f04455);
}

.cj-user-promotion-card label {
    display: grid;
    gap: 8px;
}

.cj-user-promotion-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cj-user-promotion-stats span {
    display: grid;
    gap: 6px;
    border-radius: 16px;
    padding: 14px;
    background: rgba(35, 104, 255, .08);
}

.cj-user-promotion-stats small {
    color: #6f7e92;
}

.cj-user-promotion-stats strong {
    color: #17233d;
    font-size: 24px;
}

.cj-user-promotion-card input {
    min-height: 44px;
    border: 1px solid #e0e8f4;
    border-radius: 12px;
    padding: 0 12px;
    background: rgba(255, 255, 255, .82);
}

body.cj-night .cj-category-card,
body.cj-night .cj-all-category-filter a,
body.cj-night .cj-ai-resource-card,
body.cj-night .cj-product-main-card,
body.cj-night .cj-product-content-v2,
body.cj-night .cj-side-user-card,
body.cj-night .cj-side-latest-card,
body.cj-night .cj-user-quick-stats span,
body.cj-night .cj-user-function-grid a,
body.cj-night .cj-user-order-card,
body.cj-night .cj-user-member-card,
body.cj-night .cj-user-promotion-card {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(18, 18, 18, .78);
}

body.cj-night .cj-category-card strong,
body.cj-night .cj-ai-resource-card h3,
body.cj-night .cj-ai-resource-card h3 a,
body.cj-night .cj-product-info-v2 h1,
body.cj-night .cj-side-latest-card > strong,
body.cj-night .cj-related-card span,
body.cj-night .cj-user-function-grid a strong,
body.cj-night .cj-user-quick-stats strong {
    color: var(--cj-text);
}

body.cj-night .cj-category-card small,
body.cj-night .cj-ai-resource-card p,
body.cj-night .cj-product-desc,
body.cj-night .cj-side-user-card p,
body.cj-night .cj-user-function-grid a small {
    color: var(--cj-muted);
}

body.cj-night .cj-product-cover-v2,
body.cj-night .cj-product-meta-v2 div {
    background: rgba(255, 255, 255, .06);
}

/* Stable component refresh: typography, header, categories, detail page and user center. */
html,
body,
button,
input,
select,
textarea {
    font-family: "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}

.cj-brand.is-logo-only .cj-brand-mark {
    width: auto;
    min-width: 42px;
    max-width: 180px;
}

.cj-brand.is-logo-only .cj-brand-mark.has-logo-image img {
    width: auto;
    max-width: 180px;
    height: 42px;
    object-fit: contain;
}

.cj-header-user::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 14px;
}

.cj-header-user-menu {
    top: calc(100% + 8px);
}

.cj-footer-qrcode {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
}

.cj-footer-qrcode span {
    width: 112px;
    flex: 0 0 auto;
}

.cj-category-grid-section {
    overflow: visible;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.cj-category-grid-section .cj-category-grid,
.cj-category-grid-section.is-wrap .cj-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
}

.cj-category-card {
    min-height: 112px;
    display: grid;
    place-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 22px;
    padding: 18px;
    text-align: center;
    background: rgba(255, 255, 255, .48);
    box-shadow: 0 18px 46px rgba(28, 62, 110, .08);
    backdrop-filter: blur(18px);
}

.cj-category-card span {
    margin: 0 auto;
}

.cj-category-card strong,
.cj-category-card small {
    max-width: 100%;
}

.cj-category-rail div,
.cj-category-rail.is-slider div {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cj-category-rail div::-webkit-scrollbar {
    display: none;
}

.cj-category-rail a,
.cj-category-rail.is-slider a {
    width: max-content;
    min-width: max-content;
    max-width: none;
    flex: 0 0 auto;
    white-space: nowrap;
}

.cj-product-clean {
    padding: 30px 0 58px;
}

.cj-product-clean-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.cj-product-clean-main {
    display: grid;
    gap: 18px;
}

.cj-product-brief-card,
.cj-product-article-card,
.cj-detail-user-card,
.cj-detail-buy-card {
    border: 1px solid rgba(220, 229, 242, .9);
    border-radius: 24px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 48px rgba(31, 78, 145, .1);
}

.cj-product-brief-card {
    display: grid;
    grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
    gap: 20px;
    padding: 16px;
}

.cj-product-brief-cover {
    overflow: hidden;
    border-radius: 20px;
    background: #f4f8ff;
}

.cj-product-brief-cover img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.cj-product-brief-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 4px;
}

.cj-product-brief-info h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.22;
}

.cj-product-brief-info p,
.cj-product-brief-info small {
    margin: 0;
    color: #667287;
    line-height: 1.7;
}

.cj-product-clean-buy {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
}

.cj-product-clean-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cj-product-clean-actions button,
.cj-product-clean-actions a,
.cj-detail-user-card button,
.cj-detail-user-card a,
.cj-detail-buy-card button,
.cj-detail-buy-card a,
.cj-paid-content-card button,
.cj-unlock-card-bottom button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 13px;
    padding: 0 18px;
    color: #fff;
    background: #2368ff;
    font-weight: 900;
    cursor: pointer;
}

.cj-product-clean-actions .cj-product-member-action,
.cj-product-clean-actions button:last-child,
.cj-detail-buy-card a:last-child {
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
}

.cj-product-article-card {
    padding: 24px;
}

.cj-product-article-card h2,
.cj-product-article-card h3 {
    margin: 0 0 14px;
    color: #111827;
}

.cj-product-article-card .cj-entry-content {
    color: #26364f;
    line-height: 1.85;
}

.cj-paid-content-card,
.cj-unlock-card-bottom,
.cj-product-comments-card {
    margin-top: 20px;
    border: 1px solid #e7eef9;
    border-radius: 18px;
    padding: 18px;
    background: rgba(247, 250, 255, .78);
}

.cj-product-clean-aside {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 16px;
}

.cj-detail-user-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 18px;
}

.cj-detail-user-card > a,
.cj-detail-user-card > button {
    grid-column: 1 / -1;
    width: 100%;
}

.cj-detail-user-card img,
.cj-detail-user-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
}

.cj-detail-user-card strong,
.cj-detail-user-card span {
    display: block;
}

.cj-detail-user-card span,
.cj-detail-buy-card p {
    color: #6f7e92;
    line-height: 1.55;
}

.cj-detail-buy-card {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.cj-detail-buy-card > span {
    color: #6f7e92;
    font-size: 13px;
}

.cj-detail-buy-card > strong {
    color: #f04444;
    font-size: 38px;
    line-height: 1;
}

.cj-detail-buy-card button,
.cj-detail-buy-card a {
    width: 100%;
}

.cj-user-hero-panel {
    color: #17233d;
    background:
        radial-gradient(circle at 20% 12%, rgba(35, 104, 255, .12), transparent 28%),
        rgba(255, 255, 255, .74);
}

.cj-user-hero-panel span {
    color: #6f7e92;
}

.cj-user-hero-panel em {
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
}

.cj-user-function-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cj-user-function-grid a {
    min-height: 84px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 18px;
    align-items: center;
    justify-items: stretch;
    gap: 12px;
    padding: 14px 16px;
}

.cj-user-function-grid a.is-wide {
    grid-column: 1 / -1;
}

.cj-user-function-grid a > span {
    width: 48px;
    height: 48px;
    border-radius: 16px;
}

.cj-user-function-grid a div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.cj-user-function-grid a strong,
.cj-user-function-grid a small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-user-function-grid a em {
    min-width: 28px;
    border-radius: 999px;
    padding: 4px 8px;
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.cj-user-function-grid a i {
    color: #9aa6b8;
    font-style: normal;
}

.cj-user-function-grid a i .cj-ant-icon {
    width: 16px;
    height: 16px;
}

body.cj-night .cj-product-brief-card,
body.cj-night .cj-product-article-card,
body.cj-night .cj-detail-user-card,
body.cj-night .cj-detail-buy-card,
body.cj-night .cj-paid-content-card,
body.cj-night .cj-unlock-card-bottom,
body.cj-night .cj-product-comments-card,
body.cj-night .cj-category-card {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(18, 18, 18, .78);
}

body.cj-night .cj-product-brief-info h1,
body.cj-night .cj-product-article-card h2,
body.cj-night .cj-product-article-card h3,
body.cj-night .cj-product-article-card .cj-entry-content,
body.cj-night .cj-user-hero-panel {
    color: var(--cj-text);
}

body.cj-night .cj-product-brief-info p,
body.cj-night .cj-product-brief-info small,
body.cj-night .cj-detail-user-card span,
body.cj-night .cj-detail-buy-card p,
body.cj-night .cj-user-hero-panel span {
    color: var(--cj-muted);
}

/* Detail pass: tighter homepage cues, single purchase focus, compact paid UI. */
.cj-platform-notice,
.cj-platform-notice p,
.cj-notice-marquee p {
    color: #f04444;
    font-weight: 800;
}

.cj-notice-label {
    color: #f04444;
}

.cj-category-card {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto;
    place-items: initial;
    align-items: center;
    justify-items: start;
    min-height: 122px;
    gap: 4px 18px;
    padding: 20px 24px;
    text-align: left;
}

.cj-category-card span {
    grid-row: 1 / span 2;
    width: 72px;
    height: 72px;
    margin: 0;
    border-radius: 22px;
}

.cj-category-card span .cj-ant-icon,
.cj-category-card span svg {
    width: 34px;
    height: 34px;
}

.cj-category-card strong {
    align-self: end;
    font-size: 22px;
    line-height: 1.15;
}

.cj-category-card small {
    align-self: start;
    font-size: 15px;
    line-height: 1.25;
}

.cj-product-brief-card {
    align-items: center;
}

.cj-product-clean-buy {
    align-items: center;
    margin-top: 8px;
}

.cj-product-price {
    align-self: center;
}

.cj-product-price strong {
    font-size: 36px;
}

.cj-product-clean-actions {
    align-items: center;
}

.cj-product-clean-actions button,
.cj-product-clean-actions a {
    min-width: 118px;
    min-height: 44px;
}

.cj-paid-content-card p,
.cj-unlock-card-bottom p {
    margin: 0;
    color: #667287;
    line-height: 1.75;
}

.cj-product-comments-card {
    background: #fff;
}

.cj-product-comments-card .comment-reply-title,
.cj-product-comments-card .comments-title {
    margin-top: 0;
    color: #111827;
    font-size: 18px;
}

.cj-product-comments-card .comment-form {
    display: grid;
    gap: 12px;
}

.cj-product-comments-card textarea,
.cj-product-comments-card input[type="text"],
.cj-product-comments-card input[type="email"],
.cj-product-comments-card input[type="url"] {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 10px 12px;
    color: rgba(0, 0, 0, .88);
    background: #fff;
    font-size: 14px;
}

.cj-product-comments-card textarea:focus,
.cj-product-comments-card input:focus {
    border-color: #1677ff;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(5, 145, 255, .1);
}

.cj-product-comments-card .form-submit .submit {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    padding: 0 18px;
    color: #fff;
    background: #1677ff;
    font-weight: 800;
    cursor: pointer;
}

.cj-pay-qr {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 14px 0;
    border: 1px solid #e5edf8;
    border-radius: 16px;
    padding: 16px;
    background: #f8fbff;
    text-align: center;
}

.cj-pay-qr img {
    width: 220px;
    height: 220px;
    border-radius: 12px;
    background: #fff;
}

.cj-pay-qr strong {
    color: #111827;
    font-size: 16px;
}

.cj-pay-qr small {
    color: #667287;
    line-height: 1.6;
}

.cj-all-category-filter a {
    min-width: 72px;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
}

.cj-ai-plan {
    min-height: 286px;
    padding: 20px;
}

.cj-ai-plan .cj-plan-body {
    min-height: 194px;
}

.cj-plan-benefits {
    min-height: 58px;
    margin-bottom: 8px;
}

.cj-plan-price {
    min-height: 44px;
}

.cj-ai-plan button {
    margin-top: 10px;
}

body.cj-night .cj-product-comments-card,
body.cj-night .cj-pay-qr {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(18, 18, 18, .78);
}

body.cj-night .cj-product-comments-card textarea,
body.cj-night .cj-product-comments-card input[type="text"],
body.cj-night .cj-product-comments-card input[type="email"],
body.cj-night .cj-product-comments-card input[type="url"] {
    border-color: #343434;
    color: var(--cj-text);
    background: #171717;
}

.cj-platform-notice .cj-notice-label,
.cj-platform-notice .cj-notice-marquee p,
.cj-platform-notice > a {
    color: #f04444;
}

.cj-platform-notice .cj-notice-label {
    font-weight: 900;
}

.cj-platform-notice .cj-notice-marquee p {
    font-weight: 800;
}

.cj-category-grid-section {
    overflow: visible;
}

.cj-category-card {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 3px 18px;
}

.cj-category-card span {
    width: 76px;
    height: 76px;
}

.cj-category-card span .cj-ant-icon,
.cj-category-card span svg {
    width: 38px;
    height: 38px;
}

.cj-category-card strong {
    margin: 0;
    align-self: end;
}

.cj-category-card small {
    margin: 0;
    align-self: start;
}

.cj-product-clean-buy {
    align-items: center;
    justify-content: flex-start;
}

.cj-product-price {
    min-width: 150px;
}

.cj-product-price span {
    color: #667287;
    font-weight: 800;
}

.cj-product-price strong {
    color: #f04444;
}

.cj-product-clean-actions {
    margin-left: auto;
}

.cj-product-clean-actions button,
.cj-product-clean-actions a {
    min-width: 112px;
    min-height: 42px;
    box-sizing: border-box;
}

.cj-paid-content-card textarea {
    width: 100%;
    min-height: 120px;
    box-sizing: border-box;
    border: 1px solid #d9e3f2;
    border-radius: 12px;
    padding: 12px;
    color: #26364f;
    background: #fff;
    line-height: 1.7;
}

.cj-product-comments-card {
    border-color: #e7eef9;
    background: rgba(255, 255, 255, .9);
}

.cj-product-comments-card .comment-list {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.cj-product-comments-card .comment-body {
    border: 1px solid #eef2f8;
    border-radius: 14px;
    padding: 14px;
    background: #fff;
}

.cj-product-comments-card .comment-meta,
.cj-product-comments-card .comment-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cj-product-comments-card .comment-author img {
    border-radius: 50%;
}

.cj-product-comments-card .comment-metadata a,
.cj-product-comments-card .reply a {
    color: #667287;
    font-size: 13px;
}

.cj-all-category-filter {
    gap: 8px;
}

.cj-all-category-filter a,
.cj-archive-filter a,
.cj-category-filter a {
    min-width: 0;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
}

.cj-ai-plan {
    min-height: 252px;
}

.cj-ai-plan .cj-plan-body {
    display: grid;
    grid-template-rows: auto auto minmax(52px, auto) auto;
    gap: 8px;
    min-height: 176px;
}

.cj-plan-benefits {
    min-height: 52px;
    margin: 0;
}

.cj-plan-price {
    align-self: end;
}

.cj-ai-plan button {
    align-self: end;
}

body.cj-night .cj-paid-content-card textarea,
body.cj-night .cj-product-comments-card .comment-body {
    border-color: rgba(255, 255, 255, .1);
    color: var(--cj-text);
    background: rgba(255, 255, 255, .05);
}

/* Compact polish pass for product detail, homepage categories and user center. */
.cj-category-card {
    min-height: 94px;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 2px 14px;
    padding: 16px 18px;
}

.cj-category-card span {
    width: 56px;
    height: 56px;
    border-radius: 18px;
}

.cj-category-card span .cj-ant-icon,
.cj-category-card span svg {
    width: 28px;
    height: 28px;
}

.cj-category-card strong {
    font-size: 17px;
}

.cj-category-card small {
    font-size: 13px;
}

.cj-ai-plan {
    min-height: 232px;
}

.cj-ai-plan i {
    display: grid;
    place-items: center;
}

.cj-ai-plan i::before {
    inset: 50%;
    transform: translate(-50%, -50%);
}

.cj-plan-badge {
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(12px);
}

.cj-ai-plan h3 {
    padding-top: 12px;
}

.cj-product-brief-card {
    grid-template-columns: 380px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    padding: 18px;
}

.cj-product-brief-cover img {
    aspect-ratio: 16 / 9;
    max-height: 236px;
}

.cj-product-brief-info {
    gap: 9px;
}

.cj-product-brief-info h1 {
    font-size: clamp(24px, 2.4vw, 34px);
}

.cj-product-clean-buy {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: end;
}

.cj-product-clean-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.cj-product-clean-actions button,
.cj-product-clean-actions a {
    min-width: 104px;
    padding-inline: 14px;
}

.cj-detail-user-card {
    overflow: hidden;
}

.cj-detail-user-card > a,
.cj-detail-user-card > button {
    max-width: 100%;
    box-sizing: border-box;
}

.cj-user-quick-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cj-user-quick-stats span {
    min-height: 72px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 10px;
    padding: 12px 14px;
}

.cj-user-quick-stats span > .cj-ant-icon,
.cj-user-quick-stats span > svg {
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    padding: 8px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2368ff, #10b99c);
}

.cj-user-quick-stats small,
.cj-user-quick-stats strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-user-function-grid a {
    min-height: 72px;
    padding: 12px 14px;
}

.cj-user-function-grid a > span {
    width: 42px;
    height: 42px;
}

.cj-user-function-grid a strong {
    font-size: 14px;
}

.cj-user-function-grid a small {
    font-size: 12px;
}

.cj-message-topbar {
    min-height: 52px;
    padding: 10px 12px;
}

.cj-message-topbar h1 {
    font-size: 20px;
}

.cj-message-topbar a,
.cj-message-topbar span {
    width: 38px;
    height: 38px;
}

.cj-message-card {
    min-height: 76px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
}

.cj-message-bell {
    width: 44px;
    height: 44px;
}

.cj-message-card h2 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cj-message-card p,
.cj-message-card time {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cj-user-back-link {
    width: max-content;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 0 13px;
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
    font-size: 13px;
    font-weight: 900;
}

.cj-user-back-link .cj-ant-icon,
.cj-user-back-link svg {
    width: 13px;
    height: 13px;
    transform: rotate(180deg);
}

@media (min-width: 981px) {
    .cj-header-inner {
        grid-template-columns: minmax(96px, 210px) minmax(0, 1fr) auto;
        gap: 14px;
    }

    .cj-main-nav {
        min-width: 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: clamp(10px, 1.7vw, 24px);
        overflow: hidden;
    }

    .cj-main-nav a {
        min-width: 0;
        max-width: 112px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: #2d3954;
        font-size: 13px;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: keep-all;
    }

    .cj-product-clean-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 18px;
    }

    .cj-product-brief-card {
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
        align-items: stretch;
        gap: 18px;
        padding: 16px;
    }

    .cj-product-brief-cover {
        align-self: start;
    }

    .cj-product-brief-cover img {
        aspect-ratio: 16 / 9;
        max-height: 210px;
    }

    .cj-product-brief-info {
        min-height: 210px;
        gap: 8px;
        padding: 2px 0;
    }

    .cj-product-brief-info h1 {
        font-size: clamp(22px, 2.1vw, 30px);
        line-height: 1.22;
    }

    .cj-product-brief-info p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.55;
    }

    .cj-product-clean-buy {
        width: 100%;
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        margin-top: auto;
    }

    .cj-product-price {
        min-width: 0;
        align-self: center;
        text-align: left;
    }

    .cj-product-price strong {
        font-size: 30px;
        line-height: 1;
    }

    .cj-product-clean-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        justify-content: stretch;
        align-items: center;
        margin-left: 0;
        min-width: 0;
    }

    .cj-product-clean-actions button,
    .cj-product-clean-actions a {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        box-sizing: border-box;
        padding: 0 8px;
        border-radius: 11px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
    }

    .cj-detail-user-card > a,
    .cj-detail-user-card > button {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
    }

    .cj-detail-user-card img,
    .cj-detail-user-icon {
        display: grid;
        place-items: center;
        overflow: hidden;
    }

    .cj-detail-user-icon .cj-ant-icon,
    .cj-detail-user-icon svg {
        width: 22px;
        height: 22px;
        display: block;
        margin: auto;
    }
}

.cj-detail-user-card .cj-detail-user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.cj-detail-user-card .cj-detail-user-icon .cj-ant-icon,
.cj-detail-user-card .cj-detail-user-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 24px;
    margin: 0;
}

.cj-platform-notice .cj-notice-marquee p {
    color: #e60012;
    font-weight: 900;
}

body.cj-night .cj-platform-notice .cj-notice-marquee p {
    color: #ff5a5f;
}

@media (min-width: 981px) {
    .cj-product-brief-card {
        grid-template-columns: minmax(300px, 368px) minmax(0, 1fr);
        align-items: stretch;
        min-height: 236px;
    }

    .cj-product-brief-cover {
        height: 100%;
        min-height: 224px;
    }

    .cj-product-brief-cover img {
        width: 100%;
        height: 100%;
        max-height: none;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .cj-product-brief-info {
        min-height: 224px;
        gap: 7px;
        justify-content: space-between;
    }

    .cj-product-brief-info h1 {
        font-size: clamp(21px, 2vw, 28px);
    }

    .cj-product-brief-info p,
    .cj-product-brief-info small {
        line-height: 1.45;
    }

    .cj-product-price strong {
        font-size: 28px;
    }

    .cj-product-price {
        justify-content: start;
        justify-items: start;
        align-items: start;
        text-align: left;
        margin: 0;
    }

    .cj-product-clean-buy {
        grid-template-columns: minmax(138px, 156px) minmax(0, 1fr);
        align-items: center;
        width: 100%;
        margin-top: 10px;
    }

    .cj-product-clean-actions {
        align-items: center;
        justify-content: flex-end;
        align-self: center;
    }

    .cj-product-clean-actions button,
    .cj-product-clean-actions a {
        min-height: 36px;
        border-radius: 10px;
        font-size: 12px;
    }
}

/* Final commerce/user-center polish. */
.cj-footer-qrcode {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(104px, 1fr)) !important;
    gap: 14px !important;
}

.cj-footer-qrcode span {
    width: auto !important;
    min-width: 0;
}

.cj-product-brief-cover,
.cj-product-brief-cover img {
    border-radius: 20px;
}

.cj-product-brief-cover img {
    display: block;
}

.cj-paid-member-link,
.cj-user-hero-member-link {
    width: max-content;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 16px;
    color: #fff;
    background: linear-gradient(135deg, #ffb547, #f04444);
    font-size: 13px;
    font-weight: 900;
}

.cj-paid-content-card {
    display: grid;
    gap: 12px;
}

.cj-user-profile-hero {
    grid-template-columns: 1fr;
}

.cj-user-profile-hero .cj-user-hero-panel {
    gap: 8px;
}

.cj-user-promotion-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cj-user-promotion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cj-user-promotion-actions button {
    min-height: 40px;
}

.cj-user-promotion-actions a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(35, 104, 255, .18);
    border-radius: 12px;
    padding: 0 16px;
    color: #2368ff;
    background: rgba(35, 104, 255, .08);
    font-weight: 900;
    text-decoration: none;
}

.cj-user-promotion-actions button[disabled] {
    cursor: not-allowed;
    opacity: .48;
}

.cj-user-withdraw-list {
    display: grid;
    gap: 8px;
    border-top: 1px solid rgba(220, 229, 242, .8);
    padding-top: 12px;
}

.cj-user-withdraw-list > strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #17233d;
}

.cj-user-withdraw-list > strong a {
    color: #2368ff;
    font-size: 12px;
    text-decoration: none;
}

.cj-user-withdraw-list > span {
    color: #7a8798;
}

.cj-user-withdraw-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 10px;
    align-items: center;
    border-radius: 12px;
    padding: 9px 10px;
    background: rgba(35, 104, 255, .06);
}

.cj-user-withdraw-list small,
.cj-user-withdraw-list time {
    min-width: 0;
    overflow: hidden;
    color: #7a8798;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-user-withdraw-list b {
    color: #f04444;
}

.cj-user-withdraw-list em {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.cj-user-withdraw-list em.is-approved {
    color: #18a058;
    background: rgba(24, 160, 88, .12);
}

.cj-user-withdraw-list em.is-rejected {
    color: #f04444;
    background: rgba(240, 68, 68, .1);
}

.cj-user-withdraw-list em.is-pending,
.cj-user-withdraw-list em:not(.is-approved):not(.is-rejected) {
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
}

.cj-withdraw-modal[hidden] {
    display: none;
}

.cj-withdraw-modal {
    position: fixed;
    inset: 0;
    z-index: 100200;
    display: grid;
    place-items: center;
}

.cj-withdraw-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
}

.cj-withdraw-dialog {
    position: relative;
    z-index: 1;
    width: min(480px, calc(100vw - 28px));
    display: grid;
    gap: 12px;
    border: 1px solid rgba(220, 229, 242, .86);
    border-radius: 22px;
    padding: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

.cj-withdraw-dialog > button[type="button"] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 10px;
    background: #f3f6fb;
    cursor: pointer;
}

.cj-withdraw-dialog h3,
.cj-withdraw-dialog p {
    margin: 0;
}

.cj-withdraw-dialog p,
.cj-withdraw-dialog label span {
    color: #6f7e92;
}

.cj-withdraw-dialog label {
    display: grid;
    gap: 7px;
}

.cj-withdraw-dialog input,
.cj-withdraw-dialog textarea {
    border: 1px solid #dce6f2;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
}

.cj-withdraw-dialog button[type="submit"] {
    min-height: 42px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: #2368ff;
    font-weight: 900;
}

.cj-withdraw-dialog small.is-error {
    color: #f04444;
}

.cj-user-withdraw-screen {
    min-height: 72vh;
}

.cj-withdraw-record-list {
    display: grid;
    gap: 12px;
}

.cj-withdraw-record-card {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.cj-withdraw-record-main {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
}

.cj-withdraw-record-main > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
}

.cj-withdraw-record-main > span .cj-ant-icon,
.cj-withdraw-record-main > span svg {
    width: 20px;
    height: 20px;
}

.cj-withdraw-record-main strong,
.cj-withdraw-record-main small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-withdraw-record-main small {
    margin-top: 4px;
    color: #7a8798;
}

.cj-withdraw-record-main b {
    color: #f04444;
    font-size: 18px;
}

.cj-withdraw-record-main em,
.cj-withdraw-record-detail .is-reject strong,
.cj-user-withdraw-list em {
    font-style: normal;
}

.cj-withdraw-record-main em {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
}

.cj-withdraw-record-main em.is-approved {
    color: #18a058;
    background: rgba(24, 160, 88, .12);
}

.cj-withdraw-record-main em.is-rejected {
    color: #f04444;
    background: rgba(240, 68, 68, .1);
}

.cj-withdraw-record-main em.is-pending,
.cj-withdraw-record-main em:not(.is-approved):not(.is-rejected) {
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
}

.cj-withdraw-record-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cj-withdraw-record-detail p,
.cj-withdraw-record-detail a {
    min-width: 0;
    margin: 0;
    border: 1px solid rgba(220, 229, 242, .72);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .58);
}

.cj-withdraw-record-detail p span,
.cj-withdraw-record-detail p strong {
    display: block;
    min-width: 0;
}

.cj-withdraw-record-detail p span {
    margin-bottom: 4px;
    color: #7a8798;
    font-size: 12px;
}

.cj-withdraw-record-detail p strong {
    overflow: hidden;
    color: #17233d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cj-withdraw-record-detail p.is-reject {
    grid-column: 1 / -1;
    border-color: rgba(240, 68, 68, .22);
    background: rgba(240, 68, 68, .06);
}

.cj-withdraw-record-detail .is-reject strong {
    color: #f04444;
    white-space: normal;
}

.cj-withdraw-record-detail a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2368ff;
    font-weight: 900;
    text-decoration: none;
}

.cj-withdraw-record-detail a img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    object-fit: cover;
}

.cj-mobile-menu-item > a .cj-ant-icon,
.cj-mobile-menu-item > a svg,
.cj-mobile-submenu a .cj-ant-icon,
.cj-mobile-submenu a svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.cj-mobile-menu-item > a,
.cj-mobile-submenu a {
    gap: 8px;
}

.cj-mobile-member-cta {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 12px;
    color: #fff !important;
    background: linear-gradient(135deg, #ffb547, #f04444) !important;
    font-weight: 900;
}

.cj-mobile-member-cta .cj-ant-icon,
.cj-mobile-member-cta svg {
    width: 16px;
    height: 16px;
}

body.cj-night .cj-withdraw-dialog {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(18, 18, 18, .96);
}

body.cj-night .cj-user-withdraw-list > strong,
body.cj-night .cj-withdraw-dialog h3,
body.cj-night .cj-withdraw-record-main strong,
body.cj-night .cj-withdraw-record-detail p strong {
    color: var(--cj-text);
}

body.cj-night .cj-withdraw-record-detail p,
body.cj-night .cj-withdraw-record-detail a {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
}

/* Message notifications use one orange notice symbol; order type is shown with emoji in the title. */
.cj-message-topbar span {
    color: #fff !important;
    background: linear-gradient(180deg, #ffbf3f, #ff8a00) !important;
    box-shadow: 0 10px 24px rgba(255, 141, 0, .22) !important;
}

.cj-message-topbar a {
    position: relative;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

.cj-message-topbar a::before {
    content: "\2039";
    display: block;
    color: #111827;
    font-size: 30px;
    font-weight: 900;
    line-height: .8;
    transform: translateY(-1px);
}

.cj-message-topbar .cj-message-top-icon {
    overflow: visible;
    background: transparent !important;
    box-shadow: none !important;
}

.cj-message-topbar .cj-message-top-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(255, 141, 0, .2));
}

.cj-message-card {
    cursor: pointer;
    align-items: start !important;
    border-color: rgba(255, 156, 31, .16) !important;
    box-shadow: 0 14px 34px rgba(255, 141, 0, .08) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cj-message-card:hover,
.cj-message-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 141, 0, .32) !important;
    box-shadow: 0 18px 42px rgba(255, 141, 0, .14) !important;
    outline: none;
}

.cj-message-bell {
    align-self: start !important;
    margin-top: 2px;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cj-message-bell > span,
.cj-message-bell .cj-ant-icon,
.cj-message-bell svg {
    display: none !important;
}

.cj-message-bell img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(255, 141, 0, .22));
}

.cj-message-inline-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.08em;
    line-height: 1;
    vertical-align: -0.08em;
}

.cj-message-card h2 a {
    color: #1677ff;
}

.cj-message-card p {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cj-message-detail-modal[hidden] {
    display: none !important;
}

.cj-message-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483200;
    display: grid;
    place-items: center;
    padding: 24px;
}

.cj-message-detail-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(8px);
}

.cj-message-detail-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100vw - 32px));
    max-height: min(72vh, 680px);
    overflow: auto;
    border: 1px solid rgba(255, 156, 31, .2);
    border-radius: 26px;
    padding: 28px;
    background: color-mix(in srgb, #fff 92%, transparent);
    box-shadow: 0 28px 90px rgba(15, 23, 42, .26);
    outline: none;
}

.cj-message-detail-dialog > button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #6b7280;
    background: rgba(15, 23, 42, .06);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.cj-message-detail-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
}

.cj-message-detail-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(255, 141, 0, .2));
}

.cj-message-detail-dialog h2 {
    margin: 0 42px 14px;
    color: #111827;
    text-align: center;
    font-size: 22px;
    line-height: 1.35;
}

.cj-message-detail-dialog p {
    margin: 0;
    color: #374151;
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}

.cj-message-detail-dialog time {
    display: block;
    margin-top: 18px;
    color: #9ca3af;
    text-align: center;
    font-size: 13px;
}

body.cj-night .cj-message-topbar a::before,
body.cj-night .cj-message-detail-dialog h2 {
    color: #f6f7f9;
}

body.cj-night .cj-message-detail-dialog {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(18, 18, 18, .92);
}

body.cj-night .cj-message-detail-dialog p {
    color: rgba(255, 255, 255, .78);
}

/* Final product-detail and message polish. */
.cj-product-clean-actions button,
.cj-product-clean-actions a {
    box-sizing: border-box;
    min-width: 112px;
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px !important;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.cj-product-clean-actions .cj-product-favorite-action {
    color: #2368ff;
    background: rgba(35, 104, 255, .1);
}

.cj-product-clean-actions .cj-product-favorite-action.is-active {
    color: #fff;
    background: linear-gradient(135deg, #ffb547, #f04444);
}

.cj-paid-content-card {
    overflow: hidden;
}

.cj-paid-content-card [data-cj-copy],
.cj-paid-content-card .cj-paid-member-link,
.cj-detail-user-card > a,
.cj-detail-user-card > button {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

.cj-paid-content-card [data-cj-copy] {
    border: 0;
    color: #fff;
    background: #2368ff;
}

.cj-paid-content-card .cj-paid-member-link {
    color: #fff;
    background: linear-gradient(135deg, #ffb547, #f04444);
}

.cj-product-post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.cj-product-post-nav a {
    min-width: 0;
    border: 1px solid #e7eef9;
    border-radius: 16px;
    padding: 14px;
    color: #111827;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 30px rgba(31, 78, 145, .08);
}

.cj-product-post-nav a:only-child {
    grid-column: 1 / -1;
}

.cj-product-post-nav span {
    display: block;
    margin-bottom: 6px;
    color: #667287;
    font-size: 12px;
    font-weight: 800;
}

.cj-product-post-nav strong {
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    font-size: 15px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cj-product-post-nav-next {
    text-align: right;
}

.cj-message-card {
    align-items: center !important;
}

.cj-message-bell {
    align-self: center !important;
    margin-top: 0 !important;
}

body.cj-night .cj-product-post-nav a {
    border-color: rgba(255, 255, 255, .1);
    color: var(--cj-text);
    background: rgba(255, 255, 255, .05);
}

body.cj-night .cj-product-post-nav span {
    color: var(--cj-muted);
}

/* Final resource thumbnail pass: every resource cover keeps four rounded corners in card and list modes. */
.cj-ai-resource-card {
    overflow: hidden;
}

.cj-ai-thumb {
    overflow: hidden;
    border-radius: 18px !important;
}

.cj-ai-thumb img,
.cj-ai-resource-grid.is-list .cj-ai-thumb img,
.cj-archive-resource-grid.is-list .cj-ai-thumb img,
.cj-archive-resource-card .cj-ai-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 18px !important;
    object-fit: cover;
    object-position: center;
}

.cj-ai-resource-grid.is-grid .cj-ai-resource-card,
.cj-ai-resource-grid:not(.is-list) .cj-ai-resource-card {
    padding: 10px;
}

.cj-ai-resource-grid.is-grid .cj-ai-resource-card > div,
.cj-ai-resource-grid:not(.is-list) .cj-ai-resource-card > div {
    padding: 12px 4px 4px;
}

.cj-ai-resource-grid.is-list .cj-ai-resource-card,
.cj-archive-resource-grid.is-list .cj-ai-resource-card {
    gap: 14px;
    padding: 12px;
}

.cj-ai-resource-grid.is-list .cj-ai-thumb,
.cj-archive-resource-grid.is-list .cj-ai-thumb {
    height: 142px;
    min-height: 142px;
    border-radius: 18px !important;
}

.cj-message-bell {
    width: 108px;
    height: 108px;
}

.cj-message-card {
    grid-template-columns: 138px minmax(0, 1fr);
}

@media (max-width: 980px) {
    .cj-user-promotion-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cj-user-withdraw-list article {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cj-user-withdraw-list time {
        display: none;
    }

    .cj-withdraw-record-main {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .cj-withdraw-record-main em {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .cj-withdraw-record-detail {
        grid-template-columns: 1fr;
    }
}

/* Message center reference-style page. */
.cj-user-message-screen {
    min-height: 72vh;
    padding-bottom: 28px;
}

.cj-message-topbar {
    top: 72px;
    min-height: 70px;
    grid-template-columns: 52px 1fr 52px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    padding: 10px 0 18px;
    background: color-mix(in srgb, var(--cj-bg) 94%, transparent);
}

.cj-message-topbar h1 {
    color: #111827;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: .04em;
}

.cj-message-topbar a,
.cj-message-settings {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border: 0;
    border-radius: 50% !important;
    color: #111827 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

.cj-message-settings {
    font-size: 30px;
    line-height: 1;
}

.cj-message-topbar a::before {
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-2px);
}

.cj-message-list {
    gap: 14px;
}

.cj-message-card {
    grid-template-columns: 138px minmax(0, 1fr) !important;
    gap: 18px;
    align-items: center !important;
    border: 1px solid rgba(232, 237, 246, .95) !important;
    border-radius: 20px;
    padding: 22px 26px;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .08) !important;
}

.cj-message-bell {
    width: 112px !important;
    height: 112px !important;
    align-self: center !important;
    margin: 0 !important;
}

.cj-message-card h2 {
    display: block;
    margin: 0 0 10px;
    color: #111827;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.45;
}

.cj-message-card h2 a {
    color: #1677ff;
}

.cj-message-card p {
    margin: 0 0 12px !important;
    color: #5f6673;
    font-size: 16px;
    line-height: 1.45;
    -webkit-line-clamp: 1;
}

.cj-message-card time {
    margin: 0 !important;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.3;
}

.cj-message-inline-emoji {
    margin-right: 8px;
    font-size: 1.08em;
}

.cj-message-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.cj-message-pagination a {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    color: #4b5563;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
}

.cj-message-pagination a.is-active {
    border-color: #2368ff;
    color: #fff;
    background: #2368ff;
}

.cj-message-detail-modal {
    padding: 28px !important;
}

.cj-message-detail-dialog {
    width: min(560px, calc(100vw - 56px));
    padding: 30px 34px;
}

body.cj-night .cj-message-topbar h1,
body.cj-night .cj-message-settings {
    color: #f6f7f9 !important;
}

body.cj-night .cj-message-card {
    border-color: rgba(255, 255, 255, .1) !important;
    background: rgba(18, 18, 18, .78) !important;
}

.cj-favorite-list-v2 .cj-mini-resource-link {
    justify-content: flex-start;
    gap: 10px;
    min-height: 74px;
    border: 1px solid #e7eef9;
    border-radius: 16px;
    padding: 8px;
    color: #111827;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 10px 24px rgba(31, 78, 145, .08);
}

.cj-mini-resource-link img {
    width: 78px;
    height: 56px;
    flex: 0 0 78px;
    border-radius: 12px;
    object-fit: cover;
}

.cj-mini-resource-link span {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.cj-night .cj-favorite-list-v2 .cj-mini-resource-link {
    border-color: rgba(255, 255, 255, .1);
    color: var(--cj-text);
    background: rgba(255, 255, 255, .05);
}

/* Final checkout/detail separation: keep desktop stable without touching mobile overrides. */
.cj-pay-summary div:only-child {
    border-top: 0;
    padding-top: 0;
}

.cj-pay-close {
    display: grid;
    place-items: center;
    color: #111827;
    line-height: 1;
}

.cj-pay-product .cj-pay-plan-icon {
    box-sizing: border-box;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    overflow: visible;
}

.cj-pay-plan-icon .cj-ant-icon,
.cj-pay-plan-icon svg {
    position: static;
    display: block;
    margin: auto;
    transform: none;
}

body.cj-night .cj-pay-mask {
    background: rgba(3, 7, 18, .74);
}

body.cj-night .cj-pay-dialog {
    border: 1px solid rgba(255, 255, 255, .1);
    background: #101113 !important;
    color: #e5e7eb;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .52);
}

body.cj-night .cj-pay-head > span {
    color: #5aa2ff;
}

body.cj-night .cj-pay-dialog h2,
body.cj-night .cj-pay-product strong,
body.cj-night .cj-pay-summary span,
body.cj-night .cj-pay-summary strong,
body.cj-night .cj-pay-summary div,
body.cj-night .cj-pay-label,
body.cj-night .cj-pay-methods strong {
    color: #f8fafc !important;
}

body.cj-night .cj-pay-head p,
body.cj-night .cj-pay-product span,
body.cj-night .cj-pay-product small,
body.cj-night .cj-pay-safe {
    color: #b6c0d0 !important;
}

body.cj-night .cj-pay-product,
body.cj-night .cj-pay-summary,
body.cj-night .cj-pay-methods button,
body.cj-night .cj-pay-safe {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .055) !important;
}

body.cj-night .cj-pay-summary div:last-child {
    border-top-color: rgba(255, 255, 255, .12);
}

body.cj-night .cj-pay-summary div:only-child {
    border-top: 0;
}

body.cj-night .cj-pay-summary div:last-child strong {
    color: #ff4d67 !important;
}

body.cj-night .cj-pay-methods button.is-active {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .22);
}

body.cj-night .cj-pay-close {
    color: #f8fafc;
    background: rgba(255, 255, 255, .12);
}

body.cj-night .cj-pay-plan-icon,
body.cj-night .cj-pay-icon {
    color: #fff;
}

.cj-all-category-filter a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    white-space: nowrap;
}

@media (min-width: 783px) {
    .cj-product-brief-card {
        grid-template-columns: minmax(340px, 44%) minmax(0, 1fr);
        align-items: stretch;
    }

    .cj-product-brief-cover {
        min-height: 270px;
    }

    .cj-product-brief-cover img {
        height: 100%;
        min-height: 270px;
        aspect-ratio: auto;
    }

    .cj-product-brief-info {
        justify-content: center;
    }

    .cj-product-clean-buy {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: start;
        margin-top: 8px;
    }

    .cj-product-price {
        align-self: start;
        text-align: left;
    }

    .cj-product-clean-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
        justify-content: stretch;
    }

    .cj-product-clean-actions button,
    .cj-product-clean-actions a {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        box-sizing: border-box;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 13px !important;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Message cards: keep title and order summary to one clean line. */
.cj-message-card > div:last-child {
    min-width: 0;
}

.cj-message-card h2 {
    display: block !important;
    max-width: 100%;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    -webkit-line-clamp: unset !important;
}

.cj-message-card h2 a {
    display: inline;
}

.cj-message-card p {
    display: block !important;
    max-width: 100%;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    -webkit-line-clamp: unset !important;
}

/* Final polish: configurable category speed, compact resource cards and gold membership cards. */
.cj-category-rail.is-marquee div {
    animation-duration: var(--cj-secondary-marquee-duration, 20s) !important;
}

.cj-platform-notice .cj-notice-marquee p {
    color: #e11d48 !important;
}

.cj-all-category-filter {
    gap: 8px !important;
}

.cj-all-category-filter a {
    min-height: 32px !important;
    min-width: 82px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.cj-ai-resource-card {
    border-radius: 16px !important;
}

.cj-ai-thumb {
    display: block;
    border-radius: 14px !important;
}

.cj-ai-thumb img,
.cj-ai-resource-grid.is-grid .cj-ai-thumb img,
.cj-ai-resource-grid:not(.is-list) .cj-ai-thumb img {
    aspect-ratio: 1.86 / 1 !important;
    border-radius: 14px !important;
}

.cj-ai-resource-card > div {
    padding: 10px 12px !important;
}

.cj-ai-resource-card h3 {
    min-height: calc(1.35em * 2) !important;
    margin: 0 0 5px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

.cj-ai-resource-card p {
    min-height: calc(1.35em * 2) !important;
    margin: 0 0 8px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.cj-ai-resource-grid.is-list .cj-ai-thumb img,
.cj-archive-resource-grid.is-list .cj-ai-thumb img {
    min-height: 112px !important;
}

.cj-ai-plan {
    position: relative !important;
    border-color: rgba(218, 171, 70, .38) !important;
    background: linear-gradient(180deg, #fffaf0 0%, #fffdf7 42%, #ffffff 100%) !important;
}

.cj-ai-plan::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 10px;
    background: linear-gradient(135deg, #fff3bd 0%, #f3cf72 52%, #c49a3c 100%);
}

.cj-plan-badge {
    min-height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(128, 83, 10, .16);
    color: #6f4700 !important;
    background: linear-gradient(135deg, rgba(255, 240, 188, .96), rgba(226, 181, 82, .92)) !important;
    box-shadow: 0 8px 18px rgba(178, 126, 28, .18);
    text-align: center;
}

body.cj-night .cj-ai-plan {
    border-color: rgba(244, 207, 114, .38) !important;
    background: linear-gradient(180deg, rgba(92, 65, 18, .34) 0%, rgba(20, 26, 42, .96) 44%, rgba(15, 23, 42, .98) 100%) !important;
}

body.cj-night .cj-ai-plan::before,
body.cj-night .cj-plan-badge {
    background: linear-gradient(135deg, #fff0b3 0%, #e8bd57 52%, #b8862d 100%) !important;
}

body.cj-night .cj-plan-badge {
    color: #2a1a00 !important;
}

.cj-profile-password-block {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(35, 104, 255, .12);
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(35, 104, 255, .06);
}

.cj-profile-password-block strong {
    color: #17233d;
    font-size: 15px;
}

.cj-profile-password-block small {
    color: #75839a;
}

.cj-user-promotion-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.cj-hero-slide-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.cj-hero-slide-video.is-night-media {
    display: none;
}

body.cj-night .cj-hero-slide.has-night-media .cj-hero-slide-video.is-day-media {
    display: none;
}

body.cj-night .cj-hero-slide.has-night-video .cj-hero-slide-video.is-night-media {
    display: block;
}

.cj-ai-plan,
body.cj-night .cj-ai-plan {
    overflow: hidden !important;
    border-radius: 20px !important;
}

.cj-ai-plan::before,
body.cj-night .cj-ai-plan::before {
    content: none !important;
    display: none !important;
}

.cj-ai-plan .cj-plan-badge,
.cj-plan-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 2;
    width: max-content;
    max-width: 100%;
    min-height: 28px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center;
    margin: 0 auto 12px !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    text-align: center !important;
    line-height: 1 !important;
}

.cj-ai-plan h3 {
    padding-top: 0 !important;
}

/* Emergency visual pass: flatter VIP cards, transparent hero overlay, real dark category cards. */
.cj-ai-hero.has-slides,
.cj-ai-hero.has-slides .cj-ai-hero-inner,
body.cj-night .cj-ai-hero.has-slides,
body.cj-night .cj-ai-hero.has-slides .cj-ai-hero-inner {
    background: transparent !important;
}

.cj-hero-slides::after {
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .08)) !important;
}

body.cj-night .cj-hero-slides::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .06)) !important;
}

.cj-ai-hero.has-slides h1,
.cj-ai-hero.has-slides .cj-hero-subtitle,
.cj-ai-hero.has-slides .cj-hero-badge {
    text-shadow: 0 3px 18px rgba(0, 0, 0, .42);
}

.cj-ai-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.cj-ai-plan {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
}

.cj-ai-plan .cj-plan-body {
    min-height: 0 !important;
    display: grid !important;
    gap: 6px !important;
}

.cj-ai-plan .cj-plan-badge,
.cj-plan-badge {
    justify-self: start !important;
    align-self: start !important;
    margin: 0 0 6px !important;
    min-height: 24px !important;
    padding: 5px 13px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
}

.cj-ai-plan h3 {
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 19px !important;
}

.cj-plan-subline {
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
}

.cj-plan-benefits {
    min-height: 0 !important;
    margin: 2px 0 0 !important;
    gap: 3px !important;
}

.cj-plan-benefits li {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.cj-plan-price {
    min-height: 0 !important;
    margin-top: 4px !important;
}

.cj-plan-price strong {
    font-size: 28px !important;
}

.cj-ai-plan i {
    position: static !important;
    width: 54px !important;
    height: 54px !important;
    opacity: .12 !important;
}

.cj-ai-plan button {
    grid-column: 1 / -1 !important;
    min-height: 38px !important;
    margin-top: 8px !important;
}

body.cj-night .cj-category-grid-section,
body.cj-night .cj-category-grid-section.is-wrap,
body.cj-night .cj-category-grid-section.is-mobile-wrap,
body.cj-night .cj-category-grid-section .cj-category-grid {
    border-color: rgba(255, 255, 255, .08) !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.cj-night .cj-category-grid-section .cj-category-card,
body.cj-night .cj-category-card {
    border-color: rgba(255, 255, 255, .12) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(0, 0, 0, .28) !important;
}

body.cj-night .cj-category-card strong {
    color: #f8fafc !important;
}

body.cj-night .cj-category-card small {
    color: #cbd5e1 !important;
}

/* Final VIP-card correction: stable compact cards, no auto-grid overflow. */
.cj-membership .cj-ai-plan-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.cj-membership .cj-ai-plan {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: hidden !important;
    padding: 46px 16px 14px !important;
    border-radius: 18px !important;
}

.cj-membership .cj-ai-plan .cj-plan-badge,
.cj-membership .cj-plan-badge {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 82px !important;
    max-width: calc(100% - 32px) !important;
    min-height: 26px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border: 1px solid rgba(180, 129, 28, .24) !important;
    border-radius: 999px !important;
    padding: 5px 18px !important;
    color: #6c4500 !important;
    background: linear-gradient(135deg, rgba(255, 240, 190, .68), rgba(226, 181, 82, .42)) !important;
    box-shadow: 0 8px 22px rgba(174, 125, 28, .18) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.cj-membership .cj-ai-plan .cj-plan-body {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    text-align: left !important;
}

.cj-membership .cj-ai-plan h3 {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    font-size: 18px !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

.cj-membership .cj-plan-subline {
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

.cj-membership .cj-plan-benefits {
    min-height: 54px !important;
    display: grid !important;
    gap: 3px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
}

.cj-membership .cj-plan-benefits li {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.cj-membership .cj-plan-price {
    min-height: 0 !important;
    display: grid !important;
    align-content: end !important;
    gap: 0 !important;
    margin: 6px 0 0 !important;
    text-align: left !important;
}

.cj-membership .cj-plan-price strong {
    font-size: 25px !important;
    line-height: 1.12 !important;
}

.cj-membership .cj-plan-price del {
    font-size: 12px !important;
}

.cj-membership .cj-ai-plan i {
    display: none !important;
}

.cj-membership .cj-ai-plan button {
    width: 100% !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 8px 0 0 !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

body.cj-night .cj-membership .cj-ai-plan .cj-plan-badge,
body.cj-night .cj-membership .cj-plan-badge {
    color: #261900 !important;
    background: linear-gradient(135deg, rgba(255, 238, 183, .72), rgba(213, 157, 45, .48)) !important;
}

/* Final compact VIP cards: longer centered glass badge and tighter vertical rhythm. */
.cj-membership .cj-ai-plan-grid {
    grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)) !important;
    gap: 14px !important;
}

.cj-membership .cj-ai-plan {
    gap: 5px !important;
    padding: 42px 16px 13px !important;
    border-radius: 18px !important;
}

.cj-membership .cj-ai-plan .cj-plan-badge,
.cj-membership .cj-plan-badge {
    top: 11px !important;
    width: clamp(118px, 46%, 154px) !important;
    min-width: 118px !important;
    min-height: 25px !important;
    padding: 5px 22px !important;
    border-color: rgba(184, 128, 22, .28) !important;
    background: linear-gradient(135deg, rgba(255, 241, 190, .78), rgba(221, 171, 61, .5)) !important;
    box-shadow: 0 8px 24px rgba(184, 128, 22, .18), inset 0 1px 0 rgba(255, 255, 255, .62) !important;
}

.cj-membership .cj-ai-plan .cj-plan-body {
    flex: 0 1 auto !important;
    gap: 4px !important;
}

.cj-membership .cj-ai-plan h3 {
    font-size: 17px !important;
    line-height: 1.22 !important;
}

.cj-membership .cj-plan-subline {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.cj-membership .cj-ai-plan .cj-plan-benefits {
    min-height: 42px !important;
    gap: 2px !important;
    margin-top: 2px !important;
}

.cj-membership .cj-ai-plan .cj-plan-benefits li {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.cj-membership .cj-ai-plan .cj-plan-price {
    width: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    justify-items: start !important;
    margin: 5px 0 0 !important;
    text-align: left !important;
}

.cj-membership .cj-ai-plan .cj-plan-price strong {
    font-size: 24px !important;
    line-height: 1.08 !important;
    text-align: left !important;
}

.cj-membership .cj-ai-plan .cj-plan-price del {
    display: block !important;
    margin: 1px 0 0 !important;
    font-size: 11px !important;
    text-align: left !important;
}

.cj-membership .cj-ai-plan button {
    position: static !important;
    inset: auto !important;
    min-height: 34px !important;
    margin-top: 6px !important;
    border-radius: 10px !important;
}

body.cj-night .cj-platform-notice > a {
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 999px !important;
    color: #ffd166 !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Header logos can be rectangular; never force uploaded artwork into a square box. */
.cj-brand .cj-brand-mark.has-logo-image {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(220px, 28vw) !important;
    height: 46px !important;
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cj-brand .cj-brand-mark.has-logo-image img {
    width: auto !important;
    max-width: min(220px, 28vw) !important;
    height: 100% !important;
    max-height: 46px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.cj-brand.is-logo-only .cj-brand-mark.has-logo-image,
.cj-brand.is-logo-only .cj-brand-mark.has-logo-image img {
    max-width: min(240px, 32vw) !important;
}

body.cj-night .cj-platform-notice > a {
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Dark-mode readability guard for the desktop account menu and user center text. */
body.cj-night .cj-header-avatar {
    border-color: rgba(255, 255, 255, .16) !important;
    color: #f8fafc !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px rgba(0, 0, 0, .32) !important;
}

body.cj-night .cj-header-avatar span {
    color: #f8fafc !important;
}

body.cj-night .cj-header-user-menu {
    border-color: rgba(255, 255, 255, .14) !important;
    background: rgba(18, 18, 18, .96) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

body.cj-night .cj-header-user-menu a {
    color: #f8fafc !important;
    background: transparent !important;
}

body.cj-night .cj-header-user-menu a:hover,
body.cj-night .cj-header-user-menu a:focus-visible {
    color: #fff !important;
    background: rgba(35, 104, 255, .26) !important;
}

body.cj-night .cj-header-user-menu a:last-child {
    color: #fecaca !important;
    background: rgba(239, 68, 68, .12) !important;
}

body.cj-night .cj-header-user-menu a:last-child:hover,
body.cj-night .cj-header-user-menu a:last-child:focus-visible {
    color: #fff !important;
    background: rgba(239, 68, 68, .28) !important;
}

body.cj-night .cj-user-hero-panel h1,
body.cj-night .cj-user-hero-panel strong,
body.cj-night .cj-user-section-head h2,
body.cj-night .cj-user-section-head span,
body.cj-night .cj-user-function-grid a strong,
body.cj-night .cj-profile-edit-form label span,
body.cj-night .cj-profile-password-block strong,
body.cj-night .cj-profile-grid strong {
    color: #f8fafc !important;
}

body.cj-night .cj-user-hero-panel span,
body.cj-night .cj-user-hero-panel small,
body.cj-night .cj-user-function-grid a small,
body.cj-night .cj-profile-password-block small,
body.cj-night .cj-profile-grid span,
body.cj-night .cj-profile-edit-form label,
body.cj-night .cj-profile-edit-form small {
    color: #cbd5e1 !important;
}

body.cj-night .cj-profile-edit-form input {
    border-color: rgba(255, 255, 255, .16) !important;
    color: #f8fafc !important;
    background: rgba(255, 255, 255, .07) !important;
}

body.cj-night .cj-profile-edit-form input::placeholder {
    color: #94a3b8 !important;
}

/* Keep the user center hero card truly dark in night mode, not washed-out gray. */
body.cj-night .cj-user-profile-hero .cj-user-hero-panel,
body.cj-night .cj-user-hero-panel {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #f8fafc !important;
    background:
        radial-gradient(circle at 18% 16%, rgba(35, 104, 255, .22), transparent 34%),
        radial-gradient(circle at 84% 10%, rgba(245, 158, 11, .14), transparent 30%),
        linear-gradient(135deg, rgba(16, 24, 39, .96), rgba(8, 12, 20, .94)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 44px rgba(0, 0, 0, .36) !important;
}

body.cj-night .cj-user-hero-panel img,
body.cj-night .cj-user-hero-panel .avatar {
    border-color: rgba(255, 255, 255, .72) !important;
    background: #0f172a !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34) !important;
}

body.cj-night .cj-user-hero-panel strong {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .32) !important;
}

body.cj-night .cj-user-hero-panel span {
    color: #dbeafe !important;
}

body.cj-night .cj-user-hero-panel em {
    border: 1px solid rgba(96, 165, 250, .26) !important;
    color: #bfdbfe !important;
    background: rgba(37, 99, 235, .18) !important;
}

body.cj-night .cj-user-hero-panel em.is-ok {
    border-color: rgba(250, 204, 21, .3) !important;
    color: #fde68a !important;
    background: rgba(245, 158, 11, .18) !important;
}

.cj-membership .cj-plan-upload-icon {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 12px;
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .1);
    pointer-events: none;
}

.cj-membership .cj-plan-upload-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

body.cj-night .cj-membership .cj-plan-upload-icon {
    border-color: rgba(250, 204, 21, .24);
    background: rgba(15, 23, 42, .68);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

/* Final fixes: message modal readability and resource pagination polish. */
.cj-message-detail-dialog {
    background: #fff !important;
    color: #111827 !important;
}

.cj-message-detail-dialog h2 {
    color: #111827 !important;
}

.cj-message-detail-dialog p {
    color: #374151 !important;
}

.cj-message-detail-dialog > button:hover {
    color: #111827 !important;
    background: rgba(15, 23, 42, .1) !important;
}

body.cj-night .cj-message-detail-dialog {
    background: rgba(18, 18, 18, .96) !important;
    color: #f6f7f9 !important;
}

body.cj-night .cj-message-detail-dialog h2 {
    color: #f6f7f9 !important;
}

body.cj-night .cj-message-detail-dialog p {
    color: rgba(255, 255, 255, .8) !important;
}

.cj-resource-pagination {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px !important;
    margin: 26px 0 16px !important;
}

.cj-resource-pagination a,
.cj-resource-pagination span {
    min-width: 42px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1px solid #dce6f5 !important;
    color: #41506a !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}

.cj-resource-pagination a:hover {
    transform: translateY(-1px);
    border-color: #2368ff !important;
    color: #2368ff !important;
    box-shadow: 0 12px 28px rgba(35, 104, 255, .14) !important;
}

.cj-resource-pagination .cj-page-prev,
.cj-resource-pagination .cj-page-next {
    min-width: 96px !important;
}

.cj-resource-pagination .is-active {
    border-color: #2368ff !important;
    color: #fff !important;
    background: linear-gradient(135deg, #2368ff, #5b7cff) !important;
    box-shadow: 0 14px 30px rgba(35, 104, 255, .26) !important;
}

.cj-resource-pagination .is-disabled {
    opacity: .46;
    cursor: not-allowed;
    box-shadow: none !important;
}

.cj-resource-pagination .is-gap {
    min-width: 28px !important;
    padding: 0 4px !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cj-resource-pagination .is-total {
    min-width: 42px !important;
}

body.cj-night .cj-resource-pagination a,
body.cj-night .cj-resource-pagination span {
    border-color: rgba(255, 255, 255, .12) !important;
    color: #dbeafe !important;
    background: rgba(17, 24, 39, .88) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .26) !important;
}

body.cj-night .cj-resource-pagination .is-active {
    border-color: #5b8cff !important;
    color: #fff !important;
    background: linear-gradient(135deg, #2563eb, #f59e0b) !important;
}

body.cj-night .cj-resource-pagination .is-gap {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cj-ai-plan.is-current-member-plan {
    border-color: rgba(35, 104, 255, .36) !important;
    box-shadow: 0 18px 42px rgba(35, 104, 255, .14) !important;
}

.cj-ai-plan button.is-current-member,
.cj-ai-plan button:disabled {
    cursor: not-allowed !important;
    color: #2368ff !important;
    background: #eaf1ff !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body.cj-night .cj-ai-plan button.is-current-member,
body.cj-night .cj-ai-plan button:disabled {
    color: #dbeafe !important;
    background: rgba(37, 99, 235, .22) !important;
}

@media (min-width: 981px) {
    .cj-main-nav {
        overflow: visible !important;
    }

    .cj-main-nav > a,
    .cj-nav-more-toggle {
        min-width: 0;
        max-width: 112px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        overflow: hidden;
        border: 0;
        background: transparent;
        color: #2d3954;
        font: inherit;
        font-size: 13px;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }

    .cj-nav-more {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .cj-nav-more::after {
        content: "";
        position: absolute;
        top: 100%;
        left: -14px;
        right: -14px;
        height: 14px;
        z-index: 79;
    }

    .cj-nav-more-toggle span {
        font-size: 10px;
        transform: translateY(1px);
    }

    .cj-nav-more:hover .cj-nav-more-toggle,
    .cj-nav-more:focus-within .cj-nav-more-toggle,
    .cj-nav-more.is-active .cj-nav-more-toggle {
        color: #2368ff;
    }

    .cj-nav-more-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 80;
        box-sizing: border-box;
        width: 168px;
        max-height: min(420px, calc(100vh - 96px));
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px;
        border: 1px solid rgba(226, 232, 240, .92);
        border-radius: 16px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 18px 44px rgba(28, 45, 78, .16);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 8px);
        transition: opacity .16s ease, transform .16s ease;
    }

    .cj-nav-more:hover .cj-nav-more-menu,
    .cj-nav-more:focus-within .cj-nav-more-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .cj-nav-more-menu a {
        width: 100%;
        max-width: none;
        min-height: 36px;
        justify-content: flex-start;
        padding: 0 12px;
        border-radius: 11px;
        color: #2d3954;
        text-align: left;
    }

    .cj-nav-more-menu a:hover,
    .cj-nav-more-menu a.is-active {
        color: #2368ff;
        background: #edf4ff;
    }

    body.cj-night .cj-nav-more-toggle,
    body.cj-night .cj-nav-more-menu a {
        color: #dbe4f0;
    }

    body.cj-night .cj-nav-more-menu {
        border-color: rgba(255, 255, 255, .12);
        background: rgba(17, 24, 39, .98);
        box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
    }

body.cj-night .cj-nav-more-menu a:hover,
body.cj-night .cj-nav-more-menu a.is-active {
        color: #8db4ff;
        background: rgba(59, 130, 246, .16);
    }
}

/* Final detail/auth/footer polish. */
.cj-auth-meta button {
    border: 0;
    padding: 0;
    color: #8b93a0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.cj-auth-meta button:hover,
.cj-auth-form p button:hover {
    color: #2368ff;
}

.cj-footer-qr-button {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}

.cj-footer-qr-button img {
    transition: transform .18s ease, box-shadow .18s ease;
}

.cj-footer-qr-button:hover img {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 26px rgba(35, 104, 255, .16);
}

.cj-image-preview-modal[hidden] {
    display: none;
}

.cj-image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 22px;
}

.cj-image-preview-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cj-image-preview-dialog {
    position: relative;
    z-index: 1;
    width: min(88vw, 420px);
    display: grid;
    gap: 14px;
    border: 1px solid rgba(226, 232, 240, .86);
    border-radius: 24px;
    padding: 18px;
    text-align: center;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.cj-image-preview-dialog > button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #64748b;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.cj-image-preview-dialog strong {
    color: #17233d;
    font-size: 16px;
}

.cj-image-preview-dialog img {
    width: 100%;
    max-height: min(72vh, 520px);
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
}

.cj-product-type {
    display: none !important;
}

.cj-product-published-time {
    margin: 22px 0 0;
    color: #7a8798;
    font-size: 14px;
    font-weight: 700;
}

.cj-profile-avatar-field {
    position: relative;
}

.cj-profile-avatar-field input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cj-profile-avatar-field strong {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(35, 104, 255, .2);
    border-radius: 12px;
    padding: 0 14px;
    color: #2368ff;
    background: rgba(35, 104, 255, .08);
    font-size: 13px;
    font-weight: 900;
}

.cj-profile-edit-form .cj-profile-avatar-field small {
    grid-column: auto;
    min-width: 0;
    overflow: hidden;
    color: #7a8798;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

body.cj-night .cj-auth-meta button {
    color: #f6f7fb !important;
}

body.cj-night .cj-image-preview-dialog {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(18, 18, 18, .96);
}

body.cj-night .cj-image-preview-dialog strong {
    color: #f8fafc;
}

body.cj-night .cj-image-preview-dialog > button {
    color: #f8fafc;
    background: rgba(255, 255, 255, .12);
}

body.cj-night .cj-product-published-time,
body.cj-night .cj-user-promotion-stats small {
    color: #cbd5e1 !important;
}

body.cj-night .cj-user-promotion-stats span {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: linear-gradient(135deg, rgba(35, 104, 255, .2), rgba(15, 23, 42, .92)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body.cj-night .cj-user-promotion-stats strong {
    color: #f8fafc !important;
}

body.cj-night .cj-profile-avatar-field strong {
    border-color: rgba(96, 165, 250, .32);
    color: #93c5fd;
    background: rgba(37, 99, 235, .18);
}

body.cj-night .cj-profile-edit-form .cj-profile-avatar-field small {
    color: #cbd5e1 !important;
}