/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-sans), Inter, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.visible {
  visibility: visible;
}
.fixed {
  position: fixed;
}
.\!relative {
  position: relative !important;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.top-0 {
  top: 0px;
}
.z-20 {
  z-index: 20;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-9 {
  height: 2.25rem;
}
.h-full {
  height: 100%;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-72 {
  max-height: 18rem;
}
.min-h-10 {
  min-height: 2.5rem;
}
.min-h-12 {
  min-height: 3rem;
}
.min-h-14 {
  min-height: 3.5rem;
}
.min-h-5 {
  min-height: 1.25rem;
}
.min-h-\[260px\] {
  min-height: 260px;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[58vh\] {
  min-height: 58vh;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.min-h-\[62vh\] {
  min-height: 62vh;
}
.min-h-\[calc\(100vh-82px\)\] {
  min-height: calc(100vh - 82px);
}
.min-h-screen {
  min-height: 100vh;
}
.w-10 {
  width: 2.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-9 {
  width: 2.25rem;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-36 {
  min-width: 9rem;
}
.min-w-40 {
  min-width: 10rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-72 {
  max-width: 18rem;
}
.max-w-\[1180px\] {
  max-width: 1180px;
}
.max-w-\[1200px\] {
  max-width: 1200px;
}
.max-w-\[1400px\] {
  max-width: 1400px;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[1600px\] {
  max-width: 1600px;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.resize-y {
  resize: vertical;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-rows-\[auto_auto_minmax\(0\2c 1fr\)\] {
  grid-template-rows: auto auto minmax(0,1fr);
}
.grid-rows-\[auto_minmax\(0\2c 1fr\)\] {
  grid-template-rows: auto minmax(0,1fr);
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-start {
  place-items: start;
}
.place-items-center {
  place-items: center;
}
.content-start {
  align-content: flex-start;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-center {
  justify-items: center;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.border {
  border-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-\[var\(--accent\)\] {
  border-color: var(--accent);
}
.border-\[var\(--danger\)\] {
  border-color: var(--danger);
}
.border-\[var\(--line\)\] {
  border-color: var(--line);
}
.border-\[var\(--ok\)\] {
  border-color: var(--ok);
}
.border-\[var\(--warn\)\] {
  border-color: var(--warn);
}
.bg-\[var\(--accent\)\] {
  background-color: var(--accent);
}
.bg-\[var\(--accent-soft\)\] {
  background-color: var(--accent-soft);
}
.bg-\[var\(--bg\)\] {
  background-color: var(--bg);
}
.bg-\[var\(--danger\)\] {
  background-color: var(--danger);
}
.bg-\[var\(--line\)\] {
  background-color: var(--line);
}
.bg-\[var\(--muted\)\] {
  background-color: var(--muted);
}
.bg-\[var\(--ok\)\] {
  background-color: var(--ok);
}
.bg-\[var\(--output-bg\)\] {
  background-color: var(--output-bg);
}
.bg-\[var\(--panel\)\] {
  background-color: var(--panel);
}
.bg-\[var\(--panel-soft\)\] {
  background-color: var(--panel-soft);
}
.bg-\[var\(--warn\)\] {
  background-color: var(--warn);
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-8 {
  line-height: 2rem;
}
.leading-\[1\.03\] {
  line-height: 1.03;
}
.leading-\[1\.04\] {
  line-height: 1.04;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.text-\[var\(--accent\)\] {
  color: var(--accent);
}
.text-\[var\(--accent-strong\)\] {
  color: var(--accent-strong);
}
.text-\[var\(--danger\)\] {
  color: var(--danger);
}
.text-\[var\(--ink\)\] {
  color: var(--ink);
}
.text-\[var\(--muted\)\] {
  color: var(--muted);
}
.text-\[var\(--ok\)\] {
  color: var(--ok);
}
.text-\[var\(--output-fg\)\] {
  color: var(--output-fg);
}
.text-\[var\(--warn\)\] {
  color: var(--warn);
}
.underline {
  text-decoration-line: underline;
}
.opacity-80 {
  opacity: 0.8;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

:root {
  color-scheme: light;
  --bg: #edf2f8;
  --bg-soft: #e4ebf5;
  --panel: #ffffff;
  --panel-soft: #f5f8fc;
  --ink: #0f172a;
  --muted: #61708a;
  --line: rgba(15, 23, 42, 0.1);
  --line-strong: rgba(15, 23, 42, 0.18);
  --accent: #2f5cf6;
  --accent-strong: #1d3fae;
  --accent-soft: rgba(47, 92, 246, 0.1);
  --warm: #0f9488;
  --brand-ink: #0b1120;
  --brand-accent: #5b86ff;
  --brand-soft: #57d5c4;
  --brand-panel: #eff5ff;
  --danger: #b3261e;
  --warn: #b86a00;
  --ok: #147d5d;
  --ok-soft: rgba(20, 125, 93, 0.12);
  --bad: var(--danger);
  --text: var(--ink);
  --panel-alt: var(--panel-soft);
  --panel-border: var(--line);
  --panel-border-soft: var(--line);
  --panel-border-strong: var(--line-strong);
  --accent-2: var(--accent-strong);
  --accent-3: var(--accent-strong);
  --accent-border: color-mix(in oklab, var(--accent) 46%, transparent);
  --table-row-hover: color-mix(in oklab, var(--accent) 7%, var(--panel));
  --output-bg: var(--panel-soft);
  --output-fg: var(--ink);
  --output-border: var(--line);
  --shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08090d;
  --bg-soft: #10131a;
  --panel: #171b24;
  --panel-soft: #0f141c;
  --ink: #f5f2e9;
  --muted: #aeb5c2;
  --line: rgba(245, 242, 233, 0.14);
  --line-strong: rgba(245, 242, 233, 0.25);
  --accent: #879cff;
  --accent-strong: #d9ddff;
  --accent-soft: rgba(135, 156, 255, 0.16);
  --warm: #40c9ad;
  --brand-ink: #08090d;
  --brand-accent: #9aabff;
  --brand-soft: #50d9c0;
  --brand-panel: #f5f2e9;
  --danger: #ff8a80;
  --warn: #ffc15f;
  --ok: #66d4a7;
  --ok-soft: rgba(102, 212, 167, 0.16);
  --bad: var(--danger);
  --text: var(--ink);
  --panel-alt: var(--panel-soft);
  --panel-border: var(--line);
  --panel-border-soft: var(--line);
  --panel-border-strong: var(--line-strong);
  --accent-2: #a8b6ff;
  --accent-3: var(--accent-strong);
  --accent-border: color-mix(in oklab, var(--accent) 46%, transparent);
  --table-row-hover: color-mix(in oklab, var(--accent) 12%, var(--panel));
  --output-bg: var(--panel-soft);
  --output-fg: var(--ink);
  --output-border: var(--line);
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top, color-mix(in oklab, var(--accent-soft) 85%, transparent), transparent 34%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

button,
input,
select,
textarea {
  font: inherit;
}

textarea,
input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  outline: none;
}

textarea:focus,
input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

button {
  border: 0;
}

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

.app-frame {
  min-height: 100vh;
}

.site-header {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  backdrop-filter: blur(16px);
}

.account-menu {
  position: relative;
  z-index: 40;
}

.account-menu-trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 5px 8px 5px 5px;
  cursor: pointer;
  list-style: none;
  box-shadow: var(--shadow);
}

.account-menu-trigger::-webkit-details-marker {
  display: none;
}

.account-menu[open] .account-menu-trigger {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 45;
  display: grid;
  width: min(320px, calc(100vw - 24px));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 10px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.account-menu:not([open]) .account-menu-panel {
  display: none;
}

.account-menu-panel a,
.account-menu-panel button {
  width: 100%;
  justify-content: flex-start;
}

.account-avatar {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-soft), var(--panel-soft));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.account-avatar-large {
  width: 46px;
  height: 46px;
  font-size: 15px;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.brand-mark svg {
  width: 48px;
  height: 48px;
  display: block;
}

.brand-wordmark {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
}

.brand-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.panel-soft {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.action-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--ui-border, var(--line-strong));
  border-radius: 8px;
  background: var(--ui-bg, var(--panel));
  color: var(--ui-fg, var(--ink));
  padding: 8px 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease,
    filter 0.15s ease;
}

.action-pill:hover {
  border-color: var(--ui-hover-border, var(--accent));
  background: var(--ui-hover-bg, var(--panel));
  color: var(--ui-hover-fg, var(--accent-strong));
}

.action-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ui-ring, var(--accent-soft));
}

.action-pill:active {
  border-color: var(--ui-active-border, var(--accent));
  background: var(--ui-active-bg, var(--panel));
  color: var(--ui-active-fg, var(--accent-strong));
}

.action-pill:disabled,
.action-pill[aria-disabled="true"] {
  border-color: var(--ui-disabled-border, var(--line));
  background: var(--ui-disabled-bg, var(--panel-soft));
  color: var(--ui-disabled-fg, var(--muted));
  cursor: not-allowed;
  opacity: 0.72;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 0.875rem;
  text-align: left;
}

.table thead {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0.75rem;
  vertical-align: top;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.table-sort-button:hover,
.table-sort-button:focus-visible {
  color: var(--accent-strong);
  outline: none;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.section-sub {
  color: var(--muted);
  font-size: 0.875rem;
}

.subpanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 8px 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.btn-primary {
  border-color: color-mix(in oklab, var(--accent) 70%, transparent);
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #ffffff;
  box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 28%, transparent);
}

.btn-primary:hover {
  color: #ffffff;
  filter: brightness(0.96);
}

.btn-accent {
  border-color: color-mix(in oklab, var(--warm) 48%, transparent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.btn-danger {
  border-color: color-mix(in oklab, var(--danger) 42%, transparent);
  color: var(--danger);
}

.tab-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.copy-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

summary {
  list-style-position: outside;
}

summary::marker {
  color: var(--accent);
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.hover\:text-\[var\(--accent\)\]:hover {
  color: var(--accent);
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

@media (min-width: 640px) {

  .sm\:grid {
    display: grid;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {

  .md\:w-80 {
    width: 20rem;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-\[160px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 160px minmax(0,1fr);
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_160px\] {
    grid-template-columns: minmax(0,1fr) 160px;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  }

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

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[420px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 420px minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_360px\] {
    grid-template-columns: minmax(0,1fr) 360px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_420px\] {
    grid-template-columns: minmax(0,1fr) 420px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_430px\] {
    grid-template-columns: minmax(0,1fr) 430px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_440px\] {
    grid-template-columns: minmax(0,1fr) 440px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }

  .lg\:flex-row {
    flex-direction: row;
  }

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

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

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

@media (min-width: 1280px) {

  .xl\:sticky {
    position: sticky;
  }

  .xl\:top-32 {
    top: 8rem;
  }

  .xl\:block {
    display: block;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:max-h-\[74vh\] {
    max-height: 74vh;
  }

  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[320px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 320px minmax(0,1fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 0\.88fr\)_minmax\(360px\2c 1\.12fr\)\] {
    grid-template-columns: minmax(0,0.88fr) minmax(360px,1.12fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 0\.8fr\)_minmax\(0\2c 1\.2fr\)\] {
    grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 0\.95fr\)_minmax\(360px\2c 1\.05fr\)\] {
    grid-template-columns: minmax(0,0.95fr) minmax(360px,1.05fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 0\.98fr\)_minmax\(360px\2c 1\.02fr\)\] {
    grid-template-columns: minmax(0,0.98fr) minmax(360px,1.02fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] {
    grid-template-columns: minmax(0,1fr) 340px;
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_360px\] {
    grid-template-columns: minmax(0,1fr) 360px;
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(340px\2c 0\.9fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(340px,0.9fr);
  }

  .xl\:grid-cols-\[minmax\(260px\2c 420px\)_minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(260px,420px) minmax(0,1fr) auto;
  }

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

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

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/styles/persona-lab.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.persona-lab-shell-header {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--accent) 7%, transparent), transparent 38%),
    var(--panel);
}

.persona-lab-shell-title {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 900;
}

.persona-lab-shell-title h1 {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0;
}

.persona-lab-shell-badge,
.persona-lab-shell-dirty {
  max-width: min(34vw, 290px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.persona-lab-shell-badge {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel-soft) 88%, var(--accent));
  color: var(--muted);
}

.persona-lab-shell-dirty {
  border: 1px solid color-mix(in oklab, var(--warn) 70%, transparent);
  background: color-mix(in oklab, var(--warn) 13%, transparent);
  color: var(--warn);
}

.persona-lab-scenario-strip {
  display: grid;
  gap: 12px;
  align-items: end;
  border: 1px solid color-mix(in oklab, var(--warm) 30%, var(--line));
  border-radius: 10px;
  background: color-mix(in oklab, var(--warm) 8%, var(--panel));
  padding: 12px;
}

@media (min-width: 768px) {
  .persona-lab-scenario-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.persona-lab-workflow-surface {
  scroll-margin-top: 76px;
}

.persona-lab-stage-workspace {
  --stage-accent: var(--accent);
}

.persona-lab-stage-workspace > .panel-soft {
  border-left: 4px solid var(--stage-accent);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--stage-accent) 8%, transparent), transparent 28%),
    var(--panel-soft);
}

.persona-lab-stage-workspace-sources {
  --stage-accent: var(--warm);
}

.persona-lab-stage-workspace-draft {
  --stage-accent: var(--accent);
}

.persona-lab-stage-workspace-test {
  --stage-accent: #8b5cf6;
}

.persona-lab-stage-workspace-refine {
  --stage-accent: var(--warn);
}

.persona-lab-stage-workspace-save {
  --stage-accent: var(--ok);
}

.persona-lab-source-import {
  display: inline-flex;
  width: auto;
  min-height: var(--control-height-sm, 36px);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 0.81rem;
  font-weight: 800;
  text-align: left;
}

.persona-lab-source-import:hover,
.persona-lab-source-import:focus-visible,
.persona-lab-source-import.is-dragging {
  border-color: color-mix(in oklab, var(--accent) 42%, var(--line));
  background: color-mix(in oklab, var(--accent) 8%, var(--panel));
  color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.persona-lab-source-import .feedback-dropzone-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.persona-lab-source-import .feedback-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.persona-lab-stage-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  padding: 6px;
}

.persona-lab-stage-tab {
  display: flex;
  min-width: 142px;
  flex: 1 0 142px;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.persona-lab-stage-tab:hover,
.persona-lab-stage-tab:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 34%, var(--line));
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  outline: none;
}

.persona-lab-stage-tab[data-state="active"] {
  border-color: color-mix(in oklab, var(--accent) 62%, var(--line));
  background: color-mix(in oklab, var(--accent) 14%, var(--panel));
  color: var(--accent-strong);
}

.persona-lab-stage-tab[data-state="done"] {
  color: var(--ok);
}

.persona-lab-stage-tab-index {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.persona-lab-stage-tab-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.persona-lab-stage-tab-label,
.persona-lab-stage-tab-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona-lab-stage-tab-label {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.persona-lab-stage-tab-detail {
  color: currentColor;
  font-size: 0.72rem;
  font-weight: 800;
}

.persona-lab-stage-tab .ui-button-text {
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.persona-lab-refine-panel {
  min-height: 520px;
}

.persona-lab-refine-score-strip {
  display: grid;
  gap: 10px;
}

@media (min-width: 768px) {
  .persona-lab-refine-score-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.persona-lab-refine-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel) 72%, var(--panel-soft));
  padding: 6px;
}

.persona-lab-refine-tab {
  display: grid;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.persona-lab-refine-tab:hover,
.persona-lab-refine-tab:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 36%, var(--line));
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  outline: none;
}

.persona-lab-refine-tab[data-state="active"],
.persona-lab-refine-tab[data-state="selected"] {
  border-color: color-mix(in oklab, var(--warm) 62%, var(--line));
  background: color-mix(in oklab, var(--warm) 14%, var(--panel));
  color: var(--ink);
}

.persona-lab-refine-tab span:last-child {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.persona-lab-refine-tab-panel {
  min-height: 260px;
}

.persona-lab-refine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/.pnpm/@senexcrenshaw+bix-ui@file+..+bix-ui_@xyflow+react@12.10.2_@types+react@19.2.14_react-d_8977e0930b0d9bdc147a0f5decde26ae/node_modules/@senexcrenshaw/bix-ui/dist/styles.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --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: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --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: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 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: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --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 rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.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: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --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: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --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 rgba(0, 0, 0, 0.08);

  --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 {
  position: absolute;
  width: 100%;
  height: 100%;
  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 {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.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;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.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: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.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: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  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%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    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 {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.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: translateX(-15px) translateX(-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 {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.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 {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.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 {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  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));
}
.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: 0.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;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.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));
}
/* Shared Bix UI component styles. Theme tokens are supplied by the consuming app. */

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.stack-sm {
  gap: 8px;
}

.stack-lg {
  gap: 24px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.field-wide {
  grid-column: 1 / -1;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  min-width: 0;
}

.ui-button-group,
.inline-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ui-split-button {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.ui-split-button.input-group {
  width: auto;
}

.ui-action-cluster > .ui-split-button {
  flex-shrink: 1;
}

.ui-split-button-main {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
  min-width: 0;
}

.ui-split-button-toggle {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
  min-width: var(--ui-button-min-height);
  padding-inline: 0;
}

.ui-split-button-caret {
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
}

.ui-split-button-menu {
  --dropdown-panel-max-width: min(20rem, calc(100vw - 24px));
  width: min(max(var(--dropdown-trigger-width, 0px), 12rem), var(--dropdown-panel-max-width));
}

.ui-split-button-menu-list.ui-menu {
  min-width: 0;
}

.ui-action-cluster > .tooltip-wrap,
.ui-action-cluster > .action-pill,
.ui-action-cluster > .ui-button {
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
}

.ui-action-cluster > .tooltip-wrap > .ui-button,
.ui-action-cluster > .ui-button {
  min-width: 0;
  max-width: 100%;
}

button.action-pill,
a.action-pill {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ui-border, var(--panel-border-soft));
  border-radius: var(--radius-pill, 999px);
  background: var(--ui-bg, var(--panel-alt));
  color: var(--ui-fg, var(--accent-3));
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

button.action-pill:hover:not(:disabled),
a.action-pill:hover:not([aria-disabled="true"]) {
  transform: translateY(var(--motion-translate-hover, -0.5px)) scale(var(--motion-scale-hover, 1.01));
  border-color: var(--ui-hover-border, var(--accent-border));
  box-shadow: 0 4px 10px rgba(17, 18, 19, 0.14);
  color: var(--ui-hover-fg, var(--accent));
  background: var(--ui-hover-bg, var(--ui-bg, var(--panel-alt)));
}

button.action-pill:active:not(:disabled),
a.action-pill:active:not([aria-disabled="true"]) {
  transform: translateY(0) scale(0.985);
  color: var(--ui-active-fg, var(--ui-hover-fg, var(--accent)));
  background: var(--ui-active-bg, var(--ui-hover-bg, var(--ui-bg, var(--panel-alt))));
  border-color: var(--ui-active-border, var(--ui-hover-border, var(--accent-border)));
}

button.action-pill:focus-visible,
a.action-pill:focus-visible {
  outline: 2px solid var(--ui-ring, color-mix(in oklab, var(--accent) 32%, transparent));
  outline-offset: 2px;
}

button.action-pill:disabled,
button.action-pill[aria-disabled="true"],
a.action-pill[aria-disabled="true"] {
  opacity: 1;
  color: var(--ui-disabled-fg, color-mix(in oklab, var(--muted) 82%, var(--accent-3)));
  background: var(--ui-disabled-bg, var(--panel-alt));
  border-color: var(--ui-disabled-border, var(--panel-border));
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ui-button {
  --ui-button-min-height: var(--control-height-md, 40px);
  --ui-button-padding-x: 14px;
  --ui-button-padding-y: 8px;
  --ui-button-font-size: 0.84rem;
  --ui-button-content-gap: 8px;
  min-height: var(--ui-button-min-height);
  max-width: 100%;
  padding:
    var(--ui-button-padding-y)
    var(--ui-button-padding-x);
  font-size: var(--ui-button-font-size);
}

.ui-button-size-sm {
  --ui-button-min-height: var(--control-height-sm, 36px);
  --ui-button-padding-x: 12px;
  --ui-button-padding-y: 6px;
  --ui-button-font-size: 0.81rem;
  --ui-button-content-gap: 7px;
}

.ui-button-size-lg {
  --ui-button-min-height: var(--control-height-lg, 44px);
  --ui-button-padding-x: 16px;
  --ui-button-padding-y: 10px;
  --ui-button-font-size: 0.9rem;
  --ui-button-content-gap: 9px;
}

.ui-button-has-icon:not(.ui-button-mode-icon-only) {
  --ui-button-padding-x: 12px;
  --ui-button-content-gap: 6px;
}

.ui-button-size-sm.ui-button-has-icon:not(.ui-button-mode-icon-only) {
  --ui-button-padding-x: 10px;
  --ui-button-content-gap: 5px;
}

.ui-button-size-lg.ui-button-has-icon:not(.ui-button-mode-icon-only) {
  --ui-button-padding-x: 14px;
  --ui-button-content-gap: 7px;
}

.ui-button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-button-content-gap);
  min-width: 0;
  max-width: 100%;
  transition:
    opacity var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
    transform var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

button.action-pill:hover:not(:disabled) .ui-button-content,
a.action-pill:hover:not([aria-disabled="true"]) .ui-button-content {
  transform: translateY(calc(var(--motion-translate-hover, -0.5px) * 0.35));
}

button.action-pill:active:not(:disabled) .ui-button-content,
a.action-pill:active:not([aria-disabled="true"]) .ui-button-content {
  transform: scale(0.98);
}

.ui-button-icon,
.ui-button-spinner-layer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.app-icon {
  flex: 0 0 auto;
  color: var(--app-icon-color, currentColor);
}

.app-icon-tone-muted {
  --app-icon-color: var(--muted);
}

.app-icon-tone-accent {
  --app-icon-color: var(--accent);
}

.app-icon-tone-primary {
  --app-icon-color: var(--color-primary, var(--accent-2));
}

.app-icon-tone-positive {
  --app-icon-color: var(--color-success, var(--ok));
}

.app-icon-tone-warning {
  --app-icon-color: var(--color-warning, var(--warn));
}

.app-icon-tone-negative {
  --app-icon-color: var(--color-danger, var(--bad));
}

.app-icon-motion-spin {
  animation: ui-button-spin var(--app-icon-spin-duration, 900ms) linear infinite;
  transform-origin: center;
}

.app-icon-motion-pulse {
  animation: app-icon-pulse 1.4s ease-in-out infinite;
  transform-origin: center;
}

.ui-button-icon .app-icon,
.ui-button-icon svg,
.ui-button-spinner-layer .app-icon,
.ui-button-spinner-layer svg {
  width: 18px;
  height: 18px;
  transition: transform var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

button.action-pill:hover:not(:disabled) .ui-button-icon .app-icon,
button.action-pill:hover:not(:disabled) .ui-button-icon svg,
a.action-pill:hover:not([aria-disabled="true"]) .ui-button-icon .app-icon,
a.action-pill:hover:not([aria-disabled="true"]) .ui-button-icon svg {
  transform: scale(1.06);
}

.ui-button-size-sm .ui-button-icon .app-icon,
.ui-button-size-sm .ui-button-icon svg,
.ui-button-size-sm .ui-button-spinner-layer .app-icon,
.ui-button-size-sm .ui-button-spinner-layer svg {
  width: 16px;
  height: 16px;
}

.ui-button-size-lg .ui-button-icon .app-icon,
.ui-button-size-lg .ui-button-icon svg,
.ui-button-size-lg .ui-button-spinner-layer .app-icon,
.ui-button-size-lg .ui-button-spinner-layer svg {
  width: 20px;
  height: 20px;
}

.ui-button-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-button-truncate {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
}

.ui-button-truncate .ui-button-content {
  width: 100%;
  justify-content: flex-start;
}

.ui-button-truncate .ui-button-text {
  flex: 1 1 auto;
}

.ui-button-auto-icon,
.ui-button-mode-text .ui-button-icon,
.ui-button-mode-icon-only .ui-button-leading,
.ui-button-mode-icon-only .ui-button-trailing {
  display: none;
}

button.ui-button-mode-icon-only,
a.ui-button-mode-icon-only {
  min-width: 0;
  padding-inline: 0;
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

button.ui-button-mode-icon-only:hover:not(:disabled),
button.ui-button-mode-icon-only:active:not(:disabled),
button.ui-button-mode-icon-only:focus-visible,
a.ui-button-mode-icon-only:hover:not([aria-disabled="true"]),
a.ui-button-mode-icon-only:active:not([aria-disabled="true"]),
a.ui-button-mode-icon-only:focus-visible {
  border-color: transparent;
  border-radius: 999px;
  color: var(--ui-hover-fg, var(--accent));
  background: transparent;
  box-shadow: none;
  transform: none;
}

button.ui-button-mode-icon-only:disabled,
button.ui-button-mode-icon-only[aria-disabled="true"],
a.ui-button-mode-icon-only[aria-disabled="true"] {
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

button.ui-split-button-toggle.ui-button-mode-icon-only {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 var(--ui-button-min-height);
  inline-size: var(--ui-button-min-height);
  min-inline-size: var(--ui-button-min-height);
  min-width: var(--ui-button-min-height);
  border-color: var(--ui-border, var(--panel-border-soft));
  border-start-start-radius: 0 !important;
  border-start-end-radius: var(--radius-pill, 999px);
  border-end-end-radius: var(--radius-pill, 999px);
  border-end-start-radius: 0 !important;
  background: var(--ui-bg, var(--panel-alt));
  color: var(--ui-fg, var(--accent-3));
  box-shadow: none;
}

button.ui-split-button-toggle.ui-button-mode-icon-only::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 0;
  width: 1px;
  border-radius: 999px;
  background: color-mix(in oklab, currentColor 28%, transparent);
  opacity: 0.72;
  pointer-events: none;
}

button.ui-split-button-toggle.ui-button-mode-icon-only:hover:not(:disabled),
button.ui-split-button-toggle.ui-button-mode-icon-only:active:not(:disabled),
button.ui-split-button-toggle.ui-button-mode-icon-only:focus-visible {
  border-color: var(--ui-hover-border, var(--accent-border));
  border-start-start-radius: 0 !important;
  border-start-end-radius: var(--radius-pill, 999px);
  border-end-end-radius: var(--radius-pill, 999px);
  border-end-start-radius: 0 !important;
  background: var(--ui-hover-bg, var(--ui-bg, var(--panel-alt)));
  color: var(--ui-hover-fg, var(--accent));
  box-shadow: 0 4px 10px rgba(17, 18, 19, 0.14);
  transform: translateY(var(--motion-translate-hover, -0.5px));
}

button.ui-split-button-toggle.ui-button-mode-icon-only:hover:not(:disabled)::before,
button.ui-split-button-toggle.ui-button-mode-icon-only:active:not(:disabled)::before,
button.ui-split-button-toggle.ui-button-mode-icon-only:focus-visible::before {
  opacity: 0.9;
}

button.ui-split-button-toggle.ui-button-mode-icon-only:disabled,
button.ui-split-button-toggle.ui-button-mode-icon-only[aria-disabled="true"] {
  border-color: var(--ui-disabled-border, var(--panel-border));
  background: var(--ui-disabled-bg, var(--panel-alt));
  color: var(--ui-disabled-fg, var(--muted));
}

button.ui-button-shape-round.ui-button-mode-icon-only,
a.ui-button-shape-round.ui-button-mode-icon-only {
  --ui-button-round-size: var(--control-height-md, 40px);
  box-sizing: border-box;
  flex: 0 0 var(--ui-button-round-size, var(--control-height-md, 40px));
  aspect-ratio: 1 / 1;
  inline-size: var(--ui-button-round-size, var(--control-height-md, 40px));
  min-inline-size: var(--ui-button-round-size, var(--control-height-md, 40px));
  max-inline-size: var(--ui-button-round-size, var(--control-height-md, 40px));
  block-size: var(--ui-button-round-size, var(--control-height-md, 40px));
  min-block-size: var(--ui-button-round-size, var(--control-height-md, 40px));
  max-block-size: var(--ui-button-round-size, var(--control-height-md, 40px));
  width: var(--ui-button-round-size, var(--control-height-md, 40px));
  min-width: var(--ui-button-round-size, var(--control-height-md, 40px));
  max-width: var(--ui-button-round-size, var(--control-height-md, 40px));
  height: var(--ui-button-round-size, var(--control-height-md, 40px));
  min-height: var(--ui-button-round-size, var(--control-height-md, 40px));
  max-height: var(--ui-button-round-size, var(--control-height-md, 40px));
  padding: 0;
  border-color: var(--ui-border, var(--panel-border-soft));
  border-radius: 50%;
  background: var(--ui-bg, var(--panel-alt));
  box-shadow: 0 8px 20px color-mix(in oklab, var(--ui-bg, var(--accent)) 20%, transparent);
}

button.ui-button-shape-round.ui-button-size-sm.ui-button-mode-icon-only,
a.ui-button-shape-round.ui-button-size-sm.ui-button-mode-icon-only {
  --ui-button-round-size: var(--control-height-sm, 36px);
}

button.ui-button-shape-round.ui-button-size-md.ui-button-mode-icon-only,
a.ui-button-shape-round.ui-button-size-md.ui-button-mode-icon-only {
  --ui-button-round-size: var(--control-height-md, 40px);
}

button.ui-button-shape-round.ui-button-size-lg.ui-button-mode-icon-only,
a.ui-button-shape-round.ui-button-size-lg.ui-button-mode-icon-only {
  --ui-button-round-size: var(--control-height-lg, 44px);
}

button.ui-button-shape-round.ui-button-mode-icon-only:hover:not(:disabled),
button.ui-button-shape-round.ui-button-mode-icon-only:active:not(:disabled),
button.ui-button-shape-round.ui-button-mode-icon-only:focus-visible,
a.ui-button-shape-round.ui-button-mode-icon-only:hover:not([aria-disabled="true"]),
a.ui-button-shape-round.ui-button-mode-icon-only:active:not([aria-disabled="true"]),
a.ui-button-shape-round.ui-button-mode-icon-only:focus-visible {
  border-color: var(--ui-hover-border, var(--accent-border));
  border-radius: 50%;
  color: var(--ui-hover-fg, var(--accent));
  background: var(--ui-hover-bg, var(--ui-bg, var(--panel-alt)));
  box-shadow: 0 10px 24px color-mix(in oklab, var(--ui-hover-bg, var(--accent)) 24%, transparent);
  transform: translateY(var(--motion-translate-hover, -0.5px));
}

button.ui-button-shape-round.ui-button-mode-icon-only:disabled,
button.ui-button-shape-round.ui-button-mode-icon-only[aria-disabled="true"],
a.ui-button-shape-round.ui-button-mode-icon-only[aria-disabled="true"] {
  border-color: var(--ui-disabled-border, var(--panel-border));
  border-radius: 50%;
  background: var(--ui-disabled-bg, var(--panel-alt));
  box-shadow: none;
}

.ui-button-mode-icon-only .ui-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-button-mode-icon-only .ui-button-auto-icon {
  display: inline-flex;
}

.ui-button-loading {
  pointer-events: none;
}

.ui-button-loading .ui-button-content {
  opacity: 0.32;
}

.ui-button-loading.ui-button-mode-icon-only .ui-button-content {
  opacity: 0;
}

.ui-button-loading .ui-button-spinner-layer {
  position: absolute;
  inset: 0;
}

a.ui-button-link {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

a.ui-button-link:hover:not([aria-disabled="true"]),
a.ui-button-link:active:not([aria-disabled="true"]),
a.ui-button-link:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

@keyframes app-icon-pulse {
  0%,
  100% {
    opacity: 0.64;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@container (max-width: 9.5rem) {
  .ui-button-mode-auto .ui-button-leading,
  .ui-button-mode-auto .ui-button-trailing,
  .ui-button-mode-auto .ui-button-auto-icon {
    display: none;
  }
}

@container (max-width: 5.9rem) {
  .ui-auto-icon-compact .ui-button-mode-auto.ui-button-has-icon .ui-button-leading,
  .ui-auto-icon-compact .ui-button-mode-auto.ui-button-has-icon .ui-button-trailing {
    display: none;
  }

  .ui-auto-icon-compact .ui-button-mode-auto.ui-button-has-icon .ui-button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ui-auto-icon-compact .ui-button-mode-auto.ui-button-has-icon .ui-button-auto-icon {
    display: inline-flex;
  }
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.data-table-shell {
  position: relative;
}

.data-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.data-table-bulk-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.data-table-header-cell-actions {
  justify-content: flex-end;
}

.data-table-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
}

.data-table-density-compact th,
.data-table-density-compact td {
  padding-block: 7px;
}

.data-table-density-spacious th,
.data-table-density-spacious td {
  padding-block: 15px;
}
.theme-picker-control {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.theme-picker-control-stacked {
  align-items: stretch;
  flex-direction: column;
}

.theme-picker-control-compact {
  gap: 8px;
}

.theme-picker-mode {
  gap: 0;
}

.theme-combo-control {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
  color: var(--ink);
}

.theme-combo-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.theme-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  background: var(--scene-page-bg, var(--surface-page, var(--bg)));
  color: var(--text);
}

.theme-scene-page {
  min-height: 100%;
  border-radius: inherit;
}

.theme-scene-preview {
  min-height: 108px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
}

.theme-scene-layers,
.theme-scene-layer,
.theme-scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.theme-scene-layers {
  z-index: 0;
  overflow: hidden;
  background: var(--scene-page-bg, var(--surface-page, var(--bg)));
}

.theme-scene-layer {
  opacity: var(--scene-layer-opacity, 1);
  background-repeat: repeat;
  mix-blend-mode: var(--scene-blend-mode, normal);
  transform: translate3d(0, 0, 0);
}

.theme-scene-layer-1 {
  background: var(--scene-layer-1, transparent);
}

.theme-scene-layer-2 {
  background: var(--scene-layer-2, transparent);
}

.theme-scene-layer-3 {
  background: var(--scene-layer-3, transparent);
}

.theme-scene-vignette {
  background: var(--scene-vignette, transparent);
}

.theme-scene-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  background: var(--scene-content-scrim, transparent);
}

.theme-scene-preview .theme-scene-content {
  display: grid;
  min-height: inherit;
  align-content: end;
  padding: 12px;
}

.theme-scene-motion-auto .theme-scene-layer-2 {
  animation: theme-scene-drift-x var(--scene-motion-duration, 18s) var(--motion-ease-standard, ease) infinite alternate;
}

.theme-scene-motion-auto .theme-scene-layer-3 {
  animation: theme-scene-drift-y calc(var(--scene-motion-duration, 18s) * 1.35) var(--motion-ease-standard, ease) infinite alternate;
}

.theme-scene-motion-static .theme-scene-layer {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-scene-layer {
    animation: none !important;
  }
}

@keyframes theme-scene-drift-x {
  from {
    transform: translate3d(calc(var(--scene-motion-distance, 18px) * -1), 0, 0);
  }

  to {
    transform: translate3d(var(--scene-motion-distance, 18px), 0, 0);
  }
}

@keyframes theme-scene-drift-y {
  from {
    transform: translate3d(0, calc(var(--scene-motion-distance, 18px) * -1), 0);
  }

  to {
    transform: translate3d(0, var(--scene-motion-distance, 18px), 0);
  }
}

.theme-combo-control .theme-mode-icon-cycle.ui-button-mode-icon-only {
  border-color: var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
  background: var(--surface-card-muted, var(--panel-alt));
}

.theme-combo-control .theme-mode-icon-cycle.ui-button-mode-icon-only:hover:not(:disabled),
.theme-combo-control .theme-mode-icon-cycle.ui-button-mode-icon-only:focus-visible,
.theme-combo-control .theme-mode-icon-cycle.ui-button-mode-icon-only:active:not(:disabled) {
  border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
}

.theme-combo-control .theme-family-select {
  flex: 1 1 auto;
  min-width: min(132px, calc(100vw - 92px));
}

.theme-combo-control .theme-family-select .theme-family-dropdown-trigger:where(.ui-dropdown-trigger, .ui-button) {
  min-height: 36px;
  border-color: var(--border-subtle, var(--panel-border-soft));
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  background: var(--surface-card-muted, var(--panel-alt));
  padding-inline: 10px 12px;
}

.theme-combo-control .theme-family-select .theme-family-dropdown-trigger:where(.ui-dropdown-trigger, .ui-button):focus-visible {
  border-color: var(--accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
}

.theme-segmented-control {
  max-width: 100%;
}

.theme-segmented-control-segmented.ui-tabs-segmented {
  box-sizing: border-box;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 4px;
}

.theme-segmented-control-segmented .ui-tab-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.theme-segmented-control-segmented .ui-tab-segmented {
  width: 100%;
  min-width: 0;
  padding-inline: 6px;
}

.theme-segmented-control-segmented .ui-tab-content {
  gap: 4px;
}

.theme-segmented-control-segmented .ui-tab-icon .app-icon,
.theme-segmented-control-segmented .ui-tab-icon svg {
  width: 15px;
  height: 15px;
}

.theme-segmented-control-icon-only.ui-tabs-segmented {
  width: -moz-max-content;
  width: max-content;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
}

.theme-segmented-control-icon-only .ui-tab-segmented {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
}

.theme-segmented-control-icon-only .ui-tab-segmented:hover:not(.is-disabled),
.theme-segmented-control-icon-only .ui-tab-segmented:focus-visible {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
}

.theme-segmented-control-icon-only .ui-tab-segmented.is-active {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border-color: color-mix(in oklab, var(--accent) 34%, transparent);
}

.theme-segmented-control-icon-only .ui-tab-content {
  gap: 0;
}

.theme-segmented-control-icon-only .ui-tab-icon .app-icon,
.theme-segmented-control-icon-only .ui-tab-icon svg {
  width: 17px;
  height: 17px;
}

.theme-segmented-control-icon-only .ui-tab-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.theme-mode-icon-cycle.ui-button-mode-icon-only {
  --ui-button-min-height: 36px;
  width: 36px;
  min-width: 36px;
  border-radius: 999px;
}

.theme-mode-icon-cycle.ui-button-mode-icon-only:hover:not(:disabled),
.theme-mode-icon-cycle.ui-button-mode-icon-only:focus-visible,
.theme-mode-icon-cycle.ui-button-mode-icon-only:active:not(:disabled) {
  border-radius: 999px;
}

.theme-family-select {
  position: relative;
  min-width: min(250px, 100%);
}

.theme-family-select-thin {
  min-width: min(140px, 100%);
}

.theme-control-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.theme-family-select .theme-family-dropdown-trigger:where(.ui-dropdown-trigger, .ui-button) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  gap: 12px;
  border: 1px solid var(--panel-border-soft);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  padding: 6px 10px;
}

.theme-family-select .theme-family-dropdown-trigger:where(.ui-dropdown-trigger, .ui-button)::-webkit-details-marker {
  display: none;
}

.theme-family-select .theme-family-dropdown-trigger:where(.ui-dropdown-trigger, .ui-button)::after {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  content: "";
  opacity: 0.72;
}

.theme-family-dropdown-trigger-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.theme-family-dropdown-trigger-copy strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-family-select-thin .theme-family-dropdown-trigger:where(.ui-dropdown-trigger, .ui-button) {
  min-height: 34px;
  padding: 5px 9px;
}

.theme-family-select-thin .theme-family-dropdown-trigger-copy strong {
  font-size: 0.84rem;
}

.theme-family-select-name-only .theme-family-dropdown-trigger:where(.ui-dropdown-trigger, .ui-button) {
  align-items: center;
}

.theme-family-select-name-only .theme-family-dropdown-trigger-copy {
  align-content: center;
}

.theme-family-select .theme-family-dropdown-trigger:where(.ui-dropdown-trigger, .ui-button):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  outline: none;
}

.theme-family-dropdown-panel {
  --dropdown-panel-max-width: min(520px, calc(100vw - 16px));
  display: grid;
  width: var(--dropdown-panel-max-width);
  gap: 8px;
  padding: 8px;
}

.theme-family-option-list {
  display: grid;
  gap: 8px;
}

.theme-family-option {
  display: grid;
  grid-template-columns: minmax(116px, 0.7fr) minmax(190px, 1fr);
  gap: 10px;
  width: 100%;
  border: 1px solid var(--panel-border-soft);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  padding: 10px;
  text-align: start;
}

.theme-family-option:hover,
.theme-family-option:focus-visible,
.theme-family-option.is-selected {
  border-color: var(--accent-border, var(--accent));
  background: color-mix(in oklab, var(--accent) 8%, var(--panel));
  outline: none;
}

.theme-family-option.is-selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

.theme-family-option-copy {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}

.theme-family-option-copy strong {
  font-size: 0.9rem;
}

.theme-family-dropdown-panel-name-only .theme-family-option-list {
  grid-template-columns: max-content minmax(190px, 1fr);
}

.theme-family-dropdown-panel-name-only .theme-family-option {
  align-items: center;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: 8px;
  padding: 8px;
}

.theme-family-dropdown-panel-name-only .theme-family-option-copy {
  align-content: center;
}

.theme-family-dropdown-panel-name-only .theme-family-option-copy strong {
  font-size: 1.75rem;
  line-height: 1;
}

.theme-family-option-copy span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.theme-family-option-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.theme-family-option-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--panel-border-soft);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  padding: 8px;
}

.theme-family-option-card-head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.theme-family-option-card-surface {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  background: var(--panel);
  padding: 7px;
}

.theme-family-option-scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid var(--panel-border-soft);
  border-radius: 7px;
  background:
    var(--scene-layer-2, transparent),
    var(--scene-layer-1, transparent),
    var(--scene-page-bg, var(--bg));
}

.theme-family-option-scene span,
.theme-family-option-scene strong {
  display: block;
  width: 36px;
  height: 6px;
  margin: 6px;
  border-radius: 999px;
  background: var(--scene-content-scrim, color-mix(in oklab, var(--panel) 72%, transparent));
}

.theme-family-option-scene strong {
  width: 18px;
  background: var(--accent);
}

.theme-family-option-card-surface span,
.theme-family-option-card-surface strong {
  display: block;
  width: 38%;
  height: 7px;
  border-radius: 999px;
  background: var(--muted);
}

.theme-family-option-card-surface strong {
  width: 28%;
  background: var(--accent);
}

.theme-family-option-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.theme-family-option-swatches span {
  aspect-ratio: 1;
  border: 1px solid var(--panel-border-soft);
  border-radius: 4px;
}

.theme-palette-preview {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--panel-border-soft);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  padding: 12px;
  box-shadow: var(--shadow);
}

.theme-palette-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.theme-palette-preview-scene {
  min-height: 92px;
}

.theme-palette-preview-scene-copy {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  color: var(--accent-3);
  font-size: 0.78rem;
  font-weight: 800;
}

.theme-palette-preview-scene-copy strong {
  color: var(--accent);
}

.theme-palette-preview-surface {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.theme-palette-preview-surface strong {
  color: var(--accent);
}

.theme-palette-swatches {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
}

.theme-palette-swatch {
  display: block;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid var(--panel-border-soft);
  border-radius: 6px;
}

@media (max-width: 560px) {
  .theme-family-option {
    grid-template-columns: minmax(0, 1fr);
  }
}
.theme-editor-drawer-shell {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  justify-items: end;
  pointer-events: none;
}

html.theme-editor-drawer-open body {
  padding-right: clamp(520px, 42vw, 620px);
  transition: padding-right var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.theme-editor-drawer {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: clamp(520px, 42vw, 620px);
  min-width: 380px;
  max-width: 100vw;
  height: 100vh;
  border-left: 1px solid var(--panel-border-soft);
  background: var(--panel);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.theme-editor-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--panel-border-soft);
}

.theme-editor {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  overflow: auto;
  padding: 16px;
}

.theme-editor-toolbar {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in oklab, var(--panel-alt) 76%, var(--panel));
}

.theme-editor-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.theme-editor-filter-row {
  justify-content: space-between;
}

.theme-editor-toolbar-main,
.theme-editor-toolbar-actions,
.theme-editor-filter-toggles {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.theme-editor-toolbar-main {
  flex: 1 1 360px;
}

.theme-editor-toolbar-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
}

.theme-editor-filter-toggles {
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.theme-editor-toolbar-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.theme-editor label,
.theme-editor-search,
.theme-editor-export {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.theme-editor-meta {
  display: grid;
  gap: 8px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-alt);
  padding: 8px 10px 10px;
}

.theme-editor-meta summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.theme-editor-meta label {
  margin-top: 2px;
}

.theme-editor-search {
  flex: 1 1 190px;
  min-width: 170px;
}

.theme-editor-search > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.theme-editor-search-field {
  min-width: 0;
}

.theme-editor-search-field input {
  min-width: 0;
  width: 100%;
}

.theme-editor-search-field .input-actions,
.theme-editor-group-search .input-actions {
  right: 4px;
  gap: 0;
}

.theme-editor-search-field .input-action,
.theme-editor-group-search .input-action {
  width: 28px;
  height: 28px;
}

.theme-editor-search-field.input-control input,
.theme-editor-group-search.input-control input {
  padding-right: 34px;
}

.theme-editor .theme-editor-check {
  display: inline-grid;
  align-items: center;
  min-height: 0;
  padding: 0;
  color: var(--text);
}

.theme-editor .theme-editor-check .checkbox-control-click {
  min-height: 30px;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-pill, 999px);
  background: var(--panel);
}

.theme-editor .theme-editor-check .checkbox-control-label {
  font-size: 0.76rem;
  white-space: nowrap;
}

.theme-editor .theme-editor-check .checkbox-control-box,
.theme-editor .theme-editor-check .checkbox-control-box input,
.theme-editor .theme-editor-check .checkbox-control-indicator {
  width: 16px;
  height: 16px;
}

.theme-editor input,
.theme-editor select,
.theme-editor textarea {
  min-height: var(--control-height-sm, 36px);
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-alt);
  color: var(--ink);
  font: inherit;
  padding: 7px 9px;
}

.theme-editor-mode-toggle.ui-button-mode-icon-only,
.theme-editor-toolbar-actions .ui-button-mode-icon-only {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
}

.theme-editor textarea {
  min-height: var(--control-height-sm, 36px);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  resize: none;
}

.theme-editor-groups {
  display: grid;
  gap: 8px;
}

.theme-editor-groups-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 0 2px;
}

.theme-editor-groups-head strong {
  color: var(--ink);
}

.theme-editor-groups-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.theme-editor-empty,
.theme-editor-status,
.theme-editor-audit {
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-alt);
  color: var(--muted);
  padding: 9px 10px;
  font-size: 0.82rem;
}

.theme-editor-audit {
  display: grid;
  gap: 6px;
}

.theme-editor-audit-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.theme-editor-audit-error {
  color: var(--color-danger, var(--bad));
}

.theme-editor-audit-warning {
  color: var(--color-warning, var(--warn));
}

.theme-editor-group {
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-lg, 12px);
  background: var(--panel-alt);
}

.theme-editor-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 12px;
}

.theme-editor-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-align: left;
  padding: 2px 0;
}

.theme-editor-group-toggle:hover,
.theme-editor-group-toggle:focus-visible {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.theme-editor-group-chevron {
  flex: 0 0 auto;
  font-size: 0.82rem;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.theme-editor-group-chevron.is-open {
  transform: rotate(0deg);
}

.theme-editor .theme-editor-group-search {
  min-width: 126px;
  max-width: 180px;
  flex: 0 1 180px;
  font-size: 0.74rem;
}

.theme-editor-group-search input {
  min-height: 30px;
  width: 100%;
  min-width: 0;
  padding: 4px 7px;
}

.theme-editor-token-grid {
  display: grid;
  gap: 0;
  padding: 0 12px 12px;
}

.theme-editor-group-empty {
  color: var(--muted);
  font-size: 0.78rem;
  padding: 8px 0;
}

.theme-editor-token {
  display: grid;
  grid-template-columns: minmax(150px, 0.46fr) minmax(0, 1.54fr);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  padding: 7px 0;
}

.theme-editor-token + .theme-editor-token {
  border-top: 1px solid color-mix(in oklab, var(--panel-border-soft) 62%, transparent);
}

.theme-editor-token > .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-editor-token-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.32;
}

.theme-editor-token-meta strong {
  color: var(--accent-3);
  font-size: 0.74rem;
}

.theme-editor-token-control {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.theme-editor-color-input {
  grid-column: 1 / -1;
}

.theme-editor-color-text.input-control input {
  min-width: 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  padding-right: 34px;
}

.theme-editor-color-text .input-actions {
  right: 4px;
  gap: 0;
}

.theme-editor-color-text .input-action {
  width: 28px;
  height: 28px;
}

.theme-editor-token-control textarea {
  min-width: 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  padding-inline: 8px;
}

.theme-editor-token-value {
  min-width: 0;
}

.theme-editor-token-value summary {
  display: flex;
  align-items: center;
  min-height: var(--control-height-sm, 36px);
  min-width: 0;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-alt);
  color: var(--ink);
  cursor: text;
  list-style: none;
  padding: 7px 8px;
}

.theme-editor-token-value summary::-webkit-details-marker {
  display: none;
}

.theme-editor-token-value summary .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-editor-token-text-value.input-control input {
  min-height: var(--control-height-sm, 36px);
  width: 100%;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
}

.theme-editor-token-text-value .input-actions {
  right: 4px;
  gap: 0;
}

.theme-editor-token-text-value .input-action {
  width: 28px;
  height: 28px;
}

.theme-editor-token-value[open] {
  grid-column: 1 / -1;
}

.theme-editor-token-value[open] summary {
  display: none;
}

.theme-editor-token-value textarea {
  min-height: var(--control-height-sm, 36px);
}

.theme-editor-token-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.theme-editor-token-actions .ui-button-mode-icon-only {
  --ui-button-min-height: 30px;
  width: 30px;
  min-width: 30px;
}

.theme-editor-token-chain {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.28;
  padding-top: 3px;
}

.theme-editor-token-chain-step {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.theme-editor-token-chain-step::before {
  grid-column: 1;
  color: var(--accent-3);
  content: ">";
  font-weight: 900;
}

.theme-editor-token-chain-color {
  grid-column: 2;
}

.theme-editor-token-chain-color.color-control {
  width: min(100%, 320px);
}

.theme-editor-token-chain-color.color-control-has-prefix {
  grid-template-columns: minmax(90px, 0.72fr) 18px minmax(0, 1fr);
}

.theme-editor-token-chain-text.input-control {
  width: 100%;
}

.theme-editor-token-chain-color .color-control-static-value {
  grid-template-columns: minmax(90px, 0.72fr) minmax(0, 1fr);
}

.theme-editor-sampler-row {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--panel-border-soft) 68%, transparent);
}

.theme-editor-sample {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-pill, 999px);
  background: var(--panel-alt);
  color: var(--accent-3);
  font-size: 0.74rem;
  padding: 4px 9px 4px 5px;
  white-space: nowrap;
}

.theme-editor-sample-picker {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-pill, 999px);
  background: var(--panel);
  cursor: pointer;
  padding: 2px;
}

.theme-editor-sample-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.theme-editor-sample-picker::-webkit-color-swatch {
  border: 0;
  border-radius: var(--radius-pill, 999px);
}

.theme-editor-sample-picker::-moz-color-swatch {
  border: 0;
  border-radius: var(--radius-pill, 999px);
}

.theme-editor-sample-picker:focus-visible {
  border-color: var(--accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  outline: none;
}

.theme-editor-sample-readout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.theme-editor-export-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.theme-editor-export-head label {
  color: inherit;
}

.theme-editor-export-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 0.74rem;
}

.theme-editor-export-summary span {
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-pill, 999px);
  background: var(--panel-alt);
  padding: 3px 7px;
}

.theme-editor-export-value textarea {
  min-height: 320px;
}

@media (max-width: 560px) {
  html.theme-editor-drawer-open body {
    padding-right: 0;
  }

  .theme-editor-drawer {
    width: 100vw;
    min-width: 0;
  }

  .theme-editor-toolbar {
    padding: 8px;
  }

  .theme-editor-toolbar-main,
  .theme-editor-toolbar-actions,
  .theme-editor-filter-toggles {
    width: 100%;
  }

  .theme-editor-toolbar-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .theme-editor-sampler-row {
    grid-template-columns: 1fr auto;
  }

  .theme-editor-sampler-row .theme-editor-toolbar-label,
  .theme-editor-sample {
    grid-column: 1 / -1;
    max-width: none;
  }

  .theme-editor-group-search {
    min-width: 0;
    max-width: 150px;
  }
}
.ui-typography {
  margin: 0;
  max-width: 100%;
  color: var(--type-color-body, var(--text));
  letter-spacing: 0;
}

.ui-typography-font-sans {
  font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.ui-typography-font-display {
  font-family: var(--font-display, var(--font-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
}

.ui-typography-font-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.ui-typography-tone-heading {
  color: var(--type-color-heading, var(--accent-3));
}

.ui-typography-tone-body {
  color: var(--type-color-body, var(--text));
}

.ui-typography-tone-muted {
  color: var(--type-color-muted, var(--muted));
}

.ui-typography-tone-accent {
  color: var(--accent);
}

.ui-typography-tone-success {
  color: var(--ok);
  color: color-mix(in oklab, var(--ok) 50%, var(--type-color-body, var(--text)));
}

.ui-typography-tone-warning {
  color: var(--warn);
  color: color-mix(in oklab, var(--warn) 45%, var(--type-color-body, var(--text)));
}

.ui-typography-tone-danger {
  color: var(--bad);
  color: color-mix(in oklab, var(--bad) 50%, var(--type-color-body, var(--text)));
}

.ui-typography-tone-code {
  color: var(--type-color-code, var(--accent-3));
}

.ui-text {
  font-size: var(--type-size-md);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-line-normal);
}

.ui-text-size-xs {
  font-size: var(--type-size-xs);
}

.ui-text-size-sm {
  font-size: var(--type-size-sm);
}

.ui-text-size-md {
  font-size: var(--type-size-md);
}

.ui-text-size-lg {
  font-size: var(--type-size-lg);
}

.ui-text-size-xl {
  font-size: var(--type-size-xl);
}

.ui-text-size-2xl {
  font-size: var(--type-size-2xl);
}

.ui-text-size-3xl {
  font-size: var(--type-size-3xl);
}

.ui-text-weight-regular {
  font-weight: var(--type-weight-regular);
}

.ui-text-weight-medium {
  font-weight: var(--type-weight-medium);
}

.ui-text-weight-semibold {
  font-weight: var(--type-weight-semibold);
}

.ui-text-weight-bold {
  font-weight: var(--type-weight-bold);
}

.ui-text-weight-heavy {
  font-weight: var(--type-weight-heavy);
}

.ui-heading {
  color: var(--type-color-heading, var(--accent-3));
  font-family: var(--font-display, var(--font-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
  font-weight: var(--type-weight-heavy);
  line-height: var(--type-line-tight);
}

.ui-heading-level-1 {
  font-size: var(--type-size-3xl);
}

.ui-heading-level-2 {
  font-size: var(--type-size-2xl);
}

.ui-heading-level-3 {
  font-size: var(--type-size-xl);
  line-height: var(--type-line-snug);
}

.ui-heading-level-4 {
  font-size: var(--type-size-lg);
  line-height: var(--type-line-snug);
}

.ui-subheading {
  color: var(--type-color-muted, var(--muted));
  font-size: var(--type-size-md);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-line-normal);
}

.ui-caption {
  color: var(--type-color-muted, var(--muted));
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-line-snug);
}

.ui-help-text {
  color: var(--type-color-muted, var(--muted));
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-line-normal);
}

.ui-code-text,
.ui-kbd {
  color: var(--type-color-code, var(--accent-3));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.ui-code-text {
  font-size: var(--type-size-sm);
  line-height: var(--type-line-snug);
}

.ui-kbd {
  display: inline-flex;
  align-items: center;
  min-height: 1.5em;
  padding: 0 0.42em;
  border: 1px solid var(--panel-border-soft);
  border-radius: 6px;
  background: var(--panel-alt);
  font-size: var(--type-size-xs);
  font-weight: var(--type-weight-bold);
  line-height: 1;
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--panel-border-soft) 80%, transparent);
}

.ui-typography-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-typography-wrap {
  overflow-wrap: anywhere;
  word-break: normal;
}
.connector-path {
  position: relative;
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-border-soft);
  background: color-mix(in oklab, var(--panel-alt) 62%, transparent);
  overflow: hidden;
}

.connector-path-lines {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  pointer-events: none;
  z-index: 0;
}

.connector-path-nodes {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  align-items: center;
}

.connector-path-vertical .connector-path-nodes {
  grid-template-columns: minmax(0, 1fr);
}

.connector-path-wrap .connector-path-nodes {
  overflow-x: auto;
}

.connector-path-node-slot {
  min-width: 0;
}

.connector-path-node-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.connector-path-node {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 56px;
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border-soft);
  background: color-mix(in oklab, var(--panel) 88%, white);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.connector-path-node-button:hover .connector-path-node,
.connector-path-node-button:focus-visible .connector-path-node,
.connector-path-node.is-selected {
  border-color: color-mix(in oklab, var(--accent) 52%, var(--panel-border-soft));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
}

.connector-path-node-active {
  border-color: color-mix(in oklab, var(--accent) 58%, var(--panel-border-soft));
  background: color-mix(in oklab, var(--accent) 10%, var(--panel));
}

.connector-path-node-complete {
  border-color: color-mix(in oklab, var(--ok) 42%, var(--panel-border-soft));
}

.connector-path-node-error {
  border-color: color-mix(in oklab, var(--bad) 48%, var(--panel-border-soft));
  background: color-mix(in oklab, var(--bad) 8%, var(--panel));
}

.connector-path-node-stale {
  border-color: color-mix(in oklab, var(--warn) 50%, var(--panel-border-soft));
  background: color-mix(in oklab, var(--warn) 8%, var(--panel));
}

.connector-path-node-disabled {
  opacity: 0.58;
}

.connector-path-line {
  fill: none;
  stroke: color-mix(in oklab, var(--accent-3) 44%, transparent);
  stroke-width: 1.8;
}

.connector-path-line-branch {
  stroke-dasharray: 4 4;
}

.connector-path-line-loop,
.connector-path-line-fallback {
  stroke: color-mix(in oklab, var(--warn) 64%, transparent);
}

.connector-path-line.is-disabled {
  opacity: 0.42;
}

.connector-path-arrowhead {
  fill: color-mix(in oklab, var(--accent-3) 58%, transparent);
}

.connector-path-edge-labels {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.connector-path-edge-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border-soft);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.connector-path-edge-label.is-disabled {
  opacity: 0.5;
}

.workflow-path-compact .connector-path-node {
  min-height: 52px;
  padding: 10px;
}

.workflow-stage-node-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workflow-stage-node-kicker,
.workflow-stage-node-state,
.workflow-panel-kicker {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workflow-stage-node-label {
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.workflow-stage-node-description {
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.workflow-stage-node-state {
  letter-spacing: 0;
  text-transform: none;
}

.workflow-summary-panel,
.workflow-decision-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--panel-border-soft);
  background: var(--panel);
}

.workflow-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.workflow-panel-title {
  color: var(--ink);
  font-weight: 850;
}

.workflow-panel-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.workflow-panel-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 0;
}

.workflow-summary-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workflow-summary-item dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.workflow-summary-item dd {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.workflow-decision-score {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.workflow-decision-score strong {
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
}

.workflow-decision-findings,
.workflow-decision-recommendations ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-decision-finding {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--panel-border-soft);
  background: var(--panel-alt);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 750;
}

.workflow-decision-finding small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.workflow-decision-finding-ok {
  border-color: color-mix(in oklab, var(--ok) 36%, var(--panel-border-soft));
}

.workflow-decision-finding-warn {
  border-color: color-mix(in oklab, var(--warn) 42%, var(--panel-border-soft));
}

.workflow-decision-finding-bad {
  border-color: color-mix(in oklab, var(--bad) 42%, var(--panel-border-soft));
}

.workflow-decision-recommendations {
  display: grid;
  gap: 8px;
}

.workflow-decision-recommendations li {
  color: var(--accent-3);
  font-size: 0.86rem;
  line-height: 1.45;
}

.workflow-decision-actions {
  justify-content: flex-start;
}

.workflow-graph {
  min-height: 280px;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--panel-border-soft);
  background: var(--panel);
}

.data-table-header-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.data-table-filter-menu {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.data-table-filter-trigger {
  list-style: none;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.data-table-filter-trigger:hover,
.data-table-filter-trigger[data-state="open"],
.data-table-filter-trigger.is-active {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.data-table-filter-trigger svg {
  width: 16px;
  height: 16px;
}

.data-table-filter-panel {
  --dropdown-panel-max-width: min(20rem, calc(100vw - 16px));
  min-width: min(max(var(--dropdown-trigger-width, 0px), 16.25rem), var(--dropdown-panel-max-width));
}

.data-table-filter-panel-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.data-table-filter-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.data-table-filter-clear {
  align-self: end;
  flex: 0 0 auto;
}

.data-table-filter-custom-control {
  min-width: 0;
}

.data-table-filter-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.data-table-filter-field input,
.data-table-filter-field select {
  min-width: 0;
}

.data-table-filter-input input {
  padding-right: 56px;
}

.data-table-empty {
  margin: 0;
  border: 0;
  background: transparent;
}

.data-table-section-row th {
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  color: var(--accent-3);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.data-table-section-title {
  color: var(--accent-3);
  letter-spacing: 0;
  text-transform: none;
}

.data-table-section-description {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.data-table-sticky-first-column .data-table-sticky-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
}

.data-table-sticky-first-column thead .data-table-sticky-cell {
  z-index: 2;
  background: var(--panel-soft);
}

.table .align-right {
  text-align: right;
}

.table .align-center {
  text-align: center;
}

.data-table-overlay {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 62%, rgba(17, 18, 19, 0.34));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 3;
}

.data-table-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid color-mix(in oklab, var(--accent) 35%, transparent);
  border-top-color: var(--accent);
  animation: table-spin var(--motion-duration-slow, 220ms) linear infinite;
}

.data-table-overlay-label {
  font-size: 0.82rem;
  color: var(--accent-3);
  font-weight: 600;
}
.workflow-review-panel {
  display: grid;
  gap: 16px;
  color: var(--text);
}

.workflow-review-header,
.workflow-review-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workflow-review-title {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
}

.workflow-review-description,
.workflow-review-empty,
.workflow-review-item-message,
.workflow-review-candidate-details,
.workflow-review-candidate-disabled {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.workflow-review-status {
  min-width: -moz-max-content;
  min-width: max-content;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-alt);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1;
  padding: 6px 8px;
  text-transform: capitalize;
}

.workflow-review-panel[data-state="accepted"] .workflow-review-status {
  color: var(--ok, #15803d);
}

.workflow-review-panel[data-state="error"] .workflow-review-status {
  color: var(--bad, #b91c1c);
}

.workflow-review-panel[data-state="running"] .workflow-review-status {
  color: var(--accent-3, var(--accent));
}

.workflow-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr);
  gap: 14px;
}

.workflow-review-feedback,
.workflow-review-candidates {
  display: grid;
  align-content: start;
  gap: 8px;
}

.workflow-review-feedback-list,
.workflow-review-warnings {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-review-feedback-item,
.workflow-review-candidate {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
}

.workflow-review-candidate {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.workflow-review-candidate:disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.workflow-review-candidate[aria-selected="true"] {
  border-color: color-mix(in oklab, var(--accent) 60%, var(--panel-border-soft));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 42%, transparent);
}

.workflow-review-candidate:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.workflow-review-candidate-list {
  display: grid;
  gap: 8px;
}

.workflow-review-item-title {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.25;
}

.workflow-review-feedback-info {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--panel-border-soft));
}

.workflow-review-feedback-success {
  border-color: color-mix(in oklab, var(--ok, #16a34a) 35%, var(--panel-border-soft));
}

.workflow-review-feedback-warning,
.workflow-review-warnings {
  border-color: color-mix(in oklab, var(--warn, #d97706) 35%, var(--panel-border-soft));
}

.workflow-review-feedback-error {
  border-color: color-mix(in oklab, var(--bad, #dc2626) 35%, var(--panel-border-soft));
}

.workflow-review-warnings {
  border: 1px solid color-mix(in oklab, var(--warn, #d97706) 35%, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: color-mix(in oklab, var(--warn, #d97706) 8%, var(--panel));
  color: var(--warn, #b45309);
  padding: 10px 12px;
  font-size: 0.84rem;
  line-height: 1.35;
}

.workflow-review-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .workflow-review-header,
  .workflow-review-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .workflow-review-grid {
    grid-template-columns: 1fr;
  }

  .workflow-review-status {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.data-table-shell {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  container-type: inline-size;
  border: 1px solid var(--table-grid-line, var(--panel-border));
  border-radius: var(--radius-lg, 14px);
  background: var(--panel);
  overflow: hidden;
}

.data-table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
}

.data-table th,
.data-table td {
  padding: 10px 8px;
  text-align: left;
}

.data-table-density-compact th,
.data-table-density-compact td {
  padding: 6px 8px;
}

.data-table-density-spacious th,
.data-table-density-spacious td {
  padding: 14px 12px;
}

.data-table thead th {
  background: var(--panel-soft);
  color: var(--accent-3);
  font-weight: 800;
}

.data-table-density-compact thead th {
  font-size: 0.74rem;
}

.data-table-density-compact tbody :is(td, th[scope="row"]) {
  font-size: 0.86rem;
}

.data-table .table-sort-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.data-table .table-sort-button:hover,
.data-table .table-sort-button:focus-visible {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  outline: none;
}

.data-table-scroll-wrap {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
}

.data-table-layout-fit .data-table-shell {
  display: inline-flex;
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
}

.data-table-layout-fit .data-table-scroll-wrap {
  width: auto;
}

.data-table-layout-fit .data-table {
  width: -moz-max-content;
  width: max-content;
}

.data-table-virtual-spacer td {
  padding: 0;
  border: 0;
}

.data-table-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel-soft);
}

.data-table-grid-none th,
.data-table-grid-none td {
  border-color: transparent;
}

.data-table-grid-vertical th,
.data-table-grid-vertical td,
.data-table-grid-both th,
.data-table-grid-both td {
  border-right: 1px solid var(--table-grid-line, var(--panel-border-soft));
}

.data-table-grid-vertical th:last-child,
.data-table-grid-vertical td:last-child,
.data-table-grid-both th:last-child,
.data-table-grid-both td:last-child {
  border-right: 0;
}

.data-table-grid-both th,
.data-table-grid-both td,
.data-table-grid-horizontal th,
.data-table-grid-horizontal td {
  border-bottom: 1px solid var(--table-grid-line, var(--panel-border-soft));
}

.data-table-striped tbody tr:nth-child(even):not(.data-table-section-row):not(.data-table-group-row):not(.data-table-summary-row) td,
.data-table-striped tbody tr:nth-child(even):not(.data-table-section-row):not(.data-table-group-row):not(.data-table-summary-row) th[scope="row"] {
  background: color-mix(in oklab, var(--panel-alt) 62%, transparent);
}

.data-table-striped tbody tr:nth-child(even):not(.data-table-section-row):not(.data-table-group-row):not(.data-table-summary-row) .data-table-pinned-cell {
  background: var(--table-pinned-cell-striped-bg, color-mix(in oklab, var(--panel-alt) 62%, var(--panel)));
}

.data-table tbody tr.is-selected td,
.data-table tbody tr.is-selected th[scope="row"] {
  background: var(--table-row-selected, color-mix(in oklab, var(--accent) 13%, var(--panel)));
}

.data-table tbody tr.is-selected .data-table-pinned-cell {
  background: var(--table-row-selected, color-mix(in oklab, var(--accent) 13%, var(--panel)));
}

.data-table tbody tr.is-selectable-row {
  cursor: pointer;
}

.data-table tbody tr.is-row-drop-target td,
.data-table tbody tr.is-row-drop-target th[scope="row"] {
  box-shadow: inset 0 2px 0 var(--accent);
}

.data-table-summary-row :is(td, th) {
  background: var(--data-table-summary-bg, color-mix(in oklab, var(--panel-soft) 76%, var(--panel)));
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
}

.data-table-density-compact .data-table-summary-row :is(td, th) {
  font-size: 0.78rem;
}

.data-table-summary-row .data-table-summary-control-cell {
  padding: 0;
}

.data-table-total-summary-row :is(td, th) {
  border-top: 1px solid var(--table-grid-line, var(--panel-border));
}

.data-table-summary-row .data-table-pinned-cell {
  background: var(--data-table-summary-bg, color-mix(in oklab, var(--panel-soft) 76%, var(--panel)));
}

.data-table tbody tr.is-selected:hover td,
.data-table tbody tr.is-selected:hover th[scope="row"] {
  background: color-mix(in oklab, var(--accent) 18%, var(--table-row-hover, var(--panel-alt)));
}

.data-table tbody tr.is-selected:hover .data-table-pinned-cell {
  background: color-mix(in oklab, var(--accent) 18%, var(--table-row-hover, var(--panel-alt)));
}

.data-table tbody tr.is-row-grouped.is-selected td,
.data-table tbody tr.is-row-grouped.is-selected th[scope="row"],
.data-table tbody tr.is-row-grouped.is-selected .data-table-pinned-cell {
  background: var(--data-table-row-group-selected-bg, var(--table-row-selected, color-mix(in oklab, var(--accent) 13%, var(--panel))));
}

.data-table tbody tr.is-row-grouped.is-selected:hover td,
.data-table tbody tr.is-row-grouped.is-selected:hover th[scope="row"],
.data-table tbody tr.is-row-grouped.is-selected:hover .data-table-pinned-cell {
  background: var(--data-table-row-group-selected-bg, color-mix(in oklab, var(--accent) 18%, var(--table-row-hover, var(--panel-alt))));
}

.data-table .compact-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 28px;
}

.data-table .compact-action-control {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}

.data-table .compact-action-control svg {
  width: 16px;
  height: 16px;
}

.data-table-density-compact .compact-action-group {
  min-height: 24px;
}

.data-table-density-compact .compact-action-control {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.data-table-density-spacious .compact-action-group {
  min-height: 32px;
}

.data-table-density-spacious .compact-action-control {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.data-table-cell-selection :is(td, th[scope="row"]) {
  outline-offset: -2px;
}

.data-table-cell-selection :is(td, th[scope="row"]):focus-visible,
.data-table-cell-selection .is-active-cell {
  outline: 2px solid var(--table-cell-active-ring, var(--ring));
}

.data-table-cell-selection .is-cell-selected {
  background: var(--table-cell-selected, color-mix(in oklab, var(--accent) 14%, var(--panel)));
}

.data-table-cell-selection .is-range-top {
  border-top-color: var(--table-cell-range-border, var(--accent));
}

.data-table-cell-selection .is-range-bottom {
  border-bottom-color: var(--table-cell-range-border, var(--accent));
}

.data-table-cell-selection .is-range-left {
  border-left: 1px solid var(--table-cell-range-border, var(--accent));
}

.data-table-cell-selection .is-range-right {
  border-right-color: var(--table-cell-range-border, var(--accent));
}

.data-table-pinned-cell {
  position: sticky;
  z-index: 2;
  background: var(--table-pinned-cell-bg, var(--panel));
  background-clip: padding-box;
}

thead .data-table-pinned-cell {
  z-index: 4;
  background: var(--panel-soft);
}

.data-table-pinned-left {
  box-shadow:
    1px 0 0 var(--table-grid-line, var(--panel-border-soft)),
    12px 0 18px color-mix(in oklab, var(--panel) 82%, transparent);
}

.data-table-pinned-right {
  box-shadow:
    -1px 0 0 var(--table-grid-line, var(--panel-border-soft)),
    -12px 0 18px color-mix(in oklab, var(--panel) 82%, transparent);
}

.data-table-header-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.data-table-header-leading-control {
  display: inline-flex;
  flex: 0 0 auto;
}

.data-table-collapse-all {
  display: inline-flex;
  gap: 4px;
}

.data-table-header-cell .data-table-resize-handle {
  position: absolute;
  top: -6px;
  right: -7px;
  bottom: -6px;
  width: 12px;
  cursor: col-resize;
  touch-action: none;
}

.data-table-header-cell .data-table-resize-handle::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 5px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.data-table-header-cell .data-table-resize-handle:hover::after,
.data-table-header-cell .data-table-resize-handle:focus-visible::after {
  background: var(--accent);
}

.data-table th.is-reorderable {
  cursor: grab;
}

.data-table th.is-reorderable:active {
  cursor: grabbing;
}

.data-table-cell-editor {
  min-width: 160px;
}

.data-table-cell-editor input {
  min-width: 0;
}

.data-table-toolbar .data-table-quick-filter {
  margin-right: auto;
  width: min(320px, 100%);
}

.data-table-filter-select {
  min-width: 190px;
}

.data-table-column-panel-content {
  gap: 6px;
}

.data-table-column-option {
  display: grid;
  gap: 6px;
  align-items: stretch;
}

.data-table-column-visibility-option {
  display: flex;
  align-items: center;
  gap: 9px;
}

.data-table-column-option-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-left: 26px;
}

.data-table-column-option-actions button {
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--panel-border-soft);
  border-radius: 999px;
  background: var(--panel-alt);
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.data-table-column-option-actions button:hover:not(:disabled),
.data-table-column-option-actions button:focus-visible {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 34%, var(--panel-border-soft));
}

.data-table-column-option-actions button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.data-table-footer {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 8px 10px;
  border-top: 1px solid var(--table-grid-line, var(--panel-border-soft));
  background: var(--panel);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.2;
}

.data-table-root-density-compact .data-table-footer {
  min-height: 42px;
  padding: 6px 8px;
  font-size: 0.78rem;
}

.data-table-root-density-spacious .data-table-footer {
  min-height: 58px;
  padding: 10px 12px;
  font-size: 0.9rem;
}

.data-table-selection-summary {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 32px;
}

.data-table-selection-count {
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table-footer-content {
  margin-left: 0;
  color: inherit;
  font-size: inherit;
}

.data-table-rows-shown {
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table-footer-region {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.data-table-footer-left {
  grid-column: 1;
  justify-content: flex-start;
}

.data-table-footer-center {
  grid-column: 2;
  justify-content: center;
}

.data-table-footer-right {
  grid-column: 3;
  justify-content: flex-end;
}

.data-table-footer-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.pagination-controls.data-table-pagination {
  flex-wrap: nowrap;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin-top: 0;
  margin-left: 0;
  font-size: inherit;
}

.pagination-controls.data-table-pagination .pagination-status {
  min-width: 25ch;
  padding: 0 4px;
  color: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pagination-page-size.select-control {
  --select-control-panel-width: 140px;
  flex: 0 0 82px;
  width: 82px;
  color: inherit;
  font-size: inherit;
}

.pagination-controls.data-table-pagination .select-control-trigger {
  min-height: 32px;
  padding-block: 6px;
  font-size: inherit;
}

.data-table-root-density-compact .pagination-controls.data-table-pagination .select-control-trigger {
  min-height: 28px;
  padding-block: 4px;
}

.data-table-root-density-spacious .pagination-controls.data-table-pagination .select-control-trigger {
  min-height: 36px;
  padding-block: 8px;
}

.pagination-controls.data-table-pagination .select-control-trigger-label {
  font-size: inherit;
}

@container (max-width: 960px) {
  .data-table-footer {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .data-table-selection-summary,
  .data-table-footer-content,
  .data-table-footer-region,
  .pagination-controls.data-table-pagination {
    grid-column: 1;
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .pagination-controls.data-table-pagination .pagination-status {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .data-table-toolbar .data-table-quick-filter,
  .data-table-pagination {
    width: 100%;
    margin-left: 0;
  }

  .data-table-footer {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .data-table-selection-summary,
  .data-table-footer-content,
  .data-table-footer-region,
  .pagination-controls.data-table-pagination {
    grid-column: 1;
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

}
.data-table-group-row th,
.data-table-section-row th {
  padding: 12px 0 0;
  background: var(--panel);
  border-bottom: 0;
}

.data-table-density-compact .data-table-group-row th,
.data-table-density-compact .data-table-section-row th {
  padding-top: 6px;
}

.data-table-density-spacious .data-table-group-row th,
.data-table-density-spacious .data-table-section-row th {
  padding-top: 16px;
}

.data-table-group-heading,
.data-table-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--data-table-group-border, var(--panel-border-soft));
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--data-table-group-surface, var(--panel-soft));
  color: var(--text);
}

.data-table-density-compact .data-table-group-heading,
.data-table-density-compact .data-table-section-heading {
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
}

.data-table-density-spacious .data-table-group-heading,
.data-table-density-spacious .data-table-section-heading {
  gap: 14px;
  padding: 13px 14px;
}

.data-table-group-row.is-collapsed .data-table-group-heading,
.data-table-section-row.is-collapsed .data-table-section-heading {
  border-bottom: 1px solid var(--data-table-group-border, var(--panel-border-soft));
  border-radius: 8px;
}

.data-table-group-primary,
.data-table-group-meta,
.data-table-section-primary,
.data-table-section-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.data-table-density-compact .data-table-group-primary,
.data-table-density-compact .data-table-group-meta,
.data-table-density-compact .data-table-section-primary,
.data-table-density-compact .data-table-section-meta {
  gap: 7px;
}

.data-table-group-primary > div:last-child,
.data-table-section-primary > div:last-child {
  min-width: 0;
}

.data-table-group-title,
.data-table-section-title {
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.25;
}

.data-table-density-compact .data-table-group-title,
.data-table-density-compact .data-table-section-title {
  font-size: 0.8rem;
}

.data-table-group-description,
.data-table-group-summary,
.data-table-group-count,
.data-table-section-description,
.data-table-section-summary,
.data-table-section-count {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.data-table-density-compact .data-table-group-description,
.data-table-density-compact .data-table-group-summary,
.data-table-density-compact .data-table-group-count,
.data-table-density-compact .data-table-section-description,
.data-table-density-compact .data-table-section-summary,
.data-table-density-compact .data-table-section-count {
  font-size: 0.7rem;
}

.data-table-group-summary,
.data-table-section-summary {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.data-table-group-summary-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid color-mix(in oklab, var(--data-table-group-border, var(--panel-border-soft)) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--data-table-group-surface, var(--panel-soft)) 72%, var(--panel));
  color: var(--text);
  white-space: nowrap;
}

.data-table-density-compact .data-table-group-summary-pill {
  min-height: 20px;
  padding: 1px 7px;
}

.data-table-group-count,
.data-table-section-count {
  white-space: nowrap;
}

.data-table-group-actions,
.data-table-section-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.data-table-density-compact .data-table-group-actions,
.data-table-density-compact .data-table-section-actions {
  gap: 5px;
}

.data-table-group-toggle,
.data-table-group-select,
.data-table-section-toggle,
.data-table-section-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--data-table-group-border, var(--panel-border-soft));
  border-radius: 999px;
  background: color-mix(in oklab, var(--data-table-group-surface, var(--panel-soft)) 82%, var(--panel));
  color: var(--accent-3);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
}

.data-table-density-compact .data-table-group-toggle,
.data-table-density-compact .data-table-group-select,
.data-table-density-compact .data-table-section-toggle,
.data-table-density-compact .data-table-section-select {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  font-size: 0.72rem;
}

.data-table-density-spacious .data-table-group-toggle,
.data-table-density-spacious .data-table-group-select,
.data-table-density-spacious .data-table-section-toggle,
.data-table-density-spacious .data-table-section-select {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}

.data-table-group-toggle .section-chevron,
.data-table-section-toggle .section-chevron {
  font-size: 0.78rem;
}

.data-table-group-toggle:hover,
.data-table-group-toggle:focus-visible,
.data-table-group-select:hover,
.data-table-group-select:focus-visible,
.data-table-section-toggle:hover,
.data-table-section-toggle:focus-visible,
.data-table-section-select:hover,
.data-table-section-select:focus-visible {
  border-color: var(--data-table-group-border, var(--accent));
  background: color-mix(in oklab, var(--accent) 12%, var(--panel));
  outline: none;
}

.data-table-group-select.is-all,
.data-table-group-select.is-mixed {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, var(--panel));
}

.data-table-group-column-row th,
.data-table-section-column-row th {
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px solid var(--data-table-group-border, var(--panel-border-soft));
  border-bottom: 1px solid var(--data-table-group-border, var(--panel-border-soft));
  background: color-mix(in oklab, var(--data-table-group-surface, var(--panel-soft)) 72%, var(--panel-soft));
  color: var(--accent-3);
  font-size: 0.76rem;
  font-weight: 800;
}

.data-table-density-compact .data-table-group-column-row th,
.data-table-density-compact .data-table-section-column-row th {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.72rem;
}

.data-table-group-column-row th:first-child,
.data-table-section-column-row th:first-child {
  border-left: 1px solid var(--data-table-group-border, var(--panel-border-soft));
}

.data-table-group-column-row th:last-child,
.data-table-section-column-row th:last-child {
  border-right: 1px solid var(--data-table-group-border, var(--panel-border-soft));
}

.data-table-group-summary-row :is(td, th),
.data-table-section-summary-row :is(td, th) {
  --data-table-summary-bg: color-mix(in oklab, var(--data-table-row-group-bg, var(--panel-soft)) 76%, var(--panel));
  border-bottom: 1px solid var(--data-table-row-group-border, var(--panel-border-soft));
}

.data-table-group-summary-row > :is(td:not(.data-table-select-col):not(.data-table-row-reorder-col), th):first-child,
.data-table-section-summary-row > :is(td:not(.data-table-select-col):not(.data-table-row-reorder-col), th):first-child,
.data-table-group-summary-row > .data-table-select-col + :is(td, th),
.data-table-section-summary-row > .data-table-select-col + :is(td, th),
.data-table-group-summary-row > .data-table-row-reorder-col + :is(td, th),
.data-table-section-summary-row > .data-table-row-reorder-col + :is(td, th),
.data-table-group-summary-row > .data-table-row-reorder-col + .data-table-select-col + :is(td, th),
.data-table-section-summary-row > .data-table-row-reorder-col + .data-table-select-col + :is(td, th) {
  padding-left: calc(8px + var(--data-table-group-offset-size, 0px));
}

.data-table-group-summary-row > :is(td, th):first-child,
.data-table-section-summary-row > :is(td, th):first-child {
  border-left: 2px solid var(--data-table-row-group-border, var(--panel-border-soft));
}

.data-table-group-summary-row > :is(td, th):last-child,
.data-table-section-summary-row > :is(td, th):last-child {
  border-right: 2px solid var(--data-table-row-group-border, var(--panel-border-soft));
}

.data-table tbody tr.is-row-grouped td,
.data-table tbody tr.is-row-grouped th[scope="row"] {
  background: var(--data-table-row-group-bg);
}

.data-table tbody tr.is-row-grouped .data-table-pinned-cell {
  background: var(--data-table-row-group-bg);
}

.data-table-striped tbody tr.is-row-grouped.is-striped-row td,
.data-table-striped tbody tr.is-row-grouped.is-striped-row th[scope="row"],
.data-table-striped tbody tr.is-row-grouped.is-striped-row .data-table-pinned-cell {
  background: color-mix(in oklab, var(--data-table-row-group-bg) 84%, var(--panel-alt));
}

.data-table tbody tr.is-row-grouped:hover td,
.data-table tbody tr.is-row-grouped:hover th[scope="row"],
.data-table tbody tr.is-row-grouped:hover .data-table-pinned-cell {
  background: var(--data-table-row-group-hover-bg, var(--data-table-row-group-bg));
}

.data-table tbody tr.is-row-group-single td,
.data-table tbody tr.is-row-group-single th[scope="row"],
.data-table tbody tr.is-row-group-start td,
.data-table tbody tr.is-row-group-start th[scope="row"] {
  border-top: 1px solid var(--data-table-row-group-border);
}

.data-table tbody tr.is-row-group-single td,
.data-table tbody tr.is-row-group-single th[scope="row"],
.data-table tbody tr.is-row-group-end td,
.data-table tbody tr.is-row-group-end th[scope="row"] {
  border-bottom-color: var(--data-table-row-group-border);
}

.data-table tbody tr.is-row-grouped > :is(td, th[scope="row"]):first-child {
  border-left: 2px solid var(--data-table-row-group-border);
}

.data-table tbody tr.is-row-grouped > :is(td:not(.data-table-select-col):not(.data-table-row-reorder-col), th[scope="row"]):first-child,
.data-table tbody tr.is-row-grouped > .data-table-select-col + :is(td, th[scope="row"]),
.data-table tbody tr.is-row-grouped > .data-table-row-reorder-col + :is(td, th[scope="row"]),
.data-table tbody tr.is-row-grouped > .data-table-row-reorder-col + .data-table-select-col + :is(td, th[scope="row"]) {
  padding-left: calc(8px + var(--data-table-group-offset-size, 0px));
}

.data-table tbody tr.is-row-grouped > :is(td, th[scope="row"]):last-child {
  border-right: 2px solid var(--data-table-row-group-border);
}

.data-table-demo-state {
  margin-top: 12px;
  border: 1px solid var(--panel-border-soft);
  border-radius: 8px;
  background: var(--panel-soft);
}

.data-table-demo-state summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 750;
}

.data-table-demo-state pre {
  max-height: 320px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-top: 1px solid var(--panel-border-soft);
  color: var(--muted);
  font-size: 0.76rem;
}

@media print {
  .data-table-toolbar,
  .data-table-demo-state,
  .data-table-footer {
    display: none !important;
  }

  .data-table-scroll-wrap {
    max-height: none !important;
    overflow: visible !important;
  }
}
.data-table-demo-settings {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in oklab, var(--panel-alt) 46%, transparent);
}

.data-table-demo-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.data-table-demo-settings-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  align-items: start;
}

.data-table-demo-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.data-table-demo-settings .switch-control {
  align-items: center;
}

.data-table-demo-settings .switch-control .selection-control-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  min-width: 0;
}

.data-table-demo-settings .switch-control .selection-control-copy small {
  color: var(--muted);
  font-size: 0.76rem;
}

.data-table-demo-variants {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: 14px;
  align-items: start;
}

.data-table-demo-variant {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding-top: 2px;
}

.data-table-demo-variant-wide {
  grid-column: 1 / -1;
}

.data-table-demo-dialog-launch {
  align-content: start;
  justify-items: start;
}

.data-table-demo-variant-copy {
  max-width: 60ch;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.data-table-demo-group-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 340px);
}

.data-table-demo-group-search {
  width: 160px;
}

.data-table-demo-group-status {
  width: 136px;
}

.data-table-demo-dialog-table,
.data-table-demo-full-width-root,
.data-table-demo-full-width-shell {
  width: 100%;
}

.data-table-demo-full-width-shell {
  display: flex;
  align-self: stretch;
}

.data-table-demo-full-width-shell .data-table-scroll-wrap {
  width: 100%;
}

@media (max-width: 720px) {
  .data-table-demo-variants {
    grid-template-columns: minmax(0, 1fr);
  }

  .data-table-demo-settings-actions {
    justify-content: flex-start;
  }
}
.data-table-column-menu {
  position: relative;
}

.data-table-column-trigger {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--panel-border-soft);
  background: var(--panel-alt);
  color: var(--accent-3);
  cursor: pointer;
  font-size: 0.81rem;
  font-weight: 700;
}

.data-table-column-trigger:hover,
.data-table-column-trigger[data-state="open"] {
  border-color: color-mix(in oklab, var(--accent) 34%, var(--panel-border-soft));
  background: color-mix(in oklab, var(--accent) 10%, var(--panel-alt));
}

.data-table-column-panel {
  --dropdown-panel-max-width: min(320px, calc(100vw - 24px));
  position: fixed;
  z-index: 65;
  width: -moz-max-content;
  width: max-content;
  min-width: min(max(var(--dropdown-trigger-width, 0px), 14rem), var(--dropdown-panel-max-width));
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.data-table-column-panel-content {
  display: grid;
  gap: 4px;
}

.data-table-column-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--accent-3);
  font-size: 0.84rem;
  font-weight: 650;
}

.data-table-column-option:hover {
  background: var(--panel-alt);
}

.data-table-select-col {
  width: 36px;
  text-align: center;
  vertical-align: middle;
}

.data-table-density-compact .data-table-select-col {
  width: 32px;
}

.data-table-density-spacious .data-table-select-col {
  width: 40px;
}

.data-table-row-reorder-col {
  width: 36px;
  text-align: center;
  vertical-align: middle;
}

.data-table-density-compact .data-table-row-reorder-col {
  width: 32px;
}

.data-table-density-spacious .data-table-row-reorder-col {
  width: 40px;
}

.data-table-row-reorder-handle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: grab;
}

.data-table-density-compact .data-table-row-reorder-handle {
  width: 22px;
  height: 22px;
  min-height: 22px;
}

.data-table-density-spacious .data-table-row-reorder-handle {
  width: 30px;
  height: 30px;
  min-height: 30px;
}

.data-table-row-reorder-handle:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.data-table-row-reorder-handle:not(:disabled):hover,
.data-table-row-reorder-handle:not(:disabled):focus-visible {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  outline: none;
}

.data-table-row-reorder-handle:not(:disabled):active {
  cursor: grabbing;
}

.data-table-row-reorder-grip {
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}

.data-table tbody tr.is-row-drop-target td,
.data-table tbody tr.is-row-drop-target th[scope="row"] {
  box-shadow: inset 0 2px 0 var(--accent);
}

.data-table-select-control {
  display: inline-grid;
  place-items: center;
  width: 100%;
}

button.action-pill.data-table-select-toggle,
.data-table-select-toggle {
  list-style: none;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  margin: 0 auto;
  padding: 0;
  box-shadow: none;
  transform: none;
}

.data-table-density-compact button.action-pill.data-table-select-toggle,
.data-table-density-compact .data-table-select-toggle {
  width: 24px;
  height: 24px;
  min-height: 24px;
}

.data-table-density-spacious button.action-pill.data-table-select-toggle,
.data-table-density-spacious .data-table-select-toggle {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

button.action-pill.data-table-select-toggle .ui-button-icon .app-icon,
button.action-pill.data-table-select-toggle .ui-button-icon svg,
.data-table-select-toggle .ui-button-icon .app-icon,
.data-table-select-toggle .ui-button-icon svg {
  width: 14px;
  height: 14px;
}

button.action-pill.data-table-select-toggle:hover,
.data-table-select-toggle:hover,
button.action-pill.data-table-select-toggle:focus-visible,
.data-table-select-toggle:focus-visible,
button.action-pill.data-table-select-toggle.is-mixed,
.data-table-select-toggle.is-mixed {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

button.action-pill.data-table-select-toggle.is-all,
.data-table-select-toggle.is-all {
  color: var(--ok);
  background: color-mix(in oklab, var(--ok) 11%, transparent);
}

button.action-pill.data-table-select-toggle:disabled,
.data-table-select-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.data-table-checkbox {
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 0 auto;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.data-table-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.ui-breadcrumbs {
  max-width: 100%;
  color: var(--text, var(--ink));
}

.ui-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-breadcrumb-list-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.ui-breadcrumb-item-control {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 18rem;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--type-size-sm, 0.875rem);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}

a.ui-breadcrumb-item-control,
button.ui-breadcrumb-item-control {
  cursor: pointer;
}

.ui-breadcrumb-item-control:is(:hover, :focus-visible):not(.is-disabled) {
  color: var(--color-primary, var(--accent));
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--ring, color-mix(in oklab, var(--accent) 24%, transparent));
}

.ui-breadcrumb-item-control.is-current {
  color: var(--text, var(--ink));
}

.ui-breadcrumb-item-control.is-disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.ui-breadcrumb-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-breadcrumb-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: currentColor;
}

.ui-breadcrumb-separator {
  color: var(--muted);
  opacity: 0.72;
}

.ui-stepper {
  max-width: 100%;
  color: var(--text, var(--ink));
}

.ui-stepper-list {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-stepper-horizontal .ui-stepper-list {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.ui-stepper-vertical .ui-stepper-list {
  grid-template-columns: 1fr;
}

.ui-stepper-item {
  min-width: 0;
}

.ui-stepper-step-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.65rem;
  border: 1px solid var(--panel-border-soft, var(--border-subtle));
  border-radius: var(--radius-md, 10px);
  background: var(--surface-card, var(--panel));
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

button.ui-stepper-step-control {
  cursor: pointer;
}

.ui-stepper-step-control:is(:hover, :focus-visible):not(.is-disabled) {
  border-color: color-mix(in oklab, var(--color-primary, var(--accent)) 42%, var(--panel-border-soft, var(--border-subtle)));
  outline: none;
  box-shadow: 0 0 0 2px var(--ring, color-mix(in oklab, var(--accent) 24%, transparent));
}

.ui-stepper-step-control.is-current {
  border-color: color-mix(in oklab, var(--color-primary, var(--accent)) 54%, var(--panel-border-soft, var(--border-subtle)));
  background: color-mix(in oklab, var(--color-primary, var(--accent)) 8%, var(--surface-card, var(--panel)));
}

.ui-stepper-step-control.is-disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.ui-stepper-marker {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border-soft, var(--border-subtle));
  background: var(--panel-alt, color-mix(in oklab, var(--surface-card, var(--panel)) 84%, var(--color-primary, var(--accent))));
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.ui-stepper-step-control[data-state="current"] .ui-stepper-marker,
.ui-stepper-step-control[data-state="complete"] .ui-stepper-marker {
  border-color: color-mix(in oklab, var(--color-primary, var(--accent)) 54%, transparent);
  background: color-mix(in oklab, var(--color-primary, var(--accent)) 14%, var(--surface-card, var(--panel)));
  color: var(--color-primary, var(--accent));
}

.ui-stepper-step-control[data-state="error"] .ui-stepper-marker {
  border-color: color-mix(in oklab, var(--color-danger, var(--bad)) 54%, transparent);
  color: var(--color-danger, var(--bad));
}

.ui-stepper-step-control[data-state="warning"] .ui-stepper-marker {
  border-color: color-mix(in oklab, var(--warn) 54%, transparent);
  color: var(--warn);
}

.ui-stepper-copy {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.ui-stepper-label {
  min-width: 0;
  font-size: var(--type-size-sm, 0.9rem);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.ui-stepper-description,
.ui-stepper-optional,
.ui-stepper-disabled-reason {
  color: var(--muted);
  font-size: var(--type-size-xs, 0.75rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ui-wizard-shell {
  display: grid;
  gap: 1rem;
  min-width: 0;
  color: var(--text, var(--ink));
}

.ui-wizard-header,
.ui-wizard-footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  flex-wrap: wrap;
}

.ui-wizard-title-block {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.ui-wizard-title,
.ui-wizard-subtitle {
  margin: 0;
}

.ui-wizard-title {
  font-size: 1.1rem;
  line-height: 1.25;
}

.ui-wizard-subtitle {
  color: var(--muted);
  font-size: var(--type-size-sm, 0.9rem);
}

.ui-wizard-layout {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.ui-wizard-shell-vertical .ui-wizard-layout {
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
}

.ui-wizard-body {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--panel-border-soft, var(--border-subtle));
  border-radius: var(--radius-md, 10px);
  background: var(--surface-card, var(--panel));
}

.ui-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  color: var(--text, var(--ink));
}

.ui-toolbar-compact {
  gap: 0.5rem;
}

.ui-toolbar-slot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.ui-toolbar-wrap .ui-toolbar-slot {
  flex-wrap: wrap;
}

.ui-toolbar-nowrap .ui-toolbar-slot {
  flex-wrap: nowrap;
}

.ui-toolbar-slot-center {
  justify-content: center;
}

.ui-toolbar-slot-right {
  justify-content: flex-end;
}

.ui-toolbar-slot.is-empty {
  min-height: 1px;
}

.ui-toolbar-action {
  flex: 0 1 auto;
}

.ui-context-menu-target {
  display: inline-block;
  max-width: 100%;
}

.ui-context-menu-target:focus-visible {
  outline: 2px solid var(--ring, color-mix(in oklab, var(--accent) 24%, transparent));
  outline-offset: 2px;
}

.ui-context-menu-panel {
  --dropdown-panel-max-width: min(22rem, calc(100vw - 16px));
  position: fixed;
  z-index: 1000;
  min-width: min(max(var(--dropdown-trigger-width, 0px), 14rem), var(--dropdown-panel-max-width));
}

.ui-context-menu-list {
  min-width: inherit;
  max-width: inherit;
}

@media (max-width: 720px) {
  .ui-wizard-shell-vertical .ui-wizard-layout,
  .ui-toolbar {
    grid-template-columns: 1fr;
  }

  .ui-toolbar-slot,
  .ui-toolbar-slot-center,
  .ui-toolbar-slot-right {
    justify-content: flex-start;
  }
}
.pagination-controls {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 2px;
}

.pagination-page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.pagination-page-size select {
  min-width: 76px;
}

.pagination-status {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

.ui-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  max-width: 100%;
}

.ui-tabs::-webkit-scrollbar {
  height: 6px;
}

.ui-tabs-underline {
  border-bottom: 1px solid var(--panel-border-soft);
}

.ui-tabs-segmented {
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-lg, 14px);
  background: var(--panel-alt);
}

.ui-tab-wrap,
.ui-tabs > .tooltip-wrap {
  flex: 0 0 auto;
}

.ui-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: var(--control-height-lg, 44px);
  padding: 10px 14px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease), background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease), border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

button.ui-tab {
  background: transparent;
}

.ui-tab-underline {
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.ui-tab-segmented {
  min-height: var(--control-height-md, 40px);
  border-radius: var(--radius-md, 10px);
  background: transparent;
}

.ui-tab:hover:not(.is-disabled) {
  color: var(--accent);
}

.ui-tab.is-active {
  color: var(--accent-3);
}

.ui-tab-underline.is-active {
  background: var(--panel);
  border-color: var(--panel-border-soft);
}

.ui-tab-underline.is-active::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

.ui-tab-segmented.is-active {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border-color: color-mix(in oklab, var(--accent) 34%, transparent);
}

.ui-tab:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

.ui-tab.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.ui-tab-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ui-tab-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: currentColor;
}

.ui-tab-copy {
  display: inline-grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.ui-tab-label,
.ui-tab-description {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-tab-description {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.ui-tab-detail {
  border: 1px solid var(--panel-border-soft);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.toast-viewport {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
}

.toast {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-duration-slow, 220ms) var(--motion-ease-enter, ease), transform var(--motion-duration-slow, 220ms) var(--motion-ease-enter, ease);
}

.toast-leaving {
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  pointer-events: none;
}

.toast-body {
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 12px 12px;
  cursor: pointer;
  min-height: 44px;
}

.toast-title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}

.toast-message {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

.toast-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.toast-close:hover {
  background: var(--panel-alt);
  color: var(--text);
}

.toast-ok {
  border-color: rgba(76, 175, 80, 0.45);
}

.toast-fail {
  border-color: rgba(244, 67, 54, 0.5);
}

.toast-info {
  border-color: var(--panel-border);
}
.input-control {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  --input-control-leading-icon-gap: 11px;
  --input-control-leading-icon-size: 14px;
  --input-control-leading-icon-start: 12px;
  --input-control-pad-left: 10px;
  --input-control-pad-right: 10px;
}

.input-control::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md, 8px) + 2px);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
  transition:
    border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    opacity var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    transform var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.input-control:focus-within::after {
  border-color: var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  opacity: 0.72;
  transform: scale(1);
}

.input-leading-icon {
  position: absolute;
  inset-inline-start: var(--input-control-leading-icon-start);
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
  transition:
    color var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
    opacity var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
    transform var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.input-leading-icon svg {
  width: var(--input-control-leading-icon-size);
  height: var(--input-control-leading-icon-size);
}

.input-control input {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  min-height: var(--control-height-sm, 36px);
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  outline: none;
  padding-block: 7px;
  padding-inline: var(--input-control-pad-left) var(--input-control-pad-right);
  transition:
    border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    transform var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.input-control input:hover:not(:disabled) {
  border-color: var(--border-strong, var(--panel-border));
}

.input-control input:focus-visible {
  border-color: var(--accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  transform: translateY(calc(var(--motion-translate-hover, -0.5px) * 0.35));
}

.input-control:focus-within .input-leading-icon {
  color: var(--accent);
  opacity: 1;
  transform: translateY(calc(var(--motion-translate-hover, -0.5px) * 0.35));
}

.input-control input:disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.input-control input.invalid,
.input-control input[aria-invalid="true"] {
  border-color: color-mix(in oklab, var(--bad) 68%, var(--panel-border-soft));
}

.input-control-has-leading-icon input {
  --input-control-pad-left: calc(var(--input-control-leading-icon-start) + var(--input-control-leading-icon-size) + var(--input-control-leading-icon-gap));
}

.input-actions {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--input-actions-gap, 3px);
  transform: translateY(-50%);
}

.input-actions-stacked {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: var(--input-actions-stacked-width, 20px);
  height: 30px;
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
}

.input-actions-stacked > .tooltip-wrap {
  display: grid;
  min-height: 0;
}

.input-actions-autohide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.96);
  transition: opacity var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease), transform var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.input-control:not(.is-disabled):hover .input-actions-autohide,
.input-control:not(.is-disabled):focus-within .input-actions-autohide {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.input-action {
  width: var(--input-action-size, 30px);
  height: var(--input-action-size, 30px);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent-3);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition:
    background var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
    border-color var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
    color var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
    transform var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.input-action-clear {
  color: color-mix(in oklab, var(--bad) 72%, var(--accent-3));
}

.input-action-undo {
  color: var(--accent-3);
}

.input-action svg {
  width: 14px;
  height: 14px;
}

.input-actions-stacked .input-action {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.input-actions-stacked .input-action svg {
  width: 10px;
  height: 10px;
}

.input-actions-tight:not(.input-actions-stacked) .input-action svg {
  width: 12px;
  height: 12px;
}

.input-action:hover {
  transform: translateY(var(--motion-translate-hover, -0.5px)) scale(var(--motion-scale-hover, 1.01));
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-color: transparent;
  box-shadow: none;
}

.input-action:active:not(:disabled) {
  transform: translateY(0) scale(0.94);
}

.input-action-clear:hover {
  color: var(--bad);
  background: color-mix(in oklab, var(--bad) 10%, transparent);
}

.input-action-undo:hover {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.input-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.clearable-textarea {
  width: 100%;
}

.clearable-textarea-actions {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  min-height: var(--control-height-sm, 36px);
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  background: var(--surface-card-muted, var(--panel-alt));
  padding: 3px;
}

.clearable-textarea-actions .tooltip-wrap {
  display: grid;
}

.clearable-textarea-actions .input-action {
  width: 30px;
  height: 30px;
}

.clearable-textarea-field {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: var(--control-height-sm, 36px);
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  outline: none;
  padding: 8px 10px;
  resize: vertical;
  scrollbar-gutter: stable;
  transition:
    border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    transform var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.clearable-textarea-field:hover:not(:disabled) {
  border-color: var(--border-strong, var(--panel-border));
}

.clearable-textarea-field:focus-visible {
  border-color: var(--accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  transform: translateY(calc(var(--motion-translate-hover, -0.5px) * 0.35));
}

.clearable-textarea-field:disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.expandable-textarea-control {
  position: relative;
  min-width: 0;
}

.expandable-textarea-has-actions textarea {
  padding-inline-end: 38px;
}

.expandable-textarea-actions {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  display: flex;
}

.expandable-textarea-control summary {
  display: flex;
  align-items: center;
  min-height: var(--control-height-sm, 36px);
  min-width: 0;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-alt);
  color: var(--ink);
  cursor: text;
  list-style: none;
  padding: 7px 8px;
}

.expandable-textarea-control summary::-webkit-details-marker {
  display: none;
}

.expandable-textarea-control summary > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expandable-textarea-control[open] summary {
  display: none;
}

.expandable-textarea-control textarea {
  min-width: 0;
  width: 100%;
  min-height: var(--control-height-sm, 36px);
  resize: none;
  scrollbar-gutter: stable;
}
.saved-views-menu {
  position: relative;
}

.saved-views-trigger {
  border-radius: 999px;
  border: 1px solid var(--ui-border, var(--panel-border));
  background: var(--ui-bg, var(--panel-alt));
  color: var(--ui-fg, var(--accent-3));
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 700;
}

.saved-views-panel {
  --dropdown-panel-max-width: min(680px, calc(100vw - 24px));
  position: fixed;
  z-index: 60;
  width: -moz-max-content;
  width: max-content;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.saved-views-selector {
  min-width: min(18rem, 100%);
}

.command-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: min(12vh, 96px) 18px 18px;
  background: rgba(13, 16, 20, 0.48);
  backdrop-filter: blur(8px);
}

.command-palette {
  width: min(720px, 100%);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--panel-border-strong, var(--panel-border));
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.command-palette-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--panel-border-soft);
}

.command-palette-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
}

.command-palette-list {
  max-height: min(520px, 58vh);
  overflow: auto;
  padding: 8px;
}

.command-palette-section {
  display: grid;
  gap: 4px;
  padding: 4px 0;
}

.command-palette-section-title {
  padding: 8px 10px 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.command-palette-item {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.command-palette-item.is-active,
.command-palette-item:hover {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--panel-border-soft));
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.command-palette-item.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.command-palette-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--panel-alt);
  color: var(--accent-3);
}

.command-palette-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.command-palette-label {
  font-size: 0.92rem;
  font-weight: 750;
}

.command-palette-description,
.command-palette-empty {
  color: var(--muted);
  font-size: 0.82rem;
}

.command-palette-empty {
  padding: 28px 12px;
  text-align: center;
}

.command-palette kbd,
.keyboard-shortcuts-list kbd {
  min-width: 26px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid var(--panel-border-soft);
  background: var(--panel-alt);
  color: var(--accent-3);
  font-family: var(--font-mono), "SFMono-Regular", monospace;
  font-size: 0.72rem;
  font-weight: 800;
}

.keyboard-shortcuts-list {
  display: grid;
  gap: 16px;
}

.keyboard-shortcuts-group {
  display: grid;
  gap: 8px;
}

.keyboard-shortcut-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border-soft);
  border-radius: 12px;
  background: var(--panel-alt);
}

.keyboard-shortcut-label {
  font-weight: 750;
  color: var(--accent-3);
}

.keyboard-shortcut-description {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.83rem;
}

.keyboard-shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.checkbox-control {
  display: inline-grid;
  gap: 2px;
  min-width: 0;
  color: var(--text);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.checkbox-control-click {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.checkbox-control.is-disabled {
  opacity: 0.62;
}

.checkbox-control.is-disabled .checkbox-control-click {
  cursor: not-allowed;
}

.checkbox-control-box {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
}

.checkbox-control-box input {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.checkbox-control-indicator {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-card-muted, var(--panel-alt));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, white 4%, transparent);
  pointer-events: none;
  transition: border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease), background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease), box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.checkbox-control:not(.is-disabled) .checkbox-control-click:hover .checkbox-control-indicator {
  border-color: color-mix(in oklab, var(--color-primary, var(--accent-2)) 44%, var(--border-strong, var(--panel-border)));
  background: color-mix(in oklab, var(--color-primary, var(--accent-2)) 8%, var(--surface-card-muted, var(--panel-alt)));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, white 8%, transparent),
    0 0 0 3px color-mix(in oklab, var(--color-primary, var(--accent-2)) 14%, transparent);
}

.checkbox-control:not(.is-disabled) .checkbox-control-click:hover input:checked + .checkbox-control-indicator,
.checkbox-control:not(.is-disabled) .checkbox-control-click:hover input:indeterminate + .checkbox-control-indicator {
  border-color: color-mix(in oklab, var(--color-primary, var(--accent-2)) 82%, transparent);
  background: color-mix(in oklab, var(--color-primary, var(--accent-2)) 88%, var(--ink));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, white 14%, transparent),
    0 0 0 3px color-mix(in oklab, var(--color-primary, var(--accent-2)) 20%, transparent);
}

.checkbox-control-box input:checked + .checkbox-control-indicator,
.checkbox-control-box input:indeterminate + .checkbox-control-indicator {
  border-color: color-mix(in oklab, var(--color-primary, var(--accent-2)) 70%, transparent);
  background: var(--color-primary, var(--accent-2));
}

.checkbox-control-box input:checked + .checkbox-control-indicator::after {
  display: block;
  width: 8px;
  height: 4px;
  border: 2px solid var(--panel);
  border-top: 0;
  border-right: 0;
  content: "";
  transform: translateY(-1px) rotate(-45deg);
}

.checkbox-control-box input:indeterminate + .checkbox-control-indicator::after {
  display: block;
  width: 8px;
  height: 2px;
  border-radius: 99px;
  background: var(--panel);
  content: "";
}

.checkbox-control-box input:focus-visible + .checkbox-control-indicator {
  outline: 2px solid color-mix(in oklab, var(--color-primary, var(--accent-2)) 34%, transparent);
  outline-offset: 2px;
}

.checkbox-control-label,
.checkbox-control-description {
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox-control-label {
  color: var(--text);
  font-weight: 750;
}

.checkbox-control-description {
  color: var(--muted);
  font-size: 0.78rem;
  margin-left: 26px;
}

.color-control {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.color-control-picker {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card-muted, var(--panel-alt));
  cursor: pointer;
  padding: 3px;
}

.color-control-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-control-picker::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--radius-md, 8px) - 3px);
}

.color-control-picker::-moz-color-swatch {
  border: 0;
  border-radius: calc(var(--radius-md, 8px) - 3px);
}

.color-control-picker:hover:not(:disabled) {
  border-color: var(--border-strong, var(--panel-border));
}

.color-control-picker:focus-visible {
  border-color: var(--accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  outline: none;
}

.color-control-picker:disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.color-control-compact {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 5px;
  width: min(100%, 320px);
}

.color-control-compact.color-control-has-prefix {
  grid-template-columns: minmax(0, auto) 18px minmax(0, 1fr);
}

.color-control-prefix {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-control-compact .color-control-picker {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  border-radius: 5px;
  padding: 2px;
}

.color-control-compact .color-control-picker::-webkit-color-swatch {
  border-radius: 3px;
}

.color-control-compact .color-control-picker::-moz-color-swatch {
  border-radius: 3px;
}

.color-control-compact .color-control-value.input-control input {
  min-height: 24px;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.72rem;
  padding-block: 3px;
}

.color-control-compact .color-control-value.input-control .input-prefix {
  font-size: 0.72rem;
  inset-block-end: 6px;
}

.color-control-readonly {
  align-items: center;
}

.color-control-static-swatch {
  display: block;
  pointer-events: none;
}

.color-control-static-value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.color-control-static-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.color-control-value.input-control {
  min-width: 0;
}

.color-control-value.input-control input {
  min-width: 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
}

.input-control {
  --input-control-action-gap: 0px;
  --input-control-action-width: 0px;
  --input-control-prefix-gap: 0px;
  --input-control-prefix-width: 0px;
  --input-control-suffix-gap: 0px;
  --input-control-suffix-width: 0px;
}

.input-control-has-prefix {
  --input-control-prefix-gap: 8px;
}

.input-control-has-suffix {
  --input-control-suffix-gap: 8px;
}

.input-control-has-actions {
  --input-control-action-gap: 8px;
}

.input-control-has-prefix input {
  --input-control-pad-left: calc(var(--input-control-prefix-width) + var(--input-control-prefix-gap) + 10px);
}

.input-control-has-leading-icon.input-control-has-prefix input {
  --input-control-pad-left: calc(
    var(--input-control-leading-icon-start) + var(--input-control-leading-icon-size) + var(--input-control-leading-icon-gap) +
      var(--input-control-prefix-width) + var(--input-control-prefix-gap)
  );
}

.input-control-has-suffix input,
.input-control-has-actions input {
  --input-control-pad-right: calc(
    10px + var(--input-control-suffix-width) + var(--input-control-suffix-gap) + var(--input-control-action-width) +
      var(--input-control-action-gap)
  );
}

.input-prefix,
.input-suffix {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  inset-block-end: 9px;
}

.input-prefix {
  inset-inline-start: 10px;
}

.input-control-has-leading-icon .input-prefix {
  inset-inline-start: calc(var(--input-control-leading-icon-start) + var(--input-control-leading-icon-size) + var(--input-control-leading-icon-gap));
}

.input-suffix {
  inset-inline-end: calc(10px + var(--input-control-action-width, 0px) + var(--input-control-action-gap, 0px));
}

.input-control-has-suffix .input-actions {
  inset-inline-end: 4px;
}

.text-input-control {
  --text-input-prefix-start: var(--input-control-pad-left);
  --text-input-value-start: var(--input-control-pad-left);
  --text-input-value-width: 1ch;
}

.text-input-control.input-control-has-leading-icon {
  --text-input-prefix-start: calc(var(--input-control-leading-icon-start) + var(--input-control-leading-icon-size) + var(--input-control-leading-icon-gap));
  --text-input-value-start: var(--text-input-prefix-start);
}

.text-input-control.input-control-has-prefix {
  --input-control-prefix-gap: 0px;
  --text-input-value-start: calc(var(--text-input-prefix-start) + var(--input-control-prefix-width) + var(--input-control-prefix-gap));
}

.text-input-control.input-control-has-suffix {
  --input-control-suffix-gap: 0px;
}

.text-input-control.input-control .input-prefix {
  inset-inline-start: var(--text-input-prefix-start);
}

.text-input-control.input-control .input-suffix {
  inset-inline-start: calc(var(--text-input-value-start) + var(--text-input-value-width));
  inset-inline-end: auto;
}

.number-input-control.input-control {
  display: inline-flex;
  max-width: 100%;
  --number-input-auto-min-width: 4.5rem;
  --number-input-action-width: 0px;
  --number-input-action-gap: 0px;
  --number-input-prefix-width: 0ch;
  --number-input-prefix-gap: 0ch;
  --number-input-suffix-width: 0ch;
  --number-input-suffix-gap: 0ch;
  --number-input-end-stepper-width: var(--number-input-stepper-width);
  --number-input-inline-stepper-gap: 0px;
  --number-input-inline-start-stepper-width: 0px;
  --number-input-inline-start-stepper-end: calc(
    var(--input-control-pad-right) + var(--number-input-value-width) + var(--number-input-prefix-width) +
      var(--number-input-prefix-gap) + var(--number-input-inline-stepper-gap)
  );
  --number-input-stepper-button-width: 18px;
  --number-input-stepper-width: 18px;
  --number-input-stepper-right: 2px;
  --number-input-value-width: 2ch;
  --number-input-end-gutter: calc(
    var(--number-input-stepper-right) + var(--number-input-end-stepper-width) + var(--number-input-action-width) + var(--number-input-action-gap)
  );
  --input-control-pad-right: calc(var(--number-input-end-gutter) + var(--number-input-suffix-width) + var(--number-input-suffix-gap));
}

:where(.number-input-control.input-control) {
  width: max(
    var(--number-input-auto-min-width),
    calc(
      var(--input-control-pad-left) + var(--number-input-inline-start-stepper-width) + var(--number-input-inline-stepper-gap) +
        var(--number-input-prefix-width) + var(--number-input-prefix-gap) + var(--number-input-value-width) + var(--input-control-pad-right)
    )
  );
}

.number-input-control.input-control .input-prefix {
  inset-inline-end: calc(var(--input-control-pad-right) + var(--number-input-value-width) + var(--number-input-prefix-gap));
  inset-inline-start: auto;
}

.number-input-control.input-control .input-suffix {
  inset-inline-end: var(--number-input-end-gutter);
  inset-inline-start: auto;
}

.number-input-control.input-control .input-actions {
  left: auto;
  right: auto;
  inset-inline-end: calc(var(--number-input-stepper-right) + var(--number-input-end-stepper-width) + var(--number-input-action-gap));
}

.number-input-control.input-control input {
  --input-control-pad-left: 10px;
  --input-control-pad-right: calc(var(--number-input-end-gutter) + var(--number-input-suffix-width) + var(--number-input-suffix-gap));
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding-inline-end: var(--input-control-pad-right);
  padding-inline-start: var(--input-control-pad-left);
  text-align: end;
}

.number-input-control.input-control .input-leading-icon {
  inset-inline-start: var(--input-control-leading-icon-start);
}

.number-input-control.input-control-has-leading-icon input {
  --input-control-pad-left: calc(var(--input-control-leading-icon-start) + var(--input-control-leading-icon-size) + var(--input-control-leading-icon-gap));
}

.number-input-control.input-control input::-webkit-inner-spin-button,
.number-input-control.input-control input::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}

.number-input-stepper {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--number-input-stepper-right);
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  width: var(--number-input-stepper-width);
  height: calc(var(--control-height-sm, 36px) - 4px);
  opacity: 0;
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
  pointer-events: none;
  transform: translateY(-50%) scale(0.96);
  transition: opacity var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease), transform var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.number-input-control.number-input-stepper-horizontal {
  --number-input-end-stepper-width: var(--number-input-stepper-button-width);
  --number-input-inline-stepper-gap: 2px;
  --number-input-inline-start-stepper-width: var(--number-input-stepper-button-width);
}

.number-input-control.number-input-stepper-horizontal .number-input-stepper {
  inset-inline-start: 0;
  inset-inline-end: 0;
  display: block;
  width: auto;
  height: 30px;
  border-radius: 0;
  overflow: visible;
}

.number-input-control:not(.is-disabled):hover .number-input-stepper,
.number-input-control:not(.is-disabled):focus-within .number-input-stepper {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.number-input-stepper button {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  pointer-events: none;
}

.number-input-control:not(.is-disabled):hover .number-input-stepper button,
.number-input-control:not(.is-disabled):focus-within .number-input-stepper button {
  pointer-events: auto;
}

.number-input-control.number-input-stepper-horizontal .number-input-stepper button {
  position: absolute;
  top: 0;
  width: var(--number-input-stepper-button-width);
  border-radius: var(--radius-sm, 6px);
}

.number-input-control.number-input-stepper-horizontal .number-input-stepper button:first-child {
  inset-inline-end: var(--number-input-inline-start-stepper-end);
}

.number-input-control.number-input-stepper-horizontal .number-input-stepper button:last-child {
  inset-inline-end: var(--number-input-stepper-right);
}

.number-input-stepper button:hover:not(:disabled) {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
}

.number-input-stepper button:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent) 28%, transparent);
  outline-offset: -2px;
}

.number-input-stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.number-input-stepper svg {
  width: 12px;
  height: 12px;
}

.number-input-control.input-control-has-prefix {
  --number-input-prefix-gap: 0.6ch;
}

.number-input-control.input-control-has-actions {
  --number-input-action-gap: 0px;
}

.number-input-control.number-input-stepper-horizontal.input-control-has-actions {
  --number-input-action-gap: 2px;
}

.number-input-control.input-control-has-leading-icon {
  --input-control-pad-left: calc(var(--input-control-leading-icon-start) + var(--input-control-leading-icon-size) + var(--input-control-leading-icon-gap));
}

.number-input-control.input-control-has-suffix {
  --number-input-suffix-gap: 0.85ch;
}
.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  isolation: isolate;
  transition:
    filter var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    transform var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.input-group:focus-within {
  filter: drop-shadow(0 8px 18px color-mix(in oklab, var(--accent) 8%, transparent));
  transform: translateY(calc(var(--motion-translate-hover, -0.5px) * 0.25));
}

.ui-split-button.input-group:focus-within,
.input-group-field .input-group:focus-within {
  filter: none;
}

.input-group-multiline {
  align-items: stretch;
}

.input-group > * {
  min-width: 0;
}

.input-group > * + * {
  margin-inline-start: -1px;
}

.input-group > :first-child,
.input-group > :first-child:is(input, textarea, select, button, .ui-button),
.input-group > :first-child:is(.input-control, .text-input-control, .number-input-control) > input,
.input-group > :first-child:is(.select-control) .select-control-trigger,
.input-group > :first-child:is(.tooltip-wrap) > :is(button, .ui-button) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.input-group > :last-child,
.input-group > :last-child:is(input, textarea, select, button, .ui-button),
.input-group > :last-child:is(.input-control, .text-input-control, .number-input-control) > input,
.input-group > :last-child:is(.select-control) .select-control-trigger,
.input-group > :last-child:is(.tooltip-wrap) > :is(button, .ui-button) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.input-group > :not(:first-child):not(:last-child),
.input-group > :not(:first-child):not(:last-child):is(input, textarea, select, button, .ui-button),
.input-group > :not(:first-child):not(:last-child):is(.input-control, .text-input-control, .number-input-control) > input,
.input-group > :not(:first-child):not(:last-child):is(.select-control) .select-control-trigger,
.input-group > :not(:first-child):not(:last-child):is(.tooltip-wrap) > :is(button, .ui-button) {
  border-radius: 0;
}

.input-group > :focus-within,
.input-group > .ui-button:focus-visible,
.input-group > button:focus-visible {
  position: relative;
  z-index: 2;
}

.input-group .input-control,
.input-group .text-input-control,
.input-group .number-input-control,
.input-group .select-control {
  flex: 1 1 auto;
  width: auto;
}

.input-group .input-control input,
.input-group textarea {
  min-height: var(--control-height-sm, 36px);
}

.input-group .ui-button,
.input-group > button {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: var(--control-height-sm, 36px);
  white-space: nowrap;
}

.input-group-addon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-sm, 36px);
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--muted);
  padding-inline: 10px;
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.input-group-addon svg {
  width: 14px;
  height: 14px;
}

.input-group-addon .checkbox-control-label {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.input-group-addon[data-state="disabled"],
.input-group[data-state="disabled"] .input-group-addon {
  cursor: not-allowed;
  opacity: 0.66;
}

.input-group-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.input-group-label {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.input-group-description,
.input-group-error {
  font-size: 0.75rem;
  line-height: 1.35;
}

.input-group-description {
  color: var(--muted);
}

.input-group-error {
  color: var(--bad);
}

.input-group-field.is-invalid .input-group-label {
  color: var(--bad);
}

.input-group[data-state="invalid"] .input-group-addon,
.input-group[aria-invalid="true"] .input-group-addon {
  border-color: color-mix(in oklab, var(--bad) 68%, var(--panel-border-soft));
}

.input-group-multiline textarea {
  resize: vertical;
}

.input-group .color-control-picker {
  flex: 0 0 var(--control-height-sm, 36px);
  height: var(--control-height-sm, 36px);
  min-height: var(--control-height-sm, 36px);
  min-width: var(--control-height-sm, 36px);
  width: var(--control-height-sm, 36px);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.color-control > .input-group {
  grid-column: 1 / -1;
}

.color-control-compact .input-group-addon {
  flex: 0 1 auto;
  min-height: 24px;
  padding-inline: 6px;
  font-size: 0.72rem;
}

.color-control-compact .input-group {
  flex-wrap: nowrap;
}

.color-control-compact .input-group > .color-control-picker {
  align-self: center;
  flex: 0 0 18px;
  height: 18px;
  margin-inline-start: 0;
  min-height: 18px;
  min-width: 18px;
  width: 18px;
}

.color-control-compact .input-group > .color-control-value {
  flex: 1 1 auto;
  margin-inline-start: 0;
}

.float-label .input-group {
  align-self: stretch;
}

@media (max-width: 640px) {
  .input-group > * {
    flex: 1 1 auto;
  }

  .input-group-addon {
    min-width: -moz-max-content;
    min-width: max-content;
  }
}
.field-readout {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--control-height-sm, 36px);
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--ink);
  padding-block: 7px;
  padding-inline: 10px;
  font-size: 0.88rem;
  line-height: 1.2;
}

.field-readout[data-state="disabled"] {
  opacity: 0.66;
}

.field-readout[data-state="invalid"] {
  border-color: color-mix(in oklab, var(--bad) 68%, var(--panel-border-soft));
}
.path-readout,
.file-picker-value {
  min-width: 0;
  width: 100%;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.path-readout-value,
.file-picker-value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.path-readout-icon,
.file-picker-value .app-icon {
  color: var(--muted);
  flex: 0 0 auto;
}

.path-readout-text,
.file-picker-value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.path-readout-value.is-empty,
.file-picker-value.is-empty {
  color: var(--muted);
  font-family: var(--font-sans, system-ui, sans-serif);
}

.file-picker-field-group {
  align-items: stretch;
}

.file-picker-value {
  min-height: var(--control-height-sm, 2.25rem);
  padding: 0 0.75rem;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card-muted, var(--panel-soft));
}

.file-picker-actions {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
}

.file-browser {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--panel) 90%, transparent);
  padding: 0.75rem;
}

.file-browser-toolbar,
.file-browser-controls,
.file-browser-actions,
.file-browser-roots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.file-browser-toolbar,
.file-browser-controls {
  flex-wrap: wrap;
  justify-content: space-between;
}

.file-browser-breadcrumbs {
  flex: 1 1 18rem;
  min-width: 0;
}

.file-browser-actions,
.file-browser-roots {
  flex-wrap: wrap;
}

.file-browser-controls .input-control {
  flex: 1 1 18rem;
  max-width: 26rem;
}

.file-browser-alert {
  border: 1px solid color-mix(in oklab, var(--warn, var(--accent)) 36%, var(--panel-border-soft));
  border-radius: var(--radius-sm);
  color: var(--warn, var(--accent));
  background: color-mix(in oklab, var(--warn, var(--accent)) 10%, transparent);
  padding: 0.5rem 0.75rem;
}

.file-browser-body {
  display: grid;
  grid-template-columns: minmax(14rem, 0.28fr) minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
}

.file-browser-tree,
.file-browser-listing {
  min-width: 0;
}

.file-browser-tree {
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-card-muted, var(--panel-soft));
  padding: 0.5rem;
  overflow: auto;
}

.file-browser-tree-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.file-browser-listing .ui-button {
  max-width: 100%;
}

.file-browser-mobile-tabs {
  display: none;
}

@media (max-width: 760px) {
  .file-browser-body {
    display: block;
  }

  .file-browser-mobile-tabs {
    display: flex;
  }

  .file-browser-tree,
  .file-browser-listing {
    display: none;
  }

  .file-browser-tree.is-mobile-active,
  .file-browser-listing.is-mobile-active {
    display: block;
  }
}
.action-group {
  --action-group-height: var(--control-height-md, 40px);
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
  isolation: isolate;
}

.action-group-wrap {
  flex-wrap: wrap;
  gap: 6px 0;
}

.action-group-sm {
  --action-group-height: var(--control-height-sm, 36px);
}

.action-group-md {
  --action-group-height: var(--control-height-md, 40px);
}

.action-group > * {
  min-width: 0;
}

.action-group > * + * {
  margin-inline-start: -1px;
}

.action-group > :is(.ui-button, button, select),
.action-group > .tooltip-wrap > :is(.ui-button, button),
.action-group > .ui-split-button :is(.ui-button, button),
.action-group-addon {
  min-height: var(--action-group-height);
}

.action-group > :is(.ui-button, button, select),
.action-group > .tooltip-wrap > :is(.ui-button, button),
.action-group > .ui-split-button > :is(.ui-button, button),
.action-group-addon {
  border-radius: 0;
}

.action-group > :first-child:is(.ui-button, button, select),
.action-group > :first-child.tooltip-wrap > :is(.ui-button, button),
.action-group > :first-child.ui-split-button > :first-child,
.action-group > :first-child.action-group-addon {
  border-start-start-radius: var(--radius-md, 10px);
  border-end-start-radius: var(--radius-md, 10px);
}

.action-group > :last-child:is(.ui-button, button, select),
.action-group > :last-child.tooltip-wrap > :is(.ui-button, button),
.action-group > :last-child.ui-split-button > :last-child,
.action-group > :last-child.action-group-addon {
  border-start-end-radius: var(--radius-md, 10px);
  border-end-end-radius: var(--radius-md, 10px);
}

.action-group > :focus-within,
.action-group > :is(.ui-button, button, select):focus-visible,
.action-group > .tooltip-wrap:has(:focus-visible) {
  position: relative;
  z-index: 2;
}

.action-group-addon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--muted);
  padding-inline: 10px;
  font-size: var(--type-size-xs, 0.78rem);
  font-weight: var(--type-weight-bold, 800);
  line-height: 1;
  white-space: nowrap;
}

.action-group-sm .action-group-addon {
  padding-inline: 8px;
}

.action-group .ui-split-button {
  flex: 0 1 auto;
}

.action-combo-control {
  --action-combo-fg: var(--button-neutral-fg);
  --action-combo-bg: var(--button-neutral-bg);
  --action-combo-border: var(--button-neutral-border);
  --action-combo-hover-fg: var(--button-neutral-hover-fg);
  --action-combo-hover-bg: var(--button-neutral-hover-bg);
  --action-combo-hover-border: var(--button-neutral-hover-border);
  --action-combo-active-bg: var(--button-neutral-active-bg);
  --action-combo-active-border: var(--button-neutral-active-border);
  --action-combo-ring: var(--button-neutral-ring);
  flex-wrap: nowrap;
}

.action-combo-tone-accent {
  --action-combo-fg: var(--button-accent-fg);
  --action-combo-bg: var(--button-accent-bg);
  --action-combo-border: var(--button-accent-border);
  --action-combo-hover-fg: var(--button-accent-hover-fg);
  --action-combo-hover-bg: var(--button-accent-hover-bg);
  --action-combo-hover-border: var(--button-accent-hover-border);
  --action-combo-active-bg: var(--button-accent-active-bg);
  --action-combo-active-border: var(--button-accent-active-border);
  --action-combo-ring: var(--button-accent-ring);
}

.action-combo-tone-primary {
  --action-combo-fg: var(--button-primary-fg);
  --action-combo-bg: var(--button-primary-bg);
  --action-combo-border: var(--button-primary-border);
  --action-combo-hover-fg: var(--button-primary-hover-fg);
  --action-combo-hover-bg: var(--button-primary-hover-bg);
  --action-combo-hover-border: var(--button-primary-hover-border);
  --action-combo-active-bg: var(--button-primary-active-bg);
  --action-combo-active-border: var(--button-primary-active-border);
  --action-combo-ring: var(--button-primary-ring);
}

.action-combo-tone-positive {
  --action-combo-fg: var(--button-positive-fg);
  --action-combo-bg: var(--button-positive-bg);
  --action-combo-border: var(--button-positive-border);
  --action-combo-hover-fg: var(--button-positive-hover-fg);
  --action-combo-hover-bg: var(--button-positive-hover-bg);
  --action-combo-hover-border: var(--button-positive-hover-border);
  --action-combo-active-bg: var(--button-positive-active-bg);
  --action-combo-active-border: var(--button-positive-active-border);
  --action-combo-ring: var(--button-positive-ring);
}

.action-combo-tone-negative {
  --action-combo-fg: var(--button-negative-fg);
  --action-combo-bg: var(--button-negative-bg);
  --action-combo-border: var(--button-negative-border);
  --action-combo-hover-fg: var(--button-negative-hover-fg);
  --action-combo-hover-bg: var(--button-negative-hover-bg);
  --action-combo-hover-border: var(--button-negative-hover-border);
  --action-combo-active-bg: var(--button-negative-active-bg);
  --action-combo-active-border: var(--button-negative-active-border);
  --action-combo-ring: var(--button-negative-ring);
}

.action-combo-primary.ui-button {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.action-combo-primary.ui-button:hover:not(:disabled),
.action-combo-primary.ui-button:active:not(:disabled) {
  transform: none;
  box-shadow: none;
}

.action-combo-select {
  flex: 0 0 auto;
  margin-inline-start: -1px;
}

.action-combo-trigger.ui-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--action-group-height);
  gap: 8px;
  border: 1px solid var(--action-combo-border);
  border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
  background: var(--action-combo-bg);
  color: var(--action-combo-fg);
  cursor: pointer;
  padding-inline: 10px 12px;
  font: inherit;
  font-size: var(--type-size-sm, 0.86rem);
  font-weight: var(--type-weight-bold, 800);
  transition:
    border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.action-combo-trigger.ui-button::after {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  content: "";
  opacity: 0.72;
}

.action-combo-trigger.ui-button:hover {
  border-color: var(--action-combo-hover-border);
  background: var(--action-combo-hover-bg);
  color: var(--action-combo-hover-fg);
}

.action-combo-trigger.ui-button[data-state="open"] {
  border-color: var(--action-combo-active-border);
  background: var(--action-combo-active-bg);
  color: var(--action-combo-hover-fg);
}

.action-combo-trigger.ui-button:focus-visible {
  border-color: var(--action-combo-hover-border);
  outline: none;
  box-shadow: 0 0 0 3px var(--action-combo-ring);
}

.action-combo-trigger-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-combo-panel {
  --dropdown-panel-max-width: min(20rem, calc(100vw - 16px));
  display: grid;
  width: min(max(var(--dropdown-trigger-width, 0px), 12rem), var(--dropdown-panel-max-width));
  gap: 6px;
  padding: 6px;
}

.action-combo-option-list.ui-menu {
  min-width: 0;
}

.action-combo-option-list {
  display: grid;
  gap: 4px;
}

.action-combo-option,
.action-combo-option-list .ui-menu-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
}

.action-combo-option:hover,
.action-combo-option:focus-visible,
.action-combo-option-list .ui-menu-item:hover,
.action-combo-option-list .ui-menu-item:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border-subtle, var(--panel-border-soft)));
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  outline: none;
}

.action-combo-option:disabled,
.action-combo-option-list .ui-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.action-combo-option-copy,
.action-combo-option-list .ui-menu-item-copy {
  display: grid;
  gap: 2px;
}

.action-combo-option-copy strong,
.action-combo-option-list .ui-menu-item-label {
  font-size: var(--type-size-sm, 0.86rem);
  font-weight: 800;
}

.action-combo-option-copy span,
.action-combo-option-list .ui-menu-item-description {
  color: var(--muted);
  font-size: var(--type-size-xs, 0.76rem);
}

@media (max-width: 640px) {
  .action-group {
    width: 100%;
  }

  .action-group-wrap {
    gap: 6px;
  }

  .action-group > * {
    flex: 1 1 auto;
  }

  .action-group-wrap > * + * {
    margin-inline-start: 0;
  }

  .action-group-wrap > :is(.ui-button, button, select),
  .action-group-wrap > .tooltip-wrap > :is(.ui-button, button),
  .action-group-wrap > .ui-split-button > :first-child,
  .action-group-wrap > .ui-split-button > :last-child,
  .action-group-wrap > .action-group-addon {
    border-radius: var(--radius-md, 10px);
  }

  .action-group-addon {
    flex: 0 0 auto;
  }

  .action-combo-control.action-group {
    width: auto;
  }
}
.ui-fluid {
  width: 100%;
  max-width: 100%;
}

.ui-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ui-field-row,
.ui-stack,
.ui-grid {
  min-width: 0;
}

.ui-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.ui-stack {
  display: grid;
  gap: 12px;
}

.ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.input-help-text {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.input-error-text {
  color: var(--danger, var(--bad));
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.input-control.is-invalid input,
.input-control input.invalid {
  border-color: color-mix(in oklab, var(--danger, var(--bad)) 64%, var(--border-strong, var(--panel-border)));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger, var(--bad)) 16%, transparent);
}

.input-field-shell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.autocomplete-control,
.date-picker {
  position: relative;
  min-width: 0;
}

.autocomplete-panel,
.date-picker-panel {
  --dropdown-panel-max-width: min(360px, calc(100vw - 24px));
  --dropdown-panel-max-height: 320px;
  position: absolute;
  z-index: 80;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  width: var(--dropdown-panel-max-width);
  max-height: var(--dropdown-panel-max-height);
  overflow: auto;
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card, var(--panel));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  padding: 6px;
}

.ui-dropdown-panel.autocomplete-panel,
.ui-dropdown-panel.date-picker-panel {
  inset: auto;
}

.autocomplete-list,
.autocomplete-group {
  display: grid;
  gap: 4px;
}

.autocomplete-group-label,
.calendar-weekday {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 6px;
}

.autocomplete-option {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 8px 10px;
  text-align: start;
}

.autocomplete-option small {
  color: var(--muted);
  font-size: 0.74rem;
}

.autocomplete-option:hover:not(:disabled),
.autocomplete-option:focus-visible,
.autocomplete-option.is-active,
.calendar-cell:hover:not(:disabled),
.calendar-cell:focus-visible {
  background: color-mix(in oklab, var(--color-primary, var(--accent-2)) 12%, transparent);
  outline: none;
}

.autocomplete-option:disabled,
.calendar-cell:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.autocomplete-empty {
  color: var(--muted);
  font-size: 0.78rem;
  padding: 10px;
}

.autocomplete-dropdown,
.date-picker-toggle {
  min-height: var(--control-height-sm, 36px);
  border-radius: var(--radius-md, 8px);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  padding-inline: 10px;
}

.calendar-control,
.calendar-grid {
  display: grid;
  gap: 4px;
}

.calendar-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px;
}

.calendar-header strong {
  text-align: center;
}

.calendar-header button {
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--text);
  cursor: pointer;
  padding: 5px 8px;
}

.calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-cell {
  min-width: 32px;
  min-height: 30px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.calendar-cell.is-muted {
  color: color-mix(in oklab, var(--muted) 72%, transparent);
}

.calendar-cell.is-selected {
  background: var(--color-primary, var(--accent-2));
  color: var(--panel);
  font-weight: 800;
}

.password-strength-meter {
  display: grid;
  gap: 7px;
  color: var(--text);
}

.password-strength-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78rem;
}

.password-strength-head strong {
  color: var(--text);
}

.password-strength-track {
  overflow: hidden;
  height: 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-card-muted, var(--panel-alt));
}

.password-strength-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--warn);
}

.password-strength-strong .password-strength-track span {
  background: var(--ok);
}

.password-strength-weak .password-strength-track span {
  background: var(--danger, var(--bad));
}

.password-strength-requirements {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.74rem;
}

.password-strength-requirements .is-met {
  color: var(--ok);
}

.otp-input-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.otp-input-control input {
  width: 36px;
  min-height: var(--control-height-sm, 36px);
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--text);
  text-align: center;
  font-weight: 800;
}

.otp-input-control input:focus-visible {
  border-color: var(--accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  outline: none;
}

.otp-slot-break {
  margin-inline-start: 8px;
}

.float-label {
  position: relative;
  display: grid;
  min-width: 0;
}

.float-label > label {
  position: absolute;
  inset-block-start: 9px;
  inset-inline-start: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  pointer-events: none;
  transition: transform var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease), font-size var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease), color var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.float-label.is-active > label {
  color: var(--accent);
  font-size: 0.68rem;
  transform: translateY(-18px);
}

.float-label-in.is-active > label {
  transform: translateY(-7px);
}

.icon-field {
  position: relative;
  display: grid;
  min-width: 0;
}

.icon-field-icon {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  display: inline-flex;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.icon-field-icon-start {
  inset-inline-start: 10px;
}

.icon-field-icon-end {
  inset-inline-end: 10px;
}

.icon-field .icon-field-icon-start + input,
.icon-field .icon-field-icon-start ~ .input-control input {
  padding-inline-start: 34px;
}
.identity-avatar,
.identity-badge,
.identity-chip,
.identity-tag,
.identity-entity-pill,
.identity-entity-card {
  --identity-fg: var(--accent-3);
  --identity-bg: color-mix(in oklab, var(--accent-3) 9%, transparent);
  --identity-border: color-mix(in oklab, var(--accent-3) 20%, transparent);
  --identity-ring: color-mix(in oklab, var(--accent) 22%, transparent);
}

.identity-tone-accent {
  --identity-fg: color-mix(in oklab, var(--accent) 78%, var(--ink));
  --identity-bg: color-mix(in oklab, var(--accent) 13%, var(--panel));
  --identity-border: color-mix(in oklab, var(--accent) 34%, var(--panel-border-soft));
  --identity-ring: color-mix(in oklab, var(--accent) 26%, transparent);
}

.identity-tone-positive {
  --identity-fg: color-mix(in oklab, var(--ok) 64%, var(--ink));
  --identity-bg: color-mix(in oklab, var(--ok) 13%, var(--panel));
  --identity-border: color-mix(in oklab, var(--ok) 32%, var(--panel-border-soft));
  --identity-ring: color-mix(in oklab, var(--ok) 24%, transparent);
}

.identity-tone-warning {
  --identity-fg: color-mix(in oklab, var(--warn) 74%, var(--ink));
  --identity-bg: color-mix(in oklab, var(--warn) 15%, var(--panel));
  --identity-border: color-mix(in oklab, var(--warn) 36%, var(--panel-border-soft));
  --identity-ring: color-mix(in oklab, var(--warn) 24%, transparent);
}

.identity-tone-danger {
  --identity-fg: color-mix(in oklab, var(--bad) 66%, var(--ink));
  --identity-bg: color-mix(in oklab, var(--bad) 13%, var(--panel));
  --identity-border: color-mix(in oklab, var(--bad) 34%, var(--panel-border-soft));
  --identity-ring: color-mix(in oklab, var(--bad) 24%, transparent);
}

.identity-avatar {
  display: inline-grid;
  place-items: center;
  width: var(--identity-avatar-size);
  height: var(--identity-avatar-size);
  min-width: var(--identity-avatar-size);
  overflow: hidden;
  border: 1px solid var(--identity-border);
  border-radius: 999px;
  background: var(--identity-bg);
  color: var(--identity-fg);
  font-size: var(--identity-avatar-font-size);
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.identity-avatar-xs {
  --identity-avatar-size: 20px;
  --identity-avatar-font-size: 0.62rem;
}

.identity-avatar-sm {
  --identity-avatar-size: 24px;
  --identity-avatar-font-size: 0.68rem;
}

.identity-avatar-md {
  --identity-avatar-size: 32px;
  --identity-avatar-font-size: 0.78rem;
}

.identity-avatar-lg {
  --identity-avatar-size: 40px;
  --identity-avatar-font-size: 0.9rem;
}

.identity-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.identity-badge,
.identity-chip,
.identity-tag,
.identity-entity-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--identity-border);
  background: var(--identity-bg);
  color: var(--identity-fg);
  line-height: 1;
  vertical-align: middle;
}

.identity-badge {
  min-height: 22px;
  padding: 3px 8px;
  gap: 5px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
}

.identity-chip,
.identity-tag {
  min-height: 26px;
  padding: 3px 4px 3px 8px;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

.identity-chip {
  border-radius: 999px;
}

.identity-tag {
  border-radius: 6px;
}

.identity-entity-pill {
  min-height: 30px;
  padding: 3px 6px 3px 4px;
  gap: 6px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.identity-token-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-entity-label {
  min-width: 0;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-token-avatar {
  display: inline-flex;
  margin-left: -4px;
}

.identity-entity-media,
.identity-entity-media-button,
.identity-entity-actions,
.identity-entity-card-actions,
.identity-entity-pill-group,
.identity-entity-pill-group-item {
  display: inline-flex;
  align-items: center;
}

.identity-entity-media-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.identity-entity-media-button:focus-visible {
  outline: 2px solid var(--identity-ring);
  outline-offset: 2px;
}

.identity-entity-actions {
  margin-left: 2px;
}

.identity-entity-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--identity-border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
}

.identity-entity-card-media {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--identity-border);
  border-radius: 10px;
  background: var(--identity-bg);
  color: var(--identity-fg);
  cursor: default;
  overflow: hidden;
}

button.identity-entity-card-media {
  cursor: pointer;
}

.identity-entity-card-media:focus-visible {
  outline: 2px solid var(--identity-ring);
  outline-offset: 2px;
}

.identity-entity-card-media img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.identity-entity-card-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.identity-entity-card-title-row,
.identity-entity-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.identity-entity-card-title-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

.identity-entity-card-title-row span,
.identity-entity-card-meta {
  color: var(--muted);
  font-size: 0.72rem;
}

.identity-entity-card-actions {
  flex-wrap: wrap;
  gap: 6px;
}

.identity-entity-pill-group {
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.identity-entity-pill-overflow {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.identity-token-icon,
.identity-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.identity-token-remove {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.identity-token-remove:hover {
  background: color-mix(in oklab, currentColor 13%, transparent);
}

.identity-token-remove:focus-visible {
  outline: 2px solid var(--identity-ring);
  outline-offset: 1px;
}

.identity-badge[data-state="active"],
.identity-chip[data-state="selected"],
.identity-tag[data-state="selected"],
.identity-entity-pill[data-state="selected"],
.identity-entity-card[data-state="selected"] {
  box-shadow: inset 0 0 0 1px var(--identity-border);
}

.identity-badge[data-state="disabled"],
.identity-chip[data-state="disabled"],
.identity-tag[data-state="disabled"],
.identity-entity-pill[data-state="disabled"],
.identity-entity-card[data-state="disabled"],
.identity-entity-card[data-state="ignored"],
.identity-token-remove:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.identity-badge-strip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.identity-badge-strip-item {
  display: inline-flex;
  min-width: 0;
}
.inputs-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 16px;
  min-width: 0;
}

.inputs-demo-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
}

.input-group-demo-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.input-group-demo-action-field {
  grid-column: 1 / -1;
}

.input-group-demo-action-field .input-group {
  max-width: min(100%, 620px);
}

.input-group-demo-region-select {
  flex: 1 1 220px;
  --select-control-panel-width: 300px;
}

.inputs-demo-text-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.inputs-number-width-lab,
.inputs-number-order-lab {
  display: grid;
  gap: 14px 16px;
  min-width: 0;
}

.inputs-number-width-lab {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.inputs-number-order-lab {
  grid-template-columns: repeat(auto-fit, minmax(190px, max-content));
}

.inputs-number-frame {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  padding: 6px;
}

.inputs-number-frame-auto {
  width: -moz-fit-content;
  width: fit-content;
}

.inputs-number-frame-fixed {
  width: 180px;
}

.inputs-number-frame-fluid {
  width: 100%;
}

.inputs-number-frame-stretch .number-input-control {
  width: 100%;
}

.select-control.inputs-deployment-select,
.select-control-panel.inputs-deployment-select {
  width: min(100%, 320px);
  --select-control-panel-width: 320px;
}

.inputs-select-photo {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 72% 24%, color-mix(in oklab, white 72%, transparent) 0 12%, transparent 13%),
    linear-gradient(135deg, var(--color-primary, var(--accent-2)), var(--accent));
}

.inputs-select-photo-staging {
  background:
    radial-gradient(circle at 28% 26%, color-mix(in oklab, white 70%, transparent) 0 10%, transparent 11%),
    linear-gradient(135deg, #c16a2f, #5f8fa8);
}

.inputs-select-photo-prod {
  background:
    radial-gradient(circle at 64% 26%, color-mix(in oklab, white 68%, transparent) 0 11%, transparent 12%),
    linear-gradient(135deg, #73808c, #232d3f);
}

.inputs-color-variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  min-width: 0;
}

.inputs-advanced-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 16px;
  min-width: 0;
}

.inputs-advanced-demo .field-wide {
  grid-column: 1 / -1;
}
.buttons-demo-action-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-block-start: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.buttons-demo-action-readout output {
  color: var(--ink);
  font-weight: 760;
}
.select-control {
  display: inline-grid;
  min-width: 0;
  width: min(100%, 260px);
  --select-control-action-width: 0px;
  --select-control-panel-width: 260px;
  --select-control-panel-max-height: 360px;
  --select-control-options-max-height: 300px;
}

.select-control-frame {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.select-control-menu {
  display: block;
  width: 100%;
  min-width: 0;
}

.select-control-menu.ui-dropdown {
  display: block;
}

.select-control-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  width: 100%;
  min-height: var(--control-height-sm, 36px);
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  list-style: none;
  padding: 7px 10px;
  text-align: start;
}

.select-control .select-control-trigger {
  width: 100%;
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  padding: 7px 10px;
}

.select-control-has-actions .select-control-trigger {
  padding-inline-end: calc(10px + var(--select-control-action-width) + 8px);
}

.select-control-frame .input-actions {
  inset-inline-end: 4px;
  z-index: 1;
}

.select-control:not(.is-disabled):hover .input-actions-autohide,
.select-control:not(.is-disabled):focus-within .input-actions-autohide {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

@media (hover: none), (pointer: coarse) {
  .select-control .input-actions-autohide {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
  }
}

.select-control-trigger::-webkit-details-marker {
  display: none;
}

.select-control-trigger::after {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  content: "";
  opacity: 0.72;
}

.select-control-trigger:hover:not(:disabled),
.select-control-trigger[data-state="open"] {
  border-color: var(--border-strong, var(--panel-border));
  background: color-mix(in oklab, var(--color-primary, var(--accent-2)) 5%, var(--surface-card-muted, var(--panel-alt)));
}

.select-control-trigger:focus-visible {
  border-color: var(--accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  outline: none;
}

.select-control-trigger:disabled,
.select-control.is-disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.select-control-trigger-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin-inline-end: auto;
}

.select-control-trigger-media,
.select-control-option-media {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
  background: var(--panel);
}

.select-control-trigger-media {
  width: 28px;
  height: 28px;
}

.select-control-option-media {
  width: 34px;
  height: 34px;
}

.select-control-trigger-label,
.select-control-trigger-description,
.select-control-option-label,
.select-control-option-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-control-trigger-label,
.select-control-option-label {
  color: var(--ink);
  font-weight: 750;
}

.select-control-trigger-copy.is-placeholder .select-control-trigger-label,
.select-control-trigger-description,
.select-control-option-description {
  color: var(--muted);
}

.select-control-trigger-description,
.select-control-option-description {
  font-size: 0.75rem;
}

.select-control-panel {
  --select-control-panel-width: 260px;
  --select-control-panel-max-height: 360px;
  --select-control-options-max-height: 300px;
  --dropdown-panel-max-width: calc(100vw - 16px);
  --dropdown-panel-max-height: min(var(--select-control-panel-max-height), calc(100vh - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(max(var(--select-control-panel-width), var(--dropdown-trigger-width, 0px)), var(--dropdown-panel-max-width));
  max-height: var(--dropdown-panel-max-height);
  z-index: var(--z-popover, 1000);
  gap: 5px;
  overflow: hidden;
  padding: 6px;
}

.action-menu-panel.select-control-panel {
  gap: 5px;
  padding: 6px;
}

.select-control-header {
  display: grid;
  gap: 5px;
  padding-block-end: 5px;
  border-block-end: 1px solid var(--border-subtle, var(--panel-border-soft));
}

.select-control-filter.input-control {
  width: 100%;
}

.select-control-select-all,
.select-control-create-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  padding: 5px 7px;
  text-align: start;
}

.select-control-panel .select-control-select-all,
.select-control-panel .select-control-create-option {
  justify-content: flex-start;
}

.select-control-create-option {
  border-color: var(--select-control-create-border, color-mix(in oklab, var(--color-success, var(--ok, #15803d)) 58%, transparent));
  background: var(--select-control-create-bg, color-mix(in oklab, var(--color-success, var(--ok, #166534)) 82%, var(--panel)));
  color: var(--select-control-create-fg, white);
}

.select-control-select-all:hover:not(:disabled),
.select-control-select-all:focus-visible,
.select-control-create-option:hover:not(:disabled),
.select-control-create-option:focus-visible {
  border-color: var(--accent-border, var(--accent));
  background: color-mix(in oklab, var(--accent) 8%, var(--panel));
  outline: none;
}

.select-control-create-option:hover:not(:disabled),
.select-control-create-option:focus-visible {
  border-color: var(--select-control-create-hover-border, color-mix(in oklab, var(--color-success, var(--ok, #22c55e)) 76%, white));
  background: var(--select-control-create-hover-bg, color-mix(in oklab, var(--color-success, var(--ok, #14532d)) 92%, black));
  color: var(--select-control-create-hover-fg, white);
}

.select-control-select-all:disabled,
.select-control-create-option:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.select-control-create-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: color-mix(in oklab, white 18%, transparent);
  color: currentColor;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.select-control-check {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--border-strong, var(--panel-border));
  border-radius: 4px;
  background: color-mix(in oklab, var(--panel) 82%, white);
  color: var(--button-primary-fg, white);
}

.select-control-check.is-checked,
.select-control-check.is-mixed {
  border-color: var(--accent, var(--color-primary));
  background: var(--accent, var(--color-primary));
}

.select-control-check.is-checked::after {
  width: 7px;
  height: 4px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  content: "";
  transform: translateY(-1px) rotate(-45deg);
}

.select-control-check.is-mixed::after {
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.select-control-options {
  display: grid;
  gap: 0;
  max-height: min(var(--select-control-options-max-height), calc(100vh - 112px));
  max-height: min(var(--select-control-options-max-height), calc(100dvh - 112px));
  margin-inline: -6px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.select-control-option {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-start;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 8px 15px;
  text-align: start;
}

.select-control-panel .select-control-option {
  justify-content: flex-start;
}

.select-control-option-copy {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-width: 0;
}

.select-control-option-rich {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  justify-content: stretch;
}

.select-control-multiple .select-control-option {
  gap: 8px;
}

.select-control-multiple .select-control-option-rich {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.select-control-options :where(.select-control-option:nth-of-type(even):not(.is-selected):not(:hover):not(:focus-visible)) {
  background: color-mix(in oklab, var(--panel-alt, var(--panel)) 34%, transparent);
}

.select-control-option:hover:not(:disabled),
.select-control-option:focus-visible,
.select-control-option.is-selected {
  border-color: var(--accent-border, var(--accent));
  background: color-mix(in oklab, var(--accent) 8%, var(--panel));
  outline: none;
}

.select-control-option.is-selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

.select-control-option:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.select-control-empty {
  color: var(--muted);
  font-size: 0.78rem;
  padding: 8px 9px;
}
.checklist-picker {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card-muted, var(--panel-alt));
}

.checklist-picker[data-state="open"] {
  border-color: var(--accent-border, var(--accent));
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
}

.checklist-picker-head,
.checklist-picker-create {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.checklist-picker .checklist-picker-trigger {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: var(--control-height-sm, 36px);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.checklist-picker .checklist-picker-trigger .ui-button-content {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
}

.checklist-picker .checklist-picker-trigger::after {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-inline-start: 10px;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  content: "";
  opacity: 0.72;
}

.checklist-picker .checklist-picker-trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.checklist-picker .checklist-picker-trigger:focus-visible {
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  outline: none;
}

.checklist-picker .checklist-picker-trigger:disabled {
  cursor: not-allowed;
}

.checklist-picker-trigger-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.checklist-picker-summary,
.checklist-picker-placeholder {
  color: var(--muted);
  font-size: 0.82rem;
}

.checklist-picker-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.checklist-picker-chips,
.checklist-picker-options {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.checklist-picker-chips {
  display: flex;
  flex-wrap: wrap;
}

.checklist-picker-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary, var(--accent)) 10%, var(--panel));
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.checklist-picker-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle, var(--panel-border-soft));
}

.checklist-picker-panel[hidden] {
  display: none;
}

.checklist-picker-create > [data-bix-component] {
  flex: 1 1 220px;
}

.checklist-picker-option {
  border: 1px solid var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-sm, 6px);
  background: var(--panel);
}

.checklist-picker-option .checkbox-control,
.checklist-picker-option .checkbox-control-click {
  width: 100%;
}
.slider-control {
  --slider-track-height: 10px;
  --slider-thumb-size: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.slider-label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--type-size-sm, 0.86rem);
  font-weight: 750;
}

.slider-track {
  position: relative;
  min-width: 0;
  min-height: calc(var(--slider-thumb-size) + 8px);
  display: flex;
  align-items: center;
}

.slider-track::before,
.slider-range {
  position: absolute;
  inset-inline: 0;
  height: var(--slider-track-height);
  border-radius: var(--radius-pill, 999px);
}

.slider-track::before {
  content: "";
  background: color-mix(in oklab, var(--panel-border-soft) 82%, var(--panel));
  border: 1px solid var(--panel-border-soft);
}

.slider-range {
  width: var(--slider-value-percent);
  background: linear-gradient(90deg, var(--color-primary, var(--accent)), var(--accent));
}

.slider-native-input {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.slider-thumb {
  position: absolute;
  z-index: 1;
  inset-inline-start: calc(var(--slider-value-percent) - var(--slider-thumb-size) / 2);
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: var(--radius-pill, 999px);
  border: 2px solid var(--panel);
  background: var(--color-primary, var(--accent));
  box-shadow: 0 0 0 1px var(--panel-border-soft), 0 8px 18px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

.slider-native-input:focus-visible + .slider-thumb {
  box-shadow: 0 0 0 1px var(--panel-border-soft), 0 0 0 4px var(--ring);
}

.slider-marks {
  position: absolute;
  inset: calc(100% - 2px) 0 auto;
  display: block;
  min-height: 22px;
}

.slider-mark {
  position: absolute;
  inset-inline-start: var(--slider-mark-percent);
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--type-size-xs, 0.76rem);
  font-weight: 700;
  cursor: pointer;
}

.slider-mark::before {
  content: "";
  display: block;
  width: 1px;
  height: 7px;
  margin: 0 auto 2px;
  background: var(--panel-border-strong);
}

.slider-mark.is-selected {
  color: var(--accent-3);
}

.slider-number-input {
  width: 84px;
  min-height: var(--control-height-sm, 32px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  padding: 4px 8px;
}

.slider-control.is-disabled {
  opacity: 0.62;
}

.slider-control.is-disabled .slider-native-input,
.slider-control.is-disabled .slider-mark {
  cursor: not-allowed;
}

.slider-control.is-invalid .slider-track::before,
.slider-control.is-invalid .slider-number-input {
  border-color: var(--bad);
}
.layout-scroll-area {
  display: block;
  min-width: 0;
  border: 1px solid var(--layout-panel-border, var(--border-subtle, var(--panel-border-soft)));
  border-radius: var(--radius-md, 8px);
  background: var(--layout-panel-bg, var(--surface-card, var(--panel)));
}

.layout-scroll-viewport {
  min-width: 0;
  max-height: inherit;
  max-width: inherit;
  overscroll-behavior: contain;
  outline: none;
  padding: 10px;
}

.layout-scroll-area-vertical .layout-scroll-viewport,
.layout-scroll-area-both .layout-scroll-viewport {
  overflow-y: auto;
}

.layout-scroll-area-horizontal .layout-scroll-viewport,
.layout-scroll-area-both .layout-scroll-viewport {
  overflow-x: auto;
}

.layout-scroll-viewport:focus-visible,
.layout-splitter-separator:focus-visible {
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 22%, transparent));
  outline: none;
}

.layout-splitter {
  display: flex;
  min-width: 0;
  min-height: 0;
  width: 100%;
  border: 1px solid var(--layout-panel-border, var(--border-subtle, var(--panel-border-soft)));
  border-radius: var(--radius-md, 8px);
  background: var(--layout-panel-bg, var(--surface-card, var(--panel)));
  overflow: hidden;
}

.layout-splitter-horizontal {
  flex-direction: row;
}

.layout-splitter-vertical {
  flex-direction: column;
}

.layout-splitter-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 0 1 auto;
  padding: 12px;
}

.layout-splitter-separator {
  position: absolute;
  z-index: 2;
  border: 0;
  background: var(--layout-separator, var(--border-strong, var(--panel-border)));
  transition: background var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.layout-splitter-horizontal .layout-splitter-separator {
  inset-block: 0;
  inset-inline-end: -3px;
  width: 6px;
  cursor: col-resize;
}

.layout-splitter-vertical .layout-splitter-separator {
  inset-inline: 0;
  inset-block-end: -3px;
  height: 6px;
  cursor: row-resize;
}

.layout-splitter-separator:hover,
.layout-splitter-separator:focus-visible {
  background: var(--accent);
}
.data-control-view {
  display: grid;
  gap: var(--data-control-list-gap, 10px);
  min-width: 0;
  color: var(--data-control-panel-fg, var(--ink));
}

.data-control-view-toolbar,
.data-control-view-pagination,
.data-control-view-toggle,
.data-control-view-sort,
.data-control-view-item-actions,
.data-control-transfer-actions,
.data-control-order-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--data-control-list-gap, 8px);
}

.data-control-view button,
.data-control-transfer-actions button,
.data-control-order-actions button {
  min-height: 32px;
  border: 1px solid var(--data-control-panel-border, var(--border-subtle, var(--panel-border-soft)));
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--data-control-panel-fg, var(--ink));
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 720;
  padding: 5px 9px;
}

.data-control-view button:focus-visible,
.data-control-list-option:focus-visible,
.data-control-transfer-actions button:focus-visible,
.data-control-order-actions button:focus-visible {
  box-shadow: 0 0 0 3px var(--data-control-item-focus-ring, var(--ring, color-mix(in oklab, var(--accent) 22%, transparent)));
  outline: none;
}

.data-control-view button:hover:not(:disabled),
.data-control-transfer-actions button:hover:not(:disabled),
.data-control-order-actions button:hover:not(:disabled),
.data-control-list-option:hover:not(:disabled) {
  border-color: var(--accent-border, var(--accent));
  background: var(--data-control-item-hover-bg, color-mix(in oklab, var(--accent) 8%, var(--panel)));
}

.data-control-view button:disabled,
.data-control-transfer-actions button:disabled,
.data-control-order-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.data-control-view button[data-state="selected"],
.data-control-view button[data-state="asc"],
.data-control-view button[data-state="desc"] {
  border-color: var(--accent-border, var(--accent));
  background: var(--data-control-item-selected-bg, color-mix(in oklab, var(--accent) 13%, var(--panel)));
}

.data-control-view-items {
  display: grid;
  gap: var(--data-control-list-gap, 8px);
  min-width: 0;
}

.data-control-view-grid .data-control-view-items {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.data-control-view-item {
  display: grid;
  gap: var(--data-control-list-gap, 10px);
  min-width: 0;
  border: 1px solid var(--data-control-panel-border, var(--border-subtle, var(--panel-border-soft)));
  border-radius: var(--data-control-panel-radius, var(--radius-md, 8px));
  background: var(--data-control-panel-bg, var(--surface-card, var(--panel)));
  color: var(--data-control-panel-fg, var(--ink));
  padding: var(--data-control-panel-padding, 12px);
}

.data-control-view-item-content {
  min-width: 0;
}

.data-control-status,
.data-control-list-empty {
  color: var(--muted);
  font-size: 0.88rem;
  padding: var(--data-control-panel-padding, 12px);
}

.data-control-transfer-list,
.data-control-order-list {
  display: grid;
  gap: var(--data-control-list-gap, 10px);
  min-width: 0;
  color: var(--data-control-panel-fg, var(--ink));
}

.data-control-transfer-list {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
}

.data-control-list-pane {
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr);
  min-width: 0;
  border: 1px solid var(--data-control-panel-border, var(--border-subtle, var(--panel-border-soft)));
  border-radius: var(--data-control-panel-radius, var(--radius-md, 8px));
  background: var(--data-control-panel-bg, var(--surface-card, var(--panel)));
  color: var(--data-control-panel-fg, var(--ink));
  overflow: hidden;
}

.data-control-list-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--data-control-list-gap, 8px);
  border-block-end: 1px solid var(--data-control-panel-border, var(--border-subtle, var(--panel-border-soft)));
  padding: 9px 10px;
}

.data-control-list-pane-header span {
  color: var(--muted);
  font-size: 0.78rem;
}

.data-control-listbox {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 0;
  overflow: auto;
  padding: 6px;
}

.data-control-list-option {
  display: flex;
  align-items: flex-start;
  gap: var(--data-control-list-gap, 8px);
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--data-control-panel-fg, var(--ink));
  cursor: pointer;
  font: inherit;
  padding: 7px;
  text-align: start;
}

.data-control-list-option.is-selected {
  border-color: var(--accent-border, var(--accent));
  background: var(--data-control-item-selected-bg, color-mix(in oklab, var(--accent) 13%, var(--panel)));
}

.data-control-list-option:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.data-control-list-option-media {
  display: grid;
  flex: 0 0 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-card-muted, var(--panel-alt));
}

.data-control-list-option-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.data-control-list-option-copy small {
  color: var(--muted);
}

.data-control-transfer-actions {
  align-content: center;
  flex-direction: column;
  justify-content: center;
}

.data-control-order-list {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.data-control-order-actions {
  align-content: center;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 720px) {
  .data-control-transfer-list,
  .data-control-order-list {
    grid-template-columns: 1fr;
  }

  .data-control-transfer-actions,
  .data-control-order-actions {
    flex-direction: row;
    justify-content: flex-start;
  }
}
.app-shell {
  --app-shell-sidebar-width: 260px;
  --app-shell-sidebar-collapsed-width: 76px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
  background: var(--bg, transparent);
  color: var(--text);
}

.app-shell[data-sidebar-state="collapsed"] {
  grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
}

.app-shell-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px;
  border-right: 1px solid var(--panel-border-soft);
  background: var(--panel);
}

.app-shell-brand-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.app-shell-brand {
  min-height: 44px;
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--accent-3);
  font-weight: 850;
}

.app-shell-sidebar-toggle {
  flex: 0 0 auto;
}

.app-shell-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.app-shell-nav-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar {
  padding-inline: 12px;
}

.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-brand-row {
  grid-template-columns: 1fr;
  justify-items: center;
}

.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-brand {
  justify-content: center;
  min-height: 34px;
}

.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-nav-link {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 42px;
  padding-inline: 8px;
}

.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-nav-icon {
  width: 24px;
  height: 24px;
}

.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-nav-label,
.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-nav-badge,
.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-sidebar-footer {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.app-shell-nav-link:hover,
.app-shell-nav-link.is-active {
  background: color-mix(in oklab, var(--accent) 11%, transparent);
  color: var(--accent-3);
}

.app-shell-nav-icon,
.app-shell-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-shell-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.app-shell-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--panel-border-soft);
  background: color-mix(in oklab, var(--panel) 92%, transparent);
}

.app-shell-title {
  min-width: 0;
  flex: 1 1 auto;
}

.app-shell-title h1 {
  margin: 0;
  color: var(--accent-3);
  font-size: 1.18rem;
  line-height: 1.2;
}

.app-shell-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.app-shell-status,
.app-shell-utilities,
.app-shell-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.app-shell-menu-button {
  display: none;
}

.app-shell-content {
  min-width: 0;
  padding: 20px;
}

.app-shell-mobile-panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: min(320px, 88vw);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px;
  border-right: 1px solid var(--panel-border);
  background: var(--panel);
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.35);
}

.app-shell-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bix-ui-demo {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.bix-ui-demo-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.bix-ui-demo-entry {
  min-width: 0;
}

.bix-ui-demo-anchor-target {
  scroll-margin-block-start: 16px;
}

.bix-ui-demo-anchor-target:focus {
  outline: none;
}

.bix-ui-demo-main > .panel {
  min-width: 0;
}

.bix-ui-demo-sidebar {
  position: sticky;
  top: 12px;
  min-width: 0;
}

.bix-ui-demo-sidebar-panel {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 24px);
  min-width: 0;
  overflow: auto;
}

.bix-ui-demo-sidebar-nav,
.bix-ui-demo-sidebar-list {
  min-width: 0;
}

.bix-ui-demo-sidebar-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bix-ui-demo-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--control-height-sm, 36px);
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease), background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease), border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.bix-ui-demo-sidebar-link:hover,
.bix-ui-demo-sidebar-link:focus-visible,
.bix-ui-demo-sidebar-link.is-active {
  border-color: color-mix(in oklab, var(--accent-border, var(--accent)) 64%, transparent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent-3);
}

.bix-ui-demo-sidebar-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.bix-ui-demo-sidebar-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bix-ui-demo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.bix-ui-demo-head-copy {
  display: grid;
  gap: 8px;
  flex: 1 1 420px;
  min-width: 0;
}

.bix-ui-demo-search {
  display: grid;
  gap: 8px;
  width: min(100%, 520px);
  min-width: 0;
}

.bix-ui-demo-search .input-control {
  width: 100%;
}

.bix-ui-demo-search-results {
  display: grid;
  gap: 6px;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in oklab, var(--panel-alt) 78%, transparent);
}

.bix-ui-demo-search-result {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.bix-ui-demo-search-result:hover,
.bix-ui-demo-search-result:focus-visible {
  border-color: color-mix(in oklab, var(--accent-border, var(--accent)) 64%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, var(--panel));
}

.bix-ui-demo-search-result:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.bix-ui-demo-search-result-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.bix-ui-demo-search-result-main strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.2;
}

.bix-ui-demo-search-result-main span,
.bix-ui-demo-search-result-description,
.bix-ui-demo-search-empty {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.bix-ui-demo-search-result-description {
  display: block;
}

.bix-ui-demo-search-result code {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-alt);
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
}

.bix-ui-demo-search-empty {
  padding: 8px;
}

.bix-ui-demo-head-tools {
  display: flex;
  align-items: flex-start;
  flex: 0 1 380px;
  justify-content: flex-end;
  min-width: min(100%, 300px);
}

.bix-ui-demo-theme-tools {
  display: grid;
  align-content: start;
  align-items: start;
  justify-items: end;
  gap: 8px;
}

.bix-ui-demo-theme-actions {
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.bix-ui-demo-head-tools .theme-picker-control {
  justify-content: flex-end;
}

.bix-ui-demo-card {
  min-width: 0;
}

.bix-ui-demo-sections {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.bix-ui-demo-parent-boundaries :where(
  .field,
  .bix-ui-demo-control-example,
  .bix-ui-demo-icon-cell,
  .bix-ui-demo-line-section-body-panel,
  .bix-ui-demo-recipe-card,
  .bix-ui-demo-token,
  .bix-ui-demo-type-specimen,
  .bix-ui-demo-type-token,
  .data-table-filter-custom-control,
  .inputs-number-frame
) {
  outline: 1px dashed color-mix(in oklab, var(--color-primary, var(--accent-2)) 48%, var(--border-subtle, var(--panel-border-soft)));
  outline-offset: 4px;
  border-radius: var(--radius-sm, 6px);
}

.bix-ui-demo-parent-boundaries :where(
  .checkbox-control,
  .color-control,
  .data-table-select-control,
  .input-control,
  .select-control,
  .table-header-filter-select,
  .theme-picker-control,
  .ui-button,
  .ui-card,
  .ui-split-button,
  .bix-ui-demo-search-result,
  .ui-tabs,
  .bix-ui-demo-sidebar-link
) {
  outline: 1px solid color-mix(in oklab, var(--bad) 32%, var(--border-subtle, var(--panel-border-soft)));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

.bix-ui-demo-line-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.bix-ui-demo-line-section-heading {
  display: grid;
  grid-template-columns: auto minmax(32px, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-inline-start: 8px;
}

.bix-ui-demo-line-section-title {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  text-align: start;
}

.bix-ui-demo-line-section-rule {
  min-width: 32px;
  border-top: 1px solid color-mix(in oklab, var(--border-subtle, var(--panel-border-soft)) 82%, transparent);
}

.bix-ui-demo-line-section-horizontal .bix-ui-demo-line-section-rule:first-child {
  display: none;
}

.bix-ui-demo-line-section-body {
  min-width: 0;
}

.bix-ui-demo-line-section-body-panel {
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in oklab, var(--panel-alt) 68%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 24%, transparent);
  padding: 12px;
}

.bix-ui-demo-line-section-vertical {
  grid-template-columns: max-content minmax(0, 1fr);
  -moz-column-gap: 12px;
       column-gap: 12px;
}

.bix-ui-demo-line-section-vertical .bix-ui-demo-line-section-heading {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  padding-inline-start: 0;
}

.bix-ui-demo-line-section-vertical .bix-ui-demo-line-section-rule:first-child {
  display: none;
}

.bix-ui-demo-line-section-vertical .bix-ui-demo-line-section-rule {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  border-top: 0;
  border-left: 1px solid color-mix(in oklab, var(--border-subtle, var(--panel-border-soft)) 82%, transparent);
}

.demo-event-audit {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.demo-event-empty {
  color: var(--muted);
  font-size: 0.82rem;
}

.demo-event-entry {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-bottom: 1px solid var(--panel-border-soft);
  color: var(--muted);
  font-size: 0.78rem;
  padding-block: 4px;
}

.demo-event-entry:last-child {
  border-bottom: 0;
}

.demo-event-entry strong,
.demo-event-entry span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-event-entry strong {
  color: var(--text);
}

.demo-event-entry code {
  border-radius: var(--radius-sm, 6px);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.72rem;
  padding: 2px 5px;
}

.bix-ui-demo .ui-tabs-segmented {
  width: 100%;
}

.bix-ui-demo .theme-segmented-control-icon-only.ui-tabs-segmented {
  width: -moz-max-content;
  width: max-content;
}

.bix-ui-demo-theme-grid,
.bix-ui-demo-control-grid,
.bix-ui-demo-recipe-grid,
.bix-ui-demo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px;
  min-width: 0;
}

.bix-ui-demo-control-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.bix-ui-demo-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.bix-ui-demo-control-example {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-border-soft);
  border-radius: 8px;
  background: var(--panel-alt);
}

@media (max-width: 768px) {
  .field-grid {
    grid-template-columns: 1fr;
  }

  .card-list {
    grid-template-columns: 1fr;
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell-sidebar {
    display: none;
  }

  .app-shell-menu-button {
    display: inline-flex;
  }

  .app-shell-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .app-shell-actions {
    width: 100%;
  }

  .bix-ui-demo-head {
    flex-direction: column;
  }

  .bix-ui-demo-head-tools {
    flex: 0 1 auto;
    width: 100%;
    justify-content: flex-start;
  }

  .bix-ui-demo-theme-tools {
    justify-items: start;
  }

  .bix-ui-demo-theme-actions {
    justify-content: flex-start;
  }

  .bix-ui-demo-head-tools .theme-picker-control {
    justify-content: flex-start;
  }

  .bix-ui-demo-search {
    width: 100%;
  }

  .bix-ui-demo {
    grid-template-columns: minmax(0, 1fr);
  }

  .bix-ui-demo-sidebar {
    position: static;
  }

  .bix-ui-demo-sidebar-panel {
    max-height: none;
    overflow: visible;
  }

  .bix-ui-demo-sidebar-list {
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  }
}
.app-shell-brand-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.app-shell-brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
  background: var(--panel-alt);
}

.app-shell-brand-mark > img,
.app-shell-brand-mark > svg {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.app-shell-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.app-shell-brand-title,
.app-shell-brand-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell-brand-title {
  color: var(--accent-3);
  font-size: 1.05rem;
  font-weight: 850;
}

.app-shell-brand-subtitle {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-brand-content {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
}

.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-brand-mark {
  width: 40px;
  height: 40px;
}

.app-shell[data-sidebar-state="collapsed"] > .app-shell-sidebar .app-shell-brand-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

@media (max-width: 768px) {
  .app-shell[data-mobile-nav-mode="inline"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell[data-mobile-nav-mode="inline"] > .app-shell-sidebar {
    position: static;
    display: grid;
    grid-template-rows: auto auto;
    height: auto;
    gap: 12px;
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--panel-border-soft);
  }

  .app-shell[data-mobile-nav-mode="inline"] .app-shell-menu-button {
    display: none;
  }

  .app-shell[data-mobile-nav-mode="inline"] .app-shell-nav {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .app-shell[data-mobile-nav-mode="inline"] .app-shell-nav-link {
    flex: 0 0 auto;
    min-height: 44px;
  }
}
.docked-panel-layout {
  --docked-panel-left-width: min(320px, calc(100vw - 32px));
  --docked-panel-right-width: min(380px, calc(100vw - 32px));
  --docked-panel-left-track: 0px;
  --docked-panel-right-track: 0px;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--docked-panel-left-track) minmax(0, 1fr) var(--docked-panel-right-track);
  transition: grid-template-columns var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.docked-panel-layout[data-left-state="open"] {
  --docked-panel-left-track: var(--docked-panel-left-width);
}

.docked-panel-layout[data-right-state="open"] {
  --docked-panel-right-track: var(--docked-panel-right-width);
}

.docked-panel-layout-left {
  grid-column: 1;
}

.docked-panel-layout-main {
  grid-column: 2;
  min-width: 0;
}

.docked-panel-layout-right {
  grid-column: 3;
}

.docked-panel-layout-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.docked-panel,
.docked-panel-layout-panel > .docked-panel {
  --docked-panel-width: min(380px, calc(100vw - 32px));
  width: var(--docked-panel-width);
  max-width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--ink, var(--text));
  border-color: var(--docked-panel-border, var(--panel-border-soft));
  background: var(--docked-panel-bg, var(--panel));
}

.docked-panel-side-left {
  border-right: 1px solid var(--docked-panel-border, var(--panel-border-soft));
}

.docked-panel-side-right {
  border-left: 1px solid var(--docked-panel-border, var(--panel-border-soft));
}

.docked-panel-header,
.docked-panel-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border-color: var(--docked-panel-border, var(--panel-border-soft));
}

.docked-panel-header {
  border-bottom: 1px solid var(--docked-panel-border, var(--panel-border-soft));
}

.docked-panel-footer {
  border-top: 1px solid var(--docked-panel-border, var(--panel-border-soft));
}

.docked-panel-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.docked-panel-heading h2 {
  margin: 0;
  color: var(--accent-3, var(--ink));
  font-size: 1rem;
  line-height: 1.25;
}

.docked-panel-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.docked-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.docked-panel-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.docked-panel-global-shell {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  pointer-events: none;
}

.docked-panel-global-shell[data-side="right"] {
  justify-items: end;
}

.docked-panel-global-shell[data-side="left"] {
  justify-items: start;
}

.docked-panel-global-shell > .docked-panel {
  height: 100vh;
  pointer-events: auto;
  box-shadow: var(--docked-panel-shadow, var(--shadow));
}

html.docked-panel-global-right-open body {
  padding-right: var(--docked-panel-global-right-width, var(--docked-panel-global-width, min(380px, 100vw)));
  transition: padding-right var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

html.docked-panel-global-left-open body {
  padding-left: var(--docked-panel-global-left-width, var(--docked-panel-global-width, min(380px, 100vw)));
  transition: padding-left var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.theme-editor-drawer .docked-panel-body {
  overflow: hidden;
  padding: 0;
}

.app-shell {
  --app-shell-left-panel-width: min(320px, calc(100vw - 32px));
  --app-shell-right-panel-width: min(380px, calc(100vw - 32px));
  --app-shell-left-panel-track: 0px;
  --app-shell-right-panel-track: 0px;
  grid-template-columns: var(--app-shell-sidebar-width) var(--app-shell-left-panel-track) minmax(0, 1fr) var(--app-shell-right-panel-track);
}

.app-shell[data-sidebar-state="collapsed"] {
  grid-template-columns: var(--app-shell-sidebar-collapsed-width) var(--app-shell-left-panel-track) minmax(0, 1fr) var(--app-shell-right-panel-track);
}

.app-shell[data-left-panel-state="open"] {
  --app-shell-left-panel-track: var(--app-shell-left-panel-width);
}

.app-shell[data-right-panel-state="open"] {
  --app-shell-right-panel-track: var(--app-shell-right-panel-width);
}

.app-shell-sidebar {
  grid-column: 1;
}

.app-shell-left-panel {
  grid-column: 2;
}

.app-shell-main {
  grid-column: 3;
}

.app-shell-right-panel {
  grid-column: 4;
}

.app-shell-docked-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.app-shell-docked-panel[data-state="open"] > .docked-panel {
  position: sticky;
  top: 0;
  height: 100vh;
}

.bix-ui-demo-docked-stage {
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel);
}

.bix-ui-demo-docked-main {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  min-height: 280px;
  padding: 16px;
  background: color-mix(in oklab, var(--panel-alt) 66%, var(--panel));
}

.bix-ui-demo-docked-main p {
  max-width: 48ch;
  margin: 0;
  color: var(--muted);
}

.bix-ui-demo-docked-list,
.bix-ui-demo-docked-meta {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bix-ui-demo-docked-list button {
  min-height: 34px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-alt);
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 7px 9px;
}

.bix-ui-demo-docked-meta {
  color: var(--text);
  font-size: 0.88rem;
}

@media (max-width: 768px) {
  .docked-panel-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .docked-panel-layout-main {
    grid-column: 1;
  }

  .docked-panel-layout-panel[data-state="open"] {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: grid;
    background: var(--modal-backdrop, rgba(0, 0, 0, 0.45));
  }

  .docked-panel-layout-panel[data-state="open"] > .docked-panel {
    width: 100vw;
    min-width: 0;
    justify-self: stretch;
    box-shadow: var(--docked-panel-shadow, var(--shadow));
  }

  html.docked-panel-global-right-open body,
  html.docked-panel-global-left-open body {
    padding-right: 0;
    padding-left: 0;
  }

  .docked-panel-global-shell > .docked-panel {
    width: 100vw;
    min-width: 0;
  }

  .app-shell,
  .app-shell[data-sidebar-state="collapsed"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell-main {
    grid-column: 1;
  }

  .app-shell-docked-panel[data-state="open"] {
    position: fixed;
    inset: 0;
    z-index: 76;
    display: grid;
    background: var(--modal-backdrop, rgba(0, 0, 0, 0.45));
  }

  .app-shell-left-panel,
  .app-shell-right-panel {
    grid-column: 1;
  }

  .app-shell-docked-panel[data-state="open"] > .docked-panel {
    position: static;
    width: 100vw;
    min-width: 0;
    box-shadow: var(--docked-panel-shadow, var(--shadow));
  }
}
.bix-ui-demo-type-grid,
.bix-ui-demo-type-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
  min-width: 0;
}

.bix-ui-demo-type-specimen,
.bix-ui-demo-type-token {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--panel-border-soft);
  border-radius: 12px;
  background: var(--panel-alt);
}

.bix-ui-demo-type-token {
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
  align-items: center;
}

.bix-ui-demo-type-token > :last-child {
  grid-column: 1 / -1;
}

.bix-ui-demo-type-truncate {
  max-width: 260px;
}

.bix-ui-demo-type-wrap {
  max-width: 36rem;
}

.bix-ui-demo-token,
.bix-ui-demo-recipe-card {
  min-width: 0;
  border: 1px solid var(--panel-border-soft);
  background: var(--panel-alt);
}

.bix-ui-demo-token {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 10px;
}

.bix-ui-demo-token-swatch {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  border: 1px solid var(--panel-border-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, white 22%, transparent);
}

.bix-ui-demo-token-label,
.bix-ui-demo-token-name {
  display: block;
  min-width: 0;
}

.bix-ui-demo-token-label {
  color: var(--accent-3);
  font-size: 0.88rem;
  font-weight: 750;
}

.bix-ui-demo-token-name {
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.bix-ui-demo-recipe-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
}

.bix-ui-demo-recipe-name {
  color: var(--accent-3);
  font-size: 0.82rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.bix-ui-demo-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.bix-ui-demo-icon-sections {
  display: grid;
  gap: 16px;
}

.bix-ui-demo-icon-palette {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.bix-ui-demo-icon-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border-soft);
  background: var(--panel-alt);
  color: var(--accent-3);
  font-size: 0.85rem;
  font-weight: 650;
}
.execution-output {
  max-height: min(480px, 45vh);
  white-space: pre-wrap;
  word-break: break-word;
}

.execution-progress-list {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}

.execution-progress-card {
  background:
    linear-gradient(180deg, rgba(31, 111, 139, 0.04), transparent 50%),
    var(--panel-alt);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--panel-border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.execution-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.execution-progress-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-3);
}

.execution-progress-percent {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

.execution-progress-track {
  position: relative;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklab, var(--panel-border-soft) 75%, var(--panel-alt));
  border: 1px solid var(--panel-border-soft);
}

.execution-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 72%, white), var(--accent));
  transition: width var(--motion-duration-slow, 220ms) var(--motion-ease-standard, ease);
}

.execution-progress-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.82rem;
  color: var(--muted);
}

.table.stable-columns.execution-table .exec-col-type,
.table.execution-table .exec-col-type {
  width: 112px;
}

.table.stable-columns.execution-table .exec-col-status,
.table.execution-table .exec-col-status {
  width: 116px;
}

.table.stable-columns.execution-table .exec-col-started,
.table.execution-table .exec-col-started {
  width: 188px;
}

.table.stable-columns.execution-table .exec-col-duration,
.table.execution-table .exec-col-duration {
  width: 104px;
}

.table.stable-columns.execution-table .exec-col-actions,
.table.execution-table .exec-col-actions {
  width: 88px;
}

.table.stable-columns.execution-table .exec-col-summary,
.table.execution-table .exec-col-summary {
  min-width: 0;
}

.execution-summary-text {
  display: block;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-row-button {
  cursor: pointer;
}

.table-row-button:focus-visible td,
.table-row-button:hover td {
  background: var(--table-row-hover);
}

@media (max-width: 600px) {
  .toast-viewport {
    right: 12px;
    left: 12px;
    width: auto;
  }
}

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

.table-wrap .table {
  min-width: 640px;
}
.bix-ui-demo-motion-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.bix-ui-demo-motion {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.bix-ui-demo-motion-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 10px;
  min-width: 0;
}

.bix-ui-demo-motion-token {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel);
}

.bix-ui-demo-motion-token strong,
.bix-ui-demo-motion-token span {
  display: block;
  min-width: 0;
}

.bix-ui-demo-motion-token strong {
  color: var(--accent-3);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.bix-ui-demo-motion-token span span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.bix-ui-demo-motion-token code {
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 0.76rem;
  padding: 4px 6px;
}

.bix-ui-demo-motion-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
  min-width: 0;
}

.bix-ui-demo-motion-card {
  min-width: 0;
  transition:
    transform var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    border-color var(--motion-duration-fast, 90ms) var(--motion-ease-standard, ease);
}

.bix-ui-demo-motion-card:hover {
  transform: translateY(var(--motion-translate-hover, -1px)) scale(var(--motion-scale-hover, 1.01));
}

.bix-ui-demo-motion-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bix-ui-demo-motion-panel-preview {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 96px;
  overflow: hidden;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in oklab, var(--panel-alt) 72%, transparent);
  padding: 14px;
}

.bix-ui-demo-motion-panel {
  display: block;
  width: min(80%, 240px);
  height: 28px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in oklab, var(--accent) 20%, var(--panel));
  animation: bix-demo-motion-enter calc(var(--motion-duration-slow, 220ms) * 5) var(--motion-ease-enter, ease-out) infinite alternate;
}

.bix-ui-demo-motion-panel.is-secondary {
  width: min(60%, 180px);
  background: color-mix(in oklab, var(--ok) 18%, var(--panel));
  animation-delay: calc(var(--motion-duration-fast, 90ms) * 2);
}

.bix-ui-demo-motion-scene {
  min-height: 132px;
}

.bix-ui-demo-motion-scene .theme-scene-content {
  align-content: end;
  gap: 4px;
  color: var(--accent-3);
  font-weight: 800;
}

.bix-ui-demo-motion-scene strong {
  color: var(--accent);
  font-size: 0.78rem;
}

.bix-ui-demo-motion-lane {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.bix-ui-demo-motion-track {
  position: relative;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--accent) 10%, transparent), transparent 42%),
    var(--panel);
}

.bix-ui-demo-motion-runner {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--panel-border-soft));
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in oklab, var(--accent) 16%, var(--panel-alt));
  color: var(--accent-3);
  font-size: 0.8rem;
  font-weight: 800;
  animation: bix-demo-motion-runner calc(var(--motion-duration-slow, 220ms) * 10) var(--motion-ease-standard, ease) infinite alternate;
}

.bix-ui-demo-motion-lane-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bix-ui-demo-motion.is-reduced *,
.bix-ui-demo-motion.is-reduced *::before,
.bix-ui-demo-motion.is-reduced *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

.bix-ui-demo-motion.is-reduced .bix-ui-demo-motion-card:hover {
  transform: none;
}

.bix-ui-demo-motion.is-reduced .bix-ui-demo-motion-panel,
.bix-ui-demo-motion.is-reduced .bix-ui-demo-motion-runner {
  animation: none !important;
  transform: none;
}

@keyframes bix-demo-motion-enter {
  from {
    opacity: 0.64;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bix-demo-motion-runner {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(min(420px, calc(100vw - 260px)));
  }
}
.bix-ui-demo-docs-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in oklab, var(--panel-soft) 78%, transparent);
}

.bix-ui-demo-docs-main {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}

.bix-ui-demo-docs-main h3,
.bix-ui-demo-docs-main p {
  margin: 0;
}

.bix-ui-demo-docs-main h3 {
  color: var(--accent-3);
  font-size: var(--type-size-lg, 1rem);
}

.bix-ui-demo-docs-main p,
.bix-ui-demo-docs-grid p {
  color: var(--muted);
  font-size: var(--type-size-sm, 0.86rem);
  line-height: var(--type-line-normal, 1.45);
}

.bix-ui-demo-docs-main code {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 3px 7px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm, 6px);
  color: var(--text);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: var(--type-size-xs, 0.76rem);
}

.bix-ui-demo-docs-main a {
  width: -moz-max-content;
  width: max-content;
  color: var(--color-primary);
  font-size: var(--type-size-sm, 0.86rem);
  font-weight: 650;
}

.bix-ui-demo-docs-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.bix-ui-demo-docs-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in oklab, var(--panel) 84%, transparent);
}

.bix-ui-demo-docs-grid p {
  margin: 4px 0 0;
}

.bix-ui-demo-docs-examples {
  grid-column: 1 / -1;
}

.bix-code-examples {
  display: grid;
  gap: 10px;
}

.bix-code-examples-head {
  display: grid;
  gap: 2px;
}

.bix-code-examples-head h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--type-size-md, 0.95rem);
}

.bix-code-examples-list {
  display: grid;
  gap: 10px;
}

.bix-code-example {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in oklab, var(--panel) 86%, transparent);
}

.bix-code-example-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.bix-code-example-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.bix-code-example-copy h4,
.bix-code-example-copy p {
  margin: 0;
}

.bix-code-example-copy h4 {
  color: var(--text);
  font-size: var(--type-size-sm, 0.86rem);
}

.bix-code-example-copy p {
  color: var(--muted);
  font-size: var(--type-size-sm, 0.86rem);
  line-height: var(--type-line-normal, 1.45);
}

.bix-code-example-meta,
.bix-code-example-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.bix-code-example-meta code,
.bix-code-example-meta span {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 2px 6px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-alt);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--type-size-xs, 0.76rem);
}

.bix-code-example-status {
  min-height: 1em;
  color: var(--muted);
  font-size: var(--type-size-xs, 0.76rem);
}

.bix-code-example-source {
  max-height: 420px;
  overflow: auto;
  margin: 0;
  padding: 0.85rem;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm, 6px);
  background: var(--output-bg, var(--panel-alt));
  color: var(--output-fg, var(--ink));
  font-family: var(--font-mono);
  font-size: var(--type-size-sm, 0.82rem);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .bix-ui-demo-docs-panel,
  .bix-ui-demo-docs-grid {
    grid-template-columns: 1fr;
  }

  .bix-code-example-head {
    display: grid;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.async {
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--panel-border-soft);
  background: var(--panel-alt);
}

.async.async-compact {
  padding: 12px;
}

.async-title {
  font-weight: 800;
  font-size: 1rem;
}

.async-label,
.async-desc {
  color: var(--muted);
  font-size: 0.9rem;
}

.async-actions {
  margin-top: 8px;
}

.skeleton-stack {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.skeleton-line {
  width: var(--skeleton-line-width, 100%);
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(47, 59, 79, 0.08),
    rgba(47, 59, 79, 0.16),
    rgba(47, 59, 79, 0.08)
  );
  background-size: 220% 100%;
  animation: shimmer var(--motion-duration-slow, 220ms) var(--motion-ease-standard, ease) infinite;
}

.async-loading .skeleton-line:nth-child(2) {
  width: 92%;
}

.async-loading .skeleton-line:nth-child(3) {
  width: 80%;
}

.ui-progress-bar {
  display: grid;
  gap: 8px;
  color: var(--ink);
}

.ui-progress-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.ui-progress-bar-label {
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ui-progress-bar-value {
  flex: none;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ui-progress-bar-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--panel-border-soft);
  background: color-mix(in oklab, var(--panel-alt) 74%, var(--panel));
}

.ui-progress-bar-fill {
  width: var(--progress-bar-value, 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--progress-bar-fill, var(--accent));
  transition: width var(--motion-duration-slow, 220ms) var(--motion-ease-standard, ease);
}

.ui-progress-bar.is-indeterminate .ui-progress-bar-fill {
  width: 42%;
  animation: progress-indeterminate var(--motion-duration-slow, 220ms) var(--motion-ease-standard, ease) infinite;
}

.ui-progress-bar-accent {
  --progress-bar-fill: var(--accent);
}

.ui-progress-bar-ok {
  --progress-bar-fill: var(--ok);
}

.ui-progress-bar-warn {
  --progress-bar-fill: var(--warn);
}

.ui-progress-bar-bad {
  --progress-bar-fill: var(--bad);
}

.ui-progress-bar-neutral {
  --progress-bar-fill: var(--accent-3);
}

.ui-progress-bar-description {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

@keyframes shimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-115%);
  }
  100% {
    transform: translateX(240%);
  }
}

.chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ui-border, transparent);
  background: var(--ui-bg, rgba(47, 59, 79, 0.12));
  color: var(--ui-fg, var(--accent-3));
}

.meta {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.meta span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.mono {
  font-family: var(--font-mono), "SFMono-Regular", monospace;
}

.output {
  background: var(--output-bg);
  color: var(--output-fg);
  border-radius: 12px;
  padding: 12px;
  font-size: 0.82rem;
  max-height: 160px;
  overflow: auto;
  border: 1px solid var(--output-border);
}
.compact-action-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.compact-action-control {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--ui-bg, transparent);
  color: var(--ui-fg, color-mix(in oklab, var(--accent-3) 78%, var(--ink)));
  box-shadow: none;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    opacity var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.compact-action-control svg {
  width: 18px;
  height: 18px;
}

.compact-action-control:hover:not(:disabled),
.compact-action-control:focus-visible {
  color: var(--ui-hover-fg, var(--ui-fg, color-mix(in oklab, var(--accent-3) 78%, var(--ink))));
  background: var(--ui-hover-bg, transparent);
  border-color: var(--ui-hover-border, transparent);
}

.compact-action-control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ui-ring, color-mix(in oklab, var(--accent) 26%, transparent));
}

.compact-action-control.is-active,
.compact-action-control[data-state="open"] {
  color: var(--ui-active-fg, var(--ui-hover-fg, var(--ui-fg, color-mix(in oklab, var(--accent-3) 78%, var(--ink)))));
  background: var(--ui-active-bg, var(--ui-hover-bg, transparent));
  border-color: var(--ui-active-border, var(--ui-hover-border, transparent));
  box-shadow: 0 0 0 1px var(--ui-ring, color-mix(in oklab, var(--accent) 26%, transparent));
}

.compact-action-control:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.compact-action-status {
  cursor: default;
}

.compact-action-status:hover,
.compact-action-status:focus-visible {
  color: var(--ui-fg, color-mix(in oklab, var(--accent-3) 78%, var(--ink)));
  background: var(--ui-hover-bg, transparent);
}

.compact-action-menu-trigger {
  list-style: none;
}

.compact-action-menu-trigger::-webkit-details-marker {
  display: none;
}

.table-actions .icon-button svg {
  width: 18px;
  height: 18px;
}

.icon-button.compact svg {
  width: 18px;
  height: 18px;
}

.icon-button:hover {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 62%, var(--panel-border-soft));
  box-shadow: 0 6px 14px rgba(17, 18, 19, 0.14);
}

.icon-button.compact:hover {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 768px) {
  .icon-button.compact {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .icon-button.compact svg {
    width: 18px;
    height: 18px;
  }

  .compact-action-control {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}
.tooltip-wrap {
  position: relative;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.tooltip-block,
.nav-link-tooltip {
  display: block;
}

.ui-tooltip {
  position: fixed;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(28rem, calc(100vw - 24px));
  padding: 6px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
}

.ui-tooltip-content {
  white-space: pre-line;
}

.ui-tooltip-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--panel);
}

.ui-tooltip-side-top {
  transform: translate(-50%, -100%);
}

.ui-tooltip-side-top .ui-tooltip-arrow {
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
}

.ui-tooltip-side-bottom {
  transform: translate(-50%, 0);
}

.ui-tooltip-side-bottom .ui-tooltip-arrow {
  left: 50%;
  top: -5px;
  transform: translateX(-50%) rotate(45deg);
  border-left: 1px solid var(--panel-border);
  border-top: 1px solid var(--panel-border);
}

.ui-tooltip-side-right {
  transform: translate(0, -50%);
}

.ui-tooltip-side-right .ui-tooltip-arrow {
  left: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-left: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
}

.ui-tooltip-side-left {
  transform: translate(-100%, -50%);
}

.ui-tooltip-side-left .ui-tooltip-arrow {
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-right: 1px solid var(--panel-border);
  border-top: 1px solid var(--panel-border);
}

.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ui-border, transparent);
  background: var(--ui-bg, rgba(47, 59, 79, 0.12));
  color: var(--ui-fg, var(--accent-3));
  transition:
    color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.status-pill-link {
  text-decoration: none;
}

.status-pill-link:hover {
  color: var(--ui-hover-fg, var(--ui-fg, var(--accent-3)));
  background: var(--ui-hover-bg, var(--ui-bg, rgba(47, 59, 79, 0.12)));
  border-color: var(--ui-hover-border, var(--ui-border, transparent));
  filter: none;
}

.status-pill-link:focus-visible {
  outline: 2px solid var(--ui-ring, rgba(31, 111, 139, 0.28));
  outline-offset: 2px;
}

.status-dot {
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  color: currentColor;
}

.status-dot .app-icon,
.status-dot svg {
  width: 14px;
  height: 14px;
}

.ui-surface {
  color: var(--ui-fg, var(--ink));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ui-border, var(--accent-border)) 18%, transparent), transparent 30%),
    var(--ui-bg, var(--card-bg));
  border: 1px solid var(--ui-border, var(--card-border));
  border-radius: var(--card-radius);
  box-shadow:
    var(--card-shadow),
    inset 0 0 0 1px color-mix(in oklab, white 8%, transparent);
}

.ui-surface-padded {
  padding: 20px;
}

.ui-card {
  --ui-card-padding: 18px;
  --ui-card-gap: 14px;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--ink);
  text-decoration: none;
}

.ui-card-elevated {
  box-shadow: var(--card-shadow);
}

.ui-card-dense {
  --ui-card-padding: 12px;
  --ui-card-gap: 10px;
}

.ui-card-interactive {
  cursor: pointer;
  transition:
    transform var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease),
    background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.ui-card-interactive:hover,
.ui-card-interactive:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--color-accent) 36%, var(--card-border));
  background: color-mix(in oklab, var(--color-accent) 5%, var(--card-bg));
  box-shadow: var(--card-shadow);
  outline: none;
}

.ui-card-tone-accent,
.ui-card-tone-primary {
  border-color: color-mix(in oklab, var(--color-accent) 40%, var(--card-border));
}

.ui-card-tone-primary {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 10%, transparent), transparent 44%),
    var(--card-bg);
}

.ui-card-tone-positive {
  border-color: color-mix(in oklab, var(--color-success) 42%, var(--card-border));
}

.ui-card-tone-negative {
  border-color: color-mix(in oklab, var(--color-danger) 42%, var(--card-border));
}

.ui-card-tone-warning {
  border-color: color-mix(in oklab, var(--color-warning) 46%, var(--card-border));
}

.ui-card-header,
.ui-card-body,
.ui-card-footer {
  min-width: 0;
  padding-inline: var(--ui-card-padding);
}

.ui-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-card-gap);
  padding-block: var(--ui-card-padding) 0;
}

.ui-card-header-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ui-card-header-copy strong {
  color: var(--ink);
  font-size: var(--type-size-md);
  line-height: var(--type-line-snug);
}

.ui-card-header-copy p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-size-sm);
  line-height: var(--type-line-normal);
}

.ui-card-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.ui-card-body {
  display: grid;
  gap: var(--ui-card-gap);
  padding-block: var(--ui-card-gap);
}

.ui-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--card-border);
  background: var(--surface-card-muted);
  padding-block: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes ui-button-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 20px;
}

.dialog {
  position: relative;
  overflow: hidden;
  width: min(820px, 100%);
  background:
    linear-gradient(180deg, rgba(31, 111, 139, 0.08), transparent 26%),
    var(--modal-bg);
  border-radius: 20px;
  box-shadow: var(--modal-shadow);
  border: 1px solid var(--modal-border);
  padding: 22px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 20px;
  max-height: 88vh;
}

.dialog-wide {
  width: min(1120px, 100%);
}

.dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}

.section-card {
  background:
    linear-gradient(180deg, rgba(31, 111, 139, 0.05), transparent 30%),
    var(--card-bg);
  padding: 22px 24px;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: 1px solid color-mix(in oklab, var(--card-border) 82%, var(--accent-border));
  display: grid;
  gap: 18px;
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.section-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  flex: 1;
  min-width: 240px;
  text-align: left;
}

.section-toggle-static {
  cursor: default;
}

.section-toggle:hover,
.section-toggle:focus-visible {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.section-chevron {
  font-size: 1rem;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform var(--motion-duration-slow, 220ms) var(--motion-ease-enter, ease);
}

.section-chevron.open {
  transform: rotate(0deg);
}

.section-title {
  display: grid;
  gap: 4px;
  font-weight: 700;
  font-size: 1.2rem;
}

.section-subtitle {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}

.section-summary {
  margin-left: 14px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: right;
}

.section-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.section-disclosure-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.section-card-body {
  display: grid;
  gap: 16px;
}

.job-meta-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding: 12px;
  border-radius: 14px;
  background: var(--panel-alt);
  border: 1px solid var(--panel-border-soft);
}

.storage-stepper {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.storage-step-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--panel-alt);
  border: 1px solid var(--panel-border-soft);
}

.storage-next-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(31, 111, 139, 0.18);
  background:
    linear-gradient(180deg, rgba(31, 111, 139, 0.08), transparent 48%),
    var(--panel-alt);
}

.storage-next-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.storage-next-card-title {
  font-weight: 700;
  font-size: 1.02rem;
}

.storage-next-card-detail {
  line-height: 1.5;
}

.storage-secondary-actions {
  display: grid;
  gap: 10px;
}

.danger-panel {
  border-color: rgba(208, 79, 59, 0.2);
  background:
    linear-gradient(180deg, rgba(208, 79, 59, 0.08), transparent 42%),
    var(--panel-alt);
}

.danger-panel-title {
  color: var(--bad);
}

.danger-panel-detail {
  max-width: 76ch;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dialog-header h3 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--accent);
}

.dialog-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.dialog-body {
  display: grid;
  gap: 16px;
  overflow: auto;
  padding-right: 4px;
  min-height: 0;
}

.dialog-body::-webkit-scrollbar {
  width: 8px;
}

.dialog-body::-webkit-scrollbar-thumb {
  background: rgba(31, 111, 139, 0.25);
  border-radius: 10px;
}

.dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .dialog-backdrop {
    place-items: end center;
    padding: 12px;
  }

  .dialog {
    max-height: calc(100vh - 12px);
    border-radius: 22px;
    padding: 18px;
    gap: 16px;
  }

  .dialog-header {
    gap: 12px;
  }

  .dialog-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
  }

  .dialog-actions > .tooltip-wrap,
  .dialog-actions > button,
  .dialog-actions > a {
    width: 100%;
  }

  .dialog-actions > .tooltip-wrap > button,
  .dialog-actions > .tooltip-wrap > a,
  .dialog-actions > button {
    width: 100%;
    min-height: 44px;
  }

  .storage-next-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .dialog-actions button.secondary,
  .dialog-actions button.ghost {
    order: 1;
  }

  .dialog-actions button:not(.secondary):not(.ghost) {
    order: 2;
  }
}
.action-menu {
  position: relative;
  display: inline-block;
}

.action-menu-trigger {
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel-alt);
  color: var(--text);
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 700;
  font-size: 0.85rem;
}

.action-menu-trigger.compact-action-menu-trigger {
  padding: 0;
  border: none;
  background: transparent;
  min-height: auto;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  box-shadow: none;
}

.action-menu-trigger.compact-action-menu-trigger:hover {
  box-shadow: none;
}

.action-menu-trigger::-webkit-details-marker {
  display: none;
}

.action-menu-panel {
  --dropdown-panel-max-width: min(18rem, calc(100vw - 16px));
  position: fixed;
  z-index: 50;
  min-width: min(max(var(--dropdown-trigger-width, 0px), 11rem), var(--dropdown-panel-max-width));
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 8px;
}

.action-menu-panel[hidden] {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}

.action-menu-panel .secondary,
.action-menu-panel button,
.action-menu-panel a {
  width: 100%;
  justify-content: center;
}
.ui-dropdown,
.ui-popover {
  display: inline-flex;
}

.ui-dropdown-trigger,
.ui-popover-trigger {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
}

.ui-dropdown-panel,
.ui-popover-panel,
.ui-menu,
.assistant-panel,
.chart-frame,
.selection-control,
.schedule-resource {
  background: var(--dropdown-panel-bg, var(--surface-card));
  border: 1px solid var(--dropdown-panel-border, var(--border-subtle));
  border-radius: var(--dropdown-panel-radius, var(--radius-md));
  color: var(--dropdown-panel-fg, var(--text));
  box-shadow: var(--dropdown-panel-shadow, var(--shadow));
}

.ui-dropdown-panel,
.ui-popover-panel {
  --dropdown-panel-max-width: calc(100vw - 16px);
  --dropdown-panel-max-height: calc(100vh - 16px);
  --overlay-panel-enter-y: -2px;
  max-width: var(--dropdown-panel-max-width);
  max-height: var(--dropdown-panel-max-height);
  max-height: min(var(--dropdown-panel-max-height), calc(100dvh - 16px));
  transform-origin: top left;
  animation: ui-overlay-panel-enter var(--motion-duration-fast, 120ms) var(--motion-ease-enter, var(--motion-ease-standard, ease)) both;
}

.ui-dropdown-panel[data-placement^="top"],
.ui-popover-panel[data-placement^="top"] {
  --overlay-panel-enter-y: 2px;
  transform-origin: bottom left;
}

.ui-dropdown-panel[data-placement$="end"],
.ui-popover-panel[data-placement$="end"] {
  transform-origin: top right;
}

.ui-dropdown-panel[data-placement^="top"][data-placement$="end"],
.ui-popover-panel[data-placement^="top"][data-placement$="end"] {
  transform-origin: bottom right;
}

.ui-menu {
  display: grid;
  gap: var(--dropdown-list-gap, 0.125rem);
  min-width: 12rem;
  padding: var(--dropdown-panel-padding, 0.35rem);
}

.ui-dropdown-panel > .ui-menu,
.ui-popover-panel > .ui-menu {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ui-menubar {
  display: inline-flex;
  min-width: 0;
}

.ui-menu-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.125rem;
  -moz-column-gap: 0.55rem;
       column-gap: 0.55rem;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  padding: 0.45rem 0.55rem;
  text-align: left;
  text-decoration: none;
}

.ui-menu-item-copy {
  display: grid;
  min-width: 0;
  gap: 0.125rem;
}

.ui-menu-item-icon,
.ui-menu-item-shortcut {
  color: var(--muted);
}

.ui-menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui-menu-item-shortcut {
  font-size: var(--type-size-xs);
}

.ui-menu-item:is(:hover, :focus-visible, .is-active),
.listbox-option:is(:hover, :focus-visible, .is-active),
.ui-tree-content:is(:hover, :focus-visible) {
  outline: 2px solid transparent;
  background: var(--dropdown-item-hover-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));
  box-shadow: 0 0 0 2px var(--dropdown-item-focus-ring, var(--ring));
}

.ui-menu-item-tone-danger {
  color: var(--color-danger);
}

.command-palette-item-tone-negative {
  color: var(--color-danger);
}

.ui-menu-item-description,
.ui-menu-group-label,
.selection-option small,
.listbox-option small,
.ui-tree-description,
.schedule-event small,
.assistant-message-role {
  color: var(--muted);
  font-size: var(--type-size-xs);
}

.ui-menu-separator {
  height: 1px;
  margin: 0.25rem;
  background: var(--border-subtle);
}

.ui-dropdown-listbox {
  display: grid;
  gap: var(--dropdown-list-gap, 0.35rem);
}

.ui-note-popover-button {
  max-width: min(22rem, 100%);
}

button.ui-note-popover-button.action-pill {
  border-color: var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card-muted, var(--panel-alt));
  color: var(--text);
  box-shadow: none;
  font-weight: 520;
}

button.ui-note-popover-button.action-pill:hover:not(:disabled),
button.ui-note-popover-button.action-pill:active:not(:disabled) {
  border-color: var(--border-strong, var(--panel-border));
  background: var(--surface-card, var(--panel));
  color: var(--text);
  box-shadow: none;
  transform: translateY(calc(var(--motion-translate-hover, -0.5px) * 0.35));
}

button.ui-note-popover-button.action-pill:focus-visible,
button.ui-note-popover-button.action-pill[data-state="open"] {
  border-color: var(--accent-border, var(--accent));
  background: var(--surface-card, var(--panel));
  color: var(--text);
  box-shadow: 0 0 0 3px var(--ring, color-mix(in oklab, var(--accent) 20%, transparent));
  outline: none;
}

button.ui-note-popover-button-field.action-pill {
  min-width: min(16rem, 100%);
  justify-content: flex-start;
}

.ui-note-popover-button-field .ui-button-content {
  justify-content: flex-start;
}

.ui-note-popover-button-field .ui-button-leading,
.ui-note-popover-button-field .ui-button-trailing,
.ui-note-popover-button-icon-only .ui-button-auto-icon {
  color: var(--muted);
}

.ui-note-popover-button-field .ui-button-trailing {
  margin-inline-start: auto;
}

button.ui-note-popover-button-icon-only.ui-button-mode-icon-only {
  inline-size: var(--ui-button-min-height);
  min-inline-size: var(--ui-button-min-height);
  min-width: var(--ui-button-min-height);
  padding: 0;
  border-color: var(--border-subtle, var(--panel-border-soft));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card-muted, var(--panel-alt));
}

button.ui-note-popover-button-icon-only.ui-button-mode-icon-only:hover:not(:disabled),
button.ui-note-popover-button-icon-only.ui-button-mode-icon-only:active:not(:disabled),
button.ui-note-popover-button-icon-only.ui-button-mode-icon-only:focus-visible,
button.ui-note-popover-button-icon-only.ui-button-mode-icon-only[data-state="open"] {
  border-color: var(--accent-border, var(--accent));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-card, var(--panel));
  color: var(--accent);
}

.ui-note-popover-panel {
  width: min(max(var(--dropdown-trigger-width, 16rem), 18rem), var(--dropdown-panel-max-width));
  padding: var(--dropdown-panel-padding, 0.5rem);
}

.ui-note-popover-content {
  display: grid;
  gap: 0.45rem;
}

.ui-note-popover-title {
  color: var(--muted);
  font-size: var(--type-size-xs);
  font-weight: 650;
}

@keyframes ui-overlay-panel-enter {
  from {
    opacity: 0;
    transform: translateY(var(--overlay-panel-enter-y, -2px)) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-dropdown-panel,
  .ui-popover-panel {
    animation: none;
  }
}
.form-field-group {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.form-field-group > legend {
  padding: 0 0.35rem;
  color: var(--text);
  font-weight: 700;
}

.form-field-group-description,
.form-field-group-error,
.async-submit-status {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-size-sm);
}

.form-field-group-error,
.async-submit-status-error,
.validation-summary {
  color: var(--color-danger);
}

.form-field-group-body {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

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

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

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

.validation-summary {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in oklab, var(--color-danger) 45%, var(--border-subtle));
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--color-danger) 10%, var(--surface-card));
}

.validation-summary ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-inline-start: 1.2rem;
}

.validation-summary li {
  display: grid;
  gap: 0.125rem;
}

.validation-summary a {
  color: inherit;
  font-weight: 700;
}

.ui-drawer-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: var(--modal-backdrop);
}

.ui-drawer {
  width: min(100vw, 34rem);
  max-width: 100%;
  background: var(--modal-bg);
  border-left: 1px solid var(--modal-border);
  box-shadow: var(--modal-shadow);
}

.ui-drawer-left {
  margin-right: auto;
  border-right: 1px solid var(--modal-border);
  border-left: 0;
}

.ui-drawer-bottom {
  align-self: end;
  width: 100%;
  border-top: 1px solid var(--modal-border);
  border-left: 0;
}

.ui-drawer-header,
.ui-drawer-footer,
.assistant-panel-header,
.chart-frame > header,
.schedule-resource > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}

.ui-drawer-body,
.assistant-chat-box,
.chart-frame {
  padding: 0.85rem;
}

.selection-control {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
}

.selection-group {
  border: 1px solid var(--border-subtle);
}

.selection-group-horizontal {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.selection-option,
.listbox-option,
.ui-tree-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selection-option,
.listbox-option {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  padding: 0.45rem;
  text-align: left;
}

.switch-control {
  grid-template-columns: auto 1fr;
}

.switch-control-button {
  border: 0;
  background: transparent;
  padding: 0;
}

.switch-control-track {
  display: inline-flex;
  width: 2.25rem;
  height: 1.2rem;
  padding: 0.15rem;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}

.is-selected .switch-control-track {
  justify-content: end;
  background: var(--color-primary);
}

.switch-control-thumb {
  width: 0.9rem;
  border-radius: 50%;
  background: var(--surface-card);
}

.assistant-panel,
.data-table-assistant {
  display: grid;
  gap: 0.75rem;
}

.data-table-assistant-header {
  display: grid;
  gap: 0.2rem;
}

.data-table-assistant-header h2,
.data-table-assistant-header p {
  margin: 0;
}

.data-table-assistant-header p,
.prompt-field-header span,
.prompt-suggestion-label,
.data-table-assistant-status {
  color: var(--muted);
  font-size: var(--type-size-sm);
}

.prompt-field {
  display: grid;
  gap: 0.55rem;
}

.prompt-field-header {
  display: grid;
  gap: 0.2rem;
}

.prompt-field-header label {
  font-weight: 650;
}

.prompt-field-control {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card-muted);
  color: var(--text);
  padding: 0.6rem 0.7rem;
  font: inherit;
}

.prompt-field-control-wrap {
  position: relative;
  min-width: 0;
}

.prompt-field-control-wrap .prompt-field-control {
  padding-inline-end: 2.4rem;
}

.prompt-field-control-actions {
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-end: 0.45rem;
  display: flex;
}

.prompt-field-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: stretch;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card-muted);
  padding: 0.6rem;
  transition: border-color var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease), box-shadow var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease), background var(--motion-duration-base, 160ms) var(--motion-ease-standard, ease);
}

.prompt-field-shell:hover {
  border-color: var(--border-strong);
}

.prompt-field-shell:focus-within {
  border-color: var(--accent-border, var(--color-primary));
  box-shadow: 0 0 0 3px var(--ring);
}

.prompt-field-shell .prompt-field-control {
  min-height: 4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  outline: 0;
}

.prompt-field-action-rail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: end;
  justify-content: space-between;
  min-width: var(--input-action-size, 30px);
}

.prompt-field-inline-actions {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: end;
}

.prompt-field-send-action {
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
}

.prompt-field-send-action:hover:not(:disabled) {
  color: var(--button-primary-hover-fg);
  background: var(--button-primary-hover-bg);
}

.prompt-field-control:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.prompt-field-shell .prompt-field-control:focus-visible {
  outline: 0;
}

.prompt-field-control:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.prompt-suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.data-table-assistant-preview {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card-muted);
}

.data-table-assistant-preview ul {
  margin: 0.45rem 0 0;
  padding-left: 1.25rem;
}

.data-table-assistant-preview p {
  margin: 0.35rem 0 0;
}

.data-table-assistant-error,
.data-table-assistant-warnings {
  color: var(--color-danger);
}

.data-table-assistant-actions,
.data-table-assistant-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.assistant-message-list {
  display: grid;
  gap: 0.5rem;
  max-height: 24rem;
  overflow: auto;
}

.assistant-message {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.65rem;
  background: var(--surface-card-muted);
}

.assistant-composer {
  display: grid;
  gap: 0.5rem;
}

.assistant-composer textarea {
  min-height: 5rem;
  resize: vertical;
}

.ui-tree {
  display: grid;
  gap: 0.125rem;
}

.ui-tree-toggle,
.ui-tree-content {
  border: 0;
  background: transparent;
  color: inherit;
}

.ui-tree-content {
  display: grid;
  flex: 1;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  text-align: left;
  text-decoration: none;
}

.schedule-board {
  display: grid;
  gap: 0.75rem;
}

.schedule-events {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
}

.schedule-event {
  display: grid;
  gap: 0.125rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card-muted);
  color: inherit;
  padding: 0.5rem;
  text-align: left;
}

.sparkline {
  width: 100%;
  height: 3rem;
  color: var(--color-primary);
}

.bar-list {
  display: grid;
  gap: 0.5rem;
}

.bar-list-row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) 3fr auto;
  gap: 0.5rem;
  align-items: center;
}

.bar-list-track {
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface-card-muted);
  overflow: hidden;
}

.bar-list-track > span {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.metric-trend {
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--muted);
}

.chart-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

.demo-code-output {
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card-muted);
  color: var(--text);
  overflow: auto;
}
.ai-text-action-menu,
.ai-text-review-control,
.ai-suggestion-preview,
.ai-runtime-profile-picker {
  display: grid;
  gap: 0.65rem;
}

.ai-text-action-buttons,
.ai-suggestion-preview-choices,
.ai-suggestion-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ai-runtime-error,
.ai-suggestion-preview-warnings {
  margin: 0;
  color: var(--bad);
}

.ai-suggestion-preview {
  padding: 0.75rem;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.ai-suggestion-preview-copy strong,
.ai-suggestion-preview-grid span,
.ai-text-review-control-label,
.ai-runtime-profile-picker span {
  color: var(--ink);
  font-weight: 650;
}

.ai-text-review-controls {
  --ai-text-review-height: var(--control-height-md, 40px);
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

.ai-text-review-controls.input-group:focus-within {
  filter: none;
  transform: none;
}

.ai-text-review-controls.input-group .ai-text-review-action-select {
  flex: 0 0 7.5rem;
  width: 7.5rem;
}

.ai-text-review-controls.input-group .ai-text-review-count-select {
  flex: 0 0 4.5rem;
  width: 4.5rem;
}

.ai-text-review-controls.input-group .ui-button {
  flex: 0 0 auto;
  min-height: var(--ai-text-review-height);
}

.ai-text-review-controls.input-group .select-control-trigger {
  min-height: var(--ai-text-review-height);
  border-color: var(--ui-border, var(--panel-border-soft));
  background: var(--ui-bg, var(--panel-alt));
  color: var(--ui-fg, var(--accent-3));
  font-weight: 650;
}

.ai-text-review-controls.input-group > .ai-text-review-action-select .select-control-trigger {
  border-start-start-radius: var(--radius-pill, 999px);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: var(--radius-pill, 999px);
}

.ai-text-review-controls.input-group > .ai-text-review-count-select .select-control-trigger {
  border-radius: 0;
}

.ai-text-review-controls.input-group > .ui-button {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--radius-pill, 999px);
  border-end-end-radius: var(--radius-pill, 999px);
}

.select-control-panel.ai-text-review-action-select {
  --select-control-panel-width: 7.5rem;
  --select-control-panel-max-height: 16rem;
  --select-control-options-max-height: 14rem;
}

.select-control-panel.ai-text-review-count-select {
  --select-control-panel-width: 4.5rem;
  --select-control-panel-max-height: 14rem;
  --select-control-options-max-height: 12rem;
}

.select-control-panel.ai-text-review-action-select,
.select-control-panel.ai-text-review-count-select {
  width: min(max(var(--select-control-panel-width), var(--dropdown-trigger-width, 0px)), var(--dropdown-panel-max-width));
}

.ai-suggestion-preview-copy p,
.ai-suggestion-preview-warnings p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.ai-suggestion-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.65rem;
}

.ai-suggestion-preview-grid pre {
  min-height: 4rem;
  max-height: 12rem;
  margin: 0.25rem 0 0;
  padding: 0.65rem;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card-muted);
  color: var(--text);
  font: inherit;
}

.ai-runtime-profile-picker {
  max-width: 24rem;
}

.ai-runtime-profile-picker select {
  min-height: var(--control-height-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
}
.ai-workflow-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.ai-workflow-controls {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel);
}

.ai-workflow-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.repeater-field,
.preset-picker,
.preset-manager {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.repeater-field-header,
.repeater-item-header,
.preset-picker-controls,
.preset-manager-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.repeater-field-header,
.repeater-item-header {
  flex-wrap: wrap;
}

.repeater-field-heading,
.repeater-item-heading,
.preset-picker-heading,
.preset-manager-heading {
  display: grid;
  gap: 0.25rem;
  min-width: min(100%, 14rem);
}

.repeater-field-heading h3,
.repeater-item-heading h4,
.preset-manager-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--type-size-md);
  font-weight: 700;
}

.repeater-item-heading h4 {
  font-size: var(--type-size-sm);
}

.preset-picker-heading label {
  color: var(--text);
  font-weight: 700;
}

.repeater-field-heading p,
.repeater-item-heading p,
.preset-picker-heading p,
.preset-manager-heading p,
.repeater-field-empty,
.repeater-field-status,
.preset-picker-empty,
.preset-picker-status,
.preset-picker-description,
.preset-manager-status {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-size-sm);
}

.repeater-field-error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--type-size-sm);
}

.repeater-field-items {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.repeater-item {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card-muted);
}

.repeater-item-actions,
.preset-manager-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.repeater-item-body {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.preset-picker-controls {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.preset-picker-select {
  min-height: var(--control-height-md, 40px);
  min-width: min(100%, 16rem);
  padding: 0.45rem 0.7rem;
  color: var(--text);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card-muted);
  font: inherit;
}

.preset-picker-select:disabled {
  color: var(--muted);
  background: color-mix(in oklab, var(--surface-card-muted) 76%, var(--surface-card));
}
.workspace-shell {
  --workspace-rail-width: 248px;
  --workspace-rail-collapsed-width: 72px;
  --workspace-panel-width: min(380px, calc(100vw - 32px));
  min-height: 100vh;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--workspace-rail-width) minmax(0, 1fr);
  color: var(--ink);
  background: var(--bg, transparent);
}

.workspace-shell.is-rail-collapsed {
  grid-template-columns: var(--workspace-rail-collapsed-width) minmax(0, 1fr);
}

.workspace-shell-compact {
  --workspace-rail-width: 216px;
  --workspace-rail-collapsed-width: 60px;
}

.workspace-shell-rail,
.workspace-shell-main,
.workspace-shell-stage,
.workspace-shell-content {
  min-width: 0;
  min-height: 0;
}

.workspace-shell-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.workspace-shell-stage {
  position: relative;
  display: grid;
  overflow: hidden;
}

.workspace-shell-content {
  overflow: auto;
}

.workspace-shell-toolbar,
.workspace-shell-status,
.workspace-shell-inspector,
.workspace-shell-settings {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

.workspace-shell-toolbar {
  inset-block-start: 12px;
  inset-inline-end: 12px;
}

.workspace-shell-inspector {
  inset-block: 12px;
  inset-inline-end: 12px;
}

.workspace-shell-status {
  inset-block-end: 12px;
  inset-inline: 12px;
  display: flex;
  justify-content: center;
}

.workspace-shell-settings {
  inset-block: 12px;
  inset-inline-end: 12px;
  z-index: 40;
}

.workspace-shell-toolbar > *,
.workspace-shell-status > *,
.workspace-shell-inspector > *,
.workspace-shell-settings > * {
  pointer-events: auto;
}

.workspace-rail {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border-inline-end: 1px solid var(--panel-border-soft);
  background: color-mix(in oklab, var(--panel) 96%, transparent);
}

.workspace-rail-items {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
}

.workspace-rail-item {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 720;
  padding: 8px 10px;
  text-align: start;
  text-decoration: none;
}

.workspace-rail-item:hover:not(:disabled),
.workspace-rail-item:focus-visible,
.workspace-rail-item.is-active {
  border-color: color-mix(in oklab, var(--accent) 24%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent-3);
  outline: none;
}

.workspace-rail-item:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 24%, transparent);
}

.workspace-rail-item:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.workspace-rail-item-icon,
.workspace-rail-item-badge,
.workspace-settings-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workspace-rail-item-label,
.workspace-status-label,
.workspace-status-value,
.workspace-settings-tab span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-rail.is-collapsed .workspace-rail-item {
  grid-template-columns: 1fr;
  justify-items: center;
  padding-inline: 8px;
}

.workspace-rail.is-collapsed .workspace-rail-item-label,
.workspace-rail.is-collapsed .workspace-rail-item-badge {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.workspace-rail-footer {
  min-width: 0;
}

.workspace-floating-toolbar,
.workspace-status-strip,
.workspace-banner,
.workspace-inspector,
.workspace-settings-panel {
  border: 1px solid var(--panel-border-soft);
  background: color-mix(in oklab, var(--panel) 94%, transparent);
  box-shadow: var(--shadow-md, 0 18px 42px rgba(0, 0, 0, 0.18));
  backdrop-filter: blur(14px);
}

.workspace-floating-toolbar {
  display: inline-flex;
  max-width: min(100%, calc(100vw - 24px));
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-radius: var(--radius-md, 10px);
  padding: 8px;
}

.workspace-status-strip {
  display: flex;
  max-width: min(100%, 960px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 999px;
  padding: 6px 12px;
}

.workspace-status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.2;
}

.workspace-status-label {
  color: var(--muted);
  font-weight: 720;
}

.workspace-status-value {
  font-variant-numeric: tabular-nums;
}

.workspace-status-ok {
  color: var(--ok);
}

.workspace-status-warn {
  color: var(--warn);
}

.workspace-status-bad {
  color: var(--bad);
}

.workspace-status-muted {
  color: var(--muted);
}

.workspace-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px;
  border-radius: var(--radius-md, 10px);
  padding: 10px 12px;
}

.workspace-banner-copy {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
  font-size: 0.84rem;
}

.workspace-banner-info {
  color: var(--accent-3);
}

.workspace-banner-success {
  color: var(--ok);
}

.workspace-banner-warning {
  color: var(--warn);
}

.workspace-banner-error {
  color: var(--bad);
}

.workspace-banner-actions,
.workspace-panel-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.workspace-inspector,
.workspace-settings-panel {
  width: var(--workspace-panel-width);
  max-height: calc(100% - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: var(--radius-md, 10px);
}

.workspace-settings-panel {
  position: fixed;
  inset-block: 12px;
  inset-inline-end: 12px;
  z-index: 80;
}

.workspace-panel-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-block-end: 1px solid var(--panel-border-soft);
  padding: 12px;
}

.workspace-panel-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.workspace-panel-copy h2 {
  margin: 0;
  color: var(--accent-3);
  font-size: 0.98rem;
  line-height: 1.2;
}

.workspace-panel-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.workspace-panel-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.workspace-panel-footer {
  border-block-start: 1px solid var(--panel-border-soft);
  padding: 12px;
}

.workspace-settings-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-block-end: 1px solid var(--panel-border-soft);
  padding: 8px 12px;
}

.workspace-settings-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  max-width: 180px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 720;
  padding: 6px 9px;
}

.workspace-settings-tab:hover:not(:disabled),
.workspace-settings-tab:focus-visible,
.workspace-settings-tab.is-selected {
  border-color: color-mix(in oklab, var(--accent) 24%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent-3);
  outline: none;
}

.workspace-settings-tab:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.geo-coordinate-field,
.geo-coordinate-pair-field,
.geo-coordinate-converter,
.geo-coordinate-format-control {
  min-width: 0;
}

.geo-coordinate-input input {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.geo-coordinate-pair-field {
  display: grid;
  gap: 8px;
}

.geo-coordinate-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.geo-coordinate-message {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.geo-coordinate-message.is-error,
.geo-coordinate-pair-field[data-state="invalid"] .geo-coordinate-message {
  color: var(--bad);
}

.geo-coordinate-converter {
  display: grid;
  gap: 12px;
}

.geo-coordinate-converter-outputs {
  display: grid;
  gap: 6px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 10px);
  background: var(--panel-alt);
  padding: 8px;
}

.geo-coordinate-output-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 28px;
  border-radius: var(--radius-sm, 8px);
  color: var(--ink);
  font-size: 0.8rem;
}

.geo-coordinate-output-format {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
}

.geo-coordinate-output-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

@media (max-width: 760px) {
  .workspace-shell,
  .workspace-shell.is-rail-collapsed {
    grid-template-columns: 1fr;
  }

  .workspace-shell-rail {
    border-inline-end: 0;
    border-block-end: 1px solid var(--panel-border-soft);
  }

  .workspace-rail {
    height: auto;
  }

  .workspace-rail-items {
    flex-direction: row;
  }

  .workspace-inspector,
  .workspace-settings-panel {
    width: calc(100vw - 24px);
  }

  .geo-coordinate-pair-grid {
    grid-template-columns: 1fr;
  }
}
.feedback-message,
.feedback-list,
.feedback-timeline,
.feedback-file-upload {
  color: var(--text);
}

.feedback-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel);
}

.feedback-inline-message {
  padding: 10px 12px;
}

.feedback-alert {
  padding: 14px;
}

.feedback-message-icon,
.feedback-list-marker,
.feedback-timeline-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--panel-alt);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.feedback-message-body,
.feedback-list-copy,
.feedback-timeline-body,
.feedback-file-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.feedback-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.25;
}

.feedback-description,
.feedback-timestamp,
.feedback-file-size,
.feedback-file-status,
.feedback-upload-helper,
.feedback-file-empty,
.feedback-list-empty,
.feedback-timeline-empty {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.feedback-actions,
.feedback-file-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.feedback-dismiss,
.feedback-file-actions button {
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-alt);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  padding: 6px 9px;
}

.feedback-status-info .feedback-message-icon,
.feedback-status-info .feedback-list-marker,
.feedback-status-info .feedback-timeline-marker {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent-3);
}

.feedback-status-success .feedback-message-icon,
.feedback-status-success .feedback-list-marker,
.feedback-status-success .feedback-timeline-marker {
  background: color-mix(in oklab, var(--ok, #16a34a) 14%, transparent);
  color: var(--ok, #15803d);
}

.feedback-status-warning .feedback-message-icon,
.feedback-status-warning .feedback-list-marker,
.feedback-status-warning .feedback-timeline-marker {
  background: color-mix(in oklab, var(--warn, #d97706) 16%, transparent);
  color: var(--warn, #b45309);
}

.feedback-status-error .feedback-message-icon,
.feedback-status-error .feedback-list-marker,
.feedback-status-error .feedback-timeline-marker {
  background: color-mix(in oklab, var(--bad, #dc2626) 14%, transparent);
  color: var(--bad, #b91c1c);
}

.feedback-list {
  display: grid;
  gap: 9px;
}

.feedback-list-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.2;
}

.feedback-list-items {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feedback-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel);
}

.feedback-alert-menu {
  display: inline-grid;
}

.feedback-alert-menu-button {
  position: relative;
}

.feedback-alert-menu-status-success {
  border-color: color-mix(in oklab, var(--ok, #16a34a) 34%, transparent) !important;
  background: color-mix(in oklab, var(--ok, #16a34a) 12%, transparent) !important;
  color: var(--ok, #15803d) !important;
}

.feedback-alert-menu-status-error {
  border-color: color-mix(in oklab, var(--bad, #dc2626) 34%, transparent) !important;
  background: color-mix(in oklab, var(--bad, #dc2626) 12%, transparent) !important;
  color: var(--bad, #b91c1c) !important;
}

.feedback-alert-menu-status-warning {
  border-color: color-mix(in oklab, var(--warn, #d97706) 36%, transparent) !important;
  background: color-mix(in oklab, var(--warn, #d97706) 14%, transparent) !important;
  color: var(--warn, #b45309) !important;
}

.feedback-alert-menu-status-info {
  border-color: color-mix(in oklab, var(--accent) 34%, transparent) !important;
  background: color-mix(in oklab, var(--accent) 12%, transparent) !important;
  color: var(--accent-3) !important;
}

.feedback-alert-menu-trigger-content {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.feedback-alert-menu-badge {
  position: absolute;
  top: auto;
  right: auto;
  bottom: -4px;
  left: calc(100% - 2px);
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--bad, #dc2626) 64%, var(--panel, #fff));
  border-radius: 999px;
  background: color-mix(in oklab, var(--bad, #dc2626) 16%, var(--panel, #fff));
  color: var(--bad, #b91c1c);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--panel, #fff) 82%, transparent);
  pointer-events: none;
}

.feedback-alert-menu-panel {
  --dropdown-panel-max-width: min(420px, calc(100vw - 16px));
  --dropdown-panel-max-height: min(420px, calc(100vh - 16px));
  position: fixed;
  z-index: var(--z-popover, 1000);
  display: grid;
  width: var(--dropdown-panel-max-width);
  max-height: var(--dropdown-panel-max-height);
  padding: 0;
  border: 1px solid var(--panel-border-soft);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 22px 70px color-mix(in oklab, var(--ink) 22%, transparent);
  overflow: hidden;
}

.feedback-alert-menu-listbox.selection-control {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.feedback-alert-menu-panel .selection-control-heading {
  display: grid;
  gap: 3px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--panel-border-soft);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 900;
}

.feedback-alert-menu-panel .selection-control-description {
  margin: 0;
  padding: 0 16px 10px;
  color: var(--muted);
  font-size: 0.8rem;
}

.feedback-alert-menu-panel [data-bix-slot="listbox"] {
  display: grid;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 12px;
}

.feedback-alert-menu-panel .listbox-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: flex-start;
  width: 100%;
  padding: 13px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--panel-alt) 76%, transparent);
  color: inherit;
}

.feedback-alert-menu-panel .listbox-option.is-selected,
.feedback-alert-menu-panel .listbox-option:is(:hover, :focus-visible, .is-active) {
  background: color-mix(in oklab, var(--warn, #d97706) 14%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--warn, #d97706) 18%, transparent);
}

.feedback-alert-menu-dot {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--muted) 16%, transparent);
}

.feedback-alert-menu-dot-success {
  background: var(--ok, #16a34a);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--ok, #16a34a) 14%, transparent);
}

.feedback-alert-menu-dot-info {
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 14%, transparent);
}

.feedback-alert-menu-dot-warning {
  background: var(--warn, #d97706);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--warn, #d97706) 16%, transparent);
}

.feedback-alert-menu-dot-error {
  background: var(--bad, #dc2626);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--bad, #dc2626) 14%, transparent);
}

.feedback-alert-menu-option-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.feedback-alert-menu-option-copy strong {
  display: block;
  color: var(--ink);
  font-size: 0.88rem;
}

.feedback-alert-menu-option-copy span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.feedback-timeline {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.feedback-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 0 0 16px;
}

.feedback-timeline-item::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 11px;
  width: 1px;
  background: var(--panel-border-soft);
}

.feedback-timeline-item:last-child::before {
  display: none;
}

.feedback-timeline-head,
.feedback-file-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.feedback-dropzone {
  display: grid;
  place-items: center;
  min-height: 112px;
  border: 1px dashed var(--panel-border);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-alt);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}

.feedback-dropzone.is-dragging {
  border-color: var(--accent);
  color: var(--accent-3);
}

.feedback-dropzone.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.feedback-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.feedback-file-upload {
  display: grid;
  gap: 10px;
}

.feedback-file-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feedback-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-md, 8px);
  background: var(--panel);
}

.feedback-file-preview {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 6px);
  -o-object-fit: cover;
     object-fit: cover;
}

.feedback-file-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-file progress {
  width: 100%;
}

.feedback-file-error {
  color: var(--bad, #b91c1c);
  font-size: 0.82rem;
}

@media (max-width: 560px) {
  .feedback-file {
    grid-template-columns: minmax(0, 1fr);
  }

  .feedback-list-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .feedback-actions,
  .feedback-file-actions {
    margin-left: 0;
  }
}
:root[data-bix-motion-resolved="expressive"] {
  --motion-duration-fast: 140ms;
  --motion-duration-base: 190ms;
  --motion-duration-slow: 280ms;
  --motion-scale-hover: 1.018;
  --motion-translate-hover: -1px;
  --scene-motion-duration: 14s;
  --scene-motion-distance: 24px;
}

:root[data-bix-motion-resolved="reduced"] {
  --motion-duration-fast: 1ms;
  --motion-duration-base: 1ms;
  --motion-duration-slow: 1ms;
  --motion-scale-hover: 1;
  --motion-translate-hover: 0px;
  --scene-motion-duration: 1ms;
  --scene-motion-distance: 0px;
}

:root[data-bix-motion-resolved="reduced"] *,
:root[data-bix-motion-resolved="reduced"] *::before,
:root[data-bix-motion-resolved="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

:root[data-bix-motion-resolved="reduced"] .skeleton-line,
:root[data-bix-motion-resolved="reduced"] .ui-progress-bar.is-indeterminate .ui-progress-bar-fill,
:root[data-bix-motion-resolved="reduced"] .app-icon-motion-spin,
:root[data-bix-motion-resolved="reduced"] .app-icon-motion-pulse {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .skeleton-line,
  .ui-progress-bar.is-indeterminate .ui-progress-bar-fill,
  .app-icon-motion-spin,
  .app-icon-motion-pulse {
    animation: none !important;
  }
}