@datarecce/ui 0.1.41 → 0.2.0

package/dist/styles.css

@@ -1,4 +1,478 @@
-@import './RecceCheckContext-DPnWB_aU.css';
-@import './RecceCheckContext-DyxOeUsX.css';
-@import './components-BeAjVBV3.css';
-@import './components-iUxcqtUB.css';
+/**
+ * @datarecce/ui - Bundled Styles
+ *
+ * This file contains all CSS for @datarecce/ui components including:
+ * - Tailwind CSS utilities
+ * - CSS custom properties for theming
+ * - React Flow styles
+ * - Third-party component overrides (ag-Grid, CodeMirror, etc.)
+ *
+ * Usage: import '@datarecce/ui/styles';
+ *
+ * @license MIT
+ */
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-100:#fee2e2;--color-red-300:#fca5a5;--color-red-400:#f87171;--color-red-500:#ef4444;--color-red-700:#b91c1c;--color-red-900:#7f1d1d;--color-amber-100:#fef3c7;--color-amber-300:#fcd34d;--color-amber-400:#fbbf24;--color-amber-500:#f59e0b;--color-amber-600:#d97706;--color-amber-700:#b45309;--color-amber-800:#92400e;--color-amber-900:#78350f;--color-green-100:#dcfce7;--color-green-300:#86efac;--color-green-400:#4ade80;--color-green-500:#22c55e;--color-green-700:#15803d;--color-green-900:#14532d;--color-cyan-200:#a5f3fc;--color-cyan-300:#67e8f9;--color-cyan-400:#22d3ee;--color-blue-50:oklch(97% .014 254.604);--color-fuchsia-300:#f0abfc;--color-fuchsia-400:#e879f9;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-400:#a3a3a3;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-neutral-950:#0a0a0a;--spacing:.25rem;--text-base:1rem;--text-base--line-height:calc(1.5/1);--font-weight-light:300;--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-brand-50:#ffded5;--color-brand-200:#ffa58c;--color-brand-400:#ff6e42;--color-brand-500:#fd541e;--color-brand-600:#f04104;--color-brand-700:#c93a06;--color-brand-800:#a23206;--color-brand-900:#7c2906;--color-brand-950:#571e05;--color-iochmara-100:#c4ddf3;--color-iochmara-300:#79b0e2;--color-iochmara-400:#5599d8;--color-iochmara-500:#3182ce;--color-iochmara-600:#2a6ca7;--color-iochmara-700:#225581;--color-iochmara-900:#102638}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-10{top:calc(var(--spacing)*10)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-2{margin:calc(var(--spacing)*2)}.ml-1{margin-left:calc(var(--spacing)*1)}.box-content{box-sizing:content-box}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.\!size-4{width:calc(var(--spacing)*4)!important;height:calc(var(--spacing)*4)!important}.size-6\!{width:calc(var(--spacing)*6)!important;height:calc(var(--spacing)*6)!important}.h-full{height:100%}.max-h-dvh{max-height:100dvh}.min-h-0{min-height:calc(var(--spacing)*0)}.w-4\/5{width:80%}.max-w-72{max-width:calc(var(--spacing)*72)}.\!min-w-4{min-width:calc(var(--spacing)*4)!important}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.justify-center{justify-content:center}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.bg-blue-50{background-color:var(--color-blue-50)}.p-4{padding:calc(var(--spacing)*4)}.px-8{padding-inline:calc(var(--spacing)*8)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.break-all{word-break:break-all}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}}.react-flow{--xy-edge-stroke-default:#b1b1b7;--xy-edge-stroke-width-default:1;--xy-edge-stroke-selected-default:#555;--xy-connectionline-stroke-default:#b1b1b7;--xy-connectionline-stroke-width-default:1;--xy-attribution-background-color-default:#ffffff80;--xy-minimap-background-color-default:#fff;--xy-minimap-mask-background-color-default:#f0f0f099;--xy-minimap-mask-stroke-color-default:transparent;--xy-minimap-mask-stroke-width-default:1;--xy-minimap-node-background-color-default:#e2e2e2;--xy-minimap-node-stroke-color-default:transparent;--xy-minimap-node-stroke-width-default:2;--xy-background-color-default:transparent;--xy-background-pattern-dots-color-default:#91919a;--xy-background-pattern-lines-color-default:#eee;--xy-background-pattern-cross-color-default:#e2e2e2;background-color:var(--xy-background-color,var(--xy-background-color-default));--xy-node-color-default:inherit;--xy-node-border-default:1px solid #1a192b;--xy-node-background-color-default:#fff;--xy-node-group-background-color-default:#f0f0f040;--xy-node-boxshadow-hover-default:0 1px 4px 1px #00000014;--xy-node-boxshadow-selected-default:0 0 0 .5px #1a192b;--xy-node-border-radius-default:3px;--xy-handle-background-color-default:#1a192b;--xy-handle-border-color-default:#fff;--xy-selection-background-color-default:#0059dc14;--xy-selection-border-default:1px dotted #0059dccc;--xy-controls-button-background-color-default:#fefefe;--xy-controls-button-background-color-hover-default:#f4f4f4;--xy-controls-button-color-default:inherit;--xy-controls-button-color-hover-default:inherit;--xy-controls-button-border-color-default:#eee;--xy-controls-box-shadow-default:0 0 2px 1px #00000014;--xy-edge-label-background-color-default:#fff;--xy-edge-label-color-default:inherit;--xy-resize-background-color-default:#3367d9;direction:ltr}.react-flow.dark{--xy-edge-stroke-default:#3e3e3e;--xy-edge-stroke-width-default:1;--xy-edge-stroke-selected-default:#727272;--xy-connectionline-stroke-default:#b1b1b7;--xy-connectionline-stroke-width-default:1;--xy-attribution-background-color-default:#96969640;--xy-minimap-background-color-default:#141414;--xy-minimap-mask-background-color-default:#3c3c3c99;--xy-minimap-mask-stroke-color-default:transparent;--xy-minimap-mask-stroke-width-default:1;--xy-minimap-node-background-color-default:#2b2b2b;--xy-minimap-node-stroke-color-default:transparent;--xy-minimap-node-stroke-width-default:2;--xy-background-color-default:#141414;--xy-background-pattern-dots-color-default:#777;--xy-background-pattern-lines-color-default:#777;--xy-background-pattern-cross-color-default:#777;--xy-node-color-default:#f8f8f8;--xy-node-border-default:1px solid #3c3c3c;--xy-node-background-color-default:#1e1e1e;--xy-node-group-background-color-default:#f0f0f040;--xy-node-boxshadow-hover-default:0 1px 4px 1px #ffffff14;--xy-node-boxshadow-selected-default:0 0 0 .5px #999;--xy-handle-background-color-default:#bebebe;--xy-handle-border-color-default:#1e1e1e;--xy-selection-background-color-default:#c8c8dc14;--xy-selection-border-default:1px dotted #c8c8dccc;--xy-controls-button-background-color-default:#2b2b2b;--xy-controls-button-background-color-hover-default:#3e3e3e;--xy-controls-button-color-default:#f8f8f8;--xy-controls-button-color-hover-default:#fff;--xy-controls-button-border-color-default:#5b5b5b;--xy-controls-box-shadow-default:0 0 2px 1px #00000014;--xy-edge-label-background-color-default:#141414;--xy-edge-label-color-default:#f8f8f8}.react-flow__background{background-color:var(--xy-background-color-props,var(--xy-background-color,var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke,var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width,var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke,var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width,var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{pointer-events:none;position:absolute;overflow:visible}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:.5s linear infinite dashdraw}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected,var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;user-select:none}.react-flow__arrowhead polyline{stroke:var(--xy-edge-stroke,var(--xy-edge-stroke-default))}.react-flow__arrowhead polyline.arrowclosed{fill:var(--xy-edge-stroke,var(--xy-edge-stroke-default))}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:.5s linear infinite dashdraw}svg.react-flow__connectionline{z-index:1001;position:absolute;overflow:visible}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{-webkit-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default;position:absolute}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:0 0;pointer-events:none}.react-flow__nodesselection-rect{pointer-events:all;cursor:grab;position:absolute}.react-flow__handle{pointer-events:none;background-color:var(--xy-handle-background-color,var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color,var(--xy-handle-border-color-default));border-radius:100%;width:6px;min-width:5px;height:6px;min-height:5px;position:absolute}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;bottom:0;left:50%;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__pane.selection .react-flow__panel{pointer-events:none}.react-flow__panel{z-index:5;margin:15px;position:absolute}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-15px)translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-15px)translateY(-50%)}.react-flow__attribution{background:var(--xy-attribution-background-color,var(--xy-attribution-background-color-default));margin:0;padding:2px 3px;font-size:10px}.react-flow__attribution a{color:#999;text-decoration:none}@keyframes dashdraw{0%{stroke-dashoffset:10px}}.react-flow__edgelabel-renderer{pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__viewport-portal{-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__minimap{background:var(--xy-minimap-background-color-props,var(--xy-minimap-background-color,var(--xy-minimap-background-color-default)))}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var(--xy-minimap-mask-background-color-props,var(--xy-minimap-mask-background-color,var(--xy-minimap-mask-background-color-default)));stroke:var(--xy-minimap-mask-stroke-color-props,var(--xy-minimap-mask-stroke-color,var(--xy-minimap-mask-stroke-color-default)));stroke-width:var(--xy-minimap-mask-stroke-width-props,var(--xy-minimap-mask-stroke-width,var(--xy-minimap-mask-stroke-width-default)))}.react-flow__minimap-node{fill:var(--xy-minimap-node-background-color-props,var(--xy-minimap-node-background-color,var(--xy-minimap-node-background-color-default)));stroke:var(--xy-minimap-node-stroke-color-props,var(--xy-minimap-node-stroke-color,var(--xy-minimap-node-stroke-color-default)));stroke-width:var(--xy-minimap-node-stroke-width-props,var(--xy-minimap-node-stroke-width,var(--xy-minimap-node-stroke-width-default)))}.react-flow__background-pattern.dots{fill:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-dots-color-default)))}.react-flow__background-pattern.lines{stroke:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-lines-color-default)))}.react-flow__background-pattern.cross{stroke:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-cross-color-default)))}.react-flow__controls{box-shadow:var(--xy-controls-box-shadow,var(--xy-controls-box-shadow-default));flex-direction:column;display:flex}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{background:var(--xy-controls-button-background-color,var(--xy-controls-button-background-color-default));border:none;border-bottom:1px solid var(--xy-controls-button-border-color-props,var(--xy-controls-button-border-color,var(--xy-controls-button-border-color-default)));width:26px;height:26px;color:var(--xy-controls-button-color-props,var(--xy-controls-button-color,var(--xy-controls-button-color-default)));cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;padding:4px;display:flex}.react-flow__controls-button svg{fill:currentColor;width:100%;max-width:12px;max-height:12px}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{border-radius:var(--xy-node-border-radius,var(--xy-node-border-radius-default));width:150px;color:var(--xy-node-color,var(--xy-node-color-default));text-align:center;border:var(--xy-node-border,var(--xy-node-border-default));background-color:var(--xy-node-background-color,var(--xy-node-background-color-default));padding:10px;font-size:12px}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover,var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected,var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color,var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color,var(--xy-selection-background-color-default));border:var(--xy-selection-border,var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var(--xy-controls-button-background-color-hover-props,var(--xy-controls-button-background-color-hover,var(--xy-controls-button-background-color-hover-default)));color:var(--xy-controls-button-color-hover-props,var(--xy-controls-button-color-hover,var(--xy-controls-button-color-hover-default)))}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__controls.horizontal .react-flow__controls-button{border-bottom:none;border-right:1px solid var(--xy-controls-button-border-color-props,var(--xy-controls-button-border-color,var(--xy-controls-button-border-color-default)))}.react-flow__controls.horizontal .react-flow__controls-button:last-child{border-right:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{background-color:var(--xy-resize-background-color,var(--xy-resize-background-color-default));border:1px solid #fff;border-radius:1px;width:5px;height:5px;translate:-50% -50%}.react-flow__resize-control.handle.left{top:50%;left:0}.react-flow__resize-control.handle.right{top:50%;left:100%}.react-flow__resize-control.handle.top{top:0;left:50%}.react-flow__resize-control.handle.bottom{top:100%;left:50%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color,var(--xy-resize-background-color-default));border-style:solid;border-width:0}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;height:100%;top:0;transform:translate(-50%)}.react-flow__resize-control.line.left{border-left-width:1px;left:0}.react-flow__resize-control.line.right{border-right-width:1px;left:100%}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{width:100%;height:1px;left:0;transform:translateY(-50%)}.react-flow__resize-control.line.top{border-top-width:1px;top:0}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color,var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color,var(--xy-edge-label-color-default))}:root{--recce-bg-default:var(--color-neutral-50);--recce-bg-paper:#fff;--recce-bg-elevated:#fff;--recce-bg-subtle:var(--color-neutral-100);--recce-text-primary:var(--color-neutral-900);--recce-text-secondary:var(--color-neutral-600);--recce-text-muted:var(--color-neutral-400);--recce-border:var(--color-neutral-200);--recce-border-subtle:var(--color-neutral-100);--recce-brand:var(--color-brand-500);--recce-brand-hover:var(--color-brand-600);--recce-brand-active:var(--color-brand-700);--recce-secondary:var(--color-iochmara-500);--recce-secondary-hover:var(--color-iochmara-600);--recce-secondary-active:var(--color-iochmara-700);--recce-success:var(--color-green-500);--recce-warning:var(--color-amber-500);--recce-error:var(--color-red-500);--recce-info:var(--color-iochmara-500);--recce-shadow-sm:0 1px 2px 0 #0000000d;--recce-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--recce-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--recce-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.dark{--recce-bg-default:var(--color-neutral-950);--recce-bg-paper:var(--color-neutral-900);--recce-bg-elevated:var(--color-neutral-800);--recce-bg-subtle:var(--color-neutral-800);--recce-text-primary:var(--color-neutral-50);--recce-text-secondary:var(--color-neutral-400);--recce-text-muted:var(--color-neutral-600);--recce-border:var(--color-neutral-800);--recce-border-subtle:var(--color-neutral-700);--recce-brand:var(--color-brand-400);--recce-brand-hover:var(--color-brand-500);--recce-brand-active:var(--color-brand-600);--recce-secondary:var(--color-iochmara-400);--recce-secondary-hover:var(--color-iochmara-500);--recce-secondary-active:var(--color-iochmara-600);--recce-success:var(--color-green-400);--recce-warning:var(--color-amber-400);--recce-error:var(--color-red-400);--recce-info:var(--color-iochmara-400);--recce-shadow-sm:0 1px 2px 0 #0000004d;--recce-shadow:0 1px 3px 0 #0006,0 1px 2px -1px #0000004d;--recce-shadow-md:0 4px 6px -1px #0006,0 2px 4px -2px #0000004d;--recce-shadow-lg:0 10px 15px -3px #0006,0 4px 6px -4px #0000004d}.dark .react-flow__controls{background-color:var(--recce-bg-paper);border-color:var(--recce-border)}.dark .react-flow__controls button{background-color:var(--recce-bg-paper);border-color:var(--recce-border);color:var(--recce-text-primary);fill:var(--recce-text-primary)}.dark .react-flow__controls button:hover{background-color:var(--recce-bg-elevated)}.dark .react-flow__controls button svg{fill:var(--recce-text-primary)}.dark .react-flow__minimap{background-color:var(--recce-bg-paper)}.dark .react-flow__minimap-mask{fill:var(--recce-bg-default);opacity:.6}.dark .react-flow__minimap-node{fill:var(--recce-text-muted)}.dark .react-flow__background{background-color:var(--recce-bg-default)}.dark .react-flow__background pattern circle,.dark .react-flow__background pattern line{stroke:var(--recce-border)}.dark .react-flow__attribution{background-color:var(--recce-bg-paper)}.dark .react-flow__attribution a{color:var(--recce-text-secondary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--recce-bg-subtle);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--recce-text-muted);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--recce-text-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--recce-text-muted)var(--recce-bg-subtle)}.dark ::-webkit-scrollbar-track{background:var(--recce-bg-paper)}.dark ::-webkit-scrollbar-thumb{background:var(--recce-border)}.dark ::-webkit-scrollbar-thumb:hover{background:var(--recce-text-muted)}::selection{background-color:var(--color-brand-200);color:var(--color-brand-950)}.dark ::selection{background-color:var(--color-brand-700);color:var(--color-brand-50)}:focus-visible{outline:2px solid var(--recce-brand);outline-offset:2px}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
+/* Third-party component overrides */
+/**
+ * @datarecce/ui - Third-party component style overrides
+ *
+ * This file contains style overrides for third-party libraries
+ * to ensure they respect the Recce theme and dark mode.
+ *
+ * Included:
+ * - ag-Grid dark mode
+ * - CodeMirror dark mode
+ * - Split pane styling
+ */
+
+/* ========================================
+ * ag-Grid Dark Mode Overrides
+ * Styles for ag-Grid data tables in dark mode
+ * ======================================== */
+.dark .ag-theme-alpine,
+.dark .ag-theme-quartz {
+  --ag-background-color: var(--recce-bg-paper);
+  --ag-foreground-color: var(--recce-text-primary);
+  --ag-secondary-foreground-color: var(--recce-text-secondary);
+  --ag-header-background-color: var(--recce-bg-elevated);
+  --ag-header-foreground-color: var(--recce-text-primary);
+  --ag-odd-row-background-color: var(--recce-bg-paper);
+  --ag-row-hover-color: var(--recce-bg-subtle);
+  --ag-border-color: var(--recce-border);
+  --ag-selected-row-background-color: var(--color-brand-900);
+  --ag-range-selection-border-color: var(--recce-brand);
+  --ag-input-focus-border-color: var(--recce-brand);
+}
+
+.dark .ag-theme-alpine .ag-row-selected,
+.dark .ag-theme-quartz .ag-row-selected {
+  background-color: var(--color-brand-900);
+}
+
+.dark .ag-theme-alpine .ag-row-hover:not(.ag-row-selected),
+.dark .ag-theme-quartz .ag-row-hover:not(.ag-row-selected) {
+  background-color: var(--recce-bg-elevated);
+}
+
+.dark .ag-theme-alpine .ag-cell-focus,
+.dark .ag-theme-quartz .ag-cell-focus {
+  border-color: var(--recce-brand);
+}
+
+.dark .ag-theme-alpine .ag-header-cell,
+.dark .ag-theme-quartz .ag-header-cell {
+  border-bottom-color: var(--recce-border);
+}
+
+.dark .ag-theme-alpine .ag-cell,
+.dark .ag-theme-quartz .ag-cell {
+  border-right-color: var(--recce-border-subtle);
+}
+
+.dark .ag-theme-alpine .ag-paging-panel,
+.dark .ag-theme-quartz .ag-paging-panel {
+  border-top-color: var(--recce-border);
+  color: var(--recce-text-secondary);
+}
+
+/* ========================================
+ * CodeMirror Dark Mode Overrides
+ * Styles for CodeMirror editors in dark mode
+ * ======================================== */
+.dark .cm-editor {
+  background-color: var(--recce-bg-paper);
+  color: var(--recce-text-primary);
+}
+
+.dark .cm-editor .cm-gutters {
+  background-color: var(--recce-bg-elevated);
+  color: var(--recce-text-muted);
+  border-right-color: var(--recce-border);
+}
+
+.dark .cm-editor .cm-activeLineGutter {
+  background-color: var(--recce-bg-subtle);
+}
+
+.dark .cm-editor .cm-activeLine {
+  background-color: var(--recce-bg-subtle);
+}
+
+.dark .cm-editor .cm-selectionBackground,
+.dark .cm-editor .cm-content ::selection {
+  background-color: var(--color-brand-900) !important;
+}
+
+.dark .cm-editor .cm-cursor {
+  border-left-color: var(--recce-text-primary);
+}
+
+.dark .cm-editor .cm-matchingBracket {
+  background-color: var(--color-brand-800);
+  color: var(--recce-text-primary);
+}
+
+.dark .cm-editor .cm-searchMatch {
+  background-color: var(--color-amber-800);
+  color: var(--color-amber-100);
+}
+
+.dark .cm-editor .cm-searchMatch.cm-searchMatch-selected {
+  background-color: var(--color-amber-600);
+}
+
+.dark .cm-editor .cm-tooltip {
+  background-color: var(--recce-bg-elevated);
+  border-color: var(--recce-border);
+  color: var(--recce-text-primary);
+}
+
+.dark .cm-editor .cm-tooltip-autocomplete {
+  background-color: var(--recce-bg-elevated);
+}
+
+.dark .cm-editor .cm-tooltip-autocomplete > ul > li {
+  color: var(--recce-text-primary);
+}
+
+.dark .cm-editor .cm-tooltip-autocomplete > ul > li[aria-selected] {
+  background-color: var(--color-brand-800);
+  color: var(--recce-text-primary);
+}
+
+/* CodeMirror syntax highlighting for dark mode */
+.dark .cm-editor .cm-keyword {
+  color: var(--color-fuchsia-400);
+}
+.dark .cm-editor .cm-operator {
+  color: var(--recce-text-primary);
+}
+.dark .cm-editor .cm-variable {
+  color: var(--color-cyan-400);
+}
+.dark .cm-editor .cm-variable-2 {
+  color: var(--color-cyan-300);
+}
+.dark .cm-editor .cm-variable-3 {
+  color: var(--color-cyan-200);
+}
+.dark .cm-editor .cm-builtin {
+  color: var(--color-fuchsia-300);
+}
+.dark .cm-editor .cm-atom {
+  color: var(--color-amber-400);
+}
+.dark .cm-editor .cm-number {
+  color: var(--color-amber-400);
+}
+.dark .cm-editor .cm-def {
+  color: var(--color-iochmara-400);
+}
+.dark .cm-editor .cm-string {
+  color: var(--color-green-400);
+}
+.dark .cm-editor .cm-string-2 {
+  color: var(--color-green-300);
+}
+.dark .cm-editor .cm-comment {
+  color: var(--recce-text-muted);
+}
+.dark .cm-editor .cm-tag {
+  color: var(--color-red-400);
+}
+.dark .cm-editor .cm-meta {
+  color: var(--recce-text-secondary);
+}
+.dark .cm-editor .cm-attribute {
+  color: var(--color-cyan-400);
+}
+.dark .cm-editor .cm-property {
+  color: var(--color-cyan-400);
+}
+.dark .cm-editor .cm-qualifier {
+  color: var(--color-iochmara-400);
+}
+.dark .cm-editor .cm-type {
+  color: var(--color-amber-300);
+}
+.dark .cm-editor .cm-error {
+  color: var(--color-red-400);
+}
+.dark .cm-editor .cm-link {
+  color: var(--color-iochmara-400);
+}
+
+/* ========================================
+ * Split Pane Styling
+ * Styles for resizable split pane components
+ * ======================================== */
+.recce-split-pane {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.recce-split-pane-horizontal {
+  flex-direction: row;
+}
+
+.recce-split-pane-vertical {
+  flex-direction: column;
+}
+
+.recce-split-pane-resizer {
+  background-color: var(--recce-border);
+  flex-shrink: 0;
+  transition: background-color 0.15s ease;
+}
+
+.recce-split-pane-resizer:hover {
+  background-color: var(--recce-brand);
+}
+
+.recce-split-pane-resizer-horizontal {
+  width: 4px;
+  cursor: col-resize;
+}
+
+.recce-split-pane-resizer-vertical {
+  height: 4px;
+  cursor: row-resize;
+}
+
+.dark .recce-split-pane-resizer {
+  background-color: var(--recce-border);
+}
+
+.dark .recce-split-pane-resizer:hover {
+  background-color: var(--recce-brand);
+}
+
+/* ========================================
+ * Panel and Card Styling
+ * Common panel and card component styles
+ * ======================================== */
+.recce-panel {
+  background-color: var(--recce-bg-paper);
+  border: 1px solid var(--recce-border);
+  border-radius: 8px;
+}
+
+.recce-panel-elevated {
+  background-color: var(--recce-bg-elevated);
+  box-shadow: var(--recce-shadow);
+}
+
+.recce-card {
+  background-color: var(--recce-bg-paper);
+  border: 1px solid var(--recce-border);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.recce-card:hover {
+  border-color: var(--recce-brand);
+}
+
+/* ========================================
+ * Button Base Styling
+ * Base button styles that work with MUI
+ * ======================================== */
+.recce-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-weight: 500;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+}
+
+.recce-btn-primary {
+  background-color: var(--recce-brand);
+  color: white;
+}
+
+.recce-btn-primary:hover {
+  background-color: var(--recce-brand-hover);
+}
+
+.recce-btn-primary:active {
+  background-color: var(--recce-brand-active);
+}
+
+.recce-btn-secondary {
+  background-color: transparent;
+  color: var(--recce-text-primary);
+  border: 1px solid var(--recce-border);
+}
+
+.recce-btn-secondary:hover {
+  background-color: var(--recce-bg-subtle);
+  border-color: var(--recce-text-muted);
+}
+
+/* ========================================
+ * Loading States
+ * Styles for loading indicators
+ * ======================================== */
+.recce-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--recce-bg-subtle) 25%,
+    var(--recce-bg-elevated) 50%,
+    var(--recce-bg-subtle) 75%
+  );
+  background-size: 200% 100%;
+  animation: recce-skeleton-shimmer 1.5s infinite;
+  border-radius: 4px;
+}
+
+@keyframes recce-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ========================================
+ * Tooltip Styling
+ * Consistent tooltip appearance
+ * ======================================== */
+.recce-tooltip {
+  background-color: var(--color-neutral-800);
+  color: var(--color-neutral-50);
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  box-shadow: var(--recce-shadow-md);
+}
+
+.dark .recce-tooltip {
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-900);
+}
+
+/* ========================================
+ * Badge Styling
+ * Status badges and labels
+ * ======================================== */
+.recce-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 9999px;
+}
+
+.recce-badge-success {
+  background-color: var(--color-green-100);
+  color: var(--color-green-700);
+}
+
+.dark .recce-badge-success {
+  background-color: var(--color-green-900);
+  color: var(--color-green-300);
+}
+
+.recce-badge-warning {
+  background-color: var(--color-amber-100);
+  color: var(--color-amber-700);
+}
+
+.dark .recce-badge-warning {
+  background-color: var(--color-amber-900);
+  color: var(--color-amber-300);
+}
+
+.recce-badge-error {
+  background-color: var(--color-red-100);
+  color: var(--color-red-700);
+}
+
+.dark .recce-badge-error {
+  background-color: var(--color-red-900);
+  color: var(--color-red-300);
+}
+
+.recce-badge-info {
+  background-color: var(--color-iochmara-100);
+  color: var(--color-iochmara-700);
+}
+
+.dark .recce-badge-info {
+  background-color: var(--color-iochmara-900);
+  color: var(--color-iochmara-300);
+}
+
+/* ========================================
+ * Transition Utilities
+ * Common transition classes
+ * ======================================== */
+.recce-transition-colors {
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.recce-transition-all {
+  transition: all 0.15s ease;
+}
+
+.recce-transition-opacity {
+  transition: opacity 0.15s ease;
+}
+
+.recce-transition-transform {
+  transition: transform 0.15s ease;
+}
+
+/* ========================================
+ * React Flow Controls
+ * Theme-aware colors for React Flow controls
+ * Uses CSS custom properties that map to the Recce theme
+ * ======================================== */
+
+/* Light mode (default) */
+:root,
+.light {
+  --rf-controls-bg: #fafafa; /* neutral[50] */
+  --rf-controls-border: #e5e5e5; /* neutral[200] */
+  --rf-controls-text: #404040; /* neutral[700] */
+  --rf-controls-hover-bg: #e5e5e5; /* neutral[200] */
+}
+
+/* Dark mode */
+.dark {
+  --rf-controls-bg: #404040; /* neutral[700] */
+  --rf-controls-border: #525252; /* neutral[600] */
+  --rf-controls-text: #e5e5e5; /* neutral[200] */
+  --rf-controls-hover-bg: #525252; /* neutral[600] */
+}
+
+/* React Flow Controls container */
+.react-flow__controls {
+  background-color: var(--rf-controls-bg);
+  border-color: var(--rf-controls-border);
+}
+
+/* React Flow Controls buttons */
+.react-flow__controls-button {
+  background-color: var(--rf-controls-bg);
+  color: var(--rf-controls-text);
+  border-bottom-color: var(--rf-controls-border);
+}
+
+.react-flow__controls-button:hover {
+  background-color: var(--rf-controls-hover-bg);
+}
+
+.react-flow__controls-button svg {
+  fill: var(--rf-controls-text);
+}