<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="漳淮是一个面向二次元爱好者的内容分享社区，分享游戏、动漫、创作、摄影等内容。" />
  <meta name="theme-color" content="#7C5CFF" />
  <meta property="og:title" content="漳淮 — 二次元内容分享社区" />
  <meta property="og:description" content="漳淮是一个面向二次元爱好者的内容分享社区，分享游戏、动漫、创作、摄影等内容。" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="漳淮" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="漳淮 — 二次元内容分享社区" />
  <meta name="twitter:description" content="漳淮是一个面向二次元爱好者的内容分享社区，分享游戏、动漫、创作、摄影等内容。" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap" rel="stylesheet" />
  <title>漳淮 — 二次元内容分享社区</title>
  <style>/* ========================================
   漳淮 Global Styles
   ACG游戏文化社区
   ======================================== */

:root {
  /* 品牌色 */
  --primary: #7C5CFF;
  --secondary: #FF6B9D;
  --accent: #00D4AA;
  --accent-purple: #A855F7;
  --accent-cyan: #00D9FF;
  --accent-orange: #FF7E5F;
  --accent-pink: #FF6B9D;
  --accent-green: #38F9D7;
  --yellow: #FFD93D;

  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #7C5CFF, #FF6B9D);
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-accent: linear-gradient(135deg, #00D9FF 0%, #00D4AA 100%);

  /* 背景 */
  --bg-primary: #FEFEFE;
  --bg-secondary: #F8F7FF;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.8);

  /* 文字 */
  --text-primary: #2D2D3F;
  --text-secondary: #6B6B80;
  --text-light: #9999AA;

  /* 边框 */
  --border-color: #E8E8F0;

  /* 阴影 */
  --shadow-soft: 0 4px 20px rgba(124, 92, 255, 0.08);
  --shadow-hover: 0 8px 30px rgba(124, 92, 255, 0.15);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
  --glow-purple: 0 0 40px rgba(124, 92, 255, 0.2);

  /* 圆角 */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 9999px;

  /* 过渡 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* 字体 */
  --font-primary: 'Noto Sans SC', 'M PLUS Rounded 1c', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 背景装饰球 */
.bg-decor {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.bg-circle-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(255, 107, 157, 0.08));
  top: -150px;
  right: -150px;
}

.bg-circle-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.1), rgba(0, 217, 255, 0.08));
  bottom: 10%;
  left: -100px;
}

.bg-circle-3 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.08), rgba(255, 107, 157, 0.06));
  top: 50%;
  right: 5%;
}

/* 通用卡片 */
.card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* 通用按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: var(--font-primary);
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 15px rgba(124, 92, 255, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(124, 92, 255, 0.4);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-glass);
  border-color: var(--primary);
  color: var(--primary);
}

/* 容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Section 通用 */
.section {
  padding: 80px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-tag {
  display: inline-block;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.section-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}

.section-desc {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 255, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 92, 255, 0.4);
}

/* 选中 */
::selection {
  background: rgba(124, 92, 255, 0.2);
  color: var(--text-primary);
}

/* 响应式 */
@media (max-width: 768px) {
  .section {
    padding: 60px 0;
  }

  .container {
    padding: 0 16px;
  }
}

.main-content {
      min-height: calc(100vh - 56px - 220px);
    }

    /* Back to top */
    .back-to-top {
      position: fixed;
      bottom: 80px;
      right: 24px;
      width: 40px;
      height: 40px;
      background: white;
      border: 1px solid var(--border-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-secondary);
      box-shadow: var(--shadow-soft);
      z-index: 90;
      transition: all var(--transition-fast);
    }

    .back-to-top:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(124, 92, 255, 0.3);
    }

    .hidden { display: none !important; }

    @media (max-width: 768px) {
      .back-to-top { bottom: 72px; right: 16px; width: 36px; height: 36px; }
    }
/* ===== Header ===== */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(254, 254, 254, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    transition: all var(--transition-normal);
  }

  .header-inner {
    display: flex;
    align-items: center;
    height: 56px;
    gap: 16px;
  }

  /* Logo */
  .logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
  }

  .logo-icon { font-size: 22px; }

  .logo-text {
    font-size: 18px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Nav */
  .nav-links {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
  }

  .nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
    white-space: nowrap;
  }

  .nav-link:hover, .nav-link.active {
    color: var(--primary);
    background: rgba(124, 92, 255, 0.08);
  }

  /* Search */
  .search-container {
    flex: 1;
    max-width: 360px;
    position: relative;
  }

  .search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    transition: all var(--transition-fast);
    cursor: text;
  }

  .search-bar:focus-within {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.08);
  }

  .search-bar svg { color: var(--text-light); flex-shrink: 0; }

  .search-bar input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
    font-family: var(--font-primary);
    color: var(--text-primary);
    min-width: 0;
  }

  .search-bar input::placeholder { color: var(--text-light); }

  .search-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-light);
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
  }
  .search-clear:hover { color: var(--text-secondary); }

  /* Search dropdown */
  .search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    z-index: 300;
    overflow: hidden;
    padding: 12px;
  }

  .search-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }

  .clear-history {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    font-family: var(--font-primary);
  }

  .search-hot { margin-bottom: 12px; }

  .search-hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .hot-tag {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
  }

  .hot-tag:hover {
    background: rgba(124, 92, 255, 0.08);
    color: var(--primary);
    border-color: var(--primary);
  }

  .search-history-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    transition: background var(--transition-fast);
  }

  .history-item:hover { background: var(--bg-secondary); color: var(--text-primary); }

  .search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 14px;
    transition: background var(--transition-fast);
  }

  .search-result-item:hover { background: var(--bg-secondary); }

  /* Header actions */
  .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .btn-write {
    padding: 7px 16px;
    font-size: 13px;
    gap: 5px;
  }

  .btn-sm { padding: 5px 14px; font-size: 13px; }

  .btn-text {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    font-family: var(--font-primary);
    text-decoration: none;
  }

  .btn-text:hover { color: var(--primary); background: rgba(124, 92, 255, 0.06); }

  /* User info */
  .user-info { display: flex; align-items: center; gap: 4px; }

  /* Notification */
  .notification-wrapper { position: relative; }

  .notification-btn {
    position: relative;
    background: none;
    border: none;
    padding: 8px;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .notification-btn:hover { background: rgba(124, 92, 255, 0.06); color: var(--primary); }

  .notif-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    background: var(--secondary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
  }

  /* Notification Panel */
  .notification-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: -8px;
    width: 360px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    z-index: 200;
    overflow: hidden;
    animation: slideDown 0.15s ease;
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
  }

  .notif-panel-header h3 { font-size: 15px; font-weight: 700; }

  .notif-header-actions { display: flex; gap: 12px; align-items: center; }

  .notif-view-all {
    font-size: 13px;
    color: var(--text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  .notif-view-all:hover { color: var(--primary); }

  .notif-mark-all {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 500;
  }
  .notif-mark-all:hover { text-decoration: underline; }

  .notif-panel-body { max-height: 380px; overflow-y: auto; }

  .notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-light);
    font-size: 14px;
  }

  .notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
  }

  .notif-item:last-child { border-bottom: none; }
  .notif-item:hover { background: var(--bg-secondary); }
  .notif-item.unread { background: rgba(124, 92, 255, 0.02); }

  .notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
  }

  .notif-icon.like { background: rgba(255, 71, 87, 0.1); }
  .notif-icon.comment { background: rgba(124, 92, 255, 0.1); }
  .notif-icon.follow { background: rgba(0, 212, 170, 0.1); }
  .notif-icon.system { background: rgba(255, 200, 50, 0.12); }

  .notif-body { flex: 1; min-width: 0; }

  .notif-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .notif-text strong { font-weight: 600; }
  .notif-time { font-size: 12px; color: var(--text-light); margin-top: 3px; }

  .notif-dot {
    width: 7px;
    height: 7px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px;
  }

  /* Avatar + dropdown */
  .avatar-wrapper { position: relative; }

  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: transform var(--transition-fast);
    overflow: hidden;
  }

  .avatar:hover { transform: scale(1.05); }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }

  .dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    min-width: 200px;
    padding: 8px;
    z-index: 200;
    animation: slideDown 0.15s ease;
  }

  .dropdown-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 12px;
  }

  .dropdown-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .dropdown-username { font-size: 14px; font-weight: 600; color: var(--text-primary); }
  .dropdown-email { font-size: 12px; color: var(--text-light); margin-top: 1px; }

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    font-family: var(--font-primary);
    transition: background var(--transition-fast);
    text-align: left;
  }

  .dropdown-item:hover { background: var(--bg-secondary); }
  .dropdown-item.danger { color: #FF4757; }
  .dropdown-divider { border: none; border-top: 1px solid var(--border-color); margin: 4px 0; }

  /* Mobile toggle */
  .mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
  }

  .mobile-menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-fast);
    display: block;
  }

  /* Mobile drawer */
  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: white;
    z-index: 500;
    padding: 0;
    transform: translateX(0);
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0,0,0,0.1);
    animation: slideInLeft 0.25s ease;
  }

  @keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 499;
    backdrop-filter: blur(2px);
  }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
  }

  .mobile-drawer-auth {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
  }

  .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all var(--transition-fast);
  }

  .mobile-nav-item:hover { background: var(--bg-secondary); color: var(--primary); }

  /* Mobile bottom tab bar */
  .mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
    z-index: 100;
    justify-content: space-around;
    align-items: stretch;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    text-decoration: none;
    color: var(--text-light);
    font-size: 10px;
    font-weight: 500;
    transition: all var(--transition-fast);
    padding: 6px 4px;
    border-radius: 8px;
  }

  .tab-item.active { color: var(--primary); }
  .tab-item:hover { color: var(--primary); }

  .tab-write-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(124, 92, 255, 0.4);
    margin-bottom: 2px;
  }

  .tab-notif-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    border: 2px solid white;
  }

  .btn-block { width: 100%; justify-content: center; }
  .hidden { display: none !important; }

  /* ===== Responsive ===== */
  @media (max-width: 1024px) {
    .search-container { max-width: 260px; }
  }

  @media (max-width: 768px) {
    .header-inner { height: 52px; gap: 10px; }
    .nav-links { display: none; }
    .auth-buttons { display: none; }
    .mobile-menu-toggle { display: flex; }
    .mobile-tab-bar { display: flex; }
    .search-container { max-width: 160px; }
    .btn-write span { display: none; }
    .btn-write { padding: 7px 10px; }
    .notification-panel { width: calc(100vw - 32px); right: -60px; }
    /* Add bottom padding to body for tab bar */
    :global(body) { padding-bottom: 56px; }
  }

  @media (max-width: 480px) {
    .search-container { display: none; }
    .btn-write { display: none; }
  }
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 56px 0 28px;
    margin-top: 40px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }

  /* Brand */
  .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .footer-logo .logo-icon { font-size: 22px; }

  .footer-logo .logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .footer-desc {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 6px;
    max-width: 260px;
  }

  .footer-slogan {
    font-size: 13px;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 16px;
  }

  .social-links { display: flex; gap: 8px; }

  .social-link {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: white;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
  }

  .social-link:hover {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
  }

  /* Nav groups */
  .footer-nav-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
  }

  .footer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .footer-nav a:hover { color: var(--primary); }

  .footer-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-light);
    padding: 3px 8px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
  }

  /* Bottom */
  .footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .footer-copy { font-size: 12px; color: var(--text-light); }
  .footer-icp { font-size: 12px; color: var(--text-light); }

  @media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  }

  @media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; text-align: center; }
  }

  @media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
    .site-footer { padding: 40px 0 28px; }
  }</style>
  <style>.community-home {
    padding-top: 24px;
    padding-bottom: 60px;
    min-height: calc(100vh - 64px - 200px);
  }

  .home-layout {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 24px;
    align-items: start;
  }

  /* Right sidebar - sticky layout */
  .sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .topics-card {
    position: sticky;
    top: 88px;
    padding: 20px;
  }

  .topic-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .topic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
    cursor: pointer;
  }

  .topic-item:hover, .topic-item.active {
    background: rgba(124, 92, 255, 0.08);
    color: var(--primary);
  }

  .topic-icon { font-size: 18px; }
  .topic-count { margin-left: auto; font-size: 12px; color: var(--text-light); }

  .hot-card { margin-top: 20px; padding: 20px; }
  .hot-list { display: flex; flex-direction: column; gap: 10px; }

  .hot-item { display: flex; gap: 10px; cursor: pointer; padding: 4px 0; }

  .hot-rank { font-size: 16px; font-weight: 800; color: var(--text-light); min-width: 24px; }
  .hot-rank.top-3 { color: var(--primary); }

  .hot-title {
    font-size: 13px; color: var(--text-secondary); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hot-title:hover { color: var(--primary); }

  .sort-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; margin-bottom: 16px; gap: 16px;
  }

  .sort-tabs { display: flex; gap: 4px; }

  .sort-tab {
    padding: 8px 16px; border-radius: var(--radius-full); border: none;
    background: none; font-size: 14px; font-weight: 500;
    color: var(--text-secondary); cursor: pointer;
    transition: all var(--transition-fast); font-family: var(--font-primary);
  }
  .sort-tab:hover { background: var(--bg-secondary); }
  .sort-tab.active { background: rgba(124, 92, 255, 0.1); color: var(--primary); font-weight: 600; }

  .search-box {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: var(--bg-secondary);
    border-radius: var(--radius-full); border: 1.5px solid transparent;
    transition: all var(--transition-fast);
  }
  .search-box:focus-within { border-color: var(--primary); background: white; }
  .search-box svg { color: var(--text-light); flex-shrink: 0; }
  .search-box input { border: none; background: none; outline: none; font-size: 14px; width: 160px; font-family: var(--font-primary); color: var(--text-primary); }
  .search-box input::placeholder { color: var(--text-light); }

  .posts-feed { display: flex; flex-direction: column; gap: 12px; }

  .post-card {
    background: var(--bg-card); backdrop-filter: blur(20px);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: 20px 24px; transition: all var(--transition-normal); cursor: pointer;
  }
  .post-card:hover { border-color: rgba(124, 92, 255, 0.2); box-shadow: var(--shadow-hover); transform: translateY(-2px); }

  .post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

  .post-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gradient-primary); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px; flex-shrink: 0; overflow: hidden;
  }
  .post-avatar img { width: 100%; height: 100%; object-fit: cover; }

  .post-author { font-size: 14px; font-weight: 600; color: var(--text-primary); }
  .post-meta { font-size: 12px; color: var(--text-light); display: flex; align-items: center; gap: 6px; }

  .post-topic-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
    border-radius: var(--radius-full); background: rgba(124, 92, 255, 0.08);
    color: var(--primary); font-size: 12px; font-weight: 500; margin-left: auto;
  }

  .post-title { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.5; }

  .post-excerpt {
    font-size: 14px; color: var(--text-secondary); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px;
  }

  .post-images {
    display: grid; gap: 6px; margin-bottom: 14px; border-radius: 12px;
    overflow: hidden; position: relative;
  }
  .post-images:has(> img:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
  .post-images:has(> img:nth-child(2):not(:has(~ img:nth-child(3))) { grid-template-columns: 1fr 1fr; }
  .post-images:has(> img:only-child) { grid-template-columns: 1fr; }
  .post-images img {
    width: 100%; height: 140px; object-fit: cover; border-radius: 10px;
    transition: transform 0.3s, filter 0.3s;
  }
  .post-images:has(> img:only-child) img { height: 220px; border-radius: 12px; }
  .post-images img:hover { transform: scale(1.03); filter: brightness(0.96); }

  .post-video-badge {
    position: absolute; bottom: 8px; right: 8px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
  }
  .post-video-indicator {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; padding: 12px 16px;
    background: var(--bg-secondary); border-radius: 12px;
    color: var(--primary); font-size: 14px; font-weight: 500;
  }

  .post-actions { display: flex; align-items: center; gap: 20px; }

  .post-action {
    display: flex; align-items: center; gap: 5px;
    background: none; border: none; color: var(--text-light);
    font-size: 13px; cursor: pointer; padding: 4px 8px;
    border-radius: 8px; transition: all var(--transition-fast); font-family: var(--font-primary);
  }
  .post-action:hover { background: var(--bg-secondary); color: var(--text-secondary); }
  .post-action.liked { color: #FF4757; }
  .post-action.liked:hover { background: rgba(255, 71, 87, 0.08); }
  .post-action svg { width: 16px; height: 16px; }

  .loading-state { display: flex; flex-direction: column; align-items: center; padding: 60px 0; color: var(--text-light); gap: 16px; }
  .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .load-more { padding: 20px 0; }
  .empty-state { text-align: center; padding: 60px 0; color: var(--text-secondary); }
  .empty-icon { font-size: 48px; margin-bottom: 12px; }
  .empty-state h3 { font-size: 20px; margin-bottom: 8px; color: var(--text-primary); }
  .empty-state p { margin-bottom: 20px; }

  /* Right sidebar cards */
  .stats-card, .hot-topics-card, .about-card { padding: 18px 20px; }
  .stats-card { position: sticky; top: 80px; }

  .sidebar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
  }

  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-item { text-align: center; padding: 10px 0; background: var(--bg-secondary); border-radius: 12px; }
  .stat-num { display: block; font-size: 20px; font-weight: 800; color: var(--primary); }
  .stat-label { font-size: 11px; color: var(--text-light); }

  .hot-topics-list { display: flex; flex-direction: column; gap: 4px; }

  .hot-topic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition-fast);
    cursor: pointer;
  }

  .hot-topic-item:hover { background: rgba(124, 92, 255, 0.06); color: var(--primary); }
  .hot-topic-icon { font-size: 16px; flex-shrink: 0; }
  .hot-topic-count { margin-left: auto; font-size: 11px; color: var(--text-light); }

  .about-text { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }

  .about-links { display: flex; gap: 8px; flex-wrap: wrap; }

  .about-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: rgba(124, 92, 255, 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
  }

  .about-link:hover { background: rgba(124, 92, 255, 0.15); }

  .loading-placeholder { text-align: center; padding: 16px; color: var(--text-light); font-size: 13px; }

  .hidden { display: none !important; }

  @media (max-width: 1024px) {
      .home-layout { grid-template-columns: 1fr; }
      .sidebar, .sidebar-right { display: none; }
  }

  @media (max-width: 768px) {
    .sort-bar { flex-direction: column; gap: 10px; }
    .search-box input { width: 100%; }
    .post-card { padding: 16px; }
    .post-images img { width: 120px; height: 90px; }
  }</style>
</head>
<body>
  <div class="bg-decor">
    <div class="bg-circle bg-circle-1"></div>
    <div class="bg-circle bg-circle-2"></div>
    <div class="bg-circle bg-circle-3"></div>
  </div>

  <header class="site-header" id="site-header">
  <div class="header-inner container">
    <!-- Logo -->
    <a href="/" class="logo">
      <span class="logo-icon">🎐</span>
      <span class="logo-text">漳淮</span>
    </a>

    <!-- Nav links -->
    <nav class="nav-links" id="nav-links">
      <a href="/" class={`nav-link ${currentPath === '/' ? 'active' : ''}`}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        首页
      </a>
      <a href="/topics" class={`nav-link ${currentPath.startsWith('/topics') ? 'active' : ''}`}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>
        话题
      </a>
      <a href="/ranking" class={`nav-link ${currentPath === '/ranking' ? 'active' : ''}`}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
        排行
      </a>
    </nav>

    <!-- Search bar -->
    <div class="search-container" id="search-container">
      <div class="search-bar" id="search-bar">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" id="header-search-input" placeholder="搜索帖子、话题、用户…" autocomplete="off" />
        <button class="search-clear hidden" id="search-clear">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>
      <!-- Search dropdown -->
      <div class="search-dropdown hidden" id="search-dropdown">
        <div class="search-hot">
          <div class="search-section-title">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
            热门搜索
          </div>
          <div class="search-hot-tags" id="search-hot-tags">
            <span class="hot-tag" onclick="doSearch('游戏推荐')">游戏推荐</span>
            <span class="hot-tag" onclick="doSearch('动漫番剧')">动漫番剧</span>
            <span class="hot-tag" onclick="doSearch('绘画技巧')">绘画技巧</span>
            <span class="hot-tag" onclick="doSearch('二次元')">二次元</span>
            <span class="hot-tag" onclick="doSearch('摄影分享')">摄影分享</span>
          </div>
        </div>
        <div class="search-history hidden" id="search-history-section">
          <div class="search-section-title">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            搜索历史
            <button class="clear-history" id="btn-clear-history">清空</button>
          </div>
          <div class="search-history-list" id="search-history-list"></div>
        </div>
        <div class="search-results-preview hidden" id="search-results-preview"></div>
      </div>
    </div>

    <!-- Header actions -->
    <div class="header-actions">
      <!-- Write button -->
      <button class="btn btn-primary btn-write" id="btn-new-post">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        <span>发帖</span>
      </button>

      <div class="user-menu" id="user-menu">
        <!-- Logged out -->
        <div class="auth-buttons" id="auth-buttons">
          <a href="/login" class="btn-text">登录</a>
          <a href="/login?tab=register" class="btn btn-secondary btn-sm">注册</a>
        </div>

        <!-- Logged in -->
        <div class="user-info hidden" id="user-info">
          <!-- Notification bell -->
          <div class="notification-wrapper" id="notification-wrapper">
            <button class="notification-btn" id="notification-btn" title="通知">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
              <span class="notif-badge hidden" id="notif-badge">0</span>
            </button>
            <div class="notification-panel hidden" id="notification-panel">
              <div class="notif-panel-header">
                <h3>消息通知</h3>
                <div class="notif-header-actions">
                  <a href="/notifications" class="notif-view-all">查看全部</a>
                  <button class="notif-mark-all" id="btn-mark-all-read">全部已读</button>
                </div>
              </div>
              <div class="notif-panel-body" id="notif-list">
                <div class="notif-empty">
                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                  <p>暂无新通知</p>
                </div>
              </div>
            </div>
          </div>

          <!-- Avatar + dropdown -->
          <div class="avatar-wrapper" id="avatar-wrapper">
            <div class="avatar" id="user-avatar">U</div>
            <div class="dropdown hidden" id="user-dropdown">
              <div class="dropdown-user-info" id="dropdown-user-info">
                <div class="dropdown-avatar" id="dropdown-avatar">U</div>
                <div>
                  <div class="dropdown-username" id="dropdown-username">用户</div>
                  <div class="dropdown-email" id="dropdown-email"></div>
                </div>
              </div>
              <hr class="dropdown-divider" />
              <a href="#" id="dropdown-profile-link" class="dropdown-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                我的主页
              </a>
              <a href="/notifications" class="dropdown-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                消息中心
              </a>
              <a href="/write" class="dropdown-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                写帖子
              </a>
              <hr class="dropdown-divider" />
              <button class="dropdown-item danger" id="btn-logout">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                退出登录
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Mobile menu toggle -->
    <button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="菜单">
      <span></span><span></span><span></span>
    </button>
  </div>
</header>

<!-- Mobile drawer menu -->
<div class="mobile-drawer hidden" id="mobile-drawer">
  <div class="mobile-drawer-header">
    <a href="/" class="logo">
      <span class="logo-icon">🎐</span>
      <span class="logo-text">漳淮</span>
    </a>
    <button class="mobile-drawer-close" id="mobile-drawer-close">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
  </div>
  <div class="mobile-drawer-auth" id="mobile-drawer-auth">
    <a href="/login" class="btn btn-primary btn-block">登录 / 注册</a>
  </div>
  <nav class="mobile-drawer-nav">
    <a href="/" class="mobile-nav-item">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
      首页
    </a>
    <a href="/topics" class="mobile-nav-item">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>
      话题广场
    </a>
    <a href="/ranking" class="mobile-nav-item">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/></svg>
      排行榜
    </a>
    <a href="/search" class="mobile-nav-item">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      搜索
    </a>
  </nav>
</div>
<div class="mobile-overlay hidden" id="mobile-overlay"></div>

<!-- Mobile bottom tab bar -->
<nav class="mobile-tab-bar" id="mobile-tab-bar">
  <a href="/" class={`tab-item ${currentPath === '/' ? 'active' : ''}`}>
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    <span>首页</span>
  </a>
  <a href="/topics" class={`tab-item ${currentPath.startsWith('/topics') ? 'active' : ''}`}>
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>
    <span>话题</span>
  </a>
  <a href="/write" class="tab-item tab-write" id="tab-write">
    <div class="tab-write-btn">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </div>
    <span>发帖</span>
  </a>
  <a href="/notifications" class="tab-item" id="tab-notif">
    <div style="position:relative">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
      <span class="tab-notif-dot hidden" id="tab-notif-dot"></span>
    </div>
    <span>通知</span>
  </a>
  <a href="/login" class="tab-item" id="tab-profile">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
    <span>我的</span>
  </a>
</nav>

  <main class="main-content">
    <CommunityLayout>
  <div class="community-home">
    <div class="container home-layout">
      <!-- Sidebar -->
      <aside class="sidebar">
        <div class="card topics-card">
          <h3 class="sidebar-title">话题频道</h3>
          <div class="topic-list" id="topic-list">
            <a href="/" class="topic-item active" data-topic="">
              <span class="topic-icon">🔥</span>
              <span class="topic-name">全部</span>
            </a>
          </div>
        </div>

        <div class="card hot-card">
          <h3 class="sidebar-title">热门帖子</h3>
          <div class="hot-list" id="hot-list">
            <div class="loading-placeholder">加载中...</div>
          </div>
        </div>
      </aside>

      <!-- Main content -->
      <main class="main-feed">
        <!-- Sort bar -->
        <div class="sort-bar card">
          <div class="sort-tabs">
            <button class="sort-tab active" data-sort="latest">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
              最新
            </button>
            <button class="sort-tab" data-sort="hot">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
              最热
            </button>
            <button class="sort-tab" data-sort="comments">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
              评论最多
            </button>
          </div>
          <div class="search-box">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" placeholder="搜索帖子..." id="search-input" />
          </div>
        </div>

        <!-- Posts list -->
        <div class="posts-feed" id="posts-feed">
          <div class="loading-state">
            <div class="loading-spinner"></div>
            <p>加载中...</p>
          </div>
        </div>

        <!-- Load more -->
        <div class="load-more hidden" id="load-more">
          <button class="btn btn-secondary btn-block" id="btn-load-more">加载更多</button>
        </div>

        <!-- Empty state -->
        <div class="empty-state hidden" id="empty-state">
          <div class="empty-icon">📝</div>
          <h3>还没有帖子</h3>
          <p>成为第一个分享者吧！</p>
          <button class="btn btn-primary" onclick="window.location.href='/login'">注册发帖</button>
        </div>
      </main>

      <!-- Right sidebar -->
      <aside class="sidebar-right">
        <!-- Community stats -->
        <div class="card stats-card">
          <h3 class="sidebar-title">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
            社区数据
          </h3>
          <div class="stats-grid">
            <div class="stat-item">
              <span class="stat-num" id="stat-posts">--</span>
              <span class="stat-label">帖子</span>
            </div>
            <div class="stat-item">
              <span class="stat-num" id="stat-users">--</span>
              <span class="stat-label">用户</span>
            </div>
            <div class="stat-item">
              <span class="stat-num" id="stat-today">--</span>
              <span class="stat-label">今日发帖</span>
            </div>
            <div class="stat-item">
              <span class="stat-num" id="stat-topics-count">--</span>
              <span class="stat-label">话题</span>
            </div>
          </div>
        </div>

        <!-- Hot topics -->
        <div class="card hot-topics-card">
          <h3 class="sidebar-title">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
            热门话题
          </h3>
          <div class="hot-topics-list" id="hot-topics-list">
            <div class="loading-placeholder">加载中...</div>
          </div>
        </div>

        <!-- About -->
        <div class="card about-card">
          <h3 class="sidebar-title">关于漳淮</h3>
          <p class="about-text">二次元内容分享社区，分享游戏、动漫、创作、摄影等内容。用热爱连接每一个灵魂 ✨</p>
          <div class="about-links">
            <a href="/topics" class="about-link">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>
              话题广场
            </a>
            <a href="/ranking" class="about-link">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/></svg>
              排行榜
            </a>
          </div>
        </div>
      </aside>
    </div>
  </div>
</CommunityLayout>
  </main>

  <footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <!-- Brand -->
      <div class="footer-brand">
        <a href="/" class="footer-logo">
          <span class="logo-icon">🎐</span>
          <span class="logo-text">漳淮</span>
        </a>
        <p class="footer-desc">二次元内容分享社区 — 探索游戏、动漫、创作的无限可能</p>
        <p class="footer-slogan">用热爱连接每一个灵魂 ✨</p>
        <div class="social-links">
          <a href="#" aria-label="Bilibili" class="social-link" title="Bilibili">B</a>
          <a href="#" aria-label="微信公众号" class="social-link" title="微信">微</a>
          <a href="#" aria-label="小红书" class="social-link" title="小红书">红</a>
          <a href="#" aria-label="Discord" class="social-link" title="Discord">D</a>
        </div>
      </div>

      <!-- Navigation -->
      <div class="footer-nav-group">
        <h4 class="footer-nav-title">社区</h4>
        <ul class="footer-nav">
          <li><a href="/">首页</a></li>
          <li><a href="/topics">话题广场</a></li>
          <li><a href="/ranking">排行榜</a></li>
          <li><a href="/search">搜索</a></li>
          <li><a href="/write">发布帖子</a></li>
        </ul>
      </div>

      <!-- Account -->
      <div class="footer-nav-group">
        <h4 class="footer-nav-title">账号</h4>
        <ul class="footer-nav">
          <li><a href="/login">登录</a></li>
          <li><a href="/login?tab=register">注册</a></li>
          <li><a href="/notifications">消息中心</a></li>
          <li><a href="/forgot-password">找回密码</a></li>
        </ul>
      </div>

      <!-- More -->
      <div class="footer-nav-group">
        <h4 class="footer-nav-title">更多</h4>
        <ul class="footer-nav">
          <li><a href="/rss.xml">RSS 订阅</a></li>
          <li><a href="/sitemap.xml">站点地图</a></li>
          <li>
            <span class="footer-tech-badge">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
              Cloudflare Pages
            </span>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <p class="footer-copy">&copy; 2026 漳淮. All rights reserved.</p>
      <p class="footer-icp">Powered by Astro + Cloudflare Pages + Supabase</p>
    </div>
  </div>
</footer>

  <button class="back-to-top hidden" id="back-to-top" aria-label="回到顶部" title="回到顶部">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
  </button>

  <script>
    // Global auth state
    (window).__USER__ = null;

    // Back to top
    const backToTop = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 400) {
        backToTop?.classList.remove('hidden');
      } else {
        backToTop?.classList.add('hidden');
      }
    }, { passive: true });

    backToTop?.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  

  const SUPABASE_URL = 'https://ofcatgkhtecqsaqhddnm.supabase.co';
  const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9mY2F0Z2todGVjcXNhcWhkZG5tIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzUxNjc5MzMsImV4cCI6MjA5MDc0MzkzM30.4K01U_Zg13rtmhIqazcACd98-ySPWfm0cXA_uNQnxuk';

  let sb = null;
  async function getSupabase() {
    if (sb) return sb;
    const { createClient } = await import('https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm');
    sb = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
    return sb;
  }

  // Elements
  const userInfoEl = document.getElementById('user-info');
  const authButtonsEl = document.getElementById('auth-buttons');
  const avatarEl = document.getElementById('user-avatar');
  const avatarWrapper = document.getElementById('avatar-wrapper');
  const userDropdown = document.getElementById('user-dropdown');
  const btnLogout = document.getElementById('btn-logout');
  const btnNewPost = document.getElementById('btn-new-post');
  const mobileAuth = document.getElementById('mobile-drawer-auth');
  const mobileToggle = document.getElementById('mobile-menu-toggle');
  const mobileDrawer = document.getElementById('mobile-drawer');
  const mobileOverlay = document.getElementById('mobile-overlay');
  const mobileDrawerClose = document.getElementById('mobile-drawer-close');
  const notificationBtn = document.getElementById('notification-btn');
  const notificationPanel = document.getElementById('notification-panel');
  const notificationWrapper = document.getElementById('notification-wrapper');
  const notifBadge = document.getElementById('notif-badge');
  const notifList = document.getElementById('notif-list');
  const btnMarkAll = document.getElementById('btn-mark-all-read');
  const dropdownProfileLink = document.getElementById('dropdown-profile-link');
  const dropdownUsername = document.getElementById('dropdown-username');
  const dropdownEmail = document.getElementById('dropdown-email');
  const dropdownAvatar = document.getElementById('dropdown-avatar');
  const tabProfile = document.getElementById('tab-profile');
  const tabNotif = document.getElementById('tab-notif');
  const tabNotifDot = document.getElementById('tab-notif-dot');
  const tabWrite = document.getElementById('tab-write');

  // Search elements
  const searchInput = document.getElementById('header-search-input');
  const searchDropdown = document.getElementById('search-dropdown');
  const searchClear = document.getElementById('search-clear');
  const searchHistorySection = document.getElementById('search-history-section');
  const searchHistoryList = document.getElementById('search-history-list');
  const btnClearHistory = document.getElementById('btn-clear-history');

  let currentUser = null;
  let unreadCount = 0;

  // ===== Auth =====
  function setUser(user) {
    currentUser = user;
    if (user) {
      authButtonsEl?.classList.add('hidden');
      userInfoEl?.classList.remove('hidden');

      const displayName = user.user_metadata?.display_name || user.user_metadata?.username || user.email?.split('@')[0] || '用户';
      const initial = displayName.charAt(0).toUpperCase();

      if (avatarEl) avatarEl.textContent = initial;
      if (dropdownAvatar) dropdownAvatar.textContent = initial;
      if (dropdownUsername) dropdownUsername.textContent = displayName;
      if (dropdownEmail) dropdownEmail.textContent = user.email || '';

      const uid = user.id;
      if (dropdownProfileLink) (dropdownProfileLink).href = `/user?id=${uid}`;
      if (tabProfile) {
        (tabProfile).href = `/user?id=${uid}`;
        tabProfile.innerHTML = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>${initial}</span>`;
      }

      if (mobileAuth) {
        mobileAuth.innerHTML = `
          <div style="display:flex;align-items:center;gap:10px;padding:4px 0;">
            <div style="width:40px;height:40px;border-radius:50%;background:var(--gradient-primary);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;">${initial}</div>
            <div style="font-weight:600;font-size:15px;">${displayName}</div><div style="font-size:12px;color:var(--text-light);">${user.email || ''}</div></div>
          </div>
        `;
      }

      loadNotifications();
    } else {
      authButtonsEl?.classList.remove('hidden');
      userInfoEl?.classList.add('hidden');
      if (mobileAuth) mobileAuth.innerHTML = '<a href="/login" class="btn btn-primary btn-block">登录 / 注册</a>';
      if (tabProfile) {
        (tabProfile).href = '/login';
        tabProfile.innerHTML = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>我的</span>`;
      }
    }
  }

  async function initAuth() {
    const supabase = await getSupabase();
    const { data: { session } } = await supabase.auth.getSession();
    setUser(session?.user || null);
  }

  initAuth();

  // ===== Dropdowns =====
  avatarWrapper?.addEventListener('click', (e) => {
    e.stopPropagation();
    userDropdown?.classList.toggle('hidden');
    notificationPanel?.classList.add('hidden');
    searchDropdown?.classList.add('hidden');
  });

  notificationBtn?.addEventListener('click', (e) => {
    e.stopPropagation();
    notificationPanel?.classList.toggle('hidden');
    userDropdown?.classList.add('hidden');
    searchDropdown?.classList.add('hidden');
  });

  notificationWrapper?.addEventListener('click', (e) => e.stopPropagation());

  document.addEventListener('click', () => {
    userDropdown?.classList.add('hidden');
    notificationPanel?.classList.add('hidden');
    searchDropdown?.classList.add('hidden');
  });

  // ===== Logout =====
  btnLogout?.addEventListener('click', async () => {
    const supabase = await getSupabase();
    await supabase.auth.signOut();
    setUser(null);
    window.location.href = '/';
  });

  // ===== New post =====
  btnNewPost?.addEventListener('click', () => {
    window.location.href = currentUser ? '/write' : '/login?redirect=/write';
  });

  tabWrite?.addEventListener('click', (e) => {
    if (!currentUser) {
      e.preventDefault();
      window.location.href = '/login?redirect=/write';
    }
  });

  // ===== Mobile drawer =====
  function openDrawer() {
    mobileDrawer?.classList.remove('hidden');
    mobileOverlay?.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  }

  function closeDrawer() {
    mobileDrawer?.classList.add('hidden');
    mobileOverlay?.classList.add('hidden');
    document.body.style.overflow = '';
  }

  mobileToggle?.addEventListener('click', openDrawer);
  mobileDrawerClose?.addEventListener('click', closeDrawer);
  mobileOverlay?.addEventListener('click', closeDrawer);

  // ===== Search =====
  let searchTimeout;

  function getSearchHistory(): string[] {
    try {
      return JSON.parse(localStorage.getItem('zh_search_history') || '[]');
    } catch { return []; }
  }

  function saveSearchHistory(q) {
    let history = getSearchHistory().filter(h => h !== q);
    history.unshift(q);
    history = history.slice(0, 10);
    localStorage.setItem('zh_search_history', JSON.stringify(history));
  }

  function renderSearchHistory() {
    const history = getSearchHistory();
    if (!searchHistoryList || !searchHistorySection) return;
    if (history.length === 0) {
      searchHistorySection.classList.add('hidden');
      return;
    }
    searchHistorySection.classList.remove('hidden');
    searchHistoryList.innerHTML = history.map(h => `
      <div class="history-item" onclick="doSearch('${h.replace(/'/g, "\\'")}')">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        ${h}
      </div>
    `).join('');
  }

  function doSearch(q) {
    if (!q.trim()) return;
    saveSearchHistory(q.trim());
    window.location.href = `/search?q=${encodeURIComponent(q.trim())}`;
  }
  (window).doSearch = doSearch;

  searchInput?.addEventListener('focus', () => {
    renderSearchHistory();
    searchDropdown?.classList.remove('hidden');
  });

  searchInput?.addEventListener('click', (e) => e.stopPropagation());
  searchDropdown?.addEventListener('click', (e) => e.stopPropagation());

  searchInput?.addEventListener('input', () => {
    const q = searchInput.value.trim();
    if (q) {
      searchClear?.classList.remove('hidden');
    } else {
      searchClear?.classList.add('hidden');
    }

    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(async () => {
      if (!q) {
        renderSearchHistory();
        const preview = document.getElementById('search-results-preview');
        if (preview) preview.classList.add('hidden');
        return;
      }
      // Quick results preview
      try {
        const supabase = await getSupabase();
        const { data: posts } = await supabase.from('posts').select('id, title').ilike('title', `%${q}%`).limit(5);
        const preview = document.getElementById('search-results-preview');
        if (preview && posts && posts.length > 0) {
          preview.classList.remove('hidden');
          preview.innerHTML = `
            <hr style="border:none;border-top:1px solid var(--border-color);margin:8px 0;">
            <div style="font-size:12px;font-weight:600;color:var(--text-light);margin-bottom:8px;">帖子</div>
            ${posts.map((p) => `
              <a href="/post?id=${p.id}" class="search-result-item">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
                ${p.title}
              </a>
            `).join('')}
            <a href="/search?q=${encodeURIComponent(q)}" style="display:block;text-align:center;padding:8px;font-size:13px;color:var(--primary);text-decoration:none;margin-top:4px;" onclick="saveSearchHistory('${q.replace(/'/g, "\\'")}')">查看全部结果 →</a>
          `;
        } else if (preview) {
          preview.classList.add('hidden');
        }
      } catch {}
    }, 300);
  });

  searchInput?.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      const q = searchInput.value.trim();
      if (q) doSearch(q);
    }
  });

  searchClear?.addEventListener('click', (e) => {
    e.stopPropagation();
    searchInput.value = '';
    searchClear.classList.add('hidden');
    const preview = document.getElementById('search-results-preview');
    if (preview) preview.classList.add('hidden');
    renderSearchHistory();
    searchInput.focus();
  });

  btnClearHistory?.addEventListener('click', (e) => {
    e.stopPropagation();
    localStorage.removeItem('zh_search_history');
    renderSearchHistory();
  });

  // ===== Notifications =====
  function timeAgo(dateStr) {
    const now = new Date();
    const date = new Date(dateStr);
    const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
    if (diff < 60) return '刚刚';
    if (diff < 3600) return Math.floor(diff / 60) + '分钟前';
    if (diff < 86400) return Math.floor(diff / 3600) + '小时前';
    if (diff < 2592000) return Math.floor(diff / 86400) + '天前';
    return date.toLocaleDateString('zh-CN');
  }

  async function loadNotifications() {
    if (!currentUser) return;
    try {
      const supabase = await getSupabase();
      const { data: notifs } = await supabase
        .from('notifications')
        .select('*')
        .eq('user_id', currentUser.id)
        .order('created_at', { ascending: false })
        .limit(20);

      if (!notifs || notifs.length === 0) {
        if (notifList) notifList.innerHTML = `<div class="notif-empty"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>暂无新通知</p></div>`;
        notifBadge?.classList.add('hidden');
        tabNotifDot?.classList.add('hidden');
        return;
      }

      unreadCount = notifs.filter((n) => !n.read).length;
      if (unreadCount > 0) {
        notifBadge?.classList.remove('hidden');
        notifBadge!.textContent = unreadCount > 99 ? '99+' : String(unreadCount);
        tabNotifDot?.classList.remove('hidden');
      } else {
        notifBadge?.classList.add('hidden');
        tabNotifDot?.classList.add('hidden');
      }

      if (notifList) {
        const iconMap = { like: '❤️', comment: '💬', follow: '👤', system: '📢', reply: '↩️', favorite: '⭐', mention: '@' };
        notifList.innerHTML = notifs.map((n) => {
          const icon = iconMap[n.type] || '📢';
          const typeClass = n.type || 'system';
          const unreadClass = !n.read ? ' unread' : '';
          let link = '';
          if (n.post_id) link = `/post?id=${n.post_id}`;
          else if (n.type === 'follow' && n.from_user_id) link = `/user?id=${n.from_user_id}`;

          const tag = link ? 'a' : 'div';
          const href = link ? ` href="${link}"` : '';
          return `
            <${tag}${href} class="notif-item${unreadClass}" onclick="markNotifRead('${n.id}')">
              <div class="notif-icon ${typeClass}">${icon}</div>
              <div class="notif-body">
                <div class="notif-text">${n.content || ''}</div>
                <div class="notif-time">${timeAgo(n.created_at)}</div>
              </div>
              ${!n.read ? '<div class="notif-dot"></div>' : ''}
            </${tag}>
          `;
        }).join('');
      }
    } catch {}
  }

  async function markNotifRead(notifId) {
    try {
      const supabase = await getSupabase();
      await supabase.from('notifications').update({ read: true }).eq('id', notifId);
      unreadCount = Math.max(0, unreadCount - 1);
      if (unreadCount === 0) {
        notifBadge?.classList.add('hidden');
        tabNotifDot?.classList.add('hidden');
      } else if (notifBadge) {
        notifBadge.textContent = String(unreadCount);
      }
    } catch {}
  }
  (window).markNotifRead = markNotifRead;

  btnMarkAll?.addEventListener('click', async () => {
    if (!currentUser) return;
    try {
      const supabase = await getSupabase();
      await supabase.from('notifications').update({ read: true }).eq('user_id', currentUser.id).eq('read', false);
      unreadCount = 0;
      notifBadge?.classList.add('hidden');
      tabNotifDot?.classList.add('hidden');
      loadNotifications();
    } catch {}
  });

  // Expose globals
  (window).setUser = setUser;
  (window).getCurrentUser = () => currentUser;
  (window).saveSearchHistory = saveSearchHistory;
</script>
  <script src="/scripts/home.js"></script>
</body>
</html>