terra-hiven 3.2.0

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 (47) hide show
  1. package/LICENSE.md +20 -0
  2. package/README.md +233 -0
  3. package/assets/hiven_logo_v2.png +0 -0
  4. package/bin/hiven.js +225 -0
  5. package/console/.nojekyll +0 -0
  6. package/console/app.js +588 -0
  7. package/console/assets/hiven_logo_v2.png +0 -0
  8. package/console/data/swarms_history.json +38 -0
  9. package/console/index.html +694 -0
  10. package/console/style.css +1039 -0
  11. package/console/webbl.config.json +5 -0
  12. package/dist/api.d.ts +13 -0
  13. package/dist/api.d.ts.map +1 -0
  14. package/dist/api.js +142 -0
  15. package/dist/api.js.map +1 -0
  16. package/dist/honeycombs.d.ts +30 -0
  17. package/dist/honeycombs.d.ts.map +1 -0
  18. package/dist/honeycombs.js +221 -0
  19. package/dist/honeycombs.js.map +1 -0
  20. package/dist/index.d.ts +38 -0
  21. package/dist/index.d.ts.map +1 -0
  22. package/dist/index.js +133 -0
  23. package/dist/index.js.map +1 -0
  24. package/dist/inference.d.ts +33 -0
  25. package/dist/inference.d.ts.map +1 -0
  26. package/dist/inference.js +217 -0
  27. package/dist/inference.js.map +1 -0
  28. package/dist/server.d.ts +10 -0
  29. package/dist/server.d.ts.map +1 -0
  30. package/dist/server.js +54 -0
  31. package/dist/server.js.map +1 -0
  32. package/dist/swarm.d.ts +30 -0
  33. package/dist/swarm.d.ts.map +1 -0
  34. package/dist/swarm.js +196 -0
  35. package/dist/swarm.js.map +1 -0
  36. package/dist/types.d.ts +117 -0
  37. package/dist/types.d.ts.map +1 -0
  38. package/dist/types.js +6 -0
  39. package/dist/types.js.map +1 -0
  40. package/dist/vault.d.ts +19 -0
  41. package/dist/vault.d.ts.map +1 -0
  42. package/dist/vault.js +99 -0
  43. package/dist/vault.js.map +1 -0
  44. package/package.json +63 -0
  45. package/templates/.github/workflows/swarm.yml +229 -0
  46. package/templates/package.json +13 -0
  47. package/templates/swarm_runner.js +1594 -0
@@ -0,0 +1,1039 @@
1
+ :root {
2
+ --bg-primary: #080b04;
3
+ --bg-secondary: #0d1208;
4
+ --bg-card: rgba(13, 18, 8, 0.88);
5
+ --border-color: rgba(215, 237, 4, 0.22);
6
+ --border-hover: rgba(215, 237, 4, 0.5);
7
+ --text-main: #f4f6f0;
8
+ --text-muted: #9aa28f;
9
+ --accent-hiven: #d7ed04;
10
+ --accent-light: #e5f63d;
11
+ --accent-dark: #b2c502;
12
+ --accent-glow: rgba(215, 237, 4, 0.18);
13
+ --accent-green: #10b981;
14
+ --accent-red: #ef4444;
15
+ --font-ui: "Outfit", sans-serif;
16
+ --font-mono: "JetBrains Mono", monospace;
17
+ --radius-sm: 6px;
18
+ --radius-md: 10px;
19
+ --radius-lg: 14px;
20
+ }
21
+
22
+ * {
23
+ box-sizing: border-box;
24
+ margin: 0;
25
+ padding: 0;
26
+ }
27
+
28
+ body {
29
+ background-color: var(--bg-primary);
30
+ color: var(--text-main);
31
+ font-family: var(--font-ui);
32
+ line-height: 1.5;
33
+ min-height: 100vh;
34
+ display: flex;
35
+ flex-direction: column;
36
+ }
37
+
38
+ /* AUTH GATE LOCKSCREEN */
39
+ .auth-gate-screen {
40
+ position: fixed;
41
+ top: 0;
42
+ left: 0;
43
+ width: 100vw;
44
+ height: 100vh;
45
+ background: radial-gradient(circle at 50% 35%, #141b0b 0%, #060803 85%);
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ padding: 24px;
50
+ z-index: 99999;
51
+ }
52
+
53
+ .auth-gate-card {
54
+ width: 100%;
55
+ max-width: 460px;
56
+ background: rgba(13, 18, 8, 0.95);
57
+ border: 1px solid var(--border-color);
58
+ border-radius: var(--radius-lg);
59
+ padding: 38px 32px;
60
+ box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 20px var(--accent-glow);
61
+ display: flex;
62
+ flex-direction: column;
63
+ align-items: center;
64
+ text-align: center;
65
+ }
66
+
67
+ .gate-logo {
68
+ width: 68px !important;
69
+ height: 68px !important;
70
+ object-fit: contain;
71
+ border-radius: 16px;
72
+ border: 1px solid var(--border-color);
73
+ margin-bottom: 16px;
74
+ background: #000;
75
+ box-shadow: 0 0 15px var(--accent-glow);
76
+ }
77
+
78
+ .gate-header h2 {
79
+ font-size: 1.65rem;
80
+ font-weight: 800;
81
+ letter-spacing: 2px;
82
+ color: var(--accent-hiven);
83
+ margin-bottom: 4px;
84
+ }
85
+
86
+ .gate-tag {
87
+ font-size: 0.78rem;
88
+ text-transform: uppercase;
89
+ letter-spacing: 1.5px;
90
+ color: var(--text-muted);
91
+ margin-bottom: 12px;
92
+ font-weight: 600;
93
+ }
94
+
95
+ .gate-desc {
96
+ font-size: 0.86rem;
97
+ color: var(--text-muted);
98
+ line-height: 1.45;
99
+ margin-bottom: 20px;
100
+ }
101
+
102
+ /* APP LAYOUT */
103
+ .app-layout-wrapper {
104
+ display: none;
105
+ flex-direction: column;
106
+ min-height: 100vh;
107
+ width: 100%;
108
+ }
109
+
110
+ html.is-authenticated-pre .app-layout-wrapper {
111
+ display: flex !important;
112
+ }
113
+
114
+ html.is-authenticated-pre .auth-gate-screen {
115
+ display: none !important;
116
+ }
117
+
118
+ /* Topbar */
119
+ .topbar {
120
+ display: flex;
121
+ justify-content: space-between;
122
+ align-items: center;
123
+ padding: 0.85rem 1.5rem;
124
+ background-color: var(--bg-secondary);
125
+ border-bottom: 1px solid var(--border-color);
126
+ position: sticky;
127
+ top: 0;
128
+ z-index: 100;
129
+ }
130
+
131
+ .brand {
132
+ display: flex;
133
+ align-items: center;
134
+ gap: 0.85rem;
135
+ }
136
+
137
+ .brand-logo {
138
+ width: 36px;
139
+ height: 36px;
140
+ border-radius: 8px;
141
+ box-shadow: 0 0 12px var(--accent-glow);
142
+ }
143
+
144
+ .brand-title {
145
+ font-size: 1.2rem;
146
+ font-weight: 800;
147
+ letter-spacing: 0.5px;
148
+ color: var(--accent-hiven);
149
+ }
150
+
151
+ .version-badge {
152
+ font-size: 0.65rem;
153
+ font-weight: 600;
154
+ background: var(--accent-glow);
155
+ color: var(--accent-hiven);
156
+ border: 1px solid var(--border-color);
157
+ padding: 2px 6px;
158
+ border-radius: 12px;
159
+ vertical-align: middle;
160
+ }
161
+
162
+ .brand-subtitle {
163
+ font-size: 0.75rem;
164
+ color: var(--text-muted);
165
+ }
166
+
167
+ .topbar-actions {
168
+ display: flex;
169
+ align-items: center;
170
+ gap: 1rem;
171
+ }
172
+
173
+ .swarm-indicator {
174
+ display: flex;
175
+ align-items: center;
176
+ gap: 0.5rem;
177
+ font-size: 0.8rem;
178
+ background: rgba(215, 237, 4, 0.08);
179
+ border: 1px solid rgba(215, 237, 4, 0.3);
180
+ padding: 4px 10px;
181
+ border-radius: 20px;
182
+ color: var(--accent-hiven);
183
+ }
184
+
185
+ .pulse-dot {
186
+ width: 8px;
187
+ height: 8px;
188
+ background-color: var(--accent-hiven);
189
+ border-radius: 50%;
190
+ box-shadow: 0 0 8px var(--accent-hiven);
191
+ animation: pulse 2s infinite;
192
+ }
193
+
194
+ @keyframes pulse {
195
+ 0% { transform: scale(0.95); opacity: 0.8; }
196
+ 50% { transform: scale(1.2); opacity: 1; }
197
+ 100% { transform: scale(0.95); opacity: 0.8; }
198
+ }
199
+
200
+ .user-profile-badge {
201
+ display: flex;
202
+ align-items: center;
203
+ gap: 0.5rem;
204
+ background: rgba(255, 255, 255, 0.04);
205
+ border: 1px solid var(--border-color);
206
+ border-radius: 20px;
207
+ padding: 3px 10px 3px 4px;
208
+ }
209
+
210
+ .user-avatar-mini {
211
+ width: 24px;
212
+ height: 24px;
213
+ border-radius: 50%;
214
+ border: 1px solid var(--accent-hiven);
215
+ }
216
+
217
+ .user-login-text {
218
+ font-size: 0.8rem;
219
+ font-weight: 600;
220
+ color: var(--text-main);
221
+ font-family: var(--font-mono);
222
+ }
223
+
224
+ .btn-logout {
225
+ background: transparent;
226
+ border: none;
227
+ color: var(--text-muted);
228
+ font-size: 0.75rem;
229
+ cursor: pointer;
230
+ padding-left: 6px;
231
+ border-left: 1px solid rgba(255, 255, 255, 0.1);
232
+ }
233
+
234
+ .btn-logout:hover {
235
+ color: var(--accent-red);
236
+ }
237
+
238
+ /* Layout */
239
+ .layout {
240
+ display: flex;
241
+ flex: 1;
242
+ }
243
+
244
+ .sidebar {
245
+ width: 250px;
246
+ background-color: var(--bg-secondary);
247
+ border-right: 1px solid var(--border-color);
248
+ display: flex;
249
+ flex-direction: column;
250
+ justify-content: space-between;
251
+ padding: 1rem 0.5rem;
252
+ }
253
+
254
+ .nav-menu {
255
+ display: flex;
256
+ flex-direction: column;
257
+ gap: 0.35rem;
258
+ }
259
+
260
+ .nav-item {
261
+ display: flex;
262
+ align-items: center;
263
+ gap: 0.75rem;
264
+ padding: 0.75rem 1rem;
265
+ background: transparent;
266
+ border: 1px solid transparent;
267
+ border-radius: var(--radius-md);
268
+ color: var(--text-muted);
269
+ font-family: var(--font-ui);
270
+ font-size: 0.9rem;
271
+ font-weight: 500;
272
+ cursor: pointer;
273
+ transition: all 0.2s ease;
274
+ text-align: left;
275
+ }
276
+
277
+ .nav-item:hover {
278
+ background: rgba(215, 237, 4, 0.05);
279
+ color: var(--text-main);
280
+ border-color: var(--border-color);
281
+ }
282
+
283
+ .nav-item.active {
284
+ background: var(--accent-glow);
285
+ color: var(--accent-hiven);
286
+ border-color: var(--accent-hiven);
287
+ font-weight: 600;
288
+ }
289
+
290
+ .sidebar-footer {
291
+ padding: 1rem;
292
+ }
293
+
294
+ .terra-badge {
295
+ background: rgba(0, 0, 0, 0.4);
296
+ border: 1px solid var(--border-color);
297
+ border-radius: var(--radius-md);
298
+ padding: 0.5rem;
299
+ text-align: center;
300
+ font-size: 0.75rem;
301
+ color: var(--accent-hiven);
302
+ display: flex;
303
+ flex-direction: column;
304
+ }
305
+
306
+ /* Content Area */
307
+ .content {
308
+ flex: 1;
309
+ padding: 2rem;
310
+ background: radial-gradient(circle at top right, rgba(215, 237, 4, 0.05), transparent 450px);
311
+ overflow-y: auto;
312
+ }
313
+
314
+ .tab-pane {
315
+ display: none;
316
+ }
317
+
318
+ .tab-pane.active {
319
+ display: block;
320
+ }
321
+
322
+ .section-header {
323
+ display: flex;
324
+ justify-content: space-between;
325
+ align-items: center;
326
+ margin-bottom: 1.5rem;
327
+ }
328
+
329
+ .section-header h2 {
330
+ font-size: 1.5rem;
331
+ font-weight: 700;
332
+ color: var(--text-main);
333
+ }
334
+
335
+ .text-muted {
336
+ color: var(--text-muted);
337
+ font-size: 0.85rem;
338
+ }
339
+
340
+ /* Cards & Grid */
341
+ .card {
342
+ background: var(--bg-card);
343
+ backdrop-filter: blur(10px);
344
+ border: 1px solid var(--border-color);
345
+ border-radius: var(--radius-lg);
346
+ padding: 1.5rem;
347
+ }
348
+
349
+ .card-header {
350
+ display: flex;
351
+ justify-content: space-between;
352
+ align-items: center;
353
+ margin-bottom: 1.25rem;
354
+ }
355
+
356
+ .stats-grid {
357
+ display: grid;
358
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
359
+ gap: 1rem;
360
+ }
361
+
362
+ .stat-card {
363
+ background: var(--bg-card);
364
+ border: 1px solid var(--border-color);
365
+ border-radius: var(--radius-md);
366
+ padding: 1.25rem;
367
+ text-align: center;
368
+ transition: transform 0.2s ease, border-color 0.2s ease;
369
+ }
370
+
371
+ .stat-card:hover {
372
+ transform: translateY(-2px);
373
+ border-color: var(--accent-hiven);
374
+ }
375
+
376
+ .stat-icon {
377
+ font-size: 1.75rem;
378
+ margin-bottom: 0.25rem;
379
+ }
380
+
381
+ .stat-value {
382
+ font-size: 1.75rem;
383
+ font-weight: 800;
384
+ color: var(--accent-hiven);
385
+ font-family: var(--font-mono);
386
+ }
387
+
388
+ .stat-label {
389
+ font-size: 0.8rem;
390
+ color: var(--text-muted);
391
+ }
392
+
393
+ /* Stepper */
394
+ .pipeline-stepper {
395
+ display: flex;
396
+ align-items: center;
397
+ justify-content: space-between;
398
+ padding: 1rem 0;
399
+ overflow-x: auto;
400
+ }
401
+
402
+ .step-node {
403
+ display: flex;
404
+ flex-direction: column;
405
+ align-items: center;
406
+ text-align: center;
407
+ min-width: 120px;
408
+ }
409
+
410
+ .step-circle {
411
+ width: 36px;
412
+ height: 36px;
413
+ border-radius: 50%;
414
+ background: var(--bg-secondary);
415
+ border: 2px solid var(--border-color);
416
+ display: flex;
417
+ align-items: center;
418
+ justify-content: center;
419
+ font-weight: 700;
420
+ font-size: 0.85rem;
421
+ color: var(--text-muted);
422
+ margin-bottom: 0.5rem;
423
+ transition: all 0.3s ease;
424
+ }
425
+
426
+ .step-node.active .step-circle {
427
+ border-color: var(--accent-hiven);
428
+ background: var(--accent-glow);
429
+ color: var(--accent-hiven);
430
+ box-shadow: 0 0 12px var(--accent-glow);
431
+ }
432
+
433
+ .step-title {
434
+ font-size: 0.8rem;
435
+ font-weight: 600;
436
+ }
437
+
438
+ .step-desc {
439
+ font-size: 0.7rem;
440
+ color: var(--text-muted);
441
+ }
442
+
443
+ .step-connector {
444
+ flex: 1;
445
+ height: 2px;
446
+ background: var(--border-color);
447
+ margin: 0 0.5rem;
448
+ }
449
+
450
+ /* Terminal Box */
451
+ .terminal-box {
452
+ background: #040602;
453
+ border: 1px solid rgba(215, 237, 4, 0.15);
454
+ border-radius: var(--radius-md);
455
+ padding: 1rem;
456
+ font-family: var(--font-mono);
457
+ font-size: 0.8rem;
458
+ max-height: 200px;
459
+ overflow-y: auto;
460
+ }
461
+
462
+ .terminal-line {
463
+ margin-bottom: 0.3rem;
464
+ color: #e2e8f0;
465
+ }
466
+
467
+ .term-time {
468
+ color: var(--accent-hiven);
469
+ margin-right: 0.5rem;
470
+ }
471
+
472
+ /* Forms */
473
+ .form-grid {
474
+ display: grid;
475
+ grid-template-columns: 1fr 1fr;
476
+ gap: 1.25rem;
477
+ }
478
+
479
+ .form-group {
480
+ display: flex;
481
+ flex-direction: column;
482
+ gap: 0.35rem;
483
+ }
484
+
485
+ .form-group.full-width {
486
+ grid-column: span 2;
487
+ }
488
+
489
+ .form-control {
490
+ background: rgba(0, 0, 0, 0.4);
491
+ border: 1px solid var(--border-color);
492
+ border-radius: var(--radius-sm);
493
+ color: var(--text-main);
494
+ padding: 0.65rem 0.85rem;
495
+ font-family: var(--font-ui);
496
+ font-size: 0.9rem;
497
+ transition: border-color 0.2s ease;
498
+ }
499
+
500
+ .form-control:focus {
501
+ outline: none;
502
+ border-color: var(--accent-hiven);
503
+ box-shadow: 0 0 8px var(--accent-glow);
504
+ }
505
+
506
+ .form-text {
507
+ font-size: 0.75rem;
508
+ color: var(--text-muted);
509
+ }
510
+
511
+ .range-with-val {
512
+ display: flex;
513
+ align-items: center;
514
+ gap: 1rem;
515
+ }
516
+
517
+ .range-val {
518
+ font-family: var(--font-mono);
519
+ font-weight: 700;
520
+ color: var(--accent-hiven);
521
+ }
522
+
523
+ /* Buttons */
524
+ .btn {
525
+ display: inline-flex;
526
+ align-items: center;
527
+ gap: 0.5rem;
528
+ padding: 0.65rem 1.25rem;
529
+ border-radius: var(--radius-sm);
530
+ font-family: var(--font-ui);
531
+ font-size: 0.85rem;
532
+ font-weight: 600;
533
+ cursor: pointer;
534
+ transition: all 0.2s ease;
535
+ border: none;
536
+ }
537
+
538
+ .btn-primary {
539
+ background: linear-gradient(135deg, var(--accent-light), var(--accent-hiven));
540
+ color: #080b04;
541
+ }
542
+
543
+ .btn-primary:hover {
544
+ filter: brightness(1.1);
545
+ box-shadow: 0 0 14px var(--accent-glow);
546
+ }
547
+
548
+ .btn-secondary {
549
+ background: rgba(255, 255, 255, 0.05);
550
+ color: var(--text-main);
551
+ border: 1px solid var(--border-color);
552
+ }
553
+
554
+ .btn-secondary:hover {
555
+ background: rgba(215, 237, 4, 0.1);
556
+ border-color: var(--accent-hiven);
557
+ }
558
+
559
+ .btn-danger {
560
+ background: rgba(239, 68, 68, 0.15);
561
+ color: #fca5a5;
562
+ border: 1px solid rgba(239, 68, 68, 0.3);
563
+ }
564
+
565
+ .btn-danger:hover {
566
+ background: rgba(239, 68, 68, 0.25);
567
+ }
568
+
569
+ .btn-sm {
570
+ padding: 0.4rem 0.75rem;
571
+ font-size: 0.75rem;
572
+ }
573
+
574
+ .btn-icon {
575
+ background: transparent;
576
+ color: var(--text-muted);
577
+ padding: 0.4rem;
578
+ }
579
+
580
+ .btn-icon:hover {
581
+ color: var(--accent-hiven);
582
+ }
583
+
584
+ /* Tables */
585
+ .table-responsive {
586
+ overflow-x: auto;
587
+ }
588
+
589
+ .data-table {
590
+ width: 100%;
591
+ border-collapse: collapse;
592
+ font-size: 0.85rem;
593
+ }
594
+
595
+ .data-table th {
596
+ text-align: left;
597
+ padding: 0.75rem 1rem;
598
+ background: rgba(0, 0, 0, 0.3);
599
+ color: var(--accent-hiven);
600
+ border-bottom: 1px solid var(--border-color);
601
+ }
602
+
603
+ .data-table td {
604
+ padding: 0.85rem 1rem;
605
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
606
+ vertical-align: middle;
607
+ }
608
+
609
+ .data-table th:nth-child(3),
610
+ .data-table td:nth-child(3) {
611
+ min-width: 140px;
612
+ white-space: nowrap;
613
+ }
614
+
615
+ /* Honeycombs Grid */
616
+ .honeycomb-grid {
617
+ display: grid;
618
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
619
+ gap: 1rem;
620
+ }
621
+
622
+ .honeycomb-card {
623
+ background: var(--bg-card);
624
+ border: 1px solid var(--border-color);
625
+ border-radius: var(--radius-md);
626
+ padding: 1.25rem;
627
+ }
628
+
629
+ .honeycomb-lang {
630
+ font-size: 0.75rem;
631
+ font-weight: 700;
632
+ text-transform: uppercase;
633
+ color: var(--accent-hiven);
634
+ margin-bottom: 0.5rem;
635
+ }
636
+
637
+ /* Toast */
638
+ .toast {
639
+ position: fixed;
640
+ bottom: 20px;
641
+ right: 20px;
642
+ background: var(--bg-secondary);
643
+ border: 1px solid var(--accent-hiven);
644
+ color: var(--text-main);
645
+ padding: 0.75rem 1.25rem;
646
+ border-radius: var(--radius-sm);
647
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
648
+ transform: translateY(100px);
649
+ opacity: 0;
650
+ transition: all 0.3s ease;
651
+ z-index: 2000;
652
+ }
653
+
654
+ .toast.show {
655
+ transform: translateY(0);
656
+ opacity: 1;
657
+ }
658
+
659
+ /* Utility */
660
+ .mt-2 { margin-top: 0.5rem; }
661
+ .mt-3 { margin-top: 1rem; }
662
+ .mt-4 { margin-top: 1.5rem; }
663
+ .badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
664
+ .badge-amber { background: var(--accent-glow); color: var(--accent-hiven); border: 1px solid var(--border-color); }
665
+ .status-pill {
666
+ display: inline-flex;
667
+ align-items: center;
668
+ gap: 6px;
669
+ white-space: nowrap;
670
+ padding: 5px 12px;
671
+ border-radius: 20px;
672
+ font-size: 0.76rem;
673
+ font-weight: 600;
674
+ line-height: 1.1;
675
+ background: rgba(215, 237, 4, 0.12);
676
+ color: var(--accent-hiven);
677
+ border: 1px solid rgba(215, 237, 4, 0.35);
678
+ box-shadow: 0 0 10px rgba(215, 237, 4, 0.08);
679
+ }
680
+
681
+ .status-pill .pill-check {
682
+ font-size: 0.85rem;
683
+ line-height: 1;
684
+ }
685
+
686
+ /* ==========================================
687
+ HIVEMIND DUAL-LEVEL STYLES
688
+ ========================================== */
689
+
690
+ .hivemind-banner {
691
+ background: linear-gradient(135deg, rgba(215, 237, 4, 0.08), rgba(13, 18, 8, 0.95));
692
+ border: 1px solid var(--accent-hiven);
693
+ border-radius: var(--radius-lg);
694
+ padding: 1.5rem;
695
+ box-shadow: 0 0 20px rgba(215, 237, 4, 0.1);
696
+ }
697
+
698
+ .hivemind-header {
699
+ display: flex;
700
+ justify-content: space-between;
701
+ align-items: center;
702
+ gap: 1.5rem;
703
+ flex-wrap: wrap;
704
+ }
705
+
706
+ .hivemind-info {
707
+ flex: 1;
708
+ min-width: 280px;
709
+ }
710
+
711
+ .hivemind-title {
712
+ display: flex;
713
+ align-items: center;
714
+ gap: 0.65rem;
715
+ margin-bottom: 0.35rem;
716
+ }
717
+
718
+ .hivemind-title h3 {
719
+ font-size: 1.15rem;
720
+ font-weight: 700;
721
+ color: var(--accent-hiven);
722
+ }
723
+
724
+ .hivemind-icon {
725
+ font-size: 1.35rem;
726
+ }
727
+
728
+ .hivemind-desc {
729
+ font-size: 0.84rem;
730
+ color: var(--text-muted);
731
+ line-height: 1.45;
732
+ }
733
+
734
+ .hivemind-toggle-wrapper {
735
+ display: flex;
736
+ align-items: center;
737
+ gap: 1rem;
738
+ }
739
+
740
+ /* iOS-style Toggle Switch */
741
+ .toggle-switch {
742
+ position: relative;
743
+ display: inline-block;
744
+ width: 52px;
745
+ height: 28px;
746
+ }
747
+
748
+ .toggle-switch input {
749
+ opacity: 0;
750
+ width: 0;
751
+ height: 0;
752
+ }
753
+
754
+ .slider {
755
+ position: absolute;
756
+ cursor: pointer;
757
+ top: 0;
758
+ left: 0;
759
+ right: 0;
760
+ bottom: 0;
761
+ background-color: rgba(255, 255, 255, 0.1);
762
+ border: 1px solid var(--border-color);
763
+ transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
764
+ border-radius: 34px;
765
+ }
766
+
767
+ .slider:before {
768
+ position: absolute;
769
+ content: "";
770
+ height: 20px;
771
+ width: 20px;
772
+ left: 3px;
773
+ bottom: 3px;
774
+ background-color: #9aa28f;
775
+ transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
776
+ border-radius: 50%;
777
+ }
778
+
779
+ input:checked + .slider {
780
+ background-color: rgba(215, 237, 4, 0.25);
781
+ border-color: var(--accent-hiven);
782
+ box-shadow: 0 0 12px var(--accent-glow);
783
+ }
784
+
785
+ input:checked + .slider:before {
786
+ transform: translateX(24px);
787
+ background-color: var(--accent-hiven);
788
+ box-shadow: 0 0 8px var(--accent-hiven);
789
+ }
790
+
791
+ /* Modals */
792
+ .modal {
793
+ display: none;
794
+ position: fixed;
795
+ top: 0;
796
+ left: 0;
797
+ width: 100vw;
798
+ height: 100vh;
799
+ background: rgba(0, 0, 0, 0.82);
800
+ backdrop-filter: blur(8px);
801
+ z-index: 100000;
802
+ align-items: center;
803
+ justify-content: center;
804
+ padding: 20px;
805
+ }
806
+
807
+ .modal.active {
808
+ display: flex;
809
+ }
810
+
811
+ .modal-content {
812
+ background: var(--bg-secondary);
813
+ border: 1px solid var(--border-color);
814
+ border-radius: var(--radius-lg);
815
+ width: 100%;
816
+ padding: 1.75rem;
817
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 25px var(--accent-glow);
818
+ animation: modalFadeIn 0.2s ease-out;
819
+ }
820
+
821
+ @keyframes modalFadeIn {
822
+ from { opacity: 0; transform: scale(0.96); }
823
+ to { opacity: 1; transform: scale(1); }
824
+ }
825
+
826
+ .modal-header {
827
+ display: flex;
828
+ justify-content: space-between;
829
+ align-items: center;
830
+ margin-bottom: 1.25rem;
831
+ border-bottom: 1px solid var(--border-color);
832
+ padding-bottom: 0.75rem;
833
+ }
834
+
835
+ .modal-close {
836
+ background: transparent;
837
+ border: none;
838
+ color: var(--text-muted);
839
+ font-size: 1.5rem;
840
+ cursor: pointer;
841
+ line-height: 1;
842
+ }
843
+
844
+ .modal-close:hover {
845
+ color: var(--accent-hiven);
846
+ }
847
+
848
+ .mb-3 { margin-bottom: 0.75rem; }
849
+ .mb-4 { margin-bottom: 1.5rem; }
850
+
851
+ /* ==========================================
852
+ DOCUMENTATION & ARCHITECTURE GUIDE STYLES
853
+ ========================================== */
854
+
855
+ .docs-container {
856
+ display: grid;
857
+ grid-template-columns: 240px 1fr;
858
+ gap: 2rem;
859
+ align-items: flex-start;
860
+ margin-top: 1rem;
861
+ }
862
+
863
+ @media (max-width: 900px) {
864
+ .docs-container {
865
+ grid-template-columns: 1fr;
866
+ }
867
+ }
868
+
869
+ .docs-sidebar {
870
+ background: var(--bg-card);
871
+ border: 1px solid var(--border-color);
872
+ border-radius: var(--radius-md);
873
+ padding: 1rem 0.75rem;
874
+ position: sticky;
875
+ top: 80px;
876
+ display: flex;
877
+ flex-direction: column;
878
+ gap: 0.35rem;
879
+ }
880
+
881
+ .docs-link {
882
+ color: var(--text-muted);
883
+ text-decoration: none;
884
+ font-size: 0.82rem;
885
+ padding: 0.5rem 0.75rem;
886
+ border-radius: var(--radius-sm);
887
+ transition: all 0.2s ease;
888
+ font-weight: 500;
889
+ display: block;
890
+ }
891
+
892
+ .docs-link:hover, .docs-link.active {
893
+ color: var(--accent-hiven);
894
+ background: rgba(215, 237, 4, 0.08);
895
+ border-left: 3px solid var(--accent-hiven);
896
+ }
897
+
898
+ .docs-content {
899
+ background: var(--bg-card);
900
+ border: 1px solid var(--border-color);
901
+ border-radius: var(--radius-md);
902
+ padding: 2rem;
903
+ line-height: 1.65;
904
+ color: var(--text-main);
905
+ }
906
+
907
+ .docs-content h3 {
908
+ color: var(--accent-hiven);
909
+ font-size: 1.25rem;
910
+ margin-bottom: 0.75rem;
911
+ padding-bottom: 0.5rem;
912
+ border-bottom: 1px solid rgba(215, 237, 4, 0.15);
913
+ }
914
+
915
+ .docs-content h4 {
916
+ color: #ffffff;
917
+ font-size: 1.05rem;
918
+ margin-top: 1.25rem;
919
+ margin-bottom: 0.5rem;
920
+ }
921
+
922
+ .docs-content p {
923
+ font-size: 0.88rem;
924
+ color: #c5ccc0;
925
+ margin-bottom: 1rem;
926
+ }
927
+
928
+ .docs-content ul, .docs-content ol {
929
+ margin-left: 1.5rem;
930
+ margin-bottom: 1rem;
931
+ font-size: 0.86rem;
932
+ color: #b5beb0;
933
+ }
934
+
935
+ .docs-content li {
936
+ margin-bottom: 0.4rem;
937
+ }
938
+
939
+ /* Prompt Comparison Cards */
940
+ .prompt-comparison {
941
+ display: grid;
942
+ grid-template-columns: 1fr 1fr;
943
+ gap: 1rem;
944
+ margin: 1.25rem 0;
945
+ }
946
+
947
+ @media (max-width: 768px) {
948
+ .prompt-comparison {
949
+ grid-template-columns: 1fr;
950
+ }
951
+ }
952
+
953
+ .prompt-box {
954
+ padding: 1.15rem;
955
+ border-radius: var(--radius-md);
956
+ font-size: 0.84rem;
957
+ line-height: 1.5;
958
+ }
959
+
960
+ .prompt-box.bad {
961
+ background: rgba(239, 68, 68, 0.08);
962
+ border: 1px solid rgba(239, 68, 68, 0.3);
963
+ }
964
+
965
+ .prompt-box.bad .prompt-header {
966
+ color: #fca5a5;
967
+ font-weight: 700;
968
+ margin-bottom: 0.5rem;
969
+ display: flex;
970
+ align-items: center;
971
+ gap: 6px;
972
+ }
973
+
974
+ .prompt-box.good {
975
+ background: rgba(16, 185, 129, 0.08);
976
+ border: 1px solid rgba(16, 185, 129, 0.35);
977
+ }
978
+
979
+ .prompt-box.good .prompt-header {
980
+ color: var(--accent-green);
981
+ font-weight: 700;
982
+ margin-bottom: 0.5rem;
983
+ display: flex;
984
+ align-items: center;
985
+ gap: 6px;
986
+ }
987
+
988
+ .prompt-box code {
989
+ display: block;
990
+ background: rgba(0, 0, 0, 0.4);
991
+ padding: 0.75rem;
992
+ border-radius: 6px;
993
+ font-family: var(--font-mono);
994
+ font-size: 0.78rem;
995
+ margin-top: 0.5rem;
996
+ color: #e5e7eb;
997
+ white-space: pre-wrap;
998
+ }
999
+
1000
+ /* Parameter Reference Table */
1001
+ .param-table {
1002
+ width: 100%;
1003
+ border-collapse: collapse;
1004
+ margin: 1.25rem 0;
1005
+ font-size: 0.84rem;
1006
+ }
1007
+
1008
+ .param-table th {
1009
+ text-align: left;
1010
+ padding: 0.65rem 0.85rem;
1011
+ background: rgba(0, 0, 0, 0.4);
1012
+ color: var(--accent-hiven);
1013
+ border: 1px solid var(--border-color);
1014
+ }
1015
+
1016
+ .param-table td {
1017
+ padding: 0.65rem 0.85rem;
1018
+ border: 1px solid rgba(255, 255, 255, 0.08);
1019
+ vertical-align: top;
1020
+ }
1021
+
1022
+ .param-table td code {
1023
+ color: var(--accent-hiven);
1024
+ font-weight: 600;
1025
+ }
1026
+
1027
+ /* Callout Box */
1028
+ .callout-box {
1029
+ background: rgba(215, 237, 4, 0.06);
1030
+ border-left: 4px solid var(--accent-hiven);
1031
+ padding: 1rem 1.25rem;
1032
+ border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
1033
+ margin: 1.25rem 0;
1034
+ font-size: 0.85rem;
1035
+ }
1036
+
1037
+ .callout-box strong {
1038
+ color: var(--accent-hiven);
1039
+ }