/**
 * 小兽模版样式表
 * 手机版风格二
 * 完全独立于默认模版 assets/style.css
 */

/* ====== 全局重置 ====== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(180deg, #f5f5f7 0%, #ebebef 100%);
    min-height: 100vh;
    color: #1d1d1f;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* 页面容器（替代设计稿中的 .phone，去掉手机外框） */
.xs-page {
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
    padding: 14px;
    position: relative;
}

/* ====== 头部 ====== */
.xs-app-bar { padding: 4px 0 16px; }

/* 第一行：Logo + 搜索 + 头像 */
.xs-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 12px;
}
.xs-logo {
    font-size: 24px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.8px;
    flex-shrink: 0;
}
.xs-logo .dot { color: #2563a6; }
.xs-logo-img img {
    max-height: 36px;
    max-width: 140px;
    width: auto;
    height: auto;
    display: block;
}

.xs-search {
    flex: 1;
    height: 36px;
    background: #f5f5f7;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 6px;
    font-size: 12px;
    color: #86868b;
    text-decoration: none;
    margin: 0;
}
.xs-search svg { width: 14px; height: 14px; opacity: 0.5; flex-shrink: 0; }
.xs-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    width: 100%;
    color: #1d1d1f;
    -webkit-appearance: none;
    appearance: none;
}
.xs-search input::-webkit-search-cancel-button { display: none; }

.xs-signin-btn {
    flex-shrink: 0;
    margin: 0 2px;
}
.xs-signin-btn button {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9500 0%, #ff7a00 100%);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.xs-signin-btn button:active { opacity: 0.85; }

.xs-avatar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border-radius: 20px;
    background: #f5f5f7;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.xs-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563a6 0%, #3a7bd5 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
}
.xs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xs-avatar-name {
    font-size: 12px;
    font-weight: 500;
    color: #1d1d1f;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xs-avatar-arrow {
    font-size: 10px;
    color: #86868b;
    transition: transform 0.2s;
}
.xs-avatar-btn.open .xs-avatar-arrow { transform: rotate(180deg); }

/* 第二行导航已移至底部悬浮 */
.xs-app-bar { padding: 4px 0 0; }

/* ====== 底部悬浮导航栏 ====== */
.xs-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #f0f0f0;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
}
.xs-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    font-size: 11px;
    color: #86868b;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.xs-bottom-nav-item svg {
    width: 22px;
    height: 22px;
    opacity: 0.6;
}
.xs-bottom-nav-item.active {
    color: #2563a6;
    font-weight: 600;
}
.xs-bottom-nav-item.active svg {
    opacity: 1;
    color: #2563a6;
}
.xs-bottom-nav-item .xs-icon-wrap { position: relative; display: inline-flex; }
.xs-bottom-nav-item .xs-badge-dot {
    position: absolute;
    top: -1px;
    right: -5px;
    width: 7px;
    height: 7px;
    background: #ff3b30;
    border-radius: 50%;
    border: 1.5px solid white;
}
/* 发帖按钮 - 中间凸起圆形 */
.xs-bottom-nav-post {
    position: relative;
}
.xs-bottom-nav-post-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563a6 0%, #3a7bd5 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(37, 99, 166, 0.35);
    margin-top: -16px;
    border: 3px solid white;
}
.xs-bottom-nav-post-btn svg {
    width: 20px;
    height: 20px;
    opacity: 1;
    color: white;
}
.xs-bottom-nav-post.active .xs-bottom-nav-post-btn {
    box-shadow: 0 4px 18px rgba(37, 99, 166, 0.5);
}
/* 页面底部留白由 .xs-footer 处理 */
.xs-page { padding-bottom: 0; }
.xs-page.xs-compat { padding-bottom: 0; }

/* ====== 下拉菜单 ====== */
.xs-dropdown-wrapper { position: relative; }
.xs-dropdown {
    position: absolute;
    top: 56px;
    right: 4px;
    width: 260px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.xs-dropdown.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.xs-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
    border-bottom: 1px solid #f0f0f0;
}
.xs-dropdown-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563a6 0%, #3a7bd5 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}
.xs-dropdown-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xs-dropdown-user-info { flex: 1; min-width: 0; }
.xs-dropdown-name { font-size: 14px; font-weight: 600; color: #1d1d1f; margin-bottom: 2px; }
.xs-dropdown-uid { font-size: 11px; color: #86868b; }
.xs-dropdown-vip-tag {
    font-size: 10px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    border-radius: 4px;
    font-weight: 600;
}

.xs-dropdown-section { padding: 6px 6px; }
.xs-dropdown-section + .xs-dropdown-section { border-top: 1px solid #f0f0f0; }
.xs-dropdown-section-title {
    font-size: 10px;
    color: #c7c7cc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px 4px;
    font-weight: 600;
}
.xs-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
}
.xs-dropdown-item:hover { background: #f5f5f7; }
.xs-dropdown-item svg { width: 16px; height: 16px; color: #86868b; flex-shrink: 0; }
.xs-dropdown-item-text { flex: 1; }
.xs-dropdown-item-tag {
    font-size: 10px;
    padding: 1px 6px;
    background: #fff5e6;
    color: #ff9500;
    border-radius: 3px;
    font-weight: 600;
}
.xs-dropdown-item.danger { color: #ff3b30; }
.xs-dropdown-item.danger svg { color: #ff3b30; }

/* ====== 板块标题 ====== */
.xs-board-header { padding: 12px 4px 8px; }
.xs-board-title {
    font-size: 22px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    line-height: 1.3;
}
.xs-board-sub {
    font-size: 12px;
    color: #86868b;
    margin-top: 3px;
}

/* ====== 筛选标签（横排Tab） ====== */
.xs-filter-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.xs-filter-tabs::-webkit-scrollbar { display: none; }
.xs-filter-tab {
    flex-shrink: 0;
    padding: 5px 14px;
    font-size: 13px;
    color: #86868b;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 6px;
    transition: all 0.15s;
    text-decoration: none;
}
.xs-filter-tab:hover { color: #1d1d1f; }
.xs-filter-tab.active {
    background: #1d1d1f;
    color: white;
    font-weight: 600;
}

/* ====== 帖子作者昵称 ====== */
.xs-author {
    font-size: 12px;
    color: #86868b;
    margin-top: 2px;
    line-height: 1.4;
}

/* ====== 帖子列表 ====== */
.xs-list { margin-top: 0; }
.xs-item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}
.xs-item:last-child { border-bottom: none; }

/* 置顶帖橙色左边条（用独立元素，避免 ::before 溢出/遮挡） */
.xs-pin-bar {
    width: 3px;
    background: #ff9500;
    border-radius: 0 2px 2px 0;
    flex-shrink: 0;
    margin: 16px 0;
}
.xs-item.pinned .xs-item-body {
    flex: 1;
    padding: 16px 4px 16px 10px;
    background: linear-gradient(to right, #fffbf5 0%, transparent 70%);
}
.xs-item:not(.pinned) .xs-item-body {
    flex: 1;
    padding: 16px 4px;
}

/* 置顶帖和普通帖之间的分界线 */
.xs-section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    margin-top: 2px;
}
.xs-section-divider::before,
.xs-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e5e7;
}
.xs-section-divider span {
    font-size: 11px;
    color: #c7c7cc;
    font-weight: 500;
    white-space: nowrap;
}

.xs-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.xs-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    background: #fff5e6;
    color: #ff9500;
    font-weight: 600;
}
.xs-badge.official { background: #e8f4ff; color: #007aff; }
.xs-badge.essence { background: #f3e8ff; color: #af52de; }
.xs-badge.green { background: #e8f5e9; color: #34c759; }
.xs-badge.orange { background: #fff5e6; color: #ff9500; }
.xs-badge.purple { background: #f3e8ff; color: #af52de; }
.xs-badge.red { background: #ffe8e6; color: #ff3b30; }
.xs-cat { font-size: 11px; color: #86868b; margin-right: 6px; }
.xs-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 帖子列表头像行 */
.xs-title-with-avatar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.xs-title-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xs-meta-line {
    font-size: 12px;
    color: #86868b;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}
.xs-meta-line .xs-cat { margin-right: 2px; }
.xs-meta-user { color: #555; font-weight: 500; }
.xs-meta-sep { color: #ccc; }
.xs-meta-time { color: #aaa; }
.xs-meta-reply { margin-left: auto; color: #86868b; flex-shrink: 0; }
.xs-meta-reply.muted { color: #bbb; }
.xs-list-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #e8edf3;
    color: #86868b;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
}
.xs-list-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xs-row3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #86868b;
}
.xs-time { color: #86868b; }
.xs-heat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #1d1d1f;
    font-weight: 500;
}
.xs-heat svg { width: 12px; height: 12px; opacity: 0.5; }
.xs-heat.muted { color: #86868b; font-weight: 400; }
.xs-heat.muted svg { opacity: 0.4; }

/* ====== 分页 ====== */
.xs-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 16px 0 8px;
}
.xs-pager-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    color: #1d1d1f;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.xs-pager-btn.active {
    background: #1d1d1f;
    color: white;
}
.xs-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.xs-pager-info { font-size: 11px; color: #86868b; margin-left: 6px; }

/* ====== 个人主页 ====== */
.xs-main { padding: 4px; }

.xs-profile-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 12px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
    border-radius: 16px;
    margin-bottom: 12px;
}
.xs-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c7d2fe 0%, #93c5fd 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
    position: relative;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}
.xs-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xs-profile-info { flex: 1; min-width: 0; }
.xs-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.xs-profile-name .vip-mini {
    font-size: 9px;
    padding: 1px 5px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    border-radius: 3px;
    font-weight: 700;
}
.xs-profile-meta {
    font-size: 11px;
    color: #86868b;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.xs-profile-meta .dot { color: #d1d1d6; }
.xs-profile-edit-btn {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #f5f5f7;
    color: #1d1d1f;
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.xs-profile-edit-btn:hover { background: #ebebef; }

/* 数据 5 等分 */
.xs-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: white;
    border-radius: 16px;
    padding: 16px 8px;
    margin-bottom: 16px;
    border: 1px solid #f0f0f0;
}
.xs-stat-item { text-align: center; position: relative; }
.xs-stat-item + .xs-stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: #f0f0f0;
}
.xs-stat-num { font-size: 20px; font-weight: 700; color: #1d1d1f; line-height: 1.2; }
.xs-stat-num.muted { color: #86868b; }
.xs-stat-label { font-size: 11px; color: #86868b; margin-top: 2px; }

/* Tab */
.xs-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 16px;
    padding: 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.xs-tabs::-webkit-scrollbar { display: none; }
.xs-tab {
    padding: 10px 4px;
    font-size: 13px;
    color: #86868b;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
}
.xs-tab.active { color: #1d1d1f; font-weight: 600; }
.xs-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: #2563a6;
    border-radius: 1px;
}
.xs-tab .count { font-size: 10px; color: #c7c7cc; margin-left: 2px; }
.xs-tab.active .count { color: #2563a6; }
.xs-more-tab {
    position: relative;
    padding: 10px 8px;
    font-size: 13px;
    color: #86868b;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.xs-more-menu {
    position: fixed;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border: 1px solid #f0f0f0;
    padding: 4px;
    min-width: 120px;
    display: none;
    z-index: 200;
}
.xs-more-menu.show { display: block; }
.xs-more-menu-item {
    padding: 8px 12px;
    font-size: 12px;
    color: #1d1d1f;
    border-radius: 6px;
    cursor: pointer;
}
.xs-more-menu-item:hover { background: #f5f5f7; }

/* 弹窗遮罩层 */
.xs-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.xs-overlay.show { display: flex; }
.xs-overlay-panel {
    background: #fff;
    border-radius: 14px;
    padding: 20px 18px;
    max-width: 340px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}
.xs-overlay-close {
    position: absolute;
    top: 10px; right: 14px;
    font-size: 22px;
    color: #86868b;
    cursor: pointer;
    line-height: 1;
}
.xs-overlay-title { font-size: 17px; font-weight: 700; color: #1d1d1f; margin-bottom: 4px; }

/* 内容分组卡 */
.xs-section {
    background: white;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    margin-bottom: 10px;
    overflow: hidden;
}
.xs-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    padding: 12px 14px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.xs-section-title svg { width: 14px; height: 14px; color: #2563a6; }
.xs-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-top: 1px solid #f5f5f7;
    cursor: pointer;
}
.xs-section-row:hover { background: #fafafa; }
.xs-section-row .label { font-size: 12px; color: #86868b; }
.xs-section-row .value {
    font-size: 13px;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xs-section-row .value .arrow { color: #c7c7cc; font-size: 14px; margin-left: 2px; }
.xs-section-row .value .placeholder { color: #c7c7cc; }

/* 勋章 */
.xs-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid #f5f5f7;
}
.xs-badge-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.xs-badge-text { flex: 1; }
.xs-badge-title { font-size: 13px; font-weight: 600; color: #b45309; }
.xs-badge-sub { font-size: 11px; color: #86868b; margin-top: 1px; }

/* 开关 */
.xs-switch {
    width: 38px;
    height: 22px;
    background: #34c759;
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}
.xs-switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 2px;
    right: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: all 0.2s;
}
.xs-switch.off { background: #d1d1d6; }
.xs-switch.off::after { right: auto; left: 2px; }

/* ====== 充值页面 ====== */
.xs-balance-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fff8ec 0%, #fff5e0 100%);
    border: 1px solid #ffe4b3;
    border-radius: 14px;
    margin-bottom: 14px;
}
.xs-balance-info { display: flex; align-items: center; gap: 10px; }
.xs-balance-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9500, #ff6b00);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.xs-balance-label { font-size: 11px; color: #86868b; }
.xs-balance-num { font-size: 18px; font-weight: 700; color: #1d1d1f; }
.xs-balance-rate { font-size: 11px; color: #86868b; text-align: right; }

.xs-page-tabs {
    display: flex;
    background: #f5f5f7;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 14px;
}
.xs-page-tab {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    font-size: 12px;
    color: #86868b;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
}
.xs-page-tab.active { background: white; color: #1d1d1f; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.xs-page-tab .badge { font-size: 10px; background: #ff3b30; color: white; padding: 0 5px; border-radius: 8px; margin-left: 3px; font-weight: 600; }
.xs-link-btn {
    background: none;
    border: none;
    color: #2563a6;
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
}
.xs-link-btn:hover { background: #f0f0f0; }
.xs-link-btn.danger { color: #ff3b30; }

/* 步骤条 */
.xs-steps { display: flex; align-items: center; padding: 12px 4px 16px; }
.xs-step { display: flex; align-items: center; flex-shrink: 0; }
.xs-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #86868b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.xs-step.active .xs-step-num { background: #2563a6; color: white; }
.xs-step-label { font-size: 11px; color: #86868b; margin-left: 5px; font-weight: 500; }
.xs-step.active .xs-step-label { color: #1d1d1f; font-weight: 600; }
.xs-step-line { flex: 1; height: 1px; background: #f0f0f0; margin: 0 6px; }

/* 套餐网格 */
.xs-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.xs-plan {
    position: relative;
    padding: 12px;
    border: 1.5px solid #f0f0f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
}
.xs-plan:hover { border-color: #d1d1d6; }
.xs-plan.selected { border-color: #2563a6; background: linear-gradient(135deg, #f8fbff, #fff); }
.xs-plan-best { border-color: #ff9500; }
.xs-plan-best::before {
    content: '推荐';
    position: absolute;
    top: -8px;
    left: 10px;
    font-size: 10px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #ff9500, #ff6b00);
    color: white;
    border-radius: 3px;
    font-weight: 600;
}
.xs-plan-row1 { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.xs-plan-price { font-size: 20px; font-weight: 800; color: #1d1d1f; }
.xs-plan-unit { font-size: 11px; color: #86868b; }
.xs-plan-row2 { font-size: 11px; color: #86868b; }
.xs-plan-row2 b { color: #ff9500; font-weight: 600; }

/* 支付方式 */
.xs-pay-section { margin-bottom: 14px; }
.xs-section-label { font-size: 13px; font-weight: 600; color: #1d1d1f; margin-bottom: 8px; padding: 0 2px; }
.xs-pay-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xs-pay-mode {
    padding: 10px;
    border: 1.5px solid #f0f0f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: white;
}
.xs-pay-mode.selected { border-color: #2563a6; background: linear-gradient(135deg, #f8fbff, #fff); }
.xs-pay-mode-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
}
.xs-pay-wechat { background: #07c160; }
.xs-pay-alipay { background: #1677ff; }
.xs-pay-mode-text { font-size: 12px; color: #1d1d1f; font-weight: 500; }

/* 二维码 */
.xs-qr-block {
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
    border: 1px solid #e8f4ff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}
.xs-qr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.xs-qr-title { font-size: 13px; font-weight: 600; color: #1d1d1f; display: flex; align-items: center; gap: 6px; }
.xs-qr-tip { font-size: 10px; color: #ff9500; background: #fff5e6; padding: 2px 6px; border-radius: 3px; font-weight: 600; }
.xs-qr-body { display: flex; gap: 12px; align-items: center; }
.xs-qr-img {
    width: 110px;
    height: 110px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.xs-qr-img img { width: 100%; height: 100%; object-fit: contain; }
.xs-qr-info { flex: 1; min-width: 0; }
.xs-qr-step { font-size: 12px; color: #1d1d1f; line-height: 1.7; }
.xs-qr-step .num {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #2563a6;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
    margin-right: 4px;
    font-weight: 700;
}
.xs-qr-account {
    margin-top: 8px;
    padding: 6px 8px;
    background: white;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
    font-size: 11px;
    color: #1d1d1f;
    font-family: ui-monospace, monospace;
    word-break: break-all;
}

/* 表单 */
.xs-form-card { background: white; border: 1px solid #f0f0f0; border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.xs-form-hint {
    font-size: 11px;
    color: #ff9500;
    background: #fff5e6;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.xs-form-label { font-size: 12px; color: #1d1d1f; font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.xs-form-label .required { color: #ff3b30; }
.xs-form-input {
    width: 100%;
    height: 38px;
    background: #f5f5f7;
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #1d1d1f;
    outline: none;
    transition: border-color 0.15s;
    margin-bottom: 4px;
    font-family: inherit;
}
.xs-form-input:focus { border-color: #2563a6; background: white; }
.xs-form-example { font-size: 10px; color: #86868b; padding-left: 2px; }
.xs-form-textarea {
    width: 100%;
    min-height: 60px;
    background: #f5f5f7;
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #1d1d1f;
    outline: none;
    resize: none;
    font-family: inherit;
}
.xs-form-textarea:focus { border-color: #2563a6; background: white; }

.xs-submit-btn {
    width: 100%;
    height: 44px;
    background: linear-gradient(135deg, #2563a6, #1d4ed8);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    font-family: inherit;
}
.xs-submit-btn:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); }
.xs-submit-note { text-align: center; font-size: 11px; color: #86868b; }
.xs-submit-note b { color: #1d1d1f; }

/* 充值订单 */
.xs-orders-empty { text-align: center; padding: 40px 0; color: #86868b; font-size: 12px; }
.xs-order-group { margin-bottom: 14px; }
.xs-order-group-title {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.xs-order-group-count { font-size: 10px; padding: 1px 6px; background: #f5f5f7; color: #86868b; border-radius: 8px; font-weight: 500; }
.xs-order-card { background: white; border: 1px solid #f0f0f0; border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.xs-order-row1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.xs-order-amount { font-size: 15px; font-weight: 700; color: #1d1d1f; }
.xs-order-amount .coin { font-size: 11px; color: #ff9500; margin-left: 4px; font-weight: 600; }
.xs-order-status { font-size: 10px; padding: 2px 8px; border-radius: 8px; font-weight: 600; }
.xs-status-pending { background: #fff5e6; color: #ff9500; }
.xs-status-done { background: #e8f5e9; color: #34c759; }
.xs-status-reject { background: #ffe8e6; color: #ff3b30; }
.xs-order-row2 { display: flex; justify-content: space-between; font-size: 11px; color: #86868b; padding-top: 8px; border-top: 1px dashed #f0f0f0; }
.xs-order-txid { font-family: ui-monospace, monospace; color: #1d1d1f; font-size: 10px; }
.xs-order-time { color: #86868b; }

.xs-hidden { display: none; }

/* ====== 靓号大厅 ====== */
.xs-hall-header { padding: 4px 4px 12px; }
.xs-hall-title { font-size: 22px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.5px; }
.xs-hall-sub { font-size: 12px; color: #86868b; margin-top: 2px; }

.xs-categories { display: flex; gap: 6px; overflow-x: auto; padding: 4px 4px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.xs-categories::-webkit-scrollbar { display: none; }
.xs-cat-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
    background: #f5f5f7;
    color: #1d1d1f;
    border-radius: 16px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    font-family: inherit;
}
.xs-cat-chip.active { background: #1d1d1f; color: white; }
.xs-cat-chip .count { margin-left: 4px; font-size: 10px; opacity: 0.6; }

.xs-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 12px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}
.xs-filter-left { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #86868b; }
.xs-filter-right { font-size: 11px; color: #86868b; }
.xs-filter-right b { color: #1d1d1f; }

.xs-num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xs-num-card {
    position: relative;
    padding: 12px 12px 10px;
    border-radius: 12px;
    background: white;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    overflow: hidden;
}
.xs-num-card:hover { border-color: #2563a6; }
.xs-num-card.hot { background: linear-gradient(135deg, #fff8ec 0%, #ffffff 100%); border-color: #ffe4b3; }
.xs-num-card.rare { background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%); border-color: #ffd4d4; }

.xs-num-type { position: absolute; top: 8px; right: 8px; font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.xs-type-leopard { background: #fef3c7; color: #b45309; }
.xs-type-pair { background: #e8f4ff; color: #007aff; }
.xs-type-seq { background: #f3e8ff; color: #af52de; }
.xs-type-special { background: #ffe8e6; color: #ff3b30; }
.xs-type-short { background: #e8f5e9; color: #34c759; }

.xs-num-id { font-size: 22px; font-weight: 800; color: #1d1d1f; letter-spacing: -0.5px; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.xs-num-meaning { font-size: 10px; color: #86868b; margin-bottom: 8px; min-height: 12px; }
.xs-num-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px dashed #f0f0f0; }
.xs-num-price { font-size: 11px; color: #86868b; }
.xs-num-price b { color: #ff9500; font-size: 14px; font-weight: 700; }
.xs-num-buy {
    font-size: 11px;
    padding: 4px 10px;
    background: #2563a6;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.xs-num-buy:hover { background: #1d4ed8; }
.xs-num-buy:disabled { background: #d1d1d6; cursor: not-allowed; }
.xs-num-card.hot .xs-num-buy { background: #ff9500; }
.xs-num-card.rare .xs-num-buy { background: #ff3b30; }

/* ====== 通用提示 ====== */
.xs-alert {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 12px;
    text-align: center;
}
.xs-alert.info { background: #e8f4ff; color: #007aff; }
.xs-alert.success { background: #e8f5e9; color: #34c759; }
.xs-alert.warning { background: #fff5e6; color: #ff9500; }
.xs-alert.error { background: #ffe8e6; color: #ff3b30; }

/* ====== 空状态 ====== */
.xs-empty {
    text-align: center;
    padding: 40px 20px;
    color: #86868b;
    font-size: 13px;
}
.xs-empty svg { width: 48px; height: 48px; opacity: 0.2; margin: 0 auto 12px; }

/* ====== 底部安全区 ====== */
.xs-safe-bottom { height: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* 浮动回顶/回底按钮 */
.xs-scroll-btns {
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.xs-scroll-btns.show { opacity: 1; visibility: visible; }
.xs-scroll-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(29, 29, 31, 0.85);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    transition: background 0.2s;
}
.xs-scroll-btn:active { background: rgba(29, 29, 31, 1); }
.xs-scroll-btn svg { width: 20px; height: 20px; }

/* ====== 个人资料 - 勋章 ====== */
.xs-medals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}
.xs-medal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    text-align: center;
}
.xs-medal img,
.xs-medal-icon,
.xs-medal-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    border: 2px solid #e5e5e7;
}
.xs-medal-img img { border: none; border-radius: 50%; }
.xs-medal.earned img,
.xs-medal.earned .xs-medal-icon,
.xs-medal.earned .xs-medal-img {
    border-color: #ff9500;
    box-shadow: 0 0 6px rgba(255,149,0,0.3);
}
.xs-medal.earned .xs-medal-img img {
    filter: drop-shadow(0 0 4px rgba(255,149,0,0.3));
}
.xs-medal.locked img,
.xs-medal.locked .xs-medal-icon,
.xs-medal.locked .xs-medal-img {
    opacity: 0.4;
    filter: grayscale(100%);
    border-color: #d1d1d6;
}
.xs-medal.locked .xs-medal-img img { filter: grayscale(100%); opacity: 1; }
.xs-medal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #86868b;
    background: #f5f5f7;
}
.xs-medal-name {
    font-size: 10px;
    color: #1d1d1f;
    margin-top: 4px;
    line-height: 1.2;
}
.xs-medal.locked .xs-medal-name { color: #c7c7cc; }
.xs-medal-tip {
    font-size: 9px;
    color: #ff3b30;
    margin-top: 1px;
}

/* ====== 板块图标 ====== */
.xs-forum-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e8f4ff;
    color: #2563a6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.xs-forum-icon svg {
    width: 22px;
    height: 22px;
}

/* 分区标题 */
.xs-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 4px 6px;
    margin-top: 4px;
}
.xs-section-header-bar {
    width: 4px;
    height: 16px;
    background: #2274a5;
    border-radius: 2px;
    flex-shrink: 0;
}
.xs-section-header-text {
    font-size: 15px;
    font-weight: 700;
    color: #1d1d1f;
}

/* ====== 个人资料 - 编辑表单 ====== */
.xs-edit-form { padding-bottom: 20px; }
.xs-avatar-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}
.xs-avatar-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #86868b;
    flex-shrink: 0;
    border: 2px solid #e5e5e7;
}
/* 头像上传区域优化布局 */
.xs-avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
}
.xs-avatar-preview-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #86868b;
    flex-shrink: 0;
    border: 2px solid #e5e5e7;
}
.xs-avatar-preview-lg img { width: 100%; height: 100%; object-fit: cover; }
.xs-avatar-upload-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.xs-avatar-pick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #2563a6;
    background: #e8f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    width: fit-content;
}
.xs-avatar-pick-btn:active { background: #d0e9ff; }
.xs-avatar-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #2563a6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    width: fit-content;
}
.xs-avatar-upload-btn:active { background: #1d4f8a; }
.xs-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xs-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f7;
}
.xs-form-row:last-child { border-bottom: none; }
.xs-form-label {
    font-size: 13px;
    font-weight: 600;
    color: #86868b;
}
.xs-form-input,
.xs-form-textarea,
.xs-form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e5e5e7;
    border-radius: 8px;
    font-size: 15px;
    color: #1d1d1f;
    background: #fff;
    transition: border-color 0.15s;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.xs-form-input:focus,
.xs-form-textarea:focus,
.xs-form-select:focus {
    outline: none;
    border-color: #2563a6;
}
.xs-form-textarea {
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
}
.xs-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386808b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ====== 消息中心 ====== */
.xs-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 4px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
}
.xs-notif-item:last-child { border-bottom: none; }
.xs-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    margin-top: 6px;
    flex-shrink: 0;
}
.xs-notif-dot.read { background: transparent; }
.xs-notif-content {
    flex: 1;
    min-width: 0;
}
.xs-notif-text {
    font-size: 14px;
    color: #1d1d1f;
    line-height: 1.5;
}
.xs-notif-text.read { color: #86868b; }
.xs-notif-time {
    font-size: 11px;
    color: #c7c7cc;
    margin-top: 4px;
}

/* ====== 帖子详情 ====== */
.xs-thread-header {
    padding: 16px 4px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.xs-thread-forum {
    font-size: 12px;
    color: #2563a6;
    font-weight: 600;
    margin-bottom: 6px;
}
.xs-thread-title {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.4;
    letter-spacing: -0.3px;
    margin: 0;
}
.xs-thread-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: #86868b;
}
.xs-thread-meta .xs-avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
}
.xs-thread-author {
    font-weight: 600;
    color: #1d1d1f;
}
.xs-post-card {
    padding: 16px 4px;
    border-bottom: 1px solid #f0f0f0;
}
.xs-post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.xs-post-floor {
    font-size: 12px;
    color: #c7c7cc;
    font-weight: 600;
}
.xs-post-author {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}
.xs-post-time {
    font-size: 11px;
    color: #c7c7cc;
    margin-left: auto;
}
.xs-post-content {
    font-size: 15px;
    color: #1d1d1f;
    line-height: 1.7;
    word-break: break-word;
}
.xs-post-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.xs-post-content .img-lightbox { display: inline-block; }
.xs-reply-bar {
    position: sticky;
    bottom: 56px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    padding: 10px 4px;
    z-index: 50;
}
.xs-reply-input-wrap {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.xs-reply-input {
    flex: 1;
    min-height: 38px;
    max-height: 120px;
    padding: 8px 12px;
    border: 1.5px solid #e5e5e7;
    border-radius: 18px;
    font-size: 14px;
    resize: none;
    outline: none;
}
.xs-reply-input:focus { border-color: #2563a6; }
.xs-reply-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: #2563a6;
    color: white;
    border: none;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ====== 版权信息 ====== */
.xs-footer {
    text-align: center;
    padding: 12px 4px 8px;
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
    background: #fafafa;
    /* 底部留白，确保版权信息不被悬浮导航栏遮挡 */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.xs-footer .wrap.copyright,
.xs-footer .xs-footer-copy {
    font-size: 11px;
    color: #86868b;
}
.xs-footer .powered-text { color: #86868b; }
.xs-footer .powered-by { color: #2563a6; text-decoration: none; }
.xs-footer .powered-by:hover { text-decoration: underline; }
.xs-footer .site-running-days { color: #86868b; }
.xs-footer-friend-links {
    padding: 6px 4px;
    font-size: 11px;
    color: #86868b;
    line-height: 1.8;
}
.xs-footer-friend-links a {
    color: #5a5a5a;
    text-decoration: none;
    margin-right: 8px;
}
.xs-footer-friend-links a:hover { color: #2563a6; }
.xs-footer-nav {
    padding: 6px 4px;
    font-size: 11px;
    color: #86868b;
    line-height: 1.8;
}
.xs-footer-nav a {
    color: #5a5a5a;
    text-decoration: none;
    margin: 0 6px;
}
.xs-footer-nav a:hover { color: #2563a6; }
.xs-footer-icp { color: #86868b !important; }

/* ====== 帖子列表标记 ====== */
.xs-title .image-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 4px;
    color: #fff;
    background: #2f8ec4;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    vertical-align: middle;
}
.xs-new-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    background: #ff9500;
    color: #fff;
    font-size: 11px;
    border-radius: 4px;
    line-height: 1.4;
    font-weight: 700;
    vertical-align: middle;
}
.xs-hot-badge {
    display: inline-block;
    margin-left: 5px;
    font-size: 13px;
    vertical-align: middle;
}

/* ====== 兼容模式：默认模版内容适配（帖子页等） ====== */
.xs-page.xs-compat {
    padding: 0;
}
.xs-page.xs-compat .xs-app-bar {
    padding: 4px 7px 0;
    background: #fff;
    border-bottom: 1px solid #e5edf3;
    position: sticky;
    top: 0;
    z-index: 100;
}
.xs-page.xs-compat .xs-top-row {
    padding: 8px 4px 8px;
}
/* .wrap 取消宽度限制，贯穿全宽 */
.xs-page.xs-compat .wrap {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 7px;
    box-sizing: border-box;
}
/* 隐藏默认模版中可能残留的标题/面包屑 */
.xs-page.xs-compat .breadcrumb,
.xs-page.xs-compat .page-title,
.xs-page.xs-compat .site-header,
.xs-page.xs-compat .main-header,
.xs-page.xs-compat .content-header {
    display: none !important;
}
/* .card 取消左右边框和圆角，保留上下边框作为分隔线 */
.xs-page.xs-compat .card {
    border: none;
    border-top: 1px solid #e5edf3;
    border-radius: 0;
    box-shadow: none;
    padding: 16px 7px;
    margin-top: 0;
}
/* 第一个 card 不需要上边框 */
.xs-page.xs-compat .card:first-child {
    border-top: none;
}
/* 帖子标题卡片特殊处理 */
.xs-page.xs-compat .post-title-card {
    border-top: none;
    border-bottom: 1px solid #e5edf3;
}
/* 帖子标题文字适配 */
.xs-page.xs-compat .thread-title {
    font-size: 18px;
    line-height: 1.4;
    word-break: break-word;
}
/* 帖子信息栏适配 */
.xs-page.xs-compat .thread-info,
.xs-page.xs-compat .post-info {
    flex-wrap: wrap;
    gap: 4px;
}
/* 编辑器工具栏适配 - 始终保持一行，可横向滑动 */
.xs-page .editor-toolbar {
    flex-wrap: nowrap;
    gap: 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.xs-page .editor-toolbar::-webkit-scrollbar { display: none; }
.xs-page .editor-toolbar button,
.xs-page .editor-toolbar .toolbar-btn,
.xs-page .editor-toolbar label.toolbar-upload-btn {
    flex-shrink: 0;
}
/* 回复表单区域 */
.xs-page.xs-compat .reply-form-wrap,
.xs-page.xs-compat .reply-form {
    padding: 12px 7px;
}
/* 分页区域 */
.xs-page.xs-compat .pagination {
    padding: 10px 7px;
}
/* 帖子操作按钮区域 */
.xs-page.xs-compat .thread-actions-bar {
    padding: 10px 7px;
}
/* 推荐帖子区域 */
.xs-page.xs-compat .recommend-posts {
    padding: 0 7px;
}
/* 回复列表中的卡片也去掉边框 */
.xs-page.xs-compat .reply-card,
.xs-page.xs-compat .post-reply-card {
    border: none;
    border-top: 1px solid #e5edf3;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 7px;
    margin-top: 0;
}

/* ====== 个人中心（移植自小兽模版二） ====== */
.profile-header {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    padding: 28px 20px 22px;
    color: #fff;
    margin: -14px -14px 0;
}
.profile-top {
    display: flex;
    align-items: center;
    gap: 14px;
}
.profile-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid rgba(255,255,255,0.4);
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-info {
    flex: 1;
    min-width: 0;
}
.profile-name {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.profile-name .gold-name {
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.profile-uid {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.liang-badge {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    line-height: 1.6;
}
.profile-edit {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.3);
    text-decoration: none;
}
.profile-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
}
.stat-item {
    text-align: center;
    text-decoration: none;
    color: #fff;
    flex: 1;
}
.stat-num {
    font-size: 18px;
    font-weight: 700;
}
.stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-top: 3px;
}

/* 快捷入口 */
.profile-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 0;
    margin: 12px 0 0;
    background: #fff;
    border-radius: 12px;
    padding: 16px 8px;
}
.profile-quick.two-rows {
    grid-template-rows: auto auto;
}
.profile-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.profile-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.profile-quick-icon svg {
    width: 22px;
    height: 22px;
}
.profile-quick-label {
    font-size: 12px;
    color: #4b5563;
}

/* VIP 横幅 */
.vip-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1f2937, #111827);
    color: #fff;
    text-decoration: none;
}
.vip-crown {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vip-crown svg {
    width: 20px;
    height: 20px;
    color: #fff;
}
.vip-info {
    flex: 1;
}
.vip-title {
    font-size: 15px;
    font-weight: 600;
}
.vip-desc {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}
.vip-btn {
    padding: 6px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

/* 菜单组 */
.menu-group {
    margin: 12px 0 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: inherit;
}
.menu-item:last-child {
    border-bottom: none;
}
.menu-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6b7280;
}
.menu-icon svg {
    width: 22px;
    height: 22px;
}
.menu-label {
    flex: 1;
    font-size: 15px;
    color: #1f2937;
}
.menu-value {
    font-size: 13px;
    color: #9ca3af;
}
.menu-arrow {
    color: #d1d5db;
    flex-shrink: 0;
}
.menu-arrow svg {
    width: 18px;
    height: 18px;
}

.footer-space {
    height: 20px;
}

/* ====== 帖子列表（通用） ====== */
.xs2-post-list {
    margin-top: 12px;
}
.post-item {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: inherit;
}
.post-item:last-child {
    border-bottom: none;
}
.post-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.post-meta {
    font-size: 13px;
    color: #86868b;
    display: flex;
    align-items: center;
    gap: 5px;
}
.post-meta .dot {
    color: #d1d5db;
}
.post-meta .gold-name {
    font-weight: 600;
}

/* ====== 空状态 ====== */
.xs2-empty {
    text-align: center;
    padding: 48px 20px;
    color: #9ca3af;
}
.xs2-empty-text {
    font-size: 14px;
    color: #9ca3af;
}

/* ====== 分页 ====== */
.xs2-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
    flex-wrap: wrap;
}
.xs2-pager a,
.xs2-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 13px;
    color: #4b5563;
    background: #f3f4f6;
    text-decoration: none;
}
.xs2-pager a:active {
    background: #e5e7eb;
}
.xs2-pager span.active {
    background: #2563eb;
    color: #fff;
    font-weight: 600;
}
.xs2-pager span.disabled {
    color: #d1d5db;
    background: none;
}
.xs2-pager-info {
    font-size: 12px;
    color: #9ca3af;
}

/* ====== 消息中心 ====== */
.msg-page {
    margin: -14px -14px 0;
    padding: 14px;
    background: #f5f5f7;
    min-height: calc(100vh - 60px);
}

/* 4 分类圆 */
.msg-quick {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 16px 4px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
}
.msg-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.msg-quick-item.active .msg-quick-icon {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.msg-quick-item.active .msg-quick-label {
    color: #2563eb;
    font-weight: 600;
}
.msg-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msg-quick-icon svg {
    width: 22px;
    height: 22px;
}
.msg-quick-label {
    font-size: 11px;
    color: #4b5563;
}
.msg-quick-badge {
    position: absolute;
    top: -4px;
    right: 50%;
    transform: translateX(22px);
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    border: 2px solid #fff;
}

/* 消息列表标题 */
.msg-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 10px;
}
.msg-list-header > span {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.msg-read-all-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}

/* 消息列表 */
.msg-list {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.msg-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: inherit;
}
.msg-item:last-child {
    border-bottom: none;
}
.msg-item.unread {
    background: #f0f7ff;
}
.msg-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}
.msg-avatar svg {
    width: 22px;
    height: 22px;
}
.msg-avatar-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b30;
    border: 2px solid #fff;
}
.msg-content {
    flex: 1;
    min-width: 0;
}
.msg-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.msg-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-time {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
    margin-left: 8px;
}
.msg-preview {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 消息空状态 */
.msg-empty {
    text-align: center;
    padding: 48px 20px;
}
.msg-empty-text {
    font-size: 14px;
    color: #9ca3af;
}

/* ====== 5分类消息圆 ====== */
.msg-quick.msg-quick-5 {
    grid-template-columns: repeat(5, 1fr);
}
.msg-quick-5 .msg-quick-icon {
    width: 42px;
    height: 42px;
}
.msg-quick-5 .msg-quick-icon svg {
    width: 20px;
    height: 20px;
}
.msg-quick-5 .msg-quick-label {
    font-size: 11px;
}

/* ====== 弹窗通用 ====== */
.xs-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.xs-modal-box {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    animation: xsModalIn 0.2s ease;
}
@keyframes xsModalIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.xs-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}
.xs-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.xs-modal-body {
    padding: 20px;
}

/* 钱包弹窗 */
.xs-wallet-coins {
    text-align: center;
    padding: 12px 0 20px;
}
.xs-wallet-coins-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.xs-wallet-coins-icon svg {
    width: 28px;
    height: 28px;
}
.xs-wallet-coins-num {
    font-size: 36px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}
.xs-wallet-coins-label {
    font-size: 14px;
    color: #9ca3af;
    margin-top: 4px;
}
.xs-wallet-actions {
    display: flex;
    gap: 12px;
}
.xs-wallet-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 12px;
    background: #f3f4f6;
    text-decoration: none;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
.xs-wallet-btn:active {
    background: #e5e7eb;
}
.xs-wallet-btn svg {
    width: 24px;
    height: 24px;
}

/* 签到弹窗 */
.xs-signin-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
}
.xs-signin-icon svg {
    width: 32px;
    height: 32px;
}
.xs-signin-icon.loading {
    background: #dbeafe;
    color: #2563eb;
    animation: xsSpin 1s linear infinite;
}
.xs-signin-icon.success {
    background: #dcfce7;
    color: #059669;
}
.xs-signin-icon.info {
    background: #fef3c7;
    color: #d97706;
}
.xs-signin-icon.error {
    background: #fef2f2;
    color: #ef4444;
}
@keyframes xsSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.xs-signin-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}
.xs-signin-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 20px;
}
.xs-signin-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.xs-signin-btn:active {
    background: #1d4ed8;
}

/* ====== 菜单组标题 ====== */
.menu-group-title {
    padding: 10px 16px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}
.menu-group-title:first-child {
    border-radius: 12px 12px 0 0;
}

/* ====== 勋章预览网格 ====== */
.xs-medal-preview-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 6px;
    padding: 4px 0 8px;
    width: 100%;
}
.xs-medal-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    opacity: 0.4;
    filter: grayscale(100%);
    transition: all 0.2s;
}
.xs-medal-preview-item.earned {
    opacity: 1;
    filter: none;
}
.xs-medal-preview-item .xs-medal-icon,
.xs-medal-preview-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.xs-medal-name {
    font-size: 10px;
    color: #6b7280;
    line-height: 1.3;
    word-break: break-all;
}
.xs-medal-preview-item.earned .xs-medal-name {
    color: #d97706;
    font-weight: 600;
}
.xs-medal-status {
    font-size: 9px;
    color: #d1d5db;
}

/* ====== 无顶部栏模式 ====== */
.xs-page.xs-no-appbar .xs-main {
    padding-top: 0;
}

/* ====== 金币规则弹窗 ====== */
.xs-coin-rules {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}
.xs-coin-rules-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}
.xs-coin-rules-desc {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 10px;
}
.xs-coin-rules-table {
    width: 100%;
    border-collapse: collapse;
}
.xs-coin-rules-table td {
    padding: 8px 4px;
    font-size: 13px;
    color: #4b5563;
    border-bottom: 1px solid #f3f4f6;
}
.xs-coin-rules-table td:last-child {
    text-align: right;
    color: #059669;
    font-weight: 600;
    white-space: nowrap;
}

/* ====== 夜间模式标题对比度修复 ====== */
.xs-dark .section-title { color: #e5e5e5 !important; }
.xs-dark h1, .xs-dark h2, .xs-dark h3, .xs-dark h4 { color: #e5e5e5 !important; }
.xs-dark .card-title { color: #e5e5e5 !important; }
.xs-dark .thread-title { color: #e5e5e5 !important; }
.xs-dark .latest-title-menu { color: #e5e5e5 !important; }
.xs-dark .forum-name { color: #e5e5e5 !important; }
.xs-dark .forum-desc { color: #888 !important; }
.xs-dark .thread-info { color: #888 !important; }
.xs-dark .thread-meta { color: #666 !important; }
.xs-dark .post-info { color: #888 !important; }
.xs-dark .post-meta { color: #666 !important; }
.xs-dark .post-author { color: #e5e5e5 !important; }
.xs-dark .post-content { color: #ccc !important; }
.xs-dark .reply-content { color: #ccc !important; }
.xs-dark .card-content { color: #ccc !important; }
.xs-dark .card { background: #1c1c1e !important; border-color: #333 !important; }
.xs-dark .card-header { border-bottom-color: #333 !important; }
.xs-dark .forum-list-item { border-bottom-color: #333 !important; }
.xs-dark .thread-list-item { border-bottom-color: #333 !important; }
.xs-dark .badge { background: #374151 !important; color: #ccc !important; }
.xs-dark .btn-default { background: #2a2a2a !important; color: #ccc !important; border-color: #444 !important; }
.xs-dark .form-control { background: #2a2a2a !important; color: #e5e5e5 !important; border-color: #444 !important; }
.xs-dark .pagination a, .xs-dark .pagination span { background: #2a2a2a !important; color: #ccc !important; border-color: #444 !important; }
.xs-dark .pagination .active { background: #2563eb !important; color: #fff !important; }
.xs-dark .alert { background: #1c1c1e !important; color: #ccc !important; border-color: #333 !important; }
.xs-dark .table { color: #ccc !important; }
.xs-dark .table th { color: #e5e5e5 !important; border-color: #333 !important; }
.xs-dark .table td { border-color: #333 !important; }
.xs-dark .label { background: #374151 !important; color: #ccc !important; }
.xs-dark .dropdown-menu { background: #1c1c1e !important; border-color: #333 !important; }
.xs-dark .dropdown-menu a { color: #ccc !important; }
.xs-dark .modal-content { background: #1c1c1e !important; color: #e5e5e5 !important; }
.xs-dark .modal-header { border-bottom-color: #333 !important; }
.xs-dark .modal-footer { border-top-color: #333 !important; }
.xs-dark code { background: #2a2a2a !important; color: #f87171 !important; }
.xs-dark pre { background: #1c1c1e !important; color: #ccc !important; }
.xs-dark blockquote { border-left-color: #444 !important; color: #888 !important; }
.xs-dark .user-profile-section-title { color: #e5e5e5 !important; border-color: #333 !important; }
.xs-dark .coin-rules-popup-panel { background: #1c1c1e !important; color: #e5e5e5 !important; }
.xs-dark .coin-rules-table th { color: #e5e5e5 !important; border-color: #333 !important; }
.xs-dark .coin-rules-table td { color: #ccc !important; border-color: #333 !important; }

/* 金币规则弹窗夜间模式 */
.xs-dark .xs-coin-rules { border-top-color: #333 !important; }
.xs-dark .xs-coin-rules-title { color: #e5e5e5 !important; }
.xs-dark .xs-coin-rules-table td { color: #ccc !important; border-bottom-color: #333 !important; }

/* ====== 夜间模式（完整暗黑主题） ====== */
.xs-dark { color-scheme: dark; }
.xs-dark body { background: #0f0f0f; color: #e5e5e5; }
.xs-dark .xs-page { background: #0f0f0f; }

/* 顶部栏 */
.xs-dark .xs-app-bar { background: #1c1c1e; border-bottom-color: #333; }
.xs-dark .xs-app-bar-title { color: #fff; }
.xs-dark .xs-app-bar .icon-btn { color: #ccc; }

/* 底部导航 */
.xs-dark .xs-bottom-nav { background: #1c1c1e; border-top-color: #333; }
.xs-dark .xs-bottom-nav .nav-item { color: #666; }
.xs-dark .xs-bottom-nav .nav-item.active { color: #3b82f6; }
.xs-dark .xs-bottom-nav .badge { background: #ef4444; }

/* Tab 导航 */
.xs-dark .xs-tabs { background: #1c1c1e; border-bottom-color: #333; }
.xs-dark .xs-tabs .tab { color: #666; }
.xs-dark .xs-tabs .tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }

/* 帖子列表 */
.xs-dark .xs-thread-list { background: #1c1c1e; }
.xs-dark .xs-thread-item { border-bottom-color: #333; }
.xs-dark .xs-thread-title { color: #e5e5e5; }
.xs-dark .xs-thread-meta { color: #666; }

/* 通用卡片 */
.xs-dark .xs-card { background: #1c1c1e; border-color: #333; }

/* 个人中心头部 */
.xs-dark .profile-header { background: linear-gradient(135deg, #1e3a5f, #1a2a4a); }
.xs-dark .profile-name { color: #fff; }
.xs-dark .profile-uid { color: rgba(255,255,255,0.5); }
.xs-dark .stat-label { color: rgba(255,255,255,0.5); }

/* 快捷入口 */
.xs-dark .profile-quick { background: #1c1c1e; }
.xs-dark .profile-quick-label { color: #ccc; }

/* VIP 横幅 */
.xs-dark .vip-banner { background: linear-gradient(135deg, #2d2d2d, #1a1a1a); }
.xs-dark .vip-desc { color: #666; }

/* 菜单组 */
.xs-dark .menu-group { background: #1c1c1e; }
.xs-dark .menu-item { border-bottom-color: #333; }
.xs-dark .menu-label { color: #e5e5e5; }
.xs-dark .menu-icon { color: #888; }
.xs-dark .menu-value { color: #666; }
.xs-dark .menu-arrow { color: #444; }
.xs-dark .menu-group-title { background: #1c1c1e; color: #666; border-bottom-color: #333; }
.xs-dark .xs-medal-name { color: #888; }
.xs-dark .xs-medal-preview-item.earned .xs-medal-name { color: #fbbf24; }
.xs-dark .xs-medal-status { color: #444; }

/* 编辑资料 */
.xs-dark .xs-edit-section { background: #1c1c1e; border-color: #333; }
.xs-dark .xs-edit-form-title { color: #666; }
.xs-dark .xs-edit-label { color: #666; }
.xs-dark .xs-edit-input,
.xs-dark .xs-edit-textarea,
.xs-dark .xs-edit-select { background: #2a2a2a; border-color: #444; color: #e5e5e5; }
.xs-dark .xs-edit-input:focus,
.xs-dark .xs-edit-textarea:focus,
.xs-dark .xs-edit-select:focus { border-color: #3b82f6; }
.xs-dark .xs-avatar-pick { background: #1e3a5f; color: #60a5fa; border-color: #2a4a6a; }

/* 消息中心 */
.xs-dark .msg-page { background: #0f0f0f; }
.xs-dark .msg-quick { background: #1c1c1e; }
.xs-dark .msg-quick-label { color: #ccc; }
.xs-dark .msg-quick-item.active .msg-quick-label { color: #3b82f6; }
.xs-dark .msg-list-header > span { color: #e5e5e5; }
.xs-dark .msg-read-all-btn { color: #60a5fa; }
.xs-dark .msg-list { background: #1c1c1e; }
.xs-dark .msg-item { border-bottom-color: #333; }
.xs-dark .msg-item.unread { background: #1a2332; }
.xs-dark .msg-name { color: #e5e5e5; }
.xs-dark .msg-preview { color: #888; }
.xs-dark .msg-time { color: #555; }
.xs-dark .msg-empty-text { color: #555; }
.xs-dark .msg-avatar-dot { border-color: #1c1c1e; }

/* 帖子列表（通用） */
.xs-dark .post-item { border-bottom-color: #333; }
.xs-dark .post-title { color: #e5e5e5; }
.xs-dark .post-meta { color: #666; }

/* 空状态 */
.xs-dark .xs2-empty-text { color: #555; }

/* 分页 */
.xs-dark .xs2-pager a { background: #2a2a2a; color: #ccc; }
.xs-dark .xs2-pager a:active { background: #333; }
.xs-dark .xs2-pager span.active { background: #2563eb; color: #fff; }
.xs-dark .xs2-pager span.disabled { color: #444; }
.xs-dark .xs2-pager-info { color: #555; }

/* 弹窗 */
.xs-dark .xs-modal-overlay { background: rgba(0,0,0,0.7); }
.xs-dark .xs-modal-box { background: #1c1c1e; }
.xs-dark .xs-modal-header { color: #e5e5e5; border-bottom-color: #333; }
.xs-dark .xs-modal-close { color: #666; }
.xs-dark .xs-wallet-coins-num { color: #e5e5e5; }
.xs-dark .xs-wallet-coins-label { color: #666; }
.xs-dark .xs-wallet-btn { background: #2a2a2a; color: #ccc; }
.xs-dark .xs-wallet-btn:active { background: #333; }
.xs-dark .xs-signin-icon { background: #2a2a2a; color: #666; }
.xs-dark .xs-signin-title { color: #e5e5e5; }
.xs-dark .xs-signin-desc { color: #888; }

/* 签到弹窗 */
.xs-dark .signin-modal-overlay { background: rgba(0,0,0,0.7); }
.xs-dark .signin-modal { background: #1c1c1e; color: #e5e5e5; }
.xs-dark .signin-modal h3 { color: #e5e5e5; }
.xs-dark .signin-modal p { color: #888; }

/* 回顶按钮 */
.xs-dark .xs-scroll-top { background: #2a2a2a; color: #ccc; }

/* 兼容模式内容区 */
.xs-dark .wrap { color: #e5e5e5; }
.xs-dark .card,
.xs-dark .thread-card,
.xs-dark .post-card { background: #1c1c1e; border-color: #333; }
.xs-dark .card-title,
.xs-dark .thread-title { color: #e5e5e5; }
.xs-dark .card-meta,
.xs-dark .thread-meta { color: #666; }
.xs-dark input,
.xs-dark textarea,
.xs-dark select { background: #2a2a2a; border-color: #444; color: #e5e5e5; }
.xs-dark .btn-primary { background: #2563eb; }
.xs-dark a { color: #60a5fa; }

/* 其他用户资料页 */
.xs-dark .xs-edit-alert.success { background: #052e16; color: #4ade80; }
.xs-dark .xs-edit-alert.error { background: #450a0a; color: #f87171; }

/* ====== v6 新增样式 ====== */

/* --- 搜索框表单样式 --- */
form.xs-search { text-decoration: none; }
.xs-dark .xs-search { background: #2a2a2a; }
.xs-dark .xs-search input { color: #e5e5e5; }
.xs-dark .xs-search svg { opacity: 0.3; }

/* --- 消息中心 2 分类布局 --- */
.msg-quick-2 {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 20px 16px 12px;
}
.msg-quick-2 .msg-quick-item { position: relative; }

/* --- 帖子页兼容模式排版修复 --- */
.xs-page.xs-compat .post-title-card .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    font-size: 12px;
    line-height: 1.6;
    padding-bottom: 6px;
    color: #86868b;
    align-items: center;
}
.xs-page.xs-compat .post-title-card .post-meta > * {
    flex-shrink: 0;
}
.xs-page.xs-compat .post-title-card .post-meta .admin-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}
.xs-page.xs-compat .post-title-card .post-meta .admin-tools .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f5f5f7;
    text-decoration: none;
}
.xs-page.xs-compat .post-title-card h1 {
    font-size: 18px;
    line-height: 1.4;
    word-break: break-word;
    margin: 8px 0 4px;
}
.xs-page.xs-compat .post-title-card .post-meta a {
    color: #2563a6;
    text-decoration: none;
}
.xs-page.xs-compat .post-meta .moderator-badge,
.xs-page.xs-compat .post-meta .op-badge,
.xs-page.xs-compat .post-meta .top-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}
.xs-page.xs-compat .post-meta .category-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    background: #e8f4ff;
    color: #2563a6;
    margin-right: 4px;
}
/* 回复区域也优化 */
.xs-page.xs-compat .reply .post-meta {
    flex-wrap: wrap;
    gap: 4px;
}
.xs-page.xs-compat .reply .post-meta .reply-actions {
    width: 100%;
    margin-top: 4px;
}
.xs-dark .xs-page.xs-compat .post-title-card .post-meta .admin-tools { border-top-color: #333; }
.xs-dark .xs-page.xs-compat .post-title-card .post-meta .admin-tools .icon-btn { background: #2a2a2a; }
.xs-dark .xs-page.xs-compat .post-meta .category-tag { background: #1a2744; color: #60a5fa; }

/* --- 微信风格私信聊天界面 --- */
.xs-pm-chat {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    background: #ededed;
}
.xs-pm-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f7f7f7;
    border-bottom: 1px solid #d9d9d9;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}
.xs-pm-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #181818;
    text-decoration: none;
    flex-shrink: 0;
}
.xs-pm-back svg { width: 22px; height: 22px; }
.xs-pm-title {
    font-size: 16px;
    font-weight: 600;
    color: #181818;
    text-decoration: none;
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 32px;
}
.xs-pm-notice {
    padding: 8px 16px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #fde68a;
}
.xs-pm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
}
.xs-pm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    margin: auto 0;
    padding: 40px 0;
}
.xs-pm-date {
    text-align: center;
    font-size: 11px;
    color: #b2b2b2;
    background: rgba(0,0,0,0.08);
    border-radius: 4px;
    padding: 2px 10px;
    margin: 0 auto;
    width: fit-content;
}
.xs-pm-msg {
    display: flex;
    gap: 8px;
    max-width: 85%;
    align-items: flex-start;
}
.xs-pm-msg-me {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.xs-pm-avatar {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    background: #ddd;
    color: #555;
}
.xs-pm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xs-pm-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 50px);
    min-width: 0;
    align-items: flex-start;
}
.xs-pm-msg-me .xs-pm-bubble-wrap { align-items: flex-end; }
.xs-pm-bubble {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
    background: #fff;
    color: #181818;
    box-sizing: border-box;
    display: inline-block;
    max-width: 100%;
    border: 1px solid #e2e8f0;
}
.xs-pm-msg-me .xs-pm-bubble {
    background: #95ec69;
    color: #181818;
    border-color: transparent;
}
.xs-pm-input-bar {
    flex-shrink: 0;
    padding: 8px 10px;
    background: #f7f7f7;
    border-top: 1px solid #d9d9d9;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.xs-pm-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.xs-pm-input-row input[type="text"] {
    flex: 1;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0 12px;
    font-size: 15px;
    background: #fff;
    outline: none;
}
.xs-pm-send-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 5px;
    background: #07c160;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.xs-pm-send-btn:active { background: #06ad56; }

/* 夜间模式 - 私信 */
.xs-dark .xs-pm-chat { background: #1a1a1a; }
.xs-dark .xs-pm-header { background: #2a2a2a; border-bottom-color: #3a3a3a; }
.xs-dark .xs-pm-back { color: #e5e5e5; }
.xs-dark .xs-pm-title { color: #e5e5e5; }
.xs-dark .xs-pm-messages { background: #1a1a1a; }
.xs-dark .xs-pm-date { background: rgba(255,255,255,0.1); color: #666; }
.xs-dark .xs-pm-avatar { background: #3a3a3a; color: #aaa; }
.xs-dark .xs-pm-bubble { background: #2a2a2a; color: #e5e5e5; }
.xs-dark .xs-pm-msg .xs-pm-bubble::before { border-right-color: #2a2a2a; }
.xs-dark .xs-pm-input-bar { background: #2a2a2a; border-top-color: #3a3a3a; }
.xs-dark .xs-pm-input-row input[type="text"] { background: #3a3a3a; border-color: #444; color: #e5e5e5; }

/* --- 排行榜页面 --- */
.xs-rank-page {
    padding: 0 10px;
}
.xs-rank-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 4px 8px;
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
}
.xs-rank-tabs {
    display: flex;
    gap: 0;
    margin: 8px 0 14px;
    background: #f5f5f7;
    border-radius: 10px;
    padding: 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.xs-rank-tabs::-webkit-scrollbar { display: none; }
.xs-rank-tab {
    flex: 1;
    text-align: center;
    padding: 8px 2px;
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: 52px;
}
.xs-rank-tab.active {
    background: #fff;
    color: #2563a6;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.xs-rank-content { display: none; }
.xs-rank-content.active { display: block; }

/* 前三名 - 领奖台布局 */
.xs-rank-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    padding: 24px 8px 20px;
}
.xs-rank-podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 30%;
}
.xs-rank-podium-first {
    width: 34%;
    padding-bottom: 10px;
}
.xs-rank-podium-first .xs-rank-podium-name {
    font-size: 14px;
}
.xs-rank-medal {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.xs-rank-podium-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    flex-shrink: 0;
    border: 3px solid #f0f0f0;
}
.xs-rank-podium-avatar-first {
    width: 64px;
    height: 64px;
    border-color: #ffe0b2;
    border-width: 4px;
}
.xs-rank-podium-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xs-rank-podium-avatar span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 600;
}
.xs-rank-podium-avatar-first span {
    font-size: 26px;
}
.xs-rank-podium-name {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}
.xs-rank-podium-value {
    font-size: 13px;
    font-weight: 700;
    color: #2563a6;
}
.xs-rank-podium-value span {
    font-size: 10px;
    font-weight: 400;
    color: #86868b;
}

/* 4-10名列表 */
.xs-rank-list {
    margin-top: 4px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.xs-rank-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f5f5f7;
}
.xs-rank-list-item:last-child { border-bottom: none; }
.xs-rank-list-item:active { background: #f9f9f9; }
.xs-rank-list-num {
    width: 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #c7c7cc;
    flex-shrink: 0;
}
.xs-rank-list-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xs-rank-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xs-rank-list-avatar span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 15px;
    font-weight: 600;
}
.xs-rank-list-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xs-rank-list-value {
    font-size: 13px;
    color: #86868b;
    flex-shrink: 0;
}
.xs-rank-empty {
    text-align: center;
    padding: 60px 20px;
    color: #c7c7cc;
    font-size: 14px;
}

/* 夜间模式 - 排行榜 */
.xs-dark .xs-rank-title { color: #e5e5e5; }
.xs-dark .xs-rank-tabs { background: #2a2a2a; }
.xs-dark .xs-rank-tab { color: #888; }
.xs-dark .xs-rank-tab.active { background: #3a3a3a; color: #60a5fa; }
.xs-dark .xs-rank-podium-avatar { border-color: #3a3a3a; }
.xs-dark .xs-rank-podium-avatar-first { border-color: #4a3a20; }
.xs-dark .xs-rank-podium-name { color: #e5e5e5; }
.xs-dark .xs-rank-list { background: #1c1c1e; }
.xs-dark .xs-rank-list-item { border-bottom-color: #333; }
.xs-dark .xs-rank-list-item:active { background: #2a2a2a; }
.xs-dark .xs-rank-list-name { color: #e5e5e5; }
.xs-dark .xs-rank-empty { color: #555; }

/* ====== v8 新增样式 ====== */

/* --- 轻量 Toast 提示 --- */
.xs-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 99999;
    max-width: 80%;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}
.xs-toast.show { opacity: 1; }

/* --- 护眼模式（浅绿色背景） --- */
.xs-eye-mode body,
.xs-eye-mode .xs-page,
.xs-eye-mode .xs-main,
.xs-eye-mode .xs-list,
.xs-eye-mode .xs-card,
.xs-eye-mode .card,
.xs-eye-mode .menu-group,
.xs-eye-mode .xs-rank-list,
.xs-eye-mode .xs-pm-messages,
.xs-eye-mode .msg-list {
    background-color: #c7edcc !important;
}
.xs-eye-mode .xs-app-bar,
.xs-eye-mode .xs-pm-header,
.xs-eye-mode .xs-pm-input-bar {
    background-color: #b5e0ba !important;
}
.xs-eye-mode .xs-bottom-nav {
    background-color: #b5e0ba !important;
}
.xs-eye-mode .xs-thread-card,
.xs-eye-mode .xs-item,
.xs-eye-mode .msg-item {
    background: #d4f0d8 !important;
}
.xs-eye-mode .xs-search,
.xs-eye-mode .xs-rank-tabs {
    background: #b5e0ba !important;
}
.xs-eye-mode .xs-pm-bubble {
    background: #d4f0d8 !important;
}
.xs-eye-mode .xs-pm-msg-me .xs-pm-bubble {
    background: #a8d8ae !important;
}
.xs-eye-mode .xs-modal-box {
    background: #c7edcc !important;
}
.xs-eye-mode input[type="text"],
.xs-eye-mode input[type="search"],
.xs-eye-mode input[type="password"],
.xs-eye-mode textarea {
    background: #d4f0d8 !important;
}

/* ===== 今日话题 - 首页横幅（手机模版） ===== */
.xs-topic-banner { margin: 0 12px 12px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; padding: 12px 14px; }
.xs-topic-banner a { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.xs-topic-icon { font-size: 18px; }
.xs-topic-title { font-size: 14px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs-topic-hint { font-size: 11px; background: rgba(255,255,255,0.2); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }

/* ===== 今日话题专页 - 手机模版（完整样式） ===== */
.qf-topic-page { margin: 0 0 16px; padding: 0; }
.qf-topic-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    padding: 18px 16px;
    color: #fff;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.qf-topic-hero::before { content: ''; position: absolute; top: -30px; right: -30px; width: 110px; height: 110px; background: rgba(255,255,255,0.08); border-radius: 50%; }
.qf-topic-hero-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.qf-topic-hero-title { font-size: 18px; font-weight: 800; margin: 0 0 10px; line-height: 1.4; position: relative; }
.qf-topic-hero-content { font-size: 14px; line-height: 1.7; opacity: 0.95; margin: 0 0 12px; position: relative; white-space: pre-wrap; word-break: break-word; }
.qf-topic-hero-content img { max-width: 100%; border-radius: 6px; }
.qf-topic-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.qf-topic-hero-hint { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.18); padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.qf-topic-hero-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.15); }
.qf-topic-hero-status.active { background: rgba(72,187,120,0.4); }
.qf-topic-hero-status.ended { background: rgba(245,101,101,0.4); }
.qf-topic-reward-flash { background: #f0fff4; border: 1px solid #9ae6b4; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.qf-topic-reward-flash .reward-icon { font-size: 24px; }
.qf-topic-reward-flash .reward-text { font-size: 14px; color: #22543d; font-weight: 600; }
.qf-topic-reward-flash .reward-text strong { color: #38a169; font-size: 16px; }
.qf-topic-replies-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.qf-topic-replies-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.qf-topic-reply-list { background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; overflow: hidden; }
.qf-topic-reply { display: flex; gap: 10px; padding: 12px 12px; border-bottom: 1px solid #f0f3f7; }
.qf-topic-reply:last-child { border-bottom: none; }
.qf-topic-reply-avatar { flex-shrink: 0; }
.qf-topic-reply-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.qf-topic-reply-avatar .avatar-fallback { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #edf2f7; color: #718096; font-size: 14px; font-weight: 600; }
.qf-topic-reply-body { flex: 1; min-width: 0; }
.qf-topic-reply-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.qf-topic-reply-nick { font-size: 13px; font-weight: 600; color: #2d3748; text-decoration: none; }
.qf-topic-reply-nick:hover { color: #2274a5; }
.qf-topic-reply-floor { font-size: 11px; color: #a0aec0; background: #edf2f7; padding: 2px 7px; border-radius: 10px; }
.qf-topic-reply-time { font-size: 11px; color: #a0aec0; }
.qf-topic-reply-content { font-size: 14px; line-height: 1.7; color: #2d3748; word-break: break-word; }
.qf-topic-reply-content img { max-width: 100%; border-radius: 6px; }
.qf-topic-empty { text-align: center; padding: 36px 16px; color: #a0aec0; font-size: 14px; }
.qf-topic-pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 14px 0; }
.qf-topic-pagination a, .qf-topic-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 12px; text-decoration: none; border: 1px solid #e5e9ef; color: #4a5568; background: #fff; }
.qf-topic-pagination a:hover { border-color: #2274a5; color: #2274a5; }
.qf-topic-pagination .current { background: #2274a5; color: #fff; border-color: #2274a5; font-weight: 600; }
.qf-topic-pagination .ellipsis { border: none; background: none; }
.qf-topic-reply-form { background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; padding: 14px; margin-top: 14px; }
.qf-topic-reply-form h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.qf-topic-reply-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #dde3ea; border-radius: 6px; padding: 10px; font-size: 14px; line-height: 1.6; resize: vertical; min-height: 90px; outline: none; font-family: inherit; }
.qf-topic-reply-form textarea:focus { border-color: #2274a5; box-shadow: 0 0 0 3px rgba(34,116,165,0.1); }
.qf-topic-reply-form .form-hint { font-size: 12px; color: #d69e2e; background: #fffbeb; border: 1px solid #f6e05e; border-radius: 6px; padding: 7px 10px; margin-bottom: 10px; }
.qf-topic-reply-form .form-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.qf-topic-reply-form .char-tip { font-size: 12px; color: #a0aec0; }
.qf-topic-reply-form .form-actions button { background: #2274a5; color: #fff; border: none; border-radius: 6px; padding: 9px 22px; font-size: 14px; font-weight: 600; cursor: pointer; }
.qf-topic-reply-form .form-actions button:hover { background: #1b6291; }
.qf-topic-login-tip { background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; padding: 18px; text-align: center; margin-top: 14px; }
.qf-topic-login-tip a { color: #2274a5; font-weight: 600; }
.qf-topic-alert { border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; font-size: 13px; }
.qf-topic-alert.info { background: #ebf8ff; border: 1px solid #90cdf4; color: #2a4365; }
.qf-topic-alert.warn { background: #fffaf0; border: 1px solid #fbd38d; color: #744210; }
.qf-topic-reply-bonus { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: #d69e2e; background: #fffbeb; border: 1px solid #f6e05e; padding: 2px 7px; border-radius: 10px; }
.xs-eye-mode .qf-topic-reply-bonus { background: #2d2410; border-color: #6b5e1a; color: #ecc94b; }