<!DOCTYPE html>
<html lang="zh" data-theme="dark" data-accent="white">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>maxtle</title>

  <!-- ====== 网页图标 (favicon) ====== -->
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%230a0a0a'/%3E%3Ctext x='50' y='62' font-family='-apple-system, Helvetica, Arial, sans-serif' font-size='44' font-weight='700' text-anchor='middle' fill='%23ffffff'%3Em%3C/text%3E%3C/svg%3E">

  <!-- ====== Supabase SDK ====== -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js">
  </script>

  <style>
    /* ===== 完整样式 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, backdrop-filter 0.4s;
    }

    :root {
      --radius-sm: clamp(6px, 1vw, 10px);
      --radius-md: clamp(10px, 1.2vw, 14px);
      --radius-lg: clamp(14px, 1.5vw, 18px);
      --radius-xl: clamp(18px, 2vw, 24px);
      --blur-normal: 12px;
      --blur-glass: 24px;
      --gap-base: clamp(12px, 2vw, 24px);
      --padding-base: clamp(16px, 3vw, 24px);
      --accent: #ffffff;
      --accent-soft: rgba(255, 255, 255, 0.22);
      --accent-border: rgba(255, 255, 255, 0.28);
      --search-bar-height: 56px;
    }

    :root[data-accent="blue"] {
      --accent: #4299e1;
      --accent-soft: rgba(66, 153, 225, 0.22);
      --accent-border: rgba(66, 153, 225, 0.28);
    }
    :root[data-accent="red"] {
      --accent: #e53e3e;
      --accent-soft: rgba(229, 62, 62, 0.22);
      --accent-border: rgba(229, 62, 62, 0.28);
    }
    :root[data-accent="green"] {
      --accent: #38a169;
      --accent-soft: rgba(56, 161, 105, 0.22);
      --accent-border: rgba(56, 161, 105, 0.28);
    }
    :root[data-accent="orange"] {
      --accent: #dd6b20;
      --accent-soft: rgba(221, 107, 32, 0.22);
      --accent-border: rgba(221, 107, 32, 0.28);
    }

    :root[data-theme="dark"] {
      --bg: #0a0a0a;
      --text: #e8e8e8;
      --text-sub: #999;
      --icon: #666;
      --icon-hover: #e8e8e8;
      --btn-bg: var(--accent);
      --btn-text: #0a0a0a;
      --btn-hover: var(--accent);
      --logo: var(--accent);
      --bubble-bg: #181818;
      --bubble-border: var(--accent-border);
      --option-hover: #222;
      --active-dot: var(--accent);
      --card-bg: #181818;
      --card-border: var(--accent-border);
      --card-hover: #222;
      --line-color: #333;
      --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
      --glass-bg: transparent;
      --glass-border: transparent;
      --glass-shadow: none;
      --glass-blur: none;
      --download-btn-bg: var(--accent);
      --download-btn-text: #0a0a0a;
      --download-btn-hover: var(--accent);
      --modal-bg: #181818;
      --modal-border: rgba(255, 255, 255, 0.15);
      --input-bg: #222;
      --input-border: #444;
      --toast-bg: rgba(0, 0, 0, 0.8);
      --admin-bg: #111;
      --admin-border: #333;
      --admin-hover: #222;
      --admin-text: #e8e8e8;
      --admin-text-sub: #999;
      --admin-card: #1a1a1a;
      --admin-card-hover: #252525;
      --notification-bg: rgba(20, 20, 30, 0.92);
      --notification-border: rgba(255, 255, 255, 0.12);
      --notification-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
      --notification-text: #e8e8e8;
      --notification-text-sub: #999;
      --search-bg: rgba(255, 255, 255, 0.08);
      --search-border: rgba(255, 255, 255, 0.15);
      --search-placeholder: #666;
      --search-icon: #666;
      --search-bar-bg: rgba(20, 20, 28, 0.85);
      --search-bar-border: rgba(255, 255, 255, 0.08);
      --search-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
      --category-hidden-opacity: 0.3;
      --search-btn-bg: var(--accent);
      --search-btn-color: #0a0a0a;
      --search-btn-hover: var(--accent);
      --select-text: #e8e8e8;
      --select-bg: #222;
      --select-border: #444;
      --search-mode-bg: rgba(255, 255, 255, 0.06);
      --search-mode-border: rgba(255, 255, 255, 0.10);
      --search-mode-text: #e8e8e8;
      --search-mode-active: var(--accent);
      --search-mode-active-bg: rgba(255, 255, 255, 0.10);
    }

    :root[data-theme="light"] {
      --bg: #f0f0f5;
      --text: #1a1a1a;
      --text-sub: #666;
      --icon: #999;
      --icon-hover: #1a1a1a;
      --btn-bg: var(--accent);
      --btn-text: #1a1a1a;
      --btn-hover: var(--accent);
      --logo: var(--accent);
      --bubble-bg: #ffffff;
      --bubble-border: var(--accent-border);
      --option-hover: #f0f0f0;
      --active-dot: var(--accent);
      --card-bg: #ffffff;
      --card-border: var(--accent-border);
      --card-hover: #f0f0f0;
      --line-color: #ddd;
      --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
      --glass-bg: transparent;
      --glass-border: transparent;
      --glass-shadow: none;
      --glass-blur: none;
      --download-btn-bg: var(--accent);
      --download-btn-text: #1a1a1a;
      --download-btn-hover: var(--accent);
      --modal-bg: #ffffff;
      --modal-border: rgba(0, 0, 0, 0.1);
      --input-bg: #f0f0f0;
      --input-border: #ddd;
      --toast-bg: rgba(255, 255, 255, 0.95);
      --admin-bg: #f5f5f5;
      --admin-border: #ddd;
      --admin-hover: #eee;
      --admin-text: #1a1a1a;
      --admin-text-sub: #666;
      --admin-card: #ffffff;
      --admin-card-hover: #f0f0f0;
      --notification-bg: rgba(255, 255, 255, 0.95);
      --notification-border: rgba(0, 0, 0, 0.08);
      --notification-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      --notification-text: #1a1a1a;
      --notification-text-sub: #666;
      --search-bg: rgba(0, 0, 0, 0.05);
      --search-border: rgba(0, 0, 0, 0.08);
      --search-placeholder: #999;
      --search-icon: #999;
      --search-bar-bg: rgba(240, 240, 245, 0.92);
      --search-bar-border: rgba(0, 0, 0, 0.06);
      --search-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
      --category-hidden-opacity: 0.2;
      --search-btn-bg: var(--accent);
      --search-btn-color: #1a1a1a;
      --search-btn-hover: var(--accent);
      --select-text: #1a1a1a;
      --select-bg: #f0f0f0;
      --select-border: #ddd;
      --search-mode-bg: rgba(0, 0, 0, 0.04);
      --search-mode-border: rgba(0, 0, 0, 0.06);
      --search-mode-text: #1a1a1a;
      --search-mode-active: var(--accent);
      --search-mode-active-bg: rgba(0, 0, 0, 0.06);
    }

    :root[data-theme="glass-dark"] {
      --bg: #08080e;
      --text: #f0f0fa;
      --text-sub: #a8a8c8;
      --icon: #8888aa;
      --icon-hover: #ffffff;
      --btn-bg: rgba(255, 255, 255, 0.08);
      --btn-text: #f0f0fa;
      --btn-hover: rgba(255, 255, 255, 0.16);
      --logo: var(--accent);
      --bubble-bg: rgba(20, 20, 40, 0.55);
      --bubble-border: rgba(255, 255, 255, 0.12);
      --option-hover: rgba(255, 255, 255, 0.08);
      --active-dot: var(--accent);
      --card-bg: rgba(16, 16, 32, 0.50);
      --card-border: rgba(255, 255, 255, 0.10);
      --card-hover: rgba(255, 255, 255, 0.08);
      --line-color: rgba(255, 255, 255, 0.08);
      --shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
      --glass-bg: rgba(255, 255, 255, 0.05);
      --glass-border: rgba(255, 255, 255, 0.10);
      --glass-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
      --glass-blur: blur(24px);
      --download-btn-bg: rgba(255, 255, 255, 0.12);
      --download-btn-text: #f0f0fa;
      --download-btn-hover: rgba(255, 255, 255, 0.22);
      --modal-bg: rgba(20, 20, 40, 0.6);
      --modal-border: rgba(255, 255, 255, 0.10);
      --input-bg: rgba(255, 255, 255, 0.06);
      --input-border: rgba(255, 255, 255, 0.12);
      --toast-bg: rgba(0, 0, 0, 0.7);
      --admin-bg: rgba(12, 12, 24, 0.7);
      --admin-border: rgba(255, 255, 255, 0.08);
      --admin-hover: rgba(255, 255, 255, 0.06);
      --admin-text: #f0f0fa;
      --admin-text-sub: #a8a8c8;
      --admin-card: rgba(20, 20, 40, 0.5);
      --admin-card-hover: rgba(255, 255, 255, 0.06);
      --notification-bg: rgba(16, 16, 32, 0.75);
      --notification-border: rgba(255, 255, 255, 0.10);
      --notification-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      --notification-text: #f0f0fa;
      --notification-text-sub: #a8a8c8;
      --search-bg: rgba(255, 255, 255, 0.06);
      --search-border: rgba(255, 255, 255, 0.10);
      --search-placeholder: #8888aa;
      --search-icon: #8888aa;
      --search-bar-bg: rgba(12, 12, 24, 0.80);
      --search-bar-border: rgba(255, 255, 255, 0.06);
      --search-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
      --category-hidden-opacity: 0.15;
      --search-btn-bg: var(--accent);
      --search-btn-color: #0a0a0a;
      --search-btn-hover: var(--accent);
      --select-text: #f0f0fa;
      --select-bg: rgba(255, 255, 255, 0.08);
      --select-border: rgba(255, 255, 255, 0.12);
      --search-mode-bg: rgba(255, 255, 255, 0.04);
      --search-mode-border: rgba(255, 255, 255, 0.06);
      --search-mode-text: #f0f0fa;
      --search-mode-active: var(--accent);
      --search-mode-active-bg: rgba(255, 255, 255, 0.06);
    }

    :root[data-theme="glass-light"] {
      --bg: #e8e8f0;
      --text: #0d0d1a;
      --text-sub: #5a5a72;
      --icon: #7a7a92;
      --icon-hover: #0d0d1a;
      --btn-bg: rgba(0, 0, 0, 0.06);
      --btn-text: #0d0d1a;
      --btn-hover: rgba(0, 0, 0, 0.12);
      --logo: var(--accent);
      --bubble-bg: rgba(255, 255, 255, 0.60);
      --bubble-border: rgba(255, 255, 255, 0.40);
      --option-hover: rgba(0, 0, 0, 0.05);
      --active-dot: var(--accent);
      --card-bg: rgba(255, 255, 255, 0.50);
      --card-border: rgba(255, 255, 255, 0.35);
      --card-hover: rgba(255, 255, 255, 0.70);
      --line-color: rgba(0, 0, 0, 0.07);
      --shadow: 0 12px 48px rgba(0, 0, 0, 0.10);
      --glass-bg: rgba(255, 255, 255, 0.25);
      --glass-border: rgba(255, 255, 255, 0.35);
      --glass-shadow: 0 12px 48px rgba(0, 0, 0, 0.08);
      --glass-blur: blur(24px);
      --download-btn-bg: rgba(0, 0, 0, 0.08);
      --download-btn-text: #0d0d1a;
      --download-btn-hover: rgba(0, 0, 0, 0.16);
      --modal-bg: rgba(255, 255, 255, 0.6);
      --modal-border: rgba(255, 255, 255, 0.4);
      --input-bg: rgba(255, 255, 255, 0.4);
      --input-border: rgba(0, 0, 0, 0.08);
      --toast-bg: rgba(255, 255, 255, 0.9);
      --admin-bg: rgba(240, 240, 248, 0.7);
      --admin-border: rgba(255, 255, 255, 0.3);
      --admin-hover: rgba(0, 0, 0, 0.04);
      --admin-text: #0d0d1a;
      --admin-text-sub: #5a5a72;
      --admin-card: rgba(255, 255, 255, 0.5);
      --admin-card-hover: rgba(255, 255, 255, 0.7);
      --notification-bg: rgba(255, 255, 255, 0.7);
      --notification-border: rgba(255, 255, 255, 0.4);
      --notification-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
      --notification-text: #0d0d1a;
      --notification-text-sub: #5a5a72;
      --search-bg: rgba(255, 255, 255, 0.40);
      --search-border: rgba(255, 255, 255, 0.45);
      --search-placeholder: #7a7a92;
      --search-icon: #7a7a92;
      --search-bar-bg: rgba(232, 232, 240, 0.85);
      --search-bar-border: rgba(255, 255, 255, 0.30);
      --search-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
      --category-hidden-opacity: 0.15;
      --search-btn-bg: var(--accent);
      --search-btn-color: #0d0d1a;
      --search-btn-hover: var(--accent);
      --select-text: #0d0d1a;
      --select-bg: rgba(255, 255, 255, 0.40);
      --select-border: rgba(0, 0, 0, 0.08);
      --search-mode-bg: rgba(255, 255, 255, 0.30);
      --search-mode-border: rgba(255, 255, 255, 0.35);
      --search-mode-text: #0d0d1a;
      --search-mode-active: var(--accent);
      --search-mode-active-bg: rgba(255, 255, 255, 0.50);
    }

    body {
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
      font-size: clamp(14px, 2vw, 16px);
      transition: background 0.4s, color 0.3s;
      padding-bottom: calc(var(--search-bar-height) + 32px);
    }

    /* ===== 通用样式 ===== */
    .article-subtitle {
      font-size: clamp(16px, 2.4vw, 19px);
      font-weight: 600;
      margin: clamp(20px, 4vw, 28px) 0 10px;
      color: var(--accent);
    }
    .time-box {
      color: var(--accent);
      font-size: clamp(16px, 2.5vw, 20px);
      letter-spacing: 1px;
      margin: 8px 0;
    }
    .top-action-bar {
      position: fixed;
      top: var(--padding-base);
      left: var(--padding-base);
      display: flex;
      gap: clamp(8px, 1vw, 12px);
      z-index: 100;
    }
    .top-btn {
      width: clamp(36px, 6vw, 40px);
      height: clamp(36px, 6vw, 40px);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--icon);
      cursor: pointer;
      border-radius: var(--radius-xl);
      background: var(--btn-bg);
      border: 1px solid var(--bubble-border);
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, backdrop-filter 0.4s;
    }
    .top-btn:hover {
      color: var(--icon-hover);
      background: var(--btn-hover);
    }
    .top-btn svg {
      width: clamp(18px, 3vw, 22px);
      height: clamp(18px, 3vw, 22px);
    }

    .bubble {
      position: fixed;
      top: calc(var(--padding-base) + clamp(36px, 6vw, 40px) + 12px);
      left: var(--padding-base);
      width: min(280px, calc(100vw - var(--padding-base) * 2));
      background: var(--bubble-bg);
      border: 1px solid var(--bubble-border);
      border-radius: var(--radius-lg);
      padding: 8px 0;
      opacity: 0;
      transform: translateY(-8px) scale(0.96);
      pointer-events: none;
      transition: opacity 0.25s, transform 0.25s, background 0.3s, border-color 0.3s, box-shadow 0.3s, backdrop-filter 0.4s;
      z-index: 99;
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      max-height: 80vh;
      overflow-y: auto;
    }
    .bubble.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .bubble-group {
      padding: 6px 0;
    }
    .bubble-group+.bubble-group {
      border-top: 1px solid var(--bubble-border);
    }
    .bubble-label {
      padding: 6px 16px 4px;
      font-size: clamp(10px, 1.5vw, 11px);
      color: var(--text-sub);
      letter-spacing: 0.5px;
    }
    .bubble-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: clamp(7px, 1.5vw, 9px) 16px;
      font-size: clamp(13px, 1.8vw, 14px);
      color: var(--text);
      cursor: pointer;
      user-select: none;
    }
    .bubble-option:hover {
      background: var(--option-hover);
    }
    .bubble-option .badge {
      background: var(--accent);
      color: var(--btn-text);
      font-size: clamp(10px, 1.2vw, 11px);
      padding: 2px 10px;
      border-radius: 20px;
      font-weight: 600;
    }
    .bubble-option .dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: transparent;
      border: 2px solid var(--text-sub);
      transition: all 0.2s;
      flex-shrink: 0;
    }
    .bubble-option .dot.active {
      background: var(--active-dot);
      border-color: var(--active-dot);
    }

    .page {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      min-height: 100vh;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
      padding-top: calc(var(--padding-base) + clamp(36px, 6vw, 40px) + 12px);
    }
    .page.active {
      opacity: 1;
      pointer-events: auto;
    }
    .start-page {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(12px, 3vw, 20px);
    }
    .sub-page,
    .third-page,
    .win10-page,
    .fourth-page,
    .fifth-page,
    .sixth-page,
    .diskIcon-page,
    .lively-page,
    .mica-page,
    .official-download-page,
    .third-download-page,
    .err404-page {
      max-width: min(900px, 100%);
      margin: 0 auto;
      padding-inline: var(--padding-base);
      padding-bottom: var(--padding-base);
    }
    .logo-text {
      font-size: clamp(32px, 8vw, 48px);
      font-weight: 700;
      letter-spacing: clamp(3px, 1vw, 6px);
      color: var(--logo);
    }
    .intro {
      font-size: clamp(14px, 2vw, 16px);
      line-height: 1.8;
      color: var(--text);
      max-width: min(360px, 90vw);
      text-align: center;
    }
    .start-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: clamp(10px, 2vw, 12px) clamp(24px, 6vw, 32px);
      font-size: clamp(14px, 2vw, 16px);
      color: var(--btn-text);
      background: var(--btn-bg);
      border: 1px solid var(--bubble-border);
      border-radius: var(--radius-xl);
      cursor: pointer;
      box-shadow: var(--shadow);
      transition: background 0.25s, transform 0.15s, border-color 0.3s, box-shadow 0.3s, backdrop-filter 0.4s;
      background-clip: padding-box;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .start-btn:hover {
      background: var(--btn-hover);
      transform: translateY(-1px);
    }
    .start-btn:active {
      transform: translateY(0);
    }
    .section-title {
      font-size: clamp(22px, 4vw, 28px);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }
    .page-main-title {
      font-size: clamp(26px, 5vw, 32px);
      font-weight: 700;
      text-align: center;
      margin-bottom: clamp(20px, 4vw, 30px);
      color: var(--text);
    }
    .section-desc {
      font-size: clamp(13px, 1.8vw, 15px);
      color: var(--text-sub);
      margin-bottom: clamp(24px, 4vw, 32px);
    }
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
      gap: var(--gap-base);
      margin-bottom: clamp(32px, 6vw, 48px);
    }
    .card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: var(--radius-lg);
      padding: clamp(16px, 3vw, 24px);
      cursor: pointer;
      transition: background 0.25s, transform 0.15s, border-color 0.3s, box-shadow 0.3s, backdrop-filter 0.4s;
      display: flex;
      gap: clamp(10px, 2vw, 14px);
      align-items: flex-start;
      box-shadow: var(--shadow);
      background-clip: padding-box;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      position: relative;
      z-index: 1;
    }
    .card:hover {
      background: var(--card-hover);
      transform: translateY(-2px);
      border-color: var(--text-sub);
    }
    .card:active {
      transform: scale(0.98);
    }
    .card-icon {
      width: clamp(28px, 5vw, 32px);
      height: clamp(28px, 5vw, 32px);
      flex-shrink: 0;
      object-fit: contain;
      border-radius: var(--radius-sm);
    }
    .card-content {
      flex: 1;
      pointer-events: none;
    }
    .card-title {
      font-size: clamp(15px, 2vw, 16px);
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
    }
    .card-sub {
      font-size: clamp(12px, 1.6vw, 13px);
      color: var(--text-sub);
      line-height: 1.5;
    }
    .info-list {
      font-size: clamp(13px, 1.8vw, 14px);
      color: var(--text-sub);
      margin-bottom: 24px;
      line-height: 1.7;
    }
    .divider-line {
      width: 100%;
      height: 1px;
      background: var(--line-color);
      margin-bottom: 24px;
    }
    .article-text {
      font-size: clamp(14px, 2vw, 16px);
      line-height: 1.8;
      color: var(--text);
      margin-bottom: 16px;
    }
    .indent-two {
      text-indent: 2em;
    }
    .download-box {
      margin-top: clamp(40px, 8vw, 60px);
      text-align: center;
      font-size: clamp(14px, 2vw, 16px);
    }
    .download-btn {
      display: inline-block;
      padding: clamp(10px, 1.5vw, 14px) clamp(28px, 5vw, 48px);
      font-size: clamp(14px, 1.8vw, 16px);
      font-weight: 600;
      color: var(--download-btn-text);
      background: var(--download-btn-bg);
      border: 1px solid var(--bubble-border);
      border-radius: var(--radius-xl);
      cursor: pointer;
      text-decoration: none;
      box-shadow: var(--shadow);
      transition: background 0.25s, transform 0.15s, border-color 0.3s, box-shadow 0.3s, backdrop-filter 0.4s;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      background-clip: padding-box;
      user-select: none;
    }
    .download-btn:hover {
      background: var(--download-btn-hover);
      transform: translateY(-2px);
    }
    .download-btn:active {
      transform: translateY(0);
    }
    .err404-page {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      min-height: 100vh;
    }
    .err-big-num {
      font-size: clamp(72px, 18vw, 120px);
      font-weight: 900;
      color: var(--accent);
      opacity: 0.85;
    }
    .err-desc {
      font-size: clamp(16px, 3vw, 20px);
      color: var(--text-sub);
    }
    .official-download-page .card-grid,
    .third-download-page .card-grid {
      margin-top: clamp(80px, 20vh, 160px);
    }

    /* ===== 搜索分类容器 ===== */
    .category-section {
      transition: opacity 0.4s ease, transform 0.3s ease;
    }
    .category-section.category-hidden {
      opacity: var(--category-hidden-opacity, 0.2);
      pointer-events: none;
      transform: scale(0.98);
    }
    .category-section.category-empty {
      display: none !important;
    }
    .category-section .section-title {
      transition: opacity 0.3s;
    }
    .category-section.category-hidden .section-title {
      opacity: 0.3;
    }
    /* 分类内卡片隐藏由 .card.hidden 控制 */
    .card.hidden {
      display: none !important;
    }

    /* 无结果占位 */
    .no-result-global {
      text-align: center;
      padding: clamp(60px, 10vw, 100px) 20px;
      color: var(--text-sub);
      font-size: clamp(16px, 2.2vw, 19px);
      background: var(--card-bg);
      border: 1px dashed var(--card-border);
      border-radius: var(--radius-lg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      margin-bottom: 40px;
      pointer-events: none;
    }
    .no-result-global .emoji {
      font-size: clamp(48px, 8vw, 72px);
      display: block;
      margin-bottom: 16px;
    }

    /* ===== 搜索栏 - 底部悬浮 iOS 风格 ===== */
    .search-bar-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 90;
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
      background: var(--search-bar-bg);
      backdrop-filter: blur(20px) saturate(1.2);
      -webkit-backdrop-filter: blur(20px) saturate(1.2);
      border-top: 1px solid var(--search-bar-border);
      box-shadow: var(--search-shadow);
      transform: translateY(0);
      transition: transform 0.5s cubic-bezier(0.32, 0.94, 0.60, 1), opacity 0.4s ease;
      will-change: transform;
      display: none;
    }
    .search-bar-container.visible {
      display: block;
    }
    .search-bar-container.hidden {
      transform: translateY(calc(100% + 20px));
      opacity: 0;
      pointer-events: none;
    }

    .search-bar-container .search-wrapper {
      position: relative;
      max-width: 720px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .search-bar-container .search-input-wrap {
      position: relative;
      flex: 1;
    }
    .search-bar-container .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--search-icon);
      pointer-events: none;
      opacity: 0.5;
      transition: opacity 0.3s;
    }
    .search-bar-container .search-icon svg {
      width: 20px;
      height: 20px;
      display: block;
    }
    .search-bar-container .search-input {
      width: 100%;
      padding: 12px 48px 12px 44px;
      background: var(--search-bg);
      border: 1px solid var(--search-border);
      border-radius: var(--radius-xl);
      color: var(--text);
      font-size: clamp(15px, 1.8vw, 17px);
      font-family: inherit;
      outline: none;
      transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      height: 48px;
    }
    .search-bar-container .search-input::placeholder {
      color: var(--search-placeholder);
      opacity: 0.5;
    }
    .search-bar-container .search-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .search-bar-container .search-input:focus+.search-icon {
      opacity: 0.8;
    }
    .search-bar-container .search-clear {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--search-icon);
      cursor: pointer;
      padding: 4px;
      border-radius: 50%;
      opacity: 0;
      transition: opacity 0.25s, background 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
    }
    .search-bar-container .search-clear.visible {
      opacity: 0.4;
    }
    .search-bar-container .search-clear.visible:hover {
      opacity: 0.8;
      background: var(--option-hover);
    }
    .search-bar-container .search-clear svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    /* ===== 搜索模式切换按钮 ===== */
    .search-mode-toggle {
      display: flex;
      align-items: center;
      gap: 2px;
      background: var(--search-mode-bg);
      border: 1px solid var(--search-mode-border);
      border-radius: var(--radius-xl);
      padding: 3px;
      flex-shrink: 0;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .search-mode-btn {
      padding: 4px 12px;
      border: none;
      border-radius: var(--radius-md);
      font-size: clamp(11px, 1.2vw, 12px);
      font-weight: 500;
      color: var(--search-mode-text);
      background: transparent;
      cursor: pointer;
      transition: background 0.25s, color 0.25s, transform 0.15s;
      white-space: nowrap;
      font-family: inherit;
    }
    .search-mode-btn:hover {
      background: var(--search-mode-active-bg);
    }
    .search-mode-btn.active {
      background: var(--search-mode-active);
      color: var(--btn-text);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    .search-mode-btn:active {
      transform: scale(0.95);
    }

    /* ===== 圆形搜索按钮 ===== */
    .search-btn-circle {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid var(--search-border);
      background: var(--search-btn-bg);
      color: var(--search-btn-color);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s, transform 0.2s, box-shadow 0.3s, border-color 0.3s;
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      padding: 0;
      position: relative;
      z-index: 2;
    }
    .search-btn-circle:hover {
      background: var(--search-btn-hover);
      transform: scale(1.05);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    .search-btn-circle:active {
      transform: scale(0.95);
    }
    .search-btn-circle svg {
      width: 22px;
      height: 22px;
      display: block;
      stroke: currentColor;
      stroke-width: 2.2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media screen and (max-width: 767px) {
      .card-grid {
        grid-template-columns: 1fr;
      }
      .search-bar-container {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
      }
      .search-bar-container .search-input {
        height: 44px;
        font-size: 15px;
        padding: 10px 40px 10px 38px;
      }
      .search-bar-container .search-icon svg {
        width: 18px;
        height: 18px;
      }
      .search-btn-circle {
        width: 44px;
        height: 44px;
      }
      .search-btn-circle svg {
        width: 20px;
        height: 20px;
      }
      .search-mode-btn {
        padding: 3px 8px;
        font-size: 10px;
      }
      .search-mode-toggle {
        gap: 1px;
        padding: 2px;
      }
    }
    @media screen and (max-width: 480px) {
      .search-mode-btn {
        padding: 2px 6px;
        font-size: 9px;
      }
      .search-bar-container .search-wrapper {
        gap: 6px;
      }
      .search-btn-circle {
        width: 38px;
        height: 38px;
      }
      .search-btn-circle svg {
        width: 17px;
        height: 17px;
      }
      .search-bar-container .search-input {
        height: 38px;
        font-size: 13px;
        padding: 8px 34px 8px 32px;
      }
    }
    @media screen and (max-height: 500px) {
      .start-page {
        gap: 10px;
      }
      .logo-text {
        font-size: 28px;
      }
      .page {
        padding-top: 70px;
      }
    }
    @media screen and (min-width: 768px) and (max-width: 1200px) {
      .card-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media screen and (min-width: 1201px) {
      .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      }
    }

    /* ===== 反馈按钮 ===== */
    .feedback-fab {
      position: fixed;
      right: clamp(20px, 5vw, 32px);
      bottom: clamp(80px, 12vw, 110px);
      width: clamp(48px, 8vw, 56px);
      height: clamp(48px, 8vw, 56px);
      border-radius: 50%;
      background: var(--accent);
      color: var(--bg);
      border: 1px solid var(--bubble-border);
      cursor: pointer;
      box-shadow: var(--shadow);
      transition: transform 0.2s, box-shadow 0.2s, background 0.3s, border-color 0.3s;
      z-index: 89;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .feedback-fab:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
    }
    .feedback-fab svg {
      width: 55%;
      height: 55%;
      fill: var(--bg);
    }

    /* ===== 反馈弹窗 ===== */
    .feedback-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .feedback-overlay.open {
      display: flex;
    }
    .feedback-modal {
      background: var(--modal-bg);
      border: 1px solid var(--modal-border);
      border-radius: var(--radius-lg);
      padding: clamp(24px, 4vw, 36px);
      max-width: 480px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .feedback-modal .close-btn {
      position: sticky;
      top: 0;
      float: right;
      background: none;
      border: none;
      color: var(--text-sub);
      font-size: 24px;
      cursor: pointer;
      padding: 4px 8px;
      z-index: 10;
    }
    .feedback-modal .close-btn:hover {
      color: var(--text);
    }
    .feedback-modal .fb-title {
      font-size: clamp(20px, 3vw, 24px);
      color: var(--text);
      margin-bottom: 4px;
    }
    .feedback-modal .fb-sub {
      color: var(--text-sub);
      font-size: clamp(13px, 1.8vw, 14px);
      margin-bottom: 18px;
    }
    .feedback-modal label {
      display: block;
      color: var(--text);
      font-size: clamp(13px, 1.8vw, 14px);
      font-weight: 500;
      margin-bottom: 4px;
    }
    .feedback-modal select,
    .feedback-modal textarea,
    .feedback-modal input {
      width: 100%;
      padding: 10px 14px;
      background: var(--select-bg);
      border: 1px solid var(--select-border);
      border-radius: var(--radius-sm);
      color: var(--select-text);
      font-size: clamp(13px, 1.8vw, 14px);
      font-family: inherit;
      margin-bottom: 14px;
      transition: border-color 0.2s, background 0.3s;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      -webkit-appearance: auto;
      appearance: auto;
    }
    .feedback-modal select option {
      background: var(--select-bg);
      color: var(--select-text);
    }
    .feedback-modal select:focus,
    .feedback-modal textarea:focus,
    .feedback-modal input:focus {
      outline: none;
      border-color: var(--accent);
    }
    .feedback-modal textarea {
      min-height: 100px;
      resize: vertical;
    }
    .feedback-modal .btn-row {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 4px;
    }
    .feedback-modal .btn-row button {
      padding: 10px 28px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--modal-border);
      font-size: clamp(13px, 1.8vw, 14px);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s, border-color 0.3s;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .feedback-modal .btn-cancel {
      background: var(--option-hover);
      color: var(--text);
    }
    .feedback-modal .btn-cancel:hover {
      background: var(--card-hover);
    }
    .feedback-modal .btn-submit {
      background: var(--accent);
      color: var(--btn-text);
      border-color: var(--accent);
    }
    .feedback-modal .btn-submit:hover {
      transform: scale(1.02);
    }
    .feedback-modal .btn-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
    .feedback-modal .toast {
      margin-top: 12px;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      font-size: clamp(13px, 1.8vw, 14px);
      display: none;
      background: var(--toast-bg);
      border: 1px solid var(--modal-border);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .feedback-modal .toast.success {
      display: block;
      color: #38a169;
      border-color: rgba(56, 161, 105, 0.3);
    }
    .feedback-modal .toast.error {
      display: block;
      color: #e53e3e;
      border-color: rgba(229, 62, 62, 0.3);
    }

    /* ===== 邀请码弹窗 ===== */
    .invite-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 150;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .invite-overlay.open {
      display: flex;
    }
    .invite-modal {
      background: var(--modal-bg);
      border: 1px solid var(--modal-border);
      border-radius: var(--radius-lg);
      padding: clamp(24px, 4vw, 36px);
      max-width: 380px;
      width: 100%;
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .invite-modal h2 {
      color: var(--text);
      font-size: clamp(18px, 3vw, 22px);
      margin-bottom: 4px;
    }
    .invite-modal .sub {
      color: var(--text-sub);
      font-size: clamp(13px, 1.8vw, 14px);
      margin-bottom: 16px;
    }
    .invite-modal input {
      width: 100%;
      padding: 10px 14px;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: clamp(14px, 2vw, 16px);
      font-family: inherit;
      margin-bottom: 16px;
      transition: border-color 0.2s;
    }
    .invite-modal input:focus {
      outline: none;
      border-color: var(--accent);
    }
    .invite-modal .btn-row {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
    .invite-modal .btn-row button {
      padding: 10px 28px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--modal-border);
      font-size: clamp(13px, 1.8vw, 14px);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .invite-modal .btn-cancel {
      background: var(--option-hover);
      color: var(--text);
    }
    .invite-modal .btn-cancel:hover {
      background: var(--card-hover);
    }
    .invite-modal .btn-confirm {
      background: var(--accent);
      color: var(--btn-text);
      border-color: var(--accent);
    }
    .invite-modal .btn-confirm:hover {
      transform: scale(1.02);
    }
    .invite-modal .error-msg {
      color: #e53e3e;
      font-size: clamp(12px, 1.6vw, 13px);
      margin-bottom: 12px;
      display: none;
    }
    .invite-modal .error-msg.show {
      display: block;
    }
    .invite-modal .success-msg {
      color: #38a169;
      font-size: clamp(12px, 1.6vw, 13px);
      margin-bottom: 12px;
      display: none;
    }
    .invite-modal .success-msg.show {
      display: block;
    }

    /* ===== 通知容器 ===== */
    .notification-container {
      position: fixed;
      top: clamp(16px, 3vw, 24px);
      right: clamp(16px, 3vw, 24px);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 380px;
      width: 100%;
      pointer-events: none;
    }
    .notification-item {
      position: relative;
      background: var(--notification-bg);
      border: 1px solid var(--notification-border);
      border-radius: var(--radius-lg);
      padding: 14px 18px;
      box-shadow: var(--notification-shadow);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      transform: translateX(calc(100% + 30px));
      opacity: 0;
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
      pointer-events: auto;
      cursor: default;
    }
    .notification-item.show {
      transform: translateX(0);
      opacity: 1;
    }
    .notification-item.hiding {
      transform: translateX(calc(100% + 30px));
      opacity: 0;
      transition: transform 0.4s ease, opacity 0.3s ease;
    }
    .notification-item .notif-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 4px;
    }
    .notification-item .notif-icon {
      font-size: clamp(18px, 2.5vw, 22px);
      flex-shrink: 0;
    }
    .notification-item .notif-title {
      font-weight: 600;
      font-size: clamp(13px, 1.8vw, 15px);
      color: var(--notification-text);
    }
    .notification-item .notif-body {
      font-size: clamp(13px, 1.6vw, 14px);
      color: var(--notification-text-sub);
      line-height: 1.5;
      padding-left: 34px;
    }
    .notification-item .notif-time {
      font-size: clamp(10px, 1.2vw, 11px);
      color: var(--notification-text-sub);
      opacity: 0.6;
      padding-left: 34px;
      margin-top: 2px;
    }
    .notification-item .notif-close {
      position: absolute;
      top: 8px;
      right: 10px;
      background: none;
      border: none;
      color: var(--notification-text-sub);
      cursor: pointer;
      font-size: 16px;
      opacity: 0.4;
      transition: opacity 0.2s;
      pointer-events: auto;
      padding: 4px;
    }
    .notification-item .notif-close:hover {
      opacity: 0.9;
    }

    /* ===== 后台管理面板 ===== */
    .admin-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .admin-overlay.open {
      display: flex;
    }
    .admin-modal {
      background: var(--admin-bg);
      border: 1px solid var(--admin-border);
      border-radius: var(--radius-lg);
      padding: clamp(20px, 3vw, 32px);
      max-width: 800px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .admin-modal h2 {
      color: var(--admin-text);
      font-size: clamp(20px, 3vw, 24px);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .admin-modal .sub {
      color: var(--admin-text-sub);
      font-size: clamp(13px, 1.8vw, 14px);
      margin-bottom: 16px;
    }
    .admin-modal .stats {
      display: flex;
      gap: 16px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .admin-modal .stat-item {
      background: var(--admin-card);
      border: 1px solid var(--admin-border);
      border-radius: var(--radius-sm);
      padding: 10px 18px;
      flex: 1;
      min-width: 80px;
      text-align: center;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .admin-modal .stat-item .num {
      font-size: clamp(22px, 3vw, 28px);
      font-weight: 700;
      color: var(--accent);
    }
    .admin-modal .stat-item .label {
      font-size: clamp(11px, 1.4vw, 12px);
      color: var(--admin-text-sub);
    }
    .admin-modal .feedback-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 8px;
      max-height: 400px;
      overflow-y: auto;
    }
    .admin-modal .feedback-item {
      background: var(--admin-card);
      border: 1px solid var(--admin-border);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      transition: background 0.2s;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .admin-modal .feedback-item:hover {
      background: var(--admin-card-hover);
    }
    .admin-modal .feedback-item .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 4px;
    }
    .admin-modal .feedback-item .type {
      font-weight: 600;
      color: var(--accent);
      font-size: clamp(12px, 1.4vw, 13px);
    }
    .admin-modal .feedback-item .time {
      color: var(--admin-text-sub);
      font-size: clamp(11px, 1.2vw, 12px);
    }
    .admin-modal .feedback-item .content {
      color: var(--admin-text);
      font-size: clamp(13px, 1.6vw, 14px);
      line-height: 1.5;
      margin-bottom: 2px;
      word-wrap: break-word;
    }
    .admin-modal .feedback-item .contact {
      color: var(--admin-text-sub);
      font-size: clamp(11px, 1.2vw, 12px);
    }
    .admin-modal .feedback-item .delete-btn {
      background: none;
      border: none;
      color: var(--admin-text-sub);
      cursor: pointer;
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 4px;
      transition: background 0.2s, color 0.2s;
      margin-top: 4px;
    }
    .admin-modal .feedback-item .delete-btn:hover {
      background: rgba(229, 62, 62, 0.15);
      color: #e53e3e;
    }
    .admin-modal .empty {
      text-align: center;
      color: var(--admin-text-sub);
      padding: 30px 0;
      font-size: clamp(14px, 2vw, 16px);
    }
    .admin-modal .refresh-btn {
      padding: 8px 20px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--admin-border);
      background: var(--admin-card);
      color: var(--admin-text);
      cursor: pointer;
      font-size: clamp(12px, 1.4vw, 13px);
      transition: background 0.2s;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .admin-modal .refresh-btn:hover {
      background: var(--admin-card-hover);
    }
    .admin-modal .refresh-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .admin-modal .close-btn {
      padding: 10px 28px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--admin-border);
      background: var(--admin-card);
      color: var(--admin-text);
      cursor: pointer;
      font-size: clamp(13px, 1.8vw, 14px);
      transition: background 0.2s;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
    }
    .admin-modal .close-btn:hover {
      background: var(--admin-card-hover);
    }
    .admin-modal .admin-actions {
      display: flex;
      gap: 12px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .admin-modal .admin-actions .close-btn.danger {
      background: rgba(229, 62, 62, 0.12);
      color: #e53e3e;
      border-color: rgba(229, 62, 62, 0.2);
    }
    .admin-modal .admin-actions .close-btn.danger:hover {
      background: rgba(229, 62, 62, 0.2);
    }
  </style>
</head>
<body>

  <!-- ====== 顶部工具栏 ====== -->
  <div class="top-action-bar">
    <div class="top-btn" id="settingsBtn">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="3" />
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1.08-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l-.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1.08 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83-2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
      </svg>
    </div>
    <div class="top-btn" id="backBtn">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 12H5M12 19l-7-7 7-7" />
      </svg>
    </div>
  </div>

  <!-- ====== 设置面板 ====== -->
  <div class="bubble" id="bubble">
    <div class="bubble-group">
      <div class="bubble-label">语言 / Language</div>
      <div class="bubble-option" data-set-lang="zh">
        <span>简体中文</span>
        <div class="dot active" id="dotZh"></div>
      </div>
      <div class="bubble-option" data-set-lang="en">
        <span>English</span>
        <div class="dot" id="dotEn"></div>
      </div>
    </div>

    <div class="bubble-group">
      <div class="bubble-label">外观主题 / Theme</div>
      <div class="bubble-option" data-set-theme="dark">
        <span>深色经典</span>
        <div class="dot active" id="dotDark"></div>
      </div>
      <div class="bubble-option" data-set-theme="light">
        <span>浅色经典</span>
        <div class="dot" id="dotLight"></div>
      </div>
      <div class="bubble-option" data-set-theme="glass-dark">
        <span>液态玻璃深色</span>
        <div class="dot" id="dotGlassDark"></div>
      </div>
      <div class="bubble-option" data-set-theme="glass-light">
        <span>液态玻璃浅色</span>
        <div class="dot" id="dotGlassLight"></div>
      </div>
    </div>

    <div class="bubble-group">
      <div class="bubble-label">主题色调 / Accent</div>
      <div class="bubble-option" data-set-accent="white">
        <span>白色</span>
        <div class="dot active" id="dotWhite"></div>
      </div>
      <div class="bubble-option" data-set-accent="blue">
        <span>蓝色</span>
        <div class="dot" id="dotBlue"></div>
      </div>
      <div class="bubble-option" data-set-accent="red">
        <span>红色</span>
        <div class="dot" id="dotRed"></div>
      </div>
      <div class="bubble-option" data-set-accent="green">
        <span>绿色</span>
        <div class="dot" id="dotGreen"></div>
      </div>
      <div class="bubble-option" data-set-accent="orange">
        <span>橙色</span>
        <div class="dot" id="dotOrange"></div>
      </div>
    </div>

    <!-- 后台入口 -->
    <div class="bubble-group">
      <div class="bubble-label">管理 / Admin</div>
      <div class="bubble-option" id="adminEntry">
        <span>🔐 后台</span>
        <span class="badge" id="feedbackBadge">0</span>
      </div>
    </div>
  </div>

  <!-- ====== 邀请码弹窗 ====== -->
  <div class="invite-overlay" id="inviteOverlay">
    <div class="invite-modal">
      <h2>🔐 管理员验证</h2>
      <p class="sub">请输入管理员邀请码以进入后台</p>
      <div class="error-msg" id="inviteError">❌ 邀请码错误，请重试</div>
      <div class="success-msg" id="inviteSuccess">✅ 验证成功！正在进入后台…</div>
      <input type="password" id="inviteInput" placeholder="请输入邀请码" autocomplete="off">
      <div class="btn-row">
        <button class="btn-cancel" id="inviteCancel">取消</button>
        <button class="btn-confirm" id="inviteConfirm">验证</button>
      </div>
    </div>
  </div>

  <!-- ====== 通知容器 ====== -->
  <div class="notification-container" id="notificationContainer"></div>

  <!-- ====== 后台管理面板 ====== -->
  <div class="admin-overlay" id="adminOverlay">
    <div class="admin-modal">
      <h2>📊 反馈管理</h2>
      <p class="sub">查看和管理所有用户反馈</p>

      <div class="stats">
        <div class="stat-item">
          <div class="num" id="totalCount">0</div>
          <div class="label">总反馈</div>
        </div>
        <div class="stat-item">
          <div class="num" id="todayCount">0</div>
          <div class="label">今日新增</div>
        </div>
        <div class="stat-item" style="flex:2;">
          <div class="num" id="typeStats">-</div>
          <div class="label">类型分布</div>
        </div>
      </div>

      <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px;">
        <span style="color:var(--admin-text-sub); font-size:13px;">📝 所有反馈</span>
        <button class="refresh-btn" id="refreshBtn">🔄 刷新</button>
      </div>

      <div class="feedback-list" id="feedbackList">
        <div class="empty">🎉 暂无反馈，继续保持！</div>
      </div>

      <div class="admin-actions">
        <button class="close-btn" id="adminClose">关闭</button>
        <button class="close-btn danger" id="adminClearAll">清空所有反馈</button>
      </div>
    </div>
  </div>

  <!-- ====== 页面内容 ====== -->
  <div class="page start-page active" id="pageStart">
    <div class="time-box" id="timeShow"></div>
    <div class="logo-text">maxtle</div>
    <p class="intro" id="introText">maxtle的软件分享。<br>技术交流的网站。</p>
    <button class="start-btn" id="goSub">开始 →</button>
  </div>

  <!-- ====== 第二页 - 使用分类容器 ====== -->
  <div class="page sub-page" id="pageSub">
    <h1 class="section-title" id="subTitle">AI 分享</h1>

    <!-- 分类1: AI 分享 -->
    <div class="category-section" data-category="ai">
      <div class="card-grid" id="subCardGrid">
        <div class="card" id="cardAiTool">
          <div class="card-content">
            <div class="card-title" id="card1Title">AI 软件推荐</div>
            <div class="card-sub" id="card1Sub">精选优质 AI 工具，提升效率</div>
          </div>
        </div>
        <div class="card" id="cardAiLocal">
          <div class="card-content">
            <div class="card-title" id="card2Title">AI 软件部署在电脑上</div>
            <div class="card-sub" id="card2Sub">本地部署教程，数据更安全</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分类2: 系统美化 -->
    <div class="category-section" data-category="beauty">
      <h2 class="section-title" id="sysTitle">系统美化</h2>
      <div class="card-grid" id="beautyCardGrid">
        <div class="card" id="win11Card">
          <svg class="card-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M3 3h8v8H3z" />
            <path d="M13 3h8v8h-8z" />
            <path d="M3 13h8v8H3z" />
            <path d="M13 13h8v8h-8z" />
          </svg>
          <div class="card-content">
            <div class="card-title" id="card3Title">Windows 11 美化</div>
            <div class="card-sub" id="card3Sub">打造个性化 Win11 桌面体验</div>
          </div>
        </div>
        <div class="card" id="win10Card">
          <svg class="card-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M3 3h8v8H3z" />
            <path d="M13 3h8v8h-8z" />
            <path d="M3 13h8v8H3z" />
            <path d="M13 13h8v8h-8z" />
          </svg>
          <div class="card-content">
            <div class="card-title" id="card4Title">Windows 10 美化</div>
            <div class="card-sub" id="card4Sub">让 Win10 焕然一新</div>
          </div>
        </div>
        <div class="card" id="win7Card">
          <svg class="card-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M3 3h8v8H3z" />
            <path d="M13 3h8v8h-8z" />
            <path d="M3 13h8v8H3z" />
            <path d="M13 13h8v8h-8z" />
          </svg>
          <div class="card-content">
            <div class="card-title" id="card5Title">Windows 7 美化</div>
            <div class="card-sub" id="card5Sub">经典系统也能很精致</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分类3: Windows 下载 -->
    <div class="category-section" data-category="download">
      <h2 class="section-title" id="winDownloadTitle">Windows 下载</h2>
      <div class="card-grid" id="downloadCardGrid">
        <div class="card" id="officialDownloadCard">
          <img class="card-icon" src="https://apps.microsoft.com/assets/icons/microsoft-logo-light-1.png" alt="微软官方">
          <div class="card-content">
            <div class="card-title" id="officialCardTitle">官方下载</div>
            <div class="card-sub" id="officialCardSub">微软原版官方资源</div>
          </div>
        </div>
        <div class="card" id="thirdDownloadCard">
          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 3v14"></path>
            <path d="M19 14l-7 7-7"></path>
          </svg>
          <div class="card-content">
            <div class="card-title" id="thirdCardTitle">第三方下载</div>
            <div class="card-sub" id="thirdCardSub">第三方 Windows 下载</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="page third-page" id="pageThird">
    <h1 class="section-title" id="win11DetailTitle">Windows 11 美化</h1>
    <p class="section-desc" id="win11DetailDesc">Windows 11 美化工具合集</p>
    <div class="card-grid">
      <div class="card" id="ttbCard">
        <img class="card-icon" src="https://img.3dmgame.com/uploads/images/thumbnews/20250310/1741591887_138196.png" alt="TranslucentTB">
        <div class="card-content">
          <div class="card-title" id="translucentTbTitle">TranslucentTB 2024.1</div>
          <div class="card-sub" id="translucentTbSub">可以把任务栏透明在 win 10 win 11 上</div>
        </div>
      </div>
      <div class="card" id="startAllBackCard">
        <img class="card-icon" src="https://www.startallback.com.cn/wp-content/uploads/2022/08/favicon-0.p.png" alt="StartAllBack">
        <div class="card-content">
          <div class="card-title" id="startAllBackTitle">StartAllBack 3.9.7</div>
          <div class="card-sub" id="startAllBackSub">Win11资源管理器/开始菜单/右键菜单增强工具</div>
        </div>
      </div>
      <div class="card" id="rainmeterCard">
        <img class="card-icon" src="https://img.informer.com/icons/png/128/7092/7092444.png" alt="Rainmeter">
        <div class="card-content">
          <div class="card-title" id="rainmeterTitle">Rainmeter 4.5.23 Release</div>
          <div class="card-sub" id="rainmeterSub">个性化桌面定制工具</div>
        </div>
      </div>
      <div class="card" id="livelyCardWin11">
        <img class="card-icon" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.B8F5SVDpcp287D42asssrgHaHa?w=186&h=186&c=7&pcl=292827&r=0&o=7&dpr=3&pid=1.7&rm=3" alt="Lively Wallpaper">
        <div class="card-content">
          <div class="card-title">Lively Wallpaper 2.1.0.8</div>
          <div class="card-sub">开源免费的动态视频壁纸软件</div>
        </div>
      </div>
      <div class="card" id="micaCard">
        <img class="card-icon" src="https://pic.gameyj.com/gameyj/imgfile/20250429/29140748j4gm.png" alt="MicaForEveryone">
        <div class="card-content">
          <div class="card-title">MicaForEveryone 1.3.1.2</div>
          <div class="card-sub">Win11透明磨砂效果设置工具</div>
        </div>
      </div>
    </div>
  </div>

  <div class="page win10-page" id="pageWin10">
    <h1 class="section-title" id="win10DetailTitle">Windows 10 美化</h1>
    <p class="section-desc" id="win10DetailDesc">Windows 10 美化工具合集</p>
    <div class="card-grid">
      <div class="card" id="diskIconCard">
        <img class="card-icon" src="https://dl.zhutix.net/2015/01/iconChange.png" alt="硬盘图标修改工具">
        <div class="card-content">
          <div class="card-title" id="diskIconCardTitle">硬盘图标修改工具 1.0</div>
          <div class="card-sub" id="diskIconCardSub">自定义电脑C/D/E/F磁盘图标</div>
        </div>
      </div>
      <div class="card" id="livelyCardWin10">
        <img class="card-icon" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.B8F5SVDpcp287D42asssrgHaHa?w=186&h=186&c=7&pcl=292827&r=0&o=7&dpr=3&pid=1.7&rm=3" alt="Lively Wallpaper">
        <div class="card-content">
          <div class="card-title">Lively Wallpaper 2.1.0.8</div>
          <div class="card-sub">开源免费的动态视频壁纸软件</div>
        </div>
      </div>
    </div>
  </div>

  <!-- ====== 详情页（简化） ====== -->
  <div class="page lively-page" id="pageLively">
    <h1 class="page-main-title" id="livelyPageTitle">Lively Wallpaper</h1>
    <div class="info-list" id="livelyInfo">语言：中文<br>授权：免费开源<br>大小：约 100MB<br>版本：2.1.0.8<br>更新：2024-06-21<br>平台：Win10/11</div>
    <div class="divider-line"></div>
    <h3 class="article-subtitle" id="livelyIntroTitle">软件介绍</h3>
    <p class="article-text indent-two" id="livelyIntroText">Lively Wallpaper 是一款开源专业的视频桌面壁纸管理软件...</p>
    <h3 class="article-subtitle" id="livelyFeatureTitle">核心功能</h3>
    <p class="article-text" id="livelyFeatureText">• 支持素材类型：Gif 动画、视频、网页以及直接运行 exe 程序等</p>
    <h3 class="article-subtitle" id="livelyPerfTitle">性能与建议</h3>
    <p class="article-text" id="livelyPerfText">运行全屏应用或游戏时，壁纸播放会自动暂停...</p>
    <div class="download-box"><a class="download-btn" href="https://1833503611.mshare.123pan.cn/123pan/LdmHTd-NBVQ3?notoken=1" target="_blank">下载</a></div>
  </div>

  <div class="page fourth-page" id="pageFourth">
    <h1 class="page-main-title" id="ttbPageTitle">TranslucentTB</h1>
    <div class="info-list" id="ttbInfo">语言：中文<br>授权：免费<br>大小：1.5MB<br>版本：2024.1<br>更新：2024-06-21<br>平台：Win10/11</div>
    <div class="divider-line"></div>
    <p class="article-text indent-two" id="ttbDesc1">TranslucentTB是一个轻量级实用软件...</p>
    <p class="article-text" id="ttbDesc2">下载后将TranslucentTB文件夹解压到任意安全位置...</p>
    <div class="download-box"><a class="download-btn" href="https://wwbho.lanzouu.com/iBuCO3xdtuhg" target="_blank">下载</a></div>
  </div>

  <div class="page fifth-page" id="pageFifth">
    <h1 class="page-main-title" id="sabPageTitle">StartAllBack</h1>
    <div class="info-list" id="sabInfo">语言：多语言<br>授权：官方版<br>大小：1.68MB<br>版本：3.9.7<br>更新：2025-2-26<br>平台：Win 11</div>
    <div class="divider-line"></div>
    <h3 class="article-subtitle" id="sabIntroTitle">软件介绍</h3>
    <p class="article-text indent-two" id="sabIntroText">StartAllBack是我们所熟知的开始菜单美化工具...</p>
    <h3 class="article-subtitle" id="sabInstallTitle">安装方法</h3>
    <p class="article-text" id="sabInstallText">安装方法其实非常简单...</p>
    <h3 class="article-subtitle" id="sabFuncTitle">功能介绍</h3>
    <p class="article-text" id="sabFuncText">一键切换系统界面...</p>
    <div class="download-box"><a class="download-btn" href="https://wwbho.lanzouu.com/iw5zk3xdzb1c" target="_blank">下载</a></div>
  </div>

  <div class="page sixth-page" id="pageSixth">
    <h1 class="page-main-title" id="rainmeterPageTitle">Rainmeter</h1>
    <div class="info-list" id="rainmeterInfo">语言：中文<br>授权：免费开源<br>大小：2.34MB<br>版本：4.5.23 Release<br>更新：2025-06-07<br>平台：Win7/8/8.1/10/11</div>
    <div class="divider-line"></div>
    <h3 class="article-subtitle" id="rainmeterIntroTitle">软件介绍</h3>
    <p class="article-text indent-two" id="rainmeterIntroText">Rainmeter俗称雨滴桌面...</p>
    <h3 class="article-subtitle" id="rainmeterFuncTitle">核心功能</h3>
    <p class="article-text" id="rainmeterFuncText">硬件监控、时钟、媒体控制...</p>
    <div class="download-box"><a class="download-btn" href="https://wwbho.lanzouu.com/iKIuk3xdzawh" target="_blank">下载</a></div>
  </div>

  <div class="page diskIcon-page" id="pageDiskIcon">
    <h1 class="page-main-title" id="diskIconPageTitle">硬盘图标修改工具</h1>
    <div class="info-list" id="diskIconInfo">语言：中文<br>授权：免费<br>大小：10KB<br>版本：1.0<br>更新：2015-01-01<br>平台：WinXP/7/8/8.1/10</div>
    <div class="divider-line"></div>
    <h3 class="article-subtitle" id="diskIconIntroTitle">软件介绍</h3>
    <p class="article-text indent-two" id="diskIconIntroText">硬盘是电脑主要的存储媒介之一...</p>
    <h3 class="article-subtitle" id="diskStepTitle">操作步骤</h3>
    <p class="article-text" id="diskStepText">1、打开工具，点击浏览；<br>2、选中本地ICO图标；<br>3、点击确定；<br>4、此电脑右键刷新图标生效；<br>5、更换盘符重复操作。</p>
    <div class="download-box"><a class="download-btn" href="https://www.ilanzou.com/s/3OLLjXFM" target="_blank">下载</a></div>
  </div>

  <div class="page mica-page" id="pageMica">
    <h1 class="page-main-title" id="micaPageTitle">MicaForEveryone</h1>
    <div class="info-list" id="micaInfo">语言：中英<br>授权：免费<br>大小：20.4MB<br>版本：1.3.1.2<br>更新：2023-09-23<br>平台：Win 11 22H2+</div>
    <div class="divider-line"></div>
    <h3 class="article-subtitle" id="micaIntroTitle">软件介绍</h3>
    <p class="article-text indent-two" id="micaIntroText">相信很多人，都对Win7和Vista时代的毛玻璃透明效果...</p>
    <p class="article-text indent-two" id="micaIntroText2">MicaForEveryone 是一款非常强的工具...</p>
    <h3 class="article-subtitle" id="micaInstallTitle">安装与使用</h3>
    <p class="article-text" id="micaInstallText">1. 首先，安装 .NET SDK...</p>
    <h3 class="article-subtitle" id="micaFuncTitle">功能特点</h3>
    <p class="article-text" id="micaFuncText">• 支持云母（Mica）和亚克力（Acrylic）两种模糊效果...</p>
    <h3 class="article-subtitle" id="micaNoteTitle">注意事项</h3>
    <p class="article-text" id="micaNoteText">• 仅适用 Windows 11 22H2 及以上版本...</p>
    <div class="download-box"><a class="download-btn" href="https://wwbho.lanzouu.com/ike2K3xdzarc" target="_blank">下载</a></div>
  </div>

  <div class="page official-download-page" id="pageOfficialDownload">
    <div class="card-grid">
      <div class="card" id="win11DownloadCard">
        <svg class="card-icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M3 3h8v8H3z" />
          <path d="M13 3h8v8h-8z" />
          <path d="M3 13h8v8H3z" />
          <path d="M13 13h8v8h-8z" />
        </svg>
        <div class="card-content">
          <div class="card-title" id="win11DownloadTitle">Windows 11 下载</div>
          <div class="card-sub" id="win11DownloadSub">微软最新系统</div>
        </div>
      </div>
      <div class="card" id="win10DownloadCard">
        <svg class="card-icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M3 3h8v8H3z" />
          <path d="M13 3h8v8h-8z" />
          <path d="M3 13h8v8H3z" />
          <path d="M13 13h8v8h-8z" />
        </svg>
        <div class="card-content">
          <div class="card-title" id="win10DownloadTitle">Windows 10 下载</div>
          <div class="card-sub" id="win10DownloadSub">经典稳定系统</div>
        </div>
      </div>
    </div>
  </div>

  <div class="page third-download-page" id="pageThirdDownload">
    <div class="card-grid">
      <div class="card" id="msdnDownloadCard">
        <img class="card-icon" src="https://ts1.tc.mm.bing.net/th/id/ODF.5EFdI_KRYzSVzxjUWxSHpg?w=32&h=32&qlt=90&pcl=fffffc&o=6&pid=1.2" alt="MSDN">
        <div class="card-content">
          <div class="card-title" id="msdnCardTitle">MSDN 下载</div>
          <div class="card-sub" id="msdnCardSub">下载怀念旧系统</div>
        </div>
      </div>
      <div class="card" id="windsysCard">
        <img class="card-icon" src="https://iimo.cc/zb_users/upload/2020/03/202003181584502557285203.png" alt="windsys社区">
        <div class="card-content">
          <div class="card-title" id="windsysTitle">windsys社区</div>
          <div class="card-sub" id="windsysSub">也许是最适合年轻人使用的</div>
        </div>
      </div>
    </div>
  </div>

  <div class="page err404-page" id="page404">
    <div class="err-big-num">404</div>
    <p class="err-desc" id="err404Text">页面不存在，请返回首页重新浏览</p>
    <button class="start-btn" id="backHomeBtn">返回首页</button>
  </div>

  <!-- ====== 底部悬浮搜索栏 ====== -->
  <div class="search-bar-container" id="searchBarContainer">
    <div class="search-wrapper">
      <!-- 搜索模式切换 -->
      <div class="search-mode-toggle" id="searchModeToggle">
        <button class="search-mode-btn active" data-mode="internal" id="modeInternal">站内</button>
        <button class="search-mode-btn" data-mode="external" id="modeExternal">站外</button>
      </div>

      <div class="search-input-wrap">
        <span class="search-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8" />
            <path d="M21 21l-4.35-4.35" />
          </svg>
        </span>
        <input class="search-input" id="searchInput" type="text" placeholder="搜索工具、功能、关键词…" autocomplete="off">
        <button class="search-clear" id="searchClear" aria-label="清空搜索">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6L6 18M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- 圆形搜索按钮 -->
      <button class="search-btn-circle" id="searchBtn" aria-label="搜索">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8" />
          <path d="M21 21l-4.35-4.35" />
        </svg>
      </button>
    </div>
  </div>

  <!-- ====== 反馈按钮 ====== -->
  <button class="feedback-fab" id="feedbackFab" aria-label="反馈">
    <svg viewBox="0 0 24 24">
      <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12zM11 6h2v5h-2zm0 7h2v2h-2z" />
    </svg>
  </button>

  <!-- ====== 反馈弹窗 ====== -->
  <div class="feedback-overlay" id="feedbackOverlay">
    <div class="feedback-modal">
      <button class="close-btn" id="fbClose">✕</button>
      <div class="fb-title">💬 反馈意见</div>
      <div class="fb-sub">你的反馈能帮助 maxtle 变得更好</div>

      <label for="fbType">反馈类型</label>
      <select id="fbType">
        <option value="建议">💡 建议</option>
        <option value="Bug报告">🐛 Bug 报告</option>
        <option value="功能请求">🚀 功能请求</option>
        <option value="内容纠错">📝 内容纠错</option>
        <option value="其他">📌 其他</option>
      </select>

      <label for="fbContent">详细内容 <span style="color:var(--text-sub);font-weight:400;">(必填)</span></label>
      <textarea id="fbContent" placeholder="请描述你的反馈内容…"></textarea>

      <label for="fbContact">联系方式 <span style="color:var(--text-sub);font-weight:400;">(选填)</span></label>
      <input type="text" id="fbContact" placeholder="邮箱 / QQ / 微信">

      <div class="toast" id="fbToast"></div>

      <div class="btn-row">
        <button class="btn-cancel" id="fbCancel">取消</button>
        <button class="btn-submit" id="fbSubmit">提交反馈</button>
      </div>
    </div>
  </div>

  <script>
    // ============================================================
    // ====== Supabase 配置 ======
    // ============================================================
    var supabaseUrl = 'https://nopivnfskqtecjftgadf.supabase.co';
    var supabaseKey =
      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5vcGl2bmZza3F0ZWNqZnRnYWRmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODU5MDU0NTksImV4cCI6MjEwMTQ4MTQ1OX0.mx3S8Rs_Eh338Mnz48G-41YiyiiWM40Nqru6sZFVrgQ';

    // ============================================================
    // ====== 核心脚本 ======
    // ============================================================
    (function() {
      'use strict';

      // ---------- 初始化 Supabase ----------
      var supabaseClient;
      try {
        supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
        console.log('✅ Supabase 初始化成功');
      } catch (err) {
        console.error('❌ Supabase 初始化失败:', err);
        alert('Supabase 初始化失败，请检查网络连接或刷新页面重试');
      }

      // ---------- 页面加载完成后执行 ----------
      document.addEventListener('DOMContentLoaded', function() {

        // ---------- 时钟 ----------
        function updateTime() {
          var now = new Date();
          var weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
          var year = now.getFullYear();
          var month = String(now.getMonth() + 1).padStart(2, '0');
          var day = String(now.getDate()).padStart(2, '0');
          var h = String(now.getHours()).padStart(2, '0');
          var m = String(now.getMinutes()).padStart(2, '0');
          var s = String(now.getSeconds()).padStart(2, '0');
          var week = weekArr[now.getDay()];
          var timeStr = year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s + ' ' + week;
          var timeShow = document.getElementById('timeShow');
          if (timeShow) timeShow.textContent = timeStr;
        }
        updateTime();
        setInterval(updateTime, 1000);

        // ---------- 多语言 ----------
        var i18n = {
          zh: {
            introText: 'maxtle的软件分享。<br>技术交流的网站。',
            goSub: '开始 →',
            subTitle: 'AI 分享',
            sysTitle: '系统美化',
            winDownloadTitle: 'Windows 下载',
            card1Title: 'AI 软件推荐',
            card1Sub: '精选优质 AI 工具，提升效率',
            card2Title: 'AI 软件部署在电脑上',
            card2Sub: '本地部署教程，数据更安全',
            card3Title: 'Windows 11 美化',
            card3Sub: '打造个性化 Win11 桌面体验',
            card4Title: 'Windows 10 美化',
            card4Sub: '让 Win10 焕然一新',
            card5Title: 'Windows 7 美化',
            card5Sub: '经典系统也能很精致',
            officialCardTitle: '官方下载',
            officialCardSub: '微软原版官方资源',
            thirdCardTitle: '第三方下载',
            thirdCardSub: '第三方 Windows 下载',
            win11DetailTitle: 'Windows 11 美化',
            win11DetailDesc: 'Windows 11 美化工具合集',
            win10DetailTitle: 'Windows 10 美化',
            win10DetailDesc: 'Windows 10 美化工具合集',
            translucentTbTitle: 'TranslucentTB 2024.1',
            translucentTbSub: '可以把任务栏透明在 win 10 win 11 上',
            startAllBackTitle: 'StartAllBack 3.9.7',
            startAllBackSub: 'Win11资源管理器/开始菜单/右键菜单增强工具',
            rainmeterTitle: 'Rainmeter 4.5.23 Release',
            rainmeterSub: '个性化桌面定制工具',
            diskIconCardTitle: '硬盘图标修改工具 1.0',
            diskIconCardSub: '自定义电脑C/D/E/F磁盘图标',
            ttbPageTitle: 'TranslucentTB',
            ttbInfo: '语言：中文<br>授权：免费<br>大小：1.5MB<br>版本：2024.1<br>更新：2024-06-21<br>平台：Win10/11',
            ttbDesc1: 'TranslucentTB是一个轻量级实用软件，在占用极少内存，几乎不耗CPU的情况下将Win10/Win11任务栏透明。',
            ttbDesc2: '下载后将TranslucentTB文件夹解压到任意安全位置，运行TranslucentTB.exe，在任务栏托盘可以看到TranslucentTB的图标，右键即可进行简单设置。',
            sabPageTitle: 'StartAllBack',
            sabInfo: '语言：多语言<br>授权：官方版<br>大小：1.68MB<br>版本：3.9.7<br>更新：2025-2-26<br>平台：Win 11',
            sabIntroTitle: '软件介绍',
            sabIntroText: 'StartAllBack是我们所熟知的开始菜单美化工具StartIsBack++相同作者开发的，用于Windows 11恢复旧版资源管理器、开始菜单、任务栏和右键样式的软件。使用后可以解决一部分新版资源管理器的bug，有效解决卡顿问题。',
            sabInstallTitle: '安装方法',
            sabInstallText: '安装方法其实非常简单，简单说就是：<br><br>1. 打开下载的安装包；2. 授予管理员权限；3. 选择用户安装；4. 资源管理器重启后右键开始菜单进入设置。',
            sabFuncTitle: '功能介绍',
            sabFuncText: '一键切换系统界面，自定义开始、任务栏、资源管理器样式。',
            rmPageTitle: 'Rainmeter',
            rmInfo: '语言：中文<br>授权：免费开源<br>大小：2.34MB<br>版本：4.5.23 Release<br>更新：2025-06-07<br>平台：Win7/8/8.1/10/11',
            rmIntroTitle: '软件介绍',
            rmIntroText: 'Rainmeter俗称雨滴桌面，轻量开源桌面组件，硬件监控、音乐小组件一键添加。',
            rmFuncTitle: '核心功能',
            rmFuncText: '硬件监控、时钟、媒体控制、自定义皮肤，无广告捆绑。',
            diskIconPageTitle: '硬盘图标修改工具',
            diskIconInfo: '语言：中文<br>授权：免费<br>大小：10KB<br>版本：1.0<br>更新：2015-01-01<br>平台：WinXP/7/8/8.1/10',
            diskIconIntroTitle: '软件介绍',
            diskIconIntroText: '硬盘是电脑主要的存储媒介之一，系统默认C/D/E/F驱动器图标样式单调，这款轻量工具可自定义ICO磁盘图标，体积仅10KB，无需安装解压即用，兼容旧Windows。',
            diskStepTitle: '操作步骤',
            diskStepText: '1、打开工具，点击浏览；<br>2、选中本地ICO图标；<br>3、点击确定；<br>4、此电脑右键刷新图标生效；<br>5、更换盘符重复操作。',
            win11DownloadTitle: 'Windows 11 下载',
            win11DownloadSub: '微软最新系统',
            win10DownloadTitle: 'Windows 10 下载',
            win10DownloadSub: '经典稳定系统',
            msdnCardTitle: 'MSDN 下载',
            msdnCardSub: '下载怀念旧系统',
            windsysTitle: 'windsys社区',
            windsysSub: '也许是最适合年轻人使用的',
            err404Text: '页面不存在，请返回首页重新浏览',
            livelyPageTitle: 'Lively Wallpaper',
            livelyInfo: '语言：中文<br>授权：免费开源<br>大小：约 100MB<br>版本：2.1.0.8<br>更新：2024-06-21<br>平台：Win10/11',
            livelyIntroTitle: '软件介绍',
            livelyIntroText: 'Lively Wallpaper 是一款开源专业的视频桌面壁纸管理软件，可以完全兼容 Wallpaper Engine 的壁纸视频包，且不依赖 Steam。支持将视频、GIF 文件、模拟器、HTML、网址、着色器乃至游戏转换为 Windows 桌面壁纸。软件内置了 10 个动态壁纸可供选择，在第三方社区 Reddit 上也有大量动态壁纸可供下载。',
            livelyFeatureTitle: '核心功能',
            livelyFeatureText: '• 支持素材类型：Gif 动画、视频、网页以及直接运行 exe 程序等<br>• 可将 Unity、Godot 游戏和任何应用程序设置为壁纸<br>• 硬件加速的视频播放，由 mpv 播放器提供支持<br>• 交互式 WebGL 壁纸，由轻量化的 Chromium 引擎 Cef 提供支持<br>• 全面的多显示器支持：可在所有屏幕生成单个壁纸、复制相同壁纸或每个屏幕使用不同壁纸<br>• 完全开源免费，无广告无捆绑',
            livelyPerfTitle: '性能与建议',
            livelyPerfText: '运行全屏应用或游戏时，壁纸播放会自动暂停（CPU/GPU 使用率约为 0%）。可根据前台应用设置壁纸播放规则。<br><br>视频播放器强烈建议安装 LAVFilters 后选择 DirectShow，并在 LAV Video Configuration 中开启 DXVA2 硬解码，可大幅降低 CPU 占用。如果你是游戏玩家，建议在运行游戏之前停止动态壁纸，或不要开启视频硬解码。',
            micaPageTitle: 'MicaForEveryone',
            micaInfo: '语言：中英<br>授权：免费<br>大小：20.4MB<br>版本：1.3.1.2<br>更新：2023-09-23<br>平台：Win 11 22H2+',
            micaIntroTitle: '软件介绍',
            micaIntroText: '相信很多人，都对Win7和Vista时代的毛玻璃透明效果，印象深刻。在当年，它非常具有观赏性，让人感到惊艳，如今更是情怀满满。部分用户虽升级到了高版本系统，但仍对其念念不忘，希望能重新回归。其实，微软已经为Win11开发了云母、亚克力、Tabbed窗口特效。它能展现出类似Win7的磨砂毛玻璃效果，甚至质感要更强、更好看。只可惜，该特效只有少量原生应用支持，很多常用操作界面都用不了。',
            micaIntroText2: 'MicaForEveryone 是一款非常强的工具，它能让云母、亚克力效果支持更多窗口界面，甚至是一些第三方软件。鉴于该工具原理，因此只适用 Win11 系统，且版本要 22H2 及以上。',
            micaInstallTitle: '安装与使用',
            micaInstallText: '1. 首先，安装 .NET SDK，否则会无法启动。<br>2. 然后，安装 MicaForEveryone 软件，你就可以正常打开它，进行设置了。<br>3. 软件左侧栏有一个默认规则，这是全局设置区域，可以一键改全部。但为避免兼容问题，有些界面还是新建一个规则，单独控制比较好。比如，资源管理器有单独 explorer 规则，能改标题栏颜色、模糊类型。',
            micaFuncTitle: '功能特点',
            micaFuncText: '• 支持云母（Mica）和亚克力（Acrylic）两种模糊效果，亚克力通透效果更高，质感更强<br>• 可修改窗口边角样式，如圆角、直角等<br>• 支持深色模式下全界面模糊透明（需开启高级设置）<br>• 可为不同应用单独创建规则，灵活控制<br>• 支持开机自启、以管理员身份运行<br>• 支持热重载，修改规则即时生效<br>• 完全免费开源，无广告无捆绑',
            micaNoteTitle: '注意事项',
            micaNoteText: '• 仅适用 Windows 11 22H2 及以上版本<br>• 需要安装 .NET SDK 才能正常运行<br>• 对于喜欢美化系统，或怀念 Win7 毛玻璃的朋友，这软件值得一试<br>• 注意：这是最后一个使用 .NET Core 3.1 的版本。2.0 版本计划在 C++ 中实现',
            searchPlaceholder: '搜索工具、功能、关键词…',
            searchNoResult: '没有找到匹配的工具',
            modeInternal: '站内',
            modeExternal: '站外'
          },
          en: {
            introText: 'Software sharing by maxtle.<br>A site for tech exchange.',
            goSub: 'Start →',
            subTitle: 'AI Sharing',
            sysTitle: 'System Customization',
            winDownloadTitle: 'Windows Downloads',
            card1Title: 'AI Software Picks',
            card1Sub: 'Curated AI tools to boost productivity',
            card2Title: 'Local AI Deployment',
            card2Sub: 'Run AI on your PC, keep data safe',
            card3Title: 'Windows 11 Customization',
            card3Sub: 'Personalize your Win11 desktop',
            card4Title: 'Windows 10 Customization',
            card4Sub: 'Give Win10 a fresh new look',
            card5Title: 'Windows 7 Customization',
            card5Sub: 'Classic OS, refined aesthetics',
            officialCardTitle: 'Official Download',
            officialCardSub: 'Original Microsoft official resources',
            thirdCardTitle: 'Third-Party Download',
            thirdCardSub: 'Third-Party Windows Download',
            win11DetailTitle: 'Windows 11 Customization',
            win11DetailDesc: 'Windows 11 Customization Tools',
            win10DetailTitle: 'Windows 10 Customization',
            win10DetailDesc: 'Windows 10 Customization Tools',
            translucentTbTitle: 'TranslucentTB 2024.1',
            translucentTbSub: 'Transparent taskbar for Win10 & Win11',
            startAllBackTitle: 'StartAllBack 3.9.7',
            startAllBackSub: 'Win11 UI Mod Tool',
            rainmeterTitle: 'Rainmeter 4.5.23 Release',
            rainmeterSub: 'Desktop Widget Tool',
            diskIconCardTitle: 'Drive Icon Changer v1.0',
            diskIconCardSub: 'Custom C/D/E/F disk drive icons',
            ttbPageTitle: 'TranslucentTB',
            ttbInfo: 'CN | Free | 1.5MB | Win10/11',
            ttbDesc1: 'Light transparent taskbar utility.',
            ttbDesc2: 'Run tray app for config.',
            sabPageTitle: 'StartAllBack',
            sabInfo: 'Multi-Lang | Official | Win11',
            sabIntroTitle: 'Introduction',
            sabIntroText: 'Restore classic Win11 explorer UI to fix lag.',
            sabInstallTitle: 'Install Guide',
            sabInstallText: 'Run as admin, restart File Explorer.',
            sabFuncTitle: 'Features',
            sabFuncText: 'Custom start menu & taskbar appearance.',
            rmPageTitle: 'Rainmeter',
            rmInfo: 'CN | Open-Source | Win7-11',
            rmIntroTitle: 'Introduction',
            rmIntroText: 'Lightweight desktop widget system for monitoring and widgets.',
            rmFuncTitle: 'Core Features',
            rmFuncText: 'Hardware monitor, custom skins, media widgets.',
            diskIconPageTitle: 'Drive Icon Changer',
            diskIconInfo: 'Language: Chinese | Free | Size:10KB | Ver:1.0 | Support: WinXP/7/8/8.1/10',
            diskIconIntroTitle: 'Introduction',
            diskIconIntroText: 'This tiny free utility lets you replace default hard drive icons with custom ICO files, compatible with old Windows versions, no installation required.',
            diskStepTitle: 'Operation Steps',
            diskStepText: '1. Launch program and click browse; 2. Select your ICO icon; 3. Confirm; 4. Refresh File Explorer to apply.',
            win11DownloadTitle: 'Windows 11 Download',
            win11DownloadSub: 'Latest Microsoft OS',
            win10DownloadTitle: 'Windows 10 Download',
            win10DownloadSub: 'Classic Stable System',
            msdnCardTitle: 'MSDN Download',
            msdnCardSub: 'Legacy system downloads',
            windsysTitle: 'Windsys Community',
            windsysSub: 'Perhaps the most suitable for young users',
            err404Text: 'Page not found, back to home',
            livelyPageTitle: 'Lively Wallpaper',
            livelyInfo: 'Language: Chinese | Open-Source | Size: ~100MB | Ver: 2.1.0.8 | Updated: 2024-06-21 | Platform: Win10/11',
            livelyIntroTitle: 'Introduction',
            livelyIntroText: 'Lively Wallpaper is an open-source professional video desktop wallpaper manager...',
            livelyFeatureTitle: 'Core Features',
            livelyFeatureText: '• Supported formats: GIF animations, videos, web pages...',
            livelyPerfTitle: 'Performance & Tips',
            livelyPerfText: 'Wallpaper playback automatically pauses when running fullscreen apps/games...',
            micaPageTitle: 'MicaForEveryone',
            micaInfo: 'Language: CN/EN | Free | Size: 20.4MB | Ver: 1.3.1.2 | Updated: 2023-09-23 | Platform: Win 11 22H2+',
            micaIntroTitle: 'Introduction',
            micaIntroText: 'Many people are impressed by the Aero Glass transparency effect of Win7 and Vista era...',
            micaIntroText2: 'MicaForEveryone is a powerful tool that enables Mica and Acrylic effects on more window interfaces...',
            micaInstallTitle: 'Installation & Usage',
            micaInstallText: '1. First, install .NET SDK...',
            micaFuncTitle: 'Features',
            micaFuncText: '• Supports both Mica and Acrylic blur effects...',
            micaNoteTitle: 'Notes',
            micaNoteText: '• Only applies to Windows 11 22H2 and above...',
            searchPlaceholder: 'Search tools, features, keywords…',
            searchNoResult: 'No matching tools found',
            modeInternal: 'Internal',
            modeExternal: 'External'
          }
        };

        var lang = 'zh';
        var currentTheme = 'dark';
        var currentAccent = 'white';
        var currentSearchMode = 'internal'; // 'internal' | 'external'

        // ---------- DOM 引用 ----------
        var pageStart = document.getElementById('pageStart');
        var pageSub = document.getElementById('pageSub');
        var pageThird = document.getElementById('pageThird');
        var pageWin10 = document.getElementById('pageWin10');
        var pageLively = document.getElementById('pageLively');
        var pageMica = document.getElementById('pageMica');
        var pageFourth = document.getElementById('pageFourth');
        var pageFifth = document.getElementById('pageFifth');
        var pageSixth = document.getElementById('pageSixth');
        var pageDiskIcon = document.getElementById('pageDiskIcon');
        var pageOfficialDownload = document.getElementById('pageOfficialDownload');
        var pageThirdDownload = document.getElementById('pageThirdDownload');
        var page404 = document.getElementById('page404');

        var goSub = document.getElementById('goSub');
        var backBtn = document.getElementById('backBtn');
        var settingsBtn = document.getElementById('settingsBtn');
        var bubble = document.getElementById('bubble');
        var backHomeBtn = document.getElementById('backHomeBtn');

        var win11Card = document.getElementById('win11Card');
        var win10Card = document.getElementById('win10Card');
        var win7Card = document.getElementById('win7Card');
        var ttbCard = document.getElementById('ttbCard');
        var startAllBackCard = document.getElementById('startAllBackCard');
        var rainmeterCard = document.getElementById('rainmeterCard');
        var diskIconCard = document.getElementById('diskIconCard');
        var cardAiTool = document.getElementById('cardAiTool');
        var cardAiLocal = document.getElementById('cardAiLocal');
        var officialDownloadCard = document.getElementById('officialDownloadCard');
        var thirdDownloadCard = document.getElementById('thirdDownloadCard');
        var win11DownloadCard = document.getElementById('win11DownloadCard');
        var win10DownloadCard = document.getElementById('win10DownloadCard');
        var msdnDownloadCard = document.getElementById('msdnDownloadCard');
        var windsysCard = document.getElementById('windsysCard');
        var livelyCardWin11 = document.getElementById('livelyCardWin11');
        var livelyCardWin10 = document.getElementById('livelyCardWin10');
        var micaCard = document.getElementById('micaCard');

        var livelySource = 'pageThird';

        // ---------- 搜索模式切换 ----------
        var modeInternalBtn = document.getElementById('modeInternal');
        var modeExternalBtn = document.getElementById('modeExternal');
        var searchInput = document.getElementById('searchInput');
        var searchClear = document.getElementById('searchClear');
        var searchBtn = document.getElementById('searchBtn');
        var searchBarContainer = document.getElementById('searchBarContainer');

        function setSearchMode(mode) {
          currentSearchMode = mode;
          if (modeInternalBtn && modeExternalBtn) {
            modeInternalBtn.classList.toggle('active', mode === 'internal');
            modeExternalBtn.classList.toggle('active', mode === 'external');
          }
          // 更新placeholder
          var t = i18n[lang];
          if (searchInput) {
            if (mode === 'internal') {
              searchInput.placeholder = t.searchPlaceholder || '搜索工具、功能、关键词…';
            } else {
              searchInput.placeholder = '🔍 在必应中搜索…';
            }
          }
          // 切换模式时清空搜索结果
          if (mode === 'internal') {
            // 站内模式恢复卡片显示
            performSearch(searchInput ? searchInput.value : '');
          } else {
            // 站外模式不操作卡片
          }
        }

        if (modeInternalBtn) {
          modeInternalBtn.addEventListener('click', function() {
            setSearchMode('internal');
          });
        }
        if (modeExternalBtn) {
          modeExternalBtn.addEventListener('click', function() {
            setSearchMode('external');
          });
        }

        // ---------- 页面切换 ----------
        function switchPage(targetPage) {
          if (targetPage === pageLively) {
            var activePage = document.querySelector('.page.active');
            if (activePage === pageWin10) livelySource = 'pageWin10';
            else if (activePage === pageThird) livelySource = 'pageThird';
          }
          document.querySelectorAll('.page').forEach(function(p) {
            p.classList.remove('active');
          });
          targetPage.classList.add('active');
          bubble.classList.remove('open');
          window.scrollTo({ top: 0, behavior: 'smooth' });
          // 切换页面时重置搜索并控制搜索栏显示
          if (targetPage === pageSub) {
            setTimeout(function() {
              resetSearch();
              showSearchBar();
            }, 50);
          } else {
            hideSearchBar();
            resetSearch();
          }
        }

        function goBack() {
          var wasSub = pageSub.classList.contains('active');
          if (pageMica.classList.contains('active')) switchPage(pageThird);
          else if (pageLively.classList.contains('active')) {
            if (livelySource === 'pageWin10') switchPage(pageWin10);
            else switchPage(pageThird);
          } else if (pageSixth.classList.contains('active')) switchPage(pageThird);
          else if (pageFifth.classList.contains('active')) switchPage(pageThird);
          else if (pageFourth.classList.contains('active')) switchPage(pageThird);
          else if (pageDiskIcon.classList.contains('active')) switchPage(pageWin10);
          else if (pageWin10.classList.contains('active')) switchPage(pageSub);
          else if (pageThird.classList.contains('active')) switchPage(pageSub);
          else if (pageOfficialDownload.classList.contains('active')) switchPage(pageSub);
          else if (pageThirdDownload.classList.contains('active')) switchPage(pageSub);
          else if (pageSub.classList.contains('active')) switchPage(pageStart);
          else if (page404.classList.contains('active')) switchPage(pageStart);
          if (wasSub) {
            setTimeout(resetSearch, 50);
          }
        }

        // ---------- 语言切换 ----------
        function applyLang(l) {
          lang = l;
          var t = i18n[l];
          var introText = document.getElementById('introText');
          var goSubText = document.getElementById('goSub');
          var subTitle = document.getElementById('subTitle');
          var sysTitle = document.getElementById('sysTitle');
          var winDownloadTitle = document.getElementById('winDownloadTitle');
          if (introText) introText.innerHTML = t.introText;
          if (goSubText) goSubText.textContent = t.goSub;
          if (subTitle) subTitle.textContent = t.subTitle;
          if (sysTitle) sysTitle.textContent = t.sysTitle;
          if (winDownloadTitle) winDownloadTitle.textContent = t.winDownloadTitle;

          var card1Title = document.getElementById('card1Title');
          var card1Sub = document.getElementById('card1Sub');
          var card2Title = document.getElementById('card2Title');
          var card2Sub = document.getElementById('card2Sub');
          var card3Title = document.getElementById('card3Title');
          var card3Sub = document.getElementById('card3Sub');
          var card4Title = document.getElementById('card4Title');
          var card4Sub = document.getElementById('card4Sub');
          var card5Title = document.getElementById('card5Title');
          var card5Sub = document.getElementById('card5Sub');
          var officialCardTitle = document.getElementById('officialCardTitle');
          var officialCardSub = document.getElementById('officialCardSub');
          var thirdCardTitle = document.getElementById('thirdCardTitle');
          var thirdCardSub = document.getElementById('thirdCardSub');
          if (card1Title) card1Title.textContent = t.card1Title;
          if (card1Sub) card1Sub.textContent = t.card1Sub;
          if (card2Title) card2Title.textContent = t.card2Title;
          if (card2Sub) card2Sub.textContent = t.card2Sub;
          if (card3Title) card3Title.textContent = t.card3Title;
          if (card3Sub) card3Sub.textContent = t.card3Sub;
          if (card4Title) card4Title.textContent = t.card4Title;
          if (card4Sub) card4Sub.textContent = t.card4Sub;
          if (card5Title) card5Title.textContent = t.card5Title;
          if (card5Sub) card5Sub.textContent = t.card5Sub;
          if (officialCardTitle) officialCardTitle.textContent = t.officialCardTitle;
          if (officialCardSub) officialCardSub.textContent = t.officialCardSub;
          if (thirdCardTitle) thirdCardTitle.textContent = t.thirdCardTitle;
          if (thirdCardSub) thirdCardSub.textContent = t.thirdCardSub;

          var win11DetailTitle = document.getElementById('win11DetailTitle');
          var win11DetailDesc = document.getElementById('win11DetailDesc');
          var translucentTbTitle = document.getElementById('translucentTbTitle');
          var translucentTbSub = document.getElementById('translucentTbSub');
          var startAllBackTitle = document.getElementById('startAllBackTitle');
          var startAllBackSub = document.getElementById('startAllBackSub');
          var rainmeterTitle = document.getElementById('rainmeterTitle');
          var rainmeterSub = document.getElementById('rainmeterSub');
          if (win11DetailTitle) win11DetailTitle.textContent = t.win11DetailTitle;
          if (win11DetailDesc) win11DetailDesc.textContent = t.win11DetailDesc;
          if (translucentTbTitle) translucentTbTitle.textContent = t.translucentTbTitle;
          if (translucentTbSub) translucentTbSub.textContent = t.translucentTbSub;
          if (startAllBackTitle) startAllBackTitle.textContent = t.startAllBackTitle;
          if (startAllBackSub) startAllBackSub.textContent = t.startAllBackSub;
          if (rainmeterTitle) rainmeterTitle.textContent = t.rainmeterTitle;
          if (rainmeterSub) rainmeterSub.textContent = t.rainmeterSub;

          var win10DetailTitle = document.getElementById('win10DetailTitle');
          var win10DetailDesc = document.getElementById('win10DetailDesc');
          var diskIconCardTitle = document.getElementById('diskIconCardTitle');
          var diskIconCardSub = document.getElementById('diskIconCardSub');
          if (win10DetailTitle) win10DetailTitle.textContent = t.win10DetailTitle;
          if (win10DetailDesc) win10DetailDesc.textContent = t.win10DetailDesc;
          if (diskIconCardTitle) diskIconCardTitle.textContent = t.diskIconCardTitle;
          if (diskIconCardSub) diskIconCardSub.textContent = t.diskIconCardSub;

          var ttbPageTitle = document.getElementById('ttbPageTitle');
          var ttbInfo = document.getElementById('ttbInfo');
          var ttbDesc1 = document.getElementById('ttbDesc1');
          var ttbDesc2 = document.getElementById('ttbDesc2');
          if (ttbPageTitle) ttbPageTitle.textContent = t.ttbPageTitle;
          if (ttbInfo) ttbInfo.innerHTML = t.ttbInfo;
          if (ttbDesc1) ttbDesc1.textContent = t.ttbDesc1;
          if (ttbDesc2) ttbDesc2.textContent = t.ttbDesc2;

          var sabPageTitle = document.getElementById('sabPageTitle');
          var sabInfo = document.getElementById('sabInfo');
          var sabIntroTitle = document.getElementById('sabIntroTitle');
          var sabIntroText = document.getElementById('sabIntroText');
          var sabInstallTitle = document.getElementById('sabInstallTitle');
          var sabInstallText = document.getElementById('sabInstallText');
          var sabFuncTitle = document.getElementById('sabFuncTitle');
          var sabFuncText = document.getElementById('sabFuncText');
          if (sabPageTitle) sabPageTitle.textContent = t.sabPageTitle;
          if (sabInfo) sabInfo.innerHTML = t.sabInfo;
          if (sabIntroTitle) sabIntroTitle.textContent = t.sabIntroTitle;
          if (sabIntroText) sabIntroText.textContent = t.sabIntroText;
          if (sabInstallTitle) sabInstallTitle.textContent = t.sabInstallTitle;
          if (sabInstallText) sabInstallText.innerHTML = t.sabInstallText;
          if (sabFuncTitle) sabFuncTitle.textContent = t.sabFuncTitle;
          if (sabFuncText) sabFuncText.textContent = t.sabFuncText;

          var rmPageTitle = document.getElementById('rainmeterPageTitle');
          var rmInfo = document.getElementById('rainmeterInfo');
          var rmIntroTitle = document.getElementById('rainmeterIntroTitle');
          var rmIntroText = document.getElementById('rainmeterIntroText');
          var rmFuncTitle = document.getElementById('rainmeterFuncTitle');
          var rmFuncText = document.getElementById('rainmeterFuncText');
          if (rmPageTitle) rmPageTitle.textContent = t.rmPageTitle;
          if (rmInfo) rmInfo.innerHTML = t.rmInfo;
          if (rmIntroTitle) rmIntroTitle.textContent = t.rmIntroTitle;
          if (rmIntroText) rmIntroText.textContent = t.rmIntroText;
          if (rmFuncTitle) rmFuncTitle.textContent = t.rmFuncTitle;
          if (rmFuncText) rmFuncText.textContent = t.rmFuncText;

          var diskIconPageTitle = document.getElementById('diskIconPageTitle');
          var diskIconInfo = document.getElementById('diskIconInfo');
          var diskIconIntroTitle = document.getElementById('diskIconIntroTitle');
          var diskIconIntroText = document.getElementById('diskIconIntroText');
          var diskStepTitle = document.getElementById('diskStepTitle');
          var diskStepText = document.getElementById('diskStepText');
          if (diskIconPageTitle) diskIconPageTitle.textContent = t.diskIconPageTitle;
          if (diskIconInfo) diskIconInfo.innerHTML = t.diskIconInfo;
          if (diskIconIntroTitle) diskIconIntroTitle.textContent = t.diskIconIntroTitle;
          if (diskIconIntroText) diskIconIntroText.textContent = t.diskIconIntroText;
          if (diskStepTitle) diskStepTitle.textContent = t.diskStepTitle;
          if (diskStepText) diskStepText.innerHTML = t.diskStepText;

          var win11DownloadTitle = document.getElementById('win11DownloadTitle');
          var win11DownloadSub = document.getElementById('win11DownloadSub');
          var win10DownloadTitle = document.getElementById('win10DownloadTitle');
          var win10DownloadSub = document.getElementById('win10DownloadSub');
          if (win11DownloadTitle) win11DownloadTitle.textContent = t.win11DownloadTitle;
          if (win11DownloadSub) win11DownloadSub.textContent = t.win11DownloadSub;
          if (win10DownloadTitle) win10DownloadTitle.textContent = t.win10DownloadTitle;
          if (win10DownloadSub) win10DownloadSub.textContent = t.win10DownloadSub;

          var msdnCardTitle = document.getElementById('msdnCardTitle');
          var msdnCardSub = document.getElementById('msdnCardSub');
          var windsysTitle = document.getElementById('windsysTitle');
          var windsysSub = document.getElementById('windsysSub');
          if (msdnCardTitle) msdnCardTitle.textContent = t.msdnCardTitle;
          if (msdnCardSub) msdnCardSub.textContent = t.msdnCardSub;
          if (windsysTitle) windsysTitle.textContent = t.windsysTitle;
          if (windsysSub) windsysSub.textContent = t.windsysSub;

          var err404Text = document.getElementById('err404Text');
          if (err404Text) err404Text.textContent = t.err404Text;

          var livelyPageTitle = document.getElementById('livelyPageTitle');
          var livelyInfo = document.getElementById('livelyInfo');
          var livelyIntroTitle = document.getElementById('livelyIntroTitle');
          var livelyIntroText = document.getElementById('livelyIntroText');
          var livelyFeatureTitle = document.getElementById('livelyFeatureTitle');
          var livelyFeatureText = document.getElementById('livelyFeatureText');
          var livelyPerfTitle = document.getElementById('livelyPerfTitle');
          var livelyPerfText = document.getElementById('livelyPerfText');
          if (livelyPageTitle) livelyPageTitle.textContent = t.livelyPageTitle;
          if (livelyInfo) livelyInfo.innerHTML = t.livelyInfo;
          if (livelyIntroTitle) livelyIntroTitle.textContent = t.livelyIntroTitle;
          if (livelyIntroText) livelyIntroText.textContent = t.livelyIntroText;
          if (livelyFeatureTitle) livelyFeatureTitle.textContent = t.livelyFeatureTitle;
          if (livelyFeatureText) livelyFeatureText.innerHTML = t.livelyFeatureText;
          if (livelyPerfTitle) livelyPerfTitle.textContent = t.livelyPerfTitle;
          if (livelyPerfText) livelyPerfText.innerHTML = t.livelyPerfText;

          var micaPageTitle = document.getElementById('micaPageTitle');
          var micaInfo = document.getElementById('micaInfo');
          var micaIntroTitle = document.getElementById('micaIntroTitle');
          var micaIntroText = document.getElementById('micaIntroText');
          var micaIntroText2 = document.getElementById('micaIntroText2');
          var micaInstallTitle = document.getElementById('micaInstallTitle');
          var micaInstallText = document.getElementById('micaInstallText');
          var micaFuncTitle = document.getElementById('micaFuncTitle');
          var micaFuncText = document.getElementById('micaFuncText');
          var micaNoteTitle = document.getElementById('micaNoteTitle');
          var micaNoteText = document.getElementById('micaNoteText');
          if (micaPageTitle) micaPageTitle.textContent = t.micaPageTitle;
          if (micaInfo) micaInfo.innerHTML = t.micaInfo;
          if (micaIntroTitle) micaIntroTitle.textContent = t.micaIntroTitle;
          if (micaIntroText) micaIntroText.textContent = t.micaIntroText;
          if (micaIntroText2) micaIntroText2.textContent = t.micaIntroText2;
          if (micaInstallTitle) micaInstallTitle.textContent = t.micaInstallTitle;
          if (micaInstallText) micaInstallText.innerHTML = t.micaInstallText;
          if (micaFuncTitle) micaFuncTitle.textContent = t.micaFuncTitle;
          if (micaFuncText) micaFuncText.innerHTML = t.micaFuncText;
          if (micaNoteTitle) micaNoteTitle.textContent = t.micaNoteTitle;
          if (micaNoteText) micaNoteText.innerHTML = t.micaNoteText;

          // 更新搜索框placeholder
          if (searchInput) {
            if (currentSearchMode === 'internal') {
              searchInput.placeholder = t.searchPlaceholder || '搜索工具、功能、关键词…';
            } else {
              searchInput.placeholder = '🔍 在必应中搜索…';
            }
          }
          // 更新模式按钮文字
          if (modeInternalBtn) modeInternalBtn.textContent = t.modeInternal || '站内';
          if (modeExternalBtn) modeExternalBtn.textContent = t.modeExternal || '站外';

          document.querySelectorAll('[data-set-lang]').forEach(function(el) {
            el.querySelector('.dot').classList.remove('active');
          });
          document.querySelector('[data-set-lang="' + l + '"] .dot').classList.add('active');
        }

        // ---------- 主题/色调切换 ----------
        function applyTheme(theme) {
          currentTheme = theme;
          document.documentElement.setAttribute('data-theme', theme);
          document.querySelectorAll('[data-set-theme]').forEach(function(el) {
            el.querySelector('.dot').classList.remove('active');
          });
          document.querySelector('[data-set-theme="' + theme + '"] .dot').classList.add('active');
        }

        function applyAccent(accent) {
          currentAccent = accent;
          document.documentElement.setAttribute('data-accent', accent);
          document.querySelectorAll('[data-set-accent]').forEach(function(el) {
            el.querySelector('.dot').classList.remove('active');
          });
          document.querySelector('[data-set-accent="' + accent + '"] .dot').classList.add('active');
        }

        function toggleBubble() {
          bubble.classList.toggle('open');
        }

        // ---------- 搜索功能 ----------
        var lastSearchQuery = '';

        // 获取所有分类容器
        function getCategorySections() {
          return document.querySelectorAll('.category-section');
        }

        // 获取第二页所有卡片
        function getAllSubCards() {
          var grids = [
            document.getElementById('subCardGrid'),
            document.getElementById('beautyCardGrid'),
            document.getElementById('downloadCardGrid')
          ];
          var cards = [];
          grids.forEach(function(grid) {
            if (grid) {
              grid.querySelectorAll('.card').forEach(function(card) {
                cards.push(card);
              });
            }
          });
          return cards;
        }

        // 获取所有分类标题文本
        function getCategoryTitles() {
          var titles = [];
          document.querySelectorAll('.category-section .section-title').forEach(function(title) {
            titles.push(title.textContent.trim().toLowerCase());
          });
          return titles;
        }

        function performSearch(query) {
          // 站外模式不执行站内搜索
          if (currentSearchMode === 'external') {
            return;
          }

          var cards = getAllSubCards();
          var sections = getCategorySections();
          var categoryTitles = getCategoryTitles();
          var trimmed = query.trim().toLowerCase();

          // 移除之前的全局 no-result
          var oldNoResult = document.querySelector('.no-result-global');
          if (oldNoResult) oldNoResult.remove();

          // 先重置所有分类和卡片的可见性
          sections.forEach(function(section) {
            section.classList.remove('category-hidden', 'category-empty');
          });
          cards.forEach(function(card) {
            card.classList.remove('hidden');
          });

          if (trimmed === '') {
            searchClear.classList.remove('visible');
            sections.forEach(function(section) {
              section.classList.remove('category-hidden', 'category-empty');
            });
            cards.forEach(function(card) {
              card.classList.remove('hidden');
            });
            lastSearchQuery = '';
            return;
          }

          // 有搜索词：逐卡匹配
          var totalVisible = 0;
          var categoryMatches = {};

          // 先检查分类标题匹配
          sections.forEach(function(section, index) {
            var titleEl = section.querySelector('.section-title');
            if (titleEl) {
              var titleText = titleEl.textContent.trim().toLowerCase();
              if (titleText.includes(trimmed)) {
                categoryMatches[index] = true;
              }
            }
          });

          cards.forEach(function(card) {
            var titleEl = card.querySelector('.card-title');
            var subEl = card.querySelector('.card-sub');
            var title = titleEl ? titleEl.textContent.toLowerCase() : '';
            var sub = subEl ? subEl.textContent.toLowerCase() : '';
            var match = title.includes(trimmed) || sub.includes(trimmed);

            if (match) {
              card.classList.remove('hidden');
              totalVisible++;
            } else {
              card.classList.add('hidden');
            }
          });

          // 处理分类
          sections.forEach(function(section, index) {
            var grid = section.querySelector('.card-grid');
            if (!grid) return;
            var cardsInSection = grid.querySelectorAll('.card');
            var visibleInSection = Array.from(cardsInSection).filter(function(c) {
              return !c.classList.contains('hidden');
            });

            if (categoryMatches[index]) {
              cardsInSection.forEach(function(c) {
                c.classList.remove('hidden');
              });
              visibleInSection = Array.from(cardsInSection);
              totalVisible += visibleInSection.length;
              section.classList.remove('category-hidden', 'category-empty');
              return;
            }

            if (visibleInSection.length === 0) {
              section.classList.add('category-empty');
              section.classList.remove('category-hidden');
            } else if (visibleInSection.length < cardsInSection.length) {
              section.classList.add('category-hidden');
              section.classList.remove('category-empty');
            } else {
              section.classList.remove('category-hidden', 'category-empty');
            }
          });

          // 重新计算总可见数
          var finalVisible = 0;
          cards.forEach(function(card) {
            if (!card.classList.contains('hidden')) {
              finalVisible++;
            }
          });

          // 如果没有任何匹配，显示全局无结果
          if (finalVisible === 0) {
            var firstGrid = document.getElementById('subCardGrid');
            if (firstGrid) {
              var noResult = document.createElement('div');
              noResult.className = 'no-result-global';
              var t = i18n[lang];
              var emoji = '🔍';
              noResult.innerHTML = '<span class="emoji">' + emoji + '</span>' + t.searchNoResult;
              var firstSection = document.querySelector('.category-section');
              if (firstSection) {
                firstSection.parentNode.insertBefore(noResult, firstSection.nextSibling);
              } else {
                firstGrid.parentNode.appendChild(noResult);
              }
            }
          }

          // 清空按钮显隐
          if (trimmed !== '') {
            searchClear.classList.add('visible');
          } else {
            searchClear.classList.remove('visible');
          }

          lastSearchQuery = trimmed;
        }

        // 执行搜索（根据模式）
        function executeSearch() {
          var query = searchInput ? searchInput.value.trim() : '';

          if (currentSearchMode === 'external') {
            // 站外搜索 - 跳转到必应
            if (query) {
              var bingUrl = 'https://cn.bing.com/search?q=' + encodeURIComponent(query);
              window.open(bingUrl, '_blank');
            }
            return;
          }

          // 站内搜索
          if (searchInput) {
            performSearch(searchInput.value);
            searchInput.blur();
          }
        }

        // 监听回车键
        if (searchInput) {
          searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
              e.preventDefault();
              executeSearch();
            }
            if (e.key === 'Escape') {
              this.value = '';
              if (currentSearchMode === 'internal') {
                performSearch('');
              }
              this.blur();
              e.preventDefault();
            }
          });
        }

        if (searchBtn) {
          searchBtn.addEventListener('click', function() {
            executeSearch();
          });
        }

        if (searchClear) {
          searchClear.addEventListener('click', function() {
            if (searchInput) {
              searchInput.value = '';
              if (currentSearchMode === 'internal') {
                performSearch('');
              }
              searchInput.focus();
            }
          });
        }

        function resetSearch() {
          if (searchInput) {
            searchInput.value = '';
            if (currentSearchMode === 'internal') {
              performSearch('');
            }
          }
        }

        // ---------- iOS 风格滚动控制搜索栏 ----------
        var lastScrollY = window.scrollY;
        var scrollTimeout = null;
        var isSearchBarHidden = false;

        function showSearchBar() {
          if (!searchBarContainer) return;
          if (!pageSub.classList.contains('active')) {
            searchBarContainer.classList.remove('visible');
            return;
          }
          searchBarContainer.classList.add('visible');
          requestAnimationFrame(function() {
            searchBarContainer.classList.remove('hidden');
          });
          isSearchBarHidden = false;
        }

        function hideSearchBar() {
          if (!searchBarContainer) return;
          searchBarContainer.classList.add('hidden');
          isSearchBarHidden = true;
        }

        function handleScroll() {
          if (!pageSub.classList.contains('active')) {
            return;
          }

          var currentScrollY = window.scrollY;

          if (currentScrollY > lastScrollY + 20) {
            hideSearchBar();
            if (scrollTimeout) {
              clearTimeout(scrollTimeout);
              scrollTimeout = null;
            }
          } else if (currentScrollY < lastScrollY - 10) {
            showSearchBar();
            if (scrollTimeout) {
              clearTimeout(scrollTimeout);
              scrollTimeout = null;
            }
          }

          lastScrollY = currentScrollY;

          if (isSearchBarHidden) {
            if (scrollTimeout) {
              clearTimeout(scrollTimeout);
            }
            scrollTimeout = setTimeout(function() {
              showSearchBar();
              scrollTimeout = null;
            }, 2000);
          }
        }

        // ---------- 滚动监听 ----------
        var ticking = false;
        window.addEventListener('scroll', function() {
          if (!ticking) {
            window.requestAnimationFrame(function() {
              handleScroll();
              ticking = false;
            });
            ticking = true;
          }
        });

        // ---------- 页面切换控制 ----------
        var origSwitchPage = switchPage;
        switchPage = function(targetPage) {
          origSwitchPage(targetPage);
          if (targetPage === pageSub) {
            setTimeout(function() {
              resetSearch();
              showSearchBar();
              lastScrollY = window.scrollY;
              if (scrollTimeout) {
                clearTimeout(scrollTimeout);
                scrollTimeout = null;
              }
            }, 50);
          } else {
            hideSearchBar();
            if (searchBarContainer) {
              searchBarContainer.classList.remove('visible');
            }
            resetSearch();
          }
        };

        var origGoBack = goBack;
        goBack = function() {
          var wasSub = pageSub.classList.contains('active');
          origGoBack();
          if (wasSub) {
            setTimeout(function() {
              resetSearch();
              if (!pageSub.classList.contains('active')) {
                hideSearchBar();
                if (searchBarContainer) {
                  searchBarContainer.classList.remove('visible');
                }
              }
            }, 50);
          }
        };

        // ---------- 事件绑定 ----------
        if (goSub) goSub.addEventListener('click', function() {
          switchPage(pageSub);
        });
        if (backBtn) backBtn.addEventListener('click', goBack);
        if (settingsBtn) settingsBtn.addEventListener('click', toggleBubble);
        if (backHomeBtn) backHomeBtn.addEventListener('click', function() {
          switchPage(pageStart);
        });

        if (win11Card) win11Card.addEventListener('click', function() {
          switchPage(pageThird);
        });
        if (win10Card) win10Card.addEventListener('click', function() {
          switchPage(pageWin10);
        });
        if (win7Card) win7Card.addEventListener('click', function() {
          switchPage(page404);
        });
        if (ttbCard) ttbCard.addEventListener('click', function() {
          switchPage(pageFourth);
        });
        if (startAllBackCard) startAllBackCard.addEventListener('click', function() {
          switchPage(pageFifth);
        });
        if (rainmeterCard) rainmeterCard.addEventListener('click', function() {
          switchPage(pageSixth);
        });
        if (diskIconCard) diskIconCard.addEventListener('click', function() {
          switchPage(pageDiskIcon);
        });
        if (cardAiTool) cardAiTool.addEventListener('click', function() {
          switchPage(page404);
        });
        if (cardAiLocal) cardAiLocal.addEventListener('click', function() {
          switchPage(page404);
        });
        if (officialDownloadCard) officialDownloadCard.addEventListener('click', function() {
          switchPage(pageOfficialDownload);
        });
        if (thirdDownloadCard) thirdDownloadCard.addEventListener('click', function() {
          switchPage(pageThirdDownload);
        });
        if (livelyCardWin11) livelyCardWin11.addEventListener('click', function() {
          switchPage(pageLively);
        });
        if (livelyCardWin10) livelyCardWin10.addEventListener('click', function() {
          switchPage(pageLively);
        });
        if (micaCard) micaCard.addEventListener('click', function() {
          switchPage(pageMica);
        });

        if (win11DownloadCard) win11DownloadCard.addEventListener('click', function() {
          window.open('https://www.microsoft.com/zh-cn/software-download/windows11', '_blank');
        });
        if (win10DownloadCard) win10DownloadCard.addEventListener('click', function() {
          window.open('https://www.microsoft.com/zh-cn/software-download/windows10', '_blank');
        });
        if (msdnDownloadCard) msdnDownloadCard.addEventListener('click', function() {
          window.open('https://msdn.itellyou.cn/', '_blank');
        });
        if (windsysCard) windsysCard.addEventListener('click', function() {
          window.open('https://windsys.org/', '_blank');
        });

        document.querySelectorAll('[data-set-lang]').forEach(function(el) {
          el.addEventListener('click', function() {
            applyLang(this.dataset.setLang);
            if (pageSub.classList.contains('active')) {
              setTimeout(resetSearch, 50);
            }
          });
        });
        document.querySelectorAll('[data-set-theme]').forEach(function(el) {
          el.addEventListener('click', function() {
            applyTheme(this.dataset.setTheme);
          });
        });
        document.querySelectorAll('[data-set-accent]').forEach(function(el) {
          el.addEventListener('click', function() {
            applyAccent(this.dataset.setAccent);
          });
        });

        document.addEventListener('click', function(e) {
          if (!e.target.closest('.bubble') && !e.target.closest('#settingsBtn')) {
            bubble.classList.remove('open');
          }
        });

        document.querySelectorAll('.download-btn').forEach(function(btn) {
          btn.addEventListener('click', function(e) {
            if (this.getAttribute('href')) return true;
          });
        });

        // ============================================================
        // ====== Supabase 反馈系统 ======
        // ============================================================

        // ---------- 数据管理 ----------
        async function getFeedbacks() {
          if (!supabaseClient) {
            console.error('Supabase 未初始化');
            return [];
          }
          try {
            var { data, error } = await supabaseClient
              .from('feedbacks')
              .select('*')
              .order('created_at', { ascending: false });
            if (error) throw error;
            return data || [];
          } catch (err) {
            console.error('获取反馈失败:', err);
            return [];
          }
        }

        async function addFeedback(fb) {
          if (!supabaseClient) {
            throw new Error('Supabase 未初始化');
          }
          try {
            var { data, error } = await supabaseClient
              .from('feedbacks')
              .insert([{
                type: fb.type,
                content: fb.content,
                contact: fb.contact || '未填写',
                browser: fb.browser || navigator.userAgent,
                os: fb.os || navigator.platform
              }])
              .select();
            if (error) throw error;
            updateBadge();
            if (isAdminAuthenticated && data && data.length > 0) {
              showNotification(data[0]);
            }
            return data ? data[0] : null;
          } catch (err) {
            console.error('提交反馈失败:', err);
            throw err;
          }
        }

        async function deleteFeedbackById(id) {
          if (!supabaseClient) {
            throw new Error('Supabase 未初始化');
          }
          try {
            var { error } = await supabaseClient
              .from('feedbacks')
              .delete()
              .eq('id', id);
            if (error) throw error;
          } catch (err) {
            console.error('删除反馈失败:', err);
            throw err;
          }
        }

        async function clearAllFeedbacks() {
          if (!supabaseClient) {
            throw new Error('Supabase 未初始化');
          }
          try {
            var { error } = await supabaseClient
              .from('feedbacks')
              .delete()
              .neq('id', 0);
            if (error) throw error;
          } catch (err) {
            console.error('清空反馈失败:', err);
            throw err;
          }
        }

        // ---------- 更新徽章 ----------
        async function updateBadge() {
          try {
            var list = await getFeedbacks();
            var badge = document.getElementById('feedbackBadge');
            if (badge) badge.textContent = list.length;
          } catch {
            // 静默失败
          }
        }

        // ---------- 右上角通知 ----------
        function showNotification(feedback) {
          var container = document.getElementById('notificationContainer');
          if (!container) return;

          var typeEmoji = { '建议': '💡', 'Bug报告': '🐛', '功能请求': '🚀', '内容纠错': '📝', '其他': '📌' };
          var emoji = typeEmoji[feedback.type] || '📌';
          var typeName = feedback.type || '其他';
          var time = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });

          var el = document.createElement('div');
          el.className = 'notification-item';
          el.innerHTML = '\n            <button class="notif-close">✕</button>\n            <div class="notif-head">\n              <span class="notif-icon">🔔</span>\n              <span class="notif-title">新反馈</span>\n            </div>\n            <div class="notif-body">用户提交了一则 ' + emoji + ' <strong>' + typeName + '</strong> 反馈</div>\n            <div class="notif-time">' + time + '</div>\n          ';

          var closeBtn = el.querySelector('.notif-close');
          closeBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            dismissNotification(el);
          });

          el.addEventListener('click', function() {
            dismissNotification(el);
            if (!adminOverlay.classList.contains('open')) {
              openAdminPanel();
            }
          });

          container.appendChild(el);

          requestAnimationFrame(function() {
            el.classList.add('show');
          });

          var timeoutId = setTimeout(function() {
            if (el.parentNode) {
              dismissNotification(el);
            }
          }, 8000);
          el._timeoutId = timeoutId;
        }

        function dismissNotification(el) {
          if (el._dismissed) return;
          el._dismissed = true;
          if (el._timeoutId) {
            clearTimeout(el._timeoutId);
          }
          el.classList.remove('show');
          el.classList.add('hiding');
          setTimeout(function() {
            if (el.parentNode) {
              el.parentNode.removeChild(el);
            }
          }, 400);
        }

        // ---------- 反馈表单 ----------
        var fab = document.getElementById('feedbackFab');
        var fbOverlay = document.getElementById('feedbackOverlay');
        var fbClose = document.getElementById('fbClose');
        var fbCancel = document.getElementById('fbCancel');
        var fbSubmit = document.getElementById('fbSubmit');
        var fbType = document.getElementById('fbType');
        var fbContent = document.getElementById('fbContent');
        var fbContact = document.getElementById('fbContact');
        var fbToast = document.getElementById('fbToast');

        if (fab) {
          fab.addEventListener('click', function() {
            fbOverlay.classList.add('open');
          });
        }
        if (fbClose) {
          fbClose.addEventListener('click', closeFeedback);
        }
        if (fbCancel) {
          fbCancel.addEventListener('click', closeFeedback);
        }
        if (fbOverlay) {
          fbOverlay.addEventListener('click', function(e) {
            if (e.target === fbOverlay) closeFeedback();
          });
        }
        document.addEventListener('keydown', function(e) {
          if (e.key === 'Escape') closeFeedback();
        });

        function closeFeedback() {
          fbOverlay.classList.remove('open');
          if (fbToast) {
            fbToast.className = 'toast';
            fbToast.style.display = 'none';
          }
          if (fbSubmit) {
            fbSubmit.disabled = false;
            fbSubmit.textContent = '提交反馈';
          }
        }

        function showToast(msg, type) {
          if (!fbToast) return;
          fbToast.textContent = msg;
          fbToast.className = 'toast ' + type;
          fbToast.style.display = 'block';
        }

        if (fbSubmit) {
          fbSubmit.addEventListener('click', async function() {
            var content = fbContent.value.trim();
            if (!content) {
              showToast('请填写反馈内容', 'error');
              fbContent.focus();
              return;
            }

            var feedback = {
              type: fbType.value,
              content: content,
              contact: fbContact.value.trim() || '未填写',
              browser: navigator.userAgent,
              os: navigator.platform
            };

            fbSubmit.disabled = true;
            fbSubmit.textContent = '提交中…';

            try {
              await addFeedback(feedback);
              showToast('✅ 反馈已提交，感谢你的支持！', 'success');
              fbContent.value = '';
              fbContact.value = '';
              if (adminOverlay.classList.contains('open')) {
                renderAdminPanel();
              }
              setTimeout(closeFeedback, 1500);
            } catch (err) {
              showToast('❌ 提交失败: ' + err.message, 'error');
            } finally {
              fbSubmit.disabled = false;
              fbSubmit.textContent = '提交反馈';
            }
          });
        }

        // ---------- 后台管理 ----------
        var ADMIN_CODE = 'maxtle';

        var inviteOverlay = document.getElementById('inviteOverlay');
        var inviteInput = document.getElementById('inviteInput');
        var inviteConfirm = document.getElementById('inviteConfirm');
        var inviteCancel = document.getElementById('inviteCancel');
        var inviteError = document.getElementById('inviteError');
        var inviteSuccess = document.getElementById('inviteSuccess');
        var adminOverlay = document.getElementById('adminOverlay');
        var adminClose = document.getElementById('adminClose');
        var adminClearAll = document.getElementById('adminClearAll');
        var adminEntry = document.getElementById('adminEntry');
        var feedbackList = document.getElementById('feedbackList');
        var refreshBtn = document.getElementById('refreshBtn');
        var totalCount = document.getElementById('totalCount');
        var todayCount = document.getElementById('todayCount');
        var typeStats = document.getElementById('typeStats');

        var isAdminAuthenticated = false;

        // ---------- 后台入口 ----------
        if (adminEntry) {
          adminEntry.addEventListener('click', function() {
            bubble.classList.remove('open');
            if (isAdminAuthenticated) {
              openAdminPanel();
              return;
            }
            inviteOverlay.classList.add('open');
            inviteInput.value = '';
            inviteError.classList.remove('show');
            inviteSuccess.classList.remove('show');
            inviteInput.focus();
          });
        }

        // ---------- 邀请码验证 ----------
        if (inviteConfirm) {
          inviteConfirm.addEventListener('click', function() {
            var code = inviteInput.value.trim();
            if (code === ADMIN_CODE) {
              isAdminAuthenticated = true;
              inviteSuccess.classList.add('show');
              inviteError.classList.remove('show');
              inviteInput.disabled = true;
              inviteConfirm.disabled = true;
              inviteConfirm.textContent = '已验证 ✓';

              setTimeout(function() {
                inviteOverlay.classList.remove('open');
                inviteInput.disabled = false;
                inviteConfirm.disabled = false;
                inviteConfirm.textContent = '验证';
                inviteSuccess.classList.remove('show');
                openAdminPanel();
              }, 600);
            } else {
              inviteError.classList.add('show');
              inviteSuccess.classList.remove('show');
              inviteInput.value = '';
              inviteInput.focus();
            }
          });
        }

        if (inviteInput) {
          inviteInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
              inviteConfirm.click();
            }
          });
        }

        if (inviteCancel) {
          inviteCancel.addEventListener('click', function() {
            inviteOverlay.classList.remove('open');
            inviteError.classList.remove('show');
            inviteSuccess.classList.remove('show');
          });
        }

        if (inviteOverlay) {
          inviteOverlay.addEventListener('click', function(e) {
            if (e.target === inviteOverlay) {
              inviteOverlay.classList.remove('open');
              inviteError.classList.remove('show');
              inviteSuccess.classList.remove('show');
            }
          });
        }

        // ---------- 打开/关闭后台 ----------
        async function openAdminPanel() {
          await renderAdminPanel();
          adminOverlay.classList.add('open');
        }

        if (adminClose) {
          adminClose.addEventListener('click', function() {
            adminOverlay.classList.remove('open');
          });
        }

        if (adminOverlay) {
          adminOverlay.addEventListener('click', function(e) {
            if (e.target === adminOverlay) {
              adminOverlay.classList.remove('open');
            }
          });
        }

        // ---------- 渲染后台 ----------
        async function renderAdminPanel() {
          try {
            var list = await getFeedbacks();
            var total = list.length;
            var today = new Date().toLocaleDateString('zh-CN');
            var todayList = list.filter(function(item) {
              return item.created_at && new Date(item.created_at).toLocaleDateString('zh-CN') === today;
            });

            if (totalCount) totalCount.textContent = total;
            if (todayCount) todayCount.textContent = todayList.length;

            var typeMap = {};
            list.forEach(function(item) {
              var t = item.type || '其他';
              typeMap[t] = (typeMap[t] || 0) + 1;
            });
            var typeStr = Object.entries(typeMap).map(function(_ref) {
              var k = _ref[0],
                v = _ref[1];
              return k + ': ' + v;
            }).join('  ');
            if (typeStats) typeStats.textContent = typeStr || '暂无数据';

            if (!feedbackList) return;
            if (list.length === 0) {
              feedbackList.innerHTML = '<div class="empty">🎉 暂无反馈，继续保持！</div>';
              return;
            }

            var html = '';
            list.forEach(function(item) {
              var typeEmoji = { '建议': '💡', 'Bug报告': '🐛', '功能请求': '🚀', '内容纠错': '📝', '其他': '📌' };
              var emoji = typeEmoji[item.type] || '📌';
              var time = item.created_at ? new Date(item.created_at).toLocaleString('zh-CN') : '未知时间';
              html += '\n                <div class="feedback-item">\n                  <div class="head">\n                    <span class="type">' + emoji + ' ' + (item.type || '其他') + '</span>\n                    <span class="time">' + time + '</span>\n                  </div>\n                  <div class="content">' + escapeHtml(item.content) + '</div>\n                  ' + (item.contact && item.contact !== '未填写' ? '<div class="contact">📧 ' + escapeHtml(item.contact) + '</div>' : '') + '\n                  <button class="delete-btn" data-id="' + item.id + '">🗑 删除</button>\n                </div>\n              ';
            });
            feedbackList.innerHTML = html;

            feedbackList.querySelectorAll('.delete-btn').forEach(function(btn) {
              btn.addEventListener('click', async function(e) {
                e.stopPropagation();
                var id = this.dataset.id;
                if (confirm('确定要删除这条反馈吗？')) {
                  try {
                    await deleteFeedbackById(id);
                    renderAdminPanel();
                    updateBadge();
                  } catch (err) {
                    alert('删除失败: ' + err.message);
                  }
                }
              });
            });

            if (refreshBtn) refreshBtn.textContent = '🔄 刷新 (' + list.length + '条)';
          } catch (err) {
            if (feedbackList) {
              feedbackList.innerHTML = '<div class="empty">⚠️ 加载失败: ' + err.message + '</div>';
            }
            console.error('渲染后台失败:', err);
          }
        }

        function escapeHtml(text) {
          var div = document.createElement('div');
          div.textContent = text;
          return div.innerHTML;
        }

        // ---------- 刷新按钮 ----------
        if (refreshBtn) {
          refreshBtn.addEventListener('click', renderAdminPanel);
        }

        // ---------- 清空所有反馈 ----------
        if (adminClearAll) {
          adminClearAll.addEventListener('click', async function() {
            var list = await getFeedbacks();
            if (list.length === 0) {
              alert('暂无反馈数据');
              return;
            }
            if (confirm('⚠️ 确定要清空所有反馈数据吗？此操作不可恢复！')) {
              try {
                await clearAllFeedbacks();
                renderAdminPanel();
                updateBadge();
              } catch (err) {
                alert('清空失败: ' + err.message);
              }
            }
          });
        }

        // ---------- 初始化 ----------
        updateBadge();

        // 初始化搜索模式
        setSearchMode('internal');

        // 初始化搜索状态 - 默认隐藏搜索栏
        hideSearchBar();
        if (searchBarContainer) {
          searchBarContainer.classList.remove('visible');
        }
        resetSearch();

        if (pageStart.classList.contains('active')) {
          hideSearchBar();
          if (searchBarContainer) {
            searchBarContainer.classList.remove('visible');
          }
        }

        document.addEventListener('keydown', function(e) {
          if (e.key === 'Escape') {
            if (adminOverlay.classList.contains('open')) {
              adminOverlay.classList.remove('open');
            }
            if (inviteOverlay.classList.contains('open')) {
              inviteOverlay.classList.remove('open');
              inviteError.classList.remove('show');
              inviteSuccess.classList.remove('show');
            }
          }
        });

        // 暴露全局 API
        window.__maxtle = {
          getFeedbacks: getFeedbacks,
          addFeedback: addFeedback,
          deleteFeedbackById: deleteFeedbackById,
          clearAllFeedbacks: clearAllFeedbacks,
          renderAdminPanel: renderAdminPanel,
          openAdminPanel: openAdminPanel,
          showSearchBar: showSearchBar,
          hideSearchBar: hideSearchBar,
          performSearch: performSearch,
          resetSearch: resetSearch,
          setSearchMode: setSearchMode
        };

      }); // DOMContentLoaded 结束

    })(); // IIFE 结束
  </script>
</body>
</html>