/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: rgba(0, 0, 0, 0);
      --tw-gradient-via: rgba(0, 0, 0, 0);
      --tw-gradient-to: rgba(0, 0, 0, 0);
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --border-gradient-angle: 0deg;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }

    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: rgba(0, 0, 0, 0);
      --tw-gradient-via: rgba(0, 0, 0, 0);
      --tw-gradient-to: rgba(0, 0, 0, 0);
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --border-gradient-angle: 0deg;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root {
    --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    --color-red-50: #fef2f2;
    --color-red-200: #ffcaca;
    --color-red-400: #ff6568;
    --color-red-500: #fb2c36;
    --color-red-600: #e40014;
    --color-red-800: #9f0712;
    --color-red-900: #82181a;
    --color-amber-50: #fffbeb;
    --color-amber-200: #fee685;
    --color-amber-300: #ffd236;
    --color-amber-400: #fcbb00;
    --color-amber-500: #f99c00;
    --color-amber-600: #dd7400;
    --color-amber-700: #b75000;
    --color-amber-800: #953d00;
    --color-amber-900: #7b3306;
    --color-green-400: #05df72;
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d0fae5;
    --color-emerald-200: #a4f4cf;
    --color-emerald-300: #5ee9b5;
    --color-emerald-400: #00d294;
    --color-emerald-500: #00bb7f;
    --color-emerald-600: #009767;
    --color-emerald-700: #007956;
    --color-emerald-800: #005f46;
    --color-emerald-900: #004e3b;
    --color-blue-50: #eff6ff;
    --color-blue-200: #bedbff;
    --color-blue-300: #90c5ff;
    --color-blue-400: #54a2ff;
    --color-blue-500: #3080ff;
    --color-blue-700: #1447e6;
    --color-blue-800: #193cb8;
    --color-blue-900: #1c398e;
    --color-indigo-400: #7d87ff;
    --color-indigo-500: #625fff;
    --color-indigo-600: #4f39f6;
    --color-purple-600: #9810fa;
    --color-rose-50: #fff1f2;
    --color-rose-200: #ffccd3;
    --color-rose-700: #c20039;
    --color-rose-900: #8b0836;
    --color-rose-950: #4d0218;
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cad5e2;
    --color-slate-400: #90a1b9;
    --color-slate-500: #62748e;
    --color-slate-600: #45556c;
    --color-slate-700: #314158;
    --color-slate-800: #1d293d;
    --color-slate-900: #0f172b;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #9f9fa9;
    --color-zinc-500: #71717b;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;
    --color-zinc-950: #09090b;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a1a1a1;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    --color-neutral-950: #0a0a0a;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-4xl: 56rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --ease-out: cubic-bezier(.25, 0, 0, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-display: "ClashDisplay", -apple-system, BlinkMacSystemFont, sans-serif;
    --color-moon-50: #fafafa;
    --color-moon-100: #f4f4f5;
    --color-moon-200: #e4e4e7;
    --color-moon-300: #d4d4d8;
    --color-moon-400: #9f9fa9;
    --color-moon-500: #71717b;
    --color-moon-600: #52525c;
    --color-moon-700: #3f3f46;
    --color-moon-800: #27272a;
    --color-moon-900: #18181b;
    --color-main-50: #fafafa;
    --color-main-100: #f4f4f5;
    --color-main-200: #e4e4e7;
    --color-main-300: #d4d4d8;
    --color-main-400: #9f9fa9;
    --color-main-500: #71717b;
    --color-main-600: #52525c;
    --color-main-700: #3f3f46;
    --color-main-800: #27272a;
    --color-main-850: #1d1d21;
    --color-main-900: #18181b;
    --color-main-950: #09090b;
    --color-accent-300: #a4b3ff;
    --color-accent-400: #7d87ff;
    --color-accent-500: #625fff;
    --color-accent-600: #4f39f6;
    --color-accent-700: #432dd7;
    --color-accent-800: #372aac;
    --color-accent-900: #312c85;
    --color-accent-950: #1e1a4d;
    --color-danger-50: #fef2f2;
    --color-danger-100: #ffe2e2;
    --color-danger-400: #ff6568;
    --color-danger-500: #fb2c36;
    --color-danger-700: #bf000f;
    --color-danger-800: #9f0712;
    --color-danger-900: #82181a;
    --color-warning-100: #fef3c6;
    --color-warning-400: #fcbb00;
    --color-warning-500: #f99c00;
    --color-warning-700: #b75000;
    --color-warning-800: #953d00;
    --color-complement-50: #f0fdfa;
    --color-complement-100: #cbfbf1;
    --color-complement-300: #46ecd5;
    --color-complement-400: #00d3bd;
    --color-complement-500: #00baa7;
    --color-complement-600: #009588;
    --color-complement-700: #00776e;
    --color-tertiary-300: #53eafd;
    --color-success: #00bb7f;
    --ease-circ: cubic-bezier(.85, .09, .15, .91);
    --ease-spring: linear(0, .03 1.5%, .121 3.2%, .851 13%, .99 16.4%, 1.063 20.2%, 1.076 22.3%, 1.075 24.8%, 1.013 35.9%, .995 43.4%, 1);
    --shadow-window: 0 0 7px 0 rgba(0, 0, 0, .05), 0 0 14px 0 rgba(0, 0, 0, .1), 0 0 21px 0 rgba(0, 0, 0, .15);
    --shadow-glow: 0 0 20px -5px rgba(250, 250, 250, .3);
    --shadow-glow-lg: 0 0 40px -5px rgba(250, 250, 250, .5);
    --shadow-card: 0 4px 32px -4px rgba(250, 250, 250, .15);
    --shadow-card-hover: 0 8px 40px -8px rgba(250, 250, 250, .25);
    --animate-fade-in: fade-in .3s var(--ease-circ) forwards;
  }

  @supports (color: lab(0% 0 0)) {
    :root {
      --color-red-50: lab(96.5005% 4.18508 1.52328);
      --color-red-200: lab(86.017% 19.8815 7.75869);
      --color-red-400: lab(63.7053% 60.745 31.3109);
      --color-red-500: lab(55.4814% 75.0732 48.8528);
      --color-red-600: lab(48.4493% 77.4328 61.5452);
      --color-red-800: lab(33.7174% 55.8993 41.0293);
      --color-red-900: lab(28.5139% 44.5539 29.0463);
      --color-amber-50: lab(98.6252% -.635922 8.42309);
      --color-amber-200: lab(91.7203% -.505269 49.9084);
      --color-amber-300: lab(86.4156% 6.13147 78.3961);
      --color-amber-400: lab(80.1641% 16.6016 99.2089);
      --color-amber-500: lab(72.7183% 31.8672 97.9407);
      --color-amber-600: lab(60.3514% 40.5624 87.1228);
      --color-amber-700: lab(47.2709% 42.9082 69.2966);
      --color-amber-800: lab(37.8822% 37.1699 52.2718);
      --color-amber-900: lab(31.2288% 30.2627 40.0378);
      --color-green-400: lab(78.503% -64.9265 39.7492);
      --color-emerald-50: lab(97.8462% -6.94966 1.85487);
      --color-emerald-100: lab(94.9004% -17.0769 5.63836);
      --color-emerald-200: lab(90.2247% -31.039 9.47084);
      --color-emerald-300: lab(83.9203% -48.7124 13.8849);
      --color-emerald-400: lab(75.0771% -60.7313 19.4147);
      --color-emerald-500: lab(66.9756% -58.27 19.5419);
      --color-emerald-600: lab(55.0481% -49.9246 15.93);
      --color-emerald-700: lab(44.4871% -41.0396 11.0361);
      --color-emerald-800: lab(35.3675% -33.1188 8.04002);
      --color-emerald-900: lab(28.8637% -26.9249 5.45986);
      --color-blue-50: lab(96.492% -1.14644 -5.11479);
      --color-blue-200: lab(86.15% -4.04379 -21.0797);
      --color-blue-300: lab(77.5052% -6.4629 -36.42);
      --color-blue-400: lab(65.0361% -1.42065 -56.9802);
      --color-blue-500: lab(54.1736% 13.3369 -74.6839);
      --color-blue-700: lab(36.9089% 35.0961 -85.6872);
      --color-blue-800: lab(30.2514% 27.7853 -70.2699);
      --color-blue-900: lab(26.1542% 15.7545 -51.5504);
      --color-indigo-400: lab(59.866% 22.4834 -64.4485);
      --color-indigo-500: lab(48.295% 38.3129 -81.9673);
      --color-indigo-600: lab(38.4009% 52.6132 -92.3857);
      --color-purple-600: lab(43.0295% 75.21 -86.5669);
      --color-rose-50: lab(96.2369% 4.94155 1.28011);
      --color-rose-200: lab(86.806% 19.1909 4.07754);
      --color-rose-700: lab(41.1651% 71.6251 30.3087);
      --color-rose-900: lab(29.7104% 51.514 12.6253);
      --color-rose-950: lab(14.2323% 34.0086 9.80922);
      --color-slate-50: lab(98.1434% -.369519 -1.05966);
      --color-slate-100: lab(96.286% -.852436 -2.46847);
      --color-slate-200: lab(91.7353% -.998765 -4.76968);
      --color-slate-300: lab(84.7652% -1.94535 -7.93337);
      --color-slate-400: lab(65.5349% -2.25151 -14.5072);
      --color-slate-500: lab(48.0876% -2.03595 -16.5814);
      --color-slate-600: lab(35.5623% -1.74978 -15.4316);
      --color-slate-700: lab(26.9569% -1.47016 -15.6993);
      --color-slate-800: lab(16.132% -.318035 -14.6672);
      --color-slate-900: lab(7.78673% 1.82345 -15.0537);
      --color-zinc-100: lab(96.1634% .0993311 -.364041);
      --color-zinc-200: lab(90.6853% .399232 -1.45452);
      --color-zinc-300: lab(84.9837% .601262 -2.17986);
      --color-zinc-400: lab(65.6464% 1.53497 -5.42429);
      --color-zinc-500: lab(47.8878% 1.65477 -5.77283);
      --color-zinc-800: lab(15.7305% .613764 -2.16959);
      --color-zinc-900: lab(8.30603% .618205 -2.16572);
      --color-zinc-950: lab(2.51107% .242703 -.886115);
      --color-neutral-100: lab(96.52% -.0000298023 .0000119209);
      --color-neutral-200: lab(90.952% 0 -.0000119209);
      --color-neutral-300: lab(84.92% 0 -.0000119209);
      --color-neutral-400: lab(66.128% -.0000298023 .0000119209);
      --color-neutral-500: lab(48.496% 0 0);
      --color-neutral-600: lab(34.924% 0 0);
      --color-neutral-700: lab(27.036% 0 0);
      --color-neutral-800: lab(15.204% 0 -.00000596046);
      --color-neutral-900: lab(7.78201% -.0000149012 0);
      --color-neutral-950: lab(2.75381% 0 0);
      --color-moon-50: lab(98.26% 0 0);
      --color-moon-100: lab(96.1634% .0993311 -.364041);
      --color-moon-200: lab(90.6853% .399232 -1.45452);
      --color-moon-300: lab(84.9837% .601262 -2.17986);
      --color-moon-400: lab(65.6464% 1.53497 -5.42429);
      --color-moon-500: lab(47.8878% 1.65477 -5.77283);
      --color-moon-600: lab(35.1166% 1.78212 -6.1173);
      --color-moon-700: lab(26.8019% 1.35387 -4.68303);
      --color-moon-800: lab(15.7305% .613764 -2.16959);
      --color-moon-900: lab(8.30603% .618205 -2.16572);
      --color-main-50: lab(98.26% 0 0);
      --color-main-100: lab(96.1634% .0993311 -.364041);
      --color-main-200: lab(90.6853% .399232 -1.45452);
      --color-main-300: lab(84.9837% .601262 -2.17986);
      --color-main-400: lab(65.6464% 1.53497 -5.42429);
      --color-main-500: lab(47.8878% 1.65477 -5.77283);
      --color-main-600: lab(35.1166% 1.78212 -6.1173);
      --color-main-700: lab(26.8019% 1.35387 -4.68303);
      --color-main-800: lab(15.7305% .613764 -2.16959);
      --color-main-850: lab(11.0902% .618972 -2.16648);
      --color-main-900: lab(8.30603% .618205 -2.16572);
      --color-main-950: lab(2.51107% .242703 -.886115);
      --color-accent-300: lab(74.0235% 8.54138 -41.6075);
      --color-accent-400: lab(59.866% 22.4834 -64.4485);
      --color-accent-500: lab(48.295% 38.3129 -81.9673);
      --color-accent-600: lab(38.4009% 52.6132 -92.3857);
      --color-accent-700: lab(32.4486% 49.2217 -84.6695);
      --color-accent-800: lab(26.6645% 37.9804 -68.6402);
      --color-accent-900: lab(23.3911% 24.6978 -50.4718);
      --color-accent-950: lab(12.4853% 14.9672 -31.3418);
      --color-danger-50: lab(96.5005% 4.18508 1.52328);
      --color-danger-100: lab(92.243% 10.2865 3.83865);
      --color-danger-400: lab(63.7053% 60.745 31.3109);
      --color-danger-500: lab(55.4814% 75.0732 48.8528);
      --color-danger-700: lab(40.4273% 67.2623 53.7441);
      --color-danger-800: lab(33.7174% 55.8993 41.0293);
      --color-danger-900: lab(28.5139% 44.5539 29.0463);
      --color-warning-100: lab(95.916% -1.21653 23.111);
      --color-warning-400: lab(80.1641% 16.6016 99.2089);
      --color-warning-500: lab(72.7183% 31.8672 97.9407);
      --color-warning-700: lab(47.2709% 42.9082 69.2966);
      --color-warning-800: lab(37.8822% 37.1699 52.2718);
      --color-complement-50: lab(98.3189% -4.74921 -.111711);
      --color-complement-100: lab(95.1845% -17.4212 -.425422);
      --color-complement-300: lab(84.8977% -48.1516 -1.3321);
      --color-complement-400: lab(76.0109% -53.3483 -2.27906);
      --color-complement-500: lab(67.3859% -49.0983 -2.63511);
      --color-complement-600: lab(55.0223% -41.0774 -3.90277);
      --color-complement-700: lab(44.4134% -33.1436 -4.22149);
      --color-tertiary-300: lab(85.3886% -36.7636 -21.5716);
      --color-success: lab(66.9756% -58.27 19.5419);
      --shadow-glow: 0 0 20px -5px lab(98.26% 0 0 / .3);
      --shadow-glow-lg: 0 0 40px -5px lab(98.26% 0 0 / .5);
      --shadow-card: 0 4px 32px -4px lab(98.26% 0 0 / .15);
      --shadow-card-hover: 0 8px 40px -8px lab(98.26% 0 0 / .25);
    }
  }

  :host {
    --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    --color-red-50: #fef2f2;
    --color-red-200: #ffcaca;
    --color-red-400: #ff6568;
    --color-red-500: #fb2c36;
    --color-red-600: #e40014;
    --color-red-800: #9f0712;
    --color-red-900: #82181a;
    --color-amber-50: #fffbeb;
    --color-amber-200: #fee685;
    --color-amber-300: #ffd236;
    --color-amber-400: #fcbb00;
    --color-amber-500: #f99c00;
    --color-amber-600: #dd7400;
    --color-amber-700: #b75000;
    --color-amber-800: #953d00;
    --color-amber-900: #7b3306;
    --color-green-400: #05df72;
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d0fae5;
    --color-emerald-200: #a4f4cf;
    --color-emerald-300: #5ee9b5;
    --color-emerald-400: #00d294;
    --color-emerald-500: #00bb7f;
    --color-emerald-600: #009767;
    --color-emerald-700: #007956;
    --color-emerald-800: #005f46;
    --color-emerald-900: #004e3b;
    --color-blue-50: #eff6ff;
    --color-blue-200: #bedbff;
    --color-blue-300: #90c5ff;
    --color-blue-400: #54a2ff;
    --color-blue-500: #3080ff;
    --color-blue-700: #1447e6;
    --color-blue-800: #193cb8;
    --color-blue-900: #1c398e;
    --color-indigo-400: #7d87ff;
    --color-indigo-500: #625fff;
    --color-indigo-600: #4f39f6;
    --color-purple-600: #9810fa;
    --color-rose-50: #fff1f2;
    --color-rose-200: #ffccd3;
    --color-rose-700: #c20039;
    --color-rose-900: #8b0836;
    --color-rose-950: #4d0218;
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cad5e2;
    --color-slate-400: #90a1b9;
    --color-slate-500: #62748e;
    --color-slate-600: #45556c;
    --color-slate-700: #314158;
    --color-slate-800: #1d293d;
    --color-slate-900: #0f172b;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #9f9fa9;
    --color-zinc-500: #71717b;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;
    --color-zinc-950: #09090b;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a1a1a1;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    --color-neutral-950: #0a0a0a;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-4xl: 56rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --ease-out: cubic-bezier(.25, 0, 0, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-display: "ClashDisplay", -apple-system, BlinkMacSystemFont, sans-serif;
    --color-moon-50: #fafafa;
    --color-moon-100: #f4f4f5;
    --color-moon-200: #e4e4e7;
    --color-moon-300: #d4d4d8;
    --color-moon-400: #9f9fa9;
    --color-moon-500: #71717b;
    --color-moon-600: #52525c;
    --color-moon-700: #3f3f46;
    --color-moon-800: #27272a;
    --color-moon-900: #18181b;
    --color-main-50: #fafafa;
    --color-main-100: #f4f4f5;
    --color-main-200: #e4e4e7;
    --color-main-300: #d4d4d8;
    --color-main-400: #9f9fa9;
    --color-main-500: #71717b;
    --color-main-600: #52525c;
    --color-main-700: #3f3f46;
    --color-main-800: #27272a;
    --color-main-850: #1d1d21;
    --color-main-900: #18181b;
    --color-main-950: #09090b;
    --color-accent-300: #a4b3ff;
    --color-accent-400: #7d87ff;
    --color-accent-500: #625fff;
    --color-accent-600: #4f39f6;
    --color-accent-700: #432dd7;
    --color-accent-800: #372aac;
    --color-accent-900: #312c85;
    --color-accent-950: #1e1a4d;
    --color-danger-50: #fef2f2;
    --color-danger-100: #ffe2e2;
    --color-danger-400: #ff6568;
    --color-danger-500: #fb2c36;
    --color-danger-700: #bf000f;
    --color-danger-800: #9f0712;
    --color-danger-900: #82181a;
    --color-warning-100: #fef3c6;
    --color-warning-400: #fcbb00;
    --color-warning-500: #f99c00;
    --color-warning-700: #b75000;
    --color-warning-800: #953d00;
    --color-complement-50: #f0fdfa;
    --color-complement-100: #cbfbf1;
    --color-complement-300: #46ecd5;
    --color-complement-400: #00d3bd;
    --color-complement-500: #00baa7;
    --color-complement-600: #009588;
    --color-complement-700: #00776e;
    --color-tertiary-300: #53eafd;
    --color-success: #00bb7f;
    --ease-circ: cubic-bezier(.85, .09, .15, .91);
    --ease-spring: linear(0, .03 1.5%, .121 3.2%, .851 13%, .99 16.4%, 1.063 20.2%, 1.076 22.3%, 1.075 24.8%, 1.013 35.9%, .995 43.4%, 1);
    --shadow-window: 0 0 7px 0 rgba(0, 0, 0, .05), 0 0 14px 0 rgba(0, 0, 0, .1), 0 0 21px 0 rgba(0, 0, 0, .15);
    --shadow-glow: 0 0 20px -5px rgba(250, 250, 250, .3);
    --shadow-glow-lg: 0 0 40px -5px rgba(250, 250, 250, .5);
    --shadow-card: 0 4px 32px -4px rgba(250, 250, 250, .15);
    --shadow-card-hover: 0 8px 40px -8px rgba(250, 250, 250, .25);
    --animate-fade-in: fade-in .3s var(--ease-circ) forwards;
  }

  @supports (color: lab(0% 0 0)) {
    :host {
      --color-red-50: lab(96.5005% 4.18508 1.52328);
      --color-red-200: lab(86.017% 19.8815 7.75869);
      --color-red-400: lab(63.7053% 60.745 31.3109);
      --color-red-500: lab(55.4814% 75.0732 48.8528);
      --color-red-600: lab(48.4493% 77.4328 61.5452);
      --color-red-800: lab(33.7174% 55.8993 41.0293);
      --color-red-900: lab(28.5139% 44.5539 29.0463);
      --color-amber-50: lab(98.6252% -.635922 8.42309);
      --color-amber-200: lab(91.7203% -.505269 49.9084);
      --color-amber-300: lab(86.4156% 6.13147 78.3961);
      --color-amber-400: lab(80.1641% 16.6016 99.2089);
      --color-amber-500: lab(72.7183% 31.8672 97.9407);
      --color-amber-600: lab(60.3514% 40.5624 87.1228);
      --color-amber-700: lab(47.2709% 42.9082 69.2966);
      --color-amber-800: lab(37.8822% 37.1699 52.2718);
      --color-amber-900: lab(31.2288% 30.2627 40.0378);
      --color-green-400: lab(78.503% -64.9265 39.7492);
      --color-emerald-50: lab(97.8462% -6.94966 1.85487);
      --color-emerald-100: lab(94.9004% -17.0769 5.63836);
      --color-emerald-200: lab(90.2247% -31.039 9.47084);
      --color-emerald-300: lab(83.9203% -48.7124 13.8849);
      --color-emerald-400: lab(75.0771% -60.7313 19.4147);
      --color-emerald-500: lab(66.9756% -58.27 19.5419);
      --color-emerald-600: lab(55.0481% -49.9246 15.93);
      --color-emerald-700: lab(44.4871% -41.0396 11.0361);
      --color-emerald-800: lab(35.3675% -33.1188 8.04002);
      --color-emerald-900: lab(28.8637% -26.9249 5.45986);
      --color-blue-50: lab(96.492% -1.14644 -5.11479);
      --color-blue-200: lab(86.15% -4.04379 -21.0797);
      --color-blue-300: lab(77.5052% -6.4629 -36.42);
      --color-blue-400: lab(65.0361% -1.42065 -56.9802);
      --color-blue-500: lab(54.1736% 13.3369 -74.6839);
      --color-blue-700: lab(36.9089% 35.0961 -85.6872);
      --color-blue-800: lab(30.2514% 27.7853 -70.2699);
      --color-blue-900: lab(26.1542% 15.7545 -51.5504);
      --color-indigo-400: lab(59.866% 22.4834 -64.4485);
      --color-indigo-500: lab(48.295% 38.3129 -81.9673);
      --color-indigo-600: lab(38.4009% 52.6132 -92.3857);
      --color-purple-600: lab(43.0295% 75.21 -86.5669);
      --color-rose-50: lab(96.2369% 4.94155 1.28011);
      --color-rose-200: lab(86.806% 19.1909 4.07754);
      --color-rose-700: lab(41.1651% 71.6251 30.3087);
      --color-rose-900: lab(29.7104% 51.514 12.6253);
      --color-rose-950: lab(14.2323% 34.0086 9.80922);
      --color-slate-50: lab(98.1434% -.369519 -1.05966);
      --color-slate-100: lab(96.286% -.852436 -2.46847);
      --color-slate-200: lab(91.7353% -.998765 -4.76968);
      --color-slate-300: lab(84.7652% -1.94535 -7.93337);
      --color-slate-400: lab(65.5349% -2.25151 -14.5072);
      --color-slate-500: lab(48.0876% -2.03595 -16.5814);
      --color-slate-600: lab(35.5623% -1.74978 -15.4316);
      --color-slate-700: lab(26.9569% -1.47016 -15.6993);
      --color-slate-800: lab(16.132% -.318035 -14.6672);
      --color-slate-900: lab(7.78673% 1.82345 -15.0537);
      --color-zinc-100: lab(96.1634% .0993311 -.364041);
      --color-zinc-200: lab(90.6853% .399232 -1.45452);
      --color-zinc-300: lab(84.9837% .601262 -2.17986);
      --color-zinc-400: lab(65.6464% 1.53497 -5.42429);
      --color-zinc-500: lab(47.8878% 1.65477 -5.77283);
      --color-zinc-800: lab(15.7305% .613764 -2.16959);
      --color-zinc-900: lab(8.30603% .618205 -2.16572);
      --color-zinc-950: lab(2.51107% .242703 -.886115);
      --color-neutral-100: lab(96.52% -.0000298023 .0000119209);
      --color-neutral-200: lab(90.952% 0 -.0000119209);
      --color-neutral-300: lab(84.92% 0 -.0000119209);
      --color-neutral-400: lab(66.128% -.0000298023 .0000119209);
      --color-neutral-500: lab(48.496% 0 0);
      --color-neutral-600: lab(34.924% 0 0);
      --color-neutral-700: lab(27.036% 0 0);
      --color-neutral-800: lab(15.204% 0 -.00000596046);
      --color-neutral-900: lab(7.78201% -.0000149012 0);
      --color-neutral-950: lab(2.75381% 0 0);
      --color-moon-50: lab(98.26% 0 0);
      --color-moon-100: lab(96.1634% .0993311 -.364041);
      --color-moon-200: lab(90.6853% .399232 -1.45452);
      --color-moon-300: lab(84.9837% .601262 -2.17986);
      --color-moon-400: lab(65.6464% 1.53497 -5.42429);
      --color-moon-500: lab(47.8878% 1.65477 -5.77283);
      --color-moon-600: lab(35.1166% 1.78212 -6.1173);
      --color-moon-700: lab(26.8019% 1.35387 -4.68303);
      --color-moon-800: lab(15.7305% .613764 -2.16959);
      --color-moon-900: lab(8.30603% .618205 -2.16572);
      --color-main-50: lab(98.26% 0 0);
      --color-main-100: lab(96.1634% .0993311 -.364041);
      --color-main-200: lab(90.6853% .399232 -1.45452);
      --color-main-300: lab(84.9837% .601262 -2.17986);
      --color-main-400: lab(65.6464% 1.53497 -5.42429);
      --color-main-500: lab(47.8878% 1.65477 -5.77283);
      --color-main-600: lab(35.1166% 1.78212 -6.1173);
      --color-main-700: lab(26.8019% 1.35387 -4.68303);
      --color-main-800: lab(15.7305% .613764 -2.16959);
      --color-main-850: lab(11.0902% .618972 -2.16648);
      --color-main-900: lab(8.30603% .618205 -2.16572);
      --color-main-950: lab(2.51107% .242703 -.886115);
      --color-accent-300: lab(74.0235% 8.54138 -41.6075);
      --color-accent-400: lab(59.866% 22.4834 -64.4485);
      --color-accent-500: lab(48.295% 38.3129 -81.9673);
      --color-accent-600: lab(38.4009% 52.6132 -92.3857);
      --color-accent-700: lab(32.4486% 49.2217 -84.6695);
      --color-accent-800: lab(26.6645% 37.9804 -68.6402);
      --color-accent-900: lab(23.3911% 24.6978 -50.4718);
      --color-accent-950: lab(12.4853% 14.9672 -31.3418);
      --color-danger-50: lab(96.5005% 4.18508 1.52328);
      --color-danger-100: lab(92.243% 10.2865 3.83865);
      --color-danger-400: lab(63.7053% 60.745 31.3109);
      --color-danger-500: lab(55.4814% 75.0732 48.8528);
      --color-danger-700: lab(40.4273% 67.2623 53.7441);
      --color-danger-800: lab(33.7174% 55.8993 41.0293);
      --color-danger-900: lab(28.5139% 44.5539 29.0463);
      --color-warning-100: lab(95.916% -1.21653 23.111);
      --color-warning-400: lab(80.1641% 16.6016 99.2089);
      --color-warning-500: lab(72.7183% 31.8672 97.9407);
      --color-warning-700: lab(47.2709% 42.9082 69.2966);
      --color-warning-800: lab(37.8822% 37.1699 52.2718);
      --color-complement-50: lab(98.3189% -4.74921 -.111711);
      --color-complement-100: lab(95.1845% -17.4212 -.425422);
      --color-complement-300: lab(84.8977% -48.1516 -1.3321);
      --color-complement-400: lab(76.0109% -53.3483 -2.27906);
      --color-complement-500: lab(67.3859% -49.0983 -2.63511);
      --color-complement-600: lab(55.0223% -41.0774 -3.90277);
      --color-complement-700: lab(44.4134% -33.1436 -4.22149);
      --color-tertiary-300: lab(85.3886% -36.7636 -21.5716);
      --color-success: lab(66.9756% -58.27 19.5419);
      --shadow-glow: 0 0 20px -5px lab(98.26% 0 0 / .3);
      --shadow-glow-lg: 0 0 40px -5px lab(98.26% 0 0 / .5);
      --shadow-card: 0 4px 32px -4px lab(98.26% 0 0 / .15);
      --shadow-card-hover: 0 8px 40px -8px lab(98.26% 0 0 / .25);
    }
  }
}

@layer base {
  *, :after, :before {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button {
    appearance: button;
  }

  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  :root {
    interpolate-size: allow-keywords;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.6;
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-moon-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #000;
    min-height: 100vh;
  }

  body:has(dialog[open]) {
    overflow: hidden;
  }

  a {
    color: var(--color-moon-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    text-decoration-line: none;
    transition-duration: .15s;
  }

  a:hover {
    color: var(--color-moon-400);
  }

  button {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-outline-style: none;
    outline-style: none;
    display: flex;
  }

  strong {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  dialog {
    margin: calc(var(--spacing) * 0);
    padding: calc(var(--spacing) * 0);
  }

  dialog:focus {
    outline: none;
  }

  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right .75rem center;
    background-size: 16px 12px;
    appearance: none !important;
    background-repeat: no-repeat !important;
    padding-inline-end: calc(var(--spacing) * 8) !important;
  }

  :is(input, textarea)[readonly] {
    cursor: not-allowed;
    background-color: var(--color-main-850) !important;
  }

  :is(input, textarea):-webkit-autofill {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  :is(input, textarea):-webkit-autofill:hover {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  :is(input, textarea):-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  :is(input, textarea):-webkit-autofill:active {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  :is(input, textarea)[type="password"]:-webkit-autofill {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  :is(input, textarea)[type="password"]:-webkit-autofill:hover {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  :is(input, textarea)[type="password"]:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  :is(input, textarea)[type="password"]:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  .password-input-wrapper input:-webkit-autofill {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  .password-input-wrapper input:-webkit-autofill:hover {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  .password-input-wrapper input:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  .password-input-wrapper input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out;
    -webkit-box-shadow: 0 0 0 30px var(--color-main-800) inset !important;
    -webkit-text-fill-color: var(--color-moon-100) !important;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
}

@layer components {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    --color-primary: var(--color-moon-500);
    --color-primary-hover: var(--color-moon-400);
    --color-accent: #f5d96e;
    --color-accent-hover: #fce58e;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-blue: #6366f1;
    --color-purple: #a855f7;
    --color-emerald: #10b981;
    --color-orange: #f97316;
    --color-amber: #fbbf24;
    --color-cyan: #06b6d4;
    --color-rose: #f43f5e;
    --color-agent-highlight: #f97316;
    --ide-bg: #18181b;
    --ide-sidebar-bg: #09090b;
    --ide-border: #3f3f46;
    --ide-text: #d4d4d8;
    --ide-text-muted: #71717a;
    --ide-active-bg: #27272a;
    --ide-hover-bg: rgba(39, 39, 42, .5);
    --ide-accent: #4b70f5;
    --bg-primary: #000;
    --bg-gradient-start: #0f172a;
    --bg-gradient-end: #000;
    --bg-card: rgba(255, 255, 255, .03);
    --bg-card-hover: rgba(255, 255, 255, .05);
    --text-primary: var(--color-moon-50);
    --text-secondary: var(--color-moon-300);
    --text-muted: var(--color-moon-400);
    --border-color: rgba(255, 255, 255, .1);
    --border-color-hover: rgba(255, 255, 255, .2);
    --border-radius: .5rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    --spacing-xs: .25rem;
    --spacing-sm: .5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --shadow-glow: 0 0 20px -5px rgba(197, 163, 255, .3);
    --shadow-glow-lg: 0 0 40px -5px rgba(197, 163, 255, .5);
    --shadow-card: 0 4px 32px -4px rgba(197, 163, 255, .15);
    --shadow-card-hover: 0 8px 40px -8px rgba(197, 163, 255, .25);
    --font-display: "ClashDisplay", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    --transition-fast: .15s ease;
    --transition-normal: .3s ease;
    --transition-slow: .5s ease;
    --circle-color: #8b5cf6;
    --circle-color-rgb: 139, 92, 246;
    --glass-bg-neutral: linear-gradient(135deg, rgba(250, 250, 250, .06) 0%, rgba(250, 250, 250, .03) 50%, rgba(250, 250, 250, .02) 100%);
    --glass-bg-purple: linear-gradient(135deg, rgba(197, 163, 255, .06) 0%, rgba(197, 163, 255, .03) 50%, rgba(239, 230, 255, .02) 100%);
    --glass-bg: var(--glass-bg-neutral);
    --glass-border: rgba(197, 163, 255, .12);
    --glass-shadow: 0 4px 32px -4px rgba(197, 163, 255, .15), inset 0 1px 0 0 rgba(239, 230, 255, .08);
    --color-main-200: #e3e3ef;
    --color-main-300: #d3d3df;
    --color-main-400: #9f9faa;
    --color-main-500: #71717b;
    --color-main-600: #52525c;
    --color-main-700: #3f3f48;
    --color-main-800: #26262f;
    --color-accent-500: #5952f9;
    --color-accent-600: #4e40e8;
    --color-accent-700: #432dd7;
    --color-accent-800: #380cc4;
    --color-complement-600: #009683;
    --color-complement-700: #007665;
    --easing-circ: cubic-bezier(.85, .09, .15, .91);
    --easing-spring: cubic-bezier(.34, 1.56, .64, 1);
    --easing-out: cubic-bezier(.25, 0, 0, 1);
  }

  @supports (color: lab(0% 0 0)) {
    :root {
      --shadow-glow: 0 0 20px -5px lab(72.7228% 26.4609 -41.3101 / .3);
      --shadow-glow-lg: 0 0 40px -5px lab(72.7228% 26.4609 -41.3101 / .5);
      --shadow-card: 0 4px 32px -4px lab(72.7228% 26.4609 -41.3101 / .15);
      --shadow-card-hover: 0 8px 40px -8px lab(72.7228% 26.4609 -41.3101 / .25);
      --glass-bg-neutral: linear-gradient(135deg, lab(98.26% 0 0 / .06) 0%, lab(98.26% 0 0 / .03) 50%, lab(98.26% 0 0 / .02) 100%);
      --glass-bg-purple: linear-gradient(135deg, lab(72.7228% 26.4609 -41.3101 / .06) 0%, lab(72.7228% 26.4609 -41.3101 / .03) 50%, lab(92.6366% 6.52903 -10.9939 / .02) 100%);
      --glass-border: lab(72.7228% 26.4609 -41.3101 / .12);
      --glass-shadow: 0 4px 32px -4px lab(72.7228% 26.4609 -41.3101 / .15), inset 0 1px 0 0 lab(92.6366% 6.52903 -10.9939 / .08);
      --color-main-200: lab(90.5789% 1.61123 -5.79855);
      --color-main-300: lab(84.8946% 1.61493 -5.7963);
      --color-main-400: lab(65.6375% 1.63114 -5.78656);
      --color-main-500: lab(47.8878% 1.65477 -5.77283);
      --color-main-600: lab(35.1259% 1.68203 -5.7577);
      --color-main-700: lab(26.7721% 1.7087 -5.74352);
      --color-main-800: lab(15.632% 1.76637 -5.71489);
      --color-accent-500: lab(44.244% 42.1152 -84.4406);
      --color-accent-600: lab(38.3885% 45.3105 -84.5019);
      --color-accent-700: lab(32.4486% 49.2217 -84.6695);
      --color-accent-800: lab(25.2214% 55.1993 -85.1094);
      --color-complement-600: lab(55.1054% -42.3208 -.298786);
      --color-complement-700: lab(43.5051% -42.7527 -.281596);
    }
  }

  @property --border-gradient-angle {
    syntax: "<angle>"; initial-value: 0deg; inherits: false;
  }

  @keyframes border-rotate {
    100% {
      --border-gradient-angle: 360deg;
    }
  }

  .skip-nav-link {
    z-index: 9999;
    background: var(--color-accent, #f5d96e);
    color: #000;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border-radius: 0 0 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    position: absolute;
    top: -100%;
    left: 0;
    overflow: hidden;
  }

  .skip-nav-link:focus {
    clip: auto;
    clip-path: none;
    white-space: normal;
    outline-offset: -2px;
    outline: 2px solid #000;
    top: 0;
    overflow: visible;
  }

  *, :before, :after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.6;
  }

  body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: #000;
    min-height: 100vh;
  }

  a {
    color: var(--color-primary);
    transition: color var(--transition-fast);
    text-decoration: none;
  }

  a:hover {
    color: var(--color-primary-hover);
  }

  img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
  }

  button, input, textarea, select {
    font: inherit;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .main-content {
    padding: var(--spacing-lg);
    flex: 1;
    overflow-y: auto;
  }

  .container {
    width: 100%;
    max-width: 1200px;
    padding: 0 var(--spacing-md);
    margin: 0 auto;
  }

  .glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--glass-shadow);
    transition: all var(--transition-normal);
  }

  .glass-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(197, 163, 255, .25);
    border-color: lab(72.7228% 26.4609 -41.3101 / .25);
    transform: translateY(-2px);
  }

  .glass-card.featured {
    background: linear-gradient(135deg, rgba(197, 163, 255, .12) 0%, rgba(184, 190, 255, .08) 30%, rgba(245, 194, 153, .06) 70%, rgba(197, 163, 255, .1) 100%);
    background: linear-gradient(135deg, lab(72.7228% 26.4609 -41.3101 / .12) 0%, lab(78.163% 9.52372 -35.9495 / .08) 30%, lab(82.3726% 15.0174 28.0157 / .06) 70%, lab(72.7228% 26.4609 -41.3101 / .1) 100%);
    border-color: rgba(197, 163, 255, .18);
    border-color: lab(72.7228% 26.4609 -41.3101 / .18);
  }

  .main-nav {
    padding: var(--spacing-md) var(--spacing-lg);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    background: rgba(0, 0, 0, .5);
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: sticky;
    top: 0;
  }

  .nav-brand {
    align-items: center;
    display: flex;
  }

  .brand-link {
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    display: flex;
  }

  .brand-text {
    font-family: var(--font-display);
    background: linear-gradient(135deg, #71c9ec 0%, #833fb4 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 1.5rem;
  }

  .brand-logo {
    width: auto;
    height: 32px;
  }

  .nav-links {
    gap: var(--spacing-sm);
    display: flex;
  }

  .nav-link {
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    font-weight: 500;
  }

  .nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .05);
  }

  .nav-link.active, .nav-link[aria-current="page"] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .nav-right {
    align-items: center;
    gap: var(--spacing-md);
    display: flex;
  }

  .connection-status {
    padding: var(--spacing-sm);
  }

  .status-dot {
    background: var(--text-muted);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    display: block;
  }

  .status-dot.connected {
    background: var(--color-success);
    box-shadow: 0 0 8px var(--color-success);
  }

  .status-dot.connecting {
    background: var(--color-warning);
    animation: 1s infinite pulse;
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }

    50% {
      opacity: .5;
    }
  }

  .user-menu {
    align-items: center;
    gap: var(--spacing-sm);
    display: flex;
    position: relative;
  }

  .user-name {
    color: var(--text-secondary);
    font-size: .875rem;
  }

  .dropdown {
    position: relative;
  }

  .dropdown-trigger {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, .05);
  }

  .dropdown-trigger:hover {
    border-color: var(--border-color-hover);
    background: rgba(255, 255, 255, .1);
  }

  .dropdown-menu {
    top: calc(100% + var(--spacing-xs));
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    min-width: 180px;
    box-shadow: var(--shadow-card);
    padding: var(--spacing-sm) 0;
    z-index: 50;
    background: rgba(15, 15, 20, .95);
    position: absolute;
    right: 0;
  }

  .dropdown-item {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    display: block;
  }

  .dropdown-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .05);
  }

  .dropdown-item.logout {
    color: var(--color-error);
  }

  .dropdown-item.logout:hover {
    background: rgba(239, 68, 68, .1);
  }

  .dropdown-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--spacing-sm) 0;
  }

  .auth-links {
    gap: var(--spacing-sm);
    display: flex;
  }

  .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid rgba(0, 0, 0, 0);
    justify-content: center;
    align-items: center;
    font-weight: 500;
    display: inline-flex;
  }

  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn-primary {
    background: var(--color-moon-50);
    color: #000;
    border-color: var(--color-moon-50);
  }

  .btn-primary:hover {
    box-shadow: var(--shadow-glow);
    background: #fff;
  }

  .btn-secondary {
    color: var(--text-primary);
    border-color: var(--border-color);
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, .05);
  }

  .btn-secondary:hover {
    border-color: var(--border-color-hover);
    background: rgba(255, 255, 255, .1);
  }

  .btn-accent {
    background: var(--color-accent);
    color: #1a1a1a;
    border-color: var(--color-accent);
    box-shadow: 0 0 20px -5px rgba(245, 217, 110, .3);
  }

  .btn-accent:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 0 40px -5px rgba(245, 217, 110, .5);
  }

  .btn-large {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    font-size: 1.125rem;
  }

  .card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
    background: rgba(255, 255, 255, .03);
  }

  .card:hover {
    box-shadow: var(--shadow-card);
    background: rgba(255, 255, 255, .05);
    border-color: rgba(197, 163, 255, .3);
    border-color: lab(72.7228% 26.4609 -41.3101 / .3);
    transform: translateY(-2px);
  }

  .card-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
  }

  .card-header h3 {
    font-size: 1.25rem;
    font-weight: 500;
  }

  .page-header {
    margin-bottom: var(--spacing-xl);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .page-title {
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--color-moon-50) 0%, var(--color-moon-300) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 2rem;
    font-weight: 400;
  }

  .form-group {
    margin-bottom: var(--spacing-lg);
  }

  .form-group label {
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: .875rem;
    font-weight: 500;
    display: block;
  }

  .form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, .03);
    font-size: 1rem;
  }

  .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: var(--color-moon-500);
    background: rgba(255, 255, 255, .05);
    outline: none;
    box-shadow: 0 0 0 3px rgba(197, 163, 255, .15);
    box-shadow: 0 0 0 3px lab(72.7228% 26.4609 -41.3101 / .15);
  }

  .form-group input::placeholder {
    color: var(--text-muted);
  }

  .form-actions {
    margin-top: var(--spacing-xl);
  }

  .form-footer {
    margin-top: var(--spacing-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: .875rem;
  }

  .form-footer a, .form-footer .link {
    color: var(--color-moon-400);
  }

  .form-footer a:hover, .form-footer .link:hover {
    color: var(--color-moon-300);
  }

  .password-input-group {
    margin-bottom: var(--spacing-lg);
  }

  .password-input-wrapper {
    align-items: center;
    display: flex;
    position: relative;
  }

  .password-input-wrapper input {
    flex: 1;
    padding-right: 3rem;
  }

  .password-toggle-btn {
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    color: var(--text-muted);
    border-radius: var(--border-radius);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: color .15s, background .15s;
    display: flex;
    position: absolute;
    right: .5rem;
  }

  .password-toggle-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .05);
  }

  .password-toggle-btn:focus {
    outline: none;
  }

  .password-toggle-btn .icon {
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
  }

  .password-toggle-btn .icon svg {
    width: 100%;
    height: 100%;
  }

  .form-group.has-error input {
    border-color: var(--color-error);
  }

  .form-group input.input-valid {
    border-color: var(--color-success);
  }

  .input-error-message {
    margin-top: var(--spacing-xs);
    color: var(--color-error);
    font-size: .75rem;
    display: block;
  }

  .loading-spinner {
    padding: var(--spacing-lg);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .spinner {
    border: 3px solid var(--border-color);
    border-top-color: var(--color-moon-500);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: .8s linear infinite spin;
  }

  .loading-spinner.small .spinner {
    border-width: 2px;
    width: 16px;
    height: 16px;
  }

  .loading-spinner.medium .spinner {
    width: 32px;
    height: 32px;
  }

  .loading-spinner.large .spinner {
    border-width: 4px;
    width: 48px;
    height: 48px;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .loading-skeleton {
    border-radius: var(--border-radius);
    background: linear-gradient(90deg, rgba(255, 255, 255, .03) 25%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .03) 75%) 0 0 / 200% 100%;
    animation: 1.5s infinite shimmer;
  }

  .user-menu-skeleton {
    border-radius: var(--border-radius);
    background: linear-gradient(90deg, rgba(255, 255, 255, .03) 25%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .03) 75%) 0 0 / 200% 100%;
    width: 100px;
    height: 32px;
    animation: 1.5s infinite shimmer;
  }

  @keyframes shimmer {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }

  .empty-state {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--text-muted);
  }

  .empty-state h2 {
    font-family: var(--font-display);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
  }

  .empty-state p {
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary);
  }

  .error-template, .error-state {
    text-align: center;
    padding: var(--spacing-3xl);
  }

  .error-code {
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--color-moon-500) 0%, var(--color-moon-800) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 8rem;
    font-weight: 400;
    line-height: 1;
  }

  .error-title {
    margin: var(--spacing-md) 0;
    color: var(--text-primary);
    font-size: 1.75rem;
  }

  .error-message {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
  }

  .error-actions {
    gap: var(--spacing-md);
    justify-content: center;
    display: flex;
  }

  .breadcrumbs {
    margin-bottom: var(--spacing-lg);
  }

  .breadcrumb-list {
    gap: var(--spacing-sm);
    list-style: none;
    display: flex;
  }

  .breadcrumb-item {
    color: var(--text-muted);
    align-items: center;
    display: flex;
  }

  .breadcrumb-item:after {
    content: "/";
    margin-left: var(--spacing-sm);
    color: var(--text-muted);
    opacity: .5;
  }

  .breadcrumb-item:last-child:after {
    display: none;
  }

  .breadcrumb-item a {
    color: var(--text-secondary);
  }

  .breadcrumb-item a:hover {
    color: var(--text-primary);
  }

  .breadcrumb-item.active {
    color: var(--text-muted);
  }

  .hero {
    padding: var(--spacing-3xl) 0;
    text-align: center;
    position: relative;
  }

  .hero:before {
    content: "";
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle, rgba(197, 163, 255, .15) 0%, rgba(0, 0, 0, 0) 70%);
    background: radial-gradient(circle, lab(72.7228% 26.4609 -41.3101 / .15) 0%, rgba(0, 0, 0, 0) 70%);
    width: 600px;
    height: 600px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero-title {
    font-family: var(--font-display);
    margin-bottom: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-moon-50) 0%, var(--color-moon-300) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 3.5rem;
    font-weight: 400;
  }

  .hero-subtitle {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    font-size: 1.25rem;
    line-height: 1.7;
  }

  .hero-actions {
    gap: var(--spacing-md);
    justify-content: center;
    display: flex;
  }

  .features {
    padding: var(--spacing-3xl) 0;
  }

  .features-grid {
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    display: grid;
  }

  .feature-card {
    text-align: left;
  }

  .feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    color: var(--color-moon-500);
  }

  .feature-title {
    font-family: var(--font-display);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 400;
  }

  .feature-description {
    color: var(--text-secondary);
    line-height: 1.6;
  }

  .cta {
    padding: var(--spacing-3xl) 0;
    text-align: center;
  }

  .cta h2 {
    font-family: var(--font-display);
    margin-bottom: var(--spacing-md);
    font-size: 2rem;
  }

  .cta p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
  }

  .dashboard-grid {
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    display: grid;
  }

  .dashboard-section h3 {
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .875rem;
    font-weight: 600;
  }

  .stats-grid {
    gap: var(--spacing-md);
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }

  .stat-card {
    text-align: center;
    padding: var(--spacing-md);
  }

  .stat-value {
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--color-moon-400) 0%, var(--color-moon-600) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 2.5rem;
    font-weight: 400;
  }

  .stat-label {
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    font-size: .875rem;
  }

  .welcome-banner {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
  }

  .welcome-banner h2 {
    font-family: var(--font-display);
    margin-bottom: var(--spacing-sm);
    font-size: 1.5rem;
  }

  .welcome-banner p {
    color: var(--text-secondary);
  }

  .scrollable-page {
    height: 100%;
    overflow: hidden auto;
  }

  .ai-portal-page {
    padding: var(--spacing-lg) 0;
    padding-bottom: var(--spacing-xl);
    min-height: min-content;
  }

  .ai-portal-header-actions {
    gap: var(--spacing-md);
    align-items: center;
    display: flex;
  }

  .portal-subtitle {
    color: var(--text-muted);
    font-size: .875rem;
  }

  .section-title {
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .875rem;
    font-weight: 600;
  }

  .usage-overview {
    margin-bottom: var(--spacing-xl);
  }

  .usage-stats-grid {
    gap: var(--spacing-md);
    grid-template-columns: repeat(4, 1fr);
    display: grid;
  }

  @media (width <= 1200px) {
    .usage-stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (width <= 640px) {
    .usage-stats-grid {
      grid-template-columns: 1fr;
    }
  }

  .usage-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    gap: var(--spacing-xs);
    flex-direction: column;
    display: flex;
  }

  .usage-stat-header {
    margin-bottom: var(--spacing-sm);
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
  }

  .usage-stat-icon {
    border-radius: var(--border-radius);
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .usage-stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .period-tabs {
    border-radius: var(--border-radius-sm);
    background: rgba(255, 255, 255, .05);
    gap: 2px;
    padding: 2px;
    display: flex;
  }

  .period-tab {
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: .75rem;
    font-weight: 500;
  }

  .period-tab:hover {
    color: var(--text-primary);
  }

  .period-tab.active {
    background: var(--color-primary);
    color: #fff;
  }

  .usage-stat-value {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 500;
  }

  .usage-stat-label {
    color: var(--text-muted);
    font-size: .875rem;
  }

  .usage-stat-trend {
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    font-size: .75rem;
    display: flex;
  }

  .usage-stat-trend.up {
    color: var(--color-success);
  }

  .usage-stat-trend.down {
    color: var(--color-error);
  }

  .top-agents-section {
    margin-bottom: var(--spacing-xl);
  }

  .agent-ranking-list {
    gap: var(--spacing-sm);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .agent-rank-item {
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
  }

  .agent-rank-item:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, .05);
  }

  .agent-rank-badge {
    background: var(--bg-tertiary);
    width: 28px;
    height: 28px;
    color: var(--text-primary);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    display: flex;
  }

  .agent-rank-badge.gold {
    color: #1a1a1a;
    background: linear-gradient(135deg, gold, orange);
  }

  .agent-rank-badge.silver {
    color: #1a1a1a;
    background: linear-gradient(135deg, #e8e8e8, #a8a8a8);
  }

  .agent-rank-badge.bronze {
    color: #fff;
    background: linear-gradient(135deg, #cd7f32, #8b5a2b);
  }

  .agent-rank-info {
    flex: 1;
    min-width: 0;
  }

  .agent-rank-name {
    color: var(--text-primary);
    margin-bottom: 2px;
    font-weight: 500;
  }

  .agent-rank-description {
    color: var(--text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .875rem;
    overflow: hidden;
  }

  .agent-rank-stats {
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
    display: flex;
  }

  .agent-rank-usage {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: .875rem;
  }

  .ai-portal-content-grid {
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    grid-template-columns: 1fr 2fr;
    display: grid;
  }

  @media (width <= 1200px) {
    .ai-portal-content-grid {
      grid-template-columns: 1fr;
    }
  }

  .recent-activity-section {
    height: fit-content;
  }

  .activity-list {
    flex-direction: column;
    gap: 2px;
    max-height: 400px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-y: auto;
  }

  .activity-item {
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);
    display: flex;
  }

  .activity-item:hover {
    background: rgba(255, 255, 255, .03);
  }

  .activity-status-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 6px;
  }

  .activity-status-dot.success {
    background: var(--color-success);
    box-shadow: 0 0 8px var(--color-success);
  }

  .activity-status-dot.error {
    background: var(--color-error);
    box-shadow: 0 0 8px var(--color-error);
  }

  .activity-status-dot.running {
    background: var(--color-warning);
    animation: 1.5s infinite pulse;
  }

  .activity-content {
    flex: 1;
    min-width: 0;
  }

  .activity-message {
    color: var(--text-primary);
    font-size: .875rem;
  }

  .activity-user {
    font-weight: 500;
  }

  .activity-agent {
    color: var(--color-primary);
  }

  .activity-time {
    color: var(--text-muted);
    margin-top: 2px;
    font-size: .75rem;
  }

  .agent-catalog-section {
    gap: var(--spacing-md);
    flex-direction: column;
    display: flex;
  }

  .catalog-header {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    display: flex;
  }

  .catalog-search {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
  }

  .catalog-search .search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: .875rem;
  }

  .catalog-search .search-input:focus {
    border-color: var(--color-primary);
    outline: none;
  }

  .catalog-search .search-input::placeholder {
    color: var(--text-muted);
  }

  .category-filter-chips {
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    display: flex;
  }

  .filter-chip {
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    padding: 6px 12px;
    font-size: .75rem;
    font-weight: 500;
  }

  .filter-chip:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
  }

  .filter-chip.active {
    color: #fff;
  }

  .agent-catalog-grid {
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    display: grid;
  }

  .agent-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    transition: all var(--transition-fast);
    gap: var(--spacing-sm);
    flex-direction: column;
    display: flex;
  }

  .agent-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-color-hover);
    transform: translateY(-2px);
  }

  .agent-card-header {
    align-items: flex-start;
    gap: var(--spacing-sm);
    display: flex;
  }

  .agent-card-icon {
    border-radius: var(--border-radius);
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .agent-card-title {
    flex-direction: column;
    flex: 1;
    gap: 4px;
    min-width: 0;
    display: flex;
  }

  .agent-card-name {
    color: var(--text-primary);
    font-weight: 500;
  }

  .agent-card-description {
    color: var(--text-muted);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .875rem;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden;
  }

  .agent-card-footer {
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    display: flex;
  }

  .agent-card-stats {
    gap: var(--spacing-md);
    color: var(--text-muted);
    font-size: .75rem;
    display: flex;
  }

  .agent-card-dept {
    color: var(--text-muted);
    font-size: .75rem;
  }

  .badge {
    border-radius: var(--border-radius-full);
    white-space: nowrap;
    align-items: center;
    padding: 2px 8px;
    font-size: .75rem;
    font-weight: 500;
    display: inline-flex;
  }

  .badge-sm {
    padding: 2px 6px;
    font-size: .625rem;
  }

  .user-analytics-section {
    gap: var(--spacing-xl);
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  @media (width <= 900px) {
    .user-analytics-section {
      grid-template-columns: 1fr;
    }
  }

  .analytics-card {
    gap: var(--spacing-md);
    flex-direction: column;
    display: flex;
  }

  .department-breakdown {
    gap: var(--spacing-sm);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .department-item {
    padding: var(--spacing-sm);
  }

  .department-info {
    margin-bottom: var(--spacing-xs);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .department-name {
    color: var(--text-primary);
    font-size: .875rem;
  }

  .department-count {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: .75rem;
  }

  .department-bar-bg {
    background: rgba(255, 255, 255, .1);
    border-radius: 2px;
    height: 4px;
    overflow: hidden;
  }

  .department-bar {
    background: var(--color-primary);
    height: 100%;
    transition: width var(--transition-normal);
    border-radius: 2px;
  }

  .power-users-list {
    gap: var(--spacing-xs);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .power-user-item {
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, .02);
    display: flex;
  }

  .power-user-rank {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    display: flex;
  }

  .power-user-info {
    flex: 1;
    min-width: 0;
  }

  .power-user-name {
    color: var(--text-primary);
    font-size: .875rem;
    font-weight: 500;
  }

  .power-user-dept {
    color: var(--text-muted);
    font-size: .75rem;
  }

  .power-user-count {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: .875rem;
  }

  .main-tab-bar {
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
    display: flex;
  }

  .main-tab {
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--text-muted);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    font-size: .9375rem;
    font-weight: 500;
    position: relative;
  }

  .main-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .03);
  }

  .main-tab.active {
    color: var(--color-primary);
    background: rgba(255, 255, 255, .05);
  }

  .main-tab.active:after {
    content: "";
    background: var(--color-primary);
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
  }

  .sub-tab-bar {
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    display: flex;
  }

  .sub-tab {
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, .03);
    padding: 6px 14px;
    font-size: .8125rem;
    font-weight: 500;
  }

  .sub-tab:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
  }

  .sub-tab.active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
  }

  .tab-content {
    animation: .2s ease-out fadeIn;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .top-lists-tab, .recommendations-tab, .usage-overview-tab {
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
    flex-direction: column;
    display: flex;
  }

  .metrics-section {
    margin-bottom: var(--spacing-xl);
  }

  .card-title {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    align-items: center;
    gap: var(--spacing-sm);
    font-size: .875rem;
    font-weight: 600;
    display: flex;
  }

  .rank-badge {
    background: var(--bg-tertiary);
    width: 28px;
    height: 28px;
    color: var(--text-primary);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    display: flex;
  }

  .rank-badge.gold {
    color: #1a1a1a;
    background: linear-gradient(135deg, gold, orange);
  }

  .rank-badge.silver {
    color: #1a1a1a;
    background: linear-gradient(135deg, #e8e8e8, #a8a8a8);
  }

  .rank-badge.bronze {
    color: #fff;
    background: linear-gradient(135deg, #cd7f32, #8b5a2b);
  }

  .user-ranking-list {
    gap: var(--spacing-sm);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .user-rank-item {
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
  }

  .user-rank-item:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, .05);
  }

  .user-avatar {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    font-size: .75rem;
    font-weight: 600;
    display: flex;
  }

  .user-rank-info {
    flex: 1;
    min-width: 0;
  }

  .user-rank-name {
    color: var(--text-primary);
    margin-bottom: 2px;
    font-weight: 500;
  }

  .user-rank-meta {
    color: var(--text-muted);
    gap: var(--spacing-sm);
    font-size: .75rem;
    display: flex;
  }

  .user-rank-stats {
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
    display: flex;
  }

  .stat-pill {
    font-size: .75rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    border-radius: var(--border-radius-full);
    background: rgba(255, 255, 255, .05);
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    display: inline-flex;
  }

  .trend-indicator {
    align-items: center;
    gap: 2px;
    font-size: .6875rem;
    font-weight: 500;
    display: inline-flex;
  }

  .trend-indicator.rising {
    color: var(--color-success);
  }

  .trend-indicator.falling {
    color: var(--color-error);
  }

  .trend-indicator.stable {
    color: var(--text-muted);
  }

  .prompts-list {
    gap: var(--spacing-sm);
    flex-direction: column;
    display: flex;
  }

  .prompt-card {
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-fast);
    display: flex;
  }

  .prompt-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-color-hover);
  }

  .prompt-rank {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    display: flex;
  }

  .prompt-content {
    flex: 1;
    min-width: 0;
  }

  .prompt-text {
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .875rem;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
  }

  .prompt-meta {
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
    font-size: .75rem;
    display: flex;
  }

  .prompt-stats {
    gap: var(--spacing-md);
    color: var(--text-muted);
    font-size: .75rem;
    display: flex;
  }

  .recommendations-grid {
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    display: grid;
  }

  .recommendation-card {
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-fast);
    flex-direction: column;
    display: flex;
  }

  .recommendation-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-color-hover);
    transform: translateY(-2px);
  }

  .rec-header {
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
    display: flex;
  }

  .rec-title {
    color: var(--text-primary);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .priority-badge {
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
    align-items: center;
    padding: 3px 8px;
    font-size: .6875rem;
    font-weight: 600;
    display: inline-flex;
  }

  .priority-badge.high {
    color: #ef4444;
    background: rgba(239, 68, 68, .15);
  }

  .priority-badge.medium {
    color: #f59e0b;
    background: rgba(245, 158, 11, .15);
  }

  .priority-badge.low {
    color: #3b82f6;
    background: rgba(59, 130, 246, .15);
  }

  .rec-description {
    color: var(--text-secondary);
    font-size: .875rem;
    line-height: 1.5;
  }

  .rec-impact {
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-success);
    font-size: .8125rem;
    display: flex;
  }

  .rec-footer {
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    display: flex;
  }

  .affected-count {
    color: var(--text-muted);
    font-size: .75rem;
  }

  .rec-action-btn {
    color: var(--color-primary);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: rgba(99, 102, 241, .1);
    border: none;
    padding: 6px 14px;
    font-size: .8125rem;
    font-weight: 500;
  }

  .rec-action-btn:hover {
    color: #fff;
    background: rgba(99, 102, 241, .2);
  }

  .adoption-section {
    margin-bottom: var(--spacing-xl);
  }

  .adoption-metrics {
    gap: var(--spacing-xl);
    grid-template-columns: 200px 1fr;
    align-items: start;
    display: grid;
  }

  @media (width <= 900px) {
    .adoption-metrics {
      grid-template-columns: 1fr;
    }
  }

  .adoption-gauge-container {
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .gauge-svg {
    width: 160px;
    height: 100px;
    overflow: visible;
  }

  .gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, .1);
    stroke-width: 12px;
    stroke-linecap: round;
  }

  .gauge-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 12px;
    stroke-linecap: round;
    transition: stroke-dashoffset .5s ease-out;
  }

  .gauge-value {
    font-family: var(--font-display);
    fill: var(--text-primary);
    font-size: 1.75rem;
    font-weight: 500;
  }

  .gauge-label {
    fill: var(--text-muted);
    font-size: .75rem;
  }

  .gauge-target {
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
    font-size: .75rem;
  }

  .adoption-grid {
    gap: var(--spacing-sm);
    flex-direction: column;
    display: flex;
  }

  .adoption-item {
    padding: var(--spacing-sm);
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .adoption-item-header {
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    display: flex;
  }

  .adoption-item-name {
    color: var(--text-primary);
    font-weight: 500;
  }

  .adoption-item-stats {
    gap: var(--spacing-sm);
    color: var(--text-muted);
    font-size: .75rem;
    display: flex;
  }

  .adoption-bar-container {
    background: rgba(255, 255, 255, .1);
    border-radius: 3px;
    height: 6px;
    position: relative;
    overflow: visible;
  }

  .adoption-bar {
    background: var(--color-primary);
    border-radius: 3px;
    height: 100%;
    transition: width .5s ease-out;
  }

  .adoption-bar.above-target {
    background: var(--color-success);
  }

  .adoption-bar.near-target {
    background: var(--color-warning);
  }

  .adoption-bar.below-target {
    background: var(--color-error);
  }

  .adoption-target-marker {
    background: var(--text-muted);
    border-radius: 1px;
    width: 2px;
    position: absolute;
    top: -4px;
    bottom: -4px;
  }

  .activity-tab {
    gap: var(--spacing-lg);
    flex-direction: column;
    display: flex;
  }

  .activity-summary {
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    display: flex;
  }

  .summary-stat {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, .03);
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    display: flex;
  }

  .summary-stat-value {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 500;
  }

  .summary-stat-label {
    color: var(--text-muted);
    font-size: .75rem;
  }

  .activity-filters {
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    display: flex;
  }

  .activity-filter {
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    padding: 6px 14px;
    font-size: .8125rem;
    font-weight: 500;
  }

  .activity-filter:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
  }

  .activity-filter.active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
  }

  .activity-type-badge {
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
    align-items: center;
    padding: 2px 6px;
    font-size: .625rem;
    font-weight: 500;
    display: inline-flex;
  }

  .activity-type-badge.execution {
    color: #818cf8;
    background: rgba(99, 102, 241, .15);
  }

  .activity-type-badge.deployment {
    color: #4ade80;
    background: rgba(34, 197, 94, .15);
  }

  .activity-type-badge.error {
    color: #f87171;
    background: rgba(239, 68, 68, .15);
  }

  .usage-stat-subtext {
    color: var(--text-muted);
    margin-top: 2px;
    font-size: .75rem;
  }

  .sparkline {
    align-items: flex-end;
    gap: 2px;
    height: 24px;
    display: flex;
  }

  .sparkline-bar {
    background: var(--color-primary);
    border-radius: 2px;
    width: 4px;
    transition: height .3s ease-out;
  }

  .cost-breakdown {
    gap: var(--spacing-md);
    grid-template-columns: repeat(3, 1fr);
    display: grid;
  }

  @media (width <= 640px) {
    .cost-breakdown {
      grid-template-columns: 1fr;
    }
  }

  .cost-item {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .cost-item-label {
    color: var(--text-muted);
    font-size: .75rem;
  }

  .cost-item-value {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 500;
  }

  .two-column-grid {
    gap: var(--spacing-xl);
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  @media (width <= 900px) {
    .two-column-grid {
      grid-template-columns: 1fr;
    }
  }

  .rising-stars {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
  }

  .rising-stars-title {
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    align-items: center;
    gap: var(--spacing-xs);
    font-size: .8125rem;
    font-weight: 600;
    display: flex;
  }

  .prompt-category-chip {
    border-radius: var(--border-radius-sm);
    color: #818cf8;
    background: rgba(99, 102, 241, .15);
    align-items: center;
    padding: 2px 8px;
    font-size: .6875rem;
    font-weight: 500;
    display: inline-flex;
  }

  .projects-grid {
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    display: grid;
  }

  .project-card {
    flex-direction: column;
    height: 100%;
    display: flex;
  }

  .project-link {
    color: inherit;
    height: 100%;
    display: block;
  }

  .project-name {
    font-family: var(--font-display);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 400;
  }

  .project-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    flex: 1;
    line-height: 1.6;
  }

  .project-meta {
    color: var(--text-muted);
    gap: var(--spacing-md);
    font-size: .875rem;
    display: flex;
  }

  .project-tabs {
    margin-top: var(--spacing-xl);
  }

  .tab-nav {
    gap: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
    display: flex;
  }

  .tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
  }

  .tab-btn:hover {
    color: var(--text-primary);
  }

  .tab-btn.active {
    color: var(--color-moon-400);
    border-bottom-color: var(--color-moon-500);
  }

  .login-page, .signup-page, .register-page {
    min-height: calc(100vh - 200px);
    padding: var(--spacing-xl);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .login-card, .signup-card, .register-card {
    width: 100%;
    max-width: 420px;
    padding: var(--spacing-2xl);
  }

  .login-header, .signup-header, .register-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
  }

  .login-header h1, .signup-header h1, .register-header h1 {
    font-family: var(--font-display);
    margin-bottom: var(--spacing-sm);
    font-size: 2rem;
  }

  .login-subtitle, .signup-subtitle, .register-subtitle {
    color: var(--text-secondary);
  }

  .badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0);
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    display: inline-flex;
  }

  .badge-blue {
    color: #a5b4fc;
    background: rgba(99, 102, 241, .2);
    border-color: rgba(99, 102, 241, .4);
  }

  .badge-purple {
    color: #d8b4fe;
    background: rgba(168, 85, 247, .2);
    border-color: rgba(168, 85, 247, .4);
  }

  .badge-emerald {
    color: #6ee7b7;
    background: rgba(16, 185, 129, .2);
    border-color: rgba(16, 185, 129, .4);
  }

  .badge-amber {
    color: #fcd34d;
    background: rgba(251, 191, 36, .2);
    border-color: rgba(251, 191, 36, .4);
  }

  .app-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    text-align: center;
  }

  .footer-content {
    color: var(--text-muted);
    font-size: .875rem;
  }

  .muted {
    color: var(--text-muted);
  }

  .text-center {
    text-align: center;
  }

  .text-gradient {
    background: linear-gradient(135deg, var(--color-moon-50) 0%, var(--color-moon-300) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }

  .animate-border {
    --border-gradient-angle: 0deg;
    position: relative;
  }

  .animate-border:before {
    content: "";
    border-radius: inherit;
    background: conic-gradient(from var(--border-gradient-angle), transparent 0%, transparent 22%, rgba(197, 163, 255, .8) 25%, transparent 28%, transparent 72%, rgba(197, 163, 255, .8) 75%, transparent 78%, transparent 100%);
    z-index: -1;
    animation: 15s linear infinite border-rotate;
    position: absolute;
    inset: -2px;
  }

  @supports (color: lab(0% 0 0)) {
    .animate-border:before {
      background: conic-gradient(from var(--border-gradient-angle), transparent 0%, transparent 22%, lab(72.7228% 26.4609 -41.3101 / .8) 25%, transparent 28%, transparent 72%, lab(72.7228% 26.4609 -41.3101 / .8) 75%, transparent 78%, transparent 100%);
    }
  }

  .animate-border:after {
    content: "";
    border-radius: inherit;
    background: var(--bg-primary);
    z-index: -1;
    position: absolute;
    inset: 0;
  }

  .component-showcase {
    padding: var(--spacing-xl);
  }

  .component-section {
    margin-bottom: var(--spacing-3xl);
  }

  .component-section h2 {
    font-family: var(--font-display);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    font-size: 1.5rem;
  }

  .component-grid {
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    display: grid;
  }

  @media (width <= 768px) {
    .nav-links {
      display: none;
    }

    .hero-title {
      font-size: 2rem;
    }

    .hero-actions {
      flex-direction: column;
      align-items: center;
    }

    .features-grid {
      grid-template-columns: 1fr;
    }

    .page-header {
      align-items: flex-start;
      gap: var(--spacing-md);
      flex-direction: column;
    }

    .stats-grid {
      grid-template-columns: 1fr;
    }

    .login-card, .signup-card, .register-card {
      padding: var(--spacing-lg);
    }
  }

  @media (width <= 480px) {
    .main-content {
      padding: var(--spacing-md);
    }

    .container {
      padding: 0 var(--spacing-sm);
    }

    .hero {
      padding: var(--spacing-xl) 0;
    }

    .hero-title {
      font-size: 1.75rem;
    }
  }

  .canvas-page {
    background: #0d0d10;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .canvas-main {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  .canvas-workspace {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .canvas-container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .canvas-element {
    cursor: grab;
    width: 100%;
    height: 100%;
    display: block;
  }

  .canvas-element:active {
    cursor: grabbing;
  }

  .canvas-loading {
    color: var(--text-muted);
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1rem;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .dock-layout {
    flex-direction: row;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .dock-center {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .dock-main {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
  }

  .docked-panel {
    background: rgba(24, 24, 27, .98);
    flex-direction: column;
    flex-shrink: 0;
    transition: width .2s cubic-bezier(.4, 0, .2, 1), height .2s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .dock-left {
    border-right: 1px solid rgba(255, 255, 255, .08);
  }

  .dock-right {
    border-left: 1px solid rgba(255, 255, 255, .08);
  }

  .dock-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .docked-panel-header {
    -webkit-user-select: none;
    user-select: none;
    background: rgba(39, 39, 42, .3);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    justify-content: space-between;
    align-items: center;
    height: 32px;
    min-height: 32px;
    padding: 0 8px 0 12px;
    display: flex;
  }

  .panel-header.panel-header-docked {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    background: rgba(39, 39, 42, .3);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    justify-content: space-between;
    align-items: center;
    height: 32px;
    min-height: 32px;
    padding: 0 8px 0 12px;
    display: flex;
  }

  .panel-header-title-docked {
    color: #a1a1aa;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
  }

  .panel-header-docked .panel-header-actions-docked {
    opacity: 1;
    align-items: center;
    gap: 2px;
    display: flex;
    position: static;
    transform: none;
  }

  .panel-header-docked .panel-btn {
    color: #71717a;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
    transition: all .15s;
    display: flex;
  }

  .panel-header-docked .panel-btn:hover {
    color: #d4d4d8;
    background: rgba(255, 255, 255, .08);
  }

  .docked-panel-title {
    color: #a1a1aa;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
  }

  .docked-panel-actions {
    align-items: center;
    gap: 2px;
    display: flex;
  }

  .docked-panel-btn {
    color: #71717a;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
    transition: all .15s;
    display: flex;
  }

  .docked-panel-btn:hover {
    color: #d4d4d8;
    background: rgba(255, 255, 255, .08);
  }

  .docked-panel-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  .dock-resize-handle {
    z-index: 10;
    background: none;
    transition: background .15s;
    position: absolute;
  }

  .dock-resize-handle:hover, .dock-resize-handle.active {
    background: rgba(99, 102, 241, .3);
  }

  .dock-resize-right {
    cursor: col-resize;
    width: 4px;
    height: 100%;
    top: 0;
    right: -2px;
  }

  .dock-resize-left {
    cursor: col-resize;
    width: 4px;
    height: 100%;
    top: 0;
    left: -2px;
  }

  .dock-resize-top {
    cursor: row-resize;
    width: 100%;
    height: 4px;
    top: -2px;
    left: 0;
  }

  .dock-menu-wrapper {
    z-index: 99999;
    position: relative;
  }

  .dock-menu {
    z-index: 99999;
    background: #27272a;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    min-width: 120px;
    padding: 4px;
    position: absolute;
    top: 100%;
    right: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  }

  .dock-menu button {
    color: #d4d4d8;
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    border-radius: 4px;
    width: 100%;
    padding: 6px 12px;
    font-size: 12px;
    display: block;
  }

  .dock-menu button:hover {
    color: #f4f4f5;
    background: rgba(99, 102, 241, .2);
  }

  .dock-menu-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin: 4px 0;
  }

  .floating-panels {
    pointer-events: none;
    z-index: 1001;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }

  .floating-panel {
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--border-radius-lg);
    pointer-events: auto;
    background: rgba(20, 20, 23, .97);
    border: 1px solid rgba(255, 255, 255, .08);
    flex-direction: column;
    display: flex;
    position: absolute;
    overflow: visible;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
  }

  @keyframes panel-enter {
    from {
      opacity: 0;
      transform: scale(.96);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .panel-header {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    z-index: 10;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 20px;
    min-height: 20px;
    padding: 0 8px;
    display: flex;
    position: relative;
    overflow: visible;
  }

  .panel-header:active {
    cursor: grabbing;
  }

  .drag-indicator {
    background: #3f3f46;
    border-radius: 2px;
    width: 32px;
    height: 4px;
    transition: background .15s;
  }

  .panel-header:hover .drag-indicator {
    background: #52525b;
  }

  .panel-title {
    display: none;
  }

  .panel-close {
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--border-radius);
    width: 24px;
    height: 24px;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 1.25rem;
    display: flex;
  }

  .panel-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .panel-content {
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: auto;
  }

  .panel-body {
    min-height: 0;
    color: var(--text-secondary, var(--color-moon-300));
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    flex: 1;
    padding: 12px;
    font-size: .875rem;
    line-height: 1.5;
    overflow: hidden auto;
  }

  .panel-body:hover {
    scrollbar-color: rgba(255, 255, 255, .08) transparent;
  }

  .panel-body::-webkit-scrollbar {
    width: 5px;
  }

  .panel-body::-webkit-scrollbar-track {
    background: none;
  }

  .panel-body::-webkit-scrollbar-thumb {
    background: none;
    border-radius: 3px;
    transition: background .15s;
  }

  .panel-body:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .08);
  }

  .panel-header-row {
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    background: none;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    display: flex;
  }

  .panel-header-title {
    color: var(--text-secondary, var(--color-moon-300));
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .8125rem;
    font-weight: 500;
    overflow: hidden;
  }

  .panel-header-actions {
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    display: flex;
  }

  .panel-input {
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    width: 100%;
    color: var(--text-primary, var(--color-moon-50));
    transition: border-color var(--transition-fast, .15s ease), background var(--transition-fast, .15s ease);
    background: rgba(255, 255, 255, .05);
    border-radius: 6px;
    outline: none;
    padding: 6px 10px;
    font-family: inherit;
    font-size: .8125rem;
  }

  .panel-input:focus {
    border-color: var(--ide-accent, #4b70f5);
    background: rgba(255, 255, 255, .07);
  }

  .panel-input::placeholder {
    color: var(--text-muted, var(--color-moon-400));
  }

  .panel-icon-btn {
    width: 28px;
    height: 28px;
    color: var(--ide-text-muted, #71717a);
    cursor: pointer;
    transition: background var(--transition-fast, .15s ease), color var(--transition-fast, .15s ease);
    background: none;
    border: none;
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .panel-icon-btn:hover {
    background: var(--ide-hover-bg, rgba(39, 39, 42, .5));
    color: var(--ide-text, #d4d4d8);
  }

  .panel-icon-btn:active {
    background: var(--ide-active-bg, #27272a);
  }

  .panel-icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .panel-list {
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
    display: flex;
  }

  .panel-list-item {
    cursor: pointer;
    transition: background var(--transition-fast, .15s ease);
    color: var(--text-secondary, var(--color-moon-300));
    border-radius: 6px;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: .8125rem;
    display: flex;
  }

  .panel-list-item:hover {
    color: var(--text-primary, var(--color-moon-50));
    background: rgba(255, 255, 255, .04);
  }

  .panel-list-item.active, .panel-list-item[data-active="true"] {
    color: var(--text-primary, var(--color-moon-50));
    background: rgba(255, 255, 255, .07);
  }

  .panel-empty-state {
    text-align: center;
    color: var(--text-muted, var(--color-moon-400));
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    display: flex;
  }

  .panel-empty-state-icon {
    opacity: .5;
    margin-bottom: 4px;
    font-size: 24px;
  }

  .panel-empty-state-title {
    color: var(--text-secondary, var(--color-moon-300));
    font-size: .875rem;
    font-weight: 500;
  }

  .panel-empty-state-hint {
    color: var(--text-muted, var(--color-moon-400));
    max-width: 220px;
    font-size: .75rem;
  }

  .panel-error-bar {
    color: var(--color-error, #ef4444);
    background: rgba(239, 68, 68, .1);
    border-top: 1px solid rgba(239, 68, 68, .2);
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: .75rem;
    display: flex;
  }

  .panel-divider {
    background: var(--border-color, rgba(255, 255, 255, .1));
    flex-shrink: 0;
    height: 1px;
    margin: 4px 0;
  }

  .panel-section-label {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, var(--color-moon-400));
    padding: 6px 12px 2px;
    font-size: .6875rem;
    font-weight: 600;
  }

  .snap-zone-preview {
    border-radius: var(--border-radius);
    pointer-events: none;
    z-index: 9998;
    opacity: .7;
    background: rgba(161, 161, 170, .04);
    border: 1px dashed rgba(161, 161, 170, .15);
    position: fixed;
  }

  .resize-handle {
    z-index: 100;
    background: none;
    transition: background .15s;
    position: absolute;
  }

  .resize-handle:hover {
    background: rgba(161, 161, 170, .15);
  }

  .resize-handle:active {
    background: rgba(161, 161, 170, .25);
  }

  .resize-handle-n, .resize-handle-s {
    cursor: ns-resize;
    height: 8px;
    left: 12px;
    right: 12px;
  }

  .resize-handle-n {
    top: -4px;
  }

  .resize-handle-s {
    bottom: -4px;
  }

  .resize-handle-e, .resize-handle-w {
    cursor: ew-resize;
    width: 8px;
    top: 12px;
    bottom: 12px;
  }

  .resize-handle-e {
    right: -4px;
  }

  .resize-handle-w {
    left: -4px;
  }

  .resize-handle-ne, .resize-handle-nw, .resize-handle-se, .resize-handle-sw {
    border-radius: 4px;
    width: 16px;
    height: 16px;
  }

  .resize-handle-ne {
    cursor: nesw-resize;
    top: -4px;
    right: -4px;
  }

  .resize-handle-nw {
    cursor: nwse-resize;
    top: -4px;
    left: -4px;
  }

  .resize-handle-se {
    cursor: nwse-resize;
    bottom: -4px;
    right: -4px;
  }

  .resize-handle-sw {
    cursor: nesw-resize;
    bottom: -4px;
    left: -4px;
  }

  .floating-panel.fullscreen {
    z-index: 10000;
    border: none;
    border-radius: 0;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    inset: 0 !important;
  }

  .floating-panel.fullscreen .panel-header {
    height: 18px;
    min-height: 18px;
  }

  .floating-panel.fullscreen .panel-body, .floating-panel.fullscreen .panel-content, .floating-panel.fullscreen .floating-panel-content {
    border-radius: 0;
  }

  .fullscreen-backdrop {
    z-index: 9999;
    pointer-events: none;
    background: rgba(9, 9, 11, .5);
    position: fixed;
    inset: 0;
  }

  .panel-group {
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--border-radius-lg);
    pointer-events: auto;
    background: rgba(24, 24, 27, .95);
    border: 1px solid rgba(255, 255, 255, .1);
    flex-direction: column;
    display: flex;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
  }

  .joint-titlebar {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    height: 36px;
    min-height: 36px;
    padding: 0 8px;
    display: flex;
  }

  .joint-titlebar:active {
    cursor: grabbing;
  }

  .joint-titlebar-section {
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 8px;
    display: flex;
  }

  .joint-titlebar-section.dragging {
    cursor: grabbing;
    opacity: .92;
  }

  .joint-titlebar-section:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, .05);
  }

  .joint-titlebar-title {
    color: var(--text-secondary);
    font-size: .8125rem;
    font-weight: 500;
  }

  .joint-titlebar-close {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: .6;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    transition: all .15s;
    display: flex;
  }

  .joint-titlebar-section:hover .joint-titlebar-close {
    opacity: 1;
  }

  .joint-titlebar-close:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .2);
  }

  .joint-titlebar-actions {
    align-items: center;
    gap: 4px;
    margin-left: auto;
    display: flex;
  }

  .joint-titlebar-spacer {
    flex: 1;
  }

  .panel-group-content {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .panel-group-content.horizontal {
    flex-direction: row;
  }

  .panel-group-content.vertical {
    flex-direction: column;
  }

  .grouped-panel {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .grouped-panel:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, .05);
  }

  .panel-group-content.vertical .grouped-panel:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    border-right: none;
  }

  .attachment-border {
    z-index: 100;
    background: none;
    transition: background .15s;
    position: absolute;
  }

  .attachment-border:hover {
    background: rgba(139, 92, 246, .2);
  }

  .attachment-border.vertical {
    cursor: col-resize;
    width: 8px;
    margin-left: -4px;
  }

  .attachment-border.horizontal {
    cursor: row-resize;
    height: 8px;
    margin-top: -4px;
  }

  .detach-button {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    opacity: 0;
    cursor: pointer;
    background: rgba(39, 39, 42, .95);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    transition: opacity .15s, background .15s;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .attachment-border:hover .detach-button {
    opacity: 1;
  }

  .detach-button:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .3);
    border-color: rgba(239, 68, 68, .4);
  }

  .triform-app {
    background: #18181b;
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }

  .top-bar {
    z-index: 1000;
    pointer-events: none;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 12px 16px;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .top-bar-left, .top-bar-center, .top-bar-right {
    pointer-events: auto;
    align-items: center;
    display: flex;
  }

  .top-bar-left {
    gap: 20px;
    position: relative;
  }

  .top-bar-right {
    gap: 20px;
    position: absolute;
    right: 16px;
  }

  .top-bar-center {
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .close-all-btn {
    color: #a1a1aa;
    cursor: pointer;
    backdrop-filter: blur(4px);
    background: rgba(24, 24, 27, .9);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 9999px;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 11px;
    transition: all .2s;
    position: absolute;
    top: 100%;
  }

  .close-all-btn:hover {
    color: #f4f4f5;
    background: #27272a;
  }

  .top-bar-frame {
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    background: rgba(24, 24, 27, .9);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 6px 12px;
    display: flex;
    box-shadow: 0 0 7px rgba(0, 0, 0, .05), 0 0 14px rgba(0, 0, 0, .1), 0 0 21px rgba(0, 0, 0, .15);
  }

  .logo {
    color: #fff;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    transition: opacity .2s;
    display: flex;
  }

  .logo:hover {
    opacity: .8;
  }

  .logo svg {
    width: 100%;
    height: 100%;
  }

  .logo-link {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .logo-menu-anchor {
    align-items: center;
    display: flex;
    position: relative;
  }

  .logo-btn {
    cursor: pointer;
    color: inherit;
    background: none;
    border: none;
    border-radius: 6px;
    align-items: center;
    margin: -4px;
    padding: 4px;
    transition: background .15s;
    display: flex;
  }

  .logo-btn:hover {
    background: rgba(255, 255, 255, .08);
  }

  .logo-btn.active {
    background: rgba(255, 255, 255, .12);
  }

  .logo-chevron {
    color: #71717a;
    opacity: 0;
    align-items: center;
    max-width: 0;
    margin-left: 0;
    transition: opacity .15s, transform .15s, max-width .15s, margin-left .15s;
    display: flex;
    overflow: hidden;
  }

  .logo-btn:hover .logo-chevron, .logo-btn.active .logo-chevron {
    opacity: 1;
    max-width: 12px;
    margin-left: 3px;
  }

  .logo-btn.active .logo-chevron {
    transform: rotate(180deg);
  }

  .system-menu-wrapper {
    display: contents;
  }

  .system-menu-backdrop {
    z-index: 1099;
    position: fixed;
    inset: 0;
  }

  .system-menu {
    -webkit-backdrop-filter: blur(24px);
    z-index: 1100;
    transform-origin: 0 0;
    background: rgba(24, 24, 27, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    min-width: 256px;
    padding: 6px;
    animation: .15s cubic-bezier(.16, 1, .3, 1) system-menu-in;
    position: absolute;
    top: calc(100% + 12px);
    left: -6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .1);
  }

  @keyframes system-menu-in {
    from {
      opacity: 0;
      transform: scale(.95)translateY(-4px);
    }

    to {
      opacity: 1;
      transform: scale(1)translateY(0);
    }
  }

  .system-menu-header {
    padding: 8px 8px 4px;
  }

  .system-menu-profile {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .system-menu-avatar {
    color: #d4d4d8;
    letter-spacing: .5px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
  }

  .system-menu-user-info {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .system-menu-display-name {
    color: #fafafa;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
  }

  .system-menu-username-row {
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .system-menu-username {
    color: #71717a;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    overflow: hidden;
  }

  .system-menu-badge {
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 4px;
    flex-shrink: 0;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
  }

  .system-menu-badge.verified {
    color: #10b981;
    background: rgba(16, 185, 129, .15);
  }

  .system-menu-badge.wallet {
    color: #f5d96e;
    background: rgba(245, 217, 110, .15);
  }

  .system-menu-badge.carbon {
    color: #818cf8;
    background: rgba(99, 102, 241, .15);
  }

  .system-menu-badge.silicon {
    color: #a855f7;
    background: rgba(168, 85, 247, .15);
  }

  .system-menu-badge.sandbox {
    color: #71717a;
    background: rgba(113, 113, 122, .15);
  }

  .system-menu-divider {
    background: rgba(255, 255, 255, .08);
    height: 1px;
    margin: 4px 0;
  }

  .system-menu-item {
    color: #a1a1aa;
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 6px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    font-family: inherit;
    font-size: 13px;
    transition: background .1s, color .1s;
    display: flex;
  }

  .system-menu-item:hover:not(:disabled) {
    color: #fafafa;
    background: rgba(255, 255, 255, .08);
  }

  .system-menu-item:disabled {
    opacity: .4;
    cursor: default;
  }

  .system-menu-item.danger {
    color: #71717a;
  }

  .system-menu-item.danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, .12);
  }

  .system-menu-item-icon {
    opacity: .7;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    display: flex;
  }

  .system-menu-item:hover:not(:disabled) .system-menu-item-icon {
    opacity: 1;
  }

  .system-menu-item-icon svg {
    width: 16px;
    height: 16px;
  }

  .system-menu-item-label {
    flex: 1;
  }

  .system-menu-item-shortcut {
    color: #52525b;
    font-size: 11px;
    font-family: var(--font-mono, monospace);
  }

  .system-menu-item:hover:not(:disabled) .system-menu-item-shortcut {
    color: #71717a;
  }

  .top-bar .breadcrumbs {
    color: #d4d4d8;
    align-items: center;
    gap: 0;
    min-width: 0;
    margin-bottom: 0;
    font-size: 13px;
    display: flex;
    overflow: hidden;
  }

  .top-bar .breadcrumbs .breadcrumb-separator {
    flex-shrink: 0;
  }

  .top-bar .breadcrumbs .breadcrumb-item {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 140px;
    display: inline;
    overflow: hidden;
  }

  .top-bar .breadcrumbs .breadcrumb-item:after {
    display: none;
  }

  .top-bar .breadcrumbs .breadcrumb-ellipsis {
    color: #52525b;
    cursor: default;
    flex-shrink: 0;
    padding: 0;
  }

  .breadcrumb-link {
    color: #a1a1aa;
    cursor: pointer;
    text-decoration: none;
    transition: color .2s;
  }

  .breadcrumb-link:hover {
    color: #f4f4f5;
  }

  .breadcrumb-current {
    color: #e4e4e7;
    font-weight: 500;
  }

  .breadcrumb-clickable {
    cursor: pointer;
    font: inherit;
    color: inherit;
    font-weight: inherit;
    background: none;
    border: none;
    border-radius: 4px;
    margin: -4px -8px;
    padding: 4px 8px;
    transition: background-color .15s, color .15s;
  }

  .breadcrumb-clickable:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
  }

  .breadcrumb-clickable:active {
    background-color: rgba(255, 255, 255, .15);
  }

  .breadcrumb-bar {
    color: #a1a1aa;
    align-items: center;
    gap: 0;
    min-width: 0;
    font-size: 13px;
    display: flex;
    overflow: hidden;
  }

  .breadcrumb-bar .breadcrumb-item {
    cursor: pointer;
    font: inherit;
    color: #a1a1aa;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: none;
    border: none;
    border-radius: 4px;
    min-width: 0;
    max-width: 160px;
    padding: 4px 6px;
    font-size: 13px;
    transition: background-color .15s, color .15s;
    overflow: hidden;
  }

  .breadcrumb-bar .breadcrumb-item:hover:not(:disabled) {
    color: #f4f4f5;
    background-color: rgba(255, 255, 255, .08);
  }

  .breadcrumb-bar .breadcrumb-item:active:not(:disabled) {
    background-color: rgba(255, 255, 255, .12);
  }

  .breadcrumb-bar .breadcrumb-item-active {
    color: #e4e4e7;
    cursor: default;
    font-weight: 500;
  }

  .breadcrumb-bar .breadcrumb-item-active:hover {
    background-color: rgba(0, 0, 0, 0);
  }

  .breadcrumb-bar .breadcrumb-root {
    align-items: center;
    padding: 4px;
    display: flex;
  }

  .breadcrumb-bar .breadcrumb-icon {
    opacity: .7;
    align-items: center;
    display: flex;
  }

  .breadcrumb-bar .breadcrumb-root:hover .breadcrumb-icon {
    opacity: 1;
  }

  .breadcrumb-bar .breadcrumb-env-badge {
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    opacity: .9;
    vertical-align: middle;
    border-radius: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    display: inline-block;
  }

  .breadcrumb-bar .breadcrumb-separator {
    color: #52525b;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    padding: 0 2px;
  }

  .environment-bar {
    backdrop-filter: blur(8px);
    z-index: 5;
    background: rgba(24, 24, 27, .85);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    display: flex;
  }

  .environment-bar-tabs {
    align-items: center;
    gap: 2px;
    display: flex;
  }

  .environment-tab {
    color: #71717a;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 6px;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 12px;
    transition: background .15s, color .15s;
    display: flex;
  }

  .environment-tab:hover {
    color: #a1a1aa;
    background: rgba(255, 255, 255, .06);
  }

  .environment-tab-active {
    color: #e4e4e7;
    background: rgba(255, 255, 255, .08);
    font-weight: 600;
  }

  .environment-dot {
    opacity: .4;
    border: 1.5px solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
  }

  .environment-dot-active {
    opacity: 1;
    box-shadow: 0 0 6px;
  }

  .environment-promote {
    align-items: center;
    display: flex;
  }

  .environment-promote-btn {
    color: #a1a1aa;
    cursor: pointer;
    white-space: nowrap;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    transition: background .15s, color .15s, border-color .15s;
  }

  .environment-promote-btn:hover:not(:disabled) {
    color: #e4e4e7;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .15);
  }

  .environment-promote-btn:disabled {
    opacity: .4;
    cursor: default;
  }

  .environment-confirm {
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .environment-confirm-text {
    color: #fbbf24;
    font-size: 11px;
    font-weight: 500;
  }

  .environment-confirm-btn {
    color: #a1a1aa;
    cursor: pointer;
    background: none;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    padding: 3px 10px;
    font-family: inherit;
    font-size: 11px;
    transition: background .15s, color .15s;
  }

  .environment-confirm-yes {
    color: #f87171;
    background: rgba(239, 68, 68, .15);
    border-color: rgba(239, 68, 68, .3);
  }

  .environment-confirm-yes:hover {
    background: rgba(239, 68, 68, .25);
  }

  .environment-confirm-no:hover {
    color: #e4e4e7;
    background: rgba(255, 255, 255, .06);
  }

  .panel-toolbar {
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    background: rgba(24, 24, 27, .9);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    align-items: center;
    gap: 4px;
    height: 52px;
    padding: 6px 8px;
    display: flex;
    position: relative;
    box-shadow: 0 0 7px rgba(0, 0, 0, .05), 0 0 14px rgba(0, 0, 0, .1), 0 0 21px rgba(0, 0, 0, .15);
  }

  .panel-btn {
    color: #a1a1aa;
    cursor: pointer;
    background: rgba(39, 39, 42, .5);
    border: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    transition: all .2s;
    display: flex;
  }

  .panel-btn:hover {
    color: #e4e4e7;
    background: rgba(63, 63, 70, .7);
  }

  .panel-btn.active, .panel-btn.panel-btn-active {
    color: #f4f4f5;
    background: #3f3f46;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  }

  .panel-btn svg {
    width: 20px;
    height: 20px;
  }

  .action-buttons {
    backdrop-filter: blur(4px);
    background: rgba(24, 24, 27, .8);
    border-radius: 8px;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    display: flex;
  }

  .action-btn {
    color: #d4d4d8;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 6px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    transition: all .2s;
    display: flex;
  }

  .action-btn:hover {
    color: #f4f4f5;
    background: #27272a;
  }

  .action-btn.primary {
    color: #fff;
    background: #7c3aed;
  }

  .action-btn.primary:hover {
    background: #8b5cf6;
  }

  .action-btn svg {
    width: 16px;
    height: 16px;
  }

  .user-avatar {
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #22d3ee, #8b5cf6);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    transition: transform .2s;
    display: flex;
  }

  .user-avatar:hover {
    transform: scale(1.05);
  }

  .circle-avatar {
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    margin-right: 4px;
    padding: 0;
    transition: transform .2s, filter .2s;
    display: flex;
    position: relative;
  }

  .circle-avatar:hover {
    filter: brightness(1.15);
    transform: scale(1.04);
  }

  .circle-avatar:active {
    transform: scale(.97);
  }

  .circle-avatar-ring {
    width: 100%;
    height: 100%;
    color: var(--circle-color, #7c86ff);
    transition: color .2s;
    position: absolute;
  }

  .circle-avatar:hover .circle-avatar-ring {
    color: var(--circle-color, #7c86ff);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .circle-avatar:hover .circle-avatar-ring {
      color: color-mix(in srgb, var(--circle-color, #7c86ff), white 15%);
    }
  }

  .circle-avatar-initials {
    z-index: 1;
    color: #fafafa;
    letter-spacing: .03em;
    -webkit-user-select: none;
    user-select: none;
    font-size: 16px;
    font-weight: 700;
    position: relative;
  }

  .wallet-balance {
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    height: 38px;
    color: var(--color-amber);
    letter-spacing: .02em;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    background: rgba(24, 24, 27, .9);
    border: 1px solid rgba(251, 191, 36, .2);
    border-radius: 8px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .2s;
    display: flex;
  }

  .wallet-balance:hover {
    border-color: rgba(251, 191, 36, .45);
  }

  .wallet-balance-icon {
    opacity: .85;
    align-items: center;
    display: flex;
  }

  .wallet-balance-amount {
    font-variant-numeric: tabular-nums;
  }

  .wallet-balance-unit {
    opacity: .6;
    font-size: 11px;
    font-weight: 500;
  }

  .wallet-faucet-btn {
    width: 22px;
    height: 22px;
    color: var(--color-amber);
    cursor: pointer;
    background: rgba(251, 191, 36, .1);
    border: 1px solid rgba(251, 191, 36, .3);
    border-radius: 6px;
    place-items: center;
    margin-left: 2px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 0;
    transition: all .15s;
    display: inline-grid;
  }

  .wallet-faucet-btn:hover:not(:disabled) {
    background: rgba(251, 191, 36, .2);
    border-color: rgba(251, 191, 36, .5);
  }

  .wallet-faucet-btn:disabled {
    opacity: .5;
    cursor: wait;
  }

  .purchase-modal-backdrop {
    z-index: 200000;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, .65);
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .purchase-modal {
    background: var(--color-surface, #18181b);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    margin: 16px;
    padding: 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  }

  .purchase-modal-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    display: flex;
  }

  .purchase-modal-header h2 {
    color: var(--color-text, #e4e4e7);
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }

  .purchase-modal-close {
    color: var(--color-text-muted, #71717a);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    place-items: center;
    padding: 4px;
    transition: color .15s;
    display: grid;
  }

  .purchase-modal-close:hover {
    color: var(--color-text, #e4e4e7);
  }

  .purchase-section {
    margin-bottom: 16px;
  }

  .purchase-label {
    color: var(--color-text-muted, #71717a);
    margin-bottom: 8px;
    font-size: 12px;
    display: block;
  }

  .purchase-quick-picks {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    display: grid;
  }

  .purchase-pick-btn {
    color: var(--color-text-secondary, #a1a1aa);
    cursor: pointer;
    text-align: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
    transition: all .15s;
  }

  .purchase-pick-btn:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .15);
  }

  .purchase-pick-btn.selected {
    color: #fbbf24;
    background: rgba(251, 191, 36, .08);
    border-color: rgba(251, 191, 36, .5);
  }

  .purchase-amount-input, .purchase-threshold-input {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    align-items: center;
    padding: 0 12px;
    transition: border-color .15s;
    display: flex;
  }

  .purchase-amount-input:focus-within {
    border-color: rgba(251, 191, 36, .4);
  }

  .purchase-threshold-input:focus-within {
    border-color: rgba(251, 191, 36, .4);
  }

  .purchase-amount-input input, .purchase-threshold-input input {
    min-width: 0;
    color: var(--color-text, #e4e4e7);
    font-variant-numeric: tabular-nums;
    background: none;
    border: none;
    outline: none;
    flex: 1;
    padding: 8px 0;
    font-size: 13px;
  }

  .purchase-amount-input input::placeholder {
    color: var(--color-text-muted, #71717a);
    opacity: .6;
  }

  .purchase-threshold-input input::placeholder {
    color: var(--color-text-muted, #71717a);
    opacity: .6;
  }

  .purchase-amount-unit {
    color: var(--color-text-muted, #71717a);
    flex-shrink: 0;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 500;
  }

  .purchase-auto-topup {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 12px;
  }

  .purchase-auto-topup-row {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .purchase-auto-topup-text {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .purchase-auto-topup-title {
    color: var(--color-text, #e4e4e7);
    font-size: 13px;
    font-weight: 500;
  }

  .purchase-auto-topup-desc {
    color: var(--color-text-muted, #71717a);
    font-size: 11px;
  }

  .purchase-toggle {
    cursor: pointer;
    background: rgba(255, 255, 255, .12);
    border: none;
    border-radius: 10px;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    padding: 0;
    transition: background .2s;
    position: relative;
  }

  .purchase-toggle.on {
    background: #fbbf24;
  }

  .purchase-toggle-knob {
    background: #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    transition: transform .2s;
    position: absolute;
    top: 3px;
    left: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  }

  .purchase-toggle.on .purchase-toggle-knob {
    transform: translateX(16px);
  }

  .purchase-threshold-row {
    border-top: 1px solid rgba(255, 255, 255, .05);
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    display: flex;
  }

  .purchase-threshold-label {
    color: var(--color-text-muted, #71717a);
    white-space: nowrap;
    font-size: 12px;
  }

  .purchase-threshold-row .purchase-threshold-input {
    flex: 1;
  }

  .purchase-price-summary {
    text-align: center;
    background: rgba(251, 191, 36, .04);
    border: 1px solid rgba(251, 191, 36, .15);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 10px;
  }

  .purchase-price-amount {
    color: #fbbf24;
    font-size: 15px;
    font-weight: 600;
    display: block;
  }

  .purchase-price-note {
    color: var(--color-text-muted, #71717a);
    margin-top: 4px;
    font-size: 11px;
    display: block;
  }

  .purchase-error {
    color: #f87171;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .purchase-submit-btn {
    letter-spacing: .01em;
    cursor: pointer;
    color: #18181b;
    background: #fbbf24;
    border: none;
    border-radius: 8px;
    width: 100%;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, opacity .15s;
    display: block;
  }

  .purchase-submit-btn:hover:not(.disabled) {
    background: #f59e0b;
  }

  .purchase-submit-btn.disabled {
    opacity: .35;
    cursor: not-allowed;
  }

  .purchase-footer {
    color: var(--color-text-muted, #71717a);
    text-align: center;
    opacity: .7;
    margin: 12px 0 0;
    font-size: 11px;
  }

  .tx-history {
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
  }

  .tx-history-header {
    border-bottom: 1px solid #27272a;
    padding: 8px 12px;
  }

  .tx-history-title {
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
    font-weight: 600;
  }

  .tx-history-loading, .tx-history-empty {
    text-align: center;
    color: #71717a;
    padding: 16px 12px;
    font-size: 13px;
  }

  .tx-history-list {
    flex-direction: column;
    display: flex;
  }

  .tx-row {
    border-bottom: 1px solid rgba(39, 39, 42, .5);
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: 12px;
    display: flex;
  }

  .tx-row:last-child {
    border-bottom: none;
  }

  .tx-row-left {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .tx-row-type {
    color: #e4e4e7;
    text-transform: capitalize;
    font-weight: 600;
  }

  .tx-row-peer {
    color: #71717a;
    font-family: monospace;
    font-size: 11px;
  }

  .tx-row-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    display: flex;
  }

  .tx-row-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .tx-incoming .tx-row-amount {
    color: #4ade80;
  }

  .tx-outgoing .tx-row-amount {
    color: #f87171;
  }

  .tx-row-block {
    color: #52525b;
    font-family: monospace;
    font-size: 10px;
  }

  .user-dropdown {
    z-index: 1000;
    background: rgba(24, 24, 27, .98);
    border: 1px solid #3f3f46;
    border-radius: 8px;
    min-width: 200px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
  }

  .user-dropdown-header {
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    display: flex;
  }

  .user-dropdown-name {
    color: #fafafa;
    font-size: 14px;
    font-weight: 600;
  }

  .user-dropdown-email {
    color: #a1a1aa;
    font-size: 12px;
  }

  .user-dropdown-divider {
    background: #3f3f46;
    height: 1px;
    margin: 0;
  }

  .user-dropdown-item {
    color: #d4d4d8;
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    transition: background .15s;
  }

  .user-dropdown-item:hover {
    color: #fafafa;
    background: rgba(255, 255, 255, .08);
  }

  .status-bar {
    z-index: 35;
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-moon-400);
    transition: max-height .3s var(--easing-out, cubic-bezier(.25, 0, 0, 1));
    background: rgba(24, 24, 27, .92);
    border-top: 1px solid rgba(255, 255, 255, .1);
    flex-direction: column;
    max-height: 42px;
    font-size: 12px;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }

  .status-bar-expanded {
    border-top: 1px solid rgba(255, 255, 255, .15);
    max-height: 500px;
    overflow-y: auto;
  }

  .status-bar-main {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    display: flex;
  }

  .status-bar-main:hover {
    background: rgba(255, 255, 255, .02);
  }

  .status-bar-detail {
    border-top: 1px solid rgba(255, 255, 255, .08);
    flex-direction: column;
    gap: 14px;
    padding: 12px 20px 16px;
    display: flex;
  }

  .stats-detail-header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .stats-summary {
    gap: 8px;
    display: flex;
  }

  .stats-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    flex-direction: column;
    flex: 1;
    align-items: center;
    min-width: 0;
    padding: 12px 8px 10px;
    display: flex;
  }

  .stats-card-value {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--color-moon-100);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
  }

  .stats-card-value.success {
    color: var(--color-success, #00bb7e);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-card-value.success {
      color: var(--color-success, lab(66.9741% -58.0824 20.0982));
    }
  }

  .stats-card-value.warning {
    color: #edb200;
    color: lab(76.3879% 14.5774 98.4558);
  }

  .stats-card-value.danger {
    color: var(--color-error, #fb2c38);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-card-value.danger {
      color: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .stats-card-value.muted {
    color: var(--color-moon-600);
  }

  .stats-card-label {
    color: var(--color-moon-500);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
    font-size: 10px;
  }

  .stats-context-label {
    color: var(--color-moon-400);
    padding: 0 2px;
    font-size: 11px;
  }

  .stats-context-label span {
    color: var(--color-moon-200);
    font-weight: 500;
  }

  .stats-element-header {
    color: var(--color-moon-600);
    letter-spacing: .06em;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    align-items: center;
    gap: 12px;
    padding: 6px 8px 4px;
    font-size: 10px;
    display: flex;
  }

  .stats-col-name {
    flex-shrink: 0;
    min-width: 160px;
  }

  .stats-col-metric {
    text-align: right;
    min-width: 48px;
  }

  .stats-col-bar {
    flex: 1;
  }

  .stats-empty {
    color: var(--color-moon-600);
    text-align: center;
    padding: 12px 0;
    font-size: 11px;
  }

  .status-section {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .status-section-left {
    flex: none;
    justify-content: flex-start;
  }

  .status-section-center {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  .status-section-right {
    flex: none;
    justify-content: flex-end;
  }

  .status-connection {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .connection-dot {
    background: var(--color-moon-600);
    border-radius: 50%;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    transition: background-color .3s, box-shadow .3s;
  }

  .connection-dot.connected {
    background: var(--color-success, #00bb7e);
    box-shadow: 0 0 8px rgba(0, 187, 126, .5);
    box-shadow: 0 0 8px lab(66.9741% -58.0824 20.0982 / .5);
  }

  @supports (color: lab(0% 0 0)) {
    .connection-dot.connected {
      background: var(--color-success, lab(66.9741% -58.0824 20.0982));
    }
  }

  .connection-dot.connecting {
    background: var(--color-warning, #f99c00);
    animation: 1s ease-in-out infinite status-pulse;
  }

  @supports (color: lab(0% 0 0)) {
    .connection-dot.connecting {
      background: var(--color-warning, lab(72.7153% 31.942 97.8348));
    }
  }

  .connection-dot.disconnected {
    background: var(--color-error, #fb2c38);
  }

  @supports (color: lab(0% 0 0)) {
    .connection-dot.disconnected {
      background: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .connection-label {
    color: var(--color-moon-300);
    white-space: nowrap;
    font-size: 12px;
  }

  @keyframes status-pulse {
    0%, 100% {
      opacity: 1;
    }

    50% {
      opacity: .5;
    }
  }

  .status-context-summary {
    color: var(--color-moon-400);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
  }

  .status-context-summary .summary-accent {
    font-weight: 500;
  }

  .status-context-summary .summary-accent.success {
    color: var(--color-success, #00bb7e);
  }

  @supports (color: lab(0% 0 0)) {
    .status-context-summary .summary-accent.success {
      color: var(--color-success, lab(66.9741% -58.0824 20.0982));
    }
  }

  .status-context-summary .summary-accent.warning {
    color: var(--color-warning, #f99c00);
  }

  @supports (color: lab(0% 0 0)) {
    .status-context-summary .summary-accent.warning {
      color: var(--color-warning, lab(72.7153% 31.942 97.8348));
    }
  }

  .status-context-summary .summary-accent.danger {
    color: var(--color-error, #fb2c38);
  }

  @supports (color: lab(0% 0 0)) {
    .status-context-summary .summary-accent.danger {
      color: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .status-context-summary .summary-accent.running {
    color: #2b81ff;
    color: lab(54.2241% 12.3718 -74.4836);
  }

  .status-right-zone {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .status-eval-chip {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
  }

  .status-eval-chip.muted {
    color: var(--color-moon-500);
  }

  .status-eval-chip.success {
    color: var(--color-success, #00bb7e);
    border-color: rgba(0, 187, 126, .25);
    border-color: lab(66.9741% -58.0824 20.0982 / .25);
  }

  @supports (color: lab(0% 0 0)) {
    .status-eval-chip.success {
      color: var(--color-success, lab(66.9741% -58.0824 20.0982));
    }
  }

  .status-eval-chip.warning {
    color: #edb200;
    color: lab(76.3879% 14.5774 98.4558);
    border-color: rgba(237, 178, 0, .25);
    border-color: lab(76.3879% 14.5774 98.4558 / .25);
  }

  .status-eval-chip.danger {
    color: var(--color-error, #fb2c38);
    border-color: rgba(251, 44, 56, .25);
    border-color: lab(55.4735% 75.1505 48.0805 / .25);
  }

  @supports (color: lab(0% 0 0)) {
    .status-eval-chip.danger {
      color: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .status-period-label {
    color: var(--color-moon-400);
    white-space: nowrap;
    font-size: 11px;
  }

  .status-expand-chevron {
    color: var(--color-moon-500);
    transition: transform .3s var(--easing-circ, cubic-bezier(.85, .09, .15, .91));
    font-size: 10px;
    line-height: 1;
    display: inline-flex;
  }

  .status-bar-expanded .status-expand-chevron {
    transform: rotate(180deg);
  }

  .status-item {
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .status-item.clickable {
    cursor: pointer;
    color: var(--color-moon-400);
    background: none;
    border: none;
    border-radius: 6px;
    margin: -3px 0;
    padding: 3px 8px;
    font-size: 12px;
    transition: background .15s;
  }

  .status-item.clickable:hover {
    background: rgba(255, 255, 255, .08);
  }

  .status-item.clickable:active {
    background: rgba(255, 255, 255, .12);
  }

  .status-icon {
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px;
    display: flex;
  }

  .status-icon svg {
    width: 14px;
    height: 14px;
  }

  .status-icon.alert {
    color: var(--color-warning, #f99c00);
  }

  @supports (color: lab(0% 0 0)) {
    .status-icon.alert {
      color: var(--color-warning, lab(72.7153% 31.942 97.8348));
    }
  }

  .status-icon.running {
    color: #2b81ff;
    color: lab(54.2241% 12.3718 -74.4836);
    animation: 1.5s linear infinite status-spin;
  }

  .metric-value {
    color: var(--color-moon-200);
    font-weight: 500;
  }

  .metric-value.alert {
    color: var(--color-warning, #f99c00);
    font-weight: 600;
  }

  @supports (color: lab(0% 0 0)) {
    .metric-value.alert {
      color: var(--color-warning, lab(72.7153% 31.942 97.8348));
    }
  }

  .metric-value.running {
    color: #2b81ff;
    color: lab(54.2241% 12.3718 -74.4836);
  }

  .metric-label {
    color: var(--color-moon-400);
  }

  @keyframes status-spin {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .panel-btn {
    position: relative;
  }

  .panel-badge {
    color: #fff;
    background: #ef4444;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    position: absolute;
    top: -4px;
    right: -4px;
  }

  .floating-panel {
    pointer-events: auto;
    background: linear-gradient(rgba(20, 20, 23, .97) 0%, rgba(9, 9, 11, .99) 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    flex-direction: column;
    transition: box-shadow .15s;
    display: flex;
    position: fixed;
    overflow: visible;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, .5), 0 4px 16px -4px rgba(0, 0, 0, .3), inset 0 1px rgba(63, 63, 70, .2);
  }

  .floating-panel-fullscreen {
    box-shadow: none;
    border: none;
    border-radius: 0;
  }

  .floating-panel-fullscreen .floating-panel-header {
    border-radius: 0;
    height: 28px;
  }

  .floating-panel-fullscreen .floating-panel-content {
    border-radius: 0;
  }

  .floating-panel-header {
    -webkit-user-select: none;
    user-select: none;
    background: rgba(39, 39, 42, .3);
    border-bottom: 1px solid #27272a;
    border-radius: 12px 12px 0 0;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    padding: 0 8px 0 12px;
    display: flex;
  }

  .floating-panel-header.cursor-grab {
    cursor: grab;
  }

  .floating-panel-header.cursor-grab:active {
    cursor: grabbing;
  }

  .floating-panel-header .panel-title {
    color: #d4d4d8;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
  }

  .panel-controls {
    opacity: .6;
    align-items: center;
    gap: 2px;
    transition: opacity .15s;
    display: flex;
  }

  .floating-panel-header:hover .panel-controls {
    opacity: 1;
  }

  .panel-control {
    color: #71717a;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    transition: all .15s;
    display: flex;
  }

  .panel-control:hover {
    color: #d4d4d8;
    background: #27272a;
  }

  .panel-control-close:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .2);
  }

  .floating-panel-content {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    border-radius: 0 0 12px 12px;
    flex: 1;
    min-height: 100px;
    overflow: auto;
  }

  .floating-panel-content:hover {
    scrollbar-color: rgba(255, 255, 255, .06) transparent;
  }

  .panel-placeholder {
    color: #71717a;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 24px;
    display: flex;
  }

  .resize-n, .resize-s {
    cursor: ns-resize;
    height: 8px;
    left: 16px;
    right: 16px;
  }

  .resize-n {
    top: -4px;
  }

  .resize-s {
    bottom: -4px;
  }

  .resize-e, .resize-w {
    cursor: ew-resize;
    width: 8px;
    top: 16px;
    bottom: 16px;
  }

  .resize-e {
    right: -4px;
  }

  .resize-w {
    left: -4px;
  }

  .resize-ne, .resize-nw, .resize-se, .resize-sw {
    border-radius: 4px;
    width: 16px;
    height: 16px;
  }

  .resize-ne {
    cursor: nesw-resize;
    top: -4px;
    right: -4px;
  }

  .resize-nw {
    cursor: nwse-resize;
    top: -4px;
    left: -4px;
  }

  .resize-se {
    cursor: nwse-resize;
    bottom: -4px;
    right: -4px;
  }

  .resize-sw {
    cursor: nesw-resize;
    bottom: -4px;
    left: -4px;
  }

  .zoom-indicator {
    z-index: 100;
    color: #a1a1aa;
    backdrop-filter: blur(4px);
    background: rgba(24, 24, 27, .9);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    position: absolute;
    top: 84px;
    left: 16px;
  }

  .breadcrumb-indicator {
    z-index: 100;
    color: #a78bfa;
    backdrop-filter: blur(4px);
    cursor: pointer;
    background: rgba(24, 24, 27, .9);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    transition: all .2s;
    position: absolute;
    top: 116px;
    left: 16px;
  }

  .breadcrumb-indicator:hover {
    color: #c4b5fd;
    background: rgba(39, 39, 42, .9);
  }

  .login-modal-overlay {
    z-index: 10000;
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, .85);
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .login-modal {
    background: linear-gradient(rgba(24, 24, 27, .98) 0%, rgba(9, 9, 11, .99) 100%);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    margin: 16px;
    padding: 32px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 20px 50px -10px rgba(0, 0, 0, .7), 0 10px 30px -5px rgba(0, 0, 0, .5);
  }

  .login-modal-header {
    text-align: center;
    margin-bottom: 24px;
  }

  .login-modal-header h2 {
    color: #f4f4f5;
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
  }

  .login-modal-subtitle {
    color: #a1a1aa;
    margin: 0;
    font-size: 14px;
  }

  .login-modal-form {
    flex-direction: column;
    gap: 16px;
    display: flex;
  }

  .login-modal-form .form-group {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .login-modal-form label {
    color: #d4d4d8;
    font-size: 13px;
    font-weight: 500;
  }

  .login-modal-form input {
    color: #f4f4f5;
    background: rgba(39, 39, 42, .5);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    outline: none;
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    transition: all .2s;
  }

  .login-modal-form input::placeholder {
    color: #71717a;
  }

  .login-modal-form input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .15);
  }

  .login-modal-form .form-actions {
    margin-top: 8px;
  }

  .login-modal-form .form-footer {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 16px;
    padding-top: 16px;
  }

  .login-modal-form .form-footer p {
    color: #a1a1aa;
    margin: 0;
    font-size: 13px;
  }

  .link-btn {
    color: #8b5cf6;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s;
  }

  .link-btn:hover {
    color: #a78bfa;
    text-decoration: underline;
  }

  .form-error {
    color: #f87171;
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px 16px;
    font-size: 13px;
  }

  .input-error {
    color: #f87171;
    margin-top: 4px;
    font-size: 12px;
  }

  .password-requirements {
    background: rgba(39, 39, 42, .3);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 12px 14px;
    display: flex;
  }

  .password-requirements .requirement {
    color: #71717a;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    transition: color .15s;
    display: flex;
  }

  .password-requirements .requirement.met {
    color: #10b981;
  }

  .password-requirements .requirement .indicator {
    text-align: center;
    width: 16px;
    font-size: 12px;
    transition: color .15s;
  }

  .password-requirements .requirement.met .indicator {
    color: #10b981;
  }

  .btn {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s;
    display: inline-flex;
  }

  .btn-primary {
    color: #fff;
    background: #7c3aed;
  }

  .btn-primary:hover:not(:disabled) {
    background: #8b5cf6;
  }

  .btn-primary:disabled {
    color: rgba(167, 139, 250, .6);
    cursor: not-allowed;
    box-shadow: none;
    background: rgba(124, 58, 237, .3);
    border: 1px solid rgba(124, 58, 237, .2);
  }

  .btn-primary:disabled:hover {
    background: rgba(124, 58, 237, .3);
    transform: none;
  }

  .btn-tooltip-wrapper {
    width: 100%;
    position: relative;
  }

  .btn-tooltip {
    color: #e4e4e7;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    transition: opacity .2s, visibility .2s;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  }

  .btn-tooltip:after {
    content: "";
    border: 8px solid rgba(0, 0, 0, 0);
    border-top-color: #18181b;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .btn-tooltip-wrapper:hover .btn-tooltip {
    opacity: 1;
    visibility: visible;
  }

  .btn-tooltip-wrapper:focus-within .btn-tooltip {
    opacity: 1;
    visibility: visible;
  }

  .btn-large {
    padding: 14px 24px;
    font-size: 15px;
  }

  .btn-full {
    width: 100%;
  }

  .tree-view {
    padding: var(--spacing-xs);
    -webkit-user-select: none;
    user-select: none;
    font-size: 13px;
  }

  .tree-item-wrapper {
    margin: 0;
    padding: 0;
  }

  .tree-item {
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 4px;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    transition: background-color .1s, color .1s;
    display: flex;
  }

  .tree-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .05);
  }

  .tree-item.selected {
    color: var(--text-primary);
    background: rgba(124, 58, 237, .2);
  }

  .tree-item-chevron {
    opacity: .5;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    transition: transform .15s, opacity .15s;
    display: flex;
    transform: rotate(0);
  }

  .tree-item-chevron:hover {
    opacity: 1;
  }

  .tree-item-chevron.expanded {
    transform: rotate(90deg);
  }

  .tree-item-chevron.hidden {
    visibility: hidden;
  }

  .tree-item-chevron svg {
    width: 12px;
    height: 12px;
  }

  .tree-item-icon {
    opacity: .8;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  .tree-item-icon svg {
    width: 100%;
    height: 100%;
  }

  .tree-item-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    overflow: hidden;
  }

  .tree-item-children {
    margin-left: 0;
  }

  .panel-section {
    border-bottom: 1px solid var(--border-color);
  }

  .panel-section:last-child {
    border-bottom: none;
  }

  .panel-section-header {
    cursor: pointer;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    transition: background-color .1s;
    display: flex;
  }

  .panel-section-header:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .03);
  }

  .panel-section-chevron {
    opacity: .5;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    transition: transform .15s;
    display: flex;
    transform: rotate(0);
  }

  .panel-section-chevron.expanded {
    transform: rotate(90deg);
  }

  .panel-section-chevron svg {
    width: 12px;
    height: 12px;
  }

  .panel-section-title {
    flex: 1;
  }

  .panel-section-badge {
    color: var(--color-moon-300);
    background: rgba(124, 58, 237, .3);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
  }

  .panel-section-content {
    padding: 0;
  }

  .explorer-content {
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .explorer-content .panel-section-content {
    max-height: 300px;
    overflow-y: auto;
  }

  .explorer-git-actions {
    align-items: center;
    gap: 6px;
    padding: 2px 8px 4px 24px;
    display: flex;
    position: relative;
  }

  .explorer-git-menu-btn {
    border: 1px solid var(--color-moon-700);
    color: var(--color-moon-400);
    cursor: pointer;
    background: none;
    border-radius: 3px;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-size: 10px;
    transition: all .15s;
    display: inline-flex;
  }

  .explorer-git-menu-btn:hover {
    background: var(--color-moon-800);
    color: var(--color-moon-200);
  }

  .explorer-git-chevron {
    font-size: 9px;
  }

  .explorer-git-dropdown {
    z-index: 100;
    background: var(--color-moon-900);
    border: 1px solid var(--color-moon-700);
    border-radius: 4px;
    flex-direction: column;
    min-width: 140px;
    padding: 2px;
    display: flex;
    position: absolute;
    top: 100%;
    left: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  }

  .explorer-git-action {
    text-align: left;
    width: 100%;
    color: var(--color-moon-300);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 11px;
    transition: background .1s;
    display: block;
  }

  .explorer-git-action:hover {
    background: var(--color-moon-800);
    color: var(--color-moon-100);
  }

  .explorer-git-divider {
    border: none;
    border-top: 1px solid var(--color-moon-700);
    margin: 4px 0;
  }

  .explorer-git-status {
    color: var(--color-moon-500);
    font-size: 10px;
  }

  .explorer-git-status.ok {
    color: #22c55e;
  }

  .explorer-empty {
    text-align: center;
    padding: 16px;
  }

  .explorer-header {
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    display: flex;
  }

  .explorer-search-row {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .explorer-search-row .search-input-wrapper {
    flex: 1;
  }

  .search-mode-toggle {
    background: rgba(0, 0, 0, .2);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    overflow: hidden;
  }

  .search-mode-btn {
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 6px 8px;
    transition: all .15s;
    display: flex;
  }

  .search-mode-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .05);
  }

  .search-mode-btn.active {
    background: var(--color-primary);
    color: #fff;
  }

  .search-mode-btn svg {
    width: 14px;
    height: 14px;
  }

  .vector-target-selector {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .vector-selector-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 10px;
  }

  .vector-target-chips {
    flex-wrap: wrap;
    gap: 4px;
    display: flex;
  }

  .vector-target-chip {
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    background: rgba(0, 0, 0, .2);
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 11px;
    transition: all .15s;
  }

  .vector-target-chip:hover {
    color: var(--text-secondary);
    border-color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
  }

  .vector-target-chip.active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(99, 102, 241, .2);
  }

  .semantic-results-section {
    border-bottom: 1px solid var(--border-color);
    max-height: 200px;
    overflow-y: auto;
  }

  .semantic-results-header {
    background: rgba(99, 102, 241, .1);
    border-bottom: 1px solid rgba(99, 102, 241, .2);
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    display: flex;
  }

  .semantic-results-title {
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11px;
    font-weight: 600;
  }

  .semantic-loading {
    gap: 3px;
    display: flex;
  }

  .loading-dot {
    background: var(--color-primary);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    animation: 1.2s ease-in-out infinite loadingDot;
  }

  .loading-dot:first-child {
    animation-delay: 0s;
  }

  .loading-dot:nth-child(2) {
    animation-delay: .2s;
  }

  .loading-dot:nth-child(3) {
    animation-delay: .4s;
  }

  @keyframes loadingDot {
    0%, 80%, 100% {
      opacity: .5;
      transform: scale(.6);
    }

    40% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .semantic-error {
    color: var(--color-error);
    background: rgba(239, 68, 68, .1);
    padding: 8px 12px;
    font-size: 12px;
  }

  .semantic-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 12px;
    font-size: 12px;
  }

  .semantic-results-list {
    flex-direction: column;
    display: flex;
  }

  .semantic-result-item {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    transition: background-color .1s;
    display: flex;
  }

  .semantic-result-item:hover {
    background: rgba(255, 255, 255, .03);
  }

  .semantic-result-info {
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    display: flex;
  }

  .semantic-result-name {
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    overflow: hidden;
  }

  .semantic-result-type {
    color: var(--text-muted);
    background: rgba(0, 0, 0, .2);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .semantic-result-meta {
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .semantic-result-vector {
    color: var(--text-muted);
    text-transform: capitalize;
    font-size: 10px;
  }

  .score-badge {
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
  }

  .score-badge.score-excellent {
    color: #10b981;
    background: rgba(16, 185, 129, .2);
  }

  .score-badge.score-good {
    color: #6366f1;
    background: rgba(99, 102, 241, .2);
  }

  .score-badge.score-fair {
    color: #f97316;
    background: rgba(249, 115, 22, .2);
  }

  .score-badge.score-low {
    color: #9ca3af;
    background: rgba(156, 163, 175, .2);
  }

  .score-threshold-slider {
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    display: flex;
  }

  .score-threshold-label {
    color: var(--text-muted);
    font-size: 11px;
  }

  .score-threshold-value {
    color: var(--text-primary);
    font-weight: 600;
  }

  .score-slider {
    appearance: none;
    background: rgba(255, 255, 255, .1);
    border-radius: 2px;
    width: 100%;
    height: 4px;
  }

  .score-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--color-primary);
    cursor: pointer;
    border-radius: 50%;
    width: 12px;
    height: 12px;
  }

  .score-slider::-moz-range-thumb {
    background: var(--color-primary);
    cursor: pointer;
    border: none;
    border-radius: 50%;
    width: 12px;
    height: 12px;
  }

  .hybrid-results-section {
    border-bottom: 1px solid var(--border-color);
    max-height: 300px;
    overflow-y: auto;
  }

  .hybrid-results-header {
    background: rgba(99, 102, 241, .05);
    border-bottom: 1px solid rgba(99, 102, 241, .1);
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    display: flex;
  }

  .hybrid-results-title {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11px;
    font-weight: 600;
  }

  .hybrid-results-count {
    color: var(--text-muted);
    margin-left: auto;
    font-size: 10px;
  }

  .hybrid-loading {
    gap: 3px;
    display: flex;
  }

  .hybrid-error {
    color: var(--color-error);
    background: rgba(239, 68, 68, .1);
    padding: 8px 12px;
    font-size: 12px;
  }

  .hybrid-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 12px;
    font-size: 12px;
  }

  .hybrid-results-list {
    flex-direction: column;
    display: flex;
  }

  .hybrid-result-item {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    transition: background-color .1s;
    display: flex;
  }

  .hybrid-result-item:hover {
    background: rgba(255, 255, 255, .03);
  }

  .hybrid-result-info {
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    display: flex;
  }

  .hybrid-result-name {
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    overflow: hidden;
  }

  .hybrid-result-type {
    color: var(--text-muted);
    background: rgba(0, 0, 0, .2);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .hybrid-result-meta {
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .hybrid-result-vector {
    color: var(--text-muted);
    text-transform: capitalize;
    font-size: 10px;
  }

  .match-source-badge {
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 9px;
    font-weight: 600;
  }

  .match-source-badge.match-text {
    color: #9ca3af;
    background: rgba(156, 163, 175, .2);
  }

  .match-source-badge.match-semantic {
    color: #6366f1;
    background: rgba(99, 102, 241, .2);
  }

  .match-source-badge.match-both {
    color: #10b981;
    background: rgba(16, 185, 129, .2);
  }

  .editor-content {
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .editor-tabs {
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, .3);
    flex-shrink: 0;
  }

  .editor-tabs-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .1) transparent;
    display: flex;
    overflow-x: auto;
  }

  .editor-tabs-scroll::-webkit-scrollbar {
    height: 4px;
  }

  .editor-tabs-scroll::-webkit-scrollbar-track {
    background: none;
  }

  .editor-tabs-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .1);
    border-radius: 2px;
  }

  .editor-tab {
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    min-width: 100px;
    max-width: 180px;
    color: var(--text-muted);
    background: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    transition: background-color .1s, color .1s;
    display: flex;
  }

  .editor-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .03);
  }

  .editor-tab.active {
    color: var(--text-primary);
    border-bottom: 2px solid var(--color-primary);
    background: rgba(255, 255, 255, .05);
    margin-bottom: -1px;
  }

  .editor-tab.preview .editor-tab-name {
    font-style: italic;
  }

  .editor-tab-icon {
    opacity: .7;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
  }

  .editor-tab-icon svg {
    width: 100%;
    height: 100%;
  }

  .editor-tab-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-size: 12px;
    overflow: hidden;
  }

  .editor-tab-close {
    opacity: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    transition: opacity .1s, background-color .1s;
    display: flex;
  }

  .editor-tab:hover .editor-tab-close, .editor-tab.active .editor-tab-close {
    opacity: .5;
  }

  .editor-tab-close:hover {
    background: rgba(255, 255, 255, .1);
    opacity: 1 !important;
  }

  .tab-close-icon svg {
    width: 10px;
    height: 10px;
  }

  .tab-dirty-dot {
    background: var(--color-primary);
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .monaco-container {
    width: 100%;
    height: 100%;
    min-height: 200px;
  }

  .monaco-loading {
    height: 100%;
    color: var(--text-muted);
    justify-content: center;
    align-items: center;
    font-size: 13px;
    display: flex;
  }

  .editor-monaco {
    height: 100%;
  }

  .editor-empty {
    text-align: center;
    height: 100%;
    color: var(--text-muted);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px;
    display: flex;
  }

  .editor-empty-icon {
    opacity: .3;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .editor-empty-icon svg {
    width: 100%;
    height: 100%;
  }

  .editor-empty h3 {
    color: var(--text-secondary);
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
  }

  .editor-empty p {
    margin: 0 0 24px;
    font-size: 13px;
  }

  .editor-empty-shortcuts {
    flex-direction: column;
    gap: 8px;
    display: flex;
  }

  .shortcut-item {
    align-items: center;
    gap: 12px;
    font-size: 12px;
    display: flex;
  }

  .shortcut-item kbd {
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    text-align: center;
    background: rgba(255, 255, 255, .05);
    border-radius: 4px;
    min-width: 80px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .editor-breadcrumb {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    background: rgba(0, 0, 0, .2);
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 12px;
    font-size: 12px;
    display: flex;
    overflow: hidden;
  }

  .breadcrumb-segment {
    cursor: default;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 4px;
    min-width: 0;
    max-width: 140px;
    padding: 2px 4px;
    transition: background-color .1s, color .1s;
    overflow: hidden;
  }

  .breadcrumb-segment.navigable {
    cursor: pointer;
  }

  .breadcrumb-segment.navigable:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .05);
  }

  .breadcrumb-segment.current {
    color: var(--text-primary);
    cursor: default;
  }

  .breadcrumb-segment.current:hover {
    background: none;
  }

  .breadcrumb-separator {
    opacity: .3;
  }

  .panel-header-actions {
    opacity: 0;
    align-items: center;
    gap: 2px;
    transition: opacity .15s;
    display: flex;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
  }

  .panel-header:hover .panel-header-actions {
    opacity: 1;
  }

  .floating-panel:focus-within .panel-header-actions {
    opacity: 1;
  }

  .panel-header-actions .panel-btn {
    color: #71717a;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    font-size: 10px;
    transition: all .15s;
    display: flex;
  }

  .panel-header-actions .panel-btn svg {
    width: 12px;
    height: 12px;
  }

  .panel-header-actions .panel-btn:hover {
    color: #a1a1aa;
    background: #27272a;
  }

  .panel-header-actions .panel-close:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .2);
  }

  .text-muted {
    color: var(--text-muted);
  }

  .activity-panel {
    background: var(--bg-card);
    flex-direction: column;
    height: 100%;
    display: flex;
  }

  .activity-filter-bar {
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, .2);
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    display: flex;
  }

  .activity-search {
    width: 100%;
  }

  .activity-search .search-input {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 100%;
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-sans);
    background: rgba(255, 255, 255, .05);
    outline: none;
    padding: 8px 12px;
    transition: border-color .15s, background-color .15s;
  }

  .activity-search .search-input:focus {
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, .08);
  }

  .activity-search .search-input::placeholder {
    color: var(--text-muted);
  }

  .activity-categories {
    flex-wrap: wrap;
    gap: 6px;
    display: flex;
  }

  .category-toggle {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border-radius: 16px;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    transition: all .15s;
    display: flex;
  }

  .category-toggle:hover {
    border-color: var(--border-color-hover);
    background: rgba(255, 255, 255, .08);
  }

  .category-toggle.active {
    background: rgba(var(--color-primary), .15);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .category-toggle .category-icon {
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px;
    display: flex;
  }

  .category-toggle .category-icon svg {
    width: 14px;
    height: 14px;
  }

  .activity-feed {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    flex: 1;
    overflow-y: auto;
  }

  .activity-feed:hover {
    scrollbar-color: rgba(255, 255, 255, .08) transparent;
  }

  .activity-feed::-webkit-scrollbar {
    width: 5px;
  }

  .activity-feed::-webkit-scrollbar-track {
    background: none;
  }

  .activity-feed::-webkit-scrollbar-thumb {
    background: none;
    border-radius: 3px;
    transition: background .15s;
  }

  .activity-feed:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .08);
  }

  .activity-loading, .activity-error {
    color: var(--text-muted);
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px;
    font-size: 13px;
    display: flex;
  }

  .activity-error {
    color: var(--color-error);
  }

  .activity-error .error-icon {
    font-size: 16px;
  }

  .empty-state {
    text-align: center;
    background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(var(--circle-color-rgb), .025) 0%, transparent 70%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 24px;
    display: flex;
  }

  .empty-state .empty-icon {
    opacity: .3;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .empty-state .empty-icon svg {
    width: 48px;
    height: 48px;
  }

  .empty-state p {
    margin: 4px 0;
    font-size: 14px;
  }

  .event-item {
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    padding: 12px;
    transition: background-color .15s;
    display: grid;
  }

  .event-item:hover {
    background: rgba(255, 255, 255, .03);
  }

  .event-item.status-running {
    border-left: 3px solid var(--color-blue);
  }

  .event-item.status-success {
    border-left: 3px solid var(--color-success);
  }

  .event-item.status-error {
    border-left: 3px solid var(--color-error);
  }

  .event-item.status-cancelled {
    border-left: 3px solid var(--text-muted);
  }

  .event-item.status-waiting {
    border-left: 3px solid var(--color-warning);
  }

  .event-item.status-unread {
    background: rgba(var(--color-primary), .05);
  }

  .event-icon {
    color: var(--text-muted);
    justify-content: center;
    align-items: flex-start;
    padding-top: 2px;
    display: flex;
  }

  .event-icon svg {
    width: 18px;
    height: 18px;
  }

  .event-summary {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    display: flex;
  }

  .event-header {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .event-title {
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
  }

  .event-time {
    color: var(--text-muted);
    white-space: nowrap;
    font-size: 11px;
  }

  .event-message {
    color: var(--text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    overflow: hidden;
  }

  .event-path {
    color: var(--text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    overflow: hidden;
  }

  .event-status {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
    border-radius: 4px;
    align-items: flex-start;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    display: flex;
  }

  .event-status.status-running {
    color: var(--color-blue);
    background: rgba(99, 102, 241, .15);
  }

  .event-status.status-success {
    color: var(--color-success);
    background: rgba(16, 185, 129, .15);
  }

  .event-status.status-error {
    color: var(--color-error);
    background: rgba(239, 68, 68, .15);
  }

  .event-status.status-waiting {
    color: var(--color-warning);
    background: rgba(245, 158, 11, .15);
  }

  .event-detail {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, .2);
    grid-column: 1 / -1;
    margin-top: 12px;
    padding: 12px;
  }

  .detail-row {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 12px;
    display: flex;
  }

  .detail-row:last-child {
    margin-bottom: 0;
  }

  .detail-label {
    min-width: 80px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .detail-value {
    color: var(--text-primary);
  }

  .detail-section {
    border-top: 1px solid var(--border-color);
    margin-top: 12px;
    padding-top: 12px;
  }

  .section-label {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 500;
    display: block;
  }

  .trace-id {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, .05);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .error-message, .json-data, .log-body {
    font-family: var(--font-mono);
    border-radius: var(--border-radius);
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, .3);
    max-height: 200px;
    margin: 0;
    padding: 8px;
    font-size: 11px;
    line-height: 1.5;
    overflow-y: auto;
  }

  .error-message {
    color: var(--color-error);
  }

  .log-detail .severity-badge {
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
  }

  .severity-badge.severity-debug {
    color: #9ca3af;
    background: rgba(156, 163, 175, .15);
  }

  .severity-badge.severity-info {
    color: var(--color-blue);
    background: rgba(99, 102, 241, .15);
  }

  .severity-badge.severity-warn {
    color: var(--color-warning);
    background: rgba(245, 158, 11, .15);
  }

  .severity-badge.severity-error {
    color: var(--color-error);
    background: rgba(239, 68, 68, .15);
  }

  .log-scope {
    color: var(--text-secondary);
    margin-left: 8px;
    font-size: 12px;
  }

  .attributes-list {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .attribute {
    gap: 8px;
    font-size: 11px;
    display: flex;
  }

  .attr-key {
    color: var(--text-muted);
    font-family: var(--font-mono);
  }

  .attr-value {
    color: var(--text-primary);
    font-family: var(--font-mono);
  }

  .alert-detail .badge {
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
    display: inline-flex;
  }

  .badge-success {
    color: var(--color-success);
    background: rgba(16, 185, 129, .15);
  }

  .badge-warning {
    color: var(--color-warning);
    background: rgba(245, 158, 11, .15);
  }

  .component-list {
    flex-wrap: wrap;
    gap: 6px;
    display: flex;
  }

  .component-tag {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    display: inline-flex;
  }

  .action-link {
    color: var(--color-primary);
    font-size: 12px;
    text-decoration: none;
    transition: color .15s;
  }

  .action-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
  }

  .focused-execution {
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 8px 12px;
    display: flex;
    overflow-y: auto;
  }

  .focused-execution-header {
    background: var(--bg-card);
    z-index: 1;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    display: flex;
    position: sticky;
    top: 0;
  }

  .focused-run-id {
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-mono);
  }

  .back-btn {
    color: var(--text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    transition: all .15s;
  }

  .back-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .05);
  }

  .focused-execution-summary {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .02);
    border-radius: 8px;
    padding: 12px;
  }

  .focused-execution-summary.status-success {
    border-color: rgba(16, 185, 129, .3);
  }

  .focused-execution-summary.status-error {
    border-color: rgba(239, 68, 68, .3);
  }

  .focused-execution-logs {
    flex-direction: column;
    gap: 4px;
    display: flex;
    overflow-y: auto;
  }

  .focused-log-entry {
    background: rgba(255, 255, 255, .02);
    border-radius: 4px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
    display: flex;
  }

  .focused-log-entry .log-message {
    font-family: var(--font-mono);
    color: var(--text-primary);
    word-break: break-word;
    flex: 1;
    font-size: 11px;
  }

  .focused-log-entry .log-time {
    color: var(--text-muted);
    white-space: nowrap;
    font-size: 10px;
  }

  .activity-focus-badge {
    color: var(--color-primary);
    background: rgba(99, 102, 241, .15);
    border-radius: 12px;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
  }

  .activity-focus-badge .back-btn {
    color: var(--color-primary);
    padding: 0 2px;
    font-size: 10px;
  }

  .creation-step-indicator {
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    display: flex;
  }

  .creation-step-indicator .step {
    align-items: center;
    gap: var(--spacing-xs);
    opacity: .5;
    transition: opacity .2s;
    display: flex;
  }

  .creation-step-indicator .step.active {
    opacity: 1;
  }

  .creation-step-indicator .step-number {
    background: var(--color-primary);
    width: 20px;
    height: 20px;
    color: var(--text-primary);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
  }

  .creation-step-indicator .step-label {
    color: var(--text-secondary);
    font-size: 13px;
  }

  .creation-step-indicator .step.active .step-label {
    color: var(--text-primary);
  }

  .creation-step-indicator .step-divider {
    background: var(--border-color);
    width: 20px;
    height: 1px;
  }

  .props-panel {
    height: 100%;
    color: var(--text-primary);
    background: #191919;
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .props-error {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-error);
    background: rgba(239, 68, 68, .15);
    border-bottom: 1px solid rgba(239, 68, 68, .3);
    font-size: 12px;
  }

  .props-saving {
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-blue);
    background: rgba(99, 102, 241, .1);
    border-bottom: 1px solid rgba(99, 102, 241, .2);
    font-size: 12px;
    display: flex;
  }

  .props-saving-spinner {
    border: 2px solid rgba(99, 102, 241, .3);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    animation: .8s linear infinite spin;
  }

  .props-loading {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    height: 100%;
    color: var(--text-secondary);
    flex-direction: column;
    display: flex;
  }

  .props-empty {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    height: 100%;
    padding: var(--spacing-xl);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  .props-empty-icon {
    color: var(--text-muted);
    opacity: .5;
  }

  .props-empty-text {
    color: var(--text-muted);
    font-size: 13px;
  }

  .props-type-title {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
  }

  .props-type-grid {
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    display: grid;
  }

  .props-type-card {
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background: rgba(255, 255, 255, .03);
    flex-direction: column;
    transition: all .15s;
    display: flex;
  }

  .props-type-card:hover {
    border-color: var(--border-color-hover);
    background: rgba(255, 255, 255, .06);
    transform: translateY(-1px);
  }

  .props-type-icon {
    font-size: 24px;
  }

  .props-type-label {
    color: var(--text-secondary);
    font-size: 12px;
  }

  .props-form, .props-entity {
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow-y: auto;
  }

  .props-header {
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
    background: #262629;
    display: flex;
    position: sticky;
    top: 0;
  }

  .props-header-icon {
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, .05);
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    font-size: 20px;
    display: flex;
  }

  .props-header-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
  }

  .props-header-meta {
    align-items: center;
    gap: var(--spacing-sm);
    display: flex;
  }

  .props-header-type {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11px;
  }

  .props-header-status {
    color: var(--color-amber);
    background: rgba(251, 191, 36, .15);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .props-header-version {
    color: var(--color-blue);
    background: rgba(99, 102, 241, .15);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .props-section {
    border-bottom: 1px solid var(--border-color);
  }

  .props-section-defaults .props-section-title {
    opacity: .5;
  }

  .props-section.danger .props-section-header {
    color: var(--color-error);
  }

  .props-section-header {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    background: none;
    border: none;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    transition: background .15s;
    display: flex;
  }

  .props-section-header:hover {
    background: rgba(255, 255, 255, .03);
  }

  .props-section-title {
    text-align: left;
    flex: 1;
  }

  .props-section-chevron {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    justify-content: center;
    align-items: center;
    transition: transform .15s;
    display: flex;
  }

  .props-section-chevron.expanded {
    transform: rotate(180deg);
  }

  .props-section-content {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  }

  .props-section.collapsed .props-section-content {
    display: none;
  }

  .props-field {
    margin-bottom: var(--spacing-md);
  }

  .props-field:last-child {
    margin-bottom: 0;
  }

  .props-label {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11px;
    font-weight: 500;
    display: block;
  }

  .props-input, .props-textarea, .props-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-sans);
    background: rgba(255, 255, 255, .03);
    transition: border-color .15s, background .15s;
  }

  .props-input:focus, .props-textarea:focus, .props-select:focus {
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, .05);
    outline: none;
  }

  .props-input::placeholder {
    color: var(--text-muted);
  }

  .props-textarea::placeholder {
    color: var(--text-muted);
  }

  .props-input-slug {
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .props-textarea {
    resize: vertical;
    min-height: 80px;
  }

  .props-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    padding-right: 32px;
  }

  .props-hint {
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    font-size: 11px;
    display: block;
  }

  .props-description {
    color: var(--text-secondary);
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .props-io-list {
    gap: var(--spacing-xs);
    flex-direction: column;
    display: flex;
  }

  .props-io-item {
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, .02);
    font-size: 12px;
    display: flex;
  }

  .props-io-name {
    color: var(--text-primary);
    font-weight: 500;
  }

  .props-io-type {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
  }

  .props-io-default {
    color: var(--color-blue);
    font-family: var(--font-mono);
    margin-left: auto;
    font-size: 11px;
  }

  .props-tags {
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    display: flex;
  }

  .props-tag {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    display: inline-flex;
  }

  .props-section.danger .props-section-content {
    background: rgba(239, 68, 68, .05);
  }

  .props-danger-text {
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-md);
    font-size: 12px;
  }

  .props-actions {
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: #262629;
    margin-top: auto;
    display: flex;
  }

  .props-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    transition: all .15s;
  }

  .props-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .props-btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
  }

  .props-btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
  }

  .props-btn-secondary {
    color: var(--text-secondary);
    background: none;
  }

  .props-btn-secondary:hover:not(:disabled) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .05);
  }

  .props-btn-danger {
    color: var(--color-error);
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .3);
  }

  .props-btn-danger:hover:not(:disabled) {
    border-color: var(--color-error);
    background: rgba(239, 68, 68, .2);
  }

  .creation-popover-backdrop {
    z-index: 999;
    background: none;
    position: fixed;
    inset: 0;
  }

  .creation-popover {
    z-index: 1000;
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: rgba(24, 24, 27, .95);
    min-width: 280px;
    max-width: 320px;
    animation: .15s ease-out popover-appear;
    position: fixed;
    overflow: hidden;
    transform: translate(-50%, 10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
  }

  @keyframes popover-appear {
    from {
      opacity: 0;
      transform: translate(-50%);
    }

    to {
      opacity: 1;
      transform: translate(-50%, 10px);
    }
  }

  .creation-popover-header {
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .02);
    display: flex;
  }

  .creation-popover-back {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--border-radius);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: all .15s;
    display: flex;
  }

  .creation-popover-back:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .creation-popover-title {
    color: var(--text-primary);
    flex: 1;
    font-size: 14px;
    font-weight: 600;
  }

  .creation-popover-close {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--border-radius);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    transition: all .15s;
    display: flex;
  }

  .creation-popover-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .creation-popover-content {
    padding: var(--spacing-sm);
  }

  .creation-type-list {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .creation-type-option {
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    text-align: left;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0);
    transition: all .15s;
    display: flex;
  }

  .creation-type-option:hover, .creation-type-option.highlighted {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, .05);
  }

  .creation-type-option.highlighted {
    outline: 2px solid var(--color-main-500);
    outline-offset: -2px;
  }

  .creation-type-option:active {
    background: rgba(255, 255, 255, .08);
  }

  .creation-type-icon {
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, .05);
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    display: flex;
  }

  .creation-type-info {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    display: flex;
  }

  .creation-type-label {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
  }

  .creation-type-desc {
    color: var(--text-muted);
    font-size: 11px;
  }

  .creation-name-form {
    gap: var(--spacing-sm);
    flex-direction: column;
    display: flex;
  }

  .creation-name-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    background: rgba(255, 255, 255, .05);
    outline: none;
    font-size: 14px;
    transition: all .15s;
  }

  .creation-name-input:focus {
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, .2);
  }

  .creation-name-input::placeholder {
    color: var(--text-muted);
  }

  .creation-error {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    color: var(--color-error);
    background: rgba(239, 68, 68, .1);
    font-size: 12px;
  }

  .creation-submit-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    border-radius: var(--border-radius);
    color: #fff;
    cursor: pointer;
    border: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .15s;
  }

  .creation-submit-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
  }

  .creation-submit-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  @keyframes creation-fade-in {
    from {
      opacity: 0;
      transform: translate(-50%, -50%)scale(.95);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%)scale(1);
    }
  }

  @keyframes creation-spin {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .creation-input-backdrop {
    z-index: 1000;
    background: none;
    position: fixed;
    inset: 0;
  }

  .creation-input-container {
    z-index: 1001;
    background: var(--color-main-800);
    border: 1px dashed var(--color-main-500);
    -webkit-backdrop-filter: blur(16px);
    min-width: 280px;
    animation: creation-fade-in .3s var(--easing-circ) forwards;
    border-radius: 12px;
    padding: 16px;
    position: fixed;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05), inset 0 1px rgba(255, 255, 255, .05);
  }

  .creation-input-header {
    border-bottom: 1px solid;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    display: flex;
  }

  .creation-input-type {
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
  }

  .creation-input-form {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    display: grid;
  }

  .creation-input-field {
    background: var(--color-main-800);
    border: 1px solid var(--color-main-700);
    width: 100%;
    color: var(--color-main-200);
    transition: all .15s var(--easing-out);
    border-radius: 8px;
    outline: none;
    padding: 10px 14px;
    font-size: 14px;
  }

  .creation-input-field:hover:not(:focus) {
    border-color: var(--color-main-600);
  }

  .creation-input-field:focus {
    border-color: var(--color-main-600);
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 0 0 3px rgba(67, 45, 215, .15);
    box-shadow: 0 0 0 3px lab(32.4486% 49.2217 -84.6695 / .15);
  }

  .creation-input-field::placeholder {
    color: var(--color-main-400);
  }

  .creation-form-submit {
    background: var(--color-accent-700);
    border: 1px solid var(--color-accent-600);
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    transition: all .15s var(--easing-out);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    box-shadow: inset 0 1px rgba(133, 143, 255, .4);
    box-shadow: inset 0 1px lab(61.8766% 35.1622 -84.5703 / .4);
  }

  .creation-form-submit:hover:not(:disabled) {
    background: var(--color-accent-600);
    transform: scale(1.02);
  }

  .creation-form-submit:active:not(:disabled) {
    transform: scale(.98);
  }

  .creation-form-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
  }

  .creation-check-icon {
    width: 18px;
    height: 18px;
    transition: transform .15s var(--easing-out);
  }

  .creation-form-submit:hover:not(:disabled) .creation-check-icon {
    transform: scale(1.1);
  }

  .creation-spinner {
    width: 18px;
    height: 18px;
    animation: .8s linear infinite creation-spin;
  }

  .creation-spinner-track {
    opacity: .25;
  }

  .creation-spinner-head {
    opacity: .9;
  }

  .creation-input-hint {
    color: var(--color-main-400);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .05);
    margin-top: 8px;
    padding-top: 8px;
    font-size: 11px;
  }

  .creation-inline-form {
    z-index: 1001;
    background: var(--color-main-800);
    border: 1px dashed var(--color-main-500);
    animation: creation-inline-appear .2s var(--easing-circ) forwards;
    border-radius: 8px;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 3px;
    display: grid;
    position: fixed;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .05);
  }

  @keyframes creation-inline-appear {
    from {
      opacity: 0;
      transform: translate(-50%, -50%)scale(.9);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%)scale(1);
    }
  }

  .creation-inline-input {
    background: var(--color-main-800);
    border: 1px solid var(--color-main-700);
    width: 180px;
    color: var(--color-main-200);
    transition: all .15s var(--easing-out);
    border-radius: 6px;
    outline: none;
    padding: 8px 12px;
    font-size: 14px;
  }

  .creation-inline-input:hover:not(:focus):not(:disabled) {
    border-color: var(--color-main-600);
  }

  .creation-inline-input:focus {
    border-color: var(--color-main-500);
    box-shadow: 0 0 0 2px rgba(67, 45, 215, .15);
    box-shadow: 0 0 0 2px lab(32.4486% 49.2217 -84.6695 / .15);
  }

  .creation-inline-input::placeholder {
    color: var(--color-main-400);
    font-style: italic;
  }

  .creation-inline-input:disabled {
    opacity: .6;
  }

  .creation-inline-submit {
    background: var(--color-accent-700);
    border: 1px solid var(--color-accent-600);
    color: #fff;
    cursor: pointer;
    width: 36px;
    height: 36px;
    transition: all .15s var(--easing-out);
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    box-shadow: inset 0 1px rgba(133, 143, 255, .4);
    box-shadow: inset 0 1px lab(61.8766% 35.1622 -84.5703 / .4);
  }

  .creation-inline-submit:hover:not(:disabled) {
    background: var(--color-accent-600);
    transform: scale(1.05);
  }

  .creation-inline-submit:active:not(:disabled) {
    transform: scale(.95);
  }

  .creation-inline-submit:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
  }

  .creation-inline-icon {
    width: 16px;
    height: 16px;
    transition: transform .15s var(--easing-out);
  }

  .creation-inline-submit:hover:not(:disabled) .creation-inline-icon {
    transform: scale(1.1);
  }

  .creation-error-message {
    z-index: 1002;
    color: #ffb7b0;
    color: lab(81.4531% 37.2948 20.6652);
    max-width: 280px;
    animation: creation-error-appear .25s var(--easing-circ) forwards;
    background: #400c0c;
    background: lab(12.195% 25.2733 13.8856);
    border: 1px solid #972527;
    border: 1px solid lab(34.6852% 47.4343 29.205);
    border-radius: 8px;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    display: flex;
    position: fixed;
    transform: translateX(-50%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .05);
  }

  @keyframes creation-error-appear {
    from {
      opacity: 0;
      transform: translateX(-50%)translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateX(-50%)translateY(0);
    }
  }

  .creation-error-icon {
    color: #e85854;
    color: lab(57.6104% 56.6725 33.4484);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }

  .creation-error-message span {
    flex: 1;
    line-height: 1.4;
  }

  .creation-retry-btn {
    color: inherit;
    cursor: pointer;
    opacity: .8;
    transition: all .15s var(--easing-out);
    background: none;
    border: 1px solid;
    border-radius: 4px;
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 12px;
  }

  .creation-retry-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .1);
  }

  .creation-inline-input.has-error {
    border-color: #c53637;
    border-color: lab(45.9853% 56.8958 34.8481);
    box-shadow: 0 0 0 2px rgba(197, 54, 55, .2);
    box-shadow: 0 0 0 2px lab(45.9853% 56.8958 34.8481 / .2);
  }

  .creation-validation-hint {
    z-index: 1002;
    color: #ff847d;
    color: lab(69.5411% 46.9033 26.5749);
    animation: creation-hint-appear .15s var(--easing-out) forwards;
    text-align: center;
    max-width: 250px;
    font-size: 12px;
    position: fixed;
    transform: translateX(-50%);
  }

  .creation-slug-preview {
    z-index: 1002;
    color: var(--color-main-400);
    animation: creation-hint-appear .15s var(--easing-out) forwards;
    text-align: center;
    max-width: 250px;
    font-size: 11px;
    position: fixed;
    transform: translateX(-50%);
  }

  @keyframes creation-hint-appear {
    from {
      opacity: 0;
      transform: translateX(-50%)translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateX(-50%)translateY(0);
    }
  }

  .creation-type-backdrop {
    z-index: 1000;
    background: none;
    position: fixed;
    inset: 0;
  }

  .creation-type-popover {
    z-index: 1001;
    background: var(--color-main-800);
    border: 1px solid var(--color-main-600);
    -webkit-backdrop-filter: blur(16px);
    min-width: 320px;
    max-width: min(90vw, 900px);
    animation: creation-type-appear .2s var(--easing-circ) forwards;
    border-radius: 12px;
    outline: none;
    padding: 12px;
    position: fixed;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .05), inset 0 1px rgba(255, 255, 255, .05);
  }

  .creation-type-popover:focus {
    border-color: var(--color-main-500);
  }

  @keyframes creation-type-appear {
    from {
      opacity: 0;
      scale: .95;
    }

    to {
      opacity: 1;
      scale: 1;
    }
  }

  .creation-type-empty {
    min-width: 240px;
    max-width: 300px;
  }

  .creation-type-empty-message {
    color: var(--color-main-400);
    text-align: center;
    margin: 0;
    padding: 12px 8px;
    font-size: 13px;
    line-height: 1.5;
  }

  .creation-type-header {
    border-bottom: 1px solid var(--color-main-700);
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: flex;
  }

  .creation-type-title {
    color: var(--color-main-200);
    letter-spacing: .3px;
    font-size: 13px;
    font-weight: 600;
  }

  .creation-type-close {
    width: 24px;
    height: 24px;
    color: var(--color-main-400);
    cursor: pointer;
    transition: all .15s var(--easing-out);
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 18px;
    display: flex;
  }

  .creation-type-close:hover {
    background: var(--color-main-700);
    color: var(--color-main-200);
  }

  .creation-type-grid {
    flex-wrap: wrap;
    gap: 12px;
    display: flex;
  }

  .creation-type-category {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .creation-type-category-label {
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cat-color, var(--color-main-400));
    opacity: .8;
    font-size: 10px;
    font-weight: 600;
  }

  .creation-type-elements {
    flex-wrap: wrap;
    gap: 4px;
    display: flex;
  }

  .creation-type-element {
    cursor: pointer;
    transition: all .15s var(--easing-out);
    border-radius: 6px;
  }

  .creation-type-element:hover, .creation-type-element.highlighted {
    background: var(--color-main-700);
    transform: scale(1.05);
  }

  .env-section {
    flex-direction: column;
    display: flex;
  }

  .env-loading, .env-empty {
    padding: var(--spacing-lg);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .env-loading-text, .env-empty-text {
    color: var(--text-muted);
    font-size: 13px;
  }

  .env-content {
    flex-direction: column;
    display: flex;
  }

  .env-subsection {
    border-bottom: 1px solid var(--border-color);
  }

  .env-subsection:last-child {
    border-bottom: none;
  }

  .env-subsection-header {
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    cursor: pointer;
    background: none;
    border: none;
    transition: background-color .15s;
    display: flex;
  }

  .env-subsection-header:hover {
    background: rgba(255, 255, 255, .03);
  }

  .env-subsection-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    justify-content: center;
    align-items: center;
    transition: transform .15s;
    display: flex;
    transform: rotate(-90deg);
  }

  .env-subsection-chevron.expanded {
    transform: rotate(0);
  }

  .env-subsection-chevron svg {
    width: 14px;
    height: 14px;
  }

  .env-subsection-icon {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .env-subsection-icon svg {
    width: 14px;
    height: 14px;
  }

  .env-subsection-title {
    text-align: left;
    color: var(--text-secondary);
    flex: 1;
    font-size: 13px;
    font-weight: 500;
  }

  .env-subsection-badge {
    min-width: 18px;
    height: 18px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
    border-radius: 9px;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
  }

  .env-subsection-add {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--border-radius);
    opacity: 0;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    transition: all .15s;
    display: flex;
  }

  .env-subsection-header:hover .env-subsection-add {
    opacity: 1;
  }

  .env-subsection-add:hover {
    color: var(--color-primary);
    background: rgba(255, 255, 255, .1);
  }

  .env-subsection-add svg {
    width: 14px;
    height: 14px;
  }

  .env-subsection-content {
    padding: 0 var(--spacing-md) var(--spacing-sm);
  }

  .env-subsection.collapsed .env-subsection-content {
    display: none;
  }

  .env-items-list {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .env-empty-items {
    padding: var(--spacing-sm);
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
  }

  .env-item {
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: background-color .15s;
    display: flex;
  }

  .env-item:hover {
    background: rgba(255, 255, 255, .03);
  }

  .env-item.inherited {
    opacity: .7;
  }

  .env-item-content {
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
    font-family: var(--font-mono);
    flex: 1;
    font-size: 12px;
    display: flex;
  }

  .env-item-name {
    color: var(--color-moon-400);
    font-weight: 500;
  }

  .env-item-sep {
    color: var(--text-muted);
  }

  .env-item-value {
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .env-item-badge {
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-sans);
    border-radius: 3px;
    flex-shrink: 0;
    padding: 1px 4px;
  }

  .env-item-badge.parent {
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
  }

  .env-item-badge.here {
    color: var(--color-primary);
    background: rgba(168, 85, 247, .15);
  }

  .env-item-actions {
    opacity: 0;
    align-items: center;
    gap: 2px;
    transition: opacity .15s;
    display: flex;
  }

  .env-item:hover .env-item-actions {
    opacity: 1;
  }

  .env-item-btn {
    width: 22px;
    height: 22px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--border-radius);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    transition: all .15s;
    display: flex;
  }

  .env-item-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .env-item-btn svg {
    width: 14px;
    height: 14px;
  }

  .env-item-btn-danger:hover {
    color: var(--color-error);
    background: rgba(239, 68, 68, .15);
  }

  .env-item-btn-primary:hover {
    color: var(--color-success);
    background: rgba(16, 185, 129, .15);
  }

  .env-add-form {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    background: rgba(0, 0, 0, .2);
    flex-direction: column;
    display: flex;
  }

  .env-input {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-family: var(--font-mono);
    background: rgba(0, 0, 0, .3);
    outline: none;
    font-size: 12px;
    transition: all .15s;
  }

  .env-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, .2);
  }

  .env-input::placeholder {
    color: var(--text-muted);
  }

  .env-add-actions {
    justify-content: flex-end;
    gap: var(--spacing-xs);
    display: flex;
  }

  .env-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all .15s;
  }

  .env-btn-ghost {
    color: var(--text-muted);
    background: none;
    border: none;
  }

  .env-btn-ghost:hover {
    color: var(--text-primary);
  }

  .env-btn-primary {
    background: var(--color-primary);
    color: #fff;
    border: none;
  }

  .env-btn-primary:hover {
    background: var(--color-primary-hover);
  }

  .env-edit-form {
    align-items: center;
    gap: var(--spacing-xs);
    flex: 1;
    display: flex;
  }

  .env-edit-name {
    font-family: var(--font-mono);
    color: var(--color-moon-400);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
  }

  .env-edit-actions {
    align-items: center;
    gap: 2px;
    display: flex;
  }

  .library-browser-backdrop {
    z-index: 100;
    background: rgba(0, 0, 0, .3);
    position: fixed;
    inset: 0;
  }

  .library-browser {
    background: var(--color-moon-900);
    border: 1px solid var(--border-color);
    z-index: 101;
    border-radius: 12px;
    flex-direction: column;
    width: 320px;
    max-height: 450px;
    display: flex;
    position: fixed;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
  }

  .library-browser-header {
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    display: flex;
  }

  .library-browser-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
  }

  .library-browser-close {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    transition: all .15s;
    display: flex;
  }

  .library-browser-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .library-browser-close svg {
    width: 14px;
    height: 14px;
  }

  .library-browser-search {
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    display: flex;
  }

  .library-browser-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .library-browser-search-icon svg {
    width: 14px;
    height: 14px;
  }

  .library-browser-search-input {
    color: var(--text-primary);
    background: none;
    border: none;
    outline: none;
    flex: 1;
    font-size: 13px;
  }

  .library-browser-search-input::placeholder {
    color: var(--text-muted);
  }

  .library-browser-content {
    flex: 1;
    min-height: 200px;
    overflow-y: auto;
  }

  .library-browser-loading {
    color: var(--text-muted);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    font-size: 13px;
    display: flex;
  }

  .library-browser-spinner {
    border: 2px solid rgba(56, 189, 248, .2);
    border-top-color: #38bdf8;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: .8s linear infinite spin;
  }

  .library-browser-empty {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    display: flex;
  }

  .library-browser-empty-text {
    color: var(--text-secondary);
    font-size: 14px;
  }

  .library-browser-empty-hint {
    color: var(--text-muted);
    font-size: 12px;
  }

  .library-browser-list {
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    display: flex;
  }

  .library-browser-footer {
    border-top: 1px solid var(--border-color);
    padding: 8px 16px;
  }

  .library-browser-hint {
    color: var(--text-muted);
    font-size: 11px;
  }

  .library-component-item {
    cursor: pointer;
    text-align: left;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    transition: all .15s;
    display: flex;
  }

  .library-component-item:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, .05);
  }

  .library-component-icon {
    border: 1px solid;
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    display: flex;
  }

  .library-component-icon svg {
    width: 16px;
    height: 16px;
  }

  .library-component-info {
    flex-direction: column;
    flex: 1;
    gap: 4px;
    min-width: 0;
    display: flex;
  }

  .library-component-name-row {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .library-component-name {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
  }

  .library-component-version {
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-mono);
  }

  .library-component-meta {
    align-items: center;
    gap: 8px;
    font-size: 11px;
    display: flex;
  }

  .library-component-kind {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .05);
    border-radius: 4px;
    padding: 2px 6px;
  }

  .library-component-desc {
    color: var(--text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .zed-theme {
    --ide-bg: #18181b;
    --ide-sidebar-bg: #18181b;
    --ide-border: #27272a;
    --ide-text-muted: #71717a;
    --ide-text: #d4d4d8;
    --ide-active-bg: #27272a;
    --ide-hover-bg: rgba(39, 39, 42, .5);
    --ide-accent: #4b70f5;
    background: var(--ide-bg);
    color: var(--ide-text);
    flex-direction: column;
    height: 100vh;
    display: flex;
  }

  .library-panel {
    background: var(--ide-bg);
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .library-panel-header {
    border-bottom: 1px solid var(--ide-border);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    display: flex;
  }

  .library-panel-toolbar {
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    height: 28px;
    padding: 0 8px;
    display: flex;
  }

  .library-panel-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .08) transparent;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .file-tree-row.is-element {
    border-left: 2px solid var(--element-category-color, transparent);
  }

  .file-tree-row[draggable="true"] {
    cursor: grab;
  }

  .file-tree-row[draggable="true"]:active {
    cursor: grabbing;
    opacity: .6;
  }

  .file-tree-type-tag {
    color: var(--ide-text-muted);
    opacity: .7;
    margin-left: 6px;
    font-size: 10px;
  }

  .ide-workspace {
    font-family: var(--font-sans);
    flex-direction: row;
    flex: 1;
    font-size: .875rem;
    display: flex;
    overflow: hidden;
  }

  .ide-sidebar {
    background: var(--ide-sidebar-bg);
    border-right: 1px solid var(--ide-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .ide-sidebar-header {
    padding: 0 var(--spacing-sm);
    height: 36px;
    color: var(--ide-text-muted);
    letter-spacing: .05em;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    display: flex;
  }

  .ide-sidebar-actions {
    align-items: center;
    gap: 2px;
    display: flex;
  }

  .ide-sidebar-action {
    width: 24px;
    height: 24px;
    color: var(--ide-text-muted);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: background .1s, color .1s;
    display: flex;
  }

  .ide-sidebar-action:hover {
    background: var(--ide-hover-bg, rgba(255, 255, 255, .08));
    color: var(--ide-text);
  }

  .ide-sidebar-content {
    flex: 1;
    overflow-y: auto;
  }

  .ide-resizer {
    cursor: col-resize;
    z-index: 10;
    background: none;
    width: 1px;
    transition: background .2s;
    position: relative;
  }

  .ide-resizer:hover, .ide-resizer.resizing {
    background: var(--ide-accent);
  }

  .ide-main {
    background: var(--ide-bg);
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .ide-status-bar {
    background: var(--ide-bg);
    border-top: 1px solid var(--ide-border);
    height: 28px;
    padding: 0 var(--spacing-md);
    font-family: var(--font-mono);
    color: var(--ide-text-muted);
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    display: flex;
  }

  .status-left, .status-right {
    gap: var(--spacing-md);
    display: flex;
  }

  .explorer-search-row {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--ide-border);
  }

  .file-tree-item {
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
  }

  .file-tree-row {
    height: 28px;
    padding-right: var(--spacing-sm);
    color: var(--ide-text-muted);
    border-left: 2px solid rgba(0, 0, 0, 0);
    align-items: center;
    padding-left: 2px;
    display: flex;
  }

  .file-tree-row:hover {
    background: var(--ide-hover-bg);
    color: var(--ide-text);
  }

  .file-tree-row.is-active {
    background: var(--ide-active-bg);
    color: var(--ide-text);
    border-left-color: var(--ide-accent);
  }

  .file-tree-row:focus {
    outline: 1px solid var(--ide-accent, #60a5fa);
    outline-offset: -1px;
    color: var(--ide-text);
    background: rgba(88, 166, 255, .08);
  }

  .file-tree-row:focus-visible {
    outline: 1px solid var(--ide-accent, #60a5fa);
    outline-offset: -1px;
  }

  .file-tree-children {
    border-left: 1px solid var(--ide-border);
    margin-left: 12px;
    padding-left: 0;
  }

  .file-tree-skeleton {
    padding: 4px 8px 4px 20px;
  }

  .file-tree-skeleton .skeleton-row {
    align-items: center;
    height: 28px;
    padding: 0 8px;
    display: flex;
  }

  .file-tree-skeleton .skeleton-line {
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .04) 75%) 0 0 / 200% 100%;
    border-radius: 4px;
    height: 10px;
    animation: 1.5s ease-in-out infinite skeleton-shimmer;
  }

  @keyframes skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }

  .file-tree-arrow {
    text-align: center;
    flex-shrink: 0;
    width: 20px;
    display: inline-block;
  }

  .file-icon {
    opacity: .7;
    margin-right: 6px;
  }

  .editor-tabs {
    background: var(--ide-bg);
    border-bottom: 1px solid var(--ide-border);
    scrollbar-width: none;
    flex-shrink: 0;
    height: 36px;
    display: flex;
    overflow: auto hidden;
  }

  .editor-tabs::-webkit-scrollbar {
    display: none;
  }

  .editor-tab {
    padding: 0 var(--spacing-md);
    border-right: 1px solid var(--ide-border);
    cursor: pointer;
    min-width: 120px;
    max-width: 200px;
    color: var(--ide-text-muted);
    border-top: 1px solid rgba(0, 0, 0, 0);
    align-items: center;
    font-size: .8125rem;
    display: flex;
  }

  .editor-tab:hover {
    background: var(--ide-hover-bg);
  }

  .editor-tab.active {
    background: var(--ide-bg);
    color: var(--ide-text);
    border-top-color: var(--ide-accent);
  }

  .editor-tab.preview {
    font-style: italic;
  }

  .editor-tab.preview .editor-tab-name {
    padding-right: 2px;
  }

  .editor-tab.drag-over {
    border-left: 2px solid var(--ide-accent, #60a5fa);
    padding-left: 6px;
  }

  .editor-tab[draggable="true"] {
    cursor: grab;
  }

  .editor-tab[draggable="true"]:active {
    cursor: grabbing;
    opacity: .6;
  }

  .editor-tab-icon {
    opacity: .7;
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }

  .editor-tab-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    overflow: hidden;
  }

  .editor-tab-close {
    opacity: 0;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    display: flex;
  }

  .editor-tab:hover .editor-tab-close {
    opacity: 1;
  }

  .editor-tab-close:hover {
    background: rgba(255, 255, 255, .1);
  }

  .zed-theme .editor-breadcrumb {
    background: var(--ide-bg);
    border-bottom: 1px solid var(--ide-border);
    color: var(--ide-text-muted);
    gap: 2px;
    padding: 2px 12px;
    font-size: 11px;
  }

  .zed-theme .breadcrumb-segment {
    color: var(--ide-text-muted);
    border-radius: 3px;
    padding: 1px 3px;
  }

  .zed-theme .breadcrumb-segment:hover {
    background: var(--ide-hover-bg);
    color: var(--ide-text);
  }

  .zed-theme .breadcrumb-segment.current {
    color: var(--ide-text);
  }

  .zed-theme .breadcrumb-separator {
    color: var(--ide-text-muted);
    opacity: .5;
  }

  .editor-area {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  .editor-monaco {
    width: 100%;
    height: 100%;
  }

  .panel-toolbar {
    flex-direction: column;
    align-items: center;
    display: flex;
    position: relative;
  }

  .panel-buttons-row {
    align-items: center;
    gap: 4px;
    display: flex;
  }

  .close-all-btn {
    cursor: pointer;
    margin-top: 8px;
  }

  .fab-container {
    bottom: calc(var(--status-bar-height, 42px)  + 44px);
    z-index: 50;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    transition: bottom .2s;
    display: flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }

  .fab-toolbar {
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    pointer-events: auto;
    opacity: 0;
    background: rgba(24, 24, 27, .9);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    align-items: center;
    gap: 4px;
    height: 52px;
    padding: 6px 8px;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    position: relative;
    transform: translateY(16px)scale(.95);
    box-shadow: 0 0 7px rgba(0, 0, 0, .05), 0 0 14px rgba(0, 0, 0, .1), 0 0 21px rgba(0, 0, 0, .15);
  }

  .fab-toolbar.visible {
    opacity: 1;
    transform: translateY(0)scale(1);
  }

  .fab-toolbar.visible:before {
    content: "";
    background: radial-gradient(ellipse at center, rgba(var(--circle-color-rgb), .06) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    border-radius: 24px;
    position: absolute;
    inset: -12px;
  }

  .fab-btn {
    color: #a1a1aa;
    cursor: pointer;
    background: rgba(39, 39, 42, .5);
    border: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    transition: all .2s;
    display: flex;
    position: relative;
  }

  .fab-btn:hover {
    color: #e4e4e7;
    background: rgba(63, 63, 70, .7);
  }

  .fab-btn.active {
    color: #f4f4f5;
    background: #3f3f46;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  }

  .fab-btn.primary {
    color: var(--color-moon-50);
    background: rgba(255, 255, 255, .1);
  }

  .fab-btn.primary:hover {
    background: rgba(255, 255, 255, .2);
  }

  .fab-btn.danger {
    color: var(--color-error);
  }

  .fab-btn.danger:hover {
    background: rgba(239, 68, 68, .1);
  }

  .fab-btn svg {
    width: 20px;
    height: 20px;
  }

  .fab-divider {
    background: rgba(255, 255, 255, .1);
    width: 1px;
    height: 24px;
    margin: 0 4px;
  }

  .fab-group {
    pointer-events: auto;
    background: var(--ide-bg, #18181b);
    box-shadow: var(--shadow-window, 0 0 14px rgba(0, 0, 0, .3));
    border: 1px solid var(--border-color);
    border-radius: 999px;
    align-items: center;
    gap: 12px;
    padding: 8px;
    display: flex;
  }

  .fab-group.contextual {
    -webkit-backdrop-filter: blur(12px);
    background: rgba(24, 24, 27, .9);
  }

  .fab-label {
    white-space: nowrap;
    margin-left: 4px;
    font-size: .8125rem;
    font-weight: 500;
  }

  .fab-primary {
    background: var(--color-main-700, #3f3f46);
    color: var(--color-moon-100, #f4f4f5);
    border: 1px solid var(--color-main-600, #52525c);
    transition: background var(--transition-fast, .15s ease), border-color var(--transition-fast, .15s ease);
    border-radius: 999px;
    padding: 8px 16px;
  }

  @supports (color: lab(0% 0 0)) {
    .fab-primary {
      background: var(--color-main-700, lab(26.8019% 1.35387 -4.68303));
      color: var(--color-moon-100, lab(96.1634% .0993311 -.364041));
      border: 1px solid var(--color-main-600, lab(35.1166% 1.78212 -6.1173));
    }
  }

  .fab-primary {
    box-shadow: 0 0 12px -4px rgba(var(--circle-color-rgb, 139, 92, 246), .25);
  }

  .fab-primary:hover {
    background: var(--color-main-600, #52525c);
    border-color: var(--color-main-500, #71717b);
    color: var(--color-moon-50, #fafafa);
  }

  @supports (color: lab(0% 0 0)) {
    .fab-primary:hover {
      background: var(--color-main-600, lab(35.1166% 1.78212 -6.1173));
      border-color: var(--color-main-500, lab(47.8878% 1.65477 -5.77283));
      color: var(--color-moon-50, lab(98.26% 0 0));
    }
  }

  .fab-secondary {
    background: var(--ide-active-bg, #27272a);
    color: var(--text-secondary, var(--color-moon-300));
    border: 1px solid var(--ide-border, #3f3f46);
    transition: background var(--transition-fast, .15s ease);
    border-radius: 999px;
    padding: 8px 16px;
  }

  .fab-secondary:hover {
    background: var(--ide-hover-bg, rgba(39, 39, 42, .5));
    color: var(--text-primary, var(--color-moon-50));
  }

  .fab-danger {
    color: var(--color-error, #ef4444);
    transition: background var(--transition-fast, .15s ease), color var(--transition-fast, .15s ease);
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: 999px;
    padding: 8px 16px;
  }

  .fab-danger:hover {
    background: var(--color-error, #ef4444);
    color: #fff;
    border-color: var(--color-error, #ef4444);
  }

  .fab-composition-hint {
    -webkit-backdrop-filter: blur(12px);
    pointer-events: auto;
    background: rgba(24, 24, 27, .85);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    display: flex;
  }

  .fab-hint-text {
    color: var(--text-secondary, var(--color-moon-300));
    font-size: .8125rem;
    font-weight: 500;
  }

  .fab-menu-wrapper {
    z-index: 60;
    pointer-events: auto;
    margin-bottom: 16px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .creation-menu {
    backdrop-filter: blur(16px);
    background: rgba(24, 24, 27, .95);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    width: max-content;
    min-width: 180px;
    padding: 8px;
    animation: .2s cubic-bezier(.16, 1, .3, 1) slide-up;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
  }

  .creation-menu-list {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .creation-menu-item {
    color: #a1a1aa;
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    border-radius: 8px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    transition: all .2s;
    display: flex;
  }

  .creation-menu-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transform: translateX(2px);
  }

  .creation-menu-hexagon {
    flex-shrink: 0;
    width: 32px;
    height: 36px;
    position: relative;
  }

  .creation-menu-hexagon .hexagon-svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
    width: 100%;
    height: 100%;
  }

  .creation-menu-hexagon .hexagon-symbol {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    letter-spacing: -.5px;
    font-size: .7rem;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .creation-menu-icon {
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 1.25rem;
    display: flex;
  }

  .creation-menu-icon svg {
    fill: currentColor;
    width: 18px;
    height: 18px;
  }

  .creation-menu-label {
    font-size: .9rem;
    font-weight: 500;
  }

  .creation-menu-divider {
    background: rgba(255, 255, 255, .1);
    height: 1px;
    margin: 4px 0;
  }

  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(10px)scale(.95);
    }

    to {
      opacity: 1;
      transform: translateY(0)scale(1);
    }
  }

  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(100%);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-slide-in-right {
    animation: .3s ease-out slide-in-right;
  }

  .panel-animated {
    transition: left .2s cubic-bezier(.4, 0, .2, 1), top .2s cubic-bezier(.4, 0, .2, 1), width .2s cubic-bezier(.4, 0, .2, 1), height .2s cubic-bezier(.4, 0, .2, 1);
  }

  .panel-interacting {
    will-change: left, top, width, height;
    opacity: .9;
    box-shadow: var(--shadow-glow-lg);
    cursor: grabbing;
    z-index: 10000 !important;
    transition: none !important;
  }

  .floating-panel[style*="display: none"], .panel-group[style*="display: none"] {
    content-visibility: hidden;
    contain-intrinsic-size: auto 400px auto 300px;
  }

  .editor-save-toast {
    color: #22c55e;
    z-index: 10;
    pointer-events: none;
    background: rgba(34, 197, 94, .15);
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    animation: 2.5s ease-in-out fadeInOut;
    position: absolute;
    bottom: 8px;
    right: 12px;
  }

  .editor-save-toast.error {
    color: #ef4444;
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .3);
  }

  @keyframes fadeInOut {
    0% {
      opacity: 0;
      transform: translateY(4px);
    }

    10% {
      opacity: 1;
      transform: translateY(0);
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .tab-dirty-dot {
    background: var(--ide-text-muted);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    display: inline-block;
  }

  .status-cursor {
    font-variant-numeric: tabular-nums;
  }

  .editor-loading-overlay {
    color: var(--ide-text-muted);
    z-index: 5;
    pointer-events: none;
    background: rgba(13, 17, 23, .85);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .editor-loading-spinner {
    border: 2px solid var(--ide-border);
    border-top-color: var(--ide-accent);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: .8s linear infinite spin;
  }

  .palette-backdrop {
    z-index: 100;
    background: rgba(0, 0, 0, .35);
    position: fixed;
    inset: 0;
  }

  .palette-container {
    z-index: 101;
    background: var(--ide-surface, #1e2228);
    border: 1px solid var(--ide-border, #30363d);
    border-radius: 8px;
    flex-direction: column;
    width: min(560px, 90vw);
    max-height: 420px;
    display: flex;
    position: fixed;
    top: 15%;
    left: 50%;
    overflow: hidden;
    transform: translateX(-50%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);
  }

  .palette-input-row {
    border-bottom: 1px solid var(--ide-border, #30363d);
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    display: flex;
  }

  .palette-prefix {
    color: var(--ide-accent, #60a5fa);
    flex-shrink: 0;
    font-family: JetBrains Mono, Fira Code, monospace;
    font-size: 13px;
    font-weight: 600;
  }

  .palette-input {
    color: var(--ide-text, #c9d1d9);
    background: none;
    border: none;
    outline: none;
    flex: 1;
    font-family: JetBrains Mono, Fira Code, monospace;
    font-size: 13px;
    line-height: 1.4;
  }

  .palette-input::placeholder {
    color: var(--ide-text-muted, #484f58);
  }

  .palette-results {
    flex: 1;
    max-height: 340px;
    padding: 4px 0;
    overflow-y: auto;
  }

  .palette-item {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    transition: background 60ms;
    display: flex;
  }

  .palette-item:hover, .palette-item.selected {
    background: rgba(88, 166, 255, .08);
  }

  .palette-item.selected {
    background: rgba(88, 166, 255, .14);
  }

  .palette-item-main {
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    display: flex;
  }

  .palette-category {
    color: var(--ide-text-muted, #8b949e);
    flex-shrink: 0;
    font-size: 12px;
  }

  .palette-label {
    color: var(--ide-text, #c9d1d9);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    overflow: hidden;
  }

  .palette-dir {
    color: var(--ide-text-muted, #484f58);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 1;
    margin-left: 8px;
    font-size: 11px;
    overflow: hidden;
  }

  .palette-shortcut {
    color: var(--ide-text-muted, #8b949e);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: 12px;
    padding: 2px 6px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 11px;
  }

  .palette-element-type {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7c8896;
    background: rgba(255, 255, 255, .06);
    border-radius: 3px;
    flex-shrink: 0;
    margin-right: 6px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 500;
  }

  .palette-empty {
    text-align: center;
    color: var(--ide-text-muted, #484f58);
    padding: 24px 14px;
    font-size: 13px;
  }

  .validation-panel {
    border-top: 1px solid var(--color-error);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(30, 20, 25, .95);
    flex-shrink: 0;
    max-height: 150px;
    overflow-y: auto;
  }

  .validation-header {
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-error);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    display: flex;
  }

  .validation-icon {
    fill: currentColor;
    width: 16px;
    height: 16px;
  }

  .validation-list {
    padding-left: 20px;
    list-style: none;
  }

  .validation-item {
    color: var(--text-primary);
    font-family: var(--font-mono);
    margin-bottom: 2px;
    font-size: .875rem;
  }

  .props-panel-v2 {
    background: var(--color-moon-900);
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .props-header-v2 {
    border-bottom: 1px solid var(--color-moon-700);
    background: var(--color-moon-900);
    z-index: 10;
    flex-shrink: 0;
    gap: 12px;
    padding: 16px;
    display: flex;
    position: sticky;
    top: 0;
  }

  .props-header-v2.props-header-empty {
    text-align: center;
    justify-content: center;
    padding: 32px 16px;
  }

  .props-empty-icon {
    color: var(--color-moon-600);
  }

  .props-symbol {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    font-size: 24px;
    transition: all .2s;
    display: flex;
  }

  .props-symbol:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  }

  .props-header-badge {
    flex-shrink: 0;
  }

  .props-header-badge .element-badge {
    min-width: 56px;
    max-width: 56px;
    min-height: 56px;
    max-height: 56px;
  }

  .props-header-badge .element-badge-symbol {
    font-size: 22px;
  }

  .props-header-info {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .props-header-top {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .props-header-name {
    color: var(--color-moon-50);
    cursor: text;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }

  .props-header-name:hover {
    color: var(--color-moon-0);
  }

  .props-header-name-empty {
    color: var(--color-moon-400);
    cursor: default;
  }

  .props-header-name-empty:hover {
    color: var(--color-moon-400);
  }

  .props-header-name-input {
    color: var(--color-moon-50);
    background: var(--color-moon-800);
    border: 1px solid var(--color-moon-600);
    border-radius: 4px;
    outline: none;
    width: 100%;
    max-width: 200px;
    padding: 2px 6px;
    font-size: 16px;
    font-weight: 600;
  }

  .props-header-name-input:focus {
    border-color: var(--color-primary-500);
  }

  .props-header-kind {
    color: var(--color-moon-400);
    background: var(--color-moon-800);
    white-space: nowrap;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
  }

  .props-header-slug {
    color: var(--color-moon-400);
    font-size: 12px;
    font-family: var(--font-mono);
  }

  .props-slug-prefix {
    color: var(--color-moon-500);
  }

  .props-slug-value {
    color: var(--color-moon-300);
  }

  .props-header-badges {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    display: flex;
  }

  .props-state-badge {
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
  }

  .props-state-badge.badge-ready {
    color: #22c55e;
    background: rgba(34, 197, 94, .15);
  }

  .props-state-badge.badge-deployed {
    color: #3b82f6;
    background: rgba(59, 130, 246, .15);
  }

  .props-state-badge.badge-disabled {
    color: #a1a1aa;
    background: rgba(161, 161, 170, .15);
  }

  .props-state-badge.badge-error {
    color: #ef4444;
    background: rgba(239, 68, 68, .15);
  }

  .props-state-badge.badge-default {
    color: var(--color-moon-400);
    background: rgba(161, 161, 170, .1);
  }

  .props-version-badge {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--color-moon-400);
    background: rgba(161, 161, 170, .1);
    border-radius: 3px;
    padding: 1px 6px;
    line-height: 1.4;
  }

  .props-form-badge {
    color: var(--color-moon-500);
    background: rgba(161, 161, 170, .08);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.4;
  }

  .props-header-intention {
    color: var(--color-moon-400);
    cursor: text;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden;
  }

  .props-header-intention:hover {
    color: var(--color-moon-300);
  }

  .props-header-intention-empty {
    color: var(--color-moon-500);
    cursor: default;
    font-style: italic;
  }

  .props-header-intention-empty:hover {
    color: var(--color-moon-500);
  }

  .props-header-intention-input {
    color: var(--color-moon-300);
    background: var(--color-moon-800);
    border: 1px solid var(--color-moon-600);
    resize: none;
    border-radius: 4px;
    outline: none;
    width: 100%;
    padding: 4px 6px;
    font-family: inherit;
    font-size: 12px;
  }

  .props-header-intention-input:focus {
    border-color: var(--color-primary-500);
  }

  .props-panel-body {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .props-sidebar {
    border-right: 1px solid var(--color-moon-700);
    background: rgba(24, 24, 27, .5);
    flex-direction: column;
    flex-shrink: 0;
    gap: 4px;
    padding: 8px;
    display: flex;
  }

  .props-category-btn {
    color: #a1a1aa;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    transition: all .2s;
    display: flex;
  }

  .props-category-btn:hover {
    color: #e4e4e7;
    background: rgba(63, 63, 70, .7);
  }

  .props-category-btn.active {
    color: #f4f4f5;
    background: #3f3f46;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  }

  .props-category-btn svg {
    width: 20px;
    height: 20px;
  }

  .props-panel-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
  }

  .props-content {
    flex-direction: column;
    gap: 16px;
    display: flex;
  }

  .props-content-section {
    background: rgba(39, 39, 42, .5);
    border-radius: 8px;
    padding: 16px;
  }

  .props-content-section-danger {
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .2);
  }

  .props-content-section-title {
    color: var(--color-moon-400);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
  }

  .props-danger-title {
    color: #ef4444;
  }

  .props-markdown-editor {
    background: var(--color-moon-800);
    min-height: 120px;
    color: var(--color-moon-200);
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
  }

  .props-markdown-editor:focus {
    outline: 1px solid var(--color-primary-500);
  }

  .props-placeholder {
    color: var(--color-moon-500);
    margin: 0;
    font-style: italic;
  }

  .props-status-badges {
    flex-wrap: wrap;
    gap: 8px;
    display: flex;
  }

  .props-badge {
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
  }

  .props-badge-success {
    color: #22c55e;
    background: rgba(34, 197, 94, .2);
  }

  .props-badge-info {
    color: #3b82f6;
    background: rgba(59, 130, 246, .2);
  }

  .props-badge-warning {
    color: #eab308;
    background: rgba(234, 179, 8, .2);
  }

  .props-badge-error {
    color: #ef4444;
    background: rgba(239, 68, 68, .2);
  }

  .props-quick-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    display: grid;
  }

  .props-stat {
    text-align: center;
  }

  .props-stat-value {
    color: var(--color-moon-100);
    font-size: 18px;
    font-weight: 600;
    display: block;
  }

  .props-stat-label {
    color: var(--color-moon-500);
    margin-top: 2px;
    font-size: 10px;
    display: block;
  }

  .props-io-schema {
    flex-direction: column;
    gap: 8px;
    display: flex;
  }

  .props-io-empty {
    color: var(--color-moon-500);
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    display: flex;
  }

  .props-io-port {
    background: var(--color-moon-800);
    border-radius: 6px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    display: flex;
  }

  .props-io-port-name {
    color: var(--color-moon-100);
    font-size: 13px;
    font-weight: 500;
  }

  .props-io-port-type {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--color-primary-400);
    background: rgba(139, 92, 246, .15);
    border-radius: 4px;
    padding: 2px 6px;
  }

  .props-io-port-required {
    color: #eab308;
    margin-left: auto;
    font-size: 10px;
  }

  .props-semantic {
    flex-direction: column;
    gap: 12px;
    display: flex;
  }

  .props-semantic-item {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .props-semantic-label {
    color: var(--color-moon-400);
    font-size: 11px;
    font-weight: 500;
  }

  .props-semantic-tags {
    flex-wrap: wrap;
    gap: 6px;
    display: flex;
  }

  .props-tag {
    background: var(--color-moon-800);
    color: var(--color-moon-200);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .props-tag-warning {
    color: #eab308;
    background: rgba(234, 179, 8, .15);
  }

  .props-tag-placeholder {
    color: var(--color-moon-500);
    font-size: 11px;
    font-style: italic;
  }

  .props-form-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    display: grid;
  }

  .props-form-field {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .props-form-label {
    color: var(--color-moon-400);
    font-size: 11px;
    font-weight: 500;
  }

  .props-input, .props-input-small {
    background: var(--color-moon-800);
    border: 1px solid var(--color-moon-700);
    color: var(--color-moon-100);
    border-radius: 4px;
    outline: none;
    padding: 6px 8px;
    font-size: 13px;
    transition: border-color .2s;
  }

  .props-input-small {
    width: 80px;
  }

  .props-input:focus, .props-input-small:focus {
    border-color: var(--color-primary-500);
  }

  .props-select-small {
    background: var(--color-moon-800);
    border: 1px solid var(--color-moon-700);
    color: var(--color-moon-100);
    cursor: pointer;
    border-radius: 4px;
    outline: none;
    padding: 6px 8px;
    font-size: 13px;
  }

  .props-select-small:focus {
    border-color: var(--color-primary-500);
  }

  .props-input-group {
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .props-input-prefix, .props-input-suffix {
    color: var(--color-moon-500);
    font-size: 12px;
  }

  .props-btn-primary {
    background: var(--color-primary-600);
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    transition: all .2s;
    display: flex;
  }

  .props-btn-primary:hover {
    background: var(--color-primary-500);
  }

  .props-btn-icon {
    font-size: 14px;
  }

  .props-btn-warning {
    color: #eab308;
    cursor: pointer;
    background: none;
    border: 1px solid rgba(234, 179, 8, .3);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    transition: all .2s;
  }

  .props-btn-warning:hover {
    background: rgba(234, 179, 8, .1);
  }

  .props-btn-danger {
    color: #fff;
    cursor: pointer;
    background: #ef4444;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    transition: all .2s;
  }

  .props-btn-danger:hover {
    background: #dc2626;
  }

  .props-btn-confirm {
    color: #2dd4bf;
    cursor: pointer;
    background: rgba(20, 184, 166, .1);
    border: 1px solid rgba(20, 184, 166, .4);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    transition: all .2s;
  }

  .props-btn-confirm:hover:not(:disabled) {
    background: rgba(20, 184, 166, .2);
    border-color: rgba(20, 184, 166, .6);
  }

  .props-btn-confirm:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .props-btn-small {
    border: 1px solid var(--color-main-600);
    color: var(--color-moon-300);
    cursor: pointer;
    background: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    transition: all .15s;
  }

  .props-btn-small:hover {
    background: var(--color-main-800);
    color: var(--color-moon-100);
  }

  .props-error-notice {
    color: #fca5a5;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: 6px;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
  }

  .props-error-notice span {
    flex: 1;
  }

  .props-error-notice button {
    color: #fca5a5;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 14px;
    display: flex;
  }

  .props-error-notice button:hover {
    background: rgba(239, 68, 68, .15);
  }

  .props-code-editor {
    background: var(--color-moon-800);
    border: 1px solid var(--color-moon-700);
    width: 100%;
    color: var(--color-moon-100);
    font-family: var(--font-mono);
    resize: vertical;
    border-radius: 4px;
    outline: none;
    padding: 8px;
    font-size: 12px;
  }

  .props-code-editor:focus {
    border-color: var(--color-primary-500);
  }

  .props-test-runner {
    flex-direction: column;
    gap: 12px;
    display: flex;
  }

  .props-test-input {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .props-runs-empty, .props-logs-empty, .props-steps-empty, .props-modifiers-empty, .props-triggers-empty, .props-versions-empty, .props-deployments-empty, .props-members-empty, .props-invitations-empty, .props-resources-empty, .props-env-empty, .props-connections-empty, .props-activity-empty, .props-audit-empty {
    background: var(--color-moon-800);
    color: var(--color-moon-500);
    border-radius: 6px;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    font-size: 12px;
    display: flex;
  }

  .props-modifier-types, .props-resource-types {
    flex-wrap: wrap;
    gap: 8px;
    display: flex;
  }

  .props-modifier-type-btn, .props-resource-type-btn {
    border: 1px solid var(--color-moon-700);
    color: var(--color-moon-300);
    cursor: pointer;
    background: none;
    border-radius: 6px;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    transition: all .2s;
    display: flex;
  }

  .props-modifier-type-btn:hover, .props-resource-type-btn:hover {
    background: var(--color-moon-800);
    border-color: var(--color-moon-600);
  }

  .props-modifier-icon {
    font-size: 14px;
  }

  .props-version-current {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .props-version-badge {
    color: var(--color-moon-100);
    font-size: 14px;
    font-weight: 600;
  }

  .props-version-status {
    color: #22c55e;
    background: rgba(34, 197, 94, .2);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .props-git-sha {
    background: var(--color-moon-800);
    color: var(--color-moon-300);
    cursor: default;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: JetBrains Mono, monospace;
    font-size: 11px;
  }

  .props-git-log {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .props-git-commit {
    border-left: 2px solid var(--color-moon-700);
    border-radius: 4px;
    padding: 8px 10px;
    transition: background .15s;
  }

  .props-git-commit:hover {
    background: var(--color-moon-800);
  }

  .props-git-commit-header {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    display: flex;
  }

  .props-git-commit-date {
    color: var(--color-moon-500);
    white-space: nowrap;
    font-size: 10px;
  }

  .props-git-commit-message {
    color: var(--color-moon-200);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
  }

  .props-git-commit-author {
    color: var(--color-moon-500);
    margin-top: 2px;
    font-size: 10px;
  }

  .props-version-meta {
    color: var(--color-moon-400);
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    display: flex;
  }

  .props-version-date {
    color: var(--color-moon-400);
    font-size: 11px;
  }

  .props-version-author {
    color: var(--color-moon-500);
    font-size: 11px;
  }

  .props-version-message {
    color: var(--color-moon-300);
    margin: 4px 0 0;
    font-size: 12px;
  }

  .props-version-item {
    border-left: 2px solid var(--color-moon-700);
    border-radius: 4px;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    display: flex;
  }

  .props-version-item:hover {
    background: var(--color-moon-800);
  }

  .props-version-item-info {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .props-version-number {
    color: var(--color-moon-200);
    font-size: 12px;
    font-weight: 600;
  }

  .props-version-item-message {
    color: var(--color-moon-400);
    margin: 0;
    font-size: 11px;
  }

  .props-versions-items {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .props-version-error {
    color: var(--color-moon-500);
    padding: 8px;
    font-size: 12px;
  }

  .props-version-loading {
    justify-content: center;
    align-items: center;
    padding: 16px;
    display: flex;
  }

  .props-reconcile-btn {
    border: 1px solid var(--color-moon-600);
    color: var(--color-moon-300);
    cursor: pointer;
    background: none;
    border-radius: 4px;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    transition: all .2s;
    display: inline-flex;
  }

  .props-reconcile-btn:hover {
    background: var(--color-moon-800);
    border-color: var(--color-moon-500);
  }

  .props-reconcile-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .props-reconcile-btn.success {
    color: #22c55e;
    border-color: #22c55e;
  }

  .props-roles-info {
    flex-direction: column;
    gap: 8px;
    display: flex;
  }

  .props-role-item {
    background: var(--color-moon-800);
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    display: flex;
  }

  .props-role-name {
    color: var(--color-moon-100);
    font-size: 12px;
    font-weight: 500;
  }

  .props-role-desc {
    color: var(--color-moon-500);
    font-size: 11px;
  }

  .props-connection-types {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    display: flex;
  }

  .props-connection-type {
    background: var(--color-moon-800);
    color: var(--color-moon-400);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
  }

  .props-inheritance-info {
    align-items: center;
    gap: 8px;
    font-size: 12px;
    display: flex;
  }

  .props-inheritance-label {
    color: var(--color-moon-500);
  }

  .props-inheritance-value {
    color: var(--color-moon-300);
  }

  .props-toggle {
    width: 36px;
    height: 20px;
    display: inline-block;
    position: relative;
  }

  .props-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .props-toggle-slider {
    cursor: pointer;
    background-color: var(--color-moon-700);
    border-radius: 20px;
    transition: all .3s;
    position: absolute;
    inset: 0;
  }

  .props-toggle-slider:before {
    content: "";
    background-color: var(--color-moon-300);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    transition: all .3s;
    position: absolute;
    bottom: 3px;
    left: 3px;
  }

  .props-toggle input:checked + .props-toggle-slider {
    background-color: var(--color-primary-600);
  }

  .props-toggle input:checked + .props-toggle-slider:before {
    background-color: #fff;
    transform: translateX(16px);
  }

  .props-checkbox-group {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .props-checkbox {
    color: var(--color-moon-300);
    cursor: pointer;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    display: flex;
  }

  .props-checkbox input {
    accent-color: var(--color-primary-600);
  }

  .props-tags-input {
    background: var(--color-moon-800);
    border: 1px solid var(--color-moon-700);
    border-radius: 4px;
    min-height: 32px;
    padding: 6px 8px;
  }

  .props-limits-list {
    flex-direction: column;
    gap: 12px;
    display: flex;
  }

  .props-limit-item {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .props-limit-name {
    color: var(--color-moon-300);
    font-size: 12px;
  }

  .props-limit-bar {
    background: var(--color-moon-800);
    border-radius: 3px;
    height: 6px;
    overflow: hidden;
  }

  .props-limit-fill {
    background: var(--color-primary-600);
    border-radius: 3px;
    height: 100%;
  }

  .props-limit-value {
    color: var(--color-moon-500);
    font-size: 11px;
  }

  .props-plan-info {
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .props-plan-badge {
    color: var(--color-moon-100);
    font-size: 14px;
    font-weight: 600;
  }

  .props-logo-upload {
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .props-logo-preview {
    background: var(--color-moon-800);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    display: flex;
  }

  .props-logo-placeholder {
    color: var(--color-moon-500);
    font-size: 11px;
  }

  .props-color-input {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .props-color-input input[type="color"] {
    cursor: pointer;
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    padding: 0;
  }

  .props-domain-status {
    margin-top: 8px;
  }

  .props-domain-status-badge {
    font-size: 11px;
  }

  .props-audit-filters {
    gap: 8px;
    margin-bottom: 12px;
    display: flex;
  }

  .props-danger-warning {
    color: var(--color-moon-400);
    margin: 0 0 16px;
    font-size: 12px;
  }

  .props-danger-actions {
    flex-direction: column;
    gap: 16px;
    display: flex;
  }

  .props-danger-action {
    background: rgba(0, 0, 0, .2);
    border-radius: 6px;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
  }

  .props-danger-action-info {
    flex: 1;
  }

  .props-danger-action-title {
    color: var(--color-moon-100);
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
  }

  .props-danger-action-desc {
    color: var(--color-moon-500);
    margin: 0;
    font-size: 11px;
  }

  .props-danger-action:has(.props-delete-confirm) {
    flex-direction: column;
    align-items: stretch;
  }

  .props-delete-confirm {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    display: flex;
  }

  .props-delete-confirm-text {
    color: var(--color-moon-300);
    margin: 0;
    font-size: 12px;
  }

  .props-delete-buttons {
    justify-content: flex-end;
    gap: 8px;
    display: flex;
  }

  .props-input-danger {
    border-color: rgba(239, 68, 68, .5);
    width: 100%;
  }

  .props-input-danger:focus {
    border-color: rgba(239, 68, 68, .7);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, .2);
  }

  .props-transfer-form {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    display: flex;
  }

  .props-transfer-buttons {
    justify-content: flex-end;
    gap: 8px;
    display: flex;
  }

  .props-element-type-card {
    background: var(--color-moon-800);
    border-radius: 8px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    display: flex;
  }

  .props-element-symbol {
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    font-size: 20px;
    font-weight: 600;
    display: flex;
  }

  .props-element-type-info {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .props-element-type-label {
    color: var(--color-moon-100);
    font-size: 14px;
    font-weight: 600;
  }

  .props-element-type-meta {
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .props-element-category-badge, .props-element-form-badge {
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
  }

  .props-element-form-badge {
    background: var(--color-moon-700);
    color: var(--color-moon-300);
  }

  .props-description-display {
    background: var(--color-moon-800);
    color: var(--color-moon-200);
    cursor: pointer;
    border-radius: 6px;
    min-height: 60px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
  }

  .props-description-display:hover {
    background: var(--color-moon-750);
  }

  .props-description-display.props-placeholder {
    color: var(--color-moon-500);
    font-style: italic;
  }

  .props-description-editor {
    background: var(--color-moon-800);
    border: 1px solid var(--color-primary-500);
    width: 100%;
    color: var(--color-moon-200);
    resize: vertical;
    border-radius: 6px;
    outline: none;
    padding: 12px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
  }

  .props-draft-notice {
    background: rgba(234, 179, 8, .1);
    border: 1px solid rgba(234, 179, 8, .2);
    border-radius: 8px;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    display: flex;
  }

  .props-draft-icon {
    color: #eab308;
    flex-shrink: 0;
  }

  .props-draft-text strong {
    color: #eab308;
    margin-bottom: 4px;
    font-size: 13px;
    display: block;
  }

  .props-draft-text p {
    color: var(--color-moon-400);
    margin: 0;
    font-size: 12px;
  }

  .props-draft-badge {
    color: #eab308;
    text-align: center;
    background: rgba(234, 179, 8, .15);
    border: 1px solid rgba(234, 179, 8, .3);
    border-radius: 6px;
    margin: 0 16px 8px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 500;
  }

  .periodic-table {
    padding: 16px;
    overflow-x: auto;
  }

  .periodic-table-title {
    color: var(--color-moon-100);
    text-align: center;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
  }

  .periodic-table-header {
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    display: flex;
  }

  .periodic-table-header .periodic-table-title {
    text-align: left;
    flex: 1;
    margin: 0;
  }

  .periodic-back-btn {
    border: 1px solid var(--color-moon-600);
    background: var(--color-moon-800);
    width: 28px;
    height: 28px;
    color: var(--color-moon-200);
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: all .15s;
    display: flex;
  }

  .periodic-back-btn:hover {
    background: var(--color-moon-700);
    border-color: var(--color-moon-500);
    color: var(--color-moon-100);
  }

  .periodic-element.periodic-element-default {
    box-shadow: inset 0 0 0 1px var(--element-color, var(--color-moon-500));
  }

  .periodic-legend {
    display: none;
  }

  .periodic-grid {
    justify-content: flex-start;
    gap: 12px;
    display: flex;
  }

  .periodic-category {
    flex-direction: column;
    gap: 3px;
    display: flex;
  }

  .periodic-elements {
    grid-template-rows: repeat(5, 68px);
    grid-auto-columns: 68px;
    grid-auto-flow: column;
    gap: 3px;
    display: grid;
  }

  .periodic-element-wrapper {
    display: contents;
  }

  .periodic-category-header {
    color: var(--cat-color);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
    white-space: nowrap;
    border-bottom: 2px solid var(--cat-color);
    background: var(--cat-color);
    margin-bottom: 3px;
    padding: 4px 6px;
    font-size: 9px;
    font-weight: 600;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .periodic-category-header {
      background: color-mix(in srgb, var(--cat-color) 10%, transparent);
    }
  }

  .periodic-category-header {
    border-radius: 3px 3px 0 0;
    min-width: 68px;
  }

  .periodic-element {
    background: var(--color-moon-800);
    cursor: pointer;
    min-width: 68px;
    min-height: 68px;
    box-shadow: inset 0 0 0 1px var(--color-moon-700);
    border: none;
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 4px;
    transition: all .12s;
    display: flex;
    position: relative;
  }

  .periodic-element:before {
    content: "";
    background: var(--element-color);
    border-radius: 3px 0 0 3px;
    width: 3px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .periodic-element:hover {
    background: var(--color-moon-750);
    box-shadow: inset 0 0 0 1px var(--color-moon-500), 0 4px 12px rgba(0, 0, 0, .4);
    z-index: 10;
    transform: translateY(-2px)scale(1.08);
  }

  .periodic-element:active {
    transform: translateY(0)scale(.98);
  }

  .periodic-element.highlighted {
    background: var(--color-moon-700);
    box-shadow: inset 0 0 0 2px var(--element-color), 0 0 8px var(--element-color);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .periodic-element.highlighted {
      box-shadow: inset 0 0 0 2px var(--element-color), 0 0 8px color-mix(in srgb, var(--element-color) 40%, transparent);
    }
  }

  .periodic-symbol {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--element-color);
    line-height: 1;
  }

  .periodic-name {
    color: var(--color-moon-400);
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.1;
    overflow: hidden;
  }

  .periodic-element:hover .periodic-name {
    color: var(--color-moon-200);
  }

  .periodic-legend-compact {
    background: var(--color-moon-850);
    border-radius: 4px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    margin-bottom: 8px;
    padding: 6px 8px;
    display: flex;
  }

  .periodic-legend-compact .periodic-legend-item {
    color: var(--color-moon-400);
    text-transform: uppercase;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    display: flex;
  }

  .periodic-legend-compact .periodic-legend-dot {
    background: var(--cat-color);
    border-radius: 2px;
    width: 6px;
    height: 6px;
  }

  .periodic-grid-compact .periodic-category-header {
    min-width: 56px;
    padding: 3px 4px;
    font-size: 8px;
  }

  .periodic-grid-compact .periodic-elements {
    grid-template-rows: repeat(3, 56px);
    grid-auto-columns: 56px;
  }

  .periodic-grid-compact .periodic-element {
    min-width: 56px;
    min-height: 56px;
  }

  .periodic-grid-compact .periodic-symbol {
    font-size: 16px;
  }

  .periodic-grid-compact .periodic-name {
    font-size: 7px;
  }

  .periodic-grid-compact .element-badge, .periodic-grid-compact .element-badge-md, .periodic-grid-compact .element-badge-sm, .periodic-grid-compact .element-badge-lg {
    flex-shrink: 0;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }

  .periodic-grid-compact .element-badge-symbol {
    font-size: 18px;
  }

  .periodic-grid-compact .element-badge-name {
    text-overflow: ellipsis;
    max-width: 48px;
    font-size: 7px;
    overflow: hidden;
  }

  .element-badge {
    background: var(--color-moon-800);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--color-moon-700);
    border: none;
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 4px;
    transition: all .12s;
    display: flex;
    position: relative;
  }

  .element-badge:before {
    content: "";
    background: var(--badge-color);
    border-radius: 3px 0 0 3px;
    width: 3px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .element-badge-symbol {
    font-family: var(--font-mono);
    color: var(--badge-color);
    font-weight: 700;
    line-height: 1;
  }

  .element-badge-name {
    color: var(--color-moon-400);
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-weight: 500;
    line-height: 1.1;
    overflow: hidden;
  }

  .element-badge:hover:not(:disabled) {
    background: var(--color-moon-750);
    box-shadow: inset 0 0 0 1px var(--color-moon-500), 0 4px 12px rgba(0, 0, 0, .4);
    z-index: 10;
    transform: translateY(-2px)scale(1.05);
  }

  .element-badge:hover .element-badge-name {
    color: var(--color-moon-200);
  }

  .element-badge:active:not(:disabled) {
    transform: translateY(0)scale(.98);
  }

  .element-badge.selected {
    background: var(--color-moon-700);
    box-shadow: inset 0 0 0 2px var(--badge-color);
  }

  .element-badge.highlighted {
    background: var(--color-moon-700);
    box-shadow: inset 0 0 0 2px var(--badge-color), 0 0 8px var(--badge-color);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .element-badge.highlighted {
      box-shadow: inset 0 0 0 2px var(--badge-color), 0 0 8px color-mix(in srgb, var(--badge-color) 40%, transparent);
    }
  }

  .element-badge:disabled, .element-badge.disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .element-badge-xs {
    border-radius: 3px;
    min-width: 24px;
    min-height: 24px;
    padding: 2px;
  }

  .element-badge-xs:before {
    width: 2px;
  }

  .element-badge-xs .element-badge-symbol {
    font-size: 12px;
  }

  .element-badge-xs .element-badge-name {
    display: none;
  }

  .element-badge-sm {
    min-width: 40px;
    min-height: 40px;
    padding: 3px;
  }

  .element-badge-sm:before {
    width: 2px;
  }

  .element-badge-sm .element-badge-symbol {
    font-size: 16px;
  }

  .element-badge-sm .element-badge-name {
    font-size: 7px;
  }

  .element-badge-md {
    min-width: 56px;
    min-height: 56px;
  }

  .element-badge-md .element-badge-symbol {
    font-size: 18px;
  }

  .element-badge-md .element-badge-name {
    font-size: 8px;
  }

  .element-badge-lg {
    min-width: 68px;
    min-height: 68px;
  }

  .element-badge-lg .element-badge-symbol {
    font-size: 20px;
  }

  .element-badge-lg .element-badge-name {
    font-size: 8px;
  }

  .element-badge-xl {
    gap: 4px;
    min-width: 96px;
    min-height: 80px;
  }

  .element-badge-xl .element-badge-symbol {
    font-size: 24px;
  }

  .element-badge-xl .element-badge-name {
    font-size: 10px;
  }

  .element-badge-inline {
    font-family: var(--font-mono);
    color: var(--badge-color);
    background: var(--badge-color);
    justify-content: center;
    align-items: center;
    font-size: .85em;
    font-weight: 700;
    display: inline-flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .element-badge-inline {
      background: color-mix(in srgb, var(--badge-color) 15%, transparent);
    }
  }

  .element-badge-inline {
    vertical-align: baseline;
    border-radius: 3px;
    padding: .1em .4em;
  }

  .element-hover-card {
    z-index: 10000;
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: #121216;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    min-width: 220px;
    max-width: 280px;
    transition: opacity .15s ease-out, transform .15s ease-out, visibility .15s;
    position: fixed;
    overflow: hidden;
    transform: translateY(4px)scale(.98);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .1);
  }

  .element-hover-card.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)scale(1);
  }

  .element-hover-card:before {
    content: "";
    background: var(--card-color, var(--color-emerald));
    width: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .hover-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    align-items: center;
    gap: 12px;
    padding: 12px 12px 10px 16px;
    display: flex;
  }

  .hover-card-badge {
    background: var(--card-color, var(--color-emerald));
    justify-content: center;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover-card-badge {
      background: color-mix(in srgb, var(--card-color, var(--color-emerald)) 15%, transparent);
    }
  }

  .hover-card-badge {
    border: 1px solid var(--card-color, var(--color-emerald));
    border-radius: 6px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover-card-badge {
      border: 1px solid color-mix(in srgb, var(--card-color, var(--color-emerald)) 30%, transparent);
    }
  }

  .hover-card-symbol {
    font-family: var(--font-mono);
    color: var(--card-color, var(--color-emerald));
    text-shadow: 0 0 12px var(--card-color);
    font-size: 20px;
    font-weight: 700;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover-card-symbol {
      text-shadow: 0 0 12px color-mix(in srgb, var(--card-color) 50%, transparent);
    }
  }

  .hover-card-title {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .hover-card-name {
    color: var(--color-moon-100);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
  }

  .hover-card-type {
    color: var(--color-moon-400);
    text-transform: capitalize;
    font-size: 11px;
  }

  .hover-card-description {
    color: var(--color-moon-300);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    margin: 0;
    padding: 8px 12px 8px 16px;
    font-size: 12px;
    line-height: 1.5;
  }

  .hover-card-stats {
    background: rgba(0, 0, 0, .15);
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 8px 12px 8px 16px;
    display: grid;
  }

  .hover-card-stat {
    background: rgba(255, 255, 255, .03);
    border-radius: 4px;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    display: flex;
  }

  .stat-label {
    color: var(--color-moon-500);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 10px;
    font-weight: 500;
  }

  .stat-value {
    color: var(--color-moon-200);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono);
  }

  .stat-badge {
    text-transform: capitalize;
    background: rgba(255, 255, 255, .08);
    border-radius: 3px;
    width: fit-content;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    display: inline-block;
  }

  .stat-badge.state-active {
    color: var(--color-emerald);
    background: var(--color-emerald);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stat-badge.state-active {
      background: color-mix(in srgb, var(--color-emerald) 15%, transparent);
    }
  }

  .stat-badge.state-draft {
    color: var(--color-amber);
    background: var(--color-amber);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stat-badge.state-draft {
      background: color-mix(in srgb, var(--color-amber) 15%, transparent);
    }
  }

  .stat-badge.state-suspended {
    color: var(--color-red);
    background: var(--color-red);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stat-badge.state-suspended {
      background: color-mix(in srgb, var(--color-red) 15%, transparent);
    }
  }

  .stat-badge.state-archived {
    color: var(--color-moon-400);
    background: var(--color-moon-700);
  }

  .hover-card-footer {
    background: rgba(0, 0, 0, .1);
    border-top: 1px solid rgba(255, 255, 255, .05);
    padding: 8px 12px 8px 16px;
  }

  .hover-card-category {
    color: var(--card-color, var(--color-emerald));
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 10px;
    font-weight: 600;
  }

  .props-type-selector {
    padding: 16px;
  }

  .props-type-title {
    color: var(--color-moon-100);
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
  }

  .props-type-category {
    margin-bottom: 20px;
  }

  .props-type-category:last-child {
    margin-bottom: 0;
  }

  .props-type-category-title {
    color: var(--color-moon-400);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-left: 2px solid;
    margin: 0 0 10px;
    padding-left: 8px;
    font-size: 11px;
    font-weight: 600;
  }

  .props-type-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    display: grid;
  }

  .props-type-card {
    border: 1px solid var(--color-moon-700);
    background: var(--color-moon-800);
    color: var(--color-moon-300);
    cursor: pointer;
    border-radius: 8px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    transition: all .2s;
    display: flex;
  }

  .props-type-card:hover {
    background: var(--color-moon-750);
    border-color: var(--color-moon-600);
    color: var(--color-moon-100);
    transform: translateY(-1px);
  }

  .props-type-icon {
    font-size: 20px;
    font-weight: 600;
  }

  .props-type-label {
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 11px;
    overflow: hidden;
  }

  .props-category-badge {
    text-transform: capitalize;
    border-radius: 4px;
    margin: 0 16px 12px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 500;
    display: inline-block;
  }

  .props-io-list {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .props-io-item {
    background: var(--color-moon-800);
    border-radius: 6px;
    padding: 10px 12px;
  }

  .props-io-item-header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .props-io-name {
    color: var(--color-moon-100);
    font-size: 13px;
    font-weight: 500;
  }

  .props-required {
    color: #ef4444;
    margin-left: 2px;
  }

  .props-io-type {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--color-primary-400);
    background: rgba(139, 92, 246, .15);
    border-radius: 4px;
    padding: 2px 6px;
  }

  .props-io-default {
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    display: flex;
  }

  .props-io-default-label {
    color: var(--color-moon-500);
  }

  .props-io-default-value {
    font-family: var(--font-mono);
    color: var(--color-moon-300);
    background: var(--color-moon-750);
    border-radius: 2px;
    padding: 1px 4px;
  }

  .props-io-empty {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    display: flex;
  }

  .props-io-empty svg {
    opacity: .4;
  }

  .props-io-empty-text {
    color: var(--color-moon-500);
    font-size: 12px;
  }

  .props-btn-icon {
    width: 28px;
    height: 28px;
    color: var(--color-moon-400);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    transition: all .2s;
    display: flex;
  }

  .props-btn-icon:hover {
    background: var(--color-moon-700);
    color: var(--color-moon-100);
  }

  .props-semantic-tag {
    background: var(--color-moon-800);
    color: var(--color-moon-200);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .props-port-card {
    cursor: default;
    flex-direction: column;
  }

  .props-port-card-header {
    cursor: pointer;
  }

  .props-port-card.expanded {
    background: var(--color-moon-750);
  }

  .props-port-field-count {
    color: var(--color-moon-500);
    font-size: 10px;
    font-family: var(--font-mono);
  }

  .props-port-schema-editor {
    border-top: 1px solid var(--color-moon-700);
    margin-top: 8px;
    padding: 8px 0 0;
  }

  .props-schema-fields {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .props-schema-empty {
    text-align: center;
    padding: 8px 0;
  }

  .props-schema-field {
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    display: flex;
  }

  .props-schema-field-name {
    color: var(--color-moon-200);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-mono);
    flex: 1;
  }

  .props-schema-field-type-select {
    font-size: 11px;
    font-family: var(--font-mono);
    border: 1px solid var(--color-moon-600);
    background: var(--color-moon-800);
    color: var(--color-primary-400);
    cursor: pointer;
    border-radius: 3px;
    padding: 2px 4px;
  }

  .props-schema-field-req {
    border: 1px solid var(--color-moon-600);
    color: var(--color-moon-500);
    cursor: pointer;
    font-size: 10px;
    font-family: var(--font-mono);
    background: none;
    border-radius: 3px;
    padding: 2px 6px;
  }

  .props-schema-field-req.active {
    color: #ef4444;
    background: rgba(239, 68, 68, .15);
    border-color: rgba(239, 68, 68, .3);
  }

  .props-schema-field-remove {
    color: var(--color-moon-600);
    cursor: pointer;
    opacity: 0;
    background: none;
    border: none;
    border-radius: 3px;
    padding: 2px;
    transition: opacity .15s;
  }

  .props-schema-field:hover .props-schema-field-remove {
    opacity: 1;
  }

  .props-schema-field-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, .1);
  }

  .props-schema-add-row {
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    display: flex;
  }

  .props-schema-add-name {
    font-size: 11px;
    font-family: var(--font-mono);
    border: 1px solid var(--color-moon-600);
    background: var(--color-moon-800);
    color: var(--color-moon-100);
    border-radius: 3px;
    outline: none;
    flex: 1;
    padding: 3px 6px;
  }

  .props-schema-add-name:focus {
    border-color: var(--color-primary-500);
  }

  .props-schema-add-type {
    font-size: 11px;
    font-family: var(--font-mono);
    border: 1px solid var(--color-moon-600);
    background: var(--color-moon-800);
    color: var(--color-primary-400);
    border-radius: 3px;
    padding: 3px 4px;
  }

  .props-schema-add-req-label {
    color: var(--color-moon-500);
    font-size: 10px;
    font-family: var(--font-mono);
    align-items: center;
    gap: 2px;
    display: flex;
  }

  .props-schema-add-confirm, .props-schema-add-cancel {
    cursor: pointer;
    color: var(--color-moon-400);
    background: none;
    border: none;
    border-radius: 3px;
    padding: 2px 4px;
  }

  .props-schema-add-confirm:hover {
    color: #10b981;
  }

  .props-schema-add-cancel:hover {
    color: #ef4444;
  }

  .props-schema-add-btn, .props-add-port-btn {
    color: var(--color-moon-500);
    border: 1px dashed var(--color-moon-700);
    cursor: pointer;
    background: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
    padding: 6px 10px;
    font-size: 11px;
    transition: all .15s;
    display: flex;
  }

  .props-schema-add-btn:hover, .props-add-port-btn:hover {
    color: var(--color-primary-400);
    border-color: var(--color-primary-600);
    background: rgba(59, 130, 246, .05);
  }

  .props-add-port-form {
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    display: flex;
  }

  .props-add-port-name {
    font-size: 12px;
    font-family: var(--font-mono);
    border: 1px solid var(--color-moon-600);
    background: var(--color-moon-800);
    color: var(--color-moon-100);
    border-radius: 4px;
    outline: none;
    flex: 1;
    padding: 5px 8px;
  }

  .props-add-port-name:focus {
    border-color: var(--color-primary-500);
  }

  .props-add-port-confirm, .props-add-port-cancel {
    cursor: pointer;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
  }

  .props-add-port-confirm {
    background: var(--color-primary-600);
    color: #fff;
  }

  .props-add-port-confirm:hover {
    background: var(--color-primary-500);
  }

  .props-add-port-cancel {
    color: var(--color-moon-500);
    background: none;
  }

  .props-add-port-cancel:hover {
    color: var(--color-moon-300);
  }

  .props-section-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    display: flex;
  }

  .props-section-header .props-content-section-title {
    margin-bottom: 0;
  }

  .props-generic-category {
    flex-direction: column;
    gap: 8px;
    display: flex;
  }

  .props-operation-list {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .props-expandable-op {
    background: rgba(39, 39, 42, .5);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    transition: border-color .2s;
    overflow: hidden;
  }

  .props-expandable-op:hover {
    border-color: rgba(255, 255, 255, .1);
  }

  .props-expandable-op.expanded {
    border-color: rgba(139, 92, 246, .3);
  }

  .props-expandable-header {
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: inherit;
    background: none;
    border: none;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    display: flex;
  }

  .props-expandable-header:hover {
    background: rgba(255, 255, 255, .03);
  }

  .props-expandable-header:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .props-expandable-header:disabled:hover {
    background: none;
  }

  .props-expandable-title {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .props-expandable-label {
    color: var(--color-moon-100);
    font-size: 13px;
    font-weight: 500;
  }

  .props-expandable-desc {
    color: var(--color-moon-500);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    overflow: hidden;
  }

  .props-expandable-chevron {
    color: var(--color-moon-500);
    flex-shrink: 0;
    margin-left: 8px;
    font-size: 10px;
  }

  .props-expandable-content {
    border-top: 1px solid rgba(255, 255, 255, .05);
    margin-top: 0;
    padding: 0 12px 12px;
  }

  .props-loading-inline {
    color: var(--color-moon-500);
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 12px;
    display: flex;
  }

  .props-spinner-small {
    border: 2px solid rgba(139, 92, 246, .2);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    animation: .8s linear infinite spin;
  }

  .props-loading-bar {
    background: rgba(139, 92, 246, .1);
    width: 100%;
    height: 2px;
    position: relative;
    overflow: hidden;
  }

  .props-loading-bar-indicator {
    background: var(--color-primary-500);
    border-radius: 1px;
    width: 40%;
    height: 100%;
    animation: 1.2s ease-in-out infinite props-loading-slide;
    position: absolute;
    top: 0;
    left: 0;
  }

  @keyframes props-loading-slide {
    0% {
      left: -40%;
    }

    100% {
      left: 100%;
    }
  }

  .props-expandable-header, .props-action-btn, .props-data-section-header, .props-relationship-header, .props-edit-btn, .smart-expand-btn, .smart-array-toggle {
    transition: background .15s, border-color .15s, transform .15s;
  }

  .props-expandable-content, .props-data-section-content, .props-relationship-content, .smart-array-list, .operation-form {
    animation: .15s ease-out expandIn;
  }

  @keyframes expandIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .props-expandable-chevron, .smart-chevron {
    transition: transform .15s;
  }

  .skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .04) 100%) 0 0 / 200% 100%;
    border-radius: 4px;
    animation: 1.5s infinite skeleton-shimmer;
  }

  .skeleton-text {
    height: 14px;
    margin-bottom: 8px;
  }

  .skeleton-text-sm {
    width: 60%;
    height: 12px;
  }

  .skeleton-badge {
    border-radius: 12px;
    width: 60px;
    height: 24px;
  }

  .skeleton-button {
    border-radius: 4px;
    width: 80px;
    height: 32px;
  }

  .props-expandable-header:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: 2px;
  }

  .props-action-btn:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: 2px;
  }

  .props-data-section-header:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: 2px;
  }

  .props-relationship-header:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: 2px;
  }

  .props-edit-btn:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: 2px;
  }

  .smart-expand-btn:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: 2px;
  }

  .smart-array-toggle:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: 2px;
  }

  .schema-input:focus, .props-json-editor:focus, .props-inline-input:focus, .props-header-name-input:focus, .props-header-intention-input:focus {
    border-color: var(--ide-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(75, 112, 245, .15);
  }

  .props-related-item:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: -2px;
  }

  [tabindex="0"]:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: 2px;
  }

  .props-action-btn:disabled, .props-btn-primary:disabled, .props-btn-secondary:disabled {
    transition: opacity .15s;
  }

  .props-action-btn-success {
    animation: .3s ease-out successPulse;
  }

  @keyframes successPulse {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.05);
    }

    100% {
      transform: scale(1);
    }
  }

  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]:after {
    content: attr(data-tooltip);
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    background: rgba(0, 0, 0, .9);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    transition: opacity .15s, transform .15s;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%)translateY(4px);
  }

  [data-tooltip]:hover:after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%)translateY(-4px);
  }

  .props-actions-section {
    border-top: 1px solid rgba(255, 255, 255, .05);
    margin-top: 12px;
    padding-top: 12px;
  }

  .props-section-label {
    color: var(--color-moon-500);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
  }

  .props-action-buttons {
    flex-wrap: wrap;
    gap: 8px;
    display: flex;
  }

  .props-action-btn {
    color: var(--color-moon-200);
    cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    transition: all .2s;
  }

  .props-action-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
  }

  .props-action-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .props-action-btn-primary {
    background: var(--color-primary-600);
    border-color: var(--color-primary-500);
    color: #fff;
  }

  .props-action-btn-primary:hover:not(:disabled) {
    background: var(--color-primary-500);
  }

  .props-action-btn-danger {
    color: #ef4444;
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .3);
  }

  .props-action-btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, .2);
    border-color: rgba(239, 68, 68, .5);
  }

  .props-action-btn-success {
    color: #22c55e;
    background: rgba(34, 197, 94, .2);
    border-color: rgba(34, 197, 94, .4);
  }

  .props-action-error {
    color: #ef4444;
    margin-top: 4px;
    font-size: 11px;
  }

  .props-action-wrapper {
    flex-direction: column;
    gap: 0;
    display: flex;
  }

  .props-action-btn-expanded {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .operation-form {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    margin-top: 8px;
    padding: 16px;
    animation: .15s ease-out operation-form-appear;
  }

  @keyframes operation-form-appear {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .operation-form-header {
    margin-bottom: 16px;
  }

  .operation-form-title {
    color: var(--color-moon-100);
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
  }

  .operation-form-description {
    color: var(--color-moon-500);
    margin: 0;
    font-size: 12px;
  }

  .operation-form-fields {
    margin-bottom: 16px;
  }

  .operation-form-fields .schema-form {
    gap: 12px;
  }

  .operation-form-fields .schema-field-label {
    color: var(--color-moon-400);
    font-size: 11px;
  }

  .operation-form-fields .schema-input {
    background: rgba(0, 0, 0, .2);
    border-color: rgba(255, 255, 255, .1);
    padding: 8px 10px;
    font-size: 13px;
  }

  .operation-form-fields .schema-input:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .15);
  }

  .operation-form-empty {
    text-align: center;
    padding: 12px;
  }

  .operation-form-error {
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: 4px;
    margin-bottom: 12px;
    padding: 8px 12px;
  }

  .operation-form-error-text {
    color: #ef4444;
    font-size: 12px;
  }

  .operation-form-actions {
    border-top: 1px solid rgba(255, 255, 255, .06);
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    display: flex;
  }

  .compact-operation-form {
    align-items: flex-end;
    gap: 8px;
    display: flex;
  }

  .compact-form-fields {
    flex: 1;
  }

  .compact-form-fields .schema-form {
    flex-direction: row;
    gap: 8px;
  }

  .compact-form-fields .schema-field {
    flex: 1;
  }

  .compact-form-error {
    color: #ef4444;
    font-size: 11px;
  }

  .props-kv-compact {
    gap: 6px;
    font-size: 12px;
    display: grid;
  }

  .props-kv-row {
    grid-template-columns: minmax(80px, auto) 1fr;
    align-items: baseline;
    gap: 12px;
    display: grid;
  }

  .props-kv-row dt {
    color: var(--color-moon-500);
    font-weight: 500;
  }

  .props-kv-row dd {
    color: var(--color-moon-200);
    word-break: break-word;
  }

  .props-list-compact {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .props-list-compact li {
    background: rgba(255, 255, 255, .03);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .props-array-preview {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .props-code {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, .05);
    border-radius: 2px;
    padding: 1px 4px;
  }

  .props-pre {
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-all;
    background: rgba(0, 0, 0, .3);
    border-radius: 4px;
    max-height: 200px;
    padding: 8px;
    font-size: 11px;
    overflow: auto;
  }

  .props-link {
    color: var(--color-primary-400);
    text-decoration: none;
  }

  .props-link:hover {
    text-decoration: underline;
  }

  .props-error-inline {
    background: rgba(239, 68, 68, .1);
    border-radius: 4px;
    padding: 8px;
  }

  .props-error-text {
    color: #ef4444;
    font-size: 12px;
  }

  .props-draft-notice-small {
    text-align: center;
    background: rgba(251, 191, 36, .1);
    border: 1px solid rgba(251, 191, 36, .2);
    border-radius: 6px;
    padding: 12px;
    font-size: 12px;
  }

  .props-content-empty {
    text-align: center;
    padding: 24px;
  }

  .smart-null {
    color: var(--color-moon-500);
    font-style: italic;
  }

  .smart-bool {
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 4px;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
  }

  .smart-bool-true {
    color: #10b981;
    background: rgba(16, 185, 129, .15);
  }

  .smart-bool-false {
    color: var(--color-moon-400);
    background: rgba(113, 113, 122, .15);
  }

  .smart-number {
    font-family: var(--font-mono);
    color: var(--color-moon-200);
  }

  .smart-duration {
    font-family: var(--font-mono);
    color: #22d3ee;
  }

  .smart-bytes {
    font-family: var(--font-mono);
    color: #a78bfa;
  }

  .smart-string {
    color: var(--color-moon-200);
    word-break: break-word;
  }

  .smart-empty {
    color: var(--color-moon-500);
    font-style: italic;
  }

  .smart-datetime {
    color: #fbbf24;
    cursor: help;
  }

  .smart-url {
    color: var(--color-primary-400, #818cf8);
    align-items: center;
    gap: 2px;
    text-decoration: none;
    display: inline-flex;
  }

  .smart-url:hover {
    text-decoration: underline;
  }

  .smart-url-icon {
    opacity: .7;
    font-size: 10px;
  }

  .smart-uuid {
    font-family: var(--font-mono);
    color: var(--color-moon-400);
    background: rgba(255, 255, 255, .05);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
  }

  .smart-enum {
    color: #818cf8;
    background: rgba(99, 102, 241, .15);
    border-radius: 4px;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
  }

  .smart-long-text {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .smart-text-preview, .smart-text-full {
    color: var(--color-moon-200);
    word-break: break-word;
    line-height: 1.5;
  }

  .smart-text-preview {
    color: var(--color-moon-300);
  }

  .smart-code {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .smart-code pre {
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-all;
    background: rgba(0, 0, 0, .3);
    border-radius: 4px;
    margin: 0;
    padding: 8px;
    font-size: 11px;
    overflow-x: auto;
  }

  .smart-code-preview code, .smart-code-full code {
    color: var(--color-moon-200);
  }

  .smart-expand-btn {
    color: var(--color-primary-400, #818cf8);
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    padding: 2px 0;
    font-size: 11px;
  }

  .smart-expand-btn:hover {
    text-decoration: underline;
  }

  .smart-array-inline {
    color: var(--color-moon-200);
  }

  .smart-array {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .smart-array-toggle {
    color: var(--color-moon-300);
    cursor: pointer;
    background: none;
    border: none;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
    display: flex;
  }

  .smart-array-toggle:hover {
    color: var(--color-moon-200);
  }

  .smart-array-count {
    color: var(--color-moon-400);
    font-size: 11px;
  }

  .smart-chevron {
    font-size: 10px;
    transition: transform .15s;
  }

  .smart-chevron.expanded {
    transform: rotate(90deg);
  }

  .smart-array-list {
    border-left: 1px solid rgba(255, 255, 255, .1);
    flex-direction: column;
    gap: 4px;
    margin: 0 0 0 12px;
    padding: 0 0 0 8px;
    list-style: none;
    display: flex;
  }

  .smart-array-list li {
    padding: 2px 0;
  }

  .smart-object {
    gap: 4px;
    display: grid;
  }

  .smart-object-root {
    gap: 8px;
  }

  .smart-object-summary {
    color: var(--color-moon-400);
    font-size: 11px;
  }

  .smart-kv-row {
    grid-template-columns: minmax(80px, auto) 1fr;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    display: grid;
  }

  .smart-key {
    color: var(--color-moon-500);
    font-weight: 500;
  }

  .smart-value {
    color: var(--color-moon-200);
    word-break: break-word;
  }

  .props-layout-content {
    flex-direction: column;
    gap: 16px;
    display: flex;
  }

  .props-status-section {
    background: rgba(255, 255, 255, .02);
    border-radius: 8px;
    padding: 12px;
  }

  .props-status-badges {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    display: flex;
  }

  .props-status-badge {
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-moon-300);
    background: rgba(255, 255, 255, .08);
    border-radius: 4px;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
  }

  .props-status-badge[data-state="ready"] {
    color: #10b981;
    background: rgba(16, 185, 129, .15);
  }

  .props-status-badge[data-state="disabled"] {
    color: var(--color-moon-500);
    background: rgba(113, 113, 122, .15);
  }

  .props-status-badge[data-state="running"] {
    color: #3b82f6;
    background: rgba(59, 130, 246, .15);
  }

  .props-status-badge[data-state="error"] {
    color: #ef4444;
    background: rgba(239, 68, 68, .15);
  }

  .props-form-badge {
    color: #a855f7;
    background: rgba(168, 85, 247, .15);
  }

  .props-capabilities {
    flex-wrap: wrap;
    gap: 4px;
    display: flex;
  }

  .props-capability-badge {
    color: #818cf8;
    background: rgba(99, 102, 241, .15);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
  }

  .props-primary-action {
    background: rgba(255, 255, 255, .02);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 16px;
    display: flex;
  }

  .props-primary-action-placeholder {
    background: rgba(59, 130, 246, .1);
    border: 1px dashed rgba(59, 130, 246, .3);
    border-radius: 6px;
    padding: 12px 24px;
  }

  .props-data-section {
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    overflow: hidden;
  }

  .props-data-section-header {
    cursor: pointer;
    width: 100%;
    color: var(--text-primary);
    background: rgba(255, 255, 255, .03);
    border: none;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    display: flex;
  }

  .props-data-section-header:hover {
    background: rgba(255, 255, 255, .05);
  }

  .props-data-section-title {
    font-size: 12px;
    font-weight: 500;
  }

  .props-data-section-content {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 12px;
  }

  .props-action-group {
    background: rgba(255, 255, 255, .02);
    border-radius: 8px;
    padding: 12px;
  }

  .props-danger-zone {
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: 8px;
    overflow: hidden;
  }

  .props-danger-warning {
    color: #f87171;
    background: rgba(239, 68, 68, .08);
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 12px;
    display: flex;
  }

  .props-warning-icon {
    stroke: currentColor;
    flex-shrink: 0;
  }

  .props-info-card {
    background: rgba(255, 255, 255, .02);
    border-radius: 8px;
    padding: 12px;
  }

  .props-info-fields {
    gap: 8px;
    display: grid;
  }

  .props-info-field {
    grid-template-columns: 100px 1fr;
    gap: 8px;
    font-size: 12px;
    display: grid;
  }

  .props-info-field dt {
    color: var(--color-moon-500);
  }

  .props-info-field dd {
    color: var(--color-moon-200);
  }

  .props-relationships {
    flex-direction: column;
    gap: 8px;
    display: flex;
  }

  .props-relationships-sections {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .props-relationship-section {
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 6px;
    overflow: hidden;
  }

  .props-relationship-header {
    cursor: pointer;
    width: 100%;
    color: var(--text-primary);
    background: rgba(255, 255, 255, .02);
    border: none;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    display: flex;
  }

  .props-relationship-header:hover {
    background: rgba(255, 255, 255, .04);
  }

  .props-relationship-title {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .props-relationship-label {
    font-size: 12px;
    font-weight: 500;
  }

  .props-relationship-count {
    color: var(--color-moon-400);
    background: rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
  }

  .props-relationship-content {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 8px 12px;
  }

  .props-relationship-empty {
    padding: 8px 0;
  }

  .props-relationship-list {
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .props-related-item {
    cursor: pointer;
    background: rgba(255, 255, 255, .02);
    border-radius: 4px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    transition: background .15s;
    display: flex;
  }

  .props-related-item:hover {
    background: rgba(255, 255, 255, .05);
  }

  .props-related-badge {
    flex-shrink: 0;
  }

  .props-related-info {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .props-related-name {
    color: var(--color-moon-200);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
  }

  .props-related-label {
    color: var(--color-moon-500);
    font-size: 10px;
  }

  .props-related-status {
    text-transform: uppercase;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
  }

  .props-related-status[data-status="ready"] {
    color: #10b981;
    background: rgba(16, 185, 129, .15);
  }

  .props-related-status[data-status="disabled"] {
    color: var(--color-moon-500);
    background: rgba(113, 113, 122, .15);
  }

  .props-related-status[data-status="error"] {
    color: #ef4444;
    background: rgba(239, 68, 68, .15);
  }

  .props-relationships-summary {
    background: rgba(255, 255, 255, .02);
    border-radius: 8px;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px;
    display: grid;
  }

  .props-relationship-stat {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    display: flex;
  }

  .props-stat-count {
    color: var(--color-moon-200);
    font-size: 18px;
    font-weight: 600;
  }

  .props-stat-label {
    color: var(--color-moon-500);
    text-transform: uppercase;
    font-size: 10px;
  }

  .props-members {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    display: flex;
  }

  .props-members-list {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .props-members-header {
    align-items: center;
    margin-bottom: 4px;
    padding: 4px 0;
    display: flex;
  }

  .props-members-count {
    color: var(--color-moon-400);
    font-size: 12px;
    font-weight: 500;
  }

  .props-muted-hint {
    color: var(--color-moon-600);
    margin-top: 4px;
    font-size: 11px;
  }

  .props-environments {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    display: flex;
  }

  .props-environments-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    display: grid;
  }

  .props-env-card {
    background: var(--color-moon-800);
    cursor: pointer;
    text-align: left;
    color: var(--color-moon-300);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    font-family: inherit;
    font-size: 12px;
    transition: all .15s;
    display: flex;
  }

  .props-env-card:hover {
    background: var(--color-moon-750);
    border-color: rgba(255, 255, 255, .1);
  }

  .props-env-card-active {
    background: rgba(139, 92, 246, .08);
    border-color: rgba(139, 92, 246, .4);
  }

  .props-env-card-header {
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .props-env-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
  }

  .props-env-name {
    color: var(--color-moon-200);
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 600;
  }

  .props-env-status {
    color: var(--color-moon-500);
    font-size: 11px;
  }

  .props-env-active-badge {
    color: rgba(139, 92, 246, .8);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 10px;
    font-weight: 500;
  }

  .props-environments-info {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .04);
    border-radius: 6px;
    padding: 10px 12px;
  }

  .props-environments-info-title {
    color: var(--color-moon-400);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
  }

  .props-environments-info-list {
    color: var(--color-moon-500);
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    font-size: 11px;
    list-style: none;
    display: flex;
  }

  .props-environments-info-list strong {
    color: var(--color-moon-300);
  }

  .props-editor, .props-view-mode, .props-edit-mode {
    flex-direction: column;
    gap: 12px;
    display: flex;
  }

  .props-view-header, .props-edit-header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .props-edit-btn {
    color: var(--text-primary);
    cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 11px;
    transition: all .15s;
  }

  .props-edit-btn:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
  }

  .props-empty-state {
    text-align: center;
    background: rgba(255, 255, 255, .02);
    border-radius: 8px;
    padding: 24px;
  }

  .props-edit-form {
    flex-direction: column;
    gap: 8px;
    display: flex;
  }

  .props-json-editor {
    width: 100%;
    color: var(--text-primary);
    font-family: var(--font-mono);
    resize: vertical;
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    min-height: 150px;
    padding: 12px;
    font-size: 12px;
  }

  .props-json-editor:focus {
    border-color: var(--ide-accent);
    outline: none;
  }

  .props-parse-error {
    color: #f87171;
    background: rgba(239, 68, 68, .1);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 11px;
  }

  .props-edit-actions {
    border-top: 1px solid rgba(255, 255, 255, .06);
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    display: flex;
  }

  .props-btn-secondary {
    color: var(--text-secondary);
    cursor: pointer;
    background: none;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 12px;
  }

  .props-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, .05);
  }

  .props-btn-primary {
    background: var(--ide-accent);
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
  }

  .props-btn-primary:hover:not(:disabled) {
    opacity: .9;
  }

  .props-btn-primary:disabled, .props-btn-secondary:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .props-inline-editor {
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    display: flex;
  }

  .props-inline-key {
    color: var(--color-moon-500);
    min-width: 100px;
    font-size: 12px;
  }

  .props-inline-value {
    color: var(--color-moon-200);
    cursor: pointer;
    border-radius: 2px;
    padding: 2px 4px;
    font-size: 12px;
  }

  .props-inline-value:hover {
    background: rgba(255, 255, 255, .05);
  }

  .props-inline-input {
    border: 1px solid var(--ide-accent);
    color: var(--text-primary);
    background: rgba(0, 0, 0, .2);
    border-radius: 4px;
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
  }

  .props-inline-input:focus {
    outline: none;
  }

  .chat-panel {
    background: var(--ide-bg);
    height: 100%;
    min-height: 0;
    color: var(--text-primary);
    display: flex;
  }

  .chat-panel-sidebar {
    background: var(--ide-bg);
    border-right: none;
    flex-direction: row;
    flex-shrink: 0;
    width: 220px;
    min-width: 180px;
    transition: width .2s, min-width .2s, opacity .2s;
    display: flex;
    overflow: visible;
  }

  .chat-panel-sidebar.collapsed {
    opacity: 0;
    pointer-events: none;
    border-right: none;
    width: 0;
    min-width: 0;
    overflow: hidden;
  }

  .chat-panel-title {
    font-size: 14px;
    font-weight: 600;
  }

  .chat-panel-new {
    width: 100%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    border-radius: 6px;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
  }

  .chat-panel-new:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .06);
  }

  .chat-deploy-screen {
    background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(75, 112, 245, .03) 0%, transparent 70%), var(--ide-bg);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .chat-deploy-logo {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
  }

  .chat-deploy-logo img {
    object-fit: contain;
    opacity: .035;
    width: 280px;
    height: 280px;
  }

  .chat-deploy-content {
    z-index: 1;
    text-align: center;
    flex-direction: column;
    align-items: center;
    animation: .5s deploy-fade-in;
    display: flex;
    position: relative;
  }

  .chat-deploy-idle {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .chat-deploy-title {
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -.01em;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
  }

  .chat-deploy-subtitle {
    color: var(--ide-text-muted);
    margin: 0 0 20px;
    font-size: 12px;
  }

  .chat-deploy-btn {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, .05);
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 500;
  }

  .chat-deploy-btn:hover {
    border-color: var(--border-color-hover);
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .chat-deploy-btn:active {
    transform: scale(.97);
  }

  .chat-deploy-running {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: .3s deploy-fade-in;
    display: flex;
  }

  .chat-deploy-spinner {
    border: 2px solid rgba(255, 255, 255, .08);
    border-top-color: var(--ide-text-muted);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: .8s linear infinite deploy-spin;
  }

  .chat-deploy-phase {
    font-family: var(--font-mono);
    color: var(--ide-text-muted);
    font-size: 12px;
    animation: .4s deploy-phase-in;
  }

  .chat-deploy-error {
    color: var(--color-error);
    opacity: .7;
    font-size: 12px;
    font-family: var(--font-mono);
    margin-top: 16px;
  }

  @keyframes deploy-fade-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes deploy-phase-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes deploy-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .chat-agent-picker {
    z-index: 25;
    min-width: 0;
    position: relative;
  }

  .chat-agent-trigger {
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: -.01em;
    background: none;
    border: none;
    border-radius: 4px;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-family: Space Mono, monospace;
    font-size: 12px;
    font-weight: 400;
    display: flex;
  }

  .chat-channel-hash {
    color: var(--text-muted);
    opacity: .5;
    font-size: 13px;
    font-weight: 500;
  }

  .chat-agent-trigger:hover, .chat-agent-trigger.open {
    background: rgba(255, 255, 255, .06);
  }

  .chat-agent-trigger-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    flex: 1;
    overflow: hidden;
  }

  .chat-agent-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 10px;
  }

  .chat-agent-menu {
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-color);
    width: auto;
    min-width: 180px;
    max-height: 260px;
    box-shadow: var(--shadow-card);
    z-index: 120;
    background: rgba(15, 15, 20, .95);
    border-radius: 8px;
    padding: 4px 0;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    overflow-y: auto;
  }

  .chat-agent-item {
    width: 100%;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    display: block;
  }

  .chat-agent-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .06);
  }

  .chat-agent-item.active {
    color: var(--text-primary);
    background: rgba(124, 58, 237, .15);
  }

  .chat-agent-item.disabled {
    color: var(--text-muted);
    cursor: default;
    font-style: italic;
  }

  .chat-panel-sidebar-status {
    color: var(--text-secondary);
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    display: flex;
  }

  .status-dot {
    background: #52525b;
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .status-dot.connected {
    background: var(--color-success);
  }

  .status-dot.connecting {
    background: var(--color-warning);
  }

  .status-dot.disconnected {
    background: var(--color-error);
  }

  .chat-panel-sessions {
    z-index: 1;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .chat-filter-bar {
    align-items: center;
    gap: 4px;
    padding: 10px 8px 6px;
    display: flex;
  }

  .chat-filter {
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    letter-spacing: .02em;
    white-space: nowrap;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 10px;
    padding: 3px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    transition: color .15s, background .15s, border-color .15s;
  }

  .chat-filter:hover:not(.active) {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .04);
  }

  .chat-filter.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
    font-weight: 600;
  }

  .chat-filter-lock {
    opacity: .45;
    vertical-align: -1px;
    margin-right: 3px;
  }

  .chat-channel-placeholder {
    opacity: .4;
  }

  .chat-panel-sessions-header {
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: .08em;
    opacity: .6;
    padding: 14px 12px 6px;
    font-size: 10px;
  }

  .chat-panel-sessions-list {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    flex: 1;
    padding: 4px 8px 12px;
    overflow-y: auto;
  }

  .chat-panel-sessions-list:hover {
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
  }

  .chat-panel-sessions-list::-webkit-scrollbar {
    width: 4px;
  }

  .chat-panel-sessions-list::-webkit-scrollbar-track {
    background: none;
  }

  .chat-panel-sessions-list::-webkit-scrollbar-thumb {
    background: none;
    border-radius: 4px;
    transition: background .15s;
  }

  .chat-panel-sessions-list:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
  }

  .chat-session {
    text-align: left;
    width: 100%;
    color: inherit;
    cursor: pointer;
    transition: background var(--transition-fast);
    background: none;
    border: none;
    border-radius: 6px;
    align-items: center;
    padding: 6px 8px;
    display: flex;
    position: relative;
  }

  .chat-session:hover {
    background: rgba(255, 255, 255, .06);
  }

  .chat-session.active {
    background: rgba(255, 255, 255, .08);
  }

  .chat-session-info {
    flex: 1;
    min-width: 0;
  }

  .chat-session-title {
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
  }

  .chat-session.active .chat-session-title {
    color: var(--text-primary);
    font-weight: 600;
  }

  .chat-session-delete {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    border-radius: 4px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    display: none;
  }

  .chat-session:hover .chat-session-delete {
    display: flex;
  }

  .chat-session-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, .2);
  }

  .chat-panel-main {
    background: var(--ide-bg);
    flex-direction: column;
    flex: 1;
    min-width: 0;
    transition: box-shadow .4s;
    display: flex;
  }

  .chat-panel-main.chat-panel-thinking {
    animation: 2s ease-in-out infinite chat-thinking-breathe;
  }

  @keyframes chat-thinking-breathe {
    0%, 100% {
      box-shadow: inset 0 0 0 1px rgba(var(--circle-color-rgb), .1), 0 0 12px -6px rgba(var(--circle-color-rgb), .12);
    }

    50% {
      box-shadow: inset 0 0 0 1px rgba(var(--circle-color-rgb), .25), 0 0 24px -4px rgba(var(--circle-color-rgb), .3);
    }
  }

  .chat-panel-header {
    display: none;
  }

  .chat-inline-bar {
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 6px 12px;
    display: flex;
  }

  .chat-panel-header-title {
    font-size: 14px;
    font-weight: 600;
  }

  .chat-ws-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    display: inline-block;
  }

  .chat-ws-dot.connected {
    background: #34d399;
  }

  .chat-ws-dot.connecting {
    background: #fbbf24;
    animation: 1.2s ease-in-out infinite pulse-dot;
  }

  .chat-ws-dot.disconnected {
    background: #ef4444;
  }

  @keyframes pulse-dot {
    0%, 100% {
      opacity: 1;
    }

    50% {
      opacity: .3;
    }
  }

  .chat-sidebar-edge {
    cursor: pointer;
    width: 16px;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .chat-sidebar-edge:hover {
    background: rgba(255, 255, 255, .04);
    border-left-color: rgba(255, 255, 255, .15);
  }

  .chat-sidebar-edge-arrow {
    color: rgba(255, 255, 255, .15);
    transition: all var(--transition-fast);
    font-size: 11px;
    line-height: 1;
  }

  .chat-sidebar-edge:hover .chat-sidebar-edge-arrow {
    color: rgba(255, 255, 255, .5);
    transform: translateX(-1px);
  }

  .chat-sidebar-toggle {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    display: flex;
  }

  .chat-sidebar-toggle:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .15);
  }

  .chat-header-status {
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    display: flex;
  }

  .chat-header-status-text {
    color: var(--text-muted);
    font-size: 11px;
  }

  .chat-members {
    flex-shrink: 0;
    position: relative;
  }

  .chat-users-btn {
    height: 22px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    background: none;
    border: none;
    border-radius: 4px;
    align-items: center;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 400;
    display: inline-flex;
  }

  .chat-users-btn:hover:not(:disabled), .chat-users-btn.open {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .06);
  }

  .chat-users-btn:disabled {
    opacity: .45;
    cursor: default;
  }

  .chat-members-trigger {
    display: none;
  }

  .chat-member-pill {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .08);
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    position: relative;
  }

  .chat-member-pill-user {
    background: rgba(255, 255, 255, .11);
  }

  .chat-member-pill-agent {
    color: rgba(186, 230, 253, .95);
    background: rgba(125, 211, 252, .16);
  }

  .chat-member-pill-dispatcher {
    color: rgba(251, 207, 232, .95);
    background: rgba(244, 114, 182, .16);
  }

  .chat-member-pill.responding:after {
    content: "";
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 2px var(--ide-bg);
    background: #34d399;
    border-radius: 50%;
    animation: 1.2s ease-in-out infinite pulse-dot;
    position: absolute;
    bottom: -2px;
    right: -2px;
  }

  .chat-members-count {
    color: var(--text-muted);
    margin-left: 2px;
    font-size: 11px;
  }

  .chat-members-popover {
    -webkit-backdrop-filter: blur(20px);
    z-index: 10001;
    background: rgba(15, 15, 20, .97);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    width: 300px;
    max-height: 340px;
    padding: 10px;
    position: fixed;
    overflow: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  }

  .chat-members-section-title {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-size: 11px;
  }

  .chat-members-list {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    display: flex;
  }

  .chat-member-row {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    display: flex;
  }

  .chat-member-row-main {
    align-items: center;
    gap: 6px;
    min-width: 0;
    display: flex;
  }

  .chat-member-row-avatar {
    width: 22px;
    height: 22px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .1);
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    position: relative;
  }

  .chat-member-row-avatar-agent {
    color: rgba(186, 230, 253, .95);
    background: rgba(125, 211, 252, .16);
  }

  .chat-member-row-avatar-dispatcher {
    color: rgba(251, 207, 232, .95);
    background: rgba(244, 114, 182, .16);
  }

  .chat-member-row-avatar.responding:after {
    content: "";
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 2px var(--ide-bg);
    background: #34d399;
    border-radius: 50%;
    animation: 1.2s ease-in-out infinite pulse-dot;
    position: absolute;
    bottom: -2px;
    right: -2px;
  }

  .chat-member-row-name {
    color: var(--text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    overflow: hidden;
  }

  .chat-member-role-badge {
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 10px;
  }

  .chat-member-remove {
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .chat-member-remove:hover {
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, .2);
  }

  .chat-members-add-list {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .chat-member-add-option {
    text-align: left;
    color: var(--text-secondary);
    cursor: pointer;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .chat-member-add-option:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .18);
  }

  .chat-members-empty {
    color: var(--text-muted);
    padding: 6px 2px 2px;
    font-size: 11px;
  }

  .chat-panel-messages {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    flex: 1;
    padding: 4px 4px 12px 0;
    overflow-y: auto;
  }

  .chat-panel-messages:hover {
    scrollbar-color: rgba(255, 255, 255, .08) transparent;
  }

  .chat-panel-messages::-webkit-scrollbar {
    width: 4px;
  }

  .chat-panel-messages::-webkit-scrollbar-track {
    background: none;
  }

  .chat-panel-messages::-webkit-scrollbar-thumb {
    background: none;
    border-radius: 4px;
    transition: background .15s;
  }

  .chat-panel-messages:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .08);
  }

  .chat-empty-state {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    background: radial-gradient(ellipse 50% 40% at 50% 45%, rgba(var(--circle-color-rgb), .03) 0%, transparent 70%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    min-height: 100%;
    padding-bottom: 48px;
    display: flex;
  }

  .chat-empty-silhouette {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .chat-empty-silhouette img {
    object-fit: contain;
    opacity: .045;
    width: 140px;
    height: 140px;
    animation: 4s ease-in-out infinite empty-state-breathe;
  }

  @keyframes empty-state-breathe {
    0%, 100% {
      opacity: .035;
      transform: scale(1);
    }

    50% {
      opacity: .06;
      transform: scale(1.02);
    }
  }

  .chat-empty-hint {
    color: var(--text-muted);
    opacity: .5;
    letter-spacing: .02em;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
  }

  .chat-timestamp-sep {
    text-align: center;
    color: var(--text-muted);
    opacity: .6;
    padding: 8px 0 4px;
    font-size: 10px;
  }

  .chat-row {
    gap: 10px;
    padding: 6px 20px;
    display: flex;
  }

  .chat-row-user .chat-row-content, .chat-row-assistant .chat-row-content {
    padding: 2px 0;
  }

  .chat-row-system .chat-row-content {
    color: var(--text-muted);
    border-left: 2px solid rgba(255, 255, 255, .08);
    padding: 3px 10px;
    font-size: 11px;
  }

  .chat-row-avatar {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .06);
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-top: 1px;
    font-size: 11px;
    display: flex;
  }

  .chat-row-user .chat-row-avatar, .chat-row-assistant .chat-row-avatar {
    color: var(--text-muted);
    background: rgba(255, 255, 255, .06);
  }

  .chat-row-continuation {
    padding-top: 0;
  }

  .chat-row-continuation .chat-row-avatar {
    visibility: hidden;
    height: 0;
    margin: 0;
  }

  .chat-row-continuation .chat-row-header {
    display: none;
  }

  .chat-row-body {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .chat-row-header {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .chat-row-label {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
  }

  .chat-row-time {
    color: var(--text-muted);
    opacity: .5;
    font-size: 10px;
  }

  .chat-copy-btn {
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    background: none;
    border: none;
    border-radius: 4px;
    margin-left: auto;
    padding: 2px 6px;
    font-size: 13px;
    transition: all .15s;
  }

  .chat-row:hover .chat-copy-btn {
    opacity: .4;
  }

  .chat-copy-btn:hover {
    background: rgba(255, 255, 255, .06);
    opacity: 1 !important;
  }

  .chat-copy-btn.copied {
    color: var(--color-success);
    opacity: 1 !important;
  }

  .chat-row-content {
    color: var(--text-secondary);
    word-break: break-word;
    font-size: 13px;
    line-height: 1.65;
  }

  .chat-row-content p {
    margin: 0 0 8px;
  }

  .chat-row-content p:last-child {
    margin-bottom: 0;
  }

  .chat-row-content strong {
    color: var(--text-primary);
    font-weight: 600;
  }

  .chat-row-content em {
    font-style: italic;
  }

  .chat-row-content a {
    color: var(--ide-accent);
    text-decoration: none;
  }

  .chat-row-content a:hover {
    text-decoration: underline;
  }

  .chat-row-content code {
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: rgba(255, 255, 255, .05);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
  }

  .chat-row-content pre {
    background: rgba(255, 255, 255, .024);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    margin: 8px 0;
    padding: 12px;
    overflow-x: auto;
  }

  .chat-row-content pre code {
    color: var(--text-secondary);
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
  }

  .chat-row-content ul, .chat-row-content ol {
    margin: 6px 0;
    padding-left: 20px;
  }

  .chat-row-content li {
    margin-bottom: 4px;
  }

  .chat-row-content blockquote {
    color: var(--text-muted);
    border-left: 3px solid rgba(255, 255, 255, .1);
    margin: 8px 0;
    padding: 4px 12px;
  }

  .chat-row-content table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
  }

  .chat-row-content th, .chat-row-content td {
    text-align: left;
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 6px 10px;
  }

  .chat-row-content th {
    background: rgba(255, 255, 255, .04);
    font-weight: 600;
  }

  .chat-row-content h1, .chat-row-content h2, .chat-row-content h3 {
    color: var(--text-primary);
    margin: 12px 0 6px;
    font-weight: 600;
  }

  .chat-row-content h1 {
    font-size: 16px;
  }

  .chat-row-content h2 {
    font-size: 14px;
  }

  .chat-row-content h3 {
    font-size: 13px;
  }

  .chat-tool-call {
    background: rgba(255, 255, 255, .024);
    border: 1px solid rgba(255, 255, 255, .08);
    border-left: 2px solid rgba(255, 255, 255, .15);
    border-radius: 6px;
    margin: 4px 20px 4px 54px;
    font-size: 12px;
    overflow: hidden;
  }

  .chat-tool-call.completed {
    border-color: rgba(255, 255, 255, .08) rgba(255, 255, 255, .08) rgba(255, 255, 255, .08) rgba(255, 255, 255, .12);
  }

  .chat-tool-call.error {
    border-color: rgba(239, 68, 68, .15) rgba(239, 68, 68, .15) rgba(239, 68, 68, .15) rgba(239, 68, 68, .4);
  }

  .chat-tool-summary {
    cursor: pointer;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .02);
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    list-style: none;
    transition: background .15s;
    display: flex;
  }

  .chat-tool-summary::-webkit-details-marker {
    display: none;
  }

  .chat-tool-summary:after {
    content: "▸";
    color: var(--text-muted);
    opacity: .5;
    margin-left: auto;
    font-size: 10px;
    transition: transform .15s;
  }

  .chat-tool-call[open] .chat-tool-summary:after {
    transform: rotate(90deg);
  }

  .chat-tool-summary:hover {
    background: rgba(255, 255, 255, .05);
  }

  .chat-tool-icon {
    text-align: center;
    flex-shrink: 0;
    width: 16px;
    font-size: 11px;
  }

  .chat-tool-call .chat-tool-icon {
    color: var(--text-secondary);
    opacity: .7;
  }

  .chat-tool-call:not(.completed):not(.error) .chat-tool-icon {
    animation: 1s linear infinite tool-spin;
  }

  .chat-tool-call.completed .chat-tool-icon {
    color: var(--text-secondary);
    opacity: .6;
    animation: none;
  }

  .chat-tool-call.error .chat-tool-icon {
    color: #ef4444;
    opacity: .9;
    animation: none;
  }

  @keyframes tool-spin {
    to {
      opacity: .3;
    }

    from {
      opacity: .8;
    }
  }

  .chat-tool-name {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
  }

  .chat-tool-args-preview {
    color: var(--text-muted);
    opacity: .6;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 11px;
    overflow: hidden;
  }

  .chat-tool-result-preview {
    color: var(--text-muted);
    opacity: .6;
    flex-shrink: 0;
    font-size: 11px;
  }

  .chat-tool-detail {
    border-top: 1px solid rgba(255, 255, 255, .04);
    padding: 8px 12px;
  }

  .chat-tool-section {
    margin-bottom: 8px;
  }

  .chat-tool-section:last-child {
    margin-bottom: 0;
  }

  .chat-tool-section-label {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    opacity: .6;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 500;
  }

  .chat-tool-pre {
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-all;
    background: rgba(0, 0, 0, .15);
    border-radius: 6px;
    max-height: 200px;
    margin: 0;
    padding: 8px;
    font-size: 11px;
    line-height: 1.4;
    overflow: auto;
  }

  .chat-question-options {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    display: flex;
  }

  .chat-question-option {
    color: var(--text-secondary);
    cursor: pointer;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    transition: all .15s;
  }

  .chat-question-option:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .15);
  }

  .chat-question-input {
    gap: 8px;
    margin-top: 10px;
    display: flex;
  }

  .chat-question-field {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    outline: none;
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    transition: border-color .15s;
  }

  .chat-question-field:focus {
    border-color: rgba(255, 255, 255, .2);
  }

  .chat-question-submit {
    color: var(--text-secondary);
    cursor: pointer;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    transition: all .15s;
  }

  .chat-question-submit:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .18);
  }

  .chat-panel-input {
    background: none;
    border-top: none;
    padding: 8px 12px 10px;
  }

  .chat-composer {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    align-items: flex-end;
    transition: border-color .15s;
    display: flex;
    position: relative;
  }

  .chat-composer:focus-within {
    border-color: rgba(255, 255, 255, .15);
  }

  .chat-input {
    min-height: 40px;
    max-height: none;
    color: var(--text-primary);
    resize: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
    background: none;
    border: none;
    border-radius: 10px;
    outline: none;
    flex: 1;
    padding: 10px 44px 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    transition: height .1s;
    overflow-y: auto;
  }

  .chat-input:focus {
    box-shadow: 0 0 20px -8px rgba(var(--circle-color-rgb), .15);
    outline: none;
  }

  .chat-input::placeholder {
    color: var(--text-muted);
    opacity: .4;
  }

  .chat-e2ee-indicator {
    cursor: pointer;
    opacity: .4;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 2px;
    transition: opacity .15s;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 36px;
  }

  .chat-e2ee-indicator:hover {
    opacity: .7;
  }

  .chat-send {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: none;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 0;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
  }

  .chat-send svg {
    width: 14px;
    height: 14px;
    display: block;
  }

  .chat-send:hover:not(:disabled) {
    color: var(--text-primary);
    background: rgba(75, 112, 245, .25);
    border-color: rgba(75, 112, 245, .5);
  }

  .chat-send:active:not(:disabled) {
    background: rgba(75, 112, 245, .32);
  }

  .chat-send:focus-visible {
    outline: 2px solid var(--ide-accent);
    outline-offset: 1px;
  }

  .chat-send:disabled {
    opacity: .4;
    cursor: not-allowed;
    color: var(--text-muted);
    box-shadow: none;
  }

  .chat-row-typing {
    animation: .2s chat-fade-in;
  }

  .chat-typing-inline {
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    display: flex;
  }

  .chat-typing-dots {
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 24px;
    height: 16px;
    display: flex;
  }

  .chat-typing-dots span {
    background: rgba(var(--circle-color-rgb), .7);
    border-radius: 50%;
    width: 5px;
    height: 5px;
    animation: 1s ease-in-out infinite chat-spinner-pulse;
    display: inline-block;
  }

  .chat-typing-dots span:nth-child(2) {
    animation-delay: .2s;
  }

  .chat-typing-dots span:nth-child(3) {
    animation-delay: .4s;
  }

  .chat-typing-text {
    color: var(--text-muted);
    opacity: .6;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
    font-size: 12px;
    overflow: hidden;
  }

  .chat-token-badge {
    color: var(--text-muted);
    opacity: .5;
    padding: 2px 12px 6px 42px;
    font-size: 11px;
    animation: .3s chat-fade-in;
  }

  @keyframes chat-spinner-pulse {
    0%, 100% {
      opacity: .3;
      transform: scale(.85);
    }

    50% {
      opacity: .7;
      transform: scale(1);
    }
  }

  @keyframes chat-fade-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .chat-thinking-block {
    background: rgba(255, 255, 255, .016);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 8px;
    margin: 4px 20px 4px 54px;
    font-size: 12px;
    overflow: hidden;
  }

  .chat-thinking-header {
    cursor: pointer;
    color: var(--text-muted);
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    list-style: none;
    transition: background .15s;
    display: flex;
  }

  .chat-thinking-header::-webkit-details-marker {
    display: none;
  }

  .chat-thinking-header:before {
    content: "▸";
    color: var(--text-muted);
    opacity: .5;
    font-size: 9px;
    transition: transform .15s;
  }

  .chat-thinking-block[open] .chat-thinking-header:before {
    transform: rotate(90deg);
  }

  .chat-thinking-header:hover {
    background: rgba(255, 255, 255, .024);
  }

  .chat-thinking-label {
    color: var(--text-muted);
    opacity: .7;
    font-size: 11px;
    font-weight: 500;
  }

  .chat-thinking-preview {
    color: var(--text-muted);
    opacity: .35;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 11px;
    overflow: hidden;
  }

  .chat-thinking-content {
    color: var(--text-muted);
    white-space: pre-wrap;
    opacity: .7;
    border-top: 1px solid rgba(255, 255, 255, .04);
    max-height: 300px;
    padding: 8px 12px 10px;
    font-size: 12px;
    line-height: 1.5;
    overflow-y: auto;
  }

  .chat-step {
    color: var(--text-muted);
    align-items: center;
    gap: 6px;
    margin: 2px 20px 2px 54px;
    padding: 3px 0;
    font-size: 12px;
    display: flex;
  }

  .chat-step.running .chat-step-icon {
    opacity: .6;
  }

  .chat-step.finished {
    opacity: .5;
  }

  .chat-step.finished .chat-step-icon {
    color: var(--text-muted);
  }

  .chat-step-icon {
    opacity: .5;
    flex-shrink: 0;
    font-size: 11px;
  }

  .chat-step-name {
    font-size: 12px;
  }

  .props-tab-content, .props-groups {
    flex-direction: column;
    gap: 0;
    display: flex;
  }

  .props-loading {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    display: flex;
  }

  .props-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .03) 25%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .03) 75%) 0 0 / 200% 100%;
    border-radius: 4px;
    animation: 1.5s ease-in-out infinite skeleton-pulse;
  }

  .props-skeleton-section {
    width: 100%;
    height: 32px;
  }

  .props-skeleton-row {
    width: 80%;
    height: 20px;
    margin-left: 12px;
  }

  @keyframes skeleton-pulse {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }

  .props-draft-notice {
    text-align: center;
    background: rgba(245, 158, 11, .1);
    border-bottom: 1px solid rgba(245, 158, 11, .2);
    padding: 16px 20px;
  }

  .props-error-banner {
    background: rgba(239, 68, 68, .1);
    border-bottom: 1px solid rgba(239, 68, 68, .2);
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 12px;
    display: flex;
  }

  .props-error-icon {
    font-size: 14px;
  }

  .props-error-text {
    color: #f87171;
  }

  .props-save-toast {
    color: #4ade80;
    background: rgba(34, 197, 94, .15);
    border-bottom: 1px solid rgba(34, 197, 94, .2);
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    font-size: 12px;
    animation: .3s props-toast-fade;
    display: flex;
  }

  @keyframes props-toast-fade {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .props-zk-locked {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    display: flex;
  }

  .props-zk-icon {
    color: #818cf8;
    background: rgba(99, 102, 241, .12);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
  }

  .props-zk-title {
    color: rgba(255, 255, 255, .9);
    margin: 0;
    font-size: 14px;
    font-weight: 600;
  }

  .props-zk-desc {
    max-width: 280px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
  }

  .props-zk-form {
    gap: 8px;
    width: 100%;
    max-width: 300px;
    margin-top: 4px;
    display: flex;
  }

  .props-zk-passphrase {
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    outline: none;
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    transition: border-color .15s;
  }

  .props-zk-passphrase:focus {
    border-color: rgba(99, 102, 241, .5);
  }

  .props-zk-passphrase::placeholder {
    color: rgba(255, 255, 255, .3);
  }

  .props-zk-error {
    color: #f87171;
    padding: 4px 8px;
    font-size: 12px;
  }

  .props-debug-toggle {
    border-top: 1px solid rgba(255, 255, 255, .04);
    padding: 8px 16px;
  }

  .props-debug-btn {
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 11px;
    transition: all .15s;
    display: inline-flex;
  }

  .props-debug-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
  }

  .props-row:not(.default) .props-row-value {
    color: var(--text-primary);
    font-weight: 500;
  }

  .props-row:not(.default) .props-key {
    color: var(--text-primary);
  }

  .props-section-left, .props-section-right {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .props-section-badge {
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
  }

  .props-section-badge.configured {
    color: #4ade80;
    background: rgba(34, 197, 94, .15);
  }

  .props-section-badge.default {
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
  }

  .props-row {
    border-bottom: 1px solid rgba(255, 255, 255, .03);
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    display: flex;
  }

  .props-row:last-child {
    border-bottom: none;
  }

  .props-row.default .props-row-value {
    color: var(--text-muted);
  }

  .props-row-label {
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    min-width: 120px;
    max-width: 40%;
    display: flex;
  }

  .props-key {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
  }

  .props-required-marker {
    color: #ef4444;
    font-weight: 600;
  }

  .props-key-hint {
    color: var(--text-muted);
    cursor: help;
    opacity: .7;
    font-size: 10px;
  }

  .props-row-value {
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
    flex: 1;
    font-size: 13px;
  }

  .props-row-value.muted {
    color: var(--text-muted);
    font-style: italic;
  }

  .inline-editable {
    align-items: center;
    min-height: 24px;
    display: inline-flex;
  }

  .inline-editable.disabled {
    opacity: .6;
    cursor: not-allowed;
  }

  .inline-value {
    cursor: text;
    border-radius: 4px;
    padding: 2px 6px;
    transition: all .15s;
  }

  .inline-value.clickable:hover {
    background: rgba(255, 255, 255, .08);
  }

  .inline-value.empty {
    color: var(--text-muted);
    font-style: italic;
  }

  .inline-edit-wrapper {
    flex-direction: column;
    gap: 4px;
    width: 100%;
    display: flex;
  }

  .inline-input, .inline-textarea, .inline-select {
    border: 1px solid var(--ide-accent);
    color: var(--text-primary);
    background: rgba(0, 0, 0, .3);
    border-radius: 4px;
    outline: none;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
  }

  .inline-input:focus, .inline-textarea:focus, .inline-select:focus {
    border-color: var(--ide-accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .2);
  }

  .inline-input-number {
    text-align: right;
    width: 100px;
  }

  .inline-textarea {
    resize: vertical;
    min-height: 60px;
  }

  .inline-json-editor {
    font-family: var(--font-mono);
    min-height: 80px;
    font-size: 11px;
  }

  .inline-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    padding-right: 28px;
  }

  .inline-toggle {
    cursor: pointer;
    align-items: center;
    gap: 8px;
    display: inline-flex;
  }

  .inline-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  .inline-toggle-slider {
    background: rgba(255, 255, 255, .1);
    border-radius: 10px;
    width: 36px;
    height: 20px;
    transition: background .15s;
    position: relative;
  }

  .inline-toggle-slider:before {
    content: "";
    background: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: transform .15s;
    position: absolute;
    top: 2px;
    left: 2px;
  }

  .inline-toggle input:checked + .inline-toggle-slider {
    background: var(--color-green);
  }

  .inline-toggle input:checked + .inline-toggle-slider:before {
    transform: translateX(16px);
  }

  .inline-toggle-label {
    color: var(--text-secondary);
    font-size: 12px;
  }

  .inline-edit-error {
    color: #f87171;
    background: rgba(239, 68, 68, .1);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .searchable-select-trigger {
    border-radius: var(--border-radius);
    width: 100%;
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-mono);
    cursor: pointer;
    text-align: left;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(0, 0, 0, 0);
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    transition: all .15s;
    display: flex;
  }

  .searchable-select-trigger:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, .05);
  }

  .searchable-select-trigger:disabled {
    opacity: .5;
    pointer-events: none;
  }

  .searchable-select-provider {
    color: var(--ide-accent);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    background: rgba(99, 102, 241, .12);
    border-radius: 3px;
    flex-shrink: 0;
    align-items: center;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
  }

  .searchable-select-value {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    overflow: hidden;
  }

  .searchable-select-chevron {
    color: var(--text-muted);
    opacity: .5;
    flex-shrink: 0;
    align-items: center;
    transition: opacity .15s;
    display: flex;
  }

  .searchable-select-trigger:hover .searchable-select-chevron {
    opacity: 1;
  }

  .select-panel {
    text-align: left;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .select-panel-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .02);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .select-panel-title {
    color: var(--text-primary);
    letter-spacing: .01em;
    font-size: 13px;
    font-weight: 600;
  }

  .select-panel-close {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--border-radius);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    transition: all .15s;
    display: flex;
  }

  .select-panel-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .select-panel-search {
    padding: 10px var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .select-panel-search-icon {
    color: var(--text-muted);
    opacity: .6;
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .select-panel-search-input {
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-sans);
    text-align: left;
    background: none;
    border: none;
    outline: none;
    flex: 1;
    padding: 4px 0;
  }

  .select-panel-search-input::placeholder {
    color: var(--text-muted);
    opacity: .6;
  }

  .select-panel-search-clear {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    border-radius: var(--border-radius);
    cursor: pointer;
    background: rgba(255, 255, 255, .06);
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: all .15s;
    display: flex;
  }

  .select-panel-search-clear:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .12);
  }

  .select-panel-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .select-panel-list {
    padding: var(--spacing-xs) 0;
  }

  .select-panel-group-header {
    width: 100%;
    padding: 8px var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    background: var(--color-main-900);
    cursor: pointer;
    z-index: 1;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    transition: background .12s;
    display: flex;
    position: sticky;
    top: 0;
  }

  .select-panel-group-header:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .03);
  }

  .select-panel-group-chevron {
    opacity: .5;
    align-items: center;
    transition: transform .15s;
    display: flex;
  }

  .select-panel-group-chevron.expanded {
    transform: rotate(90deg);
  }

  .select-panel-group-count {
    color: var(--text-muted);
    opacity: .5;
    margin-left: auto;
    font-size: 9px;
    font-weight: 500;
  }

  .select-panel-item {
    margin: 0 var(--spacing-xs);
    padding: 6px var(--spacing-sm);
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0);
    justify-content: space-between;
    align-items: center;
    transition: all .1s;
    display: flex;
  }

  .select-panel-item:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, .04);
  }

  .select-panel-item.highlighted {
    border-color: var(--border-color);
    outline: 2px solid var(--color-main-500);
    outline-offset: -2px;
    background: rgba(255, 255, 255, .05);
  }

  .select-panel-item.selected {
    background: rgba(99, 102, 241, .08);
    border-color: rgba(99, 102, 241, .2);
  }

  .select-panel-item.selected .select-panel-item-label {
    color: var(--ide-accent);
  }

  .select-panel-item-content {
    flex-direction: column;
    flex: 1;
    gap: 1px;
    min-width: 0;
    display: flex;
  }

  .select-panel-item-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden;
  }

  .select-panel-item-desc {
    color: var(--text-muted);
    opacity: .7;
    font-size: 11px;
  }

  .select-panel-check {
    color: var(--ide-accent);
    flex-shrink: 0;
    align-items: center;
    margin-left: 8px;
    display: flex;
  }

  .select-panel-footer {
    padding: 8px var(--spacing-md);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    text-align: right;
    opacity: .7;
    flex-shrink: 0;
    font-size: 11px;
  }

  .select-panel-loading {
    padding: 40px var(--spacing-md);
    color: var(--text-muted);
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    display: flex;
  }

  .select-panel-spinner {
    border: 2px solid rgba(255, 255, 255, .08);
    border-top-color: var(--ide-accent);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: .7s linear infinite select-spin;
  }

  @keyframes select-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .select-panel-empty {
    padding: 40px var(--spacing-md);
    color: var(--text-muted);
    justify-content: center;
    align-items: center;
    font-size: 12px;
    display: flex;
  }

  .props-muted {
    color: var(--color-moon-500, rgba(161, 161, 170, .7));
    font-size: 12px;
    line-height: 1.5;
  }

  .props-placeholder-notice {
    text-align: center;
    border: 1px dashed rgba(161, 161, 170, .2);
    border-radius: 8px;
    padding: 16px;
  }

  .props-placeholder-notice .props-muted {
    margin: 0;
  }

  .props-readme-content {
    flex-direction: column;
    height: 100%;
    display: flex;
  }

  .props-readme-editor-container {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
  }

  .props-readme-toolbar {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    display: flex;
  }

  .props-readme-toolbar-actions {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .props-readme-status {
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
  }

  .props-readme-status.saving, .props-readme-status.unsaved {
    color: var(--color-amber, #f59e0b);
    background: rgba(245, 158, 11, .1);
  }

  .props-readme-status.saved {
    color: var(--color-green, #22c55e);
    background: rgba(34, 197, 94, .1);
  }

  .props-readme-save-btn {
    color: #60a5fa;
    cursor: pointer;
    background: rgba(59, 130, 246, .15);
    border: 1px solid rgba(59, 130, 246, .3);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 500;
    transition: all .12s;
  }

  .props-readme-save-btn:hover:not(:disabled) {
    background: rgba(59, 130, 246, .25);
  }

  .props-readme-save-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
  }

  .props-readme-editor {
    min-height: 120px;
    color: var(--text-primary, #e4e4e7);
    resize: vertical;
    background: rgba(24, 24, 27, .6);
    border: none;
    border-radius: 0;
    outline: none;
    flex: 1;
    padding: 12px;
    font-family: JetBrains Mono, Fira Code, SF Mono, monospace;
    font-size: 12px;
    line-height: 1.6;
  }

  .props-readme-editor:focus {
    background: rgba(24, 24, 27, .8);
  }

  .props-readme-editor::placeholder {
    color: rgba(161, 161, 170, .4);
  }

  .props-readme-hint {
    border-top: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
    padding: 6px 12px;
  }

  .label-selector {
    flex-direction: column;
    gap: 6px;
    width: 100%;
    display: flex;
  }

  .label-chips {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    display: flex;
  }

  .label-empty {
    color: var(--color-moon-500);
    font-size: 11px;
    font-style: italic;
  }

  .label-chip {
    color: var(--color-moon-200);
    background: rgba(59, 130, 246, .12);
    border: 1px solid rgba(59, 130, 246, .2);
    border-radius: 12px;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    display: inline-flex;
  }

  .label-chip-key {
    color: #60a5fa;
    font-weight: 500;
  }

  .label-chip-sep {
    color: var(--color-moon-500);
  }

  .label-chip-value {
    color: var(--color-moon-300);
  }

  .label-chip-remove {
    width: 14px;
    height: 14px;
    color: var(--color-moon-400);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
    padding: 0;
    font-size: 12px;
    transition: all .12s;
    display: inline-flex;
  }

  .label-chip-remove:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .2);
  }

  .label-add-btn {
    color: var(--color-moon-400);
    cursor: pointer;
    background: none;
    border: 1px dashed rgba(255, 255, 255, .1);
    border-radius: 12px;
    align-self: flex-start;
    padding: 2px 10px;
    font-size: 11px;
    transition: all .12s;
  }

  .label-add-btn:hover {
    color: var(--color-moon-200);
    border-color: rgba(255, 255, 255, .2);
  }

  .label-add-form {
    align-items: center;
    gap: 4px;
    display: flex;
  }

  .label-add-input {
    width: 80px;
    color: var(--text-primary, #e4e4e7);
    background: rgba(24, 24, 27, .6);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    outline: none;
    padding: 3px 8px;
    font-size: 11px;
  }

  .label-add-input:focus {
    border-color: rgba(59, 130, 246, .4);
  }

  .label-add-sep {
    color: var(--color-moon-500);
    font-size: 11px;
  }

  .label-add-confirm, .label-add-cancel {
    width: 22px;
    height: 22px;
    color: var(--color-moon-400);
    cursor: pointer;
    background: none;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 12px;
    transition: all .12s;
    display: inline-flex;
  }

  .label-add-confirm:hover:not(:disabled) {
    color: #4ade80;
    background: rgba(34, 197, 94, .15);
    border-color: rgba(34, 197, 94, .3);
  }

  .label-add-confirm:disabled {
    opacity: .3;
    cursor: not-allowed;
  }

  .label-add-cancel:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .15);
    border-color: rgba(239, 68, 68, .3);
  }

  .icon-picker-backdrop {
    z-index: 90;
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, .5);
    position: fixed;
    inset: 0;
  }

  .icon-picker-panel {
    z-index: 91;
    background: var(--color-main-900);
    border: 1px solid var(--color-main-700);
    border-radius: 12px;
    flex-direction: column;
    width: 480px;
    max-width: calc(100vw - 48px);
    max-height: 80vh;
    animation: .2s ease-out fade-in;
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
  }

  .icon-picker-header {
    border-bottom: 1px solid var(--color-main-800);
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    display: flex;
  }

  .icon-picker-title {
    color: var(--color-moon-100);
    margin: 0;
    font-size: 14px;
    font-weight: 600;
  }

  .icon-picker-close {
    width: 28px;
    height: 28px;
    color: var(--color-moon-400);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: all .12s;
    display: flex;
  }

  .icon-picker-close:hover {
    background: var(--color-main-800);
    color: var(--color-moon-200);
  }

  .icon-picker-search {
    border-bottom: 1px solid var(--color-main-800);
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    display: flex;
  }

  .icon-picker-search-icon {
    color: var(--color-moon-500);
    flex-shrink: 0;
    font-size: 18px !important;
  }

  .icon-picker-search-input {
    color: var(--color-moon-100);
    background: none;
    border: none;
    outline: none;
    flex: 1;
    padding: 6px 0;
    font-size: 13px;
  }

  .icon-picker-search-input::placeholder {
    color: var(--color-moon-600);
  }

  .icon-picker-search-clear {
    width: 20px;
    height: 20px;
    color: var(--color-moon-500);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .icon-picker-search-clear:hover {
    background: var(--color-main-800);
    color: var(--color-moon-300);
  }

  .icon-picker-categories {
    border-bottom: 1px solid var(--color-main-800);
    scrollbar-width: none;
    gap: 4px;
    padding: 8px 16px;
    display: flex;
    overflow-x: auto;
  }

  .icon-picker-categories::-webkit-scrollbar {
    display: none;
  }

  .icon-picker-cat-chip {
    color: var(--color-moon-400);
    cursor: pointer;
    white-space: nowrap;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 12px;
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    transition: all .12s;
  }

  .icon-picker-cat-chip:hover {
    color: var(--color-moon-200);
    background: var(--color-main-800);
  }

  .icon-picker-cat-chip.active {
    color: var(--color-moon-100);
    background: rgba(99, 102, 241, .15);
    border-color: rgba(99, 102, 241, .3);
  }

  .icon-picker-grid-container {
    scrollbar-width: thin;
    scrollbar-color: var(--color-main-700) transparent;
    flex: 1;
    min-height: 0;
    max-height: 340px;
    padding: 12px 16px;
    overflow-y: auto;
  }

  .icon-picker-group {
    margin-bottom: 16px;
  }

  .icon-picker-group:last-child {
    margin-bottom: 0;
  }

  .icon-picker-group-label {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-moon-500);
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
  }

  .icon-picker-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    display: grid;
  }

  .icon-picker-icon {
    aspect-ratio: 1;
    cursor: pointer;
    background: none;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    transition: all .12s;
    display: flex;
  }

  .icon-picker-icon:hover {
    background: var(--color-main-800);
    border-color: var(--color-main-700);
  }

  .icon-picker-icon.selected {
    background: rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .5);
  }

  .icon-picker-empty {
    color: var(--color-moon-500);
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 0;
    font-size: 13px;
    display: flex;
  }

  .icon-picker-color-section {
    border-top: 1px solid var(--color-main-800);
    padding: 10px 16px;
  }

  .icon-picker-color-label {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-moon-500);
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
  }

  .icon-picker-color-grid {
    flex-wrap: wrap;
    gap: 6px;
    display: flex;
  }

  .icon-picker-color {
    cursor: pointer;
    background-color: var(--swatch-color);
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    transition: all .12s;
  }

  .icon-picker-color:hover {
    border-color: rgba(255, 255, 255, .3);
    transform: scale(1.15);
  }

  .icon-picker-color.selected {
    box-shadow: 0 0 0 2px var(--swatch-color);
    border-color: #fff;
  }

  .icon-picker-footer {
    border-top: 1px solid var(--color-main-800);
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    display: flex;
  }

  .icon-picker-preview {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .icon-picker-preview-empty {
    color: var(--color-moon-500);
    font-size: 12px;
    font-style: italic;
  }

  .icon-picker-preview-name {
    color: var(--color-moon-300);
    text-transform: capitalize;
    font-size: 12px;
  }

  .icon-picker-actions {
    gap: 8px;
    display: flex;
  }

  .icon-picker-actions .btn-sm {
    padding: 6px 14px;
    font-size: 12px;
  }

  .dev-live-panel {
    background: var(--bg-card);
    height: 100%;
    font-family: var(--font-sans);
    flex-direction: column;
    display: flex;
  }

  .dev-panel-header {
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, .3);
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    display: flex;
  }

  .dev-panel-title {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .dev-panel-title h3 {
    color: var(--text-primary);
    margin: 0;
    font-size: 14px;
    font-weight: 600;
  }

  .dev-panel-title .icon {
    color: var(--text-muted);
  }

  .dev-panel-controls {
    gap: 4px;
    display: flex;
  }

  .dev-panel-controls .btn-icon {
    border-radius: var(--border-radius);
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: all .15s;
    display: flex;
  }

  .dev-panel-controls .btn-icon:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .08);
  }

  .dev-panel-filters {
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, .15);
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    display: flex;
  }

  .filter-tabs {
    flex-wrap: wrap;
    gap: 4px;
    display: flex;
  }

  .filter-tab {
    color: var(--text-muted);
    cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 14px;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    transition: all .15s;
    display: flex;
  }

  .filter-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .08);
  }

  .filter-tab.active {
    color: var(--color-blue);
    background: rgba(99, 102, 241, .15);
    border-color: rgba(99, 102, 241, .5);
  }

  .filter-tab .icon {
    font-size: 12px;
  }

  .filter-tab .label {
    font-size: 11px;
  }

  .search-box {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, .05);
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    transition: border-color .15s;
    display: flex;
  }

  .search-box:focus-within {
    border-color: var(--color-primary);
  }

  .search-box .icon {
    color: var(--text-muted);
    font-size: 14px;
  }

  .search-box input {
    color: var(--text-primary);
    background: none;
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
  }

  .search-box input::placeholder {
    color: var(--text-muted);
  }

  .dev-panel-events {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    flex: 1;
    overflow-y: auto;
  }

  .dev-panel-events:hover {
    scrollbar-color: rgba(255, 255, 255, .08) transparent;
  }

  .dev-panel-events::-webkit-scrollbar {
    width: 5px;
  }

  .dev-panel-events::-webkit-scrollbar-track {
    background: none;
  }

  .dev-panel-events::-webkit-scrollbar-thumb {
    background: none;
    border-radius: 3px;
    transition: background .15s;
  }

  .dev-panel-events:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .08);
  }

  .paused-banner {
    color: var(--color-amber);
    background: rgba(251, 191, 36, .15);
    border-bottom: 1px solid rgba(251, 191, 36, .3);
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    display: flex;
  }

  .loading-indicator {
    color: var(--text-muted);
    justify-content: center;
    align-items: center;
    padding: 24px;
    font-size: 13px;
    display: flex;
  }

  .error-message {
    color: var(--color-error);
    justify-content: center;
    align-items: center;
    padding: 16px;
    font-size: 13px;
    display: flex;
  }

  .dev-panel-events .empty-state {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 24px;
    display: flex;
  }

  .dev-panel-events .empty-state .icon {
    color: var(--text-muted);
    opacity: .3;
    margin-bottom: 12px;
    font-size: 32px;
  }

  .dev-panel-events .empty-state span {
    color: var(--text-muted);
    font-size: 13px;
  }

  .dev-panel-events .empty-state .hint {
    color: var(--text-muted);
    opacity: .7;
    margin-top: 4px;
    font-size: 12px;
  }

  .event-list {
    flex-direction: column;
    display: flex;
  }

  .event-row {
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    gap: 12px;
    padding: 10px 16px;
    transition: background-color .15s;
    display: flex;
  }

  .event-row:hover {
    background: rgba(255, 255, 255, .03);
  }

  .event-icon {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    display: flex;
  }

  .event-icon.status-running {
    color: var(--color-blue);
    background: rgba(99, 102, 241, .15);
  }

  .event-icon.status-success {
    color: var(--color-success);
    background: rgba(16, 185, 129, .15);
  }

  .event-icon.status-error {
    color: var(--color-error);
    background: rgba(239, 68, 68, .15);
  }

  .event-icon.status-info {
    color: var(--text-muted);
    background: rgba(255, 255, 255, .05);
  }

  .event-content {
    flex: 1;
    min-width: 0;
  }

  .event-summary {
    color: var(--text-primary);
    word-break: break-word;
    font-size: 13px;
    line-height: 1.4;
  }

  .event-meta {
    color: var(--text-muted);
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    display: flex;
  }

  .event-meta .dot {
    opacity: .5;
  }

  .event-meta .category {
    color: var(--color-blue);
  }

  .event-meta .duration, .event-meta .actor {
    color: var(--text-secondary);
  }

  .dev-panel-presence {
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, .2);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    display: flex;
  }

  .dev-panel-presence.hidden {
    display: none;
  }

  .watching-label {
    color: var(--text-muted);
    font-size: 11px;
  }

  .watchers {
    gap: 4px;
    display: flex;
  }

  .watcher {
    border: 2px solid var(--bg-card);
    cursor: pointer;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    transition: all .15s;
    display: flex;
    position: relative;
    overflow: visible;
  }

  .watcher:hover {
    border-color: rgba(255, 255, 255, .3);
    transform: scale(1.1);
  }

  .watcher.followed {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .3);
  }

  .watcher.is-ai .avatar-placeholder {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .25);
  }

  .watcher.is-ai {
    border-color: rgba(139, 92, 246, .4);
  }

  .watcher img {
    object-fit: cover;
    border-radius: 50%;
    width: 100%;
    height: 100%;
  }

  .watcher .avatar-placeholder {
    width: 100%;
    height: 100%;
    color: var(--text-primary);
    text-transform: uppercase;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    display: flex;
  }

  .watcher .status-dot {
    border: 1.5px solid var(--bg-card);
    z-index: 1;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: -1px;
    right: -1px;
  }

  .status-dot.status-watching {
    background: #10b981;
  }

  .status-dot.status-generating {
    background: #f59e0b;
    animation: 1.5s ease-in-out infinite pulse;
  }

  .status-dot.status-tool_call {
    background: #6366f1;
  }

  .follow-indicator {
    width: 100%;
    color: var(--color-blue);
    background: rgba(99, 102, 241, .12);
    border-radius: 6px;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 11px;
    display: flex;
  }

  .follow-indicator strong {
    color: var(--text-primary);
  }

  .follow-indicator .btn-unfollow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    padding: 0;
    font-size: 10px;
    display: flex;
  }

  .follow-indicator .btn-unfollow:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .browser-panel {
    background: var(--ide-bg);
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .browser-tab-bar {
    background: var(--ide-sidebar-bg);
    align-items: flex-end;
    height: 36px;
    padding: 0 8px;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .browser-tab-bar {
      background: color-mix(in srgb, var(--ide-sidebar-bg) 80%, black 20%);
    }
  }

  .browser-tab-bar {
    flex-shrink: 0;
    box-shadow: inset 0 -1px rgba(0, 0, 0, .3);
  }

  .browser-tab {
    height: 30px;
    color: var(--ide-text-muted);
    cursor: default;
    background: none;
    border-radius: 8px 8px 0 0;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    max-width: 220px;
    padding: 0 12px;
    font-size: 12px;
    transition: background .12s, color .12s;
    animation: .15s fadeIn;
    display: flex;
    overflow: hidden;
  }

  .browser-tab:hover:not(.browser-tab-active) {
    background: rgba(255, 255, 255, .04);
  }

  .browser-tab-active {
    background: var(--ide-sidebar-bg);
    color: var(--ide-text);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  }

  .browser-tab-favicon {
    width: 16px;
    height: 16px;
    color: var(--ide-text-muted);
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    display: flex;
  }

  .browser-tab-favicon svg {
    width: 14px;
    height: 14px;
  }

  .browser-tab-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-size: 11px;
    overflow: hidden;
  }

  .browser-tab-close {
    width: 16px;
    height: 16px;
    color: var(--ide-text-muted);
    cursor: pointer;
    opacity: 0;
    background: none;
    border: none;
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    transition: opacity .1s, background .1s;
    display: flex;
  }

  .browser-tab:hover .browser-tab-close {
    opacity: 1;
  }

  .browser-tab-close:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .2);
  }

  .browser-tab-new {
    width: 28px;
    height: 28px;
    color: var(--ide-text-muted);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-self: center;
    align-items: center;
    font-size: 18px;
    transition: background .1s;
    display: flex;
  }

  .browser-tab-new:hover {
    background: var(--ide-hover-bg);
    color: var(--ide-text);
  }

  .browser-active-content {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .browser-empty-state {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(75, 112, 245, .03) 0%, transparent 70%), var(--ide-bg);
    flex-direction: column;
    align-items: center;
    max-height: calc(100dvh - 12rem);
    display: flex;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .browser-empty-watermark {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    color: var(--ide-text-muted);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0 0 96px;
  }

  .browser-empty-watermark svg {
    opacity: .03;
    width: 200px;
    height: 200px;
  }

  .browser-empty-content {
    z-index: 1;
    text-align: center;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-top: 4rem;
    animation: .5s deploy-fade-in;
    display: flex;
    position: relative;
  }

  .browser-empty-title {
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -.01em;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .browser-empty-subtitle {
    color: var(--ide-text-muted);
    margin: 0;
    font-size: 12px;
  }

  .browser-empty-footer {
    z-index: 1;
    flex-shrink: 0;
    padding-bottom: 48px;
    position: relative;
  }

  .browser-empty-btn {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, .05);
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 500;
  }

  .browser-empty-btn:hover {
    border-color: var(--border-color-hover);
    color: var(--text-primary);
    background: rgba(255, 255, 255, .1);
  }

  .browser-empty-btn:active {
    transform: scale(.97);
  }

  .browser-chrome {
    background: var(--ide-sidebar-bg);
    border-bottom: 1px solid var(--ide-border);
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    display: flex;
  }

  .browser-nav-buttons {
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    display: flex;
  }

  .browser-nav-btn {
    width: 28px;
    height: 28px;
    color: var(--ide-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    background: none;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .browser-nav-btn:hover:not(:disabled) {
    background: var(--ide-active-bg);
    color: var(--ide-text);
  }

  .browser-nav-btn:active:not(:disabled) {
    transform: scale(.92);
  }

  .browser-nav-btn:disabled {
    opacity: .3;
    cursor: default;
  }

  .browser-nav-btn svg {
    width: 16px;
    height: 16px;
  }

  .browser-nav-btn-spinning svg {
    animation: 1s linear infinite browser-spin;
  }

  @keyframes browser-spin {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .browser-address-bar {
    background: var(--ide-active-bg);
    height: 32px;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 16px;
    flex: 1;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    display: flex;
  }

  .browser-address-bar:focus-within {
    background: var(--ide-bg);
    border-color: var(--ide-accent);
    box-shadow: 0 0 0 3px rgba(75, 112, 245, .15);
  }

  .browser-address-icon {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .browser-lock-icon {
    color: #4ade80;
    align-items: center;
    display: flex;
  }

  .browser-info-icon, .browser-search-icon {
    color: var(--ide-text-muted);
    align-items: center;
    display: flex;
  }

  .browser-address-input {
    color: var(--ide-text);
    font-family: var(--font-mono);
    background: none;
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    padding: 0;
    font-size: 12px;
  }

  .browser-address-input::placeholder {
    color: var(--ide-text-muted);
  }

  .browser-progress-bar {
    background: none;
    flex-shrink: 0;
    height: 3px;
    overflow: hidden;
  }

  .browser-progress-bar-active {
    background: var(--ide-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .browser-progress-bar-active {
      background: color-mix(in srgb, var(--ide-accent) 20%, transparent);
    }
  }

  .browser-progress-bar-fill {
    background: var(--ide-accent);
    border-radius: 0 1px 1px 0;
    width: 0%;
    height: 100%;
  }

  .browser-progress-bar-active .browser-progress-bar-fill {
    animation: browser-progress 2s var(--easing-out) infinite;
  }

  @keyframes browser-progress {
    0% {
      width: 0%;
      margin-left: 0%;
    }

    50% {
      width: 40%;
      margin-left: 30%;
    }

    100% {
      width: 0%;
      margin-left: 100%;
    }
  }

  .browser-viewport {
    background: #fafafa;
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  .browser-iframe {
    background: #fafafa;
    border: none;
    border-radius: 0 0 4px 4px;
    width: 100%;
    height: 100%;
    display: block;
  }

  .browser-loading-state, .browser-loading-page {
    background: var(--ide-bg);
    width: 100%;
    height: 100%;
    color: var(--ide-text-muted);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    display: flex;
  }

  .browser-loading-spinner {
    border: 3px solid var(--ide-border);
    border-top-color: var(--ide-accent);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: .8s linear infinite browser-spin;
  }

  .browser-loading-phase {
    font-family: var(--font-mono);
    color: var(--ide-text-muted);
    margin: 0;
    font-size: 12px;
    animation: .4s deploy-phase-in;
  }

  .browser-status-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    display: inline-block;
  }

  .browser-status-dot.connected {
    background: #34d399;
  }

  .browser-status-dot.connecting {
    background: #fbbf24;
    animation: 1.2s ease-in-out infinite pulse-dot;
  }

  .browser-status-dot.disconnected {
    background: #ef4444;
  }

  .browser-viewport-ready .browser-iframe {
    animation: .3s deploy-fade-in;
  }

  .browser-error-page {
    text-align: center;
    background: var(--ide-bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 60px 40px;
    display: flex;
  }

  .browser-error-page-icon {
    color: var(--ide-text-muted);
    opacity: .4;
    margin-bottom: 16px;
  }

  .browser-error-page-icon svg {
    width: 64px;
    height: 64px;
  }

  .browser-error-page-title {
    color: var(--ide-text);
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
  }

  .browser-error-page-msg {
    color: var(--ide-text-muted);
    word-break: break-word;
    max-width: 400px;
    margin: 0 0 16px;
    font-size: 13px;
  }

  .browser-error-page-code {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--ide-text-muted);
    opacity: .6;
    margin: 0;
  }

  .browser-error-bar {
    color: #fca5a5;
    background: rgba(239, 68, 68, .1);
    border-left: 3px solid #ef4444;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    animation: .2s browser-slide-down;
    display: flex;
  }

  .browser-error-icon {
    color: #f87171;
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .browser-error-icon svg {
    width: 14px;
    height: 14px;
  }

  .browser-error-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    overflow: hidden;
  }

  .browser-error-dismiss {
    color: #fca5a5;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 14px;
    transition: background .1s;
    display: flex;
  }

  .browser-error-dismiss:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .2);
  }

  @keyframes browser-slide-down {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .browser-new-tab {
    background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(75, 112, 245, .02) 0%, transparent 70%), var(--ide-bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    height: 100%;
    padding: 40px;
    animation: .3s fadeIn;
    display: flex;
  }

  .browser-new-tab-logo {
    color: var(--ide-text-muted);
    opacity: .08;
  }

  .browser-new-tab-logo svg {
    width: 80px;
    height: 80px;
  }

  .browser-new-tab-shortcuts {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 480px;
    display: grid;
  }

  .browser-shortcut {
    background: var(--ide-active-bg);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform .15s var(--easing-out), box-shadow .15s var(--easing-out);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    padding: 16px 12px;
    display: flex;
  }

  .browser-shortcut:hover {
    background: var(--ide-sidebar-bg);
    border-color: var(--ide-border);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  }

  .browser-shortcut:active {
    box-shadow: none;
    transform: scale(.97);
  }

  .browser-shortcut-icon {
    background: var(--ide-accent);
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .browser-shortcut-icon {
      background: color-mix(in srgb, var(--ide-accent) 15%, transparent);
    }
  }

  .browser-shortcut-icon {
    color: var(--ide-accent);
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    display: flex;
  }

  .browser-shortcut-label {
    color: var(--ide-text-muted);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 11px;
    overflow: hidden;
  }

  .props-iframe-browser-btn {
    border: 1px solid var(--ide-border);
    color: var(--ide-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .props-iframe-browser-btn:hover {
    border-color: var(--ide-accent);
    color: var(--ide-text);
  }

  .agent-highlighted {
    filter: drop-shadow(0 0 6px var(--color-agent-highlight, #f97316));
  }

  @keyframes agent-glow-pulse {
    0%, 100% {
      opacity: .3;
    }

    50% {
      opacity: .8;
    }
  }

  .agent-highlight-glow {
    pointer-events: none;
    animation: 1.5s ease-in-out infinite agent-glow-pulse;
  }

  .agent-annotation {
    pointer-events: none;
    animation: .3s ease-out agent-annotation-fade-in;
  }

  @keyframes agent-annotation-fade-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .chat-proposal-card {
    background: var(--bg-surface, #2a2a2a);
    border: 1px solid var(--border-subtle, #333);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    margin-top: 4px;
    padding: 12px;
  }

  .chat-proposal-header {
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    display: flex;
  }

  .chat-proposal-badge {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
  }

  .chat-proposal-title {
    color: var(--text-secondary, #999);
    font-size: 12px;
  }

  .chat-proposal-description {
    color: var(--text-primary, #e0e0e0);
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
  }

  .chat-proposal-details {
    margin-bottom: 8px;
  }

  .chat-proposal-details summary {
    color: var(--text-muted, #666);
    cursor: pointer;
    font-size: 11px;
  }

  .chat-proposal-actions {
    gap: 8px;
    display: flex;
  }

  .chat-proposal-approve, .chat-proposal-reject {
    border: 1px solid var(--border-subtle, #333);
    cursor: pointer;
    border-radius: 6px;
    flex: 1;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    transition: all .15s;
  }

  .chat-proposal-approve {
    color: #10b981;
    background: rgba(16, 185, 129, .1);
    border-color: rgba(16, 185, 129, .3);
  }

  .chat-proposal-approve:hover {
    background: rgba(16, 185, 129, .2);
    border-color: #10b981;
  }

  .chat-proposal-reject {
    color: #ef4444;
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .3);
  }

  .chat-proposal-reject:hover {
    background: rgba(239, 68, 68, .2);
    border-color: #ef4444;
  }

  .agent-toast-container {
    z-index: 9999;
    pointer-events: none;
    flex-direction: column-reverse;
    gap: 6px;
    display: flex;
    position: fixed;
    bottom: 56px;
    right: 16px;
  }

  .agent-toast {
    background: var(--bg-surface, #2a2a2a);
    border: 1px solid var(--border-subtle, #333);
    color: var(--text-secondary, #999);
    pointer-events: auto;
    border-radius: 8px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    animation: .25s ease-out agent-toast-in;
    display: flex;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  }

  .agent-toast-icon {
    color: var(--color-agent-highlight, #f97316);
    font-size: 14px;
  }

  @keyframes agent-toast-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .stats-time-selector {
    gap: 4px;
    display: flex;
  }

  .stats-period-btn {
    color: var(--color-moon-400);
    cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 100px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 11px;
    transition: all .15s;
  }

  .stats-period-btn:hover {
    color: var(--color-moon-200);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .15);
  }

  .stats-period-btn.active {
    color: var(--color-moon-50);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .2);
  }

  .stats-element-list {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .stats-row {
    cursor: pointer;
    border-radius: 6px;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    transition: background .15s;
    display: flex;
  }

  .stats-row:hover {
    background: rgba(255, 255, 255, .04);
  }

  .stats-row-name {
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    min-width: 160px;
    display: flex;
  }

  .stats-row-type {
    color: var(--color-moon-500);
    text-align: center;
    flex-shrink: 0;
    width: 16px;
    font-size: 11px;
  }

  .stats-row-slug {
    color: var(--color-moon-200);
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 140px;
    font-weight: 500;
    overflow: hidden;
  }

  .stats-row-metrics {
    flex: 1;
    align-items: center;
    gap: 16px;
    display: flex;
  }

  .stats-row-metric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    color: var(--color-moon-400);
  }

  .stats-row-errors {
    color: var(--color-error, #fb2c38);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-row-errors {
      color: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .stats-eval-pass {
    color: #57cb60;
    color: lab(73.1677% -50.536 42.2263);
  }

  .stats-eval-fail {
    color: var(--color-error, #fb2c38);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-eval-fail {
      color: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .stats-health-healthy .stats-row-slug {
    color: var(--color-moon-200);
  }

  .stats-health-warning .stats-row-slug {
    color: var(--color-warning, #f99c00);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-health-warning .stats-row-slug {
      color: var(--color-warning, lab(72.7153% 31.942 97.8348));
    }
  }

  .stats-health-error .stats-row-slug {
    color: var(--color-error, #fb2c38);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-health-error .stats-row-slug {
      color: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .stats-sparkline {
    background: rgba(255, 255, 255, .06);
    border-radius: 5px;
    flex-shrink: 0;
    width: 80px;
    height: 10px;
    overflow: hidden;
  }

  .stats-sparkline-bar {
    background: var(--color-success, #00bb7e);
    height: 100%;
    transition: width .3s var(--easing-out, cubic-bezier(.25, 0, 0, 1));
    border-radius: 5px;
  }

  @supports (color: lab(0% 0 0)) {
    .stats-sparkline-bar {
      background: var(--color-success, lab(66.9741% -58.0824 20.0982));
    }
  }

  .stats-health-warning .stats-sparkline-bar {
    background: var(--color-warning, #f99c00);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-health-warning .stats-sparkline-bar {
      background: var(--color-warning, lab(72.7153% 31.942 97.8348));
    }
  }

  .stats-health-error .stats-sparkline-bar {
    background: var(--color-error, #fb2c38);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-health-error .stats-sparkline-bar {
      background: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .stats-health-neutral .stats-row-slug {
    color: var(--color-moon-400);
  }

  .stats-health-neutral .stats-sparkline-bar {
    background: var(--color-moon-600);
  }

  .stats-breadcrumb {
    color: var(--color-moon-400);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    align-items: center;
    gap: 6px;
    padding: 0 2px 10px;
    font-size: 11px;
    display: flex;
  }

  .stats-breadcrumb-item {
    color: var(--color-moon-300);
    font-weight: 500;
  }

  .stats-breadcrumb-item.clickable {
    cursor: pointer;
    color: var(--color-moon-400);
    font-weight: 400;
    transition: color .15s;
  }

  .stats-breadcrumb-item.clickable:hover {
    color: var(--color-moon-100);
  }

  .stats-breadcrumb-sep {
    color: var(--color-moon-600);
    font-size: 12px;
  }

  .stats-drill-filters {
    gap: 6px;
    display: flex;
  }

  .stats-drill-runs {
    flex-direction: column;
    gap: 1px;
    max-height: 180px;
    display: flex;
    overflow-y: auto;
  }

  .stats-run-header {
    color: var(--color-moon-600);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    padding: 3px 8px;
    font-size: 10px;
    display: flex;
  }

  .stats-run-row {
    cursor: pointer;
    border-radius: 4px;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 11px;
    transition: background .15s;
    display: flex;
  }

  .stats-run-row:hover {
    background: rgba(255, 255, 255, .04);
  }

  .stats-run-status {
    text-align: center;
    flex-shrink: 0;
    width: 16px;
    font-size: 12px;
  }

  .stats-run-status.status-success {
    color: var(--color-success, #00bb7e);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-run-status.status-success {
      color: var(--color-success, lab(66.9741% -58.0824 20.0982));
    }
  }

  .stats-run-status.status-error {
    color: var(--color-error, #fb2c38);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-run-status.status-error {
      color: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .stats-run-status.status-running {
    color: #0f92f7;
    color: lab(58.4262% -3.61189 -60.3039);
  }

  .stats-run-status.status-info {
    color: var(--color-moon-500);
  }

  .stats-run-time {
    color: var(--color-moon-400);
    white-space: nowrap;
    flex: 1;
    font-size: 11px;
  }

  .stats-run-col {
    color: var(--color-moon-400);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 48px;
  }

  .stats-drill-detail {
    flex-direction: column;
    gap: 10px;
    display: flex;
  }

  .stats-detail-row {
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .stats-detail-badge {
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
  }

  .stats-detail-badge.success {
    color: #10b981;
    background: rgba(16, 185, 129, .15);
    border: 1px solid rgba(16, 185, 129, .3);
  }

  .stats-detail-badge.error {
    color: #ef4444;
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .3);
  }

  .stats-detail-badge.running {
    color: #0f92f7;
    color: lab(58.4262% -3.61189 -60.3039);
    background: rgba(99, 134, 255, .15);
    border: 1px solid rgba(99, 134, 255, .3);
  }

  .stats-detail-badge.info {
    color: var(--color-moon-400);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
  }

  .stats-detail-time {
    color: var(--color-moon-500);
    font-size: 11px;
  }

  .stats-detail-error {
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: 6px;
    padding: 8px 10px;
  }

  .stats-detail-error pre {
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: #ef4444;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 80px;
    margin: 0;
    overflow-y: auto;
  }

  .stats-detail-output {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .stats-detail-output-label {
    color: var(--color-moon-500);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10px;
  }

  .stats-detail-pre {
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: var(--color-moon-300);
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 6px;
    max-height: 80px;
    margin: 0;
    padding: 8px 10px;
    overflow-y: auto;
  }

  .stats-detail-meta {
    border-top: 1px solid rgba(255, 255, 255, .06);
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    display: flex;
  }

  .stats-detail-meta-row {
    align-items: center;
    gap: 8px;
    font-size: 11px;
    display: flex;
  }

  .stats-detail-meta-label {
    color: var(--color-moon-500);
    flex-shrink: 0;
    min-width: 90px;
  }

  .stats-detail-meta-value {
    color: var(--color-moon-300);
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
    overflow: hidden;
  }

  .stats-sparkline-dots {
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    display: inline-flex;
  }

  .stats-sparkline-dot {
    background: var(--color-moon-600);
    border-radius: 50%;
    width: 6px;
    height: 6px;
  }

  .stats-sparkline-dot.success {
    background: var(--color-success, #00bb7e);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-sparkline-dot.success {
      background: var(--color-success, lab(66.9741% -58.0824 20.0982));
    }
  }

  .stats-sparkline-dot.error {
    background: var(--color-error, #fb2c38);
  }

  @supports (color: lab(0% 0 0)) {
    .stats-sparkline-dot.error {
      background: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .stats-sparkline-dot.running {
    background: #0f92f7;
    background: lab(58.4262% -3.61189 -60.3039);
  }

  .stats-sparkline-dot.info {
    background: var(--color-moon-500);
  }

  .stats-trend-up {
    color: var(--color-success, #00bb7e);
    flex-shrink: 0;
    font-size: 11px;
  }

  @supports (color: lab(0% 0 0)) {
    .stats-trend-up {
      color: var(--color-success, lab(66.9741% -58.0824 20.0982));
    }
  }

  .stats-trend-down {
    color: var(--color-error, #fb2c38);
    flex-shrink: 0;
    font-size: 11px;
  }

  @supports (color: lab(0% 0 0)) {
    .stats-trend-down {
      color: var(--color-error, lab(55.4735% 75.1505 48.0805));
    }
  }

  .stats-trend-stable {
    color: var(--color-moon-500);
    flex-shrink: 0;
    font-size: 11px;
  }

  .stats-running-pulse {
    background: #0f92f7;
    background: lab(58.4262% -3.61189 -60.3039);
    border-radius: 50%;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    animation: 1.5s ease-in-out infinite stats-pulse;
    display: inline-block;
  }

  @keyframes stats-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: .5;
      transform: scale(1.3);
    }
  }

  .stats-badge-action {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #0f92f7;
    color: lab(58.4262% -3.61189 -60.3039);
    background: rgba(99, 134, 255, .15);
    border: 1px solid rgba(99, 134, 255, .25);
    border-radius: 8px;
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 600;
    display: inline-block;
  }

  .stats-badge-agent {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b16ae0;
    color: lab(56.6285% 44.3583 -49.5036);
    background: rgba(168, 85, 247, .15);
    border: 1px solid rgba(168, 85, 247, .25);
    border-radius: 8px;
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 600;
    display: inline-block;
  }

  .stats-token-count {
    color: var(--color-moon-500);
    flex-shrink: 0;
    font-size: 10px;
  }

  .stats-row-lastrun {
    color: var(--color-moon-600);
    flex-shrink: 0;
    margin-left: auto;
    font-size: 9px;
  }

  .stats-row-p95 {
    color: var(--color-moon-500);
    opacity: .7;
    font-size: 9px;
  }

  .stats-run-model {
    color: var(--color-moon-500);
    flex-shrink: 0;
    font-size: 9px;
  }

  .stats-run-error-preview {
    color: #ef4444;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 1;
    max-width: 200px;
    font-size: 10px;
    overflow: hidden;
  }

  .stats-run-prompt-preview {
    color: var(--color-moon-600);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 1;
    max-width: 160px;
    font-size: 10px;
    overflow: hidden;
  }

  .stats-detail-section {
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    display: flex;
  }

  .stats-detail-section:last-child {
    border-bottom: none;
  }

  .stats-detail-section-label {
    color: var(--color-moon-500);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10px;
    font-weight: 600;
  }

  .stats-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    display: grid;
  }

  .stats-detail-grid-row {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .stats-detail-tokens {
    gap: 12px;
    display: flex;
  }

  .stats-detail-token-card {
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 6px;
    flex: 1;
    padding: 8px 10px;
  }

  .stats-detail-token-value {
    color: var(--color-moon-200);
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
  }

  .stats-detail-token-label {
    color: var(--color-moon-500);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
    font-size: 9px;
  }

  .stats-detail-prompt {
    color: var(--color-moon-400);
    font-style: italic;
  }

  .stats-turns-list {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .stats-turn-row {
    border: 1px solid rgba(255, 255, 255, .04);
    border-radius: 4px;
    overflow: hidden;
  }

  .stats-turn-header {
    cursor: pointer;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 11px;
    display: flex;
  }

  .stats-turn-header:hover {
    background: rgba(255, 255, 255, .03);
  }

  .stats-turn-num {
    color: var(--color-moon-400);
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    flex-shrink: 0;
    min-width: 24px;
  }

  .stats-turn-preview {
    color: var(--color-moon-300);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    overflow: hidden;
  }

  .stats-turn-tokens, .stats-turn-duration {
    color: var(--color-moon-500);
    flex-shrink: 0;
    font-size: 10px;
  }

  .stats-turn-expand {
    color: var(--color-moon-500);
    flex-shrink: 0;
    font-size: 9px;
  }

  .stats-turn-detail {
    border-top: 1px solid rgba(255, 255, 255, .04);
    flex-direction: column;
    gap: 8px;
    padding: 6px 8px;
    display: flex;
  }

  .stats-turn-thinking {
    background: rgba(168, 85, 247, .06);
    border-radius: 4px;
    padding: 6px 8px;
  }

  .stats-turn-response {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .stats-turn-tools {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .stats-tool-item {
    background: rgba(255, 255, 255, .02);
    border-radius: 3px;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    font-size: 10px;
    display: flex;
  }

  .stats-tool-item.error {
    background: rgba(239, 68, 68, .06);
  }

  .stats-tool-name {
    color: #0f92f7;
    color: lab(58.4262% -3.61189 -60.3039);
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    flex-shrink: 0;
  }

  .stats-tool-input {
    color: var(--color-moon-500);
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .scorecard {
    border: 1px solid var(--border-color, rgba(255, 255, 255, .06));
    background: rgba(255, 255, 255, .02);
    border-radius: 8px;
    padding: 12px;
  }

  .scorecard-header {
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    display: flex;
  }

  .scorecard-gauge {
    align-items: baseline;
    gap: 2px;
    display: flex;
  }

  .scorecard-score {
    font-variant-numeric: tabular-nums;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
  }

  .scorecard-score-max {
    color: var(--text-secondary, #9ca3af);
    font-size: 14px;
  }

  .scorecard-badge {
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
  }

  .scorecard-badge-pass {
    color: #10b981;
    background: rgba(16, 185, 129, .15);
    border: 1px solid rgba(16, 185, 129, .3);
  }

  .scorecard-badge-fail {
    color: #ef4444;
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .3);
  }

  .scorecard-threshold {
    color: var(--text-secondary, #9ca3af);
    margin-left: auto;
    font-size: 11px;
  }

  .scorecard-bar-track {
    background: rgba(255, 255, 255, .06);
    border-radius: 3px;
    height: 6px;
    margin-bottom: 16px;
    overflow: hidden;
  }

  .scorecard-bar-fill {
    border-radius: 3px;
    height: 100%;
    transition: width .4s;
  }

  .scorecard-criteria {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    display: flex;
  }

  .scorecard-criterion {
    padding: 8px 0;
  }

  .scorecard-criterion-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    display: flex;
  }

  .scorecard-criterion-name {
    color: var(--text-primary, #e5e7eb);
    font-size: 12px;
    font-weight: 500;
  }

  .scorecard-criterion-weight {
    color: var(--text-secondary, #9ca3af);
    margin-left: 4px;
    font-size: 10px;
  }

  .scorecard-criterion-score {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
  }

  .scorecard-criterion-bar-track {
    background: rgba(255, 255, 255, .06);
    border-radius: 2px;
    height: 4px;
    margin-bottom: 4px;
    overflow: hidden;
  }

  .scorecard-criterion-bar-fill {
    border-radius: 2px;
    height: 100%;
    transition: width .3s;
  }

  .scorecard-criterion-reason {
    color: var(--text-secondary, #9ca3af);
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.4;
  }

  .scorecard-summary {
    color: var(--text-secondary, #9ca3af);
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, .06));
    padding-top: 8px;
    font-size: 12px;
    line-height: 1.5;
  }

  @import url("wallet.css");

  .journey-hidden {
    display: none !important;
  }

  .journey-new {
    position: relative;
  }

  .journey-new:after {
    content: "";
    background: var(--accent-primary, #3b82f6);
    width: 6px;
    height: 6px;
    box-shadow: 0 0 6px var(--accent-primary, #3b82f6);
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    animation: 2s ease-in-out infinite journey-new-pulse;
    position: absolute;
    top: 2px;
    right: 2px;
  }

  @keyframes journey-new-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: .4;
      transform: scale(.8);
    }
  }

  .periodic-elements > div.journey-new {
    animation: .3s ease-out both journey-scale-in;
  }

  .periodic-elements > div.journey-new:after {
    top: 0;
    right: 0;
  }

  .library-item.journey-new {
    box-shadow: 0 0 8px rgba(59, 130, 246, .3);
  }

  .library-item.journey-new:after {
    top: 4px;
    right: 4px;
  }

  .periodic-category {
    animation: .3s ease-out both journey-fade-in;
  }

  .journey-reveal-fade {
    animation: .4s ease-out both journey-fade-in;
  }

  .journey-reveal-slide-up {
    animation: .4s ease-out both journey-slide-up;
  }

  .journey-reveal-scale {
    animation: .3s ease-out both journey-scale-in;
  }

  @keyframes journey-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes journey-slide-up {
    from {
      opacity: 0;
      transform: translateY(12px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes journey-scale-in {
    from {
      opacity: 0;
      transform: scale(.92);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, :before, :after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  .register-onboarding-page {
    background: #050510;
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  .register-onboarding-stage {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .onboarding-canvas {
    z-index: 50;
    pointer-events: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .onboarding-card {
    z-index: 100;
    text-align: left;
    color: #e4e4e7;
    background: linear-gradient(to top, rgba(5, 5, 16, .95) 0%, rgba(5, 5, 16, .88) 70%, rgba(5, 5, 16, 0) 100%);
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 32px 32px;
    animation: .5s cubic-bezier(.22, 1, .36, 1) onboarding-card-in;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .onboarding-card-text {
    color: #a1a1aa;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.8;
  }

  .onboarding-card-text p {
    margin: 0 0 8px;
  }

  .onboarding-card-text p:last-child {
    margin-bottom: 0;
  }

  .onboarding-card-highlight {
    color: #e4e4e7;
    font-weight: 500;
  }

  .onboarding-field {
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    display: flex;
  }

  .onboarding-label {
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8b5cf6;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
  }

  .onboarding-input {
    color: #e4e4e7;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(139, 92, 246, .2);
    border-bottom: 2px solid rgba(139, 92, 246, .35);
    border-radius: 6px;
    outline: none;
    width: 100%;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 18px;
    transition: border-color .2s, box-shadow .2s;
  }

  .onboarding-input:focus {
    border-color: rgba(139, 92, 246, .4) rgba(139, 92, 246, .4) rgba(139, 92, 246, .6);
    box-shadow: 0 2px 16px rgba(139, 92, 246, .08);
  }

  .onboarding-input::placeholder {
    color: #52525b;
  }

  .onboarding-error {
    color: #ef4444;
    margin: 8px 0 4px;
    font-size: 13px;
  }

  .onboarding-button {
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 6px;
    flex-shrink: 0;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: transform .15s, box-shadow .2s, opacity .2s;
  }

  .onboarding-button:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 0 24px rgba(139, 92, 246, .2);
  }

  .onboarding-button:disabled {
    opacity: .6;
    cursor: default;
  }

  .onboarding-button-secondary {
    color: #a1a1aa;
    background: none;
    border: 1px solid rgba(139, 92, 246, .3);
  }

  .onboarding-button-secondary:hover:not(:disabled) {
    box-shadow: none;
    background: rgba(139, 92, 246, .08);
    border-color: rgba(139, 92, 246, .5);
    transform: none;
  }

  .onboarding-button-ghost {
    color: #71717a;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 10px 12px;
    text-decoration: underline;
  }

  .onboarding-button-ghost:hover:not(:disabled) {
    color: #a1a1aa;
    box-shadow: none;
    transform: none;
  }

  .onboarding-card-wide {
    max-width: 720px;
  }

  .trait-sliders {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
    display: flex;
  }

  .trait-slider-row {
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .trait-label {
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
    width: 90px;
    font-size: 11px;
    font-weight: 500;
  }

  .trait-label-left {
    color: #71717a;
    text-align: right;
  }

  .trait-label-right {
    color: #71717a;
    text-align: left;
  }

  .trait-slider {
    appearance: none;
    cursor: pointer;
    background: rgba(255, 255, 255, .08);
    border-radius: 2px;
    outline: none;
    flex: 1;
    height: 4px;
  }

  .trait-slider::-webkit-slider-thumb {
    appearance: none;
    cursor: pointer;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: transform .15s, box-shadow .15s;
  }

  .trait-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(139, 92, 246, .4);
  }

  .trait-slider::-moz-range-thumb {
    cursor: pointer;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    width: 16px;
    height: 16px;
  }

  .trait-description-section {
    margin-bottom: 4px;
  }

  .trait-description-label {
    color: #71717a;
    margin-bottom: 8px;
    font-size: 12px;
    display: block;
  }

  .trait-description-input {
    box-sizing: border-box;
    color: #e4e4e7;
    resize: vertical;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(139, 92, 246, .2);
    border-bottom: 2px solid rgba(139, 92, 246, .35);
    border-radius: 6px;
    outline: none;
    width: 100%;
    min-height: 48px;
    max-height: 120px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
  }

  .trait-description-input:focus {
    border-color: rgba(139, 92, 246, .4) rgba(139, 92, 246, .4) rgba(139, 92, 246, .6);
    box-shadow: 0 2px 16px rgba(139, 92, 246, .08);
  }

  .trait-description-input::placeholder {
    color: #52525b;
  }

  .creating-status {
    color: #a1a1aa;
    animation: 1.5s ease-in-out infinite creating-pulse;
  }

  @keyframes creating-pulse {
    0%, 100% {
      opacity: .6;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes onboarding-card-in {
    from {
      opacity: 0;
      transform: translateY(24px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .discovery-overlay {
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity .3s ease-out;
    position: fixed;
    inset: 0;
  }

  .discovery-overlay.discovery-visible {
    opacity: 1;
  }

  .discovery-score-float {
    font-variant-numeric: tabular-nums;
    color: #f0c040;
    text-shadow: 0 0 20px rgba(240, 192, 64, .6), 0 2px 8px rgba(0, 0, 0, .5);
    pointer-events: none;
    z-index: 10003;
    font-size: 2rem;
    font-weight: 700;
    animation: 2s ease-out forwards discovery-float-up;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @keyframes discovery-float-up {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%)scale(.7);
    }

    15% {
      opacity: 1;
      transform: translate(-50%, -65%)scale(1.1);
    }

    30% {
      opacity: 1;
      transform: translate(-50%, -80%)scale(1);
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -180%)scale(.9);
    }
  }

  .discovery-toast {
    backdrop-filter: blur(16px);
    pointer-events: auto;
    z-index: 10002;
    background: rgba(20, 20, 30, .95);
    border: 1px solid rgba(240, 192, 64, .3);
    border-radius: 12px;
    align-items: center;
    gap: 12px;
    max-width: 380px;
    padding: 14px 20px;
    animation: .5s cubic-bezier(.22, 1, .36, 1) forwards discovery-toast-in;
    display: flex;
    position: fixed;
    top: 24px;
    right: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 0 24px rgba(240, 192, 64, .15);
  }

  .discovery-toast-basics {
    border-color: rgba(100, 180, 255, .4);
  }

  .discovery-toast-explorer {
    border-color: rgba(160, 120, 255, .4);
  }

  .discovery-toast-master {
    border-color: rgba(255, 200, 60, .5);
  }

  @keyframes discovery-toast-in {
    from {
      opacity: 0;
      transform: translateX(40px)scale(.95);
    }

    to {
      opacity: 1;
      transform: translateX(0)scale(1);
    }
  }

  .discovery-toast-icon {
    flex-shrink: 0;
    font-size: 1.6rem;
    animation: 1s ease-in-out .3s discovery-icon-pulse;
  }

  @keyframes discovery-icon-pulse {
    0%, 100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.3);
    }
  }

  .discovery-toast-content {
    flex: 1;
    min-width: 0;
  }

  .discovery-toast-title {
    color: #f0f0f4;
    margin-bottom: 2px;
    font-size: .9rem;
    font-weight: 600;
  }

  .discovery-toast-desc {
    color: rgba(240, 240, 244, .6);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    line-height: 1.3;
    overflow: hidden;
  }

  .discovery-toast-reward {
    color: #f0c040;
    margin-top: 4px;
    font-size: .78rem;
    font-weight: 600;
  }

  .discovery-confetti {
    pointer-events: none;
    z-index: 10001;
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  .discovery-confetti-particle {
    background: hsl(var(--particle-hue, 40), 80%, 60%);
    opacity: 0;
    border-radius: 2px;
    animation: 2s ease-out forwards discovery-confetti-fall;
    position: absolute;
    top: 40%;
  }

  .discovery-confetti-particle.shower {
    animation: 3s ease-in forwards discovery-confetti-rain;
    top: -10px;
  }

  @keyframes discovery-confetti-fall {
    0% {
      opacity: 1;
      transform: translate(0)rotate(0)scale(1);
    }

    20% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate(var(--tx, 40px), var(--ty, 200px)) rotate(var(--particle-rotation, 180deg)) scale(.5);
    }
  }

  @keyframes discovery-confetti-rain {
    0% {
      opacity: 0;
      transform: translateY(-10px)rotate(0);
    }

    10% {
      opacity: 1;
    }

    90% {
      opacity: .6;
    }

    100% {
      opacity: 0;
      transform: translateY(100vh) rotate(var(--particle-rotation, 720deg));
    }
  }

  .discovery-card {
    backdrop-filter: blur(24px);
    text-align: center;
    pointer-events: auto;
    z-index: 10004;
    background: rgba(20, 20, 35, .97);
    border: 1px solid rgba(240, 192, 64, .3);
    border-radius: 16px;
    width: 320px;
    padding: 32px 28px;
    animation: .6s cubic-bezier(.22, 1, .36, 1) forwards discovery-card-in;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 16px 64px rgba(0, 0, 0, .6), 0 0 40px rgba(240, 192, 64, .12);
  }

  .discovery-card-basics {
    border-color: rgba(100, 180, 255, .3);
    box-shadow: 0 16px 64px rgba(0, 0, 0, .6), 0 0 40px rgba(100, 180, 255, .1);
  }

  .discovery-card-explorer {
    border-color: rgba(160, 120, 255, .4);
    box-shadow: 0 16px 64px rgba(0, 0, 0, .6), 0 0 40px rgba(160, 120, 255, .12);
  }

  .discovery-card-master {
    border-color: rgba(255, 200, 60, .5);
    box-shadow: 0 16px 64px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 200, 60, .2);
  }

  @keyframes discovery-card-in {
    0% {
      opacity: 0;
      transform: translate(-50%, -45%)scale(.7)rotate(-2deg);
    }

    50% {
      transform: translate(-50%, -51%)scale(1.03)rotate(.5deg);
    }

    100% {
      opacity: 1;
      transform: translate(-50%, -50%)scale(1)rotate(0);
    }
  }

  .discovery-card-badge {
    margin-bottom: 12px;
    font-size: 3rem;
    animation: 1s ease-out .3s discovery-badge-spin;
  }

  @keyframes discovery-badge-spin {
    0% {
      filter: brightness(.8);
      transform: rotateY(0)scale(.8);
    }

    30% {
      filter: brightness(1.4);
      transform: rotateY(180deg)scale(1.2);
    }

    60% {
      filter: brightness(1.1);
      transform: rotateY(360deg)scale(1.05);
    }

    100% {
      filter: brightness();
      transform: rotateY(360deg)scale(1);
    }
  }

  .discovery-card-title {
    color: #f0f0f4;
    margin-bottom: 8px;
    font-size: 1.2rem;
    font-weight: 700;
  }

  .discovery-card-description {
    color: rgba(240, 240, 244, .65);
    margin-bottom: 16px;
    font-size: .85rem;
    line-height: 1.5;
  }

  .discovery-card-reward {
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    display: flex;
  }

  .discovery-card-reward-amount {
    color: #f0c040;
    font-variant-numeric: tabular-nums;
    font-size: 1.8rem;
    font-weight: 800;
  }

  .discovery-card-reward-label {
    color: rgba(240, 192, 64, .7);
    font-size: .8rem;
    font-weight: 500;
  }

  .discovery-card-tier {
    color: rgba(240, 240, 244, .4);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
  }

  .discovery-screen-flash {
    pointer-events: none;
    z-index: 10000;
    animation: 1.5s ease-out forwards discovery-flash;
    position: fixed;
    inset: 0;
    box-shadow: inset 0 0 120px rgba(255, 200, 60, .3);
  }

  @keyframes discovery-flash {
    0% {
      opacity: 0;
    }

    15% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .discovery-collection {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  .discovery-collection-loading, .discovery-collection-empty {
    text-align: center;
    color: rgba(240, 240, 244, .4);
    padding: 40px 0;
    font-size: .85rem;
  }

  .discovery-collection-header {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
    padding-bottom: 16px;
    display: flex;
  }

  .discovery-collection-count {
    color: rgba(240, 240, 244, .6);
    font-size: .85rem;
  }

  .discovery-collection-au {
    align-items: baseline;
    gap: 4px;
    display: flex;
  }

  .discovery-au-amount {
    color: #f0c040;
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    font-weight: 700;
  }

  .discovery-au-label {
    color: rgba(240, 192, 64, .6);
    font-size: .78rem;
  }

  .discovery-tier {
    margin-bottom: 28px;
  }

  .discovery-tier-header {
    margin-bottom: 12px;
  }

  .discovery-tier-name {
    color: #f0f0f4;
    margin-bottom: 2px;
    font-size: 1rem;
    font-weight: 600;
  }

  .discovery-tier-basics .discovery-tier-name {
    color: #64b4ff;
  }

  .discovery-tier-explorer .discovery-tier-name {
    color: #a078ff;
  }

  .discovery-tier-master .discovery-tier-name {
    color: #ffc83c;
  }

  .discovery-tier-desc {
    color: rgba(240, 240, 244, .4);
    margin-bottom: 8px;
    font-size: .75rem;
  }

  .discovery-tier-progress {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .discovery-tier-progress-bar {
    background: rgba(255, 255, 255, .06);
    border-radius: 2px;
    flex: 1;
    height: 4px;
    overflow: hidden;
  }

  .discovery-tier-progress-fill {
    border-radius: 2px;
    height: 100%;
    transition: width .5s ease-out;
  }

  .discovery-tier-basics .discovery-tier-progress-fill {
    background: #64b4ff;
  }

  .discovery-tier-explorer .discovery-tier-progress-fill {
    background: #a078ff;
  }

  .discovery-tier-master .discovery-tier-progress-fill {
    background: #ffc83c;
  }

  .discovery-tier-progress-text {
    color: rgba(240, 240, 244, .4);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: .72rem;
  }

  .discovery-tier-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    display: grid;
  }

  .discovery-item {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    padding: 12px;
    transition: border-color .2s, background .2s;
  }

  .discovery-item-earned {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
  }

  .discovery-item-earned:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .15);
  }

  .discovery-item-earned.discovery-item-basics {
    border-color: rgba(100, 180, 255, .15);
  }

  .discovery-item-earned.discovery-item-explorer {
    border-color: rgba(160, 120, 255, .15);
  }

  .discovery-item-earned.discovery-item-master {
    border-color: rgba(255, 200, 60, .2);
  }

  .discovery-item-locked {
    opacity: .4;
    text-align: center;
    padding: 16px 12px;
  }

  .discovery-item-name {
    color: #f0f0f4;
    margin-bottom: 4px;
    font-size: .82rem;
    font-weight: 600;
  }

  .discovery-item-desc {
    color: rgba(240, 240, 244, .5);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 6px;
    font-size: .72rem;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden;
  }

  .discovery-item-reward {
    color: #f0c040;
    font-size: .72rem;
    font-weight: 600;
  }

  .discovery-item-locked-icon {
    color: rgba(240, 240, 244, .3);
    margin-bottom: 6px;
    font-size: 1.6rem;
  }

  .discovery-item-hint {
    color: rgba(240, 240, 244, .3);
    font-size: .68rem;
    font-style: italic;
  }

  .discovery-topbar-wrapper {
    position: relative;
  }

  .discovery-topbar-btn {
    color: #f0c040;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: rgba(240, 192, 64, .08);
    border: 1px solid rgba(240, 192, 64, .25);
    border-radius: 20px;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 4px 12px 4px 10px;
    font-size: .78rem;
    font-weight: 600;
    transition: all .25s;
    display: inline-flex;
  }

  .discovery-topbar-btn:hover {
    background: rgba(240, 192, 64, .15);
    border-color: rgba(240, 192, 64, .4);
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(240, 192, 64, .12);
  }

  .discovery-topbar-btn.discovery-empty {
    color: rgba(240, 240, 244, .35);
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
  }

  .discovery-topbar-btn.discovery-empty:hover {
    color: rgba(240, 240, 244, .6);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
  }

  .discovery-topbar-btn.discovery-pulse {
    animation: 2s ease-in-out infinite discovery-btn-pulse;
  }

  @keyframes discovery-btn-pulse {
    0% {
      box-shadow: 0 0 rgba(240, 192, 64, .3);
    }

    50% {
      box-shadow: 0 0 14px 3px rgba(240, 192, 64, .2);
    }

    100% {
      box-shadow: 0 0 rgba(240, 192, 64, .3);
    }
  }

  .discovery-topbar-icon {
    font-size: .9rem;
    line-height: 1;
    animation: 3s ease-in-out infinite discovery-icon-twinkle;
  }

  @keyframes discovery-icon-twinkle {
    0%, 100% {
      opacity: 1;
      transform: scale(1)rotate(0);
    }

    50% {
      opacity: .7;
      transform: scale(.9)rotate(15deg);
    }
  }

  .discovery-topbar-au {
    font-size: .82rem;
    font-weight: 700;
  }

  .discovery-topbar-label {
    opacity: .7;
    font-size: .7rem;
    font-weight: 500;
  }

  .discovery-drawer-backdrop {
    backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .4);
    transition: opacity .3s;
    position: fixed;
    inset: 0;
  }

  .discovery-drawer-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .discovery-drawer {
    backdrop-filter: blur(32px);
    z-index: 9999;
    background: rgba(14, 14, 22, .98);
    border-left: 1px solid rgba(255, 255, 255, .06);
    flex-direction: column;
    width: min(420px, 90vw);
    height: 100vh;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    overflow: hidden;
    transform: translateX(100%);
    box-shadow: -8px 0 32px rgba(0, 0, 0, .5);
  }

  .discovery-drawer.open {
    transform: translateX(0);
  }

  .discovery-drawer-header {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    display: flex;
  }

  .discovery-drawer-title {
    color: #f0f0f4;
    letter-spacing: .02em;
    font-size: 1rem;
    font-weight: 600;
  }

  .discovery-drawer-close {
    color: rgba(240, 240, 244, .5);
    cursor: pointer;
    background: rgba(255, 255, 255, .04);
    border: none;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    font-size: .85rem;
    transition: all .15s;
    display: flex;
  }

  .discovery-drawer-close:hover {
    color: #f0f0f4;
    background: rgba(255, 255, 255, .1);
  }

  .discovery-drawer-content {
    overscroll-behavior: contain;
    flex: 1;
    overflow-y: auto;
  }

  .discovery-score-float {
    animation: 2s cubic-bezier(.22, 1, .36, 1) forwards discovery-float-up, .4s ease-in-out 3 discovery-wobble;
  }

  @keyframes discovery-wobble {
    0%, 100% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-4px)rotate(-2deg);
    }

    75% {
      transform: translateX(4px)rotate(2deg);
    }
  }

  .discovery-confetti-particle:nth-child(3n) {
    border-radius: 50%;
  }

  .discovery-confetti-particle:nth-child(3n+1) {
    border-radius: 1px;
    transform: rotate(45deg);
  }

  .discovery-confetti-particle:nth-child(5n) {
    border-radius: 1px;
    width: 3px !important;
    height: 8px !important;
  }

  .discovery-confetti-burst .discovery-confetti-particle {
    --tx: calc((var(--particle-hue, 40)  - 180) * 1.2px);
    --ty: calc(80px + var(--particle-hue, 40) * 1.5px);
  }

  .discovery-card:before, .discovery-card:after {
    content: "";
    pointer-events: none;
    background: rgba(240, 192, 64, .6);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    animation: 1.5s ease-in-out infinite discovery-sparkle;
    position: absolute;
  }

  .discovery-card:before {
    animation-delay: 0s;
    top: 15%;
    left: 12%;
  }

  .discovery-card:after {
    animation-delay: .7s;
    bottom: 20%;
    right: 10%;
  }

  @keyframes discovery-sparkle {
    0%, 100% {
      opacity: 0;
      transform: scale(0);
    }

    50% {
      opacity: 1;
      transform: scale(1.5);
    }
  }

  .discovery-toast {
    animation: .5s cubic-bezier(.34, 1.56, .64, 1) forwards discovery-toast-bounce;
  }

  @keyframes discovery-toast-bounce {
    0% {
      opacity: 0;
      transform: translateX(100%)scale(.95);
    }

    60% {
      transform: translateX(-8px)scale(1.02);
    }

    100% {
      opacity: 1;
      transform: translateX(0)scale(1);
    }
  }

  .discovery-card-badge {
    text-shadow: 0 0 20px rgba(240, 192, 64, .4);
  }

  .discovery-screen-flash:after {
    content: "";
    pointer-events: none;
    border: 2px solid rgba(255, 200, 60, .4);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: 1.5s ease-out forwards discovery-ring-ripple;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @keyframes discovery-ring-ripple {
    0% {
      opacity: 1;
      border-width: 3px;
      width: 100px;
      height: 100px;
    }

    100% {
      opacity: 0;
      border-width: 1px;
      width: 600px;
      height: 600px;
    }
  }

  .discovery-overlay:not(.discovery-visible) .discovery-score-float {
    animation: .4s ease-in forwards discovery-float-out;
  }

  @keyframes discovery-float-out {
    0% {
      opacity: 1;
      transform: translateY(var(--current-y, -40px)) scale(1);
    }

    100% {
      opacity: 0;
      transform: translateY(-80px)scale(.7);
    }
  }

  .discovery-overlay:not(.discovery-visible) .discovery-toast {
    animation: .35s ease-in forwards discovery-toast-out;
  }

  @keyframes discovery-toast-out {
    0% {
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      transform: translateX(120%);
    }
  }

  .discovery-overlay:not(.discovery-visible) .discovery-card {
    animation: .4s ease-in forwards discovery-card-out;
  }

  @keyframes discovery-card-out {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%)scale(1);
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -50%)scale(.85);
    }
  }

  .discovery-item-earned:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  }

  .discovery-item-earned.discovery-item-basics:hover {
    border-color: rgba(100, 180, 255, .5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3), 0 0 20px rgba(100, 180, 255, .1);
  }

  .discovery-item-earned.discovery-item-explorer:hover {
    border-color: rgba(160, 120, 255, .5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3), 0 0 20px rgba(160, 120, 255, .1);
  }

  .discovery-item-earned.discovery-item-master:hover {
    border-color: rgba(255, 200, 60, .5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3), 0 0 20px rgba(255, 200, 60, .15);
  }

  .discovery-item-locked {
    animation: 4s ease-in-out infinite discovery-locked-breathe;
  }

  @keyframes discovery-locked-breathe {
    0%, 100% {
      opacity: .7;
    }

    50% {
      opacity: .5;
    }
  }

  .discovery-card-wallet-hint {
    color: rgba(240, 192, 64, .4);
    letter-spacing: .01em;
    margin-top: 12px;
    font-size: .68rem;
    font-style: italic;
  }

  .discovery-wallet-nudge {
    background: rgba(240, 192, 64, .05);
    border: 1px solid rgba(240, 192, 64, .12);
    border-radius: 8px;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 10px 14px;
    transition: all .2s;
    display: flex;
  }

  .discovery-wallet-nudge:hover {
    background: rgba(240, 192, 64, .08);
    border-color: rgba(240, 192, 64, .2);
  }

  .discovery-wallet-nudge-icon {
    flex-shrink: 0;
    font-size: 1rem;
  }

  .discovery-wallet-nudge-text {
    color: rgba(240, 192, 64, .6);
    font-size: .75rem;
    line-height: 1.4;
  }

  .library-panel {
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .library-panel-toolbar {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    display: flex;
  }

  .library-panel-mode-label {
    color: rgba(255, 255, 255, .4);
    text-transform: uppercase;
    letter-spacing: .05em;
    flex: 1;
    font-size: .7rem;
  }

  .library-panel-content {
    flex: 1;
    overflow: hidden auto;
  }

  .library-composition-content {
    padding: 4px 0;
  }

  .library-empty {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
    display: flex;
  }

  .library-empty-title {
    color: rgba(255, 255, 255, .5);
    margin-bottom: 8px;
    font-size: .8rem;
  }

  .library-empty-hint {
    color: rgba(255, 255, 255, .3);
    font-size: .7rem;
    line-height: 1.5;
  }

  .library-categories {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .library-category {
    margin-bottom: 4px;
  }

  .library-category-header {
    background: rgba(255, 255, 255, .02);
    border-left: 2px solid rgba(0, 0, 0, 0);
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    display: flex;
  }

  .library-category-name {
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .4);
    font-size: .65rem;
    font-weight: 600;
  }

  .library-category-count {
    color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .04);
    border-radius: 8px;
    padding: 1px 6px;
    font-size: .6rem;
  }

  .library-category-items {
    flex-direction: column;
    display: flex;
  }

  .library-item {
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    font-family: inherit;
    transition: background .15s;
    display: flex;
  }

  .library-item:hover {
    background: rgba(255, 255, 255, .05);
  }

  .library-item:active {
    background: rgba(255, 255, 255, .08);
  }

  .library-item-loading {
    opacity: .5;
    pointer-events: none;
  }

  .library-item-symbol {
    letter-spacing: .02em;
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    font-size: .65rem;
    font-weight: 700;
    display: flex;
  }

  .library-item-info {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .library-item-name {
    color: rgba(255, 255, 255, .8);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
    overflow: hidden;
  }

  .library-item-type {
    color: rgba(255, 255, 255, .3);
    font-size: .6rem;
  }

  .library-item-action {
    color: rgba(255, 255, 255, .25);
    border-radius: 4px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    font-size: .85rem;
    transition: all .15s;
    display: flex;
  }

  .library-item:hover .library-item-action {
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .06);
  }

  .sr-only {
    border-style: var(--tw-border-style);
    width: 1px;
    height: 1px;
    padding: calc(var(--spacing) * 0);
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
    border-width: 0;
    margin: -1px;
    position: absolute;
    overflow: hidden;
  }

  .app-layout {
    flex-direction: column;
    min-height: 100vh;
    display: flex;
  }

  .main-content {
    padding: calc(var(--spacing) * 6);
    contain: paint;
    flex: 1;
  }

  .container {
    width: 100%;
    max-width: 1200px;
    padding-inline: calc(var(--spacing) * 4);
    margin-inline: auto;
  }

  .glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-3xl);
    --tw-backdrop-blur: blur(var(--blur-xl));
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    box-shadow: var(--glass-shadow);
    transition-duration: .3s;
  }

  .glass-card:hover {
    box-shadow: var(--shadow-card-hover);
    --tw-translate-y: calc(var(--spacing) * -.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-color: rgba(197, 163, 255, .25);
    border-color: lab(72.7228% 26.4609 -41.3101 / .25);
  }

  .glass-card.featured {
    background: linear-gradient(135deg, rgba(197, 163, 255, .12) 0%, rgba(184, 190, 255, .08) 30%, rgba(245, 194, 153, .06) 70%, rgba(197, 163, 255, .1) 100%);
    background: linear-gradient(135deg, lab(72.7228% 26.4609 -41.3101 / .12) 0%, lab(78.163% 9.52372 -35.9495 / .08) 30%, lab(82.3726% 15.0174 28.0157 / .06) 70%, lab(72.7228% 26.4609 -41.3101 / .1) 100%);
    border-color: rgba(197, 163, 255, .18);
    border-color: lab(72.7228% 26.4609 -41.3101 / .18);
  }

  .main-nav {
    top: calc(var(--spacing) * 0);
    z-index: 50;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, .5);
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: sticky;
  }

  .btn {
    cursor: pointer;
    border-radius: .5rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    font-weight: 500;
    transition: all .3s;
    display: flex;
  }

  .btn:disabled {
    cursor: not-allowed;
    opacity: .75;
  }

  .btn:active:enabled {
    transform: scale(.95);
  }

  .btn-primary {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-700);
    background-color: var(--color-main-800);
    color: var(--color-main-200);
  }

  @media (hover: hover) {
    .btn-primary:hover:enabled {
      border-color: var(--color-main-600);
    }
  }

  @media (hover: hover) {
    .btn-primary:hover:enabled {
      background-color: var(--color-main-700);
    }
  }

  @media (hover: hover) {
    .btn-primary:hover:enabled {
      color: var(--color-main-100);
    }
  }

  .btn-vibrant {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-accent-600);
    background-color: var(--color-accent-700);
    color: var(--color-white);
  }

  @media (hover: hover) {
    .btn-vibrant:hover:enabled {
      background-color: var(--color-accent-600);
    }
  }

  .btn-vibrant {
    box-shadow: inset 0 1px rgba(98, 95, 255, .4);
    box-shadow: inset 0 1px lab(48.295% 38.3129 -81.9673 / .4);
  }

  .btn-ghost {
    background-color: rgba(82, 82, 92, .15);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .btn-ghost {
      background-color: color-mix(in oklab, var(--color-main-600) 15%, transparent);
    }
  }

  .btn-ghost {
    color: var(--color-main-200);
  }

  @media (hover: hover) {
    .btn-ghost:hover:enabled {
      background-color: rgba(63, 63, 70, .8);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .btn-ghost:hover:enabled {
        background-color: color-mix(in oklab, var(--color-main-700) 80%, transparent);
      }
    }
  }

  .btn-link {
    padding: calc(var(--spacing) * 0);
    color: var(--color-main-200);
    background-color: rgba(0, 0, 0, 0);
  }

  @media (hover: hover) {
    .btn-link:hover:enabled {
      background-color: var(--color-main-800);
    }
  }

  .btn-danger {
    background-color: var(--color-danger-900);
    color: var(--color-danger-100);
  }

  @media (hover: hover) {
    .btn-danger:hover:enabled {
      background-color: var(--color-danger-800);
    }
  }

  @media (hover: hover) {
    .btn-danger:hover:enabled {
      color: var(--color-danger-50);
    }
  }

  .btn-warning {
    background-color: var(--color-warning-800);
    color: var(--color-warning-100);
  }

  @media (hover: hover) {
    .btn-warning:hover:enabled {
      background-color: var(--color-warning-700);
    }
  }

  .btn-confirm {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-complement-600);
    background-color: var(--color-complement-700);
    color: var(--color-complement-100);
  }

  @media (hover: hover) {
    .btn-confirm:hover:enabled {
      border-color: var(--color-complement-500);
    }
  }

  @media (hover: hover) {
    .btn-confirm:hover:enabled {
      background-color: var(--color-complement-600);
    }
  }

  @media (hover: hover) {
    .btn-confirm:hover:enabled {
      color: var(--color-complement-50);
    }
  }

  .btn-icon {
    padding: calc(var(--spacing) * 0);
    background-color: rgba(0, 0, 0, 0);
  }

  @media (hover: hover) {
    .btn-icon:hover:enabled {
      background-color: rgba(0, 0, 0, 0);
    }
  }

  .btn-item {
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    width: 100%;
    padding: calc(var(--spacing) * 3);
    text-align: left;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-700);
    background-color: rgba(39, 39, 42, .5);
    flex-direction: column;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .btn-item {
      background-color: color-mix(in oklab, var(--color-main-800) 50%, transparent);
    }
  }

  .btn-item {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .btn-item:hover:not(:disabled) {
    background-color: rgba(39, 39, 42, .9);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .btn-item:hover:not(:disabled) {
      background-color: color-mix(in oklab, var(--color-main-800) 90%, transparent);
    }
  }

  .btn-item:disabled {
    border-color: var(--color-main-800);
    background-color: rgba(39, 39, 42, .2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .btn-item:disabled {
      background-color: color-mix(in oklab, var(--color-main-800) 20%, transparent);
    }
  }

  .btn-item:active:not(:disabled) {
    transform: scale(.98);
  }

  .input-text {
    border-radius: var(--radius-lg);
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-700);
    background-color: var(--color-main-800);
    color: var(--color-moon-100);
  }

  .input-text::placeholder {
    color: var(--color-main-500);
  }

  .input-text:focus {
    border-color: var(--color-moon-600);
  }

  .input-text:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .input-text:focus {
    --tw-ring-color: var(--color-moon-600);
  }

  .input-text:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .input-text {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .input-text-light {
    border-radius: var(--radius-lg);
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-moon-100);
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
  }

  .input-text-light::placeholder {
    color: var(--color-main-500);
  }

  .input-text-light:focus {
    border-color: var(--color-moon-600);
  }

  .input-text-light:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .input-text-light:focus {
    --tw-ring-color: var(--color-moon-600);
  }

  .input-text-light:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .input-text-light {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  @media (hover: hover) {
    .input-text-light:hover {
      background-color: rgba(39, 39, 42, .5);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .input-text-light:hover {
        background-color: color-mix(in oklab, var(--color-main-800) 50%, transparent);
      }
    }
  }

  .input-text-light:focus {
    background-color: var(--color-main-800);
  }

  .input-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-main-300);
  }

  .switch {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 11);
    cursor: pointer;
    background-color: var(--color-main-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    border-radius: 3.40282e38px;
    align-items: center;
    transition-duration: .2s;
    display: inline-flex;
    position: relative;
  }

  .switch[data-checked] {
    background-color: var(--color-moon-600);
  }

  .switch:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .switch:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(82, 82, 92, .5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .switch:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-moon-600) 50%, transparent);
    }
  }

  .switch:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--color-moon-900);
  }

  .switch .switch-thumb {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    background-color: var(--color-white);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: 3.40282e38px;
    transition-duration: .2s;
    display: inline-block;
  }

  .switch[data-checked] .switch-thumb {
    --tw-translate-x: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .checkbox {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-600);
    background-color: var(--color-main-800);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    border-radius: .25rem;
    justify-content: center;
    align-items: center;
    transition-duration: .15s;
    display: flex;
    position: relative;
  }

  .checkbox[data-checked] {
    border-color: var(--color-moon-600);
    background-color: var(--color-moon-600);
  }

  .checkbox:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .checkbox:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(82, 82, 92, .5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .checkbox:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-moon-600) 50%, transparent);
    }
  }

  .checkbox:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--color-moon-900);
  }

  .radio {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-600);
    background-color: var(--color-main-800);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    transition-duration: .15s;
    display: flex;
    position: relative;
  }

  .radio[data-checked] {
    border-color: var(--color-moon-600);
  }

  .radio:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .radio:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(82, 82, 92, .5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .radio:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-moon-600) 50%, transparent);
    }
  }

  .radio:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-offset-color: var(--color-moon-900);
  }

  .radio .radio-dot {
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 2.5);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 3.40282e38px;
    transition-duration: .15s;
  }

  .radio[data-checked] .radio-dot {
    background-color: var(--color-moon-500);
  }

  .badge {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * .5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--color-main-800);
    color: var(--color-main-300);
    border-radius: 3.40282e38px;
    display: inline-flex;
  }

  .badge-accent {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * .5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: rgba(55, 42, 172, .5);
    border-radius: 3.40282e38px;
    display: inline-flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .badge-accent {
      background-color: color-mix(in oklab, var(--color-accent-800) 50%, transparent);
    }
  }

  .badge-accent {
    color: var(--color-accent-300);
  }

  .spinner {
    animation: var(--animate-spin);
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--color-main-700) transparent;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: calc(var(--spacing) * 2);
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-main-700);
    border-radius: 3.40282e38px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-main-600);
  }

  .scroll-gutter-stable {
    scrollbar-gutter: stable;
  }

  .animate-border {
    background: conic-gradient(from var(--border-gradient-angle), var(--color-moon-500), var(--color-accent-500), var(--color-moon-500));
    animation: 3s linear infinite border-rotate;
  }

  .icon-btn {
    padding: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    justify-content: center;
    align-items: center;
    transition-duration: .15s;
    display: flex;
  }

  @media (hover: hover) {
    .icon-btn:hover {
      background-color: var(--color-main-800);
    }
  }

  .icon-btn:active {
    background-color: var(--color-main-700);
  }

  .icon-btn svg {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }

  .tabs {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-main-700);
    display: flex;
  }

  .tab {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-main-400);
    border-bottom-style: var(--tw-border-style);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    border-color: rgba(0, 0, 0, 0);
    border-bottom-width: 2px;
    margin-bottom: -1px;
    transition-duration: .15s;
    display: flex;
  }

  @media (hover: hover) {
    .tab:hover {
      color: var(--color-main-200);
    }
  }

  .tab[data-active="true"] {
    border-color: var(--color-moon-500);
    color: var(--color-moon-400);
  }

  .disclosure {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-main-800);
  }

  .disclosure-trigger {
    width: 100%;
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    color: var(--color-main-200);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  @media (hover: hover) {
    .disclosure-trigger:hover {
      color: var(--color-moon-300);
    }
  }

  .disclosure-content {
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
  }

  .dialog-backdrop {
    inset: calc(var(--spacing) * 0);
    background-color: rgba(0, 0, 0, .6);
    position: fixed;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dialog-backdrop {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .dialog-backdrop {
    --tw-backdrop-blur: blur(var(--blur-sm));
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .dialog-content {
    background-color: var(--color-main-900);
    border: 1px solid var(--color-main-700);
    border-radius: .75rem;
    position: fixed;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
  }

  .dialog-center {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    width: 100%;
    max-height: 85vh;
    max-width: var(--container-lg);
    top: 50%;
    left: 50%;
  }

  .dialog-bottom {
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    max-height: 80vh;
  }

  .dialog-right {
    top: calc(var(--spacing) * 0);
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    width: 100%;
    max-width: var(--container-md);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .dialog-content.dialog-center.select-panel-dialog {
    z-index: 60;
    flex-direction: column;
    width: calc(100% - 48px);
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    overflow: hidden;
  }

  .select-panel-dialog > .dialog-body {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: flex;
    overflow: hidden;
  }

  .popover {
    z-index: 50;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-700);
    background-color: var(--color-main-850);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 4px 6px -4px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    position: absolute;
  }

  .context-menu {
    z-index: 50;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-700);
    background-color: var(--color-main-850);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 4px 6px -4px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    min-width: calc(var(--spacing) * 48);
    padding-block: calc(var(--spacing) * 1);
  }

  .context-menu-item {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-main-200);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    display: flex;
  }

  @media (hover: hover) {
    .context-menu-item:hover {
      background-color: var(--color-main-800);
    }
  }

  .context-menu-item {
    cursor: pointer;
  }

  .context-menu-item[data-danger="true"] {
    color: var(--color-danger-400);
  }

  @media (hover: hover) {
    .context-menu-item[data-danger="true"]:hover {
      background-color: rgba(130, 24, 26, .3);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .context-menu-item[data-danger="true"]:hover {
        background-color: color-mix(in oklab, var(--color-danger-900) 30%, transparent);
      }
    }
  }

  .context-menu-divider {
    margin-block: calc(var(--spacing) * 1);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-main-700);
  }

  .card {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-700);
    background-color: var(--color-main-850);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .card-header {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-main-700);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .card-body {
    padding: calc(var(--spacing) * 4);
  }

  .card-footer {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-main-700);
    display: flex;
  }

  .panel-section {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-main-800);
  }

  .panel-section:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .panel-section-header {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-main-300);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .panel-section-content {
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .auth-card {
    width: 100%;
    max-width: var(--container-md);
    padding: calc(var(--spacing) * 6);
    margin-inline: auto;
  }

  @media (width >= 48rem) {
    .auth-card {
      padding: calc(var(--spacing) * 8);
    }
  }

  .auth-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: rgba(255, 255, 255, .05);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .auth-card {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .auth-card {
    background-color: rgba(24, 24, 27, .4);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .auth-card {
      background-color: color-mix(in oklab, var(--color-main-900) 40%, transparent);
    }
  }

  .auth-card {
    --tw-backdrop-blur: blur(var(--blur-xl));
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgba(0, 0, 0, .25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: rgba(0, 0, 0, .2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .auth-card {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .auth-header {
    margin-bottom: calc(var(--spacing) * 6);
    text-align: center;
  }

  .auth-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }

  .auth-subtitle {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-main-400);
  }

  .auth-form {
    gap: calc(var(--spacing) * 4);
    flex-direction: column;
    display: flex;
  }

  .auth-footer {
    margin-top: calc(var(--spacing) * 6);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-main-400);
  }

  .ui-qrcode {
    border-radius: var(--radius-2xl);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 4px 6px -4px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: rgba(0, 0, 0, .2);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ui-qrcode {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .ui-qrcode {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .ui-qrcode svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .ui-qrcode:hover {
    scale: 1.02;
  }

  .ui-qrcode-error {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-danger-700);
    background-color: rgba(130, 24, 26, .2);
    flex-direction: column;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ui-qrcode-error {
      background-color: color-mix(in oklab, var(--color-danger-900) 20%, transparent);
    }
  }

  .ui-qrcode-error {
    padding: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-danger-400);
    min-width: 200px;
    min-height: 200px;
  }

  .ui-qrcode-error .error-icon {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .ui-qrcode-display {
    align-items: center;
    gap: calc(var(--spacing) * 6);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  .ui-qrcode-display .qrcode-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }

  @media (width >= 48rem) {
    .ui-qrcode-display .qrcode-title {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  .ui-qrcode-display .qrcode-frame {
    position: relative;
  }

  .ui-qrcode-display .qrcode-frame:before {
    content: "";
    inset: calc(var(--spacing) * -3);
    border-radius: var(--radius-3xl);
    filter: blur(20px);
    z-index: -1;
    background: linear-gradient(135deg, rgba(98, 95, 255, .15) 0%, rgba(0, 183, 215, .1) 50%, rgba(98, 95, 255, .15) 100%);
    background: linear-gradient(135deg, lab(48.295% 38.3129 -81.9673 / .15) 0%, lab(67.805% -35.3952 -30.2018 / .1) 50%, lab(48.295% 38.3129 -81.9673 / .15) 100%);
    position: absolute;
  }

  .ui-qrcode-display .qrcode-instruction {
    max-width: var(--container-sm);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-main-400);
  }

  @media (width >= 48rem) {
    .ui-qrcode-display .qrcode-instruction {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  .ui-qrcode-display .qrcode-skeleton {
    border-radius: var(--radius-2xl);
    background-color: var(--color-main-800);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .ui-qrcode-display .qrcode-skeleton .skeleton-pulse {
    border-radius: var(--radius-xl);
    background-color: var(--color-main-700);
    width: 75%;
    height: 75%;
    animation: 2s cubic-bezier(.4, 0, .6, 1) infinite pulse;
  }

  .login-overlay {
    inset: calc(var(--spacing) * 0);
    padding: calc(var(--spacing) * 4);
    z-index: 9999;
    backdrop-filter: blur(2px) saturate(.8);
    opacity: 1;
    background: rgba(1, 2, 3, .6);
    background: lab(.451242% .0620261 -.669229 / .6);
    justify-content: center;
    align-items: center;
    animation: .4s ease-out overlay-enter;
    display: flex;
    position: fixed;
  }

  .login-overlay.exiting {
    animation: .5s ease-out forwards overlay-exit;
  }

  @keyframes overlay-enter {
    0% {
      opacity: 0;
      backdrop-filter: blur() saturate();
    }

    100% {
      opacity: 1;
      backdrop-filter: blur(2px) saturate(.8);
    }
  }

  @keyframes overlay-exit {
    0% {
      opacity: 1;
      backdrop-filter: blur(2px) saturate(.8);
    }

    100% {
      opacity: 0;
      backdrop-filter: blur() saturate();
    }
  }

  .login-overlay-card {
    width: 100%;
    max-width: var(--container-sm);
    background-color: rgba(24, 24, 27, .8);
    position: relative;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .login-overlay-card {
      background-color: color-mix(in oklab, var(--color-main-900) 80%, transparent);
    }
  }

  .login-overlay-card {
    --tw-backdrop-blur: blur(var(--blur-2xl));
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: rgba(255, 255, 255, .1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .login-overlay-card {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .login-overlay-card {
    padding: calc(var(--spacing) * 5);
  }

  @media (width >= 48rem) {
    .login-overlay-card {
      padding: calc(var(--spacing) * 6);
    }
  }

  .login-overlay-card {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgba(0, 0, 0, .25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    opacity: 1;
    max-height: calc(100vh - 2rem);
    animation: card-enter .5s var(--ease-out);
    scrollbar-width: none;
    overflow-y: auto;
    transform: translateY(0)scale(1);
    box-shadow: 0 0 0 1px oklch(98.5% 0 0 / .05), 0 25px 50px -12px oklch(0% 0 0 / .5), 0 0 100px -20px oklch(58.5% .233 277.117 / .15);
  }

  .login-overlay-card::-webkit-scrollbar {
    display: none;
  }

  .login-overlay-card.exiting {
    animation: card-exit .5s var(--ease-out) forwards;
  }

  .login-card-watermark {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: inherit;
    z-index: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .login-card-watermark img {
    object-fit: contain;
    opacity: .035;
    width: 240px;
    height: 240px;
  }

  .login-overlay-card > :not(.login-card-watermark):not(.login-loading-overlay) {
    z-index: 1;
    position: relative;
  }

  .login-loading-overlay {
    z-index: 10;
    border-radius: inherit;
    backdrop-filter: blur(8px);
    background: rgba(9, 11, 15, .92);
    background: lab(3.0147% .123538 -2.18379 / .92);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    animation: .25s ease-out login-loading-enter;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .login-loading-spinner {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    border: 2px solid rgba(255, 255, 255, .08);
    border: 2px solid lab(100% 0 0 / .08);
    border-top-color: oklch(100% 0 0 / .5);
    border-radius: 50%;
    animation: .7s linear infinite login-loading-spin;
  }

  .login-loading-phase {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-400);
    font-family: Space Mono, monospace;
    animation: .4s ease-out login-phase-text-in;
  }

  @keyframes login-loading-enter {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes login-loading-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes login-phase-text-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes card-enter {
    0% {
      opacity: 0;
      transform: translateY(20px)scale(.98);
    }

    100% {
      opacity: 1;
      transform: translateY(0)scale(1);
    }
  }

  @keyframes card-exit {
    0% {
      opacity: 1;
      transform: translateY(0)scale(1);
    }

    100% {
      opacity: 0;
      transform: translateY(-30px)scale(.95);
    }
  }

  .login-header {
    margin-bottom: calc(var(--spacing) * 4);
    text-align: center;
  }

  .login-title {
    margin-bottom: calc(var(--spacing) * 1);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }

  @media (width >= 48rem) {
    .login-title {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }

  .login-subtitle {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-400);
  }

  @media (width >= 48rem) {
    .login-subtitle {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  .login-qr, .login-mobile {
    margin-block: calc(var(--spacing) * 4);
    justify-content: center;
    display: flex;
  }

  .mobile-wallet-prompt {
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  .mobile-prompt-text {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: --color-main-200;
  }

  .mobile-wallet-button {
    border-radius: var(--radius-xl);
    background-color: --color-accent-400;
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: --color-main-950;
    --tw-shadow-alpha: 30%;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 4px 6px -4px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    justify-content: center;
    align-items: center;
    transition-duration: .3s;
    display: inline-flex;
  }

  .mobile-wallet-button:hover {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    background-color: --color-accent-300;
    box-shadow: 0 8px 24px rgba(255, 217, 90, .4);
    box-shadow: 0 8px 24px lab(88.7819% 10.5915 102.063 / .4);
  }

  .mobile-wallet-button:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .mobile-fallback-text {
    margin-top: calc(var(--spacing) * 4);
    max-width: var(--container-xs);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: --color-main-400;
  }

  .qr-portal {
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 1);
    position: relative;
  }

  .qr-portal:before {
    content: "";
    border-radius: var(--radius-2xl);
    background: conic-gradient(from var(--border-gradient-angle), var(--color-accent-400), var(--color-complement-300), var(--color-tertiary-300), var(--color-accent-400));
    opacity: .9;
    filter: blur(1px);
    animation: 3s linear infinite border-rotate;
    position: absolute;
    inset: -2px;
  }

  .qr-portal:after {
    content: "";
    border-radius: var(--radius-xl);
    background: var(--color-main-900);
    position: absolute;
    inset: 2px;
  }

  .qr-portal .qr-glow {
    pointer-events: none;
    inset: calc(var(--spacing) * -6);
    border-radius: var(--radius-3xl);
    background: radial-gradient(circle, rgba(98, 95, 255, .25) 0%, rgba(149, 91, 227, .1) 40%, rgba(0, 0, 0, 0) 70%);
    background: radial-gradient(circle, lab(48.295% 38.3129 -81.9673 / .25) 0%, lab(50.3845% 45.1614 -61.7514 / .1) 40%, rgba(0, 0, 0, 0) 70%);
    animation: 2.5s ease-in-out infinite qr-glow-pulse;
    position: absolute;
  }

  .qr-portal .qr-inner {
    z-index: 10;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 2);
    position: relative;
  }

  .qr-portal[data-state="loading"]:before {
    opacity: .5;
    animation-duration: 2s;
  }

  .qr-portal[data-state="loading"] .qr-glow {
    opacity: .3;
  }

  .qr-portal[data-state="waiting"]:before {
    opacity: .9;
    animation-duration: 3s;
  }

  .qr-portal[data-state="authenticating"]:before {
    opacity: 1;
    filter: blur(2px);
    animation-duration: 1s;
    inset: -3px;
  }

  .qr-portal[data-state="authenticating"] .qr-glow {
    background: radial-gradient(circle, rgba(0, 187, 127, .3) 0%, rgba(98, 95, 255, .15) 50%, rgba(0, 0, 0, 0) 70%);
    background: radial-gradient(circle, lab(66.9756% -58.27 19.5419 / .3) 0%, lab(48.295% 38.3129 -81.9673 / .15) 50%, rgba(0, 0, 0, 0) 70%);
    animation: .8s ease-in-out infinite qr-glow-pulse-fast;
  }

  @keyframes qr-glow-pulse {
    0%, 100% {
      opacity: .6;
      transform: scale(1);
    }

    50% {
      opacity: 1;
      transform: scale(1.03);
    }
  }

  @keyframes qr-glow-pulse-fast {
    0%, 100% {
      opacity: .7;
      transform: scale(1);
    }

    50% {
      opacity: 1;
      transform: scale(1.08);
    }
  }

  .login-status {
    margin-top: calc(var(--spacing) * 5);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    display: flex;
  }

  .status-dots {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
  }

  .status-dots .dot {
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 2.5);
    background: var(--color-main-700);
    opacity: .2;
    border-radius: 3.40282e38px;
  }

  .status-dots .dot:first-child {
    animation: 2.4s ease-in-out infinite dot-seq-1;
  }

  .status-dots .dot:nth-child(2) {
    animation: 2.4s ease-in-out infinite dot-seq-2;
  }

  .status-dots .dot:nth-child(3) {
    animation: 2.4s ease-in-out infinite dot-seq-3;
  }

  @keyframes dot-seq-1 {
    0% {
      background: var(--color-main-700);
      opacity: .2;
      box-shadow: none;
    }

    12%, 75% {
      background: var(--color-complement-400);
      opacity: 1;
      box-shadow: 0 0 8px rgba(0, 187, 127, .5);
      box-shadow: 0 0 8px lab(66.9756% -58.27 19.5419 / .5);
    }

    90%, 100% {
      background: var(--color-main-700);
      opacity: .2;
      box-shadow: none;
    }
  }

  @keyframes dot-seq-2 {
    0%, 25% {
      background: var(--color-main-700);
      opacity: .2;
      box-shadow: none;
    }

    37%, 75% {
      background: var(--color-complement-400);
      opacity: 1;
      box-shadow: 0 0 8px rgba(0, 187, 127, .5);
      box-shadow: 0 0 8px lab(66.9756% -58.27 19.5419 / .5);
    }

    90%, 100% {
      background: var(--color-main-700);
      opacity: .2;
      box-shadow: none;
    }
  }

  @keyframes dot-seq-3 {
    0%, 50% {
      background: var(--color-main-700);
      opacity: .2;
      box-shadow: none;
    }

    62%, 75% {
      background: var(--color-complement-400);
      opacity: 1;
      box-shadow: 0 0 8px rgba(0, 187, 127, .5);
      box-shadow: 0 0 8px lab(66.9756% -58.27 19.5419 / .5);
    }

    90%, 100% {
      background: var(--color-main-700);
      opacity: .2;
      box-shadow: none;
    }
  }

  .login-expired {
    padding-block: calc(var(--spacing) * 6);
    text-align: center;
    flex-direction: column;
    align-items: center;
    animation: .3s ease-out fade-in;
    display: flex;
  }

  .login-expired .expired-icon {
    margin-bottom: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    background-color: rgba(249, 156, 0, .1);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .login-expired .expired-icon {
      background-color: color-mix(in oklab, var(--color-warning-500) 10%, transparent);
    }
  }

  .login-expired .expired-icon {
    color: var(--color-warning-400);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .login-expired .expired-title {
    margin-bottom: calc(var(--spacing) * 1);
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }

  .login-expired .expired-message {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-400);
  }

  .login-countdown {
    margin-top: calc(var(--spacing) * 2);
    text-align: center;
  }

  .countdown-text {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-400);
    transition: color .3s;
  }

  .countdown-warning {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-amber-400);
  }

  .login-cta {
    margin-top: calc(var(--spacing) * 5);
    border-top-style: var(--tw-border-style);
    border-color: rgba(39, 39, 42, .5);
    border-top-width: 1px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .login-cta {
      border-color: color-mix(in oklab, var(--color-main-800) 50%, transparent);
    }
  }

  .login-cta {
    padding-top: calc(var(--spacing) * 4);
    text-align: center;
  }

  .cta-label {
    margin-bottom: calc(var(--spacing) * 2);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-main-500);
    text-transform: uppercase;
    font-size: 10px;
  }

  .cta-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-300);
  }

  .wallet-download-links {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
  }

  .wallet-store-link {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  @media (hover: hover) {
    .wallet-store-link:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  @media (hover: hover) {
    .wallet-store-link:hover {
      opacity: .9;
    }
  }

  .wallet-store-link:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .store-badge {
    border-radius: var(--radius-md);
    width: auto;
    height: 32px;
  }

  .wallet-direct-download {
    margin-top: calc(var(--spacing) * 2);
    text-align: center;
  }

  .wallet-direct-download a {
    color: var(--color-main-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    font-size: 10px;
  }

  @media (hover: hover) {
    .wallet-direct-download a:hover {
      color: var(--color-main-300);
    }
  }

  .wallet-direct-download a {
    text-underline-offset: 2px;
    text-decoration-line: underline;
  }

  .login-footer {
    margin-top: calc(var(--spacing) * 4);
    text-align: center;
    color: var(--color-main-600);
    font-size: 10px;
  }

  .login-footer a {
    color: var(--color-main-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  @media (hover: hover) {
    .login-footer a:hover {
      color: var(--color-main-300);
    }
  }

  .login-success {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    animation: success-enter .5s var(--ease-spring) forwards;
  }

  .login-success .success-icon {
    margin-bottom: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 14);
    width: calc(var(--spacing) * 14);
    animation: success-icon-pop .6s var(--ease-spring) .1s forwards;
    background: linear-gradient(135deg, rgba(0, 187, 127, .2) 0%, rgba(0, 187, 127, .1) 100%);
    background: linear-gradient(135deg, lab(66.9756% -58.27 19.5419 / .2) 0%, lab(66.9756% -58.27 19.5419 / .1) 100%);
    border: 2px solid rgba(0, 187, 127, .3);
    border: 2px solid lab(66.9756% -58.27 19.5419 / .3);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    transform: scale(0);
  }

  .login-success .success-icon svg {
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    color: var(--color-green-400);
    stroke-dasharray: 50;
    stroke-dashoffset: 50px;
    animation: .4s ease-out .3s forwards checkmark-draw;
  }

  .login-success .success-title {
    margin-bottom: calc(var(--spacing) * 1);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    opacity: 0;
    animation: .4s ease-out .2s forwards fade-up;
  }

  .login-success .success-message {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-400);
    opacity: 0;
    animation: .4s ease-out .3s forwards fade-up;
  }

  @keyframes success-enter {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes success-icon-pop {
    0% {
      transform: scale(0);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes checkmark-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .login-error {
    padding-block: calc(var(--spacing) * 6);
    text-align: center;
    flex-direction: column;
    align-items: center;
    animation: .4s ease-out shake;
    display: flex;
  }

  .login-error .error-icon {
    margin-bottom: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    background-color: rgba(251, 44, 54, .1);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .login-error .error-icon {
      background-color: color-mix(in oklab, var(--color-danger-500) 10%, transparent);
    }
  }

  .login-error .error-icon {
    color: var(--color-danger-400);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    border: 2px solid rgba(251, 44, 54, .2);
    border: 2px solid lab(55.4814% 75.0732 48.8528 / .2);
  }

  .login-error .error-title {
    margin-bottom: calc(var(--spacing) * 1);
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
  }

  .login-error .error-message {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 4);
    max-width: var(--container-xs);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-400);
  }

  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }

    20% {
      transform: translateX(-8px);
    }

    40% {
      transform: translateX(8px);
    }

    60% {
      transform: translateX(-4px);
    }

    80% {
      transform: translateX(4px);
    }
  }

  .login-tabs {
    margin-bottom: calc(var(--spacing) * 5);
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    background-color: rgba(24, 24, 27, .5);
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .login-tabs {
      background-color: color-mix(in oklab, var(--color-main-900) 50%, transparent);
    }
  }

  .login-tabs {
    padding: calc(var(--spacing) * 1);
    border: 1px solid rgba(255, 255, 255, .06);
    border: 1px solid lab(100% 0 0 / .06);
  }

  .login-tab {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-main-400);
    border-radius: var(--radius-md);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    flex: 1;
    transition-duration: .2s;
  }

  .login-tab:hover:not(.active) {
    color: var(--color-main-300);
    background: rgba(255, 255, 255, .03);
    background: lab(100% 0 0 / .03);
  }

  .login-tab.active {
    color: var(--color-white);
    background: rgba(255, 255, 255, .08);
    background: lab(100% 0 0 / .08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 2px lab(0% 0 0 / .2);
  }

  .password-login-form {
    padding-block: calc(var(--spacing) * 2);
  }

  .password-form-fields {
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex;
  }

  .password-input {
    width: 100%;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
  }

  .password-input::placeholder {
    color: var(--color-main-500);
  }

  .password-input {
    border-radius: var(--radius-lg);
    --tw-outline-style: none;
    background: rgba(255, 255, 255, .04);
    background: lab(100% 0 0 / .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border: 1px solid lab(100% 0 0 / .08);
    outline-style: none;
    transition: border-color .15s, box-shadow .15s;
  }

  .password-input:focus {
    border-color: rgba(98, 95, 255, .4);
    border-color: lab(48.295% 38.3129 -81.9673 / .4);
    box-shadow: 0 0 0 2px rgba(98, 95, 255, .1);
    box-shadow: 0 0 0 2px lab(48.295% 38.3129 -81.9673 / .1);
  }

  .password-input:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .password-submit-btn {
    margin-top: calc(var(--spacing) * 1);
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    background: rgba(98, 95, 255, .3);
    background: lab(48.295% 38.3129 -81.9673 / .3);
    border: 1px solid rgba(98, 95, 255, .4);
    border: 1px solid lab(48.295% 38.3129 -81.9673 / .4);
    transition-duration: .2s;
  }

  .password-submit-btn:hover:not(:disabled) {
    background: rgba(98, 95, 255, .4);
    background: lab(48.295% 38.3129 -81.9673 / .4);
  }

  .password-submit-btn:active:not(:disabled) {
    transform: scale(.98);
  }

  .password-submit-btn:disabled {
    cursor: not-allowed;
    opacity: .4;
  }

  .password-error {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-danger-400);
  }

  .password-toggle-mode {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-500);
    cursor: pointer;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    text-align: center;
    background: none;
    border: none;
    outline: none;
    width: 100%;
    transition-duration: .2s;
  }

  .password-toggle-mode:hover {
    color: var(--color-main-300);
  }

  .schema-form {
    gap: calc(var(--spacing) * 6);
    flex-direction: column;
    display: flex;
  }

  .schema-form-fields {
    gap: calc(var(--spacing) * 5);
    flex-direction: column;
    display: flex;
  }

  .schema-form-field {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    display: flex;
  }

  .schema-form-field[data-field-type="Code"] textarea {
    border-color: var(--color-main-700);
    background-color: var(--color-main-950);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .schema-form-field[data-field-type="Json"] textarea {
    border-color: var(--color-main-700);
    background-color: var(--color-main-950);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .schema-form-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-main-200);
    align-items: center;
    gap: calc(var(--spacing) * 1);
    display: flex;
  }

  .schema-form-label .required {
    color: var(--color-danger-400);
  }

  .schema-form-hint {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-main-500);
  }

  .schema-form-actions {
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-main-800);
    display: flex;
  }

  .element-type-grid {
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    display: grid;
  }

  .element-type-card {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 4);
    background-color: rgba(24, 24, 27, .5);
    flex-direction: column;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .element-type-card {
      background-color: color-mix(in oklab, var(--color-main-900) 50%, transparent);
    }
  }

  @media (hover: hover) {
    .element-type-card:hover {
      background-color: rgba(39, 39, 42, .5);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .element-type-card:hover {
        background-color: color-mix(in oklab, var(--color-main-800) 50%, transparent);
      }
    }
  }

  .element-type-card {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-800);
  }

  @media (hover: hover) {
    .element-type-card:hover {
      border-color: rgba(79, 57, 246, .3);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .element-type-card:hover {
        border-color: color-mix(in oklab, var(--color-accent-600) 30%, transparent);
      }
    }
  }

  .element-type-card {
    cursor: pointer;
    border-radius: var(--radius-xl);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .element-type-card:hover {
    --tw-translate-y: calc(var(--spacing) * -.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 4px 6px -4px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: rgba(0, 0, 0, .2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .element-type-card:hover {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .element-type-card.selected {
    border-color: var(--color-accent-500);
    background-color: rgba(49, 44, 133, .3);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .element-type-card.selected {
      background-color: color-mix(in oklab, var(--color-accent-900) 30%, transparent);
    }
  }

  .element-type-card .element-type-symbol {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .element-type-card .element-type-name {
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-main-200);
  }

  .element-type-card .element-type-description {
    -webkit-line-clamp: 2;
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-500);
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .element-type-palette {
    background-color: rgba(24, 24, 27, .8);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .element-type-palette {
      background-color: color-mix(in oklab, var(--color-main-900) 80%, transparent);
    }
  }

  .element-type-palette {
    --tw-backdrop-blur: blur(var(--blur-xl));
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-800);
    max-height: calc(var(--spacing) * 96);
    padding: calc(var(--spacing) * 4);
    overflow-y: auto;
  }

  .element-type-palette .palette-header {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-main-300);
  }

  .element-type-palette .palette-categories {
    gap: calc(var(--spacing) * 4);
    flex-direction: column;
    display: flex;
  }

  .element-type-palette .palette-category .category-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-main-500);
    text-transform: uppercase;
  }

  .element-type-palette .palette-category .category-types {
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  @media (width >= 40rem) {
    .element-type-palette .palette-category .category-types {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .element-type-palette .palette-type-btn {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    background-color: var(--color-main-850);
    display: flex;
  }

  @media (hover: hover) {
    .element-type-palette .palette-type-btn:hover {
      background-color: var(--color-main-800);
    }
  }

  .element-type-palette .palette-type-btn {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-main-700);
  }

  @media (hover: hover) {
    .element-type-palette .palette-type-btn:hover {
      border-color: var(--color-main-600);
    }
  }

  .element-type-palette .palette-type-btn {
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .element-type-palette .palette-type-btn .type-icon {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .element-type-palette .palette-type-btn .type-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-main-200);
  }

  .element-type-palette .palette-type-btn:hover {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgba(98, 95, 255, .3);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .element-type-palette .palette-type-btn:hover {
      --tw-ring-color: color-mix(in oklab, var(--color-accent-500) 30%, transparent);
    }
  }

  .element-type-palette .palette-type-btn.selected {
    border-color: var(--color-accent-500);
    background-color: rgba(49, 44, 133, .4);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .element-type-palette .palette-type-btn.selected {
      background-color: color-mix(in oklab, var(--color-accent-900) 40%, transparent);
    }
  }

  .element-type-skeleton {
    animation: var(--animate-pulse);
  }

  .element-type-skeleton .skeleton-symbol {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    border-radius: var(--radius-lg);
    background-color: var(--color-main-800);
  }

  .element-type-skeleton .skeleton-name {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 20);
    background-color: var(--color-main-800);
    border-radius: .25rem;
  }

  .element-type-skeleton .skeleton-desc {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 24);
    background-color: var(--color-main-850);
    border-radius: .25rem;
  }

  .canvas-skeleton {
    inset: calc(var(--spacing) * 0);
    position: fixed;
    overflow: hidden;
  }

  .canvas-skeleton-canvas {
    inset: calc(var(--spacing) * 0);
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .canvas-loading-message {
    z-index: 50;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    background-color: color-mix(in oklab, var(--color-main-900) 80%, transparent);
    --tw-backdrop-blur: blur(var(--blur-sm));
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in oklab, var(--color-main-700) 30%, transparent);
    pointer-events: none;
    animation: .3s ease-out fade-in;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .canvas-loading-text {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-main-300);
  }

  .collaborator-cursor.is-ai .cursor-label {
    border: 1px solid rgba(59, 130, 246, .3);
  }

  .collaborator-cursor.is-generating svg.ai-cursor-shimmer {
    animation: 1.5s ease-in-out infinite ai-generating-shimmer;
  }

  @keyframes ai-generating-shimmer {
    0%, 100% {
      opacity: 1;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)) drop-shadow(0 0 6px rgba(59, 130, 246, .4));
    }

    50% {
      opacity: .7;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)) drop-shadow(0 0 12px rgba(245, 158, 11, .6));
    }
  }

  .cursor-status-dot {
    animation: 2s ease-in-out infinite cursor-status-pulse;
  }

  @keyframes cursor-status-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: .6;
      transform: scale(.85);
    }
  }
}

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-full {
    top: 100%;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-full {
    right: 100%;
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-full {
    bottom: 100%;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-0\.5 {
    left: calc(var(--spacing) * .5);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-5 {
    left: calc(var(--spacing) * 5);
  }

  .left-full {
    left: 100%;
  }

  .isolate {
    isolation: isolate;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .z-\[9998\] {
    z-index: 9998;
  }

  .z-\[9999\] {
    z-index: 9999;
  }

  .container {
    width: 100%;
  }

  @media (width >= 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (width >= 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (width >= 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (width >= 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (width >= 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .container\! {
    width: 100% !important;
  }

  @media (width >= 40rem) {
    .container\! {
      max-width: 40rem !important;
    }
  }

  @media (width >= 48rem) {
    .container\! {
      max-width: 48rem !important;
    }
  }

  @media (width >= 64rem) {
    .container\! {
      max-width: 64rem !important;
    }
  }

  @media (width >= 80rem) {
    .container\! {
      max-width: 80rem !important;
    }
  }

  @media (width >= 96rem) {
    .container\! {
      max-width: 96rem !important;
    }
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-full {
    width: 100%;
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-fade-in {
    animation: var(--animate-fade-in);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .resize-y {
    resize: vertical;
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-\[\#4ade80\]\/30 {
    border-color: rgba(74, 222, 128, .3);
    border-color: lab(79.1551% -56.1996 34.1718 / .3);
  }

  .border-amber-200 {
    border-color: var(--color-amber-200);
  }

  .border-amber-500\/20 {
    border-color: rgba(249, 156, 0, .2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/20 {
      border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .border-amber-500\/50 {
    border-color: rgba(249, 156, 0, .5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/50 {
      border-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
    }
  }

  .border-blue-200 {
    border-color: var(--color-blue-200);
  }

  .border-current {
    border-color: currentColor;
  }

  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }

  .border-main-700 {
    border-color: var(--color-main-700);
  }

  .border-moon-600 {
    border-color: var(--color-moon-600);
  }

  .border-moon-700 {
    border-color: var(--color-moon-700);
  }

  .border-moon-800 {
    border-color: var(--color-moon-800);
  }

  .border-neutral-700 {
    border-color: var(--color-neutral-700);
  }

  .border-neutral-700\/50 {
    border-color: rgba(64, 64, 64, .5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-neutral-700\/50 {
      border-color: color-mix(in oklab, var(--color-neutral-700) 50%, transparent);
    }
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-500\/30 {
    border-color: rgba(251, 44, 54, .3);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/30 {
      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }

  .border-red-800 {
    border-color: var(--color-red-800);
  }

  .border-rose-200 {
    border-color: var(--color-rose-200);
  }

  .border-slate-200 {
    border-color: var(--color-slate-200);
  }

  .border-white\/10 {
    border-color: rgba(255, 255, 255, .1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-zinc-800 {
    border-color: var(--color-zinc-800);
  }

  .border-t-transparent {
    border-top-color: rgba(0, 0, 0, 0);
  }

  .bg-\[\#1e1e1e\]\/90 {
    background-color: rgba(30, 30, 30, .9);
    background-color: lab(11.2636% 0 .00000298023 / .9);
  }

  .bg-\[\#1e1e1e\]\/95 {
    background-color: rgba(30, 30, 30, .95);
    background-color: lab(11.2636% 0 .00000298023 / .95);
  }

  .bg-\[\#4ade80\]\/10 {
    background-color: rgba(74, 222, 128, .1);
    background-color: lab(79.1551% -56.1996 34.1718 / .1);
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-400 {
    background-color: var(--color-amber-400);
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-amber-500\/5 {
    background-color: rgba(249, 156, 0, .05);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/5 {
      background-color: color-mix(in oklab, var(--color-amber-500) 5%, transparent);
    }
  }

  .bg-amber-500\/10 {
    background-color: rgba(249, 156, 0, .1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/10 {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .bg-black\/20 {
    background-color: rgba(0, 0, 0, .2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: rgba(0, 0, 0, .5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: rgba(0, 0, 0, .6);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-500\/50 {
    background-color: rgba(48, 128, 255, .5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/50 {
      background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
    }
  }

  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }

  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-main-850 {
    background-color: var(--color-main-850);
  }

  .bg-moon-700 {
    background-color: var(--color-moon-700);
  }

  .bg-moon-700\/50 {
    background-color: rgba(63, 63, 70, .5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-moon-700\/50 {
      background-color: color-mix(in oklab, var(--color-moon-700) 50%, transparent);
    }
  }

  .bg-moon-800 {
    background-color: var(--color-moon-800);
  }

  .bg-neutral-600 {
    background-color: var(--color-neutral-600);
  }

  .bg-neutral-700 {
    background-color: var(--color-neutral-700);
  }

  .bg-neutral-800 {
    background-color: var(--color-neutral-800);
  }

  .bg-neutral-800\/50 {
    background-color: rgba(38, 38, 38, .5);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-neutral-800\/50 {
      background-color: color-mix(in oklab, var(--color-neutral-800) 50%, transparent);
    }
  }

  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }

  .bg-neutral-950 {
    background-color: var(--color-neutral-950);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-500\/10 {
    background-color: rgba(251, 44, 54, .1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/10 {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }

  .bg-red-500\/20 {
    background-color: rgba(251, 44, 54, .2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/20 {
      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .bg-red-900\/20 {
    background-color: rgba(130, 24, 26, .2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-900\/20 {
      background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
    }
  }

  .bg-rose-50 {
    background-color: var(--color-rose-50);
  }

  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }

  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/10 {
    background-color: rgba(255, 255, 255, .1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-zinc-900 {
    background-color: var(--color-zinc-900);
  }

  .bg-zinc-950 {
    background-color: var(--color-zinc-950);
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-indigo-500 {
    --tw-gradient-from: var(--color-indigo-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-purple-600 {
    --tw-gradient-to: var(--color-purple-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .font-display {
    font-family: var(--font-display);
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-\[\#4ade80\] {
    color: #4ade80;
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-blue-400 {
    color: var(--color-blue-400);
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-emerald-500 {
    color: var(--color-emerald-500);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-emerald-800 {
    color: var(--color-emerald-800);
  }

  .text-green-400 {
    color: var(--color-green-400);
  }

  .text-indigo-600 {
    color: var(--color-indigo-600);
  }

  .text-main-100 {
    color: var(--color-main-100);
  }

  .text-main-400 {
    color: var(--color-main-400);
  }

  .text-main-500 {
    color: var(--color-main-500);
  }

  .text-main-700 {
    color: var(--color-main-700);
  }

  .text-moon-100 {
    color: var(--color-moon-100);
  }

  .text-moon-200 {
    color: var(--color-moon-200);
  }

  .text-moon-300 {
    color: var(--color-moon-300);
  }

  .text-moon-400 {
    color: var(--color-moon-400);
  }

  .text-moon-500 {
    color: var(--color-moon-500);
  }

  .text-moon-600 {
    color: var(--color-moon-600);
  }

  .text-neutral-100 {
    color: var(--color-neutral-100);
  }

  .text-neutral-200 {
    color: var(--color-neutral-200);
  }

  .text-neutral-300 {
    color: var(--color-neutral-300);
  }

  .text-neutral-400 {
    color: var(--color-neutral-400);
  }

  .text-neutral-500 {
    color: var(--color-neutral-500);
  }

  .text-neutral-900 {
    color: var(--color-neutral-900);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-rose-700 {
    color: var(--color-rose-700);
  }

  .text-slate-400 {
    color: var(--color-slate-400);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-700 {
    color: var(--color-slate-700);
  }

  .text-slate-900 {
    color: var(--color-slate-900);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-zinc-100 {
    color: var(--color-zinc-100);
  }

  .text-zinc-200 {
    color: var(--color-zinc-200);
  }

  .text-zinc-300 {
    color: var(--color-zinc-300);
  }

  .text-zinc-400 {
    color: var(--color-zinc-400);
  }

  .text-zinc-500 {
    color: var(--color-zinc-500);
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-70 {
    opacity: .7;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgba(0, 0, 0, .25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-card {
    --tw-shadow: 0 4px 32px -4px var(--tw-shadow-color, rgba(250, 250, 250, .15));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @supports (color: lab(0% 0 0)) {
    .shadow-card {
      --tw-shadow: 0 4px 32px -4px var(--tw-shadow-color, lab(98.26% 0 0 / .15));
    }
  }

  .shadow-card-hover {
    --tw-shadow: 0 8px 40px -8px var(--tw-shadow-color, rgba(250, 250, 250, .25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @supports (color: lab(0% 0 0)) {
    .shadow-card-hover {
      --tw-shadow: 0 8px 40px -8px var(--tw-shadow-color, lab(98.26% 0 0 / .25));
    }
  }

  .shadow-glow {
    --tw-shadow: 0 0 20px -5px var(--tw-shadow-color, rgba(250, 250, 250, .3));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @supports (color: lab(0% 0 0)) {
    .shadow-glow {
      --tw-shadow: 0 0 20px -5px var(--tw-shadow-color, lab(98.26% 0 0 / .3));
    }
  }

  .shadow-glow-lg {
    --tw-shadow: 0 0 40px -5px var(--tw-shadow-color, rgba(250, 250, 250, .5));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @supports (color: lab(0% 0 0)) {
    .shadow-glow-lg {
      --tw-shadow: 0 0 40px -5px var(--tw-shadow-color, lab(98.26% 0 0 / .5));
    }
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 4px 6px -4px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 2px 4px -2px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-window {
    --tw-shadow: 0 0 7px 0 var(--tw-shadow-color, rgba(0, 0, 0, .05)), 0 0 14px 0 var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 0 21px 0 var(--tw-shadow-color, rgba(0, 0, 0, .15));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-window-lg {
    --tw-shadow: 0 0 10px 0 var(--tw-shadow-color, rgba(0, 0, 0, .05)), 0 0 30px 0 var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 0 30px 0 var(--tw-shadow-color, rgba(0, 0, 0, .15));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgba(0, 0, 0, .1)), 0 8px 10px -6px var(--tw-shadow-color, rgba(0, 0, 0, .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-blue-500 {
    --tw-ring-color: var(--color-blue-500);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .\!filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-normal {
    transition-behavior: normal;
  }

  .delay-2 {
    transition-delay: 2ms;
  }

  .delay-200 {
    transition-delay: .2s;
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .ease-circ {
    --tw-ease: var(--ease-circ);
    transition-timing-function: var(--ease-circ);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .ease-spring {
    --tw-ease: var(--ease-spring);
    transition-timing-function: var(--ease-spring);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .group-hover\:text-neutral-300:is(:where(.group):hover *) {
      color: var(--color-neutral-300);
    }
  }

  @media (hover: hover) {
    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .hover\:border-moon-500:hover {
      border-color: var(--color-moon-500);
    }
  }

  @media (hover: hover) {
    .hover\:border-neutral-600:hover {
      border-color: var(--color-neutral-600);
    }
  }

  @media (hover: hover) {
    .hover\:\!bg-red-500\/20:hover {
      background-color: rgba(251, 44, 54, .2) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\!bg-red-500\/20:hover {
        background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent) !important;
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[\#4ade80\]\/20:hover {
      background-color: rgba(74, 222, 128, .2);
      background-color: lab(79.1551% -56.1996 34.1718 / .2);
    }
  }

  @media (hover: hover) {
    .hover\:bg-amber-400:hover {
      background-color: var(--color-amber-400);
    }
  }

  @media (hover: hover) {
    .hover\:bg-blue-500\/90:hover {
      background-color: rgba(48, 128, 255, .9);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-blue-500\/90:hover {
        background-color: color-mix(in oklab, var(--color-blue-500) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-moon-700:hover {
      background-color: var(--color-moon-700);
    }
  }

  @media (hover: hover) {
    .hover\:bg-moon-800\/50:hover {
      background-color: rgba(39, 39, 42, .5);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-moon-800\/50:hover {
        background-color: color-mix(in oklab, var(--color-moon-800) 50%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-red-500\/10:hover {
      background-color: rgba(251, 44, 54, .1);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:\!text-red-400:hover {
      color: var(--color-red-400) !important;
    }
  }

  @media (hover: hover) {
    .hover\:text-neutral-200:hover {
      color: var(--color-neutral-200);
    }
  }

  @media (hover: hover) {
    .hover\:text-slate-700:hover {
      color: var(--color-slate-700);
    }
  }

  @media (hover: hover) {
    .hover\:text-white:hover {
      color: var(--color-white);
    }
  }

  @media (hover: hover) {
    .hover\:text-zinc-300:hover {
      color: var(--color-zinc-300);
    }
  }

  @media (hover: hover) {
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }

  .focus\:border-accent-500:focus {
    border-color: var(--color-accent-500);
  }

  .focus\:border-transparent:focus {
    border-color: rgba(0, 0, 0, 0);
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-accent-500:focus {
    --tw-ring-color: var(--color-accent-500);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-amber-800 {
      border-color: var(--color-amber-800);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-blue-800 {
      border-color: var(--color-blue-800);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-emerald-800 {
      border-color: var(--color-emerald-800);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-red-800 {
      border-color: var(--color-red-800);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-rose-900 {
      border-color: var(--color-rose-900);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-slate-700 {
      border-color: var(--color-slate-700);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-amber-900\/20 {
      background-color: rgba(123, 51, 6, .2);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-amber-900\/20 {
        background-color: color-mix(in oklab, var(--color-amber-900) 20%, transparent);
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-blue-900\/20 {
      background-color: rgba(28, 57, 142, .2);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-blue-900\/20 {
        background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-emerald-900\/20 {
      background-color: rgba(0, 78, 59, .2);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-emerald-900\/20 {
        background-color: color-mix(in oklab, var(--color-emerald-900) 20%, transparent);
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-emerald-900\/30 {
      background-color: rgba(0, 78, 59, .3);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-emerald-900\/30 {
        background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-red-900\/20 {
      background-color: rgba(130, 24, 26, .2);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-red-900\/20 {
        background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-rose-950\/40 {
      background-color: rgba(77, 2, 24, .4);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-rose-950\/40 {
        background-color: color-mix(in oklab, var(--color-rose-950) 40%, transparent);
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-slate-800 {
      background-color: var(--color-slate-800);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-slate-800\/50 {
      background-color: rgba(29, 41, 61, .5);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-slate-800\/50 {
        background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-slate-900 {
      background-color: var(--color-slate-900);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-amber-200 {
      color: var(--color-amber-200);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-amber-300 {
      color: var(--color-amber-300);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-amber-400 {
      color: var(--color-amber-400);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-blue-200 {
      color: var(--color-blue-200);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-blue-300 {
      color: var(--color-blue-300);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-emerald-200 {
      color: var(--color-emerald-200);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-emerald-300 {
      color: var(--color-emerald-300);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-emerald-400 {
      color: var(--color-emerald-400);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-indigo-400 {
      color: var(--color-indigo-400);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-main-300 {
      color: var(--color-main-300);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-red-400 {
      color: var(--color-red-400);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-rose-200 {
      color: var(--color-rose-200);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-slate-300 {
      color: var(--color-slate-300);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-slate-400 {
      color: var(--color-slate-400);
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:text-white {
      color: var(--color-white);
    }
  }

  @media (prefers-color-scheme: dark) {
    @media (hover: hover) {
      .dark\:hover\:text-slate-300:hover {
        color: var(--color-slate-300);
      }
    }
  }

  .text-primary {
    color: var(--text-primary);
  }

  .text-secondary {
    color: var(--text-secondary);
  }

  .text-muted {
    color: var(--text-muted);
  }

  .bg-card {
    background: var(--bg-card);
  }

  .glass {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
    --tw-backdrop-blur: blur(var(--blur-xl));
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .skeleton {
    animation: var(--animate-pulse);
    background-color: var(--color-main-800);
    border-radius: .25rem;
  }

  .focus-ring:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-ring:focus {
    --tw-ring-color: var(--color-moon-500);
  }

  .focus-ring:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-ring:focus {
    --tw-ring-offset-color: var(--color-main-900);
  }

  .focus-ring:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

@font-face {
  font-family: ClashDisplay;
  src: url("/fonts/ClashDisplay-Regular.woff2") format("woff2"), url("/fonts/ClashDisplay-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: ClashDisplay;
  src: url("/fonts/ClashDisplay-Regular.woff2") format("woff2"), url("/fonts/ClashDisplay-Regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Archivo;
  src: url("/fonts/Archivo-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Space Mono;
  src: url("/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Space Mono;
  src: url("/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Material Symbols Outlined;
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/fonts/MaterialSymbolsOutlined.woff2") format("woff2");
}

.material-symbols-outlined {
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  direction: ltr;
  font-family: Material Symbols Outlined;
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
}

:root {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --color-primary: var(--color-main-200);
  --color-primary-hover: var(--color-main-100);
  --bg-primary: #000;
  --bg-gradient-start: #0f172a;
  --bg-gradient-end: #000;
  --bg-card: rgba(255, 255, 255, .03);
  --bg-card-hover: rgba(255, 255, 255, .05);
  --text-primary: var(--color-main-50);
  --text-secondary: var(--color-main-300);
  --text-muted: var(--color-main-400);
  --border-color: rgba(255, 255, 255, .1);
  --border-color-hover: rgba(255, 255, 255, .2);
  --glass-bg: linear-gradient(135deg, rgba(250, 250, 250, .06) 0%, rgba(250, 250, 250, .03) 50%, rgba(250, 250, 250, .02) 100%);
  --glass-border: rgba(250, 250, 250, .12);
  --glass-shadow: 0 4px 32px -4px rgba(250, 250, 250, .15), inset 0 1px 0 0 rgba(250, 250, 250, .08);
}

@supports (color: lab(0% 0 0)) {
  :root {
    --glass-bg: linear-gradient(135deg, lab(98.26% 0 0 / .06) 0%, lab(98.26% 0 0 / .03) 50%, lab(98.26% 0 0 / .02) 100%);
    --glass-border: lab(98.26% 0 0 / .12);
    --glass-shadow: 0 4px 32px -4px lab(98.26% 0 0 / .15), inset 0 1px 0 0 lab(98.26% 0 0 / .08);
  }
}

@property --border-gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes border-rotate {
  100% {
    --border-gradient-angle: 360deg;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 rgba(0, 0, 0, 0);
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}