nexo-brain 5.3.26 → 5.3.27

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 (211) hide show
  1. package/.claude-plugin/plugin.json +1 -1
  2. package/package.json +1 -1
  3. package/src/server.py +3 -0
  4. package/src/tools_sessions.py +6 -1
  5. package/src/dashboard/static/favicon 2.svg +0 -32
  6. package/src/dashboard/static/nexo-logo 2.png +0 -0
  7. package/src/dashboard/static/nexo-logo 2.svg +0 -40
  8. package/src/dashboard/static/style 2.css +0 -2458
  9. package/src/dashboard/templates/adaptive 2.html +0 -118
  10. package/src/dashboard/templates/artifacts 2.html +0 -133
  11. package/src/dashboard/templates/backups 2.html +0 -136
  12. package/src/dashboard/templates/base 2.html +0 -417
  13. package/src/dashboard/templates/calendar 2.html +0 -591
  14. package/src/dashboard/templates/chat 2.html +0 -356
  15. package/src/dashboard/templates/claims 2.html +0 -259
  16. package/src/dashboard/templates/cortex 2.html +0 -321
  17. package/src/dashboard/templates/credentials 2.html +0 -128
  18. package/src/dashboard/templates/crons 2.html +0 -370
  19. package/src/dashboard/templates/dashboard 2.html +0 -494
  20. package/src/dashboard/templates/dreams 2.html +0 -252
  21. package/src/dashboard/templates/email 2.html +0 -160
  22. package/src/dashboard/templates/evolution 2.html +0 -189
  23. package/src/dashboard/templates/feed 2.html +0 -249
  24. package/src/dashboard/templates/followup_health 2.html +0 -170
  25. package/src/dashboard/templates/graph 2.html +0 -201
  26. package/src/dashboard/templates/guard 2.html +0 -259
  27. package/src/dashboard/templates/inbox 2.html +0 -251
  28. package/src/dashboard/templates/memory 2.html +0 -420
  29. package/src/dashboard/templates/operations 2.html +0 -608
  30. package/src/dashboard/templates/plugins 2.html +0 -185
  31. package/src/dashboard/templates/protocol 2.html +0 -199
  32. package/src/dashboard/templates/rules 2.html +0 -246
  33. package/src/dashboard/templates/sentiment 2.html +0 -247
  34. package/src/dashboard/templates/sessions 2.html +0 -218
  35. package/src/dashboard/templates/skills 2.html +0 -329
  36. package/src/dashboard/templates/somatic 2.html +0 -73
  37. package/src/dashboard/templates/triggers 2.html +0 -133
  38. package/src/dashboard/templates/trust 2.html +0 -360
  39. package/src/db/__init__ 2.py +0 -259
  40. package/src/db/_core 2.py +0 -437
  41. package/src/db/_credentials 2.py +0 -124
  42. package/src/db/_episodic 2.py +0 -762
  43. package/src/db/_evolution 2.py +0 -54
  44. package/src/db/_fts 2.py +0 -406
  45. package/src/db/_goal_profiles 2.py +0 -376
  46. package/src/db/_hot_context 2.py +0 -660
  47. package/src/db/_outcomes 2.py +0 -800
  48. package/src/db/_personal_scripts 2.py +0 -582
  49. package/src/db/_sessions 2.py +0 -330
  50. package/src/db/_tasks 2.py +0 -91
  51. package/src/db/_watchers 2.py +0 -173
  52. package/src/doctor/formatters 2.py +0 -52
  53. package/src/doctor/models 2.py +0 -69
  54. package/src/doctor/planes 2.py +0 -87
  55. package/src/doctor/providers/__init__ 2.py +0 -1
  56. package/src/doctor/providers/deep 2.py +0 -367
  57. package/src/evolution_cycle 2.py +0 -519
  58. package/src/hooks/auto_capture 2.py +0 -208
  59. package/src/hooks/caffeinate-guard 2.sh +0 -8
  60. package/src/hooks/capture-session 2.sh +0 -21
  61. package/src/hooks/capture-tool-logs 2.sh +0 -158
  62. package/src/hooks/daily-briefing-check 2.sh +0 -33
  63. package/src/hooks/heartbeat-enforcement 2.py +0 -90
  64. package/src/hooks/heartbeat-posttool 2.sh +0 -18
  65. package/src/hooks/inbox-hook 2.sh +0 -76
  66. package/src/hooks/post-compact 2.sh +0 -152
  67. package/src/hooks/pre-compact 2.sh +0 -169
  68. package/src/hooks/protocol-guardrail 2.sh +0 -10
  69. package/src/hooks/protocol-pretool-guardrail 2.sh +0 -9
  70. package/src/hooks/session-stop 2.sh +0 -52
  71. package/src/kg_populate 2.py +0 -292
  72. package/src/maintenance 2.py +0 -53
  73. package/src/memory_backends 2.py +0 -71
  74. package/src/migrate_embeddings 2.py +0 -124
  75. package/src/nexo_sdk 2.py +0 -103
  76. package/src/observability 2.py +0 -199
  77. package/src/plugin_loader 2.py +0 -217
  78. package/src/plugins/__init__ 2.py +0 -0
  79. package/src/plugins/artifact_registry 2.py +0 -450
  80. package/src/plugins/backup 2.py +0 -127
  81. package/src/plugins/claims_tools 2.py +0 -119
  82. package/src/plugins/cognitive_memory 2.py +0 -609
  83. package/src/plugins/core_rules 2.py +0 -252
  84. package/src/plugins/cortex 2.py +0 -1155
  85. package/src/plugins/entities 2.py +0 -67
  86. package/src/plugins/episodic_memory 2.py +0 -560
  87. package/src/plugins/evolution 2.py +0 -167
  88. package/src/plugins/goal_engine 2.py +0 -142
  89. package/src/plugins/guard 2.py +0 -862
  90. package/src/plugins/impact 2.py +0 -29
  91. package/src/plugins/knowledge_graph_tools 2.py +0 -137
  92. package/src/plugins/media_memory_tools 2.py +0 -98
  93. package/src/plugins/memory_export 2.py +0 -196
  94. package/src/plugins/outcomes 2.py +0 -130
  95. package/src/plugins/personal_scripts 2.py +0 -117
  96. package/src/plugins/preferences 2.py +0 -47
  97. package/src/plugins/protocol 2.py +0 -1449
  98. package/src/plugins/simple_api 2.py +0 -106
  99. package/src/plugins/skills 2.py +0 -341
  100. package/src/plugins/state_watchers 2.py +0 -79
  101. package/src/plugins/update 2.py +0 -986
  102. package/src/plugins/user_state_tools 2.py +0 -43
  103. package/src/plugins/workflow 2.py +0 -588
  104. package/src/protocol_settings 2.py +0 -59
  105. package/src/public_contribution 2.py +0 -466
  106. package/src/public_evolution_queue 2.py +0 -241
  107. package/src/requirements 2.txt +0 -14
  108. package/src/retroactive_learnings 2.py +0 -373
  109. package/src/rules/__init__ 2.py +0 -0
  110. package/src/rules/core-rules 2.json +0 -331
  111. package/src/rules/migrate 2.py +0 -207
  112. package/src/runtime_power 2.py +0 -874
  113. package/src/script_registry 2.py +0 -1559
  114. package/src/scripts/check-context 2.py +0 -272
  115. package/src/scripts/deep-sleep/apply_findings 2.py +0 -2327
  116. package/src/scripts/deep-sleep/collect 2.py +0 -928
  117. package/src/scripts/deep-sleep/extract 2.py +0 -330
  118. package/src/scripts/deep-sleep/extract-prompt 2.md +0 -285
  119. package/src/scripts/deep-sleep/synthesize 2.py +0 -312
  120. package/src/scripts/deep-sleep/synthesize-prompt 2.md +0 -336
  121. package/src/scripts/nexo-agent-run 2.py +0 -75
  122. package/src/scripts/nexo-auto-update 2.py +0 -6
  123. package/src/scripts/nexo-backup 2.sh +0 -25
  124. package/src/scripts/nexo-brain-activation 2.sh +0 -140
  125. package/src/scripts/nexo-catchup 2.py +0 -300
  126. package/src/scripts/nexo-cognitive-decay 2.py +0 -257
  127. package/src/scripts/nexo-cortex-cycle 2.py +0 -293
  128. package/src/scripts/nexo-cron-wrapper 2.sh +0 -53
  129. package/src/scripts/nexo-daily-self-audit 2.py +0 -2161
  130. package/src/scripts/nexo-dashboard 2.sh +0 -29
  131. package/src/scripts/nexo-deep-sleep 2.sh +0 -86
  132. package/src/scripts/nexo-evolution-run 2.py +0 -1664
  133. package/src/scripts/nexo-followup-hygiene 2.py +0 -139
  134. package/src/scripts/nexo-hook-record 2.py +0 -42
  135. package/src/scripts/nexo-immune 2.py +0 -936
  136. package/src/scripts/nexo-impact-scorer 2.py +0 -117
  137. package/src/scripts/nexo-inbox-hook 2.sh +0 -74
  138. package/src/scripts/nexo-install 2.py +0 -6
  139. package/src/scripts/nexo-learning-housekeep 2.py +0 -401
  140. package/src/scripts/nexo-learning-validator 2.py +0 -266
  141. package/src/scripts/nexo-migrate 2.py +0 -260
  142. package/src/scripts/nexo-outcome-checker 2.py +0 -127
  143. package/src/scripts/nexo-postmortem-consolidator 2.py +0 -456
  144. package/src/scripts/nexo-pre-commit 2.py +0 -120
  145. package/src/scripts/nexo-prevent-sleep 2.sh +0 -35
  146. package/src/scripts/nexo-proactive-dashboard 2.py +0 -354
  147. package/src/scripts/nexo-reflection 2.py +0 -256
  148. package/src/scripts/nexo-runtime-preflight 2.py +0 -274
  149. package/src/scripts/nexo-sleep 2.py +0 -631
  150. package/src/scripts/nexo-snapshot-restore 2.sh +0 -35
  151. package/src/scripts/nexo-sync-clients 2.py +0 -16
  152. package/src/scripts/nexo-synthesis 2.py +0 -475
  153. package/src/scripts/nexo-tcc-approve 2.sh +0 -79
  154. package/src/scripts/nexo-update 2.sh +0 -306
  155. package/src/scripts/nexo-watchdog 2.sh +0 -1207
  156. package/src/scripts/nexo-watchdog-smoke 2.py +0 -119
  157. package/src/scripts/rehydrate_learnings_from_archive 2.py +0 -245
  158. package/src/server 2.py +0 -1296
  159. package/src/skills/run-nexo-audit-phase/guide 2.md +0 -43
  160. package/src/skills/run-nexo-audit-phase/skill 2.json +0 -59
  161. package/src/skills/run-nexo-core-fix-cycle/guide 2.md +0 -17
  162. package/src/skills/run-nexo-core-fix-cycle/script 2.py +0 -276
  163. package/src/skills/run-nexo-core-fix-cycle/skill 2.json +0 -58
  164. package/src/skills/run-release-final-audit/guide 2.md +0 -16
  165. package/src/skills/run-release-final-audit/script 2.py +0 -259
  166. package/src/skills/run-release-final-audit/skill 2.json +0 -77
  167. package/src/skills/run-runtime-doctor/guide 2.md +0 -12
  168. package/src/skills/run-runtime-doctor/script 2.py +0 -21
  169. package/src/skills/run-runtime-doctor/skill 2.json +0 -25
  170. package/src/skills_runtime 2.py +0 -932
  171. package/src/state_watchers_runtime 2.py +0 -475
  172. package/src/storage_router 2.py +0 -32
  173. package/src/system_catalog 2.py +0 -786
  174. package/src/tools_coordination 2.py +0 -103
  175. package/src/tools_credentials 2.py +0 -68
  176. package/src/tools_drive 2.py +0 -487
  177. package/src/tools_hot_context 2.py +0 -163
  178. package/src/tools_learnings 2.py +0 -612
  179. package/src/tools_menu 2.py +0 -229
  180. package/src/tools_reminders 2.py +0 -88
  181. package/src/tools_reminders_crud 2.py +0 -363
  182. package/src/tools_sessions 2.py +0 -1054
  183. package/src/tools_system_catalog 2.py +0 -19
  184. package/src/tools_task_history 2.py +0 -57
  185. package/src/tools_transcripts 2.py +0 -98
  186. package/src/transcript_utils 2.py +0 -412
  187. package/src/user_context 2.py +0 -46
  188. package/src/user_data_portability 2.py +0 -328
  189. package/src/user_state_model 2.py +0 -170
  190. package/templates/CLAUDE.md 2.template +0 -108
  191. package/templates/CODEX.AGENTS.md 2.template +0 -66
  192. package/templates/launchagents/README 2.md +0 -132
  193. package/templates/launchagents/com.nexo.auto-close-sessions 2.plist +0 -39
  194. package/templates/launchagents/com.nexo.catchup 2.plist +0 -39
  195. package/templates/launchagents/com.nexo.cognitive-decay 2.plist +0 -40
  196. package/templates/launchagents/com.nexo.dashboard 2.plist +0 -43
  197. package/templates/launchagents/com.nexo.deep-sleep 2.plist +0 -43
  198. package/templates/launchagents/com.nexo.evolution 2.plist +0 -44
  199. package/templates/launchagents/com.nexo.followup-hygiene 2.plist +0 -45
  200. package/templates/launchagents/com.nexo.immune 2.plist +0 -41
  201. package/templates/launchagents/com.nexo.postmortem 2.plist +0 -45
  202. package/templates/launchagents/com.nexo.self-audit 2.plist +0 -47
  203. package/templates/launchagents/com.nexo.synthesis 2.plist +0 -45
  204. package/templates/launchagents/com.nexo.watchdog 2.plist +0 -37
  205. package/templates/nexo_helper 2.py +0 -301
  206. package/templates/openclaw 2.json +0 -13
  207. package/templates/plugin-template 2.py +0 -40
  208. package/templates/script-template 2.py +0 -59
  209. package/templates/script-template 2.sh +0 -13
  210. package/templates/skill-script-template 2.py +0 -48
  211. package/templates/skill-template 2.md +0 -33
@@ -1,2458 +0,0 @@
1
- /* ============================================================
2
- NEXO Brain — Operations Center Dashboard
3
- Dark Neural Network Theme — Premium Mission Control UI
4
- ============================================================ */
5
-
6
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
7
-
8
- /* ============================================================
9
- CSS Custom Properties
10
- ============================================================ */
11
-
12
- :root {
13
- /* Backgrounds */
14
- --bg-deep: #06060B;
15
- --bg-surface: #0F0F18;
16
- --bg-elevated: #161625;
17
-
18
- /* Borders */
19
- --border: #1E1E32;
20
- --border-active: #2D2D4A;
21
-
22
- /* Brand Colors */
23
- --primary: #7C3AED;
24
- --primary-dim: #5B21B6;
25
- --secondary: #EC4899;
26
- --accent: #06B6D4;
27
- --success: #10B981;
28
- --warning: #F59E0B;
29
- --danger: #EF4444;
30
-
31
- /* Text */
32
- --text: #E2E8F0;
33
- --text-muted: #64748B;
34
- --text-dim: #475569;
35
-
36
- /* Gradients */
37
- --gradient-brand: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
38
- --gradient-surface: linear-gradient(180deg, #0F0F18 0%, #06060B 100%);
39
- --gradient-glow: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
40
-
41
- /* Shadows */
42
- --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border);
43
- --shadow-hover: 0 4px 24px rgba(124, 58, 237, 0.18), 0 0 0 1px var(--border-active);
44
- --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--border-active);
45
- --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.35);
46
-
47
- /* Layout */
48
- --sidebar-width: 240px;
49
- --sidebar-collapsed-width: 60px;
50
- --topbar-height: 56px;
51
- --content-max-width: 1400px;
52
-
53
- /* Radii */
54
- --radius-sm: 6px;
55
- --radius-md: 10px;
56
- --radius-lg: 14px;
57
- --radius-xl: 20px;
58
- --radius-full: 9999px;
59
-
60
- /* Transitions */
61
- --transition-fast: 0.15s ease;
62
- --transition-normal: 0.2s ease;
63
- --transition-slow: 0.35s ease;
64
-
65
- /* Typography */
66
- --font-sans: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif;
67
- --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
68
- }
69
-
70
- /* ============================================================
71
- Reset & Base
72
- ============================================================ */
73
-
74
- *, *::before, *::after {
75
- box-sizing: border-box;
76
- margin: 0;
77
- padding: 0;
78
- }
79
-
80
- html {
81
- font-size: 14px;
82
- -webkit-font-smoothing: antialiased;
83
- -moz-osx-font-smoothing: grayscale;
84
- text-rendering: optimizeLegibility;
85
- }
86
-
87
- body {
88
- font-family: var(--font-sans);
89
- background-color: var(--bg-deep);
90
- color: var(--text);
91
- line-height: 1.5;
92
- min-height: 100vh;
93
- overflow-x: hidden;
94
- }
95
-
96
- a {
97
- color: var(--primary);
98
- text-decoration: none;
99
- transition: color var(--transition-fast);
100
- }
101
-
102
- a:hover {
103
- color: var(--secondary);
104
- }
105
-
106
- img, svg {
107
- display: block;
108
- max-width: 100%;
109
- }
110
-
111
- ul, ol {
112
- list-style: none;
113
- }
114
-
115
- button {
116
- cursor: pointer;
117
- font-family: var(--font-sans);
118
- }
119
-
120
- input, select, textarea {
121
- font-family: var(--font-sans);
122
- }
123
-
124
- /* ============================================================
125
- Custom Scrollbar
126
- ============================================================ */
127
-
128
- ::-webkit-scrollbar {
129
- width: 6px;
130
- height: 6px;
131
- }
132
-
133
- ::-webkit-scrollbar-track {
134
- background: var(--bg-deep);
135
- }
136
-
137
- ::-webkit-scrollbar-thumb {
138
- background: var(--border-active);
139
- border-radius: var(--radius-full);
140
- }
141
-
142
- ::-webkit-scrollbar-thumb:hover {
143
- background: var(--primary-dim);
144
- }
145
-
146
- * {
147
- scrollbar-width: thin;
148
- scrollbar-color: var(--border-active) var(--bg-deep);
149
- }
150
-
151
- /* ============================================================
152
- Layout — Sidebar + Main
153
- ============================================================ */
154
-
155
- .layout {
156
- display: flex;
157
- min-height: 100vh;
158
- }
159
-
160
- /* ── Sidebar ── */
161
-
162
- .sidebar {
163
- position: fixed;
164
- top: 0;
165
- left: 0;
166
- width: var(--sidebar-width);
167
- height: 100vh;
168
- background: var(--bg-surface);
169
- border-right: 1px solid var(--border);
170
- display: flex;
171
- flex-direction: column;
172
- z-index: 100;
173
- transition: width var(--transition-slow);
174
- overflow: hidden;
175
- }
176
-
177
- .sidebar__header {
178
- display: flex;
179
- align-items: center;
180
- gap: 0.75rem;
181
- padding: 1.25rem 1rem;
182
- border-bottom: 1px solid var(--border);
183
- min-height: var(--topbar-height);
184
- flex-shrink: 0;
185
- }
186
-
187
- .sidebar__logo {
188
- width: 32px;
189
- height: 32px;
190
- border-radius: var(--radius-md);
191
- background: var(--gradient-brand);
192
- display: flex;
193
- align-items: center;
194
- justify-content: center;
195
- font-size: 1rem;
196
- font-weight: 800;
197
- color: #fff;
198
- letter-spacing: -0.5px;
199
- flex-shrink: 0;
200
- box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
201
- }
202
-
203
- .sidebar__brand {
204
- display: flex;
205
- flex-direction: column;
206
- overflow: hidden;
207
- }
208
-
209
- .sidebar__brand-name {
210
- font-size: 0.9375rem;
211
- font-weight: 700;
212
- color: var(--text);
213
- white-space: nowrap;
214
- letter-spacing: -0.3px;
215
- }
216
-
217
- .sidebar__brand-tagline {
218
- font-size: 0.6875rem;
219
- color: var(--text-muted);
220
- white-space: nowrap;
221
- text-transform: uppercase;
222
- letter-spacing: 0.05em;
223
- }
224
-
225
- .sidebar__nav {
226
- flex: 1;
227
- overflow-y: auto;
228
- padding: 0.75rem 0;
229
- }
230
-
231
- .sidebar__section {
232
- margin-bottom: 0.25rem;
233
- }
234
-
235
- .sidebar__section-title {
236
- font-size: 0.6875rem;
237
- font-weight: 600;
238
- color: var(--text-dim);
239
- text-transform: uppercase;
240
- letter-spacing: 0.08em;
241
- padding: 0.5rem 1.25rem 0.25rem;
242
- }
243
-
244
- .sidebar__link {
245
- display: flex;
246
- align-items: center;
247
- gap: 0.75rem;
248
- padding: 0.5625rem 1rem;
249
- margin: 0.125rem 0.5rem;
250
- border-radius: var(--radius-md);
251
- color: var(--text-muted);
252
- font-size: 0.875rem;
253
- font-weight: 500;
254
- transition: background var(--transition-fast), color var(--transition-fast);
255
- position: relative;
256
- white-space: nowrap;
257
- border: 1px solid transparent;
258
- }
259
-
260
- .sidebar__link:hover {
261
- background: var(--bg-elevated);
262
- color: var(--text);
263
- border-color: var(--border);
264
- }
265
-
266
- .sidebar__link.active {
267
- background: rgba(124, 58, 237, 0.12);
268
- color: var(--text);
269
- border-color: rgba(124, 58, 237, 0.25);
270
- }
271
-
272
- .sidebar__link.active::before {
273
- content: '';
274
- position: absolute;
275
- left: -0.5rem;
276
- top: 50%;
277
- transform: translateY(-50%);
278
- width: 3px;
279
- height: 60%;
280
- background: var(--gradient-brand);
281
- border-radius: var(--radius-full);
282
- }
283
-
284
- .sidebar__link-icon {
285
- font-size: 1rem;
286
- width: 20px;
287
- text-align: center;
288
- flex-shrink: 0;
289
- }
290
-
291
- .sidebar__link-label {
292
- flex: 1;
293
- overflow: hidden;
294
- text-overflow: ellipsis;
295
- }
296
-
297
- .sidebar__footer {
298
- border-top: 1px solid var(--border);
299
- padding: 0.75rem;
300
- }
301
-
302
- .sidebar__status-dot {
303
- width: 8px;
304
- height: 8px;
305
- border-radius: var(--radius-full);
306
- background: var(--success);
307
- flex-shrink: 0;
308
- animation: pulse-dot 2s infinite;
309
- }
310
-
311
- /* ── Main Content ── */
312
-
313
- .main {
314
- margin-left: var(--sidebar-width);
315
- flex: 1;
316
- display: flex;
317
- flex-direction: column;
318
- min-height: 100vh;
319
- transition: margin-left var(--transition-slow);
320
- }
321
-
322
- /* ── Top Bar ── */
323
-
324
- .topbar {
325
- position: sticky;
326
- top: 0;
327
- height: var(--topbar-height);
328
- background: rgba(6, 6, 11, 0.85);
329
- backdrop-filter: blur(12px);
330
- -webkit-backdrop-filter: blur(12px);
331
- border-bottom: 1px solid var(--border);
332
- display: flex;
333
- align-items: center;
334
- justify-content: space-between;
335
- padding: 0 2rem;
336
- z-index: 90;
337
- gap: 1rem;
338
- }
339
-
340
- .topbar__left {
341
- display: flex;
342
- align-items: center;
343
- gap: 0.75rem;
344
- min-width: 0;
345
- }
346
-
347
- .topbar__title {
348
- font-size: 1rem;
349
- font-weight: 600;
350
- color: var(--text);
351
- white-space: nowrap;
352
- overflow: hidden;
353
- text-overflow: ellipsis;
354
- }
355
-
356
- .topbar__breadcrumb {
357
- display: flex;
358
- align-items: center;
359
- gap: 0.5rem;
360
- font-size: 0.8125rem;
361
- color: var(--text-muted);
362
- }
363
-
364
- .topbar__breadcrumb-sep {
365
- opacity: 0.4;
366
- }
367
-
368
- .topbar__center {
369
- display: flex;
370
- align-items: center;
371
- gap: 0.5rem;
372
- flex: 1;
373
- justify-content: center;
374
- }
375
-
376
- .topbar__right {
377
- display: flex;
378
- align-items: center;
379
- gap: 0.75rem;
380
- flex-shrink: 0;
381
- }
382
-
383
- .topbar__trust {
384
- display: flex;
385
- align-items: center;
386
- gap: 0.5rem;
387
- background: var(--bg-elevated);
388
- border: 1px solid var(--border);
389
- border-radius: var(--radius-full);
390
- padding: 0.25rem 0.75rem;
391
- font-size: 0.8125rem;
392
- }
393
-
394
- .topbar__trust-label {
395
- color: var(--text-muted);
396
- font-size: 0.75rem;
397
- }
398
-
399
- .topbar__trust-value {
400
- font-weight: 700;
401
- font-family: var(--font-mono);
402
- background: var(--gradient-brand);
403
- -webkit-background-clip: text;
404
- -webkit-text-fill-color: transparent;
405
- background-clip: text;
406
- }
407
-
408
- .topbar__time {
409
- font-family: var(--font-mono);
410
- font-size: 0.8125rem;
411
- color: var(--text-muted);
412
- }
413
-
414
- /* ── Content Area ── */
415
-
416
- .content {
417
- flex: 1;
418
- padding: 2rem;
419
- overflow-y: auto;
420
- }
421
-
422
- .content__inner {
423
- max-width: var(--content-max-width);
424
- margin: 0 auto;
425
- }
426
-
427
- /* ============================================================
428
- Grid System
429
- ============================================================ */
430
-
431
- .grid {
432
- display: grid;
433
- gap: 1.25rem;
434
- }
435
-
436
- .grid--auto-sm {
437
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
438
- }
439
-
440
- .grid--auto-md {
441
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
442
- }
443
-
444
- .grid--auto-lg {
445
- grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
446
- }
447
-
448
- .grid--2 {
449
- grid-template-columns: repeat(2, 1fr);
450
- }
451
-
452
- .grid--3 {
453
- grid-template-columns: repeat(3, 1fr);
454
- }
455
-
456
- .grid--4 {
457
- grid-template-columns: repeat(4, 1fr);
458
- }
459
-
460
- .grid--sidebar-main {
461
- grid-template-columns: 320px 1fr;
462
- }
463
-
464
- /* ============================================================
465
- Cards
466
- ============================================================ */
467
-
468
- .card {
469
- background: var(--bg-surface);
470
- border: 1px solid var(--border);
471
- border-radius: var(--radius-lg);
472
- padding: 1.5rem;
473
- transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
474
- animation: fadeInUp 0.3s ease both;
475
- }
476
-
477
- .card:hover {
478
- border-color: var(--border-active);
479
- box-shadow: var(--shadow-hover);
480
- }
481
-
482
- .card--compact {
483
- padding: 1rem;
484
- }
485
-
486
- .card--flush {
487
- padding: 0;
488
- overflow: hidden;
489
- }
490
-
491
- .card__header {
492
- display: flex;
493
- align-items: center;
494
- justify-content: space-between;
495
- margin-bottom: 1.25rem;
496
- gap: 1rem;
497
- }
498
-
499
- .card__title {
500
- font-size: 0.9375rem;
501
- font-weight: 600;
502
- color: var(--text);
503
- display: flex;
504
- align-items: center;
505
- gap: 0.5rem;
506
- }
507
-
508
- .card__subtitle {
509
- font-size: 0.8125rem;
510
- color: var(--text-muted);
511
- margin-top: 0.25rem;
512
- }
513
-
514
- .card__actions {
515
- display: flex;
516
- align-items: center;
517
- gap: 0.5rem;
518
- }
519
-
520
- /* ── Stat Cards ── */
521
-
522
- .stat-card {
523
- background: var(--bg-surface);
524
- border: 1px solid var(--border);
525
- border-radius: var(--radius-lg);
526
- padding: 1.5rem;
527
- transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
528
- animation: fadeInUp 0.3s ease both;
529
- display: flex;
530
- flex-direction: column;
531
- gap: 0.5rem;
532
- }
533
-
534
- .stat-card:hover {
535
- border-color: var(--border-active);
536
- box-shadow: var(--shadow-hover);
537
- }
538
-
539
- .stat-card__label {
540
- font-size: 0.75rem;
541
- font-weight: 600;
542
- color: var(--text-muted);
543
- text-transform: uppercase;
544
- letter-spacing: 0.06em;
545
- }
546
-
547
- .stat-card__value {
548
- font-size: 2rem;
549
- font-weight: 800;
550
- color: var(--text);
551
- line-height: 1;
552
- font-family: var(--font-mono);
553
- letter-spacing: -1px;
554
- }
555
-
556
- .stat-card__value--gradient {
557
- background: var(--gradient-brand);
558
- -webkit-background-clip: text;
559
- -webkit-text-fill-color: transparent;
560
- background-clip: text;
561
- }
562
-
563
- .stat-card__meta {
564
- font-size: 0.8125rem;
565
- color: var(--text-muted);
566
- display: flex;
567
- align-items: center;
568
- gap: 0.375rem;
569
- }
570
-
571
- .stat-card__delta {
572
- font-size: 0.75rem;
573
- font-weight: 600;
574
- padding: 0.125rem 0.375rem;
575
- border-radius: var(--radius-sm);
576
- }
577
-
578
- .stat-card__delta--up {
579
- color: var(--success);
580
- background: rgba(16, 185, 129, 0.1);
581
- }
582
-
583
- .stat-card__delta--down {
584
- color: var(--danger);
585
- background: rgba(239, 68, 68, 0.1);
586
- }
587
-
588
- .stat-card__sparkline {
589
- height: 40px;
590
- margin-top: 0.25rem;
591
- opacity: 0.6;
592
- }
593
-
594
- /* ── Item Cards (Operations Board) ── */
595
-
596
- .item-card {
597
- background: var(--bg-surface);
598
- border: 1px solid var(--border);
599
- border-radius: var(--radius-lg);
600
- padding: 1rem 1.25rem;
601
- display: flex;
602
- flex-direction: column;
603
- gap: 0.625rem;
604
- transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
605
- animation: fadeInUp 0.3s ease both;
606
- }
607
-
608
- .item-card:hover {
609
- border-color: var(--border-active);
610
- box-shadow: var(--shadow-hover);
611
- }
612
-
613
- .item-card__top {
614
- display: flex;
615
- align-items: flex-start;
616
- gap: 0.75rem;
617
- }
618
-
619
- .item-card__status-dot {
620
- width: 8px;
621
- height: 8px;
622
- border-radius: var(--radius-full);
623
- flex-shrink: 0;
624
- margin-top: 0.375rem;
625
- }
626
-
627
- .item-card__status-dot--active { background: var(--success); }
628
- .item-card__status-dot--pending { background: var(--warning); }
629
- .item-card__status-dot--paused { background: var(--text-dim); }
630
- .item-card__status-dot--error { background: var(--danger); animation: pulse-dot 1.5s infinite; }
631
-
632
- .item-card__description {
633
- flex: 1;
634
- font-size: 0.875rem;
635
- color: var(--text);
636
- line-height: 1.45;
637
- }
638
-
639
- .item-card__meta {
640
- display: flex;
641
- align-items: center;
642
- gap: 0.75rem;
643
- flex-wrap: wrap;
644
- }
645
-
646
- .item-card__date {
647
- font-size: 0.75rem;
648
- color: var(--text-dim);
649
- font-family: var(--font-mono);
650
- }
651
-
652
- .item-card__actions {
653
- display: flex;
654
- align-items: center;
655
- gap: 0.375rem;
656
- margin-top: 0.25rem;
657
- flex-wrap: wrap;
658
- }
659
-
660
- /* ── Session Cards (Timeline) ── */
661
-
662
- .session-card {
663
- background: var(--bg-surface);
664
- border: 1px solid var(--border);
665
- border-radius: var(--radius-lg);
666
- overflow: hidden;
667
- transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
668
- animation: fadeInUp 0.3s ease both;
669
- }
670
-
671
- .session-card:hover {
672
- border-color: var(--border-active);
673
- box-shadow: var(--shadow-hover);
674
- }
675
-
676
- .session-card__header {
677
- padding: 1rem 1.25rem;
678
- border-bottom: 1px solid var(--border);
679
- display: flex;
680
- align-items: center;
681
- justify-content: space-between;
682
- gap: 1rem;
683
- }
684
-
685
- .session-card__time {
686
- font-family: var(--font-mono);
687
- font-size: 0.8125rem;
688
- color: var(--text-muted);
689
- }
690
-
691
- .session-card__body {
692
- padding: 1rem 1.25rem;
693
- display: flex;
694
- flex-direction: column;
695
- gap: 0.75rem;
696
- }
697
-
698
- .session-card__mental-state {
699
- background: rgba(124, 58, 237, 0.08);
700
- border-left: 3px solid var(--primary);
701
- border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
702
- padding: 0.75rem 1rem;
703
- font-size: 0.875rem;
704
- color: var(--text);
705
- font-style: italic;
706
- line-height: 1.55;
707
- }
708
-
709
- .session-card__summary {
710
- font-size: 0.875rem;
711
- color: var(--text-muted);
712
- line-height: 1.55;
713
- }
714
-
715
- /* ============================================================
716
- Buttons
717
- ============================================================ */
718
-
719
- .btn {
720
- display: inline-flex;
721
- align-items: center;
722
- justify-content: center;
723
- gap: 0.375rem;
724
- padding: 0.5rem 1rem;
725
- border-radius: var(--radius-md);
726
- font-size: 0.875rem;
727
- font-weight: 600;
728
- line-height: 1;
729
- transition: all var(--transition-fast);
730
- border: 1px solid transparent;
731
- white-space: nowrap;
732
- user-select: none;
733
- }
734
-
735
- .btn:disabled {
736
- opacity: 0.45;
737
- cursor: not-allowed;
738
- pointer-events: none;
739
- }
740
-
741
- /* Primary */
742
- .btn--primary {
743
- background: var(--gradient-brand);
744
- color: #fff;
745
- box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
746
- }
747
-
748
- .btn--primary:hover {
749
- box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45);
750
- transform: translateY(-1px);
751
- }
752
-
753
- .btn--primary:active {
754
- transform: translateY(0);
755
- box-shadow: 0 1px 4px rgba(124, 58, 237, 0.3);
756
- }
757
-
758
- /* Secondary */
759
- .btn--secondary {
760
- background: var(--bg-elevated);
761
- color: var(--text);
762
- border-color: var(--border);
763
- }
764
-
765
- .btn--secondary:hover {
766
- background: var(--bg-surface);
767
- border-color: var(--border-active);
768
- color: var(--text);
769
- }
770
-
771
- /* Danger */
772
- .btn--danger {
773
- background: rgba(239, 68, 68, 0.12);
774
- color: var(--danger);
775
- border-color: rgba(239, 68, 68, 0.25);
776
- }
777
-
778
- .btn--danger:hover {
779
- background: rgba(239, 68, 68, 0.2);
780
- border-color: var(--danger);
781
- }
782
-
783
- /* Ghost */
784
- .btn--ghost {
785
- background: transparent;
786
- color: var(--text-muted);
787
- border-color: transparent;
788
- }
789
-
790
- .btn--ghost:hover {
791
- background: var(--bg-elevated);
792
- color: var(--text);
793
- border-color: var(--border);
794
- }
795
-
796
- /* Success */
797
- .btn--success {
798
- background: rgba(16, 185, 129, 0.12);
799
- color: var(--success);
800
- border-color: rgba(16, 185, 129, 0.25);
801
- }
802
-
803
- .btn--success:hover {
804
- background: rgba(16, 185, 129, 0.2);
805
- border-color: var(--success);
806
- }
807
-
808
- /* Sizes */
809
- .btn--xs {
810
- padding: 0.25rem 0.5rem;
811
- font-size: 0.75rem;
812
- border-radius: var(--radius-sm);
813
- }
814
-
815
- .btn--sm {
816
- padding: 0.375rem 0.75rem;
817
- font-size: 0.8125rem;
818
- }
819
-
820
- .btn--lg {
821
- padding: 0.75rem 1.5rem;
822
- font-size: 1rem;
823
- border-radius: var(--radius-lg);
824
- }
825
-
826
- .btn--icon {
827
- padding: 0.5rem;
828
- width: 36px;
829
- height: 36px;
830
- }
831
-
832
- .btn--icon-sm {
833
- padding: 0.3125rem;
834
- width: 28px;
835
- height: 28px;
836
- }
837
-
838
- /* ============================================================
839
- Inputs & Forms
840
- ============================================================ */
841
-
842
- .form-group {
843
- display: flex;
844
- flex-direction: column;
845
- gap: 0.375rem;
846
- }
847
-
848
- .form-label {
849
- font-size: 0.8125rem;
850
- font-weight: 600;
851
- color: var(--text-muted);
852
- }
853
-
854
- .form-label--required::after {
855
- content: ' *';
856
- color: var(--danger);
857
- }
858
-
859
- .form-hint {
860
- font-size: 0.75rem;
861
- color: var(--text-dim);
862
- }
863
-
864
- .form-error {
865
- font-size: 0.75rem;
866
- color: var(--danger);
867
- }
868
-
869
- .input,
870
- .select,
871
- .textarea {
872
- background: var(--bg-elevated);
873
- border: 1px solid var(--border);
874
- border-radius: var(--radius-md);
875
- color: var(--text);
876
- font-size: 0.875rem;
877
- padding: 0.5625rem 0.75rem;
878
- transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
879
- width: 100%;
880
- outline: none;
881
- appearance: none;
882
- }
883
-
884
- .input::placeholder,
885
- .textarea::placeholder {
886
- color: var(--text-dim);
887
- }
888
-
889
- .input:focus,
890
- .select:focus,
891
- .textarea:focus {
892
- border-color: var(--primary);
893
- box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
894
- }
895
-
896
- .input:disabled,
897
- .select:disabled,
898
- .textarea:disabled {
899
- opacity: 0.5;
900
- cursor: not-allowed;
901
- }
902
-
903
- .select {
904
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
905
- background-repeat: no-repeat;
906
- background-position: right 0.75rem center;
907
- padding-right: 2.25rem;
908
- }
909
-
910
- .textarea {
911
- resize: vertical;
912
- min-height: 100px;
913
- line-height: 1.55;
914
- }
915
-
916
- .input-group {
917
- position: relative;
918
- display: flex;
919
- align-items: center;
920
- }
921
-
922
- .input-group .input {
923
- padding-left: 2.5rem;
924
- }
925
-
926
- .input-group__icon {
927
- position: absolute;
928
- left: 0.75rem;
929
- color: var(--text-dim);
930
- pointer-events: none;
931
- font-size: 1rem;
932
- }
933
-
934
- /* ── Search Bar ── */
935
-
936
- .search-bar {
937
- position: relative;
938
- display: flex;
939
- align-items: center;
940
- width: 100%;
941
- }
942
-
943
- .search-bar__icon {
944
- position: absolute;
945
- left: 1rem;
946
- color: var(--text-dim);
947
- font-size: 1rem;
948
- pointer-events: none;
949
- }
950
-
951
- .search-bar__input {
952
- background: var(--bg-elevated);
953
- border: 1px solid var(--border);
954
- border-radius: var(--radius-full);
955
- color: var(--text);
956
- font-size: 0.875rem;
957
- padding: 0.625rem 1rem 0.625rem 2.75rem;
958
- transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
959
- width: 100%;
960
- outline: none;
961
- }
962
-
963
- .search-bar__input::placeholder {
964
- color: var(--text-dim);
965
- }
966
-
967
- .search-bar__input:focus {
968
- border-color: var(--primary);
969
- box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
970
- }
971
-
972
- /* ── Checkbox & Radio ── */
973
-
974
- .checkbox-group {
975
- display: flex;
976
- align-items: center;
977
- gap: 0.5rem;
978
- cursor: pointer;
979
- }
980
-
981
- .checkbox-group input[type="checkbox"],
982
- .checkbox-group input[type="radio"] {
983
- accent-color: var(--primary);
984
- width: 15px;
985
- height: 15px;
986
- cursor: pointer;
987
- }
988
-
989
- .checkbox-group__label {
990
- font-size: 0.875rem;
991
- color: var(--text);
992
- cursor: pointer;
993
- }
994
-
995
- /* ============================================================
996
- Badges
997
- ============================================================ */
998
-
999
- .badge {
1000
- display: inline-flex;
1001
- align-items: center;
1002
- gap: 0.25rem;
1003
- padding: 0.1875rem 0.5rem;
1004
- border-radius: var(--radius-full);
1005
- font-size: 0.6875rem;
1006
- font-weight: 600;
1007
- line-height: 1.4;
1008
- letter-spacing: 0.02em;
1009
- text-transform: uppercase;
1010
- white-space: nowrap;
1011
- border: 1px solid transparent;
1012
- }
1013
-
1014
- .badge--primary {
1015
- background: rgba(124, 58, 237, 0.15);
1016
- color: #A78BFA;
1017
- border-color: rgba(124, 58, 237, 0.3);
1018
- }
1019
-
1020
- .badge--secondary {
1021
- background: rgba(236, 72, 153, 0.15);
1022
- color: #F9A8D4;
1023
- border-color: rgba(236, 72, 153, 0.3);
1024
- }
1025
-
1026
- .badge--accent {
1027
- background: rgba(6, 182, 212, 0.15);
1028
- color: #67E8F9;
1029
- border-color: rgba(6, 182, 212, 0.3);
1030
- }
1031
-
1032
- .badge--success {
1033
- background: rgba(16, 185, 129, 0.15);
1034
- color: #6EE7B7;
1035
- border-color: rgba(16, 185, 129, 0.3);
1036
- }
1037
-
1038
- .badge--warning {
1039
- background: rgba(245, 158, 11, 0.15);
1040
- color: #FCD34D;
1041
- border-color: rgba(245, 158, 11, 0.3);
1042
- }
1043
-
1044
- .badge--danger {
1045
- background: rgba(239, 68, 68, 0.15);
1046
- color: #FCA5A5;
1047
- border-color: rgba(239, 68, 68, 0.3);
1048
- }
1049
-
1050
- .badge--muted {
1051
- background: rgba(71, 85, 105, 0.2);
1052
- color: var(--text-muted);
1053
- border-color: var(--border);
1054
- }
1055
-
1056
- .badge--dot {
1057
- padding-left: 0.4375rem;
1058
- }
1059
-
1060
- .badge--dot::before {
1061
- content: '';
1062
- width: 6px;
1063
- height: 6px;
1064
- border-radius: var(--radius-full);
1065
- background: currentColor;
1066
- flex-shrink: 0;
1067
- }
1068
-
1069
- /* ── Notification Badge ── */
1070
-
1071
- .notif-badge {
1072
- position: absolute;
1073
- top: 4px;
1074
- right: 4px;
1075
- min-width: 16px;
1076
- height: 16px;
1077
- background: var(--danger);
1078
- color: #fff;
1079
- border-radius: var(--radius-full);
1080
- font-size: 0.625rem;
1081
- font-weight: 700;
1082
- display: flex;
1083
- align-items: center;
1084
- justify-content: center;
1085
- padding: 0 0.25rem;
1086
- line-height: 1;
1087
- border: 1.5px solid var(--bg-surface);
1088
- animation: pulse-dot 2s infinite;
1089
- }
1090
-
1091
- .sidebar__link {
1092
- position: relative;
1093
- }
1094
-
1095
- /* ============================================================
1096
- Modal
1097
- ============================================================ */
1098
-
1099
- .modal-overlay {
1100
- position: fixed;
1101
- inset: 0;
1102
- background: rgba(6, 6, 11, 0.85);
1103
- backdrop-filter: blur(6px);
1104
- -webkit-backdrop-filter: blur(6px);
1105
- display: flex;
1106
- align-items: center;
1107
- justify-content: center;
1108
- z-index: 1000;
1109
- padding: 1.5rem;
1110
- animation: fadeIn 0.15s ease;
1111
- }
1112
-
1113
- .modal {
1114
- background: var(--bg-surface);
1115
- border: 1px solid var(--border-active);
1116
- border-radius: var(--radius-xl);
1117
- box-shadow: var(--shadow-modal);
1118
- width: 100%;
1119
- max-width: 560px;
1120
- max-height: 85vh;
1121
- overflow: hidden;
1122
- display: flex;
1123
- flex-direction: column;
1124
- animation: slideUp 0.2s ease;
1125
- }
1126
-
1127
- .modal--sm {
1128
- max-width: 400px;
1129
- }
1130
-
1131
- .modal--lg {
1132
- max-width: 800px;
1133
- }
1134
-
1135
- .modal--xl {
1136
- max-width: 1100px;
1137
- }
1138
-
1139
- .modal__header {
1140
- display: flex;
1141
- align-items: center;
1142
- justify-content: space-between;
1143
- padding: 1.25rem 1.5rem;
1144
- border-bottom: 1px solid var(--border);
1145
- flex-shrink: 0;
1146
- }
1147
-
1148
- .modal__title {
1149
- font-size: 1rem;
1150
- font-weight: 700;
1151
- color: var(--text);
1152
- }
1153
-
1154
- .modal__close {
1155
- background: none;
1156
- border: none;
1157
- color: var(--text-muted);
1158
- font-size: 1.25rem;
1159
- line-height: 1;
1160
- padding: 0.25rem;
1161
- border-radius: var(--radius-sm);
1162
- transition: color var(--transition-fast), background var(--transition-fast);
1163
- display: flex;
1164
- align-items: center;
1165
- justify-content: center;
1166
- width: 32px;
1167
- height: 32px;
1168
- }
1169
-
1170
- .modal__close:hover {
1171
- color: var(--text);
1172
- background: var(--bg-elevated);
1173
- }
1174
-
1175
- .modal__body {
1176
- padding: 1.5rem;
1177
- overflow-y: auto;
1178
- flex: 1;
1179
- display: flex;
1180
- flex-direction: column;
1181
- gap: 1.25rem;
1182
- }
1183
-
1184
- .modal__footer {
1185
- padding: 1rem 1.5rem;
1186
- border-top: 1px solid var(--border);
1187
- display: flex;
1188
- align-items: center;
1189
- justify-content: flex-end;
1190
- gap: 0.75rem;
1191
- flex-shrink: 0;
1192
- }
1193
-
1194
- /* ============================================================
1195
- Tables
1196
- ============================================================ */
1197
-
1198
- .table-wrapper {
1199
- overflow-x: auto;
1200
- border-radius: var(--radius-lg);
1201
- border: 1px solid var(--border);
1202
- }
1203
-
1204
- .table {
1205
- width: 100%;
1206
- border-collapse: collapse;
1207
- font-size: 0.875rem;
1208
- }
1209
-
1210
- .table th {
1211
- background: var(--bg-elevated);
1212
- color: var(--text-muted);
1213
- font-size: 0.75rem;
1214
- font-weight: 600;
1215
- text-transform: uppercase;
1216
- letter-spacing: 0.05em;
1217
- padding: 0.75rem 1rem;
1218
- text-align: left;
1219
- white-space: nowrap;
1220
- border-bottom: 1px solid var(--border);
1221
- position: sticky;
1222
- top: 0;
1223
- z-index: 1;
1224
- }
1225
-
1226
- .table td {
1227
- padding: 0.75rem 1rem;
1228
- color: var(--text);
1229
- border-bottom: 1px solid var(--border);
1230
- vertical-align: middle;
1231
- }
1232
-
1233
- .table tbody tr:last-child td {
1234
- border-bottom: none;
1235
- }
1236
-
1237
- .table tbody tr {
1238
- transition: background var(--transition-fast);
1239
- }
1240
-
1241
- .table tbody tr:nth-child(even) {
1242
- background: rgba(255, 255, 255, 0.015);
1243
- }
1244
-
1245
- .table tbody tr:hover {
1246
- background: rgba(124, 58, 237, 0.06);
1247
- }
1248
-
1249
- .table td.mono {
1250
- font-family: var(--font-mono);
1251
- font-size: 0.8125rem;
1252
- }
1253
-
1254
- .table__empty {
1255
- text-align: center;
1256
- padding: 3rem 1rem;
1257
- color: var(--text-dim);
1258
- }
1259
-
1260
- /* ============================================================
1261
- Tabs
1262
- ============================================================ */
1263
-
1264
- .tabs {
1265
- display: flex;
1266
- align-items: center;
1267
- gap: 0;
1268
- border-bottom: 1px solid var(--border);
1269
- margin-bottom: 1.5rem;
1270
- }
1271
-
1272
- .tabs__tab {
1273
- padding: 0.625rem 1.125rem;
1274
- font-size: 0.875rem;
1275
- font-weight: 500;
1276
- color: var(--text-muted);
1277
- background: none;
1278
- border: none;
1279
- border-bottom: 2px solid transparent;
1280
- margin-bottom: -1px;
1281
- cursor: pointer;
1282
- transition: color var(--transition-fast), border-color var(--transition-fast);
1283
- white-space: nowrap;
1284
- display: flex;
1285
- align-items: center;
1286
- gap: 0.5rem;
1287
- }
1288
-
1289
- .tabs__tab:hover {
1290
- color: var(--text);
1291
- }
1292
-
1293
- .tabs__tab.active {
1294
- color: var(--primary);
1295
- border-bottom-color: var(--primary);
1296
- }
1297
-
1298
- .tabs__tab-count {
1299
- background: var(--bg-elevated);
1300
- color: var(--text-dim);
1301
- border-radius: var(--radius-full);
1302
- font-size: 0.6875rem;
1303
- font-weight: 700;
1304
- padding: 0.0625rem 0.375rem;
1305
- min-width: 18px;
1306
- text-align: center;
1307
- }
1308
-
1309
- .tabs__tab.active .tabs__tab-count {
1310
- background: rgba(124, 58, 237, 0.2);
1311
- color: #A78BFA;
1312
- }
1313
-
1314
- /* ── Tab Panels ── */
1315
-
1316
- .tab-panel {
1317
- display: none;
1318
- }
1319
-
1320
- .tab-panel.active {
1321
- display: block;
1322
- animation: fadeIn 0.2s ease;
1323
- }
1324
-
1325
- /* ============================================================
1326
- Chat Bubbles (Inbox)
1327
- ============================================================ */
1328
-
1329
- .chat {
1330
- display: flex;
1331
- flex-direction: column;
1332
- gap: 1rem;
1333
- padding: 0.5rem 0;
1334
- }
1335
-
1336
- .chat__bubble {
1337
- display: flex;
1338
- flex-direction: column;
1339
- max-width: 78%;
1340
- }
1341
-
1342
- .chat__bubble--outbound {
1343
- align-self: flex-end;
1344
- align-items: flex-end;
1345
- }
1346
-
1347
- .chat__bubble--inbound {
1348
- align-self: flex-start;
1349
- align-items: flex-start;
1350
- }
1351
-
1352
- .chat__bubble-content {
1353
- padding: 0.75rem 1rem;
1354
- border-radius: var(--radius-lg);
1355
- font-size: 0.875rem;
1356
- line-height: 1.55;
1357
- }
1358
-
1359
- .chat__bubble--outbound .chat__bubble-content {
1360
- background: rgba(124, 58, 237, 0.2);
1361
- border: 1px solid rgba(124, 58, 237, 0.3);
1362
- border-bottom-right-radius: 4px;
1363
- color: var(--text);
1364
- }
1365
-
1366
- .chat__bubble--inbound .chat__bubble-content {
1367
- background: rgba(236, 72, 153, 0.1);
1368
- border: 1px solid rgba(236, 72, 153, 0.2);
1369
- border-bottom-left-radius: 4px;
1370
- color: var(--text);
1371
- }
1372
-
1373
- .chat__bubble-meta {
1374
- font-size: 0.6875rem;
1375
- color: var(--text-dim);
1376
- margin-top: 0.25rem;
1377
- padding: 0 0.25rem;
1378
- display: flex;
1379
- align-items: center;
1380
- gap: 0.375rem;
1381
- }
1382
-
1383
- .chat__sender {
1384
- font-weight: 600;
1385
- color: var(--text-muted);
1386
- }
1387
-
1388
- /* ============================================================
1389
- Calendar Grid
1390
- ============================================================ */
1391
-
1392
- .calendar {
1393
- background: var(--bg-surface);
1394
- border: 1px solid var(--border);
1395
- border-radius: var(--radius-lg);
1396
- overflow: hidden;
1397
- }
1398
-
1399
- .calendar__header {
1400
- display: flex;
1401
- align-items: center;
1402
- justify-content: space-between;
1403
- padding: 1rem 1.25rem;
1404
- border-bottom: 1px solid var(--border);
1405
- }
1406
-
1407
- .calendar__title {
1408
- font-size: 0.9375rem;
1409
- font-weight: 600;
1410
- color: var(--text);
1411
- }
1412
-
1413
- .calendar__weekdays {
1414
- display: grid;
1415
- grid-template-columns: repeat(7, 1fr);
1416
- border-bottom: 1px solid var(--border);
1417
- }
1418
-
1419
- .calendar__weekday {
1420
- padding: 0.625rem 0;
1421
- text-align: center;
1422
- font-size: 0.6875rem;
1423
- font-weight: 700;
1424
- text-transform: uppercase;
1425
- letter-spacing: 0.06em;
1426
- color: var(--text-dim);
1427
- }
1428
-
1429
- .calendar__grid {
1430
- display: grid;
1431
- grid-template-columns: repeat(7, 1fr);
1432
- }
1433
-
1434
- .calendar__day {
1435
- padding: 0.5rem;
1436
- min-height: 72px;
1437
- border-right: 1px solid var(--border);
1438
- border-bottom: 1px solid var(--border);
1439
- display: flex;
1440
- flex-direction: column;
1441
- gap: 0.25rem;
1442
- cursor: pointer;
1443
- transition: background var(--transition-fast);
1444
- }
1445
-
1446
- .calendar__day:nth-child(7n) {
1447
- border-right: none;
1448
- }
1449
-
1450
- .calendar__day:hover {
1451
- background: var(--bg-elevated);
1452
- }
1453
-
1454
- .calendar__day--today {
1455
- background: rgba(124, 58, 237, 0.06);
1456
- }
1457
-
1458
- .calendar__day--today .calendar__day-num {
1459
- background: var(--gradient-brand);
1460
- color: #fff;
1461
- box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
1462
- }
1463
-
1464
- .calendar__day--outside {
1465
- opacity: 0.3;
1466
- }
1467
-
1468
- .calendar__day-num {
1469
- font-size: 0.8125rem;
1470
- font-weight: 600;
1471
- color: var(--text-muted);
1472
- width: 24px;
1473
- height: 24px;
1474
- display: flex;
1475
- align-items: center;
1476
- justify-content: center;
1477
- border-radius: var(--radius-full);
1478
- flex-shrink: 0;
1479
- }
1480
-
1481
- .calendar__day-events {
1482
- display: flex;
1483
- flex-wrap: wrap;
1484
- gap: 0.125rem;
1485
- }
1486
-
1487
- .calendar__event-dot {
1488
- width: 6px;
1489
- height: 6px;
1490
- border-radius: var(--radius-full);
1491
- }
1492
-
1493
- .calendar__event-dot--primary { background: var(--primary); }
1494
- .calendar__event-dot--success { background: var(--success); }
1495
- .calendar__event-dot--warning { background: var(--warning); }
1496
- .calendar__event-dot--danger { background: var(--danger); }
1497
-
1498
- /* ============================================================
1499
- Risk Bars (Somatic Markers)
1500
- ============================================================ */
1501
-
1502
- .risk-bar {
1503
- display: flex;
1504
- flex-direction: column;
1505
- gap: 0.375rem;
1506
- }
1507
-
1508
- .risk-bar__header {
1509
- display: flex;
1510
- align-items: center;
1511
- justify-content: space-between;
1512
- }
1513
-
1514
- .risk-bar__label {
1515
- font-size: 0.8125rem;
1516
- color: var(--text-muted);
1517
- font-weight: 500;
1518
- }
1519
-
1520
- .risk-bar__value {
1521
- font-family: var(--font-mono);
1522
- font-size: 0.8125rem;
1523
- color: var(--text);
1524
- font-weight: 600;
1525
- }
1526
-
1527
- .risk-bar__track {
1528
- height: 6px;
1529
- background: var(--bg-elevated);
1530
- border-radius: var(--radius-full);
1531
- overflow: hidden;
1532
- }
1533
-
1534
- .risk-bar__fill {
1535
- height: 100%;
1536
- border-radius: var(--radius-full);
1537
- transition: width 0.6s ease;
1538
- }
1539
-
1540
- .risk-bar__fill--low {
1541
- background: var(--success);
1542
- }
1543
-
1544
- .risk-bar__fill--medium {
1545
- background: linear-gradient(90deg, var(--success), var(--warning));
1546
- }
1547
-
1548
- .risk-bar__fill--high {
1549
- background: linear-gradient(90deg, var(--warning), var(--danger));
1550
- }
1551
-
1552
- .risk-bar__fill--critical {
1553
- background: var(--danger);
1554
- animation: pulse-glow-danger 1.5s infinite;
1555
- }
1556
-
1557
- /* ── Weight Bars (Adaptive Personality) ── */
1558
-
1559
- .weight-bar {
1560
- display: flex;
1561
- flex-direction: column;
1562
- gap: 0.375rem;
1563
- }
1564
-
1565
- .weight-bar__header {
1566
- display: flex;
1567
- align-items: center;
1568
- justify-content: space-between;
1569
- }
1570
-
1571
- .weight-bar__label {
1572
- font-size: 0.8125rem;
1573
- color: var(--text-muted);
1574
- font-weight: 500;
1575
- }
1576
-
1577
- .weight-bar__value {
1578
- font-family: var(--font-mono);
1579
- font-size: 0.8125rem;
1580
- color: var(--text);
1581
- font-weight: 600;
1582
- }
1583
-
1584
- .weight-bar__track {
1585
- height: 8px;
1586
- background: var(--bg-elevated);
1587
- border-radius: var(--radius-full);
1588
- overflow: hidden;
1589
- position: relative;
1590
- }
1591
-
1592
- .weight-bar__fill {
1593
- height: 100%;
1594
- border-radius: var(--radius-full);
1595
- background: var(--gradient-brand);
1596
- transition: width 0.6s ease;
1597
- }
1598
-
1599
- /* ============================================================
1600
- Toast / Notification
1601
- ============================================================ */
1602
-
1603
- .toast-container {
1604
- position: fixed;
1605
- bottom: 1.5rem;
1606
- right: 1.5rem;
1607
- z-index: 2000;
1608
- display: flex;
1609
- flex-direction: column;
1610
- gap: 0.625rem;
1611
- pointer-events: none;
1612
- }
1613
-
1614
- .toast {
1615
- background: var(--bg-elevated);
1616
- border: 1px solid var(--border-active);
1617
- border-radius: var(--radius-lg);
1618
- padding: 0.875rem 1.125rem;
1619
- display: flex;
1620
- align-items: flex-start;
1621
- gap: 0.75rem;
1622
- max-width: 360px;
1623
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
1624
- pointer-events: all;
1625
- animation: slideInRight 0.25s ease;
1626
- }
1627
-
1628
- .toast--success { border-left: 3px solid var(--success); }
1629
- .toast--error { border-left: 3px solid var(--danger); }
1630
- .toast--warning { border-left: 3px solid var(--warning); }
1631
- .toast--info { border-left: 3px solid var(--accent); }
1632
-
1633
- .toast__icon {
1634
- font-size: 1.125rem;
1635
- flex-shrink: 0;
1636
- margin-top: 0.0625rem;
1637
- }
1638
-
1639
- .toast--success .toast__icon { color: var(--success); }
1640
- .toast--error .toast__icon { color: var(--danger); }
1641
- .toast--warning .toast__icon { color: var(--warning); }
1642
- .toast--info .toast__icon { color: var(--accent); }
1643
-
1644
- .toast__body {
1645
- flex: 1;
1646
- min-width: 0;
1647
- }
1648
-
1649
- .toast__title {
1650
- font-size: 0.875rem;
1651
- font-weight: 600;
1652
- color: var(--text);
1653
- margin-bottom: 0.1875rem;
1654
- }
1655
-
1656
- .toast__message {
1657
- font-size: 0.8125rem;
1658
- color: var(--text-muted);
1659
- line-height: 1.45;
1660
- }
1661
-
1662
- .toast__close {
1663
- background: none;
1664
- border: none;
1665
- color: var(--text-dim);
1666
- font-size: 1rem;
1667
- line-height: 1;
1668
- padding: 0.125rem;
1669
- cursor: pointer;
1670
- flex-shrink: 0;
1671
- transition: color var(--transition-fast);
1672
- }
1673
-
1674
- .toast__close:hover {
1675
- color: var(--text);
1676
- }
1677
-
1678
- .toast--out {
1679
- animation: slideOutRight 0.2s ease forwards;
1680
- }
1681
-
1682
- /* ============================================================
1683
- Empty State
1684
- ============================================================ */
1685
-
1686
- .empty-state {
1687
- display: flex;
1688
- flex-direction: column;
1689
- align-items: center;
1690
- justify-content: center;
1691
- padding: 4rem 2rem;
1692
- text-align: center;
1693
- gap: 1rem;
1694
- }
1695
-
1696
- .empty-state__icon {
1697
- font-size: 3rem;
1698
- opacity: 0.4;
1699
- }
1700
-
1701
- .empty-state__title {
1702
- font-size: 1rem;
1703
- font-weight: 600;
1704
- color: var(--text-muted);
1705
- }
1706
-
1707
- .empty-state__description {
1708
- font-size: 0.875rem;
1709
- color: var(--text-dim);
1710
- max-width: 360px;
1711
- line-height: 1.55;
1712
- }
1713
-
1714
- /* ============================================================
1715
- Loading Spinner
1716
- ============================================================ */
1717
-
1718
- .spinner {
1719
- display: inline-block;
1720
- width: 24px;
1721
- height: 24px;
1722
- border-radius: var(--radius-full);
1723
- border: 2px solid var(--border);
1724
- border-top-color: var(--primary);
1725
- animation: spin 0.7s linear infinite;
1726
- }
1727
-
1728
- .spinner--sm {
1729
- width: 16px;
1730
- height: 16px;
1731
- border-width: 2px;
1732
- }
1733
-
1734
- .spinner--lg {
1735
- width: 40px;
1736
- height: 40px;
1737
- border-width: 3px;
1738
- }
1739
-
1740
- .loading-overlay {
1741
- position: absolute;
1742
- inset: 0;
1743
- background: rgba(6, 6, 11, 0.7);
1744
- backdrop-filter: blur(4px);
1745
- display: flex;
1746
- align-items: center;
1747
- justify-content: center;
1748
- border-radius: inherit;
1749
- z-index: 10;
1750
- }
1751
-
1752
- /* ── Skeleton Loader ── */
1753
-
1754
- .skeleton {
1755
- background: linear-gradient(90deg,
1756
- var(--bg-elevated) 25%,
1757
- var(--border) 50%,
1758
- var(--bg-elevated) 75%
1759
- );
1760
- background-size: 200% 100%;
1761
- animation: shimmer 1.5s infinite;
1762
- border-radius: var(--radius-sm);
1763
- }
1764
-
1765
- .skeleton--text {
1766
- height: 14px;
1767
- width: 100%;
1768
- }
1769
-
1770
- .skeleton--title {
1771
- height: 20px;
1772
- width: 60%;
1773
- }
1774
-
1775
- .skeleton--circle {
1776
- border-radius: var(--radius-full);
1777
- width: 40px;
1778
- height: 40px;
1779
- }
1780
-
1781
- /* ============================================================
1782
- Specific Page Components
1783
- ============================================================ */
1784
-
1785
- /* ── Live Indicator ── */
1786
-
1787
- .live-dot {
1788
- display: inline-flex;
1789
- align-items: center;
1790
- gap: 0.375rem;
1791
- font-size: 0.75rem;
1792
- font-weight: 600;
1793
- color: var(--success);
1794
- text-transform: uppercase;
1795
- letter-spacing: 0.05em;
1796
- }
1797
-
1798
- .live-dot::before {
1799
- content: '';
1800
- width: 7px;
1801
- height: 7px;
1802
- border-radius: var(--radius-full);
1803
- background: var(--success);
1804
- animation: pulse-dot 1.5s infinite;
1805
- }
1806
-
1807
- /* ── Section Header ── */
1808
-
1809
- .section-header {
1810
- display: flex;
1811
- align-items: center;
1812
- justify-content: space-between;
1813
- margin-bottom: 1.25rem;
1814
- gap: 1rem;
1815
- }
1816
-
1817
- .section-title {
1818
- font-size: 1.0625rem;
1819
- font-weight: 700;
1820
- color: var(--text);
1821
- display: flex;
1822
- align-items: center;
1823
- gap: 0.5rem;
1824
- }
1825
-
1826
- .section-title::before {
1827
- content: '';
1828
- display: inline-block;
1829
- width: 3px;
1830
- height: 1.2em;
1831
- background: var(--gradient-brand);
1832
- border-radius: var(--radius-full);
1833
- vertical-align: middle;
1834
- }
1835
-
1836
- /* ── Divider ── */
1837
-
1838
- .divider {
1839
- height: 1px;
1840
- background: var(--border);
1841
- margin: 1.5rem 0;
1842
- }
1843
-
1844
- .divider--subtle {
1845
- background: var(--bg-elevated);
1846
- }
1847
-
1848
- /* ── Code Block ── */
1849
-
1850
- .code-block {
1851
- background: var(--bg-elevated);
1852
- border: 1px solid var(--border);
1853
- border-radius: var(--radius-md);
1854
- padding: 1rem;
1855
- font-family: var(--font-mono);
1856
- font-size: 0.8125rem;
1857
- color: var(--text);
1858
- overflow-x: auto;
1859
- line-height: 1.6;
1860
- white-space: pre;
1861
- }
1862
-
1863
- .code-inline {
1864
- background: var(--bg-elevated);
1865
- border: 1px solid var(--border);
1866
- border-radius: var(--radius-sm);
1867
- padding: 0.125rem 0.375rem;
1868
- font-family: var(--font-mono);
1869
- font-size: 0.8125rem;
1870
- color: #A78BFA;
1871
- }
1872
-
1873
- /* ── Alert / Banner ── */
1874
-
1875
- .alert {
1876
- border-radius: var(--radius-lg);
1877
- padding: 1rem 1.125rem;
1878
- display: flex;
1879
- align-items: flex-start;
1880
- gap: 0.75rem;
1881
- font-size: 0.875rem;
1882
- border: 1px solid transparent;
1883
- }
1884
-
1885
- .alert--success {
1886
- background: rgba(16, 185, 129, 0.08);
1887
- border-color: rgba(16, 185, 129, 0.2);
1888
- color: #6EE7B7;
1889
- }
1890
-
1891
- .alert--warning {
1892
- background: rgba(245, 158, 11, 0.08);
1893
- border-color: rgba(245, 158, 11, 0.2);
1894
- color: #FCD34D;
1895
- }
1896
-
1897
- .alert--danger {
1898
- background: rgba(239, 68, 68, 0.08);
1899
- border-color: rgba(239, 68, 68, 0.2);
1900
- color: #FCA5A5;
1901
- }
1902
-
1903
- .alert--info {
1904
- background: rgba(6, 182, 212, 0.08);
1905
- border-color: rgba(6, 182, 212, 0.2);
1906
- color: #67E8F9;
1907
- }
1908
-
1909
- .alert__icon {
1910
- font-size: 1.125rem;
1911
- flex-shrink: 0;
1912
- margin-top: 0.0625rem;
1913
- }
1914
-
1915
- /* ── Dropdown ── */
1916
-
1917
- .dropdown {
1918
- position: relative;
1919
- display: inline-block;
1920
- }
1921
-
1922
- .dropdown__menu {
1923
- position: absolute;
1924
- top: calc(100% + 6px);
1925
- right: 0;
1926
- background: var(--bg-surface);
1927
- border: 1px solid var(--border-active);
1928
- border-radius: var(--radius-lg);
1929
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
1930
- min-width: 180px;
1931
- z-index: 200;
1932
- overflow: hidden;
1933
- animation: fadeInDown 0.15s ease;
1934
- }
1935
-
1936
- .dropdown__item {
1937
- display: flex;
1938
- align-items: center;
1939
- gap: 0.625rem;
1940
- padding: 0.6875rem 1rem;
1941
- font-size: 0.875rem;
1942
- color: var(--text-muted);
1943
- cursor: pointer;
1944
- transition: background var(--transition-fast), color var(--transition-fast);
1945
- border: none;
1946
- background: none;
1947
- width: 100%;
1948
- text-align: left;
1949
- }
1950
-
1951
- .dropdown__item:hover {
1952
- background: var(--bg-elevated);
1953
- color: var(--text);
1954
- }
1955
-
1956
- .dropdown__item--danger {
1957
- color: var(--danger);
1958
- }
1959
-
1960
- .dropdown__item--danger:hover {
1961
- background: rgba(239, 68, 68, 0.08);
1962
- }
1963
-
1964
- .dropdown__divider {
1965
- height: 1px;
1966
- background: var(--border);
1967
- margin: 0.25rem 0;
1968
- }
1969
-
1970
- /* ── Tooltip ── */
1971
-
1972
- .tooltip {
1973
- position: relative;
1974
- }
1975
-
1976
- .tooltip::after {
1977
- content: attr(data-tip);
1978
- position: absolute;
1979
- bottom: calc(100% + 8px);
1980
- left: 50%;
1981
- transform: translateX(-50%);
1982
- background: var(--bg-elevated);
1983
- border: 1px solid var(--border-active);
1984
- border-radius: var(--radius-md);
1985
- padding: 0.375rem 0.625rem;
1986
- font-size: 0.75rem;
1987
- color: var(--text);
1988
- white-space: nowrap;
1989
- pointer-events: none;
1990
- opacity: 0;
1991
- transition: opacity var(--transition-fast);
1992
- z-index: 100;
1993
- }
1994
-
1995
- .tooltip:hover::after {
1996
- opacity: 1;
1997
- }
1998
-
1999
- /* ── Progress ── */
2000
-
2001
- .progress {
2002
- height: 4px;
2003
- background: var(--bg-elevated);
2004
- border-radius: var(--radius-full);
2005
- overflow: hidden;
2006
- }
2007
-
2008
- .progress__fill {
2009
- height: 100%;
2010
- border-radius: var(--radius-full);
2011
- background: var(--gradient-brand);
2012
- transition: width 0.6s ease;
2013
- }
2014
-
2015
- /* ── Tag List ── */
2016
-
2017
- .tag-list {
2018
- display: flex;
2019
- flex-wrap: wrap;
2020
- gap: 0.375rem;
2021
- }
2022
-
2023
- /* ── Kv Row ── */
2024
-
2025
- .kv-row {
2026
- display: flex;
2027
- align-items: flex-start;
2028
- gap: 1rem;
2029
- padding: 0.625rem 0;
2030
- border-bottom: 1px solid var(--border);
2031
- font-size: 0.875rem;
2032
- }
2033
-
2034
- .kv-row:last-child {
2035
- border-bottom: none;
2036
- }
2037
-
2038
- .kv-row__key {
2039
- color: var(--text-muted);
2040
- font-weight: 500;
2041
- min-width: 140px;
2042
- flex-shrink: 0;
2043
- }
2044
-
2045
- .kv-row__value {
2046
- color: var(--text);
2047
- word-break: break-all;
2048
- }
2049
-
2050
- /* ── Trust Score Display ── */
2051
-
2052
- .trust-display {
2053
- display: flex;
2054
- flex-direction: column;
2055
- align-items: center;
2056
- gap: 0.5rem;
2057
- padding: 1.5rem;
2058
- }
2059
-
2060
- .trust-display__ring {
2061
- position: relative;
2062
- width: 100px;
2063
- height: 100px;
2064
- }
2065
-
2066
- .trust-display__ring svg {
2067
- transform: rotate(-90deg);
2068
- }
2069
-
2070
- .trust-display__value {
2071
- position: absolute;
2072
- inset: 0;
2073
- display: flex;
2074
- align-items: center;
2075
- justify-content: center;
2076
- font-size: 1.5rem;
2077
- font-weight: 800;
2078
- font-family: var(--font-mono);
2079
- background: var(--gradient-brand);
2080
- -webkit-background-clip: text;
2081
- -webkit-text-fill-color: transparent;
2082
- background-clip: text;
2083
- }
2084
-
2085
- .trust-display__label {
2086
- font-size: 0.75rem;
2087
- font-weight: 600;
2088
- color: var(--text-dim);
2089
- text-transform: uppercase;
2090
- letter-spacing: 0.08em;
2091
- }
2092
-
2093
- /* ── Memory Card ── */
2094
-
2095
- .memory-card {
2096
- background: var(--bg-surface);
2097
- border: 1px solid var(--border);
2098
- border-radius: var(--radius-lg);
2099
- padding: 1rem;
2100
- display: flex;
2101
- flex-direction: column;
2102
- gap: 0.5rem;
2103
- transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
2104
- cursor: pointer;
2105
- }
2106
-
2107
- .memory-card:hover {
2108
- border-color: var(--border-active);
2109
- box-shadow: var(--shadow-hover);
2110
- }
2111
-
2112
- .memory-card__text {
2113
- font-size: 0.875rem;
2114
- color: var(--text);
2115
- line-height: 1.55;
2116
- }
2117
-
2118
- .memory-card__meta {
2119
- display: flex;
2120
- align-items: center;
2121
- gap: 0.75rem;
2122
- flex-wrap: wrap;
2123
- }
2124
-
2125
- .memory-card__score {
2126
- font-family: var(--font-mono);
2127
- font-size: 0.75rem;
2128
- font-weight: 600;
2129
- }
2130
-
2131
- /* ── Node Graph Placeholder ── */
2132
-
2133
- .graph-container {
2134
- background: var(--bg-surface);
2135
- border: 1px solid var(--border);
2136
- border-radius: var(--radius-lg);
2137
- overflow: hidden;
2138
- position: relative;
2139
- }
2140
-
2141
- .graph-container__canvas {
2142
- width: 100%;
2143
- display: block;
2144
- }
2145
-
2146
- .graph-container__legend {
2147
- position: absolute;
2148
- top: 1rem;
2149
- right: 1rem;
2150
- background: rgba(6, 6, 11, 0.8);
2151
- border: 1px solid var(--border);
2152
- border-radius: var(--radius-md);
2153
- padding: 0.75rem;
2154
- display: flex;
2155
- flex-direction: column;
2156
- gap: 0.375rem;
2157
- }
2158
-
2159
- .graph-legend-item {
2160
- display: flex;
2161
- align-items: center;
2162
- gap: 0.5rem;
2163
- font-size: 0.75rem;
2164
- color: var(--text-muted);
2165
- }
2166
-
2167
- .graph-legend-dot {
2168
- width: 10px;
2169
- height: 10px;
2170
- border-radius: var(--radius-full);
2171
- }
2172
-
2173
- /* ============================================================
2174
- Utility Classes
2175
- ============================================================ */
2176
-
2177
- /* Flex */
2178
- .flex { display: flex; }
2179
- .flex-col { display: flex; flex-direction: column; }
2180
- .items-center { align-items: center; }
2181
- .justify-between { justify-content: space-between; }
2182
- .justify-center { justify-content: center; }
2183
- .gap-1 { gap: 0.25rem; }
2184
- .gap-2 { gap: 0.5rem; }
2185
- .gap-3 { gap: 0.75rem; }
2186
- .gap-4 { gap: 1rem; }
2187
- .gap-6 { gap: 1.5rem; }
2188
- .flex-1 { flex: 1; }
2189
- .flex-shrink-0 { flex-shrink: 0; }
2190
- .flex-wrap { flex-wrap: wrap; }
2191
-
2192
- /* Spacing */
2193
- .mt-1 { margin-top: 0.25rem; }
2194
- .mt-2 { margin-top: 0.5rem; }
2195
- .mt-3 { margin-top: 0.75rem; }
2196
- .mt-4 { margin-top: 1rem; }
2197
- .mt-6 { margin-top: 1.5rem; }
2198
- .mt-8 { margin-top: 2rem; }
2199
- .mb-1 { margin-bottom: 0.25rem; }
2200
- .mb-2 { margin-bottom: 0.5rem; }
2201
- .mb-4 { margin-bottom: 1rem; }
2202
- .mb-6 { margin-bottom: 1.5rem; }
2203
-
2204
- /* Text */
2205
- .text-xs { font-size: 0.75rem; }
2206
- .text-sm { font-size: 0.875rem; }
2207
- .text-base { font-size: 1rem; }
2208
- .text-lg { font-size: 1.125rem; }
2209
- .text-xl { font-size: 1.25rem; }
2210
- .text-2xl { font-size: 1.5rem; }
2211
- .text-muted { color: var(--text-muted); }
2212
- .text-dim { color: var(--text-dim); }
2213
- .text-success { color: var(--success); }
2214
- .text-warning { color: var(--warning); }
2215
- .text-danger { color: var(--danger); }
2216
- .text-primary { color: var(--primary); }
2217
- .text-accent { color: var(--accent); }
2218
- .font-mono { font-family: var(--font-mono); }
2219
- .font-medium { font-weight: 500; }
2220
- .font-semibold { font-weight: 600; }
2221
- .font-bold { font-weight: 700; }
2222
- .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2223
-
2224
- /* Width */
2225
- .w-full { width: 100%; }
2226
- .w-fit { width: fit-content; }
2227
- .min-w-0 { min-width: 0; }
2228
-
2229
- /* Position */
2230
- .relative { position: relative; }
2231
- .absolute { position: absolute; }
2232
-
2233
- /* Overflow */
2234
- .overflow-hidden { overflow: hidden; }
2235
- .overflow-auto { overflow: auto; }
2236
-
2237
- /* Border Radius */
2238
- .rounded-sm { border-radius: var(--radius-sm); }
2239
- .rounded-md { border-radius: var(--radius-md); }
2240
- .rounded-lg { border-radius: var(--radius-lg); }
2241
- .rounded-full { border-radius: var(--radius-full); }
2242
-
2243
- /* ============================================================
2244
- Animations
2245
- ============================================================ */
2246
-
2247
- @keyframes fadeIn {
2248
- from { opacity: 0; }
2249
- to { opacity: 1; }
2250
- }
2251
-
2252
- @keyframes fadeInUp {
2253
- from {
2254
- opacity: 0;
2255
- transform: translateY(12px);
2256
- }
2257
- to {
2258
- opacity: 1;
2259
- transform: translateY(0);
2260
- }
2261
- }
2262
-
2263
- @keyframes fadeInDown {
2264
- from {
2265
- opacity: 0;
2266
- transform: translateY(-8px);
2267
- }
2268
- to {
2269
- opacity: 1;
2270
- transform: translateY(0);
2271
- }
2272
- }
2273
-
2274
- @keyframes slideUp {
2275
- from {
2276
- opacity: 0;
2277
- transform: translateY(24px);
2278
- }
2279
- to {
2280
- opacity: 1;
2281
- transform: translateY(0);
2282
- }
2283
- }
2284
-
2285
- @keyframes slideInRight {
2286
- from {
2287
- opacity: 0;
2288
- transform: translateX(20px);
2289
- }
2290
- to {
2291
- opacity: 1;
2292
- transform: translateX(0);
2293
- }
2294
- }
2295
-
2296
- @keyframes slideOutRight {
2297
- from {
2298
- opacity: 1;
2299
- transform: translateX(0);
2300
- }
2301
- to {
2302
- opacity: 0;
2303
- transform: translateX(20px);
2304
- }
2305
- }
2306
-
2307
- @keyframes spin {
2308
- to { transform: rotate(360deg); }
2309
- }
2310
-
2311
- @keyframes pulse-dot {
2312
- 0%, 100% { opacity: 1; transform: scale(1); }
2313
- 50% { opacity: 0.5; transform: scale(0.85); }
2314
- }
2315
-
2316
- @keyframes shimmer {
2317
- to { background-position: -200% 0; }
2318
- }
2319
-
2320
- @keyframes glow-pulse {
2321
- 0%, 100% { box-shadow: 0 0 6px rgba(124, 58, 237, 0.25); }
2322
- 50% { box-shadow: 0 0 18px rgba(124, 58, 237, 0.55); }
2323
- }
2324
-
2325
- @keyframes pulse-glow-danger {
2326
- 0%, 100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.3); }
2327
- 50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.6); }
2328
- }
2329
-
2330
- /* Stagger animation for lists */
2331
- .card:nth-child(1) { animation-delay: 0.04s; }
2332
- .card:nth-child(2) { animation-delay: 0.08s; }
2333
- .card:nth-child(3) { animation-delay: 0.12s; }
2334
- .card:nth-child(4) { animation-delay: 0.16s; }
2335
- .card:nth-child(5) { animation-delay: 0.20s; }
2336
- .card:nth-child(6) { animation-delay: 0.24s; }
2337
-
2338
- .stat-card:nth-child(1) { animation-delay: 0.04s; }
2339
- .stat-card:nth-child(2) { animation-delay: 0.08s; }
2340
- .stat-card:nth-child(3) { animation-delay: 0.12s; }
2341
- .stat-card:nth-child(4) { animation-delay: 0.16s; }
2342
-
2343
- /* ============================================================
2344
- Responsive — Sidebar collapse at <1200px
2345
- ============================================================ */
2346
-
2347
- @media (max-width: 1199px) {
2348
- .sidebar {
2349
- width: var(--sidebar-collapsed-width);
2350
- }
2351
-
2352
- .sidebar__brand,
2353
- .sidebar__brand-tagline,
2354
- .sidebar__link-label,
2355
- .sidebar__section-title {
2356
- display: none;
2357
- }
2358
-
2359
- .sidebar__link {
2360
- justify-content: center;
2361
- padding: 0.625rem;
2362
- margin: 0.125rem 0.375rem;
2363
- }
2364
-
2365
- .sidebar__link.active::before {
2366
- left: -0.375rem;
2367
- }
2368
-
2369
- .sidebar__link-icon {
2370
- width: auto;
2371
- font-size: 1.125rem;
2372
- }
2373
-
2374
- .sidebar__header {
2375
- justify-content: center;
2376
- }
2377
-
2378
- .main {
2379
- margin-left: var(--sidebar-collapsed-width);
2380
- }
2381
- }
2382
-
2383
- @media (max-width: 1100px) {
2384
- .grid--3 {
2385
- grid-template-columns: repeat(2, 1fr);
2386
- }
2387
-
2388
- .grid--4 {
2389
- grid-template-columns: repeat(2, 1fr);
2390
- }
2391
-
2392
- .grid--sidebar-main {
2393
- grid-template-columns: 1fr;
2394
- }
2395
- }
2396
-
2397
- @media (max-width: 768px) {
2398
- .content {
2399
- padding: 1.25rem;
2400
- }
2401
-
2402
- .topbar {
2403
- padding: 0 1.25rem;
2404
- }
2405
-
2406
- .topbar__center {
2407
- display: none;
2408
- }
2409
-
2410
- .grid--2,
2411
- .grid--3,
2412
- .grid--4 {
2413
- grid-template-columns: 1fr;
2414
- }
2415
-
2416
- .modal {
2417
- max-height: 92vh;
2418
- }
2419
-
2420
- .modal--lg,
2421
- .modal--xl {
2422
- max-width: 100%;
2423
- }
2424
- }
2425
-
2426
- /* ============================================================
2427
- Dark Mode Overrides (already dark, but explicit)
2428
- ============================================================ */
2429
-
2430
- @media (prefers-color-scheme: light) {
2431
- /* Force dark regardless of system theme */
2432
- :root {
2433
- color-scheme: dark;
2434
- }
2435
- }
2436
-
2437
- /* ============================================================
2438
- Print Styles
2439
- ============================================================ */
2440
-
2441
- @media print {
2442
- .sidebar,
2443
- .topbar,
2444
- .btn,
2445
- .modal-overlay,
2446
- .toast-container {
2447
- display: none !important;
2448
- }
2449
-
2450
- .main {
2451
- margin-left: 0;
2452
- }
2453
-
2454
- .card {
2455
- border: 1px solid #ccc;
2456
- box-shadow: none;
2457
- }
2458
- }