aimeat 1.16.2 → 1.18.0

package/dist/public/css/views/marketplace.css

@@ -1,7 +1,40 @@
+/**
+ * @file marketplace.css
+ * @description Styles for the marketplace SPA view (.mk- scoped) — listing cards,
+ *   browse/search forms, status badges, instance selector, and pagination.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Phase 5: tokenize for dark mode (bare color literals → theme tokens)
+ *   v1.2.0 — 2026-06-02 — Component unification (#4 buttons): remove .mk-btn* family;
+ *     marketplace buttons use canonical theme.css .btn-primary / .btn-outline / .btn-sm.
+ *   v1.3.0 — 2026-06-02 — Component unification (#5 inputs): remove .mk-form-input/
+ *     -textarea/-select; fields use canonical .input-field (kept mk-form-group/-label/-grid).
+ *   v1.4.0 — 2026-06-02 — Component unification (#6 stat cards): remove .mk-stat*;
+ *     stats use canonical .stat-grid / .stat-card / .stat-card-value.accent / .stat-card-label.
+ *   v1.5.0 — 2026-06-02 — Component unification (#19): tokenize .mk-alert-success/-error
+ *     (hardcoded rgba/#ef4444 → --success/-danger -bg/-fg/-border) — dark-mode fix.
+ *   v1.6.0 — 2026-06-02 — Component unification (#15 headers): tokenize .mk-page-title
+ *     gradient (hardcoded #E8564A → var(--accent-deep)); now token-equivalent to
+ *     canonical theme.css .page-title/.page-subtitle (candidates for future deletion).
+ *   v1.7.0 — 2026-06-02 — Component unification (#18 category cards): remove .mk-category-card/
+ *     -icon/-name/-count; tiles use canonical theme.css .category-card (kept .mk-categories-grid
+ *     wrapper — 160px columns differ from hobbies' 200px). Removed hardcoded hover #E8564A and
+ *     rgba(0,0,0,0.06) shadow (now tokenized in the canonical class) — dark-mode fix.
+ *   v1.8.0 — 2026-06-02 — Component unification (#17 pagination): tokenize
+ *     .mk-pagination a.active background (hardcoded rgba(232,86,74,0.06) →
+ *     var(--accent-subtle)) — dark-mode fix. Markup left in place (scoped .mk-,
+ *     prev/"Page X"/next shape); canonical Pagination/LoadMore added in theme.css.
+ *   v1.9.0 — 2026-06-02 — Component unification (#16 tags): tokenize .mk-tag and
+ *     .mk-price-badge (hardcoded rgba(232,86,74,0.06)/0.2 + #E8564A →
+ *     var(--accent-subtle) / var(--accent-border) / var(--accent)) — dark-mode fix.
+ *     Markup left as .mk-tag (rounded-20px pill, bespoke vs canonical .tag-pill).
+ */
+
 /* marketplace view — scoped under .mk- */
+/* mk-page-title is token-equivalent to the canonical theme.css .page-title
+   (candidate for future deletion → use .page-title). */
 .mk-page-title {
   font-size: 1.8rem; font-weight: 700;
-  background: linear-gradient(135deg, var(--accent), #E8564A);
+  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
   -webkit-background-clip: text; -webkit-text-fill-color: transparent;
   background-clip: text; margin-bottom: 8px;
 }
@@ -9,11 +42,11 @@
 .mk-section-heading { font-size: 1.1rem; color: var(--text); margin-bottom: 16px; }
 
 .mk-card {
-  background: #FFFFFF; border: 1px solid #E5E7EB;
+  background: var(--bg-card); border: 1px solid var(--border);
   border-radius: 16px; padding: 24px; margin-bottom: 16px;
   transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
 }
-.mk-card:hover { background: #F3F4F6; border-color: #E8564A; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
+.mk-card:hover { background: var(--bg-surface); border-color: #E8564A; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
 .mk-card-clickable { text-decoration: none; display: block; cursor: pointer; }
 .mk-card-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
 .mk-card-meta { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 8px; }
@@ -25,89 +58,69 @@
 .mk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
 .mk-tag {
   display: inline-block; padding: 4px 12px;
-  background: rgba(232,86,74,0.06); border: 1px solid rgba(232,86,74,0.2);
-  border-radius: 20px; font-size: 0.8rem; color: #E8564A; white-space: nowrap;
+  background: var(--accent-subtle); border: 1px solid var(--accent-border);
+  border-radius: 20px; font-size: 0.8rem; color: var(--accent); white-space: nowrap;
 }
 
 .mk-price-badge {
   display: inline-flex; align-items: center; gap: 4px;
-  padding: 6px 14px; background: rgba(232,86,74,0.06);
-  border: 1px solid rgba(232,86,74,0.2); border-radius: 20px;
-  font-size: 0.9rem; font-weight: 600; color: #E8564A;
+  padding: 6px 14px; background: var(--accent-subtle);
+  border: 1px solid var(--accent-border); border-radius: 20px;
+  font-size: 0.9rem; font-weight: 600; color: var(--accent);
 }
 
 .mk-status-badge {
   display: inline-block; padding: 3px 10px; border-radius: 12px;
   font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
 }
-.mk-status-active { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--success); }
-.mk-status-sold { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3); color: #818cf8; }
-.mk-status-pending { background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.3); color: #eab308; }
-.mk-status-delivered { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--success); }
-.mk-status-completed { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3); color: #818cf8; }
-.mk-status-delisted { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }
-
-.mk-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 32px; }
-.mk-stat-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 16px; text-align: center; }
-.mk-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
-.mk-stat-label { font-size: 0.78rem; color: var(--text-muted, #6b6b8a); margin-top: 4px; }
+.mk-status-active { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-fg); }
+.mk-status-sold { background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-fg); }
+.mk-status-pending { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-fg); }
+.mk-status-delivered { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-fg); }
+.mk-status-completed { background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-fg); }
+.mk-status-delisted { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-fg); }
+
+/* .mk-stat* removed — marketplace stats use canonical .stat-grid / .stat-card /
+   .stat-card-value.accent / .stat-card-label. Unified 2026-06-02 (#6). */
 
+/* Grid wrapper kept per-view: marketplace uses 160px min-width columns (hobbies 200px). */
 .mk-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 32px; }
-.mk-category-card {
-  background: #FFFFFF; border: 1px solid #E5E7EB;
-  border-radius: 16px; padding: 20px; text-align: center; text-decoration: none;
-  transition: all 0.2s; cursor: pointer;
-}
-.mk-category-card:hover { background: #F3F4F6; border-color: #E8564A; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
-.mk-category-icon { font-size: 2rem; margin-bottom: 8px; }
-.mk-category-name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
-.mk-category-count { font-size: 0.78rem; color: var(--text-muted, #6b6b8a); margin-top: 4px; }
+/* .mk-category-card/-icon/-name/-count removed — marketplace category tiles use
+   canonical theme.css .category-card / -icon / -name / -count. The former rules were
+   token-equivalent (border-radius:16px === var(--radius)); the hover #E8564A and
+   rgba(0,0,0,0.06) shadow are now tokenized (var(--accent)/var(--shadow-md)).
+   Unified 2026-06-02 (#18). */
 
 .mk-empty-state { text-align: center; padding: 48px 16px; }
 .mk-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.4; }
 .mk-empty-text { color: var(--text-dim); font-size: 1rem; }
 
 .mk-alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 0.9rem; }
-.mk-alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--success); }
-.mk-alert-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }
-.mk-alert-info { background: #F3F4F6; border: 1px solid #E5E7EB; color: var(--text-dim); }
-
-.mk-btn {
-  display: inline-flex; align-items: center; justify-content: center;
-  padding: 10px 24px; border: none; border-radius: 10px;
-  font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none;
-}
-.mk-btn-primary { background: linear-gradient(135deg, var(--accent), #E8564A); color: #fff; }
-.mk-btn-primary:hover { opacity: 0.9; box-shadow: 0 2px 8px rgba(232,86,74,0.2); }
-.mk-btn-secondary { background: #F3F4F6; border: 1px solid #E5E7EB; color: var(--text); }
-.mk-btn-secondary:hover { background: #E5E7EB; border-color: var(--accent); color: var(--accent); }
-.mk-btn-sm { padding: 6px 14px; font-size: 0.8rem; }
+.mk-alert-success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-fg); }
+.mk-alert-error { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-fg); }
+.mk-alert-info { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-dim); }
+
+/* .mk-btn* removed — marketplace uses canonical theme.css .btn-primary / .btn-outline /
+   .btn-sm (anchor-safe). Unified 2026-06-02 (#4 buttons). */
 
 .mk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 .mk-form-group { margin-bottom: 16px; }
 .mk-form-label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
-.mk-form-input, .mk-form-textarea, .mk-form-select {
-  width: 100%; padding: 10px 14px;
-  background: #FFFFFF; border: 1px solid #E5E7EB;
-  border-radius: 10px; color: #1A1A2E; font-size: 0.9rem;
-  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; transition: border-color 0.2s;
-}
-.mk-form-input:focus, .mk-form-textarea:focus, .mk-form-select:focus { outline: none; border-color: var(--accent); }
-.mk-form-textarea { min-height: 80px; resize: vertical; }
-.mk-form-select { appearance: auto; }
+/* .mk-form-input/-textarea/-select removed — marketplace form fields use canonical
+   theme.css .input-field (tokenized, focus ring, var(--font)). Unified 2026-06-02 (#5). */
 
 .mk-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
 .mk-pagination a {
-  padding: 8px 16px; background: #FFFFFF;
-  border: 1px solid #E5E7EB; border-radius: 10px;
+  padding: 8px 16px; background: var(--bg-card);
+  border: 1px solid var(--border); border-radius: 10px;
   color: var(--text); text-decoration: none; font-size: 0.85rem; cursor: pointer;
 }
 .mk-pagination a:hover { border-color: var(--accent); color: var(--accent); }
-.mk-pagination a.active { border-color: var(--accent); color: var(--accent); background: rgba(232,86,74,0.06); }
+.mk-pagination a.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
 
 .mk-stars { color: #eab308; font-size: 1.1rem; letter-spacing: 2px; }
 
-.mk-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #E5E7EB; }
+.mk-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
 .mk-nav a {
   color: var(--text-dim); text-decoration: none; font-size: 0.85rem;
   cursor: pointer; transition: color 0.2s; padding: 4px 8px; border-radius: 6px;
@@ -116,15 +129,15 @@
 
 /* Instance selector */
 .mk-instance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 24px 0; }
-.mk-instance-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color 0.2s, transform 0.1s; }
+.mk-instance-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color 0.2s, transform 0.1s; }
 .mk-instance-card:hover { border-color: var(--accent, #06b6d4); transform: translateY(-2px); }
 .mk-instance-name { font-size: 1.2rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
 .mk-instance-meta { font-size: 0.85rem; color: var(--text-dim, #94a3b8); }
 .mk-visibility-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; }
-.mk-vis-public { background: rgba(34,197,94,0.15); color: #22c55e; }
-.mk-vis-password { background: rgba(234,179,8,0.15); color: #eab308; }
-.mk-vis-invite { background: rgba(129,140,248,0.15); color: #818cf8; }
-.mk-vis-group { background: rgba(16,185,129,0.15); color: #10b981; }
+.mk-vis-public { background: var(--success-bg); color: var(--success-fg); }
+.mk-vis-password { background: var(--warn-bg); color: var(--warn-fg); }
+.mk-vis-invite { background: var(--info-bg); color: var(--info-fg); }
+.mk-vis-group { background: var(--success-bg); color: var(--success-fg); }
 .mk-back-link { cursor: pointer; color: var(--accent, #06b6d4); margin-bottom: 16px; display: inline-block; }
 
 @media (max-width: 600px) {

package/dist/public/css/views/openclaw.css

@@ -1,28 +1,34 @@
+/*
+ * @file openclaw.css
+ * @description Styles for the OpenClaw view (scoped under .oc-). Hero, info cards, code blocks, tool tables, scenario cards, and CTA section.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Phase 5: tokenize for dark mode (replace bare light-only literals with flipping theme tokens)
+ */
 /* openclaw view — scoped under .oc- */
 .oc-container { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
 .oc-hero { text-align: center; padding: 3rem 0 2rem; }
 .oc-hero h1 { font-size: 2.2rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: .75rem; }
 .oc-hero p { font-size: 1.1rem; color: var(--text-dim); max-width: 600px; margin: 0 auto; }
 .oc-section { margin: 3rem 0; }
-.oc-section h2 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #E5E7EB; }
+.oc-section h2 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
 .oc-section h3 { font-size: 1.15rem; font-weight: 600; color: var(--purple); margin: 1.5rem 0 .5rem; }
 .oc-section p, .oc-section li { color: var(--text); font-size: .95rem; margin-bottom: .5rem; }
 .oc-section ul, .oc-section ol { padding-left: 1.5rem; }
 .oc-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
-.oc-info-card { background: var(--card-bg); border: 1px solid #E5E7EB; border-radius: var(--radius); padding: 1.25rem; transition: background .2s; }
+.oc-info-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; transition: background .2s; }
 .oc-info-card:hover { background: var(--card-bg-hover); }
 .oc-info-card .icon { font-size: 1.8rem; margin-bottom: .5rem; }
 .oc-info-card h4 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }
 .oc-info-card p { font-size: .85rem; color: var(--text-muted); margin: 0; }
-.oc-code-block { background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: var(--radius-sm); padding: 1rem 1.25rem; font-family: var(--font-mono); font-size: .85rem; color: #6D28D9; overflow-x: auto; white-space: pre; margin: 1rem 0; position: relative; }
+.oc-code-block { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.25rem; font-family: var(--font-mono); font-size: .85rem; color: var(--purple); overflow-x: auto; white-space: pre; margin: 1rem 0; position: relative; }
 .oc-code-block .label { position: absolute; top: .5rem; right: .75rem; font-size: .7rem; color: var(--text-muted); font-family: var(--font); text-transform: uppercase; letter-spacing: .05em; }
 .oc-tool-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .85rem; }
-.oc-tool-table th { text-align: left; padding: .6rem .75rem; font-weight: 700; color: var(--text); border-bottom: 2px solid #E5E7EB; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
-.oc-tool-table td { padding: .5rem .75rem; border-bottom: 1px solid #F3F4F6; vertical-align: top; }
+.oc-tool-table th { text-align: left; padding: .6rem .75rem; font-weight: 700; color: var(--text); border-bottom: 2px solid var(--border); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
+.oc-tool-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--bg-surface); vertical-align: top; }
 .oc-tool-table tr:hover td { background: rgba(232,86,74,0.04); }
 .oc-tool-name { color: var(--purple); font-family: monospace; font-weight: 600; white-space: nowrap; }
 .oc-tool-params { color: var(--text-muted); font-family: monospace; font-size: .8rem; }
-.oc-scenario { background: var(--card-bg); border: 1px solid #E5E7EB; border-radius: var(--radius); padding: 1.5rem; margin: 1rem 0; }
+.oc-scenario { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin: 1rem 0; }
 .oc-scenario h4 { color: var(--accent); font-size: 1rem; margin-bottom: .5rem; }
 .oc-scenario .flow { color: var(--text-dim); font-size: .9rem; }
 .oc-scenario .flow code { color: var(--purple); background: rgba(109,40,217,.08); padding: .1rem .4rem; border-radius: 4px; }

package/dist/public/css/views/portal-classic.css

@@ -1,3 +1,11 @@
+/*
+ * @file portal-classic.css
+ * @description Styles for the classic portal landing view (scoped under .cl) — hero,
+ *   welcome board, cards grid, mega-prompt, and economy footer.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Phase 5: tokenize for dark mode (replace bare light-only
+ *     surface/border/text literals with theme tokens that flip between light/dark)
+ */
 /* portal-classic view — scoped under .cl */
 /* ── Hero Section ── */
 .cl-hero {
@@ -29,7 +37,7 @@
   border: 1px solid rgba(124, 58, 237, 0.15);
   border-radius: 10px;
   font-size: 0.82rem;
-  color: #6D28D9;
+  color: var(--purple);
   margin-bottom: 1.5rem;
   max-width: 720px;
   margin-left: auto;
@@ -39,7 +47,7 @@
 /* ── Welcome Board ── */
 .cl-welcome-section {
   background: rgba(232, 86, 74, 0.06);
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 16px;
   padding: 1.5rem;
   margin-bottom: 2rem;
@@ -62,9 +70,9 @@
 .cl-board-list {
   max-height: 200px;
   overflow-y: auto;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 10px;
-  background: #FFFFFF;
+  background: var(--bg-card);
 }
 .cl-board-empty {
   padding: 1rem;
@@ -75,7 +83,7 @@
 }
 .cl-board-msg {
   padding: 0.6rem 0.85rem;
-  border-bottom: 1px solid #F3F4F6;
+  border-bottom: 1px solid var(--border);
   font-size: 0.88rem;
   color: var(--text, #374151);
   line-height: 1.5;
@@ -101,8 +109,8 @@
 .cl-memory-input {
   flex: 1;
   padding: 0.85rem 1rem;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 10px;
   color: var(--text, #1A1A2E);
   font-size: 0.95rem;
@@ -114,7 +122,7 @@
 .cl-memory-input:focus {
   border-color: var(--accent, #E8564A);
   box-shadow: 0 0 0 3px rgba(232, 86, 74, 0.15);
-  background: #FFFFFF;
+  background: var(--bg-card);
 }
 .cl-memory-input::placeholder { color: var(--text-muted, #9CA3AF); }
 .cl-welcome-result {
@@ -194,15 +202,15 @@
 
 /* ── Card ── */
 .cl-card {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 16px;
   overflow: hidden;
   transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
   cursor: pointer;
 }
 .cl-card:hover {
-  background: #FFFFFF;
+  background: var(--bg-card);
   border-color: rgba(232, 86, 74, 0.4);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.04);
   transform: translateY(-2px);
@@ -248,7 +256,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  background: #F3F4F6;
+  background: var(--bg-surface);
   color: var(--text-dim, #6B7280);
   font-size: 0.75rem;
   transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
@@ -272,7 +280,7 @@
 
 .cl-card-desc {
   font-size: 0.92rem;
-  color: #6B7280;
+  color: var(--text-dim);
   line-height: 1.7;
   margin-bottom: 1.25rem;
 }
@@ -287,7 +295,7 @@
   border-color: rgba(99, 102, 241, 0.15);
 }
 .cl-group-agents.expanded {
-  border-color: #6366f1;
+  border-color: var(--purple);
   box-shadow: 0 4px 24px rgba(99, 102, 241, 0.1), 0 8px 32px rgba(0, 0, 0, 0.06);
 }
 .cl-group-builders .cl-card-icon {
@@ -314,8 +322,8 @@
   min-height: 200px;
   max-height: 400px;
   padding: 1rem;
-  background: #F3F4F6;
-  border: 1px solid #E5E7EB;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
   border-radius: 10px;
   color: var(--text, #374151);
   font-family: 'Courier New', monospace;
@@ -363,7 +371,7 @@
 .cl-prompt-steps {
   margin-top: 0.75rem;
   font-size: 0.82rem;
-  color: #6B7280;
+  color: var(--text-dim);
   line-height: 1.7;
 }
 .cl-prompt-steps ol { padding-left: 1.2rem; }
@@ -396,14 +404,14 @@
   transform: translateY(-1px);
 }
 .cl-launcher-cta.secondary {
-  background: #F3F4F6;
-  border-color: #E5E7EB;
+  background: var(--bg-surface);
+  border-color: var(--border);
   font-weight: 600;
   font-size: 0.85rem;
   padding: 0.45rem 1rem;
 }
 .cl-launcher-cta.secondary:hover {
-  background: #E5E7EB;
+  background: var(--border);
   border-color: rgba(251, 191, 36, 0.3);
 }
 
@@ -419,11 +427,11 @@
   font-weight: 700;
   font-size: 0.95rem;
   margin-bottom: 0.5rem;
-  color: #374151;
+  color: var(--text-dim);
 }
 .cl-return-motivation {
   font-size: 0.85rem;
-  color: #6B7280;
+  color: var(--text-dim);
   margin-bottom: 0.5rem;
 }
 
@@ -439,20 +447,20 @@
   font-weight: 700;
   font-size: 0.95rem;
   margin-bottom: 0.5rem;
-  color: #374151;
+  color: var(--text-dim);
 }
 .cl-connect-desc {
   font-size: 0.88rem;
-  color: #6B7280;
+  color: var(--text-dim);
   margin-bottom: 0.75rem;
 }
 .cl-connect-link {
-  color: #7C3AED;
+  color: var(--purple);
   text-decoration: underline;
   text-underline-offset: 2px;
   font-size: 0.9rem;
 }
-.cl-connect-link:hover { color: #6D28D9; }
+.cl-connect-link:hover { color: var(--purple); }
 
 /* ── Morsels economy footer ── */
 .cl-morsels-economy {

package/dist/public/css/views/portal-dev.css

@@ -1,4 +1,16 @@
-/* portal-dev view — scoped under .dev-portal */
+/*
+ * @file portal-dev.css
+ * @description "For Developers" portal view styles (.dv-* prefix) — animated
+ *   background layers, onboarding steps, platform/goal cards, prompt output,
+ *   capability tabs. Consumes theme.css tokens so it flips with dark/light.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Phase 4: tokenize card/panel/border/text/bg-layer/code
+ *     surfaces (#FFFFFF/#E5E7EB/#F3F4F6/#6B7280) for dark mode.
+ *   v1.2.0 — 2026-06-02 — Component unification (#6 stat cards): remove .dv-stat*/
+ *     .dv-num/.dv-label; dev-portal stats use canonical .stat-card family.
+ *   v1.3.0 — 2026-06-02 — Component unification (#11): remove .dv-dot (had a
+ *     hardcoded #22c55e); node-badge dot uses canonical <StatusDot>.
+ */
 /* ── Dev Portal root vars ── */
 :root {
   --love1: #E8564A;
@@ -11,24 +23,24 @@
 /* ── Background system ── */
 .dv-bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: opacity .8s ease; }
 .dv-bg-hidden { opacity: 0; }
-.dv-bg-hearts { background: #F3F4F6; }
+.dv-bg-hearts { background: var(--bg); }
 .dv-heart-particle { position: absolute; bottom: -60px; opacity: 0; font-size: 1.2rem; animation: dv-floatUp linear infinite; filter: drop-shadow(0 0 6px rgba(232,86,74,.2)); }
 @keyframes dv-floatUp { 0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0; } 10% { opacity: .7; } 90% { opacity: .7; } 100% { transform: translateY(-110vh) rotate(720deg) scale(.3); opacity: 0; } }
-.dv-bg-aurora { background: #F3F4F6; }
+.dv-bg-aurora { background: var(--bg); }
 .dv-aurora-wave { position: absolute; width: 200%; height: 60%; left: -50%; border-radius: 50%; filter: blur(80px); opacity: .12; animation: dv-auroraShift 8s ease-in-out infinite alternate; }
 .dv-aurora-wave:nth-child(1) { top: 10%; background: linear-gradient(90deg, #E8564A, #D44A3F, #F06B5E, #E8564A); animation-duration: 8s; }
 .dv-aurora-wave:nth-child(2) { top: 30%; background: linear-gradient(90deg, #E8564A, #B8403A, #E8564A, #D44A3F); animation-duration: 12s; animation-delay: -4s; }
 .dv-aurora-wave:nth-child(3) { top: 55%; background: linear-gradient(90deg, #D44A3F, #E8564A, #F06B5E, #B8403A); animation-duration: 10s; animation-delay: -2s; }
 @keyframes dv-auroraShift { 0% { transform: translateX(-20%) scaleY(1); } 50% { transform: translateX(10%) scaleY(1.3); } 100% { transform: translateX(-10%) scaleY(.8); } }
-.dv-bg-sparkle { background: #F3F4F6; }
+.dv-bg-sparkle { background: var(--bg); }
 .dv-sparkle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #E8564A; animation: dv-sparkleAnim ease-in-out infinite; }
 @keyframes dv-sparkleAnim { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px 2px var(--love1), 0 0 20px 4px var(--love4); } }
 .dv-nebula-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .08; animation: dv-nebulaFloat 15s ease-in-out infinite alternate; }
 @keyframes dv-nebulaFloat { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(40px,-30px) scale(1.2); } }
 
 /* BG selector */
-.dv-bg-selector { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200; display: flex; gap: .5rem; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 30px; padding: .4rem .6rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
-.dv-bg-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all .25s; display: flex; align-items: center; justify-content: center; font-size: .9rem; background: #F3F4F6; }
+.dv-bg-selector { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200; display: flex; gap: .5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 30px; padding: .4rem .6rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
+.dv-bg-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all .25s; display: flex; align-items: center; justify-content: center; font-size: .9rem; background: var(--bg-surface); }
 .dv-bg-btn:hover { border-color: var(--love1); transform: scale(1.15); }
 .dv-bg-btn.active { border-color: var(--love1); box-shadow: 0 0 12px rgba(232,86,74,.2); }
 
@@ -38,19 +50,16 @@
 .dv-container h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: .75rem; color: var(--love1); }
 .dv-container h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
 .dv-subtitle { color: var(--love4, #E8564A); font-size: .95rem; margin-bottom: 2rem; }
-.dv-node-badge { display: inline-flex; align-items: center; gap: .5rem; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px; padding: .4rem .8rem; font-size: .85rem; font-family: monospace; margin-bottom: 1.5rem; }
-.dv-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
+.dv-node-badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: .4rem .8rem; font-size: .85rem; font-family: monospace; margin-bottom: 1.5rem; }
+/* .dv-dot removed — node-badge dot uses canonical <StatusDot>. Unified 2026-06-02 (#11). */
 
-/* Stats */
-.dv-stats { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
-.dv-stat { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: .75rem 1rem; flex: 1; min-width: 120px; text-align: center; }
-.dv-num { font-size: 1.5rem; font-weight: 700; color: var(--love1); }
-.dv-label { font-size: .75rem; color: #6B7280; text-transform: uppercase; letter-spacing: .05em; }
+/* Stats — .dv-stat*/.dv-num/.dv-label removed; dev-portal stats use canonical
+   .stat-grid / .stat-card / .stat-card-value.accent / .stat-card-label. Unified 2026-06-02 (#6). */
 
 /* Mode notice */
 .dv-mode-notice { border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1.5rem; font-size: .9rem; display: flex; align-items: flex-start; gap: .75rem; }
-.dv-mode-notice-anon { background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.15); }
-.dv-mode-notice-user { background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.15); }
+.dv-mode-notice-anon { background: var(--purple-bg); border: 1px solid var(--purple-border); }
+.dv-mode-notice-user { background: var(--success-bg); border: 1px solid var(--success-border); }
 .dv-notice-icon { font-size: 1.3rem; flex-shrink: 0; }
 
 /* Steps */
@@ -62,57 +71,57 @@
 
 /* Platform grid */
 .dv-platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
-.dv-platform-card { background: #FFFFFF; border: 2px solid #E5E7EB; border-radius: 12px; padding: 1rem; text-align: center; cursor: pointer; transition: all .15s; }
+.dv-platform-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: 12px; padding: 1rem; text-align: center; cursor: pointer; transition: all .15s; }
 .dv-platform-card:hover { border-color: var(--love1); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(232,86,74,.08); }
 .dv-platform-card.selected { border-color: var(--love1); background: rgba(232,86,74,.06); box-shadow: 0 0 20px rgba(232,86,74,.1); }
 .dv-platform-name { font-weight: 600; font-size: .9rem; }
-.dv-platform-vendor { color: #6B7280; font-size: .75rem; }
+.dv-platform-vendor { color: var(--text-dim); font-size: .75rem; }
 
 /* Variants */
 .dv-variants { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
-.dv-variant-btn { background: #FFFFFF; border: 2px solid #E5E7EB; border-radius: 8px; padding: .4rem .8rem; cursor: pointer; color: var(--text, #1A1A2E); font-size: .85rem; transition: all .15s; font-family: inherit; }
+.dv-variant-btn { background: var(--bg-card); border: 2px solid var(--border); border-radius: 8px; padding: .4rem .8rem; cursor: pointer; color: var(--text, #1A1A2E); font-size: .85rem; transition: all .15s; font-family: inherit; }
 .dv-variant-btn:hover { border-color: var(--love1); }
 .dv-variant-btn.selected { border-color: var(--love1); background: rgba(232,86,74,.06); }
-.dv-variant-note { font-size: .8rem; color: #6B7280; margin-top: .25rem; }
+.dv-variant-note { font-size: .8rem; color: var(--text-dim); margin-top: .25rem; }
 
 /* Panel */
-.dv-panel { background: #FFFFFF; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #E5E7EB; }
+.dv-panel { background: var(--bg-card); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--border); }
 
 /* Prompt output */
 .dv-prompt-output { position: relative; }
-.dv-prompt-text { background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 8px; padding: 1rem; font-family: monospace; font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 500px; overflow-y: auto; line-height: 1.5; color: var(--text, #1A1A2E); }
+.dv-prompt-text { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; font-family: monospace; font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 500px; overflow-y: auto; line-height: 1.5; color: var(--text, #1A1A2E); }
 .dv-copy-btn { position: absolute; top: .5rem; right: .5rem; background: linear-gradient(135deg, var(--love1), var(--love2)); color: #fff; border: none; border-radius: 6px; padding: .4rem .8rem; cursor: pointer; font-weight: 600; font-size: .8rem; z-index: 1; transition: all .2s; font-family: inherit; }
 .dv-copy-btn:hover { background: linear-gradient(135deg, var(--love3), var(--love1)); box-shadow: 0 2px 12px rgba(232,86,74,.2); }
 .dv-copy-btn.copied { background: #22c55e; }
 
 /* Goals */
 .dv-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
-.dv-goal-card { background: #FFFFFF; border: 2px solid #E5E7EB; border-radius: 8px; padding: .75rem; cursor: pointer; transition: all .15s; font-size: .85rem; }
+.dv-goal-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: 8px; padding: .75rem; cursor: pointer; transition: all .15s; font-size: .85rem; }
 .dv-goal-card:hover { border-color: var(--love1); }
 .dv-goal-card.selected { border-color: var(--love1); background: rgba(232,86,74,.06); }
 .dv-goal-icon { font-size: 1.3rem; margin-bottom: .25rem; }
 
 /* Cap tabs */
-.dv-cap-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid #E5E7EB; }
-.dv-cap-tab { flex: 1; padding: .75rem 1rem; text-align: center; cursor: pointer; background: transparent; border: none; color: #6B7280; font-size: .9rem; font-weight: 600; transition: all .2s; border-bottom: 3px solid transparent; margin-bottom: -2px; position: relative; font-family: inherit; }
+.dv-cap-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid var(--border); }
+.dv-cap-tab { flex: 1; padding: .75rem 1rem; text-align: center; cursor: pointer; background: transparent; border: none; color: var(--text-dim); font-size: .9rem; font-weight: 600; transition: all .2s; border-bottom: 3px solid transparent; margin-bottom: -2px; position: relative; font-family: inherit; }
 .dv-cap-tab:hover { color: var(--text, #1A1A2E); background: rgba(232,86,74,.04); }
 .dv-cap-tab.active { color: var(--love1); border-bottom-color: var(--love1); background: rgba(232,86,74,.06); }
 .dv-cap-tab.unavail { opacity: .45; cursor: default; }
-.dv-cap-tab.unavail:hover { background: transparent; color: #6B7280; }
+.dv-cap-tab.unavail:hover { background: transparent; color: var(--text-dim); }
 .dv-tab-icon { font-size: 1.2rem; display: block; margin-bottom: .15rem; }
 .dv-tab-label { font-size: .8rem; display: block; }
 .dv-tab-rec { position: absolute; top: 2px; right: 6px; font-size: .55rem; background: #22c55e; color: #fff; padding: 1px 5px; border-radius: 8px; text-transform: uppercase; letter-spacing: .05em; }
-.dv-unavail-notice { text-align: center; padding: 2rem 1rem; color: #6B7280; font-size: .9rem; }
+.dv-unavail-notice { text-align: center; padding: 2rem 1rem; color: var(--text-dim); font-size: .9rem; }
 .dv-unavail-icon { font-size: 2rem; margin-bottom: .5rem; }
 
 /* Instructions */
-.dv-instructions { background: #FFFFFF; border-radius: 12px; padding: 1.5rem; border: 1px solid #E5E7EB; }
+.dv-instructions { background: var(--bg-card); border-radius: 12px; padding: 1.5rem; border: 1px solid var(--border); }
 .dv-instructions ol { margin-left: 1.5rem; margin-bottom: .75rem; }
 .dv-instructions li { margin-bottom: .5rem; }
-.dv-instructions code { background: #F3F4F6; padding: .15rem .4rem; border-radius: 4px; font-size: .85rem; font-family: monospace; }
+.dv-instructions code { background: var(--code-bg); padding: .15rem .4rem; border-radius: 4px; font-size: .85rem; font-family: monospace; }
 
 /* Upload */
-.dv-upload-area { border: 2px dashed #E5E7EB; border-radius: 12px; padding: 1.5rem; text-align: center; margin-top: 1rem; transition: all .2s; }
+.dv-upload-area { border: 2px dashed var(--border); border-radius: 12px; padding: 1.5rem; text-align: center; margin-top: 1rem; transition: all .2s; }
 .dv-upload-area:hover { border-color: var(--love1); }
 .dv-upload-area.dragover { border-color: var(--love1); background: rgba(232,86,74,.04); }
 .dv-upload-btn { background: linear-gradient(135deg, var(--love1), var(--love2)); color: #fff; border: none; border-radius: 8px; padding: .5rem 1.2rem; cursor: pointer; font-weight: 600; font-size: .9rem; transition: all .2s; font-family: inherit; }
@@ -120,15 +129,15 @@
 .dv-upload-btn:disabled { opacity: .5; cursor: not-allowed; }
 
 /* Share URL */
-.dv-share-url { display: flex; align-items: center; gap: .5rem; background: #F3F4F6; border: 1px solid #22c55e; border-radius: 8px; padding: .6rem 1rem; margin-top: .75rem; font-family: monospace; font-size: .85rem; }
+.dv-share-url { display: flex; align-items: center; gap: .5rem; background: var(--bg-surface); border: 1px solid var(--success); border-radius: 8px; padding: .6rem 1rem; margin-top: .75rem; font-family: monospace; font-size: .85rem; }
 .dv-share-url input { flex: 1; background: none; border: none; color: var(--text, #1A1A2E); font-family: monospace; font-size: .85rem; outline: none; }
 .dv-share-url .dv-copy-btn { position: static; background: #22c55e; color: #fff; padding: .3rem .6rem; font-size: .8rem; }
 
 /* App list */
 .dv-app-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; margin-top: 1rem; }
-.dv-app-item { background: #FFFFFF; border-radius: 8px; padding: 1rem; border: 1px solid #E5E7EB; }
+.dv-app-item { background: var(--bg-card); border-radius: 8px; padding: 1rem; border: 1px solid var(--border); }
 .dv-app-name { font-weight: 600; margin-bottom: .25rem; }
-.dv-app-meta { font-size: .75rem; color: #6B7280; }
+.dv-app-meta { font-size: .75rem; color: var(--text-dim); }
 .dv-app-item a { color: var(--love1, #E8564A); }
 
 @media (max-width: 600px) {