/* 全局重置与字体 — 极简灰白基调，无彩色干扰 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }


    /* ==========================================
   深色模式 (Dark Mode) 样式
   ========================================== */

/* 1. 全局背景和文字颜色 */
html.dark-mode,
html.dark-mode body {
  background-color: #121212; /* 深黑背景 */
  color: #e0e0e0;            /* 浅灰文字 */
}

/* 2. 顶部导航和 Logo */
html.dark-mode .logo,
html.dark-mode .badge,
html.dark-mode .top-date,
html.dark-mode .search-logo .text-blue {
  color: #e0e0e0;
}
html.dark-mode .badge {
  border-left-color: #444;
}
html.dark-mode #theme-toggle {
  border-color: #444;
  color: #e0e0e0;
}
html.dark-mode #theme-toggle:hover {
  background-color: #2a2a2a;
}

/* 3. 搜索框 */
html.dark-mode .search-input-group {
  background-color: #1e1e1e;
  border-color: #333;
}
html.dark-mode .search-input-group:focus-within {
  border-color: #666;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}
html.dark-mode .search-dropdown {
  background-color: #2a2a2a;
  border-right-color: #333;
  color: #a0a0a0;
}
html.dark-mode .search-dropdown:hover {
  background-color: #333;
}
html.dark-mode .search-input-group input {
  color: #e0e0e0;
}
html.dark-mode .search-input-group button {
  background-color: #4e6ef2; /* 按钮保持蓝色 */
  color: #ffffff;
}
html.dark-mode .search-input-group button:hover {
  background-color: #3b5bdb;
}

/* 4. 主内容卡片区 */
html.dark-mode .content-container {
  background-color: #1e1e1e;
  border-color: #333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
html.dark-mode #favoritesSection {
  border-bottom-color: #333 !important; /* 覆盖你内联的 border-bottom */
}

/* 5. 快捷标签 (网页、图片、AI等) */
html.dark-mode .quick-links {
  border-bottom-color: #333;
  color: #a0a0a0;
}
html.dark-mode .quick-links span.active {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* 6. 分组标题和按钮 */
html.dark-mode .group-title {
  color: #e0e0e0;
}
html.dark-mode .btn-small {
  border-color: #444;
  color: #a0a0a0;
}
html.dark-mode .btn-small:hover {
  background-color: #2a2a2a;
  border-color: #666;
  color: #e0e0e0;
}

/* 7. 网址卡片 */
html.dark-mode .site-item {
  background-color: #1e1e1e;
  border-color: #333;
  color: #e0e0e0;
}
html.dark-mode .site-item:hover {
  background-color: #2a2a2a;
  border-color: #555;
}
html.dark-mode .delete-btn {
  color: #666;
}
html.dark-mode .delete-btn:hover {
  color: #e0e0e0;
}

/* 8. 添加网址卡片 (+ 添加网址) */
html.dark-mode .add-site-card {
  background-color: #1e1e1e;
  border-color: #444;
  color: #a0a0a0;
}
html.dark-mode .add-site-card:hover {
  background-color: #2a2a2a;
  border-color: #666;
  color: #e0e0e0;
}

/* 9. 空状态提示 */
html.dark-mode .empty-message {
  border-color: #444;
  background-color: #1a1a1a;
  color: #888;
}

/* 10. 底部说明 */
html.dark-mode .footer-note {
  border-top-color: #333;
  color: #666;
}

/* 11. 弹窗样式 */
html.dark-mode .modal {
  background-color: #1e1e1e;
  border-color: #333;
}
html.dark-mode .modal h3 {
  color: #e0e0e0;
}
html.dark-mode .modal-field label {
  color: #a0a0a0;
}
html.dark-mode .modal-field input,
html.dark-mode .modal-field select {
  background-color: #121212;
  border-color: #444;
  color: #e0e0e0;
}
html.dark-mode .modal-field input:focus,
html.dark-mode .modal-field select:focus {
  border-color: #666;
}
html.dark-mode .modal-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}
html.dark-mode .modal-actions button {
  background-color: #121212;
  border-color: #444;
  color: #e0e0e0;
}
html.dark-mode .modal-actions button:hover {
  background-color: #2a2a2a;
}
html.dark-mode .modal-actions .confirm-btn {
  background-color: #e0e0e0;
  color: #121212;
  border-color: #e0e0e0;
}
html.dark-mode .modal-actions .confirm-btn:hover {
  background-color: #ffffff;
}

    body {
      background-color: #f4f6f9;
      color: #1e1f22;
      line-height: 1.5;
      min-height: 100vh;
      padding: 0;
      margin: 0;
      font-size:  12px;
    }

    .container {
      width: 100%;
      margin: 0 auto;
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 1.5rem 2rem;
    }

    .logo-area {
      display: flex;
      align-items: baseline;
      gap: 12px;
      
    }

    .logo {
      font-size: 1.6rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: #1e1f22;
    }
        /* 谷歌 Logo 经典四色 */
    .g-blue   { color: #4285F4; } /* 蓝 */
    .g-red    { color: #EA4335; } /* 红 */
    .g-yellow { color: #FBBC05; } /* 黄 */
    .g-green  { color: #34A853; } /* 绿 */

    .badge {
      font-size: 0.75rem;
      color: #5f6368;
      border-left: 1px solid #dcdfe4;
      padding-left: 12px;
      margin-left: 4px;
    }

    .top-date {
      font-size: 0.85rem;
      color: #8e9299;
    }

    /* ---- 独立居中的搜索区 ---- */
    .search-hero {
      display: flex;
      justify-content: center;
      padding: 2rem 1rem 4rem; /* 底部留出大空白，与下方分离 */
    }

    .search-wrapper {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .search-logo {
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
  font-weight: 900; /* 加粗，模仿 Logo 的感觉 */
  font-size: 32px;  /* 字号大小 */
  letter-spacing: -1.5px; /* 让字靠得紧凑一点 */
  user-select: none;
}

.text-blue {
  color: #2932e1; /* 百度蓝 */
}

.text-red {
  color: #e10602; /* 百度红 */
}

    /* 组合搜索框 */
    .search-input-group {
      display: flex;
      width: 650px;
      max-width: 90vw;
      background: #ffffff;
      border: 1px solid #4775e6; /* 百度同款蓝色边框 */
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.02);
      transition: box-shadow 0.2s, border-color 0.2s;
    }

    .search-input-group:focus-within {
      border-color: #3457d5;
      box-shadow: 0 4px 12px rgba(71, 117, 230, 0.15);
    }

    /* 左侧下拉装饰 */
    .search-dropdown {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 16px;
      color: #5f6368;
      font-size: 0.9rem;
      background: #f8f9fa;
      border-right: 1px solid #dcdfe4;
      cursor: pointer;
      user-select: none;
    }

    .search-dropdown:hover {
      background: #f0f2f5;
    }

    /* 输入框 */
    .search-input-group input {
      flex: 1;
      border: none;
      outline: none;
      padding: 10px 16px;
      font-size: 1rem;
      color: #1e1f22;
      background: transparent;
      min-width: 0;
    }

    .search-input-group input::placeholder {
      color: #b0b4ba;
    }

    /* 蓝色搜索按钮 */
    .search-input-group button {
      background: #4e6ef2;
      color: #ffffff;
      border: none;
      padding: 0 28px;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
      letter-spacing: 0.5px;
    }

    .search-input-group button:hover {
      background: #3b5bdb;
    }

    /* ---- 下方内容卡片区 ---- */
    .content-container {
      max-width: 1000px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 12px; /* 带点圆角，或者设为 0 变直角 */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      padding: 2rem;
      min-height: 500px;
      width: 95%;
      border: 1px solid #edf0f2;
    }

    /* 快捷链接 */
    .quick-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #eef0f2;
      font-size: 0.75rem;
      color: #5f6368;
    }

    .quick-links span {
      cursor: pointer;
      padding: 0.2rem 0;
      font-weight: 400;
      opacity: 0.7;
      border-bottom: 2px solid transparent;
      transition: opacity 0.12s, border-color 0.12s, color 0.12s;
    }

    .quick-links span:hover {
      opacity: 1;
    }

    .quick-links span.active {
      opacity: 1;
      font-weight: 600;
      color: #1e1f22;
      border-bottom-color: #1e1f22;
    }
    /* 分组区域 */
    .group-section {
      margin-bottom: 0.8rem;
    }

    .group-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.4rem;
    }

    .group-title {
      font-size: 0.75rem;
      font-weight: 500;
      color: #1e1f22;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    .btn-small {
      background: transparent;
      border: 1px solid #dcdfe4;
      border-radius: 20px;
      padding: 0.3rem 0.9rem;
      font-size: 0.8rem;
      color: #5f6368;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
    }

    .btn-small:hover {
      background: #f5f6f8;
      border-color: #c0c4ca;
    }

    /* 网站卡片网格 */
    .site-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 10px;
    }

    .site-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 0.8rem;
      background: #ffffff;
      border: 1px solid #e9ebef;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 420;
      color: #1e1f22;
      text-decoration: none;
      transition: background 0.12s, border-color 0.12s;
      cursor: pointer;
    }

    .site-item:hover {
      background: #f5f6f8;
      border-color: #d2d5da;
    }

    .site-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 80%;
    }

    /* 添加网址卡片 — 外观与 site-item 一致，但为按钮 */
.add-site-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.8rem;
  background: #ffffff;
  border: 1px dashed #d6d9de;   /* 虚线边框区分普通网站 */
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 420;
  color: #5f6368;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}

.add-site-card:hover {
  background: #f5f6f8;
  border-color: #b0b4ba;
  color: #1e1f22;
}

    .delete-btn {
      background: transparent;
      border: none;
      color: #b0b4ba;
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
      padding: 0 2px;
      border-radius: 6px;
      transition: color 0.1s;
      font-weight: 300;
      opacity: 0.7;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .delete-btn:hover {
      color: #1e1f22;
      opacity: 1;
    }

    /* 空状态 */
    .empty-message {
      grid-column: 1 / -1;
      text-align: center;
      padding: 2rem 0;
      color: #9aa0a6;
      font-size: 0.9rem;
      border: 1px dashed #dcdfe4;
      border-radius: 12px;
      background: #fafbfc;
    }

    /* 底部操作栏 */
    .footer-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.2rem;
      padding-top: 1.2rem;
      border-top: 1px solid #eef0f2;
      gap: 0.8rem;
    }

    .add-site-btn {
      background: #1e1f22;
      color: #ffffff;
      border: none;
      border-radius: 40px;
      padding: 0.65rem 1.6rem;
      font-size: 0.95rem;
      font-weight: 450;
      cursor: pointer;
      transition: background 0.15s;
      letter-spacing: 0.3px;
    }

    .add-site-btn:hover {
      background: #2b2d31;
    }

    .footer-note {
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid #eef0f2;
      font-size: 0.78rem;
      color: #8e9299;
      text-align: center;
    }

    /* ---------- 弹窗样式 ---------- */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.15s, visibility 0.15s;
    }

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

    .modal {
      background: #ffffff;
      border-radius: 20px;
      padding: 1.8rem 2rem 2rem;
      width: 90%;
      max-width: 440px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      border: 1px solid #e9eaed;
      transform: scale(0.98);
      transition: transform 0.15s;
    }

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

    .modal h3 {
      font-size: 1.2rem;
      font-weight: 550;
      margin-bottom: 1.2rem;
      color: #1e1f22;
    }

    .modal-field {
      margin-bottom: 1rem;
    }

    .modal-field label {
      display: block;
      font-size: 0.85rem;
      color: #5f6368;
      margin-bottom: 0.35rem;
      font-weight: 400;
    }

    .modal-field input,
    .modal-field select {
      width: 100%;
      padding: 0.65rem 1rem;
      border: 1px solid #dcdfe4;
      border-radius: 12px;
      font-size: 0.95rem;
      background: #ffffff;
      outline: none;
      transition: border-color 0.12s;
      color: #1e1f22;
    }

    .modal-field input:focus,
    .modal-field select:focus {
      border-color: #1e1f22;
    }

    .modal-field select {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 12px;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 1.5rem;
    }

    .modal-actions button {
      padding: 0.65rem 1.4rem;
      border-radius: 40px;
      font-size: 0.95rem;
      font-weight: 450;
      cursor: pointer;
      border: 1px solid #dcdfe4;
      background: #ffffff;
      color: #1e1f22;
      transition: background 0.12s, border-color 0.12s;
    }

    .modal-actions .confirm-btn {
      background: #1e1f22;
      color: #ffffff;
      border-color: #1e1f22;
    }

    .modal-actions .confirm-btn:hover {
      background: #2b2d31;
    }

    .modal-actions button:hover {
      background: #f5f6f8;
      border-color: #c0c4ca;
    }

    .modal-actions .confirm-btn:hover {
      background: #2b2d31;
      border-color: #2b2d31;
    }

        /* 右侧容器，让按钮和日期并排 */
    .top-right {
      display: flex;
      align-items: center;
      gap: 16px; /* 按钮和日期之间的间距 */
    }

    /* 切换按钮样式 */
    #theme-toggle {
      background: transparent;
      border: 1px solid #dcdfe4;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      padding: 0;
      transition: background 0.2s, transform 0.2s;
    }

    #theme-toggle:hover {
      background: #f0f2f5;
    }

    /* 移动端 */
          @media (max-width: 768px) {
      /* 1. 顶部栏：不要隐藏日期，允许换行 */
      .top-bar {
        padding: 1rem;
        flex-wrap: wrap;    /* 屏幕太窄时自动换行 */
        gap: 8px;
      }

      /* 2. 缩小 Logo 和日期字号 */
      .logo {
        font-size: 1.2rem; /* 原来 1.3rem */
      }
      
      .top-date {
        display: block;    /* 恢复日期显示 */
        font-size: 0.75rem; /* 日期字号变小 */
      }

      /* 3. 搜索区间距压缩 */
      .search-hero {
        padding: 0.5rem 1rem 1rem;
      }
      .search-wrapper {
        flex-direction: column;
        gap: 8px;
        width: 100%;
      }

      /* 4. 缩小搜索区的 Logo */
      .search-logo {
        font-size: 22px; /* 从原本的 32px 缩小到 22px */
      }

      /* 5. 缩小搜索框内部的字体和高度 */
      .search-input-group input {
        font-size: 0.85rem; /* 输入框文字变小 */
      }
      .search-input-group button {
        font-size: 0.85rem; /* 按钮文字变小 */
        padding: 0 16px;    /* 按钮左右留白减小 */
      }
      .search-input-group input,
      .search-input-group button {
        padding-top: 10px;
        padding-bottom: 10px;
      }

      /* 6. 主内容区全屏 */
      .content-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 1rem 0.8rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
      }

      /* 7. 分类标签和分组标题字号缩小 */
      .quick-links {
        font-size: 0.8rem; /* 顶部标签变小 */
        gap: 6px 12px;
      }
      .group-title {
        font-size: 0.9rem;
      }

      /* 8. 网址卡片字号和内边距缩小，网格变窄 */
      .site-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 6px;
      }
      .site-item,
      .add-site-card {
        padding: 0.6rem 0.5rem; /* 卡片变薄 */
        font-size: 0.8rem;      /* 网址字号变小 */
      }
      
      /* 9. 常用网址的虚线框稍微变矮 */
      #favoritesSection {
        margin-bottom: 12px !important; 
        padding-bottom: 12px !important;
      }
    }

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: #d0d3d9;
      border-radius: 10px;
    }