@jjlmoya/utils-games-development 1.65.0 → 1.67.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 (77) hide show
  1. package/package.json +67 -67
  2. package/scripts/postinstall.mjs +27 -27
  3. package/src/category/GamesCategorySEO.astro +19 -19
  4. package/src/category/i18n/de.ts +15 -15
  5. package/src/category/i18n/en.ts +15 -15
  6. package/src/category/i18n/es.ts +15 -15
  7. package/src/category/i18n/fr.ts +15 -15
  8. package/src/category/i18n/id.ts +10 -10
  9. package/src/category/i18n/it.ts +10 -10
  10. package/src/category/i18n/ja.ts +10 -10
  11. package/src/category/i18n/ko.ts +10 -10
  12. package/src/category/i18n/nl.ts +10 -10
  13. package/src/category/i18n/pl.ts +10 -10
  14. package/src/category/i18n/pt.ts +10 -10
  15. package/src/category/i18n/ru.ts +10 -10
  16. package/src/category/i18n/sv.ts +10 -10
  17. package/src/category/i18n/tr.ts +10 -10
  18. package/src/category/i18n/zh.ts +10 -10
  19. package/src/category/seo.astro +15 -15
  20. package/src/components/PreviewNavSidebar.astro +116 -116
  21. package/src/components/PreviewToolbar.astro +143 -143
  22. package/src/data.ts +11 -11
  23. package/src/env.d.ts +5 -5
  24. package/src/index.ts +20 -20
  25. package/src/layouts/PreviewLayout.astro +122 -122
  26. package/src/pages/[locale]/[slug].astro +165 -165
  27. package/src/pages/[locale].astro +250 -250
  28. package/src/pages/index.astro +4 -4
  29. package/src/tests/bibliography_wellformed_export.test.ts +46 -0
  30. package/src/tests/category_seo_quality.test.ts +74 -0
  31. package/src/tests/diacritics_density.test.ts +118 -118
  32. package/src/tests/faq_count.test.ts +19 -19
  33. package/src/tests/i18n_coverage.test.ts +36 -36
  34. package/src/tests/inverted_punctuation.test.ts +84 -84
  35. package/src/tests/mocks/astro_mock.js +2 -2
  36. package/src/tests/no_en_dash.test.ts +70 -70
  37. package/src/tests/no_h1_in_components.test.ts +48 -48
  38. package/src/tests/pagespeed_best_practices.test.ts +198 -198
  39. package/src/tests/qa-test-helpers.ts +32 -32
  40. package/src/tests/qa_bibliography_links.test.ts +41 -41
  41. package/src/tests/qa_claim_evidence.test.ts +69 -69
  42. package/src/tests/qa_logic_reference_coverage.test.ts +46 -46
  43. package/src/tests/qa_runtime_i18n.test.ts +100 -100
  44. package/src/tests/schemas_fulfillment.test.ts +23 -23
  45. package/src/tests/script_density.test.ts +94 -94
  46. package/src/tests/seo_length.test.ts +23 -23
  47. package/src/tests/seo_wellformed_export.test.ts +65 -0
  48. package/src/tests/slug_language_code_format.test.ts +23 -23
  49. package/src/tests/slug_uniqueness.test.ts +80 -80
  50. package/src/tests/title_quality.test.ts +56 -56
  51. package/src/tool/audioLoopPointFinder/audio-loop-point-finder.css +322 -322
  52. package/src/tool/audioLoopPointFinder/client.ts +262 -262
  53. package/src/tool/damageFormulaLab/bibliography.astro +3 -21
  54. package/src/tool/damageFormulaLab/seo.astro +7 -5
  55. package/src/tool/gameDeltaTimeFixedTimestepLab/bibliography.astro +3 -19
  56. package/src/tool/hitboxHurtboxAnimator/hitbox-hurtbox-animator.css +614 -614
  57. package/src/tool/hitboxHurtboxAnimator/seo.astro +7 -5
  58. package/src/tool/saveFileEditor/component.astro +351 -351
  59. package/src/tool/saveFileEditor/game-save-file-editor.css +250 -250
  60. package/src/tool/spriteSheetPacker/app-client.ts +248 -248
  61. package/src/tool/spriteSheetPacker/bibliography.ts +12 -12
  62. package/src/tool/spriteSheetPacker/component.astro +229 -229
  63. package/src/tool/spriteSheetPacker/dropzone-client.ts +55 -55
  64. package/src/tool/spriteSheetPacker/entry.ts +28 -28
  65. package/src/tool/spriteSheetPacker/exporter.ts +116 -116
  66. package/src/tool/spriteSheetPacker/extractor-client.ts +127 -127
  67. package/src/tool/spriteSheetPacker/flipbook-client.ts +60 -60
  68. package/src/tool/spriteSheetPacker/logic.test.ts +155 -155
  69. package/src/tool/spriteSheetPacker/logic.ts +32 -32
  70. package/src/tool/spriteSheetPacker/packer-core.ts +121 -121
  71. package/src/tool/spriteSheetPacker/packer-ui.ts +86 -86
  72. package/src/tool/spriteSheetPacker/sprite-sheet-packer.css +578 -578
  73. package/src/tool/spriteSheetPacker/types.ts +89 -89
  74. package/src/tool/spriteSheetPacker/ui.ts +42 -42
  75. package/src/tool/steamCapsuleGenerator/index.ts +9 -9
  76. package/src/tool/steamCapsuleGenerator/validation.ts +14 -14
  77. package/src/types.ts +72 -72
package/src/tool/audioLoopPointFinder/audio-loop-point-finder.css CHANGED
@@ -1,322 +1,322 @@
1
- .alpf-main-card {
2
- background: var(--bg-surface, #fff);
3
- color: var(--text-base, #0f172a);
4
- border: 1px solid var(--border-base, #e2e8f0);
5
- border-radius: 1.25rem;
6
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
7
- padding: 1.75rem;
8
- display: flex;
9
- flex-direction: column;
10
- gap: 1.5rem;
11
- position: relative;
12
- overflow: hidden;
13
- transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
14
- }
15
-
16
- .theme-dark .alpf-main-card {
17
- background: var(--bg-surface, #0f172a);
18
- color: var(--text-base, #f8fafc);
19
- border-color: var(--border-base, #1e293b);
20
- box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
21
- }
22
-
23
- .alpf-dropzone {
24
- border: 2px dashed var(--border-base, #cbd5e1);
25
- border-radius: 1rem;
26
- padding: 2.5rem 1.5rem;
27
- text-align: center;
28
- background: rgba(241, 245, 249, 0.4);
29
- cursor: pointer;
30
- transition: all 0.2s ease;
31
- display: flex;
32
- flex-direction: column;
33
- align-items: center;
34
- gap: 0.75rem;
35
- }
36
-
37
- .theme-dark .alpf-dropzone {
38
- border-color: var(--border-base, #334155);
39
- background: rgba(30, 41, 59, 0.3);
40
- }
41
-
42
- .alpf-dropzone:hover,
43
- .alpf-dropzone.drag-over {
44
- border-color: var(--accent-base, #6366f1);
45
- background: rgba(99, 102, 241, 0.06);
46
- transform: translateY(-2px);
47
- }
48
-
49
- .alpf-dropzone-icon {
50
- width: 3rem;
51
- height: 3rem;
52
- color: var(--accent-base, #6366f1);
53
- }
54
-
55
- .alpf-dropzone-title {
56
- font-size: 1.125rem;
57
- font-weight: 600;
58
- }
59
-
60
- .alpf-dropzone-subtitle {
61
- font-size: 0.875rem;
62
- opacity: 0.7;
63
- }
64
-
65
- .alpf-file-input {
66
- display: none;
67
- }
68
-
69
- .alpf-btn {
70
- display: inline-flex;
71
- align-items: center;
72
- justify-content: center;
73
- gap: 0.5rem;
74
- padding: 0.625rem 1.25rem;
75
- font-weight: 600;
76
- font-size: 0.9375rem;
77
- border-radius: 0.625rem;
78
- border: none;
79
- cursor: pointer;
80
- transition: all 0.15s ease;
81
- user-select: none;
82
- }
83
-
84
- .alpf-btn-primary {
85
- background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
86
- color: var(--text-inverse, #fff);
87
- box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
88
- }
89
-
90
- .alpf-btn-primary:hover {
91
- background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
92
- box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
93
- transform: translateY(-1px);
94
- }
95
-
96
- .alpf-btn-primary:active {
97
- transform: translateY(0);
98
- }
99
-
100
- .alpf-btn-secondary {
101
- background: var(--bg-muted, #f1f5f9);
102
- color: var(--text-base, #334155);
103
- border: 1px solid var(--border-base, #cbd5e1);
104
- }
105
-
106
- .theme-dark .alpf-btn-secondary {
107
- background: var(--bg-muted, #1e293b);
108
- color: var(--text-base, #e2e8f0);
109
- border-color: var(--border-base, #334155);
110
- }
111
-
112
- .alpf-btn-secondary:hover {
113
- border-color: var(--accent-base, #6366f1);
114
- color: var(--accent-base, #6366f1);
115
- }
116
-
117
- .alpf-btn-success {
118
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
119
- color: var(--text-inverse, #fff);
120
- box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
121
- }
122
-
123
- .alpf-btn-success:hover {
124
- background: linear-gradient(135deg, #059669 0%, #047857 100%);
125
- box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
126
- transform: translateY(-1px);
127
- }
128
-
129
- .alpf-workspace {
130
- display: flex;
131
- flex-direction: column;
132
- gap: 1.5rem;
133
- }
134
-
135
- .alpf-stats-grid {
136
- display: grid;
137
- grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
138
- gap: 1rem;
139
- }
140
-
141
- .alpf-stat-card {
142
- background: var(--bg-muted, #f8fafc);
143
- border: 1px solid var(--border-base, #e2e8f0);
144
- border-radius: 0.75rem;
145
- padding: 0.875rem 1rem;
146
- display: flex;
147
- flex-direction: column;
148
- gap: 0.25rem;
149
- }
150
-
151
- .theme-dark .alpf-stat-card {
152
- background: var(--bg-muted, #1e293b);
153
- border-color: var(--border-base, #334155);
154
- }
155
-
156
- .alpf-stat-label {
157
- font-size: 0.75rem;
158
- text-transform: uppercase;
159
- letter-spacing: 0.05em;
160
- opacity: 0.7;
161
- }
162
-
163
- .alpf-stat-value {
164
- font-size: 1.125rem;
165
- font-weight: 700;
166
- color: var(--accent-base, #6366f1);
167
- }
168
-
169
- .theme-dark .alpf-stat-value {
170
- color: var(--accent-light, #818cf8);
171
- }
172
-
173
- .alpf-waveform-container {
174
- position: relative;
175
- background: #020617;
176
- border-radius: 0.875rem;
177
- border: 1px solid var(--border-base, #334155);
178
- padding: 0.5rem;
179
- overflow: hidden;
180
- box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
181
- }
182
-
183
- .alpf-waveform-canvas {
184
- width: 100%;
185
- height: 180px;
186
- display: block;
187
- cursor: crosshair;
188
- }
189
-
190
- .alpf-toolbar {
191
- display: flex;
192
- flex-wrap: wrap;
193
- align-items: center;
194
- justify-content: space-between;
195
- gap: 1rem;
196
- padding: 0.75rem;
197
- background: var(--bg-muted, #f8fafc);
198
- border: 1px solid var(--border-base, #e2e8f0);
199
- border-radius: 0.75rem;
200
- }
201
-
202
- .theme-dark .alpf-toolbar {
203
- background: var(--bg-muted, #1e293b);
204
- border-color: var(--border-base, #334155);
205
- }
206
-
207
- .alpf-controls-group {
208
- display: flex;
209
- align-items: center;
210
- gap: 0.75rem;
211
- flex-wrap: wrap;
212
- }
213
-
214
- .alpf-marker-inputs {
215
- display: grid;
216
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
217
- gap: 1.25rem;
218
- }
219
-
220
- .alpf-input-field {
221
- display: flex;
222
- flex-direction: column;
223
- gap: 0.375rem;
224
- }
225
-
226
- .alpf-label {
227
- font-size: 0.875rem;
228
- font-weight: 600;
229
- }
230
-
231
- .alpf-input-row {
232
- display: flex;
233
- align-items: center;
234
- gap: 0.5rem;
235
- }
236
-
237
- .alpf-input {
238
- width: 100%;
239
- padding: 0.5rem 0.75rem;
240
- border-radius: 0.5rem;
241
- border: 1px solid var(--border-base, #cbd5e1);
242
- background: var(--bg-surface, #fff);
243
- color: var(--text-base, #0f172a);
244
- font-size: 0.9375rem;
245
- }
246
-
247
- .theme-dark .alpf-input {
248
- border-color: var(--border-base, #334155);
249
- background: var(--bg-surface, #0f172a);
250
- color: var(--text-base, #f8fafc);
251
- }
252
-
253
- .alpf-input:focus {
254
- outline: none;
255
- border-color: var(--accent-base, #6366f1);
256
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
257
- }
258
-
259
- .alpf-preset-chips {
260
- display: flex;
261
- align-items: center;
262
- gap: 0.5rem;
263
- flex-wrap: wrap;
264
- }
265
-
266
- .alpf-chip {
267
- padding: 0.375rem 0.75rem;
268
- border-radius: 9999px;
269
- font-size: 0.8125rem;
270
- font-weight: 600;
271
- border: 1px solid var(--border-base, #cbd5e1);
272
- background: var(--bg-surface, #fff);
273
- color: var(--text-base, #475569);
274
- cursor: pointer;
275
- transition: all 0.15s ease;
276
- }
277
-
278
- .theme-dark .alpf-chip {
279
- border-color: var(--border-base, #334155);
280
- background: var(--bg-surface, #1e293b);
281
- color: var(--text-base, #94a3b8);
282
- }
283
-
284
- .alpf-chip:hover {
285
- border-color: var(--accent-base, #6366f1);
286
- color: var(--accent-base, #6366f1);
287
- transform: translateY(-1px);
288
- }
289
-
290
- .alpf-status-bar {
291
- display: flex;
292
- align-items: center;
293
- justify-content: space-between;
294
- font-size: 0.875rem;
295
- padding: 0.5rem 0.75rem;
296
- border-radius: 0.5rem;
297
- background: var(--bg-muted, #f1f5f9);
298
- }
299
-
300
- .theme-dark .alpf-status-bar {
301
- background: var(--bg-muted, #1e293b);
302
- }
303
-
304
- .alpf-particle {
305
- position: absolute;
306
- pointer-events: none;
307
- font-weight: bold;
308
- font-size: 0.875rem;
309
- color: var(--accent-base, #6366f1);
310
- animation: alpf-particle-float 0.8s ease-out forwards;
311
- }
312
-
313
- @keyframes alpf-particle-float {
314
- 0% {
315
- opacity: 1;
316
- transform: translate(0, 0) scale(1);
317
- }
318
- 100% {
319
- opacity: 0;
320
- transform: translate(0, -30px) scale(1.3);
321
- }
322
- }
1
+ .alpf-main-card {
2
+ background: var(--bg-surface, #fff);
3
+ color: var(--text-base, #0f172a);
4
+ border: 1px solid var(--border-base, #e2e8f0);
5
+ border-radius: 1.25rem;
6
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
7
+ padding: 1.75rem;
8
+ display: flex;
9
+ flex-direction: column;
10
+ gap: 1.5rem;
11
+ position: relative;
12
+ overflow: hidden;
13
+ transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
14
+ }
15
+
16
+ .theme-dark .alpf-main-card {
17
+ background: var(--bg-surface, #0f172a);
18
+ color: var(--text-base, #f8fafc);
19
+ border-color: var(--border-base, #1e293b);
20
+ box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
21
+ }
22
+
23
+ .alpf-dropzone {
24
+ border: 2px dashed var(--border-base, #cbd5e1);
25
+ border-radius: 1rem;
26
+ padding: 2.5rem 1.5rem;
27
+ text-align: center;
28
+ background: rgba(241, 245, 249, 0.4);
29
+ cursor: pointer;
30
+ transition: all 0.2s ease;
31
+ display: flex;
32
+ flex-direction: column;
33
+ align-items: center;
34
+ gap: 0.75rem;
35
+ }
36
+
37
+ .theme-dark .alpf-dropzone {
38
+ border-color: var(--border-base, #334155);
39
+ background: rgba(30, 41, 59, 0.3);
40
+ }
41
+
42
+ .alpf-dropzone:hover,
43
+ .alpf-dropzone.drag-over {
44
+ border-color: var(--accent-base, #6366f1);
45
+ background: rgba(99, 102, 241, 0.06);
46
+ transform: translateY(-2px);
47
+ }
48
+
49
+ .alpf-dropzone-icon {
50
+ width: 3rem;
51
+ height: 3rem;
52
+ color: var(--accent-base, #6366f1);
53
+ }
54
+
55
+ .alpf-dropzone-title {
56
+ font-size: 1.125rem;
57
+ font-weight: 600;
58
+ }
59
+
60
+ .alpf-dropzone-subtitle {
61
+ font-size: 0.875rem;
62
+ opacity: 0.7;
63
+ }
64
+
65
+ .alpf-file-input {
66
+ display: none;
67
+ }
68
+
69
+ .alpf-btn {
70
+ display: inline-flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ gap: 0.5rem;
74
+ padding: 0.625rem 1.25rem;
75
+ font-weight: 600;
76
+ font-size: 0.9375rem;
77
+ border-radius: 0.625rem;
78
+ border: none;
79
+ cursor: pointer;
80
+ transition: all 0.15s ease;
81
+ user-select: none;
82
+ }
83
+
84
+ .alpf-btn-primary {
85
+ background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
86
+ color: var(--text-inverse, #fff);
87
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
88
+ }
89
+
90
+ .alpf-btn-primary:hover {
91
+ background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
92
+ box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
93
+ transform: translateY(-1px);
94
+ }
95
+
96
+ .alpf-btn-primary:active {
97
+ transform: translateY(0);
98
+ }
99
+
100
+ .alpf-btn-secondary {
101
+ background: var(--bg-muted, #f1f5f9);
102
+ color: var(--text-base, #334155);
103
+ border: 1px solid var(--border-base, #cbd5e1);
104
+ }
105
+
106
+ .theme-dark .alpf-btn-secondary {
107
+ background: var(--bg-muted, #1e293b);
108
+ color: var(--text-base, #e2e8f0);
109
+ border-color: var(--border-base, #334155);
110
+ }
111
+
112
+ .alpf-btn-secondary:hover {
113
+ border-color: var(--accent-base, #6366f1);
114
+ color: var(--accent-base, #6366f1);
115
+ }
116
+
117
+ .alpf-btn-success {
118
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
119
+ color: var(--text-inverse, #fff);
120
+ box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
121
+ }
122
+
123
+ .alpf-btn-success:hover {
124
+ background: linear-gradient(135deg, #059669 0%, #047857 100%);
125
+ box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
126
+ transform: translateY(-1px);
127
+ }
128
+
129
+ .alpf-workspace {
130
+ display: flex;
131
+ flex-direction: column;
132
+ gap: 1.5rem;
133
+ }
134
+
135
+ .alpf-stats-grid {
136
+ display: grid;
137
+ grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
138
+ gap: 1rem;
139
+ }
140
+
141
+ .alpf-stat-card {
142
+ background: var(--bg-muted, #f8fafc);
143
+ border: 1px solid var(--border-base, #e2e8f0);
144
+ border-radius: 0.75rem;
145
+ padding: 0.875rem 1rem;
146
+ display: flex;
147
+ flex-direction: column;
148
+ gap: 0.25rem;
149
+ }
150
+
151
+ .theme-dark .alpf-stat-card {
152
+ background: var(--bg-muted, #1e293b);
153
+ border-color: var(--border-base, #334155);
154
+ }
155
+
156
+ .alpf-stat-label {
157
+ font-size: 0.75rem;
158
+ text-transform: uppercase;
159
+ letter-spacing: 0.05em;
160
+ opacity: 0.7;
161
+ }
162
+
163
+ .alpf-stat-value {
164
+ font-size: 1.125rem;
165
+ font-weight: 700;
166
+ color: var(--accent-base, #6366f1);
167
+ }
168
+
169
+ .theme-dark .alpf-stat-value {
170
+ color: var(--accent-light, #818cf8);
171
+ }
172
+
173
+ .alpf-waveform-container {
174
+ position: relative;
175
+ background: #020617;
176
+ border-radius: 0.875rem;
177
+ border: 1px solid var(--border-base, #334155);
178
+ padding: 0.5rem;
179
+ overflow: hidden;
180
+ box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
181
+ }
182
+
183
+ .alpf-waveform-canvas {
184
+ width: 100%;
185
+ height: 180px;
186
+ display: block;
187
+ cursor: crosshair;
188
+ }
189
+
190
+ .alpf-toolbar {
191
+ display: flex;
192
+ flex-wrap: wrap;
193
+ align-items: center;
194
+ justify-content: space-between;
195
+ gap: 1rem;
196
+ padding: 0.75rem;
197
+ background: var(--bg-muted, #f8fafc);
198
+ border: 1px solid var(--border-base, #e2e8f0);
199
+ border-radius: 0.75rem;
200
+ }
201
+
202
+ .theme-dark .alpf-toolbar {
203
+ background: var(--bg-muted, #1e293b);
204
+ border-color: var(--border-base, #334155);
205
+ }
206
+
207
+ .alpf-controls-group {
208
+ display: flex;
209
+ align-items: center;
210
+ gap: 0.75rem;
211
+ flex-wrap: wrap;
212
+ }
213
+
214
+ .alpf-marker-inputs {
215
+ display: grid;
216
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
217
+ gap: 1.25rem;
218
+ }
219
+
220
+ .alpf-input-field {
221
+ display: flex;
222
+ flex-direction: column;
223
+ gap: 0.375rem;
224
+ }
225
+
226
+ .alpf-label {
227
+ font-size: 0.875rem;
228
+ font-weight: 600;
229
+ }
230
+
231
+ .alpf-input-row {
232
+ display: flex;
233
+ align-items: center;
234
+ gap: 0.5rem;
235
+ }
236
+
237
+ .alpf-input {
238
+ width: 100%;
239
+ padding: 0.5rem 0.75rem;
240
+ border-radius: 0.5rem;
241
+ border: 1px solid var(--border-base, #cbd5e1);
242
+ background: var(--bg-surface, #fff);
243
+ color: var(--text-base, #0f172a);
244
+ font-size: 0.9375rem;
245
+ }
246
+
247
+ .theme-dark .alpf-input {
248
+ border-color: var(--border-base, #334155);
249
+ background: var(--bg-surface, #0f172a);
250
+ color: var(--text-base, #f8fafc);
251
+ }
252
+
253
+ .alpf-input:focus {
254
+ outline: none;
255
+ border-color: var(--accent-base, #6366f1);
256
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
257
+ }
258
+
259
+ .alpf-preset-chips {
260
+ display: flex;
261
+ align-items: center;
262
+ gap: 0.5rem;
263
+ flex-wrap: wrap;
264
+ }
265
+
266
+ .alpf-chip {
267
+ padding: 0.375rem 0.75rem;
268
+ border-radius: 9999px;
269
+ font-size: 0.8125rem;
270
+ font-weight: 600;
271
+ border: 1px solid var(--border-base, #cbd5e1);
272
+ background: var(--bg-surface, #fff);
273
+ color: var(--text-base, #475569);
274
+ cursor: pointer;
275
+ transition: all 0.15s ease;
276
+ }
277
+
278
+ .theme-dark .alpf-chip {
279
+ border-color: var(--border-base, #334155);
280
+ background: var(--bg-surface, #1e293b);
281
+ color: var(--text-base, #94a3b8);
282
+ }
283
+
284
+ .alpf-chip:hover {
285
+ border-color: var(--accent-base, #6366f1);
286
+ color: var(--accent-base, #6366f1);
287
+ transform: translateY(-1px);
288
+ }
289
+
290
+ .alpf-status-bar {
291
+ display: flex;
292
+ align-items: center;
293
+ justify-content: space-between;
294
+ font-size: 0.875rem;
295
+ padding: 0.5rem 0.75rem;
296
+ border-radius: 0.5rem;
297
+ background: var(--bg-muted, #f1f5f9);
298
+ }
299
+
300
+ .theme-dark .alpf-status-bar {
301
+ background: var(--bg-muted, #1e293b);
302
+ }
303
+
304
+ .alpf-particle {
305
+ position: absolute;
306
+ pointer-events: none;
307
+ font-weight: bold;
308
+ font-size: 0.875rem;
309
+ color: var(--accent-base, #6366f1);
310
+ animation: alpf-particle-float 0.8s ease-out forwards;
311
+ }
312
+
313
+ @keyframes alpf-particle-float {
314
+ 0% {
315
+ opacity: 1;
316
+ transform: translate(0, 0) scale(1);
317
+ }
318
+ 100% {
319
+ opacity: 0;
320
+ transform: translate(0, -30px) scale(1.3);
321
+ }
322
+ }