@dfosco/storyboard-react 4.0.0-beta.41 → 4.0.0-beta.42

package/src/Viewfinder.module.css

@@ -5,8 +5,8 @@
   flex-direction: column;
   height: calc(100vh - var(--sb-branch-bar-height, 0px));
   font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  color: #1a1a1a;
-  background: #fafafa;
+  color: var(--fgColor-default, #1a1a1a);
+  background: var(--bgColor-inset, #fafafa);
 }
 
 /* ─── Full-width header ─── */
@@ -16,8 +16,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 24px;
-  border-bottom: 1px solid #e5e5e5;
-  background: #fff;
+  border-bottom: 1px solid var(--borderColor-default, #e5e5e5);
+  background: var(--bgColor-default, #fff);
   flex-shrink: 0;
 }
 
@@ -30,13 +30,13 @@
 .logo {
   width: 48px;
   height: 48px;
-  background: #313131;
+  background: var(--bgColor-emphasis, #313131);
   border-radius: 8px;
   transform: rotate(-1deg);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  color: var(--fgColor-onEmphasis, #fff);
   flex-shrink: 0;
 }
 
@@ -44,13 +44,13 @@
   font-size: 24px;
   /* font-style: italic; */
   font-weight: 900;
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
   line-height: 1.1;
 }
 
 .appSubtitle {
   font-size: 16px;
-  color: #888;
+  color: var(--fgColor-muted, #888);
   line-height: 1.3;
   margin-top: 4px;
 }
@@ -66,8 +66,8 @@
   align-items: center;
   gap: 6px;
   padding: 8px 20px;
-  background: #1a1a1a;
-  color: #fff;
+  background: var(--bgColor-emphasis, #1a1a1a);
+  color: var(--fgColor-onEmphasis, #fff);
   border: none;
   border-radius: 8px;
   font-size: 16px;
@@ -77,7 +77,7 @@
 }
 
 .createBtn:hover {
-  background: #333;
+  background: var(--bgColor-emphasis, #333);
 }
 
 /* Branch dropdown */
@@ -87,9 +87,9 @@
   align-items: center;
   gap: 6px;
   padding: 7px 14px;
-  background: #fff;
-  color: #555;
-  border: 1px solid #e5e5e5;
+  background: var(--bgColor-default, #fff);
+  color: var(--fgColor-muted, #555);
+  border: 1px solid var(--borderColor-default, #e5e5e5);
   border-radius: 8px;
   font-size: 16px;
   font-weight: 500;
@@ -99,8 +99,8 @@
 }
 
 .branchBtn:hover {
-  background: #f5f5f5;
-  border-color: #ccc;
+  background: var(--bgColor-muted, #f5f5f5);
+  border-color: var(--borderColor-muted);
 }
 
 .branchBtnText {
@@ -115,8 +115,8 @@
 }
 
 .branchPopup {
-  background: #fff;
-  border: 1px solid #e5e5e5;
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, #e5e5e5);
   border-radius: 10px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   min-width: 240px;
@@ -129,7 +129,7 @@
   padding: 8px 14px 4px;
   font-size: 14px;
   font-weight: 600;
-  color: #999;
+  color: var(--fgColor-muted, #999);
   text-transform: uppercase;
   letter-spacing: 0.4px;
 }
@@ -140,7 +140,7 @@
   gap: 8px;
   padding: 7px 14px;
   font-size: 16px;
-  color: #555;
+  color: var(--fgColor-muted, #555);
   cursor: pointer;
   transition: background 0.1s;
   border: none;
@@ -151,18 +151,18 @@
 
 .branchItem:hover,
 .branchItem[data-highlighted] {
-  background: #f5f5f5;
+  background: var(--bgColor-muted, #f5f5f5);
 }
 
 .branchItemActive {
   composes: branchItem;
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
   font-weight: 600;
 }
 
 .branchSeparator {
   height: 1px;
-  background: #e5e5e5;
+  background: var(--borderColor-default, #e5e5e5);
   margin: 4px 10px;
 }
 
@@ -176,7 +176,7 @@
   width: 100%;
   padding: 8px 14px;
   font-size: 16px;
-  color: #2563eb;
+  color: var(--fgColor-accent, #2563eb);
   background: none;
   border: none;
   cursor: pointer;
@@ -185,7 +185,7 @@
 }
 
 .branchShowAll:hover {
-  background: #f5f5f5;
+  background: var(--bgColor-muted, #f5f5f5);
 }
 
 /* ─── Body: sidebar + content ─── */
@@ -201,8 +201,8 @@
 .sidebar {
   width: 260px;
   min-width: 220px;
-  background: #fff;
-  border-right: 1px solid #e5e5e5;
+  background: var(--bgColor-default, #fff);
+  border-right: 1px solid var(--borderColor-default, #e5e5e5);
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -228,7 +228,7 @@
   border-radius: 6px;
   font-size: 16px;
   font-weight: 500;
-  color: #555;
+  color: var(--fgColor-muted, #555);
   cursor: pointer;
   border: none;
   background: none;
@@ -238,13 +238,13 @@
 }
 
 .navItem:hover {
-  background: #f5f5f5;
+  background: var(--bgColor-muted, #f5f5f5);
 }
 
 .navItemActive {
   composes: navItem;
-  background: #f0f0f0;
-  color: #1a1a1a;
+  background: var(--bgColor-neutral-muted, #f0f0f0);
+  color: var(--fgColor-default, #1a1a1a);
   font-weight: 600;
 }
 
@@ -265,7 +265,7 @@
 .navCount {
   margin-left: auto;
   font-size: 14px;
-  color: #aaa;
+  color: var(--fgColor-muted);
   font-weight: 500;
 }
 
@@ -273,7 +273,7 @@
 
 .separator {
   height: 1px;
-  background: #e5e5e5;
+  background: var(--borderColor-default, #e5e5e5);
   margin: 8px 16px;
 }
 
@@ -281,9 +281,9 @@
 
 .sectionLabel {
   padding: 8px 20px 4px;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
-  color: #999;
+  color: var(--fgColor-muted, #999);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -294,7 +294,7 @@
   gap: 8px;
   padding: 6px 20px;
   font-size: 16px;
-  color: #555;
+  color: var(--fgColor-muted, #555);
   cursor: pointer;
   transition: background 0.1s;
   text-decoration: none;
@@ -302,18 +302,18 @@
 
 .starredItem:link,
 .starredItem:visited {
-  color: #555;
+  color: var(--fgColor-muted, #555);
   text-decoration: none;
 }
 
 .starredItem:hover {
-  background: #f5f5f5;
+  background: var(--bgColor-muted, #f5f5f5);
 }
 
 .starredEmpty {
   padding: 6px 20px;
   font-size: 14px;
-  color: #bbb;
+  color: var(--fgColor-muted);
   font-style: italic;
 }
 
@@ -331,7 +331,7 @@
 
 .sidebarFooter {
   flex-shrink: 0;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid var(--borderColor-default, #e5e5e5);
   padding: 12px;
 }
 
@@ -339,24 +339,24 @@
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: #f0f0f0;
+  background: var(--bgColor-neutral-muted, #f0f0f0);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
-  color: #888;
+  color: var(--fgColor-muted, #888);
   flex-shrink: 0;
 }
 
 .userName {
   font-size: 16px;
   font-weight: 500;
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 .userSub {
   font-size: 14px;
-  color: #999;
+  color: var(--fgColor-muted, #999);
 }
 
 .loginBtn {
@@ -366,18 +366,18 @@
   width: 100%;
   padding: 8px 10px;
   background: none;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--borderColor-default, #e5e5e5);
   border-radius: 8px;
   font-size: 16px;
-  color: #555;
+  color: var(--fgColor-muted, #555);
   cursor: pointer;
   transition: all 0.15s;
   text-align: left;
 }
 
 .loginBtn:hover {
-  background: #f5f5f5;
-  border-color: #ccc;
+  background: var(--bgColor-muted, #f5f5f5);
+  border-color: var(--borderColor-muted);
 }
 
 /* ─── Main Content ─── */
@@ -396,15 +396,15 @@
   align-items: center;
   gap: 0;
   padding: 0 32px;
-  background: #fff;
-  border-bottom: 1px solid #e5e5e5;
+  background: var(--bgColor-default, #fff);
+  border-bottom: 1px solid var(--borderColor-default, #e5e5e5);
 }
 
 .tab {
   padding: 11px 16px;
   font-size: 16px;
   font-weight: 500;
-  color: #888;
+  color: var(--fgColor-muted, #888);
   border: none;
   background: none;
   cursor: pointer;
@@ -413,13 +413,13 @@
 }
 
 .tab:hover {
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 .tabActive {
   composes: tab;
-  color: #1a1a1a;
-  border-bottom-color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
+  border-bottom-color: var(--fgColor-default, #1a1a1a);
   font-weight: 600;
 }
 
@@ -440,14 +440,14 @@
   padding: 48px 0;
   text-align: center;
   font-size: 16px;
-  color: #999;
+  color: var(--fgColor-muted, #999);
 }
 
 /* Card */
 
 .card {
-  background: #fff;
-  border: 1px solid #e5e5e5;
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, #e5e5e5);
   border-radius: 10px;
   overflow: hidden;
   cursor: pointer;
@@ -458,7 +458,7 @@
 }
 
 .card:hover {
-  border-color: #ccc;
+  border-color: var(--borderColor-muted, rgba(128, 128, 128, 0.3));
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
   text-decoration: none !important;
 }
@@ -473,7 +473,7 @@
 
 .cardThumb {
   height: 140px;
-  background: #f5f5f5;
+  background: var(--bgColor-muted, #f5f5f5);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -489,7 +489,7 @@
   text-transform: uppercase;
   letter-spacing: 0.3px;
   background: rgba(0,0,0,0.06);
-  color: #555;
+  color: var(--fgColor-muted, #555);
 }
 
 /* Icon buttons (star, flows, etc.) */
@@ -504,23 +504,23 @@
   border: none;
   background: none;
   cursor: pointer;
-  color: #bbb;
+  color: var(--fgColor-muted);
   transition: all 0.15s;
 }
 
 .iconBtn:hover {
   background: rgba(0, 0, 0, 0.06);
-  color: #555;
+  color: var(--fgColor-muted, #555);
 }
 
 .iconBtnActive {
   composes: iconBtn;
-  color: #f59e0b;
+  color: var(--fgColor-attention, #f59e0b);
 }
 
 .iconBtnActive:hover {
   background: rgba(0, 0, 0, 0.06);
-  color: #d97706;
+  color: var(--fgColor-attention, #d97706);
 }
 
 .cardActions {
@@ -544,7 +544,7 @@
 .cardTitle {
   font-size: 16px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
   margin-bottom: 4px;
   white-space: nowrap;
   overflow: hidden;
@@ -557,7 +557,7 @@
   align-items: center;
   gap: 6px;
   font-size: 14px;
-  color: #aaa;
+  color: var(--fgColor-muted);
   text-decoration: none;
 }
 
@@ -565,7 +565,7 @@
   width: 3px;
   height: 3px;
   border-radius: 50%;
-  background: #d1d5db;
+  background: var(--borderColor-muted, #d1d5db);
 }
 
 /* Folder card */
@@ -576,11 +576,11 @@
 
 .folderThumb {
   height: 140px;
-  background: #f0f4ff;
+  background: var(--bgColor-accent-muted, #f0f4ff);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #54aeff;
+  color: var(--fgColor-accent, #54aeff);
 }
 
 /* External badge */
@@ -591,7 +591,7 @@
   gap: 3px;
   margin-left: 6px;
   font-size: 12px;
-  color: #999;
+  color: var(--fgColor-muted, #999);
   font-weight: 500;
 }
 
@@ -608,7 +608,7 @@
 }
 
 .createMenu {
-  background: #fff;
+  background: var(--bgColor-default, #fff);
   border-radius: 12px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
   padding: 24px;
@@ -620,7 +620,7 @@
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 16px;
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 .createMenuGrid {
@@ -634,17 +634,17 @@
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--borderColor-default, #e5e5e5);
   border-radius: 8px;
-  background: #fff;
+  background: var(--bgColor-default, #fff);
   cursor: pointer;
   transition: all 0.15s;
   text-align: left;
 }
 
 .createMenuItem:hover {
-  border-color: #ccc;
-  background: #fafafa;
+  border-color: var(--borderColor-muted);
+  background: var(--bgColor-inset, #fafafa);
 }
 
 .createMenuIcon {
@@ -656,19 +656,19 @@
   justify-content: center;
   font-size: 24px;
   flex-shrink: 0;
-  background: #f0f0f0;
-  color: #1a1a1a;
+  background: var(--bgColor-neutral-muted, #f0f0f0);
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 .createMenuItemTitle {
   font-size: 16px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 .createMenuItemDesc {
   font-size: 14px;
-  color: #999;
+  color: var(--fgColor-muted, #999);
 }
 
 /* Create form styles */
@@ -687,7 +687,7 @@
 .createFormInput {
   width: 100%;
   padding: 8px 12px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--borderColor-default, #e5e5e5);
   border-radius: 6px;
   font-size: 16px;
   box-sizing: border-box;
@@ -695,7 +695,7 @@
 
 .createFormInput:focus {
   outline: none;
-  border-color: #999;
+  border-color: var(--fgColor-muted, #999);
 }
 
 .createFormCheckbox {
@@ -718,7 +718,7 @@
   gap: 4px;
   background: none;
   border: none;
-  color: #888;
+  color: var(--fgColor-muted, #888);
   font-size: 16px;
   cursor: pointer;
   padding: 0;
@@ -726,7 +726,7 @@
 }
 
 .createFormBack:hover {
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 .createFooter {
@@ -735,176 +735,36 @@
   gap: 8px;
   margin-top: 16px;
   padding-top: 12px;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid var(--borderColor-default, #e5e5e5);
 }
 
 .createFooterDot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: #2563eb;
+  background: var(--fgColor-accent, #2563eb);
   flex-shrink: 0;
 }
 
 .createFooterText {
   font-size: 14px;
-  color: #999;
+  color: var(--fgColor-muted, #999);
 }
 
 .createFormError {
   font-size: 14px;
-  color: #dc2626;
+  color: var(--fgColor-danger, #dc2626);
   margin-top: 8px;
 }
 
 /* Muted thumbnail colors */
-.thumbBlue { background: #f0f4f8; }
-.thumbAmber { background: #faf5ee; }
-.thumbGreen { background: #f0f7f4; }
-.thumbPurple { background: #f5f0fa; }
-.thumbRose { background: #faf0f2; }
-.thumbSlate { background: #f3f4f6; }
-
-/* Group by folders checkbox */
-
-.groupByFolders {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-left: auto;
-  font-size: 16px;
-  color: #555;
-  cursor: pointer;
-  padding: 0 4px;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.groupByFoldersCheckbox {
-  accent-color: #1a1a1a;
-  cursor: pointer;
-}
-
-/* Folder sections */
-
-.folderSection {
-  margin-top: 24px;
-}
-
-.folderSection:first-child {
-  margin-top: 0;
-}
-
-.folderHeader {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 0;
-  margin-bottom: 35px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1a1a1a;
-  width: 100%;
-  text-align: left;
-}
-
-.folderHeader:hover {
-  color: #555;
-}
-
-.folderIcon {
-  color: #1a1a1a;
-  flex-shrink: 0;
-}
-
-.folderName {
-  flex: 1;
-}
-
-.folderCount {
-  font-size: 14px;
-  font-weight: 400;
-  color: #999;
-}
-
-.folderChevron {
-  color: #999;
-  transition: transform 0.2s;
-}
-
-.folderChevronExpanded {
-  composes: folderChevron;
-  transform: rotate(90deg);
-}
-
-/* Flows dropdown */
-
-.flowsBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: #ccc;
-  flex-shrink: 0;
-  transition: all 0.15s;
-  margin-top: 1px;
-}
-
-.flowsBtn:hover {
-  background: #f0f0f0;
-  color: #555;
-}
-
-.flowsPositioner {
-  z-index: 200;
-}
-
-.flowsPopup {
-  background: #fff;
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  min-width: 160px;
-  padding: 4px 0;
-  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
-}
+.thumbBlue { background: var(--bgColor-accent-muted, #f0f4f8); }
+.thumbAmber { background: var(--bgColor-attention-muted, #faf5ee); }
+.thumbGreen { background: var(--bgColor-success-muted, #f0f7f4); }
+.thumbPurple { background: var(--bgColor-done-muted, #f5f0fa); }
+.thumbRose { background: var(--bgColor-danger-muted, #faf0f2); }
+.thumbSlate { background: var(--bgColor-neutral-muted, #f3f4f6); }
 
-.flowsTitle {
-  padding: 6px 12px 4px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #999;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-}
-
-.flowsItem {
-  display: block;
-  width: 100%;
-  padding: 6px 12px;
-  font-size: 16px;
-  color: #555;
-  cursor: pointer;
-  border: none;
-  background: none;
-  text-align: left;
-  transition: background 0.1s;
-  text-decoration: none;
-}
-
-.flowsItem:hover,
-.flowsItem[data-highlighted] {
-  background: #f5f5f5;
-  color: #1a1a1a;
-}
 
 /* Group by folders checkbox */
 
@@ -913,311 +773,8 @@
   align-items: center;
   gap: 6px;
   margin-left: auto;
-  font-size: 16px;
-  color: #555;
-  cursor: pointer;
-  padding: 0 4px;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.groupByFoldersCheckbox {
-  accent-color: #1a1a1a;
-  cursor: pointer;
-}
-
-/* Folder sections */
-
-.folderSection {
-  margin-top: 24px;
-}
-
-.folderSection:first-child {
-  margin-top: 0;
-}
-
-.folderHeader {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 0;
-  margin-bottom: 12px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1a1a1a;
-  width: 100%;
-  text-align: left;
-}
-
-.folderHeader:hover {
-  color: #555;
-}
-
-.folderIcon {
-  color: #1a1a1a;
-  flex-shrink: 0;
-}
-
-.folderName {
-  flex: 1;
-}
-
-.folderCount {
   font-size: 14px;
-  font-weight: 400;
-  color: #999;
-}
-
-.folderChevron {
-  color: #999;
-  transition: transform 0.2s;
-}
-
-.folderChevronExpanded {
-  composes: folderChevron;
-  transform: rotate(90deg);
-}
-
-/* Flows dropdown */
-
-.flowsBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: #ccc;
-  flex-shrink: 0;
-  transition: all 0.15s;
-  margin-top: 1px;
-}
-
-.flowsBtn:hover {
-  background: #f0f0f0;
-  color: #555;
-}
-
-.flowsPositioner {
-  z-index: 200;
-}
-
-.flowsPopup {
-  background: #fff;
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  min-width: 160px;
-  padding: 4px 0;
-  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-.flowsTitle {
-  padding: 6px 12px 4px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #999;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-}
-
-.flowsItem {
-  display: block;
-  width: 100%;
-  padding: 6px 12px;
-  font-size: 16px;
-  color: #555;
-  cursor: pointer;
-  border: none;
-  background: none;
-  text-align: left;
-  transition: background 0.1s;
-  text-decoration: none;
-}
-
-.flowsItem:hover,
-.flowsItem[data-highlighted] {
-  background: #f5f5f5;
-  color: #1a1a1a;
-}
-
-/* Avatar stack */
-
-.avatarStack {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-
-.avatarStack > .avatarImg + .avatarImg {
-  margin-right: -8px;
-}
-
-.avatarImg {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 2px solid #fff;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-/* Text-only card header */
-
-.cardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 14px 0;
-}
-
-.cardDescription {
-  font-size: 14px;
-  color: #666;
-  line-height: 1.5;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  margin-top: 4px;
-}
-
-.cardFooter {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-/* Create dropdown (replaces modal) */
-
-.createDropdownPositioner {
-  z-index: 200;
-}
-
-.createDropdown {
-  background: #fff;
-  border: 1px solid #e5e5e5;
-  border-radius: 12px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
-  padding: 16px;
-  width: 360px;
-  max-width: 90vw;
-  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-.createDropdownTitle {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 12px;
-  color: #1a1a1a;
-}
-
-.createDropdownGrid {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.createDropdownForm {
-  /* Wrapper for inline form inside dropdown */
-}
-
-/* More options */
-
-.moreOptionsBtn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: none;
-  border: none;
-  color: #666;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  padding: 8px 0 4px;
-  margin-top: 8px;
-  transition: color 0.15s;
-}
-
-.moreOptionsBtn:hover {
-  color: #1a1a1a;
-}
-
-.moreOptionsSection {
-  margin-top: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding-top: 8px;
-  border-top: 1px solid #eee;
-}
-
-.moreOptionItem {
-  display: block;
-  width: 100%;
-  padding: 8px 10px;
-  border: none;
-  background: none;
-  border-radius: 6px;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.1s;
-}
-
-.moreOptionItem:hover {
-  background: #f5f5f5;
-}
-
-.moreOptionTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a1a1a;
-}
-
-.moreOptionDesc {
-  font-size: 14px;
-  color: #999;
-}
-
-/* Create tip */
-
-.createTip {
-  margin-top: 12px;
-  padding-top: 10px;
-  border-top: 1px solid #eee;
-}
-
-.createTipText {
-  font-size: 14px;
-  color: #999;
-  line-height: 1.5;
-}
-
-.createTipCode {
-  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  font-size: 12px;
-  background: #f0f0f0;
-  padding: 1px 5px;
-  border-radius: 3px;
-  color: #555;
-}
-
-/* Group by folders checkbox */
-
-.groupByFolders {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-left: auto;
-  font-size: 14px;
-  color: #555;
+  color: var(--fgColor-muted, #555);
   cursor: pointer;
   padding: 0 4px;
   white-space: nowrap;
@@ -1225,16 +782,17 @@
 }
 
 .groupByFoldersCheckbox {
-  accent-color: #1a1a1a;
+  accent-color: var(--fgColor-default, #1a1a1a);
   cursor: pointer;
 }
 
 /* Folder sections */
 
 .folderSection {
+  margin-top: 24px;
   padding-bottom: 24px;
   margin-bottom: 24px;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--borderColor-default, #e5e5e5);
 }
 
 .folderSectionCollapsed {
@@ -1242,6 +800,10 @@
   padding-bottom: 0;
 }
 
+.folderSection:first-child {
+  margin-top: 0;
+}
+
 .folderSection:last-child,
 .folderSectionCollapsed:last-child {
   border-bottom: none;
@@ -1259,17 +821,17 @@
   cursor: pointer;
   font-size: 16px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
   width: 100%;
   text-align: left;
 }
 
 .folderHeader:hover {
-  color: #555;
+  color: var(--fgColor-muted, #555);
 }
 
 .folderIcon {
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
   flex-shrink: 0;
 }
 
@@ -1280,11 +842,11 @@
 .folderCount {
   font-size: 14px;
   font-weight: 400;
-  color: #999;
+  color: var(--fgColor-muted, #999);
 }
 
 .folderChevron {
-  color: #999;
+  color: var(--fgColor-muted, #999);
   transition: transform 0.2s;
 }
 
@@ -1305,15 +867,15 @@
   border: none;
   background: none;
   cursor: pointer;
-  color: #ccc;
+  color: var(--fgColor-muted, #999);
   flex-shrink: 0;
   transition: all 0.15s;
   margin-top: 1px;
 }
 
 .flowsBtn:hover {
-  background: #f0f0f0;
-  color: #555;
+  background: var(--bgColor-neutral-muted, #f0f0f0);
+  color: var(--fgColor-muted, #555);
 }
 
 .flowsPositioner {
@@ -1321,8 +883,8 @@
 }
 
 .flowsPopup {
-  background: #fff;
-  border: 1px solid #e5e5e5;
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, #e5e5e5);
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
   min-width: 180px;
@@ -1334,7 +896,7 @@
   padding: 6px 12px 4px;
   font-size: 12px;
   font-weight: 600;
-  color: #999;
+  color: var(--fgColor-muted, #999);
   text-transform: uppercase;
   letter-spacing: 0.4px;
 }
@@ -1344,7 +906,7 @@
   width: 100%;
   padding: 6px 12px;
   font-size: 14px;
-  color: #555;
+  color: var(--fgColor-muted, #555);
   cursor: pointer;
   border: none;
   background: none;
@@ -1355,8 +917,8 @@
 
 .flowsItem:hover,
 .flowsItem[data-highlighted] {
-  background: #f5f5f5;
-  color: #1a1a1a;
+  background: var(--bgColor-muted, #f5f5f5);
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 /* Avatar stack */
@@ -1375,7 +937,7 @@
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  border: 2px solid #fff;
+  border: 2px solid var(--bgColor-default, #fff);
   object-fit: cover;
   flex-shrink: 0;
 }
@@ -1391,7 +953,7 @@
 
 .cardDescription {
   font-size: 14px;
-  color: #666;
+  color: var(--fgColor-muted, #999);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -1414,8 +976,8 @@
 }
 
 .createDropdown {
-  background: #fff;
-  border: 1px solid #e5e5e5;
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, #e5e5e5);
   border-radius: 12px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
   padding: 16px;
@@ -1428,7 +990,7 @@
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 12px;
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 .createDropdownGrid {
@@ -1449,7 +1011,7 @@
   gap: 4px;
   background: none;
   border: none;
-  color: #666;
+  color: var(--fgColor-muted);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -1459,7 +1021,7 @@
 }
 
 .moreOptionsBtn:hover {
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 .moreOptionsSection {
@@ -1468,7 +1030,7 @@
   flex-direction: column;
   gap: 4px;
   padding-top: 8px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--borderColor-muted, #eee);
 }
 
 .moreOptionItem {
@@ -1484,18 +1046,18 @@
 }
 
 .moreOptionItem:hover {
-  background: #f5f5f5;
+  background: var(--bgColor-muted, #f5f5f5);
 }
 
 .moreOptionTitle {
   font-size: 14px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: var(--fgColor-default, #1a1a1a);
 }
 
 .moreOptionDesc {
   font-size: 12px;
-  color: #999;
+  color: var(--fgColor-muted, #999);
   margin-top: 2px;
 }
 
@@ -1504,22 +1066,22 @@
 .createTip {
   margin-top: 12px;
   padding-top: 10px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--borderColor-muted, #eee);
 }
 
 .createTipText {
   font-size: 12px;
-  color: #999;
+  color: var(--fgColor-muted, #999);
   line-height: 1.5;
 }
 
 .createTipCode {
   font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 12px;
-  background: #f0f0f0;
+  background: var(--bgColor-neutral-muted, #f0f0f0);
   padding: 1px 5px;
   border-radius: 3px;
-  color: #555;
+  color: var(--fgColor-muted, #555);
 }
 
 /* Hamburger button — hidden on desktop */
@@ -1534,12 +1096,12 @@
   border: none;
   background: none;
   cursor: pointer;
-  color: #555;
+  color: var(--fgColor-muted, #555);
   transition: background 0.15s;
 }
 
 .hamburgerBtn:hover {
-  background: #f0f0f0;
+  background: var(--bgColor-neutral-muted, #f0f0f0);
 }
 
 /* ─── Responsive: cards wrap on smaller screens ─── */
@@ -1556,9 +1118,9 @@
   }
 }
 
-/* ─── Responsive: sidebar collapses under 500px ─── */
+/* ─── Responsive: sidebar collapses under 1030px ─── */
 
-@media (max-width: 500px) {
+@media (max-width: 1030px) {
   .hamburgerBtn {
     display: flex;
   }