/* 壁纸站样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --主色: #4F5BFF;
  --主色暗: #3730A3;
  --背景: #f6f7fb;
  --卡片: #ffffff;
  --文字: #1e293b;
  --次要: #64748b;
  --边框: #e2e8f0;
  --顶栏背景: rgba(255, 255, 255, 0.85);
  --筛选背景: rgba(246, 247, 251, 0.92);
  --阴影: rgba(15, 23, 42, 0.10);
  --图底: #e8ecf3;
}
:root[data-theme="dark"] {
  --背景: #0f172a;
  --卡片: #1e293b;
  --文字: #e2e8f0;
  --次要: #94a3b8;
  --边框: #334155;
  --顶栏背景: rgba(15, 23, 42, 0.9);
  --筛选背景: rgba(15, 23, 42, 0.94);
  --阴影: rgba(0, 0, 0, 0.4);
  --图底: #0b1220;
}
html, body {
  background: var(--背景);
  color: var(--文字);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
}

/* 顶栏 */
.顶栏 {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  background: var(--顶栏背景);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--边框);
}
.品牌 { font-size: 20px; font-weight: 700; white-space: nowrap; }
.搜索框 {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px;
  background: var(--卡片); border: 1px solid var(--边框); border-radius: 999px;
  padding: 8px 16px;
}
.搜索框 input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--文字); font-size: 14px;
}
.搜索框 input::placeholder { color: var(--次要); opacity: .8; }
.用户区 { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.用户区 .昵称 { font-size: 14px; color: var(--次要); }
.按钮 {
  border: 1px solid var(--边框); background: var(--卡片); color: var(--文字);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 14px;
  transition: all .15s;
}
.按钮:hover { border-color: var(--主色); color: var(--主色); }
.按钮.主 { background: var(--主色); border-color: var(--主色); color: #fff; }
.按钮.主:hover { background: var(--主色暗); color: #fff; }

/* 筛选栏 */
.筛选栏 {
  position: sticky; top: 60px; z-index: 10;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 24px; background: var(--筛选背景);
  border-bottom: 1px solid var(--边框);
}
.筛选组 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.筛选组 label { font-size: 13px; color: var(--次要); white-space: nowrap; }
.筛选片 {
  border: 1px solid var(--边框); background: var(--卡片); color: var(--次要);
  padding: 5px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  transition: all .15s; user-select: none;
}
.筛选片:hover { color: var(--主色); border-color: var(--主色); }
.筛选片.当前 { background: var(--主色); border-color: var(--主色); color: #fff; }

/* 筛选栏收起 / 展开 */
.筛选内容 { display: flex; flex-direction: column; gap: 10px; }
.筛选栏.收起 .筛选内容 { display: none; }
.筛选收起 {
  align-self: flex-start;
  border: 1px solid var(--边框); background: var(--卡片); color: var(--次要);
  padding: 5px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  transition: all .15s; user-select: none;
}
.筛选收起:hover { color: var(--主色); border-color: var(--主色); }
.统计行 { font-size: 13px; color: var(--次要); margin-bottom: 14px; }

/* 网格 */
.主体 { padding: 18px 24px 60px; }
.壁纸网格 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.壁纸卡 {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--卡片); cursor: pointer;
  border: 1px solid var(--边框); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.壁纸卡:hover { transform: translateY(-3px); box-shadow: 0 14px 32px var(--阴影); border-color: var(--主色); }
.壁纸卡 img, .壁纸卡 video {
  width: 100%; height: 190px; object-fit: cover; display: block;
  background: var(--图底);
}
.壁纸卡 img.竖图 { object-fit: contain; }
.壁纸卡动态 {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(37, 99, 235, 0.88); color: #fff;
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  pointer-events: none;
}
.壁纸卡信息 { padding: 12px 12px 13px; }
.壁纸卡名称 { font-size: 13px; color: var(--文字); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.壁纸卡元数据 { font-size: 12px; color: var(--次要); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.壁纸卡收藏 {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: none; cursor: pointer;
  font-size: 16px; color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.壁纸卡收藏:hover { background: rgba(0,0,0,.7); }
.壁纸卡收藏.已收藏 { color: #fb7185; background: rgba(0,0,0,.55); }

/* 空状态 */
.空状态 { text-align: center; padding: 80px 0; color: var(--次要); }
.空状态图标 { font-size: 56px; margin-bottom: 16px; }
.空状态 > div:nth-child(2) { font-size: 16px; }

/* 预览弹窗 */
.预览遮罩 {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(0, 0, 0, 0.82); padding: 40px 20px; overflow-y: auto;
}
.预览遮罩.显示 { display: flex; }
.预览卡片 {
  position: relative; max-width: 1100px; width: 100%;
  background: var(--卡片); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--边框);
}
.预览关闭 {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: none; color: #fff; cursor: pointer; font-size: 18px;
}
.预览关闭:hover { background: rgba(0,0,0,.8); }
.预览卡片 img { width: 100%; display: block; background: var(--图底); max-height: 78vh; object-fit: contain; }
.预览卡片 video { width: 100%; display: block; background: #000; max-height: 78vh; }
.预览信息 { padding: 16px 20px; }
.预览标题 { font-size: 16px; font-weight: 600; }
.预览元数据 { font-size: 13px; color: var(--次要); margin-top: 6px; }
.预览操作 { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.预览按钮 {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--边框); background: var(--卡片); color: var(--文字);
  padding: 9px 18px; border-radius: 10px; cursor: pointer; font-size: 14px; text-decoration: none;
  transition: all .15s;
}
.预览按钮:hover { border-color: var(--主色); color: var(--主色); }
.预览按钮.主 { background: var(--主色); border-color: var(--主色); color: #fff; }
.预览按钮.主:hover { background: var(--主色暗); color: #fff; }
.预览按钮.已收藏 { border-color: #fb7185; color: #fb7185; }

@media (max-width: 640px) {
  .顶栏 { flex-wrap: wrap; gap: 10px; }
  .搜索框 { order: 3; flex-basis: 100%; max-width: none; }
  .壁纸网格 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .壁纸卡 img, .壁纸卡 video { height: 130px; }
}

/* 分页栏 */
.分页栏 {
  position: sticky; bottom: 16px; z-index: 15;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 28px auto 0; padding: 10px 14px;
  background: var(--顶栏背景); backdrop-filter: blur(12px);
  border: 1px solid var(--边框); border-radius: 999px;
  box-shadow: 0 8px 24px var(--阴影);
}
.分页按钮 {
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--边框); background: var(--卡片); color: var(--文字);
  border-radius: 999px; cursor: pointer; font-size: 14px; transition: all .15s;
}
.分页按钮:hover:not(:disabled):not(.当前) { border-color: var(--主色); color: var(--主色); }
.分页按钮.当前 { background: var(--主色); border-color: var(--主色); color: #fff; cursor: default; }
.分页按钮:disabled { opacity: .4; cursor: default; }
.分页省略 { color: var(--次要); padding: 0 4px; align-self: center; }
.分页跳转 { display: inline-flex; align-items: center; gap: 6px; color: var(--次要); font-size: 13px; }
.分页跳转 input {
  width: 56px; height: 34px; text-align: center;
  border: 1px solid var(--边框); border-radius: 8px; background: var(--卡片);
  color: var(--文字); font-size: 14px; outline: none;
}
.分页跳转 input:focus { border-color: var(--主色); }
.分页确定 { height: 34px; padding: 0 14px; }

@media (max-width: 640px) {
  .分页栏 { padding: 8px 10px; gap: 6px; bottom: 10px; }
  .分页按钮 { min-width: 34px; height: 34px; }
  .分页跳转 input { width: 48px; }
}

/* ===== WhyKaiX 品牌标识 ===== */
.品牌 { display: inline-flex; align-items: center; gap: 8px; }
.品牌图标 { width: 28px; height: 28px; border-radius: 8px; display: block; }