termsearch 0.3.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.
@@ -0,0 +1,756 @@
1
+ /* TermSearch — CSS allineato a MmmSearch */
2
+
3
+ :root {
4
+ --bg: #0a0a0a;
5
+ --bg2: #111111;
6
+ --bg3: #1a1a1a;
7
+ --bg4: #0f0f0f;
8
+ --border: #222222;
9
+ --border2: #1a1a1a;
10
+ --text: #f8fafc;
11
+ --text2: #808080;
12
+ --text3: #444444;
13
+ --link: #8ab4f8;
14
+ --link-h: #aecbfa;
15
+ --url: #34a853;
16
+ --radius: 12px;
17
+ --radius-sm: 8px;
18
+ --radius-xs: 6px;
19
+ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
20
+ --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
21
+
22
+ /* Section colors */
23
+ --ai-bg: #0f0f1a;
24
+ --ai-border: rgba(109,40,217,0.25);
25
+ --ai-text: #c084fc;
26
+ --ai-text2: #a78bfa;
27
+ --ai-dim: rgba(109,40,217,0.15);
28
+
29
+ --prof-bg: #080f0a;
30
+ --prof-border: rgba(6,78,59,0.35);
31
+ --prof-text: #34d399;
32
+ --prof-dim: rgba(6,78,59,0.15);
33
+
34
+ --tor-bg: #0f0d07;
35
+ --tor-border: rgba(92,50,6,0.4);
36
+ --tor-text: #fbbf24;
37
+ --tor-dim: rgba(92,50,6,0.15);
38
+
39
+ --soc-bg: #090d10;
40
+ --soc-border: rgba(7,89,133,0.3);
41
+ --soc-text: #38bdf8;
42
+ --soc-dim: rgba(7,89,133,0.12);
43
+ }
44
+
45
+ :root.light {
46
+ filter: invert(1) hue-rotate(180deg);
47
+ }
48
+ :root.light img,
49
+ :root.light video,
50
+ :root.light canvas,
51
+ :root.light svg image { filter: invert(1) hue-rotate(180deg); }
52
+
53
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
54
+ html { font-size: 16px; }
55
+
56
+ body {
57
+ font-family: var(--font);
58
+ background: var(--bg);
59
+ color: var(--text);
60
+ min-height: 100vh;
61
+ line-height: 1.6;
62
+ -webkit-font-smoothing: antialiased;
63
+ }
64
+
65
+ a { color: var(--link); text-decoration: none; }
66
+ a:hover { color: var(--link-h); }
67
+
68
+ /* ─── Animations ──────────────────────────────────────────────────────────── */
69
+ @keyframes fadeUp {
70
+ from { opacity: 0; transform: translateY(10px); }
71
+ to { opacity: 1; transform: translateY(0); }
72
+ }
73
+ @keyframes fadeIn {
74
+ from { opacity: 0; }
75
+ to { opacity: 1; }
76
+ }
77
+ @keyframes spin {
78
+ to { transform: rotate(360deg); }
79
+ }
80
+ @keyframes pulse {
81
+ 0%, 100% { opacity: 1; }
82
+ 50% { opacity: 0.35; }
83
+ }
84
+ @keyframes bounce {
85
+ 0%, 80%, 100% { transform: translateY(0); }
86
+ 40% { transform: translateY(-4px); }
87
+ }
88
+ @keyframes skeletonShimmer {
89
+ 0% { background-position: -400px 0; }
90
+ 100% { background-position: 400px 0; }
91
+ }
92
+
93
+ .anim-fade-up { animation: fadeUp 0.22s ease-out both; }
94
+ .anim-fade-in { animation: fadeIn 0.18s ease-out both; }
95
+ .spin { animation: spin 0.9s linear infinite; }
96
+ .pulse { animation: pulse 1.5s ease-in-out infinite; }
97
+
98
+ /* ─── Layout ──────────────────────────────────────────────────────────────── */
99
+ #app { min-height: 100vh; display: flex; flex-direction: column; }
100
+
101
+ /* ─── Header ──────────────────────────────────────────────────────────────── */
102
+ .header {
103
+ display: flex;
104
+ align-items: center;
105
+ gap: 10px;
106
+ padding: 10px 16px;
107
+ border-bottom: 1px solid var(--border2);
108
+ background: var(--bg);
109
+ position: sticky;
110
+ top: 0;
111
+ z-index: 100;
112
+ }
113
+
114
+ .logo-text {
115
+ font-size: 17px;
116
+ font-weight: 300;
117
+ letter-spacing: -0.3px;
118
+ color: var(--text);
119
+ white-space: nowrap;
120
+ cursor: pointer;
121
+ flex-shrink: 0;
122
+ }
123
+ .logo-text strong {
124
+ font-weight: 700;
125
+ background: linear-gradient(90deg, #a78bfa, #818cf8);
126
+ -webkit-background-clip: text;
127
+ -webkit-text-fill-color: transparent;
128
+ background-clip: text;
129
+ }
130
+
131
+ .header-search { flex: 1; min-width: 0; max-width: 560px; }
132
+ .header-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
133
+
134
+ .category-tabs {
135
+ display: flex;
136
+ align-items: center;
137
+ gap: 6px;
138
+ padding: 8px 16px 10px;
139
+ border-bottom: 1px solid var(--border2);
140
+ background: var(--bg);
141
+ position: sticky;
142
+ top: 52px;
143
+ z-index: 90;
144
+ }
145
+ .cat-tab {
146
+ border: 1px solid transparent;
147
+ background: transparent;
148
+ color: var(--text3);
149
+ font-size: 11px;
150
+ padding: 5px 10px;
151
+ border-radius: 999px;
152
+ cursor: pointer;
153
+ transition: all 0.15s;
154
+ }
155
+ .cat-tab:hover { color: var(--text2); border-color: #2d2d2d; }
156
+ .cat-tab.active {
157
+ color: var(--ai-text2);
158
+ border-color: rgba(109,40,217,0.4);
159
+ background: rgba(109,40,217,0.15);
160
+ }
161
+
162
+ /* ─── Homepage ────────────────────────────────────────────────────────────── */
163
+ .home {
164
+ flex: 1;
165
+ display: flex;
166
+ flex-direction: column;
167
+ align-items: center;
168
+ justify-content: center;
169
+ padding: 48px 20px 80px;
170
+ gap: 0;
171
+ }
172
+
173
+ .home-logo {
174
+ font-size: clamp(42px, 10vw, 64px);
175
+ font-weight: 200;
176
+ letter-spacing: -2px;
177
+ color: var(--text);
178
+ user-select: none;
179
+ margin-bottom: 8px;
180
+ }
181
+ .home-logo strong {
182
+ font-weight: 700;
183
+ background: linear-gradient(90deg, #a78bfa, #818cf8);
184
+ -webkit-background-clip: text;
185
+ -webkit-text-fill-color: transparent;
186
+ background-clip: text;
187
+ }
188
+
189
+ .home-tagline {
190
+ font-size: 11px;
191
+ color: var(--text3);
192
+ letter-spacing: 0.15em;
193
+ text-transform: uppercase;
194
+ margin-bottom: 32px;
195
+ }
196
+
197
+ .home-search { width: 100%; max-width: 560px; margin-bottom: 14px; }
198
+
199
+ .home-actions {
200
+ display: flex;
201
+ align-items: center;
202
+ gap: 8px;
203
+ flex-wrap: wrap;
204
+ justify-content: center;
205
+ }
206
+
207
+ /* ─── Search Bar ──────────────────────────────────────────────────────────── */
208
+ .search-form {
209
+ display: flex;
210
+ align-items: center;
211
+ gap: 0;
212
+ border-radius: 999px;
213
+ border: 1px solid #303030;
214
+ background: #1c1c1c;
215
+ transition: border-color 0.15s;
216
+ overflow: hidden;
217
+ }
218
+ .search-form:focus-within { border-color: #4a4a4a; }
219
+
220
+ .search-icon {
221
+ padding: 0 10px 0 14px;
222
+ color: var(--text3);
223
+ display: flex;
224
+ align-items: center;
225
+ flex-shrink: 0;
226
+ }
227
+
228
+ .search-input {
229
+ flex: 1;
230
+ padding: 10px 4px;
231
+ background: transparent;
232
+ border: none;
233
+ outline: none;
234
+ font-size: 15px;
235
+ color: var(--text);
236
+ font-family: var(--font);
237
+ min-width: 0;
238
+ }
239
+ .search-input::placeholder { color: var(--text3); }
240
+
241
+ .search-btn {
242
+ padding: 8px 16px;
243
+ background: transparent;
244
+ border: none;
245
+ cursor: pointer;
246
+ color: var(--text2);
247
+ font-size: 14px;
248
+ transition: color 0.15s;
249
+ display: flex;
250
+ align-items: center;
251
+ }
252
+ .search-btn:hover { color: var(--text); }
253
+
254
+ /* ─── Buttons ─────────────────────────────────────────────────────────────── */
255
+ .btn {
256
+ display: inline-flex;
257
+ align-items: center;
258
+ gap: 5px;
259
+ padding: 6px 12px;
260
+ border-radius: var(--radius-sm);
261
+ border: 1px solid var(--border);
262
+ background: var(--bg2);
263
+ color: var(--text2);
264
+ font-size: 12px;
265
+ font-family: var(--font);
266
+ cursor: pointer;
267
+ transition: all 0.15s;
268
+ white-space: nowrap;
269
+ line-height: 1;
270
+ }
271
+ .btn:hover { border-color: #3a3a3a; color: var(--text); }
272
+
273
+ .btn-icon {
274
+ padding: 7px;
275
+ border-radius: var(--radius-sm);
276
+ border: 1px solid var(--border);
277
+ background: transparent;
278
+ color: var(--text3);
279
+ cursor: pointer;
280
+ display: inline-flex;
281
+ align-items: center;
282
+ transition: all 0.15s;
283
+ }
284
+ .btn-icon:hover { border-color: #3a3a3a; color: var(--text2); }
285
+
286
+ .btn-primary {
287
+ background: #1e1e3a;
288
+ border-color: rgba(109,40,217,0.4);
289
+ color: var(--ai-text2);
290
+ }
291
+ .btn-primary:hover { background: #25254a; color: var(--ai-text); border-color: rgba(109,40,217,0.6); }
292
+
293
+ /* ─── Language picker ─────────────────────────────────────────────────────── */
294
+ .lang-select {
295
+ appearance: none;
296
+ background: var(--bg4);
297
+ border: 1px solid var(--border);
298
+ color: var(--text2);
299
+ border-radius: var(--radius-sm);
300
+ font-size: 12px;
301
+ padding: 5px 24px 5px 8px;
302
+ outline: none;
303
+ cursor: pointer;
304
+ transition: border-color 0.15s, color 0.15s;
305
+ min-width: 80px;
306
+ }
307
+ .lang-select:hover { border-color: #3a3a3a; color: var(--text); }
308
+ .lang-wrap {
309
+ position: relative;
310
+ display: inline-flex;
311
+ align-items: center;
312
+ }
313
+ .lang-arrow {
314
+ position: absolute;
315
+ right: 6px;
316
+ pointer-events: none;
317
+ color: var(--text3);
318
+ }
319
+
320
+ /* ─── Results meta ────────────────────────────────────────────────────────── */
321
+ .results-meta {
322
+ font-size: 12px;
323
+ color: var(--text3);
324
+ margin-bottom: 20px;
325
+ display: flex;
326
+ align-items: center;
327
+ gap: 8px;
328
+ }
329
+
330
+ /* ─── Result item (Google-style) ──────────────────────────────────────────── */
331
+ .result-item {
332
+ max-width: 600px;
333
+ margin-bottom: 24px;
334
+ padding-bottom: 24px;
335
+ border-bottom: 1px solid var(--border2);
336
+ }
337
+ .result-item:last-child { border-bottom: none; margin-bottom: 0; }
338
+
339
+ .result-source {
340
+ display: flex;
341
+ align-items: center;
342
+ gap: 6px;
343
+ margin-bottom: 3px;
344
+ }
345
+ .result-favicon {
346
+ width: 16px;
347
+ height: 16px;
348
+ border-radius: 3px;
349
+ flex-shrink: 0;
350
+ }
351
+ .result-favicon-fallback {
352
+ background: #1f2937;
353
+ color: #9ca3af;
354
+ font-size: 10px;
355
+ font-weight: 700;
356
+ display: inline-flex;
357
+ align-items: center;
358
+ justify-content: center;
359
+ }
360
+ .result-favicon-placeholder {
361
+ width: 16px;
362
+ height: 16px;
363
+ border-radius: 3px;
364
+ background: #222;
365
+ flex-shrink: 0;
366
+ display: flex;
367
+ align-items: center;
368
+ justify-content: center;
369
+ }
370
+ .result-host {
371
+ font-size: 12px;
372
+ color: var(--text3);
373
+ white-space: nowrap;
374
+ overflow: hidden;
375
+ text-overflow: ellipsis;
376
+ }
377
+
378
+ .result-title {
379
+ font-size: 17px;
380
+ font-weight: 400;
381
+ color: var(--link);
382
+ line-height: 1.3;
383
+ margin-bottom: 3px;
384
+ display: block;
385
+ }
386
+ .result-title:hover { color: var(--link-h); text-decoration: underline; }
387
+
388
+ .result-url {
389
+ font-size: 12px;
390
+ color: var(--url);
391
+ margin-bottom: 4px;
392
+ white-space: nowrap;
393
+ overflow: hidden;
394
+ text-overflow: ellipsis;
395
+ max-width: 480px;
396
+ }
397
+
398
+ .result-snippet {
399
+ font-size: 14px;
400
+ color: var(--text2);
401
+ line-height: 1.6;
402
+ display: -webkit-box;
403
+ -webkit-line-clamp: 3;
404
+ -webkit-box-orient: vertical;
405
+ overflow: hidden;
406
+ }
407
+
408
+ .result-actions {
409
+ display: flex;
410
+ gap: 6px;
411
+ margin-top: 6px;
412
+ align-items: center;
413
+ }
414
+
415
+ .result-engine {
416
+ font-size: 10px;
417
+ color: var(--text3);
418
+ }
419
+
420
+ .result-badge {
421
+ display: inline-flex;
422
+ align-items: center;
423
+ padding: 1px 5px;
424
+ border-radius: 3px;
425
+ font-size: 9px;
426
+ font-weight: 600;
427
+ text-transform: uppercase;
428
+ letter-spacing: 0.04em;
429
+ }
430
+ .badge-torrent { background: rgba(92,50,6,0.25); color: var(--tor-text); border: 1px solid rgba(92,50,6,0.5); }
431
+ .badge-video { background: rgba(185,28,28,0.18); color: #f87171; border: 1px solid rgba(185,28,28,0.4); }
432
+ .badge-github { background: rgba(88,28,135,0.18); color: #c084fc; border: 1px solid rgba(88,28,135,0.4); }
433
+ .badge-reddit { background: rgba(154,52,18,0.18); color: #fb923c; border: 1px solid rgba(154,52,18,0.4); }
434
+
435
+ .magnet-btn {
436
+ display: inline-flex;
437
+ align-items: center;
438
+ gap: 4px;
439
+ padding: 3px 8px;
440
+ border-radius: var(--radius-xs);
441
+ border: 1px solid rgba(92,50,6,0.4);
442
+ background: rgba(92,50,6,0.12);
443
+ color: var(--tor-text);
444
+ font-size: 11px;
445
+ cursor: pointer;
446
+ transition: all 0.15s;
447
+ text-decoration: none;
448
+ }
449
+ .magnet-btn:hover { background: rgba(92,50,6,0.25); color: var(--tor-text); }
450
+
451
+ /* ─── Section panels ──────────────────────────────────────────────────────── */
452
+ .panel {
453
+ max-width: 600px;
454
+ border-radius: var(--radius);
455
+ padding: 16px;
456
+ margin-bottom: 20px;
457
+ }
458
+
459
+ /* AI panel */
460
+ .panel-ai {
461
+ background: var(--ai-bg);
462
+ border: 1px solid var(--ai-border);
463
+ }
464
+ .panel-ai .panel-header-label { color: var(--ai-text2); }
465
+ .panel-ai .panel-label { color: var(--ai-text); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
466
+ .ai-dots { display: flex; gap: 3px; align-items: center; }
467
+ .ai-dot { width: 6px; height: 6px; border-radius: 50%; }
468
+ .ai-dot.violet { background: #a78bfa; animation: pulse 1.4s ease-in-out 0ms infinite; }
469
+ .ai-dot.indigo { background: #818cf8; animation: pulse 1.4s ease-in-out 150ms infinite; }
470
+ .ai-dot.dim { background: #5b21b6; animation: pulse 1.4s ease-in-out 300ms infinite; }
471
+ .ai-dot.done { background: #34d399; animation: none; }
472
+ .ai-dot.error { background: #f87171; animation: none; }
473
+ .ai-content {
474
+ font-size: 14px;
475
+ color: #d1d5db;
476
+ line-height: 1.7;
477
+ white-space: pre-wrap;
478
+ margin-top: 10px;
479
+ }
480
+ .ai-meta { font-size: 11px; color: var(--text3); margin-top: 8px; }
481
+
482
+ /* Profiler panel */
483
+ .panel-profiler {
484
+ background: var(--prof-bg);
485
+ border: 1px solid var(--prof-border);
486
+ }
487
+ .panel-profiler .panel-label { color: var(--prof-text); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
488
+
489
+ .profile-card { display: flex; gap: 12px; margin-bottom: 16px; }
490
+ .profile-avatar {
491
+ width: 56px; height: 56px;
492
+ border-radius: 50%;
493
+ border: 1px solid #1a2a1a;
494
+ object-fit: cover;
495
+ flex-shrink: 0;
496
+ background: #111;
497
+ }
498
+ .profile-name { font-size: 14px; font-weight: 600; color: var(--text); }
499
+ .profile-name:hover { color: var(--prof-text); }
500
+ .profile-handle { font-size: 11px; color: var(--text3); margin-top: 1px; }
501
+ .profile-bio { font-size: 12px; color: var(--text2); margin-top: 6px; line-height: 1.5; }
502
+
503
+ .profile-stats { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 12px; border-top: 1px solid var(--prof-dim); }
504
+ .stat { display: flex; flex-direction: column; gap: 1px; }
505
+ .stat-val { font-size: 14px; font-weight: 700; color: var(--text); }
506
+ .stat-key { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; }
507
+
508
+ .section-title {
509
+ font-size: 10px;
510
+ color: #064e3b;
511
+ text-transform: uppercase;
512
+ letter-spacing: 0.08em;
513
+ margin-bottom: 8px;
514
+ margin-top: 14px;
515
+ padding-top: 14px;
516
+ border-top: 1px solid var(--prof-dim);
517
+ }
518
+
519
+ .repo-item {
520
+ display: flex;
521
+ align-items: center;
522
+ gap: 8px;
523
+ padding: 6px 10px;
524
+ border-radius: var(--radius-xs);
525
+ border: 1px solid #1a2a1a;
526
+ background: rgba(0,0,0,0.2);
527
+ margin-bottom: 4px;
528
+ text-decoration: none;
529
+ transition: all 0.15s;
530
+ }
531
+ .repo-item:hover { border-color: rgba(6,78,59,0.4); background: rgba(6,78,59,0.08); }
532
+ .repo-name { font-size: 13px; color: #d1d5db; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
533
+ .repo-lang { font-size: 10px; color: var(--text3); }
534
+ .repo-stars { font-size: 10px; color: #92400e; }
535
+ .repo-forks { font-size: 10px; color: var(--text3); }
536
+
537
+ .similar-grid { display: flex; flex-wrap: wrap; gap: 8px; }
538
+ .similar-item {
539
+ display: flex;
540
+ flex-direction: column;
541
+ align-items: center;
542
+ gap: 4px;
543
+ padding: 8px;
544
+ border-radius: var(--radius-xs);
545
+ border: 1px solid var(--border2);
546
+ background: rgba(0,0,0,0.2);
547
+ cursor: pointer;
548
+ transition: all 0.15s;
549
+ min-width: 60px;
550
+ }
551
+ .similar-item:hover { border-color: rgba(6,78,59,0.4); background: rgba(6,78,59,0.08); }
552
+ .similar-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #1a2a1a; }
553
+ .similar-handle { font-size: 10px; color: var(--text3); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
554
+
555
+ /* Platform colors */
556
+ .plat-github { color: #c084fc; }
557
+ .plat-bluesky { color: #38bdf8; }
558
+ .plat-reddit { color: #fb923c; }
559
+ .plat-twitter { color: #60a5fa; }
560
+ .plat-instagram{ color: #f472b6; }
561
+ .plat-linkedin { color: #22d3ee; }
562
+ .plat-youtube { color: #f87171; }
563
+ .plat-facebook { color: #60a5fa; }
564
+ .plat-telegram { color: #38bdf8; }
565
+ .plat-tiktok { color: #e879f9; }
566
+
567
+ /* Torrent panel */
568
+ .panel-torrent {
569
+ background: var(--tor-bg);
570
+ border: 1px solid var(--tor-border);
571
+ }
572
+ .panel-torrent .panel-label { color: var(--tor-text); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
573
+
574
+ .torrent-item {
575
+ display: flex;
576
+ align-items: center;
577
+ gap: 10px;
578
+ padding: 8px 0;
579
+ border-bottom: 1px solid rgba(92,50,6,0.15);
580
+ }
581
+ .torrent-item:last-child { border-bottom: none; }
582
+ .torrent-rank { font-size: 10px; font-family: var(--font-mono); color: #92400e; flex-shrink: 0; width: 20px; }
583
+ .torrent-info { flex: 1; min-width: 0; }
584
+ .torrent-title { font-size: 13px; color: #d1d5db; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
585
+ .torrent-meta { font-size: 10px; color: var(--tor-text); margin-top: 2px; display: flex; gap: 8px; }
586
+
587
+ /* Social panel */
588
+ .panel-social {
589
+ background: var(--soc-bg);
590
+ border: 1px solid var(--soc-border);
591
+ }
592
+ .panel-social .panel-label { color: var(--soc-text); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
593
+
594
+ /* ─── Panel header ────────────────────────────────────────────────────────── */
595
+ .panel-header {
596
+ display: flex;
597
+ align-items: center;
598
+ justify-content: space-between;
599
+ margin-bottom: 12px;
600
+ }
601
+ .panel-header-left { display: flex; align-items: center; gap: 8px; }
602
+
603
+ /* ─── Loading ─────────────────────────────────────────────────────────────── */
604
+ .loader {
605
+ display: flex;
606
+ align-items: center;
607
+ gap: 8px;
608
+ padding: 20px 0;
609
+ color: var(--text3);
610
+ font-size: 13px;
611
+ }
612
+
613
+ .skel {
614
+ border-radius: 4px;
615
+ background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%);
616
+ background-size: 400px 100%;
617
+ animation: skeletonShimmer 1.4s ease-in-out infinite;
618
+ }
619
+
620
+ /* ─── Settings ────────────────────────────────────────────────────────────── */
621
+ .main {
622
+ flex: 1;
623
+ max-width: 800px;
624
+ margin: 0 auto;
625
+ padding: 20px 16px;
626
+ width: 100%;
627
+ }
628
+
629
+ .settings-section {
630
+ background: var(--bg2);
631
+ border: 1px solid var(--border);
632
+ border-radius: var(--radius);
633
+ padding: 18px;
634
+ margin-bottom: 14px;
635
+ }
636
+ .settings-section h2 {
637
+ font-size: 11px;
638
+ font-weight: 700;
639
+ text-transform: uppercase;
640
+ letter-spacing: 0.07em;
641
+ color: var(--text3);
642
+ margin-bottom: 14px;
643
+ }
644
+
645
+ .form-group { margin-bottom: 12px; }
646
+ .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 5px; }
647
+ .form-input {
648
+ width: 100%; padding: 8px 10px;
649
+ background: #0d0d0d; border: 1px solid var(--border);
650
+ border-radius: var(--radius-xs); color: var(--text);
651
+ font-size: 13px; font-family: var(--font);
652
+ transition: border-color 0.15s;
653
+ }
654
+ .form-input:focus { outline: none; border-color: #444; }
655
+ .form-input::placeholder { color: var(--text3); }
656
+ .form-input[type="password"] { font-family: var(--font-mono); }
657
+ .form-hint { font-size: 11px; color: var(--text3); margin-top: 3px; }
658
+
659
+ .form-row {
660
+ display: flex; gap: 8px; align-items: flex-end;
661
+ }
662
+ .form-row .form-input { flex: 1; }
663
+
664
+ .toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
665
+ .toggle-label { font-size: 13px; color: var(--text); }
666
+
667
+ .toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
668
+ .toggle input { opacity: 0; width: 0; height: 0; }
669
+ .toggle-slider {
670
+ position: absolute; inset: 0;
671
+ background: #1a1a1a; border: 1px solid var(--border);
672
+ border-radius: 20px; cursor: pointer; transition: 0.2s;
673
+ }
674
+ .toggle-slider::before {
675
+ content: ''; position: absolute;
676
+ width: 12px; height: 12px;
677
+ left: 3px; top: 50%;
678
+ transform: translateY(-50%);
679
+ background: var(--text3); border-radius: 50%; transition: 0.2s;
680
+ }
681
+ .toggle input:checked + .toggle-slider { background: #1e1e3a; border-color: rgba(109,40,217,0.5); }
682
+ .toggle input:checked + .toggle-slider::before { transform: translateX(16px) translateY(-50%); background: var(--ai-text2); }
683
+
684
+ /* ─── Alerts ──────────────────────────────────────────────────────────────── */
685
+ .alert {
686
+ padding: 9px 12px;
687
+ border-radius: var(--radius-xs);
688
+ font-size: 12px;
689
+ margin-top: 8px;
690
+ }
691
+ .alert-ok { background: rgba(6,78,59,0.15); color: #34d399; border: 1px solid rgba(6,78,59,0.35); }
692
+ .alert-err { background: rgba(127,29,29,0.15); color: #f87171; border: 1px solid rgba(127,29,29,0.4); }
693
+ .alert-info { background: rgba(30,27,75,0.3); color: var(--ai-text2); border: 1px solid rgba(109,40,217,0.25); }
694
+
695
+ /* ─── Provider badges ─────────────────────────────────────────────────────── */
696
+ .provider-badge {
697
+ display: inline-flex; align-items: center; gap: 3px;
698
+ padding: 2px 7px; border-radius: 99px;
699
+ font-size: 10px; font-weight: 600;
700
+ background: #111; color: var(--text3); border: 1px solid var(--border);
701
+ }
702
+ .provider-badge.active { color: #34d399; border-color: rgba(6,78,59,0.4); background: rgba(6,78,59,0.1); }
703
+
704
+ /* ─── Info rows ───────────────────────────────────────────────────────────── */
705
+ .info-row {
706
+ display: flex; justify-content: space-between; align-items: center;
707
+ padding: 5px 0; font-size: 12px;
708
+ border-bottom: 1px solid var(--border2);
709
+ }
710
+ .info-row:last-child { border-bottom: none; }
711
+ .info-key { color: var(--text3); }
712
+ .info-val { color: var(--text2); font-family: var(--font-mono); font-size: 11px; }
713
+
714
+ /* ─── Status dot (autostart) ──────────────────────────────────────────────── */
715
+ .status-dot {
716
+ display: inline-block; width: 8px; height: 8px;
717
+ border-radius: 50%; flex-shrink: 0;
718
+ }
719
+ .status-dot.on { background: var(--prof-text); }
720
+ .status-dot.off { background: var(--text3); }
721
+
722
+ /* ─── No results ──────────────────────────────────────────────────────────── */
723
+ .no-results { text-align: center; padding: 40px 20px; color: var(--text3); font-size: 14px; }
724
+
725
+ /* ─── Footer ──────────────────────────────────────────────────────────────── */
726
+ .footer {
727
+ border-top: 1px solid var(--border2);
728
+ padding: 12px 16px;
729
+ display: flex;
730
+ align-items: center;
731
+ justify-content: center;
732
+ gap: 16px;
733
+ }
734
+ .footer-link {
735
+ color: var(--text3);
736
+ font-size: 10px;
737
+ display: flex;
738
+ align-items: center;
739
+ gap: 4px;
740
+ transition: color 0.15s;
741
+ }
742
+ .footer-link:hover { color: var(--text2); }
743
+
744
+ /* ─── Responsive ──────────────────────────────────────────────────────────── */
745
+ @media (max-width: 640px) {
746
+ .header { padding: 8px 12px; gap: 8px; }
747
+ .category-tabs { top: 48px; padding: 7px 12px 9px; gap: 5px; }
748
+ .cat-tab { font-size: 10px; padding: 4px 8px; }
749
+ .logo-text { font-size: 15px; }
750
+ .home-logo { font-size: 40px; }
751
+ .result-title { font-size: 15px; }
752
+ .settings-section { padding: 14px; }
753
+ .form-row { flex-direction: column; }
754
+ .form-row .btn { width: 100%; justify-content: center; }
755
+ .panel { padding: 12px; }
756
+ }