/* ==========================================================================

   小罗资源网 - 移动端主流全新设计系统 (WAP Modern Design System)

   匹配电脑端视觉风格，对标主流资源网移动端 H5 / App 体验

   ========================================================================== */



:root {

    --xl-primary: #2563eb;

    --xl-primary-hover: #1d4ed8;

    --xl-primary-light: #eff6ff;

    --xl-primary-border: #bfdbfe;

    

    --xl-bg-body: #f4f6f9;

    --xl-bg-card: #ffffff;

    --xl-bg-subtle: #f8fafc;

    --xl-border: #e2e8f0;

    --xl-border-light: #f1f5f9;

    

    --xl-text-main: #0f172a;

    --xl-text-sub: #475569;

    --xl-text-muted: #94a3b8;

    

    --xl-flame: #ef4444;

    --xl-orange: #f97316;

    --xl-amber: #f59e0b;

    --xl-emerald: #10b981;

    

    --xl-radius-sm: 6px;

    --xl-radius-md: 10px;

    --xl-radius-lg: 14px;

    --xl-radius-full: 9999px;

    

    --xl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);

    --xl-shadow-md: 0 3px 10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);

    --xl-shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.06);

}



/* 深色模式变量 */

html[data-theme-mode="night"] {

    --xl-bg-body: #0b0f17;

    --xl-bg-card: #131b26;

    --xl-bg-subtle: #172130;

    --xl-border: #233144;

    --xl-border-light: #1e293b;

    

    --xl-text-main: #f1f5f9;

    --xl-text-sub: #94a3b8;

    --xl-text-muted: #64748b;

    

    --xl-primary-light: rgba(37, 99, 235, 0.15);

    --xl-primary-border: #2563eb;

    

    --xl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);

    --xl-shadow-md: 0 3px 10px rgba(0, 0, 0, 0.3);

}



/* 全局布局重置 */

html {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

body {
    background-color: var(--xl-bg-body) !important;
    color: var(--xl-text-main) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    margin: 0;
    padding: 0 0 70px 0 !important; /* 留出底部悬浮 TabBar 高度 */
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.bodyArea {
    background-color: transparent !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    height: auto !important;
}

.htmlBody .htmlBody {
    padding: 0 !important;
}



.htmlBody {

    max-width: 640px !important;

    margin: 0 auto !important;

    padding: 0 10px !important;

    box-sizing: border-box !important;

}



/* ==========================================================================

   1. 现代移动端顶部导航 (Top Header & Brand Bar)

   ========================================================================== */

.xl-wap-header {

    position: sticky;

    top: 0;

    left: 0;

    right: 0;

    z-index: 100;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--xl-border);

    padding: 8px 12px;

    box-sizing: border-box;

}



html[data-theme-mode="night"] .xl-wap-header {

    background: rgba(19, 27, 38, 0.95);

    border-bottom-color: var(--xl-border);

}



.xl-wap-header-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.xl-wap-logo-wrap {

    flex-shrink: 0;

    display: flex;

    align-items: center;

}



.xl-wap-logo-img {

    height: 32px;

    width: auto;

    display: block;

    object-fit: contain;

}



html[data-theme-mode="day"] .xl-wap-logo-night { display: none !important; }

html[data-theme-mode="day"] .xl-wap-logo-day { display: block !important; }

html[data-theme-mode="night"] .xl-wap-logo-day { display: none !important; }

html[data-theme-mode="night"] .xl-wap-logo-night { display: block !important; }



/* 胶囊搜索栏 */

.xl-wap-search-pill {

    flex: 1;

    display: flex;

    align-items: center;

    background: var(--xl-bg-subtle);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-full);

    padding: 2px 4px 2px 10px;

    height: 34px;

    box-sizing: border-box;

    transition: all 0.2s ease;

}



.xl-wap-search-pill:focus-within {

    border-color: var(--xl-primary);

    background: var(--xl-bg-card);

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);

}



.xl-wap-search-input {

    flex: 1;

    border: none;

    background: transparent;

    outline: none;

    font-size: 13px;

    color: var(--xl-text-main);

    padding: 0 6px;

}



.xl-wap-search-input::placeholder {

    color: var(--xl-text-muted);

}



.xl-wap-search-btn {

    background: var(--xl-primary);

    color: #fff;

    border: none;

    border-radius: var(--xl-radius-full);

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    cursor: pointer;

    flex-shrink: 0;

}



/* 顶部右侧快捷按钮 */

.xl-wap-header-actions {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-shrink: 0;

}



.xl-wap-act-btn {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: 1px solid var(--xl-border);

    background: var(--xl-bg-card);

    color: var(--xl-text-sub);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.xl-wap-act-btn:hover,

.xl-wap-act-btn:active {

    background: var(--xl-bg-subtle);

    color: var(--xl-primary);

}



/* ==========================================================================

   2. 现代横向滑动分类导航 (Category Scroll Pills)

   ========================================================================== */

.xl-wap-category-bar {

    background: var(--xl-bg-card);

    border-bottom: 1px solid var(--xl-border);

    margin-bottom: 10px;

    position: relative;

}



.xl-wap-cat-scroll {

    display: flex;

    align-items: center;

    overflow-x: auto;

    white-space: nowrap;

    padding: 8px 10px;

    gap: 6px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}



.xl-wap-cat-scroll::-webkit-scrollbar {

    display: none;

}



.xl-wap-cat-pill {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 5px 13px;

    border-radius: var(--xl-radius-full);

    font-size: 13px;

    font-weight: 500;

    color: var(--xl-text-sub);

    background: var(--xl-bg-subtle);

    border: 1px solid var(--xl-border);

    text-decoration: none;

    transition: all 0.2s ease;

    flex-shrink: 0;

}



.xl-wap-cat-pill.active {

    background: var(--xl-primary);

    color: #ffffff !important;

    border-color: var(--xl-primary);

    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);

    font-weight: 600;

}



/* ==========================================================================

   3. 快捷入口金刚区 (Mobile Quick Grid 8-Icons)

   ========================================================================== */

.xl-wap-grid-card {

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-lg);

    padding: 14px 10px 10px;

    margin-bottom: 12px;

    box-shadow: var(--xl-shadow-sm);

}



.xl-wap-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px 6px;

    text-align: center;

}



.xl-wap-grid-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-decoration: none;

    color: var(--xl-text-main);

    transition: transform 0.15s ease;

}



.xl-wap-grid-item:active {

    transform: scale(0.92);

}



.xl-wap-grid-icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 6px;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);

}



.xl-wap-grid-icon img {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    object-fit: cover;

}



.xl-wap-grid-label {

    font-size: 12px;

    font-weight: 500;

    color: var(--xl-text-sub);

}



/* ==========================================================================

   4. 用户系统卡片 (Mobile User System Card)

   ========================================================================== */

.xl-wap-user-card {

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-lg);

    padding: 14px;

    margin-bottom: 12px;

    box-shadow: var(--xl-shadow-sm);

}



/* 未登录访客状态 */

.xl-wap-user-guest {

    display: flex;

    align-items: center;

    gap: 12px;

}



.xl-wap-u-avatar-box {

    flex-shrink: 0;

}



.xl-wap-u-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid var(--xl-border);

    background: var(--xl-bg-subtle);

}



.xl-wap-u-info {

    flex: 1;

    min-width: 0;

}



.xl-wap-u-name {

    font-size: 14px;

    font-weight: 700;

    color: var(--xl-text-main);

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-wap-u-name a {

    color: inherit;

    text-decoration: none;

}



.xl-wap-u-tip {

    font-size: 11px;

    color: var(--xl-text-muted);

    margin-top: 2px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.xl-wap-u-btns {

    display: flex;

    gap: 6px;

    flex-shrink: 0;

}



.xl-wap-u-btn {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 5px 10px;

    border-radius: var(--xl-radius-full);

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.2s ease;

}



.xl-wap-u-btn.btn-login {

    background: var(--xl-primary);

    color: #fff;

}



.xl-wap-u-btn.btn-reg {

    background: var(--xl-bg-subtle);

    color: var(--xl-text-sub);

    border: 1px solid var(--xl-border);

}



/* 已登录会员状态 */

.xl-wap-u-top {

    display: flex;

    align-items: center;

    gap: 10px;

}



.xl-wap-u-badge {

    display: inline-flex;

    align-items: center;

    gap: 2px;

    padding: 2px 6px;

    border-radius: var(--xl-radius-full);

    font-size: 10px;

    font-weight: 600;

    background: rgba(37, 99, 235, 0.1);

    color: var(--xl-primary);

}



.xl-wap-u-stats {

    font-size: 12px;

    color: var(--xl-text-sub);

    margin-top: 4px;

}



.xl-wap-u-stats b {

    color: var(--xl-primary);

    font-weight: 700;

}



.xl-wap-u-stats .dot {

    margin: 0 4px;

    color: var(--xl-border);

}



.xl-wap-u-center-btn {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--xl-bg-subtle);

    border: 1px solid var(--xl-border);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--xl-text-sub);

    text-decoration: none;

}



.xl-wap-u-links {

    display: flex;

    align-items: center;

    justify-content: space-around;

    border-top: 1px dashed var(--xl-border);

    margin-top: 12px;

    padding-top: 10px;

}



.xl-wap-u-link-item {

    font-size: 12px;

    font-weight: 500;

    color: var(--xl-text-sub);

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 4px;

}



.xl-wap-u-link-item:hover,

.xl-wap-u-link-item:active {

    color: var(--xl-primary);

}



/* ==========================================================================

   5. 今日热门 / 本周热门 / 本月热门 Tabs 榜单 (Hot Rank Tabs)

   ========================================================================== */

.xl-wap-rank-card {

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-lg);

    padding: 14px;

    margin-bottom: 12px;

    box-shadow: var(--xl-shadow-sm);

}



.xl-wap-card-header {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    margin-bottom: 12px;

    padding-bottom: 8px;

    border-bottom: 1px solid var(--xl-border);

}



.xl-wap-card-title {

    font-size: 15px;

    font-weight: 700;

    color: var(--xl-text-main);

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-wap-card-title i {

    font-size: 16px;

}



.text-flame {

    color: var(--xl-flame) !important;

}



.xl-wap-rank-sub {

    font-size: 11px;

    color: var(--xl-text-muted);

}



/* 热门 Tabs 切换器 */

.xl-wap-rank-tabs {

    display: flex;

    background: var(--xl-bg-subtle);

    border-radius: var(--xl-radius-full);

    padding: 3px;

    margin-bottom: 12px;

    gap: 4px;

}



.xl-wap-rank-tab {

    flex: 1;

    border: none;

    background: transparent;

    padding: 6px 0;

    border-radius: var(--xl-radius-full);

    font-size: 12px;

    font-weight: 600;

    color: var(--xl-text-sub);

    cursor: pointer;

    transition: all 0.2s ease;

    text-align: center;

}



.xl-wap-rank-tab.active {

    background: var(--xl-bg-card);

    color: var(--xl-primary);

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

}



/* 排行列表项 */

.xl-wap-rank-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.xl-wap-rank-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 0;

    border-bottom: 1px solid var(--xl-border-light);

}



.xl-wap-rank-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.xl-wap-rank-badge {

    width: 22px;

    height: 22px;

    border-radius: 6px;

    background: var(--xl-bg-subtle);

    color: var(--xl-text-muted);

    font-size: 11px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.xl-wap-rank-badge.rank-top-1 {

    background: linear-gradient(135deg, #ef4444, #f97316);

    color: #ffffff;

    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);

}



.xl-wap-rank-badge.rank-top-2 {

    background: linear-gradient(135deg, #f97316, #f59e0b);

    color: #ffffff;

    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);

}



.xl-wap-rank-badge.rank-top-3 {

    background: linear-gradient(135deg, #3b82f6, #06b6d4);

    color: #ffffff;

    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);

}



.xl-wap-rank-link {

    flex: 1;

    font-size: 13px;

    color: var(--xl-text-main);

    text-decoration: none;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.xl-wap-rank-link:hover,

.xl-wap-rank-link:active {

    color: var(--xl-primary);

}



.xl-wap-rank-views {

    font-size: 11px;

    color: var(--xl-text-muted);

    flex-shrink: 0;

}



/* ==========================================================================

   6. 每日随机文章 & 实时热点卡片美化

   ========================================================================== */

.wap-discovery-card,

.itemBox.shadowBox {

    background: var(--xl-bg-card) !important;

    border: 1px solid var(--xl-border) !important;

    border-radius: var(--xl-radius-lg) !important;

    padding: 14px !important;

    margin-bottom: 12px !important;

    box-shadow: var(--xl-shadow-sm) !important;

}



.titleBox,

.wap-discovery-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

    padding-bottom: 8px;

    border-bottom: 1px solid var(--xl-border);

}



.titleBox h3,

.wap-discovery-title h3 {

    font-size: 15px !important;

    font-weight: 700 !important;

    color: var(--xl-text-main) !important;

    margin: 0 !important;

    display: flex;

    align-items: center;

    gap: 6px;

}



/* 每日随机文章 (双列缩略图卡片流) */

.xl-wap-random-grid {

    display: grid !important;

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 10px !important;

    padding: 6px 0 2px !important;

    width: 100% !important;

    box-sizing: border-box !important;

}



.xl-wap-random-card {

    display: flex !important;

    flex-direction: column !important;

    background: var(--xl-bg-card, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 8px) !important;

    overflow: hidden !important;

    text-decoration: none !important;

    transition: transform 0.2s ease, box-shadow 0.2s ease !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;

}



.xl-wap-random-card:active {

    transform: scale(0.98) !important;

}



.xl-wap-random-thumb {

    position: relative !important;

    width: 100% !important;

    aspect-ratio: 16 / 10 !important;

    background: #e2e8f0 !important;

    overflow: hidden !important;

}



.xl-wap-random-thumb img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

    transition: transform 0.3s ease !important;

}



.xl-wap-random-badge {

    position: absolute !important;

    top: 5px !important;

    left: 5px !important;

    padding: 1px 5px !important;

    background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%) !important;

    color: #ffffff !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    border-radius: 4px !important;

    line-height: 1.3 !important;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;

}



.xl-wap-random-info {

    padding: 8px 8px 8px !important;

    display: flex !important;

    flex-direction: column !important;

    flex: 1 !important;

    justify-content: space-between !important;

}



.xl-wap-random-title {

    font-size: 12.5px !important;

    font-weight: 600 !important;

    color: var(--xl-text-main, #1e293b) !important;

    line-height: 1.4 !important;

    margin: 0 !important;

    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;

    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;

    height: 35px !important;

}



.xl-wap-random-meta {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-top: 5px !important;

    font-size: 10.5px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

}



.xl-wap-random-meta span {

    display: inline-flex !important;

    align-items: center !important;

    gap: 3px !important;

}



html[data-theme-mode="night"] .xl-wap-random-card {

    background: #111822 !important;

    border-color: #243242 !important;

}



/* ==========================================================================

   18. Cloudflare Turnstile 新型人机验证组件

   ========================================================================== */

.xl-cf-turnstile-wrap {

    margin: 8px 0;

    width: 100%;

}



.xl-cf-card {

    display: inline-flex;

    align-items: center;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 8px 12px;

    gap: 10px;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    transition: all 0.2s ease;

    max-width: 100%;

    box-sizing: border-box;

}



.xl-cf-card:hover {

    background: #ffffff;

    border-color: #cbd5e1;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}



.xl-cf-checkbox {

    width: 22px;

    height: 22px;

    border: 2px solid #cbd5e1;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    position: relative;

    flex-shrink: 0;

    transition: all 0.2s;

}



.xl-cf-check-icon {

    display: none;

    color: #10b981;

    font-size: 14px;

}



.xl-cf-spinner {

    display: none;

    width: 14px;

    height: 14px;

    border: 2px solid #f38020;

    border-top-color: transparent;

    border-radius: 50%;

    animation: xlSpin 0.6s linear infinite;

}



.xl-cf-card.is-loading .xl-cf-spinner {

    display: block;

}



.xl-cf-card.is-loading .xl-cf-checkbox {

    border-color: transparent;

}



.xl-cf-card.is-verified {

    background: #ecfdf5;

    border-color: #a7f3d0;

}



.xl-cf-card.is-verified .xl-cf-checkbox {

    background: #d1fae5;

    border-color: #10b981;

}



.xl-cf-card.is-verified .xl-cf-check-icon {

    display: block;

}



.xl-cf-card.is-verified .xl-cf-text {

    color: #065f46;

    font-weight: 600;

}



.xl-cf-text {

    font-size: 12.5px;

    color: #475569;

    font-weight: 500;

    flex: 1;

}



.xl-cf-brand {

    display: flex;

    align-items: center;

    gap: 4px;

    border-left: 1px solid #e2e8f0;

    padding-left: 8px;

    margin-left: 4px;

    flex-shrink: 0;

}



.xl-cf-sub {

    font-size: 10px;

    color: #94a3b8;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



html[data-theme-mode="night"] .xl-cf-card {

    background: #1e293b;

    border-color: #334155;

}



html[data-theme-mode="night"] .xl-cf-checkbox {

    background: #0f172a;

    border-color: #475569;

}



html[data-theme-mode="night"] .xl-cf-text {

    color: #cbd5e1;

}



html[data-theme-mode="night"] .xl-cf-card.is-verified {

    background: rgba(16, 185, 129, 0.15);

    border-color: rgba(16, 185, 129, 0.3);

}



html[data-theme-mode="night"] .xl-cf-card.is-verified .xl-cf-text {

    color: #34d399;

}



@keyframes xlSpin {

    to { transform: rotate(360deg); }

}



html[data-theme-mode="night"] .xl-wap-random-thumb {

    background: #1e293b !important;

}



html[data-theme-mode="night"] .xl-wap-random-title {

    color: #e2e8f0 !important;

}



.wap-discovery-list li {

    padding: 8px 4px !important;

    border-bottom: 1px solid var(--xl-border-light) !important;

    display: flex !important;

    align-items: center !important;

}



/* 栏目文章列表排版与日期右对齐规范 (解决日期挤在左侧与图标重叠问题) */

.listArrow3 ul li,

.itemBox .listArrow3 ul li {

    padding: 9px 6px 9px 24px !important;

    border-bottom: 1px solid var(--xl-border-light, #f1f5f9) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    min-height: 38px !important;

    box-sizing: border-box !important;

    width: 100% !important;

    background-position: 2px center !important;

}



.listArrow3 ul li .fr,

.itemBox .listArrow3 ul li .fr,

.listArrow3 ul li div.fr,

.itemBox .listArrow3 ul li div.fr {

    order: 2 !important;

    margin-left: auto !important;

    float: none !important;

    flex-shrink: 0 !important;

    font-size: 11.5px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

    white-space: nowrap !important;

    padding-left: 10px !important;

    display: inline-block !important;

}



.listArrow3 ul li a,

.itemBox .listArrow3 ul li a {

    order: 1 !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

    font-size: 13.5px !important;

}

.listArrow3 ul li a:not([style*="color"]),

.itemBox .listArrow3 ul li a:not([style*="color"]) {

    color: var(--xl-text-main) !important;

}



.wap-discovery-list li a,

.itemUl li a,

.newList li a {

    text-decoration: none !important;

    font-size: 13px !important;

}

.wap-discovery-list li a:not([style*="color"]),

.itemUl li a:not([style*="color"]),

.newList li a:not([style*="color"]) {

    color: var(--xl-text-main) !important;

}



.wap-discovery-list li a:not([style*="color"]):hover,

.listArrow3 ul li a:not([style*="color"]):hover,

.itemUl li a:not([style*="color"]):hover,

.newList li a:not([style*="color"]):hover {

    color: var(--xl-primary) !important;

}



/* ==========================================================================

   7. 文章内容页现代化排版 (Article View & Author Header)

   ========================================================================== */

.newsArea.shadowBox,

.xl-article-card {

    background: var(--xl-bg-card) !important;

    border: 1px solid var(--xl-border) !important;

    border-radius: var(--xl-radius-lg) !important;

    padding: 16px 14px !important;

    margin-bottom: 12px !important;

    box-shadow: var(--xl-shadow-sm) !important;

}



/* 面包屑导航 */

.xl-wap-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px;

    font-size: 12px;

    color: var(--xl-text-muted);

    margin-bottom: 10px;

}



.xl-wap-breadcrumb a {

    color: var(--xl-text-sub);

    text-decoration: none;

}



.xl-wap-breadcrumb a:hover {

    color: var(--xl-primary);

}



/* 文章标题 */

#newsTitle,

.article-title h1 {

    font-size: 18px !important;

    font-weight: 700 !important;

    line-height: 1.45 !important;

    margin: 8px 0 12px 0 !important;

}



#newsTitle:not([style*="color"]),

.article-title h1:not([style*="color"]) {

    color: var(--xl-text-main) !important;

}



/* 社区论坛风格作者信息栏 (移动端响应式) */

.xl-forum-author-bar {

    display: flex;

    flex-direction: column;

    gap: 10px;

    background: var(--xl-bg-subtle);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-md);

    padding: 10px 12px;

    margin-bottom: 14px;

}



.xl-author-main-box {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

}



.xl-author-avatar-wrap {

    flex-shrink: 0;

}



.xl-author-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #ffffff;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}



.xl-author-info-col {

    flex: 1;

    min-width: 0;

}



.xl-author-name-line {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

}



.xl-author-name {

    font-size: 14px;

    font-weight: 700;

    color: var(--xl-text-main);

    text-decoration: none;

}



.xl-badge-user-type,

.xl-badge-level {

    font-size: 10px;

    padding: 1px 6px;

    border-radius: var(--xl-radius-full);

    font-weight: 600;

}



.xl-badge-user-type {

    background: rgba(37, 99, 235, 0.1);

    color: var(--xl-primary);

}



.xl-author-meta-line {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 11px;

    color: var(--xl-text-muted);

    margin-top: 3px;

}



.xl-meta-cell {

    display: inline-flex;

    align-items: center;

    gap: 3px;

}



/* 作者栏右侧动作按键 (关注 + 字号) */

.xl-author-side-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    border-top: 1px dashed var(--xl-border);

    padding-top: 8px;

    margin-top: 2px;

}



.xl-btn-follow {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    background: #eef2ff !important;

    color: #4338ca !important;

    border: 1px solid #c7d2fe !important;

    padding: 4px 12px !important;

    border-radius: var(--xl-radius-full) !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    cursor: pointer;

    transition: all 0.2s ease;

}



.xl-btn-follow.is-following {

    background: #f0fdf4 !important;

    color: #15803d !important;

    border-color: #bbf7d0 !important;

}



.xl-font-zoom-ctrl {

    display: inline-flex;

    align-items: center;

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-full);

    padding: 2px 8px;

    font-size: 12px;

    color: var(--xl-text-sub);

    cursor: pointer;

}



/* 正文区域优化 */

#newsContent {

    font-size: 16px !important;

    line-height: 1.8 !important;

    color: var(--xl-text-main) !important;

    word-break: break-word !important;

    margin: 12px 0 !important;

}



#newsContent p {

    margin-bottom: 12px !important;

    line-height: 1.8 !important;

}



#newsContent img {

    max-width: 100% !important;

    height: auto !important;

    border-radius: var(--xl-radius-md) !important;

    display: block;

    margin: 10px auto !important;

}



/* 网盘下载卡片美化 */

.quarkBox,

.contentFileBox,

.downBox {

    background: var(--xl-bg-subtle) !important;

    border: 1px solid var(--xl-border) !important;

    border-radius: var(--xl-radius-md) !important;

    padding: 12px !important;

    margin: 12px 0 !important;

}



/* 上一篇/下一篇导航卡片 */

.prevNext.shadowBox,

.article-prevnext {

    background: var(--xl-bg-card) !important;

    border: 1px solid var(--xl-border) !important;

    border-radius: var(--xl-radius-md) !important;

    padding: 10px 12px !important;

    margin-bottom: 12px !important;

    font-size: 13px !important;

    line-height: 1.8 !important;

}



.prevNext a,

.article-prevnext a {

    color: var(--xl-primary) !important;

    text-decoration: none !important;

    font-weight: 500;

}





/* ==========================================================================

   8. 社区回帖与讨论模块 (Community Reply System for WAP)

   ========================================================================== */

.replyBox.shadowBox,

.article-comment-card {

    background: var(--xl-bg-card) !important;

    border: 1px solid var(--xl-border) !important;

    border-radius: var(--xl-radius-lg) !important;

    padding: 14px !important;

    margin-bottom: 14px !important;

    box-shadow: var(--xl-shadow-sm) !important;

}



.xl-reply-thread-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 10px;

}



/* 回帖卡片 */

.xl-reply-item-card {

    display: flex;

    gap: 10px;

    background: var(--xl-bg-subtle);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-md);

    padding: 12px 10px;

}



.xl-reply-avatar-col {

    flex-shrink: 0;

}



.xl-reply-avatar-anchor {

    display: block;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    overflow: hidden;

    border: 1px solid var(--xl-border);

}



.xl-reply-avatar-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.xl-reply-main-col {

    flex: 1;

    min-width: 0;

}



.xl-reply-header-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 6px;

}



.xl-reply-user-meta {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

}



.xl-reply-author-name {

    font-size: 13px;

    font-weight: 700;

    color: var(--xl-text-main);

    text-decoration: none;

}



.xl-reply-author-name:hover {

    color: var(--xl-primary);

}



.xl-reply-badge {

    font-size: 10px;

    font-weight: 600;

    padding: 1px 5px;

    border-radius: var(--xl-radius-sm);

}



.xl-badge-lz {

    background: rgba(37, 99, 235, 0.12);

    color: var(--xl-primary);

}



.xl-badge-admin {

    background: rgba(239, 68, 68, 0.12);

    color: #ef4444;

}



.xl-badge-user {

    background: var(--xl-bg-card);

    color: var(--xl-text-muted);

    border: 1px solid var(--xl-border);

}



.xl-reply-time,

.xl-reply-ip {

    font-size: 11px;

    color: var(--xl-text-muted);

}



.xl-floor-tag {

    font-size: 11px;

    font-weight: 600;

    color: var(--xl-text-muted);

    padding: 2px 6px;

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-sm);

}



.xl-floor-tag.xl-floor-hot {

    background: rgba(239, 68, 68, 0.1);

    color: #ef4444;

    border-color: rgba(239, 68, 68, 0.2);

}



.xl-reply-body-text {

    font-size: 13px;

    line-height: 1.6;

    color: var(--xl-text-main);

    word-break: break-word;

    margin: 6px 0;

}



/* 引用块 */

.xl-reply-quote-wrap {

    background: var(--xl-bg-card);

    border-left: 3px solid var(--xl-primary);

    padding: 6px 8px;

    border-radius: var(--xl-radius-sm);

    font-size: 12px;

    color: var(--xl-text-sub);

    margin: 6px 0;

}



/* 官方回复卡 */

.xl-reply-official-box {

    background: var(--xl-primary-light);

    border: 1px solid var(--xl-primary-border);

    border-radius: var(--xl-radius-sm);

    padding: 6px 8px;

    font-size: 12px;

    color: var(--xl-primary);

    margin: 6px 0;

}



.xl-reply-action-bar {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 6px;

}



.xl-reply-act-btn {

    border: none;

    background: transparent;

    color: var(--xl-text-muted);

    font-size: 12px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 2px 6px;

    border-radius: var(--xl-radius-sm);

    transition: all 0.2s ease;

}



.xl-reply-act-btn:hover,

.xl-reply-act-btn:active {

    color: var(--xl-primary);

    background: var(--xl-bg-card);

}



/* 空状态 */

.xl-comments-empty {

    text-align: center;

    padding: 30px 16px;

    color: var(--xl-text-muted);

}



.xl-empty-icon {

    font-size: 36px;

    margin-bottom: 6px;

    opacity: 0.6;

}



.xl-empty-title {

    font-size: 14px;

    font-weight: 600;

    color: var(--xl-text-sub);

}



.xl-empty-desc {

    font-size: 12px;

    margin-top: 2px;

}



/* 登录提示卡 (未登录访客) */

.xl-reply-login-card {

    text-align: center;

    padding: 24px 14px;

    background: var(--xl-bg-subtle);

    border: 1px dashed var(--xl-border);

    border-radius: var(--xl-radius-lg);

    margin-top: 14px;

}



.xl-login-icon {

    font-size: 28px;

    color: var(--xl-text-muted);

    margin-bottom: 6px;

}



.xl-login-text {

    font-size: 13px;

    font-weight: 600;

    color: var(--xl-text-sub);

    margin-bottom: 12px;

}



.xl-login-btns {

    display: flex;

    justify-content: center;

    gap: 10px;

}



.xl-login-btn {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 6px 14px;

    border-radius: var(--xl-radius-full);

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.2s ease;

}



.xl-btn-in {

    background: var(--xl-primary);

    color: #ffffff !important;

}



.xl-btn-reg {

    background: var(--xl-bg-card);

    color: var(--xl-text-sub) !important;

    border: 1px solid var(--xl-border);

}



/* 移动端回帖编辑器卡片 */

.xl-forum-reply-card {

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-md);

    overflow: hidden;

    margin-top: 14px;

    box-shadow: var(--xl-shadow-sm);

}



.xl-quoted-banner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: var(--xl-primary-light);

    border-bottom: 1px solid var(--xl-primary-border);

    padding: 6px 10px;

    font-size: 11px;

    color: var(--xl-primary);

}



.xl-qb-close {

    background: transparent;

    border: none;

    color: #ef4444;

    font-size: 11px;

    cursor: pointer;

}



.xl-editor-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 6px 10px;

    background: var(--xl-bg-subtle);

    border-bottom: 1px solid var(--xl-border);

}



.xl-tb-actions {

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-tb-btn {

    width: 28px;

    height: 28px;

    border-radius: var(--xl-radius-sm);

    border: 1px solid var(--xl-border);

    background: var(--xl-bg-card);

    color: var(--xl-text-sub);

    font-size: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

}



.xl-tb-emoji-wrap {

    position: relative;

}



.xl-emoji-dropdown {

    display: none !important;

    position: absolute;

    top: 36px;

    left: 0;

    z-index: 1000;

    background: var(--xl-card-bg, #ffffff);

    border: 1px solid var(--xl-border, #e2e8f0);

    border-radius: var(--xl-radius-md, 8px);

    padding: 10px;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    width: 220px;

    box-sizing: border-box;

}



.xl-emoji-dropdown.is-active {

    display: flex !important;

    flex-wrap: wrap;

    gap: 8px;

    animation: xlFadeInDown 0.15s ease-out;

}



.xl-emoji-item {

    font-size: 20px;

    cursor: pointer;

    padding: 4px;

    border-radius: 6px;

    transition: background 0.15s, transform 0.15s;

    user-select: none;

    -webkit-user-select: none;

    line-height: 1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.xl-emoji-item:hover,

.xl-emoji-item:active {

    background: var(--xl-bg-subtle, #f1f5f9);

    transform: scale(1.25);

}



.xl-tb-counter {

    font-size: 11px;

    color: var(--xl-text-muted);

}



.xl-reply-textarea {

    width: 100%;

    box-sizing: border-box;

    border: none;

    outline: none;

    padding: 10px;

    font-size: 13px;

    line-height: 1.5;

    color: var(--xl-text-main);

    background: var(--xl-bg-card);

    min-height: 75px;

    resize: none;

}



.xl-editor-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 10px;

    background: var(--xl-bg-subtle);

    border-top: 1px solid var(--xl-border);

}



.xl-editor-footer-left {

    display: flex;

    align-items: center;

    gap: 8px;

}



.xl-user-chip {

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-user-chip-avatar {

    width: 22px;

    height: 22px;

    border-radius: 50%;

    object-fit: cover;

}



.xl-user-chip-name {

    font-size: 12px;

    font-weight: 600;

    color: var(--xl-text-main);

}



.xl-editor-vercode-wrap {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 11px;

    color: var(--xl-text-muted);

}



.xl-editor-footer-right {

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-btn-discard {

    background: transparent;

    border: 1px solid var(--xl-border);

    color: var(--xl-text-sub);

    padding: 4px 10px;

    border-radius: var(--xl-radius-sm);

    font-size: 12px;

    cursor: pointer;

}



.xl-btn-submit {

    background: var(--xl-primary);

    border: none;

    color: #ffffff;

    padding: 5px 12px;

    border-radius: var(--xl-radius-sm);

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

}



/* ==========================================================================

   9. 移动端主流 5 键吸底悬浮导航栏 (Bottom Fixed TabBar)

   ========================================================================== */

.xl-wap-bottom-bar {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    height: 52px;

    z-index: 999;

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-top: 1px solid var(--xl-border);

    display: flex;

    align-items: center;

    justify-content: space-around;

    padding-bottom: env(safe-area-inset-bottom, 0);

    box-sizing: content-box;

    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

}



html[data-theme-mode="night"] .xl-wap-bottom-bar {

    background: rgba(19, 27, 38, 0.96);

    border-top-color: var(--xl-border);

    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);

}



.xl-wap-tab-item {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: var(--xl-text-muted);

    font-size: 10px;

    font-weight: 500;

    height: 100%;

    transition: all 0.15s ease;

}



.xl-wap-tab-item i {

    font-size: 18px;

    margin-bottom: 2px;

    transition: transform 0.15s ease;

}



.xl-wap-tab-item.active,

.xl-wap-tab-item:active {

    color: var(--xl-primary) !important;

}



.xl-wap-tab-item.active i {

    transform: translateY(-2px);

}



/* 分类抽屉弹窗 (Category Drawer Modal) */

.xl-wap-drawer-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(4px);

    z-index: 9999999 !important;

    display: flex;

    align-items: flex-end;

}



.xl-wap-drawer-card {

    background: var(--xl-bg-card);

    width: 100%;

    border-radius: var(--xl-radius-lg) var(--xl-radius-lg) 0 0;

    padding: 16px;

    box-sizing: border-box;

    max-height: 80vh;

    overflow-y: auto;

    position: relative;

    z-index: 10000000 !important;

    animation: xlSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



@keyframes xlSlideUp {

    from { transform: translateY(100%); }

    to { transform: translateY(0); }

}



.xl-wap-drawer-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;

    padding-bottom: 8px;

    border-bottom: 1px solid var(--xl-border);

}



.xl-wap-drawer-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--xl-text-main);

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-wap-drawer-close {

    background: transparent;

    border: none;

    font-size: 20px;

    color: var(--xl-text-muted);

    cursor: pointer;

}



.xl-wap-drawer-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

}



.xl-wap-drawer-pill {

    padding: 10px;

    border-radius: var(--xl-radius-md);

    background: var(--xl-bg-subtle);

    border: 1px solid var(--xl-border);

    text-align: center;

    text-decoration: none;

    font-size: 13px;

    font-weight: 500;

    color: var(--xl-text-main);

}



.xl-wap-drawer-pill:active {

    background: var(--xl-primary);

    color: #fff;

}



/* 广告位包裹美化 (避免粗暴边框和破碎布局) */

.xl-ad-wrapper {

    margin: 8px 0;

    border-radius: var(--xl-radius-md);

    overflow: hidden;

    border: 1px solid var(--xl-border-light);

    background: var(--xl-bg-card);

}



.xl-ad-wrapper img {

    display: block;

    width: 100%;

    height: auto;

}





/* ==========================================================================

   10. WAP 内容页与互动组件优化 (Article Detail, Breadcrumbs, Prev/Next, Toast & Modal)

   ========================================================================== */

.xl-wap-news-container {

    padding-bottom: 72px !important;

}



.xl-wap-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    font-size: 12px;

    color: var(--xl-text-muted);

    padding: 8px 10px;

    background: var(--xl-bg-card);

    border-radius: var(--xl-radius-md);

    border: 1px solid var(--xl-border);

    margin-bottom: 10px;

}



.xl-wap-breadcrumb a {

    color: var(--xl-text-sub);

    text-decoration: none;

}



.xl-wap-breadcrumb a:hover {

    color: var(--xl-primary);

}



.xl-wap-breadcrumb .sep {

    color: var(--xl-border-dark);

    font-size: 10px;

}



.xl-wap-breadcrumb .curr {

    color: var(--xl-text-muted);

}



.xl-wap-article-card {

    background: var(--xl-bg-card) !important;

    border: 1px solid var(--xl-border) !important;

    border-radius: var(--xl-radius-lg) !important;

    padding: 14px 12px !important;

    margin-bottom: 12px !important;

    box-shadow: var(--xl-shadow-sm) !important;

}



.xl-wap-article-title {

    font-size: 19px !important;

    font-weight: 700 !important;

    line-height: 1.45 !important;

    color: var(--xl-text-main) !important;

    margin: 4px 0 12px 0 !important;

}



.xl-wap-ad-slot {

    margin: 10px 0 !important;

    text-align: center;

}



.xl-wap-tags-wrapper {

    margin: 12px 0;

    padding-top: 10px;

    border-top: 1px dashed var(--xl-border);

}



.xl-wap-prevnext-card {

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-md);

    padding: 12px;

    margin-bottom: 12px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.xl-pn-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

}



.xl-pn-badge {

    flex-shrink: 0;

    font-size: 11px;

    font-weight: 600;

    padding: 2px 8px;

    border-radius: var(--xl-radius-full);

    background: var(--xl-bg-subtle);

    color: var(--xl-text-sub);

    border: 1px solid var(--xl-border);

}



.xl-pn-link {

    flex: 1;

    min-width: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.xl-pn-link a {

    color: var(--xl-text-main);

    text-decoration: none;

    font-weight: 500;

}



.xl-pn-link a:hover {

    color: var(--xl-primary);

}



.xl-wap-comments-section {

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-lg);

    padding: 14px 12px;

    margin-bottom: 14px;

}



.xl-comments-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--xl-border);

    margin-bottom: 12px;

}



.xl-comments-title {

    font-size: 15px;

    font-weight: 700;

    color: var(--xl-text-main);

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-comments-title i {

    color: var(--xl-primary);

}



.xl-comments-badge {

    font-size: 12px;

    color: var(--xl-text-muted);

}



.reply-num-highlight {

    font-weight: 700;

    color: var(--xl-primary);

}



/* 作者栏右侧动作按键 (关注 + 私信 + 字号) */

.xl-author-actions-box {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    flex-wrap: wrap;

    border-top: 1px dashed var(--xl-border);

    padding-top: 8px;

    margin-top: 4px;

    width: 100%;

}



.xl-bar-btn-follow {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    background: #eef2ff !important;

    color: #4338ca !important;

    border: 1px solid #c7d2fe !important;

    padding: 3px 10px !important;

    border-radius: var(--xl-radius-full) !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    cursor: pointer;

    transition: all 0.2s ease;

}



.xl-bar-btn-follow.is-following {

    background: #f0fdf4 !important;

    color: #15803d !important;

    border-color: #bbf7d0 !important;

}



.xl-bar-btn-msg {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    background: var(--xl-bg-card) !important;

    color: var(--xl-text-sub) !important;

    border: 1px solid var(--xl-border) !important;

    padding: 3px 10px !important;

    border-radius: var(--xl-radius-full) !important;

    font-size: 12px !important;

    cursor: pointer;

}



.xl-font-zoom-box {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-full);

    padding: 2px 6px;

    font-size: 11px;

}



.xl-font-zoom-box .font-zoom-label {

    color: var(--xl-text-muted);

    margin-right: 2px;

}



.xl-font-zoom-box a {

    padding: 1px 6px;

    border-radius: 4px;

    color: var(--xl-text-sub);

    text-decoration: none;

    font-weight: 500;

    transition: all 0.15s ease;

}



.xl-font-zoom-box a.current {

    background: var(--xl-primary-light);

    color: var(--xl-primary);

    font-weight: 700;

}



/* 创作者名片浮层 (移动端弹层适配) */

.xl-author-popover-card {

    display: none;

    position: fixed !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 90% !important;

    max-width: 330px !important;

    z-index: 9999 !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;

    border-radius: var(--xl-radius-lg) !important;

    background: var(--xl-bg-card) !important;

    border: 1px solid var(--xl-border) !important;

    padding: 16px !important;

    box-sizing: border-box;

}



.xl-author-popover-card.is-visible {

    display: block !important;

    animation: xlModalScale 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.xl-ap-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}



.xl-ap-avatar-box {

    position: relative;

    width: 48px;

    height: 48px;

    flex-shrink: 0;

}



.xl-ap-avatar-box img {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

}



.xl-ap-lv-tag {

    position: absolute;

    bottom: -2px;

    right: -2px;

    font-size: 9px;

    padding: 1px 4px;

    border-radius: var(--xl-radius-full);

    background: var(--xl-primary);

    color: #fff;

    font-weight: 700;

}



.xl-ap-info {

    flex: 1;

    min-width: 0;

}



.xl-ap-name-row {

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-ap-username {

    font-size: 14px;

    font-weight: 700;

    color: var(--xl-text-main);

    text-decoration: none;

}



.xl-ap-group-pill {

    font-size: 10px;

    padding: 1px 5px;

    border-radius: var(--xl-radius-sm);

    background: var(--xl-primary-light);

    color: var(--xl-primary);

    font-weight: 600;

}



.xl-ap-motto {

    font-size: 11px;

    color: var(--xl-text-muted);

    margin-top: 3px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.xl-ap-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 6px;

    margin-bottom: 12px;

    background: var(--xl-bg-subtle);

    padding: 8px;

    border-radius: var(--xl-radius-md);

}



.xl-ap-stat-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    font-size: 11px;

}



.xl-ap-stat-label {

    color: var(--xl-text-muted);

}



.xl-ap-stat-val {

    font-weight: 700;

    color: var(--xl-text-main);

    margin-top: 2px;

}



.xl-ap-footer {

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-ap-footer button,

.xl-ap-footer a {

    flex: 1;

    text-align: center;

    padding: 6px 0;

    border-radius: var(--xl-radius-sm);

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    border: none;

}



.xl-ap-btn-msg {

    background: var(--xl-bg-subtle);

    color: var(--xl-text-sub);

    border: 1px solid var(--xl-border) !important;

}



.xl-ap-btn-follow {

    background: #eef2ff !important;

    color: #4338ca !important;

}



.xl-ap-btn-follow.is-following {

    background: #f0fdf4 !important;

    color: #15803d !important;

}



.xl-ap-btn-space {

    background: var(--xl-primary);

    color: #ffffff !important;

}



/* 模态框与弹层通用 */

.xl-modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 16px;

}



.xl-modal-card {

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-lg);

    width: 100%;

    max-width: 360px;

    box-shadow: var(--xl-shadow-lg);

    overflow: hidden;

    animation: xlModalScale 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



@keyframes xlModalScale {

    from { transform: scale(0.92); opacity: 0; }

    to { transform: scale(1); opacity: 1; }

}



.xl-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 16px;

    background: var(--xl-bg-subtle);

    border-bottom: 1px solid var(--xl-border);

}



.xl-modal-title {

    margin: 0;

    font-size: 15px;

    font-weight: 700;

    color: var(--xl-text-main);

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-modal-close {

    background: transparent;

    border: none;

    font-size: 20px;

    color: var(--xl-text-muted);

    cursor: pointer;

}



.xl-modal-body {

    padding: 14px 16px;

}



.xl-msg-target-row {

    font-size: 13px;

    margin-bottom: 10px;

    color: var(--xl-text-sub);

}



.xl-target-name {

    font-weight: 700;

    color: var(--xl-primary);

}



.xl-msg-textarea {

    width: 100%;

    height: 90px;

    box-sizing: border-box;

    border: 1px solid var(--xl-border);

    border-radius: var(--xl-radius-md);

    background: var(--xl-bg-subtle);

    color: var(--xl-text-main);

    padding: 10px;

    font-size: 13px;

    line-height: 1.5;

    outline: none;

    resize: none;

}



.xl-modal-footer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    padding: 10px 16px;

    background: var(--xl-bg-subtle);

    border-top: 1px solid var(--xl-border);

}



.xl-modal-btn {

    padding: 6px 14px;

    border-radius: var(--xl-radius-sm);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    border: none;

}



.xl-modal-btn.btn-cancel {

    background: var(--xl-bg-card);

    border: 1px solid var(--xl-border);

    color: var(--xl-text-sub);

}



.xl-modal-btn.btn-send {

    background: var(--xl-primary);

    color: #ffffff;

}



/* 浮动 Toast 提示 */

.xl-community-toast {

    position: fixed;

    top: 45%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.9);

    background: rgba(0, 0, 0, 0.85);

    color: #ffffff;

    padding: 10px 18px;

    border-radius: var(--xl-radius-full);

    font-size: 13px;

    font-weight: 600;

    z-index: 100000;

    opacity: 0;

    pointer-events: none;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    align-items: center;

    gap: 6px;

}



.xl-community-toast.is-active {

    transform: translate(-50%, -50%) scale(1);

    opacity: 1;

}





/* ==========================================================================

   11. 细节精细化对齐与样式补丁 (Avatar sizing, author bar typography, legacy bar suppression)

   ========================================================================== */

.bottomTools,

.bottomToolsArea,

#bottomToolsBox {

    display: none !important;

}



.xl-author-avatar-wrap {

    position: relative !important;

    width: 48px !important;

    height: 48px !important;

    flex-shrink: 0 !important;

}



.xl-avatar-anchor {

    display: block !important;

    width: 48px !important;

    height: 48px !important;

    position: relative !important;

    border-radius: 50% !important;

}



.xl-author-avatar-img {

    width: 48px !important;

    height: 48px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    border: 2px solid #ffffff !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

    display: block !important;

}



.xl-author-lv-badge {

    position: absolute !important;

    bottom: -2px !important;

    right: -2px !important;

    background: var(--xl-primary) !important;

    color: #ffffff !important;

    font-size: 9px !important;

    padding: 1px 4px !important;

    border-radius: var(--xl-radius-full) !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;

}



.xl-author-content-box {

    flex: 1 !important;

    min-width: 0 !important;

}



.xl-author-top-row {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    flex-wrap: wrap !important;

}



.xl-author-name-link {

    font-size: 14px !important;

    font-weight: 700 !important;

    color: var(--xl-text-main) !important;

    text-decoration: none !important;

}



.xl-tag-badge {

    font-size: 10px !important;

    padding: 1px 5px !important;

    border-radius: var(--xl-radius-sm) !important;

    font-weight: 600 !important;

}



.xl-tag-group {

    background: var(--xl-primary-light) !important;

    color: var(--xl-primary) !important;

}



.xl-author-bottom-row {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex-wrap: wrap !important;

    font-size: 11px !important;

    color: var(--xl-text-muted) !important;

    margin-top: 4px !important;

}



.xl-badge-ori {

    font-size: 10px !important;

    padding: 1px 5px !important;

    border-radius: var(--xl-radius-sm) !important;

    background: rgba(16, 185, 129, 0.12) !important;

    color: #10b981 !important;

    font-weight: 600 !important;

}









/* ==========================================================================

   12. 电脑端风格底部图标与组件对齐规范 (Download Box, MZSM, Fav/Report Pills, Action Card, Reaction Pack & Bottom Bar)

   ========================================================================== */



/* 1. 隐藏冗余信息与清除表格黑框 */

.addiTheme2 {

    display: none !important;

}



table:has(#newsMarkBtn),

table:has(#newsReportBtn) {

    border: none !important;

    background: transparent !important;

    margin: 16px auto 12px !important;

    display: flex !important;

    justify-content: center !important;

}



table:has(#newsMarkBtn) tbody,

table:has(#newsMarkBtn) tr,

table:has(#newsMarkBtn) td,

table:has(#newsReportBtn) tbody,

table:has(#newsReportBtn) tr,

table:has(#newsReportBtn) td {

    border: none !important;

    background: transparent !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 16px !important;

}



/* 2. 资源下载按钮浅色系美化 (对齐电脑端，清除旧版浮动和碎字) */

div[style*="border-bottom:1px #c9c9c9 solid"],

div[style*="border-bottom: 1px #c9c9c9 solid"] {

    display: none !important;

}



.down_btn,

.down_btn0,

.down_btn1,

.down_btn2 {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    height: auto !important;

    min-height: 40px !important;

    gap: 8px !important;

    padding: 8px 20px !important;

    border-radius: 8px !important;

    background: #e6f4ff !important;

    border: 1px solid #91caff !important;

    box-shadow: 0 2px 6px rgba(22, 119, 255, 0.08) !important;

    margin: 12px 0 16px !important;

    text-decoration: none !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    width: auto !important;

    float: none !important;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;

    box-sizing: border-box !important;

}



.down_btn::before,

.down_btn0::before,

.down_btn1::before,

.down_btn2::before {

    content: "📥" !important;

    font-size: 15px !important;

    line-height: 1 !important;

    display: inline-block !important;

    margin-right: 2px !important;

}



.down_btn:hover,

.down_btn0:hover,

.down_btn1:hover,

.down_btn2:hover {

    transform: translateY(-2px) !important;

    background: #d4edff !important;

    border-color: #69b1ff !important;

    box-shadow: 0 6px 14px rgba(22, 119, 255, 0.18) !important;

}



.down_left, .down_right, .down_left0, .down_right0,

.down_left1, .down_right1, .down_left2, .down_right2,

.down_hline, .down_hline0, .down_hline1, .down_hline2 {

    display: none !important;

    width: 0 !important;

    height: 0 !important;

}



.down_bg, .down_bg0,

.down_bg1, .down_bg2 {

    background: transparent !important;

    padding: 0 !important;

    margin: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    height: auto !important;

    line-height: normal !important;

    float: none !important;

    white-space: nowrap !important;

    width: auto !important;

}



.down_bg a,

.down_bg a b,

.down_bg0 a,

.down_bg0 a b,

.down_bg1 a,

.down_bg1 a b,

.down_bg2 a,

.down_bg2 a b {

    color: #1677ff !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    letter-spacing: 0.5px !important;

    white-space: nowrap !important;

    display: inline-block !important;

    line-height: normal !important;

}



html[data-theme-mode="night"] .down_btn,

html[data-theme-mode="night"] .down_btn0,

html[data-theme-mode="night"] .down_btn1,

html[data-theme-mode="night"] .down_btn2 {

    background: rgba(59, 130, 246, 0.16) !important;

    border-color: rgba(59, 130, 246, 0.38) !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;

}



html[data-theme-mode="night"] .down_btn:hover,

html[data-theme-mode="night"] .down_btn0:hover,

html[data-theme-mode="night"] .down_btn1:hover,

html[data-theme-mode="night"] .down_btn2:hover {

    background: rgba(59, 130, 246, 0.26) !important;

    border-color: #60a5fa !important;

}



html[data-theme-mode="night"] .down_bg a,

html[data-theme-mode="night"] .down_bg a b,

html[data-theme-mode="night"] .down_bg0 a,

html[data-theme-mode="night"] .down_bg0 a b,

html[data-theme-mode="night"] .down_bg1 a,

html[data-theme-mode="night"] .down_bg1 a b,

html[data-theme-mode="night"] .down_bg2 a,

html[data-theme-mode="night"] .down_bg2 a b {

    color: #93c5fd !important;

}



html[data-theme-mode="night"] .down_bg1 a b,

html[data-theme-mode="night"] .down_bg2 a b {

    color: #93c5fd !important;

}



/* 3. 免责声明与版权保护卡片 (对齐电脑端) */

.mzsm {

    margin: 20px 0 16px !important;

    padding: 14px 16px !important;

    background: var(--xl-bg-subtle, #f8fafc) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-left: 4px solid #f59e0b !important;

    border-radius: var(--xl-radius-md, 6px) !important;

    font-size: 13px !important;

    line-height: 1.8 !important;

    color: var(--xl-text-sub, #64748b) !important;

    box-sizing: border-box !important;

}



.mzsm::before {

    content: "⚠️ 免责声明与版权保护" !important;

    display: block !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    color: #d97706 !important;

    margin-bottom: 8px !important;

}



.mzsm p {

    margin: 0 !important;

    color: inherit !important;

    font-size: inherit !important;

    line-height: inherit !important;

    text-align: justify !important;

}



html[data-theme-mode="night"] .mzsm {

    background: #111822 !important;

    border-color: #243242 !important;

    border-left-color: #f59e0b !important;

    color: #94a3b8 !important;

}



html[data-theme-mode="night"] .mzsm::before {

    color: #fbbf24 !important;

}



/* 4. 收藏与举报药丸按钮 (对齐电脑端) */

.xl-action-btns-card {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 16px !important;

    margin: 18px auto 14px !important;

}



.xl-action-btn-item {

    position: relative !important;

    display: inline-block !important;

    margin: 0 !important;

}



.xl-btn-pill {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    height: 36px !important;

    padding: 0 18px !important;

    border-radius: 18px !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    letter-spacing: 0.5px !important;

    cursor: pointer !important;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;

    outline: none !important;

    border: 1px solid var(--xl-border, #cbd5e1) !important;

    background: var(--xl-bg-card, #ffffff) !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;

}



.xl-btn-pill svg {

    transition: transform 0.22s ease !important;

    flex-shrink: 0 !important;

}



.xl-btn-favorite {

    color: var(--xl-text-main, #334155) !important;

}



.xl-btn-favorite svg {

    color: #f43f5e !important;

}



.xl-btn-favorite:hover,

.xl-btn-favorite:active {

    color: #e11d48 !important;

    border-color: #fda4af !important;

    background: #fff1f2 !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.18) !important;

}



.xl-btn-report {

    color: var(--xl-text-main, #334155) !important;

}



.xl-btn-report svg {

    color: #d97706 !important;

}



.xl-btn-report:hover,

.xl-btn-report:active {

    color: #b45309 !important;

    border-color: #fde68a !important;

    background: #fffbeb !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.18) !important;

}



#funcReportBox > div {

    border-radius: 8px !important;

    border: 1px solid var(--xl-border, #cbd5e1) !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;

    padding: 10px 14px !important;

    background: var(--xl-bg-card, #ffffff) !important;

    line-height: 1.8 !important;

}



#funcReportBox a {

    color: var(--xl-text-sub, #475569) !important;

    font-size: 13px !important;

    text-decoration: none !important;

    display: block !important;

    padding: 2px 4px !important;

}



html[data-theme-mode="night"] .xl-btn-pill {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #cbd5e1 !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;

}



html[data-theme-mode="night"] .xl-btn-favorite:hover {

    background: rgba(244, 63, 94, 0.16) !important;

    border-color: rgba(244, 63, 94, 0.45) !important;

    color: #fda4af !important;

}



html[data-theme-mode="night"] .xl-btn-report:hover {

    background: rgba(245, 158, 11, 0.16) !important;

    border-color: rgba(245, 158, 11, 0.45) !important;

    color: #fde68a !important;

}



/* 5. 标签与分享卡片 (对齐电脑端 .article-action-card) */

.article-action-card,

.xl-wap-tags-wrapper .article-action-card {

    border-radius: var(--xl-radius-md, 8px) !important;

    background: var(--xl-bg-subtle, #f8fafc) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    padding: 14px 16px !important;

    margin: 16px 0 !important;

    box-sizing: border-box !important;

}



.article-tags {

    display: flex !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 8px !important;

}



.article-tags .font2_2 {

    font-size: 13px !important;

    font-weight: 600 !important;

    color: var(--xl-text-sub, #475569) !important;

    margin-right: 2px !important;

}



.article-tags a {

    display: inline-flex !important;

    align-items: center !important;

    padding: 4px 14px !important;

    border-radius: 14px !important;

    background: var(--xl-bg-card, #ffffff) !important;

    border: 1px solid var(--xl-border, #cbd5e1) !important;

    color: var(--xl-text-sub, #475569) !important;

    font-size: 12px !important;

    text-decoration: none !important;

    transition: all 0.2s ease !important;

}



.article-tags a:hover {

    color: var(--xl-primary, #1677ff) !important;

    border-color: var(--xl-primary, #1677ff) !important;

    background: #e6f4ff !important;

}



.article-share {

    margin-top: 12px !important;

    padding-top: 12px !important;

    border-top: 1px dashed var(--xl-border, #e2e8f0) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-wrap: wrap !important;

}



.article-share,

.sharethis-inline-share-buttons,

.sharethis-inline-share-buttons *,

[class*="sharethis"],

[class*="st-"],

[id*="sharethis"],

[id*="st-"] {

    z-index: 10 !important;

}



.sharethis-inline-share-buttons {

    text-align: center !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

}



.sharethis-inline-share-buttons .st-btn {

    border-radius: 16px !important;

    height: 32px !important;

    line-height: 32px !important;

    padding: 0 14px !important;

    margin: 0 3px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;

}



html[data-theme-mode="night"] .article-action-card {

    background: #111822 !important;

    border-color: #243242 !important;

}



/* ==========================================================================

   18. Cloudflare Turnstile 新型人机验证组件

   ========================================================================== */

.xl-cf-turnstile-wrap {

    margin: 8px 0;

    width: 100%;

}



.xl-cf-card {

    display: inline-flex;

    align-items: center;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 8px 12px;

    gap: 10px;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    transition: all 0.2s ease;

    max-width: 100%;

    box-sizing: border-box;

}



.xl-cf-card:hover {

    background: #ffffff;

    border-color: #cbd5e1;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}



.xl-cf-checkbox {

    width: 22px;

    height: 22px;

    border: 2px solid #cbd5e1;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    position: relative;

    flex-shrink: 0;

    transition: all 0.2s;

}



.xl-cf-check-icon {

    display: none;

    color: #10b981;

    font-size: 14px;

}



.xl-cf-spinner {

    display: none;

    width: 14px;

    height: 14px;

    border: 2px solid #f38020;

    border-top-color: transparent;

    border-radius: 50%;

    animation: xlSpin 0.6s linear infinite;

}



.xl-cf-card.is-loading .xl-cf-spinner {

    display: block;

}



.xl-cf-card.is-loading .xl-cf-checkbox {

    border-color: transparent;

}



.xl-cf-card.is-verified {

    background: #ecfdf5;

    border-color: #a7f3d0;

}



.xl-cf-card.is-verified .xl-cf-checkbox {

    background: #d1fae5;

    border-color: #10b981;

}



.xl-cf-card.is-verified .xl-cf-check-icon {

    display: block;

}



.xl-cf-card.is-verified .xl-cf-text {

    color: #065f46;

    font-weight: 600;

}



.xl-cf-text {

    font-size: 12.5px;

    color: #475569;

    font-weight: 500;

    flex: 1;

}



.xl-cf-brand {

    display: flex;

    align-items: center;

    gap: 4px;

    border-left: 1px solid #e2e8f0;

    padding-left: 8px;

    margin-left: 4px;

    flex-shrink: 0;

}



.xl-cf-sub {

    font-size: 10px;

    color: #94a3b8;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



html[data-theme-mode="night"] .xl-cf-card {

    background: #1e293b;

    border-color: #334155;

}



html[data-theme-mode="night"] .xl-cf-checkbox {

    background: #0f172a;

    border-color: #475569;

}



html[data-theme-mode="night"] .xl-cf-text {

    color: #cbd5e1;

}



html[data-theme-mode="night"] .xl-cf-card.is-verified {

    background: rgba(16, 185, 129, 0.15);

    border-color: rgba(16, 185, 129, 0.3);

}



html[data-theme-mode="night"] .xl-cf-card.is-verified .xl-cf-text {

    color: #34d399;

}



@keyframes xlSpin {

    to { transform: rotate(360deg); }

}



html[data-theme-mode="night"] .article-tags .font2_2 {

    color: #94a3b8 !important;

}



html[data-theme-mode="night"] .article-tags a {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #94a3b8 !important;

}



html[data-theme-mode="night"] .article-tags a:hover {

    background: #3b82f6 !important;

    color: #ffffff !important;

    border-color: #3b82f6 !important;

}



html[data-theme-mode="night"] .article-share {

    border-top-color: #243242 !important;

}



/* 6. 表态态度打分卡片全面对齐电脑端 (.article-vote-card) */

.article-vote-card,

#voteBox.article-vote-card {

    border-radius: var(--xl-radius-md, 8px) !important;

    background: var(--xl-bg-subtle, #f8fafc) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    padding: 20px 14px 18px !important;

    margin: 18px 0 16px !important;

    text-align: center !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

}



.xl-reaction-pack {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

    position: relative !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

}







.xl-reaction-item {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    background: transparent !important;

    border: none !important;

    cursor: pointer !important;

    padding: 0 !important;

    flex: 1 1 0 !important;

    max-width: 58px !important;

    min-width: 0 !important;

    width: auto !important;

    transition: all 0.22s ease !important;

}



.xl-reaction-face {

    width: 100% !important;

    max-width: 52px !important;

    height: 44px !important;

    border-radius: 8px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;

    border: none !important;

    transition: all 0.22s ease !important;

}



.xl-reaction-item:hover .xl-reaction-face,

.xl-reaction-item:active .xl-reaction-face {

    transform: translateY(-2px) scale(1.05) !important;

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16) !important;

}



.xl-reaction-hot .xl-reaction-face {

    background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%) !important;

    color: #ffffff !important;

}



.xl-reaction-top .xl-reaction-face {

    background: linear-gradient(135deg, #fa8c16 0%, #d4380d 100%) !important;

    color: #ffffff !important;

}



.xl-reaction-upper .xl-reaction-face {

    background: linear-gradient(135deg, #fadb14 0%, #d48806 100%) !important;

    color: #1e293b !important;

}



.xl-reaction-npc .xl-reaction-face {

    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;

    color: #ffffff !important;

}



.xl-reaction-pull .xl-reaction-face {

    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;

    color: #ffffff !important;

}



.xl-reaction-num {

    display: inline-block !important;

    margin-top: 6px !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    color: var(--xl-text-sub, #64748b) !important;

    font-style: normal !important;

    min-width: 26px !important;

    padding: 1px 6px !important;

    background: var(--xl-bg-card, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: 10px !important;

    text-align: center !important;

}



html[data-theme-mode="night"] .article-vote-card {

    background: #111822 !important;

    border-color: #243242 !important;

}



/* ==========================================================================

   18. Cloudflare Turnstile 新型人机验证组件

   ========================================================================== */

.xl-cf-turnstile-wrap {

    margin: 8px 0;

    width: 100%;

}



.xl-cf-card {

    display: inline-flex;

    align-items: center;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 8px 12px;

    gap: 10px;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    transition: all 0.2s ease;

    max-width: 100%;

    box-sizing: border-box;

}



.xl-cf-card:hover {

    background: #ffffff;

    border-color: #cbd5e1;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}



.xl-cf-checkbox {

    width: 22px;

    height: 22px;

    border: 2px solid #cbd5e1;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    position: relative;

    flex-shrink: 0;

    transition: all 0.2s;

}



.xl-cf-check-icon {

    display: none;

    color: #10b981;

    font-size: 14px;

}



.xl-cf-spinner {

    display: none;

    width: 14px;

    height: 14px;

    border: 2px solid #f38020;

    border-top-color: transparent;

    border-radius: 50%;

    animation: xlSpin 0.6s linear infinite;

}



.xl-cf-card.is-loading .xl-cf-spinner {

    display: block;

}



.xl-cf-card.is-loading .xl-cf-checkbox {

    border-color: transparent;

}



.xl-cf-card.is-verified {

    background: #ecfdf5;

    border-color: #a7f3d0;

}



.xl-cf-card.is-verified .xl-cf-checkbox {

    background: #d1fae5;

    border-color: #10b981;

}



.xl-cf-card.is-verified .xl-cf-check-icon {

    display: block;

}



.xl-cf-card.is-verified .xl-cf-text {

    color: #065f46;

    font-weight: 600;

}



.xl-cf-text {

    font-size: 12.5px;

    color: #475569;

    font-weight: 500;

    flex: 1;

}



.xl-cf-brand {

    display: flex;

    align-items: center;

    gap: 4px;

    border-left: 1px solid #e2e8f0;

    padding-left: 8px;

    margin-left: 4px;

    flex-shrink: 0;

}



.xl-cf-sub {

    font-size: 10px;

    color: #94a3b8;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



html[data-theme-mode="night"] .xl-cf-card {

    background: #1e293b;

    border-color: #334155;

}



html[data-theme-mode="night"] .xl-cf-checkbox {

    background: #0f172a;

    border-color: #475569;

}



html[data-theme-mode="night"] .xl-cf-text {

    color: #cbd5e1;

}



html[data-theme-mode="night"] .xl-cf-card.is-verified {

    background: rgba(16, 185, 129, 0.15);

    border-color: rgba(16, 185, 129, 0.3);

}



html[data-theme-mode="night"] .xl-cf-card.is-verified .xl-cf-text {

    color: #34d399;

}



@keyframes xlSpin {

    to { transform: rotate(360deg); }

}



html[data-theme-mode="night"] 



html[data-theme-mode="night"] .xl-reaction-num {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #94a3b8 !important;

}



/* 7. 吸底 5 键导航栏桌面视口居中约束 */

.xl-wap-bottom-bar {

    left: 50% !important;

    right: auto !important;

    transform: translateX(-50%) !important;

    max-width: 600px !important;

    width: 100% !important;

}



/* ==========================================================================

   13. 独立分类大厅聚合页面规范 (Category Hub Page)

   ========================================================================== */

.xl-wap-cat-page {

    display: flex;

    flex-direction: column;

    gap: 12px;

    padding: 10px 0 20px;

    width: 100%;

    box-sizing: border-box;

}



.xl-wap-cat-overview {

    background: var(--xl-bg-card, #ffffff);

    border: 1px solid var(--xl-border, #e2e8f0);

    border-radius: var(--xl-radius-md, 8px);

    padding: 14px 16px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

}



.xl-wap-cat-overview-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--xl-text-main, #1e293b);

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 4px;

}



.xl-wap-cat-overview-desc {

    font-size: 12px;

    color: var(--xl-text-muted, #94a3b8);

    line-height: 1.5;

}



.xl-wap-cat-overview-desc b {

    color: var(--xl-primary, #1677ff);

    font-weight: 600;

}



.xl-wap-cat-card {

    background: var(--xl-bg-card, #ffffff);

    border: 1px solid var(--xl-border, #e2e8f0);

    border-radius: var(--xl-radius-md, 8px);

    padding: 14px 14px 12px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

}



.xl-wap-cat-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

}



.xl-wap-cat-primary {

    display: flex;

    align-items: center;

    gap: 10px;

}



.xl-wap-cat-icon {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    flex-shrink: 0;

}



.xl-wap-cat-info {

    display: flex;

    flex-direction: column;

}



.xl-wap-cat-name {

    font-size: 15px;

    font-weight: 700;

    color: var(--xl-text-main, #1e293b);

    margin: 0;

    line-height: 1.2;

}



.xl-wap-cat-count {

    font-size: 11px;

    color: var(--xl-text-muted, #94a3b8);

    margin-top: 2px;

}



.xl-wap-cat-more {

    font-size: 12px;

    font-weight: 600;

    color: var(--xl-primary, #1677ff);

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 4px 8px;

    background: rgba(22, 119, 255, 0.06);

    border-radius: 6px;

}



.xl-wap-cat-subgrid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;

    padding-top: 10px;

    border-top: 1px dashed var(--xl-border-light, #f1f5f9);

}



.xl-wap-subcat-pill {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 12px;

    background: var(--xl-bg-subtle, #f8fafc);

    border: 1px solid var(--xl-border-light, #f1f5f9);

    border-radius: 6px;

    text-decoration: none;

    transition: all 0.2s ease;

}



.xl-wap-subcat-pill:active {

    background: var(--xl-border-light, #e2e8f0);

}



.xl-wap-subcat-name {

    font-size: 12.5px;

    font-weight: 500;

    color: var(--xl-text-main, #334155);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.xl-wap-subcat-num {

    font-size: 10.5px;

    font-weight: 600;

    color: var(--xl-text-muted, #94a3b8);

    padding: 1px 6px;

    background: var(--xl-bg-card, #ffffff);

    border-radius: 10px;

    border: 1px solid var(--xl-border, #e2e8f0);

    margin-left: 6px;

    flex-shrink: 0;

}



html[data-theme-mode="night"] .xl-wap-cat-overview,

html[data-theme-mode="night"] .xl-wap-cat-card {

    background: #111822 !important;

    border-color: #243242 !important;

}



/* ==========================================================================

   18. Cloudflare Turnstile 新型人机验证组件

   ========================================================================== */

.xl-cf-turnstile-wrap {

    margin: 8px 0;

    width: 100%;

}



.xl-cf-card {

    display: inline-flex;

    align-items: center;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 8px 12px;

    gap: 10px;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    transition: all 0.2s ease;

    max-width: 100%;

    box-sizing: border-box;

}



.xl-cf-card:hover {

    background: #ffffff;

    border-color: #cbd5e1;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}



.xl-cf-checkbox {

    width: 22px;

    height: 22px;

    border: 2px solid #cbd5e1;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    position: relative;

    flex-shrink: 0;

    transition: all 0.2s;

}



.xl-cf-check-icon {

    display: none;

    color: #10b981;

    font-size: 14px;

}



.xl-cf-spinner {

    display: none;

    width: 14px;

    height: 14px;

    border: 2px solid #f38020;

    border-top-color: transparent;

    border-radius: 50%;

    animation: xlSpin 0.6s linear infinite;

}



.xl-cf-card.is-loading .xl-cf-spinner {

    display: block;

}



.xl-cf-card.is-loading .xl-cf-checkbox {

    border-color: transparent;

}



.xl-cf-card.is-verified {

    background: #ecfdf5;

    border-color: #a7f3d0;

}



.xl-cf-card.is-verified .xl-cf-checkbox {

    background: #d1fae5;

    border-color: #10b981;

}



.xl-cf-card.is-verified .xl-cf-check-icon {

    display: block;

}



.xl-cf-card.is-verified .xl-cf-text {

    color: #065f46;

    font-weight: 600;

}



.xl-cf-text {

    font-size: 12.5px;

    color: #475569;

    font-weight: 500;

    flex: 1;

}



.xl-cf-brand {

    display: flex;

    align-items: center;

    gap: 4px;

    border-left: 1px solid #e2e8f0;

    padding-left: 8px;

    margin-left: 4px;

    flex-shrink: 0;

}



.xl-cf-sub {

    font-size: 10px;

    color: #94a3b8;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



html[data-theme-mode="night"] .xl-cf-card {

    background: #1e293b;

    border-color: #334155;

}



html[data-theme-mode="night"] .xl-cf-checkbox {

    background: #0f172a;

    border-color: #475569;

}



html[data-theme-mode="night"] .xl-cf-text {

    color: #cbd5e1;

}



html[data-theme-mode="night"] .xl-cf-card.is-verified {

    background: rgba(16, 185, 129, 0.15);

    border-color: rgba(16, 185, 129, 0.3);

}



html[data-theme-mode="night"] .xl-cf-card.is-verified .xl-cf-text {

    color: #34d399;

}



@keyframes xlSpin {

    to { transform: rotate(360deg); }

}



html[data-theme-mode="night"] .xl-wap-cat-name,

html[data-theme-mode="night"] .xl-wap-cat-overview-title {

    color: #f1f5f9 !important;

}



html[data-theme-mode="night"] .xl-wap-cat-subgrid {

    border-top-color: #243242 !important;

}



html[data-theme-mode="night"] .xl-wap-subcat-pill {

    background: #16202e !important;

    border-color: #243242 !important;

}



html[data-theme-mode="night"] .xl-wap-subcat-name {

    color: #cbd5e1 !important;

}



html[data-theme-mode="night"] .xl-wap-subcat-num {

    background: #111822 !important;

    border-color: #2d3d52 !important;

    color: #94a3b8 !important;

}



/* ==========================================================================

   14. 顶部广告群与格子广告夜间/响应式规范 (Top Ad Group & Text Ads Grid)

   ========================================================================== */

.xl-top-ad-group {

    margin-bottom: 8px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.xl-top-ad-group img {

    max-width: 100%;

    display: block;

    border-radius: 4px;

}



.xl-top-ad-group table {

    table-layout: fixed !important;

    width: 100% !important;

    border-collapse: collapse !important;

    background-color: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #cbd5e1) !important;

    border-radius: 6px !important;

    overflow: hidden !important;

    margin-top: 4px !important;

    margin-bottom: 4px !important;

}



.xl-top-ad-group table td {

    height: 35px !important;

    word-wrap: break-word !important;

    border: 1px solid var(--xl-border, #cbd5e1) !important;

    text-align: center !important;

    padding: 2px !important;

    box-sizing: border-box !important;

}



.xl-top-ad-group table td a {

    display: block !important;

    text-decoration: none !important;

    line-height: 1.2 !important;

}



.xl-top-ad-group table td a span {

    font-size: 10.5px !important;

}



.xl-top-ad-group table td a span:not([style*="color"]) {

    color: var(--xl-text-main, #1e293b) !important;

}



html[data-theme-mode="night"] .xl-top-ad-group table {

    background-color: #111822 !important;

    border-color: #243242 !important;

}



html[data-theme-mode="night"] .xl-top-ad-group table td {

    border-color: #243242 !important;

}



html[data-theme-mode="night"] .xl-top-ad-group table td a span:not([style*="color"]) {

    color: #cbd5e1 !important;

}



html[data-theme-mode="night"] .xl-top-ad-group div[style*="azure"] {

    background-color: #1e293b !important;

}



/* ==========================================================================

   15. WAP 文章列表与卡片流设计 (WAP Article News List Cards)

   ========================================================================== */

.xl-wap-news-list {

    list-style: none !important;

    padding: 0 !important;

    margin: 8px 0 16px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

}



.xl-wap-news-item {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-lg, 10px) !important;

    padding: 12px 10px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;

    box-sizing: border-box !important;

    width: 100% !important;

    transition: transform 0.2s, box-shadow 0.2s !important;

}



.xl-wap-news-item:active {

    background: var(--xl-bg-subtle, #f8fafc) !important;

}



.xl-wap-item-wrap {

    display: flex !important;

    align-items: stretch !important;

    gap: 12px !important;

    width: 100% !important;

}



/* 左侧缩略预览图 */

.xl-wap-item-thumb {

    position: relative !important;

    flex: 0 0 115px !important;

    width: 115px !important;

    height: 82px !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    background: #f1f5f9 !important;

    display: block !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;

}



.xl-wap-item-thumb img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

}



.xl-wap-card-badge {

    position: absolute !important;

    top: 4px !important;

    left: 4px !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    padding: 1px 5px !important;

    border-radius: 4px !important;

    color: #ffffff !important;

    line-height: 1.3 !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;

}



.xl-wap-card-badge.top {

    background: linear-gradient(135deg, #ef4444, #dc2626) !important;

}



.xl-wap-card-badge.recom {

    background: linear-gradient(135deg, #f59e0b, #d97706) !important;

}



/* 右侧内容信息区 */

.xl-wap-item-info {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

}



.xl-wap-item-head {

    display: flex !important;

    align-items: flex-start !important;

    justify-content: space-between !important;

    gap: 8px !important;

}



.xl-wap-item-title {

    font-size: 14.5px !important;

    font-weight: 700 !important;

    color: var(--xl-text-main, #1e293b) !important;

    line-height: 1.35 !important;

    margin: 0 !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 1 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    flex: 1 1 auto !important;

}



.xl-wap-item-title a {

    color: inherit !important;

    text-decoration: none !important;

}



.xl-wap-item-date {

    flex: 0 0 auto !important;

    font-size: 11px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

    white-space: nowrap !important;

    padding-top: 1px !important;

}



.xl-wap-item-desc {

    font-size: 11.5px !important;

    line-height: 1.45 !important;

    color: var(--xl-text-sub, #64748b) !important;

    margin: 4px 0 6px !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

}



.xl-wap-item-foot {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 6px !important;

    margin-top: auto !important;

}



.xl-wap-card-tags {

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    flex: 1 1 auto !important;

}



.xl-wap-tag-lbl {

    font-size: 10.5px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

}



.xl-wap-card-tag {

    font-size: 10.5px !important;

    color: var(--xl-text-sub, #475569) !important;

    background: var(--xl-bg-subtle, #f1f5f9) !important;

    padding: 1px 6px !important;

    border-radius: 4px !important;

    text-decoration: none !important;

    border: 1px solid var(--xl-border-light, #e2e8f0) !important;

    line-height: 1.3 !important;

}



.xl-wap-item-more {

    margin-left: auto !important;

    flex: 0 0 auto !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    color: var(--xl-primary, #2563eb) !important;

    background: rgba(37, 99, 235, 0.08) !important;

    border: 1px solid rgba(37, 99, 235, 0.2) !important;

    border-radius: 4px !important;

    padding: 2px 8px !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    height: 22px !important;

    box-sizing: border-box !important;

    transition: all 0.2s !important;

}



.xl-wap-item-more:active {

    background: var(--xl-primary, #2563eb) !important;

    color: #ffffff !important;

}



html[data-theme-mode="night"] .xl-wap-item-more {

    background: rgba(59, 130, 246, 0.15) !important;

    border-color: rgba(59, 130, 246, 0.35) !important;

    color: #60a5fa !important;

}



/* 子分类与面包屑导航美化 */

.listSubMenu {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 8px) !important;

    padding: 8px 10px !important;

    margin: 6px 0 8px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;

}



.listSubMenu ul {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

    padding: 0 !important;

    margin: 0 !important;

    list-style: none !important;

}



.listSubMenu ul li {

    float: none !important;

    width: auto !important;

    background: none !important;

    border: none !important;

    padding: 0 !important;

}



.listSubMenu ul li a {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    height: 28px !important;

    line-height: 28px !important;

    padding: 0 12px !important;

    border-radius: 9999px !important;

    background: var(--xl-bg-subtle, #f1f5f9) !important;

    color: var(--xl-text-main, #334155) !important;

    font-size: 12px !important;

    font-weight: 500 !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    text-decoration: none !important;

}



.listSubMenu ul li a:hover,

.listSubMenu ul li a.active {

    background: var(--xl-primary, #2563eb) !important;

    color: #ffffff !important;

    border-color: var(--xl-primary, #2563eb) !important;

}



.pointBox.shadowBox {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 8px) !important;

    padding: 10px 14px !important;

    margin-bottom: 10px !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;

}



.pointBox h3 {

    font-size: 13px !important;

    color: var(--xl-text-sub, #64748b) !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

}



.pointBox h3 a {

    color: var(--xl-text-main, #1e293b) !important;

    text-decoration: none !important;

}



/* 分页容器美化 */

.xl-wap-page-box {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 8px) !important;

    padding: 10px !important;

    margin-top: 10px !important;

    margin-bottom: 20px !important;

}



/* 暗黑模式适配 */

html[data-theme-mode="night"] .xl-wap-news-item,

html[data-theme-mode="night"] .listSubMenu,

html[data-theme-mode="night"] .pointBox.shadowBox,

html[data-theme-mode="night"] .xl-wap-page-box {

    background: #111822 !important;

    border-color: #243242 !important;

}



/* ==========================================================================

   18. Cloudflare Turnstile 新型人机验证组件

   ========================================================================== */

.xl-cf-turnstile-wrap {

    margin: 8px 0;

    width: 100%;

}



.xl-cf-card {

    display: inline-flex;

    align-items: center;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 8px 12px;

    gap: 10px;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    transition: all 0.2s ease;

    max-width: 100%;

    box-sizing: border-box;

}



.xl-cf-card:hover {

    background: #ffffff;

    border-color: #cbd5e1;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}



.xl-cf-checkbox {

    width: 22px;

    height: 22px;

    border: 2px solid #cbd5e1;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    position: relative;

    flex-shrink: 0;

    transition: all 0.2s;

}



.xl-cf-check-icon {

    display: none;

    color: #10b981;

    font-size: 14px;

}



.xl-cf-spinner {

    display: none;

    width: 14px;

    height: 14px;

    border: 2px solid #f38020;

    border-top-color: transparent;

    border-radius: 50%;

    animation: xlSpin 0.6s linear infinite;

}



.xl-cf-card.is-loading .xl-cf-spinner {

    display: block;

}



.xl-cf-card.is-loading .xl-cf-checkbox {

    border-color: transparent;

}



.xl-cf-card.is-verified {

    background: #ecfdf5;

    border-color: #a7f3d0;

}



.xl-cf-card.is-verified .xl-cf-checkbox {

    background: #d1fae5;

    border-color: #10b981;

}



.xl-cf-card.is-verified .xl-cf-check-icon {

    display: block;

}



.xl-cf-card.is-verified .xl-cf-text {

    color: #065f46;

    font-weight: 600;

}



.xl-cf-text {

    font-size: 12.5px;

    color: #475569;

    font-weight: 500;

    flex: 1;

}



.xl-cf-brand {

    display: flex;

    align-items: center;

    gap: 4px;

    border-left: 1px solid #e2e8f0;

    padding-left: 8px;

    margin-left: 4px;

    flex-shrink: 0;

}



.xl-cf-sub {

    font-size: 10px;

    color: #94a3b8;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



html[data-theme-mode="night"] .xl-cf-card {

    background: #1e293b;

    border-color: #334155;

}



html[data-theme-mode="night"] .xl-cf-checkbox {

    background: #0f172a;

    border-color: #475569;

}



html[data-theme-mode="night"] .xl-cf-text {

    color: #cbd5e1;

}



html[data-theme-mode="night"] .xl-cf-card.is-verified {

    background: rgba(16, 185, 129, 0.15);

    border-color: rgba(16, 185, 129, 0.3);

}



html[data-theme-mode="night"] .xl-cf-card.is-verified .xl-cf-text {

    color: #34d399;

}



@keyframes xlSpin {

    to { transform: rotate(360deg); }

}



html[data-theme-mode="night"] .xl-wap-item-thumb {

    background: #1e293b !important;

}



html[data-theme-mode="night"] .xl-wap-item-title {

    color: #f1f5f9 !important;

}



html[data-theme-mode="night"] .xl-wap-item-desc {

    color: #94a3b8 !important;

}



html[data-theme-mode="night"] .xl-wap-card-tag {

    background: #16202e !important;

    border-color: #243242 !important;

    color: #cbd5e1 !important;

}



html[data-theme-mode="night"] .listSubMenu ul li a {

    background: #16202e !important;

    border-color: #243242 !important;

    color: #cbd5e1 !important;

}



/* ==========================================================================

   16. 文章底部分享按钮重构与对齐 (WAP Article Share Buttons)

   ========================================================================== */

.article-share {

    margin-top: 16px !important;

    padding: 14px 10px !important;

    border-top: 1px dashed var(--xl-border, #e2e8f0) !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

}



.article-share::before {

    content: "分享给好友：" !important;

    display: block !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    color: var(--xl-text-muted, #94a3b8) !important;

    margin-bottom: 4px !important;

}



.sharethis-inline-share-buttons {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-wrap: nowrap !important;

    gap: 8px !important;

    padding: 4px 0 !important;

    margin: 0 !important;

    width: 100% !important;

}



.sharethis-inline-share-buttons .st-btn {

    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    max-width: 38px !important;

    flex-shrink: 0 !important;

    border-radius: 50% !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    margin: 0 !important;

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;

    transition: transform 0.2s, box-shadow 0.2s !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    position: relative !important;

}



.sharethis-inline-share-buttons .st-btn:active {

    transform: scale(0.92) !important;

}



.sharethis-inline-share-buttons .st-btn img {

    position: static !important;

    top: 0 !important;

    left: 0 !important;

    margin: 0 auto !important;

    width: 20px !important;

    height: 20px !important;

    max-width: 20px !important;

    max-height: 20px !important;

    object-fit: contain !important;

    display: block !important;

    vertical-align: middle !important;

}



.sharethis-inline-share-buttons .st-btn .st-label {

    display: none !important;

}



html[data-theme-mode="night"] .sharethis-inline-share-buttons .st-btn {

    background: #1e293b !important;

    border-color: #334155 !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;

}



/* ==========================================================================

   17. 文章页底部卡片流对齐规范 (WAP Article Bottom Alignment Fix)

   ========================================================================== */

.xl-wap-news-container {

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    padding: 0 8px !important;

    margin: 0 auto !important;

}



.xl-wap-news-container .newsArea,

.xl-wap-news-container .xl-wap-article-card,

.xl-wap-news-container .xl-wap-prevnext-card,

.xl-wap-news-container .replyBox,

.xl-wap-news-container .xl-wap-comments-section,

.xl-wap-news-container .article-vote-card {

    box-sizing: border-box !important;

    width: 100% !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    border-radius: var(--xl-radius-lg, 12px) !important;

}



.xl-wap-news-container .replyBox,

.xl-wap-news-container .xl-wap-comments-section {

    padding: 16px 14px !important;

    margin-top: 12px !important;

    margin-bottom: 16px !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    background: var(--xl-card-bg, #ffffff) !important;

    box-shadow: var(--xl-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05)) !important;

}



html[data-theme-mode="night"] .xl-wap-news-container .replyBox,

html[data-theme-mode="night"] .xl-wap-news-container .xl-wap-comments-section {

    background: #111822 !important;

    border-color: #243242 !important;

}



/* ==========================================================================

   18. Cloudflare Turnstile 新型人机验证组件

   ========================================================================== */

.xl-cf-turnstile-wrap {

    margin: 8px 0;

    width: 100%;

}



.xl-cf-card {

    display: inline-flex;

    align-items: center;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 8px 12px;

    gap: 10px;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    transition: all 0.2s ease;

    max-width: 100%;

    box-sizing: border-box;

}



.xl-cf-card:hover {

    background: #ffffff;

    border-color: #cbd5e1;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}



.xl-cf-checkbox {

    width: 22px;

    height: 22px;

    border: 2px solid #cbd5e1;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    position: relative;

    flex-shrink: 0;

    transition: all 0.2s;

}



.xl-cf-check-icon {

    display: none;

    color: #10b981;

    font-size: 14px;

}



.xl-cf-spinner {

    display: none;

    width: 14px;

    height: 14px;

    border: 2px solid #f38020;

    border-top-color: transparent;

    border-radius: 50%;

    animation: xlSpin 0.6s linear infinite;

}



.xl-cf-card.is-loading .xl-cf-spinner {

    display: block;

}



.xl-cf-card.is-loading .xl-cf-checkbox {

    border-color: transparent;

}



.xl-cf-card.is-verified {

    background: #ecfdf5;

    border-color: #a7f3d0;

}



.xl-cf-card.is-verified .xl-cf-checkbox {

    background: #d1fae5;

    border-color: #10b981;

}



.xl-cf-card.is-verified .xl-cf-check-icon {

    display: block;

}



.xl-cf-card.is-verified .xl-cf-text {

    color: #065f46;

    font-weight: 600;

}



.xl-cf-text {

    font-size: 12.5px;

    color: #475569;

    font-weight: 500;

    flex: 1;

}



.xl-cf-brand {

    display: flex;

    align-items: center;

    gap: 4px;

    border-left: 1px solid #e2e8f0;

    padding-left: 8px;

    margin-left: 4px;

    flex-shrink: 0;

}



.xl-cf-sub {

    font-size: 10px;

    color: #94a3b8;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



html[data-theme-mode="night"] .xl-cf-card {

    background: #1e293b;

    border-color: #334155;

}



html[data-theme-mode="night"] .xl-cf-checkbox {

    background: #0f172a;

    border-color: #475569;

}



html[data-theme-mode="night"] .xl-cf-text {

    color: #cbd5e1;

}



html[data-theme-mode="night"] .xl-cf-card.is-verified {

    background: rgba(16, 185, 129, 0.15);

    border-color: rgba(16, 185, 129, 0.3);

}



html[data-theme-mode="night"] .xl-cf-card.is-verified .xl-cf-text {

    color: #34d399;

}



@keyframes xlSpin {

    to { transform: rotate(360deg); }

}







/* ==========================================================================

   热门排行榜专区 (Hot Ranking Hall) & 社区互动大厅 (Community Hub)

   ========================================================================== */



/* 头部视觉卡片 */

.xl-wap-hot-hero,

.xl-wap-comm-hero {

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%) !important;

    border: 1px solid rgba(37, 99, 235, 0.15) !important;

    border-radius: var(--xl-radius-lg, 12px) !important;

    padding: 14px 16px !important;

    margin: 8px 0 12px !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;

}



.xl-wap-hot-hero-title,

.xl-wap-comm-hero-title {

    font-size: 16px !important;

    font-weight: 700 !important;

    color: var(--xl-text-main, #1e293b) !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

}



.xl-wap-hot-hero-desc,

.xl-wap-comm-hero-desc {

    font-size: 11.5px !important;

    color: var(--xl-text-muted, #64748b) !important;

    margin-top: 4px !important;

    line-height: 1.4 !important;

}



/* 分段切换按钮器 (Segmented Switcher) */

.xl-wap-hot-switch,

.xl-wap-comm-switch {

    display: flex !important;

    background: var(--xl-bg-subtle, #f1f5f9) !important;

    border-radius: 30px !important;

    padding: 3px !important;

    gap: 4px !important;

    margin-bottom: 12px !important;

    border: 1px solid var(--xl-border-light, #e2e8f0) !important;

}



.xl-wap-hot-tab,

.xl-wap-comm-tab {

    flex: 1 !important;

    padding: 7px 4px !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    color: var(--xl-text-sub, #475569) !important;

    background: transparent !important;

    border: none !important;

    border-radius: 24px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    cursor: pointer !important;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.xl-wap-hot-tab.active,

.xl-wap-comm-tab.active {

    background: #ffffff !important;

    color: var(--xl-primary, #2563eb) !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;

}



/* 热门领奖台 (Top 3 Podium) */

.xl-podium-container {

    display: flex !important;

    align-items: flex-end !important;

    justify-content: space-between !important;

    gap: 8px !important;

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-lg, 12px) !important;

    padding: 14px 10px 12px !important;

    margin-bottom: 12px !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;

}



.xl-podium-item {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    position: relative !important;

    min-width: 0 !important;

}



.xl-podium-item.podium-rank-1 {

    transform: translateY(-6px) !important;

}



.xl-podium-crown {

    font-size: 16px !important;

    line-height: 1 !important;

    margin-bottom: 2px !important;

}



.xl-podium-thumb {

    width: 68px !important;

    height: 48px !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    position: relative !important;

    display: block !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;

}



.podium-rank-1 .xl-podium-thumb {

    width: 78px !important;

    height: 54px !important;

    border: 2px solid #eab308 !important;

    box-shadow: 0 0 10px rgba(234, 179, 8, 0.35) !important;

}



.podium-rank-2 .xl-podium-thumb {

    border: 2px solid #94a3b8 !important;

}



.podium-rank-3 .xl-podium-thumb {

    border: 2px solid #d97706 !important;

}



.xl-podium-thumb img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

}



.xl-podium-rank-badge {

    position: absolute !important;

    bottom: 0 !important;

    right: 0 !important;

    padding: 1px 6px !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    color: #ffffff !important;

    border-top-left-radius: 6px !important;

}



.podium-rank-1 .xl-podium-rank-badge { background: #eab308 !important; }

.podium-rank-2 .xl-podium-rank-badge { background: #64748b !important; }

.podium-rank-3 .xl-podium-rank-badge { background: #b45309 !important; }



.xl-podium-title {

    font-size: 11.5px !important;

    font-weight: 600 !important;

    color: var(--xl-text-main, #1e293b) !important;

    margin-top: 6px !important;

    line-height: 1.3 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    text-decoration: none !important;

    width: 100% !important;

}



.xl-podium-heat {

    font-size: 11px !important;

    font-weight: 700 !important;

    color: #f97316 !important;

    margin-top: 3px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 3px !important;

}



/* 热门排行榜 4-20 列表卡片 */

.xl-hot-list-wrap {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

}



.xl-hot-list-item {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 10px) !important;

    padding: 10px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;

}



.xl-hot-rank-badge {

    width: 22px !important;

    height: 22px !important;

    border-radius: 6px !important;

    background: var(--xl-bg-subtle, #f1f5f9) !important;

    color: var(--xl-text-muted, #64748b) !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-shrink: 0 !important;

}



.xl-hot-list-thumb {

    width: 64px !important;

    height: 48px !important;

    border-radius: 6px !important;

    overflow: hidden !important;

    flex-shrink: 0 !important;

}



.xl-hot-list-thumb img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

}



.xl-hot-list-info {

    flex: 1 !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;

}



.xl-hot-list-title {

    margin: 0 !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1.35 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

}



.xl-hot-list-title a {

    color: var(--xl-text-main, #1e293b) !important;

    text-decoration: none !important;

}



.xl-hot-list-meta {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    font-size: 11px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

}



.xl-hot-cat-pill {

    background: rgba(37, 99, 235, 0.08) !important;

    color: var(--xl-primary, #2563eb) !important;

    padding: 1px 5px !important;

    border-radius: 4px !important;

    font-weight: 600 !important;

    font-size: 10px !important;

}



.xl-hot-meta-item {

    display: flex !important;

    align-items: center !important;

    gap: 3px !important;

}



/* 社区回帖流 (Community Feed) */

.xl-comm-feed-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

}



.xl-comm-feed-card {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 10px) !important;

    padding: 12px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;

}



.xl-comm-feed-head {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 8px !important;

    gap: 8px !important;

}



.xl-comm-feed-user {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    min-width: 0 !important;

}



.xl-comm-feed-avatar {

    width: 32px !important;

    height: 32px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    border: 1px solid var(--xl-border-light, #e2e8f0) !important;

}



.xl-comm-feed-meta {

    display: flex !important;

    flex-direction: column !important;

    line-height: 1.2 !important;

}



.xl-comm-feed-name {

    font-size: 12.5px !important;

    font-weight: 600 !important;

    color: var(--xl-text-main, #1e293b) !important;

}



.xl-comm-feed-time {

    font-size: 10px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

    margin-top: 2px !important;

}



.xl-comm-feed-ref {

    font-size: 11px !important;

    color: var(--xl-primary, #2563eb) !important;

    background: rgba(37, 99, 235, 0.06) !important;

    border-radius: 4px !important;

    padding: 2px 6px !important;

    text-decoration: none !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

    max-width: 140px !important;

}



.xl-comm-feed-body {

    font-size: 13px !important;

    color: var(--xl-text-main, #334155) !important;

    line-height: 1.5 !important;

    word-break: break-word !important;

    margin-bottom: 8px !important;

}



.xl-comm-admin-reply {

    background: #f8fafc !important;

    border-left: 3px solid var(--xl-primary, #2563eb) !important;

    border-radius: 0 6px 6px 0 !important;

    padding: 6px 8px !important;

    font-size: 12px !important;

    color: #475569 !important;

    margin-bottom: 8px !important;

}



.xl-comm-feed-foot {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 8px !important;

    border-top: 1px solid var(--xl-border-light, #f1f5f9) !important;

    padding-top: 8px !important;

}



.xl-comm-act-btn {

    font-size: 11.5px !important;

    color: var(--xl-text-muted, #64748b) !important;

    background: var(--xl-bg-subtle, #f1f5f9) !important;

    border: none !important;

    border-radius: 4px !important;

    padding: 3px 8px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    text-decoration: none !important;

    cursor: pointer !important;

}



.xl-comm-act-btn:active {

    color: var(--xl-primary, #2563eb) !important;

    background: rgba(37, 99, 235, 0.1) !important;

}



.xl-comm-end-tip {

    text-align: center !important;

    font-size: 11px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

    padding: 12px 0 6px !important;

}



/* 我的帖子 (My Posts) */

.xl-comm-post-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 10px) !important;

    padding: 10px 12px !important;

    margin-bottom: 10px !important;

}



.xl-comm-post-user-info {

    font-size: 13px !important;

    font-weight: 600 !important;

    color: var(--xl-text-main, #1e293b) !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

}



.xl-comm-badge-posts {

    font-size: 11px !important;

    color: var(--xl-primary, #2563eb) !important;

    background: rgba(37, 99, 235, 0.08) !important;

    border-radius: 4px !important;

    padding: 1px 5px !important;

    font-weight: normal !important;

}



.xl-comm-post-add-btn {

    font-size: 12px !important;

    font-weight: 600 !important;

    color: #ffffff !important;

    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;

    border-radius: 6px !important;

    padding: 4px 10px !important;

    text-decoration: none !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

}



.xl-comm-post-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

}



.xl-comm-post-item {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 10px) !important;

    padding: 10px !important;

}



.xl-comm-post-thumb {

    width: 64px !important;

    height: 48px !important;

    border-radius: 6px !important;

    overflow: hidden !important;

    flex-shrink: 0 !important;

}



.xl-comm-post-thumb img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

}



.xl-comm-post-info {

    flex: 1 !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;

}



.xl-comm-post-title {

    margin: 0 !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

}



.xl-comm-post-title a {

    color: var(--xl-text-main, #1e293b) !important;

    text-decoration: none !important;

}



.xl-comm-post-meta {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    font-size: 11px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

}



.xl-audit-ok {

    color: #10b981 !important;

    background: rgba(16, 185, 129, 0.1) !important;

    border-radius: 4px !important;

    padding: 1px 4px !important;

    font-weight: 600 !important;

    font-size: 10.5px !important;

}



.xl-audit-wait {

    color: #f59e0b !important;

    background: rgba(245, 158, 11, 0.1) !important;

    border-radius: 4px !important;

    padding: 1px 4px !important;

    font-weight: 600 !important;

    font-size: 10.5px !important;

}



.xl-comm-meta-sub {

    display: flex !important;

    align-items: center !important;

    gap: 2px !important;

}



/* 私信会话列表 (Private Messages) */

.xl-comm-msg-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 10px) !important;

    padding: 10px 12px !important;

    margin-bottom: 10px !important;

}



.xl-comm-msg-head-title {

    font-size: 13px !important;

    font-weight: 600 !important;

    color: var(--xl-text-main, #1e293b) !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

}



.xl-comm-msg-new-btn {

    font-size: 12px !important;

    font-weight: 600 !important;

    color: #ffffff !important;

    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;

    border: none !important;

    border-radius: 6px !important;

    padding: 4px 10px !important;

    cursor: pointer !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

}



.xl-comm-msg-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

}



.xl-comm-msg-card {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-md, 10px) !important;

    padding: 10px 12px !important;

}



.xl-comm-msg-card.is-in {

    border-left: 3px solid #2563eb !important;

}



.xl-comm-msg-card.is-out {

    border-left: 3px solid #10b981 !important;

}



.xl-comm-msg-top {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 6px !important;

}



.xl-comm-msg-contact {

    font-size: 12.5px !important;

    color: var(--xl-text-main, #1e293b) !important;

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

}



.xl-msg-tag-in {

    font-size: 10px !important;

    color: #2563eb !important;

    background: rgba(37, 99, 235, 0.1) !important;

    border-radius: 4px !important;

    padding: 1px 4px !important;

}



.xl-msg-tag-out {

    font-size: 10px !important;

    color: #10b981 !important;

    background: rgba(16, 185, 129, 0.1) !important;

    border-radius: 4px !important;

    padding: 1px 4px !important;

}



.xl-comm-msg-date {

    font-size: 10px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

}



.xl-comm-msg-body {

    font-size: 13px !important;

    color: #334155 !important;

    line-height: 1.45 !important;

    background: #f8fafc !important;

    border-radius: 6px !important;

    padding: 8px !important;

    margin-bottom: 6px !important;

}



.xl-comm-msg-foot {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

}



.xl-comm-reply-btn {

    font-size: 11.5px !important;

    color: var(--xl-primary, #2563eb) !important;

    background: rgba(37, 99, 235, 0.08) !important;

    border: none !important;

    border-radius: 4px !important;

    padding: 3px 8px !important;

    cursor: pointer !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

}



.xl-comm-status-ok {

    font-size: 11px !important;

    color: #10b981 !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 3px !important;

}



/* 游客未登录提示卡片 */

.xl-comm-guest-card {

    text-align: center !important;

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border, #e2e8f0) !important;

    border-radius: var(--xl-radius-lg, 12px) !important;

    padding: 30px 20px !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;

}



.xl-cgc-icon {

    font-size: 36px !important;

    color: var(--xl-primary, #2563eb) !important;

    opacity: 0.8 !important;

    margin-bottom: 8px !important;

}



.xl-cgc-title {

    font-size: 15px !important;

    font-weight: 700 !important;

    color: var(--xl-text-main, #1e293b) !important;

    margin-bottom: 4px !important;

}



.xl-cgc-desc {

    font-size: 12px !important;

    color: var(--xl-text-muted, #64748b) !important;

    max-width: 280px !important;

    margin: 0 auto 16px !important;

    line-height: 1.5 !important;

}



.xl-comm-login-btn {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    padding: 8px 20px !important;

    border-radius: 30px !important;

    text-decoration: none !important;

    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25) !important;

    border: none !important;

    cursor: pointer !important;

}



/* 快捷私聊弹窗 (Direct Chat Modal) */

.xl-wap-modal-backdrop {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    background: rgba(0, 0, 0, 0.5) !important;

    backdrop-filter: blur(4px) !important;

    -webkit-backdrop-filter: blur(4px) !important;

    z-index: 99999 !important;

    display: none !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 16px !important;

}



.xl-wap-modal-backdrop.is-active {

    display: flex !important;

}



.xl-wap-modal-card {

    background: #ffffff !important;

    border-radius: var(--xl-radius-lg, 14px) !important;

    width: 100% !important;

    max-width: 380px !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;

    overflow: hidden !important;

    animation: xlModalFade 0.25s ease-out !important;

}



@keyframes xlModalFade {

    from { opacity: 0; transform: translateY(12px) scale(0.97); }

    to { opacity: 1; transform: translateY(0) scale(1); }

}



.xl-wap-modal-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 12px 16px !important;

    border-bottom: 1px solid #f1f5f9 !important;

}



.xl-wap-modal-title {

    font-size: 14.5px !important;

    font-weight: 700 !important;

    color: #1e293b !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

}



.xl-wap-modal-close {

    font-size: 20px !important;

    background: none !important;

    border: none !important;

    color: #94a3b8 !important;

    cursor: pointer !important;

    line-height: 1 !important;

}



.xl-modal-input-group {

    padding: 10px 16px 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;

}



.xl-modal-lbl {

    font-size: 11.5px !important;

    font-weight: 600 !important;

    color: #475569 !important;

}



.xl-modal-input {

    width: 100% !important;

    height: 36px !important;

    padding: 0 10px !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 6px !important;

    font-size: 13px !important;

    color: #1e293b !important;

    box-sizing: border-box !important;

    outline: none !important;

}



.xl-modal-textarea {

    width: 100% !important;

    padding: 8px 10px !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 6px !important;

    font-size: 13px !important;

    color: #1e293b !important;

    box-sizing: border-box !important;

    outline: none !important;

    resize: none !important;

}



.xl-modal-btn-row {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 8px !important;

    padding: 14px 16px !important;

}



.xl-modal-btn {

    padding: 7px 14px !important;

    border-radius: 6px !important;

    font-size: 12.5px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    border: none !important;

}



.xl-modal-btn.cancel {

    background: #f1f5f9 !important;

    color: #64748b !important;

}



.xl-modal-btn.submit {

    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;

    color: #ffffff !important;

}



/* --------------------------------------------------------------------------

   夜间暗色模式 (Dark/Night Theme Support)

   -------------------------------------------------------------------------- */

html[data-theme-mode="night"] .xl-wap-hot-hero,

html[data-theme-mode="night"] .xl-wap-comm-hero {

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(249, 115, 22, 0.12) 100%) !important;

    border-color: rgba(59, 130, 246, 0.25) !important;

}



html[data-theme-mode="night"] .xl-wap-hot-switch,

html[data-theme-mode="night"] .xl-wap-comm-switch {

    background: #0f172a !important;

    border-color: #334155 !important;

}



html[data-theme-mode="night"] .xl-wap-hot-tab,

html[data-theme-mode="night"] .xl-wap-comm-tab {

    color: #94a3b8 !important;

}



html[data-theme-mode="night"] .xl-wap-hot-tab.active,

html[data-theme-mode="night"] .xl-wap-comm-tab.active {

    background: #1e293b !important;

    color: #60a5fa !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;

}



html[data-theme-mode="night"] .xl-podium-container,

html[data-theme-mode="night"] .xl-hot-list-item,

html[data-theme-mode="night"] .xl-comm-feed-card,

html[data-theme-mode="night"] .xl-comm-post-header,

html[data-theme-mode="night"] .xl-comm-post-item,

html[data-theme-mode="night"] .xl-comm-msg-header,

html[data-theme-mode="night"] .xl-comm-msg-card,

html[data-theme-mode="night"] .xl-comm-guest-card,

html[data-theme-mode="night"] .xl-wap-modal-card {

    background: #1e293b !important;

    border-color: #334155 !important;

}



html[data-theme-mode="night"] .xl-hot-rank-badge {

    background: #0f172a !important;

    color: #94a3b8 !important;

}



html[data-theme-mode="night"] .xl-comm-admin-reply,

html[data-theme-mode="night"] .xl-comm-msg-body {

    background: #0f172a !important;

    color: #cbd5e1 !important;

}



html[data-theme-mode="night"] .xl-comm-feed-body {

    color: #cbd5e1 !important;

}



html[data-theme-mode="night"] .xl-modal-input,

html[data-theme-mode="night"] .xl-modal-textarea {

    background: #0f172a !important;

    border-color: #475569 !important;

    color: #f1f5f9 !important;

}



html[data-theme-mode="night"] .xl-wap-modal-header {

    border-color: #334155 !important;

}



html[data-theme-mode="night"] .xl-wap-modal-title {

    color: #f1f5f9 !important;

}



/* 细节精细优化：防止文字换行与间距微调 */

.xl-wap-hot-tab,

.xl-wap-comm-tab {

    white-space: nowrap !important;

    font-size: 11px !important;

    padding: 6px 3px !important;

    gap: 3px !important;

}



.xl-hot-list-meta {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    flex-wrap: nowrap !important;

    white-space: nowrap !important;

    overflow: hidden !important;

}



.xl-hot-cat-pill {

    white-space: nowrap !important;

    display: inline-block !important;

    flex-shrink: 0 !important;

}



.xl-hot-meta-item {

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



.xl-hot-list-item .xl-wap-item-more {

    margin-left: auto !important;

}







/* ==========================================================================

   全新现代 UI 提示与交互系统 (Toast, Modal, Dialog, Check-in, Voting, User Center)

   ========================================================================== */



/* --- 1. 全局轻量 Toast 浮动提示 --- */

.xl-toast-container {

    position: fixed !important;

    top: 24px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    z-index: 999999 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 10px !important;

    pointer-events: none !important;

    max-width: 90vw !important;

}



.xl-toast-item {

    pointer-events: auto !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 10px 18px !important;

    border-radius: 30px !important;

    font-size: 13.5px !important;

    font-weight: 600 !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

    transform: translateY(-16px) scale(0.9) !important;

    opacity: 0 !important;

    transition: all 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

}



.xl-toast-item.is-shown {

    transform: translateY(0) scale(1) !important;

    opacity: 1 !important;

}



.xl-toast-success {

    background: linear-gradient(135deg, #10b981, #059669) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.25) !important;

}



.xl-toast-warning {

    background: linear-gradient(135deg, #f59e0b, #d97706) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.25) !important;

}



.xl-toast-error {

    background: linear-gradient(135deg, #ef4444, #dc2626) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.25) !important;

}



.xl-toast-info {

    background: linear-gradient(135deg, #1e293b, #0f172a) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.2) !important;

}



/* --- 2. 全局通用弹窗 (Dialog / Confirm / Alert) --- */

.xl-dialog-backdrop {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    background: rgba(15, 23, 42, 0.65) !important;

    backdrop-filter: blur(8px) !important;

    -webkit-backdrop-filter: blur(8px) !important;

    z-index: 999998 !important;

    display: none;

    align-items: center !important;

    justify-content: center !important;

    padding: 20px !important;

    opacity: 0 !important;

    transition: opacity 0.25s ease !important;

}



.xl-dialog-backdrop.is-active {

    display: flex !important;

    opacity: 1 !important;

}



.xl-dialog-card {

    background: var(--xl-card-bg, #ffffff) !important;

    color: var(--xl-text-main, #1e293b) !important;

    border-radius: 20px !important;

    width: 100% !important;

    max-width: 350px !important;

    padding: 24px 20px !important;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important;

    border: 1px solid var(--xl-border-color, rgba(226, 232, 240, 0.8)) !important;

    text-align: center !important;

    transform: scale(0.9) !important;

    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

}



.xl-dialog-backdrop.is-active .xl-dialog-card {

    transform: scale(1) !important;

}



.xl-dialog-icon {

    width: 54px !important;

    height: 54px !important;

    border-radius: 50% !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 24px !important;

    margin-bottom: 12px !important;

}



.xl-dialog-icon.icon-auth {

    background: rgba(255, 87, 34, 0.12) !important;

    color: #ff5722 !important;

}



.xl-dialog-icon.icon-info {

    background: rgba(59, 130, 246, 0.12) !important;

    color: #3b82f6 !important;

}



.xl-dialog-icon.icon-success {

    background: rgba(16, 185, 129, 0.12) !important;

    color: #10b981 !important;

}



.xl-dialog-icon.icon-warning {

    background: rgba(245, 158, 11, 0.12) !important;

    color: #f59e0b !important;

}



.xl-dialog-title {

    font-size: 17px !important;

    font-weight: 700 !important;

    margin-bottom: 8px !important;

    color: var(--xl-text-main, #1e293b) !important;

}



.xl-dialog-message {

    font-size: 13.5px !important;

    line-height: 1.6 !important;

    color: var(--xl-text-muted, #64748b) !important;

    margin-bottom: 20px !important;

    word-break: break-word !important;

}



.xl-dialog-actions {

    display: flex !important;

    gap: 10px !important;

}



.xl-dialog-btn {

    flex: 1 !important;

    padding: 11px 0 !important;

    border-radius: 12px !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    border: none !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    text-align: center !important;

}



.xl-dialog-btn-cancel {

    background: var(--xl-hover-bg, #f1f5f9) !important;

    color: var(--xl-text-muted, #64748b) !important;

    border: 1px solid var(--xl-border-color, #e2e8f0) !important;

}



.xl-dialog-btn-primary {

    background: linear-gradient(135deg, #ff7b00, #ff5000) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 14px rgba(255, 80, 0, 0.35) !important;

}



.xl-dialog-btn-primary:active {

    transform: scale(0.97) !important;

}



/* --- 3. 签到喜报弹窗 (Check-in Celebration Modal) --- */

.xl-qiandao-backdrop {

    position: fixed !important;

    inset: 0 !important;

    background: rgba(15, 23, 42, 0.72) !important;

    backdrop-filter: blur(10px) !important;

    -webkit-backdrop-filter: blur(10px) !important;

    z-index: 999999 !important;

    display: none;

    align-items: center !important;

    justify-content: center !important;

    padding: 20px !important;

}



.xl-qiandao-backdrop.is-active {

    display: flex !important;

}



.xl-qiandao-card {

    background: var(--xl-card-bg, #ffffff) !important;

    color: var(--xl-text-main, #1e293b) !important;

    border-radius: 24px !important;

    width: 100% !important;

    max-width: 340px !important;

    padding: 30px 22px 24px !important;

    text-align: center !important;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35) !important;

    border: 1px solid rgba(255, 200, 50, 0.35) !important;

    position: relative !important;

    overflow: hidden !important;

    transform: scale(0.85) !important;

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

}



.xl-qiandao-backdrop.is-active .xl-qiandao-card {

    transform: scale(1) !important;

}



.xl-qiandao-aura {

    position: absolute !important;

    top: -60px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 220px !important;

    height: 220px !important;

    background: radial-gradient(circle, rgba(255, 200, 50, 0.25) 0%, rgba(255, 255, 255, 0) 70%) !important;

    border-radius: 50% !important;

    pointer-events: none !important;

    animation: xlGoldAura 3s ease-in-out infinite alternate !important;

}



@keyframes xlGoldAura {

    0% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }

    100% { transform: translateX(-50%) scale(1.15); opacity: 1; }

}



.xl-qiandao-coin {

    width: 68px !important;

    height: 68px !important;

    margin: 0 auto 14px !important;

    background: linear-gradient(135deg, #fef08a, #f59e0b) !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 34px !important;

    color: #ffffff !important;

    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.45) !important;

    animation: xlCoinBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

}



@keyframes xlCoinBounce {

    0% { transform: scale(0.3) rotate(-25deg); opacity: 0; }

    70% { transform: scale(1.15) rotate(10deg); }

    100% { transform: scale(1) rotate(0deg); opacity: 1; }

}



.xl-qiandao-title {

    font-size: 20px !important;

    font-weight: 800 !important;

    color: #f59e0b !important;

    margin-bottom: 6px !important;

}



.xl-qiandao-streak-badge {

    display: inline-block !important;

    background: rgba(245, 158, 11, 0.12) !important;

    color: #d97706 !important;

    font-size: 12.5px !important;

    font-weight: 700 !important;

    padding: 4px 14px !important;

    border-radius: 20px !important;

    margin-bottom: 16px !important;

}



.xl-qiandao-rewards {

    display: flex !important;

    justify-content: center !important;

    gap: 12px !important;

    margin-bottom: 22px !important;

}



.xl-qiandao-reward-chip {

    background: var(--xl-hover-bg, #f8fafc) !important;

    border: 1px solid var(--xl-border-color, #e2e8f0) !important;

    padding: 8px 14px !important;

    border-radius: 14px !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    color: var(--xl-text-main, #1e293b) !important;

}



.xl-qiandao-btn-ok {

    width: 100% !important;

    padding: 13px 0 !important;

    border-radius: 14px !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    border: none !important;

    background: linear-gradient(135deg, #ff7b00, #ff5000) !important;

    color: #ffffff !important;

    box-shadow: 0 6px 18px rgba(255, 80, 0, 0.35) !important;

    cursor: pointer !important;

    transition: transform 0.2s ease !important;

}



.xl-qiandao-btn-ok:active {

    transform: scale(0.97) !important;

}



/* --- 4. 表态投票微动效 (Reaction Voting Enhancements) --- */

.xl-reaction-pack {

    position: relative !important;

}



.xl-reaction-item {

    position: relative !important;

    cursor: pointer !important;

    user-select: none !important;

    -webkit-user-select: none !important;

    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, border-color 0.2s ease !important;

}



.xl-reaction-item:active {

    transform: scale(0.94) !important;

}



.xl-reaction-item.is-voted {

    border-color: #ff5722 !important;

    background: rgba(255, 87, 34, 0.08) !important;

    box-shadow: 0 4px 14px rgba(255, 87, 34, 0.25) !important;

    animation: xlVoteBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

}



@keyframes xlVoteBounce {

    0% { transform: scale(1); }

    35% { transform: scale(1.22); }

    70% { transform: scale(0.96); }

    100% { transform: scale(1); }

}



.xl-vote-floating-plus {

    position: absolute !important;

    top: -10px !important;

    right: 4px !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    color: #ff5722 !important;

    text-shadow: 0 2px 6px rgba(255, 87, 34, 0.4) !important;

    pointer-events: none !important;

    animation: xlFloatUpFade 0.85s ease-out forwards !important;

    z-index: 10 !important;

}



@keyframes xlFloatUpFade {

    0% { opacity: 0; transform: translateY(2px) scale(0.6); }

    30% { opacity: 1; transform: translateY(-8px) scale(1.25); }

    100% { opacity: 0; transform: translateY(-28px) scale(0.9); }

}



/* --- 5. 全新独立 WAP 个人中心页面 (WAP User Center) --- */

.xl-user-container {

    max-width: 720px !important;

    margin: 0 auto !important;

    padding: 10px 10px 85px 10px !important;

}



/* 个人中心 Hero 卡片 */

.xl-user-hero {

    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;

    color: #ffffff !important;

    border-radius: 20px !important;

    padding: 20px 18px !important;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;

    position: relative !important;

    overflow: hidden !important;

    margin-bottom: 12px !important;

}



.xl-user-hero-aura {

    position: absolute !important;

    top: -50px !important;

    right: -40px !important;

    width: 180px !important;

    height: 180px !important;

    background: radial-gradient(circle, rgba(255, 87, 34, 0.3) 0%, rgba(255, 87, 34, 0) 70%) !important;

    border-radius: 50% !important;

    pointer-events: none !important;

}



.xl-user-hero-top {

    display: flex !important;

    align-items: center !important;

    gap: 14px !important;

    position: relative !important;

    z-index: 2 !important;

}



.xl-user-avatar-wrap {

    position: relative !important;

    flex-shrink: 0 !important;

}



.xl-user-avatar {

    width: 62px !important;

    height: 62px !important;

    border-radius: 50% !important;

    border: 2.5px solid rgba(255, 255, 255, 0.85) !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;

    object-fit: cover !important;

    background: #334155 !important;

}



.xl-user-info {

    flex: 1 !important;

    min-width: 0 !important;

}



.xl-user-name-row {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex-wrap: wrap !important;

    margin-bottom: 4px !important;

}



.xl-user-name {

    font-size: 18px !important;

    font-weight: 800 !important;

    color: #ffffff !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    max-width: 150px !important;

}



.xl-user-badge {

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    padding: 2px 8px !important;

    border-radius: 12px !important;

    background: linear-gradient(135deg, #f59e0b, #d97706) !important;

    color: #ffffff !important;

    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3) !important;

}



.xl-user-meta {

    font-size: 11.5px !important;

    color: rgba(255, 255, 255, 0.65) !important;

}



.xl-user-qiandao-btn {

    padding: 8px 14px !important;

    border-radius: 20px !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    border: none !important;

    background: linear-gradient(135deg, #ff7b00, #ff5000) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 12px rgba(255, 80, 0, 0.35) !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

    transition: all 0.2s ease !important;

}



.xl-user-qiandao-btn.is-signed {

    background: rgba(255, 255, 255, 0.16) !important;

    color: rgba(255, 255, 255, 0.85) !important;

    box-shadow: none !important;

    cursor: default !important;

}



/* 4大资产数据卡片 */

.xl-user-assets {

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 8px !important;

    margin-top: 16px !important;

    position: relative !important;

    z-index: 2 !important;

}



.xl-asset-card {

    background: rgba(255, 255, 255, 0.08) !important;

    backdrop-filter: blur(8px) !important;

    -webkit-backdrop-filter: blur(8px) !important;

    border-radius: 12px !important;

    padding: 10px 4px !important;

    text-align: center !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

}



.xl-asset-val {

    font-size: 16px !important;

    font-weight: 800 !important;

    color: #fef08a !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

}



.xl-asset-lbl {

    font-size: 11px !important;

    color: rgba(255, 255, 255, 0.7) !important;

    margin-top: 2px !important;

}



/* 选项卡控制器 */

.xl-user-tabs {

    display: flex !important;

    gap: 6px !important;

    background: var(--xl-card-bg, #ffffff) !important;

    padding: 5px !important;

    border-radius: 14px !important;

    margin-bottom: 12px !important;

    border: 1px solid var(--xl-border-color, #e2e8f0) !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;

}



.xl-user-tab-btn {

    flex: 1 !important;

    padding: 9px 2px !important;

    border-radius: 10px !important;

    border: none !important;

    background: transparent !important;

    font-size: 12.5px !important;

    font-weight: 600 !important;

    color: var(--xl-text-muted, #64748b) !important;

    cursor: pointer !important;

    text-align: center !important;

    transition: all 0.2s ease !important;

    white-space: nowrap !important;

}



.xl-user-tab-btn.active {

    background: linear-gradient(135deg, #ff7b00, #ff5000) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 10px rgba(255, 80, 0, 0.3) !important;

}



/* Tab 1: 常用服务九宫格 */

.xl-user-grid {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 10px !important;

}



.xl-user-grid-item {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border-color, #e2e8f0) !important;

    border-radius: 16px !important;

    padding: 16px 8px !important;

    text-align: center !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 8px !important;

    text-decoration: none !important;

    color: var(--xl-text-main, #1e293b) !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;

    transition: all 0.2s ease !important;

    cursor: pointer !important;

}



.xl-user-grid-item:active {

    transform: scale(0.96) !important;

}



.xl-user-grid-icon {

    width: 44px !important;

    height: 44px !important;

    border-radius: 14px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 20px !important;

    color: #ffffff !important;

}



.xl-user-grid-label {

    font-size: 13px !important;

    font-weight: 600 !important;

}



.xl-user-grid-sub {

    font-size: 11px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

}



/* Tab 2: 我的稿件列表 */

.xl-user-post-card {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border-color, #e2e8f0) !important;

    border-radius: 14px !important;

    padding: 12px 14px !important;

    margin-bottom: 10px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;

}



.xl-user-post-title {

    font-size: 14px !important;

    font-weight: 700 !important;

    color: var(--xl-text-main, #1e293b) !important;

    line-height: 1.45 !important;

    text-decoration: none !important;

}



.xl-user-post-footer {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    font-size: 11.5px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

}



.xl-post-status-badge {

    padding: 2px 8px !important;

    border-radius: 10px !important;

    font-size: 11px !important;

    font-weight: 600 !important;

}



.xl-post-status-ok {

    background: rgba(16, 185, 129, 0.12) !important;

    color: #059669 !important;

}



.xl-post-status-wait {

    background: rgba(245, 158, 11, 0.12) !important;

    color: #d97706 !important;

}



/* Tab 3: 积分账单流水 */

.xl-user-score-row {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border-color, #e2e8f0) !important;

    border-radius: 14px !important;

    padding: 12px 14px !important;

    margin-bottom: 8px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

}



.xl-user-score-note {

    font-size: 13.5px !important;

    font-weight: 600 !important;

    color: var(--xl-text-main, #1e293b) !important;

    margin-bottom: 2px !important;

}



.xl-user-score-time {

    font-size: 11px !important;

    color: var(--xl-text-muted, #94a3b8) !important;

}



.xl-user-score-val {

    font-size: 15px !important;

    font-weight: 800 !important;

}



.xl-score-plus {

    color: #10b981 !important;

}



.xl-score-minus {

    color: #ef4444 !important;

}



/* Tab 4: 资料与安全表单 */

.xl-user-form-card {

    background: var(--xl-card-bg, #ffffff) !important;

    border: 1px solid var(--xl-border-color, #e2e8f0) !important;

    border-radius: 16px !important;

    padding: 16px !important;

    margin-bottom: 12px !important;

}



.xl-user-form-title {

    font-size: 15px !important;

    font-weight: 700 !important;

    color: var(--xl-text-main, #1e293b) !important;

    margin-bottom: 14px !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

}



.xl-user-form-group {

    margin-bottom: 12px !important;

}



.xl-user-form-label {

    display: block !important;

    font-size: 12.5px !important;

    font-weight: 600 !important;

    color: var(--xl-text-muted, #64748b) !important;

    margin-bottom: 5px !important;

}



.xl-user-form-input {

    width: 100% !important;

    padding: 10px 12px !important;

    border-radius: 10px !important;

    border: 1px solid var(--xl-border-color, #cbd5e1) !important;

    background: var(--xl-input-bg, #f8fafc) !important;

    color: var(--xl-text-main, #1e293b) !important;

    font-size: 13.5px !important;

    box-sizing: border-box !important;

    outline: none !important;

}



.xl-user-form-input:focus {

    border-color: #ff5722 !important;

    background: #ffffff !important;

}



.xl-user-form-btn {

    width: 100% !important;

    padding: 11px 0 !important;

    border-radius: 10px !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    border: none !important;

    background: linear-gradient(135deg, #ff7b00, #ff5000) !important;

    color: #ffffff !important;

    cursor: pointer !important;

}



/* 游客登录注册卡片 (Guest Auth View) */

.xl-guest-card {

    background: var(--xl-card-bg, #ffffff) !important;

    border-radius: 20px !important;

    border: 1px solid var(--xl-border-color, #e2e8f0) !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;

    padding: 22px 18px !important;

    margin-bottom: 14px !important;

}



.xl-guest-hero {

    text-align: center !important;

    padding: 10px 0 18px !important;

}



.xl-guest-avatar {

    width: 64px !important;

    height: 64px !important;

    border-radius: 50% !important;

    background: rgba(255, 87, 34, 0.1) !important;

    color: #ff5722 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 30px !important;

    margin-bottom: 10px !important;

}



.xl-guest-title {

    font-size: 18px !important;

    font-weight: 800 !important;

    color: var(--xl-text-main, #1e293b) !important;

    margin-bottom: 4px !important;

}



.xl-guest-subtitle {

    font-size: 12.5px !important;

    color: var(--xl-text-muted, #64748b) !important;

}



.xl-guest-privileges {

    display: grid !important;

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 8px !important;

    margin: 14px 0 18px !important;

}



.xl-privilege-item {

    background: var(--xl-hover-bg, #f8fafc) !important;

    border: 1px solid var(--xl-border-color, #e2e8f0) !important;

    border-radius: 12px !important;

    padding: 10px 8px !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    color: var(--xl-text-main, #1e293b) !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

}



/* 夜间模式适配 (Dark/Night mode adjustments) */

html[data-theme-mode='night'] .xl-toast-info {

    background: linear-gradient(135deg, #0f172a, #020617) !important;

    border-color: rgba(255, 255, 255, 0.15) !important;

}



html[data-theme-mode='night'] .xl-dialog-card,

html[data-theme-mode='night'] .xl-qiandao-card,

html[data-theme-mode='night'] .xl-user-tabs,

html[data-theme-mode='night'] .xl-user-grid-item,

html[data-theme-mode='night'] .xl-user-post-card,

html[data-theme-mode='night'] .xl-user-score-row,

html[data-theme-mode='night'] .xl-user-form-card,

html[data-theme-mode='night'] .xl-guest-card {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #f1f5f9 !important;

}



html[data-theme-mode='night'] .xl-dialog-btn-cancel,

html[data-theme-mode='night'] .xl-qiandao-reward-chip,

html[data-theme-mode='night'] .xl-privilege-item {

    background: #0f172a !important;

    border-color: #334155 !important;

    color: #e2e8f0 !important;

}



html[data-theme-mode='night'] .xl-user-form-input {

    background: #0f172a !important;

    border-color: #334155 !important;

    color: #f1f5f9 !important;

}



html[data-theme-mode='night'] .xl-user-form-input:focus {

    background: #1e293b !important;

    border-color: #ff5722 !important;

}







/* --- 修复用户中心页面容器宽度与头部排版 --- */

.site_user .htmlBody,

.site_user #mainBody,

.site_user .areaL {

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    float: none !important;

}



.xl-user-container {

    box-sizing: border-box !important;

    width: 100% !important;

    max-width: 640px !important;

    margin: 0 auto !important;

    padding: 10px 12px 95px 12px !important;

}



.xl-user-container * {

    box-sizing: border-box !important;

}



.xl-user-hero {

    box-sizing: border-box !important;

    width: 100% !important;

    position: relative !important;

    padding: 16px 14px !important;

    border-radius: 18px !important;

}



.xl-user-hero-top {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    position: relative !important;

    width: 100% !important;

}



.xl-user-avatar-wrap {

    flex: 0 0 54px !important;

    width: 54px !important;

    height: 54px !important;

}



.xl-user-avatar {

    width: 54px !important;

    height: 54px !important;

}



.xl-user-info {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    gap: 4px !important;

    overflow: hidden !important;

}



.xl-user-name-row {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

}



.xl-user-name {

    font-size: 15.5px !important;

    font-weight: 800 !important;

    color: #ffffff !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    max-width: 120px !important;

    display: inline-block !important;

}



.xl-user-badge {

    white-space: nowrap !important;

    flex-shrink: 0 !important;

    font-size: 10.5px !important;

    padding: 2px 7px !important;

}



.xl-user-meta {

    font-size: 11px !important;

    color: rgba(255, 255, 255, 0.72) !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

}



.xl-user-qiandao-btn {

    flex: 0 0 auto !important;

    padding: 7px 11px !important;

    font-size: 11.5px !important;

    border-radius: 20px !important;

    white-space: nowrap !important;

    margin-left: auto !important;

}



/* ==========================================================

 * 移动端第三方 OAuth 快捷登录 (Google & GitHub)

 * ========================================================== */

.xl-oauth-section {

    margin-top: 18px;

    padding-top: 14px;

    border-top: 1px dashed var(--xl-border-color, #e2e8f0);

}

.xl-oauth-divider {

    position: relative;

    text-align: center;

    margin-bottom: 12px;

}

.xl-oauth-divider::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 50%;

    height: 1px;

    background: var(--xl-border-color, #e2e8f0);

}

.xl-oauth-divider span {

    position: relative;

    padding: 0 10px;

    background: var(--xl-card-bg, #ffffff);

    color: var(--xl-text-muted, #94a3b8);

    font-size: 11.5px;

    font-weight: 500;

}

html[data-theme-mode='night'] .xl-oauth-divider span {

    background: #18181b;

    color: #a1a1aa;

}

.xl-oauth-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

}

@media (max-width: 340px) {

    .xl-oauth-grid {

        grid-template-columns: 1fr;

    }

}

.xl-oauth-btn {

    height: 40px;

    border-radius: 10px;

    border: 1px solid var(--xl-border-color, #e2e8f0);

    background: var(--xl-hover-bg, #f8fafc);

    color: var(--xl-text-main, #1e293b) !important;

    font-size: 12.5px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    text-decoration: none !important;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    padding: 0 10px;

    box-shadow: 0 1px 2px rgba(0,0,0,0.02);

}

.xl-oauth-btn:hover, .xl-oauth-btn:active {

    background: var(--xl-input-bg, #f1f5f9);

    border-color: #cbd5e1;

    transform: translateY(-1px);

    box-shadow: 0 3px 8px rgba(0,0,0,0.05);

}

.xl-oauth-btn svg {

    flex-shrink: 0;

}

.xl-oauth-google {

    color: #1f2937 !important;

}

.xl-oauth-github {

    color: #18181b !important;

}

html[data-theme-mode='night'] .xl-oauth-btn {

    background: #27272a;

    border-color: #3f3f46;

    color: #f4f4f5 !important;

}

html[data-theme-mode='night'] .xl-oauth-btn:hover {

    background: #3f3f46;

    border-color: #52525b;

}

html[data-theme-mode='night'] .xl-oauth-google {

    color: #f4f4f5 !important;

}

html[data-theme-mode='night'] .xl-oauth-github {

    color: #f4f4f5 !important;

}



/* ==========================================================

 * 移动端/全端现代化私聊与直接消息系统 (仿 Image 1 & Image 2)

 * ========================================================== */

.xl-chat-card-wrap {

    background: #ffffff;

    border: 1px solid var(--xl-border-color, #e2e8f0);

    border-radius: 16px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);

    overflow: hidden;

    margin: 12px 0 24px 0;

    transition: all 0.25s ease;

}



/* 顶部通用标题栏 */

.xl-chat-top-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 18px;

    border-bottom: 1px solid var(--xl-border-color, #f1f5f9);

    background: #ffffff;

}

.xl-chat-app-title {

    font-size: 19px;

    font-weight: 800;

    color: var(--xl-text-main, #0f172a);

    letter-spacing: -0.02em;

}

.xl-chat-win-controls {

    display: flex;

    align-items: center;

    gap: 14px;

}

.xl-win-ctrl-btn {

    background: none;

    border: none;

    color: #64748b;

    font-size: 15px;

    cursor: pointer;

    padding: 2px 4px;

    transition: color 0.15s;

    line-height: 1;

}

.xl-win-ctrl-btn:hover {

    color: #0f172a;

}



/* 直接消息分区头部 */

.xl-chat-section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 18px 10px 18px;

    border-bottom: 1px solid var(--xl-border-color, #f1f5f9);

}

.xl-chat-section-title {

    font-size: 15px;

    font-weight: 700;

    color: var(--xl-text-main, #1e293b);

}

.xl-dots-btn {

    background: none;

    border: none;

    color: #64748b;

    font-size: 16px;

    cursor: pointer;

    padding: 2px 6px;

}



/* 联系人列表 */

.xl-chat-contact-list {

    display: flex;

    flex-direction: column;

}

.xl-chat-contact-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 18px;

    border-bottom: 1px solid var(--xl-border-color, #f1f5f9);

    cursor: pointer;

    transition: background 0.15s ease;

    text-decoration: none !important;

}

.xl-chat-contact-item:hover, .xl-chat-contact-item:active {

    background: var(--xl-hover-bg, #f8fafc);

}

.xl-contact-left {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;

}

.xl-contact-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid var(--xl-border-color, #e2e8f0);

    flex-shrink: 0;

    background: #f1f5f9;

}

.xl-contact-name {

    font-size: 15px;

    font-weight: 700;

    color: var(--xl-text-main, #1e293b);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.xl-contact-date {

    font-size: 13px;

    font-weight: 500;

    color: var(--xl-text-muted, #71717a);

    flex-shrink: 0;

    margin-left: 8px;

}



/* 视图 2: 活跃会话界面 */

.xl-conv-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 16px;

    border-bottom: 1px solid var(--xl-border-color, #e2e8f0);

    background: #ffffff;

}

.xl-conv-header-left {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

}

.xl-conv-back-btn {

    background: none;

    border: none;

    font-size: 22px;

    color: #475569;

    cursor: pointer;

    padding: 0 4px;

    line-height: 1;

    display: flex;

    align-items: center;

}

.xl-conv-mini-avatar {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

    background: #f1f5f9;

}

.xl-conv-target-name {

    font-size: 15px;

    font-weight: 700;

    color: var(--xl-text-main, #1e293b);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.xl-conv-star-btn {

    background: none;

    border: none;

    color: #94a3b8;

    font-size: 15px;

    cursor: pointer;

    padding: 2px 4px;

}

.xl-conv-header-right {

    display: flex;

    align-items: center;

    gap: 12px;

}



/* 聊天滚动容器 */

.xl-conv-body {

    min-height: 380px;

    max-height: 480px;

    overflow-y: auto;

    padding: 24px 16px;

    background: var(--xl-bg-soft, #fafafa);

    display: flex;

    flex-direction: column;

}



/* 居中欢迎卡 */

.xl-conv-hero {

    text-align: center;

    margin: 20px auto 28px auto;

}

.xl-conv-big-avatar {

    width: 84px;

    height: 84px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #ffffff;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

    margin-bottom: 14px;

    background: #f1f5f9;

}

.xl-conv-greeting {

    font-size: 19px;

    font-weight: 800;

    color: var(--xl-text-main, #0f172a);

    letter-spacing: -0.02em;

}



/* 消息流气泡 */

.xl-conv-msg-flow {

    display: flex;

    flex-direction: column;

    gap: 12px;

    width: 100%;

}

.xl-chat-bubble-row {

    display: flex;

    flex-direction: column;

    max-width: 82%;

}

.xl-chat-bubble-row.is-me {

    align-self: flex-end;

}

.xl-chat-bubble-row.is-peer {

    align-self: flex-start;

}

.xl-bubble-content {

    padding: 10px 14px;

    font-size: 14px;

    line-height: 1.5;

    word-break: break-word;

}

.xl-chat-bubble-row.is-me .xl-bubble-content {

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    color: #ffffff;

    border-radius: 18px 18px 4px 18px;

    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);

}

.xl-chat-bubble-row.is-peer .xl-bubble-content {

    background: var(--xl-card-bg, #ffffff);

    color: var(--xl-text-main, #1e293b);

    border: 1px solid var(--xl-border-color, #e2e8f0);

    border-radius: 18px 18px 18px 4px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

}

.xl-bubble-time {

    font-size: 10.5px;

    color: #94a3b8;

    margin-top: 4px;

    text-align: right;

}

.xl-chat-bubble-row.is-peer .xl-bubble-time {

    text-align: left;

}



/* 底部发送胶囊栏 */

.xl-conv-dock {

    padding: 12px 14px 14px 14px;

    background: #ffffff;

    border-top: 1px solid var(--xl-border-color, #f1f5f9);

}

.xl-conv-pill-bar {

    background: var(--xl-input-bg, #f8fafc);

    border: 1px solid var(--xl-border-color, #e2e8f0);

    border-radius: 999px;

    height: 46px;

    display: flex;

    align-items: center;

    padding: 0 8px;

    gap: 8px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.02);

}

.xl-conv-pill-bar:focus-within {

    border-color: #3b82f6;

    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);

}

.xl-pill-btn {

    background: none;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.15s;

    line-height: 1;

}

.xl-pill-plus {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background: #e2e8f0;

    color: #64748b;

    font-size: 14px;

    flex-shrink: 0;

}

.xl-pill-plus:hover {

    background: #cbd5e1;

    color: #1e293b;

}

.xl-pill-input {

    flex: 1;

    border: none;

    background: transparent;

    font-size: 14px;

    color: var(--xl-text-main, #0f172a);

    outline: none;

    min-width: 0;

}

.xl-pill-emoji {

    font-size: 18px;

    color: #0ea5e9;

    padding: 4px;

    flex-shrink: 0;

}

.xl-pill-send {

    font-size: 16px;

    color: #3b82f6;

    padding: 6px;

    flex-shrink: 0;

}

.xl-pill-send:hover {

    color: #1d4ed8;

    transform: scale(1.08);

}



/* 深色模式适配 */

html[data-theme-mode='night'] .xl-chat-card-wrap,

html[data-theme-mode='night'] .xl-chat-top-header,

html[data-theme-mode='night'] .xl-conv-header,

html[data-theme-mode='night'] .xl-conv-dock {

    background: #18181b;

    border-color: #27272a;

}

html[data-theme-mode='night'] .xl-chat-section-header,

html[data-theme-mode='night'] .xl-chat-contact-item {

    border-color: #27272a;

}

html[data-theme-mode='night'] .xl-chat-contact-item:hover {

    background: #27272a;

}

html[data-theme-mode='night'] .xl-conv-body {

    background: #09090b;

}

html[data-theme-mode='night'] .xl-conv-big-avatar {

    border-color: #27272a;

}

html[data-theme-mode='night'] .xl-conv-pill-bar {

    background: #27272a;

    border-color: #3f3f46;

}

html[data-theme-mode='night'] .xl-pill-plus {

    background: #3f3f46;

    color: #cbd5e1;

}

html[data-theme-mode='night'] .xl-chat-bubble-row.is-peer .xl-bubble-content {

    background: #27272a;

    border-color: #3f3f46;

    color: #f4f4f5;

}





/* ==========================================================================

   2026-10-26 SWISS MINIMALISM + SHADCN/UI WAP MEMBER CENTER & AUTH SYSTEM

   Zero AI Cliché · Zinc Architectural Surfaces · WCAG AAA · 180ms Spring

   ========================================================================== */

:root {

	--xl-swiss-canvas: #FAFAFA;

	--xl-swiss-surface: #FFFFFF;

	--xl-swiss-subtle: #F4F4F5;

	--xl-swiss-border: #E4E4E7;

	--xl-swiss-border-strong: #D4D4D8;

	--xl-swiss-text: #09090B;

	--xl-swiss-text-sec: #3F3F46;

	--xl-swiss-text-muted: #52525B;

	--xl-swiss-primary: #18181B;

	--xl-swiss-primary-fg: #FAFAFA;

	--xl-swiss-accent: #2563EB;

	--xl-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

	--xl-dur-fast: 180ms;

}



html[data-theme-mode="night"] {

	--xl-swiss-canvas: #09090B;

	--xl-swiss-surface: #121215;

	--xl-swiss-subtle: #18181B;

	--xl-swiss-border: #27272A;

	--xl-swiss-border-strong: #3F3F46;

	--xl-swiss-text: #FAFAFA;

	--xl-swiss-text-sec: #D4D4D8;

	--xl-swiss-text-muted: #A1A1AA;

	--xl-swiss-primary: #FAFAFA;

	--xl-swiss-primary-fg: #09090B;

	--xl-swiss-accent: #3B82F6;

}



.xl-tabular {

	font-variant-numeric: tabular-nums !important;

}



.xl-swiss-member-wrap {

	max-width: 680px !important;

	margin: 0 auto !important;

	padding: 12px 12px 28px 12px !important;

}



/* 1. 会员名片与核心资产卡 (Logged-in Hero) */

.xl-swiss-member-wrap .xl-user-hero {

	background: var(--xl-swiss-surface) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	border-radius: 14px !important;

	padding: 20px 18px !important;

	margin-bottom: 14px !important;

	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;

	color: var(--xl-swiss-text) !important;

}



.xl-swiss-member-wrap .xl-user-hero::before,

.xl-swiss-member-wrap .xl-user-hero-aura {

	display: none !important;

}



.xl-swiss-member-wrap .xl-user-hero-top {

	display: flex !important;

	align-items: center !important;

	gap: 14px !important;

	flex-wrap: wrap !important;

	padding-bottom: 16px !important;

	margin-bottom: 16px !important;

	border-bottom: 1px solid var(--xl-swiss-border) !important;

}



.xl-swiss-member-wrap .xl-user-avatar-wrap {

	position: relative !important;

	width: 60px !important;

	height: 60px !important;

	padding: 0 !important;

	border: none !important;

	background: transparent !important;

	cursor: pointer !important;

	flex-shrink: 0 !important;

}



.xl-swiss-member-wrap .xl-user-avatar {

	width: 60px !important;

	height: 60px !important;

	border-radius: 50% !important;

	object-fit: cover !important;

	border: 1.5px solid var(--xl-swiss-border-strong) !important;

	box-shadow: none !important;

}



.xl-avatar-cam-badge {

	position: absolute !important;

	right: -2px !important;

	bottom: -2px !important;

	width: 24px !important;

	height: 24px !important;

	border-radius: 50% !important;

	background: var(--xl-swiss-primary) !important;

	color: var(--xl-swiss-primary-fg) !important;

	border: 2px solid var(--xl-swiss-surface) !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

}



.xl-swiss-member-wrap .xl-user-info {

	flex: 1 1 160px !important;

	min-width: 0 !important;

}



.xl-swiss-member-wrap .xl-user-name-row {

	display: flex !important;

	align-items: center !important;

	gap: 8px !important;

	flex-wrap: wrap !important;

}



.xl-swiss-member-wrap .xl-user-name {

	font-size: 18px !important;

	font-weight: 700 !important;

	color: var(--xl-swiss-text) !important;

	letter-spacing: -0.02em !important;

	margin: 0 !important;

}



.xl-swiss-member-wrap .xl-user-badge {

	display: inline-flex !important;

	align-items: center !important;

	gap: 4px !important;

	padding: 2px 8px !important;

	border-radius: 6px !important;

	background: var(--xl-swiss-subtle) !important;

	border: 1px solid var(--xl-swiss-border-strong) !important;

	color: var(--xl-swiss-text-sec) !important;

	font-size: 11.5px !important;

	font-weight: 600 !important;

}



.xl-swiss-member-wrap .xl-user-meta {

	font-size: 12px !important;

	color: var(--xl-swiss-text-muted) !important;

	margin-top: 4px !important;

	font-variant-numeric: tabular-nums !important;

}



.xl-swiss-member-wrap .xl-user-qiandao-btn {

	height: 40px !important;

	padding: 0 14px !important;

	border-radius: 8px !important;

	background: var(--xl-swiss-primary) !important;

	color: var(--xl-swiss-primary-fg) !important;

	border: 1px solid var(--xl-swiss-primary) !important;

	font-size: 12.5px !important;

	font-weight: 600 !important;

	display: inline-flex !important;

	align-items: center !important;

	gap: 6px !important;

	cursor: pointer !important;

	box-shadow: none !important;

	transition: transform var(--xl-dur-fast) var(--xl-ease-spring), opacity var(--xl-dur-fast) var(--xl-ease-spring) !important;

}



.xl-swiss-member-wrap .xl-user-qiandao-btn:active:not(:disabled) {

	transform: scale(0.98) !important;

}



.xl-swiss-member-wrap .xl-user-qiandao-btn.is-signed {

	background: var(--xl-swiss-subtle) !important;

	color: var(--xl-swiss-text-muted) !important;

	border-color: var(--xl-swiss-border) !important;

	cursor: default !important;

}



/* 6格瑞士网格资产栏 */

.xl-swiss-member-wrap .xl-user-assets {

	display: grid !important;

	grid-template-columns: repeat(3, 1fr) !important;

	gap: 8px !important;

}



.xl-swiss-member-wrap .xl-asset-card {

	background: var(--xl-swiss-subtle) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	border-radius: 10px !important;

	padding: 12px 10px !important;

	text-align: left !important;

	display: flex !important;

	flex-direction: column !important;

	gap: 4px !important;

	transition: border-color var(--xl-dur-fast) var(--xl-ease-spring), transform var(--xl-dur-fast) var(--xl-ease-spring) !important;

}



.xl-swiss-member-wrap .xl-asset-btn {

	cursor: pointer !important;

	width: 100% !important;

}



.xl-swiss-member-wrap .xl-asset-btn:hover {

	border-color: var(--xl-swiss-border-strong) !important;

	transform: translateY(-1px) !important;

}



.xl-swiss-member-wrap .xl-asset-val {

	font-size: 17px !important;

	font-weight: 700 !important;

	color: var(--xl-swiss-text) !important;

	font-variant-numeric: tabular-nums !important;

	letter-spacing: -0.02em !important;

	line-height: 1.2 !important;

}



.xl-swiss-member-wrap .xl-asset-lbl {

	display: inline-flex !important;

	align-items: center !important;

	gap: 5px !important;

	font-size: 11.5px !important;

	font-weight: 500 !important;

	color: var(--xl-swiss-text-muted) !important;

}



/* 2. Segmented / Tab Bar (7项全显自适应网格，杜绝右侧文字截断) */

.xl-swiss-member-wrap .xl-user-tabs {

	display: grid !important;

	grid-template-columns: repeat(7, minmax(0, 1fr)) !important;

	align-items: center !important;

	gap: 4px !important;

	padding: 4px !important;

	background: var(--xl-swiss-subtle) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	border-radius: 10px !important;

	margin-bottom: 14px !important;

	overflow: visible !important;

}



.xl-swiss-member-wrap .xl-auth-mode-tabs {

	display: grid !important;

	grid-template-columns: 1fr 1fr !important;

}



.xl-swiss-member-wrap .xl-user-tab-btn {

	width: 100% !important;

	min-width: 0 !important;

	height: 38px !important;

	min-height: 38px !important;

	padding: 0 4px !important;

	border-radius: 7px !important;

	border: none !important;

	background: transparent !important;

	color: var(--xl-swiss-text-muted) !important;

	font-size: 12.5px !important;

	font-weight: 600 !important;

	white-space: nowrap !important;

	cursor: pointer !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	transition: background-color var(--xl-dur-fast) var(--xl-ease-spring), color var(--xl-dur-fast) var(--xl-ease-spring), box-shadow var(--xl-dur-fast) var(--xl-ease-spring) !important;

}



@media (max-width: 580px) {

	.xl-swiss-member-wrap .xl-user-tabs:not(.xl-auth-mode-tabs) {

		display: flex !important;

		flex-wrap: wrap !important;

		gap: 4px !important;

	}

	.xl-swiss-member-wrap .xl-user-tabs:not(.xl-auth-mode-tabs) .xl-user-tab-btn {

		flex: 1 1 calc(25% - 4px) !important;

		width: auto !important;

		padding: 0 6px !important;

		font-size: 12px !important;

	}

}



.xl-swiss-member-wrap .xl-user-tab-btn.active {

	background: var(--xl-swiss-surface) !important;

	color: var(--xl-swiss-text) !important;

	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;

}



/* 3. Bento 常用服务矩阵 (去彩虹渐变，统一瑞士极简图标框) */

.xl-swiss-member-wrap .xl-user-grid {

	display: grid !important;

	grid-template-columns: repeat(3, 1fr) !important;

	gap: 10px !important;

}



@media (max-width: 400px) {

	.xl-swiss-member-wrap .xl-user-grid {

		grid-template-columns: repeat(2, 1fr) !important;

	}

}



.xl-swiss-member-wrap .xl-user-grid-item {

	background: var(--xl-swiss-surface) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	border-radius: 12px !important;

	padding: 16px 12px !important;

	display: flex !important;

	flex-direction: column !important;

	align-items: flex-start !important;

	text-align: left !important;

	gap: 6px !important;

	cursor: pointer !important;

	text-decoration: none !important;

	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;

	transition: border-color var(--xl-dur-fast) var(--xl-ease-spring), background-color var(--xl-dur-fast) var(--xl-ease-spring), transform var(--xl-dur-fast) var(--xl-ease-spring) !important;

}



.xl-swiss-member-wrap .xl-user-grid-item:hover {

	border-color: var(--xl-swiss-border-strong) !important;

	background: var(--xl-swiss-subtle) !important;

	transform: translateY(-1px) !important;

}



.xl-swiss-member-wrap .xl-user-grid-item:active {

	transform: scale(0.985) !important;

}



.xl-swiss-member-wrap .xl-user-grid-icon {

	width: 38px !important;

	height: 38px !important;

	border-radius: 8px !important;

	background: var(--xl-swiss-subtle) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	color: var(--xl-swiss-text) !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	margin: 0 0 4px 0 !important;

	box-shadow: none !important;

}



.xl-swiss-member-wrap .xl-grid-item-danger .xl-user-grid-icon {

	color: #DC2626 !important;

	background: #FEF2F2 !important;

	border-color: #FECACA !important;

}



.xl-swiss-member-wrap .xl-user-grid-label,

.xl-swiss-member-wrap .xl-user-grid-title {

	font-size: 13.5px !important;

	font-weight: 600 !important;

	color: var(--xl-swiss-text) !important;

}



.xl-swiss-member-wrap .xl-user-grid-sub {

	font-size: 11.5px !important;

	color: var(--xl-swiss-text-muted) !important;

	line-height: 1.4 !important;

}



/* 4. 访客未登录卡片 (Guest Auth Card) */

.xl-swiss-member-wrap .xl-guest-card {

	background: var(--xl-swiss-surface) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	border-radius: 14px !important;

	padding: 24px 20px !important;

	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;

}



.xl-swiss-member-wrap .xl-guest-hero {

	text-align: left !important;

	margin-bottom: 18px !important;

	padding-bottom: 16px !important;

	border-bottom: 1px solid var(--xl-swiss-border) !important;

}



.xl-guest-kicker {

	display: inline-block !important;

	font-size: 11px !important;

	font-weight: 700 !important;

	letter-spacing: 0.06em !important;

	color: var(--xl-swiss-text-muted) !important;

	background: var(--xl-swiss-subtle) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	padding: 2px 8px !important;

	border-radius: 5px !important;

	margin-bottom: 8px !important;

}



.xl-swiss-member-wrap .xl-guest-title {

	font-size: 21px !important;

	font-weight: 700 !important;

	color: var(--xl-swiss-text) !important;

	letter-spacing: -0.025em !important;

	margin: 0 0 4px 0 !important;

}



.xl-swiss-member-wrap .xl-guest-subtitle {

	font-size: 13px !important;

	color: var(--xl-swiss-text-muted) !important;

	line-height: 1.5 !important;

}



.xl-swiss-member-wrap .xl-guest-privileges {

	display: grid !important;

	grid-template-columns: 1fr 1fr !important;

	gap: 8px !important;

	margin-bottom: 18px !important;

}



.xl-swiss-member-wrap .xl-privilege-item {

	background: var(--xl-swiss-subtle) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	border-radius: 8px !important;

	padding: 9px 11px !important;

	font-size: 12px !important;

	font-weight: 500 !important;

	color: var(--xl-swiss-text-sec) !important;

	display: flex !important;

	align-items: center !important;

	gap: 7px !important;

}



.xl-swiss-member-wrap .xl-privilege-item svg {

	color: var(--xl-swiss-text) !important;

	flex-shrink: 0 !important;

}



/* 5. 表单控件规范 (WCAG >= 44px Touch Targets) */

.xl-swiss-member-wrap .xl-user-form-card {

	background: var(--xl-swiss-surface) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	border-radius: 12px !important;

	padding: 20px 18px !important;

	margin-bottom: 14px !important;

}



.xl-swiss-member-wrap .xl-user-form-title {

	font-size: 16px !important;

	font-weight: 700 !important;

	color: var(--xl-swiss-text) !important;

	margin-bottom: 16px !important;

	display: flex !important;

	align-items: center !important;

}



.xl-swiss-member-wrap .xl-user-form-group {

	margin-bottom: 16px !important;

}



.xl-swiss-member-wrap .xl-user-form-label {

	display: block !important;

	font-size: 13.5px !important;

	font-weight: 600 !important;

	color: var(--xl-swiss-text) !important;

	margin-bottom: 7px !important;

}



.xl-swiss-member-wrap .xl-user-form-input {

	width: 100% !important;

	height: 44px !important;

	min-height: 44px !important;

	padding: 0 13px !important;

	border-radius: 8px !important;

	border: 1px solid var(--xl-swiss-border-strong) !important;

	background: var(--xl-swiss-surface) !important;

	color: var(--xl-swiss-text) !important;

	font-size: 14px !important;

	outline: none !important;

	box-sizing: border-box !important;

	transition: border-color var(--xl-dur-fast) var(--xl-ease-spring), box-shadow var(--xl-dur-fast) var(--xl-ease-spring) !important;

}



.xl-swiss-member-wrap .xl-user-form-input::placeholder {

	color: #71717A !important;

}



.xl-swiss-member-wrap .xl-user-form-input:focus {

	border-color: var(--xl-swiss-primary) !important;

	box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08) !important;

}



.xl-swiss-member-wrap .xl-user-form-hint {

	font-size: 12px !important;

	color: var(--xl-swiss-text-muted) !important;

	margin-top: 5px !important;

	line-height: 1.45 !important;

}



.xl-input-eye-wrap {

	position: relative !important;

	display: flex !important;

	align-items: center !important;

}



.xl-eye-btn {

	position: absolute !important;

	right: 4px !important;

	width: 38px !important;

	height: 38px !important;

	border: none !important;

	background: transparent !important;

	color: var(--xl-swiss-text-muted) !important;

	border-radius: 6px !important;

	cursor: pointer !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

}



.xl-eye-btn:hover {

	color: var(--xl-swiss-text) !important;

	background: var(--xl-swiss-subtle) !important;

}



.xl-wap-mail-combo {

	display: flex !important;

	align-items: stretch !important;

}



.xl-user-form-select {

	width: 142px !important;

	height: 44px !important;

	padding: 0 10px !important;

	border: 1px solid var(--xl-swiss-border-strong) !important;

	border-left: none !important;

	border-top-right-radius: 8px !important;

	border-bottom-right-radius: 8px !important;

	background: var(--xl-swiss-subtle) !important;

	color: var(--xl-swiss-text) !important;

	font-size: 13px !important;

	font-weight: 500 !important;

	outline: none !important;

}



.xl-wap-code-combo {

	display: flex !important;

	align-items: stretch !important;

	gap: 8px !important;

}



.xl-code-send-btn {

	height: 44px !important;

	padding: 0 15px !important;

	border-radius: 8px !important;

	border: 1px solid var(--xl-swiss-border-strong) !important;

	background: var(--xl-swiss-subtle) !important;

	color: var(--xl-swiss-text) !important;

	font-size: 13px !important;

	font-weight: 600 !important;

	white-space: nowrap !important;

	cursor: pointer !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	transition: background-color var(--xl-dur-fast) var(--xl-ease-spring), transform var(--xl-dur-fast) var(--xl-ease-spring) !important;

}



.xl-code-send-btn:hover:not(:disabled) {

	background: var(--xl-swiss-border) !important;

}



.xl-code-send-btn:active:not(:disabled) {

	transform: scale(0.98) !important;

}



/* Turnstile Status Card */

.xl-swiss-member-wrap .xl-cf-card {

	margin: 14px 0 18px 0 !important;

	padding: 11px 14px !important;

	border: 1px solid var(--xl-swiss-border) !important;

	border-radius: 8px !important;

	background: var(--xl-swiss-subtle) !important;

	display: flex !important;

	align-items: center !important;

	justify-content: space-between !important;

}



.xl-cf-ok-dot {

	width: 22px !important;

	height: 22px !important;

	border-radius: 50% !important;

	background: #DCFCE7 !important;

	color: #15803D !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	flex-shrink: 0 !important;

}



.xl-cf-status-text {

	font-size: 12.5px !important;

	font-weight: 600 !important;

	color: var(--xl-swiss-text) !important;

}



.xl-cf-tag {

	font-size: 11px !important;

	font-weight: 600 !important;

	color: var(--xl-swiss-text-muted) !important;

	background: var(--xl-swiss-surface) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	padding: 2px 7px !important;

	border-radius: 4px !important;

}



/* Primary Submit Button */

.xl-swiss-member-wrap .xl-user-form-btn {

	width: 100% !important;

	height: 44px !important;

	min-height: 44px !important;

	border-radius: 8px !important;

	background: var(--xl-swiss-primary) !important;

	color: var(--xl-swiss-primary-fg) !important;

	border: 1px solid var(--xl-swiss-primary) !important;

	font-size: 14.5px !important;

	font-weight: 600 !important;

	cursor: pointer !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	gap: 8px !important;

	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;

	transition: opacity var(--xl-dur-fast) var(--xl-ease-spring), transform var(--xl-dur-fast) var(--xl-ease-spring) !important;

}



.xl-swiss-member-wrap .xl-user-form-btn:hover {

	opacity: 0.92 !important;

}



.xl-swiss-member-wrap .xl-user-form-btn:active {

	transform: scale(0.985) !important;

}



.xl-swiss-member-wrap .xl-btn-secondary {

	background: var(--xl-swiss-subtle) !important;

	color: var(--xl-swiss-text) !important;

	border-color: var(--xl-swiss-border-strong) !important;

	box-shadow: none !important;

}



.xl-auth-switch-foot {

	text-align: center !important;

	margin-top: 16px !important;

	font-size: 13px !important;

	color: var(--xl-swiss-text-muted) !important;

}



.xl-auth-switch-foot a {

	color: var(--xl-swiss-text) !important;

	font-weight: 600 !important;

	text-decoration: underline !important;

	text-underline-offset: 4px !important;

	margin-left: 4px !important;

}



/* OAuth Buttons >= 44px */

.xl-swiss-member-wrap .xl-oauth-btn {

	height: 44px !important;

	min-height: 44px !important;

	border-radius: 8px !important;

	border: 1px solid var(--xl-swiss-border-strong) !important;

	background: var(--xl-swiss-surface) !important;

	color: var(--xl-swiss-text) !important;

	font-size: 13px !important;

	font-weight: 600 !important;

}



/* 列表卡片与空状态 */

.xl-empty-state-box {

	text-align: center !important;

	padding: 36px 20px !important;

	background: var(--xl-swiss-surface) !important;

	border: 1px solid var(--xl-swiss-border) !important;

	border-radius: 12px !important;

}



.xl-empty-state-title {

	font-size: 14.5px !important;

	font-weight: 600 !important;

	color: var(--xl-swiss-text) !important;

	margin-bottom: 4px !important;

}



.xl-empty-state-sub {

	font-size: 12.5px !important;

	color: var(--xl-swiss-text-muted) !important;

}



.xl-user-fav-card,

.xl-user-follow-card {

	display: flex !important;

	align-items: center !important;

	gap: 12px !important;

	padding: 12px 14px !important;

	margin-bottom: 10px !important;

	border-radius: 10px !important;

	background: var(--xl-swiss-surface) !important;

	border: 1px solid var(--xl-swiss-border) !important;

}



.xl-fav-thumb-link {

	width: 68px !important;

	height: 48px !important;

	border-radius: 6px !important;

	overflow: hidden !important;

	flex-shrink: 0 !important;

	display: block !important;

	border: 1px solid var(--xl-swiss-border) !important;

}



.xl-fav-thumb-link img {

	width: 100% !important;

	height: 100% !important;

	object-fit: cover !important;

}



.xl-fav-info,

.xl-follow-meta {

	flex: 1 !important;

	min-width: 0 !important;

}



.xl-fav-title,

.xl-follow-name {

	font-size: 13.5px !important;

	font-weight: 600 !important;

	color: var(--xl-swiss-text) !important;

	text-decoration: none !important;

	display: -webkit-box !important;

	-webkit-line-clamp: 1 !important;

	-webkit-box-orient: vertical !important;

	overflow: hidden !important;

}



.xl-fav-time,

.xl-follow-date {

	font-size: 11.5px !important;

	color: var(--xl-swiss-text-muted) !important;

	margin-top: 3px !important;

}



.xl-fav-del-btn {

	width: 38px !important;

	height: 38px !important;

	border-radius: 8px !important;

	border: 1px solid var(--xl-swiss-border) !important;

	background: var(--xl-swiss-subtle) !important;

	color: #DC2626 !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	cursor: pointer !important;

	flex-shrink: 0 !important;

}



.xl-follow-avatar {

	width: 42px !important;

	height: 42px !important;

	border-radius: 50% !important;

	object-fit: cover !important;

	border: 1px solid var(--xl-swiss-border) !important;

	flex-shrink: 0 !important;

}



.xl-follow-act-btn {

	height: 34px !important;

	padding: 0 14px !important;

	border-radius: 7px !important;

	border: 1px solid var(--xl-swiss-primary) !important;

	background: var(--xl-swiss-primary) !important;

	color: var(--xl-swiss-primary-fg) !important;

	font-size: 12px !important;

	font-weight: 600 !important;

	cursor: pointer !important;

}



.xl-follow-act-btn.is-following {

	background: var(--xl-swiss-subtle) !important;

	color: var(--xl-swiss-text-sec) !important;

	border-color: var(--xl-swiss-border-strong) !important;

}



/* Avatar Modal Dialog */

.xl-avatar-modal-dialog {

	background: var(--xl-swiss-surface);

	border: 1px solid var(--xl-swiss-border);

	width: 100%;

	max-width: 390px;

	border-radius: 14px;

	overflow: hidden;

	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);

}



.xl-avatar-modal-header {

	padding: 16px 20px;

	border-bottom: 1px solid var(--xl-swiss-border);

	display: flex;

	align-items: center;

	justify-content: space-between;

}



.xl-avatar-modal-title {

	font-size: 15.5px;

	font-weight: 700;

	color: var(--xl-swiss-text);

	margin: 0;

}



.xl-avatar-modal-close {

	width: 32px;

	height: 32px;

	border-radius: 6px;

	border: none;

	background: transparent;

	font-size: 20px;

	color: var(--xl-swiss-text-muted);

	cursor: pointer;

}



.xl-avatar-modal-body {

	padding: 18px 20px;

	max-height: 72vh;

	overflow-y: auto;

}



.xl-avatar-modal-footer {

	padding: 12px 20px;

	border-top: 1px solid var(--xl-swiss-border);

	display: flex;

	gap: 10px;

	justify-content: flex-end;

}



/* Focus Visible */

.xl-swiss-member-wrap a:focus-visible,

.xl-swiss-member-wrap button:focus-visible,

.xl-swiss-member-wrap input:focus-visible,

.xl-swiss-member-wrap select:focus-visible {

	outline: 2px solid var(--xl-swiss-accent) !important;

	outline-offset: 2px !important;

}





/* 已收藏激活状态 (Favorited Active State - Swiss Minimalism + Spring Physics) */

.xl-btn-favorite.is-favorited {

  color: #be123c !important;

  border-color: #fecdd3 !important;

  background: #fff1f2 !important;

  font-weight: 600 !important;

  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.14) !important;

}

.xl-btn-favorite.is-favorited svg {

  color: #e11d48 !important;

  fill: #e11d48 !important;

}

.xl-btn-favorite.is-favorited:hover {

  color: #9f1239 !important;

  border-color: #fda4af !important;

  background: #ffe4e6 !important;

}

.xl-btn-favorite.is-toggling svg {

  animation: xlFavHeartPop 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;

}

@keyframes xlFavHeartPop {

  0% { transform: scale(0.8); }

  55% { transform: scale(1.26); }

  100% { transform: scale(1); }

}

html[data-theme-mode="night"] .xl-btn-favorite.is-favorited {

  color: #fda4af !important;

  border-color: rgba(244, 63, 94, 0.45) !important;

  background: rgba(244, 63, 94, 0.16) !important;

}

html[data-theme-mode="night"] .xl-btn-favorite.is-favorited svg {

  color: #fb7185 !important;

  fill: #fb7185 !important;

}

@media (prefers-reduced-motion: reduce) {

  .xl-btn-favorite.is-toggling svg {

    animation: none !important;

  }

}



.xl-btn-favorite:not(.is-favorited) svg,

.xl-btn-favorite:not(.is-favorited):hover svg {

  fill: none !important;

}





/* ==========================================================================

   已举报激活状态 & 瑞士极简举报下拉框 & Cloudflare Turnstile 人机验证 (Swiss v5)

   ========================================================================== */

.xl-btn-report.is-reported {

  color: #b45309 !important;

  border-color: #fde68a !important;

  background: #fffbeb !important;

  font-weight: 600 !important;

  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.14) !important;

}

.xl-btn-report.is-reported svg {

  color: #d97706 !important;

  fill: #d97706 !important;

}

.xl-btn-report.is-reported:hover {

  color: #92400e !important;

  border-color: #fcd34d !important;

  background: #fef3c7 !important;

}

.xl-btn-report:not(.is-reported) svg,

.xl-btn-report:not(.is-reported):hover svg {

  fill: none !important;

}

.xl-btn-report.is-toggling svg {

  animation: xlFavHeartPop 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;

}

html[data-theme-mode="night"] .xl-btn-report.is-reported {

  color: #fde68a !important;

  border-color: rgba(245, 158, 11, 0.45) !important;

  background: rgba(245, 158, 11, 0.16) !important;

}

html[data-theme-mode="night"] .xl-btn-report.is-reported svg {

  color: #fbbf24 !important;

  fill: #fbbf24 !important;

}



/* 举报原因下拉浮层 (Swiss Minimalist Popover) */

#funcReportBox.xl-report-popover {

  position: absolute !important;

  top: calc(100% + 8px) !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  z-index: 9999 !important;

}

#funcReportBox.xl-report-popover .xl-report-popover-card {

  position: relative !important;

  width: 168px !important;

  background: #ffffff !important;

  border: 1px solid #e4e4e7 !important;

  border-radius: 10px !important;

  padding: 6px !important;

  box-shadow: 0 12px 28px -6px rgba(9, 9, 11, 0.14), 0 4px 10px -2px rgba(9, 9, 11, 0.06) !important;

  text-align: left !important;

  box-sizing: border-box !important;

}

#funcReportBox.xl-report-popover .xl-report-popover-title {

  font-size: 11px !important;

  font-weight: 600 !important;

  color: #71717a !important;

  padding: 4px 8px 6px !important;

  border-bottom: 1px solid #f4f4f5 !important;

  margin-bottom: 4px !important;

  line-height: 1.3 !important;

}

#funcReportBox.xl-report-popover .xl-report-reason-item {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 7px 10px !important;

  border-radius: 6px !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  color: #18181b !important;

  text-decoration: none !important;

  line-height: 1.4 !important;

  transition: background-color 0.16s cubic-bezier(0.22, 1, 0.36, 1), color 0.16s cubic-bezier(0.22, 1, 0.36, 1) !important;

}

#funcReportBox.xl-report-popover .xl-report-reason-item:hover {

  background: #fffbeb !important;

  color: #b45309 !important;

}

#funcReportBox.xl-report-popover .xl-report-dot {

  width: 5px !important;

  height: 5px !important;

  border-radius: 50% !important;

  background: #d97706 !important;

  flex-shrink: 0 !important;

}

html[data-theme-mode="night"] #funcReportBox.xl-report-popover .xl-report-popover-card {

  background: #18181b !important;

  border-color: #27272a !important;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;

}

html[data-theme-mode="night"] #funcReportBox.xl-report-popover .xl-report-popover-title {

  color: #a1a1aa !important;

  border-bottom-color: #27272a !important;

}

html[data-theme-mode="night"] #funcReportBox.xl-report-popover .xl-report-reason-item {

  color: #f4f4f5 !important;

}

html[data-theme-mode="night"] #funcReportBox.xl-report-popover .xl-report-reason-item:hover {

  background: rgba(245, 158, 11, 0.16) !important;

  color: #fde68a !important;

}



/* PC 评论区 Cloudflare Turnstile 人机验证组件 */

.xl-cf-turnstile-wrap {

  display: inline-flex !important;

  align-items: center !important;

  margin: 0 6px !important;

}

.xl-cf-card {

  display: inline-flex !important;

  align-items: center !important;

  background: #fafafa !important;

  border: 1px solid #e4e4e7 !important;

  border-radius: 8px !important;

  padding: 6px 12px !important;

  gap: 10px !important;

  cursor: pointer !important;

  user-select: none !important;

  -webkit-user-select: none !important;

  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;

  box-sizing: border-box !important;

}

.xl-cf-card:hover {

  background: #ffffff !important;

  border-color: #d4d4d8 !important;

  box-shadow: 0 2px 6px rgba(9, 9, 11, 0.05) !important;

}

.xl-cf-card:focus-visible {

  outline: 2px solid #2563eb !important;

  outline-offset: 2px !important;

}

.xl-cf-checkbox {

  width: 20px !important;

  height: 20px !important;

  border: 1.5px solid #cbd5e1 !important;

  border-radius: 4px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: #ffffff !important;

  position: relative !important;

  flex-shrink: 0 !important;

  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;

}

.xl-cf-check-icon {

  display: none !important;

  color: #10b981 !important;

  font-size: 13px !important;

}

.xl-cf-spinner {

  display: none !important;

  width: 14px !important;

  height: 14px !important;

  border: 2px solid #f38020 !important;

  border-top-color: transparent !important;

  border-radius: 50% !important;

  animation: xlCfSpin 0.6s linear infinite !important;

}

@keyframes xlCfSpin {

  to { transform: rotate(360deg); }

}

.xl-cf-card.is-loading .xl-cf-spinner {

  display: block !important;

}

.xl-cf-card.is-loading .xl-cf-checkbox {

  border-color: transparent !important;

}

.xl-cf-card.is-verified {

  background: #ecfdf5 !important;

  border-color: #a7f3d0 !important;

}

.xl-cf-card.is-verified .xl-cf-checkbox {

  background: #d1fae5 !important;

  border-color: #10b981 !important;

}

.xl-cf-card.is-verified .xl-cf-check-icon {

  display: block !important;

}

.xl-cf-card.is-verified .xl-cf-text {

  color: #065f46 !important;

  font-weight: 600 !important;

}

.xl-cf-text {

  font-size: 12.5px !important;

  color: #3f3f46 !important;

  font-weight: 500 !important;

  white-space: nowrap !important;

}

.xl-cf-brand {

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

  border-left: 1px solid #e4e4e7 !important;

  padding-left: 8px !important;

  margin-left: 2px !important;

  flex-shrink: 0 !important;

}

.xl-cf-sub {

  font-size: 10px !important;

  color: #71717a !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.04em !important;

}

html[data-theme-mode="night"] .xl-cf-card {

  background: #18181b !important;

  border-color: #27272a !important;

}

html[data-theme-mode="night"] .xl-cf-checkbox {

  background: #09090b !important;

  border-color: #3f3f46 !important;

}

html[data-theme-mode="night"] .xl-cf-text {

  color: #e4e4e7 !important;

}

html[data-theme-mode="night"] .xl-cf-brand {

  border-left-color: #27272a !important;

}

html[data-theme-mode="night"] .xl-cf-card.is-verified {

  background: rgba(16, 185, 129, 0.14) !important;

  border-color: rgba(16, 185, 129, 0.35) !important;

}

html[data-theme-mode="night"] .xl-cf-card.is-verified .xl-cf-text {

  color: #34d399 !important;

}





/* ==========================================================================

   WAP 右上角分类抽屉弹窗防遮挡修复 (高于底部 5 键导航栏与悬浮广告)

   ========================================================================== */

#xlCategoryDrawer,

.xl-wap-drawer-backdrop {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  z-index: 9999999 !important;

  background: rgba(9, 9, 11, 0.6) !important;

  backdrop-filter: blur(4px) !important;

  -webkit-backdrop-filter: blur(4px) !important;

  align-items: flex-end !important;

  justify-content: center !important;

}

.xl-wap-drawer-card {

  position: relative !important;

  z-index: 10000000 !important;

  width: 100% !important;

  max-width: 640px !important;

  margin: 0 auto !important;

  padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;

  border-radius: 16px 16px 0 0 !important;

  background: var(--xl-bg-card, #ffffff) !important;

  border-top: 1px solid var(--xl-border, #e4e4e7) !important;

  box-shadow: 0 -12px 32px rgba(9, 9, 11, 0.18) !important;

  box-sizing: border-box !important;

}

html[data-theme-mode="night"] .xl-wap-drawer-card {

  background: #18181b !important;

  border-top-color: #27272a !important;

}



/* WAP 顶部导航栏小屏防横向溢出修复 (375px/390px) */

.xl-wap-header-row {

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

}

.xl-wap-search-pill {

  flex: 1 1 0% !important;

  min-width: 0 !important;

}

.xl-wap-search-input {

  flex: 1 1 0% !important;

  min-width: 0 !important;

  width: 100% !important;

}

.xl-wap-logo-img {

  max-width: 112px !important;

}





/* Reaction Header & Pack Clean Unified Styles */

.xl-reaction-header {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 0 4px 12px !important;

  margin-bottom: 14px !important;

  border-bottom: 1px solid #e4e4e7 !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.xl-reaction-title {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  color: #0f172a !important;

}



.xl-reaction-sub {

  display: block !important;

  font-size: 12px !important;

  font-weight: 400 !important;

  color: #94a3b8 !important;

}



@media (max-width: 640px) {

  .xl-reaction-header {

    flex-direction: column !important;

    align-items: center !important;

    gap: 4px !important;

    text-align: center !important;

  }

}



.xl-reaction-pack::before {

  display: none !important;

  content: "" !important;

}





/* ==============================================================

   Swiss Minimalism & shadcn/ui Unified Reactions & Toast System

   ============================================================== */

.xl-reaction-pack::before,

.xl-wap-reaction-card .xl-reaction-pack::before,

html[data-theme-mode="night"] .xl-reaction-pack::before {

  display: none !important;

  content: "" !important;

  height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

}



.xl-reaction-header {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 0 4px 14px !important;

  margin-bottom: 16px !important;

  border-bottom: 1px solid #e4e4e7 !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.xl-reaction-title {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #09090b !important;

  letter-spacing: -0.2px !important;

}



.xl-reaction-title i, .xl-reaction-title svg {

  color: #ef4444 !important;

  font-size: 16px !important;

}



.xl-reaction-sub {

  display: block !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  color: #71717a !important;

}



@media (max-width: 640px) {

  .xl-reaction-header {

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    text-align: center !important;

    padding: 0 0 12px !important;

    margin-bottom: 14px !important;

    border-bottom: 1px solid #e4e4e7 !important;

  }

  .xl-reaction-title {

    font-size: 14px !important;

  }

  .xl-reaction-sub {

    font-size: 12px !important;

  }

}



/* Toast Component */

.xl-toast-container {

  position: fixed !important;

  top: 32px !important;

  left: 50% !important;

  transform: translateX(-50%) translateY(0) !important;

  z-index: 9999999 !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 10px 22px !important;

  background: #09090b !important;

  color: #f8fafc !important;

  font-size: 14px !important;

  font-weight: 500 !important;

  white-space: nowrap !important;

  border-radius: 9999px !important;

  border: 1px solid rgba(255, 255, 255, 0.16) !important;

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.15) !important;

  pointer-events: none !important;

  letter-spacing: 0.3px !important;

  animation: xlToastIn 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;

}



.xl-toast-text {

  white-space: nowrap !important;

  color: #f8fafc !important;

  font-size: 14px !important;

}



.xl-toast-icon {

  width: 18px !important;

  height: 18px !important;

  flex-shrink: 0 !important;

}



.xl-toast-container.xl-toast-leaving {

  animation: xlToastOut 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;

}





/* ==========================================================================

   Toast Notification & Empty Container Cleanup (Zero Residual Black Background)

   ========================================================================== */

.xl-toast-wrapper {

  position: fixed !important;

  top: 32px !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  z-index: 9999999 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  gap: 8px !important;

  pointer-events: none !important;

  background: transparent !important;

  padding: 0 !important;

  border: none !important;

  box-shadow: none !important;

  margin: 0 !important;

}



.xl-toast-wrapper:empty,

.xl-toast-container:empty,

#xlGlobalToastContainer:empty,

#xlGlobalToast:empty,

.xl-toast-item:empty {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

  padding: 0 !important;

  margin: 0 !important;

  border: none !important;

  background: transparent !important;

  box-shadow: none !important;

}



.xl-toast-item {

  display: inline-flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 10px 22px !important;

  background: #09090b !important;

  color: #fafafa !important;

  font-size: 14px !important;

  font-weight: 500 !important;

  line-height: 1.4 !important;

  letter-spacing: -0.01em !important;

  white-space: nowrap !important;

  border-radius: 9999px !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;

  pointer-events: none !important;

  user-select: none !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

  animation: xlToastIn 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;

  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;

}



.xl-toast-item.xl-toast-leaving,

.xl-toast-container.xl-toast-leaving {

  animation: xlToastOut 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



@keyframes xlToastIn {

  0% { opacity: 0; transform: translateY(-16px) scale(0.95); }

  100% { opacity: 1; transform: translateY(0) scale(1); }

}



@keyframes xlToastOut {

  0% { opacity: 1; transform: translateY(0) scale(1); }

  100% { opacity: 0; transform: translateY(-16px) scale(0.95); }

}



/* ==========================================================================

   Modern Resource Download & Cloud Drive Box (Swiss Minimalism + shadcn/ui)

   ========================================================================== */

.xl-download-section,

.down_file_box {

  margin: 24px 0 16px 0 !important;

  padding: 0 !important;

}



.xl-download-header,

.down_file_title {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #09090b !important;

  padding: 0 0 10px 0 !important;

  margin: 22px 0 14px 0 !important;

  border-bottom: 1px solid #e4e4e7 !important;

  background: transparent !important;

  line-height: 1.5 !important;

}



/* Hide old drifting gif icons completely */

#newsContent .down_file_title img,

.article-content .down_file_title img,

.down_file_title img,

.down_file_box img,

img[src*="file.gif"] {

  display: none !important;

  width: 0 !important;

  height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  visibility: hidden !important;

  position: absolute !important;

  pointer-events: none !important;

}



/* Paperclip SVG icon */

.xl-download-paperclip-svg {

  width: 18px !important;

  height: 18px !important;

  color: #2563eb !important;

  flex-shrink: 0 !important;

}



.down_file_title:not(:has(svg))::before {

  content: "" !important;

  display: inline-block !important;

  width: 16px !important;

  height: 16px !important;

  flex-shrink: 0 !important;

  background-color: #2563eb !important;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") no-repeat center / contain !important;

  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") no-repeat center / contain !important;

}



.xl-download-grid {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 12px !important;

  margin: 12px 0 16px 0 !important;

}



.xl-download-card {

  display: inline-flex !important;

  align-items: center !important;

  gap: 10px !important;

  background: #ffffff !important;

  border: 1px solid #e4e4e7 !important;

  border-radius: 8px !important;

  padding: 8px 14px !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;

  transition: all 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;

}



.xl-download-card:hover {

  border-color: #2563eb !important;

  background: #f8fafc !important;

  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important;

  transform: translateY(-1px) !important;

}



.xl-download-btn-link {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  font-size: 14px !important;

  font-weight: 600 !important;

  color: #09090b !important;

  text-decoration: none !important;

  transition: color 150ms ease !important;

}



.xl-download-btn-link:hover {

  color: #2563eb !important;

  text-decoration: none !important;

}



.xl-cloud-icon {

  width: 17px !important;

  height: 17px !important;

  flex-shrink: 0 !important;

}



.xl-cloud-icon.xl-icon-quark { color: #2563eb !important; }

.xl-cloud-icon.xl-icon-baidu { color: #2563eb !important; }

.xl-cloud-icon.xl-icon-aliyun { color: #ea580c !important; }

.xl-cloud-icon.xl-icon-lanzou { color: #0284c7 !important; }

.xl-cloud-icon.xl-icon-123 { color: #059669 !important; }



.xl-download-arrow {

  width: 13px !important;

  height: 13px !important;

  color: #94a3b8 !important;

  transition: transform 180ms ease !important;

}



.xl-download-card:hover .xl-download-arrow {

  color: #2563eb !important;

  transform: translate(2px, -2px) !important;

}



/* Extraction code / password badge */

.xl-download-pwd-wrap {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 3px 8px !important;

  background: #f4f4f5 !important;

  border: 1px solid #e4e4e7 !important;

  border-radius: 6px !important;

  margin-left: 4px !important;

}



.xl-pwd-label {

  font-size: 12px !important;

  color: #71717a !important;

}



.xl-pwd-code {

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;

  font-size: 12.5px !important;

  font-weight: 700 !important;

  color: #09090b !important;

  font-variant-numeric: tabular-nums !important;

  background: transparent !important;

  padding: 0 !important;

  border: none !important;

}



.xl-pwd-copy-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 3px !important;

  background: #ffffff !important;

  border: 1px solid #d4d4d8 !important;

  border-radius: 4px !important;

  padding: 2px 7px !important;

  font-size: 11.5px !important;

  font-weight: 600 !important;

  color: #2563eb !important;

  cursor: pointer !important;

  transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;

}



.xl-pwd-copy-btn:hover {

  background: #2563eb !important;

  color: #ffffff !important;

  border-color: #2563eb !important;

}



.xl-pwd-copy-btn:active,

.xl-pwd-copy-btn.is-copied {

  transform: scale(0.95) !important;

}



/* Legacy buttons styling override */

.down_btn0,

.down_btn1,

.down_btn2 {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  background: #ffffff !important;

  border: 1px solid #e4e4e7 !important;

  border-radius: 8px !important;

  padding: 8px 14px !important;

  margin: 6px 10px 6px 0 !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;

  transition: all 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;

}



.down_btn0:hover,

.down_btn1:hover,

.down_btn2:hover {

  border-color: #2563eb !important;

  background: #f8fafc !important;

  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important;

  transform: translateY(-1px) !important;

}



.down_left0, .down_left1, .down_left2,

.down_right0, .down_right1, .down_right2,

.down_hline0, .down_hline1, .down_hline2 {

  display: none !important;

}



.down_bg0, .down_bg1, .down_bg2 {

  background: transparent !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

}



.down_bg0 a, .down_bg1 a, .down_bg2 a {

  font-size: 14px !important;

  font-weight: 600 !important;

  color: #09090b !important;

  text-decoration: none !important;

}



.down_bg0 a:hover, .down_bg1 a:hover, .down_bg2 a:hover {

  color: #2563eb !important;

}



.copyTextBtn {

  display: inline-flex !important;

  align-items: center !important;

  padding: 3px 8px !important;

  background: #f4f4f5 !important;

  border: 1px solid #e4e4e7 !important;

  border-radius: 6px !important;

  font-size: 12.5px !important;

  font-weight: 600 !important;

  color: #2563eb !important;

  font-variant-numeric: tabular-nums !important;

  cursor: pointer !important;

  transition: all 180ms ease !important;

}



.copyTextBtn:hover {

  background: #2563eb !important;

  color: #ffffff !important;

  border-color: #2563eb !important;

}







/* WAP Global Article Title & Text Ad Custom Color Preservation */

#newsTitle[style*="color"],

.article-title h1[style*="color"],

.itemContent a[style*="color"],

.newsList a[style*="color"],

.newList li a[style*="color"],

.listArrow3 ul li a[style*="color"],

.itemUl li a[style*="color"],

.wap-discovery-list li a[style*="color"],

.xl-top-ad-group a span[style*="color"],

.xl-top-ad-group table td a span[style*="color"],

a[style*="color"],

span[style*="color"] {

    text-decoration: none;

}



/* In night mode, adjust pure black colors to light slate, while preserving vibrant colored text */

html[data-theme-mode="night"] span[style*="color:#000000"],

html[data-theme-mode="night"] span[style*="color:#000;"],

html[data-theme-mode="night"] a[style*="color:#000000"],

html[data-theme-mode="night"] a[style*="color:#000;"] {

    color: #cbd5e1 !important;

}





/* ==========================================================================

   ARTICLE EXTERNAL LINK CAPSULE BUTTON (浅色系小按钮包裹 - SWISS MINIMALISM)

   ========================================================================== */

.xl-download-card.xl-outlink-card {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  background: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 8px !important;

  padding: 6px 8px !important;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;

  transition: all 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;

}



.xl-download-card.xl-outlink-card:hover {

  background: #f1f5f9 !important;

  border-color: #cbd5e1 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;

  transform: translateY(-1px) !important;

}



/* 浅色系小按钮包裹主体 */

.xl-download-btn-link.xl-outlink-btn,

.xl-outlink-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 5px 12px !important;

  background: #eff6ff !important;

  border: 1px solid #bfdbfe !important;

  border-radius: 6px !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  color: #1d4ed8 !important;

  text-decoration: none !important;

  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.04) !important;

  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;

  cursor: pointer !important;

  user-select: none !important;

}



.xl-download-btn-link.xl-outlink-btn:hover,

.xl-outlink-btn:hover {

  background: #dbeafe !important;

  border-color: #93c5fd !important;

  color: #1e40af !important;

  text-decoration: none !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.12) !important;

}



.xl-download-btn-link.xl-outlink-btn:active,

.xl-outlink-btn:active {

  transform: scale(0.985) !important;

}



.xl-download-btn-link.xl-outlink-btn:focus-visible,

.xl-outlink-btn:focus-visible {

  outline: none !important;

  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb !important;

}



.xl-download-btn-link.xl-outlink-btn .xl-cloud-icon,

.xl-outlink-btn .xl-cloud-icon {

  width: 15px !important;

  height: 15px !important;

  color: #2563eb !important;

  stroke: #2563eb !important;

  flex-shrink: 0 !important;

}



.xl-download-btn-link.xl-outlink-btn .xl-download-btn-name,

.xl-outlink-btn .xl-download-btn-name {

  color: inherit !important;

  font-size: 13px !important;

  font-weight: 500 !important;

}



.xl-download-btn-link.xl-outlink-btn .xl-download-arrow,

.xl-outlink-btn .xl-download-arrow {

  width: 12px !important;

  height: 12px !important;

  color: #60a5fa !important;

  transition: transform 180ms ease !important;

  flex-shrink: 0 !important;

}



.xl-download-card:hover .xl-download-btn-link.xl-outlink-btn .xl-download-arrow,

.xl-outlink-btn:hover .xl-download-arrow {

  color: #1e40af !important;

  transform: translate(2px, -2px) !important;

}



/* 网盘下载卡片配套轻量按钮风格 */

.xl-download-btn-link.xl-netdisk-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 7px !important;

  padding: 5px 12px !important;

  background: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 6px !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  color: #1e293b !important;

  text-decoration: none !important;

  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;

}



.xl-download-btn-link.xl-netdisk-btn:hover {

  background: #eff6ff !important;

  border-color: #bfdbfe !important;

  color: #1d4ed8 !important;

  text-decoration: none !important;

  transform: translateY(-1px) !important;

}



/* 正文区域内的外链按钮美化 (如果文章正文中包含 .xl-outlink-btn 或 target="_blank" 外链) */

.article-body a.xl-outlink-btn,

.article-content a.xl-outlink-btn,

.htmlContent a.xl-outlink-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 5px !important;

  padding: 3px 10px !important;

  background: #eff6ff !important;

  border: 1px solid #bfdbfe !important;

  border-radius: 6px !important;

  font-size: 12.5px !important;

  font-weight: 500 !important;

  color: #1d4ed8 !important;

  text-decoration: none !important;

  vertical-align: middle !important;

  margin: 0 4px !important;

  line-height: 1.5 !important;

}



.article-body a.xl-outlink-btn:hover,

.article-content a.xl-outlink-btn:hover,

.htmlContent a.xl-outlink-btn:hover {

  background: #dbeafe !important;

  border-color: #93c5fd !important;

  color: #1e40af !important;

  text-decoration: none !important;

  transform: translateY(-1px) !important;

}



/* 深色模式适配 (Dark/Night Mode) */

html[data-theme-mode="night"] .xl-download-card.xl-outlink-card {

  background: #18181b !important;

  border-color: #27272a !important;

  box-shadow: none !important;

}



html[data-theme-mode="night"] .xl-download-card.xl-outlink-card:hover {

  background: #202024 !important;

  border-color: #3f3f46 !important;

}



html[data-theme-mode="night"] .xl-download-btn-link.xl-outlink-btn,

html[data-theme-mode="night"] .xl-outlink-btn,

html[data-theme-mode="night"] .article-body a.xl-outlink-btn,

html[data-theme-mode="night"] .article-content a.xl-outlink-btn,

html[data-theme-mode="night"] .htmlContent a.xl-outlink-btn {

  background: rgba(37, 99, 235, 0.14) !important;

  border-color: rgba(37, 99, 235, 0.32) !important;

  color: #93c5fd !important;

  box-shadow: none !important;

}



html[data-theme-mode="night"] .xl-download-btn-link.xl-outlink-btn:hover,

html[data-theme-mode="night"] .xl-outlink-btn:hover,

html[data-theme-mode="night"] .article-body a.xl-outlink-btn:hover,

html[data-theme-mode="night"] .article-content a.xl-outlink-btn:hover,

html[data-theme-mode="night"] .htmlContent a.xl-outlink-btn:hover {

  background: rgba(37, 99, 235, 0.24) !important;

  border-color: rgba(37, 99, 235, 0.5) !important;

  color: #bfdbfe !important;

}



html[data-theme-mode="night"] .xl-download-btn-link.xl-outlink-btn .xl-cloud-icon,

html[data-theme-mode="night"] .xl-outlink-btn .xl-cloud-icon {

  color: #93c5fd !important;

  stroke: #93c5fd !important;

}



html[data-theme-mode="night"] .xl-download-btn-link.xl-netdisk-btn {

  background: #27272a !important;

  border-color: #3f3f46 !important;

  color: #e4e4e7 !important;

}



html[data-theme-mode="night"] .xl-download-btn-link.xl-netdisk-btn:hover {

  background: #323238 !important;

  border-color: #52525b !important;

  color: #60a5fa !important;

}



@media (prefers-reduced-motion: reduce) {

  .xl-download-card.xl-outlink-card,

  .xl-download-btn-link.xl-outlink-btn,

  .xl-outlink-btn,

  .xl-download-arrow {

    transition: none !important;

    transform: none !important;

  }

}



/* ==========================================================================
   WAP RANK CONSISTENCY WITH PC (.xl-wap-rank)
   ========================================================================== */
.xl-wap-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--xl-border);
}
.xl-wap-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--xl-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}
.xl-wap-rank-more {
    font-size: 12px;
    color: var(--xl-text-sub);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    font-weight: normal;
    transition: color 150ms ease;
}
.xl-wap-rank-more:hover {
    color: var(--xl-primary);
}
.xl-wap-rank-tabs {
    display: flex;
    background: var(--xl-bg-subtle, #f4f4f5);
    border-radius: var(--xl-radius-md, 8px);
    border: 1px solid var(--xl-border);
    padding: 3px;
    margin-bottom: 12px;
    gap: 4px;
}
.xl-wap-rank-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    background: transparent;
    padding: 7px 0;
    border-radius: var(--xl-radius-sm, 6px);
    font-size: 12px;
    font-weight: 600;
    color: var(--xl-text-sub);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    text-align: center;
}
.xl-wap-rank-tab:hover {
    color: var(--xl-text-main);
}
.xl-wap-rank-tab.active {
    background: var(--xl-bg-card, #ffffff);
    color: var(--xl-primary, #2563eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.xl-wap-rank-badge {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--xl-bg-subtle, #f4f4f5);
    color: var(--xl-text-muted, #71717a);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.xl-wap-rank-badge.rank-top-1 {
    background: #EF4444 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.xl-wap-rank-badge.rank-top-2 {
    background: #F97316 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.xl-wap-rank-badge.rank-top-3 {
    background: #F59E0B !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.xl-wap-rank-views {
    font-size: 12px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.xl-wap-rank-link {
    flex: 1;
    font-size: 13px;
    color: var(--xl-text-main);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 150ms ease;
}
.xl-wap-rank-link:hover {
    color: var(--xl-primary);
}

/* WAP Night / Dark Mode */
html[data-theme-mode="night"] .xl-wap-rank-card {
    background: #18181b !important;
    border-color: #27272a !important;
}
html[data-theme-mode="night"] .xl-wap-rank-tabs {
    background: #121215 !important;
    border-color: #27272a !important;
}
html[data-theme-mode="night"] .xl-wap-rank-tab.active {
    background: #27272a !important;
    color: #60a5fa !important;
}
html[data-theme-mode="night"] .xl-wap-rank-badge:not(.rank-top-1):not(.rank-top-2):not(.rank-top-3) {
    background: #27272a !important;
    color: #a1a1aa !important;
}


/* ==========================================================================
   WAP Direct Chat & Community Tabs (Swiss Minimalism + shadcn/ui Architecture)
   ========================================================================== */

.xl-svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 1.5;
}

.xl-wap-comm-tab .xl-svg-icon {
  margin-right: 6px;
}

.xl-chat-card-wrap {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.xl-chat-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
}

.xl-chat-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e4e4e7;
}

.xl-chat-app-title {
  font-size: 15px;
  font-weight: 600;
  color: #09090b;
  letter-spacing: -0.01em;
}

.xl-chat-win-controls,
.xl-conv-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.xl-win-ctrl-btn,
.xl-dots-btn,
.xl-conv-back-btn,
.xl-conv-star-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #71717a;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
}

.xl-win-ctrl-btn:hover,
.xl-dots-btn:hover,
.xl-conv-back-btn:hover,
.xl-conv-star-btn:hover {
  background: #f4f4f5;
  color: #09090b;
  border-color: #e4e4e7;
}

.xl-win-ctrl-btn:active,
.xl-dots-btn:active,
.xl-conv-back-btn:active,
.xl-conv-star-btn:active {
  transform: scale(0.985);
}

.xl-win-ctrl-btn:focus-visible,
.xl-dots-btn:focus-visible,
.xl-conv-back-btn:focus-visible,
.xl-conv-star-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #18181b;
}

.xl-chat-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fafafa;
  border-bottom: 1px solid #e4e4e7;
}

.xl-chat-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #52525b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 活跃私聊对话界面 (Active Direct Chat View) */
.xl-conv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid #e4e4e7;
}

.xl-conv-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.xl-conv-mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e4e4e7;
  background: #f4f4f5;
  flex-shrink: 0;
}

.xl-conv-target-name {
  font-size: 15px;
  font-weight: 600;
  color: #09090b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.xl-conv-body {
  min-height: 360px;
  max-height: 460px;
  overflow-y: auto;
  padding: 20px 14px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}

.xl-conv-hero {
  text-align: center;
  margin: 16px auto 24px auto;
}

.xl-conv-big-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  background: #f4f4f5;
}

.xl-conv-greeting {
  font-size: 16px;
  font-weight: 600;
  color: #09090b;
  letter-spacing: -0.01em;
}

/* 底部操作工具栏与输入条 (Footer & Toolbar) */
.xl-conv-footer {
  background: #ffffff;
  border-top: 1px solid #e4e4e7;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xl-conv-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xl-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #52525b;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
}

.xl-tool-btn:hover {
  background: #f4f4f5;
  color: #09090b;
  border-color: #d4d4d8;
}

.xl-tool-btn:active {
  transform: scale(0.985);
}

.xl-tool-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #18181b;
}

.xl-conv-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.xl-conv-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  color: #09090b;
  font-family: inherit;
  transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}

.xl-conv-input::placeholder {
  color: #a1a1aa;
}

.xl-conv-input:focus {
  outline: none;
  background: #ffffff;
  border-color: #18181b;
  box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.08);
}

.xl-conv-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-height: 44px;
  min-width: 72px;
  padding: 0 16px;
  background: #18181b;
  color: #ffffff;
  border: 1px solid #18181b;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.xl-conv-send-btn:hover {
  background: #27272a;
  border-color: #27272a;
}

.xl-conv-send-btn:active {
  transform: scale(0.985);
}

.xl-conv-send-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #18181b;
}

/* 夜间模式适配 (Dark Mode Support) */
html[data-theme-mode='night'] .xl-chat-card-wrap,
html[data-theme-mode='night'] .xl-chat-view,
html[data-theme-mode='night'] .xl-chat-top-header,
html[data-theme-mode='night'] .xl-conv-header,
html[data-theme-mode='night'] .xl-conv-footer {
  background: #09090b !important;
  border-color: #27272a !important;
}

html[data-theme-mode='night'] .xl-chat-section-header,
html[data-theme-mode='night'] .xl-conv-body {
  background: #121215 !important;
  border-color: #27272a !important;
}

html[data-theme-mode='night'] .xl-chat-app-title,
html[data-theme-mode='night'] .xl-conv-target-name,
html[data-theme-mode='night'] .xl-conv-greeting {
  color: #f4f4f5 !important;
}

html[data-theme-mode='night'] .xl-tool-btn {
  background: #18181b !important;
  border-color: #27272a !important;
  color: #a1a1aa !important;
}

html[data-theme-mode='night'] .xl-tool-btn:hover {
  background: #27272a !important;
  color: #fafafa !important;
}

html[data-theme-mode='night'] .xl-conv-input {
  background: #18181b !important;
  border-color: #27272a !important;
  color: #fafafa !important;
}

html[data-theme-mode='night'] .xl-conv-input:focus {
  background: #121215 !important;
  border-color: #e4e4e7 !important;
}

html[data-theme-mode='night'] .xl-conv-send-btn {
  background: #fafafa !important;
  color: #09090b !important;
  border-color: #fafafa !important;
}

html[data-theme-mode='night'] .xl-conv-send-btn:hover {
  background: #e4e4e7 !important;
}

@media (prefers-reduced-motion: reduce) {
  .xl-win-ctrl-btn,
  .xl-dots-btn,
  .xl-conv-back-btn,
  .xl-conv-star-btn,
  .xl-tool-btn,
  .xl-conv-input,
  .xl-conv-send-btn {
    transition: none !important;
    transform: none !important;
  }
}


.xl-tool-btn,
.xl-win-ctrl-btn,
.xl-dots-btn,
.xl-conv-back-btn,
.xl-conv-star-btn {
  position: relative;
}

.xl-tool-btn::after,
.xl-win-ctrl-btn::after,
.xl-dots-btn::after,
.xl-conv-back-btn::after,
.xl-conv-star-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}


/* ==========================================================================
   WAP 顶部广告与文章上方广告样式增强 (Ads Display Polish)
   ========================================================================== */
.xl-wap-article-top-ad {
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.xl-wap-article-top-ad:empty {
    display: none !important;
    margin: 0 !important;
}

.xl-wap-article-top-ad img {
    width: 100% !important;
    max-width: 100% !important;
    height: 45px !important;
    display: block !important;
    border-radius: 4px !important;
}

.xl-top-ad-text-group {
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.xl-top-ad-text-group table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    background-color: var(--xl-card-bg, #ffffff) !important;
    border: 1px solid var(--xl-border, #cbd5e1) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.xl-top-ad-text-group table td {
    height: 35px !important;
    word-wrap: break-word !important;
    border: 1px solid var(--xl-border, #cbd5e1) !important;
    text-align: center !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

.xl-top-ad-text-group table td a {
    display: block !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

.xl-top-ad-text-group table td a span {
    font-size: 10.5px !important;
}

.xl-top-ad-text-group table td a span:not([style*="color"]) {
    color: var(--xl-text-main, #1e293b) !important;
}

html[data-theme-mode="night"] .xl-top-ad-text-group table {
    background-color: #111822 !important;
    border-color: #243242 !important;
}

html[data-theme-mode="night"] .xl-top-ad-text-group table td {
    border-color: #243242 !important;
}

html[data-theme-mode="night"] .xl-top-ad-text-group table td a span:not([style*="color"]) {
    color: #cbd5e1 !important;
}

/* ========================================================
   WAP User Login Sub-Mode Switcher (Swiss Minimalist)
   ======================================================== */
.xl-login-type-switch {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px !important;
	margin: 0 0 16px 0 !important;
	background: #f4f4f5 !important;
	border: 1px solid #e4e4e7 !important;
	border-radius: 9px !important;
}
[data-theme="dark"] .xl-login-type-switch,
html[data-theme-mode="night"] .xl-login-type-switch,
.dark .xl-login-type-switch {
	background: #18181b !important;
	border-color: #27272a !important;
}
.xl-type-tab {
	flex: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	height: 36px !important;
	padding: 0 10px !important;
	border: 1px solid transparent !important;
	border-radius: 7px !important;
	background: transparent !important;
	color: #71717a !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
}
.xl-type-tab:hover {
	color: #18181b !important;
}
[data-theme="dark"] .xl-type-tab:hover,
html[data-theme-mode="night"] .xl-type-tab:hover,
.dark .xl-type-tab:hover {
	color: #fafafa !important;
}
.xl-type-tab.is-active {
	background: #ffffff !important;
	color: #09090b !important;
	font-weight: 600 !important;
	border-color: #e4e4e7 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="dark"] .xl-type-tab.is-active,
html[data-theme-mode="night"] .xl-type-tab.is-active,
.dark .xl-type-tab.is-active {
	background: #27272a !important;
	color: #fafafa !important;
	border-color: #3f3f46 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
.xl-type-tab:active {
	transform: scale(0.985) !important;
}

/* Mail code combo in WAP user login */
.xl-mailcode-combo {
	display: flex !important;
	align-items: stretch !important;
	gap: 8px !important;
}
.xl-btn-send-code {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 14px !important;
	min-width: 105px !important;
	height: 44px !important;
	background: #18181b !important;
	color: #ffffff !important;
	border: 1px solid #18181b !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	font-variant-numeric: tabular-nums !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
}
[data-theme="dark"] .xl-btn-send-code,
html[data-theme-mode="night"] .xl-btn-send-code,
.dark .xl-btn-send-code {
	background: #fafafa !important;
	color: #09090b !important;
	border-color: #fafafa !important;
}
.xl-btn-send-code:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	background: #e4e4e7 !important;
	color: #71717a !important;
	border-color: #e4e4e7 !important;
}


/* ==========================================================================
   移动端文章正文直接铺满屏幕与图片无截断完整展示优化
   ========================================================================== */
.site_newsShow .htmlBody,
.site_newsShow #mainBody.htmlBody,
.site_news .htmlBody,
.site_news #mainBody.htmlBody {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.site_newsShow .xl-wap-news-container,
.site_news .xl-wap-news-container,
.xl-wap-news-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.site_newsShow .mainArea,
.xl-wap-news-container.mainArea {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

.xl-wap-article-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 14px 10px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
}

#newsContent {
    width: 100% !important;
    overflow: visible !important;
    margin: 8px 0 !important;
    padding: 0 !important;
}

#newsContent p {
    margin: 10px 0 !important;
    line-height: 1.8 !important;
}

#newsContent img,
#newsContent .contAutoImg,
.contAutoImg {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 10px auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

.fangdajingBox {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ==========================================================================
   WAP文章正文页直接铺满屏幕 (site_show & site_news)
   ========================================================================== */
.site_show .bodyArea > .htmlBody,
.site_show .htmlBody,
.site_show #mainBody.htmlBody,
.site_newsShow .bodyArea > .htmlBody,
.site_newsShow .htmlBody,
.site_newsShow #mainBody.htmlBody {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.site_show .xl-wap-news-container,
.site_newsShow .xl-wap-news-container,
.site_news .xl-wap-news-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site_show .xl-wap-article-card,
.site_newsShow .xl-wap-article-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 14px 8px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
}

.site_show #newsContent,
.site_newsShow #newsContent {
    width: 100% !important;
    padding: 0 !important;
    margin: 6px 0 !important;
    overflow: visible !important;
}

.site_show #newsContent img,
.site_show #newsContent .contAutoImg,
.site_newsShow #newsContent img,
.site_newsShow #newsContent .contAutoImg {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

.site_show .xl-download-section,
.site_newsShow .xl-download-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================================
   WAP文章正文排版极致优化 (图文自适应对齐与居中兜底)
   ========================================================================== */
#newsContent,
.site_show #newsContent,
.site_newsShow #newsContent,
.xl-wap-content {
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    color: var(--xl-text-main, #09090b) !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    text-align: left !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#newsContent p,
.site_show #newsContent p,
.site_newsShow #newsContent p,
.xl-wap-content p,
#newsContent div,
.site_show #newsContent div,
.site_newsShow #newsContent div {
    margin: 10px 0 !important;
    line-height: 1.85 !important;
    text-align: left !important;
}

#newsContent p[style*="text-align"],
#newsContent div[style*="text-align"],
#newsContent [style*="text-align:center"],
#newsContent [style*="text-align: center"],
.xl-wap-content [style*="text-align:center"],
.xl-wap-content [style*="text-align: center"],
.site_show #newsContent [style*="text-align:center"],
.site_show #newsContent [style*="text-align: center"] {
    text-align: left !important;
}

#newsContent img,
.site_show #newsContent img,
.site_newsShow #newsContent img,
.xl-wap-content img,
.site_show #newsContent .contAutoImg,
.site_newsShow #newsContent .contAutoImg {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 12px auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}