/* --- 基础重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: #ffffff;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px; /* 增加全局边距，防止手机端贴边 */
    width: 100%;
}

/* --- 导航栏 --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 35px 0;
    height: auto;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, height 0.3s ease, padding 0.3s ease;
}

/* 滚动时显示毛玻璃效果 */
header.scrolled {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 66px;
    padding: 0;
    display: flex;
    align-items: center;
}

/* 滚动时导航菜单和logo颜色 */
header.scrolled .nav-menu a,
header.scrolled .logo {
    color: #252525;
}

/* 滚动时菜单按钮颜色 */
header.scrolled .menu-toggle span {
    background: #252525;
}

header .container {
    display: flex;
    align-items: center;
}
.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.nav-login-btn {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    opacity: 0.85;
    transition: 0.3s;
    cursor: pointer;
}
.nav-login-btn:hover {
    opacity: 1;
}
header.scrolled .nav-login-btn {
    color: #252525;
}
.header-wrapper header .nav-login-btn {
    color: #666666;
}

/* 文章详情页导航栏样式 - 使用和首页/分类页相同的样式 */
.header-wrapper header {
    position: relative;
    padding: 35px 0;
    margin-bottom: 40px;
    background: transparent;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, height 0.3s ease, padding 0.3s ease;
}

/* 阅读页滚动时显示毛玻璃效果 - 使用和首页/分类页相同的样式 */
.header-wrapper header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 66px;
    padding: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

/* 阅读页滚动时导航菜单和logo颜色 - 使用和首页/分类页相同的样式 */
.header-wrapper header.scrolled .nav-menu a,
.header-wrapper header.scrolled .logo {
    color: #252525;
}

/* 阅读页滚动时菜单按钮颜色 */
.header-wrapper header.scrolled .menu-toggle span {
    background: #252525;
}

/* 阅读页未滚动时的导航菜单和logo颜色 */
.header-wrapper header .logo {
    color: #666666;
}

.header-wrapper header .nav-menu a {
    color: #666666;
}
/* 阅读页PC端二级菜单样式 */
.header-wrapper .nav-menu > li {
    position: relative;
}

.header-wrapper .nav-menu > li.has-submenu > a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-wrapper .submenu-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.6;
    transition: transform 0.3s ease;
}

.header-wrapper .has-submenu:hover .submenu-arrow {
    transform: rotate(180deg);
}

.header-wrapper .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 160px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    margin-top: 15px;
}

.header-wrapper .submenu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.75);
}

.header-wrapper .has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
/* nav-auth-li 现在用右侧抽屉，不再用 submenu */

.header-wrapper .submenu li {
    margin: 0 !important;
}

.header-wrapper .submenu li a {
    display: block;
    padding: 12px 24px;
    color: #555 !important;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.25s ease;
    opacity: 1 !important;
}

.header-wrapper .submenu li a:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333 !important;
    padding-left: 28px;
}
.header-wrapper .submenu li a[href="/logout"]:hover {
    color: #e53e3e !important;
    background: #fef2f2;
}

.header-wrapper .submenu li a.active {
    color: #5d6d7e !important;
    background: rgba(93, 109, 126, 0.1);
}

.logo {
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.logo img {
    height: 32px;
    width: auto;
    display: block;
}

.logo svg {
    height: 32px;
    width: auto;
    display: block;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin-left: 40px;
}

.nav-menu li { margin-left: 0; margin-right: 35px; }
.nav-menu li:last-child { margin-right: 0; }

.nav-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    opacity: 0.85;
    transition: 0.3s;
}

/* 二级菜单样式 */
.nav-menu > li {
    position: relative;
}

.nav-menu > li.has-submenu > a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.submenu-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.6;
    transition: transform 0.3s ease;
}

.has-submenu:hover .submenu-arrow,
.has-submenu.active .submenu-arrow {
    transform: rotate(180deg);
}

/* 登录注册弹窗（kehua风格） */
.kehua-auth-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.kehua-auth-overlay.kehua-auth-open {
    opacity: 1; visibility: visible;
}
.kehua-auth-modal {
    width: 420px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
    background: #fff; border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0,0,0,.18);
    padding: 36px 32px 32px; position: relative;
    transform: translateY(24px) scale(.96);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    overflow-y: auto;
}
.kehua-auth-open .kehua-auth-modal {
    transform: translateY(0) scale(1);
}
.kehua-auth-close {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px; border: none;
    background: #f0f2f5; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: #666; transition: all .2s;
}
.kehua-auth-close:hover {
    background: #e4e6eb; color: #333; transform: rotate(90deg);
}
.kehua-auth-header {
    text-align: center; margin-bottom: 20px;
}
.kehua-auth-logo { margin: 0 auto 14px; }
.kehua-auth-logo--img img {
    display: block; max-width: 180px; max-height: 52px;
    width: auto; height: auto; object-fit: contain; margin: 0 auto;
}
.kehua-auth-tabs {
    display: flex; background: #f0f2f5; border-radius: 12px;
    padding: 4px; margin-bottom: 24px;
}
.kehua-auth-tab {
    flex: 1; height: 40px; border: none; background: transparent;
    border-radius: 10px; font-size: 14px; font-weight: 600;
    color: #888; cursor: pointer; transition: all .25s;
}
.kehua-auth-tab.kehua-active {
    background: #fff; color: #3884f4;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.kehua-auth-field {
    display: flex; align-items: center;
    border: 1.5px solid #e4e6eb; border-radius: 12px;
    padding: 0 14px; margin-bottom: 14px;
    transition: border-color .2s, box-shadow .2s;
}
.kehua-auth-field:focus-within {
    border-color: #3884f4;
    box-shadow: 0 0 0 3px rgba(56,132,244,.1);
}
.kehua-auth-field svg {
    width: 20px; height: 20px; color: #b0b0b0; flex-shrink: 0;
}
.kehua-auth-field:focus-within svg { color: #3884f4; }
.kehua-auth-field input {
    flex: 1; height: 48px; border: none; background: transparent;
    font-size: 14px; padding: 0 12px; outline: none;
    color: #333; min-width: 0;
}
.kehua-auth-field input::placeholder { color: #aaa; }
.kehua-auth-field-wrap { margin-bottom: 14px; }
.kehua-auth-field-wrap .kehua-auth-field { margin-bottom: 0; }
.kehua-auth-field-tip {
    display: none;
    font-size: 12px;
    color: #dc2626;
    margin-top: 6px;
    padding-left: 4px;
    line-height: 1.4;
}
.kehua-auth-field-tip.kehua-show { display: block; }
.kehua-auth-field.kehua-invalid {
    border-color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
}
.kehua-auth-field.kehua-invalid:focus-within {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.kehua-auth-field.kehua-invalid svg { color: #dc2626; }
.kehua-auth-error {
    background: #fef2f2; color: #dc2626;
    padding: 10px 14px; border-radius: 10px;
    font-size: 13px; margin-bottom: 14px;
    display: none; line-height: 1.5;
}
.kehua-auth-error.kehua-show { display: block; }
.kehua-auth-submit {
    width: 100%; height: 48px; border: none;
    background: linear-gradient(135deg, #3884f4, #60a5fa); color: #fff;
    border-radius: 12px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all .25s;
    margin-top: 4px; letter-spacing: .5px;
}
.kehua-auth-submit:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(56,132,244,.35);
    transform: translateY(-1px);
}
.kehua-auth-submit:active:not(:disabled) { transform: translateY(0); }
.kehua-auth-submit:disabled {
    opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.kehua-auth-submit.kehua-auth-success {
    background: linear-gradient(135deg, #22c55e, #4ade80);
}
.kehua-auth-field-code {
    flex-wrap: nowrap;
}
.kehua-auth-send-code {
    flex-shrink: 0;
    height: 34px;
    padding: 0 14px;
    border: none;
    background: #3884f4;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
}
.kehua-auth-send-code:hover:not(:disabled) {
    background: #2a6fd6;
}
.kehua-auth-send-code:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.kehua-auth-footer {
    text-align: center; margin-top: 16px; font-size: 13px; color: #999;
}
.kehua-auth-footer a {
    color: #3884f4; text-decoration: none; font-weight: 500;
}
.kehua-auth-footer a:hover { text-decoration: underline; }
.kehua-auth-title {
    font-size: 20px; font-weight: 700; color: #1a1a1a;
    margin: 0 0 4px;
}
.kehua-auth-desc {
    font-size: 13px; color: #888; margin: 0;
}
@media (max-width: 480px) {
    .kehua-auth-modal {
        padding: 28px 20px 24px; border-radius: 20px;
        max-width: calc(100vw - 24px);
    }
    .kehua-auth-title { font-size: 18px; }
}

/* 独立登录/注册页（非弹窗，对齐 kehua_theme） */
.kehua-auth-page {
    min-height: calc(100vh - 66px);
    min-height: calc(100dvh - 66px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px 48px;
    box-sizing: border-box;
    background: transparent;
}
.kehua-auth-modal-static {
    transform: none !important;
    margin-top: 0;
}
.kehua-auth-modal-wide {
    width: 440px;
    max-width: calc(100vw - 32px);
}
.kehua-auth-back {
    display: inline-block;
    font-size: 13px;
    color: #888;
    text-decoration: none;
    margin-bottom: 16px;
    transition: color .2s;
}
.kehua-auth-back:hover { color: #3884f4; }
.kehua-auth-page .kehua-auth-modal { position: relative; }
.kehua-auth-page-links {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: #888;
}
.kehua-auth-page-links a {
    color: #3884f4;
    text-decoration: none;
    font-weight: 500;
}
.kehua-auth-page-links a:hover { text-decoration: underline; }
.kehua-auth-page-dot { margin: 0 8px; opacity: .45; }

body.kehua-auth-page-active .kehua-auth-overlay,
body.kehua-auth-page-active footer,
body.kehua-auth-page-active .mobile-tabbar { display: none !important; }

/* 登录/注册页（对齐 kehua_theme：渐变底 + 顶栏毛玻璃 + 无滚动） */
body.kehua-auth-page-active {
    background: linear-gradient(165deg, #eef4ff 0%, #f8fafc 42%, #f0f2f5 100%);
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}
body.kehua-auth-page-active.has-mobile-tabbar {
    padding-bottom: 0 !important;
}
body.kehua-auth-page-active header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 66px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
}
body.kehua-auth-page-active header .nav-menu a,
body.kehua-auth-page-active header .logo,
body.kehua-auth-page-active header .menu-toggle span {
    color: #252525;
    opacity: 1;
}
body.kehua-auth-page-active .kehua-auth-page {
    margin-top: 66px;
}
@media (max-width: 480px) {
    body.kehua-auth-page-active .kehua-auth-page {
        padding: 24px 16px 32px;
    }
}

/* 导航栏用户头像下拉 - 右对齐 */
.nav-auth-li { position: relative; }
.nav-auth-li > a { opacity: 1 !important; cursor: pointer; }
.nav-avatar-link {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 0 !important;
}
.nav-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.2s;
}
.nav-avatar-link:hover .nav-avatar-img {
    border-color: rgba(56, 132, 244, 0.5);
}
header.scrolled .nav-avatar-img {
    border-color: rgba(0, 0, 0, 0.08);
}
header.scrolled .nav-avatar-link:hover .nav-avatar-img {
    border-color: rgba(56, 132, 244, 0.5);
}
.nav-login-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s, background-color 0.2s;
}
.nav-login-icon:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
}
header.scrolled .nav-login-icon {
    color: #94a3b8;
}
header.scrolled .nav-login-icon:hover {
    color: #3884f4;
    background-color: rgba(56, 132, 244, 0.08);
}
.header-wrapper .nav-login-icon {
    color: #94a3b8;
}
.header-wrapper .nav-login-icon:hover {
    color: #3884f4;
    background-color: rgba(56, 132, 244, 0.08);
}
body.member-page--sub-active .nav-login-icon {
    color: #94a3b8;
}
body.member-page--sub-active .nav-login-icon:hover {
    color: #3884f4;
    background-color: rgba(56, 132, 244, 0.08);
}
/* 顶栏头像悬停用户菜单（原样复制 kehua_theme） */
.kehua-header-user-pop {
    position: relative;
    z-index: 6;
    list-style: none;
}
.kehua-header-user-pop::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: 100%;
    height: 14px;
}
.kehua-header-user-pop__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: min(320px, calc(100vw - 40px));
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.kehua-header-user-pop:hover .kehua-header-user-pop__panel,
.kehua-header-user-pop:focus-within .kehua-header-user-pop__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.kehua-header-user-pop__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}
.kehua-header-user-pop__head-bg {
    position: absolute;
    inset: 0;
    border-radius: 14px 14px 0 0;
    pointer-events: none;
    background: linear-gradient(0deg, #fff 10%, rgb(236, 243, 251) 100%);
}
.kehua-header-user-pop__head-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}
.kehua-header-user-pop__head-text {
    position: relative;
    min-width: 0;
    flex: 1;
}
.kehua-header-user-pop__name {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kehua-header-user-pop__uid {
    margin-top: 4px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.3;
    font-weight: 500;
}
.kehua-header-user-pop__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px 12px 10px;
}
.kehua-header-user-pop__cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 8px;
    background: #f5f7fa;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.kehua-header-user-pop__cell:hover {
    background: #e8ecf1;
    color: #1e293b;
    text-decoration: none;
}
.kehua-header-user-pop__ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #64748b;
    display: block;
}
.kehua-header-user-pop__cell:hover .kehua-header-user-pop__ico {
    color: #3884f4;
}
.kehua-header-user-pop__foot {
    padding: 0 12px 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.kehua-header-user-pop__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    min-height: 44px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #f5f7fa;
    color: #e74c3c;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.kehua-header-user-pop__logout .kehua-header-user-pop__ico {
    color: #e74c3c;
}
.kehua-header-user-pop__logout:hover {
    background: #fef2f2;
    color: #dc2626;
    text-decoration: none;
}
.kehua-header-user-pop__logout:hover .kehua-header-user-pop__ico {
    color: #dc2626;
}
@media (max-width: 992px) {
    .kehua-header-user-pop__panel {
        display: none !important;
    }
}

.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 160px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    margin-top: 15px;
}

.submenu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.75);
}

.has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.submenu li {
    margin: 0 !important;
}

.submenu li a {
    display: block;
    padding: 12px 24px;
    color: #555 !important;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.25s ease;
    opacity: 1 !important;
}

.submenu li a:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333 !important;
    padding-left: 28px;
}
.submenu li a[href="/logout"]:hover {
    color: #e53e3e !important;
    background: #fef2f2;
}

.submenu li a.active {
    color: #5d6d7e !important;
    background: rgba(93, 109, 126, 0.1);
}

/* 手机端菜单按钮 */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
    z-index: 1100;
}

.menu-toggle span {
    width: 25px;
    height: 2px;
    background: #fff;
    transition: 0.3s;
}

/* 手机端点击遮罩层 */
.menu-overlay {
    display: none;
    transition: 0.4s;
    z-index: 1050;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 手机端遮罩只覆盖左侧内容，不覆盖右侧菜单 */
@media (max-width: 992px) {
    .menu-overlay {
        right: 280px; /* 遮罩右侧边界，留出菜单宽度 */
        width: auto; /* 宽度自动，从left到right */
    }
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- 幻灯片区域 --- */
.slider-wrapper {
    position: relative;
    min-height: 850px; 
    display: flex;
    align-items: center;
    transition: background 1.5s ease;
    padding-top: 120px; /* 为固定导航栏留出空间 */
}

/* 渐变背景组 */
.bg-0 { background: linear-gradient(180deg, #d3d6e0 0%, #e9d6df 100%); }
.bg-1 { background: linear-gradient(180deg, #e0e8d5 0%, #d5e4e8 100%); }
.bg-2 { background: linear-gradient(180deg, #e9d9d3 0%, #d3dee0 100%); }

.slides-container {
    position: relative;
    width: 100%;
    display: grid;
}

.slide {
    grid-area: 1 / 1 / 2 / 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transform: translateY(15px);
}

.slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 统一布局布局：左图右文 */
.slide-content, .list-item {
    display: flex;
    align-items: center;
    gap: 80px;
}

.img-box {
    flex: 1.2;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.img-box a {
    display: block;
    width: 100%;
    height: 100%;
}

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

.text-box { flex: 1; }

.text-box h2 { font-size: 42px; margin-bottom: 25px; font-weight: 500; }
.text-box h3 { font-size: 32px; margin-bottom: 20px; font-weight: 500; }

.text-box p {
    font-size: 16px;
    color: #555;
    margin-bottom: 40px;
    max-width: 480px;
}

/* 首页幻灯片文本颜色为白色 */
.slider-wrapper .text-box h2,
.slider-wrapper .text-box h2 a {
    color: #fff;
}

.slider-wrapper .text-box p {
    color: #fff;
}

.btn-group { display: flex; gap: 15px; }
.btn {
    padding: 14px 35px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: inline-block;
}
.btn-dark { background: #1a1a1a; color: #fff; }
.btn-white { background: #fff; color: #1a1a1a; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

.dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.dot {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    cursor: pointer;
}

.dot.active { background: #fff; width: 30px; border-radius: 5px; }

/* --- 列表区域 --- */
.list-section { padding: 100px 0; }
.list-item { margin-bottom: 120px; }

/* --- 触底加载 --- */
.load-more-container {
    text-align: center;
    margin-top: 60px;
    padding: 40px 0;
}

.load-more-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.load-more-loader p {
    color: #999;
    font-size: 14px;
    margin: 0;
}

.load-more-end p {
    color: #999;
    font-size: 14px;
    margin: 0;
}

/* --- 页脚 --- */
footer {
    padding: 60px 0;
    text-align: center;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 14px;
}

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

/* --- 响应式适配 --- */
@media (max-width: 992px) {
    .container { padding: 0 25px; } /* 手机端统一左右间距 */
    
    .menu-toggle { display: none; }

    .nav-menu {
        display: none !important;
    }

    .submenu {
        display: none !important;
        visibility: visible;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, margin 0.3s ease;
    }
    
    .submenu::before {
        display: none;
    }
    
    .has-submenu:hover .submenu {
        transform: none;
    }
    
    .has-submenu.active .submenu {
        max-height: 500px;
        padding: 10px 0;
        margin-top: 15px;
    }
    
    .submenu li {
        margin: 0 !important;
    }
    
    .submenu li a {
        padding: 14px 20px;
        color: #666 !important;
        font-size: 15px;
        border-radius: 8px;
        margin: 2px 10px;
        display: block;
    }
    
    .submenu li a:hover,
    .submenu li a.active {
        background: #fff;
        color: #333 !important;
        padding-left: 20px;
    }

    /* 汉堡按钮交互效果 */
    .menu-toggle.active span { background: #333; }
    .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -7px); }

    .slider-wrapper { min-height: auto; padding-top: 100px; padding-bottom: 60px; }
    
    /* 手机端图片与文字改为上下结构 */
    .slide-content, .list-item { 
        flex-direction: column; 
        gap: 35px; 
        text-align: center; 
    }

    /* 关键：确保列表图片和幻灯片图片在手机端宽度一致 */
    .img-box { 
        width: 100%; 
        max-width: 100%; /* 充满容器，受限于 container 的 padding */
        flex: none; 
    }

    .text-box p { margin: 0 auto 30px; }
    .btn-group { justify-content: center; }
    .text-box h2 { font-size: 32px; }
    .text-box h3 { font-size: 26px; }

        /* 手机端列表区域增加顶部间距 */
        .list-section { padding-top: 60px; }
        
        /* 阅读页手机端导航栏样式 - 和分类页一致 */
        .header-wrapper header .menu-toggle {
            display: none;
        }
        .header-wrapper header .nav-menu {
            display: none !important;
        }
        
        .header-wrapper .has-submenu.active .submenu-arrow {
            transform: rotate(180deg);
        }
        
        .header-wrapper .submenu {
            position: static;
            transform: none;
            min-width: 100%;
            background: #f8f9fb;
            border-radius: 10px;
            box-shadow: none;
            padding: 0;
            margin-top: 0;
            max-height: 0;
            overflow: hidden;
            opacity: 1;
            visibility: visible;
        }
        
        .header-wrapper .submenu::before {
            display: none;
        }
        
        .header-wrapper .has-submenu:hover .submenu {
            transform: none;
        }
        
        .header-wrapper .has-submenu.active .submenu {
            max-height: 500px;
            padding: 10px 0;
            margin-top: 15px;
        }
        
        .header-wrapper .submenu li a {
            padding: 14px 20px;
            color: #666 !important;
            font-size: 15px;
            border-radius: 8px;
            margin: 2px 10px;
        }
        
        .header-wrapper .submenu li a:hover,
        .header-wrapper .submenu li a.active {
            background: #fff;
            color: #333 !important;
            padding-left: 20px;
        }
    }

/* 分类页标题头 */
.archive-header { text-align: center; padding: 120px 0 80px; margin-top: 80px; }
.archive-header h1 { font-size: 38px; color: #333; margin-bottom: 15px; }
.archive-header p { color: #999; font-size: 16px; }

/* 分类页导航栏字体颜色 */
body:has(.archive-header) header .logo,
body:has(.archive-header) header .nav-menu a {
    color: #666666;
}

body:has(.archive-header) header .menu-toggle span {
    background: #666666;
}

/* 分类页背景 - 和阅读页面一致 */
body:has(.archive-header) {
    background: linear-gradient(180deg, #e7ebf7 0%, #ffffff 100%);
    background-attachment: fixed;
}

/* 独立页面 - 导航栏字体颜色 */
body.page-body header .logo,
body.page-body header .nav-menu a {
    color: #252525;
}
body.page-body header .menu-toggle span {
    background: #252525;
}

/* 独立页面背景 - 和分类页一致 */
body.page-body {
    background: linear-gradient(180deg, #e7ebf7 0%, #ffffff 100%);
    background-attachment: fixed;
}

/* 文章详情页样式 */
.post-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 0;
    line-height: 1.8;
    font-size: 16px;
    color: #333;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 独立页面内容宽度和导航栏一致 */
main.container .post-content,
.cms-page__content.post-content {
    max-width: 100%;
}

/* 独立页面布局 */
.cms-page-wrap {
    padding-bottom: 80px;
}
main.container.cms-page-wrap {
    padding-top: 170px;
}
.cms-page__title {
    margin: 0 0 24px;
    font-size: 34px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}
.cms-page__content.post-content {
    padding: 0;
    clear: both;
}

/* 独立页面样式 */
main.container {
    padding-top: 100px; /* 为固定导航栏留出空间 */
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin: 1.6em 0 0.75em;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
}
.post-content h1:first-child,
.post-content h2:first-child,
.post-content h3:first-child,
.post-content h4:first-child,
.post-content h5:first-child,
.post-content h6:first-child {
    margin-top: 0;
}
.post-content h1 { font-size: 1.75em; }
.post-content h2 { font-size: 1.5em; }
.post-content h3 { font-size: 1.25em; }
.post-content h4 { font-size: 1.125em; }
.post-content h5 { font-size: 1.05em; }
.post-content h6 { font-size: 1em; color: #444; }

.post-content p {
    margin: 0 0 1em;
}

.post-content ul,
.post-content ol,
.post-content dl {
    margin: 0 0 1.25em;
    padding-left: 2em;
}
.post-content ul {
    list-style: disc;
}
.post-content ol {
    list-style: decimal;
}
.post-content li {
    margin-bottom: 0.55em;
}
.post-content li > ul,
.post-content li > ol {
    margin-top: 0.45em;
    margin-bottom: 0;
}
.post-content dt {
    font-weight: 600;
    margin-bottom: 0.35em;
}
.post-content dd {
    margin: 0 0 0.85em 1em;
}

.post-content a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.post-content a:hover {
    color: #1d4ed8;
}

.post-content strong,
.post-content b {
    font-weight: 600;
    color: #222;
}
.post-content em,
.post-content i {
    font-style: italic;
}

.post-content blockquote {
    margin: 1.25em 0;
    padding: 12px 18px;
    border-left: 4px solid #cbd5e1;
    background: #f8fafc;
    color: #555;
    font-style: italic;
}
.post-content blockquote p:last-child {
    margin-bottom: 0;
}

.post-content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.post-content table {
    width: 100%;
    margin: 1.25em 0;
    border-collapse: collapse;
    font-size: 0.95em;
}
.post-content th,
.post-content td {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}
.post-content th {
    background: #f8fafc;
    font-weight: 600;
}
.post-content tr:nth-child(even) td {
    background: #fcfcfd;
}

.post-content pre,
.post-content code {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.92em;
}
.post-content pre {
    margin: 1.25em 0;
    padding: 14px 16px;
    background: #f3f4f6;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.post-content code {
    padding: 0.15em 0.4em;
    background: #f3f4f6;
    border-radius: 4px;
}
.post-content pre code {
    padding: 0;
    background: transparent;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.25em 0;
}
.post-content img.left {
    float: left;
    margin: 0.25em 1.25em 1em 0;
}
.post-content img.right {
    float: right;
    margin: 0.25em 0 1em 1.25em;
}

.post-content figure {
    margin: 1.25em 0;
    text-align: center;
}
.post-content figcaption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #666;
}

.post-content .marker {
    background-color: #fef08a;
}

@media (max-width: 768px) {
    main.container.cms-page-wrap {
        padding-top: 130px;
    }
    .cms-page-wrap {
        padding-bottom: 48px;
    }
    .cms-page__title {
        font-size: 26px;
        margin-bottom: 18px;
    }
    .post-content {
        font-size: 15px;
        line-height: 1.75;
    }
    .post-content ul,
    .post-content ol,
    .post-content dl {
        padding-left: 1.5em;
    }
    .post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 隐藏阅读页正文中已在幻灯片使用的图片 */
body:has(.header-wrapper) .post-content img[style*="display:none"] {
    display: none !important;
}

.post-meta {
    text-align: center;
    color: #999;
    font-size: 14px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

/* 文章详情页顶部渐变背景区 */
.header-wrapper {
    background: linear-gradient(180deg, #e7ebf7 0%, #ffffff 100%);
    padding-top: 0; /* 导航栏的padding已经包含了顶部间距 */
    padding-bottom: 60px;
    position: relative;
    transition: background 1.5s ease;
}

/* 阅读页滚动时，为固定导航栏留出空间 */
.header-wrapper:has(header.scrolled) {
    padding-top: 66px;
}

/* Hero 区域 */
.hero-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.hero-left { flex: 1; }
.hero-left h1 { 
    font-size: clamp(28px, 4vw, 42px); 
    color: #333; 
    margin-bottom: 20px; 
    font-weight: 500;
}
.hero-left p { 
    font-size: 16px; 
    color: #8e9297; 
    margin-bottom: 30px; 
    max-width: 480px; 
    line-height: 1.8;
}

.price-tag { 
    font-size: 32px; 
    color: #ff5c5c; 
    font-weight: bold; 
    margin-bottom: 30px; 
}
.price-tag span { 
    font-size: 16px; 
    color: #cbd0d6; 
    text-decoration: line-through; 
    margin-left: 10px; 
}

.article-price-block {
    margin-bottom: 28px;
}
.article-price-block .price-tag--hero {
    margin-bottom: 12px;
}
.article-vip-card {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 0;
    padding: 8px 14px;
    background: #f3f5f8;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    line-height: 1.4;
    max-width: 100%;
}
.article-vip-card__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 0;
}
.article-vip-card__tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
}
.article-vip-card__tier:first-child {
    padding-left: 0;
}
.article-vip-card__tier + .article-vip-card__tier {
    border-left: 1px solid #dce0e6;
}
.article-vip-card__name {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}
.article-vip-card__price {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.article-vip-card__link {
    font-size: 12px;
    color: #1a73e8;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid #dce0e6;
}
.article-vip-card__link:hover {
    opacity: 0.72;
}
@media (max-width: 640px) {
    .article-vip-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
    }
    .article-vip-card__list {
        width: 100%;
    }
    .article-vip-card__tier {
        padding: 0 10px;
    }
    .article-vip-card__tier:first-child {
        padding-left: 0;
    }
    .article-vip-card__link {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

.btn-black { 
    background: #222; 
    color: #fff; 
}
.btn-white { 
    background: #fff; 
    color: #333; 
    border: 1px solid #eee; 
}

/* 按钮悬浮图片弹出效果 */
.btn-with-popup {
    position: relative;
    display: inline-block;
}

.btn-popup-image {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.btn-popup-image::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.9);
}

.btn-popup-image img {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: 8px;
}

.btn-with-popup:hover .btn-popup-image {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 手机端点击显示 */
.btn-with-popup.active .btn-popup-image {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 阅读页幻灯片 */
.post-slider {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}
.slider-dots .dot {
    width: 8px;
    height: 8px;
    background: #d1d8e0;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}
.slider-dots .dot.active {
    background: #5d6d7e;
    width: 22px;
    border-radius: 10px;
}

/* 幻灯片容器（用于文章详情页） */
.slider-container { 
    width: 100%; 
    max-width: 700px; 
    position: relative; 
}
.slider-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    background: #eee;
}

/* 通用标题居中 */
.section-title-group { 
    text-align: center; 
    margin-bottom: 50px; 
}
.section-title-group h2 { 
    font-size: 32px; 
    margin-bottom: 10px; 
    color: #333; 
}
.section-title-group p { 
    color: #999; 
    font-size: 15px; 
}

/* 主题特点 */
.features-section { 
    padding: 80px 0; 
}

/* 手机端主题特点宽度 - 和顶部幻灯片一致 */
@media (max-width: 992px) {
    .features-section.container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.feature-item {
    background: #fff;
    border: 1px solid #f2f4f7;
    padding: 40px 20px;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.feature-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-color: #e0e5f5;
}

.feature-item:hover .icon-box {
    background: #5d6d7e;
    transform: scale(1.1);
}

.icon-box {
    width: 50px;
    height: 50px;
    background: #f0f2f5;
    border-radius: 50%;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box img,
.icon-box svg {
    width: 40px;
    height:40px;
    object-fit: contain;
    display: block;
}

/* SVG图标样式优化 */
.icon-box svg {
    fill: currentColor;
    color: #5d6d7e;
}

.feature-item:hover .icon-box svg {
    color: #fff;
}

.feature-item h3 { 
    font-size: 16px; 
    margin-bottom: 8px; 
    color: #444; 
    display: block; 
}
.feature-item span { 
    font-size: 13px; 
    color: #bbb; 
    display: block; 
}

/* 更新记录 */
.updates-section { 
    padding: 60px 0 100px;
}

/* 手机端更新记录宽度 - 和顶部幻灯片一致 */
@media (max-width: 992px) {
    .updates-section.container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}

.updates-container { 
    max-width: 900px; 
    margin: 0 auto; 
}
.accordion-item { 
    margin-bottom: 15px; 
    border-radius: 10px; 
    background: #f9fbff; 
    overflow: hidden; 
}

.accordion-header {
    padding: 22px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #666;
    transition: background 0.3s;
}
.accordion-header:hover { 
    background: #f0f4ff; 
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #fff;
}
.accordion-item.active .accordion-content { 
    border-top: 1px solid #edf1f7; 
}
.content-body { 
    padding: 25px 30px; 
    color: #888; 
    font-size: 14px; 
    line-height: 2; 
    text-align: left;
}
.arrow { 
    transition: transform 0.3s; 
    color: #cbd0d6; 
    font-size: 12px; 
}
.accordion-item.active .arrow { 
    transform: rotate(180deg); 
}

/* 响应式适配 */
@media (max-width: 1024px) {
    .hero-flex { 
        flex-direction: column; 
        text-align: center; 
    }
    .hero-left { 
        order: 2; 
        text-align: center;
    }
    .hero-left p {
        margin: 0 auto 30px;
    }
    .slider-container { 
        order: 1; 
        margin-bottom: 20px; 
        width: 100%;
    }
    .btn-group { 
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* 手机端第三个按钮换行显示 */
    .btn-group > *:nth-child(3) {
        flex-basis: 100%;
        max-width: 200px;
    }
    
    /* 手机端特点：两列并保持居中 */
    .feature-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
    }

    /* 手机端更新记录间距优化 */
    .updates-section { 
        margin-top: 80px; 
        padding-top: 0;
    }
    .updates-container { 
        padding: 0; /* 移除额外padding，使用container的padding */
    }
}

@media (max-width: 480px) {
    .hero-left h1 { 
        font-size: 26px; 
    }
    .updates-section { 
        margin-top: 60px; 
    }
}

/* --- 弹出层样式 --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background: #fff;
    width: 100%;
    max-width: 850px;
    max-height: 90vh;
    border-radius: 24px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    padding: 40px;
}

.modal-overlay.active .modal-container {
    transform: scale(1);
}

.modal-close-x {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 28px;
    color: #ccc;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}

.modal-close-x:hover {
    color: #999;
}

.modal-info-section {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.modal-img-box {
    flex: 0 0 280px;
    width: 280px;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    overflow: hidden;
    background: #f5f5f5;
}

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

.modal-text-box {
    flex: 1;
    min-width: 280px;
}

.modal-text-box h2 {
    margin: 0 0 15px 0;
    font-size: 32px;
    color: #333;
    font-weight: 500;
}

.modal-text-box p {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin: 0;
}

.modal-line {
    height: 1px;
    background: #eee;
    margin: 30px 0;
}

.modal-price-row {
    margin-bottom: 30px;
}

.modal-price-new {
    font-size: 42px;
    color: #ff5c5c;
    font-weight: bold;
    margin-right: 10px;
}

.modal-price-old {
    font-size: 18px;
    color: #bbb;
    text-decoration: line-through;
}

.modal-qr-section {
    background: #fbfbfb;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
}

.modal-qr-section h4 {
    margin: 0 0 20px 0;
    font-weight: normal;
    color: #444;
}

.modal-qr-img {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.modal-qr-img img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 600px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
        background: rgba(0,0,0,0.4);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: hidden;
    }
    .modal-container {
        max-height: 85vh;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 20px 20px 0;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.35s ease;
        overflow-x: hidden;
    }
    .modal-overlay.active .modal-container {
        transform: translateY(0);
    }
    .modal-info-section {
        flex-shrink: 0;
    }
    .modal-img-box {
        flex: 1 1 100%;
        width: 100%;
        max-height: 140px;
    }
    .modal-img-box img {
        max-height: 140px;
        object-fit: cover;
    }
    .modal-text-box h2 {
        font-size: 18px;
    }
    .modal-text-box p {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .modal-price-new {
        font-size: 32px;
    }
    .modal-close-x {
        top: 14px;
        right: 18px;
    }
    .kh-pay-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #f0f0f0;
        margin: 0 -20px;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 10;
    }
}

/* ===== 会员中心导航栏毛玻璃 ===== */
body.keep-scrolled header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 66px !important;
    display: flex;
    align-items: center;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    padding: 0 !important;
}
body.keep-scrolled header .nav-menu a,
body.keep-scrolled header .logo {
    color: #252525;
}
body.keep-scrolled header .menu-toggle span {
    background: #252525;
}

/* 帖子详情 · 电脑端顶栏始终毛玻璃 */
@media (min-width: 769px) {
    body.bbs-detail-read header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 66px !important;
        display: flex;
        align-items: center;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.45) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
        padding: 0 !important;
    }
    body.bbs-detail-read header .nav-menu a,
    body.bbs-detail-read header .logo,
    body.bbs-detail-read header .nav-login-btn {
        color: #252525;
    }
    body.bbs-detail-read header .menu-toggle span {
        background: #252525;
    }
    body.bbs-detail-read header .nav-avatar-img {
        border-color: rgba(0, 0, 0, 0.08);
    }
    body.bbs-detail-read header.scrolled .nav-login-btn,
    body.bbs-detail-read header .nav-login-btn {
        color: #252525;
    }
    body.bbs-detail-read header .nav-login-icon {
        color: #64748b;
    }
    body.bbs-detail-read header .nav-login-icon:hover {
        color: #3884f4;
        background-color: rgba(56, 132, 244, 0.08);
    }

    /* 会员中心 · 电脑端顶栏始终毛玻璃 */
    body.member-page--hero-active header,
    body.member-page--sub-active header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 66px !important;
        display: flex;
        align-items: center;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.45) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
        padding: 0 !important;
    }
    body.member-page--hero-active header .nav-menu a,
    body.member-page--hero-active header .logo,
    body.member-page--hero-active header .nav-login-btn,
    body.member-page--sub-active header .nav-menu a,
    body.member-page--sub-active header .logo,
    body.member-page--sub-active header .nav-login-btn {
        color: #252525;
    }
    body.member-page--hero-active header .menu-toggle span,
    body.member-page--sub-active header .menu-toggle span {
        background: #252525;
    }
    body.member-page--hero-active header .nav-avatar-img,
    body.member-page--sub-active header .nav-avatar-img {
        border-color: rgba(0, 0, 0, 0.08);
    }
    body.member-page--hero-active header .nav-login-icon,
    body.member-page--sub-active header .nav-login-icon {
        color: #64748b;
    }
    body.member-page--hero-active header .nav-login-icon:hover,
    body.member-page--sub-active header .nav-login-icon:hover {
        color: #3884f4;
        background-color: rgba(56, 132, 244, 0.08);
    }
}

/* ===== 会员中心 ===== */
body.member-page--hero-active,
body.member-page--sub-active {
    background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 100%);
    background-attachment: fixed;
}
.member-page {
    padding: 96px 0 60px;
    min-height: calc(100vh - 160px);
    background: transparent;
}
.member-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
/* 会员中心侧栏（对齐 kehua_theme my_sidebar） */
.kehua-my-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 90px;
}
.kehua-my-usercard {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 12px;
}
.kehua-my-usercard-main {
    padding: 28px 20px 22px;
    text-align: center;
}
.kehua-my-avatar-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #eef2f7;
}
.kehua-my-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kehua-my-avatar-letter {
    font-size: 30px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1;
}
.kehua-my-username {
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    word-break: break-all;
    line-height: 1.35;
}
.kehua-my-uid {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.3;
}
.kehua-my-usercard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #f1f5f9;
}
.kehua-my-usercard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 14px 8px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.kehua-my-usercard-stat + .kehua-my-usercard-stat {
    border-left: 1px solid #f1f5f9;
}
.kehua-my-usercard-stat:hover {
    background: #fafbfc;
}
.kehua-my-usercard-stat-num {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.kehua-my-usercard-stat-num--text {
    font-size: 13px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kehua-my-usercard-stat-label {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.2;
}
.kehua-my-usercard-stat:hover .kehua-my-usercard-stat-num {
    color: #3884f4;
}
.kehua-my-nav {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.kehua-my-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 14px;
    color: #475569;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.kehua-my-nav a:hover {
    background: #f6f8fc;
    color: #3884f4;
}
.kehua-my-nav a.kehua-my-nav-active {
    color: #3884f4;
    background: #eef4ff;
    border-left-color: #3884f4;
    font-weight: 600;
}
.kehua-my-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.65;
}
.kehua-my-nav a.kehua-my-nav-active .kehua-my-nav-icon {
    opacity: 1;
}
.kehua-my-nav-logout {
    border-top: 1px solid #f0f0f0;
    color: #e74c3c !important;
}
.kehua-my-nav-logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}
.kehua-my-nav-logout .kehua-my-nav-icon {
    opacity: 0.8;
}
.member-content {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    padding: 28px 32px;
}
.member-content-orders {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.member-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.member-panel-head {
    padding: 20px 28px;
}
.member-panel-head .member-content-title {
    margin: 0;
}
.member-content-title {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

/* 订单列表 */
.order-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.order-card {
    display: flex;
    gap: 18px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 18px 20px;
    box-sizing: border-box;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #f0f2f5;
    transition: background .2s, border-color .2s;
}
.order-card:hover {
    background: #fff;
    border-color: #e8eaef;
}
.order-cover {
    width: 100px; height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
    background: #f5f5f5;
}
.order-cover img {
    display: block;
    width: 100%; height: 100%;
    max-width: 100%;
    object-fit: cover;
}
.order-cover-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #ccc;
}
.order-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    justify-content: space-between;
}
.order-top {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 12px;
}
.order-title {
    margin: 0;
    font-size: 15px; font-weight: 600; color: #1a1a1a;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.order-title a { color: inherit; text-decoration: none; }
.order-title a:hover { color: #3884f4; }
.order-price-group {
    flex-shrink: 0; white-space: nowrap; text-align: right;
}
.order-price {
    font-size: 17px; font-weight: 700; color: #1a1a1a;
    flex-shrink: 0; white-space: nowrap;
}
.order-price-original {
    font-size: 12px; color: #aaa; text-decoration: line-through;
    margin-right: 4px;
}
.order-coupon-tag {
    color: #e8770b;
}
.order-price-mobile-extra {
    display: none;
}
@media (max-width: 768px) {
    .order-price-mobile-extra {
        display: inline;
        font-size: 12px; font-weight: 400; color: #aaa;
        margin-left: 6px;
    }
    .order-price-mobile-extra .order-coupon-tag { color: #e8770b; }
    .order-meta-pc {
        display: none !important;
    }
}
.order-meta {
    margin: 4px 0 0; font-size: 12px; color: #aaa;
    display: flex; gap: 14px; flex-wrap: wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
}
.order-meta span { min-width: 0; }
.order-bottom {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-top: 6px; gap: 10px;
}
.order-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: 6px;
}
.order-badge.paid { background: #f0fdf4; color: #16a34a; }
.order-badge.unpaid { background: #fef3c7; color: #d97706; }
.order-badge.cancelled { background: #f1f5f9; color: #94a3b8; }
.order-download-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #3884f4, #60a5fa);
    color: #fff; text-decoration: none;
    border-radius: 8px; font-size: 12px; font-weight: 600;
    transition: all .2s;
}
.order-download-btn:hover {
    box-shadow: 0 4px 12px rgba(56,132,244,.3);
    transform: translateY(-1px);
}
.order-action-btns {
    display: flex; align-items: center; gap: 8px;
}
.order-actions { display: flex; gap: 8px; }
.member-btn-pay {
    padding: 5px 16px;
    background: linear-gradient(135deg, #3884f4, #60a5fa);
    color: #fff; border: none;
    border-radius: 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .2s; white-space: nowrap;
}
.member-btn-pay:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(56,132,244,.3);
    transform: translateY(-1px);
}
.member-btn-pay:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.member-btn-cancel {
    padding: 5px 12px;
    background: transparent; color: #999;
    border: 1px solid #e0e0e0; border-radius: 8px;
    font-size: 12px; cursor: pointer;
    transition: all .2s; white-space: nowrap;
}
.member-btn-cancel:hover { color: #e53e3e; border-color: #e53e3e; }

.order-polling-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #3884f4;
    white-space: nowrap;
}
.order-polling-spin {
    animation: kh-spin 1s linear infinite;
}

/* 空状态 */
.member-empty {
    text-align: center;
    padding: 60px 20px;
}
.member-empty p {
    margin: 16px 0 0;
    font-size: 14px;
    color: #999;
}

/* 修改密码 */
.member-pwd-form {
    max-width: 420px;
}
.member-nickname-form {
    max-width: 420px;
}
.member-email-form {
    max-width: 420px;
}
.member-form-current-email {
    font-size: 15px;
    font-weight: 600;
    color: #3884f4;
    line-height: 1.4;
    word-break: break-all;
}
.member-email-form .kehua-auth-field-wrap {
    margin-bottom: 0;
}
.member-email-form .kehua-auth-field-code {
    margin-bottom: 0;
}
.member-form-hidden-username {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.member-form-group {
    margin-bottom: 18px;
}
.member-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
}
.member-form-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
}
.member-pwd-form .kehua-auth-submit,
.member-nickname-form .kehua-auth-submit,
.member-email-form .kehua-auth-submit {
    margin-top: 10px;
}
.member-content-pwd {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.member-content-profile {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.member-content-profile > .kehua-my-panel {
    width: 100%;
}
.member-content-profile .kehua-my-body {
    padding: 20px 16px 24px;
}
.member-content-profile .member-pwd-form {
    max-width: 420px;
}

/* 会员中心仪表盘（电脑端右侧） */
.member-content-dashboard {
    flex: 1;
    min-width: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.kehua-my-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kehua-my-dash-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 22px 24px 24px;
}
.kehua-my-dash-card-title {
    margin: 0 -24px 18px;
    padding: 0 24px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}
.kehua-my-dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -24px 18px;
    padding: 0 24px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.kehua-my-dash-card-head .kehua-my-dash-card-title {
    margin: 0;
    padding: 0;
    border-bottom: none;
}
.kehua-my-dash-link {
    font-size: 13px;
    color: #3884f4;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.kehua-my-dash-link:hover {
    text-decoration: underline;
}
.kehua-my-dash-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.kehua-my-dash-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 12px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    min-height: 100%;
}
.kehua-my-dash-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.kehua-my-dash-stat-icon svg {
    width: 22px;
    height: 22px;
}
.kehua-my-dash-stat--blue .kehua-my-dash-stat-icon {
    background: rgba(56, 132, 244, 0.12);
    color: #3884f4;
}
.kehua-my-dash-stat--green .kehua-my-dash-stat-icon {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.kehua-my-dash-stat--orange .kehua-my-dash-stat-icon {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}
.kehua-my-dash-stat--purple .kehua-my-dash-stat-icon {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}
.kehua-my-dash-stat--gold .kehua-my-dash-stat-icon {
    background: rgba(255, 215, 0, 0.15);
    color: #d4a017;
}
.kehua-my-dash-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.kehua-my-dash-stat-value--text {
    font-size: 18px;
    line-height: 1.35;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kehua-my-dash-stat-label {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 14px;
    line-height: 1.4;
}
.kehua-my-dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(56, 132, 244, 0.35);
    background: rgba(56, 132, 244, 0.06);
    color: #3884f4;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-top: auto;
    cursor: pointer;
    font-family: inherit;
}
button.kehua-my-dash-btn {
    appearance: none;
    -webkit-appearance: none;
}
.kehua-my-dash-btn:hover {
    background: rgba(56, 132, 244, 0.12);
    border-color: rgba(56, 132, 244, 0.5);
    text-decoration: none;
}
.kehua-my-dash-btn--block {
    width: fit-content;
    min-width: 120px;
    margin-top: 8px;
}
.kehua-my-dash-orders {
    display: flex;
    flex-direction: column;
}
.kehua-my-dash-order {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 88px 96px 76px;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}
.kehua-my-dash-order:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.kehua-my-dash-order:first-child {
    padding-top: 0;
}
.kehua-my-dash-order-cover {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
    display: block;
}
.kehua-my-dash-order-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kehua-my-dash-order-cover-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
}
.kehua-my-dash-order-cover-ph svg {
    width: 24px;
    height: 24px;
}
.kehua-my-dash-order-main {
    min-width: 0;
}
.kehua-my-dash-order-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 4px;
}
.kehua-my-dash-order-title a {
    color: inherit;
    text-decoration: none;
}
.kehua-my-dash-order-title a:hover {
    color: #3884f4;
}
.kehua-my-dash-order-no {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
    word-break: break-all;
}
.kehua-my-dash-order-price {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kehua-my-dash-order-date {
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
}
.kehua-my-dash-order-action-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.kehua-my-dash-order-btn {
    padding: 6px 14px;
    border: 1px solid rgba(56, 132, 244, 0.35);
    border-radius: 8px;
    background: rgba(56, 132, 244, 0.08);
    color: #3884f4;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kehua-my-dash-order-btn:hover {
    background: #3884f4;
    border-color: #3884f4;
    color: #fff;
}
.kehua-my-dash-order-status {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}
.kehua-my-dash-order-status--done {
    color: #16a34a;
}
.kehua-my-dash-order-status--pending {
    color: #ea580c;
}
.kehua-my-dash-order-status--cancel {
    color: #94a3b8;
}
.kehua-my-dash-empty {
    padding: 28px 0 8px;
    text-align: center;
    font-size: 14px;
    color: #94a3b8;
}
.kehua-my-dash-bottom {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
    align-items: stretch;
}
.kehua-my-dash-info {
    margin: 0 0 4px;
}
.kehua-my-dash-info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.kehua-my-dash-info-row:last-child {
    border-bottom: none;
}
.kehua-my-dash-info-row dt {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    flex: 0 0 auto;
}
.kehua-my-dash-info-row dd {
    margin: 0;
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    text-align: right;
    word-break: break-all;
}
.kehua-my-dash-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.kehua-my-dash-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 92px;
    padding: 14px 8px;
    border-radius: 12px;
    border: 1px solid #eef2f7;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kehua-my-dash-quick-item:hover {
    background: #fff;
    border-color: rgba(56, 132, 244, 0.25);
    color: #3884f4;
    text-decoration: none;
}
.kehua-my-dash-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kehua-my-dash-quick-icon svg {
    width: 20px;
    height: 20px;
}
.kehua-my-dash-quick-icon--blue {
    background: rgba(56, 132, 244, 0.12);
    color: #3884f4;
}
.kehua-my-dash-quick-icon--green {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.kehua-my-dash-quick-icon--orange {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}
.kehua-my-dash-quick-icon--purple {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}
.kehua-my-dash-quick-icon--gold {
    background: rgba(255, 215, 0, 0.15);
    color: #d4a017;
}

@media (max-width: 1200px) {
    .kehua-my-dash-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kehua-my-dash-order {
        grid-template-columns: 56px minmax(0, 1fr) 72px 88px 68px;
        gap: 12px;
    }
}

@media (max-width: 992px) {
    .member-content-dashboard {
        display: none !important;
    }
    .kehua-my-dash-bottom {
        grid-template-columns: 1fr;
    }
}

/* 订单主题服务弹窗 */
.kehua-order-service-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.kehua-order-service-overlay[hidden] {
    display: none !important;
}
.kehua-order-service-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}
.kehua-order-service-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.kehua-order-service-close:hover {
    background: #f1f5f9;
    color: #475569;
}
.kehua-order-service-title {
    margin: 0 36px 6px 0;
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}
.kehua-order-service-desc {
    margin: 0 0 18px;
    font-size: 13px;
    color: #94a3b8;
}
.kehua-order-service-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kehua-order-service-action {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #f8fafc;
    color: #1e293b;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.kehua-order-service-action:hover {
    background: #fff;
    border-color: rgba(56, 132, 244, 0.35);
    transform: translateY(-1px);
    text-decoration: none;
    color: #1e293b;
}
.kehua-order-service-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kehua-order-service-action-icon svg {
    width: 20px;
    height: 20px;
}
.kehua-order-service-action--download .kehua-order-service-action-icon {
    background: rgba(56, 132, 244, 0.12);
    color: #3884f4;
}
.kehua-order-service-action--license .kehua-order-service-action-icon {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.kehua-order-service-action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.kehua-order-service-action-text strong {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.kehua-order-service-action-text small {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 400;
}

/* 授权管理弹窗 */
.kehua-license-overlay {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.kehua-license-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}
.kehua-license-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.kehua-license-close:hover {
    background: #f1f5f9;
    color: #475569;
}
.kehua-license-title {
    margin: 0 36px 18px 0;
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
}
.kehua-license-field {
    margin-bottom: 16px;
}
.kehua-license-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #64748b;
}
.kehua-license-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 15px;
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: 8px;
    user-select: all;
    letter-spacing: 0.5px;
    word-break: break-all;
    border: 1px solid #eef2f7;
}
.kehua-license-loading,
.kehua-license-empty {
    padding: 12px;
    text-align: center;
    color: #94a3b8;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
}
.kehua-license-error {
    padding: 10px;
    color: #e74c3c;
    font-size: 13px;
}
.kehua-license-count {
    margin-bottom: 8px;
    font-size: 13px;
    color: #64748b;
}
.kehua-license-domain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #f0f7ff;
    border-radius: 8px;
    margin-bottom: 6px;
}
.kehua-license-domain-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
}
.kehua-license-unbind-btn {
    flex-shrink: 0;
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}
.kehua-license-bind {
    border-top: 1px solid #eef2f7;
    padding-top: 14px;
}
.kehua-license-bind-row {
    display: flex;
    gap: 8px;
}
.kehua-license-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}
.kehua-license-bind-btn {
    background: #3884f4;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}
.kehua-license-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #94a3b8;
}
.kehua-license-rebind-hint {
    margin: 10px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    color: #92610a;
    background: #fff7e6;
    border: 1px solid #fde68a;
    border-radius: 6px;
    line-height: 1.5;
}
.kehua-license-unbind-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.kehua-license-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.kehua-license-field-head .kehua-license-label {
    margin-bottom: 0;
}
.kehua-license-logs-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #3884f4;
    background: rgba(56, 132, 244, 0.08);
    border: 1px solid rgba(56, 132, 244, 0.22);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.kehua-license-logs-btn:hover {
    background: rgba(56, 132, 244, 0.14);
}
.kehua-license-overlay--logs {
    z-index: 10070;
}
.kehua-license-modal--logs {
    max-width: 520px;
    padding: 22px 24px 20px;
}
.kehua-license-logs-summary {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    flex-wrap: wrap;
}
.kehua-license-logs-summary-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
}
.kehua-license-logs-summary-item + .kehua-license-logs-summary-item {
    border-left: 1px solid #e2e8f0;
}
.kehua-license-logs-summary-label {
    font-size: 12px;
    color: #94a3b8;
}
.kehua-license-logs-summary-value {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}
.kehua-license-logs-summary-value--bind {
    color: #16a34a;
}
.kehua-license-logs-summary-value--unbind {
    color: #ef4444;
}
.kehua-license-logs-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 999px;
}
.kehua-license-logs-tab {
    flex: 1;
    padding: 6px 12px;
    font-size: 13px;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
}
.kehua-license-logs-tab.is-active {
    background: #fff;
    color: #1e293b;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.kehua-license-logs-list {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 2px;
}

.kehua-license-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 4px 4px 4px 8px;
}
.kehua-license-timeline::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, #e2e8f0 12%, #e2e8f0 88%, transparent 100%);
    border-radius: 2px;
    pointer-events: none;
}
.kehua-license-timeline-date {
    padding: 8px 0 6px 42px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: #94a3b8;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}
.kehua-license-timeline-date:first-child {
    padding-top: 0;
}
.kehua-license-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 6px 10px 0;
    z-index: 1;
}
.kehua-license-timeline-dot {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-left: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(15, 23, 42, 0.08);
}
.kehua-license-timeline-item.is-bind .kehua-license-timeline-dot {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.kehua-license-timeline-item.is-unbind .kehua-license-timeline-dot {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}
.kehua-license-timeline-content {
    flex: 1;
    min-width: 0;
    padding: 8px 12px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    transition: border-color 0.15s, background 0.15s;
}
.kehua-license-timeline-item.is-bind .kehua-license-timeline-content {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.05);
}
.kehua-license-timeline-item.is-unbind .kehua-license-timeline-content {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.04);
}
.kehua-license-timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    min-width: 0;
}
.kehua-license-timeline-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    background: #94a3b8;
}
.kehua-license-timeline-item.is-bind .kehua-license-timeline-tag {
    background: #16a34a;
}
.kehua-license-timeline-item.is-unbind .kehua-license-timeline-tag {
    background: #ef4444;
}
.kehua-license-timeline-domain {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13.5px;
    font-weight: 500;
    color: #1e293b;
    word-break: break-all;
    line-height: 1.5;
}
.kehua-license-timeline-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
.kehua-license-timeline-clock {
    font-weight: 500;
    color: #64748b;
}

@media (min-width: 769px) {
    .member-page--home.member-page--hero {
        padding: 96px 0 60px;
        min-height: calc(100vh - 160px);
    }
    .member-page--home .member-sidebar--desktop {
        display: block;
    }
}

/* 个人设置弹窗 */
.kehua-profile-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.kehua-profile-settings-overlay.kehua-profile-settings-open {
    opacity: 1;
    visibility: visible;
}
.kehua-profile-settings {
    width: 860px;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
    display: flex;
    overflow: hidden;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.kehua-profile-settings-open .kehua-profile-settings {
    transform: translateY(0) scale(1);
}
.kehua-profile-settings-nav {
    width: 220px;
    flex-shrink: 0;
    background: #f8fafc;
    border-right: 1px solid #eef2f7;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}
.kehua-profile-settings-nav-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eef2f7;
}
.kehua-profile-settings-nav-text {
    flex: 1;
    min-width: 0;
}
.kehua-profile-settings-close--nav {
    display: none;
}
.kehua-profile-settings-close--main {
    display: flex;
}
.kehua-profile-settings-nav-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}
.kehua-profile-settings-nav-ico svg {
    width: 20px;
    height: 20px;
}
.kehua-profile-settings-nav-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}
.kehua-profile-settings-nav-uid {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}
.kehua-profile-settings-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 0;
}
.kehua-profile-settings-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.kehua-profile-settings-menu-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.kehua-profile-settings-menu-item:hover {
    background: #eef2f7;
    color: #334155;
}
.kehua-profile-settings-menu-item.kehua-active {
    background: #3884f4;
    color: #fff;
    box-shadow: 0 4px 12px rgba(56, 132, 244, 0.25);
}
.kehua-profile-settings-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
}
.kehua-profile-settings-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease;
}
.kehua-profile-settings-close:hover {
    background: #e2e8f0;
    color: #334155;
}
.kehua-profile-settings-panel {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 28px 0;
}
.kehua-profile-settings-panel.kehua-show {
    display: flex;
    flex-direction: column;
}
.kehua-profile-settings-panel-title {
    margin: 0 -28px 18px;
    padding: 0 28px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}
.kehua-profile-settings-body {
    flex: 1;
    padding-bottom: 12px;
}
.kehua-profile-settings-hidden-username {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.kehua-profile-settings-field {
    margin-bottom: 18px;
}
.kehua-profile-settings-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}
.kehua-profile-settings-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 14px;
    color: #1e293b;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.kehua-profile-settings-input:focus {
    border-color: #3884f4;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(56, 132, 244, 0.1);
}
.kehua-profile-settings-readonly {
    min-height: 44px;
    padding: 11px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    font-size: 14px;
    color: #64748b;
    box-sizing: border-box;
}
.kehua-profile-settings-readonly--email {
    color: #3884f4;
    font-weight: 500;
}
.kehua-profile-settings-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
}
.kehua-profile-settings-code-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.kehua-profile-settings-code-row .kehua-profile-settings-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
}
.kehua-profile-settings-code-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: #3884f4;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.kehua-profile-settings-code-btn:hover:not(:disabled) {
    background: #2a6fd6;
}
.kehua-profile-settings-code-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.kehua-profile-settings-panel .kehua-auth-error {
    margin-bottom: 14px;
}
.kehua-profile-settings-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 22px;
    border-top: 1px solid #f1f5f9;
    background: #fff;
}
.kehua-profile-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 88px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}
.kehua-profile-settings-btn--ghost {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
}
.kehua-profile-settings-btn--ghost:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.kehua-profile-settings-btn--primary {
    border: none;
    background: linear-gradient(135deg, #3884f4, #60a5fa);
    color: #fff;
}
.kehua-profile-settings-btn--primary:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(56, 132, 244, 0.35);
}
.kehua-profile-settings-btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .kehua-profile-settings-overlay {
        padding: 0;
        align-items: stretch;
    }
    .kehua-profile-settings {
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        flex-direction: column;
    }
    .kehua-profile-settings-nav {
        width: 100%;
        border-right: none;
        border-bottom: none;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 0 0;
        background: #fff;
        flex-shrink: 0;
    }
    .kehua-profile-settings-nav-head {
        margin-bottom: 0;
        border-bottom: 1px solid #f1f5f9;
        padding: 0 16px 12px;
    }
    .kehua-profile-settings-close--nav {
        display: flex;
        position: static;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    .kehua-profile-settings-close--main {
        display: none;
    }
    .kehua-profile-settings-menu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        padding: 0;
        margin: 0;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid #eef2f7;
    }
    .kehua-profile-settings-menu-item {
        flex: 1;
        min-height: 46px;
        padding: 8px 4px 10px;
        white-space: normal;
        border-radius: 0;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
        color: #64748b;
        background: transparent;
        border-bottom: 2px solid transparent;
        box-shadow: none;
    }
    .kehua-profile-settings-menu-item svg {
        display: none;
    }
    .kehua-profile-settings-menu-label {
        display: block;
        max-width: 100%;
        word-break: keep-all;
    }
    .kehua-profile-settings-menu-item.kehua-active {
        background: transparent;
        color: #3884f4;
        font-weight: 600;
        box-shadow: none;
        border-bottom-color: #3884f4;
    }
    .kehua-profile-settings-main {
        flex: 1;
        min-height: 0;
    }
    .kehua-profile-settings-panel {
        padding: 16px 16px 0;
    }
    .kehua-profile-settings-panel-title {
        display: none;
    }
    .kehua-profile-settings-foot {
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .kehua-profile-settings-code-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .kehua-profile-settings-code-row .kehua-profile-settings-input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 44px;
        min-height: 44px;
    }
    .kehua-profile-settings-code-btn {
        width: auto;
        flex-shrink: 0;
        height: 44px;
        min-height: 44px;
        padding: 0 12px;
        font-size: 12px;
    }
}

.kehua-profile-info {
    font-size: 14px;
    line-height: 1.5;
}
.kehua-profile-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}
.kehua-profile-info-row:last-child {
    border-bottom: none;
}
.kehua-profile-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.kehua-profile-info-label {
    flex: 0 0 72px;
    color: #64748b;
}
.kehua-profile-info-value {
    flex: 1;
    min-width: 0;
    text-align: left;
    color: #1e293b;
    font-weight: 500;
    word-break: break-all;
}
@media (max-width: 768px) {
    .kehua-profile-info-row {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }
    .kehua-profile-info-item {
        padding: 16px 0;
    }
    .kehua-profile-info-row .kehua-profile-info-item + .kehua-profile-info-item {
        border-top: 1px solid #f1f5f9;
    }
}
.member-content-pwd > .member-panel {
    padding: 28px 32px;
}
.member-content-pwd > .member-panel .member-content-title {
    margin-bottom: 24px;
}

/* kehua_theme 手机「我的」头图（与 xiuno kehua_theme 一致） */
.kehua-my-mhero {
    display: none;
    position: relative;
    color: #0f172a;
}
.kehua-my-mhero-banner {
    position: relative;
    height: calc(152px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
    border-radius: 0;
    background-color: #8fa8bc;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 360" preserveAspectRatio="xMidYMax slice"><defs><linearGradient id="g" x1="0%25" y1="0%25" x2="0%25" y2="100%25"><stop offset="0%25" stop-color="%23c5d4e2"/><stop offset="55%25" stop-color="%238fa3b5"/><stop offset="100%25" stop-color="%235d7285"/></linearGradient></defs><rect width="1200" height="360" fill="url(%23g)"/><path fill="%234a5f72" opacity="0.35" d="M0 360 L180 200 L320 280 L480 160 L620 240 L780 120 L920 200 L1080 80 L1200 140 L1200 360 Z"/></svg>');
    background-size: cover;
    background-position: center bottom;
}
.kehua-my-mhero-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72%;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.75) 55%, #f1f5f9 100%);
    pointer-events: none;
}
.kehua-my-mhero-profile {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -40px 16px 12px;
}
.kehua-my-mhero-avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    background: linear-gradient(135deg, #3884f4, #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
}
.kehua-my-mhero-avatar-letter {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.kehua-my-mhero-id { min-width: 0; }
.kehua-my-mhero-name {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.02em;
    word-break: break-word;
}
.kehua-my-mhero-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

/* 手机「我的」· 会员中心黑金横条（与 kehua_theme 一致） */
.kehua-my-mhero-vip-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 12px 10px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #faf3e0;
    background: linear-gradient(118deg, #141413 0%, #0a0a0b 45%, #121110 100%);
    border: 1px solid rgba(201, 162, 72, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 22px rgba(0, 0, 0, 0.12);
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.12s ease, background 0.12s ease;
}
.kehua-my-mhero-vip-strip:active {
    filter: brightness(1.06);
}
.kehua-my-mhero-vip-strip-ico {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(201, 162, 72, 0.5);
    background: linear-gradient(145deg, rgba(32, 28, 20, 0.95) 0%, rgba(14, 12, 9, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.1);
    color: #e8c547;
}
.kehua-my-mhero-vip-strip-ico .kehua-my-nav-icon {
    width: 22px;
    height: 22px;
    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.kehua-my-mhero-vip-strip-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kehua-my-mhero-vip-strip-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #faf3e0;
    line-height: 1.25;
}
.kehua-my-mhero-vip-strip-sub {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(214, 188, 128, 0.88);
}
.kehua-my-mhero-vip-strip--member .kehua-my-mhero-vip-strip-sub {
    color: rgba(200, 175, 95, 0.9);
}
.kehua-my-mhero-vip-strip-chevron {
    flex-shrink: 0;
    display: block;
    opacity: 0.65;
    color: #c9a227;
}

.kehua-my-mhero-quick {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 12px 0;
    padding: 14px 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.kehua-my-mhero-quick-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 12px;
    text-decoration: none;
    color: #334155;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.kehua-my-mhero-quick-item:active,
.kehua-my-mhero-quick-item--active {
    background: #f1f5f9;
}
.kehua-my-mhero-quick-item--active {
    color: #3884f4;
}
.kehua-my-mhero-quick-item .kehua-my-nav-icon {
    width: 22px;
    height: 22px;
    opacity: 0.72;
    color: #475569;
}
.kehua-my-mhero-quick-item--active .kehua-my-nav-icon {
    opacity: 1;
    color: #3884f4;
}
.kehua-my-mhero-quick-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}
.kehua-my-mhero-logout-wrap { margin: 16px 12px 0; }
.kehua-my-mhero-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: #e74c3c;
    text-decoration: none;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}
.kehua-my-mhero-logout .kehua-my-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.85;
}
.kehua-my-mhero-logout:active {
    background: #fef2f2;
    color: #dc2626;
}


/* 会员中心移动端（与首页 container 25px 断点一致） */
@media (max-width: 992px) {
    .member-page { padding: 70px 0 40px; }
    .member-layout {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    .member-sidebar {
        width: 100%;
        position: static;
    }
    .member-content,
    .member-content.member-content-orders {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .member-user-card { padding: 20px 16px; }
    .member-nav {
        display: flex;
        padding: 0;
        border-top: 1px solid #f0f0f0;
    }
    .member-nav-item {
        flex: 1;
        justify-content: center;
        padding: 12px 8px;
        font-size: 13px;
        gap: 6px;
    }
    .member-content { padding: 20px 16px; }
    .member-content.member-content-orders {
        padding: 0;
        gap: 12px;
        overflow: hidden;
    }
    .member-panel,
    .member-panel-head,
    .order-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 16px 14px;
    }
    .member-panel-head { padding: 16px 18px; }
    .member-content-title { font-size: 18px; margin-bottom: 18px; }
    .member-panel-head .member-content-title { margin-bottom: 0; }
    .member-content-orders .order-card {
        flex-direction: column;
        gap: 12px;
    }
    .member-content-orders .order-cover {
        width: 100%;
        height: 140px;
    }
    .member-content-orders .order-top {
        flex-direction: column;
        gap: 4px;
    }
    .member-content-orders .order-bottom {
        flex-wrap: wrap;
    }
    .member-content-pwd > .member-panel {
        padding: 20px 16px;
    }
    .member-content-pwd > .member-panel .member-content-title {
        margin-bottom: 18px;
    }
}

/* 会员子页：订单 / 修改密码（手机独立页） */
.member-mobile-subhead {
    display: none;
}
.member-panel-head--desktop,
.member-content-title--desktop {
    display: block;
}

/* 会员中心 · 手机端与 kehua_theme「我的」一致（≤768px） */
@media (max-width: 768px) {
    body.member-page--hero-active header {
        display: none !important;
    }
    body.member-page--sub-active header,
    body.bbs-detail-read header {
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255, 0.72) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
        height: 56px !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
    }
    body.member-page--sub-active header .nav-menu a,
    body.member-page--sub-active header .logo,
    body.member-page--sub-active header .nav-login-btn,
    body.bbs-detail-read header .nav-menu a,
    body.bbs-detail-read header .logo,
    body.bbs-detail-read header .nav-login-btn {
        color: #252525;
    }
    body.member-page--sub-active header .menu-toggle span,
    body.bbs-detail-read header .menu-toggle span {
        background: #252525;
    }
    body.member-page--sub-active header .nav-avatar-img,
    body.bbs-detail-read header .nav-avatar-img {
        border-color: rgba(0, 0, 0, 0.08);
    }
    body.bbs-detail-read header .nav-login-icon {
        color: #64748b;
    }
    body.bbs-detail-read header .nav-login-icon:hover {
        color: #3884f4;
        background-color: rgba(56, 132, 244, 0.08);
    }
    body.member-page--sub-active .member-page--sub {
        padding-top: 12px;
    }
    .member-page--hero {
        padding: 0 0 24px;
        min-height: 100dvh;
        background: transparent;
    }
    .member-page--hero > .container {
        padding: 0;
        max-width: 100%;
    }
    .member-page--hero .member-layout {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    .member-page--hero .member-sidebar--desktop {
        display: none !important;
    }
    .member-page--hero .kehua-my-mhero {
        display: block;
        width: 100%;
        margin-bottom: 0;
        padding-bottom: 16px;
    }
    .member-page--hero .member-content,
    .member-page--hero .member-content.member-content-orders,
    .member-page--hero .member-content.member-content-pwd {
        padding: 0 12px;
        gap: 12px;
    }
    body.member-page--hero-active.has-mobile-tabbar .member-page--hero {
        padding-bottom: calc(24px + 80px + env(safe-area-inset-bottom, 0px));
    }

    /* 我的首页：仅头图，不展示订单/密码内容 */
    .member-page--home .member-layout {
        display: block;
    }

    /* 订单 / 密码子页 */
    .member-page--sub {
        padding: 12px 0 24px;
        background: transparent;
    }
    .member-page--sub > .container {
        padding: 0;
        max-width: 100%;
    }
    .member-page--sub .member-layout {
        flex-direction: column;
        gap: 12px;
    }
    .member-page--sub .member-sidebar--desktop {
        display: none !important;
    }
    .member-page--sub .kehua-my-mhero {
        display: none !important;
    }
    .member-mobile-subhead {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 12px;
        padding: 12px 14px;
        background: #fff;
        border-radius: 10px;
        border: 1px solid rgba(15, 23, 42, 0.06);
    }
    .member-mobile-back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        color: #334155;
        text-decoration: none;
        background: #f1f5f9;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .member-mobile-back:active {
        background: #e2e8f0;
    }
    .member-mobile-subhead-title {
        margin: 0;
        flex: 1;
        min-width: 0;
        font-size: 17px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.3;
    }
    .member-page--sub .member-content,
    .member-page--sub .member-content.member-content-orders,
    .member-page--sub .member-content.member-content-pwd,
    .member-page--sub .member-content.member-content-profile,
    .member-page--sub .member-content.member-content-agent,
    .member-page--sub .member-content.member-content-vip,
    .member-page--sub .member-content.member-content-bbs {
        padding: 0 12px;
        gap: 12px;
    }
    .member-page--sub .member-panel-head--desktop,
    .member-page--sub .member-content-title--desktop {
        display: none !important;
    }
    /* 手机端使用面板内 Tab 作为标题，隐藏重复顶栏 */
    .member-page--agent .member-mobile-subhead,
    .member-page--vip .member-mobile-subhead,
    .member-page--orders .member-mobile-subhead,
    .member-page--recharge .member-mobile-subhead,
    .member-page--coupons .member-mobile-subhead,
    .member-page--password .member-mobile-subhead,
    .member-page--profile .member-mobile-subhead,
    .member-page--bbs .member-mobile-subhead {
        display: none;
    }
    .member-content-agent .kehua-my-body,
    .member-content-vip .kehua-my-body,
    .member-content-orders .kehua-my-body,
    .member-content-recharge .kehua-my-body,
    .member-content-bbs .kehua-my-body {
        padding: 20px 16px;
    }
    .member-content-profile .kehua-my-body {
        padding: 16px 12px;
    }
    body.member-page--sub-active.has-mobile-tabbar .member-page--sub {
        padding-bottom: calc(24px + 80px + env(safe-area-inset-bottom, 0px));
    }
}

/* ===== 手机端底部悬浮导航 ===== */
.mobile-tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    pointer-events: none;
    padding: 0 20px calc(14px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
}
.mobile-tabbar-pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    max-width: min(100%, 420px);
    height: 66px;
    margin: 0 auto;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: none;
    border-radius: 999px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.mobile-tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    padding: 0 2px;
    min-width: 0;
    text-decoration: none;
    color: #999;
    font-size: 10px;
    font-weight: 500;
    border-radius: 999px;
    transition: color .2s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
.mobile-tabbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 28px;
    border-radius: 999px;
    transition: background .2s, transform .2s;
}
.mobile-tabbar-item.active {
    color: #3884f4;
    font-weight: 600;
}
.mobile-tabbar-item.active .mobile-tabbar-icon {
    background: transparent;
}
.mobile-tabbar-item:active .mobile-tabbar-icon {
    transform: scale(0.92);
}
.mobile-tabbar-label {
    line-height: 1.2;
    white-space: nowrap;
}
@media (max-width: 992px) {
    .mobile-tabbar {
        display: flex;
    }
    body.has-mobile-tabbar {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    body.has-mobile-tabbar footer {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
    body.has-mobile-tabbar .member-page {
        padding-bottom: calc(40px + 80px + env(safe-area-inset-bottom, 0px));
    }
    body.has-mobile-tabbar .kehua-auth-overlay {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ===== 代理中心 / 充值记录等（Tab 下划线对齐「我的帖子」kehua-my-tab） ===== */
.kehua-paylog-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e8ecf1;
    margin-bottom: 0;
}
.kehua-paylog-tab {
    position: relative;
    padding: 16px 24px;
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: #64748b;
    text-decoration: none;
    transition: color .2s;
}
.kehua-paylog-tab:hover {
    color: #3884f4;
    text-decoration: none;
}
.kehua-paylog-tab.kehua-active {
    color: #3884f4;
    background: transparent;
}
.kehua-paylog-tab.kehua-active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 4px;
    width: 30px;
    background: #3884f4;
    border-radius: 0.75rem 0.75rem 0 0;
}
/* 带角标等后缀时，下划线对齐文字而非整行 */
.kehua-paylog-tab.kehua-active:has(.kehua-paylog-tab-label)::after {
    display: none;
}
.kehua-paylog-tab-label {
    position: relative;
}
.kehua-paylog-tab.kehua-active .kehua-paylog-tab-label::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -16px;
    height: 4px;
    width: 30px;
    background: #3884f4;
    border-radius: 0.75rem 0.75rem 0 0;
}
.kehua-paylog-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}
.kehua-paylog-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}
.kehua-paylog-list {
    display: grid;
    gap: 12px;
}
.kehua-agentlog-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s;
}
.kehua-agentlog-item:hover {
    background: #f1f5f9;
}
.kehua-agentlog-main {
    flex: 1;
    min-width: 0;
}
.kehua-agentlog-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}
.kehua-agentlog-sub {
    font-size: 13px;
    color: #94a3b8;
    word-break: break-all;
    line-height: 1.45;
}
.kehua-agentlog-time {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 8px;
}
.kehua-agentlog-side {
    text-align: right;
    flex-shrink: 0;
}
.kehua-agentlog-amt {
    font-size: 15px;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 6px;
}
.kehua-paylog-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}
.kehua-paylog-status.kehua-pending {
    background: #fef3c7;
    color: #92400e;
}
.kehua-paylog-status.kehua-success {
    background: #d1fae5;
    color: #065f46;
}
.kehua-paylog-status.kehua-closed {
    background: #f1f5f9;
    color: #94a3b8;
}
a.kehua-paylog-status.kehua-pending {
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
a.kehua-paylog-status.kehua-pending:hover {
    background: #fde68a;
}
.agent-countdown {
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

.kehua-my-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.kehua-my-body {
    padding: 28px;
}
.kehua-vip-inner {
    max-width: none;
}
.kehua-vip-block {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}
.kehua-vip-block:last-child {
    margin-bottom: 0;
}
.kehua-mutex-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff7ed;
    border: 1px solid #fde3b3;
    border-radius: 12px;
    color: #92400e;
    margin-bottom: 16px;
}
.kehua-mutex-tip svg {
    flex: 0 0 18px;
    color: #f59e0b;
    margin-top: 2px;
}
.kehua-mutex-tip strong {
    display: block;
    font-size: 14px;
    color: #92400e;
    line-height: 1.5;
}
.kehua-mutex-tip p {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: #b45309;
    line-height: 1.5;
}
.kehua-vip-block-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kehua-vip-block-header svg {
    width: 18px;
    height: 18px;
    color: #c6303e;
}
.kehua-vip-block-body {
    padding: 16px 20px;
}

.member-content-agent {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.member-content-agent > .kehua-my-panel {
    width: 100%;
}
.member-content-vip {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.member-content-vip > .kehua-my-panel {
    width: 100%;
}
.agent-log-lead {
    margin: 0 0 16px;
    font-size: 13px;
    color: #64748b;
}
@media (max-width: 640px) {
    .kehua-agentlog-item {
        flex-wrap: wrap;
    }
    .kehua-agentlog-side {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid #e2e8f0;
        text-align: left;
    }
}

/* 当前等级 */
.agent-now.kehua-vip-block {
    border: 1px solid #e8eef8;
}
.agent-now {
    padding: 0;
}
.agent-now__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    padding: 22px 28px;
    background: linear-gradient(90deg, #f0f7ff 0%, #fff 100%);
}
.agent-now__badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3884f4, #60a5fa);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.agent-now__label {
    margin: 0 0 4px;
    font-size: 13px;
    color: #888;
}
.agent-now__name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}
.agent-now__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}
.agent-now__meta > div {
    text-align: center;
}
.agent-now__meta dt {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 500;
    color: #999;
}
.agent-now__meta dd {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #3884f4;
}

.agent-board__lead {
    margin: 0 0 24px;
    text-align: center;
    font-size: 14px;
    color: #888;
    line-height: 1.6;
}
.agent-board__plans {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

/* 单个方案卡 */
.agent-plan {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 32px 24px 24px;
    border-radius: 14px;
    border: 1px solid #e8eaef;
    background: #fafbfc;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.agent-plan:hover {
    background: #fff;
    border-color: #c5d9f5;
    box-shadow: 0 6px 24px rgba(56, 132, 244, .08);
}
.agent-plan.is-popular {
    background: #fff;
    border: 2px solid #3884f4;
    box-shadow: 0 10px 32px rgba(56, 132, 244, .12);
    padding-top: 36px;
}
.agent-plan.is-active {
    border-color: #86efac;
    background: #f6fef9;
}
.agent-plan__label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #3884f4;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.4;
}
.agent-plan__label--active {
    background: #22c55e;
}
.agent-plan__name {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: #333;
    text-align: center;
}
.agent-plan__price {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.agent-plan__amount {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.agent-plan__amount small {
    font-size: 20px;
    font-weight: 600;
    margin-right: 2px;
    vertical-align: baseline;
}
.agent-plan__features {
    flex: 1;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.agent-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    font-size: 14px;
    line-height: 1.55;
    color: #666;
}
.agent-plan__features li + li {
    border-top: 1px dashed #eee;
}
.agent-plan__features svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #3884f4;
}
.agent-plan__features em {
    font-style: normal;
    font-weight: 700;
    color: #3884f4;
}
.agent-plan__action {
    margin-top: auto;
}
.agent-plan__btn {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
}
.agent-plan__btn--disabled {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #22c55e;
    background: #ecfdf5;
    cursor: default;
}
.agent-plan__btn--no-downgrade {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #999;
    background: #f3f4f6;
    cursor: default;
}

/* 支付弹窗 */
.agent-pay-mask {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.agent-pay-mask.is-open {
    display: flex;
}
.agent-pay-box {
    width: 380px;
    max-width: 100%;
    padding: 28px 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}
.agent-pay { text-align: center; }
.agent-pay__tip {
    margin: 0 0 8px;
    font-size: 13px;
    color: #999;
}
.agent-pay__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.agent-pay__amount {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 800;
    color: #3884f4;
}
.agent-pay__notice {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    cursor: pointer;
}
.agent-pay__notice input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: #3884f4;
    cursor: pointer;
}
.agent-pay__notice span {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    text-align: left;
}
.agent-pay__notice a {
    color: #e74c3c;
    text-decoration: none;
    font-weight: 500;
}
.agent-pay__notice a:hover {
    text-decoration: underline;
}
.agent-pay__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity .2s;
}
.agent-pay__btns .member-btn-pay {
    width: 100%;
    height: 44px;
}
.agent-pay__alipay {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #1677ff;
    cursor: pointer;
    transition: opacity .2s;
}
.agent-pay__alipay:hover {
    opacity: .9;
}

@media (max-width: 900px) {
    .agent-board__plans {
        flex-direction: column;
    }
    .agent-plan.is-popular {
        order: -1;
    }
}
@media (max-width: 768px) {
    .agent-now__inner {
        padding: 18px 20px;
    }
    .agent-now__meta {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
    .agent-plan {
        padding: 28px 20px 20px;
    }
    .agent-plan__amount {
        font-size: 32px;
    }
}

/* 全局 Toast 提示 */
.kh-toast {
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-20px);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    max-width: calc(100vw - 40px);
    white-space: nowrap;
}
.kh-toast--show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}
.kh-toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.kh-toast-msg {
    line-height: 1.4;
}

/* ===== 在线充值（对齐 kehua_theme my_pay） ===== */
.member-content-recharge {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.kehua-recharge-inner {
    max-width: ;
    margin: 0 auto;
}
.kehua-recharge-balance {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.kehua-recharge-balance::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
}
.kehua-recharge-balance-label {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}
.kehua-recharge-balance-value {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 12px;
}
.kehua-recharge-balance-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
}
.kehua-recharge-section {
    margin-bottom: 24px;
}
.kehua-recharge-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.kehua-recharge-section-title h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}
.kehua-recharge-amount-display {
    font-size: 24px;
    font-weight: 700;
    color: #f59e0b;
}
.kehua-recharge-amount-display::before {
    content: '¥';
    font-size: 16px;
    margin-right: 2px;
}
.kehua-recharge-quick-amounts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.kehua-recharge-quick-btn {
    padding: 14px 8px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.kehua-recharge-quick-btn:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}
.kehua-recharge-quick-btn.kehua-active {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #d97706;
}
.kehua-recharge-custom {
    margin-top: 12px;
}
.kehua-recharge-custom-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.kehua-recharge-custom-input:focus {
    outline: none;
    border-color: #f59e0b;
}
.kehua-recharge-custom-input::placeholder {
    color: #94a3b8;
}
.kehua-recharge-hint {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 8px;
    text-align: right;
}
.kehua-recharge-paymethod {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kehua-recharge-paymethod-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.kehua-recharge-paymethod-item:hover {
    border-color: #cbd5e1;
}
.kehua-recharge-paymethod-item.kehua-active {
    border-color: #3b82f6;
    background: #eff6ff;
}
.kehua-recharge-paymethod-item input {
    display: none;
}
.kehua-recharge-paymethod-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kehua-recharge-paymethod-icon.kehua-alipay {
    background: #1677ff;
}
.kehua-recharge-paymethod-icon svg {
    width: 22px;
    height: 22px;
    color: #fff;
}
.kehua-recharge-paymethod-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
}
.kehua-recharge-paymethod-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.kehua-recharge-paymethod-item.kehua-active .kehua-recharge-paymethod-check {
    background: #3b82f6;
    border-color: #3b82f6;
}
.kehua-recharge-paymethod-check svg {
    width: 14px;
    height: 14px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s;
}
.kehua-recharge-paymethod-item.kehua-active .kehua-recharge-paymethod-check svg {
    opacity: 1;
}
.kehua-recharge-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 16px;
}
.kehua-recharge-preview-label {
    font-size: 14px;
    color: #64748b;
}
.kehua-recharge-preview-value {
    font-size: 20px;
    font-weight: 700;
    color: #f59e0b;
}
.kehua-recharge-submit {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.kehua-recharge-submit:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}
.kehua-recharge-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.kehua-recharge-footer {
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: #94a3b8;
}
@media (max-width: 640px) {
    .kehua-recharge-quick-amounts {
        grid-template-columns: repeat(3, 1fr);
    }
    .kehua-recharge-balance-value {
        font-size: 36px;
    }
}

/* ===== 购买弹窗 - 优惠券选择 & 价格 ===== */
.kh-pay-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
}
.kh-pay-summary-label {
    font-size: 14px;
    color: #64748b;
}
.kh-pay-summary-right {
    text-align: right;
}
.kh-pay-original {
    font-size: 12px;
    color: #94a3b8;
    text-decoration: line-through;
    margin-right: 8px;
}
.kh-pay-market {
    font-size: 13px;
    color: #cbd0d6;
    text-decoration: line-through;
    margin-left: 8px;
    font-weight: 500;
}
.kh-pay-current {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}
.kh-pay-discount-tag {
    font-size: 11px;
    color: #e74c3c;
    margin-top: 2px;
}
.kh-pay-discount-tag--vip {
    color: #b8860b;
}
.kh-pay-detail {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fafbfd;
    border: 1px dashed #e6ebf1;
    border-radius: 8px;
    font-size: 12px;
    color: #6a7180;
}
.kh-pay-detail-item {
    display: flex;
    justify-content: space-between;
    line-height: 22px;
}
.kh-pay-detail-item--discount span:last-child {
    color: #e74c3c;
    font-weight: 500;
}
.kh-pay-detail-item--total {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #ecf0f5;
    font-weight: 600;
    color: #333;
}
.kh-pay-detail-item--total span:last-child {
    color: #ff5722;
    font-size: 14px;
}
.kh-coupon-picker {
    padding: 8px 0 6px;
}
.kh-coupon-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fafaf8;
    border: 1px solid #f0ebe3;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}
.kh-coupon-picker-header:hover {
    background: #f5f0e8;
}
.kh-coupon-picker-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}
.kh-coupon-picker-title svg {
    color: #c4a265;
}
.kh-coupon-picker-badge {
    font-size: 11px;
    font-weight: 500;
    color: #c4a265;
    background: #fdf8f0;
    border: 1px solid #f0ebe3;
    padding: 1px 8px;
    border-radius: 20px;
}
.kh-coupon-picker-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
.kh-coupon-picker-status {
    font-size: 12px;
    color: #94a3b8;
}
.kh-coupon-picker-status.kh-coupon-status-active {
    color: #c4a265;
    font-weight: 500;
}
.kh-coupon-picker-arrow {
    color: #94a3b8;
    transition: transform 0.3s;
}
.kh-coupon-picker.kh-coupon-picker--open .kh-coupon-picker-arrow {
    transform: rotate(180deg);
}
.kh-coupon-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, margin-top 0.35s ease, opacity 0.25s ease;
    opacity: 0;
    margin-top: 0;
}
.kh-coupon-picker.kh-coupon-picker--open .kh-coupon-picker-list {
    max-height: 500px;
    opacity: 1;
    margin-top: 10px;
}
.kh-coupon-pick-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 2px solid #f0ebe3;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #fafaf8;
}
.kh-coupon-pick-item:hover {
    border-color: #e0d5c3;
}
.kh-coupon-pick-active {
    border-color: #c4a265;
    background: #fdf8f0;
}
.kh-coupon-pick-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f8f8f8;
}
.kh-coupon-pick-disabled:hover {
    border-color: #f0ebe3;
}
.kh-coupon-pick-left {
    flex-shrink: 0;
    width: 52px;
    text-align: center;
    margin-right: 12px;
    padding-right: 12px;
    border-right: 1px dashed #e0d5c3;
}
.kh-coupon-pick-val {
    font-size: 22px;
    font-weight: 800;
    color: #b8860b;
    line-height: 1;
}
.kh-coupon-pick-val small {
    font-size: 12px;
    font-weight: 600;
    vertical-align: top;
}
.kh-coupon-pick-disabled .kh-coupon-pick-val {
    color: #bbb;
}
.kh-coupon-pick-info {
    flex: 1;
    min-width: 0;
}
.kh-coupon-pick-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.3;
}
.kh-coupon-pick-cond {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}
.kh-coupon-pick-disabled .kh-coupon-pick-cond::after {
    content: ' · 未满足条件';
    color: #ef4444;
}
.kh-coupon-pick-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #e0d5c3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    transition: all 0.2s;
}
.kh-coupon-pick-check svg {
    opacity: 0;
    color: #fff;
    transition: opacity 0.2s;
}
.kh-coupon-pick-active .kh-coupon-pick-check {
    background: #c4a265;
    border-color: #c4a265;
}
.kh-coupon-pick-active .kh-coupon-pick-check svg {
    opacity: 1;
}
.kh-coupon-pick-none {
    padding: 10px 14px;
}
.kh-coupon-pick-none .kh-coupon-pick-name {
    color: #64748b;
}
.kh-pay-footer {
    margin-top: 8px;
}
.kh-pay-btns {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}
.kh-pay-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 0;
}
.kh-pay-total-label {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}
.kh-pay-total-value {
    font-size: 24px;
    font-weight: 800;
    color: #e74c3c;
}
.kh-pay-agreement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.kh-pay-agreement input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #3884f4;
    cursor: pointer;
}
.kh-pay-agreement-text {
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}
.kh-pay-agreement-link {
    color: #e74c3c;
    text-decoration: none;
    font-weight: 500;
}
.kh-pay-agreement-link:hover {
    text-decoration: underline;
}
.kh-pay-btn {
    flex: 1;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}
.kh-pay-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.kh-pay-btn:active {
    transform: translateY(0);
}
.kh-pay-btn--balance {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.kh-pay-btn--alipay {
    background: linear-gradient(135deg, #1677ff, #0958d9);
}

/* ===== 支付确认弹窗 ===== */
.kh-paycheck-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.kh-paycheck-overlay.is-open {
    display: flex;
}
.kh-paycheck-box {
    background: #fff;
    border-radius: 14px;
    width: 359px;
    max-width: 88vw;
    padding: 28px 28px 24px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    position: relative;
    animation: kh-paycheck-in 0.25s ease;
}
@keyframes kh-paycheck-in {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.kh-paycheck-x {
    position: absolute;
    top: 10px; right: 14px;
    background: none; border: none;
    font-size: 22px; color: #bbb;
    cursor: pointer; line-height: 1;
    transition: color 0.2s;
}
.kh-paycheck-x:hover { color: #666; }
.kh-paycheck-header {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}
.kh-paycheck-orderno {
    font-size: 11px;
    color: #b0bec5;
    font-family: monospace;
    margin-bottom: 18px;
    word-break: break-all;
}
.kh-paycheck-tip {
    font-size: 13px;
    color: #78909c;
    margin-bottom: 16px;
    line-height: 1.5;
}
.kh-paycheck-btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}
.kh-paycheck-btn:hover {
    transform: translateY(-1px);
}
.kh-paycheck-btn:active {
    transform: translateY(0);
}
.kh-paycheck-btn--go {
    background: linear-gradient(135deg, #2962ff, #1565f6);
    color: #fff;
}
.kh-paycheck-btn--go:hover {
    box-shadow: 0 4px 16px rgba(41,98,255,0.35);
    color: #fff;
}
.kh-paycheck-amount {
    font-size: 36px;
    font-weight: 800;
    color: #1f2937;
    margin: 20px 0 16px;
    letter-spacing: -1px;
}
.kh-paycheck-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #90a4ae;
}
.kh-paycheck-spinner {
    animation: kh-spin 1s linear infinite;
}
@keyframes kh-spin {
    to { transform: rotate(360deg); }
}
.kh-paycheck-status--ok {
    color: #10b981;
}
.kh-paycheck-status--ok .kh-paycheck-spinner {
    display: none;
}
.kh-paycheck-status--ok::before {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    background: #10b981;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5.5 4,7.5 8,3' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* ===== 会员中心 - 我的优惠券 ===== */
.kehua-coupons-inner {
    max-width: 100%;
}
.kehua-coupons-header {
    display: none;
}
.kehua-coupons-count {
    display: inline-block;
    font-size: 11px;
    color: #fff;
    background: #c4a265;
    padding: 0 7px;
    border-radius: 10px;
    line-height: 18px;
    font-weight: 500;
    vertical-align: middle;
    margin-left: 4px;
}
.kehua-coupons-get-more {
    font-size: 13px;
    color: #c4a265;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.kehua-coupons-get-more:hover {
    color: #b8860b;
}
.kehua-coupons-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}
.kehua-coupons-empty svg {
    color: #cbd5e1;
    margin-bottom: 16px;
}
.kehua-coupons-empty p {
    font-size: 14px;
    margin: 0 0 20px;
}
.kehua-coupons-empty-btn {
    display: inline-block;
    padding: 8px 28px;
    background: linear-gradient(135deg, #c4a265, #b8860b);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}
.kehua-coupons-empty-btn:hover {
    opacity: 0.9;
}
.kehua-coupons-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.kehua-coupon-item {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #f0ebe3;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.kehua-coupon-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.kehua-coupon-item-left {
    flex-shrink: 0;
    width: 120px;
    padding: 20px 0;
    text-align: center;
    background: linear-gradient(135deg, #fdf8f0 0%, #faf3e6 100%);
}
.kehua-coupon-item-amount {
    font-size: 36px;
    font-weight: 800;
    color: #b8860b;
    line-height: 1;
    margin-bottom: 6px;
}
.kehua-coupon-item-amount small {
    font-size: 16px;
    font-weight: 600;
    vertical-align: top;
    margin-right: 1px;
}
.kehua-coupon-item-condition {
    font-size: 12px;
    color: #a0896a;
}
.kehua-coupon-item-divider {
    width: 1px;
    align-self: stretch;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 4px,
        #e8dfd3 4px,
        #e8dfd3 8px
    );
}
.kehua-coupon-item-right {
    flex: 1;
    padding: 16px 20px;
    min-width: 0;
}
.kehua-coupon-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}
.kehua-coupon-item-time {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.6;
}
.kehua-coupon-item-status-wrap {
    position: absolute;
    top: 10px;
    right: 12px;
    text-align: right;
}
.kehua-coupon-item-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 20px;
    background: #ecfdf5;
    color: #059669;
}
.kehua-coupon-item--used .kehua-coupon-item-badge {
    background: #f1f5f9;
    color: #94a3b8;
}
.kehua-coupon-item--locked .kehua-coupon-item-badge {
    background: #fefce8;
    color: #ca8a04;
}
.kehua-coupon-item--expired .kehua-coupon-item-badge {
    background: #fef2f2;
    color: #ef4444;
}
.kehua-coupon-item-reason {
    font-size: 10px;
    font-weight: 400;
    color: #94a3b8;
    margin-top: 3px;
    white-space: nowrap;
}
.kehua-coupon-item--used .kehua-coupon-item-left,
.kehua-coupon-item--expired .kehua-coupon-item-left {
    background: #f8f8f8;
}
.kehua-coupon-item--used .kehua-coupon-item-amount,
.kehua-coupon-item--expired .kehua-coupon-item-amount {
    color: #c0c0c0;
}
.kehua-coupon-item--used .kehua-coupon-item-condition,
.kehua-coupon-item--expired .kehua-coupon-item-condition {
    color: #c0c0c0;
}
.kehua-coupon-item--used,
.kehua-coupon-item--expired {
    opacity: 0.7;
}
@media (max-width: 640px) {
    .kehua-coupon-item-left {
        width: 90px;
        padding: 16px 0;
    }
    .kehua-coupon-item-amount {
        font-size: 28px;
    }
    .kehua-coupon-item-right {
        padding: 12px 14px;
    }
    .kehua-coupon-item-status-wrap {
        top: 8px;
        right: 8px;
    }
    .kehua-coupon-item-badge {
        font-size: 10px;
        padding: 1px 8px;
    }
}

/* ===== 优惠券活动页 ===== */
.coupon-page { background: #faf6f0; }
.coupon-page footer { background: transparent; }
.coupon-page header .logo,
.coupon-page header .nav-menu a {
    color: #5a4a3a;
}
.coupon-page header .menu-toggle span {
    background: #5a4a3a;
}
.coupon-page header .nav-login-icon { color: #5a4a3a; }
.coupon-page header .nav-avatar-img { border-color: rgba(0,0,0,0.1); }
.coupon-hero {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, #f5e6c8 0%, #e8d5b0 30%, #f0e0c0 60%, #f8eed8 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.coupon-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding: 100px 0 60px 0;
}
.coupon-hero-sub {
    font-size: 14px;
    color: #8a7a6a;
    letter-spacing: 4px;
    margin-bottom: 16px;
}
.coupon-hero-title {
    font-size: 42px;
    font-weight: 800;
    color: #3a2a1a;
    margin: 0 0 12px;
    letter-spacing: 2px;
}
.coupon-hero-desc {
    font-size: 16px;
    color: #6a5a4a;
    margin-bottom: 20px;
    letter-spacing: 6px;
}
.coupon-hero-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #8a7a6a;
    background: rgba(255,255,255,0.6);
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
}
.coupon-hero-time a[href^="tel"] {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none;
}
.coupon-section {
    padding: 60px 0;
}
.coupon-section-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #3a2a1a;
    margin: 0 0 40px;
}
.coupon-section-title span {
    color: #c4a265;
    font-size: 28px;
    margin: 0 6px;
}
.coupon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.coupon-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #f0ebe3;
}
.coupon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.coupon-card--disabled {
    opacity: 0.6;
}
.coupon-card--disabled:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.coupon-card-body {
    position: relative;
    padding: 40px 24px 24px;
}
.coupon-card-body::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    border-bottom: 2px dashed #e8e0d4;
}
.coupon-card-notch-left,
.coupon-card-notch-right {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #faf6f0;
    border-radius: 50%;
    z-index: 2;
}
.coupon-card-notch-left {
    left: -10px;
    top: calc(100% - 82px);
    box-shadow: inset -2px 0 3px rgba(0,0,0,0.04);
}
.coupon-card-notch-right {
    right: -10px;
    top: calc(100% - 82px);
    box-shadow: inset 2px 0 3px rgba(0,0,0,0.04);
}
.coupon-card-amount {
    font-size: 58px;
    font-weight: 800;
    color: #b8860b;
    line-height: 1;
    margin-bottom: 10px;
}
.coupon-card-amount small {
    font-size: 24px;
    font-weight: 600;
    vertical-align: top;
    margin-right: 2px;
}
.coupon-card-condition {
    font-size: 14px;
    color: #8a7a6a;
    margin-bottom: 12px;
}
.coupon-card-scope {
    font-size: 13px;
    color: #b8a88a;
    padding-top: 12px;
    border-top: 1px solid #f5f0e8;
}
.coupon-card-action {
    padding: 24px;
}
.coupon-card-btn {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #c4a265, #b8860b);
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    letter-spacing: 1px;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
}
.coupon-card-btn:hover {
    opacity: 0.9;
    transform: scale(1.03);
}
.coupon-card-btn--disabled {
    background: #d1ccc4 !important;
    cursor: not-allowed;
}
.coupon-card-btn--disabled:hover {
    transform: none;
}
.coupon-rules {
    padding: 0 0 80px;
}
.coupon-rules-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.coupon-rule-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6a5a4a;
}
.coupon-rule-item svg {
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .coupon-hero {
        min-height: clamp(240px, 50vw, 360px);
    }
    .coupon-hero-inner {
        padding: 80px 0 40px;
    }
    .coupon-hero-title {
        font-size: 28px;
    }
    .coupon-hero-desc {
        font-size: 14px;
        letter-spacing: 3px;
    }
    .coupon-hero-time {
        font-size: 11px;
        padding: 6px 12px;
        gap: 4px;
    }
    .coupon-hero-time svg {
        width: 12px;
        height: 12px;
    }
    .coupon-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .coupon-card-amount {
        font-size: 36px;
    }
    .coupon-rules-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .coupon-section {
        padding: 40px 0;
    }
    .member-page--coupons .kehua-paylog-tabs {
        display: none;
    }
}

/* 代理代客购买输入区 */
.kh-agent-buyer-section {
    padding: 0 0 6px;
}
.kh-agent-buyer-label {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 10px;
}
.kh-agent-buyer-label span {
    font-weight: 400;
    font-size: 12px;
    color: #94a3b8;
    margin-left: 4px;
}
.kh-agent-buyer-fields {
    display: flex;
    gap: 10px;
}
.kh-agent-buyer-field {
    flex: 1;
}
.kh-agent-buyer-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.kh-agent-buyer-input:focus {
    border-color: #3b82f6;
}
.kh-agent-buyer-input::placeholder {
    color: #94a3b8;
    font-size: 13px;
}
.kh-agent-buyer-hint {
    font-size: 12px;
    margin-top: 6px;
    min-height: 18px;
    color: #94a3b8;
}
.kh-agent-buyer-hint.is-ok {
    color: #22c55e;
}
.kh-agent-buyer-hint.is-err {
    color: #ef4444;
}
@media (max-width: 480px) {
    .kh-agent-buyer-fields {
        flex-direction: column;
        gap: 8px;
    }
}

/* 代理自购确认弹窗 */
.kh-confirm-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.kh-confirm-overlay.is-open {
    display: flex;
}
.kh-confirm-box {
    background: #fff;
    border-radius: 14px;
    width: 90%;
    max-width: 400px;
    padding: 28px 24px 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    text-align: center;
}
.kh-confirm-title {
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}
.kh-confirm-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 22px;
}
.kh-confirm-desc strong {
    color: #1f2937;
}
.kh-confirm-btns {
    display: flex;
    gap: 10px;
}
.kh-confirm-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: opacity .2s;
}
.kh-confirm-btn:hover { opacity: .85; }
.kh-confirm-btn--back {
    background: #3b82f6;
    color: #fff;
}
.kh-confirm-btn--ok {
    background: #f1f5f9;
    color: #64748b;
}

/* 代理代客下单记录 */
.agent-proxy-orders .order-card {
    position: relative;
}
.agent-proxy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #f0f7ff;
    color: #1a73e8;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 8px;
}
.agent-proxy-badge svg {
    flex-shrink: 0;
}

/* ========== 刻画社区 BBS ========== */
.bbs-page {
    background: #f4f7f9;
}
.bbs-page header .logo,
.bbs-page header .nav-menu a {
    color: #1a1a1a;
}
.bbs-page header .menu-toggle span {
    background: #1a1a1a;
}

.bbs-hero {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 50%, #f5f8fc 100%);
    padding: 120px 0 0;
    overflow: hidden;
}
.bbs-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 48px;
}
.bbs-hero-text {
    flex: 1;
    max-width: 520px;
}
.bbs-hero-text h1 {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    letter-spacing: 1px;
}
.bbs-hero-text p {
    font-size: 17px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 32px;
}
.bbs-hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.bbs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all .25s ease;
    cursor: pointer;
    border: none;
}
.bbs-btn-primary {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .3);
}
.bbs-btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, .35);
}
.bbs-btn-outline {
    background: #fff;
    color: #333;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.bbs-btn-outline:hover {
    color: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}
.bbs-btn-block {
    width: 100%;
    padding: 14px;
    font-size: 16px;
}
.bbs-hero-img {
    flex: 1;
    max-width: 520px;
    text-align: right;
}
.bbs-hero-img img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.bbs-hero-img .bbs-hero-img-cover {
    width: 100%;
    max-height: 300px;
    border-radius: 12px;
}

.bbs-main {
    padding: 40px 0 80px;
}

/* 三栏布局：与帖子阅读页同宽（1300 容器 / gap 12 / 左 216 + 中 712 + 右 288） */
.bbs-layout {
    display: grid;
    grid-template-columns: minmax(180px, 216px) 712px 288px;
    gap: 12px;
    align-items: start;
    width: 100%;
}

.bbs-page main.container.bbs-layout {
    max-width: 1300px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    padding-bottom: 80px;
}
.bbs-page .bbs-panel,
.bbs-page .kehua-widget {
    background: #fff;
    border-radius: 12px;
    border: none;
    box-shadow: none;
    overflow: hidden;
}
.bbs-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 14px;
    padding: 0;
}

/* kehua 侧栏 widget（社区页） */
.bbs-page .kehua-discovery-forums__rec-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    height: 18px;
}
.bbs-page .kehua-discovery-forums__rec-mark::before,
.bbs-page .kehua-discovery-forums__rec-mark::after {
    content: "";
    width: 4px;
    border-radius: 999px;
    transform: skewX(-14deg);
    transform-origin: center center;
}
.bbs-page .kehua-discovery-forums__rec-mark::before {
    height: 18px;
    background: linear-gradient(rgb(29, 78, 216) 0%, rgb(37, 99, 235) 100%);
}
.bbs-page .kehua-discovery-forums__rec-mark::after {
    height: 16px;
    background: linear-gradient(rgba(59, 130, 246, 0.45) 0%, rgba(96, 165, 250, 0.38) 100%);
}
.bbs-page .kehua-widget-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 400;
    color: rgb(17, 24, 39);
    line-height: 1.3;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.bbs-page .kehua-widget--bbs-tags,
.bbs-page .kehua-widget--bbs-stats,
.bbs-page .kehua-widget--bbs-active {
    padding: 0;
}
.bbs-page .kehua-widget--bbs-tags .bbs-hot-tags-body {
    padding: 14px 16px 16px;
}
.bbs-page .bbs-hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bbs-page .bbs-hot-tag {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #2563eb;
    background: #eff6ff;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.bbs-page .bbs-hot-tag:hover,
.bbs-page .bbs-hot-tag.active {
    background: #2563eb;
    color: #fff;
}
.bbs-page .kehua-widget--bbs-tags .bbs-more-tags {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: #2563eb;
    text-decoration: none;
}
.bbs-page .kehua-widget--bbs-tags .bbs-more-tags:hover {
    text-decoration: underline;
}
.bbs-page .kehua-hot-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.bbs-page .kehua-hot-list--index {
    padding: 5px 0;
}
.bbs-page .kehua-hot-list--index li {
    padding: 0 0 5px;
}
.bbs-page .kehua-hot-list--index a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    line-height: 1.3;
    color: rgb(31, 41, 55);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}
.bbs-page .kehua-hot-list--index .kehua-hot-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
}
.bbs-page .kehua-hot-num--1 {
    color: #fff;
    background: rgb(99, 102, 241) !important;
}
.bbs-page .kehua-hot-num--2 {
    color: #fff;
    background: rgb(139, 92, 246) !important;
}
.bbs-page .kehua-hot-num--3 {
    color: #fff;
    background: rgb(167, 139, 250) !important;
}
.bbs-page .kehua-hot-num--rest {
    background: rgb(226, 232, 240);
    color: rgb(102, 102, 102);
}
.bbs-page .kehua-hot-title {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(31, 41, 55);
    transition: color 0.2s;
}
.bbs-page .kehua-hot-list--index a:hover .kehua-hot-title,
.bbs-page .kehua-hot-list--index a.is-active .kehua-hot-title {
    color: #0066ff;
}
.bbs-page .kehua-widget-footer-link {
    padding: 0 16px 12px;
}
.bbs-page .kehua-bbs-stats-list {
    list-style: none;
    margin: 0;
    padding: 5px 0 8px;
}
.bbs-page .kehua-bbs-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    font-size: 14px;
    color: rgb(100, 116, 139);
}
.bbs-page .kehua-bbs-stat-val {
    font-size: 15px;
    font-weight: 600;
    color: rgb(17, 24, 39);
}
.bbs-page .kehua-rankboard-list {
    margin: 0;
    padding: 4px 0 6px;
    list-style: none;
}
.bbs-page .kehua-rankboard-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
}
.bbs-page .kehua-rankboard-item:last-child {
    border-bottom: none;
}
.bbs-page .kehua-bbs-stat-row:not(:last-child) {
    border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.bbs-page .kehua-rankboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
}
.bbs-page .kehua-rankboard-row--static {
    cursor: default;
}
.bbs-page .kehua-rankboard-avatar-wrap {
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}
.bbs-page .kehua-rankboard-avatar {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: rgb(241, 245, 249);
}
.bbs-page .kehua-rankboard-main {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bbs-page .kehua-rankboard-name {
    font-size: 14px;
    font-weight: 500;
    color: rgb(31, 41, 55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bbs-page .kehua-rankboard-meta {
    font-size: 12px;
    color: rgb(148, 163, 184);
    line-height: 1.3;
}

/* 左侧导航 */
.bbs-nav-panel {
    padding: 8px 0;
}
.bbs-nav {
    display: flex;
    flex-direction: column;
}
.bbs-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    transition: all .2s;
}
.bbs-nav-item:hover {
    background: #f8fafc;
    color: #2563eb;
}
.bbs-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 500;
}
.bbs-page .bbs-nav-item {
    border-left: none;
    position: relative;
}
.bbs-page .bbs-nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 28px;
    background: rgb(37, 99, 235);
    border-radius: 0 4px 4px 0;
}
.bbs-nav-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .7;
}
.bbs-nav-item.active .bbs-nav-ico {
    opacity: 1;
}
.bbs-nav-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #e5e7eb;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 中间内容区 */
.bbs-content {
    min-width: 0;
}
.bbs-feed-card {
    overflow: hidden;
}
.bbs-page .bbs-tabs {
    display: flex;
    gap: 28px;
    margin-bottom: 0;
    border-bottom: 1px solid #e8ecf1;
    padding: 0 20px;
}
.bbs-tab {
    position: relative;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: #64748b;
    text-decoration: none;
    transition: color .2s;
}
.bbs-tab:hover {
    color: #3884f4;
}
.bbs-tab.active {
    color: #3884f4;
}
.bbs-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 4px;
    width: 30px;
    background: #3884f4;
    border-radius: 0.75rem 0.75rem 0 0;
}

/* 信息流列表 */
.bbs-feed--stream {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.bbs-stream-card {
    --bbs-stream-inset: 56px;
    padding: 16px 16px 18px;
    border-bottom: 1px solid #eef1f5;
    box-sizing: border-box;
}
.bbs-stream-card:last-child {
    border-bottom: none;
}
.bbs-page .bbs-feed--stream {
    gap: 0;
    padding: 4px 0 12px;
}
.bbs-page .bbs-sidebar-left,
.bbs-page .bbs-sidebar-right {
    position: sticky;
    top: 88px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.bbs-stream-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.bbs-stream-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}
.bbs-stream-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bbs-stream-header__main {
    flex: 1;
    min-width: 0;
}
.bbs-stream-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.bbs-stream-header__name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.bbs-stream-author {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}
.bbs-stream-lv {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: rgba(100, 116, 139, .12);
    line-height: 1.2;
}
.bbs-stream-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.bbs-stream-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.bbs-stream-badge--top {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.bbs-stream-badge--featured {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.bbs-stream-meta {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.bbs-stream-body {
    margin-left: var(--bbs-stream-inset);
    margin-right: 2px;
}
.bbs-stream-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
}
.bbs-stream-title a {
    color: #262626;
    text-decoration: none;
}
.bbs-stream-title a:hover {
    color: #2563eb;
}
.bbs-stream-excerpt {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bbs-stream-excerpt a {
    color: inherit;
    text-decoration: none;
}
.bbs-stream-excerpt a:hover {
    color: #666;
}
.bbs-stream-text {
    font-size: 15px;
    color: #1a1a1a;
    line-height: 1.6;
    margin: 0 0 10px;
    word-break: break-word;
}
.bbs-stream-media {
    margin-top: 4px;
}
.bbs-stream-media--single {
    max-width: 100%;
}
.bbs-stream-media--single a {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #eceff1;
    line-height: 0;
}
.bbs-stream-media--single img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 480px;
    height: auto;
    border-radius: 0;
    transition: transform .25s ease;
}
.bbs-stream-media--single a:hover img {
    transform: scale(1.04);
}
.bbs-stream-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 100%;
}
.bbs-stream-grid-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #eceff1;
    display: block;
}
.bbs-stream-grid-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.bbs-stream-grid-cell:hover img {
    transform: scale(1.04);
}
.bbs-stream-grid-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: clamp(14px, 4.2vmin, 20px);
    font-weight: 700;
    pointer-events: none;
}
.bbs-stream-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    margin-left: var(--bbs-stream-inset);
}
.bbs-stream-forum {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 20px;
    background: #f4f6f8;
    text-decoration: none;
    color: #555;
    font-size: 12px;
    max-width: calc(100% - 140px);
    min-width: 0;
}
.bbs-stream-forum__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: .85;
}
.bbs-stream-forum span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 帖子流互动条（对齐 kehua_theme feed-mock） */
.bbs-feed--stream {
    --color-yellow: #ffc107;
}
.bbs-feed--stream .kehua-post-actions--feed-mock {
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    flex-wrap: nowrap;
    box-sizing: border-box;
}
.bbs-feed--stream .kehua-post-actions--feed-mock .kehua-feed-act-ico,
.bbs-feed--stream .kehua-post-actions--feed-mock svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #b0b0b0;
}
.bbs-feed--stream .kehua-post-actions--feed-mock > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    font-size: 14px;
    color: #9a9a9a;
    text-decoration: none;
    cursor: pointer;
}
.bbs-feed--stream .kehua-post-actions--feed-mock a.kehua-feed-act-comment {
    color: #9a9a9a;
}
.bbs-feed--stream .kehua-post-actions--feed-mock .kehua-liked,
.bbs-feed--stream .kehua-post-actions--feed-mock .kehua-favorited {
    color: #9a9a9a !important;
}
.bbs-feed--stream .kehua-post-actions--feed-mock .kehua-liked svg {
    color: rgb(231, 76, 60) !important;
}
.bbs-feed--stream .kehua-post-actions--feed-mock .kehua-favorited svg {
    color: var(--color-yellow) !important;
}
@media (max-width: 768px) {
    .bbs-feed--stream .kehua-post-actions--feed-mock .kehua-feed-act-ico,
    .bbs-feed--stream .kehua-post-actions--feed-mock svg {
        width: 20px;
        height: 20px;
    }
}

/* 右侧边栏 */
.bbs-sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bbs-page .kehua-widget--bbs-theme-hot {
    padding: 0;
}
.bbs-theme-hot-list {
    list-style: none;
    margin: 0;
    padding: 6px 0 10px;
}
.bbs-theme-hot-item {
    padding: 0;
}
.bbs-theme-hot-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
}
.bbs-theme-hot-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    transition: transform .28s cubic-bezier(0.34, 1.2, 0.64, 1);
    transform-origin: center center;
    will-change: transform;
}
.bbs-theme-hot-link:hover .bbs-theme-hot-thumb {
    transform: rotate(-4deg);
}
.bbs-theme-hot-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bbs-theme-hot-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}
.bbs-theme-hot-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bbs-theme-hot-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.4;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}
.bbs-theme-hot-link:hover .bbs-theme-hot-title {
    color: #2563eb;
}
.bbs-theme-hot-meta {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bbs-more-tags {
    display: inline-block;
    font-size: 13px;
    color: #2563eb;
    text-decoration: none;
}
.bbs-more-tags:hover {
    text-decoration: underline;
}

/* 标签弹层等（保留旧 class 兼容） */
.bbs-active-desc {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.bbs-filter-bar {
    margin-bottom: 32px;
}
.bbs-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.bbs-cat-item {
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    color: #555;
    background: #f3f4f6;
    text-decoration: none;
    transition: all .2s;
}
.bbs-cat-item:hover,
.bbs-cat-item.active {
    background: #2563eb;
    color: #fff;
}
.bbs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bbs-tag-item {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--tag-color, #3b82f6);
    background: color-mix(in srgb, var(--tag-color, #3b82f6) 12%, transparent);
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--tag-color, #3b82f6) 25%, transparent);
    transition: all .2s;
}
.bbs-tag-item:hover,
.bbs-tag-item.active {
    background: var(--tag-color, #3b82f6);
    color: #fff;
    border-color: var(--tag-color, #3b82f6);
}

.bbs-post-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bbs-post-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    border: 1px solid #f0f0f0;
    transition: box-shadow .25s, transform .25s;
}
.bbs-post-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.bbs-post-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
}
.bbs-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f4f6;
}
.bbs-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #999;
}
.bbs-post-author {
    color: #333;
    font-weight: 500;
}
.bbs-post-cat {
    padding: 2px 8px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 4px;
    font-size: 12px;
}
.bbs-post-top {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2px 10px;
    background: #fef3c7;
    color: #d97706;
    font-size: 12px;
    border-radius: 4px;
}
.bbs-post-title {
    font-size: 18px;
    margin-bottom: 8px;
}
.bbs-post-title a {
    color: #1a1a1a;
    text-decoration: none;
}
.bbs-post-title a:hover {
    color: #2563eb;
}
.bbs-post-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
}
.bbs-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.bbs-post-tag {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
}
.bbs-post-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #999;
    padding-top: 12px;
    border-top: 1px solid #f5f5f5;
}
.bbs-post-read {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.bbs-post-read:hover {
    text-decoration: underline;
}

.bbs-empty {
    text-align: center;
    padding: 80px 20px;
    color: #999;
    font-size: 15px;
}
.bbs-load-more {
    text-align: center;
    padding: 20px;
}
.bbs-feed-card:has(.bbs-empty) .bbs-load-more {
    display: none;
}
.bbs-end {
    color: #bbb;
    font-size: 13px;
}
.bbs-end p {
    margin: 0;
}
.bbs-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #999;
}

/* ========== 社区帖子阅读页（对齐 kehua_theme thread.htm） ========== */
.bbs-page.bbs-detail-read {
    background: #f4f7f9;
    --bbs-detail-header-offset: 88px;
}
.bbs-page.bbs-detail-read main.container.bbs-detail-layout {
    /* 与 header .container 同宽：1300px + 左右 30px，仅设垂直间距 */
    max-width: 1300px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--bbs-detail-header-offset);
    padding-bottom: 80px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.bbs-detail-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bbs-detail-card {
    background: #fff;
    border-radius: 12px;
    /* 对齐 kehua_theme .kehua-page-read .kehua-article 内边距 */
    padding: 20px;
    min-width: 0;
    border: none;
    box-shadow: none;
}
.bbs-detail-comment-block {
    background: #fff;
    border-radius: 12px;
    min-width: 0;
    border: none;
    box-shadow: none;
    overflow: hidden;
    padding: 0;
}
.bbs-detail-article {
    min-width: 0;
}
.bbs-detail-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2em .45em;
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1a1a;
}
.bbs-detail-head {
    margin-bottom: 20px;
}
.bbs-detail-head-avatar {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #f0f0f0;
    flex-shrink: 0;
}
.bbs-detail-author-name {
    display: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: #1a1a1a;
}
.bbs-detail-meta {
    margin-bottom: 0;
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.bbs-detail-meta-sep {
    margin: 0 10px;
    opacity: .55;
    user-select: none;
}
.bbs-detail-forum {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.bbs-detail-forum:hover {
    color: #2563eb;
    text-decoration: underline;
}
.bbs-detail-body {
    font-size: 15px;
    line-height: 1.75;
    color: #333;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}
.bbs-detail-body p {
    margin: 0 0 1em;
}
.bbs-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.bbs-detail-body pre,
.bbs-detail-body code {
    max-width: 100%;
    overflow-x: auto;
}
.bbs-detail-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
}
.bbs-detail-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    min-height: 30px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--tag-color, #3b82f6) 25%, #e5e7eb);
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    background: #fff;
    color: var(--tag-color, #3b82f6) !important;
}
.bbs-detail-tag:hover {
    background: color-mix(in srgb, var(--tag-color, #3b82f6) 8%, #fff);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
}

/* 左侧固定互动条（桌面端，对齐 kehua_theme article-rail） */
.bbs-detail-rail {
    display: none;
}
.bbs-detail-mobile-actions {
    display: none;
}
@media (min-width: 993px) {
    body.bbs-detail-read .bbs-detail-rail {
        display: block;
        position: fixed;
        z-index: 39;
        top: var(--bbs-detail-header-offset, 88px);
        padding-top: clamp(200px, 26vh, 400px);
        --bbs-detail-layout-max: 1300px;
        --bbs-detail-layout-pad: 30px;
        --bbs-detail-layout-gap: 16px;
        --bbs-detail-rail-left: max(8px, calc((100vw - min(var(--bbs-detail-layout-max), 100vw - var(--bbs-detail-layout-pad) * 2)) / 2 - var(--bbs-detail-layout-gap) - 45px));
        left: var(--bbs-detail-rail-left);
        pointer-events: none;
        box-sizing: border-box;
    }
    body.bbs-detail-read .bbs-detail-rail__card {
        pointer-events: auto;
        width: 64px;
        padding: 6px 0;
        background: #fff;
        border-radius: 12px;
        border: none;
        box-shadow: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    body.bbs-detail-read .bbs-detail-rail__sep {
        height: 1px;
        margin: 0 10px;
        background: rgba(0, 0, 0, 0.06);
        flex-shrink: 0;
    }
    body.bbs-detail-read .bbs-detail-rail__item {
        flex-shrink: 0;
    }
    body.bbs-detail-read .bbs-detail-rail__hit {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 10px 4px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
        color: #64748b;
        text-decoration: none;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        transition: color 0.2s, background 0.2s;
        border: none;
        background: transparent;
        font: inherit;
    }
    body.bbs-detail-read .bbs-detail-rail__hit:hover {
        color: #0066ff;
        background: rgba(0, 0, 0, 0.02);
    }
    body.bbs-detail-read .bbs-detail-rail__ico-wrap {
        position: relative;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    body.bbs-detail-read .bbs-detail-rail__svg {
        width: 26px;
        height: 26px;
        display: block;
        flex-shrink: 0;
        fill: currentColor;
    }
    body.bbs-detail-read .bbs-detail-rail__badge {
        position: absolute;
        top: -5px;
        right: -8px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: #ef4444;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        line-height: 18px;
        text-align: center;
        box-sizing: border-box;
        pointer-events: none;
    }
    body.bbs-detail-read .bbs-detail-rail__label {
        font-size: 12px;
        line-height: 1.2;
        color: inherit;
        pointer-events: none;
    }
    body.bbs-detail-read .bbs-detail-rail__hit--like.is-liked,
    body.bbs-detail-read .bbs-detail-rail__hit--like.is-liked .bbs-detail-rail__svg {
        color: #e74c3c !important;
    }
    body.bbs-detail-read .bbs-detail-rail__hit--fav.is-favorited,
    body.bbs-detail-read .bbs-detail-rail__hit--fav.is-favorited .bbs-detail-rail__svg {
        color: #f59e0b !important;
    }
    .bbs-detail-share-wrap {
        position: relative;
        padding-right: 10px;
        margin-right: -10px;
        z-index: 10;
    }
    .bbs-detail-share-popup {
        position: absolute;
        left: 100%;
        top: -80px;
        margin-left: 6px;
        background: #fff;
        border-radius: 12px;
        padding: 10px;
        width: 140px;
        z-index: 999;
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        color: #333;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .bbs-detail-share-popup::before {
        content: '';
        position: absolute;
        top: 0;
        right: 100%;
        width: 8px;
        height: 100%;
    }
    .bbs-detail-share-wrap.bbs-detail-share-ready:hover .bbs-detail-share-popup {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .bbs-detail-share-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .bbs-detail-share-weixin-wrap {
        position: relative;
        padding-right: 10px;
        margin-right: -10px;
    }
    .bbs-detail-share-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        text-decoration: none;
        border-radius: 6px;
        cursor: pointer;
        color: #333;
        font-size: 13px;
        transition: background-color 0.2s, color 0.2s;
    }
    .bbs-detail-share-item:hover {
        background-color: rgba(91, 155, 255, 0.12);
        color: #0066ff;
    }
    .bbs-detail-weixin-qr {
        position: absolute;
        top: -10px;
        left: 100%;
        margin-left: 6px;
        width: 170px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        color: #333;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .bbs-detail-weixin-qr::before {
        content: '';
        position: absolute;
        top: 0;
        right: 100%;
        width: 8px;
        height: 100%;
    }
    .bbs-detail-share-wrap.bbs-detail-share-ready .bbs-detail-share-weixin-wrap:hover .bbs-detail-weixin-qr {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .bbs-detail-weixin-qr-tip {
        font-size: 10px;
        text-align: center;
        margin-bottom: 8px;
        color: #999;
    }
    .bbs-detail-weixin-qr-img {
        border-radius: 6px;
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 140px;
        height: auto;
        aspect-ratio: 1;
    }
}

/* 社区页 / 帖子阅读页右侧工具条（对齐 kehua_theme layout-rail） */
.bbs-detail-layout-rail.kehua-layout-rail {
    display: none;
}
@media (min-width: 993px) {
    body.bbs-detail-read .bbs-detail-layout-rail.kehua-layout-rail,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail.kehua-layout-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 44px;
        box-sizing: border-box;
        padding-top: clamp(250px, 32vh, 480px);
        padding-bottom: 16px;
        position: fixed;
        z-index: 40;
        top: var(--bbs-detail-header-offset, 88px);
        margin: 0;
        pointer-events: none;
        --bbs-detail-layout-max: 1300px;
        --bbs-detail-layout-pad: 30px;
        --bbs-detail-layout-gap: 16px;
        --bbs-detail-layout-rail-left: calc((100vw + min(var(--bbs-detail-layout-max), 100vw - var(--bbs-detail-layout-pad) * 2)) / 2 + var(--bbs-detail-layout-gap));
        left: min(var(--bbs-detail-layout-rail-left), calc(100vw - 58px));
    }
    body.bbs-detail-read .bbs-detail-layout-rail.kehua-layout-rail > *,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail.kehua-layout-rail > * {
        pointer-events: auto;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__btn,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__btn {
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 10px;
        background: #fff;
        color: #64748b;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-decoration: none;
        transition: background .2s, color .2s, transform .2s;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__btn:hover,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__btn:hover {
        background: #f8fafc;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap:hover .kehua-layout-rail__wechat,
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap:focus-within .kehua-layout-rail__wechat,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap:hover .kehua-layout-rail__wechat,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap:focus-within .kehua-layout-rail__wechat {
        background: #2563eb;
        color: #fff;
        filter: brightness(1.04);
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__post:hover,
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__post:focus-visible,
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__top:hover,
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__top:focus-visible,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__post:hover,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__post:focus-visible,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__top:hover,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__top:focus-visible {
        background: #2563eb;
        color: #fff;
        filter: brightness(1.04);
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__top,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__top {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s, visibility .25s, transform .2s;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__top.kehua-layout-rail__top--visible,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__top.kehua-layout-rail__top--visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__ico,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__ico {
        display: block;
        width: 26px;
        height: 26px;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap {
        position: relative;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__qr-pop,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__qr-pop {
        position: absolute;
        right: calc(100% + 12px);
        top: 0;
        width: 200px;
        padding: 14px 14px 12px;
        border-radius: 12px;
        background: #2563eb;
        box-shadow: rgba(0, 0, 0, .18) 0 8px 28px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s, visibility .2s;
        z-index: 100;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap:hover .kehua-layout-rail__qr-pop,
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap:focus-within .kehua-layout-rail__qr-pop,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap:hover .kehua-layout-rail__qr-pop,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__wechat-wrap:focus-within .kehua-layout-rail__qr-pop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__qr-inner,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__qr-inner {
        background: #fff;
        border-radius: 8px;
        padding: 8px;
        line-height: 0;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__qr-inner img,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__qr-inner img {
        display: block;
        width: 100%;
        height: auto;
    }
    body.bbs-detail-read .bbs-detail-layout-rail .kehua-layout-rail__qr-hint,
    body.bbs-page:not(.bbs-create-page) .bbs-detail-layout-rail .kehua-layout-rail__qr-hint {
        margin: 10px 0 0;
        font-size: 13px;
        line-height: 1.45;
        color: #fff;
        text-align: center;
    }
}

/* 移动端底部互动条（对齐 kehua_theme article-actions） */
@media (max-width: 992px) {
    .bbs-detail-mobile-actions {
        display: block;
        margin-top: 16px;
        padding: 16px 8px 4px;
        border-top: 1px solid #f0f0f0;
        box-sizing: border-box;
    }
    .bbs-detail-mobile-post-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        width: 100%;
        padding: 0 2px;
        box-sizing: border-box;
    }
    .bbs-detail-mobile-act {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        flex: 1 1 0;
        color: #666;
        text-decoration: none;
        cursor: pointer;
        gap: 5px;
        border: none;
        background: none;
        padding: 0;
        font: inherit;
    }
    .bbs-detail-mobile-act svg {
        box-sizing: content-box;
        display: block;
        width: 20px;
        height: 20px;
        padding: 7px;
        border-radius: 999px;
        border: 1px solid #ccc;
        flex-shrink: 0;
        fill: currentColor;
    }
    .bbs-detail-mobile-act > span {
        font-size: 12px;
        line-height: 1;
    }
}

/* 移动端分享弹窗（对齐 kehua_theme thread_post_actions.inc.htm） */
.mobile-share-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.mobile-share-overlay.show {
    opacity: 1;
    visibility: visible;
}
.mobile-share-popup {
    background: #fff;
    border-radius: 12px;
    width: 300px;
    box-sizing: border-box;
}
.mobile-share-head {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 50px;
    border-bottom: 1px solid #f6f6f6;
}
.mobile-share-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 15px;
}
.mobile-share-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}
.mobile-share-cancel {
    text-align: center;
    padding: 15px;
    border-top: 1px solid #f6f6f6;
    color: #999;
    cursor: pointer;
}
.mobile-wx-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.mobile-wx-overlay.show {
    opacity: 1;
    visibility: visible;
}
.mobile-wx-popup {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
}
.mobile-wx-tip {
    margin-bottom: 15px;
    font-size: 14px;
}
.mobile-wx-popup img {
    width: 160px;
    height: 160px;
    border-radius: 4px;
}
.mobile-wx-close {
    margin-top: 15px;
    cursor: pointer;
    color: #666;
}
.mobile-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.mobile-toast.show {
    opacity: 1;
    visibility: visible;
}

.bbs-detail-nav {
    display: flex;
    gap: 16px;
}
.bbs-detail-nav-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 20px 24px;
    background: #fff;
    color: #333;
    border-radius: 12px;
    text-decoration: none;
    transition: .2s;
    border: none;
    box-shadow: none;
    cursor: pointer;
}
.bbs-detail-nav-btn svg {
    width: 16px;
    height: 16px;
}
.bbs-detail-nav-btn:hover .bbs-detail-nav-title {
    color: #2563eb;
}
.bbs-detail-nav-prev {
    align-items: flex-start;
}
.bbs-detail-nav-next {
    align-items: flex-end;
    text-align: right;
}
.bbs-detail-nav-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.bbs-detail-nav-title {
    font-size: 14px;
    line-height: 1.4;
    transition: color .2s;
}
.bbs-detail-nav-disabled {
    opacity: 1;
    pointer-events: none;
    color: #999;
}
.bbs-detail-comment-block__title,
.bbs-detail-widget--hot .bbs-detail-widget-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 400;
    color: #111827;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    line-height: 1;
}
.bbs-detail-comment-block__title {
    justify-content: flex-start;
    padding: 20px;
    font-weight: 600;
    box-sizing: border-box;
}
.bbs-detail-comment-heading {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.bbs-detail-rec-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    height: 18px;
    align-self: center;
}
.bbs-detail-rec-mark::before,
.bbs-detail-rec-mark::after {
    content: "";
    width: 4px;
    border-radius: 999px;
    transform: skewX(-14deg);
    transform-origin: center center;
}
.bbs-detail-rec-mark::before {
    height: 18px;
    background: linear-gradient(rgb(29, 78, 216) 0%, rgb(37, 99, 235) 100%);
}
.bbs-detail-rec-mark::after {
    height: 16px;
    background: linear-gradient(rgba(59, 130, 246, 0.45) 0%, rgba(96, 165, 250, 0.38) 100%);
}
.bbs-detail-empty-tip {
    text-align: center;
    padding: 40px 16px;
    color: #9ca3af;
    font-size: 14px;
}
.bbs-detail-reply-gate-outer {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
}
.bbs-detail-reply-gate {
    margin-top: 0;
}
.bbs-detail-reply-gate-card {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 1.25rem 1.35rem;
    border-radius: 12px;
    background: linear-gradient(145deg, rgb(250, 252, 251) 0%, rgb(240, 244, 242) 100%);
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: rgba(0, 0, 0, 0.05) 0 2px 14px;
}
.bbs-detail-reply-gate-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(61, 155, 92, 0.12);
    color: #0066ff;
}
.bbs-detail-reply-gate-text {
    flex: 1 1 0;
    min-width: 160px;
}
.bbs-detail-reply-gate-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.02em;
}
.bbs-detail-reply-gate-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #999;
}
.bbs-detail-reply-gate-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
    background: #0066ff;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: rgba(61, 155, 92, 0.28) 0 2px 10px;
}
.bbs-detail-reply-gate-btn:hover {
    transform: translateY(-1px);
    background: #0052cc;
    box-shadow: rgba(61, 155, 92, 0.35) 0 4px 14px;
    color: #fff;
}
.bbs-detail-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: var(--bbs-detail-header-offset, 88px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.bbs-detail-author-card,
.bbs-detail-widget {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: none;
    box-shadow: none;
}
.bbs-detail-author-card {
    padding: 0;
}
.bbs-detail-author-banner {
    height: 120px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 45%, #93c5fd 100%);
    position: relative;
}
.bbs-detail-author-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 0%, rgba(255, 255, 255, .55) 60%, #fff 95%);
}
.bbs-detail-author-main {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 20px 20px;
}
.bbs-detail-author-avatar {
    display: block;
    width: 80px;
    height: 80px;
    margin: -74px auto 10px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px;
    background: #f3f4f6;
}
.bbs-detail-author-id .bbs-detail-author-name {
    display: block;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}
.bbs-detail-author-role {
    margin: 0 0 16px;
    font-size: 13px;
    color: #e35d2a;
    line-height: 1.4;
}
.bbs-detail-author-stats {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin: 0 0 15px;
    padding: 10px 0;
    background: #f9fafb;
    border-radius: 8px;
}
.bbs-detail-author-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
}
.bbs-detail-author-stat:not(:last-child) {
    border-right: 1px dashed rgba(0, 0, 0, .08);
}
.bbs-detail-author-stat-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
}
.bbs-detail-author-stat-num {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
}
.bbs-detail-author-recent {
    list-style: none;
    margin: 15px 0 0;
    padding: 0;
    text-align: left;
}
.bbs-detail-author-recent-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
    transition: opacity .2s;
}
.bbs-detail-author-recent-link:hover {
    opacity: .85;
}
.bbs-detail-author-recent-title {
    flex: 1;
    min-width: 0;
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bbs-detail-author-recent-date {
    flex-shrink: 0;
    display: block;
    font-size: 12px;
    color: #aaa;
    white-space: nowrap;
}
.bbs-detail-widget--hot {
    padding: 0;
    overflow: hidden;
}
.bbs-detail-widget--hot .bbs-detail-widget-title {
    margin: 0;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.bbs-detail-hot-list {
    margin: 0;
    padding: 5px 0;
    list-style: none;
}
.bbs-detail-hot-list li {
    padding: 0 0 5px;
}
.bbs-detail-hot-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    color: #333;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    transition: color .2s;
}
.bbs-detail-hot-list a:hover .bbs-detail-hot-title {
    color: #2563eb;
}
.bbs-detail-hot-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
    color: #999;
    background: #f3f4f6;
}
.bbs-detail-hot-num--1 {
    color: #fff;
    background: #6366f1 !important;
}
.bbs-detail-hot-num--2 {
    color: #fff;
    background: #8b5cf6 !important;
}
.bbs-detail-hot-num--3 {
    color: #fff;
    background: #a78bfa !important;
}
.bbs-detail-hot-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bbs-detail-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    padding: 14px 22px;
    border-radius: 10px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 500;
}
.bbs-detail-toast svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.bbs-detail-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.bbs-create-wrap {
    padding-bottom: 80px;
}
body.page-body.bbs-page.bbs-create-page {
    background: #f4f7f9;
}
.bbs-create-editor {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8ecf1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    max-width: 960px;
    margin: 0 auto;
    overflow: visible;
}
.bbs-create-purchase-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 24px 16px;
    padding: 16px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
}
.bbs-create-purchase-notice[hidden] {
    display: none !important;
}
.bbs-create-purchase-notice__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(245, 158, 11, .15);
    color: #d97706;
}
.bbs-create-purchase-notice__title {
    display: block;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #92400e;
}
.bbs-create-purchase-notice__text {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #a16207;
}
.bbs-create-purchase-notice__link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
}
.bbs-create-purchase-notice__link:hover {
    text-decoration: underline;
}
.bbs-create-form.is-purchase-blocked .bbs-create-submit {
    opacity: .55;
    cursor: not-allowed;
}
.bbs-create-title-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px 16px;
}
.bbs-create-title-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 20px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    font-family: inherit;
}
.bbs-create-title-input::placeholder {
    color: #bbb;
    font-weight: 500;
}
.bbs-create-counter {
    flex-shrink: 0;
    font-size: 13px;
    color: #bbb;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.bbs-create-counter.is-limit {
    color: #ef4444;
}
.bbs-create-sep {
    height: 1px;
    background: #f0f0f0;
    margin: 0;
}
.bbs-create-compose ~ .bbs-create-sep {
    display: none;
}
.bbs-create-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
    padding: 10px 20px;
    border-bottom: 1px solid #f0f2f5;
    background: #fff;
    user-select: none;
    position: relative;
    overflow: visible;
}
.bbs-create-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.bbs-create-toolbar-divider {
    width: 1px;
    height: 20px;
    margin: 0 10px;
    background: #e5e7eb;
    flex-shrink: 0;
}
.bbs-create-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 20px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
label.bbs-create-tool-btn {
    margin: 0;
    box-sizing: border-box;
}
.bbs-create-tool-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}
.bbs-create-tool-btn strong,
.bbs-create-tool-btn em {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
}
.bbs-create-tool-btn em {
    font-style: italic;
    font-weight: 500;
}
.bbs-create-tool-u {
    font-size: 20px;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bbs-create-tool-btn:hover {
    background: #f1f5f9;
    color: #334155;
}
.bbs-create-tool-btn.is-active {
    background: rgba(56, 132, 244, .12);
    color: #3884f4;
}
.bbs-create-color-tools {
    gap: 2px;
}
.bbs-create-fontsize-tool {
    position: relative;
}
.bbs-create-fontsize-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    min-width: 88px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
    touch-action: manipulation;
    white-space: nowrap;
}
.bbs-create-fontsize-trigger:hover,
.bbs-create-fontsize-tool.is-open .bbs-create-fontsize-trigger {
    background: rgba(56, 132, 244, .12);
    color: #3884f4;
}
.bbs-create-fontsize-label {
    font-variant-numeric: tabular-nums;
}
.bbs-create-fontsize-chevron {
    flex-shrink: 0;
    opacity: .7;
    transition: transform .15s;
}
.bbs-create-fontsize-tool.is-open .bbs-create-fontsize-chevron {
    transform: rotate(180deg);
}
.bbs-create-fontsize-panel {
    position: fixed;
    z-index: 1300;
    width: 132px;
    max-height: 280px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    box-sizing: border-box;
    display: none;
    top: 0;
    left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.bbs-create-fontsize-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #334155;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
}
.bbs-create-fontsize-option:hover {
    background: #f8fafc;
}
.bbs-create-fontsize-option.is-active {
    background: rgba(56, 132, 244, .1);
    color: #3884f4;
}
.bbs-create-fontsize-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
    opacity: 0;
    color: #3884f4;
}
.bbs-create-fontsize-option.is-active .bbs-create-fontsize-option-check {
    opacity: 1;
}
.bbs-create-fontsize-option-text {
    flex: 1;
    min-width: 0;
}
.bbs-create-color-tool {
    position: relative;
}
.bbs-create-color-ico--fore {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20px;
    line-height: 1;
}
.bbs-create-color-ico-a {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: currentColor;
}
.bbs-create-color-ico-bar {
    display: block;
    width: 16px;
    height: 2px;
    margin-top: 1px;
    border-radius: 1px;
    background: currentColor;
}
.bbs-create-color-panel {
    position: fixed;
    z-index: 1300;
    width: 220px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    box-sizing: border-box;
    display: none;
    top: 0;
    left: 0;
}
.bbs-create-color-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1295;
    background: transparent;
    display: none;
}
.bbs-create-color-backdrop.is-visible {
    display: block;
}
.bbs-create-color-tool.is-open .bbs-create-color-panel {
    display: block;
}
.bbs-create-color-tool.is-open .bbs-create-color-trigger {
    background: rgba(56, 132, 244, .12);
    color: #3884f4;
}
.bbs-create-color-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.bbs-create-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 6px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.bbs-create-color-swatch:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.bbs-create-color-trigger {
    touch-action: manipulation;
}
.bbs-create-color-clear {
    display: block;
    width: 100%;
    padding: 8px 0 0;
    border: none;
    border-top: 1px solid #eef1f5;
    background: transparent;
    font-size: 13px;
    color: #64748b;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.bbs-create-color-clear:hover {
    color: #3884f4;
}
.bbs-create-editor-area span {
    line-height: inherit;
}
.bbs-detail-body span {
    line-height: inherit;
}
.bbs-create-image-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.bbs-create-upload-mask {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.bbs-create-upload-mask.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.bbs-create-upload-panel {
    width: 136px;
    min-height: 136px;
    padding: 18px 16px 14px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.bbs-create-upload-ring-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
}
.bbs-create-upload-ring {
    width: 76px;
    height: 76px;
    transform: rotate(-90deg);
    display: block;
}
.bbs-create-upload-ring-bg {
    fill: none;
    stroke: #e8ecf1;
    stroke-width: 6;
}
.bbs-create-upload-ring-bar {
    fill: none;
    stroke: #3884f4;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset .12s ease;
}
.bbs-create-upload-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.bbs-create-upload-tip {
    margin: 0;
    max-width: 120px;
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
    text-align: center;
    word-break: break-all;
}
.bbs-create-compose {
    position: relative;
    padding: 16px 24px 44px;
    min-height: 280px;
}
.bbs-create-editor-area {
    min-height: 220px;
    outline: none;
    font-size: 15px;
    color: #333;
    line-height: 1.75;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.bbs-create-editor-area.is-empty::before {
    content: attr(data-placeholder);
    color: #ccc;
    pointer-events: none;
}
.bbs-create-editor-area img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px 0;
    border-radius: 8px;
}
.bbs-create-editor-area p {
    margin: 0 0 0.75em;
}
.bbs-create-editor-area p:last-child {
    margin-bottom: 0;
}
.bbs-create-content {
    display: block;
    width: 100%;
    min-height: 220px;
    margin-top: 4px;
    border: none;
    outline: none;
    resize: vertical;
    background: transparent;
    font-size: 15px;
    color: #333;
    line-height: 1.75;
    font-family: inherit;
}
.bbs-create-content::placeholder {
    color: #ccc;
}
.bbs-create-counter--content {
    position: absolute;
    right: 24px;
    bottom: 16px;
}
.bbs-create-tag-fields {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.bbs-create-tag-panel {
    display: none;
}
.bbs-create-tag-trigger--mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.bbs-create-tag-trigger--desk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fafafa;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.bbs-create-tag-trigger--desk:hover {
    border-color: #ddd;
    background: #f5f5f5;
}
.bbs-create-tag-wrap {
    position: relative;
    display: inline-block;
}
.bbs-create-tag-wrap.is-open .bbs-create-tag-trigger--desk {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.bbs-create-tag-wrap.is-open .bbs-create-tag-trigger-chevron {
    transform: rotate(180deg);
}
.bbs-create-tag-trigger-chevron {
    transition: transform .2s;
}
.bbs-create-tag-dropdown {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 40;
    min-width: 340px;
    max-width: min(420px, 90vw);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    overflow: hidden;
}
.bbs-create-tag-wrap.is-open .bbs-create-tag-dropdown {
    display: flex;
    flex-direction: column;
}
.bbs-create-tag-search-wrap.bbs-create-tag-search-wrap--desk {
    padding: 14px 12px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.bbs-create-tag-search-wrap.bbs-create-tag-search-wrap--mobile {
    padding: 0 16px 12px;
}
.bbs-create-tag-search-wrap.bbs-create-tag-search-wrap--desk .bbs-create-tag-search {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
}
.bbs-create-tag-dropdown-body {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    padding: 10px 12px 12px;
    -webkit-overflow-scrolling: touch;
}
.bbs-create-cat-icon,
.bbs-create-tag-icon {
    display: inline-flex;
    align-items: center;
    color: #2563eb;
    flex-shrink: 0;
}
.bbs-create-tag-summary.is-placeholder {
    color: #999;
}
.bbs-create-tag-trigger-label {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 500;
    color: #333;
}
.bbs-create-tag-trigger-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    justify-content: flex-end;
    font-size: 14px;
    color: #333;
}
.bbs-create-tag-trigger-text.is-placeholder {
    color: #999;
}
.bbs-create-tag-trigger-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bbs-create-tag-trigger--mobile .bbs-create-tag-trigger-chevron {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.bbs-create-tag-sheet {
    display: none;
}
.bbs-create-tag-sheet .bbs-create-sheet-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .28s ease;
}
.bbs-create-tag-sheet.is-open .bbs-create-sheet-mask {
    opacity: 1;
}
.bbs-create-tag-sheet .bbs-create-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.32, .72, 0, 1);
    max-height: min(80vh, 560px);
    display: flex;
    flex-direction: column;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .12);
}
.bbs-create-tag-sheet.is-open .bbs-create-sheet-panel {
    transform: translateY(0);
}
.bbs-create-tag-sheet .bbs-create-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.bbs-create-tag-sheet .bbs-create-sheet-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #222;
}
.bbs-create-tag-sheet .bbs-create-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f5f5f5;
    color: #666;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.bbs-create-tag-search-wrap {
    flex-shrink: 0;
    padding: 0 16px 12px;
}
.bbs-create-tag-search-wrap.bbs-create-tag-search-wrap--desk {
    padding: 14px 12px 10px;
}
.bbs-create-tag-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    background: #f8f9fa;
    color: #333;
    outline: none;
    box-sizing: border-box;
}
.bbs-create-tag-search:focus {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.bbs-create-tag-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    padding: 4px 16px 12px;
}
.bbs-create-tag-pick {
    cursor: pointer;
    user-select: none;
    border: none;
    padding: 0;
    background: transparent;
    font-family: inherit;
    line-height: inherit;
}
.bbs-create-tag-pick.is-hidden {
    display: none;
}
.bbs-create-tag-pick span {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--tag-color, #3b82f6) 28%, transparent);
    color: var(--tag-color, #3b82f6);
    background: color-mix(in srgb, var(--tag-color, #3b82f6) 10%, transparent);
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.bbs-create-tag-pick:hover span {
    background: color-mix(in srgb, var(--tag-color, #3b82f6) 16%, transparent);
}
.bbs-create-tag-pick.is-selected span {
    background: var(--tag-color, #3b82f6);
    color: #fff;
    border-color: var(--tag-color, #3b82f6);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--tag-color, #3b82f6) 35%, transparent);
}
.bbs-create-tag-sheet-foot {
    flex-shrink: 0;
    padding: 8px 16px 4px;
    border-top: 1px solid #f0f0f0;
}
.bbs-create-tag-done {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}
.bbs-create-tag-done:active {
    background: #1d4ed8;
}
.bbs-create-tags {
    display: none;
}
.bbs-create-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.bbs-create-foot-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bbs-create-cat {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.bbs-create-cat .bbs-form-select-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 7px 12px;
    min-height: 0;
    border-radius: 8px;
    border-color: #e8e8e8;
    font-size: 14px;
    background: #fafafa;
}
.bbs-create-cat .bbs-form-select-display:hover {
    border-color: #ddd;
    background: #f5f5f5;
}
.bbs-create-cat.is-open .bbs-form-select-display,
.bbs-create-cat .bbs-form-select-display:focus-visible {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.bbs-create-cat .bbs-form-select-dropdown {
    top: auto;
    bottom: calc(100% + 6px);
    left: 0;
    right: auto;
    min-width: 180px;
    z-index: 30;
}
.bbs-create-foot-actions {
    flex-shrink: 0;
}
.bbs-create-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 9px 28px;
    border: none;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, transform .15s;
    box-shadow: none;
}
.bbs-create-submit:hover {
    background: #1d4ed8;
    box-shadow: none;
}
.bbs-create-submit:active {
    transform: scale(.98);
}

/* 手机端独立分类板块 + 底部滑出选择 */
.bbs-create-cat-panel {
    display: none;
}
#bbsCreateCatSheet {
    display: none;
}
body.bbs-create-sheet-open {
    overflow: hidden;
}
.bbs-form-group {
    margin-bottom: 20px;
}
.bbs-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}
.bbs-form-group input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color .2s;
    box-sizing: border-box;
    background: #fff;
    color: #333;
    line-height: 1.5;
    min-height: 48px;
}
.bbs-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color .2s;
    box-sizing: border-box;
    background: #fff;
    color: #333;
    line-height: 1.5;
    resize: vertical;
}
.bbs-form-group input[type="text"]::placeholder,
.bbs-form-group textarea::placeholder {
    color: #9ca3af;
}
.bbs-form-select {
    position: relative;
}
.bbs-form-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.bbs-form-select-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #333;
    cursor: pointer;
    text-align: left;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    min-height: 48px;
    line-height: 1.5;
}
.bbs-form-select-display:hover {
    border-color: #d1d5db;
}
.bbs-form-select.is-open .bbs-form-select-display,
.bbs-form-select-display:focus-visible {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.bbs-form-select-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bbs-form-select-text.is-placeholder {
    color: #9ca3af;
}
.bbs-form-select-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .2s;
}
.bbs-form-select.is-open .bbs-form-select-chevron {
    transform: rotate(180deg);
}
.bbs-form-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    max-height: 240px;
    overflow-y: auto;
}
.bbs-form-select.is-open .bbs-form-select-dropdown {
    display: block;
}
.bbs-form-select-option {
    padding: 10px 14px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.bbs-form-select-option:hover,
.bbs-form-select-option.is-selected {
    background: rgba(37, 99, 235, .06);
    color: #2563eb;
}
.bbs-form-group input:focus,
.bbs-form-group textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.bbs-form-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.bbs-form-tag-check {
    cursor: pointer;
    user-select: none;
}
.bbs-form-tag-check input {
    display: none;
}
.bbs-form-tag-check span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--tag-color, #3b82f6) 28%, transparent);
    color: var(--tag-color, #3b82f6);
    background: color-mix(in srgb, var(--tag-color, #3b82f6) 10%, transparent);
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .12s;
}
.bbs-form-tag-check:hover span {
    background: color-mix(in srgb, var(--tag-color, #3b82f6) 16%, transparent);
    border-color: color-mix(in srgb, var(--tag-color, #3b82f6) 42%, transparent);
}
.bbs-form-tag-check input:checked + span {
    background: var(--tag-color, #3b82f6);
    color: #fff;
    border-color: var(--tag-color, #3b82f6);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--tag-color, #3b82f6) 35%, transparent);
}
.bbs-form-tag-check input:checked:hover + span {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

@media (max-width: 992px) {
    .bbs-page.bbs-detail-read main.container.bbs-detail-layout {
        flex-direction: column;
        align-items: stretch;
    }
    .bbs-detail-sidebar {
        width: 100%;
        position: static;
    }
}

@media (max-width: 768px) {
    .bbs-hero {
        padding: 88px 0 0;
    }
    .bbs-hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 0;
        padding-bottom: 20px;
    }
    .bbs-hero-text {
        max-width: 100%;
    }
    .bbs-hero-text h1 {
        font-size: 30px;
    }
    .bbs-hero-text p {
        font-size: 15px;
        margin-bottom: 24px;
    }
    .bbs-hero-btns {
        justify-content: center;
    }
    .bbs-hero-img {
        display: none;
    }
    .bbs-page main.container.bbs-layout {
        padding-top: 0;
        padding-bottom: 60px;
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
    }
    .bbs-layout {
        grid-template-columns: 1fr;
        gap: 0;
        min-width: 0;
    }
    .bbs-layout > * {
        min-width: 0;
        max-width: 100%;
    }
    .bbs-page .bbs-sidebar-left {
        display: none;
    }
    .bbs-content {
        order: 1;
    }
    .bbs-page .bbs-feed-card,
    .bbs-page .kehua-widget--bbs-feed {
        border-radius: 0;
    }
    .bbs-sidebar-right {
        order: 3;
    }
    .bbs-page .bbs-sidebar-right {
        display: none;
    }
    .bbs-stream-card {
        --bbs-stream-inset: 0;
        padding: 14px 16px 16px;
    }
    .bbs-page .bbs-tabs {
        padding: 0 16px;
        gap: 0;
    }
    .bbs-page .bbs-tab {
        flex: 1 1 0;
        text-align: center;
        padding: 14px 8px;
        font-size: 14px;
    }
    .bbs-page .kehua-widget-title {
        padding: 15px 16px;
    }
    .bbs-stream-body,
    .bbs-stream-footer {
        margin-left: 0;
    }
    .bbs-stream-header__actions {
        gap: 4px;
    }
    .bbs-stream-badge {
        padding: 2px 8px;
        font-size: 11px;
    }
    .bbs-detail-card {
        padding: 20px;
    }
    .bbs-detail-comment-block__title {
        padding: 16px;
    }
    .bbs-detail-reply-gate-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .bbs-detail-reply-gate-icon {
        margin: 0 auto;
    }
    .bbs-detail-reply-gate-btn {
        width: 100%;
        box-sizing: border-box;
    }
    body.bbs-detail-read {
        background: linear-gradient(180deg, #e7ebf7 0%, #ffffff 100%);
        background-attachment: fixed;
    }
    .bbs-page.bbs-detail-read main.container.bbs-detail-layout {
        flex-direction: column;
        padding-top: 0;
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }
    body.has-mobile-tabbar .bbs-page.bbs-detail-read main.container.bbs-detail-layout {
        padding-bottom: calc(60px + 80px + env(safe-area-inset-bottom, 0px));
    }
    .bbs-page.bbs-detail-read .bbs-detail-main {
        gap: 16px;
    }
    .bbs-page.bbs-detail-read .bbs-detail-card {
        border-radius: 0;
    }
    .bbs-page.bbs-detail-read .bbs-detail-nav {
        display: none;
    }
    body.bbs-detail-read .kehua-comment-block .kehua-comment-block__replies-title {
        padding: 16px;
    }
    body.bbs-detail-read .kehua-post-item {
        padding: 16px;
    }
    body.bbs-detail-read .kehua-reply-box {
        padding: 16px;
    }
    .bbs-detail-sidebar {
        width: 100%;
        position: static;
    }
    .bbs-page.bbs-detail-read .bbs-detail-sidebar {
        display: none;
    }
    .bbs-detail-title {
        font-size: 18px;
        margin-bottom: 14px;
    }
    .bbs-detail-head {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .bbs-detail-head-avatar {
        display: block;
    }
    .bbs-detail-head-main {
        flex: 1 1 0;
        min-width: 0;
    }
    .bbs-detail-author-name {
        display: block;
        margin-bottom: 4px;
    }
    .bbs-detail-meta {
        font-size: 12px;
        line-height: 1.4;
    }
    .bbs-detail-meta-sep {
        margin: 0 6px;
    }
    .bbs-detail-nav-title {
        display: none;
    }
    .bbs-detail-nav-btn {
        padding: 15px 20px;
    }
    .bbs-page.bbs-create-page main.container.bbs-create-wrap {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 60px;
    }
    .bbs-create-editor {
        border-radius: 10px;
    }
    .bbs-create-title-bar {
        padding: 16px 16px 12px;
        gap: 10px;
    }
    .bbs-create-title-input {
        font-size: 18px;
    }
    .bbs-create-compose {
        padding: 14px 16px 36px;
        min-height: 220px;
    }
    .bbs-create-toolbar {
        flex-wrap: nowrap;
        align-items: center;
        padding: 8px 4px 8px 12px;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .bbs-create-toolbar::-webkit-scrollbar {
        display: none;
    }
    .bbs-create-toolbar-divider {
        margin: 0 6px;
        flex-shrink: 0;
    }
    .bbs-create-tool-btn {
        min-width: 36px;
        height: 36px;
        font-size: 20px;
        flex-shrink: 0;
    }
    .bbs-create-tool-btn svg {
        width: 20px;
        height: 20px;
    }
    .bbs-create-fontsize-trigger {
        min-width: 76px;
        padding: 0 8px;
        font-size: 12px;
        flex-shrink: 0;
    }
    .bbs-create-color-tool {
        flex-shrink: 0;
    }
    .bbs-create-editor-area {
        min-height: 180px;
        font-size: 15px;
    }
    .bbs-create-content {
        min-height: 180px;
        font-size: 15px;
        margin-top: 4px;
    }
    .bbs-create-counter--content {
        right: 16px;
        bottom: 12px;
    }
    .bbs-create-tag-panel {
        display: block;
        margin-top: 12px;
        background: #fff;
        border-radius: 10px;
        border: none;
        box-shadow: none;
        overflow: hidden;
    }
    .bbs-create-tag-trigger--desk,
    .bbs-create-tag-wrap {
        display: none !important;
    }
    .bbs-create-tag-sheet {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        pointer-events: none;
        visibility: hidden;
    }
    .bbs-create-tag-sheet.is-open {
        pointer-events: auto;
        visibility: visible;
    }
    .bbs-create-tag-trigger--mobile {
        padding: 14px 16px;
    }
    .bbs-create-foot {
        padding: 12px 16px;
        gap: 12px;
    }
    .bbs-create-foot-meta {
        display: none;
    }
    .bbs-create-foot-actions {
        width: 100%;
    }
    .bbs-create-submit {
        width: 100%;
        padding: 12px 28px;
    }
    .bbs-create-cat-panel {
        display: block;
        margin-top: 12px;
        background: #fff;
        border-radius: 10px;
        border: none;
        box-shadow: none;
    }
    .bbs-create-cat-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        border: none;
        background: transparent;
        font-family: inherit;
        cursor: pointer;
        text-align: left;
    }
    .bbs-create-cat-trigger-label {
        flex-shrink: 0;
        font-size: 15px;
        font-weight: 500;
        color: #333;
    }
    .bbs-create-cat-trigger-value {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex: 1;
        justify-content: flex-end;
        font-size: 14px;
        color: #333;
    }
    .bbs-create-cat-trigger-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 180px;
    }
    .bbs-create-cat-trigger-text.is-placeholder {
        color: #999;
    }
    .bbs-create-cat-trigger-chevron {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain;
    }
    #bbsCreateCatSheet {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        pointer-events: none;
        visibility: hidden;
    }
    #bbsCreateCatSheet.is-open {
        pointer-events: auto;
        visibility: visible;
    }
    #bbsCreateCatSheet .bbs-create-sheet-mask {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        transition: opacity .28s ease;
    }
    #bbsCreateCatSheet.is-open .bbs-create-sheet-mask {
        opacity: 1;
    }
    #bbsCreateCatSheet .bbs-create-sheet-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.32, .72, 0, 1);
        max-height: min(72vh, 520px);
        display: flex;
        flex-direction: column;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 32px rgba(0, 0, 0, .12);
    }
    #bbsCreateCatSheet.is-open .bbs-create-sheet-panel {
        transform: translateY(0);
    }
    #bbsCreateCatSheet .bbs-create-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 12px;
        border-bottom: 1px solid #f0f0f0;
        flex-shrink: 0;
    }
    #bbsCreateCatSheet .bbs-create-sheet-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #222;
    }
    #bbsCreateCatSheet .bbs-create-sheet-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: #f5f5f5;
        color: #666;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        font-family: inherit;
    }
    #bbsCreateCatSheet .bbs-create-sheet-list {
        margin: 0;
        padding: 8px 0;
        list-style: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #bbsCreateCatSheet .bbs-create-sheet-option {
        padding: 14px 20px;
        font-size: 16px;
        color: #333;
        cursor: pointer;
        transition: background .15s;
    }
    #bbsCreateCatSheet .bbs-create-sheet-option:active,
    #bbsCreateCatSheet .bbs-create-sheet-option.is-selected {
        background: rgba(37, 99, 235, .08);
        color: #2563eb;
    }
}

@media (max-width: 1279px) and (min-width: 769px) {
    .bbs-layout {
        grid-template-columns: minmax(180px, 1fr) minmax(0, 1fr);
        gap: 12px;
    }
    .bbs-sidebar-right {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .bbs-page .bbs-sidebar-right {
        position: static;
    }
}

/* BBS 详情评论区（对齐 kehua_theme kehua-comment-block） */
body.bbs-detail-read .kehua-comment-block {
    background: #fff;
    border-radius: 12px;
    min-width: 0;
    border: none;
    box-shadow: none;
    overflow: hidden;
}
@media (max-width: 768px) {
    body.bbs-detail-read .kehua-comment-block {
        border-radius: 0;
    }
}
body.bbs-detail-read .kehua-comment-block .kehua-comment-block__replies-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    box-sizing: border-box;
    margin: 0;
    padding: 20px;
    line-height: 1;
    color: #111827;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    font-size: 15px;
    font-weight: 600;
}
body.bbs-detail-read .kehua-comment-block .kehua-comment-block__replies-heading-main {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
body.bbs-detail-read .kehua-discovery-forums__rec-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    height: 18px;
    align-self: center;
}
body.bbs-detail-read .kehua-discovery-forums__rec-mark::before,
body.bbs-detail-read .kehua-discovery-forums__rec-mark::after {
    content: "";
    width: 4px;
    border-radius: 999px;
    transform: skewX(-14deg);
    transform-origin: center center;
}
body.bbs-detail-read .kehua-discovery-forums__rec-mark::before {
    height: 18px;
    background: linear-gradient(#1d4ed8 0%, #2563eb 100%);
}
body.bbs-detail-read .kehua-discovery-forums__rec-mark::after {
    height: 16px;
    background: linear-gradient(rgba(59, 130, 246, .45) 0%, rgba(96, 165, 250, .38) 100%);
}
body.bbs-detail-read .kehua-empty-tip {
    text-align: center;
    padding: 40px 16px;
    color: #9ca3af;
    font-size: 14px;
}
body.bbs-detail-read .kehua-post-item {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    min-height: 100px;
    box-sizing: border-box;
}
body.bbs-detail-read .kehua-post-item:last-child {
    border-bottom: none;
}
body.bbs-detail-read .kehua-read-reply-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
body.bbs-detail-read .kehua-read-reply-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
body.bbs-detail-read .kehua-read-reply-avatar.kehua-read-reply-avatar--img {
    padding: 0;
    overflow: hidden;
    line-height: 0;
    display: block;
}
body.bbs-detail-read .kehua-read-reply-avatar-photo {
    width: 36px;
    height: 36px;
    object-fit: cover;
    vertical-align: middle;
    border-radius: 50%;
    display: block;
}
body.bbs-detail-read .kehua-read-reply-floor-meta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
body.bbs-detail-read .kehua-read-reply-floor {
    color: #b0b5bf;
    font-variant-numeric: tabular-nums;
}
body.bbs-detail-read .kehua-post-reply {
    color: #999;
    font-size: 12px;
    text-decoration: none;
}
body.bbs-detail-read .kehua-post-reply:hover {
    color: #0066ff;
}
body.bbs-detail-read .bbs-detail-edit-link {
    color: #999;
    font-size: 12px;
    text-decoration: none;
}
body.bbs-detail-read .bbs-detail-edit-link:hover {
    color: #0066ff;
}
body.bbs-detail-read .kehua-reply-edit-panel {
    margin-top: 4px;
}
body.bbs-detail-read .kehua-reply-edit-textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}
body.bbs-detail-read .kehua-reply-edit-textarea:focus {
    outline: none;
    border-color: #0066ff;
}
body.bbs-detail-read .kehua-reply-edit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
body.bbs-detail-read .kehua-post-message {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}
body.bbs-detail-read .kehua-post-message blockquote.blockquote {
    position: relative;
    margin: 10px 0 12px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: #999;
    line-height: 1.5;
    background: #f2f2f2 !important;
    border: 1px dashed #ccc !important;
}
body.bbs-detail-read .kehua-post-message blockquote.blockquote p {
    margin: 0;
}
body.bbs-detail-read .kehua-reply-box {
    padding: 20px;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, .05);
}
body.bbs-detail-read .kehua-reply-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
body.bbs-detail-read .kehua-reply-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
body.bbs-detail-read .kehua-reply-avatar.kehua-reply-avatar--img {
    padding: 0;
    overflow: hidden;
    line-height: 0;
    display: block;
}
body.bbs-detail-read .kehua-reply-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
body.bbs-detail-read .kehua-reply-username {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}
body.bbs-detail-read .kehua-reply-floor {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    border-radius: 999px;
}
body.bbs-detail-read .kehua-reply-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .2s;
    font-family: inherit;
}
body.bbs-detail-read .kehua-reply-textarea:focus {
    outline: none;
    border-color: #0066ff;
}
body.bbs-detail-read .kehua-reply-textarea::placeholder {
    color: #aaa;
}
body.bbs-detail-read .kehua-reply-actions {
    display: block;
    margin-top: 12px;
    min-width: 0;
    width: 100%;
}
body.bbs-detail-read .kehua-reply-row-primary {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 8px;
}
body.bbs-detail-read .kehua-reply-submit-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.bbs-detail-read .kehua-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    transition: background .2s, color .2s;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
body.bbs-detail-read .kehua-btn-primary {
    background: #0066ff;
    color: #fff;
}
body.bbs-detail-read .kehua-btn-primary:hover {
    background: #0052cc;
    color: #fff;
}
body.bbs-detail-read .kehua-btn-primary:disabled {
    background: #d9d9d9;
    color: #888;
    cursor: not-allowed;
}
body.bbs-detail-read .kehua-reply-submit {
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 8px;
}
body.bbs-detail-read .kehua-btn-cancel-reply {
    padding: 8px 14px;
    font-size: 13px;
    color: #999;
    background: #f5f5f5;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
body.bbs-detail-read .kehua-btn-cancel-reply:hover {
    color: #333;
    background: #e8eaef;
}
body.bbs-detail-read .kehua-reply-login-gate-outer {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    margin-top: 0;
}
body.bbs-detail-read .kehua-reply-login-gate {
    margin-top: 0;
}
body.bbs-detail-read .kehua-reply-login-gate-card {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 1.25rem 1.35rem;
    border-radius: 12px;
    background: linear-gradient(145deg, #fafcfb 0%, #f0f4f2 100%);
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: rgba(0, 0, 0, .05) 0 2px 14px;
}
body.bbs-detail-read .kehua-reply-login-gate-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(61, 155, 92, .12);
    color: #0066ff;
}
body.bbs-detail-read .kehua-reply-login-gate-text {
    flex: 1 1 0;
    min-width: 160px;
}
body.bbs-detail-read .kehua-reply-login-gate-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    letter-spacing: .02em;
}
body.bbs-detail-read .kehua-reply-login-gate-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #999;
}
body.bbs-detail-read .kehua-reply-login-gate-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: transform .15s, box-shadow .2s;
    box-shadow: rgba(61, 155, 92, .28) 0 2px 10px;
}
body.bbs-detail-read .kehua-reply-login-gate-btn:hover {
    transform: translateY(-1px);
    box-shadow: rgba(61, 155, 92, .35) 0 4px 14px;
    color: #fff;
}
@media (max-width: 640px) {
    body.bbs-detail-read .kehua-reply-login-gate-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    body.bbs-detail-read .kehua-reply-login-gate-icon {
        margin: 0 auto;
    }
    body.bbs-detail-read .kehua-reply-login-gate-btn {
        width: 100%;
        box-sizing: border-box;
    }
}
@media (max-width: 768px) {
    body.bbs-detail-read .kehua-reply-login-gate-outer {
        border-radius: 0;
        background: #fff;
    }
    body.bbs-detail-read .kehua-reply-login-gate-card {
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-top: 1px solid rgba(0, 0, 0, .05);
    }
}

/* 会员中心 · 我的帖子/点赞/收藏（对齐 kehua_theme my_thread） */
.member-content-bbs {
    background: transparent;
    box-shadow: none;
    padding: 0;
    flex: 1;
    min-width: 0;
}
.member-content-bbs > .kehua-my-panel {
    width: 100%;
}
.member-content-bbs > .kehua-my-panel > .kehua-my-body {
    padding: 0;
}
.member-content-bbs .kehua-my-body .bbs-feed--stream {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
}
.member-content-bbs .kehua-my-body .bbs-feed--stream .bbs-stream-card:last-child {
    border-bottom: none;
}
.member-content-bbs .kehua-my-body .bbs-empty {
    padding: 48px 24px;
    text-align: center;
    color: #94a3b8;
}
.member-content-bbs .kehua-fav-infinite-footer {
    padding: 0 16px 16px;
    background: transparent;
}
.member-content-bbs .kehua-fav-loadbar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 13px;
    color: #94a3b8;
    background: transparent;
    border: none;
}
.member-content-bbs .kehua-fav-loadbar .loader-spinner,
.member-content-bbs .kehua-fav-loadbar .kehua-msg-notice-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #3884f4;
    border-radius: 50%;
    animation: bbs-spin .8s linear infinite;
}
@keyframes bbs-spin {
    to { transform: rotate(360deg); }
}
.member-content-bbs .kehua-fav-nomore {
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    padding: 8px 0 4px;
}
.member-content-bbs .kehua-fav-nomore p {
    margin: 0;
}
.member-content-bbs .kehua-fav-sentinel {
    height: 1px;
}
@media (max-width: 768px) {
    .member-content-bbs > .kehua-my-panel > .kehua-my-body {
        padding: 0;
    }
    .member-content-bbs .kehua-paylog-tab {
        flex: 1 1 0;
        text-align: center;
        padding: 14px 8px;
        font-size: 14px;
    }
}
body.bbs-detail-read .bbs-detail-mobile-act--like.is-liked,
body.bbs-detail-read .bbs-detail-mobile-act--like.is-liked .bbs-detail-mobile-act__svg {
    color: #e74c3c;
}
body.bbs-detail-read .bbs-detail-mobile-act--fav.is-favorited,
body.bbs-detail-read .bbs-detail-mobile-act--fav.is-favorited .bbs-detail-mobile-act__svg {
    color: #f59e0b;
}

/* ===== VIP会员中心 ===== */
.vip-now.kehua-vip-block {
    background: transparent;
    border: none;
    overflow: visible;
}
.vip-now {
    padding: 0;
}
.vip-now__strip {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(90deg, #fff9ed 0%, #fffdf8 55%, #fff 100%);
    border: 1px solid #f3e4c4;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.06);
}
.vip-now__strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--vip-accent, #fbbf24) 35%, #fde68a 65%, transparent 100%);
    opacity: 0.55;
}
.vip-now__glow {
    position: absolute;
    top: -50px;
    right: -20px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0) 70%);
    pointer-events: none;
}
.vip-now__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 24px;
    padding: 18px 22px;
}
.vip-now__profile {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.vip-now__icon {
    --vip-accent: #d97706;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vip-accent);
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.22);
}
.vip-now__eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    color: #9a7b4f;
    line-height: 1.4;
}
.vip-now__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}
.vip-now__chip {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #b45309;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(251, 191, 36, 0.28);
    line-height: 1.4;
}
.vip-now__metrics {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    padding: 4px 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #f0e2c8;
}
.vip-now__metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 96px;
    padding: 10px 18px;
    text-align: center;
}
.vip-now__metric + .vip-now__metric {
    border-left: 1px solid #f0e2c8;
}
.vip-now__metric-k {
    font-size: 11px;
    color: #9a7b4f;
    line-height: 1.4;
    white-space: nowrap;
}
.vip-now__metric-k .is-short {
    display: none;
}
.vip-now__metric-v {
    font-size: 16px;
    font-weight: 700;
    color: #d97706;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vip-board__lead {
    margin: 0 0 24px;
    text-align: center;
    font-size: 14px;
    color: #888;
    line-height: 1.6;
}
.vip-board__plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
.vip-plan {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 18px 20px;
    border-radius: 14px;
    border: 1px solid #e8eaef;
    background: #fafbfc;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.vip-plan:hover {
    background: #fff;
    border-color: #f5d78e;
    box-shadow: 0 6px 24px rgba(245, 158, 11, .08);
}
.vip-plan.is-popular {
    background: #fff;
    border: 2px solid #f59e0b;
    box-shadow: 0 10px 32px rgba(245, 158, 11, .12);
    padding-top: 32px;
}
.vip-plan.is-active {
    border-color: #86efac;
    background: #f6fef9;
}
.vip-plan__label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #f59e0b;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.4;
}
.vip-plan__label--active {
    background: #22c55e;
}
.vip-plan__label--free {
    background: #94a3b8;
}
.vip-plan.is-free {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-color: #e5e7eb;
}
.vip-plan.is-free .vip-plan__badge {
    color: #94a3b8 !important;
}
.vip-plan__free-price {
    margin-top: 6px;
    font-size: 20px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 1px;
}
.vip-plan__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}
.vip-plan__badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vip-plan__name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #333;
    text-align: center;
}
.vip-plan__benefits {
    flex: 1;
    margin: 0 0 16px;
    padding: 0 4px;
    background: transparent;
    border: none;
}
.vip-plan__features {
    margin: 0;
    padding: 0;
    list-style: none;
}
.vip-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
}
.vip-plan__features li:first-child {
    padding-top: 0;
}
.vip-plan__features li:last-child {
    padding-bottom: 0;
}
.vip-plan__features li + li {
    border-top: none;
}
.vip-feature-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34d399, #22c55e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(34, 197, 94, .28);
}
.vip-feature-text {
    flex: 1;
    min-width: 0;
}
.vip-feature-em {
    font-style: normal;
    font-weight: 700;
    color: #ef4444;
}

.vip-plan__action {
    margin-top: auto;
    padding-top: 4px;
}
.vip-plan__btn.member-btn-pay {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    background: linear-gradient(135deg, #3884f4, #60a5fa);
    color: #fff;
    cursor: pointer;
    transition: box-shadow .2s, transform .2s, opacity .2s;
}
.vip-plan__btn.member-btn-pay:hover:not(.vip-plan__btn--disabled) {
    box-shadow: 0 4px 12px rgba(56, 132, 244, .3);
    transform: translateY(-1px);
}
.vip-plan__btn--disabled {
    background: linear-gradient(135deg, #3884f4, #60a5fa) !important;
    color: #fff !important;
    opacity: .55;
    cursor: pointer;
    box-shadow: none !important;
    transform: none !important;
}
.vip-plan__btn--disabled:hover {
    opacity: .65;
}
.vip-pay__notice {
    margin: -4px 0 12px;
    padding: 8px 12px;
    background: #fff7ed;
    color: #b45309;
    border: 1px solid #fde3b3;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vip-pay__notice::before {
    content: "\26A0";
    font-size: 14px;
    color: #f59e0b;
}

/* VIP 开通支付弹窗 */
.vip-pay-mask {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vip-pay-mask.is-open {
    display: flex;
}
.vip-pay-box {
    width: 420px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .14);
    border: 1px solid #e8ecf1;
}
.vip-pay {
    padding: 22px 22px 20px;
}
.vip-pay__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}
.vip-pay__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}
.vip-pay__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.vip-pay__close:hover {
    background: #f1f5f9;
    color: #334155;
}
.vip-pay__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.vip-pay-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 6px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    font: inherit;
    color: inherit;
}
.vip-pay-tab:hover {
    border-color: #cbd5e1;
    background: #fafbfc;
}
.vip-pay-tab.is-active {
    border-color: #3884f4;
    background: #f0f7ff;
    box-shadow: inset 0 0 0 1px #3884f4;
}
.vip-pay-tab__name {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.vip-pay-tab.is-active .vip-pay-tab__name {
    color: #3884f4;
}
.vip-pay-tab__price {
    font-size: 15px;
    font-weight: 800;
    color: #334155;
}
.vip-pay-tab.is-active .vip-pay-tab__price {
    color: #1e293b;
}
.vip-pay-tab__save {
    font-size: 10px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: 1px 6px;
    border-radius: 4px;
}
.vip-pay__summary {
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.vip-pay__summary-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.vip-pay__summary-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.vip-pay__summary-info strong {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.vip-pay__summary-info span {
    font-size: 12px;
    color: #64748b;
}
.vip-pay__summary-price {
    flex-shrink: 0;
    font-size: 28px;
    font-weight: 800;
    color: #3884f4;
    line-height: 1;
}
.vip-pay__summary-price small {
    font-size: 15px;
    font-weight: 600;
    margin-right: 1px;
}
.vip-pay__section-label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vip-pay__methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.vip-pay-method {
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}
.vip-pay-method:hover {
    border-color: #cbd5e1;
    background: #fafbfc;
}
.vip-pay-method.is-active {
    border-color: #3884f4;
    background: #f0f7ff;
    color: #3884f4;
}
.vip-pay__balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e8ecf1;
    font-size: 13px;
    color: #64748b;
}
.vip-pay__balance em {
    font-style: normal;
    font-weight: 700;
    color: #334155;
}
.vip-pay__balance a {
    color: #3884f4;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.vip-pay__balance a:hover {
    text-decoration: underline;
}
.vip-pay__agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.vip-pay__agree input {
    margin-top: 2px;
    accent-color: #3884f4;
    cursor: pointer;
}
.vip-pay__agree a {
    color: #3884f4;
    text-decoration: none;
}
.vip-pay__agree a:hover {
    text-decoration: underline;
}
.vip-pay__confirm {
    width: 100%;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #3884f4, #5b9cf5);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, opacity .2s;
    box-shadow: 0 4px 14px rgba(56, 132, 244, .28);
}
.vip-pay__confirm:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(56, 132, 244, .32);
}
.vip-pay__confirm:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 1100px) {
    .vip-board__plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .vip-board__plans {
        grid-template-columns: 1fr;
    }
    .vip-plan.is-popular {
        order: -1;
    }
}
@media (max-width: 900px) {
    .vip-now__content {
        flex-direction: column;
        align-items: stretch;
    }
    .vip-now__metrics {
        width: 100%;
        flex-shrink: 1;
        min-width: 0;
    }
    .vip-now__metric {
        flex: 1;
        min-width: 0;
        padding: 8px 6px;
    }
    .vip-now__metric-k .is-full {
        display: none;
    }
    .vip-now__metric-k .is-short {
        display: inline;
    }
    .vip-now__metric-k {
        font-size: 10px;
    }
    .vip-now__metric-v {
        font-size: 12px;
        white-space: nowrap;
    }
}
@media (max-width: 768px) {
    .vip-now__content {
        padding: 16px;
    }
    .vip-plan {
        padding: 24px 20px 20px;
    }
    .vip-plan__benefits {
        padding: 0 2px;
    }
    .vip-pay {
        padding: 18px 16px 16px;
    }
    .vip-pay__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .vip-pay__summary-price {
        font-size: 26px;
    }
}

/* --- 主题商城 /store --- */
.store-header {
    padding-bottom: 40px;
}
.store-category-wrap {
    margin-top: -20px;
    margin-bottom: 8px;
}
.store-category-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 24px;
}
.store-cat-item {
    flex-shrink: 0;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    color: #555;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    white-space: nowrap;
}
.store-cat-item:hover,
.store-cat-item.active {
    background: #1a1a1a;
    color: #fff;
}
.store-list-section {
    padding-top: 40px;
}
.store-empty {
    text-align: center;
    padding: 80px 0;
    margin-bottom: 0 !important;
}
.store-empty p {
    color: #999;
    font-size: 16px;
}
@media (max-width: 768px) {
    .store-header {
        padding: 100px 0 24px;
        margin-top: 60px;
    }
    .store-header h1 {
        font-size: 28px;
    }
    .store-category-wrap {
        margin-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .store-category-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding: 0 16px 16px;
    }
    .store-category-bar::-webkit-scrollbar {
        display: none;
    }
    .store-cat-item {
        padding: 7px 16px;
        font-size: 13px;
    }
    .store-list-section {
        padding-top: 20px;
    }
    .store-list-section .list-item {
        margin-bottom: 60px;
    }
}