ui: implement clean dark theme without borders

static/css/style.css

@@ -1,13 +1,13 @@
 :root {
-  --bg: #1a1a1a;
-  --surface: #262626;
-  --surface-hover: #303030;
-  --border: #404040;
-  --text: #e8e8e8;
-  --text-muted: #999999;
-  --link: #4a9eff;
-  --link-hover: #6bb3ff;
-  --link-active: #9966ff;
+  --bg: #0d0d0f;
+  --surface: #101011;
+  --surface-hover: #161618;
+  --border: #222224;
+  --text: #ffffff;
+  --text-muted: #88888a;
+  --link: #ffffff;
+  --link-hover: #dddddd;
+  --link-active: #aaaaaa;
 
   /* fluid typography scale */
   --text-xs: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem);
@@ -66,7 +66,7 @@ body {
 header {
   padding: var(--space-md) var(--space-lg);
   background: var(--surface);
-  border-bottom: 1px solid var(--border);
+  border-bottom: none;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -87,30 +87,37 @@ header {
 }
 
 .logo {
-  font-size: var(--text-lg);
-  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--text);
+  transition: color 0.2s ease;
 }
 
 .logo:hover {
-  color: var(--text);
+  color: var(--link-hover);
+}
+
+.logo-svg {
+  width: 48px;
+  height: 48px;
 }
 
 .nav {
   display: flex;
   gap: var(--space-lg);
-  border-left: 1px solid var(--border);
-  padding-left: var(--space-lg);
 }
 
 .nav a {
   font-size: var(--text-md);
-  color: var(--link);
+  color: var(--text-muted);
   text-decoration: none;
+  transition: color 0.2s ease;
 }
 
 .nav a:hover {
-  text-decoration: underline;
+  color: #ffffff;
+  text-decoration: none;
 }
 
 .header-search-wrapper {
@@ -134,12 +141,11 @@ header {
 
 .search-input:focus {
   outline: none;
-  border-color: var(--link);
+  border-color: var(--text-muted);
 }
 
 .search-input:focus+.search-dropdown {
-  border-color: var(--link);
-  border-top-color: var(--link);
+  /* No borders on active states either */
 }
 
 .search-input::placeholder {
@@ -153,9 +159,8 @@ header {
   left: 0;
   right: 0;
   background: var(--surface);
-  border: 1px solid var(--border);
-  border-top: 1px solid var(--border);
-  margin-top: -1px;
+  border: none;
+  margin-top: 0;
   max-height: clamp(300px, 50vh, 600px);
   overflow-y: auto;
   z-index: 1000;
@@ -278,13 +283,31 @@ a:visited {
 .catalog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--thumb-width), 1fr));
-  gap: var(--space-lg);
+  gap: var(--space-2xl) var(--space-lg);
 }
 
 .catalog-item {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
+  text-decoration: none;
+}
+
+.catalog-item a {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  text-decoration: none;
+  color: inherit;
+}
+
+.catalog-item a:hover {
+  text-decoration: none;
+}
+
+.catalog-item:hover .catalog-title,
+.catalog-item a:hover .catalog-title {
+  color: var(--link-hover);
 }
 
 .catalog-thumb {
@@ -319,6 +342,8 @@ a:visited {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  text-decoration: none;
+  transition: color 0.2s;
 }
 
 /* Loading */
@@ -1041,7 +1066,7 @@ a.htmx-request {
   }
 
   .catalog-grid {
-    gap: var(--space-md);
+    gap: var(--space-xl) var(--space-md);
   }
 
   .anime-hero {
@@ -1122,7 +1147,6 @@ a.htmx-request {
   cursor: pointer;
   font-size: var(--text-base);
   padding: var(--space-sm) var(--space-md);
-  border-radius: 4px 4px 0 0;
   transition: all 0.15s;
 }
 
@@ -1146,13 +1170,12 @@ a.htmx-request {
 .schedule-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 12vw + 80px, 200px), 1fr));
-  gap: var(--space-lg);
+  gap: var(--space-2xl) var(--space-lg);
 }
 
 .schedule-card {
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 4px;
   overflow: hidden;
   transition: border-color 0.15s, transform 0.15s;
   text-decoration: none;
@@ -1211,7 +1234,6 @@ a.htmx-request {
 .schedule-card-meta span {
   background: var(--surface-hover);
   padding: 2px 6px;
-  border-radius: 3px;
 }
 
 .schedule-time {
@@ -1273,7 +1295,6 @@ a.htmx-request {
 .notification-card {
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 4px;
   overflow: hidden;
   transition: border-color 0.15s, transform 0.15s;
   display: flex;
@@ -1339,7 +1360,6 @@ a.htmx-request {
 .notification-meta span {
   background: var(--surface-hover);
   padding: 2px 6px;
-  border-radius: 3px;
 }
 
 .notification-broadcast {