/**
 * 小罗资源网 - 全站统一设计系统 (Design System Tokens & Base Components)
 * Version: 2.0.0
 * Architecture: Pure CSS Variables, Responsive (Mobile/Tablet/PC), Zero Heavy Framework Dependencies
 */

/* ==========================================================================
   1. DESIGN TOKENS (LIGHT MODE DEFAULT)
   ========================================================================== */
:root {
  /* Brand Primary Colors */
  --xl-primary: #1FA6E6;
  --xl-primary-hover: #168FC7;
  --xl-primary-active: #107DB0;
  --xl-primary-dark: #2A78E2;
  --xl-primary-light: rgba(31, 166, 230, 0.10);
  --xl-primary-border: rgba(31, 166, 230, 0.25);

  /* Brand Secondary & Accents */
  --xl-secondary: #43C9E6;
  --xl-secondary-hover: #26BBDC;
  --xl-secondary-light: rgba(67, 201, 230, 0.12);

  --xl-accent-gold: #F8B21C;
  --xl-accent-gold-hover: #E5A110;
  --xl-accent-gold-light: rgba(248, 178, 28, 0.12);
  --xl-accent-gold-border: rgba(248, 178, 28, 0.30);

  /* Functional Status Colors */
  --xl-success: #10B981;
  --xl-success-bg: #ECFDF5;
  --xl-success-border: #A7F3D0;
  --xl-success-text: #065F46;

  --xl-warning: #F59E0B;
  --xl-warning-bg: #FFFBEB;
  --xl-warning-border: #FDE68A;
  --xl-warning-text: #92400E;

  --xl-danger: #EF4444;
  --xl-danger-bg: #FEF2F2;
  --xl-danger-border: #FECACA;
  --xl-danger-text: #991B1B;

  --xl-info: #0284C7;
  --xl-info-bg: #F0F9FF;
  --xl-info-border: #BAE6FD;
  --xl-info-text: #075985;

  /* Neutral Palette - Light Mode */
  --xl-bg-page: #F8FAFC;
  --xl-bg-card: #FFFFFF;
  --xl-bg-sub: #F1F5F9;
  --xl-bg-muted: #F8FAFC;
  --xl-bg-input: #FFFFFF;

  --xl-text-main: #0F172A;
  --xl-text-sub: #475569;
  --xl-text-muted: #94A3B8;
  --xl-text-inverse: #FFFFFF;

  --xl-border: #E2E8F0;
  --xl-border-hover: #CBD5E1;
  --xl-border-focus: #1FA6E6;

  /* Typography Ladder */
  --xl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --xl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --xl-text-xs: 11px;
  --xl-text-sm: 12px;
  --xl-text-base: 14px;
  --xl-text-md: 15px;
  --xl-text-lg: 16px;
  --xl-text-xl: 18px;
  --xl-text-2xl: 22px;
  --xl-text-3xl: 28px;

  --xl-lh-tight: 1.25;
  --xl-lh-normal: 1.5;
  --xl-lh-relaxed: 1.65;

  /* Spacing Scale */
  --xl-space-1: 4px;
  --xl-space-2: 8px;
  --xl-space-3: 12px;
  --xl-space-4: 16px;
  --xl-space-5: 20px;
  --xl-space-6: 24px;
  --xl-space-8: 32px;
  --xl-space-10: 40px;
  --xl-space-12: 48px;

  /* Border Radius Ladder */
  --xl-radius-xs: 4px;
  --xl-radius-sm: 6px;
  --xl-radius-md: 0px;
  --xl-radius-lg: 0px;
  --xl-radius-xl: 0px;
  --xl-radius-full: 9999px;

  /* Elevation Shadows */
  --xl-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --xl-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --xl-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --xl-shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.10);
  --xl-shadow-hover: 0 12px 30px rgba(31, 166, 230, 0.15);

  /* Transitions */
  --xl-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --xl-transition-fast: all 0.15s ease;

  /* Z-Index Ladder */
  --xl-z-dropdown: 1000;
  --xl-z-sticky: 1020;
  --xl-z-modal: 1050;
  --xl-z-toast: 1080;
}

/* ==========================================================================
   2. DARK THEME OVERRIDES ([data-theme="dark"] or .dark-theme)
   ========================================================================== */
html[data-theme-mode="night"],
[data-theme-mode="night"],
[data-theme="dark"],
.dark-theme {
  --xl-primary: #38BDF8;
  --xl-primary-hover: #60A5FA;
  --xl-primary-active: #2563EB;
  --xl-primary-dark: #60A5FA;
  --xl-primary-light: rgba(56, 189, 248, 0.15);
  --xl-primary-border: rgba(56, 189, 248, 0.35);

  --xl-secondary: #22D3EE;
  --xl-secondary-hover: #67E8F9;
  --xl-secondary-light: rgba(34, 211, 238, 0.15);

  --xl-accent-gold: #FBBF24;
  --xl-accent-gold-hover: #FCD34D;
  --xl-accent-gold-light: rgba(251, 191, 36, 0.15);
  --xl-accent-gold-border: rgba(251, 191, 36, 0.35);

  /* Functional Status Colors in Dark */
  --xl-success: #34D399;
  --xl-success-bg: rgba(16, 185, 129, 0.16);
  --xl-success-border: rgba(52, 211, 153, 0.35);
  --xl-success-text: #A7F3D0;

  --xl-warning: #FBBF24;
  --xl-warning-bg: rgba(245, 158, 11, 0.16);
  --xl-warning-border: rgba(251, 191, 36, 0.35);
  --xl-warning-text: #FDE68A;

  --xl-danger: #F87171;
  --xl-danger-bg: rgba(239, 68, 68, 0.16);
  --xl-danger-border: rgba(248, 113, 113, 0.35);
  --xl-danger-text: #FECACA;

  --xl-info: #38BDF8;
  --xl-info-bg: rgba(2, 132, 199, 0.16);
  --xl-info-border: rgba(56, 189, 248, 0.35);
  --xl-info-text: #BAE6FD;

  /* Neutral Palette - Dark Mode */
  --xl-bg-page: #0B1120;
  --xl-bg-card: #131B2E;
  --xl-bg-sub: #1E293B;
  --xl-bg-muted: #0F172A;
  --xl-bg-input: #0F172A;

  --xl-text-main: #F8FAFC;
  --xl-text-sub: #94A3B8;
  --xl-text-muted: #64748B;
  --xl-text-inverse: #0F172A;

  --xl-border: #233148;
  --xl-border-hover: #334155;
  --xl-border-focus: #38BDF8;

  --xl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --xl-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --xl-shadow-md: 0 4px 18px rgba(0, 0, 0, 0.5);
  --xl-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  --xl-shadow-hover: 0 12px 30px rgba(56, 189, 248, 0.2);
}

/* ==========================================================================
   3. BASE RESETS & TYPOGRAPHY SYSTEM
   ========================================================================== */
.xl-body {
  font-family: var(--xl-font-sans);
  font-size: var(--xl-text-base);
  line-height: var(--xl-lh-normal);
  color: var(--xl-text-main);
  background-color: var(--xl-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
.xl-h1 { font-size: var(--xl-text-3xl); font-weight: 800; line-height: var(--xl-lh-tight); color: var(--xl-text-main); margin: 0 0 var(--xl-space-4); }
.xl-h2 { font-size: var(--xl-text-2xl); font-weight: 700; line-height: var(--xl-lh-tight); color: var(--xl-text-main); margin: 0 0 var(--xl-space-3); }
.xl-h3 { font-size: var(--xl-text-xl);  font-weight: 700; line-height: var(--xl-lh-tight); color: var(--xl-text-main); margin: 0 0 var(--xl-space-3); }
.xl-h4 { font-size: var(--xl-text-lg);  font-weight: 600; line-height: var(--xl-lh-normal); color: var(--xl-text-main); margin: 0 0 var(--xl-space-2); }

/* Section Header Bar */
.xl-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--xl-space-4);
  padding-bottom: var(--xl-space-2);
  border-bottom: 2px solid var(--xl-border);
}
.xl-section-title {
  display: flex;
  align-items: center;
  gap: var(--xl-space-2);
  font-size: var(--xl-text-xl);
  font-weight: 700;
  color: var(--xl-text-main);
}
.xl-section-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--xl-primary);
  border-radius: var(--xl-radius-xs);
}

/* ==========================================================================
   4. BUTTON COMPONENTS (.xl-btn)
   ========================================================================== */
.xl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--xl-font-sans);
  font-size: var(--xl-text-base);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--xl-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--xl-transition);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.xl-btn:focus-visible {
  outline: 2px solid var(--xl-primary);
  outline-offset: 2px;
}
.xl-btn:disabled,
.xl-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Variants */
.xl-btn-primary {
  background: linear-gradient(135deg, var(--xl-primary), var(--xl-primary-dark));
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(31, 166, 230, 0.25);
}
.xl-btn-primary:hover {
  background: linear-gradient(135deg, var(--xl-primary-hover), var(--xl-primary-dark));
  box-shadow: 0 4px 12px rgba(31, 166, 230, 0.35);
  transform: translateY(-1px);
  color: #FFFFFF;
}

.xl-btn-secondary {
  background: var(--xl-secondary);
  color: #0F172A;
  font-weight: 700;
}
.xl-btn-secondary:hover {
  background: var(--xl-secondary-hover);
  color: #0F172A;
  transform: translateY(-1px);
}

.xl-btn-outline {
  background: transparent;
  border-color: var(--xl-border);
  color: var(--xl-text-main);
}
.xl-btn-outline:hover {
  border-color: var(--xl-primary);
  color: var(--xl-primary);
  background: var(--xl-primary-light);
}

.xl-btn-ghost {
  background: transparent;
  color: var(--xl-text-sub);
}
.xl-btn-ghost:hover {
  color: var(--xl-primary);
  background: var(--xl-primary-light);
}

.xl-btn-gold {
  background: linear-gradient(135deg, var(--xl-accent-gold), #D97706);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(248, 178, 28, 0.25);
}
.xl-btn-gold:hover {
  background: linear-gradient(135deg, var(--xl-accent-gold-hover), #B45309);
  box-shadow: 0 4px 12px rgba(248, 178, 28, 0.35);
  transform: translateY(-1px);
  color: #FFFFFF;
}

/* Button Sizes */
.xl-btn-sm {
  padding: 5px 10px;
  font-size: var(--xl-text-sm);
  border-radius: var(--xl-radius-sm);
}
.xl-btn-lg {
  padding: 12px 24px;
  font-size: var(--xl-text-lg);
  border-radius: var(--xl-radius-lg);
}

/* ==========================================================================
   5. BADGES & PILLS (.xl-badge)
   ========================================================================== */
.xl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--xl-text-xs);
  font-weight: 600;
  border-radius: var(--xl-radius-full);
  line-height: 1.4;
  white-space: nowrap;
}
.xl-badge-primary {
  background: var(--xl-primary-light);
  color: var(--xl-primary);
  border: 1px solid var(--xl-primary-border);
}
.xl-badge-hot {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.xl-badge-vip {
  background: var(--xl-accent-gold-light);
  color: #D97706;
  border: 1px solid var(--xl-accent-gold-border);
}
[data-theme="dark"] .xl-badge-vip,
.dark-theme .xl-badge-vip {
  color: #FBBF24;
}
.xl-badge-new {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.xl-badge-tag {
  background: var(--xl-bg-sub);
  color: var(--xl-text-sub);
  border: 1px solid var(--xl-border);
  transition: var(--xl-transition-fast);
  text-decoration: none;
}
.xl-badge-tag:hover {
  background: var(--xl-primary-light);
  color: var(--xl-primary);
  border-color: var(--xl-primary-border);
}

/* ==========================================================================
   6. TABS COMPONENT (.xl-tabs) - 支持今日/本周/本月热门
   ========================================================================== */
.xl-tabs-header {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--xl-bg-sub);
  padding: 4px;
  border-radius: var(--xl-radius-md);
  border: 1px solid var(--xl-border);
  user-select: none;
}
.xl-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--xl-font-sans);
  font-size: var(--xl-text-sm);
  font-weight: 600;
  color: var(--xl-text-sub);
  background: transparent;
  border: none;
  border-radius: var(--xl-radius-sm);
  cursor: pointer;
  transition: var(--xl-transition);
}
.xl-tab-btn:hover {
  color: var(--xl-text-main);
}
.xl-tab-btn.active {
  color: var(--xl-primary);
  background: var(--xl-bg-card);
  box-shadow: var(--xl-shadow-xs);
}
.xl-tab-pane {
  display: none;
}
.xl-tab-pane.active {
  display: block;
  animation: xlFadeIn 0.25s ease-out;
}

@keyframes xlFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   7. CARDS & RESOURCE LIST COMPONENT (.xl-card)
   ========================================================================== */
.xl-card {
  background: var(--xl-bg-card);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-lg);
  box-shadow: var(--xl-shadow-sm);
  overflow: hidden;
  transition: var(--xl-transition);
}
.xl-card:hover {
  border-color: var(--xl-primary-border);
  box-shadow: var(--xl-shadow-hover);
  transform: translateY(-2px);
}
.xl-card-body {
  padding: var(--xl-space-4);
}

/* Resource Item Card Grid */
.xl-resource-card {
  display: flex;
  flex-direction: column;
  background: var(--xl-bg-card);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-lg);
  overflow: hidden;
  transition: var(--xl-transition);
  text-decoration: none;
  color: inherit;
}
.xl-resource-card:hover {
  border-color: var(--xl-primary);
  box-shadow: var(--xl-shadow-hover);
  transform: translateY(-3px);
}
.xl-resource-thumb-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  background: var(--xl-bg-sub);
  overflow: hidden;
}
.xl-resource-thumb-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.xl-resource-card:hover .xl-resource-thumb-box img {
  transform: scale(1.05);
}
.xl-resource-corner-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}
.xl-resource-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 14px;
}
.xl-resource-title {
  font-size: var(--xl-text-base);
  font-weight: 600;
  line-height: 1.45;
  color: var(--xl-text-main);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s ease;
}
.xl-resource-card:hover .xl-resource-title {
  color: var(--xl-primary);
}
.xl-resource-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: var(--xl-text-xs);
  color: var(--xl-text-muted);
}
.xl-resource-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   8. AD CONTAINER UNIFIED DESIGN (.xl-ad-box)
   ========================================================================== */
.xl-ad-box {
  position: relative;
  background: var(--xl-bg-sub);
  border: 1px dashed var(--xl-border);
  border-radius: var(--xl-radius-md);
  padding: 12px;
  margin: var(--xl-space-4) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: var(--xl-transition-fast);
}
.xl-ad-box:hover {
  border-color: var(--xl-border-hover);
}
.xl-ad-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  color: var(--xl-text-muted);
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  user-select: none;
}
[data-theme="dark"] .xl-ad-badge,
.dark-theme .xl-ad-badge {
  background: rgba(255, 255, 255, 0.08);
}
.xl-ad-content {
  width: 100%;
  display: block;
  text-align: center;
  box-sizing: border-box;
}
.xl-ad-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--xl-radius-sm);
  margin: 0 auto;
}

/* Shortcuts & Tools Grid inside Ad Container (e.g. Ad 18) */
.xl-ad-content .top1 {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: flex-start !important;
  margin: 10px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.xl-ad-content .top1 > div {
  margin: 0 !important;
  flex: 1 1 25% !important;
  max-width: 25% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.xl-ad-content .top1 > div a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  padding: 6px 2px !important;
  border-radius: var(--xl-radius-md) !important;
  transition: all 0.2s ease !important;
}
.xl-ad-content .top1 > div a:hover {
  background: var(--xl-primary-bg) !important;
  transform: translateY(-2px) !important;
}
.xl-ad-content .top1 > div img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  margin: 0 auto 6px auto !important;
  display: block !important;
  object-fit: cover !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.xl-ad-content .top1 > div a:hover img {
  box-shadow: 0 6px 14px rgba(22, 119, 255, 0.25) !important;
  transform: scale(1.05) !important;
}
.xl-ad-content .top1 p {
  margin: 0 !important;
  line-height: 1.3 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--xl-text-main) !important;
  white-space: nowrap !important;
  letter-spacing: 0.3px !important;
}
html[data-theme-mode="night"] .xl-ad-content .top1 > div a:hover {
  background: rgba(81, 161, 255, 0.12) !important;
}
html[data-theme-mode="night"] .xl-ad-content .top1 p {
  color: var(--xl-text-main) !important;
}

/* ==========================================================================
   HOMEPAGE CENTER: USER HERO CARD (.xl-home-user-hero)
   ========================================================================== */
.xl-home-user-hero {
  background: var(--xl-bg-card);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-lg);
  box-shadow: var(--xl-shadow-sm);
  padding: 12px 18px;
  margin-bottom: var(--xl-space-4);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}
.xl-home-user-hero:hover {
  border-color: var(--xl-border-hover);
  box-shadow: var(--xl-shadow-md);
}
.xl-user-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.xl-user-hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.xl-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--xl-radius-circle);
  background: var(--xl-primary-bg);
  color: var(--xl-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
  flex-shrink: 0;
}
.xl-user-avatar-active {
  background: linear-gradient(135deg, #1677ff 0%, #00b96b 100%);
  color: #fff;
}
.xl-user-meta {
  display: flex;
  flex-direction: column;
}
.xl-user-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--xl-text-main);
  line-height: 1.4;
}
.xl-user-desc {
  font-size: 12px;
  color: var(--xl-text-muted);
  line-height: 1.4;
}
.xl-user-hero-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.xl-user-link-muted {
  font-size: 12px;
  color: var(--xl-text-muted);
  text-decoration: none;
  padding: 4px 6px;
  transition: color 0.2s ease;
}
.xl-user-link-muted:hover {
  color: var(--xl-primary);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .xl-user-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .xl-user-hero-right {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Top Bar Auth Links Modern Override */
#topUserBox {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
}
#topUserBox a.font2_1,
#topUserBox a {
  color: var(--xl-text-sub) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-family: inherit !important;
}
#topUserBox a.font2_1:hover,
#topUserBox a:hover {
  color: var(--xl-primary) !important;
  text-decoration: none !important;
}
#topUserBox .left {
  color: var(--xl-border-hover) !important;
  display: inline-flex !important;
  align-items: center !important;
}
html[data-theme-mode="night"] #topUserBox a.font2_1,
html[data-theme-mode="night"] #topUserBox a {
  color: var(--xl-text-sub) !important;
}
html[data-theme-mode="night"] #topUserBox a.font2_1:hover,
html[data-theme-mode="night"] #topUserBox a:hover {
  color: var(--xl-primary-hover) !important;
}

/* ==========================================================================
   9. BREADCRUMBS (.xl-breadcrumb)
   ========================================================================== */
.xl-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--xl-text-sm);
  color: var(--xl-text-muted);
  margin-bottom: var(--xl-space-4);
  padding: 8px 12px;
  background: var(--xl-bg-card);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-md);
}
.xl-breadcrumb a {
  color: var(--xl-text-sub);
  text-decoration: none;
  transition: color 0.15s ease;
}
.xl-breadcrumb a:hover {
  color: var(--xl-primary);
}
.xl-breadcrumb-sep {
  color: var(--xl-text-muted);
  opacity: 0.6;
}
.xl-breadcrumb-current {
  color: var(--xl-text-main);
  font-weight: 600;
}

/* ==========================================================================
   10. PAGINATION (.xl-pagination)
   ========================================================================== */
.xl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: var(--xl-space-6) 0;
  user-select: none;
}
.xl-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: var(--xl-text-sm);
  font-weight: 600;
  color: var(--xl-text-sub);
  background: var(--xl-bg-card);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: var(--xl-transition);
}
.xl-page-btn:hover {
  color: var(--xl-primary);
  border-color: var(--xl-primary-border);
  background: var(--xl-primary-light);
}
.xl-page-btn.active {
  color: #FFFFFF;
  background: var(--xl-primary);
  border-color: var(--xl-primary);
  box-shadow: 0 2px 6px rgba(31, 166, 230, 0.3);
}
.xl-page-btn.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ==========================================================================
   11. FORM CONTROLS (.xl-input, .xl-select)
   ========================================================================== */
.xl-form-group {
  margin-bottom: var(--xl-space-4);
}
.xl-form-label {
  display: block;
  font-size: var(--xl-text-sm);
  font-weight: 600;
  color: var(--xl-text-main);
  margin-bottom: 6px;
}
.xl-input,
.xl-select {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--xl-font-sans);
  font-size: var(--xl-text-base);
  color: var(--xl-text-main);
  background: var(--xl-bg-input);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-md);
  box-sizing: border-box;
  transition: var(--xl-transition);
}
.xl-input:focus,
.xl-select:focus {
  outline: none;
  border-color: var(--xl-border-focus);
  box-shadow: 0 0 0 3px var(--xl-primary-light);
}
.xl-input::placeholder {
  color: var(--xl-text-muted);
}

/* ==========================================================================
   12. ALERTS & CALLOUTS (.xl-alert)
   ========================================================================== */
.xl-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--xl-radius-md);
  border: 1px solid transparent;
  font-size: var(--xl-text-sm);
  line-height: 1.5;
  margin-bottom: var(--xl-space-4);
}
.xl-alert-info {
  background: var(--xl-info-bg);
  border-color: var(--xl-info-border);
  color: var(--xl-info-text);
}
.xl-alert-success {
  background: var(--xl-success-bg);
  border-color: var(--xl-success-border);
  color: var(--xl-success-text);
}
.xl-alert-warning {
  background: var(--xl-warning-bg);
  border-color: var(--xl-warning-border);
  color: var(--xl-warning-text);
}
.xl-alert-danger {
  background: var(--xl-danger-bg);
  border-color: var(--xl-danger-border);
  color: var(--xl-danger-text);
}

/* ==========================================================================
   13. RANKING LIST (.xl-rank-list)
   ========================================================================== */
.xl-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.xl-rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--xl-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.xl-rank-item:last-child {
  border-bottom: none;
}
.xl-rank-num {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: var(--xl-bg-sub);
  color: var(--xl-text-muted);
  flex-shrink: 0;
}
.xl-rank-item:nth-child(1) .xl-rank-num { background: #EF4444; color: #FFFFFF; }
.xl-rank-item:nth-child(2) .xl-rank-num { background: #F97316; color: #FFFFFF; }
.xl-rank-item:nth-child(3) .xl-rank-num { background: #F59E0B; color: #FFFFFF; }
.xl-rank-title {
  flex: 1;
  font-size: var(--xl-text-sm);
  font-weight: 500;
  color: var(--xl-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xl-rank-item:hover .xl-rank-title {
  color: var(--xl-primary);
}
.xl-rank-views {
  font-size: var(--xl-text-xs);
  color: var(--xl-text-muted);
  flex-shrink: 0;
}


/* ==========================================================================
   PRECISION ALIGNMENT & SYMMETRY ENHANCEMENTS
   ========================================================================== */
.mainMenu {
  clear: both !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--xl-bg-card) !important;
  border-radius: var(--xl-radius-md) !important;
  box-shadow: var(--xl-shadow-sm) !important;
  border: 1px solid var(--xl-border) !important;
  overflow: visible !important;
  margin: 10px 0 12px 0 !important;
}
.navMenu {
  float: none !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
.navMenu > ul.topnav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.navMenu > ul.topnav > li {
  float: none !important;
  line-height: 44px !important;
}
.navMenu > ul.topnav > li > a {
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--xl-text-main) !important;
  transition: all 0.2s ease !important;
  text-shadow: none !important;
}
.navMenu > ul.topnav > li:hover > a {
  color: var(--xl-primary) !important;
}

/* Card Header Reset (.itemTitle & .itemTitle2) */
.itemTitle {
  height: 42px !important;
  line-height: 42px !important;
  background: var(--xl-bg-sub) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--xl-border) !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  text-indent: 0 !important;
  gap: 8px !important;
}
.itemTitle.searchTitle {
  justify-content: center !important;
}
.itemTitle.newTitle {
  justify-content: center !important;
}
.itemTitle i.layui-icon,
.itemTitle2 i.layui-icon,
.itemTitle .searchIco {
  font-size: 18px !important;
  color: var(--xl-primary) !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  float: none !important;
}
.itemTitle .xl-box-title,
.itemTitle2 .xl-box-title,
.itemTitle span:not(.xl-badge):not(.xl-rank-num):not(.xl-rank-views) {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--xl-text-main) !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  line-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.itemTitle2 a {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--xl-text-main) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.itemTitle2 a span {
  display: none !important;
}

/* Ad 18 Shortcut Navigation 4x2 Symmetric Grid */
.xl-ad-content {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.xl-ad-content .top1 {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 10px 0 !important;
  padding: 0 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}
.xl-ad-content .top1 > div {
  margin: 0 !important;
  flex: 1 1 25% !important;
  max-width: 25% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.xl-ad-content .top1 > div a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  padding: 8px 4px !important;
  border-radius: var(--xl-radius-md) !important;
  transition: all 0.2s ease !important;
}
.xl-ad-content .top1 > div a:hover {
  background: var(--xl-primary-bg) !important;
  transform: translateY(-2px) !important;
}
.xl-ad-content .top1 > div img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  margin: 0 auto 6px auto !important;
  display: block !important;
  object-fit: cover !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.xl-ad-content .top1 > div a:hover img {
  box-shadow: 0 6px 14px rgba(22, 119, 255, 0.25) !important;
  transform: scale(1.05) !important;
}
.xl-ad-content .top1 p {
  margin: 0 !important;
  line-height: 1.3 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--xl-text-main) !important;
  white-space: nowrap !important;
}

/* User Hero Card (Homepage Center) */
.xl-home-user-hero {
  background: var(--xl-bg-card) !important;
  border: 1px solid var(--xl-border) !important;
  border-radius: var(--xl-radius-lg) !important;
  box-shadow: var(--xl-shadow-sm) !important;
  padding: 14px 20px !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}
.xl-user-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.xl-user-hero-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.xl-user-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: var(--xl-primary-bg) !important;
  color: var(--xl-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15) !important;
}
.xl-user-avatar i.layui-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  color: var(--xl-primary) !important;
}
.xl-user-meta {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}
.xl-user-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--xl-text-main) !important;
  line-height: 1.4 !important;
}
.xl-user-desc {
  font-size: 12px !important;
  color: var(--xl-text-muted) !important;
  line-height: 1.4 !important;
}
.xl-user-hero-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.xl-user-hero-right .xl-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  border-radius: var(--xl-radius-md) !important;
  text-decoration: none !important;
}
.xl-user-hero-right .xl-btn i.layui-icon {
  font-size: 14px !important;
  line-height: 1 !important;
  margin: 0 !important;
}


/* ==========================================================================
   NAVIGATION BAR PERFECT CENTERING & SCROLLFIX ANCHOR
   ========================================================================== */
.mainMenu {
  clear: both !important;
  width: 1036px !important;
  max-width: 1036px !important;
  margin: 10px auto 12px auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border-radius: var(--xl-radius-md) !important;
  box-shadow: var(--xl-shadow-sm) !important;
  border: 1px solid var(--xl-border) !important;
  overflow: visible !important;
  position: relative;
  z-index: 900 !important;
}

/* When sticky/scrollfixed is triggered */
.mainMenu.scrollfixed {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 1036px !important;
  max-width: 1036px !important;
  margin: 0 !important;
  z-index: 99999 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  border-radius: 0 0 var(--xl-radius-md) var(--xl-radius-md) !important;
  border-top: 0 !important;
}

.mainMenu .navMenu {
  float: none !important;
  width: 100% !important;
  max-width: 1036px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

.mainMenu .navMenu > ul.topnav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  height: 44px !important;
  margin: 0 auto !important;
  padding: 0 8px !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

.mainMenu .navMenu > ul.topnav > li {
  flex: 1 1 0 !important;
  width: auto !important;
  text-align: center !important;
  float: none !important;
  line-height: 44px !important;
  position: relative !important;
}

.mainMenu .navMenu > ul.topnav > li > .itemMenu {
  float: none !important;
  width: 100% !important;
  text-align: center !important;
}

.mainMenu .navMenu > ul.topnav > li > .itemMenu > a {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--xl-text-main) !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.mainMenu .navMenu > ul.topnav > li:hover > .itemMenu > a {
  color: var(--xl-primary) !important;
}

/* ==========================================================================
   ARTICLE LIST: TITLE TRUNCATION & DATE SEPARATION (NO OVERLAPPING)
   ========================================================================== */
.newListDL ul {
  display: flex;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 4px 6px !important;
  margin: 0 !important;
}

.newListDL ul li.column.half,
.areaR .newListDL ul li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 50% !important;
  box-sizing: border-box !important;
  padding: 6px 10px !important;
  height: 34px !important;
  line-height: 34px !important;
  overflow: hidden !important;
  border-bottom: 1px dashed var(--xl-border) !important;
  float: none !important;
  transition: background 0.15s ease !important;
}

.newListDL ul li.column.half:hover,
.areaR .newListDL ul li:hover {
  background: var(--xl-bg-sub) !important;
}

/* Image / icon on the left (order 1) */
.newListDL ul li.column.half img,
.areaR .newListDL ul li img {
  order: 1 !important;
  flex-shrink: 0 !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* Article title in the middle (order 2, auto-truncate with ellipsis) */
.newListDL ul li.column.half a,
.areaR .newListDL ul li a {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-right: 12px !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
}

.newListDL ul li.column.half a:not([style*="color"]),
.areaR .newListDL ul li a:not([style*="color"]) {
  color: var(--xl-text-main) !important;
}

.newListDL ul li.column.half a:not([style*="color"]):hover,
.areaR .newListDL ul li a:not([style*="color"]):hover {
  color: var(--xl-primary) !important;
}

/* Date on the right (order 3, pinned to right edge, never overlaps) */
.newListDL ul li.column.half span,
.areaR .newListDL ul li span {
  order: 3 !important;
  flex-shrink: 0 !important;
  float: none !important;
  margin-left: auto !important;
  font-size: 12px !important;
  color: var(--xl-text-muted) !important;
  white-space: nowrap !important;
  text-align: right !important;
  min-width: 42px !important;
}

.newListDL ul li.column.half span.redFontClass,
.areaR .newListDL ul li span.redFontClass {
  color: var(--xl-danger, #ff4d4f) !important;
  font-weight: 500 !important;
}


/* ==========================================================================
   PUBLIC HEADER & FOOTER DESIGN SYSTEM COMPONENT SUITE
   ========================================================================== */

/* Header Utility Bar */
.htmlBodyTop {
  background: var(--xl-bg-card, #ffffff) !important;
  border-bottom: 1px solid var(--xl-border) !important;
  width: 100% !important;
  min-width: 1036px !important;
  height: 36px !important;
  line-height: 36px !important;
  box-sizing: border-box !important;
}
.topBody {
  width: 1036px !important;
  margin: 0 auto !important;
  background-color: var(--xl-bg-card, #ffffff) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.topMenu {
  height: 36px !important;
  line-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
.topMenu .a {
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
}
.topMenu .b {
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  overflow: visible !important;
}
.topMenuClass {
  color: var(--xl-text-sub) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.topMenuClass:hover {
  color: var(--xl-primary) !important;
}

/* Header Logo & Top Banners */
.topLogo {
  padding: 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
.topLogo .a img,
.topLogo img {
  max-height: 56px !important;
  width: auto !important;
  display: block !important;
}

/* Sub-page Breadcrumb / Marquee Banner (.pointBox) */
.pointBox {
  background: var(--xl-bg-sub, #f8fafc) !important;
  border: 1px solid var(--xl-border) !important;
  border-radius: var(--xl-radius-md) !important;
  padding: 8px 14px !important;
  margin: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  font-size: 13px !important;
  color: var(--xl-text-sub) !important;
  box-sizing: border-box !important;
}
.pointBox img {
  margin-right: 8px !important;
  opacity: 0.8 !important;
}
.pointBox a {
  color: var(--xl-text-main) !important;
  text-decoration: none !important;
  margin: 0 4px !important;
}
.pointBox a:hover {
  color: var(--xl-primary) !important;
}

/* Footer Section (.bottomBox) */
.bottomBox {
  background: var(--xl-bg-card, #ffffff) !important;
  border-top: 1px solid var(--xl-border) !important;
  padding: 24px 0 20px 0 !important;
  margin-top: 20px !important;
  color: var(--xl-text-muted) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Friendship Links in Footer */
.linkMain {
  padding: 14px !important;
  background: var(--xl-bg-sub, #f8fafc) !important;
  border-radius: var(--xl-radius-md) !important;
  margin-top: 8px !important;
  line-height: 2 !important;
  box-sizing: border-box !important;
}
.linkMain a {
  display: inline-block !important;
  padding: 3px 12px !important;
  margin: 3px 4px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border) !important;
  border-radius: var(--xl-radius-sm) !important;
  font-size: 13px !important;
  color: var(--xl-text-sub) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.linkMain a:hover {
  background: var(--xl-primary-bg) !important;
  border-color: var(--xl-primary) !important;
  color: var(--xl-primary) !important;
  transform: translateY(-1px) !important;
}
.linkMain .font1_1d {
  display: none !important;
}

/* Footer Navigation Links (.bottomMenu) */
.bottomMenu {
  text-align: center !important;
  padding: 16px 0 12px 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
}
.bottomMenu a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--xl-text-sub) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.bottomMenu a:hover {
  color: var(--xl-primary) !important;
}
.bottomMenu span.font1_1d {
  color: var(--xl-border) !important;
}

/* Footer Accent Divider Line (.bottomLine) */
.bottomLine {
  width: 100% !important;
  max-width: 1036px !important;
  height: 2px !important;
  margin: 8px auto 16px auto !important;
  background: linear-gradient(90deg, transparent, var(--xl-primary), transparent) !important;
  border-radius: 2px !important;
}

/* Footer Copyright & Disclaimers (.bottomCopyright) */
.bottomCopyright {
  font-size: 12.5px !important;
  line-height: 1.8 !important;
  color: var(--xl-text-muted) !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
.bottomCopyright a {
  color: var(--xl-text-sub) !important;
  text-decoration: none !important;
}
.bottomCopyright a:hover {
  color: var(--xl-primary) !important;
}
.bottomCopyright p {
  margin: 4px 0 !important;
}

/* Modern Back to Top Floating Button */
.xl-back-top {
  position: fixed !important;
  right: 28px !important;
  bottom: 36px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--xl-bg-card, #ffffff) !important;
  color: var(--xl-primary) !important;
  border: 1px solid var(--xl-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  z-index: 99999 !important;
}
.xl-back-top:hover {
  background: var(--xl-primary) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(22, 119, 255, 0.3) !important;
}

/* Auto-hide empty ad containers */
.xl-ad-box:empty,
.xl-ad-box:has(.xl-ad-content:empty) {
  display: none !important;
}


/* ==========================================================================
   头部“手机版”下拉二维码组件 (Zero-Flicker Architecture)
   ========================================================================== */
.topMenu,
.topMenu ul,
.topMenu .b,
.topMenu .right {
  overflow: visible !important;
}

.xl-wap-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

.xl-wap-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 7px !important;
  border-radius: var(--xl-radius-sm, 6px) !important;
  color: var(--xl-text-sub, #475569) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  user-select: none !important;
}

.xl-wap-trigger:hover,
.xl-wap-dropdown:hover .xl-wap-trigger,
.xl-wap-dropdown.is-active .xl-wap-trigger {
  color: var(--xl-primary, #1677ff) !important;
  background: var(--xl-primary-bg, #e6f4ff) !important;
  border-color: rgba(22, 119, 255, 0.2) !important;
}

.xl-wap-caret {
  transition: transform 0.2s ease !important;
}
.xl-wap-dropdown:hover .xl-wap-caret,
.xl-wap-dropdown.is-active .xl-wap-caret {
  transform: rotate(180deg) !important;
}

/* 核心无缝悬浮层：采用 padding-top 建立透明鼠标桥接区，彻底防止 hover 断触与循环闪烁 */
.xl-wap-popover {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  padding-top: 6px !important; /* 鼠标安全桥接通道 */
  z-index: 999999 !important;
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 无论是悬停还是点击锁定展开，均稳定呈现 */
.xl-wap-dropdown:hover .xl-wap-popover,
.xl-wap-dropdown.is-active .xl-wap-popover {
  display: block !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.xl-wap-popover-card {
  width: 156px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-md, 10px) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
  padding: 12px 10px 10px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html[data-theme-mode="night"] .xl-wap-popover-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;
}

.xl-wap-qr-frame {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 6px !important;
  background: #ffffff !important;
  border-radius: var(--xl-radius-sm, 6px) !important;
  border: 1px solid #f1f5f9 !important;
  margin: 0 auto !important;
  width: 120px !important;
  height: 120px !important;
  box-sizing: content-box !important;
}

.xl-wap-qr-frame {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 5px !important;
  background: #ffffff !important;
  border-radius: var(--xl-radius-sm, 6px) !important;
  border: 1px solid #f1f5f9 !important;
  margin: 0 auto !important;
  width: 120px !important;
  height: 120px !important;
  box-sizing: content-box !important;
  overflow: hidden !important;
}

#xlWapQrImg {
  width: 120px !important;
  height: 120px !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

.xl-wap-qr-frame canvas {
  display: none !important;
}

.xl-wap-qr-frame img {
  display: block !important;
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto !important;
}

.xl-wap-qr-title {
  margin-top: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--xl-text-main, #1e293b) !important;
  line-height: 1.4 !important;
}

html[data-theme-mode="night"] .xl-wap-qr-title {
  color: #f1f5f9 !important;
}

.xl-wap-qr-sub {
  font-size: 11px !important;
  color: var(--xl-muted, #94a3b8) !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}

.xl-wap-qr-divider {
  height: 1px !important;
  background: var(--xl-border, #e2e8f0) !important;
  margin: 8px 0 6px !important;
  opacity: 0.6 !important;
}

.xl-wap-qr-direct {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 11px !important;
  color: var(--xl-primary, #1677ff) !important;
  text-decoration: none !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
}

.xl-wap-qr-direct:hover {
  text-decoration: underline !important;
  color: var(--xl-primary-hover, #4096ff) !important;
}


/* ==========================================================================
   文章列表页 (list.html) & 侧边栏 (news_right.html) 现代响应式重构
   ========================================================================== */
.subArea {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin: 12px 0 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.subAreaL {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  float: none !important;
}

.subAreaR {
  width: 260px !important;
  flex: 0 0 260px !important;
  float: none !important;
}

.xl-list-main-card {
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-md, 10px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

/* 子分类导航标签栏 */
.xl-subnav-wrap {
  padding: 12px 16px 8px !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border-bottom: 1px solid var(--xl-border, #e2e8f0) !important;
}

.subNavMenu {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: auto !important;
  width: 100% !important;
}

.subNavMenu li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.subNavMenu li a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  color: var(--xl-text-sub, #475569) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.subNavMenu li a:hover {
  background: var(--xl-primary-bg, #e6f4ff) !important;
  color: var(--xl-primary, #1677ff) !important;
  border-color: rgba(22, 119, 255, 0.35) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.15) !important;
}

.subNavMenu li.curr a,
.subNavMenu li a.current {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary, #1677ff) !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.25) !important;
}

/* 栏目内搜索框 */
.xl-list-search-wrap {
  padding: 14px 16px !important;
  display: flex !important;
  justify-content: center !important;
  background: var(--xl-bg-card, #ffffff) !important;
}

.xl-list-search-form {
  max-width: 440px !important;
  width: 100% !important;
}

.xl-search-input-group {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
}

.xl-search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--xl-muted, #94a3b8) !important;
  pointer-events: none !important;
}

.xl-search-input-group input[type="text"] {
  flex: 1 !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 14px 0 38px !important;
  border: 1px solid var(--xl-border, #cbd5e1) !important;
  border-right: none !important;
  border-radius: 20px 0 0 20px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  color: var(--xl-text-main, #1e293b) !important;
  font-size: 13px !important;
  outline: none !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
  box-sizing: border-box !important;
}

.xl-search-input-group input[type="text"]:focus {
  border-color: var(--xl-primary, #1677ff) !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12) !important;
}

.xl-search-btn {
  height: 38px !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: 0 20px 20px 0 !important;
  background: linear-gradient(135deg, var(--xl-primary, #1677ff), var(--xl-primary-hover, #4096ff)) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.2) !important;
}

.xl-search-btn:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3) !important;
}

.xuLine {
  height: 1px !important;
  background: var(--xl-border, #e2e8f0) !important;
  margin: 0 !important;
  opacity: 0.6 !important;
}

/* 文章列表项 */
.listArea {
  padding: 16px 18px 14px !important;
  border-bottom: 1px solid var(--xl-border-sub, #f1f5f9) !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
  position: relative !important;
  background: transparent !important;
  font-size: 14px !important;
}

.listArea:hover,
.subAreaL .listArea:hover {
  background: var(--xl-bg-hover, rgba(22, 119, 255, 0.025)) !important;
  border-bottom-color: var(--xl-border, #e2e8f0) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.listArea .titleBox {
  margin-bottom: 8px !important;
  padding-right: 90px !important;
}

.listArea .titleBox h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
}

.listArea .titleBox h2 a {
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  margin-left: 0 !important;
}

.listArea .titleBox h2 a:not([style*="color"]) {
  color: var(--xl-text-main, #1e293b) !important;
}

.listArea .titleBox h2 a:not([style*="color"]):hover {
  color: var(--xl-primary, #1677ff) !important;
  margin-left: 0 !important;
}

/* 阅读全文药丸按钮 */
.readBtn {
  float: right !important;
  margin-top: -26px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.readBtn a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 12px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--xl-primary, #1677ff) !important;
  background: var(--xl-primary-bg, #e6f4ff) !important;
  border: 1px solid rgba(22, 119, 255, 0.2) !important;
  text-decoration: none !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
}

.readBtn a:hover {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary, #1677ff) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.25) !important;
}

/* 文章元信息栏 */
.newsAddi {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  font-size: 12px !important;
  color: var(--xl-muted, #94a3b8) !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.newsAddi span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.newsAddi i {
  color: var(--xl-muted, #94a3b8) !important;
  margin-right: 2px !important;
}

.newsAddi a {
  color: var(--xl-muted, #64748b) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.newsAddi a:hover {
  color: var(--xl-primary, #1677ff) !important;
}

/* 分页条组件 (listNavBox) */
.listNavBox {
  width: auto !important;
  margin: 24px auto 16px !important;
  border-collapse: separate !important;
}

.listNavBox td {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  text-align: center !important;
}

.listNavBox .navBtn,
.listNavBox .navBtnPointer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: var(--xl-radius-sm, 6px) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  background: var(--xl-bg-card, #ffffff) !important;
  color: var(--xl-text-sub, #475569) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  float: none !important;
  margin: 0 !important;
}

.listNavBox .navBtn img,
.listNavBox .navBtnPointer img {
  margin: 0 !important;
  vertical-align: middle !important;
}

.listNavBox .navBtnPointer:hover {
  background: var(--xl-primary-bg, #e6f4ff) !important;
  color: var(--xl-primary, #1677ff) !important;
  border-color: var(--xl-primary, #1677ff) !important;
  transform: translateY(-1px) !important;
}

/* 当前激活页码 */
.listNavBox .fontNav2_2,
.listNavBox .navBtn.fontNav2_2 {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary, #1677ff) !important;
  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.3) !important;
  font-weight: 600 !important;
}

/* 分页统计信息 */
#listNavInfo {
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  color: var(--xl-muted, #64748b) !important;
  font-size: 12px !important;
  padding: 0 10px !important;
  height: 32px !important;
  line-height: 32px !important;
  cursor: default !important;
}

/* 分页跳转下拉 */
#listNavGoPage {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#listNavGoPage select {
  height: 32px !important;
  border-radius: var(--xl-radius-sm, 6px) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  background: var(--xl-bg-card, #ffffff) !important;
  color: var(--xl-text-main, #1e293b) !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  outline: none !important;
}

#listNavGoPage select:focus {
  border-color: var(--xl-primary, #1677ff) !important;
}

/* 面包屑导航条 */
.webPointBox {
  margin: 6px 0 12px 0 !important;
  padding: 8px 14px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-sm, 6px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

.webPointBox a {
  color: var(--xl-primary, #1677ff) !important;
  text-decoration: none !important;
}

.webPointBox a:hover {
  text-decoration: underline !important;
}

/* 黑夜模式自适应 */
html[data-theme-mode="night"] .xl-list-main-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .xl-subnav-wrap {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .subNavMenu li a {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .subNavMenu li a:hover {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border-color: #3b82f6 !important;
}

html[data-theme-mode="night"] .xl-list-search-wrap {
  background: #1e293b !important;
}

html[data-theme-mode="night"] .xl-search-input-group input[type="text"] {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html[data-theme-mode="night"] .listArea {
  border-bottom-color: #243042 !important;
}

html[data-theme-mode="night"] .listArea:hover,
html[data-theme-mode="night"] .subAreaL .listArea:hover {
  background: rgba(59, 130, 246, 0.05) !important;
}

html[data-theme-mode="night"] .readBtn a {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html[data-theme-mode="night"] .readBtn a:hover {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

html[data-theme-mode="night"] .listNavBox .navBtn,
html[data-theme-mode="night"] .listNavBox .navBtnPointer {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] #listNavInfo {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] #listNavGoPage select {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

html[data-theme-mode="night"] .webPointBox {
  background: #1e293b !important;
  border-color: #334155 !important;
}


/* ==========================================================================
   列表页 & 侧边栏精致化与昼夜色彩调优
   ========================================================================== */
.itemTitle {
  background: var(--xl-bg-card, #ffffff) !important;
  border-bottom: 1px solid var(--xl-border, #e2e8f0) !important;
  padding: 10px 16px !important;
  height: auto !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
}

.itemTitle .xl-box-title {
  color: var(--xl-text-main, #1e293b) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.itemTitle .xl-box-title::before {
  content: "" !important;
  display: inline-block !important;
  width: 3px !important;
  height: 14px !important;
  background: var(--xl-primary, #1677ff) !important;
  border-radius: 2px !important;
  margin-right: 8px !important;
}

/* 杜绝列表页每篇标题误用全局蓝色下划线 */
.listArea .titleBox {
  border-bottom: none !important;
}

html[data-theme-mode="night"] .listArea .titleBox {
  border-bottom: none !important;
}

html[data-theme-mode="night"] .listArea .titleBox h2 a:not([style*="color"]) {
  color: #f1f5f9 !important;
}

html[data-theme-mode="night"] .listArea .titleBox h2 a:not([style*="color"]):hover {
  color: #60a5fa !important;
}

html[data-theme-mode="night"] .itemTitle {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .itemTitle .xl-box-title {
  color: #f1f5f9 !important;
}

/* 侧边栏暗色模式高对比度阅读性 */
html[data-theme-mode="night"] .subAreaR .itemBox {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .subAreaR .newListDL a {
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] .subAreaR .newListDL a:hover {
  color: #60a5fa !important;
}

html[data-theme-mode="night"] .subAreaR .newListDL span {
  color: #64748b !important;
}

html[data-theme-mode="night"] .tagCloud a {
  background: #0f172a !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .tagCloud a:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
  border-color: #3b82f6 !important;
}


/* Ensure dark mode itemTitle text is always bright white */
html[data-theme-mode="night"] .itemTitle,
html[data-theme-mode="night"] .itemTitle .xl-box-title,
html[data-theme-mode="night"] .itemTitle span,
html[data-theme-mode="night"] .itemTitle2 .xl-box-title,
html[data-theme-mode="night"] .itemTitle2 span {
  color: #f1f5f9 !important;
}


/* ==========================================================================
   图文列表模式 (listBox2, listBox4) 与网格模式 (listBox3, listBox7) 现代重构
   ========================================================================== */
.subNavMenu li a {
  background: var(--xl-bg-card, #ffffff) !important;
  color: var(--xl-text-sub, #475569) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: 20px !important;
}

.subNavMenu li a:hover {
  background: var(--xl-primary-bg, #e6f4ff) !important;
  color: var(--xl-primary, #1677ff) !important;
  border-color: rgba(22, 119, 255, 0.35) !important;
}

/* 图文摘要列表 (Mode 4 / Mode 2) */
.listBox2 ul,
.listBox4 ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.listBox2 ul li,
.listBox4 ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 18px 18px 16px !important;
  border-bottom: 1px solid var(--xl-border-sub, #f1f5f9) !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
  background: transparent !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.listBox2 ul li:hover,
.listBox4 ul li:hover {
  background: var(--xl-bg-hover, rgba(22, 119, 255, 0.025)) !important;
}

/* 缩略图 */
.listBox2 ul li .a,
.listBox4 ul li .a {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 130px !important;
  width: 130px !important;
}

.listBox2 ul li .a .img,
.listBox4 ul li .a .img {
  width: 130px !important;
  height: 90px !important;
  border-radius: var(--xl-radius-sm, 8px) !important;
  overflow: hidden !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.listBox2 ul li .a .img img,
.listBox4 ul li .a .img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.listBox2 ul li:hover .a .img img,
.listBox4 ul li:hover .a .img img {
  transform: scale(1.06) !important;
}

/* 标题与摘要主体 */
.listBox2 ul li .b,
.listBox4 ul li .b {
  float: none !important;
  margin: 0 !important;
  width: auto !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  line-height: 1.5 !important;
}

.listBox2 ul li .b h4,
.listBox4 ul li .b h4 {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.listBox2 ul li .b h4 a,
.listBox4 ul li .b h4 a {
  color: var(--xl-text-main, #1e293b) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.listBox2 ul li .b h4 a:hover,
.listBox4 ul li .b h4 a:hover {
  color: var(--xl-primary, #1677ff) !important;
}

.listBox2 ul li .b .addi,
.listBox4 ul li .b .addi {
  float: right !important;
  font-size: 12px !important;
  color: var(--xl-muted, #94a3b8) !important;
  line-height: 22px !important;
}

.listBox2 ul li .b .note,
.listBox4 ul li .b .note {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--xl-text-sub, #64748b) !important;
  margin: 6px 0 8px !important;
  text-indent: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.listBox2 ul li .b .note a,
.listBox4 ul li .b .note a {
  color: var(--xl-primary, #1677ff) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.listBox2 ul li .b .note a:hover,
.listBox4 ul li .b .note a:hover {
  text-decoration: underline !important;
}

/* 标签列表 */
.listBox2 ul li .mark,
.listBox4 ul li .mark {
  margin-top: 6px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 12px !important;
}

.listBox2 ul li .mark span,
.listBox4 ul li .mark span {
  color: var(--xl-muted, #94a3b8) !important;
  font-size: 12px !important;
}

.listBox2 ul li .mark a,
.listBox4 ul li .mark a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  background: var(--xl-bg-soft, #f1f5f9) !important;
  color: var(--xl-text-sub, #475569) !important;
  font-size: 11px !important;
  text-decoration: none !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
}

.listBox2 ul li .mark a:hover,
.listBox4 ul li .mark a:hover {
  background: var(--xl-primary-bg, #e6f4ff) !important;
  color: var(--xl-primary, #1677ff) !important;
  border-color: rgba(22, 119, 255, 0.3) !important;
}

/* 黑夜模式兼容 */
html[data-theme-mode="night"] .listBox2 ul li,
html[data-theme-mode="night"] .listBox4 ul li {
  border-bottom-color: #243042 !important;
}

html[data-theme-mode="night"] .listBox2 ul li:hover,
html[data-theme-mode="night"] .listBox4 ul li:hover {
  background: rgba(59, 130, 246, 0.05) !important;
}

html[data-theme-mode="night"] .listBox2 ul li .a .img,
html[data-theme-mode="night"] .listBox4 ul li .a .img {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .listBox2 ul li .b h4 a,
html[data-theme-mode="night"] .listBox4 ul li .b h4 a {
  color: #f1f5f9 !important;
}

html[data-theme-mode="night"] .listBox2 ul li .b h4 a:hover,
html[data-theme-mode="night"] .listBox4 ul li .b h4 a:hover {
  color: #60a5fa !important;
}

html[data-theme-mode="night"] .listBox2 ul li .b .note,
html[data-theme-mode="night"] .listBox4 ul li .b .note {
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .listBox2 ul li .mark a,
html[data-theme-mode="night"] .listBox4 ul li .mark a {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}


/* ==========================================================================
   优化项 1: 【阅读全文>>】对齐与全量覆盖保障
   ========================================================================== */
.xl-card-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.xl-card-foot-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.xl-card-foot-left .mark {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.xl-card-foot .readBtn {
  margin: 0 0 0 12px !important;
  float: none !important;
  flex: 0 0 auto !important;
}

.xl-card-foot .readBtn a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 12px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--xl-primary, #1677ff) !important;
  background: var(--xl-primary-bg, #e6f4ff) !important;
  border: 1px solid rgba(22, 119, 255, 0.22) !important;
  text-decoration: none !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
}

.xl-card-foot .readBtn a:hover {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary, #1677ff) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.25) !important;
}

/* 隐藏旧版嵌入在 .note 正文末尾的错位阅读全文链接 */
.listBox2 ul li .b .note a,
.listBox4 ul li .b .note a {
  display: none !important;
}

/* 黑夜模式阅读全文按钮适配 */
html[data-theme-mode="night"] .xl-card-foot .readBtn a {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html[data-theme-mode="night"] .xl-card-foot .readBtn a:hover {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   优化项 2: 【今天看什么文章？/ 随心偶遇】降噪与精致低调化重构
   ========================================================================== */
.today-random-box {
  margin-top: 0 !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.today-random-box .itemContent {
  padding: 10px 12px !important;
}

.today-random-picker {
  text-align: center !important;
}

/* 隐藏原版突兀的 20px 巨大标题 */
.today-random-picker strong {
  display: none !important;
}

/* 紧凑轻量显示框 */
.today-random-field {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-sm, 6px) !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  box-shadow: none !important;
}

.today-random-field em {
  font-size: 12px !important;
  color: var(--xl-text-sub, #475569) !important;
  font-style: normal !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 500 !important;
}

/* 紧凑副级操作药丸按钮（告别巨大刺眼蓝块） */
.today-random-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
  min-width: 90px !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(22, 119, 255, 0.25) !important;
  border-radius: 14px !important;
  background: var(--xl-primary-bg, #e6f4ff) !important;
  color: var(--xl-primary, #1677ff) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
}

.today-random-cta:hover {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary, #1677ff) !important;
  transform: translateY(-1px) !important;
}

.today-random-picker.is-rolling .today-random-field {
  border-color: var(--xl-primary, #1677ff) !important;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15) !important;
}

.today-random-picker.is-rolling .today-random-cta {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
}

/* 黑夜模式对应轻量适配 */
html[data-theme-mode="night"] .today-random-box {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .today-random-field {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .today-random-field em {
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] .today-random-cta {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html[data-theme-mode="night"] .today-random-cta:hover {
  background: #3b82f6 !important;
  color: #ffffff !important;
}


/* ==========================================================================
   文章详情页 (news.html) 现代设计规范
   ========================================================================== */

/* 1. 主文章卡片容器 */
.xl-article-card {
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-lg, 12px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

.article-view {
  padding: 32px 36px 36px !important;
}

/* 2. 文章标题 */
.article-title {
  padding: 0 0 16px !important;
  margin: 0 !important;
  border: none !important;
}

.article-title h1#newsTitle {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.article-title h1#newsTitle:not([style*="color"]) {
  color: var(--xl-text-main, #1e293b) !important;
}

/* 3. 文章元信息栏 (发布时间、作者、来源、浏览量、字号) */
.xl-article-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-md, 8px) !important;
  margin: 16px 0 20px !important;
}

.xl-meta-left {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.xl-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  color: var(--xl-text-sub, #64748b) !important;
}

.xl-meta-item i {
  color: var(--xl-primary, #1677ff) !important;
  font-size: 14px !important;
}

.xl-meta-item a {
  color: var(--xl-text-sub, #64748b) !important;
  text-decoration: none !important;
}

.xl-meta-right {
  display: flex !important;
  align-items: center !important;
}

.newsFontSel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.font-zoom-label {
  font-size: 12px !important;
  color: var(--xl-text-muted, #94a3b8) !important;
  margin-right: 2px !important;
}

.newsFontSel li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--xl-text-sub, #475569) !important;
  background: #ffffff !important;
  border: 1px solid var(--xl-border, #cbd5e1) !important;
  text-decoration: none !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
}

.newsFontSel li a:hover {
  color: var(--xl-primary, #1677ff) !important;
  border-color: var(--xl-primary, #1677ff) !important;
}

.newsFontSel li a.current {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary, #1677ff) !important;
  font-weight: 600 !important;
}

.xuLine {
  display: none !important;
}

/* 4. 内容摘要卡片 */
.article-summary {
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-left: 4px solid var(--xl-primary, #1677ff) !important;
  border-radius: var(--xl-radius-md, 8px) !important;
  padding: 14px 18px !important;
  margin: 20px 0 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--xl-text-sub, #475569) !important;
}

.article-summary b {
  color: var(--xl-text-main, #1e293b) !important;
}

/* 5. 文章正文排版系统 */
.article-body {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: var(--xl-text-main, #1e293b) !important;
}

#newsContent {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: var(--xl-text-main, #1e293b) !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

#newsContent p {
  margin: 1.25em 0 !important;
  text-align: justify !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

#newsContent h1, #newsContent h2, #newsContent h3, #newsContent h4 {
  color: var(--xl-text-main, #1e293b) !important;
  font-weight: 700 !important;
  margin: 1.4em 0 0.8em !important;
  line-height: 1.4 !important;
}

#newsContent h2 {
  font-size: 20px !important;
  padding-left: 10px !important;
  border-left: 3px solid var(--xl-primary, #1677ff) !important;
}

#newsContent h3 {
  font-size: 18px !important;
}

#newsContent img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--xl-radius-md, 8px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  margin: 20px auto !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

#newsContent blockquote {
  margin: 20px 0 !important;
  padding: 12px 20px !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border-left: 4px solid var(--xl-primary, #1677ff) !important;
  border-radius: 0 var(--xl-radius-md, 8px) var(--xl-radius-md, 8px) 0 !important;
  color: var(--xl-text-sub, #475569) !important;
  font-style: italic !important;
}

/* 6. 下载按钮现代化改造 */
.down_btn1, .down_btn2 {
  display: inline-flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%) !important;
  border-radius: 24px !important;
  padding: 6px 20px !important;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.3) !important;
  margin: 16px 0 !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.down_btn1:hover, .down_btn2:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(22, 119, 255, 0.42) !important;
}

.down_left1, .down_right1, .down_left2, .down_right2 {
  display: none !important;
}

.down_bg1, .down_bg2 {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.down_bg1 a, .down_bg2 a {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.copyTextBtn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  margin-left: 12px !important;
}

/* 7. 文章标签与分享栏 */
.article-action-card {
  margin-top: 24px !important;
  padding: 16px 20px !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-md, 8px) !important;
}

.article-tags {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  color: var(--xl-text-muted, #94a3b8) !important;
  font-size: 13px !important;
}

.article-tags .font2_2 {
  font-weight: 600 !important;
  color: var(--xl-text-sub, #475569) !important;
  margin-right: 4px !important;
}

.article-tags a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 12px !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;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
}

.article-tags a:hover {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary, #1677ff) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.25) !important;
}

.article-share {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px dashed var(--xl-border, #e2e8f0) !important;
}

/* 8. 态度表态卡片 (AppTplYule_ReactionPack) */
.article-vote-card {
  margin: 24px 0 16px !important;
  padding: 20px 16px !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-lg, 12px) !important;
}

.xl-reaction-pack {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  margin: 0 !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;
  transition: all 0.2s ease !important;
}

.xl-reaction-face {
  width: 58px !important;
  height: 52px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.xl-reaction-item:hover .xl-reaction-face {
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16) !important;
}

.xl-reaction-hot .xl-reaction-face { background: #ef4444 !important; color: #ffffff !important; }
.xl-reaction-top .xl-reaction-face { background: #f59e0b !important; color: #ffffff !important; }
.xl-reaction-upper .xl-reaction-face { background: #eab308 !important; color: #1e293b !important; }
.xl-reaction-npc .xl-reaction-face { background: #94a3b8 !important; color: #ffffff !important; }
.xl-reaction-pull .xl-reaction-face { background: #64748b !important; color: #ffffff !important; }

.xl-reaction-num {
  margin-top: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--xl-text-sub, #64748b) !important;
  font-style: normal !important;
}

/* 9. 上一篇 / 下一篇现代化双卡片导航 */
.article-prevnext {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.article-prevnext .prev-item,
.article-prevnext .next-item,
.article-prevnext > div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 14px 18px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-md, 10px) !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.article-prevnext .prev-item:hover,
.article-prevnext .next-item:hover,
.article-prevnext > div:hover {
  border-color: var(--xl-primary, #1677ff) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(22, 119, 255, 0.1) !important;
}

.article-prevnext .nav-dir-label,
.article-prevnext > div span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--xl-primary, #1677ff) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.article-prevnext a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--xl-text-main, #1e293b) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.2s ease !important;
}

.article-prevnext a:hover {
  color: var(--xl-primary, #1677ff) !important;
}

.article-prevnext .next-item,
.article-prevnext > div:last-child {
  text-align: right !important;
}

/* 10. 相关文章卡片 */
.article-related-card {
  margin-top: 16px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-lg, 12px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.article-related-card .itemContent {
  padding: 16px 20px !important;
}

.article-related-card .markBox ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.article-related-card .markBox ul li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 0 !important;
  font-size: 14px !important;
  border-bottom: 1px dashed var(--xl-border, #f1f5f9) !important;
}

.article-related-card .markBox ul li a {
  color: var(--xl-text-main, #334155) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.2s ease !important;
}

.article-related-card .markBox ul li a:hover {
  color: var(--xl-primary, #1677ff) !important;
}

.article-related-card .markBox ul li span {
  font-size: 12px !important;
  color: var(--xl-text-muted, #94a3b8) !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
}

/* 11. 相关评论卡片与输入系统 */
.article-comment-card {
  margin-top: 16px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-lg, 12px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.article-comment-card .itemContent {
  padding: 20px 24px !important;
}

.replyBox textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--xl-border, #cbd5e1) !important;
  border-radius: var(--xl-radius-md, 8px) !important;
  padding: 12px !important;
  font-size: 14px !important;
  color: var(--xl-text-main, #1e293b) !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  outline: none !important;
  transition: var(--xl-transition, all 0.2s ease) !important;
}

.replyBox textarea:focus {
  border-color: var(--xl-primary, #1677ff) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15) !important;
}

/* ==========================================================================
   文章详情页 (news.html) 黑夜模式适配
   ========================================================================== */
html[data-theme-mode="night"] .xl-article-card,
html[data-theme-mode="night"] .article-related-card,
html[data-theme-mode="night"] .article-comment-card {
  background: #151d26 !important;
  border-color: #243242 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme-mode="night"] .article-title h1#newsTitle:not([style*="color"]) {
  color: #f1f5f9 !important;
}

html[data-theme-mode="night"] .xl-article-meta {
  background: #111822 !important;
  border-color: #243242 !important;
}

html[data-theme-mode="night"] .xl-meta-item {
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .xl-meta-item a {
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .newsFontSel li a {
  background: #1a2432 !important;
  border-color: #2e3e52 !important;
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .newsFontSel li a:hover {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}

html[data-theme-mode="night"] .newsFontSel li a.current {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
}

html[data-theme-mode="night"] .article-summary {
  background: #111822 !important;
  border-color: #243242 !important;
  border-left-color: #3b82f6 !important;
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] .article-summary b {
  color: #f1f5f9 !important;
}

html[data-theme-mode="night"] .article-body,
html[data-theme-mode="night"] #newsContent {
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] #newsContent p {
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] #newsContent h1,
html[data-theme-mode="night"] #newsContent h2,
html[data-theme-mode="night"] #newsContent h3,
html[data-theme-mode="night"] #newsContent h4 {
  color: #f1f5f9 !important;
}

html[data-theme-mode="night"] #newsContent h2 {
  border-left-color: #3b82f6 !important;
}

html[data-theme-mode="night"] #newsContent img {
  filter: brightness(0.92) !important;
}

html[data-theme-mode="night"] #newsContent blockquote {
  background: #111822 !important;
  border-left-color: #3b82f6 !important;
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .article-action-card,
html[data-theme-mode="night"] .article-vote-card {
  background: #111822 !important;
  border-color: #243242 !important;
}

html[data-theme-mode="night"] .article-tags .font2_2 {
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] .article-tags a {
  background: #1a2432 !important;
  border-color: #2e3e52 !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-prevnext .prev-item,
html[data-theme-mode="night"] .article-prevnext .next-item,
html[data-theme-mode="night"] .article-prevnext > div {
  background: #111822 !important;
  border-color: #243242 !important;
}

html[data-theme-mode="night"] .article-prevnext .prev-item:hover,
html[data-theme-mode="night"] .article-prevnext .next-item:hover,
html[data-theme-mode="night"] .article-prevnext > div:hover {
  border-color: #3b82f6 !important;
}

html[data-theme-mode="night"] .article-prevnext a {
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] .article-prevnext a:hover {
  color: #60a5fa !important;
}

html[data-theme-mode="night"] .article-related-card .markBox ul li {
  border-bottom-color: #243242 !important;
}

html[data-theme-mode="night"] .article-related-card .markBox ul li a {
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] .article-related-card .markBox ul li a:hover {
  color: #60a5fa !important;
}

html[data-theme-mode="night"] .replyBox textarea {
  background: #111822 !important;
  border-color: #243242 !important;
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] .replyBox textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}


/* ==========================================================================
   相关文章网格与日期排版对齐修复
   ========================================================================== */
.article-related-card .markBox {
  margin: 0 !important;
  padding: 0 !important;
}

.article-related-card dd.listArrow3 {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.article-related-card .markBox ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.article-related-card .markBox ul li {
  display: flex !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  padding: 7px 10px !important;
  margin: 0 !important;
  border-bottom: 1px dashed var(--xl-border, #e2e8f0) !important;
  border-radius: 6px !important;
  background: none !important;
  background-image: none !important;
  line-height: 1.5 !important;
  height: auto !important;
  list-style-type: none !important;
  box-sizing: border-box !important;
}

.article-related-card .markBox ul li:hover {
  background: var(--xl-bg-soft, #f8fafc) !important;
}

.article-related-card .markBox ul li .fr {
  flex: 0 0 auto !important;
  font-size: 12px !important;
  color: var(--xl-text-muted, #94a3b8) !important;
  margin-left: 10px !important;
  float: none !important;
  line-height: inherit !important;
}

.article-related-card .markBox ul li a {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--xl-text-main, #334155) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: inherit !important;
}

.article-related-card .markBox ul li a::before {
  content: "•" !important;
  color: var(--xl-primary, #1677ff) !important;
  font-weight: bold !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.article-related-card .markBox ul li a:hover {
  color: var(--xl-primary, #1677ff) !important;
}

/* 黑夜模式相关文章适配 */
html[data-theme-mode="night"] .article-related-card .markBox ul li {
  border-bottom-color: #243242 !important;
}

html[data-theme-mode="night"] .article-related-card .markBox ul li:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme-mode="night"] .article-related-card .markBox ul li a {
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] .article-related-card .markBox ul li a:hover {
  color: #60a5fa !important;
}

html[data-theme-mode="night"] .article-related-card .markBox ul li .fr {
  color: #64748b !important;
}


/* ==========================================================================
   相关文章网格 repeat(2, minmax(0, 1fr)) 与 完整日期不换行排版
   ========================================================================== */
.article-related-card .itemContent {
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.article-related-card .markBox ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.article-related-card .markBox ul li {
  display: flex !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  border-bottom: 1px dashed var(--xl-border, #e2e8f0) !important;
  border-radius: 6px !important;
  background: none !important;
  background-image: none !important;
  line-height: 1.5 !important;
  height: auto !important;
  list-style-type: none !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
}

.article-related-card .markBox ul li:hover {
  background: var(--xl-bg-soft, #f8fafc) !important;
}

.article-related-card .markBox ul li .fr {
  flex: 0 0 auto !important;
  font-size: 12px !important;
  color: var(--xl-text-muted, #94a3b8) !important;
  margin-left: 8px !important;
  float: none !important;
  white-space: nowrap !important;
  line-height: inherit !important;
}

.article-related-card .markBox ul li a {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--xl-text-main, #334155) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: inherit !important;
}

.article-related-card .markBox ul li a::before {
  content: "•" !important;
  color: var(--xl-primary, #1677ff) !important;
  font-weight: bold !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.article-related-card .markBox ul li a:hover {
  color: var(--xl-primary, #1677ff) !important;
}

html[data-theme-mode="night"] .article-related-card .markBox ul li:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}


/* ==========================================================================
   解开旧版 markBox 与 replyBox 780px 硬编码宽度限制
   ========================================================================== */
.article-related-card .markBox,
.article-related-card .markBox dd,
.article-comment-card .replyBox,
.article-comment-card .replyBox dd,
.markBox,
.replyBox {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.article-related-card .markBox ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.article-related-card .markBox ul li {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   全站页面容器去过度圆角优化规范 (回归平整硬朗质感，仅保留按钮/药丸标签圆角)
   ========================================================================== */

/* 1. 核心大容器、卡片与内容框彻底去除过度圆角 */
.itemBox,
.itemTitle,
.webBox,
.mainMenu,
.mainMenu.scrollfixed,
.pointBox,
.webPointBox,
.webPath,
.xl-card,
.xl-resource-card,
.xl-article-card,
.article-view,
.article-related-card,
.article-comment-card,
.article-action-card,
.article-vote-card,
.article-summary,
.article-prevnext > div,
.article-prevnext .prev-item,
.article-prevnext .next-item,
.xl-list-main-card,
.xl-ad-box,
.today-random-box,
.linkMain,
.xl-home-user-hero,
.xl-alert,
.xl-tabs-header,
.markBox,
.replyBox,
.listBox,
.listBox2,
.listBox3,
.listBox4,
.listBox7,
.listBox2 ul li,
.listBox4 ul li,
.listBox2 ul li .a .img,
.listBox4 ul li .a .img,
#newsContent img,
.article-content img {
  border-radius: 0 !important;
}

/* 2. 保留并优化各类按钮、药丸标签、搜索框及交互组件的圆角 */
/* 按钮系列 */
.xl-btn,
.btn,
input[type=button],
input[type=submit],
input[type=reset] {
  border-radius: 6px !important;
}

.xl-btn-sm {
  border-radius: 4px !important;
}

.xl-btn-lg {
  border-radius: 8px !important;
}

/* 阅读全文药丸按钮 */
.readBtn a,
.xl-card-foot .readBtn a {
  border-radius: 14px !important;
}

/* 分类胶囊与文章标签药丸 */
.subNavMenu li a {
  border-radius: 16px !important;
}

.article-tags a,
.mark a,
.listBox2 ul li .mark a,
.listBox4 ul li .mark a {
  border-radius: 14px !important;
}

/* 搜索栏胶囊组合 */
.xl-search-input-group input[type="text"] {
  border-radius: 20px 0 0 20px !important;
}

.xl-search-btn {
  border-radius: 0 20px 20px 0 !important;
}

/* 随心偶遇辅助操作按钮 */
.today-random-cta {
  border-radius: 14px !important;
}

.today-random-field {
  border-radius: 4px !important;
}

/* 下载按钮与提取码复制按钮 */
.down_btn1,
.down_btn2 {
  border-radius: 24px !important;
}

.copyTextBtn {
  border-radius: 12px !important;
}

/* 字号切换微调按钮 */
.newsFontSel li a {
  border-radius: 6px !important;
}

/* 表态交互表情按钮 */
.xl-reaction-face {
  border-radius: 8px !important;
}

/* 悬浮置顶与主题切换小按钮 */
.xl-back-top {
  border-radius: 50% !important;
}

.xl-theme-toggle {
  border-radius: 6px !important;
}

.xl-wap-trigger {
  border-radius: 6px !important;
}

/* 分页按钮 */
.listNavBox .navBtn,
.listNavBox .navBtnPointer,
#listNavGoPage select {
  border-radius: 4px !important;
}

/* 广告标签与排行榜角标 */
.xl-ad-badge {
  border-radius: 2px !important;
}

.xl-rank-num {
  border-radius: 3px !important;
}


/* ==========================================================================
   全站容器平整利落化 (去过度圆角，仅保留按钮、药丸标签、搜索框及胶囊圆角)
   ========================================================================== */
.itemBox,
.itemTitle,
.webBox,
.mainMenu,
.mainMenu.scrollfixed,
.pointBox,
.webPointBox,
.webPath,
.xl-card,
.xl-resource-card,
.xl-article-card,
.article-view,
.article-related-card,
.article-comment-card,
.article-action-card,
.article-vote-card,
.article-summary,
.article-prevnext > div,
.article-prevnext .prev-item,
.article-prevnext .next-item,
.xl-list-main-card,
.xl-ad-box,
.today-random-box,
.linkMain,
.xl-home-user-hero,
.xl-alert,
.xl-tabs-header,
.markBox,
.replyBox,
.listBox,
.listBox2,
.listBox3,
.listBox4,
.listBox7,
.listBox2 ul li,
.listBox4 ul li,
.listBox2 ul li .a .img,
.listBox4 ul li .a .img,
#newsContent img,
.article-content img {
  border-radius: 0 !important;
}

/* 按钮系列与药丸标签保持精致圆角 */
.xl-btn,
.btn,
input[type=button],
input[type=submit],
input[type=reset] {
  border-radius: 6px !important;
}

.readBtn a,
.xl-card-foot .readBtn a {
  border-radius: 14px !important;
}

.subNavMenu li a {
  border-radius: 16px !important;
}

.article-tags a,
.mark a,
.listBox2 ul li .mark a,
.listBox4 ul li .mark a {
  border-radius: 14px !important;
}

.xl-search-input-group input[type="text"] {
  border-radius: 20px 0 0 20px !important;
}

.xl-search-btn {
  border-radius: 0 20px 20px 0 !important;
}

.today-random-cta {
  border-radius: 14px !important;
}

.today-random-field {
  border-radius: 4px !important;
}

.down_btn1,
.down_btn2 {
  border-radius: 24px !important;
}

.copyTextBtn {
  border-radius: 12px !important;
}

.newsFontSel li a {
  border-radius: 6px !important;
}

.xl-reaction-face {
  border-radius: 8px !important;
}

.xl-back-top {
  border-radius: 50% !important;
}

.xl-theme-toggle {
  border-radius: 6px !important;
}

.xl-wap-trigger {
  border-radius: 6px !important;
}


/* ==========================================================================
   文章页 5 大核心 UI 精准美化 (字号控制、下载区、免责声明、标签分享、互动表态)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 字号控制器 (.newsFontSel) 现代分段药丸化重构
   -------------------------------------------------------------------------- */
.xl-article-meta {
  border-radius: 0 !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  padding: 10px 16px !important;
}

.newsFontSel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 2px 3px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #cbd5e1) !important;
  border-radius: 16px !important;
}

.font-zoom-label {
  font-size: 12px !important;
  color: var(--xl-text-muted, #94a3b8) !important;
  margin-right: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.newsFontSel li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 26px !important;
  height: 22px !important;
  padding: 0 6px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--xl-text-sub, #475569) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.newsFontSel li a:hover {
  color: var(--xl-primary, #1677ff) !important;
  background: rgba(22, 119, 255, 0.08) !important;
}

.newsFontSel li a.current {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(22, 119, 255, 0.3) !important;
}

html[data-theme-mode="night"] .newsFontSel {
  background: #111822 !important;
  border-color: #243242 !important;
}

html[data-theme-mode="night"] .newsFontSel li a {
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .newsFontSel li a:hover {
  color: #60a5fa !important;
  background: rgba(96, 165, 250, 0.12) !important;
}

html[data-theme-mode="night"] .newsFontSel li a.current {
  background: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* --------------------------------------------------------------------------
   1. 附件内容与下载区域 (.down_btn1) 现代化高级下载卡片
   -------------------------------------------------------------------------- */
div[style*="border-bottom:1px #c9c9c9 solid"],
div[style*="border-bottom: 1px #c9c9c9 solid"] {
  border-bottom: 1px solid var(--xl-border, #e2e8f0) !important;
  color: var(--xl-text-main, #1e293b) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 0 8px !important;
  margin: 20px 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

div[style*="border-bottom:1px #c9c9c9 solid"] img,
div[style*="border-bottom: 1px #c9c9c9 solid"] img {
  display: none !important;
}

div[style*="border-bottom:1px #c9c9c9 solid"]::before,
div[style*="border-bottom: 1px #c9c9c9 solid"]::before {
  content: "📦" !important;
  font-size: 16px !important;
}

.down_btn1,
.down_btn2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%) !important;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.28) !important;
  margin: 10px 0 16px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.down_btn1::before,
.down_btn2::before {
  content: "⬇️" !important;
  font-size: 15px !important;
}

.down_btn1:hover,
.down_btn2:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(22, 119, 255, 0.42) !important;
}

.down_left1, .down_right1, .down_left2, .down_right2 {
  display: none !important;
}

.down_bg1, .down_bg2 {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.down_bg1 a,
.down_bg2 a {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
}

.copyTextBtn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  margin-left: 12px !important;
  transition: background 0.2s ease !important;
}

.copyTextBtn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* --------------------------------------------------------------------------
   2. 免责声明与收藏/举报区 (.mzsm, #newsMarkBtn, #newsReportBtn)
   -------------------------------------------------------------------------- */
.mzsm {
  margin: 24px 0 16px !important;
  padding: 16px 20px !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 0 !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;
}

table:has(#newsMarkBtn),
table:has(#newsReportBtn) {
  margin: 16px auto !important;
  display: flex !important;
  justify-content: center !important;
  border: none !important;
}

table:has(#newsMarkBtn) tbody,
table:has(#newsMarkBtn) tr,
table:has(#newsMarkBtn) td {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  border: none !important;
  padding: 0 !important;
}

table:has(#newsMarkBtn) div[style*="float:left"] {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

#newsMarkBtn,
#newsReportBtn {
  height: 38px !important;
  width: auto !important;
  border-radius: 19px !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

#newsMarkBtn:hover,
#newsReportBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16) !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: 8px 10px !important;
  background: var(--xl-bg-card, #ffffff) !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;
}

html[data-theme-mode="night"] #funcReportBox > div {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] #funcReportBox a {
  color: #cbd5e1 !important;
}

/* --------------------------------------------------------------------------
   3. 标签与社交分享栏 (.article-action-card)
   -------------------------------------------------------------------------- */
.article-action-card {
  border-radius: 0 !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  padding: 16px 20px !important;
  margin-top: 20px !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: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.article-tags a:hover {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary, #1677ff) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(22, 119, 255, 0.25) !important;
}

.article-share {
  margin-top: 14px !important;
  padding-top: 14px !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;
}

.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 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease !important;
}

.sharethis-inline-share-buttons .st-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16) !important;
}

html[data-theme-mode="night"] .article-action-card {
  background: #111822 !important;
  border-color: #243242 !important;
}

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;
}

/* --------------------------------------------------------------------------
   4. 态度表态卡片 (#voteBox, .article-vote-card) 现代化趣味打分组件
   -------------------------------------------------------------------------- */
.article-vote-card {
  border-radius: 0 !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  padding: 22px 20px 18px !important;
  margin: 22px 0 16px !important;
  text-align: center !important;
}

.xl-reaction-pack {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  position: relative !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;
  transition: all 0.25s ease !important;
}

.xl-reaction-face {
  width: 58px !important;
  height: 50px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
}

.xl-reaction-item:hover .xl-reaction-face {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !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 {
  margin-top: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--xl-text-sub, #64748b) !important;
  font-style: normal !important;
  min-width: 28px !important;
  padding: 1px 6px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.xl-reaction-item:hover .xl-reaction-num {
  color: var(--xl-primary, #1677ff) !important;
  border-color: var(--xl-primary, #1677ff) !important;
}

html[data-theme-mode="night"] .article-vote-card {
  background: #111822 !important;
  border-color: #243242 !important;
}

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

html[data-theme-mode="night"] .xl-reaction-num {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* ==========================================================================
   文章详情页 5 大核心 UI 终极精细化打磨
   ========================================================================== */

/* 1. 字号控制器 (.newsFontSel) 现代分段控制条 */
.newsFontSel {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--xl-bg-subtle, #f1f5f9) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  padding: 2px !important;
  border-radius: 6px !important;
  gap: 2px !important;
}

.newsFontSel li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--xl-text-sub, #64748b) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transition: all 0.18s ease !important;
  text-decoration: none !important;
}

.newsFontSel li a:hover {
  color: var(--xl-text-main, #1e293b) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

.newsFontSel li a.current {
  background: var(--xl-bg-card, #ffffff) !important;
  color: var(--xl-primary, #1677ff) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme-mode="night"] .newsFontSel {
  background: #151d29 !important;
  border-color: #243242 !important;
}

html[data-theme-mode="night"] .newsFontSel li a {
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .newsFontSel li a:hover {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme-mode="night"] .newsFontSel li a.current {
  background: #243242 !important;
  color: #60a5fa !important;
}

/* 2. 附件内容与下载区域 (.down_btn1) */
.news_content div[style*="border-bottom:1px #c9c9c9 solid"],
.news_content div[style*="border-bottom: 1px #c9c9c9 solid"],
div[style*="border-bottom:1px #c9c9c9 solid"],
div[style*="border-bottom: 1px #c9c9c9 solid"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--xl-text-main, #1e293b) !important;
  border-bottom: 2px solid var(--xl-primary, #1677ff) !important;
  padding: 8px 0 !important;
  margin: 24px 0 14px !important;
  width: fit-content !important;
}

.news_content div[style*="border-bottom:1px #c9c9c9 solid"] img,
.news_content div[style*="border-bottom: 1px #c9c9c9 solid"] img,
.news_content img[src*="file.gif"],
div[style*="border-bottom:1px #c9c9c9 solid"] img,
div[style*="border-bottom: 1px #c9c9c9 solid"] img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  margin: 0 !important;
}

.news_content div[style*="border-bottom:1px #c9c9c9 solid"]::before,
.news_content div[style*="border-bottom: 1px #c9c9c9 solid"]::before,
div[style*="border-bottom:1px #c9c9c9 solid"]::before,
div[style*="border-bottom: 1px #c9c9c9 solid"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 4px !important;
  height: 16px !important;
  background: var(--xl-primary, #1677ff) !important;
  border-radius: 2px !important;
}

.down_btn1,
.down_btn2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%) !important;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.3) !important;
  margin: 10px 0 20px !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.down_btn1::before,
.down_btn2::before {
  content: "📥" !important;
  font-size: 16px !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
}

.down_btn1:hover,
.down_btn2:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(22, 119, 255, 0.45) !important;
  background: linear-gradient(135deg, #2582ff 0%, #0c64ee 100%) !important;
}

.down_left1, .down_right1, .down_left2, .down_right2 {
  display: none !important;
}

.down_bg1, .down_bg2 {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.down_bg1 a, .down_bg2 a {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
}

/* 3. 免责声明与操作按钮 (.mzsm, #newsMarkBtn, #newsReportBtn) */
.mzsm {
  margin: 24px 0 16px !important;
  padding: 18px 22px !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 0 !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;
}

table:has(#newsMarkBtn),
table:has(#newsReportBtn) {
  margin: 18px auto 10px !important;
  display: flex !important;
  justify-content: center !important;
  border: none !important;
}

table:has(#newsMarkBtn) tbody,
table:has(#newsMarkBtn) tr,
table:has(#newsMarkBtn) td {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  border: none !important;
  padding: 0 !important;
}

table:has(#newsMarkBtn) div[style*="float:left"] {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

#newsMarkBtn,
#newsReportBtn {
  height: 38px !important;
  width: auto !important;
  border-radius: 19px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

#newsMarkBtn:hover,
#newsReportBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !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. 标签与分享栏 (.article-action-card) */
.article-action-card {
  border-radius: 0 !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  padding: 16px 20px !important;
  margin-top: 20px !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: 4px !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: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.article-tags a:hover {
  background: var(--xl-primary, #1677ff) !important;
  color: #ffffff !important;
  border-color: var(--xl-primary, #1677ff) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(22, 119, 255, 0.25) !important;
}

.article-share {
  margin-top: 14px !important;
  padding-top: 14px !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:empty,
.article-share:has(.sharethis-inline-share-buttons:empty) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

html[data-theme-mode="night"] .article-action-card {
  background: #111822 !important;
  border-color: #243242 !important;
}

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;
}

/* 5. 态度表态卡片 (.article-vote-card) */
.article-vote-card {
  border-radius: 0 !important;
  background: var(--xl-bg-soft, #f8fafc) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  padding: 22px 20px 18px !important;
  margin: 22px 0 16px !important;
  text-align: center !important;
}

.xl-reaction-pack {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  position: relative !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;
  transition: all 0.25s ease !important;
}

.xl-reaction-face {
  width: 58px !important;
  height: 50px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
}

.xl-reaction-item:hover .xl-reaction-face {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !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 {
  margin-top: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--xl-text-sub, #64748b) !important;
  font-style: normal !important;
  min-width: 28px !important;
  padding: 1px 6px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.xl-reaction-item:hover .xl-reaction-num {
  color: var(--xl-primary, #1677ff) !important;
  border-color: var(--xl-primary, #1677ff) !important;
}

html[data-theme-mode="night"] .article-vote-card {
  background: #111822 !important;
  border-color: #243242 !important;
}

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

html[data-theme-mode="night"] .xl-reaction-num {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}


/* ==========================================================================
   文章详情页 4 项针对性优化
   1. 字号激活态改用浅色系
   2. 删除免责声明卡片最外层灰白色背景边框
   3. 删除文章标签卡片最外层灰白色背景边框
   4. 优化分享按钮（圆形居中、精致悬浮、无残留空白）
   ========================================================================== */

/* 1. 字号控制器 (.newsFontSel) 浅色系高亮 */
.newsFontSel li a.current {
  background: #e6f4ff !important;
  color: #1677ff !important;
  font-weight: 600 !important;
  border: 1px solid #91caff !important;
  box-shadow: 0 1px 3px rgba(22, 119, 255, 0.12) !important;
}

html[data-theme-mode="night"] .newsFontSel li a.current {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: none !important;
}

/* 2. 免责声明与版权卡片最外层去灰白背景边框 */
.article-area-bottom {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-theme-mode="night"] .article-area-bottom {
  background: transparent !important;
  border: none !important;
}

/* 3. 文章标签卡片最外层去灰白背景边框 */
.article-action-card {
  background: transparent !important;
  border: none !important;
  padding: 10px 0 16px !important;
  margin-top: 16px !important;
  border-bottom: 1px dashed var(--xl-border, #e2e8f0) !important;
  box-shadow: none !important;
}

html[data-theme-mode="night"] .article-action-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dashed #243242 !important;
}

/* 4. 优化分享按钮（圆形居中图标交互） */
.article-share {
  margin-top: 14px !important;
  padding-top: 0 !important;
  border-top: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

.sharethis-inline-share-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  text-align: left !important;
}

.sharethis-inline-share-buttons .st-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 18px !important;
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #cbd5e1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.sharethis-inline-share-buttons .st-btn:hover {
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

.sharethis-inline-share-buttons .st-btn[data-network="facebook"]:hover {
  border-color: #1877f2 !important;
  background: rgba(24, 119, 242, 0.08) !important;
}
.sharethis-inline-share-buttons .st-btn[data-network="twitter"]:hover {
  border-color: #000000 !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
.sharethis-inline-share-buttons .st-btn[data-network="sharethis"]:hover {
  border-color: #25d366 !important;
  background: rgba(37, 211, 102, 0.08) !important;
}
.sharethis-inline-share-buttons .st-btn[data-network="wechat"]:hover {
  border-color: #07c160 !important;
  background: rgba(7, 193, 96, 0.08) !important;
}
.sharethis-inline-share-buttons .st-btn[data-network="qq"]:hover {
  border-color: #1296db !important;
  background: rgba(18, 150, 219, 0.08) !important;
}
.sharethis-inline-share-buttons .st-btn[data-network="reddit"]:hover {
  border-color: #ff4500 !important;
  background: rgba(255, 69, 0, 0.08) !important;
}

.sharethis-inline-share-buttons .st-btn img {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !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;
}


/* ==========================================================================
   资源下载按钮浅色系美化 (Light Color Scheme)
   ========================================================================== */
.down_btn1,
.down_btn2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  background: #e6f4ff !important;
  border: 1px solid #91caff !important;
  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.08) !important;
  margin: 10px 0 18px !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.down_btn1::before,
.down_btn2::before {
  content: "📥" !important;
  font-size: 15px !important;
}

.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_left1, .down_right1, .down_left2, .down_right2 {
  display: none !important;
}

.down_bg1, .down_bg2 {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.down_bg1 a,
.down_bg2 a,
.down_bg1 a b,
.down_bg2 a b {
  color: #1677ff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
}

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_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_bg1 a,
html[data-theme-mode="night"] .down_bg2 a,
html[data-theme-mode="night"] .down_bg1 a b,
html[data-theme-mode="night"] .down_bg2 a b {
  color: #93c5fd !important;
}


/* ==========================================================================
   收藏与举报交互药丸按钮全面升级 (Crisp SVG & Micro-interactions)
   ========================================================================== */
table:has(#newsMarkBtn),
table:has(#newsReportBtn) {
  margin: 18px auto 10px !important;
  display: flex !important;
  justify-content: center !important;
  border: none !important;
}

table:has(#newsMarkBtn) tbody,
table:has(#newsMarkBtn) tr,
table:has(#newsMarkBtn) td {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  border: none !important;
  padding: 0 !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;
}

/* 收藏按钮 (Favorite) */
.xl-btn-favorite {
  color: var(--xl-text-main, #334155) !important;
}
.xl-btn-favorite svg {
  color: #f43f5e !important;
}
.xl-btn-favorite:hover {
  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-favorite:hover svg {
  transform: scale(1.15) !important;
  fill: #f43f5e !important;
}

/* 举报按钮 (Report) */
.xl-btn-report {
  color: var(--xl-text-main, #334155) !important;
}
.xl-btn-report svg {
  color: #d97706 !important;
}
.xl-btn-report:hover {
  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;
}
.xl-btn-report:hover svg {
  transform: scale(1.15) !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;
  transition: color 0.15s ease !important;
}
#funcReportBox a:hover {
  color: #ef4444 !important;
}

/* 兼容旧 img 标签时的兜底效果 */
img#newsMarkBtn,
img#newsReportBtn {
  height: 36px !important;
  width: auto !important;
  border-radius: 18px !important;
  transition: all 0.22s ease !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
img#newsMarkBtn:hover,
img#newsReportBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !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;
}
html[data-theme-mode="night"] #funcReportBox > div {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme-mode="night"] #funcReportBox a {
  color: #94a3b8 !important;
}
html[data-theme-mode="night"] #funcReportBox a:hover {
  color: #f87171 !important;
}

/* ========================================================
   MODERN TOP HEADER BAR & USER BOX (V26 REFINEMENTS)
   ======================================================== */
.htmlBodyTop {
  background: var(--xl-bg-card, #ffffff) !important;
  border-bottom: 1px solid var(--xl-border, #e2e8f0) !important;
  width: 100% !important;
  height: 38px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important;
}

.topBody {
  width: 1036px !important;
  max-width: 1036px !important;
  margin: 0 auto !important;
  background-color: transparent !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.topMenu {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 38px !important;
  line-height: 38px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.topMenu-left,
.topMenu .a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: 38px !important;
  float: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.topMenu-right,
.topMenu .b {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: 38px !important;
  float: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.xl-top-nav-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  white-space: nowrap !important;
  float: none !important;
}

#topUserBox {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  height: 38px !important;
}

.xl-top-user-wrap,
.xl-top-auth-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
}

.xl-top-welcome {
  color: var(--xl-text-main, #334155) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.xl-top-uname {
  color: var(--xl-primary, #2563eb) !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}

.xl-top-link,
#topUserBox a {
  color: var(--xl-text-sub, #64748b) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.xl-top-link:hover,
#topUserBox a:hover {
  color: var(--xl-primary, #2563eb) !important;
  background: var(--xl-bg-subtle, #f1f5f9) !important;
  text-decoration: none !important;
}

.xl-top-link-exit {
  color: #ef4444 !important;
}

.xl-top-link-exit:hover {
  color: #dc2626 !important;
  background: #fef2f2 !important;
}

.xl-top-sep {
  color: var(--xl-border, #cbd5e1) !important;
  margin: 0 2px !important;
}

/* ========================================================
   MODERN HOMEPAGE MIDDLE USER CARD (SYNCHRONIZED USER INFO)
   ======================================================== */
.xl-user-box {
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

.xl-user-card-inner {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.xl-user-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.xl-user-card-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: #f8fafc !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.xl-user-card-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.xl-user-card-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.xl-user-card-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--xl-text-main, #0f172a) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.xl-username-text {
  font-weight: 700 !important;
  color: var(--xl-text-main, #0f172a) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.xl-user-group-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 1px 7px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
  white-space: nowrap !important;
}

.xl-user-card-desc {
  font-size: 12px !important;
  color: var(--xl-text-muted, #94a3b8) !important;
  margin-top: 3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* User Assets Row */
.xl-user-card-assets {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 8px !important;
}

.xl-asset-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
}

.xl-asset-lbl {
  font-size: 11px !important;
  color: var(--xl-text-muted, #64748b) !important;
  margin-bottom: 2px !important;
}

.xl-asset-num {
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.xl-asset-lbi {
  color: #d97706 !important;
}

.xl-asset-score {
  color: #16a34a !important;
}

.xl-asset-mall-btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  background: #eff6ff !important;
  transition: all 0.2s ease !important;
}

.xl-asset-mall-btn:hover {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}

.xl-asset-divider {
  width: 1px !important;
  height: 24px !important;
  background: #e2e8f0 !important;
}

.xl-user-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.xl-btn-user {
  flex: 1 !important;
  height: 36px !important;
  line-height: 36px !important;
  text-align: center !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.xl-btn-user-login {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
  border: none !important;
}

.xl-btn-user-login:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35) !important;
}

.xl-btn-user-reg {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

.xl-btn-user-reg:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.xl-btn-user-exit {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #fecdd3 !important;
}

.xl-btn-user-exit:hover {
  background: #ffe4e6 !important;
}

/* ========================================================
   DARK / NIGHT MODE OVERRIDES (data-theme-mode="night")
   ======================================================== */
html[data-theme-mode="night"] .htmlBodyTop {
  background: #0f172a !important;
  border-color: #1e293b !important;
}

html[data-theme-mode="night"] .xl-top-welcome {
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .xl-top-uname {
  color: #60a5fa !important;
}

html[data-theme-mode="night"] .xl-top-link,
html[data-theme-mode="night"] #topUserBox a {
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .xl-top-link:hover,
html[data-theme-mode="night"] #topUserBox a:hover {
  color: #60a5fa !important;
  background: #1e293b !important;
}

html[data-theme-mode="night"] .xl-top-link-exit {
  color: #f87171 !important;
}

html[data-theme-mode="night"] .xl-top-link-exit:hover {
  background: #3f121d !important;
}

html[data-theme-mode="night"] .xl-user-box {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

html[data-theme-mode="night"] .xl-user-card-avatar {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .xl-user-card-name,
html[data-theme-mode="night"] .xl-username-text {
  color: #f8fafc !important;
}

html[data-theme-mode="night"] .xl-user-group-tag {
  background: rgba(37,99,235,0.2) !important;
  color: #60a5fa !important;
  border-color: rgba(37,99,235,0.4) !important;
}

html[data-theme-mode="night"] .xl-user-card-desc {
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .xl-user-card-assets {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html[data-theme-mode="night"] .xl-asset-lbl {
  color: #94a3b8 !important;
}

html[data-theme-mode="night"] .xl-asset-mall-btn {
  background: rgba(37,99,235,0.25) !important;
  color: #93c5fd !important;
}

html[data-theme-mode="night"] .xl-asset-divider {
  background: #334155 !important;
}

html[data-theme-mode="night"] .xl-btn-user-reg {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme-mode="night"] .xl-btn-user-exit {
  background: #3f121d !important;
  color: #fb7185 !important;
  border-color: #881337 !important;
}


/* ========================================================
   ROBUST TOP BAR LAYOUT - ZERO FLOAT & ZERO OVERLAP
   ======================================================== */
.htmlBodyTop {
  background: var(--xl-bg-card, #ffffff) !important;
  border-bottom: 1px solid var(--xl-border, #e2e8f0) !important;
  width: 100% !important;
  height: 38px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important;
}

.topBody {
  width: 1036px !important;
  max-width: 1036px !important;
  margin: 0 auto !important;
  background-color: transparent !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}

.topMenu {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 38px !important;
  line-height: 38px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
  overflow: visible !important;
  position: relative !important;
}

.topMenu-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 38px !important;
  float: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.topMenu-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 38px !important;
  float: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.xl-top-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  white-space: nowrap !important;
  float: none !important;
  height: 38px !important;
}

.topMenuClass {
  font-size: 13px !important;
  color: var(--xl-text-sub, #64748b) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  white-space: nowrap !important;
}

.topMenuClass:hover {
  color: var(--xl-primary, #2563eb) !important;
  text-decoration: none !important;
}

/* Middle sidebar user box */
.xl-sidebar-user-box,
.xl-user-box {
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}


/* ========================================================
   UNIFIED 1036PX GRID & ZERO-DEVIATION ALIGNMENT RULES
   ======================================================== */
.topBody {
    width: 1036px !important;
    max-width: 1036px !important;
    margin: 0 auto !important;
    background-color: var(--xl-bg-card, #ffffff) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
}
html[data-theme-mode="night"] .topBody {
    background-color: var(--xl-bg-card, #131b26) !important;
}
.htmlBodyTop {
    background: var(--xl-bg-card, #ffffff) !important;
    border-bottom: 1px solid var(--xl-border, #e2e8f0) !important;
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 100 !important;
}
html[data-theme-mode="night"] .htmlBodyTop {
    background: #0c1427 !important;
    border-color: #1e293b !important;
}
.htmlBodyTop .topBody {
    background: transparent !important;
    padding: 0 !important;
}
.topMenu {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 38px !important;
    line-height: 38px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    overflow: visible !important;
}
.topMenu-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    float: none !important;
    height: 38px !important;
}
.topMenu-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    font-size: 12px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    float: none !important;
    height: 38px !important;
}
.xl-top-nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    float: none !important;
    height: 38px !important;
}
.topMenuClass {
    font-size: 12px !important;
}
.areaL {
    float: left !important;
    width: 400px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
}
.areaR {
    float: right !important;
    width: 636px !important;
    box-sizing: border-box !important;
}
.mainMenu {
    width: 1036px !important;
    max-width: 1036px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}
.mainMenu.scrollfixed {
    width: 1036px !important;
    max-width: 1036px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
.xl-random-shelf-box,
.xl-hot-trends-box,
.discovery-card,
.xl-trends-shelf-box,
.homeItem,
.bottomBox {
    width: 100% !important;
    max-width: 1036px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Subnav Modernization & Night Mode Support */
.topnav li ul.subnav {
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12) !important;
}
.topnav li ul.subnav li a {
    text-align: center !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
html[data-theme-mode="night"] .topnav li ul.subnav {
    background: #182230 !important;
    border: 1px solid #2d3f53 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme-mode="night"] .topnav li ul.subnav li a {
    background: #182230 !important;
    color: #cbd5e1 !important;
}
html[data-theme-mode="night"] .topnav li ul.subnav li a:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}


/* ==========================================================================
   社区论坛风格作者信息栏 & 悬浮名片卡 & 粉丝系统 & 个人空间
   ========================================================================== */

/* 1. 社区论坛风格作者信息栏 */
.xl-forum-author-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    margin: 16px 0 20px 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-sizing: border-box;
    transition: all 0.25s ease;
}
.xl-forum-author-bar:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.xl-author-main-box {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 头像与Lv徽标 */
.xl-author-avatar-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.xl-avatar-anchor {
    display: block;
    position: relative;
    text-decoration: none;
}
.xl-author-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid #ffffff;
    display: block;
    transition: transform 0.2s ease;
}
.xl-author-avatar-wrap:hover .xl-author-avatar-img {
    transform: scale(1.05);
}
.xl-author-lv-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 14px;
    border: 1.5px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.2px;
}

/* 创作者信息 */
.xl-author-content-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xl-author-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.xl-author-name-link {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s ease;
}
.xl-author-name-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* 徽章样式 */
.xl-tag-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 6px;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
}
.xl-tag-group {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}
.xl-tag-lv {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}
.xl-badge-ori {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* 元信息条 */
.xl-author-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
}
.xl-meta-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.xl-meta-cell i {
    font-size: 13px;
    color: #94a3b8;
}

/* 右侧操作交互区 */
.xl-author-actions-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xl-bar-btn-follow,
.xl-space-btn-follow,
.xl-grid-btn-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    white-space: nowrap;
}
.xl-bar-btn-follow:hover,
.xl-space-btn-follow:hover,
.xl-grid-btn-follow:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}
.xl-bar-btn-follow.is-following,
.xl-space-btn-follow.is-following,
.xl-grid-btn-follow.is-following {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
}
.xl-bar-btn-follow.is-following:hover,
.xl-space-btn-follow.is-following:hover,
.xl-grid-btn-follow.is-following:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.xl-bar-btn-msg,
.xl-space-btn-msg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #ffffff;
    color: #475569;
    border: 1px solid #d1d5db;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.xl-bar-btn-msg:hover,
.xl-space-btn-msg:hover {
    background: #f8fafc;
    color: #2563eb;
    border-color: #93c5fd;
}

.xl-font-zoom-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 2px 6px;
    border-radius: 16px;
    font-size: 12px;
    margin-left: 6px;
}
.xl-font-zoom-box .font-zoom-label {
    color: #94a3b8;
    font-size: 11px;
    margin-right: 2px;
}
.xl-font-zoom-box a {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
}
.xl-font-zoom-box a.current,
.xl-font-zoom-box a:hover {
    background: #2563eb;
    color: #ffffff;
}

/* ==========================================================================
   2. 创作者社区名片悬浮卡 (根据参考图 media_1792744197488 像素级复刻)
   ========================================================================== */
.xl-author-popover-card {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 320px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.05);
    padding: 16px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    pointer-events: none;
    cursor: default;
    text-align: left;
    box-sizing: border-box;
}
.xl-author-popover-card.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.xl-author-popover-card::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.xl-ap-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.xl-ap-avatar-box {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: block;
}
.xl-ap-avatar-box img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    background: #f1f5f9;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.xl-ap-lv-tag {
    position: absolute;
    bottom: -3px;
    right: -4px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 6px;
    border: 1.5px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.xl-ap-info {
    flex: 1;
    min-width: 0;
}
.xl-ap-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.xl-ap-username {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xl-ap-username:hover {
    color: #2563eb;
}
.xl-ap-group-pill {
    font-size: 10.5px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.xl-ap-motto {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 6宫格社区数据 */
.xl-ap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 14px;
}
.xl-ap-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}
.xl-ap-stat-label {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 2px;
}
.xl-ap-stat-val {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.xl-ap-stat-val.val-lv {
    color: #2563eb;
}
.xl-ap-stat-val.val-score {
    color: #ea580c;
}
.xl-ap-stat-val.val-lbi {
    color: #d97706;
}
.xl-ap-stat-val.val-fan {
    color: #dc2626;
}

/* 底部操作区 */
.xl-ap-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xl-ap-btn-msg,
.xl-ap-btn-space {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 0;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
}
.xl-ap-btn-msg:hover,
.xl-ap-btn-space:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}
.xl-ap-btn-follow {
    flex: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 0;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    transition: all 0.15s ease;
}
.xl-ap-btn-follow:hover {
    background: #1d4ed8;
}
.xl-ap-btn-follow.is-following {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    box-shadow: none;
}
.xl-ap-btn-follow.is-following:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* ==========================================================================
   3. 私信发送模态框 (Modal)
   ========================================================================== */
.xl-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.xl-modal-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    box-sizing: border-box;
    animation: xlModalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes xlModalIn {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.xl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}
.xl-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.xl-modal-close {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}
.xl-modal-close:hover {
    color: #0f172a;
}
.xl-modal-body {
    padding: 20px;
}
.xl-modal-to-user {
    font-size: 13.5px;
    margin-bottom: 10px;
    color: #475569;
}
.xl-modal-name {
    font-weight: 700;
    color: #2563eb;
}
.xl-modal-textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s ease;
    font-family: inherit;
}
.xl-modal-textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.xl-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}
.xl-modal-btn {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.xl-btn-cancel {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #64748b;
}
.xl-btn-cancel:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.xl-btn-primary {
    background: #2563eb;
    border: none;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.xl-btn-primary:hover {
    background: #1d4ed8;
}

/* 浮动 Toast 提示 */
.xl-community-toast {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #0f172a;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.xl-community-toast.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.xl-community-toast i {
    color: #22c55e;
}

/* ==========================================================================
   4. 个人主页 / 用户公开空间 (usersSpace.php)
   ========================================================================== */
.xl-space-page-container {
    max-width: 1036px !important;
    margin: 16px auto !important;
    box-sizing: border-box;
}

.xl-space-hero-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 16px;
}
.xl-space-banner {
    height: 130px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #38bdf8 100%);
    position: relative;
}
.xl-space-banner-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 16px 16px;
}

.xl-space-profile-row {
    position: relative;
    padding: 0 24px 18px;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}
.xl-space-avatar-wrap {
    position: relative;
    margin-top: -46px;
    flex-shrink: 0;
}
.xl-space-avatar-img {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    object-fit: cover;
    background: #ffffff;
    border: 3.5px solid #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: block;
}
.xl-space-lv-pill {
    position: absolute;
    bottom: -3px;
    right: -4px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.xl-space-profile-info {
    flex: 1;
    min-width: 240px;
    padding-top: 10px;
}
.xl-space-name-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.xl-space-username {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
}
.xl-space-bio {
    font-size: 13.5px;
    color: #475569;
    margin-bottom: 6px;
    line-height: 1.4;
}
.xl-space-meta-strip {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    gap: 14px;
}

.xl-space-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* 核心统计条 */
.xl-space-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    padding: 12px 20px;
}
.xl-space-stat-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-right: 1px solid #edf2f7;
    padding: 4px 0;
}
.xl-space-stat-col:last-child {
    border-right: none;
}
.xl-space-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 3px;
}
.xl-space-stat-label {
    font-size: 12px;
    color: #64748b;
}
.xl-stat-lbi {
    color: #d97706;
}

/* 标签页与文章/关注列表 */
.xl-space-tabs-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
}
.xl-space-tabs-nav {
    display: flex;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    overflow-x: auto;
}
.xl-space-tab-link {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.xl-space-tab-link:hover {
    color: #2563eb;
    background: #f1f5f9;
}
.xl-space-tab-link.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: #ffffff;
}

.xl-space-tab-body {
    padding: 20px;
}

/* 发布的文章卡片列表 */
.xl-space-post-item {
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: transform 0.15s ease;
}
.xl-space-post-item:last-child {
    border-bottom: none;
}
.xl-post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.xl-post-category {
    color: #2563eb;
    font-size: 13.5px;
    font-weight: 600;
}
.xl-post-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s ease;
}
.xl-post-title:hover {
    color: #2563eb;
    text-decoration: underline;
}
.xl-post-badge-ori {
    background: #fef2f2;
    color: #ef4444;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.xl-post-summary {
    font-size: 13.5px;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.5;
}
.xl-post-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: #94a3b8;
}
.xl-post-read-link {
    margin-left: auto;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}
.xl-post-read-link:hover {
    text-decoration: underline;
}

/* 粉丝与关注用户列表网格 */
.xl-user-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.xl-user-card-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    transition: all 0.2s ease;
}
.xl-user-card-cell:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.xl-cell-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}
.xl-cell-avatar img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    background: #ffffff;
    border: 1.5px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.xl-cell-lv {
    position: absolute;
    bottom: -3px;
    right: -4px;
    background: #2563eb;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 6px;
    border: 1px solid #ffffff;
}
.xl-cell-body {
    flex: 1;
    min-width: 0;
}
.xl-cell-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xl-cell-name:hover {
    color: #2563eb;
}
.xl-cell-bio {
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xl-cell-action {
    flex-shrink: 0;
}
.xl-grid-btn-follow {
    padding: 5px 12px;
    font-size: 12px;
}

/* 空状态 */
.xl-empty-state {
    text-align: center;
    padding: 40px 20px;
}
.xl-empty-icon {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 12px;
}
.xl-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}
.xl-empty-desc {
    font-size: 13px;
    color: #94a3b8;
}

/* 分页条 */
.xl-space-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}
.xl-pg-btn {
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #475569;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.15s ease;
}
.xl-pg-btn:hover {
    background: #f1f5f9;
    color: #2563eb;
    border-color: #93c5fd;
}
.xl-pg-btn.current {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}
.xl-pg-info {
    font-size: 12.5px;
    color: #94a3b8;
    margin-left: 10px;
}

/* 关于页面 */
.xl-about-heading {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}
.xl-about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.xl-about-item {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.xl-about-k {
    font-size: 13px;
    color: #64748b;
}
.xl-about-v {
    font-size: 13.5px;
    color: #0f172a;
}
.xl-about-v.font-bold { font-weight: 700; }
.xl-about-v.text-blue { color: #2563eb; }
.xl-about-v.text-amber { color: #d97706; }

/* ==========================================================================
   5. 夜间模式 (Dark Mode) 支持
   ========================================================================== */
html[data-theme-mode="night"] .xl-forum-author-bar {
    background: #182230 !important;
    border-color: #2d3f53 !important;
}
html[data-theme-mode="night"] .xl-author-name-link {
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-author-name-link:hover {
    color: #60a5fa !important;
}
html[data-theme-mode="night"] .xl-author-meta-row {
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-bar-btn-msg {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
html[data-theme-mode="night"] .xl-bar-btn-msg:hover {
    background: #334155 !important;
    color: #ffffff !important;
}
html[data-theme-mode="night"] .xl-font-zoom-box {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html[data-theme-mode="night"] .xl-font-zoom-box a {
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-bar-btn-follow.is-following,
html[data-theme-mode="night"] .xl-space-btn-follow.is-following,
html[data-theme-mode="night"] .xl-grid-btn-follow.is-following {
    background: #243042 !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

/* 名片夜间模式 */
html[data-theme-mode="night"] .xl-author-popover-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme-mode="night"] .xl-author-popover-card::before {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html[data-theme-mode="night"] .xl-ap-username {
    color: #f8fafc !important;
}
html[data-theme-mode="night"] .xl-ap-motto {
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-ap-grid {
    background: #16202e !important;
    border-color: #263548 !important;
}
html[data-theme-mode="night"] .xl-ap-stat-label {
    color: #64748b !important;
}
html[data-theme-mode="night"] .xl-ap-stat-val {
    color: #e2e8f0 !important;
}
html[data-theme-mode="night"] .xl-ap-btn-msg,
html[data-theme-mode="night"] .xl-ap-btn-space {
    background: #243042 !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
html[data-theme-mode="night"] .xl-ap-btn-msg:hover,
html[data-theme-mode="night"] .xl-ap-btn-space:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

/* 个人主页夜间模式 */
html[data-theme-mode="night"] .xl-space-hero-card,
html[data-theme-mode="night"] .xl-space-tabs-box {
    background: #182230 !important;
    border-color: #2d3f53 !important;
}
html[data-theme-mode="night"] .xl-space-username {
    color: #f8fafc !important;
}
html[data-theme-mode="night"] .xl-space-bio {
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-space-stats-bar {
    background: #141c28 !important;
    border-color: #243042 !important;
}
html[data-theme-mode="night"] .xl-space-stat-num {
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-space-stat-col {
    border-color: #243042 !important;
}
html[data-theme-mode="night"] .xl-space-tabs-nav {
    background: #141c28 !important;
    border-color: #243042 !important;
}
html[data-theme-mode="night"] .xl-space-tab-link {
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-space-tab-link.active {
    background: #182230 !important;
    color: #60a5fa !important;
}
html[data-theme-mode="night"] .xl-post-title {
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-user-card-cell {
    background: #141c28 !important;
    border-color: #243042 !important;
}
html[data-theme-mode="night"] .xl-cell-name {
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-modal-card {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}
html[data-theme-mode="night"] .xl-modal-header,
html[data-theme-mode="night"] .xl-modal-footer {
    background: #16202e !important;
    border-color: #263548 !important;
}
html[data-theme-mode="night"] .xl-modal-title {
    color: #f8fafc !important;
}
html[data-theme-mode="night"] .xl-modal-textarea {
    background: #141c28 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   网站最新矢量双模 LOGO (Light / Dark Adaptive Vector SVG)
   ========================================================================== */
.site-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}
.site-logo-link .logoImg {
    height: 54px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: 320px !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.topLogo .a img.xl-logo-light,
.topLogo img.xl-logo-light,
.site-logo-link img.xl-logo-light,
.xl-logo-light {
    display: block !important;
}
.topLogo .a img.xl-logo-dark,
.topLogo img.xl-logo-dark,
.site-logo-link img.xl-logo-dark,
.xl-logo-dark {
    display: none !important;
}
html[data-theme-mode="night"] .topLogo .a img.xl-logo-light,
html[data-theme-mode="night"] .topLogo img.xl-logo-light,
html[data-theme-mode="night"] .site-logo-link img.xl-logo-light,
html[data-theme-mode="night"] .xl-logo-light {
    display: none !important;
}
html[data-theme-mode="night"] .topLogo .a img.xl-logo-dark,
html[data-theme-mode="night"] .topLogo img.xl-logo-dark,
html[data-theme-mode="night"] .site-logo-link img.xl-logo-dark,
html[data-theme-mode="night"] .xl-logo-dark {
    display: block !important;
}
html[data-theme-mode="night"] .topLogo,
html[data-theme-mode="night"] .topLogo ul,
html[data-theme-mode="night"] .topLogo li.a,
html[data-theme-mode="night"] .site-logo-link {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   优化【关注】、【字号】背景颜色为浅色系 (Soft Light Palette)
   ========================================================================== */
.xl-bar-btn-follow,
.xl-space-btn-follow,
.xl-grid-btn-follow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08) !important;
    white-space: nowrap !important;
}
.xl-bar-btn-follow:hover,
.xl-space-btn-follow:hover,
.xl-grid-btn-follow:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.16) !important;
}
.xl-bar-btn-follow.is-following,
.xl-space-btn-follow.is-following,
.xl-grid-btn-follow.is-following {
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
.xl-bar-btn-follow.is-following:hover,
.xl-space-btn-follow.is-following:hover,
.xl-grid-btn-follow.is-following:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

.xl-font-zoom-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 2px 6px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    margin-left: 6px !important;
}
.xl-font-zoom-box .font-zoom-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
    margin-right: 3px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
.xl-font-zoom-box .font-zoom-icon {
    font-size: 13px !important;
    vertical-align: middle !important;
}
.xl-font-zoom-box a {
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    color: #64748b !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}
.xl-font-zoom-box a:hover:not(.current) {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}
.xl-font-zoom-box a.current {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.28) !important;
}

/* 深色模式浅色系按钮适配 */
html[data-theme-mode="night"] .xl-bar-btn-follow,
html[data-theme-mode="night"] .xl-space-btn-follow,
html[data-theme-mode="night"] .xl-grid-btn-follow {
    background: rgba(59, 130, 246, 0.14) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.32) !important;
    box-shadow: none !important;
}
html[data-theme-mode="night"] .xl-bar-btn-follow:hover,
html[data-theme-mode="night"] .xl-space-btn-follow:hover,
html[data-theme-mode="night"] .xl-grid-btn-follow:hover {
    background: rgba(59, 130, 246, 0.24) !important;
    color: #bfdbfe !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}
html[data-theme-mode="night"] .xl-bar-btn-follow.is-following,
html[data-theme-mode="night"] .xl-space-btn-follow.is-following,
html[data-theme-mode="night"] .xl-grid-btn-follow.is-following {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme-mode="night"] .xl-font-zoom-box {
    background: #141d2b !important;
    border-color: #233144 !important;
}
html[data-theme-mode="night"] .xl-font-zoom-box .font-zoom-label {
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-font-zoom-box a {
    color: #94a3b8 !important;
    background: transparent !important;
    border-color: transparent !important;
}
html[data-theme-mode="night"] .xl-font-zoom-box a:hover:not(.current) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-font-zoom-box a.current {
    background: rgba(56, 189, 248, 0.16) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    box-shadow: none !important;
}


/* ==========================================================================
   现代化社区论坛回帖系统 (精美像素级复刻参考图 99854ca2 与 f3fa1fcb)
   ========================================================================== */

/* 1. 回帖列表容器与空状态 */
.xl-reply-thread-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}
.xl-comments-empty {
    text-align: center;
    padding: 36px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    margin: 12px 0 20px;
}
.xl-comments-empty .xl-empty-icon {
    font-size: 38px;
    color: #94a3b8;
    margin-bottom: 8px;
}
.xl-comments-empty .xl-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}
.xl-comments-empty .xl-empty-desc {
    font-size: 13px;
    color: #94a3b8;
}

/* 2. 回帖单卡 (Item Card) */
.xl-reply-item-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.xl-reply-item-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 3. 头像区域 */
.xl-reply-avatar-col {
    flex: 0 0 42px;
}
.xl-reply-avatar-anchor {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease;
}
.xl-reply-avatar-anchor:hover {
    transform: scale(1.05);
}
.xl-reply-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 4. 主要信息区域 */
.xl-reply-main-col {
    flex: 1 1 auto;
    min-width: 0;
}
.xl-reply-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.xl-reply-user-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.xl-reply-author-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s ease;
}
.xl-reply-author-name:hover {
    color: #2563eb;
}

/* 徽章 (楼主/管理/Lv) */
.xl-reply-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}
.xl-badge-lz {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}
.xl-badge-admin {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}
.xl-badge-user {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.xl-reply-time {
    font-size: 12px;
    color: #94a3b8;
    margin-left: 2px;
}
.xl-reply-ip {
    font-size: 11px;
    color: #94a3b8;
    background: #f8fafc;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #f1f5f9;
}

/* 楼层标签 (HOT #楼层) */
.xl-reply-floor-box {
    flex: 0 0 auto;
}
.xl-floor-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.xl-floor-tag.xl-floor-hot {
    background: #fff1f2;
    color: #e11d48;
    border-color: #fecdd3;
}

/* 5. 回帖文字与排版 */
.xl-reply-body-text {
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
    word-break: break-word;
    margin: 8px 0;
}
.xl-reply-body-text p {
    margin: 4px 0;
}

/* 引用楼层卡片 */
.xl-reply-quote-wrap {
    margin: 8px 0;
    padding: 10px 14px;
    background: #f8fafc;
    border-left: 3px solid #3b82f6;
    border-radius: 4px;
    font-size: 13px;
    color: #64748b;
}

/* 管理员官方回复 */
.xl-reply-official-box {
    margin-top: 10px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 13px;
    color: #1e3a8a;
}
.xl-rob-header {
    font-weight: 700;
    margin-bottom: 4px;
    color: #1d4ed8;
}

/* 6. 回帖卡片底部操作条 (👍 点赞 / 💬 回复) */
.xl-reply-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed #f1f5f9;
}
.xl-reply-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.xl-reply-act-btn:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
.xl-reply-act-btn.is-voted {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    animation: xlHeartBeat 0.4s ease;
}
@keyframes xlHeartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* 分页条 */
.xl-reply-pagination-bar {
    text-align: center;
    padding: 16px 0 8px;
}


/* ==========================================================================
   现代化回帖编辑器 (精确复刻参考图 media_1792748242938_f3fa1fcb)
   ========================================================================== */
.xl-forum-reply-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    margin-top: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.xl-forum-reply-card:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 4px 18px rgba(59, 130, 246, 0.12);
}

/* 引用提示条 */
.xl-quoted-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    padding: 8px 14px;
    font-size: 12px;
    color: #1e40af;
}
.xl-qb-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.xl-qb-name {
    font-weight: 700;
    color: #1d4ed8;
}
.xl-qb-close {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.xl-qb-close:hover {
    background: #dbeafe;
    color: #dc2626;
}

/* 编辑器顶部工具栏 */
.xl-editor-toolbar {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.xl-tb-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.xl-tb-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #475569;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.xl-tb-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.xl-tb-counter {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

/* 表情下拉浮层 */
.xl-tb-emoji-wrap {
    position: relative;
    display: inline-block;
}
.xl-emoji-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 240px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    padding: 10px;
    display: none;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    z-index: 999;
}
.xl-emoji-dropdown.is-active {
    display: grid !important;
}
.xl-emoji-item {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 0;
    transition: background 0.15s ease;
}
.xl-emoji-item:hover {
    background: #f1f5f9;
}

/* 输入框 */
.xl-editor-textarea-wrap {
    padding: 4px 0;
}
.xl-reply-textarea {
    width: 100%;
    min-height: 100px;
    max-height: 260px;
    border: none !important;
    outline: none !important;
    padding: 12px 14px !important;
    font-size: 14px;
    line-height: 1.6;
    color: #1e293b;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
    background: transparent;
}
.xl-reply-textarea::placeholder {
    color: #94a3b8;
    font-size: 13.5px;
}

/* 底部操作区 */
.xl-editor-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.xl-editor-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.xl-user-chip {
    display: flex;
    align-items: center;
    gap: 7px;
}
.xl-user-chip-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #cbd5e1;
}
.xl-user-chip-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.xl-guest-input {
    width: 100px;
    height: 28px;
    padding: 2px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
}
.xl-editor-vercode-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}
.xl-editor-shortcut-tip {
    font-size: 11px;
    color: #94a3b8;
}

/* 底部右侧操作按钮：[舍弃] [回复] */
.xl-editor-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xl-btn-discard {
    background: transparent !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.xl-btn-discard:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}
.xl-btn-submit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    padding: 6px 18px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}
.xl-btn-submit:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35) !important;
}

/* 登录提示卡 */
.xl-reply-login-card {
    text-align: center;
    padding: 32px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    margin-top: 14px;
}
.xl-login-icon {
    font-size: 32px;
    color: #94a3b8;
    margin-bottom: 8px;
}
.xl-login-text {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 14px;
}
.xl-login-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.xl-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.xl-btn-in {
    background: #2563eb;
    color: #fff;
}
.xl-btn-in:hover {
    background: #1d4ed8;
}
.xl-btn-reg {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.xl-btn-reg:hover {
    background: #f1f5f9;
    color: #0f172a;
}


/* ==========================================================================
   深色模式 (Night Theme) 适配
   ========================================================================== */
html[data-theme-mode="night"] .xl-comments-empty {
    background: #151d28 !important;
    border-color: #233144 !important;
}
html[data-theme-mode="night"] .xl-comments-empty .xl-empty-title {
    color: #cbd5e1 !important;
}
html[data-theme-mode="night"] .xl-reply-item-card {
    background: #131b26 !important;
    border-color: #233144 !important;
}
html[data-theme-mode="night"] .xl-reply-item-card:hover {
    border-color: #3b82f6 !important;
}
html[data-theme-mode="night"] .xl-reply-avatar-anchor {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html[data-theme-mode="night"] .xl-reply-author-name {
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-reply-author-name:hover {
    color: #60a5fa !important;
}
html[data-theme-mode="night"] .xl-badge-lz {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}
html[data-theme-mode="night"] .xl-badge-admin {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}
html[data-theme-mode="night"] .xl-floor-tag {
    background: #1a2536 !important;
    color: #94a3b8 !important;
    border-color: #2a3b50 !important;
}
html[data-theme-mode="night"] .xl-floor-tag.xl-floor-hot {
    background: rgba(225, 29, 72, 0.15) !important;
    color: #fb7185 !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
}
html[data-theme-mode="night"] .xl-reply-body-text {
    color: #cbd5e1 !important;
}
html[data-theme-mode="night"] .xl-reply-quote-wrap {
    background: #172233 !important;
    border-color: #3b82f6 !important;
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-reply-official-box {
    background: #152238 !important;
    border-color: #1e3a8a !important;
    color: #93c5fd !important;
}
html[data-theme-mode="night"] .xl-reply-action-bar {
    border-top-color: #1e293b !important;
}
html[data-theme-mode="night"] .xl-reply-act-btn {
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-reply-act-btn:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

html[data-theme-mode="night"] .xl-forum-reply-card {
    background: #131b26 !important;
    border-color: #233144 !important;
}
html[data-theme-mode="night"] .xl-forum-reply-card:focus-within {
    border-color: #3b82f6 !important;
}
html[data-theme-mode="night"] .xl-quoted-banner {
    background: #172338 !important;
    border-color: #25406b !important;
    color: #93c5fd !important;
}
html[data-theme-mode="night"] .xl-editor-toolbar {
    background: #172130 !important;
    border-bottom-color: #233144 !important;
}
html[data-theme-mode="night"] .xl-tb-btn {
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-tb-btn:hover {
    background: #233144 !important;
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-emoji-dropdown {
    background: #172130 !important;
    border-color: #2d3f56 !important;
}
html[data-theme-mode="night"] .xl-emoji-item:hover {
    background: #233144 !important;
}
html[data-theme-mode="night"] .xl-reply-textarea {
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-editor-footer {
    background: #172130 !important;
    border-top-color: #233144 !important;
}
html[data-theme-mode="night"] .xl-user-chip-name {
    color: #cbd5e1 !important;
}
html[data-theme-mode="night"] .xl-guest-input {
    background: #131b26 !important;
    border-color: #2d3f56 !important;
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-btn-discard {
    background: transparent !important;
    border-color: #2d3f56 !important;
    color: #94a3b8 !important;
}
html[data-theme-mode="night"] .xl-btn-discard:hover {
    background: #233144 !important;
    color: #f1f5f9 !important;
}
html[data-theme-mode="night"] .xl-reply-login-card {
    background: #151d28 !important;
    border-color: #233144 !important;
}
html[data-theme-mode="night"] .xl-login-text {
    color: #cbd5e1 !important;
}

.replyBox #replyContent.xl-reply-textarea,
#replyContent.xl-reply-textarea,
.xl-reply-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.article-comment-card .replyBox,
.article-comment-card .replyBox dd {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   PC端全局 UI 全面现代化升级：弹窗交互、签到喜报、表明态度、顶部用户态与移动端弹窗
   ========================================================================== */

/* 1. 顶部用户状态栏与签到按钮 */
.xl-top-user-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.xl-top-welcome {
  color: var(--xl-text-main, #334155) !important;
  font-size: 12px !important;
}

.xl-top-uname {
  color: var(--xl-primary, #2563eb) !important;
  font-weight: 700 !important;
}

.xl-top-qiandao-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.xl-top-qiandao-btn:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%) !important;
  color: #92400e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25) !important;
}

.xl-top-link {
  color: var(--xl-text-secondary, #64748b) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 12px !important;
  transition: color 0.15s ease !important;
}

.xl-top-link:hover {
  color: var(--xl-primary, #2563eb) !important;
}

.xl-top-exit {
  color: #ef4444 !important;
}
.xl-top-exit:hover {
  color: #dc2626 !important;
}

/* 2. 手机版二维码弹窗防遮挡与悬浮层级升级 */
.xl-wap-popover {
  z-index: 10060 !important;
}

.xl-wap-popover-card {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* 3. PC端轻量化浮动 Toast 消息通知系统 */
.xl-toast-container {
  position: fixed !important;
  top: 48px !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 20px !important;
  border-radius: 30px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !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;
}

/* 4. PC端全站弹窗系统 (Dialog / Alert / Confirm) */
.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: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.xl-dialog-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  width: 100% !important;
  max-width: 400px !important;
  padding: 24px 22px 20px !important;
  text-align: center !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-sizing: border-box !important;
  animation: xlModalZoom 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

html[data-theme-mode="night"] .xl-dialog-card {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

@keyframes xlModalZoom {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.xl-dialog-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  margin: 0 auto 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
}

.xl-dialog-icon-info {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.xl-dialog-icon-warning {
  background: #fffbeb !important;
  color: #f59e0b !important;
}

.xl-dialog-icon-error {
  background: #fef2f2 !important;
  color: #ef4444 !important;
}

.xl-dialog-icon-success {
  background: #f0fdf4 !important;
  color: #10b981 !important;
}

.xl-dialog-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--xl-text-main, #0f172a) !important;
  margin-bottom: 8px !important;
}

html[data-theme-mode="night"] .xl-dialog-title {
  color: #f8fafc !important;
}

.xl-dialog-content {
  font-size: 13.5px !important;
  color: var(--xl-text-secondary, #64748b) !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
  word-break: break-word !important;
}

html[data-theme-mode="night"] .xl-dialog-content {
  color: #cbd5e1 !important;
}

.xl-dialog-btns {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
}

.xl-dialog-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.xl-dialog-btn-primary {
  background: #2563eb !important;
  color: #ffffff !important;
}
.xl-dialog-btn-primary:hover {
  background: #1d4ed8 !important;
}

.xl-dialog-btn-cancel {
  background: #f1f5f9 !important;
  color: #64748b !important;
}
.xl-dialog-btn-cancel:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* 5. PC端签到喜报大弹窗 (Qiandao Celebration Modal) */
.xl-qiandao-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 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: #ffffff !important;
  color: #1e293b !important;
  border-radius: 24px !important;
  width: 100% !important;
  max-width: 360px !important;
  padding: 32px 24px 26px !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;
}

html[data-theme-mode="night"] .xl-qiandao-card {
  background: #1e293b !important;
  color: #f1f5f9 !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: 21px !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: 13px !important;
  font-weight: 700 !important;
  padding: 4px 16px !important;
  border-radius: 20px !important;
  margin-bottom: 18px !important;
}

.xl-qiandao-rewards {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.xl-qiandao-reward-chip {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

html[data-theme-mode="night"] .xl-qiandao-reward-chip {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

.xl-qiandao-btn-ok {
  width: 100% !important;
  padding: 12px !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
  transition: all 0.2s ease !important;
}

.xl-qiandao-btn-ok:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5) !important;
}

/* 6. 表明态度交互 UI (Article Mood / Reaction Pack) */
.article-vote-card {
  background: var(--xl-bg-card, #ffffff) !important;
  border: 1px solid var(--xl-border, #e2e8f0) !important;
  border-radius: var(--xl-radius-lg, 12px) !important;
  padding: 20px 24px !important;
  margin: 18px 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.xl-reaction-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--xl-border, #f1f5f9) !important;
}

.xl-reaction-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--xl-text-main, #0f172a) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.xl-reaction-sub {
  font-size: 12px !important;
  color: var(--xl-text-muted, #94a3b8) !important;
}

.xl-reaction-pack {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}

.xl-reaction-item {
  position: relative !important;
  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;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.xl-reaction-face {
  width: 64px !important;
  height: 56px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  letter-spacing: 0.5px !important;
}

.xl-reaction-num {
  display: block !important;
  margin-top: 8px !important;
  color: var(--xl-text-secondary, #64748b) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

.xl-reaction-item:hover .xl-reaction-face {
  transform: translateY(-5px) scale(1.08) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16) !important;
}

.xl-reaction-item.is-voted .xl-reaction-face {
  transform: scale(0.96) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4) !important;
}

.xl-reaction-hot .xl-reaction-face { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: #ffffff !important; }
.xl-reaction-top .xl-reaction-face { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #ffffff !important; }
.xl-reaction-upper .xl-reaction-face { background: linear-gradient(135deg, #eab308, #ca8a04) !important; color: #ffffff !important; }
.xl-reaction-npc .xl-reaction-face { background: linear-gradient(135deg, #64748b, #475569) !important; color: #ffffff !important; }
.xl-reaction-pull .xl-reaction-face { background: linear-gradient(135deg, #94a3b8, #64748b) !important; color: #ffffff !important; }

/* 动态 +1 浮动光粒子 */
.xl-vote-floating-plus {
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #2563eb !important;
  pointer-events: none !important;
  animation: xlFloatingUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes xlFloatingUp {
  0% { transform: translate(-50%, 0) scale(0.8); opacity: 1; }
  100% { transform: translate(-50%, -28px) scale(1.2); opacity: 0; }
}


/* 已收藏激活状态 (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;
}

/* PC 评论区底部栏防挤压换行修复 */
.xl-editor-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}
.xl-editor-footer-left,
.xl-editor-footer-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.xl-user-chip,
.xl-user-chip-name,
.xl-editor-shortcut-tip,
.xl-btn-discard,
.xl-btn-submit {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  .xl-editor-shortcut-tip {
    display: none !important;
  }
}

/* Reaction Header - Unified Swiss Minimalism */
.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 var(--xl-border, #e2e8f0) !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: var(--xl-text, #0f172a) !important;
  letter-spacing: -0.2px !important;
}

.xl-reaction-title i, .xl-reaction-title svg {
  color: #ef4444 !important;
  font-size: 16px !important;
}

.xl-reaction-sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--xl-text-muted, #94a3b8) !important;
}

@media (max-width: 640px) {
  .xl-reaction-header {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: center !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
  }
  .xl-reaction-title {
    font-size: 14px !important;
  }
  .xl-reaction-sub {
    font-size: 12px !important;
  }
  .xl-reaction-pack {
    gap: 10px !important;
  }
  .xl-reaction-face {
    width: 52px !important;
    height: 46px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
}

/* Modern Toast Notification - Swiss Minimalism / shadcn/ui */
.xl-toast-container {
  position: fixed !important;
  top: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
  z-index: 999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 22px !important;
  background: rgba(15, 23, 42, 0.94) !important;
  color: #f8fafc !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.4 !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  pointer-events: none !important;
  animation: xlToastIn 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.xl-toast-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.xl-toast-text {
  white-space: nowrap !important;
}

.xl-toast-container.xl-toast-leaving {
  animation: xlToastOut 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes xlToastIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes xlToastOut {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px) scale(0.96);
  }
}

/* Floating +1 ripple */
.xl-vote-floating-plus {
  position: absolute !important;
  top: -14px !important;
  right: -6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ef4444 !important;
  pointer-events: none !important;
  animation: xlFloatPlus 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  z-index: 10 !important;
}

@keyframes xlFloatPlus {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.8);
  }
  30% {
    opacity: 1;
    transform: translateY(-8px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translateY(-24px) scale(1);
  }
}

.xl-reaction-item {
  position: relative !important;
}

.xl-reaction-item:active .xl-reaction-face {
  transform: scale(0.92) !important;
  transition: transform 120ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.xl-reaction-item.is-voted .xl-reaction-face {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !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;
}



/* ==========================================================================
   GLOBAL ARTICLE TITLE CUSTOM COLOR PRESERVATION (SWISS MINIMALISM COMPLIANT)
   ========================================================================== */
.newListDL ul li a[style*="color"],
.itemListDl ul li a[style*="color"],
.itemListDl dd a[style*="color"],
.areaR .newListDL ul li a[style*="color"],
.listArea .titleBox h2 a[style*="color"],
.itemBox .itemContent a[style*="color"],
#newsTitle[style*="color"] {
  text-decoration: none;
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.newListDL ul li a[style*="color"]:hover,
.itemListDl ul li a[style*="color"]:hover,
.itemListDl dd a[style*="color"]:hover,
.areaR .newListDL ul li a[style*="color"]:hover,
.listArea .titleBox h2 a[style*="color"]:hover,
.itemBox .itemContent a[style*="color"]:hover {
  opacity: 0.82 !important;
  text-decoration: underline !important;
}


	/* ========================================================
	   HEADER LOGO + MODERN SEARCH BAR & USER AVATAR (Swiss UI)
	   ======================================================== */
	.topLogo.xl-header-top-wrap {
		width: 1036px !important;
		max-width: 1036px !important;
		margin: 0 auto !important;
		padding: 16px 0 14px 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		box-sizing: border-box !important;
		gap: 36px !important;
		float: none !important;
		overflow: visible !important;
	}
	.xl-header-logo-area {
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
	}
	.xl-header-logo-area .site-logo-link {
		display: inline-flex !important;
		align-items: center !important;
		text-decoration: none !important;
	}
	.xl-header-logo-area img {
		max-height: 52px !important;
		width: auto !important;
		display: block !important;
	}
	.xl-header-search-area {
		flex: 1 !important;
		max-width: 650px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 7px !important;
		box-sizing: border-box !important;
	}
	.xl-header-search-box {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		height: 42px !important;
		background: #ffffff !important;
		border: 1.5px solid #e2e8f0 !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
		padding: 3px 4px 3px 12px !important;
		transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	}
	.xl-header-search-box:hover {
		border-color: #cbd5e1 !important;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
	}
	.xl-header-search-box:focus-within {
		border-color: #2563eb !important;
		box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
		background: #ffffff !important;
	}
	.xl-header-search-category {
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		padding-right: 12px !important;
		margin-right: 8px !important;
		border-right: 1px solid #e2e8f0 !important;
		color: #64748b !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
		user-select: none !important;
	}
	.xl-header-search-category .xl-search-ico {
		color: #2563eb !important;
	}
	.xl-header-search-input {
		flex: 1 !important;
		height: 100% !important;
		min-width: 0 !important;
		border: none !important;
		background: transparent !important;
		font-size: 14px !important;
		color: #0f172a !important;
		outline: none !important;
		padding: 0 6px !important;
		font-family: inherit !important;
	}
	.xl-header-search-input::placeholder {
		color: #94a3b8 !important;
		font-size: 13.5px !important;
	}
	.xl-header-search-submit {
		height: 34px !important;
		padding: 0 18px !important;
		border: none !important;
		border-radius: 6px !important;
		background: #2563eb !important;
		color: #ffffff !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		cursor: pointer !important;
		flex-shrink: 0 !important;
		transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
		box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25) !important;
	}
	.xl-header-search-submit:hover {
		background: #1d4ed8 !important;
		box-shadow: 0 4px 10px rgba(37, 99, 235, 0.32) !important;
		transform: translateY(-0.5px) !important;
	}
	.xl-header-search-submit:active {
		transform: scale(0.985) !important;
	}
	.xl-header-hot-keywords {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
		padding-left: 2px !important;
		flex-wrap: wrap !important;
	}
	.xl-hot-kw-label {
		color: #94a3b8 !important;
		font-size: 12px !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 4px !important;
		white-space: nowrap !important;
	}
	.xl-hot-kw-label .fa-fire {
		color: #f97316 !important;
	}
	.xl-hot-kw-item {
		color: #64748b !important;
		text-decoration: none !important;
		padding: 1px 8px !important;
		border-radius: 4px !important;
		background: #f1f5f9 !important;
		border: 1px solid transparent !important;
		transition: all 0.15s ease !important;
		white-space: nowrap !important;
	}
	.xl-hot-kw-item:hover {
		color: #2563eb !important;
		background: #e0f2fe !important;
		border-color: #bae6fd !important;
	}
	.xl-hot-kw-more {
		color: #3b82f6 !important;
		background: transparent !important;
		font-weight: 500 !important;
	}
	.xl-hot-kw-more:hover {
		background: transparent !important;
		text-decoration: underline !important;
	}

	/* Night Mode Overrides */
	html[data-theme-mode="night"] .topLogo.xl-header-top-wrap {
		background: transparent !important;
	}
	html[data-theme-mode="night"] .xl-header-search-box {
		background: #151d27 !important;
		border-color: #283749 !important;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
	}
	html[data-theme-mode="night"] .xl-header-search-box:hover {
		border-color: #3e5066 !important;
	}
	html[data-theme-mode="night"] .xl-header-search-box:focus-within {
		background: #182330 !important;
		border-color: #3b82f6 !important;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
	}
	html[data-theme-mode="night"] .xl-header-search-category {
		border-color: #283749 !important;
		color: #94a3b8 !important;
	}
	html[data-theme-mode="night"] .xl-header-search-input {
		color: #f1f5f9 !important;
	}
	html[data-theme-mode="night"] .xl-header-search-input::placeholder {
		color: #64748b !important;
	}
	html[data-theme-mode="night"] .xl-hot-kw-item {
		color: #94a3b8 !important;
		background: #1a2533 !important;
		border-color: #233245 !important;
	}
	html[data-theme-mode="night"] .xl-hot-kw-item:hover {
		color: #60a5fa !important;
		background: rgba(59, 130, 246, 0.16) !important;
		border-color: rgba(59, 130, 246, 0.3) !important;
	}

	/* User Center Avatar Enhancements (Logo for Guest, Avatar for Logged-in) */
	.xl-user-card-avatar.xl-user-card-avatar-guest {
		background: #ffffff !important;
		border: 2px solid #e2e8f0 !important;
		box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08) !important;
		padding: 6px !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
	}
	.xl-user-card-avatar.xl-user-card-avatar-guest:hover {
		transform: scale(1.04) !important;
		border-color: #3b82f6 !important;
		box-shadow: 0 4px 12px rgba(37, 99, 235, 0.16) !important;
	}
	html[data-theme-mode="night"] .xl-user-card-avatar.xl-user-card-avatar-guest {
		background: #182230 !important;
		border-color: #2d3d52 !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
	}
	html[data-theme-mode="night"] .xl-user-card-avatar.xl-user-card-avatar-guest:hover {
		border-color: #3b82f6 !important;
	}
	.xl-user-card-avatar.xl-user-card-avatar-guest img.xl-user-card-logo-img {
		width: 36px !important;
		height: 36px !important;
		object-fit: contain !important;
		display: block !important;
	}
	.xl-user-card-avatar.xl-user-card-avatar-logged {
		padding: 0 !important;
		background: #f1f5f9 !important;
		border: 2px solid #3b82f6 !important;
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18) !important;
	}
	.xl-user-card-avatar.xl-user-card-avatar-logged img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}



/* ==========================================================================
   16. PC HOT RANKING PAGE (.xl-hot-page) - 更多榜单页面与排行榜
   ========================================================================== */
.xl-hot-page-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--xl-font-sans);
}

.xl-hot-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--xl-text-sub);
  padding: 4px 2px;
}
.xl-hot-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--xl-text-sub);
  transition: color 150ms ease;
  text-decoration: none;
}
.xl-hot-breadcrumb a:hover {
  color: var(--xl-primary);
}
.xl-hot-breadcrumb .xl-sep {
  color: var(--xl-border);
}
.xl-hot-breadcrumb .xl-curr {
  color: var(--xl-text-main);
  font-weight: 500;
}

.xl-hot-hero {
  position: relative;
  background: var(--xl-bg-card);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-lg);
  padding: 24px 28px;
  box-shadow: var(--xl-shadow-xs);
}
.xl-hot-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--xl-primary);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 9999px;
  margin-bottom: 10px;
}
.xl-hot-hero-title {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--xl-text-main);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.xl-hot-hero-desc {
  margin: 0;
  font-size: 13px;
  color: var(--xl-text-sub);
  line-height: 1.6;
}

.xl-hot-tabs-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--xl-bg-sub);
  padding: 6px;
  border-radius: var(--xl-radius-md);
  border: 1px solid var(--xl-border);
}
.xl-hot-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--xl-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--xl-text-sub);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--xl-radius-sm);
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
}
.xl-hot-tab-btn:hover {
  color: var(--xl-text-main);
  background: rgba(0, 0, 0, 0.03);
}
.xl-hot-tab-btn:active {
  transform: scale(0.985);
}
.xl-hot-tab-btn.active {
  color: var(--xl-primary);
  background: var(--xl-bg-card);
  border-color: var(--xl-border);
  box-shadow: var(--xl-shadow-xs);
}

.xl-hot-pane {
  display: none;
}
.xl-hot-pane.active {
  display: block;
  animation: xlFadeIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.xl-hot-top3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.xl-hot-top-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--xl-bg-card);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-lg);
  overflow: hidden;
  box-shadow: var(--xl-shadow-xs);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease;
}
.xl-hot-top-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--xl-shadow-md);
  border-color: rgba(37, 99, 235, 0.35);
}
.xl-hot-top-card.card-champion {
  border-color: #F59E0B;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
}
.xl-card-badge-wrap {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
}
.xl-rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.rank-gold .xl-rank-pill {
  background: #F59E0B;
  color: #FFFFFF;
}
.rank-silver .xl-rank-pill {
  background: #64748B;
  color: #FFFFFF;
}
.rank-bronze .xl-rank-pill {
  background: #D97706;
  color: #FFFFFF;
}
.xl-medal-svg {
  width: 12px;
  height: 12px;
}

.xl-card-thumb-link {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;
  background: var(--xl-bg-sub);
  overflow: hidden;
  text-decoration: none;
}
.xl-card-thumb-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.xl-hot-top-card:hover .xl-card-thumb-img {
  transform: scale(1.04);
}
.xl-card-cat {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 7px;
  background: rgba(15, 23, 42, 0.75);
  color: #FFFFFF;
  font-size: 11px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.xl-card-info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.xl-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--xl-text-main);
  line-height: 1.45;
  height: 38px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-decoration: none;
  transition: color 150ms ease;
}
.xl-card-title:hover {
  color: var(--xl-primary);
}
.xl-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--xl-text-sub);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.xl-meta-heat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #EF4444;
  font-weight: 600;
}
.xl-meta-date {
  color: var(--xl-text-muted);
}

.xl-hot-rows-wrap {
  background: var(--xl-bg-card);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-lg);
  overflow: hidden;
  box-shadow: var(--xl-shadow-xs);
}
.xl-hot-row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--xl-border);
  transition: background 150ms ease;
}
.xl-hot-row-item:last-child {
  border-bottom: none;
}
.xl-hot-row-item:hover {
  background: var(--xl-bg-sub);
}
.xl-hot-num {
  width: 26px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  border-radius: 6px;
  background: var(--xl-bg-sub);
  border: 1px solid var(--xl-border);
  color: var(--xl-text-sub);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  box-sizing: border-box;
}
.xl-hot-cat-tag {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--xl-bg-sub);
  border: 1px solid var(--xl-border);
  color: var(--xl-text-sub);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.xl-hot-row-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--xl-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: color 150ms ease;
}
.xl-hot-row-title:hover {
  color: var(--xl-primary);
}
.xl-hot-row-side {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.xl-hot-row-heat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #EF4444;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 65px;
  justify-content: flex-end;
}
.xl-hot-row-date {
  font-size: 11px;
  color: var(--xl-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

.xl-hot-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--xl-text-muted);
  background: var(--xl-bg-card);
  border: 1px solid var(--xl-border);
  border-radius: var(--xl-radius-lg);
}
.xl-hot-empty svg {
  margin-bottom: 10px;
  color: var(--xl-text-sub);
}
.xl-hot-empty p {
  margin: 0;
  font-size: 13px;
}

/* 侧边栏榜单 Tabs 图标样式微调 */
.xl-tab-icon {
  flex-shrink: 0;
}

/* Night / Dark Mode */
html[data-theme-mode="night"] .xl-hot-hero,
html[data-theme-mode="night"] .xl-hot-top-card,
html[data-theme-mode="night"] .xl-hot-rows-wrap,
html[data-theme-mode="night"] .xl-hot-empty {
  background: #18181b !important;
  border-color: #27272a !important;
}
html[data-theme-mode="night"] .xl-hot-tabs-nav {
  background: #121215 !important;
  border-color: #27272a !important;
}
html[data-theme-mode="night"] .xl-hot-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
html[data-theme-mode="night"] .xl-hot-tab-btn.active {
  background: #18181b !important;
  border-color: #27272a !important;
  color: #60a5fa !important;
}
html[data-theme-mode="night"] .xl-hot-row-item:hover {
  background: #202024 !important;
}
html[data-theme-mode="night"] .xl-hot-num,
html[data-theme-mode="night"] .xl-hot-cat-tag {
  background: #27272a !important;
  border-color: #3f3f46 !important;
  color: #a1a1aa !important;
}
html[data-theme-mode="night"] .xl-hot-breadcrumb .xl-sep {
  color: #3f3f46 !important;
}


/* ========================================================
   MIDDLE SIDEBAR USER BOX - STRICT 164PX HEIGHT LOCK
   ======================================================== */
.xl-sidebar-user-box,
.itemBox.xl-sidebar-user-box {
  height: 164px !important;
  min-height: 164px !important;
  max-height: 164px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.xl-sidebar-user-box #homeUserBox,
.xl-sidebar-user-box .xl-user-card-inner {
  height: 100% !important;
  box-sizing: border-box !important;
}

.xl-user-card-inner {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.xl-user-card-assets-inline {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 5px !important;
  font-size: 12px !important;
  color: var(--xl-text-muted, #64748b) !important;
  white-space: nowrap !important;
}

.xl-asset-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-weight: 500 !important;
}

.xl-tabular {
  font-variant-numeric: tabular-nums !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

.xl-asset-sep {
  color: #cbd5e1 !important;
  font-size: 11px !important;
}

.xl-asset-mall-inline {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  text-decoration: none !important;
  padding: 1px 6px !important;
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 4px !important;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.xl-asset-mall-inline:hover {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  transform: translateY(-0.5px) !important;
}

html[data-theme-mode="night"] .xl-asset-mall-inline {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #60a5fa !important;
}

html[data-theme-mode="night"] .xl-asset-sep {
  color: #334155 !important;
}


/* ==========================================================================
   TOAST SINGLE BACKGROUND REFINEMENT (Strict Single Sleek Capsule - Zero Outer Overlay)
   ========================================================================== */
.xl-toast-container,
.xl-toast-wrapper,
#xlGlobalToastContainer,
#xlGlobalToastContainer:not(:empty) {
  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;
  pointer-events: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: 90vw !important;
}

.xl-toast-container:empty,
.xl-toast-wrapper:empty,
#xlGlobalToastContainer:empty {
  display: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.xl-toast-item {
  pointer-events: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  background: #09090b !important;
  background-color: #09090b !important;
  color: #fafafa !important;
  font-size: 13.5px !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 8px 24px rgba(0, 0, 0, 0.28) !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: all 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  margin: 0 !important;
}

.xl-toast-item.xl-toast-leaving {
  animation: xlToastOut 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  opacity: 0 !important;
}