@jjlmoya/utils-cooking 1.22.0 → 1.24.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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/tool/cookware-guide/cookware-selector.css +462 -439
  3. package/src/tool/ingredient-rescaler/recipe-ingredient-scaler-converter-servings.css +289 -268
  4. package/src/tool/roux-guide/roux-ratio-calculator-thickening-sauce-guide.css +468 -446
package/src/tool/cookware-guide/cookware-selector.css CHANGED
@@ -1,450 +1,473 @@
1
- .cw-container {
2
- width: 100%;
3
- max-width: 100%;
4
- padding: 1rem;
5
- }
6
-
7
- .cw-card {
8
- background: var(--cw-bg-card);
9
- border: 1px solid var(--cw-border);
10
- border-radius: var(--cw-radius);
11
- box-shadow: var(--cw-shadow-xl);
12
- overflow: hidden;
13
- transition: all 0.3s ease;
14
- }
15
-
16
- .cw-progress-bar {
17
- height: 0.375rem;
18
- width: 0%;
19
- background: linear-gradient(to right, var(--cw-primary), hsl(270deg, 94%, 60%));
20
- transition: width 0.5s ease;
21
- }
1
+ :root {
2
+ --cw-primary: hsl(240deg, 94%, 60%);
3
+ --cw-primary-light: hsl(240deg, 100%, 95%);
4
+ --cw-bg-card: hsl(0deg, 0%, 100%);
5
+ --cw-bg-app: hsl(210deg, 40%, 98%);
6
+ --cw-border: hsl(210deg, 14%, 89%);
7
+ --cw-text-main: hsl(210deg, 40%, 14%);
8
+ --cw-text-muted: hsl(210deg, 8%, 40%);
9
+ --cw-text-light: hsl(210deg, 40%, 98%);
10
+ --cw-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
11
+ --cw-radius: 1.5rem;
12
+ }
13
+
14
+ .theme-dark {
15
+ --cw-bg-card: hsl(217deg, 33%, 12%);
16
+ --cw-bg-app: hsl(217deg, 39%, 8%);
17
+ --cw-border: hsl(217deg, 33%, 25%);
18
+ --cw-text-main: hsl(210deg, 40%, 98%);
19
+ --cw-text-muted: hsl(210deg, 14%, 75%);
20
+ --cw-text-light: hsl(210deg, 40%, 98%);
21
+ --cw-primary-light: hsl(240deg, 100%, 20%);
22
+ }
22
23
 
24
+ .cw-container {
25
+ width: 100%;
26
+ max-width: 100%;
27
+ padding: 1rem;
28
+ }
29
+
30
+ .cw-card {
31
+ background: var(--cw-bg-card);
32
+ border: 1px solid var(--cw-border);
33
+ border-radius: var(--cw-radius);
34
+ box-shadow: var(--cw-shadow-xl);
35
+ overflow: hidden;
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .cw-progress-bar {
40
+ height: 0.375rem;
41
+ width: 0%;
42
+ background: linear-gradient(to right, var(--cw-primary), hsl(270deg, 94%, 60%));
43
+ transition: width 0.5s ease;
44
+ }
45
+
46
+ .cw-content {
47
+ padding: 2rem;
48
+ }
49
+
50
+ @media (max-width: 1024px) {
23
51
  .cw-content {
24
- padding: 2rem;
52
+ padding: 1.5rem;
25
53
  }
54
+ }
26
55
 
27
- @media (max-width: 1024px) {
28
- .cw-content {
29
- padding: 1.5rem;
30
- }
56
+ @media (max-width: 640px) {
57
+ .cw-content {
58
+ padding: 1rem;
31
59
  }
60
+ }
32
61
 
33
- @media (max-width: 640px) {
34
- .cw-content {
35
- padding: 1rem;
36
- }
37
- }
62
+ .cw-grid {
63
+ display: grid;
64
+ grid-template-columns: 1fr;
65
+ gap: 2rem;
66
+ }
38
67
 
68
+ @media (min-width: 1024px) {
39
69
  .cw-grid {
40
- display: grid;
41
- grid-template-columns: 1fr;
42
- gap: 2rem;
43
- }
44
-
45
- @media (min-width: 1024px) {
46
- .cw-grid {
47
- grid-template-columns: 1.4fr 1fr;
48
- gap: 2rem;
49
- }
50
- }
51
-
52
- .cw-left {
53
- display: flex;
54
- flex-direction: column;
70
+ grid-template-columns: 1.4fr 1fr;
55
71
  gap: 2rem;
56
72
  }
57
-
58
- .cw-right {
59
- display: flex;
60
- flex-direction: column;
61
- gap: 1.5rem;
62
- }
63
-
64
- .cw-section {
65
- display: flex;
66
- flex-direction: column;
67
- gap: 1rem;
68
- }
69
-
70
- .cw-step-label {
71
- display: flex;
72
- align-items: center;
73
- gap: 0.75rem;
74
- font-size: 0.625rem;
75
- font-weight: 900;
76
- color: var(--cw-text-muted);
77
- text-transform: uppercase;
78
- letter-spacing: 0.2em;
79
- }
80
-
81
- .cw-step-number {
82
- display: flex;
83
- align-items: center;
84
- justify-content: center;
85
- width: 1.25rem;
86
- height: 1.25rem;
87
- border-radius: 50%;
88
- background: var(--cw-primary-light);
89
- color: var(--cw-primary);
90
- font-weight: 900;
91
- font-size: 0.625rem;
92
- flex-shrink: 0;
93
- }
94
-
95
- .theme-dark .cw-step-number {
96
- background: hsl(240deg, 100%, 20%);
97
- }
98
-
99
- .cw-style-grid {
100
- display: grid;
101
- grid-template-columns: repeat(2, 1fr);
102
- gap: 0.75rem;
103
- }
104
-
105
- .cw-style-btn {
106
- display: flex;
107
- flex-direction: column;
108
- align-items: flex-start;
109
- gap: 0.5rem;
110
- padding: 1rem;
111
- border: 2px solid var(--cw-border);
112
- border-radius: 0.75rem;
113
- background: var(--cw-bg-card);
114
- color: var(--cw-text-muted);
115
- cursor: pointer;
116
- transition: all 0.3s ease;
117
- text-align: left;
118
- font-size: inherit;
119
- }
120
-
121
- .cw-style-btn:hover {
122
- border-color: var(--cw-primary-light);
123
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
124
- }
125
-
126
- .cw-style-btn.active {
127
- background: var(--cw-primary-light);
128
- border-color: var(--cw-primary);
129
- color: var(--cw-primary);
130
- }
131
-
132
- .theme-dark .cw-style-btn.active {
133
- background: hsl(240deg, 100%, 35%);
134
- color: hsl(0deg, 0%, 100%);
135
- }
136
-
137
- .theme-dark .cw-style-btn.active .cw-style-name {
138
- color: hsl(0deg, 0%, 100%);
139
- }
140
-
141
- .theme-dark .cw-style-btn.active .cw-style-desc {
142
- color: hsl(0deg, 0%, 100%);
143
- }
144
-
145
- .cw-icon {
146
- width: 1.5rem;
147
- height: 1.5rem;
148
- }
149
-
150
- .cw-icon-large {
151
- width: 6rem;
152
- height: 6rem;
153
- color: var(--cw-text-light);
154
- }
155
-
156
- .cw-icon-orange {
157
- color: hsl(33deg, 100%, 50%);
158
- }
159
-
160
- .cw-icon-yellow {
161
- color: hsl(45deg, 100%, 50%);
162
- }
163
-
164
- .cw-icon-red {
165
- color: hsl(0deg, 100%, 50%);
166
- }
167
-
168
- .cw-icon-blue {
169
- color: hsl(217deg, 100%, 50%);
170
- }
171
-
172
- .cw-style-name {
173
- font-size: 0.75rem;
174
- font-weight: 900;
175
- display: block;
176
- color: var(--cw-text-main);
177
- }
178
-
179
- .cw-style-btn.active .cw-style-name {
180
- color: var(--cw-primary);
181
- }
182
-
183
- .cw-style-desc {
184
- font-weight: 600;
185
- opacity: 0.7;
186
- display: block;
187
- text-transform: uppercase;
188
- }
189
-
73
+ }
74
+
75
+ .cw-left {
76
+ display: flex;
77
+ flex-direction: column;
78
+ gap: 2rem;
79
+ }
80
+
81
+ .cw-right {
82
+ display: flex;
83
+ flex-direction: column;
84
+ gap: 1.5rem;
85
+ }
86
+
87
+ .cw-section {
88
+ display: flex;
89
+ flex-direction: column;
90
+ gap: 1rem;
91
+ }
92
+
93
+ .cw-step-label {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 0.75rem;
97
+ font-size: 0.625rem;
98
+ font-weight: 900;
99
+ color: var(--cw-text-muted);
100
+ text-transform: uppercase;
101
+ letter-spacing: 0.2em;
102
+ }
103
+
104
+ .cw-step-number {
105
+ display: flex;
106
+ align-items: center;
107
+ justify-content: center;
108
+ width: 1.25rem;
109
+ height: 1.25rem;
110
+ border-radius: 50%;
111
+ background: var(--cw-primary-light);
112
+ color: var(--cw-primary);
113
+ font-weight: 900;
114
+ font-size: 0.625rem;
115
+ flex-shrink: 0;
116
+ }
117
+
118
+ .theme-dark .cw-step-number {
119
+ background: hsl(240deg, 100%, 20%);
120
+ }
121
+
122
+ .cw-style-grid {
123
+ display: grid;
124
+ grid-template-columns: repeat(2, 1fr);
125
+ gap: 0.75rem;
126
+ }
127
+
128
+ .cw-style-btn {
129
+ display: flex;
130
+ flex-direction: column;
131
+ align-items: flex-start;
132
+ gap: 0.5rem;
133
+ padding: 1rem;
134
+ border: 2px solid var(--cw-border);
135
+ border-radius: 0.75rem;
136
+ background: var(--cw-bg-card);
137
+ color: var(--cw-text-muted);
138
+ cursor: pointer;
139
+ transition: all 0.3s ease;
140
+ text-align: left;
141
+ font-size: inherit;
142
+ }
143
+
144
+ .cw-style-btn:hover {
145
+ border-color: var(--cw-primary-light);
146
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
147
+ }
148
+
149
+ .cw-style-btn.active {
150
+ background: var(--cw-primary-light);
151
+ border-color: var(--cw-primary);
152
+ color: var(--cw-primary);
153
+ }
154
+
155
+ .theme-dark .cw-style-btn.active {
156
+ background: hsl(240deg, 100%, 35%);
157
+ color: hsl(0deg, 0%, 100%);
158
+ }
159
+
160
+ .theme-dark .cw-style-btn.active .cw-style-name {
161
+ color: hsl(0deg, 0%, 100%);
162
+ }
163
+
164
+ .theme-dark .cw-style-btn.active .cw-style-desc {
165
+ color: hsl(0deg, 0%, 100%);
166
+ }
167
+
168
+ .cw-icon {
169
+ width: 1.5rem;
170
+ height: 1.5rem;
171
+ }
172
+
173
+ .cw-icon-large {
174
+ width: 6rem;
175
+ height: 6rem;
176
+ color: var(--cw-text-light);
177
+ }
178
+
179
+ .cw-icon-orange {
180
+ color: hsl(33deg, 100%, 50%);
181
+ }
182
+
183
+ .cw-icon-yellow {
184
+ color: hsl(45deg, 100%, 50%);
185
+ }
186
+
187
+ .cw-icon-red {
188
+ color: hsl(0deg, 100%, 50%);
189
+ }
190
+
191
+ .cw-icon-blue {
192
+ color: hsl(217deg, 100%, 50%);
193
+ }
194
+
195
+ .cw-style-name {
196
+ font-size: 0.75rem;
197
+ font-weight: 900;
198
+ display: block;
199
+ color: var(--cw-text-main);
200
+ }
201
+
202
+ .cw-style-btn.active .cw-style-name {
203
+ color: var(--cw-primary);
204
+ }
205
+
206
+ .cw-style-desc {
207
+ font-weight: 600;
208
+ opacity: 0.7;
209
+ display: block;
210
+ text-transform: uppercase;
211
+ }
212
+
213
+ .cw-maint-grid {
214
+ display: grid;
215
+ grid-template-columns: 1fr;
216
+ gap: 0.75rem;
217
+ }
218
+
219
+ @media (min-width: 640px) {
190
220
  .cw-maint-grid {
191
- display: grid;
192
- grid-template-columns: 1fr;
193
- gap: 0.75rem;
194
- }
195
-
196
- @media (min-width: 640px) {
197
- .cw-maint-grid {
198
- grid-template-columns: repeat(3, 1fr);
199
- }
200
- }
201
-
202
- .cw-maint-btn {
203
- display: flex;
204
- flex-direction: column;
205
- align-items: center;
206
- text-align: center;
207
- gap: 0.75rem;
208
- padding: 1.25rem;
209
- border: 2px solid var(--cw-border);
210
- border-radius: 0.75rem;
211
- background: var(--cw-bg-card);
212
- color: var(--cw-text-muted);
213
- cursor: pointer;
214
- transition: all 0.3s ease;
215
- font-size: inherit;
216
- }
217
-
218
- .cw-maint-btn:hover {
219
- border-color: var(--cw-primary-light);
220
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
221
- }
222
-
223
- .cw-maint-btn.active {
224
- background: var(--cw-primary-light);
225
- border-color: var(--cw-primary);
226
- }
227
-
228
- .theme-dark .cw-maint-btn.active {
229
- background: hsl(240deg, 100%, 20%);
230
- }
231
-
232
- .cw-maint-icon {
233
- width: 3rem;
234
- height: 3rem;
235
- border-radius: 0.75rem;
236
- background: var(--cw-bg-app);
237
- display: flex;
238
- align-items: center;
239
- justify-content: center;
240
- color: var(--cw-text-muted);
241
- transition: all 0.3s ease;
242
- }
243
-
244
- .cw-maint-btn.active .cw-maint-icon {
245
- color: var(--cw-primary);
246
- }
247
-
248
- .cw-maint-btn:hover .cw-maint-icon {
249
- color: var(--cw-primary);
250
- }
251
-
252
- .cw-maint-name {
253
- font-size: 0.75rem;
254
- font-weight: 900;
255
- display: block;
256
- color: var(--cw-text-main);
257
- }
258
-
259
- .cw-maint-btn.active .cw-maint-name {
260
- color: var(--cw-primary);
261
- }
262
-
263
- .cw-maint-desc {
264
- font-size: 0.625rem;
265
- font-weight: 500;
266
- opacity: 0.7;
267
- display: block;
268
- line-height: 1.3;
269
- }
270
-
271
- .cw-result-card {
272
- background: hsl(217deg, 33%, 17%);
273
- border-radius: var(--cw-radius);
274
- padding: 2rem;
275
- color: hsl(0deg, 0%, 100%);
276
- box-shadow: var(--cw-shadow-xl);
277
- position: relative;
278
- overflow: hidden;
279
- min-height: 320px;
280
- display: flex;
281
- flex-direction: column;
282
- justify-content: center;
283
- transition: all 0.3s ease;
284
- }
285
-
286
- .cw-card-bg {
287
- position: absolute;
288
- inset: 0;
289
- background: linear-gradient(135deg, hsl(217deg, 33%, 17%), hsl(217deg, 33%, 7%));
290
- transition: background 1s ease;
291
- }
292
-
293
- .cw-card-glow {
294
- position: absolute;
295
- right: -3rem;
296
- top: -3rem;
297
- width: 12rem;
298
- height: 12rem;
299
- background: rgba(255, 255, 255, 0.1);
300
- border-radius: 50%;
301
- filter: blur(3rem);
302
- transition: transform 0.7s ease;
303
- }
304
-
305
- .cw-result-card:hover .cw-card-glow {
306
- transform: scale(1.25);
307
- }
308
-
309
- .cw-card-content {
310
- position: relative;
311
- z-index: 10;
312
- display: flex;
313
- flex-direction: column;
314
- gap: 1.5rem;
315
- text-align: center;
316
- }
317
-
318
- .cw-icon-container {
319
- display: flex;
320
- justify-content: center;
321
- align-items: center;
322
- height: 6rem;
323
- }
324
-
325
- .cw-result-icon {
326
- display: none;
327
- }
328
-
329
- .cw-result-icon:not(.cw-hidden) {
330
- display: block;
331
- }
332
-
333
- .cw-result-label {
334
- font-size: 0.625rem;
335
- font-weight: 900;
336
- text-transform: uppercase;
337
- letter-spacing: 0.3em;
338
- color: rgba(255, 255, 255, 0.4);
339
- margin-bottom: 0.5rem;
340
- }
341
-
342
- .cw-result-name {
343
- font-size: 1.875rem;
344
- font-weight: 900;
345
- letter-spacing: -0.02em;
346
- margin: 0;
347
- }
348
-
349
- .cw-result-tag {
350
- font-size: 0.75rem;
351
- font-weight: 500;
352
- color: rgba(255, 255, 255, 0.6);
353
- margin: 0;
354
- }
355
-
356
- .cw-result-details {
357
- display: none;
358
- grid-template-columns: 1fr 1fr;
359
- gap: 0.75rem;
360
- padding-top: 1rem;
361
- border-top: 1px solid rgba(255, 255, 255, 0.1);
362
- }
363
-
364
- .cw-result-details:not(.cw-hidden) {
365
- display: grid;
366
- }
367
-
368
- .cw-detail-box {
369
- background: rgba(255, 255, 255, 0.05);
370
- border: 1px solid rgba(255, 255, 255, 0.05);
371
- border-radius: 0.75rem;
372
- padding: 0.75rem;
373
- }
374
-
375
- .cw-detail-label {
376
- font-size: 0.5rem;
377
- font-weight: 900;
378
- text-transform: uppercase;
379
- letter-spacing: 0.1em;
380
- display: block;
381
- margin-bottom: 0.25rem;
382
- }
383
-
384
- .cw-detail-text {
385
- font-size: 0.625rem;
386
- line-height: 1.4;
387
- color: rgba(255, 255, 255, 0.9);
388
- margin: 0;
389
- }
390
-
391
- .cw-tip-card {
392
- background: var(--cw-bg-app);
393
- border: 1px solid var(--cw-border);
394
- border-radius: var(--cw-radius);
395
- padding: 1.5rem;
396
- display: flex;
397
- flex-direction: column;
398
- gap: 1rem;
399
- }
400
-
401
- .cw-tip-header {
402
- display: flex;
403
- align-items: center;
404
- gap: 0.75rem;
405
- }
406
-
407
- .cw-tip-icon {
408
- padding: 0.5rem;
409
- background: var(--cw-primary-light);
410
- border-radius: 0.75rem;
411
- display: flex;
412
- align-items: center;
413
- justify-content: center;
414
- color: var(--cw-primary);
415
- flex-shrink: 0;
416
- }
417
-
418
- .theme-dark .cw-tip-icon {
419
- background: hsl(240deg, 100%, 20%);
420
- }
421
-
422
- .cw-tip-title {
423
- font-size: 0.875rem;
424
- font-weight: 900;
425
- color: var(--cw-text-main);
426
- text-transform: uppercase;
427
- letter-spacing: 0.05em;
428
- }
429
-
430
- .cw-tip-text {
431
- font-size: 0.6875rem;
432
- line-height: 1.6;
433
- color: var(--cw-text-muted);
434
- font-weight: 400;
435
- font-style: italic;
436
- background: rgba(var(--cw-primary-rgb, 99, 102, 241), 0.03);
437
- padding: 1.25rem;
438
- border-radius: 0.75rem;
439
- border: 1px solid var(--cw-border);
440
- margin: 0;
441
- }
442
-
443
- .theme-dark .cw-tip-text {
444
- color: var(--cw-text-main);
445
- background: rgba(255, 255, 255, 0.03);
446
- }
447
-
448
- .cw-hidden {
449
- display: none;
450
- }
221
+ grid-template-columns: repeat(3, 1fr);
222
+ }
223
+ }
224
+
225
+ .cw-maint-btn {
226
+ display: flex;
227
+ flex-direction: column;
228
+ align-items: center;
229
+ text-align: center;
230
+ gap: 0.75rem;
231
+ padding: 1.25rem;
232
+ border: 2px solid var(--cw-border);
233
+ border-radius: 0.75rem;
234
+ background: var(--cw-bg-card);
235
+ color: var(--cw-text-muted);
236
+ cursor: pointer;
237
+ transition: all 0.3s ease;
238
+ font-size: inherit;
239
+ }
240
+
241
+ .cw-maint-btn:hover {
242
+ border-color: var(--cw-primary-light);
243
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
244
+ }
245
+
246
+ .cw-maint-btn.active {
247
+ background: var(--cw-primary-light);
248
+ border-color: var(--cw-primary);
249
+ }
250
+
251
+ .theme-dark .cw-maint-btn.active {
252
+ background: hsl(240deg, 100%, 20%);
253
+ }
254
+
255
+ .cw-maint-icon {
256
+ width: 3rem;
257
+ height: 3rem;
258
+ border-radius: 0.75rem;
259
+ background: var(--cw-bg-app);
260
+ display: flex;
261
+ align-items: center;
262
+ justify-content: center;
263
+ color: var(--cw-text-muted);
264
+ transition: all 0.3s ease;
265
+ }
266
+
267
+ .cw-maint-btn.active .cw-maint-icon {
268
+ color: var(--cw-primary);
269
+ }
270
+
271
+ .cw-maint-btn:hover .cw-maint-icon {
272
+ color: var(--cw-primary);
273
+ }
274
+
275
+ .cw-maint-name {
276
+ font-size: 0.75rem;
277
+ font-weight: 900;
278
+ display: block;
279
+ color: var(--cw-text-main);
280
+ }
281
+
282
+ .cw-maint-btn.active .cw-maint-name {
283
+ color: var(--cw-primary);
284
+ }
285
+
286
+ .cw-maint-desc {
287
+ font-size: 0.625rem;
288
+ font-weight: 500;
289
+ opacity: 0.7;
290
+ display: block;
291
+ line-height: 1.3;
292
+ }
293
+
294
+ .cw-result-card {
295
+ background: hsl(217deg, 33%, 17%);
296
+ border-radius: var(--cw-radius);
297
+ padding: 2rem;
298
+ color: hsl(0deg, 0%, 100%);
299
+ box-shadow: var(--cw-shadow-xl);
300
+ position: relative;
301
+ overflow: hidden;
302
+ min-height: 320px;
303
+ display: flex;
304
+ flex-direction: column;
305
+ justify-content: center;
306
+ transition: all 0.3s ease;
307
+ }
308
+
309
+ .cw-card-bg {
310
+ position: absolute;
311
+ inset: 0;
312
+ background: linear-gradient(135deg, hsl(217deg, 33%, 17%), hsl(217deg, 33%, 7%));
313
+ transition: background 1s ease;
314
+ }
315
+
316
+ .cw-card-glow {
317
+ position: absolute;
318
+ right: -3rem;
319
+ top: -3rem;
320
+ width: 12rem;
321
+ height: 12rem;
322
+ background: rgba(255, 255, 255, 0.1);
323
+ border-radius: 50%;
324
+ filter: blur(3rem);
325
+ transition: transform 0.7s ease;
326
+ }
327
+
328
+ .cw-result-card:hover .cw-card-glow {
329
+ transform: scale(1.25);
330
+ }
331
+
332
+ .cw-card-content {
333
+ position: relative;
334
+ z-index: 10;
335
+ display: flex;
336
+ flex-direction: column;
337
+ gap: 1.5rem;
338
+ text-align: center;
339
+ }
340
+
341
+ .cw-icon-container {
342
+ display: flex;
343
+ justify-content: center;
344
+ align-items: center;
345
+ height: 6rem;
346
+ }
347
+
348
+ .cw-result-icon {
349
+ display: none;
350
+ }
351
+
352
+ .cw-result-icon:not(.cw-hidden) {
353
+ display: block;
354
+ }
355
+
356
+ .cw-result-label {
357
+ font-size: 0.625rem;
358
+ font-weight: 900;
359
+ text-transform: uppercase;
360
+ letter-spacing: 0.3em;
361
+ color: rgba(255, 255, 255, 0.4);
362
+ margin-bottom: 0.5rem;
363
+ }
364
+
365
+ .cw-result-name {
366
+ font-size: 1.875rem;
367
+ font-weight: 900;
368
+ letter-spacing: -0.02em;
369
+ margin: 0;
370
+ }
371
+
372
+ .cw-result-tag {
373
+ font-size: 0.75rem;
374
+ font-weight: 500;
375
+ color: rgba(255, 255, 255, 0.6);
376
+ margin: 0;
377
+ }
378
+
379
+ .cw-result-details {
380
+ display: none;
381
+ grid-template-columns: 1fr 1fr;
382
+ gap: 0.75rem;
383
+ padding-top: 1rem;
384
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
385
+ }
386
+
387
+ .cw-result-details:not(.cw-hidden) {
388
+ display: grid;
389
+ }
390
+
391
+ .cw-detail-box {
392
+ background: rgba(255, 255, 255, 0.05);
393
+ border: 1px solid rgba(255, 255, 255, 0.05);
394
+ border-radius: 0.75rem;
395
+ padding: 0.75rem;
396
+ }
397
+
398
+ .cw-detail-label {
399
+ font-size: 0.5rem;
400
+ font-weight: 900;
401
+ text-transform: uppercase;
402
+ letter-spacing: 0.1em;
403
+ display: block;
404
+ margin-bottom: 0.25rem;
405
+ }
406
+
407
+ .cw-detail-text {
408
+ font-size: 0.625rem;
409
+ line-height: 1.4;
410
+ color: rgba(255, 255, 255, 0.9);
411
+ margin: 0;
412
+ }
413
+
414
+ .cw-tip-card {
415
+ background: var(--cw-bg-app);
416
+ border: 1px solid var(--cw-border);
417
+ border-radius: var(--cw-radius);
418
+ padding: 1.5rem;
419
+ display: flex;
420
+ flex-direction: column;
421
+ gap: 1rem;
422
+ }
423
+
424
+ .cw-tip-header {
425
+ display: flex;
426
+ align-items: center;
427
+ gap: 0.75rem;
428
+ }
429
+
430
+ .cw-tip-icon {
431
+ padding: 0.5rem;
432
+ background: var(--cw-primary-light);
433
+ border-radius: 0.75rem;
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: center;
437
+ color: var(--cw-primary);
438
+ flex-shrink: 0;
439
+ }
440
+
441
+ .theme-dark .cw-tip-icon {
442
+ background: hsl(240deg, 100%, 20%);
443
+ }
444
+
445
+ .cw-tip-title {
446
+ font-size: 0.875rem;
447
+ font-weight: 900;
448
+ color: var(--cw-text-main);
449
+ text-transform: uppercase;
450
+ letter-spacing: 0.05em;
451
+ }
452
+
453
+ .cw-tip-text {
454
+ font-size: 0.6875rem;
455
+ line-height: 1.6;
456
+ color: var(--cw-text-muted);
457
+ font-weight: 400;
458
+ font-style: italic;
459
+ background: rgba(var(--cw-primary-rgb, 99, 102, 241), 0.03);
460
+ padding: 1.25rem;
461
+ border-radius: 0.75rem;
462
+ border: 1px solid var(--cw-border);
463
+ margin: 0;
464
+ }
465
+
466
+ .theme-dark .cw-tip-text {
467
+ color: var(--cw-text-main);
468
+ background: rgba(255, 255, 255, 0.03);
469
+ }
470
+
471
+ .cw-hidden {
472
+ display: none;
473
+ }