/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
/* GENERATED by build.py: the palettes. Edit build.py and run `just tokens`. */

:root,
[data-theme="light"] {
  --white: #ffffff;
  --black: #000000;
  --gray-50: #faf9f7;
  --gray-100: #f3f1ef;
  --gray-200: #e7e4e1;
  --gray-300: #d6d1cd;
  --gray-400: #b9b3ac;
  --gray-500: #99928a;
  --gray-600: #7f766c;
  --gray-700: #645c54;
  --gray-800: #49433c;
  --gray-900: #312c26;
  --gray-950: #1d1a16;
  --blue-50: #f3f8fe;
  --blue-100: #e4effe;
  --blue-200: #cbe1fd;
  --blue-300: #a7cbfb;
  --blue-400: #6faaf6;
  --blue-500: #3385f0;
  --blue-600: #1368d8;
  --blue-700: #0f52a9;
  --blue-800: #0c3b79;
  --blue-900: #0a274c;
  --blue-950: #08172b;
  --green-50: #f5fcf9;
  --green-100: #e8faf2;
  --green-200: #d4f5e5;
  --green-300: #b6ecd3;
  --green-400: #8bdab5;
  --green-500: #5fc495;
  --green-600: #35b67a;
  --green-700: #239560;
  --green-800: #196b45;
  --green-900: #13442d;
  --green-950: #0b281a;
  --red-50: #fff4f3;
  --red-100: #fee6e4;
  --red-200: #fdd1cc;
  --red-300: #fab0a8;
  --red-400: #f37f72;
  --red-500: #e74d3c;
  --red-600: #ca3221;
  --red-700: #9c281c;
  --red-800: #6f1e15;
  --red-900: #461610;
  --red-950: #280e0b;
  --orange-50: #fff7f2;
  --orange-100: #ffeee3;
  --orange-200: #fedfca;
  --orange-300: #fdc8a5;
  --orange-400: #f9a46c;
  --orange-500: #f27e31;
  --orange-600: #da6110;
  --orange-700: #ab4c0d;
  --orange-800: #7a370b;
  --orange-900: #4c250a;
  --orange-950: #2b1608;
  --amber-50: #fffbf2;
  --amber-100: #fff7e3;
  --amber-200: #feefca;
  --amber-300: #fde3a5;
  --amber-400: #f9cf6c;
  --amber-500: #f4b92f;
  --amber-600: #dfa00c;
  --amber-700: #ae7d09;
  --amber-800: #7d5a08;
  --amber-900: #4e3909;
  --amber-950: #2c2107;
  --violet-50: #f7f4fe;
  --violet-100: #eee5fc;
  --violet-200: #decefb;
  --violet-300: #c7abf8;
  --violet-400: #a275f0;
  --violet-500: #7c40e2;
  --violet-600: #6128c3;
  --violet-700: #4d2593;
  --violet-800: #381d67;
  --violet-900: #251542;
  --violet-950: #160d26;
}

[data-theme="dark"],
.dark {
  --white: #ffffff;
  --black: #000000;
  --gray-50: #f6f5f3;
  --gray-100: #e6e3e0;
  --gray-200: #d1ccc7;
  --gray-300: #b4aea7;
  --gray-400: #978f87;
  --gray-500: #7c766e;
  --gray-600: #655f58;
  --gray-700: #504a44;
  --gray-800: #3a3631;
  --gray-900: #272420;
  --gray-950: #191715;
  --blue-50: #edf4fd;
  --blue-100: #cde0f9;
  --blue-200: #a5c7f3;
  --blue-300: #71a5ea;
  --blue-400: #4084dd;
  --blue-500: #286bc3;
  --blue-600: #245799;
  --blue-700: #1f4475;
  --blue-800: #193252;
  --blue-900: #122136;
  --blue-950: #0c1622;
  --green-50: #f0faf5;
  --green-100: #d5f1e4;
  --green-200: #b5e3ce;
  --green-300: #89d1b0;
  --green-400: #5dc092;
  --green-500: #44a779;
  --green-600: #358861;
  --green-700: #286c4c;
  --green-800: #1d4e37;
  --green-900: #143325;
  --green-950: #0d2118;
  --red-50: #fdeeed;
  --red-100: #f8d2ce;
  --red-200: #f1afa7;
  --red-300: #e58176;
  --red-400: #d45749;
  --red-500: #b93f31;
  --red-600: #91362b;
  --red-700: #6f2c25;
  --red-800: #4f211c;
  --red-900: #331714;
  --red-950: #20100e;
  --orange-50: #fef3ec;
  --orange-100: #fbdecb;
  --orange-200: #f6c4a2;
  --orange-300: #eda16e;
  --orange-400: #e27e3c;
  --orange-500: #c76523;
  --orange-600: #9d5220;
  --orange-700: #78411c;
  --orange-800: #552f16;
  --orange-900: #362011;
  --orange-950: #22150c;
  --amber-50: #fef8ec;
  --amber-100: #fbedcb;
  --amber-200: #f6dda2;
  --amber-300: #edc76e;
  --amber-400: #e2b03c;
  --amber-500: #c79623;
  --amber-600: #9d7720;
  --amber-700: #785c1c;
  --amber-800: #554216;
  --amber-900: #362b11;
  --amber-950: #221b0c;
  --violet-50: #f3eefc;
  --violet-100: #ded0f6;
  --violet-200: #c3aaee;
  --violet-300: #9f79e2;
  --violet-400: #7d4bd2;
  --violet-500: #6434b7;
  --violet-600: #512d8f;
  --violet-700: #40266d;
  --violet-800: #2f1e4d;
  --violet-900: #201532;
  --violet-950: #150e20;
}

/* GENERATED by build.py: the roles (surface, ink, outline) built on the palettes. */

:root,
[data-theme="light"] {
  --surface-gray-1: var(--gray-50);
  --surface-gray-2: var(--gray-100);
  --surface-gray-3: var(--gray-200);
  --surface-gray-4: var(--gray-300);
  --surface-gray-5: var(--gray-400);
  --surface-gray-6: var(--gray-500);
  --surface-gray-7: var(--gray-600);
  --surface-gray-8: var(--gray-700);
  --surface-gray-9: var(--gray-800);
  --surface-gray-10: var(--gray-900);
  --ink-gray-1: var(--gray-200);
  --outline-gray-1: var(--gray-200);
  --ink-gray-2: var(--gray-300);
  --outline-gray-2: var(--gray-300);
  --ink-gray-3: var(--gray-400);
  --outline-gray-3: var(--gray-400);
  --ink-gray-4: var(--gray-500);
  --outline-gray-4: var(--gray-500);
  --ink-gray-5: var(--gray-600);
  --outline-gray-5: var(--gray-600);
  --ink-gray-6: var(--gray-700);
  --outline-gray-6: var(--gray-700);
  --ink-gray-7: var(--gray-800);
  --outline-gray-7: var(--gray-800);
  --ink-gray-8: var(--gray-900);
  --outline-gray-8: var(--gray-900);
  --ink-gray-9: var(--gray-950);
  --outline-gray-9: var(--gray-950);
  --surface-base: var(--white);
  --surface-elevation-1: var(--white);
  --surface-elevation-2: var(--white);
  --surface-elevation-3: var(--white);
  --ink-base: var(--white);
  --outline-base: var(--white);
  --surface-blue-1: var(--blue-50);
  --surface-blue-2: var(--blue-100);
  --surface-blue-3: var(--blue-200);
  --surface-blue-4: var(--blue-300);
  --surface-blue-5: var(--blue-400);
  --surface-blue-6: var(--blue-500);
  --surface-blue-7: var(--blue-600);
  --surface-blue-8: var(--blue-700);
  --surface-blue-9: var(--blue-800);
  --ink-blue-1: var(--white);
  --ink-blue-2: var(--blue-100);
  --ink-blue-3: var(--blue-200);
  --ink-blue-4: var(--blue-300);
  --ink-blue-5: var(--blue-400);
  --ink-blue-6: var(--blue-500);
  --ink-blue-7: var(--blue-600);
  --ink-blue-8: var(--blue-700);
  --ink-blue-9: var(--blue-800);
  --outline-blue-1: var(--blue-100);
  --outline-blue-2: var(--blue-200);
  --outline-blue-3: var(--blue-300);
  --outline-blue-4: var(--blue-400);
  --outline-blue-5: var(--blue-500);
  --outline-blue-6: var(--blue-600);
  --outline-blue-7: var(--blue-700);
  --outline-blue-8: var(--blue-800);
  --surface-green-1: var(--green-50);
  --surface-green-2: var(--green-100);
  --surface-green-3: var(--green-200);
  --surface-green-4: var(--green-300);
  --surface-green-5: var(--green-400);
  --surface-green-6: var(--green-500);
  --surface-green-7: var(--green-600);
  --surface-green-8: var(--green-700);
  --surface-green-9: var(--green-800);
  --ink-green-1: var(--white);
  --ink-green-2: var(--green-100);
  --ink-green-3: var(--green-200);
  --ink-green-4: var(--green-300);
  --ink-green-5: var(--green-400);
  --ink-green-6: var(--green-500);
  --ink-green-7: var(--green-600);
  --ink-green-8: var(--green-700);
  --ink-green-9: var(--green-800);
  --outline-green-1: var(--green-100);
  --outline-green-2: var(--green-200);
  --outline-green-3: var(--green-300);
  --outline-green-4: var(--green-400);
  --outline-green-5: var(--green-500);
  --outline-green-6: var(--green-600);
  --outline-green-7: var(--green-700);
  --outline-green-8: var(--green-800);
  --surface-red-1: var(--red-50);
  --surface-red-2: var(--red-100);
  --surface-red-3: var(--red-200);
  --surface-red-4: var(--red-300);
  --surface-red-5: var(--red-400);
  --surface-red-6: var(--red-500);
  --surface-red-7: var(--red-600);
  --surface-red-8: var(--red-700);
  --surface-red-9: var(--red-800);
  --ink-red-1: var(--white);
  --ink-red-2: var(--red-100);
  --ink-red-3: var(--red-200);
  --ink-red-4: var(--red-300);
  --ink-red-5: var(--red-400);
  --ink-red-6: var(--red-500);
  --ink-red-7: var(--red-600);
  --ink-red-8: var(--red-700);
  --ink-red-9: var(--red-800);
  --outline-red-1: var(--red-100);
  --outline-red-2: var(--red-200);
  --outline-red-3: var(--red-300);
  --outline-red-4: var(--red-400);
  --outline-red-5: var(--red-500);
  --outline-red-6: var(--red-600);
  --outline-red-7: var(--red-700);
  --outline-red-8: var(--red-800);
  --surface-orange-1: var(--orange-50);
  --surface-orange-2: var(--orange-100);
  --surface-orange-3: var(--orange-200);
  --surface-orange-4: var(--orange-300);
  --surface-orange-5: var(--orange-400);
  --surface-orange-6: var(--orange-500);
  --surface-orange-7: var(--orange-600);
  --surface-orange-8: var(--orange-700);
  --surface-orange-9: var(--orange-800);
  --ink-orange-1: var(--white);
  --ink-orange-2: var(--orange-100);
  --ink-orange-3: var(--orange-200);
  --ink-orange-4: var(--orange-300);
  --ink-orange-5: var(--orange-400);
  --ink-orange-6: var(--orange-500);
  --ink-orange-7: var(--orange-600);
  --ink-orange-8: var(--orange-700);
  --ink-orange-9: var(--orange-800);
  --outline-orange-1: var(--orange-100);
  --outline-orange-2: var(--orange-200);
  --outline-orange-3: var(--orange-300);
  --outline-orange-4: var(--orange-400);
  --outline-orange-5: var(--orange-500);
  --outline-orange-6: var(--orange-600);
  --outline-orange-7: var(--orange-700);
  --outline-orange-8: var(--orange-800);
  --surface-amber-1: var(--amber-50);
  --surface-amber-2: var(--amber-100);
  --surface-amber-3: var(--amber-200);
  --surface-amber-4: var(--amber-300);
  --surface-amber-5: var(--amber-400);
  --surface-amber-6: var(--amber-500);
  --surface-amber-7: var(--amber-600);
  --surface-amber-8: var(--amber-700);
  --surface-amber-9: var(--amber-800);
  --ink-amber-1: var(--white);
  --ink-amber-2: var(--amber-100);
  --ink-amber-3: var(--amber-200);
  --ink-amber-4: var(--amber-300);
  --ink-amber-5: var(--amber-400);
  --ink-amber-6: var(--amber-500);
  --ink-amber-7: var(--amber-600);
  --ink-amber-8: var(--amber-700);
  --ink-amber-9: var(--amber-800);
  --outline-amber-1: var(--amber-100);
  --outline-amber-2: var(--amber-200);
  --outline-amber-3: var(--amber-300);
  --outline-amber-4: var(--amber-400);
  --outline-amber-5: var(--amber-500);
  --outline-amber-6: var(--amber-600);
  --outline-amber-7: var(--amber-700);
  --outline-amber-8: var(--amber-800);
  --surface-violet-1: var(--violet-50);
  --surface-violet-2: var(--violet-100);
  --surface-violet-3: var(--violet-200);
  --surface-violet-4: var(--violet-300);
  --surface-violet-5: var(--violet-400);
  --surface-violet-6: var(--violet-500);
  --surface-violet-7: var(--violet-600);
  --surface-violet-8: var(--violet-700);
  --surface-violet-9: var(--violet-800);
  --ink-violet-1: var(--white);
  --ink-violet-2: var(--violet-100);
  --ink-violet-3: var(--violet-200);
  --ink-violet-4: var(--violet-300);
  --ink-violet-5: var(--violet-400);
  --ink-violet-6: var(--violet-500);
  --ink-violet-7: var(--violet-600);
  --ink-violet-8: var(--violet-700);
  --ink-violet-9: var(--violet-800);
  --outline-violet-1: var(--violet-100);
  --outline-violet-2: var(--violet-200);
  --outline-violet-3: var(--violet-300);
  --outline-violet-4: var(--violet-400);
  --outline-violet-5: var(--violet-500);
  --outline-violet-6: var(--violet-600);
  --outline-violet-7: var(--violet-700);
  --outline-violet-8: var(--violet-800);
}

[data-theme="dark"],
.dark {
  --surface-gray-1: var(--gray-900);
  --surface-gray-2: var(--gray-800);
  --surface-gray-3: var(--gray-700);
  --surface-gray-4: var(--gray-600);
  --surface-gray-5: var(--gray-500);
  --surface-gray-6: var(--gray-400);
  --surface-gray-7: var(--gray-300);
  --surface-gray-8: var(--gray-200);
  --surface-gray-9: var(--gray-100);
  --surface-gray-10: var(--gray-50);
  --ink-gray-1: var(--gray-800);
  --outline-gray-1: var(--gray-800);
  --ink-gray-2: var(--gray-700);
  --outline-gray-2: var(--gray-700);
  --ink-gray-3: var(--gray-600);
  --outline-gray-3: var(--gray-600);
  --ink-gray-4: var(--gray-500);
  --outline-gray-4: var(--gray-500);
  --ink-gray-5: var(--gray-400);
  --outline-gray-5: var(--gray-400);
  --ink-gray-6: var(--gray-300);
  --outline-gray-6: var(--gray-300);
  --ink-gray-7: var(--gray-200);
  --outline-gray-7: var(--gray-200);
  --ink-gray-8: var(--gray-100);
  --outline-gray-8: var(--gray-100);
  --ink-gray-9: var(--gray-50);
  --outline-gray-9: var(--gray-50);
  --surface-base: var(--gray-950);
  --surface-elevation-1: var(--gray-900);
  --surface-elevation-2: var(--gray-800);
  --surface-elevation-3: var(--gray-600);
  --ink-base: var(--gray-950);
  --outline-base: var(--gray-950);
  --surface-blue-1: var(--blue-950);
  --surface-blue-2: var(--blue-900);
  --surface-blue-3: var(--blue-800);
  --surface-blue-4: var(--blue-700);
  --surface-blue-5: var(--blue-600);
  --surface-blue-6: var(--blue-500);
  --surface-blue-7: var(--blue-400);
  --surface-blue-8: var(--blue-300);
  --surface-blue-9: var(--blue-200);
  --ink-blue-1: var(--white);
  --ink-blue-2: var(--blue-800);
  --ink-blue-3: var(--blue-700);
  --ink-blue-4: var(--blue-600);
  --ink-blue-5: var(--blue-500);
  --ink-blue-6: var(--blue-400);
  --ink-blue-7: var(--blue-300);
  --ink-blue-8: var(--blue-200);
  --ink-blue-9: var(--blue-100);
  --outline-blue-1: var(--blue-900);
  --outline-blue-2: var(--blue-800);
  --outline-blue-3: var(--blue-700);
  --outline-blue-4: var(--blue-600);
  --outline-blue-5: var(--blue-500);
  --outline-blue-6: var(--blue-400);
  --outline-blue-7: var(--blue-300);
  --outline-blue-8: var(--blue-200);
  --surface-green-1: var(--green-950);
  --surface-green-2: var(--green-900);
  --surface-green-3: var(--green-800);
  --surface-green-4: var(--green-700);
  --surface-green-5: var(--green-600);
  --surface-green-6: var(--green-500);
  --surface-green-7: var(--green-400);
  --surface-green-8: var(--green-300);
  --surface-green-9: var(--green-200);
  --ink-green-1: var(--white);
  --ink-green-2: var(--green-800);
  --ink-green-3: var(--green-700);
  --ink-green-4: var(--green-600);
  --ink-green-5: var(--green-500);
  --ink-green-6: var(--green-400);
  --ink-green-7: var(--green-300);
  --ink-green-8: var(--green-200);
  --ink-green-9: var(--green-100);
  --outline-green-1: var(--green-900);
  --outline-green-2: var(--green-800);
  --outline-green-3: var(--green-700);
  --outline-green-4: var(--green-600);
  --outline-green-5: var(--green-500);
  --outline-green-6: var(--green-400);
  --outline-green-7: var(--green-300);
  --outline-green-8: var(--green-200);
  --surface-red-1: var(--red-950);
  --surface-red-2: var(--red-900);
  --surface-red-3: var(--red-800);
  --surface-red-4: var(--red-700);
  --surface-red-5: var(--red-600);
  --surface-red-6: var(--red-500);
  --surface-red-7: var(--red-400);
  --surface-red-8: var(--red-300);
  --surface-red-9: var(--red-200);
  --ink-red-1: var(--white);
  --ink-red-2: var(--red-800);
  --ink-red-3: var(--red-700);
  --ink-red-4: var(--red-600);
  --ink-red-5: var(--red-500);
  --ink-red-6: var(--red-400);
  --ink-red-7: var(--red-300);
  --ink-red-8: var(--red-200);
  --ink-red-9: var(--red-100);
  --outline-red-1: var(--red-900);
  --outline-red-2: var(--red-800);
  --outline-red-3: var(--red-700);
  --outline-red-4: var(--red-600);
  --outline-red-5: var(--red-500);
  --outline-red-6: var(--red-400);
  --outline-red-7: var(--red-300);
  --outline-red-8: var(--red-200);
  --surface-orange-1: var(--orange-950);
  --surface-orange-2: var(--orange-900);
  --surface-orange-3: var(--orange-800);
  --surface-orange-4: var(--orange-700);
  --surface-orange-5: var(--orange-600);
  --surface-orange-6: var(--orange-500);
  --surface-orange-7: var(--orange-400);
  --surface-orange-8: var(--orange-300);
  --surface-orange-9: var(--orange-200);
  --ink-orange-1: var(--white);
  --ink-orange-2: var(--orange-800);
  --ink-orange-3: var(--orange-700);
  --ink-orange-4: var(--orange-600);
  --ink-orange-5: var(--orange-500);
  --ink-orange-6: var(--orange-400);
  --ink-orange-7: var(--orange-300);
  --ink-orange-8: var(--orange-200);
  --ink-orange-9: var(--orange-100);
  --outline-orange-1: var(--orange-900);
  --outline-orange-2: var(--orange-800);
  --outline-orange-3: var(--orange-700);
  --outline-orange-4: var(--orange-600);
  --outline-orange-5: var(--orange-500);
  --outline-orange-6: var(--orange-400);
  --outline-orange-7: var(--orange-300);
  --outline-orange-8: var(--orange-200);
  --surface-amber-1: var(--amber-950);
  --surface-amber-2: var(--amber-900);
  --surface-amber-3: var(--amber-800);
  --surface-amber-4: var(--amber-700);
  --surface-amber-5: var(--amber-600);
  --surface-amber-6: var(--amber-500);
  --surface-amber-7: var(--amber-400);
  --surface-amber-8: var(--amber-300);
  --surface-amber-9: var(--amber-200);
  --ink-amber-1: var(--white);
  --ink-amber-2: var(--amber-800);
  --ink-amber-3: var(--amber-700);
  --ink-amber-4: var(--amber-600);
  --ink-amber-5: var(--amber-500);
  --ink-amber-6: var(--amber-400);
  --ink-amber-7: var(--amber-300);
  --ink-amber-8: var(--amber-200);
  --ink-amber-9: var(--amber-100);
  --outline-amber-1: var(--amber-900);
  --outline-amber-2: var(--amber-800);
  --outline-amber-3: var(--amber-700);
  --outline-amber-4: var(--amber-600);
  --outline-amber-5: var(--amber-500);
  --outline-amber-6: var(--amber-400);
  --outline-amber-7: var(--amber-300);
  --outline-amber-8: var(--amber-200);
  --surface-violet-1: var(--violet-950);
  --surface-violet-2: var(--violet-900);
  --surface-violet-3: var(--violet-800);
  --surface-violet-4: var(--violet-700);
  --surface-violet-5: var(--violet-600);
  --surface-violet-6: var(--violet-500);
  --surface-violet-7: var(--violet-400);
  --surface-violet-8: var(--violet-300);
  --surface-violet-9: var(--violet-200);
  --ink-violet-1: var(--white);
  --ink-violet-2: var(--violet-800);
  --ink-violet-3: var(--violet-700);
  --ink-violet-4: var(--violet-600);
  --ink-violet-5: var(--violet-500);
  --ink-violet-6: var(--violet-400);
  --ink-violet-7: var(--violet-300);
  --ink-violet-8: var(--violet-200);
  --ink-violet-9: var(--violet-100);
  --outline-violet-1: var(--violet-900);
  --outline-violet-2: var(--violet-800);
  --outline-violet-3: var(--violet-700);
  --outline-violet-4: var(--violet-600);
  --outline-violet-5: var(--violet-500);
  --outline-violet-6: var(--violet-400);
  --outline-violet-7: var(--violet-300);
  --outline-violet-8: var(--violet-200);
}

/* The scales every screen measures in: one unit of space, a type scale, a radius scale, elevations and focus rings. Our own values, as complete as a design system needs. */

:root {
  /* space: everything is a multiple of one unit */
  --spacing: 0.25rem;

  /* type */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --text-6xl: 40px;

  /* radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* elevation: a warm shadow, so a raised surface looks lit, not cut out */
  --shadow-color: 40 28 16;
  --shadow-xs: 0 1px 1px rgb(var(--shadow-color) / 8%);
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 10%), 0 0 0 1px rgb(var(--shadow-color) / 4%);
  --shadow-md: 0 2px 4px rgb(var(--shadow-color) / 10%), 0 4px 10px -2px rgb(var(--shadow-color) / 12%);
  --shadow-lg: 0 4px 8px rgb(var(--shadow-color) / 12%), 0 12px 28px -6px rgb(var(--shadow-color) / 22%);
  --shadow-xl: 0 8px 16px rgb(var(--shadow-color) / 14%), 0 24px 44px -10px rgb(var(--shadow-color) / 28%);

  /* focus: a ring in the colour of what is focused */
  --focus-gray: 0 0 0 2px color-mix(in srgb, var(--gray-500) 40%, transparent);
  --focus-blue: 0 0 0 2px color-mix(in srgb, var(--blue-500) 40%, transparent);
  --focus-green: 0 0 0 2px color-mix(in srgb, var(--green-500) 40%, transparent);
  --focus-red: 0 0 0 2px color-mix(in srgb, var(--red-500) 40%, transparent);
  --focus-amber: 0 0 0 2px color-mix(in srgb, var(--amber-500) 45%, transparent);
  --focus-violet: 0 0 0 2px color-mix(in srgb, var(--violet-500) 40%, transparent);
}

[data-theme="dark"],
.dark {
  --shadow-color: 0 0 0;
  --shadow-xs: 0 1px 1px rgb(var(--shadow-color) / 30%);
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 35%), 0 0 0 1px rgb(255 255 255 / 4%);
  --shadow-md: 0 2px 4px rgb(var(--shadow-color) / 35%), 0 4px 10px -2px rgb(var(--shadow-color) / 40%);
  --shadow-lg: 0 4px 8px rgb(var(--shadow-color) / 40%), 0 12px 28px -6px rgb(var(--shadow-color) / 60%), 0 0 0 1px rgb(255 255 255 / 6%);
  --shadow-xl: 0 8px 16px rgb(var(--shadow-color) / 45%), 0 24px 44px -10px rgb(var(--shadow-color) / 65%), 0 0 0 1px rgb(255 255 255 / 7%);
}

/* The names the screens are written in, each one a token from styles/tokens or a multiple of its unit.

   Screens use these, and the scales behind them: --space-N, --text-*, --radius-*, --shadow-*, --focus-*. A colour is one of the roles below, never a hex value.
   The dark and light themes are ours (a warm charcoal and warm paper); afas, modern and custom are brand themes that override the roles. See docs/design.md. */

:root {
  --font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading: var(--font-family);
  --font-mono: "Cascadia Code", "Fira Code", Consolas, monospace;

  --space-1: calc(var(--spacing) * 1);
  --space-2: calc(var(--spacing) * 2);
  --space-3: calc(var(--spacing) * 3);
  --space-4: calc(var(--spacing) * 4);
  --space-5: calc(var(--spacing) * 5);
  --space-6: calc(var(--spacing) * 6);
  --space-8: calc(var(--spacing) * 8);

  /* what a control is as tall as: Espresso's default button is 28px, its medium 32px */
  --control-height: calc(var(--spacing) * 7);
  --control-height-md: calc(var(--spacing) * 8);

  /* what lies behind a drawer or a modal */
  --scrim: rgb(0 0 0 / 45%);

  /* a Dutch license plate is yellow whatever the theme */
  --plate-bg: #f7cf35;
  --plate-ink: #171717;
  --plate-outline: #1f2937;
}

/* the roles, on the dark palette */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --surface: var(--surface-base);
  --surface-raised: var(--surface-elevation-1);
  --surface-overlay: var(--surface-elevation-2);
  --border: var(--outline-gray-2);
  --border-light: var(--outline-gray-1);
  --text: var(--ink-gray-9);
  --text-secondary: var(--ink-gray-5);
  --primary: var(--blue-400);
  --primary-soft: var(--surface-blue-1);
  --success: var(--green-400);
  --success-soft: var(--surface-green-1);
  --danger: var(--red-400);
  --danger-soft: var(--surface-red-1);
  --warning: var(--amber-400);
  --warning-soft: var(--surface-amber-1);
  --menubar: var(--surface-base);
  --menubar-hover: var(--surface-gray-2);
  --menubar-text: var(--text);
  --button-primary-text: var(--white);
  --button-danger-text: var(--white);
}

/* the roles, on the light palette */
[data-theme="light"] {
  color-scheme: light;
  --surface: var(--surface-base);
  --surface-raised: var(--surface-gray-1);
  --surface-overlay: var(--surface-elevation-2);
  --border: var(--outline-gray-2);
  --border-light: var(--outline-gray-1);
  --text: var(--ink-gray-9);
  --text-secondary: var(--ink-gray-5);
  --primary: var(--blue-600);
  --primary-soft: var(--surface-blue-1);
  --success: var(--green-600);
  --success-soft: var(--surface-green-1);
  --danger: var(--red-600);
  --danger-soft: var(--surface-red-1);
  --warning: var(--amber-600);
  --warning-soft: var(--surface-amber-1);
  --menubar: var(--surface-gray-1);
  --menubar-hover: var(--surface-gray-2);
  --menubar-text: var(--text);
  --button-primary-text: var(--white);
  --button-danger-text: var(--white);
}

[hidden] {
  display: none !important;
}
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--surface-raised);
  color: var(--text);
  font: 14px/1.5 var(--font-family);
  letter-spacing: 0;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
[class~="ui-pop"], [class~="bg-ui-overlay"], [class~="user-menu-panel"] { --container: var(--surface-overlay); }
[class~="bg-ui-raised"] { --container: var(--surface-raised); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), textarea), .ui-field {
  width: 100%; height: var(--control-height); min-height: 0; padding: 0 var(--space-2); font: inherit; font-size: var(--text-sm); color: var(--text);
  background: color-mix(in srgb, var(--container, var(--surface)) 90%, var(--text));
  border: 1px solid transparent; border-radius: var(--radius-md);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), textarea):hover:not(:disabled), .ui-field:hover:not(:disabled) {
  background: color-mix(in srgb, var(--container, var(--surface)) 85%, var(--text));
}
:where(input, textarea):focus, :where(input, textarea):focus-visible, .ui-field:focus, .ui-field:focus-visible {
  outline: none; border-color: var(--primary); box-shadow: var(--focus-blue);
}
:where(input, textarea):disabled, .ui-field:disabled { opacity: .6; }
:where(input, textarea)::placeholder, .ui-field::placeholder { color: var(--text-secondary); }
textarea { height: auto; min-height: 96px; padding-block: var(--space-2); resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; }
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}
code, .badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.form-label,
label span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.form-help,
label small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
}
/* layer: components */
.app-shell {
  min-height: 100vh;
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-family);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-light);
  background: var(--menubar);
  color: var(--menubar-text);
  padding: 0 var(--space-3);
}
[data-theme="custom"] .topbar {
  border-bottom: 3px solid var(--accent);
}
.brand-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--menubar-text);
  text-decoration: none;
}
.brand-link:hover { text-decoration: none; }
[data-theme="custom"] .brand-link strong {
  font-family: var(--font-heading);
  letter-spacing: .03em;
}
.brand-link small {
  color: color-mix(in srgb, var(--menubar-text) 65%, transparent);
  font-weight: 650;
}
.brand-mark,
.user-avatar {
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--menubar-hover);
  font-weight: 800;
}
.brand-mark {
  width: 28px;
  height: 28px;
  color: var(--menubar-text);
  font-size: var(--text-xs);
}
[data-theme="custom"] .brand-mark {
  position: relative;
  background: transparent;
  color: transparent;
  font-size: 0;
}
[data-theme="custom"] .brand-mark::before,
[data-theme="custom"] .brand-mark::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 12px;
  height: 20px;
  background: var(--accent);
}
[data-theme="custom"] .brand-mark::before {
  left: 1px;
  clip-path: polygon(0 0, 58% 0, 100% 50%, 58% 100%, 0 100%, 42% 50%);
}
[data-theme="custom"] .brand-mark::after {
  right: 1px;
  clip-path: polygon(42% 0, 100% 0, 58% 50%, 100% 100%, 42% 100%, 0 50%);
}
.brand-mark,
.user-avatar {
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--menubar-hover);
  font-weight: 800;
}
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}
.topbar-spacer { flex: 1; }
.topbar-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  background: var(--menubar-hover);
  padding: 0 var(--space-2);
}
.user-menu { position: relative; }
.user-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--menubar-text);
  padding: var(--space-1) var(--space-2);
  font: inherit;
  cursor: pointer;
}
.user-button:hover { background: var(--menubar-hover); }
.user-menu-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  min-width: 13rem;
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  padding: var(--space-2);
  box-shadow: var(--shadow-lg);
}
.menu-link,
.menu-button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  padding: var(--space-2);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.menu-link:hover,
.menu-button:hover {
  background: var(--surface-raised);
  text-decoration: none;
}
.menu-link,
.menu-button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  padding: var(--space-2);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.menu-link:hover,
.menu-button:hover {
  background: var(--surface-raised);
  text-decoration: none;
}
.menu-button.danger { color: var(--danger); }
.theme-select,
.language-form select {
  margin-top: var(--space-1);
}
.page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
}
@media (max-width: 820px) { .page { padding: var(--space-5) var(--space-4); } }
.page-header,
.dashboard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 560px) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 820px) { .page-header,
  .dashboard-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  } }
.page-header h1,
.dashboard-title h1 {
  margin: 0 0 var(--space-1);
  color: var(--text);
  font-size: var(--text-3xl);
  line-height: 1.25;
  font-weight: 650;
  font-family: var(--font-heading);
}
.page-header p,
.dashboard-title p {
  margin: 0;
  color: var(--text-secondary);
}
.split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
@media (max-width: 820px) { .split, .toolbar { flex-direction: column; align-items: stretch; } }
.dashboard-command { position: relative; }
.dashboard-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 42px;
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.dashboard-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.dashboard-search input {
  min-height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}
.search-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid var(--text-secondary);
  border-radius: var(--radius-full);
}
.search-icon::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  right: -5px;
  bottom: -3px;
  background: var(--text-secondary);
  transform: rotate(45deg);
  border-radius: var(--radius-xs);
}
.ui-field { width: auto; }
input.is-active {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.command-clear {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-2xl);
  cursor: pointer;
}
.command-clear:hover { background: var(--surface-overlay); }
.command-results {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: var(--space-1);
  max-height: min(360px, calc(100vh - 220px));
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.command-results[hidden] { display: none; }
.command-result {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 50px;
  padding: var(--space-2);
  color: var(--text);
  border-radius: var(--radius-sm);
}
.command-result:hover,
.command-result:focus-visible,
.command-result.active {
  background: var(--surface-raised);
  text-decoration: none;
  outline: none;
}
.command-result .module-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
}
.command-result strong,
.command-result small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.command-result small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.dashboard-section { margin-bottom: var(--space-6); }
.section-label {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.modules-grid,
.stats-grid,
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.modules-grid,
.stats-grid,
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.stats-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.settings-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(480px, 1.35fr);
  gap: var(--space-4);
}
@media (max-width: 820px) { .settings-grid { grid-template-columns: 1fr; } }
.module-card,
.card,
.stat-card,
.ui-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.module-card,
.card {
  min-height: 112px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  color: var(--text);
  transition: transform 150ms ease;
}
.module-card:hover,
.card:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.module-card[data-kind="solution"] { border-left: 3px solid var(--primary); }
.module-card[data-kind="solution"] .module-icon { color: var(--primary); }
.module-card[data-kind="tool"] { border-left: 3px solid var(--warning); }
.module-card[data-kind="tool"] .module-icon { color: var(--warning); }
.module-card strong,
.card strong {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 700;
}
.module-card p,
.card p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
[data-theme="custom"] .module-card,
[data-theme="custom"] .card,
[data-theme="custom"] .stat-card,
[data-theme="custom"] .ui-card {
  border-top-color: var(--accent);
}
.module-card,
.card,
.stat-card,
.ui-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.module-card,
.card {
  min-height: 112px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  color: var(--text);
  transition: transform 150ms ease;
}
.module-card:hover,
.card:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.module-card strong,
.card strong {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 700;
}
.module-card p,
.card p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
[data-theme="custom"] .module-card,
[data-theme="custom"] .card,
[data-theme="custom"] .stat-card,
[data-theme="custom"] .ui-card {
  border-top-color: var(--accent);
}
.module-card,
.card,
.stat-card,
.ui-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.stat-card {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-1);
}
.stat-card span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.stat-card strong {
  color: var(--text);
  font-size: var(--text-4xl);
  font-weight: 800;
}
[data-theme="custom"] .module-card,
[data-theme="custom"] .card,
[data-theme="custom"] .stat-card,
[data-theme="custom"] .ui-card {
  border-top-color: var(--accent);
}
.stat-card.block-links header { font-weight: 600; font-size: var(--text-sm); color: var(--text); }
.module-card,
.card,
.stat-card,
.ui-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.ui-card {
  padding: var(--space-4);
  overflow-x: auto;
}
.ui-card h2 {
  margin: 0 0 var(--space-4);
  color: var(--text);
  font-size: var(--text-xl);
  font-family: var(--font-heading);
}
[data-theme="custom"] .module-card,
[data-theme="custom"] .card,
[data-theme="custom"] .stat-card,
[data-theme="custom"] .ui-card {
  border-top-color: var(--accent);
}
.module-card-success {
  border-color: color-mix(in srgb, var(--success) 65%, var(--border));
}
.module-card-success .module-icon {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.module-card-value {
  display: block;
  margin-top: var(--space-1);
  color: var(--success);
  font-size: var(--text-base);
  font-weight: 800;
}
.module-icon,
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 0;
}
.module-icon svg { width: 22px; height: 22px; }
.module-icon,
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 0;
}
.icon svg { width: 16px; height: 16px; }
.webhook-payload-panel pre { max-height: 520px; overflow: auto; margin: 0; padding: var(--space-3); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.webhook-detail-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 720px) { .webhook-detail-columns { grid-template-columns: 1fr; } }
.stat-card-success strong { color: var(--success); }
.stat-card-danger strong { color: var(--danger); }
.table-panel {
  padding: 0;
}
.table-panel table {
  margin: 0;
}
.table-panel th:first-child,
.table-panel td:first-child {
  padding-left: var(--space-5);
}
.table-panel th:last-child,
.table-panel td:last-child {
  padding-right: var(--space-5);
}
.settings-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.settings-panel-header h2 {
  margin: 0;
}
.settings-panel-header p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  max-width: 48rem;
}
.settings-readiness {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.security-defaults {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--success) 36%, var(--border-light));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--success-soft) 72%, var(--surface));
  color: var(--text-secondary);
}
.security-defaults strong {
  color: var(--text);
  white-space: nowrap;
}
.readiness-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-secondary);
}
.readiness-item strong {
  font-size: var(--text-sm);
}
.readiness-item .success {
  color: var(--success);
}
.readiness-item .danger {
  color: var(--danger);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: var(--space-4);
}
@media (max-width: 820px) { .detail-grid, .info-grid { grid-template-columns: 1fr; } }
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: 0;
}
.info-grid dt {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.info-grid dd {
  margin: var(--space-1) 0 0;
  color: var(--text);
}
dl.info-grid > .detail-field-json {
  grid-column: 1 / -1 !important;
}
@media (max-width: 820px) { .detail-grid, .info-grid { grid-template-columns: 1fr; } }
.toolbar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.toolbar input { max-width: 420px; }
@media (max-width: 820px) { .split, .toolbar { flex-direction: column; align-items: stretch; } }
.filter-toolbar {
  align-items: center;
  flex-wrap: wrap;
}
.filter-toolbar input,
.filter-toolbar select {
  min-height: 40px;
}
.filter-toolbar select {
  min-width: 190px;
  max-width: 240px;
}
.htmx-indicator {
  display: none;
  align-items: center;
  color: var(--text-secondary);
}
.btn {
  min-height: 34px;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  color: var(--text);
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled {
  opacity: .55;
  cursor: wait;
}
.btn:hover { text-decoration: none; }
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  background: var(--primary);
  color: var(--button-primary-text);
  font-weight: 650;
}
.btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--button-danger-text);
  font-weight: 650;
}
.inline-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.inline-form input { flex: 1; }
@media (max-width: 820px) { .inline-form { flex-direction: column; align-items: stretch; } }
.data-table th a {
  color: inherit;
}
.data-table .table-empty-row td {
  height: 6rem;
  color: var(--text-secondary);
  text-align: center;
  vertical-align: middle;
}
.data-table tr.is-bad td { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 24px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
}
.sort-link:hover {
  color: var(--text);
  text-decoration: none;
}
.sort-link.is-active {
  color: var(--primary);
}
.column-help {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-left: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1;
  text-transform: none;
}
.sort-indicator {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-sm);
  line-height: 1;
}
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-4);
  color: var(--text-secondary);
}
.clickable-row {
  position: relative;
  cursor: pointer;
}
.clickable-row:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.clickable-row:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.row-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.message {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
}
.message strong {
  display: block;
  margin-bottom: var(--space-1);
}
.message.error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: var(--danger-soft);
  color: color-mix(in srgb, var(--danger) 65%, var(--text));
}
.message.warning {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: var(--warning-soft);
  color: color-mix(in srgb, var(--warning) 45%, var(--text));
}
.message.success {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: var(--success-soft);
  color: color-mix(in srgb, var(--success) 50%, var(--text));
}
.message.info {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 55%, var(--text));
}
.json-block {
  width: min(100%, 920px);
  max-width: 100%;
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  color: var(--text);
  white-space: pre-wrap;
}
.json-block code {
  display: block;
  min-height: 0;
  padding: 0;
  background: transparent;
  white-space: inherit;
}
.ui-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: var(--space-4);
}
@media (max-width: 820px) { .ui-form { grid-template-columns: 1fr; } }
.compact-form {
  grid-template-columns: 1fr;
}
.form-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}
.form-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.section-heading,
.field-full {
  grid-column: 1 / -1;
}
.section-heading h2,
.section-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--text-lg);
}
.section-heading p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
}
.section-heading,
.field-full {
  grid-column: 1 / -1;
}
.form-errors {
  grid-column: 1 / -1;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  padding: var(--space-3) var(--space-4);
}
.form-field,
.checkbox-field {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.checkbox-field {
  grid-column: 1 / -1;
}
.checkbox-control {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.checkbox-control input {
  margin-top: 3px;
}
.checkbox-copy {
  display: grid;
  gap: var(--space-1);
}
.checkbox-copy strong {
  color: var(--text);
  font-size: var(--text-base);
}
.actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-4);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  padding: var(--space-5);
}
.modal-card {
  width: min(640px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.delete-modal-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
}
.delete-modal-object {
  color: var(--text);
  font-weight: 800;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-4);
}
.delete-confirmation {
  max-width: 720px;
}
.delete-confirmation-form {
  display: grid;
  gap: var(--space-5);
}
.delete-confirmation-copy {
  display: grid;
  gap: var(--space-3);
}
.delete-confirmation-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.15;
}
.delete-confirmation-copy p {
  max-width: 62ch;
  margin: 0;
  color: var(--text-secondary);
}
.delete-confirmation-note {
  border-left: 3px solid var(--danger);
  padding-left: var(--space-3);
}
.delete-confirmation-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-4);
}
.delete-confirmation-facts div {
  display: grid;
  gap: var(--space-1);
}
.delete-confirmation-facts dt {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.delete-confirmation-facts dd {
  margin: 0;
  color: var(--text);
}
.delete-confirmation-facts dd.code {
  justify-self: start;
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  padding: 2px var(--space-2);
  font-family: var(--font-mono);
}
@media (max-width: 720px) { .delete-confirmation-facts {
    grid-template-columns: 1fr;
  } }
.timeline {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.timeline li {
  border-left: 2px solid var(--border);
  padding-left: var(--space-3);
}
.timeline div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}
.timeline span,
.timeline small,
.timeline p {
  color: var(--text-secondary);
}
.timeline p {
  margin: var(--space-1) 0 0;
}
.embed-body { min-height: 0; background: transparent; }
.embed-main { width: 100%; padding: var(--space-3, 12px); }
.embed-error { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--danger); border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--text); padding: 20px; }
.embed-error h1 { margin: 0 0 4px; font-size: var(--text-lg); }
.embed-error p { margin: 0; color: var(--text-secondary); }
.embed-error-symbol { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--danger); color: var(--button-danger-text); font-weight: 800; }
.desk { display: flex; align-items: flex-start; min-height: calc(100vh - 40px); }
@media (max-width: 820px) { .desk { display: block; } }
.desk-main { flex: 1; min-width: 0; }
.desk-side { position: sticky; top: 40px; flex: 0 0 15rem; width: 15rem; height: calc(100vh - 40px); overflow: auto; box-sizing: border-box; padding: 6px 8px 16px;
  border-right: 1px solid var(--border-light); background: var(--surface-raised); }
@media (max-width: 820px) { .desk-side { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--border-light); } }
.desk-group { padding: 14px 8px 4px; color: var(--text-secondary); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; }
.desk-item, .desk-page { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.desk-item { padding: 6px 8px; }
.desk-item:hover, .desk-page:hover { background: var(--surface-overlay); }
.desk-item.is-open { font-weight: 600; }
.desk-item .icon { width: 20px; height: 20px; min-width: 0; padding: 0; background: none; border-radius: 0; display: inline-grid; place-items: center; }
.desk-item, .desk-page { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.desk-item:hover, .desk-page:hover { background: var(--surface-overlay); }
.desk-page { padding: 4px 8px; color: var(--text-secondary); }
.desk-page.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.desk-pages { display: grid; gap: 1px; margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px solid var(--border-light); }
.insite-role-picker { min-width: 0; margin: 0; padding: 0; border: 0; grid-column: 1 / -1; }
.insite-role-picker legend { margin-bottom: 8px; color: var(--text-secondary); font-size: var(--text-sm); }
.insite-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.insite-role { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer; }
.insite-role input { margin: 0; }
.insite-role small { margin-left: auto; color: var(--primary); }
.desk-subgroup { padding: 8px 8px 2px; color: var(--text-secondary); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; }
.blocks-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; align-items: stretch; }
.blocks-grid .block { min-width: 0; grid-column: span 3; }
.blocks-grid .block-col-3 { grid-column: span 3; }
.blocks-grid .block-col-4 { grid-column: span 4; }
.blocks-grid .block-col-6 { grid-column: span 6; }
.blocks-grid .block-col-9 { grid-column: span 9; }
.blocks-grid .block-col-12 { grid-column: span 12; }
.blocks-grid .block > .stat-card, .blocks-grid .block > .module-card { height: 100%; box-sizing: border-box; }
.blocks-grid .block > .module-card, .blocks-grid .block > .stat-card:not(.block-chart):not(.block-list):not(.block-links) { min-height: 96px; align-content: center; align-items: center; }
@media (max-width: 1100px) { .blocks-grid .block, .blocks-grid .block-add { grid-column: span 6 !important; } }
@media (max-width: 640px) { .blocks-grid .block, .blocks-grid .block-add { grid-column: span 12 !important; } }
.blocks-grid.is-editing .block { outline: 1px dashed var(--border); outline-offset: 2px; border-radius: var(--radius-lg); }
.block-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.block-handle { position: absolute; top: 2px; left: 50%; transform: translateX(-50%) rotate(90deg); z-index: 2; cursor: grab; color: var(--text-secondary); font-size: var(--text-base); line-height: 1; letter-spacing: -2px; user-select: none; padding: 2px 6px; }
.block-handle:active { cursor: grabbing; }
.block-resizer { position: absolute; top: 10px; bottom: 10px; right: -7px; width: 8px; z-index: 2; cursor: col-resize; border-radius: var(--radius-sm); }
.block-resizer:hover, .block-resizer.is-resizing { background: var(--primary); }
.sortable-ghost { opacity: 0.4; }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.12s, border-color 0.12s; }
.ui-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ui-btn-sm { padding: 5px 10px; }
.ui-btn-md { padding: 6px 12px; }
.ui-btn-lg { padding: 9px 16px; font-size: var(--text-base); }
.ui-btn-solid.ui-btn-gray { background: var(--text); color: var(--surface); }
.ui-btn-solid.ui-btn-blue { background: var(--primary); color: var(--button-primary-text); font-weight: 600; }
.ui-btn-solid.ui-btn-red { background: var(--danger); color: var(--button-danger-text); font-weight: 600; }
.ui-btn-solid.ui-btn-green { background: var(--success); color: var(--button-primary-text); font-weight: 600; }
.ui-btn-solid:hover { filter: brightness(1.08); }
.ui-btn-subtle { background: var(--surface-overlay); border-color: var(--border); color: var(--text); }
.ui-btn-subtle:hover { background: var(--surface-raised); }
.ui-btn-subtle.ui-btn-red { color: var(--danger); }
.ui-btn-subtle.ui-btn-blue { color: var(--primary); }
.ui-btn-subtle.ui-btn-green { color: var(--success); }
.ui-btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.ui-btn-outline:hover { background: var(--surface-overlay); }
.ui-btn-outline.ui-btn-red { color: var(--danger); border-color: var(--danger); }
.ui-btn-outline.ui-btn-blue { color: var(--primary); border-color: var(--primary); }
.ui-btn-ghost { background: transparent; color: var(--text-secondary); }
.ui-btn-ghost:hover { background: var(--surface-overlay); color: var(--text); }
.ui-btn-ghost.ui-btn-red { color: var(--danger); }
.ui-btn-ghost.ui-btn-blue { color: var(--primary); }
.ui-btn-ghost.ui-btn-orange { color: var(--warning); }
.ui-badge { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 1px 9px; font-size: var(--text-xs); font-weight: 500; background: var(--surface-overlay); color: var(--text-secondary); }
.ui-badge-green { background: var(--success-soft); color: var(--success); }
.ui-badge-red { background: var(--danger-soft); color: var(--danger); }
.ui-badge-orange { background: var(--warning-soft); color: var(--warning); }
.ui-badge-blue { background: var(--primary-soft); color: var(--primary); }
.ui-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4, 16px); margin-bottom: var(--space-6, 24px); }
.ui-page-header h1 { margin: 0 0 4px; color: var(--text); font-size: var(--text-3xl); line-height: 1.25; font-weight: 650; font-family: var(--font-heading); }
.ui-page-header p { margin: 0; color: var(--text-secondary); }
.ui-page-header-main { min-width: 0; }
.ui-crumb { display: inline-block; margin-bottom: 4px; font-size: var(--text-sm); color: var(--primary); text-decoration: none; }
.ui-page-header-actions { display: flex; align-items: center; gap: 8px; }
.ui-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.ui-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.ui-tab:hover { color: var(--text); }
.ui-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); font-weight: 600; }
.ui-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; text-align: center; color: var(--text-secondary); }
.ui-empty h2 { margin: 0; font-size: var(--text-lg); color: var(--text); }
.ui-empty p { margin: 0; max-width: 28rem; font-size: var(--text-sm); }
.ui-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-xl); background: var(--primary-soft); color: var(--primary); }
.ui-empty-actions { margin-top: 10px; display: flex; gap: 8px; }
.ui-drawer-layer { position: fixed; inset: 0; z-index: 70; }
.ui-drawer-overlay { position: absolute; inset: 0; background: var(--scrim); }
.ui-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(26rem, 100%); display: flex; flex-direction: column; background: var(--surface-raised); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); }
.ui-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ui-drawer-head h2 { margin: 0; font-size: var(--text-base); }
.ui-drawer-body { flex: 1; overflow: auto; padding: 16px; display: grid; gap: 18px; align-content: start; }
.ui-library-group { display: grid; gap: 8px; }
.ui-library-group h3 { margin: 0; font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; }
.ui-library-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: var(--text); }
.ui-library-item:hover { background: var(--surface-overlay); }
.ui-library-item strong { display: block; font-size: var(--text-sm); font-weight: 600; }
.ui-library-item small { display: block; color: var(--text-secondary); font-size: var(--text-xs); }
.ui-library-item .grow { flex: 1; min-width: 0; }
.ui-library-item form { margin: 0; }
.block-chart { display: grid; align-content: start; gap: 8px; }
.block-chart .frappe-chart { --charts-label-color: var(--text-secondary); --charts-axis-line-color: var(--border); --charts-stroke-width: 2; --charts-dataset-circle-stroke: var(--surface); }
.block-chart .chart-legend, .block-chart text { fill: var(--text-secondary); }
.block-chart .frappe-chart line, .block-chart .frappe-chart .axis line { stroke: var(--border-light) !important; }
.block-list { display: grid; align-content: start; gap: 6px; }
.block-list header { display: flex; align-items: center; justify-content: space-between; }
.block-list ul { margin: 0; padding: 0; list-style: none; }
.block-list li a { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-top: 1px solid var(--border-light); color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.block-list li a:hover { background: var(--surface-overlay); }
.block-list small { color: var(--text-secondary); white-space: nowrap; }
.block-list-add { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-size: var(--text-lg); line-height: 1; }
.block-list-add:hover { background: var(--surface-overlay); color: var(--text); }
.block-list-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-list-empty { padding: 8px 4px; color: var(--text-secondary); font-size: var(--text-sm); }
.block-list-more { font-size: var(--text-xs); color: var(--primary); text-decoration: none; }
.block-links { display: grid; align-content: start; gap: 8px; }
.block-links ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.block-links li a { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.block-links li a:hover { background: var(--surface-overlay); }
.block-links-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); opacity: 0.5; flex: none; }
.row-actions { display: flex; gap: var(--space-1); align-items: center; justify-content: flex-end; }
.row-actions form { margin: 0; }
.run-summary { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: 0 0 var(--space-4); }
.run-summary div { min-width: 6rem; }
.run-summary dt { color: var(--text-secondary); font-size: var(--text-xs); }
.run-summary dd { margin: 0; font-size: var(--text-4xl); font-weight: 650; }
.run-summary .is-bad dd { color: var(--danger); }
.run-alert { border-color: var(--danger); }
.data-table-head { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.data-table-head .column-help { margin-left: 0; flex: none; }
.data-table-head .sort-link { min-height: 0; }
.is-required > label > span:first-child::after { content: "*"; color: var(--danger); }
/* layer: shortcuts */
.container{width:100%;}
.tg-edit{position:absolute;inset:0;box-sizing:border-box;min-height:0 !important;height:100% !important;width:100% !important;border-width:2px !important;border-color:var(--primary) !important;border-radius:0 !important;background-color:var(--surface) /* var(--surface) */;padding-left:0.5rem !important;padding-right:0.5rem !important;font-size:var(--text-sm);line-height:1.5;color:var(--text) /* var(--text) */;outline:2px solid transparent;outline-offset:2px;}
.ui-pop{position:absolute;top:100%;left:0.75rem;z-index:30;margin-top:0.25rem;min-width:18rem;border-width:1px;border-color:var(--border);border-radius:var(--radius-lg);background-color:var(--surface-overlay) /* var(--surface-overlay) */;padding:0.75rem;--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.ot-page{margin-left:auto;margin-right:auto;width:100%;max-width:80rem;padding-left:2rem;padding-right:2rem;padding-top:1.5rem;padding-bottom:1.5rem;}
.tg-cell{box-sizing:border-box;height:33px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-right-width:1px;border-bottom-width:1px;border-color:var(--border);padding-top:0 !important;padding-bottom:0 !important;padding-left:0.625rem !important;padding-right:0.625rem !important;vertical-align:middle;font-size:var(--text-sm);line-height:1.5;}
.tg-bare{min-height:0 !important;height:100% !important;width:100% !important;border-width:0px !important;border-radius:0 !important;background-color:transparent /* transparent */ !important;padding-left:0 !important;padding-right:0 !important;font-size:var(--text-sm);line-height:1.5;color:var(--text) /* var(--text) */;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0)) !important;box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow) !important;outline:2px solid transparent;outline-offset:2px;}
.tg-foot{height:30px;white-space:nowrap;border-right-width:1px;border-top-width:1px;border-color:var(--border);background-color:var(--surface-raised) /* var(--surface-raised) */;padding-top:0 !important;padding-bottom:0 !important;padding-left:0.625rem !important;padding-right:0.625rem !important;vertical-align:middle;font-size:var(--text-xs);line-height:1.5;color:var(--text-secondary) /* var(--text-secondary) */;}
.tg-num{width:4.5rem;height:33px;border-right-width:1px;border-bottom-width:1px;border-color:var(--border);padding:0 !important;text-align:center;vertical-align:middle;font-size:var(--text-xs);line-height:1.5;color:var(--text-secondary) /* var(--text-secondary) */;}
.tg-th{height:33px;border-right-width:1px;border-bottom-width:1px;border-color:var(--border);background-color:var(--surface-raised) /* var(--surface-raised) */;padding-top:0 !important;padding-bottom:0 !important;padding-left:0.625rem !important;padding-right:0.625rem !important;text-align:left;vertical-align:middle;font-size:var(--text-xs) !important;line-height:1.5 !important;color:var(--text-secondary) /* var(--text-secondary) */;font-weight:500 !important;letter-spacing:0em !important;text-transform:none !important;}
.ui-check{width:1rem !important;height:1rem !important;cursor:pointer;accent-color:var(--primary) /* var(--primary) */;}
.ui-item{width:100%;min-height:0 !important;display:flex;cursor:pointer;align-items:center;gap:0.5rem;border-width:0px;border-radius:var(--radius-md);background-color:transparent /* transparent */;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.375rem !important;padding-bottom:0.375rem !important;text-align:left;font-size:var(--text-sm);line-height:1.5;color:var(--text) /* var(--text) */;}
.ui-on{background-color:var(--primary-soft) /* var(--primary-soft) */ !important;color:var(--primary) /* var(--primary) */ !important;}
.ui-item:hover{background-color:var(--surface-raised) /* var(--surface-raised) */;}
.tg-bare::placeholder{color:var(--text-secondary) /* var(--text-secondary) */;}
@media (min-width: 640px){
.container{max-width:640px;}
}
@media (min-width: 768px){
.container{max-width:768px;}
}
@media (min-width: 1024px){
.container{max-width:1024px;}
}
@media (min-width: 1280px){
.container{max-width:1280px;}
}
@media (min-width: 1536px){
.container{max-width:1536px;}
}
/* layer: default */
.\[background-image\:linear-gradient\(var\(--primary-soft\)\,var\(--primary-soft\)\)\]{background-image:linear-gradient(var(--primary-soft),var(--primary-soft));}
[javascript\:alert=""]{javascript:alert="";}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.pointer-events-none{pointer-events:none;}
.visible{visibility:visible;}
.invisible{visibility:hidden;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.relative{position:relative;}
.sticky{position:sticky;}
.static{position:static;}
.inset-0{inset:0;}
.\!left-0{left:0 !important;}
.\!left-auto{left:auto !important;}
.bottom-0{bottom:0;}
.left-0{left:0;}
.right-0{right:0;}
.top-0{top:0;}
.top-full{top:100%;}
.z-\[5\]{z-index:5;}
.z-10{z-index:10;}
.z-20{z-index:20;}
.z-30{z-index:30;}
.z-40{z-index:40;}
.z-50{z-index:50;}
.grid{display:grid;}
.grid-cols-\[12rem_14rem\]{grid-template-columns:12rem 14rem;}
.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto;}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr));}
.m-0{margin:0;}
.-mx-1\.5{margin-left:-0.375rem;margin-right:-0.375rem;}
.mx-2{margin-left:0.5rem;margin-right:0.5rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.my-1{margin-top:0.25rem;margin-bottom:0.25rem;}
.-mt-2{margin-top:-0.5rem;}
.mb-0{margin-bottom:0;}
.mb-0\.5{margin-bottom:0.125rem;}
.mb-1{margin-bottom:0.25rem;}
.mb-1\.5{margin-bottom:0.375rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-3{margin-bottom:0.75rem;}
.mb-4{margin-bottom:1rem;}
.me{margin-inline-end:1rem;}
.ml-2{margin-left:0.5rem;}
.ml-auto{margin-left:auto;}
.mr-2{margin-right:0.5rem;}
.mt-0{margin-top:0;}
.mt-1{margin-top:0.25rem;}
.mt-2{margin-top:0.5rem;}
.mt-3{margin-top:0.75rem;}
.mt-4{margin-top:1rem;}
.mt-5{margin-top:1.25rem;}
.mt-px{margin-top:1px;}
.box-border{box-sizing:border-box;}
.inline{display:inline;}
.block{display:block;}
.\!inline-block{display:inline-block !important;}
.inline-block,
.group:hover .group-hover\:inline-block{display:inline-block;}
.contents{display:contents;}
.\!hidden{display:none !important;}
.hidden,
.group:hover .group-hover\:hidden{display:none;}
.\!h-11{height:2.75rem !important;}
.\!h-48{height:12rem !important;}
.\!h-7{height:1.75rem !important;}
.\!h-auto{height:auto !important;}
.\!h-full{height:100% !important;}
.\!min-w-40{min-width:10rem !important;}
.\!min-w-56{min-width:14rem !important;}
.\!min-w-96{min-width:24rem !important;}
.\!w-11{width:2.75rem !important;}
.\!w-24{width:6rem !important;}
.\!w-32{width:8rem !important;}
.\!w-40{width:10rem !important;}
.\!w-44{width:11rem !important;}
.\!w-8{width:2rem !important;}
.\!w-full{width:100% !important;}
.h-\[36rem\]{height:36rem;}
.h-3{height:0.75rem;}
.h-3\.5{height:0.875rem;}
.h-4{height:1rem;}
.h-6{height:1.5rem;}
.h-full{height:100%;}
.h\[\"text\"\]{height:"text";}
.max-h-\[60vh\]{max-height:60vh;}
.max-h-\[70vh\]{max-height:70vh;}
.max-h-\[80vh\]{max-height:80vh;}
.max-h-\[90vh\]{max-height:90vh;}
.max-h-56{max-height:14rem;}
.max-h-64{max-height:16rem;}
.max-h-96{max-height:24rem;}
.max-w-\[28rem\],
.max-w-md{max-width:28rem;}
.max-w-3xl{max-width:48rem;}
.max-w-4xl{max-width:56rem;}
.max-w-5xl{max-width:64rem;}
.max-w-6xl{max-width:72rem;}
.max-w-80{max-width:20rem;}
.max-w-full{max-width:100%;}
.max-w-sm{max-width:24rem;}
.max-w-xl{max-width:36rem;}
.min-h-0{min-height:0;}
.min-h-10{min-height:2.5rem;}
.min-h-24{min-height:6rem;}
.min-h-screen{min-height:100vh;}
.min-w-\[9rem\]{min-width:9rem;}
.min-w-0{min-width:0;}
.min-w-24{min-width:6rem;}
.min-w-full{min-width:100%;}
.min-w-max{min-width:max-content;}
.w-\[46rem\]{width:46rem;}
.w-\[64rem\]{width:64rem;}
.w-1\.5{width:0.375rem;}
.w-10{width:2.5rem;}
.w-28{width:7rem;}
.w-3{width:0.75rem;}
.w-3\.5{width:0.875rem;}
.w-32{width:8rem;}
.w-36{width:9rem;}
.w-4{width:1rem;}
.w-40{width:10rem;}
.w-44{width:11rem;}
.w-48{width:12rem;}
.w-52{width:13rem;}
.w-56{width:14rem;}
.w-6{width:1.5rem;}
.w-60{width:15rem;}
.w-64{width:16rem;}
.w-72{width:18rem;}
.w-8{width:2rem;}
.w-80{width:20rem;}
.w-96{width:24rem;}
.w-full{width:100%;}
.w-max{width:max-content;}
.w\[\'table\'\]{width:'table';}
.w\[\"count\"\]{width:"count";}
.w\[\"mode\"\]{width:"mode";}
.w\[\"rows\"\]{width:"rows";}
.w\[\"summary\"\]{width:"summary";}
.flex,
.group:hover .group-hover\:flex{display:flex;}
.inline-flex{display:inline-flex;}
.flex-1{flex:1 1 0%;}
.shrink-0{flex-shrink:0;}
.grow{flex-grow:1;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.table{display:table;}
.border-separate{border-collapse:separate;}
.border-spacing-0{--un-border-spacing-x:0;--un-border-spacing-y:0;border-spacing:var(--un-border-spacing-x) var(--un-border-spacing-y);}
.table-fixed{table-layout:fixed;}
.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.cursor-pointer{cursor:pointer;}
.cursor-grab{cursor:grab;}
.cursor-col-resize{cursor:col-resize;}
.select-none{-webkit-user-select:none;user-select:none;}
.resize{resize:both;}
.list-none{list-style-type:none;}
.place-items-center{place-items:center;}
.content-start{align-content:flex-start;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
.items-center{align-items:center;}
.items-baseline{align-items:baseline;}
.self-center{align-self:center;}
.justify-end{justify-content:flex-end;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.justify-items-center{justify-items:center;}
.justify-self-start{justify-self:start;}
.justify-self-end{justify-self:end;}
.gap-0\.5{gap:0.125rem;}
.gap-1{gap:0.25rem;}
.gap-1\.5{gap:0.375rem;}
.gap-2{gap:0.5rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
.gap-x-3{column-gap:0.75rem;}
.gap-y-1{row-gap:0.25rem;}
.\!overflow-visible{overflow:visible !important;}
.overflow-auto{overflow:auto;}
.overflow-hidden{overflow:hidden;}
.overflow-visible{overflow:visible;}
.overflow-x-auto{overflow-x:auto;}
.overflow-y-auto{overflow-y:auto;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.whitespace-nowrap{white-space:nowrap;}
.whitespace-pre-line{white-space:pre-line;}
.whitespace-pre-wrap{white-space:pre-wrap;}
.b,
.border{border-width:1px;}
.border-0{border-width:0px;}
.border-b{border-bottom-width:1px;}
.border-b-2{border-bottom-width:2px;}
.border-l{border-left-width:1px;}
.border-l-4{border-left-width:4px;}
.border-r{border-right-width:1px;}
.border-t{border-top-width:1px;}
.border-transparent{border-color:transparent;}
.border-ui-border{border-color:var(--border);}
.border-ui-primary,
.peer:checked~.peer-checked\:border-ui-primary{border-color:var(--primary);}
.hover\:border-ui-primary:hover{border-color:var(--primary);}
.border-l-blue-400{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(96 165 250 / var(--un-border-left-opacity));}
.border-l-cyan-400{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(34 211 238 / var(--un-border-left-opacity));}
.border-l-gray-400{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(156 163 175 / var(--un-border-left-opacity));}
.border-l-green-400{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(74 222 128 / var(--un-border-left-opacity));}
.border-l-pink-400{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(244 114 182 / var(--un-border-left-opacity));}
.border-l-purple-400{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(192 132 252 / var(--un-border-left-opacity));}
.border-l-red-400{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(248 113 113 / var(--un-border-left-opacity));}
.border-l-yellow-400{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(250 204 21 / var(--un-border-left-opacity));}
.rounded,
.rounded-md{border-radius:var(--radius-md);}
.rounded-full{border-radius:var(--radius-full);}
.rounded-lg{border-radius:var(--radius-lg);}
.rounded-sm{border-radius:var(--radius-sm);}
.rounded-xl{border-radius:var(--radius-xl);}
.rounded-b-lg{border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);}
.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);}
.border-dashed{border-style:dashed;}
.border-solid{border-style:solid;}
.bg-black\/50{background-color:rgb(0 0 0 / 0.5) /* #000 */;}
.bg-blue-500\/20{background-color:rgb(59 130 246 / 0.2) /* #3b82f6 */;}
.bg-cyan-500\/20{background-color:rgb(6 182 212 / 0.2) /* #06b6d4 */;}
.bg-gray-500\/20{background-color:rgb(107 114 128 / 0.2) /* #6b7280 */;}
.bg-green-500\/20{background-color:rgb(34 197 94 / 0.2) /* #22c55e */;}
.bg-pink-500\/20{background-color:rgb(236 72 153 / 0.2) /* #ec4899 */;}
.bg-purple-500\/20{background-color:rgb(168 85 247 / 0.2) /* #a855f7 */;}
.bg-red-500\/20{background-color:rgb(239 68 68 / 0.2) /* #ef4444 */;}
.bg-transparent{background-color:transparent /* transparent */;}
.bg-ui-danger{background-color:var(--danger) /* var(--danger) */;}
.bg-ui-dangerSoft{background-color:var(--danger-soft) /* var(--danger-soft) */;}
.bg-ui-overlay{background-color:var(--surface-overlay) /* var(--surface-overlay) */;}
.bg-ui-primary{background-color:var(--primary) /* var(--primary) */;}
.bg-ui-primarySoft,
.bg-ui-primarySoft\/40,
.peer:checked~.peer-checked\:bg-ui-primarySoft{background-color:var(--primary-soft) /* var(--primary-soft) */;}
.bg-ui-raised,
.group:hover .group-hover\:bg-ui-raised{background-color:var(--surface-raised) /* var(--surface-raised) */;}
.bg-ui-surface{background-color:var(--surface) /* var(--surface) */;}
.bg-yellow-500\/20{background-color:rgb(234 179 8 / 0.2) /* #eab308 */;}
.focus-within\:bg-ui-overlay:focus-within{background-color:var(--surface-overlay) /* var(--surface-overlay) */;}
.hover\:bg-ui-overlay:hover{background-color:var(--surface-overlay) /* var(--surface-overlay) */;}
.hover\:bg-ui-overlay\/40:hover{background-color:var(--surface-overlay) /* var(--surface-overlay) */;}
.hover\:bg-ui-primary:hover{background-color:var(--primary) /* var(--primary) */;}
.hover\:bg-ui-raised:hover{background-color:var(--surface-raised) /* var(--surface-raised) */;}
.\!p-0{padding:0 !important;}
.\!p-0\.5{padding:0.125rem !important;}
.\!p-1{padding:0.25rem !important;}
.\!p-6{padding:1.5rem !important;}
.p-0{padding:0;}
.p-0\.5{padding:0.125rem;}
.p-1{padding:0.25rem;}
.p-2{padding:0.5rem;}
.p-3{padding:0.75rem;}
.p-4{padding:1rem;}
.p-5{padding:1.25rem;}
.p-6{padding:1.5rem;}
.p\[\'message\'\]{padding:'message';}
.p\[\'node\'\]{padding:'node';}
.p\[\"active\"\]{padding:"active";}
.p\[\"customer_nl\"\]{padding:"customer nl";}
.p\[\"icon\"\]{padding:"icon";}
.p\[\"key\"\]{padding:"key";}
.p\[\"message\"\]{padding:"message";}
.p\[\"name_nl\"\]{padding:"name nl";}
.p\[\"Name\"\]{padding:"Name";}
.p\[\"node\"\]{padding:"node";}
.p\[\"title\"\]{padding:"title";}
.p\[\"url\"\]{padding:"url";}
.\!px-2{padding-left:0.5rem !important;padding-right:0.5rem !important;}
.px,
.px-4{padding-left:1rem;padding-right:1rem;}
.px-1{padding-left:0.25rem;padding-right:0.25rem;}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}
.px-2{padding-left:0.5rem;padding-right:0.5rem;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.pb-1{padding-bottom:0.25rem;}
.pb-1\.5{padding-bottom:0.375rem;}
.pb-2{padding-bottom:0.5rem;}
.pb-4{padding-bottom:1rem;}
.pl,
.pl-4{padding-left:1rem;}
.pt-1{padding-top:0.25rem;}
.pt-2{padding-top:0.5rem;}
.pt-2\.5{padding-top:0.625rem;}
.pt-3{padding-top:0.75rem;}
.pie{padding-inline-end:1rem;}
.\!text-center{text-align:center !important;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.align-top{vertical-align:top;}
.\!text-base{font-size:var(--text-base) !important;line-height:1.5 !important;}
.\!text-sm{font-size:var(--text-sm) !important;line-height:1.5 !important;}
.text-2xl{font-size:var(--text-2xl);line-height:1.3;}
.text-base{font-size:var(--text-base);line-height:1.5;}
.text-lg{font-size:var(--text-lg);line-height:1.4;}
.text-sm{font-size:var(--text-sm);line-height:1.5;}
.text-xl{font-size:var(--text-xl);line-height:1.35;}
.text-xs,
.text-xs\/sm\/base\,{font-size:var(--text-xs);line-height:1.5;}
.\!text-ui-muted{color:var(--text-secondary) /* var(--text-secondary) */ !important;}
.text-blue-400{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity)) /* #60a5fa */;}
.text-cyan-400{--un-text-opacity:1;color:rgb(34 211 238 / var(--un-text-opacity)) /* #22d3ee */;}
.text-gray-400{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity)) /* #9ca3af */;}
.text-green-400{--un-text-opacity:1;color:rgb(74 222 128 / var(--un-text-opacity)) /* #4ade80 */;}
.text-pink-400{--un-text-opacity:1;color:rgb(244 114 182 / var(--un-text-opacity)) /* #f472b6 */;}
.text-purple-400{--un-text-opacity:1;color:rgb(192 132 252 / var(--un-text-opacity)) /* #c084fc */;}
.text-red-400{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity)) /* #f87171 */;}
.text-ui-danger{color:var(--danger) /* var(--danger) */;}
.text-ui-muted{color:var(--text-secondary) /* var(--text-secondary) */;}
.text-ui-primary,
.peer:checked~.peer-checked\:text-ui-primary,
.group:hover .group-hover\:text-ui-primary{color:var(--primary) /* var(--primary) */;}
.text-ui-success{color:var(--success) /* var(--success) */;}
.text-ui-text{color:var(--text) /* var(--text) */;}
.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
.text-yellow-400{--un-text-opacity:1;color:rgb(250 204 21 / var(--un-text-opacity)) /* #facc15 */;}
.focus-within\:text-ui-text:focus-within{color:var(--text) /* var(--text) */;}
.hover\:text-ui-danger:hover{color:var(--danger) /* var(--danger) */;}
.hover\:text-ui-primary:hover{color:var(--primary) /* var(--primary) */;}
.hover\:text-ui-text:hover{color:var(--text) /* var(--text) */;}
.font-medium{font-weight:500;}
.font-normal{font-weight:400;}
.font-semibold{font-weight:600;}
.leading-snug{line-height:1.375;}
.tracking-normal{letter-spacing:0em;}
.tracking-wider{letter-spacing:0.05em;}
.font-mono{font-family:"Cascadia Code", "Fira Code", Consolas, monospace;}
.uppercase{text-transform:uppercase;}
.normal-case{text-transform:none;}
.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}
.line-through{text-decoration-line:line-through;}
.no-underline{text-decoration:none;}
.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
.opacity-0{opacity:0;}
.opacity-60{opacity:0.6;}
.opacity-70{opacity:0.7;}
.group:hover .group-hover\:opacity-100{opacity:1;}
.shadow-2xl{--un-shadow:var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-md{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.outline-2,
.peer:focus-visible~.peer-focus-visible\:outline-2{outline-width:2px;}
.outline-ui-danger{outline-color:var(--danger) /* var(--danger) */;}
.outline-ui-primary,
.peer:focus-visible~.peer-focus-visible\:outline-ui-primary{outline-color:var(--primary) /* var(--primary) */;}
.-outline-offset-2{outline-offset:-2px;}
.outline,
.peer:focus-visible~.peer-focus-visible\:outline{outline-style:solid;}
.outline-none{outline:2px solid transparent;outline-offset:2px;}
.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
@media (min-width: 640px){
.sm\:col-span-2{grid-column:span 2/span 2;}
.sm\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto;}
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width: 768px){
.md\:grid{display:grid;}
.md\:grid-cols-\[16rem_1fr\]{grid-template-columns:16rem 1fr;}
.md\:\!w-72{width:18rem !important;}
.md\:\!w-96{width:24rem !important;}
}
@media (min-width: 1024px){
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.lg\:flex{display:flex;}
}