style(ui): refine changelog changes toggle stylingstyle(ui): refine changelog changes toggle styling

src/pages/changelog.astro

@@ -1475,77 +1475,81 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   }
   
   .changes-title {
-    font-size: 0.82rem;
-    font-weight: 500;
+    font-size: 0.95rem;
+    font-weight: 800;
     text-transform: uppercase;
     margin-bottom: var(--space-sm);
-    color: var(--color-text-tertiary);
+    color: var(--color-text);
     font-family: var(--font-mono);
-    letter-spacing: 0.12em;
+    letter-spacing: 0.06em;
   }
 
   .changes-toggle {
-    display: flex;
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-flex;
     align-items: center;
-    width: 100%;
+    justify-content: space-between;
+    gap: var(--space-md);
+    min-width: min(100%, 18rem);
     max-width: 100%;
     margin-bottom: 0;
-    padding: 0;
-    border: none;
-    background: none;
+    padding: 0.75rem 0.95rem;
+    border: 1px solid var(--color-border);
+    border-left: 3px solid var(--color-accent);
+    border-radius: 0;
+    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-secondary) 100%);
+    box-shadow: none;
     cursor: pointer;
     text-align: left;
-    color: var(--color-text-tertiary);
-    font-family: var(--font-mono);
-    font-size: 0.82rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    transition: color 0.2s ease;
+    color: var(--color-text);
+    font: inherit;
+    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
   }
 
   .changes-toggle:hover {
-    color: var(--color-text-secondary);
+    border-color: var(--color-accent);
+    background: var(--color-bg-elevated);
+    transform: translateX(3px);
   }
 
   .changes-toggle:focus-visible {
-    outline: 1px solid var(--color-accent);
-    outline-offset: 4px;
+    outline: 2px solid var(--color-accent);
+    outline-offset: 3px;
   }
 
   .changes-toggle-main {
     display: inline-flex;
     align-items: center;
-    gap: 0.4rem;
+    gap: 0.55rem;
     min-width: 0;
   }
 
   .changes-toggle-meta {
     display: inline-flex;
     align-items: center;
-    gap: 0.4rem;
-    margin-left: 0.5rem;
+    gap: 0.55rem;
+    margin-left: auto;
     flex-shrink: 0;
-    color: inherit;
-    opacity: 0.5;
+    color: var(--color-accent);
   }
 
   .changes-count {
-    color: inherit;
-    font-size: 0.78rem;
+    color: var(--color-text-secondary);
+    font-size: 0.8rem;
     letter-spacing: 0.04em;
   }
 
   .changes-chevron {
     display: inline-block;
-    font-size: 0.75rem;
+    color: var(--color-accent);
+    font-size: 0.85rem;
     line-height: 1;
     transition: transform 0.15s ease;
   }
   
   .changes-icon {
-    font-size: 0.9rem;
-    opacity: 0.7;
+    font-size: 1rem;
   }
   
   .changes-list {