ttp-agent-sdk 2.3.0 → 2.3.2

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,1123 @@
1
+ /* ===== Reset & Base Styles ===== */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ :root {
9
+ --primary-color: #667eea;
10
+ --primary-dark: #5a67d8;
11
+ --secondary-color: #f093fb;
12
+ --accent-color: #f5576c;
13
+ --text-primary: #1a202c;
14
+ --text-secondary: #4a5568;
15
+ --text-muted: #718096;
16
+ --bg-primary: #ffffff;
17
+ --bg-secondary: #f7fafc;
18
+ --bg-tertiary: #edf2f7;
19
+ --border-color: #e2e8f0;
20
+ --code-bg: #1e293b;
21
+ --code-text: #e2e8f0;
22
+ --success-color: #10b981;
23
+ --warning-color: #f59e0b;
24
+ --error-color: #ef4444;
25
+ --info-color: #3b82f6;
26
+ --sidebar-width: 280px;
27
+ --header-height: 60px;
28
+ }
29
+
30
+ body {
31
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
32
+ font-size: 16px;
33
+ line-height: 1.6;
34
+ color: var(--text-primary);
35
+ background: var(--bg-secondary);
36
+ }
37
+
38
+ /* ===== Documentation Layout ===== */
39
+ .documentation {
40
+ display: flex;
41
+ min-height: 100vh;
42
+ }
43
+
44
+ /* ===== Sidebar ===== */
45
+ .sidebar {
46
+ width: var(--sidebar-width);
47
+ background: var(--bg-primary);
48
+ border-right: 1px solid var(--border-color);
49
+ position: fixed;
50
+ top: 0;
51
+ left: 0;
52
+ height: 100vh;
53
+ overflow-y: auto;
54
+ z-index: 100;
55
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
56
+ }
57
+
58
+ .sidebar-header {
59
+ padding: 25px 20px 20px;
60
+ border-bottom: 1px solid var(--border-color);
61
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
62
+ color: white;
63
+ }
64
+
65
+ .sidebar-header h1 {
66
+ font-size: 1.4rem;
67
+ font-weight: 700;
68
+ margin: 0;
69
+ line-height: 1.2;
70
+ }
71
+
72
+ .sidebar-header .version {
73
+ font-size: 0.875rem;
74
+ opacity: 0.9;
75
+ font-weight: 500;
76
+ margin: 0;
77
+ }
78
+
79
+ .sidebar-header img {
80
+ width: 40px;
81
+ height: 40px;
82
+ border-radius: 8px;
83
+ background: white;
84
+ padding: 2px;
85
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
86
+ }
87
+
88
+ .sidebar-nav {
89
+ padding: 20px 0;
90
+ }
91
+
92
+ .nav-section {
93
+ margin-bottom: 25px;
94
+ }
95
+
96
+ .nav-section h3 {
97
+ font-size: 0.75rem;
98
+ text-transform: uppercase;
99
+ letter-spacing: 0.05em;
100
+ color: var(--text-muted);
101
+ padding: 0 20px 10px;
102
+ font-weight: 600;
103
+ }
104
+
105
+ .nav-section ul {
106
+ list-style: none;
107
+ }
108
+
109
+ .nav-section li {
110
+ margin: 0;
111
+ }
112
+
113
+ .nav-link {
114
+ display: block;
115
+ padding: 10px 20px;
116
+ color: var(--text-secondary);
117
+ text-decoration: none;
118
+ transition: all 0.2s ease;
119
+ font-size: 0.9375rem;
120
+ border-left: 3px solid transparent;
121
+ }
122
+
123
+ .nav-link:hover {
124
+ background: var(--bg-tertiary);
125
+ color: var(--primary-color);
126
+ border-left-color: var(--primary-color);
127
+ }
128
+
129
+ .nav-link.active {
130
+ background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
131
+ color: var(--primary-color);
132
+ font-weight: 600;
133
+ border-left: 3px solid var(--primary-color);
134
+ box-shadow: inset 0 0 0 1px rgba(102, 126, 234, 0.1);
135
+ position: relative;
136
+ }
137
+
138
+ .nav-link.active::before {
139
+ content: '';
140
+ position: absolute;
141
+ right: 0;
142
+ top: 50%;
143
+ transform: translateY(-50%);
144
+ width: 4px;
145
+ height: 60%;
146
+ background: var(--primary-color);
147
+ border-radius: 4px 0 0 4px;
148
+ }
149
+
150
+ /* ===== Main Content ===== */
151
+ .content {
152
+ flex: 1;
153
+ margin-left: var(--sidebar-width);
154
+ min-height: 100vh;
155
+ }
156
+
157
+ .content-wrapper {
158
+ max-width: 900px;
159
+ margin: 0 auto;
160
+ padding: 40px 60px 100px;
161
+ }
162
+
163
+ /* ===== Typography ===== */
164
+ .doc-section {
165
+ margin-bottom: 60px;
166
+ scroll-margin-top: 20px;
167
+ }
168
+
169
+ .doc-section h1 {
170
+ font-size: 2.5rem;
171
+ font-weight: 700;
172
+ color: var(--text-primary);
173
+ margin-bottom: 20px;
174
+ line-height: 1.2;
175
+ }
176
+
177
+ .doc-section h2 {
178
+ font-size: 1.875rem;
179
+ font-weight: 600;
180
+ color: var(--text-primary);
181
+ margin: 40px 0 20px;
182
+ padding-bottom: 10px;
183
+ border-bottom: 2px solid var(--border-color);
184
+ }
185
+
186
+ .doc-section h3 {
187
+ font-size: 1.5rem;
188
+ font-weight: 600;
189
+ color: var(--text-primary);
190
+ margin: 30px 0 15px;
191
+ }
192
+
193
+ .doc-section h4 {
194
+ font-size: 1.25rem;
195
+ font-weight: 600;
196
+ color: var(--text-secondary);
197
+ margin: 25px 0 12px;
198
+ }
199
+
200
+ .doc-section p {
201
+ margin-bottom: 15px;
202
+ color: var(--text-secondary);
203
+ font-size: 1rem;
204
+ line-height: 1.7;
205
+ }
206
+
207
+ .lead {
208
+ font-size: 1.25rem;
209
+ color: var(--text-secondary);
210
+ margin-bottom: 30px;
211
+ line-height: 1.6;
212
+ }
213
+
214
+ /* ===== Code Blocks ===== */
215
+ pre {
216
+ background: var(--code-bg);
217
+ border-radius: 8px;
218
+ padding: 20px;
219
+ overflow-x: auto;
220
+ margin: 20px 0;
221
+ border: 1px solid rgba(255, 255, 255, 0.1);
222
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
223
+ }
224
+
225
+ code {
226
+ font-family: 'Monaco', 'Courier New', monospace;
227
+ font-size: 0.9em;
228
+ color: var(--code-text);
229
+ line-height: 1.6;
230
+ }
231
+
232
+ pre code {
233
+ background: none;
234
+ padding: 0;
235
+ border-radius: 0;
236
+ font-size: 0.875rem;
237
+ }
238
+
239
+ p code, li code, td code, th code {
240
+ background: #f1f5f9;
241
+ padding: 2px 6px;
242
+ border-radius: 3px;
243
+ color: #e11d48;
244
+ font-size: 0.9em;
245
+ }
246
+
247
+ /* ===== Badges ===== */
248
+ .badge-new {
249
+ display: inline-block;
250
+ background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
251
+ color: white;
252
+ padding: 4px 12px;
253
+ border-radius: 20px;
254
+ font-size: 0.75rem;
255
+ font-weight: 600;
256
+ text-transform: uppercase;
257
+ letter-spacing: 0.05em;
258
+ margin-left: 10px;
259
+ vertical-align: middle;
260
+ }
261
+
262
+ /* ===== Info Boxes ===== */
263
+ .info-box, .warning-box, .success-box {
264
+ padding: 16px 20px;
265
+ border-radius: 8px;
266
+ margin: 20px 0;
267
+ border-left: 4px solid;
268
+ }
269
+
270
+ .info-box {
271
+ background: #eff6ff;
272
+ border-left-color: var(--info-color);
273
+ }
274
+
275
+ .info-box strong {
276
+ color: #1e40af;
277
+ }
278
+
279
+ .warning-box {
280
+ background: #fffbeb;
281
+ border-left-color: var(--warning-color);
282
+ }
283
+
284
+ .warning-box strong {
285
+ color: #92400e;
286
+ }
287
+
288
+ .success-box {
289
+ background: #f0fdf4;
290
+ border-left-color: var(--success-color);
291
+ }
292
+
293
+ .success-box strong {
294
+ color: #065f46;
295
+ }
296
+
297
+ /* ===== Quick Links Menu ===== */
298
+ .quick-links-container {
299
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
300
+ border-radius: 16px;
301
+ padding: 40px 30px;
302
+ margin: 40px 0;
303
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
304
+ }
305
+
306
+ .quick-links-grid {
307
+ display: grid;
308
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
309
+ gap: 20px;
310
+ }
311
+
312
+ .quick-link-card {
313
+ background: white;
314
+ border-radius: 12px;
315
+ padding: 30px 25px;
316
+ text-decoration: none;
317
+ color: var(--text-primary);
318
+ border: 2px solid transparent;
319
+ transition: all 0.3s ease;
320
+ position: relative;
321
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
322
+ display: flex;
323
+ flex-direction: column;
324
+ }
325
+
326
+ .quick-link-card:hover {
327
+ border-color: var(--primary-color);
328
+ transform: translateY(-4px);
329
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
330
+ text-decoration: none;
331
+ }
332
+
333
+ .quick-link-icon {
334
+ font-size: 3rem;
335
+ margin-bottom: 15px;
336
+ display: block;
337
+ }
338
+
339
+ .quick-link-card h3 {
340
+ font-size: 1.25rem;
341
+ font-weight: 600;
342
+ color: var(--text-primary);
343
+ margin: 0 0 8px 0;
344
+ }
345
+
346
+ .quick-link-card p {
347
+ color: var(--text-secondary);
348
+ font-size: 0.9375rem;
349
+ margin: 0;
350
+ line-height: 1.5;
351
+ flex-grow: 1;
352
+ }
353
+
354
+ .quick-link-arrow {
355
+ font-size: 1.5rem;
356
+ color: var(--primary-color);
357
+ position: absolute;
358
+ bottom: 20px;
359
+ right: 20px;
360
+ opacity: 0;
361
+ transform: translateX(-10px);
362
+ transition: all 0.3s ease;
363
+ }
364
+
365
+ .quick-link-card:hover .quick-link-arrow {
366
+ opacity: 1;
367
+ transform: translateX(0);
368
+ }
369
+
370
+ /* ===== Compact Features ===== */
371
+ .features-compact {
372
+ display: grid;
373
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
374
+ gap: 20px;
375
+ }
376
+
377
+ .feature-compact-item {
378
+ display: flex;
379
+ gap: 15px;
380
+ align-items: flex-start;
381
+ padding: 20px;
382
+ background: white;
383
+ border-radius: 8px;
384
+ border-left: 3px solid var(--primary-color);
385
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
386
+ }
387
+
388
+ .feature-compact-icon {
389
+ font-size: 2rem;
390
+ flex-shrink: 0;
391
+ }
392
+
393
+ .feature-compact-item strong {
394
+ display: block;
395
+ color: var(--text-primary);
396
+ font-size: 1rem;
397
+ margin-bottom: 5px;
398
+ }
399
+
400
+ .feature-compact-item p {
401
+ color: var(--text-secondary);
402
+ font-size: 0.9375rem;
403
+ margin: 0;
404
+ line-height: 1.5;
405
+ }
406
+
407
+ /* ===== Feature Grid ===== */
408
+ .feature-grid {
409
+ display: grid;
410
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
411
+ gap: 20px;
412
+ margin: 30px 0;
413
+ }
414
+
415
+ .feature-card {
416
+ background: white;
417
+ padding: 25px;
418
+ border-radius: 12px;
419
+ border: 2px solid var(--border-color);
420
+ transition: all 0.3s ease;
421
+ }
422
+
423
+ .feature-card:hover {
424
+ border-color: var(--primary-color);
425
+ transform: translateY(-2px);
426
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.1);
427
+ }
428
+
429
+ .feature-icon {
430
+ font-size: 2.5rem;
431
+ margin-bottom: 15px;
432
+ }
433
+
434
+ .feature-card h3 {
435
+ font-size: 1.125rem;
436
+ font-weight: 600;
437
+ color: var(--text-primary);
438
+ margin: 0 0 10px 0;
439
+ }
440
+
441
+ .feature-card p {
442
+ font-size: 0.9375rem;
443
+ color: var(--text-secondary);
444
+ margin: 0;
445
+ line-height: 1.5;
446
+ }
447
+
448
+ /* ===== Step Cards ===== */
449
+ .step-card {
450
+ display: flex;
451
+ gap: 20px;
452
+ margin: 30px 0;
453
+ padding: 25px;
454
+ background: white;
455
+ border-radius: 12px;
456
+ border-left: 4px solid var(--primary-color);
457
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
458
+ }
459
+
460
+ .step-number {
461
+ flex-shrink: 0;
462
+ width: 40px;
463
+ height: 40px;
464
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
465
+ color: white;
466
+ border-radius: 50%;
467
+ display: flex;
468
+ align-items: center;
469
+ justify-content: center;
470
+ font-weight: 700;
471
+ font-size: 1.25rem;
472
+ }
473
+
474
+ .step-content h3 {
475
+ margin-top: 0;
476
+ margin-bottom: 10px;
477
+ font-size: 1.25rem;
478
+ }
479
+
480
+ .step-content p {
481
+ margin-bottom: 15px;
482
+ }
483
+
484
+ /* ===== Flow Diagram ===== */
485
+ .flow-diagram {
486
+ margin: 30px 0;
487
+ padding: 30px;
488
+ background: white;
489
+ border-radius: 12px;
490
+ border: 2px solid var(--border-color);
491
+ }
492
+
493
+ .flow-step {
494
+ display: flex;
495
+ flex-direction: column;
496
+ align-items: center;
497
+ gap: 10px;
498
+ }
499
+
500
+ .flow-box {
501
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
502
+ padding: 20px 25px;
503
+ border-radius: 8px;
504
+ border: 2px solid var(--border-color);
505
+ width: 100%;
506
+ max-width: 400px;
507
+ text-align: center;
508
+ }
509
+
510
+ .flow-box strong {
511
+ display: block;
512
+ color: var(--primary-color);
513
+ font-size: 1rem;
514
+ margin-bottom: 5px;
515
+ }
516
+
517
+ .flow-box p {
518
+ margin: 0;
519
+ color: var(--text-secondary);
520
+ font-size: 0.9375rem;
521
+ }
522
+
523
+ .flow-arrow {
524
+ font-size: 2rem;
525
+ color: var(--primary-color);
526
+ font-weight: bold;
527
+ }
528
+
529
+ /* ===== Tables ===== */
530
+ .properties-table {
531
+ width: 100%;
532
+ border-collapse: collapse;
533
+ margin: 20px 0;
534
+ background: white;
535
+ border-radius: 8px;
536
+ overflow: hidden;
537
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
538
+ }
539
+
540
+ .properties-table thead {
541
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
542
+ color: white;
543
+ }
544
+
545
+ .properties-table th {
546
+ padding: 15px;
547
+ text-align: left;
548
+ font-weight: 600;
549
+ font-size: 0.9375rem;
550
+ letter-spacing: 0.025em;
551
+ }
552
+
553
+ .properties-table td {
554
+ padding: 15px;
555
+ border-bottom: 1px solid var(--border-color);
556
+ color: var(--text-secondary);
557
+ font-size: 0.9375rem;
558
+ }
559
+
560
+ .properties-table tbody tr:last-child td {
561
+ border-bottom: none;
562
+ }
563
+
564
+ .properties-table tbody tr:hover {
565
+ background: var(--bg-tertiary);
566
+ }
567
+
568
+ /* ===== Collapsible Sections (details/summary) ===== */
569
+ details {
570
+ margin: 20px 0;
571
+ border: 1px solid var(--border-color);
572
+ border-radius: 8px;
573
+ background: white;
574
+ overflow: hidden;
575
+ transition: all 0.3s ease;
576
+ }
577
+
578
+ details[open] {
579
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
580
+ }
581
+
582
+ details summary {
583
+ padding: 15px 20px;
584
+ cursor: pointer;
585
+ user-select: none;
586
+ background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
587
+ border-bottom: 1px solid transparent;
588
+ transition: all 0.2s ease;
589
+ list-style: none;
590
+ position: relative;
591
+ font-size: 1rem;
592
+ color: var(--text-primary);
593
+ }
594
+
595
+ details summary::-webkit-details-marker {
596
+ display: none;
597
+ }
598
+
599
+ details summary::before {
600
+ content: '▶';
601
+ position: absolute;
602
+ left: 20px;
603
+ transition: transform 0.2s ease;
604
+ font-size: 0.8em;
605
+ color: var(--primary-color);
606
+ }
607
+
608
+ details[open] summary::before {
609
+ transform: rotate(90deg);
610
+ }
611
+
612
+ details summary:hover {
613
+ background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
614
+ }
615
+
616
+ details[open] summary {
617
+ border-bottom-color: var(--border-color);
618
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
619
+ color: white;
620
+ }
621
+
622
+ details[open] summary strong {
623
+ color: white;
624
+ }
625
+
626
+ details[open] summary::before {
627
+ color: white;
628
+ }
629
+
630
+ details summary strong {
631
+ margin-left: 25px;
632
+ display: inline-block;
633
+ }
634
+
635
+ details .properties-table {
636
+ margin: 0;
637
+ box-shadow: none;
638
+ border-radius: 0;
639
+ }
640
+
641
+ /* ===== Lists ===== */
642
+ .numbered-list {
643
+ margin: 20px 0;
644
+ padding-left: 25px;
645
+ color: var(--text-secondary);
646
+ line-height: 2;
647
+ }
648
+
649
+ .numbered-list li {
650
+ margin-bottom: 10px;
651
+ }
652
+
653
+ ul {
654
+ margin: 15px 0;
655
+ padding-left: 25px;
656
+ }
657
+
658
+ li {
659
+ margin-bottom: 8px;
660
+ color: var(--text-secondary);
661
+ }
662
+
663
+ /* ===== Settings Grid ===== */
664
+ .settings-grid {
665
+ display: grid;
666
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
667
+ gap: 20px;
668
+ margin: 25px 0;
669
+ }
670
+
671
+ .settings-category {
672
+ background: white;
673
+ padding: 20px;
674
+ border-radius: 8px;
675
+ border: 2px solid var(--border-color);
676
+ }
677
+
678
+ .settings-category h3 {
679
+ font-size: 1.125rem;
680
+ margin: 0 0 15px 0;
681
+ color: var(--text-primary);
682
+ }
683
+
684
+ .settings-category ul {
685
+ margin: 0;
686
+ padding-left: 20px;
687
+ }
688
+
689
+ .settings-category li {
690
+ font-size: 0.9375rem;
691
+ margin-bottom: 8px;
692
+ line-height: 1.6;
693
+ }
694
+
695
+ /* ===== Method Cards ===== */
696
+ .method-card {
697
+ background: white;
698
+ padding: 25px;
699
+ border-radius: 8px;
700
+ border-left: 4px solid var(--primary-color);
701
+ margin-bottom: 20px;
702
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
703
+ }
704
+
705
+ .method-card h3 {
706
+ margin-top: 0;
707
+ margin-bottom: 10px;
708
+ font-size: 1.25rem;
709
+ color: var(--primary-color);
710
+ }
711
+
712
+ .method-card p {
713
+ margin-bottom: 10px;
714
+ }
715
+
716
+ .method-card pre {
717
+ margin-top: 15px;
718
+ }
719
+
720
+ /* ===== Footer ===== */
721
+ .doc-footer {
722
+ margin-top: 80px;
723
+ padding: 30px 0;
724
+ border-top: 2px solid var(--border-color);
725
+ text-align: center;
726
+ color: var(--text-muted);
727
+ }
728
+
729
+ .doc-footer p {
730
+ margin-bottom: 10px;
731
+ }
732
+
733
+ .doc-footer a {
734
+ color: var(--primary-color);
735
+ text-decoration: none;
736
+ font-weight: 500;
737
+ margin: 0 10px;
738
+ }
739
+
740
+ .doc-footer a:hover {
741
+ text-decoration: underline;
742
+ }
743
+
744
+ /* ===== Responsive Design ===== */
745
+
746
+ /* ===== Tablet Styles ===== */
747
+ @media (max-width: 1024px) {
748
+ :root {
749
+ --sidebar-width: 260px;
750
+ }
751
+
752
+ .content-wrapper {
753
+ padding: 40px 30px 80px;
754
+ }
755
+
756
+ .quick-links-grid {
757
+ grid-template-columns: repeat(2, 1fr);
758
+ }
759
+
760
+ .feature-grid {
761
+ grid-template-columns: repeat(2, 1fr);
762
+ }
763
+ }
764
+
765
+ /* ===== Mobile Styles ===== */
766
+ @media (max-width: 768px) {
767
+ .sidebar {
768
+ transform: translateX(-100%);
769
+ transition: transform 0.3s ease;
770
+ z-index: 150;
771
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0);
772
+ }
773
+
774
+ .sidebar.open {
775
+ transform: translateX(0);
776
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
777
+ }
778
+
779
+ .content {
780
+ margin-left: 0;
781
+ width: 100%;
782
+ }
783
+
784
+ .content-wrapper {
785
+ padding: 20px 15px 60px;
786
+ }
787
+
788
+ .doc-section {
789
+ padding: 30px 0;
790
+ }
791
+
792
+ .doc-section h1 {
793
+ font-size: 1.75rem;
794
+ }
795
+
796
+ .doc-section h2 {
797
+ font-size: 1.4rem;
798
+ }
799
+
800
+ .doc-section h3 {
801
+ font-size: 1.2rem;
802
+ }
803
+
804
+ .feature-grid {
805
+ grid-template-columns: 1fr;
806
+ gap: 15px;
807
+ }
808
+
809
+ .quick-links-container {
810
+ padding: 20px 15px;
811
+ }
812
+
813
+ .quick-links-grid {
814
+ grid-template-columns: 1fr;
815
+ gap: 15px;
816
+ }
817
+
818
+ .quick-link-card {
819
+ padding: 20px 15px;
820
+ }
821
+
822
+ .features-compact {
823
+ grid-template-columns: 1fr;
824
+ }
825
+
826
+ .step-card {
827
+ flex-direction: column;
828
+ }
829
+
830
+ .flow-box {
831
+ max-width: 100%;
832
+ padding: 15px;
833
+ }
834
+
835
+ .settings-grid {
836
+ grid-template-columns: 1fr;
837
+ }
838
+
839
+ .info-box, .warning-box {
840
+ padding: 15px;
841
+ font-size: 0.9rem;
842
+ }
843
+
844
+ pre {
845
+ font-size: 0.8rem;
846
+ padding: 15px;
847
+ }
848
+
849
+ .properties-table {
850
+ font-size: 0.85rem;
851
+ display: block;
852
+ overflow-x: auto;
853
+ -webkit-overflow-scrolling: touch;
854
+ }
855
+
856
+ .properties-table thead,
857
+ .properties-table tbody,
858
+ .properties-table tr {
859
+ display: table;
860
+ width: 100%;
861
+ table-layout: fixed;
862
+ }
863
+
864
+ .properties-table th,
865
+ .properties-table td {
866
+ padding: 10px 8px;
867
+ word-wrap: break-word;
868
+ }
869
+
870
+ /* Make code elements in tables wrap */
871
+ .properties-table code {
872
+ white-space: normal;
873
+ word-break: break-word;
874
+ }
875
+
876
+ .scroll-to-top {
877
+ bottom: 20px !important;
878
+ right: 20px !important;
879
+ width: 45px !important;
880
+ height: 45px !important;
881
+ }
882
+
883
+ details summary {
884
+ padding: 12px 15px;
885
+ font-size: 0.95rem;
886
+ }
887
+
888
+ details summary strong {
889
+ margin-left: 20px;
890
+ }
891
+
892
+ /* Better mobile navigation */
893
+ .sidebar-nav {
894
+ font-size: 0.95rem;
895
+ }
896
+
897
+ .nav-link {
898
+ padding: 10px 15px;
899
+ }
900
+
901
+ /* Improve tap targets */
902
+ a, button {
903
+ min-height: 44px;
904
+ display: inline-flex;
905
+ align-items: center;
906
+ }
907
+ }
908
+
909
+ /* ===== Small Mobile Styles ===== */
910
+ @media (max-width: 480px) {
911
+ .content-wrapper {
912
+ padding: 15px 10px 60px;
913
+ }
914
+
915
+ .doc-section h1 {
916
+ font-size: 1.5rem;
917
+ line-height: 1.3;
918
+ }
919
+
920
+ .doc-section h2 {
921
+ font-size: 1.25rem;
922
+ line-height: 1.4;
923
+ }
924
+
925
+ .doc-section h3 {
926
+ font-size: 1.1rem;
927
+ }
928
+
929
+ .quick-link-card h3 {
930
+ font-size: 1.1rem;
931
+ }
932
+
933
+ .quick-link-card {
934
+ padding: 15px 12px;
935
+ }
936
+
937
+ .feature-card h3 {
938
+ font-size: 1rem;
939
+ }
940
+
941
+ pre {
942
+ font-size: 0.75rem;
943
+ padding: 12px;
944
+ overflow-x: auto;
945
+ max-width: 100%;
946
+ }
947
+
948
+ .properties-table {
949
+ font-size: 0.8rem;
950
+ }
951
+
952
+ .properties-table th,
953
+ .properties-table td {
954
+ padding: 8px 6px;
955
+ font-size: 0.75rem;
956
+ }
957
+
958
+ .sidebar-header h2 {
959
+ font-size: 1.1rem;
960
+ }
961
+
962
+ .sidebar-header .version {
963
+ font-size: 0.75rem;
964
+ }
965
+
966
+ .sidebar-header img {
967
+ width: 32px !important;
968
+ height: 32px !important;
969
+ }
970
+
971
+ .info-box, .warning-box {
972
+ font-size: 0.85rem;
973
+ padding: 12px;
974
+ }
975
+
976
+ .method-card, .feature-card {
977
+ padding: 15px;
978
+ }
979
+
980
+ /* Smaller mobile menu button */
981
+ .mobile-menu-btn {
982
+ padding: 10px 14px;
983
+ font-size: 1.2rem;
984
+ }
985
+ }
986
+
987
+ /* ===== Scrollbar Styling ===== */
988
+ .sidebar::-webkit-scrollbar {
989
+ width: 6px;
990
+ }
991
+
992
+ .sidebar::-webkit-scrollbar-track {
993
+ background: var(--bg-secondary);
994
+ }
995
+
996
+ .sidebar::-webkit-scrollbar-thumb {
997
+ background: var(--border-color);
998
+ border-radius: 3px;
999
+ }
1000
+
1001
+ .sidebar::-webkit-scrollbar-thumb:hover {
1002
+ background: var(--text-muted);
1003
+ }
1004
+
1005
+ /* ===== Smooth Scrolling ===== */
1006
+ html {
1007
+ scroll-behavior: smooth;
1008
+ }
1009
+
1010
+ /* ===== Selection ===== */
1011
+ ::selection {
1012
+ background: var(--primary-color);
1013
+ color: white;
1014
+ }
1015
+
1016
+ /* ===== Links ===== */
1017
+ a {
1018
+ color: var(--primary-color);
1019
+ text-decoration: none;
1020
+ }
1021
+
1022
+ a:hover {
1023
+ text-decoration: underline;
1024
+ }
1025
+
1026
+ /* ===== Mobile Overlay ===== */
1027
+ .mobile-overlay {
1028
+ display: none;
1029
+ position: fixed;
1030
+ top: 0;
1031
+ left: 0;
1032
+ width: 100%;
1033
+ height: 100%;
1034
+ background: rgba(0, 0, 0, 0.5);
1035
+ z-index: 140;
1036
+ opacity: 0;
1037
+ transition: opacity 0.3s ease;
1038
+ }
1039
+
1040
+ .mobile-overlay.active {
1041
+ opacity: 1;
1042
+ }
1043
+
1044
+ @media (max-width: 768px) {
1045
+ .mobile-overlay {
1046
+ display: block;
1047
+ }
1048
+ }
1049
+
1050
+ /* ===== Mobile Header ===== */
1051
+ .mobile-header {
1052
+ display: none;
1053
+ position: fixed;
1054
+ top: 0;
1055
+ left: 0;
1056
+ right: 0;
1057
+ height: 60px;
1058
+ background: white;
1059
+ border-bottom: 1px solid var(--border-color);
1060
+ z-index: 100;
1061
+ padding: 0 20px;
1062
+ align-items: center;
1063
+ justify-content: space-between;
1064
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
1065
+ }
1066
+
1067
+ .mobile-header-logo {
1068
+ display: flex;
1069
+ align-items: center;
1070
+ gap: 10px;
1071
+ }
1072
+
1073
+ .mobile-header-logo img {
1074
+ width: 32px;
1075
+ height: 32px;
1076
+ border-radius: 6px;
1077
+ }
1078
+
1079
+ .mobile-header-title {
1080
+ font-size: 1.1rem;
1081
+ font-weight: 600;
1082
+ color: var(--text-primary);
1083
+ margin: 0;
1084
+ }
1085
+
1086
+ /* ===== Mobile Menu Button ===== */
1087
+ .mobile-menu-btn {
1088
+ display: none;
1089
+ position: fixed;
1090
+ top: 12px;
1091
+ left: 20px;
1092
+ z-index: 200;
1093
+ background: var(--primary-color);
1094
+ color: white;
1095
+ border: none;
1096
+ padding: 12px 16px;
1097
+ border-radius: 8px;
1098
+ font-size: 1.25rem;
1099
+ cursor: pointer;
1100
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
1101
+ transition: opacity 0.3s ease, transform 0.3s ease;
1102
+ }
1103
+
1104
+ .mobile-menu-btn.menu-open {
1105
+ opacity: 0;
1106
+ transform: translateX(-100px);
1107
+ pointer-events: none;
1108
+ }
1109
+
1110
+ @media (max-width: 768px) {
1111
+ .mobile-header {
1112
+ display: flex;
1113
+ }
1114
+
1115
+ .mobile-menu-btn {
1116
+ display: block;
1117
+ }
1118
+
1119
+ .content-wrapper {
1120
+ padding-top: 80px;
1121
+ }
1122
+ }
1123
+