:root {
  /* Base Default Colors */
  --primary-color-default: #8b5cf6; /* Default Purple */
  --primary-light-default: #c4b5fd;
  --primary-dark-default: #6d28d9;
  --accent-color-default: #ec4899; /* Default Pink */
  --bg-color-default: #f8fafc;    /* Very light gray */
  --card-bg-default: #ffffff;   /* White */
  --text-color-default: #1e293b;  /* Dark Slate */
  --text-light-default: #64748b; /* Medium Slate */
  --border-color-default: #e2e8f0; /* Light Slate border */
  --hover-bg-default: rgba(139, 92, 246, 0.05); /* Light violet hover */

  /* --- Color Scheme Variables --- */
  /* These will be overridden by schemes or dark theme */
  --primary-color: var(--primary-color-default);
  --primary-light: var(--primary-light-default);
  --primary-dark: var(--primary-dark-default);
  --accent-color: var(--accent-color-default);
  --bg-color: var(--bg-color-default);
  --card-bg: var(--card-bg-default);
  --text-color: var(--text-color-default);
  --text-light: var(--text-light-default);
  --border-color: var(--border-color-default);

  /* New specific variables for scheme control */
  --sidebar-bg: var(--card-bg); /* Sidebar background */
  --sidebar-active-bg: var(--primary-light); /* Sidebar active item background */
  --primary-bg: var(--primary-color); /* Primary action elements background */
  --secondary-bg: var(--bg-color); /* Secondary background areas */
  --accent-bg: var(--accent-color); /* Accent elements background */
  --infohub-border: var(--border-color); /* Specific border for infohub */
  --card-border: var(--border-color); /* Card borders */
  --container-bg: var(--bg-color); /* Main content background */
  --sidebar-text: var(--text-light); /* Text color in sidebar */
  --active-text: var(--primary-dark); /* Text color for active items */
  --hover-bg: var(--hover-bg-default); /* Hover background for items */

  /* --- Other Variables --- */
  --primary-color-rgb: 139, 92, 246; /* Default RGB for primary */
  --secondary-color: #3a0ca3; /* Often used for hover or secondary actions */
  --background-color: #fff; /* Often used for modal backgrounds etc. - Consider linking to --card-bg? */
  --background-alt: #f8fafc; /* Alternative background - Consider linking to --secondary-bg? */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --success-color: #2ecc71;
  --warning-color: #f39c12;
  --error-color: #e74c3c;
  --error-color-rgb: 231, 76, 60; /* Added RGB for error color */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.5rem;
  --border-radius: 8px;
  --transition-time: 0.3s;
  --header-height: 60px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 50px;
  --card-width: 300px;
  --content-width: calc(100% - var(--sidebar-width));
  --sidebar-icon-default-color: #553C9A; /* Added: Default Sidebar Icon Color (Deep Purple) */
}

/* 深色模式 */
.dark-theme {
  /* Override base colors for dark theme */
  --primary-color-default: #4cc9f0; /* Light Blue */
  --primary-light-default: rgba(76, 201, 240, 0.2);
  --primary-dark-default: #4361ee; /* Darker Blue */
  --accent-color-default: #3a0ca3; /* Purple */
  --bg-color-default: #121212;    /* Very Dark Gray */
  --card-bg-default: #1f1f1f;   /* Dark Gray */
  --text-color-default: #f0f0f0;  /* Light Gray */
  --text-light-default: #bbb; /* Medium Gray */
  --border-color-default: #2d2d2d; /* Dark Border */
  --hover-bg-default: rgba(76, 201, 240, 0.1);

  /* Re-apply scheme variables based on new defaults */
  --primary-color: var(--primary-color-default);
  --primary-light: var(--primary-light-default);
  --primary-dark: var(--primary-dark-default);
  --accent-color: var(--accent-color-default);
  --bg-color: var(--bg-color-default);
  --card-bg: var(--card-bg-default);
  --text-color: var(--text-color-default);
  --text-light: var(--text-light-default);
  --border-color: var(--border-color-default);

  /* Update scheme-specific vars based on dark defaults */
  --sidebar-bg: var(--card-bg);
  --sidebar-active-bg: var(--accent-color); /* Use accent for active in dark */
  --primary-bg: var(--primary-color);
  --secondary-bg: var(--card-bg); /* Use card bg for secondary areas */
  --accent-bg: var(--accent-color);
  --infohub-border: var(--border-color);
  --card-border: var(--border-color);
  --container-bg: var(--bg-color);
  --sidebar-text: var(--text-light);
  --active-text: var(--primary-color);
  --hover-bg: var(--hover-bg-default);

  /* Other dark theme overrides */
  --primary-color-rgb: 76, 201, 240;
  --secondary-color: #4361ee; /* Keep secondary distinct */
  --background-color: #1e1e1e; /* Modals etc. */
  --background-alt: #2a2a2a; /* Alt background */
  --shadow-color: rgba(0, 0, 0, 0.3);
  --sidebar-icon-default-color: var(--primary-color); /* Added: Dark mode Sidebar Icon Color (Light Blue) */
}

/* --- Color Schemes (Applied ONLY when NOT .dark-theme) --- */

/* --- Color Schemes (Applied ONLY when NOT .dark-theme) --- */

/* Scheme 1: Purple & Gold Contrast */
body[data-color-scheme="scheme1"]:not(.dark-theme) {
  /* Base Palette (User Suggested Contrast) */
  --primary-color: #6B46C1;         /* Purple */
  --primary-light: #E9D8FD;         /* Light Purple (for borders/active bg) */
  --primary-dark: #553C9A;          /* Dark Purple (for active text/icons) */
  --accent-color: #ECC94B;         /* Gold (Contrast) */
  --bg-color: #F7FAFC;             /* Light Beige/Off-white Background */
  --card-bg: #ffffff;              /* White Card backgrounds */
  --text-color: #2D3748;           /* Dark Gray Text */
  --text-light: #4A5568;           /* Medium Gray Text */
  --border-color: #E9D8FD;         /* Light Purple Border */
  --hover-bg: rgba(107, 70, 193, 0.08); /* Subtle purple hover */

  /* Component specific overrides */
  --primary-bg: var(--primary-color);
  --secondary-bg: #FAF5FF;         /* Very Light Purple (similar to hover) */
  --accent-bg: var(--accent-color);
  --sidebar-bg: #FBFBFE;           /* Slightly off-white sidebar */
  --sidebar-active-bg: var(--primary-light);
  --sidebar-text: var(--text-light); /* Medium Gray sidebar text */
  --active-text: var(--primary-dark); /* Dark Purple active text */
  --card-border: var(--border-color);
  --infohub-border: #D6BCFA;       /* Slightly darker purple border */
  --container-bg: var(--bg-color);
  --primary-color-rgb: 107, 70, 193; /* Update RGB for Purple #6B46C1 */
  --sidebar-icon-default-color: #F6E05E; /* Added: Scheme 1 Sidebar Icon (Gold) */
}

/* Scheme 2: Fresh Green */
body[data-color-scheme="scheme2"]:not(.dark-theme) {
  /* Base Palette */
  --primary-color: #16a34a;         /* Primary actions, links */
  --primary-light: #dcfce7;         /* Active backgrounds */
  --primary-dark: #15803d;          /* Active text */
  --accent-color: #06b6d4;         /* Cyan accent */
  --bg-color: #f7fdf8;             /* Main background (slightly tinted green) */
  --card-bg: #ffffff;              /* Card backgrounds */
  --text-color: #1f2937;           /* Dark text */
  --text-light: #4b5563;           /* Lighter text */
  --border-color: #dcfce7;         /* Light green border */
  --hover-bg: #f0fdf4;             /* Subtle green hover */

  /* Component specific overrides */
  --primary-bg: var(--primary-color);
  --secondary-bg: #f0fdf4;         /* Very light green for alt backgrounds */
  --accent-bg: var(--accent-color);
  --sidebar-bg: #f0fdf4;
  --sidebar-active-bg: var(--primary-light);
  --sidebar-text: #14532d;         /* Dark green sidebar text */
  --active-text: var(--primary-dark);
  --card-border: #a7f3d0;         /* Emerald border for cards */
  --infohub-border: var(--card-border);
  --container-bg: var(--bg-color);
  --primary-color-rgb: 22, 163, 74;
  --sidebar-icon-default-color: #F6AD55; /* Added: Scheme 2 Sidebar Icon (Coral) */
}

/* Scheme 3: Lavender */
body[data-color-scheme="scheme3"]:not(.dark-theme) {
   /* Base Palette */
  --primary-color: #9333ea;         /* Primary actions, links */
  --primary-light: #ede9fe;         /* Active backgrounds */
  --primary-dark: #7e22ce;          /* Active text */
  --accent-color: #f472b6;         /* Pink accent */
  --bg-color: #f9f8ff;             /* Main background (slightly tinted purple) */
  --card-bg: #ffffff;              /* Card backgrounds */
  --text-color: #1f2937;           /* Dark text */
  --text-light: #4b5563;           /* Lighter text */
  --border-color: #ede9fe;         /* Light purple border */
  --hover-bg: #faf5ff;             /* Subtle purple hover */

  /* Component specific overrides */
  --primary-bg: var(--primary-color);
  --secondary-bg: #faf5ff;         /* Very light purple for alt backgrounds */
  --accent-bg: var(--accent-color);
  --sidebar-bg: #f5f3ff;           /* Light purple sidebar */
  --sidebar-active-bg: var(--primary-light);
  --sidebar-text: #5b21b6;         /* Dark purple sidebar text */
  --active-text: var(--primary-dark);
  --card-border: var(--border-color);
  --infohub-border: #ddd6fe;       /* Slightly darker purple border */
  --container-bg: var(--bg-color);
   --primary-color-rgb: 147, 51, 234;
   --sidebar-icon-default-color: #553C9A; /* Added: Scheme 3 Sidebar Icon (Deep Purple) */
}

/* Scheme 4: Warm Orange Yellow */
body[data-color-scheme="scheme4"]:not(.dark-theme) {
   /* Base Palette */
  --primary-color: #f59e0b;         /* Primary actions, links (Amber 500) */
  --primary-light: #fef3c7;         /* Active backgrounds (Amber 100) */
  --primary-dark: #b45309;          /* Active text (Amber 700) */
  --accent-color: #f43f5e;         /* Accent (Rose 500) */
  --bg-color: #fffcf5;             /* Main background (slightly tinted orange) */
  --card-bg: #ffffff;              /* Card backgrounds */
  --text-color: #44403c;           /* Darker Stone/Brown text */
  --text-light: #78716c;           /* Lighter Stone/Brown text */
  --border-color: #fde68a;         /* Default borders (Amber 200) */
  --hover-bg: #fffbeb;             /* Subtle Amber hover */

  /* Component specific overrides */
  --primary-bg: var(--primary-color);
  --secondary-bg: #fffbeb;         /* Light amber for alt backgrounds */
  --accent-bg: var(--accent-color);
  --sidebar-bg: #fffbeb;           /* Sidebar bg */
  --sidebar-active-bg: var(--primary-light);
  --sidebar-text: #78350f;         /* Dark amber sidebar text */
  --active-text: var(--primary-dark);
  --card-border: #fed7aa;         /* Orange border for cards */
  --infohub-border: var(--border-color);
  --container-bg: var(--bg-color);
   --primary-color-rgb: 245, 158, 11;
   --sidebar-icon-default-color: #2B6CB0; /* Added: Scheme 4 Sidebar Icon (Deep Blue) */
}

/* Scheme 5: Sky Blue */
body[data-color-scheme="scheme5"]:not(.dark-theme) {
   /* Base Palette */
  --primary-color: #0ea5e9;         /* Primary actions, links (Sky 500) */
  --primary-light: #e0f2fe;         /* Active backgrounds (Sky 100) */
  --primary-dark: #0369a1;          /* Active text (Sky 700) */
  --accent-color: #06b6d4;         /* Accent (Cyan 500) */
  --bg-color: #f7fcff;             /* Main background (slightly tinted blue) */
  --card-bg: #ffffff;              /* Card backgrounds */
  --text-color: #1f2937;           /* Dark text */
  --text-light: #4b5563;           /* Lighter text */
  --border-color: #e0f2fe;         /* Default borders (Sky 100) */
  --hover-bg: #f0f9ff;             /* Subtle blue hover */

  /* Component specific overrides */
  --primary-bg: var(--primary-color);
  --secondary-bg: #f0f9ff;         /* Light sky for alt backgrounds */
  --accent-bg: var(--accent-color);
  --sidebar-bg: #f0f9ff;           /* Sidebar bg */
  --sidebar-active-bg: var(--primary-light);
  --sidebar-text: #0c4a6e;         /* Dark blue sidebar text */
  --active-text: var(--primary-dark);
  --card-border: #bae6fd;         /* Sky 200 border for cards */
  --infohub-border: var(--card-border);
  --container-bg: var(--bg-color);
  --primary-color-rgb: 14, 165, 233;
  --sidebar-icon-default-color: #B83280; /* Added: Scheme 5 Sidebar Icon (Magenta) */
}

/* Icon Color Adjustments (Consolidated & Enhanced Contrast) */

/* Default Icon Color */
.sidebar .category-nav ul li a i { /* Sidebar icons */
  color: var(--sidebar-icon-default-color); /* UPDATED: Use new variable */
  transition: color 0.2s ease;
}
.subcategory-item .icon-container { /* Subcategory icons */
  color: var(--text-light); /* Keep using text-light */
  transition: color 0.2s ease;
}

.dark-theme .sidebar .category-nav ul li a i,
.dark-theme .subcategory-item .icon-container {
   /* Use sidebar text in dark theme as it's usually lighter */
  color: var(--sidebar-text);
}


/* Active Icon Color */
.sidebar .category-nav ul li.active a i, /* Increased specificity */
.subcategory-item.active .icon-container {
  /* Use active-text for light schemes where bg is light */
  /* Ensures good contrast e.g., dark purple text on light violet bg */
  color: var(--active-text); 
}
.dark-theme .sidebar .category-nav ul li.active a i,
.dark-theme .subcategory-item.active .icon-container {
   /* Use white for dark schemes where bg is dark/colored */
  /* Ensures good contrast e.g., white icon on dark blue bg */
  color: white; 
}


/* Hover Icon Color */
.sidebar .category-nav ul li:not(.active):hover a i, /* Increased specificity */
.subcategory-item:not(.active):hover .icon-container {
   /* Use the scheme's primary color on hover */
  color: var(--primary-color);
}
.dark-theme .sidebar .category-nav ul li:not(.active):hover a i,
.dark-theme .subcategory-item:not(.active):hover .icon-container {
  color: var(--primary-color);
}

/* --- General Styles using variables --- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--container-bg); /* Use scheme variable */
  transition: background-color var(--transition-time), color var(--transition-time);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  margin-top: 0;
}

a {
  color: var(--primary-color); /* Use scheme variable */
  text-decoration: none;
  transition: color var(--transition-time);
}

a:hover {
  color: var(--primary-dark); /* Use scheme variable */
}

img {
  max-width: 100%;
  height: auto;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit; /* Ensures button text color follows body or parent */
  transition: all var(--transition-time);
}

/* 页面布局 */
.main-container {
  display: flex;
  min-height: calc(100vh - (var(--header-height) * 0.67));
  padding-top: calc(var(--header-height) * 0.67);
  position: relative;
  overflow: hidden;
  background-color: var(--container-bg); /* Use scheme variable */
}

/* 头部样式 */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--header-height) * 0.67); /* 降低三分之一高度 */
  background: linear-gradient(to right, #2563eb, #4f46e5); /* 渐变背景 */
  color: white;
  display: flex;
  align-items: center;
  z-index: 1000;
  transition: background-color var(--transition-time);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo部分样式 */
.header-logo {
  display: flex;
  align-items: center;
  gap: 8px; /* 缩小间距 */
  margin-left: 0; /* 确保靠左 */
}

.header-logo a {
  display: flex;
  align-items: center;
  gap: 8px; /* 缩小间距 */
  text-decoration: none;
  color: white;
}

.logo-icon {
  background-color: white;
  color: #2563eb;
  height: 28px; /* 缩小尺寸 */
  width: 28px; /* 缩小尺寸 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.logo-icon i {
  font-size: 0.9rem; /* 缩小图标 */
}

.logo-text {
  font-weight: bold;
  font-size: 1rem; /* 缩小字体 */
  color: white;
}

.beta-badge {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 0.65rem; /* 缩小字体 */
  padding: 1px 6px; /* 缩小内边距 */
  border-radius: 4px;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 4px 12px; /* 缩小内边距 */
  flex: 1;
  max-width: 500px;
  margin: 0 20px; /* 添加左右间距 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 添加边框 */
  transition: all 0.2s ease;
}

.search-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.7); /* 聚焦时边框颜色加深 */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); /* 添加发光效果 */
}

.search-bar i {
  color: rgba(255, 255, 255, 0.7);
  margin-right: 6px; /* 缩小间距 */
  font-size: 0.8rem; /* 缩小图标 */
}

.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 4px 0; /* 缩小内边距 */
  color: white;
  outline: none;
  font-size: 0.85rem; /* 缩小字体 */
}

.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* 恢复搜索按钮样式 */
.search-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 50%;
}

.search-bar button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

/* 头部控制区 */
.header-controls {
  display: flex;
  align-items: center;
  gap: 10px; /* 缩小间距 */
  margin-right: 0; /* 确保靠右 */
}

.header-slogan {
  color: white;
  font-size: 0.8rem; /* 缩小字体 */
}

.settings-btn {
  background-color: white;
  color: #2563eb;
  border: none;
  border-radius: 9999px;
  padding: 4px 12px; /* 缩小内边距 */
  display: flex;
  align-items: center;
  gap: 4px; /* 缩小间距 */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem; /* 缩小字体 */
}

.settings-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.settings-btn i {
  font-size: 0.8rem; /* 缩小图标 */
}

/* 适配移动设备 */
@media (max-width: 768px) {
  .header-slogan {
    display: none; /* 隐藏标语 */
  }
  
  .search-bar {
    display: flex; /* 恢复显示搜索栏 */
    max-width: 180px; /* 限制宽度 */
    padding: 3px 8px; /* 进一步缩小内边距 */
    margin: 0 10px; /* 减少间距 */
  }
  
  .settings-btn span {
    display: none; /* 隐藏设置文字 */
  }
  
  .settings-btn {
    width: 28px; /* 缩小尺寸 */
    height: 28px; /* 缩小尺寸 */
    padding: 0;
    justify-content: center;
  }
  
  .header-content {
    justify-content: space-between; /* 确保两端对齐 */
    padding: 0 5px; /* 添加小间距 */
  }
  
  .beta-badge {
    display: none; /* 隐藏Beta标签 */
  }
}

@media (max-width: 576px) {
  .logo-text {
    font-size: 0.9rem; /* 进一步缩小字体 */
  }
  
  .logo-icon {
    height: 24px; /* 进一步缩小尺寸 */
    width: 24px; /* 进一步缩小尺寸 */
  }
  
  .settings-btn {
    width: 24px; /* 进一步缩小尺寸 */
    height: 24px; /* 进一步缩小尺寸 */
  }
}

/* 页面布局调整，适配新的header高度 */
.main-container {
  min-height: calc(100vh - (var(--header-height) * 0.67));
  padding-top: calc(var(--header-height) * 0.67);
}

/* 侧边栏位置调整 */
.sidebar {
  top: calc(var(--header-height) * 0.67);
  height: calc(100vh - (var(--header-height) * 0.67));
}

.theme-toggle button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light); /* Use scheme variable */
}

.theme-toggle button:hover {
  background-color: var(--hover-bg); /* Use scheme variable */
  color: var(--primary-color); /* Use scheme variable */
}

/* 侧边栏样式 */
/* 侧边栏固定布局与现代设计 */
.sidebar {
  position: fixed;
  left: 0;
  top: calc(var(--header-height) * 0.67);
  width: var(--sidebar-width);
  height: calc(100vh - (var(--header-height) * 0.67));
  background-color: var(--sidebar-bg); /* Use scheme variable */
  border-right: 1px solid var(--border-color); /* Use scheme variable */
  transition: width var(--transition-time), transform var(--transition-time);
  overflow-y: auto;
  z-index: 1000;
  scrollbar-width: thin;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  /* Ensure vertical scrolling is enabled and hide scrollbar */
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.sidebar::-webkit-scrollbar { /* Hide scrollbar for WebKit browsers */
    display: none;
}

/* 折叠侧边栏样式 */
.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  overflow: visible;
}

.sidebar.collapsed .sidebar-header span,
.sidebar.collapsed .category-nav ul li a span,
.sidebar.collapsed .category-count,
.sidebar.collapsed .sidebar-footer span {
  display: none;
}

.sidebar.collapsed .category-nav ul li a {
  justify-content: center;
  padding: 12px 0;
}

.sidebar.collapsed .category-nav ul li a i {
  margin-right: 0;
  font-size: 1.3rem;
}

.sidebar.collapsed .sidebar-toggle {
  justify-content: center;
}

.sidebar.collapsed .sidebar-toggle span {
  display: none;
}

/* 侧边栏切换按钮 */
.sidebar-toggle {
  display: flex;
  align-items: center;
  padding: 12px 1.5rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.sidebar-toggle:hover {
  background-color: var(--hover-bg); /* Use scheme variable */
}

.dark-theme .sidebar-toggle:hover {
  background-color: rgba(255,255,255,0.05);
}

.sidebar-toggle i {
  margin-right: 10px;
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.sidebar-toggle span {
  font-weight: 500;
}

.sidebar.collapsed .sidebar-toggle i {
  transform: rotate(180deg);
}

/* 图标悬停提示 */
.sidebar.collapsed .category-nav ul li a {
  position: relative;
}

.sidebar.collapsed .category-nav ul li a:hover::after {
  content: attr(data-title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--background-color);
  color: var(--text-color);
  padding: 5px 10px;
  border-radius: var(--border-radius);
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 100;
  margin-left: 10px;
  font-size: 0.9rem;
}

/* Dark mode sidebar */
.dark-theme .sidebar {
  background: var(--background-color);
  border-right-color: var(--border-color);
}

/* Clean scrollbar */
.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.1);
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,0.2);
}

/* Navigation menu - Modern style */
.category-nav {
  padding: 0;
  width: 100%;
}

.category-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.category-nav ul li {
  margin: 8px 0;
  width: 100%;
  transition: all 0.2s ease;
}

.category-nav ul li a {
  display: flex;
  align-items: center;
  padding: 8px 1.5rem;
  color: var(--sidebar-text); /* Use scheme variable */
  font-weight: 400;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 6px;
  height: 44px;
  width: calc(100% - 12px);
  margin: 0 6px;
}

/* Icon style */
.category-nav ul li a i {
  margin-right: 10px;
  font-size: 1rem;
  width: 20px;
  text-align: center;
  opacity: 0.9; /* Slightly increase default opacity */
  transition: all 0.2s ease;
}

/* Active state and hover effects */
.category-nav ul li.active a {
  background-color: var(--sidebar-active-bg); /* Use scheme variable */
  color: var(--active-text); /* Use scheme variable */
  font-weight: 500;
}

.category-nav ul li.active a i {
  color: var(--active-text); /* Use active text color */
  opacity: 1;
}

.category-nav ul li:not(.active):hover a {
  background-color: var(--hover-bg); /* Use scheme variable */
}

.category-nav ul li:not(.active):hover a i {
  color: var(--primary-color); /* Use primary color on hover */
}

.dark-theme .category-nav ul li:not(.active):hover a {
  background: rgba(255,255,255,0.05);
}

/* Item count */
.category-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-light); /* Use scheme variable */
  background: rgba(0,0,0,0.05); /* Keep subtle for now */
  border-radius: 12px;
  padding: 2px 8px;
  transition: all 0.2s ease;
}

.category-nav ul li.active .category-count {
  background: rgba(var(--primary-color-rgb), 0.15); /* Use RGB for consistency */
  color: var(--primary-color); /* Use scheme variable */
}

/* Footer links */
.sidebar-footer {
  padding: 1rem 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 8px 0;
  color: var(--text-color);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-bottom: 10px;
  border-radius: 6px;
}

.sidebar-link:hover {
  opacity: 0.7;
  color: var(--primary-color);
}

.sidebar-link i {
  margin-right: 10px;
  font-size: 0.9rem;
  color: var(--text-light);
  transition: all 0.2s ease;
}

.sidebar-link:hover i {
  color: var(--primary-color);
}
  
  /* 侧边栏背景遮罩 */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .sidebar-backdrop.active {
    display: block;
    opacity: 1;
  }
  
  /* 侧边栏展开时内容区域的特殊处理 */
  .sidebar.expanded ~ .content {
    margin-left: 240px; /* 侧边栏展开宽度 */
    width: calc(100% - 240px);
    transition: margin-left 0.3s, width 0.3s, filter 0.3s;
  }
  
  /* 移动设备上简化AI区域和信息中心区域 */


/* 删除汉堡菜单样式 */
.hamburger-menu {
  display: none !important;
}


/* 移除选项卡相关样式 */
.mobile-tab-container,
.mobile-tabs,
.mobile-tab,
.mobile-tab-content,
.desktop-only-sections {
  display: none !important;
}

/* Default state for bottom nav: hidden on desktop */
.bottom-nav {
  display: none;
}

/* 侧边栏背景遮罩 */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  transition: all 0.3s ease;
}

/* Main content area */
.content {
  margin-left: var(--sidebar-width);
  padding: 20px;
  transition: margin-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  background-color: var(--container-bg); /* Use scheme variable */
}

body.sidebar-collapsed .content,
body.sidebar-collapsed footer {
  margin-left: var(--sidebar-collapsed-width);
  transition: margin-left var(--transition-time);
}

/* 增强discovery-section的卡片效果 */
.discovery-section {
  background-color: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 15px;
  margin-bottom: 24px;
  position: relative;
  border: 1px solid var(--border-color);
  overflow: hidden; /* 确保内容不溢出圆角 */
}

.discovery-header {
  text-align: left; /* Change from center to left */
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.discovery-header h2 {
  font-size: 1.8rem;
  margin-bottom: var(--spacing-sm);
  color: var(--text-color);
  margin-left: 0; /* Ensure no unexpected left margin */
}

.discovery-header p {
  color: var(--text-light);
  font-size: 1rem;
  margin-left: 0; /* Ensure no unexpected left margin */
  /* It will now inherit text-align: left */
}

.powered-badge {
  position: absolute;
  top: -15px;
  right: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.category-selector, .tags-selector {
  margin-bottom: var(--spacing-lg);
}

.category-selector h3, .tags-selector h3 {
  margin-bottom: var(--spacing-sm);
  color: var(--text-color);
  font-size: 1.1rem;
}

.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.category-buttons button {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--background-alt);
  border-radius: 50px;
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-time);
}

.category-buttons button:hover, .category-buttons button.active {
  background-color: var(--primary-color);
  color: white;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.tags-container button {
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--background-alt);
  border-radius: 50px;
  color: var(--text-color);
  font-size: 0.85rem;
  transition: all var(--transition-time);
}

.tags-container button:hover, .tags-container button.active {
  background-color: var(--accent-color);
  color: white;
}

.discovery-results {
  background-color: var(--background-alt);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  min-height: 200px;
}

.discovery-message {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  font-weight: bold;
}

.discovery-category-message {
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
}

/* 网站卡片部分 */
.websites-section {
  background-color: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  border: 1px solid var(--card-border);
  margin-bottom: 30px; /* 增加与footer的间距 */
}

.category-title {
  margin-bottom: var(--spacing-sm);
  font-size: 1.3rem;
  color: var(--text-color);
  padding-bottom: 0;
  border-bottom: none;
}

.subcategory-title {
  display: none;
}

/* 卡片网格布局优化 - 统一网格设置 */
.website-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 15px;
}

/* 网站卡片优化 - 压缩高度 */
.website-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 10px; /* 进一步减少内边距 */
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--card-border); /* Use scheme variable */
  height: 100%;
  min-width: 0;
}

.website-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 卡片头部 - 水平布局 */
.website-card .card-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* 改回顶部对齐 */
  margin-bottom: 6px; /* 减少下方间距 */
}

/* Logo样式 */
.website-card .card-logo {
  width: 48px;
  height: 48px;
  margin-right: 10px; /* 减少右侧间距 */
  flex-shrink: 0;
  display: flex; /* 增加flex布局 */
  align-items: flex-start; /* 顶部对齐 */
}

.website-card .card-logo img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 卡片内容区 */
.website-card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 确保文本可以正确截断 */
  padding-top: 0; /* 确保内容区顶部无间距 */
}

.website-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color); /* Use scheme variable */
  margin: 0; /* 移除标题上下边距 */
  padding-top: 0; /* 确保标题顶部无间距 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2; /* 减少行高 */
}

.website-card .card-description {
  font-size: 0.8rem; /* 减小字体 */
  color: var(--text-light); /* Use scheme variable */
  line-height: 1.2; /* 进一步减少行高 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* Add standard property */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0 0 0; /* 减少上边距 */
  max-height: 2.4em; /* 限制最大高度 */
}

/* 底部按钮区域 */
.website-card .card-actions {
  display: flex;
  justify-content: space-between;
  margin-top: auto; /* 推到底部 */
  padding-top: 5px; /* 减少上边距 */
  margin-top: 4px; /* 减少与描述的间距 */
  border-top: 1px solid var(--border-color);
}

/* 按钮样式 */
.website-card .action-btn {
  width: 28px; /* 减小按钮尺寸 */
  height: 28px; /* 减小按钮尺寸 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--secondary-bg); /* Use secondary bg for buttons */
  color: var(--text-light); /* Use light text */
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  font-size: 0.85rem; /* 减小图标尺寸 */
}

.website-card .action-btn:hover {
  background: var(--primary-bg); /* Use primary bg on hover */
  color: white; /* Assuming white text on primary */
}

/* AI模型卡片特殊样式 */
.website-card[href*="openai.com/dall-e"],
.website-card[href*="stability.ai"],
.website-card[href*="gemini.google.com"],
.website-card[href*="runwayml.com"],
.website-card[href*="midjourney.com"] {
  border-left: 4px solid var(--accent-color);
}

.website-card[href*="openai.com/dall-e"]:hover,
.website-card[href*="stability.ai"]:hover,
.website-card[href*="gemini.google.com"]:hover,
.website-card[href*="runwayml.com"]:hover,
.website-card[href*="midjourney.com"]:hover {
  border-left-color: var(--primary-dark);
}

/* 新增分类样式 */
.category-view-all {
  font-size: 0.85rem;
  color: var(--primary-color);
  font-weight: 500;
  margin-top: 0.5rem;
  cursor: pointer;
  display: inline-block;
}

.category-view-all:hover {
  text-decoration: underline;
}

/* Part 1: Subcategory Grid Layout (Desktop - 12 columns) */

.subcategories-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.5rem;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
}

.subcategory-item {
  padding: 0.75rem 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100px;
  border-radius: 12px;
  background-color: var(--card-bg);
  color: var(--text-color);
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.subcategory-item .subcategory-name {
  font-weight: 500;
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
  line-height: 1.2;
  white-space: pre-line;
  max-height: 2.5rem;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.subcategory-item .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background-color: var(--secondary-bg); /* Use secondary bg */
  color: var(--text-light); /* Default icon color */
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.subcategory-item .name-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.subcategory-item .subcategory-name {
  font-weight: 500;
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
  line-height: 1.2;
  white-space: pre-line;
  max-height: 2.5rem;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.subcategory-item:hover {
  background-color: var(--hover-bg); /* Use scheme variable */
  transform: translateY(-2px);
}

.subcategory-item:hover .icon-container {
   color: var(--primary-color); /* Icon color on item hover */
}

.subcategory-item.active {
  background-color: var(--primary-bg); /* Use scheme variable */
  color: white; /* Assuming white text */
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.25);
}

.subcategory-item.active .icon-container {
  background-color: rgba(255, 255, 255, 0.2); /* Lighten for active */
  color: white; /* White icon on active background */
}

.subcategory-count {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  background-color: var(--secondary-bg); /* Use secondary bg */
  margin-top: auto;
  margin-bottom: 0;
  color: var(--text-light);
}

.subcategory-item.active .subcategory-count {
  background-color: rgba(255, 255, 255, 0.2); /* Lighten for active */
  color: white;
}

/* 深色主题特殊适配 */
.dark-theme .subcategory-item {
  background-color: var(--background-alt);
  border-color: rgba(255, 255, 255, 0.05);
}

.dark-theme .subcategory-item .icon-container {
  background-color: rgba(255, 255, 255, 0.05);
}

.dark-theme .subcategory-item .subcategory-count {
  background-color: rgba(255, 255, 255, 0.05);
}

.dark-theme .subcategory-item:hover {
  background-color: var(--hover-bg);
}

/* STYLE 3: Gradient Ribbon (Dynamic Title) */
.subcategories-container .subcategory-item:first-child {
  position: relative;
  overflow: hidden;
}

.subcategories-container .subcategory-item:first-child::before {
  content: attr(data-category-title);
  position: absolute;
  top: 16px;
  left: -38px;
  width: 125px;
  padding: 4px 0;
  background: linear-gradient(45deg, var(--primary-dark), var(--primary-color));
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  transform: rotate(-45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* 响应式布局 - 统一媒体查询 */
@media (max-width: 1200px) {
  .website-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .website-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .website-cards {
    grid-template-columns: 1fr;
  }
  
  .content {
    padding: 15px 12px;
  }
}

/* 垂直悬浮栏 */
.floating-nav {
  position: fixed;
  right: var(--spacing-lg);
  bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  z-index: 100;
}

.float-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px var(--shadow-color);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.float-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--shadow-color);
}

/* 增强型垂直悬浮栏样式 */
#footer-tools {
  position: fixed;
  right: var(--spacing-lg);
  bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  z-index: 101;
}

.enhanced-btn, #footer-tools .btn {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  margin: 5px 0;
  text-decoration: none;
  padding: 0;
}

.enhanced-btn i, #footer-tools .btn i {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.enhanced-btn .btn-text, #footer-tools .btn-text {
  position: absolute;
  white-space: nowrap;
  transition: all 0.3s ease;
  color: white;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  right: 15px;
  transform: translateX(20px);
}

.enhanced-btn:hover, #footer-tools .btn:hover {
  width: 140px;
  border-radius: 24px;
}

.enhanced-btn:hover i, #footer-tools .btn:hover i {
  left: 24px;
  transform: translateX(0);
}

.enhanced-btn:hover .btn-text, #footer-tools .btn:hover .btn-text {
  opacity: 1;
  transform: translateX(0);
}

/* 搜索按钮样式 */
.search-icon-btn {
  background: linear-gradient(135deg, #1a73e8, #4285f4);
  color: white;
}

.search-icon-btn:hover {
  background: linear-gradient(135deg, #0d62d1, #1a73e8);
}

/* AI 助手按钮样式 */
.ai-icon-btn {
  background: linear-gradient(135deg, #6200ea, #9c27b0);
  color: white;
}

.ai-icon-btn:hover {
  background: linear-gradient(135deg, #5000d1, #8a00a7);
}

/* 返回顶部按钮样式 */
.go-up {
  background: linear-gradient(135deg, #41b883, #2cb5e8);
  color: white;
}

.go-up:hover {
  background: linear-gradient(135deg, #329d6e, #23a8d8);
}

/* 客服按钮样式 */
.kefu {
  background: linear-gradient(135deg, #007bff, #00a5ff);
  color: white;
}

.kefu:hover {
  background: linear-gradient(135deg, #0069d9, #0095e8);
}

/* 夜间模式按钮样式 */
.switch-dark-mode {
  background: linear-gradient(135deg, #333, #666);
  color: #f8f9fa;
}

.switch-dark-mode:hover {
  background: linear-gradient(135deg, #222, #555);
}

/* 按钮动画效果 */
.enhanced-btn.attention, #footer-tools .btn.attention {
  animation: brightnessAnimation 1s infinite alternate;
}

@keyframes brightnessAnimation {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.3); }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(26, 115, 232, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(98, 0, 234, 0.5);
  }
  100% {
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.8);
  }
}

/* 搜索模态框样式增强 */
.search-modal .modal-dialog {
  max-width: 800px;
}

.search-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal-header {
  background-color: var(--background-color);
  border-bottom: 1px solid var(--border-color);
}

.search-box-container {
  margin-bottom: 25px;
}

.search-input {
  height: 60px;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

/* 响应式调整 */
@media (max-width: 767px) {
  #footer-tools {
    padding: 0 10px;
    height: 50px;
  }
  
  .enhanced-btn, #footer-tools .btn {
    width: 32px;
    height: 32px;
  }
  
  .enhanced-btn .btn-text, #footer-tools .btn-text {
    display: none;
  }
}

/* main-footer 样式 */
.main-footer {
  display: none; /* 默认隐藏，因为我们只需要使用footer-tools部分 */
}

/* 页脚样式 */
footer {
  background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
  color: white;
  padding: var(--spacing-xl) var(--spacing-lg);
  margin-left: var(--sidebar-width);
  position: relative;
  border-radius: 16px 16px 0 0; /* 增加圆角顶部边缘 */
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05); /* 添加上方阴影 */
  border-top: none;
  transition: margin-left var(--transition-time);
}

/* 在移动设备上全宽显示 */


.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start; /* 改为顶部对齐 */
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: var(--spacing-lg);
  gap: 30px; /* 增加间距 */
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.footer-logo i {
  font-size: 1.5rem;
  margin-right: var(--spacing-sm);
  color: white; /* 图标改为白色 */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)); /* 添加阴影效果 */
}

.footer-logo span {
  font-weight: bold;
  font-size: 1.2rem;
  color: white; /* 文字改为白色 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影 */
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 增加链接间距 */
  margin-bottom: var(--spacing-md);
}

.footer-links a {
  color: #ffffff; /* 改为完全白色 */
  transition: all 0.3s;
  position: relative;
  padding-left: 15px; /* 为箭头图标留出空间 */
}

.footer-links a:before {
  content: "→"; /* 添加箭头图标 */
  position: absolute;
  left: 0;
  opacity: 0;
  transition: all 0.3s;
}

.footer-links a:hover {
  color: white;
  transform: translateX(5px); /* 悬停时向右移动效果 */
}

.footer-links a:hover:before {
  opacity: 1; /* 悬停时显示箭头 */
}

.footer-social {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15); /* 半透明背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-time);
  color: white;
}

.footer-social a:hover {
  background-color: white;
  color: var(--primary-color);
  transform: translateY(-5px) rotate(5deg); /* 上移并微微旋转 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.footer-copyright {
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* 半透明分隔线 */
  color: #ffffff; /* 改为完全白色 */
  font-size: 0.9rem;
}

/* Optimized loading styles */
.lazy-load {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lazy-load.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Bootstrap compatibility fixes */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

/* Mobile menu toggle button */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--text-color);
  border-radius: 50%;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.menu-toggle:hover {
  background-color: var(--background-alt);
  color: var(--primary-color);
}

.menu-toggle:focus {
  outline: none;
}

/* 分类部分 */
/* categories-section优化 - 压缩高度，增加视觉效果 */
.categories-section {
  background-color: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: var(--spacing-sm) 20px; /* Significantly reduced vertical padding */
  margin-bottom: var(--spacing-md); /* Reduced bottom margin */
  border: 1px solid var(--border-color);
}

/* 增强category-header样式 - 直接隐藏 */
.category-header {
  /* display: flex; */
  /* align-items: center; */
  /* flex-wrap: wrap; */
  /* gap: 12px; */
  /* margin-bottom: 16px; */
  /* padding-bottom: 15px; */
  /* border-bottom: 1px solid var(--border-color); */
  display: none; /* Hide the entire header */
}

/* .category-header h2 { ... }  <- Styles inside are now irrelevant */
/* .category-header h2::after { ... } <- Styles inside are now irrelevant */
/* .category-description { ... } <- Styles inside are now irrelevant */

.category-description {
  color: var(--text-light);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}

/* 小屏幕上的响应式布局 */
@media (max-width: 576px) {
  .category-header {
    padding: 15px 0;
    margin-bottom: 10px;
  }
  
  .category-header h2::after {
    width: 60px;
  }
}

/* 暗黑模式适配 */
.dark-theme .categories-section {
    background-color: var(--bg-color-secondary);
}

.dark-theme .subcategory-item {
    background-color: var(--bg-color);
}

.dark-theme .subcategory-item:hover {
    background-color: var(--primary-color-dark);
}

/* 查看所有按钮 */
.view-more-section {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.view-more-btn {
  background-color: var(--background-alt);
  border: none;
  border-radius: 30px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px var(--shadow-color);
}

.view-more-btn:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

/* 分类模态框 */
.categories-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.categories-modal-content {
  background-color: var(--background-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
}

.categories-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.categories-modal-header h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
}

.close-modal {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-light);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-modal:hover {
  background-color: var(--background-alt);
  color: var(--primary-color);
}

.categories-modal-body {
  padding: 1.5rem;
}

.category-section {
  margin-bottom: 2rem;
}

.category-section h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--text-color);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.subcategory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.subcategory-list-item {
  background-color: var(--background-alt);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subcategory-list-item:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}

.subcategory-list-item .count {
  color: var(--text-light);
  font-size: 0.8rem;
}

.subcategory-list-item:hover .count {
  color: rgba(255, 255, 255, 0.8);
}

/* 分享选项样式 */
.share-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 10px 0;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 15px;
  width: 80px;
  height: 90px;
  text-align: center;
  transition: all 0.2s ease;
}

.share-option:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  background-color: #fff;
}

.share-option i {
  margin-bottom: 8px;
}

.share-option span {
  font-size: 12px;
  font-weight: 500;
}

.share-text-container {
  background-color: #f5f8fc;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.share-text-container .form-label {
  color: #555;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.share-text-container .form-control {
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  resize: none;
  transition: border-color 0.2s ease;
}

.share-text-container .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

#qrcode {
  margin: 0 auto;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 添加更多空间给社交分享图标 */
.footer-social {
  gap: 15px !important;
}

/* 网站卡片促销标签样式 */
/* 促销样式1: 角标设计 - 用于显示Bonus */
.website-card {
    position: relative; /* 确保卡片设置为relative定位以支持角标 */
}

/* 斜角标样式 */
.promo-corner-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none; /* 防止角标阻挡点击 */
}

.promo-corner-ribbon::before {
    content: attr(data-promo);
    position: absolute;
    display: block;
    width: 150px;
    padding: 5px 0;
    background-color: #f39c12; /* bonus颜色 */
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    top: 23px;
    right: -45px;
    transform: rotate(45deg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* 促销样式2: 圆形角标 - 用于显示Free Trial */
.promo-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 56px;
    height: 56px;
    background: #2ecc71; /* free trial颜色 */
    border-radius: 50%;
    color: white;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    pointer-events: none; /* 防止角标阻挡点击 */
    border: 2px solid white;
}

/* 金融市场卡片布局样式 */
.financial-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}

.market-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.dark-theme .market-card {
    background-color: #2a2a2a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.market-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.market-card-header {
    padding: 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
}

.dark-theme .market-card-header {
    background-color: #333;
    border-bottom: 1px solid #444;
}

.market-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.dark-theme .market-card-header h3 {
    color: #f0f0f0;
}

.market-card-content {
    padding: 10px;
}

.market-item {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.dark-theme .market-item {
    border-bottom: 1px solid #444;
}

.market-item:last-child {
    border-bottom: none;
}

.market-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.market-symbol {
    font-weight: bold;
    font-size: 14px;
    color: #333;
}

.dark-theme .market-symbol {
    color: #f0f0f0;
}

.market-name {
    font-size: 12px;
    color: #777;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.dark-theme .market-name {
    color: #aaa;
}

.market-item-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.market-price {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.dark-theme .market-price {
    color: #f0f0f0;
}

.market-change {
    display: flex;
    align-items: center;
    font-size: 13px;
    border-radius: 4px;
    padding: 2px 6px;
}

.positive-change {
    color: #0ecb81;
    background-color: rgba(14, 203, 129, 0.1);
}

.negative-change {
    color: #f6465d;
    background-color: rgba(246, 70, 93, 0.1);
}

.change-icon {
    margin-right: 2px;
    font-size: 10px;
}

/* Specific styles for each market type */
.crypto-card .market-card-header {
    background-color: #f8f2ff;
}

.dark-theme .crypto-card .market-card-header {
    background-color: #3a2f45;
}

.stocks-card .market-card-header {
    background-color: #f2f8ff;
}

.dark-theme .stocks-card .market-card-header {
    background-color: #2f3a45;
}

.forex-card .market-card-header {
    background-color: #f2fff8;
}

.dark-theme .forex-card .market-card-header {
    background-color: #2f453a;
}

.indices-card .market-card-header {
    background-color: #fff8f2;
}

.dark-theme .indices-card .market-card-header {
    background-color: #45392f;
}

.commodities-card .market-card-header {
    background-color: #f2f2ff;
}

.dark-theme .commodities-card .market-card-header {
    background-color: #2f2f45;
}

.indicators-card .market-card-header {
    background-color: #fff2f2;
}

.dark-theme .indicators-card .market-card-header {
    background-color: #452f2f;
}

.gainers-card .market-card-header {
    background-color: #f2fff2;
}

.dark-theme .gainers-card .market-card-header {
    background-color: #2f452f;
}

.losers-card .market-card-header {
    background-color: #fff2fb;
}

.dark-theme .losers-card .market-card-header {
    background-color: #452f3f;
}


@media (max-width: 480px) {
    .financial-dashboard {
        grid-template-columns: 1fr;
        padding: 10px;
    }
}

/* 加载指示器样式优化 */
.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

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

.dark-theme .spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: var(--primary-color);
}

/* 错误消息样式 */
.error-message {
  background-color: rgba(231, 76, 60, 0.1);
  border-left: 4px solid var(--error-color);
  padding: 15px;
  margin: 15px 0;
  border-radius: var(--border-radius);
  color: var(--text-color);
}

.error-message i {
  color: var(--error-color);
  font-size: 20px;
  margin-right: 10px;
}

.error-message h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--error-color);
}

.dark-theme .error-message {
  background-color: rgba(231, 76, 60, 0.15);
}

/* 更小屏幕上的额外调整 */
@media (max-width: 576px) {
  .content {
    padding: 60px 10px 80px;
  }
}

/* 确保侧边栏折叠样式正确 */
.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  overflow: visible;
}

/* 侧边栏折叠时隐藏文字 */
.sidebar.collapsed .sidebar-header span,
.sidebar.collapsed .category-nav ul li a span,
.sidebar.collapsed .category-count,
.sidebar.collapsed .sidebar-footer span {
  display: none;
}

/* 折叠时优化图标 */
.sidebar.collapsed .category-nav ul li a {
  justify-content: center;
  padding: 12px 0;
}

.sidebar.collapsed .category-nav ul li a i {
  margin-right: 0;
  font-size: 1.3rem;
}


/* 桌面版和移动版内容显示控制 */
.mobile-tab-container {
  display: none;
}

.desktop-only-sections {
  display: block;
}

@media (max-width: 768px) {
  .mobile-tab-container {
    display: block;
  }
  
  .desktop-only-sections {
    display: none;
  }

  /* Ensure category header is hidden on mobile by default before potentially re-styling */
  .category-header {
    display: none !important; /* Force hide */
  }

  /* Hide header dropdowns on mobile */
  header .color-scheme-select-container,
  header .country-select-container {
      display: none;
  }
  /* --- 侧边栏 Start --- */
  .sidebar {
    width: var(--sidebar-collapsed-width, 50px);
    transition: width 0.3s ease;
    overflow-y: auto; 
    position: fixed;
    left: 0;
    top: calc(var(--header-height) * 0.67);
    height: calc(100vh - (var(--header-height) * 0.67));
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    /* Ensure vertical scrolling is enabled and hide scrollbar */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
  }
  .sidebar::-webkit-scrollbar { /* Hide scrollbar for WebKit browsers */
      display: none;
  }

  /* 侧边栏展开状态 */
  .sidebar.expanded {
    width: 240px;
    z-index: 1001;
  }

  /* 侧边栏展开时显示文字 */
  .sidebar.expanded .category-nav ul li a span:not(.category-count),
  .sidebar.expanded .sidebar-toggle span,
  .sidebar.expanded .sidebar-footer a span {
    display: inline-block;
    opacity: 1;
    visibility: visible;
  }

  /* 侧边栏折叠时隐藏文字 */
  .sidebar:not(.expanded) .category-nav ul li a span:not(.category-count),
  .sidebar:not(.expanded) .sidebar-toggle span,
  .sidebar:not(.expanded) .sidebar-footer a span {
    display: none;
    opacity: 0;
    visibility: hidden;
  }

  /* 侧边栏菜单项通用调整 */
  .category-nav ul li {
    margin: 0; /* 移除外边距，更紧凑 */
  }

  /* 主分类头部样式 */
  .category-header {
    padding: 8px 15px; /* 调整内边距 */
    height: auto; /* 移除固定高度 */
    width: 100%;
    /* Ensure flex properties for alignment in mobile view */
    display: flex; 
    align-items: center;
  }

  /* 子分类列表 */
  .subcategory-list {
    padding-left: 10px; /* 轻微缩进子分类 */
    display: block; /* Ensure sublist is visible when parent is active */
  }
  
  /* 子分类列表项 */
   .subcategory-list li {
       margin-bottom: 2px; /* 减少列表项之间的间距 */
   }

  /* 子分类链接样式 */
  .category-nav .subcategory-list a {
    font-size: 0.85em; /* 缩小字体 */
    padding: 5px 15px; /* 调整内边距，更紧凑 */
    height: auto; /* 移除固定高度 */
    width: 100%;
    display: flex; /* Ensure flex for alignment */
    align-items: center; /* Vertically align icon and text */
  }

  /* 图标通用样式 (主/子分类) */
  .category-icon,
  .subcategory-icon {
    font-size: 0.9em; /* 缩小图标字体大小 */
    width: 20px; /* 固定图标宽度 */
    text-align: center; /* 确保图标在其容器内居中 */
    flex-shrink: 0; /* Prevent icon from shrinking */
  }

  /* 主分类图标与文字间距 (展开时) */
  .sidebar.expanded .category-header .category-icon {
     margin-right: 8px;
  }
   /* 子分类图标与文字间距 (展开时) */
  .sidebar.expanded .subcategory-list a .subcategory-icon {
     margin-right: 8px;
  }

  /* 侧边栏折叠时的图标居中 */
  .sidebar:not(.expanded) .category-header,
  .sidebar:not(.expanded) .subcategory-list a {
      justify-content: center; /* 水平居中容器内容 */
      padding-left: 0;
      padding-right: 0;
  }
  .sidebar:not(.expanded) .category-icon,
  .sidebar:not(.expanded) .subcategory-icon {
      margin-right: 0; /* 折叠时无右边距 */
      width: 100%; /* 占满容器宽度以实现居中 */
  }
   /* 隐藏箭头 */
  .sidebar:not(.expanded) .category-arrow {
      display: none;
  }


  /* 背景遮罩 */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .sidebar-backdrop.active {
    display: block;
    opacity: 1;
  }
  /* --- 侧边栏 End --- */

  /* --- 内容区域 Start --- */
  .content {
    margin-left: var(--sidebar-collapsed-width, 50px);
    width: calc(100% - var(--sidebar-collapsed-width, 50px));
    padding: 20px 15px 80px 15px; /* 调整内边距, 增加底部 padding for bottom nav */
  }

  /* 侧边栏展开时内容区域 */
  .sidebar.expanded ~ .content {
    margin-left: 240px; /* 侧边栏展开宽度 */
    width: calc(100% - 240px);
    transition: margin-left 0.3s, width 0.3s, filter 0.3s;
  }


  /* --- 内容区域 End --- */



  footer {
    margin-left: var(--sidebar-collapsed-width, 50px);
    width: calc(100% - var(--sidebar-collapsed-width, 50px));
    padding: 20px 15px; /* 可能已存在 */
    text-align: center; /* 可能已存在 */
  }
  /* --- 页头/页脚 End --- */

  /* --- 页面元素显隐 Start --- */
  .menu-toggle {
    display: block; /* 可能已存在 */
  }

  /* 隐藏桌面版悬浮工具栏 */
  #footer-tools {
    display: none; /* 可能已存在 */
  }

  /* 显示移动版底部导航 */
  .bottom-nav {
      display: flex !important; /* 确保显示 */
      justify-content: space-around;
      align-items: center;
      height: 60px;
      padding: 0 10px;
      background-color: var(--background-color);
      border-top: 1px solid var(--border-color);
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
  }

   .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    flex: 1;
    color: var(--text-color);
    cursor: pointer;
  }

  .bottom-nav-item i {
    font-size: 1.2rem;
    margin-bottom: 3px;
  }

  .bottom-nav-item span {
    font-size: 0.7rem;
  }


  /* 显示移动选项卡容器，隐藏桌面内容 */
  .mobile-tab-container {
    display: block;
     margin: 15px 0;
    padding: 15px;
    background-color: var(--background-alt);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px var(--shadow-color);
  }

  .desktop-only-sections {
    display: none;
  }
   /* --- 页面元素显隐 End --- */


  .subcategories-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 4px;
    margin-bottom: 1rem;
  }

  .subcategory-item {
    min-height: 85px;
    padding: 0.5rem 0.1rem;
    border-radius: 8px;
    background-color: var(--background-alt);
    color: var(--text-color);
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .subcategory-item .icon-container {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }

  .subcategory-item .subcategory-name {
    font-size: 0.68rem; /* Slightly smaller font size */
    line-height: 1.2; /* Adjusted line height for better clamping */
    max-height: calc(1.2em * 2); /* Limit height to 2 lines based on line-height */
    margin-bottom: 0.15rem;
    /* --- Text Truncation Properties --- */
    display: -webkit-box; /* Required for line-clamp */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical; /* Required for line-clamp */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis (...) */
    /* white-space: pre-line; */ /* REMOVED - Interferes with line-clamp */
    word-break: break-all; /* Help break long words if needed, might be too aggressive */
  }

  .subcategory-item .subcategory-count {
     /* Keep existing styles or adjust slightly if needed */
    padding: 0.1rem 0.35rem;
    font-size: 0.65rem;
    margin-top: auto; /* Ensure count stays at bottom */
  }

  .website-cards {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
    width: 100%;
  }

  .website-card {
      width: 100%;
      margin: 0;
  }

   body.sidebar-open {
    overflow: hidden;
  }

   /* Financial Dashboard */
    .financial-dashboard {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .market-card-header h3 {
        font-size: 16px;
    }

    .market-symbol {
        font-size: 14px;
    }

    .market-name {
        font-size: 12px;
        max-width: 100px;
    }

    .market-price {
        font-size: 14px;
    }

    .market-change {
        font-size: 12px;
    }



} /* End of @media (max-width: 768px) */



/* Header controls styling */
.header-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); /* Add some space between controls */
}

/* Style for the select containers */
.color-scheme-select-container,
.country-select-container {
  position: relative;
}

/* Style for the select dropdowns */
#color-scheme-select,
#country-select,
#color-scheme-select-footer,
#country-select-footer {
  -webkit-appearance: none; /* Remove default appearance */
  -moz-appearance: none;
  appearance: none;
  background-color: var(--background-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 5px 25px 5px 10px; /* Adjust padding for arrow */
  font-size: 0.9rem;
  color: var(--text-light);
  cursor: pointer;
  transition: background-color var(--transition-time), border-color var(--transition-time), color var(--transition-time);
  height: 40px; /* Match theme button height */
  line-height: 30px; /* Adjust line height for vertical centering */
  vertical-align: middle; /* Align with button */
}

#color-scheme-select:hover,
#country-select:hover,
#color-scheme-select-footer:hover,
#country-select-footer:hover {
  border-color: var(--primary-color);
  color: var(--text-color);
}

/* Custom dropdown arrow */
.color-scheme-select-container::after,
.country-select-container::after {
  content: '\25BC'; /* Unicode down arrow */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none; /* Allow clicks on the select */
  font-size: 0.7rem;
}

/* Visually hidden label */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer controls styling */
.footer-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto; /* Push controls to the right in flex container */
}

.footer-controls .theme-toggle button,
.footer-controls #color-scheme-select-footer,
.footer-controls #country-select-footer {
    /* Inherit most styles, but maybe adjust background/color for footer */
    background-color: transparent; /* Blend better with footer */
    color: var(--text-light); /* Use footer text color */
    border: 1px solid var(--text-light); /* Use footer text color for border */
    height: 36px; /* Slightly smaller for footer */
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: initial; /* Reset line-height for footer */
    border-radius: var(--border-radius);

}
.footer-controls .theme-toggle button:hover,
.footer-controls #color-scheme-select-footer:hover,
.footer-controls #country-select-footer:hover {
    color: #ffffff; /* White on hover */
    border-color: #ffffff;
}
.footer-controls .color-scheme-select-container::after,
.footer-controls .country-select-container::after {
     color: var(--text-light); /* Use footer text color */
}
.footer-controls .theme-toggle button i{
   font-size: 0.9em; /* Slightly smaller icon */
}

/* Responsive adjustments for controls */
@media (max-width: 768px) {
    .header-controls {
        gap: 5px; /* Reduce gap on smaller screens */
    }
    #color-scheme-select,
    #country-select {
        padding: 5px 20px 5px 8px; /* Adjust padding */
        font-size: 0.8rem;
        height: 36px;
    }
    .color-scheme-select-container::after,
    .country-select-container::after {
        right: 8px;
    }

    /* Footer controls stacking */
    .footer-content {
        flex-direction: column; /* Stack items vertically */
         align-items: center; /* Center items */
    }
     .footer-links, .footer-social, .footer-controls {
        margin-bottom: 15px; /* Add space between stacked items */
        width: 100%; /* Make full width */
        justify-content: center; /* Center items within container */
        text-align: center;
    }
    .footer-controls {
       margin-left: 0; /* Remove margin when stacked */
       margin-top: 10px; /* Add some space above */
    }
}



/* Information Hub Header styles for components like Discovery and Information Hub */
/* DELETED the combined rules for .discovery-header, .aggregator-header and their children */

/* === ADDED SEPARATE STYLES FOR AGGREGATOR HEADER === */
.aggregator-header {
  background: linear-gradient(to right, #8b5cf6, #6366f1); /* Gradient from discovery.html */
  padding: 16px; /* Padding from discovery.html */
  position: relative; /* Needed for the absolute positioned badge */
  border-radius: 16px 16px 0 0; /* Optional: Add top border radius to match discovery card look */
  margin-bottom: 0; /* Remove default margin if any */
  /* border-bottom: 1px solid var(--border-color); Removed border for now, header has background */
  display: flex; /* ADDED: Use Flexbox for alignment */
  align-items: center; /* ADDED: Vertically align items */
  gap: 10px; /* ADDED: Gap between icon and title area */
}

/* ADDED: Style for the title area wrapper */
.aggregator-title-area {
    flex-grow: 1; /* Allow title area to take remaining space */
}

.aggregator-header h2 {
  font-size: 1.25rem; /* Font size from discovery.html */
  font-weight: 700; /* Font weight from discovery.html */
  color: white; /* White text color */
  margin: 0; /* Remove all margins to fix spacing issue */
  line-height: 1.2; /* Line height from discovery.html */
  /* display: inline-block; */ /* REMOVED inline-block */
  /* vertical-align: middle; */ /* REMOVED vertical-align */
}

.aggregator-header p {
  font-size: 0.875rem; /* Font size from discovery.html */
  color: rgba(255, 255, 255, 0.8); /* Light white text color from discovery.html */
  margin: 0; /* REMOVED top margin, set all to 0 */
  line-height: 1.3; /* Adjusted line-height as requested previously */
}

.aggregator-header-icon {
  font-size: 1.6rem; /* Keep previous size or adjust */
  /* margin-right: 10px; */ /* REMOVED margin, using gap in flex container */
  color: white; /* White icon color */
  /* vertical-align: middle; */ /* REMOVED vertical-align */
  flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Slogan badge style, ensure it works with the new header context */
.aggregator-slogan-badge {
  position: absolute;
  /* top: 16px; */ /* REMOVED fixed top */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for vertical centering */
  right: 16px; /* Align with padding */
  background: rgba(255, 255, 255, 0.2); /* Use transparent background like discovery badge */
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem; /* Match discovery badge */
  font-weight: 500;
  backdrop-filter: blur(4px); /* Add blur effect like discovery badge */
  /* Removed gradient, using transparent white */
}

/* Mobile optimization: Hide paragraph in aggregator header */
@media (max-width: 576px) {
  .aggregator-header p {
    display: none;
  }
   .aggregator-slogan-badge {
     display: none; /* Optionally hide badge on very small screens */
   }

}
/* === END OF ADDED/MODIFIED AGGREGATOR STYLES === */


/* Ensure original powered-badge style remains if needed elsewhere */
/* This rule seems specific to the discovery section based on discovery.html */
/* .powered-badge { ... } */ /* Commenting out or ensuring it's correctly scoped if kept */


/* INFOTMATION HUB Modern Tabs Aggregator Styles - Using Variables */
.modern-tabs-aggregator {
    background: var(--card-bg); /* Use variable */
    border-radius: 16px;
    box-shadow: 0 4px 12px var(--shadow-color); /* Use variable */
    margin: 1px 0;
    overflow: hidden;
    border: 1px solid var(--border-color); /* Use variable */
}

/* Removed .aggregator-header rules here as they are consolidated above */

/* Replace original CSS from approx line 2462 to 2564 */

.tabs-navigation {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color); /* Use variable */
  background: var(--background-alt); /* Use variable */
  scrollbar-width: none; /* For Firefox */
}

.tabs-navigation::-webkit-scrollbar {
  display: none; /* For Chrome and Safari */
}

.tab-button {
  padding: 12px 16px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-light); /* Use variable */
  border: none;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent; /* Add transparent border for spacing active state */
  margin-bottom: -1px; /* Overlap border */
}

.tab-button .tab-icon {
  margin-right: 8px;
  font-size: 1.1rem;
}

.tab-button:hover {
  color: var(--primary-color); /* Use variable */
  background: var(--hover-bg); /* Use variable */
}

.tab-button.active {
  color: var(--primary-color); /* Use variable */
  border-bottom-color: var(--primary-color); /* Use variable for border */
  /* background: var(--primary-light); Remove background highlight for active */
}

.tab-content-container {
  position: relative;
}

.tab-content {
  display: none;
  padding: 16px;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

.tab-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tab-content-header h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color); /* Use variable */
  margin: 0;
}

.tab-actions {
  display: flex;
  gap: 8px;
}

.tab-filter {
  padding: 6px 12px;
  border: 1px solid var(--border-color); /* Use variable */
  border-radius: 6px;
  font-size: 0.8rem;
  background-color: var(--card-bg); /* Use variable */
  color: var(--text-light); /* Use variable */
}

.refresh-button {
  padding: 6px 12px;
  background: var(--hover-bg); /* Use variable */
  color: var(--primary-color); /* Use variable */
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.refresh-button:hover {
  background: var(--primary-light); /* Use variable */
}

/* Replace original CSS from approx line 2565 to 2667 */

/* News Items Styles - Updated for grid layout and variables */
.news-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  min-height: 200px;
  position: relative;
}

.news-item {
  padding: 10px;
  border: 1px solid var(--border-color); /* Use variable */
  border-radius: 8px; /* Or var(--border-radius) */
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  background-color: var(--card-bg); /* Use card background */
}

.news-item:hover {
  background: var(--hover-bg); /* Use variable */
  transform: translateY(-2px);
  box-shadow: 0 2px 8px var(--shadow-color); /* Use variable */
}

.news-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.news-category {
  font-size: 0.65rem;
  background: var(--background-alt); /* Use variable */
  color: var(--text-light); /* Use variable */
  padding: 2px 6px;
  border-radius: 12px;
}

.news-meta {
  font-size: 0.65rem;
  color: var(--text-light); /* Use variable */
  white-space: nowrap;
}

.news-source {
  margin-right: 4px;
}

.news-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-color); /* Use variable */
  margin: 0;
  line-height: 1.3;
  /* Limit to 3 lines with ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.news-title:hover {
  color: var(--primary-color); /* Use variable */
}

/* Footer inside the tab content */
.tab-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.load-more-button {
  padding: 8px 16px;
  color: var(--primary-color); /* Use variable */
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.load-more-button:hover {
  background: var(--hover-bg); /* Use variable */
}

/* Footer of the entire aggregator component */
.aggregator-footer {
  padding: 12px;
  text-align: center;
  border-top: 1px solid var(--border-color); /* Use variable */
  background-color: var(--background-alt); /* Match tabs-navigation background */
}

.aggregator-footer p {
  font-size: 0.75rem;
  color: var(--text-light); /* Use variable */
  margin: 0;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .tab-content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .tab-actions {
        width: 100%;
    }
    
    .tab-filter {
        flex: 1;
    }
}

/* Reddit Items Styles - Updated for grid layout */
.reddit-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    min-height: 200px;
    position: relative;
}

.reddit-post {
    padding: 10px;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.reddit-post:hover {
    background: var(--hover-bg); /* Use variable */
    transform: translateY(-2px);
    box-shadow: 0 2px 8px var(--shadow-color); /* Use variable */
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.subreddit {
    color: var(--accent-color); /* Use accent color? Or --error-color? */
    font-weight: 500;
    font-size: 0.7rem;
}

.post-meta {
    font-size: 0.65rem;
    color: var(--text-light); /* Use variable */
}

.post-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-color); /* Use variable */
    margin: 0;
    line-height: 1.3;
}

.post-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.65rem;
    color: var(--text-light); /* Use variable */
}

.upvotes, .comments {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* GitHub Items Styles - Updated for grid layout */
.github-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    min-height: 200px;
    position: relative;
}

.github-repo {
    padding: 10px;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.github-repo:hover {
    background: var(--hover-bg); /* Use variable */
    transform: translateY(-2px);
    box-shadow: 0 2px 8px var(--shadow-color); /* Use variable */
}

.repo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.repo-name {
    color: var(--primary-color); /* Use variable */
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.language-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    color: white; /* Keep white for contrast on dynamic bg */
}

.repo-description {
    font-size: 0.75rem;
    color: var(--text-light); /* Use variable */
    margin: 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    height: 2.6em;
}

.repo-stats {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    font-size: 0.65rem;
    color: var(--text-light); /* Use variable */
}

.stars, .forks, .gained {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Movies Grid Styles - Updated for compact display */
.movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    min-height: 200px;
    position: relative;
}

.movie-card {
    display: flex;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    height: 120px;
}

.movie-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color); /* Use variable */
}

.movie-poster {
    width: 80px;
    height: 120px;
    flex-shrink: 0;
}

.movie-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movie-info {
    flex: 1;
    padding: 8px;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
}

.movie-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color); /* Use variable */
    margin: 0 0 4px;
    line-height: 1.2;
    /* Limit to 2 lines with ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.movie-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 0.7rem;
}

.movie-genre, .movie-release {
    font-size: 0.7rem;
    color: var(--text-light); /* Use variable */
    margin-bottom: 2px;
}

.genre-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.genre-badge {
    font-size: 0.65rem;
    background: var(--background-alt); /* Use variable */
    color: var(--text-light); /* Use variable */
    padding: 1px 4px;
    border-radius: 4px;
}

/* Financial Tables Styles - Updated for compact display */
.financial-section {
    margin-bottom: 16px;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color); /* Use variable */
    margin: 0 0 8px;
}

/* Financial Cards Styles */
.crypto-grid, .stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    min-height: 100px;
    position: relative;
    margin-bottom: 20px;
}

.crypto-card, .stock-card {
    padding: 12px;
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg); /* Use variable */
}

.crypto-card:hover, .stock-card:hover {
    background: var(--hover-bg); /* Use variable */
    transform: translateY(-2px);
    box-shadow: 0 2px 8px var(--shadow-color); /* Use variable */
}

.crypto-card-header, .stock-card-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.crypto-symbol, .stock-symbol {
    font-weight: 600;
    color: var(--primary-color); /* Use variable */
    font-size: 0.9rem;
}

.crypto-name, .stock-name {
    font-size: 0.75rem;
    color: var(--text-light); /* Use variable */
}

.crypto-card-content, .stock-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crypto-price, .stock-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color); /* Use variable */
}

.crypto-change, .stock-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
}

.positive-change {
    color: var(--success-color); /* Use variable */
}

.negative-change {
    color: var(--error-color); /* Use variable */
}

.stock-volume {
    font-size: 0.7rem;
    color: var(--text-light); /* Use variable */
    margin-top: 4px;
}

/* Original Table Styles */
.table-container {
    overflow-x: auto;
    min-height: 100px;
    position: relative;
}

.financial-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.financial-table th {
    background: var(--background-alt); /* Use variable */
    color: var(--text-light); /* Use variable */
    font-weight: 500;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color); /* Use variable */
}

.financial-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color); /* Use variable */
    color: var(--text-light); /* Use variable */
}

.coin-name, .financial-table .stock-symbol /* More specific selector */ {
    font-weight: 600;
    color: var(--text-color); /* Use variable */
    font-size: 0.75rem;
}

.crypto-fullname, .financial-table .crypto-symbol /* More specific selector */ {
    display: block;
    line-height: 1.3;
}

.financial-table .crypto-symbol /* More specific selector */ {
    font-size: 0.65rem;
    color: var(--text-light); /* Use variable */
}

.financial-table .change.positive {
    color: var(--success-color); /* Use variable */
}

.financial-table .change.negative {
    color: var(--error-color); /* Use variable */
}

/* Enhance loading indicator styles */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--primary-color-rgb), 0.1); /* Use variable with opacity */
    border-radius: 50%;
    border-top-color: var(--primary-color); /* Use variable */
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.error-message, .info-message {
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
    text-align: center;
}

.error-message {
    background-color: rgba(var(--error-color-rgb), 0.1); /* Need --error-color-rgb variable */
    border: 1px solid rgba(var(--error-color-rgb), 0.3);
    color: var(--error-color); /* Use variable */
}

.info-message {
    background-color: rgba(var(--primary-color-rgb), 0.1); /* Use variable with opacity */
    border: 1px solid rgba(var(--primary-color-rgb), 0.3);
    color: var(--primary-color); /* Use variable */
}

@media (max-width: 768px) {

    .search-bar {
        flex-grow: 1; /* Allow it to take available space */
        flex-shrink: 1; /* Allow the search bar to shrink if needed */
        min-width: 50px; /* Prevent it from becoming too small */
        /* Consider adjusting width/max-width if still problematic */
    }
}

/* --- Pagination Styles --- */

/* Rule to hide cards initially */
.website-card.hidden-card {
    display: none;
}

/* Style for the actual load more button (#load-more-btn-actual) */
#load-more-btn-actual {
    /* Basic layout properties */
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
    width: 100%; /* Make the button span full width */
    padding: 14px 20px; /* Adjust padding as needed */
    margin: 25px auto 15px auto; /* Top margin, centered, bottom margin */
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: none; /* Remove default border */
}

/* Icon style within the button */
#load-more-btn-actual i {
    margin-left: 10px;
    font-size: 1.2em;
}
#load-more-btn-actual i::before {
     line-height: 1;
     display: inline-block;
     vertical-align: middle;
}

/* Apply the chosen gradient-breath-button style specifically */
#load-more-btn-actual.gradient-breath-button {
    background: linear-gradient(135deg, var(--primary-color, #0d6efd), var(--accent-color, #6f42c1), var(--primary-color, #0d6efd));
    background-size: 200% 200%;
    color: var(--text-color-inverted, white);
    animation: gradientBreath 4s ease infinite;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb, 13, 110, 253), 0.3);
}

#load-more-btn-actual.gradient-breath-button:hover {
    animation-play-state: paused;
    box-shadow: 0 6px 20px rgba(var(--accent-rgb, 111, 66, 193), 0.4);
    transform: scale(1.02);
}

/* Keyframes for the animation (ensure this exists or add it) */
@keyframes gradientBreath {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Dark theme adjustments */
.dark-theme #load-more-btn-actual.gradient-breath-button {
     box-shadow: 0 4px 15px rgba(var(--primary-rgb, 13, 110, 253), 0.5);
}

.dark-theme #load-more-btn-actual.gradient-breath-button:hover {
    box-shadow: 0 6px 20px rgba(var(--accent-rgb, 111, 66, 193), 0.6);
}

/* --- Search Dropdown Styles (Revised with Higher Specificity & Compactness) --- */
.search-bar {
  position: relative; 
}

#search-suggestions-dropdown-container { /* Use ID for higher specificity */
  position: absolute;
  top: 100%; 
  left: 0;
  right: 0;
  background-color: var(--card-bg); 
  border: 1px solid var(--border-color);
  border-top: none;
  z-index: 1000;
  max-height: 350px; /* Slightly reduced max-height */
  overflow-y: auto;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: none; 
}

.dark-theme #search-suggestions-dropdown-container {
  background-color: var(--card-bg); 
  border-color: var(--border-color); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#search-suggestions-dropdown-container .search-suggestions-list { /* Increased specificity */
  list-style: none;
  padding: 0;
  margin: 0;
}

#search-suggestions-dropdown-container .search-suggestion-item { /* Increased specificity */
  padding: 6px 10px; /* FURTHER REDUCED padding for compactness */
  cursor: pointer;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color); 
  transition: background-color 0.2s ease;
}

#search-suggestions-dropdown-container .search-suggestion-item:last-child { /* Increased specificity */
  border-bottom: none;
}

/* Hover effect */
#search-suggestions-dropdown-container .search-suggestion-item:hover, /* Increased specificity */
#search-suggestions-dropdown-container .search-suggestion-item.active { /* Increased specificity */
  background: linear-gradient(to right, #eff6ff, #f5f3ff); /* Tailwind blue-50 to purple-50 */
}

/* Ensure Icon is displayed and colored */
#search-suggestions-dropdown-container .suggestion-icon { /* Increased specificity */
  display: inline-block; /* Ensure display */
  margin-right: 8px; /* Reduced margin */
  color: #ec4899 !important; /* Pink-500 - ADDED !important temporarily for testing */
  font-size: 0.9em; /* Slightly smaller icon */
  flex-shrink: 0;
  vertical-align: middle; /* Align icon vertically */
}

#search-suggestions-dropdown-container .suggestion-content { /* Increased specificity */
  display: flex;
  align-items: center; 
  flex-grow: 1;
  overflow: hidden; 
  line-height: 1.3; /* REDUCED line-height for compactness */
  flex-wrap: nowrap; 
  white-space: nowrap;
}

/* Colors for website suggestions */
#search-suggestions-dropdown-container .category-main { /* Increased specificity */
  color: #dc2626; /* Red-600 */
  font-weight: 500; 
}
#search-suggestions-dropdown-container .category-sub { /* Increased specificity */
  color: #f97316; /* Orange-500 */
  font-weight: 500;
}
#search-suggestions-dropdown-container .website-name { /* Increased specificity */
  color: #2563eb; /* Blue-600 */
  font-weight: 600; 
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure Separator is displayed and colored */
#search-suggestions-dropdown-container .separator-icon { /* Increased specificity */
  display: inline-block; /* Ensure display */
  font-size: 0.6em; /* FURTHER REDUCED size */
  margin: 0 4px; /* Reduced margin */
  color: #9ca3af !important; /* Gray-400 - ADDED !important temporarily for testing */
  flex-shrink: 0;
   vertical-align: middle; /* Align icon vertically */
}

/* Dark theme overrides */
.dark-theme #search-suggestions-dropdown-container .search-suggestion-item:hover,
.dark-theme #search-suggestions-dropdown-container .search-suggestion-item.active {
  background: linear-gradient(to right, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1)); 
}
.dark-theme #search-suggestions-dropdown-container .separator-icon {
  color: #6b7280 !important; /* Gray-500 for dark mode - ADDED !important */
}
/* No specific dark theme needed for icon/category colors as they are explicit */

/* --- END Search Dropdown Styles --- */