@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: 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-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-content: "";
    }
  }
}

@layer theme {
  :root, :host {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
    --spacing: .25rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --font-weight-medium: 500;
    --leading-tight: 1.25;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

@layer base, components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-y-0 {
    inset-block: 0;
  }

  .-right-\[5\.5px\] {
    right: -5.5px;
  }

  .right-0 {
    right: 0;
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .-bottom-3 {
    bottom: calc(var(--spacing) * -3);
  }

  .-left-\[5\.5px\] {
    left: -5.5px;
  }

  .left-0 {
    left: 0;
  }

  .left-1\.5 {
    left: calc(var(--spacing) * 1.5);
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .h-1 {
    height: var(--spacing);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

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

  .min-h-0 {
    min-height: 0;
  }

  .w-0 {
    width: 0;
  }

  .w-1 {
    width: var(--spacing);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-\[2px\] {
    width: 2px;
  }

  .w-full {
    width: 100%;
  }

  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }

  .flex-1 {
    flex: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .-translate-x-full {
    --tw-translate-x: -100%;
    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);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-ew-resize {
    cursor: ew-resize;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .touch-none {
    touch-action: none;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

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

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

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

  .justify-start {
    justify-content: flex-start;
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-\[2px\] {
    gap: 2px;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-l-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .rounded-r-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-border, .border-border\/50 {
    border-color: var(--border-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/50 {
      border-color: color-mix(in oklab, var(--border-strong) 50%, transparent);
    }
  }

  .border-t-primary {
    border-top-color: var(--accent);
  }

  .bg-background, .bg-background\/70 {
    background-color: var(--bg-base);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/70 {
      background-color: color-mix(in oklab, var(--bg-base) 70%, transparent);
    }
  }

  .bg-foreground {
    background-color: var(--text-primary);
  }

  .bg-muted-foreground {
    background-color: var(--text-secondary);
  }

  .bg-transparent\! {
    background-color: #0000 !important;
  }

  .fill-background {
    fill: var(--bg-base);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-\[1\.5px\] {
    padding: 1.5px;
  }

  .px-1 {
    padding-inline: var(--spacing);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-px {
    padding-block: 1px;
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

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

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-background {
    color: var(--bg-base);
  }

  .text-border, .text-border\/60 {
    color: var(--border-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-border\/60 {
      color: color-mix(in oklab, var(--border-strong) 60%, transparent);
    }
  }

  .text-foreground {
    color: var(--text-primary);
  }

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

  .text-primary {
    color: var(--accent);
  }

  .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-0 {
    opacity: 0;
  }

  .opacity-30 {
    opacity: .3;
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    -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-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, );
  }

  .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-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .group-hover\:bg-foreground:is(:where(.group):hover *) {
      background-color: var(--text-primary);
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:inset-y-0:after {
    content: var(--tw-content);
    inset-block: 0;
  }

  .after\:-left-4:after {
    content: var(--tw-content);
    left: calc(var(--spacing) * -4);
  }

  .after\:w-11:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 11);
  }

  .after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .dark\:text-border:where(.dark, .dark *), .dark\:text-border\/50:where(.dark, .dark *) {
    color: var(--border-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:text-border\/50:where(.dark, .dark *) {
      color: color-mix(in oklab, var(--border-strong) 50%, transparent);
    }
  }

  .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
    fill: var(--text-secondary);
  }

  .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
    stroke: var(--border-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
      stroke: color-mix(in oklab, var(--border-strong) 50%, transparent);
    }
  }

  .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
    stroke: var(--border-strong);
  }

  .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke="#ccc"] {
    stroke: var(--border-strong);
  }

  .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector, .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
    fill: var(--bg-elevated);
  }

  .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke="#ccc"] {
    stroke: var(--border-strong);
  }

  .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .\[\&\>svg\]\:h-2\.5 > svg {
    height: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:h-3 > svg {
    height: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:w-2\.5 > svg {
    width: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:w-3 > svg {
    width: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:text-muted-foreground > svg {
    color: var(--text-secondary);
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  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: 0;
}

@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-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

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


:root {
  /* Core Palette - Clean dark with a subtle warm tint */
  --bg-base: #0d0f14;
  --bg-surface: #13161e;
  --bg-elevated: #1a1e2a;
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-active: rgba(99, 102, 241, 0.12);

  /* Accent - Indigo / Violet */
  --accent: #6366f1;
  --accent-light: #818cf8;
  --accent-glow: rgba(99, 102, 241, 0.25);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);

  /* Status */
  --green: #22c55e;
  --yellow: #eab308;
  --red: #ef4444;
  --blue: #38bdf8;
  --status-success: var(--green);
  --status-warning: var(--yellow);
  --status-error: var(--red);
  --status-info: var(--blue);

  --accent-secondary: #a78bfa;

  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --border-color: var(--border);

  --bg-success-subtle: rgba(34, 197, 94, 0.1);
  --bg-warning-subtle: rgba(234, 179, 8, 0.1);
  --bg-success-subtle-hover: rgba(34, 197, 94, 0.2);
  --bg-warning-subtle-hover: rgba(234, 179, 8, 0.2);

  --badge-bg: rgba(255, 255, 255, 0.05);
  --badge-bg-hover: rgba(255, 255, 255, 0.1);

  /* OSI/TCP Layers */
  --layer-app-border: #a78bfa;
  --layer-trans-border: #60a5fa;
  --layer-net-border: #34d399;
  --layer-link-border: #fbbf24;
  /* Alpha tints built from the palette. They are tokens because a literal
     rgba() cannot be swapped per theme, and several of them were invisible or
     wrong in the light theme. */
  --accent-faint: rgba(99, 102, 241, 0.04);
  --accent-subtle: rgba(99, 102, 241, 0.08);
  --accent-muted: rgba(99, 102, 241, 0.15);
  --accent-border: rgba(99, 102, 241, 0.2);
  --accent-strong: rgba(99, 102, 241, 0.22);
  --accent-ring: rgba(99, 102, 241, 0.3);
  --accent-ring-hover: rgba(99, 102, 241, 0.6);
  --neutral-border: rgba(75, 85, 99, 0.4);
  --danger-subtle: rgba(239, 68, 68, 0.08);
  --danger-tint: rgba(239, 68, 68, 0.1);
  --info-tint: rgba(56, 189, 248, 0.1);
  --neutral-tint: rgba(75, 85, 99, 0.25);
  --surface-hairline: rgba(255, 255, 255, 0.02);
  --surface-chip: rgba(255, 255, 255, 0.07);
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
  --overlay-scrim: rgba(0, 0, 0, 0.5);
  --on-accent: #ffffff;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Font */
  --font: 'Inter', system-ui, sans-serif;
}

html.light {
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-elevated: #f1f5f9;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(99, 102, 241, 0.12);

  --accent: #4f46e5;
  --accent-light: #6366f1;
  --accent-glow: rgba(99, 102, 241, 0.2);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.15);

  --green: #16a34a;
  --yellow: #b45309;
  --red: #dc2626;
  --blue: #0284c7;
  --status-success: var(--green);
  --status-warning: var(--yellow);
  --status-error: var(--red);
  --status-info: var(--blue);

  --accent-secondary: #7c3aed;

  /* Light counterparts of the alpha tints. The dark values are built from white
     at low alpha, which disappears on a light background; the scrollbar was the
     visible symptom. */
  --accent-faint: rgba(79, 70, 229, 0.05);
  --accent-subtle: rgba(79, 70, 229, 0.08);
  --accent-muted: rgba(79, 70, 229, 0.14);
  --accent-border: rgba(79, 70, 229, 0.22);
  --accent-strong: rgba(79, 70, 229, 0.24);
  --accent-ring: rgba(79, 70, 229, 0.32);
  --accent-ring-hover: rgba(79, 70, 229, 0.6);
  --neutral-border: rgba(71, 85, 105, 0.35);
  --danger-subtle: rgba(220, 38, 38, 0.07);
  --danger-tint: rgba(220, 38, 38, 0.1);
  --info-tint: rgba(2, 132, 199, 0.1);
  --neutral-tint: rgba(71, 85, 105, 0.14);
  --surface-hairline: rgba(15, 23, 42, 0.03);
  --surface-chip: rgba(15, 23, 42, 0.06);
  --scrollbar-thumb: rgba(15, 23, 42, 0.25);
  --scrollbar-thumb-hover: rgba(15, 23, 42, 0.4);
  --overlay-scrim: rgba(15, 23, 42, 0.45);
  --on-accent: #ffffff;

  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --border-color: var(--border);

  --bg-success-subtle: rgba(22, 163, 74, 0.15);
  --bg-warning-subtle: rgba(180, 83, 9, 0.15);
  --bg-success-subtle-hover: rgba(22, 163, 74, 0.25);
  --bg-warning-subtle-hover: rgba(180, 83, 9, 0.25);

  --badge-bg: rgba(0, 0, 0, 0.04);
  --badge-bg-hover: rgba(0, 0, 0, 0.08);

  --layer-app-border: #6d28d9;
  --layer-trans-border: #1d4ed8;
  --layer-net-border: #047857;
  --layer-link-border: #b45309;
}

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

html {
  font-size: 15px;
}

body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100vh;
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Animations */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeUp 0.3s ease forwards;
}

.stagger-1 {
  animation-delay: 60ms;
  opacity: 0;
}

.stagger-2 {
  animation-delay: 120ms;
  opacity: 0;
}

.stagger-3 {
  animation-delay: 180ms;
  opacity: 0;
}

/* Staggered entry delay. Named `stagger-*` rather than `delay-*`: Tailwind owns
   that namespace, and scanning the app files would emit a competing
   `.delay-100 { transition-delay }` rule for the same class name. The scan is
   restricted today, so this is precautionary rather than a live conflict. */

/* Text gradient */

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

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--r-lg);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
}

/* Glass panel → replaced with flat surface */

.glass-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* Section */

.config-section {
  padding: 1.75rem;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
}

.section-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.summary-card-icon {
  color: var(--accent-light);
}

/* Tables */

.data-table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
}

.data-table th {
  padding: 10px 14px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr {
  transition: background 0.15s;
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

/* The single-row "nothing here" cell. It was an inline style repeated in 55
   places, so any change had to be made 55 times. */

.table-empty-cell {
  text-align: center;
  color: var(--text-muted);
}

/* Compact variant of .btn, used by the per-row "Detail" buttons. Was an inline
   style repeated in 16 places. */

.btn-detail {
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* Two inline styles that were repeated across the dashboard. Both are pure
   duplication: one style pair written out 41 times and one colour written out
   21 times, so a change had to be made in dozens of places. */

.text-secondary-sm {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

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

/* Height for the vendored Evilcharts containers.
   The height is set here rather than with a Tailwind utility because Tailwind
   only scans the vendored chart folder; application code stays on the design
   system. The chart component receives this as its className. */

.chart-box {
  height: 190px;
}

/* Shown in place of a chart when its data set is empty, so the panel explains
   itself instead of collapsing to nothing. */

.chart-empty {
  margin: 0;
  padding: 1.5rem 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

/* Recharts paints axis tick labels with a hardcoded fill="#666" attribute, which
   measures 3.15:1 against the panel background and fails AA. The vendored chart
   container tries to override it with a Tailwind variant aimed at
   `.recharts-cartesian-axis-tick text`, but the class Recharts actually renders
   is `.recharts-cartesian-axis-tick-value`, so that rule never matched and no
   rule in the stylesheet targeted the label at all. A stylesheet rule beats a
   presentation attribute, so the colour is set here, scoped to the charts. */

[data-chart] .recharts-cartesian-axis-tick-value {
  fill: var(--text-secondary);
}

/* Badges */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-success {
  background: var(--bg-success-subtle);
  color: var(--green);
}

.badge-warning {
  background: var(--bg-warning-subtle);
  color: var(--yellow);
}

.badge-error {
  background: var(--danger-tint);
  color: var(--red);
}

.badge-info {
  background: var(--info-tint);
  color: var(--blue);
}

.badge-neutral {
  background: var(--neutral-tint);
  color: var(--text-secondary);
}

.badge-primary {
  background: var(--accent-muted);
  color: var(--accent-light);
}

/* Upload / parse failure notice. Uses the same colour language as .badge-error
   so it reads as a problem rather than as informational content. */

.parse-error {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--red);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--danger-subtle);
}

.parse-error-icon {
  color: var(--red);
  flex-shrink: 0;
  margin-top: 2px;
}

.parse-error-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--red);
}

.parse-error-message {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── React Flow Controls ────────────────────────────────────── */

.react-flow__controls {
  /* Black-based shadow, reads the same on both themes. */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: var(--r-md);
  overflow: hidden;
}

.react-flow__controls-button {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
  transition:
    background 0.2s,
    fill 0.2s !important;
}

.react-flow__controls-button:last-child {
  border-bottom: none !important;
}

.react-flow__controls-button:hover {
  background: var(--bg-hover) !important;
}

.react-flow__controls-button svg {
  fill: currentColor !important;
}

/* Light mode overrides for React Flow Controls */

html.light .react-flow__controls-button {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}

/* ─── Search active banner ───────────────────────────────────── */

.search-active-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--accent-subtle);
  border-bottom: 1px solid var(--accent-border);
  font-size: 0.78rem;
  color: var(--accent-light);
}

/* ─── Sticky table header ────────────────────────────────────── */

.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 1;
}

/* ==========================================================================
   Modal Popups
   ========================================================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-scrim);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  width: 90%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Black-based shadow, reads the same on both themes. */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  animation: scaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-header {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-close {
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close:hover {
  background: var(--red);
  color: white;
  border-color: var(--red);
}

.modal-body {
  padding: 1.75rem;
  overflow-y: auto;
  background: var(--bg-base);
}

/* ==========================================================================
   Version chip and release notes
   ========================================================================== */

/* Lives in the header so it is available on every screen without taking a
   dashboard tab. Radius matches the other small chips instead of going pill. */

.version-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  /* --text-muted reads at 3.49:1 here, under the 4.5:1 floor for text this
     small. --text-secondary clears it in both themes. */
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.version-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.version-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.about-group + .about-group {
  margin-top: 1.5rem;
}

/* Section label treatment already used by the sidebar, so these read as labels
   rather than competing with the modal title. Hierarchy comes from case, weight,
   and tracking rather than colour: --text-muted measured 4.03:1 in dark and
   2.45:1 in light, both under the 4.5:1 floor. */

.about-group-title {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.about-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.about-list li {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.6;
}

.about-list li::marker {
  color: var(--text-muted);
}

/* Identifiers such as `/ip dns` need to stay distinguishable from prose. */

.about-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.about-empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Dark uses --accent-light (6.43:1 on the modal body). The light theme's
   --accent-light is lighter than its --accent, so it drops to 4.27:1 there;
   swapping to --accent in light mode gives 6.01:1. Scoped to this element
   rather than changing the token, which other components also use. */

.about-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.75rem;
  color: var(--accent-light);
  font-size: 0.82rem;
  text-decoration: none;
}

html.light .about-link {
  color: var(--accent);
}

.about-link:hover {
  text-decoration: underline;
}

.about-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.detail-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}

.detail-table tr {
  background: var(--bg-surface);
  transition: background 0.2s;
}

.detail-table tr:hover {
  background: var(--bg-hover);
}

.detail-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.detail-table tr:last-child td {
  border-bottom: none;
}

.detail-table td.detail-key {
  font-weight: 600;
  color: var(--text-primary);
  width: 35%;
  background: var(--surface-hairline);
  border-right: 1px solid var(--border);
}
/* ─── App Shell ─────────────────────────────────────────────── */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── Design tokens (header) ─────────────────────────────────── */
:root {
  --header-height: 56px;
  --header-padding-inline: 28px;
  --header-gap: 1rem;
  --control-height: 36px;
  --icon-size: 18px;
}

/* ─── Top header bar ─────────────────────────────────────────── */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--header-padding-inline);
  height: var(--header-height);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo {
  color: var(--accent-light);
  flex-shrink: 0;
}

.header-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ─── Header Search ──────────────────────────────────────────── */
.header-controls {
  display: flex;
  gap: var(--header-gap);
  align-items: center;
}

.header-icon-link,
.header-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  background: none;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--text-secondary);
  transition:
    color 0.2s,
    background 0.2s;
}
.header-icon-link:hover,
.header-icon-button:hover,
.header-icon-link:focus-visible,
.header-icon-button:focus-visible {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.header-icon-link:focus-visible,
.header-icon-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.header-icon-link svg,
.header-icon-button svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

.header-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 300px;
  margin: 0 var(--header-gap);
  height: var(--control-height);
}

.header-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
  width: var(--icon-size);
  height: var(--icon-size);
}

.header-search-input {
  width: 100%;
  height: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0 36px 0 36px;
  color: var(--text-primary);
  font-size: 0.83rem;
  font-family: var(--font);
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.header-search-input:focus {
  border-color: var(--accent);
  background: var(--bg-surface);
}

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

.header-search-clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  transition:
    color 0.15s,
    background 0.15s;
}

.header-search-clear:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.header-search-clear svg {
  width: 14px;
  height: 14px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ─── Uploader page ──────────────────────────────────────────── */
.uploader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 4rem 2rem;
  text-align: center;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-surface);
  margin: 2rem;
}
.uploader-container:hover,
.uploader-container.drag-active {
  border-color: var(--accent);
  background: var(--accent-faint);
}
.uploader-icon {
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.uploader-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.uploader-sub {
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.file-input {
  display: none;
}
.uploader-error {
  margin-top: 1rem;
  color: var(--status-error);
  font-size: 0.9rem;
  font-weight: 600;
}
.uploader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-bottom: 1.25rem;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Landing Page ───────────────────────────────────────────── */
.landing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* Hero Section */
.hero-section {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 4rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-active);
  color: var(--accent-light);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 2rem;
  border: 1px solid var(--accent-glow);
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.04em;
}

.hero-description {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  line-height: 1.6;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.btn-lg {
  padding: 14px 32px;
  font-size: 1rem;
  width: fit-content;
}

.demo-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.demo-buttons {
  display: flex;
  gap: 12px;
}

.demo-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.demo-btn:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

/* Hero Visual */
.hero-visual {
  position: relative;
}

.hero-image-container {
  position: relative;
  z-index: 1;
}

.hero-image {
  width: 100%;
  height: auto;
  /* Black-based shadow, reads the same on both themes. */
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.3));
  animation: float 6s ease-in-out infinite;
}

.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  z-index: -1;
  filter: blur(40px);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Info Section */
.info-section {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 2rem;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature-icon {
  margin-bottom: 0.5rem;
}
.feature-icon.success {
  color: var(--status-success);
}
.feature-icon.accent {
  color: var(--accent);
}
.feature-icon.blue {
  color: var(--blue);
}

.feature-card h4 {
  font-size: 1.1rem;
  font-weight: 600;
}
.feature-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Tutorial Section */
.tutorial-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.tutorial-toggle {
  width: 100%;
  padding: 1.5rem 2rem;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.tutorial-toggle:hover {
  background: var(--bg-hover);
}

.tutorial-content {
  padding: 0 2rem 2rem;
  border-top: 1px solid var(--border);
}

.steps-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.step-item {
  display: flex;
  gap: 1rem;
}

.step-number {
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.code-snippet {
  margin-top: 0.75rem;
  background: var(--bg-base);
  padding: 0.75rem;
  border-radius: var(--r-sm);
  font-family: monospace;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.landing-footer {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-slide-down {
  animation: slideDown 0.3s ease-out forwards;
}

@media (max-width: 968px) {
  .hero-section {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions {
    align-items: center;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Export button ──────────────────────────────────────────── */
.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-export:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--accent-subtle);
}

/* ─── Sidebar count badge ────────────────────────────────────── */
.sidebar-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--surface-chip);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}
.sidebar-subitem.active .sidebar-count-badge,
.sidebar-item.active .sidebar-count-badge {
  background: var(--accent-border);
  color: var(--accent-light);
}

/* ─── Dashboard layout (sidebar + main) ──────────────────────── */
.dashboard-layout {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 56px);
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px 8px 24px;
  position: sticky;
  top: 56px; /* Offset for header */
  height: calc(100vh - 56px);
  align-self: flex-start;
  transition: width 0.3s ease;
}

.sidebar-collapsed {
  width: 60px;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.sidebar-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-logo {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  transition: all 0.3s ease;
}

.sidebar-collapsed .sidebar-logo {
  text-align: center;
  font-size: 0.7rem;
}

.sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Parent item */
.sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 450;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  user-select: none;
  position: relative;
}

.sidebar-collapsed .sidebar-item {
  justify-content: center;
  padding: 7px 8px;
}

.sidebar-item-content {
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all 0.3s ease;
}

.sidebar-collapsed .sidebar-item-content span {
  display: none;
}

.sidebar-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-collapsed .sidebar-item:hover {
  background: var(--bg-hover);
}

.sidebar-collapsed .sidebar-item:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 1000;
  border: 1px solid var(--border);
  /* Black-based shadows read the same on both themes, so they stay literal. */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-left: 8px;
}

.sidebar-item.active,
.sidebar-item.parent-active {
  background: var(--bg-active);
  color: var(--accent-light);
}

.sidebar-item.active .sidebar-item-content svg,
.sidebar-item.parent-active .sidebar-item-content svg {
  color: var(--accent-light);
}

/* Chevron */
.sidebar-chevron {
  color: var(--text-muted);
  transition: transform 0.2s;
}
.sidebar-chevron.open {
  transform: rotate(90deg);
}

/* Sub items */
.sidebar-submenus {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px 28px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  transition: all 0.3s ease;
}

.sidebar-collapsed .sidebar-submenus {
  display: none;
}

.sidebar-subitem {
  padding: 5px 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition:
    background 0.15s,
    color 0.15s;
  user-select: none;
}
.sidebar-subitem:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.sidebar-subitem.active {
  color: var(--accent-light);
  font-weight: 600;
  background: var(--bg-active);
}

/* ─── Main content area ───────────────────────────────────────── */
.main-view {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px 28px;
  background: var(--bg-base);
}

/* ─── Overview grid ───────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.summary-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.summary-card-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.card-hover {
  transition: border-color 0.2s;
}
.card-hover:hover {
  border-color: var(--border-strong);
}

/* Trailing indicators of a sidebar row, kept adjacent rather than spread. */
.sidebar-item-trailing {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Marks a section whose panel is still a placeholder, so the navigation does
   not promise content that does not exist yet. */
.sidebar-soon {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  flex-shrink: 0;
}

/* Footer link in the landing page. Replaces an inline style plus a manual hover
   handler. */
.footer-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--accent-light);
}

/* A feature card whose feature is not built yet. The card used to signal that
   with opacity alone, which reads as "disabled" rather than "not yet", so it now
   carries the same "Segera" marker the sidebar uses. */
.feature-card-pending {
  opacity: 0.8;
}

.soon-badge {
  margin-left: 8px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  vertical-align: middle;
}

/* Hover states that used to be written as onMouseEnter and onMouseLeave handlers
   mutating style.color and style.borderColor. */
.preset-button:hover,
.preset-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent-light);
}
.trace-button:hover,
.trace-button:focus-visible {
  opacity: 0.85;
}

/* The ring colour comes from the rule's action through --card-ring, so the hover
   itself needs no JavaScript. */
.swimlane-card {
  transition: box-shadow 0.15s;
}
.swimlane-card:hover {
  box-shadow: 0 0 0 1px var(--card-ring);
}

/* Hover states that used to be JavaScript handlers. The previous versions also
   moved the element (translateY, translateX with scale) and added a coloured
   glow; both were removed as decoration, leaving a plain colour or size change. */
.guide-button:hover,
.guide-button:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}
.tcp-layer-card:hover,
.tcp-layer-card:focus-visible {
  border-left-width: 6px;
}

.filter-badge:hover,
.filter-badge:focus-visible {
  background: var(--badge-bg-hover);
  border-color: var(--accent);
}

/* Relation chip in the help panel. The whole appearance lives here because the
   hover used to be a pair of JavaScript handlers, and only the navigable variant
   gets one. */
.relation-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--neutral-tint);
  color: var(--text-secondary);
  border: 1px solid var(--neutral-border);
  cursor: default;
  user-select: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.relation-chip-link {
  background: var(--accent-muted);
  color: var(--accent-light);
  border-color: var(--accent-ring);
  cursor: pointer;
}
.relation-chip-link:hover,
.relation-chip-link:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-ring-hover);
}

/* Flow chips in the help panel: a prerequisite points back, a next step points
   forward, and only the navigable variant reacts to hover. */
.flow-chip-warning-link:hover,
.flow-chip-warning-link:focus-visible {
  background: var(--bg-warning-subtle-hover);
}
.flow-chip-success-link:hover,
.flow-chip-success-link:focus-visible {
  background: var(--bg-success-subtle-hover);
}

/* A copyable command line. Only lines that are actually commands react. */
.cmd-line:hover {
  color: var(--text-primary);
}

/* The step card's hover border takes the step's own colour, passed in as
   --step-color. The previous version also slid the card sideways, which was
   decoration and has been removed. */
.step-card-color:hover,
.step-card-color:focus-visible {
  border-color: var(--step-color);
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.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 .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    -webkit-animation: 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:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.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: -webkit-grab;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: -webkit-grabbing;
    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: -webkit-grab;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.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.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@-webkit-keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
@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;
}
.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-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.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: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.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 {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.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: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: 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: #3367d9;
  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%;
}