/* Docs Page Specific Styles */
/* Gradient background moved to style_shared.css for reuse */

/* Base Font Family - Updated to Inter */

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

/* ===== DOCS SIDEBAR NAVIGATION STYLES - ISOLATED ===== */

/* Desktop Sidebar Navigation Styles */
.docs-sidebar-nav {
  position: sticky;
  top: 2rem;
  /* Adjust based on navbar height */
  /* height: calc(100vh - 4rem ); */
  height: calc(100vh - 4rem);
  /* Adjust for padding/margin */
  overflow-y: auto;
  padding-right: 1rem;
  padding-top: 1rem;
  /* Add some top padding for content */
  /* -ms-overflow-style: none; */
  /* Hide scrollbar for IE and Edge */
  /* scrollbar-width: none; */
  /* Hide scrollbar for Firefox */
}

/* Hide desktop sidebar on mobile and tablet */
@media (max-width: 1023.98px) {
  .docs-sidebar-nav {
    display: none !important;
  }
}

/* Desktop sidebar scrollbar hiding */
/* .docs-sidebar-nav::-webkit-scrollbar { */
/* Hide scrollbar for Chrome, Safari and Opera */
/* display: none;
} */

.docs-sidebar-nav ul {
  list-style: none;
  padding: 0;
}

/* Styling for all links and collapsible headers in the docs sidebar */
.docs-sidebar-nav a,
.docs-sidebar-nav .docs-collapsible-header {
  display: block;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  line-height: 1.5;
  margin-bottom: 0.15rem;
  /* Slight spacing between items */
  padding: 0.5rem 0.75rem;
  /* Default padding */
  color: #4b5563;
  /* Default text color */
  font-weight: 400;
  /* Default font weight for all links */
  font-size: 0.9rem;
  /* Adjusted base font size for better visibility */
}

/* Specific font sizes and weights for different levels */
.docs-sidebar-nav .docs-collapsible-header {
  cursor: pointer;
  display: flex;
  /* For toggle icon alignment */
  justify-content: space-between;
  align-items: center;
  padding-top: 0.6rem;
  /* Slightly more padding for top-level headers */
  padding-bottom: 0.6rem;
  font-size: 0.95rem;
  /* Default for collapsible headers */
}

/* Level-specific font sizes for docs sidebar links and collapsible headers */
.docs-sidebar-nav .docs-level-1 {
  font-size: 1rem;
  /* H1 in TOC */
  font-weight: 600;
}

.docs-sidebar-nav .docs-level-2 {
  font-size: 0.95rem;
  /* H2 in TOC */
  font-weight: 500;
}

.docs-sidebar-nav .docs-level-3 {
  font-size: 0.9rem;
  /* H3 in TOC */
  font-weight: 400;
}

.docs-sidebar-nav .docs-level-4 {
  font-size: 0.85rem;
  /* H4 in TOC */
  font-weight: 400;
}

.docs-sidebar-nav .docs-level-5 {
  font-size: 0.8rem;
  /* H5 in TOC */
  font-weight: 400;
}

.docs-sidebar-nav .docs-level-6 {
  font-size: 0.75rem;
  /* H6 in TOC */
  font-weight: 400;
}

/* Hover effects for docs sidebar */
.docs-sidebar-nav a:hover,
.docs-sidebar-nav .docs-collapsible-header:hover {
  background-color: #f1f5f9;
  /* gray-100 */
  color: #1a202c;
  /* gray-900 */
}

/* Active link styling for docs sidebar (current page/section) */
.docs-sidebar-nav a.docs-active {
  border-left: 3px solid var(--primary-color);
  padding-left: calc(0.75rem - 3px);
  font-weight: 600 !important;
  /* Make active link bold */
  color: var(--primary-color) !important;
  /* Ensure active link text is blue */
  background-color: transparent;
  /* No background for active link */
}

/* Parent active header styling for docs sidebar (when a child is active) */
.docs-sidebar-nav .docs-collapsible-header.docs-parent-active {
  color: var(--primary-color);
  /* Indigo text for parent active */
  font-weight: 500;
  /* Slightly bolder for parent active header */
  border-left: none;
  /* No left border for parent active */
  padding-left: 0.75rem;
  /* Reset padding if it was adjusted */
  background-color: transparent;
  /* No background for parent active */
}

/* Toggle icon for docs sidebar collapsible headers */
.docs-sidebar-nav .docs-collapsible-header .docs-toggle-icon {
  transition: transform 0.2s ease;
  font-size: 0.75rem;
  /* Smaller icon */
  color: #9ca3af;
  /* Light gray icon */
  flex-shrink: 0;
  /* Prevent icon from shrinking */
  margin-left: 0.5rem;
  /* Space between text and icon */
}

/* Collapsible content for docs sidebar */
.docs-sidebar-nav .docs-collapsible-content {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  max-height: 0;
  /* Hidden by default */
}

.docs-sidebar-nav .docs-collapsible-content.docs-open {
  max-height: 1000px;
  /* Sufficiently large value to show all content */
}

/* Indentation for nested lists in docs sidebar - Unified and proportional */
.docs-sidebar-nav ul {
  padding-left: 1.25rem;
  /* Indent for first level nested list */
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
}

.docs-sidebar-nav ul ul {
  padding-left: 1.25rem;
  /* Indent for second level nested list */
}

/* ===== MOBILE SIDEBAR STYLES - ISOLATED ===== */

/* Mobile Sidebar Overlay */
.docs-mobile-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-sidebar-overlay);
  display: none;
}

/* Mobile Sidebar */
.docs-mobile-sidebar {
  position: fixed;
  top: calc(var(--navbar-height) + env(safe-area-inset-top));
  /* Updated: Hardcoded navbar height */
  height: calc(100% - var(--navbar-height) - env(safe-area-inset-top));
  /* Updated: Calculated height */
  left: -280px;
  /* Start off-screen */
  width: 280px;
  background-color: #ffffff;
  padding: 1rem;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out, left 0.3s ease-in-out;
  /* Added left to transition */
  z-index: var(--z-index-mobile-sidebar);
  /* Use shared z-index */
  overflow-y: auto;
  /* Enable scrolling within the sidebar */
  border-right: 1px solid #e2e8f0;
  /* Subtle border */
}

.docs-mobile-sidebar.docs-open {
  left: 0;
}

/* Mobile Sidebar Close Button */
.docs-mobile-sidebar-close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.docs-mobile-sidebar-close:hover {
  color: #1a202c;
  background-color: #f1f5f9;
}

/* Mobile Sidebar Navigation Specific Styling */
.docs-mobile-sidebar nav ul {
  list-style: none;
  padding: 0;
}

.docs-mobile-sidebar nav a,
.docs-mobile-sidebar nav .docs-collapsible-header {
  display: block;
  border-radius: 0.25rem;
  color: #4b5563;
  transition: all 0.2s ease;
  line-height: 1.5;
  margin-bottom: 0.15rem;
  padding: 0.5rem 0.75rem;
  font-weight: 400;
  font-size: 0.9rem;
}

.docs-mobile-sidebar nav .docs-collapsible-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  font-size: 0.95rem;
}

/* Level-specific Font Sizes for Mobile Docs Sidebar */
.docs-mobile-sidebar nav .docs-level-1 {
  font-size: 1rem;
  font-weight: 600;
  padding-left: 0.75rem;
  /* Base padding for level 1 */
}

.docs-mobile-sidebar nav .docs-level-2 {
  font-size: 0.95rem;
  font-weight: 500;
  padding-left: 1.5rem;
  /* Indentation for level 2 */
}

.docs-mobile-sidebar nav .docs-level-3 {
  font-size: 0.9rem;
  font-weight: 400;
  padding-left: 2.25rem;
  /* Indentation for level 3 */
}

.docs-mobile-sidebar nav .docs-level-4 {
  font-size: 0.85rem;
  font-weight: 400;
  padding-left: 3rem;
  /* Indentation for level 4 */
}

.docs-mobile-sidebar nav .docs-level-5 {
  font-size: 0.8rem;
  font-weight: 400;
  padding-left: 3.75rem;
  /* Indentation for level 5 */
}

.docs-mobile-sidebar nav .docs-level-6 {
  font-size: 0.75rem;
  font-weight: 400;
  padding-left: 4.5rem;
  /* Indentation for level 6 */
}

.docs-mobile-sidebar nav a:hover,
.docs-mobile-sidebar nav .docs-collapsible-header:hover {
  background-color: #f1f5f9;
  color: #1a202c;
}

/* Active Link Styling for Mobile Docs Sidebar */
.docs-mobile-sidebar nav a.docs-active {
  background-color: transparent;
  color: var(--primary-color);
  font-weight: 600 !important;
  border-left: 3px solid var(--primary-color);
}

.docs-mobile-sidebar nav .docs-level-1.docs-active {
  padding-left: calc(0.75rem - 3px);
}

.docs-mobile-sidebar nav .docs-level-2.docs-active {
  padding-left: calc(1.5rem - 3px);
}

.docs-mobile-sidebar nav .docs-level-3.docs-active {
  padding-left: calc(2.25rem - 3px);
}

.docs-mobile-sidebar nav .docs-level-4.docs-active {
  padding-left: calc(3rem - 3px);
}

.docs-mobile-sidebar nav .docs-level-5.docs-active {
  padding-left: calc(3.75rem - 3px);
}

.docs-mobile-sidebar nav .docs-level-6.docs-active {
  padding-left: calc(4.5rem - 3px);
}

/* Parent Active Header Styling for Mobile Docs Sidebar */
.docs-mobile-sidebar nav .docs-collapsible-header.docs-parent-active {
  color: var(--primary-color);
  font-weight: 500;
  border-left: none;
  /* Remove left border for parent active to match desktop */
  padding-left: calc(0.75rem - 3px);
  /* Match desktop's base padding for headers */
  background-color: transparent;
}

.docs-mobile-sidebar nav .docs-collapsible-header .docs-toggle-icon {
  transition: transform 0.2s ease;
  font-size: 0.75rem;
  color: #9ca3af;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.docs-mobile-sidebar nav .docs-collapsible-content {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  max-height: 0;
}

.docs-mobile-sidebar nav .docs-collapsible-content.docs-open {
  max-height: 1000px;
}

/* ===== DOCS SIDEBAR TOGGLE BUTTON STYLES ===== */

/* Docs sidebar toggle button icon state */
#mobile-sidebar-toggle .fa-book-open {
  transition: transform 0.3s ease-in-out;
}

#mobile-sidebar-toggle.is-active .fa-book-open {
  transform: rotate(180deg);
}

/* ===== DOCS PAGE RESPONSIVE LAYOUT ===== */

/* Fixed main navigation bar for docs page - Enhanced responsive design */
/* Small tablets - 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Hide desktop sidebar and show mobile toggle */
  body.docs-page .docs-sidebar-nav {
    display: none !important;
  }

  body.docs-page #mobile-sidebar-toggle {
    display: inline-flex !important;
  }

  /* Ensure navbar is fixed for docs page in this range */
  body.docs-page #navbar-placeholder nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    background-color: white;
    box-shadow: var(--shadow-base);
  }

  /* Add fixed navbar padding for this breakpoint */
  body.docs-page {
    padding-top: calc(var(--navbar-height) + env(safe-area-inset-top));
  }

  /* Ensure content takes full width */
  body.docs-page .docs-content {
    width: 100% !important;
    padding: 1.5rem !important;
  }

  /* Optimize navigation container for medium screens */
  body.docs-page nav .container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Compact navigation items */
  body.docs-page .desktop-nav .nav-item {
    margin: 0 0.5rem;
  }

  body.docs-page .nav-button {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
}

/* Large screens - 1024px and above */
@media (min-width: 1024px) {
  /* Only apply to docs page - target the main nav within navbar-placeholder */
  body.docs-page #navbar-placeholder nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    background-color: white;
    box-shadow: var(--shadow-base);
  }

  /* Full navigation spacing for large screens */
  body.docs-page nav .container {
    max-width: 1200px;
  }

  body.docs-page .desktop-nav .nav-item {
    margin: 0 1rem;
  }

  body.docs-page .nav-button {
    padding: 10px 16px;
    font-size: 1rem;
  }

  /* Add fixed navbar padding for docs page */
  body.docs-page {
    padding-top: calc(var(--navbar-height) + env(safe-area-inset-top));
  }

  /* Adjust sidebar position for fixed navbar on docs page */
  body.docs-page .docs-sidebar-nav {
    top: calc(var(--navbar-height) + env(safe-area-inset-top) + 2rem) !important;
    height: calc(100vh - var(--navbar-height) - env(safe-area-inset-top) - 4rem) !important;
  }

  /* Keep original rule for other cases */
  .navbar-fixed .docs-sidebar-nav {
    top: calc(var(--navbar-height) + 2rem);
    height: calc(100vh - var(--navbar-height) - 4rem);
  }
}

/* Mobile Specific Adjustments for Docs Page */
@media (max-width: 767px) {
  .md\:flex-row {
    flex-direction: column;
  }

  .md\:w-\[30\%\],
  .md\:w-\[70\%\],
  .lg\:w-1\/5,
  .lg\:w-4\/5 {
    width: 100%;
  }

  /* Hide desktop sidebar on mobile */
  .docs-sidebar-nav {
    display: none;
  }

  .docs-content {
    padding: 1.5rem;
  }

  .docs-content h1 {
    font-size: 1.875rem;
    margin-bottom: 1rem;
  }

  .docs-content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }

  .docs-content h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .docs-content ol {
    font-size: 0.95rem;
  }

  /* Show docs sidebar toggle button on docs mobile view */
  body.docs-page #mobile-sidebar-toggle {
    display: inline-flex !important;
    /* Ensure it's always visible on docs mobile view */
  }
}

/* Show mobile sidebar toggle when desktop sidebar is hidden (tablet and mobile) */
@media (max-width: 1023.98px) {
  body.docs-page #mobile-sidebar-toggle {
    display: inline-flex !important;
  }

  body.docs-page .docs-sidebar-nav {
    display: none !important;
  }
}

/* 强制隐藏 docs 侧边栏在所有小屏幕下 */
@media (max-width: 1023.98px) {
  .docs-sidebar-nav {
    display: none !important;
  }

  body.docs-page .docs-sidebar-nav {
    display: none !important;
  }
}

/* 确保 docs 页面的 open-book 按钮在所有断点下都显示 */
@media (max-width: 1023.98px) {
  body.docs-page .docs-only#mobile-sidebar-toggle {
    display: inline-flex !important;
  }
}

/* Hide mobile sidebar toggle on desktop */
@media (min-width: 1024px) {
  .mobile-sidebar-toggle {
    display: none !important;
  }
}

/* Custom Widths for Desktop Sidebar and Main Content */
@media (min-width: 1024px) {
  .lg\:w-1\/5 {
    width: 20%;
  }

  .lg\:w-4\/5 {
    width: 80%;
  }
}

/* Adjust for Larger Screens */
@media (min-width: 1280px) {
  .lg\:w-1\/5 {
    width: 22%;
  }

  .lg\:w-4\/5 {
    width: 78%;
  }
}

@media (min-width: 1536px) {
  .lg\:w-1\/5 {
    width: 25%;
  }

  .lg\:w-4\/5 {
    width: 75%;
  }
}

/* ===== DOCS CONTENT STYLES ===== */

/* Main Content Styling */
.docs-content h1[id],
.docs-content h2[id],
.docs-content h3[id],
.docs-content h4[id],
.docs-content h5[id],
.docs-content h6[id] {
  /* Ensure anchored jumps don't hide behind fixed navbar */
  scroll-margin-top: 80px;
}

.docs-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #1a202c;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.docs-content h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #1a202c;
}

.docs-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #1a202c;
}

.docs-content h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #1a202c;
}

.docs-content p {
  line-height: 1.75;
  margin-bottom: 1rem;
  color: #374151;
}

.docs-content ul,
.docs-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.docs-content ul li {
  list-style-type: disc;
  margin-bottom: 0.5rem;
  color: #374151;
}

.docs-content ol li {
  list-style-type: decimal;
  margin-bottom: 0.5rem;
  color: #374151;
}

.docs-content a {
  color: var(--primary-color);
  text-decoration: underline;
}

.docs-content a:hover {
  color: var(--primary-hover);
}

/* ===== DOCS GO TO TOP BUTTON ===== */

@media (min-width: 1024px) {
  .docs-sidebar-nav {
    display: block !important;
    max-width: 300px;
    min-width: 220px;
    width: 100%;
    flex-shrink: 0;
  }

  .docs-content {
    flex: 1 1 0%;
    min-width: 0;
  }

  .lg\:flex {
    display: flex;
  }
}

/* Consolidated rules for screens below 1024px */
@media (max-width: 1023.98px) {
  /* 1. 强制隐藏桌面端侧边栏 */
  .docs-sidebar-nav {
    display: none !important;
  }

  /* 2. 确保主内容区域的父容器是块级布局，而不是 flex */
  .max-w-7xl.lg\:flex {
    display: block !important;
  }

  /* 3. 确保主内容区域占据全部宽度 */
  .docs-content {
    width: 100% !important;
    flex: none !important;
    padding: 1.5rem !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  /* 5. 确保移动端侧边栏的触发按钮是可见的 */
  body.docs-page #mobile-sidebar-toggle {
    display: inline-flex !important;
  }
}

/* 分页导航样式 */
.docs-nav-btn {
  @apply flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-indigo-600 hover:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200;
}

.docs-nav-btn:disabled {
  @apply opacity-50 cursor-not-allowed hover:bg-white hover:text-gray-700 hover:border-gray-300;
}

.docs-nav-btn-prev {
  @apply pr-3;
}

.docs-nav-btn-next {
  @apply pl-3;
}

.docs-nav-btn-text {
  @apply font-medium;
}

/* 面包屑导航样式 */
.docs-breadcrumb ol {
  @apply flex items-center space-x-2 text-sm text-gray-500;
}

.docs-breadcrumb a {
  @apply hover:text-indigo-600 transition-colors duration-200;
}

.docs-breadcrumb .fa-chevron-right {
  @apply text-gray-300;
}

/* 进度条样式 */
.docs-progress .bg-indigo-600 {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
}

/* 章节内容样式 */
.docs-chapter-content {
  @apply min-h-[400px];
}

/* 响应式调整 */
@media (max-width: 768px) {
  .docs-pagination {
    @apply flex-col space-y-4;
  }

  .docs-nav-btn {
    @apply w-full justify-center;
  }

  .docs-chapter-info {
    @apply order-first mb-2;
  }
}

/* 深色模式支持 */
.dark .docs-nav-btn {
  @apply bg-gray-800 border-gray-600 text-gray-200 hover:bg-gray-700 hover:text-indigo-400 hover:border-indigo-500;
}

.dark .docs-breadcrumb {
  @apply text-gray-400;
}

.dark .docs-breadcrumb a {
  @apply hover:text-indigo-400;
}

.dark .docs-progress .bg-gray-200 {
  @apply bg-gray-700;
}

.dark .docs-chapter-info {
  @apply text-gray-400;
}

/* 分页导航样式 */
.docs-nav-btn {
  @apply flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-indigo-600 hover:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200;
}

.docs-nav-btn:disabled {
  @apply opacity-50 cursor-not-allowed hover:bg-white hover:text-gray-700 hover:border-gray-300;
}

.docs-nav-btn-prev {
  @apply pr-3;
}

.docs-nav-btn-next {
  @apply pl-3;
}

.docs-nav-btn-text {
  @apply font-medium;
}

/* 面包屑导航样式 */
.docs-breadcrumb ol {
  @apply flex items-center space-x-2 text-sm text-gray-500;
}

.docs-breadcrumb a {
  @apply hover:text-indigo-600 transition-colors duration-200;
}

.docs-breadcrumb .fa-chevron-right {
  @apply text-gray-300;
}

/* 进度条样式 */
.docs-progress .bg-indigo-600 {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
}

/* 章节内容样式 */
.docs-chapter-content {
  @apply min-h-[400px];
}

/* 响应式调整 */
@media (max-width: 768px) {
  .docs-pagination {
    @apply flex-col space-y-4;
  }

  .docs-nav-btn {
    @apply w-full justify-center;
  }

  .docs-chapter-info {
    @apply order-first mb-2;
  }
}

/* 深色模式支持 */
.dark .docs-nav-btn {
  @apply bg-gray-800 border-gray-600 text-gray-200 hover:bg-gray-700 hover:text-indigo-400 hover:border-indigo-500;
}

.dark .docs-breadcrumb {
  @apply text-gray-400;
}

.dark .docs-breadcrumb a {
  @apply hover:text-indigo-400;
}

.dark .docs-progress .bg-gray-200 {
  @apply bg-gray-700;
}

.dark .docs-chapter-info {
  @apply text-gray-400;
}
/* ===== 统一且正确的箭头方向控制 ===== */

/* 为箭头图标添加平滑过渡效果 (同时作用于桌面和移动端) */
.docs-sidebar-nav .docs-toggle-icon,
.docs-mobile-sidebar nav .docs-toggle-icon {
  transition: transform 0.3s ease;
  display: inline-block; /* 确保 transform 生效 */
}

/* 当标题是展开状态时 (没有 .docs-collapsed 类)，箭头朝上 */
.docs-sidebar-nav
  .docs-collapsible-header:not(.docs-collapsed)
  .docs-toggle-icon,
.docs-mobile-sidebar
  nav
  .docs-collapsible-header:not(.docs-collapsed)
  .docs-toggle-icon {
  transform: rotate(-180deg);
}

/* 当标题是折叠状态时 (.docs-collapsed 类存在)，箭头恢复原始方向，朝下 */
.docs-sidebar-nav .docs-collapsible-header.docs-collapsed .docs-toggle-icon,
.docs-mobile-sidebar
  nav
  .docs-collapsible-header.docs-collapsed
  .docs-toggle-icon {
  transform: rotate(0deg);
}

/* css/style_docs.css */

/* ===== 箭头图标按钮化，提升用户体验 ===== */

/* 1. 扩大点击区域和尺寸 */
.docs-sidebar-nav .docs-toggle-icon,
.docs-mobile-sidebar nav .docs-toggle-icon {
  /* 使用 Flexbox 确保图标在扩大的容器内完美居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 定义一个更大的、固定的尺寸，方便点击 */
  width: 1.75rem; /* 约 28px */
  height: 1.75rem; /* 约 28px */

  /* 将容器变为圆形 */
  border-radius: 50%;

  /* 微调图标本身的大小 */
  font-size: 0.8rem;

  /* 保持与文字的间距 */
  margin-left: 0.5rem;

  /* 为所有变化的属性添加平滑过渡效果 */
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s ease;
}

/* 2. 添加悬停时的视觉反馈 (背景和颜色变化) */
.docs-sidebar-nav .docs-toggle-icon:hover,
.docs-mobile-sidebar nav .docs-toggle-icon:hover {
  background-color: #818fa0; /* 浅灰色背景 (Tailwind gray-100) */
  color: #41464e; /* 稍深的图标颜色 (Tailwind gray-600) */
}

/* 3. 确保旧的旋转逻辑依然生效 (无需修改，仅作确认) */
/* 展开时，箭头朝上 */
.docs-sidebar-nav
  .docs-collapsible-header:not(.docs-collapsed)
  .docs-toggle-icon,
.docs-mobile-sidebar
  nav
  .docs-collapsible-header:not(.docs-collapsed)
  .docs-toggle-icon {
  transform: rotate(-180deg);
}
/* 折叠时，箭头朝下 */
.docs-sidebar-nav .docs-collapsible-header.docs-collapsed .docs-toggle-icon,
.docs-mobile-sidebar
  nav
  .docs-collapsible-header.docs-collapsed
  .docs-toggle-icon {
  transform: rotate(0deg);
}

/* 适用于 Firefox */
.docs-sidebar-nav,
.docs-mobile-sidebar {
  scrollbar-width: thin; /* 设置滚动条为纤细样式 */
  scrollbar-color: #a0aec0 #f1f5f9; /* 设置滑块和轨道的颜色 */
}

/* 适用于 Chrome, Safari, Edge 等 WebKit 内核浏览器 */
.docs-sidebar-nav::-webkit-scrollbar,
.docs-mobile-sidebar::-webkit-scrollbar {
  width: 8px; /* 滚动条的宽度 */
}

.docs-sidebar-nav::-webkit-scrollbar-track,
.docs-mobile-sidebar::-webkit-scrollbar-track {
  background: #f1f5f9; /* 轨道的背景色 (浅灰) */
  border-radius: 4px;
}

.docs-sidebar-nav::-webkit-scrollbar-thumb,
.docs-mobile-sidebar::-webkit-scrollbar-thumb {
  background-color: #a0aec0; /* 滑块的颜色 (中灰) */
  border-radius: 4px;
  border: 2px solid #f1f5f9; /* 创建一个类似 padding 的效果，让滑块看起来更细 */
}

.docs-sidebar-nav::-webkit-scrollbar-thumb:hover,
.docs-mobile-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #718096; /* 鼠标悬停时滑块的颜色 (深灰) */
}

/* --- Dark Mode Scrollbar Styles --- */
html.dark .docs-sidebar-nav,
html.dark .docs-mobile-sidebar {
  scrollbar-color: #4b5563 #1f2937; /* 深色模式下的滑块和轨道颜色 */
}

html.dark .docs-sidebar-nav::-webkit-scrollbar-track,
html.dark .docs-mobile-sidebar::-webkit-scrollbar-track {
  background: #1f2937; /* 深色模式轨道背景 */
}

html.dark .docs-sidebar-nav::-webkit-scrollbar-thumb,
html.dark .docs-mobile-sidebar::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* 深色模式滑块颜色 */
  border-color: #1f2937; /* 匹配深色轨道背景 */
}

html.dark .docs-sidebar-nav::-webkit-scrollbar-thumb:hover,
html.dark .docs-mobile-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280; /* 深色模式悬停颜色 */
}
/* ===== Search Modal Enhancements (Focus Glow & Shortcut Keys) ===== */

/* 1. 容器过渡效果 */
#search-modal .search-input-wrapper {
  /* 移除默认的边框，我们将用 box-shadow 模拟 */
  border: none;
  /* 增加一个透明的轮廓来占据辉光所需的空间，防止布局抖动 */
  outline: 3px solid transparent;
  border-radius: 9px; /* 略大于内部输入框的圆角 */
  transition: outline-color 0.2s ease-in-out;
}

/* 2. 聚焦时显示紫色辉光效果 */
#search-modal .search-input-wrapper:focus-within {
  /* 使用 outline 来创建辉光，性能比 box-shadow 更好 */
  outline-color: rgba(167, 139, 250, 0.7); /* A semi-transparent purple */
}

/* 3. 输入框本身的样式调整 */
#search-modal #search-input {
  /* 确保输入框在聚焦时没有自己的轮廓，由父级接管 */
  outline: none;
  border: 1px solid #d1d5db; /* gray-300 */
}

#search-modal .search-input-wrapper:focus-within #search-input {
  border-color: #a78bfa; /* violet-300, 匹配辉光颜色 */
}

/* 4. 键盘按键 <kbd> 样式 */
#search-modal kbd {
  display: inline-block;
  padding: 3px 6px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-weight: 600;
  line-height: 1;
  color: #4b5563; /* gray-600 */
  background-color: #f3f4f6; /* gray-100 */
  border: 1px solid #d1d5db; /* gray-300 */
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* Dark Mode for KBD */
html.dark #search-modal kbd {
  color: #d1d5db; /* gray-300 */
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
}

.interactive-container .highlighted {
  stroke: #f59e0b !important;
  /* 琥珀色，!important 确保覆盖 RDKit 的默认样式 */
  stroke-width: 3px !important;
}
/* ✨ 新增: 指纹位高亮样式 ✨ */
.interactive-container .highlighted-bit {
  stroke: #f59e0b !important;
  stroke-width: 2px !important;
}

/* ✨ 新增: 提示框样式 ✨ */
.viz-tooltip {
  position: absolute;
  text-align: center;
  width: auto;
  height: auto;
  padding: 5px 10px;
  font: 12px sans-serif;
  background: #333;
  color: #fff;
  border: 0px;
  border-radius: 8px;
  pointer-events: none; /* 让鼠标事件穿透提示框 */
  z-index: 10;
}

#scaffold-viz-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.molecular-card {
  border: 2px solid #e5e7eb; /* 边框颜色 */
  border-radius: 8px;
  padding: 0.5rem;
  background-color: #f9fafb;
  transition: all 0.3s ease; /* 平滑过渡效果 */
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.molecular-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* ✨ 新增: 高亮和变暗效果的样式 ✨ */
.molecular-card.highlight-scaffold {
  border-color: #4f46e5; /* 靛蓝色 */
  transform: scale(1.05); /* 轻微放大 */
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

.molecular-card.dimmed {
  opacity: 0.2;
  filter: grayscale(80%);
}
/* 在 style_docs.css 文件末尾添加 */

/* 半径选择器样式 */
.radius-selector {
  margin-bottom: 0.5rem;
  font-family: sans-serif;
  font-size: 0.9rem;
  color: #374151;
}
.radius-selector label {
  margin-right: 1rem;
  cursor: pointer;
}

/* ✨ 为点击锁定的高亮效果添加新样式 ✨ */
.clicked-highlight-bit {
  fill: #f59e0b !important; /* 橙色，比悬停更突出 */
  stroke: #b45309 !important;
  stroke-width: 2px !important;
}

.clicked-highlight-atom {
  stroke: #f59e0b !important;
  stroke-width: 4px !important;
}
/* 在 style_docs.css 文件末尾添加 */

/* --- 高级骨架可视化样式 --- */

/* 使 SVG 在卡片内正确填充 */
.molecular-card svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ✨ 骨架原子的高亮样式 ✨ */
.molecular-card .scaffold-highlight {
  stroke: #db2777 !important; /* 醒目的粉红色 */
  stroke-width: 4px !important;
  stroke-opacity: 0.8;
}
/* 在 style_docs.css 或 dark-mode.css 文件末尾添加 */

/* --- 可视化标题和标签的深色模式样式 --- */

/* 1. 为 SVG 内的标题设置默认颜色 (浅色模式) */
.viz-title {
  fill: #1f2937; /* Tailwind gray-800 */
}

/* 2. 为 HTML 中的标签设置默认颜色 (浅色模式) */
.viz-label {
  color: #374151; /* Tailwind gray-700 */
}
.radius-selector label {
  color: #374151; /* 确保 radio 按钮的标签也变色 */
}

/* 3. 定义深色模式下的颜色 */
html.dark .viz-title {
  fill: #d1d5db; /* Tailwind gray-300, 适用于 SVG 内的 <text> */
}

html.dark .viz-label {
  color: #d1d5db; /* Tailwind gray-300, 适用于 HTML 内的 <span> */
}

html.dark .radius-selector label {
  color: #d1d5db; /* 确保 radio 按钮的标签在深色模式下也可见 */
}
/* 在 style_docs.css 文件末尾添加 */

/* --- 修正 Plotly 容器高度问题 --- */

#chemical-space-viz {
  min-height: 600px; /* 设置一个合适的最小高度，例如 600 像素 */
  width: 100%;
}
#chemical-space-viz,
#mw-distribution-viz {
  min-height: 500px; /* 设置一个合适的最小高度，例如 500px */
  width: 100%;
}
/* 在 style_docs.css 末尾添加 */

/* --- GNN 交互式介绍模块样式 --- */
#gnn-intro-viz .viz-title {
  font-size: 14px;
  font-weight: 600;
  text-anchor: middle;
}

/* 默认样式 */
#gnn-intro-viz .atom,
#gnn-intro-viz .graph-node {
  transition: all 0.2s ease;
}

#gnn-intro-viz .adjacency-cell {
  transition: all 0.2s ease;
}

/* 交互高亮样式 */
/* #gnn-intro-viz .highlighted-atom,
#gnn-intro-viz .highlighted-node {
  stroke: #f59e0b !important;
  stroke-width: 4px !important;
} */
/* ✨ 新增/更新为这些规则 ✨ */
#gnn-intro-viz .highlighted-atom {
  stroke: #f59e0b !important;
  stroke-width: 4px !important; /* 分子图的高亮可以保持不变，因为它不会引起晃动 */
}

#gnn-intro-viz .graph-node-fg,
#gnn-intro-viz .graph-link-fg,
#gnn-intro-viz .graph-node-bg,
#gnn-intro-viz .graph-link-bg {
  transition: all 0.2s ease;
}

/* 暗淡效果 */
#gnn-intro-viz .dimmed {
  opacity: 0.2;
}

/* 单元格高亮 */
#gnn-intro-viz .highlighted-cell {
  fill: #f59e0b !important;
  stroke: #b45309;
  stroke-width: 1px;
}
#gnn-intro-viz .highlighted-cell {
  fill: #f59e0b !important;
  stroke: #b45309;
  stroke-width: 1px;
}
#gnn-intro-viz .graph-node-label {
  transition: opacity 0.2s ease;
}
html.dark #gnn-intro-viz .graph-node-label {
  fill: #d1d5db; /* gray-300 */
}

/* 鼠标悬停时的暗淡效果 */
#gnn-intro-viz .dimmed {
  opacity: 0.2;
}
/* ✨ 新增: 矩阵坐标轴标签样式 ✨ */
#gnn-intro-viz .matrix-axis-label {
  font-size: 10px;
  font-family: sans-serif;
  fill: #6b7280; /* gray-500 */
}
/* 在 style_docs.css 末尾添加 */

/* --- 迁移学习交互式介绍模块样式 --- */
#transfer-learning-viz .tl-block {
  stroke: #9ca3af;
  stroke-width: 1px;
  transition: all 0.5s ease;
}
#transfer-learning-viz .tl-head {
  stroke: #8b5cf6; /* 紫色 */
  stroke-width: 2px;
}
#transfer-learning-viz .tl-block.frozen {
  fill: #e5e7eb; /* 浅灰色 */
}
#transfer-learning-viz .tl-block.trainable-low-lr {
  fill: #93c5fd; /* 浅蓝色 */
}
#transfer-learning-viz .tl-block.trainable-high-lr {
  fill: #3b82f6; /* 深蓝色 */
}
#transfer-learning-viz .tl-label,
#transfer-learning-viz .tl-desc-text {
  font-family: sans-serif;
  fill: #374151;
}
html.dark #transfer-learning-viz .tl-label,
html.dark #transfer-learning-viz .tl-desc-text {
  fill: #d1d5db;
}
#transfer-learning-viz .tl-controls button {
  margin: 0 5px;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #4f46e5;
  color: white;
  border: none;
  cursor: pointer;
}
#transfer-learning-viz .tl-controls button:disabled {
  background-color: #a5b4fc;
  cursor: not-allowed;
}

/* 脉冲动画，用于表示训练 */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
  }
  70% {
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}
.pulse-animation {
  animation: pulse 2s infinite;
}
/* --- GNN 特征可视化模块样式 --- */
#gnn-features-viz {
  display: flex;
  overflow: hidden;
  background: #fff;
}
html.dark #gnn-features-viz {
  background: #1f2937;
}

.feat-viz-panel {
  width: 50%;
  padding: 20px;
  overflow-y: auto;
}
.feat-viz-left {
  border-right: 1px solid #e5e7eb;
}
html.dark .feat-viz-left {
  border-right-color: #374151;
}

/* 右侧特征阵列样式 */
.feat-section {
  margin-bottom: 25px;
}
.feat-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #374151;
}
html.dark .feat-title {
  color: #d1d5db;
}

.feat-array-container {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #4b5563;
}
html.dark .feat-array-container {
  color: #9ca3af;
}

.feat-row {
  padding: 2px 5px;
  border-radius: 4px;
  transition: background 0.2s;
  cursor: default;
}
/* 高亮行的背景色 */
.feat-row.highlighted {
  background-color: #fef3c7;
  color: #000;
}
html.dark .feat-row.highlighted {
  background-color: #78350f;
  color: #fff;
}

/* 向量中的数字 */
.feat-num {
  display: inline-block;
  width: 20px;
  text-align: center;
  position: relative; /* 用于定位 tooltip */
  cursor: help;
}
.feat-num.one {
  color: #d97706;
  font-weight: bold;
} /* 数字 1 的颜色 */
.feat-num.zero {
  color: #d1d5db;
} /* 数字 0 的颜色 */
html.dark .feat-num.one {
  color: #fbbf24;
}
html.dark .feat-num.zero {
  color: #4b5563;
}

/* 左侧图样式 */
.gnn-node {
  stroke: #4b5563;
  stroke-width: 2px;
  fill: #fff;
  transition: all 0.2s;
  cursor: pointer;
}
.gnn-link {
  stroke: #9ca3af;
  stroke-width: 3px;
  transition: all 0.2s;
  cursor: pointer;
}
.gnn-node-label {
  font-family: sans-serif;
  font-size: 12px;
  fill: #1f2937;
  pointer-events: none;
  font-weight: bold;
}

/* 高亮样式 */
.gnn-node.highlighted {
  fill: #fcd34d !important;
  stroke: #b45309 !important;
  transform: scale(1.2);
}
.gnn-link.highlighted {
  stroke: #f59e0b !important;
  stroke-width: 6px !important;
}
.dimmed {
  opacity: 0.2;
}

/* 自定义 Tooltip */
.feat-tooltip {
  visibility: hidden;
  background-color: #1f2937;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 10;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-family: sans-serif;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.feat-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}
.feat-num:hover .feat-tooltip {
  visibility: visible;
}
/* In style_docs.css, update the Bayes Opt Viz styles */

#bayes-opt-viz {
  display: flex;
  flex-direction: column;
}
.bayes-viz-controls {
  text-align: center;
  margin-bottom: 20px;
  font-family: sans-serif;
}
.bayes-viz-controls button {
  margin: 0 5px;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #4f46e5;
  color: white;
  border: none;
  cursor: pointer;
}
.bayes-viz-controls button:disabled {
  background-color: #a5b4fc;
  cursor: not-allowed;
}
.bayes-viz-main {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}
.bayes-viz-panel {
  width: 48%;
  display: flex;
  flex-direction: column; /* Allow stacking of plots */
}
.bayes-viz-panel h4 {
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
  margin-bottom: 10px;
}
.bayes-viz-svg {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.bayes-viz-info {
  text-align: center;
  font-size: 12px;
  font-family: sans-serif;
  margin-top: 5px;
  height: 20px; /* Reserve space */
}
/* New styles for sub-plots */
.bayes-subplot-container {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}
.bayes-subplot {
  width: 50%;
}
.bayes-subplot-title {
  font-size: 11px;
  font-family: sans-serif;
  text-align: center;
  margin-bottom: 5px;
  font-weight: bold;
}
/* ✨ 新的、更丰富的样式 ✨ */
.slice-indicator-line {
  stroke: #db2777; /* Pink */
  stroke-width: 1px;
  stroke-dasharray: 3, 3;
  pointer-events: none; /* 让线本身不响应鼠标事件 */
}

.slice-indicator-handle {
  fill: #db2777;
  fill-opacity: 0.2;
  stroke: #db2777;
  stroke-width: 1px;
  cursor: ns-resize; /* 上下拖动光标 */
  transition: fill-opacity 0.2s;
}
.slice-indicator-handle:hover {
  fill-opacity: 0.5;
}

.slice-indicator-text {
  font-family: sans-serif;
  font-size: 10px;
  fill: #c026d3; /* Fuchsia */
  text-anchor: end;
  pointer-events: none;
}
.next-sample-indicator {
  stroke: #f59e0b; /* Amber */
  stroke-width: 2px;
}
.surrogate-mean {
  stroke: #1d4ed8; /* Darker blue */
  stroke-width: 2px;
  fill: none;
}
.surrogate-uncertainty {
  fill: #bfdbfe; /* Light blue */
  opacity: 0.7;
}
.acquisition-line {
  stroke: #16a34a; /* Green */
  stroke-width: 2px;
  fill: none;
}

/* --- ML Principles Viz Styles --- */
.ml-principles-container {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
}
.ml-principles-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 15px;
}
html.dark .ml-principles-tabs {
  border-bottom-color: #374151;
}
.ml-principles-tab {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: #6b7280;
}
html.dark .ml-principles-tab {
  color: #9ca3af;
}
.ml-principles-tab:hover {
  background-color: #f9fafb;
}
html.dark .ml-principles-tab:hover {
  background-color: #111827;
}
.ml-principles-tab.active {
  border-color: #4f46e5;
  color: #4f46e5;
  font-weight: bold;
}
html.dark .ml-principles-tab.active {
  border-color: #a5b4fc;
  color: #a5b4fc;
}
.ml-principles-content {
  display: flex;
  gap: 20px;
}
.ml-principles-canvas {
  flex: 2;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
html.dark .ml-principles-canvas {
  border-color: #374151;
}
.ml-principles-panel {
  flex: 1;
  padding: 10px;
}
.ml-principles-panel h4 {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 10px;
}
.ml-principles-panel p {
  font-size: 0.9em;
  line-height: 1.6;
  color: #4b5563;
}
html.dark .ml-principles-panel p {
  color: #cbd5e1;
}
.ml-principles-panel button {
  margin-top: 15px;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #4f46e5;
  color: white;
  border: none;
  cursor: pointer;
}
.ml-principles-panel button:disabled {
  background-color: #a5b4fc;
  cursor: not-allowed;
}

/* SVG Element Styles */
.point-class-0 {
  fill: #ef4444;
} /* Red */
.point-class-1 {
  fill: #3b82f6;
} /* Blue */
.boundary-line {
  stroke: #1f2937;
  stroke-width: 2.5px;
}
html.dark .boundary-line {
  stroke: #e2e8f0;
}
.boundary-surface {
  fill-opacity: 0.15;
}
.tree-boundary {
  stroke: #4b5563;
  stroke-width: 0.5px;
}
.point-error {
  stroke: #db2777; /* Pink */
  stroke-width: 3px;
}
/* In style_docs.css */

/* In style_docs.css */

/* --- Visual Cleaning Pipeline Viz Styles --- */
.cleaning-viz-svg {
  font-family: sans-serif;
  background-color: #f9fafb; /* gray-50 */
  border-radius: 8px;
}
html.dark .cleaning-viz-svg {
  background-color: #1f2937; /* gray-800 */
}

.pipeline-zone-label {
  font-size: 14px;
  font-weight: bold;
  text-anchor: middle;
  fill: #6b7280;
}
html.dark .pipeline-zone-label {
  fill: #9ca3af;
}

.pipeline-station-icon {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 28px;
  text-anchor: middle;
}
.pipeline-station-label {
  font-size: 12px;
  text-anchor: middle;
}

.molecule-card {
  cursor: grab;
  transition: all 0.5s ease-in-out;
}
.molecule-card-rect {
  rx: 6px;
  stroke-width: 2px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
}
.molecule-card-text {
  font-size: 13px;
  font-family: "JetBrains Mono", monospace;
  text-anchor: middle;
  pointer-events: none;
}
.bin-counter {
  font-size: 24px;
  font-weight: bold;
  text-anchor: middle;
}

/* Status colors */
.status-pending {
  fill: #fff;
  stroke: #d1d5db;
}
.status-processing {
  fill: #fef3c7;
  stroke: #f59e0b;
} /* Yellow */
.status-success {
  fill: #dcfce7;
  stroke: #22c55e;
} /* Green */
.status-fail {
  fill: #fee2e2;
  stroke: #ef4444;
} /* Red */
/* 在 style_docs.css 文件末尾添加 */
.docs-nav-btn:disabled .fa-pause,
.docs-nav-btn:disabled .fa-play {
  color: #9ca3af; /* gray-400 */
}
/* ===== ECFP 可视化增强样式 (Interactive Radius Lens) ===== */

/* 1. “半径透镜” 的外观 */
.ecfp-lens {
  fill: rgba(139, 92, 246, 0.15); /* 半透明的紫色填充 */
  stroke: rgba(139, 92, 246, 0.8); /* 不透明的紫色边框 */
  stroke-width: 2px;
  pointer-events: none; /* 确保透镜本身不会干扰鼠标事件 */
  transition: opacity 0.2s ease-in-out, r 0.3s ease-in-out; /* 平滑过渡效果 */
}

/* 2. 鼠标悬停/点击时，右侧指纹位的高亮样式 */
.clicked-highlight-bit {
  fill: #f59e0b !important; /* 醒目的琥珀色/橙色 */
  stroke: #b45309 !important; /* 深橙色边框 */
  stroke-width: 2px !important;
  transition: fill 0.2s ease;
}

/* 3. （可选，但推荐）为左侧分子图的交互覆盖层设置光标样式 */
.ecfp-viz-interaction-overlay {
  cursor: crosshair; /* 使用十字准星光标，提示用户这是一个可交互区域 */
}

/* ✨ 关键修复: 使用更具体的选择器 ✨ */
.scaffold-chart-area .bar {
  fill: #4f46e5;
  transition: fill 0.2s ease-in-out;
}

.scaffold-chart-area .bar:hover,
.scaffold-chart-area .bar.active {
  fill: #fbbf24;
}

/* 右侧指纹位在悬停时的高亮样式 */
.bit.highlight-bit {
  fill: #f59e0b !important; /* 强制使用橙色填充 */
  stroke: #d97706;
  stroke-width: 1.5px;
}

/* 左侧分子图SVG内部的高亮片段颜色 */
/* 这将覆盖RDKit默认的红色高亮 */
.atom-highlights,
.bond-highlights {
  fill: #f59e0b !important;
  stroke: #f59e0b !important;
}

/* 紫色透镜的样式 */
.ecfp-lens {
  fill: #8b5cf6; /* 紫色填充 */
  fill-opacity: 0.25; /* 半透明 */
  stroke: #8b5cf6; /* 紫色边框 */
  stroke-width: 1.5px;
  pointer-events: none; /* 确保透镜本身不会捕获鼠标事件 */
}
/* 右侧指纹位在悬停时的高亮样式 */
.bit-vec-bit.highlight-bit,
.count-vec-bit.highlight-bit {
  fill: #f59e0b !important; /* 橙色 */
  stroke: #d97706;
  stroke-width: 1.5px;
}

/* 左侧分子图SVG内部的高亮片段颜色 */
svg .atom-highlights,
svg .bond-highlights {
  fill: #f59e0b !important;
  stroke: #f59e0b !important;
}

/* 紫色透镜的样式 */
.ecfp-lens {
  fill: #8b5cf6;
  fill-opacity: 0.25;
  stroke: #8b5cf6;
  stroke-width: 1.5px;
  pointer-events: none;
}

/* Recommended to add to your main CSS file */
.split-viz-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  gap: 2rem;
}
.split-viz-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.split-viz-legend .legend-item {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 3px;
}
.split-viz-legend .legend-item.train {
  background-color: rgba(59, 130, 246, 0.7);
}
.split-viz-legend .legend-item.valid {
  background-color: rgba(34, 197, 94, 0.7);
}
.split-viz-legend .legend-item.test {
  background-color: rgba(249, 115, 22, 0.7);
}

.split-viz-main-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.split-viz-panel {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
}
.split-viz-panel h4 {
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 600;
}
.split-viz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}

/* Border for coloring after split */
.molecular-card.split-border {
  border: 3px solid transparent;
  transition: border-color 0.5s ease;
}
.molecular-card.split-border.train {
  border-color: rgba(59, 130, 246, 0.7);
}
.molecular-card.split-border.valid {
  border-color: rgba(34, 197, 94, 0.7);
}
.molecular-card.split-border.test {
  border-color: rgba(249, 115, 22, 0.7);
}
.mol-svg-container {
  width: 100%;
  height: 100%;
}
.mol-svg-container svg {
  width: 100%;
  height: 100%;
}

/* 为我们的交互式可视化输入框定义样式 */
.viz-input-box {
  /* 边框样式 */
  border: 1px solid #ccc;
  /* 圆角，使其看起来更柔和 */
  border-radius: 4px;
  /* 内边距，让数字不贴着边框 */
  padding: 4px 8px;
  /* 字体大小 */
  font-size: 14px;
  /* 文本居中 */
  text-align: center;
  /* 过渡效果，让聚焦动画更平滑 */
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* 当用户点击输入框时的“聚焦”效果 */
.viz-input-box:focus {
  /* 移除浏览器默认的粗边框 */
  outline: none;
  /* 将边框颜色变为蓝色，与滑块颜色匹配 */
  border-color: #3b82f6;
  /* 添加一个柔和的蓝色光晕效果，进一步强调激活状态 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
/* ===== Markdown 表格样式优化 ===== */

/* 1. 表格容器，用于响应式横向滚动 */
/* 我们将这个样式应用到包含表格的 .markdown-cell 上，这是一个简单有效的处理方式 */
.markdown-cell {
  overflow-x: auto; /* 当表格过宽时，允许横向滚动 */
}

/* 2. 表格主体样式 */
.docs-content .markdown-cell table {
  width: 100%; /* 表格宽度占满容器 */
  min-width: 600px; /* 设置最小宽度，确保在窄容器内也能触发滚动 */
  border-collapse: collapse; /* 合并边框，样式更简洁 */
  margin: 1.5em 0; /* 表格与其他元素的垂直间距 */
  font-size: 0.9rem; /* 统一字体大小 */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); /* 添加细微阴影以提升层次感 */
  border-radius: 0.5rem; /* 圆角 */
  overflow: hidden; /* 确保圆角效果生效 */
}

/* 3. 表头 (th) 样式 */
.docs-content .markdown-cell th {
  padding: 0.75rem 1rem; /* 单元格内边距 */
  text-align: left; /* 文字左对齐 */
  font-weight: 600; /* 字体加粗 */
  background-color: #3f8ddb; /* 浅灰色背景 (Tailwind gray-50) */
  color: #1b1b1d; /* 文字颜色 (Tailwind gray-600) */
  text-transform: uppercase; /* 字母大写，更正式 */
  letter-spacing: 0.05em; /* 字母间距 */
  border-bottom: 2px solid #e5e7eb; /* 底部加粗边框 (Tailwind gray-200) */
}

/* 4. 表格数据单元格 (td) 样式 */
.docs-content .markdown-cell td {
  padding: 0.75rem 1rem; /* 与表头一致的内边距 */
  border-top: 1.5px solid #f3f4f6; /* 行之间的细分割线 (Tailwind gray-100) */
  color: #374151; /* 文字颜色 (Tailwind gray-700) */
  vertical-align: middle; /* 内容垂直居中 */
}

/* 5. 表格主体 (tbody) 行交替背景色和悬停效果 */
.docs-content .markdown-cell tbody tr {
  transition: background-color 0.2s ease-in-out; /* 平滑过渡效果 */
}

.docs-content .markdown-cell tbody tr:nth-child(even) {
  background-color: #fdfdfe; /* 偶数行一个非常淡的背景色 */
}

.docs-content .markdown-cell tbody tr:hover {
  background-color: #c0d0f0; /* 鼠标悬停时变为淡蓝色 */
}

/* --- 深色模式下的表格样式 --- */
html.dark .docs-content .markdown-cell table {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

html.dark .docs-content .markdown-cell th {
  background-color: #374151; /* 深灰色背景 (gray-700) */
  color: #d1d5db; /* 浅灰色文字 (gray-300) */
  border-bottom: 2px solid #4b5563; /* 中灰色边框 (gray-600) */
}

html.dark .docs-content .markdown-cell td {
  border-top: 1px solid #374151; /* 深灰色分割线 (gray-700) */
  color: #cbd5e1; /* 更亮的文字颜色 (gray-300) */
}

html.dark .docs-content .markdown-cell tbody tr:nth-child(even) {
  background-color: #1f2937; /* 偶数行一个略深的背景色 (gray-800) */
}

html.dark .docs-content .markdown-cell tbody tr:hover {
  background-color: #334155; /* 鼠标悬停时变为深蓝色调 (slate-700) */
}
/* ===== On This Page (Right Sidebar) Styles - v3 Absolute Layout ===== */

/* 容器的定位，这是实现效果的关键 */
#right-sidebar-container {
  /* 
    left: 50%; 将元素的左边缘移动到屏幕中心。
    transform: translateX(calc(1280px / 2 + 2rem)); 
    然后，将元素向右推移。“版心宽度的一半” + “版心与侧边栏的间距”。
    1280px 是 max-w-7xl 的值，2rem (32px) 是 lg:gap-8 的值。
  */
  left: 50%;
  transform: translateX(calc(1280px / 2 + 2rem));
}

.right-sidebar-nav {
  height: calc(100vh - 64px - 4rem);
  overflow-y: auto;
  padding-top: 1rem;
}

.right-sidebar-nav h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151; /* gray-700 */
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

.right-sidebar-nav ul {
  list-style: none;
  padding-left: 0.25rem;
  border-left: 1px solid #e5e7eb;
}

.right-sidebar-nav li {
  margin-bottom: 0.25rem;
}

.right-sidebar-nav a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  color: #6b7280; /* gray-500 */
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  margin-left: -1px;
  transition: all 0.2s ease-in-out;
  line-height: 1.4;
}

.right-sidebar-nav a:hover {
  color: var(--primary-color);
  transform: translateX(2px);
}

.right-sidebar-nav a.docs-active {
  color: var(--primary-color);
  font-weight: 600;
  border-left-color: var(--primary-color);
}

.right-sidebar-nav a.level-3 {
  padding-left: 1.5rem;
}
.right-sidebar-nav a.level-4 {
  padding-left: 2.25rem;
}

/* --- 深色模式适配 --- */
html.dark .right-sidebar-nav h3 {
  color: #d1d5db;
  border-bottom-color: #4b5563;
}
html.dark .right-sidebar-nav ul {
  border-left-color: #4b5563;
}
html.dark .right-sidebar-nav a {
  color: #9ca3af;
}
html.dark .right-sidebar-nav a:hover {
  color: var(--primary-hover-dark);
}
html.dark .right-sidebar-nav a.docs-active {
  color: var(--primary-hover-dark);
  border-left-color: var(--primary-hover-dark);
}

/* 
  为更窄的宽屏做适配，例如 1536px 屏幕。
  将间距从 2rem 缩小到 1.5rem。
*/
@media (min-width: 1536px) and (max-width: 1600px) {
  #right-sidebar-container {
    transform: translateX(calc(1280px / 2 + 1.5rem));
  }
}

.scaffold-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 1000;
  backdrop-filter: blur(2px);
  min-width: 160px;
  transition: opacity 0.2s ease;
}

.tooltip-header {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.tooltip-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tooltip-label {
  color: #666;
  font-size: 12px;
}

.tooltip-value {
  font-weight: 600;
  color: #2c3e50;
  font-size: 12px;
}

/* 确保chart container有相对定位，这样tooltip才能正确定位 */
.scaffold-chart-area {
  position: relative;
}
/* =========================================
   1. 修复 Plotly 图表溢出与居中问题
   ========================================= */

/* 强制 Plotly 容器居中且不溢出 */
.js-plotly-plot,
.plot-container {
  width: 100% !important;
  margin: 0 auto !important;
  display: flex;
  justify-content: center;
}

/* 基础交互容器样式：确保有内边距，过渡平滑 */
.interactive-container {
  width: 100%;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 容器的深色模式背景 */
html.dark .interactive-container {
  background-color: #1f2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
}

/* =========================================
   2. 修复 Visual Sanitizer (第三张图) 暗色模式
   ========================================= */

/* 标题文字颜色 (Input Hopper, Output Bin 等) */
html.dark .pipeline-zone-label {
  fill: #e2e8f0; /* 亮灰色 */
  font-weight: 600;
}

/* 计数器数字 */
html.dark .bin-counter {
  fill: #60a5fa; /* 亮蓝色 */
}

/* 中间站点的图标 (漏斗、烧瓶等) */
html.dark .pipeline-station-icon {
  fill: #9ca3af; /* 灰色 */
}
html.dark .pipeline-station-icon.active {
  fill: #fbbf24; /* 激活时变亮黄/橙 */
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

/* 中间站点的文字标签 */
html.dark .pipeline-station-label {
  fill: #cbd5e1;
}

/* --- 分子卡片样式 (暗色适配) --- */
/* 卡片背景变深，避免亮白 */
html.dark .molecule-card-rect {
  fill: #374151;
  stroke: #4b5563;
}
/* 卡片文字变亮 */
html.dark .molecule-card-text {
  fill: #f3f4f6;
}

/* 状态颜色适配 (让它们在深色背景下更协调) */
html.dark .status-pending {
  fill: #374151;
  stroke: #9ca3af;
}
html.dark .status-processing {
  fill: #451a03;
  stroke: #fbbf24;
} /* 黄色系 */
html.dark .status-success {
  fill: #064e3b;
  stroke: #34d399;
} /* 绿色系 */
html.dark .status-fail {
  fill: #450a0a;
  stroke: #f87171;
} /* 红色系 */

/* 废弃区卡片透明度 */
html.dark .rejected-card .molecule-card-rect {
  opacity: 0.6;
}

/* 按钮深色适配 */
html.dark #start-process-btn,
html.dark #pause-resume-btn,
html.dark #reset-sanitizer-btn {
  background-color: #374151;
  color: #e2e8f0;
  border-color: #4b5563;
}
html.dark #start-process-btn {
  background-color: #4f46e5; /* 主按钮保持紫色 */
  border-color: #4f46e5;
  color: white;
}

/* =========================================
   3. 修复交互图表控制栏 (Control Bar) 样式
   ========================================= */

/* 控制栏容器 */
.viz-controls-container {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 1rem;
  font-family: sans-serif;
  color: #374151; /* 浅色模式：深灰字 */
  transition: color 0.3s ease;
}

/* 标签文字 */
.viz-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: inherit; /* 继承父级颜色 */
}

/* --- 暗色模式适配 --- */
html.dark .viz-controls-container {
  color: #e2e8f0; /* 深色模式：亮白字 */
}

html.dark .viz-label {
  color: #e2e8f0;
}

/* 修复滑块 (Range Input) 在暗色模式下的背景 */
html.dark input[type="range"] {
  accent-color: #6366f1; /* 紫色滑块条 */
}

/* =========================================
   4. 修复数字输入框 (Number Input) 暗色样式
   ========================================= */

/* 默认（浅色）模式下的基础样式修正 */
.viz-input-box {
  background-color: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 4px 8px;
  text-align: center;
  transition: all 0.2s ease;
}

/* --- 暗色模式适配 --- */
html.dark .viz-input-box {
  background-color: #374151; /* 深灰色背景 (gray-700) */
  color: #e2e8f0; /* 亮白色文字 */
  border-color: #4b5563; /* 深灰色边框 (gray-600) */
}

/* 暗色模式下的聚焦状态 */
html.dark .viz-input-box:focus {
  background-color: #1f2937; /* 聚焦时背景稍深 (gray-800) */
  border-color: #818cf8; /* 聚焦时边框变紫 (indigo-400) */
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); /* 紫色光晕 */
}

/* --- 暗色模式适配 --- */
html.dark .viz-input-box {
  background-color: #374151; /* 深灰色背景 */
  color: #e2e8f0; /* 亮白色文字 */
  border-color: #4b5563; /* 深灰色边框 */

  /* ✨ 新增：告诉浏览器渲染暗色风格的原生控件（箭头） ✨ */
  color-scheme: dark;
}
/* --- 交互式控制栏深色模式适配 (Interactive Control Bar) --- */

/* 1. 控制栏主容器 */
html.dark .viz-control-panel {
  background-color: #1f2937; /* gray-800: 深色背景 */
  border-color: #374151; /* gray-700: 深色边框 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); /* 更深的阴影 */
}

/* 2. 小标题 (Data Property, Bin Width...) */
html.dark .viz-label-title {
  color: #9ca3af; /* gray-400: 柔和的亮灰色 */
}

/* 3. 通用输入框样式 (Select, Number Input) */
html.dark .viz-input-base {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #f3f4f6; /* gray-100: 亮白文字 */

  /* ✨ 关键：强制浏览器使用暗色系渲染原生组件（如下拉箭头、滚动条） */
  color-scheme: dark;
}

/* 4. 输入框聚焦状态 */
html.dark .viz-input-base:focus {
  border-color: #818cf8; /* indigo-400 */
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.3); /* 紫色光晕 */
  outline: none;
}

/* 5. Reset 按钮 */
html.dark .viz-btn-auto {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563; /* gray-600 */
  color: #e5e7eb; /* gray-200 */
}

html.dark .viz-btn-auto:hover {
  background-color: #4b5563; /* gray-600 */
  color: #ffffff;
}

/* 6. 范围滑块 (Range Slider) */
html.dark input[type="range"] {
  accent-color: #818cf8; /* indigo-400: 紫色滑块 */
}

/* 7. 中间的分割线 (-) */
html.dark .range-wrapper span {
  color: #9ca3af !important; /* gray-400 */
}
/* =========================================
   SCAFFOLD VIZ - V4 LAYOUT OPTIMIZATION
   ========================================= */

/* --- 1. 顶部布局调整：给图表更多空间 --- */
.scaffold-final-layout {
  display: grid;
  /* ✨ 关键修改：从 1.4fr 1fr 改为 2fr 1fr，图表变宽 */
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-top: 1rem;
}

/* 图表区域 */
.scaffold-chart-area {
  min-height: 300px; /* 高度适中 */
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  /* 防止图表溢出 */
  overflow: hidden;
}

/* --- 2. 底部 Inspector 彻底重构 (移除左右分栏，改为画廊) --- */
.scaffold-inspector-area-grid {
  grid-column: 1 / -1; /* 横跨两列 */
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

  /* ✨ 改为简单的垂直布局：标题在上，网格在下 */
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 底部标题栏 (包含统计信息) */
.scaffold-inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}

.inspector-title-left {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.inspector-stats-right {
  font-family: monospace;
  font-size: 0.85rem;
  color: #6b7280;
  background: #f9fafb;
  padding: 4px 8px;
  border-radius: 4px;
}

/* --- 3. 底部网格与卡片优化 --- */
.example-grid-container {
  /* ✨ 改为单行 4 列布局，更加整齐 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.example-grid-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  height: 140px; /* ✨ 固定高度，防止卡片过大 */
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.example-grid-item:hover {
  border-color: #6366f1;
  background-color: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* SVG 容器：限制大小，确保居中 */
.example-grid-svg {
  width: 100%;
  height: 90px; /* 给图片固定空间 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.example-grid-svg svg {
  /* ✨ 关键：限制 SVG 最大宽高，防止撑破 */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.example-grid-info {
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  border-top: 1px solid #f3f4f6;
  padding-top: 4px;
}

/* --- Dark Mode 适配 --- */
html.dark .scaffold-chart-area,
html.dark .scaffold-inspector-area-grid,
html.dark .example-grid-item {
  background-color: #1f2937;
  border-color: #374151;
}

html.dark .scaffold-inspector-header {
  border-bottom-color: #374151;
}
html.dark .inspector-title-left {
  color: #e5e7eb;
}
html.dark .inspector-stats-right {
  background: #374151;
  color: #d1d5db;
}
html.dark .example-grid-info {
  border-top-color: #374151;
}
html.dark .example-grid-item:hover {
  background-color: #374151;
  border-color: #818cf8;
}

/* 你的滤镜代码保持不变 */
html.dark .key-point-svg svg,
html.dark .example-grid-svg svg {
  filter: invert(1) hue-rotate(180deg) contrast(1.1);
}
/* =========================================
   SCAFFOLD VIZ - 交互样式增强
   ========================================= */

/* 1. 右上角骨架卡片 (Key Point Card) 样式升级 */
.key-point-card {
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9fafb;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent; /* 预留边框空间，防止布局抖动 */
  border-color: #e5e7eb; /* 默认浅灰边框 */
  position: relative;
  overflow: hidden;
}

.key-point-card:nth-child(1) {
  grid-area: top1;
}

.key-point-card:nth-child(2) {
  grid-area: top2;
}

/* 鼠标悬停状态 */
.key-point-card:hover {
  border-color: #818cf8; /* 悬停时变浅紫 (Indigo-400) */
  transform: translateY(-3px); /* 向上浮动更多 */
  box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.15); /* 带颜色的投影 */
  background-color: #fcfdfe; /* 极淡的蓝色背景 */
}

/* 激活状态 (JS控制，当鼠标悬停时添加此雷) */
.key-point-card.active-card {
  border-color: #4f46e5 !important; /* 深紫 (Indigo-600) */
  background-color: #eff6ff !important; /* 浅蓝背景 (Blue-50) */
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); /* 外发光光环 */
}

/* 深色模式适配 */
html.dark .key-point-card {
  border-color: #374151;
  background-color: #1f2937;
}
html.dark .key-point-card:hover {
  border-color: #6366f1;
  background-color: #312e81; /* 深蓝背景 */
}
html.dark .key-point-card.active-card {
  border-color: #818cf8 !important;
  background-color: #1e1b4b !important; /* 更深的蓝 */
}

/* 2. 下方分子示例卡片 (Example Grid Item) 信息栏优化 */
.example-grid-info {
  width: 100%;
  text-align: center;
  font-size: 10px; /* 字体更小更精致 */
  font-weight: 500;
  color: #9ca3af;
  border-top: 1px solid #f3f4f6;
  padding-top: 6px;
  margin-top: 4px;
  text-transform: uppercase; /* 全大写，看起来像标签 */
  letter-spacing: 0.05em;
}

/* 悬停示例卡片时，文字变色 */
.example-grid-item:hover .example-grid-info {
  color: #6366f1; /* 变紫 */
  border-top-color: #e0e7ff;
}

/* 深色适配 */
html.dark .example-grid-info {
  border-top-color: #374151;
  color: #6b7280;
}
/* =========================================
   SCAFFOLD VIZ - DARK MODE & AXIS FIXES
   ========================================= */

/* 1. 图表轴标题和刻度文字 */
.scaffold-dist-axis-label {
  font-size: 16px;
  fill: #4b5563; /* 浅色模式：深灰 */
  font-weight: 600;
}

html.dark .scaffold-dist-axis-label {
  fill: #9ca3af; /* 深色模式：浅灰 */
}

html.dark .tick text {
  fill: #9ca3af; /* 刻度文字变亮 */
}

/* 2. 图表轴线和刻度线 */
html.dark .domain {
  stroke: #4b5563; /* 轴线 */
}
html.dark .tick line {
  stroke: #374151; /* 刻度线 */
}

/* 3. 全局分子 SVG 深色适配 (一网打尽) */
/* 只要是在 scaffold-final-layout 容器里的所有 SVG，在深色模式下都反色 */
html.dark .scaffold-final-layout svg {
  filter: invert(1) hue-rotate(180deg) contrast(1.1);
}

/* 4. 修复 Acyclic (无环) 骨架可能的白色背景块 */
html.dark .scaffold-final-layout rect[fill="#ffffff"],
html.dark .scaffold-final-layout rect[fill="#f9fafb"],
html.dark .scaffold-final-layout rect[fill="white"] {
  fill: transparent !important;
}

/* 5. 底部示例卡片的文字样式微调 */
.example-grid-info {
  /* 确保 Sample 文字和 n=... 文字都有合适的默认样式 */
  color: #9ca3af;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

html.dark .example-grid-info {
  color: #6b7280;
}
/* 添加到 style_docs.css 或新文件 */
.search-history-item {
  transition: all 0.2s ease;
}

.search-history-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

mark {
  padding: 0 2px;
  border-radius: 2px;
}

#search-results li a {
  transition: background-color 0.2s ease;
}

#search-results li a:hover {
  background-color: #f9fafb;
}

#search-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
/* 搜索结果高亮样式 */
mark {
  background-color: #fef3c7; /* 黄色背景 */
  padding: 1px 2px;
  border-radius: 3px;
  color: #000;
  font-weight: 600;
}

/* 搜索结果悬停效果 */
#search-results li:hover {
  background-color: #f9fafb;
}

/* 搜索结果链接样式 */
#search-results li a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 搜索历史项样式 */
.search-history-item {
  transition: all 0.2s ease;
  cursor: pointer;
}

.search-history-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #e5e7eb !important;
}

/* 搜索模式选择器样式 */
#search-mode-selector {
  transition: all 0.2s ease;
}

#search-mode-selector input[type="radio"] {
  accent-color: #4f46e5; /* 使用主题色 */
}

#search-mode-selector label:hover {
  color: #4f46e5;
}

/* 智能高亮样式 */
.search-highlight {
  background-color: #fef3c7; /* 黄色 */
  padding: 0 2px;
  border-radius: 3px;
  color: #000;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.search-highlight.exact-match {
  background-color: #d1fae5; /* 绿色 - 精确匹配 */
}

.search-highlight.prefix-match {
  background-color: #dbeafe; /* 蓝色 - 前缀匹配 */
}

/* 搜索结果悬停效果 */
#search-results li:hover .search-highlight {
  background-color: #fde68a; /* 更深的黄色 */
}

#search-results li:hover .search-highlight.exact-match {
  background-color: #a7f3d0;
}

#search-results li:hover .search-highlight.prefix-match {
  background-color: #bfdbfe;
}

/* 搜索统计 */
#search-stats {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
}

/* =========================================
   ECFP / Fingerprint Visualization Styles (V4 Final)
   ========================================= */

/* --- 1. 容器与控制栏 --- */
.viz-radius-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 15px;
  margin-bottom: 1rem;
  padding: 8px;
  background: #f5f3ff; /* Purple-50 */
  border-radius: 8px;
  border: 1px solid #ede9fe; /* Purple-100 */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}
html.dark .viz-radius-controls {
  background: #1e1b4b;
  border-color: #312e81;
}

.viz-radius-label {
  font-weight: 700;
  color: #6d28d9;
  font-size: 0.9rem;
}
html.dark .viz-radius-label {
  color: #a78bfa;
}

.radius-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  color: #4b5563;
  transition: color 0.2s;
}
html.dark .radius-option {
  color: #d1d5db;
}

.radius-option input {
  margin-right: 6px;
  accent-color: #7c3aed;
  cursor: pointer;
}

.viz-reset-btn {
  padding: 4px 12px;
  font-size: 0.85rem;
  background-color: #7c3aed;
  color: white;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.viz-reset-btn:hover {
  background-color: #6d28d9;
}

/* --- 2. 透镜样式 (SVG 内部) --- */
.ecfp-lens-group {
  pointer-events: none; /* 默认不阻挡鼠标，但在JS中如果是点击事件会处理 */
  transition: opacity 0.2s ease, transform 0.1s linear;
}

.ecfp-lens-outer {
  fill: rgba(139, 92, 246, 0.1);
  stroke: #8b5cf6;
  stroke-width: 1.5px;
  stroke-dasharray: 4, 4; /* 虚线表示悬停状态 */
  transition: r 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s;
}

/* 锁定状态的透镜 */
.ecfp-lens-group.pinned .ecfp-lens-outer {
  stroke: #f59e0b; /* 橙色边框 */
  stroke-width: 2px;
  stroke-dasharray: 0; /* 实线表示锁定 */
  fill: rgba(245, 158, 11, 0.15);
}

.ecfp-lens-group.pinned text {
  fill: #d97706; /* 文字变橙色 */
  font-weight: 800;
}

.ecfp-lens-center {
  fill: #7c3aed;
  stroke: #fff;
  stroke-width: 1.5px;
}
.ecfp-lens-group.pinned .ecfp-lens-center {
  fill: #f59e0b;
}

/* --- 3. 指纹位样式 (Rect) --- */
.bit-rect,
.count-rect {
  transition: fill 0.1s ease, transform 0.1s ease;
  shape-rendering: geometricPrecision;
}

.bit-rect:hover,
.count-rect:hover {
  stroke: #8b5cf6;
  stroke-width: 2px;
  z-index: 10;
  transform: scale(1.1); /* 轻微放大 */
}

/* 锁定状态 (与原子联动) */
.pinned-bit {
  stroke: #f59e0b !important;
  stroke-width: 2px !important;
}

/* --- 4. Count 颜色定义 (JS动态调用，这里辅助定义) --- */
/* 
   Color Palette Idea:
   0: #e5e7eb (Gray)
   1: #7c3aed (Purple)
   2: #2563eb (Blue)
   3: #0d9488 (Teal)
   4+: #ea580c (Orange)
*/

/* SVG 内部高亮片段 */
svg .atom-highlights,
svg .bond-highlights {
  fill: #f59e0b !important;
  stroke: #f59e0b !important;
  stroke-width: 2.5px !important;
  fill-opacity: 0.4;
}

/* --- 5. Tooltip (仅指纹位使用) --- */
.viz-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.95);
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-family: sans-serif;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  transform: translate(-50%, -130%);
}

/* 指纹位高亮样式 */
.bit-rect.fingerprint-hover,
.count-rect.fingerprint-hover {
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.7));
  stroke: #f59e0b;
  stroke-width: 2px;
  transform-box: fill-box;
  transform-origin: center;
  animation: gentle-pulse 1.5s ease-in-out infinite;
}

/* 锁定的指纹位样式 */
.bit-rect.pinned-bit,
.count-rect.pinned-bit {
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.8));
  stroke: #8b5cf6;
  stroke-width: 2px;
}

/* Tooltip优化 */
.viz-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  z-index: 10000;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s ease-out;
  min-width: 120px;
  text-align: center;
}

/* 温和的脉动动画 */
@keyframes gentle-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

/* ==========================================================================
   Code Block Styling (Refactored & Organized)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base Typography & Reset (基础排版与重置)
   -------------------------------------------------------------------------- */
.code-block-container pre,
.code-block-container pre[class*="language-"],
.code-block-container code {
  font-family: "JetBrains Mono", "Fira Mono", "Menlo", "Monaco", "Consolas",
    monospace;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.7;
  text-shadow: none !important; /* 移除 Prism 默认阴影，保证清晰度 */
  filter: none !important; /* 移除滤镜，优化抗锯齿 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   2. Light Mode Styles (浅色模式 - 默认)
   -------------------------------------------------------------------------- */
.code-block-container {
  background: #f7f8fa;
  border-radius: 0.7rem;
  box-shadow: 0 2px 8px 0 rgba(60, 60, 90, 0.06);
  border: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
  position: relative; /* 为复制按钮定位 */
}

/* 容器内边距与滚动设置 */
.code-block-container pre,
.code-block-container pre[class*="language-"] {
  margin: 0;
  padding: 1.2rem 1.5rem;
  padding-right: 3.2rem; /* 右侧留白给复制按钮 */
  border-radius: 0.7rem;
  overflow-x: auto;
  background: transparent !important; /* 确保背景透明 */
  border: none;
  box-shadow: none;
}

/* ★ 关键修复：强制浅色模式下文字为深色 ★ */
/* 覆盖 Prism Okaidia 默认的白色字体 */
body:not(.dark) .code-block-container pre[class*="language-"],
body:not(.dark) .code-block-container code[class*="language-"],
body:not(.dark) .code-block-container code {
  color: #23272e !important;
  background: none !important;
}

/* 行高亮背景 (浅色) */
body:not(.dark) pre[class*="language-"] > code .highlight-line {
  background: #eceff4;
  display: block;
  margin-right: -1.5rem;
  margin-left: -1.5rem;
  padding: 0 1.5rem;
}

/* ==========================================================================
   3. Syntax Highlighting System (CSS Variables for Perfect Compatibility)
   彻底解决：使用 CSS 变量定义两套完整的配色方案，确保所有符号可见
   ========================================================================== */

:root {
  /* --- ☀️ 浅色模式配色 (仿 GitHub Light / PyCharm Light) --- */
  --prism-bg: #f6f8fa;
  --prism-text: #24292e; /* 基础黑：用于未识别的代码 */
  --prism-comment: #6a737d; /* 注释灰 */
  --prism-keyword: #d73a49; /* 关键字红 (import, def, return) */
  --prism-boolean: #005cc5; /* 布尔/数字蓝 (True, 123) */
  --prism-function: #6f42c1; /* 函数紫 (print, len, apply) */
  --prism-string: #032f62; /* 字符串深蓝 ('text') */
  --prism-class: #e36209; /* 类名橙 (DataFrame) */
  --prism-variable: #24292e; /* 变量黑 */
  --prism-operator: #24292e; /* ★ 关键：操作符黑 (=, +, -) */
  --prism-punctuation: #24292e; /* ★ 关键：标点黑 (., [], {}) */
  --prism-tag: #22863a; /* 标签绿 */
}

html.dark {
  /* --- 🌙 深色模式配色 (仿 Okaidia / Dracula) --- */
  --prism-bg: #23272e;
  --prism-text: #f8f8f2; /* 基础白 */
  --prism-comment: #8292a2; /* 注释灰蓝 */
  --prism-keyword: #f92672; /* 关键字粉红 */
  --prism-boolean: #ae81ff; /* 布尔/数字紫 */
  --prism-function: #66d9ef; /* 函数青 (print, len) */
  --prism-string: #a6e22e; /* 字符串绿 */
  --prism-class: #e6db74; /* 类名黄 */
  --prism-variable: #f8f8f2; /* 变量白 */
  --prism-operator: #f8f8f2; /* 操作符白 */
  --prism-punctuation: #f8f8f2; /* 标点白 */
  --prism-tag: #f92672; /* 标签粉 */
}

/* --- 基础文本重置 --- */
.code-block-container pre[class*="language-"],
.code-block-container code[class*="language-"],
.code-block-container code {
  color: var(--prism-text) !important; /* 强制使用定义好的基础色 */
  text-shadow: none !important; /* 去掉所有阴影 */
  background: transparent !important;
  font-family: "JetBrains Mono", "Fira Mono", Consolas, monospace;
  line-height: 1.6;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
}

/* --- 详细 Token 映射 --- */

/* 注释 */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--prism-comment) !important;
  font-style: italic;
}

/* 标点符号 (.,;[]) - 之前看不见就是因为这里 */
.token.punctuation {
  color: var(--prism-punctuation) !important;
}

/* 属性、标签、常量 */
.token.namespace {
  opacity: 0.7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--prism-tag) !important;
}

/* 数字、布尔值 */
.token.boolean,
.token.number {
  color: var(--prism-boolean) !important;
}

/* 字符串、选择器 */
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--prism-string) !important;
}

/* 操作符 (=, +, -) - 之前看不见也是因为这里 */
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--prism-operator) !important;
  background: transparent !important; /* 移除可能存在的背景色 */
}

/* 关键字 (def, class, if) */
.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--prism-keyword) !important;
  font-weight: bold; /* 稍微加粗，浅色模式下更好看 */
}

/* 函数、类名 (len, apply) */
.token.function,
.token.class-name {
  color: var(--prism-function) !important;
}

/* 变量、正则 */
.token.regex,
.token.important,
.token.variable {
  color: var(--prism-class) !important;
}

/* 强调 */
.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

/* --------------------------------------------------------------------------
   4. Dark Mode Styles (深色模式适配)
   -------------------------------------------------------------------------- */
html.dark .code-block-container {
  background: #23272e;
  border-color: #23272e;
  box-shadow: 0 2px 8px 0 rgba(20, 20, 40, 0.18);
}

/* 强制文字变回浅色 */
html.dark .code-block-container pre[class*="language-"],
html.dark .code-block-container code[class*="language-"],
html.dark .code-block-container code {
  color: #e2e8f0 !important;
  background: transparent !important;
  text-shadow: none !important; /* 深色模式下也可以去掉阴影保持清爽，或设为 0 1px rgba(0,0,0,0.3) */
}

/* 行高亮背景 (深色) */
html.dark pre[class*="language-"] > code .highlight-line {
  background: #2c313a;
}

/* --------------------------------------------------------------------------
   5. UI Components: Copy Button & Scroll Hint
   -------------------------------------------------------------------------- */
.code-block-container .copy-button {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  z-index: 3;
  background: #fff;
  color: #6366f1;
  border: 1px solid #e5e7eb;
  border-radius: 0.4rem;
  font-size: 1.15rem;
  padding: 0.18rem 0.55rem;
  cursor: pointer;
  box-shadow: 0 1px 4px 0 rgba(60, 60, 90, 0.07);
  opacity: 0.92;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-block-container .copy-button:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.code-block-container .copy-button .fa-copy {
  font-size: 1.15em;
  pointer-events: none;
}

.code-block-container .copy-button.copied {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
  opacity: 1;
}

.code-block-container .copy-button .copied-label {
  margin-left: 0.4em;
  font-size: 0.92em;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* 移动端适配 */
@media (max-width: 600px) {
  .code-block-container pre,
  .code-block-container pre[class*="language-"] {
    padding-right: 2.2rem;
  }

  .code-block-container .copy-button {
    font-size: 1rem;
    padding: 0.12rem 0.38rem;
    opacity: 0.7;
    top: 0.3rem;
    right: 0.3rem;
  }

  .code-block-container .copy-button.copied {
    opacity: 1;
  }

  /* 横向滚动提示 */
  .code-block-container .scroll-hint {
    display: block;
    text-align: center;
    font-size: 0.85em;
    color: #a0aec0;
    margin-top: 0.3em;
    margin-bottom: 0.2em;
    letter-spacing: 0.01em;
    user-select: none;
  }
}

/* 桌面端隐藏滚动提示 */
.code-block-container .scroll-hint {
  display: none;
}
/* --- 暗色模式样式修复版 --- */

/* 1. 基础面板 */
.dark .viz-tooltip {
  background-color: #1e293b !important; /* Slate-800 */
  border: 1px solid #475569 !important; /* Slate-600 */
  color: #f1f5f9 !important; /* Slate-100 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6) !important;
}

/* 2. 标题栏 (修复被挡住/看不清的问题) */
/* 强制指定背景色和文字颜色，增加 padding 确保文字居中 */
.dark .viz-tooltip > div:first-child {
  background-color: #0f172a !important; /* Slate-900 */
  border-bottom: 1px solid #334155 !important;
  color: #ffffff !important;
}

/* 确保标题文字白色 */
.dark .viz-tooltip span.text-gray-800 {
  color: #f8fafc !important; /* Slate-50 */
}

/* 3. 关闭按钮 */
.dark .viz-tooltip #btn-close {
  color: #94a3b8 !important;
}
.dark .viz-tooltip #btn-close:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* 4. 分子图片容器 */
.dark .viz-tooltip .flex.justify-center.mb-3 {
  background-color: #ffffff;
  border-radius: 6px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #cbd5e1;
}

/* 5. 成员信息卡片 */
.dark .viz-tooltip .bg-white.border-gray-200 {
  background-color: #334155 !important;
  border-color: #475569 !important;
}
.dark .viz-tooltip .text-gray-700 {
  color: #e2e8f0 !important;
}
.dark .viz-tooltip .text-gray-600 {
  color: #cbd5e1 !important;
}

/* 6. 中心点卡片 */
.dark .viz-tooltip .bg-yellow-50 {
  background-color: #451a03 !important; /* Amber-950 */
  border-color: #b45309 !important; /* Amber-700 */
}
.dark .viz-tooltip .text-yellow-700 {
  color: #fcd34d !important; /* Amber-300 */
}

/* 7. 底部导航栏 */
.dark .viz-tooltip .border-t {
  border-color: #334155 !important;
}
.dark .viz-tooltip #btn-prev,
.dark .viz-tooltip #btn-next {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #475569;
}
.dark .viz-tooltip #btn-prev:hover,
.dark .viz-tooltip #btn-next:hover {
  background-color: #334155 !important;
  border-color: #94a3b8;
}
.dark .viz-tooltip span.font-mono {
  color: #cbd5e1 !important;
}

/* 8. 标签 Badge */
.dark .viz-tooltip .bg-blue-100 {
  background-color: #172554 !important;
  color: #93c5fd !important;
}
.dark .viz-tooltip .bg-red-100 {
  background-color: #450a0a !important;
  color: #fca5a5 !important;
}
/* Transformer Visualization Styles */

/* 容器基础 */
.tv-wrapper {
  display: flex;
  flex-direction: column;
  height: 600px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dark .tv-wrapper {
  background-color: #1f2937;
  border-color: #374151;
}

/* 分子结构视图 */
.tv-mol-container {
  width: 55%;
  position: relative;
  background-color: #f8fafc;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

.dark .tv-mol-container {
  background-color: #111827;
  border-color: #374151;
}

/* 覆盖在分子图上的 D3 交互层 */
.tv-mol-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 让鼠标事件穿透到下层 SVG */
  z-index: 10;
}

/* 信息面板 */
.tv-info-panel {
  width: 45%;
  padding: 24px;
  overflow-y: auto;
  background-color: #ffffff;
}

.dark .tv-info-panel {
  background-color: #1f2937;
  color: #f3f4f6;
}

/* 序列流容器 */
.tv-seq-wrapper {
  height: 240px; /* 增加高度以容纳弧线 */
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

.dark .tv-seq-wrapper {
  background-color: #1f2937;
  border-color: #374151;
}

/* Token 节点样式 */
.tv-token text {
  font-family: monospace;
  font-weight: 500;
  font-size: 15px;
  fill: #374151;
  pointer-events: none;
  transition: all 0.2s;
}

.dark .tv-token text {
  fill: #e5e7eb;
}

.tv-token rect {
  fill: transparent;
  transition: all 0.2s;
  cursor: pointer;
}

/* 交互高亮状态 */
.tv-token.active rect {
  fill: rgba(79, 70, 229, 0.15);
  stroke: #4f46e5;
  stroke-width: 1px;
}

.tv-token.active text {
  fill: #4f46e5;
  font-weight: 800;
  font-size: 18px;
}

.dark .tv-token.active text {
  fill: #818cf8;
}

/* 注意力连线 (Structure) */
.structure-attention-line {
  fill: none;
  stroke-linecap: round;
  animation: dash 1s linear infinite; /* 可选：流动效果 */
}

/* 注意力连线 (Sequence) */
.sequence-attention-line {
  fill: none;
  stroke-linecap: round;
  mix-blend-mode: multiply;
}

.dark .sequence-attention-line {
  mix-blend-mode: screen;
}

/* 原子高亮光圈 */
.atom-halo {
  fill: rgba(239, 68, 68, 0.2);
  stroke: #ef4444;
  stroke-width: 2px;
  pointer-events: none;
}

/* 锁定状态提示 */
.tv-locked-indicator {
  color: #ef4444;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
/* 添加到 style_docs.css */
[data-viz-type] {
  min-height: 300px; /* 预留高度防止页面跳动 */
  transition: opacity 0.5s ease-in;
}
.viz-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

/* --- cnn-viz.css --- */
.cnn-viz-wrapper {
  --cv-bg: #ffffff;
  --cv-bg-panel: #f9fafb;
  --cv-text: #1f2937;
  --cv-sub-text: #6b7280;
  --cv-border: #e5e7eb;
  --cv-accent: #3b82f6;
  --cv-accent-light: #eff6ff;
  --cv-hover: #f8fafc;
  --cv-highlight: rgba(59, 130, 246, 0.1); /* 选中高亮色 */

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.cnn-viz-wrapper * {
  box-sizing: inherit;
}

/* 主容器 */
.cnn-viz-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  height: 620px;
  background: var(--cv-bg);
  border: 1px solid var(--cv-border);
  border-radius: 12px;
  padding: 16px;
  overflow: hidden;
}

/* --- 左侧面板 --- */
.cnn-viz-panel-left {
  width: 420px; /* 稍微加宽以容纳大图 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cnn-viz-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cnn-viz-title {
  font-weight: 700;
  color: var(--cv-text);
  font-size: 15px;
}
.cnn-viz-subtitle {
  font-size: 12px;
  color: var(--cv-sub-text);
  font-family: monospace;
}

/* 核心对齐区域：分子容器 */
.cnn-viz-mol-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  cursor: crosshair; /* 十字准星，提示可探针交互 */
}

/* 强制 SVG 撑满且无间隙 */
.cnn-viz-svg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cnn-viz-svg-layer svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Canvas 层 */
.cnn-viz-heatmap-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  mix-blend-mode: multiply;
  pointer-events: none;
  display: block;
}

.cnn-viz-crop-indicator {
  position: absolute;
  border: 2px solid var(--cv-accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
  display: none;
  z-index: 3;
  pointer-events: none;
  border-radius: 4px;
}

/* 控制栏 (滑块) */
.cnn-viz-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.cnn-viz-desc-box {
  flex: 1;
  background: var(--cv-bg-panel);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cv-text);
  border: 1px solid var(--cv-border);
  display: flex;
  align-items: center;
}

/* --- 右侧面板 --- */
.cnn-viz-panel-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cnn-viz-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--cv-border);
  padding-bottom: 4px;
}
.cnn-viz-tab-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cv-sub-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.cnn-viz-tab-btn:hover {
  background: var(--cv-hover);
  color: var(--cv-text);
}
.cnn-viz-tab-btn.active {
  background: var(--cv-accent-light);
  color: var(--cv-accent);
}

/* 网格列表 (2列) */
.cnn-viz-filter-list {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-right: 4px;
}
.cnn-viz-filter-list::-webkit-scrollbar {
  width: 6px;
}
.cnn-viz-filter-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

/* 卡片 */
.cnn-viz-filter-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-bg);
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
}
.cnn-viz-filter-item:hover {
  border-color: var(--cv-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cnn-viz-filter-item.selected {
  border-color: var(--cv-accent);
  background: var(--cv-accent-light);
  box-shadow: 0 0 0 2px var(--cv-accent-light);
}

.cnn-viz-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  background: #fff;
  border-bottom: 1px solid var(--cv-border);
  padding: 10px;
}
.cnn-viz-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.cnn-viz-item-info {
  padding: 10px;
  background: var(--cv-bg-panel);
  flex: 1;
}
.cnn-viz-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.cnn-viz-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--cv-text);
}
.cnn-viz-item-score {
  font-size: 11px;
  font-family: monospace;
  color: var(--cv-sub-text);
}
.cnn-viz-progress-bg {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}
.cnn-viz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--cv-accent), #60a5fa);
}

.dag-viz-root .dag-node {
  --dag-source-color: #ef4444;
  --dag-target-color: #10b981;
  --dag-source-glow: rgba(239, 68, 68, 0.45);
  --dag-target-glow: rgba(16, 185, 129, 0.4);
}

.dag-viz-root .dag-node .dag-atom-active-source {
  stroke: var(--dag-source-color) !important;
  stroke-width: 3.2px !important;
  stroke-opacity: 0.95;
  paint-order: stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px var(--dag-source-glow));
}

.dag-viz-root .dag-node .dag-atom-active-target {
  stroke: var(--dag-target-color) !important;
  stroke-width: 2.8px !important;
  stroke-opacity: 0.92;
  paint-order: stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px var(--dag-target-glow));
}

.dag-viz-root {
  display: flex;
  flex-direction: column;
  height: 650px;
  border: 1px solid var(--dag-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--dag-bg);
  position: relative;
  outline: none;
}

.dag-viz-header {
  padding: 10px 15px;
  border-bottom: 1px solid var(--dag-border);
  background: var(--dag-bg-panel);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dag-viz-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--dag-text);
}

.dag-viz-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.dag-viz-btn {
  font-size: 11px;
  padding: 4px 10px;
  height: auto;
  cursor: pointer;
}

.dag-yield-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--dag-subtext);
}

.dag-yield-filter input[type="range"] {
  width: 140px;
}

.dag-yield-value {
  font-weight: 700;
  color: var(--dag-text);
  min-width: 32px;
  text-align: right;
}

.dag-viz-subheader {
  padding: 8px 15px;
  border-bottom: 1px solid var(--dag-border);
  background: var(--dag-bg-panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dag-viz-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dag-viz-legend-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--dag-subtext);
}

.dag-viz-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--dag-text);
}

.dag-viz-legend-color {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.dag-viz-legend-cleavage {
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--dag-border);
}

.dag-viz-legend-cleavage-line {
  width: 14px;
  height: 0;
  border-top: 2px dashed #9ca3af;
}

.dag-viz-edge-count {
  font-size: 11px;
  color: var(--dag-subtext);
}

.dag-viz-main {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.dag-viz-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.dag-viz-canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.dag-viz-drawer {
  width: 0;
  border-left: 1px solid var(--dag-border);
  background: var(--dag-bg-panel);
  transition: width 0.25s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dag-viz-drawer-inner {
  padding: 20px;
  width: 320px;
  box-sizing: border-box;
}

.dag-viz-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.dag-viz-drawer-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--dag-text);
}

.dag-viz-drawer-close {
  background: none;
  border: none;
  color: var(--dag-subtext);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.dag-viz-drawer-content {
  font-size: 12px;
  color: var(--dag-text);
}

.dag-viz-root .dag-mol-svg {
  overflow: visible;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.dag-viz-root .dag-mol-svg *[class*="bond-"] {
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ====== Excerpted from interactive.js ====== */

.feat-viz-container { display: flex; height: 520px; gap: 16px; width: 100%; }

.feat-viz-left { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; position: relative; overflow: hidden; cursor: crosshair; }

.feat-viz-right { flex: 1.2; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.feat-info-panel { height: 110px; flex-shrink: 0; overflow-y: auto; transition: all 0.3s; }

.feat-scroll-container { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0; }

.feat-row { scroll-margin-top: 50px; }

.feat-grid { grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); }