diff --git a/src/torrentlist.css b/src/torrentlist.css
new file mode 100644
index 0000000..b6fa9d1
--- /dev/null
+++ b/src/torrentlist.css
@@ -0,0 +1,168 @@
+/* 加载状态 */
+.loading-container {
+  height: 16rem; /* 64 x 4 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #f59e0b; /* 橙黄色 */
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* 容器和网格 */
+.torrents-container {
+  padding: 16px;
+  background-color: #f9fafb;
+  min-height: 100vh;
+}
+
+.torrents-grid {
+  display: grid;
+  /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));   */
+  grid-template-columns: repeat(4, 1fr); /* 固定每行4列 */
+  gap: 24px;
+}
+
+.torrents1-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); /* 固定每行4列 */
+  gap: 24px;
+}
+
+
+/* 卡片样式 */
+.torrent-card {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
+}
+
+.torrent-card:hover {
+  box-shadow: 0 6px 16px rgb(0 0 0 / 0.15);
+}
+
+/* 封面区域 */
+.cover {
+  height: 160px;
+  overflow: hidden;
+  background-color: #e5e7eb;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.no-cover {
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+/* 信息区域 */
+.info {
+  padding: 16px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #d97706; /* 橙色 */
+  margin: 0 0 6px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0 0 12px 0;
+  height: 36px; /* 限制两行高度 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.details {
+  font-size: 12px;
+  color: #6b7280;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.details span {
+  white-space: nowrap;
+}
+
+/* 操作按钮 */
+.actions {
+  margin-top: auto;
+  display: flex;
+  gap: 12px;
+}
+
+.btn {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  transition: background-color 0.3s ease;
+  border: none;
+}
+
+.btn-download {
+  background-color: #f97316; /* 明亮橙色 */
+  color: white;
+}
+
+.btn-download:hover {
+  background-color: #ea580c; /* 深橙 */
+}
+
+.btn-detail {
+  background-color: #e5e7eb;
+  color: #374151;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-detail:hover {
+  background-color: #d1d5db;
+}
+
+/* 没有数据提示 */
+.no-data {
+  text-align: center;
+  color: #6b7280;
+  font-size: 18px;
+  margin-top: 80px;
+}
+