/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: var(--font-inter), 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Fira Code', ui-monospace, Consolas, monospace;
    --color-red-50: #2e1012;
    --color-red-100: #3b1518;
    --color-red-200: rgba(248, 113, 113, 0.35);
    --color-red-300: rgba(248, 113, 113, 0.45);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: #f87171;
    --color-red-800: #fca5a5;
    --color-amber-50: #2b2109;
    --color-amber-100: #3a2c0d;
    --color-amber-200: rgba(251, 191, 36, 0.35);
    --color-amber-300: rgba(251, 191, 36, 0.45);
    --color-amber-700: #fbbf24;
    --color-amber-800: #fcd34d;
    --color-emerald-50: #0c231a;
    --color-emerald-100: #123528;
    --color-emerald-300: rgba(61, 139, 106, 0.55);
    --color-emerald-700: #58c98f;
    --color-emerald-800: #86e0b3;
    --color-sky-50: #0a2130;
    --color-sky-100: #0e2c3f;
    --color-sky-200: rgba(125, 211, 252, 0.3);
    --color-sky-300: rgba(125, 211, 252, 0.45);
    --color-sky-700: #7dd3fc;
    --color-sky-800: #bae6fd;
    --color-violet-100: #251b3d;
    --color-violet-300: rgba(196, 181, 253, 0.4);
    --color-violet-700: #c4b5fd;
    --color-purple-100: #2b1a41;
    --color-purple-300: rgba(216, 180, 254, 0.4);
    --color-purple-800: #d8b4fe;
    --color-pink-100: #391424;
    --color-pink-700: #f9a8d4;
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-neutral-600: oklch(43.9% 0 none);
    --color-neutral-700: oklch(37.1% 0 none);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --blur-sm: 8px;
    --blur-xl: 24px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-obsidian: #09090b;
    --color-mercury: #fafafa;
    --color-silver: #a1a1aa;
    --color-silver-dark: #71717a;
    --color-brand-50: rgba(61, 139, 106, 0.08);
    --color-brand-100: #143026;
    --color-brand-300: #7fd1ab;
    --color-brand-400: #57b58c;
    --color-brand-500: #3d8b6a;
    --color-brand-600: #2d6a4f;
    --font-display: var(--font-grotesk), 'Space Grotesk', var(--font-sans);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0px;
  }
  .inset-x-0 {
    inset-inline: 0px;
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .top-0 {
    top: 0px;
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .bottom-0 {
    bottom: 0px;
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[90\] {
    z-index: 90;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-\[6px\] {
    margin-top: 6px;
  }
  .-mb-px {
    margin-bottom: -1px;
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-\[26px\] {
    height: 26px;
  }
  .h-\[28px\] {
    height: 28px;
  }
  .h-\[30px\] {
    height: 30px;
  }
  .h-\[32px\] {
    height: 32px;
  }
  .h-full {
    height: 100%;
  }
  .max-h-\[92vh\] {
    max-height: 92vh;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-\[3px\] {
    width: 3px;
  }
  .w-\[26px\] {
    width: 26px;
  }
  .w-\[28px\] {
    width: 28px;
  }
  .w-\[30px\] {
    width: 30px;
  }
  .w-\[32px\] {
    width: 32px;
  }
  .w-\[46px\] {
    width: 46px;
  }
  .w-\[240px\] {
    width: 240px;
  }
  .w-full {
    width: 100%;
  }
  .max-w-\[30ch\] {
    max-width: 30ch;
  }
  .max-w-\[70ch\] {
    max-width: 70ch;
  }
  .max-w-\[200px\] {
    max-width: 200px;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-\[380px\] {
    max-width: 380px;
  }
  .max-w-\[420px\] {
    max-width: 420px;
  }
  .min-w-0 {
    min-width: 0px;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-\[2px\] {
    gap: 2px;
  }
  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .\!border-brand-300\/40 {
    border-color: color-mix(in srgb, #7fd1ab 40%, transparent) !important;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-brand-300) 40%, transparent) !important;
    }
  }
  .border-amber-200 {
    border-color: var(--color-amber-200);
  }
  .border-amber-300 {
    border-color: var(--color-amber-300);
  }
  .border-brand-400 {
    border-color: var(--color-brand-400);
  }
  .border-emerald-300 {
    border-color: var(--color-emerald-300);
  }
  .border-purple-300 {
    border-color: var(--color-purple-300);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-red-300 {
    border-color: var(--color-red-300);
  }
  .border-sky-200 {
    border-color: var(--color-sky-200);
  }
  .border-sky-300 {
    border-color: var(--color-sky-300);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-violet-300 {
    border-color: var(--color-violet-300);
  }
  .border-white\/5 {
    border-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .border-white\/8 {
    border-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-white\/\[0\.04\] {
    border-color: color-mix(in srgb, #fff 4%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-black\/60 {
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }
  .bg-black\/70 {
    background-color: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }
  .bg-brand-50 {
    background-color: var(--color-brand-50);
  }
  .bg-brand-100 {
    background-color: var(--color-brand-100);
  }
  .bg-brand-500\/70 {
    background-color: color-mix(in srgb, #3d8b6a 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand-500) 70%, transparent);
    }
  }
  .bg-current {
    background-color: currentcolor;
  }
  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }
  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }
  .bg-obsidian\/80 {
    background-color: color-mix(in srgb, #09090b 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-obsidian) 80%, transparent);
    }
  }
  .bg-pink-100 {
    background-color: var(--color-pink-100);
  }
  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-sky-50\/60 {
    background-color: color-mix(in srgb, #0a2130 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-50) 60%, transparent);
    }
  }
  .bg-sky-100 {
    background-color: var(--color-sky-100);
  }
  .bg-violet-100 {
    background-color: var(--color-violet-100);
  }
  .bg-white\/5 {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/\[0\.03\] {
    background-color: color-mix(in srgb, #fff 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
  }
  .bg-white\/\[0\.04\] {
    background-color: color-mix(in srgb, #fff 4%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
  }
  .bg-white\/\[0\.06\] {
    background-color: color-mix(in srgb, #fff 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    }
  }
  .bg-white\/\[0\.08\] {
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-brand-600 {
    --tw-gradient-from: var(--color-brand-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-brand-300 {
    --tw-gradient-to: var(--color-brand-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .object-cover {
    object-fit: cover;
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-7 {
    padding: calc(var(--spacing) * 7);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .p-118 {
    padding: calc(var(--spacing) * 118);
  }
  .p-204 {
    padding: calc(var(--spacing) * 204);
  }
  .\!px-2 {
    padding-inline: calc(var(--spacing) * 2) !important;
  }
  .\!px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5) !important;
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .\!py-1 {
    padding-block: var(--spacing) !important;
  }
  .\!py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-px {
    padding-block: 1px;
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-display {
    font-family: var(--font-display);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10\.5px\] {
    font-size: 10.5px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11\.5px\] {
    font-size: 11.5px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12\.5px\] {
    font-size: 12.5px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13\.5px\] {
    font-size: 13.5px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[17px\] {
    font-size: 17px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }
  .text-\[19px\] {
    font-size: 19px;
  }
  .text-\[26px\] {
    font-size: 26px;
  }
  .text-\[28px\] {
    font-size: 28px;
  }
  .text-\[44px\] {
    font-size: 44px;
  }
  .leading-\[1\.05\] {
    --tw-leading: 1.05;
    line-height: 1.05;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[1\.6px\] {
    --tw-tracking: 1.6px;
    letter-spacing: 1.6px;
  }
  .tracking-\[2px\] {
    --tw-tracking: 2px;
    letter-spacing: 2px;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .\!whitespace-normal {
    white-space: normal !important;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-amber-700 {
    color: var(--color-amber-700);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-brand-300 {
    color: var(--color-brand-300);
  }
  .text-emerald-700 {
    color: var(--color-emerald-700);
  }
  .text-emerald-800 {
    color: var(--color-emerald-800);
  }
  .text-mercury {
    color: var(--color-mercury);
  }
  .text-pink-700 {
    color: var(--color-pink-700);
  }
  .text-purple-800 {
    color: var(--color-purple-800);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-silver {
    color: var(--color-silver);
  }
  .text-silver-dark {
    color: var(--color-silver-dark);
  }
  .text-sky-700 {
    color: var(--color-sky-700);
  }
  .text-sky-800 {
    color: var(--color-sky-800);
  }
  .text-violet-700 {
    color: var(--color-violet-700);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-zinc-300 {
    color: var(--color-zinc-300);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .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,);
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-black\/40 {
    --tw-shadow-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  @media (hover: hover) {
    .hover\:text-silver:hover {
      color: var(--color-silver);
    }
  }
  @media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width >= 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width >= 64rem) {
    .lg\:flex {
      display: flex;
    }
    .lg\:hidden {
      display: none;
    }
    .lg\:grid-cols-\[1\.05fr_1fr\] {
      grid-template-columns: 1.05fr 1fr;
    }
  }
  @media (width >= 80rem) {
    .xl\:p-16 {
      padding: calc(var(--spacing) * 16);
    }
    .xl\:text-\[52px\] {
      font-size: 52px;
    }
  }
}
:root {
  --bg: #09090b;
  --s1: #101013;
  --s2: #131316;
  --s3: #18181b;
  --tx: #fafafa;
  --t2: #a1a1aa;
  --t3: #71717a;
  --em: #2d6a4f;
  --eml: #7fd1ab;
  --bl: #7dd3fc;
  --pu: #c4b5fd;
  --am: #fbbf24;
  --rd: #f87171;
  --bd: rgba(255, 255, 255, 0.06);
  --bd2: rgba(255, 255, 255, 0.13);
  --accent: #2d6a4f;
  --accent-fg: #7fd1ab;
  --danger: #fca5a5;
  --panel: var(--s1);
  --fg: var(--tx);
  --dim: var(--t3);
  --line: var(--bd);
}
html {
  font-size: 14px;
}
body {
  color: var(--color-mercury);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-sans);
  background: radial-gradient(1100px 520px at 75% -12%, rgba(45, 106, 79, 0.18), transparent 60%),
    radial-gradient(800px 400px at -10% 110%, rgba(27, 67, 50, 0.12), transparent 55%),
    #09090b;
}
h1,
h2,
h3,
.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
a {
  color: var(--accent-fg);
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
code,
pre {
  font-family: var(--font-mono);
  font-size: 11px;
}
pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes shimmer {
  from {
    background-position: -400px 0;
  }
  to {
    background-position: 400px 0;
  }
}
@keyframes pulseDot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(61, 139, 106, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(61, 139, 106, 0);
  }
}
@keyframes drawIn {
  from {
    stroke-dashoffset: 1200;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes floatGlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -20px) scale(1.08);
  }
}
@layer components {
  .anim-fade-up {
    animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .anim-scale-in {
    animation: scaleIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .anim-slide-right {
    animation: slideInRight 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .stagger > * {
    animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .stagger > *:nth-child(1) {
    animation-delay: 0.02s;
  }
  .stagger > *:nth-child(2) {
    animation-delay: 0.07s;
  }
  .stagger > *:nth-child(3) {
    animation-delay: 0.12s;
  }
  .stagger > *:nth-child(4) {
    animation-delay: 0.17s;
  }
  .stagger > *:nth-child(5) {
    animation-delay: 0.22s;
  }
  .stagger > *:nth-child(6) {
    animation-delay: 0.27s;
  }
  .stagger > *:nth-child(7) {
    animation-delay: 0.32s;
  }
  .stagger > *:nth-child(8) {
    animation-delay: 0.37s;
  }
  .skeleton {
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s linear infinite;
  }
  .pulse-dot {
    animation: pulseDot 2s ease-in-out infinite;
  }
  .draw-in {
    stroke-dasharray: 1200;
    animation: drawIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .card {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
    border-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 45%, rgba(45, 106, 79, 0.06) 100%),
      #101013;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  }
  .card-hover:hover {
    border-color: rgba(61, 139, 106, 0.35);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(45, 106, 79, 0.12);
    transform: translateY(-2px);
  }
  .auth-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    will-change: transform;
    animation: floatGlow 18s ease-in-out infinite;
  }
  .auth-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
  }
  .glass {
    background: rgba(19, 19, 22, 0.72);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .btn-primary, .btn-ghost, .btn-outline, .btn-danger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: 13px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 40%;
    }
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .btn-primary {
    color: var(--color-white);
    background: linear-gradient(135deg, #2d6a4f, #1b4332);
    box-shadow: 0 2px 12px rgba(45, 106, 79, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .btn-primary:hover {
    box-shadow: 0 4px 20px rgba(45, 106, 79, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    filter: brightness(1.15);
  }
  .btn-ghost {
    background-color: transparent;
    color: var(--color-silver);
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-mercury);
      }
    }
  }
  .btn-outline {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    color: var(--color-zinc-300);
  }
  .btn-outline:hover {
    color: var(--color-mercury);
    border-color: rgba(61, 139, 106, 0.5);
    background: rgba(61, 139, 106, 0.1);
    transform: translateY(-1px);
  }
  .btn-danger {
    background-color: var(--color-red-600);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .inp {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 4%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 13px;
    color: var(--color-mercury);
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: var(--color-silver-dark);
    }
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .inp:focus {
    border-color: rgba(61, 139, 106, 0.6);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(61, 139, 106, 0.18);
  }
  .lbl {
    margin-bottom: calc(var(--spacing) * 1.5);
    display: block;
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-silver-dark);
    text-transform: uppercase;
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .kbd {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-silver);
  }
  .seg {
    display: flex;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
    padding: calc(var(--spacing) * 0.5);
    font-size: 13px;
  }
  .seg > button {
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-silver);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .seg > button.on {
    color: var(--color-white);
    background: linear-gradient(135deg, #2d6a4f, #1b4332);
    box-shadow: 0 2px 10px rgba(45, 106, 79, 0.35);
  }
  .seg > button:not(.on):hover {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    color: var(--color-mercury);
  }
  .tbl {
    width: 100%;
    font-size: 13px;
  }
  .tbl th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: 10.5px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    white-space: nowrap;
    color: var(--color-silver-dark);
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
  }
  .tbl td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, #fff 4%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    white-space: nowrap;
  }
  .tbl tbody tr {
    transition: background 0.15s;
  }
  .tbl tbody tr:hover {
    background: rgba(61, 139, 106, 0.07);
  }
  .tbl tbody tr:last-child td {
    border-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-orb,
  .anim-fade-up,
  .anim-scale-in,
  .anim-slide-right,
  .stagger > *,
  .draw-in,
  .pulse-dot {
    animation: none !important;
  }
}
select option {
  background-color: #18181b;
  color: #fafafa;
}
input[type='date'], input[type='time'] {
  color-scheme: dark;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: calc(infinity * 1px);
  background-color: var(--color-neutral-700);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-neutral-600);
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
svg.i {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
svg.i.sm {
  width: 12px;
  height: 12px;
}
svg.i.lg {
  width: 16px;
  height: 16px;
}
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.mid {
  flex: 1;
  display: flex;
  min-height: 0;
}
.sp {
  flex: 1;
}
.top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid var(--bd);
  background: rgba(9, 9, 11, 0.7);
  backdrop-filter: blur(20px);
  flex-shrink: 0;
}
.org {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px;
  border-radius: 9px;
  cursor: pointer;
}
.org:hover {
  background: rgba(255,255,255,.05);
}
.org .lg {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #3d8b6a, #1b4332);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fafafa;
}
.org .nm {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx);
  font-family: var(--font-display);
}
.av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3d8b6a, #1b4332);
  border: 1px solid var(--bd2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fafafa;
}
.ib {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--t2);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ib:hover {
  background: rgba(255,255,255,.06);
  color: var(--tx);
}
.rail {
  width: 56px;
  background: rgba(7,7,9,.85);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 0;
  gap: 6px;
  flex-shrink: 0;
  overflow-y: auto;
}
.wsb {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--s2);
  border: 1px solid var(--bd);
  color: var(--t3);
  cursor: pointer;
  transition: .18s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.wsb:hover {
  border-color: rgba(61,139,106,.4);
  color: var(--tx);
  transform: translateY(-1px);
}
.wsb.on {
  background: linear-gradient(135deg, rgba(45,106,79,.35), rgba(27,67,50,.25));
  border-color: rgba(61,139,106,.55);
  color: var(--eml);
  box-shadow: 0 2px 14px rgba(45,106,79,.35);
}
.wsb.on::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 8px;
  width: 3px;
  height: 22px;
  background: var(--eml);
  border-radius: 0 3px 3px 0;
}
.wsb .tip {
  position: absolute;
  left: 46px;
  background: var(--s3);
  border: 1px solid var(--bd2);
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 11px;
  color: var(--tx);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: .12s;
  z-index: 30;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.wsb:hover .tip {
  opacity: 1;
}
.rail .div {
  width: 22px;
  height: 1px;
  background: var(--bd);
  margin: 3px 0;
}
.rail .add {
  color: var(--t3);
  background: transparent;
  border: 1px dashed var(--bd2);
}
.rail .add:hover {
  border-color: var(--em);
  color: var(--eml);
}
.ico-s {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  background: var(--s3);
  color: var(--t2);
  flex-shrink: 0;
}
.ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--bd);
  background: var(--s2);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .12s;
  padding: 0;
}
.ico:hover {
  border-color: var(--bd2);
}
.ico.on {
  border-color: var(--em);
  background: rgba(45,106,79,.2);
}
.rail-create {
  position: fixed;
  left: 62px;
  top: 56px;
  z-index: 40;
  width: 210px;
  background: rgba(19,19,22,.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--bd2);
  border-radius: 12px;
  padding: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.rail-create input {
  background: var(--bg);
}
.side {
  width: 214px;
  background: rgba(16,16,19,.8);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.side.col {
  width: 46px;
  align-items: center;
  padding-top: 8px;
}
.sbt {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--t3);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbt:hover {
  background: rgba(255,255,255,.06);
  color: var(--tx);
}
.side.col .sbt {
  margin-bottom: 6px;
}
.sh {
  padding: 14px 14px 11px;
  border-bottom: 1px solid var(--bd);
}
.sh .nm {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -.2px;
  font-family: var(--font-display);
}
.sh .mt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--t3);
  margin-top: 4px;
}
.sb {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px 10px 12px;
  display: grid;
  gap: 2px;
  align-content: start;
}
.gl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t3);
  margin: 9px 6px 5px;
}
.mi {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--t2);
  cursor: pointer;
  transition: .2s cubic-bezier(.22,1,.36,1);
}
.mi .i {
  width: 16px;
  height: 16px;
}
.mi:hover {
  background: rgba(255,255,255,.06);
  color: var(--tx);
  transform: translateX(2px);
}
.mi.on {
  background: linear-gradient(135deg, #2d6a4f, #1b4332);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 14px rgba(45,106,79,.4);
}
.mi.on:hover {
  transform: none;
}
.mi.on::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 3px;
  height: 18px;
  margin-top: -9px;
  border-radius: 0 3px 3px 0;
  background: var(--eml);
}
.mi.on .i {
  color: #fff;
}
.mi .lb {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.mi .n1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi .n2 {
  font-size: 10px;
  color: var(--t3);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi.on .n2 {
  color: rgba(255,255,255,.62);
}
.mi-static {
  cursor: default;
  opacity: .72;
}
.mi-static:hover {
  background: transparent;
  color: var(--t2);
  transform: none;
}
.mi .tag {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 1.5px 6px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  color: var(--t3);
}
.sf {
  padding: 9px 10px;
  border-top: 1px solid var(--bd);
}
.sf .mi {
  font-size: 12px;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.mwrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.mflex {
  flex: 1;
  display: flex;
  min-width: 0;
  overflow: hidden;
}
.tbar {
  padding: 13px 18px 0;
  flex-shrink: 0;
}
.tr1 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tt {
  font-size: 17px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -.3px;
  font-family: var(--font-display);
}
.tsub {
  font-size: 11px;
  color: var(--t3);
  margin-top: 2px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bd);
  background: rgba(255,255,255,.05);
  color: var(--t2);
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .18s;
}
.btn:hover {
  border-color: rgba(61,139,106,.5);
  background: rgba(61,139,106,.1);
  color: var(--tx);
}
.btn.p {
  background: linear-gradient(135deg, #2d6a4f, #1b4332);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 12px rgba(45,106,79,.35);
}
.btn.p:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.btn.slot {
  border-style: dashed;
  border-color: rgba(125,211,252,.4);
  color: var(--bl);
  background: rgba(125,211,252,.07);
}
.btn:disabled {
  opacity: .55;
  cursor: default;
}
.tr2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  flex-wrap: wrap;
}
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 24px;
}
.modal-card {
  width: 420px;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(19,19,22,.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--bd2);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
}
.modal-card.lg {
  width: min(1200px, 96vw);
  height: min(92vh, 92vh);
  border-radius: 16px;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--bd);
}
.modal-head .t {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  font-family: var(--font-display);
}
.modal-head .s {
  font-size: 11px;
  color: var(--t3);
  margin-top: 2px;
}
.modal-head .ib {
  margin-left: auto;
}
.modal-body {
  padding: 15px 16px;
  overflow-y: auto;
}
.setwrap {
  display: flex;
  gap: 16px;
  height: 100%;
  min-height: 0;
}
.setside {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--bd);
  padding-right: 12px;
}
.setnav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--t2);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: .12s;
}
.setnav:hover {
  background: rgba(255,255,255,.06);
  color: var(--tx);
}
.setnav.on {
  background: rgba(45,106,79,.2);
  color: var(--eml);
  font-weight: 600;
}
.setnav .i {
  width: 15px;
  height: 15px;
}
.setbody {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0 4px 8px;
}
.tw {
  flex: 1;
  overflow: auto;
  padding: 12px 18px 18px;
}
.tw table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.tw th, .modal th {
  text-align: left;
  padding: 8px 10px;
  font-size: 9.5px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 700;
  border-bottom: 1px solid var(--bd);
  position: sticky;
  top: 0;
  background: var(--bg);
  white-space: nowrap;
}
.tw th.cf, .tw td.cf {
  background: rgba(45,106,79,.09);
}
.tw th.cf {
  color: var(--eml);
}
.tw td, .modal td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
  color: var(--t2);
}
tr.row {
  cursor: pointer;
  transition: .1s;
}
tr.row:hover td {
  background: rgba(61,139,106,.07);
}
tr.row.sel td {
  background: rgba(45,106,79,.14);
}
.who {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ini {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.who .n {
  color: var(--tx);
  font-weight: 600;
}
.who .e {
  font-size: 10.5px;
  color: var(--t3);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 2.5px 8px;
  border-radius: 20px;
}
.pill .d {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.pill.ok {
  background: rgba(45,106,79,.2);
  color: var(--eml);
}
.pill.ok .d {
  background: var(--eml);
}
.pill.w {
  background: rgba(251,191,36,.13);
  color: var(--am);
}
.pill.w .d {
  background: var(--am);
}
.pill.n {
  background: rgba(255,255,255,.06);
  color: var(--t2);
}
.pill.n .d {
  background: var(--t3);
}
.foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  font-size: 11px;
  color: var(--t3);
}
.lctl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
}
.lctl .cnt {
  font-size: 11px;
  color: var(--t3);
}
.lctl .pg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.lctl .pgn {
  font-size: 11px;
  color: var(--t2);
}
.lctl .lsearch input {
  border: 1px solid var(--bd);
  background: var(--s1);
  color: var(--tx);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  width: 200px;
}
.lctl .lsearch input:focus {
  outline: none;
  border-color: rgba(61,139,106,.6);
}
.gsearch {
  position: relative;
}
.gsearch input {
  border: 1px solid var(--bd);
  background: var(--s1);
  color: var(--tx);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  width: 220px;
}
.gsearch input:focus {
  outline: none;
  border-color: rgba(61,139,106,.6);
}
.gsearch-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  background: var(--s2, #141416);
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 40;
  padding: 6px;
}
.gs-grp {
  margin-bottom: 4px;
}
.gs-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--t3);
  padding: 6px 8px 4px;
}
.gs-n {
  font-weight: 700;
  color: var(--t2);
}
.gs-item {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--tx);
  text-decoration: none;
}
.gs-item:hover {
  background: rgba(61,139,106,.12);
}
.dr {
  width: 280px;
  border-left: 1px solid var(--bd);
  background: var(--s1);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.drh {
  padding: 14px;
  border-bottom: 1px solid var(--bd);
}
.drh .r {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drh .t {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
}
.drh .s {
  font-size: 10.5px;
  color: var(--t3);
  margin-top: 2px;
}
.drb {
  flex: 1;
  overflow-y: auto;
  padding: 13px 14px;
}
.grp {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t3);
  margin: 15px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.grp:first-child {
  margin-top: 0;
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5.5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 11.5px;
}
.kv .k {
  color: var(--t3);
}
.kv .v {
  color: var(--tx);
  text-align: right;
}
.note {
  margin-top: 14px;
  background: rgba(125,211,252,.07);
  border: 1px solid rgba(125,211,252,.2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 10.5px;
  color: var(--t2);
  line-height: 1.6;
}
.note.em {
  background: rgba(45,106,79,.1);
  border-color: rgba(61,139,106,.25);
}
.empty {
  padding: 40px 16px;
  text-align: center;
}
.empty p {
  font-size: 11.5px;
  color: var(--t3);
  line-height: 1.6;
}
.k-inp {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11.5px;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: .13s;
  width: 100%;
}
.k-inp:hover {
  border-color: var(--bd2);
}
.k-inp.exp {
  font-family: var(--font-mono);
  color: var(--eml);
  background: rgba(45,106,79,.1);
  border-color: rgba(61,139,106,.28);
}
.k-inp .ph {
  color: var(--t3);
}
.k-inp .cv {
  margin-left: auto;
  color: var(--t3);
}
.meta {
  font-size: 9.5px;
  color: var(--t3);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.f {
  margin-bottom: 11px;
}
.f > label {
  display: block;
  font-size: 10.5px;
  color: var(--t2);
  margin-bottom: 4px;
  font-weight: 500;
}
input:not([type='checkbox']):not([type='radio']):not([type='file']),
select,
textarea {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11.5px;
  color: var(--tx);
  width: 100%;
}
input:not([type='checkbox']):not([type='radio']):not([type='file']):focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--em);
}
.roww {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dim {
  color: var(--t3);
  font-size: 11.5px;
}
.mono {
  font-family: var(--font-mono);
}
.bdg {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 20px;
}
.bdg.draft {
  background: rgba(252,211,77,.15);
  color: #fcd34d;
}
.bdg.live {
  background: rgba(45,106,79,.22);
  color: var(--eml);
}
.k2dev-chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(251,191,36,.14);
  color: var(--am);
  border: 1px solid rgba(251,191,36,.3);
}
.k2dev-back {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t2);
  border: 1px solid var(--bd2);
  border-radius: 20px;
  padding: 3px 11px;
  text-decoration: none;
}
.k2dev-back:hover {
  color: var(--tx);
  background: rgba(255,255,255,.06);
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/dev/dev.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ══════════════════════════════════════════════════════════════════════════
   A FEJLESZTŐI FELÜLET STÍLUSA — spec 4.5.

   Miért külön lap: az első változat a fő alkalmazás lista/részletpanel
   osztályait (.tt, .grp, .kv, .row) használta, inline stílusokkal foltozva.
   Azok EGY táblázatra és egy oldalpanelre készültek — hét szekcióhoz, sínhez
   és szerkesztőhöz nem elegendők, és a foltozástól lett átláthatatlan.

   Itt a szabály: NINCS inline stílus a dev komponensekben, és a színek a
   globals.css tokenjeiből jönnek — így a fejlesztői felület ugyanabban a
   világban marad, csak más a szerkezete.

   Minden osztály a `.k2dev` alá van fogva, hogy semmi ne szivárogjon ki a
   rendes felületre.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   RÖGZÍTETT VÁZ, GÖRGŐ MUNKATERÜLET

   A sín és a szekció-fejléc a helyén marad; csak a tartalom görög. Enélkül egy
   hosszú fájl vagy egy nagy naplókimenet kigörgeti a navigációt a képből, és a
   fejlesztő elveszti, hol van — pont abban a pillanatban, amikor a hibát
   keresi.
   ══════════════════════════════════════════════════════════════════════════ */
.k2dev {
  --dev-gap: 24px;
  --dev-radius: 12px;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--dev-gap);
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

/* ── bal sín ──────────────────────────────────────────────────────────── */
.k2dev-rail { overflow-y: auto; min-height: 0; padding-right: 4px; }

.k2dev-proj {
  padding: 16px 18px;
  border: 1px solid var(--bd);
  border-radius: var(--dev-radius);
  background: var(--s1);
  margin-bottom: 16px;
}
.k2dev-proj .name { font-size: 18px; font-weight: 700; color: var(--tx); letter-spacing: -0.01em; }
.k2dev-proj .meta { font-size: 11.5px; color: var(--t3); margin-top: 5px; }

.k2dev-nav { display: flex; flex-direction: column; gap: 4px; }
.k2dev-nav button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t2);
  /* Nagyobb kattintható felület: az első változat 8px-es sorai túl alacsonyak
     voltak, és a két sor összefolyt. */
  padding: 11px 14px;
  min-height: 52px;
  justify-content: center;
  border-radius: 10px;
  line-height: 1.3;
  transition: background 0.12s ease;
}
.k2dev-nav button:hover { background: rgba(255, 255, 255, 0.05); color: var(--tx); }
.k2dev-nav button.on {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--tx);
}
.k2dev-nav .t { font-size: 13.5px; font-weight: 600; }
.k2dev-nav .d { font-size: 11px; color: var(--t3); }
.k2dev-nav button.on .d { color: var(--eml); }

/* ── jobb oldali panel ────────────────────────────────────────────────── */
.k2dev-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
}
/* A görgő rész — a fejléc és az állapotsor fölötte marad. */
.k2dev-body { overflow-y: auto; min-height: 0; padding-right: 6px; }

.k2dev-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bd);
}
.k2dev-head h1 { margin: 0; font-size: 20px; font-weight: 700; color: var(--tx); letter-spacing: -0.01em; }
.k2dev-head .sub { font-size: 12.5px; color: var(--t3); }
.k2dev-head .acts { margin-left: auto; display: flex; gap: 6px; }

/* Az állapot EGY SOR, nem doboz: a doboz minden művelet után lejjebb tolta a
   tartalmat, és a szem elvesztette a helyét. */
.k2dev-status { font-size: 12.5px; margin: -8px 0 16px; min-height: 19px; }
.k2dev-status.busy { color: var(--am); }
.k2dev-status.err { color: var(--danger); }
.k2dev-status.ok { color: var(--eml); }

/* ── kártya ───────────────────────────────────────────────────────────── */
.k2dev-card {
  border: 1px solid var(--bd);
  border-radius: var(--dev-radius);
  background: var(--s1);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.k2dev-card > h2 {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--eml);
  font-weight: 700;
}
.k2dev-card > .why {
  font-size: 12.5px;
  color: var(--t3);
  margin: 0 0 16px;
  line-height: 1.65;
  max-width: 72ch;
}
.k2dev-card > .why strong { color: var(--t2); }

/* ── gombok ───────────────────────────────────────────────────────────── */
.k2dev-btn {
  border: 1px solid var(--bd2);
  background: var(--s2);
  color: var(--tx);
  padding: 9px 15px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
}
.k2dev-btn:hover:not(:disabled) { background: var(--s3); }
.k2dev-btn:disabled { opacity: 0.45; cursor: default; }
.k2dev-btn.primary {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--eml);
}
.k2dev-btn.danger { color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }
.k2dev-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.k2dev-rail .k2dev-row { flex-direction: column; align-items: stretch; gap: 7px; margin-top: 18px; }

/* ── adatsorok ────────────────────────────────────────────────────────── */
.k2dev-kv { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 9px 16px; }
.k2dev-kv dt { font-size: 12px; color: var(--t3); }
.k2dev-kv dd { margin: 0; font-size: 12.5px; color: var(--tx); word-break: break-word; }

.k2dev-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.k2dev-table th {
  text-align: left; font-weight: 600; font-size: 10.5px; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--t3);
  padding: 0 12px 9px 0; border-bottom: 1px solid var(--bd);
}
.k2dev-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--bd); color: var(--t2); }
.k2dev-table td:first-child { color: var(--tx); }
.k2dev-table tr:last-child td { border-bottom: 0; }

.k2dev-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06); color: var(--t2);
}
.k2dev-tag.read { background: rgba(96, 165, 250, 0.14); color: var(--bl); }
.k2dev-tag.write { background: rgba(16, 185, 129, 0.14); color: var(--eml); }
.k2dev-tag.external { background: rgba(251, 191, 36, 0.14); color: var(--am); }
/* Kötés-állapot, ami KÓDBÓL javítandó: a beállítás hiányzik vagy rossz szinten
   van, tehát a ctx.link() csendben mindig null. Ez nem „még nincs bekötve" —
   ezért kap más színt, mint a többi állapot. */
.k2dev-tag.hiba { background: rgba(239, 68, 68, 0.16); color: var(--danger); }

/* ── kód és napló ─────────────────────────────────────────────────────── */
.k2dev-code {
  width: 100%; display: block;
  background: #0a0a0c; color: #d6d9dd;
  border: 1px solid var(--bd); border-radius: 8px;
  padding: 11px 12px;
  font-family: 'Fira Code', ui-monospace, Consolas, monospace;
  font-size: 11.5px; line-height: 1.6;
  overflow: auto;
}
textarea.k2dev-code { resize: vertical; min-height: 120px; }
.k2dev-code.tall { height: 58vh; min-height: 300px; }
.k2dev-code.log { max-height: 340px; }

/* ── fájllista ────────────────────────────────────────────────────────── */
.k2dev-split { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 14px; }
.k2dev-files { display: flex; flex-direction: column; gap: 2px; }
.k2dev-files button {
  text-align: left; border: 0; background: transparent; color: var(--t2);
  padding: 8px 11px; border-radius: 8px; font-size: 12.5px;
  font-family: 'Fira Code', ui-monospace, Consolas, monospace;
}
.k2dev-files button:hover { background: rgba(255, 255, 255, 0.04); color: var(--tx); }
.k2dev-files button.on { background: rgba(16, 185, 129, 0.12); color: var(--tx); }
.k2dev-files .dir { color: var(--t3); }

.k2dev-file-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; font-size: 11.5px; color: var(--t3);
  font-family: 'Fira Code', ui-monospace, Consolas, monospace;
}
.k2dev-file-head .dirty { color: var(--am); }

/* ── ellenőrzés lépései ───────────────────────────────────────────────── */
.k2dev-step { border: 1px solid var(--bd); border-radius: 8px; margin-bottom: 8px; }
.k2dev-step > summary {
  cursor: pointer; padding: 12px 14px; font-size: 13px;
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.k2dev-step > summary::-webkit-details-marker { display: none; }
.k2dev-step.ok > summary { color: var(--eml); }
.k2dev-step.bad > summary { color: var(--danger); }
.k2dev-step .k2dev-code { border: 0; border-top: 1px solid var(--bd); border-radius: 0 0 8px 8px; }

/* ── választók ────────────────────────────────────────────────────────── */
.k2dev-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.k2dev-checks label {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--bd); border-radius: 20px;
  padding: 7px 14px 7px 11px; font-size: 12.5px; color: var(--t2); cursor: pointer;
}
.k2dev-checks label:has(input:checked) {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.1);
  color: var(--tx);
}
.k2dev-select {
  background: var(--s2); color: var(--tx);
  border: 1px solid var(--bd2); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; min-width: 260px;
}

.k2dev-empty {
  border: 1px dashed var(--bd2); border-radius: var(--dev-radius);
  padding: 30px; text-align: center; color: var(--t3); font-size: 12.5px;
}

/* ── projektlista ─────────────────────────────────────────────────────── */
.k2dev-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.k2dev-projects a {
  display: block; text-decoration: none;
  border: 1px solid var(--bd); border-radius: var(--dev-radius);
  background: var(--s1); padding: 18px 20px;
}
.k2dev-projects a:hover { border-color: rgba(16, 185, 129, 0.4); background: var(--s2); }
.k2dev-projects .name { font-size: 16px; font-weight: 700; color: var(--tx); }
.k2dev-projects .meta { font-size: 11.5px; color: var(--t3); margin-top: 5px; }
.k2dev-projects .contracts { font-size: 11.5px; color: var(--t2); margin-top: 9px; line-height: 1.6; }

/* ── csomagok (mappák) — src/packages/registry.ts ─────────────────────── */
.k2dev-pkg { margin-bottom: 22px; }
.k2dev-pkg-head { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; }
.k2dev-pkg-head:first-child { margin-top: 14px; }
.k2dev-pkg-name { font-size: 13px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--bl); }
.k2dev-pkg-count { font-size: 11px; color: var(--t3); }


/* ── homokozó-sáv ─────────────────────────────────────────────────────── */
/* ── felső sáv ────────────────────────────────────────────────────────────
   Ugyanaz a nyelv, mint a rendes felület `.top` sávjáé — a homokozót egyetlen
   jelzés különbözteti meg, nem egy külön színű csík. */
.k2dev-top {
  display: flex; align-items: center; gap: 10px;
  height: 46px; flex-shrink: 0; padding: 0 16px;
  border-bottom: 1px solid var(--bd);
  background: linear-gradient(180deg, #141417, #0f0f11);
}
.k2dev-top .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.k2dev-top .lg {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, #12c98d, #0b7a5a);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #04231a;
}
.k2dev-top .nm { font-size: 12.5px; font-weight: 600; color: var(--tx); }
.k2dev-top .sp { flex: 1; }
.k2dev-top .who {
  width: 26px; height: 26px; border-radius: 50%; background: #2a2a30;
  border: 1px solid var(--bd2); display: flex; align-items: center;
  justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--t2);
}
/* A váz: felső sáv + görgő oldal, a képernyő magasságára szabva. A rögzített
   magasság az, ami lehetővé teszi, hogy CSAK a munkaterület görögjön. */
.k2dev-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.k2dev-page { flex: 1; min-height: 0; padding: 22px 26px; max-width: 1600px; width: 100%; }

/* ── modális ablak ────────────────────────────────────────────────────────
   A fiktív org összeállítása ritka, de sok döntést tartalmazó művelet. Inline
   pipákként végig ott ült a képernyőn, holott a fejlesztő ideje 99%-ában nem
   ezzel foglalkozik — a modális ablak visszaadja a helyet a munkának. */
.k2dev-modal-bg {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.62);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.k2dev-modal {
  width: min(620px, 100%);
  max-height: 82vh;
  display: flex; flex-direction: column;
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.k2dev-modal header {
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--bd);
}
.k2dev-modal header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--tx); }
.k2dev-modal header p { margin: 8px 0 0; font-size: 12.5px; color: var(--t3); line-height: 1.6; }
.k2dev-modal .body { padding: 16px 22px; overflow-y: auto; }
.k2dev-modal footer {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--bd);
  display: flex; gap: 10px; align-items: center;
}
.k2dev-modal footer .note { font-size: 11.5px; color: var(--t3); margin-right: auto; max-width: 40ch; }

/* Egy sor a modálban: pipa + név + magyarázat. Nem csippek, mert itt van hely
   elmagyarázni, mi mit jelent. */
.k2dev-pick { display: flex; flex-direction: column; gap: 2px; }
.k2dev-pick label {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
}
.k2dev-pick label:hover { background: rgba(255, 255, 255, 0.04); }
.k2dev-pick label:has(input:checked) {
  background: rgba(16, 185, 129, 0.09);
  border-color: rgba(16, 185, 129, 0.3);
}
.k2dev-pick input { margin-top: 2px; }
.k2dev-pick .n { font-size: 13px; color: var(--tx); font-weight: 600; }
.k2dev-pick .d { font-size: 11.5px; color: var(--t3); margin-top: 2px; line-height: 1.5; }
.k2dev-pick .self { opacity: 0.6; }

.k2dev-chip { font-size: 10px; font-weight: 800; letter-spacing: .9px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
  background: rgba(251,191,36,.14); color: var(--am);
  border: 1px solid rgba(251,191,36,.3); }

/* Visszaút a projektlistára a felső sávban — halk, de kattintható. */
.k2dev-back { font-size: 11.5px; font-weight: 600; color: var(--t2);
  border: 1px solid var(--bd2); border-radius: 20px; padding: 3px 11px;
  text-decoration: none; }
.k2dev-back:hover { color: var(--tx); background: rgba(255,255,255,.06); }

/* ── új projekt űrlap ─────────────────────────────────────────────────── */
.k2dev-newkey { display: grid; gap: 6px; }
.k2dev-newkey > span { font-size: 12px; color: var(--t3); }
.k2dev-input {
  background: var(--s2); color: var(--tx);
  border: 1px solid var(--bd2); border-radius: 9px;
  padding: 10px 12px; font-size: 13px;
  font-family: 'Fira Code', ui-monospace, Consolas, monospace;
}
.k2dev-input:focus { outline: none; border-color: rgba(16,185,129,.45); }
.k2dev-hint { font-size: 11.5px; color: var(--t3); line-height: 1.6; margin: 10px 0 0; }
.k2dev-hint.err { color: var(--danger); }

/* A kulcs maga: kijelölhető, és nem folyik ki a kártyából. Egy 48 karakteres
   hexadecimális szöveg tördelés nélkül vízszintes görgetést csinálna a
   panelnek — a kulcs pedig pont az, amit ki akarsz jelölni. */
.k2dev-token {
  display: inline-block; max-width: 100%;
  font-family: 'Fira Code', ui-monospace, Consolas, monospace;
  font-size: 11.5px; color: var(--tx);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bd); border-radius: 6px;
  padding: 3px 7px; word-break: break-all; user-select: all;
}

/* Halk kísérőszöveg gomb vagy táblázat-cella mellett. A modal footerének
   ugyanilyen nevű szabálya megmarad — az a saját margóival dolgozik. */
.k2dev .note { font-size: 11.5px; color: var(--t3); }

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin","latin-ext"],"variable":"--font-inter"}],"variableName":"inter"} ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_1b85de {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_1b85de {--font-inter: 'Inter', 'Inter Fallback'
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Space_Grotesk","arguments":[{"subsets":["latin","latin-ext"],"variable":"--font-grotesk"}],"variableName":"grotesk"} ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/e1aab0933260df4d-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/b7387a63dd068245-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/36966cca54120369-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Space Grotesk Fallback';src: local("Arial");ascent-override: 89.71%;descent-override: 26.62%;line-gap-override: 0.00%;size-adjust: 109.69%
}.__className_97ef00 {font-family: 'Space Grotesk', 'Space Grotesk Fallback';font-style: normal
}.__variable_97ef00 {--font-grotesk: 'Space Grotesk', 'Space Grotesk Fallback'
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/@xyflow/react/dist/style.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #555;
  --xy-background-pattern-lines-color-default: #333;
  --xy-background-pattern-cross-color-default: #333;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  touch-action: none;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}