@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/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: var(--fgColor-default, #1a1a1a);
-  background: var(--bgColor-inset, #fafafa);
+  color: var(--color-foreground, #1a1a1a);
+  background: var(--color-background-inset, #fafafa);
 }
 
 /* ─── Full-width header ─── */
@@ -16,8 +16,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 24px;
-  border-bottom: 1px solid var(--borderColor-default, #e5e5e5);
-  background: var(--bgColor-default, #fff);
+  border-bottom: 1px solid var(--color-border, #e5e5e5);
+  background: var(--color-background, #fff);
   flex-shrink: 0;
 }
 
@@ -30,26 +30,26 @@
 .logo {
   width: 48px;
   height: 48px;
-  background: var(--bgColor-emphasis, #313131);
+  background: var(--color-background-emphasis, #313131);
   border-radius: 8px;
   transform: rotate(-1deg);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--fgColor-onEmphasis, #fff);
+  color: var(--color-foreground-on-emphasis, #fff);
   flex-shrink: 0;
 }
 
 .appName {
   font-size: 24px;
   font-weight: 800;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
   line-height: 1.1;
 }
 
 .appSubtitle {
   font-size: 16px;
-  color: var(--fgColor-muted, #888);
+  color: var(--color-foreground-muted, #888);
   line-height: 1.3;
   margin-top: 4px;
 }
@@ -65,8 +65,8 @@
   align-items: center;
   gap: 6px;
   padding: 8px 20px;
-  background: var(--bgColor-emphasis, #1a1a1a);
-  color: var(--fgColor-onEmphasis, #fff);
+  background: var(--color-background-emphasis, #1a1a1a);
+  color: var(--color-foreground-on-emphasis, #fff);
   border: none;
   border-radius: 8px;
   font-size: 16px;
@@ -76,7 +76,7 @@
 }
 
 .createBtn:hover {
-  background: var(--bgColor-emphasis, #333);
+  background: var(--color-background-emphasis, #333);
 }
 
 /* Branch dropdown */
@@ -85,7 +85,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
 }
 
 .switchOverlay {
@@ -97,8 +97,8 @@
   align-items: center;
   justify-content: center;
   gap: 12px;
-  background: var(--bgColor-default, #fff);
-  color: var(--fgColor-muted, #555);
+  background: var(--color-background, #fff);
+  color: var(--color-foreground-muted, #555);
   font-size: 15px;
   font-weight: 500;
 }
@@ -106,8 +106,8 @@
 .switchSpinner {
   width: 24px;
   height: 24px;
-  border: 3px solid var(--borderColor-default, #e5e5e5);
-  border-top-color: var(--fgColor-accent, #2563eb);
+  border: 3px solid var(--color-border, #e5e5e5);
+  border-top-color: var(--color-foreground-accent, #2563eb);
   border-radius: 50%;
   animation: branchSpin 0.6s linear infinite;
 }
@@ -129,8 +129,8 @@
 .sidebar {
   width: 260px;
   min-width: 220px;
-  background: var(--bgColor-default, #fff);
-  border-right: 1px solid var(--borderColor-default, #e5e5e5);
+  background: var(--color-background, #fff);
+  border-right: 1px solid var(--color-border, #e5e5e5);
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -156,7 +156,7 @@
   border-radius: 6px;
   font-size: 16px;
   font-weight: 500;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
   cursor: pointer;
   border: none;
   background: none;
@@ -166,18 +166,18 @@
 }
 
 .navItem:hover {
-  background: var(--bgColor-muted, #f5f5f5);
+  background: var(--color-background-muted, #f5f5f5);
 }
 
 .navItemActive {
   composes: navItem;
-  background: var(--bgColor-neutral-muted, #f0f0f0);
-  color: var(--fgColor-default, #1a1a1a);
+  background: var(--color-background-neutral-muted, #f0f0f0);
+  color: var(--color-foreground, #1a1a1a);
   font-weight: 600;
 }
 
 .navIcon {
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
   width: 18px;
   height: 18px;
   display: flex;
@@ -194,7 +194,7 @@
 .navCount {
   margin-left: auto;
   font-size: 14px;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   font-weight: 500;
 }
 
@@ -202,7 +202,7 @@
 
 .separator {
   height: 1px;
-  background: var(--borderColor-default, #e5e5e5);
+  background: var(--color-border, #e5e5e5);
   margin: 8px 16px;
 }
 
@@ -212,7 +212,7 @@
   padding: 8px 20px 4px;
   font-size: 12px;
   font-weight: 600;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -223,7 +223,7 @@
   gap: 8px;
   padding: 6px 20px;
   font-size: 16px;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
   cursor: pointer;
   transition: background 0.1s;
   text-decoration: none;
@@ -231,18 +231,18 @@
 
 .starredItem:link,
 .starredItem:visited {
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
   text-decoration: none;
 }
 
 .starredItem:hover {
-  background: var(--bgColor-muted, #f5f5f5);
+  background: var(--color-background-muted, #f5f5f5);
 }
 
 .starredEmpty {
   padding: 6px 20px;
   font-size: 14px;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   font-style: italic;
 }
 
@@ -260,7 +260,7 @@
 
 .sidebarFooter {
   flex-shrink: 0;
-  border-top: 1px solid var(--borderColor-default, #e5e5e5);
+  border-top: 1px solid var(--color-border, #e5e5e5);
   padding: 12px;
 }
 
@@ -268,24 +268,24 @@
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: var(--bgColor-neutral-muted, #f0f0f0);
+  background: var(--color-background-neutral-muted, #f0f0f0);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
-  color: var(--fgColor-muted, #888);
+  color: var(--color-foreground-muted, #888);
   flex-shrink: 0;
 }
 
 .userName {
   font-size: 16px;
   font-weight: 500;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
 }
 
 .userSub {
   font-size: 14px;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
 }
 
 .loginBtn {
@@ -295,18 +295,18 @@
   width: 100%;
   padding: 8px 10px;
   background: none;
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 8px;
   font-size: 16px;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
   cursor: pointer;
   transition: all 0.15s;
   text-align: left;
 }
 
 .loginBtn:hover {
-  background: var(--bgColor-muted, #f5f5f5);
-  border-color: var(--borderColor-muted);
+  background: var(--color-background-muted, #f5f5f5);
+  border-color: var(--color-border-muted);
 }
 
 .userAvatar {
@@ -331,18 +331,18 @@
   min-width: 0;
   padding: 8px 10px;
   background: none;
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 8px;
   font-size: 16px;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
   cursor: pointer;
   transition: all 0.15s;
   text-align: left;
 }
 
 .userBtn:hover {
-  background: var(--bgColor-muted, #f5f5f5);
-  border-color: var(--borderColor-muted);
+  background: var(--color-background-muted, #f5f5f5);
+  border-color: var(--color-border-muted);
 }
 
 .userInfo {
@@ -361,17 +361,17 @@
   height: 36px;
   flex-shrink: 0;
   background: none;
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 8px;
-  color: var(--fgColor-muted, #888);
+  color: var(--color-foreground-muted, #888);
   cursor: pointer;
   transition: all 0.15s;
 }
 
 .gearBtn:hover {
-  background: var(--bgColor-muted, #f5f5f5);
-  border-color: var(--borderColor-muted);
-  color: var(--fgColor-default, #333);
+  background: var(--color-background-muted, #f5f5f5);
+  border-color: var(--color-border-muted);
+  color: var(--color-foreground, #333);
 }
 
 /* ─── Settings Dialog ─── */
@@ -379,7 +379,7 @@
 .settingsBackdrop {
   position: fixed;
   inset: 0;
-  background: var(--overlay-backdrop-bgColor, rgba(0, 0, 0, 0.4));
+  background: var(--color-overlay-backdrop, rgba(0, 0, 0, 0.4));
   z-index: 10000;
 }
 
@@ -398,15 +398,15 @@
 }
 
 .settingsPopup {
-  background: var(--bgColor-default);
+  background: var(--color-background);
   border-radius: 12px;
-  box-shadow: var(--shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.12));
+  box-shadow: var(--shadow-floating, 0 16px 48px rgba(0, 0, 0, 0.12));
   padding: 28px;
   max-width: 480px;
   width: 90vw;
   max-height: 90vh;
   overflow-y: auto;
-  color: var(--fgColor-default);
+  color: var(--color-foreground);
   position: relative;
 }
 
@@ -414,7 +414,7 @@
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 20px;
-  color: var(--fgColor-default);
+  color: var(--color-foreground);
   padding-right: 32px;
 }
 
@@ -426,15 +426,15 @@
   border: none;
   font-size: 24px;
   line-height: 1;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 4px;
 }
 
 .settingsCloseBtn:hover {
-  background: var(--bgColor-neutral-muted);
-  color: var(--fgColor-default);
+  background: var(--color-background-neutral-muted);
+  color: var(--color-foreground);
 }
 
 .settingsSection {
@@ -447,15 +447,15 @@
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   margin-bottom: 12px;
 }
 
 .settingsTokenCard {
-  background: var(--bgColor-muted);
-  border: 1px solid var(--borderColor-default);
+  background: var(--color-background-muted);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 14px 16px;
 }
@@ -466,20 +466,20 @@
   gap: 10px;
   font-size: 14px;
   line-height: 2;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
 }
 
 .settingsTokenLabel {
   flex-shrink: 0;
   min-width: 90px;
   font-weight: 500;
-  color: var(--fgColor-default);
+  color: var(--color-foreground);
 }
 
 .settingsTokenValue {
   font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 13px;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
@@ -489,11 +489,11 @@
 .settingsScope {
   font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 12px;
-  color: var(--fgColor-default);
-  background: var(--bgColor-default);
+  color: var(--color-foreground);
+  background: var(--color-background);
   padding: 1px 6px;
   border-radius: 4px;
-  border: 1px solid var(--borderColor-default);
+  border: 1px solid var(--color-border);
 }
 
 .settingsRemoveBtn {
@@ -503,26 +503,26 @@
   margin-top: 12px;
   padding: 6px 12px;
   background: none;
-  border: 1px solid var(--borderColor-danger-muted, #ff818266);
+  border: 1px solid var(--color-border-danger-muted, #ff818266);
   border-radius: 6px;
   font-size: 13px;
-  color: var(--fgColor-danger, #d1242f);
+  color: var(--color-foreground-danger, #d1242f);
   cursor: pointer;
   transition: all 0.15s;
 }
 
 .settingsRemoveBtn:hover {
-  background: var(--bgColor-danger-muted, #ffebe966);
-  border-color: var(--borderColor-danger-emphasis, #cf222e);
+  background: var(--color-background-danger-muted, #ffebe966);
+  border-color: var(--color-border-danger-emphasis, #cf222e);
 }
 
 .settingsNoToken {
-  background: var(--bgColor-muted);
-  border: 1px solid var(--borderColor-default);
+  background: var(--color-background-muted);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 16px;
   text-align: center;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   font-size: 14px;
 }
 
@@ -535,19 +535,19 @@
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
-  background: var(--bgColor-default);
-  border: 1px solid var(--borderColor-default);
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--fgColor-default);
+  color: var(--color-foreground);
   cursor: pointer;
   transition: all 0.15s;
 }
 
 .settingsSignInBtn:hover {
-  background: var(--bgColor-muted);
-  border-color: var(--borderColor-muted);
+  background: var(--color-background-muted);
+  border-color: var(--color-border-muted);
 }
 
 /* ─── Main Content ─── */
@@ -567,15 +567,15 @@
   gap: 0;
   min-height: 52px;
   padding: 0 32px;
-  background: var(--bgColor-default, #fff);
-  border-bottom: 1px solid var(--borderColor-default, #e5e5e5);
+  background: var(--color-background, #fff);
+  border-bottom: 1px solid var(--color-border, #e5e5e5);
 }
 
 .tab {
   padding: 11px 16px;
   font-size: 16px;
   font-weight: 500;
-  color: var(--fgColor-muted, #888);
+  color: var(--color-foreground-muted, #888);
   border: none;
   background: none;
   cursor: pointer;
@@ -584,13 +584,13 @@
 }
 
 .tab:hover {
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
 }
 
 .tabActive {
   composes: tab;
-  color: var(--fgColor-default, #1a1a1a);
-  border-bottom-color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
+  border-bottom-color: var(--color-foreground, #1a1a1a);
   font-weight: 600;
 }
 
@@ -611,14 +611,14 @@
   padding: 48px 0;
   text-align: center;
   font-size: 16px;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
 }
 
 /* Card */
 
 .card {
-  background: var(--bgColor-default, #fff);
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  background: var(--color-background, #fff);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 10px;
   overflow: hidden;
   cursor: pointer;
@@ -629,7 +629,7 @@
 }
 
 .card:hover {
-  border-color: var(--borderColor-muted, rgba(128, 128, 128, 0.3));
+  border-color: var(--color-border-muted, rgba(128, 128, 128, 0.3));
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
   text-decoration: none !important;
 }
@@ -642,9 +642,26 @@
   color: inherit;
 }
 
+.cardPrivate {
+  opacity: 0.8;
+}
+
+.cardPrivate:hover {
+  opacity: 1;
+}
+
+.branchOnlyCard {
+  background: var(--color-background-muted, #f6f8fa);
+  border-color: var(--color-border-muted, #d8dee4);
+}
+
+.branchOnlyCard:hover {
+  border-color: var(--color-border-accent-muted, #54aeff66);
+}
+
 .cardThumb {
   height: 140px;
-  background: var(--bgColor-muted, #f5f5f5);
+  background: var(--color-background-muted, #f5f5f5);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -659,8 +676,35 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.3px;
-  background: var(--bgColor-neutral-muted, #f0f0f0);
-  color: var(--fgColor-muted, #555);
+  background: var(--color-background-neutral-muted, #f0f0f0);
+  color: var(--color-foreground-muted, #555);
+}
+
+.branchOnlyBadge {
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  background: var(--color-background-accent-muted, #ddf4ff);
+  color: var(--color-foreground-accent, #0969da);
+}
+
+.cardPrivateBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-foreground-muted, #656d76);
+  background: none;
+  border: none;
+  padding: 2px;
+}
+
+.cardBadgeGroup {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 /* Icon buttons (star, flows, etc.) */
@@ -675,23 +719,23 @@
   border: none;
   background: none;
   cursor: pointer;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   transition: all 0.15s;
 }
 
 .iconBtn:hover {
   background: rgba(0, 0, 0, 0.06);
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
 }
 
 .iconBtnActive {
   composes: iconBtn;
-  color: var(--fgColor-attention, #f59e0b);
+  color: var(--color-foreground-attention, #f59e0b);
 }
 
 .iconBtnActive:hover {
   background: rgba(0, 0, 0, 0.06);
-  color: var(--fgColor-attention, #d97706);
+  color: var(--color-foreground-attention, #d97706);
 }
 
 .cardActions {
@@ -715,7 +759,7 @@
 .cardTitle {
   font-size: 16px;
   font-weight: 600;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
   margin-bottom: 4px;
   white-space: nowrap;
   overflow: hidden;
@@ -728,7 +772,7 @@
   align-items: center;
   gap: 6px;
   font-size: 14px;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   text-decoration: none;
 }
 
@@ -736,7 +780,7 @@
   width: 3px;
   height: 3px;
   border-radius: 50%;
-  background: var(--borderColor-muted, #d1d5db);
+  background: var(--color-border-muted, #d1d5db);
 }
 
 /* Folder card */
@@ -747,11 +791,11 @@
 
 .folderThumb {
   height: 140px;
-  background: var(--bgColor-accent-muted, #f0f4ff);
+  background: var(--color-background-accent-muted, #f0f4ff);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--fgColor-accent, #54aeff);
+  color: var(--color-foreground-accent, #54aeff);
 }
 
 /* External badge */
@@ -762,7 +806,7 @@
   gap: 3px;
   margin-left: 6px;
   font-size: 12px;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
   font-weight: 500;
 }
 
@@ -779,7 +823,7 @@
 }
 
 .createMenu {
-  background: var(--bgColor-default, #fff);
+  background: var(--color-background, #fff);
   border-radius: 12px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
   padding: 24px;
@@ -790,7 +834,7 @@
 .createMenuTitle {
   font-size: 18px;
   font-weight: 600;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
 }
 
 .createMenuGrid {
@@ -804,17 +848,17 @@
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 8px;
-  background: var(--bgColor-default, #fff);
+  background: var(--color-background, #fff);
   cursor: pointer;
   transition: all 0.15s;
   text-align: left;
 }
 
 .createMenuItem:hover {
-  border-color: var(--borderColor-muted);
-  background: var(--bgColor-inset, #fafafa);
+  border-color: var(--color-border-muted);
+  background: var(--color-background-inset, #fafafa);
 }
 
 .createMenuIcon {
@@ -826,19 +870,19 @@
   justify-content: center;
   font-size: 24px;
   flex-shrink: 0;
-  background: var(--bgColor-neutral-muted, #f0f0f0);
-  color: var(--fgColor-default, #1a1a1a);
+  background: var(--color-background-neutral-muted, #f0f0f0);
+  color: var(--color-foreground, #1a1a1a);
 }
 
 .createMenuItemTitle {
   font-size: 16px;
   font-weight: 600;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
 }
 
 .createMenuItemDesc {
   font-size: 14px;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
 }
 
 /* Create form styles */
@@ -859,13 +903,13 @@
   background: none;
   border: none;
   border-radius: 6px;
-  color: var(--fgColor-muted, #888);
+  color: var(--color-foreground-muted, #888);
   cursor: pointer;
 }
 
 .createFormClose:hover {
-  color: var(--fgColor-default, #1a1a1a);
-  background: var(--bgColor-neutral-muted, #f0f0f0);
+  color: var(--color-foreground, #1a1a1a);
+  background: var(--color-background-neutral-muted, #f0f0f0);
 }
 
 .createFormField {
@@ -882,7 +926,7 @@
 .createFormInput {
   width: 100%;
   padding: 8px 12px;
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 6px;
   font-size: 16px;
   box-sizing: border-box;
@@ -890,7 +934,7 @@
 
 .createFormInput:focus {
   outline: none;
-  border-color: var(--fgColor-muted, #999);
+  border-color: var(--color-foreground-muted, #999);
 }
 
 .createFormCheckbox {
@@ -907,8 +951,8 @@
 .createFormSubmit {
   width: 100%;
   padding: 12px 16px;
-  background: var(--fgColor-default, #1a1a1a);
-  color: var(--bgColor-default, #fff);
+  background: var(--color-foreground, #1a1a1a);
+  color: var(--color-background, #fff);
   border: none;
   border-radius: 10px;
   font-size: 16px;
@@ -932,35 +976,35 @@
   gap: 8px;
   margin-top: 16px;
   padding-top: 12px;
-  border-top: 1px solid var(--borderColor-default, #e5e5e5);
+  border-top: 1px solid var(--color-border, #e5e5e5);
 }
 
 .createFooterDot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--fgColor-accent, #2563eb);
+  background: var(--color-foreground-accent, #2563eb);
   flex-shrink: 0;
 }
 
 .createFooterText {
   font-size: 14px;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
 }
 
 .createFormError {
   font-size: 14px;
-  color: var(--fgColor-danger, #dc2626);
+  color: var(--color-foreground-danger, #dc2626);
   margin-top: 8px;
 }
 
 /* Muted thumbnail colors */
-.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); }
+.thumbBlue { background: var(--color-background-accent-muted, #f0f4f8); }
+.thumbAmber { background: var(--color-background-attention-muted, #faf5ee); }
+.thumbGreen { background: var(--color-background-success-muted, #f0f7f4); }
+.thumbPurple { background: var(--color-background-done-muted, #f5f0fa); }
+.thumbRose { background: var(--color-background-danger-muted, #faf0f2); }
+.thumbSlate { background: var(--color-background-neutral-muted, #f3f4f6); }
 
 
 /* Group by folders checkbox */
@@ -971,7 +1015,7 @@
   gap: 6px;
   margin-left: auto;
   font-size: 14px;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
   cursor: pointer;
   padding: 0 4px;
   white-space: nowrap;
@@ -979,7 +1023,7 @@
 }
 
 .groupByFoldersCheckbox {
-  accent-color: var(--fgColor-default, #1a1a1a);
+  accent-color: var(--color-foreground, #1a1a1a);
   cursor: pointer;
 }
 
@@ -989,7 +1033,7 @@
   margin-top: 24px;
   padding-bottom: 24px;
   margin-bottom: 24px;
-  border-bottom: 1px solid var(--borderColor-default, #e5e5e5);
+  border-bottom: 1px solid var(--color-border, #e5e5e5);
 }
 
 .folderSectionCollapsed {
@@ -1018,17 +1062,17 @@
   cursor: pointer;
   font-size: 16px;
   font-weight: 600;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
   width: 100%;
   text-align: left;
 }
 
 .folderHeader:hover {
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
 }
 
 .folderIcon {
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
   flex-shrink: 0;
 }
 
@@ -1036,14 +1080,33 @@
   flex: 1;
 }
 
+.folderSectionPrivate {
+  opacity: 0.8;
+}
+
+.folderSectionPrivate:hover {
+  opacity: 1;
+}
+
+.folderPrivateBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-foreground-muted, #656d76);
+  background: none;
+  border: none;
+  padding: 2px;
+  margin-right: 6px;
+}
+
 .folderCount {
   font-size: 14px;
   font-weight: 400;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
 }
 
 .folderChevron {
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
   transition: transform 0.2s;
 }
 
@@ -1064,15 +1127,15 @@
   border: none;
   background: none;
   cursor: pointer;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
   flex-shrink: 0;
   transition: all 0.15s;
   margin-top: 1px;
 }
 
 .flowsBtn:hover {
-  background: var(--bgColor-neutral-muted, #f0f0f0);
-  color: var(--fgColor-muted, #555);
+  background: var(--color-background-neutral-muted, #f0f0f0);
+  color: var(--color-foreground-muted, #555);
 }
 
 .flowsPositioner {
@@ -1080,8 +1143,8 @@
 }
 
 .flowsPopup {
-  background: var(--bgColor-default, #fff);
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  background: var(--color-background, #fff);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
   min-width: 180px;
@@ -1093,7 +1156,7 @@
   padding: 6px 12px 4px;
   font-size: 12px;
   font-weight: 600;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
   text-transform: uppercase;
   letter-spacing: 0.4px;
 }
@@ -1103,7 +1166,7 @@
   width: 100%;
   padding: 6px 12px;
   font-size: 14px;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
   cursor: pointer;
   border: none;
   background: none;
@@ -1114,16 +1177,24 @@
 
 .flowsItem:hover,
 .flowsItem[data-highlighted] {
-  background: var(--bgColor-muted, #f5f5f5);
-  color: var(--fgColor-default, #1a1a1a);
+  background: var(--color-background-muted, #f5f5f5);
+  color: var(--color-foreground, #1a1a1a);
 }
 
 .flowsItemLink {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   color: inherit;
   text-decoration: none;
 }
 
+.flowsItemPrivateIcon {
+  color: var(--color-foreground-muted, #656d76);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 /* Avatar stack */
 
 .avatarStack {
@@ -1140,7 +1211,7 @@
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  border: 2px solid var(--bgColor-default, #fff);
+  border: 2px solid var(--color-background, #fff);
   object-fit: cover;
   flex-shrink: 0;
 }
@@ -1156,7 +1227,7 @@
 
 .cardDescription {
   font-size: 14px;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -1179,8 +1250,8 @@
 }
 
 .createDropdown {
-  background: var(--bgColor-default, #fff);
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  background: var(--color-background, #fff);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 12px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
   padding: 16px;
@@ -1193,7 +1264,7 @@
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 12px;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
 }
 
 .createDropdownGrid {
@@ -1214,7 +1285,7 @@
   gap: 4px;
   background: none;
   border: none;
-  color: var(--fgColor-muted);
+  color: var(--color-foreground-muted);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -1224,7 +1295,7 @@
 }
 
 .moreOptionsBtn:hover {
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
 }
 
 .moreOptionsSection {
@@ -1233,7 +1304,7 @@
   flex-direction: column;
   gap: 4px;
   padding-top: 8px;
-  border-top: 1px solid var(--borderColor-muted, #eee);
+  border-top: 1px solid var(--color-border-muted, #eee);
 }
 
 .moreOptionItem {
@@ -1249,18 +1320,18 @@
 }
 
 .moreOptionItem:hover {
-  background: var(--bgColor-muted, #f5f5f5);
+  background: var(--color-background-muted, #f5f5f5);
 }
 
 .moreOptionTitle {
   font-size: 14px;
   font-weight: 600;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
 }
 
 .moreOptionDesc {
   font-size: 12px;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
   margin-top: 2px;
 }
 
@@ -1269,22 +1340,22 @@
 .createTip {
   margin-top: 12px;
   padding-top: 10px;
-  border-top: 1px solid var(--borderColor-muted, #eee);
+  border-top: 1px solid var(--color-border-muted, #eee);
 }
 
 .createTipText {
   font-size: 12px;
-  color: var(--fgColor-muted, #999);
+  color: var(--color-foreground-muted, #999);
   line-height: 1.5;
 }
 
 .createTipCode {
   font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 12px;
-  background: var(--bgColor-neutral-muted, #f0f0f0);
+  background: var(--color-background-neutral-muted, #f0f0f0);
   padding: 1px 5px;
   border-radius: 3px;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
 }
 
 /* Hamburger button — hidden on desktop */
@@ -1299,12 +1370,12 @@
   border: none;
   background: none;
   cursor: pointer;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
   transition: background 0.15s;
 }
 
 .hamburgerBtn:hover {
-  background: var(--bgColor-neutral-muted, #f0f0f0);
+  background: var(--color-background-neutral-muted, #f0f0f0);
 }
 
 /* ─── Responsive: cards wrap on smaller screens ─── */
@@ -1394,12 +1465,12 @@
 
 .iconBtnInlineActive {
   composes: iconBtnInline;
-  color: var(--fgColor-attention, #f59e0b);
+  color: var(--color-foreground-attention, #f59e0b);
 }
 
 .iconBtnInlineActive:hover {
   background: rgba(0, 0, 0, 0.06);
-  color: var(--fgColor-attention, #d97706);
+  color: var(--color-foreground-attention, #d97706);
 }
 
 /* Card actions dropdown menu */
@@ -1408,8 +1479,8 @@
 }
 
 .actionsMenu {
-  background: var(--bgColor-default, #fff);
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  background: var(--color-background, #fff);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   padding: 4px;
@@ -1428,22 +1499,22 @@
   border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
-  color: var(--fgColor-default, #1a1a1a);
+  color: var(--color-foreground, #1a1a1a);
   text-align: left;
 }
 
 .actionsMenuItem:hover {
-  background: var(--bgColor-neutral-muted, #f0f0f0);
+  background: var(--color-background-neutral-muted, #f0f0f0);
 }
 
 .actionsMenuItemDanger {
   composes: actionsMenuItem;
-  color: var(--fgColor-danger, #cf222e);
+  color: var(--color-foreground-danger, #cf222e);
 }
 
 .actionsMenuItemDanger:hover {
-  background: var(--bgColor-danger-muted, #fff0f0);
-  color: var(--fgColor-danger, #cf222e);
+  background: var(--color-background-danger-muted, #fff0f0);
+  color: var(--color-foreground-danger, #cf222e);
 }
 
 /* Modal overlay and content */
@@ -1458,8 +1529,8 @@
 }
 
 .modalContent {
-  background: var(--bgColor-default, #fff);
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  background: var(--color-background, #fff);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 12px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
   padding: 16px;
@@ -1478,8 +1549,8 @@
 
 .modalSubmitBtn {
   padding: 8px 16px;
-  background: var(--fgColor-default, #1a1a1a);
-  color: var(--bgColor-default, #fff);
+  background: var(--color-foreground, #1a1a1a);
+  color: var(--color-background, #fff);
   border: none;
   border-radius: 6px;
   font-size: 14px;
@@ -1499,22 +1570,22 @@
 
 .modalCancelBtn {
   padding: 8px 16px;
-  border: 1px solid var(--borderColor-default, #e5e5e5);
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: 6px;
-  background: var(--bgColor-default, #fff);
-  color: var(--fgColor-default, #1a1a1a);
+  background: var(--color-background, #fff);
+  color: var(--color-foreground, #1a1a1a);
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
 }
 
 .modalCancelBtn:hover {
-  background: var(--bgColor-neutral-muted, #f0f0f0);
+  background: var(--color-background-neutral-muted, #f0f0f0);
 }
 
 .deleteMessage {
   font-size: 14px;
-  color: var(--fgColor-muted, #555);
+  color: var(--color-foreground-muted, #555);
   line-height: 1.5;
   margin: 12px 0;
 }
@@ -1523,7 +1594,7 @@
   padding: 8px 16px;
   border: none;
   border-radius: 6px;
-  background: var(--bgColor-danger-emphasis, #cf222e);
+  background: var(--color-background-danger-emphasis, #cf222e);
   color: #fff;
   cursor: pointer;
   font-size: 14px;
@@ -1531,7 +1602,7 @@
 }
 
 .deleteConfirmBtn:hover {
-  background: var(--bgColor-danger-emphasis, #a40e26);
+  background: var(--color-background-danger-emphasis, #a40e26);
 }
 
 .deleteConfirmBtn:disabled {