/* :root Variables - 全局设计变量 */
:root {
  --primary-color: #007aff;
  --primary-rgb: 0, 122, 255;
  --secondary-color: #5856d6;
  --accent-color: #ff9500;
  --accent-color-rgb: 255, 149, 0;
  --success-color: #34c759;
  --error-color: #ff3b30;
  --info-color: #5ac8fa;
  --transition-duration: 300ms;
  --border-radius: 16px;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* Opacity Variables - Added for customization */
  --background-opacity: 1.0;
  --card-opacity: 0.7;
  --navbar-opacity: 1.0;
  --success-color-rgb: 52, 199, 89;
  
  /* 2025设计：苹果灵动岛风格动画曲线 */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* --- Light Theme - 白天模式 --- */
body[data-theme="light"] {
  --bg-color-rgb: 247, 247, 249;
  --card-background-rgb: 255, 255, 255;
  --text-color: #1d1d1f;
  --text-secondary: #6e6e73;
  --border-color: rgba(0, 0, 0, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.05);
  --shadow-color-hover: rgba(0, 0, 0, 0.15);
  --glow-color: rgba(var(--primary-rgb), 0.2);
  --tag-bg-color: rgba(0, 0, 0, 0.05);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dark Theme - 黑夜模式 --- */
body[data-theme="dark"] {
  --bg-color-rgb: 22, 22, 24;
  --card-background-rgb: 29, 29, 31;
  --text-color: #f5f5f7;
  --text-secondary: #86868b;
  --border-color: rgba(255, 255, 255, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.2);
  --shadow-color-hover: rgba(0, 0, 0, 0.4);
  --glow-color: rgba(var(--primary-rgb), 0.3);
  --tag-bg-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- General Styles & Transitions --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

/* [重构] 主题过渡期间的特殊处理 */
html.theme-transitioning,
html.theme-transitioning * {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 确保文字在过渡期间保持可见 */
html.theme-transitioning body,
html.theme-transitioning .text-primary,
html.theme-transitioning .text-secondary,
html.theme-transitioning h1,
html.theme-transitioning h2,
html.theme-transitioning h3,
html.theme-transitioning p,
html.theme-transitioning span,
html.theme-transitioning div,
html.theme-transitioning button,
html.theme-transitioning a {
  color: inherit !important;
  opacity: 1 !important;
  will-change: color, background-color;
}

html,
body {
  height: 100vh;
  width: 100vw;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: transparent;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 更新 body#app-body 样式，使其成为一个透明的圆角容器 */
body#app-body {
  display: flex;
  position: relative;
  /* 为伪元素定位提供上下文 */
  border-radius: 16px;
  background: transparent;
  /* 自身保持透明 */
  transition: color var(--transition-duration) ease;
  overflow: hidden; /* 确保内容不会超出圆角 */
}

/* 新增伪元素，用于绘制背景和毛玻璃效果 */
body#app-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--bg-color-rgb), var(--background-opacity));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: -2;
  /* 确保它在所有内容甚至背景图层之后 */
  transition: background-color var(--transition-duration) ease;
  border-radius: 16px; /* 匹配外层圆角 */
  overflow: hidden; /* 确保内容不超出圆角 */
}

/* --- Custom Background Layer --- */
#background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  /* z-index -1 会让它显示在伪元素之上，内容之下 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease-in-out;
}


button,
.card,
.nav-btn,
.window-control-btn,
.category-card,
.subcategory-card,
.tool-card {
  transition: all var(--transition-duration) cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* [重构] 主题切换期间的特殊处理 */
html.theme-transitioning button,
html.theme-transitioning .card,
html.theme-transitioning .nav-btn,
html.theme-transitioning .window-control-btn,
html.theme-transitioning .category-card,
html.theme-transitioning .subcategory-card,
html.theme-transitioning .tool-card {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- Enhanced Typography & Gradient Text --- */
h1,
h2,
h3 {
  letter-spacing: -0.01em;
  font-weight: 700;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* [重构] 主题切换期间确保文字可见 */
html.theme-transitioning h1,
html.theme-transitioning h2,
html.theme-transitioning h3,
html.theme-transitioning p,
html.theme-transitioning span,
html.theme-transitioning div,
html.theme-transitioning label {
  color: inherit !important;
  opacity: 1 !important;
  will-change: color;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 22px;
}

p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.category-card:hover h2,
.tool-card:hover h2 {
  color: var(--primary-color);
}


/* Page Transition */
@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Splash Screen */
.splash-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgba(var(--bg-color-rgb), 1);
}

.splash-logo {
  font-size: 50px;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.splash-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}

.splash-progress-container {
  width: 80%;
  max-width: 300px;
  height: 8px;
  background-color: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
}

.splash-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transition: width 0.4s ease;
}

.splash-status {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Main Layout, Navbar, Title Bar */
.navbar {
  width: 70px;
  background-color: rgba(var(--card-background-rgb), var(--navbar-opacity));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  border-right: 1px solid var(--border-color);
  z-index: 10;
  flex-shrink: 0;
  transition: background-color var(--transition-duration) ease;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: transparent;
  border-radius: 16px;
  overflow: hidden; /* 确保内容不超出圆角 */
}

.nav-spacer {
  flex-grow: 1;
}

.title-bar {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 10px;
  -webkit-app-region: drag;
  z-index: 5;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.window-controls {
  display: flex;
  -webkit-app-region: no-drag;
}

.window-control-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 8px;
}

.window-control-btn:hover {
  background-color: var(--border-color);
}

#close-btn:hover,
#close-btn-offline:hover {
  background-color: var(--error-color);
  color: white;
}

.network-status {
  font-size: 18px;
  margin-bottom: 8px;
}

.network-status.online {
  color: var(--success-color);
}

.network-status.offline {
  color: var(--error-color);
}

.network-speed {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}

.content-area {
  flex: 1;
  padding: 40px;
  /* [修复 1] 移除页面滚动条，强制内容在 flex 容器内 */
  overflow-y: hidden;
  /* [修复 1] 确保 flex 布局高度计算正确 */
  min-height: 0;
  border-radius: 0 0 16px 16px; /* 底部圆角 */
}

.page-container {
  width: 100%;
  height: 100%;
}


/* --- Enhanced Button Styles & Ripple Effect --- */
.action-btn,
.control-btn,
.back-btn,
.update-button,
.view-subcategory-btn,
.page-btn {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}

.action-btn:hover:not(:disabled),
.control-btn:hover:not(:disabled),
.back-btn:hover,
.update-button:hover:not(:disabled),
.view-subcategory-btn:hover,
.page-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--shadow-color-hover);
}

.action-btn:active:not(:disabled),
.control-btn:active:not(:disabled),
.back-btn:active,
.update-button:active:not(:disabled),
.view-subcategory-btn:active,
.page-btn:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 10px var(--shadow-color-hover);
  transition-duration: 0.1s;
}

.action-btn.mini-btn {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 12px;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 600ms linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


/* Nav Button Style */
.nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.nav-btn:hover:not(.active) {
  background-color: var(--border-color);
  color: var(--primary-color);
  transform: scale(1.1);
}

.nav-btn.active {
  color: white;
  transform: scale(1);
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  animation: gradient-spin 5s linear infinite;
  background-size: 200% 200%;
  box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.4);
}

@keyframes gradient-spin {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.nav-btn.active:hover {
  filter: brightness(1.2);
}

/* All Cards Style with Glow Effect */
.category-card,
.subcategory-card,
.tool-card,
.announcement-card,
.changelog-card,
.settings-section,
.welcome-card,
.dashboard-card {
  /* dashboard-card inherits base styles */
  background-color: rgba(var(--card-background-rgb), var(--card-opacity));
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px var(--shadow-color);
  transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease, border-color var(--transition-duration) ease, background-color var(--transition-duration) ease;
}

.category-card:hover,
.subcategory-card:hover,
.tool-card:hover:not(.disabled),
.welcome-card:hover,
.dashboard-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 25px var(--shadow-color-hover), 0 0 25px var(--glow-color);
  border-color: rgba(var(--primary-rgb), 0.4);
}

.category-card,
.subcategory-card,
.welcome-card,
.welcome-header,
.dashboard-card {
  opacity: 0;
  /* for entrance animation */
}

/* Category & Subcategory Card Specifics */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.category-card {
  padding: 24px;
  text-align: center;
}

.category-icon {
  font-size: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  color: white;
  transition: transform var(--transition-duration) ease;
}

.category-card:hover .category-icon {
  transform: rotate(15deg) scale(1.1);
}

.subcategory-page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 10px;
  align-content: start;
}

.subcategory-grid::-webkit-scrollbar {
  display: none;
}

.subcategory-grid {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.subcategory-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.subcategory-thumbnail {
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.subcategory-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.subcategory-card:hover .subcategory-thumbnail img {
  transform: scale(1.05);
}

.subcategory-content {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.subcategory-content h3 {
  margin-bottom: 8px;
}

.subcategory-content p {
  flex-grow: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 14px;
}

.view-subcategory-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: transparent;
  border: none;
  border-top: 1px solid var(--border-color);
  color: var(--primary-color);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* Media Viewer Layout */
.media-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: contentFadeIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.media-viewer .section-header,
.media-viewer .media-controls {
  flex-shrink: 0;
}

.media-viewer .media-controls {
  margin-top: 20px;
}

.media-container {
  width: 100%;
  background-color: #000;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  flex-grow: 1;
  min-height: 0;
  transition: background-image 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.media-content,
.media-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-content img,
.media-content video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.media-loading {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  flex-direction: column;
  gap: 15px;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.media-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

.media-progress-container {
  width: 80%;
  max-width: 300px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.media-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--primary-color);
  border-radius: 3px;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 全局加载动画容器 */
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  gap: 20px;
}

/* 加载GIF动图样式 */
.loading-gif {
  max-width: 300px;
  width: 40vw;
  min-width: 150px;
  height: auto;
  object-fit: contain;
}

/* 加载动画下方的文字 */
.loading-text {
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 600;
  animation: contentFadeIn 0.5s;
}

/* 针对缩略图的加载动画覆盖层 */
.loading-spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--card-background-rgb), 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* 确保覆盖层不影响鼠标事件 */
}

.loading-spinner-overlay .loading-gif {
  width: 50px;
  height: 50px;
  min-width: auto;
}

/* Button Base Styles */
.action-btn,
.control-btn,
.back-btn {
  border-radius: var(--border-radius);
  padding: 10px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  border: none;
}

.action-btn {
  background-color: var(--primary-color);
  color: white;
}

.action-btn.error-btn {
  background-color: var(--error-color);
}

.control-btn,
.back-btn {
  background-color: var(--card-background);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.control-btn:hover,
.back-btn:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  gap: 15px;
  flex-shrink: 0;
}

/* 新的设置页面主容器 */
/* 更新style.css中的设置页面样式 */
.settings-page-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .settings-page-container {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    width: 100%;
    margin-bottom: 20px;
  }
}

.settings-nav-group {
  margin-bottom: 30px;
}

.settings-nav-group-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-left: 15px;
}

.settings-search {
  padding: 10px 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--card-background);
  color: var(--text-color);
  width: 100%;
  box-sizing: border-box;
}

.settings-content {
  background-color: var(--card-background);
  border-radius: var(--border-radius);
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

.setting-item {
  margin-bottom: 24px;
  animation: fadeIn 0.3s ease;
}

.setting-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.setting-item-title {
  font-weight: 600;
  font-size: 16px;
}

.setting-item-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 12px;
  max-width: 80%;
}

/* 左侧导航按钮 */
.settings-nav-item {
  width: 100%;
  padding: 12px 15px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.settings-nav-item:hover:not(.active) {
  background-color: rgba(var(--text-color), 0.04);
  color: var(--text-color);
  transform: translateX(2px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-nav-item.active {
  background-color: var(--primary-color);
  color: white;
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
}

/* 右侧内容区 */
.settings-content {
  flex-grow: 1;
  overflow-y: auto;
  /* 只让右侧内容区滚动 */
  height: 100%;
}

/* 右侧的每个独立面板 */
.settings-panel {
  display: none;
  /* 默认隐藏 */
  animation: contentFadeIn 0.4s forwards;
}

.settings-panel.active {
  display: block;
  /* 点击导航后显示 */
}

.settings-panel .settings-section:not(:last-child) {
  margin-bottom: 20px;
}

.settings-panel .info-grid {
  grid-template-columns: 150px 1fr;
}

.settings-panel .info-grid.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border-bottom: none;
  padding: 10px 0;
}

.settings-panel .info-grid.horizontal .info-item {
  display: flex;
  flex-direction: column;
  background-color: var(--border-color);
  padding: 10px 15px;
  border-radius: 8px;
  flex-basis: 200px;
  flex-grow: 1;
}

.settings-panel .info-grid.horizontal .info-label {
  font-size: 13px;
}

.settings-panel .info-grid.horizontal .info-value {
  font-size: 16px;
  font-weight: 600;
}

/* 左下角的状态监控面板 */
#settings-status-panel {
  padding: 15px;
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
}

.status-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 15px;
  text-align: center;
}

.settings-section {
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.settings-section h2 {
  margin-bottom: 20px;
  flex-shrink: 0;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.info-row span:first-child {
  color: var(--text-secondary);
  font-weight: 500;
  margin-right: 15px;
}

.settings-section>*:last-child {
  border-bottom: none;
}

.about-buttons {
  display: flex;
  gap: 15px;
  margin-top: auto;
  padding-top: 15px;
}

.about-buttons .control-btn {
  flex: 1;
}

/* --- Collapsible Styles --- */
.collapsible-trigger {
  cursor: pointer;
}

.collapsible-trigger .icon-toggle {
  display: inline-block;
  margin-left: 10px;
  transition: transform var(--transition-duration) ease;
}

.collapsible-trigger .icon-toggle::before {
  content: '\f078';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.collapsible-trigger.expanded .icon-toggle {
  transform: rotate(-180deg);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out;
  padding-left: 15px;
  border-top: 1px solid transparent;
}

.collapsible-content.expanded {
  max-height: 200px;
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
}

.collapsible-content .settings-row {
  border-bottom: none;
  padding: 8px 0;
}

.collapsible-content .settings-row:first-child {
  padding-top: 12px;
}

/* Opacity Controls */
.opacity-control {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.opacity-control input[type="range"] {
  flex: 1;
  transition: opacity 0.2s ease;
}

.opacity-control input[type="range"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.background-controls button {
  pointer-events: all;
}

/* Stats Card */
.stats-display {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin: auto 0;
}

.stats-label {
  text-align: center;
  color: var(--text-secondary);
}

/* Theme Switch */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: var(--transition-duration);
  border-radius: 30px;
  display: flex;
  align-items: center;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: var(--transition-duration);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider:before {
  transform: translateX(26px);
}

input:checked+.slider {
  background-color: var(--primary-color);
}

.slider::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  position: absolute;
  transition: all var(--transition-duration) ease;
}

body[data-theme="light"] .slider::after {
  content: '\f185';
  color: #f39c12;
  right: 8px;
}

body[data-theme="dark"] .slider::after {
  content: '\f186';
  color: #f1c40f;
  left: 8px;
}

/* Update Management Card (Internal Scroll) */
.update-section-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}

#update-check-wrapper {
  text-align: center;
  padding-bottom: 20px;
  flex-shrink: 0;
}

#update-button {
  position: relative;
  width: 150px;
  height: 44px;
  border: none;
  border-radius: 22px;
  background-color: var(--primary-color);
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
}

#update-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

#update-button.checking .scan-bar {
  display: block;
  animation: scan 1.5s ease-in-out infinite;
}

.scan-bar {
  display: none;
  position: absolute;
  top: 0;
  left: -50px;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
}

@keyframes scan {
  from {
    left: -50px;
  }

  to {
    left: 160px;
  }
}

#update-info-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 10px;
  min-height: 0;
}

#update-info p.accent {
  color: var(--accent-color);
  font-weight: 600;
}

#update-info p.success {
  color: var(--success-color);
  font-weight: 600;
}

#update-info p.error {
  color: var(--error-color);
  font-weight: 600;
}

.update-notes-container {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 15px;
  margin: 15px 0;
  background-color: rgba(var(--bg-color-rgb), 0.5);
}

.update-notes-list {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.update-note-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
}

.note-key {
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
}

.note-value {
  text-align: left;
}

.update-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: center;
}

/* New Update Download UI */
.update-download-ui {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
}

.update-download-ui .version-tag {
  font-size: 16px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.update-download-ui .status-text {
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.download-progress-bar-container {
  width: 100%;
  height: 10px;
  background-color: var(--border-color);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.download-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transition: width 0.3s ease;
}

.download-controls {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 15px;
}


/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
}

.toast-notification {
  min-width: 280px;
  max-width: 350px;
  background-color: rgba(var(--card-background-rgb), 0.8);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  color: var(--text-color);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 15px var(--shadow-color);
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-color);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1),
    opacity 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.toast-notification.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-notification .icon {
  font-size: 20px;
}

.toast-notification.success .icon {
  color: var(--success-color);
}

.toast-notification.error .icon {
  color: var(--error-color);
}

.toast-notification.info .icon {
  color: var(--info-color);
}

.toast-notification .content h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--text-color);
}

.toast-notification .content p,
.toast-notification .content div {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-secondary);
}

/* --- Welcome Page / Dashboard Styles (Re-architected for Full Height) --- */
.welcome-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  /* 核心：让仪表盘容器撑满父元素高度 */
}

.welcome-dashboard .welcome-header {
  text-align: left;
  flex-shrink: 0;
  /* 不允许头部被压缩 */
}

.welcome-dashboard .announcement-card {
  flex-shrink: 0;
  /* 不允许公告卡片被压缩 */
}

.welcome-dashboard .welcome-header p {
  font-size: 16px;
  margin-top: 5px;
}

/* -- Grid Layout: 占据剩余所有空间 -- */
.dashboard-grid {
  flex-grow: 1;
  min-height: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
}

@media (max-width: 1024px) {

  /* 当屏幕宽度小于 1024px 时 */
  .dashboard-grid {
    /* 1. 变为单列布局 */
    grid-template-columns: 1fr;
    /* 2. 定义三行：系统概览(auto), 快捷启动(auto), 更新日志(1fr 占满剩余) */
    grid-template-rows: auto auto 1fr;
  }

  /* 确保更新日志卡片在单列时仍然横跨 (虽然默认就是 1fr，但显式声明更安全) */
  .dashboard-grid .changelog-card {
    grid-column: 1 / -1;
  }
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 确保卡片本身不会出现滚动条 */
}

.dashboard-card .card-content {
  padding: 15px 20px;
  /* 减小内边距，为版本卡片争取空间 */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 减小间距 */
}

.dashboard-card .info-row.compact {
  padding: 4px 0;
  border: none;
}

/* -- 让版本更新卡片横跨两列 -- */
.dashboard-grid .changelog-card {
  grid-column: 1 / -1;
  /* 横跨所有列 */
  min-height: 0;
  /* flex容器内的子项需要这个来正确计算高度 */
}

/* -- 使版本更新列表内部可以滚动 -- */
.dashboard-card .changelog-list {
  flex-grow: 1;
  /* 占据卡片内所有可用垂直空间 */
  overflow-y: auto;
  /* 内容超出时显示滚动条 */
  min-height: 0;
  /* 配合flex-grow，确保正确的高度约束 */
  padding: 0 20px 20px;
  margin-right: -10px;
  /* 优化滚动条视觉效果 */
  padding-right: 10px;
}

/* -- System Overview Card -- */
.system-overview-card .info-row span:first-child {
  color: var(--text-color);
}

/* -- Quick Launch Card -- */
.quick-launch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 100%;
}

.quick-launch-btn {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--border-radius);
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease-in-out;
}

.quick-launch-btn i {
  font-size: 22px;
  color: var(--text-color);
  transition: color 0.2s ease-in-out;
}

.quick-launch-btn:hover {
  background-color: var(--border-color);
  color: var(--text-color);
  border-color: var(--primary-color);
}

.quick-launch-btn:hover i {
  color: var(--primary-color);
}

.welcome-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.welcome-card-header h2,
.welcome-card-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.announcement-content {
  padding: 24px;
}

.latest-tag {
  background-color: var(--success-color);
  color: white;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
}

.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.changelog-item {
  display: block;
  /* 移除 grid 布局 */
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.changelog-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.changelog-key {
  font-weight: 600;
  color: var(--text-secondary);
  text-align: left;
  /* 变为左对齐 */
  font-size: 14px;
  background-color: var(--tag-bg-color);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  /* 变为标签样式 */
  margin-bottom: 12px;
  /* 与下方内容拉开距离 */
}

/* --- [修复 2] 更新日志内容自适应换行 --- */
.changelog-value {
  font-size: 15px;
  color: var(--text-color);
  white-space: normal;
  /* 允许自动换行 */
  word-wrap: break-word;
  /* 强制长单词断开 */
  line-height: 1.6;
}

/* [修复 2] 确保 <br> 和 <b> 标签在日志中样式正确 */
.changelog-value br {
  display: block;
  content: "";
  margin-top: 8px;
}

.changelog-value b,
.changelog-value strong {
  color: var(--primary-color);
  font-weight: 600;
}

.version-display {
  position: fixed;
  bottom: 10px;
  right: 15px;
  font-size: 12px;
  color: var(--text-secondary);
  background-color: rgba(var(--card-background-rgb), var(--card-opacity));
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  z-index: 100;
}


/* Toolbox */
.toolbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  /* margin-top: 40px; <-- 删除这一行 */
  justify-content: start;
  align-content: start;
}

.tool-card {
  padding: 24px;
  text-align: center;
  cursor: pointer;
}

.tool-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(80%);
}

.tool-card.disabled:hover {
  transform: none;
  box-shadow: 0 4px 15px var(--shadow-color);
  border-color: var(--border-color);
}

.tool-icon {
  font-size: 32px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  color: white;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tool-card:hover .tool-icon {
  transform: rotate(15deg) scale(1.1);
}

.tool-card h2 {
  margin-bottom: 8px;
}

/* Pagination */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  flex-shrink: 0;
}

.page-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--card-background);
  color: var(--text-color);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.page-btn:hover:not(:disabled) {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.page-btn.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Media Viewer & Volume */
.media-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.media-status-text {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 14px;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  outline: none;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--text-color);
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid var(--card-background);
  transition: background-color 0.2s ease;
}

#volume-slider::-webkit-slider-thumb:hover {
  background: var(--primary-color);
}

#volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--text-color);
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid var(--card-background);
}

/* Navigation Header */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  gap: 15px;
}

.section-header .back-btn {
  flex-shrink: 0;
}

.section-header h1 {
  flex-grow: 1;
  text-align: center;
  margin: 0;
  padding: 0 15px;
}

/* Logs Page Specifics */
.logs-header {
  justify-content: flex-start;
}

.logs-header h1 {
  text-align: left;
  flex-grow: 0;
  margin: 0;
}

.logs-header::after {
  display: none;
}

.logs-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.log-entry:last-child {
  border-bottom: none;
}

.log-timestamp {
  color: var(--text-secondary);
  font-family: monospace;
  font-size: 13px;
}

.log-tag {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--tag-bg-color);
}

.log-category-system {
  color: var(--info-color);
}

.log-category-navigation {
  color: var(--accent-color);
}

.log-category-ui {
  color: var(--secondary-color);
}

.log-category-media {
  color: #f51871;
}

.log-category-update {
  color: var(--success-color);
}

.log-category-settings {
  color: #a25aff;
}

.log-category-general {
  color: var(--text-secondary);
}

.log-category-error {
  color: var(--error-color);
}

.log-action {
  flex: 1;
  color: var(--text-color);
  word-break: break-all;
  white-space: pre-wrap;
}

.log-category-tool {
  color: #8e44ad;
  /* 紫色，代表工具 */
}

.log-category-sub {
  background-color: var(--border-color);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.empty-logs-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.empty-logs-placeholder i {
  font-size: 40px;
  margin-bottom: 20px;
}

.empty-logs-placeholder p {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.empty-logs-placeholder span {
  font-size: 13px;
  margin-top: 5px;
}

/* Offline Mode */
.offline-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(-45deg, #131313, #2c3e50, #34495e, #131313);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.title-bar-offline {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 10px;
  -webkit-app-region: drag;
}

.offline-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  z-index: 2;
}

.offline-icon {
  font-size: 60px;
  color: var(--primary-color);
  margin-bottom: 30px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

.offline-content h1 {
  font-size: 32px;
  color: white;
  margin-bottom: 15px;
}

.offline-content p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 450px;
}

.offline-content .error-message {
  font-size: 12px;
  margin-top: 10px;
  color: var(--error-color);
}

.offline-content #relaunch-btn {
  margin-top: 30px;
}

.background-shapes .shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.1);
  animation: pulse 7s infinite ease-in-out;
}

.shape1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 5%;
}

.shape2 {
  width: 100px;
  height: 100px;
  bottom: 15%;
  right: 10%;
  animation-delay: 2s;
}

.shape3 {
  width: 150px;
  height: 150px;
  top: 50%;
  right: 40%;
  animation-delay: 4s;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0.9);
  }
}

/* IP Query Tool Specific Styles */
.ip-input-group {
  display: flex;
  gap: 10px;
}

.ip-input-group input {
  flex-grow: 1;
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: rgba(var(--card-background-rgb), 0.5);
  color: var(--text-color);
}

.ip-results-container {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 24px;
  background-color: rgba(var(--card-background-rgb), var(--card-opacity));
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.ip-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  width: 100%;
}

.ip-result-category {
  padding-left: 15px;
  border-left: 3px solid var(--primary-color);
}

.ip-result-category h3 {
  margin-bottom: 10px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ip-result-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
}

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

.ip-result-key {
  color: var(--text-secondary);
  font-weight: 500;
}

.ip-result-value {
  color: var(--text-color);
  font-weight: 600;
  text-align: right;
}

.privacy-warning {
  font-size: 12px;
  color: var(--accent-color);
  margin-top: 15px;
  padding: 10px;
  border-radius: 8px;
  background-color: rgba(var(--accent-color-rgb, 255, 149, 0), 0.1);
  border: 1px solid rgba(var(--accent-color-rgb, 255, 149, 0), 0.2);
}

.error-message {
  color: var(--error-color);
}

/* IP Query Tool - Comparison Table Styles */
.ip-comparison-container {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.ip-comparison-container h3 {
  margin-bottom: 15px;
  font-size: 18px;
}

.ip-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ip-comparison-table th,
.ip-comparison-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.ip-comparison-table th {
  color: var(--text-secondary);
  font-weight: 600;
}

.ip-comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.ip-comparison-table td.inconsistent {
  color: var(--error-color);
  font-weight: 700;
}

.ip-comparison-table td.consistent {
  color: var(--text-color);
}

.comparison-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 10px;
  text-align: right;
}

/* --- 系统信息工具样式 --- */
.sys-info-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 20px;
}

.sys-info-tab {
  padding: 12px 20px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.sys-info-tab::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.sys-info-tab:hover {
  color: var(--text-color);
}

.sys-info-tab.active {
  color: var(--primary-color);
}

.sys-info-tab.active::after {
  transform: scaleX(1);
}

.sys-info-content-container {
  padding: 10px;
}

.sys-info-content {
  display: none;
  animation: contentFadeIn 0.5s forwards;
}

.sys-info-content.active {
  display: block;
}

.info-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--border-color);
  padding: 15px 10px;
  font-size: 15px;
}

.info-grid:last-child {
  border-bottom: none;
}

.info-item {
  display: contents;
  /* 让子元素直接参与 grid 布局 */
}

.info-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.info-value {
  word-break: break-all;
  color: var(--text-color);
}

.memory-bar-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.memory-bar {
  height: 12px;
  flex-grow: 1;
  background-color: var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.memory-bar>div {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 6px;
  transition: width 0.5s ease-out;
}

.network-card {
  background-color: rgba(var(--card-background-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 15px;
}

.network-card h3 {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.info-grid.compact {
  padding: 8px 0;
  grid-template-columns: 100px 1fr;
  border-bottom: 1px dashed var(--border-color);
}

.info-grid.compact:last-child {
  border-bottom: none;
}

/* IP Query Tool - Card Wrapper */
.ip-results-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.ip-results-wrapper .settings-section {
  margin-bottom: 0;
}

.ip-results-wrapper .info-grid {
  grid-template-columns: 120px 1fr;
  padding-left: 0;
  padding-right: 0;
}

/* --- 系统信息工具样式 --- */
.sys-info-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 20px;
}

.sys-info-tab {
  padding: 12px 20px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.sys-info-tab::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.sys-info-tab:hover {
  color: var(--text-color);
}

.sys-info-tab.active {
  color: var(--primary-color);
}

.sys-info-tab.active::after {
  transform: scaleX(1);
}

.sys-info-content-container {
  padding: 10px;
}

.sys-info-content {
  display: none;
  animation: contentFadeIn 0.5s forwards;
}

.sys-info-content.active {
  display: block;
}

.info-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--border-color);
  padding: 15px 10px;
  font-size: 15px;
}

.info-grid:last-child {
  border-bottom: none;
}

.info-item {
  display: contents;
}

.info-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.info-value {
  word-break: break-all;
  color: var(--text-color);
}

.memory-bar-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.memory-bar {
  height: 12px;
  flex-grow: 1;
  background-color: var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.memory-bar>div {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 6px;
  transition: width 0.5s ease-out;
}

.network-card {
  background-color: rgba(var(--card-background-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 15px;
}

.network-card h3 {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.info-grid.compact {
  padding: 8px 0;
  grid-template-columns: 100px 1fr;
  border-bottom: 1px dashed var(--border-color);
}

.info-grid.compact:last-child {
  border-bottom: none;
}

/* --- 新版设置页面样式 --- */
/* 新的设置页面主容器 */
.settings-page-container {
  display: flex;
  gap: 30px;
  /* 左右两栏的间距 */
  height: 100%;
  padding-right: 10px;
  /* 为右侧内容区预留滚动条空间 */
}

/* 左侧导航栏 */
.settings-nav {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 核心：将状态监控推到底部 */
  height: 100%;
}

/* 左侧导航按钮 */
.settings-nav-item {
  width: 100%;
  padding: 12px 15px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative;
  /* [新增] 使得 z-index 生效 */
  z-index: 2;
  /* [新增] 确保按钮内容在滑块之上 */
}

.settings-nav-item:hover:not(.active) {
  background-color: rgba(var(--text-color), 0.04);
  color: var(--text-color);
  transform: translateX(2px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-nav-item.active {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary-color);
  box-shadow: 
    0 1px 3px rgba(var(--primary-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(var(--primary-rgb), 0.2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  position: relative;
  overflow: visible;
  transform: translateX(4px);
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--primary-color);
  border-radius: 0 2px 2px 0;
  opacity: 0.8;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-nav-item.active > * {
  position: relative;
  z-index: 2;
}

.settings-nav-item.active:hover {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary-color);
  transform: translateX(6px);
}

@keyframes settingsNavPulse {
  0%, 100% { 
    box-shadow: 
      0 8px 24px rgba(var(--primary-rgb), 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset,
      0 4px 12px rgba(var(--primary-rgb), 0.2);
  }
  50% { 
    box-shadow: 
      0 10px 30px rgba(var(--primary-rgb), 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.15) inset,
      0 6px 16px rgba(var(--primary-rgb), 0.3);
  }
}

@keyframes settingsNavShine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.settings-content {
  flex-grow: 1;
  overflow-y: auto;
  /* 只让右侧内容区滚动 */
  height: 100%;
  padding-right: 10px;
}

/* 右侧的每个独立面板 */
.settings-panel {
  display: none;
  /* 默认隐藏 */
  animation: contentFadeIn 0.4s forwards;
}

.settings-panel.active {
  display: block;
  /* 点击导航后显示 */
}

.settings-panel .settings-section:not(:last-child) {
  margin-bottom: 20px;
}

.settings-panel .info-grid {
  grid-template-columns: 150px 1fr;
}

/* --- 追加以下新样式到文件末尾 --- */
.settings-panel .info-grid.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border-bottom: none;
  padding: 10px 0;
}

.settings-panel .info-grid.horizontal .info-item {
  display: flex;
  flex-direction: column;
  background-color: var(--border-color);
  padding: 10px 15px;
  border-radius: 8px;
  flex-basis: 200px;
  flex-grow: 1;
}

.settings-panel .info-grid.horizontal .info-label {
  font-size: 13px;
}

.settings-panel .info-grid.horizontal .info-value {
  font-size: 16px;
  font-weight: 600;
}

/* --- 设置页面实时状态面板 --- */
.settings-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 让状态面板推到底部 */
}

#settings-status-panel {
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: rgba(var(--card-background-rgb), 0.5);
}

.status-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-color);
}

.status-item {
  font-size: 13px;
  margin-bottom: 12px;
}

.status-item:last-child {
  margin-bottom: 0;
}

.status-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--text-color);
}

.status-label span:last-child {
  font-weight: 600;
  color: var(--text-secondary);
}

.status-bar-container {
  width: 100%;
  height: 8px;
  background-color: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.status-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 4px;
  transition: width 0.5s ease-out;
}

/* --- 找到并修改此规则 --- */
.settings-content .settings-grid {
  display: grid;
  /* 修改：使用更具响应性的布局，并限制卡片不会无限拉伸 */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  align-content: start;
  /* 让内容从顶部开始对齐 */
}

/* --- 在文件末尾追加以下新样式 --- */

/* 设置页面左侧导航栏的整体布局调整 */
.settings-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 核心改动：将内容推向两端 */
  height: 100%;
}

/* 实时状态面板样式 */
#settings-status-panel {
  padding: 15px;
  margin-top: 20px;
  /* 与上方按钮的间距 */
  border-top: 1px solid var(--border-color);
}

.status-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 15px;
  text-align: center;
}

.status-item {
  font-size: 13px;
  margin-bottom: 15px;
}

.status-item:last-child {
  margin-bottom: 0;
}

.status-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--text-color);
}

.status-label span:last-child {
  font-weight: 600;
  color: var(--text-secondary);
  font-family: monospace;
}

.status-bar-container {
  width: 100%;
  height: 6px;
  background-color: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.status-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 3px;
  transition: width 0.5s ease-out;
}

.settings-panel .info-grid.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border-bottom: none;
  padding: 10px 0;
}

.settings-panel .info-grid.horizontal .info-item {
  display: flex;
  flex-direction: column;
  background-color: var(--border-color);
  padding: 10px 15px;
  border-radius: 8px;
  flex-basis: 200px;
  flex-grow: 1;
}

.settings-panel .info-grid.horizontal .info-label {
  font-size: 13px;
}

.settings-panel .info-grid.horizontal .info-value {
  font-size: 16px;
  font-weight: 600;
}

/* --- 新增 .toolbox-tabs --- */
.toolbox-tabs {
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /* 防止换行 */
  scrollbar-width: thin;
  /* Firefox */
}

.toolbox-tabs::-webkit-scrollbar {
  height: 4px;
}

.toolbox-tabs::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 2px;
}

/* --- 日志页面UI重构样式 --- */
.log-day-group {
  margin-bottom: 25px;
}

.log-day-group:last-child {
  margin-bottom: 0;
}

.log-date-header {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
  position: sticky;
  top: -10px;
  /* 使其在滚动时能停靠在顶部 */
  background-color: rgba(var(--bg-color-rgb), 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
  padding-left: 15px;
}

.logs-container {
  padding: 10px 20px;
}

.log-entry {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  padding: 15px 10px;
  /* 增加垂直内边距 */
  border-bottom: 1px solid var(--border-color);
  /* 增加底部边框作为分隔符 */
  margin-bottom: 2px;
  /* 增加外边距 */
  border-left: 3px solid transparent;
  transition: border-left-color 0.3s ease, background-color 0.3s ease;
  /* 修正边距，使其与日期标题对齐 */
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
}

.log-entry:hover {
  background-color: rgba(var(--primary-rgb), 0.05);
  border-left-color: var(--primary-color);
}


/* --- 日历 (input[type=date]) 样式美化 --- */
#log-date-picker {
  position: relative;
  background-color: var(--card-background);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.3s ease;
}

#log-date-picker:hover {
  border-color: var(--primary-color);
}

/* 自定义日历图标 */
#log-date-picker::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 7a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1h3a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1zM5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H5zm14 2H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z" fill="currentColor"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  color: var(--text-secondary);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#log-date-picker::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Bili Hot Tool Styles */
.bili-hot-table .rank-cell {
  display: none;
}

/* 移除旧的 title-cell 样式 */
.bili-hot-table .title-cell {
  display: contents;
  /* 或者直接删除此规则 */
}

/* 表格单元格的基础样式 */
.bili-hot-table td {
  padding: 8px 15px;
  /* 调整内边距 */
  vertical-align: middle;
}

/* 每一行热搜内容的容器，使用 Flex 布局 */
.bili-hot-item {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
  gap: 15px;
  /* 项目之间的间距 */
  width: 100%;
}

/* 排名数字的样式 */
.bili-hot-rank {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--text-secondary);
  width: 30px;
  /* 固定宽度，确保对齐 */
  text-align: center;
  flex-shrink: 0;
  /* 防止被压缩 */
}

/* 前三名排名的特殊颜色 */
.bili-hot-rank.rank-top-3 {
  color: var(--error-color);
}

.bili-hot-rank.rank-1 {
  font-size: 1.4em;
  /* 冠军可以更大一些 */
}

/* 热搜标题链接的样式 */
.bili-hot-title {
  flex-grow: 1;
  /* 占据所有剩余空间 */
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.bili-hot-title:hover {
  color: var(--primary-color);
}

/* 热搜图片标签的样式 */
.bili-hot-image {
  height: 22px;
  /* 固定高度 */
  width: auto;
  /* 宽度自适应 */
  max-width: 50px;
  /* 限制最大宽度，防止图片过宽 */
  object-fit: contain;
  /* 保持图片比例 */
  flex-shrink: 0;
  /* 防止图片被压缩 */
  vertical-align: middle;
  /* 确保与文字基线对齐 */
}

/* 移除旧的 status-badge 样式，统一使用 bili-hot-image */
.bili-hot-table .status-badge {
  display: none;
}

.baidu-hot-tabs {
  margin-bottom: 10px;
  /* 调整标签页和下方内容的间距 */
  padding: 0 10px;
}

/* 自定义输入提示框样式 */
#custom-prompt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: contentFadeIn 0.3s;
}

.custom-prompt-box {
  background-color: rgba(var(--card-background-rgb), 0.9);
  padding: 24px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 350px;
  text-align: center;
}

.custom-prompt-box h4 {
  margin-bottom: 8px;
}

.custom-prompt-box p {
  margin-bottom: 16px;
  font-size: 14px;
}

.custom-prompt-box input {
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: rgba(var(--bg-color-rgb), 0.8);
  color: var(--text-color);
  margin-bottom: 20px;
  text-align: center;
}

.prompt-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

#custom-prompt-overlay.fade-out {
  animation: contentFadeOut 0.3s forwards;
}

@keyframes contentFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-15px);
  }
}

.secret-window-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.secret-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 确保所有子元素都能响应式调整 */
.secret-content>* {
  max-width: 100%;
  box-sizing: border-box;
}

/* 为工具箱网格容器添加一个平滑的透明度过渡效果 */
#toolbox-grid {
  transition: opacity 0.2s ease-in-out;
}

@keyframes contentFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-15px);
    /* 向上移动一点再消失，效果更佳 */
  }
}

.tool-card.fade-out {
  animation: contentFadeOut 0.2s forwards;
}

.tool-card {
  opacity: 0;
  /* 其他 .tool-card 样式保持不变 */
}

/* --- Base64 工具特定样式 --- */
.base64-tool-container .content-area {
  background-color: rgba(var(--bg-color-rgb), 0.5);
  /* 给内容区一个轻微的背景色 */
}

.base64-main-area h2,
.base64-image-area h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.base64-textarea-wrapper {
  position: relative;
  margin-bottom: 15px;
}

#b64-main-textarea {
  width: 100%;
  height: 180px;
  /* 增加高度 */
  padding: 12px 15px;
  padding-right: 50px;
  /* 为右侧按钮留出空间 */
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background-color: rgba(var(--card-background-rgb), 0.8);
  color: var(--text-color);
  font-size: 14px;
  resize: vertical;
  /* 允许垂直调整大小 */
  line-height: 1.6;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#b64-main-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.textarea-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.textarea-actions .control-btn.mini-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 14px;
  border-radius: 8px;
  /* 稍小圆角 */
}

.base64-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  /* 居中按钮 */
}

.base64-image-area .image-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.image-preview-area {
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  padding: 15px;
  margin-top: 15px;
  text-align: center;
}

.image-preview-area h3 {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.image-output {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

#b64-download-image-btn {
  margin: 0 auto;
  /* 居中下载按钮 */
}

/* --- 窗口 UI 区分 --- */

/* 为独立窗口添加一个顶层类 */
body.tool-window-body,
body.browser-window-body {
  /* 可以给独立窗口加一个非常细微的边框或背景 */
  /* border: 1px solid rgba(var(--primary-rgb), 0.1); */
}

/* 独立窗口的标题栏样式调整 */
.tool-window-body .title-bar,
.browser-window-body .title-bar-shell {
  background-color: rgba(var(--card-background-rgb), 0.5);
  /* 半透明背景 */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom: 1px solid var(--border-color);
}

/* 独立窗口内的工具头部 (例如 Base64 工具的) */
.tool-window-body .tool-window-header {
  padding: 10px 20px;
  /* 调整内边距 */
  margin-bottom: 0;
  /* 移除与下方内容的间距 */
  border-bottom: 1px solid var(--border-color);
  background-color: rgba(var(--card-background-rgb), 0.3);
  /* 轻微背景 */
}

.tool-window-body .tool-window-header .back-btn {
  /* 可以隐藏独立窗口内的返回按钮，因为窗口本身有关闭按钮 */
  /* display: none; */
  padding: 6px 12px;
  /* 缩小按钮 */
  font-size: 14px;
}

.tool-window-body .tool-window-header h1 {
  font-size: 18px;
  /* 缩小标题字号 */
}

/* 浏览器窗口的导航栏 */
.browser-window-body #view-controls {
  background-color: rgba(var(--card-background-rgb), 0.6);
  /* 稍微深一点的背景 */
}


/* --- 简繁转换工具特定样式 --- */
.chinese-converter-container .content-area {
  background-color: rgba(var(--bg-color-rgb), 0.5);
}

.chinese-converter-container .settings-section {
  min-height: 0;
  /* Allow flex shrinking */
}

.converter-text-area {
  position: relative;
  flex: 1;
  /* Allow text areas to grow */
  display: flex;
  /* Ensure textarea fills height */
  margin-bottom: 15px;
}

.converter-text-area textarea {
  width: 100%;
  min-height: 150px;
  /* Minimum height */
  height: 100%;
  /* Fill available height */
  padding: 12px 15px;
  padding-right: 50px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background-color: rgba(var(--card-background-rgb), 0.8);
  color: var(--text-color);
  font-size: 14px;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.converter-text-area textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.converter-text-area .textarea-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.converter-text-area .textarea-actions .control-btn.mini-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 14px;
  border-radius: 8px;
}

.converter-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
  gap: 10px;
  flex-shrink: 0;
  /* Prevent controls from shrinking */
}

.converter-type-selection {
  display: flex;
  gap: 15px;
  align-items: center;
}

.converter-type-selection label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}

.converter-type-selection input[type="radio"] {
  cursor: pointer;
}

.converter-type-selection label:has(input:checked) {
  color: var(--primary-color);
  font-weight: 600;
}

#cc-convert-btn {
  min-width: 100px;
  /* Ensure button has minimum width */
}

#cc-output-textarea:read-only {
  background-color: rgba(var(--card-background-rgb), 0.5);
  /* Slightly different background for readonly */
}


/* --- QR Code Generator Tool Styles --- */
.qr-code-container .content-area {
  display: flex;
  flex-direction: row;
  /* Side by side layout */
  gap: 30px;
}

.qr-options-panel,
.qr-preview-panel {
  padding: 20px;
  flex: 1;
  /* Share space equally */
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Prevent flex overflow */
}

.qr-options-panel .setting-item {
  margin-bottom: 18px;
}

.qr-options-panel .setting-item label {
  display: block;
  /* Ensure label is above input */
  margin-bottom: 8px;
}

.qr-options-panel textarea,
.qr-options-panel select,
.qr-options-panel input[type="color"] {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: rgba(var(--card-background-rgb), 0.7);
  color: var(--text-color);
  font-size: 14px;
}

.qr-options-panel textarea {
  min-height: 80px;
}

.qr-options-panel input[type="color"] {
  height: 38px;
  padding: 4px;
  /* Adjust padding for color input */
  cursor: pointer;
}


.qr-preview-panel {
  align-items: center;
  /* Center content horizontally */
}

.qr-code-output {
  width: 100%;
  max-width: 400px;
  /* Limit max preview size */
  aspect-ratio: 1 / 1;
  /* Maintain square shape */
  background-color: rgba(var(--card-background-rgb), 0.3);
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  /* Padding around the QR code */
  box-sizing: border-box;
  /* Include padding in size */
}

.qr-code-output canvas,
.qr-code-output img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background-color: white;
  /* Ensure light background for QR code visibility */
  border-radius: 4px;
  /* Slight rounding for the code itself */
}


.qr-placeholder {
  color: var(--text-secondary);
  text-align: center;
}

#qr-save-btn {
  width: 80%;
  max-width: 200px;
  /* Limit button width */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .qr-code-container .content-area {
    flex-direction: column;
    /* Stack panels vertically */
  }

  .qr-options-panel,
  .qr-preview-panel {
    flex: none;
    /* Reset flex grow */
  }
}

/* 工具箱新布局容器 */
.toolbox-page-container {
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 20px;
}

/* 工具箱侧边栏 (复用设置页的导航样式) */
.toolbox-sidebar {
  width: 200px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
  /* 为滚动条留出空间 */
}

/* 侧边栏类别按钮 (直接复用 settings-nav-item 样式) */
.toolbox-category-btn {
  width: 100%;
  margin-bottom: 8px;
  /* 增加一点间距 */
}

/* 确保 .settings-nav-item 的基础样式在 .toolbox-sidebar 中可用 */
.toolbox-sidebar .settings-nav-item {
  /* 样式已在 .settings-nav-item 中定义，这里确保上下文正确 */
}

.toolbox-sidebar .settings-nav-item:hover {
  /* 样式已在 .settings-nav-item:hover 中定义 */
}

.toolbox-sidebar .settings-nav-item.active {
  /* 样式已在 .settings-nav-item.active 中定义 */
}

/* 工具箱右侧主内容区 */
.toolbox-main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 防止 flex 溢出 */
}

/* 确保网格在 flex 容器内正确滚动 */
.toolbox-main-content .toolbox-grid {
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 5px 15px 5px 5px;
  /* 为滚动条增加内边距 */
}

/* 工具箱活动滑块样式 */
.toolbox-active-slider {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  /* 在按钮背景之下 */
  background-color: var(--primary-color);
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
  border-radius: 12px;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* 核心动画 */
}

/* 修正按钮内图标和文字的 z-index */
.settings-nav-item>i,
.settings-nav-item>span {
  position: relative;
  z-index: 2;
}

/* 独立工具窗口焦点样式 */
.tool-window-body .title-bar {
  background-color: rgba(var(--card-background-rgb), 0.5);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tool-window-body #window-title {
  transition: color 0.3s ease;
}

/* 当 .tool-window-body 获得焦点时 */
.tool-window-body.window-focused .title-bar {
  background-color: rgba(var(--primary-rgb), 0.15);
  /* 主题色浅色背景 */
  backdrop-filter: blur(10px);
}

.tool-window-body.window-focused #window-title {
  color: var(--primary-color);
  /* 主题色标题 */
}


/* 独立浏览器窗口焦点样式 */
.browser-window-body .title-bar-shell {
  background-color: rgba(var(--card-background-rgb), 0.5);
  transition: background-color 0.3s ease;
}

.browser-window-body #window-title {
  transition: color 0.3s ease;
}

/* 当 .browser-window-body 获得焦点时 */
.browser-window-body.window-focused .title-bar-shell {
  background-color: rgba(var(--primary-rgb), 0.15);
  /* 主题色浅色背景 */
  backdrop-filter: blur(10px);
}

.browser-window-body.window-focused #window-title {
  color: var(--primary-color);
  /* 主题色标题 */
}

/* 独立工具窗口 (view-tool) 基础样式 */
.tool-window-body#app-body {
  /* 添加过渡效果，用于焦点的边框/阴影 */
  transition: box-shadow 0.3s ease;
  /* 默认的、非激活状态的边框 (非常淡) */
  box-shadow: 0 0 0 1px var(--border-color);
}

.tool-window-body .title-bar {
  background-color: rgba(var(--card-background-rgb), 0.5);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tool-window-body #window-title {
  color: var(--text-secondary);
  /* 非激活时标题颜色变暗 */
  transition: color 0.3s ease;
}

/* 当 .tool-window-body 获得焦点时 */
.tool-window-body.window-focused#app-body {
  /* [新增] 添加高亮的边框/辉光效果 */
  box-shadow: 0 0 0 2px var(--primary-color);
}

.tool-window-body.window-focused .title-bar {
  background-color: rgba(var(--primary-rgb), 0.15);
  /* 主题色浅色背景 */
  backdrop-filter: blur(10px);
}

.tool-window-body.window-focused #window-title {
  color: var(--primary-color);
  /* 主题色标题 */
}


/* 独立浏览器窗口 (view-browser) 基础样式 */
.browser-window-body#app-body {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 0 0 1px var(--border-color);
  /* 默认的、非激活状态的边框 */
}

.browser-window-body .title-bar-shell {
  background-color: rgba(var(--card-background-rgb), 0.5);
  transition: background-color 0.3s ease;
}

.browser-window-body #window-title {
  color: var(--text-secondary);
  /* 非激活时标题颜色变暗 */
  transition: color 0.3s ease;
}

/* 当 .browser-window-body 获得焦点时 */
.browser-window-body.window-focused#app-body {
  /* [新增] 添加高亮的边框/辉光效果 */
  box-shadow: 0 0 0 2px var(--primary-color);
}

.browser-window-body.window-focused .title-bar-shell {
  background-color: rgba(var(--primary-rgb), 0.15);
  backdrop-filter: blur(10px);
}

.browser-window-body.window-focused #window-title {
  color: var(--primary-color);
  /* 主题色标题 */
}

/* [修复] 移除工具窗口内的 header 留白 (如果工具文件没改干净) */
.tool-window-body .tool-window-header {
  display: none;
}

/* 禁用状态下的子分类卡片 */
.subcategory-card.disabled {
  opacity: 0.6;
  filter: grayscale(80%);
}

/* 禁用时移除悬停效果 */
.subcategory-card.disabled:hover {
  transform: none;
  box-shadow: 0 4px 15px var(--shadow-color);
  border-color: var(--border-color);
}

/* 禁用时按钮的样式 */
.subcategory-card.disabled .view-subcategory-btn {
  cursor: not-allowed;
  color: var(--text-secondary);
  background-color: transparent;
}

/* 禁用时移除按钮的悬停效果 */
.subcategory-card.disabled .view-subcategory-btn:hover {
  transform: none;
  box-shadow: none;
  color: var(--text-secondary);
}

/* 随机放映室 - 禁用项目的缩略图占位符 */
.subcategory-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--border-color);
  /* 使用一个柔和的背景色 */
}

.subcategory-thumbnail-placeholder i {
  font-size: 48px;
  color: var(--text-secondary);
  opacity: 0.5;
}

/* 确保禁用的卡片缩略图容器高度一致 */
.subcategory-card.disabled .subcategory-thumbnail {
  height: 160px;
  /* 匹配 .subcategory-thumbnail 的原始高度 */
  overflow: hidden;
}

/* --- 新的通用选项开关 (.option-toggle) --- */
.option-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  /* 宽度缩小 */
  height: 24px;
  /* 高度缩小 */
}

.option-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.option-toggle .slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: var(--transition-duration);
  border-radius: 24px;
  /* 保持圆形 */
}

.option-toggle .slider-round:before {
  position: absolute;
  content: "";
  height: 18px;
  /* 滑块缩小 */
  width: 18px;
  /* 滑块缩小 */
  left: 3px;
  /* 边距调整 */
  bottom: 3px;
  /* 边距调整 */
  background-color: white;
  transition: var(--transition-duration);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.option-toggle input:checked+.slider-round {
  background-color: var(--primary-color);
}

.option-toggle input:checked+.slider-round:before {
  transform: translateX(20px);
  /* 移动距离调整 */
}

/* --- 新的自定义下拉菜单 (.custom-select-wrapper) --- */
.custom-select-wrapper {
  position: relative;
  min-width: 120px;
}

.custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: rgba(var(--card-background-rgb), 0.7);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

.custom-select-wrapper:hover .custom-select-trigger {
  border-color: var(--primary-color);
}

.custom-select-wrapper.active .custom-select-trigger {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.custom-select-arrow {
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.custom-select-wrapper.active .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  /* [修改] 改为 fixed，使其脱离父容器的 overflow 限制 */
  position: fixed;

  /* [修改] 提高 z-index，确保在所有元素之上 (高于滑出式面板的 1000) */
  z-index: 10001;

  background-color: rgba(var(--card-background-rgb), 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 20px var(--shadow-color-hover);
  padding: 6px;
  max-height: 200px;
  overflow-y: auto;

  /* [动画 修复 1/2] 动画现在由 JS 切换 '.dynamic-active' 类控制 */
  opacity: 0;
  transform-origin: top center;
  /* [新增] 默认从顶部中心缩放 */
  transform: scale(0.95);
  /* [修改] 从 translateY(-10px) 改为 scale(0.95) */
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* [修改] 保持过渡效果 */
  display: block;
  /* 保持块状，以便 JS 可以计算其高度 */
}

.custom-select-options.dynamic-active {
  /* [动画 修复 2/2] */
  opacity: 1;
  transform: scale(1);
  /* [修改] 从 translateY(0) 改为 scale(1) */
  pointer-events: auto;
}

.custom-select-wrapper.active .custom-select-options {
  /* [动画] 激活时显示 */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.custom-select-option {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-select-option:hover {
  background-color: var(--border-color);
  color: var(--text-color);
}

.custom-select-option:active {
  background-color: rgba(var(--primary-rgb), 0.2);
  color: var(--primary-color);
}

/* 敏感词检测工具 - 结果列表滚动 */
.profanity-results-list {
  max-height: 150px;
  /* 滚动容器的最大高度 */
  overflow-y: auto;
  /* 溢出时显示滚动条 */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-top: 15px;
  /* 与状态行保持间距 */
}

/* [新增] flexbox 容器样式 */
.profanity-tag-container {
  display: flex;
  flex-wrap: wrap;
  /* 允许卡片换行 */
  padding: 10px;
  /* 容器内边距 */
  gap: 8px;
  /* 卡片之间的间距 */
}

/* [新增] “小卡片” (Tag/Pill) 本身的样式 */
.profanity-tag {
  /* 使用 rgba(var(--error-color-rgb...)) 来获取透明背景 */
  background-color: rgba(var(--error-color-rgb, 255, 59, 48), 0.15);
  color: var(--error-color);
  /* 红色文字 */
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(var(--error-color-rgb, 255, 59, 48), 0.3);
}

/* 确保表格最后一行没有多余的边框 */
.profanity-results-list .ip-comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* --- 3. 自定义下拉菜单 (支持分类) --- */
.custom-select-group {
  padding: 4px 0;
}

.custom-select-group:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.custom-select-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px 4px 12px;
}

.custom-select-options {
  /* 增加最大高度以容纳更多条目 */
  max-height: 400px;
}

/* --- 多平台热榜工具样式 --- */
.hotboard-table .bili-hot-item {
  display: none;
  /* 不再使用 .bili-hot-item flex 容器 */
}

/* 新的热榜标题链接样式 */
.hotboard-title-link {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.hotboard-title-link:hover {
  color: var(--primary-color);
}

/* 热榜 - 热度值 */
.hotboard-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: monospace;
  /* 使用等宽字体让数字对齐 */
}

/* 热榜 - 额外标签 (如 '新', '爆') */
.hotboard-tag {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  flex-shrink: 0;
  border: 1px solid transparent;
}

/* 标签 '新' (蓝色) */
.hotboard-tag.tag-new {
  background-color: rgba(var(--primary-rgb), 0.15);
  color: var(--primary-color);
  border-color: rgba(var(--primary-rgb), 0.3);
}

/* 标签 '爆' / '热' (红色) */
.hotboard-tag.tag-hot {
  background-color: rgba(var(--error-color-rgb, 255, 59, 48), 0.15);
  color: var(--error-color);
  border-color: rgba(var(--error-color-rgb, 255, 59, 48), 0.3);
}

/* 确保复用的表格样式在工具窗口中表现一致 */
.hotboard-table.ip-comparison-table th {
  text-align: left;
  /* 默认左对齐 */
}

.hotboard-table.ip-comparison-table th[style*="text-align: center"],
.hotboard-table.ip-comparison-table td[style*="text-align: center"] {
  text-align: center;
  /* 覆盖为居中 */
}

.hotboard-table.ip-comparison-table th[style*="text-align: right"],
.hotboard-table.ip-comparison-table td[style*="text-align: right"] {
  text-align: right;
  /* 覆盖为居右 */
}

/* --- 自定义“吃豆人”加载动画 (hotboard) --- */
/* (基于 .load20 样式) */
.pacman-loader {
  position: relative;
  /* 缩放以适应加载容器 */
  transform: scale(0.8);
  margin: 15px 0;
}

.pacman-loader>div:nth-child(2) {
  -webkit-animation: pacman-balls 1s -0.99s infinite linear;
  animation: pacman-balls 1s -0.99s infinite linear;
}

.pacman-loader>div:nth-child(3) {
  -webkit-animation: pacman-balls 1s -0.66s infinite linear;
  animation: pacman-balls 1s -0.66s infinite linear;
}

.pacman-loader>div:nth-child(4) {
  -webkit-animation: pacman-balls 1s -0.33s infinite linear;
  animation: pacman-balls 1s -0.33s infinite linear;
}

.pacman-loader>div:nth-child(5) {
  -webkit-animation: pacman-balls 1s 0s infinite linear;
  animation: pacman-balls 1s 0s infinite linear;
}

.pacman-loader>div:first-of-type {
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  /* [修改] 使用 CSS 变量自动适应主题 */
  border-top: 25px solid var(--text-color);
  border-left: 25px solid var(--text-color);
  border-bottom: 25px solid var(--text-color);
  border-radius: 25px;
  -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
  animation: rotate_pacman_half_up 0.5s 0s infinite;
  position: relative;
  left: -30px;
}

.pacman-loader>div:nth-child(2) {
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  /* [修改] 使用 CSS 变量自动适应主题 */
  border-top: 25px solid var(--text-color);
  border-left: 25px solid var(--text-color);
  border-bottom: 25px solid var(--text-color);
  border-radius: 25px;
  -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
  animation: rotate_pacman_half_down 0.5s 0s infinite;
  margin-top: -50px;
  position: relative;
  left: -30px;
}

.pacman-loader>div:nth-child(3),
.pacman-loader>div:nth-child(4),
.pacman-loader>div:nth-child(5),
.pacman-loader>div:nth-child(6) {
  /* [修改] 使用 CSS 变量自动适应主题 */
  background-color: var(--text-color);
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  width: 10px;
  height: 10px;
  position: absolute;
  -webkit-transform: translate(0, -6.25px);
  transform: translate(0, -6.25px);
  top: 25px;
  left: 70px;
}

/* 复制所有必需的 keyframes */
@-webkit-keyframes pacman-balls {
  75% {
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translate(-100px, -6.25px);
    transform: translate(-100px, -6.25px);
  }
}

@keyframes pacman-balls {
  75% {
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translate(-100px, -6.25px);
    transform: translate(-100px, -6.25px);
  }
}

@-webkit-keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

@keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

@-webkit-keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

/* 确保高级选项的折叠动画正常工作 */
.collapsible-trigger .icon-toggle {
  transition: transform var(--transition-duration) ease;
}

.collapsible-trigger.expanded .icon-toggle {
  transform: rotate(-180deg);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out;
  border-top: 1px solid transparent;
}

.collapsible-content.expanded {
  max-height: 400px;
  /* 展开高度 */
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
}

/* 智能搜索 - 搜索结果专用样式 */
.search-result-item {
  border-bottom: 1px solid var(--border-color);
  padding: 15px;
  margin-bottom: 15px;
  transition: background-color 0.2s ease;
  border-radius: 8px;
}

.search-result-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.search-result-item:hover {
  background-color: rgba(var(--primary-rgb), 0.05);
}

.search-result-item h4 {
  margin-bottom: 5px;
}

.search-result-item p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  /* 限制摘要行数 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.search-result-item .result-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  /* 允许在小屏幕上换行 */
  gap: 15px;
}

.search-result-item .result-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* 结果中的域名高亮 */
.search-result-item .result-meta .domain {
  color: var(--success-color);
  font-weight: 600;
}


/* --- 2. [Request 2] 新版主页 (欢迎页) 布局样式 --- */

/* 欢迎页上的新搜索栏 */
.welcome-search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  /* 复用卡片样式 */
  background-color: rgba(var(--card-background-rgb), var(--card-opacity));
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px var(--shadow-color);
  padding: 20px;
  transition: all var(--transition-duration) ease;
}

.welcome-search-bar:hover {
  /* 悬停时发光 */
  box-shadow: 0 12px 25px var(--shadow-color-hover), 0 0 25px var(--glow-color);
  border-color: rgba(var(--primary-rgb), 0.4);
}

/* 欢迎页搜索栏的输入框 */
.welcome-search-bar input {
  flex-grow: 1;
  padding: 12px 18px;
  font-size: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: rgba(var(--bg-color-rgb), 0.8);
  color: var(--text-color);
}

.welcome-search-bar input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* 欢迎页新的 2 列表格布局 */
.welcome-dashboard-grid-new {
  flex-grow: 1;
  min-height: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  /* 2 个等宽列 */
}

/* 响应式：在窄屏上，2 列变为 1 列 */
@media (max-width: 1024px) {
  .welcome-dashboard-grid-new {
    grid-template-columns: 1fr;
    /* 垂直堆叠 */
  }
}

/* --- [Request 1] 智能搜索 - 高级选项输入框样式 --- */
.settings-input-text {
  max-width: 250px;
  padding: 8px 12px;
  font-size: 14px;
  text-align: left;
  border: 1px solid var(--border-color);
  border-radius: 8px;

  /* * 核心修复：
   * 1. 使用 --bg-color-rgb (浅色模式为浅灰, 深色模式为深灰)
   * 2. 使用 --text-color (浅色模式为深色字, 深色模式为浅色字)
   */
  background-color: rgba(var(--bg-color-rgb), 0.8);
  color: var(--text-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 修复：输入框获取焦点时的样式 */
.settings-input-text:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* 修复：占位符文本颜色 (使用次要文本颜色) */
.settings-input-text::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}

/* --- [Req 2] 新主页布局 - 紧凑型公告 --- */
.compact-announcement {
  /* 复用卡片样式，但更紧凑 */
  background-color: rgba(var(--card-background-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 15px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all var(--transition-duration) ease;
  opacity: 0;
  /* 用于渐入动画 */
}

.compact-announcement:hover {
  background-color: rgba(var(--card-background-rgb), 0.7);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.compact-announcement .icon {
  font-size: 20px;
  color: var(--primary-color);
  flex-shrink: 0;
}

.compact-announcement p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  /* 防止过长 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- [Req 2] 新主页布局 - 搜索结果容器 --- */
.welcome-search-results-container {
  flex-grow: 1;
  /* 占据剩余空间 */
  min-height: 0;
  overflow-y: auto;
  padding-right: 10px;
  /* 为滚动条留出空间 */
  display: flex;
  flex-direction: column;
}

/* 搜索结果的样式 (全局复用) */
.search-result-item {
  border-bottom: 1px solid var(--border-color);
  padding: 15px;
  margin-bottom: 15px;
  transition: background-color 0.2s ease;
  border-radius: 8px;
}

.search-result-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.search-result-item:hover {
  background-color: rgba(var(--primary-rgb), 0.05);
}

.search-result-item h4 {
  margin-bottom: 5px;
}

.search-result-item p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.search-result-item .result-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.search-result-item .result-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.search-result-item .result-meta .domain {
  color: var(--success-color);
  font-weight: 600;
}

/* “查看详细” 按钮 */
.view-full-results-btn {
  display: block;
  width: 200px;
  margin: 20px auto;
  text-align: center;
}


/* --- [修复] 欢迎页 - 右侧滑出式更新面板 --- */

.update-slide-out-panel {
  position: fixed;
  top: 40px;
  /* 保持在主窗口标题栏下方 */
  right: 0;

  /* [修复] 设定一个固定的、更合理的宽度 */
  width: 450px;
  max-width: 90vw;
  /* 确保在小屏幕上不会溢出 */

  height: calc(100vh - 40px);
  /* 占满剩余高度 */
  background-color: rgba(var(--card-background-rgb), 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 30px var(--shadow-color-hover);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  /* [修复] 使用 transform 实现动画，从右侧 100% (完全隐藏) 滑入 */
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-slide-out-panel.active {
  /* [修复] 滑入视图 (0% 偏移) */
  transform: translateX(0);
}

/* [修复] 头部样式和关闭按钮 */
.update-panel-header {
  padding: 20px 24px 15px 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  /* 为关闭按钮提供定位基准 */
}

.update-panel-header h2 {
  margin: 0;
  padding-right: 40px;
  /* 为关闭按钮留出空间 */
}

/* [修复 3] 合理设计关闭按钮位置 (使用绝对定位) */
#close-update-panel-btn {
  /* [修复] 将关闭按钮绝对定位于右上角 */
  position: absolute;
  top: 18px;
  /* 垂直居中 */
  right: 20px;
  -webkit-app-region: no-drag;
  z-index: 1001;
  /* 确保在最上层 */
}

/* 复用 changelog 样式 */
.update-slide-out-panel .changelog-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
  min-height: 0;
}

.welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* --- [Req 1 & 3] 右侧滑出式更新面板 (不遮挡窗口控件) --- */
.update-slide-out-panel {
  position: fixed;
  /* 修复：顶部从 40px 开始，避开标题栏 */
  top: 40px;
  right: -35%;
  /* 初始隐藏 */
  width: 30%;
  /* 修复：高度不遮挡标题栏 */
  height: calc(100vh - 40px);
  background-color: rgba(var(--card-background-rgb), 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 30px var(--shadow-color-hover);
  z-index: 1000;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.update-slide-out-panel.active {
  transform: translateX(-100%);
  /* 滑入视图 */
}

.update-panel-header {
  padding: 20px 24px 15px 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  /* 增加分割线 */
}

.update-panel-header h2 {
  margin: 0;
}

.update-slide-out-panel .changelog-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
  min-height: 0;
}

/* --- [Req 2] 公告 - 溢出时显示 "..." 并可点击 --- */
.compact-announcement.is-overflowing p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-announcement.is-overflowing {
  cursor: pointer;
  /* 提示用户可以点击 */
}

.compact-announcement.is-overflowing:hover {
  border-color: var(--primary-color);
  /* 悬停时高亮 */
}

/* --- [Req 2] 公告 - 模态框 (遮罩层和内容框) --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  /* [修复] 默认隐藏，防止意外显示 */
  visibility: hidden;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.modal-content {
  background-color: rgba(var(--card-background-rgb), 0.95);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px var(--shadow-color-hover);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  white-space: normal;
  line-height: 1.6;
}

.modal-body p {
  margin: 0;
  color: var(--text-color);
}

/* --- [修复] 欢迎页 - 右侧滑出式更新面板 (全新设计) --- */

.update-slide-out-panel {
  position: fixed;
  top: 40px;
  /* 保持在主窗口标题栏下方 */
  right: 0;

  /* [Req 1] 宽度调整为 480px (原为 450px) */
  width: 480px;
  max-width: 90vw;
  /* 确保在小屏幕上不会溢出 */

  height: calc(100vh - 40px);
  /* 占满剩余高度 */
  background-color: rgba(var(--card-background-rgb), 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 30px var(--shadow-color-hover);
  z-index: 1000;
  /* 必须在遮罩层之上 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  /* [修复] 使用 transform 实现动画，从右侧 100% (完全隐藏) 滑入 */
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-slide-out-panel.active {
  transform: translateX(0);
  /* 滑入视图 */
}

/* [修复] 头部样式和关闭按钮 (确保 "X" 按钮可见) */
.update-panel-header {
  padding: 20px 24px 15px 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  /* 为关闭按钮提供定位基准 */
}

.update-panel-header h2 {
  margin: 0;
  padding-right: 40px;
  /* 为关闭按钮留出空间 */
}

#close-update-panel-btn {
  /* [修复] 将关闭按钮绝对定位于右上角 */
  position: absolute;
  top: 18px;
  /* 垂直居中 */
  right: 20px;
  -webkit-app-region: no-drag;
  z-index: 1001;
  /* 确保在最上层 */
}

.update-slide-out-panel .changelog-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
  min-height: 0;
}

/* [修复] 日志条目 - 重新设计为“标题-内容”布局 */
.changelog-item {
  display: block;
  /* 移除 grid 布局 */
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.changelog-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.changelog-key {
  font-weight: 600;
  color: var(--text-secondary);
  text-align: left;
  font-size: 14px;
  background-color: var(--tag-bg-color);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 12px;
}

/* [修复] 内容换行 (解决截图 中的问题) */
.changelog-value {
  font-size: 15px;
  color: var(--text-color);
  white-space: normal;
  /* 允许自动换行 */
  word-wrap: break-word;
  /* 强制长单词断开 */
  line-height: 1.6;
}

.changelog-value br {
  display: block;
  content: "";
  margin-top: 8px;
}

.changelog-value b,
.changelog-value strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* --- [Req 2] 更新日志 - "点击外部关闭" 遮罩层 --- */
.update-panel-overlay {
  position: fixed;
  top: 40px;
  /* 保持不变：避开顶部标题栏 */

  /* [修改点 1] 左边距设为 70px，即导航栏的宽度 */
  left: 70px;

  /* [修改点 2] 宽度改为 总宽度减去导航栏的 70px */
  width: calc(100% - 70px);

  height: calc(100vh - 40px);
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-panel-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- [修复] 欢迎页 - 右侧滑出式更新面板 (全新设计) --- */

.update-slide-out-panel {
  position: fixed;
  top: 40px;
  width: 480px;
  /* [修复] 宽度调整为 480px (原为 450px) */
  max-width: 90vw;
  right: 0;
  height: calc(100vh - 40px);
  background-color: rgba(var(--card-background-rgb), 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 30px var(--shadow-color-hover);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  /* [修复 2] 将面板多向右推 2px，使其 1px 边框完全移出屏幕 */
  transform: translateX(calc(100% + 2px));
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-slide-out-panel.active {
  transform: translateX(0);
  /* 滑入视图 */
}

/* [修复 2] 头部样式和关闭按钮 (确保 "X" 按钮可见) */
.update-panel-header {
  padding: 20px 24px 15px 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.update-panel-header h2 {
  margin: 0;
  padding-right: 40px;
  /* 为关闭按钮留出空间 */
}

#close-update-panel-btn {
  /* [修复 2] 将关闭按钮绝对定位于右上角 */
  position: absolute;
  top: 18px;
  right: 20px;
  -webkit-app-region: no-drag;
  z-index: 1001;
}

.update-slide-out-panel .changelog-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
  min-height: 0;
}

/* [修复 1] 日志条目 - 重新设计为“标题-内容”布局 */
.changelog-item {
  display: block;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.changelog-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.changelog-key {
  font-weight: 600;
  color: var(--text-secondary);
  text-align: left;
  font-size: 14px;
  background-color: var(--tag-bg-color);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 12px;
}

/* [修复 1] 内容换行 (解决截图 中的问题) */
.changelog-value {
  font-size: 15px;
  color: var(--text-color);
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.6;
}

.changelog-value br {
  display: block;
  content: "";
  margin-top: 8px;
}

.changelog-value b,
.changelog-value strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* [修复 1] 欢迎页“查看详细”按钮底部间距 */
.view-full-results-btn {
  display: block;
  width: 200px;
  margin: 20px auto;
  /* [修复 1] 增加额外的底部 margin，确保滚动到底部时可见 */
  margin-bottom: 40px;
}

/* --- [修复 2] 更新日志 - "点击外部关闭" 遮罩层 --- */
.update-panel-overlay {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100vh - 40px);
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-panel-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.logs-container {
  padding: 10px 20px;
  /* [新增] 占据剩余空间 */
  flex-grow: 1;
  /* [新增] 允许垂直滚动 */
  overflow-y: auto;
  /* [新增] 修复 flex 布局在 overflow 下的高度计算问题 */
  min-height: 0;
}

/* --- “关于”页面自定义样式 (设置页内) --- */

/* 作者信息卡片 */
.author-card {
  padding: 24px;
  background-color: rgba(var(--card-background-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  text-align: center;
  transition: all var(--transition-duration) ease;
}

.author-card:hover {
  box-shadow: 0 8px 25px var(--shadow-color-hover);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 20px auto;
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

.author-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 8px;
}

.author-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.author-links {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 官网/反馈 链接按钮 */
.link-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  background-color: transparent;
  color: var(--text-secondary);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease-in-out;
}

.link-btn:hover {
  background-color: var(--border-color);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* 鸣谢区域 */
.thanks-section {
  padding: 24px;
  background-color: rgba(var(--card-background-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-top: 20px;
  /* 与上方卡片分离 */
}

.thanks-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.thanks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thanks-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background-color: rgba(var(--bg-color-rgb), 0.5);
  /* 使用更浅的背景 */
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  cursor: pointer;
}

.thanks-item:hover {
  background-color: rgba(var(--card-background-rgb), 0.8);
  border-color: var(--primary-color);
}

.thanks-item .icon {
  font-size: 18px;
  color: var(--primary-color);
  width: 20px;
  text-align: center;
}

.thanks-item .text-content {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

/* “更多信息”按钮的外层容器 */
.about-buttons {
  /* 确保按钮居中 (mainPage.js 中已设置了 margin-top) */
  display: flex;
  justify-content: center;
}

/* --- [修复] 下拉菜单 z-index 和定位修复 --- */
.custom-select-options {
  /* [修改] 改为 fixed，使其脱离父容器的 overflow 限制 */
  position: fixed;

  /* [修改] 提高 z-index，确保在所有元素之上 (高于滑出式面板的 1000) */
  z-index: 10001;

  background-color: rgba(var(--card-background-rgb), 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 20px var(--shadow-color-hover);
  padding: 6px;
  max-height: 200px;
  overflow-y: auto;

  /* [修改] 动画现在由 JS 切换 '.dynamic-active' 类控制 */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: block;
  /* 保持块状，以便 JS 可以计算其高度 */
}

/* [新增] 使用这个新类来激活下拉菜单 */
.custom-select-options.dynamic-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- [修复] 欢迎页 - 右侧滑出式更新面板 (修复截图中的问题) --- */
.update-slide-out-panel {
  position: fixed;
  top: 40px;
  /* [修复] 必须从 40px 开始，避开标题栏 */
  right: 0;
  width: 480px;
  max-width: 90vw;
  height: calc(100vh - 40px);
  /* [修复] 占满剩余高度 */
  background-color: rgba(var(--card-background-rgb), 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 30px var(--shadow-color-hover);
  z-index: 1000;
  /* [修复] 高于 .version-display (100) */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateX(calc(100% + 2px));
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-slide-out-panel.active {
  transform: translateX(0);
  /* 滑入视图 */
}

.update-panel-header {
  padding: 20px 24px 15px 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.update-panel-header h2 {
  margin: 0;
  padding-right: 40px;
}

#close-update-panel-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  -webkit-app-region: no-drag;
  z-index: 1001;
}

.update-slide-out-panel .changelog-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
  min-height: 0;
}

/* --- [修复] 更新日志 - "点击外部关闭" 遮罩层 --- */
.update-panel-overlay {
  position: fixed;
  top: 40px;
  /* [修复] 必须从 40px 开始 */
  left: 0;
  width: 100%;
  height: calc(100vh - 40px);
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  z-index: 999;
  /* [修复] 必须低于面板(1000)，但高于 .version-display(100) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-panel-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- [修复] 下拉菜单 z-index 和定位修复 --- */
.custom-select-options {
  /* [修改] 改为 fixed，使其脱离父容器的 overflow 限制 */
  position: fixed;

  /* [修改] 提高 z-index，确保在所有元素之上 (高于滑出式面板的 1000) */
  z-index: 10001;

  background-color: rgba(var(--card-background-rgb), 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 20px var(--shadow-color-hover);
  padding: 6px;
  max-height: 200px;
  overflow-y: auto;

  /* [修改] 动画现在由 JS 切换 '.dynamic-active' 类控制 */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: block;
  /* 保持块状，以便 JS 可以计算其高度 */
}

/* [新增] 使用这个新类来激活下拉菜单 */
.custom-select-options.dynamic-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- [修复] 欢迎页 - 右侧滑出式更新面板 (修复截图中的问题) --- */
.update-slide-out-panel {
  position: fixed;
  top: 40px;
  /* [修复] 必须从 40px 开始，避开标题栏 */
  right: 0;
  width: 480px;
  max-width: 90vw;
  height: calc(100vh - 40px);
  /* [修复] 占满剩余高度 */
  background-color: rgba(var(--card-background-rgb), 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 30px var(--shadow-color-hover);
  z-index: 1000;
  /* [修复] 高于 .version-display (100) */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateX(calc(100% + 2px));
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-slide-out-panel.active {
  transform: translateX(0);
  /* 滑入视图 */
}

.update-panel-header {
  padding: 20px 24px 15px 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.update-panel-header h2 {
  margin: 0;
  padding-right: 40px;
}

#close-update-panel-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  -webkit-app-region: no-drag;
  z-index: 1001;
}

.update-slide-out-panel .changelog-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
  min-height: 0;
}

/* --- [修复] 更新日志 - "点击外部关闭" 遮罩层 --- */
.update-panel-overlay {
  position: fixed;
  top: 40px;
  /* 保持不变：避开顶部标题栏 */

  /* [修改点 1] 左边距设为 70px，即导航栏的宽度 */
  left: 70px;

  /* [修改点 2] 宽度改为 总宽度减去导航栏的 70px */
  width: calc(100% - 70px);

  height: calc(100vh - 40px);
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-panel-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- [新增] 修复系统工具滚动条 --- */
#system-tool-content {
  flex-grow: 1;
  /* 强制 Y 轴滚动 */
  overflow-y: auto !important;
  /* 确保 Flex 子项高度被正确计算 */
  min-height: 0;
  /* 增加底部内边距，防止最后一个卡片贴底 */
  padding-bottom: 20px;
  /* 确保宽度占满 */
  width: 100%;
}

/* 确保网格布局在 system-tool-content 内部表现良好 */
#system-tool-content .toolbox-grid {
  /* 移除网格本身的 margin-top，改由父容器 padding 控制 */
  margin-top: 0;
  padding: 10px;
  /* 给网格一点内边距 */
  /* 确保网格容器不会溢出父容器宽度 */
  box-sizing: border-box;
}

/* --- [重构] 通用自适应下拉菜单样式 --- */

/* 选项容器 (基础状态) */
.custom-select-options {
  position: fixed;
  /* 脱离文档流，由 JS 精确控制位置 */
  z-index: 10001;
  /* 确保在最顶层 */
  min-width: 120px;
  background-color: rgba(var(--card-background-rgb), 0.95);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  /* 更柔和的深阴影 */
  padding: 6px;
  max-height: 300px;
  overflow-y: auto;

  /* 动画初始状态: 隐藏、缩小、透明 */
  opacity: 0;
  transform: scaleY(0.8);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none;
}

.custom-select-options::-webkit-scrollbar {
  display: none;
}

/* 激活状态 (由 JS 添加 dynamic-active 类) */
.custom-select-options.dynamic-active {
  opacity: 1;
  transform: scaleY(1);
  /* 恢复正常大小 */
  pointer-events: auto;
}

/* 下拉模式 (默认) */
.custom-select-options.drop-down {
  transform-origin: top center;
  /* 从顶部展开 */
}

/* 上拉模式 (空间不足时) */
.custom-select-options.drop-up {
  transform-origin: bottom center;
  /* 从底部展开 */
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
  /* 阴影向上 */
}

/* 选项样式优化 */
.custom-select-option {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 500;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-select-option:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateX(2px);
  /* 悬停微动效果 */
}

/* 分组标题优化 */
.custom-select-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 12px 4px 12px;
  opacity: 0.8;
}

.custom-select-group:not(:last-child) {
  border-bottom: 1px dashed var(--border-color);
  margin-bottom: 4px;
  padding-bottom: 4px;
}

/* --- [重构] 通用自适应下拉菜单样式 --- */

.custom-select-wrapper {
  position: relative;
  min-width: 120px;
}

/* 触发器样式 */
.custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: rgba(var(--card-background-rgb), 0.7);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

.custom-select-trigger:hover {
  border-color: var(--primary-color);
}

.custom-select-wrapper.active .custom-select-trigger {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.custom-select-arrow {
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

/* 选项容器 (浮动) */
.custom-select-options {
  position: fixed;
  /* 脱离文档流，由 JS 精确控制位置 */
  z-index: 10001;
  /* 确保在最顶层 */
  min-width: 120px;
  background-color: rgba(var(--card-background-rgb), 0.95);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 6px;
  max-height: 300px;
  overflow-y: auto;

  /* 动画初始状态: 隐藏、缩小、透明 */
  opacity: 0;
  transform: scaleY(0.8);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none;
}

.custom-select-options::-webkit-scrollbar {
  display: none;
}

/* 激活状态 */
.custom-select-options.dynamic-active {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}

/* 下拉模式 (默认) */
.custom-select-options.drop-down {
  transform-origin: top center;
}

/* 上拉模式 (空间不足时) */
.custom-select-options.drop-up {
  transform-origin: bottom center;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
}

/* 选项样式 */
.custom-select-option {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 500;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-select-option:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateX(2px);
}

/* 分组标题 */
.custom-select-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 12px 4px 12px;
  opacity: 0.8;
}

.custom-select-group:not(:last-child) {
  border-bottom: 1px dashed var(--border-color);
  margin-bottom: 4px;
  padding-bottom: 4px;
}

/* ============================================
   字体下载模态框样式（最新版 - 合并重复样式）
   ============================================ */
.font-download-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* [修复] 遮罩层颜色根据主题自适应 */
  background-color: rgba(0, 0, 0, 0.7);
  /* 增强背景模糊，屏蔽底层干扰 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* [修复] 浅色模式下的遮罩层 */
body[data-theme="light"] .font-download-modal {
  background-color: rgba(0, 0, 0, 0.5);
}

/* [修复] 深色模式下的遮罩层 */
body[data-theme="dark"] .font-download-modal {
  background-color: rgba(0, 0, 0, 0.75);
}

.font-download-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.font-modal-card {
  /* 使用 95% 不透明度，既保留质感又确保文字清晰可见 */
  background-color: rgba(var(--card-background-rgb), 0.95);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 30px 25px;
  width: 340px;
  text-align: center;
  /* 添加深邃的阴影，增加立体感 */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  /* 初始状态稍微下沉 */
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.font-download-modal.active .font-modal-card {
  transform: scale(1) translateY(0);
}

.font-modal-icon {
  font-size: 48px;
  color: var(--primary-color);
  margin-bottom: 15px;
  /* 给图标加一点发光效果 */
  filter: drop-shadow(0 4px 8px rgba(var(--primary-rgb), 0.3));
}

.font-modal-card h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: var(--text-color);
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.font-modal-card p#font-download-status {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 进度条轨道 */
.font-progress-bg {
  width: 100%;
  height: 8px;
  /* 使用边框颜色作为轨道背景，自动适应深浅模式 */
  background-color: var(--border-color);
  border-radius: 4px;
  margin: 20px 0 12px;
  overflow: hidden;
  position: relative;
}

/* 进度条本体 */
.font-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 4px;
  transition: width 0.15s linear;
  /* 进度条高光 */
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4);
}

#font-download-percent {
  font-size: 14px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: var(--text-color);
  font-weight: 700;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* [修复] 主题切换时确保模态框内容正确更新 */
html.theme-transitioning .font-download-modal,
html.theme-transitioning .font-modal-card,
html.theme-transitioning .font-modal-card * {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* [修复] 确保模态框图标和进度条在主题切换时正确更新 */
html.theme-transitioning .font-modal-icon,
html.theme-transitioning .font-progress-bg,
html.theme-transitioning .font-progress-bar {
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ================================================= */
/* --- 2025 "Deep Obsidian" Capsule Style (O__) --- */
/* ================================================= */

body:has(.splash-pill) {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  overflow: hidden;
  user-select: none;
  -webkit-app-region: drag;
}

.splash-pill {
  position: relative;
  width: 460px;
  /* [优化] 稍微加宽 */
  height: 120px;
  /* [优化] 稍微加高 */

  /* [优化] 核心改动：不再使用高透明，而是深色背景 + 极高模糊 */
  /* 适配深色/浅色模式的背景逻辑 */
  background: linear-gradient(145deg,
      rgba(var(--card-background-rgb), 0.98),
      rgba(var(--card-background-rgb), 0.92));

  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  /* [优化] 强力模糊，屏蔽背景干扰 */
  border-radius: 60px;
  /* [优化] 完全圆润 */

  /* [优化] 精致的边缘光 (Inner Border) */
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* 如果是浅色模式，边缘需要暗一点 */

  /* [优化] 复合阴影：一层深阴影负责立体感，一层彩色光晕负责氛围 */
  box-shadow:
    0 25px 70px -10px rgba(0, 0, 0, 0.6),
    /* 浮空阴影 */
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    /* 顶部高光 */
    0 0 40px rgba(var(--primary-rgb), 0.1);
  /* [优化] 添加微妙的彩色光晕 */

  display: flex;
  align-items: center;
  padding: 14px 28px;
  /* [优化] 增加内边距 */
  box-sizing: border-box;

  /* [优化] 进场动画：从只有一点点大弹出来 */
  animation: pillPopIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
  transform: scale(0.85) translateY(25px);
}

/* 深色/浅色模式特定微调 */
body[data-theme="light"] .splash-pill {
  background: linear-gradient(145deg, #ffffff, #f0f0f3);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* 左侧 Logo 区域 */
.pill-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* 使用深色底座让图标浮起来 */
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  margin-right: 25px;
}

.logo-icon {
  font-size: 32px;
  /* 渐变色图标 */
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(var(--primary-rgb), 0.2));
  z-index: 2;
}

/* 动态光环：只显示一个精致的圆弧 */
.logo-rotate-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary-color);
  border-right-color: var(--primary-color);
  opacity: 0.8;
  animation: spin 2s linear infinite;
}

/* 右侧内容区域 */
.pill-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.pill-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.app-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-color);
  letter-spacing: 0.5px;
}

.progress-percent {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Consolas', 'Roboto Mono', monospace;
  color: var(--primary-color);
  opacity: 0.9;
}

/* 进度条轨道 */
.progress-track {
  width: 100%;
  height: 6px;
  background: rgba(128, 128, 128, 0.15);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}

/* [优化] 进度条填充 */
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 10px;
  position: relative;
  box-shadow: 
    0 0 12px rgba(var(--primary-rgb), 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  /* [优化] 发光进度条，增强视觉效果 */
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* [优化] 平滑的进度条动画 */
  overflow: hidden;
}

/* [优化] 进度条发光效果增强 */
.progress-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

.status-text {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  opacity: 0.7;
  margin: 0;
  transition: opacity 0.3s;
}

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

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pillPopIn {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(25px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* [优化] 进度条发光效果增强 */
.progress-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* ========================================= */
/* --- 2025 Dynamic Island Toolbox UI --- */
/* ========================================= */

.toolbox-page-container {
  display: flex;
  gap: 24px;
  padding: 10px 20px 20px 20px;
  height: 100%;
  box-sizing: border-box;
}

/* --- 1. 侧边栏岛屿 (Floating Sidebar) --- */
.toolbox-sidebar-island {
  width: 200px;
  flex-shrink: 0;
  background: rgba(var(--card-background-rgb), 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 100%;
  box-sizing: border-box;
}

.sidebar-header {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 15px;
  margin-bottom: 10px;
  opacity: 0.7;
}

.sidebar-scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  /* 隐藏滚动条但保留功能 */
  scrollbar-width: none;
}

.sidebar-scroll-area::-webkit-scrollbar {
  display: none;
}

/* 侧边栏按钮 */
.island-nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: transparent;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}

.island-nav-item:hover {
  background: rgba(var(--text-color), 0.05);
}

.island-nav-item.active {
  background: rgba(var(--primary-rgb), 0.1);
  border: 0.5px solid rgba(var(--primary-rgb), 0.2);
  box-shadow: 
    0 1px 3px rgba(var(--primary-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  position: relative;
  overflow: visible;
  transform: translateX(4px);
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.island-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--primary-color);
  border-radius: 0 2px 2px 0;
  opacity: 0.8;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.island-nav-item.active .nav-text {
  color: var(--primary-color);
}

/* 选中时的小圆点指示器（可选） */
.nav-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  margin-right: 12px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s;
}

.island-nav-item.active .nav-indicator {
  display: none; /* 使用左侧指示条替代 */
}

/* --- 2. 主内容区 --- */
.toolbox-main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 20px;
}

/* --- 3. 顶部搜索岛屿 (Header Island) --- */
.toolbox-header-island {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(var(--card-background-rgb), 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 12px 24px;
  flex-shrink: 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.header-title {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.island-search-wrapper {
  position: relative;
  width: 300px;
  transition: width 0.3s ease;
}

.island-search-wrapper:focus-within {
  width: 350px;
  /* 聚焦时变长 */
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 14px;
  pointer-events: none;
}

#toolbox-search {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: rgba(var(--bg-color-rgb), 0.6);
  color: var(--text-color);
  font-size: 14px;
  transition: all 0.3s;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

#toolbox-search:focus {
  outline: none;
  background: rgba(var(--bg-color-rgb), 0.9);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

/* --- 4. Bento Grid (便当盒网格) --- */
.toolbox-bento-grid {
  display: grid;
  /* 自动适应宽度，卡片最小宽度 240px */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 5px;
  /* 留出一点空间给滚动条 */
  padding-bottom: 20px;
  align-content: start;
  /* 内容不足时靠上对齐 */
}

/* Bento Card 样式 */
.bento-card {
  position: relative;
  background: rgba(var(--card-background-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 20px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  /* 进场动画 */
  opacity: 0;
  animation: bentoFadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.bento-card:hover {
  transform: translateY(-5px);
  /* 悬浮上移 */
  background: rgba(var(--card-background-rgb), 0.8);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(var(--primary-rgb), 0.1) inset;
}

.bento-card:active {
  transform: scale(0.98);
  /* 点击按压 */
}

/* 卡片背景光晕 */
.card-bg-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--primary-rgb), 0.05), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.bento-card:hover .card-bg-glow {
  opacity: 1;
}

.card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

/* 图标容器 */
.bento-icon-box {
  width: 54px;
  height: 54px;
  background: rgba(var(--bg-color-rgb), 0.8);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.bento-card:hover .bento-icon-box {
  transform: scale(1.1) rotate(5deg);
  background: var(--primary-color);
}

.bento-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  /* 适配深色/浅色模式的图标颜色翻转，根据实际图标类型调整 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: filter 0.3s;
}

.bento-card:hover .bento-icon-img {
  filter: brightness(0) invert(1);
  /* 悬浮时图标变白 */
}

/* 右上角箭头 */
.action-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 12px;
  opacity: 0.5;
  transition: all 0.3s;
}

.bento-card:hover .action-arrow {
  opacity: 1;
  background: var(--text-color);
  color: var(--bg-color-rgb);
  /* 反色 */
  border-color: transparent;
  transform: rotate(-45deg);
  /* 箭头指向右上 */
}

/* 文本区域 */
.tool-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--text-color);
}

.tool-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  /* 限制显示2行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.8;
}

/* 状态徽章 */
.status-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.status-badge.maintenance {
  background: rgba(var(--error-color-rgb), 0.1);
  color: var(--error-color);
  border: 1px solid rgba(var(--error-color-rgb), 0.2);
}

/* 禁用状态 */
.bento-card.disabled {
  opacity: 0.7;
  filter: grayscale(0.8);
  cursor: not-allowed;
}

.bento-card.disabled:hover {
  transform: none;
  box-shadow: none;
  background: rgba(var(--card-background-rgb), 0.5);
}

.bento-card.disabled .bento-icon-box {
  background: rgba(var(--bg-color-rgb), 0.5);
  transform: none;
}

.bento-card.disabled:hover .bento-icon-img {
  filter: none;
}

/* 空状态 */
.empty-island-state {
  grid-column: 1 / -1;
  /* 占满所有列 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 15px;
  opacity: 0.5;
}

/* 动画关键帧 */
@keyframes bentoFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

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

/* ========================================= */
/* --- 2025 "Island Grid" System --- */
/* ========================================= */

.toolbox-bento-grid {
  display: grid;
  /* [优化] 增加最小宽度，防止挤压，并防止横向滚动条 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden; /* [优化] 防止横向滚动条 */
  padding: 5px 10px 20px 5px;
  /* 增加 padding 防止阴影被截断 */
  align-content: start;
  /* [优化] 确保内容不超出容器 */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* --- 核心卡片样式 --- */
.island-card {
  position: relative;
  /* [修复] 强制横向布局，解决文字消失问题 */
  display: flex;
  align-items: center;
  gap: 15px;

  height: 80px;
  /* 固定高度，确保统一 */
  padding: 0 20px;
  /* [优化] 确保健康指示器不被裁剪 */
  overflow: visible;

  /* [修复] 增加背景不透明度，解决看不清的问题 */
  background: rgba(var(--card-background-rgb), 0.7);
  backdrop-filter: blur(20px) saturate(180%);

  border: 1px solid var(--border-color);
  border-radius: 20px;
  /* 更加圆润的岛屿造型 */

  cursor: pointer;
  overflow: visible; /* [优化] 改为visible，确保健康指示器不被裁剪 */
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 弹性贝塞尔曲线 */

  /* 进场动画 */
  opacity: 0;
  animation: islandPopIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* [优化] 悬停态：上浮 + 阴影加深 + 边框高亮，但防止超出容器 */
.island-card:hover {
  transform: translateY(-4px) scale(1.01);
  background: rgba(var(--card-background-rgb), 0.95);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow:
    0 15px 30px -5px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(var(--primary-rgb), 0.1) inset;
  /* 内发光 */
  z-index: 2;
  /* [优化] 确保悬停时不会超出容器 */
  max-width: 100%;
  box-sizing: border-box;
}

/* 点击态：按压感 */
.island-card:active {
  transform: scale(0.96) !important;
}

/* --- 1. 图标容器 (左侧锚点) --- */
.island-icon-box {
  width: 48px;
  height: 48px;
  flex-shrink: 0;

  /* 适配深浅模式的底色 */
  background: rgba(var(--bg-color-rgb), 0.8);
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s ease;
}

.island-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  /* 智能适配：浅色模式下图标加深，深色模式下图标反白 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: filter 0.3s;
}

/* 悬停时图标微动 */
.island-card:hover .island-icon-box {
  transform: scale(1.1) rotate(-5deg);
  background: var(--primary-color);
  /* 图标底色变主题色 */
}

.island-card:hover .island-icon-img {
  filter: brightness(0) invert(1);
  /* 图标变白 */
}

/* --- 2. 信息内容 (中间) --- */
.island-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* 防止文字溢出 */
}

.island-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.island-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

/* --- 3. 动作指示器 (右侧) --- */
.island-action {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  /* [优化] 确保与健康指示器不重叠 */
  position: relative;
  z-index: 1;
}

.arrow-icon {
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0;
  /* 默认隐藏 */
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.lock-icon {
  font-size: 14px;
  color: var(--error-color);
  opacity: 0.6;
}

/* [优化] 悬停时箭头滑入，但避免与健康指示器重叠 */
.island-card:hover .arrow-icon {
  opacity: 1;
  transform: translateX(0);
  color: var(--primary-color);
}

/* [优化] 当有健康指示器时，调整箭头位置避免重叠 */
.island-card:has(.tool-health-indicator):hover .arrow-icon {
  transform: translateX(-8px);
  opacity: 0.6;
}

/* [优化] 当有健康指示器时，调整箭头和锁定图标位置避免重叠 */
.island-card:has(.tool-health-indicator) .island-action {
  margin-right: 36px; /* 为健康指示器留出空间 */
}

/* [优化] 当工具被锁定且有健康指示器时，锁定图标和健康指示器不重叠 */
.island-card.disabled:has(.tool-health-indicator) .lock-icon {
  opacity: 0.8;
  position: relative;
  z-index: 1;
}

/* [优化] 健康指示器在悬停时保持可见，但缩小以避免与箭头重叠 */
.island-card:has(.tool-health-indicator):hover .tool-health-indicator {
  transform: scale(0.9);
  opacity: 0.9;
}

/* [优化] 当工具被锁定且有健康指示器时，确保两者不重叠 */
.island-card.disabled:has(.tool-health-indicator) .tool-health-indicator {
  right: 8px;
  top: 8px;
}

/* ============================================
   工具健康检查状态指示器样式
   [健康检查预留位置]
   ============================================ */
/* ============================================
   工具健康状态指示器样式（最新版 - 合并重复样式）
   ============================================ */
.tool-health-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    /* [优化] 确保健康指示器在最上层，但悬停时不影响箭头 */
    z-index: 2;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    animation: healthIndicatorPulse 2s ease-in-out infinite;
    pointer-events: auto;
    cursor: help;
}

.tool-health-indicator:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tool-health-indicator.healthy {
    background-color: rgba(16, 185, 129, 0.25);
    color: #10b981;
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.tool-health-indicator.unhealthy {
    background-color: rgba(239, 68, 68, 0.25);
    color: #ef4444;
    border: 2px solid rgba(239, 68, 68, 0.3);
    animation: healthIndicatorPulse 1.5s ease-in-out infinite;
}

.tool-health-indicator.checking {
    background-color: rgba(59, 130, 246, 0.25);
    color: #3b82f6;
    border: 2px solid rgba(59, 130, 246, 0.3);
}

@keyframes healthIndicatorPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(0.95);
    }
}

/* [完善] 工具箱卡片健康状态样式 */
.island-card.health-unhealthy {
    border-left: 3px solid rgba(239, 68, 68, 0.5);
}

.island-card.health-healthy {
    border-left: 3px solid rgba(16, 185, 129, 0.3);
}

.island-card.health-checking {
    border-left: 3px solid rgba(59, 130, 246, 0.3);
}

.island-card.disabled .tool-health-indicator {
    opacity: 0.6;
}

.island-card.disabled .tool-health-indicator {
  opacity: 0.6;
}

.island-card:hover .tool-health-indicator {
  transform: scale(1.2);
}

/* --- 背景流光 (Glow) --- */
.island-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent);
  transform: skewX(-25deg);
  transition: left 0.5s;
  pointer-events: none;
}

.island-card:hover .island-glow {
  left: 200%;
  /* 光扫过效果 */
  transition: left 0.6s ease-in-out;
}

/* --- 禁用状态 --- */
.island-card.disabled {
  opacity: 0.6;
  filter: grayscale(0.8);
  cursor: not-allowed;
  background: rgba(var(--card-background-rgb), 0.3);
}

.island-card.disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-color);
}

.island-card.disabled .island-icon-box {
  background: rgba(var(--bg-color-rgb), 0.5);
  transform: none;
}

.island-card.disabled:hover .island-icon-img {
  filter: none;
}

/* 进场动画 */
@keyframes islandPopIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
  }

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

/* ========================================= */
/* --- 2025 "Total Island" Design Language --- */
/* ========================================= */

/* --- 1. 媒体资源岛屿 (Media Island Card) --- */
/* 继承基础 Island Card，但针对媒体展示优化 */
.island-media-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 90px;
  /* 比普通工具卡片稍高，容纳缩略图 */
  padding: 0 16px;

  background: rgba(var(--card-background-rgb), 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  /* 更大的圆角 */

  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  animation: islandPopIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.island-media-card:hover {
  transform: translateY(-4px) scale(1.01);
  background: rgba(var(--card-background-rgb), 0.95);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow:
    0 15px 35px -5px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(var(--primary-rgb), 0.1) inset;
  z-index: 2;
}

.island-media-card:active {
  transform: scale(0.96) !important;
}

/* 缩略图视窗 */
.island-thumbnail-box {
  width: 100px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.island-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.island-media-card:hover .island-thumbnail-img {
  transform: scale(1.1);
  /* 悬浮时图片微缩放 */
}

/* 播放图标 (Action) */
.play-icon {
  font-size: 20px;
  color: var(--primary-color);
  opacity: 0.6;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.island-media-card:hover .play-icon {
  opacity: 1;
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.5));
}

/* --- 2. 灵动岛按钮系统 (Island Buttons) --- */
/* 重置并覆盖原有按钮样式 */
.action-btn,
.control-btn,
.back-btn,
.page-btn,
.update-button {
  border-radius: 999px;
  /* 完全胶囊化 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: 600;
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
}

/* 主要操作按钮 (实心发光) */
.action-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border: none;
  /* 渐变背景不需要边框 */
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4);
}

.action-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.5);
  filter: brightness(1.1);
}

.action-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.4);
}

/* 次要/控制按钮 (磨砂玻璃) */
.control-btn,
.back-btn {
  background: rgba(var(--card-background-rgb), 0.6);
  color: var(--text-color);
  border-color: var(--border-color);
}

.control-btn:hover,
.back-btn:hover {
  background: rgba(var(--card-background-rgb), 0.9);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.control-btn:active,
.back-btn:active {
  transform: scale(0.95);
}

/* 小按钮 (Mini Island) */
.action-btn.mini-btn,
.control-btn.mini-btn {
  padding: 6px 16px;
  font-size: 13px;
  border-radius: 12px;
  /* 小按钮用稍微方一点的圆角 */
}

/* --- 3. 悬浮/下拉菜单岛屿 (Floating Island Menus) --- */
.custom-select-options,
.update-slide-out-panel,
.modal-content,
.toast-notification {
  /* 统一的岛屿质感 */
  background: rgba(var(--card-background-rgb), 0.85) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* 下拉菜单项优化 */
.custom-select-option {
  margin: 4px;
  /* 留出边距 */
  border-radius: 16px;
  /* 圆角条目 */
  transition: all 0.2s ease;
  font-weight: 500;
}

.custom-select-option:hover {
  background: rgba(var(--primary-rgb), 0.15) !important;
  color: var(--primary-color) !important;
  padding-left: 18px;
  /* 悬浮时文字右移一点，增加动感 */
}

/* 侧边栏按钮优化 */
.toolbox-category-btn,
.settings-nav-item,
.island-nav-item {
  border-radius: 99px !important;
  /* 胶囊形状 */
}

/* 修复：深色模式下的边框微调 */
body[data-theme="dark"] .island-card,
body[data-theme="dark"] .island-media-card,
body[data-theme="dark"] .action-btn,
body[data-theme="dark"] .control-btn {
  border-color: rgba(255, 255, 255, 0.08);
}

/* --- 4. 输入框岛屿化 --- */
input[type="text"],
input[type="password"],
textarea,
.settings-input-text {
  border-radius: 16px;
  background: rgba(var(--bg-color-rgb), 0.5);
  border: 1px solid transparent;
  transition: all 0.3s ease;
  padding: 12px 16px;
}

input:focus,
textarea:focus {
  background: rgba(var(--bg-color-rgb), 0.8);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
  /* 柔和的扩散光圈 */
  outline: none;
}

/* ======================================================= */
/* --- 2025 Universal Sub-Window UI (Island Container) --- */
/* ======================================================= */

/* 1. 基础环境复位 */
body.tool-window-body {
  background: transparent !important;
  /* 必须透明，由 frame 负责背景 */
  margin: 0;
  padding: 5px;
  /* 留出一点空隙给阴影和光晕 */
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* 2. 核心玻璃框架 (The Glass Slab) */
.app-glass-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  /* 玻璃质感背景 */
  background: rgba(var(--card-background-rgb), 0.85);
  backdrop-filter: blur(30px) saturate(180%);

  border-radius: 20px;
  /* 统一大圆角 */
  border: 1px solid rgba(128, 128, 128, 0.1);
  /* 默认微弱边框 */

  /* 默认阴影 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  position: relative;
}

/* [焦点状态] 呼吸发光边框 */
.app-glass-frame.focused {
  /* 边框变色 */
  border-color: rgba(var(--primary-rgb), 0.5);
  /* 核心发光效果 */
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.3),
    /* 深度阴影 */
    0 0 0 2px rgba(var(--primary-rgb), 0.3),
    /* 外发光圈 */
    inset 0 0 20px rgba(var(--primary-rgb), 0.05);
  /* 内发光 */
}

/* 3. 悬浮标题栏 (Floating Header) */
.glass-title-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  -webkit-app-region: drag;
  /* 允许拖动 */
  border-bottom: 1px solid rgba(128, 128, 128, 0.05);
  background: rgba(var(--bg-color-rgb), 0.3);
  /* 稍微深一点的头部 */
  flex-shrink: 0;
}

/* 状态指示点 (类似 Mac 左上角，这里作为连接指示灯) */
.window-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-secondary);
  opacity: 0.3;
  margin-right: 12px;
  transition: all 0.3s;
}

.window-status-dot.active {
  background-color: var(--success-color);
  box-shadow: 0 0 8px var(--success-color);
  opacity: 1;
}

.glass-title-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: 0.5px;
  flex-grow: 1;
  text-align: center;
  opacity: 0.9;
}

/* 窗口控制按钮组 */
.island-controls {
  display: flex;
  gap: 8px;
  -webkit-app-region: no-drag;
}

.control-pill {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.control-pill:hover {
  background: rgba(var(--text-color), 0.1);
  color: var(--text-color);
}

.control-pill.close:hover {
  background: var(--error-color);
  color: white;
}

/* 简单的图标绘制 */
.icon-line {
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.icon-rect {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

/* 4. 内容区域修正 */
.secret-content {
  padding: 0 !important;
  /* 让内部元素自己决定边距 */
  display: flex;
  flex-direction: column;
}

/* ===================================================== */
/* --- Table to Island Transformation (表格 -> 岛屿) --- */
/* ===================================================== */
/* 这里的魔法是将原本丑陋的表格强制转换为漂亮的列表 */

/* 针对热榜、DNS查询等所有表格 */
.hotboard-table,
.ip-comparison-table,
.bili-hot-table {
  display: block !important;
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  /* 垂直间距实现岛屿分离 */
  padding: 0 15px !important;
  box-sizing: border-box;
}

/* 表头：隐藏或简化 */
.hotboard-table thead,
.ip-comparison-table thead {
  display: table-header-group;
}

.hotboard-table th,
.ip-comparison-table th {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 5px 15px;
  border: none !important;
  text-transform: uppercase;
  opacity: 0.7;
}

/* 表体：转换为 Flex 容器的集合 */
.hotboard-table tbody,
.ip-comparison-table tbody {
  display: block;
}

/* 行：这就是我们的“岛屿” */
.hotboard-table tr,
.ip-comparison-table tr,
.bili-hot-table tr {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(var(--card-background-rgb), 0.6);
  /* 半透明背景 */
  border: 1px solid var(--border-color);
  border-radius: 16px;
  /* 圆润岛屿 */

  padding: 12px 20px;
  margin-bottom: 12px;

  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: default;
}

/* 悬停效果：上浮 */
.hotboard-table tr:hover,
.ip-comparison-table tr:hover,
.bili-hot-table tr:hover {
  transform: translateY(-2px) scale(1.005);
  background: rgba(var(--card-background-rgb), 0.9);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* 单元格微调 */
.hotboard-table td,
.ip-comparison-table td,
.bili-hot-table td {
  border: none !important;
  /* 移除所有默认边框 */
  padding: 0 !important;
  display: block;
}

/* 热榜排名的特殊优化 (Rank Badges) */
.bili-hot-rank,
.hotboard-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  background: rgba(var(--text-color), 0.1);
  color: var(--text-secondary);
  margin-right: 15px;
}

/* 前三名高亮 (Fire Gradient) */
.rank-1 {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 165, 0, 0.4);
}

.rank-2 {
  background: linear-gradient(135deg, #E0E0E0, #B0B0B0);
  color: white;
}

.rank-3 {
  background: linear-gradient(135deg, #CD7F32, #A0522D);
  color: white;
}

/* 标题文字优化 */
.hotboard-title-link,
.bili-hot-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.4;
  display: block;
}

.hotboard-title-link:hover {
  color: var(--primary-color);
}

/* 热度值优化 */
.hotboard-value {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  color: var(--primary-color);
  background: rgba(var(--primary-rgb), 0.1);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 700;
}

/* 标签优化 (新/爆/热) */
.hotboard-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 700;
  transform: translateY(-1px);
  display: inline-block;
}

.hotboard-tag.tag-new {
  background: rgba(52, 199, 89, 0.15);
  color: #34c759;
}

.hotboard-tag.tag-hot {
  background: rgba(255, 59, 48, 0.15);
  color: #ff3b30;
}

/* --- 输入框和按钮区域适配 --- */
.tool-window-body .ip-input-group {
  background: rgba(var(--bg-color-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  gap: 10px;
}

.tool-window-body .ip-input-group input {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 8px 12px;
}

.tool-window-body .ip-input-group input:focus {
  background: transparent;
  box-shadow: none;
}

/* 覆盖之前可能存在的背景色 */
.content-area,
.settings-section {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ======================================================= */
/* --- 2025 Universal Sub-Window UI (Island Container) --- */
/* ======================================================= */

/* 1. 基础环境复位 & 修复圆角溢出 */
body.tool-window-body {
  background: transparent !important;
  margin: 0;
  padding: 10px;
  /* 增加留白，让发光阴影完整显示 */
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* [修复] 在子窗口中彻底隐藏全局背景层，防止它撑出方角 */
body.tool-window-body #background-layer {
  display: none !important;
}

/* 2. 核心玻璃框架 (The Glass Slab) */
.app-glass-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  /* 背景：高透磨砂 */
  background: rgba(var(--card-background-rgb), 0.90);
  backdrop-filter: blur(40px) saturate(180%);

  border-radius: 24px;
  /* 更大的圆角 */
  border: 1px solid rgba(128, 128, 128, 0.15);

  /* 基础阴影 */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);

  /* [核心修复] 强制 GPU 渲染以修复 border-radius 裁切失效的问题 */
  transform: translate3d(0, 0, 0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  /* 强制遮罩裁切 */
  overflow: hidden;
  position: relative;
  z-index: 1;

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

/* [焦点状态] 呼吸发光边框 */
.app-glass-frame.focused {
  background: rgba(var(--card-background-rgb), 0.96);
  /* 激活时稍微不透明一点，提升可读性 */
  border-color: rgba(var(--primary-rgb), 0.4);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.35),
    /* 深邃投影 */
    0 0 0 2px rgba(var(--primary-rgb), 0.3),
    /* 焦点光环 */
    inset 0 0 30px rgba(var(--primary-rgb), 0.05);
  /* 内部辉光 */
}

/* 3. 悬浮标题栏 (Floating Header) */
.glass-title-bar {
  height: 48px;
  /* 稍微加高 */
  display: flex;
  align-items: center;
  padding: 0 18px;
  -webkit-app-region: drag;
  /* 标题栏背景渐变，增加质感 */
  background: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 0.5), rgba(var(--bg-color-rgb), 0.2));
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
  flex-shrink: 0;
  z-index: 10;
}

.window-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--border-color);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  margin-right: 14px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.window-status-dot.active {
  background-color: var(--success-color);
  box-shadow: 0 0 10px var(--success-color);
  transform: scale(1.1);
}

.glass-title-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: 0.5px;
  flex-grow: 1;
  text-align: center;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 4. 内容区域修正 */
.secret-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  /* 修复滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

/* ========================================================== */
/* --- List Islands (列表岛屿化 - 解决丑陋列表的问题) --- */
/* ========================================================== */

/* 强制重置表格为 Flex 列表 */
.hotboard-table,
.ip-comparison-table,
.bili-hot-table {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  /* 岛屿间距 */
  padding: 20px !important;
  box-sizing: border-box;
  width: 100%;
}

/* 隐藏表头 */
.hotboard-table thead,
.ip-comparison-table thead,
.bili-hot-table thead {
  display: none !important;
}

/* 将每一行 (tr) 变成一个漂亮的岛屿卡片 */
.hotboard-table tbody tr,
.ip-comparison-table tbody tr,
.bili-hot-table tbody tr {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(var(--bg-color-rgb), 0.6);
  /* 浅色背景区分 */
  border: 1px solid var(--border-color);
  border-radius: 18px;
  /* 圆角岛屿 */

  padding: 14px 20px;
  margin: 0 !important;

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 悬停动效：上浮 + 边框高亮 + 光晕 */
.hotboard-table tbody tr:hover,
.ip-comparison-table tbody tr:hover,
.bili-hot-table tbody tr:hover {
  transform: translateY(-3px) scale(1.01);
  background: rgba(var(--card-background-rgb), 0.95);
  border-color: rgba(var(--primary-rgb), 0.4);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(var(--primary-rgb), 0.1);
  z-index: 2;
}

/* 单元格内容布局优化 */
.hotboard-table td,
.ip-comparison-table td,
.bili-hot-table td {
  display: block;
  border: none !important;
  padding: 0 !important;
}

/* --- 专用列样式优化 --- */

/* 1. 排名列 (左侧) */
.hotboard-table td:first-child,
.bili-hot-table td:first-child {
  flex-shrink: 0;
  width: 40px;
}

.bili-hot-rank,
.hotboard-rank,
/* 兼容旧逻辑，如果是纯数字文本 */
.hotboard-table td:first-child span {
  font-family: 'Impact', sans-serif;
  font-size: 18px;
  color: var(--text-secondary);
  opacity: 0.5;
  font-style: italic;
  width: 30px;
  text-align: center;
  display: inline-block;
}

/* 前三名徽章化 */
.rank-top-3 {
  opacity: 1 !important;
  font-style: normal !important;
  color: white !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 28px;
  border-radius: 8px;
  background: var(--primary-color);
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.4);
  font-weight: bold;
}

.rank-1 {
  background: linear-gradient(135deg, #FFD700, #FFA500);
}

.rank-2 {
  background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
}

.rank-3 {
  background: linear-gradient(135deg, #CD7F32, #A0522D);
}

/* 2. 标题列 (中间，自适应) */
.hotboard-table td:nth-child(2),
.bili-hot-table td:nth-child(2) {
  flex-grow: 1;
  padding: 0 15px !important;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotboard-title-link,
.bili-hot-title {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s;
}

.hotboard-title-link:hover,
.bili-hot-title:hover {
  color: var(--primary-color);
}

/* 3. 热度/数值列 (右侧) */
.hotboard-table td:last-child,
.bili-hot-table td:last-child {
  flex-shrink: 0;
  text-align: right;
}

.hotboard-value {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-color);
  background: rgba(var(--primary-rgb), 0.1);
  padding: 4px 10px;
  border-radius: 99px;
  /* 胶囊 */
}

/* --- 工具输入栏美化 --- */
.tool-window-body .ip-input-group {
  background: rgba(var(--bg-color-rgb), 0.4);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 6px;
  margin-bottom: 20px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(10px);
}

.tool-window-body .ip-input-group input {
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 15px;
  padding-left: 12px;
}

.tool-window-body .ip-input-group input:focus {
  background: transparent;
  box-shadow: none;
}

/* 修复按钮在输入组中的样式 */
.tool-window-body .ip-input-group button {
  border-radius: 14px;
  height: 36px;
  /* 统一高度 */
  margin-left: 5px;
}

/* ======================================================= */
/* --- FIX: Sub-Window Corner Clipping (子窗口圆角修复) --- */
/* ======================================================= */

/* 1. 强制根节点透明，防止默认底色溢出 */
html,
body.tool-window-body {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2. 优化玻璃框架的裁切逻辑 */
.app-glass-frame {
  /* 保持原有的背景和模糊 */
  background: rgba(var(--card-background-rgb), 0.90);
  backdrop-filter: blur(40px) saturate(180%);

  /* [核心修复] 使用 clip-path 进行物理级裁切，彻底消除方角 */
  /* 注意：border-radius 和 clip-path 必须匹配 */
  border-radius: 20px;
  clip-path: inset(0px round 20px);

  /* 配合 clip-path，阴影需要由另一个伪元素或父元素提供，
       或者使用 drop-shadow filter (性能稍低但对透明窗口有效) */
  box-shadow: none;
  /* 移除 box-shadow，因为它会被 clip-path 切掉 */
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.25));
  /* 改用滤镜阴影 */

  /* 确保边框在裁切内 */
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* 强制 GPU 加速 */
  transform: translateZ(0);
  will-change: transform;

  /* 留出 margin 给 drop-shadow 显示 */
  margin: 10px;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
}

/* 修复全屏/最大化时的逻辑 (可选) */
.tool-window-body.maximized .app-glass-frame {
  margin: 0;
  height: 100%;
  width: 100%;
  border-radius: 0;
  clip-path: none;
}

/* ========================================= */
/* --- 主窗口圆角优化 --- */
/* ========================================= */

/* 确保主窗口内容区域有圆角 */
body#app-body .main-content {
    border-radius: 16px;
    overflow: hidden;
}

body#app-body .content-area {
    border-radius: 0 0 16px 16px;
}

/* 导航栏圆角 */
.navbar {
    border-radius: 16px 0 0 16px;
}

/* 标题栏圆角 */
.title-bar {
    border-radius: 0 16px 0 0;
}

/* ======================================================= */
/* --- 2025 Settings Control Center (设置页灵动岛重制) --- */
/* ======================================================= */

.settings-page-container {
  display: flex;
  gap: 24px;
  height: 100%;
  padding: 10px 20px 20px 0;
  /* 调整内边距 */
  box-sizing: border-box;
}

/* --- 左侧导航岛 --- */
.settings-nav-island {
  width: 220px;
  flex-shrink: 0;
  background: rgba(var(--card-background-rgb), 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-group-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 15px;
  padding-left: 10px;
  opacity: 0.6;
}

/* --- 右侧内容岛容器 --- */
.settings-content-island {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 5px;

  /* 隐藏内容面板切换时的溢出 */
  position: relative;
}

/* 面板布局 */
.settings-panel {
  display: none;
  animation: slideUpFade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.settings-panel.active {
  display: block;
}

/* 通用设置卡片 (Setting Island) */
.setting-island {
  background: rgba(var(--card-background-rgb), 0.6);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.setting-island:hover {
  background: rgba(var(--card-background-rgb), 0.8);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

.setting-island h2 {
  font-size: 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 设置项行 */
.setting-row-island {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-color);
}

.setting-row-island:last-child {
  border-bottom: none;
}

/* --- 状态仪表盘 (Dashboard Grid) --- */
.status-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.status-card {
  background: rgba(var(--bg-color-rgb), 0.5);
  border-radius: 18px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.status-card-value {
  font-size: 24px;
  font-weight: 700;
  font-family: 'Consolas', monospace;
  color: var(--text-color);
}

/* 进度条样式微调 */
.island-progress-track {
  height: 8px;
  background: rgba(128, 128, 128, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.island-progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* --- 开发者卡片 (Profile Card) --- */
.dev-profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--secondary-rgb), 0.1));
  border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.dev-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: white;
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
}

/* 动画 */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================= */
/* --- 2025 Log Island UI (时光轴岛屿) --- */
/* ========================================= */

.logs-page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 20px 0 20px;
  /* 顶部留白给控制台 */
  gap: 20px;
  box-sizing: border-box;
}

/* --- 1. 顶部控制岛 (Control Island) --- */
.logs-header-island {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(var(--card-background-rgb), 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 12px 24px;
  flex-shrink: 0;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.logs-title {
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-color), var(--text-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logs-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 日期选择器岛屿化 */
#log-date-picker {
  background: rgba(var(--bg-color-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 8px 12px;
  color: var(--text-color);
  font-family: 'Consolas', monospace;
  font-weight: 600;
  outline: none;
  transition: all 0.3s;
}

#log-date-picker:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* --- 2. 日志内容容器 --- */
.logs-container {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 5px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  /* 日期间距 */
}

/* 隐藏滚动条但保留功能 */
.logs-container::-webkit-scrollbar {
  width: 4px;
}

.logs-container::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* --- 3. 每日分组 (Day Group) --- */
.log-day-group {
  position: relative;
  padding-left: 20px;
  /* 为左侧线条留空 */
}

/* 左侧时光轴线条 */
.log-day-group::before {
  content: '';
  position: absolute;
  top: 40px;
  /* 从日期胶囊下方开始 */
  bottom: 0;
  left: 9px;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary-color), transparent);
  opacity: 0.3;
}

/* 日期胶囊 (Sticky Header) */
.log-date-pill {
  position: sticky;
  top: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: var(--primary-color);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.4);
  margin-bottom: 15px;
  margin-left: -10px;
  /* 修正对齐 */
}

/* --- 4. 日志卡片岛屿 (Log Card Island) --- */
.log-card-island {
  position: relative;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  gap: 15px;

  background: rgba(var(--card-background-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 12px 18px;
  margin-bottom: 10px;

  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: default;
}

.log-card-island:hover {
  transform: translateX(5px) scale(1.01);
  background: rgba(var(--card-background-rgb), 0.9);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.1);
}

/* 时间戳 */
.log-time {
  font-family: 'Consolas', monospace;
  font-size: 13px;
  color: var(--text-secondary);
  width: 65px;
  /* 固定宽度对齐 */
  flex-shrink: 0;
  font-weight: 600;
}

/* 分类图标盒 (Visual Anchor) */
.log-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  transition: transform 0.3s;
}

.log-card-island:hover .log-icon-box {
  transform: scale(1.1) rotate(10deg);
}

/* 分类配色系统 */
.cat-system {
  background: rgba(52, 199, 89, 0.15);
  color: #34c759;
}

/* Green */
.cat-error {
  background: rgba(255, 59, 48, 0.15);
  color: #ff3b30;
}

/* Red */
.cat-update {
  background: rgba(255, 204, 0, 0.15);
  color: #ffcc00;
}

/* Yellow */
.cat-tool {
  background: rgba(175, 82, 222, 0.15);
  color: #af52de;
}

/* Purple */
.cat-general {
  background: rgba(142, 142, 147, 0.15);
  color: #8e8e93;
}

/* Gray */

/* 日志文本 */
.log-text {
  flex-grow: 1;
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.5;
  word-break: break-all;
}

/* 子标签 (e.g. 工具名) */
.log-sub-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(var(--text-color), 0.05);
  color: var(--text-secondary);
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(128, 128, 128, 0.1);
}

/* 复制按钮 (悬浮显示) */
.log-copy-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s;
  cursor: pointer;
}

.log-card-island:hover .log-copy-btn {
  opacity: 1;
}

.log-copy-btn:hover {
  background: var(--bg-color-rgb);
  color: var(--primary-color);
}

/* ========================================= */
/* --- 2025 Liquid Navbar & Page Transitions --- */
/* ========================================= */

/* --- 1. 导航栏容器 --- */
.navbar {
  width: 80px;
  /* 稍微加宽一点，给滑块留出呼吸空间 */
  background-color: rgba(var(--card-background-rgb), var(--navbar-opacity));
  backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 0;
  border-right: 1px solid var(--border-color);
  z-index: 10;
  flex-shrink: 0;
  transition: background-color var(--transition-duration) ease;
  position: relative;
  /* 为绝对定位的滑块提供基准 */
}

/* --- 2. 灵动滑块 (The Liquid Slider) --- */
.nav-slider-pill {
  position: absolute;
  left: 15px;
  /* 居中计算: (80 - 50) / 2 */
  top: 25px;
  /* 初始位置，JS 会控制 */
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 16px;
  /* 方圆风格 */

  /* 核心动画：弹性贝塞尔曲线，模拟物理惯性 */
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 视觉特效 */
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4);
  z-index: 1;
  /* 在按钮背景之上，但在图标之下 */
  pointer-events: none;
  /* 不干扰点击 */
}

/* --- 3. 导航按钮 --- */
.nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background-color: transparent;
  /* 背景交给滑块 */
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  margin-bottom: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  /* 确保在滑块之上 */
  transition: all 0.3s ease;
}

/* 悬停态 (非激活) */
.nav-btn:hover:not(.active) {
  color: var(--text-color);
  background-color: rgba(var(--text-color), 0.05);
  transform: scale(1.05);
}

/* 点击/激活态 */
.nav-btn.active {
  color: white;
  /* 在彩色滑块上显示白色 */
  /* 移除旧的背景和动画，完全依赖滑块 */
  background: transparent;
  box-shadow: none;
  animation: none;
}

/* 点击时的微缩反馈 */
.nav-btn:active {
  transform: scale(0.9);
}

/* 底部网络状态不需要滑块 */
#network-status,
#network-speed {
  z-index: 2;
}

/* --- 4. 页面转场动画 (Page Transitions) --- */

/* 页面内容容器 */
#content-area {
  /* 确保容器有相对定位，方便动画 */
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 防止动画过程中溢出 */
}

/* 旧页面离场：下沉 + 模糊 + 变透明 */
.page-exit {
  animation: pageExitAnim 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 新页面进场：上浮 + 清晰 + 显现 */
.page-enter {
  animation: pageEnterAnim 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  /* 带弹性的进场 */
}

@keyframes pageExitAnim {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
    filter: blur(4px);
  }
}

@keyframes pageEnterAnim {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* ========================================= */
/* --- Fix: Input Visibility (输入框显形) --- */
/* ========================================= */

/* 覆盖所有输入框的基础样式，确保可见 */
input[type="text"],
input[type="password"],
textarea,
.settings-input-text,
.tool-window-body .ip-input-group input {
  /* [核心] 给一个默认的半透明背景，不再是 transparent */
  background-color: rgba(var(--bg-color-rgb), 0.6) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 14px !important;
  color: var(--text-color);
  padding: 10px 14px;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
  /* 轻微内阴影增加层次 */
}

/* 聚焦时的灵动光效 */
input:focus,
textarea:focus,
.tool-window-body .ip-input-group input:focus {
  background-color: rgba(var(--bg-color-rgb), 0.95) !important;
  border-color: var(--primary-color) !important;
  box-shadow:
    0 0 0 4px rgba(var(--primary-rgb), 0.15),
    0 4px 10px rgba(0, 0, 0, 0.05) !important;
  outline: none;
  transform: translateY(-1px);
  /* 聚焦微上浮 */
}

/* 修复工具窗口中输入组容器的样式，去除多余边框 */
.tool-window-body .ip-input-group {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 10px;
}

/* ======================================================== */
/* --- 2025 Island Modal & Slide Panel (灵动岛弹窗体系) --- */
/* ======================================================== */

/* --- 1. 全局模态框 (Modal Island) --- */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.3);
  /* 降低背景遮罩浓度，更通透 */
  backdrop-filter: blur(5px);
}

.modal-content {
  /* [重制] 悬浮岛屿风格 */
  background: rgba(var(--card-background-rgb), 0.85);
  backdrop-filter: blur(35px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  /* 超大圆角 */

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.4),
    /* 氛围深阴影 */
    0 0 0 1px rgba(var(--primary-rgb), 0.1) inset;
  /* 内发光 */

  width: 90%;
  max-width: 480px;
  padding: 0;
  /* 内容贴边，由内部元素控制 padding */
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 弹性进场 */
}

/* 激活状态 */
.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* 模态框头部 */
.modal-header {
  padding: 20px 25px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  background: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 0.5), transparent);
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  border: none;
  /* 移除可能的旧边框 */
  padding: 0;
}

.modal-body {
  padding: 25px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-color);
  max-height: 60vh;
  overflow-y: auto;
}

/* --- 2. 侧边更新日志 (Floating Slide Island) --- */
.update-slide-out-panel {
  /* [核心] 不再贴边，而是悬浮在右侧 */
  top: 20px;
  right: 20px;
  bottom: 20px;
  height: auto;
  /* 由 top/bottom 决定 */
  width: 420px;
  max-width: 90vw;

  background: rgba(var(--card-background-rgb), 0.90);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  /* 岛屿圆角 */

  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);

  /* 进场动画：从右侧滑入并带有弹性 */
  transform: translateX(120%) scale(0.95);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  opacity: 0;

  display: flex;
  flex-direction: column;
  z-index: 2000;
  /* 确保在最上层 */
}

.update-slide-out-panel.active {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* 更新面板头部 */
.update-panel-header {
  padding: 25px;
  background: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 0.4), transparent);
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.update-panel-header h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(135deg, var(--text-color), var(--text-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 更新日志列表样式优化 */
.changelog-list {
  padding: 25px;
}

.changelog-item {
  background: rgba(var(--bg-color-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.changelog-key {
  background: var(--primary-color);
  color: white;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 8px;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
}

/* 关闭按钮通用样式 (圆形) */
#close-update-panel-btn,
#modal-close-btn {
  position: static;
  /* 恢复流布局 */
  width: 32px;
  height: 32px;
  background: rgba(var(--text-color), 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  color: var(--text-secondary);
}

#close-update-panel-btn:hover,
#modal-close-btn:hover {
  background: var(--error-color);
  color: white;
  transform: rotate(90deg);
}

/* ========================================= */
/* --- 1. 极速转场动画 (Snap Transitions) --- */
/* ========================================= */

/* 页面内容容器 */
#content-area {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 开启硬件加速，防止动画抖动 */
  transform: translateZ(0);
  will-change: opacity, transform;
}

/* 离场：极速下沉变淡 */
.page-exit {
  animation: pageExitAnim 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* 进场：极速回弹上浮 */
.page-enter {
  animation: pageEnterAnim 0.2s cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes pageExitAnim {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes pageEnterAnim {
  0% {
    opacity: 0;
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================= */
/* --- 2. 子窗口圆角与控制键修复 (Fixes) --- */
/* ========================================= */

/* 强制玻璃框架裁切一切溢出内容 */
.app-glass-frame {
  /* ...原有属性... */
  overflow: hidden !important;
  /* 核心：必须强制隐藏溢出 */
  border-radius: 20px !important;
  /* 修复 Chromium 渲染层级导致的裁切失效 */
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* 增强边框质感 */
}

/* 标题栏优化：增加拖拽区域，按钮靠右 */
.glass-title-bar {
  /* ...原有属性... */
  justify-content: space-between;
  /* 确保左右撑开 */
  padding: 0 15px;
  height: 40px;
  /*稍微调低高度更精致*/
  background: rgba(var(--card-background-rgb), 0.5);
  /* 稍微加深标题栏背景 */
}

/* [重绘] 窗口控制按钮 - 灵动岛交通灯风格 */
.island-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  -webkit-app-region: no-drag;
}

.control-pill {
  width: 14px;
  /* 小圆点 */
  height: 14px;
  border-radius: 50%;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  /* 内阴影增加立体感 */
  position: relative;
  overflow: hidden;
}

/* 默认状态颜色 (Mac 风格) */
#minimize-btn.control-pill {
  background-color: #ffbd2e;
  border: 1px solid #e09e18;
}

/* 黄 */
#maximize-btn.control-pill {
  background-color: #27c93f;
  border: 1px solid #1da830;
}

/* 绿 */
#close-btn.control-pill {
  background-color: #ff5f56;
  border: 1px solid #e0443e;
}

/* 红 */

/* 图标默认隐藏 */
.control-pill i,
.control-pill .icon-line,
.control-pill .icon-rect {
  opacity: 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 8px;
  /* 极小图标 */
  transition: opacity 0.2s;
  font-weight: 900;
}

/* 悬停时显示图标 & 稍微放大 */
.island-controls:hover .control-pill i,
.island-controls:hover .control-pill .icon-line,
.island-controls:hover .control-pill .icon-rect {
  opacity: 1;
}

.control-pill:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 修复内部图标样式 */
.icon-line {
  width: 8px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 1px;
}

.icon-rect {
  width: 6px;
  height: 6px;
  border: 1.5px solid rgba(0, 0, 0, 0.6);
  border-radius: 1px;
}

/* ========================================= */
/* --- 3. 列表内容修复 (防止贴边) --- */
/* ========================================= */

/* 给滚动区域增加内边距，防止滚动条或内容贴到圆角上 */
.hotboard-table,
.ip-comparison-table,
.bili-hot-table {
  padding: 15px !important;
  /* 内容与窗口边缘保持距离 */
  width: 100%;
  box-sizing: border-box;
}

/* 每一行卡片 */
.hotboard-table tbody tr,
.bili-hot-table tbody tr {
  /* 增加卡片质感 */
  background: rgba(var(--bg-color-rgb), 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.hotboard-table tbody tr:hover,
.bili-hot-table tbody tr:hover {
  background: rgba(var(--card-background-rgb), 0.8);
  transform: scale(1.01);
  /* 悬浮微放大 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: rgba(var(--primary-rgb), 0.3);
}

/* ========================================= */
/* --- 1. 子窗口完美圆角裁切 (物理级修复) --- */
/* ========================================= */

.app-glass-frame {
  /* ...原有背景属性... */
  background: rgba(var(--card-background-rgb), 0.90);
  backdrop-filter: blur(40px) saturate(180%);

  border-radius: 20px;
  /* [核心] 使用 clip-path 沿着圆角裁剪，彻底切掉外部的方角背景 */
  clip-path: inset(0px round 20px);

  /* 配合 clip-path，阴影必须改用 drop-shadow滤镜，否则会被切掉 */
  box-shadow: none !important;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.4));

  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: 15px;
  /* 留出更多空间给 drop-shadow 显示 */
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  overflow: hidden;
  /* 内部防溢出 */
}

/* ========================================= */
/* --- 2. 深色模式“隐形字”修复 --- */
/* ========================================= */

body[data-theme="dark"] {
  --text-color: #f5f5f7;
  /* 强制亮白 */
  --text-secondary: #a1a1a6;
  /* 浅灰 */
  --card-background-rgb: 30, 30, 32;
  /* 深灰底 */
}

/* 强制深色模式下的关键元素文字颜色 */
body[data-theme="dark"] .island-title,
body[data-theme="dark"] .tool-name,
body[data-theme="dark"] .nav-text,
body[data-theme="dark"] .setting-row-island span:first-child,
body[data-theme="dark"] .status-card-value,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] input,
body[data-theme="dark"] textarea {
  color: #ffffff !important;
}

body[data-theme="dark"] .island-desc,
body[data-theme="dark"] .tool-desc,
body[data-theme="dark"] .status-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ========================================= */
/* --- 3. 热搜榜单布局修复 (百度/B站) --- */
/* ========================================= */

/* 强制列表行 (岛屿) 使用 Flex 布局且左对齐 */
.hotboard-table tbody tr,
.bili-hot-table tbody tr {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  /* [核心] 防止两端对齐导致标题跑最右 */
  gap: 15px !important;
  width: 100%;
}

/* 排名列：固定宽度 */
.hotboard-table td:first-child,
.bili-hot-table td:first-child {
  flex: 0 0 40px !important;
  /* 不伸缩 */
  text-align: center;
  width: auto !important;
  /* 覆盖旧样式 */
}

/* 标题列：占据剩余空间，且强制单行 */
.hotboard-table td:nth-child(2),
.bili-hot-table td:nth-child(2) {
  flex: 1 1 auto !important;
  /* 自动伸缩 */
  text-align: left !important;
  width: 0;
  /* 配合 flex 实现截断的关键 */
  white-space: nowrap !important;
  /* 强制不换行 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  /* 确保 ellipsis 生效 */
}

/* 热度列 (如果有)：固定在右侧 */
.hotboard-table td:last-child {
  flex: 0 0 auto !important;
  margin-left: auto;
  /* 自动推到最右 */
}

/* 修复百度热搜竖排问题：因为原样式可能被 td { display: block } 影响 */
.hotboard-title-link,
.bili-hot-title {
  display: inline-block;
  /* 修复竖排 */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* ========================================= */
/* --- Media Player Island (灵动影音岛) --- */
/* ========================================= */

.mp-container {
  padding: 0;
  overflow: hidden;
  position: relative;
  /* 子窗口背景已透明，这里不需要额外背景 */
}

/* 顶部栏微调：透明悬浮 */
.mp-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
  border: none;
  padding: 15px 20px;
}

/* 工作区布局 */
.mp-workspace {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

/* --- 左侧：主屏幕岛 (Screen Island) --- */
.mp-screen-island {
  flex-grow: 1;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 拖拽高亮 */
  transition: box-shadow 0.3s;
}

.mp-screen-island.drag-over {
  box-shadow: inset 0 0 0 4px var(--primary-color);
}

/* 媒体内容 */
.mp-media-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-element {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* 保持比例 */
}

/* 音频可视化动画 */
.mp-audio-visual {
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.audio-icon-glow {
  font-size: 60px;
  color: var(--primary-color);
  filter: drop-shadow(0 0 20px rgba(var(--primary-rgb), 0.6));
  animation: pulse 2s infinite;
}

.audio-wave {
  display: flex;
  gap: 5px;
  height: 30px;
  align-items: center;
}

.audio-wave span {
  width: 4px;
  background: var(--text-color);
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}

.audio-wave span:nth-child(2) {
  animation-delay: 0.1s;
  height: 60%;
}

.audio-wave span:nth-child(3) {
  animation-delay: 0.2s;
  height: 100%;
}

.audio-wave span:nth-child(4) {
  animation-delay: 0.1s;
  height: 70%;
}

@keyframes wave {

  0%,
  100% {
    height: 20%;
    opacity: 0.5;
  }

  50% {
    height: 100%;
    opacity: 1;
  }
}

/* 空状态占位 */
.mp-placeholder {
  position: absolute;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  /* 让点击穿透到底层容器 */
  z-index: 10;
}

.mp-placeholder button {
  pointer-events: auto;
}

/* 按钮可点 */
.placeholder-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* --- 底部控制岛 (Floating Control Island) --- */
.mp-control-island {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);

  width: 90%;
  max-width: 600px;

  background: rgba(20, 20, 20, 0.85);
  /* 深色磨砂 */
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 15px 25px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 50;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
}

/* 自动隐藏/禁用 */
.mp-control-island.disabled {
  transform: translateX(-50%) translateY(100px);
  opacity: 0;
  pointer-events: none;
}

/* 进度条 */
.mp-progress-container {
  width: 100%;
  height: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

.mp-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.mp-progress-fill {
  height: 100%;
  background: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-color);
  border-radius: 2px;
}

.mp-progress-container:hover .mp-progress-track {
  height: 6px;
}

/* 控制行 */
.mp-control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mp-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 播放按钮 */
.mp-main-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  color: black;
  border: none;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.mp-main-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.mp-main-btn:active {
  transform: scale(0.95);
}

/* 次级按钮 */
.mp-icon-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s;
}

.mp-icon-btn:hover {
  color: white;
}

.mp-info {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  width: 100px;
}

.mp-extras {
  width: 100px;
  display: flex;
  justify-content: flex-end;
}

/* 音量滑块 */
.mp-volume-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-volume-slider-container {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  position: relative;
}

#mp-volume-slider {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 16px;
  opacity: 0;
  cursor: pointer;
}

/* 简单的可视音量条可以用伪元素或 JS 做，这里简化 */

/* --- 右侧：播放列表岛 (Playlist Island) --- */
.mp-playlist-island {
  width: 0;
  /* 默认折叠 */
  background: rgba(var(--card-background-rgb), 0.95);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  position: relative;
  z-index: 90;
}

.mp-playlist-island.active {
  width: 280px;
  /* 展开宽度 */
}

.playlist-header {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.playlist-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  margin-bottom: 5px;
}

.playlist-item:hover {
  background: rgba(var(--text-color), 0.05);
}

.playlist-item.active {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary-color);
  font-weight: 600;
}

.pl-icon {
  opacity: 0.7;
}

.pl-name {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-anim {
  width: 20px;
  text-align: center;
  font-size: 10px;
}

.playlist-footer {
  padding: 15px;
  border-top: 1px solid var(--border-color);
}

.empty-list-tip {
  text-align: center;
  color: var(--text-secondary);
  padding: 30px 0;
  font-size: 13px;
}

/* ======================================================= */
/* --- 2025 Universal Sub-Window UI (Island Container) --- */
/* ======================================================= */

/* 1. 基础环境复位 & 修复圆角溢出 */
body.tool-window-body {
  background: transparent !important;
  margin: 0;
  padding: 10px;
  /* 增加留白，让发光阴影完整显示 */
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* [修复] 在子窗口中彻底隐藏全局背景层，防止它撑出方角 */
body.tool-window-body #background-layer {
  display: none !important;
}

/* 2. 核心玻璃框架 (The Glass Slab) */
.app-glass-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  /* 背景：高透磨砂 */
  background: rgba(var(--card-background-rgb), 0.90);
  backdrop-filter: blur(40px) saturate(180%);

  border-radius: 24px;
  /* 更大的圆角 */
  border: 1px solid rgba(128, 128, 128, 0.15);

  /* 基础阴影 */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);

  /* [核心修复] 强制 GPU 渲染以修复 border-radius 裁切失效的问题 */
  transform: translate3d(0, 0, 0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  /* 强制遮罩裁切 */
  overflow: hidden;
  position: relative;
  z-index: 1;

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

/* [焦点状态] 呼吸发光边框 */
.app-glass-frame.focused {
  background: rgba(var(--card-background-rgb), 0.96);
  /* 激活时稍微不透明一点，提升可读性 */
  border-color: rgba(var(--primary-rgb), 0.4);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.35),
    /* 深邃投影 */
    0 0 0 2px rgba(var(--primary-rgb), 0.3),
    /* 焦点光环 */
    inset 0 0 30px rgba(var(--primary-rgb), 0.05);
  /* 内部辉光 */
}

/* 3. 悬浮标题栏 (Floating Header) */
.glass-title-bar {
  height: 48px;
  /* 稍微加高 */
  display: flex;
  align-items: center;
  padding: 0 18px;
  -webkit-app-region: drag;
  /* 标题栏背景渐变，增加质感 */
  background: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 0.5), rgba(var(--bg-color-rgb), 0.2));
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
  flex-shrink: 0;
  z-index: 10;
}

.window-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--border-color);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  margin-right: 14px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.window-status-dot.active {
  background-color: var(--success-color);
  box-shadow: 0 0 10px var(--success-color);
  transform: scale(1.1);
}

.glass-title-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: 0.5px;
  flex-grow: 1;
  text-align: center;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 4. 内容区域修正 */
.secret-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  /* 修复滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

/* ========================================= */
/* --- Media Player Island (灵动影音岛) --- */
/* ========================================= */

.mp-container {
  padding: 0;
  overflow: hidden;
  position: relative;
  /* 子窗口背景已透明，这里不需要额外背景 */
}

/* 顶部栏微调：透明悬浮 */
.mp-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
  border: none;
  padding: 15px 20px;
  transition: opacity 0.5s ease;
}

.mp-header.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 工作区布局 */
.mp-workspace {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

/* --- 左侧：主屏幕岛 (Screen Island) --- */
.mp-screen-island {
  flex-grow: 1;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 拖拽高亮 */
  transition: box-shadow 0.3s;
}

.mp-screen-island.drag-over {
  box-shadow: inset 0 0 0 4px var(--primary-color);
}

/* 媒体内容 */
.mp-media-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-element {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* 保持比例 */
}

/* 音频可视化动画 */
.mp-audio-visual {
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.audio-icon-glow {
  font-size: 60px;
  color: var(--primary-color);
  filter: drop-shadow(0 0 20px rgba(var(--primary-rgb), 0.6));
  animation: pulse 2s infinite;
}

.audio-wave {
  display: flex;
  gap: 5px;
  height: 30px;
  align-items: center;
}

.audio-wave span {
  width: 4px;
  background: var(--text-color);
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}

.audio-wave span:nth-child(2) {
  animation-delay: 0.1s;
  height: 60%;
}

.audio-wave span:nth-child(3) {
  animation-delay: 0.2s;
  height: 100%;
}

.audio-wave span:nth-child(4) {
  animation-delay: 0.1s;
  height: 70%;
}

@keyframes wave {

  0%,
  100% {
    height: 20%;
    opacity: 0.5;
  }

  50% {
    height: 100%;
    opacity: 1;
  }
}

/* 空状态占位 */
.mp-placeholder {
  position: absolute;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  /* 让点击穿透到底层容器 */
  z-index: 10;
}

.mp-placeholder button {
  pointer-events: auto;
}

/* 按钮可点 */
.placeholder-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* --- 底部控制岛 (Floating Control Island) --- */
.mp-control-island {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);

  width: 90%;
  max-width: 600px;

  background: rgba(20, 20, 20, 0.85);
  /* 深色磨砂 */
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 15px 25px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 50;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
}

/* 自动隐藏/禁用 */
.mp-control-island.disabled {
  transform: translateX(-50%) translateY(100px);
  opacity: 0;
  pointer-events: none;
}

.mp-control-island.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

/* 进度条 */
.mp-progress-container {
  width: 100%;
  height: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

.mp-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.mp-progress-fill {
  height: 100%;
  background: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-color);
  border-radius: 2px;
}

.mp-progress-container:hover .mp-progress-track {
  height: 6px;
}

/* 控制行 */
.mp-control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mp-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 播放按钮 */
.mp-main-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  color: black;
  border: none;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.mp-main-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.mp-main-btn:active {
  transform: scale(0.95);
}

/* 次级按钮 */
.mp-icon-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s;
}

.mp-icon-btn:hover {
  color: white;
}

.mp-info {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  width: 100px;
}

.mp-extras {
  width: 100px;
  display: flex;
  justify-content: flex-end;
}

/* 音量滑块 */
.mp-volume-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-volume-slider-container {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  position: relative;
}

#mp-volume-slider {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 16px;
  opacity: 0;
  cursor: pointer;
}

/* 简单的可视音量条可以用伪元素或 JS 做，这里简化 */

/* --- 右侧：播放列表岛 (Playlist Island) --- */
.mp-playlist-island {
  width: 0;
  /* 默认折叠 */
  background: rgba(var(--card-background-rgb), 0.95);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  position: relative;
  z-index: 90;
}

.mp-playlist-island.active {
  width: 280px;
  /* 展开宽度 */
}

.playlist-header {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.playlist-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  margin-bottom: 5px;
}

.playlist-item:hover {
  background: rgba(var(--text-color), 0.05);
}

.playlist-item.active {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary-color);
  font-weight: 600;
}

.pl-icon {
  opacity: 0.7;
}

.pl-name {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-anim {
  width: 20px;
  text-align: center;
  font-size: 10px;
}

.playlist-footer {
  padding: 15px;
  border-top: 1px solid var(--border-color);
}

.empty-list-tip {
  text-align: center;
  color: var(--text-secondary);
  padding: 30px 0;
  font-size: 13px;
}

/* ======================================================= */
/* --- 2025 Universal Sub-Window UI (Glowing Island) --- */
/* ======================================================= */

/* 1. 窗口根容器：必须透明且留出边距给阴影 */
body.tool-window-body {
  background: transparent !important;
  margin: 0;
  /* [关键] 留出 15px 边距，确保发光阴影不被系统窗口边缘切断 */
  padding: 15px;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* 隐藏全局背景，防止溢出圆角 */
body.tool-window-body #background-layer {
  display: none !important;
}

/* 2. 核心悬浮玻璃框架 */
.app-glass-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  /* 极简磨砂背景 */
  background: rgba(var(--card-background-rgb), 0.92);
  backdrop-filter: blur(40px) saturate(180%);

  border-radius: 20px;
  /* 完美圆角 */

  /* 默认状态：微弱边框 + 基础投影 */
  border: 1px solid rgba(128, 128, 128, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  /* 内部内容裁切 */
  z-index: 1;
}

/* [焦点/激活状态] 呼吸发光特效 */
.app-glass-frame.focused {
  background: rgba(var(--card-background-rgb), 0.98);
  /* 边框高亮 */
  border-color: rgba(var(--primary-rgb), 0.5);
  /* 复合发光阴影：外发光 + 内辉光 */
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.3),
    /* 模拟高亮描边 */
    0 20px 60px rgba(0, 0, 0, 0.4),
    /* 深度投影 */
    0 0 30px rgba(var(--primary-rgb), 0.15);
  /* 氛围光晕 */
}

/* 标题栏优化 */
.glass-title-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  -webkit-app-region: drag;
  /* 标题栏背景渐变 */
  background: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 0.5), rgba(var(--bg-color-rgb), 0.1));
  border-bottom: 1px solid rgba(128, 128, 128, 0.05);
  flex-shrink: 0;
}

/* ========================================= */
/* --- Media Player Island (Refined UI) --- */
/* ========================================= */

/* 播放器容器 */
.mp-container {
  padding: 0 !important;
  /* 移除内边距，全屏沉浸 */
}

.mp-workspace {
  background-color: #000;
  /* 纯黑背景 */
  border-radius: 0 0 20px 20px;
  /* 底部圆角 */
}

/* 屏幕岛：承载视频/图片 */
.mp-screen-island {
  flex-grow: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
}

/* 悬浮控制岛 (Dynamic Control Island) */
.mp-control-island {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);

  /* 宽度自适应，最大 600px */
  width: 90%;
  max-width: 640px;

  /* 深度磨砂黑 */
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(20px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  /* 胶囊圆角 */
  padding: 12px 24px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  z-index: 50;

  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 1;
}

/* 自动隐藏状态 */
.mp-control-island.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(30px) scale(0.95);
  pointer-events: none;
}

/* 进度条轨道 */
.mp-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: height 0.2s;
}

.mp-progress-container:hover .mp-progress-track {
  height: 6px;
}

/* 音量条滑块 (彩色填充) */
#mp-volume-slider {
  -webkit-appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  /* 默认底色 */
  outline: none;
  cursor: pointer;
  /* 核心：通过 JS 设置 background-image 来实现填充色 */
}

#mp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  margin-top: -3px;
  /* 居中 */
  transition: transform 0.1s;
}

#mp-volume-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}

/* 时间显示 */
.mp-info {
  font-family: 'Consolas', 'Roboto Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  min-width: 100px;
  text-align: left;
}

/* 播放列表岛 */
.mp-playlist-island {
  background: rgba(var(--card-background-rgb), 0.98);
  border-left: 1px solid rgba(128, 128, 128, 0.1);
}

/* src/css/style.css - 添加到文件末尾 */

/* ========================================= */
/* --- [需求 4] 丰富的日志图标样式 --- */
/* ========================================= */
.log-tag-system {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.2), rgba(52, 199, 89, 0.1));
  color: #34c759;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.2);
}

.log-tag-nav {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.2), rgba(0, 122, 255, 0.1));
  color: #007aff;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.log-tag-ui {
  background: linear-gradient(135deg, rgba(88, 86, 214, 0.2), rgba(88, 86, 214, 0.1));
  color: #5856d6;
  box-shadow: 0 2px 8px rgba(88, 86, 214, 0.2);
}

.log-tag-tool {
  background: linear-gradient(135deg, rgba(175, 82, 222, 0.2), rgba(175, 82, 222, 0.1));
  color: #af52de;
  box-shadow: 0 2px 8px rgba(175, 82, 222, 0.2);
}

.log-tag-update {
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 204, 0, 0.1));
  color: #ffcc00;
  box-shadow: 0 2px 8px rgba(255, 204, 0, 0.2);
}

.log-tag-settings {
  background: linear-gradient(135deg, rgba(142, 142, 147, 0.2), rgba(142, 142, 147, 0.1));
  color: #8e8e93;
}

.log-tag-error {
  background: linear-gradient(135deg, rgba(255, 59, 48, 0.2), rgba(255, 59, 48, 0.1));
  color: #ff3b30;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

.log-tag-general {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

/* ========================================= */
/* --- [需求 6] 设置面板切换动画 --- */
/* ========================================= */

/* 必须将面板改为绝对定位或 Grid 堆叠，才能实现共存时的过渡 */
/* 修改原有的 .settings-content-island 布局方式 */
.settings-content-island {
  position: relative;
  overflow: hidden;
  /* 隐藏切出的内容 */
  /* 移除 flex-grow 的滚动，改为内部面板滚动 */
}

/* 面板基础样式 */
.settings-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* 面板内部滚动 */
  padding-right: 5px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.98);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 隐藏滚动条 */
  scrollbar-width: thin;
}

/* 激活态 */
.settings-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  z-index: 2;
  /* 确保在最上层 */
}

/* 离场动画类 (JS 添加) */
.settings-panel.panel-exit {
  opacity: 0;
  transform: translateY(-20px) scale(0.98);
  z-index: 1;
}

/* 进场动画类 (JS 添加) */
.settings-panel.panel-enter {
  animation: panelEnterAnim 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes panelEnterAnim {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

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

/* src/css/style.css - 追加到文件末尾 */

/* ========================================= */
/* --- [优化] 设置面板切换防闪屏 --- */
/* ========================================= */

.settings-content-island {
  position: relative;
  /* 确保容器有高度，防止塌陷 */
  height: 100%;
  overflow: hidden;
}

.settings-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-right: 5px;

  /* 默认隐藏状态 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.98);
  /* 增加 transition-delay 防止旧页面还没消失新页面就跳出来 */
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s linear;

  background-color: transparent;
  /* 确保背景透明，避免遮挡 */
  z-index: 0;
}

/* 激活态：层级提高，立刻显示 */
.settings-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  z-index: 10;
  transition-delay: 0s;
  /* 立即执行 */
}

/* 离场态：层级降低，保留动画 */
.settings-panel.panel-exit {
  opacity: 0;
  transform: translateY(-15px) scale(0.98);
  z-index: 9;
  visibility: hidden;
}

/* ========================================= */
/* --- [需求 1] 更新管理 - 灵动岛 UI 重构 --- */
/* ========================================= */

/* 更新状态容器 */
.update-status-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  min-height: 300px;
  text-align: center;
  transition: all 0.3s ease;
}

/* 状态图标岛 */
.update-icon-island {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  position: relative;
  box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.2);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.update-icon-island i {
  font-size: 48px;
  color: var(--primary-color);
  z-index: 2;
}

/* 状态 1: 待检测 / 闲置 (呼吸灯) */
.update-state-idle .update-icon-island {
  animation: breathe 4s infinite ease-in-out;
}

/* 状态 2: 检测中 (旋转光环) */
.update-state-checking .update-icon-island::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary-color);
  border-left-color: var(--primary-color);
  animation: spin 1s linear infinite;
}

/* 状态 3: 无更新 (绿色对勾) */
.update-state-latest .update-icon-island {
  background: rgba(52, 199, 89, 0.15);
  /* Green */
  box-shadow: 0 10px 30px rgba(52, 199, 89, 0.3);
}

.update-state-latest .update-icon-island i {
  color: #34c759;
}

/* 状态 4: 发现更新 (火箭发射) */
.update-state-available .update-icon-island {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.5);
  transform: scale(1.1);
}

.update-state-available .update-icon-island i {
  color: white;
  animation: float 2s ease-in-out infinite;
}

/* 文本样式 */
.update-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--text-color), var(--text-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.update-desc {
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* 胶囊按钮组 */
.update-actions-island {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

/* --- 下载进度条 (液态岛) --- */
.download-island-container {
  width: 100%;
  max-width: 450px;
  background: rgba(var(--bg-color-rgb), 0.5);
  border-radius: 20px;
  padding: 25px;
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.download-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
}

.liquid-progress-track {
  height: 12px;
  background: rgba(128, 128, 128, 0.15);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
}

.liquid-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 10px;
  position: relative;
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5);
  transition: width 0.3s ease-out;
}

/* 进度条上的流光 */
.liquid-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

.download-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  font-family: 'Consolas', monospace;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes breathe {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.2);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.4);
  }
}

/* ========================================= */
/* --- [需求 2] PC 基准测试工具样式 --- */
/* ========================================= */
.benchmark-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  animation: contentFadeIn 0.5s;
}

.bench-card {
  background: rgba(var(--card-background-rgb), 0.6);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.bench-card h3 {
  font-size: 16px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-color);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.bench-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
}

.bench-key {
  color: var(--text-secondary);
}

.bench-val {
  font-weight: 600;
  color: var(--text-color);
  font-family: monospace;
}

/* 评分大数字 */
.bench-score-box {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--secondary-rgb), 0.1));
  border-radius: 12px;
  margin-top: auto;
}

.bench-score-val {
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ======================================================= */
/* --- 2025 Universal Sub-Window UI (Glowing Island) --- */
/* ======================================================= */

/* 1. 窗口根容器：必须透明且留出边距给阴影 */
body.tool-window-body {
  background: transparent !important;
  margin: 0;
  /* [关键] 留出 15px 边距，确保发光阴影不被系统窗口边缘切断 */
  padding: 15px;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* 隐藏全局背景，防止溢出圆角 */
body.tool-window-body #background-layer {
  display: none !important;
}

/* 2. 核心悬浮玻璃框架 */
.app-glass-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  /* 极简磨砂背景 */
  background: rgba(var(--card-background-rgb), 0.92);
  backdrop-filter: blur(40px) saturate(180%);

  border-radius: 20px;
  /* 完美圆角 */

  /* 默认状态：微弱边框 + 基础投影 */
  border: 1px solid rgba(128, 128, 128, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  /* 内部内容裁切 */
  z-index: 1;
}

/* [焦点/激活状态] 呼吸发光特效 */
.app-glass-frame.focused {
  background: rgba(var(--card-background-rgb), 0.98);
  /* 边框高亮 */
  border-color: rgba(var(--primary-rgb), 0.5);
  /* 复合发光阴影：外发光 + 内辉光 */
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.3),
    /* 模拟高亮描边 */
    0 20px 60px rgba(0, 0, 0, 0.4),
    /* 深度投影 */
    0 0 30px rgba(var(--primary-rgb), 0.15);
  /* 氛围光晕 */
}

/* 3. 悬浮标题栏 (Floating Header) */
.glass-title-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  -webkit-app-region: drag;
  /* 标题栏背景渐变 */
  background: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 0.5), rgba(var(--bg-color-rgb), 0.1));
  border-bottom: 1px solid rgba(128, 128, 128, 0.05);
  flex-shrink: 0;
}

/* 左上角状态指示点 */
.window-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-secondary);
  opacity: 0.3;
  margin-right: 12px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.1);
}

/* 激活时变为绿色呼吸灯 */
.window-status-dot.active {
  background-color: var(--success-color);
  box-shadow: 0 0 8px var(--success-color);
  opacity: 1;
  transform: scale(1.1);
}

.glass-title-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: 0.5px;
  flex-grow: 1;
  text-align: center;
  opacity: 0.9;
}

/* 4. 灵动岛风格控制按钮 (Traffic Lights) */
.island-controls {
  display: flex;
  gap: 8px;
  -webkit-app-region: no-drag;
}

.control-pill {
  width: 28px;
  /* 胶囊宽度 */
  height: 28px;
  border-radius: 8px;
  /* 稍微方一点的圆角，更现代 */
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.control-pill:hover {
  background: rgba(var(--text-color), 0.1);
  color: var(--text-color);
  transform: scale(1.05);
}

.control-pill.close:hover {
  background: var(--error-color);
  color: white;
  box-shadow: 0 2px 8px rgba(var(--error-color-rgb), 0.4);
}

/* 按钮内部的图标线条绘制 */
.icon-line {
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.icon-rect {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

/* 5. 内容区域修正 */
.secret-content {
  /* 移除旧的 padding，交给内部元素自适应 */
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  background: transparent !important;
}

/* 修复子窗口内的工具加载动画位置 */
#tool-content-area .loading-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======================================================= */
/* --- 2025 Universal Sub-Window UI (Perfect Crop Fix) --- */
/* ======================================================= */

/* 1. 窗口根容器 */
body.tool-window-body {
  background: transparent !important;
  margin: 0;
  /* [核心调整] 
       减小 Padding。只要留出足够 box-shadow 扩散的空间即可。
       如果阴影是 30px 扩散，这里留 10px-15px 可能会切断阴影，
       但为了“紧凑”感，我们设为 8px，并调整内部阴影参数。
    */
  padding: 8px;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  /* 防止滚动条出现 */
  display: flex;
  /* 使用 Flex 居中，确保 Frame 撑满 */
}

/* 隐藏全局背景 */
body.tool-window-body #background-layer {
  display: none !important;
}

/* 2. 核心悬浮玻璃框架 */
.app-glass-frame {
  flex: 1;
  /* 撑满 body 除去 padding 后的空间 */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  /* 背景：高透磨砂 */
  background: rgba(var(--card-background-rgb), 0.90);
  backdrop-filter: blur(40px) saturate(180%);

  /* 圆角 */
  border-radius: 16px;
  /* 稍微减小圆角以匹配紧凑感 */

  /* 边框：作为发光的内边界 */
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* [核心调整] 阴影控制 */
  /* 使用 inset 阴影来模拟内部发光，外部阴影减小扩散范围以适应紧凑 padding */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    /* 物理边框线 */
    0 10px 30px rgba(0, 0, 0, 0.4);
  /* 底部投影 */

  /* 强制裁切内部溢出 */
  overflow: hidden;
  position: relative;
  z-index: 1;

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

/* [焦点/激活状态] 蓝色发光边框 */
.app-glass-frame.focused {
  background: rgba(var(--card-background-rgb), 0.96);

  /* 边框变亮 */
  border-color: rgba(var(--primary-rgb), 0.6);

  /* [核心] 模拟您图片中的蓝色发光边框 */
  box-shadow:
    0 0 0 2px rgba(var(--primary-rgb), 0.5),
    /* 外发光圈 (蓝边) */
    0 15px 40px rgba(0, 0, 0, 0.5);
  /* 深度投影保持不变 */
}

/* 3. 标题栏微调 */
.glass-title-bar {
  height: 42px;
  /* 紧凑高度 */
  display: flex;
  align-items: center;
  padding: 0 15px;
  -webkit-app-region: drag;
  /* 使用渐变底色增加层次 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  flex-shrink: 0;
}

/* 修复内容区域在圆角内的显示 */
.secret-content,
#tool-content-area {
  border-radius: 0 0 16px 16px;
  /* 底部圆角匹配 Frame */
}

/* ======================================================= */
/* --- 2025 Universal Sub-Window UI (Perfect Crop Fix) --- */
/* ======================================================= */

/* [核心修复 1] 强制根节点透明，防止出现黑色底色 */
html {
  background: transparent !important;
}

/* 1. 窗口根容器 */
body.tool-window-body {
  background: transparent !important;
  margin: 0;
  /* [核心调整] 
       将内边距从之前的 15px/20px 减小到 4px。
       这刚好足够显示 2px 的蓝色呼吸光圈 + 少量柔和阴影，
       彻底消除多余的“黑边”区域。
    */
  padding: 6px;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
  /* 彻底禁止滚动条 */
  display: flex;
  /* 启用 Flex 布局 */
  align-items: stretch;
  /* 强制子元素撑满高度 */
  justify-content: stretch;
  /* 强制子元素撑满宽度 */
}

/* 隐藏全局背景层，防止它溢出圆角 */
body.tool-window-body #background-layer {
  display: none !important;
}

/* 2. 核心悬浮玻璃框架 */
.app-glass-frame {
  flex: 1;
  /* 自动撑满 body 的剩余空间 */
  display: flex;
  flex-direction: column;
  /* 移除所有 margin，由 body 的 padding 控制边缘 */
  margin: 0;
  width: 100%;
  height: 100%;

  /* 背景：高透磨砂 (深色模式适配) */
  background: rgba(var(--card-background-rgb), 0.92);
  backdrop-filter: blur(40px) saturate(180%);

  /* 圆角：稍微减小以匹配紧凑的边缘 */
  border-radius: 12px;

  /* 物理边框 */
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* 默认阴影：非常收敛，紧贴窗口 */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.3);

  /* 强制裁切内部溢出，保证圆角完美 */
  overflow: hidden;
  position: relative;
  z-index: 1;

  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* [焦点/激活状态] 蓝色呼吸光圈 (The Blue Edge) */
.app-glass-frame.focused {
  background: rgba(var(--card-background-rgb), 0.98);

  /* 边框高亮 */
  border-color: rgba(var(--primary-rgb), 0.6);

  /* [核心视觉] 
       1. 0 0 0 2px: 产生 2px 宽的实心发光边框 (Blue Edge)
       2. 0 0 15px: 产生柔和的外发光，增加灵动感
    */
  box-shadow:
    0 0 0 2px rgba(var(--primary-rgb), 1),
    /* 强烈的蓝色轮廓 */
    0 0 15px rgba(var(--primary-rgb), 0.4);
  /* 柔和辉光 */
}

/* 3. 标题栏微调 */
.glass-title-bar {
  height: 38px;
  /* 更加紧凑的标题栏 */
  display: flex;
  align-items: center;
  padding: 0 12px;
  -webkit-app-region: drag;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), transparent);
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  flex-shrink: 0;
}

/* 修复内容区域的圆角衔接 */
.secret-content,
#tool-content-area {
  background: transparent !important;
  border-radius: 0 0 12px 12px;
}

/* 输入框在子窗口中的适配优化 */
.tool-window-body .ip-input-group {
  background: rgba(var(--bg-color-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  /* 这里的圆角也稍微减小 */
  margin-bottom: 15px;
}

/* ======================================================= */
/* --- 2025 Universal Sub-Window UI (Clean Rounded) --- */
/* ======================================================= */

/* [关键] 强制根节点完全透明，防止任何底色渗出 */
html {
  background: transparent !important;
}

/* 1. 窗口根容器 */
body.tool-window-body {
  background: transparent !important;
  margin: 0;
  /* [核心调整] 
       将 padding 设为 1px。
       这几乎完全消除了外部空间，只留 1px 防止圆角裁切时的锯齿毛边。
       不再预留阴影空间，追求极致的“贴边”效果。
    */
  padding: 1px;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
  /* 禁止滚动 */
  display: flex;
}

/* 隐藏全局背景层 */
body.tool-window-body #background-layer {
  display: none !important;
}

/* 2. 核心玻璃框架 */
.app-glass-frame {
  flex: 1;
  /* 撑满所有可用空间 */
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
  height: 100%;

  /* 背景：高透磨砂 (保证内容清晰) */
  background: rgba(var(--card-background-rgb), 0.96);
  backdrop-filter: blur(40px) saturate(180%);

  /* [核心样式] 标准圆角 */
  border-radius: 12px;

  /* [核心样式] 物理单像素边框 */
  /* 使用半透明灰色，适配深浅主题 */
  border: 1px solid rgba(128, 128, 128, 0.25);

  /* 移除所有扩散性阴影/发光 */
  box-shadow: none;

  /* 强制裁切，确保子元素不溢出圆角 */
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* [焦点状态] 仅改变边框颜色，不再发光 */
.app-glass-frame.focused {
  /* 激活时背景微调 */
  background: rgba(var(--card-background-rgb), 1);

  /* 边框变为主题色，提示焦点 */
  border-color: var(--primary-color);

  /* 依然不添加发光阴影 */
  box-shadow: none;
}

/* 3. 标题栏 */
.glass-title-bar {
  height: 36px;
  /* 紧凑高度 */
  display: flex;
  align-items: center;
  padding: 0 12px;
  -webkit-app-region: drag;
  /* 允许拖动 */

  /* 极简分割线 */
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  background: transparent;
  flex-shrink: 0;
}

/* 状态点微调 */
.window-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-secondary);
  opacity: 0.3;
  margin-right: 10px;
}

.window-status-dot.active {
  background-color: var(--success-color);
  opacity: 1;
  box-shadow: none;
  /* 移除光晕 */
}

/* 4. 内容区域适配 */
.secret-content,
#tool-content-area {
  background: transparent !important;
  /* 确保底部圆角不被直角背景覆盖 */
  border-radius: 0 0 12px 12px;
}

/* 修复子窗口内输入框样式 */
.tool-window-body .ip-input-group {
  background: rgba(var(--bg-color-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 15px;
}

/* --- [新增] 标题栏天气灵动岛组件 --- */

/* 1. 布局容器 */
.title-bar-right-container {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  -webkit-app-region: no-drag;
  /* 允许交互 */
}

/* 2. 天气胶囊 (Pill) */
.weather-widget-pill {
  position: relative;
  height: 28px;
  /* 宽度动态，根据内容适配，但最大限制 */
  max-width: 140px;
  min-width: 60px;
  background: rgba(var(--card-background-rgb), 0.5);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  /* 胶囊圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: visible;
  /* 允许下拉菜单溢出 */
}

.weather-widget-pill:hover {
  background: rgba(var(--card-background-rgb), 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(1px);
}

.weather-pill-temp {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color);
  font-family: 'Consolas', monospace;
}

.weather-pill-city {
  font-size: 11px;
  color: var(--text-secondary);
  display: none;
  /* 默认隐藏，悬浮或宽屏可显示 */
}

/* 3. 纯 CSS 天气图标绘制 (Pure CSS Weather Icons) */
.css-weather-icon {
  width: 20px;
  height: 20px;
  position: relative;
}

/* ☀️ 晴 (Sun) */
.css-icon-sun {
  background: #ffb300;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: 4px;
  box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.3), 0 0 8px #ffb300;
  animation: spin 10s linear infinite;
}

/* ☁️ 多云/阴 (Cloud) */
.css-icon-cloud {
  background: #fff;
  width: 14px;
  height: 6px;
  border-radius: 10px;
  position: absolute;
  top: 8px;
  left: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.css-icon-cloud::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  top: -4px;
  left: 2px;
}

/* 🌧️ 雨 (Rain) */
.css-icon-rain {
  background: #b0c4de;
  width: 14px;
  height: 6px;
  border-radius: 10px;
  position: absolute;
  top: 6px;
  left: 3px;
}

.css-icon-rain::before {
  /* 雨滴 */
  content: '';
  position: absolute;
  height: 4px;
  width: 2px;
  background: #007aff;
  top: 8px;
  left: 3px;
  box-shadow: 4px 2px 0 #007aff, 8px 0 0 #007aff;
  transform: skewX(-20deg);
  animation: rainDrop 1s infinite linear;
}

@keyframes rainDrop {
  0% {
    transform: skewX(-20deg) translateY(0);
    opacity: 1;
  }

  100% {
    transform: skewX(-20deg) translateY(5px);
    opacity: 0;
  }
}

/* 4. 悬浮下拉卡片 (Dropdown Card) */
.weather-dropdown-card {
  position: absolute;
  top: 36px;
  /* 胶囊下方 */
  right: 0;
  width: 220px;
  background: rgba(var(--card-background-rgb), 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* 动画 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 1000;
}

.weather-widget-pill:hover .weather-dropdown-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 下拉卡片内容 */
.wd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.wd-temp-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.wd-big-temp {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-color);
}

.wd-detail {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
}

/* ========================================= */
/* --- [修复] 标题栏灵动岛天气组件样式 --- */
/* ========================================= */

/* 1. 标题栏整体布局修正 */
.title-bar {
  display: flex;
  justify-content: flex-end;
  /* 所有内容靠右对齐 */
  align-items: center;
  padding: 0;
  /* 移除内边距，由内部容器接管 */
  z-index: 2000;
  /* 确保层级最高 */
}

/* 2. 右侧功能区容器 (包裹 天气 + 窗口控制键) */
.title-bar-right-container {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 天气与控制键之间的间距 */
  height: 100%;
  padding-right: 15px;
  /* 距离窗口最右边的距离 */
  -webkit-app-region: no-drag;
  /* 关键：区域内不可拖动，确保点击有效 */
}

/* 窗口控制键容器 (保持原样，但在新容器内) */
.window-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  /* 按钮间距 */
  -webkit-app-region: no-drag;
}

/* 3. 天气胶囊 (Pill) - 灵动岛风格 */
.weather-widget-pill {
  position: relative;
  height: 28px;
  min-width: 70px;
  /* 最小宽度，防止未加载时太窄 */
  padding: 0 12px;

  /* 玻璃拟态背景 */
  background: rgba(var(--card-background-rgb), 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 99px;
  /* 胶囊圆角 */

  display: flex;
  /* 强制显示，不要用 none */
  align-items: center;
  justify-content: center;
  gap: 8px;

  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text-color);
  z-index: 2001;
}

/* 悬停效果：背景加深，轻微上浮 */
.weather-widget-pill:hover {
  background: rgba(var(--card-background-rgb), 0.9);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(1px);
}

.weather-pill-temp {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Consolas', monospace;
  white-space: nowrap;
}

/* 4. 纯 CSS 绘制的天气图标 (无图片依赖，加载更快) */
.css-weather-icon {
  width: 20px;
  height: 20px;
  position: relative;
}

/* ☀️ 晴 */
.css-icon-sun {
  background: #ffb300;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.2), 0 0 8px #ffb300;
  animation: spin-slow 10s linear infinite;
}

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

/* ☁️ 云 */
.css-icon-cloud {
  background: #fff;
  width: 14px;
  height: 7px;
  border-radius: 10px;
  position: absolute;
  top: 7px;
  left: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.css-icon-cloud::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  top: -4px;
  left: 3px;
}

/* 🌧️ 雨 */
.css-icon-rain {
  background: #90caf9;
  width: 14px;
  height: 7px;
  border-radius: 10px;
  position: absolute;
  top: 6px;
  left: 3px;
}

.css-icon-rain::before {
  content: '';
  position: absolute;
  height: 4px;
  width: 2px;
  background: #42a5f5;
  top: 8px;
  left: 4px;
  transform: skewX(-20deg);
  animation: rain-drop 0.8s infinite linear;
}

@keyframes rain-drop {
  0% {
    opacity: 1;
    transform: skewX(-20deg) translateY(0);
  }

  100% {
    opacity: 0;
    transform: skewX(-20deg) translateY(6px);
  }
}

/* 5. 悬浮下拉卡片 (Dropdown Card) */
.weather-dropdown-card {
  position: absolute;
  top: 38px;
  /* 位于胶囊下方 */
  right: 0;
  width: 200px;

  background: rgba(var(--card-background-rgb), 0.95);
  backdrop-filter: blur(25px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 15px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  cursor: default;
}

/* 胶囊悬停时显示卡片 */
.weather-widget-pill:hover .weather-dropdown-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wd-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 5px;
}

.wd-city {
  font-size: 14px;
  font-weight: 700;
}

.wd-date {
  font-size: 11px;
  color: var(--text-secondary);
}

.wd-temp-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.wd-big-temp {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-color);
  line-height: 1;
}

.wd-detail {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wd-hint {
  font-size: 10px;
  color: var(--primary-color);
  margin-top: 5px;
  text-align: center;
  opacity: 0.8;
}

/* ========================================= */
/* --- [重构] 标题栏灵动岛天气组件样式 --- */
/* ========================================= */

.title-bar-right-container {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding-right: 15px;
  -webkit-app-region: no-drag;
}

/* 天气胶囊 (Pill) */
.weather-widget-pill {
  position: relative;
  height: 30px;
  /* 稍微加高一点 */
  min-width: 90px;
  /* 增加最小宽度以容纳城市 */
  padding: 0 12px;

  background: rgba(var(--card-background-rgb), 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 99px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text-color);
  z-index: 2001;
}

.weather-widget-pill:hover {
  background: rgba(var(--card-background-rgb), 0.9);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(1px);
}

/* 胶囊内元素 */
.weather-pill-location {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-pill-temp {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Consolas', monospace;
  white-space: nowrap;
}

/* CSS 天气图标 (保持不变) */
.css-weather-icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

.css-icon-sun {
  background: #ffb300;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.2), 0 0 8px #ffb300;
  animation: spin-slow 10s linear infinite;
}

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

.css-icon-cloud {
  background: #fff;
  width: 14px;
  height: 7px;
  border-radius: 10px;
  position: absolute;
  top: 7px;
  left: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.css-icon-cloud::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  top: -4px;
  left: 3px;
}

.css-icon-rain {
  background: #90caf9;
  width: 14px;
  height: 7px;
  border-radius: 10px;
  position: absolute;
  top: 6px;
  left: 3px;
}

.css-icon-rain::before {
  content: '';
  position: absolute;
  height: 4px;
  width: 2px;
  background: #42a5f5;
  top: 8px;
  left: 4px;
  transform: skewX(-20deg);
  animation: rain-drop 0.8s infinite linear;
}

@keyframes rain-drop {
  0% {
    opacity: 1;
    transform: skewX(-20deg) translateY(0);
  }

  100% {
    opacity: 0;
    transform: skewX(-20deg) translateY(6px);
  }
}


/* --- [优化] 悬浮下拉卡片 --- */
.weather-dropdown-card {
  position: absolute;
  top: 40px;
  /* 距离胶囊底部有一定间隙 */
  right: 0;
  width: 240px;
  /* 加宽一点显示更多信息 */

  background: rgba(var(--card-background-rgb), 0.95);
  backdrop-filter: blur(25px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 18px;

  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 1000;
}

/* [核心优化] 使用伪元素填补胶囊和卡片之间的空隙，防止鼠标移出时卡片消失 */
.weather-widget-pill::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  /* 填补 top:40px 与 height:30px 之间的空隙 */
  background: transparent;
  display: none;
}

.weather-widget-pill:hover::after {
  display: block;
}

/* 悬停显示 */
.weather-widget-pill:hover .weather-dropdown-card,
.weather-dropdown-card:hover {
  /* 确保鼠标在卡片上时也不消失 */
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 卡片内部样式 */
.wd-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.wd-city {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
}

.wd-date {
  font-size: 11px;
  color: var(--text-secondary);
}

.wd-temp-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 5px;
}

.wd-big-temp {
  font-size: 42px;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1;
}

.wd-detail {
  font-size: 13px;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 500;
}

.wd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 5px;
}

.wd-grid-item {
  background: rgba(var(--bg-color-rgb), 0.5);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wd-hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
  text-align: center;
  opacity: 0.8;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: color 0.2s;
}

.weather-widget-pill:hover .wd-hint {
  color: var(--primary-color);
}

/* ========================================= */
/* --- [优化] 天气胶囊主题适配 (Theme Adaption) --- */
/* ========================================= */

/* 1. 天气胶囊基础样式 (通用) */
.weather-widget-pill {
  position: relative;
  height: 30px;
  min-width: 90px;
  padding: 0 12px;

  /* 默认磨砂效果 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2001;
}

/* --- 2. 深色模式适配 (Dark Mode) --- */
body[data-theme="dark"] .weather-widget-pill {
  /* 深色背景，带一点透明度 */
  background: rgba(40, 40, 40, 0.5);
  /* 边框微亮，形成高光 */
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* 字体颜色 */
  color: #f5f5f7;
  /* 阴影：深邃 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .weather-widget-pill:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* --- 3. 浅色模式适配 (Light Mode) --- */
body[data-theme="light"] .weather-widget-pill {
  /* 浅色背景，高亮 */
  background: rgba(255, 255, 255, 0.65);
  /* 边框加深，防止与浅色标题栏混为一体 */
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* 字体颜色：深灰 */
  color: #333333;
  /* 阴影：柔和但清晰 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .weather-widget-pill:hover {
  background: #ffffff;
  border-color: rgba(var(--primary-rgb), 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(var(--primary-rgb), 0.1);
}

/* --- 4. 内部文字颜色微调 --- */
.weather-pill-location {
  font-size: 12px;
  font-weight: 500;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 自动跟随父元素颜色，但降低不透明度 */
  opacity: 0.8;
}

.weather-pill-temp {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Consolas', monospace;
  white-space: nowrap;
  /* 温度始终保持高亮/深色 */
  opacity: 1;
}

/* --- 5. 下拉卡片主题适配 --- */
.weather-dropdown-card {
  /* 基础定位和动效保持不变... */
  position: absolute;
  top: 40px;
  right: 0;
  width: 240px;
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 1000;
}

/* 深色模式下拉卡片 */
body[data-theme="dark"] .weather-dropdown-card {
  background: rgba(30, 30, 32, 0.95);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color: #fff;
}

/* 浅色模式下拉卡片 */
body[data-theme="light"] .weather-dropdown-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  color: #333;
}

/* 内部网格项适配 */
body[data-theme="light"] .wd-grid-item {
  background: #f5f5f7;
  /* 浅灰底 */
  color: #555;
}

body[data-theme="dark"] .wd-grid-item {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
}

/* 文字颜色适配 */
body[data-theme="light"] .wd-big-temp {
  color: var(--primary-color);
}

body[data-theme="dark"] .wd-big-temp {
  color: #fff;
}

/* 深色模式下大温度白色更醒目 */

/* [新增] 天气温度单位优化 */
.weather-unit-small {
  font-size: 0.5em;
  /* 字号减半 */
  vertical-align: top;
  /* 顶部对齐 */
  margin-left: 2px;
  font-weight: 600;
  opacity: 0.8;
}

/* 修正下拉卡片中大温度的对齐 */
.wd-big-temp {
  font-size: 42px;
  font-weight: 800;
  color: var(--text-color);
  line-height: 1;
  display: flex;
  /* 使用 Flex 布局对齐单位 */
  align-items: flex-start;
}

/* 适配深色/浅色模式的单位颜色 */
body[data-theme="light"] .weather-unit-small {
  color: var(--text-secondary);
}

body[data-theme="dark"] .weather-unit-small {
  color: rgba(255, 255, 255, 0.7);
}


/* ========================================= */
/* --- [优化] 天气胶囊主题适配 (Theme Adaption) --- */
/* ========================================= */

/* 1. 天气胶囊基础样式 */
.weather-widget-pill {
  position: relative;
  height: 30px;
  min-width: 90px;
  padding: 0 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2001;
  /* 默认字体粗细 */
  font-weight: 500;
}

/* --- 深色模式 (Dark Mode) --- */
body[data-theme="dark"] .weather-widget-pill {
  /* 半透明白底，营造毛玻璃感 */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f5f5f7;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .weather-widget-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* --- 浅色模式 (Light Mode) --- */
body[data-theme="light"] .weather-widget-pill {
  /* 浅灰底，避免纯白撞色 */
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #333;
  /* 深色文字 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .weather-widget-pill:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
}

/* --- 图标自适应优化 --- */

/* ☁️ 云 (Light Mode 增强可见性) */
body[data-theme="light"] .css-icon-cloud {
  background: #fff;
  /* 在浅色背景下，给云朵加深阴影 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body[data-theme="light"] .css-icon-cloud::after {
  background: #fff;
}

/* ☁️ 云 (Dark Mode) */
body[data-theme="dark"] .css-icon-cloud {
  background: #e0e0e0;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

body[data-theme="dark"] .css-icon-cloud::after {
  background: #e0e0e0;
}

/* ☀️ 晴 (Light Mode) */
body[data-theme="light"] .css-icon-sun {
  background: #f5a623;
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.3);
}

/* --- 内部文字微调 --- */
.weather-pill-temp {
  font-family: 'Segoe UI', sans-serif;
  /* 此时用非等宽字体可能更好看 */
  font-weight: 700;
}

.weather-unit-small {
  font-size: 0.6em;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 1px;
  vertical-align: top;
  position: relative;
  top: 2px;
}

/* ========================================= */
/* --- [新增] 免责声明灵动岛 (Disclaimer) --- */
/* ========================================= */

.disclaimer-modal-content {
  background: rgba(var(--card-background-rgb), 0.95);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  /* 强调边框 */
  border-radius: 32px;
  width: 90%;
  max-width: 550px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: scale(0.9) translateY(30px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  /* 极其丝滑的贝塞尔 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.modal-overlay.active .disclaimer-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.disclaimer-header {
  padding: 30px 30px 10px 30px;
  text-align: center;
}

.disclaimer-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  font-size: 28px;
  color: white;
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
}

.disclaimer-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 5px;
}

.disclaimer-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.8;
}

.disclaimer-body {
  padding: 10px 30px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-color);
  text-align: justify;
  border-top: 1px solid rgba(128, 128, 128, 0.1);
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  background: rgba(var(--bg-color-rgb), 0.3);
  margin: 20px 0;
}

.disclaimer-body p {
  margin-bottom: 15px;
}

.disclaimer-body strong {
  color: var(--primary-color);
}

.disclaimer-footer {
  padding: 0 30px 30px 30px;
  display: flex;
  gap: 15px;
}

.disclaimer-btn {
  flex: 1;
  padding: 14px;
  border-radius: 16px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-quit {
  background: rgba(var(--text-color), 0.05);
  color: var(--text-secondary);
}

.btn-quit:hover {
  background: rgba(var(--error-color-rgb), 0.1);
  color: var(--error-color);
}

.btn-agree {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
}

.btn-agree:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
}

/* ======================================================= */
/* --- [Fix] 子窗口圆角裁切物理修复 (追加到文件末尾) --- */
/* ======================================================= */

/* 1. 强制玻璃框架进行物理级裁切 */
.app-glass-frame {
  /* 确保圆角数值与您的设计一致 (根据图片目测约为 12px - 16px) */
  border-radius: 12px !important;

  /* [核心修复] 强制隐藏溢出的内部直角内容 */
  overflow: hidden !important;

  /* [关键] 修复 Chromium 内核下 backdrop-filter 导致 overflow:hidden 失效的 Bug */
  /* 这行代码会强制浏览器应用 alpha 遮罩，从而完美裁切圆角 */
  -webkit-mask-image: -webkit-radial-gradient(white, black);

  /* 开启 GPU 加速，防止渲染闪烁 */
  transform: translateZ(0);
}

/* 2. 修复聚焦状态下的边框显示 */
.app-glass-frame.focused {
  /* 由于使用了 mask-image，外部扩散的 box-shadow 可能会被切掉 */
  /* 因此改为使用内描边 (border) 或 内阴影 (inset box-shadow) 来显示蓝色高亮 */

  /* 方法 A: 实体边框 (推荐，清晰锐利) */
  border: 2px solid var(--primary-color) !important;

  /* 方法 B: 如果您坚持要发光效果，请使用 filter: drop-shadow 替代 box-shadow */
  /* 注意：drop-shadow 性能开销稍大 */
  box-shadow: none !important;
  filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.6));
}

/* 3. 确保内容区域背景透明，防止二次叠加导致黑边 */
.tool-window-body .content-area,
.tool-window-body .settings-section,
.tool-window-body #tool-content-area {
  background-color: transparent !important;
  border-radius: 0 0 12px 12px;
  /* 底部圆角匹配 */
}

/* ========================================= */
/* --- 三国杀工具专属样式 (追加) --- */
/* ========================================= */

.mini-input {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  width: 100%;
}

.mini-input:focus {
  border-color: var(--primary-color);
  outline: none;
}

.mini-stat-box {
  background: rgba(var(--bg-color-rgb), 0.5);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  border: 1px solid transparent;
}

.mini-stat-box.success {
  border-color: rgba(var(--success-color-rgb), 0.3);
  background: rgba(var(--success-color-rgb), 0.05);
}

.mini-stat-box.info {
  border-color: rgba(var(--info-color-rgb), 0.3);
  background: rgba(var(--info-color-rgb), 0.05);
}

.mini-stat-box.warning {
  border-color: rgba(var(--accent-color-rgb), 0.3);
  background: rgba(var(--accent-color-rgb), 0.05);
}

.mini-stat-box.error {
  border-color: rgba(var(--error-color-rgb), 0.3);
  background: rgba(var(--error-color-rgb), 0.05);
}

.mini-stat-box .label {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 2px;
}

.mini-stat-box .val {
  font-size: 16px;
  font-weight: bold;
}

.console-output::-webkit-scrollbar {
  width: 6px;
}

.console-output::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.log-line {
  margin-bottom: 2px;
  line-height: 1.4;
}

.log-line.system {
  color: #50fa7b;
}

.log-line.info {
  color: #8be9fd;
}

.log-line.success {
  color: #50fa7b;
}

.log-line.warning {
  color: #f1fa8c;
}

.log-line.error {
  color: #ff5555;
}

/* src/css/style.css */

/* 在原有样式基础上新增 */

.category-btn {
    /* 保持原有的按钮样式，增加 Flex 布局以对齐图标和文字 */
    display: flex;
    align-items: center;
    gap: 10px; /* 图标和文字的间距 */
    font-size: 14px;
}

.category-btn .emoji-icon {
    font-size: 16px; /* Emoji 稍微大一点 */
    line-height: 1;
    width: 20px;     /* 固定宽度确保对齐 */
    text-align: center;
}

/* 选中状态的左侧指示条颜色调整，可以配合 emoji 颜色 */
.category-btn.active {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    font-weight: 500;
}

/* 灵动岛风格通用容器 - 补充到 style.css */
.tool-island-container {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

.tool-island-card {
    background: rgba(var(--card-background-rgb), 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tool-island-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.tool-group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- 灵动岛流体滚动容器 --- */
.island-scroll-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* 隐藏容器本身的溢出，由内部处理 */
    /* 左右两边的遮罩层，默认透明 */
    --mask-bg: linear-gradient(90deg, rgba(var(--card-background-rgb), 1) 0%, rgba(var(--card-background-rgb), 0) 100%);
}

/* 隐藏滚动条但保留功能 */
.island-scroll-content {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 5px; /* 给阴影留点空间 */
    scrollbar-width: none; /* Firefox */
    cursor: grab; /* 提示可拖拽 */
    scroll-behavior: smooth; /* 平滑滚动 */
    user-select: none; /* 防止拖拽时选中文字 */
}

.island-scroll-content::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.island-scroll-content:active {
    cursor: grabbing; /* 抓取时的手势 */
    scroll-behavior: auto; /* 拖拽时取消平滑，保证跟手 */
}

/* 左侧阴影遮罩 */
.island-scroll-wrapper::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(to right, rgba(var(--bg-color-rgb), 1), transparent);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* 右侧阴影遮罩 */
.island-scroll-wrapper::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(to left, rgba(var(--bg-color-rgb), 1), transparent);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* JS控制的激活类 */
.island-scroll-wrapper.can-scroll-left::before { opacity: 1; }
.island-scroll-wrapper.can-scroll-right::after { opacity: 1; }

/* --- 工具箱灵动分类导航 (2025 Design) --- */
.toolbox-nav-island {
    position: relative;
    margin: 0 auto 25px auto;
    width: 100%;
    max-width: 800px; /* 限制最大宽度，保持精致感 */
    height: 60px;
    border-radius: 30px;
    background: rgba(var(--card-background-rgb), 0.4); /* 极淡的背景 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    overflow: hidden; /* 裁剪溢出 */
    transition: all 0.3s ease;
}

/* 内部滚动容器 */
.toolbox-nav-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px; /* 两侧留白 */
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    cursor: grab; /* 提示可拖拽 */
    scroll-behavior: smooth;
    user-select: none;
}

.toolbox-nav-scroll::-webkit-scrollbar {
    display: none; /* Chrome 隐藏滚动条 */
}

.toolbox-nav-scroll:active {
    cursor: grabbing;
    scroll-behavior: auto; /* 拖拽时由 JS 接管物理效果 */
}

/* 分类胶囊按钮 */
.category-pill {
    flex-shrink: 0; /* 防止被挤压 */
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-pill i {
    font-size: 13px;
    opacity: 0.8;
}

.category-pill:hover:not(.active) {
    background: rgba(var(--text-color), 0.06);
    color: var(--text-color);
    transform: scale(1.02);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 激活状态：苹果灵动岛风格胶囊 - 2025设计 */
.category-pill.active {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
    box-shadow: 
        0 2px 8px rgba(var(--primary-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 0.5px solid rgba(var(--primary-rgb), 0.2);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transform: scale(1);
    position: relative;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-pill.active::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, 
        rgba(var(--primary-rgb), 0.3) 0%, 
        rgba(var(--primary-rgb), 0.1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.category-pill.active:hover::after {
    opacity: 1;
}

.category-pill.active i {
    opacity: 1;
    color: var(--primary-color);
}

@keyframes islandPulse {
    0%, 100% { 
        box-shadow: 
            0 8px 24px rgba(var(--primary-rgb), 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset,
            0 0 40px rgba(var(--primary-rgb), 0.3);
    }
    50% { 
        box-shadow: 
            0 8px 32px rgba(var(--primary-rgb), 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.15) inset,
            0 0 50px rgba(var(--primary-rgb), 0.4);
    }
}

@keyframes islandShine {
    0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
    50% { opacity: 0.3; }
    100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0; }
}

/* --- 动态遮罩层 (光隐效果) --- */
/* 左侧遮罩 */
.toolbox-nav-island::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(to right, rgba(var(--bg-color-rgb), 1), transparent);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

/* 右侧遮罩 */
.toolbox-nav-island::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(to left, rgba(var(--bg-color-rgb), 1), transparent);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

/* JS 控制遮罩显示 */
.toolbox-nav-island.mask-left::before { opacity: 1; }
.toolbox-nav-island.mask-right::after { opacity: 1; }

/* --- 工具箱分类侧边栏优化 (灵动岛风格) --- */

/* 1. 滚动容器设置 */
#toolbox-categories-list {
    /* 隐藏原生滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    overflow-y: auto;
    overflow-x: hidden;
    
    /* 启用平滑滚动，但在拖拽时会通过JS移除此属性以保证跟手性 */
    scroll-behavior: smooth;
    
    /* 鼠标手势：抓取 */
    cursor: grab;
    
    /* 增加底部内边距，防止最后一个被遮挡 */
    padding-bottom: 20px;
    padding-top: 10px;

    /* [核心] 灵动岛视觉指引：使用遮罩实现边缘淡出，提示还有更多内容 */
    /* 顶部和底部各 20px 的淡出区域 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
}

#toolbox-categories-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条 */
}

/* 拖拽时的状态 */
#toolbox-categories-list.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto !important; /* 拖拽时禁用平滑滚动，确保绝对跟手 */
    user-select: none; /* 防止拖拽时选中文字 */
}

#toolbox-categories-list.is-dragging .island-nav-item {
    pointer-events: none; /* 拖拽时禁止触发点击事件 */
    transform: scale(0.98); /* 拖拽时整体微缩，产生物理按压感 */
}

/* 2. 分类按钮样式微调 */
.island-nav-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* 增加一点默认的悬浮感 */
    border: 1px solid transparent;
    margin-bottom: 8px; /* 增加间距 */
}

/* 悬停效果 */
.island-nav-item:hover {
    background: rgba(var(--primary-rgb), 0.1);
    transform: translateX(5px); /* 向右微动，灵动感 */
}

/* 激活状态：灵动岛高亮 */
.island-nav-item.active {
    background: linear-gradient(135deg, 
        rgba(var(--primary-rgb), 0.25) 0%, 
        rgba(var(--primary-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    box-shadow: 
        0 8px 24px rgba(var(--primary-rgb), 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 4px 12px rgba(var(--primary-rgb), 0.2);
    font-weight: 700;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transform: translateX(8px) scale(1.02);
    animation: islandNavPulse 2.5s ease-in-out infinite;
}

.island-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
    animation: islandNavShine 2s ease-in-out infinite;
    pointer-events: none;
}

.island-nav-item.active .nav-text {
    color: var(--primary-color);
    text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3);
    position: relative;
    z-index: 2;
}

.island-nav-item.active .nav-indicator {
    height: 60%;
    background: linear-gradient(180deg, 
        var(--primary-color) 0%, 
        rgba(var(--primary-rgb), 0.8) 100%);
    box-shadow: 
        0 0 12px var(--primary-color),
        0 0 20px rgba(var(--primary-rgb), 0.5);
    animation: islandIndicatorPulse 1.5s ease-in-out infinite;
}

/* --- 工具箱分类侧边栏优化 (灵动岛风格 V2) --- */

/* 1. 容器与滚动设置 */
.toolbox-sidebar-island {
    position: relative; /* 为绝对定位的指引元素提供锚点 */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止溢出 */
}

#toolbox-categories-list {
    /* 隐藏原生滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: auto;
    overflow-x: hidden;
    
    /* 关键：增加底部空间，防止最后一个元素贴底 */
    padding-bottom: 40px; 
    padding-top: 10px;
    
    /* 启用平滑滚动 (JS会在拖拽时临时禁用) */
    scroll-behavior: smooth;
    cursor: grab;
    
    /* 确保内容层级 */
    position: relative;
    z-index: 1;
    flex: 1;
}

#toolbox-categories-list::-webkit-scrollbar {
    display: none;
}

/* 拖拽时的光标状态 */
#toolbox-categories-list.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto !important;
    user-select: none;
}

#toolbox-categories-list.is-dragging .island-nav-item {
    pointer-events: none; /* 拖拽过程中暂时屏蔽子元素事件，防止误触高亮 */
    transform: scale(0.98);
}

/* 2. 按钮样式微调 */
.island-nav-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    /* 修复点击区域 */
    cursor: pointer;
}

/* 悬停效果 */
.island-nav-item:hover {
    background: rgba(var(--primary-rgb), 0.1);
    transform: translateX(5px);
}

/* 激活状态：苹果灵动岛风格 - 2025设计 */
.island-nav-item.active {
    background: rgba(var(--primary-rgb), 0.1);
    border: 0.5px solid rgba(var(--primary-rgb), 0.2);
    box-shadow: 
        0 1px 3px rgba(var(--primary-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    overflow: visible;
    transform: translateX(4px);
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.island-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--primary-color);
    border-radius: 0 2px 2px 0;
    opacity: 0.8;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.island-nav-item.active .nav-text {
    color: var(--primary-color);
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.island-nav-item.active .nav-indicator {
    display: none; /* 使用左侧指示条替代 */
}

/* 3. [新] 滚动提示指引 (Scroll Hints) */
/* 顶部阴影遮罩 */
.scroll-hint-top {
    position: absolute;
    top: 50px; /* 避开 sidebar-header */
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 1) 0%, rgba(var(--bg-color-rgb), 0) 100%);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 底部阴影遮罩 + 灵动箭头 */
.scroll-hint-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(var(--bg-color-rgb), 1) 0%, rgba(var(--bg-color-rgb), 0) 100%);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
}

/* 灵动箭头动画 */
.scroll-indicator-arrow {
    font-size: 12px;
    color: var(--text-secondary);
    animation: floatArrow 1.5s infinite ease-in-out;
    background: rgba(var(--card-background-rgb), 0.8);
    padding: 4px 10px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@keyframes floatArrow {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* 激活显示类 */
.hint-visible {
    opacity: 1 !important;
}

/* --- 工具箱分类侧边栏优化 (灵动岛风格 V3 - 修复交互版) --- */

/* 1. 侧边栏容器：作为定位基准 */
.toolbox-sidebar-island {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%; /* 确保填满高度 */
}

/* 2. 滚动列表容器 */
#toolbox-categories-list {
    /* 隐藏原生滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: auto;
    overflow-x: hidden;
    
    /* 布局与内边距 */
    flex: 1;
    padding-top: 10px;
    padding-bottom: 40px; /* 底部留白，防止最后元素贴边 */
    padding-left: 2px;    /* 防止阴影被切 */
    padding-right: 2px;
    
    /* 交互设置 */
    scroll-behavior: smooth;
    cursor: grab;         /* 默认手型：抓取 */
    position: relative;
    z-index: 1;           /* 层级：在背景之上，遮罩之下 */
}

#toolbox-categories-list::-webkit-scrollbar {
    display: none;
}

/* 拖拽中的状态 (由 JS 动态添加) */
#toolbox-categories-list.is-dragging {
    cursor: grabbing;              /* 抓紧手型 */
    scroll-behavior: auto !important; /* 禁用平滑滚动，实现物理跟手 */
    user-select: none;             /* 禁止选中文本 */
}

/* 关键修复：只有在真正拖拽时才禁用子元素事件，防止误触 */
#toolbox-categories-list.is-dragging .island-nav-item {
    pointer-events: none;
    transform: scale(0.98); /* 拖拽时整体微缩，增加物理质感 */
}

/* 3. 分类按钮样式 */
.island-nav-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    /* 防止文字被选中 */
    user-select: none;
    -webkit-user-select: none;
}

/* 悬停微动 */
.island-nav-item:hover:not(.active) {
    background: rgba(var(--text-color), 0.04);
    transform: translateX(2px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 激活状态：苹果灵动岛风格 - 2025设计 */
.island-nav-item.active {
    background: rgba(var(--primary-rgb), 0.1);
    border: 0.5px solid rgba(var(--primary-rgb), 0.2);
    box-shadow: 
        0 1px 3px rgba(var(--primary-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    overflow: visible;
    transform: translateX(4px);
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.island-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--primary-color);
    border-radius: 0 2px 2px 0;
    opacity: 0.8;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.island-nav-item.active .nav-text {
    color: var(--primary-color);
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.island-nav-item.active .nav-indicator {
    display: none; /* 使用左侧指示条替代 */
}

/* 4. 灵动岛滚动指引 (Shadow Hints) */

/* 顶部遮罩：线性渐变阴影 */
.scroll-hint-top {
    position: absolute;
    top: 50px; /* 避开标题栏高度 */
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 1) 0%, rgba(var(--bg-color-rgb), 0) 100%);
    z-index: 10;
    opacity: 0;
    pointer-events: none; /* 穿透点击 */
    transition: opacity 0.3s ease;
}

/* 底部遮罩 + 动态箭头 */
.scroll-hint-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(var(--bg-color-rgb), 1) 0%, rgba(var(--bg-color-rgb), 0) 100%);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    
    /* 内部布局 */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 15px;
}

/* 激活显示类 */
.hint-visible {
    opacity: 1 !important;
}

/* 灵动箭头胶囊 */
.scroll-indicator-arrow {
    font-size: 10px;
    color: var(--text-secondary);
    background: rgba(var(--card-background-rgb), 0.8);
    backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    animation: floatArrow 2s infinite ease-in-out;
}

@keyframes floatArrow {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(4px); opacity: 1; }
}

/* --- 更新管理 - 多线路 UI --- */

.update-mirrors-container {
    background: rgba(var(--bg-color-rgb), 0.5);
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid var(--border-color);
}

.mirrors-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mirror-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 10px;
    background: rgba(var(--card-background-rgb), 0.8);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.mirror-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateX(5px); /* 灵动微动 */
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.mirror-btn:hover .mirror-tag {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.mirror-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.mirror-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.mirror-tag.direct {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
}

.mirror-tag.web {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-color);
}

/* 进度条区域调整 */
#download-progress-area {
    background: rgba(var(--bg-color-rgb), 0.5);
    padding: 15px;
    border-radius: 12px;
    animation: fadeIn 0.3s ease;
}

/* ========================================= */
/* --- 苹果灵动岛风格选中效果 - 2025设计 --- */
/* ========================================= */

/* 兼容性：为不支持 backdrop-filter 的浏览器提供降级方案 */
@supports not (backdrop-filter: blur(20px)) {
    .category-pill.active,
    .island-nav-item.active,
    .settings-nav-item.active {
        background: rgba(var(--primary-rgb), 0.15);
    }
}

/* 兼容性：为不支持 CSS 变量的浏览器提供降级方案 */
@supports not (--css: variables) {
    .category-pill.active {
        background: rgba(0, 122, 255, 0.12);
        color: #007aff;
    }
    
    .island-nav-item.active,
    .settings-nav-item.active {
        background: rgba(0, 122, 255, 0.1);
        color: #007aff;
    }
    
    .island-nav-item.active::before,
    .settings-nav-item.active::before {
        background: #007aff;
    }
}

/* 第三方UI库兼容性：确保样式不被覆盖 */
.category-pill.active,
.island-nav-item.active,
.settings-nav-item.active {
    /* 提高优先级，防止第三方库覆盖 */
    background: rgba(var(--primary-rgb), 0.1) !important;
    border: 0.5px solid rgba(var(--primary-rgb), 0.2) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* 优化：减少重绘和回流 */
.category-pill,
.island-nav-item,
.settings-nav-item {
    will-change: transform, background-color, border-color;
    transform: translateZ(0); /* 启用硬件加速 */
    -webkit-transform: translateZ(0);
}

/* 优化：平滑的过渡动画 */
.category-pill,
.island-nav-item,
.settings-nav-item {
    transition: 
        background-color 0.3s var(--ease-smooth),
        border-color 0.3s var(--ease-smooth),
        transform 0.4s var(--ease-spring),
        box-shadow 0.3s var(--ease-smooth);
}

/* ========================================= */
/* --- 翻译进度遮罩层样式 --- */
/* ========================================= */

.translation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.translation-overlay.active {
    opacity: 1;
}

.translation-overlay-content {
    background: rgba(var(--card-background-rgb), 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 24px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    animation: translationOverlaySlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes translationOverlaySlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.translation-overlay-icon {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 20px;
    animation: translationIconSpin 2s linear infinite;
}

@keyframes translationIconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.translation-overlay-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-color);
}

.translation-progress-container {
    margin: 20px 0;
}

.translation-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(var(--text-color), 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.translation-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
}

.translation-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    font-family: monospace;
}

.translation-current-key {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 10px 0;
    min-height: 18px;
}

.translation-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 15px;
    opacity: 0.7;
}

/* ========================================= */
/* --- 主题切换月亮/太阳动画（最新版） --- */
/* ========================================= */

.theme-celestial-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-celestial-animation.active {
    opacity: 1;
}

.theme-celestial-animation.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.theme-celestial-icon {
    position: absolute;
    /* [修复] 始终固定在屏幕正中间 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
    z-index: 1;
}

.theme-celestial-icon svg {
    position: relative;
    z-index: 2;
}

/* 月亮图标样式 */
.theme-moon {
    color: #E8E8E8;
}

.theme-moon svg {
    filter: drop-shadow(0 0 20px rgba(232, 232, 232, 0.5));
    animation: moonGlow 1.2s ease-out 0.6s forwards;
}

/* 太阳图标样式 */
.theme-sun {
    color: #FFD700;
}

.theme-sun svg {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
    animation: sunGlow 1.2s ease-out 0.6s forwards;
}

/* 发光效果（固定在屏幕中心） */
.theme-celestial-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}

.theme-moon-glow {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(232, 232, 232, 0.4) 0%, rgba(232, 232, 232, 0.2) 40%, transparent 70%);
    animation: moonGlowExpand 1.2s ease-out 0.6s forwards;
    box-shadow: 0 0 60px rgba(232, 232, 232, 0.6),
                0 0 120px rgba(232, 232, 232, 0.4),
                0 0 180px rgba(232, 232, 232, 0.2);
}

.theme-sun-glow {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, rgba(255, 215, 0, 0.3) 40%, transparent 70%);
    animation: sunGlowExpand 1.2s ease-out 0.6s forwards;
    box-shadow: 0 0 80px rgba(255, 215, 0, 0.8),
                0 0 150px rgba(255, 215, 0, 0.6),
                0 0 220px rgba(255, 215, 0, 0.4);
}

/* 月亮滑入动画（从右侧进入） */
.theme-celestial-animation[data-theme="dark"] .theme-celestial-icon {
    animation: moonSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 太阳滑入动画（从左侧进入） */
.theme-celestial-animation[data-theme="light"] .theme-celestial-icon {
    animation: sunSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 月亮滑入关键帧（从右侧进入屏幕正中间） */
@keyframes moonSlideIn {
    0% {
        transform: translate(calc(-50% + 300px), -50%) scale(0.3) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) rotate(-90deg);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* 太阳滑入关键帧（从左侧进入屏幕正中间） */
@keyframes sunSlideIn {
    0% {
        transform: translate(calc(-50% - 300px), -50%) scale(0.3) rotate(180deg);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* 月亮发光动画 */
@keyframes moonGlow {
    0% {
        filter: drop-shadow(0 0 20px rgba(232, 232, 232, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(232, 232, 232, 0.8)) drop-shadow(0 0 60px rgba(232, 232, 232, 0.6));
        transform: scale(1.05);
    }
    100% {
        filter: drop-shadow(0 0 30px rgba(232, 232, 232, 0.6)) drop-shadow(0 0 50px rgba(232, 232, 232, 0.4));
        transform: scale(1);
    }
}

/* 太阳发光动画 */
@keyframes sunGlow {
    0% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 80px rgba(255, 215, 0, 0.7));
        transform: scale(1.1);
    }
    100% {
        filter: drop-shadow(0 0 35px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.5));
        transform: scale(1);
    }
}

/* 月亮发光扩散动画 */
@keyframes moonGlowExpand {
    0% {
        width: 120px;
        height: 120px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        width: 300px;
        height: 300px;
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* 太阳发光扩散动画 */
@keyframes sunGlowExpand {
    0% {
        width: 120px;
        height: 120px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        width: 350px;
        height: 350px;
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        width: 500px;
        height: 500px;
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.8);
    }
}


/* 优化：主题切换时的平滑过渡 - 与月亮/太阳动画同步 */
body {
    transition: 
        background-color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

body[data-theme="light"],
body[data-theme="dark"] {
    transition: 
        background-color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

/* 优化：卡片和元素的主题切换过渡 - 延迟启动，跟随月亮/太阳动画 */
.card,
.category-card,
.subcategory-card,
.tool-card,
.island-card,
.setting-island,
.welcome-card,
.dashboard-card {
    transition: 
        background-color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
        border-color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
        color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
        box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* 优化：文本元素的主题切换过渡 - 延迟启动 */
h1, h2, h3, p, span, div, button, a, label {
    transition: color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}

/* 优化：输入框和表单元素的主题切换过渡 - 延迟启动 */
input, textarea, select {
    transition: 
        background-color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
        border-color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
        color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* 优化：导航按钮的主题切换过渡 */
.nav-btn,
.island-nav-item,
.settings-nav-item,
.category-pill {
    transition: 
        background-color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
        border-color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
        color 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
        box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* ========================================= */
/* --- 新工具样式优化 --- */
/* ========================================= */

/* 文件哈希工具样式 */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: rgba(var(--card-background-rgb), 0.6);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s var(--ease-smooth);
}

.stat-item:hover {
    background: rgba(var(--card-background-rgb), 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: monospace;
}

/* 随机生成器颜色预览优化 */
#color-preview {
    transition: all 0.3s var(--ease-smooth);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#color-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 工具卡片统一样式优化 */
.setting-island {
    border-radius: 16px;
    overflow: hidden;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 14px;
}

.input-group label i {
    color: var(--primary-color);
    font-size: 14px;
}

/* 工具按钮组优化 */
.action-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.action-bar .action-btn {
    min-width: 120px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s var(--ease-spring);
}

.action-bar .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3);
}

.action-bar .action-btn:active {
    transform: translateY(0);
}

/* 工具输入框优化 */
.common-input,
.common-textarea {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(var(--card-background-rgb), 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s var(--ease-smooth);
}

.common-input:focus,
.common-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    outline: none;
}

.common-input[readonly],
.common-textarea[readonly] {
    background: rgba(var(--bg-color-rgb), 0.4);
    cursor: default;
}

/* 工具结果区域优化 */
.setting-island h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;
}

.setting-island h3 i {
    color: var(--primary-color);
}

/* ========================================= */
/* --- 文件哈希工具专用样式 --- */
/* ========================================= */

.file-select-area {
    padding: 4px 0;
}

.file-info-text {
    transition: all 0.3s var(--ease-smooth);
    word-break: break-all;
}

.hash-grid {
    margin-top: 8px;
}

.hash-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hash-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.hash-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hash-input {
    flex: 1;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    padding: 10px 12px;
    word-break: break-all;
}

.hash-copy-btn {
    padding: 10px 16px;
    min-width: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    transition: all 0.3s var(--ease-spring);
}

.hash-copy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.loading-container {
    display: flex;
}

.spinner-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.1);
    backdrop-filter: blur(10px);
}

/* ========================================= */
/* --- 大小写转换工具专用样式 --- */
/* ========================================= */

.case-button-grid {
    padding: 4px 0;
}

.case-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    background: rgba(var(--card-background-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    min-height: 80px;
}

.case-btn i {
    font-size: 20px;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.case-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.2);
}

.case-btn:active {
    transform: translateY(0);
}

.case-btn span {
    font-size: 12px;
    text-align: center;
}

/* ========================================= */
/* --- 随机生成器工具专用样式 --- */
/* ========================================= */

.charset-checkboxes {
    padding: 16px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s var(--ease-smooth);
}

.checkbox-label:hover {
    background: rgba(var(--primary-rgb), 0.05);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.checkbox-label span {
    flex: 1;
    user-select: none;
}

.color-preview-large {
    transition: all 0.4s var(--ease-spring);
    position: relative;
    overflow: hidden;
}

.color-preview-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
}

.color-preview-large:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ============================================
   工具箱验证页面样式（1级和1.5级界面）
   [重构] 健康检查验证界面
   ============================================ */
.toolbox-verification-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
    max-height: 100vh;
    padding: 20px;
    padding-bottom: 40px; /* [优化] 增加底部内边距，确保检查列表框完全显示 */
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden; /* [优化] 防止横向滚动 */
    box-sizing: border-box;
    /* [优化] 确保内容不会超出视口 */
    width: 100%;
}

.verification-header {
    text-align: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.verification-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.5);
    }
}

.verification-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 8px 0;
}

.verification-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.verification-progress-container {
    width: 100%;
    max-width: 600px;
    background: rgba(var(--card-background-rgb), 0.7);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.verification-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.verification-status {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.verification-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    font-family: monospace;
}

.verification-progress-bar-container {
    width: 100%;
    height: 10px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 12px;
}

.verification-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.8) 100%);
    border-radius: 6px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
    position: relative;
    overflow: hidden;
}

.verification-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

.verification-stats {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    flex-wrap: wrap;
}

.verification-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.verification-tools-list-container {
    width: 100%;
    max-width: 800px;
    background: rgba(var(--card-background-rgb), 0.7);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    /* [优化] 使用固定高度而非flex:1，确保框能完全显示 */
    height: auto;
    min-height: 200px;
    max-height: calc(100vh - 520px); /* [优化] 增加底部边距，确保框完全显示 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* [优化] 防止横向滚动条 */
    overflow-x: hidden;
    min-width: 0;
    /* [优化] 确保容器不会超出父元素 */
    box-sizing: border-box;
    margin-bottom: 20px; /* [优化] 添加底部边距 */
}

.verification-tools-list-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.verification-tools-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* [优化] 防止横向滚动条 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* [优化] 确保内容不超出容器 */
    min-width: 0;
    width: 100%;
}

.verification-tool-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(var(--card-background-rgb), 0.5);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    flex-shrink: 0;
    /* [优化] 防止悬停时超出容器 */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.verification-tool-item:hover {
    background: rgba(var(--card-background-rgb), 0.8);
    /* [优化] 限制悬停时的位移，确保不会超出容器 */
    transform: translateX(2px); /* 减少位移量 */
    border-color: rgba(var(--primary-rgb), 0.3);
    /* [优化] 确保悬停时不会超出容器 */
    max-width: 100%;
    /* [优化] 确保悬停效果在容器内 */
    position: relative;
    z-index: 1;
}

/* [优化] 当前检查项追踪样式 */
.verification-tool-item.current-checking {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
    border-left: 3px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
    /* [优化] 限制位移，确保不会超出容器 */
    transform: translateX(4px); /* 减少位移量 */
    animation: currentCheckingPulse 2s ease-in-out infinite;
    /* [优化] 确保在容器内 */
    position: relative;
    z-index: 2;
    max-width: 100%;
}

@keyframes currentCheckingPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.5);
    }
}

.verification-tool-name {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
}

.verification-tool-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.verification-tool-status.success {
    color: #10b981;
}

.verification-tool-status.failed {
    color: #ef4444;
}

.verification-tool-status.checking {
    color: #6b7280;
}

.verification-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
    color: var(--text-secondary);
}

.verification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
    color: var(--text-secondary);
}

.verification-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
    flex-shrink: 0;
}

.verification-actions .control-btn {
    min-width: 100px;
    padding: 10px 16px;
    font-size: 14px;
}

/* ============================================
   工具健康检查设置页面样式（重构）
   ============================================ */
.tool-health-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.tool-health-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 16px rgba(var(--primary-rgb), 0.3);
    flex-shrink: 0;
}

.tool-health-header-content h2 {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
}

.tool-health-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.tool-health-info-card {
    background: rgba(var(--card-background-rgb), 0.5);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.tool-health-info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.tool-health-info-item i {
    color: var(--primary-color);
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.tool-health-info-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tool-health-info-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.tool-health-info-text span {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.tool-health-action-section {
    margin-bottom: 24px;
}

.tool-health-check-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.8) 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.tool-health-check-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.tool-health-check-btn:active {
    transform: translateY(0);
}

.tool-health-check-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.tool-health-btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.tool-health-progress-container {
    background: rgba(var(--card-background-rgb), 0.7);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

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

.tool-health-progress-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-color);
    font-size: 14px;
}

.tool-health-progress-count {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: monospace;
    font-weight: 600;
}

.tool-health-progress-bar-wrapper {
    width: 100%;
    height: 10px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px;
}

.tool-health-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.8) 100%);
    border-radius: 5px;
    width: 0%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tool-health-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

.tool-health-progress-stats {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    flex-wrap: wrap;
}

.tool-health-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.tool-health-stat-item.success {
    color: #10b981;
}

.tool-health-stat-item.failed {
    color: #ef4444;
}

.tool-health-stat-item.pending {
    color: #6b7280;
}

.tool-health-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.tool-health-stat-card {
    background: rgba(var(--card-background-rgb), 0.5);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.tool-health-stat-card:hover {
    background: rgba(var(--card-background-rgb), 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-health-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.tool-health-stat-icon.locked {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.tool-health-stat-icon.time {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.tool-health-stat-icon.total {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.tool-health-stat-info {
    flex: 1;
    min-width: 0;
}

.tool-health-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.tool-health-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    font-family: monospace;
}

/* [新增] 可点击的统计卡片 */
.tool-health-stat-card.clickable {
    cursor: pointer;
    position: relative;
}

.tool-health-stat-card.clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.tool-health-stat-card.has-locked {
    border-left: 3px solid #ef4444;
}

.tool-health-stat-card.has-history {
    border-left: 3px solid var(--primary-color);
}

.tool-health-stat-action {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tool-health-stat-card.clickable:hover .tool-health-stat-action {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
}

/* ============================================
   锁定工具模态框样式
   ============================================ */
.tool-health-locked-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-health-locked-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.tool-health-locked-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body[data-theme="light"] .tool-health-locked-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

body[data-theme="dark"] .tool-health-locked-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

.tool-health-locked-modal-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    background-color: rgba(var(--card-background-rgb), 0.95);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tool-health-locked-modal.active .tool-health-locked-modal-content {
    transform: scale(1) translateY(0);
}

.tool-health-locked-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.tool-health-locked-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tool-health-locked-modal-title i {
    font-size: 20px;
    color: #ef4444;
}

.tool-health-locked-modal-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
}

.tool-health-locked-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tool-health-locked-modal-close:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.tool-health-locked-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.tool-health-locked-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tool-health-locked-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(var(--card-background-rgb), 0.5);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.tool-health-locked-item:hover {
    background: rgba(var(--card-background-rgb), 0.7);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-health-locked-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.tool-health-locked-item-content {
    flex: 1;
    min-width: 0;
}

.tool-health-locked-item-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.tool-health-locked-item-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
}

.tool-health-locked-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.tool-health-locked-item-reason,
.tool-health-locked-item-time {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tool-health-locked-item-reason i,
.tool-health-locked-item-time i {
    font-size: 11px;
    opacity: 0.7;
}

.tool-health-locked-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.tool-health-locked-empty i {
    font-size: 48px;
    color: #10b981;
    margin-bottom: 16px;
}

.tool-health-locked-empty p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.tool-health-locked-empty span {
    font-size: 13px;
    color: var(--text-secondary);
}

/* [新增] 检查历史记录项样式 */
.tool-health-history-item {
    padding: 16px;
    background: rgba(var(--card-background-rgb), 0.6);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.tool-health-history-item:hover {
    background: rgba(var(--card-background-rgb), 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-health-history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tool-health-history-item-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.tool-health-history-item-date i {
    color: var(--primary-color);
}

.tool-health-history-item-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
}

.tool-health-history-item-stats .stat-success {
    color: #10b981;
    font-weight: 600;
}

.tool-health-history-item-stats .stat-failed {
    color: #ef4444;
    font-weight: 600;
}

.tool-health-history-item-stats .stat-total {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ============================================
   通用模态框框架样式 (Universal Modal Framework)
   ============================================ */
.universal-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.universal-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.universal-modal.closing {
    opacity: 0;
    pointer-events: none;
}

.universal-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 主题适配的背景色 */
[data-theme="light"] .universal-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .universal-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

.universal-modal-container {
    position: relative;
    background: rgba(var(--card-background-rgb), 0.95);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(var(--primary-rgb), 0.1) inset;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.universal-modal.active .universal-modal-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 尺寸变体 */
.universal-modal-small {
    width: 90%;
    max-width: 400px;
}

.universal-modal-medium {
    width: 90%;
    max-width: 600px;
}

.universal-modal-large {
    width: 90%;
    max-width: 900px;
}

.universal-modal-fullscreen {
    width: 95vw;
    height: 95vh;
    max-width: none;
    max-height: none;
    border-radius: 16px;
}

.universal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: linear-gradient(to bottom, rgba(var(--card-background-rgb), 0.5), transparent);
}

.universal-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.universal-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.universal-modal-close:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    transform: rotate(90deg);
}

.universal-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    color: var(--text-primary);
    line-height: 1.6;
}

/* 自定义滚动条 */
.universal-modal-body::-webkit-scrollbar {
    width: 8px;
}

.universal-modal-body::-webkit-scrollbar-track {
    background: rgba(var(--card-background-rgb), 0.3);
    border-radius: 4px;
}

.universal-modal-body::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.3);
    border-radius: 4px;
}

.universal-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.5);
}

.universal-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: linear-gradient(to top, rgba(var(--card-background-rgb), 0.5), transparent);
}

.universal-modal-button {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.universal-modal-button-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.universal-modal-button-primary:hover {
    background: rgba(var(--primary-rgb), 0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
}

.universal-modal-button-secondary {
    background: rgba(var(--card-background-rgb), 0.8);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.universal-modal-button-secondary:hover {
    background: rgba(var(--card-background-rgb), 1);
    border-color: var(--primary-color);
}

.universal-modal-button-danger {
    background: #ef4444;
    color: white;
}

.universal-modal-button-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* 字体下载模态框专用样式（使用通用模态框框架） */
.font-download-modal-wrapper .universal-modal-container {
    width: 340px;
    max-width: 90vw;
}

.font-download-modal-content {
    text-align: center;
    padding: 0;
}

.font-modal-icon {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 8px rgba(var(--primary-rgb), 0.3));
}

.font-modal-icon i {
    display: block;
}

.font-download-modal-content h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--text-color);
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.font-download-modal-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 进度条轨道 */
.font-progress-bg {
    width: 100%;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    margin: 20px 0 12px;
    overflow: hidden;
    position: relative;
}

.font-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width 0.15s linear;
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4);
}

#appearance-font-download-percent {
    margin: 0;
    font-size: 12px;
    font-family: monospace;
    color: var(--text-secondary);
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .universal-modal-container {
        width: 95vw;
        max-width: none;
        border-radius: 16px;
    }
    
    .universal-modal-header,
    .universal-modal-body,
    .universal-modal-footer {
        padding: 16px;
    }
    
    .universal-modal-footer {
        flex-direction: column-reverse;
    }
    
    .universal-modal-button {
        width: 100%;
        justify-content: center;
    }
    
    .font-download-modal-wrapper .universal-modal-container {
        width: 90vw;
    }
}

/* ============================================
   主题切换按钮样式（重构 - 太阳/云朵和月亮/星星风格）
   适用于导航栏和设置界面
   ============================================ */
.theme-switch-modern {
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

/* 导航栏中的主题切换按钮 */
.navbar .theme-switch-modern {
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    /* 移除nav-btn的默认样式，使用主题切换按钮的样式 */
    background: transparent !important;
    border: none !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 覆盖nav-btn的hover效果 */
    transform: none !important;
}

/* 导航栏中的主题切换按钮：禁用nav-btn的hover效果 */
.navbar .theme-switch-modern:hover {
    background-color: transparent !important;
    transform: none !important;
}

/* 设置界面中的主题切换按钮 */
.settings-page-container .theme-switch-modern {
    width: 80px;
    height: 40px;
}

.theme-switch-modern input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.theme-switch-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 导航栏中的轨道样式 */
.navbar .theme-switch-track {
    border-radius: 12px;
    /* 确保轨道填满整个按钮区域 */
    width: 100%;
    height: 100%;
}

/* 设置界面中的轨道样式 */
.settings-page-container .theme-switch-track {
    border-radius: 20px;
}

/* 浅色模式：浅蓝色天空和云朵 */
.theme-switch-modern input:not(:checked) + .theme-switch-track {
    background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
}

/* 深色模式：深灰色渐变和星星 */
.theme-switch-modern input:checked + .theme-switch-track {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 50%, #3a3a5c 100%);
}

/* 切换按钮（太阳/月亮） */
.theme-switch-knob {
    position: absolute;
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 导航栏中的按钮样式 */
.navbar .theme-switch-knob {
    top: 4px;
    left: 4px;
    width: 36px;
    height: 36px;
}

/* 导航栏中的图标尺寸调整 */
.navbar .theme-switch-sun,
.navbar .theme-switch-moon {
    width: 16px;
    height: 16px;
}

/* 设置界面中的按钮样式 */
.settings-page-container .theme-switch-knob {
    top: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
}

/* 浅色模式：太阳在左侧 */
.theme-switch-modern input:not(:checked) + .theme-switch-track .theme-switch-knob {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    transform: rotate(0deg);
}

/* 导航栏中浅色模式：太阳在左侧 */
.navbar .theme-switch-modern input:not(:checked) + .theme-switch-track .theme-switch-knob {
    left: 4px;
}

/* 设置界面中浅色模式：太阳在左侧 */
.settings-page-container .theme-switch-modern input:not(:checked) + .theme-switch-track .theme-switch-knob {
    left: 4px;
}

/* 深色模式：月亮在右侧 */
.theme-switch-modern input:checked + .theme-switch-track .theme-switch-knob {
    background: linear-gradient(135deg, #E8E8E8 0%, #D3D3D3 100%);
    transform: rotate(180deg);
}

/* 导航栏中深色模式：月亮在右侧 */
.navbar .theme-switch-modern input:checked + .theme-switch-track .theme-switch-knob {
    left: calc(100% - 40px);
}

/* 设置界面中深色模式：月亮在右侧 */
.settings-page-container .theme-switch-modern input:checked + .theme-switch-track .theme-switch-knob {
    left: calc(100% - 36px);
}

/* 太阳图标 */
.theme-switch-sun {
    position: absolute;
    width: 18px;
    height: 18px;
    color: #FFD700;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-switch-sun svg {
    width: 100%;
    height: 100%;
    color: inherit;
}

.theme-switch-modern input:checked + .theme-switch-track .theme-switch-sun {
    opacity: 0;
    transform: scale(0) rotate(180deg);
}

.theme-switch-modern input:not(:checked) + .theme-switch-track .theme-switch-sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* 月亮图标 */
.theme-switch-moon {
    position: absolute;
    width: 18px;
    height: 18px;
    color: #E8E8E8;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-switch-moon svg {
    width: 100%;
    height: 100%;
    color: inherit;
}

.theme-switch-modern input:checked + .theme-switch-track .theme-switch-moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.theme-switch-modern input:not(:checked) + .theme-switch-track .theme-switch-moon {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
}

/* 云朵装饰（浅色模式） */
.theme-switch-clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.theme-switch-modern input:not(:checked) + .theme-switch-track .theme-switch-clouds {
    opacity: 1;
    background-image: 
        radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 18%, transparent 18%),
        radial-gradient(circle at 65% 45%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 15%, transparent 15%),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 12%, transparent 12%);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.theme-switch-modern input:checked + .theme-switch-track .theme-switch-clouds {
    opacity: 0;
}

/* 星星装饰（深色模式） */
.theme-switch-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.theme-switch-modern input:checked + .theme-switch-track .theme-switch-stars {
    opacity: 1;
    background-image: 
        radial-gradient(circle at 18% 25%, rgba(255, 255, 255, 0.95) 1.5px, transparent 1.5px),
        radial-gradient(circle at 38% 40%, rgba(255, 255, 255, 0.85) 1px, transparent 1px),
        radial-gradient(circle at 58% 20%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px),
        radial-gradient(circle at 72% 45%, rgba(255, 255, 255, 0.75) 1px, transparent 1px),
        radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.85) 1.2px, transparent 1.2px);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.theme-switch-modern input:not(:checked) + .theme-switch-track .theme-switch-stars {
    opacity: 0;
}

/* ============================================
   主题切换过渡动画（重构 - 解决文字显示问题）
   ============================================ */
.theme-transitioning * {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-transitioning {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 确保文字在过渡期间保持可见 */
.theme-transitioning body,
.theme-transitioning .text-primary,
.theme-transitioning .text-secondary,
.theme-transitioning h1,
.theme-transitioning h2,
.theme-transitioning h3,
.theme-transitioning p,
.theme-transitioning span,
.theme-transitioning div {
    color: inherit !important;
    opacity: 1 !important;
    will-change: color, background-color;
}

/* 响应式设计 */
@media (max-height: 700px) {
    .toolbox-verification-page {
        padding: 15px;
        gap: 15px;
    }
    
    .verification-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
        margin-bottom: 8px;
    }
    
    .verification-title {
        font-size: 20px;
        margin-bottom: 6px;
    }
    
    .verification-subtitle {
        font-size: 12px;
    }
    
    .verification-progress-container {
        padding: 16px;
    }
    
    .verification-tools-list-container {
        padding: 12px;
        min-height: 150px;
        max-height: calc(100vh - 450px); /* [优化] 增加底部边距，确保框完全显示 */
        margin-bottom: 15px; /* [优化] 添加底部边距 */
    }
    
    .verification-tool-item {
        padding: 8px 12px;
    }
    
    .toolbox-verification-page {
        padding-bottom: 30px; /* [优化] 增加底部内边距 */
    }
}

@media (max-width: 768px) {
    .verification-progress-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .verification-stats {
        gap: 8px;
    }
    
    .verification-stat-item {
        font-size: 12px;
    }
}

.color-result-container {
    display: flex !important;
    flex-direction: column;
}

/* 工具页面通用优化 */
.page-container {
    max-width: 100%;
    box-sizing: border-box;
}

.setting-island {
    padding: 24px;
    min-height: 0;
}

/* 响应式优化 */
@media (max-width: 1200px) {
    .hash-grid {
        grid-template-columns: 1fr !important;
    }
    
    .case-button-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .case-button-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .page-container {
        padding: 16px !important;
        gap: 16px !important;
    }
}

/* ========================================= */
/* --- BMI计算器工具专用样式 --- */
/* ========================================= */

.unit-btn {
    padding: 12px 24px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s var(--ease-smooth);
}

.unit-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.unit-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.8) 100%);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.bmi-status.underweight {
    color: #ffc107;
}

.bmi-status.normal {
    color: #28a745;
}

.bmi-status.overweight {
    color: #fd7e14;
}

.bmi-status.obese {
    color: #dc3545;
}

@media (max-width: 768px) {
    .input-section {
        grid-template-columns: 1fr !important;
    }
    
    .range-list {
        grid-template-columns: 1fr !important;
    }
}