/* Pointer use has no focus outline, even when a menu restores :focus-visible.
 * Scope is UI chrome only, never visitor content or third-party WP controls.
 * Preserve base inset borders, elevation, hover, checked and invalid states.
 * Keyboard navigation removes this override and uses component focus styles.
 */
:root[data-uc-input-mode='pointer']
  :is(.uipb-studio, #uichemy-composer-floating-panel, #smart-html-floating-panel,
      .uich-composer-host, .uich-tw, .uich-rp, .uich-portal-root,
      .uc-scope, .uc-content, .uc-chrome, .uc-portal, .uc-pop-dark)
  :is(:focus, :focus-visible, :focus-within),
:root[data-uc-input-mode='pointer']
  :is(.uc-scope, .uc-content, .uc-chrome, .uc-portal, .uc-pop-dark):is(:focus, :focus-visible, :focus-within) {
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/*
 * Isolation — keep the host page's CSS out of the composer's UI.
 * ════════════════════════════════════════════════════════════════════════════
 * The panel does not render in a page of its own. It mounts inside whatever
 * WordPress, the theme and every other active plugin have already styled, and
 * those stylesheets load with no knowledge of us. Two things leak across that
 * boundary, and both have produced "a colour I never chose appeared on hover /
 * on the active tab" reports:
 *
 *   1. CUSTOM PROPERTIES. Ours and theirs share one inheritance tree. A theme
 *      that sets `--primary` or `--accent` on `:root` reaches every one of our
 *      elements unless we redeclare that name closer to them. We DO redeclare
 *      the shadcn set on `.uich-tw`, so those are covered — but a name we only
 *      ever CONSUME (always with a `var(--x, fallback)`) has no declaration of
 *      ours anywhere, so the page's value is the one that wins.
 *
 *      Verified in the wild: a site's own UiChemy Globals print ~70 variables
 *      onto `:root` — among them `--primary`, `--secondary`, `--accent` and a
 *      whole `--uc-*` family, which is the design system's own prefix.
 *
 *   2. ELEMENT SELECTORS. A rule like `a:hover { color: #ff5a6e }` in a theme
 *      reset carries specificity (0,1,1) and matches our markup directly. Any
 *      bare element we render inherits it.
 *
 * Both are closed below. Nothing here changes how the panel looks on its own;
 * it only stops someone else's stylesheet from changing it.
 */

/* ── 1 · Custom properties we consume but never declare ────────────────────
 *
 * `initial` on a custom property is the precise tool for this: it makes the
 * name "guaranteed-invalid", i.e. exactly as if nobody had ever declared it.
 * So `var(--x, fallback)` still resolves to its authored fallback — every one
 * of these is always read WITH a fallback — while the page's value can no
 * longer reach us. Setting a real value instead would have silently become a
 * second source of truth for each of them.
 *
 * Deliberately NOT reset here:
 *   · --radix-*            Radix writes these inline on its own content.
 *   · --wp-admin-theme-color   borrowed from WP core on purpose.
 *   · --uich-dock-w, --uich-gb-dock-w/-top, --uich-bricks-dock-w, --uich-mtl-h,
 *     --uich-sx, --uich-tools-w
 *                          the panel's own JS writes these on <html>/<body>,
 *                          ABOVE this scope — they have to inherit inwards.
 *   · --uichemy-composer-*  declared by our own editor-panel stylesheet.
 */
:is(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp
) {
  /* Single letters and bare words — the likeliest collisions of all. */
  --c: initial;
  --x: initial;
  --hc: initial;
  --gw-c: initial;
  --token: initial;
  --text-strong: initial;
  --cafe-espresso: initial;

  /* Per-element animation/measurement values, written inline by our own JS.
     Inline still wins for the element that owns it; this only stops a page
     value standing in for the frame before that JS runs. */
  --_d: initial;
  --_delay: initial;
  --_dt-max-h: initial;
  --seg-h: initial;
  --seg-o: initial;
  --seg-w: initial;
  --seg-x: initial;
  --tab-bar-o: initial;
  --tab-bar-w: initial;
  --tab-bar-x: initial;
  --rp-box-gap: initial;
  --rp-box-pad: initial;

  /* Design-system names we read but define elsewhere (or not at all). The
     `--uc-` prefix is NOT ours alone — UiChemy Globals emit `--uc-*` too. */
  --uc-brand-lighter: initial;
  --uc-control-h-xs: initial;
  --uc-focus-ring: initial;
  --uc-global: initial;
  --uc-tabs-fade-l: initial;
  --uc-tabs-fade-r: initial;
  --uc-text-default: initial;
}

/* ── 2 · Element-selector leaks ("button:hover") ───────────────────────
 *
 * The one that reaches furthest. Nexter prints this INLINE (handle
 * `nexter-style-inline-css`, which is why it never turns up in a file scan):
 *
 *     button:hover, button:focus, input[type="submit"]:hover, .button:focus, …
 *       { background: var(--nxt-link-hover-color, #ff5a6e);
 *         border-color: var(--nxt-link-hover-color, #ff5a6e); }
 *
 * `button:hover` is (0,1,1) and matches every button we render. Our Tailwind
 * utilities compile to `.uich-tw .bg-x` → (0,2,0) and already outrank it, and so
 * do our own `.thing:hover` rules — but a design-system component styled by a
 * single CSS-module class is (0,1,0), so the theme wins and the control turns
 * red under the pointer.
 *
 * SPECIFICITY IS THE WHOLE DESIGN HERE. This block is pinned to exactly (0,2,0):
 * the host list is `:is()` (0,1,0), the elements are `:where()` (0,0,0), and the
 * state is `:is()` (0,1,0). That lands it
 *
 *     above  the theme at (0,1,1)                        → the red is gone
 *     level  with our own `.thing:hover` rules (0,2,0)   → a TIE
 *
 * and a tie is decided by source order. This file is imported before every
 * component stylesheet, so each component keeps its own hover look and only the
 * controls that never asked for one are reset. Adding a class to the selector,
 * or swapping a `:where()` for an `:is()`, would push this to (0,2,1) and start
 * flattening our own hover states — don't. The host list is classes ONLY for the
 * same reason: `:is()` takes the HIGHEST specificity of its arguments, so one id
 * in there (`#uichemy-composer-floating-panel`) would silently make the whole
 * rule (1,1,0). The drawer shell is covered anyway — the panel it wraps carries
 * `.uich-composer-host` and `.uich-tw`.
 *
 * A CHECKED radio / checkbox (Radix `data-state="checked"` / "indeterminate") is
 * left out of the reset: its fill IS its state, and wiping it on :hover / :focus
 * turned the control into an empty ring (the dot / tick is drawn in the inverse
 * colour, so it vanished too) the moment it was clicked. Its own rule
 * (`.root[data-state='checked']`, (0,2,0)) already outranks the theme's (0,1,1).
 * The `:not()` sits inside `:where()`, so the block stays at (0,2,0).
 *
 * Only the two properties the theme actually sets are reverted. `color` is left
 * alone for buttons (reverting it would hand them the UA's `buttontext` on a
 * dark panel) and taken back only on links, where a themed hover colour is the
 * other classic leak.
 */
:is(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp
)
  :where(a, button:not([data-state='checked'], [data-state='indeterminate']), input, select, textarea, .button, .menu-toggle):is(:hover, :focus, :focus-visible, :focus-within, :active) {
  background: none;
  border-color: revert;
}

/* Links additionally take their colour back — `a:hover { color: … }` sits in
   almost every theme reset. Same (0,2,0), same tie-break. */
:is(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp
)
  :where(a):is(:hover, :focus, :focus-visible, :active) {
  color: inherit;
  text-decoration: none;
}

/* ── 3 · Inherited text properties from the page's <body> ──────────────────
 *
 * Every UI root of ours is a child of the page's <body>, so whatever the design
 * puts on body (letter-spacing, an uppercase transform, a light 300 weight,
 * centred text, a text-shadow) is inherited by the whole panel and toolbar. Our
 * components set font-size, line-height and colour explicitly but rely on
 * inheritance for these, so they are reset to their initial values on the
 * roots. Specificity (0,1,0) and this file is imported first, so any root
 * class of ours that sets one of them (the canvas bar's weight) still wins.
 */
:is(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
) {
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-align: start;
  text-shadow: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  font-feature-settings: normal;
}

/* ── 4 · Styles a page FORCES on every element (`* { … !important }`) ──────
 *
 * No ordinary rule of ours can beat `* { font-family: X !important }` or
 * `* { transition: all .6s !important }`. The editor guard
 * (assets/js/uichemy-editor-guard.js) probes for them once the page has
 * loaded and only then sets these classes on <html>, so a normal page is never
 * touched. Fonts go back to each element's own family through `--uich-ff`, a
 * copy of every font-family the build writes next to it (postcss.config.js).
 * Transitions are switched off inside our UI: snappier than a 0.6s fade on
 * every hover, and the page's own elements keep theirs.
 */
html.uich-guard-ff :is(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
),
html.uich-guard-ff :is(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
) :where(*, *::before, *::after) {
  font-family: var(--uich-ff, "Zalando Sans", ui-sans-serif, system-ui, sans-serif) !important;
}
html.uich-guard-tr :is(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
),
html.uich-guard-tr :is(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
) :where(*, *::before, *::after) {
  transition: none !important;
}

/* ── 5 · Page-wide resets of bare elements ─────────────────────────────────
 *
 * Rules a page writes against EVERY element or every <div> with no class at
 * all: `* { scrollbar-width: none }`, `::-webkit-scrollbar { display: none }`.
 * They reached our scroll areas, so the panel had no scrollbar (I12). Each
 * rule below puts back the browser default, at a specificity just above a
 * bare-element rule (0,0,1 / 0,0,2) and below any class of ours (0,1,0), so a
 * scrollbar we hide on purpose (the scope lane, the tab strips) stays hidden.
 */
:where(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
) :is(div, textarea, ul, ol, pre, nav, section, aside):not(svg):not(math) {
  scrollbar-width: auto;
}
:where(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
) :is(div, textarea, ul, ol, pre, nav, section, aside):not(svg):not(math)::-webkit-scrollbar {
  display: block;
}

/* `* { user-select: none }` + `::selection { background: transparent }` (an
 * anti-copy reset): text could not be selected in our fields, and what was
 * selected did not show (I13). Fields only: labels and buttons stay as they
 * are. All type selectors, so this stays below any class of ours. */
:where(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
) :is(input, textarea):not(svg) {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}
:where(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
) :is(div, span, p, a, button, label, li, pre, code, input, textarea):not(svg)::-moz-selection {
  background-color: Highlight;
  color: HighlightText;
}
:where(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
) :is(div, span, p, a, button, label, li, pre, code, input, textarea):not(svg)::selection {
  background-color: Highlight;
  color: HighlightText;
}

/* `div { overflow: hidden }` clipped our menus, focus rings and anything
 * positioned outside its box (I14). A div of ours that needs a different
 * overflow says so with a class, which outranks this. */
:where(
  .uich-tw,
  .uich-composer-host,
  .uich-canvas-toolbar-host,
  .uich-portal-root,
  .uich-rp,
  .uichemy-composer-floating-panel,
  [id="uichemy-motion-timeline-root"]
) div:not(svg) {
  overflow: visible;
}

/*
 * Composer THEME TOKENS — the single source of the palette.
 *
 * Imported by BOTH bundles: the composer panel (index.jsx) and the canvas
 * (canvas-entry.js, which PHP enqueues into the Elementor preview). That shared
 * import is the whole reason this file exists, and it replaces the old
 * composer-skin-tokens.css, which did the same job back when there were three
 * palettes. There is one palette now — UiChemy, light and dark — but the
 * sharing still matters, and for exactly the reason that file recorded:
 *
 *   The on-canvas toolbar used to hard-code this palette as literals, because
 *   it renders in a document these tokens never reached. Hand-copying is not the
 *   same as matching: alongside the real values it grew a dozen invented
 *   in-between shades that appear nowhere in the panel.
 *
 * That is not hypothetical. Deleting composer-skin-tokens.css took these
 * declarations out of the CANVAS bundle, and the box-handle toolbar
 * (composer-box-handles.js) resolves every colour through `var(--panel-bg)`,
 * `var(--text-hi)` and friends. With nothing declaring them it fell back to the
 * literals baked into its own `var()` fallbacks and stopped following the
 * light/dark toggle at all. Moved here verbatim out of composer.css; no value
 * was altered. Keep it imported by every entry that renders composer chrome.
 */

:root {
  --bg-canvas: #f4f4f6;
  --bg-canvas-ink: #15151a;
  --panel-bg: #15161a;
  --panel-bg-2: #1c1d22;
  --panel-bg-3: #24262c;
  --panel-bg-4: #2d2f37;
  --panel-line: #2a2c33;
  --panel-line-2: #34363f;
  /* DROP SHADOWS, as a colour and a strength rather than a literal per site.
     Every shadow in this file was written as rgba(0,0,0,α) against a near-black
     panel, where pure black at a heavy alpha is what reads as depth. On the
     white light panel the same values are black smudges, so light re-points the
     hue to the panel's ink and scales every alpha by --shadow-a in one place.
     Usage: rgba(var(--shadow-rgb), calc(<the original α> * var(--shadow-a))) —
     the geometry of each shadow is left exactly as it was. */
  --shadow-rgb: 0, 0, 0;
  --shadow-a: 1;
  /* Segmented controls — ONE language for every tabbing in the panel: a GREY
     track with a lighter GREY active chip on top of it. Both values are neutral
     overlays rather than ramp steps, so the track lifts off whatever panel it
     sits on (brand #15161a, Elementor #1f2124, Gutenberg #1e1e1e) and the chip
     lifts off the track by the same kind of step again, in every skin, without
     six per-skin copies. The light theme states its own pair below.
     The track was a black wash first (rgba(0,0,0,.28), recessed below the
     panel). On a near-black panel that made the whole control disappear —
     nothing to see until you found the one lit chip. A lift reads as a real
     surface holding the tabs, which is what the reference does too.
     Before this, the families disagreed: the Chat/Editor strip ran a GREY track
     with a near-black active tab (inverted), .seg / .state-tabs / .responsive-tabs
     ran a light wash track with a lighter chip, and .mode-seg filled the active
     half solid white. Three languages for the same control. */
  --seg-track: rgba(255, 255, 255, 0.06);
  /* NO BORDERS on this control, by decision — the track and the chip are told
     apart by tone alone. Both hairline tokens stay in place (and stay wired to
     the inset rings in composer-dock.css) so bringing an edge back is a value
     change here rather than an edit to nine selectors; `transparent` is the
     off switch. Track edges came off first: once the track went lighter than
     the panel it already had an edge of its own and the hairline drew a second
     one beside it. */
  --seg-track-line: transparent;
  --seg-thumb: rgba(255, 255, 255, 0.10);
  /* Off — see --seg-track-line. The chip is now read from its fill and the soft
     shadow under it, nothing drawn round the outside. */
  --seg-thumb-line: transparent;
  --seg-thumb-hover: rgba(255, 255, 255, 0.045);
  /* Softer than before: with a hairline doing the lifting, a heavy drop shadow
     doubles the edge and muddies it. */
  --seg-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  /* Segmented radii, deliberately softer than the panel's 6px/4px container
     scale — a tab track is a pill, not a card, and at 6px the track read as a
     small rectangle. The inner value keeps the classic 2px inset so the chip's
     arc sits concentric inside the track's. Skins whose host has its own
     geometry re-point these (see the Gutenberg block, which is WP's 4px/2px). */
  --seg-radius: 9px;
  --seg-radius-inner: 7px;
  /* MINIMAL surfaces. A control is defined by its FILL and by the space around
     it; a 1px line is the exception. Two values only:
       --min-line  the one line colour left, for a STRUCTURAL boundary against
                   something outside the panel (its own outer edge). Never for
                   internal chrome.
       --min-fill  what replaces a border on a control — a soft wash that reads
                   as a surface without drawing an edge.
     Both are neutral greys on purpose, the convention already used by --ctl-*
     further down: a mid grey at low alpha darkens a light panel and lightens a
     dark one, so one value is correct in both themes and every skin. That
     matters here because the OLD lines were a single token too (#e8e8e8 light /
     #27272a dark) and it did not carry — near-invisible on black, a hard rule on
     white. Light was the case that had never been checked. */
  /* The AI mark (the empty-state sparkle) is the ONE place a brand colour is
     wanted in the composer, and it follows the ACTIVE SKIN's own accent. This is
     the UiChemy skin's value: brand ORANGE. Elementor and Gutenberg re-point it
     to their own accents in composer-skin-tokens.css.
     Literal hexes, not rgba(var(--accent-rgb)): that token is white in this skin
     now (the chrome went monochrome), and a white sparkle is not a brand mark. */
  --ai-glyph-from: #FFC574;
  --ai-glyph-to: #FD6A35;
  --min-line: rgba(128, 128, 128, 0.16);
  --min-fill: rgba(128, 128, 128, 0.10);
  --min-fill-hover: rgba(128, 128, 128, 0.16);
  --text-hi: #f4f5f7;
  --uich-text: #d6d7dc;
  --text-mid: #9a9ca6;
  --text-dim: #6a6c76;
  --accent-2: hsl(var(--primary));
  /* legacy-only name, no shadcn collision */
  /* Interactive accent as an RGB triplet so translucent accent tints (borders,
     glows, hover fills) can be re-skinned in one place.
     MONOCHROME: this was UiChemy indigo (75, 34, 204), which put brand violet
     on every focus ring, selected chip and hover wash in the panel. The panel's
     shadcn layer right next door is already neutral (--primary is #fafafa dark /
     #18181b light, --ring likewise), so the indigo was the one thing making the
     chrome brand-coloured — it read as decoration on top of an otherwise
     black-and-white UI. Now white in dark, near-black in light (see the light
     block below, which must state its own value since it inherits this one).
     Platform skins still re-point it: Elementor keeps Elementor pink, Gutenberg
     keeps the wp-admin blue, because those are the host's accents, not ours. */
  --accent-rgb: 255, 255, 255;
  --accent-bg: rgba(var(--accent-rgb), 0.10);
  --brand-green: #E3ED5D;
  --uich-danger: #ff7a7a;
  --ok: #E3ED5D;
  --warn: var(--warn);
  /* No brand orange anywhere in the composer. These fed the Pro upsell surfaces
     (badge, lock icon, CTA, modal icon, the setup cards' hover border) and were
     the only orange left; they now follow the host skin's own accent, which is
     near-black in a light skin, near-white in a dark one, and the builder's own
     colour where a builder skin is active. Keep it that way: the composer uses
     black/white shades plus whatever the builder skin supplies. */
  --uich-pro-grad: currentColor;
  --uich-pro-tint: rgba(128, 128, 128, 0.10);
  /* Follows the skin rather than pinning a brand colour, for the same reason. */
  --uich-brand: currentColor;
  /* Corner rounding for legacy composer chrome (cards, inputs, chips,
     segmented controls). Tightened from 10/7, the airy rounding read as
     over-rounded, especially on tabs. Colors unchanged. */
  --radius: 6px;
  --radius-sm: 4px;
  --input-h: 30px;
  --row-h: 26px;
}

/* Theme tokens also apply when only the composer host carries data-theme (iframe mount). */
.uich-composer-host {
  color-scheme: dark;
}

.uich-composer-host[data-theme="light"],
[data-uich-composer-theme="light"],
body[data-theme="light"],
.panel[data-theme="light"] {
  color-scheme: light;
}

/* ===== Light theme overrides =====
   Also keyed on `data-uich-composer-theme` so the OUTER shell
   (`#uichemy-composer-floating-panel`, which only carries that attribute, not
   `data-theme`) picks up the light `--panel-line` etc. Otherwise its borders
   (e.g. the right-dock `border-left`) fall back to the dark `:root` tokens and
   render as a black edge in light mode. */
.uich-composer-host[data-theme="light"],
[data-uich-composer-theme="light"],
body[data-theme="light"],
.panel[data-theme="light"] {
  --bg-canvas: #f4f4f6;
  --bg-canvas-ink: #15151a;
  --panel-bg: #ffffff;
  --panel-bg-2: #f7f7fa;
  --panel-bg-3: #eeeef3;
  --panel-bg-4: #e3e3eb;
  --panel-line: #e3e4ec;
  --panel-line-2: #cdcfd8;
  /* Shadows: the panel's ink rather than pure black, at a little under half the
     dark theme's strength. See the note in :root. */
  --shadow-rgb: 15, 15, 21;
  --shadow-a: 0.45;
  /* Light segmented pair: a light-grey recessed track with a WHITE active chip
     that lifts above it (macOS / iOS / Claude-settings style), rather than a
     darker-grey active. A hairline + soft shadow give the white chip an edge so
     it reads on the pale track. */
  --seg-track: rgba(0, 0, 0, 0.06);
  --seg-track-line: transparent;
  --seg-thumb: #ffffff;
  --seg-thumb-line: rgba(15, 15, 21, 0.06);
  --seg-thumb-hover: rgba(0, 0, 0, 0.04);
  --seg-thumb-shadow: 0 1px 2px rgba(15, 15, 21, 0.10);
  --text-hi: #0f0f15;
  --uich-text: #2a2b33;
  --text-mid: #6a6c76;
  --text-dim: #9a9ca6;
  --accent-2: hsl(var(--primary));
  /* Light counterpart of the monochrome accent — see the note in :root. Without
     this the light panel would inherit white and every focus ring, selected
     chip and hover wash would disappear into the white surface. Matches
     --text-hi so accent and ink are the same black. */
  --accent-rgb: 15, 15, 21;
  --accent-bg: rgba(var(--accent-rgb), 0.07);
  --brand-green: #E3ED5D;
  --uich-danger: #d44a4a;
  --ok: #b3bf3e;
  --warn: #d49a3a;
}

/*
 * Tailwind entry for the CANVAS bundle — the design system, minus the reset.
 *
 * The on-canvas toolbar (composer-box-handles.js) renders in whichever document
 * holds the page: in Elementor that is the preview iframe, while the panel — and
 * therefore composer.css — lives in the editor window. The toolbar's controls are
 * real PropField / design-system components, so without their utilities they
 * arrive as unstyled blocks and the previewed page's own CSS paints them.
 *
 * `@tailwind base` is deliberately ABSENT, and that absence is the whole point of
 * this file existing. Preflight is a global reset on bare `*`, `body` and
 * `h1`…`p` selectors — `border-width: 0`, `margin: 0`, `display: block` on
 * images — and the document this loads into is the USER'S PAGE. Loading
 * composer.css here instead would restyle the very design they are editing.
 *
 * Components and utilities are safe because tailwind.config.js sets
 * `important: '.uich-tw'`, so every utility ships scoped as `.uich-tw .foo` and
 * cannot reach page markup. Same trade the dashboard bundle already makes with
 * admin-island.css.
 */
.uich-tw .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.uich-tw .pointer-events-none {
  pointer-events: none;
}
.uich-tw .pointer-events-auto {
  pointer-events: auto;
}
.uich-tw .visible {
  visibility: visible;
}
.uich-tw .invisible {
  visibility: hidden;
}
.uich-tw .collapse {
  visibility: collapse;
}
.uich-tw .static {
  position: static;
}
.uich-tw .fixed {
  position: fixed;
}
.uich-tw .absolute {
  position: absolute;
}
.uich-tw .relative {
  position: relative;
}
.uich-tw .sticky {
  position: sticky;
}
.uich-tw .inset-0 {
  inset: 0px;
}
.uich-tw .inset-\[2px\] {
  inset: 2px;
}
.uich-tw .inset-x-0 {
  right: 0px;
  left: 0px;
}
.uich-tw .inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.uich-tw .inset-y-2 {
  top: 8px;
  bottom: 8px;
}
.uich-tw .-bottom-1 {
  bottom: -4px;
}
.uich-tw .-right-6 {
  left: -24px;
}
.uich-tw .-top-1 {
  top: -4px;
}
.uich-tw .-top-8 {
  top: -32px;
}
.uich-tw .bottom-3 {
  bottom: 12px;
}
.uich-tw .bottom-6 {
  bottom: 24px;
}
.uich-tw .left-0 {
  right: 0px;
}
.uich-tw .left-1\/2 {
  right: 50%;
}
.uich-tw .left-2 {
  right: 8px;
}
.uich-tw .left-3 {
  right: 12px;
}
.uich-tw .left-\[50\%\] {
  right: 50%;
}
.uich-tw .right-0 {
  left: 0px;
}
.uich-tw .right-1 {
  left: 4px;
}
.uich-tw .right-2 {
  left: 8px;
}
.uich-tw .right-3 {
  left: 12px;
}
.uich-tw .right-4 {
  left: 16px;
}
.uich-tw .right-6 {
  left: 24px;
}
.uich-tw .top-0 {
  top: 0px;
}
.uich-tw .top-1 {
  top: 4px;
}
.uich-tw .top-3 {
  top: 12px;
}
.uich-tw .top-4 {
  top: 16px;
}
.uich-tw .top-6 {
  top: 24px;
}
.uich-tw .top-\[50\%\] {
  top: 50%;
}
.uich-tw .top-full {
  top: 100%;
}
.uich-tw .isolate {
  isolation: isolate;
}
.uich-tw .z-10 {
  z-index: 10;
}
.uich-tw .z-30 {
  z-index: 30;
}
.uich-tw .z-50 {
  z-index: 50;
}
.uich-tw .z-\[2147483646\] {
  z-index: 2147483646;
}
.uich-tw .z-\[2147483647\] {
  z-index: 2147483647;
}
.uich-tw .z-\[2\] {
  z-index: 2;
}
.uich-tw .z-\[99999\] {
  z-index: 99999;
}
.uich-tw .col-span-2 {
  grid-column: span 2 / span 2;
}
.uich-tw .m-0 {
  margin: 0px;
}
.uich-tw .m-3 {
  margin: 12px;
}
.uich-tw .m-4 {
  margin: 16px;
}
.uich-tw .m-auto {
  margin: auto;
}
.uich-tw .-mx-1 {
  margin-right: -4px;
  margin-left: -4px;
}
.uich-tw .-mx-2 {
  margin-right: -8px;
  margin-left: -8px;
}
.uich-tw .mx-auto {
  margin-right: auto;
  margin-left: auto;
}
.uich-tw .my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.uich-tw .my-3 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.uich-tw .my-3\.5 {
  margin-top: 14px;
  margin-bottom: 14px;
}
.uich-tw .my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.uich-tw .-mb-2 {
  margin-bottom: -8px;
}
.uich-tw .-mb-px {
  margin-bottom: -1px;
}
.uich-tw .-ml-1 {
  margin-right: -4px;
}
.uich-tw .-mr-1 {
  margin-left: -4px;
}
.uich-tw .-mt-1 {
  margin-top: -4px;
}
.uich-tw .mb-1 {
  margin-bottom: 4px;
}
.uich-tw .mb-1\.5 {
  margin-bottom: 6px;
}
.uich-tw .mb-2 {
  margin-bottom: 8px;
}
.uich-tw .mb-2\.5 {
  margin-bottom: 10px;
}
.uich-tw .mb-3 {
  margin-bottom: 12px;
}
.uich-tw .mb-4 {
  margin-bottom: 16px;
}
.uich-tw .ml-1 {
  margin-right: 4px;
}
.uich-tw .ml-1\.5 {
  margin-right: 6px;
}
.uich-tw .ml-2 {
  margin-right: 8px;
}
.uich-tw .ml-auto {
  margin-right: auto;
}
.uich-tw .mr-1 {
  margin-left: 4px;
}
.uich-tw .mr-2 {
  margin-left: 8px;
}
.uich-tw .mt-0\.5 {
  margin-top: 2px;
}
.uich-tw .mt-1 {
  margin-top: 4px;
}
.uich-tw .mt-1\.5 {
  margin-top: 6px;
}
.uich-tw .mt-2 {
  margin-top: 8px;
}
.uich-tw .mt-2\.5 {
  margin-top: 10px;
}
.uich-tw .mt-3 {
  margin-top: 12px;
}
.uich-tw .mt-3\.5 {
  margin-top: 14px;
}
.uich-tw .mt-4 {
  margin-top: 16px;
}
.uich-tw .mt-5 {
  margin-top: 20px;
}
.uich-tw .mt-6 {
  margin-top: 24px;
}
.uich-tw .mt-auto {
  margin-top: auto;
}
.uich-tw .mt-px {
  margin-top: 1px;
}
.uich-tw .\!block {
  display: block !important;
}
.uich-tw .block {
  display: block;
}
.uich-tw .inline-block {
  display: inline-block;
}
.uich-tw .\!inline {
  display: inline !important;
}
.uich-tw .inline {
  display: inline;
}
.uich-tw .flex {
  display: flex;
}
.uich-tw .inline-flex {
  display: inline-flex;
}
.uich-tw .table {
  display: table;
}
.uich-tw .table-cell {
  display: table-cell;
}
.uich-tw .table-row {
  display: table-row;
}
.uich-tw .flow-root {
  display: flow-root;
}
.uich-tw .grid {
  display: grid;
}
.uich-tw .inline-grid {
  display: inline-grid;
}
.uich-tw .contents {
  display: contents;
}
.uich-tw .list-item {
  display: list-item;
}
.uich-tw .\!hidden {
  display: none !important;
}
.uich-tw .hidden {
  display: none;
}
.uich-tw .aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.uich-tw .size-1\.5 {
  width: 6px;
  height: 6px;
}
.uich-tw .size-11 {
  width: 44px;
  height: 44px;
}
.uich-tw .size-12 {
  width: 48px;
  height: 48px;
}
.uich-tw .size-16 {
  width: 64px;
  height: 64px;
}
.uich-tw .size-2 {
  width: 8px;
  height: 8px;
}
.uich-tw .size-3 {
  width: 12px;
  height: 12px;
}
.uich-tw .size-3\.5 {
  width: 14px;
  height: 14px;
}
.uich-tw .size-4 {
  width: 16px;
  height: 16px;
}
.uich-tw .size-5 {
  width: 20px;
  height: 20px;
}
.uich-tw .size-6 {
  width: 24px;
  height: 24px;
}
.uich-tw .size-7 {
  width: 28px;
  height: 28px;
}
.uich-tw .size-8 {
  width: 32px;
  height: 32px;
}
.uich-tw .size-9 {
  width: 36px;
  height: 36px;
}
.uich-tw .size-\[18px\] {
  width: 18px;
  height: 18px;
}
.uich-tw .\!h-4 {
  height: 16px !important;
}
.uich-tw .h-0 {
  height: 0px;
}
.uich-tw .h-1 {
  height: 4px;
}
.uich-tw .h-1\.5 {
  height: 6px;
}
.uich-tw .h-10 {
  height: 40px;
}
.uich-tw .h-2 {
  height: 8px;
}
.uich-tw .h-2\.5 {
  height: 10px;
}
.uich-tw .h-3 {
  height: 12px;
}
.uich-tw .h-3\.5 {
  height: 14px;
}
.uich-tw .h-4 {
  height: 16px;
}
.uich-tw .h-44 {
  height: 176px;
}
.uich-tw .h-5 {
  height: 20px;
}
.uich-tw .h-6 {
  height: 24px;
}
.uich-tw .h-7 {
  height: 28px;
}
.uich-tw .h-8 {
  height: 32px;
}
.uich-tw .h-9 {
  height: 36px;
}
.uich-tw .h-\[1px\] {
  height: 1px;
}
.uich-tw .h-\[320px\] {
  height: 320px;
}
.uich-tw .h-\[70vh\] {
  height: 70vh;
}
.uich-tw .h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.uich-tw .h-auto {
  height: auto;
}
.uich-tw .h-full {
  height: 100%;
}
.uich-tw .h-px {
  height: 1px;
}
.uich-tw .max-h-52 {
  max-height: 208px;
}
.uich-tw .max-h-96 {
  max-height: 384px;
}
.uich-tw .max-h-\[140px\] {
  max-height: 140px;
}
.uich-tw .max-h-\[220px\] {
  max-height: 220px;
}
.uich-tw .max-h-\[280px\] {
  max-height: 280px;
}
.uich-tw .max-h-\[300px\] {
  max-height: 300px;
}
.uich-tw .max-h-\[380px\] {
  max-height: 380px;
}
.uich-tw .max-h-\[52vh\] {
  max-height: 52vh;
}
.uich-tw .max-h-\[86\%\] {
  max-height: 86%;
}
.uich-tw .max-h-\[min\(360px\2c 60vh\)\] {
  max-height: min(360px, 60vh);
}
.uich-tw .min-h-0 {
  min-height: 0px;
}
.uich-tw .min-h-8 {
  min-height: 32px;
}
.uich-tw .min-h-\[420px\] {
  min-height: 420px;
}
.uich-tw .min-h-\[520px\] {
  min-height: 520px;
}
.uich-tw .min-h-\[60px\] {
  min-height: 60px;
}
.uich-tw .min-h-\[90px\] {
  min-height: 90px;
}
.uich-tw .\!w-7 {
  width: 28px !important;
}
.uich-tw .w-0 {
  width: 0px;
}
.uich-tw .w-0\.5 {
  width: 2px;
}
.uich-tw .w-1 {
  width: 4px;
}
.uich-tw .w-1\.5 {
  width: 6px;
}
.uich-tw .w-10 {
  width: 40px;
}
.uich-tw .w-2 {
  width: 8px;
}
.uich-tw .w-2\.5 {
  width: 10px;
}
.uich-tw .w-20 {
  width: 80px;
}
.uich-tw .w-24 {
  width: 96px;
}
.uich-tw .w-3\.5 {
  width: 14px;
}
.uich-tw .w-32 {
  width: 128px;
}
.uich-tw .w-36 {
  width: 144px;
}
.uich-tw .w-4 {
  width: 16px;
}
.uich-tw .w-44 {
  width: 176px;
}
.uich-tw .w-48 {
  width: 192px;
}
.uich-tw .w-5 {
  width: 20px;
}
.uich-tw .w-52 {
  width: 208px;
}
.uich-tw .w-56 {
  width: 224px;
}
.uich-tw .w-6 {
  width: 24px;
}
.uich-tw .w-60 {
  width: 240px;
}
.uich-tw .w-64 {
  width: 256px;
}
.uich-tw .w-7 {
  width: 28px;
}
.uich-tw .w-72 {
  width: 288px;
}
.uich-tw .w-8 {
  width: 32px;
}
.uich-tw .w-9 {
  width: 36px;
}
.uich-tw .w-\[104px\] {
  width: 104px;
}
.uich-tw .w-\[150px\] {
  width: 150px;
}
.uich-tw .w-\[176px\] {
  width: 176px;
}
.uich-tw .w-\[184px\] {
  width: 184px;
}
.uich-tw .w-\[190px\] {
  width: 190px;
}
.uich-tw .w-\[1px\] {
  width: 1px;
}
.uich-tw .w-\[200px\] {
  width: 200px;
}
.uich-tw .w-\[300px\] {
  width: 300px;
}
.uich-tw .w-\[320px\] {
  width: 320px;
}
.uich-tw .w-\[34\%\] {
  width: 34%;
}
.uich-tw .w-\[380px\] {
  width: 380px;
}
.uich-tw .w-\[92vw\] {
  width: 92vw;
}
.uich-tw .w-\[min\(640px\2c 94\%\)\] {
  width: min(640px, 94%);
}
.uich-tw .w-auto {
  width: auto;
}
.uich-tw .w-full {
  width: 100%;
}
.uich-tw .w-max {
  width: -moz-max-content;
  width: max-content;
}
.uich-tw .min-w-0 {
  min-width: 0px;
}
.uich-tw .min-w-10 {
  min-width: 40px;
}
.uich-tw .min-w-4 {
  min-width: 16px;
}
.uich-tw .min-w-8 {
  min-width: 32px;
}
.uich-tw .min-w-9 {
  min-width: 36px;
}
.uich-tw .min-w-\[10rem\] {
  min-width: 160px;
}
.uich-tw .min-w-\[150px\] {
  min-width: 150px;
}
.uich-tw .min-w-\[160px\] {
  min-width: 160px;
}
.uich-tw .min-w-\[168px\] {
  min-width: 168px;
}
.uich-tw .min-w-\[16px\] {
  min-width: 16px;
}
.uich-tw .min-w-\[180px\] {
  min-width: 180px;
}
.uich-tw .min-w-\[190px\] {
  min-width: 190px;
}
.uich-tw .min-w-\[240px\] {
  min-width: 240px;
}
.uich-tw .min-w-\[84px\] {
  min-width: 84px;
}
.uich-tw .min-w-\[8rem\] {
  min-width: 128px;
}
.uich-tw .min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.uich-tw .min-w-full {
  min-width: 100%;
}
.uich-tw .max-w-2xl {
  max-width: 672px;
}
.uich-tw .max-w-5xl {
  max-width: 1024px;
}
.uich-tw .max-w-\[180px\] {
  max-width: 180px;
}
.uich-tw .max-w-\[240px\] {
  max-width: 240px;
}
.uich-tw .max-w-\[280px\] {
  max-width: 280px;
}
.uich-tw .max-w-\[640px\] {
  max-width: 640px;
}
.uich-tw .max-w-\[90vw\] {
  max-width: 90vw;
}
.uich-tw .max-w-\[min\(340px\2c 90vw\)\] {
  max-width: min(340px, 90vw);
}
.uich-tw .max-w-full {
  max-width: 100%;
}
.uich-tw .max-w-lg {
  max-width: 512px;
}
.uich-tw .max-w-md {
  max-width: 448px;
}
.uich-tw .max-w-sm {
  max-width: 384px;
}
.uich-tw .max-w-xs {
  max-width: 320px;
}
.uich-tw .flex-1 {
  flex: 1 1 0%;
}
.uich-tw .flex-shrink {
  flex-shrink: 1;
}
.uich-tw .shrink {
  flex-shrink: 1;
}
.uich-tw .shrink-0 {
  flex-shrink: 0;
}
.uich-tw .flex-grow {
  flex-grow: 1;
}
.uich-tw .grow {
  flex-grow: 1;
}
.uich-tw .border-collapse {
  border-collapse: collapse;
}
.uich-tw .origin-top-left {
  transform-origin: top right;
}
.uich-tw .-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-3 {
  --tw-translate-x: 12px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-4 {
  --tw-translate-x: 16px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-x-\[110\%\] {
  --tw-translate-x: 110%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.uich-tw .animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.uich-tw .cursor-default {
  cursor: default;
}
.uich-tw .cursor-grab {
  cursor: grab;
}
.uich-tw .cursor-not-allowed {
  cursor: not-allowed;
}
.uich-tw .cursor-pointer {
  cursor: pointer;
}
.uich-tw .touch-none {
  touch-action: none;
}
.uich-tw .select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.uich-tw .select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.uich-tw .resize-none {
  resize: none;
}
.uich-tw .resize-y {
  resize: vertical;
}
.uich-tw .resize {
  resize: both;
}
.uich-tw .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.uich-tw .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.uich-tw .grid-cols-\[repeat\(auto-fill\2c minmax\(44px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(44px,1fr));
}
.uich-tw .flex-col {
  flex-direction: column;
}
.uich-tw .flex-col-reverse {
  flex-direction: column-reverse;
}
.uich-tw .flex-wrap {
  flex-wrap: wrap;
}
.uich-tw .place-items-center {
  place-items: center;
}
.uich-tw .items-start {
  align-items: flex-start;
}
.uich-tw .items-center {
  align-items: center;
}
.uich-tw .justify-start {
  justify-content: flex-start;
}
.uich-tw .justify-center {
  justify-content: center;
}
.uich-tw .justify-between {
  justify-content: space-between;
}
.uich-tw .gap-0 {
  gap: 0px;
}
.uich-tw .gap-0\.5 {
  gap: 2px;
}
.uich-tw .gap-1 {
  gap: 4px;
}
.uich-tw .gap-1\.5 {
  gap: 6px;
}
.uich-tw .gap-2 {
  gap: 8px;
}
.uich-tw .gap-2\.5 {
  gap: 10px;
}
.uich-tw .gap-3 {
  gap: 12px;
}
.uich-tw .gap-4 {
  gap: 16px;
}
.uich-tw .gap-6 {
  gap: 24px;
}
.uich-tw .gap-7 {
  gap: 28px;
}
.uich-tw .gap-x-2\.5 {
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.uich-tw .gap-x-4 {
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.uich-tw .gap-x-5 {
  -moz-column-gap: 20px;
       column-gap: 20px;
}
.uich-tw .gap-x-6 {
  -moz-column-gap: 24px;
       column-gap: 24px;
}
.uich-tw .gap-y-1 {
  row-gap: 4px;
}
.uich-tw .gap-y-2 {
  row-gap: 8px;
}
.uich-tw .gap-y-2\.5 {
  row-gap: 10px;
}
.uich-tw .gap-y-3 {
  row-gap: 12px;
}
.uich-tw :is(.space-y-0\.5 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2px * var(--tw-space-y-reverse));
}
.uich-tw :is(.space-y-1\.5 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(6px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(6px * var(--tw-space-y-reverse));
}
.uich-tw :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(8px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(8px * var(--tw-space-y-reverse));
}
.uich-tw :is(.space-y-5 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(20px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(20px * var(--tw-space-y-reverse));
}
.uich-tw :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.uich-tw :is(.divide-border\/60 > :not([hidden]) ~ :not([hidden])) {
  border-color: hsl(var(--border) / 0.6);
}
.uich-tw .self-start {
  align-self: flex-start;
}
.uich-tw .self-end {
  align-self: flex-end;
}
.uich-tw .self-center {
  align-self: center;
}
.uich-tw .overflow-auto {
  overflow: auto;
}
.uich-tw .overflow-hidden {
  overflow: hidden;
}
.uich-tw .overflow-visible {
  overflow: visible;
}
.uich-tw .overflow-x-auto {
  overflow-x: auto;
}
.uich-tw .overflow-y-auto {
  overflow-y: auto;
}
.uich-tw .overflow-x-hidden {
  overflow-x: hidden;
}
.uich-tw .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uich-tw .whitespace-nowrap {
  white-space: nowrap;
}
.uich-tw .whitespace-pre-wrap {
  white-space: pre-wrap;
}
.uich-tw .break-all {
  word-break: break-all;
}
.uich-tw .rounded {
  border-radius: 4px;
}
.uich-tw .rounded-2xl {
  border-radius: 16px;
}
.uich-tw .rounded-\[10px\] {
  border-radius: 10px;
}
.uich-tw .rounded-\[15px\] {
  border-radius: 15px;
}
.uich-tw .rounded-\[3px\] {
  border-radius: 3px;
}
.uich-tw .rounded-\[inherit\] {
  border-radius: inherit;
}
.uich-tw .rounded-full {
  border-radius: 9999px;
}
.uich-tw .rounded-lg {
  border-radius: var(--radius);
}
.uich-tw .rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.uich-tw .rounded-none {
  border-radius: 0px;
}
.uich-tw .rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.uich-tw .rounded-xl {
  border-radius: 12px;
}
.uich-tw .rounded-r {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.uich-tw .rounded-r-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.uich-tw .rounded-tr-\[10px\] {
  border-top-left-radius: 10px;
}
.uich-tw .border {
  border-width: 1px;
}
.uich-tw .border-0 {
  border-width: 0px;
}
.uich-tw .border-2 {
  border-width: 2px;
}
.uich-tw .border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.uich-tw .border-b {
  border-bottom-width: 1px;
}
.uich-tw .border-l {
  border-right-width: 1px;
}
.uich-tw .border-l-\[3px\] {
  border-right-width: 3px;
}
.uich-tw .border-t {
  border-top-width: 1px;
}
.uich-tw .border-dashed {
  border-style: dashed;
}
.uich-tw .border-\[\#0E7C6B\]\/45 {
  border-color: rgb(14 124 107 / 0.45);
}
.uich-tw .border-\[\#0e7c6b\]\/20 {
  border-color: rgb(14 124 107 / 0.2);
}
.uich-tw .border-\[\#171717\]\/20 {
  border-color: rgb(23 23 23 / 0.2);
}
.uich-tw .border-\[\#b4603a\]\/20 {
  border-color: rgb(180 96 58 / 0.2);
}
.uich-tw .border-border {
  border-color: hsl(var(--border));
}
.uich-tw .border-destructive\/20 {
  border-color: hsl(var(--destructive) / 0.2);
}
.uich-tw .border-destructive\/30 {
  border-color: hsl(var(--destructive) / 0.3);
}
.uich-tw .border-destructive\/45 {
  border-color: hsl(var(--destructive) / 0.45);
}
.uich-tw .border-foreground {
  border-color: hsl(var(--foreground));
}
.uich-tw .border-input {
  border-color: hsl(var(--input));
}
.uich-tw .border-muted-foreground\/60 {
  border-color: hsl(var(--muted-foreground) / 0.6);
}
.uich-tw .border-primary {
  border-color: hsl(var(--primary));
}
.uich-tw .border-primary-foreground\/40 {
  border-color: hsl(var(--primary-foreground) / 0.4);
}
.uich-tw .border-primary\/50 {
  border-color: hsl(var(--primary) / 0.5);
}
.uich-tw .border-transparent {
  border-color: transparent;
}
.uich-tw .border-l-foreground\/40 {
  border-right-color: hsl(var(--foreground) / 0.4);
}
.uich-tw .border-l-transparent {
  border-right-color: transparent;
}
.uich-tw .border-t-transparent {
  border-top-color: transparent;
}
.uich-tw .bg-\[\#0E7C6B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(14 124 107 / var(--tw-bg-opacity, 1));
}
.uich-tw .bg-\[\#0e7c6b\]\/10 {
  background-color: rgb(14 124 107 / 0.1);
}
.uich-tw .bg-\[\#0e7c6b\]\/\[0\.06\] {
  background-color: rgb(14 124 107 / 0.06);
}
.uich-tw .bg-\[\#171717\] {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.uich-tw .bg-\[\#171717\]\/10 {
  background-color: rgb(23 23 23 / 0.1);
}
.uich-tw .bg-\[\#171717\]\/\[0\.07\] {
  background-color: rgb(23 23 23 / 0.07);
}
.uich-tw .bg-\[\#BDEFE7\]\/50 {
  background-color: rgb(189 239 231 / 0.5);
}
.uich-tw .bg-\[\#fbe0d0\]\/40 {
  background-color: rgb(251 224 208 / 0.4);
}
.uich-tw .bg-\[color\:var\(--panel-bg-4\2c \2026\)\] {
  background-color: var(--panel-bg-4,…);
}
.uich-tw .bg-\[color\:var\(--rp-surface-raised\2c hsl\(var\(--muted\)\/0\.3\)\)\] {
  background-color: var(--rp-surface-raised,hsl(var(--muted)/0.3));
}
.uich-tw .bg-\[var\(--uc-surface-overlay\)\] {
  background-color: var(--uc-surface-overlay);
}
.uich-tw .bg-accent {
  background-color: hsl(var(--accent));
}
.uich-tw .bg-background {
  background-color: hsl(var(--background));
}
.uich-tw .bg-background\/60 {
  background-color: hsl(var(--background) / 0.6);
}
.uich-tw .bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.uich-tw .bg-border {
  background-color: hsl(var(--border));
}
.uich-tw .bg-card {
  background-color: hsl(var(--card));
}
.uich-tw .bg-card\/90 {
  background-color: hsl(var(--card) / 0.9);
}
.uich-tw .bg-destructive {
  background-color: hsl(var(--destructive));
}
.uich-tw .bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}
.uich-tw .bg-destructive\/5 {
  background-color: hsl(var(--destructive) / 0.05);
}
.uich-tw .bg-foreground {
  background-color: hsl(var(--foreground));
}
.uich-tw .bg-foreground\/40 {
  background-color: hsl(var(--foreground) / 0.4);
}
.uich-tw .bg-input {
  background-color: hsl(var(--input));
}
.uich-tw .bg-muted {
  background-color: hsl(var(--muted));
}
.uich-tw .bg-muted-foreground {
  background-color: hsl(var(--muted-foreground));
}
.uich-tw .bg-muted-foreground\/15 {
  background-color: hsl(var(--muted-foreground) / 0.15);
}
.uich-tw .bg-muted\/20 {
  background-color: hsl(var(--muted) / 0.2);
}
.uich-tw .bg-muted\/30 {
  background-color: hsl(var(--muted) / 0.3);
}
.uich-tw .bg-muted\/40 {
  background-color: hsl(var(--muted) / 0.4);
}
.uich-tw .bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}
.uich-tw .bg-popover {
  background-color: hsl(var(--popover));
}
.uich-tw .bg-primary {
  background-color: hsl(var(--primary));
}
.uich-tw .bg-primary-foreground\/10 {
  background-color: hsl(var(--primary-foreground) / 0.1);
}
.uich-tw .bg-primary\/20 {
  background-color: hsl(var(--primary) / 0.2);
}
.uich-tw .bg-secondary {
  background-color: hsl(var(--secondary));
}
.uich-tw .bg-transparent {
  background-color: transparent;
}
.uich-tw .bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.uich-tw .bg-gradient-to-br {
  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}
.uich-tw .bg-gradient-to-l {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.uich-tw .bg-gradient-to-r {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.uich-tw .from-\[\#171717\]\/\[0\.07\] {
  --tw-gradient-from: rgb(23 23 23 / 0.07) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.uich-tw .from-card {
  --tw-gradient-from: hsl(var(--card)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.uich-tw .via-card {
  --tw-gradient-to: hsl(var(--card) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--card)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.uich-tw .to-card {
  --tw-gradient-to: hsl(var(--card)) var(--tw-gradient-to-position);
}
.uich-tw .to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.uich-tw .fill-current {
  fill: currentColor;
}
.uich-tw .object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.uich-tw .p-0 {
  padding: 0px;
}
.uich-tw .p-1 {
  padding: 4px;
}
.uich-tw .p-1\.5 {
  padding: 6px;
}
.uich-tw .p-2 {
  padding: 8px;
}
.uich-tw .p-2\.5 {
  padding: 10px;
}
.uich-tw .p-3 {
  padding: 12px;
}
.uich-tw .p-3\.5 {
  padding: 14px;
}
.uich-tw .p-4 {
  padding: 16px;
}
.uich-tw .p-5 {
  padding: 20px;
}
.uich-tw .p-6 {
  padding: 24px;
}
.uich-tw .p-\[1px\] {
  padding: 1px;
}
.uich-tw .px-0 {
  padding-right: 0px;
  padding-left: 0px;
}
.uich-tw .px-1 {
  padding-right: 4px;
  padding-left: 4px;
}
.uich-tw .px-1\.5 {
  padding-right: 6px;
  padding-left: 6px;
}
.uich-tw .px-2 {
  padding-right: 8px;
  padding-left: 8px;
}
.uich-tw .px-2\.5 {
  padding-right: 10px;
  padding-left: 10px;
}
.uich-tw .px-3 {
  padding-right: 12px;
  padding-left: 12px;
}
.uich-tw .px-4 {
  padding-right: 16px;
  padding-left: 16px;
}
.uich-tw .px-5 {
  padding-right: 20px;
  padding-left: 20px;
}
.uich-tw .px-6 {
  padding-right: 24px;
  padding-left: 24px;
}
.uich-tw .px-7 {
  padding-right: 28px;
  padding-left: 28px;
}
.uich-tw .px-8 {
  padding-right: 32px;
  padding-left: 32px;
}
.uich-tw .py-0\.5 {
  padding-top: 2px;
  padding-bottom: 2px;
}
.uich-tw .py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.uich-tw .py-1\.5 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.uich-tw .py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.uich-tw .py-16 {
  padding-top: 64px;
  padding-bottom: 64px;
}
.uich-tw .py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.uich-tw .py-2\.5 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.uich-tw .py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.uich-tw .py-3\.5 {
  padding-top: 14px;
  padding-bottom: 14px;
}
.uich-tw .py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.uich-tw .py-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.uich-tw .py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.uich-tw .py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}
.uich-tw .pb-0\.5 {
  padding-bottom: 2px;
}
.uich-tw .pb-1 {
  padding-bottom: 4px;
}
.uich-tw .pb-1\.5 {
  padding-bottom: 6px;
}
.uich-tw .pb-2 {
  padding-bottom: 8px;
}
.uich-tw .pb-2\.5 {
  padding-bottom: 10px;
}
.uich-tw .pb-24 {
  padding-bottom: 96px;
}
.uich-tw .pb-4 {
  padding-bottom: 16px;
}
.uich-tw .pb-5 {
  padding-bottom: 20px;
}
.uich-tw .pb-8 {
  padding-bottom: 32px;
}
.uich-tw .pl-2 {
  padding-right: 8px;
}
.uich-tw .pl-2\.5 {
  padding-right: 10px;
}
.uich-tw .pl-4 {
  padding-right: 16px;
}
.uich-tw .pl-6 {
  padding-right: 24px;
}
.uich-tw .pl-8 {
  padding-right: 32px;
}
.uich-tw .pr-0\.5 {
  padding-left: 2px;
}
.uich-tw .pr-1 {
  padding-left: 4px;
}
.uich-tw .pr-2 {
  padding-left: 8px;
}
.uich-tw .pr-4 {
  padding-left: 16px;
}
.uich-tw .pr-7 {
  padding-left: 28px;
}
.uich-tw .pr-8 {
  padding-left: 32px;
}
.uich-tw .pr-9 {
  padding-left: 36px;
}
.uich-tw .pt-0 {
  padding-top: 0px;
}
.uich-tw .pt-0\.5 {
  padding-top: 2px;
}
.uich-tw .pt-1 {
  padding-top: 4px;
}
.uich-tw .pt-2 {
  padding-top: 8px;
}
.uich-tw .pt-3 {
  padding-top: 12px;
}
.uich-tw .pt-3\.5 {
  padding-top: 14px;
}
.uich-tw .text-left {
  text-align: right;
}
.uich-tw .text-center {
  text-align: center;
}
.uich-tw .align-top {
  vertical-align: top;
}
.uich-tw .align-middle {
  vertical-align: middle;
}
.uich-tw .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --uich-ff: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.uich-tw .font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --uich-ff: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.uich-tw .text-2xl {
  font-size: 24px;
  line-height: 32px;
}
.uich-tw .text-3xl {
  font-size: 30px;
  line-height: 36px;
}
.uich-tw .text-\[10px\] {
  font-size: 10px;
}
.uich-tw .text-\[11\.5px\] {
  font-size: 11.5px;
}
.uich-tw .text-\[11px\] {
  font-size: 11px;
}
.uich-tw .text-\[12px\] {
  font-size: 12px;
}
.uich-tw .text-\[13px\] {
  font-size: 13px;
}
.uich-tw .text-\[14px\] {
  font-size: 14px;
}
.uich-tw .text-\[15px\] {
  font-size: 15px;
}
.uich-tw .text-\[16px\] {
  font-size: 16px;
}
.uich-tw .text-\[9px\] {
  font-size: 9px;
}
.uich-tw .text-base {
  font-size: 16px;
  line-height: 24px;
}
.uich-tw .text-lg {
  font-size: 18px;
  line-height: 28px;
}
.uich-tw .text-sm {
  font-size: 14px;
  line-height: 20px;
}
.uich-tw .text-xl {
  font-size: 20px;
  line-height: 28px;
}
.uich-tw .text-xs {
  font-size: 12px;
  line-height: 16px;
}
.uich-tw .font-bold {
  font-weight: 700;
}
.uich-tw .font-medium {
  font-weight: 500;
}
.uich-tw .font-normal {
  font-weight: 400;
}
.uich-tw .font-semibold {
  font-weight: 600;
}
.uich-tw .uppercase {
  text-transform: uppercase;
}
.uich-tw .lowercase {
  text-transform: lowercase;
}
.uich-tw .capitalize {
  text-transform: capitalize;
}
.uich-tw .italic {
  font-style: italic;
}
.uich-tw .ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.uich-tw .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);
}
.uich-tw .leading-\[17\.5px\] {
  line-height: 17.5px;
}
.uich-tw .leading-none {
  line-height: 1;
}
.uich-tw .leading-relaxed {
  line-height: 1.625;
}
.uich-tw .leading-snug {
  line-height: 1.375;
}
.uich-tw .tracking-\[-0\.35px\] {
  letter-spacing: -0.35px;
}
.uich-tw .tracking-\[-0\.4px\] {
  letter-spacing: -0.4px;
}
.uich-tw .tracking-tight {
  letter-spacing: -0.025em;
}
.uich-tw .tracking-wide {
  letter-spacing: 0.025em;
}
.uich-tw .tracking-wider {
  letter-spacing: 0.05em;
}
.uich-tw .tracking-widest {
  letter-spacing: 0.1em;
}
.uich-tw .text-\[\#0E7C6B\] {
  --tw-text-opacity: 1;
  color: rgb(14 124 107 / var(--tw-text-opacity, 1));
}
.uich-tw .text-\[\#0e7c6b\] {
  --tw-text-opacity: 1;
  color: rgb(14 124 107 / var(--tw-text-opacity, 1));
}
.uich-tw .text-\[\#171717\] {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.uich-tw .text-\[\#171717\]\/\[0\.06\] {
  color: rgb(23 23 23 / 0.06);
}
.uich-tw .text-\[\#b4603a\] {
  --tw-text-opacity: 1;
  color: rgb(180 96 58 / var(--tw-text-opacity, 1));
}
.uich-tw .text-\[var\(--uc-text\)\] {
  color: var(--uc-text);
}
.uich-tw .text-\[var\(--uc-text-muted\)\] {
  color: var(--uc-text-muted);
}
.uich-tw .text-\[var\(--uc-text-subtle\)\] {
  color: var(--uc-text-subtle);
}
.uich-tw .text-accent-foreground {
  color: hsl(var(--accent-foreground));
}
.uich-tw .text-background {
  color: hsl(var(--background));
}
.uich-tw .text-card-foreground {
  color: hsl(var(--card-foreground));
}
.uich-tw .text-current {
  color: currentColor;
}
.uich-tw .text-destructive {
  color: hsl(var(--destructive));
}
.uich-tw .text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}
.uich-tw .text-foreground {
  color: hsl(var(--foreground));
}
.uich-tw .text-input {
  color: hsl(var(--input));
}
.uich-tw .text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.uich-tw .text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / 0.5);
}
.uich-tw .text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}
.uich-tw .text-popover-foreground {
  color: hsl(var(--popover-foreground));
}
.uich-tw .text-primary {
  color: hsl(var(--primary));
}
.uich-tw .text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.uich-tw .text-primary-foreground\/70 {
  color: hsl(var(--primary-foreground) / 0.7);
}
.uich-tw .text-primary-foreground\/80 {
  color: hsl(var(--primary-foreground) / 0.8);
}
.uich-tw .text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}
.uich-tw .text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.uich-tw .underline {
  text-decoration-line: underline;
}
.uich-tw .overline {
  text-decoration-line: overline;
}
.uich-tw .line-through {
  text-decoration-line: line-through;
}
.uich-tw .underline-offset-2 {
  text-underline-offset: 2px;
}
.uich-tw .underline-offset-4 {
  text-underline-offset: 4px;
}
.uich-tw .opacity-0 {
  opacity: 0;
}
.uich-tw .opacity-100 {
  opacity: 1;
}
.uich-tw .opacity-50 {
  opacity: 0.5;
}
.uich-tw .opacity-60 {
  opacity: 0.6;
}
.uich-tw .opacity-70 {
  opacity: 0.7;
}
.uich-tw .opacity-75 {
  opacity: 0.75;
}
.uich-tw .opacity-80 {
  opacity: 0.8;
}
.uich-tw .opacity-90 {
  opacity: 0.9;
}
.uich-tw .shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0 4px 16px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.uich-tw .\!outline {
  outline-style: solid !important;
}
.uich-tw .outline {
  outline-style: solid;
}
.uich-tw .\!ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.uich-tw .ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .ring-border {
  --tw-ring-color: hsl(var(--border));
}
.uich-tw .ring-ring {
  --tw-ring-color: hsl(var(--ring));
}
.uich-tw .ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.uich-tw .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);
}
.uich-tw .grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.uich-tw .invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.uich-tw .sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.uich-tw .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);
}
.uich-tw .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.uich-tw .duration-150 {
  transition-duration: 150ms;
}
.uich-tw .duration-200 {
  transition-duration: 200ms;
}
.uich-tw .duration-300 {
  transition-duration: 300ms;
}
.uich-tw .ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.uich-tw .ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.uich-tw .ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.uich-tw .animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.uich-tw .fade-in {
  --tw-enter-opacity: 0;
}
.uich-tw .fade-in-0 {
  --tw-enter-opacity: 0;
}
.uich-tw .fade-in-80 {
  --tw-enter-opacity: 0.8;
}
.uich-tw .zoom-in {
  --tw-enter-scale: 0;
}
.uich-tw .zoom-in-95 {
  --tw-enter-scale: .95;
}
.uich-tw .zoom-out {
  --tw-exit-scale: 0;
}
.uich-tw .slide-in-from-top-1 {
  --tw-enter-translate-y: -4px;
}
.uich-tw .duration-150 {
  animation-duration: 150ms;
}
.uich-tw .duration-200 {
  animation-duration: 200ms;
}
.uich-tw .duration-300 {
  animation-duration: 300ms;
}
.uich-tw .ease-in {
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.uich-tw .ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.uich-tw .ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.uich-tw .\!running {
  animation-play-state: running !important;
}
.uich-tw .running {
  animation-play-state: running;
}
.uich-tw .paused {
  animation-play-state: paused;
}
.uich-tw .\[-ms-overflow-style\:none\] {
  -ms-overflow-style: none;
}
.uich-tw .\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

/*
 * Tailwind's --tw-* defaults, scoped to the island.
 *
 * These normally arrive with preflight, in its `*, ::before, ::after` block —
 * which declares NOTHING else, no reset, only these variables. Every
 * shadow-*, ring-*, transform and filter utility is written in terms of them, so
 * without this block those utilities compute to nothing at all and fail silently:
 * a menu with `shadow-md` simply has no shadow. That is why they are reproduced
 * here rather than left to preflight.
 *
 * Scoped to `.uich-tw` and its descendants, so unlike preflight's version this
 * touches no page markup. Regenerate from the first `*, ::before, ::after` block
 * of build/composer.css if Tailwind is upgraded.
 */
.uich-tw,
.uich-tw *,
.uich-tw ::before,
.uich-tw ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:;
  --tw-pan-y:;
  --tw-pinch-zoom:;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:;
  --tw-gradient-via-position:;
  --tw-gradient-to-position:;
  --tw-ordinal:;
  --tw-slashed-zero:;
  --tw-numeric-figure:;
  --tw-numeric-spacing:;
  --tw-numeric-fraction:;
  --tw-ring-inset:;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:;
  --tw-brightness:;
  --tw-contrast:;
  --tw-grayscale:;
  --tw-hue-rotate:;
  --tw-invert:;
  --tw-saturate:;
  --tw-sepia:;
  --tw-drop-shadow:;
  --tw-backdrop-blur:;
  --tw-backdrop-brightness:;
  --tw-backdrop-contrast:;
  --tw-backdrop-grayscale:;
  --tw-backdrop-hue-rotate:;
  --tw-backdrop-invert:;
  --tw-backdrop-opacity:;
  --tw-backdrop-saturate:;
  --tw-backdrop-sepia:;
  --tw-contain-size:;
  --tw-contain-layout:;
  --tw-contain-paint:;
  --tw-contain-style:;
}
.uich-tw .file\:border-0::file-selector-button {
  border-width: 0px;
}
.uich-tw .file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.uich-tw .file\:text-sm::file-selector-button {
  font-size: 14px;
  line-height: 20px;
}
.uich-tw .file\:font-medium::file-selector-button {
  font-weight: 500;
}
.uich-tw .file\:text-foreground::file-selector-button {
  color: hsl(var(--foreground));
}
.uich-tw .placeholder\:text-muted-foreground::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}
.uich-tw .placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}
.uich-tw .last\:border-0:last-child {
  border-width: 0px;
}
.uich-tw .focus-within\:ring-1:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus-within\:ring-ring:focus-within {
  --tw-ring-color: hsl(var(--ring));
}
.uich-tw .hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}
.uich-tw .hover\:bg-accent\/50:hover {
  background-color: hsl(var(--accent) / 0.5);
}
.uich-tw .hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}
.uich-tw .hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}
.uich-tw .hover\:bg-foreground\/\[0\.06\]:hover {
  background-color: hsl(var(--foreground) / 0.06);
}
.uich-tw .hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}
.uich-tw .hover\:bg-muted\/40:hover {
  background-color: hsl(var(--muted) / 0.4);
}
.uich-tw .hover\:bg-muted\/50:hover {
  background-color: hsl(var(--muted) / 0.5);
}
.uich-tw .hover\:bg-primary\/80:hover {
  background-color: hsl(var(--primary) / 0.8);
}
.uich-tw .hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}
.uich-tw .hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}
.uich-tw .hover\:text-\[\#171717\]:hover {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.uich-tw .hover\:text-\[var\(--uc-text-strong\)\]:hover {
  color: var(--uc-text-strong);
}
.uich-tw .hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}
.uich-tw .hover\:text-destructive:hover {
  color: hsl(var(--destructive));
}
.uich-tw .hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}
.uich-tw .hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}
.uich-tw .hover\:text-primary-foreground:hover {
  color: hsl(var(--primary-foreground));
}
.uich-tw .hover\:underline:hover {
  text-decoration-line: underline;
}
.uich-tw .hover\:no-underline:hover {
  text-decoration-line: none;
}
.uich-tw .hover\:opacity-100:hover {
  opacity: 1;
}
.uich-tw .hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.uich-tw .focus\:bg-accent:focus {
  background-color: hsl(var(--accent));
}
.uich-tw .focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}
.uich-tw .focus\:text-destructive:focus {
  color: hsl(var(--destructive));
}
.uich-tw .focus\:text-foreground:focus {
  color: hsl(var(--foreground));
}
.uich-tw .focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.uich-tw .focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.uich-tw .focus\:ring-offset-0:focus {
  --tw-ring-offset-width: 0px;
}
.uich-tw .focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}
.uich-tw .focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.uich-tw .focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.uich-tw .focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.uich-tw .focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
}
.uich-tw .focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}
.uich-tw .active\:cursor-grabbing:active {
  cursor: grabbing;
}
.uich-tw .disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.uich-tw .disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.uich-tw .disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.uich-tw :is(.group:hover .group-hover\:-translate-y-0\.5) {
  --tw-translate-y: -2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw :is(.group:hover .group-hover\:translate-x-0\.5) {
  --tw-translate-x: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw :is(.group:hover .group-hover\:bg-foreground\/20) {
  background-color: hsl(var(--foreground) / 0.2);
}
.uich-tw :is(.group:hover .group-hover\:opacity-100) {
  opacity: 1;
}
.uich-tw :is(.peer:disabled ~ .peer-disabled\:cursor-not-allowed) {
  cursor: not-allowed;
}
.uich-tw :is(.peer:disabled ~ .peer-disabled\:opacity-70) {
  opacity: 0.7;
}
.uich-tw .data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.uich-tw .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 4px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -4px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 4px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -4px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
  --tw-translate-x: 16px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
.uich-tw .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
.uich-tw .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.uich-tw .data-\[state\=unchecked\]\:border-muted-foreground\/40[data-state="unchecked"] {
  border-color: hsl(var(--muted-foreground) / 0.4);
}
.uich-tw .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(var(--primary));
}
.uich-tw .data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(var(--accent));
}
.uich-tw .data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(var(--accent));
}
.uich-tw .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(var(--input));
}
.uich-tw .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: hsl(var(--muted-foreground));
}
.uich-tw .data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(var(--foreground));
}
.uich-tw .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(var(--primary-foreground));
}
.uich-tw .data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(var(--accent-foreground));
}
.uich-tw .data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(var(--accent-foreground));
}
.uich-tw .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(var(--muted-foreground));
}
.uich-tw .data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.uich-tw .data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.uich-tw .data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.uich-tw .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.uich-tw .data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.uich-tw .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.uich-tw .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.uich-tw .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -8px;
}
.uich-tw .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 8px;
}
.uich-tw .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -8px;
}
.uich-tw .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 8px;
}
.uich-tw .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}
.uich-tw .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}
.uich-tw .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}
.uich-tw .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}
@media (min-width: 640px) {
  .uich-tw .sm\:ml-12 {
    margin-right: 48px;
  }
  .uich-tw .sm\:max-w-2xl {
    max-width: 672px;
  }
  .uich-tw .sm\:max-w-md {
    max-width: 448px;
  }
  .uich-tw .sm\:shrink-0 {
    flex-shrink: 0;
  }
  .uich-tw .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .uich-tw .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .uich-tw .sm\:flex-row {
    flex-direction: row;
  }
  .uich-tw .sm\:items-center {
    align-items: center;
  }
  .uich-tw .sm\:justify-end {
    justify-content: flex-end;
  }
  .uich-tw .sm\:justify-between {
    justify-content: space-between;
  }
  .uich-tw :is(.sm\:space-x-2 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-x-reverse: 0;
    margin-left: calc(8px * var(--tw-space-x-reverse));
    margin-right: calc(8px * calc(1 - var(--tw-space-x-reverse)));
  }
  .uich-tw .sm\:rounded-lg {
    border-radius: var(--radius);
  }
  .uich-tw .sm\:p-6 {
    padding: 24px;
  }
  .uich-tw .sm\:p-8 {
    padding: 32px;
  }
  .uich-tw .sm\:px-6 {
    padding-right: 24px;
    padding-left: 24px;
  }
  .uich-tw .sm\:text-left {
    text-align: right;
  }
}
@media (min-width: 768px) {
  .uich-tw .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .uich-tw .md\:grid {
    display: grid;
  }
  .uich-tw .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .uich-tw .lg\:w-\[38\%\] {
    width: 38%;
  }
  .uich-tw .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .uich-tw .lg\:flex-row {
    flex-direction: row;
  }
  .uich-tw :is(.lg\:divide-x > :not([hidden]) ~ :not([hidden])) {
    --tw-divide-x-reverse: 0;
    border-left-width: calc(1px * var(--tw-divide-x-reverse));
    border-right-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
  .uich-tw :is(.lg\:divide-y-0 > :not([hidden]) ~ :not([hidden])) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }
}
@media (min-width: 1280px) {
  .uich-tw .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.uich-tw .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}
.uich-tw :is(.\[\&\>\[data-state\=checked\]\]\:\!translate-x-3>[data-state=checked]) {
  --tw-translate-x: 12px !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.uich-tw :is(.\[\&\>\[data-state\=unchecked\]\]\:bg-muted-foreground>[data-state=unchecked]) {
  background-color: hsl(var(--muted-foreground));
}
.uich-tw :is(.\[\&\>span\]\:line-clamp-1>span) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.uich-tw :is(.\[\&\>span\]\:\!size-3>span) {
  width: 12px !important;
  height: 12px !important;
}
.uich-tw :is(.\[\&\>svg\]\:size-4>svg) {
  width: 16px;
  height: 16px;
}
.uich-tw :is(.\[\&\>svg\]\:shrink-0>svg) {
  flex-shrink: 0;
}
.uich-tw :is(.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg) {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.uich-tw :is(.\[\&_svg\]\:pointer-events-none svg) {
  pointer-events: none;
}
.uich-tw :is(.\[\&_svg\]\:size-3\.5 svg) {
  width: 14px;
  height: 14px;
}
.uich-tw :is(.\[\&_svg\]\:size-36 svg) {
  width: 144px;
  height: 144px;
}
.uich-tw :is(.\[\&_svg\]\:size-4 svg) {
  width: 16px;
  height: 16px;
}
.uich-tw :is(.\[\&_svg\]\:size-5 svg) {
  width: 20px;
  height: 20px;
}
.uich-tw :is(.\[\&_svg\]\:size-8 svg) {
  width: 32px;
  height: 32px;
}
.uich-tw :is(.\[\&_svg\]\:size-\[18px\] svg) {
  width: 18px;
  height: 18px;
}
.uich-tw :is(.\[\&_svg\]\:shrink-0 svg) {
  flex-shrink: 0;
}

/*
 * shadcn/ui design tokens, shared by BOTH bundles.
 *
 * Split out of shadcn.css so the dashboard can reuse the tokens WITHOUT
 * `@tailwind base`. Preflight is a global reset (bare `*`, `body`, `h1`…`p`
 * selectors), so pulling shadcn.css into the dashboard bundle would reset the
 * whole wp-admin page, WordPress's own admin menu and admin bar included.
 * The composer bundle still loads preflight; it owns its panel.
 *
 * Deliberately UNLAYERED (the `@layer base { … }` wrapper was removed): an
 * unlayered rule beats every layered one regardless of source order, and
 * `@layer base` requires an `@tailwind base` for Tailwind to hoist it into –
 * which is exactly what the dashboard bundle omits. UiChemy's own brand.css
 * relies on the same unlayered-wins behaviour.
 *
 * Every declaration is scoped to `.uich-tw`, so these tokens only apply inside
 * a Tailwind island and never touch the host page.
 */
/*
 * shadcn/ui theme, zinc base, verbatim from the shadcn registry.
 * Variables are declared on `.uich-tw` (not :root) so the theme travels with
 * the composer host and portal roots without touching Elementor's document.
 * Dark mode: add `dark` to the same element (or any ancestor inside the scope).
 */
.uich-tw {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 91%;              /* soft hairline, matches native rgba(0,0,0,.09) */
  /* Input/control outline. shadcn's stock 90% is nearly invisible on the
     white panel (inputs read as "unboxed" in light mode), so darken the
     control outline specifically, dividers keep the softer --border above. */
  --input: 240 5% 80%;
  --ring: 240 10% 3.9%;
  /* Corner rounding for shadcn controls (buttons, inputs, popovers, cards,
     segmented tabs). Kept tight/modern, rounded-lg≈6px, md≈4px, sm≈2px –
     rather than the earlier airy 0.8rem which read as over-rounded. */
  --radius: 6.4px;
  /* Semantic category colors (construct markers etc.), Tailwind palette
     hues at 600 for light backgrounds, per shadcn convention. */
  --status-data: 221 83% 53%;      /* blue-600 */
  --status-loop: 262 83% 58%;      /* violet-600 */
  --status-condition: 32 95% 44%;  /* amber-600 */
  --status-form: 142 76% 36%;      /* green-600 */
}

.uich-tw.dark,
.uich-tw .dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  /* Elevated above --background (240 10% 3.9%) so popovers, menus and the
     Add-class suggestion list read as a raised surface and are fully opaque
     over the tab row — matches the Elementor dark skin, which already lifts
     --popover off its background. (audit A10 / K7) */
  --popover: 240 3.7% 15.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  /* 500-grade hues read better on dark surfaces. */
  --status-data: 217 91% 60%;      /* blue-500 */
  --status-loop: 258 90% 66%;      /* violet-500 */
  --status-condition: 38 92% 50%;  /* amber-500 */
  --status-form: 142 71% 45%;      /* green-500 */
}

/*
 * Scoped replacement for Tailwind preflight (preflight is disabled globally
 * so it can't reset Elementor's editor DOM).
 */
.uich-tw,
.uich-tw *,
.uich-tw *::before,
.uich-tw *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: hsl(var(--border));
}

.uich-tw {
  /* Unified with the dashboard shell: the island renders in the design-system
     font (Zalando Sans via --uc-font-sans), not its own Plus Jakarta Sans, so
     text looks the same across native and builder screens. The literal Zalando
     fallback keeps it correct even if the token isn't in scope. */
  font-family: var(--uc-font-sans, "Zalando Sans", ui-sans-serif, system-ui, sans-serif);
  --uich-ff: var(--uc-font-sans, "Zalando Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

/* No semibold, for now: fold Tailwind's font-semibold utility to Medium so no
   text in the island renders at 600. Routed through the DS weight token, so
   flipping it back is a one-line change (see --uc-weight-semibold). */
.uich-tw .font-semibold {
  font-weight: var(--uc-weight-medium, 500) !important;
}

/* Elementor skin: match the Editor One panel type exactly, Roboto at 14px
   base (--e-one-typography-fontFamily / fontSize). Deliberately kept on Roboto
   (the editor panel stays as-is); only the Brand skin follows the unified font
   above. Higher specificity than the base .uich-tw rule. */

.uich-tw h1, .uich-tw h2, .uich-tw h3, .uich-tw h4, .uich-tw h5, .uich-tw h6,
.uich-tw p, .uich-tw ul, .uich-tw ol, .uich-tw figure, .uich-tw blockquote {
  margin: 0;
  padding: 0;
}

.uich-tw ul, .uich-tw ol {
  list-style: none;
}

/* `:not(:where([data-uc]))` leaves the UiChemy design-system controls (the
   right-side panel's components, see components/ui/ds/) to their own classes.
   `:where()` adds no specificity, so this rule stays (0,1,1) for everything
   else. Without it the reset's `background: transparent` and `font`/`color:
   inherit` beat every DS class (0,1,0). */
.uich-tw button:not(:where([data-uc])), .uich-tw input:not(:where([data-uc])), .uich-tw optgroup, .uich-tw select:not(:where([data-uc])), .uich-tw textarea:not(:where([data-uc])) {
  font: inherit;
  --uich-ff: inherit;
  color: inherit;
  margin: 0;
  /* NOTE: intentionally NOT zeroing `padding` here. This reset is (0,1,1)
     specificity, which beat every custom component class (`.gp-type-tab`,
     `.bp-dd-btn`, …) at (0,1,0) and silently stripped their left/right
     padding, controls looked cramped in many places. Tailwind utility
     buttons still get their padding (utilities are `.uich-tw`-scoped at
     (0,2,0) via `important:'.uich-tw'`), and fixed-size icon buttons use
     border-box + centered content, so leaving padding alone is safe. */
  background: transparent;
}

.uich-tw button, .uich-tw [role='button'] {
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.uich-tw button:disabled:not(:where([data-uc])) {
  cursor: default;
}

.uich-tw img, .uich-tw svg, .uich-tw video, .uich-tw canvas {
  display: block;
  max-width: 100%;
}

.uich-tw a {
  color: inherit;
  text-decoration: inherit;
}

.uich-tw [hidden] {
  display: none;
}

/* =============================================================================
   UiChemy Create, Design System Tokens (Phase 1, isolated)
   -----------------------------------------------------------------------------
   SURFACE MODEL, components are surface-agnostic. They read semantic tokens
   (surfaces, text, borders, ring, per-family fg/soft) whose VALUES are set by
   the surface scope a component lives in:

     .uc-content            → light content   (current look, DEFAULT)
     .uc-content[data-theme="dark"] → dark content (future, token change only)
     .uc-chrome             → dark chrome     (fixed; sidebar/nav/rails)

   `.uc-scope` and `.uc-portal` behave as light content, so existing usage is
   unchanged and the light view is pixel-identical to before this restructure.

   ISOLATION: all tokens are scoped under these classes (NOT :root). Nothing
   here touches the existing globals/theme.
   ========================================================================== */

/* Brand typeface, bundled via webpack (relative paths resolve to
   ../fonts/, emitted into build/ and URL-rewritten at build time so the
   fonts load correctly from wp-content, not the server root). */
@font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ZalandoSans-Regular.bcfcc767.ttf) format("truetype"); }
@font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/ZalandoSans-Medium.41051c31.ttf) format("truetype"); }
@font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/ZalandoSans-SemiBold.d690e087.ttf) format("truetype"); }
@font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/ZalandoSans-Bold.0ac5948b.ttf) format("truetype"); }

/* =============================================================================
   1. BASE, surface-INDEPENDENT tokens (identical on every surface).
      Applies to every surface scope so the values are always present.
   ========================================================================== */
/* `:root` added (AI-creator port) so DS token VALUES resolve app-wide for
   inline DS controls (buttons/inputs/triggers) WITHOUT importing the scope's
   font/color/box-sizing reset, that stays under `.uc-*` only. Nothing in the
   app references `--uc-*`, so these are inert for existing components. */
:root,
.uc-scope,
.uc-content,
.uc-chrome,
.uc-portal {
  /* ---- Brand + semantic SOLID fills + on-fill text (constant) ----------
     ORANGE is back on the SOLID brand fill only, this paints the primary /
     main-CTA buttons (tone="brand" solid). The brand -fg/-soft/-border/-glow
     below stay NEUTRAL, so soft/outline/ghost brand controls, icon tints and
     text remain monochrome. --uc-accent stays neutral (no purple). */
  --uc-brand:   #FD6A35;  --uc-brand-on:   #FFFFFF;
  --uc-success: #2EA343;  --uc-success-on: #FFFFFF;
  --uc-danger:  #F65258;  --uc-danger-on:  #FFFFFF;
  --uc-warning: #FFA940;  --uc-warning-on: #171717;
  --uc-accent:  var(--uc-inverse-bg);  --uc-accent-on:  var(--uc-inverse-fg);

  /* ---- Family hairline borders (translucent, work on any surface) ----- */
  --uc-brand-border:   var(--uc-border);
  --uc-success-border: rgba(46, 163, 67, 0.40);
  --uc-danger-border:  rgba(246, 82, 88, 0.40);
  --uc-warning-border: rgba(255, 169, 64, 0.42);
  --uc-accent-border:  var(--uc-border);

  /* ---- Hover / press glow washes (translucent, surface-agnostic) ------ */
  --uc-brand-glow-hover:   rgba(128, 128, 128, 0.10); --uc-brand-glow-press:   rgba(128, 128, 128, 0.18);
  --uc-success-glow-hover: rgba(46, 163, 67, 0.08);  --uc-success-glow-press: rgba(46, 163, 67, 0.16);
  --uc-danger-glow-hover:  rgba(246, 82, 88, 0.08);  --uc-danger-glow-press:  rgba(246, 82, 88, 0.16);
  --uc-warning-glow-hover: rgba(255, 169, 64, 0.10); --uc-warning-glow-press: rgba(255, 169, 64, 0.18);
  --uc-accent-glow-hover:  rgba(128, 128, 128, 0.10); --uc-accent-glow-press:  rgba(128, 128, 128, 0.18);

  /* ---- Inverse text (constant) ----------------------------------------- */
  --uc-text-inverse: #FFFFFF;

  /* ---- Semantic aliases (resolve per surface via the surface tokens) --- */
  --uc-bg:        var(--uc-surface-base);
  --uc-fg:        var(--uc-text-strong);
  --uc-fg-muted:  var(--uc-text-muted);
  --uc-card:      var(--uc-surface-raised);
  --uc-card-fg:   var(--uc-text-strong);
  --uc-muted:     var(--uc-surface-sunken);
  --uc-elevated:  var(--uc-surface-overlay);

  /* ---- Radius (UiChemy scale: name = pixel value; mirrors the styleguide
         corner-radius set). Semantic aliases below keep components working. -- */
  --uc-radius-0: 0;      --uc-radius-2: 2px;    --uc-radius-4: 4px;
  --uc-radius-6: 6px;    --uc-radius-8: 8px;    --uc-radius-12: 12px;
  --uc-radius-16: 16px;  --uc-radius-24: 24px;  --uc-radius-32: 32px;
  --uc-radius-infinite: 9999px;
  /* Semantic aliases → numeric scale (value-identical to before) */
  --uc-radius-xs: var(--uc-radius-4);   --uc-radius-sm: var(--uc-radius-6);
  --uc-radius-md: var(--uc-radius-8);   --uc-radius-lg: var(--uc-radius-12);
  --uc-radius-xl: var(--uc-radius-16);  --uc-radius-pill: var(--uc-radius-infinite);

  /* ---- Spacing (UiChemy scale: name = pixels) -------------------------- */
  --uc-space-0: 0;     --uc-space-1: 1px;   --uc-space-2: 2px;   --uc-space-3: 3px;
  --uc-space-4: 4px;   --uc-space-5: 5px;   --uc-space-6: 6px;   --uc-space-7: 7px;
  --uc-space-8: 8px;   --uc-space-9: 9px;   --uc-space-10: 10px; --uc-space-11: 11px;
  --uc-space-12: 12px; --uc-space-14: 14px; --uc-space-16: 16px; --uc-space-20: 20px;
  --uc-space-24: 24px; --uc-space-28: 28px; --uc-space-32: 32px; --uc-space-36: 36px;
  --uc-space-40: 40px; --uc-space-44: 44px; --uc-space-48: 48px;

  /* ---- Typography ------------------------------------------------------ */
  --uc-font-sans: "Zalando Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --uc-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --uc-text-3xs: 8px;    --uc-text-2xs: 10px;  --uc-text-xs: 12px;
  /* 11px: compact meta / dense-panel text (list meta, inspector hints, code gutter). */
  --uc-text-11: 11px;
  --uc-text-sm: 13px;  --uc-text-base: 14px; --uc-text-md: 16px;
  --uc-text-lg: 18px;   --uc-text-xl: 20px;    --uc-text-2xl: 24px;
  --uc-text-3xl: 30px;
  /* --uc-weight-semibold is temporarily folded to Medium (500): no text renders
     at 600 for now. Flip back to 600 here to restore SemiBold everywhere it's
     used (Card / Alert / Dialog / Accordion titles, etc.). */
  --uc-weight-regular: 400; --uc-weight-medium: 500;  --uc-weight-semibold: 500;
  --uc-leading-tight: 1.2;  --uc-leading-snug: 1.35;  --uc-leading-normal: 1.5;
  --uc-tracking-tight: -0.01em; --uc-tracking-normal: 0; --uc-tracking-wide: 0.02em;

  /* ---- Elevation (neutral recipes; control-brand recolored to orange) --
     Resting + hover surfaces are FLAT (ElevenLabs-style): definition comes
     from the single hairline border, not a shadow. Only true overlays
     (popovers/menus/modals = shadow-3/4/5) still float. */
  --uc-shadow-1: none;
  --uc-shadow-2: none;
  --uc-shadow-3: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 2px 4px -1px oklch(0% 0 0 / 0.05), 0 6px 14px -3px oklch(0% 0 0 / 0.08);
  --uc-shadow-4: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 6px 12px -4px oklch(0% 0 0 / 0.06), 0 14px 28px -6px oklch(0% 0 0 / 0.10);
  --uc-shadow-5: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 12px 24px -8px oklch(0% 0 0 / 0.08), 0 28px 56px -12px oklch(0% 0 0 / 0.14);
  /* Filled controls (solid buttons): light top highlight + one soft drop.
     Kept subtle, depth reads without heavy shadows. */
  --uc-shadow-control:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 3px -1px rgba(0, 0, 0, 0.05);
  /* Colored solids (brand/success/danger): neutral dark inner edge so it suits
     any hue, plus a light top highlight and soft drop. */
  --uc-shadow-control-brand:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.09),
    0 2px 3px -1px rgba(0, 0, 0, 0.06);
  --uc-shadow-control-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.14);
  --uc-shadow-input: inset 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  /* Raised secondary controls (outline buttons, select/menu triggers): a faint
     top highlight and a whisper of drop. Edge comes from the component border. */
  --uc-shadow-raised:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 3px -1px rgba(0, 0, 0, 0.04);
  /* Very subtle gloss: faint light top → faint dark bottom. */
  --uc-sheen: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.03));

  /* ---- Control sizing -------------------------------------------------- */
  --uc-control-h-sm: 28px; --uc-control-h-md: 32px; --uc-control-h-lg: 40px;

  /* ---- Motion ---------------------------------------------------------- */
  --uc-dur-fast: 160ms; --uc-dur-base: 240ms; --uc-dur-slow: 340ms;
  /* Appearance of popovers / overlays (tooltip, menu, select, dialog), a touch
     slower than base so things ease in gracefully instead of flashing on. */
  --uc-dur-enter: 300ms;
  --uc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --uc-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --uc-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Z-index --------------------------------------------------------- */
  /* Dropdowns/selects/menus sit ABOVE dialogs (1250 > z-dialog 1200) so a Select
     opened inside a modal renders on top instead of behind it. Tooltip stays highest. */
  --uc-z-overlay: 1100; --uc-z-dialog: 1200; --uc-z-dropdown: 1250; --uc-z-tooltip: 1300;
}

/* =============================================================================
   2. SURFACE, CONTENT (light). DEFAULT. Values identical to pre-restructure,
      so the light view is unchanged. `.uc-scope` / `.uc-portal` map here too.
   ========================================================================== */
:root,
.uc-scope,
.uc-content,
.uc-portal {
  --uc-surface-sunken:  #EBEBEB;
  --uc-surface-base:    #F4F4F4;
  --uc-surface-raised:  #FFFFFF;
  --uc-surface-overlay: rgba(255, 255, 255, 0.10);
  --uc-surface-control: #FFFFFF;   /* secondary control fill (raised) */
  --uc-button-soft-neutral-bg: var(--uc-surface-sunken);
  --uc-button-soft-neutral-shadow: var(--uc-shadow-1);
  /* The hover / highlight wash (menu rows, the sliding pill in Select and
     Menu). SEPARATE from --uc-surface-control, which it used to borrow: that
     token is a RAISED FILL, and the two values only coincide on a dark surface
     where rgba(255,255,255,0.05) happens to read as both. On light, a raised
     control is #FFFFFF — a white pill on a white menu, i.e. invisible — while
     a hover wash has to be darker than what it sits on. Translucent so it
     composites over whatever surface the menu uses. */
  --uc-surface-hover: rgba(0, 0, 0, 0.04);

  --uc-text-strong: #0A0A0A;
  --uc-text:        #171717;
  --uc-text-muted:  #737373;
  --uc-text-subtle: #A3A3A3;

  /* high-contrast inverse fill (B&W primary): dark on light content */
  --uc-inverse-bg: #171717;
  --uc-inverse-fg: #FFFFFF;

  /* One soft, semi-transparent hairline (ElevenLabs uses rgba(0,0,0,0.1)).
     Translucent so it composites correctly over white AND grey tiles. */
  --uc-border-subtle: rgba(0, 0, 0, 0.055);
  --uc-border:        rgba(0, 0, 0, 0.09);
  --uc-border-strong: rgba(0, 0, 0, 0.14);
  /* The HOVER border on controls — one step above --uc-border-strong, and a
     BORDER value, not a text one. Every hover ring used --uc-text-subtle,
     which on dark is ALSO #525252 (the two coincide there, so the mistake was
     invisible — and the hover was in fact a no-op, resting and hover being the
     same colour) but on light is #A3A3A3: roughly 36% black against a 14%
     resting border, i.e. a hard outline snapping in instead of a step up. */
  --uc-border-hover:  rgba(0, 0, 0, 0.22);
  --uc-ring:          #737373;

  /* per-family foreground (readable on light). brand/accent = dark ink. */
  --uc-brand-fg:   #171717;
  --uc-success-fg: #0A842A;
  --uc-danger-fg:  #D12D37;
  --uc-warning-fg: #AA712B;
  --uc-accent-fg:  #171717;

  /* per-family soft tint backgrounds (opaque light tints). brand/accent = grey. */
  --uc-brand-soft:   #F0F0F0;
  --uc-success-soft: #E7FFE7;
  --uc-danger-soft:  #FFF2EF;
  --uc-warning-soft: #FFEDD8;
  --uc-accent-soft:  #F0F0F0;
}

/* =============================================================================
   3. SURFACE, CONTENT DARK (future). Token change only; no component rebuild.
      Slightly lighter than chrome so content sits "above" the fixed chrome.
   ========================================================================== */
.uc-content[data-theme="dark"] {
  --uc-surface-sunken:  #151515;
  --uc-surface-base:    #1C1C1C;
  --uc-surface-raised:  #242424;
  --uc-surface-overlay: #2A2A2A;
  --uc-surface-control: rgba(255, 255, 255, 0.05);  /* subtle lift, blends on dark */
  /* Muted neutral buttons use the secondary control recipe on dark surfaces. */
  --uc-button-soft-neutral-bg: var(--uc-surface-control);
  --uc-button-soft-neutral-shadow: var(--uc-shadow-raised);

  --uc-text-strong: #F5F5F5;
  --uc-text:        #E5E5E5;
  --uc-text-muted:  #A3A3A3;
  --uc-text-subtle: #737373;

  /* inverse flips to light-on-dark so the B&W primary stays high-contrast */
  --uc-inverse-bg: #F5F5F5;
  --uc-inverse-fg: #1C1C1C;

  --uc-border-subtle: #2E2E2E;
  --uc-border:        #3D3D3D;
  --uc-border-strong: #525252;
  /* Exactly what --uc-text-subtle resolves to here, so dark is unchanged. */
  --uc-border-hover:  #525252;
  --uc-ring:          #A3A3A3;

  --uc-brand-fg:   #EDEDED;
  --uc-success-fg: #A7EAAA;
  --uc-danger-fg:  #FDC9C6;
  --uc-warning-fg: #FFC680;
  --uc-accent-fg:  #EDEDED;

  --uc-brand-soft:   rgba(255, 255, 255, 0.12);
  --uc-success-soft: rgba(46, 163, 67, 0.20);
  --uc-danger-soft:  rgba(246, 82, 88, 0.20);
  --uc-warning-soft: rgba(255, 169, 64, 0.22);
  --uc-accent-soft:  rgba(255, 255, 255, 0.12);
}

/* =============================================================================
   4. SURFACE, CHROME (dark, fixed). Values from the existing app dark sidebar
      (#171717 / #202020, text-white / text-weakest, border-dark-weakest/default).
   ========================================================================== */
.uc-chrome {
  --uc-surface-sunken:  #101010;
  --uc-surface-base:    #171717;
  --uc-surface-raised:  #202020;
  --uc-surface-overlay: #242424;
  --uc-surface-control: rgba(255, 255, 255, 0.05);  /* subtle lift, blends on dark */
  --uc-button-soft-neutral-bg: var(--uc-surface-control);
  --uc-button-soft-neutral-shadow: var(--uc-shadow-raised);
  /* Same value --uc-surface-control had, so dark is unchanged by the split. */
  --uc-surface-hover: rgba(255, 255, 255, 0.05);

  --uc-text-strong: #FFFFFF;
  --uc-text:        #A3A3A3;
  --uc-text-muted:  #737373;
  --uc-text-subtle: #525252;

  /* inverse flips to light-on-dark so the B&W primary stays high-contrast */
  --uc-inverse-bg: #F5F5F5;
  --uc-inverse-fg: #171717;

  --uc-border-subtle: #333333;
  --uc-border:        #404040;
  --uc-border-strong: #525252;
  /* Exactly what --uc-text-subtle resolves to here, so dark is unchanged. */
  --uc-border-hover:  #525252;
  --uc-ring:          #A3A3A3;

  --uc-brand-fg:   #EDEDED;
  --uc-success-fg: #A7EAAA;
  --uc-danger-fg:  #FDC9C6;
  --uc-warning-fg: #FFC680;
  --uc-accent-fg:  #EDEDED;

  --uc-brand-soft:   rgba(255, 255, 255, 0.12);
  --uc-success-soft: rgba(46, 163, 67, 0.20);
  --uc-danger-soft:  rgba(246, 82, 88, 0.20);
  --uc-warning-soft: rgba(255, 169, 64, 0.22);
  --uc-accent-soft:  rgba(255, 255, 255, 0.12);
}

/* =============================================================================
   4b. POPOVER, fixed dark scope for dropdowns (Select / Menu). Always dark in
       every mode. Applied alongside `uc-portal` (base tokens + box-sizing).
   ========================================================================== */
.uc-pop-dark {
  --uc-surface-sunken:  #141414;
  --uc-surface-base:    #1A1A1A;
  --uc-surface-raised:  #242424;
  /* A dropdown must read as a LAYER above the panel. The old #1C1C1C sat
     between the panel chrome (#171717) and its field surfaces (#202020/#242424),
     so a dark list melted into the dark panel. #2E2E2E is clearly lighter than
     every panel surface, and the stronger shadow below (soft dark drops that
     actually show on dark, reused from the canvas dock bar) plus the .content
     border give it a crisp, floating edge. [ui-ux blend fix] */
  --uc-surface-overlay: #2E2E2E;
  --uc-surface-control: rgba(255, 255, 255, 0.08);
  --uc-button-soft-neutral-bg: var(--uc-surface-control);
  --uc-button-soft-neutral-shadow: var(--uc-shadow-raised);
  /* Same value --uc-surface-control had here; a pop-up is already a layer up,
     so its wash is a touch stronger than the panel's. */
  --uc-surface-hover: rgba(255, 255, 255, 0.08);
  --uc-shadow-4: 0 16px 44px -12px rgb(0 0 0 / 55%), 0 4px 12px -4px rgb(0 0 0 / 40%);

  --uc-text-strong: #FFFFFF;
  --uc-text:        #E5E5E5;
  --uc-text-muted:  #A3A3A3;
  --uc-text-subtle: #737373;

  --uc-inverse-bg: #F5F5F5;
  --uc-inverse-fg: #171717;

  --uc-border-subtle: #2E2E2E;
  --uc-border:        #3D3D3D;
  --uc-border-strong: #525252;
  /* Exactly what --uc-text-subtle resolves to here, so dark is unchanged. */
  --uc-border-hover:  #525252;
  --uc-ring:          #A3A3A3;

  --uc-brand-fg:   #EDEDED;  --uc-brand-soft:   rgba(255, 255, 255, 0.12);
  --uc-success-fg: #A7EAAA;  --uc-success-soft: rgba(46, 163, 67, 0.20);
  --uc-danger-fg:  #FDC9C6;  --uc-danger-soft:  rgba(246, 82, 88, 0.20);
  --uc-warning-fg: #FFC680;  --uc-warning-soft: rgba(255, 169, 64, 0.22);
  --uc-accent-fg:  #EDEDED;  --uc-accent-soft:  rgba(255, 255, 255, 0.12);

  color: var(--uc-text);
}

/* =============================================================================
   5. BASELINES, each surface paints its own background + text.
   ========================================================================== */
.uc-scope,
.uc-content,
.uc-chrome {
  font-family: var(--uc-font-sans);
  --uich-ff: var(--uc-font-sans);
  font-size: var(--uc-text-base);
  line-height: var(--uc-leading-normal);
  color: var(--uc-text);
  background: var(--uc-surface-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Portalled content mounts in <body>; carry font/tokens but no background. */
.uc-portal {
  font-family: var(--uc-font-sans);
  --uich-ff: var(--uc-font-sans);
  font-size: var(--uc-text-base);
  line-height: var(--uc-leading-normal);
  color: var(--uc-text);
  -webkit-font-smoothing: antialiased;
}
.uc-scope *, .uc-scope *::before, .uc-scope *::after,
.uc-content *, .uc-content *::before, .uc-content *::after,
.uc-chrome *, .uc-chrome *::before, .uc-chrome *::after,
.uc-portal *, .uc-portal *::before, .uc-portal *::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .uc-scope *, .uc-content *, .uc-chrome *, .uc-portal * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   UiChemy Create, COMPONENT tokens (per-component knobs)
   -----------------------------------------------------------------------------
   Per-component sizing/shape variables, editable from the internal DS editor
   (tools/ds-editor). Each defaults to a GLOBAL token via var(), so out of the
   box a component still follows the global scale, overriding one here changes
   ONLY that component, not the whole system.

   Loaded right after tokens.css (src/index.js), same surface scopes, so the
   values resolve wherever the components render. The component CSS modules read
   these with the original value as a var() fallback, so a missing/av value can
   never break a component.
   ========================================================================== */
.uc-scope,
.uc-content,
.uc-chrome,
.uc-portal {
  /* ---- Button --------------------------------------------------------- */
  --uc-btn-radius: var(--uc-radius-md);
  --uc-btn-weight: var(--uc-weight-medium);
  --uc-btn-h:      var(--uc-control-h-md);
  --uc-btn-px:     var(--uc-space-16);

  /* ---- Input ---------------------------------------------------------- */
  --uc-input-radius: var(--uc-radius-md);
  --uc-input-h:      var(--uc-control-h-md);
  --uc-input-px:     var(--uc-space-12);

  /* ---- Card ----------------------------------------------------------- */
  --uc-card-radius: var(--uc-radius-lg);
  --uc-card-pad:    var(--uc-space-20);

  /* ---- Tabs (pill variant) -------------------------------------------- */
  --uc-tab-track-bg:     #F2F2F2;   /* lighter track (was --uc-surface-sunken #EBEBEB) */
  --uc-tab-track-stroke: none;      /* no hairline stroke around the track */
  --uc-tab-track-radius: var(--uc-radius-md);
  --uc-tab-track-pad:    3px;
  --uc-tab-radius:       var(--uc-radius-sm);
  --uc-tab-h:            26px;
  --uc-tab-px:           var(--uc-space-12);
}

/* FloatingToolbar shares the global palette in either theme. */
.uc-scope,
.uc-content,
.uc-chrome,
.uc-portal,
.uc-pop-dark {
  --uc-toolbar-bg: var(--uc-surface-raised);
  --uc-toolbar-hover-bg: var(--uc-surface-overlay);
  --uc-toolbar-fg: var(--uc-text);
  --uc-toolbar-border: var(--uc-border);
  --uc-toolbar-height: 48px;
  --uc-toolbar-action-size: 34px;
  --uc-toolbar-dismiss-size: 44px;
  --uc-toolbar-radius: var(--uc-radius-lg);
  --uc-toolbar-action-radius: var(--uc-btn-radius);
  --uc-toolbar-compact-height: var(--uc-space-40);
  --uc-toolbar-compact-action-size: var(--uc-control-h-md);
  --uc-toolbar-compact-radius: var(--uc-toolbar-radius);
  --uc-toolbar-shadow: var(--uc-shadow-4);
}

.uc-pop-dark {

  /* Pill tabs inside a dark pop-up (e.g. the model picker's CLI | WP Connectors
     strip). `.uc-portal` above pins the track to the light #F2F2F2, which
     beats anything inherited from a dark panel, so re-point it to the dark
     sunken well + hairline here. */
  --uc-tab-track-bg:     var(--uc-surface-sunken);
  --uc-tab-track-stroke: inset 0 0 0 1px var(--uc-border-subtle);
}

/* Button, raised, physically-lit control on uc- tokens. */

.oDgO9tRe_mBUNaW0e6V8 {
  --_h: var(--uc-btn-h, var(--uc-control-h-md));
  --_px: var(--uc-btn-px, var(--uc-space-16));
  --_fs: var(--uc-text-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uc-space-8);
  height: var(--_h);
  padding: 0 var(--_px);
  font-family: var(--uc-font-sans);
  --uich-ff: var(--uc-font-sans);
  font-size: var(--_fs);
  font-weight: var(--uc-btn-weight, var(--uc-weight-medium));
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  border-radius: var(--uc-btn-radius, var(--uc-radius-md));
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  isolation: isolate;
  transition: background var(--uc-dur-fast) var(--uc-ease-standard),
    box-shadow var(--uc-dur-fast) var(--uc-ease-standard),
    transform var(--uc-dur-fast) var(--uc-ease-standard),
    color var(--uc-dur-fast) var(--uc-ease-standard);
}
.oDgO9tRe_mBUNaW0e6V8:focus:not(:focus-visible) { outline: none; }
.oDgO9tRe_mBUNaW0e6V8:focus-visible {
  outline: 2px solid var(--uc-ring);
  outline-offset: -2px;
}
.oDgO9tRe_mBUNaW0e6V8:active:not(:disabled) {
  transform: translateY(0.5px);
}
.oDgO9tRe_mBUNaW0e6V8:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- Sizes ---------------------------------------------------------------- */
.qLkzuQUQ_X4w0fceh2CB { --_h: var(--uc-control-h-sm); --_px: var(--uc-space-12); --_fs: var(--uc-text-sm); }
.NAPRKbEZKONQ8AdACBzs { --_h: var(--uc-btn-h, var(--uc-control-h-md)); --_px: var(--uc-btn-px, var(--uc-space-16)); --_fs: var(--uc-text-base); }
.qeRuCFz3SPTfPQEz8Eur { --_h: var(--uc-control-h-lg); --_px: var(--uc-space-20); --_fs: var(--uc-text-md); }

.GW0xiH4qJYyLFExAe7Cc { padding: 0; width: var(--_h); flex-shrink: 0; }
.GW0xiH4qJYyLFExAe7Cc > svg { display: block; flex-shrink: 0; }

/* ---- Variant: solid ------------------------------------------------------- */
.nx448XS4JGEoBYKJ_Xeh {
  color: var(--uc-brand-on);
  background: var(--_fill, var(--uc-brand));
  background-image: var(--uc-sheen);
  box-shadow: var(--_shadow, var(--uc-shadow-control-brand));
}
/* Keep the fill in every interactive state. The composer's host-theme reset
   (composer-isolation.css, (0,2,0) `background: none` on :hover/:focus/:active)
   outranks the lone `.solid` class, so a hovered or focused solid brand/danger
   button lost its fill and showed as an empty square. Same (0,2,0), later
   source order, so this wins. */
.nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :focus-visible, :active) { background-color: var(--_fill, var(--uc-brand)); }
.nx448XS4JGEoBYKJ_Xeh:hover:not(:disabled) { background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), var(--uc-sheen); }
.nx448XS4JGEoBYKJ_Xeh:active:not(:disabled) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), var(--uc-sheen);
  box-shadow: var(--uc-shadow-control-pressed);
}

/* neutral solid = the B&W PRIMARY: high-contrast inverse fill that flips per
   surface (dark on light content, light on dark chrome/content). */
.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4 {
  color: var(--uc-inverse-fg);
  background: var(--uc-inverse-bg);
  box-shadow: var(--uc-shadow-control);
}
/* grey wash nudges black->lighter and white->darker, so hover reads on both */
.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:hover:not(:disabled) {
  background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.16), rgba(128, 128, 128, 0.16));
}
.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:active:not(:disabled) {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14));
}

/* ---- Variant: soft -------------------------------------------------------- */
.lSxxR32yQ7uBGKoReA0d {
  color: var(--_fg, var(--uc-brand-fg));
  background: var(--_soft, var(--uc-brand-soft));
  background-image: var(--uc-sheen);
  box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)), var(--_soft-shadow, var(--uc-shadow-1));
}
.lSxxR32yQ7uBGKoReA0d:hover:not(:disabled) { background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); }

/* ---- Variant: outline (raised secondary) ---------------------------------- */
.uEkFBKngy5ABC8BavrlF {
  color: var(--_fg, var(--uc-brand-fg));
  background: var(--uc-surface-control);
  background-image: var(--uc-sheen);
  box-shadow: inset 0 0 0 1px var(--_border, var(--uc-border-subtle)), var(--uc-shadow-raised);
}
.uEkFBKngy5ABC8BavrlF.P6iUGKQ9CuUmhTY4IDx4 { color: var(--uc-text-strong); }
.uEkFBKngy5ABC8BavrlF:hover:not(:disabled) { background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); }

/* ---- Variant: ghost ------------------------------------------------------- */
.ZShdqkg6btw_9kcxTgYx {
  color: var(--_fg, var(--uc-brand-fg));
  background: transparent;
}
.ZShdqkg6btw_9kcxTgYx.P6iUGKQ9CuUmhTY4IDx4 { color: var(--uc-text); }
/* The pointer target stays full size; only the wash is inset. This avoids a
   tall grey tile swallowing small chevrons and adjacent split controls. */
.ZShdqkg6btw_9kcxTgYx::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: max(2px, calc(var(--uc-btn-radius, var(--uc-radius-md)) - 2px));
  background: var(--_glow, var(--uc-brand-glow-hover));
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--uc-dur-fast) var(--uc-ease-standard);
}
.ZShdqkg6btw_9kcxTgYx:hover:not(:disabled) { background: transparent; color: var(--uc-text-strong); }
.ZShdqkg6btw_9kcxTgYx:is(:hover, [data-state="open"]):not(:disabled)::before { opacity: 1; }

/* ---- Hold the fill through hover / focus / press ---------------------------
   The dashboard's theme-isolation reset (composer-isolation.css) clears
   `background` on every link and button under the pointer or focus at (0,2,0),
   which outranks the single-class variant rules above. A Button rendered as a link
   (asChild, e.g. "Upgrade to Pro") then went transparent on hover: white text on
   white. These restate each variant's fill at (0,3,0)+ for those states. */
.nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--_fill, var(--uc-brand)); }
.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--uc-inverse-bg); }
.lSxxR32yQ7uBGKoReA0d:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--_soft, var(--uc-brand-soft)); }
.uEkFBKngy5ABC8BavrlF:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--uc-surface-control); }
/* The same for a disabled button: its fill stays, dimmed by .button:disabled.
   Without these the reset left a disabled solid button (the chat's Send with
   nothing typed) transparent on hover, its white icon on the white panel. */
.nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--_fill, var(--uc-brand)); }
.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--uc-inverse-bg); }
.lSxxR32yQ7uBGKoReA0d:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--_soft, var(--uc-brand-soft)); }
.uEkFBKngy5ABC8BavrlF:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--uc-surface-control); }

/* ---- Tones (feed the --_* channels the variants read) --------------------- */
.BDHV_0n6wKsmpw3p3s1i   { --_fill: var(--uc-brand);   --_fg: var(--uc-brand-fg);   --_soft: var(--uc-brand-soft);   --_border: var(--uc-brand-border);   --_glow: var(--uc-brand-glow-hover);   --_shadow: var(--uc-shadow-control-brand); }
.keLGBcvAq5oELzJZ2XbZ { --_fill: var(--uc-success); --_fg: var(--uc-success-fg); --_soft: var(--uc-success-soft); --_border: var(--uc-success-border); --_glow: var(--uc-success-glow-hover); --_shadow: var(--uc-shadow-control-brand); }
.qM62Gv6j4BSYSajMwnqk  { --_fill: var(--uc-danger);  --_fg: var(--uc-danger-fg);  --_soft: var(--uc-danger-soft);  --_border: var(--uc-danger-border);  --_glow: var(--uc-danger-glow-hover);  --_shadow: var(--uc-shadow-control-brand); }
.P6iUGKQ9CuUmhTY4IDx4 {
  --_fg: var(--uc-text-strong);
  --_soft: var(--uc-button-soft-neutral-bg, var(--uc-surface-sunken));
  --_soft-shadow: var(--uc-button-soft-neutral-shadow, var(--uc-shadow-1));
  --_border: var(--uc-border-strong);
  --_glow: rgba(128, 128, 128, 0.10);
}

/* ---- As a link (asChild <a>) --------------------------------------------- *
   wp-admin styles `a:hover, a:active` (blue text) and `a:focus` (blue text + a
   2px blue box-shadow) at 0,1,1, which out-ranks the variant colours and
   shadows above (0,1,0). Re-assert them for anchors so a link button looks
   exactly like the button it is in every state. */
a.nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :active, :visited) { color: var(--uc-brand-on); }
a.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :active, :visited) { color: var(--uc-inverse-fg); }
a.lSxxR32yQ7uBGKoReA0d:is(:hover, :focus, :active, :visited),
a.uEkFBKngy5ABC8BavrlF:is(:hover, :focus, :active, :visited) { color: var(--_fg, var(--uc-brand-fg)); }
a.uEkFBKngy5ABC8BavrlF.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :active, :visited) { color: var(--uc-text-strong); }
a.ZShdqkg6btw_9kcxTgYx:is(:focus, :active, :visited) { color: var(--_fg, var(--uc-brand-fg)); }
a.ZShdqkg6btw_9kcxTgYx.P6iUGKQ9CuUmhTY4IDx4:is(:focus, :active, :visited) { color: var(--uc-text); }
a.nx448XS4JGEoBYKJ_Xeh:focus { box-shadow: var(--_shadow, var(--uc-shadow-control-brand)); }
a.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:focus { box-shadow: var(--uc-shadow-control); }
a.lSxxR32yQ7uBGKoReA0d:focus { box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)), var(--_soft-shadow, var(--uc-shadow-1)); }
a.uEkFBKngy5ABC8BavrlF:focus { box-shadow: inset 0 0 0 1px var(--_border, var(--uc-border-subtle)), var(--uc-shadow-raised); }
a.ZShdqkg6btw_9kcxTgYx:focus { box-shadow: none; }

/* ---- Loading -------------------------------------------------------------- */
.pc70O1Y6HdzT607YK_OL { color: transparent !important; pointer-events: none; }
.rtWcge6eoBiDmFoHo4gD {
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--uc-brand-on);
  animation: qUXtsmRZhV0_Rb8A9qFD 0.6s linear infinite;
}
.lSxxR32yQ7uBGKoReA0d .rtWcge6eoBiDmFoHo4gD, .uEkFBKngy5ABC8BavrlF .rtWcge6eoBiDmFoHo4gD, .ZShdqkg6btw_9kcxTgYx .rtWcge6eoBiDmFoHo4gD { color: var(--uc-text); }
.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4 .rtWcge6eoBiDmFoHo4gD { color: var(--uc-inverse-fg); }
@keyframes qUXtsmRZhV0_Rb8A9qFD { to { transform: rotate(-360deg); } }

/* ---- Surface: dark -------------------------------------------------------- *
   `surface="dark"`, remaps the semantic tokens the variants read to the fixed
   dark-chrome values (mirrors `.uc-chrome` in tokens.css). Lets a single Button
   render correctly on the app's dark header / sidebar / rails WITHOUT needing a
   `.uc-chrome` ancestor (the app chrome is styled with UiChemy's own app tokens, not the
   DS scope). Orthogonal to variant + tone: every variant flips automatically,
   solid-neutral becomes a white B&W primary, outline/ghost go light-on-dark,
   brand stays orange. */
.VnThCro2n02iRphzomVo {
  --uc-surface-sunken:  #101010;
  --uc-surface-control: rgba(255, 255, 255, 0.05);
  --uc-button-soft-neutral-bg: var(--uc-surface-control);
  --uc-button-soft-neutral-shadow: var(--uc-shadow-raised);

  --uc-text-strong: #FFFFFF;
  --uc-text:        #A3A3A3;

  /* B&W primary flips to a light fill with dark ink on dark chrome */
  --uc-inverse-bg: #F5F5F5;
  --uc-inverse-fg: #171717;

  --uc-border-subtle: #333333;
  --uc-border:        #404040;
  --uc-border-strong: #525252;
  --uc-brand-border:  var(--uc-border);
  --uc-ring:          #A3A3A3;

  /* per-family fg/soft readable on dark */
  --uc-brand-fg:   #EDEDED;  --uc-brand-soft:   rgba(255, 255, 255, 0.12);
  --uc-success-fg: #A7EAAA;  --uc-success-soft: rgba(46, 163, 67, 0.20);
  --uc-danger-fg:  #FDC9C6;  --uc-danger-soft:  rgba(246, 82, 88, 0.20);
}

/* The always-dark chip: the floating canvas toolbar's standalone button as a
   reusable control. Reads the SAME --uc-toolbar tokens (with the same literal
   fallbacks), so the two stay identical; the component adds `uc-pop-dark`
   alongside this class, which is what scopes those tokens to dark values on
   any page theme. */
.cOkswkXgGqdwukDtzxre {
  background: var(--uc-toolbar-bg, var(--uc-surface-raised, #242424));
  color: var(--uc-toolbar-fg, var(--uc-text, #F5F5F5));
  box-shadow: inset 0 0 0 1px var(--uc-toolbar-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--uc-toolbar-radius, var(--uc-radius-lg, 12px));
}
.cOkswkXgGqdwukDtzxre:hover:not(:disabled) {
  background: var(--uc-toolbar-hover-bg, var(--uc-surface-overlay, #2E2E2E));
  color: var(--uc-toolbar-fg, var(--uc-text-strong, #FFFFFF));
}
.cOkswkXgGqdwukDtzxre:focus-visible {
  outline: 2px solid var(--uc-ring, rgba(245, 245, 245, 0.55));
  outline-offset: -2px;
}

/* The standalone dark chip already owns its hover fill. */
.cOkswkXgGqdwukDtzxre::before { content: none; }

/* Tabs, Radix behavior, uc- token look. Two variants: pill and underline.
   The active marker is a single sliding indicator that animates between tabs. */
.yUbZ9JN8Q6q_cxttzVQf { display: flex; flex-direction: column; gap: var(--uc-space-16); min-width: 0; max-width: 100%; } /* can shrink so its list scrolls */

/* ---- pill (segmented) ----------------------------------------------------- */
.c5fOPZJlD5q2gHovvEQh {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--uc-tab-track-pad, 3px);
  background: var(--uc-tab-track-bg, var(--uc-surface-sunken));
  border-radius: var(--uc-tab-track-radius, var(--uc-radius-md));
  box-shadow: var(--uc-tab-track-stroke, inset 0 0 0 1px var(--uc-border-subtle));
  width: -moz-max-content;
  width: max-content;
}

/* ---- sideways overflow (both variants) -------------------------------------
   Too many / too wide tabs for the space: the list scrolls sideways (wheel,
   trackpad, or the picked tab scrolling itself into view — Tabs.tsx) with NO
   visible scrollbar, and labels are never squashed or clipped. The edge fade
   widths are set from script only while there is more to scroll that way. */
.c5fOPZJlD5q2gHovvEQh,
.yhi1vngR1p2YuJVNnaDE {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--uc-tabs-fade-l, 0px), #000 calc(100% - var(--uc-tabs-fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--uc-tabs-fade-l, 0px), #000 calc(100% - var(--uc-tabs-fade-r, 0px)), transparent 100%);
}
.c5fOPZJlD5q2gHovvEQh::-webkit-scrollbar,
.yhi1vngR1p2YuJVNnaDE::-webkit-scrollbar { display: none; }
/* A tab never shrinks below its own label (callers that stretch tabs with
   flex:1 / min-width:0 still share the width when it fits). */
.c5fOPZJlD5q2gHovvEQh > [role="tab"],
.yhi1vngR1p2YuJVNnaDE > [role="tab"] { min-width: -moz-max-content !important; min-width: max-content !important; }
.IiPxNJwR_you4cvPsbWF {
  position: absolute;
  top: var(--uc-tab-track-pad, 3px);
  bottom: var(--uc-tab-track-pad, 3px);
  right: 0;
  width: 0;
  opacity: 0;
  border-radius: var(--uc-tab-radius, var(--uc-radius-sm));
  background: var(--uc-surface-raised);
  background-image: var(--uc-sheen);
  box-shadow: var(--uc-shadow-control);
  transition: transform var(--uc-dur-base) var(--uc-ease-emphasized),
    width var(--uc-dur-base) var(--uc-ease-emphasized);
  z-index: 0;
  pointer-events: none;
}
.NcCLOdesrW3h0feW8Cqd {
  all: unset;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  height: var(--uc-tab-h, 26px);
  padding: 0 var(--uc-tab-px, var(--uc-space-12));
  display: inline-flex;
  align-items: center;
  /* Centred, so a trigger stretched to share a full-width bar (flex: 1) keeps
     its label in the middle instead of against its left edge. No effect on a
     trigger sized to its content. */
  justify-content: center;
  gap: var(--uc-space-8);
  font-size: var(--uc-text-base);
  font-weight: var(--uc-weight-medium);
  /* One line always: a two-word label in a shared-width bar ("WP Connectors")
     wrapped and spilled out of the fixed-height trigger. */
  white-space: nowrap;
  color: var(--uc-text-muted);
  border-radius: var(--uc-tab-radius, var(--uc-radius-sm));
  cursor: pointer;
  transition: color var(--uc-dur-fast) var(--uc-ease-standard);
}
.NcCLOdesrW3h0feW8Cqd:hover { color: var(--uc-text-strong); }
.NcCLOdesrW3h0feW8Cqd[data-state="active"] { color: var(--uc-text-strong); }
.NcCLOdesrW3h0feW8Cqd:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: -2px; }
.NcCLOdesrW3h0feW8Cqd:disabled { opacity: 0.5; cursor: not-allowed; }
.sa8wAhUubaDeDz9m2lSy { height: 22px; padding: 0 var(--uc-space-8); font-size: var(--uc-text-sm); }
.AXCzoGHV2zjSW04iuiPm { height: 32px; padding: 0 var(--uc-space-16); font-size: var(--uc-text-md); }
/* icon-only pill trigger, square (width tracks the size's height via
   aspect-ratio), no side padding, glyph centered. Pairs with `iconOnly` on
   TabsTrigger for segmented icon toggles (e.g. a light/dark switch). */
.e3ubPG9y4BJzwsrdHlEA { padding: 0; gap: 0; aspect-ratio: 1; justify-content: center; }

/* `solidActiveIcon` on TabsList: the active glyph goes heavier. It targets the
   shapes, not the <svg>, because Hugeicons writes stroke-width as an attribute
   on every path, and that attribute beats a value inherited from the svg (any
   CSS rule on the path itself still wins over it). */
.yEf7HfGTA0UzmBrIB_77 svg :is(path, line, polyline, circle, ellipse, rect, polygon) {
  transition: stroke-width var(--uc-dur-base) var(--uc-ease-standard);
}
.yEf7HfGTA0UzmBrIB_77 [data-state="active"] svg :is(path, line, polyline, circle, ellipse, rect, polygon) {
  stroke-width: 2.25;
}

/* ---- underline ------------------------------------------------------------ */
.yhi1vngR1p2YuJVNnaDE {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-20);
  /* drawn inside the box (was border-bottom) so the scrolling list doesn't clip
     the active underline sitting on it */
  box-shadow: inset 0 -1px 0 var(--uc-border);
}
.nAh0Gfr2zYUey0XGqts9 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  opacity: 0;
  border-radius: 2px;
  background: var(--uc-text-strong); /* neutral underline, tab indicators aren't CTAs */
  transition: transform var(--uc-dur-base) var(--uc-ease-emphasized),
    width var(--uc-dur-base) var(--uc-ease-emphasized);
  pointer-events: none;
}
.cC9aL4ulO5rxAtpAr4A0 {
  all: unset;
  box-sizing: border-box;
  height: 34px;
  display: inline-flex;
  align-items: center;
  /* Centred, so a trigger stretched to share a full-width bar (flex: 1) keeps
     its label in the middle instead of against its left edge. No effect on a
     trigger sized to its content. */
  justify-content: center;
  gap: var(--uc-space-8);
  font-size: var(--uc-text-base);
  font-weight: var(--uc-weight-medium);
  color: var(--uc-text-muted);
  cursor: pointer;
  transition: color var(--uc-dur-fast) var(--uc-ease-standard);
}
.cC9aL4ulO5rxAtpAr4A0:hover { color: var(--uc-text-strong); }
.cC9aL4ulO5rxAtpAr4A0[data-state="active"] { color: var(--uc-brand-fg); }
.cC9aL4ulO5rxAtpAr4A0:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: -2px; }
.cC9aL4ulO5rxAtpAr4A0:disabled { opacity: 0.5; cursor: not-allowed; }
.rkiDdr7DnTZzxeE4XWn2 { height: 30px; font-size: var(--uc-text-sm); }
.PlObOj8t3yHaJNy9nwoe { height: 40px; font-size: var(--uc-text-md); }

.DR_2eHes4dZNHfA9fRnL:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: -2px; }

/* ── Preflight-proofing: PADDING ONLY ────────────────────────────────────────
   Tailwind's stock preflight ships inside the app's Tailwind root:

     .uich-tw button, .uich-tw input, ... { ... margin: 0; padding: 0; }

   That is (0,1,1); a CSS-module class is (0,1,0), so preflight strips the side
   padding off every trigger. The control keeps its height (preflight does not
   set height) and the labels end up touching — a half-styled strip.

   Re-stating ONLY padding at (0,2,0) is enough to beat it.

   Deliberately NOT doubling the whole rule: the base rules start with
   `all: unset`, and callers style these triggers with utility classes of their
   own (the Code tab's scopes use `flex-1 min-w-0 justify-center text-xs
   font-semibold`, all (0,1,0)). Lifting `all: unset` above those made it reset
   their `flex`, so four equal columns collapsed to content width and ran
   together. Specificity here has to be raised one property at a time, never
   across a rule that resets everything.
   ------------------------------------------------------------------------- */
.NcCLOdesrW3h0feW8Cqd.NcCLOdesrW3h0feW8Cqd { padding: 0 var(--uc-tab-px, var(--uc-space-12)); }
.sa8wAhUubaDeDz9m2lSy.sa8wAhUubaDeDz9m2lSy { padding: 0 var(--uc-space-8); }
.AXCzoGHV2zjSW04iuiPm.AXCzoGHV2zjSW04iuiPm { padding: 0 var(--uc-space-16); }
.e3ubPG9y4BJzwsrdHlEA.e3ubPG9y4BJzwsrdHlEA { padding: 0; }


/* System-colour focus remains visible when shadows and fills are suppressed. */
@media (forced-colors: active) {
  .NcCLOdesrW3h0feW8Cqd:focus-visible,
  .cC9aL4ulO5rxAtpAr4A0:focus-visible,
  .DR_2eHes4dZNHfA9fRnL:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Input, recessed field on uc- tokens.

   wp-admin hardening: WordPress's forms.css styles `input[type="text"]` (and
   every other type) at specificity (0,1,1) — border, 2px radius, 40px
   min-height, 0 8px padding and a blue :focus box-shadow — which beats a lone
   `.input` (0,1,0) whenever the field has a type attribute (the Combobox search,
   number/date fields…). Every field rule below therefore carries `[class]`
   (always true on these elements): +(0,1,0) on each one, so their order among
   themselves is unchanged but they now outrank wp-admin. margin, min-height and
   line-height are reset because wp-admin sets them and the DS did not. */
.gf6IRPe9LovRo8vS3IAl {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.jvLYLaG45SNM0t7oug2a[class] {
  width: 100%;
  height: var(--uc-input-h, var(--uc-control-h-md));
  padding: 0 var(--uc-input-px, var(--uc-space-12));
  font-family: var(--uc-font-sans);
  --uich-ff: var(--uc-font-sans);
  font-size: var(--uc-text-base);
  font-weight: var(--uc-weight-regular);
  color: var(--uc-text-strong);
  background: var(--uc-surface-overlay);
  background-image: linear-gradient(to bottom, oklch(0% 0 0 / 0.02), transparent);
  margin: 0;
  min-height: 0;
  line-height: normal;
  border: none;
  border-radius: var(--uc-input-radius, var(--uc-radius-md));
  box-shadow: inset 0 0 0 1px var(--uc-border-strong), var(--uc-shadow-input);
  transition: box-shadow var(--uc-dur-fast) var(--uc-ease-standard);
  outline: none;
}
.jvLYLaG45SNM0t7oug2a[class]::-moz-placeholder { color: var(--uc-text-subtle); }
.jvLYLaG45SNM0t7oug2a[class]::placeholder { color: var(--uc-text-subtle); }
.jvLYLaG45SNM0t7oug2a[class]:hover:not(:disabled):not(:focus) { box-shadow: inset 0 0 0 1px var(--uc-border-hover, var(--uc-text-subtle)), var(--uc-shadow-input); }
/* A single stronger edge marks the caret, without a second brand halo.
   :focus-visible retains a compact, neutral indicator for keyboard editing. */
.jvLYLaG45SNM0t7oug2a[class]:focus {
  box-shadow: inset 0 0 0 1px var(--uc-ring), var(--uc-shadow-input);
  outline: none;
}
.jvLYLaG45SNM0t7oug2a[class]:focus-visible {
  outline: 2px solid var(--uc-ring);
  outline-offset: -2px;
}
.jvLYLaG45SNM0t7oug2a[class]:disabled {
  color: var(--uc-text-subtle);
  background: var(--uc-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--uc-border);
  cursor: not-allowed;
}

.haw52Sf_U1aNw5UG26i6[class] { height: var(--uc-control-h-sm); font-size: var(--uc-text-sm); padding: 0 var(--uc-space-8); }
.l_6Te8jk6g9i2OYGVJQK[class] { height: var(--uc-control-h-lg); font-size: var(--uc-text-md); padding: 0 var(--uc-space-16); }

.ssewu8L6FxnF8mjD_c_D[class] {
  box-shadow: inset 0 0 0 1px var(--uc-danger), var(--uc-shadow-input);
}
.ssewu8L6FxnF8mjD_c_D[class]:focus {
  box-shadow: inset 0 0 0 1px var(--uc-danger), var(--uc-shadow-input);
  outline: 2px solid var(--uc-danger);
  outline-offset: -2px;
}

/* icon adornments */
.fGN3tsXkL0HfDxLoHJ3b[class] { padding-right: var(--uc-space-32); }
.F7_NHLpEO7zGCxeHmEbl[class] { padding-left: var(--uc-space-32); }
.NPtEFuYEvwKDd0CQ2ZL4 {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--uc-text-subtle);
  pointer-events: none;
}
.Bcg2bwvX_INxmvsS4KTp { right: var(--uc-space-12); }
.oFadrtuqYdL1WAYq7mGM { left: var(--uc-space-12); }

/* ── Addons (BoardUI Input adornments) ────────────────────────────────────
   The shell is the field: same fill, inset ring, radius and heights as .input,
   with keyboard focus on the shell only while its bare input is focused. The inner input (.bare) is transparent.
   [class] keeps these above wp-admin's input[type=…] rules, as above. */
.D0Xdmp8POlPPHSzhzm9g[class] {
  display: flex;
  align-items: center;
  gap: var(--uc-space-8);
  width: 100%;
  height: var(--uc-input-h, var(--uc-control-h-md));
  padding: 0 var(--uc-input-px, var(--uc-space-12));
  font-family: var(--uc-font-sans);
  --uich-ff: var(--uc-font-sans);
  font-size: var(--uc-text-base);
  color: var(--uc-text-strong);
  background: var(--uc-surface-overlay);
  background-image: linear-gradient(to bottom, oklch(0% 0 0 / 0.02), transparent);
  border-radius: var(--uc-input-radius, var(--uc-radius-md));
  box-shadow: inset 0 0 0 1px var(--uc-border-strong), var(--uc-shadow-input);
  transition: box-shadow var(--uc-dur-fast) var(--uc-ease-standard);
  cursor: text;
}
.D0Xdmp8POlPPHSzhzm9g[class]:hover:not(:focus-within) { box-shadow: inset 0 0 0 1px var(--uc-border-hover, var(--uc-text-subtle)), var(--uc-shadow-input); }
.D0Xdmp8POlPPHSzhzm9g[class]:has(> .rqDSPev3xkBlb20ToTZX:focus-visible) { outline: 2px solid var(--uc-ring); outline-offset: -2px; }
.Xg64tHf4Kp4Noa25JH0b[class] { height: var(--uc-control-h-sm); font-size: var(--uc-text-sm); padding: 0 var(--uc-space-8); gap: var(--uc-space-6); }
.M5O1Ldpq66ff3nhO1rMQ[class] { height: var(--uc-control-h-lg); font-size: var(--uc-text-md); padding: 0 var(--uc-space-16); }
.ekm8tp1ZbcU5q1z1wOWS[class] { box-shadow: inset 0 0 0 1px var(--uc-danger), var(--uc-shadow-input); }
.ekm8tp1ZbcU5q1z1wOWS[class]:has(> .rqDSPev3xkBlb20ToTZX:focus-visible) { outline-color: var(--uc-danger); }
.sXdm39Z0ZiRwORSaPpZv[class] { color: var(--uc-text-subtle); background: var(--uc-surface-sunken); box-shadow: inset 0 0 0 1px var(--uc-border); cursor: not-allowed; }

.rqDSPev3xkBlb20ToTZX[class] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font: inherit;
  --uich-ff: inherit;
  font-weight: var(--uc-weight-regular);
  line-height: normal;
  color: inherit;
}
.rqDSPev3xkBlb20ToTZX[class]:focus { box-shadow: none; outline: none; }
.rqDSPev3xkBlb20ToTZX[class]::-moz-placeholder { color: var(--uc-text-subtle); }
.rqDSPev3xkBlb20ToTZX[class]::placeholder { color: var(--uc-text-subtle); }
.rqDSPev3xkBlb20ToTZX[class]:disabled { cursor: not-allowed; background: transparent; }

.Y3HnmS9EPQ7CMwpRJcPQ { flex: none; display: inline-flex; align-items: center; min-width: 0; }
.JY5ljlGXeMh2RPyRM1X1 { color: var(--uc-text-muted); white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.Q7QN4UqutcmDnCCw7QMY { flex: none; display: grid; place-items: center; color: var(--uc-text-subtle); }

/* field wrapper (label + hint) */
.XrLNCTYM8KNOcisy0k1u { display: flex; flex-direction: column; gap: var(--uc-space-8); width: 100%; }
._nx7MrQDNMenHelkZy99 { font-size: var(--uc-text-sm); font-weight: var(--uc-weight-medium); color: var(--uc-text-strong); }
.tmMcxsM0Zke7mcbuxgiI { font-size: var(--uc-text-xs); color: var(--uc-text-muted); }
.C1A65qwuRNgkck1QS09Q { color: var(--uc-danger-fg); }


@media (forced-colors: active) {
  .jvLYLaG45SNM0t7oug2a[class]:focus-visible,
  .ssewu8L6FxnF8mjD_c_D[class]:focus,
  .D0Xdmp8POlPPHSzhzm9g[class]:has(> .rqDSPev3xkBlb20ToTZX:focus-visible),
  .ekm8tp1ZbcU5q1z1wOWS[class]:has(> .rqDSPev3xkBlb20ToTZX:focus-visible) { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Menu, Radix dropdown-menu behavior, uc- token look. Always-dark popover
   with a sliding highlight that follows the active item. */
.s3BFP6K6LYzVFAhoSOjx {
  position: relative;
  min-width: 200px;
  background: var(--uc-surface-overlay);
  border-radius: var(--uc-radius-md);
  /* Border + shadow so the popover reads as its own floating layer and never
     blends into a same-tone (dark) panel behind it. */
  border: 1px solid var(--uc-border);
  box-shadow: var(--uc-shadow-4);
  padding: var(--uc-space-4);
  z-index: var(--uc-z-dropdown);
  animation: kqSucFY5pNg8mWWYTGqA var(--uc-dur-enter) var(--uc-ease-emphasized);
}
.SwLQKRnMsenTHHPtphsk {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: var(--uc-radius-sm);
  /* The HOVER wash, not a control fill — see --uc-surface-hover in tokens.css. */
  background: var(--uc-surface-hover, var(--uc-surface-control));
  /* transform is animated via the Web Animations API (see useSlidingHighlight);
     only width/height use a CSS transition. */
  transition: width var(--uc-dur-base) var(--uc-ease-emphasized),
    height var(--uc-dur-base) var(--uc-ease-emphasized);
  pointer-events: none;
  z-index: 0;
}
.tPTLiYfuDUhQ80L7yDnk {
  all: unset;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--uc-space-8);
  height: var(--uc-control-h-md);
  padding: 0 var(--uc-space-12);
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-text-base);
  color: var(--uc-text);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bBCXPgA12Rh98ObefXMJ { height: var(--uc-control-h-sm); font-size: var(--uc-text-sm); padding: 0 var(--uc-space-8); }
.UdzaD6XmSAvIuynP2LOO { height: var(--uc-control-h-lg); font-size: var(--uc-text-md); padding: 0 var(--uc-space-16); }
.tPTLiYfuDUhQ80L7yDnk[data-highlighted] { color: var(--uc-text-strong); }
.tPTLiYfuDUhQ80L7yDnk[data-disabled] { color: var(--uc-text-subtle); pointer-events: none; }
.I3TPCu8NiLZDfkHiNUct { color: var(--uc-danger-fg); }
.I3TPCu8NiLZDfkHiNUct[data-highlighted] { color: var(--uc-danger-fg); }
.QBoqQMo13ZJMyLxqxRts { margin-right: auto; font-size: var(--uc-text-xs); color: var(--uc-text-subtle); font-family: var(--uc-font-mono); --uich-ff: var(--uc-font-mono); }
.YEax7LE1yCq7o0eawNUV { padding: var(--uc-space-8) var(--uc-space-12) var(--uc-space-4); font-size: var(--uc-text-xs); font-weight: var(--uc-weight-medium); letter-spacing: var(--uc-tracking-wide); text-transform: uppercase; color: var(--uc-text-subtle); }
.bcfw649Ew7czzqqkT_G8 { height: 1px; background: var(--uc-border-subtle); margin: var(--uc-space-4) 0; }

@keyframes kqSucFY5pNg8mWWYTGqA { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Select, Radix behavior, uc- token look. */
.e7F3s8Cpe8pIMhvl2kjH {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uc-space-8);
  height: var(--uc-control-h-md);
  min-width: 180px;
  padding: 0 var(--uc-space-12);
  font-size: var(--uc-text-base);
  color: var(--uc-text-strong);
  background: var(--uc-surface-control);
  background-image: var(--uc-sheen);
  border-radius: var(--uc-radius-md);
  box-shadow: inset 0 0 0 1px var(--uc-border-subtle), var(--uc-shadow-raised);
  cursor: pointer;
  transition: box-shadow var(--uc-dur-fast) var(--uc-ease-standard);
}
.e7F3s8Cpe8pIMhvl2kjH:hover:not(:focus-visible):not([data-state="open"]) { box-shadow: inset 0 0 0 1px var(--uc-border-hover, var(--uc-text-subtle)), var(--uc-shadow-raised); }
/* Open is a pressed state, not keyboard focus. Do not leave a halo around
   a select merely because its list is open. Keyboard focus remains explicit. */
.e7F3s8Cpe8pIMhvl2kjH[data-state="open"] {
  box-shadow: inset 0 0 0 1px var(--uc-border-hover), var(--uc-shadow-raised);
}
.e7F3s8Cpe8pIMhvl2kjH:focus:not(:focus-visible) { outline: none; }
.e7F3s8Cpe8pIMhvl2kjH:focus-visible {
  outline: 2px solid var(--uc-ring);
  outline-offset: -2px;
}
.e7F3s8Cpe8pIMhvl2kjH[data-placeholder] { color: var(--uc-text-subtle); }
.e7F3s8Cpe8pIMhvl2kjH:disabled { opacity: 0.5; cursor: not-allowed; }
/* The chevron is the one DS icon that sits inside a WRAPPER (Radix renders
   SelectPrimitive.Icon as a <span>), so the svg inside it is inline and sits on
   that span's text baseline, which leaves descender space below it and pushes
   the glyph above the trigger's centre. `display: block` collapses that line box. */
.RXwx8sg3STq8XWcaRIiM { color: var(--uc-text-muted); flex: none; }
.RXwx8sg3STq8XWcaRIiM svg { display: block; }

/* trigger sizes (md is the base above) */
.A7XnIZMI5obBSBNATLZT { height: var(--uc-control-h-sm); font-size: var(--uc-text-sm); padding: 0 var(--uc-space-8); }
.O7fvjNbDZA9xW0hUSAKe { height: var(--uc-control-h-lg); font-size: var(--uc-text-md); padding: 0 var(--uc-space-16); }

.BZSeASQ2IO83EAmmFtBD {
  min-width: var(--radix-select-trigger-width);
  background: var(--uc-surface-overlay);
  border-radius: var(--uc-radius-md);
  /* Border + shadow so the list reads as its own floating layer and never
     blends into a same-tone (dark) panel behind it. */
  border: 1px solid var(--uc-border);
  box-shadow: var(--uc-shadow-4);
  padding: var(--uc-space-4);
  z-index: var(--uc-z-dropdown);
  overflow: hidden;
  /* Never taller than the room Radix measured beside the trigger (minus the
     collision padding), so a long list scrolls inside instead of running off
     the screen. The viewport is the flex child Radix scrolls. */
  max-height: var(--radix-select-content-available-height);
  animation: cdjUAFtyJ3yGS3rj5qO1 var(--uc-dur-enter) var(--uc-ease-emphasized);
}
.umOYcecNSay6i1GVC_Oi { position: relative; }
.w4hKpheBcjRW4WbnSQPQ {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: var(--uc-radius-sm);
  /* The HOVER wash, not a control fill — see --uc-surface-hover in tokens.css. */
  background: var(--uc-surface-hover, var(--uc-surface-control));
  /* transform is animated via the Web Animations API (see useSlidingHighlight);
     only width/height use a CSS transition. */
  transition: width var(--uc-dur-base) var(--uc-ease-emphasized),
    height var(--uc-dur-base) var(--uc-ease-emphasized);
  pointer-events: none;
  z-index: 0;
}
._veB6PGMKZWelgCoOwZH {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* min-height, not height: an option with a description line (chat scope
     "Widget / Page") was clipped to one row and overlapped the next. */
  min-height: var(--uc-control-h-md);
  padding: var(--uc-space-4, 4px) var(--uc-space-12) var(--uc-space-4, 4px) var(--uc-space-32);
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-text-base);
  color: var(--uc-text);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  z-index: 1;
}
.lAdBRQUB75_wlMPT7wpF { min-height: var(--uc-control-h-sm); font-size: var(--uc-text-sm); }
.FRL9ZRUfTQvUhgXYhFjn { min-height: var(--uc-control-h-lg); font-size: var(--uc-text-md); }
._veB6PGMKZWelgCoOwZH[data-highlighted] { color: var(--uc-text-strong); }
._veB6PGMKZWelgCoOwZH[data-disabled] { color: var(--uc-text-subtle); pointer-events: none; }
.K4s2DAYWscSzIFHHt98g { position: absolute; left: var(--uc-space-12); display: inline-flex; color: var(--uc-text-strong); }

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

/* Popover, light raised surface, soft elevation. */
.IgtxSpnrWCwpAiEUyVSV {
  min-width: 200px;
  background: var(--uc-surface-raised);
  color: var(--uc-text);
  border: 1px solid var(--uc-border-subtle);
  border-radius: var(--uc-radius-md);
  box-shadow: var(--uc-shadow-4);
  padding: var(--uc-space-16);
  font-size: var(--uc-text-base);
  z-index: var(--uc-z-dropdown);
  animation: IrisfxJ9u8Ano9jbOQyR var(--uc-dur-enter) var(--uc-ease-emphasized);
}
.IgtxSpnrWCwpAiEUyVSV:focus-visible { outline: none; }

@keyframes IrisfxJ9u8Ano9jbOQyR { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Tooltip, Radix behavior, uc- token look. */
.zL8PtLvN_qxmBr9JJpNb {
  background: var(--uc-text-strong);
  color: var(--uc-text-inverse);
  padding: var(--uc-space-5) var(--uc-space-12);
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-text-xs);
  font-weight: var(--uc-weight-medium);
  line-height: var(--uc-leading-tight);
  max-width: 240px;
  box-shadow: var(--uc-shadow-4);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: var(--uc-z-tooltip);
  animation: WoWiPylS53SgKPqicqzK var(--uc-dur-enter) var(--uc-ease-emphasized);
}
.z1QfDdwojgYdst1stf84 { fill: var(--uc-text-strong); }

@keyframes WoWiPylS53SgKPqicqzK {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* ScrollArea, thin token-styled scrollbars that fade in on hover. */
.S6t0k8vIF2BgEmWoruVS { overflow: hidden; }
.Ymb1tUEYhyCulKD4M2Kd { width: 100%; height: 100%; border-radius: inherit; }
.gub_S62WoZUYFrtXAsps {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  padding: 2px;
  background: transparent;
  transition: background var(--uc-dur-fast) var(--uc-ease-standard);
}
.gub_S62WoZUYFrtXAsps:hover { background: var(--uc-surface-sunken); }
.gub_S62WoZUYFrtXAsps[data-orientation="vertical"] { width: 10px; }
.gub_S62WoZUYFrtXAsps[data-orientation="horizontal"] { flex-direction: column; height: 10px; }
.LRlTFNaG2bPn3AnQjljF {
  flex: 1;
  background: var(--uc-border-strong);
  border-radius: var(--uc-radius-pill);
  position: relative;
}
/* enlarge the invisible hit target so the thin thumb is easy to grab */
.LRlTFNaG2bPn3AnQjljF::before {
  content: "";
  position: absolute;
  inset: -4px;
}

/* Separator, subtle hairline in either orientation. */
.R8avrtTyuO0UDSY9TLVT { background: var(--uc-border-subtle); flex: none; }
.R8avrtTyuO0UDSY9TLVT[data-orientation="horizontal"] { height: 1px; width: 100%; }
.R8avrtTyuO0UDSY9TLVT[data-orientation="vertical"] { width: 1px; height: 100%; align-self: stretch; }

/* Compact grouping adapted from Hirael; global radii, MIT notice in FloatingToolbar.tsx. */
.VDCgP2TXcbIH83qTz1iU {
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-8, 8px);
  font-family: var(--uc-font-sans, system-ui, sans-serif);
  --uich-ff: var(--uc-font-sans, system-ui, sans-serif);
  font-size: var(--uc-text-base, 14px);
  color-scheme: inherit;
  color: var(--uc-toolbar-fg, var(--uc-text, CanvasText));
  pointer-events: none;
}

/* uc-content supplies light tokens, not an extra rectangular wrapper surface. */
.VDCgP2TXcbIH83qTz1iU.VDCgP2TXcbIH83qTz1iU { background: transparent; }

.VDCgP2TXcbIH83qTz1iU[data-theme="dark"] { color-scheme: dark; }
.VDCgP2TXcbIH83qTz1iU[data-theme="light"] { color-scheme: light; }

/* Rebind to the current surface, not a computed dark toolbar token inherited
   from an ancestor. Light uses the DS content scope; inherit adds no scope. */
.VDCgP2TXcbIH83qTz1iU:not([data-theme="dark"]) {
  --uc-toolbar-bg: var(--uc-surface-raised, Canvas);
  --uc-toolbar-fg: var(--uc-text, CanvasText);
  --uc-toolbar-border: var(--uc-border, ButtonBorder);
  --uc-toolbar-hover-bg: var(--uc-surface-hover, ButtonFace);
}

.VDCgP2TXcbIH83qTz1iU.IdW9qftPRIpxufX1u1zB {
  --uc-toolbar-height: var(--uc-toolbar-compact-height, var(--uc-control-h-lg, 40px));
  --uc-toolbar-action-size: var(--uc-toolbar-compact-action-size, var(--uc-control-h-md, 32px));
  --uc-toolbar-dismiss-size: var(--uc-toolbar-compact-action-size, var(--uc-control-h-md, 32px));
  /* Compact changes density only. Surface/action radii stay global. */
}

.wcjtBjSJwTWRpPftzjvQ,
.Dki1FM4eHY9MKK_GAGym,
.j4Axbcky5LgpsKgn4WAb {
  background: var(--uc-toolbar-bg, var(--uc-surface-raised, Canvas));
  border: 1px solid var(--uc-toolbar-border, var(--uc-border, ButtonBorder));
  box-shadow: var(--uc-toolbar-shadow, 0 16px 44px -12px rgb(0 0 0 / 48%), 0 4px 12px -4px rgb(0 0 0 / 32%));
}

.wcjtBjSJwTWRpPftzjvQ {
  pointer-events: auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-4, 4px);
  height: var(--uc-toolbar-height, 48px);
  padding: 0 var(--uc-space-6, 6px);
  /* Compact and dock geometry share the global surface radius. */
  border-radius: var(--uc-toolbar-radius, var(--uc-radius-lg, 12px));
  overflow: visible;
}

.IdW9qftPRIpxufX1u1zB .wcjtBjSJwTWRpPftzjvQ { padding-inline: var(--uc-space-6, 6px); gap: var(--uc-space-6, 6px); }

.VDCgP2TXcbIH83qTz1iU.Ti6l0uHmIPYJMAFtJph6 { gap: 0; height: auto; padding: 0; border: 0; box-shadow: none; }
.VDCgP2TXcbIH83qTz1iU.Ti6l0uHmIPYJMAFtJph6 .wcjtBjSJwTWRpPftzjvQ {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.Nt2ipeZvcBNJCdMb5cZ_,
.Dki1FM4eHY9MKK_GAGym {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;
  --uich-ff: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Actions share the global Button radius; the ✕ matches the bar beside it. */
.Nt2ipeZvcBNJCdMb5cZ_ { border-radius: var(--uc-toolbar-action-radius, var(--uc-btn-radius, var(--uc-radius-md, 8px))); }
.Dki1FM4eHY9MKK_GAGym { border-radius: var(--uc-toolbar-radius, var(--uc-radius-lg, 12px)); }

.Nt2ipeZvcBNJCdMb5cZ_ {
  position: relative;
  flex: none;
  /* Fixed size — the dock magnification was removed. */
  width: var(--uc-toolbar-action-size, 34px);
  height: var(--uc-toolbar-action-size, 34px);
  border: 0;
  background: transparent;
  color: var(--uc-toolbar-fg, var(--uc-text, CanvasText));
  /* The active pill slides between buttons on this transition. */
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  /* Selected look = the DS dark gradient button: a dark fill with the sheen
     gradient on top and a hairline stroke + raised shadow. The gradient is a
     background-IMAGE, so it also survives the composer's theme button-paint
     guard (which only zeroes background-color). Defined once, reused by every
     :active rule below so the host-reset guards stay in sync. */
  --uc-tb-active-bg:
    var(--uc-sheen, linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.03))),
    var(--uc-surface-sunken, ButtonFace);
  --uc-tb-active-ring:
    inset 0 0 0 1px var(--uc-border-strong, ButtonBorder),
    var(--uc-shadow-raised, 0 1px 2px rgba(0, 0, 0, 0.30));
}

.Nt2ipeZvcBNJCdMb5cZ_:hover,
.Dki1FM4eHY9MKK_GAGym:hover {
  background: var(--uc-toolbar-hover-bg, var(--uc-surface-hover, ButtonFace));
  border-color: var(--uc-toolbar-border, var(--uc-border, ButtonBorder));
  box-shadow: var(--uc-toolbar-shadow, 0 6px 16px -6px rgb(0 0 0 / 48%));
  color: var(--uc-text-strong, CanvasText);
}
/* An action sits inside the bar, so its hover is the wash alone: the bar's
   own float shadow on a 32px button read as a grey haze around it. The ✕
   and the handle's pill float by themselves and keep it. */
.Nt2ipeZvcBNJCdMb5cZ_:hover { box-shadow: none; }

.Nt2ipeZvcBNJCdMb5cZ_:focus-visible,
.Dki1FM4eHY9MKK_GAGym:focus-visible {
  outline: 2px solid var(--uc-ring, Highlight);
  outline-offset: -2px;
}

/* Selected = a dark, inset "stroked" button (the global dark icon button look),
   not a light disc. The stroke is the visible part; the fill sits a touch below
   the bar so it reads as pressed-in. */
.Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ {
  background: var(--uc-tb-active-bg);
  box-shadow: var(--uc-tb-active-ring);
  color: var(--uc-text-strong, CanvasText);
}
.Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:hover {
  background: var(--uc-tb-active-bg);
}

/* A disabled action says so under the pointer. `default` read as "this button
   simply does nothing" — the arrow never changes, so a press that was ignored
   looked like a press that was missed. */
.Nt2ipeZvcBNJCdMb5cZ_:disabled,
.Nt2ipeZvcBNJCdMb5cZ_:disabled:hover {
  opacity: 1;
  color: var(--uc-text-muted, GrayText);
  background: transparent;
  cursor: not-allowed;
}

/* Active AND disabled is work in progress — Save during a flush is the case
   this exists for. `progress` was the old choice and it is the wrong signal
   here: it means "busy, but you may still interact", while the button is in
   fact refusing the click. Saves are also short, so a cursor that only reads
   as a brief flicker told the user nothing. */
.Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:disabled,
.Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:disabled:hover {
  background: var(--uc-tb-active-bg);
  box-shadow: var(--uc-tb-active-ring);
  color: var(--uc-text-strong, CanvasText);
  cursor: not-allowed;
}

.Nt2ipeZvcBNJCdMb5cZ_ svg,
.Dki1FM4eHY9MKK_GAGym svg {
  width: auto !important;
  height: auto !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
  filter: none !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}

.Ra_BBvLLe4yROxlrLqYt {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--uc-space-6, 6px);
}

.vPZZP6vGHUVlSQhkRpOh {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  margin: 0 var(--uc-space-4, 4px);
  background: var(--uc-toolbar-border, var(--uc-border, ButtonBorder));
}

.jLW95_rgGsGmyK7hLMfr::after {
  content: "";
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--uc-toolbar-indicator, var(--uc-brand, #fd6a35));
  box-shadow: 0 0 0 1.5px var(--uc-toolbar-bg, var(--uc-surface-raised, Canvas));
  pointer-events: none;
}

.Dki1FM4eHY9MKK_GAGym {
  pointer-events: auto;
  flex: none;
  width: var(--uc-toolbar-dismiss-size, 44px);
  height: var(--uc-toolbar-dismiss-size, 44px);
  color: var(--uc-toolbar-fg, var(--uc-text, CanvasText));
  transition: background-color 150ms ease, color 150ms ease, transform 100ms ease;
}
.Dki1FM4eHY9MKK_GAGym:active { transform: scale(.94); }
/* The ✕ is a <button> that paints its own surface, and hosts reset button
   backgrounds above this module's weight (the composer's
   `.uich-tw [type='button']` is 0,2,0, its hover reset 0,3,0), which left it
   transparent: a white disc over a light canvas. Out-rank them so it stays the
   same dark surface as the bar. */
.VDCgP2TXcbIH83qTz1iU .Dki1FM4eHY9MKK_GAGym.Dki1FM4eHY9MKK_GAGym { background: var(--uc-toolbar-bg, var(--uc-surface-raised, Canvas)); }
.VDCgP2TXcbIH83qTz1iU .Dki1FM4eHY9MKK_GAGym.Dki1FM4eHY9MKK_GAGym:hover {
  background: var(--uc-toolbar-hover-bg, var(--uc-surface-hover, ButtonFace));
  border-color: var(--uc-toolbar-border, var(--uc-border, ButtonBorder));
  box-shadow: var(--uc-toolbar-shadow, 0 6px 16px -6px rgb(0 0 0 / 48%));
  color: var(--uc-text-strong, CanvasText);
}
/* Same guard for the actions: the host's hover/focus reset (0,3,0) cleared
   their hover wash and could clear the selected fill while focused. Disabled
   actions stay out of the hover rule, as in `.action:disabled:hover` above;
   `.active` comes last so a selected action keeps its fill under the pointer. */
.VDCgP2TXcbIH83qTz1iU .Nt2ipeZvcBNJCdMb5cZ_.Nt2ipeZvcBNJCdMb5cZ_:not(:disabled):hover {
  background: var(--uc-toolbar-hover-bg, var(--uc-surface-hover, ButtonFace));
  box-shadow: none;
  color: var(--uc-text-strong, CanvasText);
}
.VDCgP2TXcbIH83qTz1iU .Nt2ipeZvcBNJCdMb5cZ_.Nt2ipeZvcBNJCdMb5cZ_:disabled { color: var(--uc-text-muted, GrayText); }
.VDCgP2TXcbIH83qTz1iU .Nt2ipeZvcBNJCdMb5cZ_.Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ,
.VDCgP2TXcbIH83qTz1iU .Nt2ipeZvcBNJCdMb5cZ_.Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:disabled:hover {
  background: var(--uc-tb-active-bg);
  box-shadow: var(--uc-tb-active-ring);
  color: var(--uc-text-strong, CanvasText);
}
.VDCgP2TXcbIH83qTz1iU .Nt2ipeZvcBNJCdMb5cZ_.Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:not(:disabled):hover {
  background: var(--uc-tb-active-bg);
  box-shadow: var(--uc-tb-active-ring);
}
.Dki1FM4eHY9MKK_GAGym svg { width: 16px !important; height: 16px !important; }

.j4Axbcky5LgpsKgn4WAb {
  pointer-events: none;
  z-index: var(--uc-z-tooltip, 1300);
  padding: 5px 9px;
  border-radius: var(--uc-radius-sm, 6px);
  color: var(--uc-text-strong, CanvasText);
  font-size: 11.5px;
  font-weight: var(--uc-weight-medium, 500);
}

@media (prefers-reduced-motion: reduce) {
  .Nt2ipeZvcBNJCdMb5cZ_,
  .Dki1FM4eHY9MKK_GAGym { transition: none; }
}

/* Key hint after a tooltip's label. */
.MYnwy7zbVSSeUTU2rBFv {
  margin-inline-start: var(--uc-space-8, 8px);
  color: var(--uc-text-muted, GrayText);
  font: inherit;
  --uich-ff: inherit;
  letter-spacing: 0.02em;
}

/* ---- FloatingToolbarHandle: what a hidden toolbar leaves behind -----------
   The button is a wide, short hit area; the drawn part is the grip inside it, a
   thin grey bar that grows into a chevron pill under the pointer or keyboard
   focus. At rest it is flat grey, not toolbar paint: a white pill with a soft
   shadow vanished on a white canvas. */
.dAZ_Hyxb_av0gx8pYP0u {
  display: inline-flex;
  pointer-events: none;
  color: var(--uc-toolbar-fg, var(--uc-text, CanvasText));
}
.dAZ_Hyxb_av0gx8pYP0u[data-theme="dark"] { color-scheme: dark; }
.dAZ_Hyxb_av0gx8pYP0u:not([data-theme="dark"]) {
  --uc-toolbar-bg: var(--uc-surface-raised, Canvas);
  --uc-toolbar-fg: var(--uc-text, CanvasText);
  --uc-toolbar-border: var(--uc-border, ButtonBorder);
  --uc-toolbar-hover-bg: var(--uc-surface-hover, ButtonFace);
}

.iNCSxA1uCZCOsraS6Mxg {
  pointer-events: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 120px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  --uich-ff: inherit;
  cursor: pointer;
}
/* Hosts reset button paint above this module's weight (see .dismiss). */
.dAZ_Hyxb_av0gx8pYP0u .iNCSxA1uCZCOsraS6Mxg.iNCSxA1uCZCOsraS6Mxg,
.dAZ_Hyxb_av0gx8pYP0u .iNCSxA1uCZCOsraS6Mxg.iNCSxA1uCZCOsraS6Mxg:hover,
.dAZ_Hyxb_av0gx8pYP0u .iNCSxA1uCZCOsraS6Mxg.iNCSxA1uCZCOsraS6Mxg:focus { background: transparent; box-shadow: none; outline: none; }

.scu_7fKMexpFwEGrAuqU {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--uc-toolbar-grip, var(--uc-text-subtle, GrayText));
  border: 1px solid transparent;
  box-shadow: none;
  transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1), height 180ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms ease, box-shadow 150ms ease;
}
.scu_7fKMexpFwEGrAuqU svg {
  width: 12px !important;
  height: 12px !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  opacity: 0 !important;
  transition: opacity 120ms ease;
}
.iNCSxA1uCZCOsraS6Mxg:hover .scu_7fKMexpFwEGrAuqU,
.iNCSxA1uCZCOsraS6Mxg:focus-visible .scu_7fKMexpFwEGrAuqU {
  width: 60px;
  height: 18px;
  background: var(--uc-toolbar-hover-bg, var(--uc-surface-hover, ButtonFace));
  border-color: var(--uc-toolbar-border, var(--uc-border, ButtonBorder));
  box-shadow: var(--uc-toolbar-shadow, 0 6px 16px -6px rgb(0 0 0 / 48%));
  color: var(--uc-text-strong, CanvasText);
}
.iNCSxA1uCZCOsraS6Mxg:hover .scu_7fKMexpFwEGrAuqU svg,
.iNCSxA1uCZCOsraS6Mxg:focus-visible .scu_7fKMexpFwEGrAuqU svg { opacity: 1 !important; }
.iNCSxA1uCZCOsraS6Mxg:focus-visible .scu_7fKMexpFwEGrAuqU { outline: 2px solid var(--uc-ring, Highlight); outline-offset: 2px; }

/* Same dot as an action's indicator, on the grip's corner. */
.t_O5riQZzA_vbD0v03im .scu_7fKMexpFwEGrAuqU::after {
  content: "";
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--uc-toolbar-indicator, var(--uc-brand, #fd6a35));
  box-shadow: 0 0 0 1.5px var(--uc-toolbar-bg, var(--uc-surface-raised, Canvas));
}

@media (prefers-reduced-motion: reduce) {
  .scu_7fKMexpFwEGrAuqU,
  .scu_7fKMexpFwEGrAuqU svg { transition: none; }
}

/* Badge, compact status/label pill on uc- tokens. */
.V_kpdXZsi07BrkW8mkNK {
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-4);
  height: 20px;
  padding: 0 var(--uc-space-8);
  border-radius: var(--uc-radius-pill);
  font-family: var(--uc-font-sans);
  --uich-ff: var(--uc-font-sans);
  font-size: var(--uc-text-xs);
  font-weight: var(--uc-weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.uKPXqu7kkFVS2xBa9AEE { height: 24px; padding: 0 var(--uc-space-12); font-size: var(--uc-text-sm); }

.pCK7hwfFSalZodp5bh2z {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* variants read the --_* tone channels */
.LujE9zA0XWq7MG_G1pvY   { color: var(--_on, var(--uc-brand-on)); background: var(--_fill, var(--uc-brand)); background-image: var(--uc-sheen); box-shadow: var(--uc-shadow-1); }
.VHma2GbfXrG07eyZL1Df    { color: var(--_fg, var(--uc-brand-fg)); background: var(--_soft, var(--uc-brand-soft)); }
.yNf7ITzC0piY9ptVONoj { color: var(--_fg, var(--uc-brand-fg)); background: transparent; box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)); }

.tUaDdUn93V7X81sgWiv7   { --_fill: var(--uc-brand);   --_on: var(--uc-brand-on);   --_fg: var(--uc-brand-fg);   --_soft: var(--uc-brand-soft);   --_border: var(--uc-brand-border); }
.mL3Idfa5m7lUfaPAG188 { --_fill: var(--uc-success); --_on: var(--uc-success-on); --_fg: var(--uc-success-fg); --_soft: var(--uc-success-soft); --_border: var(--uc-success-border); }
.NGzt4PZr82HJx6zD5oeP  { --_fill: var(--uc-danger);  --_on: var(--uc-danger-on);  --_fg: var(--uc-danger-fg);  --_soft: var(--uc-danger-soft);  --_border: var(--uc-danger-border); }
.VF30PpmNX8Fbve0UeM9T { --_fill: var(--uc-warning); --_on: var(--uc-warning-on); --_fg: var(--uc-warning-fg); --_soft: var(--uc-warning-soft); --_border: var(--uc-warning-border); }
.o39yUK028V2zERFldgoO  { --_fill: var(--uc-accent);  --_on: var(--uc-accent-on);  --_fg: var(--uc-accent-fg);  --_soft: var(--uc-accent-soft);  --_border: var(--uc-accent-border); }
/* Solid neutral uses the inverse pair, which every surface redefines. It was
   --uc-text on --uc-text-inverse, and --uc-text-inverse is #FFF everywhere, so
   on dark surfaces (where --uc-text is light) it drew white on near-white. In
   light the inverse pair is the same #171717 / #FFF it rendered before. */
.yP65shMRVToyLTvM480a { --_fill: var(--uc-inverse-bg); --_on: var(--uc-inverse-fg); --_fg: var(--uc-text-muted); --_soft: var(--uc-surface-sunken); --_border: var(--uc-border-strong); }

/* Accordion, token-driven, chevron rotates, height animates via Radix var. */
.DFGr5k2eRrJnxwR8wIDu {
  border-bottom: 1px solid var(--uc-border-subtle);
}

.GFKvYR3a72nGoScN0tFW {
  margin: 0;
  display: flex;
}

.tvcRj9RnfQDkmcI1jqe4 {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uc-space-12);
  padding: var(--uc-space-16) var(--uc-space-4);
  font-size: var(--uc-text-base);
  font-weight: var(--uc-weight-semibold);
  color: var(--uc-text-strong);
  cursor: pointer;
}

.tvcRj9RnfQDkmcI1jqe4:focus-visible {
  outline: 2px solid var(--uc-ring);
  outline-offset: -2px;
  border-radius: var(--uc-radius-sm);
}

.kEKgCi8RUSQAuVKmrOgo {
  flex: none;
  color: var(--uc-text-muted);
  transition: transform var(--uc-dur-base) var(--uc-ease-standard);
}

.tvcRj9RnfQDkmcI1jqe4[data-state="open"] .kEKgCi8RUSQAuVKmrOgo {
  transform: rotate(-180deg);
}

.Z8tltYrpVFnQ1kjmShck {
  overflow: hidden;
  font-size: var(--uc-text-base);
  color: var(--uc-text-muted);
}

.Z8tltYrpVFnQ1kjmShck[data-state="open"] {
  animation: C_plQPcmU7qNqKcQyRdB var(--uc-dur-base) var(--uc-ease-standard);
}

.Z8tltYrpVFnQ1kjmShck[data-state="closed"] {
  animation: phgHywz15_vr7TB8HfOi var(--uc-dur-base) var(--uc-ease-standard);
}

.FeUPu6HLKbMSpMC925mj {
  padding: 0 var(--uc-space-4) var(--uc-space-16);
  line-height: var(--uc-leading-normal);
}

@keyframes C_plQPcmU7qNqKcQyRdB {
  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes phgHywz15_vr7TB8HfOi {
  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

/* System-colour focus remains visible when shadows and fills are suppressed. */
@media (forced-colors: active) {
  .tvcRj9RnfQDkmcI1jqe4:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
}