/* Support styles (scoped) */
.support-scope *, .support-scope :before, .support-scope :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 / .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: }.support-scope ::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 / .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: }.support-scope *, .support-scope :before, .support-scope :after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.support-scope :before, .support-scope :after{--tw-content: ""}.support-scope, .support-scope :host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}.support-scope{margin:0;line-height:inherit}.support-scope hr{height:0;color:inherit;border-top-width:1px}.support-scope abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.support-scope h1, .support-scope h2, .support-scope h3, .support-scope h4, .support-scope h5, .support-scope h6{font-size:inherit;font-weight:inherit}.support-scope a{color:inherit;text-decoration:inherit}.support-scope b, .support-scope strong{font-weight:bolder}.support-scope code, .support-scope kbd, .support-scope samp, .support-scope pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}.support-scope small{font-size:80%}.support-scope sub, .support-scope sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.support-scope sub{bottom:-.25em}.support-scope sup{top:-.5em}.support-scope table{text-indent:0;border-color:inherit;border-collapse:collapse}.support-scope button, .support-scope input, .support-scope optgroup, .support-scope select, .support-scope textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}.support-scope button, .support-scope select{text-transform:none}.support-scope button, .support-scope input:where([type=button]), .support-scope input:where([type=reset]), .support-scope input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}.support-scope :-moz-focusring{outline:auto}.support-scope :-moz-ui-invalid{box-shadow:none}.support-scope progress{vertical-align:baseline}.support-scope ::-webkit-inner-spin-button, .support-scope ::-webkit-outer-spin-button{height:auto}.support-scope [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.support-scope ::-webkit-search-decoration{-webkit-appearance:none}.support-scope ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.support-scope summary{display:list-item}.support-scope blockquote, .support-scope dl, .support-scope dd, .support-scope h1, .support-scope h2, .support-scope h3, .support-scope h4, .support-scope h5, .support-scope h6, .support-scope hr, .support-scope figure, .support-scope p, .support-scope pre{margin:0}.support-scope fieldset{margin:0;padding:0}.support-scope legend{padding:0}.support-scope ol, .support-scope ul, .support-scope menu{list-style:none;margin:0;padding:0}.support-scope dialog{padding:0}.support-scope textarea{resize:vertical}.support-scope input::-moz-placeholder, .support-scope textarea::-moz-placeholder{opacity:1;color:#9ca3af}.support-scope input::placeholder, .support-scope textarea::placeholder{opacity:1;color:#9ca3af}.support-scope button, .support-scope [role=button]{cursor:pointer}.support-scope :disabled{cursor:default}.support-scope img, .support-scope svg, .support-scope video, .support-scope canvas, .support-scope audio, .support-scope iframe, .support-scope embed, .support-scope object{display:block;vertical-align:middle}.support-scope img, .support-scope video{max-width:100%;height:auto}.support-scope [hidden]:where(:not([hidden=until-found])){display:none}.support-scope .container{width:100%}@media (min-width: 640px){.support-scope .container{max-width:640px}}@media (min-width: 768px){.support-scope .container{max-width:768px}}@media (min-width: 1024px){.support-scope .container{max-width:1024px}}@media (min-width: 1280px){.support-scope .container{max-width:1280px}}@media (min-width: 1536px){.support-scope .container{max-width:1536px}}.support-scope .absolute{position:absolute}.support-scope .relative{position:relative}.support-scope .sticky{position:sticky}.support-scope .-inset-4{inset:-1rem}.support-scope .inset-0{inset:0}.support-scope .bottom-0{bottom:0}.support-scope .left-0{left:0}.support-scope .right-0{right:0}.support-scope .top-0{top:0}.support-scope .-z-10{z-index:-10}.support-scope .z-10{z-index:10}.support-scope .z-50{z-index:50}.support-scope .mx-auto{margin-left:auto;margin-right:auto}.support-scope .my-10{margin-top:2.5rem;margin-bottom:2.5rem}.support-scope .mb-10{margin-bottom:2.5rem}.support-scope .mb-12{margin-bottom:3rem}.support-scope .mb-16{margin-bottom:4rem}.support-scope .mb-2{margin-bottom:.5rem}.support-scope .mb-3{margin-bottom:.75rem}.support-scope .mb-4{margin-bottom:1rem}.support-scope .mb-6{margin-bottom:1.5rem}.support-scope .mb-8{margin-bottom:2rem}.support-scope .ml-2{margin-left:.5rem}.support-scope .mt-1{margin-top:.25rem}.support-scope .mt-10{margin-top:2.5rem}.support-scope .mt-12{margin-top:3rem}.support-scope .mt-16{margin-top:4rem}.support-scope .mt-2{margin-top:.5rem}.support-scope .mt-3{margin-top:.75rem}.support-scope .mt-4{margin-top:1rem}.support-scope .mt-6{margin-top:1.5rem}.support-scope .mt-8{margin-top:2rem}.support-scope .block{display:block}.support-scope .flex{display:flex}.support-scope .inline-flex{display:inline-flex}.support-scope .grid{display:grid}.support-scope .contents{display:contents}.support-scope .h-10{height:2.5rem}.support-scope .h-12{height:3rem}.support-scope .h-16{height:4rem}.support-scope .h-3{height:.75rem}.support-scope .h-4{height:1rem}.support-scope .h-5{height:1.25rem}.support-scope .h-6{height:1.5rem}.support-scope .h-96{height:24rem}.support-scope .w-10{width:2.5rem}.support-scope .w-12{width:3rem}.support-scope .w-16{width:4rem}.support-scope .w-3{width:.75rem}.support-scope .w-4{width:1rem}.support-scope .w-5{width:1.25rem}.support-scope .w-6{width:1.5rem}.support-scope .w-96{width:24rem}.support-scope .w-auto{width:auto}.support-scope .w-full{width:100%}.support-scope .max-w-2xl{max-width:42rem}.support-scope .max-w-3xl{max-width:48rem}.support-scope .max-w-4xl{max-width:56rem}.support-scope .max-w-5xl{max-width:64rem}.support-scope .max-w-6xl{max-width:72rem}.support-scope .max-w-7xl{max-width:80rem}.support-scope .flex-shrink-0{flex-shrink:0}.support-scope .-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.support-scope .-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.support-scope .translate-x-1\/2{--tw-translate-x: 50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.support-scope .translate-y-1\/2{--tw-translate-y: 50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.support-scope .animate-fade-in-up{animation:fadeInUp .5s ease-out forwards}.support-scope .cursor-pointer{cursor:pointer}.support-scope .list-decimal{list-style-type:decimal}.support-scope .list-disc{list-style-type:disc}.support-scope .list-none{list-style-type:none}.support-scope .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.support-scope .flex-col{flex-direction:column}.support-scope .flex-wrap{flex-wrap:wrap}.support-scope .items-center{align-items:center}.support-scope .justify-center{justify-content:center}.support-scope .justify-between{justify-content:space-between}.support-scope .gap-1{gap:.25rem}.support-scope .gap-1\.5{gap:.375rem}.support-scope .gap-2{gap:.5rem}.support-scope .gap-3{gap:.75rem}.support-scope .gap-4{gap:1rem}.support-scope .gap-5{gap:1.25rem}.support-scope .gap-6{gap:1.5rem}.support-scope .gap-8{gap:2rem}.support-scope .space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.support-scope .space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.support-scope .space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.support-scope .space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.support-scope .overflow-hidden{overflow:hidden}.support-scope .scroll-smooth{scroll-behavior:smooth}.support-scope .rounded{border-radius:.25rem}.support-scope .rounded-2xl{border-radius:1rem}.support-scope .rounded-full{border-radius:9999px}.support-scope .rounded-lg{border-radius:.5rem}.support-scope .rounded-xl{border-radius:.75rem}.support-scope .border{border-width:1px}.support-scope .border-y{border-top-width:1px;border-bottom-width:1px}.support-scope .border-b{border-bottom-width:1px}.support-scope .border-t{border-top-width:1px}.support-scope .border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.support-scope .border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.support-scope .border-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1))}.support-scope .border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.support-scope .border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.support-scope .bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.support-scope .bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.support-scope .bg-primary-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.support-scope .bg-primary-500\/20{background-color:#3b82f633}.support-scope .bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.support-scope .bg-purple-100{--tw-bg-opacity: 1;background-color:rgb(243 232 255 / var(--tw-bg-opacity, 1))}.support-scope .bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.support-scope .bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.support-scope .bg-slate-700{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.support-scope .bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.support-scope .bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.support-scope .bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.support-scope .bg-white\/95{background-color:#fffffff2}.support-scope .bg-yellow-500{--tw-bg-opacity: 1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.support-scope .bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.support-scope .from-primary-50\/50{--tw-gradient-from: rgb(239 246 255 / .5) var(--tw-gradient-from-position);--tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.support-scope .to-white{--tw-gradient-to: #fff var(--tw-gradient-to-position)}.support-scope .p-5{padding:1.25rem}.support-scope .p-6{padding:1.5rem}.support-scope .p-8{padding:2rem}.support-scope .px-1{padding-left:.25rem;padding-right:.25rem}.support-scope .px-10{padding-left:2.5rem;padding-right:2.5rem}.support-scope .px-4{padding-left:1rem;padding-right:1rem}.support-scope .px-5{padding-left:1.25rem;padding-right:1.25rem}.support-scope .px-6{padding-left:1.5rem;padding-right:1.5rem}.support-scope .px-8{padding-left:2rem;padding-right:2rem}.support-scope .py-12{padding-top:3rem;padding-bottom:3rem}.support-scope .py-16{padding-top:4rem;padding-bottom:4rem}.support-scope .py-2{padding-top:.5rem;padding-bottom:.5rem}.support-scope .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.support-scope .py-20{padding-top:5rem;padding-bottom:5rem}.support-scope .py-24{padding-top:6rem;padding-bottom:6rem}.support-scope .py-3{padding-top:.75rem;padding-bottom:.75rem}.support-scope .py-4{padding-top:1rem;padding-bottom:1rem}.support-scope .py-5{padding-top:1.25rem;padding-bottom:1.25rem}.support-scope .pb-20{padding-bottom:5rem}.support-scope .pl-0{padding-left:0}.support-scope .pl-6{padding-left:1.5rem}.support-scope .pt-16{padding-top:4rem}.support-scope .pt-8{padding-top:2rem}.support-scope .text-left{text-align:left}.support-scope .text-center{text-align:center}.support-scope .font-sans{font-family:Inter,sans-serif}.support-scope .text-2xl{font-size:1.5rem;line-height:2rem}.support-scope .text-3xl{font-size:1.875rem;line-height:2.25rem}.support-scope .text-4xl{font-size:2.25rem;line-height:2.5rem}.support-scope .text-lg{font-size:1.125rem;line-height:1.75rem}.support-scope .text-sm{font-size:.875rem;line-height:1.25rem}.support-scope .text-xl{font-size:1.25rem;line-height:1.75rem}.support-scope .font-black{font-weight:900}.support-scope .font-bold{font-weight:700}.support-scope .font-medium{font-weight:500}.support-scope .font-semibold{font-weight:600}.support-scope .leading-\[1\.1\]{line-height:1.1}.support-scope .leading-relaxed{line-height:1.625}.support-scope .tracking-tight{letter-spacing:-.025em}.support-scope .text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.support-scope .text-green-500{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.support-scope .text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.support-scope .text-primary-100{--tw-text-opacity: 1;color:rgb(219 234 254 / var(--tw-text-opacity, 1))}.support-scope .text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.support-scope .text-purple-600{--tw-text-opacity: 1;color:rgb(147 51 234 / var(--tw-text-opacity, 1))}.support-scope .text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.support-scope .text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.support-scope .text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.support-scope .text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.support-scope .text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.support-scope .text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.support-scope .text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.support-scope .text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.support-scope .text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.support-scope .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.support-scope .opacity-0{opacity:0}.support-scope .opacity-10{opacity:.1}.support-scope .shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.support-scope .shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.support-scope .shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.support-scope .shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.support-scope .outline-none{outline:2px solid transparent;outline-offset:2px}.support-scope .blur-3xl{--tw-blur: blur(64px);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)}.support-scope .backdrop-blur-sm{--tw-backdrop-blur: blur(4px);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)}.support-scope .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.support-scope .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.support-scope .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.support-scope .animate-delay-100{animation-delay:.1s}.support-scope .animate-delay-200{animation-delay:.2s}.support-scope .animate-delay-300{animation-delay:.3s}.support-scope .selection\:bg-primary-100 *::-moz-selection{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.support-scope .selection\:bg-primary-100 *::selection{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.support-scope .selection\:text-primary-700 *::-moz-selection{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.support-scope .selection\:text-primary-700 *::selection{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.support-scope .selection\:bg-primary-100::-moz-selection{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.support-scope .selection\:bg-primary-100::selection{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.support-scope .selection\:text-primary-700::-moz-selection{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.support-scope .selection\:text-primary-700::selection{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.support-scope .hover\:-translate-y-0\.5:hover{--tw-translate-y: -.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.support-scope .hover\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.support-scope .hover\:bg-primary-50:hover{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.support-scope .hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.support-scope .hover\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.support-scope .hover\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.support-scope .hover\:text-primary-700:hover{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.support-scope .hover\:text-slate-700:hover{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.support-scope .hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.support-scope .hover\:shadow-2xl:hover{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.support-scope .hover\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.support-scope .hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.support-scope .focus\:border-primary-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.support-scope .focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.support-scope .group[open] .group-open\:rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.support-scope .group:hover .group-hover\:text-primary-700{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.support-scope .sm\:mt-0{margin-top:0}.support-scope .sm\:w-auto{width:auto}.support-scope .sm\:flex-row{flex-direction:row}.support-scope .sm\:items-center{align-items:center}.support-scope .sm\:justify-start{justify-content:flex-start}.support-scope .sm\:justify-end{justify-content:flex-end}.support-scope .sm\:justify-between{justify-content:space-between}.support-scope .sm\:gap-4{gap:1rem}.support-scope .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.support-scope .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.support-scope .sm\:text-5xl{font-size:3rem;line-height:1}}@media (min-width: 768px){.support-scope .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.support-scope .md\:flex-row{flex-direction:row}.support-scope .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.support-scope .md\:text-5xl{font-size:3rem;line-height:1}}@media (min-width: 1024px){.support-scope .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.support-scope .lg\:px-8{padding-left:2rem;padding-right:2rem}.support-scope .lg\:text-6xl{font-size:3.75rem;line-height:1}}

/* Control panel header overrides */
.support-scope{
      background: #f5f5f5;
    }

    .support-scope .container{
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .support-scope .app-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    .support-scope .app-title{
      color: #121118;
      font-size: 2rem;
      margin-bottom: 6px;
      font-weight: 700;
    }

    .support-scope .app-subtitle{
      color: #666;
      font-size: 0.95rem;
    }


    .support-scope .support-card{
      background: white;
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      padding: 32px;
    }


/* API styles (scoped) */

/* index.css */
    body.api-body *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body.api-body{
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      background: #f5f5f5;
      color: #333;
      line-height: 1.6;
    }

    body.api-body .container{
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    body.api-body header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    body.api-body h1{
      color: #121118;
      font-size: 2rem;
      margin-bottom: 6px;
    }

    body.api-body .subtitle{
      color: #666;
      font-size: 0.95rem;
    }

    body.api-body .card{
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 30px;
      margin-bottom: 30px;
    }

    body.api-body .form-group{
      margin-bottom: 20px;
    }

    body.api-body label{
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #444;
    }

    body.api-body input[type="text"], body.api-body input[type="email"], body.api-body input[type="password"], body.api-body input[type="number"], body.api-body select{
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 1rem;
      transition: border-color 0.2s;
    }

    body.api-body input:focus{
      outline: none;
      border-color: #3b82f6;
    }

    body.api-body input[type="file"]{
      padding: 12px 0;
    }

    body.api-body .file-input-wrapper{
      position: relative;
      overflow: hidden;
      display: inline-block;
      width: 100%;
    }

    body.api-body .file-input-wrapper input[type="file"]{
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
    }

    body.api-body .file-input-label{
      display: block;
      padding: 40px 20px;
      background: #f8f9fa;
      border: 2px dashed #ddd;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    body.api-body .file-input-label:hover{
      border-color: #3b82f6;
      background: #f0f7ff;
    }

    body.api-body .file-input-label.has-file{
      border-color: #22c55e;
      background: #f0fdf4;
    }

    body.api-body .btn{
      display: inline-block;
      padding: 14px 28px;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      width: 100%;
    }

    body.api-body .btn-primary{
      background: #3b82f6;
      color: white;
    }

    body.api-body .btn-primary:hover{
      background: #2563eb;
    }

    body.api-body .btn-primary:disabled{
      background: #94a3b8;
      cursor: not-allowed;
    }

    body.api-body .btn-secondary{
      background: #e2e8f0;
      color: #475569;
    }

    body.api-body .btn-secondary:hover{
      background: #cbd5e1;
    }

    body.api-body .btn-danger{
      background: #ef4444;
      color: white;
    }

    body.api-body .btn-danger:hover{
      background: #dc2626;
    }

    body.api-body .error{
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      padding: 12px 16px;
      border-radius: 8px;
      margin-bottom: 20px;
      display: block;
    }

    body.api-body .auth-error{
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      padding: 12px 16px;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    body.api-body .result{
      display: none;
      margin-top: 20px;
    }

    body.api-body .status-box{
      background: #f8f9fa;
      border-radius: 12px;
      padding: 16px;
      border: 1px solid #e2e8f0;
      margin-top: 20px;
    }

    body.api-body .status-box-title{
      font-weight: 600;
      margin-bottom: 8px;
      color: #121118;
    }

    body.api-body .status-message{
      font-size: 0.9rem;
      color: #666;
      margin-bottom: 10px;
    }

    body.api-body .result-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }

    body.api-body .result-item:last-child{
      border-bottom: none;
    }

    body.api-body .result-label{
      color: #666;
      font-size: 0.9rem;
    }

    body.api-body .result-value{
      font-weight: 500;
      word-break: break-all;
    }

    body.api-body .result-value a{
      color: #3b82f6;
      text-decoration: none;
    }

    body.api-body .result-value a:hover{
      text-decoration: underline;
    }

    body.api-body .status{
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
    }

    body.api-body .status-starting{
      background: #fef3c7;
      color: #d97706;
    }

    body.api-body .status-running{
      background: #dcfce7;
      color: #16a34a;
    }

    body.api-body .status-error{
      background: #fef2f2;
      color: #dc2626;
    }

    body.api-body .status-stopped{
      background: #e2e8f0;
      color: #64748b;
    }

    body.api-body .copy-btn{
      background: #e2e8f0;
      border: none;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.8rem;
      margin-left: 8px;
    }

    body.api-body .copy-btn:hover{
      background: #cbd5e1;
    }

    body.api-body .spinner{
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #fff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 0.8s linear infinite;
      margin-right: 8px;
    }

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

    body.api-body .grid-2{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    @media (max-width: 600px) {
      body.api-body .grid-2{
        grid-template-columns: 1fr;
      }
    }

    body.api-body .info-text{
      font-size: 0.85rem;
      color: #666;
      margin-top: 4px;
    }

    /* Modal styles */
    body.api-body .modal-overlay{
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }

    body.api-body .modal-overlay.active{
      display: flex;
    }

    body.api-body .modal{
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      padding: 24px;
      max-width: 520px;
      width: 92%;
    }

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

    body.api-body .modal-header h3{
      margin: 0;
    }

    body.api-body .modal-close{
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: #666;
      padding: 0;
      line-height: 1;
    }

    body.api-body .modal-close:hover{
      color: #333;
    }

    body.api-body .modal-body .result-item{
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }

    body.api-body .modal-body .result-item:last-child{
      border-bottom: none;
    }

    body.api-body .btn-icon{
      background: #e2e8f0;
      border: none;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
      transition: background 0.2s;
    }

    body.api-body .btn-icon:hover{
      background: #cbd5e1;
    }

    body.api-body .settings-icon{
      display: inline-block;
      width: 16px;
      height: 16px;
    }

    /* Auth styles */
    body.api-body .auth-container{
      max-width: 400px;
      margin: 0 auto;
    }

    body.api-body .auth-tabs{
      display: flex;
      margin-bottom: 20px;
      border-bottom: 2px solid #e2e8f0;
    }

    body.api-body .auth-tab{
      flex: 1;
      padding: 12px;
      background: none;
      border: none;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      color: #666;
      transition: all 0.2s;
    }

    body.api-body .auth-tab.active{
      color: #3b82f6;
      border-bottom: 2px solid #3b82f6;
      margin-bottom: -2px;
    }

    body.api-body .auth-tab:hover{
      color: #3b82f6;
    }

    body.api-body .user-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding: 12px 16px;
      background: #f8f9fa;
      border-radius: 8px;
    }

    body.api-body .user-info{
      display: flex;
      align-items: center;
      gap: 8px;
    }

    body.api-body .user-name{
      font-weight: 500;
    }

    body.api-body .btn-logout{
      padding: 6px 12px;
      font-size: 0.85rem;
      background: #e2e8f0;
      color: #475569;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    body.api-body .btn-logout:hover{
      background: #cbd5e1;
    }

    body.api-body .user-actions{
      display: flex;
      gap: 8px;
      align-items: center;
    }

    body.api-body #authSection,
    body.api-body #mainContent{
      display: block;
    }
  

/* billing.css */
    body.api-body *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body.api-body{
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      background: #f5f5f5;
      color: #333;
      line-height: 1.6;
    }

    body.api-body .container{
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    body.api-body header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    body.api-body h1{
      color: #121118;
      font-size: 2rem;
      margin-bottom: 6px;
    }

    body.api-body .subtitle{
      color: #666;
      font-size: 0.95rem;
    }

    body.api-body .card{
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 30px;
      margin-bottom: 24px;
    }

    body.api-body .grid-2{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    body.api-body .label{
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.75rem;
      color: #666;
      margin-bottom: 6px;
    }

    body.api-body .balance{
      font-size: 2.2rem;
      font-weight: 600;
      color: #121118;
    }

    body.api-body .detail-row{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      font-size: 0.95rem;
    }

    body.api-body .detail-row:last-child{
      border-bottom: none;
    }

    body.api-body .status{
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
    }

    body.api-body .status-running{
      background: #dcfce7;
      color: #16a34a;
    }

    body.api-body .status-starting{
      background: #fef3c7;
      color: #d97706;
    }

    body.api-body .status-error{
      background: #fef2f2;
      color: #dc2626;
    }

    body.api-body .status-stopped{
      background: #e2e8f0;
      color: #64748b;
    }

    body.api-body .btn{
      display: inline-block;
      padding: 12px 20px;
      font-size: 0.95rem;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }

    body.api-body .btn-primary{
      background: #3b82f6;
      color: white;
    }

    body.api-body .btn-primary:hover{
      background: #2563eb;
    }

    body.api-body .btn-secondary{
      background: #e2e8f0;
      color: #475569;
      text-decoration: none;
    }

    body.api-body .btn-secondary:hover{
      background: #cbd5e1;
    }

    body.api-body .actions{
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    body.api-body .dropin{
      border-radius: 8px;
      border: 2px dashed #e0e0e0;
      padding: 16px;
      background: #f8f9fa;
      margin-top: 16px;
    }

    body.api-body .message{
      margin-top: 0.75rem;
      font-size: 0.9rem;
      color: #666;
    }

    body.api-body .message.error{
      color: #dc2626;
    }

    body.api-body .message.success{
      color: #16a34a;
    }

    body.api-body .loading{
      opacity: 0.7;
      pointer-events: none;
    }

    @media (max-width: 600px) {
      body.api-body .grid-2{
        grid-template-columns: 1fr;
      }
    }
  

/* edit.css */
    body.api-body *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body.api-body{
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      background: #f5f5f5;
      color: #333;
      line-height: 1.6;
    }

    body.api-body .container{
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    body.api-body header{
      margin-bottom: 30px;
    }

    body.api-body h1{
      color: #121118;
      font-size: 1.75rem;
      margin-bottom: 8px;
    }

    body.api-body .preview-info{
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      color: #666;
      font-size: 0.95rem;
    }

    body.api-body .preview-info a{
      color: #3b82f6;
      text-decoration: none;
    }

    body.api-body .preview-info a:hover{
      text-decoration: underline;
    }

    body.api-body .preview-list-item{
      flex-wrap: wrap;
    }

    body.api-body .preview-list-meta{
      flex: 1;
      min-width: 200px;
    }

    body.api-body .preview-list-status{
      margin-left: 8px;
    }

    body.api-body .preview-list-subtitle{
      font-size: 0.85rem;
      color: #666;
      margin-top: 4px;
    }

    body.api-body .preview-list-link{
      font-size: 0.85rem;
      color: #3b82f6;
      text-decoration: none;
    }

    body.api-body .preview-list-link:hover{
      text-decoration: underline;
    }

    body.api-body .preview-list-error{
      font-size: 0.85rem;
      color: #dc2626;
    }

    body.api-body .preview-list-actions{
      display: flex;
      gap: 8px;
    }

    body.api-body .preview-list-error-message{
      color: #dc2626;
      text-align: center;
    }

    body.api-body .bc-connected-notice{
      display: block;
      position: relative;
      margin-top: 12px;
      margin-bottom: 16px;
      padding: 12px 40px 12px 16px;
      border-radius: 8px;
      border: 1px solid #16a34a;
      background: #dcfce7;
      color: #16a34a;
    }

    body.api-body .bc-connected-notice-close{
      position: absolute;
      top: 6px;
      right: 8px;
      border: none;
      background: transparent;
      color: #16a34a;
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
      padding: 4px;
    }

    body.api-body .status{
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
    }

    body.api-body .status-running{
      background: #dcfce7;
      color: #16a34a;
    }

    body.api-body .status-starting{
      background: #fef3c7;
      color: #d97706;
    }

    body.api-body .status-error{
      background: #fef2f2;
      color: #dc2626;
    }

    body.api-body .card{
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 30px;
      margin-bottom: 30px;
    }

    body.api-body .editor-layout{
      display: grid;
      grid-template-columns: 250px 1fr;
      gap: 24px;
    }

    @media (max-width: 768px) {
      body.api-body .editor-layout{
        grid-template-columns: 1fr;
      }
    }

    /* Sidebar */
    body.api-body .sidebar{
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      height: fit-content;
    }

    body.api-body .sidebar-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    body.api-body .sidebar-header h3{
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #666;
      margin: 0;
    }

    body.api-body .conversation-list{
      list-style: none;
    }

    body.api-body .conversation-item{
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.2s;
    }

    body.api-body .conversation-item:hover{
      background: #f1f5f9;
    }

    body.api-body .conversation-item.active{
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }

    body.api-body .conversation-item-info{
      flex: 1;
      min-width: 0;
    }

    body.api-body .conversation-item-title{
      font-weight: 500;
      font-size: 0.9rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    body.api-body .conversation-item-time{
      font-size: 0.75rem;
      color: #888;
    }

    body.api-body .conversation-item-delete{
      opacity: 0;
      background: none;
      border: none;
      color: #dc2626;
      cursor: pointer;
      padding: 4px;
      font-size: 1rem;
    }

    body.api-body .conversation-item:hover .conversation-item-delete{
      opacity: 1;
    }

    body.api-body .no-conversations{
      text-align: center;
      color: #888;
      padding: 20px 0;
      font-size: 0.9rem;
    }

    /* Main panel */
    body.api-body .main-panel{
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 24px;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }

    body.api-body .conversation-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e2e8f0;
    }

    body.api-body .conversation-title{
      font-size: 1.1rem;
      font-weight: 600;
      color: #333;
    }

    body.api-body .header-actions{
      display: flex;
      gap: 12px;
      align-items: center;
    }

    body.api-body .btn{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 14px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      line-height: 1;
    }

    body.api-body .btn-primary{
      background-color: #3b82f6;
      border: 1px solid #3b82f6;
      color: white;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    body.api-body .btn-primary:hover{
      background-color: #2563eb;
      border-color: #2563eb;
    }

    body.api-body .btn-primary:disabled{
      background-color: #93c5fd;
      border-color: #93c5fd;
      cursor: not-allowed;
    }

    body.api-body .btn-deploy-primary{
      background-color: #c4b5fd;
      border-color: #c4b5fd;
      color: white;
      box-shadow: none;
    }

    body.api-body .btn-deploy-primary:hover{
      background-color: #a78bfa;
      border-color: #a78bfa;
    }

    body.api-body .btn-secondary{
      background-color: transparent;
      border: 1px solid #d1d5db;
      color: #374151;
    }

    body.api-body .btn-secondary:hover{
      background-color: #f3f4f6;
      border-color: #9ca3af;
    }

    body.api-body .btn-small{
      padding: 6px 12px;
      font-size: 0.8rem;
    }

    body.api-body .btn-new{
      width: 100%;
      margin-bottom: 16px;
    }

    body.api-body .spinner{
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid #fff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 0.8s linear infinite;
      margin-right: 6px;
      vertical-align: middle;
    }

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

    body.api-body .conversation-history{
      flex: 1;
      max-height: 450px;
      overflow-y: auto;
      overflow-x: hidden;
      margin-bottom: 20px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      min-width: 0;
    }

    body.api-body .conversation-empty{
      padding: 60px 20px;
      text-align: center;
      color: #888;
    }

    body.api-body .chat-message{
      padding: 16px 20px;
      border-bottom: 1px solid #e2e8f0;
    }

    body.api-body .chat-message:last-child{
      border-bottom: none;
    }

    body.api-body .chat-message.user{
      background: #f8fafc;
    }

    body.api-body .chat-message.assistant{
      background: white;
    }

    body.api-body .chat-role{
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    body.api-body .chat-message.user .chat-role{
      color: #3b82f6;
    }

    body.api-body .chat-message.assistant .chat-role{
      color: #16a34a;
    }

    body.api-body .chat-content{
      color: #333;
      line-height: 1.6;
      overflow: hidden;
      min-width: 0;
    }

    body.api-body .chat-message.user .chat-content{
      white-space: pre-wrap;
    }

    /* Markdown styles for assistant messages */
    body.api-body .chat-content p{
      margin: 0 0 12px 0;
    }

    body.api-body .chat-content p:last-child{
      margin-bottom: 0;
    }

    body.api-body .chat-content code{
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: 'SF Mono', Monaco, 'Courier New', monospace;
      font-size: 0.9em;
    }

    body.api-body .chat-content pre{
      background: #1e293b;
      color: #e2e8f0;
      padding: 16px;
      border-radius: 8px;
      overflow-x: auto;
      margin: 12px 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    body.api-body .chat-content pre code{
      background: none;
      padding: 0;
      color: inherit;
      font-size: 0.85em;
    }

    body.api-body .chat-content ul, body.api-body .chat-content ol{
      margin: 12px 0;
      padding-left: 24px;
    }

    body.api-body .chat-content li{
      margin: 4px 0;
    }

    body.api-body .chat-content h1, body.api-body .chat-content h2, body.api-body .chat-content h3{
      margin: 16px 0 8px 0;
      font-weight: 600;
    }

    body.api-body .chat-content h1{ font-size: 1.25em; }
    body.api-body .chat-content h2{ font-size: 1.15em; }
    body.api-body .chat-content h3{ font-size: 1.05em; }

    body.api-body .chat-content blockquote{
      border-left: 3px solid #cbd5e1;
      padding-left: 12px;
      margin: 12px 0;
      color: #64748b;
    }

    body.api-body .chat-content strong{
      font-weight: 600;
    }

    body.api-body .chat-content a{
      color: #3b82f6;
      text-decoration: none;
    }

    body.api-body .chat-content a:hover{
      text-decoration: underline;
    }

    body.api-body .chat-files{
      margin-top: 12px;
      padding: 8px 12px;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 4px;
      font-size: 0.85rem;
    }

    body.api-body .chat-files strong{
      color: #555;
    }

    body.api-body .chat-files ul{
      margin: 4px 0 0 0;
      padding-left: 20px;
    }

    body.api-body .chat-files li{
      font-family: 'SF Mono', Monaco, 'Consolas', monospace;
      font-size: 0.8rem;
      color: #666;
    }

    body.api-body .file-upload{
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    body.api-body .file-upload-row{
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    body.api-body .file-upload-hint{
      font-size: 0.8rem;
      color: #888;
    }

    body.api-body .file-upload-status{
      font-size: 0.85rem;
      color: #666;
    }

    body.api-body .attached-files{
      list-style: none;
      display: none;
      flex-direction: column;
      gap: 6px;
      padding: 0;
      margin: 0;
    }

    body.api-body .attached-file{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-size: 0.85rem;
    }

    body.api-body .attached-file-name{
      font-weight: 500;
      color: #334155;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 320px;
    }

    body.api-body .attached-file-meta{
      font-size: 0.75rem;
      color: #94a3b8;
      margin-left: 6px;
    }

    body.api-body .attached-file-remove{
      background: none;
      border: none;
      color: #dc2626;
      cursor: pointer;
      font-size: 0.9rem;
      padding: 2px 6px;
    }

    body.api-body .chat-time{
      font-size: 0.7rem;
      color: #999;
      margin-top: 8px;
    }

    body.api-body .input-section{
      border-top: 1px solid #e2e8f0;
      padding-top: 16px;
    }

    body.api-body .input-row{
      display: flex;
      gap: 12px;
    }

    body.api-body .input-row textarea{
      flex: 1;
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 0.95rem;
      font-family: inherit;
      resize: none;
      min-height: 50px;
      max-height: 120px;
    }

    body.api-body .input-row textarea:focus{
      outline: none;
      border-color: #3b82f6;
    }

    body.api-body .back-link{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #666;
      text-decoration: none;
      font-size: 0.95rem;
      margin-top: 20px;
    }

    body.api-body .back-link:hover{
      color: #3b82f6;
    }

    body.api-body .loading-state{
      text-align: center;
      padding: 60px 20px;
      color: #666;
    }

    body.api-body .loading-spinner{
      width: 40px;
      height: 40px;
      border: 3px solid #e2e8f0;
      border-radius: 50%;
      border-top-color: #3b82f6;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 16px;
    }

    body.api-body .error-box{
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      padding: 16px 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    body.api-body .btn-deploy{
      background: #8b5cf6;
      color: white;
      padding: 6px 14px;
      font-size: 0.85rem;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      transition: background 0.2s;
    }

    body.api-body .btn-deploy:hover{
      background: #7c3aed;
    }

    body.api-body .btn-deploy:disabled{
      background: #a78bfa;
      cursor: not-allowed;
    }

    /* Deploy Modal */
    body.api-body .modal-overlay{
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }

    body.api-body .modal-overlay.active{
      display: flex;
    }

    body.api-body .modal{
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      padding: 24px;
      max-width: 400px;
      width: 90%;
      text-align: center;
    }

    body.api-body .modal h3{
      margin: 0 0 16px 0;
      color: #333;
    }

    body.api-body .modal-spinner{
      width: 48px;
      height: 48px;
      border: 4px solid #e2e8f0;
      border-radius: 50%;
      border-top-color: #8b5cf6;
      animation: spin 0.8s linear infinite;
      margin: 20px auto;
    }

    body.api-body .modal-message{
      color: #666;
      margin-bottom: 16px;
    }

    body.api-body .modal-progress{
      background: #e2e8f0;
      border-radius: 4px;
      height: 8px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    body.api-body .modal-progress-bar{
      background: #8b5cf6;
      height: 100%;
      transition: width 0.3s;
    }

    body.api-body .modal-progress-text{
      font-size: 0.8rem;
      color: #888;
    }

    body.api-body .modal-success{
      color: #16a34a;
    }

    body.api-body .modal-success svg{
      width: 48px;
      height: 48px;
      margin: 16px auto;
    }

    body.api-body .modal-error{
      color: #dc2626;
    }

    body.api-body .modal-error svg{
      width: 48px;
      height: 48px;
      margin: 16px auto;
    }

    body.api-body .modal-close{
      background: #e2e8f0;
      color: #475569;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      margin-top: 16px;
    }

    body.api-body .modal-close:hover{
      background: #cbd5e1;
    }

    /* Settings modal overrides */
    body.api-body #settingsModal .modal{
      max-width: 720px;
      width: min(92%, 720px);
      text-align: left;
    }

    body.api-body #settingsModal .modal-body .result-item{
      align-items: flex-start;
      gap: 16px;
    }

    body.api-body #settingsModal .result-label{
      flex: 0 0 120px;
    }

    body.api-body #settingsModal .result-value{
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-start;
      text-align: left;
    }

    body.api-body #settingsModal .result-value span{
      word-break: break-all;
    }
  


body.support-body{background:#f5f5f5;}

/* Button width overrides */
body.api-body .btn{width:auto;}

/* Unified layout width */
body.api-body .container{max-width:900px;}