@bakapiano/ccsm 0.5.0 → 0.8.3

package/public/styles.css

@@ -1,1204 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   ccsm · light cream theme · sidebar nav · v0.6
-   ───────────────────────────────────────────────────────────── */
-
-:root {
-  /* Surfaces — cream with neutral whites */
-  --bg:            #faf9f5;
-  --bg-elev:       #ffffff;
-  --sidebar-bg:    #f3f0e8;
-  --sidebar-hover: #ebe7db;
-  --sidebar-active: #e3ddca;
-
-  /* Borders & rules */
-  --border:        #e8e3d5;
-  --border-soft:   #ece8da;
-  --border-strong: #d4cdb8;
-
-  /* Ink */
-  --ink:        #1a1815;
-  --ink-mid:    #534e44;
-  --ink-muted:  #8a8475;
-  --ink-faint:  #b5af9d;
-
-  /* Accent — Claude warm orange/copper */
-  --accent:        #c45f3f;
-  --accent-deep:   #a14d33;
-  --accent-soft:   rgba(196, 95, 63, 0.10);
-  --accent-softer: rgba(196, 95, 63, 0.04);
-
-  /* Status */
-  --green:  #4a8a4a;
-  --yellow: #c4892b;
-  --red:    #b73f3f;
-  --blue:   #4a73a5;
-
-  /* Type */
-  --body: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
-  --mono: "JetBrains Mono", "Cascadia Mono", "Consolas", monospace;
-
-  /* Scale */
-  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
-  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
-  --s-12: 48px; --s-16: 64px;
-
-  /* Radius */
-  --r-sm: 6px;
-  --r:    8px;
-  --r-md: 10px;
-  --r-lg: 14px;
-
-  /* Shadow — soft, like print on cream */
-  --shadow-sm: 0 1px 0 rgba(26, 24, 21, 0.04);
-  --shadow:    0 1px 2px rgba(26, 24, 21, 0.04),
-               0 1px 0 rgba(26, 24, 21, 0.03);
-  --shadow-md: 0 4px 12px -2px rgba(26, 24, 21, 0.08),
-               0 1px 0 rgba(26, 24, 21, 0.04);
-
-  /* Sidebar geometry */
-  --sidebar-w:           232px;
-  --sidebar-w-collapsed: 60px;
-}
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-html, body {
-  background: var(--bg);
-  color: var(--ink);
-  font-family: var(--body);
-  font-size: 14px;
-  line-height: 1.5;
-  font-variant-numeric: tabular-nums;
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-::selection { background: var(--accent); color: var(--bg-elev); }
-
-/* ─────────────────────────────────────────────────────────────
-   App layout
-   ───────────────────────────────────────────────────────────── */
-
-.app {
-  display: grid;
-  grid-template-columns: var(--sidebar-w) 1fr;
-  min-height: 100vh;
-  transition: grid-template-columns .25s cubic-bezier(.4, 0, .2, 1);
-}
-.app:has(.sidebar[data-collapsed="true"]) {
-  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Sidebar
-   ───────────────────────────────────────────────────────────── */
-
-.sidebar {
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  background: var(--sidebar-bg);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  padding: var(--s-4) var(--s-3);
-  overflow: hidden;
-  transition: padding .25s cubic-bezier(.4, 0, .2, 1);
-}
-.sidebar[data-collapsed="true"] {
-  padding: var(--s-4) var(--s-2);
-}
-
-.sidebar-brand {
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
-  padding: var(--s-2) var(--s-2) var(--s-4);
-  height: 56px;
-}
-.brand-mark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  flex: 0 0 32px;
-  background: var(--accent);
-  color: var(--bg-elev);
-  border-radius: var(--r-sm);
-}
-.brand-name {
-  font-size: 19px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  color: var(--ink);
-  white-space: nowrap;
-  opacity: 1;
-  transition: opacity .15s ease;
-}
-.brand-dot { color: var(--accent); }
-.sidebar[data-collapsed="true"] .brand-name { opacity: 0; pointer-events: none; }
-
-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  flex: 0 0 auto;
-}
-
-.nav-item, .util-item {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--s-3);
-  width: 100%;
-  padding: 8px 10px;
-  border-radius: var(--r-sm);
-  cursor: pointer;
-  color: var(--ink-mid);
-  font-family: var(--body);
-  font-size: 13.5px;
-  font-weight: 500;
-  text-align: left;
-  transition: background .12s ease, color .12s ease;
-  position: relative;
-}
-.nav-item:hover, .util-item:hover {
-  background: var(--sidebar-hover);
-  color: var(--ink);
-}
-.nav-item[aria-selected="true"] {
-  background: var(--bg-elev);
-  color: var(--ink);
-  box-shadow: var(--shadow-sm);
-}
-.nav-item[aria-selected="true"]::before {
-  content: "";
-  position: absolute;
-  left: -4px;
-  top: 8px;
-  bottom: 8px;
-  width: 3px;
-  background: var(--accent);
-  border-radius: 2px;
-}
-.nav-icon {
-  display: inline-flex;
-  width: 18px;
-  height: 18px;
-  flex: 0 0 18px;
-  color: currentColor;
-}
-.nav-label {
-  white-space: nowrap;
-  opacity: 1;
-  transition: opacity .15s ease;
-  flex: 1;
-}
-.sidebar[data-collapsed="true"] .nav-label { opacity: 0; pointer-events: none; }
-
-.nav-badge {
-  font-family: var(--mono);
-  font-size: 10.5px;
-  background: var(--border-soft);
-  color: var(--ink-muted);
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-variant-numeric: tabular-nums;
-  opacity: 1;
-  transition: opacity .15s ease;
-}
-.sidebar[data-collapsed="true"] .nav-badge { opacity: 0; }
-.nav-item[aria-selected="true"] .nav-badge {
-  background: var(--accent-soft);
-  color: var(--accent);
-}
-
-.sidebar-divider {
-  margin: var(--s-3) var(--s-2);
-  border-top: 1px solid var(--border);
-}
-
-.sidebar-utility {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.util-accent {
-  color: var(--accent);
-}
-.util-accent:hover {
-  background: var(--accent-soft);
-  color: var(--accent);
-}
-
-.sidebar-foot {
-  margin-top: auto;
-  padding: var(--s-2);
-  display: flex;
-  justify-content: flex-end;
-}
-
-.collapse-toggle {
-  appearance: none;
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--ink-muted);
-  width: 26px;
-  height: 26px;
-  border-radius: var(--r-sm);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background .12s ease, color .12s ease, transform .25s cubic-bezier(.4, 0, .2, 1), border-color .12s;
-}
-.collapse-toggle:hover {
-  background: var(--bg-elev);
-  color: var(--ink);
-  border-color: var(--border-strong);
-}
-.sidebar[data-collapsed="true"] .collapse-toggle {
-  transform: rotate(180deg);
-}
-.sidebar[data-collapsed="true"] .sidebar-foot {
-  justify-content: center;
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Main column
-   ───────────────────────────────────────────────────────────── */
-
-.main {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  padding: var(--s-8) var(--s-10) var(--s-6);
-  gap: var(--s-6);
-}
-
-.page-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--s-8);
-  padding-bottom: var(--s-5);
-  border-bottom: 1px solid var(--border);
-}
-.page-head-inner { min-width: 0; }
-
-.page-title {
-  font-size: 26px;
-  font-weight: 600;
-  letter-spacing: -0.024em;
-  color: var(--ink);
-  line-height: 1.1;
-}
-.page-subtitle {
-  margin-top: 4px;
-  font-size: 13.5px;
-  color: var(--ink-mid);
-}
-
-.page-head-meta {
-  display: flex;
-  align-items: baseline;
-  gap: var(--s-3);
-  flex-shrink: 0;
-  white-space: nowrap;
-  font-family: var(--mono);
-  font-size: 11px;
-  color: var(--ink-muted);
-}
-.ph-stat { display: inline-flex; gap: 6px; align-items: baseline; }
-.ph-key {
-  font-family: var(--body);
-  font-size: 10.5px;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--ink-faint);
-}
-.ph-val { color: var(--ink-mid); }
-.ph-divider { color: var(--ink-faint); }
-
-.content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.tab-panel {
-  display: none;
-  flex-direction: column;
-  gap: var(--s-6);
-}
-.tab-panel[data-active] {
-  display: flex;
-  animation: panel-in .35s cubic-bezier(.4, 0, .2, 1);
-}
-@keyframes panel-in {
-  from { opacity: 0; transform: translateY(6px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Cards
-   ───────────────────────────────────────────────────────────── */
-
-.card {
-  background: var(--bg-elev);
-  border: 1px solid var(--border);
-  border-radius: var(--r-md);
-  overflow: hidden;
-  box-shadow: var(--shadow);
-}
-
-.card-head {
-  padding: var(--s-4) var(--s-6) var(--s-3);
-  border-bottom: 1px solid var(--border-soft);
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: var(--s-4);
-}
-.card-titles { min-width: 0; }
-.card-title {
-  font-size: 15.5px;
-  font-weight: 600;
-  letter-spacing: -0.012em;
-  color: var(--ink);
-}
-.card-meta {
-  margin-top: 2px;
-  font-size: 12.5px;
-  color: var(--ink-muted);
-  font-family: var(--body);
-}
-.card-meta code {
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--ink-mid);
-  background: var(--bg);
-  padding: 1px 5px;
-  border-radius: 4px;
-  border: 1px solid var(--border-soft);
-}
-
-.card-body { padding: var(--s-5) var(--s-6); }
-.card-body-flush { padding: 0; }
-
-/* ─────────────────────────────────────────────────────────────
-   Page-level inline actions (above the cards on a tab)
-   ───────────────────────────────────────────────────────────── */
-
-.page-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--s-4);
-  padding: var(--s-3) var(--s-5);
-  background: var(--bg-elev);
-  border: 1px solid var(--border);
-  border-radius: var(--r-md);
-  box-shadow: var(--shadow-sm);
-}
-.page-actions-hint {
-  font-size: 13px;
-  color: var(--ink-mid);
-}
-.page-actions .action svg { stroke-width: 2; }
-
-/* ─────────────────────────────────────────────────────────────
-   Data table
-   ───────────────────────────────────────────────────────────── */
-
-.table-scroll {
-  overflow-x: auto;
-  /* fade out the right edge slightly when scrollable, like a hint */
-}
-.table-scroll .data { min-width: 760px; }
-.table-scroll::-webkit-scrollbar { height: 8px; }
-
-.data {
-  width: 100%;
-  border-collapse: collapse;
-  font-family: var(--body);
-  font-size: 13.5px;
-}
-
-.data thead th {
-  padding: 10px var(--s-5) 10px;
-  text-align: left;
-  font-family: var(--body);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  color: var(--ink-muted);
-  border-bottom: 1px solid var(--border);
-  background: var(--bg);
-  vertical-align: bottom;
-  white-space: nowrap;
-}
-.data thead th.num { text-align: right; }
-.data thead th.col-mark { width: 28px; padding-left: 0; padding-right: 0; }
-.data thead th.col-star { width: 28px; padding-left: 0; padding-right: 0; }
-.data thead th.col-actions { width: 1px; }
-.data thead th:first-child { padding-left: var(--s-6); }
-.data thead th:last-child { padding-right: var(--s-6); }
-
-.data tbody tr {
-  border-bottom: 1px solid var(--border-soft);
-  transition: background .12s ease;
-}
-.data tbody tr:last-child { border-bottom: 0; }
-.data tbody tr:hover { background: var(--bg); }
-
-.data tbody td {
-  padding: 12px var(--s-5);
-  vertical-align: middle;
-  color: var(--ink);
-}
-.data tbody td:first-child { padding-left: var(--s-6); }
-.data tbody td:last-child { padding-right: var(--s-6); }
-.data tbody td.num {
-  text-align: right;
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--ink-mid);
-}
-
-/* Row entry animation: plays once on first render of each tbody. JS adds
-   .no-anim after that initial render so subsequent re-renders (auto-refresh
-   every 5s) don't restage and flicker. */
-.data tbody:not(.no-anim) tr {
-  animation: row-in .3s ease-out backwards;
-}
-.data tbody:not(.no-anim) tr:nth-child(1)  { animation-delay:   0ms; }
-.data tbody:not(.no-anim) tr:nth-child(2)  { animation-delay:  20ms; }
-.data tbody:not(.no-anim) tr:nth-child(3)  { animation-delay:  40ms; }
-.data tbody:not(.no-anim) tr:nth-child(4)  { animation-delay:  60ms; }
-.data tbody:not(.no-anim) tr:nth-child(5)  { animation-delay:  80ms; }
-.data tbody:not(.no-anim) tr:nth-child(6)  { animation-delay: 100ms; }
-.data tbody:not(.no-anim) tr:nth-child(7)  { animation-delay: 120ms; }
-.data tbody:not(.no-anim) tr:nth-child(8)  { animation-delay: 140ms; }
-.data tbody:not(.no-anim) tr:nth-child(n+9) { animation-delay: 160ms; }
-@keyframes row-in {
-  from { opacity: 0; transform: translateY(3px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* Status indicator — small dot, claude-like */
-.status-mark {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: currentColor;
-  vertical-align: middle;
-  position: relative;
-}
-.status-mark.busy {
-  color: var(--yellow);
-  box-shadow: 0 0 0 0 currentColor;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-.status-mark.idle    { color: var(--green); }
-.status-mark.unknown { color: var(--ink-faint); }
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(196, 137, 43, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 7px rgba(196, 137, 43, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(196, 137, 43, 0);
-  }
-}
-
-/* Composite cells */
-.title-cell { max-width: 420px; min-width: 0; }
-.title-cell .title-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-.title-cell .primary {
-  color: var(--ink);
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 13.5px;
-  min-width: 0;
-  flex: 0 1 auto;
-}
-.title-cell .secondary {
-  font-family: var(--mono);
-  font-size: 10.5px;
-  color: var(--ink-muted);
-  letter-spacing: 0.02em;
-  margin-top: 2px;
-}
-
-.path-cell {
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--ink-mid);
-  max-width: 380px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.branch-tag {
-  display: inline-block;
-  font-family: var(--mono);
-  font-size: 11px;
-  color: var(--ink-mid);
-  background: var(--bg);
-  padding: 2px 7px;
-  border-radius: 4px;
-  border: 1px solid var(--border-soft);
-}
-
-.row-actions {
-  display: flex;
-  gap: var(--s-2);
-  justify-content: flex-end;
-}
-
-/* Star button (favorite toggle) — sits inline next to the title text.
-   Outline by default (faint), fades in to ink on row hover, fills with
-   the accent color when starred. */
-.star-btn {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  padding: 2px;
-  margin: 0;
-  cursor: pointer;
-  color: var(--border-strong);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: color .12s ease, background .12s ease, transform .15s ease;
-  line-height: 0;
-  flex: 0 0 auto;
-  opacity: 0.55;
-}
-.data tbody tr:hover .star-btn {
-  opacity: 1;
-  color: var(--ink-faint);
-}
-.star-btn:hover {
-  color: var(--accent) !important;
-  background: var(--accent-softer);
-  opacity: 1 !important;
-}
-.star-btn:active { transform: scale(0.88); }
-.star-btn.is-fav {
-  color: var(--accent);
-  opacity: 1;
-}
-.star-btn svg { display: block; }
-
-/* Title with icon glyph */
-.card-title .title-icon {
-  color: var(--accent);
-  margin-right: 6px;
-  vertical-align: -2px;
-}
-
-/* Favorites empty state — sits inside the card body (not generic table empty) */
-#favoritesEmpty {
-  padding: var(--s-6) var(--s-6);
-  text-align: center;
-  font-size: 12.5px;
-  color: var(--ink-muted);
-}
-
-.empty {
-  padding: var(--s-12) var(--s-6);
-  text-align: center;
-  font-size: 13px;
-  color: var(--ink-muted);
-}
-.empty code {
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--ink-mid);
-  background: var(--bg);
-  padding: 1px 5px;
-  border-radius: 4px;
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Buttons & form
-   ───────────────────────────────────────────────────────────── */
-
-.action {
-  appearance: none;
-  background: var(--bg-elev);
-  border: 1px solid var(--border-strong);
-  color: var(--ink);
-  padding: 7px 14px;
-  font-family: var(--body);
-  font-size: 13px;
-  font-weight: 500;
-  letter-spacing: -0.005em;
-  border-radius: var(--r-sm);
-  cursor: pointer;
-  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
-  white-space: nowrap;
-  box-shadow: var(--shadow-sm);
-}
-.action:hover {
-  background: var(--bg);
-  border-color: var(--ink-faint);
-}
-.action:active { transform: translateY(0.5px); }
-.action:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
-.action.primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: var(--bg-elev);
-}
-.action.primary:hover {
-  background: var(--accent-deep);
-  border-color: var(--accent-deep);
-}
-.action.small {
-  font-size: 12px;
-  padding: 4px 10px;
-}
-.action.tiny {
-  font-size: 11px;
-  padding: 3px 8px;
-}
-.action.subtle {
-  background: transparent;
-  border-color: var(--border);
-  box-shadow: none;
-  color: var(--ink-mid);
-}
-.action.subtle:hover { background: var(--bg); color: var(--ink); }
-.action.danger {
-  color: var(--red);
-  border-color: var(--border);
-}
-.action.danger:hover {
-  background: rgba(183, 63, 63, 0.06);
-  border-color: var(--red);
-}
-
-.input, input[type="text"], input[type="number"], select, textarea {
-  appearance: none;
-  background: var(--bg-elev);
-  border: 1px solid var(--border-strong);
-  color: var(--ink);
-  padding: 7px 12px;
-  font-family: var(--body);
-  font-size: 13px;
-  border-radius: var(--r-sm);
-  transition: border-color .12s ease, box-shadow .12s ease;
-  width: 100%;
-  max-width: 480px;
-}
-.input.narrow { min-width: 240px; max-width: 320px; }
-.input:focus, input:focus, select:focus, textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
-}
-select {
-  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238a8475' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>");
-  background-repeat: no-repeat;
-  background-position: right 10px center;
-  background-size: 10px;
-  padding-right: 28px;
-}
-textarea {
-  font-family: var(--mono);
-  font-size: 12px;
-  resize: vertical;
-  line-height: 1.55;
-}
-input[type="checkbox"] {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  flex: 0 0 16px;
-  border: 1px solid var(--border-strong);
-  background: var(--bg-elev);
-  border-radius: 4px;
-  cursor: pointer;
-  position: relative;
-  transition: background .12s, border-color .12s;
-}
-input[type="checkbox"]:checked {
-  background: var(--accent);
-  border-color: var(--accent);
-}
-input[type="checkbox"]:checked::after {
-  content: "";
-  position: absolute;
-  left: 4px; top: 1px;
-  width: 5px; height: 9px;
-  border: solid var(--bg-elev);
-  border-width: 0 1.5px 1.5px 0;
-  transform: rotate(45deg);
-}
-
-/* Form layout */
-.form-row {
-  display: flex;
-  align-items: center;
-  gap: var(--s-4);
-  margin-bottom: var(--s-3);
-  flex-wrap: wrap;
-}
-.form-row:last-child { margin-bottom: 0; }
-.form-label {
-  font-family: var(--body);
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--ink-mid);
-  min-width: 96px;
-}
-.row { display: flex; align-items: center; }
-.gap-row { gap: var(--s-3); flex-wrap: wrap; }
-.divider-dot { color: var(--ink-faint); padding: 0 var(--s-1); }
-
-.post-result {
-  margin-top: var(--s-3);
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--ink-muted);
-}
-.muted-text {
-  color: var(--ink-muted);
-  font-size: 12.5px;
-}
-.muted-text strong { color: var(--ink-mid); font-weight: 600; }
-
-/* Chips */
-.chip-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--s-2);
-  flex: 1;
-}
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 12px;
-  border: 1px solid var(--border-strong);
-  background: var(--bg-elev);
-  color: var(--ink-mid);
-  font-family: var(--body);
-  font-size: 12.5px;
-  font-weight: 500;
-  cursor: pointer;
-  user-select: none;
-  transition: all .12s ease;
-  border-radius: 999px;
-}
-.chip input { display: none; }
-.chip:hover {
-  color: var(--ink);
-  border-color: var(--ink-faint);
-}
-.chip::before {
-  content: "";
-  width: 7px;
-  height: 7px;
-  border: 1px solid var(--ink-faint);
-  border-radius: 50%;
-  background: transparent;
-}
-.chip.checked {
-  background: var(--accent-soft);
-  border-color: var(--accent);
-  color: var(--accent-deep);
-}
-.chip.checked::before {
-  background: var(--accent);
-  border-color: var(--accent);
-  box-shadow: inset 0 0 0 2px var(--accent-soft);
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Workspace cards
-   ───────────────────────────────────────────────────────────── */
-
-.workspace-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: var(--s-3);
-}
-.workspace-card {
-  padding: var(--s-4);
-  border: 1px solid var(--border);
-  background: var(--bg-elev);
-  border-radius: var(--r-md);
-  transition: border-color .12s, box-shadow .12s;
-}
-.workspace-card:hover {
-  border-color: var(--border-strong);
-  box-shadow: var(--shadow);
-}
-.workspace-card.in-use {
-  background: linear-gradient(180deg, rgba(196, 137, 43, 0.05), var(--bg-elev));
-  border-color: rgba(196, 137, 43, 0.35);
-}
-.workspace-card .ws-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--s-2);
-  margin-bottom: 4px;
-}
-.workspace-card .ws-name {
-  font-size: 14.5px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  color: var(--ink);
-}
-.workspace-card .ws-tag {
-  font-family: var(--mono);
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 2px 7px;
-  border-radius: 4px;
-  background: var(--bg);
-  color: var(--ink-muted);
-  border: 1px solid var(--border-soft);
-}
-.workspace-card.in-use .ws-tag {
-  background: rgba(196, 137, 43, 0.10);
-  color: var(--yellow);
-  border-color: rgba(196, 137, 43, 0.3);
-}
-.workspace-card .ws-path {
-  font-family: var(--mono);
-  font-size: 11px;
-  color: var(--ink-muted);
-  word-break: break-all;
-  margin-bottom: var(--s-3);
-}
-.workspace-card .ws-repos {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-.workspace-card .ws-repo {
-  font-family: var(--mono);
-  font-size: 10.5px;
-  padding: 2px 7px;
-  border-radius: 4px;
-  background: var(--bg);
-  color: var(--ink-muted);
-  border: 1px solid var(--border-soft);
-}
-.workspace-card .ws-repo.cloned {
-  color: var(--green);
-  background: rgba(74, 138, 74, 0.06);
-  border-color: rgba(74, 138, 74, 0.25);
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Config grid
-   ───────────────────────────────────────────────────────────── */
-
-.config-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--s-5) var(--s-6);
-  align-items: start;
-}
-.config-grid .field { display: flex; flex-direction: column; gap: 6px; }
-.config-grid .field.full { grid-column: 1 / -1; }
-.config-grid .field .label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--ink-mid);
-}
-.config-grid .field .hint {
-  font-size: 11.5px;
-  color: var(--ink-muted);
-  font-style: italic;
-}
-.config-grid .field .hint.inline {
-  display: inline;
-  margin-left: 4px;
-  font-style: italic;
-}
-.config-grid .field.toggle {
-  flex-direction: row;
-  align-items: flex-start;
-  gap: var(--s-3);
-  padding-top: var(--s-4);
-}
-.config-grid .field.toggle .toggle-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.config-grid .field.toggle .label { font-weight: 500; }
-
-.repos-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--s-2);
-}
-.repos-table thead th, .repos-table tbody td {
-  padding: 8px var(--s-2);
-}
-.repos-table thead th:first-child,
-.repos-table tbody td:first-child { padding-left: var(--s-2); }
-.repos-table thead th:last-child,
-.repos-table tbody td:last-child { padding-right: var(--s-2); }
-.repos-table tbody td input { font-size: 12px; max-width: none; }
-
-.form-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--s-3);
-  margin-top: var(--s-4);
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Progress list
-   ───────────────────────────────────────────────────────────── */
-
-.progress-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-2);
-  margin-top: var(--s-3);
-}
-.progress-list:empty { display: none; }
-
-.progress-item {
-  border: 1px solid var(--border);
-  background: var(--bg);
-  border-radius: var(--r-sm);
-  padding: var(--s-3) var(--s-4);
-}
-.progress-item .head {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  align-items: baseline;
-  gap: var(--s-3);
-  margin-bottom: var(--s-2);
-}
-.progress-item .name {
-  font-family: var(--body);
-  font-size: 12.5px;
-  font-weight: 600;
-  color: var(--ink);
-}
-.progress-item .phase {
-  font-family: var(--mono);
-  font-size: 10.5px;
-  color: var(--ink-muted);
-  letter-spacing: 0.04em;
-}
-.progress-item .pct {
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--accent);
-  font-variant-numeric: tabular-nums;
-}
-.progress-bar {
-  height: 3px;
-  background: var(--border);
-  position: relative;
-  overflow: hidden;
-  border-radius: 2px;
-}
-.progress-bar .fill {
-  height: 100%;
-  width: 0;
-  background: var(--accent);
-  transition: width .2s ease;
-  border-radius: 2px;
-}
-.progress-bar .fill.indeterminate {
-  width: 35% !important;
-  animation: indeterm 1.4s ease-in-out infinite;
-}
-@keyframes indeterm {
-  from { transform: translateX(-110%); }
-  to   { transform: translateX(330%); }
-}
-.progress-item.ok .fill { background: var(--green); }
-.progress-item.error .fill { background: var(--red); }
-.progress-item .detail {
-  margin-top: 4px;
-  font-family: var(--mono);
-  font-size: 10.5px;
-  color: var(--ink-muted);
-  min-height: 12px;
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Pagination (recently closed)
-   ───────────────────────────────────────────────────────────── */
-
-.pagination {
-  display: flex;
-  align-items: center;
-  gap: var(--s-3);
-  padding: var(--s-3) var(--s-6);
-  border-top: 1px solid var(--border-soft);
-  background: var(--bg);
-  font-size: 12.5px;
-  color: var(--ink-mid);
-  flex-wrap: wrap;
-}
-.pagination-info {
-  flex: 1;
-  text-align: center;
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--ink-muted);
-}
-.pagination-info strong {
-  color: var(--ink);
-  font-weight: 600;
-}
-.pagination select {
-  font-size: 11.5px;
-  padding: 4px 24px 4px 8px;
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Snapshot preview
-   ───────────────────────────────────────────────────────────── */
-
-.snapshot-detail {
-  margin-top: var(--s-4);
-}
-.snapshot-detail summary {
-  cursor: pointer;
-  font-size: 12.5px;
-  color: var(--ink-mid);
-  padding: var(--s-2) 0;
-  user-select: none;
-  font-weight: 500;
-}
-.snapshot-detail summary::marker { color: var(--accent); }
-.snapshot-detail summary:hover { color: var(--ink); }
-.preview {
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--ink-mid);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--r-sm);
-  padding: var(--s-3);
-  margin-top: var(--s-2);
-  max-height: 280px;
-  overflow: auto;
-  white-space: pre;
-  line-height: 1.55;
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Footer status line
-   ───────────────────────────────────────────────────────────── */
-
-.footer-status {
-  margin-top: auto;
-  padding-top: var(--s-4);
-  border-top: 1px solid var(--border-soft);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--s-2);
-  font-size: 11px;
-  color: var(--ink-muted);
-}
-.footer-status .fs-key {
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 10px;
-  color: var(--ink-faint);
-}
-.footer-status .fs-val {
-  font-family: var(--mono);
-  font-size: 11px;
-  color: var(--ink-mid);
-}
-.footer-status .fs-divider { color: var(--ink-faint); margin: 0 var(--s-1); }
-
-/* ─────────────────────────────────────────────────────────────
-   Toast
-   ───────────────────────────────────────────────────────────── */
-
-.toast {
-  position: fixed;
-  bottom: var(--s-6);
-  right: var(--s-6);
-  z-index: 100;
-  max-width: 420px;
-  padding: var(--s-3) var(--s-4);
-  background: var(--bg-elev);
-  border: 1px solid var(--border-strong);
-  border-left: 3px solid var(--accent);
-  border-radius: var(--r-sm);
-  font-size: 13px;
-  color: var(--ink);
-  letter-spacing: -0.005em;
-  opacity: 0;
-  transform: translateY(8px);
-  transition: opacity .2s ease, transform .2s ease;
-  pointer-events: none;
-  box-shadow: var(--shadow-md);
-}
-.toast.show {
-  opacity: 1;
-  transform: translateY(0);
-}
-.toast.error { border-left-color: var(--red); }
-.toast.ok    { border-left-color: var(--green); }
-
-/* ─────────────────────────────────────────────────────────────
-   Small utilities
-   ───────────────────────────────────────────────────────────── */
-
-code, .kbd {
-  font-family: var(--mono);
-  font-size: 11.5px;
-  padding: 1px 5px;
-  background: var(--bg);
-  border: 1px solid var(--border-soft);
-  border-radius: 4px;
-  color: var(--ink-mid);
-}
-
-/* Scrollbar */
-::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); }
-::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
-
-/* Responsive — narrow screens collapse sidebar */
-@media (max-width: 900px) {
-  .app { grid-template-columns: var(--sidebar-w-collapsed) 1fr !important; }
-  .sidebar { padding: var(--s-4) var(--s-2); }
-  .brand-name, .nav-label, .nav-badge { opacity: 0; pointer-events: none; }
-  .main { padding: var(--s-6) var(--s-5) var(--s-5); }
-  .page-head { flex-direction: column; gap: var(--s-3); }
-  .config-grid { grid-template-columns: 1fr; }
-}