/* ==UserStyle==
@name coolify-tweaks
@version 3.7.0
@namespace https://github.com/techwithanirudh
@author Anirudh Sriram <hello@techwithanirudh.com> (https://github.com/techwithanirudh)
@homepageURL https://github.com/techwithanirudh/coolify-tweaks#readme
@updateURL https://coolify-tweaks-api.techwithanirudh.com/release/latest/?asset=main.user.css
@description Opinionated tweaks for Coolify: better spacing, layout, and color polish.
@license MIT
==/UserStyle== */
@charset "UTF-8";
@-moz-document regexp("https?://app\.coolify\.io/.*"), regexp("https?://coolify\.local:8000/.*")
{
  @import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap");

  /* ==UI-THEME-VARS:START== */
  :root {
    --background: oklch(0.994 0 0);
    --foreground: oklch(0 0 0);
    --card: oklch(0.994 0 0);
    --card-foreground: oklch(0 0 0);
    --popover: oklch(0.97 0.0029 264.542);
    --popover-foreground: oklch(0 0 0);
    --primary: oklch(0.5393 0.2713 286.7462);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.954 0.0063 255.4755);
    --secondary-foreground: oklch(0.1344 0 0);
    --muted: oklch(0.9702 0 0);
    --muted-foreground: oklch(0.4386 0 0);
    --accent: oklch(0.9487 0.0058 264.5319);
    --accent-foreground: oklch(0 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.93 0.0094 286.2156);
    --input: oklch(0.9401 0 0);
    --ring: oklch(0 0 0);
    --sidebar: oklch(0.97 0.0029 264.542);
    --sidebar-foreground: oklch(0 0 0);
    --sidebar-primary: oklch(0 0 0);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: oklch(0.9401 0 0);
    --sidebar-accent-foreground: oklch(0 0 0);
    --sidebar-border: oklch(0.9401 0 0);
    --sidebar-ring: oklch(0 0 0);
    --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
    --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
    --shadow-sm:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
    --shadow:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
    --shadow-md:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
    --shadow-lg:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
    --shadow-xl:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
    --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.4);
    --tracking-normal: -0.025em;
    --spacing: 0.27rem;
    --radius: 0.875rem;
  }
  .dark {
    --background: oklch(0.2329 0.014 304.7344);
    --foreground: oklch(0.9938 0.0013 106.4231);
    --card: oklch(0.323 0.0129 305.0055);
    --card-foreground: oklch(0.9872 0.0034 325.6024);
    --popover: oklch(0.2172 0.0117 293.0436);
    --popover-foreground: oklch(0.9551 0 0);
    --primary: oklch(0.4039 0.1475 287.6846);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.294 0.013 272.9312);
    --secondary-foreground: oklch(0.9551 0 0);
    --muted: oklch(0.294 0.013 272.9312);
    --muted-foreground: oklch(0.7058 0 0);
    --accent: oklch(0.284 0.0091 294.9832);
    --accent-foreground: oklch(0.852 0.0027 286.3415);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.3343 0.0111 308.0912);
    --input: oklch(0.3343 0.0111 308.0912);
    --ring: oklch(0.6132 0.2294 291.7437);
    --sidebar: oklch(0.2172 0.0117 293.0436);
    --sidebar-foreground: oklch(0.9864 0.0028 308.429);
    --sidebar-primary: oklch(0.284 0.0091 294.9832);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: oklch(0.284 0.0091 294.9832);
    --sidebar-accent-foreground: oklch(0.9842 0.0034 325.6025);
    --sidebar-border: oklch(0.3289 0.0092 268.3843);
    --sidebar-ring: oklch(0.6132 0.2294 291.7437);
    --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
    --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
    --shadow-sm:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
    --shadow:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
    --shadow-md:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
    --shadow-lg:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
    --shadow-xl:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
    --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.4);
  }
  /* ==UI-THEME-VARS:END== */
  :root {
    --success: oklch(0.7459 0.1483 156.4499);
    --warning: oklch(0.7336 0.1758 50.5517);
    --info: oklch(0.5828 0.1809 259.7276);
  }
  .dark {
    --success: oklch(0.8003 0.1821 151.711);
    --warning: oklch(0.7336 0.1758 50.5517);
    --info: oklch(0.6691 0.1569 260.1063);
  }
  :root {
    font-size: 15px;
    /* radius */
    --radius-xs: calc(var(--radius) - 8px);
    --radius-sm: calc(var(--radius) - 6px);
    --radius-md: calc(var(--radius) - 4px);
    --radius-lg: calc(var(--radius) - 2px);
    --radius-xl: var(--radius);
    --radius-2xl: calc(var(--radius) + 4px);
    --radius-3xl: calc(var(--radius) + 8px);
    /* misc */
    --sidebar-width: 260px;
    --blur: 10px;
    --color-base: var(--background);
    --color-coollabs: var(--primary);
    --color-text-primary: var(--foreground);
    --color-error: var(--destructive);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-info: var(--info);
  }
  button,
  a,
  input,
  select,
  textarea {
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
  }
  :root {
    --default-font-family: "Geist", sans-serif;
    --font-mono: "Geist Mono", monospace;
  }
  h1 {
    color: oklch(0 0 0);
    color: var(--foreground);
    font:
      700 2.1rem/1.25 "Geist",
      sans-serif;
  }
  h2 {
    color: oklch(0 0 0);
    color: var(--foreground);
    font:
      700 1.5rem/1.35 "Geist",
      sans-serif;
  }
  h3 {
    color: oklch(0 0 0);
    color: var(--foreground);
    font:
      700 1.25rem/1.35 "Geist",
      sans-serif;
  }
  h4 {
    color: oklch(0 0 0);
    color: var(--foreground);
    font:
      700 1.1rem/1.35 "Geist",
      sans-serif;
  }
  .subtitle {
    color: oklch(0.4386 0 0);
    color: var(--muted-foreground);
    font-size: 0.95rem;
  }
  body,
  html,
  main {
    background: oklch(0.994 0 0);
    background: var(--background);
    color: oklch(0 0 0);
    color: var(--foreground);
  }
  main {
    height: 100svh;
  }
  /* Applies max-width and padding to the main content area. */
  main > div:first-child {
    margin: auto;
    max-width: 1280px;
    padding-block: calc(0.27rem * 18);
    padding-block: calc(var(--spacing) * 18);
  }
  body > div[x-data*="pageWidth"] {
    min-width: 100%;
    max-width: 100%;
  }
  /* Section */
  section > h2 + div,
  section > h3 + div {
    overflow: hidden;
    margin-top: calc(0.27rem * 2.5);
    margin-top: calc(var(--spacing) * 2.5);
    padding: calc(0.27rem * 3) calc(0.27rem * 3.5);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
    border-radius: 0.875rem;
    border-radius: var(--radius-xl);
    /* 14 px */
    background: oklch(0.97 0.0029 264.542);
    background: var(--popover);
  }
  section h3[class="pb-2"] {
    font-size: 1.6rem;
  }
  :is(.flex.gap-2, .flex.items-center.gap-4, .flex.flex-col.gap-4)
    > :is(h1, h2, h3, h4) {
    margin-right: auto;
  }
  /* Cleanup Links */
  a[class*="hover:underline"]:hover {
    color: oklch(0.4386 0 0);
    color: var(--muted-foreground);
    text-decoration: none;
  }
  /* Monaco Editor */
  .monaco-editor {
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  /* Sponsorship Popup Styles */
  [x-show="popups.sponsorship"] {
    padding: calc(0.27rem * 5);
    padding: calc(var(--spacing) * 5);
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
    background: oklch(0.97 0.0029 264.542);
    background: var(--popover);
    box-shadow:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16),
      0px 4px 6px -1px hsl(0 0% 0% / 0.16);
    box-shadow: var(--shadow-lg);
  }
  /* Scrollbars */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: oklch(0.9702 0 0);
    background: var(--muted);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: oklch(0 0 0);
    background: var(--foreground);
  }
  /* Button to add tags to service */
  .add-tag {
    color: oklch(0.4386 0 0);
    color: var(--muted-foreground);
  }
  .add-tag:hover {
    color: oklch(0 0 0);
    color: var(--foreground);
  }
  /* take full width for compressed items, like checkboxes */
  div[class="w-32"] {
    width: 100%;
    min-width: calc(0.27rem * 32);
    min-width: calc(var(--spacing) * 32);
  }
  div[class="w-48"] {
    width: 100%;
    min-width: calc(0.27rem * 48);
    min-width: calc(var(--spacing) * 48);
  }
  div[class*="w-64"] {
    width: 100%;
    min-width: calc(0.27rem * 64);
    min-width: calc(var(--spacing) * 64);
  }
  div[class="w-96"],
  div[class="pt-2 w-96"],
  div[class="w-96 flex flex-col gap-1"],
  div[class="w-96 pb-6"],
  div[class*="md:w-96"] {
    width: 100%;
    min-width: calc(0.27rem * 96);
    min-width: calc(var(--spacing) * 96);
  }
  div[class="w-\[500px\]"] {
    width: 100%;
    min-width: 500px;
  }
  /* center the loader in the deployments section */
  div.flex.items-start.gap-2 > .inline-flex svg {
    height: calc(0.27rem * 9);
    height: calc(var(--spacing) * 9);
  }
  /* button w-auto */
  div.w-auto > button {
    width: -moz-max-content;
    width: max-content;
  }
  /* Misc utilities */
  form,
  div[class*="shadow-lg lg:border-t dark:border-coolgray-300"] {
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
  }
  div[class="flex flex-col gap-4 max-w-2xl"] {
    max-width: none;
  }
  input.dark\:bg-coolgray-100:where(.dark, .dark *) {
    padding: calc(0.27rem * 2.75);
    padding: calc(var(--spacing) * 2.75);
    border-radius: 4px;
    background-color: oklch(0.994 0 0);
    background-color: var(--card);
    transition: background 0.18s;
  }
  /* Style cards for settings */
  div[class*="p-4 border dark:border-coolgray-300"] {
    margin-top: calc(0.27rem * 4);
    margin-top: calc(var(--spacing) * 4);
    padding: calc(0.27rem * 4);
    padding: calc(var(--spacing) * 4);
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
    background: oklch(0.97 0.0029 264.542);
    background: var(--popover);
  }
  .dark\:hover\:bg-coolgray-100:where(.dark, .dark *):hover {
    background: none;
  }
  button.button,
  .button {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid transparent;
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
    background: oklch(0.5393 0.2713 286.7462);
    background: var(--primary);
    color: oklch(1 0 0);
    color: var(--primary-foreground);
    box-shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
    box-shadow: var(--shadow-xs);
  }
  button.button:focus-visible,
  .button:focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button.button:focus-visible,
    .button:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  button.button[aria-invalid="true"],
  .button[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *) button.button[aria-invalid="true"],
  :where(.dark, .dark *) .button[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.button[aria-invalid="true"],
    :where(.dark, .dark *) .button[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  button.button:disabled,
  .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  button.button:hover,
  .button:hover {
    background: color-mix(
      in srgb,
      oklch(0.5393 0.2713 286.7462) 90%,
      transparent
    );
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button.button:hover,
    .button:hover {
      background: color-mix(in srgb, var(--primary) 90%, transparent);
    }
  }
  :where(.dark, .dark *) button.button:hover,
  :where(.dark, .dark *) .button:hover {
    background: color-mix(
      in srgb,
      oklch(0.5393 0.2713 286.7462) 80%,
      oklch(0.9401 0 0)
    );
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.button:hover,
    :where(.dark, .dark *) .button:hover {
      background: color-mix(in srgb, var(--primary) 80%, var(--input));
    }
  }
  button.secondary,
  .secondary {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid transparent;
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
    background: oklch(0.954 0.0063 255.4755);
    background: var(--secondary);
    color: oklch(0.1344 0 0);
    color: var(--secondary-foreground);
    box-shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
    box-shadow: var(--shadow-xs);
  }
  button.secondary:focus-visible,
  .secondary:focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button.secondary:focus-visible,
    .secondary:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  button.secondary[aria-invalid="true"],
  .secondary[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *) button.secondary[aria-invalid="true"],
  :where(.dark, .dark *) .secondary[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.secondary[aria-invalid="true"],
    :where(.dark, .dark *) .secondary[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  button.secondary:disabled,
  .secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  button.secondary:hover,
  .secondary:hover {
    background: color-mix(
      in srgb,
      oklch(0.954 0.0063 255.4755) 80%,
      transparent
    );
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button.secondary:hover,
    .secondary:hover {
      background: color-mix(in srgb, var(--secondary) 80%, transparent);
    }
  }
  :where(.dark, .dark *) button.secondary:hover,
  :where(.dark, .dark *) .secondary:hover {
    background: color-mix(
      in srgb,
      oklch(0.954 0.0063 255.4755) 60%,
      oklch(0.9401 0 0)
    );
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.secondary:hover,
    :where(.dark, .dark *) .secondary:hover {
      background: color-mix(in srgb, var(--secondary) 60%, var(--input));
    }
  }
  button.destructive,
  button[iserror="isError"],
  .destructive {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid transparent;
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
    background: oklch(0.577 0.245 27.325);
    background: var(--destructive);
    color: oklch(1 0 0);
    color: var(--destructive-foreground);
    box-shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
    box-shadow: var(--shadow-xs);
  }
  button.destructive:focus-visible,
  button[iserror="isError"]:focus-visible,
  .destructive:focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button.destructive:focus-visible,
    button[iserror="isError"]:focus-visible,
    .destructive:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  button.destructive[aria-invalid="true"],
  button[iserror="isError"][aria-invalid="true"],
  .destructive[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *) button.destructive[aria-invalid="true"],
  :where(.dark, .dark *) button[iserror="isError"][aria-invalid="true"],
  :where(.dark, .dark *) .destructive[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.destructive[aria-invalid="true"],
    :where(.dark, .dark *) button[iserror="isError"][aria-invalid="true"],
    :where(.dark, .dark *) .destructive[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  button.destructive:disabled,
  button[iserror="isError"]:disabled,
  .destructive:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  button.destructive:hover,
  button[iserror="isError"]:hover,
  .destructive:hover {
    background: color-mix(in srgb, oklch(0.577 0.245 27.325) 90%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button.destructive:hover,
    button[iserror="isError"]:hover,
    .destructive:hover {
      background: color-mix(in srgb, var(--destructive) 90%, transparent);
    }
  }
  :where(.dark, .dark *) button.destructive,
  :where(.dark, .dark *) button[iserror="isError"],
  :where(.dark, .dark *) .destructive {
    background: color-mix(
      in srgb,
      oklch(0.577 0.245 27.325) 60%,
      oklch(0.9401 0 0)
    );
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.destructive,
    :where(.dark, .dark *) button[iserror="isError"],
    :where(.dark, .dark *) .destructive {
      background: color-mix(in srgb, var(--destructive) 60%, var(--input));
    }
  }
  :where(.dark, .dark *) button.destructive:hover,
  :where(.dark, .dark *) button[iserror="isError"]:hover,
  :where(.dark, .dark *) .destructive:hover {
    background: color-mix(
      in srgb,
      oklch(0.577 0.245 27.325) 80%,
      oklch(0.9401 0 0)
    );
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.destructive:hover,
    :where(.dark, .dark *) button[iserror="isError"]:hover,
    :where(.dark, .dark *) .destructive:hover {
      background: color-mix(in srgb, var(--destructive) 80%, var(--input));
    }
  }
  button.outline,
  .outline {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid transparent;
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
    background: oklch(0.994 0 0);
    background: var(--background);
    color: oklch(0 0 0);
    color: var(--foreground);
    border-color: oklch(0.93 0.0094 286.2156);
    border-color: var(--border);
    box-shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
    box-shadow: var(--shadow-xs);
  }
  button.outline:focus-visible,
  .outline:focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button.outline:focus-visible,
    .outline:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  button.outline[aria-invalid="true"],
  .outline[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *) button.outline[aria-invalid="true"],
  :where(.dark, .dark *) .outline[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.outline[aria-invalid="true"],
    :where(.dark, .dark *) .outline[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  button.outline:disabled,
  .outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  button.outline:hover,
  .outline:hover {
    background: oklch(0.9487 0.0058 264.5319);
    background: var(--accent);
    color: oklch(0 0 0);
    color: var(--accent-foreground);
  }
  :where(.dark, .dark *) button.outline,
  :where(.dark, .dark *) .outline {
    background: color-mix(in srgb, oklch(0.9401 0 0) 30%, transparent);
    border-color: oklch(0.9401 0 0);
    border-color: var(--input);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.outline,
    :where(.dark, .dark *) .outline {
      background: color-mix(in srgb, var(--input) 30%, transparent);
    }
  }
  :where(.dark, .dark *) button.outline:hover,
  :where(.dark, .dark *) .outline:hover {
    background: color-mix(in srgb, oklch(0.9401 0 0) 50%, transparent);
    color: oklch(0 0 0);
    color: var(--accent-foreground);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.outline:hover,
    :where(.dark, .dark *) .outline:hover {
      background: color-mix(in srgb, var(--input) 50%, transparent);
    }
  }
  button.ghost,
  .ghost {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid transparent;
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
    background: transparent;
    color: oklch(0 0 0);
    color: var(--foreground);
  }
  button.ghost:focus-visible,
  .ghost:focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button.ghost:focus-visible,
    .ghost:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  button.ghost[aria-invalid="true"],
  .ghost[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *) button.ghost[aria-invalid="true"],
  :where(.dark, .dark *) .ghost[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.ghost[aria-invalid="true"],
    :where(.dark, .dark *) .ghost[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  button.ghost:disabled,
  .ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  button.ghost:hover,
  .ghost:hover {
    background: oklch(0.9487 0.0058 264.5319);
    background: var(--accent);
    color: oklch(0 0 0);
    color: var(--accent-foreground);
  }
  :where(.dark, .dark *) button.ghost:hover,
  :where(.dark, .dark *) .ghost:hover {
    background: color-mix(
      in srgb,
      oklch(0.9487 0.0058 264.5319) 50%,
      transparent
    );
    color: oklch(0 0 0);
    color: var(--accent-foreground);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.ghost:hover,
    :where(.dark, .dark *) .ghost:hover {
      background: color-mix(in srgb, var(--accent) 50%, transparent);
    }
  }
  button.link,
  .link {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid transparent;
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
    background: transparent;
    color: oklch(0.5393 0.2713 286.7462);
    color: var(--primary);
    text-underline-offset: 4px;
    text-decoration: none;
  }
  button.link:focus-visible,
  .link:focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button.link:focus-visible,
    .link:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  button.link[aria-invalid="true"],
  .link[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *) button.link[aria-invalid="true"],
  :where(.dark, .dark *) .link[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) button.link[aria-invalid="true"],
    :where(.dark, .dark *) .link[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  button.link:disabled,
  .link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  button.link:hover,
  .link:hover {
    text-decoration: underline;
  }
  input.input,
  input.input-sticky,
  textarea.input,
  select.select {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid oklch(0.9401 0 0);
    border: 1px solid var(--input);
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    background: transparent;
    color: oklch(0 0 0);
    color: var(--foreground);
    box-shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
    box-shadow: var(--shadow-xs);
    transition:
      border-color 0.15s,
      background 0.15s,
      box-shadow 0.15s;
  }
  :where(.dark, .dark *) input.input,
  :where(.dark, .dark *) input.input-sticky,
  :where(.dark, .dark *) textarea.input,
  :where(.dark, .dark *) select.select {
    background: color-mix(in srgb, oklch(0.9401 0 0) 30%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) input.input,
    :where(.dark, .dark *) input.input-sticky,
    :where(.dark, .dark *) textarea.input,
    :where(.dark, .dark *) select.select {
      background: color-mix(in srgb, var(--input) 30%, transparent);
    }
  }
  input.input:hover,
  input.input-sticky:hover,
  textarea.input:hover,
  select.select:hover {
    background: color-mix(
      in srgb,
      oklch(0.954 0.0063 255.4755) 10%,
      transparent
    );
  }

  @supports (color: color-mix(in lch, red, blue)) {
    input.input:hover,
    input.input-sticky:hover,
    textarea.input:hover,
    select.select:hover {
      background: color-mix(in srgb, var(--secondary) 10%, transparent);
    }
  }
  :where(.dark, .dark *) input.input:hover,
  :where(.dark, .dark *) input.input-sticky:hover,
  :where(.dark, .dark *) textarea.input:hover,
  :where(.dark, .dark *) select.select:hover {
    background: color-mix(in srgb, oklch(0.9401 0 0) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) input.input:hover,
    :where(.dark, .dark *) input.input-sticky:hover,
    :where(.dark, .dark *) textarea.input:hover,
    :where(.dark, .dark *) select.select:hover {
      background: color-mix(in srgb, var(--input) 40%, transparent);
    }
  }
  input.input:focus-visible,
  input.input-sticky:focus-visible,
  textarea.input:focus-visible,
  select.select:focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    input.input:focus-visible,
    input.input-sticky:focus-visible,
    textarea.input:focus-visible,
    select.select:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  input.input::-moz-placeholder,
  input.input-sticky::-moz-placeholder,
  textarea.input::-moz-placeholder,
  select.select::-moz-placeholder {
    color: oklch(0.4386 0 0);
    color: var(--muted-foreground);
    opacity: 0.7;
  }
  input.input::placeholder,
  input.input-sticky::placeholder,
  textarea.input::placeholder,
  select.select::placeholder {
    color: oklch(0.4386 0 0);
    color: var(--muted-foreground);
    opacity: 0.7;
  }
  input.input:focus::-moz-placeholder,
  input.input-sticky:focus::-moz-placeholder,
  textarea.input:focus::-moz-placeholder,
  select.select:focus::-moz-placeholder {
    opacity: 0.5;
  }
  input.input:focus::placeholder,
  input.input-sticky:focus::placeholder,
  textarea.input:focus::placeholder,
  select.select:focus::placeholder {
    opacity: 0.5;
  }
  input.input[aria-invalid="true"],
  input.input-sticky[aria-invalid="true"],
  textarea.input[aria-invalid="true"],
  select.select[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *) input.input[aria-invalid="true"],
  :where(.dark, .dark *) input.input-sticky[aria-invalid="true"],
  :where(.dark, .dark *) textarea.input[aria-invalid="true"],
  :where(.dark, .dark *) select.select[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) input.input[aria-invalid="true"],
    :where(.dark, .dark *) input.input-sticky[aria-invalid="true"],
    :where(.dark, .dark *) textarea.input[aria-invalid="true"],
    :where(.dark, .dark *) select.select[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  input.input:disabled,
  input.input-sticky:disabled,
  textarea.input:disabled,
  select.select:disabled {
    pointer-events: all;
    cursor: not-allowed;
    opacity: 0.5;
  }
  input.input::-moz-selection,
  input.input-sticky::-moz-selection,
  textarea.input::-moz-selection,
  select.select::-moz-selection {
    background: oklch(0.5393 0.2713 286.7462);
    background: var(--primary);
    color: oklch(1 0 0);
    color: var(--primary-foreground);
  }
  input.input::selection,
  input.input-sticky::selection,
  textarea.input::selection,
  select.select::selection {
    background: oklch(0.5393 0.2713 286.7462);
    background: var(--primary);
    color: oklch(1 0 0);
    color: var(--primary-foreground);
  }
  input[type="checkbox"],
  input[type="radio"] {
    padding: calc(0.27rem * 2.75);
    padding: calc(var(--spacing) * 2.75);
    border-radius: 4px;
    background-color: oklch(0.9401 0 0);
    background-color: var(--input);
    transition: background-color 0.18s;
  }
  input[type="checkbox"]:focus-visible,
  input[type="radio"]:focus-visible {
    background-color: color-mix(
      in srgb,
      oklch(0.9487 0.0058 264.5319) 80%,
      transparent
    );
  }

  @supports (color: color-mix(in lch, red, blue)) {
    input[type="checkbox"]:focus-visible,
    input[type="radio"]:focus-visible {
      background-color: color-mix(in srgb, var(--accent) 80%, transparent);
    }
  }
  label {
    margin: calc(0.27rem * 1);
    margin: calc(var(--spacing) * 1);
    font-weight: 600;
  }
  select,
  ::picker(select) {
    -moz-appearance: base-select;
    appearance: base-select;
    border: 1px solid oklch(0.9401 0 0);
    border: 1px solid var(--input);
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    background: transparent;
    color: oklch(0 0 0);
    color: var(--foreground);
    transition:
      border-color 0.2s,
      background 0.2s,
      box-shadow 0.2s;
  }
  :where(.dark, .dark *) select,
  :where(.dark, .dark *) ::picker(select) {
    background: color-mix(in srgb, oklch(0.9401 0 0) 30%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) select,
    :where(.dark, .dark *) ::picker(select) {
      background: color-mix(in srgb, var(--input) 30%, transparent);
    }
  }
  select:disabled,
  ::picker(select):disabled {
    border-color: oklch(0.4386 0 0);
    border-color: var(--muted-foreground);
    color: oklch(0.4386 0 0);
    color: var(--muted-foreground);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }
  select:not([disabled]):hover,
  select:not([disabled]):focus,
  ::picker(select):not([disabled]):hover,
  ::picker(select):not([disabled]):focus {
    border-color: oklch(0.9401 0 0);
    border-color: var(--input);
    background: oklch(0.9487 0.0058 264.5319);
    background: var(--accent);
  }
  select::picker-icon,
  ::picker(select)::picker-icon {
    color: oklch(0.4386 0 0);
    color: var(--muted-foreground);
    transition: 0.4s rotate;
    content: "";
    width: calc(0.27rem * 4);
    width: calc(var(--spacing) * 4);
    height: calc(0.27rem * 4.5);
    height: calc(var(--spacing) * 4.5);
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/bold/caret-down-bold.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  select:open::picker-icon,
  ::picker(select):open::picker-icon {
    rotate: 180deg;
  }
  ::picker(select) {
    border: 1px solid oklch(0.93 0.0094 286.2156);
    border: 1px solid var(--border);
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    background: oklch(0.97 0.0029 264.542);
    background: var(--popover);
    top: calc(anchor(bottom) + 4px);
    opacity: 0;
    transition:
      opacity 0.2s ease,
      transform 0.2s cubic-bezier(0, 0, 0.3, 1),
      display 0.2s allow-discrete,
      overlay 0.2s allow-discrete;
  }
  ::picker(select):popover-open {
    opacity: 1;
  }
  @starting-style {
    ::picker(select):popover-open {
      opacity: 0;
    }
  }
  option {
    display: flex;
    justify-content: flex-start;
    padding: calc(0.27rem * 2.5);
    padding: calc(var(--spacing) * 2.5);
    background: oklch(0.97 0.0029 264.542);
    background: var(--popover);
    color: oklch(0 0 0);
    color: var(--popover-foreground);
    transition: 0.4s;
    gap: calc(0.27rem * 5);
    gap: calc(var(--spacing) * 5);
  }
  option:first-of-type {
    border-radius: calc(0.875rem - 4px) calc(0.875rem - 4px) 0 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  option:last-of-type {
    border-radius: 0 0 calc(0.875rem - 4px) calc(0.875rem - 4px);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  option:not(:last-of-type) {
    border-bottom: none;
  }
  option:hover:not(:disabled),
  option:focus:not(:disabled) {
    background: oklch(0.9487 0.0058 264.5319);
    background: var(--accent);
    color: oklch(0 0 0);
    color: var(--accent-foreground);
  }
  option .icon {
    font-size: 1.6rem;
    text-box: trim-both cap alphabetic;
  }
  option selectedcontent .icon {
    display: none;
  }
  option:checked {
    font-weight: bold;
  }
  option::checkmark {
    order: 1;
    margin-left: auto;
    content: "";
    width: calc(0.27rem * 4);
    width: calc(var(--spacing) * 4);
    height: calc(0.27rem * 4);
    height: calc(var(--spacing) * 4);
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/regular/check.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  option:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }
  table {
    /* base container */
    min-width: 100%;
    overflow: hidden;
    margin-top: calc(0.27rem * 4);
    margin-top: calc(var(--spacing) * 4);
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    background: oklch(0.994 0 0);
    background: var(--card);
    /* row separators */
    /* header */
    /* body */
  }
  table > :not(:last-child) {
    border-bottom: 1px solid oklch(0.93 0.0094 286.2156);
    border-bottom: 1px solid var(--border);
  }
  table thead {
    background: oklch(0.994 0 0);
    background: var(--card);
    text-transform: uppercase;
  }
  table thead tr th {
    padding-block: calc(0.27rem * 3.5);
    padding-block: calc(var(--spacing) * 3.5);
    padding-inline: calc(0.27rem * 3);
    padding-inline: calc(var(--spacing) * 3);
    text-align: left;
    font-weight: var(--font-weight-medium);
    color: oklch(0 0 0);
    color: var(--foreground);
    /* extra left padding on first col */
  }
  table thead tr th:first-child {
    padding-left: calc(0.27rem * 4);
    padding-left: calc(var(--spacing) * 4);
  }
  @media (min-width: 40rem) {
    table thead tr th:first-child {
      padding-left: calc(0.27rem * 6);
      padding-left: calc(var(--spacing) * 6);
    }
  }
  table tbody > :not(:last-child) {
    border-bottom: 1px solid oklch(0.93 0.0094 286.2156);
    border-bottom: 1px solid var(--border);
  }
  table tbody tr {
    /* hover effect */
  }
  table tbody tr td {
    padding-block: calc(0.27rem * 4);
    padding-block: calc(var(--spacing) * 4);
    padding-inline: calc(0.27rem * 3);
    padding-inline: calc(var(--spacing) * 3);
    white-space: nowrap;
    /* bold and indented first col */
  }
  table tbody tr td:first-child {
    padding-left: calc(0.27rem * 4);
    padding-left: calc(var(--spacing) * 4);
    font-weight: var(--font-weight-bold);
  }
  @media (min-width: 40rem) {
    table tbody tr td:first-child {
      padding-left: calc(0.27rem * 6);
      padding-left: calc(var(--spacing) * 6);
    }
  }
  @media (hover: hover) {
    table tbody tr:hover {
      background: color-mix(in srgb, oklch(0.9702 0 0) 50%, transparent);
    }

    @supports (color: color-mix(in lch, red, blue)) {
      table tbody tr:hover {
        background: color-mix(in srgb, var(--muted) 50%, transparent);
      }
    }
  }
  /* dark‑mode via class */
  :where(.dark, .dark *) table > :not(:last-child) {
    border-color: oklch(0.93 0.0094 286.2156);
    border-color: var(--border);
  }
  :where(.dark, .dark *) table tr {
    color: oklch(0.4386 0 0);
    color: var(--muted-foreground);
  }
  @media (hover: hover) {
    :where(.dark, .dark *) table tr:hover {
      background: oklch(0.994 0 0);
      background: var(--card);
    }
  }
  :where(.dark, .dark *) table th {
    color: oklch(0 0 0);
    color: var(--foreground);
  }
  .badge-dashboard,
  .badge {
    width: calc(0.27rem * 4.5);
    width: calc(var(--spacing) * 4.5);
    height: calc(0.27rem * 4.5);
    height: calc(var(--spacing) * 4.5);
    border: 1px solid oklch(0.93 0.0094 286.2156);
    border: 1px solid var(--border);
  }
  ul[x-data] li > span {
    border: 1px solid oklch(0.93 0.0094 286.2156);
    border: 1px solid var(--border);
    background: oklch(0.994 0 0);
    background: var(--card);
    font-family: "Inter", sans-serif;
    backdrop-filter: blur(10px);
    backdrop-filter: blur(var(--blur));
  }
  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(0);
    }
    25% {
      transform: rotate(-3deg);
    }
    75% {
      transform: rotate(3deg);
    }
  }
  .toast-no-description svg[fill="currentColor"] {
    animation: wiggle 0.6s ease;
  }
  [x-show="dropdownOpen"] > div {
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
    background: oklch(0.97 0.0029 264.542);
    background: var(--popover);
    border: 1px solid oklch(0.93 0.0094 286.2156);
    border: 1px solid var(--border);
    box-shadow:
      0px 2px 3px 0px hsl(0 0% 0% / 0.16),
      0px 4px 6px -1px hsl(0 0% 0% / 0.16);
    box-shadow: var(--shadow-lg);
  }
  [x-show="dropdownOpen"] > div .dropdown-item,
  [x-show="dropdownOpen"] > div .dropdown-item-no-padding {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid transparent;
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
    width: 100%;
    text-align: left;
    padding: calc(0.27rem * 2) calc(0.27rem * 3);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    color: oklch(0 0 0);
    color: var(--popover-foreground);
    background: oklch(0.97 0.0029 264.542);
    background: var(--popover);
  }
  [x-show="dropdownOpen"] > div .dropdown-item:focus-visible,
  [x-show="dropdownOpen"] > div .dropdown-item-no-padding:focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    [x-show="dropdownOpen"] > div .dropdown-item:focus-visible,
    [x-show="dropdownOpen"] > div .dropdown-item-no-padding:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  [x-show="dropdownOpen"] > div .dropdown-item[aria-invalid="true"],
  [x-show="dropdownOpen"] > div .dropdown-item-no-padding[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *)
    [x-show="dropdownOpen"]
    > div
    .dropdown-item[aria-invalid="true"],
  :where(.dark, .dark *)
    [x-show="dropdownOpen"]
    > div
    .dropdown-item-no-padding[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *)
      [x-show="dropdownOpen"]
      > div
      .dropdown-item[aria-invalid="true"],
    :where(.dark, .dark *)
      [x-show="dropdownOpen"]
      > div
      .dropdown-item-no-padding[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  [x-show="dropdownOpen"] > div .dropdown-item:disabled,
  [x-show="dropdownOpen"] > div .dropdown-item-no-padding:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  [x-show="dropdownOpen"] > div .dropdown-item:hover,
  [x-show="dropdownOpen"] > div .dropdown-item-no-padding:hover {
    background: oklch(0.9487 0.0058 264.5319);
    background: var(--accent);
    color: oklch(0 0 0);
    color: var(--accent-foreground);
  }
  [x-show="dropdownOpen"] > div .dropdown-item:focus,
  [x-show="dropdownOpen"] > div .dropdown-item-no-padding:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
    border-color: oklch(0 0 0);
    border-color: var(--ring);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    [x-show="dropdownOpen"] > div .dropdown-item:focus,
    [x-show="dropdownOpen"] > div .dropdown-item-no-padding:focus {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  [x-show="dropdownOpen"] > div .dropdown-item-no-padding {
    padding: calc(0.27rem * 1);
    padding: calc(var(--spacing) * 1);
  }
  [x-show="dropdownOpen"] > div .dropdown-item-no-padding:focus {
    box-shadow: 0 0 0 1px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
    border-color: oklch(0 0 0);
    border-color: var(--ring);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    [x-show="dropdownOpen"] > div .dropdown-item-no-padding:focus {
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  .box,
  .box-without-bg {
    overflow: hidden;
    padding: calc(0.27rem * 2.5) calc(0.27rem * 3);
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
    border: 1px solid oklch(0.93 0.0094 286.2156);
    border: 1px solid var(--border);
    border-radius: calc(0.875rem + 4px);
    border-radius: var(--radius-2xl);
    background: oklch(0.994 0 0);
    background: var(--card);
    color: oklch(0 0 0);
    color: var(--card-foreground);
    transition:
      transform 0.15s,
      box-shadow 0.2s,
      background 0.18s,
      border-color 0.18s;
  }
  .box:hover,
  .box-without-bg:hover {
    background-color: color-mix(in srgb, oklch(0.994 0 0) 80%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    .box:hover,
    .box-without-bg:hover {
      background-color: color-mix(in srgb, var(--card) 80%, transparent);
    }
  }
  .box-title {
    font-weight: 600;
    font-size: 1.05rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
  }
  .box-description {
    color: oklch(0.4386 0 0);
    color: var(--muted-foreground);
  }
  div[data-testid="resources-grid"],
  div.grid[class*="cols"] {
    overflow: hidden;
    margin-top: calc(0.27rem * 2.5);
    margin-top: calc(var(--spacing) * 2.5);
    padding: calc(0.27rem * 4) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4);
    border-radius: calc(0.875rem + 8px);
    border-radius: var(--radius-3xl);
    background: oklch(0.9487 0.0058 264.5319);
    background: var(--accent);
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    ) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  @media screen and (min-width: 640px) {
    div.grid[class*="cols"]:is(
        :has([wire\:click^="navigateToProject"]),
        :has([\@click^="$wire.navigateToProject"]),
        [x-show^="filteredApplications"],
        [x-show^="filteredServices"]
      ) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media screen and (min-width: 1024px) {
    div.grid[class*="cols"]:is(
        :has([wire\:click^="navigateToProject"]),
        :has([\@click^="$wire.navigateToProject"]),
        [x-show^="filteredApplications"],
        [x-show^="filteredServices"]
      ) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media screen and (min-width: 1280px) {
    div.grid[class*="cols"]:is(
        :has([wire\:click^="navigateToProject"]),
        :has([\@click^="$wire.navigateToProject"]),
        [x-show^="filteredApplications"],
        [x-show^="filteredServices"]
      ) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media screen and (min-width: 1536px) {
    div.grid[class*="cols"]:is(
        :has([wire\:click^="navigateToProject"]),
        :has([\@click^="$wire.navigateToProject"]),
        [x-show^="filteredApplications"],
        [x-show^="filteredServices"]
      ) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box {
    height: 150px;
    padding: calc(0.27rem * 4) calc(0.27rem * 5);
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    > div {
    margin: 0;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    > div:only-child,
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box:has(> div + div) {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: start;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    div:has(> .box-title) {
    flex: none;
    justify-content: flex-start;
    width: 100%;
    padding-inline: 0;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    div:has(> .box-title)
    + div {
    justify-content: flex-end;
    width: 100%;
    margin-inline: 0;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    .box-description,
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    .box-title {
    padding: 0;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/edit"],
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/new"] {
    padding: calc(0.27rem * 1.5);
    padding: calc(var(--spacing) * 1.5);
    background-color: oklch(0.9487 0.0058 264.5319);
    background-color: var(--accent);
    color: oklch(0 0 0);
    color: var(--accent-foreground);
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    margin-inline: 0;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/edit"]
    > *,
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/new"]
    > * {
    display: none;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/new"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-indent: -9999px;
    position: relative;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/new"]::before {
    content: "";
    width: calc(0.27rem * 4);
    width: calc(var(--spacing) * 4);
    height: calc(0.27rem * 4);
    height: calc(var(--spacing) * 4);
    color: var(--color-text);
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/bold/plus-bold.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/edit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-indent: -9999px;
    position: relative;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/edit"]::before {
    content: "";
    width: calc(0.27rem * 4);
    width: calc(var(--spacing) * 4);
    height: calc(0.27rem * 4);
    height: calc(var(--spacing) * 4);
    color: var(--color-text);
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/gear-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/new"]:hover,
  div.grid[class*="cols"]:is(
      :has([wire\:click^="navigateToProject"]),
      :has([\@click^="$wire.navigateToProject"]),
      [x-show^="filteredApplications"],
      [x-show^="filteredServices"]
    )
    .box
    a[href*="/edit"]:hover {
    background-color: color-mix(
      in srgb,
      oklch(0.9487 0.0058 264.5319) 80%,
      transparent
    );
    color: oklch(0 0 0);
    color: var(--accent-foreground);
    opacity: 1;
  }

  @supports (color: color-mix(in lch, red, blue)) {
    div.grid[class*="cols"]:is(
        :has([wire\:click^="navigateToProject"]),
        :has([\@click^="$wire.navigateToProject"]),
        [x-show^="filteredApplications"],
        [x-show^="filteredServices"]
      )
      .box
      a[href*="/new"]:hover,
    div.grid[class*="cols"]:is(
        :has([wire\:click^="navigateToProject"]),
        :has([\@click^="$wire.navigateToProject"]),
        [x-show^="filteredApplications"],
        [x-show^="filteredServices"]
      )
      .box
      a[href*="/edit"]:hover {
      background-color: color-mix(in srgb, var(--accent) 80%, transparent);
    }
  }
  div.grid[wire\:poll\.3000ms="loadDeployments"]
    > .grid:has(a[href^="/project/"]) {
    padding: 0;
  }
  .grid:has(a[href*="/server/"]) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid:has(a[href*="/source/"]) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid:has(a[href*="/destination/"]) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid:has(a[href*="/security/"]) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid:has(a[href*="/project/"]) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid,
  [class*="grid-cols"] {
    gap: calc(0.27rem * 2.5);
    gap: calc(var(--spacing) * 2.5);
  }
  .navbar-main {
    position: sticky;
    top: 0;
    padding: calc(0.27rem * 1.75) calc(0.27rem * 3.5);
    padding: calc(var(--spacing) * 1.75) calc(var(--spacing) * 3.5);
    border: 1px solid oklch(0.93 0.0094 286.2156);
    border: 1px solid var(--border);
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
    background: oklch(0.97 0.0029 264.542);
    background: var(--sidebar);
    backdrop-filter: blur(10px);
    backdrop-filter: blur(var(--blur));
  }
  .navbar-main nav {
    display: flex;
    align-items: center;
    padding-top: 0px;
    gap: calc(0.27rem * 3.25);
    gap: calc(var(--spacing) * 3.25);
  }
  .navbar-main nav::-webkit-scrollbar {
    display: none;
  }
  .navbar-main nav a {
    padding: calc(0.27rem * 1.25);
    padding: calc(var(--spacing) * 1.25);
    border-radius: 10px;
    color: oklch(0 0 0);
    color: var(--sidebar-foreground);
    font-weight: 600;
    cursor: pointer;
    transition:
      background 0.18s,
      color 0.18s;
  }
  .navbar-main nav a:hover {
    color: oklch(0 0 0);
    color: var(--sidebar-accent-foreground);
  }
  .navbar-main nav a[class*="dark:text-white"],
  .navbar-main nav a[aria-current="page"] {
    color: oklch(0 0 0);
    color: var(--sidebar-accent-foreground);
  }
  .navbar-main .flex-1 {
    flex: 1 1 auto;
  }
  /* Targets the main desktop sidebar container. 
     Instead of fragile width/flex classes, it's identified by its fixed position on large screens 
     and the fact that it contains the main navigation (`a[title="Dashboard"]`). This is much more stable. */
  div.lg\:fixed:has(nav a[title="Dashboard"]) {
    width: 260px;
    width: var(--sidebar-width);
  }
  nav[x-data]:has(a[title="Dashboard"]) {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    border-right: 1px solid oklch(0.93 0.0094 286.2156);
    border-right: 1px solid var(--border);
    background: oklch(0.97 0.0029 264.542);
    background: var(--sidebar);
    backdrop-filter: blur(10px);
    backdrop-filter: blur(var(--blur));
    scrollbar-width: thin;
    scrollbar-color: oklch(0.9487 0.0058 264.5319) transparent;
    scrollbar-color: var(--accent) transparent;
  }
  nav[x-data]:has(a[title="Dashboard"]) > ul {
    padding-inline: calc(0.27rem * 2);
    padding-inline: calc(var(--spacing) * 2);
  }
  /* Targets the sidebar header containing the team switcher.
     It's robustly selected by finding the `div` that directly contains the unique Livewire team selection dropdown. */
  nav[x-data] > div:has(select[wire\:model\.live="selectedTeamId"]) {
    padding-block: calc(0.27rem * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  aside::-webkit-scrollbar {
    width: 8px;
  }
  aside::-webkit-scrollbar-thumb {
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
    background: oklch(0.9487 0.0058 264.5319);
    background: var(--accent);
  }
  nav > ul > li > ul > li {
    overflow: hidden;
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
  }
  .menu-item {
    display: flex;
    align-items: center;
    padding: calc(0.27rem * 2.25) calc(0.27rem * 3.75);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 3.75);
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
    color: oklch(0 0 0);
    color: var(--sidebar-foreground);
    font-weight: 500;
    transition:
      background 0.18s,
      color 0.18s;
    gap: calc(0.27rem * 2.5);
    gap: calc(var(--spacing) * 2.5);
  }
  div > .menu-item {
    color: oklch(0 0 0);
    color: var(--foreground);
  }
  .menu-item:hover,
  .menu-item-active {
    background: oklch(0.9401 0 0);
    background: var(--sidebar-accent);
    color: oklch(0 0 0);
    color: var(--sidebar-accent-foreground);
  }
  div > .menu-item:hover,
  div > .menu-item-active {
    background: oklch(0.9487 0.0058 264.5319);
    background: var(--accent);
    color: oklch(0 0 0);
    color: var(--accent-foreground);
  }
  .menu-item .icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke-width: 1.6;
    margin: 0;
  }
  .menu-item .icon > * {
    display: none;
  }
  .menu-item[title="Dashboard"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/house-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Projects"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/folder-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Servers"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/hard-drives-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Sources"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/github-logo-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Destinations"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/map-pin-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="S3 Storages"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/database-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Shared variables"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/function-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Notifications"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/bell-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Keys & Tokens"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/key-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Tags"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/tag-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Terminal"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/terminal-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Profile"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/user-circle-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Teams"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/users-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Settings"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/gear-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Sponsor us"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/heart-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Send us feedback or get help!"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/chat-text-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  .menu-item[title="Logout"] .icon {
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/fill/sign-out-fill.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  /* Mobile slide-in */
  @media screen and (min-width: 1024px) {
    aside[class*="sidebar"] {
      position: fixed;
      z-index: 60;
      transition: transform 0.25s;
      transform: translateX(calc(-1 * 260px));
      transform: translateX(calc(-1 * var(--sidebar-width)));
      inset: 0;
    }
    body.sidebar-open aside {
      transform: none;
    }
    body.sidebar-open::after {
      position: fixed;
      z-index: 50;
      background: var(--color-overlay);
      content: "";
      inset: 0;
    }
  }
  /* Desktop push */
  @media screen and (min-width: 1024px) {
    body:has(nav[class*="dark:border-coolgray-200"]) main {
      padding-left: 260px;
      padding-left: var(--sidebar-width);
    }
  }
  button[\@click="dropdownOpen=true"]:has([x-show*="theme"]) {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid transparent;
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
    border-radius: 10px;
    padding-inline: calc(0.27rem * 0.5);
    padding-inline: calc(var(--spacing) * 0.5);
    padding-block: calc(0.27rem * 2);
    padding-block: calc(var(--spacing) * 2);
    margin-right: calc(0.27rem * 2);
    margin-right: calc(var(--spacing) * 2);
  }
  button[\@click="dropdownOpen=true"]:has([x-show*="theme"]):focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button[\@click="dropdownOpen=true"]:has([x-show*="theme"]):focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  button[\@click="dropdownOpen=true"]:has(
      [x-show*="theme"]
    )[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *)
    button[\@click="dropdownOpen=true"]:has(
      [x-show*="theme"]
    )[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *)
      button[\@click="dropdownOpen=true"]:has(
        [x-show*="theme"]
      )[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  button[\@click="dropdownOpen=true"]:has([x-show*="theme"]):disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  button[\@click="dropdownOpen=true"]:has([x-show*="theme"]):hover {
    background: color-mix(
      in srgb,
      oklch(0.954 0.0063 255.4755) 80%,
      transparent
    );
  }

  @supports (color: color-mix(in lch, red, blue)) {
    button[\@click="dropdownOpen=true"]:has([x-show*="theme"]):hover {
      background: color-mix(in srgb, var(--secondary) 80%, transparent);
    }
  }
  button[\@click="dropdownOpen=true"]:has([x-show*="theme"]):hover svg {
    fill: oklch(0.1344 0 0);
    fill: var(--secondary-foreground);
  }
  button[\@click="dropdownOpen=true"]:has([x-show*="theme"]) svg {
    fill: oklch(0 0 0);
    fill: var(--sidebar-foreground);
  }
  button[\@click="dropdownOpen=true"]:has([x-show*="theme"]) > span > div {
    justify-content: center;
  }
  button[\@click="dropdownOpen=true"]:has([x-show*="theme"]) > svg.w-4.h-4 {
    display: none;
  }
  div:has(div[x-show="dropdownOpen"]:not([style*="display: none"]))
    button[\@click="dropdownOpen=true"]:has([x-show*="theme"]) {
    background: oklch(0.954 0.0063 255.4755);
    background: var(--secondary);
  }
  div:has(div[x-show="dropdownOpen"]:not([style*="display: none"]))
    button[\@click="dropdownOpen=true"]:has([x-show*="theme"])
    svg {
    fill: oklch(0.1344 0 0);
    fill: var(--secondary-foreground);
  }
  div[x-show="dropdownOpen"]:has(button[\@click*="setTheme"]) {
    right: 0;
    top: calc(0.27rem * 3);
    top: calc(var(--spacing) * 3);
  }
  button[\@click^="switchWidth"],
  button[\@click^="setZoom"] {
    display: none;
  }
  div[class*="font-bold border-b dark:border-coolgray-500 dark:text-white text-md"] {
    display: none;
  }
  svg.animate-spin {
    color: oklch(0.5393 0.2713 286.7462);
    color: var(--primary);
  }
  svg.animate-spin circle {
    opacity: 0.75;
    stroke: oklch(1 0 0);
    stroke: var(--primary-foreground);
    stroke-width: 2;
  }
  img[class*="w-[4.5rem] aspect-square h-[4.5rem]"],
  svg[class*="w-[4.5rem] aspect-square h-[4.5rem]"],
  div[class*="w-[4.5rem] aspect-square h-[4.5rem]"] {
    overflow: hidden;
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
    filter: none;
    opacity: 1;
    min-width: 3.5rem;
    width: 3.5rem;
    min-height: 3.5rem;
    height: 3.5rem;
    padding: calc(0.27rem * 1.5);
    padding: calc(var(--spacing) * 1.5);
  }
  div[class*="w-[4.5rem] aspect-square h-[4.5rem]"] > svg {
    transform: translateX(-23px) translateY(-8px) scaleX(0.8) scaleY(0.7);
    transform-origin: center center;
  }
  div[class*="w-[4.5rem] aspect-square h-[4.5rem]"] > svg#svg1326 {
    transform: translateX(-19px) translateY(-9px) scaleX(0.8) scaleY(0.7);
    transform-origin: center center;
  }
  input.input-sticky {
    background: transparent;
    backdrop-filter: blur(10px);
    backdrop-filter: blur(var(--blur));
  }
  div.grid[class*="cols"]:is(
      [x-show^="filteredGitBasedApplications"],
      [x-show^="filteredDockerBasedApplications"],
      [x-show^="filteredDatabases"]
    ) {
    background: none;
    padding: 0;
  }
  div[x-show="filteredServices.length > 0"]:has(> div[x-init="loadResources"])
    div[x-init="loadResources"]
    button {
    background-color: oklch(0.9487 0.0058 264.5319);
    background-color: var(--accent);
    color: oklch(0 0 0);
    color: var(--accent-foreground);
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    margin-inline: 0;
    text-indent: 0;
  }
  div[x-show="filteredServices.length > 0"]:has(> div[x-init="loadResources"])
    div[x-init="loadResources"]
    button
    > * {
    display: none;
  }
  div[x-show="filteredServices.length > 0"]:has(> div[x-init="loadResources"])
    div[x-init="loadResources"]
    button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-indent: -9999px;
    position: relative;
  }
  div[x-show="filteredServices.length > 0"]:has(> div[x-init="loadResources"])
    div[x-init="loadResources"]
    button::before {
    content: "";
    width: calc(0.27rem * 4);
    width: calc(var(--spacing) * 4);
    height: calc(0.27rem * 4);
    height: calc(var(--spacing) * 4);
    color: var(--color-text);
    mask: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/bold/arrows-clockwise-bold.svg")
      no-repeat center/contain;
    background-color: currentColor;
  }
  div[x-show="filteredServices.length > 0"]:has(> div[x-init="loadResources"])
    div[x-init="loadResources"]
    button:hover {
    background-color: color-mix(
      in srgb,
      oklch(0.9487 0.0058 264.5319) 80%,
      transparent
    );
    color: oklch(0 0 0);
    color: var(--accent-foreground);
    opacity: 1;
  }

  @supports (color: color-mix(in lch, red, blue)) {
    div[x-show="filteredServices.length > 0"]:has(> div[x-init="loadResources"])
      div[x-init="loadResources"]
      button:hover {
      background-color: color-mix(in srgb, var(--accent) 80%, transparent);
    }
  }
  div[x-show="filteredServices.length > 0"]:has(> div[x-init="loadResources"])
    div.grid[class*="cols"] {
    background: none;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-2.border-l-2.bg-white.dark\:bg-coolgray-100 {
    padding: s(2);
    background-color: oklch(0.994 0 0);
    background-color: var(--card);
    color: oklch(0 0 0);
    color: var(--card-foreground);
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
  }
  .p-4.my-4.border.dark\:border-coolgray-200.border-neutral-200 {
    padding: s(4);
    margin-top: s(4);
    border-radius: calc(0.875rem - 2px);
    border-radius: var(--radius-lg);
    background: oklch(0.994 0 0);
    background: var(--card);
    color: oklch(0 0 0);
    color: var(--card-foreground);
  }
  div[class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow-sm lg:p-20 dark:bg-transparent dark:border-none max-w-7xl border-neutral-200"] {
    background-color: oklch(0.9487 0.0058 264.5319);
    background-color: var(--accent);
    padding: calc(0.27rem * 10);
    padding: calc(var(--spacing) * 10);
  }
  .box-boarding {
    padding: calc(0.27rem * 2.25) calc(0.27rem * 4);
    padding: calc(var(--spacing) * 2.25) calc(var(--spacing) * 4);
    border: 1px solid transparent;
    border-radius: calc(0.875rem - 4px);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
  }
  .box-boarding:focus-visible {
    outline: none;
    border-color: oklch(0 0 0);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, oklch(0 0 0) 50%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    .box-boarding:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    }
  }
  .box-boarding[aria-invalid="true"] {
    border-color: oklch(0.577 0.245 27.325);
    border-color: var(--destructive);
  }
  :where(.dark, .dark *) .box-boarding[aria-invalid="true"] {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, oklch(0.577 0.245 27.325) 40%, transparent);
  }

  @supports (color: color-mix(in lch, red, blue)) {
    :where(.dark, .dark *) .box-boarding[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--destructive) 40%, transparent);
    }
  }
  .box-boarding:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}