change ui

src/styles.css

@@ -258,6 +258,7 @@ button {
 }
 
 .hero-card,
+.section-tabs,
 .content-section,
 .state-panel {
   border: 1px solid var(--panel-border);
@@ -312,6 +313,42 @@ button {
   padding: 24px;
 }
 
+.section-tabs {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.section-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+  padding: 14px 16px;
+  border-radius: 20px;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.58);
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    color 160ms ease,
+    transform 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.section-tab:hover {
+  transform: translateY(-1px);
+}
+
+.section-tab.active {
+  color: var(--text);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.92));
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+}
+
 .section-heading {
   display: flex;
   align-items: center;
@@ -346,11 +383,11 @@ button {
   color: var(--badge-text);
 }
 
-.profile-grid,
-.extension-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 16px;
+.stack-list,
+.bookmark-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
 .profile-card,
@@ -437,12 +474,6 @@ button {
   margin-top: 12px;
 }
 
-.bookmark-list {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
 .state-panel,
 .empty-card {
   display: grid;
@@ -484,11 +515,6 @@ button {
     grid-template-columns: 1fr;
   }
 
-  .profile-grid,
-  .extension-grid {
-    grid-template-columns: 1fr;
-  }
-
   .profile-card,
   .extension-card,
   .bookmark-card {