@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;
}

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

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

/* ─── Header Search ──────────────────────────────────────────── */
/* Header controls. These were inline styles with manual onMouseEnter and
   onMouseLeave handlers writing to style.color, which a plain :hover rule does
   without JavaScript and without re-rendering. */
.header-controls {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.header-icon-link,
.header-icon-button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.header-icon-link:hover,
.header-icon-button:hover,
.header-icon-link:focus-visible,
.header-icon-button:focus-visible {
  color: var(--text-primary);
}
.header-icon-link:focus-visible,
.header-icon-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.header-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 300px;
  margin: 0 1.5rem;
}

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

.header-search-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 6px 32px 6px 32px;
  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;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 50%;
  transition:
    color 0.15s,
    background 0.15s;
}

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

.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%;
}