@compose-market/theme 0.0.93 → 0.0.95

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.
@@ -9,8 +9,14 @@
9
9
 
10
10
  .cm-session-trigger {
11
11
  border-color: hsl(var(--primary) / 0.35);
12
- background: hsl(var(--primary) / 0.08);
12
+ background:
13
+ radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.16), transparent 38%),
14
+ radial-gradient(circle at 82% 100%, hsl(var(--accent) / 0.12), transparent 42%),
15
+ linear-gradient(145deg, hsl(226 21% 22% / 0.56), hsl(221 50% 8% / 0.48));
13
16
  color: hsl(var(--primary));
17
+ box-shadow:
18
+ inset 0 1px 0 hsl(0 0% 100% / 0.07),
19
+ 0 0 22px hsl(var(--primary) / 0.11);
14
20
  }
15
21
 
16
22
  .cm-app-chrome__hud .cm-session-menu,
@@ -21,10 +27,11 @@
21
27
  .cm-app-chrome__hud .cm-session-trigger,
22
28
  .cm-app-chrome__hud-popover .cm-session-trigger {
23
29
  width: auto;
24
- min-width: var(--cm-hud-size, 2.75rem);
30
+ min-width: max-content;
31
+ max-width: min(13.5rem, 52vw);
25
32
  min-height: var(--cm-hud-size, 2.75rem);
26
33
  height: var(--cm-hud-size, 2.75rem);
27
- padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);
34
+ padding-inline: clamp(0.78rem, 1.35vw, 1rem);
28
35
  border-radius: 999px;
29
36
  white-space: nowrap;
30
37
  }
@@ -274,19 +281,14 @@
274
281
 
275
282
  .cm-app-chrome__hud .cm-session-trigger {
276
283
  width: auto;
277
- min-width: var(--cm-hud-size, 2.75rem);
284
+ min-width: max-content;
278
285
  padding-inline: 0.72rem;
279
286
  }
280
287
  }
281
288
 
282
289
  @media (max-width: 380px) {
283
290
  .cm-app-chrome__hud .cm-session-trigger {
284
- width: var(--cm-hud-size, 2.75rem);
285
- padding-inline: 0;
286
- }
287
-
288
- .cm-app-chrome__hud .cm-session-trigger__mobile {
289
- display: none;
291
+ max-width: min(10.5rem, 58vw);
290
292
  }
291
293
  }
292
294
 
@@ -206,9 +206,9 @@
206
206
  min-width: 0;
207
207
  min-height: 100dvh;
208
208
  padding:
209
- calc(env(safe-area-inset-top) + clamp(4.6rem, 7vw, 5.6rem))
210
- clamp(0.85rem, 2.3vw, 2rem)
211
- calc(env(safe-area-inset-bottom) + clamp(5.1rem, 7.4vw, 6.1rem));
209
+ calc(env(safe-area-inset-top) + clamp(4.8rem, 7vw, 5.9rem))
210
+ clamp(5.25rem, 6vw, 7rem)
211
+ calc(env(safe-area-inset-bottom) + clamp(5.35rem, 7.4vw, 6.35rem));
212
212
  }
213
213
 
214
214
  .cm-app-chrome__navdock {
@@ -358,27 +358,38 @@
358
358
  .cm-app-chrome__hud-group {
359
359
  container-type: inline-size;
360
360
  display: flex;
361
- max-width: min(100%, 47rem);
361
+ width: min(100%, 68rem);
362
362
  min-width: 0;
363
363
  align-items: center;
364
364
  justify-content: flex-end;
365
365
  gap: var(--cm-chrome-gap);
366
+ flex-wrap: nowrap;
366
367
  pointer-events: auto;
367
368
  }
368
369
 
369
370
  .cm-app-chrome__hud-item,
370
- .cm-app-chrome__hud-fold {
371
+ .cm-app-chrome__hud-fold,
372
+ .cm-app-chrome__search {
371
373
  position: relative;
372
- min-width: 0;
373
- flex: 0 1 auto;
374
+ min-width: max-content;
375
+ flex: 0 0 auto;
376
+ }
377
+
378
+ .cm-app-chrome__search {
379
+ display: inline-flex;
380
+ min-width: var(--cm-hud-size);
381
+ align-items: center;
382
+ justify-content: flex-end;
383
+ gap: var(--cm-chrome-gap);
374
384
  }
375
385
 
376
386
  .cm-app-chrome__hud-item[data-priority="low"] {
377
- flex-shrink: 1;
387
+ flex-shrink: 0;
378
388
  }
379
389
 
380
390
  .cm-hud-button {
381
391
  display: inline-flex;
392
+ align-items: center;
382
393
  width: auto;
383
394
  max-width: min(15.5rem, 52vw);
384
395
  justify-content: center;
@@ -418,6 +429,35 @@
418
429
  max-width: 8.8rem;
419
430
  }
420
431
 
432
+ .cm-hud-wallet {
433
+ min-width: min(13.75rem, 42vw);
434
+ justify-content: flex-start;
435
+ padding-inline: 0.82rem 0.74rem;
436
+ background:
437
+ radial-gradient(circle at 14% 50%, hsl(var(--primary) / 0.18), transparent 34%),
438
+ radial-gradient(circle at 86% 100%, hsl(var(--accent) / 0.12), transparent 40%),
439
+ linear-gradient(145deg, hsl(226 21% 22% / 0.58), hsl(221 50% 8% / 0.48));
440
+ }
441
+
442
+ .cm-hud-wallet__icon {
443
+ color: hsl(var(--primary));
444
+ opacity: 0.92;
445
+ }
446
+
447
+ .cm-hud-wallet .cm-hud-value {
448
+ color: hsl(var(--foreground));
449
+ font-family: var(--font-display), sans-serif;
450
+ font-size: 0.76rem;
451
+ letter-spacing: 0.05em;
452
+ }
453
+
454
+ .cm-hud-wallet .cm-hud-address {
455
+ color: hsl(var(--primary) / 0.9);
456
+ font-size: 0.68rem;
457
+ font-weight: 650;
458
+ letter-spacing: 0.04em;
459
+ }
460
+
421
461
  .cm-hud-status {
422
462
  width: 0.48rem;
423
463
  height: 0.48rem;
@@ -533,6 +573,34 @@
533
573
  box-shadow: inset 0 0 20px hsl(var(--primary) / 0.04);
534
574
  }
535
575
 
576
+ .cm-search--hud {
577
+ width: 0;
578
+ max-width: min(24rem, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size)));
579
+ min-height: var(--cm-hud-size);
580
+ padding-inline: 0;
581
+ border-width: 0;
582
+ opacity: 0;
583
+ overflow: hidden;
584
+ pointer-events: none;
585
+ transform: scaleX(0.92);
586
+ transform-origin: right center;
587
+ transition:
588
+ width 180ms ease,
589
+ padding-inline 180ms ease,
590
+ opacity 150ms ease,
591
+ transform 180ms ease,
592
+ border-color 180ms ease;
593
+ }
594
+
595
+ .cm-app-chrome__search[data-open="true"] .cm-search--hud {
596
+ width: clamp(13rem, 29vw, 24rem);
597
+ padding-inline: 0.85rem;
598
+ border-width: 1px;
599
+ opacity: 1;
600
+ pointer-events: auto;
601
+ transform: scaleX(1);
602
+ }
603
+
536
604
  .cm-search input,
537
605
  .cm-search__input {
538
606
  min-width: 0;
@@ -842,17 +910,27 @@
842
910
  }
843
911
 
844
912
  @container (max-width: 31rem) {
845
- .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-value,
846
913
  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-address,
847
914
  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-label {
848
915
  display: none;
849
916
  }
850
917
 
851
- .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-button,
852
- .cm-app-chrome__hud-item[data-priority="medium"] .cm-session-trigger {
918
+ .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet .cm-hud-value {
919
+ display: none;
920
+ }
921
+
922
+ .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet {
853
923
  width: var(--cm-hud-size);
924
+ min-width: var(--cm-hud-size);
854
925
  padding-inline: 0;
855
926
  }
927
+
928
+ .cm-app-chrome__hud-item[data-priority="medium"] .cm-session-trigger {
929
+ width: auto;
930
+ min-width: max-content;
931
+ max-width: min(12rem, 58vw);
932
+ padding-inline: 0.72rem;
933
+ }
856
934
  }
857
935
 
858
936
  @media (max-width: 820px) {
@@ -883,7 +961,13 @@
883
961
  }
884
962
 
885
963
  .cm-app-chrome__hud-group {
886
- max-width: min(100%, 100vw - var(--cm-chrome-safe) * 2);
964
+ width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2));
965
+ }
966
+
967
+ .cm-app-chrome__hud-item,
968
+ .cm-app-chrome__hud-fold,
969
+ .cm-app-chrome__search {
970
+ min-width: auto;
887
971
  }
888
972
 
889
973
  .cm-app-chrome__navdock {
@@ -935,6 +1019,20 @@
935
1019
  .cm-hud-overflow {
936
1020
  display: inline-flex;
937
1021
  }
1022
+
1023
+ .cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-item,
1024
+ .cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-fold {
1025
+ display: none;
1026
+ }
1027
+
1028
+ .cm-app-chrome__search[data-open="true"] {
1029
+ flex: 1 1 auto;
1030
+ min-width: 0;
1031
+ }
1032
+
1033
+ .cm-app-chrome__search[data-open="true"] .cm-search--hud {
1034
+ width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size) - var(--cm-chrome-gap)));
1035
+ }
938
1036
  }
939
1037
 
940
1038
  /* ── Form Controls ── */
@@ -1,2 +1,2 @@
1
- export declare const sessionCss = "/**\n * Compose.Market Session Shell\n * @compose-market/theme/css/session\n */\n\n.cm-session-menu {\n position: relative;\n}\n\n.cm-session-trigger {\n border-color: hsl(var(--primary) / 0.35);\n background: hsl(var(--primary) / 0.08);\n color: hsl(var(--primary));\n}\n\n.cm-app-chrome__hud .cm-session-menu,\n.cm-app-chrome__hud-popover .cm-session-menu {\n min-width: 0;\n}\n\n.cm-app-chrome__hud .cm-session-trigger,\n.cm-app-chrome__hud-popover .cm-session-trigger {\n width: auto;\n min-width: var(--cm-hud-size, 2.75rem);\n min-height: var(--cm-hud-size, 2.75rem);\n height: var(--cm-hud-size, 2.75rem);\n padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);\n border-radius: 999px;\n white-space: nowrap;\n}\n\n.cm-session-trigger--active {\n background: hsl(var(--primary) / 0.12);\n}\n\n.cm-session-trigger__mobile {\n display: none;\n}\n\n.cm-session-menu__dropdown {\n position: absolute;\n top: calc(100% + 0.5rem);\n right: 0;\n width: 14.5rem;\n z-index: 60;\n overflow: hidden;\n}\n\n.cm-app-chrome__hud .cm-session-menu__dropdown,\n.cm-app-chrome__hud-popover .cm-session-menu__dropdown {\n z-index: 95;\n border-radius: 18px;\n width: min(17rem, calc(100vw - 1.5rem));\n}\n\n.cm-session-menu__header {\n display: grid;\n gap: 0.35rem;\n padding: 0.8rem 0.9rem;\n border-bottom: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-session-menu__row,\n.cm-session-summary__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n font-size: 0.72rem;\n}\n\n.cm-session-menu__row span,\n.cm-session-summary__row span,\n.cm-session-current__cell span,\n.cm-session-key__cell span {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-session-menu__row strong,\n.cm-session-summary__row strong,\n.cm-session-current__cell strong,\n.cm-session-key__cell strong {\n color: hsl(var(--foreground));\n overflow-wrap: anywhere;\n text-align: right;\n}\n\n.cm-session-menu__item {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.8rem 0.9rem;\n border: 0;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-menu__item:hover {\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal {\n max-width: 34rem;\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-session-modal__title-wrap,\n.cm-session-section__label,\n.cm-session-current__title {\n display: inline-flex;\n align-items: center;\n gap: 0.55rem;\n}\n\n.cm-session-modal__body {\n display: grid;\n gap: 1rem;\n}\n\n.cm-session-section {\n display: grid;\n gap: 0.55rem;\n}\n\n.cm-session-section__label,\n.cm-session-manage__header {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-session-choice-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 0.55rem;\n}\n\n.cm-session-choice {\n min-height: 2.3rem;\n padding: 0.45rem 0.6rem;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-choice.active {\n border-color: hsl(var(--primary));\n background: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.cm-session-budget-input {\n display: grid;\n gap: 0.45rem;\n}\n\n.cm-session-budget-input__row {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n}\n\n.cm-session-budget-input__row .cm-form-input {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.cm-session-budget-input__prefix,\n.cm-session-budget-input__suffix,\n.cm-session-budget-input__description {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n}\n\n.cm-session-budget-input__description {\n line-height: 1.5;\n}\n\n.cm-session-summary,\n.cm-session-usage {\n display: grid;\n gap: 0.45rem;\n padding: 0.9rem 1rem;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal__footer {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding-top: 0.2rem;\n}\n\n.cm-session-current {\n background: linear-gradient(135deg, hsl(var(--primary) / 0.12), transparent 72%);\n border-color: hsl(var(--primary) / 0.35);\n}\n\n.cm-session-current__title {\n color: hsl(var(--primary));\n font-size: 0.82rem;\n font-weight: 700;\n margin-bottom: 0.85rem;\n}\n\n.cm-session-current__grid,\n.cm-session-key__grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0.75rem;\n}\n\n.cm-session-current__cell,\n.cm-session-key__cell {\n display: grid;\n gap: 0.2rem;\n}\n\n.cm-session-manage__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.cm-session-empty {\n display: grid;\n place-items: center;\n gap: 0.45rem;\n min-height: 9rem;\n padding: 1rem;\n border: 1px dashed hsl(var(--border));\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-session-empty__action {\n border: 0;\n background: transparent;\n color: hsl(var(--primary));\n cursor: pointer;\n font-size: 0.86rem;\n}\n\n@media (max-width: 820px) {\n .cm-app-chrome__hud .cm-session-trigger span:not(.cm-session-trigger__mobile) {\n display: none;\n }\n\n .cm-app-chrome__hud .cm-session-trigger__mobile {\n display: inline-flex;\n }\n\n .cm-app-chrome__hud .cm-session-trigger {\n width: auto;\n min-width: var(--cm-hud-size, 2.75rem);\n padding-inline: 0.72rem;\n }\n}\n\n@media (max-width: 380px) {\n .cm-app-chrome__hud .cm-session-trigger {\n width: var(--cm-hud-size, 2.75rem);\n padding-inline: 0;\n }\n\n .cm-app-chrome__hud .cm-session-trigger__mobile {\n display: none;\n }\n}\n\n.cm-session-key-list {\n display: grid;\n gap: 0.75rem;\n max-height: 22rem;\n overflow-y: auto;\n padding-right: 0.15rem;\n}\n\n.cm-session-key {\n display: grid;\n gap: 0.65rem;\n}\n\n.cm-session-key__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n}\n\n.cm-session-key__actions {\n display: flex;\n align-items: center;\n gap: 0.35rem;\n}\n\n.cm-session-key__icon {\n width: 2rem;\n height: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n}\n\n.cm-session-key__icon:hover {\n background: hsl(var(--muted) / 0.45);\n color: hsl(var(--foreground));\n}\n\n.cm-session-key__icon.danger:hover {\n border-color: hsl(var(--destructive) / 0.45);\n color: hsl(var(--destructive));\n}\n\n.cm-session-key__id {\n font-family: var(--font-mono), monospace;\n color: hsl(var(--muted-foreground));\n font-size: 0.72rem;\n overflow-wrap: anywhere;\n}\n\n.cm-session-generated {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 0.6rem;\n}\n\n@media (max-width: 960px) {\n .cm-session-trigger__mobile {\n display: inline;\n }\n}\n\n@media (max-width: 720px) {\n .cm-session-choice-grid,\n .cm-session-current__grid,\n .cm-session-key__grid {\n grid-template-columns: 1fr;\n }\n\n .cm-session-modal {\n max-width: 100%;\n }\n\n .cm-session-modal__footer,\n .cm-session-manage__header {\n flex-direction: column;\n align-items: stretch;\n }\n\n .cm-session-menu__dropdown {\n width: min(18rem, calc(100vw - 2rem));\n }\n}\n\n@media (max-width: 480px) {\n .cm-session-choice-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n";
1
+ export declare const sessionCss = "/**\n * Compose.Market Session Shell\n * @compose-market/theme/css/session\n */\n\n.cm-session-menu {\n position: relative;\n}\n\n.cm-session-trigger {\n border-color: hsl(var(--primary) / 0.35);\n background:\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.16), transparent 38%),\n radial-gradient(circle at 82% 100%, hsl(var(--accent) / 0.12), transparent 42%),\n linear-gradient(145deg, hsl(226 21% 22% / 0.56), hsl(221 50% 8% / 0.48));\n color: hsl(var(--primary));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 22px hsl(var(--primary) / 0.11);\n}\n\n.cm-app-chrome__hud .cm-session-menu,\n.cm-app-chrome__hud-popover .cm-session-menu {\n min-width: 0;\n}\n\n.cm-app-chrome__hud .cm-session-trigger,\n.cm-app-chrome__hud-popover .cm-session-trigger {\n width: auto;\n min-width: max-content;\n max-width: min(13.5rem, 52vw);\n min-height: var(--cm-hud-size, 2.75rem);\n height: var(--cm-hud-size, 2.75rem);\n padding-inline: clamp(0.78rem, 1.35vw, 1rem);\n border-radius: 999px;\n white-space: nowrap;\n}\n\n.cm-session-trigger--active {\n background: hsl(var(--primary) / 0.12);\n}\n\n.cm-session-trigger__mobile {\n display: none;\n}\n\n.cm-session-menu__dropdown {\n position: absolute;\n top: calc(100% + 0.5rem);\n right: 0;\n width: 14.5rem;\n z-index: 60;\n overflow: hidden;\n}\n\n.cm-app-chrome__hud .cm-session-menu__dropdown,\n.cm-app-chrome__hud-popover .cm-session-menu__dropdown {\n z-index: 95;\n border-radius: 18px;\n width: min(17rem, calc(100vw - 1.5rem));\n}\n\n.cm-session-menu__header {\n display: grid;\n gap: 0.35rem;\n padding: 0.8rem 0.9rem;\n border-bottom: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-session-menu__row,\n.cm-session-summary__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n font-size: 0.72rem;\n}\n\n.cm-session-menu__row span,\n.cm-session-summary__row span,\n.cm-session-current__cell span,\n.cm-session-key__cell span {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-session-menu__row strong,\n.cm-session-summary__row strong,\n.cm-session-current__cell strong,\n.cm-session-key__cell strong {\n color: hsl(var(--foreground));\n overflow-wrap: anywhere;\n text-align: right;\n}\n\n.cm-session-menu__item {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.8rem 0.9rem;\n border: 0;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-menu__item:hover {\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal {\n max-width: 34rem;\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-session-modal__title-wrap,\n.cm-session-section__label,\n.cm-session-current__title {\n display: inline-flex;\n align-items: center;\n gap: 0.55rem;\n}\n\n.cm-session-modal__body {\n display: grid;\n gap: 1rem;\n}\n\n.cm-session-section {\n display: grid;\n gap: 0.55rem;\n}\n\n.cm-session-section__label,\n.cm-session-manage__header {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-session-choice-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 0.55rem;\n}\n\n.cm-session-choice {\n min-height: 2.3rem;\n padding: 0.45rem 0.6rem;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-choice.active {\n border-color: hsl(var(--primary));\n background: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.cm-session-budget-input {\n display: grid;\n gap: 0.45rem;\n}\n\n.cm-session-budget-input__row {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n}\n\n.cm-session-budget-input__row .cm-form-input {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.cm-session-budget-input__prefix,\n.cm-session-budget-input__suffix,\n.cm-session-budget-input__description {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n}\n\n.cm-session-budget-input__description {\n line-height: 1.5;\n}\n\n.cm-session-summary,\n.cm-session-usage {\n display: grid;\n gap: 0.45rem;\n padding: 0.9rem 1rem;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal__footer {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding-top: 0.2rem;\n}\n\n.cm-session-current {\n background: linear-gradient(135deg, hsl(var(--primary) / 0.12), transparent 72%);\n border-color: hsl(var(--primary) / 0.35);\n}\n\n.cm-session-current__title {\n color: hsl(var(--primary));\n font-size: 0.82rem;\n font-weight: 700;\n margin-bottom: 0.85rem;\n}\n\n.cm-session-current__grid,\n.cm-session-key__grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0.75rem;\n}\n\n.cm-session-current__cell,\n.cm-session-key__cell {\n display: grid;\n gap: 0.2rem;\n}\n\n.cm-session-manage__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.cm-session-empty {\n display: grid;\n place-items: center;\n gap: 0.45rem;\n min-height: 9rem;\n padding: 1rem;\n border: 1px dashed hsl(var(--border));\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-session-empty__action {\n border: 0;\n background: transparent;\n color: hsl(var(--primary));\n cursor: pointer;\n font-size: 0.86rem;\n}\n\n@media (max-width: 820px) {\n .cm-app-chrome__hud .cm-session-trigger span:not(.cm-session-trigger__mobile) {\n display: none;\n }\n\n .cm-app-chrome__hud .cm-session-trigger__mobile {\n display: inline-flex;\n }\n\n .cm-app-chrome__hud .cm-session-trigger {\n width: auto;\n min-width: max-content;\n padding-inline: 0.72rem;\n }\n}\n\n@media (max-width: 380px) {\n .cm-app-chrome__hud .cm-session-trigger {\n max-width: min(10.5rem, 58vw);\n }\n}\n\n.cm-session-key-list {\n display: grid;\n gap: 0.75rem;\n max-height: 22rem;\n overflow-y: auto;\n padding-right: 0.15rem;\n}\n\n.cm-session-key {\n display: grid;\n gap: 0.65rem;\n}\n\n.cm-session-key__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n}\n\n.cm-session-key__actions {\n display: flex;\n align-items: center;\n gap: 0.35rem;\n}\n\n.cm-session-key__icon {\n width: 2rem;\n height: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n}\n\n.cm-session-key__icon:hover {\n background: hsl(var(--muted) / 0.45);\n color: hsl(var(--foreground));\n}\n\n.cm-session-key__icon.danger:hover {\n border-color: hsl(var(--destructive) / 0.45);\n color: hsl(var(--destructive));\n}\n\n.cm-session-key__id {\n font-family: var(--font-mono), monospace;\n color: hsl(var(--muted-foreground));\n font-size: 0.72rem;\n overflow-wrap: anywhere;\n}\n\n.cm-session-generated {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 0.6rem;\n}\n\n@media (max-width: 960px) {\n .cm-session-trigger__mobile {\n display: inline;\n }\n}\n\n@media (max-width: 720px) {\n .cm-session-choice-grid,\n .cm-session-current__grid,\n .cm-session-key__grid {\n grid-template-columns: 1fr;\n }\n\n .cm-session-modal {\n max-width: 100%;\n }\n\n .cm-session-modal__footer,\n .cm-session-manage__header {\n flex-direction: column;\n align-items: stretch;\n }\n\n .cm-session-menu__dropdown {\n width: min(18rem, calc(100vw - 2rem));\n }\n}\n\n@media (max-width: 480px) {\n .cm-session-choice-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n";
2
2
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,kpQAoYtB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,s2QAsYtB,CAAC"}
@@ -9,8 +9,14 @@ export const sessionCss = `/**
9
9
 
10
10
  .cm-session-trigger {
11
11
  border-color: hsl(var(--primary) / 0.35);
12
- background: hsl(var(--primary) / 0.08);
12
+ background:
13
+ radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.16), transparent 38%),
14
+ radial-gradient(circle at 82% 100%, hsl(var(--accent) / 0.12), transparent 42%),
15
+ linear-gradient(145deg, hsl(226 21% 22% / 0.56), hsl(221 50% 8% / 0.48));
13
16
  color: hsl(var(--primary));
17
+ box-shadow:
18
+ inset 0 1px 0 hsl(0 0% 100% / 0.07),
19
+ 0 0 22px hsl(var(--primary) / 0.11);
14
20
  }
15
21
 
16
22
  .cm-app-chrome__hud .cm-session-menu,
@@ -21,10 +27,11 @@ export const sessionCss = `/**
21
27
  .cm-app-chrome__hud .cm-session-trigger,
22
28
  .cm-app-chrome__hud-popover .cm-session-trigger {
23
29
  width: auto;
24
- min-width: var(--cm-hud-size, 2.75rem);
30
+ min-width: max-content;
31
+ max-width: min(13.5rem, 52vw);
25
32
  min-height: var(--cm-hud-size, 2.75rem);
26
33
  height: var(--cm-hud-size, 2.75rem);
27
- padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);
34
+ padding-inline: clamp(0.78rem, 1.35vw, 1rem);
28
35
  border-radius: 999px;
29
36
  white-space: nowrap;
30
37
  }
@@ -274,19 +281,14 @@ export const sessionCss = `/**
274
281
 
275
282
  .cm-app-chrome__hud .cm-session-trigger {
276
283
  width: auto;
277
- min-width: var(--cm-hud-size, 2.75rem);
284
+ min-width: max-content;
278
285
  padding-inline: 0.72rem;
279
286
  }
280
287
  }
281
288
 
282
289
  @media (max-width: 380px) {
283
290
  .cm-app-chrome__hud .cm-session-trigger {
284
- width: var(--cm-hud-size, 2.75rem);
285
- padding-inline: 0;
286
- }
287
-
288
- .cm-app-chrome__hud .cm-session-trigger__mobile {
289
- display: none;
291
+ max-width: min(10.5rem, 58vw);
290
292
  }
291
293
  }
292
294
 
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoYzB,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsYzB,CAAC"}
@@ -1,2 +1,2 @@
1
- export declare const shellCss = "/**\n * Compose.Market Shared Shell\n * @compose-market/theme/css/shell\n */\n\n:root {\n --cm-shell-glow-primary: hsl(var(--primary) / 0.3);\n --cm-shell-glow-accent: hsl(var(--accent) / 0.16);\n --cm-shell-surface:\n linear-gradient(145deg, hsl(226 21% 23% / 0.38), hsl(221 50% 9% / 0.24)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),\n hsl(224 36% 13% / 0.28);\n --cm-shell-border: hsl(var(--primary) / 0.18);\n --cm-shell-shadow:\n 0 0 40px hsl(var(--primary) / 0.055),\n inset 0 1px 0 hsl(0 0% 100% / 0.06);\n --cm-chrome-gutter: clamp(0.7rem, 1.4vw, 1.15rem);\n --cm-chrome-sidebar: 16rem;\n --cm-chrome-sidebar-collapsed: 4.7rem;\n --cm-chrome-topbar: 4rem;\n --cm-chrome-mobile: 3.55rem;\n --cm-page-max: 88rem;\n}\n\n.cm-shell-stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.cm-shell-cluster {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n flex-wrap: wrap;\n}\n\n.cm-shell-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.55rem;\n min-height: 2.3rem;\n padding: 0 0.95rem;\n border-radius: 999px;\n border: 1px solid hsl(var(--primary) / 0.22);\n background:\n linear-gradient(180deg, hsl(var(--card) / 0.72), hsl(var(--background) / 0.36));\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.76rem;\n font-weight: 600;\n letter-spacing: 0.08em;\n line-height: 1;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n transform 160ms ease,\n background-color 160ms ease,\n border-color 180ms ease,\n color 180ms ease,\n box-shadow 180ms ease;\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.04),\n 0 0 16px hsl(var(--primary) / 0.035);\n backdrop-filter: blur(12px) saturate(1.08);\n}\n\n.cm-shell-button:hover:not(:disabled) {\n transform: translateY(-1px);\n border-color: hsl(var(--primary) / 0.38);\n}\n\n.cm-shell-button:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.cm-shell-button--primary {\n background:\n linear-gradient(135deg, #8aebff, #22d3ee);\n color: hsl(var(--primary-foreground));\n border-color: hsl(var(--primary) / 0.56);\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.16),\n 0 0 20px var(--cm-shell-glow-primary);\n}\n\n.cm-shell-button--primary:hover:not(:disabled) {\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.18),\n 0 0 24px var(--cm-shell-glow-primary),\n 0 0 18px var(--cm-shell-glow-accent);\n}\n\n.cm-shell-button--secondary {\n background: hsl(221 50% 9% / 0.36);\n border-color: hsl(var(--primary) / 0.2);\n color: hsl(var(--primary));\n}\n\n.cm-shell-button--secondary:hover:not(:disabled) {\n background: hsl(var(--primary) / 0.1);\n box-shadow: 0 0 18px hsl(var(--primary) / 0.1);\n}\n\n.cm-shell-button--ghost {\n background: transparent;\n border-color: transparent;\n color: hsl(var(--muted-foreground));\n box-shadow: none;\n}\n\n.cm-shell-button--ghost:hover:not(:disabled) {\n color: hsl(var(--foreground));\n background: hsl(var(--muted) / 0.24);\n}\n\n.cm-shell-button--danger {\n background: hsl(var(--destructive) / 0.12);\n border-color: hsl(var(--destructive) / 0.42);\n color: hsl(var(--destructive-foreground));\n}\n\n.cm-shell-button--danger:hover:not(:disabled) {\n background: hsl(var(--destructive) / 0.2);\n}\n\n.cm-shell-button--sm {\n min-height: 2rem;\n padding: 0 0.75rem;\n font-size: 0.7rem;\n}\n\n.cm-shell-button--lg {\n min-height: 2.65rem;\n padding: 0 1.1rem;\n font-size: 0.82rem;\n}\n\n.cm-shell-button--icon {\n width: 2.3rem;\n padding: 0;\n}\n\n.cm-shell-pill {\n display: inline-flex;\n align-items: center;\n gap: 0.45rem;\n min-height: 1.75rem;\n padding: 0 0.72rem;\n border-radius: 999px;\n border: 1px solid hsl(var(--primary) / 0.2);\n background:\n linear-gradient(180deg, hsl(var(--card) / 0.76), hsl(var(--muted) / 0.26));\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.cm-shell-pill strong,\n.cm-shell-pill span {\n color: inherit;\n}\n\n.cm-shell-panel {\n border: 1px solid var(--cm-shell-border);\n border-radius: 12px;\n background: var(--cm-shell-surface);\n box-shadow: var(--cm-shell-shadow);\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-shell-page {\n container-type: inline-size;\n width: min(var(--cm-page-max), 100%);\n min-width: 0;\n margin-inline: auto;\n display: grid;\n gap: clamp(1rem, 2.2cqi, 1.55rem);\n}\n\n.cm-shell-page--full {\n --cm-page-max: none;\n}\n\n.cm-shell-page-body {\n display: grid;\n gap: clamp(0.9rem, 2cqi, 1.35rem);\n min-width: 0;\n}\n\n.cm-app-chrome {\n --cm-chrome-safe: clamp(0.62rem, 1.25vw, 1rem);\n --cm-chrome-gap: clamp(0.34rem, 0.75vw, 0.55rem);\n --cm-hud-size: clamp(2.65rem, 4.1vw, 3rem);\n --cm-hud-radius: 999px;\n position: relative;\n min-height: 100dvh;\n isolation: isolate;\n}\n\n.cm-app-chrome__main {\n min-width: 0;\n min-height: 100dvh;\n padding:\n calc(env(safe-area-inset-top) + clamp(4.6rem, 7vw, 5.6rem))\n clamp(0.85rem, 2.3vw, 2rem)\n calc(env(safe-area-inset-bottom) + clamp(5.1rem, 7.4vw, 6.1rem));\n}\n\n.cm-app-chrome__navdock {\n position: fixed;\n inset-block-start: 50%;\n inset-inline-start: calc(env(safe-area-inset-left) + var(--cm-chrome-safe));\n z-index: 55;\n display: grid;\n gap: var(--cm-chrome-gap);\n transform: translate3d(0, -50%, 0);\n pointer-events: none;\n}\n\n.cm-app-chrome__navitem,\n.cm-hud-button {\n position: relative;\n display: inline-grid;\n place-items: center;\n width: var(--cm-hud-size);\n min-width: var(--cm-hud-size);\n height: var(--cm-hud-size);\n min-height: var(--cm-hud-size);\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: var(--cm-hud-radius);\n background:\n radial-gradient(circle at 30% 14%, hsl(var(--primary) / 0.15), transparent 38%),\n radial-gradient(circle at 78% 90%, hsl(var(--accent) / 0.12), transparent 42%),\n linear-gradient(145deg, hsl(226 21% 23% / 0.48), hsl(221 50% 9% / 0.38));\n color: hsl(var(--muted-foreground));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n inset 0 -1px 0 hsl(var(--primary) / 0.07),\n 0 0 26px hsl(var(--primary) / 0.065);\n backdrop-filter: blur(18px) saturate(1.16);\n cursor: pointer;\n pointer-events: auto;\n text-decoration: none;\n transition:\n transform 160ms ease,\n border-color 180ms ease,\n background-color 180ms ease,\n color 180ms ease,\n box-shadow 180ms ease,\n opacity 180ms ease;\n}\n\n.cm-app-chrome__navitem::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.28rem;\n top: 50%;\n width: 0.17rem;\n height: 48%;\n border-radius: 999px;\n background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--accent)));\n box-shadow:\n 0 0 12px hsl(var(--primary) / 0.72),\n 0 0 18px hsl(var(--accent) / 0.35);\n opacity: 0;\n transform: translateY(-50%) scaleY(0.45);\n transition:\n opacity 180ms ease,\n transform 180ms ease;\n}\n\n.cm-app-chrome__navitem:hover,\n.cm-app-chrome__navitem:focus-visible,\n.cm-app-chrome__navitem[data-active=\"true\"],\n.cm-hud-button:hover,\n.cm-hud-button:focus-visible,\n.cm-hud-button[data-active=\"true\"] {\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.42);\n outline: none;\n transform: translate3d(0, -1px, 0);\n box-shadow:\n inset 0 0 24px hsl(var(--primary) / 0.075),\n 0 0 24px hsl(var(--primary) / 0.14),\n 0 0 18px hsl(var(--accent) / 0.08);\n}\n\n.cm-app-chrome__navitem[data-active=\"true\"] {\n color: hsl(var(--primary));\n border-color: hsl(var(--primary) / 0.52);\n}\n\n.cm-app-chrome__navitem[data-active=\"true\"]::before {\n opacity: 1;\n transform: translateY(-50%) scaleY(1);\n}\n\n.cm-app-chrome__navitem-icon,\n.cm-hud-icon,\n.cm-app-nav__icon {\n display: inline-flex;\n width: 1.12rem;\n height: 1.12rem;\n align-items: center;\n justify-content: center;\n color: currentColor;\n}\n\n.cm-app-chrome__tooltip {\n position: absolute;\n inset-inline-start: calc(100% + 0.55rem);\n top: 50%;\n max-width: min(14rem, 52vw);\n padding: 0.42rem 0.58rem;\n border: 1px solid hsl(var(--primary) / 0.22);\n border-radius: 999px;\n background: hsl(221 50% 8% / 0.84);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.64rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n opacity: 0;\n pointer-events: none;\n transform: translate3d(-0.18rem, -50%, 0);\n transition:\n opacity 150ms ease,\n transform 150ms ease;\n}\n\n.cm-app-chrome__navitem:hover .cm-app-chrome__tooltip,\n.cm-app-chrome__navitem:focus-visible .cm-app-chrome__tooltip {\n opacity: 1;\n transform: translate3d(0, -50%, 0);\n}\n\n.cm-app-chrome__hud {\n position: fixed;\n inset-block-start: calc(env(safe-area-inset-top) + var(--cm-chrome-safe));\n inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));\n z-index: 60;\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n pointer-events: none;\n}\n\n.cm-app-chrome__hud-group {\n container-type: inline-size;\n display: flex;\n max-width: min(100%, 47rem);\n min-width: 0;\n align-items: center;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n pointer-events: auto;\n}\n\n.cm-app-chrome__hud-item,\n.cm-app-chrome__hud-fold {\n position: relative;\n min-width: 0;\n flex: 0 1 auto;\n}\n\n.cm-app-chrome__hud-item[data-priority=\"low\"] {\n flex-shrink: 1;\n}\n\n.cm-hud-button {\n display: inline-flex;\n width: auto;\n max-width: min(15.5rem, 52vw);\n justify-content: center;\n gap: 0.52rem;\n padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n font-weight: 700;\n letter-spacing: 0.06em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.cm-hud-button--icon,\n.cm-hud-button[data-icon-only=\"true\"] {\n width: var(--cm-hud-size);\n padding-inline: 0;\n}\n\n.cm-hud-value,\n.cm-hud-address {\n display: inline-block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-hud-value {\n color: hsl(var(--foreground));\n}\n\n.cm-hud-address {\n color: hsl(var(--primary));\n max-width: 8.8rem;\n}\n\n.cm-hud-status {\n width: 0.48rem;\n height: 0.48rem;\n border-radius: 999px;\n background: hsl(var(--primary));\n box-shadow: 0 0 12px hsl(var(--primary) / 0.62);\n flex: 0 0 auto;\n}\n\n.cm-hud-status[data-tone=\"red\"] {\n background: hsl(0 84% 66%);\n box-shadow: 0 0 12px hsl(0 84% 66% / 0.54);\n}\n\n.cm-hud-status[data-tone=\"blue\"] {\n background: hsl(211 100% 64%);\n box-shadow: 0 0 12px hsl(211 100% 64% / 0.54);\n}\n\n.cm-hud-status[data-state=\"muted\"] {\n background: hsl(var(--muted-foreground));\n box-shadow: none;\n}\n\n.cm-hud-overflow {\n display: none;\n}\n\n.cm-app-chrome__hud-popover {\n position: absolute;\n top: calc(100% + 0.58rem);\n right: 0;\n z-index: 90;\n width: min(21rem, calc(100vw - var(--cm-chrome-safe) * 2));\n max-height: min(74dvh, 34rem);\n overflow: auto;\n border: 1px solid hsl(var(--primary) / 0.2);\n border-radius: 18px;\n background:\n radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),\n radial-gradient(circle at 92% 100%, hsl(var(--accent) / 0.12), transparent 36%),\n linear-gradient(145deg, hsl(226 21% 20% / 0.78), hsl(221 50% 7% / 0.86));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 36px hsl(var(--primary) / 0.12);\n backdrop-filter: blur(22px) saturate(1.16);\n}\n\n.cm-hud-menu {\n border: 1px solid hsl(var(--primary) / 0.2);\n border-radius: 16px;\n background:\n radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),\n linear-gradient(145deg, hsl(226 21% 20% / 0.82), hsl(221 50% 7% / 0.9));\n color: hsl(var(--foreground));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 28px hsl(var(--primary) / 0.12);\n backdrop-filter: blur(20px) saturate(1.14);\n}\n\n.cm-app-chrome__hud-popover--wide {\n width: min(25rem, calc(100vw - var(--cm-chrome-safe) * 2));\n}\n\n.cm-app-chrome__hud-popover-body {\n display: grid;\n gap: 0.58rem;\n padding: 0.75rem;\n}\n\n.cm-app-chrome__hud-popover-title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.82rem;\n font-weight: 800;\n letter-spacing: 0.04em;\n}\n\n.cm-app-chrome__hud-popover-copy {\n color: hsl(var(--muted-foreground));\n font-size: 0.78rem;\n line-height: 1.45;\n}\n\n.cm-app-chrome__hud-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n min-height: 2.65rem;\n padding: 0.42rem;\n border-radius: 14px;\n background: hsl(var(--primary) / 0.055);\n}\n\n.cm-app-chrome__hud-stack {\n display: grid;\n gap: 0.58rem;\n}\n\n.cm-search {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: 0.6rem;\n min-height: 2.55rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.38);\n padding: 0 0.85rem;\n color: hsl(var(--muted-foreground));\n box-shadow: inset 0 0 20px hsl(var(--primary) / 0.04);\n}\n\n.cm-search input,\n.cm-search__input {\n min-width: 0;\n flex: 1;\n border: 0;\n outline: none;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.82rem;\n}\n\n.cm-search input::placeholder,\n.cm-search__input::placeholder {\n color: hsl(var(--muted-foreground) / 0.72);\n}\n\n.cm-app-chrome__sidebar,\n.cm-app-chrome__topbar,\n.cm-app-chrome__mobilebar,\n.cm-app-chrome__drawer {\n display: none;\n}\n\n.cm-app-chrome__brand {\n display: none;\n}\n\n.cm-shell-panel--muted {\n background:\n linear-gradient(145deg, hsl(224 36% 13% / 0.36), hsl(221 50% 9% / 0.72)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.06), transparent 34%);\n}\n\n.cm-shell-panel--ghost {\n background: transparent;\n box-shadow: none;\n}\n\n.cm-shell-panel__body {\n padding: 1rem;\n}\n\n.cm-shell-page-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n padding: 1rem 1.1rem;\n}\n\n.cm-shell-page-header__copy {\n display: flex;\n flex-direction: column;\n gap: 0.32rem;\n}\n\n.cm-shell-page-header__eyebrow {\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n}\n\n.cm-shell-page-header__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: clamp(1.12rem, 1.65vw, 1.52rem);\n letter-spacing: 0.04em;\n line-height: 1.02;\n}\n\n.cm-shell-page-header__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.88rem;\n line-height: 1.45;\n max-width: 48rem;\n}\n\n.cm-shell-stat-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n gap: 0.8rem;\n}\n\n.cm-shell-stat {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.85rem 0.9rem;\n}\n\n.cm-shell-stat__label {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.66rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-shell-stat__value {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-stat__hint {\n color: hsl(var(--muted-foreground));\n font-size: 0.74rem;\n}\n\n.cm-shell-tab-strip {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(var(--muted) / 0.14);\n backdrop-filter: blur(12px);\n}\n\n.cm-shell-tab {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-height: 2.1rem;\n padding: 0 0.85rem;\n border-radius: 999px;\n border: 1px solid transparent;\n background: transparent;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n background-color 180ms ease,\n color 180ms ease,\n border-color 180ms ease,\n box-shadow 180ms ease;\n}\n\n.cm-shell-tab:hover {\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.18);\n}\n\n.cm-shell-tab[data-active=\"true\"],\n.cm-shell-tab[data-state=\"active\"] {\n background:\n linear-gradient(180deg, hsl(var(--primary) / 0.18), hsl(var(--primary) / 0.1));\n border-color: hsl(var(--primary) / 0.36);\n color: hsl(var(--foreground));\n box-shadow:\n inset 0 1px 0 hsl(var(--primary) / 0.16),\n 0 0 18px hsl(var(--primary) / 0.14);\n}\n\n.cm-shell-notice {\n display: flex;\n align-items: center;\n gap: 0.7rem;\n padding: 0.8rem 0.95rem;\n border-radius: 12px;\n border: 1px solid;\n backdrop-filter: blur(12px);\n}\n\n.cm-shell-notice--info {\n background: hsl(var(--primary) / 0.08);\n border-color: hsl(var(--primary) / 0.22);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--success {\n background: hsl(148 75% 24% / 0.18);\n border-color: hsl(148 75% 46% / 0.3);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--warning {\n background: hsl(42 100% 48% / 0.12);\n border-color: hsl(42 100% 52% / 0.25);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--error {\n background: hsl(var(--destructive) / 0.13);\n border-color: hsl(var(--destructive) / 0.28);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n padding: 0.95rem 1rem;\n}\n\n.cm-shell-banner__copy {\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n}\n\n.cm-shell-banner__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.98rem;\n letter-spacing: 0.03em;\n}\n\n.cm-shell-banner__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.84rem;\n line-height: 1.45;\n}\n\n.cm-shell-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n min-height: 18rem;\n padding: 2rem 1.25rem;\n text-align: center;\n}\n\n.cm-shell-empty__icon {\n color: hsl(var(--primary));\n}\n\n.cm-shell-empty__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1.08rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-empty__description {\n color: hsl(var(--muted-foreground));\n max-width: 38rem;\n line-height: 1.55;\n}\n\n.cm-shell-modal-overlay {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n background:\n radial-gradient(circle at 50% 24%, hsl(var(--primary) / 0.08), transparent 28rem),\n hsl(240 30% 2% / 0.82);\n backdrop-filter: blur(12px);\n z-index: 100;\n}\n\n.cm-shell-modal {\n width: min(100%, 46rem);\n max-height: min(90vh, 56rem);\n overflow: auto;\n border-radius: 12px;\n}\n\n.cm-shell-modal__header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n padding: 1rem 1rem 0;\n}\n\n.cm-shell-modal__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-modal__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.84rem;\n margin-top: 0.3rem;\n line-height: 1.45;\n}\n\n.cm-shell-modal__body {\n padding: 1rem;\n}\n\n@container (max-width: 42rem) {\n .cm-app-chrome__hud-item[data-priority=\"low\"] {\n display: none;\n }\n\n .cm-hud-overflow {\n display: inline-flex;\n }\n}\n\n@container (max-width: 31rem) {\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-value,\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-address,\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-label {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-button,\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-session-trigger {\n width: var(--cm-hud-size);\n padding-inline: 0;\n }\n}\n\n@media (max-width: 820px) {\n .cm-shell-page-header,\n .cm-shell-banner {\n flex-direction: column;\n align-items: stretch;\n }\n\n .cm-shell-stat-grid {\n grid-template-columns: 1fr;\n }\n\n .cm-shell-tab-strip {\n width: 100%;\n overflow-x: auto;\n }\n\n .cm-app-chrome__main {\n padding:\n calc(env(safe-area-inset-top) + clamp(4.25rem, 14vw, 4.85rem))\n clamp(0.75rem, 4.2vw, 1.05rem)\n calc(env(safe-area-inset-bottom) + clamp(5.55rem, 16vw, 6.55rem));\n }\n\n .cm-app-chrome__hud {\n justify-content: flex-end;\n }\n\n .cm-app-chrome__hud-group {\n max-width: min(100%, 100vw - var(--cm-chrome-safe) * 2);\n }\n\n .cm-app-chrome__navdock {\n inset-block-start: auto;\n inset-block-end: calc(env(safe-area-inset-bottom) + var(--cm-chrome-safe));\n inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));\n display: flex;\n justify-content: center;\n overflow-x: auto;\n padding: 0.22rem;\n transform: none;\n scrollbar-width: none;\n }\n\n .cm-app-chrome__navdock::-webkit-scrollbar {\n display: none;\n }\n\n .cm-app-chrome__navitem {\n flex: 0 0 auto;\n }\n\n .cm-app-chrome__navitem::before {\n inset-inline-start: 50%;\n top: auto;\n bottom: -0.22rem;\n width: 46%;\n height: 0.16rem;\n transform: translateX(-50%) scaleX(0.45);\n }\n\n .cm-app-chrome__navitem[data-active=\"true\"]::before {\n transform: translateX(-50%) scaleX(1);\n }\n\n .cm-app-chrome__tooltip {\n display: none;\n }\n\n .cm-hud-address,\n .cm-hud-label {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"low\"] {\n display: none;\n }\n\n .cm-hud-overflow {\n display: inline-flex;\n }\n}\n\n/* \u2500\u2500 Form Controls \u2500\u2500 */\n.cm-form-group {\n margin-bottom: 14px;\n}\n\n.cm-form-group label {\n display: block;\n margin-bottom: 6px;\n font-family: var(--font-mono), monospace;\n font-size: 11px;\n color: hsl(var(--muted-foreground));\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-form-input,\n.cm-form-textarea,\n.cm-form-select {\n width: 100%;\n padding: 10px 12px;\n background: hsl(222 47% 7% / 0.84);\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 10px;\n color: hsl(var(--foreground));\n font-size: 14px;\n font-family: var(--font-sans), sans-serif;\n transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;\n}\n\n.cm-form-input:focus,\n.cm-form-textarea:focus,\n.cm-form-select:focus {\n outline: none;\n border-color: hsl(var(--primary));\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.24),\n inset 0 0 20px hsl(var(--primary) / 0.06);\n background: hsl(var(--background) / 0.96);\n}\n\n.cm-form-input:disabled,\n.cm-form-textarea:disabled,\n.cm-form-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.cm-form-textarea {\n min-height: 80px;\n resize: vertical;\n}\n\n/* \u2500\u2500 Notification / Alert \u2500\u2500 */\n.cm-notification {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n animation: cm-slide-in 0.2s ease;\n}\n\n@keyframes cm-slide-in {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.cm-notification--success {\n background: hsl(142 71% 45% / 0.15);\n color: hsl(142 71% 45%);\n border: 1px solid hsl(142 71% 45%);\n}\n\n.cm-notification--error {\n background: hsl(var(--destructive) / 0.15);\n color: hsl(var(--destructive));\n border: 1px solid hsl(var(--destructive));\n}\n\n.cm-notification--warning {\n background: hsl(42 100% 48% / 0.12);\n color: hsl(42 100% 52%);\n border: 1px solid hsl(42 100% 52% / 0.5);\n}\n\n.cm-notification--info {\n background: hsl(var(--primary) / 0.08);\n border: 1px solid hsl(var(--primary) / 0.22);\n color: hsl(var(--foreground));\n}\n\n/* \u2500\u2500 Navigation \u2500\u2500 */\n.cm-nav {\n display: flex;\n gap: 4px;\n padding: 12px 0 0;\n}\n\n.cm-nav-btn {\n padding: 8px 14px;\n background: transparent;\n border: 1px solid transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n border-radius: var(--radius, 0.25rem);\n font-size: 11px;\n font-weight: 600;\n font-family: var(--font-mono), monospace;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n transition: all 0.2s;\n}\n\n.cm-nav-btn:hover {\n color: hsl(var(--foreground));\n background: hsl(var(--muted));\n border-color: hsl(var(--primary) / 0.18);\n}\n\n.cm-nav-btn[data-active=\"true\"],\n.cm-nav-btn.active {\n color: hsl(var(--primary));\n background: hsl(var(--primary) / 0.12);\n border-color: hsl(var(--primary) / 0.28);\n}\n\n/* \u2500\u2500 Loading State \u2500\u2500 */\n.cm-loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px;\n color: hsl(var(--muted-foreground));\n}\n\n.cm-spinner {\n animation: cm-spin 1s linear infinite;\n}\n\n@keyframes cm-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500 Badge / Tag \u2500\u2500 */\n.cm-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.cm-badge--primary {\n background: hsl(var(--primary) / 0.15);\n color: hsl(var(--primary));\n}\n\n.cm-badge--accent {\n background: hsl(var(--accent) / 0.15);\n color: hsl(var(--accent));\n}\n\n.cm-badge--muted {\n background: hsl(var(--muted));\n color: hsl(var(--muted-foreground));\n}\n\n.cm-badge--success {\n background: hsl(142 71% 45% / 0.15);\n color: hsl(142 71% 45%);\n}\n\n.cm-badge--destructive {\n background: hsl(var(--destructive) / 0.15);\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Search Bar \u2500\u2500 */\n.cm-search-bar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius, 0.25rem);\n}\n\n.cm-search-bar__icon {\n color: hsl(var(--muted-foreground));\n flex-shrink: 0;\n}\n\n.cm-search-bar__input {\n flex: 1;\n background: transparent;\n border: none;\n color: hsl(var(--foreground));\n font-size: 14px;\n font-family: var(--font-sans), sans-serif;\n outline: none;\n}\n\n.cm-search-bar__input::placeholder {\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Filter Buttons \u2500\u2500 */\n.cm-filter-btn {\n padding: 6px 14px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 999px;\n color: hsl(var(--muted-foreground));\n font-size: 11px;\n font-family: var(--font-mono), monospace;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.cm-filter-btn:hover {\n border-color: hsl(var(--primary));\n color: hsl(var(--foreground));\n}\n\n.cm-filter-btn[data-active=\"true\"],\n.cm-filter-btn.active {\n background: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n border-color: hsl(var(--primary));\n}\n\n/* \u2500\u2500 Icon Button \u2500\u2500 */\n.cm-icon-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 8px;\n background: transparent;\n border: 1px solid hsl(var(--border));\n color: hsl(var(--muted-foreground));\n border-radius: var(--radius, 0.25rem);\n cursor: pointer;\n font-family: var(--font-sans), sans-serif;\n transition: all 0.2s;\n}\n\n.cm-icon-btn:hover {\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n}\n\n.cm-icon-btn--danger:hover {\n border-color: hsl(var(--destructive));\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Settings Section \u2500\u2500 */\n.cm-settings-section {\n margin-bottom: 24px;\n padding: 16px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-settings-section__title {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 16px;\n color: hsl(var(--muted-foreground));\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.cm-settings-section__hint {\n margin-bottom: 14px;\n font-size: 13px;\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Pagination \u2500\u2500 */\n.cm-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid hsl(var(--border));\n}\n\n.cm-page-btn {\n padding: 8px 16px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 6px;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n font-size: 13px;\n font-family: var(--font-sans), sans-serif;\n transition: all 0.2s;\n}\n\n.cm-page-btn:hover:not(:disabled) {\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n}\n\n.cm-page-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.cm-page-info {\n font-size: 13px;\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Card \u2500\u2500 */\n.cm-card {\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 10px;\n padding: 18px;\n transition: all 0.2s;\n}\n\n.cm-card:hover {\n border-color: hsl(var(--border) / 0.8);\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n}\n\n/* \u2500\u2500 Code Block \u2500\u2500 */\n.cm-code-block {\n display: block;\n padding: 10px 12px;\n background: hsl(var(--muted));\n border-radius: 6px;\n font-size: 12px;\n color: hsl(var(--primary));\n word-break: break-all;\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/* \u2500\u2500 Error / Empty States \u2500\u2500 */\n.cm-error-message {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n background: hsl(var(--destructive) / 0.15);\n border: 1px solid hsl(var(--destructive));\n border-radius: 8px;\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Playground / Chat Primitives \u2500\u2500 */\n.cm-playground {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n min-width: 0;\n height: min(58rem, calc(100dvh - clamp(8.5rem, 14vw, 10rem)));\n min-height: 34rem;\n overflow: hidden;\n border-radius: 16px;\n}\n\n.cm-playground__toolbar,\n.cm-playground__chat-toolbar,\n.cm-playground__caps-row {\n display: flex;\n align-items: center;\n min-width: 0;\n gap: clamp(0.4rem, 1.4cqi, 0.8rem);\n}\n\n.cm-playground__toolbar {\n flex: 0 0 auto;\n justify-content: space-between;\n padding: clamp(0.5rem, 1.6cqi, 0.8rem);\n border: 1px solid hsl(var(--primary) / 0.14);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.38), hsl(221 50% 9% / 0.32)),\n radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.1), transparent 36%);\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.055);\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-playground__title {\n display: inline-flex;\n align-items: center;\n gap: 0.42rem;\n min-width: 0;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.68rem, 1.8cqi, 0.86rem);\n font-weight: 800;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.cm-playground__title-icon {\n width: 1rem;\n height: 1rem;\n color: hsl(var(--primary));\n filter: drop-shadow(0 0 10px hsl(var(--primary) / 0.44));\n}\n\n.cm-playground__toolbar-right {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 0.45rem;\n min-width: 0;\n flex-wrap: wrap;\n}\n\n.cm-playground__grid {\n flex: 1;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: clamp(0.75rem, 1.8cqi, 1rem);\n padding-top: clamp(0.75rem, 1.8cqi, 1rem);\n}\n\n@container (min-width: 62rem) {\n .cm-playground__grid {\n grid-template-columns: minmax(0, 2fr) minmax(19rem, 0.82fr);\n }\n\n .cm-playground__grid--collapsed {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n\n.cm-playground__chat-cell,\n.cm-playground__pane-cell {\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.cm-playground__chat-cell {\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.26)),\n hsl(224 36% 13% / 0.18);\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.045);\n backdrop-filter: blur(16px) saturate(1.1);\n}\n\n.cm-playground__pane-cell {\n display: none;\n}\n\n@container (min-width: 62rem) {\n .cm-playground__pane-cell {\n display: flex;\n }\n}\n\n.cm-playground__chat-toolbar {\n flex: 0 0 auto;\n padding: clamp(0.55rem, 1.5cqi, 0.85rem);\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n background: hsl(221 50% 9% / 0.24);\n flex-wrap: wrap;\n}\n\n.cm-playground__filter-wrap {\n display: flex;\n align-items: center;\n gap: 0.45rem;\n min-width: min(100%, 13rem);\n flex: 1 1 13rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__filter-select {\n min-width: 0;\n flex: 1 1 8rem;\n min-height: 2.15rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.46);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n padding: 0 0.75rem;\n}\n\n.cm-playground__filter-select:hover,\n.cm-playground__filter-select:focus,\n.cm-playground__filter-select--active {\n outline: none;\n border-color: hsl(var(--primary) / 0.42);\n box-shadow: 0 0 16px hsl(var(--primary) / 0.08);\n}\n\n.cm-playground__model-count,\n.cm-playground__caps-label {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.cm-playground__caps-row {\n flex: 0 0 auto;\n padding: 0.45rem clamp(0.55rem, 1.5cqi, 0.85rem);\n border-bottom: 1px solid hsl(var(--primary) / 0.08);\n overflow: auto hidden;\n}\n\n.cm-playground__cap-tag,\n.cm-playground__chip,\n.cm-playground__badge,\n.cm-model-badge,\n.cm-tool-chip,\n.cm-receipt-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.38);\n color: hsl(var(--foreground) / 0.78);\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n line-height: 1;\n text-transform: uppercase;\n transition:\n transform 160ms ease,\n border-color 180ms ease,\n box-shadow 180ms ease,\n color 180ms ease,\n background-color 180ms ease;\n}\n\n.cm-playground__cap-tag {\n min-height: 1.55rem;\n padding: 0 0.58rem;\n}\n\n.cm-playground__badge,\n.cm-model-badge {\n min-width: 0;\n max-width: min(100%, 24rem);\n min-height: 2.2rem;\n padding: 0 0.72rem;\n cursor: pointer;\n}\n\n.cm-playground__badge:hover,\n.cm-playground__badge:focus-visible,\n.cm-model-badge:hover,\n.cm-model-badge:focus-visible,\n.cm-playground__chip:hover,\n.cm-playground__chip:focus-visible,\n.cm-playground__chip--active {\n transform: translateY(-1px);\n outline: none;\n border-color: hsl(var(--primary) / 0.44);\n background: hsl(var(--primary) / 0.09);\n color: hsl(var(--foreground));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n}\n\n.cm-model-badge[data-placeholder=\"true\"] {\n color: hsl(var(--muted-foreground));\n font-weight: 500;\n}\n\n.cm-playground__badge-dot,\n.cm-model-badge__dot {\n width: 0.48rem;\n height: 0.48rem;\n border-radius: 999px;\n background: hsl(var(--primary));\n box-shadow: 0 0 12px hsl(var(--primary) / 0.56);\n flex: 0 0 auto;\n}\n\n.cm-playground__badge-name,\n.cm-model-badge__name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-playground__badge-price,\n.cm-playground__badge-shortcut,\n.cm-model-badge__price,\n.cm-model-badge__shortcut,\n.cm-playground__chip-count {\n color: hsl(var(--muted-foreground));\n font-size: 0.62rem;\n}\n\n.cm-playground__pane-toggle,\n.cm-playground__pane-expand {\n display: inline-grid;\n place-items: center;\n border: 1px solid hsl(var(--primary) / 0.22);\n background: hsl(221 50% 9% / 0.72);\n color: hsl(var(--primary));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.08);\n cursor: pointer;\n}\n\n.cm-playground__pane-toggle {\n position: absolute;\n left: -0.7rem;\n top: 0.85rem;\n z-index: 4;\n width: 1.55rem;\n height: 1.55rem;\n border-radius: 999px;\n}\n\n.cm-playground__pane-expand {\n display: none;\n position: fixed;\n right: 0.2rem;\n top: 50%;\n z-index: 45;\n width: 2rem;\n height: 3.25rem;\n border-radius: 999px 0 0 999px;\n}\n\n@container (min-width: 62rem) {\n .cm-playground__pane-expand {\n display: inline-grid;\n }\n}\n\n.cm-playground__cmd-backdrop,\n.cm-command-overlay {\n position: fixed;\n inset: 0;\n z-index: 90;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: max(8vh, 4rem) 1rem 1rem;\n background:\n radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.09), transparent 30rem),\n hsl(240 30% 2% / 0.72);\n backdrop-filter: blur(14px);\n}\n\n.cm-playground__cmd-panel,\n.cm-command-panel {\n width: min(42rem, 100%);\n max-height: min(70dvh, 42rem);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.24);\n border-radius: 18px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.58), hsl(221 50% 9% / 0.78)),\n hsl(var(--background));\n box-shadow:\n 0 0 44px hsl(var(--primary) / 0.12),\n inset 0 1px 0 hsl(0 0% 100% / 0.08);\n}\n\n.cm-playground__cmd-header,\n.cm-playground__cmd-footer,\n.cm-command-header,\n.cm-command-footer {\n flex: 0 0 auto;\n padding: 0.75rem 0.95rem;\n border-color: hsl(var(--primary) / 0.12);\n}\n\n.cm-playground__cmd-header,\n.cm-command-header {\n border-bottom: 1px solid hsl(var(--primary) / 0.12);\n}\n\n.cm-playground__cmd-footer,\n.cm-command-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n border-top: 1px solid hsl(var(--primary) / 0.12);\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__cmd-input,\n.cm-command-input {\n width: 100%;\n border: 0;\n outline: none;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.92rem, 2.2vw, 1.1rem);\n}\n\n.cm-playground__cmd-list,\n.cm-command-list {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: 0.35rem;\n}\n\n.cm-playground__cmd-group,\n.cm-command-group {\n padding: 0.55rem 0.7rem 0.28rem;\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 800;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-playground__cmd-item,\n.cm-command-item {\n display: flex;\n align-items: center;\n gap: 0.65rem;\n min-height: 2.55rem;\n border: 1px solid transparent;\n border-radius: 12px;\n padding: 0 0.75rem;\n cursor: pointer;\n}\n\n.cm-playground__cmd-item:hover,\n.cm-playground__cmd-item--selected,\n.cm-playground__cmd-item--current,\n.cm-command-item:hover,\n.cm-command-item[data-selected=\"true\"],\n.cm-command-item[data-current=\"true\"] {\n border-color: hsl(var(--primary) / 0.22);\n background: hsl(var(--primary) / 0.08);\n}\n\n.cm-playground__cmd-item-name,\n.cm-command-item__name {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.82rem;\n}\n\n.cm-playground__cmd-item-meta,\n.cm-playground__cmd-footer-hints,\n.cm-command-item__meta,\n.cm-command-footer__hints {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__cmd-item-provider,\n.cm-playground__cmd-item-type,\n.cm-playground__cmd-item-price,\n.cm-playground__cmd-hint kbd,\n.cm-command-item__provider,\n.cm-command-item__type,\n.cm-command-item__price,\n.cm-command-hint kbd {\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.52);\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.62rem;\n padding: 0.22rem 0.45rem;\n}\n\n.cm-playground__cmd-empty,\n.cm-command-empty {\n padding: 2rem 1rem;\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-chat {\n display: flex;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 16px;\n background: hsl(221 50% 9% / 0.24);\n}\n\n.cm-chat--bare {\n border: 0;\n border-radius: 0;\n background: transparent;\n}\n\n.cm-chat__header,\n.cm-chat__activity,\n.cm-chat__composer {\n flex: 0 0 auto;\n border-color: hsl(var(--primary) / 0.1);\n}\n\n.cm-chat__header {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.75rem 0.9rem;\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n}\n\n.cm-chat__body {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: clamp(0.85rem, 2cqi, 1.15rem);\n}\n\n.cm-chat__empty {\n display: grid;\n place-items: center;\n gap: 0.35rem;\n min-height: 14rem;\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-chat__messages {\n display: grid;\n gap: 1rem;\n}\n\n.cm-chat-message {\n display: flex;\n align-items: flex-start;\n gap: 0.7rem;\n min-width: 0;\n}\n\n.cm-chat-message--user {\n justify-content: flex-end;\n}\n\n.cm-chat-message__avatar {\n width: 2rem;\n height: 2rem;\n flex: 0 0 auto;\n}\n\n.cm-chat-message__avatar-assistant,\n.cm-chat-message__avatar-user {\n background: hsl(var(--primary) / 0.14);\n color: hsl(var(--primary));\n}\n\n.cm-chat-message__avatar-user {\n background: hsl(var(--accent) / 0.15);\n color: hsl(var(--accent));\n}\n\n.cm-chat-message__bubble {\n position: relative;\n max-width: min(44rem, 82%);\n min-width: 0;\n border: 1px solid hsl(var(--primary) / 0.14);\n border-radius: 16px;\n padding: 0.75rem 0.85rem;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.28));\n color: hsl(var(--foreground));\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.045);\n}\n\n.cm-chat-message__bubble--user {\n border-color: hsl(var(--accent) / 0.22);\n background:\n linear-gradient(145deg, hsl(var(--accent) / 0.24), hsl(var(--primary) / 0.08));\n}\n\n.cm-chat-message__actions {\n position: absolute;\n right: 0;\n top: -2.1rem;\n display: none;\n align-items: center;\n gap: 0.25rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(var(--background) / 0.86);\n padding: 0.18rem;\n backdrop-filter: blur(12px);\n}\n\n.cm-chat-message__bubble:hover .cm-chat-message__actions,\n.cm-chat-message__bubble:focus-within .cm-chat-message__actions {\n display: flex;\n}\n\n.cm-chat__activity {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n border-top: 1px dashed hsl(var(--primary) / 0.16);\n background: hsl(221 50% 9% / 0.34);\n padding: 0.55rem 0.8rem;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n}\n\n.cm-chat__composer {\n border-top: 1px solid hsl(var(--primary) / 0.1);\n padding: clamp(0.7rem, 1.7cqi, 0.9rem);\n}\n\n.cm-chat__attachments {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-bottom: 0.6rem;\n}\n\n.cm-chat__attachment {\n position: relative;\n display: grid;\n width: 3rem;\n height: 3rem;\n place-items: center;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 12px;\n background: hsl(221 50% 9% / 0.48);\n}\n\n.cm-chat__composer-row {\n display: flex;\n align-items: flex-end;\n gap: 0.55rem;\n min-width: 0;\n}\n\n.cm-chat__composer-row textarea {\n min-height: 2.55rem;\n border-color: hsl(var(--primary) / 0.16);\n border-radius: 14px;\n background: hsl(221 50% 9% / 0.4);\n}\n\n.cm-chat__icon-action {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-chat__icon-action:hover {\n color: hsl(var(--primary));\n}\n\n@media (max-width: 820px) {\n .cm-playground {\n height: calc(100dvh - clamp(10rem, 28vw, 11.75rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom));\n min-height: 30rem;\n }\n\n .cm-playground__title-text {\n display: none;\n }\n\n .cm-chat-message__bubble {\n max-width: 88%;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .cm-app-chrome__navitem,\n .cm-hud-button,\n .cm-app-chrome__hud-popover,\n .cm-playground__badge,\n .cm-playground__chip,\n .cm-chat-message__bubble {\n transition-duration: 0.01ms !important;\n }\n}\n";
1
+ export declare const shellCss = "/**\n * Compose.Market Shared Shell\n * @compose-market/theme/css/shell\n */\n\n:root {\n --cm-shell-glow-primary: hsl(var(--primary) / 0.3);\n --cm-shell-glow-accent: hsl(var(--accent) / 0.16);\n --cm-shell-surface:\n linear-gradient(145deg, hsl(226 21% 23% / 0.38), hsl(221 50% 9% / 0.24)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),\n hsl(224 36% 13% / 0.28);\n --cm-shell-border: hsl(var(--primary) / 0.18);\n --cm-shell-shadow:\n 0 0 40px hsl(var(--primary) / 0.055),\n inset 0 1px 0 hsl(0 0% 100% / 0.06);\n --cm-chrome-gutter: clamp(0.7rem, 1.4vw, 1.15rem);\n --cm-chrome-sidebar: 16rem;\n --cm-chrome-sidebar-collapsed: 4.7rem;\n --cm-chrome-topbar: 4rem;\n --cm-chrome-mobile: 3.55rem;\n --cm-page-max: 88rem;\n}\n\n.cm-shell-stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.cm-shell-cluster {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n flex-wrap: wrap;\n}\n\n.cm-shell-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.55rem;\n min-height: 2.3rem;\n padding: 0 0.95rem;\n border-radius: 999px;\n border: 1px solid hsl(var(--primary) / 0.22);\n background:\n linear-gradient(180deg, hsl(var(--card) / 0.72), hsl(var(--background) / 0.36));\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.76rem;\n font-weight: 600;\n letter-spacing: 0.08em;\n line-height: 1;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n transform 160ms ease,\n background-color 160ms ease,\n border-color 180ms ease,\n color 180ms ease,\n box-shadow 180ms ease;\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.04),\n 0 0 16px hsl(var(--primary) / 0.035);\n backdrop-filter: blur(12px) saturate(1.08);\n}\n\n.cm-shell-button:hover:not(:disabled) {\n transform: translateY(-1px);\n border-color: hsl(var(--primary) / 0.38);\n}\n\n.cm-shell-button:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.cm-shell-button--primary {\n background:\n linear-gradient(135deg, #8aebff, #22d3ee);\n color: hsl(var(--primary-foreground));\n border-color: hsl(var(--primary) / 0.56);\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.16),\n 0 0 20px var(--cm-shell-glow-primary);\n}\n\n.cm-shell-button--primary:hover:not(:disabled) {\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.18),\n 0 0 24px var(--cm-shell-glow-primary),\n 0 0 18px var(--cm-shell-glow-accent);\n}\n\n.cm-shell-button--secondary {\n background: hsl(221 50% 9% / 0.36);\n border-color: hsl(var(--primary) / 0.2);\n color: hsl(var(--primary));\n}\n\n.cm-shell-button--secondary:hover:not(:disabled) {\n background: hsl(var(--primary) / 0.1);\n box-shadow: 0 0 18px hsl(var(--primary) / 0.1);\n}\n\n.cm-shell-button--ghost {\n background: transparent;\n border-color: transparent;\n color: hsl(var(--muted-foreground));\n box-shadow: none;\n}\n\n.cm-shell-button--ghost:hover:not(:disabled) {\n color: hsl(var(--foreground));\n background: hsl(var(--muted) / 0.24);\n}\n\n.cm-shell-button--danger {\n background: hsl(var(--destructive) / 0.12);\n border-color: hsl(var(--destructive) / 0.42);\n color: hsl(var(--destructive-foreground));\n}\n\n.cm-shell-button--danger:hover:not(:disabled) {\n background: hsl(var(--destructive) / 0.2);\n}\n\n.cm-shell-button--sm {\n min-height: 2rem;\n padding: 0 0.75rem;\n font-size: 0.7rem;\n}\n\n.cm-shell-button--lg {\n min-height: 2.65rem;\n padding: 0 1.1rem;\n font-size: 0.82rem;\n}\n\n.cm-shell-button--icon {\n width: 2.3rem;\n padding: 0;\n}\n\n.cm-shell-pill {\n display: inline-flex;\n align-items: center;\n gap: 0.45rem;\n min-height: 1.75rem;\n padding: 0 0.72rem;\n border-radius: 999px;\n border: 1px solid hsl(var(--primary) / 0.2);\n background:\n linear-gradient(180deg, hsl(var(--card) / 0.76), hsl(var(--muted) / 0.26));\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.cm-shell-pill strong,\n.cm-shell-pill span {\n color: inherit;\n}\n\n.cm-shell-panel {\n border: 1px solid var(--cm-shell-border);\n border-radius: 12px;\n background: var(--cm-shell-surface);\n box-shadow: var(--cm-shell-shadow);\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-shell-page {\n container-type: inline-size;\n width: min(var(--cm-page-max), 100%);\n min-width: 0;\n margin-inline: auto;\n display: grid;\n gap: clamp(1rem, 2.2cqi, 1.55rem);\n}\n\n.cm-shell-page--full {\n --cm-page-max: none;\n}\n\n.cm-shell-page-body {\n display: grid;\n gap: clamp(0.9rem, 2cqi, 1.35rem);\n min-width: 0;\n}\n\n.cm-app-chrome {\n --cm-chrome-safe: clamp(0.62rem, 1.25vw, 1rem);\n --cm-chrome-gap: clamp(0.34rem, 0.75vw, 0.55rem);\n --cm-hud-size: clamp(2.65rem, 4.1vw, 3rem);\n --cm-hud-radius: 999px;\n position: relative;\n min-height: 100dvh;\n isolation: isolate;\n}\n\n.cm-app-chrome__main {\n min-width: 0;\n min-height: 100dvh;\n padding:\n calc(env(safe-area-inset-top) + clamp(4.8rem, 7vw, 5.9rem))\n clamp(5.25rem, 6vw, 7rem)\n calc(env(safe-area-inset-bottom) + clamp(5.35rem, 7.4vw, 6.35rem));\n}\n\n.cm-app-chrome__navdock {\n position: fixed;\n inset-block-start: 50%;\n inset-inline-start: calc(env(safe-area-inset-left) + var(--cm-chrome-safe));\n z-index: 55;\n display: grid;\n gap: var(--cm-chrome-gap);\n transform: translate3d(0, -50%, 0);\n pointer-events: none;\n}\n\n.cm-app-chrome__navitem,\n.cm-hud-button {\n position: relative;\n display: inline-grid;\n place-items: center;\n width: var(--cm-hud-size);\n min-width: var(--cm-hud-size);\n height: var(--cm-hud-size);\n min-height: var(--cm-hud-size);\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: var(--cm-hud-radius);\n background:\n radial-gradient(circle at 30% 14%, hsl(var(--primary) / 0.15), transparent 38%),\n radial-gradient(circle at 78% 90%, hsl(var(--accent) / 0.12), transparent 42%),\n linear-gradient(145deg, hsl(226 21% 23% / 0.48), hsl(221 50% 9% / 0.38));\n color: hsl(var(--muted-foreground));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n inset 0 -1px 0 hsl(var(--primary) / 0.07),\n 0 0 26px hsl(var(--primary) / 0.065);\n backdrop-filter: blur(18px) saturate(1.16);\n cursor: pointer;\n pointer-events: auto;\n text-decoration: none;\n transition:\n transform 160ms ease,\n border-color 180ms ease,\n background-color 180ms ease,\n color 180ms ease,\n box-shadow 180ms ease,\n opacity 180ms ease;\n}\n\n.cm-app-chrome__navitem::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.28rem;\n top: 50%;\n width: 0.17rem;\n height: 48%;\n border-radius: 999px;\n background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--accent)));\n box-shadow:\n 0 0 12px hsl(var(--primary) / 0.72),\n 0 0 18px hsl(var(--accent) / 0.35);\n opacity: 0;\n transform: translateY(-50%) scaleY(0.45);\n transition:\n opacity 180ms ease,\n transform 180ms ease;\n}\n\n.cm-app-chrome__navitem:hover,\n.cm-app-chrome__navitem:focus-visible,\n.cm-app-chrome__navitem[data-active=\"true\"],\n.cm-hud-button:hover,\n.cm-hud-button:focus-visible,\n.cm-hud-button[data-active=\"true\"] {\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.42);\n outline: none;\n transform: translate3d(0, -1px, 0);\n box-shadow:\n inset 0 0 24px hsl(var(--primary) / 0.075),\n 0 0 24px hsl(var(--primary) / 0.14),\n 0 0 18px hsl(var(--accent) / 0.08);\n}\n\n.cm-app-chrome__navitem[data-active=\"true\"] {\n color: hsl(var(--primary));\n border-color: hsl(var(--primary) / 0.52);\n}\n\n.cm-app-chrome__navitem[data-active=\"true\"]::before {\n opacity: 1;\n transform: translateY(-50%) scaleY(1);\n}\n\n.cm-app-chrome__navitem-icon,\n.cm-hud-icon,\n.cm-app-nav__icon {\n display: inline-flex;\n width: 1.12rem;\n height: 1.12rem;\n align-items: center;\n justify-content: center;\n color: currentColor;\n}\n\n.cm-app-chrome__tooltip {\n position: absolute;\n inset-inline-start: calc(100% + 0.55rem);\n top: 50%;\n max-width: min(14rem, 52vw);\n padding: 0.42rem 0.58rem;\n border: 1px solid hsl(var(--primary) / 0.22);\n border-radius: 999px;\n background: hsl(221 50% 8% / 0.84);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.64rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n opacity: 0;\n pointer-events: none;\n transform: translate3d(-0.18rem, -50%, 0);\n transition:\n opacity 150ms ease,\n transform 150ms ease;\n}\n\n.cm-app-chrome__navitem:hover .cm-app-chrome__tooltip,\n.cm-app-chrome__navitem:focus-visible .cm-app-chrome__tooltip {\n opacity: 1;\n transform: translate3d(0, -50%, 0);\n}\n\n.cm-app-chrome__hud {\n position: fixed;\n inset-block-start: calc(env(safe-area-inset-top) + var(--cm-chrome-safe));\n inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));\n z-index: 60;\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n pointer-events: none;\n}\n\n.cm-app-chrome__hud-group {\n container-type: inline-size;\n display: flex;\n width: min(100%, 68rem);\n min-width: 0;\n align-items: center;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n flex-wrap: nowrap;\n pointer-events: auto;\n}\n\n.cm-app-chrome__hud-item,\n.cm-app-chrome__hud-fold,\n.cm-app-chrome__search {\n position: relative;\n min-width: max-content;\n flex: 0 0 auto;\n}\n\n.cm-app-chrome__search {\n display: inline-flex;\n min-width: var(--cm-hud-size);\n align-items: center;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n}\n\n.cm-app-chrome__hud-item[data-priority=\"low\"] {\n flex-shrink: 0;\n}\n\n.cm-hud-button {\n display: inline-flex;\n align-items: center;\n width: auto;\n max-width: min(15.5rem, 52vw);\n justify-content: center;\n gap: 0.52rem;\n padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n font-weight: 700;\n letter-spacing: 0.06em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.cm-hud-button--icon,\n.cm-hud-button[data-icon-only=\"true\"] {\n width: var(--cm-hud-size);\n padding-inline: 0;\n}\n\n.cm-hud-value,\n.cm-hud-address {\n display: inline-block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-hud-value {\n color: hsl(var(--foreground));\n}\n\n.cm-hud-address {\n color: hsl(var(--primary));\n max-width: 8.8rem;\n}\n\n.cm-hud-wallet {\n min-width: min(13.75rem, 42vw);\n justify-content: flex-start;\n padding-inline: 0.82rem 0.74rem;\n background:\n radial-gradient(circle at 14% 50%, hsl(var(--primary) / 0.18), transparent 34%),\n radial-gradient(circle at 86% 100%, hsl(var(--accent) / 0.12), transparent 40%),\n linear-gradient(145deg, hsl(226 21% 22% / 0.58), hsl(221 50% 8% / 0.48));\n}\n\n.cm-hud-wallet__icon {\n color: hsl(var(--primary));\n opacity: 0.92;\n}\n\n.cm-hud-wallet .cm-hud-value {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.76rem;\n letter-spacing: 0.05em;\n}\n\n.cm-hud-wallet .cm-hud-address {\n color: hsl(var(--primary) / 0.9);\n font-size: 0.68rem;\n font-weight: 650;\n letter-spacing: 0.04em;\n}\n\n.cm-hud-status {\n width: 0.48rem;\n height: 0.48rem;\n border-radius: 999px;\n background: hsl(var(--primary));\n box-shadow: 0 0 12px hsl(var(--primary) / 0.62);\n flex: 0 0 auto;\n}\n\n.cm-hud-status[data-tone=\"red\"] {\n background: hsl(0 84% 66%);\n box-shadow: 0 0 12px hsl(0 84% 66% / 0.54);\n}\n\n.cm-hud-status[data-tone=\"blue\"] {\n background: hsl(211 100% 64%);\n box-shadow: 0 0 12px hsl(211 100% 64% / 0.54);\n}\n\n.cm-hud-status[data-state=\"muted\"] {\n background: hsl(var(--muted-foreground));\n box-shadow: none;\n}\n\n.cm-hud-overflow {\n display: none;\n}\n\n.cm-app-chrome__hud-popover {\n position: absolute;\n top: calc(100% + 0.58rem);\n right: 0;\n z-index: 90;\n width: min(21rem, calc(100vw - var(--cm-chrome-safe) * 2));\n max-height: min(74dvh, 34rem);\n overflow: auto;\n border: 1px solid hsl(var(--primary) / 0.2);\n border-radius: 18px;\n background:\n radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),\n radial-gradient(circle at 92% 100%, hsl(var(--accent) / 0.12), transparent 36%),\n linear-gradient(145deg, hsl(226 21% 20% / 0.78), hsl(221 50% 7% / 0.86));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 36px hsl(var(--primary) / 0.12);\n backdrop-filter: blur(22px) saturate(1.16);\n}\n\n.cm-hud-menu {\n border: 1px solid hsl(var(--primary) / 0.2);\n border-radius: 16px;\n background:\n radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),\n linear-gradient(145deg, hsl(226 21% 20% / 0.82), hsl(221 50% 7% / 0.9));\n color: hsl(var(--foreground));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 28px hsl(var(--primary) / 0.12);\n backdrop-filter: blur(20px) saturate(1.14);\n}\n\n.cm-app-chrome__hud-popover--wide {\n width: min(25rem, calc(100vw - var(--cm-chrome-safe) * 2));\n}\n\n.cm-app-chrome__hud-popover-body {\n display: grid;\n gap: 0.58rem;\n padding: 0.75rem;\n}\n\n.cm-app-chrome__hud-popover-title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.82rem;\n font-weight: 800;\n letter-spacing: 0.04em;\n}\n\n.cm-app-chrome__hud-popover-copy {\n color: hsl(var(--muted-foreground));\n font-size: 0.78rem;\n line-height: 1.45;\n}\n\n.cm-app-chrome__hud-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n min-height: 2.65rem;\n padding: 0.42rem;\n border-radius: 14px;\n background: hsl(var(--primary) / 0.055);\n}\n\n.cm-app-chrome__hud-stack {\n display: grid;\n gap: 0.58rem;\n}\n\n.cm-search {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: 0.6rem;\n min-height: 2.55rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.38);\n padding: 0 0.85rem;\n color: hsl(var(--muted-foreground));\n box-shadow: inset 0 0 20px hsl(var(--primary) / 0.04);\n}\n\n.cm-search--hud {\n width: 0;\n max-width: min(24rem, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size)));\n min-height: var(--cm-hud-size);\n padding-inline: 0;\n border-width: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n transform: scaleX(0.92);\n transform-origin: right center;\n transition:\n width 180ms ease,\n padding-inline 180ms ease,\n opacity 150ms ease,\n transform 180ms ease,\n border-color 180ms ease;\n}\n\n.cm-app-chrome__search[data-open=\"true\"] .cm-search--hud {\n width: clamp(13rem, 29vw, 24rem);\n padding-inline: 0.85rem;\n border-width: 1px;\n opacity: 1;\n pointer-events: auto;\n transform: scaleX(1);\n}\n\n.cm-search input,\n.cm-search__input {\n min-width: 0;\n flex: 1;\n border: 0;\n outline: none;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.82rem;\n}\n\n.cm-search input::placeholder,\n.cm-search__input::placeholder {\n color: hsl(var(--muted-foreground) / 0.72);\n}\n\n.cm-app-chrome__sidebar,\n.cm-app-chrome__topbar,\n.cm-app-chrome__mobilebar,\n.cm-app-chrome__drawer {\n display: none;\n}\n\n.cm-app-chrome__brand {\n display: none;\n}\n\n.cm-shell-panel--muted {\n background:\n linear-gradient(145deg, hsl(224 36% 13% / 0.36), hsl(221 50% 9% / 0.72)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.06), transparent 34%);\n}\n\n.cm-shell-panel--ghost {\n background: transparent;\n box-shadow: none;\n}\n\n.cm-shell-panel__body {\n padding: 1rem;\n}\n\n.cm-shell-page-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n padding: 1rem 1.1rem;\n}\n\n.cm-shell-page-header__copy {\n display: flex;\n flex-direction: column;\n gap: 0.32rem;\n}\n\n.cm-shell-page-header__eyebrow {\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n}\n\n.cm-shell-page-header__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: clamp(1.12rem, 1.65vw, 1.52rem);\n letter-spacing: 0.04em;\n line-height: 1.02;\n}\n\n.cm-shell-page-header__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.88rem;\n line-height: 1.45;\n max-width: 48rem;\n}\n\n.cm-shell-stat-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n gap: 0.8rem;\n}\n\n.cm-shell-stat {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.85rem 0.9rem;\n}\n\n.cm-shell-stat__label {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.66rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-shell-stat__value {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-stat__hint {\n color: hsl(var(--muted-foreground));\n font-size: 0.74rem;\n}\n\n.cm-shell-tab-strip {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(var(--muted) / 0.14);\n backdrop-filter: blur(12px);\n}\n\n.cm-shell-tab {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-height: 2.1rem;\n padding: 0 0.85rem;\n border-radius: 999px;\n border: 1px solid transparent;\n background: transparent;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n background-color 180ms ease,\n color 180ms ease,\n border-color 180ms ease,\n box-shadow 180ms ease;\n}\n\n.cm-shell-tab:hover {\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.18);\n}\n\n.cm-shell-tab[data-active=\"true\"],\n.cm-shell-tab[data-state=\"active\"] {\n background:\n linear-gradient(180deg, hsl(var(--primary) / 0.18), hsl(var(--primary) / 0.1));\n border-color: hsl(var(--primary) / 0.36);\n color: hsl(var(--foreground));\n box-shadow:\n inset 0 1px 0 hsl(var(--primary) / 0.16),\n 0 0 18px hsl(var(--primary) / 0.14);\n}\n\n.cm-shell-notice {\n display: flex;\n align-items: center;\n gap: 0.7rem;\n padding: 0.8rem 0.95rem;\n border-radius: 12px;\n border: 1px solid;\n backdrop-filter: blur(12px);\n}\n\n.cm-shell-notice--info {\n background: hsl(var(--primary) / 0.08);\n border-color: hsl(var(--primary) / 0.22);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--success {\n background: hsl(148 75% 24% / 0.18);\n border-color: hsl(148 75% 46% / 0.3);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--warning {\n background: hsl(42 100% 48% / 0.12);\n border-color: hsl(42 100% 52% / 0.25);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--error {\n background: hsl(var(--destructive) / 0.13);\n border-color: hsl(var(--destructive) / 0.28);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n padding: 0.95rem 1rem;\n}\n\n.cm-shell-banner__copy {\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n}\n\n.cm-shell-banner__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.98rem;\n letter-spacing: 0.03em;\n}\n\n.cm-shell-banner__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.84rem;\n line-height: 1.45;\n}\n\n.cm-shell-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n min-height: 18rem;\n padding: 2rem 1.25rem;\n text-align: center;\n}\n\n.cm-shell-empty__icon {\n color: hsl(var(--primary));\n}\n\n.cm-shell-empty__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1.08rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-empty__description {\n color: hsl(var(--muted-foreground));\n max-width: 38rem;\n line-height: 1.55;\n}\n\n.cm-shell-modal-overlay {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n background:\n radial-gradient(circle at 50% 24%, hsl(var(--primary) / 0.08), transparent 28rem),\n hsl(240 30% 2% / 0.82);\n backdrop-filter: blur(12px);\n z-index: 100;\n}\n\n.cm-shell-modal {\n width: min(100%, 46rem);\n max-height: min(90vh, 56rem);\n overflow: auto;\n border-radius: 12px;\n}\n\n.cm-shell-modal__header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n padding: 1rem 1rem 0;\n}\n\n.cm-shell-modal__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-modal__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.84rem;\n margin-top: 0.3rem;\n line-height: 1.45;\n}\n\n.cm-shell-modal__body {\n padding: 1rem;\n}\n\n@container (max-width: 42rem) {\n .cm-app-chrome__hud-item[data-priority=\"low\"] {\n display: none;\n }\n\n .cm-hud-overflow {\n display: inline-flex;\n }\n}\n\n@container (max-width: 31rem) {\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-address,\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-label {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-wallet .cm-hud-value {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-wallet {\n width: var(--cm-hud-size);\n min-width: var(--cm-hud-size);\n padding-inline: 0;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-session-trigger {\n width: auto;\n min-width: max-content;\n max-width: min(12rem, 58vw);\n padding-inline: 0.72rem;\n }\n}\n\n@media (max-width: 820px) {\n .cm-shell-page-header,\n .cm-shell-banner {\n flex-direction: column;\n align-items: stretch;\n }\n\n .cm-shell-stat-grid {\n grid-template-columns: 1fr;\n }\n\n .cm-shell-tab-strip {\n width: 100%;\n overflow-x: auto;\n }\n\n .cm-app-chrome__main {\n padding:\n calc(env(safe-area-inset-top) + clamp(4.25rem, 14vw, 4.85rem))\n clamp(0.75rem, 4.2vw, 1.05rem)\n calc(env(safe-area-inset-bottom) + clamp(5.55rem, 16vw, 6.55rem));\n }\n\n .cm-app-chrome__hud {\n justify-content: flex-end;\n }\n\n .cm-app-chrome__hud-group {\n width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2));\n }\n\n .cm-app-chrome__hud-item,\n .cm-app-chrome__hud-fold,\n .cm-app-chrome__search {\n min-width: auto;\n }\n\n .cm-app-chrome__navdock {\n inset-block-start: auto;\n inset-block-end: calc(env(safe-area-inset-bottom) + var(--cm-chrome-safe));\n inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));\n display: flex;\n justify-content: center;\n overflow-x: auto;\n padding: 0.22rem;\n transform: none;\n scrollbar-width: none;\n }\n\n .cm-app-chrome__navdock::-webkit-scrollbar {\n display: none;\n }\n\n .cm-app-chrome__navitem {\n flex: 0 0 auto;\n }\n\n .cm-app-chrome__navitem::before {\n inset-inline-start: 50%;\n top: auto;\n bottom: -0.22rem;\n width: 46%;\n height: 0.16rem;\n transform: translateX(-50%) scaleX(0.45);\n }\n\n .cm-app-chrome__navitem[data-active=\"true\"]::before {\n transform: translateX(-50%) scaleX(1);\n }\n\n .cm-app-chrome__tooltip {\n display: none;\n }\n\n .cm-hud-address,\n .cm-hud-label {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"low\"] {\n display: none;\n }\n\n .cm-hud-overflow {\n display: inline-flex;\n }\n\n .cm-app-chrome__hud-group[data-search-open=\"true\"] .cm-app-chrome__hud-item,\n .cm-app-chrome__hud-group[data-search-open=\"true\"] .cm-app-chrome__hud-fold {\n display: none;\n }\n\n .cm-app-chrome__search[data-open=\"true\"] {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .cm-app-chrome__search[data-open=\"true\"] .cm-search--hud {\n width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size) - var(--cm-chrome-gap)));\n }\n}\n\n/* \u2500\u2500 Form Controls \u2500\u2500 */\n.cm-form-group {\n margin-bottom: 14px;\n}\n\n.cm-form-group label {\n display: block;\n margin-bottom: 6px;\n font-family: var(--font-mono), monospace;\n font-size: 11px;\n color: hsl(var(--muted-foreground));\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-form-input,\n.cm-form-textarea,\n.cm-form-select {\n width: 100%;\n padding: 10px 12px;\n background: hsl(222 47% 7% / 0.84);\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 10px;\n color: hsl(var(--foreground));\n font-size: 14px;\n font-family: var(--font-sans), sans-serif;\n transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;\n}\n\n.cm-form-input:focus,\n.cm-form-textarea:focus,\n.cm-form-select:focus {\n outline: none;\n border-color: hsl(var(--primary));\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.24),\n inset 0 0 20px hsl(var(--primary) / 0.06);\n background: hsl(var(--background) / 0.96);\n}\n\n.cm-form-input:disabled,\n.cm-form-textarea:disabled,\n.cm-form-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.cm-form-textarea {\n min-height: 80px;\n resize: vertical;\n}\n\n/* \u2500\u2500 Notification / Alert \u2500\u2500 */\n.cm-notification {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n animation: cm-slide-in 0.2s ease;\n}\n\n@keyframes cm-slide-in {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.cm-notification--success {\n background: hsl(142 71% 45% / 0.15);\n color: hsl(142 71% 45%);\n border: 1px solid hsl(142 71% 45%);\n}\n\n.cm-notification--error {\n background: hsl(var(--destructive) / 0.15);\n color: hsl(var(--destructive));\n border: 1px solid hsl(var(--destructive));\n}\n\n.cm-notification--warning {\n background: hsl(42 100% 48% / 0.12);\n color: hsl(42 100% 52%);\n border: 1px solid hsl(42 100% 52% / 0.5);\n}\n\n.cm-notification--info {\n background: hsl(var(--primary) / 0.08);\n border: 1px solid hsl(var(--primary) / 0.22);\n color: hsl(var(--foreground));\n}\n\n/* \u2500\u2500 Navigation \u2500\u2500 */\n.cm-nav {\n display: flex;\n gap: 4px;\n padding: 12px 0 0;\n}\n\n.cm-nav-btn {\n padding: 8px 14px;\n background: transparent;\n border: 1px solid transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n border-radius: var(--radius, 0.25rem);\n font-size: 11px;\n font-weight: 600;\n font-family: var(--font-mono), monospace;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n transition: all 0.2s;\n}\n\n.cm-nav-btn:hover {\n color: hsl(var(--foreground));\n background: hsl(var(--muted));\n border-color: hsl(var(--primary) / 0.18);\n}\n\n.cm-nav-btn[data-active=\"true\"],\n.cm-nav-btn.active {\n color: hsl(var(--primary));\n background: hsl(var(--primary) / 0.12);\n border-color: hsl(var(--primary) / 0.28);\n}\n\n/* \u2500\u2500 Loading State \u2500\u2500 */\n.cm-loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px;\n color: hsl(var(--muted-foreground));\n}\n\n.cm-spinner {\n animation: cm-spin 1s linear infinite;\n}\n\n@keyframes cm-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500 Badge / Tag \u2500\u2500 */\n.cm-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.cm-badge--primary {\n background: hsl(var(--primary) / 0.15);\n color: hsl(var(--primary));\n}\n\n.cm-badge--accent {\n background: hsl(var(--accent) / 0.15);\n color: hsl(var(--accent));\n}\n\n.cm-badge--muted {\n background: hsl(var(--muted));\n color: hsl(var(--muted-foreground));\n}\n\n.cm-badge--success {\n background: hsl(142 71% 45% / 0.15);\n color: hsl(142 71% 45%);\n}\n\n.cm-badge--destructive {\n background: hsl(var(--destructive) / 0.15);\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Search Bar \u2500\u2500 */\n.cm-search-bar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius, 0.25rem);\n}\n\n.cm-search-bar__icon {\n color: hsl(var(--muted-foreground));\n flex-shrink: 0;\n}\n\n.cm-search-bar__input {\n flex: 1;\n background: transparent;\n border: none;\n color: hsl(var(--foreground));\n font-size: 14px;\n font-family: var(--font-sans), sans-serif;\n outline: none;\n}\n\n.cm-search-bar__input::placeholder {\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Filter Buttons \u2500\u2500 */\n.cm-filter-btn {\n padding: 6px 14px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 999px;\n color: hsl(var(--muted-foreground));\n font-size: 11px;\n font-family: var(--font-mono), monospace;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.cm-filter-btn:hover {\n border-color: hsl(var(--primary));\n color: hsl(var(--foreground));\n}\n\n.cm-filter-btn[data-active=\"true\"],\n.cm-filter-btn.active {\n background: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n border-color: hsl(var(--primary));\n}\n\n/* \u2500\u2500 Icon Button \u2500\u2500 */\n.cm-icon-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 8px;\n background: transparent;\n border: 1px solid hsl(var(--border));\n color: hsl(var(--muted-foreground));\n border-radius: var(--radius, 0.25rem);\n cursor: pointer;\n font-family: var(--font-sans), sans-serif;\n transition: all 0.2s;\n}\n\n.cm-icon-btn:hover {\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n}\n\n.cm-icon-btn--danger:hover {\n border-color: hsl(var(--destructive));\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Settings Section \u2500\u2500 */\n.cm-settings-section {\n margin-bottom: 24px;\n padding: 16px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-settings-section__title {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 16px;\n color: hsl(var(--muted-foreground));\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.cm-settings-section__hint {\n margin-bottom: 14px;\n font-size: 13px;\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Pagination \u2500\u2500 */\n.cm-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid hsl(var(--border));\n}\n\n.cm-page-btn {\n padding: 8px 16px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 6px;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n font-size: 13px;\n font-family: var(--font-sans), sans-serif;\n transition: all 0.2s;\n}\n\n.cm-page-btn:hover:not(:disabled) {\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n}\n\n.cm-page-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.cm-page-info {\n font-size: 13px;\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Card \u2500\u2500 */\n.cm-card {\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 10px;\n padding: 18px;\n transition: all 0.2s;\n}\n\n.cm-card:hover {\n border-color: hsl(var(--border) / 0.8);\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n}\n\n/* \u2500\u2500 Code Block \u2500\u2500 */\n.cm-code-block {\n display: block;\n padding: 10px 12px;\n background: hsl(var(--muted));\n border-radius: 6px;\n font-size: 12px;\n color: hsl(var(--primary));\n word-break: break-all;\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/* \u2500\u2500 Error / Empty States \u2500\u2500 */\n.cm-error-message {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n background: hsl(var(--destructive) / 0.15);\n border: 1px solid hsl(var(--destructive));\n border-radius: 8px;\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Playground / Chat Primitives \u2500\u2500 */\n.cm-playground {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n min-width: 0;\n height: min(58rem, calc(100dvh - clamp(8.5rem, 14vw, 10rem)));\n min-height: 34rem;\n overflow: hidden;\n border-radius: 16px;\n}\n\n.cm-playground__toolbar,\n.cm-playground__chat-toolbar,\n.cm-playground__caps-row {\n display: flex;\n align-items: center;\n min-width: 0;\n gap: clamp(0.4rem, 1.4cqi, 0.8rem);\n}\n\n.cm-playground__toolbar {\n flex: 0 0 auto;\n justify-content: space-between;\n padding: clamp(0.5rem, 1.6cqi, 0.8rem);\n border: 1px solid hsl(var(--primary) / 0.14);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.38), hsl(221 50% 9% / 0.32)),\n radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.1), transparent 36%);\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.055);\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-playground__title {\n display: inline-flex;\n align-items: center;\n gap: 0.42rem;\n min-width: 0;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.68rem, 1.8cqi, 0.86rem);\n font-weight: 800;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.cm-playground__title-icon {\n width: 1rem;\n height: 1rem;\n color: hsl(var(--primary));\n filter: drop-shadow(0 0 10px hsl(var(--primary) / 0.44));\n}\n\n.cm-playground__toolbar-right {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 0.45rem;\n min-width: 0;\n flex-wrap: wrap;\n}\n\n.cm-playground__grid {\n flex: 1;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: clamp(0.75rem, 1.8cqi, 1rem);\n padding-top: clamp(0.75rem, 1.8cqi, 1rem);\n}\n\n@container (min-width: 62rem) {\n .cm-playground__grid {\n grid-template-columns: minmax(0, 2fr) minmax(19rem, 0.82fr);\n }\n\n .cm-playground__grid--collapsed {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n\n.cm-playground__chat-cell,\n.cm-playground__pane-cell {\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.cm-playground__chat-cell {\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.26)),\n hsl(224 36% 13% / 0.18);\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.045);\n backdrop-filter: blur(16px) saturate(1.1);\n}\n\n.cm-playground__pane-cell {\n display: none;\n}\n\n@container (min-width: 62rem) {\n .cm-playground__pane-cell {\n display: flex;\n }\n}\n\n.cm-playground__chat-toolbar {\n flex: 0 0 auto;\n padding: clamp(0.55rem, 1.5cqi, 0.85rem);\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n background: hsl(221 50% 9% / 0.24);\n flex-wrap: wrap;\n}\n\n.cm-playground__filter-wrap {\n display: flex;\n align-items: center;\n gap: 0.45rem;\n min-width: min(100%, 13rem);\n flex: 1 1 13rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__filter-select {\n min-width: 0;\n flex: 1 1 8rem;\n min-height: 2.15rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.46);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n padding: 0 0.75rem;\n}\n\n.cm-playground__filter-select:hover,\n.cm-playground__filter-select:focus,\n.cm-playground__filter-select--active {\n outline: none;\n border-color: hsl(var(--primary) / 0.42);\n box-shadow: 0 0 16px hsl(var(--primary) / 0.08);\n}\n\n.cm-playground__model-count,\n.cm-playground__caps-label {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.cm-playground__caps-row {\n flex: 0 0 auto;\n padding: 0.45rem clamp(0.55rem, 1.5cqi, 0.85rem);\n border-bottom: 1px solid hsl(var(--primary) / 0.08);\n overflow: auto hidden;\n}\n\n.cm-playground__cap-tag,\n.cm-playground__chip,\n.cm-playground__badge,\n.cm-model-badge,\n.cm-tool-chip,\n.cm-receipt-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.38);\n color: hsl(var(--foreground) / 0.78);\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n line-height: 1;\n text-transform: uppercase;\n transition:\n transform 160ms ease,\n border-color 180ms ease,\n box-shadow 180ms ease,\n color 180ms ease,\n background-color 180ms ease;\n}\n\n.cm-playground__cap-tag {\n min-height: 1.55rem;\n padding: 0 0.58rem;\n}\n\n.cm-playground__badge,\n.cm-model-badge {\n min-width: 0;\n max-width: min(100%, 24rem);\n min-height: 2.2rem;\n padding: 0 0.72rem;\n cursor: pointer;\n}\n\n.cm-playground__badge:hover,\n.cm-playground__badge:focus-visible,\n.cm-model-badge:hover,\n.cm-model-badge:focus-visible,\n.cm-playground__chip:hover,\n.cm-playground__chip:focus-visible,\n.cm-playground__chip--active {\n transform: translateY(-1px);\n outline: none;\n border-color: hsl(var(--primary) / 0.44);\n background: hsl(var(--primary) / 0.09);\n color: hsl(var(--foreground));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n}\n\n.cm-model-badge[data-placeholder=\"true\"] {\n color: hsl(var(--muted-foreground));\n font-weight: 500;\n}\n\n.cm-playground__badge-dot,\n.cm-model-badge__dot {\n width: 0.48rem;\n height: 0.48rem;\n border-radius: 999px;\n background: hsl(var(--primary));\n box-shadow: 0 0 12px hsl(var(--primary) / 0.56);\n flex: 0 0 auto;\n}\n\n.cm-playground__badge-name,\n.cm-model-badge__name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-playground__badge-price,\n.cm-playground__badge-shortcut,\n.cm-model-badge__price,\n.cm-model-badge__shortcut,\n.cm-playground__chip-count {\n color: hsl(var(--muted-foreground));\n font-size: 0.62rem;\n}\n\n.cm-playground__pane-toggle,\n.cm-playground__pane-expand {\n display: inline-grid;\n place-items: center;\n border: 1px solid hsl(var(--primary) / 0.22);\n background: hsl(221 50% 9% / 0.72);\n color: hsl(var(--primary));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.08);\n cursor: pointer;\n}\n\n.cm-playground__pane-toggle {\n position: absolute;\n left: -0.7rem;\n top: 0.85rem;\n z-index: 4;\n width: 1.55rem;\n height: 1.55rem;\n border-radius: 999px;\n}\n\n.cm-playground__pane-expand {\n display: none;\n position: fixed;\n right: 0.2rem;\n top: 50%;\n z-index: 45;\n width: 2rem;\n height: 3.25rem;\n border-radius: 999px 0 0 999px;\n}\n\n@container (min-width: 62rem) {\n .cm-playground__pane-expand {\n display: inline-grid;\n }\n}\n\n.cm-playground__cmd-backdrop,\n.cm-command-overlay {\n position: fixed;\n inset: 0;\n z-index: 90;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: max(8vh, 4rem) 1rem 1rem;\n background:\n radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.09), transparent 30rem),\n hsl(240 30% 2% / 0.72);\n backdrop-filter: blur(14px);\n}\n\n.cm-playground__cmd-panel,\n.cm-command-panel {\n width: min(42rem, 100%);\n max-height: min(70dvh, 42rem);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.24);\n border-radius: 18px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.58), hsl(221 50% 9% / 0.78)),\n hsl(var(--background));\n box-shadow:\n 0 0 44px hsl(var(--primary) / 0.12),\n inset 0 1px 0 hsl(0 0% 100% / 0.08);\n}\n\n.cm-playground__cmd-header,\n.cm-playground__cmd-footer,\n.cm-command-header,\n.cm-command-footer {\n flex: 0 0 auto;\n padding: 0.75rem 0.95rem;\n border-color: hsl(var(--primary) / 0.12);\n}\n\n.cm-playground__cmd-header,\n.cm-command-header {\n border-bottom: 1px solid hsl(var(--primary) / 0.12);\n}\n\n.cm-playground__cmd-footer,\n.cm-command-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n border-top: 1px solid hsl(var(--primary) / 0.12);\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__cmd-input,\n.cm-command-input {\n width: 100%;\n border: 0;\n outline: none;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.92rem, 2.2vw, 1.1rem);\n}\n\n.cm-playground__cmd-list,\n.cm-command-list {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: 0.35rem;\n}\n\n.cm-playground__cmd-group,\n.cm-command-group {\n padding: 0.55rem 0.7rem 0.28rem;\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 800;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-playground__cmd-item,\n.cm-command-item {\n display: flex;\n align-items: center;\n gap: 0.65rem;\n min-height: 2.55rem;\n border: 1px solid transparent;\n border-radius: 12px;\n padding: 0 0.75rem;\n cursor: pointer;\n}\n\n.cm-playground__cmd-item:hover,\n.cm-playground__cmd-item--selected,\n.cm-playground__cmd-item--current,\n.cm-command-item:hover,\n.cm-command-item[data-selected=\"true\"],\n.cm-command-item[data-current=\"true\"] {\n border-color: hsl(var(--primary) / 0.22);\n background: hsl(var(--primary) / 0.08);\n}\n\n.cm-playground__cmd-item-name,\n.cm-command-item__name {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.82rem;\n}\n\n.cm-playground__cmd-item-meta,\n.cm-playground__cmd-footer-hints,\n.cm-command-item__meta,\n.cm-command-footer__hints {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__cmd-item-provider,\n.cm-playground__cmd-item-type,\n.cm-playground__cmd-item-price,\n.cm-playground__cmd-hint kbd,\n.cm-command-item__provider,\n.cm-command-item__type,\n.cm-command-item__price,\n.cm-command-hint kbd {\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.52);\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.62rem;\n padding: 0.22rem 0.45rem;\n}\n\n.cm-playground__cmd-empty,\n.cm-command-empty {\n padding: 2rem 1rem;\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-chat {\n display: flex;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 16px;\n background: hsl(221 50% 9% / 0.24);\n}\n\n.cm-chat--bare {\n border: 0;\n border-radius: 0;\n background: transparent;\n}\n\n.cm-chat__header,\n.cm-chat__activity,\n.cm-chat__composer {\n flex: 0 0 auto;\n border-color: hsl(var(--primary) / 0.1);\n}\n\n.cm-chat__header {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.75rem 0.9rem;\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n}\n\n.cm-chat__body {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: clamp(0.85rem, 2cqi, 1.15rem);\n}\n\n.cm-chat__empty {\n display: grid;\n place-items: center;\n gap: 0.35rem;\n min-height: 14rem;\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-chat__messages {\n display: grid;\n gap: 1rem;\n}\n\n.cm-chat-message {\n display: flex;\n align-items: flex-start;\n gap: 0.7rem;\n min-width: 0;\n}\n\n.cm-chat-message--user {\n justify-content: flex-end;\n}\n\n.cm-chat-message__avatar {\n width: 2rem;\n height: 2rem;\n flex: 0 0 auto;\n}\n\n.cm-chat-message__avatar-assistant,\n.cm-chat-message__avatar-user {\n background: hsl(var(--primary) / 0.14);\n color: hsl(var(--primary));\n}\n\n.cm-chat-message__avatar-user {\n background: hsl(var(--accent) / 0.15);\n color: hsl(var(--accent));\n}\n\n.cm-chat-message__bubble {\n position: relative;\n max-width: min(44rem, 82%);\n min-width: 0;\n border: 1px solid hsl(var(--primary) / 0.14);\n border-radius: 16px;\n padding: 0.75rem 0.85rem;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.28));\n color: hsl(var(--foreground));\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.045);\n}\n\n.cm-chat-message__bubble--user {\n border-color: hsl(var(--accent) / 0.22);\n background:\n linear-gradient(145deg, hsl(var(--accent) / 0.24), hsl(var(--primary) / 0.08));\n}\n\n.cm-chat-message__actions {\n position: absolute;\n right: 0;\n top: -2.1rem;\n display: none;\n align-items: center;\n gap: 0.25rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(var(--background) / 0.86);\n padding: 0.18rem;\n backdrop-filter: blur(12px);\n}\n\n.cm-chat-message__bubble:hover .cm-chat-message__actions,\n.cm-chat-message__bubble:focus-within .cm-chat-message__actions {\n display: flex;\n}\n\n.cm-chat__activity {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n border-top: 1px dashed hsl(var(--primary) / 0.16);\n background: hsl(221 50% 9% / 0.34);\n padding: 0.55rem 0.8rem;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n}\n\n.cm-chat__composer {\n border-top: 1px solid hsl(var(--primary) / 0.1);\n padding: clamp(0.7rem, 1.7cqi, 0.9rem);\n}\n\n.cm-chat__attachments {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-bottom: 0.6rem;\n}\n\n.cm-chat__attachment {\n position: relative;\n display: grid;\n width: 3rem;\n height: 3rem;\n place-items: center;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 12px;\n background: hsl(221 50% 9% / 0.48);\n}\n\n.cm-chat__composer-row {\n display: flex;\n align-items: flex-end;\n gap: 0.55rem;\n min-width: 0;\n}\n\n.cm-chat__composer-row textarea {\n min-height: 2.55rem;\n border-color: hsl(var(--primary) / 0.16);\n border-radius: 14px;\n background: hsl(221 50% 9% / 0.4);\n}\n\n.cm-chat__icon-action {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-chat__icon-action:hover {\n color: hsl(var(--primary));\n}\n\n@media (max-width: 820px) {\n .cm-playground {\n height: calc(100dvh - clamp(10rem, 28vw, 11.75rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom));\n min-height: 30rem;\n }\n\n .cm-playground__title-text {\n display: none;\n }\n\n .cm-chat-message__bubble {\n max-width: 88%;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .cm-app-chrome__navitem,\n .cm-hud-button,\n .cm-app-chrome__hud-popover,\n .cm-playground__badge,\n .cm-playground__chip,\n .cm-chat-message__bubble {\n transition-duration: 0.01ms !important;\n }\n}\n";
2
2
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,yg6CAw6DpB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,69+CA0gEpB,CAAC"}
@@ -206,9 +206,9 @@ export const shellCss = `/**
206
206
  min-width: 0;
207
207
  min-height: 100dvh;
208
208
  padding:
209
- calc(env(safe-area-inset-top) + clamp(4.6rem, 7vw, 5.6rem))
210
- clamp(0.85rem, 2.3vw, 2rem)
211
- calc(env(safe-area-inset-bottom) + clamp(5.1rem, 7.4vw, 6.1rem));
209
+ calc(env(safe-area-inset-top) + clamp(4.8rem, 7vw, 5.9rem))
210
+ clamp(5.25rem, 6vw, 7rem)
211
+ calc(env(safe-area-inset-bottom) + clamp(5.35rem, 7.4vw, 6.35rem));
212
212
  }
213
213
 
214
214
  .cm-app-chrome__navdock {
@@ -358,27 +358,38 @@ export const shellCss = `/**
358
358
  .cm-app-chrome__hud-group {
359
359
  container-type: inline-size;
360
360
  display: flex;
361
- max-width: min(100%, 47rem);
361
+ width: min(100%, 68rem);
362
362
  min-width: 0;
363
363
  align-items: center;
364
364
  justify-content: flex-end;
365
365
  gap: var(--cm-chrome-gap);
366
+ flex-wrap: nowrap;
366
367
  pointer-events: auto;
367
368
  }
368
369
 
369
370
  .cm-app-chrome__hud-item,
370
- .cm-app-chrome__hud-fold {
371
+ .cm-app-chrome__hud-fold,
372
+ .cm-app-chrome__search {
371
373
  position: relative;
372
- min-width: 0;
373
- flex: 0 1 auto;
374
+ min-width: max-content;
375
+ flex: 0 0 auto;
376
+ }
377
+
378
+ .cm-app-chrome__search {
379
+ display: inline-flex;
380
+ min-width: var(--cm-hud-size);
381
+ align-items: center;
382
+ justify-content: flex-end;
383
+ gap: var(--cm-chrome-gap);
374
384
  }
375
385
 
376
386
  .cm-app-chrome__hud-item[data-priority="low"] {
377
- flex-shrink: 1;
387
+ flex-shrink: 0;
378
388
  }
379
389
 
380
390
  .cm-hud-button {
381
391
  display: inline-flex;
392
+ align-items: center;
382
393
  width: auto;
383
394
  max-width: min(15.5rem, 52vw);
384
395
  justify-content: center;
@@ -418,6 +429,35 @@ export const shellCss = `/**
418
429
  max-width: 8.8rem;
419
430
  }
420
431
 
432
+ .cm-hud-wallet {
433
+ min-width: min(13.75rem, 42vw);
434
+ justify-content: flex-start;
435
+ padding-inline: 0.82rem 0.74rem;
436
+ background:
437
+ radial-gradient(circle at 14% 50%, hsl(var(--primary) / 0.18), transparent 34%),
438
+ radial-gradient(circle at 86% 100%, hsl(var(--accent) / 0.12), transparent 40%),
439
+ linear-gradient(145deg, hsl(226 21% 22% / 0.58), hsl(221 50% 8% / 0.48));
440
+ }
441
+
442
+ .cm-hud-wallet__icon {
443
+ color: hsl(var(--primary));
444
+ opacity: 0.92;
445
+ }
446
+
447
+ .cm-hud-wallet .cm-hud-value {
448
+ color: hsl(var(--foreground));
449
+ font-family: var(--font-display), sans-serif;
450
+ font-size: 0.76rem;
451
+ letter-spacing: 0.05em;
452
+ }
453
+
454
+ .cm-hud-wallet .cm-hud-address {
455
+ color: hsl(var(--primary) / 0.9);
456
+ font-size: 0.68rem;
457
+ font-weight: 650;
458
+ letter-spacing: 0.04em;
459
+ }
460
+
421
461
  .cm-hud-status {
422
462
  width: 0.48rem;
423
463
  height: 0.48rem;
@@ -533,6 +573,34 @@ export const shellCss = `/**
533
573
  box-shadow: inset 0 0 20px hsl(var(--primary) / 0.04);
534
574
  }
535
575
 
576
+ .cm-search--hud {
577
+ width: 0;
578
+ max-width: min(24rem, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size)));
579
+ min-height: var(--cm-hud-size);
580
+ padding-inline: 0;
581
+ border-width: 0;
582
+ opacity: 0;
583
+ overflow: hidden;
584
+ pointer-events: none;
585
+ transform: scaleX(0.92);
586
+ transform-origin: right center;
587
+ transition:
588
+ width 180ms ease,
589
+ padding-inline 180ms ease,
590
+ opacity 150ms ease,
591
+ transform 180ms ease,
592
+ border-color 180ms ease;
593
+ }
594
+
595
+ .cm-app-chrome__search[data-open="true"] .cm-search--hud {
596
+ width: clamp(13rem, 29vw, 24rem);
597
+ padding-inline: 0.85rem;
598
+ border-width: 1px;
599
+ opacity: 1;
600
+ pointer-events: auto;
601
+ transform: scaleX(1);
602
+ }
603
+
536
604
  .cm-search input,
537
605
  .cm-search__input {
538
606
  min-width: 0;
@@ -842,17 +910,27 @@ export const shellCss = `/**
842
910
  }
843
911
 
844
912
  @container (max-width: 31rem) {
845
- .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-value,
846
913
  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-address,
847
914
  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-label {
848
915
  display: none;
849
916
  }
850
917
 
851
- .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-button,
852
- .cm-app-chrome__hud-item[data-priority="medium"] .cm-session-trigger {
918
+ .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet .cm-hud-value {
919
+ display: none;
920
+ }
921
+
922
+ .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet {
853
923
  width: var(--cm-hud-size);
924
+ min-width: var(--cm-hud-size);
854
925
  padding-inline: 0;
855
926
  }
927
+
928
+ .cm-app-chrome__hud-item[data-priority="medium"] .cm-session-trigger {
929
+ width: auto;
930
+ min-width: max-content;
931
+ max-width: min(12rem, 58vw);
932
+ padding-inline: 0.72rem;
933
+ }
856
934
  }
857
935
 
858
936
  @media (max-width: 820px) {
@@ -883,7 +961,13 @@ export const shellCss = `/**
883
961
  }
884
962
 
885
963
  .cm-app-chrome__hud-group {
886
- max-width: min(100%, 100vw - var(--cm-chrome-safe) * 2);
964
+ width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2));
965
+ }
966
+
967
+ .cm-app-chrome__hud-item,
968
+ .cm-app-chrome__hud-fold,
969
+ .cm-app-chrome__search {
970
+ min-width: auto;
887
971
  }
888
972
 
889
973
  .cm-app-chrome__navdock {
@@ -935,6 +1019,20 @@ export const shellCss = `/**
935
1019
  .cm-hud-overflow {
936
1020
  display: inline-flex;
937
1021
  }
1022
+
1023
+ .cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-item,
1024
+ .cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-fold {
1025
+ display: none;
1026
+ }
1027
+
1028
+ .cm-app-chrome__search[data-open="true"] {
1029
+ flex: 1 1 auto;
1030
+ min-width: 0;
1031
+ }
1032
+
1033
+ .cm-app-chrome__search[data-open="true"] .cm-search--hud {
1034
+ width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size) - var(--cm-chrome-gap)));
1035
+ }
938
1036
  }
939
1037
 
940
1038
  /* ── Form Controls ── */
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAw6DvB,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0gEvB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@compose-market/theme",
3
- "version": "0.0.93",
3
+ "version": "0.0.95",
4
4
  "description": "Official design tokens and theme system for Compose.Market",
5
5
  "keywords": [
6
6
  "design-tokens",
@@ -171,4 +171,4 @@
171
171
  "access": "public"
172
172
  },
173
173
  "module": "./dist/index.js"
174
- }
174
+ }