@muten/shadcn 0.0.5 → 0.1.0

package/kit.css

@@ -0,0 +1,2763 @@
+/* @muten/shadcn · kit layer: what the library adds on top of Nova (import after nova.css, `class="style-nova"` on <html>).
+   It is the reference artifact's own CSS, as is, so every component is 1:1 with it:
+     1. muten adapters (this block): what changes because muten renders an Icon as span.mu-icon > svg, a Stack as a
+        flex column, and a dynamic value through a CSS var.
+     2. lib · the generic layer (tokens, skins, atoms, fields, overlays, pickers, cards, tables, carousel…)
+     3. sys · the system kit (agenda, messaging, chat, numbers, settings, billing, team, skeletons…)
+     4. pk · the color picker   5. mslider · the slider
+   Edit the artifact first, then copy here: the artifact is the reference. */
+
+/* ── 1. muten adapters ── */
+/* A Nova component that is a plain block in shadcn must not inherit muten's flex column; one Nova says is a row stays
+   a row. Unlayered + zero specificity: beats muten's base layer, loses to every Nova/kit rule that sets a display. */
+:where(.style-nova .mu-stack[data-slot]) { display: block; }   /* a Nova part is a plain div until Nova says otherwise */
+/* Every library class was written for a <div>, whose flex default is a ROW; muten's Stack defaults to a column. */
+:where(.style-nova .mu-stack[class*="cx-"], .style-nova .mu-stack[class*="cn-"], .style-nova .mu-nav[class*="cx-"]) { flex-direction: row; }
+/* The generic card's header item keeps one line per text, like the artifact's .cx-ellipsis spans. */
+.cn-card-header > .cn-item .cn-item-title, .cn-card-header > .cn-item .cn-item-description { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The kit's layout helpers on a muten Stack: a row stays a row. */
+/* The artifact's inline styles, as classes (muten writes no inline style). Same values. */
+.cx-stat-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; }
+.cx-stat-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 6px; }
+.cx-stat-ic:empty { display: none; }
+.cx-gap-6 { gap: 6px; }
+.cx-stat-ic > .mu-icon { font-size: 15px; }
+/* Icons: span.mu-icon wraps the svg; it sits like the svg would. */
+.style-nova .mu-icon { display: inline-flex; flex: none; line-height: 1; }
+/* Avatar tone: a hue per person, chosen from data (tone 1-8) since muten does not hash names. */
+.cn-avatar[data-tone] { --h: 230; }
+.cn-avatar[data-tone] .cn-avatar-fallback { background: color-mix(in srgb, oklch(0.62 0.13 var(--h)) 22%, var(--background)); color: color-mix(in srgb, oklch(0.55 0.14 var(--h)) 50%, var(--foreground)); font-weight: 600; }
+.cn-avatar[data-tone="1"] { --h: 25; } .cn-avatar[data-tone="2"] { --h: 70; } .cn-avatar[data-tone="3"] { --h: 140; } .cn-avatar[data-tone="4"] { --h: 190; }
+.cn-avatar[data-tone="5"] { --h: 230; } .cn-avatar[data-tone="6"] { --h: 280; } .cn-avatar[data-tone="7"] { --h: 320; } .cn-avatar[data-tone="8"] { --h: 0; }
+/* Alert: Nova's grid keys on a direct <svg>; give span.mu-icon the same place. */
+.style-nova .cn-alert:has(> .mu-icon) { grid-template-columns: auto 1fr; column-gap: .5rem; }
+.style-nova .cn-alert > .mu-icon { grid-row: span 2; translate: 0 .125rem; font-size: 16px; }
+.cn-alert[data-tone="info"] > .mu-icon { color: var(--info); } .cn-alert[data-tone="ok"] > .mu-icon { color: var(--success); } .cn-alert[data-tone="wait"] > .mu-icon { color: var(--warning); }
+.cn-alert[data-tone="wait"] { background: color-mix(in srgb, var(--warning) 6%, var(--card)); }
+/* Progress: the value rides --w (muten's style(w: …)); Nova's flex-1 would stretch it to full. */
+.cn-progress > .cn-progress-indicator:not([style*="transform"]) { flex: none; width: var(--w, 0%); transition: width 260ms cubic-bezier(.22, 1, .36, 1); }
+/* Skeleton: the shimmer on Nova's block (the kit's own .cx-sk keeps working for Customs). */
+.cn-skeleton { background: linear-gradient(90deg, var(--sk-a) 0%, var(--sk-b) 50%, var(--sk-a) 100%); background-size: 200% 100%; animation: cx-sk 1.3s linear infinite; }
+.cn-skeleton[data-shape="circle"], .cn-skeleton[data-shape="pill"] { border-radius: 99px; }
+@media (prefers-reduced-motion: reduce) { .cn-skeleton { animation: none; } }
+/* Modal from muten: the root's data-open drives what the artifact's JS drove with data-state + [hidden]. Closed, the
+   layers stay mounted but invisible and inert; visibility flips only after the exit has played (no flicker). */
+.cx-modal-root[data-open="true"] > .cx-overlay { opacity: 1; }
+.cx-modal-root[data-open="true"] > .cx-modal[data-mode="dialog"] { transform: translate(-50%, -50%); opacity: 1; }
+.cx-modal-root[data-open="true"] > .cx-modal[data-mode="drawer"] { transform: translateY(0); }
+.cx-modal-root:not([data-open="true"]) > .cx-overlay, .cx-modal-root:not([data-open="true"]) > .cx-modal { visibility: hidden; pointer-events: none; transition-property: opacity, transform, visibility; transition-delay: 0s, 0s, 460ms; }
+.cx-modal-root > .cx-overlay { border: 0; padding: 0; cursor: default; }
+.cx-modal-head > .cx-modal-title { font-size: 16px; font-weight: 600; color: var(--popover-foreground); }
+.cx-modal-desc { color: var(--muted-foreground); font-size: 14px; }
+.cx-modal-desc:empty { display: none; }
+.cx-modal-behavior { display: none; }
+/* auto mode before the first open (no flash): dialog wide, drawer on a phone */
+.cx-modal[data-mode="auto"] { visibility: hidden; }
+/* Field from muten: an empty description/label must not take a row. The switch row's «why» is the artifact's <p>. */
+.cn-field > .cn-label:empty, .cn-field > .cn-field-description:empty { display: none; }
+.cx-switch-row > .cx-switch-why { grid-column: 1; margin: 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.45; }
+.cx-switch-row > .cx-switch-why:empty { display: none; }
+.cx-switch-row > .cn-switch { margin-top: 1px; }
+/* Tokens swatches from muten (the artifact paints them with <i style>): the color rides --c. */
+.cx-sw > .cx-sw-i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 15%, transparent); flex: none; background: var(--c); }
+.cx-z > .cx-z-code { font: 12px var(--font-mono); color: var(--muted-foreground); }
+.cx-z > .cx-z-v { font: 600 12px var(--font-mono); text-align: right; }
+.cx-z > .cx-z-i { height: 8px; width: var(--w); border-radius: 99px; background: var(--selected); opacity: .25; }
+/* Nav: the chosen one rides aria-pressed (muten writes aria-current="false" too, which [aria-current] would match). */
+.style-nova .cn-button.cx-nav[aria-pressed="true"][aria-pressed][aria-pressed] {
+  background: var(--selected-soft); color: var(--selected); position: relative;
+}
+.cx-nav[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 99px; background: var(--selected); }
+/* Chip: a removed chip leaves with the kit's fade (muten keeps it until the animation ends). */
+.cx-chip.mu-leave { animation: cx-chip-out 160ms ease forwards; }
+.cx-tabs-behavior { display: none; }
+.cx-tab-panel.hidden { display: none; }
+/* Items that are buttons (a ChoiceItem): a row, not a centred label. */
+button.cn-item { width: 100%; font: inherit; text-align: left; cursor: pointer; }
+.cx-roving-behavior, .cx-sortable-behavior { display: none; }
+.cx-grip > .mu-icon { font-size: 16px; }
+/* Row3 from muten (the artifact writes <div><b><small>). */
+.cx-row3 > .cx-row3-who { display: block; min-width: 0; }
+.cx-row3 .cx-row3-t { font-weight: 500; display: block; }
+.cx-row3 .cx-row3-s { color: var(--muted-foreground); font-size: 13px; }
+.cx-row3 .cx-row3-s:empty { display: none; }
+.cx-empty-mini > .mu-icon { font-size: 22px; color: var(--success); }
+/* Text atom from a part: data-variant comes from data(), same rules as the kit's .cx-text below. */
+/* Button icon motion, for span.mu-icon (the kit's rules below key on svg). */
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .cn-button > .mu-icon { transition: transform 180ms cubic-bezier(.22, 1, .36, 1); }
+  .cn-button:not(:disabled):hover > .mu-icon:last-child:not(:first-child) { transform: translateX(2px); }
+  .cn-button:not(:disabled):hover > .mu-icon:first-child:not(:last-child) { transform: scale(1.12); }
+  .cn-button:not(:disabled):hover > .mu-icon:only-child { transform: scale(1.12); }
+}
+
+
+/* ═════════════════════════ 1b. the artifact page's library rules (floating panels, drawer, svg size, checkbox, toasts) ═════════════════════════ */
+.pg-pop { position: fixed; top: 0; left: 0; z-index: 60; }
+.pg-drw-o { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .3); backdrop-filter: blur(8px); opacity: 0; transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1); }
+.pg-drw-o[data-state="open"] { opacity: 1; }
+.pg-drw { position: fixed; z-index: 50; margin: 8px; display: flex; flex-direction: column; border-radius: 24px; border: 1px solid var(--popover); background: var(--popover); color: var(--popover-foreground); font-size: 14px; box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; outline: none; }
+:root[data-theme="dark"] .pg-drw { border-color: var(--border); }
+.pg-drw[data-dir="right"] { top: 0; right: 0; bottom: 0; width: calc(75% - 16px); max-width: 24rem; transform: translateX(calc(100% + 8px)); }
+.pg-drw[data-dir="bottom"] { left: 0; right: 0; bottom: 0; max-height: calc(100dvh - 6rem); transform: translateY(calc(100% + 8px)); }
+.pg-drw[data-state="open"] { transform: none; }
+.pg-drw-handle { display: none; margin: 12px auto 0; width: 96px; height: 4px; flex: none; border-radius: 99px; background: var(--muted); }
+.pg-drw[data-dir="bottom"] .pg-drw-handle { display: block; }
+.pg-drw[data-dir="bottom"] > * { width: 100%; max-width: 32rem; margin-left: auto; margin-right: auto; }
+.pg-drw-body { display: grid; gap: 8px; padding: 0 16px; overflow: auto; }
+.pg-slot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
+.pg-slot b { font-weight: 500; } .pg-slot small { color: var(--muted-foreground); font-size: 12.5px; }
+.pg-slot:has([data-state="checked"]) { background: color-mix(in oklch, var(--muted) 60%, transparent); }
+/* icons with no size class get shadcn's default 16px (containers that size them still win) */
+/* an icon with no size of its own is 16 px; an SVG that states its width (a logo, an illustration) keeps it */
+.style-nova :where(svg:not([class*="size-"]):not([width])) { width: 16px; height: 16px; flex-shrink: 0; }
+/* our extra for the checkbox: the check draws itself (shadcn just shows it) */
+.cb-mark { width: 14px; height: 14px; }
+[data-state="unchecked"] > .cn-checkbox-indicator { visibility: hidden; }
+.style-nova .cb-mark path { stroke-dasharray: 24; stroke-dashoffset: 24; }
+.style-nova [data-state="checked"] .cb-mark path { stroke-dashoffset: 0; transition: stroke-dashoffset 200ms cubic-bezier(0.22, 1, 0.36, 1) 40ms; }
+.style-nova [data-state="checked"] > .cn-checkbox-indicator { visibility: visible; }
+.style-nova .cn-checkbox { transition: background-color 150ms, border-color 150ms, color 150ms; }
+.style-nova .cn-checkbox:active { scale: .92; transition: scale 100ms; }
+/* the toast, as shadcn's current one (Base UI): stack, peek, expand */
+.pg-toasts { position: fixed; z-index: 70; right: 16px; bottom: 16px; width: calc(100% - 32px); max-width: 384px; pointer-events: none; }
+.pg-toast { position: absolute; right: 0; bottom: 0; width: 100%; pointer-events: auto; transform-origin: bottom; border-radius: calc(var(--radius) * 1.8); border: 1px solid var(--border); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
+  --gap: .75rem; --peek: .75rem; --scale: max(0, 1 - var(--i) * 0.1); --shrink: calc(1 - var(--scale));
+  height: var(--front-h); z-index: calc(1000 - var(--i));
+  transform: translateY(calc(0px - var(--i) * var(--peek) - var(--shrink) * var(--front-h))) scale(var(--scale));
+  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms, height 150ms; will-change: transform; }
+.pg-toast::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: calc(var(--gap) + 1px); }
+.pg-toasts[data-expanded] .pg-toast { height: var(--h); transform: translateY(calc(0px - var(--off) - var(--i) * var(--gap))); }
+.pg-toast[data-start], .pg-toast[data-end] { transform: translateY(150%) !important; }
+.pg-toast[data-limited] { opacity: 0; }
+.pg-toast-c { display: flex; height: 100%; align-items: center; gap: 12px; overflow: hidden; padding: 16px; transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1); }
+.pg-toast[data-behind] .pg-toast-c { opacity: 0; }
+.pg-toasts[data-expanded] .pg-toast-c { opacity: 1; }
+.pg-toast-t { font-size: 14px; font-weight: 500; } .pg-toast-d { font-size: 14px; color: var(--muted-foreground); }
+@media (prefers-reduced-motion: reduce) { .pg-toast, .pg-vaul { transition-duration: 1ms !important; } }
+
+.pg-acc-icon { margin-left: auto; color: var(--muted-foreground); pointer-events: none; flex-shrink: 0; }
+.pg-acc-open { display: none; }
+[aria-expanded="true"] > .pg-acc-closed { display: none; } [aria-expanded="true"] > .pg-acc-open { display: inline; }
+
+/* floating panels animate with enter/exit only: their position must never transition (shadcn's Radix places them with a transform) */
+.pg-pop { transition-property: none !important; }
+/* an exit animation keeps its last frame: with fill-mode none the panel snaps back to full opacity before it is hidden (the flicker) */
+[data-state="closed"] { animation-fill-mode: forwards !important; }
+.pg-drw.dragging, .pg-drw-o.dragging { transition: none !important; }
+.pg-drw { touch-action: none; }
+.pg-drw-body { touch-action: pan-y; }
+
+/* spinner (shadcn's animate-spin) */
+@keyframes pg-spin { to { transform: rotate(360deg); } }
+.animate-spin { animation: pg-spin 1s linear infinite; }
+.cn-progress-indicator { transition: transform 450ms ease; }
+/* native select: options readable in both themes */
+.pg-opt-native { background: var(--popover); color: var(--popover-foreground); }
+/* textarea counter (our extra) */
+.pg-count { display: flex; justify-content: space-between; gap: 12px; }
+.pg-count-n { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+.pg-count-n.full { color: var(--destructive); }
+/* tooltip wrappers on avatars keep the group's ring */
+.pg-tipwrap { display: inline-flex; }
+.cn-avatar-group .pg-tipwrap > [data-slot=avatar], .cn-avatar-group .pg-tipwrap > [data-slot=avatar-group-count] { box-shadow: 0 0 0 2px var(--background); }
+/* select (ours): search row, list, highlighted item */
+.pg-select { position: relative; width: 100%; }
+.pg-sel-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
+.pg-sel-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--foreground); font-size: 14px; }
+.pg-sel-search input::placeholder { color: var(--muted-foreground); }
+.pg-sel-list { max-height: 240px; overflow-y: auto; }
+.cn-select-content[data-slot] { max-height: 300px; overflow: hidden; display: flex; flex-direction: column; }
+.cn-select-content > .cn-select-group:not(.pg-sel-list) { overflow-y: auto; }
+.pg-sel-empty { padding: 20px 8px; text-align: center; font-size: 14px; color: var(--muted-foreground); }
+.pg-sel-loading { display: inline-flex; align-items: center; gap: 8px; }
+.cn-select-item[data-highlighted] { background: var(--accent); color: var(--accent-foreground); }
+.cn-select-item { cursor: default; }
+
+
+/* ═════════════════════════ 2. lib ═════════════════════════ */
+/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
+   @muten/shadcn · capa genérica (tanda 1). Todo lee tokens: un tema de muten (theme.muten + styling{})
+   solo redefine estas variables. Ningún componente trae un color fijo.
+   Tokens nuevos sobre los de shadcn:
+     --selected / --selected-foreground / --selected-soft   lo elegido («estás aquí»): color + punto
+     --success · --warning · --info (+ -soft)              tonos de estado para badges, avisos y filas
+     --overlay                                             fondo de los modales
+     --z-*                                                 la escala de capas
+   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
+:root { --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace; }
+.style-nova, [data-skin] {
+  --selected: var(--primary); --selected-foreground: var(--primary-foreground);
+  --selected-soft: color-mix(in srgb, var(--selected) 12%, transparent);
+  --success: oklch(0.55 0.13 155); --success-soft: color-mix(in srgb, var(--success) 14%, transparent);
+  --warning: oklch(0.62 0.15 60); --warning-soft: color-mix(in srgb, var(--warning) 16%, transparent);
+  --info: oklch(0.55 0.15 255); --info-soft: color-mix(in srgb, var(--info) 14%, transparent);
+  --overlay: rgb(0 0 0 / 0.1);
+  --on-destructive: oklch(1 0 0);
+  --z-content: 0; --z-sticky: 20; --z-fab: 30; --z-popover: 40; --z-sheet: 50; --z-modal: 60; --z-toast: 70;
+}
+
+/* ── pieles de ejemplo: lo único que cambia entre apps y tiendas ── */
+[data-skin="storio"] {
+  --primary: oklch(0.18 0.01 285); --primary-foreground: oklch(0.99 0 0);
+  --selected: #6B46F2; --selected-foreground: #fff;
+  --ring: #6B46F2;
+  --accent: oklch(0.96 0.015 290); --accent-foreground: oklch(0.2 0.02 290);
+}
+:root[data-theme="dark"] [data-skin="storio"] {
+  --primary: oklch(0.96 0 0); --primary-foreground: oklch(0.18 0.01 285);
+  --selected: #9B80FF; --selected-foreground: #160d33; --ring: #9B80FF;
+  --accent: oklch(0.3 0.03 290); --accent-foreground: oklch(0.97 0 0);
+}
+[data-skin="tienda"] {
+  --background: #0F2C24; --foreground: #F3EEE2; --card: #14372D; --card-foreground: #F3EEE2;
+  --popover: #163E33; --popover-foreground: #F3EEE2;
+  --primary: #E6C470; --primary-foreground: #20190B;
+  --secondary: #1D4A3D; --secondary-foreground: #F3EEE2;
+  --muted: #1A4337; --muted-foreground: #B5C4B9; --accent: #1F4D40; --accent-foreground: #F3EEE2;
+  --border: rgb(243 238 226 / 0.13); --input: rgb(243 238 226 / 0.18); --ring: #E6C470;
+  --selected: #E6C470; --selected-foreground: #20190B;
+  --destructive: #FF8A80; --overlay: rgb(0 0 0 / 0.35);
+  --radius: 1rem;
+  color-scheme: dark;
+}
+[data-skin] { color: var(--foreground); }
+.cx-skinbox { background: var(--background); color: var(--foreground); }
+
+/* ── Button: the «elegido» state (color + dot, aria-current) and the save button's three moments ── */
+.cn-button[aria-current], .cn-button[aria-pressed="true"].cx-nav {
+  background: var(--selected-soft); color: var(--selected); position: relative;
+}
+.cx-nav { position: relative; }
+.cx-nav[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 99px; background: var(--selected); }
+.cx-create { background: var(--primary); color: var(--primary-foreground); }
+.cx-save { width: 9.25rem; justify-content: center; }
+.cx-save[data-status="saving"] { pointer-events: none; opacity: .85; }
+.cx-save[data-status="saved"] { background: var(--success); color: #fff; animation: cx-pop 260ms cubic-bezier(.22, 1, .36, 1); }
+@keyframes cx-pop { 50% { transform: scale(1.04); } }
+.cx-btn-label { display: inline-flex; align-items: center; gap: 6px; }
+
+/* ── Badge tones + dot + removable chip ── */
+.cx-tone-new { background: var(--info-soft); color: var(--info); }
+.cx-tone-ok { background: var(--success-soft); color: var(--success); }
+.cx-tone-wait { background: var(--warning-soft); color: var(--warning); }
+.cx-tone-bad { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: var(--destructive); }
+.cx-tone-pro { background: var(--selected); color: var(--selected-foreground); letter-spacing: .04em; }
+.cx-dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; }
+
+
+
+
+@keyframes cx-chip-out { to { opacity: 0; transform: scale(.9); } }
+
+/* ── Item: media, price, selectable, draggable; text wraps instead of being cut ── */
+.cx-item .cn-item-title, .cx-item .cn-item-description { white-space: normal; -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow: visible; }
+.cx-media-img { width: 40px; height: 40px; border-radius: calc(var(--radius) * .8); object-fit: cover; flex: none; background: var(--muted); }
+.cx-price { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.cx-item[data-selectable] { cursor: pointer; }
+.cx-item[data-selectable][aria-checked="true"] { border-color: var(--selected); background: var(--selected-soft); }
+.cx-radio { width: 18px; height: 18px; border-radius: 99px; border: 1.5px solid var(--input); flex: none; display: grid; place-items: center; transition: border-color .15s; }
+[aria-checked="true"] > .cx-radio { border-color: var(--selected); }
+[aria-checked="true"] > .cx-radio::after { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--selected); }
+
+.cx-sortable .cx-item { transition: transform 180ms cubic-bezier(.22, 1, .36, 1); background: var(--background); }
+.cx-sortable .cx-item.lifting { transition: none; z-index: 2; box-shadow: 0 8px 24px -8px rgb(0 0 0 / .25); position: relative; }
+
+/* ── Card de forma fija ── */
+.cx-fixed-card { width: 100%; max-width: 380px; }
+.cx-row3 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
+.cx-row3:first-child { border-top: 0; }
+.cx-row3 b { font-weight: 500; display: block; }
+.cx-row3 small { color: var(--muted-foreground); font-size: 13px; }
+.cx-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
+
+/* ── SwitchRow: the switch centred on the label's line, description below ── */
+.cx-switch-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border); width: 100%; max-width: 420px; }
+.cx-switch-row:first-child { border-top: 0; }
+.cx-switch-row .cn-label { line-height: 20px; }
+.cx-switch-row .cn-switch { margin-top: 1px; }
+.cx-switch-row p { grid-column: 1; margin: 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.45; }
+
+/* ── Tabs with a sliding indicator, counts and horizontal scroll on the phone ── */
+.cx-tabs { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: var(--radius); background: var(--muted); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+.cx-tabs::-webkit-scrollbar { display: none; }
+
+
+
+
+.cx-tab-ind { position: absolute; z-index: 0; top: 3px; height: 26px; border-radius: calc(var(--radius) * .8); background: var(--background); box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); transition: left 260ms cubic-bezier(.22, 1, .36, 1), width 260ms cubic-bezier(.22, 1, .36, 1); }
+.cx-tabs.line { background: transparent; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0; }
+
+.cx-tabs.line .cx-tab-ind { top: auto; bottom: -1px; height: 2px; border-radius: 2px; background: var(--selected); box-shadow: none; }
+.cx-panel { animation: cx-fade 180ms ease; }
+@keyframes cx-fade { from { opacity: 0; } }
+
+/* ── Booking picker: week strip + hours in one piece ── */
+.cx-book { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
+.cx-book-head { display: flex; align-items: center; justify-content: space-between; }
+.cx-book-head b { font-weight: 600; }
+.cx-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
+
+
+
+
+
+
+
+
+
+
+.cx-hours { display: flex; flex-direction: column; gap: 10px; min-height: 172px; }
+.cx-hours h4 { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
+.cx-hour-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
+
+
+
+.cx-hour-skel { height: 34px; border-radius: calc(var(--radius) * .8); background: var(--muted); animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
+@keyframes pulse { 50% { opacity: .5; } }
+.cx-book-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; min-height: 44px; }
+.cx-book-sum span { color: var(--muted-foreground); }
+.cx-book-sum b { color: var(--foreground); font-weight: 600; }
+
+/* ── Modal adaptable: Dialog en escritorio, Drawer en el teléfono (o forzado con data-mode) ── */
+.cx-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay); backdrop-filter: blur(4px); opacity: 0; transition: opacity 160ms ease; }
+.cx-overlay[data-state="open"] { opacity: 1; }
+.cx-modal { position: fixed; z-index: var(--z-modal); display: flex; flex-direction: column; background: var(--popover); color: var(--popover-foreground); box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 20px 25px -5px rgb(0 0 0 / .1); outline: none; font-size: 14px;
+  --sheet-space: 16px; --sheet-tight: 8px; }
+.cx-modal-head { display: flex; flex-direction: column; gap: 4px; padding: 16px 48px 12px 16px; }
+.cx-modal-head b { font-size: 16px; font-weight: 600; }
+.cx-modal-head span { color: var(--muted-foreground); }
+.cx-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: var(--sheet-space); overscroll-behavior: contain; }
+.cx-modal-foot { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 50%, transparent); }
+.cx-modal-foot { align-items: center; }
+.cx-modal-foot .cn-button { height: 36px; }
+.cx-modal-foot .cx-exit { flex: none; min-width: 6.5rem; }
+.cx-modal-foot .cx-go { flex: 1 1 0; min-width: 0; }
+.cx-modal-foot .cx-foot-note { margin-left: auto; font-size: 13px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+.cx-modal-x { position: absolute; top: 10px; right: 10px; }
+.cx-handle { display: none; width: 96px; height: 4px; margin: 10px auto 0; border-radius: 99px; background: var(--muted); flex: none; }
+/* escritorio = Dialog */
+.cx-modal[data-mode="dialog"] { top: 50%; left: 50%; width: min(28rem, calc(100% - 2rem)); max-height: min(36rem, calc(100dvh - 4rem)); border-radius: calc(var(--radius) * 1.4); overflow: hidden;
+  transform: translate(-50%, -50%) scale(.95); opacity: 0; transition: transform 160ms cubic-bezier(.22, 1, .36, 1), opacity 160ms ease; }
+.cx-modal[data-mode="dialog"][data-state="open"] { transform: translate(-50%, -50%); opacity: 1; }
+/* teléfono = Drawer desde abajo, arrastrable */
+.cx-modal[data-mode="drawer"] { left: 0; right: 0; bottom: 0; margin-inline: auto; width: min(100%, 34rem); max-height: calc(100dvh - 3rem); border-radius: calc(var(--radius) * 1.8) calc(var(--radius) * 1.8) 0 0; overflow: hidden;
+  transform: translateY(100%); transition: transform 450ms cubic-bezier(.32, .72, 0, 1); touch-action: none; }
+.cx-modal[data-mode="drawer"][data-state="open"] { transform: translateY(0); }
+.cx-modal[data-mode="drawer"] .cx-handle { display: block; }
+.cx-modal[data-mode="drawer"] .cx-modal-body { touch-action: pan-y; }
+.cx-modal.dragging, .cx-overlay.dragging { transition: none !important; }
+.cx-modal-list { display: flex; flex-direction: column; }
+.cx-more { align-self: center; }
+
+/* ── Capas: el botón flotante vive debajo de hojas y modales ── */
+.cx-fab { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-fab); display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 99px; border: 0; background: var(--primary); color: var(--primary-foreground); font: 500 14px var(--font-sans); box-shadow: 0 10px 25px -8px rgb(0 0 0 / .35); cursor: pointer; }
+.cx-zscale { display: grid; gap: 6px; width: 100%; max-width: 420px; }
+.cx-z { display: grid; grid-template-columns: 110px 1fr 36px; gap: 10px; align-items: center; font-size: 13px; }
+.cx-z code { font: 12px var(--font-mono); color: var(--muted-foreground); }
+.cx-z i { height: 8px; border-radius: 99px; background: var(--selected); opacity: .25; }
+.cx-z b { font: 600 12px var(--font-mono); text-align: right; }
+
+/* ── token swatches ── */
+.cx-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; width: 100%; }
+.cx-sw { display: flex; align-items: center; gap: 8px; white-space: nowrap; font: 12px var(--font-mono); color: var(--muted-foreground); }
+.cx-sw i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 15%, transparent); flex: none; }
+
+/* ── 44 px touch target without changing the drawn size ── */
+@media (pointer: coarse) { .cn-button { position: relative; } .cn-button::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); } }
+
+/* ── page scaffolding for this preview (not part of the library) ── */
+.cx-lib { display: flex; flex-direction: column; gap: 18px; }
+.cx-lib[data-skin="tienda"] { background: var(--background); border-radius: 22px; padding: 8px 14px 28px; margin-inline: -14px; }
+.cx-skin-label { font-size: 12px; color: var(--muted-foreground); }
+.cx-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.cx-skinbox { padding: 20px; border-right: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); }
+.cx-skinbox:last-child { border-right: 0; }
+.cx-tri-in { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
+.cx-tri-name { font: 500 11px var(--font-mono); color: var(--muted-foreground); }
+.cx-note { margin: 0; font-size: 12px; color: var(--muted-foreground); text-align: center; min-height: 1.4em; }
+.cx-cols { display: flex; flex-wrap: wrap; gap: 24px; width: 100%; justify-content: center; align-items: flex-start; }
+.cx-col { flex: 1 1 260px; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
+.cx-col-h { font: 500 11px var(--font-mono); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .05em; }
+.cx-radiogroup, .cx-sortable { display: flex; flex-direction: column; gap: 8px; }
+.cx-radiogroup [role="radio"]:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; }
+.cx-empty-mini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted-foreground); font-size: 13px; height: 168px; }
+.cx-empty-mini svg { width: 22px; height: 22px; color: var(--success); }
+.cx-fixed-card .cn-card-content { min-height: 168px; }
+.cx-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.cx-lane { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; min-height: 140px; }
+.cx-lane-empty { color: var(--muted-foreground); font-size: 13px; text-align: center; padding: 40px 0; }
+.cx-hours-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--muted-foreground); font-size: 13px; height: 172px; }
+.cx-hours-empty svg { width: 22px; height: 22px; }
+.cx-list-tools { display: flex; flex-direction: column; gap: 10px; position: sticky; top: -4px; background: var(--popover); padding: 4px 0 8px; z-index: 1; }
+.cx-list-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
+.cx-list-row b { font-weight: 500; display: block; }
+.cx-list-row small { color: var(--muted-foreground); font-size: 13px; }
+.cx-list-skel { height: 52px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
+.cx-list-skel i { display: block; height: 12px; border-radius: 6px; background: var(--muted); animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
+@media (max-width: 760px) {
+  .cx-tri { grid-template-columns: 1fr; }
+  .cx-skinbox { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); }
+  .cx-skinbox:last-child { border-bottom: 0; }
+  .pg-top-in .pg-legend { margin-left: 0; }
+  .cx-lib[data-skin="tienda"] { margin-inline: -8px; padding-inline: 8px; }
+}
+@media (max-width: 420px) { .cx-2col { grid-template-columns: 1fr; } .cx-hour-grid { grid-template-columns: repeat(3, 1fr); } }
+.cx-lib .pg-live::before { content: none; }
+.cx-lib .pg-live { padding-top: 32px; }
+
+
+/* the page keeps its width when a modal locks the scroll: the scrollbar's lane stays reserved */
+html { scrollbar-gutter: stable; }
+html.cx-locked { overflow: hidden; }
+/* a list modal has a fixed height: loading, filtering or paging never resizes it */
+.cx-modal[data-size="tall"][data-mode="dialog"] { height: min(36rem, calc(100dvh - 4rem)); }
+.cx-modal[data-size="tall"][data-mode="drawer"] { height: calc(100dvh - 3rem); }
+
+/* ═════ tanda 2 ═════ */
+.style-nova, [data-skin] { --qr-ink: oklch(0.16 0 0); --qr-paper: #fff; }
+[data-skin="tienda"] { --qr-ink: #0F2C24; --qr-paper: #F3EEE2; }
+
+/* ── Avatar: initials take a stable hue per name, mixed into the skin's own surface ── */
+.cx-av .cn-avatar-fallback { background: color-mix(in srgb, oklch(0.62 0.13 var(--h)) 22%, var(--background)); color: color-mix(in srgb, oklch(0.55 0.14 var(--h)) 50%, var(--foreground)); font-weight: 600; }
+.cx-av[data-size="sm"] .cn-avatar-fallback { font-size: 10px; }
+.cx-av[data-size="lg"] .cn-avatar-fallback { font-size: 15px; }
+.cx-av-wrap { display: inline-flex; border-radius: 99px; }
+.cx-av-wrap:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.cn-avatar-group .cx-av-wrap > .cn-avatar, .cn-avatar-group .cn-avatar-group-count { box-shadow: 0 0 0 2px var(--background); }
+.cx-who { display: flex; align-items: center; gap: 10px; font-size: 14px; }
+.cx-who b { display: block; font-weight: 500; }
+.cx-who small { color: var(--muted-foreground); font-size: 13px; }
+.cx-online { background: var(--success) !important; box-shadow: 0 0 0 2px var(--background); }
+.cx-tip { position: fixed; z-index: var(--z-toast); padding: 6px 10px; border-radius: calc(var(--radius) * .8); background: var(--foreground); color: var(--background); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 150ms ease, transform 150ms ease; }
+.cx-tip[data-state="open"] { opacity: 1; transform: none; }
+
+/* ── Fields ── */
+.cx-form { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 380px; }
+.cx-num { font-variant-numeric: tabular-nums; }
+.cx-clear { opacity: 1; transition: opacity 120ms ease; }
+.cx-clear[hidden] { display: inline-flex !important; opacity: 0; pointer-events: none; }
+.cx-count-line { display: flex; justify-content: space-between; gap: 12px; }
+.cx-count-line span:last-child { font-variant-numeric: tabular-nums; flex: none; }
+.cx-count-line[data-near] span:last-child { color: var(--warning); }
+.cx-msg { min-height: 1.45em; }
+.cn-field[data-invalid] .cx-msg { color: var(--destructive); }
+.cn-input[aria-invalid="true"] { border-color: var(--destructive); }
+.cn-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent); }
+
+/* ── Combobox list: under the field, its width, Nova's popover look ── */
+.cx-combo-list { max-height: 248px; overflow-y: auto; padding: 4px; border-radius: calc(var(--radius) * 1); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); font-size: 14px; overscroll-behavior: contain;
+  opacity: 0; transform: scale(.96); transition: opacity 100ms ease, transform 100ms ease !important; transition-property: opacity, transform !important; }
+.cx-combo-list[data-state="open"] { opacity: 1; transform: none; }
+.cx-opt { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: calc(var(--radius) * .6); cursor: default; user-select: none; }
+.cx-opt[data-hl] { background: var(--accent); color: var(--accent-foreground); }
+.cx-opt mark { background: none; color: inherit; font-weight: 600; }
+.cx-opt small { margin-left: auto; color: var(--muted-foreground); font-size: 12px; }
+.cx-opt .cx-tick { margin-left: auto; width: 16px; height: 16px; color: var(--selected); }
+.cx-opt-new { color: var(--muted-foreground); border-top: 1px solid var(--border); border-radius: 0 0 calc(var(--radius) * .6) calc(var(--radius) * .6); margin-top: 4px; }
+.cx-opt-new b { color: var(--foreground); font-weight: 600; }
+
+/* ── Alert tones (Nova's alert, colour from tokens) ── */
+.cx-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; width: 100%; max-width: 820px; margin: 0 auto; }
+.cx-alerts .cn-alert { align-content: start; }
+.cx-al-row { grid-column: 2; margin-top: 8px; display: flex; gap: 8px; }
+.cx-al-info > svg { color: var(--info); }
+.cx-al-ok > svg { color: var(--success); }
+.cx-al-wait > svg { color: var(--warning); }
+.cx-al-wait { background: color-mix(in srgb, var(--warning) 6%, var(--card)); }
+
+/* ── a tiny app screen for Band and Island (iPhone-like corners) ── */
+.cx-screens { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
+.cx-screen-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.cx-screen { position: relative; width: 300px; max-width: 100%; height: 250px; border-radius: 34px; overflow: hidden; background: var(--background); box-shadow: 0 0 0 1px var(--border), 0 0 0 7px color-mix(in srgb, var(--foreground) 8%, var(--background)); display: flex; flex-direction: column; }
+.cx-appbar { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 18px; margin-top: 30px; border-bottom: 1px solid var(--border); font-size: 15px; flex: none; }
+.cx-appbar-dot { width: 26px; height: 26px; border-radius: 99px; background: var(--muted); }
+.cx-fake { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }
+.cx-fake i { display: block; height: 34px; border-radius: calc(var(--radius) * .8); background: var(--muted); }
+.cx-fake i:nth-child(2n) { width: 80%; }
+/* Band: grows its own height in, pushes content (never covers it), one at a time */
+.cx-band-slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms cubic-bezier(.22, 1, .36, 1); flex: none; }
+.cx-band-slot[data-open] { grid-template-rows: 1fr; }
+.cx-band-slot > div { overflow: hidden; min-height: 0; }
+.cx-band { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 18px; font-size: 13px; line-height: 1.35; border-bottom: 1px solid var(--border); }
+.cx-band svg { width: 16px; height: 16px; flex: none; }
+.cx-band span { flex: 1; }
+.cx-band[data-tone="warn"] { background: color-mix(in srgb, var(--warning) 14%, var(--background)); }
+.cx-band[data-tone="warn"] svg { color: var(--warning); }
+.cx-band[data-tone="muted"] { background: var(--muted); }
+.cx-band .cn-button { flex: none; }
+.cx-band-in { animation: cx-fade 200ms ease; }
+/* exit: the text fades before the slot folds, so nothing is clipped mid-way */
+.cx-band-slot > div > .cx-band { transition: opacity 140ms ease; }
+.cx-band-slot:not([data-open]) > div > .cx-band { opacity: 0; }
+/* Island: one pill that changes shape and text in place */
+.cx-island { position: absolute; top: 10px; left: 50%; z-index: 3; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 99px; background: oklch(0.16 0 0); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden;
+  transform: translateX(-50%); transition: width 380ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1); }
+.cx-island[data-state="hidden"] { opacity: 0; transform: translateX(-50%) scale(.7); }
+.cx-island-icon { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
+.cx-island-icon svg { width: 16px; height: 16px; }
+.cx-island[data-tone="done"] .cx-island-icon { color: oklch(0.8 0.17 150); }
+.cx-island[data-tone="error"] .cx-island-icon { color: oklch(0.72 0.19 25); }
+.cx-island[data-tone="error"] { animation: cx-shake 320ms ease; }
+.cx-island-text { transition: opacity 140ms ease; }
+.cx-island-text.swap { opacity: 0; }
+@keyframes cx-shake { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
+
+/* ── Accordion chevron rotates ── */
+.cx-acc-chev { margin-left: auto; width: 16px; height: 16px; flex: none; color: var(--muted-foreground); transition: transform 200ms ease; pointer-events: none; }
+[aria-expanded="true"] > .cx-acc-chev { transform: rotate(180deg); }
+
+/* ── QR ── */
+.cx-qr-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
+.cx-qr { width: 176px; height: 176px; padding: 12px; border-radius: calc(var(--radius) * 1.4); background: var(--qr-paper); box-shadow: 0 0 0 1px var(--border); position: relative; }
+.cx-qr svg { width: 100%; height: 100%; display: block; }
+.cx-qr-mark { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 10px; background: var(--qr-paper); display: grid; place-items: center; }
+.cx-qr-mark span { width: 30px; height: 30px; border-radius: 8px; background: var(--qr-ink); color: var(--qr-paper); font: 700 12px var(--font-sans); display: grid; place-items: center; }
+.cx-qr-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14px; }
+.cx-qr-side b { font-size: 16px; font-weight: 600; }
+.cx-qr-url { font: 13px var(--font-mono); color: var(--muted-foreground); user-select: all; margin-bottom: 8px; }
+.cx-copy { min-width: 9.5rem; justify-content: center; }
+.cx-copy[data-done] { color: var(--success); }
+
+/* ── thin themed scrollbar for every scrolling list or sheet ── */
+.cx-combo-list, .cx-modal-body, .cx-scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--foreground) 22%, transparent) transparent; }
+.cx-combo-list::-webkit-scrollbar, .cx-modal-body::-webkit-scrollbar, .cx-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
+.cx-combo-list::-webkit-scrollbar-thumb, .cx-modal-body::-webkit-scrollbar-thumb, .cx-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--foreground) 22%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
+.cx-combo-list::-webkit-scrollbar-thumb:hover, .cx-modal-body::-webkit-scrollbar-thumb:hover, .cx-scroll::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--foreground) 40%, transparent); }
+.cx-combo-list::-webkit-scrollbar-track, .cx-modal-body::-webkit-scrollbar-track, .cx-scroll::-webkit-scrollbar-track { background: transparent; }
+.cx-combo-list::-webkit-scrollbar-button, .cx-modal-body::-webkit-scrollbar-button, .cx-scroll::-webkit-scrollbar-button { display: none; height: 0; }
+
+/* ═════ tanda 3 ═════ */
+/* ── Slider / range: value beside the label, tokens instead of Nova's fixed white thumb ── */
+.cx-sl-field { display: flex; flex-direction: column; gap: 10px; }
+.cx-sl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.cx-sl-val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.cx-slider { position: relative; width: 100%; height: 16px; display: flex; align-items: center; touch-action: none; cursor: pointer; user-select: none; }
+.cx-slider .cn-slider-track { width: 100%; }
+.cx-slider .cn-slider-range { position: absolute; top: 0; bottom: 0; background: var(--selected); }
+.cx-slider .cn-slider-thumb { position: absolute; top: 50%; margin-top: -6px; background: var(--background); border-color: var(--selected); cursor: grab; }
+.cx-slider .cn-slider-thumb:focus-visible, .cx-slider .cn-slider-thumb[data-drag] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--selected) 25%, transparent); }
+.cx-slider .cn-slider-thumb[data-drag] { cursor: grabbing; }
+.cx-sl-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+
+/* ── OTP: one real input under six painted slots ── */
+.cx-otp { position: relative; }
+.cx-otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; color: transparent; caret-color: transparent; background: transparent; z-index: 1; cursor: text; letter-spacing: 2em; }
+.cx-otp .cn-input-otp-slot { position: relative; display: grid; place-items: center; width: 40px; height: 44px; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; background: var(--background); }
+.cx-otp .cn-input-otp-slot[data-active="true"] { border-color: var(--selected); box-shadow: 0 0 0 3px color-mix(in srgb, var(--selected) 22%, transparent); z-index: 1; }
+.cx-otp .cx-caret { width: 1px; height: 18px; background: var(--foreground); animation: cx-blink 1s steps(1) infinite; }
+@keyframes cx-blink { 50% { opacity: 0; } }
+.cx-otp-sep { display: grid; place-items: center; width: 20px; }
+.cx-otp-sep span { width: 8px; height: 2px; border-radius: 2px; background: var(--muted-foreground); }
+.cx-otp .cn-input-otp { display: flex; align-items: center; }
+.cx-otp[data-state="bad"] .cn-input-otp-slot { border-color: var(--destructive); }
+.cx-otp[data-state="bad"] { animation: cx-shake 320ms ease; }
+.cx-otp[data-state="ok"] .cn-input-otp-slot { border-color: var(--success); color: var(--success); }
+#otp-msg[data-tone="bad"] { color: var(--destructive); }
+#otp-msg[data-tone="ok"] { color: var(--success); }
+
+/* ── Color picker ── */
+.cx-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
+.cx-sw-btn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 99px; border: 0; padding: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); transition: transform 120ms ease; }
+.cx-sw-btn:hover { transform: scale(1.08); }
+.cx-sw-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.cx-sw-btn[aria-checked="true"]::after { content: ""; position: absolute; inset: -4px; border-radius: 99px; box-shadow: 0 0 0 2px var(--foreground); }
+.cx-sw-btn svg { width: 16px; height: 16px; color: var(--on, #fff); opacity: 0; }
+.cx-sw-btn[aria-checked="true"] svg { opacity: 1; }
+.cx-sw-other { background: conic-gradient(from 0deg, #f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); display: grid; place-items: center; }
+.cx-sw-other svg { opacity: 1; color: #fff; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .4)); }
+.cx-store-prev { gap: 14px; padding: 18px; border-radius: calc(var(--radius) * 1.6); background: var(--card); box-shadow: 0 0 0 1px var(--border); max-width: 320px; flex-basis: 300px; }
+.cx-sp-head { display: flex; align-items: center; gap: 12px; font-size: 14px; }
+.cx-sp-head b { display: block; font-weight: 600; }
+.cx-sp-head small { color: var(--muted-foreground); font-size: 13px; }
+.cx-sp-logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: var(--primary-foreground); font-weight: 700; font-size: 14px; transition: background-color 200ms ease, color 200ms ease; }
+.cx-store-prev .cn-button { transition: background-color 200ms ease, color 200ms ease; }
+.cx-picker { width: 248px; padding: 12px; border-radius: calc(var(--radius) * 1.2); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); display: flex; flex-direction: column; gap: 12px;
+  opacity: 0; transform: scale(.96); transition: opacity 120ms ease, transform 120ms ease !important; transition-property: opacity, transform !important; }
+.cx-picker[data-state="open"] { opacity: 1; transform: none; }
+.cx-sv { position: relative; height: 150px; border-radius: calc(var(--radius) * .8); background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--pk-h, 260) 100% 50%)); cursor: crosshair; touch-action: none; }
+.cx-sv-dot, .cx-hue-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 99px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(0 0 0 / .3); pointer-events: none; }
+.cx-hue { position: relative; height: 12px; border-radius: 99px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; touch-action: none; }
+.cx-hue-dot { top: 50%; background: hsl(var(--pk-h, 260) 100% 50%); }
+.cx-sv:focus-visible, .cx-hue:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.cx-pk-row { display: flex; align-items: center; gap: 8px; }
+.cx-pk-chip { width: 32px; height: 32px; border-radius: calc(var(--radius) * .8); flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
+.cx-pk-warn { margin: 0; font-size: 12px; color: var(--warning); min-height: 1.4em; line-height: 1.4; }
+
+/* ── Tag input ── */
+.cx-taginput { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 32px; padding: 4px 6px; border: 1px solid var(--input); border-radius: calc(var(--radius) * 0.8); background: transparent; cursor: text; transition: border-color .15s, box-shadow .15s; }
+.cx-taginput:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
+
+
+
+@keyframes cx-flash { 30% { background: var(--selected); color: var(--selected-foreground); } }
+.cx-tag-field { flex: 1 1 120px; min-width: 120px; height: 22px; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; padding: 0 4px; }
+.cx-suggest { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted-foreground); }
+
+
+
+
+/* ── Pagination ── */
+.cx-pages-wrap { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
+.cx-pg-list { display: flex; flex-direction: column; }
+.cx-pg-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; height: 44px; border-top: 1px solid var(--border); font-size: 14px; }
+.cx-pg-row:first-child { border-top: 0; }
+.cx-pg-row small { color: var(--muted-foreground); margin-left: 8px; }
+.cx-pg-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
+.cx-pg-row i { display: block; height: 12px; border-radius: 6px; background: var(--muted); animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
+.cx-pg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted-foreground); }
+.cx-pagination { margin: 0; width: auto; }
+.cx-pagination .cn-button[aria-current="page"] { pointer-events: none; }
+.cx-pg-compact { display: none; font-size: 13px; color: var(--foreground); padding: 0 6px; font-variant-numeric: tabular-nums; }
+@media (max-width: 520px) { .cx-pagination .cx-pg-num { display: none; } .cx-pg-compact { display: inline; } .cx-pagination .cn-pagination-previous span, .cx-pagination .cn-pagination-next span { display: none; } }
+
+/* ── Carousel ── */
+.cx-car { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
+.cx-car-track { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; padding-bottom: 10px; border-radius: calc(var(--radius) * 1.2); }
+.cx-car-track:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
+.cx-card-p { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
+.cx-card-p .cx-ph { aspect-ratio: 1; border-radius: calc(var(--radius) * 1.2); background: var(--g); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
+.cx-card-p b { font-weight: 500; }
+.cx-card-p span { color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-size: 13px; }
+.cx-car-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.cx-car-dots { display: flex; gap: 6px; }
+
+
+
+
+
+/* ── Phone ── */
+.cx-cc { gap: 4px; padding: 0 6px; font-variant-numeric: tabular-nums; }
+.cx-cc svg { width: 12px !important; height: 12px !important; opacity: .6; }
+.cx-phone .cn-input-group-input { padding-left: 4px; }
+#ph-f[data-invalid] .cx-msg { color: var(--destructive); }
+.cx-cc-item { display: flex; gap: 8px; }
+.cx-cc-item small { margin-left: auto; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+
+/* ═════ arreglos tanda 3 ═════ */
+/* code picker (country, currency, …): search on top, list below */
+.cx-cpick { padding: 0; border-radius: var(--radius); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); overflow: hidden;
+  opacity: 0; transform: scale(.97); transition: opacity 110ms ease, transform 110ms ease !important; transition-property: opacity, transform !important; }
+.cx-cpick[data-state="open"] { opacity: 1; transform: none; }
+.cx-cpick-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-bottom: 1px solid var(--border); }
+.cx-cpick-search svg { width: 14px; height: 14px; color: var(--muted-foreground); flex: none; }
+.cx-cpick-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; }
+.cx-cpick-list { box-shadow: none !important; border-radius: 0; max-height: 232px; opacity: 1 !important; transform: none !important; }
+.cx-opt-code { min-width: 30px; font: 600 12px var(--font-mono); color: var(--muted-foreground); }
+.cx-opt[aria-selected="true"] .cx-opt-code { color: var(--selected); }
+/* the trigger never changes width between countries / currencies */
+.cx-cc { min-width: 4.75rem; justify-content: space-between; }
+#mf-cur.cx-cc { min-width: 3.75rem; }
+.cx-cc-code { font: 600 12px var(--font-mono); }
+.cx-cc-dial { min-width: 2.6em; text-align: left; }
+/* tags: chips come in and go out, the box eases its height (JS) */
+
+@keyframes cx-chip-in { from { opacity: 0; transform: scale(.85); } }
+.cx-taginput { overflow: hidden; }
+/* pagination: stacked, centred, steady */
+.cx-pg-foot { flex-direction: column; justify-content: center; gap: 8px; }
+.cx-pagination .cn-pagination-content { justify-content: center; }
+.cx-pagination .cx-pg-num .cn-button, .cx-pg-gap { width: 32px; }
+.cx-pg-gap { display: flex; justify-content: center; }
+.cx-pg-list { transition: opacity 160ms ease; }
+.cx-pg-list[data-loading] { opacity: .45; }
+.cx-pg-empty { border-top-color: transparent; }
+/* virtual list */
+.cx-vlist { height: 364px; overflow-y: auto; border-radius: calc(var(--radius) * 1.2); box-shadow: 0 0 0 1px var(--border); overscroll-behavior: contain; }
+.cx-vlist:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.cx-vspace { position: relative; }
+.cx-vwin { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
+.cx-vrow { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--border); font-size: 14px; box-sizing: border-box; }
+.cx-vrow small { color: var(--muted-foreground); margin-left: 8px; font-size: 12px; }
+.cx-vrow b { font-weight: 600; font-variant-numeric: tabular-nums; }
+.cx-vn { color: var(--muted-foreground); font-size: 12px; }
+/* carousel: no visible scrollbar (swipe, wheel, arrows and dots move it) */
+.cx-car-track { scrollbar-width: none; padding-bottom: 0; }
+.cx-car-track::-webkit-scrollbar { display: none; }
+
+/* carousel: a whole number of cards per view, so no card is ever cut */
+.cx-car-track { grid-auto-columns: calc((100% - 36px) / 4); }
+@media (max-width: 760px) { .cx-car-track { grid-auto-columns: calc((100% - 12px) / 2); } }
+
+/* ═════ tanda 4 ═════ */
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.cx-check { width: 16px; }
+
+/* ── DataTable: a table while its box is wide, a list of Items when the box is narrow ── */
+.cx-dt-host { container-type: inline-size; width: 100%; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; transition: max-width 320ms cubic-bezier(.22, 1, .36, 1); }
+.cx-dt-host[data-narrow] { max-width: 380px; }
+.cx-dt-bulk { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms cubic-bezier(.22, 1, .36, 1); }
+.cx-dt-bulk[data-open] { grid-template-rows: 1fr; }
+.cx-dt-bulk > div { overflow: hidden; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; }
+.cx-dt-bulk[data-open] > div { padding: 0 4px 10px; }
+.cx-dt-scroll { max-height: 380px; overflow: auto; border-radius: calc(var(--radius) * 1.2); box-shadow: 0 0 0 1px var(--border); }
+.cx-dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
+.cx-dt th { position: sticky; top: 0; z-index: 1; background: var(--muted); text-align: left; font-weight: 500; color: var(--muted-foreground); height: 40px; padding: 0 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
+.cx-dt td { height: 52px; padding: 0 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+.cx-dt tbody tr:last-child td { border-bottom: 0; }
+.cx-dt tbody tr { transition: background-color 120ms; }
+.cx-dt tbody tr:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
+.cx-dt tbody tr[data-selected] { background: var(--selected-soft); }
+.cx-dt .cx-dt-check { width: 40px; padding-right: 0; }
+.cx-dt .cx-dt-num { text-align: right; }
+.cx-dt td.cx-dt-num { font-variant-numeric: tabular-nums; font-weight: 600; }
+.cx-dt .cx-dt-act { width: 44px; padding: 0 6px; }
+
+
+
+
+
+
+.cx-dt-who b { display: block; font-weight: 500; }
+.cx-dt-who small { color: var(--muted-foreground); font-size: 12px; }
+.cx-dt-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
+@container (max-width: 560px) {
+  .cx-dt thead { display: none; }
+  .cx-dt, .cx-dt tbody { display: block; }
+  .cx-dt tbody tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "c who amt" "c meta st"; gap: 2px 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--border); }
+  .cx-dt td { display: block; height: auto; padding: 0; border: 0; }
+  .cx-dt td.cx-dt-check { grid-area: c; align-self: center; width: auto; }
+  .cx-dt td.cx-dt-who { grid-area: who; }
+  .cx-dt td.cx-dt-svc { grid-area: meta; color: var(--muted-foreground); font-size: 13px; }
+  .cx-dt td.cx-dt-when { display: none; }
+  .cx-dt td.cx-dt-st { grid-area: st; justify-self: end; }
+  .cx-dt td.cx-dt-num { grid-area: amt; }
+  .cx-dt td.cx-dt-act { display: none; }
+  .cx-dt-who small { display: none; }
+  .cx-dt td.cx-dt-svc::after { content: " · " attr(data-when); }
+}
+
+/* ── Board ── */
+.cx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); max-width: 1120px !important; gap: 12px; width: 100%; max-width: 920px; margin: 0 auto; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
+.cx-blane { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: calc(var(--radius) * 1.4); background: var(--muted); min-height: 300px; }
+.cx-lane-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; font-size: 13px; font-weight: 600; }
+.cx-lane-h .cx-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--background); font-size: 11px; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
+.cx-lane-list { display: flex; flex-direction: column; gap: 8px; flex: 1; border-radius: calc(var(--radius) * .9); transition: background-color 150ms; }
+.cx-blane[data-over] .cx-lane-list { background: color-mix(in srgb, var(--selected) 8%, transparent); }
+
+
+
+
+
+
+
+.cx-bph { border-radius: var(--radius); border: 1.5px dashed color-mix(in srgb, var(--selected) 55%, transparent); background: var(--selected-soft); flex: none; }
+.cx-lane-empty-b { padding: 18px 8px; text-align: center; color: var(--muted-foreground); font-size: 12px; }
+
+/* ── Picker field + wheels ── */
+
+
+
+
+.cx-wheels { position: relative; display: flex; gap: 4px; height: 220px; user-select: none; }
+.cx-wheels::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; margin-top: -20px; border-radius: calc(var(--radius) * .9); background: var(--muted); pointer-events: none; }
+.cx-wheel { position: relative; flex: 1; overflow-y: auto; touch-action: none; cursor: grab; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 90px 0; outline: none; border-radius: calc(var(--radius) * .9);
+  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
+.cx-wheel::-webkit-scrollbar { display: none; }
+.cx-wheel:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); }
+.cx-wheel-it { height: 40px; display: grid; place-items: center; scroll-snap-align: center; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--muted-foreground); cursor: pointer; transition: color 120ms; white-space: nowrap; }
+.cx-wheel-it[data-on] { color: var(--foreground); font-weight: 600; }
+.cx-wheel-it[data-off] { opacity: .35; }
+.cx-wheel[data-flex="2"] { flex: 2; }
+.cx-wheel-sum { text-align: center; font-size: 14px; font-weight: 500; min-height: 1.4em; }
+
+/* ── Upload ── */
+.cx-drop { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: calc(var(--radius) * 1.6); border: 1.5px dashed var(--input); background: color-mix(in srgb, var(--muted) 50%, transparent); display: grid; place-items: center; cursor: pointer; overflow: hidden; transition: border-color 150ms, background-color 150ms; }
+.cx-drop:hover, .cx-drop[data-over] { border-color: var(--selected); background: var(--selected-soft); }
+.cx-drop:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.cx-drop[data-has] { border-style: solid; border-color: var(--border); cursor: default; }
+.cx-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; color: var(--muted-foreground); padding: 16px; }
+.cx-drop-empty svg { width: 22px; height: 22px; margin-bottom: 4px; }
+.cx-drop-empty b { color: var(--foreground); font-size: 14px; font-weight: 500; }
+.cx-drop[data-has] .cx-drop-empty { display: none; }
+.cx-drop-img { position: absolute; inset: 0; width: 100%; height: 100%; animation: cx-fade 260ms ease; }
+.cx-drop-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px; border-radius: 99px; background: rgb(255 255 255 / .55); overflow: hidden; backdrop-filter: blur(4px); }
+.cx-drop-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--selected); transition: width 160ms linear; }
+#drop-msg[data-tone="bad"] { color: var(--destructive); }
+#drop-msg[data-tone="ok"] { color: var(--success); }
+
+/* ── Phone shell: header that shrinks, three fixed tabs ── */
+.cx-phone-frame { width: 320px; max-width: 100%; height: 600px; border-radius: 46px; padding: 9px; background: color-mix(in srgb, var(--foreground) 88%, var(--background)); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45); }
+.cx-ph-screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--background); display: flex; flex-direction: column; }
+.cx-ph-status { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 24px; font-size: 13px; font-weight: 600; flex: none; }
+.cx-ph-island { width: 96px; height: 28px; border-radius: 99px; background: #000; }
+.cx-ph-head { flex: none; background: color-mix(in srgb, var(--background) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 160ms; z-index: 2; }
+.cx-ph-head[data-compact] { border-bottom-color: var(--border); }
+.cx-ph-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 44px; padding: 0 6px; }
+.cx-ph-small { text-align: center; font-size: 15px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 160ms, transform 160ms; }
+.cx-ph-head[data-compact] .cx-ph-small { opacity: 1; transform: none; }
+.cx-ph-big { margin: 0; padding: 0 18px 10px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; transform-origin: left center; }
+.cx-ph-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
+.cx-ph-nav { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 8px calc(6px + 18px); border-top: 1px solid var(--border); background: var(--background); }
+
+
+
+
+
+.cx-ph-ico { position: relative; display: grid; }
+.cx-ph-badge { position: absolute; top: -5px; left: 15px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--destructive); color: var(--on-destructive); font: 600 10px/16px var(--font-sans); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--background); }
+.cx-ph-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--card); box-shadow: 0 0 0 1px var(--border); font-size: 13px; }
+.cx-ph-row b { font-weight: 600; }
+.cx-ph-row small { display: block; color: var(--muted-foreground); }
+.cx-ph-row .cx-time { margin-left: auto; }
+.cx-ph-sec { font-size: 12px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .05em; margin: 8px 2px 0; }
+
+/* ── Share ── */
+.cx-share { width: 328px; padding: 14px; border-radius: calc(var(--radius) * 1.4); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 10px 15px -3px rgb(0 0 0 / .1); display: flex; flex-direction: column; gap: 12px;
+  opacity: 0; transform: scale(.97); transition: opacity 120ms ease, transform 120ms ease !important; transition-property: opacity, transform !important; }
+.cx-share[data-state="open"] { opacity: 1; transform: none; }
+.cx-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
+.cx-share-it { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: var(--radius); border: 0; background: transparent; color: var(--foreground); font: 500 11px var(--font-sans); cursor: pointer; text-decoration: none; }
+.cx-share-it:hover { background: var(--accent); }
+.cx-share-it:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
+.cx-share-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand, var(--muted)); color: #fff; }
+.cx-share-ico svg { width: 22px; height: 22px; }
+.cx-share-ico.plain { background: var(--muted); color: var(--foreground); }
+.cx-share-link { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border-radius: var(--radius); background: var(--muted); font: 13px var(--font-mono); }
+.cx-share-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
+
+.cx-wheel:active { cursor: grabbing; }
+
+/* ── Share sheet (Storio's, on tokens) ── */
+.cx-modal-head span:empty { display: none; }
+.cx-modal-foot:empty { display: none; }
+.cx-sh { display: flex; flex-direction: column; gap: 16px; }
+.cx-sh-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 16px; border-radius: calc(var(--radius) * 2); background: var(--primary); color: var(--primary-foreground); }
+.cx-sh-av { width: 72px; height: 72px; border-radius: 99px; display: grid; place-items: center; margin-bottom: 4px; background: color-mix(in srgb, var(--primary-foreground) 14%, var(--primary)); font-weight: 700; font-size: 22px; }
+.cx-sh-card b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
+.cx-sh-card > span:last-child { font-size: 13px; opacity: .78; }
+.cx-sh-prod { position: relative; height: 15rem; border-radius: calc(var(--radius) * 2); overflow: hidden; background: var(--g); color: #fff; }
+.cx-sh-prod::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .74), rgb(0 0 0 / .16) 42%, transparent 66%); }
+.cx-sh-tag { position: absolute; top: 11px; right: 11px; padding: 3px 10px; border-radius: 10px; background: #fff; color: #101014; font-weight: 800; font-size: 17px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; box-shadow: 0 6px 18px rgb(0 0 0 / .35); }
+.cx-sh-pinfo { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 17px 18px; display: flex; flex-direction: column; gap: 2px; }
+.cx-sh-pinfo b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; text-shadow: 0 2px 12px rgb(0 0 0 / .45); }
+.cx-sh-pinfo span { font-size: 14px; font-weight: 600; opacity: .9; }
+.cx-sh-copy { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 14px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4); }
+.cx-sh-url { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; line-height: 1.3; }
+
+.cx-sh-lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
+.cx-sh-targets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 4px; cursor: grab; touch-action: pan-x; overscroll-behavior-x: contain; }
+.cx-sh-targets::-webkit-scrollbar { display: none; }
+.cx-sh-targets.dragging { cursor: grabbing; }
+
+
+
+
+
+
+
+
+.cx-sh-qrview { align-items: center; padding: 6px 0 4px; }
+.cx-sh-qrurl { font-size: 14px; color: var(--muted-foreground); }
+.cx-sh-msg:empty { display: none; }
+/* fade only the edge that still has more to scroll */
+.cx-sh-targets { --fl: 0px; --fr: 28px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
+.cx-sh-targets[data-end] { --fr: 0px; }
+.cx-sh-targets[data-scrolled] { --fl: 28px; }
+
+/* ── Board card: optional parts, none fixed ── */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ── receipt ── */
+.cx-rcpt { display: flex; flex-direction: column; gap: 14px; }
+.cx-rcpt-shot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 18px 16px; border-radius: calc(var(--radius) * 1.6); background: linear-gradient(#fdfcf7, #f3f1ea); color: #1b1b1f; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
+.cx-rcpt-ok { width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center; background: #1f9d55; color: #fff; }
+.cx-rcpt-ok svg { width: 20px; height: 20px; }
+.cx-rcpt-shot b { font-size: 15px; }
+.cx-rcpt-amt { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
+.cx-rcpt-shot dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; width: 100%; margin: 10px 0 0; padding-top: 12px; border-top: 1px dashed rgb(0 0 0 / .15); font-size: 13px; }
+.cx-rcpt-shot dt { color: #6b6b74; }
+.cx-rcpt-shot dd { margin: 0; text-align: right; font-weight: 500; }
+.cx-rcpt-check { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--muted); font-size: 13px; }
+
+/* ── Board card blocks ── */
+
+
+
+
+
+
+
+
+
+
+
+
+.cx-map-svg { display: block; width: 100%; height: 96px; }
+.mp-ground { fill: color-mix(in srgb, var(--muted) 70%, var(--background)); }
+.mp-park { fill: color-mix(in srgb, var(--success) 18%, var(--background)); }
+.mp-water { fill: color-mix(in srgb, var(--info) 18%, var(--background)); }
+.mp-street { stroke: var(--background); stroke-width: 7; fill: none; }
+.mp-minor { stroke: var(--background); stroke-width: 3; fill: none; opacity: .8; }
+.mp-route { stroke: var(--selected); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 0; }
+.mp-shop { fill: var(--foreground); stroke: var(--background); stroke-width: 2.5; }
+.mp-pin { fill: var(--selected); stroke: var(--background); stroke-width: 1.5; }
+.mp-pin-dot { fill: var(--background); }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* board: wider than its box, so it pans; edges fade where there is more */
+.cx-board { scroll-snap-type: none; cursor: grab; --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
+.cx-board[data-start] { --fl: 36px; }
+.cx-board[data-end] { --fr: 36px; }
+.cx-board.panning { cursor: grabbing; user-select: none; }
+.cx-board.panning * { pointer-events: none; }
+
+
+
+/* ── card sizes showcase ── */
+.cx-card-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); gap: 20px; justify-content: center; align-items: start; width: 100%; }
+.cx-cs-col { display: flex; flex-direction: column; gap: 10px; }
+.cx-cs-h b { display: block; font-size: 14px; font-weight: 600; }
+.cx-cs-h span { display: block; font-size: 12px; color: var(--muted-foreground); line-height: 1.4; min-height: 2.8em; }
+
+
+
+
+
+@media (max-width: 900px) { .cx-card-sizes { grid-template-columns: minmax(0, 320px); } }
+
+/* ── ColorPick host rows ── */
+.cx-cp-field { display: flex; flex-direction: column; gap: 6px; }
+.cx-cp-hint { font-size: 12px; color: var(--muted-foreground); }
+.cx-cp-hint code { font: 11px var(--font-mono); }
+.cx-cp-row { display: flex; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.2); cursor: pointer; width: fit-content; max-width: 100%; }
+.cx-cp-row:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }
+.cx-cp-val { font-size: 13px; font-weight: 500; padding-right: 6px; }
+.cx-store-wall { flex: 0 1 380px; display: grid; place-items: center; padding: 32px 24px; border-radius: calc(var(--radius) * 2); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
+
+/* ── Accordion: hover and focus on the whole row (Nova underlines; the row also lights up) ── */
+#acc .cn-accordion-trigger { border-radius: calc(var(--radius) * .8); margin-inline: -8px; padding-inline: 8px; width: calc(100% + 16px); transition: background-color 150ms ease, color 150ms ease; }
+#acc .cn-accordion-trigger:hover { background: color-mix(in srgb, var(--foreground) 6%, transparent); text-decoration: underline; text-underline-offset: 3px; }
+#acc .cn-accordion-trigger:hover .cx-acc-chev { color: var(--foreground); }
+#acc .cn-accordion-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
+
+/* ── card groups ── */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ── one slider look for all (Storio's): 8 px track, 21 px thumb ringed in --primary, value bubble ── */
+.cx-sl-field { gap: 6px; }
+.cx-slider { margin-top: 2.1rem; height: 21px; }
+.cx-slider .cn-slider-track { height: 8px; border-radius: 999px; background: var(--muted); }
+.cx-slider .cn-slider-range { background: var(--primary); border-radius: 999px; }
+.cx-slider .cn-slider-thumb { width: 21px; height: 21px; margin-top: -10.5px; border-radius: 50%; background: var(--background); border: 5px solid var(--primary); box-shadow: 0 2px 5px rgb(0 0 0 / .3); transition: transform .1s ease, box-shadow .15s ease; }
+.cx-slider .cn-slider-thumb[data-drag] { transform: scale(1.12); }
+.cx-slider .cn-slider-thumb:focus-visible { box-shadow: 0 2px 5px rgb(0 0 0 / .3), 0 0 0 4px var(--ring); outline: none; }
+.cx-sl-bubble { position: absolute; bottom: calc(100% + 7px); transform: translateX(-50%); pointer-events: none; background: var(--primary); color: var(--primary-foreground); font-weight: 700; font-size: .72rem; padding: .24rem .5rem; border-radius: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 3px 10px rgb(0 0 0 / .2); }
+.cx-sl-bubble::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--primary); border-bottom: 0; }
+.mslider .mslider-input { height: 21px; }
+
+/* ═════ Board card: one vertical rhythm (two measures), full width used ═════ */
+
+
+
+
+
+
+
+
+
+/* decision box */
+
+
+
+
+
+
+
+/* groups: same padding above and below every divider */
+
+
+
+
+
+/* photos use the whole width: four equal squares */
+
+
+
+
+/* map, address, tracking, courier: each its own row with the same gap */
+.cx-map-svg { height: 112px; }
+
+
+
+
+
+
+
+
+
+
+/* actions fill the row: the next step widest, WhatsApp a fixed square at the end */
+
+
+
+
+/* room to breathe: wider lanes and a wider max example */
+.cx-board { grid-auto-columns: minmax(292px, 1fr) !important; max-width: 1240px !important; }
+.cx-card-sizes { grid-template-columns: minmax(0, 300px) minmax(0, 320px) minmax(0, 360px); }
+
+/* ── compact delivery line on the card ── */
+
+
+
+
+
+
+
+
+
+
+/* footer icon buttons: same square as WhatsApp; the note shows a dot */
+
+
+
+/* the note bubble */
+.cx-notepop { width: min(300px, calc(100vw - 32px)); padding: 12px 14px 14px; border-radius: calc(var(--radius) * 1.2); background: var(--foreground); color: var(--background); box-shadow: 0 16px 36px -14px rgb(0 0 0 / .45); font-size: 13.5px; line-height: 1.5;
+  opacity: 0; transform: translateY(4px) scale(.98); transition: opacity 140ms ease, transform 140ms ease !important; transition-property: opacity, transform !important; }
+.cx-notepop[data-state="open"] { opacity: 1; transform: none; }
+.cx-notepop-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; }
+.cx-notepop-h svg { width: 14px; height: 14px; opacity: .7; }
+.cx-notepop-h b { font-weight: 600; }
+.cx-notepop p { margin: 0; }
+.cx-notepop-x { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--background) 14%, transparent); color: inherit; cursor: pointer; }
+.cx-notepop-x svg { width: 12px; height: 12px; opacity: 1; }
+/* ── delivery modal: steps aligned to the edges ── */
+.cx-dl { display: flex; flex-direction: column; gap: 16px; }
+.cx-dl-map { border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
+.cx-dl-map .cx-map-svg { height: 170px; }
+.cx-dl-addr { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; }
+.cx-dl-addr svg { width: 18px; height: 18px; color: var(--primary); margin-top: 1px; }
+.cx-dl-addr b { display: block; font-weight: 500; line-height: 1.4; }
+.cx-dl-addr small { display: block; color: var(--muted-foreground); font-size: 13px; margin-top: 2px; }
+.cx-dl-steps { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; }
+.cx-dl-steps > div { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--muted-foreground); }
+.cx-dl-steps i { display: block; height: 6px; border-radius: 99px; background: var(--border); }
+.cx-dl-steps [data-done] i, .cx-dl-steps [data-now] i { background: var(--primary); }
+.cx-dl-steps [data-now] span { color: var(--foreground); font-weight: 600; }
+.cx-dl-steps > div:last-child { text-align: right; }
+.cx-dl-steps > div:not(:first-child):not(:last-child) { text-align: center; }
+.cx-dl-courier { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--muted) 70%, transparent); font-size: 14px; }
+.cx-dl-courier b { display: block; font-weight: 600; }
+.cx-dl-courier small { display: block; color: var(--muted-foreground); font-size: 12.5px; }
+.cx-dl-eta { text-align: right; }
+.cx-dl-eta b { font-size: 18px; color: var(--primary); font-variant-numeric: tabular-nums; }
+
+/* ── head: one line for the name (with WhatsApp next to it), one line for the detail ── */
+
+
+
+
+
+
+
+/* the customer's note: a violet strip right under the person, one line, tap to read */
+
+
+
+
+
+
+
+/* decision box: compact, the message in one line */
+
+
+
+
+
+
+
+.cx-req-full { margin: 0; padding: 12px 14px; border-left: 3px solid var(--warning); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--warning) 8%, var(--background)); font-size: 15px; line-height: 1.55; }
+.cx-req-next { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted-foreground); }
+.cx-req-next b { color: var(--foreground); font-weight: 600; }
+.cx-req-next span { display: flex; align-items: center; gap: 6px; }
+.cx-req-next svg { width: 14px; height: 14px; }
+/* footer: the state change is THE button (filled), the rest secondary */
+
+
+
+
+
+
+/* ═════ minimal card: it only informs; reading and deciding happen in a modal ═════ */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* products: a small strip */
+
+
+
+/* the payment badge is the way into the receipt */
+
+
+
+
+/* footer: just the state change */
+
+
+.cx-req-full[data-tone="bad"] { border-left-color: var(--destructive); background: color-mix(in srgb, var(--destructive) 7%, var(--background)); }
+.cx-req-full[data-tone="info"] { border-left-color: var(--info); background: color-mix(in srgb, var(--info) 7%, var(--background)); }
+
+
+/* attention icons: tinted by kind, a dot says «pending» */
+
+
+
+
+
+
+
+
+
+
+
+/* attention icons: their own row under the person, aligned with the name */
+
+
+
+
+
+/* real buttons look like buttons; information has no button chrome */
+
+
+
+
+
+
+
+/* the showcase stacks on narrow screens */
+@media (max-width: 1000px) { .cx-card-sizes { grid-template-columns: minmax(0, 360px); } }
+
+/* long text never breaks a line: it ends in an ellipsis */
+
+
+
+
+
+/* the contact channel the customer chose, on the right */
+
+
+
+
+
+
+.cx-req-full[data-tone="note"] { border-left-color: var(--selected); background: var(--selected-soft); }
+/* Stripe receipt */
+.cx-stripe { display: flex; flex-direction: column; gap: 14px; }
+.cx-stripe-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.cx-stripe-amt { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
+.cx-stripe dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding: 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--muted) 70%, transparent); font-size: 13.5px; }
+.cx-stripe dt { color: var(--muted-foreground); }
+.cx-stripe dd { margin: 0; text-align: right; }
+
+
+
+
+
+
+/* card badges: quiet text with a colored dot, no tinted pill */
+ .cx-modal .cx-rcpt-check .cn-badge { height: auto; padding: 0; border: 0; border-radius: 0; background: none !important; color: var(--foreground); font-size: 12.5px; font-weight: 500; gap: 6px; }
+
+
+
+
+
+
+/* extras stay a light outlined chip */
+
+
+
+/* ═════ library extensions (generic, reusable by any component) ═════ */
+/* Badge · variant="status": quiet text with a tone dot */
+.cn-badge[data-variant="status"] { height: auto; padding: 0; border: 0; background: none; color: var(--foreground); font-size: 12.5px; font-weight: 500; gap: 6px; --tone: var(--muted-foreground); }
+.cn-badge[data-variant="status"]::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--tone); flex: none; }
+.cn-badge[data-variant="status"][data-tone="ok"] { --tone: var(--success); }
+.cn-badge[data-variant="status"][data-tone="wait"] { --tone: var(--warning); font-weight: 600; }
+.cn-badge[data-variant="status"][data-tone="info"] { --tone: var(--info); font-weight: 600; }
+.cn-badge[data-variant="status"][data-tone="bad"] { --tone: var(--destructive); font-weight: 600; }
+/* Button · tonal: tinted by a tone (or a brand colour via --brand) */
+.cn-button.cx-tonal { --tone: var(--info); background: color-mix(in srgb, var(--tone) 13%, transparent); color: var(--tone); }
+.cn-button.cx-tonal:hover { background: color-mix(in srgb, var(--tone) 22%, transparent); color: var(--tone); }
+.cn-button.cx-tonal[data-tone="wait"] { --tone: var(--warning); }
+.cn-button.cx-tonal[data-tone="bad"] { --tone: var(--destructive); }
+.cn-button.cx-tonal[data-tone="ok"] { --tone: var(--success); }
+.cn-button.cx-tonal[data-tone="note"] { --tone: var(--selected); }
+.cn-button.cx-tonal[data-tone="brand"] { --tone: var(--brand); border-radius: 99px; }
+/* Indicator: a pending dot on any control */
+.cx-has-indicator { position: relative; overflow: visible; }
+.cx-indicator { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 99px; background: var(--tone, var(--selected)); box-shadow: 0 0 0 2px var(--card); }
+.cx-indicator[data-tone="wait"] { --tone: var(--warning); } .cx-indicator[data-tone="bad"] { --tone: var(--destructive); } .cx-indicator[data-tone="info"] { --tone: var(--info); } .cx-indicator[data-tone="note"] { --tone: var(--selected); }
+/* Avatar · shape="square" (product thumbnails) */
+.cn-avatar[data-shape="square"] { border-radius: calc(var(--radius) * .7); }
+.cn-avatar[data-shape="square"] .cn-avatar-image, .cn-avatar[data-shape="square"] .cn-avatar-fallback { border-radius: inherit; }
+.cn-avatar[data-shape="square"] .cn-avatar-fallback { font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
+/* layout + text helpers */
+.cx-hstack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.cx-fill { width: 100%; justify-content: center; }
+.cx-ellipsis { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cx-strong { font-weight: 600; }
+.cn-item-content { min-width: 0; }
+.cn-item-description .cx-ellipsis, .cn-item-description { overflow: hidden; text-overflow: ellipsis; }
+
+/* ═════ board behaviour only (the look is the Card atom) ═════ */
+.cx-bcard { cursor: grab; touch-action: none; user-select: none; transition: transform 200ms cubic-bezier(.22, 1, .36, 1), box-shadow 150ms; }
+.cx-bcard-static { cursor: default; touch-action: auto; user-select: auto; }
+.cx-bcard:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.cx-bcard[data-lifted], .cx-bcard[data-held] { box-shadow: 0 0 0 2px var(--selected), 0 12px 28px -10px rgb(0 0 0 / .3); }
+.cx-bcard[data-held] { transform: scale(1.03); }
+.cx-bcard.cx-dragging { position: fixed; z-index: var(--z-toast); transition: none; cursor: grabbing; box-shadow: 0 16px 36px -12px rgb(0 0 0 / .35); transform: rotate(1.5deg); pointer-events: none; }
+.cx-bcard button, .cx-bcard a { cursor: pointer; }
+.cx-vstack { display: flex; flex-direction: column; gap: 8px; width: 100%; }
+.cx-vstack > .cx-hstack { flex-wrap: wrap; }
+
+/* ═════ atoms: Button sizes (every button has a defined height) and its «chosen» state ═════ */
+/* tile: a button that stacks an icon/number over a label — 56 px; tile-lg — 76 px */
+.cn-button.cx-size-tile { height: 56px; padding: 0 6px; flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.1; }
+.cn-button.cx-size-tile-lg { height: 76px; padding: 0 4px; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.1; }
+/* chosen: a pressed toggle wears --selected */
+/* selected wins over every variant and theme (Nova's dark outline background is more specific than a bare class) */
+.style-nova .cn-button[aria-pressed="true"][aria-pressed], [data-skin] .cn-button[aria-pressed="true"][aria-pressed] { background: var(--selected); border-color: var(--selected); color: var(--selected-foreground); }
+.style-nova .cn-button[aria-pressed="true"][aria-pressed]:hover, [data-skin] .cn-button[aria-pressed="true"][aria-pressed]:hover { background: var(--selected); color: var(--selected-foreground); }
+/* Badge · size lg (28 px) for chips that carry a button */
+.cn-badge.cx-chip { height: 28px; padding: 0 2px 0 10px; gap: 2px; font-size: 12.5px; }
+.cn-badge.cx-chip .cn-button { border-radius: 99px; }
+.cn-badge.cx-chip .cn-button svg { width: 12px; height: 12px; }
+
+/* ═════ molecules built from those atoms (only what composition needs) ═════ */
+/* Tabs = Buttons + a sliding indicator + a count Badge */
+.cx-tab { position: relative; z-index: 1; color: color-mix(in srgb, var(--foreground) 62%, transparent); }
+.cx-tab:hover { background: transparent; color: var(--foreground); }
+.cx-tab[aria-selected="true"] { color: var(--foreground); }
+.cx-tabs.line .cx-tab { height: 36px; border-radius: 0; }
+.cx-tab .cx-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: color-mix(in srgb, var(--foreground) 9%, transparent); font-size: 11px; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; }
+.cx-tab[aria-selected="true"] .cx-count { background: var(--selected); color: var(--selected-foreground); }
+.cx-tabs:not(.line) .cx-tab-ind { height: 28px; }
+/* booking: day tile + hour buttons */
+.cx-day small { font-size: 11px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .04em; }
+.cx-day b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.cx-day i { width: 4px; height: 4px; border-radius: 99px; background: var(--success); }
+.cx-day[data-full] i, .cx-day:disabled i { background: transparent; }
+.cx-day[aria-pressed="true"] small { color: inherit; opacity: .8; }
+.cx-day[aria-pressed="true"] i { background: currentColor; }
+.cx-hour-grid .cn-button { width: 100%; font-variant-numeric: tabular-nums; }
+.cx-hour-skel { height: 28px; }
+/* table header sort buttons */
+.cx-th { margin-left: -6px; color: inherit; }
+.cx-th svg { width: 13px; height: 13px; opacity: .55; }
+th[aria-sort="ascending"] .cx-th, th[aria-sort="descending"] .cx-th { color: var(--foreground); }
+th[aria-sort="ascending"] .cx-th svg, th[aria-sort="descending"] .cx-th svg { opacity: 1; color: var(--selected); }
+.cx-dt-num .cx-th { margin-left: 0; margin-right: -6px; flex-direction: row-reverse; }
+/* phone bottom bar */
+.cx-ph-tab { width: 100%; color: var(--muted-foreground); position: relative; }
+.cx-ph-tab svg { width: 22px !important; height: 22px !important; }
+.cx-ph-tab[aria-current] { color: var(--selected); background: transparent; }
+.cx-ph-tab[aria-current]::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 99px; background: var(--selected); }
+/* carousel dots: a real button (24 px) with a small mark */
+.cx-dotb .cx-dot-mark { width: 8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--foreground) 22%, transparent); transition: width 240ms cubic-bezier(.22, 1, .36, 1), background-color 200ms; }
+.cx-dotb[aria-selected="true"] { width: 34px; }
+.cx-dotb[aria-selected="true"] .cx-dot-mark { width: 22px; background: var(--selected); }
+.cx-car-dots { display: flex; gap: 0; }
+/* drag handle */
+.cx-grip { cursor: grab; touch-action: none; color: var(--muted-foreground); flex: none; }
+/* a field-like trigger (date / time) */
+.cx-picker-field { width: 100%; justify-content: flex-start; font-weight: 400; }
+.cx-picker-field span { flex: 1; text-align: left; }
+.cx-picker-field svg { color: var(--muted-foreground); }
+/* share targets */
+.cx-sh-tg { width: 72px; flex: 0 0 auto; color: var(--foreground); text-decoration: none; }
+.cx-sh-tg .cx-sh-ic { width: 46px; height: 46px; border-radius: 99px; display: grid; place-items: center; background: #fff; color: var(--brand); border: 1px solid rgb(20 16 40 / .06); box-shadow: 0 6px 16px -8px rgb(20 16 40 / .45); }
+.cx-sh-tg .cx-sh-ic.plain { background: var(--muted); color: var(--foreground); border-color: transparent; box-shadow: none; }
+.cx-sh-tg .cx-sh-ic svg { width: 22px !important; height: 22px !important; }
+.cx-sh-tg:hover { background: var(--accent); }
+.cx-sh-copybtn { flex: none; min-width: 5.5rem; }
+
+/* Card · size sm: compact rhythm. Items sit edge to edge, separated only by the hairline:
+   text-to-text = item padding (10) + line + item padding (10). No gap or margin stacks on top. */
+.cn-card[data-size="sm"] { gap: 0; padding-block: 0; }
+.cn-card[data-size="sm"] > .cn-card-header { padding: 12px 12px 4px; }
+.cn-card[data-size="sm"] > .cn-card-content { padding: 0 12px; }
+.cn-card[data-size="sm"] > .cn-card-footer { margin-top: 8px; padding: 10px 12px; }
+.cn-card[data-size="sm"] .cn-item-group { gap: 0; }
+.cn-card[data-size="sm"] .cn-item-separator { margin-block: 0; }
+.cn-card[data-size="sm"] .cn-item { padding: 10px 4px; }
+.cn-card[data-size="sm"] .cn-card-header .cn-item { padding: 0 4px 8px; }
+.cn-card[data-size="sm"] .cn-item-footer { margin-top: 2px; }
+
+/* ═════ atom: Text ═════ */
+.cx-text { color: var(--foreground); font-size: 14px; line-height: 1.45; }
+.cx-text[data-variant="title"] { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
+.cx-text[data-variant="heading"] { font-size: 14px; font-weight: 600; }
+.cx-text[data-variant="strong"] { font-weight: 600; font-variant-numeric: tabular-nums; }
+.cx-text[data-variant="muted"] { font-size: 13px; color: var(--muted-foreground); }
+.cx-text[data-variant="caption"] { font-size: 12px; color: var(--muted-foreground); }
+.cx-text[data-variant="label"] { font-size: 12.5px; font-weight: 600; }
+p.cx-text { margin: 0; }
+/* ═════ atom: Stepper (Progress per step) ═════ */
+.cx-stepper { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; margin-top: 6px; }
+.cx-step { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.cx-step .cn-progress { height: 4px; }
+.cx-step .cx-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cx-step[data-now] .cx-text { color: var(--foreground); }
+/* choice = Item as a radio */
+.cx-choice { cursor: pointer; }
+.cx-choice[aria-checked="true"] { border-color: var(--selected); background: var(--selected-soft); }
+.cx-choice:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.cx-wz-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
+.cx-wz-sum .cn-item { padding-inline: 0; }
+/* generic cards grid */
+.cx-generic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 20px; width: 100%; max-width: 1240px; align-items: start; }
+.cx-modal-head .cx-stepper { margin-right: -32px; }
+
+/* table filters (molecule: InputGroup + Buttons + Popover/Command + Badges) */
+.cx-dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
+.cx-dt-tools { gap: 8px; }
+.cx-dt-search { width: 240px; max-width: 100%; }
+.cx-fbtn.cx-dashed { border-style: dashed; }
+.cx-fbtn .cn-badge { height: 20px; }
+.cx-fsep { height: 16px; margin: 0 2px; }
+.cx-dt-chips { gap: 6px; margin-bottom: 10px; }
+.cx-fpop { width: 240px; padding: 0; overflow: hidden; }
+.cx-fpop .cx-vstack { padding: 6px; }
+.cx-fpop .cx-vstack:has(.cx-frange) { padding: 12px; }
+.cx-fpop .cn-command-list { max-height: 260px; }
+.cx-fpop .cn-command-item { gap: 8px; cursor: pointer; }
+.cx-fpop .cn-command-item:focus-visible, .cx-fpop .cn-command-item:hover { background: var(--accent); outline: none; }
+.cx-fpop .cn-command-item .cn-checkbox { pointer-events: none; }
+.cx-fcount { margin-left: auto; font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+.cx-fclear-one { width: 100%; justify-content: center; border: 0; background: none; color: var(--foreground); font: inherit; font-size: 13px; }
+.cx-frange { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.cx-left { justify-content: flex-start; }
+.cx-dt-empty { padding: 28px 12px; }
+
+/* ═════ Carousel (molecule) ═════ */
+.cx-car-demo { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 820px; margin: 0 auto; }
+.cx-car { display: flex; flex-direction: column; gap: 12px; --gap: 12px; }
+.cx-car-view { position: relative; }
+.cx-car-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: calc(var(--radius) * 1.2); }
+.cx-car-track::-webkit-scrollbar { display: none; }
+.cx-car-track.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
+.cx-car-track:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
+.cx-car-slide { scroll-snap-align: start; min-width: 0; }
+.cx-car[data-center] .cx-car-track { grid-auto-columns: 72%; padding-inline: 14%; }
+.cx-car[data-center] .cx-car-slide { scroll-snap-align: center; transition: transform 260ms cubic-bezier(.22, 1, .36, 1), opacity 260ms; transform: scale(.92); opacity: .55; }
+.cx-car[data-center] .cx-car-slide[data-active] { transform: none; opacity: 1; }
+.cx-car-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
+.cx-car-ind { flex: 1; min-width: 0; }
+.cx-car-ind .cn-progress { flex: 1; max-width: 220px; }
+.cx-car-view[data-arrows="overlay"] .cx-car-arrow { position: absolute; top: 50%; margin-top: -14px; z-index: 2; border-radius: 99px; background: var(--background); box-shadow: 0 2px 8px rgb(0 0 0 / .15); }
+.cx-car-view[data-arrows="overlay"] [data-car="prev"] { left: 10px; }
+.cx-car-view[data-arrows="overlay"] [data-car="next"] { right: 10px; }
+.cn-avatar[data-fill] { width: 100%; height: auto; aspect-ratio: 1; }
+.cx-hero { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; height: 220px; padding: 22px 56px; border-radius: calc(var(--radius) * 1.4); color: #fff; }
+.cx-hero .cx-text { color: #fff; }
+.cx-hero .cx-text[data-variant="title"] { font-size: 22px; }
+.cx-hero .cn-button { margin-top: 8px; }
+.cx-gallery-img { height: 300px; border-radius: calc(var(--radius) * 1.4); }
+.cx-thumb { padding: 2px; border-radius: calc(var(--radius) * .8); }
+.cx-thumb .cn-avatar { width: 100%; height: 100%; }
+.cx-thumb[aria-pressed="true"] { background: transparent; box-shadow: 0 0 0 2px var(--selected); }
+.cx-car-card .cn-card-header { padding: 12px 12px 4px; }
+@media (max-width: 640px) { .cx-car { --per: var(--per-sm) !important; } }
+
+/* filters on the phone: search fills the row, «Filtros» beside it; chips scroll sideways */
+.cx-dt-host:has(.cx-fbtn-m) .cx-dt-tools { width: 100%; flex-wrap: nowrap; }
+.cx-dt-host:has(.cx-fbtn-m) .cx-dt-search { flex: 1; width: auto; }
+.cx-fbtn-m { flex: none; }
+.cx-fbtn-m .cn-badge { height: 18px; min-width: 18px; padding: 0 5px; margin-left: 2px; }
+.cx-dt-host:has(.cx-fbtn-m) .cx-dt-toolbar { flex-direction: column; align-items: stretch; }
+.cx-dt-host:has(.cx-fbtn-m) .cx-dt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
+.cx-dt-chips .cx-chip { flex: none; }
+.cx-fsheet-opt { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; gap: 10px; min-height: 40px; cursor: pointer; border-radius: calc(var(--radius) * .8); }
+.cx-fsheet-opt:hover { background: var(--accent); }
+.cx-dt-scroll { overflow-anchor: none; }
+.cx-chip.out { animation: cx-chip-out 160ms ease forwards; }
+
+/* sidebar tokens come from the skin */
+.style-nova, [data-skin] { --sidebar: color-mix(in srgb, var(--muted) 55%, var(--background)); --sidebar-foreground: var(--foreground); --sidebar-accent: color-mix(in srgb, var(--foreground) 6%, transparent); --sidebar-accent-foreground: var(--foreground); --sidebar-border: var(--border); --sidebar-ring: var(--ring); --sidebar-width: 15rem; --sidebar-width-icon: 3rem; }
+/* chosen nav entry = the system's «you are here» (violet + dot), like everywhere else */
+.cn-sidebar-menu-button[data-active="true"] { background: var(--selected-soft); color: var(--selected); font-weight: 600; }
+.cn-sidebar-menu-button[data-active="true"] svg { color: var(--selected); }
+.cn-sidebar-menu-button svg { width: 16px; height: 16px; flex: none; }
+.cn-sidebar-menu-button { cursor: pointer; border: 0; background: transparent; color: var(--sidebar-foreground); font: inherit; font-size: 14px; }
+.cn-sidebar-menu-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cx-sb-two { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
+.cx-sb-two .cx-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cn-sidebar-menu { list-style: none; margin: 0; padding: 0; gap: 2px; }
+.cn-sidebar-menu-badge { background: color-mix(in srgb, var(--foreground) 8%, transparent); }
+
+/* ═════ App frame (the shell is a molecule of Sidebar + Inset + Sheet) ═════ */
+.cx-app { position: relative; display: flex; height: 600px; width: 100%; max-width: 1180px; margin: 0 auto; border-radius: calc(var(--radius) * 1.6); overflow: hidden; background: var(--background); box-shadow: 0 0 0 1px var(--border), 0 24px 60px -30px rgb(0 0 0 / .35); transition: max-width 320ms cubic-bezier(.22, 1, .36, 1); }
+.cx-app[data-narrow] { max-width: 390px; }
+.cx-app-sb { flex: none; width: var(--sidebar-width); border-right: 1px solid var(--sidebar-border); transition: width 220ms cubic-bezier(.22, 1, .36, 1); overflow: hidden; }
+.cx-app-sb[data-collapsible="icon"] { width: var(--sidebar-width-icon); }
+.cx-app-sb .cn-sidebar-inner { height: 100%; display: flex; flex-direction: column; padding: 8px; gap: 8px; }
+.cx-app-sb .cn-sidebar-content { gap: 6px; }
+.cx-app-sb[data-collapsible="icon"] .cx-sb-two, .cx-app-sb[data-collapsible="icon"] .cn-sidebar-menu-button > span:not([data-slot="avatar"]), .cx-app-sb[data-collapsible="icon"] .cn-sidebar-menu-badge, .cx-app-sb[data-collapsible="icon"] .cn-sidebar-menu-button > svg:last-child:not(:first-child) { display: none; }
+.cx-app-sb[data-collapsible="icon"] .cn-sidebar-menu-button-size-lg { width: 32px !important; height: 32px !important; padding: 0 !important; justify-content: center; }
+.cx-app-sb[data-collapsible="icon"] .cn-sidebar-menu-button-size-lg .cn-avatar { width: 28px; height: 28px; }
+.cx-app-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+.cx-app-top { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--border); flex: none; }
+.cx-app-vsep { height: 18px; }
+.cx-grow { flex: 1; }
+.cx-app-search { width: 220px; justify-content: flex-start; color: var(--muted-foreground); }
+.cx-app-search .cx-app-search-t { flex: 1; text-align: left; }
+.cx-app-page { flex: 1; overflow-y: auto; padding: 20px 22px 28px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; }
+.cx-app-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
+.cx-app-head h1.cx-text { margin: 0; font-size: 22px; }
+.cx-app-list { gap: 8px; }
+.cx-app-row { width: 100%; text-align: left; font: inherit; color: inherit; background: var(--background); cursor: pointer; transition: background-color 150ms, border-color 150ms; }
+.cx-app-row:hover { background: color-mix(in srgb, var(--foreground) 3%, var(--background)); }
+.cx-app-row[data-active] { border-color: var(--selected); background: var(--selected-soft); }
+.cx-app-row .cn-item-actions { gap: 14px; }
+/* detail Sheet: inside the frame, slides from the right */
+.cx-app .cn-sheet-content.cx-app-sheet[data-side] { position: absolute; top: 0; bottom: 0; right: 0; left: auto; height: auto; max-width: none; width: min(380px, 100%); border-left: 1px solid var(--border); box-shadow: -18px 0 40px -24px rgb(0 0 0 / .3); gap: 0; z-index: 3; transform: translateX(100%); transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
+.cx-app .cn-sheet-content.cx-app-sheet[data-side][data-state="open"] { transform: none; }
+.cx-app-sheet .cn-sheet-header { padding: 16px 16px 8px; }
+.cx-app-sheet-body { flex: 1; overflow-y: auto; padding: 0 12px; scrollbar-width: thin; }
+.cx-app-sheet-body .cn-item-group { gap: 0; }
+.cx-app-sheet-body .cn-item-separator { margin-block: 0; }
+.cx-app-sheet .cn-sheet-footer { display: flex; flex-direction: row; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
+.cx-app-sheet .cn-sheet-footer .cx-go { flex: 1; }
+.cx-app-scrim { position: absolute; inset: 0; z-index: 2; background: var(--overlay); opacity: 0; transition: opacity 200ms; }
+.cx-app-scrim[data-state="open"] { opacity: 1; }
+/* timeline (molecule: Text + a line) */
+.cx-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 12px; }
+.cx-timeline li { position: relative; display: flex; flex-direction: column; padding-left: 18px; }
+.cx-timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 99px; background: var(--border); }
+.cx-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 3.5px; top: 18px; bottom: -10px; width: 1px; background: var(--border); }
+.cx-timeline li[data-now]::before { background: var(--selected); box-shadow: 0 0 0 4px var(--selected-soft); }
+/* the shell on a narrow box: sidebar becomes an off-canvas menu */
+.cx-app[data-mobile] .cx-app-sb { position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: min(270px, 85%); transform: translateX(-102%); transition: transform 240ms cubic-bezier(.22, 1, .36, 1); box-shadow: 18px 0 40px -24px rgb(0 0 0 / .35); }
+.cx-app[data-mobile][data-sb-open] .cx-app-sb { transform: none; }
+.cx-app[data-mobile] [data-app-scrim]:not([hidden]) { opacity: 1; z-index: 3; }
+.cx-app[data-mobile] .cx-app-search { width: 36px; padding: 0; justify-content: center; }
+.cx-app[data-mobile] .cx-app-search .cx-app-search-t, .cx-app[data-mobile] .cx-app-search .cn-kbd, .cx-app[data-mobile] nav[aria-label="Migas"] { display: none; }
+.cx-app[data-mobile] .cx-app-page { padding: 16px 14px 24px; }
+.cx-app[data-mobile] .cx-app-row .cn-item-actions .cn-badge { display: none; }
+/* command */
+.cx-cmd { border: 0; background: none; }
+.cx-cmd .cn-command-list { max-height: 320px; }
+.cx-cmd-label { padding: 8px 8px 4px; }
+.cx-cmd .cn-command-item { cursor: pointer; }
+.cx-cmd-help { gap: 14px; }
+.cx-cmd-help .cn-kbd { margin-right: 3px; }
+.cx-app .cn-sheet-overlay.cx-app-scrim { position: absolute; }
+.cn-command-input-group .cn-command-input.cn-input-group-input { padding: 0 8px; }
+
+
+/* ═════════════════════════ 3. sys ═════════════════════════ */
+/* ═════ Button · icon motion on hover (atom-level, every button with an icon) ═════ */
+.cn-button svg { transition: transform 180ms cubic-bezier(.22, 1, .36, 1); }
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .cn-button:not(:disabled):hover > svg:last-child:not(:first-child) { transform: translateX(2px); }       /* trailing arrow moves on */
+  .cn-button:not(:disabled):hover > svg:first-child:not(:last-child) { transform: scale(1.12); }          /* leading icon lifts */
+  .cn-button:not(:disabled):hover > svg:first-child:not(:last-child):has(use[href="#plus"]) { transform: rotate(90deg); }
+  .cn-button:not(:disabled):hover > svg:only-child { transform: scale(1.12); }
+  .cn-button:not(:disabled):hover > svg:only-child:has(use[href="#left"]) { transform: translateX(-2px); }
+  .cn-button:not(:disabled):hover > svg:only-child:has(use[href="#right"]) { transform: translateX(2px); }
+  .cn-button:not(:disabled):hover > svg:only-child:has(use[href="#x"]) { transform: rotate(90deg); }
+  .cn-button:not(:disabled):hover > svg:only-child:has(use[href="#i-send"]) { transform: translate(2px, -2px); }
+  .cn-button:not(:disabled):hover > svg:only-child:has(use[href="#i-bell"]) { animation: cx-ring 600ms ease; }
+  .cn-button:not(:disabled):active > svg { transform: scale(.92); }
+}
+@keyframes cx-ring { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
+
+/* ═════ Calendar ═════ */
+.cx-cal { position: relative; display: inline-flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: calc(var(--radius) * 1.2); box-shadow: 0 0 0 1px var(--border); background: var(--background); }
+.cx-cal-nav { position: absolute; top: 10px; left: 8px; right: 8px; display: flex; justify-content: space-between; pointer-events: none; }
+.cx-cal-nav .cn-button { pointer-events: auto; }
+.cx-cal-months { display: flex; gap: 24px; flex-wrap: wrap; }
+.cx-cal-title { height: 28px; display: grid; place-items: center; margin-bottom: 4px; }
+.cx-cal-grid { display: grid; grid-template-columns: repeat(7, 32px); row-gap: 2px; }
+.cx-cal-wd { height: 28px; display: grid; place-items: center; }
+.cx-cal-day { font-variant-numeric: tabular-nums; font-weight: 400; position: relative; }
+.cx-cal-day[data-out] { color: color-mix(in srgb, var(--muted-foreground) 55%, transparent); }
+.cx-cal-day[data-today]::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 99px; background: currentColor; }
+.cx-cal-day[data-range="mid"] { background: var(--selected-soft); color: var(--foreground); border-radius: 0; }
+.cx-cal-day[data-range="edge"] { font-weight: 600; }
+.cx-cal-day:disabled { opacity: .35; }
+.cx-cal-day:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; z-index: 1; }
+.cx-range-wrap { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
+.cx-range-presets .cn-button { width: 9.5rem; }
+
+/* ═════ Agenda ═════ */
+.cx-agenda { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 1080px; margin: 0 auto; }
+.cx-ag-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
+.cx-ag-scroll { max-height: 520px; overflow: auto; }
+.cx-ag { position: relative; display: grid; grid-template-rows: 36px 1fr; min-width: calc(56px + var(--cols) * 140px); }
+.cx-ag-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 56px repeat(var(--cols), 1fr); background: var(--background); border-bottom: 1px solid var(--border); }
+.cx-ag-colhead { display: grid; place-items: center; font-size: 13px; font-weight: 600; border-left: 1px solid var(--border); }
+.cx-ag-body { position: relative; display: grid; grid-template-columns: 56px repeat(var(--cols), 1fr); background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--h)); }
+.cx-ag-times { position: relative; }
+.cx-ag-times span { position: absolute; right: 8px; transform: translateY(-50%); }
+.cx-ag-times span:first-child { transform: none; }
+.cx-ag-col { position: relative; border-left: 1px solid var(--border); }
+.cx-ag-slot { position: absolute; left: 0; right: 0; border: 0; background: transparent; cursor: pointer; }
+.cx-ag-slot:hover { background: color-mix(in srgb, var(--selected) 6%, transparent); }
+.cx-ag-ev { --tone: var(--info); position: absolute; left: 4px; right: 4px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; padding: 4px 8px; border: 0; border-radius: calc(var(--radius) * .7); background: color-mix(in srgb, var(--tone) 20%, var(--background)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent); color: var(--foreground); font: inherit; text-align: left; cursor: grab; touch-action: none; transition: box-shadow 150ms, top 160ms cubic-bezier(.22, 1, .36, 1); }
+.cx-ag-ev[data-tone="ok"] { --tone: var(--success); } .cx-ag-ev[data-tone="wait"] { --tone: var(--warning); } .cx-ag-ev[data-tone="info"] { --tone: var(--info); } .cx-ag-ev[data-tone="bad"] { --tone: var(--destructive); }
+.cx-ag-ev:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent), 0 4px 12px -6px rgb(0 0 0 / .35); }
+.cx-ag-ev[data-dragging] { transition: none; cursor: grabbing; z-index: 2; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .4); }
+.cx-ag-ev:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
+.cx-ag-ev .cx-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.cx-ag-now { position: absolute; left: 56px; right: 0; height: 0; border-top: 2px solid var(--destructive); z-index: 2; pointer-events: none; }
+.cx-ag-now i { position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 99px; background: var(--destructive); }
+
+/* ═════ Chat (inbox + chatbot) ═════ */
+.cx-inbox { display: grid; grid-template-columns: 300px 1fr; height: 560px; width: 100%; max-width: 980px; margin: 0 auto; border-radius: calc(var(--radius) * 1.6); overflow: hidden; box-shadow: 0 0 0 1px var(--border); background: var(--background); transition: max-width 320ms cubic-bezier(.22, 1, .36, 1); }
+.cx-inbox[data-force-narrow] { max-width: 390px; }
+.cx-ib-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
+.cx-ib-items { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
+.cx-ib-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius); }
+.cx-ib-row:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); }
+.cx-ib-row[data-active] { background: var(--selected-soft); }
+.cx-ch { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 99px; background: var(--background); color: var(--brand); box-shadow: 0 0 0 1.5px var(--background); }
+.cx-ch svg { width: 11px; height: 11px; }
+.cx-ib-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.cx-ib-th { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex: none; }
+.cx-ib-back { display: none; }
+.cx-inbox[data-narrow], .cx-inbox[data-force-narrow] { grid-template-columns: 1fr; }
+.cx-inbox[data-narrow][data-view="list"] .cx-ib-thread, .cx-inbox[data-force-narrow][data-view="list"] .cx-ib-thread { display: none; }
+.cx-inbox[data-narrow][data-view="thread"] .cx-ib-list, .cx-inbox[data-force-narrow][data-view="thread"] .cx-ib-list { display: none; }
+.cx-inbox[data-narrow] .cx-ib-back, .cx-inbox[data-force-narrow] .cx-ib-back { display: inline-flex; }
+.cx-chat { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--muted) 35%, var(--background)); }
+.cx-chat-day { align-self: center; margin: 8px 0; padding: 2px 10px; border-radius: 99px; background: var(--background); box-shadow: 0 0 0 1px var(--border); }
+.cx-chat-msg { display: flex; flex-direction: column; max-width: min(78%, 440px); gap: 4px; }
+.cx-chat-msg[data-who="in"] { align-self: flex-start; align-items: flex-start; }
+.cx-chat-msg[data-who="out"] { align-self: flex-end; align-items: flex-end; }
+.cx-chat-bubble { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 6px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
+.cx-chat-msg[data-who="in"] .cx-chat-bubble { background: var(--background); box-shadow: 0 0 0 1px var(--border); border-bottom-left-radius: 4px; }
+.cx-chat-msg[data-who="out"] .cx-chat-bubble { background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: 4px; }
+.cx-chat-msg[data-who="out"] .cx-chat-bubble .cx-text { color: inherit; opacity: .8; }
+.cx-chat-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.cx-chat-meta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: -2px; }
+.cx-chat-meta .cx-text { font-size: 11px; }
+.cx-tick { width: 14px; height: 14px; opacity: .75; }
+.cx-tick[data-status="read"] { color: #53bdeb; opacity: 1; }
+.cx-chat-img { display: block; width: 220px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; }
+.cx-chat-audio { display: flex; align-items: center; gap: 8px; min-width: 200px; }
+.cx-chat-audio .cn-progress { flex: 1; }
+.cx-chat-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--primary-foreground) 12%, transparent); }
+.cx-chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.cx-typing { flex-direction: row; gap: 4px; padding: 12px 14px; }
+.cx-typing i { width: 6px; height: 6px; border-radius: 99px; background: var(--muted-foreground); animation: cx-typing 1.2s infinite; }
+.cx-typing i:nth-child(2) { animation-delay: .15s; } .cx-typing i:nth-child(3) { animation-delay: .3s; }
+@keyframes cx-typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
+.cx-bot { display: flex; flex-direction: column; width: 100%; max-width: 440px; height: 520px; margin: 0 auto; border-radius: calc(var(--radius) * 1.6); overflow: hidden; box-shadow: 0 0 0 1px var(--border); background: var(--background); }
+.cx-bot-face { display: flex; align-items: center; justify-content: center; gap: 7px; width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--selected); }
+.cx-bot-face i { display: block; width: 5px; height: 9px; border-radius: 99px; background: var(--selected-foreground); animation: cx-blink-eye 4s infinite; }
+@keyframes cx-blink-eye { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.15); } }
+.cx-bot-sugs { padding: 8px 12px; gap: 6px; border-top: 1px solid var(--border); }
+.cx-bot .cx-chat-actions .cn-button[aria-pressed="true"][aria-pressed][aria-pressed] { background: var(--selected-soft); color: var(--foreground); border-color: transparent; }
+
+/* ═════ Dashboard ═════ */
+.cx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
+.cx-stat .cx-text[data-variant="title"] { font-size: 24px; font-variant-numeric: tabular-nums; }
+.cx-spark { width: 100%; height: 28px; margin-top: 2px; }
+.cx-chart-card { flex: 2 1 420px; min-width: 0; }
+.cx-onboard { flex: 1 1 280px; min-width: 0; }
+.cx-chart-body { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 14px; }
+.cx-chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 180px; text-align: right; }
+.cx-chart-plot { position: relative; display: grid; grid-template-rows: 180px auto; gap: 6px; }
+.cx-chart-grid { position: absolute; inset: 0 0 auto; height: 180px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
+.cx-chart-grid i { border-top: 1px dashed var(--border); }
+.cx-chart-bars { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; align-items: end; height: 180px; }
+.cx-chart-bar { display: flex; align-items: flex-end; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: bottom; }
+.cx-chart-bar i { width: 100%; height: var(--v); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--primary) 85%, transparent); transition: background-color 150ms; }
+.cx-chart-bar:hover i, .cx-chart-bar:focus-visible i { background: var(--selected); }
+.cx-chart-bar:focus-visible { outline: none; }
+.cx-chart-x { display: grid; grid-template-columns: repeat(var(--n), 1fr); }
+.cx-chart-x span { overflow: visible; white-space: nowrap; }
+.cx-check-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--border); font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
+.cx-check-dot[data-done] { background: var(--success); box-shadow: none; color: #fff; animation: cx-pop 300ms cubic-bezier(.22, 1, .36, 1); }
+.cx-check-dot svg { width: 13px; height: 13px; }
+
+/* ═════ Settings ═════ */
+.cx-settings { width: 100%; max-width: 760px; }
+.cx-set-form { position: relative; display: flex; flex-direction: column; gap: 0; padding-bottom: 72px; }
+.cx-set-sec { display: grid; grid-template-columns: 220px 1fr; gap: 16px 32px; padding: 20px 0; border-top: 1px solid var(--border); }
+.cx-set-sec:first-child { border-top: 0; padding-top: 0; }
+@container (max-width: 600px) { .cx-set-sec { grid-template-columns: 1fr; } }
+.cx-settings { container-type: inline-size; }
+/* floats over the form: it never takes or gives back space, it only fades and slides */
+.cx-dirty { position: sticky; bottom: 0; z-index: 5; height: 88px; box-sizing: border-box; padding: 24px 0 16px; display: flex; justify-content: flex-end; align-items: flex-end; pointer-events: none; }
+.cx-dirty > .cx-dirty-in { position: relative; max-width: 100%; height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 0 8px 0 18px; white-space: nowrap; border-radius: 99px; background: var(--foreground); color: var(--background); box-shadow: 0 16px 36px -14px rgb(0 0 0 / .45); opacity: 0; transform: translateY(10px) scale(.98); visibility: hidden; transition: opacity 180ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 240ms; }
+.cx-dirty[data-open] > .cx-dirty-in { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 180ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
+@media (prefers-reduced-motion: reduce) { .cx-dirty > .cx-dirty-in { transform: none; } }
+.cx-dirty .cx-text { color: inherit; }
+.cx-dirty .cn-button-variant-ghost { color: inherit; }
+.cx-dirty .cn-button-variant-ghost:hover { background: color-mix(in srgb, var(--background) 14%, transparent); color: inherit; }
+.cx-dirty .cn-button-variant-default { background: var(--background); color: var(--foreground); }
+.cx-save-w { min-width: 7.5rem; }
+.cx-wh-day { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
+.cx-wh-day:first-child { border-top: 0; padding-top: 0; }
+.cx-wh-name { display: flex; align-items: center; gap: 10px; height: 32px; }
+.cx-wh-ranges { display: flex; flex-direction: column; gap: 6px; min-height: 32px; justify-content: center; }
+.cx-wh-range { display: flex; align-items: center; gap: 8px; }
+@container (max-width: 520px) { .cx-wh-day { grid-template-columns: 1fr; } }
+
+/* ═════ Plans, card, team, permissions ═════ */
+.cx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; width: 100%; max-width: 920px; }
+.cx-plan { display: flex; flex-direction: column; gap: 12px; padding: 0; cursor: pointer; transition: box-shadow 160ms, transform 160ms; }
+.cx-plan:hover { transform: translateY(-2px); }
+.cx-plan[aria-checked="true"] { box-shadow: 0 0 0 2px var(--selected); }
+.cx-plan:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
+.cx-plan-price { display: flex; align-items: baseline; gap: 6px; }
+.cx-plan-price .cx-text[data-variant="title"] { font-size: 26px; font-variant-numeric: tabular-nums; }
+.cx-plan-feats { list-style: none; margin: 0; padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
+.cx-plan-feats li { display: flex; gap: 8px; align-items: flex-start; }
+.cx-plan-feats svg { width: 16px; height: 16px; color: var(--success); flex: none; margin-top: 2px; }
+.cx-cc-brand { font-size: 12px; font-weight: 700; color: var(--foreground); }
+#cc-msg { display: flex; align-items: center; gap: 6px; }
+#cc-msg svg { width: 14px; height: 14px; flex: none; }
+#cc-msg[data-tone="bad"] { color: var(--destructive); }
+#cc-msg[data-tone="ok"] { color: var(--success); }
+.cx-team { width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
+.cx-perm { min-width: 520px; }
+.cx-perm .cx-perm-c { width: 120px; text-align: center; }
+.cx-perm td { height: auto; padding-block: 10px; }
+.cx-perm .cn-checkbox:disabled { opacity: .6; }
+#perms { width: 100%; max-width: 760px; margin: 0 auto; }
+
+/* ═════ Stamps, bell, queue, password ═════ */
+.cx-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; width: 100%; max-width: 1080px; align-items: start; }
+.cx-extras > div { display: flex; flex-direction: column; gap: 10px; }
+.cx-stamp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 14px 16px; }
+.cx-stamp { aspect-ratio: 1; display: grid; place-items: center; border-radius: 99px; border: 1.5px dashed var(--border); color: var(--muted-foreground); }
+.cx-stamp svg { width: 18px; height: 18px; }
+.cx-stamp[data-on] { border: 0; background: var(--selected); color: var(--selected-foreground); }
+.cx-stamp[data-gift]:not([data-on]) { border-style: solid; color: var(--selected); }
+.cx-stamp[data-pop] { animation: cx-stamp-pop 420ms cubic-bezier(.22, 1.4, .36, 1); }
+@keyframes cx-stamp-pop { 0% { transform: scale(1.6) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
+.cx-bell-wrap { position: relative; }
+.cx-count-ind { width: auto; min-width: 18px; height: 18px; padding: 0 5px; top: -6px; right: -6px; color: var(--on-destructive); font-size: 11px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
+.cx-bellpop { width: 340px; padding: 0; overflow: hidden; }
+.cx-bell-list { max-height: 320px; overflow-y: auto; padding: 4px; }
+.cx-bell-it { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius); }
+.cx-bell-it:hover { background: var(--accent); }
+.cx-bell-it:not([data-unread]) .cn-item-title { font-weight: 400; color: var(--muted-foreground); }
+.cx-tonal-ic { --tone: var(--info); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--tone) 13%, transparent); color: var(--tone); }
+.cx-tonal-ic[data-tone="ok"] { --tone: var(--success); } .cx-tonal-ic[data-tone="wait"] { --tone: var(--warning); } .cx-tonal-ic[data-tone="bad"] { --tone: var(--destructive); }
+.cx-tonal-ic svg { width: 16px; height: 16px; }
+.cx-unread-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--selected); }
+.cx-q-pos { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: var(--muted); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
+.cx-pw-meter { display: flex; flex-direction: column; gap: 8px; }
+.cx-pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
+.cx-pw-bars .cn-progress { height: 4px; }
+.cx-pw-bars .cn-progress .cn-progress-indicator { transition: transform 260ms cubic-bezier(.22, 1, .36, 1), background-color 200ms; }
+.cx-pw-bars .cn-progress[data-tone="bad"] .cn-progress-indicator { background: var(--destructive); }
+.cx-pw-bars .cn-progress[data-tone="wait"] .cn-progress-indicator { background: var(--warning); }
+.cx-pw-bars .cn-progress[data-tone="ok"] .cn-progress-indicator { background: var(--success); }
+.cx-pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.cx-pw-rules li { display: flex; align-items: center; gap: 8px; }
+.cx-pw-rules svg { width: 14px; height: 14px; color: var(--border); transition: color 200ms, transform 200ms; }
+.cx-pw-rules li[data-ok] svg { color: var(--success); transform: scale(1.15); }
+.cx-pw-rules li[data-ok] .cx-text { color: var(--foreground); }
+.cx-ag-ev:has(> .cx-text:only-child) { justify-content: center; padding-block: 0; }
+.cx-team .cn-item-group, .cx-extras .cn-item-group { gap: 0; }
+.cx-team .cn-item-separator, .cx-extras .cn-item-separator { margin-block: 0; }
+.cx-team .cn-item, .cx-extras .cn-item { padding-inline: 4px; }
+
+/* ═════ native <select>: its list follows the theme (never white on white) ═════ */
+.style-nova select, [data-skin] select { color-scheme: light; background-color: var(--background); color: var(--foreground); }
+:root[data-theme="dark"] .style-nova select, :root[data-theme="dark"] [data-skin] select, [data-skin="tienda"] select { color-scheme: dark; }
+.style-nova select option, .style-nova select optgroup, [data-skin] select option { background-color: var(--popover); color: var(--popover-foreground); }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .style-nova select { color-scheme: dark; } }
+
+/* ═════ charts fill their card, no blank band ═════ */
+.cx-chart-card, .cx-onboard { display: flex; }
+.cx-chart-card > .cn-card, .cx-onboard > .cn-card { flex: 1; }
+.cx-chart { display: flex; flex-direction: column; }
+.cx-chart-body { flex: 1; min-height: 220px; grid-template-rows: 1fr; }
+.cx-chart-y { height: auto; padding-bottom: 22px; }
+.cx-chart-plot { grid-template-rows: 1fr auto; min-height: 0; }
+.cx-chart-grid { height: auto; bottom: 22px; }
+.cx-chart-bars { height: 100%; min-height: 160px; }
+
+/* ═════ chat: one height per element, everywhere ═════ */
+.cx-ib-th { height: 56px; padding: 0 14px; }
+.cx-ib-list > .cx-vstack:first-child { padding: 12px !important; gap: 10px !important; }
+.cx-ib-row { min-height: 60px; }
+.cx-bot-sugs .cn-button { height: 28px; }
+.cx-chat-bubble { min-height: 36px; }
+.cx-chat-audio { height: 32px; }
+.cx-chat-audio .cn-button { width: 28px; height: 28px; }
+.cx-stat-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--muted); color: var(--muted-foreground); }
+.cx-stat-ic svg { width: 15px; height: 15px; }
+
+/* ═════ Agenda v2 ═════ */
+.cx-agenda { container-type: inline-size; }
+.cx-ag-who { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
+.cx-ag-who .cn-button { flex: none; gap: 6px; }
+.cx-ag-who .cn-button .cn-avatar { width: 20px; height: 20px; }
+.cx-ag-who .cn-button .cn-avatar .cn-avatar-fallback { font-size: 9px; }
+.cx-ag-who .cn-button[aria-pressed="true"][aria-pressed][aria-pressed] { background: var(--selected-soft); color: var(--selected); border-color: transparent; }
+.cx-ag-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
+.cx-ag-day small { font-size: 11px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .04em; }
+.cx-ag-day b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.cx-ag-day .cx-ag-count { min-width: 18px; height: 16px; border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+.cx-ag-day[data-today] b { color: var(--selected); }
+.cx-ag-day[aria-pressed="true"] small, .cx-ag-day[aria-pressed="true"] .cx-ag-count, .cx-ag-day[aria-pressed="true"] b { color: inherit; }
+.cx-ag-colhead { display: flex; align-items: center; justify-content: center; gap: 6px; }
+.cx-ag-colhead .cn-avatar { width: 22px; height: 22px; }
+.cx-ag-colhead .cn-avatar .cn-avatar-fallback { font-size: 9px; }
+.cx-ag-colhead[data-today] { color: var(--selected); }
+.cx-ag { grid-template-rows: 44px 1fr; }
+.cx-ag-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 90%, transparent) 0 6px, color-mix(in srgb, var(--muted) 45%, transparent) 6px 12px); pointer-events: none; display: grid; place-items: center; }
+.cx-ag-block { position: absolute; left: 3px; right: 3px; z-index: 1; display: flex; align-items: flex-start; padding: 4px 8px; border-radius: calc(var(--radius) * .6); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--foreground) 8%, transparent) 0 5px, transparent 5px 10px); box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
+.cx-ag-ev { left: auto; right: auto; }
+.cx-ag-grip { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
+.cx-ag-grip::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 3px; margin-left: -9px; border-radius: 99px; background: color-mix(in srgb, var(--tone) 55%, transparent); opacity: 0; transition: opacity 150ms; }
+.cx-ag-ev:hover .cx-ag-grip::after { opacity: 1; }
+.cx-ag-list { display: flex; flex-direction: column; gap: 6px; }
+.cx-ag-row { --tone: var(--info); display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--tone) 10%, var(--background)); color: var(--foreground); font: inherit; text-align: left; width: 100%; cursor: pointer; }
+.cx-ag-row[data-tone="ok"] { --tone: var(--success); } .cx-ag-row[data-tone="wait"] { --tone: var(--warning); }
+.cx-ag-row:hover { background: color-mix(in srgb, var(--tone) 16%, var(--background)); }
+.cx-ag-row-t { display: flex; flex-direction: column; width: 52px; flex: none; }
+.cx-ag-row .cn-badge { margin-left: auto; flex: none; }
+.cx-ag-row[data-kind="free"] { --tone: var(--border); border-style: dashed; background: var(--background); min-height: 44px; color: var(--muted-foreground); }
+.cx-ag-row[data-kind="free"] svg { width: 16px; height: 16px; }
+.cx-ag-row[data-kind="free"]:hover { border-color: var(--selected); color: var(--selected); }
+.cx-ag-row[data-kind="block"] { --tone: var(--muted-foreground); cursor: default; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--foreground) 5%, transparent) 0 5px, transparent 5px 10px); }
+.cx-rcpt-mini { display: block; width: 120px; aspect-ratio: 3 / 4; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); }
+@container (max-width: 700px) { .cx-ag-bar .cx-text[data-variant="heading"] { flex-basis: 100%; order: 9; } }
+
+/* time and menu triggers: field-like buttons, icon and chevron with real padding */
+.cx-time-btn { gap: 6px; padding-inline: 10px 12px; font-variant-numeric: tabular-nums; }
+.cx-time-btn svg { color: var(--muted-foreground); }
+.cx-time-btn[aria-invalid="true"] { border-color: var(--destructive); }
+.cx-sel-btn { justify-content: space-between; gap: 10px; padding-inline: 12px 10px; min-width: 128px; font-weight: 500; }
+.cx-sel-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cx-sel-btn > svg { color: var(--muted-foreground); transition: transform 160ms ease; }
+.cx-sel-btn[aria-expanded="true"] > svg { transform: rotate(180deg); }
+.cx-selmenu { position: fixed; z-index: 60; padding: 4px; max-width: min(320px, calc(100vw - 16px)); }
+.cx-selitem { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: calc(var(--radius) - 2px); cursor: default; outline: none; }
+.cx-selitem:focus { background: var(--accent); }
+.cx-selcheck { width: 16px; height: 16px; flex: none; }
+.cx-wh-range { display: flex; align-items: center; gap: 8px; }
+
+.cx-dirty .cx-grow { display: none; }
+.cx-dirty-acts { display: flex; gap: 4px; }
+@media (max-width: 480px) { .cx-dirty > .cx-dirty-in { flex: 1; min-width: 0; height: auto; min-height: 52px; padding: 6px 6px 6px 16px; gap: 8px; border-radius: 18px; white-space: normal; justify-content: space-between; } .cx-dirty-in > .cx-text { min-width: 0; line-height: 1.25; } .cx-dirty .cx-save-w { min-width: 0; } .cx-dirty-acts { flex: none; } }
+
+/* ── Composer = InputGroup + Textarea + block-end addon ── */
+.cx-composer { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-top: 1px solid var(--border); background: var(--background); flex: none; }
+.cx-composer-box { align-items: stretch; }
+.cx-composer-in { min-height: 40px; max-height: 160px; padding: 10px 12px 4px; font-size: 14px; line-height: 20px; overflow-y: auto; }
+.cx-composer-box > .cn-input-group-addon-align-block-end { gap: 2px; padding: 4px 6px 6px; cursor: default; }
+.cx-composer-box .cn-input-group-button-size-icon-sm { width: 32px; height: 32px; }
+.cx-composer-box [data-send] { border-radius: 99px; }
+.cx-composer-hint { margin: 0; padding-inline: 2px; }
+.cx-emoji { display: grid; grid-template-columns: repeat(5, 36px); gap: 2px; padding: 6px; width: auto; }
+.cx-emoji .cn-button { font-size: 18px; }
+.cx-chat-tag { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; font-size: 11px; font-weight: 600; opacity: .75; }
+.cx-chat-tag svg { width: 12px; height: 12px; }
+.cx-chat-sys { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; color: var(--muted-foreground); }
+.cx-chat-sys svg { width: 14px; height: 14px; flex: none; }
+
+/* ── Messaging: 3 panes (wide) · thread + sheet (mid) · one pane (narrow) ── */
+.cx-mx { display: grid; grid-template-columns: 320px minmax(0, 1fr) 288px; height: 640px; width: 100%; margin: 0 auto; border-radius: calc(var(--radius) * 1.6); border: 1px solid var(--border); background: var(--background); overflow: hidden; transition: max-width 260ms cubic-bezier(.22, 1, .36, 1); }
+.cx-mx[data-layout="mid"] { grid-template-columns: 300px minmax(0, 1fr); }
+.cx-mx[data-layout="narrow"] { grid-template-columns: minmax(0, 1fr); }
+.cx-mx:not([data-layout="wide"]) .cx-mx-ctx:not(.cx-mx-ctx-sheet) { display: none; }
+.cx-mx[data-layout="wide"] .cx-mx-ctxbtn { display: none; }
+.cx-mx-back { display: none; }
+.cx-mx[data-layout="narrow"] .cx-mx-back { display: inline-flex; }
+.cx-mx[data-layout="narrow"][data-view="list"] .cx-mx-thread, .cx-mx[data-layout="narrow"][data-view="thread"] .cx-mx-list { display: none; }
+.cx-mx[data-layout="narrow"] .cx-mx-hide-sm { display: none; }
+
+.cx-mx-list { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--border); }
+.cx-mx[data-layout="narrow"] .cx-mx-list { border-right: 0; }
+.cx-mx-lh { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 16px; flex: none; }
+.cx-mx-tools { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 10px; flex: none; }
+.cx-mx-chips { display: flex; gap: 6px; overflow-x: auto; margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
+.cx-mx-chips .cn-button { flex: none; gap: 6px; }
+.cx-mx-chips .cn-button[aria-pressed="true"] .cx-mx-n { color: inherit; opacity: .7; }
+.cx-mx-n { font-variant-numeric: tabular-nums; color: var(--muted-foreground); font-weight: 500; }
+.cx-noscrollbar { scrollbar-width: none; } .cx-noscrollbar::-webkit-scrollbar { display: none; }
+.cx-mx-items { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
+.cx-mx-row { width: 100%; min-height: 64px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius); flex-wrap: nowrap; }
+.cx-mx-row:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); }
+.cx-mx-row[aria-current="true"] { background: var(--selected-soft); }
+.cx-mx-row .cn-item-content { min-width: 0; }
+.cx-mx-row .cn-item-title { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; }
+.cx-mx-row .cn-item-title .cn-badge { flex: none; }
+.cx-mx-row:not([data-unread]) .cn-item-title { font-weight: 500; }
+.cx-mx-row[data-unread] .cn-item-description { color: var(--foreground); }
+.cx-mx-by { color: var(--muted-foreground); font-weight: 500; }
+.cx-mx-end { flex-direction: column; align-items: flex-end; gap: 6px; width: auto; flex: none; }
+.cx-mx-end .cn-badge { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; font-variant-numeric: tabular-nums; }
+.cx-mx-badge-gap { height: 20px; }
+.cx-mx-av { position: relative; display: inline-flex; flex: none; }
+.cx-mx-av .cx-ch { position: absolute; right: -6px; bottom: -5px; width: 16px; height: 16px; }
+.cx-ch-lg { position: static !important; width: 32px; height: 32px; border-radius: 10px; }
+.cx-ch-lg svg { width: 18px; height: 18px; }
+.cx-mx-lf { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; padding: 0 8px 0 16px; border-top: 1px solid var(--border); flex: none; }
+.cx-mx-empty { padding: 32px 12px; }
+
+.cx-mx-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.cx-mx-th { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); flex: none; }
+.cx-mx[data-layout="narrow"] .cx-mx-th { padding-left: 8px; }
+.cx-mx-thwho { gap: 0; min-width: 0; }
+.cx-mx-th .cn-button[data-mx-resolve][aria-pressed="true"][aria-pressed] { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 8%, transparent); }
+.cx-mx-control { flex: none; overflow: hidden; }
+.cx-mx-control:empty { display: none; }
+.cx-mx-control .cn-alert, .cx-mx-quick .cn-alert { border-radius: 0; border-width: 0 0 1px; }
+.cx-mx-control .cn-alert[data-tone="wait"] { background: color-mix(in srgb, var(--warning) 8%, var(--background)); }
+.cx-mx-control .cn-alert[data-tone="wait"] > svg { color: var(--warning); }
+.cx-mx .cn-alert { padding-right: 140px; }
+.cx-mx .cn-alert-action { top: 50%; transform: translateY(-50%); }
+.cx-mx-compose { flex: none; display: flex; flex-direction: column; background: var(--background); }
+.cx-mx-compose .cx-composer { border-top: 0; padding-top: 4px; }
+.cx-mx-quick { overflow: hidden; border-top: 1px solid var(--border); }
+.cx-mx-quick .cn-alert { border-width: 0; padding-right: 170px; }
+.cx-mx-qrow { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 6px; }
+.cx-mx-qrow .cn-button { flex: none; }
+.cx-chat-event { max-width: min(86%, 340px); }
+.cx-mx-card { width: 100%; }
+.cx-mx-card .cn-card-content { display: flex; flex-direction: column; gap: 6px; }
+.cx-mx-card .cn-card-footer { gap: 6px; flex-wrap: wrap; }
+.cx-mx-line { display: flex; justify-content: space-between; gap: 12px; }
+.cx-mx-total { padding-top: 6px; border-top: 1px dashed var(--border); }
+
+.cx-mx-ctx { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow-y: auto; padding: 20px 16px; border-left: 1px solid var(--border); }
+.cx-mx-ctx-sheet { border: 0; padding: 0; overflow: visible; }
+.cx-mx-who { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
+.cx-mx-who .cx-mx-av { margin-bottom: 6px; }
+.cx-mx-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius); }
+.cx-mx-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; min-width: 0; }
+.cx-mx-stats > div + div { border-left: 1px solid var(--border); }
+.cx-mx-stats .cx-text[data-variant="strong"] { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.cx-mx-sec { display: flex; flex-direction: column; gap: 8px; }
+.cx-mx-now { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
+.cx-mx-now:hover { background: var(--accent); }
+.cx-mx-dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.cx-mx-dl > div { display: flex; justify-content: space-between; gap: 12px; }
+.cx-mx-dl dd { margin: 0; text-align: right; }
+.cx-mx-acts { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
+.cx-mx-acts .cn-button { justify-content: flex-start; }
+.cx-mx-danger { color: var(--destructive); }
+.cx-mx-danger:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); }
+@media (max-width: 480px) { .cx-mx { height: 600px; } }
+.cx-mx-thname { min-width: 0; flex: 0 1 auto; }
+.cx-mx-thname > .cx-text { white-space: nowrap; }
+.cx-mx-thwho .cn-badge { flex: none; }
+
+/* ── Skeletons: Nova's Skeleton + Storio's shimmer; the layout comes from the real component's classes ── */
+.cx-sk { display: block; flex: none; max-width: 100%; border-radius: calc(var(--radius) * .6); background: linear-gradient(90deg, var(--sk-a) 0%, var(--sk-b) 50%, var(--sk-a) 100%); background-size: 200% 100%; animation: cx-sk 1.3s linear infinite; }
+:root, [data-skin] { --sk-a: color-mix(in srgb, var(--foreground) 10%, transparent); --sk-b: color-mix(in srgb, var(--foreground) 4%, transparent); }
+.cx-sk[data-shape="circle"] { border-radius: 99px; }
+.cx-sk[data-shape="pill"] { border-radius: 99px; }
+.cx-sk[data-shape="bubble"] { border-radius: 14px; }
+@keyframes cx-sk { to { background-position: -200% 0; } }
+@media (prefers-reduced-motion: reduce) { .cx-sk { animation: none; } }
+.cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.cn-item .cn-item-content > .cx-sk + .cx-sk { margin-top: 6px; }
+.cx-chat-msg[data-who="out"]:has(> .cx-sk) { align-items: stretch; }
+.cx-chat-msg:has(> .cx-sk) { align-items: stretch; }
+.cx-sk-demo { min-height: 120px; }
+.cx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
+.cx-sk-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
+.cx-sk-card { overflow: hidden; padding: 0; gap: 0; }
+.cx-sk-media { display: block; }
+.cx-sk-media > .cx-sk { border-radius: 0; }
+.cx-sk-chatbox { display: flex; flex-direction: column; height: 360px; max-width: 440px; margin: 0 auto; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.6); overflow: hidden; }
+.cx-sk-ag { display: flex; flex-direction: column; gap: 14px; }
+.cx-sk-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
+.cx-sk-grid { display: grid; grid-template-columns: 52px repeat(var(--cols), 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: 480px; }
+.cx-sk-hours { display: flex; flex-direction: column; gap: 38px; padding: 8px; border-right: 1px solid var(--border); }
+.cx-sk-col { position: relative; border-right: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0 47px, var(--border) 47px 48px); }
+.cx-sk-col:last-child { border-right: 0; }
+.cx-sk-ev { position: absolute; left: 4px; right: 4px; }
+.cx-sk-ev > .cx-sk { height: 100% !important; }
+.cx-sk-table { display: flex; flex-direction: column; }
+.cx-sk-tr { display: flex; gap: 24px; align-items: center; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--border); }
+@media (max-width: 640px) { .cx-sk-strip { grid-template-columns: repeat(4, 1fr); } .cx-sk-strip > :nth-child(n+5) { display: none; } }
+
+/* ── Agenda: one frame (people + days on top, grid or list below) ── */
+.cx-ag-frame { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4); background: var(--card, var(--background)); overflow: hidden; }
+.cx-ag-top { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); }
+.cx-ag-top:empty { display: none; }
+.cx-ag-strip { padding: 4px; border-radius: calc(var(--radius) * 1.1); background: color-mix(in srgb, var(--muted) 60%, transparent); }
+.cx-ag-strip .cx-ag-day { height: 56px; }
+.cx-ag-listwrap { padding: 12px; }
+.cx-ag-head { background: var(--card, var(--background)); }
+.cx-ag-off[data-all] { display: block; text-align: center; padding-top: 14px; }
+.cx-ag-off[data-all] > .cx-text { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--card, var(--background)); box-shadow: 0 0 0 1px var(--border); }
+.cx-ag-ev { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
+.cx-ag-ev[data-dragging] { opacity: .35; box-shadow: none; }
+.cx-ag-ghost { z-index: 4; pointer-events: none; opacity: .95; box-shadow: 0 12px 28px -10px rgb(0 0 0 / .5); outline: 2px solid var(--tone); outline-offset: -1px; transition: top 60ms linear, height 60ms linear; }
+.cx-ag-ghost[data-invalid] { --tone: var(--destructive); background: color-mix(in srgb, var(--destructive) 16%, var(--background)); }
+.cx-ag-ghost .cx-ag-grip { display: none; }
+.cx-ag-ghost-t { position: absolute; right: 6px; bottom: 4px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--foreground); color: var(--background); white-space: nowrap; }
+.cx-ag-ghost[data-invalid] .cx-ag-ghost-t { background: var(--destructive); color: #fff; }
+.cx-ag-ghost { background: color-mix(in srgb, var(--tone) 16%, var(--card, var(--background))); }
+.cx-ag-ghost[data-invalid] { background: color-mix(in srgb, var(--destructive) 18%, var(--card, var(--background))); }
+/* short appointments: never shorter than one line of text */
+.cx-ag-ev { min-height: 24px; }
+.cx-ag-ev:has(> .cx-text:only-child) .cx-text, .cx-ag-ev:has(> .cx-text + .cx-ag-grip:last-child) > .cx-text:first-child { font-size: 12px; line-height: 16px; }
+
+/* phone: the grid stays; columns scroll sideways under a fixed hours column */
+.cx-ag-head > span:first-child, .cx-ag-times { position: sticky; left: 0; z-index: 3; background: var(--card, var(--background)); }
+.cx-ag-times { z-index: 2; border-right: 1px solid var(--border); }
+@container (max-width: 700px) {
+  .cx-ag { min-width: calc(48px + var(--cols) * 128px); }
+  .cx-ag-head, .cx-ag-body { grid-template-columns: 48px repeat(var(--cols), 1fr); }
+  .cx-ag-now { left: 48px; }
+  .cx-ag-scroll { max-height: 70vh; }
+}
+.cx-ag-times { z-index: 5; }
+.cx-ag-head { z-index: 6; }
+.cx-ag-head > span:first-child { z-index: 7; }
+@container (max-width: 700px) {
+  .cx-ag-scroll { scroll-snap-type: x mandatory; scroll-padding-left: 48px; }
+  .cx-ag-col { scroll-snap-align: start; }
+}
+
+
+/* ═════════════════════════ 4. pk ═════════════════════════ */
+/* ═════ ColorPick de Storio, genérico (tokens de la piel) ═════ */
+
+/* THE APP'S ONE COLOUR PICKER (components/ColorPick.js, used through the ColorPick / PaintPick parts).
+   The trigger keeps the .cp-host/.cp-well classes, so every place that sized or ringed the old swatch
+   keeps doing so. The popover (.pk-*) lives on <body> with position:fixed so no panel clips it, and turns
+   into a bottom sheet on a phone. Gradients are optional per place (see the component's header). */
+.cp-host{ position:relative; display:inline-flex; }
+.cp-well{ width:2rem; height:2rem; flex:none; padding:0; cursor:pointer; border-radius:.6rem;
+  border:1px solid rgba(0,0,0,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
+/* PORTED from Fidelidad's custom swatch (.fd-sw-custom): the SAME conic RAINBOW ring, size, radii and
+   card-coloured gap, so Diseño's colour pickers look identical to Fidelidad's — not just «with a ring». */
+.cp-ring .cp-host{ width:2.5rem; height:2.5rem; padding:2px; border-radius:.7rem; overflow:visible;
+  display:grid; place-items:stretch;
+  background:conic-gradient(from 0deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e); }
+.cp-ring .cp-well{ width:100%; height:100%; border:0; border-radius:.48rem;
+  box-shadow:inset 0 0 0 2px var(--card); }
+.pk-well{ position:relative; overflow:hidden; }
+.pk-dot{ position:absolute; right:3px; bottom:3px; width:14px; height:14px; border-radius:50%; background:#fff;
+  display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.3); }
+.pk-scrim{ position:fixed; inset:0; z-index:var(--z-modal); background:transparent; }
+.pk-pop{ color:var(--popover-foreground); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; position:fixed; z-index:calc(var(--z-modal) + 1); width:292px; box-sizing:border-box; background:var(--popover); border-radius:20px;
+  box-shadow:0 24px 60px -18px rgba(31,22,60,.38), 0 0 0 1px var(--border); padding:12px;
+  display:flex; flex-direction:column; gap:11px; animation:pk-in .18s cubic-bezier(.2,.8,.3,1); }
+@keyframes pk-in{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
+@media (max-width:35rem){
+  .pk-scrim{ background:rgba(16,16,20,.28); }
+  .pk-pop{ left:0 !important; right:0; top:auto !important; bottom:0 !important; max-height:88dvh !important; width:auto; border-radius:22px 22px 0 0;
+    padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px)); animation:pk-up .24s cubic-bezier(.2,.8,.3,1); }
+  .pk-pop::before{ content:""; width:38px; height:5px; border-radius:5px; background:var(--muted); margin:0 auto 2px; }
+}
+@keyframes pk-up{ from{ transform:translateY(100%); } to{ transform:none; } }
+.pk-seg{ display:flex; background:var(--muted); border-radius:12px; padding:3px; gap:2px; }
+.pk-seg button{ flex:1; font:inherit; font-size:.78rem; font-weight:600; border:0; background:transparent; border-radius:9px;
+  padding:.42rem .4rem; cursor:pointer; color:var(--muted-foreground); }
+.pk-seg button.on{ background:var(--background); color:var(--foreground); box-shadow:0 1px 3px rgba(31,22,60,.14); }
+.pk-bar{ position:relative; height:26px; margin:0 10px; border-radius:9px; cursor:copy; touch-action:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
+.pk-stop{ position:absolute; top:50%; width:20px; height:30px; margin:-15px 0 0 -10px; border-radius:7px; border:2.5px solid #fff;
+  box-shadow:0 1px 5px rgba(0,0,0,.35); cursor:grab; touch-action:none; }
+.pk-stop.on{ box-shadow:0 0 0 2px var(--foreground), 0 2px 8px rgba(0,0,0,.35); }
+.pk-stop.gone{ opacity:.35; }
+.pk-map{ position:relative; height:150px; touch-action:none; cursor:crosshair; }
+.pk-map canvas{ position:absolute; inset:0; width:100%; height:100%; border-radius:12px; }
+.pk-map svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
+.pk-pt{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:2.5px solid #fff;
+  box-shadow:0 1px 6px rgba(0,0,0,.4); pointer-events:none; display:grid; place-items:center; font-size:.58rem; font-weight:800;
+  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); transition:width .1s, height .1s, margin .1s; }
+.pk-pt.on{ width:28px; height:28px; margin:-14px 0 0 -14px; box-shadow:0 0 0 2px var(--foreground), 0 2px 8px rgba(0,0,0,.4); }
+.pk-row{ display:flex; align-items:center; gap:8px; }
+.pk-grow{ flex:1; }
+.pk-lbl{ font-size:.7rem; font-weight:700; color:var(--muted-foreground); flex:none; width:62px; }
+.pk-range{ flex:1; min-width:0; -webkit-appearance:none; appearance:none; height:12px; border-radius:99px; outline-offset:3px; }
+.pk-range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid #fff;
+  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.3); cursor:grab; }
+.pk-range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
+.pk-hex{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:10px; padding:5px 8px; }
+.pk-hex i{ width:18px; height:18px; border-radius:5px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
+.pk-hex input{ font:600 .82rem var(--font-mono); border:0; outline:0; width:100%; min-width:0; background:transparent;
+  text-transform:uppercase; color:var(--foreground); }
+.pk-ic{ font:inherit; width:32px; height:32px; flex:none; border-radius:10px; border:1px solid var(--border); background:var(--background); color:var(--foreground);
+  cursor:pointer; display:grid; place-items:center; color:var(--muted-foreground); }
+.pk-ic:disabled{ opacity:.35; cursor:default; }
+.pk-ic.on{ background:var(--foreground); border-color:var(--foreground); color:var(--background); }
+.pk-dial{ width:32px; height:32px; flex:none; border-radius:50%; border:1px solid var(--border); position:relative;
+  cursor:grab; touch-action:none; background:var(--background); }
+.pk-dial i{ position:absolute; left:50%; top:50%; width:2px; height:12px; margin-left:-1px; background:var(--foreground);
+  border-radius:2px; transform-origin:50% 0; }
+.pk-deg{ font:600 .74rem var(--font-mono); color:var(--muted-foreground); width:34px; }
+.pk-sep{ height:1px; background:var(--border); margin:0 -12px; }
+.pk-anims{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:4px; }
+.pk-anims button{ font:inherit; font-size:.64rem; font-weight:600; border:1px solid var(--border); background:var(--background); color:var(--foreground);
+  border-radius:10px; padding:4px 2px 5px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted-foreground); }
+.pk-anims button i{ width:100%; height:18px; border-radius:6px; }
+.pk-anims button.on{ border-color:var(--foreground); box-shadow:0 0 0 1px var(--foreground); color:var(--foreground); }
+.pk-sw{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
+.pk-sw button{ aspect-ratio:1; width:100%; border-radius:10px; border:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
+  transition:transform .12s ease; }
+.pk-sw button:hover{ transform:scale(1.08); }
+.pk-recent{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
+.pk-recent button{ width:22px; height:22px; border-radius:7px; border:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
+.pk-pop button:focus-visible, .pk-pop input:focus-visible, .pk-pop [tabindex]:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
+/* the animations a picked paint can carry (lib/paint.ts paintCss). «breathe» and «hue» move a filter, so
+   a host puts them on a layer behind its text. */
+@property --pk-angle{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
+@keyframes pk-flow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
+@keyframes pk-breathe{ 0%,100%{ filter:saturate(1) brightness(1); } 50%{ filter:saturate(1.35) brightness(1.12); } }
+@keyframes pk-spin{ to{ --pk-angle:360deg; } }
+@keyframes pk-hue{ to{ filter:hue-rotate(360deg); } }
+@media (prefers-reduced-motion: reduce){ .pk-pop, .pk-well{ animation:none !important; } }
+.pk-stop::before{ content:""; position:absolute; inset:-9px -8px; }
+.pk-bar.grabbing, .pk-bar.grabbing .pk-stop{ cursor:grabbing; }
+/* «Saturación N»: the slider acts on ONE point of the gradient, and its label shows which (number + colour). */
+.pk-satlbl{ display:flex; align-items:center; gap:5px; width:auto; min-width:62px; }
+.pk-satdot{ width:16px; height:16px; flex:none; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:.56rem;
+  font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.15); }
+
+
+/* ═════════════════════════ 5. mslider ═════════════════════════ */
+/* ═════ Slider de Storio (components/Slider.js), genérico ═════ */
+.mslider { --track: var(--muted); }
+.mslider { position: relative; padding-top: 2.1rem; width: 100%; }
+.mslider-bubble {
+  position: absolute; top: 0; transform: translateX(-50%); pointer-events: none;
+  background: var(--primary); color: var(--primary-foreground);
+  font-weight: 700; font-size: .72rem; padding: .24rem .5rem; border-radius: 8px;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+  box-shadow: 0 3px 10px rgb(0 0 0 / .2);
+}
+.mslider-bubble::after {
+  content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
+  border: 5px solid transparent; border-top-color: var(--primary); border-bottom: 0;
+}
+.mslider-input {
+  -webkit-appearance: none; appearance: none;
+  width: 100%; height: 1.6rem; margin: 0; padding: 0;
+  background: transparent; cursor: pointer; display: block;
+}
+.mslider-input:focus { outline: none; }
+
+/* WebKit / Blink (Chrome, Safari, Edge) */
+.mslider-input::-webkit-slider-runnable-track {
+  height: .5rem; border-radius: 999px;
+  background: linear-gradient(var(--primary), var(--primary)) left/var(--p, 50%) 100% no-repeat, var(--track);
+}
+.mslider-input::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 1.3rem; height: 1.3rem; margin-top: -.4rem;
+  border-radius: 50%; background: var(--background); border: .3rem solid var(--primary);
+  box-shadow: 0 2px 5px rgb(0 0 0 / .3); transition: transform .1s ease;
+}
+.mslider-input:active::-webkit-slider-thumb { transform: scale(1.12); }
+.mslider-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 2px 5px rgb(0 0 0 / .3), 0 0 0 4px var(--ring); }
+
+/* Firefox */
+.mslider-input::-moz-range-track { height: .5rem; border-radius: 999px; background: var(--track); }
+.mslider-input::-moz-range-progress { height: .5rem; border-radius: 999px; background: var(--primary); }
+.mslider-input::-moz-range-thumb {
+  width: 1.3rem; height: 1.3rem; border: .3rem solid var(--primary);
+  border-radius: 50%; background: var(--background); box-shadow: 0 2px 5px rgb(0 0 0 / .3);
+}
+.mslider-input:active::-moz-range-thumb { transform: scale(1.12); }
+
+
+
+/* ── muten adapters, kit core: the island as the app's one floating notice (the artifact showed it inside a phone) ── */
+.cx-island.cx-island-app { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: var(--z-toast); }
+.cx-kit-layer { color: var(--foreground); }
+.cx-gap-2 { gap: 2px; } .cx-gap-14 { gap: 14px; }
+.cx-dirty-host, .cx-kit-widget { display: contents; }
+
+/* ── muten adapters, batch: people, fields, notices ── */
+.cx-who > .cx-who-t { display: block; } .cx-who .cx-who-n { display: block; font-weight: 500; } .cx-who .cx-who-s { color: var(--muted-foreground); font-size: 13px; }
+.cx-av-wrap { display: inline-flex; }
+.cn-avatar-badge.cx-online { width: 10px; height: 10px; }
+.cx-field-behavior, .cx-island-host, .cx-kit-host { display: none; }
+/* Band from muten: data-open is "true"/"false" (the artifact toggled the attribute). */
+.cx-band-slot[data-open="false"] { grid-template-rows: 0fr; }
+.cx-band-slot > .cx-band-fold { overflow: hidden; min-height: 0; }
+.cx-band-slot > .cx-band-fold > .cx-band { transition: opacity 140ms ease; }
+.cx-band-slot[data-open="false"] > .cx-band-fold > .cx-band { opacity: 0; }
+.cx-band > .mu-icon { font-size: 16px; flex: none; }
+.cx-band[data-tone="warn"] > .mu-icon { color: var(--warning); }
+.cx-band > .cx-band-text { flex: 1; }
+/* Accordion from muten: the panel folds with grid rows (exact height, no measuring) and its text fades. */
+.cn-accordion-content.cx-acc-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 200ms ease; animation: none; }
+.cn-accordion-content.cx-acc-fold[data-open="false"] { grid-template-rows: 0fr; }
+.cn-accordion-content.cx-acc-fold > .cn-accordion-content-inner { overflow: hidden; min-height: 0; transition: opacity 160ms ease; }
+.cn-accordion-content.cx-acc-fold[data-open="false"] > .cn-accordion-content-inner { opacity: 0; padding-bottom: 0; }
+.cn-accordion-trigger > .cx-acc-chev { margin-left: auto; font-size: 16px; color: var(--muted-foreground); transition: transform 200ms ease; }
+.cn-accordion-trigger[aria-expanded="true"] > .cx-acc-chev { transform: rotate(180deg); }
+.cn-accordion-trigger { width: 100%; }
+.cx-fake > .mu-span { display: block; height: 34px; border-radius: calc(var(--radius) * .8); background: var(--muted); }
+.cx-fake > .mu-span:nth-child(2n) { width: 80%; }
+.cx-appbar-down { margin-top: 44px; }
+.cx-otp-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }
+.cx-car-behavior, .cx-tags-host:empty, .cx-pgnav-host:empty { display: none; }
+.cx-car-slide > * { min-width: 0; }
+.cx-thumb .cx-thumb-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background-size: cover; }
+/* muten adapters · collections: backgrounds that come from data ride --bg (muten's style()). */
+.cx-prod-ph { width: 100%; aspect-ratio: 1; border-radius: calc(var(--radius) * 1.2); background: var(--bg, var(--muted)); }
+.cx-hero[style*="--bg"], .cx-gallery-img[style*="--bg"] { background: var(--bg); }
+.cx-gap-8 { gap: 8px; }
+.cx-pg-row > .cx-pg-who { display: flex; flex-direction: column; } .cx-pg-row .cx-pg-sub { font-size: 12px; color: var(--muted-foreground); } .cx-pg-row > .cx-pg-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
+.mu-stack.cx-car-slide { display: block; }
+
+/* ── Loading: the content fades in where its skeleton was (kit-skeleton.muten) ── */
+:where(.style-nova) .cx-loading, :where(.style-nova) .cx-loaded, :where(.style-nova) .cx-sk-host { display: block; }
+.cx-loaded { animation: cx-loaded-in 180ms ease-out; }
+@keyframes cx-loaded-in { from { opacity: 0.001; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .cx-loaded { animation: none; } }
+/* a skeleton line inside an Item title takes the title's width (the title shrinks to its text otherwise) */
+.cn-item-title:has(> .cx-sk) { width: 100%; }
+.cx-sk-tr > .cx-sk { flex: 0 1 auto; min-width: 0; }
+
+/* ── ToggleGroup: Base UI marks orientation and spacing with its own attributes; muten writes data-orientation and
+   data-spacing, so the joined / separated / vertical looks are restated on those (toggle-group.muten) ── */
+.style-nova .cn-toggle-group { display: flex; width: fit-content; flex-direction: row; align-items: center; }
+.style-nova .cn-toggle-group[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
+.style-nova .cn-toggle-group[data-spacing="1"] { gap: 4px; }
+.style-nova .cn-toggle-group[data-spacing="2"] { gap: 8px; }
+.style-nova .cn-toggle-group[data-spacing="0"] > .cn-toggle { border-radius: 0; }
+.style-nova .cn-toggle-group[data-spacing="0"][data-orientation="horizontal"] > .cn-toggle:first-child { border-top-left-radius: var(--radius-lg, 10px); border-bottom-left-radius: var(--radius-lg, 10px); }
+.style-nova .cn-toggle-group[data-spacing="0"][data-orientation="horizontal"] > .cn-toggle:last-child { border-top-right-radius: var(--radius-lg, 10px); border-bottom-right-radius: var(--radius-lg, 10px); }
+.style-nova .cn-toggle-group[data-spacing="0"][data-orientation="horizontal"] > .cn-toggle-variant-outline:not(:first-child) { border-left-width: 0; }
+.style-nova .cn-toggle-group[data-spacing="0"][data-orientation="vertical"] > .cn-toggle:first-child { border-top-left-radius: var(--radius-lg, 10px); border-top-right-radius: var(--radius-lg, 10px); }
+.style-nova .cn-toggle-group[data-spacing="0"][data-orientation="vertical"] > .cn-toggle:last-child { border-bottom-left-radius: var(--radius-lg, 10px); border-bottom-right-radius: var(--radius-lg, 10px); }
+.style-nova .cn-toggle-group[data-spacing="0"][data-orientation="vertical"] > .cn-toggle-variant-outline:not(:first-child) { border-top-width: 0; }
+.style-nova .cn-toggle-group[data-spacing="0"][data-variant="outline"] { box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
+.style-nova .cn-toggle[aria-pressed="true"] { background: var(--muted); }
+.style-nova .cn-button-group > .cx-av-wrap, .style-nova .cn-button-group > .mu-stack { display: flex; }
+
+/* ── RadioGroup: muten writes data-state="true|false" (Base UI's data-checked is presence-only) ── */
+.cx-rg { display: grid; gap: 12px; }
+.cx-rg[data-orientation="horizontal"] { grid-auto-flow: column; justify-content: start; gap: 20px; }
+.cx-rg-row { display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
+.cx-rg-row:focus-visible { outline: none; }
+.cx-rg-row:focus-visible .cx-rg-dot { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
+.cx-rg-dot { position: relative; display: block; width: 16px; height: 16px; margin-top: 2px; border-radius: 99px; border: 1px solid var(--input); background: transparent; transition: background-color 150ms, border-color 150ms; }
+.cx-rg-dot[data-state="true"] { background: var(--primary); border-color: var(--primary); }
+.cx-rg-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 99px; background: var(--primary-foreground); transform: translate(-50%, -50%) scale(0); transition: transform 150ms cubic-bezier(.22, 1, .36, 1); }
+.cx-rg-dot[data-state="true"]::after { transform: translate(-50%, -50%) scale(1); }
+.cx-rg-row:active .cx-rg-dot { scale: .92; }
+.cx-rg-text { display: flex; flex-direction: column; gap: 2px; }
+.cx-rg-text > .cn-field-description:empty { display: none; }
+.cx-rg-text > .cn-label { cursor: pointer; }
+
+/* ── Checkbox: muten's native primitive with Nova's look — Checkbox "Acepto" bind(x) class("cx-checkbox")
+   (the primitive is a <label> around the <input>; the class lands on the label) ── */
+.cx-checkbox { display: inline-flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; font-size: 14px; line-height: 20px; cursor: pointer; }
+.cx-checkbox > input[type="checkbox"] { margin-top: 2px; }
+.cx-checkbox > .mu-checkbox-label { min-width: 0; }
+.cx-checkbox > input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 16px; height: 16px; border: 1px solid var(--input); border-radius: 4px; background: transparent center / 12px no-repeat; cursor: pointer; transition: background-color 150ms, border-color 150ms; }
+.cx-checkbox > input[type="checkbox"]:checked { background-color: var(--primary); border-color: var(--primary); background-image: var(--cx-check-mark); }
+.cx-checkbox { --cx-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
+:root[data-theme="dark"] .cx-checkbox { --cx-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
+.cx-checkbox > input[type="checkbox"]:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
+.cx-checkbox:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
+.cx-checkbox > input[type="checkbox"]:active { scale: .92; }
+
+/* ── NumberField / VectorField (number-field.js, vector-field.muten) ── */
+.cx-nf-host { display: block; }
+.cx-nf { width: fit-content; max-width: 100%; }
+.cx-nf-input { text-align: left; font-variant-numeric: tabular-nums; field-sizing: content; min-width: 3ch; width: auto; flex: 0 1 auto; padding-right: 2px; }
+.cx-nf-prefix { font-size: 12px; font-weight: 600; color: var(--muted-foreground); min-width: 14px; }
+.cx-nf-unit { font-size: 13px; color: var(--muted-foreground); padding-right: 2px; }
+.cx-nf-steps { gap: 0; padding-right: 4px; }
+.cx-nf-btn:disabled { opacity: .35; }
+.cx-vector { display: flex; flex-wrap: wrap; gap: 8px; width: fit-content; max-width: 100%; }
+.cx-vector .cx-nf { max-width: none; }
+/* ── FileInput (file-input.js) ── */
+.cx-file-host { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; }
+.cx-file-drop { aspect-ratio: auto; min-height: 132px; }
+.cx-file-drop[data-over] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
+.cx-file-msg { text-align: left; margin: 0; color: var(--destructive); }
+.cx-file-msg:empty { display: none; }
+.cx-file-list:empty { display: none; }
+.cx-file-list { gap: 6px; }
+
+/* ── Swatch (swatch.muten) ── */
+.cx-swatches-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
+.cx-swatch { --s: 28px; width: var(--s); height: var(--s); flex: none; padding: 0; border-radius: calc(var(--radius) * .8); border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); background: var(--bg); cursor: pointer; transition: box-shadow 150ms, scale 120ms; }
+.cx-swatch[data-size="sm"] { --s: 20px; border-radius: calc(var(--radius) * .6); }
+.cx-swatch[data-size="lg"] { --s: 36px; }
+.cx-swatch:hover { scale: 1.06; }
+.cx-swatch:active { scale: .94; }
+.cx-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--selected, var(--ring)); }
+.cx-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
+
+/* ── Collapsible (collapsible.muten) ── */
+.cx-coll { display: flex; flex-direction: column; width: 100%; max-width: 420px; border: 1px solid var(--border); border-radius: var(--radius); }
+.cx-coll-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; border-radius: var(--radius); }
+.cx-coll-trigger:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }
+.cx-coll-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
+.cx-coll-label { flex: 1; }
+.cx-coll-hint { font-size: 13px; font-weight: 400; color: var(--muted-foreground); }
+.cx-coll-hint:empty { display: none; }
+.cx-coll-trigger[aria-expanded="true"] .cx-acc-chev { rotate: 180deg; }
+.cx-coll .cx-acc-chev { width: 16px; height: 16px; color: var(--muted-foreground); transition: rotate 200ms ease; }
+.cx-coll-inner { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
+/* ── ScrollArea (scroll-area.muten) ── */
+.cx-scroll-area { display: block; max-height: var(--h, 18rem); overflow-y: auto; overflow-x: hidden; border-radius: var(--radius); }
+.cx-scroll-area[data-orientation="horizontal"] { max-height: none; overflow-x: auto; overflow-y: hidden; }
+/* ── Resizable (resizable.muten) ── */
+.cx-rz { display: flex; flex-direction: row; width: 100%; min-height: 200px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.2); overflow: hidden; }
+.cx-rz[data-orientation="vertical"] { flex-direction: column; }
+.cx-rz-panel { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
+.cx-rz-handle { position: relative; flex: none; width: 1px; display: flex; align-items: center; justify-content: center; background: var(--border); cursor: col-resize; touch-action: none; outline: none; }
+.cx-rz-handle::after { content: ""; position: absolute; inset: 0 -4px; }
+.cx-rz[data-orientation="vertical"] > .cx-rz-handle { width: auto; height: 1px; cursor: row-resize; }
+.cx-rz[data-orientation="vertical"] > .cx-rz-handle::after { inset: -4px 0; }
+.cx-rz-handle:focus-visible, .cx-rz-handle[data-drag] { background: var(--ring); }
+.cx-rz-handle .cn-resizable-handle-icon { display: block; width: 4px; height: 24px; border-radius: 99px; background: var(--border); z-index: 1; }
+.cx-rz[data-orientation="vertical"] .cn-resizable-handle-icon { width: 24px; height: 4px; }
+.cx-rz-behavior { display: none; }
+/* ── Timeline (timeline.muten): the artifact's .cx-timeline on muten's Stacks ── */
+.cx-tl { display: flex; flex-direction: column; gap: 12px; padding-left: 4px; }
+.cx-tl-item { position: relative; display: flex; flex-direction: column; gap: 1px; padding-left: 18px; }
+.cx-tl-item::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 99px; background: var(--border); }
+.cx-tl-item:not(:last-child)::after { content: ""; position: absolute; left: 3.5px; top: 18px; bottom: -10px; width: 1px; background: var(--border); }
+.cx-tl-item[data-state="now"]::before { background: var(--selected, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--selected, var(--primary)) 20%, transparent); }
+.cx-tl-item[data-state="now"] .cx-tl-title { font-weight: 600; }
+.cx-tl-item[data-state="next"] { opacity: .55; }
+.cx-tl-desc { margin: 0; font-size: 13px; color: var(--muted-foreground); }
+.cx-tl-desc:empty { display: none; }
+/* ── Stepper (stepper.muten): bars across, numbered dots down ── */
+.cx-stp { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 480px; }
+.cx-stp-step { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.cx-stp-bar { height: 4px; }
+.cx-stp-bar > .cn-progress-indicator { width: 0; transition: width 260ms cubic-bezier(.22, 1, .36, 1); }
+.cx-stp-step[data-state="done"] .cx-stp-bar > .cn-progress-indicator, .cx-stp-step[data-state="now"] .cx-stp-bar > .cn-progress-indicator { width: 100%; }
+.cx-stp-dot, .cx-stp-desc { display: none; }
+.cx-stp-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cx-stp-step[data-state="now"] .cx-stp-label { color: var(--foreground); font-weight: 500; }
+.cx-stp[data-orientation="vertical"] { grid-template-columns: 1fr; gap: 0; max-width: 360px; }
+.cx-stp[data-orientation="vertical"] .cx-stp-step { flex-direction: row; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 20px; }
+.cx-stp[data-orientation="vertical"] .cx-stp-step:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--border); }
+.cx-stp[data-orientation="vertical"] .cx-stp-step[data-state="done"]:not(:last-child)::after { background: var(--primary); }
+.cx-stp[data-orientation="vertical"] .cx-stp-bar { display: none; }
+.cx-stp[data-orientation="vertical"] .cx-stp-dot { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 99px; border: 1px solid var(--border); background: var(--background); font-size: 13px; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+.cx-stp-check { display: none; width: 14px; height: 14px; }
+.cx-stp[data-orientation="vertical"] [data-state="done"] .cx-stp-dot { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
+.cx-stp[data-orientation="vertical"] [data-state="done"] .cx-stp-num { display: none; }
+.cx-stp[data-orientation="vertical"] [data-state="done"] .cx-stp-check { display: block; }
+.cx-stp[data-orientation="vertical"] [data-state="now"] .cx-stp-dot { border-color: var(--selected, var(--primary)); color: var(--foreground); box-shadow: 0 0 0 3px color-mix(in srgb, var(--selected, var(--primary)) 18%, transparent); }
+.cx-stp[data-orientation="vertical"] .cx-stp-text { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
+.cx-stp[data-orientation="vertical"] .cx-stp-label { white-space: normal; font-size: 14px; }
+.cx-stp[data-orientation="vertical"] .cx-stp-desc { display: block; margin: 0; font-size: 13px; color: var(--muted-foreground); }
+.cx-stp[data-orientation="vertical"] .cx-stp-desc:empty { display: none; }
+/* ── Code (code.js) ── */
+.cx-code { display: block; width: 100%; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.2); background: color-mix(in srgb, var(--muted) 45%, var(--background)); overflow: hidden; }
+.cx-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0 14px; font-size: 12px; color: var(--muted-foreground); font-family: "Geist Mono", ui-monospace, monospace; }
+.cx-code-pre { margin: 0; padding: 8px 14px 14px; overflow-x: auto; font: 13px/1.65 "Geist Mono", ui-monospace, monospace; }
+
+/* ── a picker button inside an InputGroup (MoneyField's currency, PhoneField's country): it fills the group's
+   height with an even 3px inset instead of overflowing it, and the input gives way so nothing spills ── */
+.cn-input-group-addon:has(> .cx-cc) { align-self: stretch; height: auto; padding: 3px !important; }
+.cn-input-group-addon > .cx-cc { height: 100%; min-height: 0; padding-inline: 8px; border-radius: calc(var(--radius) * .6); }
+.cn-input-group > .cn-input-group-input { min-width: 0; }
+/* rows and columns the kit's modules build (the artifact page called them pg-line / pg-stack) */
+.cx-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
+.cx-line-start { justify-content: flex-start; }
+.cx-vline { display: flex; flex-direction: column; align-items: center; gap: 14px; }
+.cx-cc[data-mf-cur] { min-width: 3.75rem; }
+/* ImageUpload (dates.js): the zone, its line and its buttons, each with room around them */
+.cx-up-host { display: flex; flex-direction: column; gap: 10px; }
+.cx-up-host > .cx-drop-msg { font-size: 13px; line-height: 1.45; min-height: 0; }
+.cx-up-host > .cx-line:not(:has(> button:not([hidden]))) { display: none; }
+
+/* ── the value bubble and the end labels are optional on every slider (scale-slider / range-slider / slider) ── */
+.cx-sl-host[data-bubble="off"] .cx-sl-bubble, .cx-mslider-host[data-bubble="off"] .mslider-bubble { display: none; }
+.cx-sl-host[data-bubble="off"] .cx-slider { margin-top: 6px; }
+.cx-mslider-host[data-bubble="off"] .mslider { padding-top: 6px; }
+.cx-sl-host[data-bubble="drag"] .cx-sl-bubble, .cx-mslider-host[data-bubble="drag"] .mslider-bubble { opacity: 0; scale: .9; transition: opacity 140ms ease, scale 140ms ease; }
+.cx-sl-host[data-bubble="drag"]:is(:active, :focus-within) .cx-sl-bubble, .cx-mslider-host[data-bubble="drag"]:is(:active, :focus-within) .mslider-bubble { opacity: 1; scale: 1; }
+.cx-sl-host[data-ends="off"] .cx-sl-scale { display: none; }
+
+/* ── Field horizontal: the label on the left in one line; the control and its help (or error) stacked on the right ── */
+.style-nova .cn-field.cn-field-orientation-horizontal { display: grid; grid-template-columns: var(--field-label, 10rem) minmax(0, 1fr); column-gap: 20px; row-gap: 6px; align-items: start; }
+.style-nova .cn-field.cn-field-orientation-horizontal > .cn-label { grid-column: 1; grid-row: 1 / span 3; padding-top: 7px; white-space: nowrap; }
+.style-nova .cn-field.cn-field-orientation-horizontal > :not(.cn-label) { grid-column: 2; }
+
+/* PasswordField (kit.password): the meter breathes under the field; the four bars are full, rounded segments */
+.cx-pwd-host .cx-pw-meter { margin-top: 10px; gap: 10px; }
+.cx-pwd-host .cx-pw-bars { gap: 6px; }
+.cx-pwd-host .cx-pw-bars .cn-progress { height: 6px; border-radius: 99px; overflow: hidden; }
+.cx-pwd-host .cx-pw-rules { gap: 8px; margin-top: 14px; }
+/* Empty keeps a readable measure instead of stretching across the page; VirtualList fills its container */
+.style-nova .cn-empty { width: 100%; max-width: 26rem; margin-inline: auto; }
+.cx-vl-host { display: block; width: 100%; }
+/* Stepper: the dot holds the number OR the check, never both (mu-icon's own display would win over a bare class) */
+.cx-stp .cx-stp-dot > .cx-stp-check { display: none; }
+.cx-stp[data-orientation="vertical"] .cx-stp-step[data-state="done"] .cx-stp-dot > .cx-stp-check { display: block; }
+.cx-stp[data-orientation="vertical"] .cx-stp-step[data-state="done"] .cx-stp-dot > .cx-stp-num { display: none; }
+
+/* ── NavButton / NavBar (nav-button.muten): the «you are here» marker is chosen, the button is any Btn ── */
+.cx-navbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
+.cx-navbar[data-orientation="vertical"] { flex-direction: column; align-items: stretch; width: 100%; max-width: 240px; }
+.cx-navbar[data-orientation="vertical"] > .cx-nav { justify-content: flex-start; }
+.cx-nav-label:empty { display: none; }
+.style-nova .cn-button.cx-nav[data-marker="fill"][aria-pressed="true"] { background: var(--selected-soft); color: var(--selected); }
+.cx-nav[data-marker="fill"]::after, .cx-nav[data-marker="none"]::after { display: none; }
+.style-nova .cn-button.cx-nav[data-marker="line"][aria-pressed="true"][aria-pressed] { background: transparent; color: var(--foreground); }
+.cx-nav[data-marker="line"][aria-pressed="true"]::after { left: 10px; right: 10px; bottom: 0; width: auto; height: 2px; margin: 0; border-radius: 2px; }
+.style-nova .cn-button.cx-nav[data-marker="none"][aria-pressed="true"][aria-pressed] { background: transparent; color: var(--foreground); font-weight: 600; }
+.cx-navbar[data-orientation="vertical"] > .cx-nav[data-marker="dot"][aria-pressed="true"]::after { left: auto; right: 10px; bottom: auto; top: 50%; margin: -2px 0 0; }
+.cx-vl-host .cx-pages-wrap { max-width: none; }
+.mu-stack.cx-car-view { display: block; width: 100%; }   /* the track sizes its columns in % of its width: the view must be a block, not a shrink-to-fit row */
+/* KitWidget while its kit loads: the inbox and the assistant keep their final height with the skeleton shimmer */
+.cx-mx-host.cx-kw-wait:empty { display: block; height: 640px; border-radius: calc(var(--radius) * 1.6); background: linear-gradient(90deg, var(--sk-a) 0%, var(--sk-b) 50%, var(--sk-a) 100%); background-size: 200% 100%; animation: cx-sk 1.3s linear infinite; }
+.cx-bot.cx-kw-wait:empty { display: block; height: 520px; border-radius: calc(var(--radius) * 1.6); background: linear-gradient(90deg, var(--sk-a) 0%, var(--sk-b) 50%, var(--sk-a) 100%); background-size: 200% 100%; animation: cx-sk 1.3s linear infinite; }
+@media (max-width: 480px) { .cx-mx-host.cx-kw-wait:empty { height: 600px; } }
+/* Fundamentos (docs): the radius and shadow scales drawn with the real tokens */
+.cx-radii { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
+.cx-radius, .cx-shadow { display: grid; place-items: center; width: 112px; height: 80px; font-size: 12px; color: var(--muted-foreground); font-family: var(--font-mono); }
+.cx-radius { border: 1px solid var(--border); background: var(--muted); border-radius: calc(var(--radius) * var(--r, 1)); }
+.cx-shadow { border-radius: var(--radius); background: var(--card); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
+.cx-shadow[data-level="xs"] { box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
+.cx-shadow[data-level="sm"] { box-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04); }
+.cx-shadow[data-level="md"] { box-shadow: 0 6px 16px -6px rgb(0 0 0 / .16), 0 2px 4px -2px rgb(0 0 0 / .06); }
+.cx-shadow[data-level="lg"] { box-shadow: 0 18px 40px -12px rgb(0 0 0 / .25), 0 4px 10px -4px rgb(0 0 0 / .08); }
+
+/* ── floating parts (kit/overlays.js): a trigger and a panel that rises to the top layer ── */
+.cx-ov { display: inline-flex; position: relative; }
+.cx-ov.cx-ov-zone { display: flex; width: 100%; }
+.cx-ov-trigger { display: inline-flex; }
+.cx-ov-zone > .cx-ov-trigger { display: flex; width: 100%; }
+.cx-ov-behavior { display: none; }
+.cx-ov-content[popover] { position: fixed; inset: auto; margin: 0; border: 0; overflow: visible; width: var(--w, auto); max-width: calc(100vw - 16px); color: var(--popover-foreground); }
+.cx-ov-content:not([popover]) { display: none; }
+.cx-ov-content[popover]:popover-open { display: flex; flex-direction: column; }
+/* menus: items are buttons laid out as rows; the label grows, the shortcut sits at the end */
+.cx-menu { gap: 0; padding: 4px; max-height: min(24rem, calc(100dvh - 32px)); overflow-y: auto; }
+.cx-menu-item { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 8px; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: default; border-radius: calc(var(--radius) * .7); outline: none; }
+.cx-menu-item:focus, .cx-menu-item:focus-visible { background: var(--accent); color: var(--accent-foreground); }
+.cx-menu-item[data-variant="destructive"] { color: var(--destructive); }
+.cx-menu-item[data-variant="destructive"]:focus { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); }
+.cx-menu-item > .mu-icon { width: 16px; height: 16px; flex: none; color: var(--muted-foreground); }
+.cx-menu-item[data-variant="destructive"] > .mu-icon { color: var(--destructive); }
+.cx-menu-label { flex: 1; min-width: 0; }
+.cx-menu-item .cn-dropdown-menu-shortcut:empty { display: none; }
+.cx-menu-check { padding-right: 32px; }
+.cx-menu-mark, .cx-menu-dot { position: absolute; right: 10px; display: grid; place-items: center; width: 16px; height: 16px; }
+.cx-menu-check[aria-checked="false"] .cx-menu-mark { visibility: hidden; }
+.cx-menu-dot::after { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; transform: scale(0); transition: transform 120ms ease; }
+.cx-menu-check[aria-checked="true"] .cx-menu-dot::after { transform: scale(1); }
+.cx-menu-group { display: flex; flex-direction: column; }
+.cx-menu .cn-dropdown-menu-separator { display: block; height: 1px; margin: 4px -4px; background: var(--border); }
+.cx-menu .cn-dropdown-menu-label { display: block; padding: 6px 8px 4px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
+/* the context zone */
+.cx-ctx-zone { align-items: center; justify-content: center; min-height: 140px; border: 1.5px dashed var(--input); border-radius: calc(var(--radius) * 1.2); color: var(--muted-foreground); font-size: 14px; user-select: none; -webkit-touch-callout: none; }
+.cx-ctx-zone[data-open] { border-color: var(--ring); background: color-mix(in srgb, var(--muted) 40%, transparent); }
+/* menubar */
+.cx-menubar { display: flex; flex-direction: row; align-items: center; width: fit-content; }
+.cx-menubar .cn-menubar-trigger { border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 500; padding: 3px 8px; border-radius: calc(var(--radius) * .6); cursor: default; }
+.cx-menubar .cx-ov-trigger[data-open] .cn-menubar-trigger, .cx-menubar .cn-menubar-trigger:hover { background: var(--muted); }
+/* navigation menu */
+.cx-navmenu { display: flex; flex-direction: row; align-items: center; gap: 2px; }
+.cx-navmenu-trigger { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; padding: 6px 10px; border-radius: calc(var(--radius) * .8); cursor: pointer; }
+.cx-navmenu-trigger:hover, .cx-ov-trigger[data-open] .cx-navmenu-trigger { background: var(--muted); }
+.cx-navmenu-trigger .cn-navigation-menu-trigger-icon { width: 12px; height: 12px; transition: rotate 200ms ease; }
+.cx-ov-trigger[data-open] .cn-navigation-menu-trigger-icon { rotate: 180deg; }
+.cx-navmenu-panel[popover]:popover-open { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 4px; padding: 8px; border-radius: calc(var(--radius) * 1.2); background: var(--popover); box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 10px 30px -10px rgb(0 0 0 / .25); }
+.cx-navmenu-link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: calc(var(--radius) * .8); color: inherit; text-decoration: none; }
+.cx-navmenu-link:hover, .cx-navmenu-link:focus-visible { background: var(--muted); outline: none; }
+.cx-navmenu-title { font-size: 14px; font-weight: 500; }
+.cx-navmenu-desc { font-size: 13px; line-height: 1.4; color: var(--muted-foreground); }
+.cx-navmenu-desc:empty { display: none; }
+/* the panels' enter / exit (Nova's animate-in reads data-open / data-closed, which the kit sets) */
+.cx-ov-content[data-open] { animation: cx-ov-in 120ms cubic-bezier(.22, 1, .36, 1); }
+.cx-ov-content[data-closed] { animation: cx-ov-out 100ms ease forwards; }
+@keyframes cx-ov-in { from { opacity: 0; transform: scale(.96) translateY(var(--ov-dy, -4px)); } }
+@keyframes cx-ov-out { to { opacity: 0; transform: scale(.97); } }
+.cx-ov-content[data-side="top"] { --ov-dy: 4px; }
+@media (prefers-reduced-motion: reduce) { .cx-ov-content[data-open], .cx-ov-content[data-closed] { animation-duration: 1ms; } }
+
+/* ── Modal mode sheet (sheet.muten): a full-height panel from a side, or full-width from the top/bottom ── */
+.cx-modal[data-mode="sheet"] { top: 0; bottom: 0; right: 0; width: min(26rem, calc(100% - 2rem)); max-height: none; border-radius: 0; overflow: hidden; transition: transform 300ms cubic-bezier(.32, .72, 0, 1); transform: translateX(100%); }
+.cx-modal[data-mode="sheet"][data-side="left"] { right: auto; left: 0; transform: translateX(-100%); }
+.cx-modal[data-mode="sheet"]:is([data-side="top"], [data-side="bottom"]) { left: 0; right: 0; width: 100%; height: auto; max-height: min(80dvh, 40rem); }
+.cx-modal[data-mode="sheet"][data-side="top"] { bottom: auto; transform: translateY(-100%); }
+.cx-modal[data-mode="sheet"][data-side="bottom"] { top: auto; transform: translateY(100%); }
+.cx-modal-root[data-open="true"] > .cx-modal[data-mode="sheet"] { transform: none; }
+.cx-modal[data-mode="sheet"] .cx-modal-body { flex: 1; }
+
+/* ── Command (command.muten): search on top, the list scrolls under it ── */
+.cx-command { display: flex; flex-direction: column; width: 100%; max-width: 480px; border-radius: calc(var(--radius) * 1.2); border: 1px solid var(--border); background: var(--popover); overflow: hidden; }
+.cx-command-input { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border); }
+.cx-command-input > .mu-icon { width: 16px; height: 16px; flex: none; color: var(--muted-foreground); }
+.cx-command-input input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; outline: none; font: inherit; font-size: 14px; color: inherit; }
+.cx-command-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; padding: 4px; }
+.cx-cmd-group { display: flex; flex-direction: column; padding: 2px 0; }
+.cx-cmd-group[hidden], .cx-cmd-item[hidden], .cx-cmd-sep[hidden], .cx-command-empty[hidden] { display: none; }
+.cx-cmd-label { padding: 6px 8px 4px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
+.cx-cmd-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: calc(var(--radius) * .7); background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: default; outline: none; }
+.cx-cmd-item > .mu-icon { width: 16px; height: 16px; flex: none; color: var(--muted-foreground); }
+.cx-cmd-item[data-selected] { background: var(--accent); color: var(--accent-foreground); }
+.cx-cmd-text { flex: 1; min-width: 0; }
+.cx-cmd-item .cn-command-shortcut { font-size: 12px; letter-spacing: .08em; color: var(--muted-foreground); }
+.cx-cmd-item .cn-command-shortcut:empty { display: none; }
+.cx-cmd-sep { display: block; height: 1px; margin: 4px -4px; background: var(--border); }
+.cx-command-empty { padding: 24px 8px; text-align: center; font-size: 14px; color: var(--muted-foreground); }
+.cx-cmd-behavior { display: none; }
+.cx-palette .cx-modal-body { padding: 0; }
+.cx-palette .cx-command { max-width: none; border: 0; border-radius: 0; background: transparent; }
+/* SplitButton: the chevron is a square joined to the main button */
+.cx-split-caret { width: 32px; padding: 0; }
+.cx-toaster-host { display: none; }
+.cx-tip-wrap { display: inline-flex; }
+.cx-ov-content[popover]:not(:popover-open) { display: none !important; }   /* a closed panel must not take the click: muten's .mu-stack display beats the browser's own rule */
+
+/* ── Breadcrumb / Pagination (links) ── */
+.cx-breadcrumb { display: block; }
+.cx-bc-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted-foreground); }
+.cx-bc-item { color: inherit; text-decoration: none; }
+a.cx-bc-item:hover { color: var(--foreground); }
+.cn-breadcrumb-page.cx-bc-item { color: var(--foreground); font-weight: 500; }
+.cx-bc-sep, .cx-bc-more { display: inline-grid; place-items: center; }
+.cx-bc-sep .mu-icon { width: 14px; height: 14px; }
+.cx-bc-more .mu-icon { width: 16px; height: 16px; }
+.cx-pl-row { display: flex; flex-direction: row; align-items: center; gap: 4px; }
+.cx-pl-more { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--muted-foreground); }
+/* ── AppSidebar ── */
+.cx-sidebar { display: flex; width: 248px; flex: none; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 35%, var(--background)); transition: width 200ms cubic-bezier(.22, 1, .36, 1); overflow: hidden; }
+.cx-sidebar[data-collapsed="true"] { width: 56px; }
+.cx-sb-inner { display: flex; flex-direction: column; width: 100%; gap: 4px; padding: 8px; }
+.cx-sb-head, .cx-sb-foot { display: flex; flex-direction: column; gap: 4px; }
+.cx-sb-foot { margin-top: auto; }
+.cx-sb-group { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 4px; }
+.cx-sb-glabel { padding: 0 8px 4px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
+.cx-sb-glabel:empty { display: none; }
+.cx-sb-menu { display: flex; flex-direction: column; gap: 2px; }
+.cx-sb-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: calc(var(--radius) * .7); background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; white-space: nowrap; }
+.cx-sb-item:hover { background: var(--accent); }
+.cx-sb-item[data-active="true"] { background: var(--selected-soft); color: var(--selected); font-weight: 500; }
+.cx-sb-item > .mu-icon { width: 16px; height: 16px; flex: none; }
+.cx-sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.cx-sb-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; }
+.cx-sb-count:empty { display: none; }
+.cx-sidebar[data-collapsed="true"] :is(.cx-sb-label, .cx-sb-count, .cx-sb-glabel) { display: none; }
+.cx-sidebar[data-collapsed="true"] .cx-sb-item { justify-content: center; padding: 0; }
+/* ── Message (message.muten): the kit's bubbles as parts ── */
+.cx-chat-msg[data-variant="received"] { align-self: flex-start; align-items: flex-start; }
+.cx-chat-msg[data-variant="sent"] { align-self: flex-end; align-items: flex-end; }
+.cx-chat-msg[data-variant="received"] .cx-chat-bubble { background: var(--background); box-shadow: 0 0 0 1px var(--border); border-bottom-left-radius: 4px; }
+.cx-chat-msg[data-variant="sent"] .cx-chat-bubble { background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: 4px; }
+.cx-chat-msg[data-variant="sent"] .cx-chat-bubble .cx-text { color: inherit; opacity: .8; }
+.cx-msg-bubble { display: flex; flex-direction: column; gap: 4px; }
+.cx-msg-body { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; }
+.cx-chat-tag:empty { display: none; }
+.cx-tick { width: 14px; height: 14px; }
+.cx-tick[data-status="read"] { color: var(--info); }
+.cx-chat-msg[data-variant="sent"] .cx-tick[data-status="read"] { color: color-mix(in srgb, var(--info) 70%, var(--primary-foreground)); }
+.cx-chat-day { align-self: center; }
+.cx-msg-scroller { height: var(--h, 22rem); flex: none; width: 100%; max-width: 440px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4); }
+.cx-msg-behavior { display: none; }
+.cx-chat-img { display: block; width: 220px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) * .8); background: var(--bg, var(--muted)) center / cover; }
+/* ── Attachment ── */
+.cx-attach { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 280px; padding: 8px 12px 8px 8px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1); background: var(--background); color: var(--foreground); text-decoration: none; }
+.cx-attach:hover { background: var(--accent); }
+.cx-attach-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: calc(var(--radius) * .7); background: var(--muted); color: var(--muted-foreground); }
+.cx-attach[data-kind="pdf"] .cx-attach-ic { background: color-mix(in srgb, var(--destructive) 12%, transparent); color: var(--destructive); }
+.cx-attach[data-kind="image"] .cx-attach-ic { background: var(--info-soft); color: var(--info); }
+.cx-attach[data-kind="sheet"] .cx-attach-ic { background: var(--success-soft); color: var(--success); }
+.cx-attach-ic .mu-icon { width: 18px; height: 18px; }
+.cx-attach-text { display: flex; flex-direction: column; min-width: 0; }
+.cx-attach-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cx-attach-size { font-size: 12px; color: var(--muted-foreground); }
+.cx-attach-size:empty { display: none; }
+
+/* ── Estudio: Toolbar, StatusBar, ZoomControl, CanvasViewport, Inspector, TreeView, FolderPicker, SortableList ── */
+.cx-toolbar { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.1); background: var(--popover); box-shadow: 0 4px 14px -6px rgb(0 0 0 / .18); width: fit-content; }
+.cx-toolbar-group { display: flex; flex-direction: row; align-items: center; gap: 2px; }
+.cx-toolbar-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); flex: none; }
+.cx-status { display: flex; flex-direction: row; align-items: center; gap: 16px; width: 100%; min-height: 28px; padding: 0 12px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 45%, var(--background)); font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+.cx-status-item { display: flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
+.cx-status-item .mu-icon { width: 13px; height: 13px; }
+.cx-status-spacer { flex: 1; }
+.cx-zoom { display: inline-flex; flex-direction: row; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); width: fit-content; }
+.cx-zoom-value { min-width: 64px; font-variant-numeric: tabular-nums; }
+.cx-canvas { position: relative; display: block; width: 100%; height: var(--h, 360px); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.2); overflow: hidden; }
+.cx-canvas-host { position: absolute; inset: 0; display: block; }
+.cx-canvas-host canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
+.cx-canvas-host canvas:active { cursor: grabbing; }
+.cx-canvas-over { position: absolute; inset: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; }
+.cx-canvas-over > * { pointer-events: auto; }
+.cx-insp { display: flex; flex-direction: column; width: 100%; max-width: 320px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.2); background: var(--background); overflow: hidden; }
+.cx-insp-sec + .cx-insp-sec { border-top: 1px solid var(--border); }
+.cx-insp-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
+.cx-insp-head:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
+.cx-insp-head .cx-acc-chev { width: 14px; height: 14px; color: var(--muted-foreground); transition: rotate 200ms ease; }
+.cx-insp-head[aria-expanded="false"] .cx-acc-chev { rotate: -90deg; }
+.cx-insp-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 12px; }
+.cx-insp-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; }
+.cx-insp-label { font-size: 13px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cx-insp-ctl { display: flex; flex-direction: row; align-items: center; min-width: 0; }
+.cx-insp-ctl .cx-nf, .cx-insp-ctl .cx-vector { max-width: 100%; }
+.cx-tree-host { display: block; width: 100%; max-width: 320px; }
+.cx-tree { display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.2); }
+.cx-tree-row { display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; padding-right: 8px; border: 0; border-radius: calc(var(--radius) * .6); background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; outline: none; }
+.cx-tree-row:hover { background: var(--accent); }
+.cx-tree-row:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); }
+.cx-tree-row[aria-selected="true"] { background: var(--selected-soft); color: var(--selected); font-weight: 500; }
+.cx-tree-chev, .cx-tree-ic { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; color: var(--muted-foreground); }
+.cx-tree-chev svg, .cx-tree-ic svg { width: 14px; height: 14px; }
+.cx-tree-row[aria-selected="true"] .cx-tree-ic { color: inherit; }
+.cx-tree-chev-none { visibility: hidden; }
+.cx-tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cx-folder-host { display: flex; flex-direction: column; gap: 6px; }
+.cx-folder-btn[data-connected] { color: var(--selected); border-color: color-mix(in srgb, var(--selected) 40%, var(--border)); }
+.cx-folder-msg { text-align: left; margin: 0; }
+.cx-folder-msg:empty { display: none; }
+.cx-slist-host { display: block; width: 100%; max-width: 320px; }
+.cx-sl-anchor { display: none; }
+.cx-insp-sec { display: flex; flex-direction: column; }
+.cx-insp { max-width: 380px; }
+.cx-stp-text { display: flex; flex-direction: column; min-width: 0; }
+
+/* ── Marketing: Pill, FeatureGrid, FeatureRows, BentoGallery, LogoCloud, StatBand, Pricing, GradientBlinds ── */
+.cx-pill { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; width: fit-content; padding: 6px 14px; border: 1px solid var(--border); border-radius: 99px; background: var(--background); font-size: 13px; font-weight: 500; }
+.cx-pill .mu-icon { width: 15px; height: 15px; }
+.cx-pill[data-tone="brand"] { border-color: color-mix(in srgb, var(--selected) 30%, transparent); background: var(--selected-soft); color: var(--selected); }
+.cx-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; width: 100%; }
+@media (min-width: 900px) { .cx-features { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
+.cx-feature { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4); background: var(--card); }
+.cx-feature-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: calc(var(--radius) * .8); background: var(--selected-soft); color: var(--selected); }
+.cx-feature-ic .mu-icon { width: 18px; height: 18px; }
+.cx-feature-t { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
+.cx-feature-d { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); }
+.cx-frows { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--border); }
+.cx-frow { display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 7fr); gap: 16px; align-items: baseline; padding: 20px 8px; border-bottom: 1px solid var(--border); }
+.cx-frow-i { font-family: var(--font-mono); font-size: 13px; color: var(--muted-foreground); }
+.cx-frow-t { margin: 0; font-size: 17px; font-weight: 600; }
+.cx-frow-d { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); }
+@media (max-width: 640px) { .cx-frow { grid-template-columns: 40px minmax(0, 1fr); } .cx-frow-d { grid-column: 2; } }
+.cx-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: var(--row, 160px); gap: 12px; width: 100%; }
+.cx-bento-cell { grid-column: span var(--span, 2); grid-row: span var(--rows, 1); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px; border-radius: calc(var(--radius) * 1.4); background: var(--muted); overflow: hidden; }
+@media (max-width: 640px) { .cx-bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .cx-bento-cell { grid-column: auto; grid-row: auto; min-height: 140px; } }
+.cx-logos { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; width: 100%; }
+.cx-logo { display: flex; align-items: center; height: 28px; color: var(--muted-foreground); opacity: .7; filter: grayscale(1); transition: opacity 160ms, filter 160ms; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
+.cx-logo:hover { opacity: 1; filter: none; color: var(--foreground); }
+.cx-logo img, .cx-logo .mu-image, .cx-logo .mu-icon { height: 100%; width: auto; }
+.cx-statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 160px), 1fr)); width: 100%; border-block: 1px solid var(--border); }
+.cx-statband-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 12px; text-align: center; }
+.cx-statband-cell + .cx-statband-cell { border-left: 1px solid var(--border); }
+.cx-statband-value { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
+.cx-statband-label { font-size: 13px; color: var(--muted-foreground); }
+.cx-countup { display: inline; }
+.cx-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; width: 100%; align-items: stretch; }
+.cx-tier { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.6); background: var(--card); }
+.cx-tier[data-featured="on"] { border-color: var(--selected); box-shadow: 0 0 0 1px var(--selected), 0 18px 40px -20px color-mix(in srgb, var(--selected) 45%, transparent); }
+.cx-tier-badge { position: absolute; top: -11px; left: 24px; padding: 2px 10px; border-radius: 99px; background: var(--selected); color: var(--selected-foreground); font-size: 12px; font-weight: 600; }
+.cx-tier-head { display: flex; flex-direction: column; gap: 4px; }
+.cx-tier-name { font-size: 15px; font-weight: 600; }
+.cx-tier-desc { margin: 0; font-size: 13px; color: var(--muted-foreground); }
+.cx-tier-price { display: flex; flex-direction: row; align-items: baseline; gap: 4px; }
+.cx-tier-amount { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
+.cx-tier-period { font-size: 14px; color: var(--muted-foreground); }
+.cx-tier-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
+.cx-tier-body > :last-child { margin-top: auto; }
+.cx-tier-feature { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
+.cx-tier-feature .mu-icon { width: 16px; height: 16px; color: var(--selected); flex: none; }
+.cx-blinds { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8; }
+.cx-hero-blinds { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 280px; width: 100%; padding: 40px 20px; border-radius: calc(var(--radius) * 1.6); overflow: hidden; text-align: center; }
+.cx-hero-blinds > :not(.cx-blinds) { position: relative; z-index: 1; }
+/* NavPill: sticky glass; it firms up as the page scrolls (scroll-driven animation; plain glass where unsupported) */
+.cx-navpill-wrap { position: sticky; top: 12px; z-index: var(--z-sticky, 20); display: flex; justify-content: center; width: 100%; padding: 0 12px; }
+.cx-navpill { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 64rem; padding: 8px 8px 8px 18px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--background) 70%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
+.cx-navpill a:not(.cn-button) { color: var(--muted-foreground); text-decoration: none; font-size: 14px; }
+.cx-navpill a:not(.cn-button):hover { color: var(--foreground); }
+@supports (animation-timeline: scroll()) {
+  .cx-navpill { animation: cx-navpill-firm linear both; animation-timeline: scroll(); animation-range: 0 120px; }
+  @keyframes cx-navpill-firm { to { background: color-mix(in srgb, var(--background) 92%, transparent); box-shadow: 0 10px 30px -14px rgb(0 0 0 / .25); } }
+}
+
+/* ── Big surfaces (a landing page, a sign-in): Btn and the fields share one taller scale, xl 44 · 2xl 52 ── */
+.style-nova .cn-button-size-xl { height: 44px; gap: 8px; padding-inline: 18px; border-radius: 10px; font-size: 15px; }
+.style-nova .cn-button-size-2xl { height: 52px; gap: 10px; padding-inline: 24px; border-radius: 12px; font-size: 15.5px; }
+.style-nova .cn-button-size-icon-xl { width: 44px; height: 44px; border-radius: 10px; }
+.style-nova .cn-button-size-icon-2xl { width: 52px; height: 52px; border-radius: 12px; }
+.style-nova :is(.cn-button-size-xl, .cn-button-size-2xl, .cn-button-size-icon-xl, .cn-button-size-icon-2xl) svg:not([class*="size-"]) { width: 18px; height: 18px; }
+/* a field takes its size on itself (Input/InputGroup size) or from any container around it (FieldSet), so the kit's
+   own fields (PasswordField, PhoneField…) follow too */
+.style-nova :is(.cn-input:not(.cn-input-group-input), .cn-input-group):is([data-size="xl"], .cx-fieldset[data-fields="xl"] *) { height: 44px; border-radius: 10px; font-size: 15px; }
+.style-nova :is(.cn-input:not(.cn-input-group-input), .cn-input-group):is([data-size="2xl"], .cx-fieldset[data-fields="2xl"] *) { height: 52px; border-radius: 12px; font-size: 15.5px; }
+.style-nova .cn-input:not(.cn-input-group-input):is([data-size="xl"], [data-size="2xl"], .cx-fieldset[data-fields] *) { padding-inline: 14px; }
+.style-nova .cn-input-group:is([data-size="xl"], [data-size="2xl"], .cx-fieldset[data-fields] *) { padding-inline: 4px; }
+.style-nova .cn-input-group:is([data-size="xl"], [data-size="2xl"], .cx-fieldset[data-fields] *) .cn-input-group-input { font-size: inherit; height: 100%; }
+.style-nova .cn-input-group:is([data-size="xl"], [data-size="2xl"], .cx-fieldset[data-fields] *) .cn-input-group-addon { font-size: inherit; padding-inline: 10px 4px; }
+.style-nova .cx-fieldset[data-fields] .cn-label { font-size: 14px; font-weight: 600; }
+/* filled: the soft field of a landing (muted fill, no line); it turns to the page color with the ring on focus */
+.style-nova :is(.cn-input:not(.cn-input-group-input), .cn-input-group):is([data-variant="filled"], .cx-fieldset[data-look="filled"] *) { background: var(--muted); border-color: transparent; }
+.style-nova .cn-input:not(.cn-input-group-input):is([data-variant="filled"], .cx-fieldset[data-look="filled"] *):focus-visible,
+.style-nova .cn-input-group:is([data-variant="filled"], .cx-fieldset[data-look="filled"] *):focus-within { background: var(--background); border-color: var(--ring); }
+.style-nova .cn-input-group:is([data-variant="filled"], .cx-fieldset[data-look="filled"] *) .cn-input-group-input { background: transparent; }
+.cx-fieldset { display: flex; flex-direction: column; gap: 18px; }
+
+/* ── Field pieces: FieldSeparator (a line with a word in the middle) and FieldHead (a label with an action beside it) ── */
+.cn-field-separator { position: relative; display: flex; align-items: center; justify-content: center; height: 20px; }
+.cn-field-separator > .cn-separator { position: absolute; left: 0; right: 0; top: 50%; }
+.cn-field-separator-content { position: relative; padding: 0 10px; background: var(--background); color: var(--muted-foreground); font-size: 13px; }
+.cn-field:has(> .cx-field-head) { flex-direction: column; }
+.cn-field:has(> .cx-field-head) > .cn-label:empty { display: none; }
+.cx-field-head { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; }
+
+/* ── NavPill look="tray": a tray (radius 18) in the muted fill at rest; once the page moves it turns to glass and the
+   call to action (.cx-nav-cta) turns primary. On a phone the links, the language and «Entrar» (.cx-nav-hide-sm) fold
+   into the menu button (.cx-nav-menu) and the call to action stays. ── */
+.cx-navpill-wrap[data-look="tray"] { top: 16px; padding: 0; }
+.cx-navpill[data-look="tray"] { max-width: 1008px; height: 60px; padding: 0 8px 0 20px; gap: 32px; justify-content: flex-start; border: 0; border-radius: 18px; background: var(--muted); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
+.cx-navpill .cx-nav-links { display: flex; flex-direction: row; align-items: center; gap: 26px; }
+.cx-navpill[data-look="tray"] a:not(.cn-button) { font-size: 14.5px; font-weight: 500; }
+.cx-navpill a[aria-current="page"] { color: var(--foreground); }
+.cx-navpill[data-look="tray"] .cx-nav-cta { height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14.5px; background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(11 11 13 / .06); }
+.cx-navpill .cx-nav-menu { display: none; }
+@supports (animation-timeline: scroll()) {
+  .cx-navpill[data-look="tray"], .cx-navpill[data-look="tray"] .cx-nav-cta { animation-timeline: scroll(); animation-range: 0 64px; animation-fill-mode: both; animation-timing-function: linear; }
+  .cx-navpill[data-look="tray"] { animation-name: cx-tray-glass; }
+  .cx-navpill[data-look="tray"] .cx-nav-cta { animation-name: cx-tray-cta; }
+  @keyframes cx-tray-glass { to { background: color-mix(in srgb, var(--background) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 0 0 1px rgb(11 11 13 / .06), 0 12px 32px -18px rgb(11 11 13 / .35); } }
+  @keyframes cx-tray-cta { to { background: var(--primary); color: var(--primary-foreground); } }
+}
+@media (max-width: 640px) {
+  .cx-navpill-wrap[data-look="tray"] { padding: 0 12px; top: 12px; }
+  .cx-navpill[data-look="tray"] { height: 56px; gap: 8px; padding: 0 6px 0 16px; border-radius: 16px; }
+  .cx-navpill[data-look="tray"] .cx-nav-links, .cx-navpill[data-look="tray"] .cx-nav-hide-sm { display: none; }
+  .cx-navpill[data-look="tray"] .cx-nav-cta { height: 40px; padding: 0 14px; font-size: 14px; }
+  .cx-navpill .cx-nav-menu { display: inline-flex; }
+}
+@media (prefers-reduced-motion: reduce) { .cx-navpill[data-look="tray"], .cx-navpill[data-look="tray"] .cx-nav-cta { animation: none; } }
+
+/* ── PricingTier: was (the old price, struck), note (how it is billed) and lead (the line over the features) ── */
+.cx-tier-was { margin-left: 8px; color: var(--muted-foreground); text-decoration: line-through; font-size: 14px; }
+.cx-tier-note { margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
+.cx-tier-lead { color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
+.cx-tab .cn-badge { margin-left: 6px; }
+/* a group row inside a table (the plans compared, by topic) */
+.cn-table-row[data-group="on"] > .cn-table-cell { padding-top: 20px; font-weight: 600; font-size: 12px; color: var(--muted-foreground); }
+
+/* ── Stepper look="list": a numbered list for «how it works»: ruled rows, a number in a round chip (the current one
+   filled), the step in strong type and its line under it. No bars, no checks. ── */
+.cx-stp[data-look="list"] { display: flex; flex-direction: column; gap: 0; max-width: none; }
+.cx-stp[data-look="list"] .cx-stp-step { flex-direction: row; align-items: flex-start; gap: 18px; padding: 20px 0; border-top: 1px solid var(--border); }
+.cx-stp[data-look="list"] .cx-stp-step:last-child { border-bottom: 1px solid var(--border); }
+.cx-stp[data-look="list"] .cx-stp-step::after, .cx-stp[data-look="list"] .cx-stp-bar, .cx-stp[data-look="list"] .cx-stp-check { display: none; }
+.cx-stp[data-look="list"] .cx-stp-dot { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 99px; background: var(--muted); color: var(--foreground); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 200ms ease, color 200ms ease; }
+.cx-stp[data-look="list"] .cx-stp-dot { border: 0; box-shadow: none; }
+.cx-stp[data-look="list"] [data-state] .cx-stp-dot { border: 0; box-shadow: none; }
+.cx-stp[data-look="list"] [data-state="now"] .cx-stp-dot { background: var(--primary); color: var(--primary-foreground); }
+.cx-stp[data-look="list"] [data-state="done"] .cx-stp-dot { background: var(--muted); color: var(--foreground); }
+.cx-stp[data-look="list"] .cx-stp-num { display: block; }
+.cx-stp[data-look="list"] .cx-stp-text { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; min-width: 0; }
+.cx-stp[data-look="list"] .cx-stp-label { white-space: normal; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--foreground); }
+.cx-stp[data-look="list"] .cx-stp-desc { display: block; margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-foreground); }
+
+/* ── WordLine: a line of words set as type (who it is for), muted words joined by dots in ink; a strong word stands out ── */
+.cx-wordline { display: block; margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.25; letter-spacing: -0.04em; font-weight: 700; color: color-mix(in srgb, var(--muted-foreground) 55%, var(--background)); text-wrap: pretty; }
+.cx-word { display: inline-block; white-space: nowrap; }
+.cx-word[data-tone="strong"] { color: var(--foreground); }
+/* the dot rides after each word, so a line breaks after it and never starts with one */
+.cx-word:not(:last-child)::after { content: " ·"; color: var(--foreground); margin-right: 0.28em; }
+
+/* ── Accordion size="lg": the questions of a landing page, taller rows and bigger type ── */
+.style-nova .cn-accordion[data-size="lg"] .cn-accordion-trigger { padding-block: 22px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
+.style-nova .cn-accordion[data-size="lg"] .cn-accordion-trigger .cx-acc-chev { width: 18px; height: 18px; }
+.style-nova .cn-accordion[data-size="lg"] .cn-accordion-content-inner { padding-bottom: 22px; font-size: 15.5px; line-height: 1.65; max-width: 680px; color: var(--muted-foreground); }
+
+/* ── DeviceFrame: a phone or a browser window around a picture of a product ── */
+.cx-device { position: relative; display: flex; flex-direction: column; flex: none; overflow: hidden; background: var(--background); box-shadow: 0 0 0 1px var(--border), 0 30px 60px -34px rgb(11 11 13 / .45); }
+.cx-device[data-kind="phone"] { width: 280px; padding: 6px; border-radius: 44px; }
+.cx-device[data-kind="browser"] { width: 100%; }
+.cx-device[data-sized="true"] { width: var(--w); }
+.cx-device > :not(img) { flex: 1; min-height: 0; border-radius: inherit; }
+.cx-device[data-kind="phone"] > :not(img) { border-radius: 38px; }
+.cx-device[data-kind="browser"] > :not(img) { border-radius: 0 0 13px 13px; }
+.cx-device[data-kind="phone"] > img { display: block; width: 100%; height: auto; border-radius: 38px; object-fit: cover; object-position: top; }
+.cx-device[data-kind="browser"] { border-radius: 14px; padding-top: 36px; }
+.cx-device[data-kind="browser"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 18px 18px, var(--border) 4px, transparent 4.5px), radial-gradient(circle at 34px 18px, var(--border) 4px, transparent 4.5px), radial-gradient(circle at 50px 18px, var(--border) 4px, transparent 4.5px), var(--muted); }
+.cx-device[data-kind="browser"] > img { display: block; width: 100%; height: auto; }
+.cx-device[data-crop="true"] { height: var(--h); }
+.cx-device[data-crop="true"] > img { height: 100%; object-fit: cover; object-position: top; }
+.cx-device[data-crop="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(to bottom, transparent, var(--background)); pointer-events: none; }
+
+/* ── LiveStack: news that keeps arriving; the newest in front, the older ones step back behind it ── */
+.cx-live { position: relative; display: block; width: 100%; max-width: 380px; height: var(--live-h, 200px); }
+.cx-live-card { position: absolute; left: 0; right: 0; top: 0; z-index: calc(10 - var(--i, 0)); display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: calc(var(--radius) * 1.6); border: 1px solid var(--border); background: var(--card); color: var(--card-foreground); box-shadow: 0 18px 36px -24px rgb(11 11 13 / .45); transform-origin: top center; transform: translateY(calc(var(--i, 0) * 14px)) scale(calc(1 - var(--i, 0) * 0.05)); opacity: calc(1 - var(--i, 0) * 0.28); transition: transform 560ms cubic-bezier(.23, 1, .32, 1), opacity 420ms ease, filter 420ms ease; }
+.cx-live-card[data-enter] { transform: translateY(-28px) scale(.96); opacity: 0; filter: blur(4px); }
+.cx-live-card + .cx-live-card + .cx-live-card + .cx-live-card { opacity: 0; }
+.cx-live-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--muted); color: var(--foreground); }
+.cx-live-ic svg { width: 18px; height: 18px; }
+.cx-live-card[data-tone="ok"] .cx-live-ic { background: var(--success-soft); color: var(--success); }
+.cx-live-card[data-tone="wait"] .cx-live-ic { background: var(--warning-soft); color: var(--warning); }
+.cx-live-card[data-tone="info"] .cx-live-ic { background: var(--selected-soft); color: var(--selected); }
+.cx-live-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.cx-live-tx b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cx-live-tx span { font-size: 13px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cx-live-card small { flex: none; align-self: flex-start; font-size: 12px; color: var(--muted-foreground); }
+@media (prefers-reduced-motion: reduce) { .cx-live-card { transition: none; } }
+
+/* ── Press: anything you press gives way a little (0.97), so the page feels it heard you ── */
+.style-nova .cn-button { transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: 160ms; transition-timing-function: cubic-bezier(.23, 1, .32, 1); }
+.style-nova .cn-button:active:not(:disabled) { transform: scale(0.97); }