new design

packages/frontend/src/components/Sidebar.css

@@ -2,16 +2,20 @@
 
 .sidebar {
   width: var(--sidebar-width);
-  background: var(--bg-surface);
-  border-right: 1px solid var(--border);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
+    rgba(28, 25, 42, 0.82);
+  backdrop-filter: blur(20px) saturate(160%);
+  border-right: 1px solid rgba(255, 255, 255, 0.07);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   flex-shrink: 0;
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
 }
 
 .sidebar-header {
-  padding: 20px 16px 12px;
+  padding: var(--sp-5) var(--sp-4) var(--sp-3);
   border-bottom: 1px solid var(--border);
   text-align: center;
 }
@@ -20,7 +24,7 @@
   font-size: 24px;
   font-weight: 700;
   color: var(--text);
-  letter-spacing: -0.3px;
+  letter-spacing: -0.03em;
   text-decoration: none;
   display: inline-block;
   transition: color 0.15s ease;
@@ -32,28 +36,31 @@
 }
 
 .btn-new {
-  margin: 12px;
+  margin: var(--sp-3);
   padding: 10px 14px;
   background: var(--accent);
-  color: #fff;
+  color: #1a141f;
   border: none;
   border-radius: var(--radius);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.15s;
+  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
   text-align: left;
+  box-shadow: 0 8px 24px rgba(232, 168, 124, 0.18);
 }
 
 .btn-new:hover {
   background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 12px 30px rgba(232, 168, 124, 0.22);
 }
 
 .sidebar-section-label {
   padding: 8px 16px 4px;
   font-size: 11px;
   font-weight: 600;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-dim);
 }
@@ -76,21 +83,27 @@
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
-  border-radius: var(--radius-sm);
+  border-radius: 10px;
   cursor: pointer;
   color: var(--text-muted);
   font-size: 13px;
-  transition: background 0.1s, color 0.1s;
+  border: 1px solid transparent;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
   user-select: none;
 }
 
 .sidebar-item:hover {
-  background: var(--bg-surface-2);
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.06);
   color: var(--text);
+  transform: translateX(1px);
 }
 
 .sidebar-item.selected {
-  background: var(--accent-dim);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
+    rgba(232, 168, 124, 0.12);
+  border-color: rgba(232, 168, 124, 0.22);
   color: var(--text);
 }
 
@@ -129,7 +142,7 @@
   font-size: 10px;
   font-weight: 600;
   padding: 2px 5px;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -163,4 +176,13 @@
 
 .sidebar-item-delete:hover {
   color: var(--red);
-}
+}
+
+@media (max-width: 720px) {
+  .sidebar {
+    width: 100%;
+    max-height: 42vh;
+    border-right: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  }
+}