:root {
    --od-primary: #f04494;
    --od-primary-2: #ff7eb2;
    --od-gradient: linear-gradient(135deg, var(--od-primary), var(--od-primary-2));
    --od-blue: #4f7cff;
    --od-cyan: #18c7d5;
    --od-green: #35c987;
    --od-yellow: #ffb84d;
    --od-red: #ff5f6d;
    --od-text: #2f3640;
    --od-muted: #7a8190;
    --od-line: rgba(40, 46, 60, .08);
    --od-bg: #f6f7fb;
    --od-card: rgba(255, 255, 255, .92);
    --od-shadow: 0 12px 34px rgba(33, 40, 66, .08);
    --od-radius: 8px;
}

@font-face {
    font-family: "HBD";
    src: url("../fonts/hbd.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--od-text);
    background:
        radial-gradient(circle at 14% 8%, rgba(240, 68, 148, .08), transparent 28%),
        radial-gradient(circle at 86% 4%, rgba(79, 124, 255, .1), transparent 26%),
        linear-gradient(180deg, #fbfcff 0%, var(--od-bg) 42%, #f2f4f8 100%);
    font-family: "HBD", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

button {
    font: inherit;
}

.page-wrap {
    min-height: 100vh;
}


.sign-page-main {
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background:
        radial-gradient(circle at 20% 30%, rgba(240, 68, 148, .06), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(79, 124, 255, .08), transparent 50%),
        var(--od-bg);
}

.sign-page-container {
    width: 100%;
    max-width: 420px;
}

.sign-card {
    background: var(--od-card);
    border: 1px solid var(--od-line);
    border-radius: 16px;
    box-shadow: var(--od-shadow);
    overflow: hidden;
}

.sign-card-header {
    padding: 32px 28px 0;
    text-align: center;
}

.sign-logo {
    margin-bottom: 24px;
}

.sign-logo a {
    font-size: 22px;
    font-weight: 900;
    color: #252c3a;
}

.sign-logo img {
    max-height: 48px;
    width: auto;
}

.sign-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--od-line);
    padding-bottom: 0;
}

.sign-tab {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--od-muted);
    border-bottom: 2px solid transparent;
    transition: color .25s ease, border-color .25s ease;
    cursor: pointer;
}

.sign-tab:hover {
    color: var(--od-primary);
}

.sign-tab.active {
    color: var(--od-primary);
    border-bottom-color: var(--od-primary);
}

.sign-card-body {
    padding: 24px 28px 28px;
}

.sign-panel-header {
    font-size: 15px;
    font-weight: 700;
    color: #252c3a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sign-panel-header i {
    color: var(--od-primary);
    font-size: 18px;
}


.sign-tabs {
    display: flex;
    gap: 0;
    margin: -1px 0 0;
    border-bottom: 1px solid var(--od-line);
}

.sign-tab {
    flex: 1;
    padding: 14px 14px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--od-muted);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.sign-tab:hover {
    color: #4d5564;
}

.sign-tab.is-active {
    color: var(--od-primary);
    border-bottom-color: var(--od-primary);
}

.sign-panel {
    padding-top: 4px;
}


.sign-form .form-group {
    margin-bottom: 16px;
}

.input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-wrap>i:first-child {
    position: absolute;
    left: 14px;
    color: var(--od-muted);
    font-size: 15px;
    z-index: 1;
    pointer-events: none;
}

.input-icon-wrap .form-control {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border: 1px solid var(--od-line);
    border-radius: 10px;
    font-size: 14px;
    color: var(--od-text);
    background: rgba(255, 255, 255, .8);
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.input-icon-wrap .form-control:focus {
    border-color: var(--od-primary);
    box-shadow: 0 0 0 3px rgba(240, 68, 148, .1);
}

.input-icon-wrap .form-control::placeholder {
    color: #aab1bd;
}


.vip-pay-body .form-control-icon {
    position: relative;
    padding-right: 40px;
}

.vip-pay-body .form-control-icon .input-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--od-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 15px;
    z-index: 1;
}

.form-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 13px;
}

.form-extra .muted-color {
    color: var(--od-muted);
}

.form-extra .muted-color:hover {
    color: var(--od-primary);
}

.form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--od-muted);
    font-weight: 500;
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--od-primary);
}

.form-submit {
    margin-top: 4px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: opacity .25s ease, transform .2s ease;
    line-height: 1.4;
}

.btn:active {
    transform: scale(.98);
}

.btn-primary {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 8px 20px rgba(240, 68, 148, .2);
}

.btn-primary:hover {
    opacity: .92;
}

.btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn-block {
    width: 100%;
}

.sign-btn {
    min-height: 46px;
    font-size: 15px;
    letter-spacing: .5px;
}

.sign-footer-links,
.sign-switch {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--od-muted);
}

.sign-footer-links a,
.sign-switch a {
    color: var(--od-primary);
    font-weight: 700;
}

.sign-footer-links a:hover,
.sign-switch a:hover {
    text-decoration: underline;
}

.form-agreement {
    margin-top: 14px;
    font-size: 12px;
}

.form-agreement a {
    color: var(--od-primary);
}


.sign-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
    white-space: nowrap;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.sign-toast.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.sign-toast.toast-success {
    color: #fff;
    background: linear-gradient(135deg, #35c987, #28a76e);
}

.sign-toast.toast-error {
    color: #fff;
    background: linear-gradient(135deg, #ff5f6d, #e04a58);
}


@media (max-width: 480px) {
    .sign-card-header {
        padding: 24px 20px 0;
    }

    .sign-card-body {
        padding: 20px;
    }

    .sign-tab {
        font-size: 13px;
        padding: 10px 4px;
    }
}

.site-header {
    position: relative;
    z-index: 99;
    border-bottom: 1px solid rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .76);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(31, 38, 62, .05);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .98);
    border-bottom-color: rgba(0, 0, 0, .06);
    box-shadow: 0 6px 24px rgba(31, 38, 62, .12);
}

.nav-shell {
    width: min(1200px, calc(100% - 32px));
    height: 62px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 132px;
    font-weight: 800;
    color: #202736;
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 10px 24px rgba(240, 68, 148, .25);
}

.brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name strong {
    font-size: 18px;
    letter-spacing: 0;
}

.brand-name span {
    margin-top: 2px;
    color: var(--od-muted);
    font-size: 12px;
    font-weight: 500;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
}

.nav-item {
    position: relative;
}

.main-nav>a,
.nav-item>a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 50px;
    color: #414958;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    box-shadow: none;
    white-space: nowrap;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}

.main-nav>a>i,
.nav-item>a>i {
    width: 15px;
    text-align: center;
    color: #8d95a5;
    font-size: 14px;
    transition: color .25s ease, transform .25s ease;
}

.nav-caret {
    width: auto !important;
    margin-left: -2px;
    font-size: 12px !important;
}

.main-nav>a:hover,
.main-nav>a.active,
.main-nav>a:focus,
.nav-item:hover>a,
.nav-item>a.active,
.nav-item>a:focus {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .08);
}

.main-nav>a:focus-visible,
.nav-item>a:focus-visible {
    box-shadow: 0 0 0 3px rgba(240, 68, 148, .14);
}

.main-nav>a:hover>i,
.main-nav>a.active>i,
.main-nav>a:focus>i,
.nav-item:hover>a>i,
.nav-item>a.active>i,
.nav-item>a:focus>i {
    color: var(--od-primary);
    transform: translateY(-1px);
}

.nav-item:hover .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    min-width: 168px;
    padding: 8px;
    border: 1px solid var(--od-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(31, 38, 62, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.nav-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: #4d5564;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .08);
}

.nav-dropdown a i {
    width: 16px;
    color: #9aa1ad;
    text-align: center;
}

.nav-badge {
    position: absolute;
    top: -6px;
    right: -2px;
    padding: 2px 5px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #18c7d5, #42dcba);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn,
.menu-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #4c5361;
    background: rgba(45, 55, 76, .06);
}

.icon-btn:hover,
.icon-btn:focus,
.menu-btn:hover,
.menu-btn:focus {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
}

.menu-btn {
    display: none;
}

.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 10px 24px rgba(240, 68, 148, .22);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.pill-btn.active,
.pill-btn:hover,
.pill-btn:focus {
    color: #fff;
    transform: translateY(-1px);
}

.nav-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: #4c5361;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.nav-link-btn:hover,
.nav-link-btn.active,
.icon-btn.active {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
}

.nav-user-card {
    position: relative;
}

.nav-avatar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    color: #343b49;
}

.nav-user-card.active .nav-avatar,
.nav-avatar:hover,
.nav-avatar:focus {
    color: var(--od-primary);
    transform: translateY(-1px);
}

.nav-avatar-img {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--od-gradient);
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(240, 68, 148, .2);
}

.nav-avatar-img.large {
    width: 46px;
    height: 46px;
}

.init-only {
    display: none;
}

.nav-user-text {
    display: grid;
    gap: 1px;
    line-height: 1.15;
}

.nav-user-text strong {
    color: #2f3640;
    font-size: 13px;
    font-weight: 900;
}

.nav-user-text em {
    color: var(--od-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.nav-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: 238px;
    max-height: calc(100vh - 100px);
    padding: 10px;
    border: 1px solid var(--od-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 46px rgba(31, 38, 62, .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    overflow-y: auto;
}

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

.nav-user-card:hover .nav-user-menu,
.nav-user-card:focus-within .nav-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-user-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(240, 68, 148, .1), rgba(79, 124, 255, .08));
}

.nav-user-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nav-user-name {
    display: block;
    color: #252c3a;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.nav-user-head .nav-user-meta {
    margin-top: 4px;
}

.nav-user-head em {
    color: var(--od-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.nav-vip-info {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
    border-radius: 4px;
    background: linear-gradient(135deg, #939cad, #6b7385);
    letter-spacing: .3px;
}

.nav-vip-info i {
    font-size: 10px;
}


.nav-vip-info.vip-trial {
    background: linear-gradient(135deg, #7ec8e3, #2d9cd8);
}


.nav-vip-info.vip-monthly {
    background: linear-gradient(135deg, #6dd5a0, #38b27a);
}


.nav-vip-info.vip-quarterly {
    background: linear-gradient(135deg, #b8a9f0, #7c5ce0);
}


.nav-vip-info.vip-yearly {
    background: linear-gradient(135deg, #f5d77b, #e8b730);
    color: #5a3d00;
}


.nav-vip-info.vip-forever {
    background: linear-gradient(135deg, #f7c978, #d4880f);
    box-shadow: 0 1px 6px rgba(212, 136, 15, .35);
}


.nav-vip-info[class*="vip-"]:not(.vip-trial):not(.vip-monthly):not(.vip-quarterly):not(.vip-yearly):not(.vip-forever) {
    background: linear-gradient(135deg, #f5b86e, #d4853a);
}


.nav-vip-expire {
    color: var(--od-muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}


[data-theme="dark"] .nav-vip-info:not([class*="vip-"]) {
    background: rgba(255, 255, 255, .1);
    color: var(--od-muted);
}

.nav-user-head.guest {
    display: block;
    padding: 16px 12px;
    text-align: center;
}

.guest-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}

.guest-card p {
    margin: 0 0 14px;
    color: var(--od-muted);
    font-size: 12px;
    line-height: 1.5;
}

.guest-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.guest-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: #4d5564;
    background: rgba(40, 46, 60, .06);
    transition: all .22s ease;
}

.guest-btn:hover {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .1);
}

.guest-btn.primary {
    color: #fff;
    background: var(--od-primary);
}

.guest-btn.primary:hover {
    opacity: .88;
}

.nav-user-menu>a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: #4d5564;
    font-size: 13px;
    font-weight: 800;
}

.nav-user-menu>a:hover,
.nav-user-menu>a:focus {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .08);
}

.nav-user-menu>a i {
    width: 16px;
    color: #9aa1ad;
    text-align: center;
}

.owl-dynamic {
    height: 45px;
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(240, 68, 148, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 28px rgba(31, 38, 62, .06);
    backdrop-filter: blur(14px);
}

.owl-dynamic-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--od-primary);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.owl-dynamic-label i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--od-gradient);
}

.owl-dynamic-viewport {
    height: 45px;
    overflow: hidden;
}

.owl-dynamic-track {
    display: grid;
    animation: owlDynamicScroll 12s linear infinite;
}

.owl-dynamic:hover .owl-dynamic-track {
    animation-play-state: paused;
}

.owl-dynamic-track a {
    height: 45px;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: #525a69;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owl-dynamic-more {
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

@keyframes owlDynamicScroll {

    0%,
    18% {
        transform: translateY(0);
    }

    33%,
    51% {
        transform: translateY(-45px);
    }

    66%,
    84% {
        transform: translateY(-90px);
    }

    100% {
        transform: translateY(-135px);
    }
}

.hero {
    --hero-height: 450px;
    height: var(--hero-height);
    margin: 0;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .8),
        0 18px 50px rgba(31, 38, 62, .06);
}

.hero-panel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    border-radius: 12px;
    box-shadow: 0 22px 48px rgba(18, 25, 42, .16);
    color: #fff;
    background: #20283a;
}

.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
    min-height: 0;
    height: 100% !important;
}

.hero-swiper {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

.hero-swiper .swiper-wrapper {
    width: 100%;
    align-items: stretch;
}

.hero-swiper .swiper-slide {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.hero-slide {
    position: relative;
    box-sizing: border-box;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 44px 56px 58px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    content-visibility: auto;
}

.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(13, 19, 33, .82) 0%, rgba(18, 25, 42, .55) 45%, rgba(18, 25, 42, .2) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .28) calc(100% - 120px), rgba(0, 0, 0, .48) 100%);
    pointer-events: none;
}

.hero-slide.theme-wordpress {
    background-image:
        linear-gradient(135deg, rgba(30, 38, 60, .78), rgba(240, 68, 148, .28)),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1300&q=82");
}

.hero-slide.theme-community {
    background-image:
        linear-gradient(135deg, rgba(22, 43, 78, .78), rgba(24, 199, 213, .28)),
        url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1300&q=82");
}

.hero-slide.theme-shop {
    background-image:
        linear-gradient(135deg, rgba(30, 38, 60, .78), rgba(255, 184, 77, .26)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1300&q=82");
}

.hero-swiper .swiper-pagination {
    left: 50%;
    bottom: 24px;
    width: auto;
    opacity: 1;
    text-align: center;
    z-index: 4;
}

.hero-swiper .swiper-pagination-bullet {
    width: 28px;
    height: 7px;
    margin: 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    opacity: .58;
    transition: width .25s ease, opacity .25s ease, background .25s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
    width: 44px;
    height: 8px;
    opacity: 1;
    background: #fff;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease, background .25s ease, transform .25s ease;
}

.hero:hover .hero-arrow {
    opacity: 1;
    visibility: visible;
}

.hero-arrow:hover {
    color: #fff;
    background: rgba(255, 255, 255, .26);
    transform: translateY(-50%) scale(1.04);
}

.hero-arrow.prev {
    left: 16px;
}

.hero-arrow.next {
    right: 16px;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
}

.hero h1 {
    margin: 0 0 18px;
    max-width: 610px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0;
}

.hero p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    line-height: 1.82;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 19px;
    border-radius: 999px;
    font-weight: 700;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.hero-actions a:hover {
    color: #fff;
    transform: translateY(-2px);
}

.hero-actions .primary {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 14px 30px rgba(240, 68, 148, .3);
}

.hero-actions .ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(10px);
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: min(1200px, calc(100% - 32px));
    margin: 22px auto;
}

.stat-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #4f7cff, #18c7d5);
    box-shadow: 0 14px 34px rgba(33, 40, 66, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.stat-item::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -36px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}

.stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(33, 40, 66, .13);
}

.stat-item:nth-child(2) {
    background: var(--od-gradient);
}

.stat-item:nth-child(3) {
    background: linear-gradient(135deg, #35c987, #18c7d5);
}

.stat-item:nth-child(4) {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.stat-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    font-size: 22px;
}

.stat-info {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.stat-info strong {
    display: block;
    color: #fff;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 800;
}

.stat-info span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 700;
}

.search-bg {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 22px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(31, 39, 68, .82), rgba(24, 199, 213, .5)),
        url("https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=82") center/cover;
    box-shadow: 0 18px 42px rgba(31, 38, 62, .1);
    overflow: hidden;
}

.search-panel {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    align-items: center;
    gap: 24px;
    min-height: 168px;
    padding: 28px 32px;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 800;
}

.search-copy h2,
.division-head h2,
.dynamic-head h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 800;
}

.search-copy h2 {
    color: #fff;
}

.search-copy p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .78);
    line-height: 1.7;
}

.search-form {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 36px rgba(18, 25, 42, .16);
    transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.search-form:focus-within {
    border-color: rgba(240, 68, 148, .38);
    background: #fff;
    box-shadow: 0 18px 40px rgba(18, 25, 42, .18), 0 0 0 4px rgba(240, 68, 148, .12);
}

.search-form>i {
    color: var(--od-primary);
    text-align: center;
}

.search-form input {
    min-width: 0;
    height: 38px;
    border: 0;
    outline: none;
    background: transparent;
    color: #303746;
    box-shadow: none;
    font: inherit;
}

.search-form input:focus {
    outline: none;
    box-shadow: none;
}

.search-form input::placeholder {
    color: #9aa1ad;
}

.search-form button {
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--od-gradient);
    font-weight: 800;
}

.division,
.dynamic {
    margin-top: 20px;
    padding: 22px;
    border: 1px solid var(--od-line);
    border-radius: 12px;
    background: var(--od-card);
    box-shadow: var(--od-shadow);
}

.division-head,
.dynamic-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.division-head h2,
.dynamic-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #252c3a;
}

.division-head h2 i,
.dynamic-head h2 i {
    color: var(--od-primary);
}

.division-head a,
.dynamic-head span {
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 700;
}

.division-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.division-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 132px;
    padding: 18px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, rgba(245, 247, 252, .86));
    border: 1px solid rgba(45, 55, 76, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.division-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(33, 40, 66, .08);
}

.division-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--od-blue), #75a2ff);
    font-size: 20px;
}

.division-item:nth-child(2) .division-icon {
    background: var(--od-gradient);
}

.division-item:nth-child(3) .division-icon {
    background: linear-gradient(135deg, var(--od-green), #65dba3);
}

.division-item:nth-child(4) .division-icon {
    background: linear-gradient(135deg, var(--od-yellow), #ffd16f);
}

.division-item strong {
    color: #303746;
    font-size: 16px;
    font-weight: 800;
}

.division-item span:last-child {
    color: var(--od-muted);
    line-height: 1.55;
}

.dynamic-viewport {
    position: relative;
    height: 228px;
    overflow: hidden;
    border-radius: 10px;
}

.dynamic-viewport::before,
.dynamic-viewport::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 34px;
    pointer-events: none;
}

.dynamic-viewport::before {
    top: 0;
    background: linear-gradient(180deg, var(--od-card), rgba(255, 255, 255, 0));
}

.dynamic-viewport::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--od-card), rgba(255, 255, 255, 0));
}

.dynamic-track {
    display: grid;
    gap: 10px;
    animation: dynamicScroll 18s linear infinite;
}

.dynamic-viewport:hover .dynamic-track {
    animation-play-state: paused;
}

.dynamic-item {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 10px;
    min-height: 64px;
    padding: 13px 16px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease;
}

.dynamic-item:hover {
    background: #fff;
    transform: translateX(3px);
}

.dynamic-dot {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--od-primary);
    box-shadow: 0 0 0 5px rgba(240, 68, 148, .1);
}

.dynamic-item strong {
    display: -webkit-box;
    overflow: hidden;
    color: #303746;
    line-height: 1.45;
    font-weight: 800;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dynamic-item span:last-child {
    display: block;
    margin-top: 6px;
    color: #9097a6;
    font-size: 12px;
}

@keyframes dynamicScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-50% - 5px));
    }
}

.home-widget-area {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 18px;
}

.home-widget-top {
    margin-bottom: 14px;
}

.home-widget-bottom {
    margin-top: 26px;
    margin-bottom: 0;
}

.home-widget-area .widget {
    border: 1px solid var(--od-line);
    border-radius: var(--od-radius);
    background: var(--od-card);
    box-shadow: var(--od-shadow);
    padding: 20px 24px;
}

.home-widget-top+.content-shell {
    margin-top: 0;
}

.widget-area-before-latest,
.widget-area-after-latest {
    display: grid;
    gap: 18px;
}

.widget-area-before-latest {
    margin-bottom: 18px;
}

.widget-area-after-latest {
    margin-top: 18px;
}

.home main {
    padding-top: 24px;
}

.single-widget-area {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 22px;
}

.single-widget-area .widget {
    border: 1px solid var(--od-line);
    border-radius: var(--od-radius);
    background: var(--od-card);
    box-shadow: var(--od-shadow);
    padding: 20px 24px;
}

.footer-widget-area {
    padding: 28px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-widget-area .widget {
    max-width: 1200px;
    margin: 0 auto 20px;
}

.widget {
    border: 1px solid var(--od-line);
    border-radius: var(--od-radius);
    background: var(--od-card);
    box-shadow: var(--od-shadow);
    padding: 18px 20px;
}

.widget+.widget {
    margin-top: 18px;
}

.widget>h3,
.widget>h2,
.widget .widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--od-line);
    color: #243041;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.widget>h3 i,
.widget>h2 i,
.widget .widget-title i {
    color: var(--od-primary);
}

.widget :is(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.widget li+li {
    margin-top: 12px;
}

.widget a {
    color: inherit;
}

.widget a:hover {
    color: var(--od-primary);
}

.widget .tagcloud,
.widget .tag-cloud,
.widget .wp-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.widget .tagcloud a,
.widget .tag-cloud a,
.widget .wp-tag-cloud a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    color: #4c5361;
    background: rgba(45, 55, 76, .06);
    font-size: 13px !important;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.widget .tagcloud a:hover,
.widget .tag-cloud a:hover,
.widget .wp-tag-cloud a:hover {
    color: #fff;
    background: var(--od-gradient);
    transform: translateY(-1px);
}

.widget .search-form {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 10px 12px;
    border: 1px solid var(--od-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    box-shadow: none;
}

.widget .search-form input {
    height: 34px;
}

.widget .search-form button {
    height: 34px;
    padding: 0 16px;
}

.rank-list,
.widget .menu,
.widget .recentcomments {
    display: grid;
    gap: 12px;
}

.rank-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(45, 55, 76, .04);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.rank-item:hover {
    background: rgba(240, 68, 148, .08);
    transform: translateY(-1px);
}

.rank-body {
    min-width: 0;
}

.rank-body strong {
    display: block;
    color: #253041;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.rank-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    color: var(--od-muted);
    font-size: 12px;
}

.profile-card {
    overflow: hidden;
}

.profile-card .profile-actions a,
.profile-card .profile-actions button,
.profile-actions.icon-only a {
    border-radius: 999px;
}

.single-widget-bottom {
    margin-top: -14px;
}

.content-shell {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 326px;
    gap: 22px;
    align-items: start;
}

.main-column {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.section-card {
    border: 1px solid var(--od-line);
    border-radius: var(--od-radius);
    background: var(--od-card);
    box-shadow: none;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--od-line);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.section-title i {
    color: var(--od-primary);
}

.tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    scrollbar-width: none;
}

.tabs a {
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--od-muted);
    background: rgba(45, 55, 76, .05);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.tabs a.active {
    color: #fff;
    background: var(--od-gradient);
}

.post-list {
    padding: 8px;
}

.post-item {
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 18px;
    height: 172px;
    padding: 14px;
    border-radius: var(--od-radius);
    overflow: hidden;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.post-item:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 12px 26px rgba(33, 40, 66, .07);
}

.post-thumb {
    position: relative;
    overflow: hidden;
    height: 144px;
    border-radius: var(--od-radius);
    background: #dde2ef;
}

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

.post-thumb .flag {
    position: absolute;
    left: 10px;
    top: auto;
    bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(20, 26, 40, .68);
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 700;
}

.status-tag {
    position: absolute;
    left: 0px;
    top: 10px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 8px 999px 999px 8px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(18, 25, 42, .2);
    letter-spacing: 0;
}

.doc-list .status-tag,
.rank-list .status-tag {
    position: static;
    display: inline-block;
    padding: 2px 6px;
    margin-right: 4px;
    font-size: 10px;
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: middle;
    box-shadow: none;
    flex-shrink: 0;
}

.tag-sticky {
    background: linear-gradient(135deg, #ff5f6d, var(--od-primary));
}

.tag-hot {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.tag-new {
    background: linear-gradient(135deg, var(--od-green), #18c7d5);
}

.post-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-body h3 {
    margin: 0 0 9px;
    font-size: 19px;
    line-height: 1.45;
    font-weight: 800;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.post-body p {
    margin: 0 0 14px;
    color: var(--od-muted);
    line-height: 1.7;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    color: #9097a6;
    font-size: 13px;
}

.post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.post-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px 20px;
}

.page-btn,
.page-dot {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #667085;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 800;
}

.page-btn {
    transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.page-btn:hover {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
    transform: translateY(-1px);
}

.page-btn.active {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 10px 22px rgba(240, 68, 148, .2);
}

.page-btn.disabled {
    pointer-events: none;
    opacity: .45;
}

.page-dot {
    background: transparent;
}

/* PJAX 加载状态 */
.section-card.is-loading {
    position: relative;
    opacity: .5;
    pointer-events: none;
}

.section-card.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}

.category-posts {
    padding: 16px;
    border: 1px solid var(--od-line);
    border-radius: var(--od-radius);
    background: var(--od-card);
    box-shadow: var(--od-shadow);
}

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

.category-posts-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #252c3a;
    font-size: 18px;
    font-weight: 800;
}

.category-posts-head h2 i {
    color: var(--od-primary);
}

.category-posts-head a {
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 800;
}

.category-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.category-post-card {
    overflow: hidden;
    border: 1px solid rgba(45, 55, 76, .06);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(33, 40, 66, .05);
    transition: transform .25s ease, box-shadow .25s ease;
}

.category-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(33, 40, 66, .09);
}

.category-post-cover {
    position: relative;
    display: block;
    height: 105px;
    overflow: hidden;
    background: #dde2ef;
}

.category-post-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.category-post-card:hover .category-post-cover img {
    transform: scale(1.04);
}

.category-post-cover span {
    position: absolute;
    left: 12px;
    top: auto;
    bottom: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(20, 26, 40, .68);
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 800;
}

.category-post-cover .status-tag {
    left: 0px;
    top: 10px;
    bottom: auto;
    border-radius: 8px 999px 999px 8px;
}

.category-post-cover .status-tag.tag-sticky {
    background: linear-gradient(135deg, #ff5f6d, var(--od-primary));
}

.category-post-cover .status-tag.tag-hot {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.category-post-cover .status-tag.tag-new {
    background: linear-gradient(135deg, var(--od-green), #18c7d5);
}

.category-post-body {
    padding: 12px;
}

.category-post-body h3 {
    margin: 0 0 7px;
    font-size: 14px;
    line-height: 1.42;
    font-weight: 800;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.category-post-body p {
    margin: 0;
    color: var(--od-muted);
    font-size: 12px;
    line-height: 1.55;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.category-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    color: #9097a6;
    font-size: 12px;
}

.category-pagination {
    padding: 16px 0 0;
}

.sidebar {
    display: grid;
    gap: 16px;
}

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

.widget-area-before-latest,
.widget-area-after-latest {
    display: grid;
    gap: 16px;
}

.widget {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px solid var(--od-line);
    border-radius: 10px;
    background: var(--od-card);
    box-shadow: 0 12px 30px rgba(33, 40, 66, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.widget:hover {
    border-color: rgba(240, 68, 148, .12);
    box-shadow: 0 18px 40px rgba(33, 40, 66, .09);
}

.widget h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 13px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--od-line);
    color: #2d3543;
    font-size: 16px;
    font-weight: 800;
}

.widget h3 i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    background: var(--od-gradient);
    font-size: 13px;
}

.profile-card {
    text-align: center;
    padding: 0;
}

.profile-card:not(.logged-in) {
    padding: 24px 20px;
}

.avatar {
    width: 70px;
    height: 70px;
    margin: 0 auto 5px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--od-gradient);
    box-shadow: 0 10px 22px rgba(79, 124, 255, .18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.profile-card h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 16px;
}

.profile-card p {
    margin: 0 0 14px;
    color: var(--od-muted);
    line-height: 1.7;
}

.profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.profile-actions a {
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(45, 55, 76, .06);
    font-weight: 700;
    font-size: 13px;
    transition: background .2s ease, transform .15s ease;
}

.profile-actions a:hover {
    background: rgba(45, 55, 76, .1);
    transform: translateY(-1px);
}

.profile-actions a.primary {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 4px 12px rgba(240, 68, 148, .25);
}

.profile-actions a.primary:hover {
    box-shadow: 0 6px 18px rgba(240, 68, 148, .35);
    background: linear-gradient(135deg, #e03a82, #ff6ea8);
}


.profile-actions.icon-only {
    grid-template-columns: repeat(4, 1fr);
    margin: 10px 25px;
    padding: 4px 0;
}

.profile-actions.icon-only a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 auto;
    border-radius: 50%;
}

.profile-actions.icon-only a i {
    font-size: 20px;
    line-height: 1;
}

.profile-actions.icon-only a.primary i {
    filter: brightness(1.1);
}

[data-theme="dark"] .profile-actions.icon-only a {
    background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .profile-actions.icon-only a:hover {
    background: var(--od-surface-2);
}


.profile-card.logged-in .profile-card-head {
    padding: 24px 0 10px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--od-gradient);
}

.profile-card.logged-in .profile-card-head::before {
    content: '';
    position: absolute;
    inset: -30px;
    background-image: var(--bg-url);
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

.profile-card.logged-in .profile-card-head::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .35) 100%);
    z-index: 1;
    pointer-events: none;
}

.profile-card.logged-in .profile-card-head>* {
    position: relative;
    z-index: 2;
}

.profile-card.logged-in .profile-card-head h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    margin-bottom: 6px;
}

.profile-card.logged-in .profile-card-head .vip-label {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    font-size: 11px;
    padding: 2px 10px;
}

.profile-card.logged-in .profile-avatar-wrap {
    position: relative;
    display: inline-block;
    margin: 0 auto 0px;
}

.profile-card.logged-in .profile-avatar-wrap .avatar,
.profile-card.logged-in .profile-avatar-wrap img.avatar {
    width: 70px;
    height: 70px;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 22px rgba(79, 124, 255, .18);
    display: block;
    transition: transform .25s ease;
}

.profile-card.logged-in .profile-avatar-wrap:hover img.avatar {
    transform: scale(1.06);
}


.profile-bio {
    margin: 2px 0 14px;
    color: var(--od-muted);
    font-size: 13px;
    line-height: 1.6;
    padding: 0 8px;
}


.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 14px 0;
    padding: 12px 0;
    border-top: 1px solid var(--od-line);
    border-bottom: 1px solid var(--od-line);
}

.profile-stats-item {
    text-align: center;
    border-right: 1px solid var(--od-line);
    padding: 2px 0;
}

.profile-stats-item:last-child {
    border-right: 0;
}

.profile-stats-item strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--od-primary);
    line-height: 1.3;
}

.profile-stats-item span {
    display: block;
    font-size: 12px;
    color: var(--od-muted);
    margin-top: 2px;
}

.vip-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    line-height: 1.6;
    letter-spacing: .3px;
}

.vip-badge.vip-trial,
.vip-label.vip-trial {
    background: linear-gradient(135deg, #a8a8a8, #666);
}

.vip-badge.vip-month,
.vip-label.vip-month {
    background: linear-gradient(135deg, var(--od-blue), #18c7d5);
}

.vip-label.vip-monthly {
    background: linear-gradient(135deg, #6dd5a0, #38b27a);
}

.vip-badge.vip-quarter,
.vip-label.vip-quarter {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.vip-badge.vip-year,
.vip-label.vip-year {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.vip-badge.vip-lifetime,
.vip-label.vip-lifetime {
    background: var(--od-gradient);
}

.vip-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
    color: #fff;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.vip-label i {
    font-size: 13px;
}

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

.doc-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: var(--od-radius);
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease;
}

.doc-list a:hover {
    background: #fff;
    transform: translateX(3px);
}

.doc-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
}

.doc-list i {
    color: var(--od-blue);
}

.doc-list .doc-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 7px;
    background: #dde2ef;
}

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

.doc-list .doc-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #343b49;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-news-list {
    display: grid;
    gap: 12px;
}

.side-news-item {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    min-height: 68px;
    padding: 8px;
    border-radius: 9px;
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.side-news-item:hover {
    background: #fff;
    transform: translateX(3px);
    box-shadow: 0 10px 22px rgba(33, 40, 66, .06);
}

.side-news-thumb {
    width: 86px;
    height: 64px;
    overflow: hidden;
    border-radius: 7px;
    background: #dde2ef;
}

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

.side-news-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.side-news-body strong {
    color: #343b49;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.side-news-body span {
    margin-top: 6px;
    color: #9097a6;
    font-size: 12px;
}

.rank-list {
    display: grid;
    gap: 10px;
    counter-reset: rank;
}

.rank-item {
    counter-increment: rank;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 10px;
    border-radius: 9px;
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.rank-item:hover {
    background: #fff;
    transform: translateX(3px);
    box-shadow: 0 10px 22px rgba(33, 40, 66, .06);
}

.rank-item::before {
    content: counter(rank);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: rgba(45, 55, 76, .32);
    font-size: 14px;
    font-weight: 800;
}

.rank-item:nth-child(1)::before {
    background: linear-gradient(135deg, var(--od-red), var(--od-primary));
}

.rank-item:nth-child(2)::before {
    background: linear-gradient(135deg, var(--od-yellow), #ffcf70);
}

.rank-item:nth-child(3)::before {
    background: linear-gradient(135deg, var(--od-blue), #76a3ff);
}

.rank-body {
    min-width: 0;
}

.rank-body strong {
    display: -webkit-box;
    overflow: hidden;
    color: #343b49;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rank-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    color: #9097a6;
    font-size: 12px;
}

.category-cards {
    width: min(1200px, calc(100% - 32px));
    margin: -14px auto 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.category-card {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 24px;
    border: 1px solid var(--od-line);
    border-radius: 12px;
    background:
        radial-gradient(circle at 92% 8%, var(--category-glow, rgba(79, 124, 255, .14)), transparent 34%),
        linear-gradient(180deg, #fff, rgba(248, 250, 255, .9));
    box-shadow: 0 14px 34px rgba(33, 40, 66, .07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.category-card::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--category-glow, rgba(79, 124, 255, .12));
}

.category-card:hover {
    transform: translateY(-4px);
    border-color: var(--category-border, rgba(79, 124, 255, .18));
    box-shadow: 0 22px 48px rgba(33, 40, 66, .11);
}

.category-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.category-card-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: var(--category-color, linear-gradient(135deg, var(--od-blue), #75a2ff));
    font-size: 22px;
    box-shadow: 0 12px 24px var(--category-shadow, rgba(79, 124, 255, .2));
}

.category-count {
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--category-text, var(--od-blue));
    background: var(--category-soft, rgba(79, 124, 255, .08));
    font-size: 12px;
    font-weight: 800;
}

.category-card h3,
.category-card p,
.category-card a {
    position: relative;
    z-index: 1;
}

.category-card h3 {
    margin: 0 0 10px;
    color: #252c3a;
    font-size: 21px;
    font-weight: 800;
}

.category-card p {
    margin: 0;
    color: var(--od-muted);
    line-height: 1.75;
}

.category-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    color: var(--category-text, var(--od-blue));
    font-weight: 800;
}

.category-card.color-blue {
    --category-color: linear-gradient(135deg, var(--od-blue), #75a2ff);
    --category-text: var(--od-blue);
    --category-soft: rgba(79, 124, 255, .09);
    --category-glow: rgba(79, 124, 255, .14);
    --category-border: rgba(79, 124, 255, .18);
    --category-shadow: rgba(79, 124, 255, .22);
}

.category-card.color-pink {
    --category-color: var(--od-gradient);
    --category-text: var(--od-primary);
    --category-soft: rgba(240, 68, 148, .09);
    --category-glow: rgba(240, 68, 148, .14);
    --category-border: rgba(240, 68, 148, .18);
    --category-shadow: rgba(240, 68, 148, .22);
}

.category-card.color-green {
    --category-color: linear-gradient(135deg, var(--od-green), #65dba3);
    --category-text: #1e9c63;
    --category-soft: rgba(53, 201, 135, .09);
    --category-glow: rgba(53, 201, 135, .14);
    --category-border: rgba(53, 201, 135, .18);
    --category-shadow: rgba(53, 201, 135, .22);
}

.sidebar-swiper {
    position: relative;
    width: 100%;
    height: 176px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(135deg, #eef3ff, #d9e4f4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.sidebar-swiper .swiper-wrapper,
.sidebar-swiper .swiper-slide {
    width: 100%;
    height: 176px !important;
}

.sidebar-swiper .swiper-wrapper {
    align-items: stretch;
}

.sidebar-swiper .swiper-slide {
    position: relative;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    background: #dfe7f3;
}

.sidebar-slide {
    position: relative;
    display: block !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #fff;
    border-radius: inherit;
    background: #dfe7f3;
    transform: translateZ(0);
}

.sidebar-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 34%, rgba(18, 25, 42, .72));
    pointer-events: none;
}

.sidebar-slide img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 176px;
    display: block !important;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    visibility: visible;
    transition: transform .35s ease;
}

.sidebar-slide:hover img {
    transform: scale(1.045);
}

.sidebar-slide span {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 16px;
    z-index: 2;
    overflow: hidden;
    color: #fff;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-swiper-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease, background .25s ease, transform .25s ease;
}

.sidebar-swiper:hover .sidebar-swiper-arrow {
    opacity: 1;
    visibility: visible;
}

.sidebar-swiper-arrow.prev {
    left: 10px;
}

.sidebar-swiper-arrow.next {
    right: 10px;
}

.sidebar-swiper-arrow:hover {
    color: #fff;
    background: rgba(255, 255, 255, .26);
    transform: translateY(-50%) scale(1.04);
}

.sidebar-swiper-arrow:focus {
    outline: none;
}

.sidebar-swiper-arrow i {
    font-size: 20px;
    line-height: 1;
}

.sidebar-swiper .swiper-pagination {
    left: 50%;
    bottom: 24px;
    width: auto;
    opacity: 1;
    text-align: center;
    z-index: 4;
}

.sidebar-swiper .swiper-pagination-bullet {
    width: 28px;
    height: 7px;
    margin: 0 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    opacity: .58;
    transition: width .25s ease, opacity .25s ease, background .25s ease;
}

.sidebar-swiper .swiper-pagination-bullet-active {
    width: 44px;
    height: 8px;
    opacity: 1;
    background: #fff;
}

.text-rank-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.text-rank-tabs button {
    height: 32px;
    border: 0;
    border-radius: 999px;
    color: #667085;
    background: rgba(45, 55, 76, .06);
    font-weight: 800;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.text-rank-tabs button:hover {
    color: var(--od-primary);
    transform: translateY(-1px);
}

.text-rank-tabs button.active {
    color: #fff;
    background: var(--od-gradient);
}

.text-rank-panel {
    display: none;
}

.text-rank-panel.active {
    display: grid;
    gap: 8px;
}

.text-rank-panel a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.text-rank-panel a:hover {
    background: #fff;
    transform: translateX(3px);
    box-shadow: 0 10px 22px rgba(33, 40, 66, .06);
}

.text-rank-panel a span {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #fff;
    background: rgba(45, 55, 76, .32);
    font-size: 12px;
    font-weight: 800;
}

.text-rank-panel a:nth-child(1) span {
    background: linear-gradient(135deg, #ff5f6d, var(--od-primary));
}

.text-rank-panel a:nth-child(2) span {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.text-rank-panel a:nth-child(3) span {
    background: linear-gradient(135deg, var(--od-blue), #75a2ff);
}

.text-rank-panel strong {
    min-width: 0;
    overflow: hidden;
    color: #343b49;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.friend-links a {
    padding: 8px 11px;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 800;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.friend-links a:hover {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .08);
    transform: translateY(-1px);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tag-cloud a {
    padding: 7px 11px;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 700;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.tag-cloud a:hover {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .08);
    transform: translateY(-1px);
}

.notice {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(240, 68, 148, .94), rgba(255, 184, 77, .9)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=900&q=78") center/cover;
}

.notice p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .86);
    line-height: 1.7;
}

.notice a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    font-weight: 800;
}

.feature-band {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.feature-item {
    padding: 22px;
    border: 1px solid var(--od-line);
    border-radius: var(--od-radius);
    background: var(--od-card);
    box-shadow: var(--od-shadow);
}

.feature-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--od-blue), #75a2ff);
}

.feature-item:nth-child(2) .feature-icon {
    background: var(--od-gradient);
}

.feature-item:nth-child(3) .feature-icon {
    background: linear-gradient(135deg, var(--od-green), #65dba3);
}

.feature-item:nth-child(4) .feature-icon {
    background: linear-gradient(135deg, var(--od-yellow), #ffd16f);
}

.feature-item h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
}

.feature-item p {
    margin: 0;
    color: var(--od-muted);
    line-height: 1.7;
}

.site-footer {
    margin-top: 8px;
    padding: 34px 16px 22px;
    border-top: 1px solid var(--od-line);
    color: var(--od-muted);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(246, 247, 251, .96)),
        radial-gradient(circle at 10% 0, rgba(240, 68, 148, .08), transparent 28%);
}

.site-footer strong,
.site-footer h3 {
    color: var(--od-text);
}

.footer-inner {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 1.5fr;
    gap: 44px;
    align-items: start;
}

.footer-brand p {
    max-width: 380px;
    margin: 14px 0 0;
    line-height: 1.75;
}

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

.footer-links h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
}

.footer-links ul.menu,
.footer-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li {
    margin: 0;
}

.footer-links a {
    display: inline-block;
    padding: 4px 0;
    color: var(--od-muted);
    font-size: 13.5px;
    line-height: 1.6;
    transition: color .2s, padding-left .2s;
}

.footer-links a:hover {
    padding-left: 4px;
    color: var(--od-primary);
}

.footer-contact-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--od-muted);
    font-size: 13px;
    line-height: 1.5;
}

.contact-item i {
    width: 16px;
    text-align: center;
    color: var(--od-primary);
    font-size: 14px;
    flex-shrink: 0;
}

.contact-item span {
    word-break: break-all;
}

.contact-hours span {
    word-break: keep-all;
}

.footer-bottom {
    width: min(1200px, calc(100% - 32px));
    margin: 26px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--od-line);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #9aa1ad;
    font-size: 13px;
}

.footer-bottom-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 18px;
    row-gap: 4px;
}

.footer-bottom-left a {
    color: #9aa1ad;
    text-decoration: none;
    transition: color .2s;
}

.footer-bottom-left a:hover {
    color: var(--od-primary);
}

.notice-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.notice-modal.is-show {
    opacity: 1;
    visibility: visible;
}

.notice-mask {
    position: absolute;
    inset: 0;
    background: rgba(22, 28, 42, .52);
    backdrop-filter: blur(8px);
}

.notice-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background:
        radial-gradient(circle at 95% 0, rgba(240, 68, 148, .14), transparent 35%),
        linear-gradient(180deg, #fff, #f8faff);
    box-shadow: 0 28px 70px rgba(18, 25, 42, .24);
    transform: translateY(14px) scale(.98);
    transition: transform .25s ease;
}

.notice-modal.is-show .notice-dialog {
    transform: translateY(0) scale(1);
}

.notice-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #7d8491;
    background: rgba(45, 55, 76, .06);
}

.notice-dialog-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 28px 18px;
}

.notice-dialog-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 14px 28px rgba(240, 68, 148, .22);
    font-size: 22px;
}

.notice-dialog-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--od-primary);
    font-size: 12px;
    font-weight: 800;
}

.notice-dialog h2 {
    margin: 0;
    padding-right: 34px;
    color: #252c3a;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
}

.notice-dialog-body {
    padding: 0 28px 22px;
}

.notice-dialog-body p {
    margin: 0 0 14px;
    color: var(--od-muted);
    line-height: 1.75;
}

.notice-dialog-body ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.notice-dialog-body li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4d5564;
}

.notice-dialog-body li i {
    color: var(--od-green);
}

.notice-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 24px;
    border-top: 1px solid var(--od-line);
}

.notice-dialog-actions button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
}

.notice-secondary {
    color: #697181;
    background: rgba(45, 55, 76, .07);
}

.notice-primary {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 12px 24px rgba(240, 68, 148, .2);
}

.vip-pay-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.vip-pay-modal.is-show {
    opacity: 1;
    visibility: visible;
}

.vip-pay-mask {
    position: absolute;
    inset: 0;
    background: rgba(22, 28, 42, .58);
    backdrop-filter: blur(8px);
}

.vip-pay-dialog {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background:
        radial-gradient(circle at 95% 0, rgba(240, 68, 148, .14), transparent 36%),
        linear-gradient(180deg, #fff, #f8faff);
    box-shadow: 0 28px 70px rgba(18, 25, 42, .24);
    transform: translateY(14px) scale(.98);
    transition: transform .25s ease;
}

.vip-pay-modal.is-show .vip-pay-dialog {
    transform: translateY(0) scale(1);
}

.vip-pay-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #7d8491;
    background: rgba(45, 55, 76, .06);
}

.vip-pay-head {
    display: flex;
    gap: 14px;
    padding: 28px 28px 18px;
}

.vip-pay-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 14px 28px rgba(240, 68, 148, .22);
    font-size: 22px;
}

.vip-pay-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--od-primary);
    font-size: 12px;
    font-weight: 800;
}

.vip-pay-head h2 {
    margin: 0;
    padding-right: 36px;
    color: #252c3a;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
}

.vip-pay-head p {
    margin: 8px 0 0;
    color: var(--od-muted);
    line-height: 1.7;
}

.vip-pay-body {
    display: grid;
    gap: 18px;
    padding: 0 28px 22px;
}

.vip-pay-block h3 {
    margin: 0 0 10px;
    color: #252c3a;
    font-size: 16px;
    font-weight: 800;
}

.vip-plan-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vip-plan-option,
.vip-method-option {
    border: 1px solid var(--od-line);
    border-radius: 10px;
    background: #fff;
    color: #4d5564;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vip-plan-option {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 14px;
    text-align: left;
}

.vip-plan-option strong,
.vip-plan-option small,
.vip-plan-option em {
    display: block;
}

.vip-plan-option strong {
    color: #252c3a;
    font-weight: 800;
}

.vip-plan-option small {
    margin-top: 6px;
    color: var(--od-muted);
    font-size: 12px;
    line-height: 1.55;
}

.vip-plan-option em {
    color: var(--od-primary);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
}

.vip-plan-option em small {
    display: inline;
    margin: 0 0 0 2px;
}

.vip-method-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vip-method-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 800;
}

.vip-plan-option.current-plan {
    border-color: var(--od-primary);
    box-shadow: 0 10px 24px rgba(240, 68, 148, .12);
    transform: translateY(-1px);
    position: relative;
}

.vip-plan-option.disabled-plan {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.vip-plan-option.disabled-plan strong {
    color: var(--od-muted);
}

.plan-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 3px 10px;
    border-radius: 0 10px 0 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
}

.current-badge {
    color: #fff;
    background: var(--od-gradient);
}

.plan-btn-text {
    display: block;
    margin-top: 8px;
    color: var(--od-muted);
    font-size: 12px;
    font-weight: 700;
}

.current-plan .plan-btn-text {
    color: var(--od-primary);
}

.vip-plan-option.active,
.vip-method-option.active {
    border-color: rgba(240, 68, 148, .46);
    box-shadow: 0 10px 24px rgba(240, 68, 148, .12);
    transform: translateY(-1px);
}

.vip-method-option.active i {
    color: var(--od-primary);
}

.vip-order-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .05);
}

.vip-order-box div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--od-muted);
    font-weight: 700;
}

.vip-order-box strong {
    color: #252c3a;
}

.vip-order-total {
    padding-top: 10px;
    border-top: 1px solid var(--od-line);
}

.vip-order-total strong {
    color: var(--od-primary);
    font-size: 24px;
}

.vip-order-total em {
    font-style: normal;
}

.vip-pay-status {
    min-height: 22px;
    margin: 0;
    color: var(--od-primary);
    font-weight: 800;
}

.vip-pay-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 24px;
    border-top: 1px solid var(--od-line);
}

.vip-pay-actions button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
}

.vip-pay-secondary {
    color: #697181;
    background: rgba(45, 55, 76, .07);
}

.vip-pay-primary {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 12px 24px rgba(240, 68, 148, .2);
}

.vip-pay-primary:disabled {
    opacity: .72;
    cursor: wait;
}

.vip-toast {
    position: fixed;
    right: 24px;
    top: 86px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--od-green), #21c98f);
    box-shadow: 0 16px 36px rgba(18, 25, 42, .18);
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
}

.vip-toast.is-show {
    opacity: 1;
    transform: translateY(0);
}

.page-hero,
.member-hero {
    width: min(1200px, calc(100% - 32px));
    margin: 22px auto;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(31, 38, 62, .08);
}

.page-hero {
    min-height: 300px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: end;
    padding: 34px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(20, 28, 48, .86), rgba(79, 124, 255, .48)),
        url("https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=82") center/cover;
}

.breadcrumb-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 800;
}

.article-card .breadcrumb-line {
    color: var(--od-muted);
}

.page-breadcrumb {
    width: min(1200px, calc(100% - 32px));
    margin: 22px auto -8px;
    color: var(--od-muted);
}

.breadcrumb-line a:hover {
    color: var(--od-primary);
}

.page-hero h1,
.member-hero h1 {
    margin: 0;
    font-size: 42px;
    line-height: 1.16;
    font-weight: 800;
}

.page-hero p,
.member-hero p {
    max-width: 620px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .84);
    font-size: 16px;
    line-height: 1.8;
}

.page-hero-actions,
.member-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.page-hero-actions a,
.member-hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
}

.page-hero-actions .primary,
.member-hero-actions .primary {
    background: var(--od-gradient);
    box-shadow: 0 12px 24px rgba(240, 68, 148, .24);
}

.page-hero-actions .ghost,
.member-hero-actions .ghost {
    border: 1px solid rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
}

.page-hero-stats {
    display: grid;
    gap: 12px;
}

.page-hero-stats span {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, .82);
    font-weight: 800;
}

.page-hero-stats strong {
    color: #fff;
    font-size: 28px;
}

.category-filter {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 22px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 14px;
    border: 1px solid var(--od-line);
    border-radius: 12px;
    background: var(--od-card);
    box-shadow: var(--od-shadow);
}

.category-filter a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 999px;
    color: #5d6676;
    background: rgba(45, 55, 76, .06);
    font-weight: 800;
    white-space: nowrap;
}

.category-filter a.active,
.category-filter a:hover {
    color: #fff;
    background: var(--od-gradient);
}

.section-more {
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 800;
}

.detail-shell {
    margin-top: 22px;
}

.article-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--od-line);
    border-radius: 12px;
    background: var(--od-card);
    box-shadow: var(--od-shadow);
}

.article-head {
    padding-bottom: 18px;
}

.article-category,
.member-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
    font-size: 12px;
    font-weight: 800;
}

.article-head h1 {
    margin: 0;
    color: #252c3a;
    font-size: 34px;
    line-height: 1.32;
    font-weight: 800;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 16px;
    color: #9097a6;
    font-size: 13px;
}

.article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.article-cover {
    overflow: hidden;
    height: 360px;
    border-radius: 12px;
    background: #dde2ef;
}

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

.article-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    margin: 22px 0;
    padding: 16px;
    border-radius: 10px;
    color: #566074;
    background: rgba(79, 124, 255, .08);
}

.article-summary i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--od-blue), #75a2ff);
}

.article-summary p {
    margin: 0;
    line-height: 1.75;
}

.article-content {
    color: #3f4756;
    font-size: 15px;
    line-height: 1.9;
}

.article-content h2 {
    scroll-margin-top: 90px;
    margin: 28px 0 12px;
    color: #252c3a;
    font-size: 23px;
    font-weight: 800;
}

.article-content p {
    margin: 0 0 14px;
}

.article-content ul {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    padding-left: 20px;
}


.article-content a {
    color: var(--od-primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
    padding: 0 1px;
}

.article-content a:hover {
    color: #d02e78;
    border-bottom-color: currentColor;
}

.article-content a:active {
    opacity: .75;
}

.article-content a:visited {
    color: #b82d6a;
}


.article-content a[href^="http"]::after {
    content: "\f08e";
    font-family: "FontAwesome";
    font-size: 11px;
    font-weight: 400;
    display: inline-block;
    margin-left: 3px;
    opacity: .5;
    vertical-align: super;
    transition: opacity .2s;
}

.article-content a[href^="http"]:hover::after {
    opacity: .85;
}


.article-content a[href^="/"] {
    color: var(--od-blue);
}

.article-content a[href^="/"]:hover {
    color: #3468e0;
    border-bottom-color: currentColor;
}


.article-content a[href*="golink="],
.article-content a[href*="go.php"] {
    color: var(--od-primary);
    border-bottom: 1px dashed rgba(240, 68, 148, .35);
}

.article-content a[href*="golink="]::after,
.article-content a[href*="go.php"]::after {
    display: none;
}

.article-content a[href*="golink="]:hover,
.article-content a[href*="go.php"]:hover {
    border-bottom-color: var(--od-primary);
}


.article-content a[href^="http"] {
    word-break: break-all;
}

.onedown-pay-box.order-type-2 .pay-vip-price:hover {
    color: #fbbf24;
    border-bottom-color: rgba(251, 191, 36, .15);
}

.onedown-pay-box.order-type-2 .pay-vip-price::after {
    content: '';
}

.paid-resource-card {
    scroll-margin-top: 90px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 18px;
    align-items: stretch;
    margin: 28px 0;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(240, 68, 148, .14);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 247, 251, .94)),
        var(--od-card);
    box-shadow: 0 18px 42px rgba(33, 40, 66, .08);
}

.paid-resource-main h2 {
    margin-top: 0;
}

.paid-resource-main p {
    color: var(--od-muted);
}

.paid-resource-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.paid-resource-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-size: 13px;
    font-weight: 800;
}

.paid-resource-meta i {
    color: var(--od-primary);
}

.paid-resource-buy {
    display: grid;
    gap: 10px;
    align-content: center;
    justify-items: stretch;
    padding: 18px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(240, 68, 148, .1), rgba(79, 124, 255, .08)),
        #fff;
}

.paid-resource-buy span {
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 800;
}

.paid-resource-buy strong {
    color: var(--od-primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

.paid-resource-buy small {
    font-size: 15px;
}

.paid-resource-buy button,
.paid-resource-buy a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}

.paid-resource-buy button {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 12px 24px rgba(240, 68, 148, .2);
}

.paid-resource-buy a {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
}

.paid-content-lock,
.paid-content-unlocked {
    margin: 22px 0;
    padding: 18px;
    border-radius: 12px;
}

.paid-content-lock {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px dashed rgba(240, 68, 148, .34);
    background: rgba(240, 68, 148, .06);
}

.paid-content-lock>span {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: var(--od-gradient);
    font-size: 20px;
}

.paid-content-lock h3,
.paid-content-unlocked h3 {
    margin: 0 0 6px;
    color: #252c3a;
    font-size: 18px;
    font-weight: 800;
}

.paid-content-lock p {
    margin: 0;
    color: var(--od-muted);
}

.paid-content-unlocked {
    border: 1px solid rgba(53, 201, 135, .22);
    background: rgba(53, 201, 135, .08);
}

.paid-content-unlocked h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paid-content-unlocked h3 i {
    color: var(--od-green);
}

.resource-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 26px 0;
    padding: 20px;
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(240, 68, 148, .96), rgba(255, 184, 77, .86)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=900&q=78") center/cover;
}

.resource-kicker {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 800;
}

.resource-box h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
}

.resource-box p {
    margin: 0;
    color: rgba(255, 255, 255, .84);
}

.resource-box a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    font-weight: 800;
    white-space: nowrap;
}

.article-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--od-line);
}

.article-tags,
.article-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.article-tags a,
.article-actions button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-weight: 800;
}

.article-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.article-actions button.active,
.article-actions button.fav-btn.active {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .12);
}

.article-actions button.active i,
.article-actions button.fav-btn.active i {
    color: var(--od-primary);
}

.article-neighbor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.article-neighbor-item {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--od-line);
    border-radius: 10px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.article-neighbor-item:hover {
    border-color: rgba(240, 68, 148, .2);
    box-shadow: 0 14px 30px rgba(33, 40, 66, .08);
    transform: translateY(-2px);
}

.article-neighbor-item span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--od-primary);
    font-size: 12px;
    font-weight: 800;
}

.article-neighbor-item strong {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 9px;
    color: #252c3a;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 800;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article-neighbor-item em {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 7px;
    color: var(--od-muted);
    font-size: 13px;
    line-height: 1.65;
    font-style: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article-neighbor-item.next {
    text-align: right;
}

.article-related {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--od-line);
}

.article-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.article-related-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #252c3a;
    font-size: 20px;
    font-weight: 800;
}

.article-related-head h2 i {
    color: var(--od-primary);
}

.article-related-head a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.article-related-head a:hover {
    color: var(--od-primary);
}

.article-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.related-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--od-line);
    border-radius: 10px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.related-card:hover {
    border-color: rgba(240, 68, 148, .2);
    box-shadow: 0 14px 30px rgba(33, 40, 66, .08);
    transform: translateY(-2px);
}

.related-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    object-fit: cover;
    background: #dde2ef;
}

.related-card span {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
    font-size: 12px;
    font-weight: 800;
}

.related-card strong {
    display: -webkit-box;
    overflow: hidden;
    color: #252c3a;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 800;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.related-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--od-muted);
    line-height: 1.7;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.related-card em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9097a6;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.author-card,
.comment-card {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--od-line);
    border-radius: 10px;
    background: #fff;
}

.author-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.author-avatar,
.comment-avatar {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--od-gradient);
    font-weight: 800;
}

.author-card h3,
.comment-card h2 {
    margin: 0 0 6px;
    color: #252c3a;
    font-weight: 800;
}

.comment-list {
    margin-top: 20px;
}

.author-card p {
    margin: 0;
    color: var(--od-muted);
    line-height: 1.65;
}

.author-card a {
    padding: 8px 13px;
    border-radius: 999px;
    color: #fff;
    background: var(--od-gradient);
    font-weight: 800;
    white-space: nowrap;
}

.comment-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
}

.comment-login-tip {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 20px 24px;
    border: 1px dashed var(--od-line);
    border-radius: 10px;
    background: #f8f9fb;
}

.comment-login-tip-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--od-gradient);
    font-size: 18px;
}

.comment-login-tip-text {
    flex: 1;
    min-width: 0;
}

.comment-login-tip-text strong {
    display: block;
    color: #252c3a;
    font-size: 14px;
}

.comment-login-tip-text p {
    margin: 2px 0 0;
    color: var(--od-muted);
    font-size: 12px;
    line-height: 1.5;
}

.comment-login-tip-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.comment-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #4d5564;
    background: rgba(40, 46, 60, .06);
    transition: all .22s ease;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    white-space: nowrap;
}

.comment-login-btn:hover {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .1);
    text-decoration: none;
}

.comment-login-btn.primary {
    color: #fff;
    background: var(--od-primary);
}

.comment-login-btn.primary:hover {
    opacity: .88;
}

.comment-pending-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #e67e22;
    background: #fef9e7;
    border: 1px solid #fdebd0;
    transition: opacity .4s ease, transform .4s ease;
}

.comment-pending-tip.is-hide {
    opacity: 0;
    transform: translateY(-10px);
}

.comment-form textarea {
    resize: vertical;
    min-height: 90px;
}

.comment-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--od-line);
}

.comment-avatar {
    align-items: unset;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--od-blue), #18c7d5);
}

.comment-avatar .avatar {
    width: 42px;
    height: 42px;
    display: block;
    border-radius: 50%;
}

.comment-item strong {
    display: block;
    margin-bottom: 5px;
}

.comment-item p {
    margin: 0;
    color: var(--od-muted);
    line-height: 1.65;
}


.comment-item .comment-body {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.comment-item .comment-body>strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-size: 14px;
    max-width: 100%;
}

.comment-item .comment-body>strong a {
    color: #252c3a;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-item .comment-body>strong a:hover {
    color: var(--od-primary);
}


.comment-item .comment-item {
    border-top: 0;
    padding: 10px 0;
}

.comment-item .comment-item:last-child {
    padding-bottom: 0;
}

.comment-item .comment-item .comment-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

.comment-item .comment-item .comment-avatar .avatar {
    width: 34px;
    height: 34px;
}

.comment-item .comment-item .comment-body>strong {
    font-size: 13px;
}

.comment-item .comment-item .comment-text {
    font-size: 13px;
}

.comment-children {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--od-line);
    box-sizing: border-box;
    grid-column: 2;
}

.comment-children .comment-children {
    border-left-color: rgba(40, 46, 60, .05);
    margin-top: 8px;
    padding-left: 8px;
}

.comment-children .comment-children .comment-children {
    display: none;
}

.comment-children .comment-body {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.comment-children .comment-text {
    overflow-wrap: break-word;
    word-break: break-word;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    color: var(--od-muted);
    font-size: 12px;
    font-weight: 600;
}

.comment-floor {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: rgba(45, 55, 76, .06);
    font-size: 11px;
    font-weight: 800;
}

.comment-text {
    margin: 6px 0 8px;
    color: var(--od-text);
    line-height: 1.7;
    font-size: 14px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.comment-text p {
    margin: 0 0 8px;
}

.comment-text p:last-child {
    margin-bottom: 0;
}

.comment-awaiting {
    display: block;
    margin: 4px 0;
    color: var(--od-yellow);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.comment-reply {
    margin-top: 6px;
}

.comment-reply a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--od-muted);
    font-size: 12px;
    font-weight: 800;
    transition: color .2s ease;
}

.comment-reply a:hover {
    color: var(--od-primary);
}


.comment-count {
    color: var(--od-muted);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}


.comment-respond {
    margin: 0;
    padding: 0;
    background: none;
}

#reply-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 900;
    color: #252c3a;
}

#cancel-comment-reply-link {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--od-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

#cancel-comment-reply-link:hover {
    color: var(--od-red);
}

.logged-in-as,
.must-log-in,
.comment-notes {
    margin: 0 0 12px;
    padding: 0;
    font-size: 13px;
    color: var(--od-muted);
}

.logged-in-as a {
    color: var(--od-primary);
    font-weight: 700;
    text-decoration: none;
}

.form-submit {
    margin: 0;
    padding: 0;
}

.comment-form .form-submit {
    margin-top: 4px;
}


.comment-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--od-line);
}

.comment-navigation a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--od-primary);
    font-weight: 800;
    font-size: 13px;
}


.comment-form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--od-line);
}

.comment-form .comment-respond {
    margin-top: 0;
}

#reply-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    color: #252c3a;
    font-size: 16px;
    font-weight: 800;
}

#reply-title i {
    color: var(--od-primary);
}

#cancel-comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--od-muted);
    font-size: 12px;
    font-weight: 700;
}

#cancel-comment-reply-link:hover {
    color: var(--od-red);
}

.comment-form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.comment-form-field input,
.comment-form-field textarea {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--od-line);
    border-radius: 10px;
    background: #fff;
    color: #303746;
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.comment-form-field input:focus,
.comment-form-field textarea:focus {
    outline: none;
    border-color: rgba(240, 68, 148, .38);
    box-shadow: 0 0 0 4px rgba(240, 68, 148, .1);
}

.comment-form-field input::placeholder,
.comment-form-field textarea::placeholder {
    color: #9aa1ad;
}

.comment-form-textarea {
    grid-column: 1 / -1;
}

.comment-form-textarea textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.65;
}

.comment-form-logged-in {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .04);
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 600;
}

.comment-form-logged-in i {
    color: var(--od-primary);
}

.comment-form-logged-in a {
    font-weight: 800;
    color: var(--od-primary);
}

.comment-form-logged-in a:hover {
    text-decoration: underline;
}

.comment-form .form-submit {
    margin: 0;
}

.comment-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--od-gradient);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.comment-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(240, 68, 148, .28);
}

.comment-submit:active {
    transform: translateY(0);
}


.comment-avatar .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.article-toc a {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--od-line);
    color: #5d6676;
    font-weight: 800;
    transition: color .2s ease, padding-left .2s ease;
}

.article-toc a:last-child {
    border-bottom: 0;
}

.article-toc a:hover,
.article-toc a.active {
    padding-left: 8px;
    color: var(--od-primary);
}

.detail-buy-card {
    display: grid;
    gap: 10px;
    border-color: rgba(240, 68, 148, .16);
    background:
        linear-gradient(180deg, rgba(255, 247, 251, .96), rgba(255, 255, 255, .96)),
        var(--od-card);
}

.detail-buy-card h3 {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 18px;
}

.detail-buy-card p {
    margin: 0;
    color: var(--od-muted);
    line-height: 1.65;
}

.detail-buy-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: start;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
    font-size: 12px;
    font-weight: 800;
}

.detail-buy-price {
    color: var(--od-primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

.detail-buy-price small {
    font-size: 15px;
}

.detail-buy-card button,
.detail-buy-card>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
}

.detail-buy-card button {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 12px 24px rgba(240, 68, 148, .18);
}

.detail-buy-card>a {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
}

.detail-buy-card.is-paid {
    border-color: rgba(53, 201, 135, .22);
    background:
        linear-gradient(180deg, rgba(246, 255, 250, .96), rgba(255, 255, 255, .96)),
        var(--od-card);
}

.detail-buy-card.is-paid .detail-buy-badge,
.detail-buy-card.is-paid .detail-buy-price {
    color: var(--od-green);
}

.article-pay-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .05);
}

.article-pay-summary strong {
    color: #252c3a;
    line-height: 1.45;
}

.article-pay-summary span {
    color: var(--od-primary);
    font-size: 24px;
    font-weight: 900;
    white-space: nowrap;
}

.member-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 26px;
    align-items: center;
    padding: 36px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(23, 29, 48, .9), rgba(240, 68, 148, .5)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1400&q=82") center/cover;
}

.member-account {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px);
}

.member-avatar {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    background: var(--od-gradient);
    font-size: 24px;
}

.member-account h2 {
    margin: 16px 0 8px;
    font-size: 24px;
    font-weight: 800;
}

.member-account p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
}

.member-account-grid {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.member-account-grid span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .78);
    font-weight: 800;
}

.member-account-grid strong {
    color: #fff;
}

.member-account>a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 999px;
    color: #fff;
    background: var(--od-gradient);
    font-weight: 800;
}

.member-benefits,
.pricing-section,
.member-dashboard {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto 22px;
}

.member-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.member-benefits article,
.pricing-card {
    padding: 22px;
    border: 1px solid var(--od-line);
    border-radius: 12px;
    background: var(--od-card);
    box-shadow: var(--od-shadow);
}

.member-benefits span {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--od-blue), #18c7d5);
    font-size: 20px;
}

.member-benefits article:nth-child(2) span {
    background: var(--od-gradient);
}

.member-benefits article:nth-child(3) span {
    background: linear-gradient(135deg, var(--od-green), #65dba3);
}

.member-benefits article:nth-child(4) span {
    background: linear-gradient(135deg, var(--od-yellow), #ffd16f);
}

.member-benefits h3,
.pricing-head h2 {
    margin: 0 0 8px;
    color: #252c3a;
    font-weight: 800;
}

.member-benefits p,
.pricing-head p {
    margin: 0;
    color: var(--od-muted);
    line-height: 1.7;
}

.pricing-section {
    padding: 22px;
    border: 1px solid var(--od-line);
    border-radius: 12px;
    background: var(--od-card);
    box-shadow: var(--od-shadow);
}

.pricing-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.pricing-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
}

.pricing-head h2 i {
    color: var(--od-primary);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pricing-card {
    position: relative;
    overflow: hidden;
}

.pricing-card.featured {
    color: #fff;
    background:
        linear-gradient(135deg, rgba(240, 68, 148, .95), rgba(79, 124, 255, .82)),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80") center/cover;
}

.recommend {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--od-primary);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.plan-name {
    color: var(--od-primary);
    font-weight: 800;
}

.featured .plan-name,
.featured p,
.featured li {
    color: rgba(255, 255, 255, .86);
}

.plan-price {
    margin: 14px 0 10px;
    color: #252c3a;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
}

.featured .plan-price {
    color: #fff;
}

.plan-price small {
    font-size: 20px;
}

.plan-price span {
    color: var(--od-muted);
    font-size: 14px;
}

.featured .plan-price span {
    color: rgba(255, 255, 255, .76);
}

.pricing-card p {
    color: var(--od-muted);
    line-height: 1.7;
}

.pricing-card ul {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.pricing-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #566074;
    font-weight: 800;
}

.pricing-card li i {
    color: var(--od-green);
}

.featured li i {
    color: #fff;
}

.pricing-card>a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 999px;
    color: #fff;
    background: var(--od-gradient);
    font-weight: 800;
}

.featured>a {
    color: var(--od-primary);
    background: #fff;
}

.member-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    gap: 18px;
}

.member-dashboard-single {
    grid-template-columns: 1fr;
}

.order-list,
.faq-list {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.order-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
    transition: background .2s, box-shadow .2s, transform .15s;
    cursor: default;
}

.order-item:hover {
    background: rgba(45, 55, 76, .07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transform: translateY(-1px);
}

.order-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    flex-shrink: 0;
    transition: transform .2s;
}

.order-item:hover .order-icon {
    transform: scale(1.08);
}


.order-icon--vip {
    background: linear-gradient(135deg, #f04494, #ff7eb2);
}

.order-icon--post {
    background: linear-gradient(135deg, #4f7cff, #6b9bff);
}

.order-icon--recharge {
    background: linear-gradient(135deg, #35c987, #65dba3);
}

.order-icon--fav,
.download-item .order-icon--fav {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px !important;
    color: #fff;
    background: var(--od-gradient);
}


.order-info {
    min-width: 0;
    overflow: hidden;
}

.order-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #252c3a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-meta {
    display: block;
    margin-top: 3px;
    color: var(--od-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-meta-divider {
    margin: 0 5px;
    opacity: .4;
}


.order-status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.order-status--pending {
    color: #e69138;
    background: rgba(230, 145, 56, .1);
}

.order-status--paid {
    color: #35c987;
    background: rgba(53, 201, 135, .1);
}

.order-status--closed {
    color: var(--od-muted);
    background: rgba(122, 129, 144, .1);
}

.order-status--refunded {
    color: var(--od-red);
    background: rgba(255, 95, 109, .1);
}

.faq-list details {
    padding: 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}

.faq-list summary {
    cursor: pointer;
    color: #343b49;
    font-weight: 800;
}

.faq-list p {
    margin: 10px 0 0;
    color: var(--od-muted);
    line-height: 1.7;
}

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

    .hero-panel,
    .hero-swiper,
    .hero-swiper .swiper-wrapper,
    .hero-swiper .swiper-slide,
    .hero-slide {
        min-height: 430px;
        height: 430px;
    }

    .content-shell {
        grid-template-columns: 1fr;
    }

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

    .notice {
        grid-column: 1 / -1;
    }

    .search-panel {
        grid-template-columns: 1fr;
    }

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

    .category-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dynamic-viewport {
        height: 220px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .page-hero,
    .member-hero,
    .member-dashboard {
        grid-template-columns: 1fr;
    }

    .member-benefits,
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .nav-shell {
        height: auto;
        min-height: 58px;
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .menu-btn {
        display: inline-flex;
    }

    .main-nav {
        order: 9;
        width: 100%;
        display: none;
        padding: 4px 0 2px;
        overflow-x: auto;
    }

    .main-nav.is-open {
        display: flex;
    }

    .nav-item {
        flex: 0 0 auto;
    }

    .nav-dropdown {
        position: static;
        min-width: 150px;
        margin-top: 6px;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(45, 55, 76, .045);
    }

    .nav-dropdown::before {
        display: none;
    }

    .nav-actions {
        margin-left: auto;
    }

    .nav-user-menu {
        right: 0;
    }

    .stat-row,
    .feature-band {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-hero {
        grid-template-columns: 1fr;
    }

    .category-cards {
        grid-template-columns: 1fr;
    }

    .search-form {
        border-radius: 12px;
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .search-form button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 680px) {

    .nav-shell,
    .owl-dynamic,
    .hero,
    .stat-row,
    .search-bg,
    .division,
    .dynamic,
    .content-shell,
    .category-cards,
    .footer-inner,
    .footer-bottom,
    .feature-band {
        width: min(100% - 24px, 1200px);
    }

    .page-hero,
    .member-hero,
    .page-breadcrumb,
    .category-filter,
    .member-benefits,
    .pricing-section,
    .member-dashboard {
        width: min(100% - 24px, 1200px);
    }

    .brand {
        min-width: auto;
    }

    .brand-name span,
    .nav-user-text {
        display: none;
    }

    .nav-avatar {
        width: 38px;
        min-height: 38px;
        padding: 2px;
    }

    .nav-avatar>i {
        display: none;
    }

    .nav-user-menu {
        width: min(238px, calc(100vw - 24px));
    }

    .owl-dynamic {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 0 12px;
    }

    .owl-dynamic-more {
        display: none;
    }

    .hero-panel,
    .hero-swiper,
    .hero-swiper .swiper-wrapper,
    .hero-swiper .swiper-slide,
    .hero-slide {
        min-height: 460px;
        height: 460px !important;
    }

    .hero-slide {
        align-items: flex-end;
        padding: 28px 22px 64px;
    }

    .hero-swiper .swiper-pagination {
        left: 22px;
        bottom: 20px;
    }

    .hero-arrow {
        display: none;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 14px;
        line-height: 1.72;
    }

    .hero-actions {
        margin-top: 22px;
    }

    .hero-actions a {
        min-height: 40px;
        padding: 0 15px;
        font-size: 13px;
    }

    .stat-row,
    .division-grid,
    .category-cards,
    .category-post-grid,
    .member-benefits,
    .pricing-grid,
    .footer-links,
    .feature-band,
    .sidebar {
        grid-template-columns: 1fr;
    }

    .page-hero,
    .member-hero,
    .article-card,
    .pricing-section {
        padding: 18px;
    }

    .page-hero h1,
    .member-hero h1 {
        font-size: 30px;
    }

    .article-head h1 {
        font-size: 26px;
    }

    .article-cover {
        height: 220px;
    }

    .resource-box,
    .paid-resource-card,
    .article-neighbor,
    .article-related-grid,
    .article-footer,
    .author-card,
    .pricing-head,
    .order-item {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .paid-resource-buy {
        width: 100%;
    }

    .paid-content-lock {
        grid-template-columns: 1fr;
    }

    .article-pay-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-footer,
    .article-related-head,
    .pricing-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-neighbor-item.next {
        text-align: left;
    }

    .category-posts-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .category-post-cover {
        height: 160px;
    }

    .dynamic-viewport {
        height: 210px;
    }

    .search-panel,
    .division,
    .dynamic {
        padding: 18px;
    }

    .search-copy h2,
    .division-head h2,
    .dynamic-head h2 {
        font-size: 20px;
    }

    .division-head,
    .dynamic-head,
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .mini-card.wide {
        grid-column: auto;
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .post-item {
        grid-template-columns: 1fr;
        height: auto;
    }

    .post-thumb {
        height: 190px;
    }

    .notice-dialog-head {
        padding: 24px 22px 16px;
    }

    .notice-dialog-body {
        padding: 0 22px 20px;
    }

    .notice-dialog-actions {
        flex-direction: column-reverse;
        padding: 16px 22px 22px;
    }

    .notice-dialog-actions button {
        width: 100%;
    }

    .vip-pay-head {
        padding: 22px 20px 14px;
    }

    .vip-pay-body {
        padding: 0 20px 20px;
    }

    .vip-plan-options,
    .vip-method-options {
        grid-template-columns: 1fr;
    }

    .vip-pay-actions {
        padding: 14px 20px 20px;
        flex-direction: column;
    }

    .vip-pay-actions button {
        width: 100%;
    }

    .vip-toast {
        right: 16px;
        left: 16px;
        top: 74px;
        justify-content: center;
    }
}

.auth-shell,
.user-hero,
.user-stat-grid,
.user-center-shell {
    width: min(1200px, calc(100% - 32px));
    margin: 22px auto;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 22px;
    align-items: stretch;
}

.auth-shell-reverse {
    grid-template-columns: minmax(0, 1fr) 420px;
}

.auth-shell-reverse .auth-copy {
    grid-column: 1;
    grid-row: 1;
}

.auth-shell-reverse .auth-card {
    grid-column: 2;
    grid-row: 1;
}

.auth-copy,
.auth-card,
.user-hero,
.user-stat-grid article,
.user-sidebar,
.user-main .section-card,
.uc-content .section-card,
.uc-sidebar {
    border: 1px solid var(--od-line);
    border-radius: 12px;
    background: var(--od-card);
    box-shadow: var(--od-shadow);
}

.auth-copy {
    min-height: 520px;
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(23, 29, 48, .9), rgba(79, 124, 255, .48)),
        url("https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=82") center/cover;
}

.auth-shell-reverse .auth-copy {
    background:
        linear-gradient(135deg, rgba(23, 29, 48, .9), rgba(240, 68, 148, .46)),
        url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1400&q=82") center/cover;
}

.auth-copy h1 {
    margin: 0;
    max-width: 640px;
    font-size: 42px;
    line-height: 1.22;
    font-weight: 800;
}

.auth-copy p {
    max-width: 620px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .84);
    font-size: 16px;
    line-height: 1.8;
}

.auth-point-list,
.auth-stat-grid {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.auth-point-list span,
.auth-stat-grid span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .14);
    font-weight: 800;
}

.auth-point-list i {
    color: #75f0b6;
}

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

.auth-stat-grid span {
    flex-direction: column;
    align-items: flex-start;
}

.auth-stat-grid strong {
    color: #fff;
    font-size: 26px;
}

.auth-card {
    min-height: 520px;
    padding: 26px;
    align-self: center;
}

.auth-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.auth-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--od-gradient);
    font-size: 24px;
}

.auth-card h2 {
    margin: 0 0 6px;
    color: #252c3a;
    font-size: 24px;
    font-weight: 800;
}

.auth-card p {
    margin: 0;
    color: var(--od-muted);
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-form label {
    display: grid;
    gap: 8px;
    margin: 0;
    color: #4d5564;
    font-weight: 800;
}

.form-control-icon {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--od-line);
    border-radius: 10px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.form-control-icon:focus-within {
    border-color: rgba(240, 68, 148, .38);
    box-shadow: 0 0 0 4px rgba(240, 68, 148, .1);
}

.form-control-icon i {
    color: #9aa1ad;
    text-align: center;
}

.form-control-icon input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: none;
    color: #303746;
    background: transparent;
    font: inherit;
}

.form-control-icon input::placeholder {
    color: #a6adbb;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 2px 2px 2px 0;
    color: var(--od-muted);
    font-size: 13px;
}

.auth-row a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--od-primary);
    font-weight: 800;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease;
}

.auth-row a:hover,
.auth-row a:focus {
    background: rgba(240, 68, 148, .08);
}

.auth-switch a {
    color: var(--od-primary);
    font-weight: 800;
}

.check-line {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 9px !important;
    min-height: 34px;
    padding: 0 10px 0 4px;
    border-radius: 999px;
    color: #596170 !important;
    font-size: 13px;
    font-weight: 800 !important;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.check-line:hover,
.check-line:focus-within {
    color: var(--od-primary) !important;
    background: rgba(240, 68, 148, .08);
}

.check-line input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--od-primary);
    cursor: pointer;
    flex: 0 0 auto;
}

.auth-submit {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 12px 24px rgba(240, 68, 148, .22);
    font-weight: 800;
}

.auth-switch {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--od-line);
    color: var(--od-muted);
    text-align: center;
    font-weight: 700;
}

.user-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 30px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(23, 29, 48, .9), rgba(24, 199, 213, .45)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1400&q=82") center/cover;
}

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

.user-avatar {
    width: 86px;
    height: 86px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .42), transparent 26%),
        var(--od-gradient);
    box-shadow: 0 18px 34px rgba(18, 25, 42, .22);
    font-size: 34px;
}

.user-hero h1 {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
}

.user-hero p {
    max-width: 620px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .82);
    line-height: 1.75;
}

.user-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.user-profile-badges span {
    display: inline-grid;
    grid-template-columns: 18px auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    min-width: 122px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(10px);
}

.user-profile-badges i {
    grid-row: 1 / 3;
    align-self: center;
    color: #fff;
    opacity: .9;
}

.user-profile-badges strong {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
}

.user-profile-badges em {
    margin-top: 3px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.1;
}

.user-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.user-quick-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}

.user-quick-actions .primary {
    background: var(--od-gradient);
}

.user-quick-actions .ghost {
    border: 1px solid rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .14);
}

.user-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.user-stat-grid article {
    padding: 20px;
}

.user-stat-grid span {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--od-blue), #18c7d5);
    font-size: 20px;
}

.user-stat-grid article:nth-child(2) span {
    background: var(--od-gradient);
}

.user-stat-grid article:nth-child(3) span {
    background: linear-gradient(135deg, var(--od-green), #65dba3);
}

.user-stat-grid article:nth-child(4) span {
    background: linear-gradient(135deg, var(--od-yellow), #ffd16f);
}

.user-stat-grid strong {
    display: block;
    color: #252c3a;
    font-size: 24px;
    font-weight: 800;
}

.user-stat-grid p {
    margin: 6px 0 0;
    color: var(--od-muted);
    font-weight: 700;
}

.user-vip-panel {
    width: min(1200px, calc(100% - 32px));
    margin: 22px auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid rgba(240, 68, 148, .18);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(240, 68, 148, .08), rgba(24, 199, 213, .08)),
        var(--od-card);
    box-shadow: var(--od-shadow);
}

.user-vip-panel.is-active {
    border-color: rgba(53, 201, 135, .28);
    background:
        linear-gradient(135deg, rgba(53, 201, 135, .08), rgba(24, 199, 213, .08)),
        var(--od-card);
}

.user-vip-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.user-vip-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--od-gradient);
    font-size: 22px;
}

.user-vip-info h2 {
    margin: 0 0 6px;
    color: #252c3a;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
}

.user-vip-info p {
    margin: 0;
    color: var(--od-muted);
    font-weight: 700;
}

.user-vip-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, auto));
    gap: 10px;
}

.user-vip-status span {
    display: grid;
    gap: 4px;
    min-height: 54px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #fff;
    color: var(--od-muted);
    font-size: 12px;
    font-weight: 800;
}

.user-vip-status strong {
    color: #252c3a;
    font-size: 16px;
}

.user-center-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
}

.user-sidebar {
    padding: 12px;
    align-self: start;
}

.user-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin-bottom: 3px;
    padding: 0 13px;
    border-radius: 10px;
    color: #596170;
    font-weight: 800;
}

.user-sidebar a i {
    width: 16px;
    color: #9aa1ad;
    text-align: center;
}

.user-sidebar a:hover,
.user-sidebar a.active {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
}

.user-sidebar a:hover i,
.user-sidebar a.active i {
    color: var(--od-primary);
}

.user-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.user-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--od-line);
}

.user-page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.user-page-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    color: #596170;
    background: rgba(45, 55, 76, .06);
    font-weight: 800;
}

.user-page-tabs a.active,
.user-page-tabs a:hover {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .09);
}

.user-page-search {
    display: grid;
    grid-template-columns: 18px minmax(0, 180px);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--od-line);
    border-radius: 999px;
    background: #fff;
    color: #9aa1ad;
}

.user-page-search input {
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #303746;
    font: inherit;
}

.download-list,
.account-form,
.favorite-grid {
    padding: 16px;
}

.download-list {
    display: grid;
    gap: 12px;
}

.download-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}



.download-item strong,
.download-item span {
    display: block;
}

.download-item span {
    margin-top: 4px;
    color: var(--od-muted);
    font-size: 13px;
}

.download-item a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: #fff;
    background: var(--od-gradient);
    font-weight: 800;
    white-space: nowrap;
}

.favorite-grid {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.account-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-form label {
    display: grid;
    gap: 8px;
    margin: 0;
    color: #4d5564;
    font-weight: 800;
}

.account-form label.wide {
    grid-column: 1 / -1;
}

.account-form input,
.account-form textarea,
.account-form select {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--od-line);
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #303746;
    font: inherit;
}

.account-form textarea {
    min-height: 96px;
    padding: 12px 13px;
    resize: vertical;
}

.account-form input:focus,
.account-form textarea:focus,
.account-form select:focus {
    border-color: rgba(240, 68, 148, .38);
    box-shadow: 0 0 0 4px rgba(240, 68, 148, .1);
}

.account-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.account-actions button,
.account-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 800;
}

.account-actions button {
    border: 0;
    color: #fff;
    background: var(--od-gradient);
}

.account-actions a {
    color: #596170;
    background: rgba(45, 55, 76, .06);
}

.vip-tab-content {
    padding: 16px;
}

.user-timeline {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.user-timeline span {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}

.user-timeline i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--od-blue), #18c7d5);
}

.user-timeline strong {
    color: #343b49;
}

.user-timeline em {
    color: var(--od-muted);
    font-style: normal;
    font-size: 13px;
    white-space: nowrap;
}

.user-timeline a.user-timeline-link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
    text-decoration: none;
    color: inherit;
    transition: all .2s;
    cursor: pointer;
}

.user-timeline a.user-timeline-link:hover {
    background: rgba(45, 55, 76, .08);
    transform: translateX(4px);
    color: var(--od-primary);
}

.user-timeline a.user-timeline-link:hover strong {
    color: var(--od-primary);
}

@media (max-width: 1100px) {

    .auth-shell,
    .auth-shell-reverse,
    .user-center-shell {
        grid-template-columns: 1fr;
    }

    .auth-copy {
        min-height: 360px;
    }

    .user-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {

    .auth-shell,
    .user-hero,
    .user-stat-grid,
    .user-vip-panel,
    .user-center-shell {
        width: min(100% - 24px, 1200px);
    }

    .nav-link-btn {
        display: none;
    }

    .auth-copy,
    .auth-card,
    .user-hero {
        padding: 18px;
    }

    .auth-copy h1,
    .user-hero h1 {
        font-size: 30px;
    }

    .auth-stat-grid,
    .user-stat-grid {
        grid-template-columns: 1fr;
    }

    .user-hero,
    .user-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-vip-panel,
    .user-vip-info,
    .user-vip-status {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .user-vip-info {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .user-sidebar {
        overflow-x: auto;
        display: flex;
        gap: 8px;
    }

    .user-sidebar a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .user-timeline span,
    .user-timeline a.user-timeline-link {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .user-timeline em,
    .user-timeline a.user-timeline-link em {
        grid-column: 2;
    }

    .user-page-toolbar,
    .download-item {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .user-page-search {
        width: 100%;
        grid-template-columns: 18px minmax(0, 1fr);
    }

    .favorite-grid,
    .account-form {
        grid-template-columns: 1fr;
    }
}

.mobile-drawer {
    display: none;
}

@media (max-width: 680px) {
    body {
        background: #f6f7fb;
        font-size: 13px;
    }

    body.drawer-open {
        overflow: hidden;
    }

    .page-wrap {
        overflow: visible;
    }

    .site-header {
        box-shadow: 0 6px 18px rgba(31, 38, 62, .06);
    }

    .site-header.is-sticky {
        box-shadow: 0 6px 24px rgba(31, 38, 62, .12);
    }

    .nav-shell {
        width: calc(100% - 20px);
        min-height: 54px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px 0;
        align-items: center;
    }

    .nav-actions {
        display: flex;
        flex: 0 0 auto;
        grid-column: 2;
        grid-row: 1;
        margin-left: auto;
    }

    .main-nav {
        display: none !important;
    }

    .brand-mark,
    .nav-avatar-img {
        width: 32px;
        height: 32px;
    }

    .brand-name strong {
        font-size: 16px;
    }

    .icon-btn,
    .menu-btn {
        width: 32px;
        height: 32px;
    }

    .nav-actions .nav-user-card {
        display: none;
    }

    .menu-btn {
        display: inline-flex;
    }

    .main-nav>a,
    .nav-item>a {
        min-height: 32px;
        padding: 0 10px;
        background: rgba(45, 55, 76, .045);
        font-size: 12px;
    }

    .main-nav.is-open {
        display: none;
    }

    .mobile-drawer {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: block;
        pointer-events: none;
        visibility: hidden;
    }

    .mobile-drawer.is-open {
        pointer-events: auto;
        visibility: visible;
    }

    .mobile-drawer-mask {
        position: absolute;
        inset: 0;
        background: rgba(16, 22, 36, .42);
        opacity: 0;
        transition: opacity .22s ease;
    }

    .mobile-drawer.is-open .mobile-drawer-mask {
        opacity: 1;
    }

    .mobile-drawer-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: min(84vw, 330px);
        height: 100%;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) 152px;
        overflow: hidden;
        background: #fff;
        box-shadow: 20px 0 44px rgba(18, 25, 42, .18);
        transform: translateX(-105%);
        transition: transform .24s ease;
    }

    .mobile-drawer.is-open .mobile-drawer-panel {
        transform: translateX(0);
    }

    .mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 58px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--od-line);
    }

    .mobile-drawer-close {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border: 0;
        border-radius: 50%;
        color: #4c5361;
        background: rgba(45, 55, 76, .06);
    }

    .mobile-drawer-account {
        height: 152px;
        padding: 12px;
        border-top: 1px solid var(--od-line);
        background:
            linear-gradient(135deg, rgba(240, 68, 148, .08), rgba(24, 199, 213, .08)),
            #fff;
    }

    .mobile-user-card {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
    }

    .mobile-user-card strong,
    .mobile-user-card em,
    .mobile-auth-card strong,
    .mobile-auth-card p {
        display: block;
    }

    .mobile-user-card strong,
    .mobile-auth-card strong {
        color: #252c3a;
        font-size: 15px;
        font-weight: 900;
    }

    .mobile-user-card em,
    .mobile-auth-card p {
        margin-top: 3px;
        color: var(--od-muted);
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.35;
    }

    .mobile-user-actions,
    .mobile-auth-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 10px;
    }

    .mobile-user-actions a,
    .mobile-user-actions button,
    .mobile-auth-actions a {
        min-width: 0;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 8px;
        border: 0;
        border-radius: 8px;
        color: #596170;
        background: rgba(45, 55, 76, .06);
        font-size: 16px;
        font-weight: 800;
    }

    .mobile-auth-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .mobile-auth-actions a {
        font-size: 12px;
    }

    .mobile-auth-actions .primary {
        color: #fff;
        background: var(--od-gradient);
    }

    .mobile-user-actions button {
        color: var(--od-primary);
        background: rgba(240, 68, 148, .09);
    }

    .mobile-drawer-scroll {
        min-height: 0;
        overflow-y: auto;
        padding: 10px 12px 14px;
    }

    .mobile-drawer-menu {
        display: grid;
        gap: 8px;
    }

    .mobile-drawer-item {
        border: 1px solid var(--od-line);
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }

    .mobile-drawer-item>a,
    .mobile-drawer-submenu a {
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        color: #343b49;
        font-size: 14px;
        font-weight: 900;
    }

    .mobile-drawer-item>a i,
    .mobile-drawer-submenu a i {
        width: 16px;
        color: var(--od-primary);
        text-align: center;
    }

    .mobile-drawer-submenu {
        display: grid;
        gap: 2px;
        padding: 0 8px 8px 34px;
    }

    .mobile-drawer-submenu a {
        min-height: 34px;
        padding: 0 10px;
        border-radius: 8px;
        color: #687083;
        background: rgba(45, 55, 76, .045);
        font-size: 12px;
        font-weight: 800;
    }

    .nav-dropdown,
    .nav-badge,
    .owl-dynamic,
    .notice-modal,
    .breadcrumb-line,
    .stat-row,
    .dynamic,
    .feature-band,
    .sidebar,
    .page-hero-stats,
    .article-summary,
    .article-neighbor,
    .article-related,
    .auth-copy,
    .user-profile-badges,
    .user-stat-grid,
    .member-benefits,
    .footer-links,
    .footer-brand p {
        display: none !important;
    }

    .hero,
    .search-bg,
    .division,
    .content-shell,
    .category-cards,
    .category-posts,
    .page-hero,
    .member-hero,
    .pricing-section,
    .member-dashboard,
    .auth-shell,
    .user-hero,
    .user-vip-panel,
    .user-center-shell,
    .site-footer .footer-inner,
    .site-footer .footer-bottom {
        width: calc(100% - 20px);
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .hero {
        border-radius: 10px;
    }

    .hero-panel,
    .hero-swiper,
    .hero-swiper .swiper-wrapper,
    .hero-swiper .swiper-slide,
    .hero-slide {
        min-height: 300px;
        height: 300px !important;
    }

    .hero-slide {
        padding: 22px 18px 48px;
    }

    .eyebrow {
        margin-bottom: 10px;
        padding: 6px 10px;
        font-size: 11px;
    }

    .hero h1 {
        margin-bottom: 10px;
        font-size: 26px;
        line-height: 1.18;
    }

    .hero p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .hero-actions {
        gap: 8px;
        margin-top: 16px;
    }

    .hero-actions a,
    .page-hero-actions a,
    .member-hero-actions a,
    .user-quick-actions a {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }

    .search-panel,
    .division,
    .page-hero,
    .member-hero,
    .article-card,
    .pricing-section,
    .auth-card,
    .user-hero,
    .user-vip-panel,
    .user-main .section-card {
        padding: 14px;
        border-radius: 10px;
    }

    .search-copy p,
    .division-head a,
    .page-hero p,
    .member-hero p,
    .category-post-body p,
    .favorite-card p,
    .auth-card p,
    .user-hero p,
    .user-vip-info p,
    .paid-resource-main p,
    .related-card p {
        display: none;
    }

    .search-copy h2,
    .division-head h2,
    .section-head h2,
    .category-posts-head h2,
    .page-hero h1,
    .member-hero h1,
    .article-head h1 {
        font-size: 22px;
        line-height: 1.28;
    }

    .search-form {
        margin-top: 12px;
    }

    .search-bg {
        background: transparent;
        box-shadow: none;
    }

    .search-panel {
        display: block;
        min-height: auto;
        padding: 0;
    }

    .search-copy {
        display: none;
    }

    .search-form {
        margin-top: 0;
        border-color: var(--od-line);
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--od-shadow);
    }

    .division-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .division-item,
    .category-card,
    .category-post-card,
    .post-item,
    .favorite-card,
    .download-item,
    .order-item,
    .user-timeline span,
    .user-timeline a.user-timeline-link {
        padding: 12px;
        border-radius: 8px;
    }

    .division-icon,
    .category-card-icon,
    .order-icon,
    .user-vip-icon,
    .auth-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .content-shell {
        display: block;
    }

    .article-cover,
    .category-post-cover,
    .post-thumb {
        height: 150px;
        border-radius: 8px;
    }

    .article-meta,
    .category-post-meta,
    .favorite-meta {
        gap: 8px;
        font-size: 12px;
    }

    .article-meta span:nth-child(n+3),
    .category-post-meta span:nth-child(n+3),
    .favorite-meta span:nth-child(n+3),
    .order-item .order-meta,
    .download-item span,
    .user-timeline em,
    .user-timeline a.user-timeline-link em {
        display: none;
    }

    .article-content h2 {
        margin-top: 22px;
        font-size: 20px;
    }

    .article-content p,
    .article-content li {
        line-height: 1.75;
    }

    .paid-resource-card,
    .resource-box,
    .article-footer,
    .pricing-head,
    .order-item,
    .download-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .paid-resource-meta,
    .article-tags,
    .article-actions,
    .account-actions {
        gap: 8px;
    }

    .article-actions button,
    .paid-resource-buy button,
    .paid-resource-buy a,
    .download-item a,
    .favorite-card a,
    .account-actions button,
    .account-actions a {
        width: 100%;
        justify-content: center;
    }

    .category-filter {
        width: calc(100% - 20px);
        margin: 12px auto;
        padding: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .category-filter a,
    .user-page-tabs a,
    .user-sidebar a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .category-post-grid,
    .favorite-grid,
    .account-form,
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pricing-card {
        padding: 16px;
    }

    .member-account {
        padding: 14px;
    }

    .member-account-grid,
    .user-vip-status {
        grid-template-columns: 1fr 1fr;
    }

    .auth-shell,
    .auth-shell-reverse {
        display: block;
    }

    .auth-card {
        min-height: auto;
    }

    .auth-card-head {
        margin-bottom: 16px;
    }

    .auth-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .user-avatar {
        width: 62px;
        height: 62px;
        font-size: 24px;
    }

    .user-hero h1 {
        font-size: 24px;
    }

    .user-quick-actions,
    .user-page-toolbar {
        width: 100%;
    }

    .user-sidebar {
        margin-bottom: 10px;
        padding: 8px;
        border-radius: 10px;
        box-shadow: none;
    }

    .user-page-toolbar {
        padding: 12px;
    }

    .download-list,
    .favorite-grid,
    .account-form,
    .user-timeline,
    .order-list {
        padding: 12px;
    }

    .site-footer {
        margin-top: 18px;
        padding: 14px 0 10px;
    }

    .footer-inner {
        display: block;
    }

    .footer-brand .brand {
        justify-content: center;
    }

    .footer-bottom {
        align-items: center;
        gap: 6px;
        padding-top: 10px;
        text-align: center;
        font-size: 12px;
    }


    .comment-card {
        padding: 14px;
        border-radius: 10px;
    }

    .comment-form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .comment-item {
        gap: 10px;
        padding: 12px 0;
    }

    .comment-item .comment-item {
        padding: 8px 0;
    }

    .comment-children {
        padding-left: 10px;
    }

    .comment-submit {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .main-nav.is-open {
        grid-template-columns: repeat(3, max-content);
    }

    .division-grid,
    .member-account-grid,
    .user-vip-status {
        grid-template-columns: 1fr;
    }

    .hero h1,
    .page-hero h1,
    .member-hero h1,
    .article-head h1 {
        font-size: 20px;
    }
}

.search-page-hero {
    align-items: center;
}

.search-page-form {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    max-width: 660px;
    margin-top: 24px;
    padding: 9px 10px 9px 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 36px rgba(33, 40, 66, .1);
}

.search-page-form i {
    color: var(--od-primary);
    font-size: 16px;
    text-align: center;
}

.search-page-form input {
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    color: #2f3640;
    background: transparent;
    font-size: 15px;
    font-weight: 800;
}

.search-page-form input::placeholder {
    color: #a0a7b4;
}

.search-page-form button {
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--od-gradient);
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(240, 68, 148, .22);
}

.search-hot-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.search-hot-words a {
    padding: 6px 12px;
    border-radius: 999px;
    color: #596174;
    background: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 800;
}

.search-hot-words a:hover {
    color: var(--od-primary);
    background: #fff;
}

.search-filter {
    margin-bottom: 18px;
}

.search-result-head span {
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 800;
}

.search-result-head strong {
    color: var(--od-primary);
}

.search-result-list {
    padding-top: 10px;
}

.search-side-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.search-side-filter a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #687185;
    background: rgba(45, 55, 76, .055);
    font-weight: 800;
}

.search-side-filter a:hover,
.search-side-filter a.active {
    color: #fff;
    background: var(--od-gradient);
}

.search-trend-list {
    display: grid;
    gap: 10px;
}

.search-trend-list a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(45, 55, 76, .045);
}

.search-trend-list a:hover {
    background: #fff;
}

.search-trend-list span {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--od-blue), #75a2ff);
    font-weight: 900;
}

.search-trend-list a:nth-child(1) span {
    background: linear-gradient(135deg, #ff5f6d, var(--od-primary));
}

.search-trend-list a:nth-child(2) span {
    background: linear-gradient(135deg, #ff9f43, #ffcc5c);
}

.search-trend-list a:nth-child(3) span {
    background: linear-gradient(135deg, var(--od-green), #18c7d5);
}

.search-trend-list strong {
    min-width: 0;
    overflow: hidden;
    color: #303746;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-trend-list em {
    color: #9aa1ad;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

@media (max-width: 680px) {
    .search-page-form {
        grid-template-columns: 24px minmax(0, 1fr);
        margin-top: 18px;
        border-radius: 12px;
    }

    .search-page-form button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .search-hot-words {
        gap: 7px;
    }

    .search-side-filter {
        grid-template-columns: 1fr;
    }

    .search-result-head {
        align-items: flex-start;
        flex-direction: column;
    }
}


.search-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.search-modal-overlay.is-show {
    display: flex;
}

.search-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.search-modal-dialog {
    position: relative;
    width: 92%;
    max-width: 560px;
    padding: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .3);
    animation: searchModalIn .3s cubic-bezier(.16, 1, .3, 1);
    overflow: hidden;
}

@keyframes searchModalIn {
    from {
        opacity: 0;
        transform: scale(.88) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.search-modal-head {
    padding: 28px 32px 0;
    text-align: center;
}

.search-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--od-gradient);
    color: #fff;
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(240, 68, 148, .28);
}

.search-modal-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: var(--od-text);
}

.search-modal-head p {
    margin: 0 0 20px;
    color: var(--od-muted);
    font-size: 14px;
}

.search-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #9aa1ad;
    background: rgba(45, 55, 76, .06);
    font-size: 16px;
    cursor: pointer;
    transition: all .2s;
}

.search-modal-close:hover {
    color: var(--od-text);
    background: rgba(45, 55, 76, .12);
}

.search-modal-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 0 32px;
}

.search-modal-input-wrap {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 2px solid var(--od-line);
    border-radius: 12px;
    background: var(--od-bg);
    transition: all .25s;
}

.search-modal-input-wrap:focus-within {
    border-color: var(--od-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(240, 68, 148, .12);
}

.search-modal-input-wrap>i {
    color: #b0b7c4;
    font-size: 16px;
    text-align: center;
    transition: color .25s;
}

.search-modal-input-wrap:focus-within>i {
    color: var(--od-primary);
}

.search-modal-input-wrap input {
    min-width: 0;
    height: 46px;
    border: 0;
    outline: 0;
    color: var(--od-text);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
}

.search-modal-input-wrap input::placeholder {
    color: #b0b7c4;
    font-weight: 400;
}

.search-modal-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    color: #b0b7c4;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    transition: color .2s;
}

.search-modal-clear.is-visible {
    display: inline-flex;
}

.search-modal-clear:hover {
    color: var(--od-muted);
}

.search-modal-submit {
    height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--od-gradient);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: box-shadow .2s, transform .15s;
    white-space: nowrap;
}

.search-modal-submit:hover {
    box-shadow: 0 8px 24px rgba(240, 68, 148, .32);
    transform: translateY(-1px);
}

.search-modal-submit:active {
    transform: translateY(0);
}

.search-modal-hot {
    padding: 18px 32px 28px;
}

.search-hot-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 700;
}

.search-hot-label i {
    color: var(--od-primary);
    font-size: 14px;
}

.search-hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-hot-tags a {
    padding: 6px 16px;
    border-radius: 999px;
    color: #596174;
    background: var(--od-bg);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}

.search-hot-tags a:hover {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 4px 12px rgba(240, 68, 148, .24);
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .search-modal-dialog {
        width: 94%;
        border-radius: 16px;
    }

    .search-modal-head {
        padding: 22px 20px 0;
    }

    .search-modal-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
        border-radius: 14px;
    }

    .search-modal-head h2 {
        font-size: 19px;
    }

    .search-modal-form {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .search-modal-submit {
        height: 44px;
    }

    .search-modal-hot {
        padding: 14px 20px 22px;
    }

    .search-hot-tags {
        gap: 6px;
    }

    .search-hot-tags a {
        padding: 5px 12px;
        font-size: 12px;
    }
}


:root {
    --float-btn-bg: rgba(200, 200, 200, 0.4);
}

.float-right {
    position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    transition: .3s;
}

.modal-open .float-right,
.scroll-ing .scrolling-hide.float-right {
    transform: translateX(200%);
}

.float-right .float-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    padding: 0;
    --this-color: var(--od-muted);
    --this-bg: var(--float-btn-bg);
    background: var(--this-bg);
    position: relative;
    color: var(--this-color) !important;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.filter .float-btn {
    -webkit-backdrop-filter: saturate(2) blur(10px);
    backdrop-filter: saturate(2) blur(10px);
}

.float-right.round .float-btn {
    border-radius: 8px;
}

.float-right .float-btn i {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.float-right .float-btn:hover {
    --this-color: var(--od-primary);
    --this-bg: rgba(240, 68, 148, 0.12);
}


.float-btn.ontop {
    opacity: 0;
    transition: .5s;
    transform: translateY(10px);
    visibility: hidden;
}

.float-btn.ontop.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}


.float-btn.hover-show {
    position: relative;
}

.float-btn .float-dropdown {
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18, 25, 42, .16);
    opacity: 0;
    visibility: hidden;
    transition: all .22s ease;
    pointer-events: none;
    z-index: 10;
}

.float-btn.hover-show:hover .float-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.float-btn .float-dropdown img {
    display: block;
    border-radius: 4px;
}

.float-btn .float-dropdown-desc {
    margin-top: 6px;
    color: var(--od-muted);
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}


.float-qrcode {
    display: inline-flex;
    padding: 4px;
    background: #fff;
}


@media (max-width: 680px) {
    .float-right {
        bottom: 24px;
        right: 12px;
    }

    .float-right .float-btn {
        width: 36px;
        height: 36px;
        font-size: 1.2em;
        padding: 0;
    }

    .float-right.round .float-btn {
        border-radius: 6px;
    }

    .float-btn .float-dropdown {
        display: none;
    }
}


.tag-cloud a.tag-color-0 {
    background: rgba(79, 124, 255, .12);
    color: #4f7cff;
}

.tag-cloud a.tag-color-0:hover {
    background: rgba(79, 124, 255, .18);
}

.tag-cloud a.tag-color-1 {
    background: rgba(245, 158, 11, .12);
    color: #f59e0b;
}

.tag-cloud a.tag-color-1:hover {
    background: rgba(245, 158, 11, .18);
}

.tag-cloud a.tag-color-2 {
    background: rgba(16, 185, 129, .12);
    color: #10b981;
}

.tag-cloud a.tag-color-2:hover {
    background: rgba(16, 185, 129, .18);
}

.tag-cloud a.tag-color-3 {
    background: rgba(124, 58, 237, .12);
    color: #7c3aed;
}

.tag-cloud a.tag-color-3:hover {
    background: rgba(124, 58, 237, .18);
}

.tag-cloud a.tag-color-4 {
    background: rgba(239, 68, 68, .12);
    color: #ef4444;
}

.tag-cloud a.tag-color-4:hover {
    background: rgba(239, 68, 68, .18);
}


.od_search .search-input-group {
    display: flex;
    gap: 0;
    border: 1px solid var(--od-line);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(45, 55, 76, .04);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.od_search .search-input-group:focus-within {
    border-color: rgba(240, 68, 148, .38);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(240, 68, 148, .1);
}

.od_search select.search-cat {
    flex: 0 0 auto;
    padding: 8px 24px 8px 14px;
    border: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa1ad'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--od-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
}

.od_search .search-input {
    flex: 1;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    font-size: 14px;
    outline: 0;
    min-width: 0;
}

.od_search .search-input::placeholder {
    color: #a6adbb;
}

.od_search .search-btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    border: 0;
    background: rgba(240, 68, 148, .08);
    color: var(--od-primary);
    cursor: pointer;
    transition: all .3s ease;
    font-weight: 700;
    font-size: 15px;
}

.od_search .search-btn:hover {
    color: #fff;
    background: var(--od-gradient);
    transform: scale(1.04);
}

.od_search .hot-tags {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.od_search .hot-tags-label {
    color: var(--od-muted);
    font-weight: 700;
    flex-shrink: 0;
}

.od_search .hot-tags a {
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--od-muted);
    background: rgba(45, 55, 76, .06);
    font-size: 12px;
    font-weight: 700;
    transition: color .25s ease, background .25s ease, transform .2s ease, box-shadow .2s ease;
}

.od_search .hot-tags a:hover {
    color: var(--od-primary);
    background: rgba(240, 68, 148, .08);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(240, 68, 148, .15);
}


.od_comments .comment-list {
    display: grid;
    gap: 10px;
}

.od_comments .comment-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 9px;
    background: rgba(45, 55, 76, .045);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.od_comments .comment-item:hover {
    background: #fff;
    transform: translateX(4px);
    box-shadow: 0 2px 12px rgba(18, 25, 42, .1);
}

.od_comments .comment-avatar {
    flex-shrink: 0;
}

.od_comments .comment-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: block;
}

.od_comments .comment-body {
    flex: 1;
    min-width: 0;
}

.od_comments .comment-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    font-size: 13px;
}

.od_comments .comment-author strong {
    color: var(--od-text);
    font-weight: 800;
}

.od_comments .comment-date {
    color: var(--od-muted);
    font-weight: 400;
    font-size: 12px;
}

.od_comments .comment-text {
    font-size: 13px;
    line-height: 1.55;
}

.od_comments .comment-text a {
    color: var(--od-muted);
    transition: color .25s ease;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.od_comments .comment-text a:hover {
    color: var(--od-primary);
}

.od_comments .comment-post {
    margin-top: 3px;
    font-size: 12px;
    color: #9097a6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.od_comments .comment-post::before {
    content: '�?;
 margin-right: 4px;
    color: #c0c6d0;
}


.od_notice .notice-carousel {
    position: relative;
    overflow: hidden;
}

.od_notice .notice-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--od-text);
    line-height: 1.6;
    border-radius: 9px;
    background: rgba(45, 55, 76, .045);
    transition: background .25s ease, transform .25s ease;
}

.od_notice .notice-item:not(.active) {
    display: none;
}

.od_notice .notice-item i {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    background: var(--od-gradient);
    font-size: 13px;
}

.od_notice .notice-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.od_notice .notice-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(45, 55, 76, .12);
    cursor: pointer;
    transition: background .25s ease, transform .2s ease;
}

.od_notice .notice-dots .dot:hover {
    transform: scale(1.2);
}

.od_notice .notice-dots .dot.active {
    background: var(--od-primary);
    transform: scale(1.2);
}



.onedown-pay-box {
    position: relative;
    margin: 24px 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: #2f3640;
    box-shadow: var(--od-shadow);
    overflow: hidden;
    min-height: 160px;
}


.onedown-pay-box .pay-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(23, 29, 48, .88) 0%, rgba(23, 29, 48, .72) 50%, rgba(23, 29, 48, .6) 100%);
    z-index: 0;
}


.onedown-pay-box .pay-tag {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    border-radius: 0 12px 0 8px;
    line-height: 1.4;
    z-index: 2;
}

.order-type-1 .pay-tag {
    background: var(--od-primary);
}

.order-type-2 .pay-tag {
    background: #10b981;
}


.onedown-pay-box .pay-sales {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, .65);
    z-index: 2;
    letter-spacing: .3px;
}


.onedown-pay-box .pay-flexbox {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    min-height: 130px;
}


.onedown-pay-box .pay-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.onedown-pay-box .pay-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onedown-pay-box .pay-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    line-height: 1.5;
}


.onedown-pay-box .pay-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.onedown-pay-box .pay-price-current {
    font-size: 24px;
    font-weight: 900;
    color: #ff7eb2;
}

.onedown-pay-box .pay-price-current.vip-free {
    font-size: 16px;
    color: #4ade80;
}

.onedown-pay-box .pay-price-original {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
    text-decoration: line-through;
}


.onedown-pay-box .pay-vip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.onedown-pay-box .pay-vip-price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(251, 191, 36, .15);
    text-decoration: none;
    transition: opacity .2s;
}

.onedown-pay-box .pay-vip-price:hover {
    opacity: .8;
}

.onedown-pay-box .pay-vip-price span {
    font-weight: 700;
    color: #fff;
}


.onedown-pay-box .pay-actions {
    flex-shrink: 0;
}

.onedown-pay-box .pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 22px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}

.onedown-pay-box .pay-btn.buy {
    background: linear-gradient(135deg, #ff5f6d, #ff7eb2);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 95, 109, .35);
}

.onedown-pay-box .pay-btn.buy:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 95, 109, .45);
}

.onedown-pay-box .pay-btn.buy:disabled {
    opacity: .5;
    cursor: default;
    transform: none;
}

.onedown-pay-box .pay-btn-disabled {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 100px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .5);
    cursor: not-allowed;
}

@media (max-width: 680px) {
    .onedown-pay-box .pay-flexbox {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .onedown-pay-box .pay-title {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .onedown-pay-box .pay-actions {
        text-align: center;
    }

    .onedown-pay-box .pay-btn,
    .onedown-pay-box .pay-btn-disabled {
        width: 100%;
    }
}


.onedown-paid-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    margin: 20px 0;
}

.onedown-paid-icon {
    color: #22c55e;
    font-size: 22px;
}

.onedown-paid-text {
    font-size: 14px;
    color: #16a34a;
    font-weight: 600;
}


.onedown-paid-extra {
    margin: 24px 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.onedown-paid-extra-title {
    padding: 12px 20px;
    background: #f9fafb;
    font-weight: 700;
    font-size: 15px;
    color: #252c3a;
    border-bottom: 1px solid #e5e7eb;
}

.onedown-paid-extra-content {
    padding: 20px;
}


.od-download-page {
    background: var(--od-bg, #f6f7fb);
}

.od-download-breadcrumb {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.od-download-shell {
    max-width: 860px;
}

.od-download-panel {
    background: var(--od-card, #fff);
    border: 1px solid var(--od-line, rgba(40, 46, 60, .08));
    border-radius: var(--od-radius, 8px);
    overflow: hidden;
}

.od-download-head {
    padding: 28px 32px 22px;
    border-bottom: 1px solid var(--od-line, rgba(40, 46, 60, .08));
    text-align: center;
}

.od-download-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--od-primary, #f04494);
    font-size: 13px;
    font-weight: 700;
}

.od-download-head h1 {
    margin: 0;
    color: var(--od-text, #2f3640);
    font-size: 26px;
    line-height: 1.35;
    letter-spacing: 0;
}

.od-download-head p,
.od-download-source {
    display: block;
    margin-top: 10px;
    color: var(--od-muted, #7a8190);
    font-size: 14px;
    line-height: 1.6;
}

.od-download-source {
    color: var(--od-text, #2f3640);
    font-weight: 600;
    text-decoration: none;
}

.od-download-source:hover {
    color: var(--od-primary, #f04494);
}

.od-download-body {
    padding: 24px 32px 28px;
}

.od-download-body .onedown-pay-box,
.od-download-body .onedown-download-box {
    margin-top: 0;
}

.od-download-back {
    margin-top: 18px;
    text-align: center;
}

.od-download-back a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--od-muted, #7a8190);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.od-download-back a:hover {
    color: var(--od-primary, #f04494);
}

.od-download-empty {
    margin: 0;
    padding: 24px;
    color: var(--od-muted, #7a8190);
    text-align: center;
}


.onedown-download-box {
    margin: 24px 0;
    background: var(--od-card, #fff);
    border: 1px solid var(--od-line, rgba(40, 46, 60, .08));
    border-radius: var(--od-radius, 8px);
    overflow: hidden;
    box-shadow: none;
}

.onedown-download-title {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 15px;
    color: var(--od-text, #2f3640);
    border-bottom: 1px solid var(--od-line, rgba(40, 46, 60, .08));
}

.onedown-download-title i {
    color: var(--od-primary, #f04494);
    margin-right: 6px;
}

.onedown-download-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.onedown-download-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--od-radius, 8px);
    background: var(--od-bg, #f6f7fb);
    transition: background .15s;
}

.onedown-download-item:hover {
    background: #f0f1f6;
}

.onedown-download-item.is-cloud {
    background: #faf5ff;
}

.onedown-download-item.is-cloud:hover {
    background: #f5edff;
}


.od-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--od-primary, #f04494), #d63384);
    color: #fff;
    font-size: 16px;
}


.od-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.od-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--od-text, #2f3640);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.od-item-desc {
    font-size: 12px;
    color: var(--od-muted, #7a8190);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--od-muted, #7a8190);
    line-height: 1.4;
}

.od-meta-size {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.od-meta-pwd {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.od-meta-pwd code {
    padding: 0 5px;
    border-radius: 3px;
    background: #e5e7eb;
    font-size: 11px;
    font-family: "SFMono-Regular", Consolas, monospace;
    color: #374151;
    letter-spacing: .5px;
    user-select: all;
}


.od-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}


.od-btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--od-muted, #7a8190);
    font-size: 15px;
    cursor: pointer;
    transition: all .2s;
}

.od-btn-copy:hover {
    background: var(--od-line, rgba(40, 46, 60, .08));
    color: var(--od-text, #2f3640);
}

.od-btn-copy:active {
    transform: scale(.92);
}

.od-btn-copy.copied {
    color: var(--od-green, #35c987);
    background: rgba(53, 201, 135, .12);
}


.od-btn-dl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 18px;
    border-radius: 8px;
    background: var(--od-primary, #f04494);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
    line-height: 1.5;
    letter-spacing: .3px;
}

.od-btn-dl:hover {
    opacity: .92;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(240, 68, 148, .35);
}

.od-btn-dl:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(240, 68, 148, .25);
}


.od-btn-dl-simplified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 42px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 12px;
    letter-spacing: .5px;
    box-shadow: 0 4px 16px rgba(240, 68, 148, .28);
    transition: all .25s ease;
}

.od-btn-dl-simplified:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(240, 68, 148, .38);
}

.od-btn-dl-simplified i {
    font-size: 20px;
}



.onedown-download-simplified {
    padding: 32px 24px;
    text-align: center;
    background: linear-gradient(135deg, var(--od-bg, #f6f7fb) 0%, #fff 100%);
}


.onedown-download-box .onedown-download-simplified {
    animation: odFadeIn .3s ease;
}



.article-content .od-btn-dl::after,
.article-content .od-btn-dl-simplified::after {
    display: none !important;
    content: none !important;
}

@keyframes odFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 680px) {
    .od-btn-dl-simplified {
        padding: 14px 32px;
        font-size: 15px;
        width: 100%;
    }

    .onedown-download-simplified {
        padding: 24px 16px;
    }
}

.od-btn-dl.is-cloud {
    padding: 5px 10px;
    border-radius: 5px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff !important;
}

.od-btn-dl.is-cloud:hover {
    box-shadow: 0 4px 12px rgba(124, 58, 237, .35);
}

.od-btn-dl.is-cloud:active {
    box-shadow: 0 2px 6px rgba(124, 58, 237, .25);
}


.od-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    z-index: 99999;
    padding: 12px 24px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: all .3s ease;
    backdrop-filter: blur(4px);
    text-align: center;
    max-width: 80vw;
    line-height: 1.5;
}

.od-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 680px) {
    .onedown-download-title {
        font-size: 14px;
        padding: 10px 12px;
    }

    .onedown-download-list {
        padding: 6px;
    }

    .onedown-download-item {
        padding: 8px 10px;
        gap: 8px;
    }

    .od-item-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .od-item-name {
        font-size: 13px;
    }

    .od-btn-dl {
        font-size: 12px;
        padding: 6px 14px;
    }
}


.onedown-pay-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.onedown-pay-modal.is-show {
    opacity: 1;
    visibility: visible;
}

.onedown-pay-mask {
    position: absolute;
    inset: 0;
    background: rgba(22, 28, 42, .52);
    backdrop-filter: blur(8px);
}

.onedown-pay-dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 14px;
    background:
        radial-gradient(circle at 95% 0, rgba(240, 68, 148, .14), transparent 35%),
        linear-gradient(180deg, #fff, #f8faff);
    box-shadow: 0 28px 70px rgba(18, 25, 42, .24);
    transform: translateY(14px) scale(.98);
    transition: transform .25s ease;
}

.onedown-pay-modal.is-show .onedown-pay-dialog {
    transform: translateY(0) scale(1);
}

.onedown-pay-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #7d8491;
    background: rgba(45, 55, 76, .06);
    font-size: 16px;
    cursor: pointer;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.onedown-pay-close:hover {
    background: rgba(45, 55, 76, .12);
    color: #252c3a;
}

.onedown-pay-dialog-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 28px 18px;
}

.onedown-pay-dialog-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 14px 28px rgba(240, 68, 148, .22);
    font-size: 22px;
}

.onedown-pay-dialog-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--od-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
}

.onedown-pay-dialog-head h2 {
    margin: 0;
    padding-right: 34px;
    color: #252c3a;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
}

.onedown-pay-dialog-body {
    padding: 0 28px 10px;
}

.onedown-pay-dialog-body .pay-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--od-line);
}

.onedown-pay-dialog-body .pay-order-row:last-child {
    border-bottom: none;
}

.onedown-pay-dialog-body .pay-order-row span {
    font-size: 14px;
    color: var(--od-muted);
}

.onedown-pay-dialog-body .pay-order-row strong {
    font-size: 16px;
    color: #252c3a;
}

.onedown-pay-dialog-body .pay-order-row .pay-amount {
    font-size: 22px;
    font-weight: 900;
    color: var(--od-primary);
}

.onedown-pay-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 24px;
    border-top: 1px solid var(--od-line);
}

.onedown-pay-dialog-actions button {
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
}

.onedown-pay-secondary {
    color: #697181;
    background: rgba(45, 55, 76, .07);
}

.onedown-pay-secondary:hover {
    background: rgba(45, 55, 76, .12);
}

.onedown-pay-primary {
    color: #fff;
    background: var(--od-gradient);
    box-shadow: 0 12px 24px rgba(240, 68, 148, .2);
}

.onedown-pay-primary:hover {
    opacity: .92;
}

.onedown-pay-primary:disabled {
    opacity: .5;
    cursor: default;
}

.pay-success {
    text-align: center;
    padding: 20px 0;
}

.pay-success h3 {
    margin: 8px 0 0;
    font-size: 18px;
    color: #252c3a;
}


.pay-method-block {
    margin-top: 16px;
}

.pay-method-block h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #252c3a;
}

.pay-method-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pay-method-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--od-line);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #5a6270;
    cursor: pointer;
    transition: all .2s;
}

.pay-method-option:hover {
    border-color: var(--od-primary);
    color: var(--od-primary);
}

.pay-method-option.active {
    border-color: var(--od-primary);
    background: rgba(240, 68, 148, .06);
    color: var(--od-primary);
}

.pay-method-option .fa {
    font-size: 16px;
}

.pay-status {
    font-size: 13px;
    color: var(--od-muted);
    margin: 10px 0 0;
    min-height: 24px;
}


.onedown-qrcode-dialog {
    max-width: 380px;
}

.onedown-qrcode-body {
    padding: 32px 28px 28px;
    text-align: center;
}

.qrcode-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.qrcode-pay-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 22px;
    color: #fff;
}

.qrcode-pay-icon.is-alipay {
    background: linear-gradient(135deg, #1677ff, #4096ff);
    box-shadow: 0 8px 20px rgba(22, 119, 255, .25);
}

.qrcode-pay-icon.is-wechat {
    background: linear-gradient(135deg, #07c160, #10b981);
    box-shadow: 0 8px 20px rgba(7, 193, 96, .25);
}

.qrcode-pay-name {
    font-size: 18px;
    font-weight: 800;
    color: #252c3a;
}

.qrcode-order-title {
    font-size: 13px;
    color: var(--od-muted);
    margin-bottom: 8px;
    word-break: break-all;
}

.qrcode-price {
    margin-bottom: 20px;
}

.qrcode-price span:first-child {
    font-size: 14px;
    color: var(--od-muted);
}

.qrcode-price [data-qrcode-price] {
    font-size: 32px;
    font-weight: 900;
    color: var(--od-primary);
}

.qrcode-img-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.qrcode-img {
    width: 180px;
    height: 180px;
    border-radius: 12px;
    border: 2px solid var(--od-line);
    background: #fff;
}

.qrcode-tip {
    font-size: 14px;
    color: var(--od-muted);
    margin-bottom: 12px;
}

.qrcode-status {
    font-size: 13px;
    color: var(--od-muted);
    min-height: 20px;
    margin-bottom: 8px;
}

.qrcode-verify-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: 1.5px solid var(--od-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #5a6270;
    cursor: pointer;
    transition: all .2s;
}

.qrcode-verify-btn:hover {
    border-color: var(--od-primary);
    color: var(--od-primary);
    background: rgba(240, 68, 148, .04);
}

.qrcode-verify-btn:disabled {
    opacity: .5;
    cursor: default;
}

@media (max-width: 680px) {
    .onedown-pay-dialog-head {
        padding: 22px 20px 14px;
    }

    .onedown-pay-dialog-head h2 {
        font-size: 19px;
    }

    .onedown-pay-dialog-body {
        padding: 0 20px 10px;
    }

    .onedown-pay-dialog-actions {
        padding: 14px 20px 20px;
        flex-direction: column-reverse;
    }

    .onedown-pay-dialog-actions button {
        width: 100%;
    }
}


.paid-posts-list {
    padding: 8px 0;
}

.paid-post-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
    transition: background .2s;
}

.paid-post-item:hover {
    background: #f9fafb;
}

.paid-post-item:last-child {
    border-bottom: none;
}

.paid-post-info strong a {
    color: #252c3a;
    font-size: 14px;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.paid-post-info strong a:hover {
    color: var(--od-primary, #667eea);
}

.paid-post-type {
    font-size: 11px;
    color: #fff;
    background: #9ca3af;
    padding: 2px 8px;
    border-radius: 10px;
}

.paid-post-view {
    flex-shrink: 0;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--od-primary, #667eea);
    background: #eef2ff;
    text-decoration: none;
    transition: all .2s;
}

.paid-post-view:hover {
    background: #dde4ff;
    color: var(--od-primary, #667eea);
}


.onedown-dc {
    max-width: 800px;
    margin: 0 auto;
}

.onedown-dc-head {
    margin-bottom: 24px;
    padding: 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--od-primary, #667eea), #764ba2);
    color: #fff;
}

.onedown-dc-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
}

.onedown-dc-head p {
    margin: 0;
    opacity: .85;
    font-size: 14px;
}

.onedown-dc-post {
    margin-bottom: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.onedown-dc-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.onedown-dc-post-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.onedown-dc-post-head h3 a {
    color: #252c3a;
    text-decoration: none;
}

.onedown-dc-post-head h3 a:hover {
    color: var(--od-primary, #667eea);
}

.onedown-dc-post-count {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.onedown-dc-list {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onedown-dc-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    background: #fafbfc;
    transition: background .2s;
}

.onedown-dc-item:hover {
    background: #fff;
    border-color: #e5e7eb;
}

.onedown-dc-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.onedown-dc-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 16px;
}

.onedown-dc-item-info strong {
    display: block;
    color: #252c3a;
    font-size: 14px;
    font-weight: 700;
}

.onedown-dc-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
}

.onedown-dc-item-meta em {
    font-style: normal;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.onedown-dc-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.onedown-dc-copy-btn {
    font-size: 12px;
    color: #6b7280;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: #f3f4f6;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    font-family: inherit;
}

.onedown-dc-copy-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.onedown-dc-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--od-primary, #667eea);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: opacity .2s;
    white-space: nowrap;
}

.onedown-dc-dl-btn:hover {
    opacity: .9;
    color: #fff;
}

.onedown-dc-qrcode {
    flex-shrink: 0;
    text-align: center;
    padding-left: 12px;
    border-left: 1px solid #f3f4f6;
}

.onedown-dc-qrcode img {
    width: 56px;
    height: 56px;
    display: block;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.onedown-dc-qrcode span {
    display: block;
    font-size: 10px;
    color: #9ca3af;
    margin-top: 2px;
}

.onedown-dc-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.onedown-dc-empty i {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    color: #d1d5db;
}

.onedown-dc-empty p {
    font-size: 15px;
    margin: 0 0 16px;
    color: #6b7280;
}

.onedown-dc-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 8px;
    background: var(--od-primary, #667eea);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s;
}

.onedown-dc-home-btn:hover {
    opacity: .9;
    color: #fff;
}

@media (max-width: 680px) {
    .onedown-dc-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .onedown-dc-item-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .onedown-dc-qrcode {
        display: none;
    }

    .onedown-dc-copy-btn,
    .onedown-dc-dl-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
}


.onedown-wechat-box {
    text-align: center;
}

.onedown-wechat-inner {
    max-width: 400px;
    margin: 0 auto;
}

.onedown-wechat-qrcode {
    margin-bottom: 16px;
}

.onedown-wechat-qrcode img {
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid var(--od-line);
}

.onedown-wechat-qrcode-placeholder {
    width: 160px;
    height: 160px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #07c160, #06ad56);
    color: #fff;
    font-size: 56px;
}

.onedown-wechat-info {
    margin-bottom: 16px;
}

.onedown-wechat-title {
    font-size: 16px;
    font-weight: 800;
    color: #252c3a;
    margin-bottom: 12px;
}

.onedown-wechat-title i {
    color: #07c160;
    margin-right: 6px;
}

.onedown-wechat-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #6c7482;
    line-height: 1.6;
}

.onedown-wechat-steps strong {
    color: #07c160;
    background: rgba(7, 193, 96, .1);
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.onedown-wechat-error {
    font-size: 13px;
    color: #e74c3c;
    margin-bottom: 10px;
    font-weight: 600;
}

.onedown-wechat-form {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.onedown-wechat-input {
    flex: 1;
    max-width: 180px;
    padding: 8px 14px;
    border: 1px solid rgba(40, 46, 60, .14);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #fff;
    transition: border-color .2s ease;
}

.onedown-wechat-input:focus {
    border-color: #07c160;
}

.onedown-wechat-submit {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #07c160, #06ad56);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s ease, transform .15s ease;
}

.onedown-wechat-submit:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.onedown-wechat-submit:disabled {
    opacity: .5;
    cursor: default;
    transform: none;
}


[data-theme="dark"] {

    --od-text: #eef1f7;
    --od-muted: #aeb8cc;
    --od-heading: #ffffff;

    --od-line: rgba(165, 185, 225, .2);

    --od-bg: #0f1219;
    --od-surface: #1d2330;
    --od-surface-2: #2a313f;
    --od-card: rgba(29, 35, 48, .96);

    --od-shadow: 0 14px 38px rgba(0, 0, 0, .55);
}

[data-theme="dark"] body {
    color: var(--od-text);
    background:
        radial-gradient(circle at 14% 8%, rgba(240, 68, 148, .08), transparent 30%),
        radial-gradient(circle at 86% 4%, rgba(79, 124, 255, .1), transparent 28%),
        linear-gradient(180deg, #141823 0%, var(--od-bg) 46%, #0b0e14 100%);
}


[data-theme="dark"] .site-header {
    border-bottom-color: var(--od-line);
    background: rgba(15, 18, 25, .72);
}

[data-theme="dark"] .site-header.is-sticky {
    background: rgba(15, 18, 25, .94);
}


[data-theme="dark"] .input-icon-wrap .form-control,
[data-theme="dark"] .nav-dropdown,
[data-theme="dark"] .nav-user-menu,
[data-theme="dark"] .owl-dynamic,
[data-theme="dark"] .search-form,
[data-theme="dark"] .search-page-form {
    background: var(--od-surface);
    border-color: var(--od-line);
    color: var(--od-text);
}


[data-theme="dark"] .category-post-card,
[data-theme="dark"] .vip-method-option,
[data-theme="dark"] .article-neighbor-item,
[data-theme="dark"] .related-card,
[data-theme="dark"] .comment-card,
[data-theme="dark"] .comment-form-field textarea,
[data-theme="dark"] .recommend,
[data-theme="dark"] .featured>a,
[data-theme="dark"] .form-control-icon,
[data-theme="dark"] .user-vip-status span,
[data-theme="dark"] .user-page-search,
[data-theme="dark"] .account-form select,
[data-theme="dark"] .mobile-drawer-panel,
[data-theme="dark"] .mobile-drawer-item,
[data-theme="dark"] .search-modal-dialog,
[data-theme="dark"] .float-btn .float-dropdown,
[data-theme="dark"] .float-qrcode,
[data-theme="dark"] .onedown-dc-post,
[data-theme="dark"] .pay-method-option,
[data-theme="dark"] .qrcode-img,
[data-theme="dark"] .qrcode-verify-btn,
[data-theme="dark"] .onedown-wechat-input {
    background: var(--od-surface);
    border-color: var(--od-line);
    color: var(--od-text);
}


[data-theme="dark"] .dynamic-item:hover,
[data-theme="dark"] .post-item:hover,
[data-theme="dark"] .doc-list a:hover,
[data-theme="dark"] .side-news-item:hover,
[data-theme="dark"] .rank-item:hover,
[data-theme="dark"] .text-rank-panel a:hover,
[data-theme="dark"] .search-hot-words a:hover,
[data-theme="dark"] .search-trend-list a:hover,
[data-theme="dark"] .od_comments .comment-item:hover,
[data-theme="dark"] .onedown-dc-item:hover,
[data-theme="dark"] .search-form:focus-within,
[data-theme="dark"] .search-modal-input-wrap:focus-within,
[data-theme="dark"] .od_search .search-input-group:focus-within {
    background: var(--od-surface-2);
}

[data-theme="dark"] .search-hot-words a {
    background: var(--od-surface);
    color: var(--od-muted);
}


[data-theme="dark"] .sign-logo a,
[data-theme="dark"] .sign-panel-header,
[data-theme="dark"] .brand,
[data-theme="dark"] .nav-user-text strong,
[data-theme="dark"] .nav-user-name,
[data-theme="dark"] .dynamic-head h2,
[data-theme="dark"] .division-item strong,
[data-theme="dark"] .dynamic-item strong,
[data-theme="dark"] .category-posts-head h2,
[data-theme="dark"] .widget h3,
[data-theme="dark"] .doc-list .doc-title,
[data-theme="dark"] .side-news-body strong,
[data-theme="dark"] .rank-body strong,
[data-theme="dark"] .category-card h3,
[data-theme="dark"] .text-rank-panel strong,
[data-theme="dark"] .notice-dialog h2,
[data-theme="dark"] .vip-pay-head h2,
[data-theme="dark"] .vip-pay-block h3,
[data-theme="dark"] .vip-plan-option strong,
[data-theme="dark"] .vip-order-box strong,
[data-theme="dark"] .article-head h1,
[data-theme="dark"] .article-content h2,
[data-theme="dark"] .paid-content-unlocked h3,
[data-theme="dark"] .article-neighbor-item strong,
[data-theme="dark"] .article-related-head h2,
[data-theme="dark"] .related-card strong,
[data-theme="dark"] .comment-card h2,
[data-theme="dark"] .comment-login-tip-text strong,
[data-theme="dark"] .comment-item .comment-body>strong a,
[data-theme="dark"] #reply-title,
[data-theme="dark"] .article-pay-summary strong,
[data-theme="dark"] .pricing-head h2,
[data-theme="dark"] .plan-price,
[data-theme="dark"] .auth-card h2,
[data-theme="dark"] .user-stat-grid strong,
[data-theme="dark"] .user-vip-info h2,
[data-theme="dark"] .user-vip-status strong,
[data-theme="dark"] .favorite-card h3,
[data-theme="dark"] .user-timeline strong,
[data-theme="dark"] .search-trend-list strong,
[data-theme="dark"] .onedown-paid-extra-title,
[data-theme="dark"] .qrcode-pay-name,
[data-theme="dark"] .pay-success h3,
[data-theme="dark"] .pay-method-block h4,
[data-theme="dark"] .onedown-pay-dialog-head h2,
[data-theme="dark"] .onedown-pay-dialog-body .pay-order-row strong {
    color: var(--od-heading);
}


[data-theme="dark"] .sign-tab:hover,
[data-theme="dark"] .nav-item>a,
[data-theme="dark"] .nav-dropdown a,
[data-theme="dark"] .menu-btn,
[data-theme="dark"] .nav-link-btn,
[data-theme="dark"] .nav-avatar,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .guest-btn,
[data-theme="dark"] .nav-user-menu>a,
[data-theme="dark"] .owl-dynamic-track a,
[data-theme="dark"] .search-form input,
[data-theme="dark"] .friend-links a,
[data-theme="dark"] .tag-cloud a,
[data-theme="dark"] .notice-dialog-body li,
[data-theme="dark"] .vip-method-option,
[data-theme="dark"] .category-filter a,
[data-theme="dark"] .article-summary,
[data-theme="dark"] .article-content,
[data-theme="dark"] .paid-resource-meta span,
[data-theme="dark"] .article-actions button,
[data-theme="dark"] .comment-login-btn,
[data-theme="dark"] .comment-form-field textarea,
[data-theme="dark"] .article-toc a,
[data-theme="dark"] .pricing-card li,
[data-theme="dark"] .faq-list summary,
[data-theme="dark"] .auth-form label,
[data-theme="dark"] .form-control-icon input,
[data-theme="dark"] .check-line,
[data-theme="dark"] .user-sidebar a,
[data-theme="dark"] .user-page-tabs a,
[data-theme="dark"] .user-page-search input,
[data-theme="dark"] .account-form label,
[data-theme="dark"] .account-form select,
[data-theme="dark"] .account-actions a,
[data-theme="dark"] .search-page-form input,
[data-theme="dark"] .search-hot-tags a,
[data-theme="dark"] .pay-method-option {
    color: var(--od-muted);
}


[data-theme="dark"] .icon-btn,
[data-theme="dark"] .menu-btn,
[data-theme="dark"] .nav-link-btn {
    background: rgba(255, 255, 255, .06);
}


[data-theme="dark"] .author-card,
[data-theme="dark"] .vip-plan-option,
[data-theme="dark"] .comment-form-field input,
[data-theme="dark"] .account-form input,
[data-theme="dark"] .account-form textarea,
[data-theme="dark"] .onedown-paid-extra,
[data-theme="dark"] .onedown-dc-item,
[data-theme="dark"] .form-control,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .favorite-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .faq-list summary,
[data-theme="dark"] .doc-list a,
[data-theme="dark"] .side-news-item,
[data-theme="dark"] .rank-item,
[data-theme="dark"] .post-item,
[data-theme="dark"] .dynamic-item,
[data-theme="dark"] .text-rank-panel a,
[data-theme="dark"] .search-trend-list a {
    background: var(--od-surface);
    border-color: var(--od-line);
    color: var(--od-text);
}


[data-theme="dark"] .post-item:hover,
[data-theme="dark"] .author-card:hover,
[data-theme="dark"] .onedown-dc-item:hover {
    background: var(--od-surface-2);
}


[data-theme="dark"] .onedown-paid-extra,
[data-theme="dark"] .onedown-paid-extra-head,
[data-theme="dark"] .onedown-dc-post,
[data-theme="dark"] .onedown-dc-item,
[data-theme="dark"] .onedown-dc-qrcode img {
    border-color: var(--od-line);
}


[data-theme="dark"] .article-content a:not(.btn) {
    color: #ff8ab8;
}


[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .menu-btn:hover,
[data-theme="dark"] .nav-link-btn:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--od-heading);
}


[data-theme="dark"] .nav-item>a:hover,
[data-theme="dark"] .nav-dropdown a:hover,
[data-theme="dark"] .nav-user-menu>a:hover,
[data-theme="dark"] .friend-links a:hover,
[data-theme="dark"] .tag-cloud a:hover,
[data-theme="dark"] .article-toc a:hover,
[data-theme="dark"] .user-sidebar a:hover,
[data-theme="dark"] .doc-list a:hover .doc-title,
[data-theme="dark"] .side-news-item:hover strong,
[data-theme="dark"] .rank-item:hover strong {
    color: var(--od-primary);
}


[data-theme="dark"] ::selection {
    background: rgba(240, 68, 148, .35);
    color: #fff;
}


[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-control-icon input:focus,
[data-theme="dark"] .comment-form-field textarea:focus,
[data-theme="dark"] .account-form select:focus,
[data-theme="dark"] .search-page-form input:focus {
    border-color: rgba(240, 68, 148, .6);
    box-shadow: 0 0 0 3px rgba(240, 68, 148, .15);
    outline: none;
}


[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6b7387;
}


[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(150, 170, 210, .22);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 170, 210, .35);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}


.theme-toggle-btn .fa-sun-o {
    display: none;
}

[data-theme="dark"] .page-hero p,
[data-theme="dark"] .member-hero p,
[data-theme="dark"] .notice-dialog-body p,
[data-theme="dark"] .vip-pay-head p,
[data-theme="dark"] .vip-plan-option small,
[data-theme="dark"] .vip-order-box div,
[data-theme="dark"] .vip-pay-status,
[data-theme="dark"] .vip-toast,
[data-theme="dark"] .sign-toast,
[data-theme="dark"] .notice-secondary,
[data-theme="dark"] .vip-pay-secondary,
[data-theme="dark"] .nav-dropdown a i,
[data-theme="dark"] .nav-badge,
[data-theme="dark"] .comment-item .comment-meta,
[data-theme="dark"] .comment-item .comment-time,
[data-theme="dark"] .comment-item .comment-text,
[data-theme="dark"] .article-meta,
[data-theme="dark"] .article-content blockquote,
[data-theme="dark"] .article-content pre,
[data-theme="dark"] .article-content code,
[data-theme="dark"] .article-content table,
[data-theme="dark"] .article-content th,
[data-theme="dark"] .article-content td,
[data-theme="dark"] .article-content hr,
[data-theme="dark"] .sign-panel-body,
[data-theme="dark"] .sign-form input,
[data-theme="dark"] .sign-form textarea,
[data-theme="dark"] .sign-form select,
[data-theme="dark"] .sign-form .form-control,
[data-theme="dark"] .sign-form .form-group,
[data-theme="dark"] .sign-form .input-group,
[data-theme="dark"] .sign-form .input-group-text,
[data-theme="dark"] .sign-form .checkbox,
[data-theme="dark"] .sign-form .radio,
[data-theme="dark"] .sign-form .btn,
[data-theme="dark"] .notice-dialog,
[data-theme="dark"] .vip-pay-dialog,
[data-theme="dark"] .sign-dialog,
[data-theme="dark"] .popup-dialog,
[data-theme="dark"] .modal-dialog,
[data-theme="dark"] .dialog,
[data-theme="dark"] .toast {
    color: var(--od-muted);
    background: var(--od-surface);
    border-color: var(--od-line);
}

[data-theme="dark"] .notice-mask,
[data-theme="dark"] .vip-pay-mask,
[data-theme="dark"] .sign-mask,
[data-theme="dark"] .popup-mask,
[data-theme="dark"] .modal-mask {
    background: rgba(6, 10, 16, .72);
}

[data-theme="dark"] .sign-toast.toast-success,
[data-theme="dark"] .vip-toast {
    background: linear-gradient(135deg, rgba(53, 201, 135, .95), rgba(33, 201, 143, .95));
    color: #fff;
}

[data-theme="dark"] .sign-toast.toast-error {
    background: linear-gradient(135deg, rgba(255, 95, 109, .96), rgba(224, 74, 88, .96));
    color: #fff;
}

[data-theme="dark"] .section-card,
[data-theme="dark"] .tabs a,
[data-theme="dark"] .post-item,
[data-theme="dark"] .post-thumb,
[data-theme="dark"] .category-posts,
[data-theme="dark"] .widget,
[data-theme="dark"] .profile-actions a,
[data-theme="dark"] .doc-list a,
[data-theme="dark"] .side-news-item,
[data-theme="dark"] .rank-item,
[data-theme="dark"] .category-card,
[data-theme="dark"] .sidebar-swiper,
[data-theme="dark"] .sidebar-swiper .swiper-slide,
[data-theme="dark"] .sidebar-slide,
[data-theme="dark"] .text-rank-tabs button,
[data-theme="dark"] .page-btn,
[data-theme="dark"] .page-dot,
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span,
[data-theme="dark"] .page-numbers,
[data-theme="dark"] .alert,
[data-theme="dark"] .notice,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty,
[data-theme="dark"] .user-hero,
[data-theme="dark"] .user-vip-panel,
[data-theme="dark"] .user-center-shell,
[data-theme="dark"] .user-main,
[data-theme="dark"] .user-profile,
[data-theme="dark"] .user-profile-badges,
[data-theme="dark"] .user-stat-grid article,
[data-theme="dark"] .user-sidebar,
[data-theme="dark"] .user-sidebar a,
[data-theme="dark"] .user-sidebar a.active,
[data-theme="dark"] .sign-tabs,
[data-theme="dark"] .sign-tab,
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--od-surface);
    border-color: var(--od-line);
    color: var(--od-text);
}

[data-theme="dark"] .post-item:hover,
[data-theme="dark"] .doc-list a:hover,
[data-theme="dark"] .side-news-item:hover,
[data-theme="dark"] .rank-item:hover,
[data-theme="dark"] .category-card:hover,
[data-theme="dark"] .widget:hover,
[data-theme="dark"] .profile-actions a:hover,
[data-theme="dark"] .tabs a:hover,
[data-theme="dark"] .page-btn:hover {
    background: var(--od-surface-2);
}

[data-theme="dark"] .post-thumb,
[data-theme="dark"] .doc-list .doc-thumb,
[data-theme="dark"] .side-news-thumb,
[data-theme="dark"] .sidebar-swiper,
[data-theme="dark"] .sidebar-swiper .swiper-slide,
[data-theme="dark"] .sidebar-slide,
[data-theme="dark"] .category-card {
    box-shadow: var(--od-shadow);
}

[data-theme="dark"] .post-meta,
[data-theme="dark"] .category-post-meta,
[data-theme="dark"] .rank-meta,
[data-theme="dark"] .user-profile p,
[data-theme="dark"] .profile-bio,
[data-theme="dark"] .profile-stats-item span,
[data-theme="dark"] .tabs a,
[data-theme="dark"] .page-dot,
[data-theme="dark"] .notice,
[data-theme="dark"] .alert,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty {
    color: var(--od-muted);
}

[data-theme="dark"] .post-item:hover,
[data-theme="dark"] .doc-list a:hover,
[data-theme="dark"] .side-news-item:hover,
[data-theme="dark"] .rank-item:hover,
[data-theme="dark"] .category-card:hover,
[data-theme="dark"] .tabs a.active,
[data-theme="dark"] .page-btn.active,
[data-theme="dark"] .user-sidebar a.active,
[data-theme="dark"] .sign-tab.active {
    box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .avatar,
[data-theme="dark"] .profile-card.logged-in .profile-avatar-wrap .avatar,
[data-theme="dark"] .profile-card.logged-in .profile-avatar-wrap img.avatar {
    border-color: var(--od-surface);
}

[data-theme="dark"] .post-thumb,
[data-theme="dark"] .doc-list .doc-thumb,
[data-theme="dark"] .side-news-thumb,
[data-theme="dark"] .sidebar-swiper,
[data-theme="dark"] .sidebar-swiper .swiper-slide,
[data-theme="dark"] .sidebar-slide {
    background: #161b25;
}

[data-theme="dark"] .page-btn,
[data-theme="dark"] .page-dot,
[data-theme="dark"] .tabs a,
[data-theme="dark"] .profile-actions a,
[data-theme="dark"] .user-sidebar a,
[data-theme="dark"] .sign-tab {
    background: rgba(255, 255, 255, .04);
}

[data-theme="dark"] .table thead th {
    background: rgba(255, 255, 255, .03);
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, .03);
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] .notice-success {
    background: rgba(53, 201, 135, .12);
    color: #9ff0c9;
}

[data-theme="dark"] .alert-warning,
[data-theme="dark"] .notice-warning {
    background: rgba(255, 159, 67, .12);
    color: #ffd39b;
}

[data-theme="dark"] .alert-error,
[data-theme="dark"] .notice-error {
    background: rgba(255, 95, 109, .12);
    color: #ffb6bd;
}

/* ── 分享弹窗 ── */
.share-modal-dialog .vip-pay-body {
    padding-bottom: 6px;
}

.share-platforms {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 6px 0 12px;
}

.share-platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px 12px;
    border: 1.5px solid var(--od-line);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}

.share-platform-btn:hover {
    border-color: var(--share-color, var(--od-primary));
    background: color-mix(in srgb, var(--share-color, var(--od-primary)) 6%, transparent);
    transform: translateY(-2px);
}

.share-platform-btn:active {
    transform: translateY(0);
}

.share-platform-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--share-color, var(--od-primary)) 12%, transparent);
    color: var(--share-color, var(--od-primary));
    font-size: 20px;
    transition: transform .2s ease;
}

.share-platform-btn:hover .share-platform-icon {
    transform: scale(1.1);
}

.share-platform-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--od-text);
    white-space: nowrap;
}

.share-qrcode-wrap {
    text-align: center;
    padding: 8px 0 16px;
}

.share-qrcode-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--od-text);
}

.share-qrcode-canvas {
    width: 180px;
    height: 180px;
    border-radius: 12px;
    border: 2px solid var(--od-line);
    background: #fff;
    margin: 0 auto 12px;
    display: block;
}

.share-qrcode-tip {
    font-size: 13px;
    color: var(--od-muted);
    margin: 8px 0 0;
}

/* 移动端分享弹窗适配 */
@media (max-width: 480px) {
    .share-platforms {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .share-platform-btn {
        padding: 12px 6px 10px;
    }

    .share-platform-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .share-platform-name {
        font-size: 11px;
    }
}

/* ── 联系信息弹窗复用 VIP 支付弹窗样式 ── */