@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap);
/* 全局颜色变量系统 - 支持明亮和暗黑模式 */

/* 明亮模式 (默认) */
:root {
  /* 主要背景色 */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #f4f5f7;
  --bg-hover: #e5e6eb;
  --bg-active: #f0f2f5;
  
  /* 文本颜色 */
  --text-primary: #1f1f1f;
  --text-secondary: #666666;
  --text-tertiary: #888888;
  --text-inverse: #ffffff;
  --text-danger: #ff4d4f;
  
  /* 边框颜色 */
  --border-primary: #e5e6eb;
  --border-secondary: #eeeeee;
  --border-light: #f5f5f5;
  
  /* 品牌色 */
  --brand-primary: #1677ff;
  --brand-hover: #145bcc;
  --brand-secondary: #e8f0fe;
  
  /* 功能色 */
  --success: #52c41a;
  --warning: #faad14;
  --error: #ff4d4f;
  --info: #1890ff;
  
  /* 特殊颜色 */
  --orange: #FF9800;
  --rank-first: #f5222d;
  --rank-second: #fa8c16;
  --rank-third: #52c41a;
  
  /* 阴影 */
  --shadow-light: rgba(0, 0, 0, 0.04);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-strong: rgba(0, 0, 0, 0.15);
  
  /* 卡片背景 */
  --card-bg: #f8f9fa;
  --card-hover-bg: #f0f1f3;
  
  /* 输入框 */
  --input-bg: #f4f5f7;
  --input-border: #e5e6eb;
  --input-focus-border: #1677ff;
  
  /* 工具栏 */
  --toolbar-bg: #ffffff;
  --toolbar-border: #e5e6eb;
  
  /* 侧边栏 */
  --sidebar-bg: #ffffff;
  --sidebar-border: #e5e6eb;
  --sidebar-item-bg: transparent;
  --sidebar-item-hover-bg: #f0f2f5;
  --sidebar-item-active-bg: #f0f2f5;
  
  /* 标签页 */
  --tab-bg: #f5f5f5;
  --tab-active-bg: #1f1f1f;
  --tab-active-text: #ffffff;
  --tab-border: #e5e6eb;
  
  /* 模态框 */
  --modal-bg: #ffffff;
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --modal-border: #e5e6eb;
  
  /* 按钮 */
  --btn-bg: #f5f5f5;
  --btn-hover-bg: #e5e5e5;
  --btn-text: #1f1f1f;
  
  /* 搜索建议 */
  --suggestion-bg: #ffffff;
  --suggestion-hover-bg: #f5f5f5;
}

/* 暗黑模式 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 主要背景色 */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #333333;
    --bg-hover: #404040;
    --bg-active: #3a3a3a;
    
    /* 文本颜色 */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-tertiary: #999999;
    --text-inverse: #1a1a1a;
    --text-danger: #ff7875;
    
    /* 边框颜色 */
    --border-primary: #404040;
    --border-secondary: #333333;
    --border-light: #2d2d2d;
    
    /* 品牌色 */
    --brand-primary: #4096ff;
    --brand-hover: #69b1ff;
    --brand-secondary: #1d39c4;
    
      /* 功能色 */
  --success: #73d13d;
  --warning: #ffc53d;
  --error: #ff7875;
  --info: #40a9ff;
  
  /* 功能色背景（暗黑模式） */
  --success-bg: #162312;
  --warning-bg: #2b2111;
  --error-bg: #2a1215;
  --info-bg: #111b26;
    
    /* 特殊颜色 */
    --orange: #ffab40;
    --rank-first: #ff5252;
    --rank-second: #ffb74d;
    --rank-third: #69f0ae;
    
    /* 阴影 */
    --shadow-light: rgba(0, 0, 0, 0.2);
    --shadow-medium: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.4);
    
    /* 卡片背景 */
    --card-bg: #2d2d2d;
    --card-hover-bg: #333333;
    
    /* 输入框 */
    --input-bg: #333333;
    --input-border: #404040;
    --input-focus-border: #4096ff;
    
    /* 工具栏 */
    --toolbar-bg: #1a1a1a;
    --toolbar-border: #404040;
    
    /* 侧边栏 */
    --sidebar-bg: #1a1a1a;
    --sidebar-border: #404040;
    --sidebar-item-bg: transparent;
    --sidebar-item-hover-bg: #2d2d2d;
    --sidebar-item-active-bg: #3a3a3a;
    
    /* 标签页 */
    --tab-bg: #333333;
    --tab-active-bg: #ffffff;
    --tab-active-text: #1a1a1a;
    --tab-border: #404040;
    
    /* 模态框 */
    --modal-bg: #2d2d2d;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-border: #404040;
    
    /* 按钮 */
    --btn-bg: #333333;
    --btn-hover-bg: #404040;
    --btn-text: #ffffff;
    
    /* 搜索建议 */
    --suggestion-bg: #2d2d2d;
    --suggestion-hover-bg: #333333;
  }
}

/* 强制暗黑模式类（可选，用于手动切换） */
.dark-theme {
  /* 主要背景色 */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #333333;
  --bg-hover: #404040;
  --bg-active: #3a3a3a;
  
  /* 文本颜色 */
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-tertiary: #999999;
  --text-inverse: #1a1a1a;
  --text-danger: #ff7875;
  
  /* 边框颜色 */
  --border-primary: #404040;
  --border-secondary: #333333;
  --border-light: #2d2d2d;
  
  /* 品牌色 */
  --brand-primary: #4096ff;
  --brand-hover: #69b1ff;
  --brand-secondary: #1d39c4;
  
  /* 功能色 */
  --success: #52c41a;
  --warning: #faad14;
  --error: #ff4d4f;
  --info: #1890ff;
  
  /* 功能色背景 */
  --success-bg: #f6ffed;
  --warning-bg: #fffbe6;
  --error-bg: #fff2f0;
  --info-bg: #e6f7ff;
  
  /* 阴影 */
  --shadow-light: rgba(0, 0, 0, 0.2);
  --shadow-medium: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.4);
  
  /* 卡片背景 */
  --card-bg: #2d2d2d;
  --card-hover-bg: #333333;
  
  /* 输入框 */
  --input-bg: #333333;
  --input-border: #404040;
  --input-focus-border: #4096ff;
  
  /* 工具栏 */
  --toolbar-bg: #1a1a1a;
  --toolbar-border: #404040;
  
  /* 侧边栏 */
  --sidebar-bg: #1a1a1a;
  --sidebar-border: #404040;
  --sidebar-item-bg: transparent;
  --sidebar-item-hover-bg: #2d2d2d;
  --sidebar-item-active-bg: #3a3a3a;
  
  /* 标签页 */
  --tab-bg: #333333;
  --tab-active-bg: #ffffff;
  --tab-active-text: #1a1a1a;
  --tab-border: #404040;
  
  /* 模态框 */
  --modal-bg: #2d2d2d;
  --modal-overlay: rgba(0, 0, 0, 0.7);
  --modal-border: #404040;
  
  /* 按钮 */
  --btn-bg: #333333;
  --btn-hover-bg: #404040;
  --btn-text: #ffffff;
  
  /* 搜索建议 */
  --suggestion-bg: #2d2d2d;
  --suggestion-hover-bg: #333333;
}

/* 确保颜色过渡平滑 */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 避免过渡在某些元素上显得突兀 */
img,
video,
iframe {
  transition: none;
}

/* 图标暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  /* 侧边栏图标反色 */
  .sidebar-nav .icon {
    filter: invert(1);
  }
  
  /* 标签页图标反色 */
  .tab-icon {
    filter: invert(1);
  }
  
  /* 激活状态的标签页图标不反色（因为背景是白色） */
  .tab.active .tab-icon {
    filter: none;
  }
  
  /* 激活状态的标签页关闭图标也不反色 */
  .tab.active .close-icon {
    filter: none;
  }
  
  /* 功能列表图标反色 */
  .tool-icon {
    filter: invert(1);
  }
  
  /* 顶部工具栏图标反色 */
  .search-bar::before {
    filter: invert(1);
  }
  
  .clear-btn {
    filter: invert(1);
  }
  
  .edit-icon {
    filter: invert(1);
  }
  
  .close-icon {
    filter: invert(1);
  }
  
  .download-btn img {
    filter: invert(1);
  }
  
  /* 页面内容区域的所有图标反色 */
  .upload-icon {
    filter: invert(1);
  }
  
  .button-icon {
    filter: invert(1);
  }
  
  .back-icon {
    filter: invert(1);
  }
  
  .favorite-icon {
    filter: invert(1);
  }
  
  .copy-icon {
    filter: invert(1);
  }
  
  .refresh-icon {
    filter: invert(1);
  }
  
  .search-icon {
    filter: invert(1);
  }
  
  /* SVG图标使用currentColor的不需要反色，因为会自动跟随文字颜色 */
  .search-icon[fill="currentColor"],
  .member-icon[fill="currentColor"] {
    filter: none;
  }
  
  /* 各种操作按钮内的图标 */
  .clear-btn img,
  .copy-btn img,
  .action-btn img,
  .compress-btn img,
  .convert-btn img,
  .cut-btn img,
  .extract-btn img,
  .process-btn img,
  .submit-btn img,
  .reset-btn img,
  .remove-btn img,
  .upload-btn img,
  .remove-logo-btn img,
  .new-convert-btn img,
  .new-compress-btn img,
  .new-cut-btn img,
  .new-extract-btn img,
  .new-process-btn img,
  .control-btn img,
  .option-btn img,
  .search-btn img {
    filter: invert(1);
  }
  
  /* 白色背景按钮（下载按钮）内的图标不反色，因为它们本身就是白色 */
  .download-btn img,
  .download-all-btn img {
    filter: none;
  }
  
  /* 通用图标适配 - 对所有含有1F1F1F（黑色）的SVG图标进行反色 */
  img[src*="1F1F1F"] {
    filter: invert(1);
  }
  
  /* 白色图标（FFFFFF）保持原样 */
  img[src*="FFFFFF"] {
    filter: none;
  }
  
  /* 首页工具选择器相关的图标 */
  .tool-selector-modal .close-icon {
    filter: invert(1);
  }
  
  /* 排除用户头像和特定图片 */
  .user-avatar img,
  .user-avatar-large img,
  .logo-img,
  .social-icon {
    filter: none;
  }
}

/* 强制暗黑模式类的图标适配 */
.dark-theme .sidebar-nav .icon {
  filter: invert(1);
}

.dark-theme .tab-icon {
  filter: invert(1);
}

.dark-theme .tab.active .tab-icon {
  filter: none;
}

.dark-theme .tab.active .close-icon {
  filter: none;
}

.dark-theme .tool-icon {
  filter: invert(1);
}

.dark-theme .search-bar::before {
  filter: invert(1);
}

.dark-theme .clear-btn {
  filter: invert(1);
}

.dark-theme .edit-icon {
  filter: invert(1);
}

.dark-theme .close-icon {
  filter: invert(1);
}

.dark-theme .download-btn img {
  filter: invert(1);
}

/* 页面内容区域的所有图标反色 */
.dark-theme .upload-icon {
  filter: invert(1);
}

.dark-theme .button-icon {
  filter: invert(1);
}

.dark-theme .back-icon {
  filter: invert(1);
}

.dark-theme .favorite-icon {
  filter: invert(1);
}

.dark-theme .copy-icon {
  filter: invert(1);
}

.dark-theme .refresh-icon {
  filter: invert(1);
}

.dark-theme .search-icon {
  filter: invert(1);
}

/* SVG图标使用currentColor的不需要反色，因为会自动跟随文字颜色 */
.dark-theme .search-icon[fill="currentColor"],
.dark-theme .member-icon[fill="currentColor"] {
  filter: none;
}

/* 各种操作按钮内的图标 */
.dark-theme .clear-btn img,
.dark-theme .copy-btn img,
.dark-theme .action-btn img,
.dark-theme .compress-btn img,
.dark-theme .convert-btn img,
.dark-theme .cut-btn img,
.dark-theme .extract-btn img,
.dark-theme .process-btn img,
.dark-theme .submit-btn img,
.dark-theme .reset-btn img,
.dark-theme .remove-btn img,
.dark-theme .upload-btn img,
.dark-theme .remove-logo-btn img,
.dark-theme .new-convert-btn img,
.dark-theme .new-compress-btn img,
.dark-theme .new-cut-btn img,
.dark-theme .new-extract-btn img,
.dark-theme .new-process-btn img,
.dark-theme .control-btn img,
.dark-theme .option-btn img,
.dark-theme .search-btn img {
  filter: invert(1);
}

/* 白色背景按钮（下载按钮）内的图标不反色，因为它们本身就是白色 */
.dark-theme .download-btn img,
.dark-theme .download-all-btn img {
  filter: none;
}

/* 通用图标适配 - 对所有含有1F1F1F（黑色）的SVG图标进行反色 */
.dark-theme img[src*="1F1F1F"] {
  filter: invert(1);
}

/* 白色图标（FFFFFF）保持原样 */
.dark-theme img[src*="FFFFFF"] {
  filter: none;
}

/* 首页工具选择器相关的图标 */
.dark-theme .tool-selector-modal .close-icon {
  filter: invert(1);
}

.dark-theme .user-avatar img,
.dark-theme .user-avatar-large img,
.dark-theme .logo-img,
.dark-theme .social-icon {
  filter: none;
}

/* TDesign 组件暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  /* 表格组件 */
  .t-table {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
  }
  
  .t-table__header {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
  }
  
  .t-table__header th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-primary) !important;
  }
  
  .t-table__body {
    background-color: var(--bg-primary) !important;
  }
  
  .t-table__body tr {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
  }
  
  .t-table__body tr:hover {
    background-color: var(--card-bg) !important;
  }
  
  .t-table__body td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-secondary) !important;
  }
  
  .t-table__body tr:hover td {
    background-color: var(--card-bg) !important;
  }
  
  /* 分页组件 */
  .t-pagination {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
  }
  
  .t-pagination__total {
    color: var(--text-secondary) !important;
  }
  
  .t-pagination__jump {
    color: var(--text-secondary) !important;
  }
  
  .t-pagination__jump input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
  }
  
  .t-pagination__prev,
  .t-pagination__next,
  .t-pagination__num {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
  }
  
  .t-pagination__prev:hover,
  .t-pagination__next:hover,
  .t-pagination__num:hover {
    background-color: var(--bg-hover) !important;
  }
  
  .t-pagination__num--current {
    background-color: var(--brand-primary) !important;
    color: var(--text-inverse) !important;
  }
  
  /* 加载组件 */
  .t-loading {
    color: var(--text-primary) !important;
  }
  
  .t-loading__text {
    color: var(--text-secondary) !important;
  }
  
  /* 对话框 */
  .t-dialog {
    background-color: var(--modal-bg) !important;
    color: var(--text-primary) !important;
  }
  
  .t-dialog__header {
    background-color: var(--modal-bg) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--modal-border) !important;
  }
  
  .t-dialog__body {
    background-color: var(--modal-bg) !important;
    color: var(--text-primary) !important;
  }
  
  .t-dialog__footer {
    background-color: var(--modal-bg) !important;
    border-top: 1px solid var(--modal-border) !important;
  }
  
  /* 输入框 */
  .t-input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
  }
  
  .t-input:focus {
    border-color: var(--input-focus-border) !important;
  }
  
  .t-input__inner {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
  }
  
  /* 按钮 */
  .t-button--theme-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
  }
  
  .t-button--theme-primary:hover {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
  }
  
  .t-button--theme-danger {
    background-color: var(--error) !important;
    border-color: var(--error) !important;
  }
}

/* 强制暗黑模式类的TDesign组件适配 */
.dark-theme .t-table {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.dark-theme .t-table__header {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.dark-theme .t-table__header th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-primary) !important;
}

.dark-theme .t-table__body {
  background-color: var(--bg-primary) !important;
}

.dark-theme .t-table__body tr {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.dark-theme .t-table__body tr:hover {
  background-color: var(--card-bg) !important;
}

.dark-theme .t-table__body td {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-secondary) !important;
}

.dark-theme .t-table__body tr:hover td {
  background-color: var(--card-bg) !important;
}

/* 分页组件 */
.dark-theme .t-pagination {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.dark-theme .t-pagination__total {
  color: var(--text-secondary) !important;
}

.dark-theme .t-pagination__jump {
  color: var(--text-secondary) !important;
}

.dark-theme .t-pagination__jump input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-theme .t-pagination__prev,
.dark-theme .t-pagination__next,
.dark-theme .t-pagination__num {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

.dark-theme .t-pagination__prev:hover,
.dark-theme .t-pagination__next:hover,
.dark-theme .t-pagination__num:hover {
  background-color: var(--bg-hover) !important;
}

.dark-theme .t-pagination__num--current {
  background-color: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
}

/* 加载组件 */
.dark-theme .t-loading {
  color: var(--text-primary) !important;
}

.dark-theme .t-loading__text {
  color: var(--text-secondary) !important;
}

/* 对话框 */
.dark-theme .t-dialog {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

.dark-theme .t-dialog__header {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--modal-border) !important;
}

.dark-theme .t-dialog__body {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

.dark-theme .t-dialog__footer {
  background-color: var(--modal-bg) !important;
  border-top: 1px solid var(--modal-border) !important;
}

.dark-theme .t-input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.dark-theme .t-input:focus {
  border-color: var(--input-focus-border) !important;
}

.dark-theme .t-input__inner {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
}

.dark-theme .t-button--theme-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.dark-theme .t-button--theme-primary:hover {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

.dark-theme .t-button--theme-danger {
  background-color: var(--error) !important;
  border-color: var(--error) !important;
} 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.container {
    display: flex;
    min-height: 100vh;
}

/* 侧边栏样式 */
.sidebar {
    width: 240px;
    background-color: var(--sidebar-bg);
    box-shadow: 2px 0 5px var(--shadow-medium);
    padding: 20px 0;
}

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

.sidebar-nav li {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.sidebar-nav li:hover {
    background-color: var(--sidebar-item-hover-bg);
}

.sidebar-nav li.active {
    background-color: var(--sidebar-item-active-bg);
    color: var(--brand-primary);
}

.sidebar-nav .icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.sidebar-nav .icon.inactive {
    display: none;
}

.sidebar-nav li.active .icon.active {
    display: none;
}

.sidebar-nav li.active .icon.inactive {
    display: block;
}

/* 主内容区域样式 */
.main-content {
    flex: 1;
    padding: 20px;
}

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

.logo {
    font-size: 24px;
    font-weight: 500;
    color: #1a73e8;
}

.search-bar {
    display: flex;
    gap: 10px;
}

.search-bar input {
    width: 300px;
    padding: 8px 16px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.search-bar button {
    padding: 8px 16px;
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-btn {
    padding: 8px 24px;
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 内容区域样式 */
.content {
    max-width: 1200px;
    margin: 0 auto;
}

.main-title {
    font-size: 32px;
    color: var(--text-primary);
    margin-bottom: 40px;
    text-align: center;
}

.section-title {
    font-size: 24px;
    color: var(--text-primary);
    margin: 30px 0 20px;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.tool-card {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-medium);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.tool-card:hover {
    transform: translateY(-5px);
    background-color: var(--card-hover-bg);
}

.tool-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 12px 0 8px;
}

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

.icon-placeholder {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--brand-secondary);
    border-radius: 8px;
} 

.footer[data-v-3bd9e686] {
  background-color: var(--bg-primary);
  padding: 16px 0;
  text-align: center;
  border-top: 1px solid var(--border-primary);
}
.footer-content[data-v-3bd9e686] {
  color: var(--text-secondary);
  font-size: 14px;
}
.copyright-text[data-v-3bd9e686] {
  margin-bottom: 8px;
}
.download-link[data-v-3bd9e686] {
  margin-top: 8px;
}
.download-link a[data-v-3bd9e686] {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.download-link a[data-v-3bd9e686]:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.download-icon[data-v-3bd9e686] {
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

/* PC设备样式 - 同一行显示 */
@media (min-width: 768px) {
.footer-content[data-v-3bd9e686] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.copyright-text[data-v-3bd9e686] {
    margin-bottom: 0;
}
.download-link[data-v-3bd9e686] {
    margin-top: 0;
}
}


.top-bar[data-v-65fa525f] {
  height: 56px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--toolbar-bg);
  z-index: 10;
  padding-top: 8px;
}
.left-section[data-v-65fa525f] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.logo-img[data-v-65fa525f] {
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.logo-img[data-v-65fa525f]:hover {
  opacity: 0.7;
}
.logo-text[data-v-65fa525f] {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: opacity 0.2s;
}
.logo-text[data-v-65fa525f]:hover {
  opacity: 0.7;
}
.main-title[data-v-65fa525f] {
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 0;
  margin-left: 100px;
  text-align: left;
  font-weight: 400;
}
.right-section[data-v-65fa525f] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  padding-top: 4px;
}
.login-btn[data-v-65fa525f] {
  height: 32px;
  padding: 0 16px;
  border: none;
  background: var(--text-primary);
  color: var(--text-inverse);
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.search-bar[data-v-65fa525f] {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 4px;
}
.search-bar input[data-v-65fa525f] {
  width: 340px;
  height: 36px;
  padding: 0 36px 0 36px;
  border: none;
  background: var(--input-bg);
  border-radius: 18px;
  outline: none;
  margin-left: 20px;
  margin-top: 0;
  color: var(--text-primary);
}
.search-bar[data-v-65fa525f]::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 8px;
  width: 20px;
  height: 20px;
  background-image: url(/static/img/search_24dp_1F1F1F_FILL1_wght400_GRAD0_opsz24.73ad53a4.svg);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.clear-btn[data-v-65fa525f] {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.clear-btn[data-v-65fa525f]:hover {
  opacity: 1;
}
.suggestions-list[data-v-65fa525f] {
  position: absolute;
  top: 100%;
  left: 20px;
  right: 0;
  background: var(--suggestion-bg);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow-medium);
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}
.suggestion-item[data-v-65fa525f] {
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--text-primary);
}
.suggestion-item[data-v-65fa525f]:hover {
  background-color: var(--suggestion-hover-bg);
}
.login-form[data-v-65fa525f] {
  padding: 20px;
}
.input-item[data-v-65fa525f] {
  margin-bottom: 16px;
}
.user-avatar[data-v-65fa525f] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-top: 4px;
}
.user-avatar img[data-v-65fa525f] {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.download-btn[data-v-65fa525f] {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  transition: background-color 0.2s;
}
.download-btn[data-v-65fa525f]:hover {
  background: var(--bg-hover);
}
.download-btn img[data-v-65fa525f] {
  width: 20px;
  height: 20px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.download-btn:hover img[data-v-65fa525f] {
  opacity: 1;
}
.settings-btn-wrapper[data-v-65fa525f] {
  position: relative;
}
.settings-btn[data-v-65fa525f] {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  transition: background-color 0.2s;
}
.settings-btn[data-v-65fa525f]:hover {
  background: var(--bg-hover);
}
.settings-btn img[data-v-65fa525f] {
  width: 20px;
  height: 20px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.settings-btn:hover img[data-v-65fa525f] {
  opacity: 1;
}

/* 扫码登录样式 */
.qr-login-section[data-v-65fa525f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}
.loading-section[data-v-65fa525f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 0;
}
.loading-spinner[data-v-65fa525f] {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-secondary);
  border-top: 3px solid var(--text-primary);
  border-radius: 50%;
  animation: spin-65fa525f 1s linear infinite;
}
.loading-text[data-v-65fa525f] {
  font-size: 14px;
  color: var(--text-secondary);
}
.qr-section[data-v-65fa525f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.qr-wrapper[data-v-65fa525f] {
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.qr-tip[data-v-65fa525f] {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}
.qr-error[data-v-65fa525f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 0;
}
.error-text[data-v-65fa525f] {
  font-size: 14px;
  color: var(--text-danger);
}
.retry-btn[data-v-65fa525f] {
  padding: 8px 16px;
  background: var(--text-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
}

/* 邮箱登录样式 */
.email-login-section[data-v-65fa525f] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}
.input-item[data-v-65fa525f] {
  width: 100%;
}

/* 社交登录样式 */
.social-login[data-v-65fa525f] {
  margin-top: 24px;
}
.divider[data-v-65fa525f] {
  position: relative;
  text-align: center;
  margin: 20px 0;
}
.divider span[data-v-65fa525f] {
  color: var(--text-secondary);
  font-size: 12px;
}
.social-icons[data-v-65fa525f] {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}
.social-icon-wrapper[data-v-65fa525f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.social-icon-wrapper[data-v-65fa525f]:hover {
  opacity: 0.7;
}
.social-icon[data-v-65fa525f] {
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.social-icon[data-v-65fa525f]:hover {
  opacity: 0.7;
}

/* 用户信息对话框样式 */
.user-info-dialog[data-v-65fa525f] {
  padding: 20px;
}
.user-header[data-v-65fa525f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.user-avatar-large[data-v-65fa525f] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
}
.user-avatar-large img[data-v-65fa525f] {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.user-name-large[data-v-65fa525f] {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}
.info-section[data-v-65fa525f] {
  margin-bottom: 24px;
}
.info-item[data-v-65fa525f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-secondary);
}
.info-label[data-v-65fa525f] {
  font-size: 14px;
  color: var(--text-secondary);
}
.info-value[data-v-65fa525f] {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.dialog-footer[data-v-65fa525f] {
  display: flex;
  justify-content: center;
}

/* 设置表单样式 */
.settings-form[data-v-65fa525f] {
  padding: 20px;
}
.setting-item[data-v-65fa525f] {
  margin-bottom: 24px;
}
.setting-label[data-v-65fa525f] {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 500;
}
@keyframes spin-65fa525f {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}

/* 设置提示弹窗样式 */
.custom-tooltip[data-v-65fa525f] {
  position: absolute;
  top: 100%;
  right: 0;
  background: #000000;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  margin-top: 8px;
  white-space: nowrap;
  pointer-events: none;
}
.tooltip-arrow[data-v-65fa525f] {
  position: absolute;
  top: -6px;
  right: 12px;
  width: 12px;
  height: 12px;
  background: #000000;
  transform: rotate(45deg);
  z-index: -1;
}
.tooltip-content[data-v-65fa525f] {
  font-size: 12px;
  color: #ffffff;
}

/* 移动端样式 */
.top-bar.mobile[data-v-65fa525f] {
  padding: 0 16px;
}
.menu-btn[data-v-65fa525f] {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-right: 12px;
}
.menu-btn[data-v-65fa525f]:hover {
  opacity: 0.7;
}
.mobile-title[data-v-65fa525f] {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: opacity 0.2s;
}
.mobile-title[data-v-65fa525f]:hover {
  opacity: 0.7;
}
.search-icon[data-v-65fa525f] {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  transition: background-color 0.2s;
}
.search-icon[data-v-65fa525f]:hover {
  background: var(--bg-hover);
}
.search-icon img[data-v-65fa525f] {
  width: 20px;
  height: 20px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.search-icon:hover img[data-v-65fa525f] {
  opacity: 1;
}

/* 移动端搜索弹窗样式 */
.mobile-search-overlay[data-v-65fa525f] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2000;
  padding-top: 80px;
}
.mobile-search-container[data-v-65fa525f] {
  background: var(--modal-bg);
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.mobile-search-header[data-v-65fa525f] {
  display: flex;
  align-items: center;
  padding: 16px;
}
.mobile-search-input[data-v-65fa525f] {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  border: none;
  background: var(--input-bg);
  border-radius: 20px;
  outline: none;
  color: var(--text-primary);
  font-size: 16px;
}
.mobile-search-input[data-v-65fa525f]::-moz-placeholder {
  color: var(--text-secondary);
}
.mobile-search-input[data-v-65fa525f]::placeholder {
  color: var(--text-secondary);
}
.mobile-search-close[data-v-65fa525f] {
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  margin-left: 12px;
}
.mobile-search-close[data-v-65fa525f]:hover {
  opacity: 1;
}
.mobile-suggestions-list[data-v-65fa525f] {
  max-height: 300px;
  overflow-y: auto;
}
.mobile-suggestion-item[data-v-65fa525f] {
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--text-primary);
}
.mobile-suggestion-item[data-v-65fa525f]:last-child {
  border-bottom: none;
}
.mobile-suggestion-item[data-v-65fa525f]:hover {
  background-color: var(--suggestion-hover-bg);
}

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

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.container {
    display: flex;
    min-height: 100vh;
}

/* 侧边栏样式 */
.sidebar {
    width: 240px;
    background-color: var(--sidebar-bg);
    box-shadow: 2px 0 5px var(--shadow-medium);
    padding: 20px 0;
}

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

.sidebar-nav li {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.sidebar-nav li:hover {
    background-color: var(--sidebar-item-hover-bg);
}

.sidebar-nav li.active {
    background-color: var(--sidebar-item-active-bg);
    color: var(--brand-primary);
}

.sidebar-nav .icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.sidebar-nav .icon.inactive {
    display: none;
}

.sidebar-nav li.active .icon.active {
    display: none;
}

.sidebar-nav li.active .icon.inactive {
    display: block;
}

/* 主内容区域样式 */
.main-content {
    flex: 1;
    padding: 20px;
}

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

.logo {
    font-size: 24px;
    font-weight: 500;
    color: #1a73e8;
}

.search-bar {
    display: flex;
    gap: 10px;
}

.search-bar input {
    width: 300px;
    padding: 8px 16px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.search-bar button {
    padding: 8px 16px;
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-btn {
    padding: 8px 24px;
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 内容区域样式 */
.content {
    max-width: 1200px;
    margin: 0 auto;
}

.main-title {
    font-size: 32px;
    color: var(--text-primary);
    margin-bottom: 40px;
    text-align: center;
}

.section-title {
    font-size: 24px;
    color: var(--text-primary);
    margin: 30px 0 20px;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.tool-card {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-medium);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.tool-card:hover {
    transform: translateY(-5px);
    background-color: var(--card-hover-bg);
}

.tool-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 12px 0 8px;
}

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

.icon-placeholder {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--brand-secondary);
    border-radius: 8px;
} 

.container[data-v-3c8cbfc6] {
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.container[data-v-3c8cbfc6]:not(.mobile) {
  min-width: 800px;
}
.main-container[data-v-3c8cbfc6] {
  flex: 1;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.container:not(.mobile) .main-container[data-v-3c8cbfc6] {
  min-width: 800px;
}
.sidebar[data-v-3c8cbfc6] {
  width: 200px;
  min-width: 200px;
  background-color: transparent;
  padding: 0 12px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 移动端侧边栏样式 */
.sidebar.mobile-sidebar[data-v-3c8cbfc6] {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background-color: #ffffff;
  z-index: 1500;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  padding: 20px 12px 12px;
  touch-action: pan-x; /* 允许水平滑动 */
}

/* 拖拽时禁用过渡动画 */
.sidebar.mobile-sidebar.dragging[data-v-3c8cbfc6] {
  transition: none;
}
.sidebar.mobile-sidebar.sidebar-visible[data-v-3c8cbfc6] {
  transform: translateX(0);
}

/* 移动端侧栏遮罩层 */
.sidebar.mobile-sidebar[data-v-3c8cbfc6]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 280px;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1400;
  pointer-events: none;
}

/* 侧边栏下一级内容区域遮罩层 */
.sidebar.mobile-sidebar[data-v-3c8cbfc6]::after {
  content: '';
  position: fixed;
  top: 0;
  left: 280px;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1300;
  pointer-events: none;
}
.sidebar.mobile-sidebar.sidebar-visible[data-v-3c8cbfc6]::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sidebar.mobile-sidebar.sidebar-visible[data-v-3c8cbfc6]::after {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 移动端侧栏标题样式 */
.sidebar-header[data-v-3c8cbfc6] {
  display: flex;
  align-items: center;
  padding: 8px 16px 16px;
  margin-bottom: 8px;
}
.sidebar-logo[data-v-3c8cbfc6] {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 6px;
}
.sidebar-title[data-v-3c8cbfc6] {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}



/* 移动端侧边栏文字样式 */
.container.mobile .sidebar-nav ul li[data-v-3c8cbfc6] {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  border-radius: 12px;
  margin: 8px 0;
  padding: 12px 16px;
}
.container.mobile .sidebar-nav ul li.active[data-v-3c8cbfc6] {
  background-color: var(--sidebar-item-active-bg);
  color: var(--text-primary);
  font-weight: 500;
}
.container.mobile .sidebar-nav ul li[data-v-3c8cbfc6]:hover {
  background-color: var(--sidebar-item-hover-bg);
}

/* 移动端侧边栏图标样式 */
.container.mobile .sidebar-nav ul li .icon[data-v-3c8cbfc6] {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  opacity: 0.7;
}
.container.mobile .sidebar-nav ul li.active .icon[data-v-3c8cbfc6] {
  opacity: 1;
}
.sidebar-scroll[data-v-3c8cbfc6] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.sidebar-scroll[data-v-3c8cbfc6]::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}
.main-content[data-v-3c8cbfc6] {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 8px;
}
.container:not(.mobile) .main-content[data-v-3c8cbfc6] {
  min-width: 600px;
}
.content-scroll[data-v-3c8cbfc6] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.content-scroll[data-v-3c8cbfc6]::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}
.content[data-v-3c8cbfc6] {
  padding: 0 20px 0 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* 移动端内容样式 */
.container.mobile .content[data-v-3c8cbfc6] {
  padding: 0;
  max-width: none;
}
.container.mobile .main-content[data-v-3c8cbfc6] {
  padding: 0;
}
.main-title[data-v-3c8cbfc6] {
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: 32px;
  text-align: left;
  font-weight: 400;
}
.section-title[data-v-3c8cbfc6] {
  font-size: 18px;
  color: var(--text-primary);
  margin: 16px 0 16px;
  font-weight: 500;
  scroll-margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 移动端分组标题 */
.container.mobile .section-title[data-v-3c8cbfc6] {
  padding: 0 16px;
}
.edit-icon[data-v-3c8cbfc6] {
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.edit-icon[data-v-3c8cbfc6]:hover {
  opacity: 1;
}
.tool-grid[data-v-3c8cbfc6] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 0;
}

/* 移动端工具网格 */
.container.mobile .tool-grid[data-v-3c8cbfc6] {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 16px;
}
.tool-card[data-v-3c8cbfc6] {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: var(--card-bg);
  padding: 16px;
  border-radius: 12px;
  box-shadow: none;
}

/* 移动端工具卡片 */
.container.mobile .tool-card[data-v-3c8cbfc6] {
  min-height: 56px;
  flex-direction: row;
  align-items: center;
  background-color: transparent;
  padding: 16px;
  border-radius: 0;
  border-bottom: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  justify-content: flex-start;
}
.container.mobile .tool-card[data-v-3c8cbfc6]:hover {
  background-color: var(--bg-hover);
}
.container.mobile .tool-card[data-v-3c8cbfc6]:last-child {
  border-bottom: none;
}
.tool-icon[data-v-3c8cbfc6] {
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
}
.tool-title[data-v-3c8cbfc6] {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.tool-desc[data-v-3c8cbfc6] {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 移动端工具图标和文本 */
.container.mobile .tool-icon[data-v-3c8cbfc6] {
  width: 24px;
  height: 24px;
  margin-bottom: 0;
  margin-right: 16px;
  opacity: 0.8;
  flex-shrink: 0;
  display: block;
}
.container.mobile .tool-title[data-v-3c8cbfc6] {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
  line-height: 24px;
  display: flex;
  align-items: center;
  height: 24px;
}
.container.mobile .tool-desc[data-v-3c8cbfc6] {
  display: none;
}
.icon-placeholder[data-v-3c8cbfc6] {
  margin-bottom: 10px;
}
.sidebar-nav ul li[data-v-3c8cbfc6] {
  border-radius: 20px;
  margin: 12px 0;
  padding: 8px 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-top: 24px;
}
.sidebar-nav ul li[data-v-3c8cbfc6]:first-child {
  margin-top: 32px;
}
.sidebar-nav ul li[data-v-3c8cbfc6]:hover {
  background-color: var(--sidebar-item-hover-bg);
}
.sidebar-nav ul li.active[data-v-3c8cbfc6] {
  background-color: var(--sidebar-item-active-bg);
  color: var(--text-primary);
}
.sidebar-nav ul li.active .icon.active[data-v-3c8cbfc6] {
  display: none;
}
.sidebar-nav ul li.active .icon.inactive[data-v-3c8cbfc6] {
  display: block;
}
.sidebar-nav ul li:not(.active) .icon.active[data-v-3c8cbfc6] {
  display: block;
}
.sidebar-nav ul li:not(.active) .icon.inactive[data-v-3c8cbfc6] {
  display: none;
}
.tool-selector-modal[data-v-3c8cbfc6] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.tool-selector-content[data-v-3c8cbfc6] {
  background: var(--modal-bg);
  border-radius: 12px;
  width: 90%;
  max-width: 1000px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.tool-selector-header[data-v-3c8cbfc6] {
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--modal-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tool-selector-header h3[data-v-3c8cbfc6] {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}
.close-icon[data-v-3c8cbfc6] {
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.close-icon[data-v-3c8cbfc6]:hover {
  opacity: 1;
}
.tool-selector-grid[data-v-3c8cbfc6] {
  padding: 20px 20px 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.tool-selector-item[data-v-3c8cbfc6] {
  background: var(--card-bg);
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.tool-selector-item[data-v-3c8cbfc6]:hover {
  background: var(--bg-hover);
}
.tool-selector-item.selected[data-v-3c8cbfc6] {
  background: var(--brand-secondary);
  border: 2px solid var(--brand-primary);
}
.tool-selector-footer[data-v-3c8cbfc6] {
  padding: 16px 20px;
  border-top: 1px solid var(--modal-border);
  display: flex;
  justify-content: flex-end;
}
.confirm-btn[data-v-3c8cbfc6] {
  padding: 8px 24px;
  background: var(--text-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.2s;
}
.confirm-btn[data-v-3c8cbfc6]:hover {
  opacity: 0.8;
}

/* 标签页样式 */
.tabs-container[data-v-3c8cbfc6] {
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--toolbar-border);
  height: 40px;
  overflow: hidden;
  padding-top: 8px;
  margin-bottom: -8px; /* 抵消padding-top的影响，保持整体高度不变 */
}
.tabs-scroll[data-v-3c8cbfc6] {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: 100px;
}
.tabs[data-v-3c8cbfc6] {
  display: flex;
  height: 100%;
  padding: 0 20px 0;
  gap: 4px;
  margin-left: 140px;
}
.tab[data-v-3c8cbfc6] {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 100%;
  background: var(--tab-bg);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: all 0.2s;
  gap: 8px;
  min-width: 120px;
  max-width: 200px;
}
.tab.active[data-v-3c8cbfc6] {
  background: var(--tab-active-bg);
  color: var(--tab-active-text);
}
.tab-icon[data-v-3c8cbfc6] {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}
.tab.active .tab-icon[data-v-3c8cbfc6] {
  opacity: 1;
  filter: brightness(0) invert(1);
}
.tab-title[data-v-3c8cbfc6] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.tab .close-icon[data-v-3c8cbfc6] {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.tab.active .close-icon[data-v-3c8cbfc6] {
  opacity: 0.8;
  filter: brightness(0) invert(1);
}
.tab .close-icon[data-v-3c8cbfc6]:hover {
  opacity: 1;
}
.tab.active .close-icon[data-v-3c8cbfc6]:hover {
  opacity: 1;
}

/* 应用内容样式 */
.tool-content[data-v-3c8cbfc6] {
  width: 100%;
  height: calc(100vh - 120px); /* 进一步调整高度，确保与 Footer 连接 */
  background: var(--bg-primary);
  position: relative;
  margin: 0;
  padding: 0;
}
.iframe-container[data-v-3c8cbfc6] {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
.iframe-container iframe[data-v-3c8cbfc6] {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--bg-primary);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  margin: 0;
  padding: 0;
}
.iframe-container iframe.loaded[data-v-3c8cbfc6] {
  opacity: 1;
}

/* 加载指示器样式 */
.loading-indicator[data-v-3c8cbfc6] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 10;
}
.loading-spinner[data-v-3c8cbfc6] {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-secondary);
  border-top: 3px solid var(--text-primary);
  border-radius: 50%;
  animation: spin-3c8cbfc6 1s linear infinite;
}
.loading-text[data-v-3c8cbfc6] {
  font-size: 14px;
  color: var(--text-secondary);
}
@keyframes spin-3c8cbfc6 {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}

/* 保留桌面端媒体查询（仅适用于非移动端） */
@media screen and (max-width: 800px) {
.container[data-v-3c8cbfc6]:not(.mobile) {
    min-width: 800px;
    overflow-x: auto;
}
.container:not(.mobile) .main-container[data-v-3c8cbfc6] {
    min-width: 800px;
}
.container:not(.mobile) .main-content[data-v-3c8cbfc6] {
    min-width: 600px;
}
}

/* 暗黑模式下被选中标签页的图标适配 */
@media (prefers-color-scheme: dark) {
.tab.active .tab-icon[data-v-3c8cbfc6] {
    filter: none !important;
}
.tab.active .close-icon[data-v-3c8cbfc6] {
    filter: none !important;
}
}

/* 强制暗黑模式类的图标适配 */
.dark-theme .tab.active .tab-icon[data-v-3c8cbfc6] {
  filter: none !important;
}
.dark-theme .tab.active .close-icon[data-v-3c8cbfc6] {
  filter: none !important;
}

/* 全屏遮罩层样式 */
.page-overlay[data-v-3c8cbfc6] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1300;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}