:root {
  --bg: #f6f8fa; --card: #fff; --text: #222;
  --cate: #3b82f6; --hover: #eff6ff; --radius: 12px;
}
[data-theme="dark"] {
  --bg: #151515; --card: #252525; --text: #eee;
  --cate: #518cf0; --hover: #333;
}
* {margin:0;padding:0;box-sizing:border-box;font-family:system-ui}
body {background:var(--bg);color:var(--text);transition:all 0.3s}
.container {max-width:1000px;margin:0 auto;padding:20px}

/* 加载动画 */
.loading {
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;transition:opacity 0.5s;
}
.loader {width:50px;height:50px;border:4px solid var(--hover);
  border-top-color:var(--cate);border-radius:50%;animation:spin 0.6s infinite linear;
}
@keyframes spin {to{transform:rotate(360deg)}}

/* 主题按钮 */
.theme-btn {
  position:fixed;top:20px;right:20px;width:44px;height:44px;
  border-radius:50%;border:none;background:var(--card);
  color:var(--text);font-size:20px;cursor:pointer;
  box-shadow:0 4px 12px #0001;transition:0.2s
}
.theme-btn:active{transform:scale(0.9)}

.title{animation:fadeIn 0.8s forwards}
.search-box{display:flex;justify-content:center;margin:16px 0;animation:fadeIn 0.9s forwards}
.search-box input{
  width:100%;max-width:500px;padding:14px 18px;
  border:none;border-radius:var(--radius);
  background:var(--card);color:var(--text);
  box-shadow:0 4px 12px #0001;outline:none
}
.stats{text-align:center;font-size:14px;color:#888;margin-bottom:12px}

/* 分类 */
.cate-list{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-bottom:24px;animation:fadeIn 1s forwards
}
.cate{
  padding:9px 16px;background:var(--card);
  border-radius:99px;cursor:pointer;transition:0.2s
}
.cate.active{background:var(--cate);color:#fff}
.cate:hover{transform:translateY(-2px)}

/* 网格+Logo+动画 */
.link-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;animation:fadeIn 1.1s forwards
}
.link-item{
  background:var(--card);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;align-items:center;
  gap:8px;cursor:pointer;transition:0.2s;
  opacity:0;transform:translateY(10px);animation:fadeUp 0.5s forwards
}
.link-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0001}
.link-logo{width:42px;height:42px;border-radius:8px;object-fit:cover}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.admin-btn{text-align:center;margin-top:30px}
.admin-btn a{color:var(--cate);text-decoration:none}
.login-box,.item{background:var(--card);border-radius:var(--radius)}
input,select,button{padding:9px;border-radius:8px;border:none;background:var(--card);color:var(--text)}
button{background:var(--cate);color:#fff;cursor:pointer}