@sortsys/ui 0.1.7 → 0.1.9
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.
- package/dist/dev.js +117 -58
- package/dist/index.d.ts +21 -1
- package/dist/index.js +117 -58
- package/dist/styles/default.css +1 -1
- package/package.json +1 -5
- package/dist/dev.jsx +0 -1607
- package/dist/index.jsx +0 -1607
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { delegateEvents, template, insert, memo, effect, setAttribute, use, createComponent, addEventListener,
|
|
2
|
-
import { createContext, useContext, createSignal, onMount, onCleanup, createEffect, createUniqueId, For, untrack, createMemo, Show, createResource } from 'solid-js';
|
|
1
|
+
import { delegateEvents, template, insert, memo, effect, className, setAttribute, use, createComponent, addEventListener, spread, mergeProps, style, setStyleProperty, Portal } from 'solid-js/web';
|
|
2
|
+
import { createContext, useContext, createSignal, onMount, onCleanup, createEffect, createUniqueId, For, untrack, createMemo, children, Show, createResource } from 'solid-js';
|
|
3
3
|
import { useLocation, A, useNavigate } from '@solidjs/router';
|
|
4
4
|
|
|
5
5
|
// src/components/SSButton.tsx
|
|
@@ -36,7 +36,7 @@ function SSCallout(props) {
|
|
|
36
36
|
color,
|
|
37
37
|
class: className,
|
|
38
38
|
style,
|
|
39
|
-
children,
|
|
39
|
+
children: children2,
|
|
40
40
|
...rest
|
|
41
41
|
} = props;
|
|
42
42
|
return (() => {
|
|
@@ -46,7 +46,7 @@ function SSCallout(props) {
|
|
|
46
46
|
"style": style
|
|
47
47
|
}), false, true);
|
|
48
48
|
insert(_el$2, icon);
|
|
49
|
-
insert(_el$4,
|
|
49
|
+
insert(_el$4, children2);
|
|
50
50
|
return _el$;
|
|
51
51
|
})();
|
|
52
52
|
}
|
|
@@ -83,10 +83,51 @@ function SSChip(props) {
|
|
|
83
83
|
}
|
|
84
84
|
delegateEvents(["click"]);
|
|
85
85
|
var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
|
|
86
|
-
var _tmpl$23 = /* @__PURE__ */ template(`<div
|
|
87
|
-
var _tmpl$33 = /* @__PURE__ */ template(`<div
|
|
86
|
+
var _tmpl$23 = /* @__PURE__ */ template(`<div><div class=ss_attr_list__label></div><div class=ss_attr_list__value>`);
|
|
87
|
+
var _tmpl$33 = /* @__PURE__ */ template(`<div class=ss_attr_list__value>`);
|
|
88
|
+
var SSAttrList = (props) => {
|
|
89
|
+
const resolved = children(() => props.children);
|
|
90
|
+
const {
|
|
91
|
+
class: className,
|
|
92
|
+
children: _children,
|
|
93
|
+
...rest
|
|
94
|
+
} = props;
|
|
95
|
+
return createComponent(Show, {
|
|
96
|
+
get when() {
|
|
97
|
+
return !!resolved();
|
|
98
|
+
},
|
|
99
|
+
get children() {
|
|
100
|
+
var _el$ = _tmpl$4();
|
|
101
|
+
spread(_el$, mergeProps(rest, {
|
|
102
|
+
"class": `ss_attr_list ${className ?? ""}`
|
|
103
|
+
}), false, true);
|
|
104
|
+
insert(_el$, resolved);
|
|
105
|
+
return _el$;
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
SSAttrList.Attr = function(props) {
|
|
110
|
+
return (() => {
|
|
111
|
+
var _el$2 = _tmpl$23(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
|
|
112
|
+
insert(_el$3, () => props.name);
|
|
113
|
+
insert(_el$4, () => props.value);
|
|
114
|
+
insert(_el$2, (() => {
|
|
115
|
+
var _c$ = memo(() => !!!!props.third);
|
|
116
|
+
return () => _c$() && (() => {
|
|
117
|
+
var _el$5 = _tmpl$33();
|
|
118
|
+
insert(_el$5, () => props.third);
|
|
119
|
+
return _el$5;
|
|
120
|
+
})();
|
|
121
|
+
})(), null);
|
|
122
|
+
effect(() => className(_el$2, `ss_attr_list__row ${props.third ? "ss_attr_list__row--third" : ""}`));
|
|
123
|
+
return _el$2;
|
|
124
|
+
})();
|
|
125
|
+
};
|
|
126
|
+
var _tmpl$5 = /* @__PURE__ */ template(`<div>`);
|
|
127
|
+
var _tmpl$24 = /* @__PURE__ */ template(`<div class=ss_table__pagination><button type=button class=ss_table__page_button aria-label="Erste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Vorherige Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button><span class=ss_table__page_info>Seite <!> von </span><button type=button class=ss_table__page_button aria-label="N\xE4chste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Letzte Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13">`);
|
|
128
|
+
var _tmpl$34 = /* @__PURE__ */ template(`<div><div class=ss_table__scroll><table><thead><tr></tr></thead><tbody>`);
|
|
88
129
|
var _tmpl$42 = /* @__PURE__ */ template(`<th>`);
|
|
89
|
-
var _tmpl$
|
|
130
|
+
var _tmpl$52 = /* @__PURE__ */ template(`<button type=button class=ss_table__sort_button><span class=ss_table__sort_icon aria-hidden=true>`);
|
|
90
131
|
var _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
|
|
91
132
|
var _tmpl$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 15l6 -6l6 6">`);
|
|
92
133
|
var _tmpl$8 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-selector"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4">`);
|
|
@@ -103,7 +144,7 @@ function SSDataCell(props) {
|
|
|
103
144
|
return null;
|
|
104
145
|
});
|
|
105
146
|
return (() => {
|
|
106
|
-
var _el$ = _tmpl$
|
|
147
|
+
var _el$ = _tmpl$5();
|
|
107
148
|
insert(_el$, () => {
|
|
108
149
|
const value = rendered();
|
|
109
150
|
if (value && typeof value.then === "function") {
|
|
@@ -175,7 +216,7 @@ function SSDataTable(props) {
|
|
|
175
216
|
const paginationPosition = () => props.paginationPosition ?? "bottom";
|
|
176
217
|
const containerClass = () => `ss_table ${paginationPosition() === "top" ? "ss_table--pagination-top" : ""} ${props.class ?? ""}`;
|
|
177
218
|
const paginationBar = () => (() => {
|
|
178
|
-
var _el$2 = _tmpl$
|
|
219
|
+
var _el$2 = _tmpl$24(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling; _el$8.nextSibling; var _el$9 = _el$5.nextSibling, _el$0 = _el$9.nextSibling;
|
|
179
220
|
_el$3.$$click = () => goToPage(1);
|
|
180
221
|
_el$4.$$click = () => goToPage(page() - 1);
|
|
181
222
|
insert(_el$5, page, _el$8);
|
|
@@ -198,7 +239,7 @@ function SSDataTable(props) {
|
|
|
198
239
|
return _el$2;
|
|
199
240
|
})();
|
|
200
241
|
return (() => {
|
|
201
|
-
var _el$1 = _tmpl$
|
|
242
|
+
var _el$1 = _tmpl$34(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling;
|
|
202
243
|
insert(_el$1, (() => {
|
|
203
244
|
var _c$ = memo(() => paginationPosition() === "top");
|
|
204
245
|
return () => _c$() && paginationBar();
|
|
@@ -214,7 +255,7 @@ function SSDataTable(props) {
|
|
|
214
255
|
return (() => {
|
|
215
256
|
var _el$15 = _tmpl$42();
|
|
216
257
|
insert(_el$15, sortable ? (() => {
|
|
217
|
-
var _el$16 = _tmpl$
|
|
258
|
+
var _el$16 = _tmpl$52(), _el$17 = _el$16.firstChild;
|
|
218
259
|
_el$16.$$click = () => toggleSort(index());
|
|
219
260
|
insert(_el$16, () => column.label, _el$17);
|
|
220
261
|
insert(_el$17, (() => {
|
|
@@ -283,11 +324,29 @@ function SSDataTable(props) {
|
|
|
283
324
|
})();
|
|
284
325
|
}
|
|
285
326
|
delegateEvents(["click"]);
|
|
286
|
-
var _tmpl$10 = /* @__PURE__ */ template(`<div
|
|
287
|
-
|
|
288
|
-
|
|
327
|
+
var _tmpl$10 = /* @__PURE__ */ template(`<div role=separator>`);
|
|
328
|
+
function SSDivider(props) {
|
|
329
|
+
return (() => {
|
|
330
|
+
var _el$ = _tmpl$10();
|
|
331
|
+
effect((_p$) => {
|
|
332
|
+
var _v$ = `ss_divider ${props.vertical ? "ss_divider--vertical" : ""} ${props.class ?? ""}`, _v$2 = props.style, _v$3 = props.vertical ? "vertical" : "horizontal";
|
|
333
|
+
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
334
|
+
_p$.t = style(_el$, _v$2, _p$.t);
|
|
335
|
+
_v$3 !== _p$.a && setAttribute(_el$, "aria-orientation", _p$.a = _v$3);
|
|
336
|
+
return _p$;
|
|
337
|
+
}, {
|
|
338
|
+
e: void 0,
|
|
339
|
+
t: void 0,
|
|
340
|
+
a: void 0
|
|
341
|
+
});
|
|
342
|
+
return _el$;
|
|
343
|
+
})();
|
|
344
|
+
}
|
|
345
|
+
var _tmpl$11 = /* @__PURE__ */ template(`<div class=ss_dropdown__menu role=menu>`);
|
|
346
|
+
var _tmpl$25 = /* @__PURE__ */ template(`<div><button type=button class="ss_dropdown__trigger ss_button ss_button--icon"aria-haspopup=menu>`);
|
|
347
|
+
var _tmpl$35 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0">`);
|
|
289
348
|
var _tmpl$43 = /* @__PURE__ */ template(`<button type=button class=ss_dropdown__item><span class=ss_dropdown__item_icon></span><span class=ss_dropdown__item_label>`);
|
|
290
|
-
var _tmpl$
|
|
349
|
+
var _tmpl$53 = /* @__PURE__ */ template(`<span class=ss_dropdown__item_check aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M5 12l5 5l10 -10">`);
|
|
291
350
|
function SSDropdown(props) {
|
|
292
351
|
const [open, setOpen] = createSignal(false);
|
|
293
352
|
const [renderMenu, setRenderMenu] = createSignal(false);
|
|
@@ -322,16 +381,16 @@ function SSDropdown(props) {
|
|
|
322
381
|
});
|
|
323
382
|
});
|
|
324
383
|
return (() => {
|
|
325
|
-
var _el$ = _tmpl$
|
|
384
|
+
var _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
|
|
326
385
|
use((el) => rootRef = el, _el$);
|
|
327
386
|
_el$2.$$click = () => setOpen((value) => !value);
|
|
328
|
-
insert(_el$2, () => props.icon ?? _tmpl$
|
|
387
|
+
insert(_el$2, () => props.icon ?? _tmpl$35());
|
|
329
388
|
insert(_el$, createComponent(Show, {
|
|
330
389
|
get when() {
|
|
331
390
|
return renderMenu();
|
|
332
391
|
},
|
|
333
392
|
get children() {
|
|
334
|
-
var _el$3 = _tmpl$
|
|
393
|
+
var _el$3 = _tmpl$11();
|
|
335
394
|
insert(_el$3, createComponent(For, {
|
|
336
395
|
get each() {
|
|
337
396
|
return props.items;
|
|
@@ -346,7 +405,7 @@ function SSDropdown(props) {
|
|
|
346
405
|
insert(_el$7, () => item.label);
|
|
347
406
|
insert(_el$5, (() => {
|
|
348
407
|
var _c$ = memo(() => !!item.checked);
|
|
349
|
-
return () => _c$() && _tmpl$
|
|
408
|
+
return () => _c$() && _tmpl$53();
|
|
350
409
|
})(), null);
|
|
351
410
|
effect((_p$) => {
|
|
352
411
|
var _v$5 = item.checked ? "menuitemcheckbox" : "menuitem", _v$6 = item.checked ? "true" : void 0;
|
|
@@ -381,9 +440,9 @@ function SSDropdown(props) {
|
|
|
381
440
|
})();
|
|
382
441
|
}
|
|
383
442
|
delegateEvents(["click"]);
|
|
384
|
-
var _tmpl$
|
|
385
|
-
var _tmpl$
|
|
386
|
-
var _tmpl$
|
|
443
|
+
var _tmpl$12 = /* @__PURE__ */ template(`<div><div class=ss_expandable__header role=button tabindex=0><span class=ss_expandable__icon aria-hidden=true></span><span class=ss_expandable__title></span></div><div class=ss_expandable__content style=transition-duration:200ms><div class=ss_expandable__divider_wrapper><div class=ss_expandable__divider>`);
|
|
444
|
+
var _tmpl$26 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
|
|
445
|
+
var _tmpl$36 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6">`);
|
|
387
446
|
var TRANSITION_MS = 200;
|
|
388
447
|
function SSExpandable(props) {
|
|
389
448
|
const [height, setHeight] = createSignal(props.initiallyExpanded ? "auto" : 0);
|
|
@@ -405,7 +464,7 @@ function SSExpandable(props) {
|
|
|
405
464
|
if (timeoutId) clearTimeout(timeoutId);
|
|
406
465
|
});
|
|
407
466
|
return (() => {
|
|
408
|
-
var _el$ = _tmpl$
|
|
467
|
+
var _el$ = _tmpl$12(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild; _el$6.firstChild;
|
|
409
468
|
_el$2.$$keydown = (event) => {
|
|
410
469
|
if (event.key === "Enter" || event.key === " ") {
|
|
411
470
|
event.preventDefault();
|
|
@@ -415,7 +474,7 @@ function SSExpandable(props) {
|
|
|
415
474
|
_el$2.$$click = toggle;
|
|
416
475
|
insert(_el$3, (() => {
|
|
417
476
|
var _c$ = memo(() => !!isExpanded());
|
|
418
|
-
return () => _c$() ? _tmpl$
|
|
477
|
+
return () => _c$() ? _tmpl$26() : _tmpl$36();
|
|
419
478
|
})());
|
|
420
479
|
insert(_el$4, () => props.title);
|
|
421
480
|
use((el) => contentRef = el, _el$5);
|
|
@@ -453,22 +512,22 @@ function createLoading() {
|
|
|
453
512
|
}
|
|
454
513
|
|
|
455
514
|
// src/components/SSForm.tsx
|
|
456
|
-
var _tmpl$
|
|
457
|
-
var _tmpl$
|
|
458
|
-
var _tmpl$
|
|
515
|
+
var _tmpl$13 = /* @__PURE__ */ template(`<form class=ss_form>`);
|
|
516
|
+
var _tmpl$27 = /* @__PURE__ */ template(`<div class=ss_form_input><label></label><div class=ss__wrapper>`);
|
|
517
|
+
var _tmpl$37 = /* @__PURE__ */ template(`<textarea>`);
|
|
459
518
|
var _tmpl$44 = /* @__PURE__ */ template(`<input>`);
|
|
460
|
-
var _tmpl$
|
|
519
|
+
var _tmpl$54 = /* @__PURE__ */ template(`<ul class=ss__suggestions>`);
|
|
461
520
|
var _tmpl$62 = /* @__PURE__ */ template(`<li>`);
|
|
462
521
|
var _tmpl$72 = /* @__PURE__ */ template(`<span role=alert>`);
|
|
463
522
|
var _tmpl$82 = /* @__PURE__ */ template(`<div class=ss_form_date><label></label><div class=ss__wrapper><input type=text inputmode=numeric autocomplete=off placeholder=TT.MM.JJJJ><button type=button class=ss_form_date__icon aria-label="Kalender \xF6ffnen"aria-haspopup=dialog><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=currentColor class="icon icon-tabler icons-tabler-filled icon-tabler-calendar-week"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M16 2c.183 0 .355 .05 .502 .135l.033 .02c.28 .177 .465 .49 .465 .845v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 .514 -.874l.093 -.046l.066 -.025l.1 -.029l.107 -.019l.12 -.007q .083 0 .161 .013l.122 .029l.04 .012l.06 .023c.328 .135 .568 .44 .61 .806l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z"></path><path d="M9.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M13.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M17.02 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z"></path><path d="M9.015 16a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1">`);
|
|
464
523
|
var _tmpl$92 = /* @__PURE__ */ template(`<div class=ss_form_date__picker role=dialog aria-label="Datum ausw\xE4hlen"><div class=ss_form_date__header><div class=ss_form_date__nav_group><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button></div><div class=ss_form_date__title></div><div class=ss_form_date__nav_group><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13"></path></svg></button></div></div><div class=ss_form_date__weekdays></div><div class=ss_form_date__grid>`);
|
|
465
524
|
var _tmpl$02 = /* @__PURE__ */ template(`<span>`);
|
|
466
|
-
var _tmpl$
|
|
525
|
+
var _tmpl$14 = /* @__PURE__ */ template(`<button type=button class=ss_form_date__day>`);
|
|
467
526
|
var _tmpl$102 = /* @__PURE__ */ template(`<span class="ss_form_date__day is-empty">`);
|
|
468
527
|
var _tmpl$112 = /* @__PURE__ */ template(`<div class=ss_form_checkbox><div class=ss__wrapper><input type=checkbox><label>`);
|
|
469
528
|
var _tmpl$122 = /* @__PURE__ */ template(`<div class=ss_form_select><label></label><div class=ss_form_select__field><select></select><span class=ss_form_select__icon aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
|
|
470
529
|
var _tmpl$132 = /* @__PURE__ */ template(`<option>`);
|
|
471
|
-
var _tmpl$
|
|
530
|
+
var _tmpl$142 = /* @__PURE__ */ template(`<div class=ss_form_ac_select><label>`);
|
|
472
531
|
var _tmpl$15 = /* @__PURE__ */ template(`<div class=ss__selection><div class=ss__content></div><button type=button class=ss__clear aria-label="Auswahl entfernen">\xD7`);
|
|
473
532
|
var _tmpl$16 = /* @__PURE__ */ template(`<div class=ss__wrapper><div class=ss__input_row><input>`);
|
|
474
533
|
var _tmpl$17 = /* @__PURE__ */ template(`<span class=ss__prefix role=button>`);
|
|
@@ -502,7 +561,7 @@ var SSForm = function(props) {
|
|
|
502
561
|
})
|
|
503
562
|
};
|
|
504
563
|
return (() => {
|
|
505
|
-
var _el$ = _tmpl$
|
|
564
|
+
var _el$ = _tmpl$13();
|
|
506
565
|
_el$.addEventListener("submit", (e) => {
|
|
507
566
|
e.preventDefault();
|
|
508
567
|
context.submit();
|
|
@@ -638,12 +697,12 @@ SSForm.Input = function(props) {
|
|
|
638
697
|
};
|
|
639
698
|
const _id = createUniqueId();
|
|
640
699
|
return (() => {
|
|
641
|
-
var _el$2 = _tmpl$
|
|
700
|
+
var _el$2 = _tmpl$27(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
|
|
642
701
|
insert(_el$3, () => props.label);
|
|
643
702
|
insert(_el$4, (() => {
|
|
644
703
|
var _c$ = memo(() => !!props.textArea);
|
|
645
704
|
return () => _c$() ? (() => {
|
|
646
|
-
var _el$5 = _tmpl$
|
|
705
|
+
var _el$5 = _tmpl$37();
|
|
647
706
|
_el$5.$$keydown = handleKeyDown;
|
|
648
707
|
_el$5.$$input = (e) => handleInputChange(e.target.value);
|
|
649
708
|
effect((_p$) => {
|
|
@@ -679,7 +738,7 @@ SSForm.Input = function(props) {
|
|
|
679
738
|
insert(_el$4, (() => {
|
|
680
739
|
var _c$2 = memo(() => !!!!suggItems().length);
|
|
681
740
|
return () => _c$2() && (() => {
|
|
682
|
-
var _el$7 = _tmpl$
|
|
741
|
+
var _el$7 = _tmpl$54();
|
|
683
742
|
use((el) => suggListRef = el, _el$7);
|
|
684
743
|
insert(_el$7, createComponent(For, {
|
|
685
744
|
get each() {
|
|
@@ -876,7 +935,7 @@ SSForm.Date = function(props) {
|
|
|
876
935
|
return _el$24;
|
|
877
936
|
})()));
|
|
878
937
|
insert(_el$23, () => buildCalendar().map((day) => day ? (() => {
|
|
879
|
-
var _el$25 = _tmpl$
|
|
938
|
+
var _el$25 = _tmpl$14();
|
|
880
939
|
_el$25.$$click = () => handleSelect(day);
|
|
881
940
|
insert(_el$25, day);
|
|
882
941
|
effect((_p$) => {
|
|
@@ -1251,7 +1310,7 @@ SSForm.ACSelect = function(props) {
|
|
|
1251
1310
|
};
|
|
1252
1311
|
const isDisabled = () => props.disabled || context?.loading();
|
|
1253
1312
|
return (() => {
|
|
1254
|
-
var _el$39 = _tmpl$
|
|
1313
|
+
var _el$39 = _tmpl$142(), _el$40 = _el$39.firstChild;
|
|
1255
1314
|
insert(_el$40, () => props.label);
|
|
1256
1315
|
insert(_el$39, (() => {
|
|
1257
1316
|
var _c$8 = memo(() => !!(props.maxSelectedItems === 1 && !!props.renderSelection && value().length === 1));
|
|
@@ -1307,7 +1366,7 @@ SSForm.ACSelect = function(props) {
|
|
|
1307
1366
|
insert(_el$44, (() => {
|
|
1308
1367
|
var _c$1 = memo(() => !!!!suggItems().length);
|
|
1309
1368
|
return () => _c$1() && (() => {
|
|
1310
|
-
var _el$48 = _tmpl$
|
|
1369
|
+
var _el$48 = _tmpl$54();
|
|
1311
1370
|
use((el) => suggListRef = el, _el$48);
|
|
1312
1371
|
insert(_el$48, createComponent(For, {
|
|
1313
1372
|
get each() {
|
|
@@ -1414,7 +1473,7 @@ SSForm.rules = {
|
|
|
1414
1473
|
};
|
|
1415
1474
|
delegateEvents(["input", "keydown", "pointerdown", "click"]);
|
|
1416
1475
|
var _tmpl$19 = /* @__PURE__ */ template(`<div><div class=ss_header__text><h3 class=ss_header__title></h3></div><div class=ss_header__actions>`);
|
|
1417
|
-
var _tmpl$
|
|
1476
|
+
var _tmpl$28 = /* @__PURE__ */ template(`<h5 class=ss_header__subtitle>`);
|
|
1418
1477
|
function SSHeader(props) {
|
|
1419
1478
|
return (() => {
|
|
1420
1479
|
var _el$ = _tmpl$19(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
|
|
@@ -1422,7 +1481,7 @@ function SSHeader(props) {
|
|
|
1422
1481
|
insert(_el$2, (() => {
|
|
1423
1482
|
var _c$ = memo(() => !!props.subtitle);
|
|
1424
1483
|
return () => _c$() && (() => {
|
|
1425
|
-
var _el$5 = _tmpl$
|
|
1484
|
+
var _el$5 = _tmpl$28();
|
|
1426
1485
|
insert(_el$5, () => props.subtitle);
|
|
1427
1486
|
return _el$5;
|
|
1428
1487
|
})();
|
|
@@ -1441,10 +1500,10 @@ function SSHeader(props) {
|
|
|
1441
1500
|
})();
|
|
1442
1501
|
}
|
|
1443
1502
|
var _tmpl$20 = /* @__PURE__ */ template(`<div class=ss_modal__footer>`);
|
|
1444
|
-
var _tmpl$
|
|
1445
|
-
var _tmpl$
|
|
1503
|
+
var _tmpl$29 = /* @__PURE__ */ template(`<div class=ss_modal><div class=ss_modal__backdrop></div><div class=ss_modal__panel role=dialog aria-modal=true tabindex=-1><div class=ss_modal__body><div class=ss_modal__body_inner>`);
|
|
1504
|
+
var _tmpl$38 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M18 6l-12 12"></path><path d="M6 6l12 12">`);
|
|
1446
1505
|
var _tmpl$45 = /* @__PURE__ */ template(`<div class=ss_modal__header>`);
|
|
1447
|
-
var _tmpl$
|
|
1506
|
+
var _tmpl$55 = /* @__PURE__ */ template(`<h2 class=ss_modal__title>`);
|
|
1448
1507
|
var CLOSE_ANIMATION_MS = 180;
|
|
1449
1508
|
function SSModal(props) {
|
|
1450
1509
|
const [isMounted, setIsMounted] = createSignal(props.open);
|
|
@@ -1500,7 +1559,7 @@ function SSModal(props) {
|
|
|
1500
1559
|
get children() {
|
|
1501
1560
|
return createComponent(Portal, {
|
|
1502
1561
|
get children() {
|
|
1503
|
-
var _el$ = _tmpl$
|
|
1562
|
+
var _el$ = _tmpl$29(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
|
|
1504
1563
|
_el$2.$$click = handleBackdropClick;
|
|
1505
1564
|
use((el) => panelRef = el, _el$3);
|
|
1506
1565
|
insert(_el$3, (() => {
|
|
@@ -1510,7 +1569,7 @@ function SSModal(props) {
|
|
|
1510
1569
|
insert(_el$7, (() => {
|
|
1511
1570
|
var _c$2 = memo(() => !!props.title);
|
|
1512
1571
|
return () => _c$2() && (() => {
|
|
1513
|
-
var _el$9 = _tmpl$
|
|
1572
|
+
var _el$9 = _tmpl$55();
|
|
1514
1573
|
setAttribute(_el$9, "id", titleId);
|
|
1515
1574
|
insert(_el$9, () => props.title);
|
|
1516
1575
|
return _el$9;
|
|
@@ -1531,7 +1590,7 @@ function SSModal(props) {
|
|
|
1531
1590
|
props.onClose?.();
|
|
1532
1591
|
},
|
|
1533
1592
|
get children() {
|
|
1534
|
-
return _tmpl$
|
|
1593
|
+
return _tmpl$38();
|
|
1535
1594
|
}
|
|
1536
1595
|
});
|
|
1537
1596
|
}
|
|
@@ -1789,10 +1848,10 @@ function SSModalsProvider(props) {
|
|
|
1789
1848
|
});
|
|
1790
1849
|
}
|
|
1791
1850
|
var _tmpl$21 = /* @__PURE__ */ template(`<div><input type=checkbox class=ss_shell__drawer_toggle_input><header class=ss_shell__header><div class=ss_shell__header_left><label class="ss_shell__drawer_toggle ss_button ss_button--icon"aria-label="Navigation \xF6ffnen"role=button tabindex=0><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg></label><div class=ss_shell__title></div></div><div class=ss_shell__actions></div></header><div class=ss_shell__body><nav class=ss_shell__nav aria-label=Hauptnavigation><div class=ss_shell__nav_inner></div></nav><div class=ss_shell__main></div><label class=ss_shell__scrim aria-label="Navigation schlie\xDFen">`);
|
|
1792
|
-
var _tmpl$
|
|
1793
|
-
var _tmpl$
|
|
1851
|
+
var _tmpl$210 = /* @__PURE__ */ template(`<div class=ss_shell__nav_list>`);
|
|
1852
|
+
var _tmpl$39 = /* @__PURE__ */ template(`<a class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
|
|
1794
1853
|
var _tmpl$46 = /* @__PURE__ */ template(`<span class=ss_shell__nav_icon>`);
|
|
1795
|
-
var _tmpl$
|
|
1854
|
+
var _tmpl$56 = /* @__PURE__ */ template(`<button type=button class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
|
|
1796
1855
|
var _tmpl$63 = /* @__PURE__ */ template(`<details class=ss_shell__nav_group><summary class=ss_shell__nav_group_header><span class=ss_shell__nav_label></span><span class=ss_shell__nav_group_chevron aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class=ss_shell__nav_group_chevron_svg><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></span></summary><div class=ss_shell__nav_group_items>`);
|
|
1797
1856
|
var SSShellContext = createContext();
|
|
1798
1857
|
function SSShell(props) {
|
|
@@ -1851,7 +1910,7 @@ function SSShell(props) {
|
|
|
1851
1910
|
}
|
|
1852
1911
|
SSShell.Nav = function(props) {
|
|
1853
1912
|
return (() => {
|
|
1854
|
-
var _el$11 = _tmpl$
|
|
1913
|
+
var _el$11 = _tmpl$210();
|
|
1855
1914
|
insert(_el$11, () => props.children);
|
|
1856
1915
|
return _el$11;
|
|
1857
1916
|
})();
|
|
@@ -1862,7 +1921,7 @@ SSShell.NavLink = function(props) {
|
|
|
1862
1921
|
onCleanup(() => context?.unregisterHref(props.href));
|
|
1863
1922
|
const isActive = () => context?.activeHref() === props.href;
|
|
1864
1923
|
return (() => {
|
|
1865
|
-
var _el$12 = _tmpl$
|
|
1924
|
+
var _el$12 = _tmpl$39(), _el$13 = _el$12.firstChild;
|
|
1866
1925
|
_el$12.$$click = () => {
|
|
1867
1926
|
props.onclick?.();
|
|
1868
1927
|
context?.closeDrawer();
|
|
@@ -1891,7 +1950,7 @@ SSShell.NavLink = function(props) {
|
|
|
1891
1950
|
SSShell.NavAction = function(props) {
|
|
1892
1951
|
const context = useContext(SSShellContext);
|
|
1893
1952
|
return (() => {
|
|
1894
|
-
var _el$15 = _tmpl$
|
|
1953
|
+
var _el$15 = _tmpl$56(), _el$16 = _el$15.firstChild;
|
|
1895
1954
|
_el$15.$$click = () => {
|
|
1896
1955
|
props.onclick();
|
|
1897
1956
|
context?.closeDrawer();
|
|
@@ -1944,10 +2003,10 @@ function SSSurface(props) {
|
|
|
1944
2003
|
})();
|
|
1945
2004
|
}
|
|
1946
2005
|
var _tmpl$31 = /* @__PURE__ */ template(`<div><div class=ss_tile__row><div class=ss_tile__content>`);
|
|
1947
|
-
var _tmpl$
|
|
1948
|
-
var _tmpl$
|
|
2006
|
+
var _tmpl$211 = /* @__PURE__ */ template(`<span class=ss_tile__icon>`);
|
|
2007
|
+
var _tmpl$310 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
|
|
1949
2008
|
var _tmpl$47 = /* @__PURE__ */ template(`<h5 class=ss_tile__title><span class=ss_tile__text>`);
|
|
1950
|
-
var _tmpl$
|
|
2009
|
+
var _tmpl$57 = /* @__PURE__ */ template(`<div class=ss_tile__subtitle>`);
|
|
1951
2010
|
var _tmpl$64 = /* @__PURE__ */ template(`<div class=ss_tile__trailing>`);
|
|
1952
2011
|
function SSTile(props) {
|
|
1953
2012
|
return (() => {
|
|
@@ -1955,7 +2014,7 @@ function SSTile(props) {
|
|
|
1955
2014
|
insert(_el$2, (() => {
|
|
1956
2015
|
var _c$ = memo(() => !!props.icon);
|
|
1957
2016
|
return () => _c$() && (() => {
|
|
1958
|
-
var _el$4 = _tmpl$
|
|
2017
|
+
var _el$4 = _tmpl$211();
|
|
1959
2018
|
insert(_el$4, () => props.icon);
|
|
1960
2019
|
return _el$4;
|
|
1961
2020
|
})();
|
|
@@ -1963,7 +2022,7 @@ function SSTile(props) {
|
|
|
1963
2022
|
insert(_el$3, (() => {
|
|
1964
2023
|
var _c$2 = memo(() => !!props.href);
|
|
1965
2024
|
return () => _c$2() ? (() => {
|
|
1966
|
-
var _el$5 = _tmpl$
|
|
2025
|
+
var _el$5 = _tmpl$310();
|
|
1967
2026
|
insert(_el$5, createComponent(A, {
|
|
1968
2027
|
"class": "ss_tile__link",
|
|
1969
2028
|
get href() {
|
|
@@ -1986,7 +2045,7 @@ function SSTile(props) {
|
|
|
1986
2045
|
insert(_el$3, (() => {
|
|
1987
2046
|
var _c$3 = memo(() => !!props.subtitle);
|
|
1988
2047
|
return () => _c$3() && (() => {
|
|
1989
|
-
var _el$8 = _tmpl$
|
|
2048
|
+
var _el$8 = _tmpl$57();
|
|
1990
2049
|
insert(_el$8, () => props.subtitle);
|
|
1991
2050
|
return _el$8;
|
|
1992
2051
|
})();
|
|
@@ -2028,4 +2087,4 @@ function createSSTile(build) {
|
|
|
2028
2087
|
};
|
|
2029
2088
|
}
|
|
2030
2089
|
|
|
2031
|
-
export { SSButton, SSCallout, SSChip, SSDataTable, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };
|
|
2090
|
+
export { SSAttrList, SSButton, SSCallout, SSChip, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };
|
package/dist/styles/default.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;--bg-page: #f5f5f7;--bg-surface: #ffffff;--bg-surface-subtle: #f3f4f6;--shell-bg: radial-gradient(circle at top left, #eef2ff 0, #f5f5f7 38%, #f3f4f6 100%);--shell-header-bg: rgba(255, 255, 255, .85);--shell-header-border: rgba(209, 213, 219, .8);--shell-nav-bg: rgba(255, 255, 255, .92);--shell-nav-border: rgba(209, 213, 219, .85);--fg-primary: #0f172a;--fg-secondary: #4b5563;--fg-muted: #6b7280;--fg-inverse: #ffffff;--border-subtle: #e5e7eb;--border-strong: #d1d5db;--card-accent: #2563eb;--input-bg: #ffffff;--input-fg: var(--fg-primary);--input-border: #d1d5db;--input-border-hover: #9ca3af;--input-border-disabled: #e5e7eb;--input-bg-disabled: #f3f4f6;--input-fg-disabled: #9ca3af;--input-bg-hover: #f9fafb;--input-bg-focus: #ffffff;--scrollbar-thumb: rgba(15, 23, 42, .24);--primary: #2563eb;--primary-soft: #e0ecff;--primary-soft-stronger: #d1e1ff;--on-primary: #ffffff;--error: #dc2626;--on-error: #ffffff;--error-strong: #b91c1c;--disabled: #9ca3af;--on-disabled: #f9fafb;--suggestion-bg: var(--bg-surface);--suggestion-hover-bg: #f3f4ff;--suggestion-focus-bg: #e0ebff;--suggestion-selected-bg: #e0ebff;--suggestion-indicator: #2563eb;--btn-primary-bg: var(--primary);--btn-primary-border: #1d4ed8;--btn-primary-bg-hover: #1d4ed8;--btn-primary-border-hover: #1e40af;--btn-secondary-bg: #eef1f7;--btn-secondary-border: #d1d5db;--btn-secondary-bg-hover: #e0e3ec;--btn-secondary-border-hover: #cbd0dd;--btn-tertiary-bg: transparent;--btn-tertiary-border: var(--border-subtle);--btn-tertiary-bg-hover: #e9effa;--btn-tertiary-border-hover: var(--border-strong);--clear-bg: #edeff4;--clear-border: #e2e4ec;--clear-bg-hover: #e1e4ee;--clear-border-hover: #cbd0dd;--clear-fg: #4b5563;--token-bg: #eef2ff;--token-fg: #1f2937;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-pill: 999px;--focus-ring: 0 0 0 1px rgba(37, 99, 235, .75), 0 0 0 4px rgba(191, 219, 254, .9);--focus-ring-error: 0 0 0 1px rgba(220, 38, 38, .85), 0 0 0 4px rgba(254, 202, 202, .85);--shadow-soft: 0 10px 30px rgba(15, 23, 42, .06);--btn-shadow: 0 6px 18px rgba(15, 23, 42, .16);--btn-shadow-hover: 0 10px 30px rgba(15, 23, 42, .18)}@media (prefers-color-scheme: dark){:root{--bg-page: #0f1115;--bg-surface: #14171c;--bg-surface-subtle: #1a1e24;--fg-primary: #e7e9ee;--fg-secondary: #c7cbd4;--fg-muted: #9ca3af;--fg-inverse: #0f1115;--border-subtle: #2a2f36;--border-strong: #3a4048;--card-accent: #94a3b8;--input-bg: #14171c;--input-fg: var(--fg-primary);--input-border: #2a2f36;--input-border-hover: #3a4048;--input-border-disabled: #111827;--input-bg-disabled: #14171c;--input-fg-disabled: #6b7280;--input-bg-hover: #1a1e24;--input-bg-focus: #20252c;--scrollbar-thumb: rgba(156, 163, 175, .38);--primary: #3b82f6;--primary-soft: #172554;--primary-soft-stronger: #1d4ed8;--on-primary: #ffffff;--error: #fb7185;--on-error: #0f1115;--error-strong: #f43f5e;--suggestion-bg: #14171c;--suggestion-hover-bg: #1b2027;--suggestion-focus-bg: #21262e;--suggestion-selected-bg: #262c35;--suggestion-indicator: #94a3b8;--btn-primary-bg: var(--primary);--btn-primary-border: #1d4ed8;--btn-primary-bg-hover: #1d4ed8;--btn-primary-border-hover: #1e3a8a;--btn-secondary-bg: #1a1e24;--btn-secondary-border: #2f353e;--btn-secondary-bg-hover: #232831;--btn-secondary-border-hover: #3a4048;--btn-tertiary-bg: transparent;--btn-tertiary-border: #2f353e;--btn-tertiary-bg-hover: #232831;--btn-tertiary-border-hover: #3a4048;--clear-bg: #1a1e24;--clear-border: #2f353e;--clear-bg-hover: #232831;--clear-border-hover: #3a4048;--clear-fg: #e5e7eb;--token-bg: #232831;--token-fg: #e5e7eb;--shadow-soft: 0 18px 50px rgba(0, 0, 0, .75);--btn-shadow: 0 12px 30px rgba(0, 0, 0, .65);--btn-shadow-hover: 0 16px 40px rgba(0, 0, 0, .85);--shell-bg: radial-gradient(circle at top left, #1c2129 0, #0f1115 45%, #12161b 100%);--shell-header-bg: rgba(20, 23, 28, .92);--shell-header-border: rgba(58, 64, 72, .9);--shell-nav-bg: rgba(20, 23, 28, .96);--shell-nav-border: rgba(58, 64, 72, .92)}}@keyframes input-alert-appear{0%{opacity:0;transform:translateY(-1px)}to{opacity:1;transform:translateY(0)}}*,*:before,*:after{box-sizing:border-box}*{-webkit-tap-highlight-color:transparent}body{margin:0;font-family:inherit;color:var(--fg-primary);background-color:var(--bg-page);font-size:14px}html,body,#root{position:relative;height:100%;width:100%;overflow:hidden}.ss_form{max-width:48rem;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:1rem;padding:.5rem 0}.ss__suggestions{position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:10;display:flex;flex-direction:column;max-height:clamp(7rem,35vh,14rem);margin:0;padding:.25rem 0;list-style-type:none;background-color:var(--suggestion-bg);border-width:1px;border-style:solid;border-color:var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);overflow-y:auto;overflow-x:hidden;li{display:flex;align-items:flex-start;gap:.4rem;padding:.45rem .8rem;font-size:.9rem;line-height:1.45;color:var(--fg-primary);cursor:pointer;user-select:none;outline:none;+li{border-top:1px solid var(--border-subtle)}&:hover{background-color:var(--suggestion-hover-bg)}&:focus{background-color:var(--suggestion-focus-bg)}&.ss__hovered{background-color:var(--suggestion-focus-bg)}&.ss__selected{font-weight:500;background-color:var(--suggestion-selected-bg);box-shadow:inset 2px 0 0 var(--suggestion-indicator)}&.ss__selected.ss__hovered,&.ss__selected:hover{background-color:#2563eb14}.ss__title{font-weight:500}.ss__description{font-size:.8rem;color:var(--fg-muted)}}&::-webkit-scrollbar{width:6px}&::-webkit-scrollbar-track{background:transparent}&::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:999px}}.ss_form_input,.ss_form_date{display:flex;flex-direction:column;gap:.35rem;label{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--fg-muted)}.ss__wrapper{position:relative;display:inline-block;width:100%}input{display:block;width:100%;min-width:0;padding:.55rem .7rem;font-size:.95rem;line-height:1.4;color:var(--input-fg);background-color:var(--input-bg);border-width:1px;border-style:solid;border-color:var(--input-border);border-radius:var(--radius-md);outline:none;box-shadow:none;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease,transform 80ms ease;&:hover:not([disabled]){border-color:var(--input-border-hover);background-color:var(--input-bg-hover)}&:focus-visible{border-color:var(--primary);box-shadow:var(--focus-ring);background-color:var(--input-bg-focus)}&[disabled]{cursor:not-allowed;color:var(--input-fg-disabled);background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled)}}.ss__suggestions{max-height:clamp(7rem,30vh,12rem)}&:not(:focus-within){.ss__suggestions{display:none}}&:has([role=alert]){input{border-color:var(--error);box-shadow:var(--focus-ring-error)}}[role=alert]{margin-top:.15rem;font-size:.8rem;line-height:1.4;color:var(--error);animation:.12s input-alert-appear ease-out}}.ss_form_date{position:relative;input{padding-right:2.1rem}input::-webkit-calendar-picker-indicator{opacity:0;display:none}}.ss_form_date__icon{position:absolute;right:.7rem;top:50%;width:1rem;height:1rem;transform:translateY(-50%);color:var(--fg-muted);padding:0;border:none;background:transparent;cursor:pointer;&:disabled{cursor:not-allowed;color:var(--input-fg-disabled)}svg{width:100%;height:100%;display:block}}.ss_form_date__picker{position:absolute;top:calc(100% + .35rem);left:0;z-index:10;width:min(18rem,100%);padding:.75rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-surface);box-shadow:var(--shadow-soft)}.ss_form_date__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}.ss_form_date__nav_group{display:flex;align-items:center;gap:.35rem}.ss_form_date__title{font-size:.9rem;font-weight:600;color:var(--fg-primary);text-transform:capitalize}.ss_form_date__nav{width:1.8rem;height:1.8rem;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:var(--bg-surface-subtle);color:var(--fg-primary);cursor:pointer;transition:background-color .12s ease,border-color .12s ease;&:hover{border-color:var(--border-strong)}}.ss_form_date__nav svg{width:1rem;height:1rem;display:block;margin:0 auto}.ss_form_date__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem;margin-bottom:.35rem;font-size:.75rem;color:var(--fg-muted);text-align:center}.ss_form_date__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem}.ss_form_date__day{height:2rem;border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--fg-primary);cursor:pointer;transition:background-color .12s ease,border-color .12s ease;&:hover{background:var(--bg-surface-subtle)}&.is-selected{background:var(--primary-soft);border-color:var(--primary);color:var(--fg-primary);font-weight:600}&.is-today:not(.is-selected){border-color:var(--border-strong);background:var(--bg-surface-subtle);color:var(--fg-primary);font-weight:500}}.ss_form_date__day.is-empty{border:none;background:transparent;cursor:default}.ss_form_checkbox{display:flex;flex-direction:column;gap:.3rem;width:100%;font-size:.9rem;color:var(--fg-secondary);.ss__wrapper{display:inline-flex;align-items:flex-start;gap:.55rem;padding:.15rem .05rem;font-size:.9rem;line-height:1.5;color:var(--fg-secondary);background-color:transparent;border:none;outline:none}input[type=checkbox]{margin-top:.12rem;width:1.05rem;height:1.05rem;flex-shrink:0;position:relative;appearance:none;-webkit-appearance:none;-moz-appearance:none;accent-color:initial;border-radius:calc(var(--radius-sm) * .9);border:1px solid var(--border-strong);background-color:var(--bg-surface);box-shadow:0 1px 1px #0f172a0f;cursor:pointer;outline:none;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,transform 80ms ease;&:hover:not(:disabled){border-color:var(--input-border-hover);background-color:var(--input-bg-hover)}&:active:not(:disabled){transform:translateY(1px)}&:after{content:"";position:absolute;inset:0;margin:auto;width:.55rem;height:.3rem;border-left:2px solid var(--on-primary);border-bottom:2px solid var(--on-primary);transform-origin:center;transform:translateY(-1px) rotate(-45deg) scale(.2);opacity:0;transition:transform .12s ease-out,opacity .12s ease-out}&:checked,&[aria-checked=true]{background-color:var(--primary)!important;border-color:var(--primary)!important;&:after{opacity:1;transform:translateY(-1px) rotate(-45deg) scale(1)}}&:checked[disabled],&[aria-checked=true][disabled]{background-color:color-mix(in srgb,var(--input-bg-disabled) 70%,var(--fg-primary))!important;border-color:var(--input-border-disabled)!important}&[disabled]{cursor:not-allowed;background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled);box-shadow:none;opacity:.75;&:after{border-color:#fff}}}&:has(input[type=checkbox]:focus-visible){input[type=checkbox]{outline:none;box-shadow:var(--focus-ring)}}label{margin:0;font-size:.9rem;line-height:1.5;color:var(--fg-primary);cursor:pointer;user-select:none}&:has(input[type=checkbox][disabled]){color:var(--input-fg-disabled);user-select:none;label{cursor:not-allowed;color:var(--input-fg-disabled)}}[role=alert]{font-size:.8rem;color:var(--error);animation:.12s input-alert-appear ease-out}}.ss_form_select{display:flex;flex-direction:column;gap:.35rem;width:100%;label{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--fg-muted)}select{display:block;width:100%;padding:.55rem 2.1rem .55rem .7rem;font-size:.95rem;line-height:1.4;color:var(--input-fg);background-color:var(--input-bg);background-image:none;border-width:1px;border-style:solid;border-color:var(--input-border);border-radius:var(--radius-md);outline:none;appearance:none;box-shadow:none;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease;&:hover:not([disabled]){border-color:var(--input-border-hover);background-color:var(--input-bg-hover)}&:focus-visible{border-color:var(--primary);box-shadow:var(--focus-ring);background-color:var(--input-bg-focus)}&:has(+[role=alert]){border-color:var(--error);box-shadow:var(--focus-ring-error)}&[disabled]{cursor:not-allowed;color:var(--input-fg-disabled);background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled)}}.ss_form_select__field{position:relative}.ss_form_select__icon{position:absolute;right:.7rem;top:50%;width:1rem;height:1rem;transform:translateY(-50%);color:var(--fg-muted);pointer-events:none}.ss_form_select__icon svg{width:100%;height:100%;display:block}[role=alert]{font-size:.8rem;color:var(--error);animation:.12s input-alert-appear ease-out}}.ss_form_ac_select{display:flex;flex-direction:column;gap:.35rem;label{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--fg-muted)}.ss__wrapper{position:relative;display:inline-block;width:100%}.ss__input_row{display:flex;align-items:center;gap:.4rem;width:100%;min-width:0;padding:.5rem .65rem;font-size:.95rem;line-height:1.4;color:var(--input-fg);background-color:var(--input-bg);border-width:1px;border-style:solid;border-color:var(--input-border);border-radius:var(--radius-md);outline:none;box-shadow:none;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease;&:hover:not(:has([disabled])){border-color:var(--input-border-hover);background-color:var(--input-bg-hover)}&:has([disabled]){cursor:not-allowed;color:var(--input-fg-disabled);background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled)}input{flex-grow:1;min-width:0;padding:0;font-size:inherit;line-height:inherit;color:inherit;background-color:transparent;border:none;outline:none}.ss__prefix{flex-shrink:0;padding:.2rem .6rem;font-size:.78rem;line-height:1.3;white-space:nowrap;color:var(--token-fg);background-color:var(--token-bg);border-radius:var(--radius-pill);cursor:pointer;user-select:none;border:1px solid rgba(37,99,235,.18);transition:background-color .1s ease,border-color .1s ease,transform 80ms ease,box-shadow .1s ease;&:hover{background-color:#2563eb0f;border-color:#2563eb59;box-shadow:0 0 0 1px #bfdbfecc}&:active{transform:translateY(1px)}}.ss__prefix[aria-disabled=true]{cursor:not-allowed;opacity:.6;pointer-events:none}.ss__suffix{flex-shrink:0}}.ss__selection{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0;padding:.5rem .65rem;font-size:.95rem;line-height:1.4;color:var(--input-fg);background-color:var(--input-bg);border-width:1px;border-style:solid;border-color:var(--input-border);border-radius:var(--radius-md);outline:none;box-shadow:none;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease;&:has(.ss__clear[disabled]){cursor:not-allowed;color:var(--input-fg-disabled);background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled)}}.ss__content{flex:1;min-width:0}.ss__clear{flex-shrink:0;width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;line-height:1;color:var(--clear-fg);background:var(--clear-bg);border-width:1px;border-style:solid;border-color:var(--clear-border);border-radius:var(--radius-pill);cursor:pointer;user-select:none;transition:background-color .1s ease,border-color .1s ease,transform 80ms ease;&:hover:not([disabled]){border-color:var(--clear-border-hover);background-color:var(--clear-bg-hover)}&:active:not([disabled]){transform:translateY(1px)}&[disabled]{cursor:not-allowed;opacity:.55}}.ss__suggestions{max-height:clamp(8rem,40vh,16rem);li{padding-inline:.85rem}}&:not(:focus-within){.ss__suggestions{display:none}}&:focus-within{.ss__input_row,.ss__selection{border-color:var(--primary);box-shadow:var(--focus-ring);background-color:var(--input-bg-focus)}}&:has([role=alert]){.ss__input_row,.ss__selection{border-color:var(--error);box-shadow:var(--focus-ring-error)}}[role=alert]{font-size:.8rem;color:var(--error);animation:.12s input-alert-appear ease-out}}.ss_button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem 1.05rem;font-size:.9rem;font-weight:600;text-transform:none;text-align:center;letter-spacing:.01em;color:var(--on-primary);background:var(--btn-primary-bg);border:1px solid var(--btn-primary-border);border-radius:var(--radius-pill);outline:none;cursor:pointer;user-select:none;transition:background-color .12s ease,border-color .12s ease,opacity 80ms ease,transform 80ms ease,color .1s ease;&.secondary{color:var(--fg-primary);background:var(--btn-secondary-bg);border-color:var(--btn-secondary-border);box-shadow:none}&.tertiary{color:var(--fg-secondary);background:var(--btn-tertiary-bg);border-color:var(--btn-tertiary-border);box-shadow:none}&.danger{color:var(--on-error);background:var(--error);border-color:var(--error)}&:hover:not([disabled]){background-color:var(--btn-primary-bg-hover);border-color:var(--btn-primary-border-hover);&.secondary{background-color:var(--btn-secondary-bg-hover);border-color:var(--btn-secondary-border-hover)}&.tertiary{background-color:var(--btn-tertiary-bg-hover);border-color:var(--btn-tertiary-border-hover)}&.danger{background-color:var(--error-strong);border-color:var(--error-strong)}}&:active:not([disabled]){transform:translateY(1px)}&:focus-visible{outline:none;box-shadow:var(--focus-ring)}&[disabled]{cursor:not-allowed;color:var(--on-disabled);background:var(--disabled);border-color:var(--disabled);opacity:.9}}.ss_button--icon{width:2.1rem;height:2.1rem;padding:0;font-size:1.1rem;line-height:1;color:var(--fg-primary);background:transparent;border-color:transparent;border-radius:var(--radius-pill);box-shadow:none;transition:background-color .1s ease,border-color .1s ease,transform 80ms ease;&:hover:not([disabled]){background-color:var(--btn-tertiary-bg-hover);border-color:var(--btn-tertiary-border-hover)}&:active:not([disabled]){transform:translateY(1px)}&[disabled]{opacity:.5}}.ss_callout{--ss-callout-accent: var(--primary);--ss-callout-accent-soft: color-mix(in srgb, var(--ss-callout-accent) 22%, transparent);position:relative;display:flex;align-items:center;gap:1rem;width:100%;padding:1.15rem 1.4rem;font-size:.95rem;line-height:1.55;color:var(--fg-secondary);background:radial-gradient(circle at top left,var(--ss-callout-accent-soft) 0%,color-mix(in srgb,var(--ss-callout-accent-soft) 80%,var(--bg-surface) 20%) 28%,color-mix(in srgb,var(--ss-callout-accent-soft) 40%,var(--bg-surface) 60%) 62%,color-mix(in srgb,var(--ss-callout-accent-soft) 12%,var(--bg-surface) 88%) 82%,var(--bg-surface-subtle) 100%),var(--bg-surface);border-radius:calc(var(--radius-md) * 1.2);border:1px solid color-mix(in srgb,var(--border-subtle) 60%,var(--ss-callout-accent) 40%);.ss_callout__icon{flex-shrink:0;color:var(--ss-callout-accent);svg{width:1.6rem;height:1.6rem;display:block}}.ss_callout__content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.ss_callout__title{margin:0;font-size:1rem;font-weight:600;color:var(--fg-primary);line-height:1.45}.ss_callout__body{margin:.25rem 0 0;color:var(--fg-secondary)}.ss_callout__actions{margin-top:.65rem;display:inline-flex;gap:.65rem;font-size:.9rem;button,.ss_callout__link{padding:0;border:none;background:none;font:inherit;cursor:pointer;text-decoration:none;color:color-mix(in srgb,var(--ss-callout-accent) 80%,var(--fg-primary) 20%);&:hover{text-decoration:underline}}}&.ss_callout--subtle{box-shadow:none;border-color:var(--border-subtle);background:color-mix(in srgb,var(--bg-surface-subtle) 85%,var(--ss-callout-accent-soft) 15%)}}.ss_callout--red{--ss-callout-accent: #E53935}.ss_callout--pink{--ss-callout-accent: #D81B60}.ss_callout--purple{--ss-callout-accent: #8E24AA}.ss_callout--deep-purple{--ss-callout-accent: #5E35B1}.ss_callout--indigo{--ss-callout-accent: #3949AB}.ss_callout--blue{--ss-callout-accent: #1E88E5}.ss_callout--light-blue{--ss-callout-accent: #039BE5}.ss_callout--cyan{--ss-callout-accent: #00ACC1}.ss_callout--teal{--ss-callout-accent: #00897B}.ss_callout--green{--ss-callout-accent: #43A047}.ss_callout--light-green{--ss-callout-accent: #7CB342}.ss_callout--lime{--ss-callout-accent: #C0CA33}.ss_callout--yellow{--ss-callout-accent: #FDD835}.ss_callout--amber{--ss-callout-accent: #FFB300}.ss_callout--orange{--ss-callout-accent: #FB8C00}.ss_callout--deep-orange{--ss-callout-accent: #F4511E}.ss_callout--brown{--ss-callout-accent: #6D4C41}.ss_callout--grey{--ss-callout-accent: #757575}.ss_callout--blue-grey{--ss-callout-accent: #546E7A}.ss_dropdown{position:relative;display:inline-flex}.ss_dropdown__trigger{justify-content:center}.ss_dropdown__menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:30;min-width:12rem;padding:.4rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .14s ease,transform .16s ease;&[data-state=open]{opacity:1;transform:translateY(0) scale(1)}&[data-state=closed]{opacity:0;transform:translateY(-6px) scale(.98)}}.ss_dropdown__item{width:100%;display:flex;align-items:center;gap:.6rem;padding:.45rem .55rem;border-radius:var(--radius-md);border:none;background:transparent;color:var(--fg-primary);cursor:pointer;text-align:left;transition:background-color .12s ease,color .12s ease;&:hover{background:var(--bg-surface-subtle)}}.ss_dropdown__item_icon{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;color:var(--fg-muted);svg{width:100%;height:100%}}.ss_dropdown__item_label{flex:1;min-width:0;font-size:.9rem}.ss_dropdown__item_check{display:inline-flex;align-items:center;justify-content:center;color:var(--primary);svg{width:1rem;height:1rem}}.ss_chip{--ss-chip-accent: var(--primary);--ss-chip-accent-soft: color-mix(in srgb, var(--ss-chip-accent) 16%, transparent);display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--ss-chip-accent) 45%,var(--border-subtle) 55%);background:color-mix(in srgb,var(--ss-chip-accent-soft) 60%,var(--bg-surface) 40%);color:var(--fg-primary);font-size:.82rem;line-height:1.3}.ss_chip--clickable{cursor:pointer;transition:background-color .12s ease,border-color .12s ease,transform 80ms ease;&:hover{border-color:color-mix(in srgb,var(--ss-chip-accent) 65%,var(--border-strong) 35%);background:color-mix(in srgb,var(--ss-chip-accent-soft) 75%,var(--bg-surface) 25%)}&:active{transform:translateY(1px)}}.ss_chip__label{white-space:nowrap}.ss_chip__dismiss{width:1.3rem;height:1.3rem;padding:0;border:none;background:transparent;color:var(--fg-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;svg{width:.9rem;height:.9rem}&:hover{color:var(--fg-primary)}}.ss_chip--red{--ss-chip-accent: #E53935}.ss_chip--pink{--ss-chip-accent: #D81B60}.ss_chip--purple{--ss-chip-accent: #8E24AA}.ss_chip--deep-purple{--ss-chip-accent: #5E35B1}.ss_chip--indigo{--ss-chip-accent: #3949AB}.ss_chip--blue{--ss-chip-accent: #1E88E5}.ss_chip--light-blue{--ss-chip-accent: #039BE5}.ss_chip--cyan{--ss-chip-accent: #00ACC1}.ss_chip--teal{--ss-chip-accent: #00897B}.ss_chip--green{--ss-chip-accent: #43A047}.ss_chip--light-green{--ss-chip-accent: #7CB342}.ss_chip--lime{--ss-chip-accent: #C0CA33}.ss_chip--yellow{--ss-chip-accent: #FDD835}.ss_chip--amber{--ss-chip-accent: #FFB300}.ss_chip--orange{--ss-chip-accent: #FB8C00}.ss_chip--deep-orange{--ss-chip-accent: #F4511E}.ss_chip--brown{--ss-chip-accent: #6D4C41}.ss_chip--grey{--ss-chip-accent: #757575}.ss_chip--blue-grey{--ss-chip-accent: #546E7A}.ss_table{width:100%;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-soft);overflow:hidden}.ss_table__scroll{overflow:auto}.ss_table table{width:100%;border-collapse:collapse;min-width:32rem}.ss_table th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);background:color-mix(in srgb,var(--bg-surface-subtle) 80%,var(--bg-surface) 20%);border-bottom:1px solid var(--border-subtle);padding:.75rem .9rem}.ss_table__header_label{display:inline-flex;align-items:center;gap:.35rem}.ss_table__sort_button{border:none;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}.ss_table__sort_icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.7}.ss_table__sort_icon svg{width:1rem;height:1rem}.ss_table td{padding:.8rem .9rem;border-bottom:1px solid var(--border-subtle);color:var(--fg-primary);font-size:.9rem}.ss_table tbody tr:last-child td{border-bottom:none}.ss_table__pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem .9rem;border-top:1px solid var(--border-subtle);background:color-mix(in srgb,var(--bg-surface-subtle) 80%,var(--bg-surface) 20%)}.ss_table--pagination-top .ss_table__pagination{border-top:none;border-bottom:1px solid var(--border-subtle)}.ss_table__page_button{border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--fg-primary);border-radius:var(--radius-pill);width:2rem;height:2rem;padding:0;font-size:.85rem;cursor:pointer;transition:background-color .12s ease,border-color .12s ease;&:hover:not(:disabled){border-color:var(--border-strong);background:var(--bg-surface)}&:disabled{cursor:not-allowed;color:var(--fg-muted);border-color:var(--border-subtle);background:var(--bg-surface);opacity:.6}}.ss_table__page_info{font-size:.85rem;color:var(--fg-muted)}.ss_table__page_button svg{width:1rem;height:1rem;display:block;margin:0 auto}.ss_table td>div{display:inline-flex;align-items:center;gap:.4rem;min-width:0}.ss_table tbody tr[data-clickable=true]{cursor:pointer;transition:background-color .12s ease}.ss_table tbody tr[data-clickable=true]:hover{background:var(--bg-surface-subtle)}.ss_expandable{width:100%;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);overflow:hidden;.ss_expandable__header{width:100%;display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;text-align:left;background:var(--bg-surface);border:none;color:var(--fg-primary);cursor:pointer;user-select:none;transition:background-color .12s ease;&:hover{background:var(--bg-surface-subtle)}&:focus-visible{outline:none;box-shadow:var(--focus-ring)}}.ss_expandable__icon{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;color:var(--fg-muted);svg{width:1.1rem;height:1.1rem}}.ss_expandable__title{font-size:.96rem;font-weight:600;color:inherit}.ss_expandable__content{overflow:hidden;padding:0;background:var(--bg-surface);transition-property:height}.ss_expandable__divider_wrapper{padding:0 1rem 1rem}.ss_expandable__divider{height:1px;margin:.75rem 0 .8rem;background:var(--border-subtle)}}.ss_divider{width:100%;height:1px;background:var(--border-subtle)}.ss_divider--vertical{width:1px;height:100%}.ss_surface{width:100%;padding:1rem 1.25rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.ss_tile{width:100%;padding:.9rem 1rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}.ss_tile__row{display:flex;align-items:center;gap:.5rem}.ss_tile__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fg-muted);svg{width:1.25rem;height:1.25rem}}.ss_tile__content{flex:1;min-width:0}.ss_tile__trailing{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fg-muted);font-size:.8rem}.ss_tile__title{margin:0;font-size:.95rem;font-weight:600;color:var(--fg-primary)}.ss_tile__link,.ss_tile__text{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss_tile__link{color:inherit;text-decoration:none;&:hover{text-decoration:underline}}.ss_tile__subtitle{margin-top:.2rem;font-size:.82rem;color:var(--fg-secondary)}.ss_header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.25rem}.ss_header__text{min-width:0}.ss_header__title{margin:0;font-size:1.8rem;font-weight:600;color:var(--fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss_header__subtitle{margin:-.35rem 0 0;font-size:1rem;font-weight:500;color:var(--fg-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss_header__actions{flex-shrink:0;display:inline-flex;align-items:center;gap:.5rem}.ss_shell{height:100%;overflow:hidden;display:flex;flex-direction:column;background:var(--shell-bg);color:var(--fg-primary);.ss_shell__drawer_toggle_input{position:absolute;opacity:0;pointer-events:none}.ss_shell__header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;background:var(--shell-header-bg);backdrop-filter:blur(18px);border-bottom:1px solid var(--shell-header-border)}.ss_shell__header_left{display:flex;align-items:center;gap:.75rem}.ss_shell__drawer_toggle{display:none}.ss_shell__title{font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--fg-primary)}.ss_shell__actions{display:flex;align-items:center;gap:.4rem}.ss_shell__body{flex:1 1 auto;min-height:0;display:flex;position:relative;overflow:hidden}.ss_shell__nav{flex:0 0 16rem;max-width:16rem;background:var(--shell-nav-bg);backdrop-filter:blur(12px);border-right:1px solid var(--shell-nav-border);overflow:auto}.ss_shell__nav_inner{padding:.75rem .7rem 1rem}.ss_shell__main{flex:1 1 auto;min-width:0;overflow:auto;padding:1.25rem 1.3rem 1.6rem}.ss_shell__scrim{display:none}.ss_shell__nav_list{display:flex;flex-direction:column;gap:.25rem}.ss_shell__nav_item{display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;border-radius:var(--radius-md);color:var(--fg-primary);text-decoration:none;background:transparent;border:none;cursor:pointer;transition:background-color .12s ease,color .12s ease;&:hover{background:#2563eb0f}}.ss_shell__nav_item--active{background:#2563eb24;color:var(--fg-primary)}.ss_shell__nav_icon{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;color:var(--fg-muted)}.ss_shell__nav_label{font-size:.9rem;color:inherit}.ss_shell__nav_group{border:none;>summary{list-style:none;&::-webkit-details-marker{display:none}}}.ss_shell__nav_group_header{display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;cursor:pointer;user-select:none;background:transparent;border-radius:var(--radius-md);transition:background-color .12s ease,color .12s ease;&:hover{background:#2563eb0f}}.ss_shell__nav_group_chevron{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--fg-muted)}.ss_shell__nav_group_chevron_svg{width:1rem;height:1rem}.ss_shell__nav_group[open]{.ss_shell__nav_group_chevron_svg{transform:rotate(90deg)}}.ss_shell__nav_group_items{padding-left:1.1rem;margin-top:.15rem;display:flex;flex-direction:column;gap:.2rem}@media (max-width: 55rem){.ss_shell__drawer_toggle{display:inline-flex}.ss_shell__nav{position:absolute;top:0;bottom:0;left:0;z-index:20;width:min(80vw,18rem);max-width:18rem;transform:translate(-100%);transition:transform .16s ease-out;box-shadow:var(--shadow-soft)}.ss_shell__main{padding:1.25rem}.ss_shell__scrim{display:block;position:absolute;inset:0;background:#02061766;opacity:0;pointer-events:none;transition:opacity .16s ease}.ss_shell__drawer_toggle_input:checked~.ss_shell__body{.ss_shell__nav{transform:translate(0)}.ss_shell__scrim{opacity:1;pointer-events:auto}}}}.ss_modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;&[data-state=closed]{pointer-events:none}.ss_modal__backdrop{position:absolute;inset:0;background:#0206178c;opacity:0;transition:opacity .16s ease}.ss_modal__panel{position:relative;z-index:1;width:min(92vw,46rem);max-height:min(85vh,720px);display:flex;flex-direction:column;gap:0;padding:0;background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);opacity:0;transform:translateY(10px) scale(.985);transition:transform .18s ease,opacity .16s ease;outline:none}.ss_modal__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.3rem 1.5rem .75rem}.ss_modal__title{margin:0;font-size:1.08rem;font-weight:700;color:var(--fg-primary)}.ss_modal__close{flex-shrink:0;width:2rem;height:2rem;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1;color:var(--clear-fg);background:var(--clear-bg);border:1px solid var(--clear-border);border-radius:var(--radius-pill);cursor:pointer;user-select:none;transition:background-color .1s ease,border-color .1s ease,transform 80ms ease;&:hover{background:var(--clear-bg-hover);border-color:var(--clear-border-hover)}&:focus-visible{outline:none;box-shadow:var(--focus-ring)}&:active{transform:translateY(1px)}}.ss_modal__body{color:var(--fg-secondary);line-height:1.6;overflow:auto}.ss_modal__body_inner{padding:0 1.5rem 1rem}.ss_modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:0 1.5rem 1.25rem}&[data-state=open]{.ss_modal__backdrop{opacity:1}.ss_modal__panel{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 40rem){padding:0;.ss_modal__panel:not(.ss_modal__panel--no-fullscreen){width:100vw;height:100vh;max-height:100vh;border-radius:0;border:none;.ss_modal__body{flex:1;min-height:0;overflow:auto}.ss_modal__footer{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border-subtle);background:var(--bg-surface)}}}}.ss_modal__panel--sm{width:min(90vw,26rem)}.ss_modal__panel--lg{width:min(92vw,48rem)}.ss_modal__panel--fullscreen{width:100vw;height:100vh;max-height:100vh;border-radius:0;border:none}.ss_modal__panel--fullscreen .ss_modal__body{flex:1;min-height:0;overflow:auto}.ss_modal__panel--fullscreen .ss_modal__footer{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border-subtle);background:var(--bg-surface)}@media (prefers-reduced-motion: reduce){*{animation-duration:0ms!important;transition-duration:0ms!important}}
|
|
1
|
+
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;--bg-page: #f5f5f7;--bg-surface: #ffffff;--bg-surface-subtle: #f3f4f6;--shell-bg: radial-gradient(circle at top left, #eef2ff 0, #f5f5f7 38%, #f3f4f6 100%);--shell-header-bg: rgba(255, 255, 255, .85);--shell-header-border: rgba(209, 213, 219, .8);--shell-nav-bg: rgba(255, 255, 255, .92);--shell-nav-border: rgba(209, 213, 219, .85);--fg-primary: #0f172a;--fg-secondary: #4b5563;--fg-muted: #6b7280;--fg-inverse: #ffffff;--border-subtle: #e5e7eb;--border-strong: #d1d5db;--card-accent: #2563eb;--input-bg: #ffffff;--input-fg: var(--fg-primary);--input-border: #d1d5db;--input-border-hover: #9ca3af;--input-border-disabled: #e5e7eb;--input-bg-disabled: #f3f4f6;--input-fg-disabled: #9ca3af;--input-bg-hover: #f9fafb;--input-bg-focus: #ffffff;--scrollbar-thumb: rgba(15, 23, 42, .24);--primary: #2563eb;--primary-soft: #e0ecff;--primary-soft-stronger: #d1e1ff;--on-primary: #ffffff;--error: #dc2626;--on-error: #ffffff;--error-strong: #b91c1c;--disabled: #9ca3af;--on-disabled: #f9fafb;--suggestion-bg: var(--bg-surface);--suggestion-hover-bg: #f3f4ff;--suggestion-focus-bg: #e0ebff;--suggestion-selected-bg: #e0ebff;--suggestion-indicator: #2563eb;--btn-primary-bg: var(--primary);--btn-primary-border: #1d4ed8;--btn-primary-bg-hover: #1d4ed8;--btn-primary-border-hover: #1e40af;--btn-secondary-bg: #eef1f7;--btn-secondary-border: #d1d5db;--btn-secondary-bg-hover: #e0e3ec;--btn-secondary-border-hover: #cbd0dd;--btn-tertiary-bg: transparent;--btn-tertiary-border: var(--border-subtle);--btn-tertiary-bg-hover: #e9effa;--btn-tertiary-border-hover: var(--border-strong);--clear-bg: #edeff4;--clear-border: #e2e4ec;--clear-bg-hover: #e1e4ee;--clear-border-hover: #cbd0dd;--clear-fg: #4b5563;--token-bg: #eef2ff;--token-fg: #1f2937;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-pill: 999px;--focus-ring: 0 0 0 1px rgba(37, 99, 235, .75), 0 0 0 4px rgba(191, 219, 254, .9);--focus-ring-error: 0 0 0 1px rgba(220, 38, 38, .85), 0 0 0 4px rgba(254, 202, 202, .85);--shadow-soft: 0 10px 30px rgba(15, 23, 42, .06);--btn-shadow: 0 6px 18px rgba(15, 23, 42, .16);--btn-shadow-hover: 0 10px 30px rgba(15, 23, 42, .18)}@media (prefers-color-scheme: dark){:root{--bg-page: #0f1115;--bg-surface: #14171c;--bg-surface-subtle: #1a1e24;--fg-primary: #e7e9ee;--fg-secondary: #c7cbd4;--fg-muted: #9ca3af;--fg-inverse: #0f1115;--border-subtle: #2a2f36;--border-strong: #3a4048;--card-accent: #94a3b8;--input-bg: #14171c;--input-fg: var(--fg-primary);--input-border: #2a2f36;--input-border-hover: #3a4048;--input-border-disabled: #111827;--input-bg-disabled: #14171c;--input-fg-disabled: #6b7280;--input-bg-hover: #1a1e24;--input-bg-focus: #20252c;--scrollbar-thumb: rgba(156, 163, 175, .38);--primary: #3b82f6;--primary-soft: #172554;--primary-soft-stronger: #1d4ed8;--on-primary: #ffffff;--error: #fb7185;--on-error: #0f1115;--error-strong: #f43f5e;--suggestion-bg: #14171c;--suggestion-hover-bg: #1b2027;--suggestion-focus-bg: #21262e;--suggestion-selected-bg: #262c35;--suggestion-indicator: #94a3b8;--btn-primary-bg: var(--primary);--btn-primary-border: #1d4ed8;--btn-primary-bg-hover: #1d4ed8;--btn-primary-border-hover: #1e3a8a;--btn-secondary-bg: #1a1e24;--btn-secondary-border: #2f353e;--btn-secondary-bg-hover: #232831;--btn-secondary-border-hover: #3a4048;--btn-tertiary-bg: transparent;--btn-tertiary-border: #2f353e;--btn-tertiary-bg-hover: #232831;--btn-tertiary-border-hover: #3a4048;--clear-bg: #1a1e24;--clear-border: #2f353e;--clear-bg-hover: #232831;--clear-border-hover: #3a4048;--clear-fg: #e5e7eb;--token-bg: #232831;--token-fg: #e5e7eb;--shadow-soft: 0 18px 50px rgba(0, 0, 0, .75);--btn-shadow: 0 12px 30px rgba(0, 0, 0, .65);--btn-shadow-hover: 0 16px 40px rgba(0, 0, 0, .85);--shell-bg: radial-gradient(circle at top left, #1c2129 0, #0f1115 45%, #12161b 100%);--shell-header-bg: rgba(20, 23, 28, .92);--shell-header-border: rgba(58, 64, 72, .9);--shell-nav-bg: rgba(20, 23, 28, .96);--shell-nav-border: rgba(58, 64, 72, .92)}}@keyframes input-alert-appear{0%{opacity:0;transform:translateY(-1px)}to{opacity:1;transform:translateY(0)}}*,*:before,*:after{box-sizing:border-box}*{-webkit-tap-highlight-color:transparent}body{margin:0;font-family:inherit;color:var(--fg-primary);background-color:var(--bg-page);font-size:14px}html,body,#root{position:relative;height:100%;width:100%;overflow:hidden}.ss_form{max-width:48rem;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:1rem;padding:.5rem 0}.ss__suggestions{position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:10;display:flex;flex-direction:column;max-height:clamp(7rem,35vh,14rem);margin:0;padding:.25rem 0;list-style-type:none;background-color:var(--suggestion-bg);border-width:1px;border-style:solid;border-color:var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);overflow-y:auto;overflow-x:hidden;li{display:flex;align-items:flex-start;gap:.4rem;padding:.45rem .8rem;font-size:.9rem;line-height:1.45;color:var(--fg-primary);cursor:pointer;user-select:none;outline:none;+li{border-top:1px solid var(--border-subtle)}&:hover{background-color:var(--suggestion-hover-bg)}&:focus{background-color:var(--suggestion-focus-bg)}&.ss__hovered{background-color:var(--suggestion-focus-bg)}&.ss__selected{font-weight:500;background-color:var(--suggestion-selected-bg);box-shadow:inset 2px 0 0 var(--suggestion-indicator)}&.ss__selected.ss__hovered,&.ss__selected:hover{background-color:#2563eb14}.ss__title{font-weight:500}.ss__description{font-size:.8rem;color:var(--fg-muted)}}&::-webkit-scrollbar{width:6px}&::-webkit-scrollbar-track{background:transparent}&::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:999px}}.ss_form_input,.ss_form_date{display:flex;flex-direction:column;gap:.35rem;label{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--fg-muted)}.ss__wrapper{position:relative;display:inline-block;width:100%}input,textarea{display:block;width:100%;min-width:0;padding:.55rem .7rem;font-size:.95rem;line-height:1.4;color:var(--input-fg);background-color:var(--input-bg);border-width:1px;border-style:solid;border-color:var(--input-border);border-radius:var(--radius-md);outline:none;box-shadow:none;font-family:inherit;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease,transform 80ms ease;&:hover:not([disabled]){border-color:var(--input-border-hover);background-color:var(--input-bg-hover)}&:focus-visible{border-color:var(--primary);box-shadow:var(--focus-ring);background-color:var(--input-bg-focus)}&[disabled]{cursor:not-allowed;color:var(--input-fg-disabled);background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled)}}textarea{width:100%;resize:vertical;min-height:6.5rem}.ss__suggestions{max-height:clamp(7rem,30vh,12rem)}&:not(:focus-within){.ss__suggestions{display:none}}&:has([role=alert]){input,textarea{border-color:var(--error);box-shadow:var(--focus-ring-error)}}[role=alert]{margin-top:.15rem;font-size:.8rem;line-height:1.4;color:var(--error);animation:.12s input-alert-appear ease-out}}.ss_form_date{position:relative;input{padding-right:2.1rem}input::-webkit-calendar-picker-indicator{opacity:0;display:none}}.ss_form_date__icon{position:absolute;right:.7rem;top:50%;width:1rem;height:1rem;transform:translateY(-50%);color:var(--fg-muted);padding:0;border:none;background:transparent;cursor:pointer;&:disabled{cursor:not-allowed;color:var(--input-fg-disabled)}svg{width:100%;height:100%;display:block}}.ss_form_date__picker{position:absolute;top:calc(100% + .35rem);left:0;z-index:10;width:min(18rem,100%);padding:.75rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-surface);box-shadow:var(--shadow-soft)}.ss_form_date__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}.ss_form_date__nav_group{display:flex;align-items:center;gap:.35rem}.ss_form_date__title{font-size:.9rem;font-weight:600;color:var(--fg-primary);text-transform:capitalize}.ss_form_date__nav{width:1.8rem;height:1.8rem;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:var(--bg-surface-subtle);color:var(--fg-primary);cursor:pointer;transition:background-color .12s ease,border-color .12s ease;&:hover{border-color:var(--border-strong)}}.ss_form_date__nav svg{width:1rem;height:1rem;display:block;margin:0 auto}.ss_form_date__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem;margin-bottom:.35rem;font-size:.75rem;color:var(--fg-muted);text-align:center}.ss_form_date__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem}.ss_form_date__day{height:2rem;border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--fg-primary);cursor:pointer;transition:background-color .12s ease,border-color .12s ease;&:hover{background:var(--bg-surface-subtle)}&.is-selected{background:var(--primary-soft);border-color:var(--primary);color:var(--fg-primary);font-weight:600}&.is-today:not(.is-selected){border-color:var(--border-strong);background:var(--bg-surface-subtle);color:var(--fg-primary);font-weight:500}}.ss_form_date__day.is-empty{border:none;background:transparent;cursor:default}.ss_form_checkbox{display:flex;flex-direction:column;gap:.3rem;width:100%;font-size:.9rem;color:var(--fg-secondary);.ss__wrapper{display:inline-flex;align-items:flex-start;gap:.55rem;padding:.15rem .05rem;font-size:.9rem;line-height:1.5;color:var(--fg-secondary);background-color:transparent;border:none;outline:none}input[type=checkbox]{margin-top:.12rem;width:1.05rem;height:1.05rem;flex-shrink:0;position:relative;appearance:none;-webkit-appearance:none;-moz-appearance:none;accent-color:initial;border-radius:calc(var(--radius-sm) * .9);border:1px solid var(--border-strong);background-color:var(--bg-surface);box-shadow:0 1px 1px #0f172a0f;cursor:pointer;outline:none;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,transform 80ms ease;&:hover:not(:disabled){border-color:var(--input-border-hover);background-color:var(--input-bg-hover)}&:active:not(:disabled){transform:translateY(1px)}&:after{content:"";position:absolute;inset:0;margin:auto;width:.55rem;height:.3rem;border-left:2px solid var(--on-primary);border-bottom:2px solid var(--on-primary);transform-origin:center;transform:translateY(-1px) rotate(-45deg) scale(.2);opacity:0;transition:transform .12s ease-out,opacity .12s ease-out}&:checked,&[aria-checked=true]{background-color:var(--primary)!important;border-color:var(--primary)!important;&:after{opacity:1;transform:translateY(-1px) rotate(-45deg) scale(1)}}&:checked[disabled],&[aria-checked=true][disabled]{background-color:color-mix(in srgb,var(--input-bg-disabled) 70%,var(--fg-primary))!important;border-color:var(--input-border-disabled)!important}&[disabled]{cursor:not-allowed;background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled);box-shadow:none;opacity:.75;&:after{border-color:#fff}}}&:has(input[type=checkbox]:focus-visible){input[type=checkbox]{outline:none;box-shadow:var(--focus-ring)}}label{margin:0;font-size:.9rem;line-height:1.5;color:var(--fg-primary);cursor:pointer;user-select:none}&:has(input[type=checkbox][disabled]){color:var(--input-fg-disabled);user-select:none;label{cursor:not-allowed;color:var(--input-fg-disabled)}}[role=alert]{font-size:.8rem;color:var(--error);animation:.12s input-alert-appear ease-out}}.ss_form_select{display:flex;flex-direction:column;gap:.35rem;width:100%;label{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--fg-muted)}select{display:block;width:100%;padding:.55rem 2.1rem .55rem .7rem;font-size:.95rem;line-height:1.4;color:var(--input-fg);background-color:var(--input-bg);background-image:none;border-width:1px;border-style:solid;border-color:var(--input-border);border-radius:var(--radius-md);outline:none;appearance:none;box-shadow:none;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease;&:hover:not([disabled]){border-color:var(--input-border-hover);background-color:var(--input-bg-hover)}&:focus-visible{border-color:var(--primary);box-shadow:var(--focus-ring);background-color:var(--input-bg-focus)}&:has(+[role=alert]){border-color:var(--error);box-shadow:var(--focus-ring-error)}&[disabled]{cursor:not-allowed;color:var(--input-fg-disabled);background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled)}}.ss_form_select__field{position:relative}.ss_form_select__icon{position:absolute;right:.7rem;top:50%;width:1rem;height:1rem;transform:translateY(-50%);color:var(--fg-muted);pointer-events:none}.ss_form_select__icon svg{width:100%;height:100%;display:block}[role=alert]{font-size:.8rem;color:var(--error);animation:.12s input-alert-appear ease-out}}.ss_form_ac_select{display:flex;flex-direction:column;gap:.35rem;label{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--fg-muted)}.ss__wrapper{position:relative;display:inline-block;width:100%}.ss__input_row{display:flex;align-items:center;gap:.4rem;width:100%;min-width:0;padding:.5rem .65rem;font-size:.95rem;line-height:1.4;color:var(--input-fg);background-color:var(--input-bg);border-width:1px;border-style:solid;border-color:var(--input-border);border-radius:var(--radius-md);outline:none;box-shadow:none;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease;&:hover:not(:has([disabled])){border-color:var(--input-border-hover);background-color:var(--input-bg-hover)}&:has([disabled]){cursor:not-allowed;color:var(--input-fg-disabled);background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled)}input{flex-grow:1;min-width:0;padding:0;font-size:inherit;line-height:inherit;color:inherit;background-color:transparent;border:none;outline:none}.ss__prefix{flex-shrink:0;padding:.2rem .6rem;font-size:.78rem;line-height:1.3;white-space:nowrap;color:var(--token-fg);background-color:var(--token-bg);border-radius:var(--radius-pill);cursor:pointer;user-select:none;border:1px solid rgba(37,99,235,.18);transition:background-color .1s ease,border-color .1s ease,transform 80ms ease,box-shadow .1s ease;&:hover{background-color:#2563eb0f;border-color:#2563eb59;box-shadow:0 0 0 1px #bfdbfecc}&:active{transform:translateY(1px)}}.ss__prefix[aria-disabled=true]{cursor:not-allowed;opacity:.6;pointer-events:none}.ss__suffix{flex-shrink:0}}.ss__selection{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0;padding:.5rem .65rem;font-size:.95rem;line-height:1.4;color:var(--input-fg);background-color:var(--input-bg);border-width:1px;border-style:solid;border-color:var(--input-border);border-radius:var(--radius-md);outline:none;box-shadow:none;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease;&:has(.ss__clear[disabled]){cursor:not-allowed;color:var(--input-fg-disabled);background-color:var(--input-bg-disabled);border-color:var(--input-border-disabled)}}.ss__content{flex:1;min-width:0}.ss__clear{flex-shrink:0;width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;line-height:1;color:var(--clear-fg);background:var(--clear-bg);border-width:1px;border-style:solid;border-color:var(--clear-border);border-radius:var(--radius-pill);cursor:pointer;user-select:none;transition:background-color .1s ease,border-color .1s ease,transform 80ms ease;&:hover:not([disabled]){border-color:var(--clear-border-hover);background-color:var(--clear-bg-hover)}&:active:not([disabled]){transform:translateY(1px)}&[disabled]{cursor:not-allowed;opacity:.55}}.ss__suggestions{max-height:clamp(8rem,40vh,16rem);li{padding-inline:.85rem}}&:not(:focus-within){.ss__suggestions{display:none}}&:focus-within{.ss__input_row,.ss__selection{border-color:var(--primary);box-shadow:var(--focus-ring);background-color:var(--input-bg-focus)}}&:has([role=alert]){.ss__input_row,.ss__selection{border-color:var(--error);box-shadow:var(--focus-ring-error)}}[role=alert]{font-size:.8rem;color:var(--error);animation:.12s input-alert-appear ease-out}}.ss_button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem 1.05rem;font-size:.9rem;font-weight:600;text-transform:none;text-align:center;letter-spacing:.01em;color:var(--on-primary);background:var(--btn-primary-bg);border:1px solid var(--btn-primary-border);border-radius:var(--radius-pill);outline:none;cursor:pointer;user-select:none;transition:background-color .12s ease,border-color .12s ease,opacity 80ms ease,transform 80ms ease,color .1s ease;&.secondary{color:var(--fg-primary);background:var(--btn-secondary-bg);border-color:var(--btn-secondary-border);box-shadow:none}&.tertiary{color:var(--fg-secondary);background:var(--btn-tertiary-bg);border-color:var(--btn-tertiary-border);box-shadow:none}&.danger{color:var(--on-error);background:var(--error);border-color:var(--error)}&:hover:not([disabled]){background-color:var(--btn-primary-bg-hover);border-color:var(--btn-primary-border-hover);&.secondary{background-color:var(--btn-secondary-bg-hover);border-color:var(--btn-secondary-border-hover)}&.tertiary{background-color:var(--btn-tertiary-bg-hover);border-color:var(--btn-tertiary-border-hover)}&.danger{background-color:var(--error-strong);border-color:var(--error-strong)}}&:active:not([disabled]){transform:translateY(1px)}&:focus-visible{outline:none;box-shadow:var(--focus-ring)}&[disabled]{cursor:not-allowed;color:var(--on-disabled);background:var(--disabled);border-color:var(--disabled);opacity:.9}}.ss_button--icon{width:2.1rem;height:2.1rem;padding:0;font-size:1.1rem;line-height:1;color:var(--fg-primary);background:transparent;border-color:transparent;border-radius:var(--radius-pill);box-shadow:none;transition:background-color .1s ease,border-color .1s ease,transform 80ms ease;&:hover:not([disabled]){background-color:var(--btn-tertiary-bg-hover);border-color:var(--btn-tertiary-border-hover)}&:active:not([disabled]){transform:translateY(1px)}&[disabled]{opacity:.5}}.ss_callout{--ss-callout-accent: var(--primary);--ss-callout-accent-soft: color-mix(in srgb, var(--ss-callout-accent) 22%, transparent);position:relative;display:flex;align-items:center;gap:1rem;width:100%;padding:1.15rem 1.4rem;font-size:.95rem;line-height:1.55;color:var(--fg-secondary);background:radial-gradient(circle at top left,var(--ss-callout-accent-soft) 0%,color-mix(in srgb,var(--ss-callout-accent-soft) 80%,var(--bg-surface) 20%) 28%,color-mix(in srgb,var(--ss-callout-accent-soft) 40%,var(--bg-surface) 60%) 62%,color-mix(in srgb,var(--ss-callout-accent-soft) 12%,var(--bg-surface) 88%) 82%,var(--bg-surface-subtle) 100%),var(--bg-surface);border-radius:calc(var(--radius-md) * 1.2);border:1px solid color-mix(in srgb,var(--border-subtle) 60%,var(--ss-callout-accent) 40%);.ss_callout__icon{flex-shrink:0;color:var(--ss-callout-accent);svg{width:1.6rem;height:1.6rem;display:block}}.ss_callout__content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.ss_callout__title{margin:0;font-size:1rem;font-weight:600;color:var(--fg-primary);line-height:1.45}.ss_callout__body{margin:.25rem 0 0;color:var(--fg-secondary)}.ss_callout__actions{margin-top:.65rem;display:inline-flex;gap:.65rem;font-size:.9rem;button,.ss_callout__link{padding:0;border:none;background:none;font:inherit;cursor:pointer;text-decoration:none;color:color-mix(in srgb,var(--ss-callout-accent) 80%,var(--fg-primary) 20%);&:hover{text-decoration:underline}}}&.ss_callout--subtle{box-shadow:none;border-color:var(--border-subtle);background:color-mix(in srgb,var(--bg-surface-subtle) 85%,var(--ss-callout-accent-soft) 15%)}}.ss_callout--red{--ss-callout-accent: #E53935}.ss_callout--pink{--ss-callout-accent: #D81B60}.ss_callout--purple{--ss-callout-accent: #8E24AA}.ss_callout--deep-purple{--ss-callout-accent: #5E35B1}.ss_callout--indigo{--ss-callout-accent: #3949AB}.ss_callout--blue{--ss-callout-accent: #1E88E5}.ss_callout--light-blue{--ss-callout-accent: #039BE5}.ss_callout--cyan{--ss-callout-accent: #00ACC1}.ss_callout--teal{--ss-callout-accent: #00897B}.ss_callout--green{--ss-callout-accent: #43A047}.ss_callout--light-green{--ss-callout-accent: #7CB342}.ss_callout--lime{--ss-callout-accent: #C0CA33}.ss_callout--yellow{--ss-callout-accent: #FDD835}.ss_callout--amber{--ss-callout-accent: #FFB300}.ss_callout--orange{--ss-callout-accent: #FB8C00}.ss_callout--deep-orange{--ss-callout-accent: #F4511E}.ss_callout--brown{--ss-callout-accent: #6D4C41}.ss_callout--grey{--ss-callout-accent: #757575}.ss_callout--blue-grey{--ss-callout-accent: #546E7A}.ss_dropdown{position:relative;display:inline-flex}.ss_dropdown__trigger{justify-content:center}.ss_dropdown__menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:30;min-width:12rem;padding:.4rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .14s ease,transform .16s ease;&[data-state=open]{opacity:1;transform:translateY(0) scale(1)}&[data-state=closed]{opacity:0;transform:translateY(-6px) scale(.98)}}.ss_dropdown__item{width:100%;display:flex;align-items:center;gap:.6rem;padding:.45rem .55rem;border-radius:var(--radius-md);border:none;background:transparent;color:var(--fg-primary);cursor:pointer;text-align:left;transition:background-color .12s ease,color .12s ease;&:hover{background:var(--bg-surface-subtle)}}.ss_dropdown__item_icon{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;color:var(--fg-muted);svg{width:100%;height:100%}}.ss_dropdown__item_label{flex:1;min-width:0;font-size:.9rem}.ss_dropdown__item_check{display:inline-flex;align-items:center;justify-content:center;color:var(--primary);svg{width:1rem;height:1rem}}.ss_chip{--ss-chip-accent: var(--primary);--ss-chip-accent-soft: color-mix(in srgb, var(--ss-chip-accent) 16%, transparent);display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--ss-chip-accent) 45%,var(--border-subtle) 55%);background:color-mix(in srgb,var(--ss-chip-accent-soft) 60%,var(--bg-surface) 40%);color:var(--fg-primary);font-size:.82rem;line-height:1.3}.ss_chip--clickable{cursor:pointer;transition:background-color .12s ease,border-color .12s ease,transform 80ms ease;&:hover{border-color:color-mix(in srgb,var(--ss-chip-accent) 65%,var(--border-strong) 35%);background:color-mix(in srgb,var(--ss-chip-accent-soft) 75%,var(--bg-surface) 25%)}&:active{transform:translateY(1px)}}.ss_chip__label{white-space:nowrap}.ss_chip__dismiss{width:1.3rem;height:1.3rem;padding:0;border:none;background:transparent;color:var(--fg-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;svg{width:.9rem;height:.9rem}&:hover{color:var(--fg-primary)}}.ss_chip--red{--ss-chip-accent: #E53935}.ss_chip--pink{--ss-chip-accent: #D81B60}.ss_chip--purple{--ss-chip-accent: #8E24AA}.ss_chip--deep-purple{--ss-chip-accent: #5E35B1}.ss_chip--indigo{--ss-chip-accent: #3949AB}.ss_chip--blue{--ss-chip-accent: #1E88E5}.ss_chip--light-blue{--ss-chip-accent: #039BE5}.ss_chip--cyan{--ss-chip-accent: #00ACC1}.ss_chip--teal{--ss-chip-accent: #00897B}.ss_chip--green{--ss-chip-accent: #43A047}.ss_chip--light-green{--ss-chip-accent: #7CB342}.ss_chip--lime{--ss-chip-accent: #C0CA33}.ss_chip--yellow{--ss-chip-accent: #FDD835}.ss_chip--amber{--ss-chip-accent: #FFB300}.ss_chip--orange{--ss-chip-accent: #FB8C00}.ss_chip--deep-orange{--ss-chip-accent: #F4511E}.ss_chip--brown{--ss-chip-accent: #6D4C41}.ss_chip--grey{--ss-chip-accent: #757575}.ss_chip--blue-grey{--ss-chip-accent: #546E7A}.ss_table{width:100%;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-soft);overflow:hidden}.ss_table__scroll{overflow:auto}.ss_table table{width:100%;border-collapse:collapse;min-width:32rem}.ss_table th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);background:color-mix(in srgb,var(--bg-surface-subtle) 80%,var(--bg-surface) 20%);border-bottom:1px solid var(--border-subtle);padding:.75rem .9rem}.ss_table__header_label{display:inline-flex;align-items:center;gap:.35rem}.ss_table__sort_button{border:none;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}.ss_table__sort_icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.7}.ss_table__sort_icon svg{width:1rem;height:1rem}.ss_table td{padding:.8rem .9rem;border-bottom:1px solid var(--border-subtle);color:var(--fg-primary);font-size:.9rem}.ss_table tbody tr:last-child td{border-bottom:none}.ss_table__pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem .9rem;border-top:1px solid var(--border-subtle);background:color-mix(in srgb,var(--bg-surface-subtle) 80%,var(--bg-surface) 20%)}.ss_table--pagination-top .ss_table__pagination{border-top:none;border-bottom:1px solid var(--border-subtle)}.ss_table__page_button{border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--fg-primary);border-radius:var(--radius-pill);width:2rem;height:2rem;padding:0;font-size:.85rem;cursor:pointer;transition:background-color .12s ease,border-color .12s ease;&:hover:not(:disabled){border-color:var(--border-strong);background:var(--bg-surface)}&:disabled{cursor:not-allowed;color:var(--fg-muted);border-color:var(--border-subtle);background:var(--bg-surface);opacity:.6}}.ss_table__page_info{font-size:.85rem;color:var(--fg-muted)}.ss_table__page_button svg{width:1rem;height:1rem;display:block;margin:0 auto}.ss_table td>div{display:inline-flex;align-items:center;gap:.4rem;min-width:0}.ss_table tbody tr[data-clickable=true]{cursor:pointer;transition:background-color .12s ease}.ss_table tbody tr[data-clickable=true]:hover{background:var(--bg-surface-subtle)}.ss_expandable{width:100%;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);overflow:hidden;.ss_expandable__header{width:100%;display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;text-align:left;background:var(--bg-surface);border:none;color:var(--fg-primary);cursor:pointer;user-select:none;transition:background-color .12s ease;&:hover{background:var(--bg-surface-subtle)}&:focus-visible{outline:none;box-shadow:var(--focus-ring)}}.ss_expandable__icon{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;color:var(--fg-muted);svg{width:1.1rem;height:1.1rem}}.ss_expandable__title{font-size:.96rem;font-weight:600;color:inherit}.ss_expandable__content{overflow:hidden;padding:0;background:var(--bg-surface);transition-property:height}.ss_expandable__divider_wrapper{padding:0 1rem 1rem}.ss_expandable__divider{height:1px;margin:.75rem 0 .8rem;background:var(--border-subtle)}}.ss_divider{width:100%;height:1px;background:var(--border-subtle)}.ss_divider--vertical{width:1px;height:100%}.ss_surface{width:100%;padding:1rem 1.25rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.ss_tile{width:100%;padding:.9rem 1rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}.ss_tile__row{display:flex;align-items:center;gap:.5rem}.ss_tile__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fg-muted);svg{width:1.25rem;height:1.25rem}}.ss_tile__content{flex:1;min-width:0}.ss_tile__trailing{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fg-muted);font-size:.8rem}.ss_tile__title{margin:0;font-size:.95rem;font-weight:600;color:var(--fg-primary)}.ss_tile__link,.ss_tile__text{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss_tile__link{color:inherit;text-decoration:none;&:hover{text-decoration:underline}}.ss_tile__subtitle{margin-top:.2rem;font-size:.82rem;color:var(--fg-secondary)}.ss_attr_list{font-size:.95em;padding:.15rem 0;max-width:100%}.ss_attr_list,.ss_attr_list__row{max-width:100%}.ss_attr_list__row{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);gap:.3rem 1.25rem;padding:.45rem 0;border-bottom:1px solid var(--border-subtle);align-items:baseline}.ss_attr_list__row:last-child{border-bottom:none}.ss_attr_list__row--third{grid-template-columns:minmax(9rem,14rem) minmax(0,1fr) minmax(0,1fr)}.ss_attr_list__label{margin:0;font-size:.8em;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted)}.ss_attr_list__value{margin:0;font-weight:500;color:var(--fg-primary);min-width:0;overflow-wrap:anywhere}@media (max-width: 640px){.ss_attr_list__row,.ss_attr_list__row--third{grid-template-columns:minmax(0,1fr);gap:.2rem}.ss_attr_list__label{font-size:.78em}}.ss_header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.25rem}.ss_header__text{min-width:0}.ss_header__title{margin:0;font-size:1.8rem;font-weight:600;color:var(--fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss_header__subtitle{margin:-.35rem 0 0;font-size:1rem;font-weight:500;color:var(--fg-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss_header__actions{flex-shrink:0;display:inline-flex;align-items:center;gap:.5rem}.ss_shell{height:100%;overflow:hidden;display:flex;flex-direction:column;background:var(--shell-bg);color:var(--fg-primary);.ss_shell__drawer_toggle_input{position:absolute;opacity:0;pointer-events:none}.ss_shell__header{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;background:var(--shell-header-bg);backdrop-filter:blur(18px);border-bottom:1px solid var(--shell-header-border)}.ss_shell__header_left{display:flex;align-items:center;gap:.75rem}.ss_shell__drawer_toggle{display:none}.ss_shell__title{font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--fg-primary)}.ss_shell__actions{display:flex;align-items:center;gap:.4rem}.ss_shell__body{flex:1 1 auto;min-height:0;display:flex;position:relative;overflow:hidden}.ss_shell__nav{flex:0 0 16rem;max-width:16rem;background:var(--shell-nav-bg);backdrop-filter:blur(12px);border-right:1px solid var(--shell-nav-border);overflow:auto}.ss_shell__nav_inner{padding:.75rem .7rem 1rem}.ss_shell__main{flex:1 1 auto;min-width:0;overflow:auto;padding:1.25rem 1.3rem 1.6rem}.ss_shell__scrim{display:none}.ss_shell__nav_list{display:flex;flex-direction:column;gap:.25rem}.ss_shell__nav_item{display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;border-radius:var(--radius-md);color:var(--fg-primary);text-decoration:none;background:transparent;border:none;cursor:pointer;transition:background-color .12s ease,color .12s ease;&:hover{background:#2563eb0f}}.ss_shell__nav_item--active{background:#2563eb24;color:var(--fg-primary)}.ss_shell__nav_icon{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;color:var(--fg-muted)}.ss_shell__nav_label{font-size:.9rem;color:inherit}.ss_shell__nav_group{border:none;>summary{list-style:none;&::-webkit-details-marker{display:none}}}.ss_shell__nav_group_header{display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;cursor:pointer;user-select:none;background:transparent;border-radius:var(--radius-md);transition:background-color .12s ease,color .12s ease;&:hover{background:#2563eb0f}}.ss_shell__nav_group_chevron{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--fg-muted)}.ss_shell__nav_group_chevron_svg{width:1rem;height:1rem}.ss_shell__nav_group[open]{.ss_shell__nav_group_chevron_svg{transform:rotate(90deg)}}.ss_shell__nav_group_items{padding-left:1.1rem;margin-top:.15rem;display:flex;flex-direction:column;gap:.2rem}@media (max-width: 78rem){.ss_shell__drawer_toggle{display:inline-flex}.ss_shell__nav{position:absolute;top:0;bottom:0;left:0;z-index:20;width:min(80vw,18rem);max-width:18rem;transform:translate(-100%);transition:transform .16s ease-out;box-shadow:var(--shadow-soft)}.ss_shell__main{padding:1.25rem}.ss_shell__scrim{display:block;position:absolute;inset:0;background:#02061766;opacity:0;pointer-events:none;transition:opacity .16s ease}.ss_shell__drawer_toggle_input:checked~.ss_shell__body{.ss_shell__nav{transform:translate(0)}.ss_shell__scrim{opacity:1;pointer-events:auto}}}}.ss_modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;&[data-state=closed]{pointer-events:none}.ss_modal__backdrop{position:absolute;inset:0;background:#0206178c;opacity:0;transition:opacity .16s ease}.ss_modal__panel{position:relative;z-index:1;width:min(92vw,46rem);max-height:min(85vh,720px);display:flex;flex-direction:column;gap:0;padding:0;background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);opacity:0;transform:translateY(10px) scale(.985);transition:transform .18s ease,opacity .16s ease;outline:none}.ss_modal__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.3rem 1.5rem .75rem}.ss_modal__title{margin:0;font-size:1.08rem;font-weight:700;color:var(--fg-primary)}.ss_modal__close{flex-shrink:0;width:2rem;height:2rem;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1;color:var(--clear-fg);background:var(--clear-bg);border:1px solid var(--clear-border);border-radius:var(--radius-pill);cursor:pointer;user-select:none;transition:background-color .1s ease,border-color .1s ease,transform 80ms ease;&:hover{background:var(--clear-bg-hover);border-color:var(--clear-border-hover)}&:focus-visible{outline:none;box-shadow:var(--focus-ring)}&:active{transform:translateY(1px)}}.ss_modal__body{color:var(--fg-secondary);line-height:1.6;overflow:auto}.ss_modal__body_inner{padding:0 1.5rem 1rem}.ss_modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:0 1.5rem 1.25rem}&[data-state=open]{.ss_modal__backdrop{opacity:1}.ss_modal__panel{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 40rem){padding:0;.ss_modal__panel:not(.ss_modal__panel--no-fullscreen){width:100vw;height:100vh;max-height:100vh;border-radius:0;border:none;.ss_modal__body{flex:1;min-height:0;overflow:auto}.ss_modal__footer{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border-subtle);background:var(--bg-surface)}}}}.ss_modal__panel--sm{width:min(90vw,26rem)}.ss_modal__panel--lg{width:min(92vw,48rem)}.ss_modal__panel--fullscreen{width:100vw;height:100vh;max-height:100vh;border-radius:0;border:none}.ss_modal__panel--fullscreen .ss_modal__body{flex:1;min-height:0;overflow:auto}.ss_modal__panel--fullscreen .ss_modal__footer{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border-subtle);background:var(--bg-surface)}@media (prefers-reduced-motion: reduce){*{animation-duration:0ms!important;transition-duration:0ms!important}}
|