哈哈

static/css/style.css

@@ -73,6 +73,18 @@ body {
     gap: 0.75rem;
 }
 
+.site-logo-link {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+}
+
+.site-logo {
+    display: block;
+    width: clamp(168px, 24vw, 240px);
+    height: auto;
+}
+
 .logo {
     font-family: var(--font-mono);
     font-size: 1.5rem;
@@ -117,24 +129,34 @@ body {
     align-items: center;
     gap: 0.25rem;
     margin-right: 0.5rem;
-    font-size: 0.9rem;
+    font-size: 0.875rem;
+    background: var(--bg-elevated);
+    padding: 0.25rem;
+    border-radius: 6px;
+    border: 1px solid var(--border);
 }
 .lang-switch a {
-    color: var(--accent);
+    color: var(--text-muted);
     text-decoration: none;
-    padding: 0.2rem 0.4rem;
+    padding: 0.3rem 0.6rem;
     border-radius: 4px;
+    transition: var(--transition);
+    font-weight: 500;
 }
 .lang-switch a:hover {
-    background: var(--accent-glow);
+    color: var(--accent);
+    background: var(--bg-card);
 }
 .lang-switch a.active {
     font-weight: 600;
     color: var(--text);
+    background: var(--bg-card);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 .lang-sep {
-    color: var(--text-muted);
+    color: var(--border);
     user-select: none;
+    font-weight: 300;
 }
 
 .nav-link-with-badge {
@@ -181,13 +203,13 @@ body {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow);
     transition: var(--transition);
 }
 
 .filters:hover {
     border-color: var(--border-hover);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--shadow-lg);
 }
 
 .filter-group {
@@ -378,6 +400,21 @@ body {
     color: var(--text-muted);
 }
 
+/* 加载动画 */
+.loading-spinner {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
 .footer {
     margin-top: auto;
     padding: 1rem 1.5rem;
@@ -462,12 +499,13 @@ body {
 
 @media (max-width: 768px) {
     .header {
-        padding: 1.5rem 1rem;
+        padding: 1rem;
     }
 
     .header-inner {
         flex-direction: column;
         align-items: flex-start;
+        gap: 0.75rem;
     }
 
     .header-brand {
@@ -478,10 +516,29 @@ body {
     .header-nav {
         width: 100%;
         justify-content: flex-start;
+        font-size: 0.85rem;
+        gap: 0.5rem;
+    }
+
+    .lang-switch {
+        font-size: 0.8rem;
+        padding: 0.2rem;
+    }
+
+    .lang-switch a {
+        padding: 0.25rem 0.5rem;
     }
 
     .logo {
-        font-size: 1.5rem;
+        font-size: 1.25rem;
+    }
+
+    .site-logo {
+        width: clamp(148px, 44vw, 210px);
+    }
+
+    .tagline {
+        font-size: 0.8rem;
     }
 
     .filters {
@@ -490,6 +547,14 @@ body {
         padding: 1rem;
     }
 
+    .filter-group {
+        min-width: 100%;
+    }
+
+    .filter-group select {
+        width: 100%;
+    }
+
     .btn-reset {
         margin-left: 0;
         width: 100%;
@@ -543,7 +608,7 @@ html {
 }
 
 .filter-group-search input {
-    font-family: var(--font-mono);
+    font-family: var(--font-sans);
     font-size: 0.9rem;
     padding: 0.5rem 0.75rem;
     width: 100%;
@@ -554,6 +619,10 @@ html {
     transition: var(--transition);
 }
 
+.filter-group-search input:hover {
+    border-color: var(--accent);
+}
+
 .filter-group-search input:focus {
     outline: none;
     border-color: var(--accent);
@@ -562,6 +631,7 @@ html {
 
 .filter-group-search input::placeholder {
     color: var(--text-muted);
+    opacity: 0.7;
 }
 
 /* 可排序表头 */