/* Windows 11 风格 · 磨砂玻璃 · 半透明 · 简约大方（顶部永久固定版 + 搜索） */
:root {
  --bg: #eef1f6;
  --fg: #1f2530;
  --muted: #6b7280;
  --accent: #4f6bed;

  --glass: rgba(255, 255, 255, 0.55);
  --glass-hover: rgba(255, 255, 255, 0.68);
  --border: rgba(17, 25, 40, 0.12);
  --shadow: 0 10px 30px rgba(17, 25, 40, 0.12);

  --blur: 12px;
  --blur-hover: 14px;

  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --radius-s: 14px;
  --radius-m: 18px;

  --top-header: 76px;         /* 头部高度（有搜索与Logo稍高） */
  --top-category: 76px;       /* 头部之后 */
  --top-subcategory: 120px;   /* 头部+一级分类 */
  --sticky-offset: 156px;     /* 头部+一级+二级+额外间距 */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: radial-gradient(800px 400px at 10% -10%, rgba(255,255,255,0.8), rgba(255,255,255,0)),
                    radial-gradient(800px 400px at 90% 0%, rgba(79,107,237,0.06), rgba(79,107,237,0));
}

/* 顶部固定区域（永远在最上方） */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0; width: 100%;
  z-index: 1000;
  padding: var(--space-m) var(--space-m);
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.05);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); max-width: 1200px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: var(--space-m); }
.site-logo { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.85); object-fit: cover; }
.site-title { margin: 0; font-size: clamp(20px, 3vw, 26px); letter-spacing: .2px; }
.site-subtitle { margin: 4px 0 0; color: var(--muted); font-size: clamp(13px, 2.2vw, 15px); }

/* 搜索框 */
.search { position: relative; display: flex; align-items: center; gap: 6px; }
.search-input {
  width: min(52vw, 420px);
  padding: 10px 36px 10px 12px;
  border-radius: 999px;
  outline: none;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--fg);
  backdrop-filter: blur(var(--blur));
  transition: all .2s ease;
}
.search-input:focus { border-color: rgba(79,107,237,.45); background: var(--glass-hover); }
.search-clear {
  position: absolute; right: 6px; height: 28px; width: 28px;
  border: 1px solid var(--border); border-radius: 50%; background: var(--glass);
  cursor: pointer; color: var(--muted);
}
.search-clear:hover { background: var(--glass-hover); color: var(--fg); }

/* 一级分类栏（固定） */
.category-bar, #categoryBar {
  position: fixed;
  top: var(--top-category);
  left: 0; right: 0; width: 100%;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  padding: var(--space-m);
  border-bottom: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
}
.category-item { padding: 10px 14px; border: 1px solid var(--border); background: var(--glass); border-radius: 999px; cursor: pointer; transition: all .2s ease; color: var(--fg); user-select: none; }
.category-item:hover { background: var(--glass-hover); backdrop-filter: blur(var(--blur-hover)); border-color: rgba(79,107,237,.28); }
.category-item.active { background: rgba(79,107,237,.18); border-color: rgba(79,107,237,.36); }

/* 二级分类栏（固定） */
.subcategory-panel, #subcategoryPanel {
  position: fixed;
  top: var(--top-subcategory);
  left: 0; right: 0; width: 100%;
  z-index: 998;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.subcategory-item { padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; background: var(--glass); color: var(--fg); transition: all .2s ease; }
.subcategory-item:hover { background: var(--glass-hover); backdrop-filter: blur(var(--blur-hover)); border-color: rgba(79,107,237,.28); }
.subcategory-item.active { background: rgba(79,107,237,.18); border-color: rgba(79,107,237,.36); }
.subcategory-empty { color: var(--muted); padding: 6px 10px; }

/* 搜索结果面板（贴合搜索框下方显示） */
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: 60vh;
  overflow: auto;
  padding: 6px 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  z-index: 1001;
}
.search-results[hidden] { display: none; }
.search-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-top: 1px solid var(--border); }
.search-item:first-child { border-top: none; }
.search-item:hover, .search-item.active { background: rgba(255, 255, 255, 0.98); }
.search-item .title { font-weight: 600; color: var(--fg); }
.search-item .pill { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(79,107,237,.18); border: 1px solid rgba(79,107,237,.36); color: #2b3a8c; display:inline-flex; align-items:center; gap:6px; }
.search-item .pill-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.search-item .pill.pill--logo { background: transparent; border: none; padding: 0; color: inherit; }
.search-item .meta { color: var(--muted); font-size: 12px; margin-left: auto; }

/* 搜索结果悬浮提示 */
.search-tooltip {
  position: fixed;
  max-width: 520px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  z-index: 9999;
  pointer-events: none; /* 仅展示，不拦截鼠标 */
}


/* 内容区域：为固定顶栏预留空间 */
.content, #content { padding: calc(var(--sticky-offset) + var(--space-m)) var(--space-m) calc(var(--space-l) * 1.5); }
.section { scroll-margin-top: var(--sticky-offset); margin: var(--space-l) 0; }
.section-title { margin-bottom: var(--space-m); }
.section-title h2, .section-title h3 { margin: 0; }
.section-title p { margin: 6px 0 0; color: var(--muted); }

.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-l); }

/* 卡片：Windows 11 Acrylic */
.card { position: relative; background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(1.08); border: 1px solid var(--border); border-radius: var(--radius-s); padding: var(--space-m); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, backdrop-filter .2s ease, background-color .2s ease; cursor: pointer; }
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(17,25,40,.16); border-color: rgba(79,107,237,.32); background: var(--glass-hover); backdrop-filter: blur(var(--blur-hover)) saturate(1.08); }
.card.highlight { outline: 2px solid rgba(79,107,237,.6); animation: focusGlow 1.6s ease; }
@keyframes focusGlow { 0% { box-shadow: 0 0 0 0 rgba(79,107,237,.35);} 60% { box-shadow: 0 0 0 10px rgba(79,107,237,.0);} 100% { box-shadow: 0 0 0 0 rgba(79,107,237,.0);} }
.card-head { display: flex; align-items: center; gap: var(--space-s); }
.card-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.8); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); }
.card-icon img { width: 100%; height: 100%; object-fit: cover; }
.card-title { font-size: clamp(15px, 2.4vw, 18px); font-weight: 600; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-decoration-color: rgba(79,107,237,.6); }
.card-desc { margin-top: 8px; font-size: clamp(14px, 2.2vw, 15px); color: var(--muted); }

/* 分类/子类区域高亮，用于搜索跳转 */
.section.highlight { outline: 2px solid rgba(79,107,237,.6); animation: focusGlow 1.6s ease; border-radius: var(--radius-s); }
.section-title.highlight { background: rgba(79,107,237,.12); border-radius: var(--radius-s); }

/* 让卡片滚动时预留固定头部空间，避免被二级分类遮挡 */
.card { scroll-margin-top: var(--sticky-offset); }

/* 页脚 */
.site-footer { padding: var(--space-m); text-align: center; color: var(--muted); border-top: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(var(--blur)); }

/* 全局背景图（覆盖默认渐变），自适应窗口并固定 */
/* body {
  background: url('https://pic1.imgdb.cn/item/68f1bf07c5157e1a887ac2b1.png') center center / cover no-repeat fixed;
} */

/* 移动端：分类条单行横向滚动 */
@media (max-width: 900px) {
  .category-bar, #categoryBar,
  .subcategory-panel, #subcategoryPanel {
    display: flex;
    flex-wrap: nowrap;           /* 单行，不换行 */
    overflow-x: auto;            /* 横向滚动 */
    overflow-y: hidden;          /* 禁止纵向撑高 */
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
    gap: var(--space-s);
  }
  .category-item, .subcategory-item {
    flex: 0 0 auto;              /* 保持为固定宽度项，便于横向滚动 */
    white-space: nowrap;         /* 文本不换行，避免增高 */
  }
}

/* 响应式 */
@media (max-width: 900px) { .search-input { width: min(58vw, 360px); } }
@media (max-width: 620px) { .header-inner { flex-direction: column; align-items: stretch; gap: 10px; } .search-input { width: 100%; } }