openclacky 1.5.7 → 1.5.9

data/lib/clacky/web/app.css

@@ -30,7 +30,7 @@
   --color-border-strong:    #d4d4ce;  /* hover / active outline */
 
   /* Text — 4-tier hierarchy */
-  --color-text-primary:   #1a1b1e;   /* titles, important content */
+  --color-text-primary:   #344054;   /* titles, important content */
   --color-text-secondary: #56585e;   /* body text */
   --color-text-tertiary:  #8a8d94;   /* captions, meta */
   --color-text-muted:     #a8abb2;   /* placeholders, disabled */
@@ -55,6 +55,7 @@
   --color-warning: #f59e0b;
   --color-warning-bg: #fffbeb;
   --color-warning-border: #fcd34d;
+  --color-warning-text: #92400e;
 
   --color-info: #0ea5e9;
   --color-secondary: #10b981;
@@ -113,7 +114,7 @@
   --color-border-secondary: #1e2229;
   --color-border-strong:    #3a3f4a;
 
-  --color-text-primary:   #e8eaee;
+  --color-text-primary:   #c2cad1;
   --color-text-secondary: #a4a9b4;
   --color-text-tertiary:  #6b707b;
   --color-text-muted:     #565b66;
@@ -137,6 +138,7 @@
   --color-warning: #fbbf24;
   --color-warning-bg: #2d1f00;
   --color-warning-border: #4d3200;
+  --color-warning-text: #fcd34d;
 
   --color-info: #38bdf8;
   --color-secondary: #34d399;
@@ -190,6 +192,7 @@
   --color-warning: #fbbf24;
   --color-warning-bg: #2d1f00;
   --color-warning-border: #4d3200;
+  --color-warning-text: #fcd34d;
 
   --color-info: #38bdf8;
   --color-secondary: #34d399;
@@ -242,6 +245,7 @@
   --color-warning: #f59e0b;
   --color-warning-bg: #fffbeb;
   --color-warning-border: #fcd34d;
+  --color-warning-text: #92400e;
 
   --color-info: #0ea5e9;
   --color-secondary: #10b981;
@@ -294,6 +298,7 @@
   --color-warning: #fbbf24;
   --color-warning-bg: #2d1f00;
   --color-warning-border: #4d3200;
+  --color-warning-text: #fcd34d;
 
   --color-info: #38bdf8;
   --color-secondary: #34d399;
@@ -644,7 +649,6 @@ body {
 }
 #header-cmdbar:hover {
   border-color: var(--color-accent-primary);
-  background: var(--color-bg-hover);
   color: var(--color-text-secondary);
 }
 #header-cmdbar svg {
@@ -807,7 +811,11 @@ body {
   margin-bottom: 6px;
   border-bottom: 1px solid var(--color-border-secondary);
 }
-#ext-slot-sidebar-nav      { padding: 10px 0 0px; }
+#ext-slot-sidebar-nav {
+  margin-top: 10px;
+  padding: 10px 0 0px; 
+  border-top: 1px solid var(--color-border-secondary);
+}
 #ext-slot-sidebar-nav-bottom {
   padding: 8px 0 10px;
   margin-top: 6px;
@@ -821,7 +829,7 @@ body {
   gap: 8px;
   padding: 14px 8px 7px;
   font-family: var(--font-mono);
-  font-size: 0.65625rem;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-text-tertiary);
   text-transform: uppercase;
@@ -835,6 +843,11 @@ body {
   white-space: nowrap;
   flex: 0 0 auto;
 }
+.sidebar-divider [data-group-title] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
 /* Pure label dividers (Config / My Data / Creator) get a trailing rule line */
 .sidebar-divider:not(:has(.sidebar-divider-actions))::after {
   content: "";
@@ -1511,8 +1524,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  color: var(--color-text-primary);
-  font-size: 0.8125rem;
+  font-size: 0.8325rem;
   font-weight: 400;
   transition: color var(--transition-fast), font-weight var(--transition-fast);
 }
@@ -1523,6 +1535,13 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.session-item .session-name .session-cron-icon {
+  flex-shrink: 0;
+  margin-top: 0.0625rem;
+}
+.session-item .session-name .session-group-icon {
+  flex-shrink: 0;
+}
 .session-item .session-name .session-badge {
   flex-shrink: 0;
 }
@@ -1677,6 +1696,86 @@ body {
   color: var(--color-error);
 }
 
+/* Submenu for "Move to Project" */
+.session-actions-menu-item--has-submenu {
+  position: relative;
+}
+.session-actions-menu-item--has-submenu.active {
+  background: var(--color-bg-hover);
+}
+.session-actions-menu-arrow {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+.session-actions-submenu {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
+  padding: 0.25rem;
+  min-width: 10rem;
+  max-height: 18rem;
+  overflow-y: auto;
+  z-index: 1002;
+  animation: fadeIn 0.15s ease;
+}
+[data-theme="dark"] .session-actions-submenu {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+.session-actions-submenu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  transition: background .12s ease;
+  user-select: none;
+}
+.session-actions-submenu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+}
+.session-actions-submenu-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-actions-submenu-check {
+  color: var(--color-accent-primary);
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+.session-actions-submenu-item:hover {
+  background: var(--color-bg-hover);
+}
+.session-actions-submenu-item:hover .session-actions-submenu-icon {
+  color: var(--color-text-primary);
+}
+.session-actions-submenu-divider {
+  height: 1px;
+  background: var(--color-border-secondary);
+  margin: 0.25rem 0;
+}
+.session-actions-submenu-hint {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+}
+
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(-0.25rem); }
   to { opacity: 1; transform: translateY(0); }
@@ -1805,7 +1904,7 @@ body {
   opacity: 1;
 }
 .task-item.active {
-  background: var(--color-accent-soft);
+  background: var(--color-bg-hover);
 }
 .task-item.active::before {
   content: "";
@@ -2802,7 +2901,7 @@ body {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
-  z-index: 8;
+  z-index: 100;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7425,7 +7524,7 @@ body {
   font-size: 0.625rem;
   font-weight: 500;
   padding: 2px 0.4375rem;
-  border-radius: 10px;
+  border-radius: 4px;
   letter-spacing: 0.3px;
   flex-shrink: 0;
 }
@@ -7908,6 +8007,27 @@ body {
   text-align: center;
   padding: 1.5rem 0;
 }
+.extensions-load-more {
+  display: block;
+  width: 100%;
+  padding: 0.6rem;
+  margin-top: 0.5rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: border-color .15s, color .15s;
+}
+.extensions-load-more:hover:not(:disabled) {
+  border-color: var(--color-text-muted);
+  color: var(--color-text-primary);
+}
+.extensions-load-more:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
 .extension-card {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border-primary);
@@ -7982,6 +8102,29 @@ body {
   border-radius: 4px;
   padding: 0.0625rem 0.375rem;
 }
+.extension-verified {
+  font-size: 0.625rem;
+  color: var(--color-success, #16a34a);
+  background: var(--color-success-bg, rgba(22,163,74,0.12));
+  border-radius: 4px;
+  padding: 0.2rem 0.375rem;
+}
+.extension-unverified-banner {
+  font-size: 0.75rem;
+  color: var(--color-warning-text, #92400e);
+  background: var(--color-warning-bg, #fffbeb);
+  border: 1px solid var(--color-warning-border, #fcd34d);
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.extension-unverified-icon {
+  flex-shrink: 0;
+  color: var(--color-warning, #d97706);
+}
 .extension-desc {
   font-size: 0.75rem;
   color: var(--color-text-secondary);
@@ -8462,8 +8605,7 @@ body {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.btn-brand-use,
-.btn-skill-use {
+.btn-brand-use {
   background: transparent;
   border: 1px solid var(--color-success-border);
   border-radius: 6px;
@@ -8475,10 +8617,24 @@ body {
   transition: background .15s;
   white-space: nowrap;
 }
-.btn-brand-use:hover,
-.btn-skill-use:hover {
+.btn-brand-use:hover {
   background: var(--color-success-bg);
 }
+.btn-skill-use {
+  background: transparent;
+  border: 1px solid var(--color-accent-primary);
+  border-radius: 6px;
+  color: var(--color-accent-primary);
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.3125rem 0.75rem;
+  transition: background .15s;
+  white-space: nowrap;
+}
+.btn-skill-use:hover {
+  background: var(--color-accent-soft);
+}
 
 /* ── Delete button ────────────────────────────────────────────────────────── */
 .btn-skill-delete {
@@ -10381,6 +10537,7 @@ body.setup-mode[data-theme="dark"] {
   letter-spacing: 0.03em;
   transition: color .15s;
   line-height: 1;
+  text-decoration: none;
 }
 /* Highlight version text when badge is actionable and btn is hovered */
 .version-badge:hover .version-text { color: var(--color-text-tertiary); }
@@ -10535,17 +10692,21 @@ body.setup-mode[data-theme="dark"] {
 }
 .vup-btn-primary:hover  { background: var(--color-button-primary-hover); }
 .vup-btn-primary:active { transform: scale(.97); }
-.vup-btn-cancel {
-  padding: 0.4375rem 0.75rem;
+.vup-btn-changelog {
+  flex: 1;
+  padding: 0.4375rem 0;
   background: transparent;
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border-primary);
+  color: var(--color-accent-primary);
+  border: 1px solid var(--color-accent-primary);
   border-radius: 6px;
   font-size: 0.75rem;
+  font-weight: 500;
+  text-decoration: none;
+  text-align: center;
   cursor: pointer;
-  transition: background .15s, color .15s;
+  transition: background .15s, opacity .15s;
 }
-.vup-btn-cancel:hover { background: var(--color-bg-hover); color: var(--color-text-secondary); }
+.vup-btn-changelog:hover { background: var(--color-accent-primary); color: var(--color-button-primary-text); }
 
 /* Progress state */
 .vup-progress-header {
@@ -11549,6 +11710,42 @@ body.setup-mode[data-theme="dark"] {
   gap: 0.625rem;
 }
 
+/* ── Segmented Control (reusable compact tab selector) ──────────────────── */
+.segmented-control {
+  display: flex;
+  gap: 2px;
+  background: var(--color-bg-hover);
+  border-radius: 8px;
+  padding: 3px;
+}
+.segmented-control__btn {
+  padding: 0.3125rem 0.75rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+.segmented-control__btn:hover:not(.active) {
+  color: var(--color-text-primary);
+}
+.segmented-control__btn.active {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  font-weight: 500;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+[data-theme="dark"] .segmented-control {
+  background: var(--color-bg-primary);
+}
+[data-theme="dark"] .segmented-control__btn.active {
+  background: var(--color-bg-hover);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
 /* ═════════════════════════════════════════════════════════════════════════
  * BILLING PANEL
  * ═════════════════════════════════════════════════════════════════════════ */
@@ -11636,39 +11833,9 @@ body.setup-mode[data-theme="dark"] {
   border-radius: 6px;
 }
 
-/* ── Period Button Group ─────────────────────────────────────────────── */
-.billing-period-group {
-  display: flex;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  overflow: hidden;
-}
-.billing-period-btn {
-  padding: 0.4375rem 0.75rem;
-  border: none;
-  background: transparent;
-  color: var(--color-text-secondary);
-  font-size: 0.8125rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.billing-period-btn:not(:last-child) {
-  border-right: 1px solid var(--color-border-primary);
-}
-.billing-period-btn:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
-}
-.billing-period-btn.active {
-  background: var(--color-accent-primary);
-  color: #ffffff;
-  font-weight: 500;
-}
-
 /* ── Model Filter ────────────────────────────────────────────────────── */
 .billing-model-filter {
-  padding: 0.4375rem 1.75rem 0.4375rem 0.75rem;
+  padding: 0.5375rem 1.75rem 0.5375rem 0.75rem;
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
   background: var(--color-bg-secondary);
@@ -11693,28 +11860,6 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Action Buttons ──────────────────────────────────────────────────── */
-.billing-clear-container {
-  position: relative;
-}
-.billing-clear-btn {
-  width: 32px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.billing-clear-btn:hover {
-  background: var(--color-bg-tertiary);
-  border-color: #ef4444;
-  color: #ef4444;
-}
 .billing-share-btn {
   display: inline-flex;
   align-items: center;
@@ -11735,43 +11880,6 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-text-primary);
   border-color: var(--color-accent-primary);
 }
-.billing-clear-popup {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  padding: 0.375rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  z-index: 100;
-  min-width: 120px;
-}
-.billing-clear-option {
-  padding: 0.4375rem 0.75rem;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--color-text-primary);
-  font-size: 0.8125rem;
-  cursor: pointer;
-  text-align: left;
-  white-space: nowrap;
-  transition: background 0.15s ease;
-}
-.billing-clear-option:hover {
-  background: var(--color-bg-tertiary);
-}
-.billing-clear-danger {
-  color: #ef4444;
-}
-.billing-clear-danger:hover {
-  background: rgba(239, 68, 68, 0.08) !important;
-}
 
 /* ── Stats Row ───────────────────────────────────────────────────────── */
 .billing-stats-row {
@@ -11901,11 +12009,6 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Cost Trend Line Chart ───────────────────────────────────────────── */
-.billing-trend-total {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-accent-primary);
-}
 .billing-trend-chart {
   flex: 1;
   min-height: 0;
@@ -14050,11 +14153,23 @@ body.setup-mode[data-theme="dark"] {
 }
 
 /* ── Section-level collapse ────────────────────────────────────────────────── */
+#projects-section-header {
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast);
+}
+#projects-section-header:hover {
+  background: var(--color-bg-hover);
+}
+#projects-section-header:hover .btn-icon-sm:hover {
+  background: var(--color-border-primary);
+}
 .projects-section-title {
   display: inline-flex;
   align-items: center;
   gap: 3px;
-  cursor: pointer;
 }
 .projects-section-chevron {
   flex-shrink: 0;
@@ -14078,8 +14193,8 @@ body.setup-mode[data-theme="dark"] {
 .project-group-header {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.3125rem 0.625rem;
+  gap: 0.575rem;
+  padding: 0.3325rem 0.625rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
   user-select: none;
@@ -14095,7 +14210,7 @@ body.setup-mode[data-theme="dark"] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   color: var(--color-text-primary);
 }
 
@@ -14130,117 +14245,25 @@ body.setup-mode[data-theme="dark"] {
 
 /* ── Session group (indented children) ────────────────────────────────────── */
 .project-session-group {
-  padding-left: 0.875rem;
   margin-top: 0.08rem;
 }
 
-.project-sessions-empty {
-  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
+.project-session-group .session-item {
+  padding-left: 2.2rem;
 }
 
-/* ── Project hover tooltip ─────────────────────────────────────────────────── */
-.project-tooltip {
-  position: fixed;
-  z-index: 1200;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 10px;
-  box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
-  padding: 0.75rem 0.875rem 0.75rem 1.125rem; /* extra left padding = visual gap */
-  min-width: 13rem;
-  max-width: 18rem;
-  animation: fadeIn 0.12s ease;
-}
-/* Transparent bridge on the left side fills the gap between sidebar and tooltip */
-.project-tooltip::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -8px;
-  width: 8px;
-  height: 100%;
-}
-[data-theme="dark"] .project-tooltip {
-  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
-}
-
-.project-tooltip-header {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  margin-bottom: 0.75rem;
-}
-.project-tooltip-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  line-height: 0;
-}
-.project-tooltip-icon svg {
-  display: block;
-  flex-shrink: 0;
-}
-.project-tooltip-name {
-  flex: 1;
-  min-width: 0;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.project-tooltip-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-.project-tooltip-row {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  min-width: 0;
-}
-.project-tooltip-row--clickable {
-  cursor: pointer;
-  border-radius: 4px;
-  margin: 0 -0.25rem;
-  padding: 0.15rem 0.25rem;
-  transition: background var(--transition-fast);
-}
-.project-tooltip-row--clickable:hover {
+.project-session-group .session-item.active {
   background: var(--color-bg-hover);
 }
 
-.project-tooltip-divider {
-  height: 1px;
-  background: var(--color-border-primary);
-  margin: 0.25rem 0;
+.project-session-group .session-item.active::before {
+  display: none;
 }
 
-.project-tooltip-row-icon {
-  flex-shrink: 0;
+.project-sessions-empty {
+  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
+  font-size: 0.75rem;
   color: var(--color-text-muted);
-  display: flex;
-  align-items: center;
-  line-height: 0;
-}
-.project-tooltip-row-icon svg {
-  display: block;
-  flex-shrink: 0;
-}
-.project-tooltip-row-text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.4;
 }
 
 /* ── Project context menu (rename / delete) ────────────────────────────────── */
@@ -14258,7 +14281,9 @@ body.setup-mode[data-theme="dark"] {
   box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
 }
 .project-actions-menu-item {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
   padding: 0.375rem 0.625rem;
   border: none;
@@ -14267,17 +14292,43 @@ body.setup-mode[data-theme="dark"] {
   cursor: pointer;
   color: var(--color-text-primary);
   font-size: 0.8125rem;
+  line-height: 1.4;
   text-align: left;
   transition: background .12s ease, color .12s ease;
 }
+.project-actions-menu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  flex: 0 0 0.875rem;
+  color: var(--color-text-secondary);
+  transition: color .12s ease;
+}
+.project-actions-menu-icon svg {
+  display: block;
+  flex-shrink: 0;
+}
+.project-actions-menu-label {
+  min-width: 0;
+  flex: 1;
+}
 .project-actions-menu-item:hover {
   background: var(--color-bg-hover);
 }
+.project-actions-menu-item:hover .project-actions-menu-icon {
+  color: var(--color-text-primary);
+}
 .project-actions-menu-item.danger {
   color: var(--color-error);
   margin-top: 0.25rem;
   position: relative;
 }
+.project-actions-menu-item.danger .project-actions-menu-icon,
+.project-actions-menu-item.danger:hover .project-actions-menu-icon {
+  color: var(--color-error);
+}
 .project-actions-menu-item.danger::before {
   content: "";
   position: absolute;
@@ -14406,6 +14457,13 @@ body.setup-mode[data-theme="dark"] {
   margin-top: 0.75rem;
 }
 
+.create-project-folder-hint {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  margin-top: 0.35rem;
+  line-height: 1.4;
+}
+
 .create-project-folder-label {
   font-size: 0.78rem;
   font-weight: 500;
@@ -14603,4 +14661,3 @@ body.setup-mode[data-theme="dark"] {
 .project-picker-done-btn:hover {
   background: var(--color-bg-hover);
 }
-