*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
.\!container {
    width: 100% !important
}
.container {
    width: 100%
}
@media (min-width: 640px) {
    .\!container {
        max-width: 640px !important
    }
    .container {
        max-width: 640px
    }
}
@media (min-width: 768px) {
    .\!container {
        max-width: 768px !important
    }
    .container {
        max-width: 768px
    }
}
@media (min-width: 1024px) {
    .\!container {
        max-width: 1024px !important
    }
    .container {
        max-width: 1024px
    }
}
@media (min-width: 1280px) {
    .\!container {
        max-width: 1280px !important
    }
    .container {
        max-width: 1280px
    }
}
@media (min-width: 1536px) {
    .\!container {
        max-width: 1536px !important
    }
    .container {
        max-width: 1536px
    }
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}
.visible {
    visibility: visible
}
.invisible {
    visibility: hidden
}
.collapse {
    visibility: collapse
}
.static {
    position: static
}
.fixed {
    position: fixed
}
.absolute {
    position: absolute
}
.relative {
    position: relative
}
.sticky {
    position: sticky
}
.inset-0 {
    inset: 0px
}
.bottom-0 {
    bottom: 0px
}
.left-0 {
    left: 0px
}
.left-\[15vw\] {
    left: 15vw
}
.right-0 {
    right: 0px
}
.right-4 {
    right: 1rem
}
.top-14 {
    top: 3.5rem
}
.top-4 {
    top: 1rem
}
.top-\[60px\] {
    top: 60px
}
.top-\[var\(--topbar-height\)\] {
    top: var(--topbar-height)
}
.z-10 {
    z-index: 10
}
.z-\[1000\] {
    z-index: 1000
}
.z-\[100\] {
    z-index: 100
}
.-mb-px {
    margin-bottom: -1px
}
.mb-1 {
    margin-bottom: 0.25rem
}
.mb-1\.5 {
    margin-bottom: 0.375rem
}
.mb-10 {
    margin-bottom: 2.5rem
}
.mb-12 {
    margin-bottom: 3rem
}
.mb-2 {
    margin-bottom: 0.5rem
}
.mb-3 {
    margin-bottom: 0.75rem
}
.mb-4 {
    margin-bottom: 1rem
}
.mb-5 {
    margin-bottom: 1.25rem
}
.mb-6 {
    margin-bottom: 1.5rem
}
.mb-8 {
    margin-bottom: 2rem
}
.mt-2 {
    margin-top: 0.5rem
}
.mt-4 {
    margin-top: 1rem
}
.mt-6 {
    margin-top: 1.5rem
}
.mt-8 {
    margin-top: 2rem
}
.block {
    display: block
}
.inline {
    display: inline
}
.flex {
    display: flex
}
.inline-flex {
    display: inline-flex
}
.table {
    display: table
}
.\!grid {
    display: grid !important
}
.grid {
    display: grid
}
.contents {
    display: contents
}
.hidden {
    display: none
}
.h-0 {
    height: 0px
}
.h-3 {
    height: 0.75rem
}
.h-4 {
    height: 1rem
}
.h-6 {
    height: 1.5rem
}
.h-9 {
    height: 2.25rem
}
.h-\[calc\(100vh-var\(--topbar-height\)\)\] {
    height: calc(100vh - var(--topbar-height))
}
.max-h-\[min\(88vh\2c 820px\)\] {
    max-height: min(88vh, 820px)
}
.min-h-\[30px\] {
    min-height: 30px
}
.w-11 {
    width: 2.75rem
}
.w-3 {
    width: 0.75rem
}
.w-4 {
    width: 1rem
}
.w-9 {
    width: 2.25rem
}
.w-\[13rem\] {
    width: 13rem
}
.w-\[15vw\] {
    width: 15vw
}
.w-\[calc\(100vw-15vw\)\] {
    width: calc(100vw - 15vw)
}
.w-\[min\(520px\2c 100\%\)\] {
    width: min(520px, 100%)
}
.w-\[min\(760px\2c 100\%\)\] {
    width: min(760px, 100%)
}
.w-fit {
    width: -moz-fit-content;
    width: fit-content
}
.w-full {
    width: 100%
}
.min-w-\[14rem\] {
    min-width: 14rem
}
.min-w-\[200px\] {
    min-width: 200px
}
.min-w-full {
    min-width: 100%
}
.max-w-\[12rem\] {
    max-width: 12rem
}
.max-w-\[600px\] {
    max-width: 600px
}
.max-w-\[960px\] {
    max-width: 960px
}
.flex-shrink {
    flex-shrink: 1
}
.shrink-0 {
    flex-shrink: 0
}
.grow {
    flex-grow: 1
}
.border-separate {
    border-collapse: separate
}
.border-spacing-0 {
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0px;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y)
}
.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cursor-pointer {
    cursor: pointer
}
.select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none
}
.resize {
    resize: both
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}
.flex-col {
    flex-direction: column
}
.flex-wrap {
    flex-wrap: wrap
}
.items-start {
    align-items: flex-start
}
.items-center {
    align-items: center
}
.justify-end {
    justify-content: flex-end
}
.justify-center {
    justify-content: center
}
.justify-between {
    justify-content: space-between
}
.gap-1 {
    gap: 0.25rem
}
.gap-2 {
    gap: 0.5rem
}
.gap-3 {
    gap: 0.75rem
}
.gap-4 {
    gap: 1rem
}
.gap-6 {
    gap: 1.5rem
}
.gap-8 {
    gap: 2rem
}
.gap-\[18px\] {
    gap: 18px
}
.overflow-auto {
    overflow: auto
}
.overflow-hidden {
    overflow: hidden
}
.overflow-x-auto {
    overflow-x: auto
}
.overflow-y-auto {
    overflow-y: auto
}
.rounded {
    border-radius: 0.25rem
}
.rounded-\[10px\] {
    border-radius: 10px
}
.rounded-\[14px\] {
    border-radius: 14px
}
.rounded-\[18px\] {
    border-radius: 18px
}
.rounded-full {
    border-radius: 9999px
}
.rounded-lg {
    border-radius: 0.5rem
}
.rounded-md {
    border-radius: 0.375rem
}
.rounded-xl {
    border-radius: 0.75rem
}
.rounded-tl-2xl {
    border-top-left-radius: 1rem
}
.border {
    border-width: 1px
}
.border-0 {
    border-width: 0px
}
.border-\[1\.5px\] {
    border-width: 1.5px
}
.border-b {
    border-bottom-width: 1px
}
.border-b-2 {
    border-bottom-width: 2px
}
.border-l-\[3px\] {
    border-left-width: 3px
}
.border-r {
    border-right-width: 1px
}
.border-t {
    border-top-width: 1px
}
.border-dashed {
    border-style: dashed
}
.border-\[color\:rgba\(255\2c 120\2c 120\2c 0\.35\)\] {
    border-color: rgba(255,120,120,0.35)
}
.border-\[color\:var\(--border-default\)\] {
    border-color: var(--border-default)
}
.border-\[color\:var\(--text-primary\)\] {
    border-color: var(--text-primary)
}
.border-red-500\/40 {
    border-color: rgb(239 68 68 / 0.4)
}
.border-transparent {
    border-color: transparent
}
.border-l-transparent {
    border-left-color: transparent
}
.bg-\[rgba\(255\2c 120\2c 120\2c 0\.08\)\] {
    background-color: rgba(255,120,120,0.08)
}
.bg-\[var\(--accent-primary\)\] {
    background-color: var(--accent-primary)
}
.bg-\[var\(--bg-primary\)\] {
    background-color: var(--bg-primary)
}
.bg-\[var\(--bg-secondary\)\] {
    background-color: var(--bg-secondary)
}
.bg-\[var\(--bg-tertiary\)\] {
    background-color: var(--bg-tertiary)
}
.bg-\[var\(--page-bg\)\] {
    background-color: var(--page-bg)
}
.bg-black\/60 {
    background-color: rgb(0 0 0 / 0.6)
}
.bg-red-500\/5 {
    background-color: rgb(239 68 68 / 0.05)
}
.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1))
}
.bg-transparent {
    background-color: transparent
}
.p-3 {
    padding: 0.75rem
}
.p-4 {
    padding: 1rem
}
.p-5 {
    padding: 1.25rem
}
.p-6 {
    padding: 1.5rem
}
.p-\[18px\] {
    padding: 18px
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
.px-\[18px\] {
    padding-left: 18px;
    padding-right: 18px
}
.px-\[60px\] {
    padding-left: 60px;
    padding-right: 60px
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}
.py-\[0\.3rem\] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem
}
.py-\[14px\] {
    padding-top: 14px;
    padding-bottom: 14px
}
.py-\[22px\] {
    padding-top: 22px;
    padding-bottom: 22px
}
.pb-2 {
    padding-bottom: 0.5rem
}
.pt-3 {
    padding-top: 0.75rem
}
.text-left {
    text-align: left
}
.text-right {
    text-align: right
}
.align-top {
    vertical-align: top
}
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}
.text-\[11px\] {
    font-size: 11px
}
.text-\[13px\] {
    font-size: 13px
}
.text-\[15px\] {
    font-size: 15px
}
.text-\[28px\] {
    font-size: 28px
}
.text-\[36px\] {
    font-size: 36px
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}
.font-\[450\] {
    font-weight: 450
}
.font-bold {
    font-weight: 700
}
.font-medium {
    font-weight: 500
}
.font-semibold {
    font-weight: 600
}
.uppercase {
    text-transform: uppercase
}
.capitalize {
    text-transform: capitalize
}
.italic {
    font-style: italic
}
.leading-none {
    line-height: 1
}
.leading-relaxed {
    line-height: 1.625
}
.tracking-\[0\.18em\] {
    letter-spacing: 0.18em
}
.tracking-wide {
    letter-spacing: 0.025em
}
.tracking-wider {
    letter-spacing: 0.05em
}
.text-\[color\:\#ff9a9a\] {
    --tw-text-opacity: 1;
    color: rgb(255 154 154 / var(--tw-text-opacity, 1))
}
.text-\[color\:var\(--accent-primary\)\] {
    color: var(--accent-primary)
}
.text-\[color\:var\(--text-primary\)\] {
    color: var(--text-primary)
}
.text-\[color\:var\(--text-secondary\)\] {
    color: var(--text-secondary)
}
.text-\[color\:var\(--text-tertiary\)\] {
    color: var(--text-tertiary)
}
.text-current {
    color: currentColor
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.underline {
    text-decoration-line: underline
}
.opacity-60 {
    opacity: 0.6
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_18px_45px_rgba\(0\2c 0\2c 0\2c 0\.28\)\] {
    --tw-shadow: 0 18px 45px rgba(0,0,0,0.28);
    --tw-shadow-colored: 0 18px 45px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_30px_80px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
    --tw-shadow: 0 30px 80px rgba(0,0,0,0.35);
    --tw-shadow-colored: 0 30px 80px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.outline {
    outline-style: solid
}
.ring-\[1px\] {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-inset {
    --tw-ring-inset: inset
}
.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.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)
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-\[border-color\2c background\] {
    transition-property: border-color,background;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.duration-150 {
    transition-duration: 150ms
}
.duration-200 {
    transition-duration: 200ms
}
.duration-75 {
    transition-duration: 75ms
}
.after\:absolute::after {
    content: var(--tw-content);
    position: absolute
}
.after\:left-0\.5::after {
    content: var(--tw-content);
    left: 0.125rem
}
.after\:top-0\.5::after {
    content: var(--tw-content);
    top: 0.125rem
}
.after\:h-5::after {
    content: var(--tw-content);
    height: 1.25rem
}
.after\:w-5::after {
    content: var(--tw-content);
    width: 1.25rem
}
.after\:rounded-full::after {
    content: var(--tw-content);
    border-radius: 9999px
}
.after\:bg-white::after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
.after\:transition-transform::after {
    content: var(--tw-content);
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.after\:content-\[\'\'\]::after {
    --tw-content: '';
    content: var(--tw-content)
}
.first\:pt-0:first-child {
    padding-top: 0px
}
.last\:mb-0:last-child {
    margin-bottom: 0px
}
.last\:border-b-0:last-child {
    border-bottom-width: 0px
}
.last\:pb-0:last-child {
    padding-bottom: 0px
}
.hover\:border-\[color\:var\(--border-hover\)\]:hover {
    border-color: var(--border-hover)
}
.hover\:bg-\[var\(--bg-hover\)\]:hover {
    background-color: var(--bg-hover)
}
.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1))
}
.hover\:text-\[color\:var\(--text-primary\)\]:hover {
    color: var(--text-primary)
}
.hover\:text-\[color\:var\(--text-secondary\)\]:hover {
    color: var(--text-secondary)
}
.hover\:underline:hover {
    text-decoration-line: underline
}
.hover\:opacity-90:hover {
    opacity: 0.9
}
.focus\:border-\[color\:var\(--accent-primary\)\]:focus {
    border-color: var(--accent-primary)
}
.focus\:bg-\[var\(--bg-tertiary\)\]:focus {
    background-color: var(--bg-tertiary)
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed
}
.disabled\:opacity-60:disabled {
    opacity: 0.6
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1
}
.peer:checked ~ .peer-checked\:bg-\[var\(--accent-primary\)\] {
    background-color: var(--accent-primary)
}
.peer:checked ~ .peer-checked\:after\:translate-x-5::after {
    content: var(--tw-content);
    --tw-translate-x: 1.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@media (max-width: 900px) {
    .max-\[900px\]\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}
@media (min-width: 640px) {
    .sm\:w-fit {
        width: -moz-fit-content;
        width: fit-content
    }
    .sm\:flex-row {
        flex-direction: row
    }
    .sm\:items-end {
        align-items: flex-end
    }
    .sm\:justify-between {
        justify-content: space-between
    }
}
@media (min-width: 768px) {
    .md\:w-fit {
        width: -moz-fit-content;
        width: fit-content
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .md\:flex-row {
        flex-direction: row
    }
    .md\:items-center {
        align-items: center
    }
    .md\:justify-between {
        justify-content: space-between
    }
}
@media (min-width: 1024px) {
    .lg\:flex-row {
        flex-direction: row
    }
    .lg\:items-end {
        align-items: flex-end
    }
    .lg\:justify-between {
        justify-content: space-between
    }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}
/* =============================================================================
   THEME SYSTEM - Central color and style definitions
   ============================================================================= 
   
   All theme-dependent CSS properties (colors, shadows, borders, effects)
   are defined as CSS variables here. Use var(--variable-name) in your CSS.
   
   See THEME_USAGE.md for detailed examples and documentation.
   
   ============================================================================= */

body {
  --border-width-default: 1px;
  --radius-sm: 12px;
}

/* Light Theme */
body.theme-light {
  /* Background colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-tertiary: #eaeef2;
  --bg-elevated: #ffffff;
  --card-bg: #ffffff;

  /* Highlighted button - VS Code light blue */
  --highlighted-button-bg: #005fb8;
  --highlighted-button-hover-bg: #004c93;
  --highlighted-button-active-bg: #003d7a; 
  --highlighted-button-text: #ffffff;

  /* Orange highlighted button - vibrant orange */
  --orange-highlighted-button-bg: #ff6b35;
  --orange-highlighted-button-hover-bg: #ff5722;
  --orange-highlighted-button-active-bg: #e64a19;
  --orange-highlighted-button-text: #ffffff;

  /* Surface colors */
  --surface-primary: rgba(255, 255, 255, 0.92);
  --surface-secondary: rgba(246, 248, 250, 0.95);
  --surface-overlay: rgba(255, 255, 255, 0.98);
  
  /* Border colors */
  --border-default: rgba(31, 41, 51, 0.08);
  --border-muted: rgba(31, 41, 51, 0.05);
  --border-strong: rgba(31, 41, 51, 0.16);
  
  /* Text colors */
  --text-primary: rgba(31, 41, 51, 0.9);
  --text-secondary: rgba(31, 41, 51, 0.7);
  --text-tertiary: rgba(31, 41, 51, 0.6);
  --text-muted: rgba(31, 41, 51, 0.5);
  --text-contrast: #464646;
  --text-contrast-highlight: #151212;
  
  /* Interactive element colors */
  --interactive-default: rgba(31, 41, 51, 0.7);
  --interactive-hover: rgba(31, 41, 51, 0.95);
  --interactive-active: rgba(31, 41, 51, 1);
  
  /* Background hover/active states */
  --bg-hover: rgba(31, 41, 51, 0.05);
  --bg-active: rgba(31, 41, 51, 0.1);
  --bg-selected: rgba(31, 41, 51, 0.15);
  --bg-light: rgba(255, 255, 255, 0.57);
  
  /* Accent colors */
  --accent-primary: rgba(79, 70, 229, 0.85);
  --accent-hover: rgba(79, 70, 229, 1);
  --accent-bg: rgba(79, 70, 229, 0.22);
  --accent-subtle: rgba(79, 70, 229, 0.12);
  
  /* Highlight colors (for animations/flash effects) */
  --highlight-bg-start: rgba(255, 251, 230, 1);
  --highlight-bg-mid: rgba(255, 241, 184, 1);
  --highlight-bg-end: var(--feed-card-bg);
  
  /* Sidebar specific */
  --sidebar-bg: rgba(255, 255, 255, 0.92);
  --sidebar-border: rgba(31, 41, 51, 0.08);
  --sidebar-shadow: rgba(0, 0, 0, 0.08);
  --sidebar-item-hover: rgba(31, 41, 51, 0.05);
  --sidebar-item-active-bg: rgba(31, 41, 51, 0.08);
  --sidebar-item-active-indicator: rgba(79, 70, 229, 0.85);
  
  /* Sidebar panel (Library, Files, Workflows) */
  --sidebar-panel-bg: rgba(255, 255, 255, 0.98);
  --sidebar-panel-border: rgba(31, 41, 51, 0.12);
  --sidebar-panel-shadow: 2px 0 16px rgba(0, 0, 0, 0.1);

  /* Icon color groups (icon box + matching panel background) */
  --icon-group-1-box: rgb(118, 161, 251);
  --icon-group-1-panel: rgb(189, 203, 234);
  --icon-group-2-box: rgb(255, 174, 43);
  --icon-group-2-panel: rgb(255, 210, 137);
  --icon-group-3-box: rgb(150, 101, 255);
  --icon-group-3-panel: rgb(173, 159, 204);
  --icon-group-4-box: rgb(142, 228, 201);
  --icon-group-4-panel: rgb(183, 230, 217);
  --icon-group-5-box: rgb(255, 221, 64);
  --icon-group-5-panel: rgb(255, 239, 164);
  --icon-group-6-box: rgb(123, 162, 240);
  --icon-group-6-panel: rgb(53, 110, 234);
  --icon-group-7-box: rgb(201, 201, 201);
  --icon-group-7-panel: rgb(22, 22, 23);
  
  /* Body/Page background */
  --body-bg: #ffffff;
  --body-bg-solid: #ffffff;
  --page-bg: #ececec;
  --active-bg: #d9d9d9;
  --hover-bg: #e6e6e6;
  
  /* Topbar */
  --topbar-bg: rgba(255, 255, 255, 0.95);
  --topbar-border: rgba(31, 41, 51, 0.08);
  --topbar-font-size: 13px;
  --topbar-font-weight: 300;
  --topbar-text-default: rgba(31, 41, 51, 0.65);
  --topbar-text-hover: rgba(31, 41, 51, 0.85);
  --topbar-text-active: #3e3e3e;
  --topbar-bg-hover: rgba(31, 41, 51, 0.06);
  --topbar-bg-active: rgba(31, 41, 51, 0.12);
  
  /* Feed/Content */
  --feed-bg: transparent;
  --feed-card-bg: rgba(255, 255, 255, 0.95);
  --feed-card-border: rgba(31, 41, 51, 0.08);
  
  /* Buttons */
  --button-bg: rgba(17, 24, 39, 0.08);
  --button-hover-bg: rgba(17, 24, 39, 0.16);
  --button-active-bg: rgba(17, 24, 39, 0.2);
  --button-text: rgba(31, 41, 51, 0.86);
  
  /* Input fields */
  --input-text: rgba(31, 41, 51, 0.9);
  --input-bg: #d6d8db;
  --input-border: #84848457;
  --input-focus-border: #98a4ab57;
  
  /* Shadows - Light theme has lighter shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
  --shadow-none: none;
  
  /* Effects */
  --backdrop-blur: blur(12px);
  --backdrop-blur-strong: blur(20px);
  
  /* IDE specific (VS Code light theme colors) */
  --ide-bg: #ffffff;
  --ide-panel-bg: #f8f8f8;
  --ide-sidebar-bg: #f8f8f8;
  --ide-sidebar-rail-bg: #ebebeb;
  --ide-border: #e5e5e5;
  --ide-text: #333333;
  --ide-text-muted: #6a737d;
  --ide-header-bg: #f3f3f3;
  --ide-icon-color: #424242;
  --ide-icon-hover: #2c2c2c;
  --ide-icon-active: #000000;
  --active-file-bg: #b5e1ff;
  --active-file-border: #007acc;
  --ide-editor-bg: #eaeaea;
  
  /* Border radius - can be different per theme */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Border widths */
  --border-width-thin: 1px;
  --border-width-default: 1px;
  --border-width-thick: 1px;
}

/* Dev Theme (Alternative dark with GitHub-inspired blues) */
body.theme-dev {
  /* Background colors */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --bg-elevated: #1c2128;
  --card-bg: #161b22;

  /* Highlighted button - VS Code dark blue */
  --highlighted-button-bg: #0e639c;
  --highlighted-button-hover-bg: #1177bb;
  --highlighted-button-active-bg: #1a8cd8; 
  --highlighted-button-text: #ffffff;

  /* Orange highlighted button - vibrant orange */
  --orange-highlighted-button-bg: #ff6b35;
  --orange-highlighted-button-hover-bg: #ff5722;
  --orange-highlighted-button-active-bg: #e64a19;
  --orange-highlighted-button-text: #ffffff;
  
  /* Surface colors */
  --surface-primary: rgba(13, 17, 23, 0.92);
  --surface-secondary: rgba(22, 27, 34, 0.95);
  --surface-overlay: rgba(13, 17, 23, 0.98);
  
  /* Border colors */
  --border-default: rgba(240, 246, 252, 0.08);
  --border-muted: rgba(240, 246, 252, 0.05);
  --border-strong: rgba(240, 246, 252, 0.16);
  
  /* Text colors */
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-contrast: #464646;
  --text-contrast-highlight: #151212;
  
  /* Interactive element colors */
  --interactive-default: rgba(255, 255, 255, 0.7);
  --interactive-hover: rgba(255, 255, 255, 0.95);
  --interactive-active: #ffffff;
  
  /* Background hover/active states */
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-selected: rgba(255, 255, 255, 0.15);
  --bg-light: rgba(255, 255, 255, 0.57);
  
  /* Accent colors - GitHub blue */
  --accent-primary: #58a6ff;
  --accent-hover: #79c0ff;
  --accent-bg: rgba(88, 166, 255, 0.32);
  --accent-subtle: rgba(88, 166, 255, 0.16);
  
  /* Highlight colors (for animations/flash effects) */
  --highlight-bg-start: rgba(88, 166, 255, 0.2);
  --highlight-bg-mid: rgba(88, 166, 255, 0.35);
  --highlight-bg-end: var(--feed-card-bg);
  
  /* Sidebar specific */
  --sidebar-bg: #1c1c1c;
  --sidebar-border: none;
  --sidebar-shadow: rgba(0, 0, 0, 0.2);
  --sidebar-item-hover: rgba(255, 255, 255, 0.05);
  --sidebar-item-active-bg: rgba(255, 255, 255, 0.08);
  --sidebar-item-active-indicator: #58a6ff;
  
  /* Sidebar panel (Library, Files, Workflows) */
  --sidebar-panel-bg: rgb(26, 27, 28);
  --sidebar-panel-border: rgb(26, 27, 28);
  --sidebar-panel-shadow: 2px 0 16px rgb(0, 0, 0);

  /* Icon color groups (icon box + matching panel background) */
  --icon-group-1-box: rgb(118, 161, 251);
  --icon-group-1-panel: rgb(189, 203, 234);
  --icon-group-2-box: rgb(255, 174, 43);
  --icon-group-2-panel: rgb(255 230 188);
  --icon-group-3-box: rgb(150, 101, 255);
  --icon-group-3-panel: rgb(173, 159, 204);
  --icon-group-4-box: rgb(142, 228, 201);
  --icon-group-4-panel: rgb(183, 230, 217);
  --icon-group-5-box: rgb(255, 221, 64);
  --icon-group-5-panel: rgb(255, 239, 164);
  --icon-group-6-box: rgb(123, 162, 240);
  --icon-group-6-panel: rgb(189, 203, 234);
  --icon-group-7-box: rgb(67, 68, 70);
  --icon-group-7-panel: rgb(22, 22, 22);
  
  /* Body/Page background */
  --body-bg: #232323;
  --body-bg-solid: #232323;
  --page-bg: #000000;
  --active-bg: #37373d;
  --hover-bg: #2a2a2a;
  
  /* Topbar */
  --topbar-bg: #1c1c1c;
  --topbar-border: none;
  --topbar-font-size: 13px;
  --topbar-font-weight: 300;
  --topbar-text-default: rgba(255, 255, 255, 0.6);
  --topbar-text-hover: rgba(255, 255, 255, 0.8);
  --topbar-text-active: #ffffff;
  --topbar-bg-hover: rgba(255, 255, 255, 0.06);
  --topbar-bg-active: rgba(255, 255, 255, 0.12);
  
  /* Feed/Content */
  --feed-bg: transparent;
  --feed-card-bg: rgba(22, 27, 34, 0.95);
  --feed-card-border: rgba(240, 246, 252, 0.08);
  
  /* Buttons */
  --button-bg: rgba(240, 246, 252, 0.08);
  --button-hover-bg: rgba(240, 246, 252, 0.16);
  --button-active-bg: rgba(240, 246, 252, 0.2);
  --button-text: rgba(255, 255, 255, 0.88);
  
  /* Input fields */
  --input-text: rgba(238, 238, 238, 0.931);
  --input-bg: rgba(255, 255, 255, 0.08);
  --input-border: rgb(30, 28, 28);
  --input-focus-border: rgb(30, 26, 26);
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 6px 0 20px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-none: none;
  
  /* Effects */
  --backdrop-blur: blur(18px);
  --backdrop-blur-strong: blur(24px);
  
  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Border widths */
  --border-width-thin: 1px;
  --border-width-default: 1px;
  --border-width-thick: 2px;
  
  /* IDE specific (VS Code dark theme colors) */
  --ide-bg: #252526;
  --ide-panel-bg: #1e1e1e;
  --ide-sidebar-bg: #1e1e1e;
  --ide-sidebar-rail-bg: #1e1e1e;
  --ide-border: #3e3e42;
  --ide-text: #cccccc;
  --ide-text-muted: #858585;
  --ide-header-bg: #252526;
  --ide-icon-color: #858585;
  --ide-icon-hover: #cccccc;
  --ide-icon-active: #ffffff;
  --active-file-bg: #094771;
  --active-file-border: #007acc;
}

/* Vibe Theme (Grey/purple tones) */
body.theme-vibe {
  /* Background colors - grey tones */
  --bg-primary: #2a2a3e;
  --bg-secondary: #232336;
  --bg-tertiary: #1e1e2e;
  --bg-elevated: #2f2f45;
  --card-bg: #293d4f;

  /* Highlighted button - VS Code dark blue */
  --highlighted-button-bg: #0e639c;
  --highlighted-button-hover-bg: #1177bb;
  --highlighted-button-active-bg: #1a8cd8; 
  --highlighted-button-text: #ffffff;

  /* Orange highlighted button - vibrant orange */
  --orange-highlighted-button-bg: #ff6b35;
  --orange-highlighted-button-hover-bg: #ff5722;
  --orange-highlighted-button-active-bg: #e64a19;
  --orange-highlighted-button-text: #ffffff;
  
  /* Surface colors */
  --surface-primary: rgba(42, 42, 62, 0.92);
  --surface-secondary: rgba(35, 35, 54, 0.95);
  --surface-overlay: rgba(42, 42, 62, 0.98);
  
  /* Border colors */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-muted: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.16);
  
  /* Text colors */
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-contrast: #464646;
  --text-contrast-highlight: #151212;
  
  /* Interactive element colors */
  --interactive-default: rgba(255, 255, 255, 0.7);
  --interactive-hover: rgba(255, 255, 255, 0.95);
  --interactive-active: #ffffff;
  
  /* Background hover/active states */
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-selected: rgba(255, 255, 255, 0.15);
  --bg-light: rgba(255, 255, 255, 0.57);
  
  /* Accent colors - purple/blue */
  --accent-primary: rgba(138, 116, 249, 0.9);
  --accent-hover: rgba(138, 116, 249, 1);
  --accent-bg: rgba(138, 116, 249, 0.32);
  --accent-subtle: rgba(138, 116, 249, 0.16);
  
  /* Sidebar specific */
  --sidebar-bg: #232336;
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-shadow: rgba(0, 0, 0, 0.3);
  --sidebar-item-hover: rgba(255, 255, 255, 0.05);
  --sidebar-item-active-bg: rgba(255, 255, 255, 0.08);
  --sidebar-item-active-indicator: rgba(138, 116, 249, 0.9);
  
  /* Sidebar panel (Library, Files, Workflows) */
  --sidebar-panel-bg: rgba(35, 35, 54, 0.98);
  --sidebar-panel-border: rgba(255, 255, 255, 0.12);
  --sidebar-panel-shadow: 2px 0 16px rgba(0, 0, 0, 0.4);
  
  /* Icon color groups (icon box + matching panel background) */
  --icon-group-1-box: rgb(118, 161, 251);
  --icon-group-1-panel: rgb(189, 203, 234);
  --icon-group-2-box: rgb(255, 174, 43);
  --icon-group-2-panel: rgb(255 230 188);
  --icon-group-3-box: rgb(150, 101, 255);
  --icon-group-3-panel: rgb(173, 159, 204);
  --icon-group-4-box: rgb(142, 228, 201);
  --icon-group-4-panel: rgb(183, 230, 217);
  --icon-group-5-box: rgb(255, 221, 64);
  --icon-group-5-panel: rgb(255, 239, 164);
  --icon-group-6-box: rgb(122, 149, 203);
  --icon-group-6-panel: rgb(189, 203, 234);
  --icon-group-7-box: rgb(67, 68, 70);
  --icon-group-7-panel: rgb(2, 11, 30);

  /* Body/Page background - grey */
  --body-bg: #2a2a3e;
  --body-bg-solid: #2a2a3e;
  --page-bg: #151524;
  --active-bg: #42427c;
  --hover-bg: #3d3d68;
  
  
  /* Topbar */
  --topbar-bg: #232336;
  --topbar-border: rgba(255, 255, 255, 0.06);
  --topbar-font-size: 13px;
  --topbar-font-weight: 300;
  --topbar-text-default: rgba(255, 255, 255, 0.6);
  --topbar-text-hover: rgba(255, 255, 255, 0.8);
  --topbar-text-active: #ffffff;
  --topbar-bg-hover: rgba(255, 255, 255, 0.06);
  --topbar-bg-active: rgba(255, 255, 255, 0.12);
  
  /* Feed/Content */
  --feed-bg: transparent;
  --feed-card-bg: rgba(35, 35, 54, 0.95);
  --feed-card-border: rgba(255, 255, 255, 0.08);
  
  /* Buttons */
  --button-bg: rgba(255, 255, 255, 0.08);
  --button-hover-bg: rgba(255, 255, 255, 0.16);
  --button-active-bg: rgba(255, 255, 255, 0.2);
  --button-text: rgba(255, 255, 255, 0.88);
  
  /* Input fields */
  --input-text: rgba(255, 255, 255, 0.931);
  --input-bg: rgba(255, 255, 255, 0.08);
  --input-border: rgb(32, 32, 49);
  --input-focus-border: rgb(32, 32, 55);
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 6px 0 20px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.4);
  --shadow-none: none;
  
  /* Effects */
  --backdrop-blur: blur(18px);
  --backdrop-blur-strong: blur(24px);
  
  /* IDE specific */
  --ide-bg: #2a2a3e;
  --ide-panel-bg: #232336;
  --ide-sidebar-bg: #232336;
  --ide-sidebar-rail-bg: #1e1e2e;
  --ide-border: #3e3e52;
  --ide-text: #d4d4d4;
  --ide-text-muted: #9d9db3;
  --ide-header-bg: #2a2a3e;
  --ide-icon-color: #9d9db3;
  --ide-icon-hover: #d4d4d4;
  --ide-icon-active: #ffffff;
  --active-file-bg: #0f68a4;
  --active-file-border: #007acc;
}


/* Default canvas styles and colors */
.graph-canvas {
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  cursor: grab;
}

.graph-canvas:active {
  cursor: grabbing;
}

/* Canvas colors in :root (default theme-vibe) */
:root {
  --canvas-bg: #1a1a1a;
  --canvas-border: rgba(255, 255, 255, 0.05);
}

/* Canvas Theme Colors - Dark/Vibe Theme */
.theme-dark,
.theme-vibe {
  --canvas-bg: #1a1a1a;
  --canvas-border: rgba(255, 255, 255, 0.05);
}

/* Canvas Theme Colors - Darker/Dev Theme */
.theme-dev,
.theme-darker {
  --canvas-bg: #0a0a0a;
  --canvas-border: rgba(255, 255, 255, 0.03);
}

/* Canvas Theme Colors - Light Theme */
.theme-light {
  --canvas-bg: #f5f5f5;
  --canvas-border: rgba(0, 0, 0, 0.05);
}

/* Icon Colors - Consistent across themes */
.node-icon-start {
  --icon-bg: #8EE4C9; /* Mint green */
  --icon-color: #1a1a1a;
}

.node-icon-agent {
  --icon-bg: #76A1FB; /* Blue */
  --icon-color: #1a1a1a;
}

.node-icon-guardrails {
  --icon-bg: #FFDD40; /* Yellow */
  --icon-color: #1a1a1a;
}

.node-icon-file-search {
  --icon-bg: #FFD740; /* Yellow variant */
  --icon-color: #1a1a1a;
}

/* Default node styles */
.graph-node {
  border-radius: 12px;
  padding: 12px;
}

/* Port State Colors */
:root {
  --port-empty-border: #992222;
  --port-connected-border: #46dc78;
  --port-filled-border: #004499;
  
  /* Port type colors */
  --port-type-string: #76A1FB;
  --port-type-number: #FFDD40;
  --port-type-boolean: #8EE4C9;
  --port-type-image: #FF6B9D;
  --port-type-model: #9B87F5;
  --port-type-array: #FFA500;
  --port-type-object: #00CED1;
  --port-type-any: #CCCCCC;
  
  /* Node border state colors */
  --node-border-selected: #0066cc;
  --node-border-selected-expanded: #0066cc;
  --node-border-incomplete: #FFC107;
  --node-border-complete: #4CAF50;
  
  /* Default node colors (theme-vibe/dark) */
  --node-bg: #2a2a2a;
  --node-border: rgba(255, 255, 255, 0.1);
  --node-title-color: #ffffff;
  --node-subtitle-color: rgba(255, 255, 255, 0.5);
  --handle-bg: #1a1a1a;
  --handle-border: rgba(255, 255, 255, 0.3);
  --icon-color: #1a1a1a;
  
  /* Default expand toggle colors */
  --toggle-bg: #2a2a2a;
  --toggle-border: rgba(255, 255, 255, 0.2);
  --toggle-icon: #ffffff;
  
  /* Default port backgrounds (theme-vibe/dark) */
  --port-empty-bg: #1a1a1a;
  --port-connected-bg: #1a1a1a;
  --port-filled-bg: #1a1a1a;
  
  /* Default widget colors */
  --widget-bg: #2a2a2a;
  --widget-border: rgba(255, 255, 255, 0.2);
  --widget-text: #ffffff;
  --widget-placeholder: rgba(255, 255, 255, 0.4);
  --widget-focus-border: #0066cc;
  --widget-checkbox-checked: #0066cc;
  --widget-checkbox-mark: #ffffff;
}

/* Theme-specific colors - Dark/Vibe Theme */
.theme-dark,
.theme-vibe {
  /* Node colors */
  --node-bg: #2a2a2a;
  --node-border: rgba(255, 255, 255, 0.1);
  --node-title-color: #ffffff;
  --node-subtitle-color: rgba(255, 255, 255, 0.5);
  --handle-bg: #1a1a1a;
  --handle-border: rgba(255, 255, 255, 0.3);
  --icon-color: #1a1a1a;
  
  /* Expand toggle colors */
  --toggle-bg: #2a2a2a;
  --toggle-border: rgba(255, 255, 255, 0.2);
  --toggle-icon: #ffffff;
  
  /* Port backgrounds */
  --port-empty-bg: #1a1a1a;
  --port-connected-bg: #1a1a1a;
  --port-filled-bg: #1a1a1a;
  
  /* Widget colors */
  --widget-bg: #2a2a2a;
  --widget-border: rgba(255, 255, 255, 0.2);
  --widget-text: #ffffff;
  --widget-placeholder: rgba(255, 255, 255, 0.4);
  --widget-focus-border: #0066cc;
  --widget-checkbox-checked: #0066cc;
  --widget-checkbox-mark: #ffffff;
}

/* Theme-specific colors - Dev/Darker Theme */
.theme-dev,
.theme-darker {
  /* Node colors */
  --node-bg: #1f1f1f;
  --node-border: rgba(255, 255, 255, 0.08);
  --node-title-color: #ffffff;
  --node-subtitle-color: rgba(255, 255, 255, 0.45);
  --handle-bg: #0a0a0a;
  --handle-border: rgba(255, 255, 255, 0.25);
  --icon-color: #1a1a1a;
  
  /* Expand toggle colors */
  --toggle-bg: #1f1f1f;
  --toggle-border: rgba(255, 255, 255, 0.15);
  --toggle-icon: #ffffff;
  
  /* Port backgrounds */
  --port-empty-bg: #0a0a0a;
  --port-connected-bg: #0a0a0a;
  --port-filled-bg: #0a0a0a;
  
  /* Widget colors */
  --widget-bg: #1f1f1f;
  --widget-border: rgba(255, 255, 255, 0.15);
  --widget-text: #ffffff;
  --widget-placeholder: rgba(255, 255, 255, 0.3);
  --widget-focus-border: #0066cc;
  --widget-checkbox-checked: #0066cc;
  --widget-checkbox-mark: #ffffff;
}

/* Theme-specific colors - Light Theme */
.theme-light {
  /* Node colors */
  --node-bg: #ffffff;
  --node-border: rgba(0, 0, 0, 0.1);
  --node-title-color: #000000;
  --node-subtitle-color: rgba(0, 0, 0, 0.5);
  --handle-bg: #f5f5f5;
  --handle-border: rgba(0, 0, 0, 0.2);
  --icon-color: #1a1a1a;
  
  /* Expand toggle colors */
  --toggle-bg: #f5f5f5;
  --toggle-border: rgba(0, 0, 0, 0.2);
  --toggle-icon: #000000;
  
  /* Port backgrounds */
  --port-empty-bg: #f5f5f5;
  --port-connected-bg: #f5f5f5;
  --port-filled-bg: #f5f5f5;
  
  /* Widget colors */
  --widget-bg: #f5f5f5;
  --widget-border: rgba(0, 0, 0, 0.2);
  --widget-text: #000000;
  --widget-placeholder: rgba(0, 0, 0, 0.4);
  --widget-focus-border: #0066cc;
  --widget-checkbox-checked: #0066cc;
  --widget-checkbox-mark: #ffffff;
}

/* Default edge styles */
.graph-edge {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Edge colors in :root (default theme-vibe) */
:root {
  --edge-color: rgba(255, 255, 255, 0.2);
  --edge-selected-color: #0066cc;
  --edge-width: 1.5;
}

/* Edge Theme Colors - Dark/Vibe Theme */
.theme-dark,
.theme-vibe {
  --edge-color: rgba(255, 255, 255, 0.2);
  --edge-selected-color: #0066cc;
  --edge-width: 1.5;
}

/* Edge Theme Colors - Darker/Dev Theme */
.theme-dev,
.theme-darker {
  --edge-color: rgba(255, 255, 255, 0.35);
  --edge-selected-color: #0066cc;
  --edge-width: 1.5;
}

/* Edge Theme Colors - Light Theme */
.theme-light {
  --edge-color: rgba(0, 0, 0, 0.15);
  --edge-selected-color: #0066cc;
  --edge-width: 1.5;
}

/* Graph component styles */

/* Modern AI Platform Theme - Approachable, Professional, Creative */

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: var(--body-bg);
    min-height: 100vh;
    overflow-y: auto; /* allow page scroll */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}


#app {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Canvas - soft, approachable background */
#workflow-builder {
    flex: 1;
    width: 100%;
    min-height: calc(100vh - 80px);
    /* Soft gradient canvas - not harsh black or stark white */
    background: linear-gradient(135deg, #f5f7fb 0%, #e8eef7 100%);
    border: none;
    cursor: crosshair;
    /* Subtle inner shadow for depth */
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Toast animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

/* ----------------------------- */
/* LiteGraph Theme Variables     */
/* Scoped to the host element    */
/* ----------------------------- */

.litegraph-ui {
    /* Base defaults (used if no theme class present) */
    --lg-header-color: #5B5FC7;         /* node title bar */
    --lg-title-color: #FFFFFF;           /* title text */
    --lg-title-selected-color: #FFFFFF;  /* selected title text */
    --lg-node-bgcolor: #2F3136;          /* node body */
    --lg-node-color: #3A3D45;            /* outline/stroke */
    --lg-node-boxcolor: #6B7280;         /* border/box accent */
    --lg-title-font: 600 13px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --lg-inner-font: 12px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --lg-canvas-bg: #1A1A1A;             /* canvas background */
    --lg-dot-color: #6C6A7A;             /* canvas dots */

    /* Full size canvas that shifts right based on sidebar */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    /* Shift canvas to the right to accommodate sidebar */
    margin-left: var(--app-sidebar-content-offset, 0px);
    transition: margin-left 0.25s ease;
}

/* Vibe (purple) */
.litegraph-ui.theme-vibe {
    --lg-header-color: #5B5FC7;
    --lg-title-color: #FFFFFF;
    --lg-title-selected-color: #FFFFFF;
    --lg-node-bgcolor: #2E2E34;
    --lg-node-color: #3A3A42;
    --lg-node-boxcolor: #5B5FC7;
    --lg-canvas-bg: #1A1A1A;
    --lg-dot-color: #6C6A7A;
}

/* Dev (grey) */
.litegraph-ui.theme-dev {
    --lg-header-color: #64748B; /* slate */
    --lg-title-color: #FFFFFF;
    --lg-title-selected-color: #FFFFFF;
    --lg-node-bgcolor: #2A2D33; /* dark grey */
    --lg-node-color: #3A3D45;   /* slightly lighter stroke */
    --lg-node-boxcolor: #7A7F8C;/* accent border */
    --lg-canvas-bg: #121417;    /* very dark */
    --lg-dot-color: #3A3D45;    /* subdued dots */
}

/* Light (whitish) */
.litegraph-ui.theme-light {
    --lg-header-color: #4F46E5; /* indigo for contrast on light */
    --lg-title-color: #111827;  /* dark text */
    --lg-title-selected-color: #111827;
    --lg-node-bgcolor: #F3F4F6; /* light node body */
    --lg-node-color: #D1D5DB;   /* light stroke */
    --lg-node-boxcolor: #9CA3AF;
    --lg-canvas-bg: #F5F7FB;    /* light canvas */
    --lg-dot-color: #C8CCD8;    /* light dots */
}
/* Social Feed Styles - GitHub-inspired */
.feed-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 80px;
}

.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.feed-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
}

.feed-controls { display:flex; gap:12px; align-items:center; }
.feed-filters { display:flex; gap:8px; }
/* .feed-search removed (hero used instead) */

/* Search bar */
.search-bar {
    display:flex;
    align-items:center;
    gap:8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--input-bg);
    backdrop-filter: var(--backdrop-blur);
    border: var(--border-width-thin) solid var(--input-border);
}
.search-icon { opacity: 0.9; }
.search-input {
    flex:1;
    border:none;
    outline:none;
    background: transparent;
    color: var(--text-primary);
}
.search-input::-moz-placeholder { color: var(--text-muted); }
.search-input::placeholder { color: var(--text-muted); }

/* Search Hero (large Ask anything box) */
.search-hero {
    background: var(--feed-card-bg);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}
.search-hero-input {
    display:flex;
    align-items:center;
    gap:10px;
    border: var(--border-width-thin) solid var(--input-border);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    background: var(--bg-primary);
}
.hero-icon { font-size: 16px; }
.hero-input {
    flex:1; border:none; outline:none; font-size: 15px; color: var(--text-primary); background: transparent;
}
.hero-go {
    border:none; background: var(--button-bg); color: var(--button-text); border-radius: var(--radius-md); padding:6px 10px; cursor:pointer;
}
.hero-go:hover { background: var(--button-hover-bg); }
.search-hero-examples { margin-top: 10px; display:flex; flex-wrap:wrap; gap:8px; }

.filter-btn {
    padding: 8px 16px;
    border: none;
    background: var(--button-bg);
    color: var(--interactive-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: var(--button-hover-bg);
    color: var(--interactive-hover);
}

.filter-btn.active {
    background: var(--button-active-bg);
    color: var(--interactive-active);
}

.feed-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* CreatePostWidget Styles */
.create-post-widget {
    background: var(--feed-card-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.widget-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-placeholder {
    font-size: 20px;
}

.post-input {
    flex: 1;
    border: var(--border-width-thin) solid var(--input-border);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.post-input:hover {
    background: var(--bg-hover);
}

.post-actions {
    display: flex;
    gap: 12px;
    justify-content: space-around;
}

.action-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* PostCard Styles */
.post-card {
    background: transparent;
    border: none;
    border-top: 1px solid var(--feed-card-border, var(--border-default));
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
    transition: none;
}

.post-card:first-child {
    border-top: none;
}

/* Animation when a new post is inserted */
@keyframes postInsertPop {
    0% { transform: translateY(-6px) scale(0.97); opacity: 0; box-shadow: 0 0 0 rgba(0,0,0,0); }
    60% { transform: translateY(0) scale(1.01); opacity: 1; box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
    100% { transform: translateY(0) scale(1); opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
}
@keyframes postFlashHighlight {
    0% { background: var(--highlight-bg-start); }
    30% { background: var(--highlight-bg-mid); }
    100% { background: var(--highlight-bg-end); }
}
.post-insert-animate { animation: postInsertPop 0.55s cubic-bezier(.25,.8,.25,1); }
.post-flash-highlight { animation: postFlashHighlight 1.1s ease-out; }

.post-card:hover {
    box-shadow: none;
}

.post-header {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 16px;
    border-bottom: none;
}

/* Avatar slot for post cards */
.post-avatar-slot {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .5px;
    border: 2px solid var(--feed-card-bg);
    box-shadow: none;
}
body.theme-dev .post-avatar-circle { border-color: var(--surface-raised); }
/* When displaying a real avatar image, ensure it fits the circle */
img.post-avatar-circle.post-avatar-image {
    width: 32px;
    height: 32px;
    -o-object-fit: cover;
       object-fit: cover;
    background: none;
    display: block;
    border: 2px solid var(--feed-card-bg);
}
body.theme-dev img.post-avatar-circle.post-avatar-image { border-color: var(--surface-raised); }

.user-info {
    flex: 1;
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 18px;
}

.post-time {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 16px;
}

.post-menu-btn {
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 24px;
    padding: 0;
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s;
    line-height: 1;
}

.post-menu-btn:hover {
    opacity: 0.5;
}

.post-content {
    color: var(--text-primary);
    line-height: 1.5;
    padding: 0 16px 8px 16px;
    margin-bottom: 0;
    font-size: 14px;
}

.post-body {
    border: 1px solid var(--feed-card-border, var(--border-default));
    border-radius: 12px;
    margin: 6px 16px 12px 16px;
    overflow: hidden;
    background: var(--feed-card-bg, var(--bg-primary));
    display: flex;
    flex-direction: column;
    gap: 0;
}

.post-body--text-only {
    padding: 0;
}

.post-card--text .post-body {
    padding: 16px;
}

.post-card--image .post-body,
.post-card--video .post-body {
    padding: 0;
}

.post-media {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.media-image {
    width: 100%;
    height: auto;
    display: block;
}

.post-video {
    width: 100%;
    display: block;
    background: #000;
}

.post-video video {
    width: 100%;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
}

.post-body .post-content {
    border-top: 1px solid var(--feed-card-border, var(--border-default));
}

.post-body--text-only .post-content {
    border-top: none;
}

.post-card .post-actions {
    display: flex;
    gap: 18px;
    padding: 6px 12px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.post-card .action-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: opacity 0.2s;
    line-height: 0;
    display: flex;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
    min-width: 32px;
}

.post-card .action-btn svg {
    width: 26px;
    height: 26px;
    display: block;
}

.post-cta {
    border-top: 1px solid var(--feed-card-border, var(--border-default));
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.post-cta-subtext {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-tertiary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-cta-button {
    background: var(--accent-strong, #0095f6);
    color: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
}

.post-cta-button:hover {
    opacity: 0.9;
}

.post-card .action-btn:hover {
    opacity: 0.6;
}

.post-card .action-btn.active {
    color: #ed4956;
}

/* Save/bookmark button on right */
.post-card .action-btn.save {
    margin-left: auto;
}

/* Like count below actions */
.post-likes {
    padding: 0 16px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.post-content {
    color: var(--text-primary);
    line-height: 1.5;
    padding: 14px 16px;
    margin: 0;
    font-size: 14px;
    background: transparent;
}

/* Comments section */
.post-comments {
    padding: 0 16px;
    margin-bottom: 4px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.post-comments span {
    cursor: pointer;
}

.post-comments span:hover {
    color: var(--text-primary);
}

/* TrendingWidget Styles */
.trending-widget {
    background: var(--feed-card-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.trending-widget .widget-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.trending-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trending-item {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

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

.trend-rank {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 14px;
    min-width: 20px;
}

.trend-info {
    flex: 1;
}

.trend-title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.trend-count {
    font-size: 12px;
    color: var(--text-tertiary);
}

.see-more-btn {
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    border: none;
    background: transparent;
    color: #667eea;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.see-more-btn:hover {
    background: #f6f8fa;
}

/* ExamplesWidget */
.examples-widget {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.examples-widget .widget-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #24292e;
    margin-bottom: 12px;
}
.examples-list { display:flex; flex-wrap: wrap; gap:8px; }
.example-chip {
    padding: 8px 12px;
    border-radius: 16px;
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    color: #24292e;
    cursor: pointer;
    font-size: 13px;
}
.example-chip:hover { background:#eef2f6; }

/* Utility classes */
.loading-msg, .empty-msg, .error-msg {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.empty-state {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-state p {
    color: #586069;
    font-size: 16px;
}

/* Profile and Post page containers - add sidebar offset */
.profile-container,
.post-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 80px;
    /* Add left margin when sidebar is present */
    margin-left: calc(var(--app-sidebar-content-offset, 0px) + auto);
    transition: margin-left 0.25s ease;
}

/* CreatePostModal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.modal-card { width: 560px; max-width: 90vw; background:#fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #e5e7eb; }
.modal-header h3 { margin:0; font-size:16px; color:#111827; }
.modal-close { border:none; background:transparent; font-size:18px; cursor:pointer; }
.modal-body { padding:16px; display:flex; flex-direction:column; gap:12px; }
#cp-content { width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:10px; resize:vertical; color:#111827; }
.upload-row { display:flex; align-items:center; gap:8px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.btn-primary { background:#2563eb; color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; }
.btn-primary:hover { background:#1d4ed8; }
.btn-secondary { background:#f3f4f6; color:#111827; border:1px solid #e5e7eb; padding:8px 12px; border-radius:8px; cursor:pointer; }
.btn-secondary:hover { background:#e5e7eb; }

/* Highlighted button - VS Code blue */
.highlighted-button { background: var(--highlighted-button-bg); color: var(--highlighted-button-text); border: 1px solid var(--highlighted-button-bg); padding:8px 16px; border-radius:6px; cursor:pointer; transition: all 0.15s ease; font-size: 0.95rem; }
.highlighted-button:hover { background: var(--highlighted-button-hover-bg); border-color: var(--highlighted-button-hover-bg); }
.highlighted-button:active { background: var(--highlighted-button-active-bg); border-color: var(--highlighted-button-active-bg); }

/* Orange highlighted button - vibrant orange */
.orange-highlighted-button { background: var(--orange-highlighted-button-bg); color: var(--orange-highlighted-button-text); border: 1px solid var(--orange-highlighted-button-bg); padding:8px 16px; border-radius:6px; cursor:pointer; transition: all 0.15s ease; font-size: 0.95rem; }
.orange-highlighted-button:hover { background: var(--orange-highlighted-button-hover-bg); border-color: var(--orange-highlighted-button-hover-bg); }
.orange-highlighted-button:active { background: var(--orange-highlighted-button-active-bg); border-color: var(--orange-highlighted-button-active-bg); }

/* --- Dark Theme (body.theme-dev) Component Overrides --- */
body.theme-dev .feed-header h2 { color: var(--fg); }
body.theme-dev .feed-container { color: var(--fg); }

/* Filters */
body.theme-dev .filter-btn { background: var(--surface-raised); color: var(--fg); border: 1px solid var(--border); }
body.theme-dev .filter-btn:hover { background: var(--hover); color: var(--fg); }
body.theme-dev .filter-btn.active { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }

/* Search Hero */
body.theme-dev .search-hero { background: var(--surface-raised); border: 1px solid var(--border); box-shadow: none; }
body.theme-dev .search-hero-input { background: var(--surface); border-color: var(--border); }
body.theme-dev .hero-input { color: var(--fg); }
body.theme-dev .hero-input::-moz-placeholder { color: var(--muted); }
body.theme-dev .hero-input::placeholder { color: var(--muted); }
body.theme-dev .hero-go { background: var(--accent-strong); }
body.theme-dev .hero-go:hover { background: #1a5fd0; }

/* Create Post */
body.theme-dev .create-post-widget { background: var(--surface-raised); border: 1px solid var(--border); box-shadow: none; }
body.theme-dev .post-input { border-color: var(--border); color: var(--muted); }
body.theme-dev .post-input:hover { background: var(--hover); }
body.theme-dev .action-btn { color: var(--muted); }
body.theme-dev .action-btn:hover { background: var(--hover); color: var(--fg); }

/* Post Card */
body.theme-dev .post-card {
    background: transparent;
    border: none;
    border-top: 1px solid var(--feed-card-border, var(--border));
    box-shadow: none;
}
body.theme-dev .user-name { color: var(--fg); }
body.theme-dev .post-time { color: var(--muted); }
body.theme-dev .post-content { color: var(--fg); }
body.theme-dev .post-stats { border-bottom-color: var(--border); color: var(--muted); }
body.theme-dev .post-menu-btn { color: var(--muted); }
body.theme-dev .post-menu-btn:hover { background: var(--hover); }
body.theme-dev .post-card .action-btn.active { color: #e25563; }

/* Trending */
body.theme-dev .trending-widget { background: var(--surface-raised); border: 1px solid var(--border); box-shadow: none; }
body.theme-dev .trending-widget .widget-header h3 { color: var(--fg); }
body.theme-dev .trending-item:hover { background: var(--hover); }
body.theme-dev .trend-title { color: var(--fg); }
body.theme-dev .trend-count { color: var(--muted); }

/* Examples */
body.theme-dev .examples-widget { background: var(--surface-raised); border: 1px solid var(--border); box-shadow: none; }
body.theme-dev .examples-widget .widget-header h3 { color: var(--fg); }
body.theme-dev .example-chip { background: var(--surface); border: 1px solid var(--border); color: var(--fg); }
body.theme-dev .example-chip:hover { background: var(--hover); }

/* Empty state */
body.theme-dev .empty-state { background: var(--surface-raised); border: 1px solid var(--border); box-shadow: none; }

/* Instagram-style centered modal */
define-postactionsmodal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
}

define-postactionsmodal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

/* Dark overlay */
define-postactionsmodal .modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  animation: fadeIn 0.15s ease;
}

/* Centered modal sheet */
define-postactionsmodal .modal-sheet {
  position: relative;
  background: var(--surface-raised, #262626);
  border-radius: 12px;
  width: 400px;
  max-width: 90vw;
  overflow: hidden;
  animation: zoomIn 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

/* Action button */
define-postactionsmodal .modal-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: background 0.1s ease;
  min-height: 48px;
}

define-postactionsmodal .modal-action-btn:last-child {
  border-bottom: none;
}

define-postactionsmodal .modal-action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

define-postactionsmodal .modal-action-btn:active {
  background: rgba(255, 255, 255, 0.1);
}

/* Danger actions (delete, report) */
define-postactionsmodal .modal-action-btn.danger {
  color: #ed4956;
  font-weight: 700;
}

define-postactionsmodal .modal-action-btn.danger:hover {
  background: rgba(237, 73, 86, 0.05);
}

/* Cancel button */
define-postactionsmodal .modal-action-btn.cancel {
  font-weight: 400;
  color: var(--text-primary, #fff);
}

/* Icon - hide them for cleaner Instagram look */
define-postactionsmodal .action-icon {
  display: none;
}

/* Text */
define-postactionsmodal .action-text {
  font-size: 14px;
}

/* Divider */
define-postactionsmodal .modal-divider {
  height: 8px;
  background: transparent;
  margin: 0;
}

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

@keyframes zoomIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Theme support */
body.theme-dev define-postactionsmodal .modal-sheet {
  background: var(--surface-raised);
  border: 1px solid var(--border);
}

body.theme-dev define-postactionsmodal .modal-action-btn {
  color: var(--fg);
  border-bottom-color: var(--border);
}

body.theme-dev define-postactionsmodal .modal-action-btn.danger {
  color: #ed4956;
}

body.theme-dev define-postactionsmodal .modal-action-btn:hover {
  background: var(--hover);
}

/* Light theme support */
body:not(.theme-dev) define-postactionsmodal .modal-sheet {
  background: #ffffff;
  border: 1px solid #dbdbdb;
}

body:not(.theme-dev) define-postactionsmodal .modal-action-btn {
  color: #262626;
  border-bottom-color: #dbdbdb;
}

body:not(.theme-dev) define-postactionsmodal .modal-action-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  define-postactionsmodal .modal-sheet {
    width: 90vw;
    max-width: 90vw;
  }
}

/* ===== TOPBAR CONSTANTS ===== */
:root {
  --topbar-height: 9vh;
  --topbar-item-height: 5vh;
}

/* ===== BASE CLASSES ===== */
.topbar-text {
  font-size: var(--topbar-font-size);
  font-weight: var(--topbar-font-weight);
  color: var(--topbar-text-default);
  transition: color 0.15s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.topbar-text:hover {
  color: var(--topbar-text-hover);
}

.topbar-text.active {
  color: var(--topbar-text-active);
  font-weight: 500;
}

/* ===== TOPBAR LAYOUT ===== */
.topbar-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 9999;
}

.topbar-container > * {
  height: var(--topbar-item-height);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  flex: 0 0 auto;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  flex: 0 0 auto;
}

.topbar-right > * {
  height: var(--topbar-item-height);
}

.topbar-balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  height: var(--topbar-item-height);
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 65%),
    color-mix(in srgb, var(--bg-secondary) 92%, black 8%);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.topbar-balance-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-primary) 48%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 24%, transparent), transparent 65%),
    color-mix(in srgb, var(--bg-secondary) 96%, white 4%);
}

.topbar-balance-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #30d158 0%, #10b981 100%);
  box-shadow: 0 0 14px rgba(48, 209, 88, 0.4);
  flex: 0 0 auto;
}

.topbar-balance-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.topbar-balance-value {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
}

.topbar-balance-label {
  font-size: 11px;
  line-height: 1.1;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.topbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
}

.topbar-logo svg {
  width: 40px;
  height: 40px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: none;
}

.nav-btn svg {
  opacity: 0.7;
  transition: opacity 0.2s;
}

.nav-btn:hover svg {
  opacity: 1;
}

.nav-btn.active svg {
  opacity: 1;
}

/* ===== OrgProjDisplay Styles ===== */
.org-proj-selector {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: #ffae2b;
  border-radius: 20px;
}

.org-dropdown,
.proj-dropdown {
  color: black;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.org-dropdown:hover,
.proj-dropdown:hover {
  border-color: var(--border-strong);
}

.org-dropdown:focus,
.proj-dropdown:focus {
  outline: none;
  border-color: var(--border-strong);
}

.separator {
  color: var(--text-secondary, #888);
  font-size: 1rem;
  font-weight: 300;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 0 0.25rem;
}

.session-reset-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: #3fb950;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  margin-right: 8px;
  transition: box-shadow 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.session-reset-dot:hover {
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.7);
  transform: scale(1.3);
}

/* ===== UserIcon Styles ===== */
.user-icon-container {
  position: relative;
  height: var(--topbar-item-height);
  display: flex;
  align-items: center;
}

.user-icon-button {
  width: var(--topbar-item-height);
  height: var(--topbar-item-height);
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Scope avatar image rule to only the topbar user icon to avoid leaking into feed cards */
.user-icon-container .user-avatar {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.user-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 50%;
}

.user-avatar-icon {
  fill: rgba(255, 255, 255, 0.7);
  width: 60%;
  height: 60%;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--page-bg);
  border: var(--border-width-default) solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: 10000;
  animation: dropdownSlideIn 0.15s ease;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  gap: 12px;
  border-bottom: none;
}

.user-dropdown-info {
  flex: 1;
  min-width: 0;
}

.user-dropdown-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-email {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border-default);
  margin: 0;
}

.connection-info-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 12, 18, 0.48);
  backdrop-filter: blur(6px);
}

.connection-info-modal-content {
  width: min(520px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  overflow: auto;
  background: var(--page-bg);
  color: var(--text-primary);
  border: var(--border-width-default) solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.connection-info-modal-header,
.connection-info-modal-footer {
  padding: 18px 20px;
}

.connection-info-modal-header {
  border-bottom: var(--border-width-default) solid var(--border-default);
}

.connection-info-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.connection-info-modal-body {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.connection-info-section {
  display: grid;
  gap: 6px;
}

.connection-info-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.connection-info-value {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}

.connection-info-subvalue {
  color: var(--text-muted);
}

.connection-info-modal-footer {
  display: flex;
  justify-content: flex-end;
  border-top: var(--border-width-default) solid var(--border-default);
}

.connection-info-close-btn {
  border: var(--border-width-default) solid var(--border-strong);
  background: var(--surface-secondary, var(--page-bg));
  color: var(--text-primary);
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
}

.connection-info-close-btn:hover {
  background: var(--surface-hover, rgba(127, 127, 127, 0.12));
}

#user-dropdown-search-mount {
  padding: 8px;
}

.theme-buttons-container {
  display: flex;
  padding: 4px;
  background: var(--bg-secondary);
  border-radius: 999px;
  position: relative;
  max-width: 280px;
  margin: 8px;
}

.theme-slider {
  position: absolute;
  height: calc(100% - 8px);
  width: calc(33.333% - 5px);
  margin: 0 4px;
  background: var(--bg-active);
  border: 1px solid var(--interactive-active);
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.theme-btn {
  flex: 1;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  transition: all 0.15s ease;
  position: relative;
  z-index: 1;
}

.theme-btn svg {
  width: 12px;
  height: 12px;
}

.theme-btn:hover {
  color: var(--text-primary);
}

.theme-btn.active {
  color: var(--interactive-active);
}

.theme-btn svg {
  fill: currentColor;
  width: 16px;
  height: 16px;
}

.user-dropdown-item {
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--topbar-font-size);
  font-weight: var(--topbar-font-weight);
  color: var(--topbar-text-default);
  transition: all 0.15s ease;
}

.user-dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--topbar-text-hover);
}

.user-dropdown-item svg {
  fill: var(--text-tertiary);
  width: auto;
  height: 0.9em;
}

.user-dropdown-signout {
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--topbar-font-size);
  font-weight: var(--topbar-font-weight);
  color: var(--topbar-text-default);
  transition: all 0.15s ease;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.user-dropdown-signout:hover {
  background: var(--bg-hover);
  color: var(--topbar-text-hover);
}

.signout-icon {
  fill: var(--text-tertiary);
  width: auto;
  height: 0.9em;
}

/* ===== SearchBar Styles ===== */
.search-bar-container {
  height: 100%;
  display: flex;
  align-items: center;
}

.search-bar-wrapper {
  position: relative;
  min-width: 200px;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 10px;
  width: auto;
  height: 0.9em;
  fill: var(--text-tertiary);
  pointer-events: none;
  transition: fill 0.15s ease;
}

.search-input {
  width: 100%;
  height: 100%;
  padding: 0 12px 0 34px;
  background: transparent;
  border: none;
  font-size: var(--topbar-font-size);
  font-weight: var(--topbar-font-weight);
  color: var(--text-primary);
  outline: none;
  transition: all 0.15s ease;
}

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

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

.search-input:focus {
  min-width: 280px;
}

.search-input:focus ~ .search-icon,
.search-bar-wrapper:hover .search-icon {
  fill: var(--interactive-hover);
}

/* Toast notification system */
define-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 999999;
  display: none;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  max-width: 300px;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

define-toast.toast-visible {
  display: flex;
  opacity: 1;
}

/* Light theme - Yellow translucent with black text */
define-toast.toast-success,
define-toast.toast-error,
define-toast.toast-warning,
define-toast.toast-info {
  background: rgba(255, 193, 7, 0.25);
  color: #1a1a1a;
  border: 1px solid rgba(255, 193, 7, 0.4);
}

/* Dark themes - White/black translucent with white to yellow gradient text */
.theme-dark define-toast.toast-success,
.theme-dark define-toast.toast-error,
.theme-dark define-toast.toast-warning,
.theme-dark define-toast.toast-info,
.theme-dev define-toast.toast-success,
.theme-dev define-toast.toast-error,
.theme-dev define-toast.toast-warning,
.theme-dev define-toast.toast-info {
  background: rgba(255, 255, 255, 0.1);
  color: #FFE082;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Edge labels - rendered on canvas, styles managed here for consistency */
/* Badge colors match toast error color for visibility */

/* WidgetInput - Overlay input for canvas widgets */
.widget-input-overlay {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  padding: 4px 6px;
  border: 3px solid #76A1FB !important;
  border-radius: 4px;
  background: #fff !important;
  color: #000 !important;
  outline: none;
  box-sizing: border-box;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.widget-input-overlay:focus {
  border-color: red !important;
  background: yellow !important;
}

.widget-select {
  cursor: pointer;
}

/* Controls Group - Unified container for RunButton + Toggles */
.controls-group {
  position: fixed;
  bottom: 38px;
  left: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  background: var(--highlighted-button-text);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* Run Button inside controls group */
define-runbutton {
  position: static;
  background: var(--icon-group-1-box);
  border-radius: 20px;
  padding: 0px;
  margin: 3px;
}

.play-btn {
  background: transparent;
  color: var(--icon-group-7-panel);
  border-radius: 0;
  border: none;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.play-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Toggle Group - Stacked toggles on the right */
.toggle-group {
  display: flex;
  flex-direction: column;
}

define-chaintoggle,
define-cachetoggle {
  position: static;
}

/* Shared toggle row styles */
.chain-toggle-container,
.cache-toggle-container {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 5px 10px;
  background: transparent;
  transition: all 0.2s ease;
}

.chain-toggle-container:hover,
.cache-toggle-container:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Divider between the two toggles */
define-chaintoggle {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chain-toggle-track,
.cache-toggle-track {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: rgb(196, 196, 196);
  position: relative;
  transition: background 0.2s ease;
}

.chain-toggle-track.active,
.cache-toggle-track.active {
  background: var(--icon-group-3-box);
}

.chain-toggle-thumb,
.cache-toggle-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--icon-group-7-panel);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}

.chain-toggle-track.active .chain-toggle-thumb,
.cache-toggle-track.active .cache-toggle-thumb {
  transform: translateX(12px);
}

.chain-toggle-label,
.cache-toggle-label {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--icon-group-7-panel);
  font-size: 11px;
  transition: color 0.2s ease;
}

.chain-toggle-label.active,
.cache-toggle-label.active {
  color: var(--icon-group-7-panel);
}

.chain-icon,
.cache-icon {
  width: 14px;
  height: 14px;
}

/* Canvas Nav - Bottom right vertical stack */
define-canvasnav {
  position: fixed;
  bottom: 60px;
  right: 8px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.canvas-nav-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 42%;
  background: var(--icon-group-2-panel);
  display: flex;
  font-size: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.canvas-nav-btn svg {
  color: var(--icon-group-7-panel);
}


[data-theme="dark"] .control-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .zoom-display {
  background: rgba(255, 255, 255, 0.05);
}

/* ─── NodeInfoPanel ─── */
node-info-panel {
  position: fixed;
  top: 10%;
  right: 5%;
  transform: translate(0, 0);
  z-index: 100000;
  width: 380px;
  max-height: 70vh;
  background: #fff;
  color: #222;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

.nip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}

.nip-title {
  font-size: 15px;
  font-weight: 600;
  color: #111;
}

.nip-close {
  background: none;
  border: none;
  font-size: 16px;
  color: #888;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s;
}
.nip-close:hover {
  background: #f0f0f0;
  color: #333;
}

.nip-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}

.nip-desc {
  margin: 0 0 10px;
  color: #444;
}

.nip-meta {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #666;
}

.nip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.nip-tag {
  background: #f0f0f0;
  color: #555;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}

.nip-section {
  margin-bottom: 12px;
}

.nip-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin-bottom: 6px;
}

.nip-port {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #f5f5f5;
}

.nip-port-name {
  font-weight: 500;
  color: #333;
}

.nip-port-type {
  color: #888;
  font-size: 12px;
}

.nip-empty {
  color: #bbb;
  font-style: italic;
  font-size: 12px;
}

.nip-constraint {
  padding: 3px 0;
  color: #555;
  font-size: 12px;
}