/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --spacing: 0.25rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-grid {
    display: inline-grid;
  }
  .table {
    display: table;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .text-center {
    text-align: center;
  }
  .break-all {
    word-break: break-all;
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
}
:root, .light, [data-theme="light"] {
  color-scheme: light;
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  --snow: oklch(0.9911 0 0);
  --eclipse: oklch(0.2103 0.0059 285.89);
  --spacing: 0.25rem;
  --border-width: 1px;
  --field-border-width: 0px;
  --disabled-opacity: 0.5;
  --ring-offset-width: 2px;
  --cursor-interactive: pointer;
  --cursor-disabled: not-allowed;
  --radius: 0.5rem;
  --field-radius: calc(var(--radius) * 1.5);
  --radius-xs: calc(var(--radius) * 0.25);
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: calc(var(--radius) * 0.75);
  --radius-lg: calc(var(--radius) * 1);
  --radius-xl: calc(var(--radius) * 1.5);
  --radius-2xl: calc(var(--radius) * 2);
  --radius-3xl: calc(var(--radius) * 3);
  --radius-4xl: calc(var(--radius) * 4);
  --background: oklch(0.9702 0 0);
  --foreground: var(--eclipse);
  --surface: var(--white);
  --surface-foreground: var(--foreground);
  --surface-secondary: oklch(0.9524 0.0013 286.37);
  --surface-secondary-foreground: var(--foreground);
  --surface-tertiary: oklch(0.9373 0.0013 286.37);
  --surface-tertiary-foreground: var(--foreground);
  --overlay: var(--white);
  --overlay-foreground: var(--foreground);
  --muted: oklch(0.5517 0.0138 285.94);
  --default: oklch(94% 0.001 286.375);
  --default-foreground: var(--eclipse);
  --accent: oklch(0.6204 0.195 253.83);
  --accent-foreground: var(--snow);
  --field-background: var(--white);
  --field-foreground: oklch(0.2103 0.0059 285.89);
  --field-placeholder: var(--muted);
  --field-border: transparent;
  --success: oklch(0.7329 0.1935 150.81);
  --success-foreground: var(--eclipse);
  --warning: oklch(0.7819 0.1585 72.33);
  --warning-foreground: var(--eclipse);
  --danger: oklch(0.6532 0.2328 25.74);
  --danger-foreground: var(--snow);
  --segment: var(--white);
  --segment-foreground: var(--eclipse);
  --border: oklch(90% 0.004 286.32);
  --separator: oklch(92% 0.004 286.32);
  --focus: var(--accent);
  --link: var(--foreground);
  --backdrop: rgba(0, 0, 0, 0.5);
  --scrollbar-thumb: var(--foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
  }
  --scrollbar-track: transparent;
  --scrollbar-gutter: auto;
  --scrollbar-width: thin;
  --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  --scrollbar: var(--scrollbar-thumb);
  --surface-hover: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
  }
  --background-secondary: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
  }
  --background-tertiary: var(--background);
  @supports (color: color-mix(in lab, red, red)) {
    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
  }
  --background-inverse: var(--foreground);
  --default-hover: var(--default);
  @supports (color: color-mix(in lab, red, red)) {
    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
  }
  --accent-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
  }
  --success-hover: var(--success);
  @supports (color: color-mix(in lab, red, red)) {
    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
  }
  --warning-hover: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
  }
  --danger-hover: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
  }
  --field-hover: var(--field-background);
  @supports (color: color-mix(in lab, red, red)) {
    --field-hover: color-mix(in oklab, var(--field-background) 90%, var(--field-foreground) 2%);
  }
  --field-focus: var(--field-background);
  --field-border-hover: var(--field-border, var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    --field-border-hover: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground) 10%);
  }
  --field-border-focus: var(--field-border, var(--border));
  @supports (color: color-mix(in lab, red, red)) {
    --field-border-focus: color-mix(in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground) 22%);
  }
  --default-soft: var(--default);
  @supports (color: color-mix(in lab, red, red)) {
    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
  }
  --default-soft-foreground: var(--default-foreground);
  --default-soft-hover: var(--default);
  @supports (color: color-mix(in lab, red, red)) {
    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
  }
  --accent-soft: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
  }
  --accent-soft-foreground: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%);
  }
  --accent-soft-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
  }
  --danger-soft: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
  }
  --danger-soft-foreground: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
  }
  --danger-soft-hover: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
  }
  --warning-soft: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
  }
  --warning-soft-foreground: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
  }
  --warning-soft-hover: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
  }
  --success-soft: var(--success);
  @supports (color: color-mix(in lab, red, red)) {
    --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
  }
  --success-soft-foreground: var(--success);
  @supports (color: color-mix(in lab, red, red)) {
    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%);
  }
  --success-soft-hover: var(--success);
  @supports (color: color-mix(in lab, red, red)) {
    --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
  }
  --separator-secondary: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
  }
  --separator-tertiary: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
  }
  --border-secondary: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
  }
  --border-tertiary: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
  }
  --surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px 0 rgba(0, 0, 0, 0.06),
    0 0 1px 0 rgba(0, 0, 0, 0.06);
  --overlay-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06),
    0 -6px 12px 0 rgba(0, 0, 0, 0.03),
    0 14px 28px 0 rgba(0, 0, 0, 0.08);
  --field-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px 0 rgba(0, 0, 0, 0.06),
    0 0 1px 0 rgba(0, 0, 0, 0.06);
  --ease-smooth: ease;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-out-fluid: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-linear: linear;
  --skeleton-animation: shimmer;
  --tooltip-delay: 1500ms;
  --tooltip-close-delay: 500ms;
}
.dark, [data-theme="dark"] {
  color-scheme: dark;
  --background: oklch(12% 0.005 285.823);
  --foreground: var(--snow);
  --surface: oklch(0.2103 0.0059 285.89);
  --surface-foreground: var(--foreground);
  --surface-secondary: oklch(0.257 0.0037 286.14);
  --surface-tertiary: oklch(0.2721 0.0024 247.91);
  --overlay: oklch(0.285 0.006 286);
  --overlay-foreground: var(--foreground);
  --muted: oklch(70.5% 0.015 286.067);
  --default: oklch(27.4% 0.006 286.033);
  --default-foreground: var(--snow);
  --field-background: oklch(0.2103 0.0059 285.89);
  --field-foreground: var(--foreground);
  --warning: oklch(0.8203 0.1388 76.34);
  --warning-foreground: var(--eclipse);
  --danger: oklch(0.594 0.1967 24.63);
  --danger-foreground: var(--snow);
  --segment: oklch(0.3964 0.01 285.93);
  --segment-foreground: var(--foreground);
  --border: oklch(28% 0.006 286.033);
  --separator: oklch(25% 0.006 286.033);
  --focus: var(--accent);
  --link: var(--foreground);
  --backdrop: rgba(0, 0, 0, 0.6);
  --surface-shadow: 0 0 0 0 transparent inset;
  --overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 16px 40px rgba(0, 0, 0, 0.65);
  --field-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  --accent-soft: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
  }
  --accent-soft-foreground: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
  }
  --accent-soft-hover: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
  }
  --danger-soft: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
  }
  --danger-soft-foreground: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
  }
  --danger-soft-hover: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
  }
  --warning-soft: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
  }
  --warning-soft-foreground: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
  }
  --warning-soft-hover: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
  }
  --success-soft: var(--success);
  @supports (color: color-mix(in lab, red, red)) {
    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
  }
  --success-soft-foreground: var(--success);
  @supports (color: color-mix(in lab, red, red)) {
    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
  }
  --success-soft-hover: var(--success);
  @supports (color: color-mix(in lab, red, red)) {
    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
  }
}
[data-vibrant-palette="true"] {
  --accent-soft-foreground: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%);
  }
  --danger-soft-foreground: var(--danger);
  @supports (color: color-mix(in lab, red, red)) {
    --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%);
  }
  --warning-soft-foreground: var(--warning);
  @supports (color: color-mix(in lab, red, red)) {
    --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%);
  }
  --success-soft-foreground: var(--success);
  @supports (color: color-mix(in lab, red, red)) {
    --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    color-scheme: dark;
    --background: oklch(12% 0.005 285.823);
    --foreground: var(--snow);
    --surface: oklch(0.2103 0.0059 285.89);
    --surface-secondary: oklch(0.257 0.0037 286.14);
    --surface-tertiary: oklch(0.2721 0.0024 247.91);
    --overlay: oklch(0.285 0.006 286);
    --muted: oklch(70.5% 0.015 286.067);
    --default: oklch(27.4% 0.006 286.033);
    --default-foreground: var(--snow);
    --field-background: oklch(0.2103 0.0059 285.89);
    --field-foreground: var(--foreground);
    --warning: oklch(0.8203 0.1388 76.34);
    --danger: oklch(0.594 0.1967 24.63);
    --segment: oklch(0.3964 0.01 285.93);
    --border: oklch(28% 0.006 286.033);
    --separator: oklch(25% 0.006 286.033);
    --backdrop: rgba(0, 0, 0, 0.6);
    --surface-shadow: 0 0 0 0 transparent inset;
    --overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 16px 40px rgba(0, 0, 0, 0.65);
    --field-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  }
}
.heroui-focus-ring:focus-visible, [data-focus-visible="true"] {
  outline: none;
  box-shadow: 0 0 0 var(--ring-offset-width) var(--background), 0 0 0 calc(var(--ring-offset-width) + 2px) var(--focus);
}
.heroui-focus-field:focus-visible, .heroui-focus-field:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus);
}
[disabled], [aria-disabled="true"], .heroui-disabled {
  opacity: var(--disabled-opacity);
  cursor: var(--cursor-disabled);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
[data-reduce-motion="true"] *, [data-reduce-motion="true"] *::before, [data-reduce-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}
.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 2.5rem;
  gap: 0.5rem;
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--radius-3xl);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  outline: none;
  user-select: none;
  transform-origin: center;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transform: translateZ(0);
  cursor: var(--cursor-interactive);
  --button-bg: transparent;
  --button-bg-hover: var(--button-bg);
  --button-bg-pressed: var(--button-bg-hover);
  --button-fg: currentColor;
  background-color: var(--button-bg);
  color: var(--button-fg);
  transition: transform 250ms var(--ease-smooth), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out);
}
@media (min-width: 768px) {
  .button {
    height: 2.25rem;
  }
}
.button > svg {
  pointer-events: none;
  flex-shrink: 0;
  align-self: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline: -0.125rem;
  margin-block: 0.125rem;
}
@media (min-width: 640px) {
  .button > svg {
    width: 1rem;
    height: 1rem;
    margin-block: 0.25rem;
  }
}
.button:hover, .button[data-hovered="true"] {
  background-color: var(--button-bg-hover);
}
.button:active, .button[data-pressed="true"] {
  background-color: var(--button-bg-pressed);
  transform: scale(0.97);
}
.button:focus-visible {
  box-shadow: 0 0 0 var(--ring-offset-width) var(--background), 0 0 0 calc(var(--ring-offset-width) + 2px) var(--focus);
}
.button:disabled, .button[aria-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: var(--cursor-disabled);
  pointer-events: none;
}
.button[data-pending="true"] {
  pointer-events: none;
}
.button--sm {
  height: 2.25rem;
  padding-inline: 0.75rem;
}
.button--sm > svg {
  width: 1rem;
  height: 1rem;
}
.button--sm:active, .button--sm[data-pressed="true"] {
  transform: scale(0.98);
}
.button--lg {
  height: 2.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
.button--lg:active, .button--lg[data-pressed="true"] {
  transform: scale(0.96);
}
@media (min-width: 768px) {
  .button--sm {
    height: 2rem;
  }
  .button--lg {
    height: 2.5rem;
  }
}
.button--primary {
  --button-bg: var(--accent);
  --button-bg-hover: var(--accent-hover);
  --button-bg-pressed: var(--accent-hover);
  --button-fg: var(--accent-foreground);
}
.button--secondary {
  --button-bg: var(--default);
  --button-bg-hover: var(--default-hover);
  --button-bg-pressed: var(--default-hover);
  --button-fg: var(--accent-soft-foreground);
}
.button--tertiary {
  --button-bg: var(--default);
  --button-bg-hover: var(--default-hover);
  --button-bg-pressed: var(--default-hover);
}
.button--ghost, .button--outline {
  --button-bg: transparent;
  --button-bg-hover: var(--default);
  --button-bg-pressed: var(--default);
  --button-fg: var(--default-foreground);
}
.button--outline {
  border: var(--border-width) solid var(--border);
  --button-bg-hover: var(--default);
  @supports (color: color-mix(in lab, red, red)) {
    --button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent);
  }
}
.button--danger {
  --button-bg: var(--danger);
  --button-bg-hover: var(--danger-hover);
  --button-bg-pressed: var(--danger-hover);
  --button-fg: var(--danger-foreground);
}
.button--danger-soft {
  --button-bg: var(--danger-soft);
  --button-bg-hover: var(--danger-soft-hover);
  --button-bg-pressed: var(--danger-soft-hover);
  --button-fg: var(--danger-soft-foreground);
}
.button--icon-only {
  width: 2.5rem;
  padding: 0;
}
.button--icon-only.button--sm {
  width: 2.25rem;
}
.button--icon-only.button--lg {
  width: 2.75rem;
}
.button--full-width {
  width: 100%;
}
@media (min-width: 768px) {
  .button--icon-only {
    width: 2.25rem;
  }
  .button--icon-only.button--sm {
    width: 2rem;
  }
  .button--icon-only.button--lg {
    width: 2.5rem;
  }
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  overflow: visible;
  border-radius: min(32px, var(--radius-3xl));
  box-shadow: var(--surface-shadow);
  background-color: var(--surface);
  color: var(--surface-foreground);
}
.card--default {
  background-color: var(--surface);
}
.card--secondary {
  background-color: var(--surface-secondary);
}
.card--tertiary {
  background-color: var(--surface-tertiary);
}
.card--transparent {
  background-color: transparent;
  border: none;
  box-shadow: none;
}
.card__header {
  display: flex;
  flex-direction: column;
}
.card__title {
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: var(--foreground);
}
.card__description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted);
}
.card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
}
.card__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.surface {
  position: relative;
  color: var(--foreground);
}
.surface--transparent {
  background-color: transparent;
}
.surface--default {
  background-color: var(--surface);
  color: var(--surface-foreground);
}
.surface--secondary {
  background-color: var(--surface-secondary);
  color: var(--surface-secondary-foreground);
}
.surface--tertiary {
  background-color: var(--surface-tertiary);
  color: var(--surface-tertiary-foreground);
}
.alert {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: min(32px, var(--radius-3xl));
  background-color: var(--surface);
  box-shadow: var(--surface-shadow);
}
.alert__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  user-select: none;
}
.alert__indicator > svg {
  width: 1rem;
  height: 1rem;
  box-sizing: content-box;
}
.alert__content {
  display: flex;
  height: 100%;
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-start;
}
.alert__title {
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 500;
}
.alert__description {
  font-size: 0.875rem;
  color: var(--muted);
}
.alert--default .alert__indicator, .alert--default .alert__title {
  color: var(--foreground);
}
.alert--accent .alert__indicator, .alert--accent .alert__title {
  color: var(--accent-soft-foreground);
}
.alert--success .alert__indicator, .alert--success .alert__title {
  color: var(--success-soft-foreground);
}
.alert--warning .alert__indicator, .alert--warning .alert__title {
  color: var(--warning-soft-foreground);
}
.alert--danger .alert__indicator, .alert--danger .alert__title {
  color: var(--danger-soft-foreground);
}
.chip {
  display: inline-flex;
  width: fit-content;
  flex-shrink: 0;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-2xl);
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 500;
  background-color: var(--chip-bg);
  color: var(--chip-fg);
  --chip-bg: var(--default);
  --chip-fg: currentColor;
}
.chip__label {
  padding-inline: 0.125rem;
}
.chip--sm {
  padding: 0 0.25rem;
  font-size: 0.75rem;
}
.chip--lg {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}
.chip--tertiary {
  --chip-bg: transparent;
}
.chip--default {
  --chip-fg: var(--default-foreground);
}
.chip--accent {
  --chip-fg: var(--accent-soft-foreground);
}
.chip--success {
  --chip-fg: var(--success-soft-foreground);
}
.chip--warning {
  --chip-fg: var(--warning-soft-foreground);
}
.chip--danger {
  --chip-fg: var(--danger-soft-foreground);
}
.chip--primary.chip--accent {
  --chip-bg: var(--accent);
  --chip-fg: var(--accent-foreground);
}
.chip--primary.chip--success {
  --chip-bg: var(--success);
  --chip-fg: var(--success-foreground);
}
.chip--primary.chip--warning {
  --chip-bg: var(--warning);
  --chip-fg: var(--warning-foreground);
}
.chip--primary.chip--danger {
  --chip-bg: var(--danger);
  --chip-fg: var(--danger-foreground);
}
.chip--soft.chip--accent {
  --chip-bg: var(--accent-soft);
  --chip-fg: var(--accent-soft-foreground);
}
.chip--soft.chip--success {
  --chip-bg: var(--success-soft);
  --chip-fg: var(--success-soft-foreground);
}
.chip--soft.chip--warning {
  --chip-bg: var(--warning-soft);
  --chip-fg: var(--warning-soft-foreground);
}
.chip--soft.chip--danger {
  --chip-bg: var(--danger-soft);
  --chip-fg: var(--danger-soft-foreground);
}
.badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  border-radius: var(--radius-3xl);
  font-size: 0.75rem;
  line-height: 1.34;
  font-weight: 500;
  background-color: var(--badge-bg);
  color: var(--badge-fg);
  border: 1px solid var(--badge-border);
  --badge-bg: var(--default);
  --badge-fg: var(--default-foreground);
  --badge-border: var(--background);
}
.badge__label {
  padding-inline: 0.125rem;
}
.badge--sm {
  min-width: 1rem;
  min-height: 1rem;
  border-radius: var(--radius-xl);
  font-size: 10px;
}
.badge--lg {
  min-width: 2rem;
  min-height: 2rem;
  border-radius: var(--radius-2xl);
  font-size: 0.875rem;
  line-height: 1.43;
}
.badge--accent {
  --badge-fg: var(--accent-soft-foreground);
}
.badge--success {
  --badge-fg: var(--success-soft-foreground);
}
.badge--warning {
  --badge-fg: var(--warning-soft-foreground);
}
.badge--danger {
  --badge-fg: var(--danger-soft-foreground);
}
.badge-anchor {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.badge--top-right {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(25%, -25%);
}
.badge--top-left {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-25%, -25%);
}
.textfield {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.textfield--full-width {
  width: 100%;
}
.textfield--full-width .input, .textfield--full-width .textarea {
  width: 100%;
}
.input, .textarea {
  border-radius: var(--field-radius);
  border-width: var(--field-border-width);
  border-style: solid;
  border-color: var(--field-border);
  background-color: var(--field-background);
  color: var(--field-foreground);
  box-shadow: var(--field-shadow);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  outline: none;
  transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out);
}
@media (min-width: 640px) {
  .input, .textarea {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.input::placeholder, .textarea::placeholder {
  color: var(--field-placeholder);
}
.input:hover:not(:focus), .textarea:hover:not(:focus) {
  background-color: var(--field-hover);
  border-color: var(--field-border-hover);
}
.input:focus, .textarea:focus {
  box-shadow: 0 0 0 2px var(--focus);
  border-color: var(--field-border-focus);
  background-color: var(--field-focus);
}
.input[data-invalid="true"], .input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  outline: 1px solid var(--danger);
  background-color: var(--field-focus);
}
.input[data-invalid="true"]:focus, .input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--danger);
}
.input:disabled, .textarea:disabled {
  opacity: var(--disabled-opacity);
  cursor: var(--cursor-disabled);
  pointer-events: none;
}
.input--secondary {
  box-shadow: none;
  background-color: var(--default);
}
.input--secondary:hover:not(:focus) {
  background-color: var(--default-hover);
}
.input--full-width {
  width: 100%;
}
.label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--foreground);
}
.description {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted);
}
.field-error, .error-message {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--danger);
}
.link {
  position: relative;
  display: inline-flex;
  width: fit-content;
  height: fit-content;
  align-items: center;
  border-radius: var(--radius-xl);
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  cursor: var(--cursor-interactive);
  -webkit-tap-highlight-color: transparent;
  transition: color 100ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out), opacity 100ms var(--ease-out);
}
.link:hover {
  text-decoration: underline;
  text-decoration-color: var(--muted);
  @supports (color: color-mix(in lab, red, red)) {
    text-decoration-color: color-mix(in oklab, var(--muted) 50%, transparent);
  }
}
.link:active {
  text-decoration: underline;
  text-decoration-color: var(--muted);
}
.link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ring-offset-width) var(--background), 0 0 0 calc(var(--ring-offset-width) + 2px) var(--focus);
}
.link[aria-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: var(--cursor-disabled);
  pointer-events: none;
}
.link__icon {
  pointer-events: none;
  display: inline-flex;
  width: 0.75em;
  height: 0.75em;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.6;
  transition: opacity 150ms var(--ease-out);
}
.link:hover .link__icon, .link:focus-visible .link__icon {
  opacity: 1;
}
.avatar {
  position: relative;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background-color: var(--default);
}
.avatar--sm {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-2xl);
}
.avatar--lg {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-3xl);
}
.avatar__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: opacity 250ms;
}
.avatar__fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--default);
  font-size: 0.875rem;
  font-weight: 500;
}
.avatar--lg .avatar__fallback {
  font-size: 1rem;
}
.avatar--soft {
  background-color: transparent;
}
.avatar--soft .avatar__fallback--accent {
  background-color: var(--accent-soft);
  color: var(--accent-soft-foreground);
}
.avatar--soft .avatar__fallback--success {
  background-color: var(--success-soft);
  color: var(--success-soft-foreground);
}
.avatar--soft .avatar__fallback--warning {
  background-color: var(--warning-soft);
  color: var(--warning-soft-foreground);
}
.avatar--soft .avatar__fallback--danger {
  background-color: var(--danger-soft);
  color: var(--danger-soft-foreground);
}
.separator {
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--separator);
  height: 1px;
  width: 100%;
}
.separator--vertical {
  height: auto;
  min-height: 0.5rem;
  width: 1px;
  align-self: stretch;
}
.separator--secondary {
  background-color: var(--separator-secondary);
}
.separator--tertiary {
  background-color: var(--separator-tertiary);
}
.separator__container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.separator__line {
  flex-shrink: 0;
  flex-grow: 1;
}
.separator__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--muted);
}
.kbd {
  display: inline-flex;
  height: 1.5rem;
  align-items: center;
  gap: 0.125rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--default);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
}
.kbd--light {
  background-color: transparent;
}
.spinner {
  pointer-events: none;
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  animation: heroui-spin 0.75s linear infinite;
}
.spinner--sm {
  width: 1rem;
  height: 1rem;
}
.spinner--lg {
  width: 2rem;
  height: 2rem;
}
.spinner--xl {
  width: 2.5rem;
  height: 2.5rem;
}
.spinner--current {
  color: inherit;
}
.spinner--accent {
  color: var(--accent);
}
.spinner--success {
  color: var(--success);
}
.spinner--warning {
  color: var(--warning);
}
.spinner--danger {
  color: var(--danger);
}
@keyframes heroui-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}
.skeleton {
  pointer-events: none;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--surface-tertiary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--surface-tertiary) 70%, transparent);
  }
}
.skeleton--shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(to right, transparent, var(--surface-tertiary), transparent);
  animation: heroui-skeleton 2s linear infinite;
}
.skeleton--pulse {
  animation: heroui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes heroui-skeleton {
  100% {
    transform: translateX(200%);
  }
}
@keyframes heroui-pulse {
  50% {
    opacity: 0.5;
  }
}
.tooltip {
  max-width: 20rem;
  padding: 0.5rem;
  border-radius: min(32px, var(--radius-xl));
  background-color: var(--overlay);
  color: var(--overlay-foreground);
  font-size: 0.75rem;
  line-height: 1rem;
  box-shadow: var(--overlay-shadow);
}
.tooltip[data-entering="true"] {
  animation: heroui-pop-in 150ms var(--ease-smooth);
}
.tooltip[data-exiting="true"] {
  animation: heroui-pop-out 100ms var(--ease-smooth);
}
@keyframes heroui-pop-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes heroui-pop-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
.popover, .modal {
  background-color: var(--overlay);
  color: var(--overlay-foreground);
  border-radius: min(32px, var(--radius-3xl));
  box-shadow: var(--overlay-shadow);
}
.popover {
  padding: 0.5rem;
}
.modal {
  padding: 1.5rem;
}
.backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--backdrop);
}
.backdrop[data-entering="true"] {
  animation: heroui-fade-in 200ms var(--ease-out);
}
.backdrop[data-exiting="true"] {
  animation: heroui-fade-out 150ms var(--ease-out);
}
@keyframes heroui-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes heroui-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.tabs {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}
.tabs__list-container {
  position: relative;
  background-color: var(--default);
  border-radius: calc(var(--radius) * 2.5);
}
.tabs__list {
  display: flex;
  position: relative;
  padding: 0.25rem;
}
.tabs__tab {
  position: relative;
  z-index: 1;
  display: flex;
  height: 2rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  border: 0;
  background: transparent;
  border-radius: var(--radius-3xl);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  outline: none;
  cursor: var(--cursor-interactive);
  -webkit-tap-highlight-color: transparent;
  transition: color 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth);
}
.tabs__tab:not([data-selected="true"]):hover {
  opacity: 0.7;
}
.tabs__tab[data-selected="true"] {
  color: var(--foreground);
  background-color: var(--segment);
}
.tabs__tab:focus-visible {
  box-shadow: 0 0 0 var(--ring-offset-width) var(--background), 0 0 0 calc(var(--ring-offset-width) + 2px) var(--focus);
}
.tabs__tab:disabled, .tabs__tab[aria-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: var(--cursor-disabled);
  pointer-events: none;
}
.tabs__panel {
  width: 100%;
  padding: 0.5rem;
  margin-top: 1rem;
  outline: none;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: var(--cursor-interactive);
  -webkit-tap-highlight-color: transparent;
}
.switch__control {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 2.5rem;
  height: 1.5rem;
  padding: 0.125rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--switch-control-bg);
  transition: background-color 200ms var(--ease-out);
  --switch-control-bg: var(--default);
}
.switch__thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: var(--white);
  box-shadow: var(--surface-shadow);
  transition: transform 200ms var(--ease-out-fluid);
}
.switch[data-selected="true"] .switch__control, .switch input:checked + .switch__control {
  --switch-control-bg: var(--accent);
}
.switch[data-selected="true"] .switch__thumb, .switch input:checked + .switch__control .switch__thumb {
  transform: translateX(1rem);
}
.switch--sm .switch__control {
  width: 2rem;
  height: 1.25rem;
}
.switch--sm .switch__thumb {
  width: 1rem;
  height: 1rem;
}
.switch--lg .switch__control {
  width: 3rem;
  height: 1.75rem;
}
.switch--lg .switch__thumb {
  width: 1.5rem;
  height: 1.5rem;
}
.switch[data-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: var(--cursor-disabled);
  pointer-events: none;
}
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: var(--cursor-interactive);
  -webkit-tap-highlight-color: transparent;
}
.checkbox__control {
  position: relative;
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  border-width: var(--field-border-width);
  border-style: solid;
  border-color: var(--field-border);
  background-color: var(--field-background);
  box-shadow: var(--field-shadow);
  outline: none;
  cursor: var(--cursor-interactive);
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 100ms var(--ease-out);
}
.checkbox[data-selected="true"] .checkbox__control, .checkbox input:checked + .checkbox__control {
  background-color: var(--accent);
  border-color: var(--accent-foreground);
}
.checkbox__indicator {
  width: 0.625rem;
  height: 0.625rem;
  stroke-width: 2.5px;
  color: var(--accent-foreground);
}
.checkbox[data-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: var(--cursor-disabled);
  pointer-events: none;
}
.typography--h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.typography--h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.typography--h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.typography--h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.typography--body {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.typography--small {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted);
}
.typography--muted {
  color: var(--muted);
}
.scroll-shadow {
  overflow: auto;
  scrollbar-width: var(--scrollbar-width);
  scrollbar-color: var(--scrollbar-color);
  mask-image: linear-gradient( to bottom, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100% );
}
html {
  background: var(--background);
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', 'PingFang TC',
    'Microsoft JhengHei', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}
.app-shell {
  --sidebar-w: 60px;
  --sidebar-w-open: 232px;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100dvh;
}
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    width: 100% !important;
  }
  .app-sidebar .nav-label,
  .app-sidebar .sidebar-text {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .app-sidebar {
    position: static !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: var(--border-width) solid var(--separator);
  }
}
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: var(--sidebar-w);
  border-right: var(--border-width) solid var(--separator);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
  gap: 4px;
  overflow: hidden;
  z-index: 30;
  transition: width 0.16s var(--ease-out-fluid, ease), box-shadow 0.16s ease;
}
.app-sidebar:hover,
.app-sidebar:focus-within {
  width: var(--sidebar-w-open);
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.06);
}
.sidebar-text {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.app-sidebar:hover .sidebar-text,
.app-sidebar:focus-within .sidebar-text {
  opacity: 1;
  pointer-events: auto;
}
.nav-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.nav-label {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.12s ease;
}
.app-sidebar:hover .nav-label,
.app-sidebar:focus-within .nav-label {
  opacity: 1;
}
.sidebar-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.app-main {
  padding: 28px 32px 64px;
  width: 100%;
  min-width: 0;
}
@media (max-width: 700px) {
  .app-main {
    padding: 20px 16px 48px;
  }
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.12s var(--ease-out-fluid, ease), color 0.12s ease;
}
.nav-link:hover {
  background: var(--default-soft);
  color: var(--foreground);
}
.nav-link[aria-current='page'] {
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
}
.nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}
.data-table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: var(--border-width) solid var(--separator);
  white-space: nowrap;
}
.data-table td {
  padding: 12px;
  border-bottom: var(--border-width) solid var(--separator);
  vertical-align: middle;
}
.data-table tbody tr:hover {
  background: var(--default-soft);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-2xl);
  border: var(--border-width) solid var(--separator);
  background: var(--surface);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.stat-card {
  background: var(--surface);
  border: var(--border-width) solid var(--separator);
  border-radius: var(--radius-2xl);
  padding: 16px 18px;
  box-shadow: var(--surface-shadow);
}
.stat-card__label {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-bottom: 6px;
}
.stat-card__value {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.stat-card__hint {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 6px;
}
.funnel-row {
  display: grid;
  grid-template-columns: 160px 1fr 96px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.funnel-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--default-soft);
  overflow: hidden;
}
.funnel-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.25s var(--ease-out-fluid, ease);
}
.form-grid {
  display: grid;
  gap: 16px;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
}
.field-hint {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 6px;
}
.field-error {
  color: var(--danger-soft-foreground);
  font-size: 0.8125rem;
  margin-top: 6px;
}
.input[aria-invalid='true'] {
  box-shadow: 0 0 0 2px var(--danger-soft-foreground);
}
.input,
.textarea,
.select {
  width: 100%;
  background: var(--field);
  color: var(--field-foreground, var(--foreground));
  border: var(--field-border-width) solid var(--field-border);
  border-radius: var(--radius-xl);
  padding: 9px 12px;
  font: inherit;
  box-shadow: var(--field-shadow);
  transition: box-shadow 0.12s ease, background-color 0.12s ease;
}
.select {
  padding-right: 34px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236E7C76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
.textarea {
  min-height: 120px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}
.input:disabled,
.textarea:disabled,
.select:disabled {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}
.checkbox-row input {
  margin-top: 3px;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
.page-title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.page-subtitle {
  color: var(--muted);
  margin-top: 4px;
}
.section-card {
  background: var(--surface);
  border: var(--border-width) solid var(--separator);
  border-radius: var(--radius-2xl);
  padding: 20px;
  box-shadow: var(--surface-shadow);
}
.muted {
  color: var(--muted);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
}
.warning-box {
  border-radius: var(--radius-xl);
  padding: 12px 14px;
  background: var(--warning-soft);
  color: var(--warning-soft-foreground);
  line-height: 1.6;
}
.danger-box {
  border-radius: var(--radius-xl);
  padding: 12px 14px;
  background: var(--danger-soft);
  color: var(--danger-soft-foreground);
  line-height: 1.6;
}
.info-box {
  border-radius: var(--radius-xl);
  padding: 12px 14px;
  background: var(--default-soft);
  color: var(--foreground);
  line-height: 1.6;
}
.row-link {
  cursor: pointer;
}
.row-link:hover {
  background: var(--surface-secondary, rgba(127, 127, 127, 0.06));
}
.row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.row-link.is-expanded > td {
  border-bottom-color: transparent;
}
.row-expand-icon {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: -4px;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}
.row-expand-icon:hover {
  background: var(--default-soft);
  color: var(--foreground);
}
.row-expand-icon:focus-visible {
  outline: 2px solid var(--accent);
}
.row-expand-icon svg {
  transition: transform 150ms ease;
}
.row-expand-icon[aria-expanded='true'] svg {
  transform: rotate(90deg);
}
.flow-mini {
  overflow: auto;
  max-height: 420px;
  border: var(--border-width, 1px) solid var(--border);
  border-radius: var(--radius-xl, 12px);
  background: var(--default-soft);
}
.flow-mini__cols {
  position: relative;
  display: flex;
  gap: 36px;
  padding: 16px 20px 28px;
  align-items: flex-start;
  min-width: max-content;
}
.flow-mini__wires {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
}
.flow-mini__wires path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.25;
}
.flow-mini__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.flow-mini__label {
  font-size: 11px;
  color: var(--muted);
}
.flow-mini__entry {
  max-width: 160px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-mini__node {
  position: relative;
  width: 180px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: var(--border-width, 1px) solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 12px;
  color: var(--foreground);
}
.flow-mini__head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flow-mini__title {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-mini__tag {
  flex: none;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
}
.flow-mini__mode {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.flow-mini__prompt {
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-mini__btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.flow-mini__btn {
  position: relative;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--default-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-mini__btn.is-empty {
  color: var(--muted);
  font-style: italic;
}
.flow-mini__btn.is-url {
  color: var(--muted);
}
.flow-mini__none {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.chip__label {
  white-space: nowrap;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
  background: color-mix(in oklab, #000 45%, transparent);
}
[data-theme="dark"] .modal-backdrop {
  background: color-mix(in oklab, #000 62%, transparent);
}
.modal-panel {
  width: 100%;
  max-width: 720px;
  padding: 20px;
  border-radius: var(--radius-3xl);
  background: var(--overlay);
  color: var(--foreground);
  box-shadow: var(--overlay-shadow);
  border: var(--border-width) solid var(--separator);
}
.modal-backdrop--center {
  align-items: center;
}
.modal-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background: var(--overlay);
  color: var(--foreground);
  box-shadow: var(--overlay-shadow);
  border: var(--border-width) solid var(--separator);
}
.modal-box--sm {
  max-width: 640px;
}
.modal-box--lg {
  max-width: 900px;
}
.modal-box__header {
  position: relative;
  padding: 16px 48px;
  border-bottom: var(--border-width) solid var(--separator);
  text-align: center;
}
.modal-box__title {
  font-weight: 600;
  font-size: 1rem;
}
.modal-box__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
}
.modal-box__close:hover {
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, currentColor 10%, transparent);
  }
}
.modal-box__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
}
.modal-box__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 24px;
  border-top: var(--border-width) solid var(--separator);
}
.column-picker {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 300px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px;
  border-radius: var(--radius-2xl);
  background: var(--overlay);
  color: var(--foreground);
  border: var(--border-width) solid var(--separator);
  box-shadow: var(--overlay-shadow);
}
.data-table th.actions-cell,
.data-table td.actions-cell {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 20px;
}
.data-table td.actions-cell > .flex {
  justify-content: flex-end;
}
.tag-picker-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  width: min(520px, 92vw);
  border-radius: var(--radius-2xl);
  background: var(--overlay);
  border: var(--border-width) solid var(--separator);
  box-shadow: var(--overlay-shadow);
  overflow: hidden;
}
.tag-picker-body {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 240px;
}
.tag-picker-folders {
  border-right: var(--border-width) solid var(--separator);
  padding: 8px 6px;
  max-height: 300px;
  overflow-y: auto;
}
.tag-picker-folder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
}
.tag-picker-folder:hover {
  background: var(--default);
}
.tag-picker-folder[data-selected='true'] {
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
  font-weight: 600;
}
.tag-picker-tabs {
  display: flex;
  gap: 4px;
  padding: 0 8px;
  border-bottom: var(--border-width) solid var(--separator);
}
.tag-picker-tabs button {
  border: none;
  background: transparent;
  padding: 6px 10px;
  font-size: 0.8125rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tag-picker-tabs button[data-selected='true'] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tag-picker-list {
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.tag-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--radius-lg);
}
.tag-picker-item:hover {
  background: var(--default);
}
.tag-picker-item[data-selected='true'] {
  background: var(--accent-soft);
}
.data-table tr.row-disabled td:not(.actions-cell) {
  opacity: 0.45;
}
.msg-block {
  padding: 10px;
  border: var(--border-width) solid var(--separator);
  border-radius: var(--radius-xl);
  background: var(--surface-secondary, transparent);
}
.member-split {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.member-split__list {
  flex: 1 1 auto;
  min-width: 0;
}
.row-link.is-selected,
.row-link.is-selected:hover,
.row-link[data-selected],
.row-link[data-selected]:hover {
  background: var(--accent-soft);
}
.member-panel {
  flex: 0 0 380px;
  width: 380px;
  position: sticky;
  top: 16px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border-width) solid var(--separator);
  border-radius: var(--radius-2xl);
  box-shadow: var(--overlay-shadow);
  overflow: hidden;
  animation: member-panel-in 220ms var(--ease-out-fluid) both;
}
@keyframes member-panel-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .member-panel {
    animation: none;
  }
}
.member-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: var(--border-width) solid var(--separator);
}
.member-panel__identity {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
}
.member-panel__uid {
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-panel__tabs {
  display: flex;
  border-bottom: var(--border-width) solid var(--separator);
  padding: 0 8px;
}
.member-panel__tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.member-panel__tab.is-active {
  color: var(--foreground);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.member-panel__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.member-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}
.member-panel__foot {
  padding: 12px 16px;
  border-top: var(--border-width) solid var(--separator);
}
.member-panel__dl {
  margin: 0;
  display: grid;
  gap: 10px;
}
.member-panel__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  font-size: 13px;
}
.member-panel__row dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.member-panel__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.member-panel__timeline li {
  padding: 8px 0;
  border-bottom: var(--border-width) solid var(--separator);
}
.member-panel__timeline li:last-child {
  border-bottom: 0;
}
.member-panel__oak {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 4px;
  color: var(--muted);
  border: 1px solid var(--separator);
  border-radius: 4px;
}
.member-panel__x {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
}
.member-panel__x:hover {
  color: var(--danger, #d33);
  background: var(--surface-secondary);
}
.member-panel__x:focus-visible {
  outline: 2px solid var(--accent);
}
@media (max-width: 1100px) {
  .member-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    max-height: none;
    width: min(380px, calc(100vw - 24px));
    z-index: 40;
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.35);
  }
}
.member-panel .tag-picker-panel {
  position: static;
  width: 100%;
  margin-top: 6px;
  box-shadow: none;
}
.member-panel .tag-picker-body {
  grid-template-columns: 1fr;
}
.member-panel .tag-picker-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-right: 0;
  border-bottom: var(--border-width) solid var(--separator);
}
.member-name {
  white-space: nowrap;
}
.member-split.has-panel .member-tags {
  flex-wrap: nowrap;
}
.reply-pv-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.reply-pv-main {
  flex: 1 1 auto;
  min-width: 0;
}
.reply-pv-side {
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  opacity: 0;
  position: sticky;
  top: 16px;
  transition: width .24s cubic-bezier(.2,.8,.2,1), margin-left .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.reply-pv-side.is-open {
  width: 340px;
  margin-left: 16px;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .reply-pv-side {
    transition: none;
  }
}
@media (max-width: 900px) {
  .reply-pv-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .reply-pv-side.is-open {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
    position: static;
  }
}
.line-pv {
  width: 340px;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #d9dde3;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", sans-serif;
}
@media (max-width: 900px) {
  .line-pv {
    width: 100%;
  }
}
.line-pv__bar {
  background: #fff;
  color: #111;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}
.line-pv__room {
  background: #8cabd9;
  padding: 14px 12px 16px;
  min-height: 260px;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.line-pv__note {
  color: #1f2937;
  font-size: 13px;
  text-align: center;
  margin-top: 40px;
  opacity: .9;
}
.line-pv__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.line-pv__delay {
  color: #1f2937;
  font-size: 12px;
  background: rgba(255,255,255,.6);
  border-radius: 999px;
  padding: 2px 10px;
  margin: 4px auto 8px;
  width: fit-content;
  max-width: 100%;
  text-align: center;
}
.line-pv__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #06c755;
  flex: 0 0 32px;
}
.line-pv__avatar-gap {
  width: 32px;
  flex: 0 0 32px;
}
.line-pv__col {
  min-width: 0;
  max-width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.line-pv__name {
  font-size: 11px;
  color: #1f2937;
  margin: 0 0 3px 2px;
  opacity: .95;
}
.line-pv__bubble {
  background: #fff;
  color: #111;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 18px;
  white-space: pre-wrap;
  word-break: break-word;
}
.line-pv__bubble--unknown {
  color: #6b7280;
  font-size: 12px;
}
.line-pv__sticker {
  width: 110px;
  height: auto;
  display: block;
}
.line-pv__image {
  max-width: 200px;
  border-radius: 14px;
  display: block;
}
.line-pv__card {
  width: 240px;
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  padding: 16px 14px 12px;
  color: #111;
}
.line-pv__card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.line-pv__card-body {
  font-size: 13px;
  color: #333;
  margin-top: 8px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.line-pv__card-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}
.line-pv__card-btn {
  display: block;
  background: transparent;
  color: #4a7bd8;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-pv__card-btn--draft {
  color: #6b7280;
  border-color: #9ca3af;
  border-style: dashed;
  white-space: normal;
}
.line-pv__qr {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 10px;
  background: #8cabd9;
  border-top: 1px solid rgba(255,255,255,.35);
}
.line-pv__qr-btn {
  flex: 0 0 auto;
  background: #fff;
  color: #1f2430;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #d9dde3;
  white-space: nowrap;
}
.page-tabs {
  display: flex;
  gap: 4px;
  border-bottom: var(--border-width) solid var(--separator);
  margin-bottom: 16px;
}
.page-tabs a {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: calc(-1 * var(--border-width));
  text-decoration: none;
  white-space: nowrap;
}
.page-tabs a[aria-current='page'] {
  color: var(--foreground);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.page-tabs a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.choice-list {
  border: var(--border-width) solid var(--separator);
  border-radius: 10px;
}
.choice-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.choice-list__item + .choice-list__item {
  border-top: var(--border-width) solid var(--separator);
}
.choice-list__item input {
  margin-top: 3px;
}
.member-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 12px;
}
.member-preview-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
}
.member-preview-list li > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-preview-list img,
.member-preview-list__noimg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}
.member-preview-list__noimg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--default-soft);
  font-size: 13px;
}
.test-list {
  border: var(--border-width) solid var(--separator);
  border-radius: 10px;
}
.test-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
}
.test-list__row + .test-list__row {
  border-top: var(--border-width) solid var(--separator);
}
.test-list__row--all {
  justify-content: flex-start;
  font-size: 13px;
  cursor: pointer;
}
.test-list__who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}
.test-list__who img,
.test-list__noimg {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.test-list__noimg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--default-soft);
  font-size: 12px;
}
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='hidden']):not([readonly]),
textarea:not([readonly]),
[contenteditable='true'] {
  caret-color: var(--accent);
  cursor: text;
}
input:disabled,
textarea:disabled {
  cursor: not-allowed;
}
.candidate-list {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: var(--border-width) solid var(--separator);
  border-radius: 10px;
  background: var(--surface);
}
.candidate-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.candidate-list__item + .candidate-list__item {
  border-top: var(--border-width) solid var(--separator);
}
.candidate-list__item:hover:not(:disabled) {
  background: var(--default-soft);
}
.candidate-list__item:disabled {
  cursor: default;
  opacity: 0.6;
}
.candidate-list__item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.candidate-list__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.candidate-list__text > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.candidate-list__empty {
  padding: 10px 12px;
  font-size: 13px;
}
.file-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1.5px dashed var(--field-border, var(--separator));
  border-radius: var(--radius-xl);
  background: var(--field, transparent);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.file-dropzone.is-dragging {
  border-color: var(--accent);
  background: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--accent) 8%, transparent);
  }
}
.file-dropzone.is-disabled {
  opacity: 0.6;
}
.file-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file-dropzone__input:focus-visible + .file-dropzone__button {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.file-dropzone__button {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--separator);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in oklab, #000 8%, transparent);
}
.file-dropzone__button:hover {
  background: var(--default-soft);
}
.file-dropzone.is-disabled .file-dropzone__button {
  cursor: not-allowed;
}
.file-dropzone__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.file-dropzone__name {
  font-size: 0.8125rem;
  color: var(--muted, #6e7c76);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}
.file-dropzone__hint {
  font-size: 0.75rem;
  color: var(--muted, #6e7c76);
  opacity: 0.85;
}
.file-dropzone__error {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--danger-soft-foreground);
}
[data-unavailable='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.row-menu__trigger {
  padding-inline: 6px;
  min-width: 0;
}
.row-menu {
  position: fixed;
  z-index: 60;
  min-width: 180px;
  max-width: 280px;
  padding: 4px;
  border-radius: var(--radius-xl, 12px);
  background: var(--overlay);
  color: var(--foreground);
  box-shadow: var(--overlay-shadow);
  border: var(--border-width) solid var(--separator);
}
.row-menu__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-lg, 8px);
  background: transparent;
  color: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.row-menu__item:hover,
.row-menu__item:focus-visible {
  background: var(--default-hover, var(--default));
  outline: none;
}
[data-theme="dark"] .row-menu__item:hover,
[data-theme="dark"] .row-menu__item:focus-visible {
  background: currentColor;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, currentColor 12%, transparent);
  }
}
.row-menu__item--danger {
  color: var(--danger);
  font-weight: 500;
}
.row-menu__desc {
  font-size: 12px;
  color: var(--muted);
  white-space: normal;
}
.row-menu__sep {
  height: var(--border-width);
  margin: 4px 6px;
  background: var(--separator);
}
.row-menu__reason {
  margin: 0 10px 6px;
  font-size: 12px;
  color: var(--muted);
}
.row-menu__toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: var(--radius-xl, 12px);
  background: var(--foreground);
  color: var(--background);
  font-size: 14px;
  box-shadow: var(--overlay-shadow);
  cursor: pointer;
}
.mini-cal {
  position: absolute;
  top: 46px;
  left: 0;
  z-index: 60;
  width: 280px;
  padding: 10px;
  border-radius: 12px;
  background: var(--overlay, var(--surface, #fff));
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
}
.mini-cal[data-above='true'] {
  top: auto;
  bottom: calc(100% + 4px);
}
.mini-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.mini-cal__wd {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}
.mini-cal__day {
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--foreground);
  cursor: pointer;
}
.mini-cal__day:hover {
  background: var(--default, rgb(0 0 0 / 0.06));
}
.mini-cal__day[data-past='true'] {
  color: var(--muted);
}
.mini-cal__day[data-today='true'] {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.mini-cal__day[data-selected='true'] {
  background: var(--accent);
  color: var(--accent-foreground, #fff);
}
.flow-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 48px);
}
.flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.flow-top__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.flow-top__name {
  width: 280px;
  font-weight: 600;
}
.flow-dirty {
  font-size: 12px;
  color: var(--warning-soft-foreground, var(--foreground));
  background: var(--warning-soft, var(--default));
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6px var(--flow-panel-w, 420px);
  gap: 0;
  margin-top: 12px;
  height: calc(100dvh - 150px);
  min-height: 560px;
  border: var(--border-width) solid var(--separator);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .flow-layout {
    grid-template-columns: 1fr;
  }
  .flow-splitter {
    display: none;
  }
}
.flow-splitter {
  position: relative;
  cursor: col-resize;
  background: var(--separator);
  touch-action: none;
}
.flow-splitter::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1px;
  width: 4px;
  height: 36px;
  margin-top: -18px;
  border-radius: 2px;
  background: var(--muted);
  opacity: .5;
}
.flow-splitter:focus {
  outline: none;
}
.flow-splitter:focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: -2px;
}
body.is-resizing-x {
  cursor: col-resize;
  user-select: none;
}
body.is-resizing-x .flow-canvas, body.is-resizing-x .flow-panel {
  pointer-events: none;
}
.flow-canvas {
  overflow: auto;
  min-height: 0;
  background: radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 20px 20px, var(--background-secondary);
}
.flow-cols {
  position: relative;
  display: flex;
  gap: 56px;
  padding: 28px 28px 80px;
  align-items: flex-start;
  min-width: max-content;
}
.flow-wires {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
}
.flow-wires path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
}
.flow-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.flow-col__label {
  font-size: 12px;
  color: var(--muted);
  width: 240px;
}
.flow-entry {
  width: 250px;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow-entry__item {
  display: block;
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  text-decoration: none;
}
.flow-entry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.flow-entry__head > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.flow-entry__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.flow-entry__notice {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.flow-entry__notice[data-ok="false"] {
  color: var(--danger);
}
.flow-entry__item.is-off {
  opacity: .6;
}
.flow-entry__name {
  display: block;
  font-size: 11px;
  opacity: .8;
}
.flow-entry__empty {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.flow-node {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 240px;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--surface-shadow);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--foreground);
}
.flow-node:focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 2px;
}
.flow-node.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.flow-node__kind {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.flow-node__mode {
  font-size: 11px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
  white-space: nowrap;
}
.flow-node__title {
  font-weight: 600;
  margin: 2px 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-node__lead {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.flow-node__bubble {
  background: var(--surface-secondary);
  border-radius: 10px;
  padding: 8px 10px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 8em;
  overflow: hidden;
}
.flow-node__prompt-title {
  font-weight: 700;
}
.flow-node__btns {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow-node__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: var(--border-width) solid var(--border);
  border-radius: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--surface);
}
.flow-node__btn.is-over {
  border-color: var(--danger);
}
.flow-node__btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.flow-node__meta {
  font-size: 11px;
  color: var(--muted);
}
.flow-node__dot {
  position: absolute;
  right: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.flow-node__dot.is-url {
  background: var(--muted);
}
.flow-node__dot.is-empty {
  background: var(--surface);
  border-color: var(--muted);
}
.flow-node__stat {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}
.flow-node {
  position: relative;
}
.flow-node.is-drop {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}
.flow-node--cond {
  border-left: 4px solid var(--warning-soft-foreground, var(--accent));
}
.flow-node--cond .flow-node__mode {
  background: var(--warning-soft, var(--accent-soft));
  color: var(--warning-soft-foreground, var(--accent-soft-foreground));
}
.flow-node--wait {
  border-left: 4px solid var(--accent-soft-foreground, var(--accent));
}
.flow-node--wait .flow-node__mode {
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
}
.flow-sendwin {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  align-items: flex-start;
}
.flow-sendwin__row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.flow-sendwin__row .input {
  flex: 1 1 0;
  min-width: 0;
}
.flow-node__btn--match .flow-node__btn-label {
  color: var(--success-soft-foreground, var(--foreground));
  font-weight: 600;
}
.flow-node__btn--else .flow-node__btn-label {
  color: var(--danger-soft-foreground, var(--foreground));
  font-weight: 600;
}
.flow-node__btn--match .flow-node__btn-label .muted,
.flow-node__btn--else .flow-node__btn-label .muted {
  font-weight: 400;
  margin-left: 4px;
}
.flow-node .is-editable {
  cursor: text;
  border-radius: 4px;
}
.flow-node .is-editable:hover {
  background: var(--accent-soft);
  color: var(--accent-soft-foreground);
}
.flow-node__bubble:has(.flow-inline) {
  max-height: none;
}
.flow-inline {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--foreground);
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: pre-wrap;
  cursor: text;
}
.flow-inline--multi {
  min-height: 4.5em;
  resize: vertical;
}
.flow-inline::selection {
  background: var(--accent);
  color: var(--accent-foreground, #fff);
}
.flow-node__handle {
  position: absolute;
  right: -8px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-sizing: border-box;
  cursor: crosshair;
  touch-action: none;
  z-index: 2;
}
.flow-node__handle:hover, .flow-node__dot.is-draggable:hover {
  transform: scale(1.3);
}
.flow-node__dot.is-draggable {
  cursor: crosshair;
  touch-action: none;
  z-index: 2;
}
.flow-node__dot.is-draggable::after {
  content: '';
  position: absolute;
  inset: -7px;
}
.flow-hist {
  position: relative;
  display: inline-flex;
}
.flow-hist__btn {
  width: 32px;
  min-width: 32px;
  padding: 0;
  justify-content: center;
}
.flow-hist__tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms;
  z-index: 30;
}
.flow-hist:hover .flow-hist__tip, .flow-hist:focus-within .flow-hist__tip {
  opacity: 1;
  transition-delay: 150ms;
}
body.flow-dragging, body.flow-dragging * {
  user-select: none !important;
  cursor: crosshair !important;
}
.flow-wires__drag {
  stroke: var(--accent) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 5 4;
}
.flow-panel {
  background: var(--surface);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
}
.flow-panel .tag-picker-panel {
  width: 100%;
  max-width: 560px;
}
.flow-panel .tag-picker-body {
  grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
}
.flow-panel .tag-picker-folder {
  overflow-wrap: anywhere;
}
.flow-panel .tag-picker-item > .chip {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  height: auto;
}
.flow-panel .tag-picker-item .chip__label {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.flow-panel .tag-picker-item > input {
  flex-shrink: 0;
}
.flow-panel__inner {
  border: 0;
  margin: 0;
  padding: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flow-lead {
  margin: 0;
}
.flow-lead-toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: var(--border-width) solid var(--separator);
  border-radius: 10px;
  background: var(--surface-secondary);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.flow-lead-toggle:hover {
  background: var(--default);
  border-color: var(--muted);
}
.flow-lead-toggle::-webkit-details-marker {
  display: none;
}
.flow-lead-toggle::marker {
  content: '';
}
.flow-lead-toggle__arrow {
  color: var(--muted);
  transition: transform 150ms ease;
}
.flow-lead[open] .flow-lead-toggle__arrow {
  transform: rotate(90deg);
}
.flow-lead-toggle__count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.flow-panel__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.flow-panel .field {
  display: block;
}
.flow-seg {
  display: flex;
  background: var(--default);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.flow-seg button {
  all: unset;
  flex: 1;
  text-align: center;
  padding: 6px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.flow-seg button.is-on {
  background: var(--surface);
  color: var(--foreground);
  box-shadow: var(--surface-shadow);
}
.flow-brow {
  border: var(--border-width) solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}
.flow-brow__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 8px;
}
.flow-brow__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
}
.flow-linkbtn {
  all: unset;
  color: var(--accent);
  cursor: pointer;
}
.condition-row {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-secondary, transparent);
}
.folder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.folder-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: var(--border-width, 1px) solid var(--border);
}
.folder-list__item:last-child {
  border-bottom: none;
}
.folder-list__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-delay {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  font-size: 13px;
}
.msg-delay__label {
  font-weight: 500;
}
.msg-delay__hint {
  color: var(--muted, #6b7280);
  font-size: 12px;
}
.msg-delay .input[aria-invalid="true"] {
  border-color: var(--danger, #dc2626);
}
.version-bar {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px));
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  background: linear-gradient(var(--warning-soft), var(--warning-soft)), var(--surface, var(--background));
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}