@viberaven/cli 1.7.0 → 1.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/AGENTS.md +64 -64
  2. package/LICENSE +21 -21
  3. package/README.md +67 -67
  4. package/SECURITY.md +59 -59
  5. package/dist/cli.js +697 -632
  6. package/dist/console/app.js +251 -251
  7. package/dist/console/index.html +46 -46
  8. package/dist/console/styles.css +267 -267
  9. package/dist/github-ci.js +1 -1
  10. package/dist/playbooks/_stack-default.json +11 -11
  11. package/dist/playbooks/auth-supabase.json +31 -31
  12. package/dist/playbooks/stripe.json +66 -66
  13. package/dist/playbooks/supabase.json +51 -51
  14. package/dist/playbooks/vercel.json +42 -42
  15. package/dist/report/assets/provider-authjs.svg +5 -5
  16. package/dist/report/assets/provider-aws.svg +5 -5
  17. package/dist/report/assets/provider-logrocket.svg +4 -4
  18. package/dist/report/report-cli.css +1466 -1466
  19. package/dist/report/station.css +11854 -11854
  20. package/dist/report/station.js +8319 -8319
  21. package/dist/stack/scene.css +522 -522
  22. package/dist/stack/stack.css +1691 -1691
  23. package/dist/vendor/anime.umd.min.js +7 -7
  24. package/package.json +96 -96
  25. package/playbooks/_stack-default.json +11 -11
  26. package/playbooks/auth-supabase.json +31 -31
  27. package/playbooks/stripe.json +66 -66
  28. package/playbooks/supabase.json +51 -51
  29. package/playbooks/vercel.json +42 -42
  30. package/schemas/permissions-matrix.schema.json +90 -90
  31. package/schemas/verification-plan.schema.json +350 -350
  32. package/schemas/verification-report.schema.json +550 -550
  33. package/templates/AGENTS.snippet.md +56 -56
  34. package/templates/CLAUDE.snippet.md +14 -14
  35. package/templates/CURSOR.snippet.md +14 -14
package/dist/stack/stack.css CHANGED
@@ -1,1691 +1,1691 @@
1
- /* VibeRaven Studio: one path from "your app" to the launch checklist.
2
- Same language as viberaven.dev: a warm black ground, one gold, the real service marks carrying
3
- the colour, Archivo and IBM Plex Mono, calm motion that only moves when something real happens. */
4
-
5
- :root {
6
- --ground: #0a0a0b;
7
- --panel: #111113;
8
- --panel-2: #16161a;
9
- --panel-3: #1e1e23;
10
- --ink: #f5f5f7;
11
- --ink-2: #a1a1a6;
12
- --ink-3: #6e6e73;
13
- --line: rgba(255, 255, 255, 0.08);
14
- --line-2: rgba(255, 255, 255, 0.14);
15
- --gold: #f2c15f;
16
- --gold-2: #f6dc9c;
17
- --on-gold: #120d00;
18
- --red: #f4715f;
19
- --red-ink: #f5a496;
20
- --warn: #f2c15f;
21
- --warn-ink: #e8c38b;
22
- --green: #6fd08c;
23
- --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
24
- --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
25
- --ease: cubic-bezier(0.16, 1, 0.3, 1);
26
- --top: 64px;
27
- /* Names kept for the panels behind More. */
28
- --bg: var(--ground); --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --acid: var(--gold); --acid-2: var(--gold-2); --on-acid: var(--on-gold); --amber: var(--warn); --r: 10px; --r-lg: 16px;
29
- }
30
-
31
- * { box-sizing: border-box; margin: 0; padding: 0; }
32
- html, body { min-height: 100%; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
33
- button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
34
- button:disabled { cursor: default; }
35
- a { color: inherit; }
36
- code, pre { font-family: var(--mono); }
37
- ::selection { background: rgba(223, 189, 110, 0.3); }
38
- :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
39
- [tabindex="-1"]:focus { outline: none; }
40
- ::-webkit-scrollbar { width: 10px; height: 10px; }
41
- ::-webkit-scrollbar-thumb { background: #34302a; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
42
- .ico { display: inline-flex; flex: none; }
43
- .spin { display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
44
- @keyframes spin { to { transform: rotate(360deg); } }
45
- @keyframes arrive { from { transform: translateY(6px); } to { transform: none; } }
46
- @keyframes settle { from { transform: translateY(4px); } to { transform: none; } }
47
-
48
- /* ---------- shell: top bar, rail, stage ---------- */
49
- .app { display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: var(--top) minmax(0, 1fr); min-height: 100vh; }
50
-
51
- .top { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; height: var(--top); padding: 0 28px; background: var(--ground); border-bottom: 1px solid var(--line); }
52
- .wordmark { font-weight: 760; font-stretch: 125%; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: #f3f0e8; line-height: 1; }
53
- .top-project { display: inline-flex; align-items: baseline; gap: 12px; min-width: 0; padding-left: 22px; border-left: 1px solid var(--line); }
54
- .top-project strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
55
- .top-project code { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
56
- .spacer { flex: 1; }
57
- .more-wrap { position: relative; }
58
- .more-button { gap: 10px; }
59
- .more-button.on { background: rgba(243, 240, 232, 0.06); color: var(--ink); }
60
- .more-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; padding: 6px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 60px rgba(0, 0, 0, 0.55); animation: settle 0.3s var(--ease) both; }
61
- .more-item { display: grid; gap: 2px; width: 100%; padding: 11px 12px; border-radius: 9px; text-align: left; }
62
- .more-item strong { font-size: 14.5px; font-weight: 600; }
63
- .more-item span { font-size: 12.5px; color: var(--ink-3); }
64
- .more-item:hover, .more-item:focus-visible { background: rgba(243, 240, 232, 0.06); outline: none; }
65
-
66
- .rail { position: sticky; top: var(--top); align-self: start; height: calc(100vh - var(--top)); padding: 44px 22px 32px 28px; border-right: 1px solid var(--line); }
67
- .rail ol { list-style: none; }
68
- .rail-step { position: relative; }
69
- .rail-step:not(:last-child)::after { content: ""; position: absolute; left: 11.5px; top: 36px; bottom: 2px; width: 1px; background: var(--line); transition: background 0.5s var(--ease); }
70
- .rail-step.is-passed:not(:last-child)::after { background: rgba(223, 189, 110, 0.5); }
71
- .rail-button { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; width: 100%; padding: 8px 0 26px; text-align: left; }
72
- .rail-mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--on-gold); transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
73
- .rail-copy { display: grid; gap: 3px; min-width: 0; }
74
- .rail-label { font-size: 15.5px; font-weight: 600; color: var(--ink-2); transition: color 0.2s; }
75
- .rail-meta { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
76
- .is-current .rail-mark { box-shadow: inset 0 0 0 1.5px var(--gold); }
77
- .is-current .rail-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
78
- .is-current .rail-label { color: var(--ink); font-weight: 700; }
79
- .is-passed .rail-mark { background: var(--gold); box-shadow: none; }
80
- .is-open .rail-button:hover .rail-label, .is-passed .rail-button:hover .rail-label { color: var(--gold-2); }
81
- .is-locked .rail-button { cursor: default; }
82
- .is-locked .rail-label { color: var(--ink-3); }
83
- .is-locked .rail-meta { opacity: 0.7; }
84
-
85
- .stage { min-width: 0; padding: 52px clamp(28px, 5vw, 76px) 96px; container-type: inline-size; }
86
- .stage-body { max-width: 1040px; }
87
- .stage-body.arrive > * { animation: arrive 0.5s var(--ease) both; }
88
- .stage-body.arrive > *:nth-child(2) { animation-delay: 0.03s; }
89
- .stage-body.arrive > *:nth-child(3) { animation-delay: 0.06s; }
90
- .stage-body.arrive > *:nth-child(n+4) { animation-delay: 0.09s; }
91
- .stage h1 { font-size: clamp(34px, 4.4cqi, 56px); font-weight: 800; font-stretch: 104%; letter-spacing: -0.015em; line-height: 1.06; text-wrap: balance; max-width: 22ch; }
92
- .stage-sub { margin-top: 14px; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
93
- .stage-alert { max-width: 1040px; margin-bottom: 24px; padding: 12px 16px; border-radius: 10px; background: rgba(240, 122, 106, 0.08); box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.4); color: var(--red-ink); }
94
-
95
- .primary-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 40px; }
96
- .primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 15px 26px; border-radius: 12px; background: var(--gold); color: var(--on-gold); font-size: 16.5px; font-weight: 650; letter-spacing: -0.005em; white-space: nowrap; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
97
- .primary:hover:not(:disabled) { background: var(--gold-2); }
98
- .primary:hover:not(:disabled) .ico { transform: translateX(2px); }
99
- .primary .ico { transition: transform 0.25s var(--ease); }
100
- .primary:active:not(:disabled) { transform: translateY(1px); }
101
- .primary:disabled { background: var(--panel-3); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
102
- .primary-note { max-width: 54ch; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
103
- .quiet { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 9px; color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s, color 0.2s; }
104
- .quiet:hover:not(:disabled) { color: var(--ink); background: rgba(243, 240, 232, 0.06); }
105
- .quiet:disabled { color: var(--ink-3); opacity: 0.6; }
106
- .quiet-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0 -12px; }
107
-
108
- /* ---------- step 1: the board ---------- */
109
- .board { position: relative; margin: 44px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) minmax(0, 1fr); grid-template-areas: "left app right"; column-gap: clamp(36px, 6cqi, 88px); align-items: center; min-height: 240px; }
110
- .board.is-solo { grid-template-columns: minmax(0, 340px); grid-template-areas: "app"; min-height: 0; }
111
- .board.is-side { grid-template-columns: minmax(240px, 300px) minmax(0, 340px); grid-template-areas: "app right"; justify-content: start; column-gap: clamp(64px, 10cqi, 140px); min-height: 0; }
112
- .board.is-side .board-col.right { justify-self: stretch; width: 100%; }
113
- .board-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
114
- .board-lines .line { fill: none; stroke: rgba(243, 240, 232, 0.16); stroke-width: 1.2; stroke-dasharray: 3 5; }
115
- .board-lines .line.is-pass { stroke: rgba(223, 189, 110, 0.55); stroke-dasharray: none; }
116
- .board-lines .line.is-warn { stroke: rgba(217, 164, 91, 0.5); stroke-dasharray: none; }
117
- .board-lines .line.is-fail { stroke: rgba(240, 122, 106, 0.8); stroke-dasharray: none; }
118
- .board-lines .pulse { fill: none; stroke: var(--gold-2); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.07 0.93; stroke-dashoffset: 0.07; opacity: 0; }
119
- .board.is-scanning .pulse { animation: board-pulse 2.8s linear infinite; }
120
- @keyframes board-pulse { 0% { stroke-dashoffset: 0.07; opacity: 1; } 55% { stroke-dashoffset: -0.93; opacity: 1; } 55.1%, 100% { stroke-dashoffset: -0.93; opacity: 0; } }
121
- .board-col { list-style: none; display: grid; gap: 14px; width: min(300px, 100%); position: relative; z-index: 1; }
122
- .board-col.left { grid-area: left; justify-self: start; }
123
- .board-col.right { grid-area: right; justify-self: end; }
124
- .node { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center; padding: 15px 17px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
125
- .node img, .node-fallback { grid-row: span 2; width: 32px; height: 32px; object-fit: contain; }
126
- .node-fallback { display: grid; place-items: center; border-radius: 8px; background: var(--panel-3); font-weight: 700; color: var(--ink-2); }
127
- .node-name { font-size: 15.5px; font-weight: 650; }
128
- .node-state { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--ink-3); animation: settle 0.45s var(--ease) both; }
129
- .node-state i, .board-checks i, .sev i { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); }
130
- .node.is-pass .node-state { color: var(--ink-2); }
131
- .node.is-pass .node-state i { background: var(--green); box-shadow: none; }
132
- .node.is-warn .node-state { color: var(--warn-ink); }
133
- .node.is-warn .node-state i { background: var(--warn); box-shadow: none; }
134
- .node.is-fail { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.7); }
135
- .node.is-fail .node-state { color: var(--red-ink); }
136
- .node.is-fail .node-state i { background: var(--red); box-shadow: none; }
137
- .board-app { grid-area: app; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px 22px; border-radius: 16px; background: #171510; box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.45); text-align: center; transition: box-shadow 0.4s var(--ease); }
138
- .board-app.is-fail { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.7); }
139
- .board-app.is-pass { box-shadow: inset 0 0 0 1.5px var(--gold); }
140
- .board-app-name { font-size: 13px; color: var(--ink-3); }
141
- .board-status { min-height: 1.2em; }
142
- .board-status strong { font-size: clamp(20px, 2cqi, 25px); font-weight: 700; font-stretch: 108%; letter-spacing: -0.015em; line-height: 1.15; animation: settle 0.45s var(--ease) both; }
143
- .board-app.is-fail strong { color: var(--red-ink); }
144
- .board-app.is-pass strong { color: var(--gold); }
145
- .board-checks { list-style: none; width: 100%; display: grid; gap: 6px; margin-top: 2px; padding: 12px 4px 0; border-top: 1px solid var(--line); text-align: left; }
146
- .board-checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
147
- .board-checks i { background: var(--green); box-shadow: none; }
148
- .board.is-scanning .board-checks i { background: none; box-shadow: inset 0 0 0 1px var(--ink-3); }
149
-
150
- /* ---------- step 2: findings ---------- */
151
- .findings { display: grid; gap: 30px; margin-top: 40px; }
152
- .group-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
153
- .group-head img { width: 22px; height: 22px; object-fit: contain; }
154
- .group-code { display: grid; place-items: center; width: 22px; height: 22px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
155
- .group-head h2 { font-size: 17px; font-weight: 700; }
156
- .group-count { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
157
- .group ul { list-style: none; }
158
- .finding { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto 16px; align-items: center; gap: 18px; width: 100%; padding: 17px 8px; border-bottom: 1px solid var(--line); text-align: left; transition: background 0.25s var(--ease); }
159
- .finding.is-static { grid-template-columns: 132px minmax(0, 1fr) auto; }
160
- button.finding:hover { background: rgba(243, 240, 232, 0.035); }
161
- button.finding .ico { color: var(--ink-3); transition: transform 0.25s var(--ease), color 0.2s; }
162
- button.finding:hover .ico { color: var(--gold); transform: translateX(3px); }
163
- .finding-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; color: var(--ink); }
164
- .finding.is-first .finding-title { font-weight: 650; }
165
- .sev { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
166
- .sev.is-critical { color: var(--red-ink); } .sev.is-critical i { background: var(--red); box-shadow: none; }
167
- .sev.is-warning { color: var(--warn-ink); } .sev.is-warning i { background: var(--warn); box-shadow: none; }
168
- .sev.is-info { color: var(--ink-3); }
169
- .where { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
170
- .where code { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: rgba(243, 240, 232, 0.05); font-size: 12.5px; color: var(--ink-2); }
171
- .where-more { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
172
- .finding-tag { padding: 3px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
173
-
174
- /* ---------- step 3: fix ---------- */
175
- .fix-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
176
- .fix-count { font-size: 13.5px; color: var(--ink-3); }
177
- /* On the fix step the full path matters more than one line: it wraps instead of cutting the line number. */
178
- .fix-meta .where code { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
179
- .fix-summary { margin-top: 24px; max-width: 72ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
180
- .fix-evidence { list-style: none; display: grid; gap: 7px; margin-top: 16px; max-width: 90ch; }
181
- .fix-evidence li { position: relative; padding-left: 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--ink-3); overflow-wrap: anywhere; }
182
- .fix-evidence li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
183
- .prompt { margin-top: 34px; max-width: 900px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
184
- .prompt header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--line); }
185
- .prompt h2 { font-size: 14px; font-weight: 600; color: var(--ink-2); }
186
- .prompt pre { max-height: 250px; overflow: auto; padding: 16px 18px 18px; font-size: 13px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
187
- .agent-choice { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 30px; padding: 4px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
188
- .agent-option { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
189
- .agent-option:hover:not(:disabled) { color: var(--ink); }
190
- .agent-option.on { background: var(--panel-3); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.5); }
191
- .agent-option i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); }
192
- .agent-option i.ok { background: var(--green); box-shadow: none; }
193
- .agent-option i.no { background: var(--red); box-shadow: none; }
194
- .agent-option:disabled { opacity: 0.6; }
195
- .working-line { display: flex; align-items: center; gap: 14px; margin-top: 20px; color: var(--ink-2); }
196
- .agent-reply { margin-top: 26px; max-width: 900px; max-height: 340px; overflow: auto; padding: 18px 22px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
197
- .agent-reply.is-failed { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.5); }
198
- .agent-reply h2 { font-size: 14px; font-weight: 600; color: var(--ink-3); }
199
- .agent-reply-body { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
200
- .agent-reply-body > * + * { margin-top: 8px; }
201
- .agent-reply-body ul, .agent-reply-body ol { padding-left: 20px; }
202
- .agent-reply-body code { padding: 1px 6px; border-radius: 5px; background: rgba(243, 240, 232, 0.08); font-size: 12.5px; }
203
- .agent-reply-body pre { padding: 10px 12px; border-radius: 8px; background: var(--ground); overflow: auto; }
204
-
205
- /* ---------- step 4: re-check ---------- */
206
- .recheck-meter { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; font-size: 15px; color: var(--ink-2); }
207
- .score-move { margin-top: 20px; font-family: var(--mono); font-size: 14px; color: var(--gold); }
208
- .recheck-next { margin-top: 24px; font-size: 17px; color: var(--ink-2); }
209
-
210
- /* ---------- step 5: ready ---------- */
211
- .strip { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
212
- .strip-item { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 11px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; }
213
- .strip-item img { width: 20px; height: 20px; object-fit: contain; }
214
- .strip-item.is-fail { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.6); }
215
- .ready-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 22px; margin-top: 34px; align-items: start; }
216
- .checklist { padding: 22px 24px 8px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
217
- .checklist h2 { display: flex; align-items: baseline; gap: 12px; font-size: 18px; font-weight: 700; padding-bottom: 14px; }
218
- .checklist-count { margin-left: auto; font-family: var(--mono); font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
219
- .checklist ul { list-style: none; }
220
- .check-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
221
- .tick { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--on-gold); transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease); }
222
- button.tick:hover { box-shadow: inset 0 0 0 1.5px var(--gold); }
223
- button.tick[aria-checked="true"], .tick.on { background: var(--gold); box-shadow: none; }
224
- .tick.is-auto { border-radius: 50%; }
225
- .check-copy { display: grid; gap: 3px; min-width: 0; }
226
- .check-copy strong { font-size: 15px; font-weight: 600; }
227
- .check-copy span { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
228
- .check-copy .check-who { font-size: 12.5px; color: var(--ink-3); opacity: 0.85; }
229
- .check-item.is-done strong { color: var(--ink-2); }
230
- .empty-line { padding: 4px 0 18px; font-size: 14.5px; color: var(--ink-3); }
231
- .final { padding: 24px; border-radius: 16px; background: #171510; box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.45); }
232
- .final h2 { font-size: 19px; font-weight: 700; }
233
- .final p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
234
- .final .final-quota { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
235
- .final .primary { margin-top: 22px; width: 100%; }
236
-
237
- @container (max-width: 820px) {
238
- .board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "app app" "left right"; column-gap: 12px; row-gap: 14px; align-items: start; }
239
- .board.is-solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "app"; }
240
- .board.is-side { grid-template-columns: minmax(0, 1fr); grid-template-areas: "app" "right"; }
241
- .board-lines { display: none; }
242
- .board-col { width: 100%; }
243
- .board-col.left, .board-col.right { justify-self: stretch; }
244
- .board-app { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 18px; }
245
- .board-checks { flex-basis: 100%; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
246
- .ready-grid { grid-template-columns: minmax(0, 1fr); }
247
- .finding { grid-template-columns: 120px minmax(0, 1fr) 16px; }
248
- .finding .where, .finding .finding-tag { grid-column: 2; grid-row: 2; justify-self: start; }
249
- .finding.is-static { grid-template-columns: 120px minmax(0, 1fr); }
250
- }
251
-
252
- /* ---------- sheets behind More ---------- */
253
- .sheet-veil, .drawer-veil { position: fixed; inset: 0; z-index: 35; background: rgba(8, 7, 6, 0.64); }
254
- .side { position: fixed; z-index: 40; top: 12px; right: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px)); display: flex; flex-direction: column; min-height: 0; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 100px rgba(0, 0, 0, 0.6); overflow: hidden; animation: slide-in 0.35s var(--ease) both; }
255
- @keyframes slide-in { from { transform: translateX(16px); } to { transform: none; } }
256
- .drawer { position: fixed; z-index: 40; top: calc(var(--top) + 12px); bottom: 20px; left: 50%; width: min(1080px, calc(100vw - 40px)); transform: translateX(-50%); display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 120px rgba(0, 0, 0, 0.7); overflow: hidden; animation: rise 0.35s var(--ease) both; }
257
- @keyframes rise { from { transform: translate(-50%, 10px); } to { transform: translate(-50%, 0); } }
258
- .drawer-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
259
- .drawer-title { flex: 1; min-width: 0; }
260
- .drawer-head h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
261
- .drawer-title p { margin-top: 6px; max-width: 78ch; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
262
- .drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 22px 24px; }
263
- .drawer .block { padding: 22px; border-radius: 14px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
264
- .drawer .block + .block { margin-top: 14px; }
265
- .drawer .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
266
- .drawer pre.out { padding: 14px 16px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 12.5px; min-height: 130px; max-height: 46vh; overflow: auto; white-space: pre-wrap; line-height: 1.6; }
267
- .block-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
268
- .block-head h4 { font-size: 16px; font-weight: 700; }
269
- .block-head .btn:last-child, .block-head a.btn { margin-left: auto; }
270
- .block-meta { color: var(--ink-3); font-size: 13px; }
271
- .drawer-empty { color: var(--ink-3); font-size: 14px; line-height: 1.65; }
272
-
273
- /* Buttons and small controls used inside the sheets. */
274
- .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; }
275
- .btn:hover:not(:disabled) { background: var(--panel-3); }
276
- .btn:disabled { opacity: 0.55; }
277
- .btn.primary, .btn.acid, .btn.white { height: 38px; padding: 0 15px; font-size: 14px; background: var(--gold); color: var(--on-gold); box-shadow: none; }
278
- .btn.primary:hover:not(:disabled), .btn.acid:hover:not(:disabled), .btn.white:hover:not(:disabled) { background: var(--gold-2); }
279
- .btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); font-weight: 500; }
280
- .btn.ghost:hover:not(:disabled) { background: rgba(243, 240, 232, 0.06); color: var(--ink); }
281
- .btn.sm { height: 34px; padding: 0 12px; font-size: 13.5px; }
282
- .pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
283
- .pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
284
- .pill.green { color: var(--green); } .pill.amber { color: var(--warn-ink); } .pill.red { color: var(--red-ink); } .pill.gray { color: var(--ink-3); }
285
- .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
286
- .tag.acid { color: var(--green); } .tag.red { color: var(--red-ink); } .tag.amber { color: var(--warn-ink); } .tag.dim { color: var(--ink-3); }
287
- select.sel, input.sel { height: 36px; padding: 0 11px; border-radius: 9px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--ground); color: var(--ink); font: inherit; font-size: 13.5px; }
288
-
289
- /* Agent connection steps (Coding agents sheet): installed is not connected. */
290
- .steps { list-style: none; }
291
- .step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
292
- .step:first-child { border-top: 0; padding-top: 0; }
293
- .step-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
294
- .step.done .step-n { background: var(--gold); box-shadow: none; color: var(--on-gold); }
295
- .step-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
296
- .step-state { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
297
- .step-state.ok { color: var(--green); }
298
- .step-body p { margin-top: 7px; max-width: 78ch; color: var(--ink-2); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
299
- .step-row { margin-top: 13px; }
300
-
301
- /* Releases sheet. */
302
- .rel-list { list-style: none; display: grid; gap: 10px; }
303
- .rel { display: flex; align-items: center; gap: 20px; padding: 16px 18px; border-radius: 12px; background: var(--panel); }
304
- .rel-main { flex: 1; min-width: 0; }
305
- .rel-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
306
- .rel .lbl { font-size: 15px; font-weight: 700; }
307
- .rel-sum { margin-top: 6px; color: var(--ink-2); font-size: 13.5px; }
308
- .rel-meta { margin-top: 4px; color: var(--ink-3); font-size: 12.5px; }
309
- .compare-fields { align-items: flex-end; gap: 14px; }
310
- .compare-fields label { display: grid; gap: 8px; flex: 1 1 210px; color: var(--ink-3); font-size: 13px; }
311
- .compare-fields input { width: 100%; height: 42px; }
312
- .compare-actions { display: flex; gap: 8px; }
313
- .compare-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.45); color: var(--red-ink); font-size: 13.5px; }
314
- .diff-result { margin-top: 18px; }
315
- .diff-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 12px; color: var(--ink-3); font-size: 13.5px; }
316
- .diff-stats .diff-range { color: var(--ink); font-weight: 600; }
317
- .diff-stats .add, .diff .add { color: var(--green); }
318
- .diff-stats .del, .diff .del { color: var(--red-ink); }
319
- .diff { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre; overflow: auto; }
320
- .diff .hd { color: var(--ink-3); }
321
-
322
- /* Services sheet: one quiet card per service. */
323
- .rail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
324
- .slab { display: flex; flex-direction: column; min-width: 0; padding: 20px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
325
- .slab.scanning { box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.6); }
326
- .face { display: flex; flex-direction: column; align-items: flex-start; }
327
- .face-top { align-self: stretch; display: flex; justify-content: flex-end; min-height: 24px; }
328
- .face-top .tag { box-shadow: none; padding: 0; color: var(--ink-3); font-weight: 500; }
329
- .face-top .tag.acid { color: var(--green); }
330
- .face-logo { width: 40px; height: 40px; margin: 6px 0 16px; }
331
- .face-logo img { width: 100%; height: 100%; object-fit: contain; }
332
- .face-name { font-size: 18px; font-weight: 700; }
333
- .face-area { margin-top: 3px; color: var(--ink-3); font-size: 13px; }
334
- .slab-status { display: grid; grid-template-columns: 7px 1fr; gap: 8px; margin: 16px 0; min-height: 44px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
335
- .slab-status i { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); }
336
- .slab-status i.g { background: var(--green); box-shadow: none; } .slab-status i.a { background: var(--warn); box-shadow: none; }
337
- .slab-status .fixlink { grid-column: 2; justify-self: start; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
338
- .slab-act { display: flex; margin-top: auto; }
339
- .slab-act .btn { width: 100%; }
340
- .stack-setup { margin-bottom: 16px; border-radius: 14px; background: #171510; box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.4); overflow: hidden; }
341
- .setup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px; }
342
- .setup-heading h2 { font-size: 20px; font-weight: 700; }
343
- .setup-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
344
- .setup-steps li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
345
- .setup-steps li.done { color: var(--ink-2); }
346
- .setup-steps i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 11px; font-style: normal; font-weight: 700; }
347
- .setup-steps li.done i { background: var(--gold); box-shadow: none; color: var(--on-gold); }
348
- .setup-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 0 22px 22px; }
349
- .setup-service { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
350
- .setup-service.selected { box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.6); }
351
- .setup-service img { width: 24px; height: 24px; object-fit: contain; flex: none; }
352
- .setup-service-copy { min-width: 0; }
353
- .setup-service strong { display: block; font-size: 13.5px; font-weight: 600; }
354
- .setup-service small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
355
- .setup-check { margin-left: auto; color: var(--ink-3); }
356
- .selected .setup-check { color: var(--gold); }
357
- .setup-footer { display: flex; align-items: center; gap: 20px; padding: 18px 22px; border-top: 1px solid var(--line); }
358
- .setup-footer strong { font-size: 14px; font-weight: 600; }
359
- .setup-footer p { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
360
- .setup-footer .btn { margin-left: auto; }
361
- .setup-progress { list-style: none; display: grid; gap: 10px; padding: 18px 22px; color: var(--ink-2); font-size: 13.5px; }
362
- .setup-progress li { display: flex; align-items: center; gap: 10px; }
363
- .progress-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
364
- .configured .progress-dot, .review .progress-dot { background: var(--gold); }
365
- .setup-error { margin: 0 22px 22px; padding: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.45); color: var(--red-ink); font-size: 13.5px; }
366
- .setup-note { padding: 0 22px 22px; color: var(--ink-3); }
367
-
368
- /* Agent chat sheet. */
369
- .side-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 60px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
370
- .side-head.tools { display: grid; gap: 10px; min-height: 0; }
371
- .side-head .who { font-size: 16px; font-weight: 700; }
372
- .seg { display: inline-flex; margin-left: auto; padding: 3px; gap: 2px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
373
- .seg button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
374
- .seg button.on { background: var(--panel-3); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.5); }
375
- .seg i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); }
376
- .seg i.g { background: var(--green); box-shadow: none; } .seg i.a { background: var(--warn); box-shadow: none; }
377
- .model-field { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
378
- .model-field .sel { width: 100%; }
379
- .model-note { font-size: 12px; color: var(--ink-3); }
380
- .agent-connection { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
381
- .connection-action { color: var(--ink-2); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
382
- .thread { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
383
- .welcome { padding: 12px 4px; }
384
- .welcome h3 { font-size: 20px; font-weight: 700; }
385
- .welcome p { margin-top: 8px; color: var(--ink-2); }
386
- .suggest { display: grid; gap: 8px; margin-top: 18px; }
387
- .suggest-chip { padding: 12px 14px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; text-align: left; transition: box-shadow 0.2s; }
388
- .suggest-chip:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.5); }
389
- .suggest-chip:disabled { opacity: 0.55; }
390
- .msg { padding: 8px 0; }
391
- .msg .who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 4px; font-size: 13px; font-weight: 700; color: var(--gold); }
392
- .msg .who .t { font-weight: 400; color: var(--ink-3); }
393
- .msg .body { padding: 13px 15px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
394
- .msg .body > * + * { margin-top: 8px; }
395
- .msg .body ul, .msg .body ol { padding-left: 20px; }
396
- .msg .body h4 { font-size: 14px; font-weight: 700; color: var(--ink); }
397
- .msg .body pre { padding: 10px 12px; border-radius: 8px; background: var(--panel); overflow: auto; white-space: pre-wrap; }
398
- .msg .body code { padding: 1px 6px; border-radius: 5px; background: rgba(243, 240, 232, 0.08); }
399
- .msg.me .who { display: none; }
400
- .msg.me .body { float: right; margin-left: 48px; background: var(--panel-3); box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.35); font-weight: 600; }
401
- .msg.me::after { content: ""; display: block; clear: both; }
402
- .msg.err .who { color: var(--red-ink); }
403
- .msg.err .body { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.4); }
404
- .msg .card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
405
- .msg .card img { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; }
406
- .working { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-weight: 600; }
407
- .working .stop { margin-left: auto; }
408
- .working .stop .sq { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
409
- .hint { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 16px 10px; color: var(--ink-2); font-size: 13px; }
410
- .slow-run { padding: 12px 0; line-height: 1.6; }
411
- .slow-run[hidden] { display: none; }
412
- .composer { flex-shrink: 0; margin: 0 14px 14px; padding: 12px 14px 10px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line-2); }
413
- .composer:focus-within { box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.6); }
414
- .composer textarea { width: 100%; min-height: 48px; max-height: 180px; resize: none; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 15px; outline: 0; caret-color: var(--gold); }
415
- .composer textarea::placeholder { color: var(--ink-3); }
416
- .composer .row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
417
- .composer select.mode { max-width: 190px; font-size: 13px; }
418
- .composer .send { width: 40px; height: 40px; margin-left: auto; padding: 0; border-radius: 50%; background: var(--gold); color: var(--on-gold); box-shadow: none; }
419
- .composer .send.stop { background: var(--ink); }
420
- .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(243, 240, 232, 0.07); font-size: 12.5px; }
421
- .chip img { width: 13px; height: 13px; }
422
-
423
- /* ---------- toasts ---------- */
424
- .toasts { position: fixed; left: 50%; bottom: 22px; z-index: 70; display: flex; flex-direction: column; gap: 8px; transform: translateX(-50%); }
425
- .toast { max-width: 560px; padding: 11px 16px; border-radius: 10px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 40px rgba(0, 0, 0, 0.5); color: var(--ink); font-size: 14px; font-weight: 500; animation: settle 0.35s var(--ease) both; }
426
- .toast.err { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.55), 0 16px 40px rgba(0, 0, 0, 0.5); color: var(--red-ink); }
427
-
428
- /* ---------- hosted full check ---------- */
429
- .fc-veil { position: fixed; inset: 0; z-index: 60; background: rgba(8, 7, 6, 0.66); }
430
- .fc-sheet { position: fixed; z-index: 61; top: 5vh; left: 50%; transform: translateX(-50%); width: min(900px, calc(100vw - 32px)); max-height: 90vh; display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 100px rgba(0, 0, 0, 0.6); animation: rise 0.35s var(--ease) both; }
431
- .fc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
432
- .fc-head h2 { font-size: 19px; font-weight: 800; }
433
- .fc-head .btn { background: transparent; box-shadow: none; color: var(--ink-2); font-weight: 500; }
434
- .fc-body { overflow: auto; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
435
- .fc-lead { color: var(--ink-2); font-size: 15px; }
436
- .fc-notice { padding: 11px 14px; border-radius: 10px; background: rgba(223, 189, 110, 0.08); box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.35); color: var(--gold-2); font-size: 13.5px; }
437
- .fc-error { padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.45); color: var(--red-ink); }
438
- .fc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
439
- .fc-wait { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-3); font-size: 13.5px; }
440
- .fc-code { display: flex; align-items: baseline; gap: 14px; width: fit-content; padding: 16px 18px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line-2); }
441
- .fc-code-label { color: var(--ink-3); font-size: 13px; }
442
- .fc-code strong { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: 0.18em; color: var(--gold); }
443
- .fc-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ink-3); font-size: 13px; }
444
- .fc-account .fc-dot::before { content: "·"; margin-right: 12px; color: var(--line-2); }
445
- .fc-link { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
446
- .fc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
447
- .fc-facts > div { min-width: 0; padding: 11px 13px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
448
- .fc-facts dt { color: var(--ink-3); font-size: 12.5px; }
449
- .fc-facts dd { margin-top: 2px; overflow-wrap: anywhere; }
450
- .fc-filegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
451
- .fc-files { min-width: 0; padding: 12px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
452
- .fc-files h4 { margin-bottom: 8px; font-size: 13px; color: var(--ink-2); }
453
- .fc-files ul { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
454
- .fc-files li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
455
- .fc-files li code { overflow-wrap: anywhere; color: var(--ink); }
456
- .fc-files li span { color: var(--ink-3); white-space: nowrap; }
457
- .fc-raw summary { cursor: pointer; color: var(--ink-2); font-size: 13.5px; }
458
- .fc-raw pre { margin-top: 10px; max-height: 280px; overflow: auto; padding: 12px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); font-size: 12.5px; }
459
- .fc-score { display: flex; align-items: center; gap: 18px; }
460
- .fc-score-num { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--gold); font-size: 26px; font-weight: 800; }
461
- .fc-score-label { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 17px; font-weight: 700; }
462
- .fc-score p { color: var(--ink-2); }
463
- .fc-next { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; border-radius: 12px; background: #171510; box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.45); }
464
- .fc-next .fix-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
465
- .fc-next .fix-meta { margin: 0; font-size: 13px; color: var(--ink-3); }
466
- .fc-next h3 { font-size: 17px; font-weight: 700; }
467
- .fc-next p { color: var(--ink-2); }
468
- .fc-eyebrow { font-size: 13px; font-weight: 600; color: var(--gold); }
469
- .fc-h4 { font-size: 14px; font-weight: 700; color: var(--ink-2); }
470
- .fc-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
471
- .fc-area { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
472
- .fc-area.locked { opacity: 0.72; }
473
- .fc-area-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
474
- .fc-area h5 { font-size: 14px; font-weight: 700; }
475
- .fc-count { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--panel-2); color: var(--ink-3); font-size: 12px; font-weight: 700; }
476
- .fc-count.on { color: var(--warn-ink); }
477
- .fc-area ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
478
- .fc-area li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
479
- .fc-area li .tag { flex: none; height: 20px; font-size: 11px; }
480
- .fc-upsell { color: var(--ink-2); font-size: 13.5px; }
481
- .fc-upsell a { color: var(--gold); }
482
- .fc-limit { font-size: 20px; font-weight: 700; line-height: 1.35; }
483
-
484
- /* ---------- narrow screens ---------- */
485
- @media (max-width: 900px) {
486
- .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top) auto minmax(0, 1fr); }
487
- .top { padding: 0 18px; gap: 14px; }
488
- .top-project code { display: none; }
489
- .rail { position: sticky; top: var(--top); z-index: 20; height: auto; padding: 12px 18px; border-right: 0; border-bottom: 1px solid var(--line); background: var(--ground); overflow-x: auto; }
490
- .rail ol { display: flex; gap: 6px; }
491
- .rail-step:not(:last-child)::after { display: none; }
492
- .rail-button { grid-template-columns: 20px auto; gap: 8px; padding: 6px 10px 6px 4px; white-space: nowrap; }
493
- .rail-mark { width: 20px; height: 20px; }
494
- .rail-meta { display: none; }
495
- .rail-label { font-size: 14px; }
496
- .stage { padding: 32px 18px 72px; }
497
- }
498
- @media (max-width: 560px) {
499
- .wordmark { font-size: 13px; }
500
- .top-project { padding-left: 14px; }
501
- .primary { width: 100%; }
502
- .drawer { top: 10px; bottom: 10px; width: calc(100vw - 20px); }
503
- .setup-footer { flex-direction: column; align-items: stretch; }
504
- }
505
- @media (prefers-reduced-motion: reduce) {
506
- *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
507
- .board-lines .pulse { display: none; }
508
- }
509
-
510
- /* ---------- the product look (as on viberaven.dev's hero): neutral black, medium type, a dotted canvas of
511
- service cards, and the path as a small dock at the bottom instead of a sidebar ---------- */
512
- :root { --top: 56px; }
513
- .app { grid-template-columns: minmax(0, 1fr); }
514
- .top { gap: 14px; height: 56px; padding: 0 24px; background: rgba(10, 10, 11, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
515
- .wordmark { font-size: 13px; font-weight: 700; font-stretch: 100%; letter-spacing: 0.08em; }
516
- .wordmark b { font-weight: 700; color: #dfbd6e; }
517
- .top-project { gap: 10px; padding-left: 0; border-left: 0; align-items: center; }
518
- .top-sep { color: var(--ink-3); opacity: 0.7; }
519
- .top-project strong { font-size: 14px; font-weight: 500; }
520
- .top-project code { font-size: 12px; }
521
- .top-verdict { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--ink); white-space: nowrap; }
522
- .top-verdict i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
523
- .top-verdict.is-fail i { background: var(--red); }
524
- .top-verdict.is-warn i { background: var(--warn); }
525
- .top-verdict.is-pass { color: var(--green); border-color: rgba(111, 208, 140, 0.4); }
526
- .top-verdict.is-pass i { background: var(--green); }
527
- .top-verdict.is-pending i { animation: pulse-dot 1.2s ease-in-out infinite; }
528
- @keyframes pulse-dot { 50% { opacity: 0.3; } }
529
- .more-button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; }
530
-
531
- /* The path: a dock, not a sidebar. The step notes stay for screen readers. */
532
- .rail { position: fixed; left: 50%; bottom: 20px; top: auto; z-index: 25; height: auto; transform: translateX(-50%); padding: 4px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(20, 20, 24, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.9); }
533
- .rail ol { display: flex; gap: 2px; }
534
- .rail-step:not(:last-child)::after { display: none; }
535
- .rail-button { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 38px; padding: 0 14px; border-radius: 10px; transition: background 0.2s, color 0.2s; }
536
- .rail-mark { width: 16px; height: 16px; margin: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); }
537
- .rail-mark svg { width: 9px; height: 9px; }
538
- .is-passed .rail-mark { background: var(--green); }
539
- .is-current .rail-mark { box-shadow: inset 0 0 0 1.5px var(--ink); }
540
- .is-current .rail-mark::after { width: 6px; height: 6px; background: var(--ink); }
541
- .rail-copy { display: block; }
542
- .rail-label { font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--ink-3); }
543
- .rail-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
544
- .is-current .rail-button { background: rgba(255, 255, 255, 0.08); }
545
- .is-current .rail-label { color: var(--ink); font-weight: 500; }
546
- .is-passed .rail-label, .is-open .rail-label { color: var(--ink-2); }
547
- .is-open .rail-button:hover .rail-label, .is-passed .rail-button:hover .rail-label { color: var(--ink); }
548
-
549
- /* The stage: centred, calm type. */
550
- .stage { padding: 56px 24px 140px; }
551
- .stage-body { max-width: 1080px; margin: 0 auto; }
552
- .stage-alert { margin-inline: auto; }
553
- .stage h1 { font-size: clamp(32px, 4cqi, 48px); font-weight: 500; font-stretch: 100%; letter-spacing: -0.035em; line-height: 1.05; }
554
- .stage-sub { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
555
- .primary { min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: #0a0a0b; font-size: 15px; font-weight: 500; }
556
- .primary:hover:not(:disabled) { background: #fff; }
557
- .primary:disabled { background: var(--panel-3); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
558
- .primary-note { font-size: 13.5px; }
559
- .quiet { border-radius: 999px; }
560
-
561
- /* Your app: a project canvas. Dotted ground, your app as one card, each service as another. */
562
- .board { margin-top: 36px; padding: 40px 36px; border-radius: 14px; border: 1px solid var(--line-2); background: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.2px) 0 0 / 18px 18px, #0c0c0f; min-height: 300px; }
563
- .board.is-side, .board.is-solo { justify-content: center; }
564
- .board-lines .line, .board-lines .line.is-pass, .board-lines .line.is-warn, .board-lines .line.is-fail { stroke-dasharray: 3 5; stroke-width: 1.2; }
565
- .board-lines .line { stroke: rgba(255, 255, 255, 0.16); }
566
- .board-lines .line.is-pass { stroke: rgba(111, 208, 140, 0.55); }
567
- .board-lines .line.is-warn { stroke: rgba(242, 193, 95, 0.5); }
568
- .board-lines .line.is-fail { stroke: rgba(244, 113, 95, 0.7); }
569
- .node { grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; padding: 12px 14px; border-radius: 10px; background: #141418; box-shadow: none; border: 1px solid var(--line-2); }
570
- .node img, .node-fallback { grid-row: auto; width: 20px; height: 20px; }
571
- .node-name { font-size: 14px; font-weight: 500; }
572
- .node-state { grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
573
- .node.is-fail { box-shadow: none; border-color: rgba(244, 113, 95, 0.55); }
574
- .node.is-warn { border-color: rgba(242, 193, 95, 0.45); }
575
- .node.is-pass .node-state i { background: var(--green); }
576
- .board-app { padding: 18px 18px 16px; border-radius: 12px; background: #141418; box-shadow: none; border: 1px solid var(--line-2); align-items: stretch; text-align: left; }
577
- .board-app.is-fail { box-shadow: none; border-color: rgba(244, 113, 95, 0.55); }
578
- .board-app.is-pass { box-shadow: none; border-color: rgba(111, 208, 140, 0.45); }
579
- .board-app-name { font-size: 12px; }
580
- .board-status strong { font-size: 20px; font-weight: 500; font-stretch: 100%; letter-spacing: -0.02em; }
581
- .board-app.is-pass strong { color: var(--green); }
582
- .board-checks { padding: 10px 0 0; }
583
-
584
- /* Findings: one card per service. */
585
- .findings { gap: 12px; margin-top: 32px; }
586
- .group { border-radius: 14px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
587
- .group-head { padding: 14px 18px; border-bottom: 1px solid var(--line); }
588
- .group-head h2 { font-size: 15px; font-weight: 500; }
589
- .group-head img { width: 20px; height: 20px; }
590
- .finding { grid-template-columns: 118px minmax(0, 1fr) auto 16px; padding: 14px 18px; }
591
- .group li:last-child .finding { border-bottom: 0; }
592
- button.finding:hover { background: rgba(255, 255, 255, 0.03); }
593
- button.finding:hover .ico { color: var(--ink); }
594
- .finding-title { font-size: 14.5px; }
595
- .finding.is-first .finding-title { font-weight: 500; }
596
- .sev { font-size: 12.5px; font-weight: 500; }
597
- .sev.is-critical { color: var(--red); }
598
- .sev.is-warning { color: var(--warn); }
599
- .where code { background: rgba(255, 255, 255, 0.05); font-size: 12px; }
600
-
601
- /* Fix, re-check, ready: the same cards. */
602
- .prompt, .agent-reply, .checklist { border-radius: 14px; background: var(--panel); box-shadow: none; border: 1px solid var(--line); }
603
- .agent-choice { border-radius: 999px; box-shadow: none; border: 1px solid var(--line); }
604
- .agent-option { border-radius: 999px; }
605
- .agent-option.on { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
606
- .checklist h2, .final h2 { font-weight: 500; }
607
- .tick { border-radius: 50%; }
608
- button.tick[aria-checked="true"], .tick.on { background: var(--green); }
609
- .final { border-radius: 14px; background: var(--panel); box-shadow: none; border: 1px solid var(--line-2); }
610
- .strip-item { border-radius: 999px; box-shadow: none; border: 1px solid var(--line); font-weight: 500; }
611
- .score-move { color: var(--green); }
612
-
613
- @media (max-width: 760px) {
614
- .top-verdict { display: none; }
615
- .rail { left: 12px; right: 12px; transform: none; overflow-x: auto; }
616
- .rail-button { padding: 0 10px; }
617
- .board { padding: 20px 14px; }
618
- }
619
-
620
- /* ---------- strong: bright text, black-and-white controls. Gold is the wordmark's only; state colours
621
- (green, amber, red) only where a check says something. ---------- */
622
- :root { --gold: #f5f5f7; --gold-2: #fff; --ink-2: #d4d4d8; --ink-3: #a1a1aa; --line: rgba(255, 255, 255, 0.1); --line-2: rgba(255, 255, 255, 0.2); --on-gold: #0a0a0b; }
623
- :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
624
- ::selection { background: rgba(255, 255, 255, 0.25); }
625
- .stage-sub, .primary-note, .fix-summary, .recheck-next { color: var(--ink-2); }
626
- .top-project code, .rail-label { color: var(--ink-2); }
627
- .is-locked .rail-label { color: var(--ink-3); }
628
-
629
- /* Buttons: white pill for the one thing to do, outlined pill for everything else. */
630
- .btn { height: 38px; padding: 0 16px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-weight: 500; }
631
- .btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
632
- .btn.primary, .btn.acid, .btn.white { background: #f5f5f7; color: #0a0a0b; font-weight: 500; }
633
- .btn.primary:hover:not(:disabled), .btn.acid:hover:not(:disabled), .btn.white:hover:not(:disabled) { background: #fff; }
634
- .btn.ghost { color: var(--ink); }
635
- .btn.sm { height: 34px; padding: 0 14px; }
636
- .quiet { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
637
- .quiet:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
638
- .quiet-row { margin-left: 0; gap: 8px; }
639
- .more-button { color: var(--ink); border-color: var(--line-2); }
640
- .more-button.on { background: #f5f5f7; color: #0a0a0b; }
641
-
642
- /* Sheets behind More: one hairline, medium headings, the page's black. */
643
- .sheet-veil, .drawer-veil { background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
644
- .side, .drawer { background: #0e0e11; box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 120px rgba(0, 0, 0, 0.75); border-radius: 16px; }
645
- .drawer-head h3, .block-head h4, .welcome h3, .setup-heading h2, .face-name, .rel .lbl, .step-title, .side-head .who { font-weight: 500; letter-spacing: -0.015em; }
646
- .drawer-head h3 { font-size: 24px; letter-spacing: -0.03em; }
647
- .drawer-title p, .block-meta, .drawer-empty, .face-area, .rel-meta, .step-state { color: var(--ink-3); }
648
- .drawer .block { background: #141418; box-shadow: inset 0 0 0 1px var(--line); }
649
- .slab { background: #0e0e11; box-shadow: inset 0 0 0 1px var(--line); }
650
- .slab.scanning { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
651
- .slab-status { color: var(--ink-2); }
652
- .slab-status .fixlink { color: var(--ink); }
653
- .face-top .tag { color: var(--ink-2); }
654
- .stack-setup { background: #141418; box-shadow: inset 0 0 0 1px var(--line-2); }
655
- .setup-steps li { color: var(--ink-2); }
656
- .setup-steps li.done i, .step.done .step-n { background: #f5f5f7; color: #0a0a0b; box-shadow: none; }
657
- .step-n { color: var(--ink-2); }
658
- .setup-service.selected { box-shadow: inset 0 0 0 1px #f5f5f7; }
659
- .selected .setup-check { color: #fff; }
660
- .setup-footer p, .setup-note { color: var(--ink-2); }
661
- .configured .progress-dot, .review .progress-dot { background: var(--green); }
662
- .rel { background: #0e0e11; box-shadow: inset 0 0 0 1px var(--line); }
663
- .compare-fields label { color: var(--ink-2); }
664
- select.sel, input.sel { border-radius: 10px; background: #0a0a0b; box-shadow: inset 0 0 0 1px var(--line-2); }
665
- select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #f5f5f7; }
666
-
667
- /* Agent chat. */
668
- .seg { border-radius: 999px; background: #0a0a0b; }
669
- .seg button { border-radius: 999px; color: var(--ink-2); }
670
- .seg button.on { background: #f5f5f7; color: #0a0a0b; box-shadow: none; }
671
- .model-field, .model-note { color: var(--ink-2); }
672
- .connection-action { color: var(--ink); }
673
- .welcome p { color: var(--ink-2); }
674
- .suggest-chip { border-radius: 12px; background: #141418; font-weight: 500; }
675
- .suggest-chip:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #f5f5f7; }
676
- .msg .who { color: var(--ink); font-weight: 500; }
677
- .msg .body { background: #141418; }
678
- .msg.me .body { background: #f5f5f7; color: #0a0a0b; box-shadow: none; font-weight: 500; }
679
- .composer { background: #141418; border-radius: 14px; }
680
- .composer:focus-within { box-shadow: inset 0 0 0 1px #f5f5f7; }
681
- .composer textarea { caret-color: #fff; }
682
- .composer .send { background: #f5f5f7; color: #0a0a0b; }
683
- .composer .send:hover:not(:disabled) { background: #fff; }
684
- .hint { color: var(--ink-2); }
685
-
686
- /* Fix step: the agent picker as black-and-white pills. */
687
- .agent-option { color: var(--ink-2); }
688
- .agent-option.on { background: #f5f5f7; color: #0a0a0b; }
689
- .agent-option.on i.ok { background: #1f9d4c; }
690
- .prompt h2, .agent-reply h2 { color: var(--ink); font-weight: 500; }
691
- .prompt pre, .agent-reply-body { color: var(--ink-2); }
692
- .where code { color: var(--ink); }
693
- .fix-count, .fix-evidence li { color: var(--ink-2); }
694
- .check-copy span, .check-copy .check-who { color: var(--ink-2); }
695
- .final .final-quota { color: var(--ink-2); }
696
- .board-app-name, .group-count, .checklist-count { color: var(--ink-2); }
697
- /* The dock sits over the page's end, so the page ends clear of it. */
698
- .stage { padding-bottom: 160px; }
699
-
700
- /* The path lives in the middle of the top bar: always visible, never over the page. */
701
- .rail { top: 9px; bottom: auto; z-index: 31; padding: 3px; border-radius: 999px; background: #111114; box-shadow: none; }
702
- .rail-button { height: 32px; padding: 0 12px; border-radius: 999px; gap: 7px; }
703
- .rail-label { font-size: 13px; }
704
- .is-current .rail-button { background: #f5f5f7; }
705
- .is-current .rail-label { color: #0a0a0b; }
706
- .is-current .rail-mark { box-shadow: inset 0 0 0 1.5px #0a0a0b; }
707
- .is-current .rail-mark::after { background: #0a0a0b; }
708
- .stage { padding-bottom: 96px; }
709
- @media (max-width: 1180px) { .top-project code { display: none; } }
710
- @media (max-width: 1000px) {
711
- .rail { top: auto; bottom: 16px; border-radius: 14px; }
712
- .stage { padding-bottom: 150px; }
713
- }
714
- @media (max-width: 1180px) { .top-project > span.top-sep:last-of-type { display: none; } }
715
- @media (max-width: 640px) {
716
- .finding, .finding.is-static { grid-template-columns: minmax(0, 1fr) 16px; gap: 6px 12px; padding: 14px 16px; }
717
- .finding .sev { grid-column: 1; grid-row: 1; }
718
- .finding .finding-title { grid-column: 1; grid-row: 2; white-space: normal; }
719
- .finding .where, .finding .finding-tag { grid-column: 1; grid-row: 3; }
720
- .finding > .ico { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
721
- }
722
-
723
- /* ---------- stronger: pure black ground, near-white text, vivid state colours ---------- */
724
- :root {
725
- --ground: #000; --panel: #0e0e10; --panel-2: #151518; --panel-3: #1d1d21;
726
- --ink: #ffffff; --ink-2: #ececf0; --ink-3: #c2c2ca;
727
- --line: rgba(255, 255, 255, 0.13); --line-2: rgba(255, 255, 255, 0.24);
728
- --red: #ff5a45; --red-ink: #ff7a68; --warn: #ffc233; --warn-ink: #ffcf5c; --green: #34d67a;
729
- }
730
- .top { background: rgba(0, 0, 0, 0.9); }
731
- .rail { background: #0e0e10; }
732
- .board { background: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.2px) 0 0 / 18px 18px, #060607; }
733
- .node, .board-app { background: #111114; }
734
- .node.is-fail, .board-app.is-fail { border-color: var(--red); }
735
- .node.is-warn { border-color: rgba(255, 194, 51, 0.7); }
736
- .node.is-pass, .board-app.is-pass { border-color: rgba(52, 214, 122, 0.6); }
737
- .node.is-fail .node-state, .board-app.is-fail strong { color: var(--red-ink); }
738
- .node.is-warn .node-state { color: var(--warn-ink); }
739
- .node.is-pass .node-state { color: #ffffff; }
740
- .board-lines .line.is-pass { stroke: rgba(52, 214, 122, 0.7); }
741
- .board-lines .line.is-warn { stroke: rgba(255, 194, 51, 0.65); }
742
- .board-lines .line.is-fail { stroke: rgba(255, 90, 69, 0.85); }
743
- .group { background: #0b0b0d; border-color: var(--line-2); }
744
- .group-head { background: #111114; }
745
- .sev { font-weight: 600; }
746
- .sev.is-critical { color: var(--red); }
747
- .sev.is-warning { color: var(--warn); }
748
- .sev.is-info { color: var(--ink-3); }
749
- .finding-title { color: #fff; }
750
- .top-verdict { border-color: var(--line-2); font-weight: 500; }
751
- .top-verdict.is-fail { color: #fff; border-color: rgba(255, 90, 69, 0.7); background: rgba(255, 90, 69, 0.12); }
752
- .top-verdict.is-warn { color: #fff; border-color: rgba(255, 194, 51, 0.6); background: rgba(255, 194, 51, 0.1); }
753
- .top-verdict.is-pass { color: var(--green); border-color: rgba(52, 214, 122, 0.6); background: rgba(52, 214, 122, 0.1); }
754
- .prompt, .agent-reply, .checklist, .final, .slab, .rel, .drawer .block { border-color: var(--line-2); }
755
- .prompt pre { color: var(--ink-2); }
756
- .side, .drawer { background: #09090b; }
757
-
758
- /* ---------- full check sheet: one summary, the files, one white Send ---------- */
759
- .fc-veil { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
760
- .fc-sheet { top: 4vh; width: min(760px, calc(100vw - 32px)); max-height: 92vh; border-radius: 18px; background: #0c0c0e; box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 120px rgba(0, 0, 0, 0.75); }
761
- .fc-head { padding: 18px 22px; }
762
- .fc-head h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
763
- .fc-head .btn { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
764
- .fc-body { gap: 14px; padding: 20px 22px 0; }
765
- .fc-lead { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
766
- .fc-hint { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
767
- .fc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
768
- .fc-notice { background: rgba(255, 194, 51, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 194, 51, 0.35); color: var(--warn-ink); }
769
-
770
- /* Sign in: the code as tiles, as on viberaven.dev/connect. */
771
- .fc-code { display: grid; gap: 12px; width: 100%; padding: 20px; border-radius: 14px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); justify-items: center; }
772
- .fc-code-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
773
- #fc-code { display: flex; gap: 8px; font-size: 0; }
774
- #fc-code span { display: grid; place-items: center; width: 46px; height: 56px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); background: #141418; font-family: var(--mono); font-size: 26px; font-weight: 600; text-transform: uppercase; color: var(--ink); }
775
-
776
- /* Review: size first, then who, facts, files. */
777
- .fc-summary { display: grid; gap: 8px; padding: 18px 20px; border-radius: 14px; background: #141418; box-shadow: inset 0 0 0 1px var(--line); }
778
- .fc-summary-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
779
- .fc-summary-size { font-size: 32px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
780
- .fc-summary-what { font-size: 14px; color: var(--ink-2); }
781
- .fc-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--ink-2); }
782
- .fc-account .fc-dot::before { content: "·"; margin-right: 12px; color: var(--ink-3); }
783
- .fc-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f5f5f7; color: #0a0a0b; font-size: 12px; font-weight: 600; }
784
- .fc-who { color: var(--ink); }
785
- .fc-plan { height: 22px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
786
- .fc-plan.is-pro { background: #f5f5f7; color: #0a0a0b; box-shadow: none; }
787
- .fc-link { margin-left: auto; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
788
- .fc-facts { gap: 8px; }
789
- .fc-facts > div { padding: 10px 12px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
790
- .fc-facts dt { font-size: 12px; color: var(--ink-3); }
791
- .fc-facts dd { font-size: 13.5px; color: var(--ink); }
792
- .fc-filegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
793
- .fc-files { padding: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
794
- .fc-files summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); list-style: none; }
795
- .fc-files summary::-webkit-details-marker { display: none; }
796
- .fc-files summary::before { content: "›"; color: var(--ink-3); transition: transform 0.2s; }
797
- .fc-files[open] summary::before { transform: rotate(90deg); }
798
- .fc-files-count { margin-left: auto; min-width: 26px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-family: var(--mono); font-size: 12px; color: var(--ink); }
799
- .fc-files ul { gap: 0; max-height: 240px; overflow: auto; border-top: 1px solid var(--line); }
800
- .fc-files li { padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
801
- .fc-files li:last-child { border-bottom: 0; }
802
- .fc-files li code { color: var(--ink); }
803
- .fc-files li span { color: var(--ink-3); }
804
- .fc-empty { padding: 0 14px 12px; font-size: 13px; color: var(--ink-3); }
805
- .fc-shield { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
806
- .fc-shield::before { content: ""; position: absolute; left: 14px; top: 14px; width: 14px; height: 16px; background: var(--ink-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 0l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 0l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V3z'/%3E%3C/svg%3E") center / contain no-repeat; }
807
- .fc-shield.is-on::before { background: var(--green); }
808
- .fc-raw { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; }
809
- .fc-raw summary { font-size: 13px; color: var(--ink); }
810
- .fc-raw pre { background: #060607; border-radius: 10px; }
811
- /* The actions stay in reach at the bottom of the sheet. */
812
- .fc-footer { position: sticky; bottom: 0; z-index: 1; margin: 4px -22px 0; padding: 14px 22px 18px; background: linear-gradient(180deg, rgba(12, 12, 14, 0), #0c0c0e 30%); }
813
- .fc-actions .btn { height: 44px; padding: 0 20px; }
814
- .fc-actions .btn.primary { font-size: 15px; }
815
-
816
- /* Result: the score as a ring, one next fix, quiet areas as chips. */
817
- .fc-score { gap: 20px; padding: 18px 20px; border-radius: 14px; background: #141418; box-shadow: inset 0 0 0 1px var(--line); }
818
- .fc-score-num { position: relative; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--tone, var(--ink)) calc(var(--score) * 1%), rgba(255, 255, 255, 0.08) 0); font-size: 28px; font-weight: 600; color: var(--ink); box-shadow: none; }
819
- .fc-score-num::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #141418; }
820
- .fc-score-num { isolation: isolate; }
821
- .fc-score-num::before { z-index: -1; }
822
- .fc-score.is-fail { --tone: var(--red); }
823
- .fc-score.is-warn { --tone: var(--warn); }
824
- .fc-score.is-pass { --tone: var(--green); }
825
- .fc-score-label { font-size: 17px; font-weight: 500; color: var(--ink); }
826
- .fc-score p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
827
- .fc-next { gap: 8px; padding: 18px 20px; border-radius: 14px; background: #141418; box-shadow: inset 0 0 0 1px var(--line-2); }
828
- .fc-next.is-critical { box-shadow: inset 0 0 0 1px rgba(255, 90, 69, 0.6); }
829
- .fc-next.is-warning { box-shadow: inset 0 0 0 1px rgba(255, 194, 51, 0.5); }
830
- .fc-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2); }
831
- .fc-next h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
832
- .fc-next p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
833
- .fc-next .btn { margin-top: 6px; height: 38px; }
834
- .fc-h4 { font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 4px; }
835
- .fc-areas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
836
- .fc-area { padding: 14px; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
837
- .fc-area h5 { font-size: 14px; font-weight: 500; }
838
- .fc-count.on { background: rgba(255, 194, 51, 0.14); color: var(--warn); border-radius: 999px; }
839
- .fc-quiet { display: flex; flex-wrap: wrap; gap: 6px; }
840
- .fc-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
841
- .fc-chip-mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(52, 214, 122, 0.16); color: var(--green); font-size: 11px; font-weight: 700; }
842
- .fc-chip.locked { color: var(--ink-3); }
843
- .fc-chip.locked .fc-chip-mark { background: rgba(255, 255, 255, 0.06); }
844
- .fc-chip .tag { height: 20px; font-size: 11px; }
845
- .fc-upsell a { color: var(--ink); }
846
- .fc-limit { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
847
- @media (max-width: 640px) {
848
- .fc-sheet { top: 2vh; max-height: 96vh; }
849
- .fc-body { padding: 16px 16px 0; }
850
- .fc-footer { margin: 4px -16px 0; padding: 12px 16px 16px; }
851
- #fc-code span { width: 38px; height: 48px; font-size: 22px; }
852
- .fc-score { gap: 14px; }
853
- .fc-score-num { width: 68px; height: 68px; font-size: 22px; }
854
- }
855
-
856
- /* ---------- the project canvas, as on the viberaven.dev hero: tabs in the bar, the stack as cards on a dotted
857
- canvas that fills the window, each later step as a panel over the canvas, and the loop as a dock ---------- */
858
- .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
859
-
860
- /* Views in the bar. */
861
- .top-tabs { display: flex; align-self: stretch; gap: 20px; margin-right: 10px; }
862
- .top-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 1px; border-radius: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-3); transition: color 0.15s; }
863
- .top-tab:hover:not(:disabled) { color: var(--ink); }
864
- .top-tab[aria-current="page"] { color: var(--ink); }
865
- .top-tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); }
866
- .top-tab:disabled { opacity: 0.4; cursor: default; }
867
- .top-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-family: var(--mono); font-size: 11px; color: var(--ink); }
868
-
869
- /* The dock: Scan, Fix, Re-check, Launch. */
870
- .rail { top: auto; bottom: 18px; left: 50%; right: auto; transform: translateX(-50%); z-index: 31; padding: 4px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(18, 18, 22, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9); transition: left 0.45s var(--ease); }
871
- .rail ol { display: flex; gap: 2px; }
872
- .rail-button { position: relative; overflow: hidden; height: 40px; padding: 0 16px; border-radius: 10px; gap: 8px; }
873
- .rail-button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); }
874
- .rail-mark, .is-current .rail-mark, .is-passed .rail-mark { display: inline-grid; place-items: center; width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink-3); }
875
- .rail-mark svg { width: 15px; height: 15px; }
876
- .is-current .rail-mark::after { display: none; }
877
- .rail-label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
878
- .is-current .rail-button { background: rgba(255, 255, 255, 0.1); }
879
- .is-current .rail-label, .is-current .rail-mark { color: var(--ink); }
880
- .is-passed .rail-mark { color: var(--green); }
881
- .is-locked .rail-button { opacity: 0.4; }
882
- .rail-time { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: #f7d27f; transform-origin: left; animation: rail-time 1.6s ease-in-out infinite; }
883
- @keyframes rail-time { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
884
- .app:has(.stage.has-panel) .rail { left: calc((100% - min(560px, 46%)) / 2); }
885
-
886
- /* The canvas fills the window under the bar. */
887
- .app .stage { position: relative; height: calc(100vh - var(--top)); height: calc(100dvh - var(--top)); min-height: 360px; padding: 0; overflow: hidden; }
888
- .canvas { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; padding: 48px 32px 128px; background: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.2px) 0 0 / 18px 18px, #060607; transition: right 0.45s var(--ease); }
889
- .stage.has-panel .canvas { right: min(560px, 46%); }
890
- .stage-alert { position: absolute; top: 14px; left: 50%; z-index: 6; transform: translateX(-50%); margin: 0; }
891
- .app .board { width: min(1080px, 100%); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; min-height: 0; }
892
- .app .board-col { width: min(260px, 100%); }
893
-
894
- /* Cards: mark and name, what it is in mono, a hairline, then the state with its verdict at the edge. */
895
- .app .node, .app .board-app { display: block; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: #111114; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.9); text-align: left; transition: border-color 0.45s var(--ease); }
896
- .node-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
897
- .app .node-head img, .app .node-head .node-fallback { flex: none; width: 18px; height: 18px; }
898
- .node-head .ico { display: inline-grid; color: var(--ink); }
899
- .app .node-name { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
900
- .node-detail, .app .board-app-name { display: block; margin: 4px 0 0 27px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
901
- .app .node-state { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
902
- .node-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
903
- .node-verdict { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
904
- .node.is-pass .node-verdict { color: var(--green); }
905
- .node.is-warn .node-verdict { color: var(--warn); }
906
- .node.is-fail .node-verdict { color: var(--red); }
907
- .app .node.is-pass .node-state, .app .node.is-warn .node-state, .app .node.is-fail .node-state { color: var(--ink-2); }
908
- .app .board-app { padding: 14px 16px; }
909
- .app .board-status { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
910
- .app .board-status strong { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
911
- .app .board-checks { margin-top: 10px; padding: 0; border-top: 0; gap: 5px; }
912
- .app .board-checks li { font-size: 12px; color: var(--ink-2); }
913
- .canvas-note { font-size: 12.5px; color: var(--ink-3); text-align: center; }
914
- .stage-body.step-app { position: absolute; left: 0; right: 0; bottom: 78px; z-index: 2; max-width: none; margin: 0; pointer-events: none; }
915
-
916
- /* Every later step: a panel over the canvas. */
917
- .stage-body.panel { position: absolute; top: 14px; right: 14px; bottom: 14px; z-index: 5; width: calc(min(560px, 46%) - 28px); max-width: none; margin: 0; overflow: auto; padding: 20px 24px 32px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(10, 10, 12, 0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); animation: panel-in 0.45s var(--ease) both; }
918
- @keyframes panel-in { from { transform: translateX(28px); opacity: 0; } }
919
- .panel-close { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-bottom: 18px; padding: 0 12px; font-size: 13px; }
920
- .panel h1 { font-size: 26px; max-width: none; letter-spacing: -0.03em; }
921
- .panel .stage-sub { font-size: 15px; }
922
- .panel .primary-row { margin-top: 24px; }
923
- .panel .findings { margin-top: 22px; }
924
- .panel .finding, .panel .finding.is-static { grid-template-columns: minmax(0, 1fr) 16px; gap: 6px 12px; padding: 13px 16px; }
925
- .panel .finding .sev { grid-column: 1; grid-row: 1; }
926
- .panel .finding .finding-title { grid-column: 1; grid-row: 2; white-space: normal; }
927
- .panel .finding .where, .panel .finding .finding-tag { grid-column: 1; grid-row: 3; }
928
- .panel .finding > .ico { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
929
- .panel .ready-grid { grid-template-columns: minmax(0, 1fr); }
930
- .panel .strip { margin-top: 18px; }
931
-
932
- @media (max-width: 1100px) {
933
- .top-tab-count { display: none; }
934
- }
935
- @media (max-width: 900px) {
936
- .stage.has-panel .canvas { right: 0; }
937
- .stage-body.panel { left: 10px; right: 10px; top: 10px; bottom: 76px; width: auto; }
938
- .app:has(.stage.has-panel) .rail { left: 50%; }
939
- #tab-terminal, #tab-releases { display: none; }
940
- }
941
- @media (max-width: 640px) {
942
- .top { gap: 10px; padding: 0 14px; }
943
- .top-project strong { max-width: 30vw; }
944
- .top-tabs { gap: 14px; margin-right: 0; }
945
- .rail { left: 10px; right: 10px; transform: none; }
946
- .app:has(.stage.has-panel) .rail { left: 10px; }
947
- .rail ol { justify-content: space-between; }
948
- .rail-button { padding: 0 10px; gap: 6px; }
949
- .rail-label { font-size: 13px; }
950
- .canvas { place-items: start center; padding: 20px 14px 140px; }
951
- .stage-body.step-app { bottom: 72px; }
952
- .stage-body.panel { padding: 16px 16px 24px; }
953
- }
954
- @media (prefers-reduced-motion: reduce) {
955
- .stage-body.panel, .rail-time { animation: none; }
956
- .canvas, .rail { transition: none; }
957
- }
958
- .app .node.is-focus { border-color: #f5f5f7; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 16px 30px -18px rgba(0, 0, 0, 0.9); }
959
-
960
- /* The board sizes to the canvas, not the window: with a panel open, the space left of it decides the layout. */
961
- .canvas { container-type: inline-size; }
962
- @container (max-width: 820px) {
963
- .app .board { width: min(600px, 100%); }
964
- .app .board-col { width: 100%; }
965
- }
966
- @container (min-width: 560px) and (max-width: 820px) {
967
- .board.is-side { grid-template-columns: minmax(200px, 250px) minmax(200px, 250px); grid-template-areas: "app right"; column-gap: clamp(40px, 8cqi, 72px); align-items: center; }
968
- .board.is-side .board-lines { display: block; }
969
- .app .board.is-side { width: auto; }
970
- }
971
-
972
- /* A movable canvas: drag the ground to pan, drag a card to move it, zoom from the tools. */
973
- .canvas { overflow: hidden; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
974
- .canvas.is-dragging { cursor: grabbing; }
975
- .app .board { transform-origin: 50% 50%; will-change: transform; }
976
- .app .node, .app .board-app { position: relative; cursor: grab; }
977
- .canvas.is-dragging .node, .canvas.is-dragging .board-app { cursor: grabbing; }
978
- .app .node.is-lifted, .app .board-app.is-lifted { z-index: 3; border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 30px 50px -20px rgba(0, 0, 0, 0.95); }
979
- .canvas.is-dragging .board-lines .pulse { animation: none; opacity: 0; }
980
- .canvas-tools { position: absolute; left: 14px; top: 14px; z-index: 4; display: grid; gap: 2px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(17, 17, 20, 0.92); cursor: default; }
981
- .canvas-tool { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--ink-3); transition: background 0.15s, color 0.15s; }
982
- .canvas-tool:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
983
- .canvas-tool.is-reset { display: none; }
984
- .canvas.is-moved .canvas-tool.is-reset { display: grid; }
985
- @media (max-width: 640px) {
986
- .canvas-tools { top: 10px; left: 10px; }
987
- }
988
-
989
- /* Checks on every pull request: a button in the canvas corner and a card that says what it writes. */
990
- .pr-checks { position: absolute; right: 14px; top: 14px; z-index: 4; display: grid; justify-items: end; gap: 8px; cursor: default; }
991
- .pr-checks-button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(17, 17, 20, 0.94); font-size: 13px; font-weight: 500; color: var(--ink); transition: background 0.15s, border-color 0.15s; }
992
- .pr-checks-button:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
993
- .pr-checks-button[aria-expanded="true"] { background: #f5f5f7; border-color: #f5f5f7; color: #0a0a0b; }
994
- .pr-checks-button.is-on { color: var(--ink-2); }
995
- .pr-checks-button.is-on .ico { color: var(--green); }
996
- .pr-card { width: min(340px, calc(100vw - 48px)); display: grid; gap: 10px; padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 14, 0.98); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); animation: settle 0.3s var(--ease) both; }
997
- .pr-card h3 { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
998
- .pr-card p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
999
- .pr-card code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
1000
- .pr-points { display: grid; gap: 6px; padding-left: 16px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
1001
- .pr-command { margin: 0; padding: 10px 12px; border-radius: 9px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-all; }
1002
- .pr-muted { color: var(--ink-3) !important; }
1003
- .pr-error { color: var(--red-ink) !important; }
1004
- .pr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
1005
- @media (max-width: 640px) {
1006
- .pr-checks { top: 10px; right: 10px; }
1007
- .pr-checks-button { height: 32px; padding: 0 12px; font-size: 12.5px; }
1008
- }
1009
- .fc-checked { margin-top: 6px; font-size: 13px; color: var(--ink-3, var(--ink-2)); }
1010
- #show-last-full-check { margin-top: 10px; }
1011
-
1012
- /* ---------- simpler chrome: the site's brand, a plain close, two-line findings with one action each ---------- */
1013
- .brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; color: #f5f5f5; font-family: Inter, var(--font); font-size: 16px; font-weight: 650; letter-spacing: -0.01em; line-height: 1; }
1014
- .brand-mark, .brand-raven { display: block; width: 24px; height: 20px; }
1015
- .panel-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; transition: background 0.15s, color 0.15s; }
1016
- .panel-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1017
- .stage-body.panel > h1 { padding-right: 44px; }
1018
- .finding, .finding.is-static { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 18px; }
1019
- .finding.is-static { grid-template-columns: minmax(0, 1fr); }
1020
- .finding:hover:not(.is-static) { background: rgba(255, 255, 255, 0.035); }
1021
- .finding-main { display: grid; gap: 6px; min-width: 0; }
1022
- .finding-title { white-space: normal; overflow: visible; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
1023
- .finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
1024
- .finding-meta .where code { max-width: 26ch; }
1025
- .finding-go { justify-self: end; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
1026
- .finding.is-first .finding-go { border-color: transparent; background: #f5f5f5; color: #0a0a0b; }
1027
- .agent-ok { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; }
1028
- .agent-ok p { margin: 0; font-size: 14px; color: var(--ink-2); }
1029
-
1030
- /* ---------- the work view: one box to ask, the real app at the centre of the board, the agent beside it,
1031
- and a panel that shows the plan, the run's real steps and its result. Motion only follows real events:
1032
- a step starting, a file changing on disk, a check finishing. ---------- */
1033
- :root {
1034
- --t-hover: 140ms;
1035
- --t-panel: 220ms;
1036
- --t-node: 300ms;
1037
- --t-connect: 480ms;
1038
- --t-settle: 380ms;
1039
- --work: #f2c15f;
1040
- --work-soft: rgba(242, 193, 95, 0.12);
1041
- }
1042
-
1043
- /* The canvas leaves room for the shelf above the dock. */
1044
- .canvas { padding-bottom: 236px; }
1045
-
1046
- /* The shelf: what should change, plus at most four things this project can do now. */
1047
- .shelf { position: absolute; left: 50%; bottom: 80px; z-index: 4; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); display: grid; gap: 9px; cursor: default; }
1048
- .shelf-box { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 7px 0 16px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(15, 15, 18, 0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: border-color var(--t-hover), box-shadow var(--t-hover); }
1049
- .shelf-box:focus-within { border-color: rgba(242, 193, 95, 0.55); box-shadow: 0 0 0 4px rgba(242, 193, 95, 0.07), 0 24px 50px -20px rgba(0, 0, 0, 0.95); }
1050
- .shelf.is-running .shelf-box { border-color: rgba(242, 193, 95, 0.35); }
1051
- .shelf-spark { display: inline-grid; color: var(--work); }
1052
- .shelf-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--ink); font: 450 15px/1 var(--font); }
1053
- .shelf-input::placeholder { color: var(--ink-3); }
1054
- .shelf-input:disabled { cursor: default; }
1055
- .shelf-go { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; background: #f5f5f7; color: #0a0a0b; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background var(--t-hover), transform var(--t-hover); }
1056
- .shelf-go:hover:not(:disabled) { background: #fff; }
1057
- .shelf-go:active:not(:disabled) { transform: translateY(1px); }
1058
- .shelf-go:disabled { background: var(--panel-3); color: var(--ink-3); }
1059
- .shelf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px; }
1060
- .shelf-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(16, 16, 19, 0.95); color: var(--ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover); }
1061
- .shelf-chip:hover:not(:disabled) { color: var(--ink); border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); }
1062
- .shelf-chip:disabled { opacity: 0.45; }
1063
- .shelf-chip.is-main { color: var(--ink); border-color: rgba(242, 193, 95, 0.5); }
1064
- .shelf-chip.is-main .ico { color: var(--work); }
1065
- .shelf-chip.is-quiet { color: var(--ink-3); }
1066
- .shelf-count { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
1067
- .shelf-note { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
1068
-
1069
- /* The app card holds the real app. */
1070
- .app .board.has-screen { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) minmax(0, 1fr); }
1071
- .app .board.has-screen.is-side { grid-template-columns: minmax(300px, 380px) minmax(0, 300px); }
1072
- .app .board.has-screen.is-solo { grid-template-columns: minmax(300px, 400px); }
1073
- .board-col[hidden], .app-files[hidden], .board-checks[hidden] { display: none; }
1074
- .app .board-app.is-working { border-color: rgba(242, 193, 95, 0.6); animation: work-glow 2.8s ease-in-out infinite; }
1075
- @keyframes work-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 95, 0), 0 16px 30px -18px rgba(0, 0, 0, 0.9); } 50% { box-shadow: 0 0 0 5px rgba(242, 193, 95, 0.07), 0 16px 30px -18px rgba(0, 0, 0, 0.9); } }
1076
- .screen { margin-top: 12px; border-radius: 9px; border: 1px solid var(--line-2); background: #0b0b0d; overflow: hidden; }
1077
- .screen-bar { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 9px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
1078
- .screen-dots { display: inline-flex; gap: 4px; }
1079
- .screen-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
1080
- .screen-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1081
- .screen-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 11px; font-weight: 500; color: var(--ink-3); }
1082
- .screen-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
1083
- .screen-live.is-ready { color: var(--green); }
1084
- .screen-live.is-ready i { background: var(--green); animation: live-ring 2.4s ease-out infinite; }
1085
- .screen-live.is-starting { color: var(--work); }
1086
- .screen-live.is-starting i { background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1087
- .screen-live.is-failed { color: var(--red-ink); }
1088
- .screen-live.is-failed i { background: var(--red); }
1089
- @keyframes live-ring { 0% { box-shadow: 0 0 0 0 rgba(111, 208, 140, 0.55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(111, 208, 140, 0); } }
1090
- .screen-body { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
1091
- .screen-body iframe { position: absolute; left: 0; top: 0; width: 250%; height: 250%; border: 0; background: #fff; transform: scale(0.4); transform-origin: 0 0; pointer-events: none; }
1092
- .screen-open { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 6, 7, 0); color: transparent; cursor: pointer; transition: background var(--t-hover), color var(--t-hover); }
1093
- .screen-open span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity var(--t-hover), transform var(--t-hover); }
1094
- .screen-open:hover, .screen-open:focus-visible { background: rgba(6, 6, 7, 0.45); }
1095
- .screen-open:hover span, .screen-open:focus-visible span { opacity: 1; transform: none; }
1096
- .screen-body.is-placeholder, .screen-body.is-skeleton { display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; text-align: center; background: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px) 0 0 / 12px 12px, #0b0b0d; }
1097
- .screen-body p { max-width: 30ch; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
1098
- .screen-body.is-failed p { color: var(--red-ink); }
1099
- .sk { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); }
1100
- .sk-1 { width: 62%; } .sk-2 { width: 44%; } .sk-3 { width: 52%; }
1101
- .screen-body.is-skeleton .sk { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
1102
- @keyframes shimmer { to { background-position: -200% 0; } }
1103
- .screen-cta { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; font-size: 13px; font-weight: 600; text-decoration: none; transition: background var(--t-hover); }
1104
- .screen-cta:hover { background: #fff; }
1105
- .screen-cta .ico { color: #0a0a0b; }
1106
-
1107
- /* Files the run changed, appearing as they change on disk. */
1108
- .app-files { list-style: none; display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
1109
- .app-files li { display: flex; align-items: center; gap: 8px; font-size: 12px; animation: file-in var(--t-settle) var(--ease) both; }
1110
- .app-files code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
1111
- .app-files .add, .work-files .add { font-family: var(--mono); font-size: 11px; color: var(--green); }
1112
- .app-files .del, .work-files .del { font-family: var(--mono); font-size: 11px; color: var(--red-ink); }
1113
- .app-files li.is-added code::before, .work-files li.is-added code::before { content: "new "; color: var(--work); }
1114
- .app-files .more { color: var(--ink-3); }
1115
- @keyframes file-in { from { opacity: 0; transform: translateX(-6px); } }
1116
-
1117
- /* The coding agent on the board. */
1118
- .app .node.is-agent { border-color: rgba(255, 255, 255, 0.2); }
1119
- .app .node.is-agent.is-work { border-color: rgba(242, 193, 95, 0.6); animation: node-in var(--t-node) var(--ease) both; }
1120
- .node.is-agent .node-state i { background: var(--ink-3); box-shadow: none; }
1121
- .node.is-agent.is-work .node-state i { background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1122
- .node.is-agent.is-work .node-verdict { color: var(--work); }
1123
- .node.is-agent.is-pass .node-state i { background: var(--green); }
1124
- .node.is-agent.is-warn .node-state i { background: var(--warn); }
1125
- .node.is-agent.is-fail .node-state i { background: var(--red); }
1126
- @keyframes node-in { from { opacity: 0; transform: translateX(-10px); } }
1127
- .board-lines .line.is-work { stroke: rgba(242, 193, 95, 0.85); stroke-width: 1.5; stroke-dasharray: 5 6; animation: line-flow 0.9s linear infinite; }
1128
- @keyframes line-flow { to { stroke-dashoffset: -11; } }
1129
- .board.is-working .pulse.is-work { animation: board-pulse 2.2s linear infinite; }
1130
-
1131
- /* The panel: plan, run, result. */
1132
- .work-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
1133
- .work-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
1134
- .work-eyebrow.is-plan i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
1135
- .work-eyebrow.is-work { color: var(--work); }
1136
- .work-eyebrow.is-work i { background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1137
- .work-eyebrow.is-pass { color: var(--green); }
1138
- .work-eyebrow.is-pass i { background: var(--green); }
1139
- .work-eyebrow.is-warn { color: var(--warn-ink); }
1140
- .work-eyebrow.is-warn i { background: var(--warn); }
1141
- .work-eyebrow.is-fail { color: var(--red-ink); }
1142
- .work-eyebrow.is-fail i { background: var(--red); }
1143
- .panel h1 { overflow-wrap: anywhere; }
1144
- .plan-list { display: grid; grid-template-columns: 104px minmax(0, 1fr); margin-top: 22px; border-top: 1px solid var(--line); }
1145
- .plan-list dt, .plan-list dd { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
1146
- .plan-list dt { color: var(--ink-3); }
1147
- .plan-list dd { color: var(--ink); }
1148
- .mode-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
1149
- .mode-label { width: 90px; font-size: 13.5px; color: var(--ink-3); }
1150
- .mode-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); }
1151
- .mode-option { height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background var(--t-hover), color var(--t-hover); }
1152
- .mode-option:hover:not(.on):not(:disabled) { color: var(--ink); }
1153
- .mode-option.on { background: #f5f5f7; color: #0a0a0b; }
1154
- .work-error { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: rgba(244, 113, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(244, 113, 95, 0.35); font-size: 13.5px; color: var(--red-ink); }
1155
- .work-hint { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
1156
- .work-live { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: var(--work-soft); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
1157
- .work-pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1158
- .work-elapsed { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
1159
- .work-steps { list-style: none; display: grid; margin-top: 20px; }
1160
- .work-step { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
1161
- .work-step:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 24px; bottom: 2px; width: 1px; background: var(--line-2); }
1162
- .work-step.is-done:not(:last-child)::after { background: rgba(111, 208, 140, 0.45); }
1163
- .work-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--ink-3); transition: background var(--t-node), box-shadow var(--t-node); }
1164
- .work-step.is-active .work-mark { box-shadow: inset 0 0 0 1.5px var(--work); }
1165
- .work-step.is-active .work-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1166
- .work-step.is-done .work-mark, .work-checks .is-passed .work-mark { background: var(--green); box-shadow: none; color: #04140a; animation: settle var(--t-settle) var(--ease) both; }
1167
- .work-step.is-failed .work-mark, .work-checks .is-failed .work-mark { background: var(--red); box-shadow: none; color: #1a0603; }
1168
- .work-step.is-skipped .work-mark, .work-step.is-unknown .work-mark { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); }
1169
- .work-step-copy { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
1170
- .work-step-label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
1171
- .work-step.is-active .work-step-label, .work-step.is-done .work-step-label, .work-step.is-failed .work-step-label { color: var(--ink); }
1172
- .work-step-detail { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
1173
- .work-step.is-failed .work-step-detail { color: var(--red-ink); }
1174
- .work-files { list-style: none; display: grid; gap: 3px; margin-top: 6px; }
1175
- .work-files li { display: flex; align-items: center; gap: 8px; animation: file-in var(--t-settle) var(--ease) both; }
1176
- .work-files code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
1177
- .work-checks, .work-unknowns, .work-history { margin-top: 18px; }
1178
- .work-checks h2, .work-unknowns h2, .work-history h2 { margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
1179
- .work-checks ul, .work-unknowns ul, .work-history ul { list-style: none; display: grid; gap: 8px; }
1180
- .work-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
1181
- .work-checks li > div { display: grid; gap: 2px; min-width: 0; }
1182
- .work-checks strong { font-size: 14px; font-weight: 500; }
1183
- .work-checks span { display: inline-flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--ink-3); }
1184
- .work-checks .is-passed span { color: var(--green); }
1185
- .work-checks .is-failed span { color: var(--red-ink); }
1186
- .work-checks code { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
1187
- .work-check-detail { font-size: 12px; color: var(--ink-3); }
1188
- .work-detail { margin-top: 6px; max-height: 160px; overflow: auto; padding: 10px 12px; border-radius: 9px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
1189
- .work-unknowns li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
1190
- .work-unknowns li::before { content: "?"; position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
1191
- .work-answer { margin-top: 18px; border-radius: 12px; border: 1px solid var(--line); }
1192
- .work-answer summary { padding: 11px 14px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
1193
- .work-answer[open] summary { border-bottom: 1px solid var(--line); }
1194
- .work-answer .agent-reply-body { margin: 0; padding: 12px 14px; font-size: 13.5px; }
1195
- .work-diff { display: grid; gap: 12px; margin-top: 18px; }
1196
- .work-diff h3 { margin-bottom: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2); }
1197
- .work-diff pre { max-height: 300px; padding: 12px 14px; border-radius: 10px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; }
1198
- .work-actions { gap: 8px 4px; }
1199
- .quiet.is-danger { color: var(--red-ink); }
1200
- .quiet.stop { color: var(--red-ink); }
1201
- .work-history li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
1202
- .work-history strong { font-size: 13.5px; font-weight: 500; }
1203
- .work-history span { font-size: 12px; color: var(--ink-3); }
1204
-
1205
- /* The large preview: the real app, with the result panel still beside it. */
1206
- .appwin { position: fixed; top: calc(var(--top) + 14px); left: 14px; right: 14px; bottom: 14px; z-index: 35; display: grid; grid-template-rows: 44px minmax(0, 1fr); border-radius: 16px; border: 1px solid var(--line-2); background: #0b0b0d; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95); animation: appwin-in var(--t-panel) var(--ease) both; }
1207
- .app:has(.stage.has-panel) .appwin { right: min(560px, 46vw); }
1208
- @keyframes appwin-in { from { opacity: 0; transform: scale(0.985); } }
1209
- .appwin-bar { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); }
1210
- .appwin-url { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-family: var(--mono); font-size: 12px; color: var(--ink); }
1211
- .appwin-url i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
1212
- .appwin-note { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1213
- .appwin-tool { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--ink-2); transition: background var(--t-hover), color var(--t-hover); }
1214
- .appwin-tool:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1215
- .appwin-tool.is-close { margin-left: 4px; border: 1px solid var(--line-2); }
1216
- .appwin-body { min-height: 0; border-radius: 0 0 15px 15px; overflow: hidden; background: #fff; }
1217
- .appwin-body iframe { display: block; width: 100%; height: 100%; border: 0; }
1218
-
1219
- /* All actions. */
1220
- .catalog-intro { margin-bottom: 16px; font-size: 13.5px; color: var(--ink-3); }
1221
- .catalog-list { list-style: none; display: grid; gap: 2px; }
1222
- .catalog-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
1223
- .catalog-item:last-child { border-bottom: 0; }
1224
- .catalog-copy { display: grid; gap: 2px; min-width: 0; }
1225
- .catalog-copy strong { font-size: 14px; font-weight: 500; }
1226
- .catalog-copy span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
1227
- .catalog-item.is-planned .catalog-copy strong { color: var(--ink-2); }
1228
- .catalog-copy .catalog-reason { font-size: 12px; }
1229
- .catalog-state { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
1230
- .catalog-state.is-ready, .catalog-state.is-already_configured { color: var(--green); border-color: rgba(111, 208, 140, 0.4); }
1231
- .catalog-state.is-needs_connection, .catalog-state.is-needs_information { color: var(--warn-ink); border-color: rgba(242, 193, 95, 0.4); }
1232
- .catalog-state.is-planned { border-style: dashed; }
1233
-
1234
- @media (max-width: 900px) {
1235
- .app:has(.stage.has-panel) .appwin { right: 14px; }
1236
- .shelf-note { display: none; }
1237
- }
1238
- @media (max-width: 640px) {
1239
- .shelf { bottom: 74px; width: calc(100% - 20px); }
1240
- .shelf-box { height: 50px; }
1241
- .shelf-go { padding: 0 12px; }
1242
- .canvas { padding-bottom: 220px; }
1243
- .app .board.has-screen, .app .board.has-screen.is-side, .app .board.has-screen.is-solo { grid-template-columns: minmax(0, 1fr); }
1244
- .appwin { left: 8px; right: 8px; bottom: 8px; top: calc(var(--top) + 8px); }
1245
- .plan-list { grid-template-columns: 88px minmax(0, 1fr); }
1246
- .catalog-item { grid-template-columns: minmax(0, 1fr) auto; }
1247
- .catalog-item .catalog-state { grid-column: 1; justify-self: start; }
1248
- }
1249
- @media (prefers-reduced-motion: reduce) {
1250
- .app .board-app.is-working, .board-lines .line.is-work, .board.is-working .pulse.is-work, .screen-live i, .node.is-agent.is-work .node-state i,
1251
- .work-eyebrow.is-work i, .work-pulse, .work-step.is-active .work-mark::after, .screen-body.is-skeleton .sk, .app-files li, .work-files li,
1252
- .app .node.is-agent.is-work, .appwin, .work-step.is-done .work-mark { animation: none; }
1253
- .screen-open span { transition: none; }
1254
- }
1255
- @container (max-width: 820px) {
1256
- .app .board.has-screen:not(.is-side):not(.is-solo) { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) minmax(0, 1fr); column-gap: 28px; }
1257
- }
1258
- /* With the app on the card, its summary lines repeat the shelf note and Findings; the screen gets the room. */
1259
- .app .board.has-screen .board-checks { display: none; }
1260
- .canvas { padding-bottom: 196px; }
1261
- @container (max-width: 820px) {
1262
- .app .board.has-screen.is-side { grid-template-columns: minmax(250px, 320px) minmax(0, 250px); column-gap: clamp(32px, 7cqi, 56px); }
1263
- }
1264
-
1265
- /* Layout: the scene takes the canvas, the panel narrows, the real app gets its own window. */
1266
- .stage.is-work.has-panel .canvas { right: min(440px, 36%); }
1267
- .stage.is-work .stage-body.panel { width: calc(min(440px, 36%) - 28px); }
1268
- .app:has(.stage.is-work) .rail { left: calc((100% - min(440px, 36%)) / 2); }
1269
- .app:has(.stage.is-work) .appwin { right: min(440px, 36vw); }
1270
- .canvas.is-scene { display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1fr); align-items: stretch; place-items: stretch; gap: 16px; padding: 18px 18px 84px; cursor: default; overflow: hidden; background: radial-gradient(1200px 600px at 40% 30%, rgba(242, 193, 95, 0.035), transparent 60%), radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px) 0 0 / 22px 22px, #060607; }
1271
-
1272
- .insp-state { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
1273
- .insp-state.is-done { color: var(--sc-green); } .insp-state.is-active, .insp-state.is-waiting { color: var(--sc-amber); } .insp-state.is-failed { color: var(--red-ink); }
1274
- .insp-files { list-style: none; display: grid; gap: 3px; }
1275
- .insp-files li { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
1276
- .insp-files code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
1277
- .insp-files .add { font-family: var(--mono); font-size: 11px; color: var(--green); }
1278
- .insp-files .del { font-family: var(--mono); font-size: 11px; color: var(--red-ink); }
1279
- .insp-pre { max-height: 140px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: #060607; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
1280
- .insp-answer { max-height: 160px; overflow: auto; font-size: 12.5px; color: var(--ink-2); }
1281
- .insp-wait { color: var(--warn-ink) !important; }
1282
-
1283
- /* The real app, in its own window. */
1284
- .live-window { align-self: start; display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 15, 0.96); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); }
1285
- .live-window header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
1286
- .live-window header strong { font-size: 13.5px; font-weight: 600; }
1287
- .live-window header span { font-size: 11.5px; color: var(--ink-3); }
1288
- .live-window .screen { margin-top: 0; }
1289
-
1290
-
1291
-
1292
-
1293
-
1294
-
1295
-
1296
-
1297
-
1298
-
1299
-
1300
-
1301
-
1302
-
1303
-
1304
-
1305
-
1306
-
1307
-
1308
-
1309
-
1310
-
1311
-
1312
-
1313
-
1314
-
1315
-
1316
- .work-wait { margin-top: 16px; display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.35); }
1317
- .work-wait strong { font-size: 14px; font-weight: 600; color: var(--warn-ink); }
1318
- .work-wait p { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
1319
- .work-eyebrow.is-wait { color: var(--warn-ink); }
1320
- .work-eyebrow.is-wait i { background: var(--sc-amber); }
1321
- .gallery-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
1322
-
1323
- @media (max-width: 1200px) {
1324
- .canvas.is-scene { grid-template-columns: minmax(0, 1fr); }
1325
- .live-window { position: absolute; right: 18px; top: 52px; width: 240px; z-index: 3; }
1326
- }
1327
- @media (max-width: 900px) {
1328
- .stage.is-work.has-panel .canvas { right: 0; }
1329
- .stage.is-work .stage-body.panel { left: 10px; right: 10px; width: auto; top: auto; max-height: 46%; }
1330
- .live-window { width: 180px; }
1331
- }
1332
-
1333
- /* Scene light: brighter faces and a lit front edge, so objects read as solid against the floor. */
1334
- .canvas.is-scene:not(:has(.live-window)) { grid-template-columns: minmax(0, 1fr); }
1335
-
1336
-
1337
-
1338
-
1339
-
1340
-
1341
-
1342
-
1343
-
1344
-
1345
-
1346
-
1347
-
1348
-
1349
-
1350
-
1351
-
1352
-
1353
-
1354
-
1355
-
1356
-
1357
-
1358
-
1359
-
1360
-
1361
- /* ---------- the work panel: a title, a line, a few chips, big tiles. Detail waits behind "Details". ---------- */
1362
- .panel h1.wtitle { font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; max-width: none; }
1363
- .whead { display: flex; align-items: center; gap: 12px; }
1364
- .whead h1.wtitle { padding-right: 40px; }
1365
- .wbadge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #0a0a0b; animation: badge-in 0.5s var(--spring, cubic-bezier(0.34, 1.45, 0.64, 1)) both; }
1366
- .wbadge.is-pass { background: var(--green); }
1367
- .wbadge.is-fail { background: var(--red); }
1368
- .wbadge.is-warn { background: var(--warn); }
1369
- .wbadge.is-wait { background: var(--warn); }
1370
- .wbadge.is-stop, .wbadge.is-plan { background: var(--panel-3); color: var(--ink-2); }
1371
-
1372
- .wline { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
1373
- .wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
1374
- .wchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
1375
- .wchip .ico { color: var(--ink-2); }
1376
- .wchip img { flex: none; }
1377
- .wchip.is-pass { border-color: rgba(111, 208, 140, 0.45); color: var(--green); } .wchip.is-pass .ico { color: var(--green); }
1378
- .wchip.is-fail { border-color: rgba(244, 113, 95, 0.5); color: var(--red-ink); } .wchip.is-fail .ico { color: var(--red); }
1379
- .wchip.is-wait { border-color: rgba(242, 193, 95, 0.5); color: var(--warn-ink); font-family: var(--mono); font-size: 11.5px; } .wchip.is-wait .ico { color: var(--warn); }
1380
- .wmodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
1381
- .wmode { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); font-size: 13px; font-weight: 500; color: var(--ink-2); transition: border-color var(--t-hover, 140ms), background var(--t-hover, 140ms), color var(--t-hover, 140ms); }
1382
- .wmode:hover:not(.on):not(:disabled) { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
1383
- .wmode.on { border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1384
- .wmode-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
1385
- .wmode.on .wmode-ico { background: #f5f5f7; color: #0a0a0b; }
1386
- .wtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
1387
- .wtiles.is-one { grid-template-columns: minmax(0, 1fr); }
1388
- .wtile { display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 84px; padding: 12px 8px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: transform var(--t-hover, 140ms), background var(--t-hover, 140ms), border-color var(--t-hover, 140ms); }
1389
- .wtile:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
1390
- .wtile:active:not(:disabled) { transform: translateY(0); }
1391
- .wtile:disabled { opacity: 0.5; }
1392
- .wtile-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, 0.07); color: var(--ink); }
1393
- .wtile-ico svg { width: 15px; height: 15px; }
1394
- .wtile-note { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
1395
- .wtile.is-primary { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: center; min-height: 56px; border-color: transparent; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; font-size: 15px; }
1396
- .wtile.is-primary .wtile-ico { width: 28px; height: 28px; border-radius: 999px; background: #0a0a0b; color: #f5f5f7; }
1397
- .wtile.is-primary:hover:not(:disabled) { background: #fff; border-color: transparent; }
1398
- .wtile.is-danger { border-color: rgba(244, 113, 95, 0.45); color: var(--red-ink); }
1399
- .wtile.is-danger .wtile-ico { background: rgba(244, 113, 95, 0.14); color: var(--red); }
1400
- .wtiles.is-one .wtile.is-danger { grid-template-columns: auto auto auto; justify-content: center; min-height: 52px; border-radius: 999px; }
1401
- .wtiles.is-one .wtile.is-danger .wtile-ico { width: 26px; height: 26px; }
1402
- .wlink { display: block; margin: 14px auto 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--ink-3); }
1403
- .wlink:hover { color: var(--ink); }
1404
- .wlink.is-danger { color: var(--red-ink); }
1405
- .wdetails { margin-top: 18px; border-top: 1px solid var(--line); }
1406
- .wdetails > summary { padding: 12px 0 4px; font-size: 13px; color: var(--ink-3); cursor: pointer; list-style: none; }
1407
- .wdetails > summary::before { content: "+ "; font-family: var(--mono); }
1408
- .wdetails[open] > summary::before { content: "\2212 "; }
1409
- .wdetails .agent-reply-body { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
1410
- .work-steps.is-compact { margin-top: 16px; }
1411
- .work-steps.is-compact .work-step { padding-bottom: 12px; }
1412
- .wgallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
1413
- .wscene { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; transition: border-color var(--t-hover, 140ms), background var(--t-hover, 140ms), color var(--t-hover, 140ms); }
1414
- .wscene:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
1415
- .wscene.on { border-color: rgba(245, 245, 247, 0.85); color: var(--ink); background: rgba(255, 255, 255, 0.08); }
1416
- .wscene-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #0f0f12; border: 1px solid var(--line); }
1417
- .wphases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
1418
- .wphase { display: grid; justify-items: center; gap: 5px; padding: 9px 2px 8px; border-radius: 12px; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 500; color: var(--ink-3); transition: color var(--t-hover, 140ms), border-color var(--t-hover, 140ms); }
1419
- .wphase:hover { color: var(--ink); }
1420
- .wphase.on { color: var(--ink); border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.07); }
1421
- .wphase.is-work .wphase-ico { color: var(--sc-amber, #f2c15f); }
1422
- .wphase.is-wait .wphase-ico { color: var(--warn); }
1423
- .wphase.is-fail .wphase-ico { color: var(--red); }
1424
- .wphase.is-done .wphase-ico { color: var(--green); }
1425
- .wphase-ico { display: grid; place-items: center; height: 16px; }
1426
- @media (prefers-reduced-motion: reduce) { .wbadge, .wtile { animation: none; transition: none; } }
1427
- .screen-body.is-live { background: #0b0b0d; }
1428
- .screen-body.is-live iframe { opacity: 0; transition: opacity 0.35s var(--ease); }
1429
- .screen-body.is-live iframe.is-loaded { opacity: 1; }
1430
- .screen-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--ink-3); }
1431
-
1432
- /* ---------- windows: findings, agents, releases and chat in the same calm kit as the work panel ---------- */
1433
-
1434
- /* Drawer frame: a round close, a short line. */
1435
- .drawer-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); transition: background 0.15s, color 0.15s; }
1436
- .drawer-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1437
- .drawer { width: min(920px, calc(100vw - 40px)); }
1438
- .drawer-head h3 { font-size: 22px; }
1439
-
1440
- /* Findings. */
1441
- .fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
1442
- .fchip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); }
1443
- .fchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
1444
- .fchip.is-critical i { background: var(--red); } .fchip.is-critical { border-color: rgba(244, 113, 95, 0.45); }
1445
- .fchip.is-warning i { background: var(--warn); } .fchip.is-warning { border-color: rgba(242, 193, 95, 0.4); }
1446
- .fchip.is-info i { background: rgba(255, 255, 255, 0.4); }
1447
- .fchip.is-time { color: var(--ink-3); border-style: dashed; }
1448
- .panel .findings { display: grid; gap: 10px; margin-top: 18px; }
1449
- .panel .group { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); overflow: hidden; }
1450
- .panel .group-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
1451
- .panel .group-head h2 { flex: 1; font-size: 14px; font-weight: 600; }
1452
- .panel .group-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
1453
- .panel .group ul { list-style: none; }
1454
- .panel .group li + li { border-top: 1px solid var(--line); }
1455
- .panel .finding, .panel .finding.is-static { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 0; background: none; text-align: left; transition: background 0.15s; }
1456
- .panel .finding:hover:not(.is-static) { background: rgba(255, 255, 255, 0.04); }
1457
- .panel .finding .finding-main { display: grid; gap: 5px; }
1458
- .panel .finding .finding-title { font-size: 14px; font-weight: 500; line-height: 1.35; }
1459
- .panel .finding .finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
1460
- .panel .finding .sev { font-size: 11.5px; font-weight: 600; }
1461
- .panel .finding .where code { font-size: 11px; color: var(--ink-3); }
1462
- .panel .finding-go { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink); }
1463
- .panel .finding.is-first .finding-go { background: #f5f5f7; border-color: #f5f5f7; color: #0a0a0b; }
1464
- .panel .finding-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 11px; color: var(--ink-2); }
1465
- .findings-go { margin-top: 18px; }
1466
-
1467
- /* Agents: one card each, one big next step. */
1468
- .agent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
1469
- .drawer .agent-card { display: grid; align-content: start; gap: 14px; padding: 18px; border-radius: 18px; background: #121216; box-shadow: inset 0 0 0 1px var(--line); }
1470
- .drawer .agent-card.is-connected { box-shadow: inset 0 0 0 1px rgba(111, 208, 140, 0.35); }
1471
- .drawer .agent-card.is-selected { box-shadow: inset 0 0 0 1.5px rgba(245, 245, 247, 0.7); }
1472
- .drawer .agent-card + .agent-card { margin-top: 0; }
1473
- .agent-card-head { display: flex; align-items: center; gap: 12px; }
1474
- .agent-card-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #0a0a0c; box-shadow: inset 0 0 0 1px var(--line-2); }
1475
- .agent-card-name { flex: 1; display: grid; gap: 4px; min-width: 0; }
1476
- .agent-card-name h4 { font-size: 16px; font-weight: 600; }
1477
- .agent-card-docs { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ink-3); }
1478
- .agent-card-docs:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
1479
- .agent-card-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
1480
- .agent-card-actions { display: flex; gap: 8px; }
1481
- .agent-cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: background 0.15s, border-color 0.15s; }
1482
- .agent-cta:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
1483
- .agent-cta.is-primary { background: #f5f5f7; border-color: #f5f5f7; color: #0a0a0b; }
1484
- .agent-cta.is-primary:hover:not(:disabled) { background: #fff; }
1485
- .agent-cta.is-on { color: var(--green); border-color: rgba(111, 208, 140, 0.45); }
1486
- .agent-cta.is-quiet { flex: 0 0 auto; color: var(--ink-2); }
1487
- .agent-how > summary, .agent-output > summary { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; list-style: none; }
1488
- .agent-how > summary::before, .agent-output > summary::before { content: "+"; font-family: var(--mono); }
1489
- .agent-how[open] > summary::before, .agent-output[open] > summary::before { content: "\2212"; }
1490
- .agent-how .steps { margin-top: 12px; }
1491
- .agent-how .step-body p { font-size: 12.5px; }
1492
- .agent-output { margin-top: 16px; }
1493
- .agent-output pre { margin-top: 10px; }
1494
-
1495
- /* Releases. */
1496
- .releases { display: grid; gap: 22px; }
1497
- .rel-title { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 15px; font-weight: 600; }
1498
- .rel-title .ico { color: var(--ink-3); }
1499
- .rel-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
1500
- .rel-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
1501
- .rel-card { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: #121216; box-shadow: inset 0 0 0 1px var(--line); }
1502
- .rel-card.is-current { box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.4); }
1503
- .rel-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
1504
- .rel-tag { font-family: var(--mono); font-size: 14px; font-weight: 600; }
1505
- .rel-badge { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 500; border: 1px solid var(--line-2); color: var(--ink-2); }
1506
- .rel-badge.is-current { color: var(--warn-ink); border-color: rgba(242, 193, 95, 0.45); }
1507
- .rel-badge.is-prod { color: var(--green); border-color: rgba(111, 208, 140, 0.4); }
1508
- .rel-card .rel-sum { font-size: 13px; color: var(--ink-2); }
1509
- .rel-card .rel-meta { font-size: 11.5px; color: var(--ink-3); }
1510
- .rel-compare { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); }
1511
- .rel-compare:hover { background: rgba(255, 255, 255, 0.07); }
1512
- .rel-empty { display: grid; justify-items: start; gap: 8px; padding: 16px; border-radius: 16px; border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-3); }
1513
- .rel-empty code { padding: 4px 8px; border-radius: 7px; background: #060607; font-family: var(--mono); font-size: 12px; color: var(--ink); }
1514
- .rel-compare-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
1515
- .rel-field { display: grid; gap: 6px; font-size: 12px; color: var(--ink-3); }
1516
- .rel-field .sel { width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; }
1517
- .rel-arrow { display: grid; place-items: center; height: 42px; color: var(--ink-3); }
1518
- .rel-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
1519
- .rel-actions .wtile { min-height: 96px; }
1520
- .rel-actions .wtile-note { text-align: center; }
1521
-
1522
- /* Agent chat. */
1523
- .side.chat { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 0; padding: 0; }
1524
- .chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
1525
- .chat-agents { flex: 1; display: flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); }
1526
- .chat-agent { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background 0.15s, color 0.15s; }
1527
- .chat-agent:hover:not(:disabled):not(.on) { color: var(--ink); }
1528
- .chat-agent.on { background: #f5f5f7; color: #0a0a0b; }
1529
- .chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
1530
- .chat-dot.is-ok { background: var(--green); } .chat-dot.is-wait { background: var(--warn); }
1531
- .chat-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
1532
- .chat-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
1533
- .chat-meta { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px; border-bottom: 1px solid var(--line); }
1534
- .chat-status { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12.5px; font-weight: 500; color: var(--warn-ink); }
1535
- .chat-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
1536
- .chat-status.is-ok { color: var(--green); } .chat-status.is-ok i { background: var(--green); }
1537
- .chat-model { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12.5px; color: var(--ink-3); }
1538
- .chat-model select { flex: 1; min-width: 0; height: 28px; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 12.5px/1 var(--font); cursor: pointer; }
1539
- .chat-model select option { background: #141418; color: var(--ink); }
1540
- .chat-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--ink-2); }
1541
- .chat-icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1542
- .side.chat .thread { padding: 16px 14px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
1543
- .chat-welcome { display: grid; justify-items: center; gap: 8px; margin: auto 0; padding: 20px 6px; text-align: center; }
1544
- .chat-welcome-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: #121216; box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: 6px; }
1545
- .chat-welcome h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
1546
- .chat-welcome p { font-size: 13px; color: var(--ink-3); }
1547
- .chat-suggest { display: grid; gap: 8px; width: 100%; margin-top: 12px; }
1548
- .chat-suggestion { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: left; transition: background 0.15s, border-color 0.15s; }
1549
- .chat-suggestion .ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: var(--ink-2); }
1550
- .chat-suggestion:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); }
1551
- .chat-suggestion:disabled { opacity: 0.45; }
1552
- .side.chat .msg { display: grid; gap: 6px; max-width: 100%; }
1553
- .side.chat .msg.me { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: #f5f5f7; color: #0a0a0b; }
1554
- .side.chat .msg.me .body p { color: #0a0a0b; font-size: 13.5px; }
1555
- .side.chat .msg.agent, .side.chat .msg.err { padding: 0; }
1556
- .side.chat .msg .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
1557
- .side.chat .msg .who .t { font-weight: 400; color: var(--ink-3); }
1558
- .msg-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #121216; box-shadow: inset 0 0 0 1px var(--line-2); }
1559
- .msg-avatar.is-err { background: rgba(244, 113, 95, 0.15); color: var(--red); font-weight: 700; font-size: 12px; }
1560
- .side.chat .msg.agent .body, .side.chat .msg.err .body { padding: 12px 14px; border-radius: 6px 16px 16px 16px; background: #121216; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
1561
- .side.chat .msg.err .body { box-shadow: inset 0 0 0 1px rgba(244, 113, 95, 0.35); }
1562
- .side.chat .msg.sys { justify-self: center; text-align: center; font-size: 12.5px; color: var(--ink-3); }
1563
- .chat-typing { display: inline-flex; gap: 3px; }
1564
- .chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: typing 1.2s ease-in-out infinite; }
1565
- .chat-typing i:nth-child(2) { animation-delay: 0.15s; } .chat-typing i:nth-child(3) { animation-delay: 0.3s; }
1566
-
1567
- .chat-connect { margin: 0 14px 10px; padding: 12px 14px; border-radius: 14px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.3); }
1568
- .chat-connect p { font-size: 12.5px; line-height: 1.45; color: var(--warn-ink); }
1569
- .chat-connect-row { display: flex; gap: 8px; margin-top: 10px; }
1570
- .side.chat .composer { margin: 0 12px 12px; padding: 10px 10px 8px 14px; border-radius: 18px; background: #121216; box-shadow: inset 0 0 0 1px var(--line-2); }
1571
- .side.chat .composer:focus-within { box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.5); }
1572
- .side.chat .composer textarea { width: 100%; min-height: 44px; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font: 400 14px/1.5 var(--font); }
1573
- .side.chat .composer .row { display: flex; align-items: center; gap: 8px; }
1574
- .chat-access { margin-right: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 4px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
1575
- .chat-access select { height: 28px; border: 0; outline: none; background: transparent; color: var(--ink-2); font: 500 12.5px/1 var(--font); cursor: pointer; }
1576
- .chat-access select option { background: #141418; color: var(--ink); }
1577
- .side.chat .btn.send { width: 36px; height: 36px; padding: 0; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; box-shadow: none; }
1578
- .side.chat .btn.send:disabled { background: var(--panel-3); color: var(--ink-3); }
1579
- @media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; } }
1580
-
1581
-
1582
-
1583
-
1584
-
1585
-
1586
-
1587
-
1588
-
1589
-
1590
-
1591
-
1592
-
1593
-
1594
-
1595
-
1596
-
1597
-
1598
-
1599
-
1600
-
1601
-
1602
-
1603
-
1604
-
1605
-
1606
-
1607
-
1608
- .wproviders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
1609
- .wprov { display: grid; place-items: center; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); transition: border-color 0.14s, background 0.14s; }
1610
- .wprov:hover { background: rgba(255, 255, 255, 0.07); }
1611
- .wprov.on { border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.09); }
1612
-
1613
-
1614
-
1615
-
1616
-
1617
-
1618
-
1619
-
1620
-
1621
-
1622
-
1623
-
1624
-
1625
- /* Review: files Undo leaves alone, and putting one back by hand. */
1626
- .work-diff-file h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
1627
- .work-diff-file .diff-note { font: 600 11px/1 var(--font); color: rgba(245, 245, 247, 0.6); padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
1628
- .work-diff-file .diff-note.is-warn { color: #f2c15f; background: rgba(242, 193, 95, 0.12); }
1629
- .work-diff-file .diff-restore { margin-left: auto; font-size: 12px; }
1630
-
1631
- /* ---------- All actions: plain rows for what runs now, a wall of icons for what is coming ---------- */
1632
- .act-catalog { display: grid; gap: 32px; }
1633
- .act-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
1634
- .act-search { position: relative; flex: 1 1 240px; max-width: 320px; }
1635
- .act-search-ico { position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
1636
- .act-search-ico svg { display: block; width: 100%; height: 100%; }
1637
- .act-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 13.5px var(--font); }
1638
- .act-search input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
1639
- .act-chips { display: flex; flex-wrap: wrap; gap: 2px; }
1640
- .act-chip { height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font: 500 13px var(--font); cursor: pointer; transition: background 0.15s, color 0.15s; }
1641
- .act-chip:hover { color: var(--ink); }
1642
- .act-chip[aria-pressed="true"] { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1643
- .act-group[hidden], .act-empty[hidden], [data-act][hidden] { display: none !important; }
1644
- .act-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
1645
- .act-head h4 { font-size: 13px; font-weight: 500; color: var(--ink-2); }
1646
- .act-head span { color: var(--ink-3); font-size: 12.5px; }
1647
- .act-count { font-weight: inherit; }
1648
-
1649
- /* The mark: the provider's own logo in its colours, or a plain white icon, on the same quiet plate. */
1650
- .act-art { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #141418; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
1651
- .act-art img { width: 50%; height: 50%; object-fit: contain; }
1652
- .act-ico { display: block; width: 46%; height: 46%; }
1653
- .act-ico svg { display: block; width: 100%; height: 100%; }
1654
-
1655
- /* Ready now: one row each, the button on the right. */
1656
- .act-rows, .act-items { list-style: none; margin: 0; padding: 0; }
1657
- .act-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--line); transition: background 0.2s var(--ease); }
1658
- .act-row:hover { background: rgba(255, 255, 255, 0.025); }
1659
- .act-row h5 { font-size: 15px; font-weight: 500; color: var(--ink); }
1660
- .act-row p { margin-top: 3px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
1661
- .act-side { display: flex; align-items: center; gap: 14px; }
1662
- .act-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
1663
- .act-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
1664
- .act-status.is-ready i, .act-status.is-done i { background: var(--green); }
1665
- .act-go { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 500 13px var(--font); white-space: nowrap; cursor: pointer; transition: background 0.15s; }
1666
- .act-go:hover { background: rgba(255, 255, 255, 0.08); }
1667
- .act-go.is-primary { background: #f5f5f5; box-shadow: none; color: #0a0a0b; }
1668
- .act-go.is-primary:hover { background: #fff; }
1669
- .act-go .ico svg { width: 12px; height: 12px; }
1670
-
1671
- /* Coming next: the icon is the thing. Big mark, its name under it, nothing boxed. */
1672
- .act-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 28px 8px; padding-top: 16px; }
1673
- .act-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
1674
- .act-item .act-art { width: 64px; height: 64px; border-radius: 18px; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
1675
- .act-item:hover .act-art { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px rgba(0, 0, 0, 0.45); }
1676
- .act-item strong { max-width: 16ch; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.3; }
1677
- .act-peek { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-top: auto; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 12px var(--font); white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
1678
- .act-peek:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1679
- .act-peek .ico svg { width: 10px; height: 10px; }
1680
- .act-soon { margin-top: auto; color: var(--ink-3); font-size: 12px; line-height: 24px; white-space: nowrap; }
1681
- .act-empty { padding: 18px 0; color: var(--ink-3); font-size: 14px; text-align: center; }
1682
- @media (max-width: 760px) {
1683
- .act-items { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
1684
- .act-search { max-width: none; }
1685
- .act-row { grid-template-columns: auto minmax(0, 1fr); }
1686
- .act-side { grid-column: 2; }
1687
- }
1688
- @media (prefers-reduced-motion: reduce) { .act-item .act-art, .act-item:hover .act-art { transition: none; transform: none; } }
1689
-
1690
- @keyframes badge-in { from { transform: scale(0.6); opacity: 0; } }
1691
- @keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
1
+ /* VibeRaven Studio: one path from "your app" to the launch checklist.
2
+ Same language as viberaven.dev: a warm black ground, one gold, the real service marks carrying
3
+ the colour, Archivo and IBM Plex Mono, calm motion that only moves when something real happens. */
4
+
5
+ :root {
6
+ --ground: #0a0a0b;
7
+ --panel: #111113;
8
+ --panel-2: #16161a;
9
+ --panel-3: #1e1e23;
10
+ --ink: #f5f5f7;
11
+ --ink-2: #a1a1a6;
12
+ --ink-3: #6e6e73;
13
+ --line: rgba(255, 255, 255, 0.08);
14
+ --line-2: rgba(255, 255, 255, 0.14);
15
+ --gold: #f2c15f;
16
+ --gold-2: #f6dc9c;
17
+ --on-gold: #120d00;
18
+ --red: #f4715f;
19
+ --red-ink: #f5a496;
20
+ --warn: #f2c15f;
21
+ --warn-ink: #e8c38b;
22
+ --green: #6fd08c;
23
+ --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
24
+ --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
25
+ --ease: cubic-bezier(0.16, 1, 0.3, 1);
26
+ --top: 64px;
27
+ /* Names kept for the panels behind More. */
28
+ --bg: var(--ground); --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --acid: var(--gold); --acid-2: var(--gold-2); --on-acid: var(--on-gold); --amber: var(--warn); --r: 10px; --r-lg: 16px;
29
+ }
30
+
31
+ * { box-sizing: border-box; margin: 0; padding: 0; }
32
+ html, body { min-height: 100%; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
33
+ button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
34
+ button:disabled { cursor: default; }
35
+ a { color: inherit; }
36
+ code, pre { font-family: var(--mono); }
37
+ ::selection { background: rgba(223, 189, 110, 0.3); }
38
+ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
39
+ [tabindex="-1"]:focus { outline: none; }
40
+ ::-webkit-scrollbar { width: 10px; height: 10px; }
41
+ ::-webkit-scrollbar-thumb { background: #34302a; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
42
+ .ico { display: inline-flex; flex: none; }
43
+ .spin { display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
44
+ @keyframes spin { to { transform: rotate(360deg); } }
45
+ @keyframes arrive { from { transform: translateY(6px); } to { transform: none; } }
46
+ @keyframes settle { from { transform: translateY(4px); } to { transform: none; } }
47
+
48
+ /* ---------- shell: top bar, rail, stage ---------- */
49
+ .app { display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: var(--top) minmax(0, 1fr); min-height: 100vh; }
50
+
51
+ .top { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; height: var(--top); padding: 0 28px; background: var(--ground); border-bottom: 1px solid var(--line); }
52
+ .wordmark { font-weight: 760; font-stretch: 125%; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: #f3f0e8; line-height: 1; }
53
+ .top-project { display: inline-flex; align-items: baseline; gap: 12px; min-width: 0; padding-left: 22px; border-left: 1px solid var(--line); }
54
+ .top-project strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
55
+ .top-project code { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
56
+ .spacer { flex: 1; }
57
+ .more-wrap { position: relative; }
58
+ .more-button { gap: 10px; }
59
+ .more-button.on { background: rgba(243, 240, 232, 0.06); color: var(--ink); }
60
+ .more-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; padding: 6px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 60px rgba(0, 0, 0, 0.55); animation: settle 0.3s var(--ease) both; }
61
+ .more-item { display: grid; gap: 2px; width: 100%; padding: 11px 12px; border-radius: 9px; text-align: left; }
62
+ .more-item strong { font-size: 14.5px; font-weight: 600; }
63
+ .more-item span { font-size: 12.5px; color: var(--ink-3); }
64
+ .more-item:hover, .more-item:focus-visible { background: rgba(243, 240, 232, 0.06); outline: none; }
65
+
66
+ .rail { position: sticky; top: var(--top); align-self: start; height: calc(100vh - var(--top)); padding: 44px 22px 32px 28px; border-right: 1px solid var(--line); }
67
+ .rail ol { list-style: none; }
68
+ .rail-step { position: relative; }
69
+ .rail-step:not(:last-child)::after { content: ""; position: absolute; left: 11.5px; top: 36px; bottom: 2px; width: 1px; background: var(--line); transition: background 0.5s var(--ease); }
70
+ .rail-step.is-passed:not(:last-child)::after { background: rgba(223, 189, 110, 0.5); }
71
+ .rail-button { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; width: 100%; padding: 8px 0 26px; text-align: left; }
72
+ .rail-mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--on-gold); transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
73
+ .rail-copy { display: grid; gap: 3px; min-width: 0; }
74
+ .rail-label { font-size: 15.5px; font-weight: 600; color: var(--ink-2); transition: color 0.2s; }
75
+ .rail-meta { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
76
+ .is-current .rail-mark { box-shadow: inset 0 0 0 1.5px var(--gold); }
77
+ .is-current .rail-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
78
+ .is-current .rail-label { color: var(--ink); font-weight: 700; }
79
+ .is-passed .rail-mark { background: var(--gold); box-shadow: none; }
80
+ .is-open .rail-button:hover .rail-label, .is-passed .rail-button:hover .rail-label { color: var(--gold-2); }
81
+ .is-locked .rail-button { cursor: default; }
82
+ .is-locked .rail-label { color: var(--ink-3); }
83
+ .is-locked .rail-meta { opacity: 0.7; }
84
+
85
+ .stage { min-width: 0; padding: 52px clamp(28px, 5vw, 76px) 96px; container-type: inline-size; }
86
+ .stage-body { max-width: 1040px; }
87
+ .stage-body.arrive > * { animation: arrive 0.5s var(--ease) both; }
88
+ .stage-body.arrive > *:nth-child(2) { animation-delay: 0.03s; }
89
+ .stage-body.arrive > *:nth-child(3) { animation-delay: 0.06s; }
90
+ .stage-body.arrive > *:nth-child(n+4) { animation-delay: 0.09s; }
91
+ .stage h1 { font-size: clamp(34px, 4.4cqi, 56px); font-weight: 800; font-stretch: 104%; letter-spacing: -0.015em; line-height: 1.06; text-wrap: balance; max-width: 22ch; }
92
+ .stage-sub { margin-top: 14px; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
93
+ .stage-alert { max-width: 1040px; margin-bottom: 24px; padding: 12px 16px; border-radius: 10px; background: rgba(240, 122, 106, 0.08); box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.4); color: var(--red-ink); }
94
+
95
+ .primary-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 40px; }
96
+ .primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 15px 26px; border-radius: 12px; background: var(--gold); color: var(--on-gold); font-size: 16.5px; font-weight: 650; letter-spacing: -0.005em; white-space: nowrap; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
97
+ .primary:hover:not(:disabled) { background: var(--gold-2); }
98
+ .primary:hover:not(:disabled) .ico { transform: translateX(2px); }
99
+ .primary .ico { transition: transform 0.25s var(--ease); }
100
+ .primary:active:not(:disabled) { transform: translateY(1px); }
101
+ .primary:disabled { background: var(--panel-3); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
102
+ .primary-note { max-width: 54ch; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
103
+ .quiet { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 9px; color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s, color 0.2s; }
104
+ .quiet:hover:not(:disabled) { color: var(--ink); background: rgba(243, 240, 232, 0.06); }
105
+ .quiet:disabled { color: var(--ink-3); opacity: 0.6; }
106
+ .quiet-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0 -12px; }
107
+
108
+ /* ---------- step 1: the board ---------- */
109
+ .board { position: relative; margin: 44px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) minmax(0, 1fr); grid-template-areas: "left app right"; column-gap: clamp(36px, 6cqi, 88px); align-items: center; min-height: 240px; }
110
+ .board.is-solo { grid-template-columns: minmax(0, 340px); grid-template-areas: "app"; min-height: 0; }
111
+ .board.is-side { grid-template-columns: minmax(240px, 300px) minmax(0, 340px); grid-template-areas: "app right"; justify-content: start; column-gap: clamp(64px, 10cqi, 140px); min-height: 0; }
112
+ .board.is-side .board-col.right { justify-self: stretch; width: 100%; }
113
+ .board-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
114
+ .board-lines .line { fill: none; stroke: rgba(243, 240, 232, 0.16); stroke-width: 1.2; stroke-dasharray: 3 5; }
115
+ .board-lines .line.is-pass { stroke: rgba(223, 189, 110, 0.55); stroke-dasharray: none; }
116
+ .board-lines .line.is-warn { stroke: rgba(217, 164, 91, 0.5); stroke-dasharray: none; }
117
+ .board-lines .line.is-fail { stroke: rgba(240, 122, 106, 0.8); stroke-dasharray: none; }
118
+ .board-lines .pulse { fill: none; stroke: var(--gold-2); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.07 0.93; stroke-dashoffset: 0.07; opacity: 0; }
119
+ .board.is-scanning .pulse { animation: board-pulse 2.8s linear infinite; }
120
+ @keyframes board-pulse { 0% { stroke-dashoffset: 0.07; opacity: 1; } 55% { stroke-dashoffset: -0.93; opacity: 1; } 55.1%, 100% { stroke-dashoffset: -0.93; opacity: 0; } }
121
+ .board-col { list-style: none; display: grid; gap: 14px; width: min(300px, 100%); position: relative; z-index: 1; }
122
+ .board-col.left { grid-area: left; justify-self: start; }
123
+ .board-col.right { grid-area: right; justify-self: end; }
124
+ .node { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center; padding: 15px 17px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
125
+ .node img, .node-fallback { grid-row: span 2; width: 32px; height: 32px; object-fit: contain; }
126
+ .node-fallback { display: grid; place-items: center; border-radius: 8px; background: var(--panel-3); font-weight: 700; color: var(--ink-2); }
127
+ .node-name { font-size: 15.5px; font-weight: 650; }
128
+ .node-state { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--ink-3); animation: settle 0.45s var(--ease) both; }
129
+ .node-state i, .board-checks i, .sev i { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); }
130
+ .node.is-pass .node-state { color: var(--ink-2); }
131
+ .node.is-pass .node-state i { background: var(--green); box-shadow: none; }
132
+ .node.is-warn .node-state { color: var(--warn-ink); }
133
+ .node.is-warn .node-state i { background: var(--warn); box-shadow: none; }
134
+ .node.is-fail { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.7); }
135
+ .node.is-fail .node-state { color: var(--red-ink); }
136
+ .node.is-fail .node-state i { background: var(--red); box-shadow: none; }
137
+ .board-app { grid-area: app; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px 22px; border-radius: 16px; background: #171510; box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.45); text-align: center; transition: box-shadow 0.4s var(--ease); }
138
+ .board-app.is-fail { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.7); }
139
+ .board-app.is-pass { box-shadow: inset 0 0 0 1.5px var(--gold); }
140
+ .board-app-name { font-size: 13px; color: var(--ink-3); }
141
+ .board-status { min-height: 1.2em; }
142
+ .board-status strong { font-size: clamp(20px, 2cqi, 25px); font-weight: 700; font-stretch: 108%; letter-spacing: -0.015em; line-height: 1.15; animation: settle 0.45s var(--ease) both; }
143
+ .board-app.is-fail strong { color: var(--red-ink); }
144
+ .board-app.is-pass strong { color: var(--gold); }
145
+ .board-checks { list-style: none; width: 100%; display: grid; gap: 6px; margin-top: 2px; padding: 12px 4px 0; border-top: 1px solid var(--line); text-align: left; }
146
+ .board-checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
147
+ .board-checks i { background: var(--green); box-shadow: none; }
148
+ .board.is-scanning .board-checks i { background: none; box-shadow: inset 0 0 0 1px var(--ink-3); }
149
+
150
+ /* ---------- step 2: findings ---------- */
151
+ .findings { display: grid; gap: 30px; margin-top: 40px; }
152
+ .group-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
153
+ .group-head img { width: 22px; height: 22px; object-fit: contain; }
154
+ .group-code { display: grid; place-items: center; width: 22px; height: 22px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
155
+ .group-head h2 { font-size: 17px; font-weight: 700; }
156
+ .group-count { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
157
+ .group ul { list-style: none; }
158
+ .finding { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto 16px; align-items: center; gap: 18px; width: 100%; padding: 17px 8px; border-bottom: 1px solid var(--line); text-align: left; transition: background 0.25s var(--ease); }
159
+ .finding.is-static { grid-template-columns: 132px minmax(0, 1fr) auto; }
160
+ button.finding:hover { background: rgba(243, 240, 232, 0.035); }
161
+ button.finding .ico { color: var(--ink-3); transition: transform 0.25s var(--ease), color 0.2s; }
162
+ button.finding:hover .ico { color: var(--gold); transform: translateX(3px); }
163
+ .finding-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; color: var(--ink); }
164
+ .finding.is-first .finding-title { font-weight: 650; }
165
+ .sev { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
166
+ .sev.is-critical { color: var(--red-ink); } .sev.is-critical i { background: var(--red); box-shadow: none; }
167
+ .sev.is-warning { color: var(--warn-ink); } .sev.is-warning i { background: var(--warn); box-shadow: none; }
168
+ .sev.is-info { color: var(--ink-3); }
169
+ .where { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
170
+ .where code { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: rgba(243, 240, 232, 0.05); font-size: 12.5px; color: var(--ink-2); }
171
+ .where-more { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
172
+ .finding-tag { padding: 3px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
173
+
174
+ /* ---------- step 3: fix ---------- */
175
+ .fix-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
176
+ .fix-count { font-size: 13.5px; color: var(--ink-3); }
177
+ /* On the fix step the full path matters more than one line: it wraps instead of cutting the line number. */
178
+ .fix-meta .where code { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
179
+ .fix-summary { margin-top: 24px; max-width: 72ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
180
+ .fix-evidence { list-style: none; display: grid; gap: 7px; margin-top: 16px; max-width: 90ch; }
181
+ .fix-evidence li { position: relative; padding-left: 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--ink-3); overflow-wrap: anywhere; }
182
+ .fix-evidence li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
183
+ .prompt { margin-top: 34px; max-width: 900px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
184
+ .prompt header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--line); }
185
+ .prompt h2 { font-size: 14px; font-weight: 600; color: var(--ink-2); }
186
+ .prompt pre { max-height: 250px; overflow: auto; padding: 16px 18px 18px; font-size: 13px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
187
+ .agent-choice { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 30px; padding: 4px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
188
+ .agent-option { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
189
+ .agent-option:hover:not(:disabled) { color: var(--ink); }
190
+ .agent-option.on { background: var(--panel-3); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.5); }
191
+ .agent-option i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); }
192
+ .agent-option i.ok { background: var(--green); box-shadow: none; }
193
+ .agent-option i.no { background: var(--red); box-shadow: none; }
194
+ .agent-option:disabled { opacity: 0.6; }
195
+ .working-line { display: flex; align-items: center; gap: 14px; margin-top: 20px; color: var(--ink-2); }
196
+ .agent-reply { margin-top: 26px; max-width: 900px; max-height: 340px; overflow: auto; padding: 18px 22px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
197
+ .agent-reply.is-failed { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.5); }
198
+ .agent-reply h2 { font-size: 14px; font-weight: 600; color: var(--ink-3); }
199
+ .agent-reply-body { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
200
+ .agent-reply-body > * + * { margin-top: 8px; }
201
+ .agent-reply-body ul, .agent-reply-body ol { padding-left: 20px; }
202
+ .agent-reply-body code { padding: 1px 6px; border-radius: 5px; background: rgba(243, 240, 232, 0.08); font-size: 12.5px; }
203
+ .agent-reply-body pre { padding: 10px 12px; border-radius: 8px; background: var(--ground); overflow: auto; }
204
+
205
+ /* ---------- step 4: re-check ---------- */
206
+ .recheck-meter { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; font-size: 15px; color: var(--ink-2); }
207
+ .score-move { margin-top: 20px; font-family: var(--mono); font-size: 14px; color: var(--gold); }
208
+ .recheck-next { margin-top: 24px; font-size: 17px; color: var(--ink-2); }
209
+
210
+ /* ---------- step 5: ready ---------- */
211
+ .strip { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
212
+ .strip-item { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 11px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; }
213
+ .strip-item img { width: 20px; height: 20px; object-fit: contain; }
214
+ .strip-item.is-fail { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.6); }
215
+ .ready-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 22px; margin-top: 34px; align-items: start; }
216
+ .checklist { padding: 22px 24px 8px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
217
+ .checklist h2 { display: flex; align-items: baseline; gap: 12px; font-size: 18px; font-weight: 700; padding-bottom: 14px; }
218
+ .checklist-count { margin-left: auto; font-family: var(--mono); font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
219
+ .checklist ul { list-style: none; }
220
+ .check-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
221
+ .tick { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--on-gold); transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease); }
222
+ button.tick:hover { box-shadow: inset 0 0 0 1.5px var(--gold); }
223
+ button.tick[aria-checked="true"], .tick.on { background: var(--gold); box-shadow: none; }
224
+ .tick.is-auto { border-radius: 50%; }
225
+ .check-copy { display: grid; gap: 3px; min-width: 0; }
226
+ .check-copy strong { font-size: 15px; font-weight: 600; }
227
+ .check-copy span { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
228
+ .check-copy .check-who { font-size: 12.5px; color: var(--ink-3); opacity: 0.85; }
229
+ .check-item.is-done strong { color: var(--ink-2); }
230
+ .empty-line { padding: 4px 0 18px; font-size: 14.5px; color: var(--ink-3); }
231
+ .final { padding: 24px; border-radius: 16px; background: #171510; box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.45); }
232
+ .final h2 { font-size: 19px; font-weight: 700; }
233
+ .final p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
234
+ .final .final-quota { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
235
+ .final .primary { margin-top: 22px; width: 100%; }
236
+
237
+ @container (max-width: 820px) {
238
+ .board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "app app" "left right"; column-gap: 12px; row-gap: 14px; align-items: start; }
239
+ .board.is-solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "app"; }
240
+ .board.is-side { grid-template-columns: minmax(0, 1fr); grid-template-areas: "app" "right"; }
241
+ .board-lines { display: none; }
242
+ .board-col { width: 100%; }
243
+ .board-col.left, .board-col.right { justify-self: stretch; }
244
+ .board-app { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 18px; }
245
+ .board-checks { flex-basis: 100%; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
246
+ .ready-grid { grid-template-columns: minmax(0, 1fr); }
247
+ .finding { grid-template-columns: 120px minmax(0, 1fr) 16px; }
248
+ .finding .where, .finding .finding-tag { grid-column: 2; grid-row: 2; justify-self: start; }
249
+ .finding.is-static { grid-template-columns: 120px minmax(0, 1fr); }
250
+ }
251
+
252
+ /* ---------- sheets behind More ---------- */
253
+ .sheet-veil, .drawer-veil { position: fixed; inset: 0; z-index: 35; background: rgba(8, 7, 6, 0.64); }
254
+ .side { position: fixed; z-index: 40; top: 12px; right: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px)); display: flex; flex-direction: column; min-height: 0; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 100px rgba(0, 0, 0, 0.6); overflow: hidden; animation: slide-in 0.35s var(--ease) both; }
255
+ @keyframes slide-in { from { transform: translateX(16px); } to { transform: none; } }
256
+ .drawer { position: fixed; z-index: 40; top: calc(var(--top) + 12px); bottom: 20px; left: 50%; width: min(1080px, calc(100vw - 40px)); transform: translateX(-50%); display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 120px rgba(0, 0, 0, 0.7); overflow: hidden; animation: rise 0.35s var(--ease) both; }
257
+ @keyframes rise { from { transform: translate(-50%, 10px); } to { transform: translate(-50%, 0); } }
258
+ .drawer-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
259
+ .drawer-title { flex: 1; min-width: 0; }
260
+ .drawer-head h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
261
+ .drawer-title p { margin-top: 6px; max-width: 78ch; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
262
+ .drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 22px 24px; }
263
+ .drawer .block { padding: 22px; border-radius: 14px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
264
+ .drawer .block + .block { margin-top: 14px; }
265
+ .drawer .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
266
+ .drawer pre.out { padding: 14px 16px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 12.5px; min-height: 130px; max-height: 46vh; overflow: auto; white-space: pre-wrap; line-height: 1.6; }
267
+ .block-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
268
+ .block-head h4 { font-size: 16px; font-weight: 700; }
269
+ .block-head .btn:last-child, .block-head a.btn { margin-left: auto; }
270
+ .block-meta { color: var(--ink-3); font-size: 13px; }
271
+ .drawer-empty { color: var(--ink-3); font-size: 14px; line-height: 1.65; }
272
+
273
+ /* Buttons and small controls used inside the sheets. */
274
+ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; }
275
+ .btn:hover:not(:disabled) { background: var(--panel-3); }
276
+ .btn:disabled { opacity: 0.55; }
277
+ .btn.primary, .btn.acid, .btn.white { height: 38px; padding: 0 15px; font-size: 14px; background: var(--gold); color: var(--on-gold); box-shadow: none; }
278
+ .btn.primary:hover:not(:disabled), .btn.acid:hover:not(:disabled), .btn.white:hover:not(:disabled) { background: var(--gold-2); }
279
+ .btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); font-weight: 500; }
280
+ .btn.ghost:hover:not(:disabled) { background: rgba(243, 240, 232, 0.06); color: var(--ink); }
281
+ .btn.sm { height: 34px; padding: 0 12px; font-size: 13.5px; }
282
+ .pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
283
+ .pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
284
+ .pill.green { color: var(--green); } .pill.amber { color: var(--warn-ink); } .pill.red { color: var(--red-ink); } .pill.gray { color: var(--ink-3); }
285
+ .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
286
+ .tag.acid { color: var(--green); } .tag.red { color: var(--red-ink); } .tag.amber { color: var(--warn-ink); } .tag.dim { color: var(--ink-3); }
287
+ select.sel, input.sel { height: 36px; padding: 0 11px; border-radius: 9px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--ground); color: var(--ink); font: inherit; font-size: 13.5px; }
288
+
289
+ /* Agent connection steps (Coding agents sheet): installed is not connected. */
290
+ .steps { list-style: none; }
291
+ .step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
292
+ .step:first-child { border-top: 0; padding-top: 0; }
293
+ .step-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
294
+ .step.done .step-n { background: var(--gold); box-shadow: none; color: var(--on-gold); }
295
+ .step-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
296
+ .step-state { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
297
+ .step-state.ok { color: var(--green); }
298
+ .step-body p { margin-top: 7px; max-width: 78ch; color: var(--ink-2); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
299
+ .step-row { margin-top: 13px; }
300
+
301
+ /* Releases sheet. */
302
+ .rel-list { list-style: none; display: grid; gap: 10px; }
303
+ .rel { display: flex; align-items: center; gap: 20px; padding: 16px 18px; border-radius: 12px; background: var(--panel); }
304
+ .rel-main { flex: 1; min-width: 0; }
305
+ .rel-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
306
+ .rel .lbl { font-size: 15px; font-weight: 700; }
307
+ .rel-sum { margin-top: 6px; color: var(--ink-2); font-size: 13.5px; }
308
+ .rel-meta { margin-top: 4px; color: var(--ink-3); font-size: 12.5px; }
309
+ .compare-fields { align-items: flex-end; gap: 14px; }
310
+ .compare-fields label { display: grid; gap: 8px; flex: 1 1 210px; color: var(--ink-3); font-size: 13px; }
311
+ .compare-fields input { width: 100%; height: 42px; }
312
+ .compare-actions { display: flex; gap: 8px; }
313
+ .compare-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.45); color: var(--red-ink); font-size: 13.5px; }
314
+ .diff-result { margin-top: 18px; }
315
+ .diff-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 12px; color: var(--ink-3); font-size: 13.5px; }
316
+ .diff-stats .diff-range { color: var(--ink); font-weight: 600; }
317
+ .diff-stats .add, .diff .add { color: var(--green); }
318
+ .diff-stats .del, .diff .del { color: var(--red-ink); }
319
+ .diff { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre; overflow: auto; }
320
+ .diff .hd { color: var(--ink-3); }
321
+
322
+ /* Services sheet: one quiet card per service. */
323
+ .rail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
324
+ .slab { display: flex; flex-direction: column; min-width: 0; padding: 20px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
325
+ .slab.scanning { box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.6); }
326
+ .face { display: flex; flex-direction: column; align-items: flex-start; }
327
+ .face-top { align-self: stretch; display: flex; justify-content: flex-end; min-height: 24px; }
328
+ .face-top .tag { box-shadow: none; padding: 0; color: var(--ink-3); font-weight: 500; }
329
+ .face-top .tag.acid { color: var(--green); }
330
+ .face-logo { width: 40px; height: 40px; margin: 6px 0 16px; }
331
+ .face-logo img { width: 100%; height: 100%; object-fit: contain; }
332
+ .face-name { font-size: 18px; font-weight: 700; }
333
+ .face-area { margin-top: 3px; color: var(--ink-3); font-size: 13px; }
334
+ .slab-status { display: grid; grid-template-columns: 7px 1fr; gap: 8px; margin: 16px 0; min-height: 44px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
335
+ .slab-status i { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); }
336
+ .slab-status i.g { background: var(--green); box-shadow: none; } .slab-status i.a { background: var(--warn); box-shadow: none; }
337
+ .slab-status .fixlink { grid-column: 2; justify-self: start; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
338
+ .slab-act { display: flex; margin-top: auto; }
339
+ .slab-act .btn { width: 100%; }
340
+ .stack-setup { margin-bottom: 16px; border-radius: 14px; background: #171510; box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.4); overflow: hidden; }
341
+ .setup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px; }
342
+ .setup-heading h2 { font-size: 20px; font-weight: 700; }
343
+ .setup-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
344
+ .setup-steps li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
345
+ .setup-steps li.done { color: var(--ink-2); }
346
+ .setup-steps i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 11px; font-style: normal; font-weight: 700; }
347
+ .setup-steps li.done i { background: var(--gold); box-shadow: none; color: var(--on-gold); }
348
+ .setup-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 0 22px 22px; }
349
+ .setup-service { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
350
+ .setup-service.selected { box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.6); }
351
+ .setup-service img { width: 24px; height: 24px; object-fit: contain; flex: none; }
352
+ .setup-service-copy { min-width: 0; }
353
+ .setup-service strong { display: block; font-size: 13.5px; font-weight: 600; }
354
+ .setup-service small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
355
+ .setup-check { margin-left: auto; color: var(--ink-3); }
356
+ .selected .setup-check { color: var(--gold); }
357
+ .setup-footer { display: flex; align-items: center; gap: 20px; padding: 18px 22px; border-top: 1px solid var(--line); }
358
+ .setup-footer strong { font-size: 14px; font-weight: 600; }
359
+ .setup-footer p { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
360
+ .setup-footer .btn { margin-left: auto; }
361
+ .setup-progress { list-style: none; display: grid; gap: 10px; padding: 18px 22px; color: var(--ink-2); font-size: 13.5px; }
362
+ .setup-progress li { display: flex; align-items: center; gap: 10px; }
363
+ .progress-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
364
+ .configured .progress-dot, .review .progress-dot { background: var(--gold); }
365
+ .setup-error { margin: 0 22px 22px; padding: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.45); color: var(--red-ink); font-size: 13.5px; }
366
+ .setup-note { padding: 0 22px 22px; color: var(--ink-3); }
367
+
368
+ /* Agent chat sheet. */
369
+ .side-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 60px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
370
+ .side-head.tools { display: grid; gap: 10px; min-height: 0; }
371
+ .side-head .who { font-size: 16px; font-weight: 700; }
372
+ .seg { display: inline-flex; margin-left: auto; padding: 3px; gap: 2px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
373
+ .seg button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
374
+ .seg button.on { background: var(--panel-3); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.5); }
375
+ .seg i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-3); }
376
+ .seg i.g { background: var(--green); box-shadow: none; } .seg i.a { background: var(--warn); box-shadow: none; }
377
+ .model-field { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
378
+ .model-field .sel { width: 100%; }
379
+ .model-note { font-size: 12px; color: var(--ink-3); }
380
+ .agent-connection { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
381
+ .connection-action { color: var(--ink-2); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
382
+ .thread { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
383
+ .welcome { padding: 12px 4px; }
384
+ .welcome h3 { font-size: 20px; font-weight: 700; }
385
+ .welcome p { margin-top: 8px; color: var(--ink-2); }
386
+ .suggest { display: grid; gap: 8px; margin-top: 18px; }
387
+ .suggest-chip { padding: 12px 14px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; text-align: left; transition: box-shadow 0.2s; }
388
+ .suggest-chip:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.5); }
389
+ .suggest-chip:disabled { opacity: 0.55; }
390
+ .msg { padding: 8px 0; }
391
+ .msg .who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 4px; font-size: 13px; font-weight: 700; color: var(--gold); }
392
+ .msg .who .t { font-weight: 400; color: var(--ink-3); }
393
+ .msg .body { padding: 13px 15px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
394
+ .msg .body > * + * { margin-top: 8px; }
395
+ .msg .body ul, .msg .body ol { padding-left: 20px; }
396
+ .msg .body h4 { font-size: 14px; font-weight: 700; color: var(--ink); }
397
+ .msg .body pre { padding: 10px 12px; border-radius: 8px; background: var(--panel); overflow: auto; white-space: pre-wrap; }
398
+ .msg .body code { padding: 1px 6px; border-radius: 5px; background: rgba(243, 240, 232, 0.08); }
399
+ .msg.me .who { display: none; }
400
+ .msg.me .body { float: right; margin-left: 48px; background: var(--panel-3); box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.35); font-weight: 600; }
401
+ .msg.me::after { content: ""; display: block; clear: both; }
402
+ .msg.err .who { color: var(--red-ink); }
403
+ .msg.err .body { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.4); }
404
+ .msg .card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
405
+ .msg .card img { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; }
406
+ .working { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-weight: 600; }
407
+ .working .stop { margin-left: auto; }
408
+ .working .stop .sq { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
409
+ .hint { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 16px 10px; color: var(--ink-2); font-size: 13px; }
410
+ .slow-run { padding: 12px 0; line-height: 1.6; }
411
+ .slow-run[hidden] { display: none; }
412
+ .composer { flex-shrink: 0; margin: 0 14px 14px; padding: 12px 14px 10px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line-2); }
413
+ .composer:focus-within { box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.6); }
414
+ .composer textarea { width: 100%; min-height: 48px; max-height: 180px; resize: none; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 15px; outline: 0; caret-color: var(--gold); }
415
+ .composer textarea::placeholder { color: var(--ink-3); }
416
+ .composer .row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
417
+ .composer select.mode { max-width: 190px; font-size: 13px; }
418
+ .composer .send { width: 40px; height: 40px; margin-left: auto; padding: 0; border-radius: 50%; background: var(--gold); color: var(--on-gold); box-shadow: none; }
419
+ .composer .send.stop { background: var(--ink); }
420
+ .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(243, 240, 232, 0.07); font-size: 12.5px; }
421
+ .chip img { width: 13px; height: 13px; }
422
+
423
+ /* ---------- toasts ---------- */
424
+ .toasts { position: fixed; left: 50%; bottom: 22px; z-index: 70; display: flex; flex-direction: column; gap: 8px; transform: translateX(-50%); }
425
+ .toast { max-width: 560px; padding: 11px 16px; border-radius: 10px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 40px rgba(0, 0, 0, 0.5); color: var(--ink); font-size: 14px; font-weight: 500; animation: settle 0.35s var(--ease) both; }
426
+ .toast.err { box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.55), 0 16px 40px rgba(0, 0, 0, 0.5); color: var(--red-ink); }
427
+
428
+ /* ---------- hosted full check ---------- */
429
+ .fc-veil { position: fixed; inset: 0; z-index: 60; background: rgba(8, 7, 6, 0.66); }
430
+ .fc-sheet { position: fixed; z-index: 61; top: 5vh; left: 50%; transform: translateX(-50%); width: min(900px, calc(100vw - 32px)); max-height: 90vh; display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 100px rgba(0, 0, 0, 0.6); animation: rise 0.35s var(--ease) both; }
431
+ .fc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
432
+ .fc-head h2 { font-size: 19px; font-weight: 800; }
433
+ .fc-head .btn { background: transparent; box-shadow: none; color: var(--ink-2); font-weight: 500; }
434
+ .fc-body { overflow: auto; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
435
+ .fc-lead { color: var(--ink-2); font-size: 15px; }
436
+ .fc-notice { padding: 11px 14px; border-radius: 10px; background: rgba(223, 189, 110, 0.08); box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.35); color: var(--gold-2); font-size: 13.5px; }
437
+ .fc-error { padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(240, 122, 106, 0.45); color: var(--red-ink); }
438
+ .fc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
439
+ .fc-wait { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-3); font-size: 13.5px; }
440
+ .fc-code { display: flex; align-items: baseline; gap: 14px; width: fit-content; padding: 16px 18px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line-2); }
441
+ .fc-code-label { color: var(--ink-3); font-size: 13px; }
442
+ .fc-code strong { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: 0.18em; color: var(--gold); }
443
+ .fc-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ink-3); font-size: 13px; }
444
+ .fc-account .fc-dot::before { content: "·"; margin-right: 12px; color: var(--line-2); }
445
+ .fc-link { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
446
+ .fc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
447
+ .fc-facts > div { min-width: 0; padding: 11px 13px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
448
+ .fc-facts dt { color: var(--ink-3); font-size: 12.5px; }
449
+ .fc-facts dd { margin-top: 2px; overflow-wrap: anywhere; }
450
+ .fc-filegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
451
+ .fc-files { min-width: 0; padding: 12px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
452
+ .fc-files h4 { margin-bottom: 8px; font-size: 13px; color: var(--ink-2); }
453
+ .fc-files ul { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
454
+ .fc-files li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
455
+ .fc-files li code { overflow-wrap: anywhere; color: var(--ink); }
456
+ .fc-files li span { color: var(--ink-3); white-space: nowrap; }
457
+ .fc-raw summary { cursor: pointer; color: var(--ink-2); font-size: 13.5px; }
458
+ .fc-raw pre { margin-top: 10px; max-height: 280px; overflow: auto; padding: 12px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); font-size: 12.5px; }
459
+ .fc-score { display: flex; align-items: center; gap: 18px; }
460
+ .fc-score-num { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--gold); font-size: 26px; font-weight: 800; }
461
+ .fc-score-label { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 17px; font-weight: 700; }
462
+ .fc-score p { color: var(--ink-2); }
463
+ .fc-next { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; border-radius: 12px; background: #171510; box-shadow: inset 0 0 0 1px rgba(223, 189, 110, 0.45); }
464
+ .fc-next .fix-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
465
+ .fc-next .fix-meta { margin: 0; font-size: 13px; color: var(--ink-3); }
466
+ .fc-next h3 { font-size: 17px; font-weight: 700; }
467
+ .fc-next p { color: var(--ink-2); }
468
+ .fc-eyebrow { font-size: 13px; font-weight: 600; color: var(--gold); }
469
+ .fc-h4 { font-size: 14px; font-weight: 700; color: var(--ink-2); }
470
+ .fc-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
471
+ .fc-area { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
472
+ .fc-area.locked { opacity: 0.72; }
473
+ .fc-area-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
474
+ .fc-area h5 { font-size: 14px; font-weight: 700; }
475
+ .fc-count { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--panel-2); color: var(--ink-3); font-size: 12px; font-weight: 700; }
476
+ .fc-count.on { color: var(--warn-ink); }
477
+ .fc-area ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
478
+ .fc-area li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
479
+ .fc-area li .tag { flex: none; height: 20px; font-size: 11px; }
480
+ .fc-upsell { color: var(--ink-2); font-size: 13.5px; }
481
+ .fc-upsell a { color: var(--gold); }
482
+ .fc-limit { font-size: 20px; font-weight: 700; line-height: 1.35; }
483
+
484
+ /* ---------- narrow screens ---------- */
485
+ @media (max-width: 900px) {
486
+ .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top) auto minmax(0, 1fr); }
487
+ .top { padding: 0 18px; gap: 14px; }
488
+ .top-project code { display: none; }
489
+ .rail { position: sticky; top: var(--top); z-index: 20; height: auto; padding: 12px 18px; border-right: 0; border-bottom: 1px solid var(--line); background: var(--ground); overflow-x: auto; }
490
+ .rail ol { display: flex; gap: 6px; }
491
+ .rail-step:not(:last-child)::after { display: none; }
492
+ .rail-button { grid-template-columns: 20px auto; gap: 8px; padding: 6px 10px 6px 4px; white-space: nowrap; }
493
+ .rail-mark { width: 20px; height: 20px; }
494
+ .rail-meta { display: none; }
495
+ .rail-label { font-size: 14px; }
496
+ .stage { padding: 32px 18px 72px; }
497
+ }
498
+ @media (max-width: 560px) {
499
+ .wordmark { font-size: 13px; }
500
+ .top-project { padding-left: 14px; }
501
+ .primary { width: 100%; }
502
+ .drawer { top: 10px; bottom: 10px; width: calc(100vw - 20px); }
503
+ .setup-footer { flex-direction: column; align-items: stretch; }
504
+ }
505
+ @media (prefers-reduced-motion: reduce) {
506
+ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
507
+ .board-lines .pulse { display: none; }
508
+ }
509
+
510
+ /* ---------- the product look (as on viberaven.dev's hero): neutral black, medium type, a dotted canvas of
511
+ service cards, and the path as a small dock at the bottom instead of a sidebar ---------- */
512
+ :root { --top: 56px; }
513
+ .app { grid-template-columns: minmax(0, 1fr); }
514
+ .top { gap: 14px; height: 56px; padding: 0 24px; background: rgba(10, 10, 11, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
515
+ .wordmark { font-size: 13px; font-weight: 700; font-stretch: 100%; letter-spacing: 0.08em; }
516
+ .wordmark b { font-weight: 700; color: #dfbd6e; }
517
+ .top-project { gap: 10px; padding-left: 0; border-left: 0; align-items: center; }
518
+ .top-sep { color: var(--ink-3); opacity: 0.7; }
519
+ .top-project strong { font-size: 14px; font-weight: 500; }
520
+ .top-project code { font-size: 12px; }
521
+ .top-verdict { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--ink); white-space: nowrap; }
522
+ .top-verdict i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
523
+ .top-verdict.is-fail i { background: var(--red); }
524
+ .top-verdict.is-warn i { background: var(--warn); }
525
+ .top-verdict.is-pass { color: var(--green); border-color: rgba(111, 208, 140, 0.4); }
526
+ .top-verdict.is-pass i { background: var(--green); }
527
+ .top-verdict.is-pending i { animation: pulse-dot 1.2s ease-in-out infinite; }
528
+ @keyframes pulse-dot { 50% { opacity: 0.3; } }
529
+ .more-button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; }
530
+
531
+ /* The path: a dock, not a sidebar. The step notes stay for screen readers. */
532
+ .rail { position: fixed; left: 50%; bottom: 20px; top: auto; z-index: 25; height: auto; transform: translateX(-50%); padding: 4px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(20, 20, 24, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.9); }
533
+ .rail ol { display: flex; gap: 2px; }
534
+ .rail-step:not(:last-child)::after { display: none; }
535
+ .rail-button { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 38px; padding: 0 14px; border-radius: 10px; transition: background 0.2s, color 0.2s; }
536
+ .rail-mark { width: 16px; height: 16px; margin: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); }
537
+ .rail-mark svg { width: 9px; height: 9px; }
538
+ .is-passed .rail-mark { background: var(--green); }
539
+ .is-current .rail-mark { box-shadow: inset 0 0 0 1.5px var(--ink); }
540
+ .is-current .rail-mark::after { width: 6px; height: 6px; background: var(--ink); }
541
+ .rail-copy { display: block; }
542
+ .rail-label { font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--ink-3); }
543
+ .rail-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
544
+ .is-current .rail-button { background: rgba(255, 255, 255, 0.08); }
545
+ .is-current .rail-label { color: var(--ink); font-weight: 500; }
546
+ .is-passed .rail-label, .is-open .rail-label { color: var(--ink-2); }
547
+ .is-open .rail-button:hover .rail-label, .is-passed .rail-button:hover .rail-label { color: var(--ink); }
548
+
549
+ /* The stage: centred, calm type. */
550
+ .stage { padding: 56px 24px 140px; }
551
+ .stage-body { max-width: 1080px; margin: 0 auto; }
552
+ .stage-alert { margin-inline: auto; }
553
+ .stage h1 { font-size: clamp(32px, 4cqi, 48px); font-weight: 500; font-stretch: 100%; letter-spacing: -0.035em; line-height: 1.05; }
554
+ .stage-sub { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
555
+ .primary { min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: #0a0a0b; font-size: 15px; font-weight: 500; }
556
+ .primary:hover:not(:disabled) { background: #fff; }
557
+ .primary:disabled { background: var(--panel-3); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
558
+ .primary-note { font-size: 13.5px; }
559
+ .quiet { border-radius: 999px; }
560
+
561
+ /* Your app: a project canvas. Dotted ground, your app as one card, each service as another. */
562
+ .board { margin-top: 36px; padding: 40px 36px; border-radius: 14px; border: 1px solid var(--line-2); background: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.2px) 0 0 / 18px 18px, #0c0c0f; min-height: 300px; }
563
+ .board.is-side, .board.is-solo { justify-content: center; }
564
+ .board-lines .line, .board-lines .line.is-pass, .board-lines .line.is-warn, .board-lines .line.is-fail { stroke-dasharray: 3 5; stroke-width: 1.2; }
565
+ .board-lines .line { stroke: rgba(255, 255, 255, 0.16); }
566
+ .board-lines .line.is-pass { stroke: rgba(111, 208, 140, 0.55); }
567
+ .board-lines .line.is-warn { stroke: rgba(242, 193, 95, 0.5); }
568
+ .board-lines .line.is-fail { stroke: rgba(244, 113, 95, 0.7); }
569
+ .node { grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; padding: 12px 14px; border-radius: 10px; background: #141418; box-shadow: none; border: 1px solid var(--line-2); }
570
+ .node img, .node-fallback { grid-row: auto; width: 20px; height: 20px; }
571
+ .node-name { font-size: 14px; font-weight: 500; }
572
+ .node-state { grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
573
+ .node.is-fail { box-shadow: none; border-color: rgba(244, 113, 95, 0.55); }
574
+ .node.is-warn { border-color: rgba(242, 193, 95, 0.45); }
575
+ .node.is-pass .node-state i { background: var(--green); }
576
+ .board-app { padding: 18px 18px 16px; border-radius: 12px; background: #141418; box-shadow: none; border: 1px solid var(--line-2); align-items: stretch; text-align: left; }
577
+ .board-app.is-fail { box-shadow: none; border-color: rgba(244, 113, 95, 0.55); }
578
+ .board-app.is-pass { box-shadow: none; border-color: rgba(111, 208, 140, 0.45); }
579
+ .board-app-name { font-size: 12px; }
580
+ .board-status strong { font-size: 20px; font-weight: 500; font-stretch: 100%; letter-spacing: -0.02em; }
581
+ .board-app.is-pass strong { color: var(--green); }
582
+ .board-checks { padding: 10px 0 0; }
583
+
584
+ /* Findings: one card per service. */
585
+ .findings { gap: 12px; margin-top: 32px; }
586
+ .group { border-radius: 14px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
587
+ .group-head { padding: 14px 18px; border-bottom: 1px solid var(--line); }
588
+ .group-head h2 { font-size: 15px; font-weight: 500; }
589
+ .group-head img { width: 20px; height: 20px; }
590
+ .finding { grid-template-columns: 118px minmax(0, 1fr) auto 16px; padding: 14px 18px; }
591
+ .group li:last-child .finding { border-bottom: 0; }
592
+ button.finding:hover { background: rgba(255, 255, 255, 0.03); }
593
+ button.finding:hover .ico { color: var(--ink); }
594
+ .finding-title { font-size: 14.5px; }
595
+ .finding.is-first .finding-title { font-weight: 500; }
596
+ .sev { font-size: 12.5px; font-weight: 500; }
597
+ .sev.is-critical { color: var(--red); }
598
+ .sev.is-warning { color: var(--warn); }
599
+ .where code { background: rgba(255, 255, 255, 0.05); font-size: 12px; }
600
+
601
+ /* Fix, re-check, ready: the same cards. */
602
+ .prompt, .agent-reply, .checklist { border-radius: 14px; background: var(--panel); box-shadow: none; border: 1px solid var(--line); }
603
+ .agent-choice { border-radius: 999px; box-shadow: none; border: 1px solid var(--line); }
604
+ .agent-option { border-radius: 999px; }
605
+ .agent-option.on { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
606
+ .checklist h2, .final h2 { font-weight: 500; }
607
+ .tick { border-radius: 50%; }
608
+ button.tick[aria-checked="true"], .tick.on { background: var(--green); }
609
+ .final { border-radius: 14px; background: var(--panel); box-shadow: none; border: 1px solid var(--line-2); }
610
+ .strip-item { border-radius: 999px; box-shadow: none; border: 1px solid var(--line); font-weight: 500; }
611
+ .score-move { color: var(--green); }
612
+
613
+ @media (max-width: 760px) {
614
+ .top-verdict { display: none; }
615
+ .rail { left: 12px; right: 12px; transform: none; overflow-x: auto; }
616
+ .rail-button { padding: 0 10px; }
617
+ .board { padding: 20px 14px; }
618
+ }
619
+
620
+ /* ---------- strong: bright text, black-and-white controls. Gold is the wordmark's only; state colours
621
+ (green, amber, red) only where a check says something. ---------- */
622
+ :root { --gold: #f5f5f7; --gold-2: #fff; --ink-2: #d4d4d8; --ink-3: #a1a1aa; --line: rgba(255, 255, 255, 0.1); --line-2: rgba(255, 255, 255, 0.2); --on-gold: #0a0a0b; }
623
+ :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
624
+ ::selection { background: rgba(255, 255, 255, 0.25); }
625
+ .stage-sub, .primary-note, .fix-summary, .recheck-next { color: var(--ink-2); }
626
+ .top-project code, .rail-label { color: var(--ink-2); }
627
+ .is-locked .rail-label { color: var(--ink-3); }
628
+
629
+ /* Buttons: white pill for the one thing to do, outlined pill for everything else. */
630
+ .btn { height: 38px; padding: 0 16px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-weight: 500; }
631
+ .btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
632
+ .btn.primary, .btn.acid, .btn.white { background: #f5f5f7; color: #0a0a0b; font-weight: 500; }
633
+ .btn.primary:hover:not(:disabled), .btn.acid:hover:not(:disabled), .btn.white:hover:not(:disabled) { background: #fff; }
634
+ .btn.ghost { color: var(--ink); }
635
+ .btn.sm { height: 34px; padding: 0 14px; }
636
+ .quiet { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
637
+ .quiet:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
638
+ .quiet-row { margin-left: 0; gap: 8px; }
639
+ .more-button { color: var(--ink); border-color: var(--line-2); }
640
+ .more-button.on { background: #f5f5f7; color: #0a0a0b; }
641
+
642
+ /* Sheets behind More: one hairline, medium headings, the page's black. */
643
+ .sheet-veil, .drawer-veil { background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
644
+ .side, .drawer { background: #0e0e11; box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 120px rgba(0, 0, 0, 0.75); border-radius: 16px; }
645
+ .drawer-head h3, .block-head h4, .welcome h3, .setup-heading h2, .face-name, .rel .lbl, .step-title, .side-head .who { font-weight: 500; letter-spacing: -0.015em; }
646
+ .drawer-head h3 { font-size: 24px; letter-spacing: -0.03em; }
647
+ .drawer-title p, .block-meta, .drawer-empty, .face-area, .rel-meta, .step-state { color: var(--ink-3); }
648
+ .drawer .block { background: #141418; box-shadow: inset 0 0 0 1px var(--line); }
649
+ .slab { background: #0e0e11; box-shadow: inset 0 0 0 1px var(--line); }
650
+ .slab.scanning { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
651
+ .slab-status { color: var(--ink-2); }
652
+ .slab-status .fixlink { color: var(--ink); }
653
+ .face-top .tag { color: var(--ink-2); }
654
+ .stack-setup { background: #141418; box-shadow: inset 0 0 0 1px var(--line-2); }
655
+ .setup-steps li { color: var(--ink-2); }
656
+ .setup-steps li.done i, .step.done .step-n { background: #f5f5f7; color: #0a0a0b; box-shadow: none; }
657
+ .step-n { color: var(--ink-2); }
658
+ .setup-service.selected { box-shadow: inset 0 0 0 1px #f5f5f7; }
659
+ .selected .setup-check { color: #fff; }
660
+ .setup-footer p, .setup-note { color: var(--ink-2); }
661
+ .configured .progress-dot, .review .progress-dot { background: var(--green); }
662
+ .rel { background: #0e0e11; box-shadow: inset 0 0 0 1px var(--line); }
663
+ .compare-fields label { color: var(--ink-2); }
664
+ select.sel, input.sel { border-radius: 10px; background: #0a0a0b; box-shadow: inset 0 0 0 1px var(--line-2); }
665
+ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #f5f5f7; }
666
+
667
+ /* Agent chat. */
668
+ .seg { border-radius: 999px; background: #0a0a0b; }
669
+ .seg button { border-radius: 999px; color: var(--ink-2); }
670
+ .seg button.on { background: #f5f5f7; color: #0a0a0b; box-shadow: none; }
671
+ .model-field, .model-note { color: var(--ink-2); }
672
+ .connection-action { color: var(--ink); }
673
+ .welcome p { color: var(--ink-2); }
674
+ .suggest-chip { border-radius: 12px; background: #141418; font-weight: 500; }
675
+ .suggest-chip:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #f5f5f7; }
676
+ .msg .who { color: var(--ink); font-weight: 500; }
677
+ .msg .body { background: #141418; }
678
+ .msg.me .body { background: #f5f5f7; color: #0a0a0b; box-shadow: none; font-weight: 500; }
679
+ .composer { background: #141418; border-radius: 14px; }
680
+ .composer:focus-within { box-shadow: inset 0 0 0 1px #f5f5f7; }
681
+ .composer textarea { caret-color: #fff; }
682
+ .composer .send { background: #f5f5f7; color: #0a0a0b; }
683
+ .composer .send:hover:not(:disabled) { background: #fff; }
684
+ .hint { color: var(--ink-2); }
685
+
686
+ /* Fix step: the agent picker as black-and-white pills. */
687
+ .agent-option { color: var(--ink-2); }
688
+ .agent-option.on { background: #f5f5f7; color: #0a0a0b; }
689
+ .agent-option.on i.ok { background: #1f9d4c; }
690
+ .prompt h2, .agent-reply h2 { color: var(--ink); font-weight: 500; }
691
+ .prompt pre, .agent-reply-body { color: var(--ink-2); }
692
+ .where code { color: var(--ink); }
693
+ .fix-count, .fix-evidence li { color: var(--ink-2); }
694
+ .check-copy span, .check-copy .check-who { color: var(--ink-2); }
695
+ .final .final-quota { color: var(--ink-2); }
696
+ .board-app-name, .group-count, .checklist-count { color: var(--ink-2); }
697
+ /* The dock sits over the page's end, so the page ends clear of it. */
698
+ .stage { padding-bottom: 160px; }
699
+
700
+ /* The path lives in the middle of the top bar: always visible, never over the page. */
701
+ .rail { top: 9px; bottom: auto; z-index: 31; padding: 3px; border-radius: 999px; background: #111114; box-shadow: none; }
702
+ .rail-button { height: 32px; padding: 0 12px; border-radius: 999px; gap: 7px; }
703
+ .rail-label { font-size: 13px; }
704
+ .is-current .rail-button { background: #f5f5f7; }
705
+ .is-current .rail-label { color: #0a0a0b; }
706
+ .is-current .rail-mark { box-shadow: inset 0 0 0 1.5px #0a0a0b; }
707
+ .is-current .rail-mark::after { background: #0a0a0b; }
708
+ .stage { padding-bottom: 96px; }
709
+ @media (max-width: 1180px) { .top-project code { display: none; } }
710
+ @media (max-width: 1000px) {
711
+ .rail { top: auto; bottom: 16px; border-radius: 14px; }
712
+ .stage { padding-bottom: 150px; }
713
+ }
714
+ @media (max-width: 1180px) { .top-project > span.top-sep:last-of-type { display: none; } }
715
+ @media (max-width: 640px) {
716
+ .finding, .finding.is-static { grid-template-columns: minmax(0, 1fr) 16px; gap: 6px 12px; padding: 14px 16px; }
717
+ .finding .sev { grid-column: 1; grid-row: 1; }
718
+ .finding .finding-title { grid-column: 1; grid-row: 2; white-space: normal; }
719
+ .finding .where, .finding .finding-tag { grid-column: 1; grid-row: 3; }
720
+ .finding > .ico { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
721
+ }
722
+
723
+ /* ---------- stronger: pure black ground, near-white text, vivid state colours ---------- */
724
+ :root {
725
+ --ground: #000; --panel: #0e0e10; --panel-2: #151518; --panel-3: #1d1d21;
726
+ --ink: #ffffff; --ink-2: #ececf0; --ink-3: #c2c2ca;
727
+ --line: rgba(255, 255, 255, 0.13); --line-2: rgba(255, 255, 255, 0.24);
728
+ --red: #ff5a45; --red-ink: #ff7a68; --warn: #ffc233; --warn-ink: #ffcf5c; --green: #34d67a;
729
+ }
730
+ .top { background: rgba(0, 0, 0, 0.9); }
731
+ .rail { background: #0e0e10; }
732
+ .board { background: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.2px) 0 0 / 18px 18px, #060607; }
733
+ .node, .board-app { background: #111114; }
734
+ .node.is-fail, .board-app.is-fail { border-color: var(--red); }
735
+ .node.is-warn { border-color: rgba(255, 194, 51, 0.7); }
736
+ .node.is-pass, .board-app.is-pass { border-color: rgba(52, 214, 122, 0.6); }
737
+ .node.is-fail .node-state, .board-app.is-fail strong { color: var(--red-ink); }
738
+ .node.is-warn .node-state { color: var(--warn-ink); }
739
+ .node.is-pass .node-state { color: #ffffff; }
740
+ .board-lines .line.is-pass { stroke: rgba(52, 214, 122, 0.7); }
741
+ .board-lines .line.is-warn { stroke: rgba(255, 194, 51, 0.65); }
742
+ .board-lines .line.is-fail { stroke: rgba(255, 90, 69, 0.85); }
743
+ .group { background: #0b0b0d; border-color: var(--line-2); }
744
+ .group-head { background: #111114; }
745
+ .sev { font-weight: 600; }
746
+ .sev.is-critical { color: var(--red); }
747
+ .sev.is-warning { color: var(--warn); }
748
+ .sev.is-info { color: var(--ink-3); }
749
+ .finding-title { color: #fff; }
750
+ .top-verdict { border-color: var(--line-2); font-weight: 500; }
751
+ .top-verdict.is-fail { color: #fff; border-color: rgba(255, 90, 69, 0.7); background: rgba(255, 90, 69, 0.12); }
752
+ .top-verdict.is-warn { color: #fff; border-color: rgba(255, 194, 51, 0.6); background: rgba(255, 194, 51, 0.1); }
753
+ .top-verdict.is-pass { color: var(--green); border-color: rgba(52, 214, 122, 0.6); background: rgba(52, 214, 122, 0.1); }
754
+ .prompt, .agent-reply, .checklist, .final, .slab, .rel, .drawer .block { border-color: var(--line-2); }
755
+ .prompt pre { color: var(--ink-2); }
756
+ .side, .drawer { background: #09090b; }
757
+
758
+ /* ---------- full check sheet: one summary, the files, one white Send ---------- */
759
+ .fc-veil { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
760
+ .fc-sheet { top: 4vh; width: min(760px, calc(100vw - 32px)); max-height: 92vh; border-radius: 18px; background: #0c0c0e; box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 120px rgba(0, 0, 0, 0.75); }
761
+ .fc-head { padding: 18px 22px; }
762
+ .fc-head h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
763
+ .fc-head .btn { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
764
+ .fc-body { gap: 14px; padding: 20px 22px 0; }
765
+ .fc-lead { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
766
+ .fc-hint { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
767
+ .fc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
768
+ .fc-notice { background: rgba(255, 194, 51, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 194, 51, 0.35); color: var(--warn-ink); }
769
+
770
+ /* Sign in: the code as tiles, as on viberaven.dev/connect. */
771
+ .fc-code { display: grid; gap: 12px; width: 100%; padding: 20px; border-radius: 14px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); justify-items: center; }
772
+ .fc-code-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
773
+ #fc-code { display: flex; gap: 8px; font-size: 0; }
774
+ #fc-code span { display: grid; place-items: center; width: 46px; height: 56px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); background: #141418; font-family: var(--mono); font-size: 26px; font-weight: 600; text-transform: uppercase; color: var(--ink); }
775
+
776
+ /* Review: size first, then who, facts, files. */
777
+ .fc-summary { display: grid; gap: 8px; padding: 18px 20px; border-radius: 14px; background: #141418; box-shadow: inset 0 0 0 1px var(--line); }
778
+ .fc-summary-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
779
+ .fc-summary-size { font-size: 32px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
780
+ .fc-summary-what { font-size: 14px; color: var(--ink-2); }
781
+ .fc-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--ink-2); }
782
+ .fc-account .fc-dot::before { content: "·"; margin-right: 12px; color: var(--ink-3); }
783
+ .fc-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f5f5f7; color: #0a0a0b; font-size: 12px; font-weight: 600; }
784
+ .fc-who { color: var(--ink); }
785
+ .fc-plan { height: 22px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
786
+ .fc-plan.is-pro { background: #f5f5f7; color: #0a0a0b; box-shadow: none; }
787
+ .fc-link { margin-left: auto; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
788
+ .fc-facts { gap: 8px; }
789
+ .fc-facts > div { padding: 10px 12px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
790
+ .fc-facts dt { font-size: 12px; color: var(--ink-3); }
791
+ .fc-facts dd { font-size: 13.5px; color: var(--ink); }
792
+ .fc-filegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
793
+ .fc-files { padding: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
794
+ .fc-files summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); list-style: none; }
795
+ .fc-files summary::-webkit-details-marker { display: none; }
796
+ .fc-files summary::before { content: "›"; color: var(--ink-3); transition: transform 0.2s; }
797
+ .fc-files[open] summary::before { transform: rotate(90deg); }
798
+ .fc-files-count { margin-left: auto; min-width: 26px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-family: var(--mono); font-size: 12px; color: var(--ink); }
799
+ .fc-files ul { gap: 0; max-height: 240px; overflow: auto; border-top: 1px solid var(--line); }
800
+ .fc-files li { padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
801
+ .fc-files li:last-child { border-bottom: 0; }
802
+ .fc-files li code { color: var(--ink); }
803
+ .fc-files li span { color: var(--ink-3); }
804
+ .fc-empty { padding: 0 14px 12px; font-size: 13px; color: var(--ink-3); }
805
+ .fc-shield { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
806
+ .fc-shield::before { content: ""; position: absolute; left: 14px; top: 14px; width: 14px; height: 16px; background: var(--ink-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 0l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 0l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V3z'/%3E%3C/svg%3E") center / contain no-repeat; }
807
+ .fc-shield.is-on::before { background: var(--green); }
808
+ .fc-raw { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; }
809
+ .fc-raw summary { font-size: 13px; color: var(--ink); }
810
+ .fc-raw pre { background: #060607; border-radius: 10px; }
811
+ /* The actions stay in reach at the bottom of the sheet. */
812
+ .fc-footer { position: sticky; bottom: 0; z-index: 1; margin: 4px -22px 0; padding: 14px 22px 18px; background: linear-gradient(180deg, rgba(12, 12, 14, 0), #0c0c0e 30%); }
813
+ .fc-actions .btn { height: 44px; padding: 0 20px; }
814
+ .fc-actions .btn.primary { font-size: 15px; }
815
+
816
+ /* Result: the score as a ring, one next fix, quiet areas as chips. */
817
+ .fc-score { gap: 20px; padding: 18px 20px; border-radius: 14px; background: #141418; box-shadow: inset 0 0 0 1px var(--line); }
818
+ .fc-score-num { position: relative; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--tone, var(--ink)) calc(var(--score) * 1%), rgba(255, 255, 255, 0.08) 0); font-size: 28px; font-weight: 600; color: var(--ink); box-shadow: none; }
819
+ .fc-score-num::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #141418; }
820
+ .fc-score-num { isolation: isolate; }
821
+ .fc-score-num::before { z-index: -1; }
822
+ .fc-score.is-fail { --tone: var(--red); }
823
+ .fc-score.is-warn { --tone: var(--warn); }
824
+ .fc-score.is-pass { --tone: var(--green); }
825
+ .fc-score-label { font-size: 17px; font-weight: 500; color: var(--ink); }
826
+ .fc-score p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
827
+ .fc-next { gap: 8px; padding: 18px 20px; border-radius: 14px; background: #141418; box-shadow: inset 0 0 0 1px var(--line-2); }
828
+ .fc-next.is-critical { box-shadow: inset 0 0 0 1px rgba(255, 90, 69, 0.6); }
829
+ .fc-next.is-warning { box-shadow: inset 0 0 0 1px rgba(255, 194, 51, 0.5); }
830
+ .fc-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2); }
831
+ .fc-next h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
832
+ .fc-next p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
833
+ .fc-next .btn { margin-top: 6px; height: 38px; }
834
+ .fc-h4 { font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 4px; }
835
+ .fc-areas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
836
+ .fc-area { padding: 14px; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
837
+ .fc-area h5 { font-size: 14px; font-weight: 500; }
838
+ .fc-count.on { background: rgba(255, 194, 51, 0.14); color: var(--warn); border-radius: 999px; }
839
+ .fc-quiet { display: flex; flex-wrap: wrap; gap: 6px; }
840
+ .fc-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
841
+ .fc-chip-mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(52, 214, 122, 0.16); color: var(--green); font-size: 11px; font-weight: 700; }
842
+ .fc-chip.locked { color: var(--ink-3); }
843
+ .fc-chip.locked .fc-chip-mark { background: rgba(255, 255, 255, 0.06); }
844
+ .fc-chip .tag { height: 20px; font-size: 11px; }
845
+ .fc-upsell a { color: var(--ink); }
846
+ .fc-limit { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
847
+ @media (max-width: 640px) {
848
+ .fc-sheet { top: 2vh; max-height: 96vh; }
849
+ .fc-body { padding: 16px 16px 0; }
850
+ .fc-footer { margin: 4px -16px 0; padding: 12px 16px 16px; }
851
+ #fc-code span { width: 38px; height: 48px; font-size: 22px; }
852
+ .fc-score { gap: 14px; }
853
+ .fc-score-num { width: 68px; height: 68px; font-size: 22px; }
854
+ }
855
+
856
+ /* ---------- the project canvas, as on the viberaven.dev hero: tabs in the bar, the stack as cards on a dotted
857
+ canvas that fills the window, each later step as a panel over the canvas, and the loop as a dock ---------- */
858
+ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
859
+
860
+ /* Views in the bar. */
861
+ .top-tabs { display: flex; align-self: stretch; gap: 20px; margin-right: 10px; }
862
+ .top-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 1px; border-radius: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-3); transition: color 0.15s; }
863
+ .top-tab:hover:not(:disabled) { color: var(--ink); }
864
+ .top-tab[aria-current="page"] { color: var(--ink); }
865
+ .top-tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); }
866
+ .top-tab:disabled { opacity: 0.4; cursor: default; }
867
+ .top-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-family: var(--mono); font-size: 11px; color: var(--ink); }
868
+
869
+ /* The dock: Scan, Fix, Re-check, Launch. */
870
+ .rail { top: auto; bottom: 18px; left: 50%; right: auto; transform: translateX(-50%); z-index: 31; padding: 4px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(18, 18, 22, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9); transition: left 0.45s var(--ease); }
871
+ .rail ol { display: flex; gap: 2px; }
872
+ .rail-button { position: relative; overflow: hidden; height: 40px; padding: 0 16px; border-radius: 10px; gap: 8px; }
873
+ .rail-button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); }
874
+ .rail-mark, .is-current .rail-mark, .is-passed .rail-mark { display: inline-grid; place-items: center; width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink-3); }
875
+ .rail-mark svg { width: 15px; height: 15px; }
876
+ .is-current .rail-mark::after { display: none; }
877
+ .rail-label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
878
+ .is-current .rail-button { background: rgba(255, 255, 255, 0.1); }
879
+ .is-current .rail-label, .is-current .rail-mark { color: var(--ink); }
880
+ .is-passed .rail-mark { color: var(--green); }
881
+ .is-locked .rail-button { opacity: 0.4; }
882
+ .rail-time { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: #f7d27f; transform-origin: left; animation: rail-time 1.6s ease-in-out infinite; }
883
+ @keyframes rail-time { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
884
+ .app:has(.stage.has-panel) .rail { left: calc((100% - min(560px, 46%)) / 2); }
885
+
886
+ /* The canvas fills the window under the bar. */
887
+ .app .stage { position: relative; height: calc(100vh - var(--top)); height: calc(100dvh - var(--top)); min-height: 360px; padding: 0; overflow: hidden; }
888
+ .canvas { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; padding: 48px 32px 128px; background: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.2px) 0 0 / 18px 18px, #060607; transition: right 0.45s var(--ease); }
889
+ .stage.has-panel .canvas { right: min(560px, 46%); }
890
+ .stage-alert { position: absolute; top: 14px; left: 50%; z-index: 6; transform: translateX(-50%); margin: 0; }
891
+ .app .board { width: min(1080px, 100%); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; min-height: 0; }
892
+ .app .board-col { width: min(260px, 100%); }
893
+
894
+ /* Cards: mark and name, what it is in mono, a hairline, then the state with its verdict at the edge. */
895
+ .app .node, .app .board-app { display: block; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: #111114; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.9); text-align: left; transition: border-color 0.45s var(--ease); }
896
+ .node-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
897
+ .app .node-head img, .app .node-head .node-fallback { flex: none; width: 18px; height: 18px; }
898
+ .node-head .ico { display: inline-grid; color: var(--ink); }
899
+ .app .node-name { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
900
+ .node-detail, .app .board-app-name { display: block; margin: 4px 0 0 27px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
901
+ .app .node-state { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
902
+ .node-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
903
+ .node-verdict { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
904
+ .node.is-pass .node-verdict { color: var(--green); }
905
+ .node.is-warn .node-verdict { color: var(--warn); }
906
+ .node.is-fail .node-verdict { color: var(--red); }
907
+ .app .node.is-pass .node-state, .app .node.is-warn .node-state, .app .node.is-fail .node-state { color: var(--ink-2); }
908
+ .app .board-app { padding: 14px 16px; }
909
+ .app .board-status { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
910
+ .app .board-status strong { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
911
+ .app .board-checks { margin-top: 10px; padding: 0; border-top: 0; gap: 5px; }
912
+ .app .board-checks li { font-size: 12px; color: var(--ink-2); }
913
+ .canvas-note { font-size: 12.5px; color: var(--ink-3); text-align: center; }
914
+ .stage-body.step-app { position: absolute; left: 0; right: 0; bottom: 78px; z-index: 2; max-width: none; margin: 0; pointer-events: none; }
915
+
916
+ /* Every later step: a panel over the canvas. */
917
+ .stage-body.panel { position: absolute; top: 14px; right: 14px; bottom: 14px; z-index: 5; width: calc(min(560px, 46%) - 28px); max-width: none; margin: 0; overflow: auto; padding: 20px 24px 32px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(10, 10, 12, 0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); animation: panel-in 0.45s var(--ease) both; }
918
+ @keyframes panel-in { from { transform: translateX(28px); opacity: 0; } }
919
+ .panel-close { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-bottom: 18px; padding: 0 12px; font-size: 13px; }
920
+ .panel h1 { font-size: 26px; max-width: none; letter-spacing: -0.03em; }
921
+ .panel .stage-sub { font-size: 15px; }
922
+ .panel .primary-row { margin-top: 24px; }
923
+ .panel .findings { margin-top: 22px; }
924
+ .panel .finding, .panel .finding.is-static { grid-template-columns: minmax(0, 1fr) 16px; gap: 6px 12px; padding: 13px 16px; }
925
+ .panel .finding .sev { grid-column: 1; grid-row: 1; }
926
+ .panel .finding .finding-title { grid-column: 1; grid-row: 2; white-space: normal; }
927
+ .panel .finding .where, .panel .finding .finding-tag { grid-column: 1; grid-row: 3; }
928
+ .panel .finding > .ico { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
929
+ .panel .ready-grid { grid-template-columns: minmax(0, 1fr); }
930
+ .panel .strip { margin-top: 18px; }
931
+
932
+ @media (max-width: 1100px) {
933
+ .top-tab-count { display: none; }
934
+ }
935
+ @media (max-width: 900px) {
936
+ .stage.has-panel .canvas { right: 0; }
937
+ .stage-body.panel { left: 10px; right: 10px; top: 10px; bottom: 76px; width: auto; }
938
+ .app:has(.stage.has-panel) .rail { left: 50%; }
939
+ #tab-terminal, #tab-releases { display: none; }
940
+ }
941
+ @media (max-width: 640px) {
942
+ .top { gap: 10px; padding: 0 14px; }
943
+ .top-project strong { max-width: 30vw; }
944
+ .top-tabs { gap: 14px; margin-right: 0; }
945
+ .rail { left: 10px; right: 10px; transform: none; }
946
+ .app:has(.stage.has-panel) .rail { left: 10px; }
947
+ .rail ol { justify-content: space-between; }
948
+ .rail-button { padding: 0 10px; gap: 6px; }
949
+ .rail-label { font-size: 13px; }
950
+ .canvas { place-items: start center; padding: 20px 14px 140px; }
951
+ .stage-body.step-app { bottom: 72px; }
952
+ .stage-body.panel { padding: 16px 16px 24px; }
953
+ }
954
+ @media (prefers-reduced-motion: reduce) {
955
+ .stage-body.panel, .rail-time { animation: none; }
956
+ .canvas, .rail { transition: none; }
957
+ }
958
+ .app .node.is-focus { border-color: #f5f5f7; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 16px 30px -18px rgba(0, 0, 0, 0.9); }
959
+
960
+ /* The board sizes to the canvas, not the window: with a panel open, the space left of it decides the layout. */
961
+ .canvas { container-type: inline-size; }
962
+ @container (max-width: 820px) {
963
+ .app .board { width: min(600px, 100%); }
964
+ .app .board-col { width: 100%; }
965
+ }
966
+ @container (min-width: 560px) and (max-width: 820px) {
967
+ .board.is-side { grid-template-columns: minmax(200px, 250px) minmax(200px, 250px); grid-template-areas: "app right"; column-gap: clamp(40px, 8cqi, 72px); align-items: center; }
968
+ .board.is-side .board-lines { display: block; }
969
+ .app .board.is-side { width: auto; }
970
+ }
971
+
972
+ /* A movable canvas: drag the ground to pan, drag a card to move it, zoom from the tools. */
973
+ .canvas { overflow: hidden; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
974
+ .canvas.is-dragging { cursor: grabbing; }
975
+ .app .board { transform-origin: 50% 50%; will-change: transform; }
976
+ .app .node, .app .board-app { position: relative; cursor: grab; }
977
+ .canvas.is-dragging .node, .canvas.is-dragging .board-app { cursor: grabbing; }
978
+ .app .node.is-lifted, .app .board-app.is-lifted { z-index: 3; border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 30px 50px -20px rgba(0, 0, 0, 0.95); }
979
+ .canvas.is-dragging .board-lines .pulse { animation: none; opacity: 0; }
980
+ .canvas-tools { position: absolute; left: 14px; top: 14px; z-index: 4; display: grid; gap: 2px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(17, 17, 20, 0.92); cursor: default; }
981
+ .canvas-tool { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--ink-3); transition: background 0.15s, color 0.15s; }
982
+ .canvas-tool:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
983
+ .canvas-tool.is-reset { display: none; }
984
+ .canvas.is-moved .canvas-tool.is-reset { display: grid; }
985
+ @media (max-width: 640px) {
986
+ .canvas-tools { top: 10px; left: 10px; }
987
+ }
988
+
989
+ /* Checks on every pull request: a button in the canvas corner and a card that says what it writes. */
990
+ .pr-checks { position: absolute; right: 14px; top: 14px; z-index: 4; display: grid; justify-items: end; gap: 8px; cursor: default; }
991
+ .pr-checks-button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(17, 17, 20, 0.94); font-size: 13px; font-weight: 500; color: var(--ink); transition: background 0.15s, border-color 0.15s; }
992
+ .pr-checks-button:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
993
+ .pr-checks-button[aria-expanded="true"] { background: #f5f5f7; border-color: #f5f5f7; color: #0a0a0b; }
994
+ .pr-checks-button.is-on { color: var(--ink-2); }
995
+ .pr-checks-button.is-on .ico { color: var(--green); }
996
+ .pr-card { width: min(340px, calc(100vw - 48px)); display: grid; gap: 10px; padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 14, 0.98); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); animation: settle 0.3s var(--ease) both; }
997
+ .pr-card h3 { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
998
+ .pr-card p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
999
+ .pr-card code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
1000
+ .pr-points { display: grid; gap: 6px; padding-left: 16px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
1001
+ .pr-command { margin: 0; padding: 10px 12px; border-radius: 9px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-all; }
1002
+ .pr-muted { color: var(--ink-3) !important; }
1003
+ .pr-error { color: var(--red-ink) !important; }
1004
+ .pr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
1005
+ @media (max-width: 640px) {
1006
+ .pr-checks { top: 10px; right: 10px; }
1007
+ .pr-checks-button { height: 32px; padding: 0 12px; font-size: 12.5px; }
1008
+ }
1009
+ .fc-checked { margin-top: 6px; font-size: 13px; color: var(--ink-3, var(--ink-2)); }
1010
+ #show-last-full-check { margin-top: 10px; }
1011
+
1012
+ /* ---------- simpler chrome: the site's brand, a plain close, two-line findings with one action each ---------- */
1013
+ .brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; color: #f5f5f5; font-family: Inter, var(--font); font-size: 16px; font-weight: 650; letter-spacing: -0.01em; line-height: 1; }
1014
+ .brand-mark, .brand-raven { display: block; width: 24px; height: 20px; }
1015
+ .panel-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; transition: background 0.15s, color 0.15s; }
1016
+ .panel-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1017
+ .stage-body.panel > h1 { padding-right: 44px; }
1018
+ .finding, .finding.is-static { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 18px; }
1019
+ .finding.is-static { grid-template-columns: minmax(0, 1fr); }
1020
+ .finding:hover:not(.is-static) { background: rgba(255, 255, 255, 0.035); }
1021
+ .finding-main { display: grid; gap: 6px; min-width: 0; }
1022
+ .finding-title { white-space: normal; overflow: visible; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
1023
+ .finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
1024
+ .finding-meta .where code { max-width: 26ch; }
1025
+ .finding-go { justify-self: end; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
1026
+ .finding.is-first .finding-go { border-color: transparent; background: #f5f5f5; color: #0a0a0b; }
1027
+ .agent-ok { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; }
1028
+ .agent-ok p { margin: 0; font-size: 14px; color: var(--ink-2); }
1029
+
1030
+ /* ---------- the work view: one box to ask, the real app at the centre of the board, the agent beside it,
1031
+ and a panel that shows the plan, the run's real steps and its result. Motion only follows real events:
1032
+ a step starting, a file changing on disk, a check finishing. ---------- */
1033
+ :root {
1034
+ --t-hover: 140ms;
1035
+ --t-panel: 220ms;
1036
+ --t-node: 300ms;
1037
+ --t-connect: 480ms;
1038
+ --t-settle: 380ms;
1039
+ --work: #f2c15f;
1040
+ --work-soft: rgba(242, 193, 95, 0.12);
1041
+ }
1042
+
1043
+ /* The canvas leaves room for the shelf above the dock. */
1044
+ .canvas { padding-bottom: 236px; }
1045
+
1046
+ /* The shelf: what should change, plus at most four things this project can do now. */
1047
+ .shelf { position: absolute; left: 50%; bottom: 80px; z-index: 4; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); display: grid; gap: 9px; cursor: default; }
1048
+ .shelf-box { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 7px 0 16px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(15, 15, 18, 0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: border-color var(--t-hover), box-shadow var(--t-hover); }
1049
+ .shelf-box:focus-within { border-color: rgba(242, 193, 95, 0.55); box-shadow: 0 0 0 4px rgba(242, 193, 95, 0.07), 0 24px 50px -20px rgba(0, 0, 0, 0.95); }
1050
+ .shelf.is-running .shelf-box { border-color: rgba(242, 193, 95, 0.35); }
1051
+ .shelf-spark { display: inline-grid; color: var(--work); }
1052
+ .shelf-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--ink); font: 450 15px/1 var(--font); }
1053
+ .shelf-input::placeholder { color: var(--ink-3); }
1054
+ .shelf-input:disabled { cursor: default; }
1055
+ .shelf-go { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; background: #f5f5f7; color: #0a0a0b; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background var(--t-hover), transform var(--t-hover); }
1056
+ .shelf-go:hover:not(:disabled) { background: #fff; }
1057
+ .shelf-go:active:not(:disabled) { transform: translateY(1px); }
1058
+ .shelf-go:disabled { background: var(--panel-3); color: var(--ink-3); }
1059
+ .shelf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px; }
1060
+ .shelf-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(16, 16, 19, 0.95); color: var(--ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover); }
1061
+ .shelf-chip:hover:not(:disabled) { color: var(--ink); border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); }
1062
+ .shelf-chip:disabled { opacity: 0.45; }
1063
+ .shelf-chip.is-main { color: var(--ink); border-color: rgba(242, 193, 95, 0.5); }
1064
+ .shelf-chip.is-main .ico { color: var(--work); }
1065
+ .shelf-chip.is-quiet { color: var(--ink-3); }
1066
+ .shelf-count { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
1067
+ .shelf-note { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
1068
+
1069
+ /* The app card holds the real app. */
1070
+ .app .board.has-screen { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) minmax(0, 1fr); }
1071
+ .app .board.has-screen.is-side { grid-template-columns: minmax(300px, 380px) minmax(0, 300px); }
1072
+ .app .board.has-screen.is-solo { grid-template-columns: minmax(300px, 400px); }
1073
+ .board-col[hidden], .app-files[hidden], .board-checks[hidden] { display: none; }
1074
+ .app .board-app.is-working { border-color: rgba(242, 193, 95, 0.6); animation: work-glow 2.8s ease-in-out infinite; }
1075
+ @keyframes work-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 95, 0), 0 16px 30px -18px rgba(0, 0, 0, 0.9); } 50% { box-shadow: 0 0 0 5px rgba(242, 193, 95, 0.07), 0 16px 30px -18px rgba(0, 0, 0, 0.9); } }
1076
+ .screen { margin-top: 12px; border-radius: 9px; border: 1px solid var(--line-2); background: #0b0b0d; overflow: hidden; }
1077
+ .screen-bar { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 9px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
1078
+ .screen-dots { display: inline-flex; gap: 4px; }
1079
+ .screen-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
1080
+ .screen-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1081
+ .screen-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 11px; font-weight: 500; color: var(--ink-3); }
1082
+ .screen-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
1083
+ .screen-live.is-ready { color: var(--green); }
1084
+ .screen-live.is-ready i { background: var(--green); animation: live-ring 2.4s ease-out infinite; }
1085
+ .screen-live.is-starting { color: var(--work); }
1086
+ .screen-live.is-starting i { background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1087
+ .screen-live.is-failed { color: var(--red-ink); }
1088
+ .screen-live.is-failed i { background: var(--red); }
1089
+ @keyframes live-ring { 0% { box-shadow: 0 0 0 0 rgba(111, 208, 140, 0.55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(111, 208, 140, 0); } }
1090
+ .screen-body { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
1091
+ .screen-body iframe { position: absolute; left: 0; top: 0; width: 250%; height: 250%; border: 0; background: #fff; transform: scale(0.4); transform-origin: 0 0; pointer-events: none; }
1092
+ .screen-open { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 6, 7, 0); color: transparent; cursor: pointer; transition: background var(--t-hover), color var(--t-hover); }
1093
+ .screen-open span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity var(--t-hover), transform var(--t-hover); }
1094
+ .screen-open:hover, .screen-open:focus-visible { background: rgba(6, 6, 7, 0.45); }
1095
+ .screen-open:hover span, .screen-open:focus-visible span { opacity: 1; transform: none; }
1096
+ .screen-body.is-placeholder, .screen-body.is-skeleton { display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; text-align: center; background: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px) 0 0 / 12px 12px, #0b0b0d; }
1097
+ .screen-body p { max-width: 30ch; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
1098
+ .screen-body.is-failed p { color: var(--red-ink); }
1099
+ .sk { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); }
1100
+ .sk-1 { width: 62%; } .sk-2 { width: 44%; } .sk-3 { width: 52%; }
1101
+ .screen-body.is-skeleton .sk { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
1102
+ @keyframes shimmer { to { background-position: -200% 0; } }
1103
+ .screen-cta { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; font-size: 13px; font-weight: 600; text-decoration: none; transition: background var(--t-hover); }
1104
+ .screen-cta:hover { background: #fff; }
1105
+ .screen-cta .ico { color: #0a0a0b; }
1106
+
1107
+ /* Files the run changed, appearing as they change on disk. */
1108
+ .app-files { list-style: none; display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
1109
+ .app-files li { display: flex; align-items: center; gap: 8px; font-size: 12px; animation: file-in var(--t-settle) var(--ease) both; }
1110
+ .app-files code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
1111
+ .app-files .add, .work-files .add { font-family: var(--mono); font-size: 11px; color: var(--green); }
1112
+ .app-files .del, .work-files .del { font-family: var(--mono); font-size: 11px; color: var(--red-ink); }
1113
+ .app-files li.is-added code::before, .work-files li.is-added code::before { content: "new "; color: var(--work); }
1114
+ .app-files .more { color: var(--ink-3); }
1115
+ @keyframes file-in { from { opacity: 0; transform: translateX(-6px); } }
1116
+
1117
+ /* The coding agent on the board. */
1118
+ .app .node.is-agent { border-color: rgba(255, 255, 255, 0.2); }
1119
+ .app .node.is-agent.is-work { border-color: rgba(242, 193, 95, 0.6); animation: node-in var(--t-node) var(--ease) both; }
1120
+ .node.is-agent .node-state i { background: var(--ink-3); box-shadow: none; }
1121
+ .node.is-agent.is-work .node-state i { background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1122
+ .node.is-agent.is-work .node-verdict { color: var(--work); }
1123
+ .node.is-agent.is-pass .node-state i { background: var(--green); }
1124
+ .node.is-agent.is-warn .node-state i { background: var(--warn); }
1125
+ .node.is-agent.is-fail .node-state i { background: var(--red); }
1126
+ @keyframes node-in { from { opacity: 0; transform: translateX(-10px); } }
1127
+ .board-lines .line.is-work { stroke: rgba(242, 193, 95, 0.85); stroke-width: 1.5; stroke-dasharray: 5 6; animation: line-flow 0.9s linear infinite; }
1128
+ @keyframes line-flow { to { stroke-dashoffset: -11; } }
1129
+ .board.is-working .pulse.is-work { animation: board-pulse 2.2s linear infinite; }
1130
+
1131
+ /* The panel: plan, run, result. */
1132
+ .work-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
1133
+ .work-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
1134
+ .work-eyebrow.is-plan i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
1135
+ .work-eyebrow.is-work { color: var(--work); }
1136
+ .work-eyebrow.is-work i { background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1137
+ .work-eyebrow.is-pass { color: var(--green); }
1138
+ .work-eyebrow.is-pass i { background: var(--green); }
1139
+ .work-eyebrow.is-warn { color: var(--warn-ink); }
1140
+ .work-eyebrow.is-warn i { background: var(--warn); }
1141
+ .work-eyebrow.is-fail { color: var(--red-ink); }
1142
+ .work-eyebrow.is-fail i { background: var(--red); }
1143
+ .panel h1 { overflow-wrap: anywhere; }
1144
+ .plan-list { display: grid; grid-template-columns: 104px minmax(0, 1fr); margin-top: 22px; border-top: 1px solid var(--line); }
1145
+ .plan-list dt, .plan-list dd { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
1146
+ .plan-list dt { color: var(--ink-3); }
1147
+ .plan-list dd { color: var(--ink); }
1148
+ .mode-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
1149
+ .mode-label { width: 90px; font-size: 13.5px; color: var(--ink-3); }
1150
+ .mode-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); }
1151
+ .mode-option { height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background var(--t-hover), color var(--t-hover); }
1152
+ .mode-option:hover:not(.on):not(:disabled) { color: var(--ink); }
1153
+ .mode-option.on { background: #f5f5f7; color: #0a0a0b; }
1154
+ .work-error { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: rgba(244, 113, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(244, 113, 95, 0.35); font-size: 13.5px; color: var(--red-ink); }
1155
+ .work-hint { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
1156
+ .work-live { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: var(--work-soft); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
1157
+ .work-pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1158
+ .work-elapsed { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
1159
+ .work-steps { list-style: none; display: grid; margin-top: 20px; }
1160
+ .work-step { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
1161
+ .work-step:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 24px; bottom: 2px; width: 1px; background: var(--line-2); }
1162
+ .work-step.is-done:not(:last-child)::after { background: rgba(111, 208, 140, 0.45); }
1163
+ .work-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--ink-3); transition: background var(--t-node), box-shadow var(--t-node); }
1164
+ .work-step.is-active .work-mark { box-shadow: inset 0 0 0 1.5px var(--work); }
1165
+ .work-step.is-active .work-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
1166
+ .work-step.is-done .work-mark, .work-checks .is-passed .work-mark { background: var(--green); box-shadow: none; color: #04140a; animation: settle var(--t-settle) var(--ease) both; }
1167
+ .work-step.is-failed .work-mark, .work-checks .is-failed .work-mark { background: var(--red); box-shadow: none; color: #1a0603; }
1168
+ .work-step.is-skipped .work-mark, .work-step.is-unknown .work-mark { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); }
1169
+ .work-step-copy { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
1170
+ .work-step-label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
1171
+ .work-step.is-active .work-step-label, .work-step.is-done .work-step-label, .work-step.is-failed .work-step-label { color: var(--ink); }
1172
+ .work-step-detail { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
1173
+ .work-step.is-failed .work-step-detail { color: var(--red-ink); }
1174
+ .work-files { list-style: none; display: grid; gap: 3px; margin-top: 6px; }
1175
+ .work-files li { display: flex; align-items: center; gap: 8px; animation: file-in var(--t-settle) var(--ease) both; }
1176
+ .work-files code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
1177
+ .work-checks, .work-unknowns, .work-history { margin-top: 18px; }
1178
+ .work-checks h2, .work-unknowns h2, .work-history h2 { margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
1179
+ .work-checks ul, .work-unknowns ul, .work-history ul { list-style: none; display: grid; gap: 8px; }
1180
+ .work-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
1181
+ .work-checks li > div { display: grid; gap: 2px; min-width: 0; }
1182
+ .work-checks strong { font-size: 14px; font-weight: 500; }
1183
+ .work-checks span { display: inline-flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--ink-3); }
1184
+ .work-checks .is-passed span { color: var(--green); }
1185
+ .work-checks .is-failed span { color: var(--red-ink); }
1186
+ .work-checks code { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
1187
+ .work-check-detail { font-size: 12px; color: var(--ink-3); }
1188
+ .work-detail { margin-top: 6px; max-height: 160px; overflow: auto; padding: 10px 12px; border-radius: 9px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
1189
+ .work-unknowns li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
1190
+ .work-unknowns li::before { content: "?"; position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
1191
+ .work-answer { margin-top: 18px; border-radius: 12px; border: 1px solid var(--line); }
1192
+ .work-answer summary { padding: 11px 14px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
1193
+ .work-answer[open] summary { border-bottom: 1px solid var(--line); }
1194
+ .work-answer .agent-reply-body { margin: 0; padding: 12px 14px; font-size: 13.5px; }
1195
+ .work-diff { display: grid; gap: 12px; margin-top: 18px; }
1196
+ .work-diff h3 { margin-bottom: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2); }
1197
+ .work-diff pre { max-height: 300px; padding: 12px 14px; border-radius: 10px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; }
1198
+ .work-actions { gap: 8px 4px; }
1199
+ .quiet.is-danger { color: var(--red-ink); }
1200
+ .quiet.stop { color: var(--red-ink); }
1201
+ .work-history li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
1202
+ .work-history strong { font-size: 13.5px; font-weight: 500; }
1203
+ .work-history span { font-size: 12px; color: var(--ink-3); }
1204
+
1205
+ /* The large preview: the real app, with the result panel still beside it. */
1206
+ .appwin { position: fixed; top: calc(var(--top) + 14px); left: 14px; right: 14px; bottom: 14px; z-index: 35; display: grid; grid-template-rows: 44px minmax(0, 1fr); border-radius: 16px; border: 1px solid var(--line-2); background: #0b0b0d; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95); animation: appwin-in var(--t-panel) var(--ease) both; }
1207
+ .app:has(.stage.has-panel) .appwin { right: min(560px, 46vw); }
1208
+ @keyframes appwin-in { from { opacity: 0; transform: scale(0.985); } }
1209
+ .appwin-bar { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); }
1210
+ .appwin-url { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-family: var(--mono); font-size: 12px; color: var(--ink); }
1211
+ .appwin-url i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
1212
+ .appwin-note { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1213
+ .appwin-tool { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--ink-2); transition: background var(--t-hover), color var(--t-hover); }
1214
+ .appwin-tool:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1215
+ .appwin-tool.is-close { margin-left: 4px; border: 1px solid var(--line-2); }
1216
+ .appwin-body { min-height: 0; border-radius: 0 0 15px 15px; overflow: hidden; background: #fff; }
1217
+ .appwin-body iframe { display: block; width: 100%; height: 100%; border: 0; }
1218
+
1219
+ /* All actions. */
1220
+ .catalog-intro { margin-bottom: 16px; font-size: 13.5px; color: var(--ink-3); }
1221
+ .catalog-list { list-style: none; display: grid; gap: 2px; }
1222
+ .catalog-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
1223
+ .catalog-item:last-child { border-bottom: 0; }
1224
+ .catalog-copy { display: grid; gap: 2px; min-width: 0; }
1225
+ .catalog-copy strong { font-size: 14px; font-weight: 500; }
1226
+ .catalog-copy span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
1227
+ .catalog-item.is-planned .catalog-copy strong { color: var(--ink-2); }
1228
+ .catalog-copy .catalog-reason { font-size: 12px; }
1229
+ .catalog-state { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
1230
+ .catalog-state.is-ready, .catalog-state.is-already_configured { color: var(--green); border-color: rgba(111, 208, 140, 0.4); }
1231
+ .catalog-state.is-needs_connection, .catalog-state.is-needs_information { color: var(--warn-ink); border-color: rgba(242, 193, 95, 0.4); }
1232
+ .catalog-state.is-planned { border-style: dashed; }
1233
+
1234
+ @media (max-width: 900px) {
1235
+ .app:has(.stage.has-panel) .appwin { right: 14px; }
1236
+ .shelf-note { display: none; }
1237
+ }
1238
+ @media (max-width: 640px) {
1239
+ .shelf { bottom: 74px; width: calc(100% - 20px); }
1240
+ .shelf-box { height: 50px; }
1241
+ .shelf-go { padding: 0 12px; }
1242
+ .canvas { padding-bottom: 220px; }
1243
+ .app .board.has-screen, .app .board.has-screen.is-side, .app .board.has-screen.is-solo { grid-template-columns: minmax(0, 1fr); }
1244
+ .appwin { left: 8px; right: 8px; bottom: 8px; top: calc(var(--top) + 8px); }
1245
+ .plan-list { grid-template-columns: 88px minmax(0, 1fr); }
1246
+ .catalog-item { grid-template-columns: minmax(0, 1fr) auto; }
1247
+ .catalog-item .catalog-state { grid-column: 1; justify-self: start; }
1248
+ }
1249
+ @media (prefers-reduced-motion: reduce) {
1250
+ .app .board-app.is-working, .board-lines .line.is-work, .board.is-working .pulse.is-work, .screen-live i, .node.is-agent.is-work .node-state i,
1251
+ .work-eyebrow.is-work i, .work-pulse, .work-step.is-active .work-mark::after, .screen-body.is-skeleton .sk, .app-files li, .work-files li,
1252
+ .app .node.is-agent.is-work, .appwin, .work-step.is-done .work-mark { animation: none; }
1253
+ .screen-open span { transition: none; }
1254
+ }
1255
+ @container (max-width: 820px) {
1256
+ .app .board.has-screen:not(.is-side):not(.is-solo) { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) minmax(0, 1fr); column-gap: 28px; }
1257
+ }
1258
+ /* With the app on the card, its summary lines repeat the shelf note and Findings; the screen gets the room. */
1259
+ .app .board.has-screen .board-checks { display: none; }
1260
+ .canvas { padding-bottom: 196px; }
1261
+ @container (max-width: 820px) {
1262
+ .app .board.has-screen.is-side { grid-template-columns: minmax(250px, 320px) minmax(0, 250px); column-gap: clamp(32px, 7cqi, 56px); }
1263
+ }
1264
+
1265
+ /* Layout: the scene takes the canvas, the panel narrows, the real app gets its own window. */
1266
+ .stage.is-work.has-panel .canvas { right: min(440px, 36%); }
1267
+ .stage.is-work .stage-body.panel { width: calc(min(440px, 36%) - 28px); }
1268
+ .app:has(.stage.is-work) .rail { left: calc((100% - min(440px, 36%)) / 2); }
1269
+ .app:has(.stage.is-work) .appwin { right: min(440px, 36vw); }
1270
+ .canvas.is-scene { display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1fr); align-items: stretch; place-items: stretch; gap: 16px; padding: 18px 18px 84px; cursor: default; overflow: hidden; background: radial-gradient(1200px 600px at 40% 30%, rgba(242, 193, 95, 0.035), transparent 60%), radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px) 0 0 / 22px 22px, #060607; }
1271
+
1272
+ .insp-state { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
1273
+ .insp-state.is-done { color: var(--sc-green); } .insp-state.is-active, .insp-state.is-waiting { color: var(--sc-amber); } .insp-state.is-failed { color: var(--red-ink); }
1274
+ .insp-files { list-style: none; display: grid; gap: 3px; }
1275
+ .insp-files li { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
1276
+ .insp-files code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
1277
+ .insp-files .add { font-family: var(--mono); font-size: 11px; color: var(--green); }
1278
+ .insp-files .del { font-family: var(--mono); font-size: 11px; color: var(--red-ink); }
1279
+ .insp-pre { max-height: 140px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: #060607; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
1280
+ .insp-answer { max-height: 160px; overflow: auto; font-size: 12.5px; color: var(--ink-2); }
1281
+ .insp-wait { color: var(--warn-ink) !important; }
1282
+
1283
+ /* The real app, in its own window. */
1284
+ .live-window { align-self: start; display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 15, 0.96); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); }
1285
+ .live-window header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
1286
+ .live-window header strong { font-size: 13.5px; font-weight: 600; }
1287
+ .live-window header span { font-size: 11.5px; color: var(--ink-3); }
1288
+ .live-window .screen { margin-top: 0; }
1289
+
1290
+
1291
+
1292
+
1293
+
1294
+
1295
+
1296
+
1297
+
1298
+
1299
+
1300
+
1301
+
1302
+
1303
+
1304
+
1305
+
1306
+
1307
+
1308
+
1309
+
1310
+
1311
+
1312
+
1313
+
1314
+
1315
+
1316
+ .work-wait { margin-top: 16px; display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.35); }
1317
+ .work-wait strong { font-size: 14px; font-weight: 600; color: var(--warn-ink); }
1318
+ .work-wait p { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
1319
+ .work-eyebrow.is-wait { color: var(--warn-ink); }
1320
+ .work-eyebrow.is-wait i { background: var(--sc-amber); }
1321
+ .gallery-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
1322
+
1323
+ @media (max-width: 1200px) {
1324
+ .canvas.is-scene { grid-template-columns: minmax(0, 1fr); }
1325
+ .live-window { position: absolute; right: 18px; top: 52px; width: 240px; z-index: 3; }
1326
+ }
1327
+ @media (max-width: 900px) {
1328
+ .stage.is-work.has-panel .canvas { right: 0; }
1329
+ .stage.is-work .stage-body.panel { left: 10px; right: 10px; width: auto; top: auto; max-height: 46%; }
1330
+ .live-window { width: 180px; }
1331
+ }
1332
+
1333
+ /* Scene light: brighter faces and a lit front edge, so objects read as solid against the floor. */
1334
+ .canvas.is-scene:not(:has(.live-window)) { grid-template-columns: minmax(0, 1fr); }
1335
+
1336
+
1337
+
1338
+
1339
+
1340
+
1341
+
1342
+
1343
+
1344
+
1345
+
1346
+
1347
+
1348
+
1349
+
1350
+
1351
+
1352
+
1353
+
1354
+
1355
+
1356
+
1357
+
1358
+
1359
+
1360
+
1361
+ /* ---------- the work panel: a title, a line, a few chips, big tiles. Detail waits behind "Details". ---------- */
1362
+ .panel h1.wtitle { font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; max-width: none; }
1363
+ .whead { display: flex; align-items: center; gap: 12px; }
1364
+ .whead h1.wtitle { padding-right: 40px; }
1365
+ .wbadge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #0a0a0b; animation: badge-in 0.5s var(--spring, cubic-bezier(0.34, 1.45, 0.64, 1)) both; }
1366
+ .wbadge.is-pass { background: var(--green); }
1367
+ .wbadge.is-fail { background: var(--red); }
1368
+ .wbadge.is-warn { background: var(--warn); }
1369
+ .wbadge.is-wait { background: var(--warn); }
1370
+ .wbadge.is-stop, .wbadge.is-plan { background: var(--panel-3); color: var(--ink-2); }
1371
+
1372
+ .wline { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
1373
+ .wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
1374
+ .wchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
1375
+ .wchip .ico { color: var(--ink-2); }
1376
+ .wchip img { flex: none; }
1377
+ .wchip.is-pass { border-color: rgba(111, 208, 140, 0.45); color: var(--green); } .wchip.is-pass .ico { color: var(--green); }
1378
+ .wchip.is-fail { border-color: rgba(244, 113, 95, 0.5); color: var(--red-ink); } .wchip.is-fail .ico { color: var(--red); }
1379
+ .wchip.is-wait { border-color: rgba(242, 193, 95, 0.5); color: var(--warn-ink); font-family: var(--mono); font-size: 11.5px; } .wchip.is-wait .ico { color: var(--warn); }
1380
+ .wmodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
1381
+ .wmode { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); font-size: 13px; font-weight: 500; color: var(--ink-2); transition: border-color var(--t-hover, 140ms), background var(--t-hover, 140ms), color var(--t-hover, 140ms); }
1382
+ .wmode:hover:not(.on):not(:disabled) { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
1383
+ .wmode.on { border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1384
+ .wmode-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
1385
+ .wmode.on .wmode-ico { background: #f5f5f7; color: #0a0a0b; }
1386
+ .wtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
1387
+ .wtiles.is-one { grid-template-columns: minmax(0, 1fr); }
1388
+ .wtile { display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 84px; padding: 12px 8px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: transform var(--t-hover, 140ms), background var(--t-hover, 140ms), border-color var(--t-hover, 140ms); }
1389
+ .wtile:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
1390
+ .wtile:active:not(:disabled) { transform: translateY(0); }
1391
+ .wtile:disabled { opacity: 0.5; }
1392
+ .wtile-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, 0.07); color: var(--ink); }
1393
+ .wtile-ico svg { width: 15px; height: 15px; }
1394
+ .wtile-note { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
1395
+ .wtile.is-primary { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: center; min-height: 56px; border-color: transparent; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; font-size: 15px; }
1396
+ .wtile.is-primary .wtile-ico { width: 28px; height: 28px; border-radius: 999px; background: #0a0a0b; color: #f5f5f7; }
1397
+ .wtile.is-primary:hover:not(:disabled) { background: #fff; border-color: transparent; }
1398
+ .wtile.is-danger { border-color: rgba(244, 113, 95, 0.45); color: var(--red-ink); }
1399
+ .wtile.is-danger .wtile-ico { background: rgba(244, 113, 95, 0.14); color: var(--red); }
1400
+ .wtiles.is-one .wtile.is-danger { grid-template-columns: auto auto auto; justify-content: center; min-height: 52px; border-radius: 999px; }
1401
+ .wtiles.is-one .wtile.is-danger .wtile-ico { width: 26px; height: 26px; }
1402
+ .wlink { display: block; margin: 14px auto 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--ink-3); }
1403
+ .wlink:hover { color: var(--ink); }
1404
+ .wlink.is-danger { color: var(--red-ink); }
1405
+ .wdetails { margin-top: 18px; border-top: 1px solid var(--line); }
1406
+ .wdetails > summary { padding: 12px 0 4px; font-size: 13px; color: var(--ink-3); cursor: pointer; list-style: none; }
1407
+ .wdetails > summary::before { content: "+ "; font-family: var(--mono); }
1408
+ .wdetails[open] > summary::before { content: "\2212 "; }
1409
+ .wdetails .agent-reply-body { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
1410
+ .work-steps.is-compact { margin-top: 16px; }
1411
+ .work-steps.is-compact .work-step { padding-bottom: 12px; }
1412
+ .wgallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
1413
+ .wscene { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; transition: border-color var(--t-hover, 140ms), background var(--t-hover, 140ms), color var(--t-hover, 140ms); }
1414
+ .wscene:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
1415
+ .wscene.on { border-color: rgba(245, 245, 247, 0.85); color: var(--ink); background: rgba(255, 255, 255, 0.08); }
1416
+ .wscene-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #0f0f12; border: 1px solid var(--line); }
1417
+ .wphases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
1418
+ .wphase { display: grid; justify-items: center; gap: 5px; padding: 9px 2px 8px; border-radius: 12px; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 500; color: var(--ink-3); transition: color var(--t-hover, 140ms), border-color var(--t-hover, 140ms); }
1419
+ .wphase:hover { color: var(--ink); }
1420
+ .wphase.on { color: var(--ink); border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.07); }
1421
+ .wphase.is-work .wphase-ico { color: var(--sc-amber, #f2c15f); }
1422
+ .wphase.is-wait .wphase-ico { color: var(--warn); }
1423
+ .wphase.is-fail .wphase-ico { color: var(--red); }
1424
+ .wphase.is-done .wphase-ico { color: var(--green); }
1425
+ .wphase-ico { display: grid; place-items: center; height: 16px; }
1426
+ @media (prefers-reduced-motion: reduce) { .wbadge, .wtile { animation: none; transition: none; } }
1427
+ .screen-body.is-live { background: #0b0b0d; }
1428
+ .screen-body.is-live iframe { opacity: 0; transition: opacity 0.35s var(--ease); }
1429
+ .screen-body.is-live iframe.is-loaded { opacity: 1; }
1430
+ .screen-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--ink-3); }
1431
+
1432
+ /* ---------- windows: findings, agents, releases and chat in the same calm kit as the work panel ---------- */
1433
+
1434
+ /* Drawer frame: a round close, a short line. */
1435
+ .drawer-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); transition: background 0.15s, color 0.15s; }
1436
+ .drawer-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1437
+ .drawer { width: min(920px, calc(100vw - 40px)); }
1438
+ .drawer-head h3 { font-size: 22px; }
1439
+
1440
+ /* Findings. */
1441
+ .fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
1442
+ .fchip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); }
1443
+ .fchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
1444
+ .fchip.is-critical i { background: var(--red); } .fchip.is-critical { border-color: rgba(244, 113, 95, 0.45); }
1445
+ .fchip.is-warning i { background: var(--warn); } .fchip.is-warning { border-color: rgba(242, 193, 95, 0.4); }
1446
+ .fchip.is-info i { background: rgba(255, 255, 255, 0.4); }
1447
+ .fchip.is-time { color: var(--ink-3); border-style: dashed; }
1448
+ .panel .findings { display: grid; gap: 10px; margin-top: 18px; }
1449
+ .panel .group { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); overflow: hidden; }
1450
+ .panel .group-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
1451
+ .panel .group-head h2 { flex: 1; font-size: 14px; font-weight: 600; }
1452
+ .panel .group-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
1453
+ .panel .group ul { list-style: none; }
1454
+ .panel .group li + li { border-top: 1px solid var(--line); }
1455
+ .panel .finding, .panel .finding.is-static { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 0; background: none; text-align: left; transition: background 0.15s; }
1456
+ .panel .finding:hover:not(.is-static) { background: rgba(255, 255, 255, 0.04); }
1457
+ .panel .finding .finding-main { display: grid; gap: 5px; }
1458
+ .panel .finding .finding-title { font-size: 14px; font-weight: 500; line-height: 1.35; }
1459
+ .panel .finding .finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
1460
+ .panel .finding .sev { font-size: 11.5px; font-weight: 600; }
1461
+ .panel .finding .where code { font-size: 11px; color: var(--ink-3); }
1462
+ .panel .finding-go { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink); }
1463
+ .panel .finding.is-first .finding-go { background: #f5f5f7; border-color: #f5f5f7; color: #0a0a0b; }
1464
+ .panel .finding-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 11px; color: var(--ink-2); }
1465
+ .findings-go { margin-top: 18px; }
1466
+
1467
+ /* Agents: one card each, one big next step. */
1468
+ .agent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
1469
+ .drawer .agent-card { display: grid; align-content: start; gap: 14px; padding: 18px; border-radius: 18px; background: #121216; box-shadow: inset 0 0 0 1px var(--line); }
1470
+ .drawer .agent-card.is-connected { box-shadow: inset 0 0 0 1px rgba(111, 208, 140, 0.35); }
1471
+ .drawer .agent-card.is-selected { box-shadow: inset 0 0 0 1.5px rgba(245, 245, 247, 0.7); }
1472
+ .drawer .agent-card + .agent-card { margin-top: 0; }
1473
+ .agent-card-head { display: flex; align-items: center; gap: 12px; }
1474
+ .agent-card-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #0a0a0c; box-shadow: inset 0 0 0 1px var(--line-2); }
1475
+ .agent-card-name { flex: 1; display: grid; gap: 4px; min-width: 0; }
1476
+ .agent-card-name h4 { font-size: 16px; font-weight: 600; }
1477
+ .agent-card-docs { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ink-3); }
1478
+ .agent-card-docs:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
1479
+ .agent-card-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
1480
+ .agent-card-actions { display: flex; gap: 8px; }
1481
+ .agent-cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: background 0.15s, border-color 0.15s; }
1482
+ .agent-cta:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
1483
+ .agent-cta.is-primary { background: #f5f5f7; border-color: #f5f5f7; color: #0a0a0b; }
1484
+ .agent-cta.is-primary:hover:not(:disabled) { background: #fff; }
1485
+ .agent-cta.is-on { color: var(--green); border-color: rgba(111, 208, 140, 0.45); }
1486
+ .agent-cta.is-quiet { flex: 0 0 auto; color: var(--ink-2); }
1487
+ .agent-how > summary, .agent-output > summary { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; list-style: none; }
1488
+ .agent-how > summary::before, .agent-output > summary::before { content: "+"; font-family: var(--mono); }
1489
+ .agent-how[open] > summary::before, .agent-output[open] > summary::before { content: "\2212"; }
1490
+ .agent-how .steps { margin-top: 12px; }
1491
+ .agent-how .step-body p { font-size: 12.5px; }
1492
+ .agent-output { margin-top: 16px; }
1493
+ .agent-output pre { margin-top: 10px; }
1494
+
1495
+ /* Releases. */
1496
+ .releases { display: grid; gap: 22px; }
1497
+ .rel-title { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 15px; font-weight: 600; }
1498
+ .rel-title .ico { color: var(--ink-3); }
1499
+ .rel-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
1500
+ .rel-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
1501
+ .rel-card { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: #121216; box-shadow: inset 0 0 0 1px var(--line); }
1502
+ .rel-card.is-current { box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.4); }
1503
+ .rel-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
1504
+ .rel-tag { font-family: var(--mono); font-size: 14px; font-weight: 600; }
1505
+ .rel-badge { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 500; border: 1px solid var(--line-2); color: var(--ink-2); }
1506
+ .rel-badge.is-current { color: var(--warn-ink); border-color: rgba(242, 193, 95, 0.45); }
1507
+ .rel-badge.is-prod { color: var(--green); border-color: rgba(111, 208, 140, 0.4); }
1508
+ .rel-card .rel-sum { font-size: 13px; color: var(--ink-2); }
1509
+ .rel-card .rel-meta { font-size: 11.5px; color: var(--ink-3); }
1510
+ .rel-compare { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); }
1511
+ .rel-compare:hover { background: rgba(255, 255, 255, 0.07); }
1512
+ .rel-empty { display: grid; justify-items: start; gap: 8px; padding: 16px; border-radius: 16px; border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-3); }
1513
+ .rel-empty code { padding: 4px 8px; border-radius: 7px; background: #060607; font-family: var(--mono); font-size: 12px; color: var(--ink); }
1514
+ .rel-compare-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
1515
+ .rel-field { display: grid; gap: 6px; font-size: 12px; color: var(--ink-3); }
1516
+ .rel-field .sel { width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; }
1517
+ .rel-arrow { display: grid; place-items: center; height: 42px; color: var(--ink-3); }
1518
+ .rel-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
1519
+ .rel-actions .wtile { min-height: 96px; }
1520
+ .rel-actions .wtile-note { text-align: center; }
1521
+
1522
+ /* Agent chat. */
1523
+ .side.chat { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 0; padding: 0; }
1524
+ .chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
1525
+ .chat-agents { flex: 1; display: flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); }
1526
+ .chat-agent { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background 0.15s, color 0.15s; }
1527
+ .chat-agent:hover:not(:disabled):not(.on) { color: var(--ink); }
1528
+ .chat-agent.on { background: #f5f5f7; color: #0a0a0b; }
1529
+ .chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
1530
+ .chat-dot.is-ok { background: var(--green); } .chat-dot.is-wait { background: var(--warn); }
1531
+ .chat-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
1532
+ .chat-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
1533
+ .chat-meta { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px; border-bottom: 1px solid var(--line); }
1534
+ .chat-status { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12.5px; font-weight: 500; color: var(--warn-ink); }
1535
+ .chat-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
1536
+ .chat-status.is-ok { color: var(--green); } .chat-status.is-ok i { background: var(--green); }
1537
+ .chat-model { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12.5px; color: var(--ink-3); }
1538
+ .chat-model select { flex: 1; min-width: 0; height: 28px; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 12.5px/1 var(--font); cursor: pointer; }
1539
+ .chat-model select option { background: #141418; color: var(--ink); }
1540
+ .chat-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--ink-2); }
1541
+ .chat-icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1542
+ .side.chat .thread { padding: 16px 14px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
1543
+ .chat-welcome { display: grid; justify-items: center; gap: 8px; margin: auto 0; padding: 20px 6px; text-align: center; }
1544
+ .chat-welcome-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: #121216; box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: 6px; }
1545
+ .chat-welcome h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
1546
+ .chat-welcome p { font-size: 13px; color: var(--ink-3); }
1547
+ .chat-suggest { display: grid; gap: 8px; width: 100%; margin-top: 12px; }
1548
+ .chat-suggestion { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: left; transition: background 0.15s, border-color 0.15s; }
1549
+ .chat-suggestion .ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: var(--ink-2); }
1550
+ .chat-suggestion:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); }
1551
+ .chat-suggestion:disabled { opacity: 0.45; }
1552
+ .side.chat .msg { display: grid; gap: 6px; max-width: 100%; }
1553
+ .side.chat .msg.me { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: #f5f5f7; color: #0a0a0b; }
1554
+ .side.chat .msg.me .body p { color: #0a0a0b; font-size: 13.5px; }
1555
+ .side.chat .msg.agent, .side.chat .msg.err { padding: 0; }
1556
+ .side.chat .msg .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
1557
+ .side.chat .msg .who .t { font-weight: 400; color: var(--ink-3); }
1558
+ .msg-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #121216; box-shadow: inset 0 0 0 1px var(--line-2); }
1559
+ .msg-avatar.is-err { background: rgba(244, 113, 95, 0.15); color: var(--red); font-weight: 700; font-size: 12px; }
1560
+ .side.chat .msg.agent .body, .side.chat .msg.err .body { padding: 12px 14px; border-radius: 6px 16px 16px 16px; background: #121216; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
1561
+ .side.chat .msg.err .body { box-shadow: inset 0 0 0 1px rgba(244, 113, 95, 0.35); }
1562
+ .side.chat .msg.sys { justify-self: center; text-align: center; font-size: 12.5px; color: var(--ink-3); }
1563
+ .chat-typing { display: inline-flex; gap: 3px; }
1564
+ .chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: typing 1.2s ease-in-out infinite; }
1565
+ .chat-typing i:nth-child(2) { animation-delay: 0.15s; } .chat-typing i:nth-child(3) { animation-delay: 0.3s; }
1566
+
1567
+ .chat-connect { margin: 0 14px 10px; padding: 12px 14px; border-radius: 14px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.3); }
1568
+ .chat-connect p { font-size: 12.5px; line-height: 1.45; color: var(--warn-ink); }
1569
+ .chat-connect-row { display: flex; gap: 8px; margin-top: 10px; }
1570
+ .side.chat .composer { margin: 0 12px 12px; padding: 10px 10px 8px 14px; border-radius: 18px; background: #121216; box-shadow: inset 0 0 0 1px var(--line-2); }
1571
+ .side.chat .composer:focus-within { box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.5); }
1572
+ .side.chat .composer textarea { width: 100%; min-height: 44px; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font: 400 14px/1.5 var(--font); }
1573
+ .side.chat .composer .row { display: flex; align-items: center; gap: 8px; }
1574
+ .chat-access { margin-right: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 4px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
1575
+ .chat-access select { height: 28px; border: 0; outline: none; background: transparent; color: var(--ink-2); font: 500 12.5px/1 var(--font); cursor: pointer; }
1576
+ .chat-access select option { background: #141418; color: var(--ink); }
1577
+ .side.chat .btn.send { width: 36px; height: 36px; padding: 0; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; box-shadow: none; }
1578
+ .side.chat .btn.send:disabled { background: var(--panel-3); color: var(--ink-3); }
1579
+ @media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; } }
1580
+
1581
+
1582
+
1583
+
1584
+
1585
+
1586
+
1587
+
1588
+
1589
+
1590
+
1591
+
1592
+
1593
+
1594
+
1595
+
1596
+
1597
+
1598
+
1599
+
1600
+
1601
+
1602
+
1603
+
1604
+
1605
+
1606
+
1607
+
1608
+ .wproviders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
1609
+ .wprov { display: grid; place-items: center; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); transition: border-color 0.14s, background 0.14s; }
1610
+ .wprov:hover { background: rgba(255, 255, 255, 0.07); }
1611
+ .wprov.on { border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.09); }
1612
+
1613
+
1614
+
1615
+
1616
+
1617
+
1618
+
1619
+
1620
+
1621
+
1622
+
1623
+
1624
+
1625
+ /* Review: files Undo leaves alone, and putting one back by hand. */
1626
+ .work-diff-file h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
1627
+ .work-diff-file .diff-note { font: 600 11px/1 var(--font); color: rgba(245, 245, 247, 0.6); padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
1628
+ .work-diff-file .diff-note.is-warn { color: #f2c15f; background: rgba(242, 193, 95, 0.12); }
1629
+ .work-diff-file .diff-restore { margin-left: auto; font-size: 12px; }
1630
+
1631
+ /* ---------- All actions: plain rows for what runs now, a wall of icons for what is coming ---------- */
1632
+ .act-catalog { display: grid; gap: 32px; }
1633
+ .act-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
1634
+ .act-search { position: relative; flex: 1 1 240px; max-width: 320px; }
1635
+ .act-search-ico { position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
1636
+ .act-search-ico svg { display: block; width: 100%; height: 100%; }
1637
+ .act-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 13.5px var(--font); }
1638
+ .act-search input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
1639
+ .act-chips { display: flex; flex-wrap: wrap; gap: 2px; }
1640
+ .act-chip { height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font: 500 13px var(--font); cursor: pointer; transition: background 0.15s, color 0.15s; }
1641
+ .act-chip:hover { color: var(--ink); }
1642
+ .act-chip[aria-pressed="true"] { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1643
+ .act-group[hidden], .act-empty[hidden], [data-act][hidden] { display: none !important; }
1644
+ .act-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
1645
+ .act-head h4 { font-size: 13px; font-weight: 500; color: var(--ink-2); }
1646
+ .act-head span { color: var(--ink-3); font-size: 12.5px; }
1647
+ .act-count { font-weight: inherit; }
1648
+
1649
+ /* The mark: the provider's own logo in its colours, or a plain white icon, on the same quiet plate. */
1650
+ .act-art { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #141418; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
1651
+ .act-art img { width: 50%; height: 50%; object-fit: contain; }
1652
+ .act-ico { display: block; width: 46%; height: 46%; }
1653
+ .act-ico svg { display: block; width: 100%; height: 100%; }
1654
+
1655
+ /* Ready now: one row each, the button on the right. */
1656
+ .act-rows, .act-items { list-style: none; margin: 0; padding: 0; }
1657
+ .act-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--line); transition: background 0.2s var(--ease); }
1658
+ .act-row:hover { background: rgba(255, 255, 255, 0.025); }
1659
+ .act-row h5 { font-size: 15px; font-weight: 500; color: var(--ink); }
1660
+ .act-row p { margin-top: 3px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
1661
+ .act-side { display: flex; align-items: center; gap: 14px; }
1662
+ .act-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
1663
+ .act-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
1664
+ .act-status.is-ready i, .act-status.is-done i { background: var(--green); }
1665
+ .act-go { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 500 13px var(--font); white-space: nowrap; cursor: pointer; transition: background 0.15s; }
1666
+ .act-go:hover { background: rgba(255, 255, 255, 0.08); }
1667
+ .act-go.is-primary { background: #f5f5f5; box-shadow: none; color: #0a0a0b; }
1668
+ .act-go.is-primary:hover { background: #fff; }
1669
+ .act-go .ico svg { width: 12px; height: 12px; }
1670
+
1671
+ /* Coming next: the icon is the thing. Big mark, its name under it, nothing boxed. */
1672
+ .act-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 28px 8px; padding-top: 16px; }
1673
+ .act-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
1674
+ .act-item .act-art { width: 64px; height: 64px; border-radius: 18px; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
1675
+ .act-item:hover .act-art { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px rgba(0, 0, 0, 0.45); }
1676
+ .act-item strong { max-width: 16ch; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.3; }
1677
+ .act-peek { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-top: auto; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 12px var(--font); white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
1678
+ .act-peek:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
1679
+ .act-peek .ico svg { width: 10px; height: 10px; }
1680
+ .act-soon { margin-top: auto; color: var(--ink-3); font-size: 12px; line-height: 24px; white-space: nowrap; }
1681
+ .act-empty { padding: 18px 0; color: var(--ink-3); font-size: 14px; text-align: center; }
1682
+ @media (max-width: 760px) {
1683
+ .act-items { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
1684
+ .act-search { max-width: none; }
1685
+ .act-row { grid-template-columns: auto minmax(0, 1fr); }
1686
+ .act-side { grid-column: 2; }
1687
+ }
1688
+ @media (prefers-reduced-motion: reduce) { .act-item .act-art, .act-item:hover .act-art { transition: none; transform: none; } }
1689
+
1690
+ @keyframes badge-in { from { transform: scale(0.6); opacity: 0; } }
1691
+ @keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }