*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: "Pixel Operator", monospace; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

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

/*
Remove the default font size and weight for headings.
*/

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

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "Pixel Operator", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

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

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

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

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --radius: 0rem;
    /* Safe area insets — zero on desktop, non-zero on notched iOS/Android */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --background: oklch(0.96 0.01 90);
    --foreground: oklch(0.15 0.02 265);
    --card: oklch(0.98 0.008 90);
    --card-foreground: oklch(0.15 0.02 265);
    --popover: oklch(0.98 0.008 90);
    --popover-foreground: oklch(0.15 0.02 265);
    --primary: oklch(0.7 0.12 250);
    --primary-foreground: oklch(0.15 0.02 265);
    --secondary: oklch(0.72 0.15 300);
    --secondary-foreground: oklch(0.15 0.02 265);
    --muted: oklch(0.88 0.02 90);
    --muted-foreground: oklch(0.4 0.02 265);
    --accent: oklch(0.72 0.15 300);
    --accent-foreground: oklch(0.98 0.008 90);
    --destructive: oklch(0.6 0.18 25);
    --destructive-foreground: oklch(0.98 0.008 90);
    --border: oklch(0.15 0.02 265);
    --input: oklch(0.92 0.015 90);
    --ring: oklch(0.7 0.12 250);
    --chart-1: 0.646 0.222 41.116;
    --chart-2: 0.6 0.118 184.704;
    --chart-3: 0.398 0.07 227.392;
    --chart-4: 0.828 0.189 84.429;
    --chart-5: 0.769 0.188 70.08;
    --sidebar: oklch(0.9 0.015 90);
    --sidebar-foreground: oklch(0.15 0.02 265);
    --sidebar-primary: 0.205 0 0;
    --sidebar-primary-foreground: 0.985 0 0;
    --sidebar-accent: oklch(0.7 0.12 190);
    --sidebar-accent-foreground: oklch(0.15 0.02 265);
    --sidebar-border: oklch(0.15 0.02 265);
    --sidebar-ring: 0.708 0 0;

    --pa-guide: #6b6f82;
    --pa-guide-opacity: 0.3;
    --pa-selected-border: 3px solid var(--pa-accent);
    --pa-selected-bg: rgba(200, 221, 247, 0.08);

    --control-height: 36px;
    --control-height-sm: 32px;
    --control-height-lg: 40px;

    --pa-teal: #c8ddf7;
    --pa-teal-shadow: rgba(200, 221, 247, 0.25);
  }

  * {
  border-color: oklch(var(--border));
}

  .pixelart * {
  --tw-border-opacity: 1;
  border-color: var(--pa-divider);
}

  .pixelart .color-quick-dock-container * {
  border-color: var(--pa-divider-light);
}
  body {
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
    font-family: "Pixel Operator", monospace;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

  code,
  pre,
  .font-mono {
    font-family: "Pixel Operator", monospace;
  }
.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .\!container {
    max-width: 1400px !important;
  }

  .container {
    max-width: 1400px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-left-6 {
  left: -1.5rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-\[50\%\] {
  left: 50%;
}
.left-full {
  left: 100%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1000\] {
  z-index: 1000;
}
.z-\[1100\] {
  z-index: 1100;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[40\] {
  z-index: 40;
}
.z-\[55\] {
  z-index: 55;
}
.z-\[900\] {
  z-index: 900;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[10px\] {
  height: 10px;
}
.h-\[120px\] {
  height: 120px;
}
.h-\[12px\] {
  height: 12px;
}
.h-\[14px\] {
  height: 14px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[60vh\] {
  height: 60vh;
}
.h-\[9px\] {
  height: 9px;
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.h-svh {
  height: 100svh;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[100px\] {
  min-height: 100px;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[24px\] {
  min-height: 24px;
}
.min-h-\[28px\] {
  min-height: 28px;
}
.min-h-\[32px\] {
  min-height: 32px;
}
.min-h-\[36px\] {
  min-height: 36px;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-96 {
  width: 24rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[10px\] {
  width: 10px;
}
.w-\[12px\] {
  width: 12px;
}
.w-\[14px\] {
  width: 14px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[95vw\] {
  width: 95vw;
}
.w-\[9px\] {
  width: 9px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[10rem\] {
  min-width: 10rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[24px\] {
  min-width: 24px;
}
.min-w-\[28px\] {
  min-width: 28px;
}
.min-w-\[32px\] {
  min-width: 32px;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[60px\] {
  min-width: 60px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[80px\] {
  max-width: 80px;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-\[95vw\] {
  max-width: 95vw;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-crosshair {
  cursor: crosshair;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.self-stretch {
  align-self: stretch;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-l-none {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.rounded-l-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
  border-bottom-left-radius: calc(var(--radius) - 4px);
}
.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-0 {
  border-left-width: 0px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-\[3px\] {
  border-left-width: 3px;
}
.border-r {
  border-right-width: 1px;
}
.border-r-0 {
  border-right-width: 0px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#7CB342\] {
  --tw-border-opacity: 1;
  border-color: rgb(124 179 66 / var(--tw-border-opacity, 1));
}
.border-\[var\(--pa-divider\)\] {
  border-color: var(--pa-divider);
}
.border-\[var\(--pa-teal\)\] {
  border-color: var(--pa-teal);
}
.border-blue-500\/30 {
  border-color: rgb(59 130 246 / 0.3);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-cyan-400\/50 {
  border-color: rgb(34 211 238 / 0.5);
}
.border-destructive\/20 {
  border-color: oklch(var(--destructive) / 0.2);
}
.border-gray-300\/50 {
  border-color: rgb(209 213 219 / 0.5);
}
.border-input {
  border-color: oklch(var(--input));
}
.border-muted-foreground\/50 {
  border-color: oklch(var(--muted-foreground) / 0.5);
}
.border-orange-400\/50 {
  border-color: rgb(251 146 60 / 0.5);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-purple-400\/50 {
  border-color: rgb(192 132 252 / 0.5);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-yellow-400\/50 {
  border-color: rgb(250 204 21 / 0.5);
}
.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-yellow-500\/30 {
  border-color: rgb(234 179 8 / 0.3);
}
.border-l-\[var\(--pa-teal\)\] {
  border-left-color: var(--pa-teal);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.\!bg-transparent {
  background-color: transparent !important;
}
.bg-\[\#7CB342\] {
  --tw-bg-opacity: 1;
  background-color: rgb(124 179 66 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F7F4EB\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 244 235 / var(--tw-bg-opacity, 1));
}
.bg-\[rgba\(168\2c 200\2c 245\2c 0\.15\)\] {
  background-color: rgba(168,200,245,0.15);
}
.bg-\[rgba\(200\2c 221\2c 247\2c 0\.25\)\] {
  background-color: rgba(200,221,247,0.25);
}
.bg-\[var\(--overlay-bg\2c \.\.\.\)\] {
  background-color: var(--overlay-bg,...);
}
.bg-\[var\(--overlay-bg\2c rgba\(0\2c 0\2c 0\2c 0\.8\)\)\] {
  background-color: var(--overlay-bg,rgba(0,0,0,0.8));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-cyan-400\/10 {
  background-color: rgb(34 211 238 / 0.1);
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/10 {
  background-color: oklch(var(--destructive) / 0.1);
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-gray-300\/10 {
  background-color: rgb(209 213 219 / 0.1);
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted-foreground\/10 {
  background-color: oklch(var(--muted-foreground) / 0.1);
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-orange-400\/10 {
  background-color: rgb(251 146 60 / 0.1);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-primary\/30 {
  background-color: oklch(var(--primary) / 0.3);
}
.bg-purple-400\/10 {
  background-color: rgb(192 132 252 / 0.1);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/40 {
  background-color: oklch(var(--secondary) / 0.4);
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-transparent {
  background-color: transparent;
}
.bg-yellow-400\/10 {
  background-color: rgb(250 204 21 / 0.1);
}
.bg-yellow-500\/10 {
  background-color: rgb(234 179 8 / 0.1);
}
.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-\[\'Inter\'\] {
  font-family: 'Inter';
}
.font-mono {
  font-family: "Pixel Operator", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[var\(--pa-teal\)\] {
  color: var(--pa-teal);
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/50 {
  color: oklch(var(--muted-foreground) / 0.5);
}
.text-muted-foreground\/70 {
  color: oklch(var(--muted-foreground) / 0.7);
}
.text-muted-foreground\/80 {
  color: oklch(var(--muted-foreground) / 0.8);
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-primary\/80 {
  color: oklch(var(--primary) / 0.8);
}
.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.accent-primary {
  accent-color: oklch(var(--primary) / 1);
}
.opacity-0 {
  opacity: 0;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-primary {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.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);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  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);
}
.invert {
  --tw-invert: invert(100%);
  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);
}
.sepia {
  --tw-sepia: sepia(100%);
  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);
}
.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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}
.\[image-rendering\:pixelated\] {
  image-rendering: pixelated;
}

@font-face {
  font-family: "Pixel Operator";
  src: url("/assets/fonts/PixelOperator.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pixel Operator";
  src: url("/assets/fonts/PixelOperator-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Win95 theme overrides */
.win95 body {
  background-color: #c0c0c0;
  color: #000000;
}

.win95 aside,
.win95 header,
.win95 [class*="border-border"] {
  border-color: #888888;
}

.dark .right-sidebar-panel {
  border-left: 1px solid oklch(var(--border) / 1) !important;
}

.win95 .right-sidebar-panel {
  border-left: 1px solid #888888 !important;
}

.win95 button:not([class*="ghost"]) {
  border: 2px solid;
  border-color: #ffffff #888888 #888888 #ffffff;
}

canvas,
body,
* {
  image-rendering: pixelated;
}

.image-render-pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Canvas interaction layer - blocks pointer events by default */
#canvas-interaction-layer {
  pointer-events: none;
}

/* Re-enable pointer events only on canvas element inside the interaction layer */
#canvas-interaction-layer canvas {
  pointer-events: auto;
}

/* Global dialog portal root - always above HUD overlays */
#dialog-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

/* Radix popper content (tooltips, dropdowns, etc.) - below dialogs */
[data-radix-popper-content-wrapper] {
  z-index: 6000 !important;
}

/* Dialog overlay and content - explicitly re-enable pointer events */
[data-radix-dialog-overlay] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10001 !important;
  pointer-events: auto !important;
}

[data-radix-dialog-content] {
  position: relative !important;
  z-index: 10002 !important;
  pointer-events: auto !important;
}

/* === TabBar === */
.tabbar-root {
  background: oklch(var(--sidebar-background));
  border-bottom: 1px solid oklch(var(--border));
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
}

.tabbar-root::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.tabbar-tab {
  color: oklch(var(--muted-foreground));
  background: transparent;
}

.tabbar-tab:hover:not(.tabbar-tab-active) {
  color: oklch(var(--foreground));
  background: oklch(var(--muted) / 0.5);
}

.tabbar-tab-active {
  color: oklch(var(--foreground));
  background: oklch(var(--background));
  border-top: 1px solid oklch(var(--border));
  border-left: 1px solid oklch(var(--border));
  border-right: 1px solid oklch(var(--border));
  border-bottom: 2px solid var(--pa-teal);
}

.tabbar-input {
  color: oklch(var(--foreground));
}

/* Win95 TabBar overrides */
.win95 .tabbar-root {
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
}

.win95 .tabbar-tab {
  color: #000;
  background: #b0b0b0;
}

.win95 .tabbar-tab:hover:not(.tabbar-tab-active) {
  background: #a8a8a8;
}

.win95 .tabbar-tab-active {
  color: #000;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #808080;
  border-bottom: none;
}

.win95 .tabbar-input {
  color: #000;
}

/* ============================================================
   Pixel Art theme — "Cute Premium Pixel UI"
   Stroke hierarchy:
     Major containers  : 2px #2A2D40 (deep desaturated navy)
     Interactive controls: 1px #2A2D40
     Internal dividers : 1px #8A8EA3 (muted gray-blue)
   Shadows: hue-shifted colored (teal for teal, purple for purple)
   ============================================================ */

/* CSS custom properties for the pixelart stroke palette */
.pixelart {
  --pa-navy: #2c3046;
  --pa-divider: #8a8ea3;
  --pa-divider-light: #b8bbc8;
  --pa-accent: #c8ddf7;
  --pa-teal: #c8ddf7;
  --pa-teal-shadow: rgba(200, 221, 247, 0.25);
  --pa-purple: #a88bff;
  --pa-purple-shadow: /* removed */;
  --pa-gray: #6b6f82;
  --pa-gray-shadow: /* removed */;
  --pa-cream: #f7f3e6;
  --pa-cream-alt: #f7f3e6;
  --card: #f7f3e6;
  --popover: #f7f3e6;
  --background: #f7f3e6;
  --muted: #f7f3e6;

  --overlay-bg: rgba(0, 0, 0, 0.15);

  /* ICPixel Frame Kit v1 — SVG frame atom color variables.
     Map to the existing pixelart palette so the frame atoms resolve to
     the theme's interactive control border color and divider highlight. */
  --icpixel-frame-outline: #2c3046; /* matches --pa-navy, the interactive control border color */
  --icpixel-frame-shadow: #0d0f1a; /* darker than outline so the shadow band reads as a distinct drop */
  --icpixel-frame-shadow-opacity: 0.25; /* lightened from 0.5 so the shadow reads as a soft drop, not a heavy band */
  --icpixel-frame-highlight: #ffffff; /* pure white top-edge highlight so it reads as light, not a second dark line */
}

.pixelart body {
  font-family: "Pixel Operator", monospace !important;
  font-size: 16px;
  letter-spacing: 0.02em;
  background-color: var(--pa-cream);
  color: var(--pa-navy);
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeSpeed !important;
}

/* Static paper texture overlay — Pixel Art theme only.
   A tiny repeating warm-grain tile sits above the background but below
   interactive UI (pointer-events:none so it never blocks clicks). It removes
   the flat digital look so the editor feels like drawing on warm retro paper.
   Static, cached, no JS, no animation, no filters, no mix-blend-mode. */
.pixelart::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAJBElEQVR42iWXi3IkIQhF+7tBEFD87hwmtVWTTaZbEe7L76q0m63W26UnRNSsjpQ1fwjL40/eWx3bl72tGrr3/LGz+P9Xfs8+1irXnqtpeN699rbrfa+eu6ptZTjr2d3vicnbwaOneejLuLlYu6u8T5zYtir1ia673o2jESfLSy5F1vN3t3qslG6vt77S67eOrf1WvZKzU3Q/N7Gj2izFU+tmLa8TVq/b2uPenexj9umWU3ZMtK+YytYyv2m1+py0ly9M9caOyJbLoSR6P161yhXr8zTNV7SgRJ+tyLSQFRL+Xnp0v7qdy6jpdElvEY5US0qXHv2uhR47RzjsPae226U5nPJeT7aSPJylrHxtNUaR1X4e+10GoN9yTsoBnUnQ1OuVLpTsInTl+mJaHVSnvUr2KcoW30942K7u71WcXrYYNZVzuni3n/l6rSFpltufGUMGCPp834pbW9TXYafzxW6mesDEMZcOqTlz97UdevfZVxmXTxf5uSxu3F7nOFW5W3zvHCaSeWnqe72uel2wRUOvG10VAY1PwQuH7MiwdRtsKuOhzK8S1Gqul7fq7Je0OhhQZ/qs8V6xuCd1mO9N66miVwPZ2JXxiUW8w5InUjhuRHXXO5ZMIiX2vY8Xcp2SoNppML+JA9nc+32MG1wDzJq+6rsC2Bk5fU2YYNn+Nmfu1sfEjvi5ERRwaJP2++ASxzmMhe4Cw7slUtk4m4F1XWZeLzP6+Db1ASeFxJbcK40x+vZDf6cTRo/qWSfQS+hEk9uGrSCPIdTenU7rtW0DHloOF/hTs8eBnm57MUlQJQI1132pcpwRbc6cKEHC7itrvXlc69EUxmhgiZaf8AF0z/zYVmkCLec8fcCmeTvU5Jv37rkPAqAO6MCnsh5nYCOlXx1elWw0lBukGfyQRyNGlbJuAkAURHPHBmNrf8EZbiAEqduBTwxJMsRqH7BBKwwAerK90G/rNf0KTkA9K/tzuDUURjHCTvVSioz9yoWq6XeyMQOvOei2NlTlhdDOBjP3fawiCwiyIKBkdHehD75PB1yDORtuJUqlQ1W0M8BKA93+8VU+4BnLoORFuVAI/gP2lyVq4KCKj2JJGnJhUzJZhCzQYeoTWP8JbzbNB/nPzhuW8+zrdy/EYmj+EqGco+2O4X1t9JeuPB9p+1IXc+vp47RQvNiO3xkrwKQaJBPZZy2GdIPB/iCBZsY8BxvRkzm5JkBA8YyG8uL+Ydp/vebwR/ACdj+GSiPBhlo9eLGQdX9LQRcN4QhbgCEuVEqf8u06mrwgnKgwHJGM2YuZ6j5Ll5/vMrpRJE9kX9Ex6IsVBdq8eboVxFzfOIPq2Fr3GAjnKnDEVx9kh6FACHfgKdM9vUBigdSoFep7Lg1f3gyXCteZTmAi0Akt+SDKnnai3T+WCJqWN/LghrCEAtTpASiGEEEv4Bznd7aUZCzfQoGs6uK71BKD6HFIxuKo8mbJbL6a2dOZYK9pILqhVZj1/vouoxm2DsoOO96leYfX4BxKgFHDHFDFqdAcqksA6IpYHbB96gNFvICIU+Vi/7eb5ZcgK8jIwecd0dx3OAkwRrPCMX6+GevfSBrVLmTAkTTUD2xcHPsG5jGRAp0mfgzFEJBCOYkIB0qD+6bShSKN8vYvicAaq5EMsETfACujKPDLKwA/OQIpxkddh7yKLMuHDddGX7bh7M3ya+SrsYzMIyp0p5rjMlpzZRCX/ii4Hd3AajDXgCuwHDdWIFBFpVhAQjXmC0BZe7IO5sEJaeSe5AIY+bG0P7iG8z/293Ekp1c25nvHSkkVncEgOkdinnbgoasAAVrhjo19aH4SalBAYhRSTvtQH4YrQI7VlxqpCLDjNXRh51NW+OGbPNPrS/alxUguOsAHsWOMEdkBA0y0nIjAZBbMwjkeHcUCkTBizSJ5fBNiWASJR2LvYKaAXzFnAgO5AkFda+Mk5RgNnCR0EAaAyjmEr/M16kS4FJrrJMWRNMkJL2NixLzxZSEmjkwAnuZfTDWwxBJgfrYYFTgn501wHPHHZYh6dNRGIBgqoE7EXGMN7bDFmGQ3NUV9HAW/pX7IzcLgAHGndvnlHVbD11l7L5TLDztXjgvJ2EoAvo/+ENsYAIQ21DUXCec8YDGxTg0TjoXHjjpkN30nsOHdNdNFX7+NAiNCrE7FhCGbiZBlmO2M04kEmAPVgV+sRjfMZFikPhwJG6CJE8EwSrIqgQsNfWRIVHZi03g/3qDEI3KLTMKL9+8pmBZemPfjTIRrVEY342f1BaggPwY84gVRCKAEI2yNZlv+5wkEGZSwM77g7FboHXKKoUFdzJDZkifoL7jGNaAtvof4Em0FIaKti4CF4Pf5xhKfUAXyIgQyVpIxCLI6PAeKQoAi+KKDoxybnEd+xO5QF16qj8BGrOIwk+5igin61kTkuStM3lLCAkhoNAqOohdcOaCTDQKJzB+5etFDZEqKzDtSxJDvz+o6gA6bD6RoDiRgHjU5gDQE7CF/f9OaSSHwBMazFJBFwPHx0ac+IIC5PzIEZoeYT35BbDA6KCqHkIUAFTEwRv/QbpIG4okl90S1NSJC2Bt4Ce2YFDkYI7qTYVA0rA3xu0g12sfH5Go+OcDijkCKw/MmvuIvCVAnfN1RjYg56R09mBT99qHblH1+dwUqwm03lyaUMSbXo3iwPN5IJYPh1qJchAhRxDw0X7CNYSsdguA4H8wmTSmvBrY8V0YkTOb+4pCOYAClQrmbcdH8CCWkCrxjvBKEYBJcXzznQUcNQCgju8Rb6A8dAu178ITOr0lS3wx+5HeeeVwyOPCeSxRLkf3IYoNe0ueb+yU66FMRTcF9MUvGCPVxM7Lu1cmoeCEuhoLQR7RDJzDjR0CECugkMZUsTNLm8jnXKKwNdZyBTFCFw4qucw0GJrAS2148DcpJC3cNykJmpTM/ARde9qHSxJ65K7PoHbSMu0PVTdgjIg5t71z46B9ZjUaPM3LngIFcq9ewcfGsUBV3GYLCXKZjMKSTj7mI+VwZ5yqEZ6KlBxNAibjSo+ZcuvDDeSp9siov2AO+u89Y9ppfMT5UkxpRp8OFjAgxaZBeEhp7/wEyqgJUKNkOeAAAAABJRU5ErkJggg==");
  background-repeat: repeat;
  background-size: 64px 64px;
}

/* Font overrides for main editor UI components to match right sidebar typography */
.pixelart header,
.pixelart header * {
  font-family: "Pixel Operator", monospace !important;
}

.pixelart .tool-options-bar,
.pixelart .tool-options-bar * {
  font-family: "Pixel Operator", monospace !important;
}

.pixelart [data-tool-panel],
.pixelart [data-tool-panel] * {
  font-family: "Pixel Operator", monospace !important;
}

.pixelart .timeline-container,
.pixelart .timeline-container * {
  font-family: "Pixel Operator", monospace !important;
}

.pixelart [class*="HUD"],
.pixelart [class*="hud"] {
  font-family: "Pixel Operator", monospace !important;
}
.pixelart h1,
.pixelart h2,
.pixelart h3,
.pixelart h4 {
  font-family: "Pixel Operator", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Interactive controls — 1px navy outline, purple accent */
/* Toolbar buttons use standard border */
.pixelart button:not([data-no-pixel]) {
  border: 1px solid var(--pa-navy) !important;
  border-radius: 0 !important;
  transition: transform 100ms !important;
}
.pixelart button:not([data-no-pixel]):hover {
  transform: translateY(-2px) !important;
}
.pixelart button:not([data-no-pixel]):active {
  transform: translateY(2px) !important;
}

/* Menu trigger buttons — no border, no outline, no box-shadow */
.pixelart button[data-no-pixel].menubar-trigger,
.pixelart [data-radix-dropdown-menu-trigger].menubar-trigger {
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.pixelart button[data-no-pixel].menubar-trigger:hover,
.pixelart [data-radix-dropdown-menu-trigger].menubar-trigger:hover {
  background: rgba(200, 221, 247, 0.15) !important;
  transform: none !important;
}
.pixelart button[data-no-pixel].menubar-trigger:active,
.pixelart [data-radix-dropdown-menu-trigger].menubar-trigger:active {
  transform: none !important;
}

/* Suppress hover/active transform on toolbar buttons that already have an active tool indicator.
   When a tool is selected (blue highlight visible), hovering or pressing it should NOT
   show the dark hover border / shift animation — only the blue highlight remains. */
.pixelart div:has(> .active-tool-indicator) > button:not([data-no-pixel]):hover,
.pixelart
  div:has(> .active-tool-indicator)
  > button:not([data-no-pixel]):active {
  transform: none !important;
}

/* Major container — header: teal bg, bottom border serves as separator above sidebar */
.pixelart header {
  background-color: var(--pa-teal) !important;
  border-bottom: 2px solid var(--pa-gray) !important;
  color: var(--pa-navy) !important;
}

.pixelart header[class*="border-b"] {
  border-bottom: 2px solid var(--pa-gray) !important;
}

/* Header override: box border on left, top, and right only — no bottom to avoid doubling with workspace */
.pixelart header.bg-card {
  border-top: 2px solid var(--pa-gray) !important;
  border-left: 2px solid var(--pa-gray) !important;
  border-right: 2px solid var(--pa-gray) !important;
  border-bottom: none !important;
}

/* Major container — sidebars: 2px gray right border, no top border to avoid corner doubling */
.pixelart aside {
  background-color: var(--pa-cream-alt) !important;
  border-right: 2px solid var(--pa-gray) !important;
  border-top: none !important;
}

/* Toolbar: remove left and bottom borders inherited from .bg-card */
.pixelart [data-tool-panel] {
  border-left: none !important;
  border-bottom: none !important;
}

/* Tool group separator */
.tool-group-separator {
  width: 24px;
  height: 1px;
  margin: 8px 0;
  background-color: var(--pa-divider, #8a8ea3);
  border-radius: 1px;
  opacity: 0.6;
}

.pixelart .tool-group-separator {
  width: 24px;
  height: 1px;
  margin: 8px 0;
  background-color: var(--pa-divider);
  border-radius: 1px;
  opacity: 0.6;
}

/* Toolbar buttons use standard border via Tailwind classes */

/* Major container — tabbar: gray bg, 2px gray bottom */
.pixelart .tabbar-root {
  background-color: var(--pa-gray) !important;
  border-bottom: 2px solid var(--pa-gray) !important;
}

/* Interactive control — tabs: 1px navy outline */
.pixelart .tabbar-tab {
  border: 1px solid var(--pa-navy) !important;
  border-radius: 0 !important;
  font-family: "Pixel Operator", monospace !important;
  font-size: 8px !important;
  background-color: var(--pa-cream) !important;
  color: var(--pa-navy) !important;
  transition: transform 100ms !important;
}
.pixelart .tabbar-tab:hover {
  transform: translateY(-2px) !important;
}
.pixelart .tabbar-tab-active {
  background-color: var(--pa-teal) !important;
  color: var(--pa-navy) !important;
}

/* Interactive control — add/focus/settings buttons: 1px navy outline (matches tabs) */
.pixelart .tabbar-add,
.pixelart .tabbar-settings {
  border: 1px solid var(--pa-navy) !important;
  border-radius: 0 !important;
  background-color: var(--pa-cream) !important;
}

/* Interactive controls — inputs: 1px navy outline */
.pixelart input:not([type="checkbox"]):not([type="radio"]),
.pixelart select,
.pixelart textarea {
  border: 1px solid var(--pa-navy) !important;
  border-radius: 0 !important;
  font-family: "Pixel Operator", monospace !important;
  font-size: 16px !important;
  background-color: var(--pa-cream-alt) !important;
  color: var(--pa-navy) !important;
}

/* Internal dividers — use muted gray-blue */
.pixelart .border-border,
.pixelart [class*="border-b"],
.pixelart [class*="border-t"],
.pixelart [class*="border-l"],
.pixelart [class*="border-r"] {
  --tw-border-opacity: 1;
  border-color: var(--pa-divider) !important;
}

/* Color Dock: inner control borders are lighter than the outer frame.
   The descendant selector matches only inner elements, not the container
   itself (an element is never its own descendant), so the outer frame
   keeps the stronger --pa-divider border. */
.pixelart .color-quick-dock-container .border-border {
  border-color: var(--pa-divider-light) !important;
}

/* Color Dock: internal buttons (Swap Colors, Add to Palette) use the SECONDARY
   border (1px solid var(--pa-divider-light), radius 0) to match the SV rectangle
   and all other internal controls. This descendant selector overrides the global
   .pixelart button:not([data-no-pixel]) rule (1px navy) for buttons INSIDE the
   dock only — the hide/show button lives outside the container and is unaffected. */
.pixelart .color-quick-dock-container button {
  border: 1px solid var(--pa-divider-light) !important;
  border-radius: 0 !important;
}

/* Override: major structural borders use gray */
.pixelart header,
.pixelart aside,
.pixelart .tabbar-root {
  border-color: var(--pa-gray) !important;
}

/* Right sidebar: explicit gray border, overrides the global [class*="border-l"] rule */
.pixelart .right-sidebar-panel {
  border-left: 2px solid var(--pa-gray) !important;
  border-bottom: 2px solid var(--pa-gray) !important;
  border-top: 2px solid var(--pa-gray) !important;
  border-color: var(--pa-gray) !important;
}

/* Cards / panels — major containers: 2px gray (properly scoped) */
/* Cards / panels — major containers: 2px gray (properly scoped) */
.pixelart .bg-card,
.pixelart [class*="bg-card"] {
  border: 2px solid var(--pa-gray) !important;
}

/* Color Dock outer frame + hide/show button: slim to 1px (half weight) while
   leaving HUD windows and other .bg-card panels at 2px. The container rule
   ties .bg-card on specificity (0,2,0) and wins by source order; the button
   rule uses data-no-pixel (currently only on the hide/show button among
   bg-card buttons) for specificity 0,3,0. Inner control borders
   (.color-quick-dock-container .border-border / button) are unaffected. */
.pixelart .color-quick-dock-container {
  border: 1px solid var(--pa-gray) !important;
}
.pixelart button[data-no-pixel].bg-card {
  border: 1px solid var(--pa-gray) !important;
}

/* Layer/group rows: always thin 1px border, never bold — override global .bg-card */
/* Layer/group rows: always thin 1px border, never bold — override global .bg-card */
.pixelart .layer-group-row,
.pixelart .layer-group-row[data-active="true"],
.pixelart .layer-group-row.active,
.pixelart .layer-row,
.pixelart .layer-row[data-active="true"],
.pixelart .layer-row.active {
  border-width: 1px !important;
  border-color: var(--pa-divider) !important;
}

/* Explicitly override .bg-card thick border on layer rows */
.pixelart .layer-row.bg-card,
.pixelart .layer-row.bg-primary,
.pixelart .layer-group-row.bg-card,
.pixelart .layer-group-row.bg-primary {
  border-width: 1px !important;
  border-color: var(--pa-divider) !important;
}

/* Layer nodes: always thin 1px border, never bold */
.pixelart .layer-row .bg-primary.text-primary-foreground {
  border-width: 1px !important;
  border-color: var(--pa-divider) !important;
}

/* Frameless icon buttons — no visible frame, just the icon */
.frameless-icon-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frameless-icon-btn:hover {
  background: rgba(200, 221, 247, 0.15) !important;
}
.pixelart .frameless-icon-btn:hover {
  background: rgba(200, 221, 247, 0.2) !important;
}

/* Custom blend mode dropdown styling */
.layer-blend-mode-trigger {
  font-family: "Pixel Operator", monospace;
  font-size: 16px;
  font-weight: 400 !important;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--pa-navy);
  border-radius: 0;
  background-color: var(--pa-cream-alt);
  color: var(--pa-navy);
  min-width: 80px;
  max-width: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.layer-blend-mode-trigger::after {
  content: "▼";
  font-size: 8px;
  margin-left: 4px;
}
.pixelart .layer-blend-mode-trigger {
  border: 1px solid var(--pa-navy) !important;
  border-radius: 0 !important;
  background-color: var(--pa-cream-alt) !important;
  color: var(--pa-navy) !important;
}

/* Dropdown menu styling for blend modes */
.layer-blend-mode-dropdown {
  font-family: "Pixel Operator", monospace;
  font-size: 16px;
  border: 1px solid var(--pa-navy);
  border-radius: 0;
  background-color: var(--pa-cream);
  color: var(--pa-navy);
  min-width: 100px;
  padding: 2px 0;
}
.pixelart .layer-blend-mode-dropdown {
  border: 1px solid var(--pa-navy) !important;
  border-radius: 0 !important;
  background-color: var(--pa-cream) !important;
  color: var(--pa-navy) !important;
  box-shadow: none !important;
}

.layer-blend-mode-item {
  font-family: "Pixel Operator", monospace;
  font-size: 16px;
  font-weight: 400 !important;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 0;
}
.layer-blend-mode-item:hover {
  background-color: rgba(200, 221, 247, 0.2);
}
.pixelart .layer-blend-mode-item {
  border-radius: 0 !important;
}
.pixelart .layer-blend-mode-item:hover {
  background-color: rgba(200, 221, 247, 0.25) !important;
}
/* Action button cluster — tight spacing */
.layer-action-cluster {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Tree guide gutter — lives outside row frames */
.layer-tree-gutter {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  border-right: 1px solid var(--pa-guide, rgba(107, 111, 130, 0.15));
}

/* Vertical guide line from parent to children */
.layer-tree-gutter.has-parent::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-color: var(--pa-guide, rgba(107, 111, 130, 0.2));
}

/* Branch connectors — horizontal lines from vertical guide to row */
.layer-branch-connector,
.layer-branch-last {
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background-color: var(--pa-guide, rgba(107, 111, 130, 0.3));
  transform: translateY(-50%);
}

/* Last child uses L-shaped connector */
.layer-branch-last {
  width: 10px;
}

/* Remove old conflicting branch connector rules */
.layer-branch-connector::before,
.layer-branch-last::before {
  display: none !important;
}
/* Force solid cream background for bg-card in pixelart theme.
   bg-card expands to oklch(var(--card)/...) but --card is a hex value here,
   so Tailwind's oklch path silently fails → transparent. Override directly. */
.pixelart .bg-card {
  background-color: #f7f3e6 !important;
  opacity: 1 !important;
}

/* Floating panels / dialogs — shadow suppression (properly scoped to pixelart only) */
.pixelart .shadow-2xl,
.pixelart .shadow-lg,
.pixelart .shadow-md {
  box-shadow: none !important;
}

/* HUD overlays — explicitly solid backgrounds */
.pixelart [class*="HUD"],
.pixelart [class*="hud"] {
  background-color: var(--pa-cream) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

/* Slider tracks — pixel art style: visible track, teal range, square thumb */
.pixelart [data-slot="slider-track"] {
  background-color: #8a8ea3 !important;
  border: 1px solid var(--pa-navy) !important;
  border-radius: 0 !important;
  height: 6px !important;
}
[data-slot="slider-range"] {
  background-color: var(--pa-teal, #a8c8f5) !important;
  border-radius: 0 !important;
}

.pixelart [data-slot="slider-range"] {
  background-color: var(--pa-teal) !important;
  border-radius: 0 !important;
}
.pixelart [data-slot="slider-thumb"] {
  background-color: var(--pa-cream) !important;
  border: 2px solid var(--pa-navy) !important;
  border-radius: 0 !important;
  width: 14px !important;
  height: 14px !important;
  box-shadow: none !important;
}

/* Dialog / sheet overlays — subtle dim instead of solid black */
/* Dialog / sheet overlays — subtle dim instead of solid black.
   NOTE: The descendant selectors below are kept as a safety net but the PRIMARY
   fix is --overlay-bg on .pixelart and bg-[var(--overlay-bg,...)] in dialog.tsx,
   because #dialog-root is rendered OUTSIDE the .pixelart DOM tree. */
.pixelart [data-radix-dialog-overlay],
.pixelart [data-radix-alert-dialog-overlay] {
  background: rgba(0, 0, 0, 0.15) !important;
}
[data-radix-dialog-overlay] {
  background: var(--overlay-bg, rgba(0, 0, 0, 0.8)) !important;
}
.pixelart [data-radix-sheet-overlay],
.pixelart [data-vaul-drawer-overlay] {
  background: rgba(0, 0, 0, 0.15) !important;
}

/* Active tool highlight — solid light-blue fill, dark text, no border */
.pixelart .active-tool-indicator {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* When a tool is active, its icon/text should be dark (pa-navy) */
.pixelart div:has(> .active-tool-indicator) > button {
  color: var(--pa-navy) !important;
}

/* Popover / dropdown menus — 1px navy */
.pixelart [data-radix-popper-content-wrapper] > *,
.pixelart [role="menu"],
.pixelart [role="listbox"] {
  border: 1px solid var(--pa-navy) !important;
  border-radius: 0 !important;
}

/* Separator / divider lines — use muted gray-blue */
.pixelart [role="separator"],
.pixelart .separator {
  background-color: var(--pa-divider) !important;
  opacity: 0.7;
}

/* =========================================================
   Mobile / Tablet Responsive — Phase 2
   All rules below ONLY affect screens narrower than 1024px.
   Desktop (≥1024px) is completely unchanged.
   ========================================================= */

@media (max-width: 1023px) {
  /* Issue #11 — Tab bar: smaller minWidth so tabs don't overflow on phones */
  .tabbar-tab {
    min-width: 60px !important;
  }

  /* Issue #14d — Tab bar items: taller touch targets */
  .tabbar-tab {
    min-height: 44px;
  }

  /* Issue #8 — MenuBar triggers: taller touch targets */
  .menubar-trigger {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* =========================================================
   Mobile / Tablet Responsive — Phase 3
   All rules below ONLY affect screens narrower than 768px.
   Desktop (≥1024px) is completely unchanged.
   ========================================================= */

/* Issue #15 — Tab font size: replace inline 12px with responsive class */
.tabbar-tab-text {
  font-size: 16px;
}

@media (max-width: 767px) {
  /* Issue #15 — Gently bump text-xs from 12px to 13px on mobile */
  .text-xs {
    font-size: 16px !important;
    line-height: 1.25rem !important;
  }

  /* Tab label text size bump */
  .tabbar-tab-text {
    font-size: 16px;
  }

  /* Admin table text bump */
  .admin-table td,
  .admin-table th {
    font-size: 16px;
  }

  /* Profile section label bump */
  .profile-section .text-xs {
    font-size: 16px !important;
  }

  /* Issue #6 — ToolOptionsBar: fixed bottom bar rules are now handled by
     the @media (pointer: coarse) block above, which covers ALL touch devices
     in any orientation. Nothing to override here for the toolbar itself. */

  .tool-options-inner {
    gap: 10px;
    align-items: center;
  }

  /* Issue #9 — ToolPanel tooltips: show above on mobile instead of to the right */
  .tooltip-mobile-above {
    left: 50% !important;
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
  }

  /* Issue #21 — ColorQuickDock: constrain width on narrow screens */
  .color-quick-dock-container {
    max-width: calc(100vw - 80px);
  }
}

/* =========================================================
   Mobile / Tablet Responsive — Phase 6
   Issue #22: Safe area insets for notched phones
   Issue #18: Landscape orientation handling
   All changes are NO-OPs on desktop.
   ========================================================= */

/* Safe area: header top padding on notched phones */
.header-safe-area {
  padding-top: var(--safe-area-top);
}

/* Safe area: left sidebar / tool panel left padding */
.sidebar-safe-area-left {
  padding-left: var(--safe-area-left);
}

/* Safe area: right sidebar right padding */
.sidebar-safe-area-right {
  padding-right: var(--safe-area-right);
}

/* Safe area: bottom bar / timeline / mobile shortcut bar */
.bottom-safe-area {
  padding-bottom: var(--safe-area-bottom);
}

/* Mobile shortcut bar: respect home-indicator area */
@media (max-width: 1023px) {
  [data-ocid="mobile-shortcut-bar"] {
    bottom: max(1.5rem, calc(1.5rem + var(--safe-area-bottom)));
  }

  /* Timeline bottom safe area on mobile */
  .timeline-container {
    padding-bottom: var(--safe-area-bottom);
  }

  /* Left tool panel: respect side notch */
  .tool-panel-container {
    padding-left: var(--safe-area-left);
  }

  /* Right sidebar: respect side notch */
  .right-sidebar-container {
    padding-right: var(--safe-area-right);
  }
}

/* =========================================================
   Touch device layout — fixed-region architecture.
   ALL touch rules use @media(pointer: coarse) — NOT max-width.
   Tablets in landscape are ≥1024px wide and escape width queries.
   Desktop (non-touch) is COMPLETELY unchanged by every rule here.

   Architecture (portrait, two-row toolbar ~88px):
     [Header — 56px, normal flow]
     [Left toolbar — fixed height: 100vh - 56px - 88px, internal scroll]
     [Editor column — flex-1, pb: 88px so timeline clears toolbar]
       [ToolOptionsBar — position:fixed bottom:0, always on top]
       [TabBar — shrink-0]
       [Canvas area — flex-1 overflow-hidden]
       [Timeline — shrink-0, sits above toolbar thanks to column pb]
     [Right sidebar — overlay z-50]

   Architecture (landscape, single-row toolbar ~44px):
     Same but toolbar height is 44px.
   ========================================================= */

/* ── CSS custom properties for toolbar height ── */
@media (pointer: coarse) {
  :root {
    --touch-toolbar-height: 96px; /* portrait: two rows with taller icons */
    --touch-header-height: 56px; /* h-14 */
  }
}
@media (pointer: coarse) and (orientation: landscape) {
  :root {
    --touch-toolbar-height: 52px; /* landscape: single row with taller icons */
  }
}

@media (pointer: coarse) {
  /* ── Bottom toolbar: fixed to bottom, always on top ── */
  .tool-options-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: unset !important;
    border-top: 1px solid oklch(var(--border)) !important;
    border-bottom: none !important;
    z-index: 110 !important;
    background: oklch(var(--background)) !important;
    padding-bottom: var(--safe-area-bottom) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Row 1: sliders — scrollable horizontally if needed */
  .tool-options-row-sliders {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    min-width: 0;
    padding-top: 4px !important;
    padding-bottom: 2px !important;
  }

  /* Row 2: toggle buttons — always visible on touch devices */
  .tool-options-row-toggles {
    display: flex !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
    gap: 4px !important;
    flex-wrap: wrap;
  }

  /* Sliders: minimum width for touch usability */
  .tool-options-slider [role="slider"],
  .tool-options-slider .w-32,
  .tool-options-slider .w-24 {
    min-width: 60px !important;
  }

  /* Toggle buttons: min 36px touch target */
  .tool-options-toggles button {
    min-height: 36px;
    min-width: 36px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide the desktop-only Row 1 toggle buttons on ALL touch devices.
     Prevents doubled MX/MY/PP/Grid on tablets ≥1024px (e.g. iPad landscape)
     where Tailwind's lg:flex activates despite being a touch device. */
  .toggle-buttons-row-1 {
    display: none !important;
  }

  /* ── Editor column: padding-bottom = toolbar height.
     This is the SINGLE source of spacing — timeline and canvas
     do NOT add their own bottom padding/margin. The fixed toolbar
     floats above; the column content ends at the toolbar top edge. ── */
  .editor-column-mobile-pad {
    padding-bottom: var(--touch-toolbar-height) !important;
  }

  /* Canvas area: NO additional bottom padding — editor column handles it. */
  .canvas-area-mobile-pad {
    padding-bottom: 0 !important;
  }

  /* Timeline: NO bottom margin — editor column handles spacing. */
  .timeline-container {
    margin-bottom: 0 !important;
  }

  /* ── Left toolbar (ToolPanel): fixed height with internal scroll.
     Uses 100vh (actual viewport) NOT 100% (flex container which may differ).
     Height = viewport - header - bottom toolbar.
     Scroll ends exactly at the toolbar top edge on ALL touch devices
     in ANY orientation. Desktop is never touched. ── */
  [data-tool-panel] {
    height: calc(
      100vh -
      var(--touch-header-height) -
      var(--touch-toolbar-height)
    );
    max-height: calc(
      100vh -
      var(--touch-header-height) -
      var(--touch-toolbar-height)
    );
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
    flex-shrink: 0;
  }

  [data-tool-panel]::-webkit-scrollbar {
    display: none;
  }
}

/* ── Landscape: single-row toolbar (44px), updated ToolPanel height ──
   NOTE: No max-height constraint here. iPad landscape is ~768px tall
   and DOES NOT match max-height:500px. Use (pointer:coarse) + (orientation:landscape)
   WITHOUT any height gate to cover ALL touch devices in landscape. ── */
@media (pointer: coarse) and (orientation: landscape) {
  /* Single-row toolbar in landscape */
  .tool-options-bar {
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: 52px !important;
    min-height: 52px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  /* Hide the second toggle row in landscape — one row only */
  .tool-options-row-toggles {
    display: none !important;
  }

  /* ToolPanel height for landscape (44px toolbar) — already handled by CSS
     custom property --touch-toolbar-height: 44px set above for landscape.
     Explicitly re-declare all scroll properties so Safari/iOS doesn't
     lose them when the more-specific landscape rule applies. */
  [data-tool-panel] {
    height: calc(
      100vh -
      var(--touch-header-height) -
      var(--touch-toolbar-height)
    ) !important;
    max-height: calc(
      100vh -
      var(--touch-header-height) -
      var(--touch-toolbar-height)
    ) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
  }

  /* Tab bar: reduce height in landscape to save vertical space */
  .tabbar-tab {
    min-height: 36px !important;
  }

  /* Mobile shortcut bar: smaller in landscape */
  [data-ocid="mobile-shortcut-bar"] {
    bottom: max(0.5rem, calc(0.5rem + var(--safe-area-bottom)));
    transform: translateX(-50%) scale(0.85);
    transform-origin: bottom center;
  }
}

/* Phones in landscape only (max-height: 500px) — reduce header height */
@media (orientation: landscape) and (max-height: 500px) {
  /* Issue #18 — Reduce header height in landscape on phones */
  .header-landscape-compact {
    height: 2.5rem !important; /* h-10 instead of h-14 */
  }
}

/* Fix 2 — Right sidebar toggle always visible on ALL touch devices.
   The button has class lg:hidden which hides it at ≥1024px. iPad landscape
   is 1024px+ so a max-width: 1279px rule fails. Using (pointer: coarse)
   instead targets touch devices by input type — works on every phone and
   tablet in any orientation, regardless of screen width. */
@media (pointer: coarse) {
  [data-ocid="mobile.sidebar_toggle"] {
    display: flex !important;
  }
}

.pixelart .timeline-container {
  border-top: 2px solid var(--pa-gray) !important;
  border-bottom: 2px solid var(--pa-gray) !important;
}

/* Right sidebar bottom border to close the gap at bottom-right corner */
.pixelart .right-sidebar-container {
  border-bottom: 2px solid var(--pa-gray) !important;
}

/* Scoped teal: only TabsTrigger (subtab/top tabs) and Toggle buttons */
.pixelart [role="tab"][data-state="active"] {
  background-color: var(--pa-teal) !important;
  color: var(--pa-navy) !important;
}

/* Inactive tabs in Pixel Art theme — same dark color as active, not muted */
.pixelart [role="tab"][data-state="inactive"] {
  color: var(--pa-navy) !important;
}

.pixelart button[data-state="on"] {
  background-color: var(--pa-teal) !important;
  color: var(--pa-navy) !important;
}

/* Active layer row in Pixel Art theme */
.pixelart .bg-primary.text-primary-foreground {
  /* Nested layer rows — distinguished by indentation and tree guides only */
  .pixelart .layer-row-nested {
    /* No extra border weight — same as all rows */
  }

  /* Group rows in Pixel Art theme — full-width, aligned to left */
  .pixelart .layer-group-row {
    margin-right: 0 !important;
    border-left: 1px solid var(--pa-gray) !important;
  }
  .pixelart .layer-group-row {
    margin-right: 0 !important;
    border-left: 1px solid var(--pa-gray) !important;
  }

  /* Settings subtitles — ensure muted-foreground is not white in Pixel Art */
  .layer-row-compact {
    --layer-row-py: 3px;
    --layer-row-gap: 6px;
  }

  /* Tree guide gutter — lives outside row frames, dedicated hierarchy column */
  .layer-tree-gutter {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    border-right: 1px solid var(--pa-guide, rgba(107, 111, 130, 0.15));
  }

  /* Vertical guide line from parent to children */
  .layer-tree-gutter.has-parent::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-color: var(--pa-guide, rgba(107, 111, 130, 0.2));
  }

  /* Branch connectors — horizontal lines from vertical guide to row content */
  .layer-tree-gutter .layer-branch-connector,
  .layer-tree-gutter .layer-branch-last {
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 1px;
    background-color: var(--pa-guide, rgba(107, 111, 130, 0.3));
  }

  /* Last child in group */
  .layer-tree-gutter .layer-branch-last {
    width: 10px;
    height: 1px;
    background-color: var(--pa-guide, rgba(107, 111, 130, 0.3));
  }

  /* Remove old conflicting rules */
  .layer-branch-connector {
    position: relative;
  }

  /* Disable old branch connector pseudo-elements */
  .layer-branch-connector::before,
  .layer-branch-last::before {
    display: none !important;
  }

  /* Nested layer rows — 25% shorter row height than top-level */
  .layer-row-nested {
    --layer-row-py: 2px;
  }

  /* All themes: nested rows are more compact */
  .layer-row-nested.flex.items-center {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .pixelart .layer-row-nested {
    /* No extra border rules — consistent with all rows */
  }

  .pixelart .layer-row-nested.flex.items-center {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  .pixelart .layer-row-nested.flex.items-center {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .layer-group-header {
    font-weight: 600;
  }
  .pixelart .layer-group-header {
    font-family: "Pixel Operator", monospace;
    border-color: var(--pa-gray) !important;
    border-width: 1px !important;
    background-color: rgba(107, 111, 130, 0.08) !important;
  }

  .pixelart .layer-row[data-active="true"],
  .pixelart .layer-row.active,
  .pixelart .layer-group-row[data-active="true"],
  .pixelart .layer-group-row.active {
    border-left: 3px solid var(--pa-teal) !important;
    background-color: rgba(200, 221, 247, 0.08) !important;
    color: var(--pa-navy) !important;
  }

  .pixelart .layer-row[data-active="true"] .text-primary-foreground,
  .pixelart .layer-row.active .text-primary-foreground,
  .pixelart .layer-group-row[data-active="true"] .text-primary-foreground,
  .pixelart .layer-group-row.active .text-primary-foreground {
    color: var(--pa-navy) !important;
  }

  .pixelart .bg-primary.text-primary-foreground.layer-row,
  .pixelart .bg-primary.text-primary-foreground.layer-group-row {
    background-color: rgba(200, 221, 247, 0.08) !important;
    border-left: 3px solid var(--pa-teal) !important;
    color: var(--pa-navy) !important;
  }

  /* Smooth drag-and-drop transitions for layer rows */
  .layer-row,
  .layer-group-row {
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s
      ease;
  }

  /* Ghost/placeholder style for dragged item */
  .layer-row-dragging {
    opacity: 0.4;
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /* Placeholder indicator for drop target */
  .layer-row-placeholder {
    position: relative;
  }

  /* Active/selected layer row — subtle left accent only */
  .pixelart .layer-row[data-active="true"],
  .pixelart .layer-row.active,
  .pixelart .layer-group-row[data-active="true"],
  .pixelart .layer-group-row.active {
    border-left: 3px solid var(--pa-teal) !important;
    background-color: rgba(200, 221, 247, 0.04) !important;
    color: var(--pa-navy) !important;
  }

  .pixelart .layer-row[data-active="true"] .text-primary-foreground,
  .pixelart .layer-row.active .text-primary-foreground,
  .pixelart .layer-group-row[data-active="true"] .text-primary-foreground,
  .pixelart .layer-group-row.active .text-primary-foreground {
    color: var(--pa-navy) !important;
  }

  .pixelart .bg-primary.text-primary-foreground.layer-row,
  .pixelart .bg-primary.text-primary-foreground.layer-group-row {
    background-color: rgba(200, 221, 247, 0.04) !important;
    border-left: 3px solid var(--pa-teal) !important;
    color: var(--pa-navy) !important;
  }
}

/* Smooth tree reordering transitions */
.layer-tree-container {
  transition: height 0.2s ease;
}

/* Disable transitions on the dragged element itself for instant response */
.layer-row-dragging.layer-row,
.layer-row-dragging.layer-group-row {
  transition: none;
}

.layer-expanded-controls {
  padding: 8px 12px;
}

/* Insertion line indicators for drag-and-drop */
.layer-insertion-line,
.layer-insertion-line-after {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--pa-teal, #c8ddf7);
  pointer-events: none;
  z-index: 10;
}

.layer-insertion-line {
  top: -1px;
}

.layer-insertion-line-after {
  bottom: -1px;
}

/* Row hover state during drag operations */
.layer-row-over {
  background-color: rgba(200, 221, 247, 0.12);
  border-color: var(--pa-teal, #c8ddf7);
}

/* Group drop target highlight */
.layer-group-drop-target {
  background-color: rgba(200, 221, 247, 0.08);
  border-color: var(--pa-teal, #c8ddf7);
  border-style: dashed;
}

/* Soft hover when dragged item is over a group row but not in the inside zone */
.layer-group-soft-hover {
  background-color: rgba(200, 221, 247, 0.08) !important;
  border-color: rgba(200, 221, 247, 0.4) !important;
}

/* Stronger group inside-drop highlight */
.layer-group-inside-drop {
  background-color: rgba(168, 200, 245, 0.15) !important;
  border-color: var(--pa-teal, #c8ddf7) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 3px rgba(200, 221, 247, 0.35), 0 0 12px
    rgba(200, 221, 247, 0.2);
}

.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  height: 28px;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pa-navy, #2a2d40);
  background-color: rgba(107, 111, 130, 0.08);
  border-bottom: 1px solid var(--pa-divider, #8a8ea3);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sidebar-section-header:hover {
  background-color: rgba(107, 111, 130, 0.14);
}

.dark .sidebar-section-header {
  color: oklch(var(--foreground));
  background-color: rgba(255, 255, 255, 0.04);
  border-bottom-color: oklch(var(--border));
}

.dark .sidebar-section-header:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.pixelart .sidebar-section-header {
  font-family: "Pixel Operator", monospace;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: rgba(42, 45, 64, 0.06);
  border-bottom: 1px solid var(--pa-divider, #8a8ea3);
}

.pixelart .sidebar-section-header:hover {
  background-color: rgba(42, 45, 64, 0.12);
}

.sidebar-section-content {
  padding: 6px 8px;
}

.sidebar-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.sidebar-slider-row label {
  width: 56px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pixelart .sidebar-slider-row label {
  font-family: "Pixel Operator", monospace;
  font-size: 16px;
  width: 60px;
}

.sidebar-slider-row [data-slot="slider-track"] {
  flex: 1 1 0%;
  min-width: 0;
}

.sidebar-slider-row .slider-value {
  width: 32px;
  flex-shrink: 0;
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.pixelart .sidebar-slider-row .slider-value {
  font-family: "Pixel Operator", monospace;
  font-size: 16px;
  width: 36px;
}

.sidebar-section-content.compact {
  padding: 4px 6px;
}

.sidebar-section-header.compact {
  padding: 3px 6px;
  font-size: 8px;
}

.sidebar-section-header .section-icon {
  color: var(--pa-accent, #c8ddf7);
  margin-right: 6px;
  flex-shrink: 0;
}

.sidebar-section-header .section-header-icon {
  image-rendering: pixelated;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: middle;
  display: inline-block;
}

.sidebar-section-header .section-chevron {
  color: var(--pa-accent, #c8ddf7);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.15s ease;
  display: none;
}

.sidebar-section-header.collapsed .section-chevron {
  transform: rotate(-90deg);
}

.pixelart .layer-row[data-active="true"],
.pixelart .layer-row.active,
.pixelart .layer-group-row[data-active="true"],
.pixelart .layer-group-row.active {
  border-left: 3px solid var(--pa-accent, #c8ddf7) !important;
  background-color: rgba(168, 200, 245, 0.15) !important;
  color: var(--pa-navy) !important;
}

.pixelart .bg-primary.text-primary-foreground.layer-row,
.pixelart .bg-primary.text-primary-foreground.layer-group-row {
  background-color: rgba(168, 200, 245, 0.15) !important;
  border-left: 3px solid var(--pa-accent, #c8ddf7) !important;
  color: var(--pa-navy) !important;
}

.layer-insertion-line,
.layer-insertion-line-after {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--pa-accent, #c8ddf7);
  pointer-events: none;
  z-index: 10;
}

/* ==========================================================================
   ICPixel Frame Kit v1 — scoped suppression of old CSS borders on framed
   sections. The .has-framekit class is applied alongside a <FrameKitBorder>
   overlay on each of the 7 main editor sections. It transparently suppresses
   the conflicting structural borders (top/left/right/bottom) that the global
   .pixelart rules above paint on header / aside / [data-tool-panel] /
   .right-sidebar-panel / .timeline-container / .editor-column-mobile-pad /
   .bg-card. Other elements that share those selectors keep their borders.
   ========================================================================== */
.pixelart .has-framekit,
.pixelart .has-framekit.has-framekit,
.pixelart header.has-framekit,
.pixelart header.has-framekit[class*="border-b"],
.pixelart header.has-framekit.bg-card,
.pixelart aside.has-framekit,
.pixelart [data-tool-panel].has-framekit,
.pixelart .right-sidebar-panel.has-framekit,
.pixelart .timeline-container.has-framekit,
.pixelart .editor-column-mobile-pad.has-framekit,
.pixelart .tabbar-root.has-framekit,
.pixelart .right-sidebar-container.has-framekit,
.pixelart .has-framekit.bg-card,
.pixelart .has-framekit[class*="bg-card"] {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  /* Neutralize the legacy 2px border slot itself, not just its color.
     Without this the old border-width/border-style still reserve layout
     space and push the Frame Kit overlay inward. Kept as separate
     longhand declarations to avoid Biome noShorthandPropertyOverrides
     flagging a shorthand border-color after the longhands above. */
  border-width: 0 !important;
  border-style: none !important;
}

/* ==========================================================================
   Strengthened legacy-border suppression for timeline-container and
   tabbar-root. These two selectors carry legacy 2px borders set via the
   `border-top`/`border-bottom` SHORTHAND with !important (timeline-container
   at lines 1141-1144, tabbar-root at lines 430-433 and 504). The shorthand
   expands to longhand border-*-width/style/color, so we neutralize every
   longhand side explicitly here. This block is (0,3,0) specificity — higher
   than the (0,2,0) legacy rules — AND comes later in source order, so it
   definitively overrides. !important on all four sides for width, style, and
   color guarantees the legacy 2px slot cannot reserve layout space or paint.
   ========================================================================== */
.pixelart .timeline-container.has-framekit,
.pixelart .tabbar-root.has-framekit,
.pixelart .right-sidebar-panel.has-framekit,
.pixelart .tool-options-bar.has-framekit {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  border-top-style: none !important;
  border-bottom-style: none !important;
  border-left-style: none !important;
  border-right-style: none !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}
.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
}
.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}
.file\:inline-flex::file-selector-button {
  display: inline-flex;
}
.file\:h-7::file-selector-button {
  height: 1.75rem;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}
.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#689F38\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(104 159 56 / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent\/40:hover {
  background-color: oklch(var(--accent) / 0.4);
}
.hover\:bg-accent\/50:hover {
  background-color: oklch(var(--accent) / 0.5);
}
.hover\:bg-accent\/80:hover {
  background-color: oklch(var(--accent) / 0.8);
}
.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}
.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}
.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}
.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-4:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:border-b:focus {
  border-bottom-width: 1px;
}
.focus\:border-primary:focus {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-primary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}
.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:z-10:focus-visible {
  z-index: 10;
}
.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}
.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-4:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.active\:bg-accent\/80:active {
  background-color: oklch(var(--accent) / 0.8);
}
.active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}
.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}
.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
}
.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}
.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}
.data-\[active\=true\]\:z-10[data-active="true"] {
  z-index: 10;
}
.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}
.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}
.data-\[state\=inactive\]\:hidden[data-state="inactive"] {
  display: none;
}
.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}
.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}
.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}
.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}
.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}
.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}
.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}
.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}
.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}
.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}
.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}
.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}
.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}
.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}
.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}
.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}
.data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
}
.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}
.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}
.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}
.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}
.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}
.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}
.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}
.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}
.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}
.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
}
.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
}
.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}
.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}
.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}
.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}
.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
}
.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}
.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}
.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}
.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}
.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar));
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}
.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}
.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}
.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}
.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}
.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}
.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}
.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}
.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}
.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}
.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}
.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}
@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:max-w-\[95vw\] {
    max-width: 95vw;
  }

  .sm\:max-w-lg {
    max-width: 32rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-none {
    max-width: none;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:pl-2\.5 {
    padding-left: 0.625rem;
  }

  .sm\:pr-2\.5 {
    padding-right: 0.625rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
}
@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:min-h-0 {
    min-height: 0px;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:min-w-0 {
    min-width: 0px;
  }

  .md\:max-w-2xl {
    max-width: 42rem;
  }

  .md\:max-w-3xl {
    max-width: 48rem;
  }

  .md\:max-w-\[425px\] {
    max-width: 425px;
  }

  .md\:max-w-\[500px\] {
    max-width: 500px;
  }

  .md\:max-w-md {
    max-width: 28rem;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

  .md\:gap-2 {
    gap: 0.5rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:pr-4 {
    padding-right: 1rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:opacity-0 {
    opacity: 0;
  }

  .md\:after\:hidden::after {
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media (min-width: 1024px) {

  .lg\:static {
    position: static;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-\[120px\] {
    height: 120px;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:min-h-\[120px\] {
    min-height: 120px;
  }

  .lg\:min-w-0 {
    min-width: 0px;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:border-b {
    border-bottom-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }
}
.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>button\]\:hidden>button {
  display: none;
}
.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}
.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}
.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}
.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}
.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}
.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}
.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}
.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}
.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}
.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:translate-y-0\.5>svg {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}
.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: oklch(var(--muted-foreground) / 1);
}
.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}
[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}
[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}
[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}
[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}
a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}